/* ============================================================================= style.css — design tokens + shared components. Bump ?v=N in index.html whenever this file changes (shared hosting caches hard). Everything themes through the :root variables below. Never hardcode a hex in a component rule — the whole point is that the next project changes 6 lines. RTL is not an afterthought: every directional rule uses logical properties (inset-inline-start, margin-inline-start, padding-inline, text-align:start), so one stylesheet serves both directions and does the flipping. ========================================================================== */ :root { /* Ink & paper */ --ink: #1c1e21; /* primary text */ --ink2: #5b6169; /* secondary text */ --paper: #f6f7f9; /* app background */ --card: #ffffff; /* raised surfaces */ --line: #e2e5ea; /* hairlines, borders */ --muted: #8b929b; /* placeholder, disabled */ /* Sidebar (dark) */ --side: #191c21; --side2: #23272e; --side-ink: #c9cfd7; /* Accent — brass */ --accent: #e48424; --accent-ink: #ffffff; --accent-soft: #fdf1e4; /* Status */ --green: #1f9254; --red: #c8372d; --amber: #c98a00; --green-soft: #e6f4ec; --red-soft: #fbeae9; --amber-soft: #fdf3e0; /* Geometry */ --radius: 10px; --radius-sm: 6px; --side-w: 250px; --topbar-h: 60px; --shadow: 0 1px 2px rgba(16,20,26,.06), 0 4px 16px rgba(16,20,26,.06); /* Type */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Noto Kufi Arabic", sans-serif; --font-head: "Fraunces", Georgia, "Noto Kufi Arabic", serif; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } html[lang="ar"] body { font-family: "Noto Kufi Arabic", var(--font-body); } h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0 0 .4em; letter-spacing: -.01em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------------------------------------------------------------- shell --- */ .app { min-height: 100%; } .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--side-w); background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; z-index: 40; } .brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.07); } .brand img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; } .brand .mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border-radius: 8px; font-family: var(--font-head); font-weight: 700; } .brand b { color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; display: block; } .brand small { color: var(--muted); font-size: .72rem; } .nav { padding: 12px 10px; overflow-y: auto; flex: 1; } .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 2px; border-radius: var(--radius-sm); color: var(--side-ink); text-decoration: none; font-size: .92rem; border-inline-start: 3px solid transparent; } .nav a:hover { background: var(--side2); color: #fff; } .nav a.on { background: var(--side2); color: #fff; border-inline-start-color: var(--accent); } .nav .group { padding: 14px 12px 6px; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .sidefoot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.07); font-size: .75rem; color: var(--muted); } .main { margin-inline-start: var(--side-w); min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding-inline: 22px; background: var(--card); border-bottom: 1px solid var(--line); } .topbar h1 { margin: 0; font-size: 1.15rem; } .topbar .spacer { flex: 1; } .burger { display: none; background: none; border: 0; font-size: 1.4rem; color: var(--ink); cursor: pointer; } .content { padding: 22px; flex: 1; } @media (max-width: 900px) { .sidebar { transform: translateX(calc(var(--side-w) * -1)); transition: transform .2s ease; } html[dir="rtl"] .sidebar { transform: translateX(var(--side-w)); } body.nav-open .sidebar { transform: none; } .main { margin-inline-start: 0; } .burger { display: block; } .content { padding: 16px; } } /* ---------------------------------------------------------------- cards --- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .stat .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); } .stat .v { font-family: var(--font-head); font-size: 1.8rem; font-weight: 600; margin-top: 4px; } .stat .s { font-size: .8rem; color: var(--muted); } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; } .panel > .head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .panel > .head h2 { margin: 0; font-size: 1rem; } .panel > .head .spacer { flex: 1; } .panel > .body { padding: 18px; } .panel > .body.flush { padding: 0; } /* ---------------------------------------------------------------- table --- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } thead th { text-align: start; font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--paper); } td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; } td.actions { text-align: end; white-space: nowrap; } .empty { padding: 34px; text-align: center; color: var(--muted); } /* --------------------------------------------------------------- badges --- */ .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 500; white-space: nowrap; background: var(--paper); color: var(--ink2); border: 1px solid var(--line); } .badge.green { background: var(--green-soft); color: var(--green); border-color: transparent; } .badge.red { background: var(--red-soft); color: var(--red); border-color: transparent; } .badge.amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; } .badge.grey { background: var(--paper); color: var(--ink2); } /* -------------------------------------------------------------- buttons --- */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.3; } .btn:hover { filter: brightness(.94); } .btn:disabled { opacity: .55; cursor: not-allowed; filter: none; } .btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); } .btn.ghost:hover { background: var(--paper); filter: none; } .btn.danger { background: var(--red); border-color: var(--red); color: #fff; } .btn.sm { padding: 5px 10px; font-size: .8rem; } .btn.link { background: none; border: 0; color: var(--accent); padding: 4px; } .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ---------------------------------------------------------------- forms --- */ .fld { margin-bottom: 14px; } .fld > label { display: block; font-size: .8rem; font-weight: 500; color: var(--ink2); margin-bottom: 5px; } .fld input, .fld select, .fld textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; font-size: .9rem; text-align: start; } .fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .fld .hint { font-size: .76rem; color: var(--muted); margin-top: 4px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; } @media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } } .check { display: flex; align-items: center; gap: 8px; font-size: .88rem; } .check input { width: auto; } /* --------------------------------------------------------------- modals --- */ .modal-bg { position: fixed; inset: 0; background: rgba(20,24,30,.5); display: grid; place-items: center; padding: 20px; z-index: 60; } .modal { background: var(--card); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.25); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; } .modal .head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); } .modal .head h2 { margin: 0; font-size: 1.05rem; } .modal .head .spacer { flex: 1; } .modal .body { padding: 20px; } .modal .foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); } .modal.wide { max-width: 860px; } /* --------------------------------------------------------------- toasts --- */ .toasts { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 90; display: grid; gap: 8px; } .toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: var(--radius-sm); font-size: .88rem; box-shadow: var(--shadow); max-width: 380px; } .toast.err { background: var(--red); } .toast.ok { background: var(--green); } /* ----------------------------------------------------------- auth screen --- */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--side); } .auth .box { width: 100%; max-width: 380px; background: var(--card); border-radius: var(--radius); padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .auth .box h1 { text-align: center; margin-bottom: 4px; } .auth .box .sub { text-align: center; color: var(--muted); font-size: .85rem; margin-bottom: 22px; } .auth .box .btn { width: 100%; justify-content: center; } .auth .langs { text-align: center; margin-top: 16px; font-size: .8rem; } .auth .err { background: var(--red-soft); color: var(--red); padding: 9px 12px; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 14px; } .setup-note { background: var(--amber-soft); color: var(--amber); padding: 12px 14px; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 16px; } /* Permission matrix */ .perm-area { margin-bottom: 16px; } .perm-area h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink2); font-family: var(--font-body); } .perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 16px; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; } .wrapbox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; word-break: break-all; }