/* ================================================================= ITECH GROUP OS — DESIGN TOKENS The single source of truth for the whole app. Every colour, radius and width is declared here and NOWHERE else, so the look changes from this block rather than from a sweep through the pages. Accent is signal cyan by deliberate choice: the ITECH brand file reserves it for internal applications, and it is how staff tell an internal tool apart from the public brand at a glance. Two themes, toggled by [data-theme] on (js/theme.js), and two directions, toggled by [dir] (js/i18n.js). Both are first-class — nothing here assumes LTR or assumes dark. ================================================================= */ :root { /* Brand — identical in both themes */ --accent: #00b4d8; --accent-rgb: 0, 180, 216; --accent-strong: #0091ad; --on-accent: #04121a; --navy: #0f1e3a; --navy-deep: #0a1528; /* Status — shared */ --ok: #22c55e; --ok-rgb: 34, 197, 94; --warn: #f59e0b; --warn-rgb: 245, 158, 11; --danger: #ef4444; --danger-rgb: 239, 68, 68; --info: #60a5fa; --info-rgb: 96, 165, 250; --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; /* Surfaces — DARK (default) */ --bg: #0b1220; --surface: #131e33; --surface-2: #1b2942; --surface-3: #24344f; --border: #2b3c58; --text: #e6edf6; --text-dim: #93a4bd; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28); /* Phone-first width/padding scale. Tuned once, here — the topbar, the nav and the page content all read from it so their edges line up. */ --content-max: 100%; --pad: 14px; --nav-w: 0px; } :root[data-theme="light"] { --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef2f7; --surface-3: #e3e9f1; --border: #d5dde8; --text: #12161c; --text-dim: #5b6472; --accent: #0091ad; --accent-strong: #007a93; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(16, 30, 54, .06), 0 8px 20px rgba(16, 30, 54, .07); } @media (min-width: 700px) { :root { --content-max: 100%; --pad: 20px; --nav-w: 232px; } } @media (min-width: 1100px) { :root { --content-max: 1180px; --pad: 28px; } } @media (min-width: 1500px) { :root { --content-max: 1420px; --pad: 36px; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; } /* Arabic gets Cairo, the family used across every system in the group. Applied by direction rather than by language so a mixed page still renders correctly. */ [dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button { font-family: "Cairo", "Segoe UI", Tahoma, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 650; } h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 .8em; } /* ---------------------------------------------------------------- shell */ #app { min-height: 100vh; } .shell { display: flex; min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px var(--pad); background: var(--surface); border-bottom: 1px solid var(--border); } .topbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .01em; color: var(--text); } .topbar .brand .mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); display: grid; place-items: center; color: var(--on-accent); font-size: 12px; font-weight: 800; } .topbar .spacer { flex: 1; } .sidenav { display: none; width: var(--nav-w); flex: 0 0 var(--nav-w); background: var(--surface); border-inline-end: 1px solid var(--border); padding: 14px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } @media (min-width: 700px) { .sidenav { display: block; } } .sidenav a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 2px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: .92rem; font-weight: 500; text-decoration: none; } .sidenav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .sidenav a.active { background: rgba(var(--accent-rgb), .14); color: var(--accent); font-weight: 620; } .sidenav .nav-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); opacity: .75; margin: 16px 11px 6px; } /* Phone: the nav becomes a bottom bar. Five destinations maximum — more than that and the targets get too small to hit while holding a phone one-handed. */ .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 700px) { .tabbar { display: none; } } .tabbar a { flex: 1; text-align: center; padding: 8px 4px 9px; color: var(--text-dim); font-size: .68rem; text-decoration: none; } .tabbar a .ico { display: block; font-size: 1.15rem; line-height: 1.3; } .tabbar a.active { color: var(--accent); } .main { flex: 1; min-width: 0; } .page { max-width: var(--content-max); margin: 0 auto; padding: var(--pad) var(--pad) 90px; } @media (min-width: 700px) { .page { padding-bottom: 40px; } } .page-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .page-head .grow { flex: 1; min-width: 200px; } .page-head .sub { color: var(--text-dim); font-size: .88rem; margin: 0; } /* ---------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; } .card > h3:first-child, .card > h2:first-child { margin-top: 0; } .card-head { display: flex; align-items: center; gap: 10px; margin: -14px -14px 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; font-weight: 620; } .card-head .spacer { flex: 1; } .grid { display: grid; gap: 12px; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* minmax(0, 1fr) everywhere on purpose: plain `1fr` has an implicit auto minimum, and one wide child (a table with a min-width) pushes the whole page past the viewport. */ .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 13px; } .stat .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); } .stat .value { font-size: 1.55rem; font-weight: 700; line-height: 1.15; margin-top: 3px; } .stat .value.sm { font-size: 1.15rem; } .stat.accent .value { color: var(--accent); } .stat.warn .value { color: var(--warn); } .stat.danger .value { color: var(--danger); } /* ---------------------------------------------------------------- badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 620; white-space: nowrap; background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border); } .badge.ok { background: rgba(var(--ok-rgb), .14); color: var(--ok); border-color: rgba(var(--ok-rgb), .3); } .badge.warn { background: rgba(var(--warn-rgb), .14); color: var(--warn); border-color: rgba(var(--warn-rgb), .3); } .badge.danger { background: rgba(var(--danger-rgb), .14); color: var(--danger); border-color: rgba(var(--danger-rgb), .3); } .badge.info { background: rgba(var(--info-rgb), .14); color: var(--info); border-color: rgba(var(--info-rgb), .3); } .badge.accent { background: rgba(var(--accent-rgb), .14); color: var(--accent); border-color: rgba(var(--accent-rgb), .3); } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 40px; /* thumb target — never shrink this below 40 */ } .btn:hover:not(:disabled) { background: var(--surface-3); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); } .btn.danger { background: rgba(var(--danger-rgb), .12); border-color: rgba(var(--danger-rgb), .4); color: var(--danger); } .btn.ghost { background: transparent; } .btn.sm { padding: 5px 10px; min-height: 32px; font-size: .82rem; } .btn.block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------------------------------------------------------------- forms */ .field { margin-bottom: 12px; } .field > label { display: block; margin-bottom: 5px; font-size: .8rem; font-weight: 600; color: var(--text-dim); } .field .hint { font-size: .76rem; color: var(--text-dim); margin-top: 4px; } input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="search"], select, textarea { width: 100%; padding: 9px 11px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: .92rem; min-height: 40px; } :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: var(--surface); } input:focus, select:focus, textarea:focus { outline: 2px solid rgba(var(--accent-rgb), .45); outline-offset: 1px; border-color: var(--accent); } textarea { min-height: 84px; resize: vertical; } .check { display: flex; align-items: center; gap: 8px; font-size: .9rem; } .check input { width: auto; min-height: auto; } .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .filters select, .filters input { width: auto; min-width: 130px; flex: 1 1 130px; } /* ---------------------------------------------------------------- tables */ /* Wide content scrolls INSIDE its own container. The page body must never scroll sideways — that is what makes a table unusable on a phone. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; } @media (min-width: 700px) { .table-wrap { margin: 0; padding: 0; } } table { width: 100%; border-collapse: collapse; font-size: .88rem; } th, td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; white-space: nowrap; background: var(--surface-2); } tbody tr:hover { background: var(--surface-2); } td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } tr.clickable { cursor: pointer; } .table-empty { padding: 26px 14px; text-align: center; color: var(--text-dim); } /* Input-heavy tables stack into cards on a phone. Four form controls squeezed into 390px of table columns is not a small version of the desktop layout, it is an unusable one — the fields collapse to a few characters wide and the unit box shows one letter. Each cell carries a data-label so the column header survives the transformation. */ @media (max-width: 699px) { table.stack-phone thead { display: none; } table.stack-phone, table.stack-phone tbody, table.stack-phone tr, table.stack-phone td { display: block; width: 100%; } table.stack-phone tr { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px; background: var(--surface-2); } table.stack-phone tr:hover { background: var(--surface-2); } table.stack-phone td { border: 0; padding: 4px 0; text-align: start; } table.stack-phone td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; } /* The row-delete cell gets no label and sits full width as its own control. */ table.stack-phone td.row-action { padding-top: 8px; } table.stack-phone td.row-action .btn { width: 100%; } /* A stacked table has nothing left to scroll sideways. */ .table-wrap:has(table.stack-phone) { overflow-x: visible; margin: 0; padding: 0; } } /* ---------------------------------------------------------------- states */ .empty { text-align: center; padding: 40px 20px; color: var(--text-dim); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); } .empty .ico { font-size: 2rem; opacity: .6; display: block; margin-bottom: 8px; } .alert { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); font-size: .88rem; margin-bottom: 12px; } .alert.error { background: rgba(var(--danger-rgb), .1); border-color: rgba(var(--danger-rgb), .35); color: var(--danger); } .alert.success { background: rgba(var(--ok-rgb), .1); border-color: rgba(var(--ok-rgb), .35); color: var(--ok); } .alert.warn { background: rgba(var(--warn-rgb), .1); border-color: rgba(var(--warn-rgb), .35); color: var(--warn); } .alert.info { background: rgba(var(--info-rgb), .1); border-color: rgba(var(--info-rgb), .35); color: var(--info); } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--radius-sm); height: 14px; margin-bottom: 8px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* Toasts. Every API failure surfaces here — an action that silently does nothing is worse than one that fails loudly. */ .toasts { position: fixed; inset-inline: 12px; bottom: 76px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } @media (min-width: 700px) { .toasts { inset-inline: auto; inset-inline-end: 20px; bottom: 20px; align-items: flex-end; } } .toast { pointer-events: auto; max-width: 460px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: .88rem; animation: rise .18s ease; } .toast.error { border-color: rgba(var(--danger-rgb), .5); color: var(--danger); } .toast.success { border-color: rgba(var(--ok-rgb), .5); color: var(--ok); } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- misc */ .muted { color: var(--text-dim); } .small { font-size: .82rem; } .mono { font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", ui-monospace, monospace; } .nowrap { white-space: nowrap; } .right { text-align: end; } .mt { margin-top: 14px; } .mb0 { margin-bottom: 0; } .hidden { display: none !important; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; padding: 0 0 14px 20px; border-inline-start: 2px solid var(--border); margin-inline-start: 5px; } [dir="rtl"] .timeline li { padding: 0 20px 14px 0; } .timeline li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); } .timeline li:last-child { border-color: transparent; } .timeline .when { font-size: .75rem; color: var(--text-dim); } .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(1200px 600px at 50% -10%, rgba(var(--accent-rgb), .12), transparent), var(--bg); } .login-card { width: 100%; max-width: 380px; } .login-card .mark-lg { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); display: grid; place-items: center; color: var(--on-accent); font-weight: 800; } .offline-bar { background: rgba(var(--warn-rgb), .16); color: var(--warn); border-bottom: 1px solid rgba(var(--warn-rgb), .35); padding: 6px var(--pad); font-size: .82rem; text-align: center; }