@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --bg:#0d1117; --surface:#161b22; --surface2:#1c2230; --border:#30363d;
  --accent:#00c896; --accent2:#3b82f6; --warn:#f59e0b; --danger:#ef4444;
  --ok:#22c55e; --text:#e6edf3; --muted:#7d8590;
  --cairo:#a78bfa; --hurghada:#38bdf8; --assiut:#4ade80; --alwaha:#2dd4bf; --october:#f87171;
  --am:#38bdf8; --nat:#fb923c; --storage:#eab308; --admin:#f472b6;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:14px; min-height:100vh; }
a { color:inherit; }

/* =========================================================
   APP HEADER (shared across every page)
   ========================================================= */
.header { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:200; flex-wrap:wrap; gap:10px; }
.header-brand { display:flex; align-items:center; gap:12px; }
.header-brand a { text-decoration:none; display:flex; align-items:center; gap:12px; }
.logo { width:34px; height:34px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.brand-text h1 { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; }
.brand-text p { font-size:11px; color:var(--muted); }

.app-links { display:flex; gap:4px; flex-wrap:wrap; }
.app-links a { padding:7px 14px; border-radius:7px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; transition:all .15s; }
.app-links a:hover { color:var(--text); background:var(--surface2); }
.app-links a.active { color:var(--accent); background:rgba(0,200,150,.1); }

.header-right { display:flex; align-items:center; gap:12px; }
.user-chip { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.user-chip .avatar { width:26px; height:26px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text); }
.user-chip .role-badge { font-size:10px; padding:2px 7px; border-radius:20px; background:rgba(59,130,246,.15); color:#60a5fa; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.user-chip .role-badge.super { background:rgba(0,200,150,.15); color:var(--accent); }
.contact-count, .last-updated { font-size:11px; color:var(--muted); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn { padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all .15s; white-space:nowrap; }
.btn-primary { background:var(--accent); color:#000; }
.btn-primary:hover { opacity:.85; }
.btn-secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.btn-danger { background:transparent; border:1px solid var(--danger); color:#f87171; }
.btn-danger:hover { background:rgba(239,68,68,.1); }
.btn-danger-sm { background:transparent; border:1px solid var(--danger); color:#f87171; padding:3px 8px; border-radius:5px; font-size:11px; cursor:pointer; }
.btn-sm { padding:5px 12px; font-size:12px; border-radius:6px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn-row { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* =========================================================
   LAYOUT
   ========================================================= */
.main { padding:24px; max-width:1400px; margin:0 auto; }
.page { display:none; }
.page.active { display:block; }

/* =========================================================
   TOOLBAR / FILTERS (contacts + editor)
   ========================================================= */
.toolbar { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:22px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.search-box { flex:1; min-width:220px; position:relative; }
.search-box .icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; pointer-events:none; }
.search-box input { width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:9px 12px 9px 34px; border-radius:8px; font-size:13px; font-family:inherit; }
.search-box input:focus { outline:none; border-color:var(--accent); }
select.inline { background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:8px; font-size:13px; }
select.inline:focus { outline:none; border-color:var(--accent); }

/* =========================================================
   BRANCH / DEPT GROUPS (contacts)
   ========================================================= */
.branch-group { margin-bottom:28px; }
.branch-group-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--border); }
.branch-group-header .dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.branch-group-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; }
.branch-group-count { font-size:11px; color:var(--muted); background:var(--surface2); padding:3px 10px; border-radius:20px; }

.dept-group { margin-bottom:18px; }
.dept-group:last-child { margin-bottom:0; }
.dept-group-title { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }

.contact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.contact-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; position:relative; transition:border-color .15s; }
.contact-card:hover { border-color:var(--accent); }
.edit-icon-btn { position:absolute; top:10px; right:10px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:var(--surface2); border:1px solid var(--border); border-radius:6px; color:var(--muted); font-size:12px; cursor:pointer; }
.edit-icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.contact-name { font-weight:700; font-size:14px; margin-bottom:2px; padding-right:26px; }
.contact-position { font-size:12px; color:var(--muted); margin-bottom:10px; }
.contact-row { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:4px 0; }
.contact-row .icon { width:16px; text-align:center; color:var(--muted); flex-shrink:0; }
.contact-row a { color:var(--text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contact-row a:hover { color:var(--accent); text-decoration:underline; }
.contact-row .none { color:var(--muted); font-style:italic; }

/* =========================================================
   TOP NAV / SUB NAV (inventory)
   ========================================================= */
.top-nav { background:var(--surface); border-bottom:1px solid var(--border); padding:0 24px; display:flex; gap:2px; overflow-x:auto; }
.top-tab { padding:10px 20px; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:all .15s; user-select:none; }
.top-tab:hover { color:var(--text); }
.top-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.top-tab .dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.top-tab.locked { opacity:.55; }
.top-tab .lock-mark { font-size:10px; margin-left:4px; }

.sub-nav { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.sub-tab { padding:7px 20px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--surface2); color:var(--muted); transition:all .15s; user-select:none; }
.sub-tab:hover { border-color:var(--text); color:var(--text); }
.sub-tab.active-am { border-color:var(--am); color:var(--am); background:rgba(56,189,248,.1); }
.sub-tab.active-nat { border-color:var(--nat); color:var(--nat); background:rgba(251,146,60,.1); }
.sub-tab.active-storage { border-color:var(--storage); color:var(--storage); background:rgba(234,179,8,.1); }
.sub-tab.active-admin { border-color:var(--admin); color:var(--admin); background:rgba(244,114,182,.1); }
.sub-section { display:none; }
.sub-section.active { display:block; }

/* =========================================================
   SECTION HEADER / BADGES
   ========================================================= */
.section-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.section-title { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; }
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.4px; }
.badge-danger { background:rgba(239,68,68,.15); color:#f87171; }
.badge-warn { background:rgba(245,158,11,.15); color:#fbbf24; }
.badge-ok { background:rgba(34,197,94,.15); color:#4ade80; }
.badge-info { background:rgba(59,130,246,.15); color:#60a5fa; }

/* =========================================================
   STAT CARDS / OVERVIEW / CHARTS
   ========================================================= */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; margin-bottom:22px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; border-radius:3px 0 0 3px; }
.stat-card.ok::before { background:var(--ok); }
.stat-card.warn::before { background:var(--warn); }
.stat-card.danger::before { background:var(--danger); }
.stat-card.info::before { background:var(--accent2); }
.stat-card.total::before { background:var(--accent); }
.stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.stat-value { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; line-height:1; }
.stat-sub { font-size:11px; color:var(--muted); margin-top:4px; }

.overview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:22px; }
.overview-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px; text-align:center; }
.overview-card .big { font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:700; line-height:1; }
.overview-card .label { font-size:12px; color:var(--muted); margin-top:5px; }
.overview-card .sub { font-size:11px; margin-top:6px; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:700px){ .two-col{grid-template-columns:1fr;} }

.chart-wrap { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px; margin-bottom:22px; }
.chart-title { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.bar-chart { display:flex; flex-direction:column; gap:9px; }
.bar-row { display:flex; align-items:center; gap:10px; }
.bar-label { width:140px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { flex:1; height:18px; background:var(--surface2); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; display:flex; align-items:center; padding-left:7px; font-size:11px; font-weight:700; color:#000; transition:width .7s ease; min-width:22px; }
.bar-num { width:32px; text-align:right; font-size:12px; font-weight:600; }

.comparison-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-bottom:22px; }
.branch-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.branch-header { padding:12px 16px; border-bottom:1px solid var(--border); }
.branch-name { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; }
.branch-section { font-size:11px; color:var(--muted); }
.branch-body { padding:10px 16px; }
.branch-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
.branch-row:last-child { border-bottom:none; }
.branch-row-label { color:var(--muted); }
.branch-row-val { font-weight:600; }
.needs-repair { color:var(--warn); font-weight:600; }
.needs-replace { color:var(--danger); font-weight:600; }

/* =========================================================
   TABLES
   ========================================================= */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:22px; }
.table-head { padding:12px 16px; border-bottom:1px solid var(--border); font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { padding:8px 12px; text-align:left; background:var(--surface2); color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.4px; font-size:11px; white-space:nowrap; }
td { padding:8px 12px; border-top:1px solid var(--border); }
tr:hover td { background:var(--surface2); }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--text); }
th.sortable .sort-arrow { display:inline-block; margin-left:5px; opacity:0.35; font-size:10px; transition:opacity .15s; }
th.sortable:hover .sort-arrow { opacity:0.7; }
th.sortable.sort-asc .sort-arrow, th.sortable.sort-desc .sort-arrow { opacity:1; color:var(--accent); }
#editor-table-wrap { max-height:62vh; overflow:auto; border-radius:10px; }
#editor-table-wrap thead th { position:sticky; top:0; z-index:10; background:var(--surface2); box-shadow:0 1px 0 var(--border); }

select.inline { background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:5px 10px; border-radius:6px; font-size:13px; }
input.inline-txt { background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:4px 6px; border-radius:5px; font-size:12px; }
input.inline-num { width:64px; background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:4px 6px; border-radius:5px; font-size:12px; text-align:center; }
input.inline-num:focus, input.inline-txt:focus, select.inline:focus { outline:none; border-color:var(--accent); }
input.inline-txt[disabled], input.inline-num[disabled], select.inline[disabled] { opacity:.45; cursor:not-allowed; }

/* =========================================================
   MODAL
   ========================================================= */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:500; padding:20px; }
.modal-overlay.active { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; }
.modal.modal-wide { max-width:640px; }
.modal h2 { font-family:'Space Grotesk',sans-serif; font-size:18px; margin-bottom:18px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:500; }
.form-group input, .form-group select { width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:6px; font-size:13px; font-family:inherit; }
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--accent); }
.form-error { color:var(--danger); font-size:12px; margin-top:4px; display:none; }
.form-hint { color:var(--muted); font-size:11px; margin-top:4px; }

/* =========================================================
   EMPTY STATE / TOAST
   ========================================================= */
.empty-state { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:48px; text-align:center; color:var(--muted); margin-bottom:22px; }
.empty-state .icon { font-size:42px; margin-bottom:14px; }
.empty-state h3 { font-size:16px; font-weight:600; color:var(--text); margin-bottom:8px; }
.empty-state p { font-size:13px; }

.save-toast { position:fixed; bottom:24px; right:24px; background:var(--ok); color:#000; padding:10px 20px; border-radius:8px; font-weight:600; font-size:13px; opacity:0; pointer-events:none; transition:opacity .3s; z-index:999; }
.save-toast.show { opacity:1; }
.save-toast.error { background:var(--danger); color:#fff; }

/* =========================================================
   LOGIN / AUTH PAGES
   ========================================================= */
.auth-wrap { min-height:calc(100vh - 63px); display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:32px; width:100%; max-width:380px; }
.auth-card .logo { width:44px; height:44px; font-size:20px; margin:0 auto 14px; }
.auth-card h2 { font-family:'Space Grotesk',sans-serif; font-size:19px; text-align:center; margin-bottom:4px; }
.auth-card p.sub { text-align:center; color:var(--muted); font-size:12.5px; margin-bottom:22px; }
.auth-card .btn-primary { width:100%; padding:11px; font-size:14px; margin-top:6px; }
.auth-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#f87171; font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:16px; }
.auth-notice { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:#fbbf24; font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:16px; }
.demo-creds { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); font-size:11.5px; color:var(--muted); text-align:center; line-height:1.6; }
.demo-creds code { background:var(--surface2); padding:1px 6px; border-radius:4px; color:var(--text); }

/* =========================================================
   ACCESS CHIPS / USERS PAGE
   ========================================================= */
.access-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:3px 9px; border-radius:20px; background:var(--surface2); border:1px solid var(--border); margin:2px 3px 2px 0; }
.access-chip .x { cursor:pointer; color:var(--muted); font-weight:700; }
.access-chip .x:hover { color:var(--danger); }
.access-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.access-branch-box { border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--surface2); }
.access-branch-box .branch-title { font-weight:700; font-size:12.5px; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.access-branch-box label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); padding:2px 0; cursor:pointer; }
.access-branch-box input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; }

.users-table td, .users-table th { vertical-align:middle; }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.status-dot.on { background:var(--ok); }
.status-dot.off { background:var(--danger); }

.lock-note { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:12.5px; color:var(--muted); margin-bottom:16px; }