:root { --ink:#172e44; --muted:#5a6b7b; --blue:#1263ad; --line:#dfe5e9; --paper:#f4f5f4; --nav:#142c42; }
* { box-sizing:border-box; }
body { background:var(--paper); font-family:Tahoma,'Segoe UI',sans-serif; color:var(--ink); font-size:14px; line-height:1.75; }
a { color:var(--blue); text-underline-offset:3px; }
:focus-visible { outline:3px solid #dc9a2a; outline-offset:3px; }
.navbar { min-height:82px; background:#fff; border-bottom:1px solid var(--line); padding:12px 25px; position:relative; z-index:2; }
.navbar .container-fluid { gap:16px; }
.navbar-brand { color:var(--ink)!important; margin:0; min-width:0; white-space:normal; }
.brand-title { font-size:15px; font-weight:700; }
.brand-subtitle { color:var(--muted); font-size:12px; margin-top:3px; }
.site-logo-mini { width:54px; height:54px; object-fit:contain; flex-shrink:0; }
.account-name { font-size:13px; color:var(--muted); }
.navbar .btn-outline-light { color:var(--ink); border-color:#cbd5dd; background:#fff; }
.navbar .btn-outline-light:hover { background:#edf3f8; }
.sidebar { position:fixed; right:0; top:82px; bottom:0; width:232px; background:var(--nav); color:#fff; overflow:auto; padding:24px 16px; }
.sidebar-brand { text-align:center; border-bottom:1px solid #33495d; padding-bottom:22px; margin-bottom:16px; font-weight:700; }
.sidebar-brand small { display:block; color:#c3d0db; font-size:10px; font-weight:400; margin-top:4px; }
.sidebar-logo { width:76px; height:76px; object-fit:contain; background:#fff; padding:3px; border-radius:50%; display:block; margin:0 auto 12px; }
.navigation-panel summary { display:none; }
.sidebar ul { padding:0; margin:0; list-style:none; }
.sidebar li { margin:4px 0; }
.sidebar a { display:flex; align-items:center; gap:13px; color:#d2dce5; padding:12px 14px; text-decoration:none; border-radius:5px; border-right:3px solid transparent; transition:background .16s; }
.sidebar a:hover { color:#fff; background:#243e55; }
.sidebar a.active { background:#245783; color:#fff; border-right-color:#4eb7e2; font-weight:700; }
.nav-index { font-size:11px; opacity:.65; font-variant-numeric:tabular-nums; }
.sidebar-note { color:#c3d0db; font-size:11px; margin:30px 14px 0; padding-top:18px; border-top:1px solid #33495d; }
.sidebar-note strong { font-weight:400; font-size:10px; }
body > .container-fluid { margin-right:232px; width:calc(100% - 232px); padding-left:30px; padding-right:30px; }
.page-heading { margin:3px 0 27px; padding-bottom:19px; border-bottom:1px solid var(--line); }
.eyebrow { color:var(--blue); font-size:11px; font-weight:700; margin-bottom:7px; }
h1 { font-size:27px; font-weight:700; line-height:1.45; margin:0 0 6px; letter-spacing:-.5px; }
.page-heading p { color:var(--muted); margin:0; font-size:13px; }
.card { border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.shadow-sm { box-shadow:0 2px 3px #122d4305!important; }
.card-header { padding:17px 20px; color:var(--ink); font-weight:700; border-color:var(--line); font-size:15px; }
.card-body { padding:22px; }
.stat-box { background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:5px; padding:20px 21px; min-height:132px; }
.stat-box.success { border-top-color:#258466; }
.stat-box.warning { border-top-color:#bc811e; }
.stat-box.danger { border-top-color:#a8524d; }
.stat-box .title { color:var(--muted); font-size:12px; }
.stat-box .value { font-size:35px; line-height:1.35; font-weight:700; margin-top:13px; font-variant-numeric:tabular-nums; }
.table { color:var(--ink); font-size:12px; vertical-align:middle; }
.table>:not(caption)>*>* { padding:14px 16px; border-bottom-color:#e8edf0; }
.table thead th { background:#f3f6f8; color:#53697a; font-size:11px; font-weight:700; white-space:nowrap; }
.table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-accent-bg:#fbfcfd; color:var(--ink); }
.table td { white-space:nowrap; }
.table tbody tr:hover td { background:#f3f7fa; }
.table input[type=checkbox] { width:16px; height:16px; vertical-align:middle; margin-left:8px; accent-color:var(--blue); }
.governorate-row { border-bottom:1px solid #edf0f2; padding:9px 0; font-size:12px; }
.governorate-row:last-child { border-bottom:0; }
.governorate-row strong { color:var(--blue); font-variant-numeric:tabular-nums; }
.form-label { color:#42566a; font-weight:700; font-size:12px; margin-bottom:7px; }
.form-control,.form-select { border-color:#cfd9e1; border-radius:5px; min-height:43px; font-size:13px; background-color:#fff; color:var(--ink); }
.form-control:focus,.form-select:focus { border-color:#3d86c2; box-shadow:0 0 0 3px #1263ad18; }
.btn { border-radius:5px; font-size:12px; font-weight:700; padding:10px 18px; }
.btn-sm { padding:7px 11px; }
.btn-primary { background:var(--blue); border-color:var(--blue); }
.btn-primary:hover { background:#094e8d; border-color:#094e8d; }
.btn-secondary { background:#edf3f7; color:#23577f; border-color:#d8e3ec; }
.btn-secondary:hover { background:#dceaf4; color:#183e5d; border-color:#b9cddd; }
.alert { font-size:13px; border-radius:5px; padding:13px 17px; }
.footer-custom { margin:30px 232px 0 0; padding:20px 30px; color:#607182; border-top:1px solid var(--line); font-size:10px; text-align:center; line-height:1.8; }
.empty-state { color:var(--muted); text-align:center; padding:32px!important; white-space:normal!important; }
.skip-link { position:fixed; top:10px; right:15px; background:#fff; padding:10px; z-index:20; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.skip-link:focus { clip-path:none; width:auto; height:auto; overflow:visible; }
.login-page { background:#edf1f3; border-top:5px solid var(--blue); }
.login-page>.container { padding:28px 18px; }
.login-card { width:min(100%,460px); border-radius:8px; box-shadow:0 18px 55px #16324d12!important; }
.company-logo-lg { width:88px; height:88px; object-fit:contain; }
.login-title { font-size:27px; margin:10px 0 14px; }
.login-card .text-muted { font-size:11px; }
.login-card .btn { min-height:46px; margin-top:8px; }
.filter-panel { padding:19px 20px; background:#f8fafb; border-bottom:1px solid var(--line); }
.status-label { display:inline-block; padding:3px 9px; background:#e9f2f8; color:#255d83; border-radius:4px; font-size:11px; }
.lookup-result { border-right:4px solid #2e8767; background:#eff7f3; padding:18px; margin-top:20px; }
.lookup-result dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lookup-result dt { color:var(--muted); font-size:11px; }
.lookup-result dd { margin:4px 0 0; font-weight:700; }
@media(min-width:992px) { .navigation-panel:not([open]) nav { display:block; } }
@media(max-width:1199px) { body>.container-fluid { padding-left:20px; padding-right:20px; } .account-name { display:none; } .stat-box { padding:17px 13px; } }
@media(max-width:991px) {
.navbar { padding:10px 14px; min-height:76px; }
.navbar>.container-fluid { padding:0; flex-wrap:nowrap; }
.brand-title { font-size:12px; }.brand-subtitle { font-size:10px; }
.site-logo-mini { width:43px; height:43px; }.navbar-brand { gap:9px!important; }
.sidebar { position:relative; top:auto; width:100%; padding:0 16px; overflow:visible; }
.sidebar-brand,.sidebar-note { display:none; }
.navigation-panel summary { display:flex; justify-content:space-between; cursor:pointer; padding:13px 0; font-weight:700; font-size:12px; }
.sidebar ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding-bottom:12px; }
.sidebar a { font-size:12px; padding:10px; }
body>.container-fluid { margin-right:0; width:100%; padding:22px 16px!important; }
.footer-custom { margin-right:0; padding:18px 20px; }
h1 { font-size:23px; }.page-heading { margin-bottom:22px; }.page-heading p { font-size:12px; }
}
@media(max-width:575px) {
.brand-title { max-width:180px; }.navbar .btn-sm { font-size:10px; padding:7px; white-space:nowrap; }
.account-actions { gap:0!important; }.brand-subtitle { display:none!important; }
.row.g-4 { --bs-gutter-x:14px; --bs-gutter-y:14px; }.row.g-4>.col-md-3 { width:50%; }
.stat-box { min-height:116px; padding:14px; }.stat-box .title { font-size:11px; }.stat-box .value { font-size:29px; }
.card-body { padding:17px; }.card-header { padding:15px 17px; }.table>:not(caption)>*>* { padding:12px; }
.company-logo-lg { width:80px; height:80px; }.login-card .card-body { padding:27px!important; }
.lookup-result dl { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }
.demo-label { background:#fff3d9; color:#79520d; font-size:9px; padding:3px 6px; border-radius:3px; margin-right:4px; }
.pagination-bar { display:flex; align-items:center; justify-content:center; gap:16px; padding:18px; border-top:1px solid var(--line); font-size:12px; }
/* Readability refinements following the desktop and mobile review. */
.nav-index { color:#d5e3ee; opacity:1; }
.sidebar-brand small,.sidebar-note,.sidebar-note strong,.footer-custom { font-size:12px; }
.table { font-size:13px; }
.table thead th,.status-label { font-size:12px; }
.table-scroll-hint { display:none; }
@media(max-width:991px) {
.table-scroll-hint { display:block; margin:0; padding:10px 17px; color:#52697b; background:#f6f9fb; border-bottom:1px solid var(--line); font-size:12px; }
}
/* Operations workspace: quiet chrome, circular identity, readable working surfaces. */
:root { --ink:#22333e; --muted:#65717b; --blue:#195274; --line:#e1e5e7; --paper:#f6f6f3; --nav:#fff; }
body { font-family:'Segoe UI',Tahoma,sans-serif; font-size:15px; }
.navbar { min-height:86px; padding:12px 30px; box-shadow:0 2px 9px #1f344205; }
.site-logo-mini,.sidebar-logo,.company-logo-lg,.print-logo { object-fit:cover; border-radius:50%; clip-path:circle(48%); background:transparent; padding:0; }
.site-logo-mini { width:60px; height:60px; }
.brand-title { font-size:17px; font-weight:650; }
.brand-subtitle { font-size:12px; color:#64717c; }
.brand-department { font-size:12px; color:#52616c; margin-top:4px; line-height:1.6; white-space:normal; }
.account-profile { padding-left:17px; border-left:1px solid var(--line); line-height:1.5; }
.account-name { color:var(--ink); display:block; font-size:14px; font-weight:600; }
.account-profile small { color:var(--muted); font-size:11px; }
.sidebar { top:86px; width:208px; border-left:1px solid var(--line); padding:27px 13px; }
.sidebar-caption { color:#7a858d; font-size:11px; padding:0 17px 16px; }
.sidebar a { color:#53616c; border:0; border-radius:6px; padding:11px 16px; font-size:14px; gap:12px; }
.sidebar a:hover { color:var(--ink); background:#f2f5f6; }
.sidebar a.active { color:#164d70; background:#eaf1f5; border:0; font-weight:650; }
.nav-marker { width:7px; height:7px; border:1px solid #8597a3; border-radius:2px; transform:rotate(45deg); flex-shrink:0; }
.active .nav-marker { background:#276184; border-color:#276184; }
.sidebar-note { color:#74818b; border-top:1px solid var(--line); line-height:1.9; margin-top:26px; font-size:11px; }
body>.container-fluid { margin-right:208px; width:calc(100% - 208px); padding:32px 34px!important; }
.page-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0 0 25px; padding:0; border:0; }
.page-heading h1 { font-size:26px; font-weight:650; margin:0; width:100%; }
.page-heading p { font-size:13px; }
.page-toolbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:22px; }
.page-toolbar .page-heading { margin:0; }
.page-toolbar>.btn { white-space:nowrap; }
.card { border-radius:8px; border-color:#e0e5e7; }
.card-header { font-size:15px; font-weight:600; padding:18px 22px; }
.table { font-size:14px; }
.table thead th { font-size:12px; font-weight:600; background:#f7f8f8; color:#6b7780; }
.table>:not(caption)>*>* { padding:15px 18px; }
.status-label { font-size:12px; font-weight:500; background:#edf3f5; color:#365e73; }
.stat-box { border-top:1px solid var(--line); border-right:3px solid #336d8f; padding:22px; }
.stat-box.success { border-top-color:var(--line); border-right-color:#528671; }
.stat-box.warning { border-top-color:var(--line); border-right-color:#b69962; }
.stat-box.danger { border-top-color:var(--line); border-right-color:#b17b71; }
.stat-box .title { font-size:13px; }.stat-box .value { font-size:33px; font-weight:600; }
.form-label { font-size:13px; font-weight:600; }.form-control,.form-select { font-size:14px; min-height:44px; }
.btn { font-size:13px; padding:10px 17px; font-weight:600; }
.btn-sm { font-size:12px; padding:6px 11px; }
.btn-danger { background:#a3453f; border-color:#a3453f; }
.btn-outline-danger { color:#a3453f; border-color:#e1c6c3; }
.row-actions { display:flex; gap:7px; align-items:center; }
.footer-custom { margin-right:208px; font-size:11px; padding:19px; color:#7a838a; }
.login-card { border:1px solid var(--line)!important; }
.company-logo-lg { width:166px; height:166px; }
.app-dialog { border:1px solid #dbe2e7; border-radius:12px; padding:0; width:min(900px,calc(100vw - 36px)); max-height:calc(100dvh - 48px); color:var(--ink); background:#fff; box-shadow:0 24px 80px #0b213633; overflow:auto; }
.app-dialog:not([open]) { display:none; }
.app-dialog[open] { display:block; position:fixed; inset:0; margin:auto; z-index:1050; }
.dialog-close { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.app-dialog::backdrop { background:#172b3c80; backdrop-filter:blur(2px); }
.app-dialog.dialog-small { width:min(480px,calc(100vw - 36px)); }
.dialog-heading { padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:#fbfcfc; }
.dialog-heading h2 { font-size:21px; font-weight:650; margin:0; }
.dialog-heading p { color:var(--muted); font-size:12px; margin:6px 0 0; }
.dialog-close { border:1px solid #d8e0e5; background:#fff; border-radius:6px; color:#5b6b76; width:33px; height:33px; font-size:22px; line-height:1; flex-shrink:0; }
.dialog-body { padding:25px 26px; }
.dialog-actions { display:flex; gap:10px; justify-content:flex-end; padding:18px 26px; border-top:1px solid var(--line); background:#fbfcfc; }
.app-dialog form { margin:0; }.app-dialog .card { border:0; }.app-dialog .card-header { display:none; }.app-dialog .card-body { padding:0; }
body:has(dialog[open]) { overflow:hidden; }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
.permission-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #edf0f2; }
.permission-row label { font-size:13px; }.permission-row select { width:145px; min-height:35px; font-size:12px; }
.form-section-title { font-size:15px; font-weight:650; margin:24px 0 13px; padding-top:19px; border-top:1px solid var(--line); }
.field-note { font-size:12px; color:var(--muted); margin:7px 0 0; }
@media(max-width:1199px) { .account-name { display:block; } }
@media(max-width:991px) {
.navbar { min-height:78px; padding:11px 18px; }.site-logo-mini { width:50px; height:50px; }.brand-title { font-size:14px; }.account-name { font-size:12px; }
.sidebar { width:100%; padding:0 18px; border-left:0; border-bottom:1px solid var(--line); top:auto; }
.sidebar-caption { display:none; }.navigation-panel summary { color:#38566b; padding:12px 0; }
.sidebar a { font-size:13px; }.sidebar-note { display:none; }
body>.container-fluid { margin-right:0; width:100%; padding:25px 18px!important; }
.footer-custom { margin-right:0; }.page-heading h1 { font-size:24px; }
}
@media(max-width:575px) {
.navbar { padding:10px 14px; }.brand-title { font-size:12px; max-width:168px; }.site-logo-mini { width:47px; height:47px; }.account-profile { display:none; }
.page-toolbar { align-items:flex-start; }.page-toolbar .page-heading p { display:none; }.page-toolbar .btn { font-size:12px; padding:10px 12px; }.page-heading h1 { font-size:22px; }
.stat-box { padding:17px; }.stat-box .title { font-size:12px; }
.app-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 24px); border-radius:10px; }.dialog-heading,.dialog-body { padding:20px; }.dialog-heading h2 { font-size:19px; }.dialog-actions { padding:15px 20px; }
.permission-grid { grid-template-columns:1fr; }.table { font-size:13px; }
}
.role-default { display:block; color:#6b7982; font-size:11px; margin-top:3px; }
.table { --bs-table-striped-bg:#f8fafb; --bs-table-striped-color:var(--ink); }
.dialog-heading { position:sticky; top:0; z-index:2; }
/* Contrast correction for small navigation and table labels. */
.sidebar-caption { color:#52616c; }
.table thead th { color:#52616c; --bs-table-color:#52616c; }

@media(max-width:575px) { .brand-department { font-size:10px; } .brand-subtitle { display:block!important; font-size:10px; } }

/* Compact, balanced branding on the sign-in card. */
.login-card .company-logo-lg { width:88px; height:88px; filter:drop-shadow(0 3px 5px #16324d12); }
.login-card .login-title { margin:8px 0 12px; }

@media(max-width:575px) { .login-card .company-logo-lg { width:80px; height:80px; } }

/* Shared application chrome keeps the same dimensions on every page. */
:root{--app-header-height:104px}
body>.navbar{height:var(--app-header-height);min-height:var(--app-header-height);padding:10px 24px;flex:none}
.navbar>.container-fluid{padding:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:20px}
.navbar-brand{display:flex;align-items:center;gap:16px!important;flex:1;min-width:0;padding:0}
.site-logo-mini{width:72px;height:72px;object-fit:contain}
.brand-title{line-height:1.5}.brand-department{margin-top:2px}.brand-subtitle{margin-top:2px}
.account-actions{flex-shrink:0}.account-actions .btn{white-space:nowrap}
body>.sidebar{top:var(--app-header-height);overflow:auto}
@media(max-width:991px){:root{--app-header-height:96px}body>.navbar{padding:10px 18px}.site-logo-mini{width:60px;height:60px}body>.sidebar{position:relative;top:auto;overflow:visible;flex:none}}
@media(max-width:575px){:root{--app-header-height:104px}body>.navbar{padding:10px 12px}.navbar>.container-fluid{gap:10px}.navbar-brand{gap:9px!important}.site-logo-mini{width:54px;height:54px}.brand-title{font-size:12px;max-width:180px}.brand-department,.brand-subtitle{font-size:10px;line-height:1.5}}