/* ===================================================================== MAK Overseas ERP Brand tokens carried over from the public site and the client portal so the ERP reads as the same company: cyan #00AEEF + red #E31F25 on a deep navy ink, Playfair for headings and Roboto for text. Three theme states, deliberately: an explicit choice stamps data-theme on , and the default "system" setting stamps nothing, so only prefers-color-scheme separates light from dark. Every colour is defined on bare :root first and only redefined in the dark blocks. Direction is handled with logical properties (inline-start / inline-end) rather than left / right, so the Arabic layout is the same stylesheet mirrored by dir="rtl" rather than a second set of rules to keep in step. ===================================================================== */ :root{ --brand:#00AEEF; --brand-600:#0093CC; --brand-700:#0079A8; --accent:#E31F25; --accent-600:#C4171C; --ink:#0A1B29; --ink-2:#12314A; --body:#48606F; --muted:#7B8C99; --line:#E3EAEF; --line-2:#D2DDE5; --bg:#FFFFFF; --surface:#F5F9FC; --flax:#F3EADA; --card:#FFFFFF; --on-brand:#FFFFFF; --on-solid:#FFFFFF; --brand-wash:#E1F4FD; --danger-wash:#FCE8E9; --danger-line:#F6C9CB; --danger-ink:#9B1419; --ok-line:#BFE5D6; --info-line:#B8E3F7; --warn-line:#F3DDB8; --veil:rgba(255,255,255,.94); --badge-bg:#E31F25; --badge-fg:#FFFFFF; --ok:#12805C; --ok-bg:#E4F5EE; --warn:#B26A00; --warn-bg:#FDF1DF; --bad:#C4171C; --bad-bg:#FCE8E9; --info:#0079A8; --info-bg:#E1F4FD; --idle:#8496A3; --idle-bg:#EFF3F6; --av-mix:16%; --av-l:32%; --radius:14px; --radius-lg:22px; --radius-sm:9px; --shadow-sm:0 1px 2px rgba(10,27,41,.06), 0 2px 8px rgba(10,27,41,.05); --shadow:0 4px 12px rgba(10,27,41,.07), 0 18px 40px -18px rgba(10,27,41,.25); --shadow-lg:0 10px 30px rgba(10,27,41,.10), 0 40px 80px -40px rgba(10,27,41,.45); --f-display:"Playfair Display", Georgia, "Times New Roman", serif; --f-body:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --f-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sidebar-w:260px; --topbar-h:60px; } /* Arabic reads better with a little more line height and a font stack that actually has the glyphs; Playfair has no Arabic, so headings fall back. */ [dir="rtl"]{ --f-display:"Segoe UI", "Noto Naskh Arabic", "Traditional Arabic", Tahoma, serif; --f-body:"Segoe UI", "Noto Naskh Arabic", Tahoma, Arial, sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --brand:#38C0F0; --brand-600:#5ACCF4; --brand-700:#8BDCF8; --accent:#FF6B70; --accent-600:#FF8A8E; --ink:#E9F2F8; --ink-2:#C5D9E5; --body:#A6BECC; --muted:#7C94A3; --line:#1E3341; --line-2:#2B4555; --bg:#0D1A23; --surface:#091319; --flax:#2A2214; --card:#101F2A; --on-brand:#062430; --on-solid:#0D1A23; --brand-wash:#0E2E3D; --danger-wash:#3A1618; --danger-line:#5C2427; --danger-ink:#FFB3B6; --ok-line:#1B5241; --info-line:#1B4256; --warn-line:#5A421A; --veil:rgba(16,31,42,.94); --badge-bg:#C8262C; --ok:#4FD0A1; --ok-bg:#0D3227; --warn:#E9A441; --warn-bg:#32250E; --bad:#FF8A8E; --bad-bg:#3A1618; --info:#8BDCF8; --info-bg:#0E2E3D; --idle:#8398A6; --idle-bg:#16242E; --av-mix:30%; --av-l:76%; --shadow-sm:0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.24); --shadow:0 4px 12px rgba(0,0,0,.34), 0 18px 40px -18px rgba(0,0,0,.6); --shadow-lg:0 10px 30px rgba(0,0,0,.42), 0 40px 80px -40px rgba(0,0,0,.8); } } :root[data-theme="dark"]{ --brand:#38C0F0; --brand-600:#5ACCF4; --brand-700:#8BDCF8; --accent:#FF6B70; --accent-600:#FF8A8E; --ink:#E9F2F8; --ink-2:#C5D9E5; --body:#A6BECC; --muted:#7C94A3; --line:#1E3341; --line-2:#2B4555; --bg:#0D1A23; --surface:#091319; --flax:#2A2214; --card:#101F2A; --on-brand:#062430; --on-solid:#0D1A23; --brand-wash:#0E2E3D; --danger-wash:#3A1618; --danger-line:#5C2427; --danger-ink:#FFB3B6; --ok-line:#1B5241; --info-line:#1B4256; --warn-line:#5A421A; --veil:rgba(16,31,42,.94); --badge-bg:#C8262C; --ok:#4FD0A1; --ok-bg:#0D3227; --warn:#E9A441; --warn-bg:#32250E; --bad:#FF8A8E; --bad-bg:#3A1618; --info:#8BDCF8; --info-bg:#0E2E3D; --idle:#8398A6; --idle-bg:#16242E; --av-mix:30%; --av-l:76%; --shadow-sm:0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.24); --shadow:0 4px 12px rgba(0,0,0,.34), 0 18px 40px -18px rgba(0,0,0,.6); --shadow-lg:0 10px 30px rgba(0,0,0,.42), 0 40px 80px -40px rgba(0,0,0,.8); } /* ------------------------------------------------------------- reset */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--surface); color:var(--body); font-family:var(--f-body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--f-display); color:var(--ink); font-weight:600; line-height:1.22; letter-spacing:-.01em; margin:0 0 .4em} h1{font-size:1.7rem} h2{font-size:1.3rem} h3{font-size:1.08rem} h4{font-size:.98rem} p{margin:0 0 .8em} a{color:var(--brand-700); text-decoration:none} a:hover{color:var(--accent)} img,svg{max-width:100%} img{height:auto; display:block} ul,ol{margin:0; padding:0; list-style:none} button,input,select,textarea{font:inherit; color:inherit} code,.mono{font-family:var(--f-mono); font-size:.9em} :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset:2px; border-radius:6px; } .hidden{display:none !important} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .muted{color:var(--muted)} .small{font-size:.85rem} .nowrap{white-space:nowrap} .right{text-align:end} .center{text-align:center} .ico{flex:none; vertical-align:-.15em} .stack{display:flex; flex-direction:column; gap:14px} .row{display:flex; align-items:center; gap:10px} .row-wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .spacer{flex:1} .num{font-variant-numeric:tabular-nums} /* ----------------------------------------------------------- buttons */ .btn{ --btn-bg:var(--brand); --btn-fg:var(--on-brand); display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--btn-bg); color:var(--btn-fg); font-weight:500; font-size:.92rem; padding:10px 18px; border:1px solid transparent; border-radius:100px; cursor:pointer; white-space:nowrap; text-decoration:none; transition:transform .16s, background .16s, box-shadow .16s, border-color .16s; } .btn:hover:not(:disabled){transform:translateY(-1px); background:var(--brand-600); color:var(--on-brand)} .btn:active{transform:translateY(0)} .btn:disabled{opacity:.55; cursor:not-allowed} .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)} .btn-ghost:hover:not(:disabled){background:var(--ink); color:var(--on-solid); border-color:var(--ink)} .btn-soft{background:var(--card); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-sm)} .btn-soft:hover:not(:disabled){background:var(--surface); color:var(--ink); border-color:var(--line-2)} .btn-danger{background:var(--accent)} .btn-danger:hover:not(:disabled){background:var(--accent-600)} .btn-sm{padding:6px 13px; font-size:.85rem} .btn-icon{padding:8px; border-radius:50%} .btn-block{width:100%} .inline-form{display:inline-flex} /* ------------------------------------------------------------ layout */ .app{display:flex; min-height:100vh} .sidebar{ width:var(--sidebar-w); flex:none; background:var(--ink); color:#C5D9E5; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; border-inline-end:1px solid rgba(255,255,255,.06); } .sidebar-head{padding:16px 18px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.08)} .lockup{display:inline-flex; align-items:center; gap:10px; color:inherit} .lockup-text{display:flex; flex-direction:column; line-height:1.2; min-width:0} .lockup-text strong{color:#FFF; font-size:.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .lockup-text small{color:#7E9BAC; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase} .brand-mark{flex:none} .side-nav{flex:1; overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:2px} .side-nav a{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; color:#B9CEDB; font-size:.9rem; transition:background .15s, color .15s; } .side-nav a:hover{background:rgba(255,255,255,.07); color:#FFF} .side-nav a.is-active{background:var(--brand); color:var(--on-brand); font-weight:500} .side-nav a.is-active .ico{color:inherit} .side-nav .nav-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .side-nav .nav-count{margin-inline-start:auto; background:var(--badge-bg); color:var(--badge-fg); font-size:.68rem; font-weight:600; padding:1px 7px; border-radius:100px} .side-sep{margin:10px 12px 6px; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:#5E7B8C} .sidebar-foot{padding:12px; border-top:1px solid rgba(255,255,255,.08)} .main{flex:1; min-width:0; display:flex; flex-direction:column} .topbar{ height:var(--topbar-h); flex:none; background:var(--veil); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:0 18px; position:sticky; top:0; z-index:30; } .topbar h1{margin:0; font-size:1.08rem} .crumb{display:flex; align-items:center; gap:7px; min-width:0} .crumb a{color:var(--muted); font-size:.9rem} .crumb .sep{color:var(--line-2)} .search-box{position:relative; flex:1; max-width:380px} .search-box input{ width:100%; padding:8px 14px 8px 38px; border-radius:100px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-size:.9rem; } [dir="rtl"] .search-box input{padding:8px 38px 8px 14px} .search-box .ico{position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none} /* Back sits between the menu toggle and the title, where a browser would put it, and mirrors with the writing direction. */ .back-btn{flex:none; color:var(--muted)} .back-btn:hover{color:var(--ink); background:var(--surface); border-color:var(--line)} .icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid transparent; background:transparent; color:var(--ink); cursor:pointer; transition:background .15s; } .icon-btn:hover{background:var(--surface); border-color:var(--line)} .icon-btn .dot{position:absolute; top:6px; inset-inline-end:6px; min-width:16px; height:16px; padding:0 4px; border-radius:100px; background:var(--accent); color:#FFF; font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center} .content{padding:22px; flex:1; max-width:1500px; width:100%; margin-inline:auto} .page-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px} .page-head h1{margin:0} .page-head .sub{color:var(--muted); font-size:.9rem} .page-actions{margin-inline-start:auto; display:flex; gap:8px; flex-wrap:wrap} /* ------------------------------------------------------------- cards */ .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)} .card-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px} .card-head h2,.card-head h3{margin:0; font-size:1rem} .card-body{padding:18px} .card-foot{padding:12px 18px; border-top:1px solid var(--line); background:var(--surface); border-radius:0 0 var(--radius) var(--radius)} .grid{display:grid; gap:16px} .grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} /* KPI tiles: big number first, because that is what people came for. */ .kpi{display:flex; flex-direction:column; gap:6px; padding:16px 18px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; text-decoration:none; transition:transform .18s, box-shadow .18s} .kpi:hover{transform:translateY(-2px); box-shadow:var(--shadow)} .kpi::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--kpi-color,var(--brand))} .kpi-top{display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em} .kpi-top .ico{color:var(--kpi-color,var(--brand))} .kpi-value{font-family:var(--f-display); font-size:clamp(1.25rem,2.1vw,1.7rem); color:var(--ink); line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere} .kpi-sub{font-size:.84rem; color:var(--muted)} .kpi-badge{align-self:flex-start; margin-top:2px} /* ------------------------------------------------- module chooser */ .chooser{min-height:100vh; display:flex; flex-direction:column; background: radial-gradient(1100px 620px at 12% -10%, color-mix(in srgb,var(--brand) 16%, transparent), transparent 60%), radial-gradient(900px 520px at 92% 0%, color-mix(in srgb,var(--accent) 11%, transparent), transparent 55%), var(--surface); } .chooser-head{display:flex; align-items:center; gap:14px; padding:18px 26px} .chooser-body{flex:1; width:100%; max-width:1240px; margin-inline:auto; padding:20px 26px 50px} .chooser-title{text-align:center; margin-bottom:26px} .chooser-title h1{font-size:2rem; margin-bottom:.2em} .chooser-title p{color:var(--muted)} .tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:18px} .tile{ display:flex; flex-direction:column; gap:10px; padding:24px 20px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); text-decoration:none; position:relative; overflow:hidden; transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s; min-height:172px; } .tile:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--tile-color,var(--brand)) 45%, var(--line))} .tile::after{content:""; position:absolute; inset-inline-end:-38px; top:-38px; width:120px; height:120px; border-radius:50%; background:var(--tile-color,var(--brand)); opacity:.09; transition:opacity .2s} .tile:hover::after{opacity:.16} .tile-icon{ width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#FFF; background:var(--tile-color,var(--brand)); box-shadow:0 8px 20px -8px var(--tile-color,var(--brand)); } .tile h3{margin:2px 0 0; font-size:1.06rem; color:var(--ink)} .tile p{margin:0; font-size:.84rem; color:var(--muted); line-height:1.45} .tile-go{margin-top:auto; display:inline-flex; align-items:center; gap:6px; color:var(--tile-color,var(--brand)); font-size:.82rem; font-weight:500} [dir="rtl"] .tile-go .ico{transform:scaleX(-1)} /* ------------------------------------------------------------ tables */ .table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--card)} table.data{width:100%; border-collapse:collapse; font-size:.9rem} table.data th,table.data td{padding:10px 13px; text-align:start; vertical-align:middle} table.data thead th{ background:var(--surface); color:var(--muted); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; } table.data thead th a{color:inherit; display:inline-flex; align-items:center; gap:4px} table.data tbody tr{border-bottom:1px solid var(--line)} table.data tbody tr:last-child{border-bottom:0} table.data tbody tr:hover{background:var(--surface)} table.data td.num,table.data th.num{text-align:end; font-variant-numeric:tabular-nums} table.data .actions{display:flex; gap:4px; justify-content:flex-end} table.data .primary-cell{color:var(--ink); font-weight:500} .empty{padding:44px 20px; text-align:center; color:var(--muted)} .empty .ico{color:var(--line-2); margin-bottom:8px} .badge{display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:100px; font-size:.76rem; font-weight:500; white-space:nowrap; background:var(--idle-bg); color:var(--idle)} .badge-ok{background:var(--ok-bg); color:var(--ok)} .badge-warn{background:var(--warn-bg); color:var(--warn)} .badge-bad{background:var(--bad-bg); color:var(--bad)} .badge-info{background:var(--info-bg); color:var(--info)} .badge-idle{background:var(--idle-bg); color:var(--idle)} /* The hue comes from the name so a person keeps the same colour everywhere; lightness comes from the theme so it stays legible in both. */ .avatar{display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:color-mix(in srgb, hsl(var(--av-h,200) 62% 50%) var(--av-mix), var(--card)); color:hsl(var(--av-h,200) 62% var(--av-l)); font-size:.72rem; font-weight:700; flex:none; letter-spacing:.02em} /* A real photo where one exists; the initials disc is the fallback, and both occupy the same box so a list does not jump as photos load. */ .avatar-img{border-radius:50%; object-fit:cover; flex:none; display:inline-block; background:var(--surface); border:1px solid var(--line)} .photo-field{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .photo-field .preview{width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid var(--line-2); background:var(--surface)} .photo-lg{width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--line-2)} .pager{display:flex; gap:4px; align-items:center; justify-content:center; padding:14px 0; flex-wrap:wrap} .pg{min-width:34px; height:34px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--body); font-size:.86rem} .pg:hover{border-color:var(--brand); color:var(--brand)} .pg.is-active{background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600} .pg.is-off{opacity:.4; pointer-events:none} .pg.is-gap{border:0; background:none; pointer-events:none} /* Form controls that live inside a table row or a card footer rather than a .field -- the currency table, the attendance row editor, the bill-of-material and shipment line forms. Without this they fall back to the browser's own grey inset boxes, which look broken beside every other input in the system. Checkboxes and radios are excluded so the .switch toggle keeps working. */ table.data input:not([type=checkbox]):not([type=radio]), table.data select, table.data textarea, .card-foot input:not([type=checkbox]):not([type=radio]), .card-foot select, .card-foot textarea{ width:100%; padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-size:.86rem; transition:border-color .15s, box-shadow .15s; } table.data input:not([type=checkbox]):not([type=radio]):focus, table.data select:focus, table.data textarea:focus, .card-foot input:not([type=checkbox]):not([type=radio]):focus, .card-foot select:focus, .card-foot textarea:focus{ border-color:var(--brand); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); } table.data input[type=checkbox], .card-foot input[type=checkbox]{accent-color:var(--brand)} /* ------------------------------------------------------------- forms */ .form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 18px} .field{display:flex; flex-direction:column; gap:5px; min-width:0} .field-full{grid-column:1/-1} .field label{font-size:.83rem; font-weight:500; color:var(--ink)} .field .req{color:var(--accent)} .field input,.field select,.field textarea{ width:100%; padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-size:.92rem; transition:border-color .15s, box-shadow .15s; } /* Checkboxes and radios are not text boxes: they must keep their intrinsic size inside a .field, or they stretch across the row. */ .field input[type=checkbox],.field input[type=radio]{ width:auto; padding:0; accent-color:var(--brand)} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%, transparent); outline:none; } .field textarea{resize:vertical; min-height:76px; line-height:1.55} .field input[type=color]{padding:2px; height:38px; width:52px; cursor:pointer} .field .hint{color:var(--muted); font-size:.78rem} .field .err{color:var(--bad); font-size:.78rem} .field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--bad)} .form-heading{grid-column:1/-1; margin:14px 0 0; padding-bottom:6px; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-family:var(--f-body); font-weight:600} .form-heading:first-child{margin-top:0} .form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid var(--line)} .color-field{display:flex; align-items:center; gap:9px} .color-field code{color:var(--muted)} .switch{display:inline-flex; align-items:center; gap:9px; cursor:pointer; padding:4px 0} .switch input{position:absolute; opacity:0; width:0; height:0} .slider{width:42px; height:24px; border-radius:100px; background:var(--line-2); position:relative; transition:background .18s; flex:none} .slider::after{content:""; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#FFF; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.25)} .switch input:checked + .slider{background:var(--brand)} .switch input:checked + .slider::after{transform:translateX(18px)} [dir="rtl"] .switch input:checked + .slider::after{transform:translateX(-18px)} .switch-text{font-size:.86rem; color:var(--body)} /* Roles as a set of cards rather than a multi-select: a ctrl-click list is the control people most often get wrong, and the descriptions matter here. */ .role-picker{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; align-items:start} .role-opt{display:flex; align-items:flex-start; gap:9px; padding:10px 12px; cursor:pointer; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--card); transition:border-color .15s, background .15s} .role-opt:hover{border-color:var(--brand)} /* .field input sets width:100% for text boxes; a checkbox inside a field must opt out of that or it eats the whole row and the label collapses to zero. */ .role-opt input[type=checkbox]{width:auto !important; margin-top:3px; flex:none; padding:0 !important; accent-color:var(--brand)} .role-opt span{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0} .role-opt strong{font-size:.88rem; color:var(--ink); font-weight:500} .role-opt small{font-size:.76rem; color:var(--muted); line-height:1.4} .role-opt:has(input:checked){border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, var(--card))} .weekdays{display:flex; gap:6px; flex-wrap:wrap} .wd input{position:absolute; opacity:0; width:0; height:0} .wd span{display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:100px; border:1px solid var(--line-2); font-size:.82rem; cursor:pointer; background:var(--card); transition:all .15s} .wd input:checked + span{background:var(--brand); border-color:var(--brand); color:var(--on-brand)} .filters{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius)} .filters .field{gap:4px} .filters .field label{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)} .filters input,.filters select{min-width:130px; padding:7px 11px; font-size:.87rem} /* Inline "add a value" beside a reference select. The row keeps the select at full width so adding one does not make the field jump. */ .with-add{display:flex; gap:6px; align-items:center; flex-wrap:wrap} .with-add > select{flex:1; min-width:0} .with-add .add-btn{flex:none; padding:8px 10px} .add-inline{flex-basis:100%; display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:9px; margin-top:2px; border:1px dashed var(--line-2); border-radius:var(--radius-sm); background:var(--surface)} .add-inline input{flex:1 1 100px; min-width:90px; padding:6px 10px !important; font-size:.86rem !important} .add-inline .btn{flex:none} .add-inline .qa-msg{flex-basis:100%; color:var(--muted)} /* ------------------------------------------------------------ alerts */ .flash-stack{position:fixed; top:14px; inset-inline-end:14px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:min(420px,calc(100vw - 28px))} .flash{display:flex; align-items:flex-start; gap:10px; padding:12px 15px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); font-size:.9rem; animation:flashIn .28s cubic-bezier(.2,.8,.3,1)} @keyframes flashIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}} .flash-ok{border-inline-start:4px solid var(--ok)} .flash-error{border-inline-start:4px solid var(--bad)} .flash-warn{border-inline-start:4px solid var(--warn)} .flash-info{border-inline-start:4px solid var(--info)} .flash .close{margin-inline-start:auto; background:none; border:0; color:var(--muted); cursor:pointer; padding:0} /* The idle warning. Bottom of the screen rather than a modal: it must be noticeable without blocking the thing the person came back to finish. */ .idle-warn{position:fixed; inset-inline-end:16px; bottom:16px; z-index:300; max-width:min(340px, calc(100vw - 32px)); padding:14px 16px; background:var(--card); border:1px solid var(--warn-line); border-inline-start:4px solid var(--warn); border-radius:var(--radius); box-shadow:var(--shadow-lg); animation:flashIn .25s cubic-bezier(.2,.8,.3,1)} .idle-warn strong{display:block; color:var(--ink); font-size:.95rem; margin-bottom:3px} .idle-warn p{margin:0 0 10px; font-size:.86rem; color:var(--body)} .notice{display:flex; gap:11px; align-items:flex-start; padding:13px 16px; border-radius:var(--radius); border:1px solid var(--info-line); background:var(--info-bg); color:var(--ink); font-size:.9rem} .notice-warn{border-color:var(--warn-line); background:var(--warn-bg)} .notice-bad{border-color:var(--danger-line); background:var(--danger-wash); color:var(--danger-ink)} .alert-list{display:flex; flex-direction:column} .alert-item{display:flex; gap:12px; align-items:flex-start; padding:11px 18px; border-bottom:1px solid var(--line); text-decoration:none} .alert-item:last-child{border-bottom:0} .alert-item:hover{background:var(--surface)} .alert-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none} .alert-ok{background:var(--ok-bg); color:var(--ok)} .alert-warn{background:var(--warn-bg); color:var(--warn)} .alert-bad{background:var(--bad-bg); color:var(--bad)} .alert-info{background:var(--info-bg); color:var(--info)} .alert-body{min-width:0; flex:1} .alert-body strong{display:block; color:var(--ink); font-weight:500; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .alert-body span{font-size:.82rem; color:var(--muted)} /* ------------------------------------------------------------ charts */ .chart{width:100%; overflow:visible} .chart-legend{display:flex; gap:16px; flex-wrap:wrap; padding:10px 18px 0; font-size:.82rem} .chart-legend span{display:inline-flex; align-items:center; gap:6px; color:var(--muted)} .chart-legend i{width:10px; height:10px; border-radius:3px; display:inline-block} .spark{height:38px; width:100%} /* ------------------------------------------------------------ kanban */ .board{display:flex; gap:14px; overflow-x:auto; padding-bottom:12px; align-items:flex-start} .board-col{flex:0 0 300px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 200px)} .board-col-head{padding:11px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); border-radius:var(--radius) var(--radius) 0 0; z-index:1} .board-col-head h3{margin:0; font-size:.88rem; font-family:var(--f-body); font-weight:600} .board-col-head .count{margin-inline-start:auto; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:.74rem; padding:1px 8px; border-radius:100px} .board-col-body{padding:10px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; flex:1; min-height:60px} .board-col.drag-over{border-color:var(--brand); background:var(--brand-wash)} .kcard{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:11px 13px; box-shadow:var(--shadow-sm); cursor:grab; text-decoration:none; display:block; transition:transform .14s, box-shadow .14s, opacity .14s} .kcard:hover{transform:translateY(-2px); box-shadow:var(--shadow)} .kcard.dragging{opacity:.45; cursor:grabbing} .kcard-title{color:var(--ink); font-weight:500; font-size:.9rem; margin-bottom:5px; line-height:1.35} .kcard-meta{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.76rem; color:var(--muted)} .kcard-bar{height:3px; border-radius:2px; background:var(--line); margin-top:8px; overflow:hidden} .kcard-bar i{display:block; height:100%; background:var(--brand); border-radius:2px} /* -------------------------------------------------------- timelines */ .timeline{position:relative; padding-inline-start:26px} .timeline::before{content:""; position:absolute; inset-block:6px; inset-inline-start:8px; width:2px; background:var(--line)} .tl-item{position:relative; padding-bottom:18px} .tl-item::before{content:""; position:absolute; inset-inline-start:-22px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--card); border:2px solid var(--brand)} .tl-item.is-done::before{background:var(--brand)} .tl-item.is-bad::before{border-color:var(--bad)} .tl-when{font-size:.78rem; color:var(--muted)} .tl-title{color:var(--ink); font-weight:500; font-size:.92rem} /* ------------------------------------------------- stages / progress */ .stages{display:flex; gap:8px; flex-wrap:wrap} .stage-pill{display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:100px; border:1px solid var(--line); background:var(--card); font-size:.85rem} .stage-pill.is-active{border-color:var(--brand); background:var(--brand-wash); color:var(--brand-700); font-weight:500} .stage-pill.is-done{border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok)} .progress{height:8px; border-radius:100px; background:var(--line); overflow:hidden} .progress i{display:block; height:100%; background:var(--brand); border-radius:100px; transition:width .3s} .meter{display:flex; flex-direction:column; gap:5px} .meter-top{display:flex; justify-content:space-between; font-size:.84rem} .meter-top b{color:var(--ink); font-weight:500} /* ------------------------------------------------------- data lists */ .dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:.9rem; align-items:baseline} .dl dt{color:var(--muted); font-size:.82rem} .dl dd{margin:0; color:var(--ink)} .chips{display:flex; gap:6px; flex-wrap:wrap} .chip{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:100px; background:var(--surface); border:1px solid var(--line); font-size:.8rem; color:var(--body); text-decoration:none} .chip:hover{border-color:var(--brand); color:var(--brand)} .chip.is-on{background:var(--brand); border-color:var(--brand); color:var(--on-brand)} .tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto} .tabs a{padding:9px 15px; font-size:.9rem; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap} .tabs a:hover{color:var(--ink)} .tabs a.is-active{color:var(--brand); border-bottom-color:var(--brand); font-weight:500} /* ------------------------------------------------------------ labels */ .label-preview{display:inline-block; background:#FFF; border:1px solid var(--line-2); border-radius:6px; box-shadow:var(--shadow-sm); padding:0; overflow:hidden} .label-svg{display:block} .label-grid{display:flex; flex-wrap:wrap} .designer{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start} .designer-canvas{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; align-items:center; justify-content:center; min-height:320px} .el-list{display:flex; flex-direction:column; gap:8px} .el-row{display:flex; align-items:center; gap:8px; padding:9px 11px; background:var(--card); border:1px solid var(--line); border-radius:10px; font-size:.85rem; cursor:pointer} .el-row.is-sel{border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 20%,transparent)} .el-row .grab{color:var(--muted)} /* Designer handles sit over the server-rendered preview, in the same millimetre space, so dragging a box moves the thing you can see. */ .dz-stage{position:relative; display:inline-block; background:#FFF; box-shadow:var(--shadow); border:1px solid var(--line-2); border-radius:4px} .dz-stage svg{display:block} #dz-handles{position:absolute; inset:0; pointer-events:none} .dz-handle{position:absolute; border:1px dashed color-mix(in srgb,var(--brand) 60%, transparent); border-radius:3px; cursor:move; pointer-events:auto; background:transparent; transition:background .12s, border-color .12s; touch-action:none} .dz-handle:hover{background:color-mix(in srgb,var(--brand) 12%, transparent)} .dz-handle.is-sel{border:2px solid var(--brand); background:color-mix(in srgb,var(--brand) 16%, transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 25%, transparent)} .label-sheet{display:flex; flex-wrap:wrap; align-content:flex-start} .label-cell{display:flex; align-items:center; justify-content:center; break-inside:avoid} .select-filter{width:100%; padding:6px 10px !important; font-size:.85rem !important} /* ------------------------------------------------------- messaging */ .msg-layout{display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:start} .conv-list{display:flex; flex-direction:column; max-height:calc(100vh - 170px); overflow-y:auto} .conv{display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line); text-decoration:none; align-items:flex-start} .conv:hover{background:var(--surface)} .conv.is-active{background:var(--brand-wash)} .conv-body{min-width:0; flex:1} .conv-body strong{display:block; color:var(--ink); font-size:.89rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .conv-body span{display:block; font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .thread{display:flex; flex-direction:column; height:calc(100vh - 170px)} .thread-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px} .bubble{max-width:min(640px,78%); padding:9px 14px; border-radius:16px; font-size:.92rem; line-height:1.5; background:var(--surface); border:1px solid var(--line); align-self:flex-start; white-space:pre-wrap; word-wrap:break-word} .bubble.is-mine{align-self:flex-end; background:var(--brand); border-color:var(--brand); color:var(--on-brand)} .bubble-meta{font-size:.72rem; color:var(--muted); margin-top:3px} .bubble.is-mine .bubble-meta{color:color-mix(in srgb,var(--on-brand) 72%, transparent)} .composer{border-top:1px solid var(--line); padding:12px 14px; display:flex; gap:9px; align-items:flex-end} .composer textarea{flex:1; resize:none; min-height:42px; max-height:150px; padding:10px 13px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--card); color:var(--ink)} /* --------------------------------------------------- attendance grid */ .sheet-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card)} table.sheet{border-collapse:collapse; font-size:.78rem; width:100%} table.sheet th,table.sheet td{border:1px solid var(--line); padding:4px 5px; text-align:center} table.sheet th.name-col,table.sheet td.name-col{text-align:start; position:sticky; inset-inline-start:0; background:var(--card); min-width:170px; z-index:1; white-space:nowrap} table.sheet thead th{background:var(--surface); font-weight:600; color:var(--muted)} table.sheet td.is-weekend{background:var(--surface)} .att-dot{display:inline-flex; width:20px; height:20px; border-radius:6px; align-items:center; justify-content:center; font-size:.68rem; font-weight:700} .att-present{background:var(--ok-bg); color:var(--ok)} .att-late{background:var(--warn-bg); color:var(--warn)} .att-absent{background:var(--bad-bg); color:var(--bad)} .att-leave{background:var(--info-bg); color:var(--info)} .att-none{color:var(--line-2)} /* --------------------------------------------------------- security */ .sec-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px} .sec-tile{padding:14px 16px; border-radius:var(--radius); border:1px solid var(--line); background:var(--card)} .sec-tile .n{font-family:var(--f-display); font-size:1.55rem; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums} .sec-tile .l{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em} .ua-cell{display:flex; align-items:center; gap:8px} .ua-cell .ico{color:var(--muted)} .ip-cell{font-family:var(--f-mono); font-size:.82rem; direction:ltr; display:inline-block} /* ------------------------------------------------------------- misc */ .scroll-x{overflow-x:auto} .divider{height:1px; background:var(--line); margin:18px 0} /* The log view: always left-to-right whatever the interface language, because a stack trace is not Arabic text and mirroring it makes it unreadable. */ .log-view{margin:0; padding:12px 14px; max-height:60vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); font-family:var(--f-mono); font-size:.78rem; line-height:1.55; color:var(--body); white-space:pre-wrap; word-break:break-word; direction:ltr; text-align:left} .kbd{display:inline-block; padding:1px 6px; border-radius:5px; border:1px solid var(--line-2); background:var(--surface); font-family:var(--f-mono); font-size:.78rem; color:var(--muted)} .menu{position:absolute; inset-inline-end:0; top:calc(100% + 6px); min-width:230px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:6px; z-index:50; max-height:70vh; overflow-y:auto} .menu a,.menu button{display:flex; align-items:center; gap:9px; width:100%; padding:8px 11px; border-radius:9px; font-size:.88rem; color:var(--body); background:none; border:0; cursor:pointer; text-align:start; text-decoration:none} .menu a:hover,.menu button:hover{background:var(--surface); color:var(--ink)} .menu .sep{height:1px; background:var(--line); margin:5px 0} .menu-head{padding:8px 11px 4px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)} .has-menu{position:relative} .notif{display:flex; gap:10px; padding:9px 11px; border-radius:9px; text-decoration:none; align-items:flex-start} .notif:hover{background:var(--surface)} .notif.is-unread{background:var(--brand-wash)} .notif-body{min-width:0} .notif-body strong{display:block; font-size:.86rem; color:var(--ink); font-weight:500} .notif-body span{font-size:.78rem; color:var(--muted)} /* --------------------------------------------------------- responsive */ .menu-toggle{display:none} @media (max-width:1000px){ :root{--sidebar-w:0px} .sidebar{position:fixed; inset-block:0; inset-inline-start:0; width:280px; z-index:100; transform:translateX(-100%); transition:transform .25s cubic-bezier(.2,.8,.3,1)} [dir="rtl"] .sidebar{transform:translateX(100%)} .sidebar.is-open{transform:none; box-shadow:var(--shadow-lg)} .menu-toggle{display:inline-flex} .scrim{position:fixed; inset:0; background:rgba(10,27,41,.45); z-index:99; backdrop-filter:blur(2px)} .designer{grid-template-columns:1fr} .msg-layout{grid-template-columns:1fr} .content{padding:16px} } @media (max-width:640px){ .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px} .tile{min-height:150px; padding:18px 15px 15px} .tile-icon{width:48px; height:48px; border-radius:14px} .tile p{display:none} .page-head{gap:10px} .page-actions{width:100%} .topbar{padding:0 12px; gap:8px} .search-box{max-width:none} .kpi-value{font-size:1.45rem} .board-col{flex-basis:min(84vw,300px)} table.data th,table.data td{padding:9px 10px} } /* The print stamp: tiny, vertical, centred up the LEFT edge of the sheet. Fixed to the page rather than the content, so it lands in the same place on every sheet of a multi-page report. The offset is physical `left`, not the logical inline-start, on purpose: a printed page has a left edge whatever language it was produced in, and a stamp that swapped sides between an English and an Arabic report would be the one thing nobody could find twice. Screen shows it faintly; print keeps it black so it survives a photocopy. */ .print-stamp{ position:fixed; left:2mm; right:auto; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--f-mono); font-size:6.5pt; letter-spacing:.06em; color:var(--muted); opacity:.65; pointer-events:none; z-index:5; white-space:nowrap; } /* Direction never moves it: see above. */ [dir="rtl"] .print-stamp{left:2mm; right:auto; writing-mode:vertical-rl} @media print{ .print-stamp{color:#000; opacity:1; position:fixed; left:2mm; right:auto} } /* ------------------------------------------------------------- print */ @media print{ .sidebar,.topbar,.page-actions,.filters,.pager,.flash-stack,.no-print{display:none !important} body{background:#FFF; color:#000; font-size:11pt} .content{padding:0; max-width:none} .card{border:1px solid #CCC; box-shadow:none; break-inside:avoid} table.data thead th{background:#EEE; color:#000; position:static} a{color:#000; text-decoration:none} .print-head{display:flex !important; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid #000} } .print-head{display:none} .print-foot{display:none; margin-top:14px; padding-top:8px; border-top:1px solid var(--line)} @media print{ .print-foot{display:block} }