*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#0a0a0f;--bg2:#111118;--bg3:#16161f;--surface:#1c1c28;--surface2:#22222f;--border:#2a2a3a;--border2:#333348;--text:#e8e8f0;--text2:#9898b0;--text3:#5a5a78;--accent:#6c63ff;--accent2:#8b83ff;--accent-glow:rgba(108,99,255,.18);--green:#22c55e;--green-bg:rgba(34,197,94,.1);--red:#ef4444;--red-bg:rgba(239,68,68,.1);--amber:#f59e0b;--amber-bg:rgba(245,158,11,.1);--cyan:#06b6d4;--cyan-bg:rgba(6,182,212,.1);--pink:#ec4899;--pink-bg:rgba(236,72,153,.1);--font:'Space Grotesk',sans-serif;--mono:'JetBrains Mono',monospace;--r:8px;--r2:12px;--sidebar:240px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px}a{color:inherit;text-decoration:none}.app{display:flex;min-height:100vh}.sidebar{width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0}.logo{padding:22px 20px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}.logo-icon{width:34px;height:34px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700}.logo-text{font-size:16px;font-weight:700}.logo-sub{font-size:10px;color:var(--text3);font-family:var(--mono);letter-spacing:1px}.nav{flex:1;overflow-y:auto;padding:12px 8px}.nav-section{margin-bottom:20px}.nav-label{font-size:10px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;padding:0 12px;margin-bottom:6px}.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:var(--text2);font-weight:500;margin-bottom:2px}.nav-item:hover{background:var(--surface);color:var(--text)}.nav-item.active{background:var(--accent-glow);color:var(--accent2)}.nav-icon{width:20px;text-align:center}.sidebar-footer{padding:16px;border-top:1px solid var(--border)}.user-card{display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:12px;padding:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700}.user-name{font-weight:600;font-size:13px}.user-role{font-size:11px;color:var(--text3)}.main{margin-left:var(--sidebar);min-height:100vh;width:calc(100% - var(--sidebar));display:flex;flex-direction:column}.topbar{height:60px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:4}.page-title{font-size:18px;font-weight:700}.page-breadcrumb{font-size:12px;color:var(--text3);font-family:var(--mono)}.topbar-actions{display:flex;align-items:center;gap:8px}.content{padding:24px 28px;overflow:auto}.search-input,.input,select,textarea{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-family:var(--font);outline:none;width:100%}.search-input{width:220px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--border2);background:var(--surface);color:var(--text);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500}.btn:hover{background:var(--surface2);border-color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent);color:white}.btn-primary:hover{background:var(--accent2)}.btn-danger{background:var(--red-bg);border-color:rgba(239,68,68,.3);color:var(--red)}.btn-sm{padding:5px 10px;font-size:12px}.notif-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);position:relative;color:var(--text)}.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--red);border-radius:50%}.card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:18px}.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}.card-title{font-size:14px;font-weight:700}.card-subtitle{font-size:11px;color:var(--text3);margin-top:2px}.card-body{padding:20px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.stat-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden}.stat-card:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}.stat-card.green:before{background:var(--green)}.stat-card.amber:before{background:var(--amber)}.stat-card.cyan:before{background:var(--cyan)}.stat-top{display:flex;justify-content:space-between;margin-bottom:14px}.stat-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}.stat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--accent-glow)}.stat-value{font-size:28px;font-weight:700;letter-spacing:-1px}.stat-note{display:inline-flex;font-size:11px;font-weight:700;margin-top:7px;padding:2px 7px;border-radius:20px;background:var(--green-bg);color:var(--green)}.mini-chart{display:flex;align-items:flex-end;gap:3px;height:40px;margin-top:8px}.bar{flex:1;background:var(--accent);opacity:.6;border-radius:3px 3px 0 0}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:16px}.branch-layout{display:grid;grid-template-columns:1fr .75fr;gap:16px}.branch-list{display:flex;flex-direction:column;gap:10px}.branch-card,.branch-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px}.branch-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.branch-name{font-weight:700}.branch-address,.branch-meta{font-size:11px;color:var(--text3);margin-top:4px}.branch-metrics{display:flex;gap:22px;margin-top:14px}.branch-metric-val{font-size:18px;font-weight:700;font-family:var(--mono)}.branch-metric-lbl{font-size:10px;color:var(--text3)}.purple{color:var(--accent2)}.cyan{color:var(--cyan)}.green{color:var(--green)}.red{color:var(--red)}.amber{color:var(--amber)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{padding:10px 16px;text-align:left;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);white-space:nowrap}td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13.5px}tr:hover td{background:var(--surface)}.mono,.td-mono{font-family:var(--mono);font-size:12px}.muted,.td-muted{color:var(--text3)}.badge{display:inline-flex;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}.badge-green{background:var(--green-bg);color:var(--green)}.badge-red{background:var(--red-bg);color:var(--red)}.badge-amber{background:var(--amber-bg);color:var(--amber)}.badge-cyan{background:var(--cyan-bg);color:var(--cyan)}.badge-purple{background:var(--accent-glow);color:var(--accent2)}.actions,.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-card{max-width:920px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field label{display:block;font-size:12px;font-weight:700;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.7px}.alert{border-radius:10px;padding:12px 14px;margin-bottom:16px}.alert-success{background:var(--green-bg);color:var(--green);border:1px solid rgba(34,197,94,.25)}.alert-error{background:var(--red-bg);color:var(--red);border:1px solid rgba(239,68,68,.25)}.activity-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}.activity-time{font-size:11px;color:var(--text3);font-family:var(--mono);margin-top:3px}.progress-row{margin-bottom:16px}.progress-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.progress-money{font-family:var(--mono);color:var(--green);font-size:12px}.progress{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:99px}.weekly-bars{height:120px;display:flex;gap:12px;align-items:flex-end}.day-group{flex:1;height:100px;display:flex;gap:3px;align-items:flex-end;position:relative;padding-bottom:18px}.chart-bar{flex:1;border-radius:3px 3px 0 0;min-height:8px}.day-label{position:absolute;bottom:0;left:0;right:0;text-align:center;color:var(--text3);font-size:10px}.legend{display:flex;gap:12px;margin-top:10px;color:var(--text2);font-size:11px}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px}.product-price{font-size:28px;font-weight:700;margin:10px 0}.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.sale-items-box{display:flex;flex-direction:column;gap:10px}.sale-item-row{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:end;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px}@media(max-width:1050px){.stats-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.branch-layout,.grid-3,.grid-2{grid-template-columns:1fr}.sidebar{position:static;width:100%}.main{margin-left:0;width:100%}.app{display:block}}@media(max-width:700px){.stats-grid,.product-grid,.form-grid{grid-template-columns:1fr}.topbar{height:auto;align-items:flex-start;gap:10px;flex-direction:column;padding:16px}.search-input{width:100%}}

/* Dashboard metric drill-down */
.stat-card { text-decoration: none; color: inherit; display: block; }
.metric-chart { display:flex; align-items:flex-end; gap:8px; height:300px; padding:26px 0 34px; border-bottom:1px solid var(--border); }
.metric-chart-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; min-width:18px; }
.metric-chart-bar { width:100%; max-width:34px; background:var(--accent); border-radius:8px 8px 0 0; opacity:.9; box-shadow:0 0 18px rgba(108,99,255,.2); transition:opacity .2s, transform .2s; }
.metric-chart-bar:hover { opacity:1; transform:translateY(-2px); }
.metric-chart-label { font-size:10px; color:var(--text3); font-family:var(--mono); transform:rotate(-45deg); white-space:nowrap; height:18px; }
.metric-chart-bar.selected{background:var(--green);opacity:1;box-shadow:0 0 20px rgba(34,197,94,.35)}
.metric-chart-label.selected{color:var(--green);font-weight:700}
.metric-toolbar .input[type=date]{min-height:38px}
.btn[disabled]{pointer-events:none}

/* Active metric navigation card inside Dashboard/Metric */
.active-metric-card {
    box-shadow:0 0 0 2px rgba(108,99,255,.75), 0 0 28px rgba(108,99,255,.18);
    transform:translateY(-2px);
}
.stat-card:hover {
    border-color:var(--accent2);
    transform:translateY(-2px);
    transition:.18s ease;
}
.stat-change{display:inline-flex;font-size:11px;font-weight:700;margin-top:7px;margin-left:6px;padding:2px 7px;border-radius:20px}.stat-change.up{background:var(--green-bg);color:var(--green)}.stat-change.down{background:var(--red-bg);color:var(--red)}.stat-card{min-height:164px}.dashboard-filter .input{min-width:150px}

/* Search and sortable tables */
.data-table th.sortable-column {
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap;
}

.data-table th.sortable-column::after {
    content: '↕';
    font-size: 10px;
    opacity: .35;
    margin-left: 6px;
}

.data-table th.sortable-column.sorted-asc::after {
    content: '↑';
    opacity: .9;
    color: var(--accent);
}

.data-table th.sortable-column.sorted-desc::after {
    content: '↓';
    opacity: .9;
    color: var(--accent);
}

.table-search-empty td {
    text-align: center;
    padding: 28px !important;
    color: var(--text3);
}


.branch-filter {
    display: inline-flex;
    align-items: center;
}
.branch-filter-select {
    height: 44px;
    min-width: 190px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 12px;
    padding: 0 12px;
    font-weight: 700;
    outline: none;
}
.branch-filter-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
@media (max-width: 900px) {
    .branch-filter-select { min-width: 150px; width: 150px; }
}


/* Bilingual Arabic / English support */
html[dir="rtl"] {
    --font:'Cairo','Space Grotesk',sans-serif;
}
html[dir="rtl"] body { font-family:var(--font); }
html[dir="rtl"] .app { direction:rtl; }
html[dir="rtl"] .sidebar { right:0; left:auto; border-right:0; border-left:1px solid var(--border); }
html[dir="rtl"] .main { margin-left:0; margin-right:var(--sidebar); }
html[dir="rtl"] .topbar, html[dir="rtl"] .card-header, html[dir="rtl"] .stat-top, html[dir="rtl"] .branch-top, html[dir="rtl"] .progress-label { direction:rtl; }
html[dir="rtl"] th { text-align:right; }
html[dir="rtl"] .nav-item, html[dir="rtl"] .logo, html[dir="rtl"] .user-card, html[dir="rtl"] .topbar-actions, html[dir="rtl"] .actions, html[dir="rtl"] .row-actions { flex-direction:row; }
html[dir="rtl"] .notif-dot { right:auto; left:6px; }
html[dir="rtl"] .stat-card:before { left:0; right:0; }
html[dir="rtl"] .metric-chart-label { transform:rotate(45deg); }
html[dir="rtl"] .data-table th.sortable-column::after { margin-left:0; margin-right:6px; }
html[dir="rtl"] .branch-filter-select, html[dir="rtl"] .language-select, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { text-align:right; }
.language-switcher{display:inline-flex;align-items:center}.language-select{height:44px;min-width:115px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:0 12px;font-weight:700;outline:none}.language-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.18)}
@media(max-width:1050px){html[dir="rtl"] .sidebar{position:static;width:100%;border-left:0}html[dir="rtl"] .main{margin-right:0;width:100%}}
@media(max-width:700px){.language-select{width:100%;min-width:100%}}
.text-danger,
.field-validation-error {
    color: #fb7185;
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
}

/* Identity screens */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.page-head h2{font-size:24px;letter-spacing:-.5px}.page-head p{color:var(--text3);margin-top:6px}.user-form-card{max-width:1100px}.permissions-panel{margin-top:22px;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}.permissions-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}.permissions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}.permission-item{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text2);font-size:12px;font-weight:700}.permission-item:hover{border-color:var(--accent);color:var(--text)}.permission-item input{width:16px;height:16px;accent-color:var(--accent)}.switch-line{display:flex!important;align-items:center;gap:10px;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}.switch-line input{width:18px;height:18px;accent-color:var(--accent)}.active-field{display:flex;align-items:end}.login-body{min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(108,99,255,.22),transparent 28%),radial-gradient(circle at 90% 10%,rgba(6,182,212,.13),transparent 26%),var(--bg);display:flex;align-items:center;justify-content:center;padding:28px}.login-shell{width:min(1050px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}.login-brand-panel,.login-card{border:1px solid var(--border);border-radius:22px;background:rgba(22,22,31,.78);box-shadow:0 24px 80px rgba(0,0,0,.35);backdrop-filter:blur(18px)}.login-brand-panel{padding:34px;min-height:540px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}.login-brand-panel:after{content:'';position:absolute;width:330px;height:330px;border-radius:50%;background:var(--accent-glow);right:-120px;bottom:-130px}.login-logo{border-bottom:0;padding:0;background:transparent}.login-brand-panel h1{font-size:44px;line-height:1.05;letter-spacing:-1.6px;max-width:650px;z-index:1}.login-brand-panel p{color:var(--text2);font-size:16px;line-height:1.7;max-width:560px;z-index:1}.login-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;z-index:1}.login-stats div{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px}.login-stats strong{display:block;font-size:24px}.login-stats span{color:var(--text3);font-size:12px}.login-card{padding:34px;display:flex;flex-direction:column;justify-content:center}.login-card-head{margin-bottom:24px}.login-card-head h2{font-size:30px;margin-top:14px}.login-card-head p{color:var(--text3);margin-top:6px}.login-card .field{margin-bottom:16px}.login-btn{width:100%;height:46px;margin-top:4px;font-size:15px}@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-brand-panel{min-height:360px}.permissions-grid{grid-template-columns:1fr}.page-head{flex-direction:column}.login-brand-panel h1{font-size:34px}}

/* Arabic-only identity pages fixes */
html[dir="rtl"], body.ar-only { font-family: 'Cairo', sans-serif; direction: rtl; text-align: right; }
html[dir="rtl"] .sidebar { right: 0; left: auto; border-right: 0; border-left: 1px solid var(--border); }
html[dir="rtl"] .main { margin-left: 0; margin-right: var(--sidebar); width: calc(100% - var(--sidebar)); }
html[dir="rtl"] .topbar { direction: rtl; }
html[dir="rtl"] .topbar-actions { flex-direction: row; }
html[dir="rtl"] th { text-align: right; }
html[dir="rtl"] .content { max-width: 100%; overflow-x: hidden; }
html[dir="rtl"] .page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; direction:rtl; }
html[dir="rtl"] .page-head h2 { font-size:26px; font-weight:800; letter-spacing:0; }
html[dir="rtl"] .page-head p { color:var(--text3); margin-top:5px; }
html[dir="rtl"] .form-card.user-form-card { max-width: 100%; width: 100%; margin: 0; }
html[dir="rtl"] .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
html[dir="rtl"] .field label { letter-spacing:0; text-transform:none; }
html[dir="rtl"] .input, html[dir="rtl"] select, html[dir="rtl"] textarea { text-align:right; direction:rtl; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="password"], html[dir="rtl"] .mono { direction:ltr; text-align:left; }
html[dir="rtl"] .permissions-panel { margin-top:22px; border:1px solid var(--border); border-radius:14px; background:rgba(28,28,40,.62); overflow:hidden; }
html[dir="rtl"] .permissions-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px; border-bottom:1px solid var(--border); }
html[dir="rtl"] .permissions-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:18px; }
html[dir="rtl"] .permission-item { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:12px 14px; min-height:44px; }
html[dir="rtl"] .permission-item span { color:var(--text2); font-weight:700; }
html[dir="rtl"] .permission-item input { accent-color: var(--accent); width:16px; height:16px; }
html[dir="rtl"] .alert { text-align:right; }
html[dir="rtl"] .login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(circle at top right, rgba(108,99,255,.2), transparent 34%), var(--bg); }
html[dir="rtl"] .login-shell { width:min(1050px,100%); display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; align-items:stretch; }
html[dir="rtl"] .login-brand-panel, html[dir="rtl"] .login-card { border:1px solid var(--border); border-radius:22px; background:rgba(22,22,31,.78); box-shadow:0 24px 80px rgba(0,0,0,.35); backdrop-filter:blur(18px); }
html[dir="rtl"] .login-brand-panel { padding:34px; min-height:540px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }
html[dir="rtl"] .login-card { padding:34px; display:flex; flex-direction:column; justify-content:center; }
html[dir="rtl"] .login-brand-panel h1 { font-size:42px; line-height:1.25; letter-spacing:0; }
html[dir="rtl"] .login-brand-panel p, html[dir="rtl"] .login-card-head p { color:var(--text2); line-height:1.8; }
html[dir="rtl"] .login-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
html[dir="rtl"] .login-stats div { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; }
html[dir="rtl"] .login-stats strong { display:block; font-size:22px; direction:ltr; text-align:right; }
html[dir="rtl"] .login-card-head { margin-bottom:24px; }
html[dir="rtl"] .login-card-head h2 { font-size:30px; margin-top:14px; }
html[dir="rtl"] .login-card .field { margin-bottom:16px; }
html[dir="rtl"] .login-btn { width:100%; height:46px; margin-top:4px; font-size:15px; }
@media(max-width:1050px){ html[dir="rtl"] .sidebar{position:static;width:100%;border-left:0} html[dir="rtl"] .main{margin-right:0;width:100%} }
@media(max-width:900px){ html[dir="rtl"] .login-shell{grid-template-columns:1fr} html[dir="rtl"] .permissions-grid{grid-template-columns:1fr} html[dir="rtl"] .page-head{flex-direction:column;align-items:flex-start} }
@media(max-width:700px){ html[dir="rtl"] .form-grid{grid-template-columns:1fr} }


/* Staff attendance side panel */
.employee-live-panel{margin:14px 10px;border:1px solid rgba(255,255,255,.09);background:rgba(24,24,36,.92);border-radius:16px;overflow:hidden}
.employee-live-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.employee-live-head strong{display:block;color:#fff;font-size:13px}
.employee-live-head span{display:block;color:#74759b;font-size:11px;margin-top:3px}
.employee-live-head a{font-size:11px;color:#9b8cff;text-decoration:none;border:1px solid rgba(124,92,255,.35);padding:6px 8px;border-radius:9px}
.employee-live-list{max-height:340px;overflow:auto;padding:8px}
.employee-live-empty{padding:14px;color:#77789e;font-size:12px}
.employee-live-item{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:start;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.employee-live-item:last-child{border-bottom:0}
.employee-live-avatar{width:30px;height:30px;border-radius:11px;background:#6f5bff;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px}
.employee-live-name{color:#fff;font-weight:700;font-size:12px;line-height:1.3}
.employee-live-meta,.employee-live-time{color:#77789e;font-size:10px;line-height:1.5;word-break:break-word}
.employee-live-status,.status-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;white-space:nowrap}
.employee-live-status.online,.status-pill.online{background:rgba(0,200,120,.12);color:#00e28b;border:1px solid rgba(0,200,120,.25)}
.employee-live-status.offline,.status-pill.offline{background:rgba(150,150,170,.12);color:#a5a6c8;border:1px solid rgba(150,150,170,.20)}
.pagination-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;color:#8d8eb5}
.empty-cell{text-align:center;color:#77789e;padding:22px}

.notif-btn { position: relative; }
.notif-count {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 800;
}
.notif-btn.pulse { animation: notifPulse .8s ease; }
@keyframes notifPulse { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
.notif-drawer {
    position: fixed;
    top: 76px;
    inset-inline-end: 24px;
    width: min(420px, calc(100vw - 32px));
    max-height: 72vh;
    overflow: auto;
    background: rgba(20, 20, 31, .98);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 25px 80px rgba(0,0,0,.45);
    z-index: 9999;
    display: none;
}
.notif-drawer.open { display: block; }
.notif-drawer-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.notif-drawer-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.notif-list { padding: 10px; }
.notif-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.025);
}
.notif-item.is-unread { border-color: rgba(124, 92, 255, .65); background: rgba(124, 92, 255, .08); }
.notif-item-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(124,92,255,.16); }
.notif-item-title { font-weight: 800; margin-bottom: 4px; }
.notif-item-msg { color: var(--text); font-size: 13px; }
.notif-item-meta { margin-top: 6px; color: var(--muted); font-size: 11px; }
.notif-empty { padding: 20px; text-align: center; color: var(--muted); }
.unread-row { background: rgba(124, 92, 255, .06); }
.status-pill.create, .status-pill.login { background: rgba(34,197,94,.12); color: #22c55e; }
.status-pill.update { background: rgba(245,158,11,.12); color: #f59e0b; }
.status-pill.delete { background: rgba(239,68,68,.12); color: #ef4444; }
.status-pill.logout { background: rgba(148,163,184,.12); color: #94a3b8; }


/* Report/filter pages polish */
.form-control{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 12px;font-family:var(--font);outline:none;width:100%;min-height:40px}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.panel.page-panel{background:var(--bg3);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:18px;box-shadow:0 18px 60px rgba(0,0,0,.18)}
.panel.page-panel .panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.panel.page-panel .panel-header h2{font-size:18px;font-weight:800;margin:0;color:var(--text)}
.panel.page-panel .panel-header p{margin-top:5px;color:var(--text3);font-size:12px;line-height:1.55}
.filters-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;padding:18px 22px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.012)}
.filters-grid .form-group{grid-column:span 3;min-width:0}
.filters-grid .form-group:first-child{grid-column:span 4}
.filters-grid .form-group label{display:block;font-size:11px;font-weight:800;color:var(--text2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.8px}
.filters-grid .form-actions{grid-column:span 2;display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.filters-grid input[type="date"]{color-scheme:dark}
.panel.page-panel .table-wrap{padding:0 22px 10px}
.panel.page-panel .data-table th{background:rgba(10,10,15,.35)}
.panel.page-panel .data-table td strong{font-weight:800;color:var(--text)}
.panel.page-panel .data-table td small{color:var(--text3);line-height:1.55}
.audit-page .status-pill.update,.audit-page .status-pill.delete,.audit-page .status-pill.login,.audit-page .status-pill.logout{min-width:62px}
html[dir="rtl"] .filters-grid .form-group label{text-transform:none;letter-spacing:0}
html[dir="rtl"] .form-control{text-align:right;direction:rtl}
html[dir="rtl"] .filters-grid input[type="date"],html[dir="rtl"] .filters-grid input[name="searchValue"]{direction:ltr;text-align:left}
@media(max-width:1200px){.filters-grid .form-group,.filters-grid .form-group:first-child{grid-column:span 6}.filters-grid .form-actions{grid-column:span 12}}
@media(max-width:700px){.filters-grid{grid-template-columns:1fr}.filters-grid .form-group,.filters-grid .form-group:first-child,.filters-grid .form-actions{grid-column:1}}

/* Backup automation page */
.backup-page .backup-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}
.backup-automation-shell{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-bottom:18px}
.backup-card{background:linear-gradient(180deg,rgba(20,29,48,.88),rgba(17,17,25,.96));border:1px solid rgba(6,182,212,.28);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.22);overflow:hidden}
.backup-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid rgba(6,182,212,.18)}
.backup-card-head.compact{padding-bottom:14px}
.backup-section-label{display:block;color:var(--cyan);font-size:12px;font-weight:900;margin-bottom:9px}
.backup-card h2{font-size:19px;margin:0;color:var(--text);font-weight:900}
.backup-card p{color:var(--text2);font-size:12px;line-height:1.7;margin-top:7px}
.backup-settings-form{padding:20px 22px}
.backup-time-row{display:grid;grid-template-columns:280px 1fr;gap:14px;margin-bottom:14px;align-items:end}
.backup-time-field label{display:block;color:var(--text2);font-weight:800;font-size:12px;margin-bottom:7px}
.backup-help-box,.backup-note{border:1px solid rgba(6,182,212,.25);background:rgba(6,182,212,.07);color:var(--text2);border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.7}
.backup-switch-list{display:flex;flex-direction:column;gap:10px}
.backup-switch-item{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;border:1px solid rgba(6,182,212,.22);background:rgba(9,16,30,.45);border-radius:13px;padding:13px 14px;cursor:pointer}
.backup-switch-item input{display:none}
.backup-switch-ui{width:42px;height:24px;border-radius:999px;background:rgba(148,163,184,.22);border:1px solid rgba(148,163,184,.28);position:relative;transition:.18s ease}
.backup-switch-ui:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s ease;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.backup-switch-item input:checked + .backup-switch-ui{background:rgba(6,182,212,.55);border-color:rgba(6,182,212,.75)}
.backup-switch-item input:checked + .backup-switch-ui:after{left:21px}
.backup-switch-item strong{display:block;color:var(--text);font-size:13px;font-weight:900}
.backup-switch-item small{display:block;color:var(--text3);font-size:11px;line-height:1.6;margin-top:3px}
.backup-switch-item.browser-only{border-color:rgba(108,99,255,.35);background:rgba(108,99,255,.07)}
.backup-actions-row{display:flex;justify-content:flex-end;margin-top:16px}
.backup-manual-card{display:flex;flex-direction:column;min-height:100%}
.manual-actions-form{padding:18px 22px 10px}
.manual-primary{width:100%;min-height:46px;font-weight:900}
.danger-note{margin:12px 22px 22px;border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.08)}
.backup-history-panel{margin-top:4px}
.status-pill.success{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.24)}
.status-pill.failed{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.24)}
html[dir="rtl"] .backup-switch-ui:after{left:auto;right:3px}
html[dir="rtl"] .backup-switch-item input:checked + .backup-switch-ui:after{left:auto;right:21px}
html[dir="rtl"] .backup-time-field input{direction:ltr;text-align:left}
@media(max-width:1100px){.backup-automation-shell{grid-template-columns:1fr}.backup-page .backup-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.backup-time-row{grid-template-columns:1fr}}
@media(max-width:700px){.backup-page .backup-summary-grid{grid-template-columns:1fr}.backup-settings-form,.backup-card-head{padding:16px}.backup-switch-item{grid-template-columns:1fr}.backup-actions-row{justify-content:stretch}.backup-actions-row .btn{width:100%}}
.manual-actions-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:18px 22px 10px}
.manual-actions-grid .manual-actions-form{padding:0}
.manual-actions-grid .btn{width:100%;min-height:44px;font-weight:900}
.manual-actions-grid .btn:not(.btn-primary){border:1px solid rgba(6,182,212,.25);background:rgba(9,16,30,.45)}


/* Egypt clock in topbar */
.egypt-clock{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(6,182,212,.28);background:rgba(6,182,212,.08);color:var(--text);white-space:nowrap}
.egypt-clock-icon{font-size:14px}
.egypt-clock-label{font-size:11px;font-weight:900;color:var(--cyan);text-transform:uppercase;letter-spacing:.7px}
.egypt-clock-value{font-family:var(--mono);font-size:13px;font-weight:900;color:var(--text)}
html[dir="rtl"] .egypt-clock{direction:ltr}
@media(max-width:700px){.egypt-clock{width:100%;justify-content:center}.topbar-actions{width:100%;flex-wrap:wrap}}
.qr-result-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}.qr-box{background:#fff;border-radius:18px;padding:24px;display:flex;align-items:center;justify-content:center;min-height:280px}.compact-card{padding:18px;border-radius:18px}@media(max-width:900px){.qr-result-grid{grid-template-columns:1fr}.qr-box{min-height:220px}}

/* ================= MOBILE RESPONSIVE (proper drawer) ================= */
.hamburger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;align-items:center;justify-content:center;font-size:20px;padding:0;margin-inline-end:8px}
.hamburger:hover{background:var(--surface2)}
.sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:98}

@media(max-width:900px){
  /* Force the sidebar back to fixed drawer (overrides the earlier position:static rule at 1050px) */
  .app{display:block}
  .sidebar{
    position:fixed !important;
    top:0;left:0;bottom:0;
    width:280px !important;
    max-width:85vw;
    z-index:99;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }
  html[dir="rtl"] .sidebar{left:auto;right:0;transform:translateX(100%);border-left:1px solid var(--border);border-right:0}
  body.sidebar-open .sidebar{transform:translateX(0)}
  body.sidebar-open .sidebar-scrim{display:block}
  .main{margin-left:0 !important;margin-right:0 !important;width:100% !important;min-width:0}
  .hamburger{display:inline-flex}
  .topbar{padding:12px 14px;height:auto;min-height:60px;gap:8px;flex-wrap:wrap}
  .page-title{font-size:16px}
  .page-breadcrumb{display:none}
  .content{padding:14px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  .stat-card{padding:14px}
  .stat-value{font-size:22px}
  .form-grid{grid-template-columns:1fr;gap:12px}
  .card-header{padding:14px 16px;flex-wrap:wrap;gap:8px}
  .card-body{padding:14px}
  .grid-2,.grid-3,.branch-layout{grid-template-columns:1fr;gap:12px}
  .product-grid{grid-template-columns:1fr;gap:12px}
  .page-head{flex-direction:column;align-items:stretch;gap:10px}
  .page-head h2{font-size:18px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:560px}
  th,td{padding:8px 10px;font-size:12px}
  .btn{padding:8px 12px;font-size:13px;min-height:38px}
  .btn-primary{min-height:40px}
  input,select,textarea,.input,.form-control,.search-input{font-size:16px !important;width:100%}
  .filters-row,.expense-filters,.filters-grid{grid-template-columns:1fr !important;gap:8px !important}
  .actions,.row-actions{gap:6px}
  .language-select,.egypt-clock,.notif-btn{height:36px}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .content{padding:12px}
  .card-header{padding:12px}
  .card-body{padding:12px}
  .badge{font-size:10px;padding:2px 7px}
  th,td{padding:7px 8px;font-size:11.5px}
}

/* Bigger tap targets on all mobile widths */
@media(pointer:coarse){
  .nav-item{padding:11px 12px}
  .btn-sm{min-height:34px;padding:6px 12px}
}

/* ==========================================================
   Themed overrides for Employee-online panel & Notifications
   These use the CSS variables from _ThemeStyles so they follow
   whatever theme is active.
   ========================================================== */
.employee-live-panel {
    background: var(--surface);
    border: 1px solid var(--border);
}
.employee-live-head { border-bottom: 1px solid var(--border); }
.employee-live-head strong { color: var(--text); }
.employee-live-head span { color: var(--text3); }
.employee-live-head a {
    color: var(--accent);
    border: 1px solid var(--border);
    background: transparent;
}
.employee-live-head a:hover { background: var(--bg3); }
.employee-live-empty { color: var(--text3); }
.employee-live-item { border-bottom: 1px solid var(--border); }
.employee-live-avatar { background: var(--accent); color: var(--on-accent); }
.employee-live-name { color: var(--text); }
.employee-live-meta,
.employee-live-time { color: var(--text3); }

.notif-btn {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
}
.notif-btn:hover { background: var(--bg3); }

.notif-drawer {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: 0 25px 80px rgba(0,0,0,.35);
}
.notif-drawer-header { border-bottom: 1px solid var(--border); }
.notif-drawer-header strong { color: var(--text); }
.notif-drawer-header p { color: var(--text3); }
.notif-item {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
}
.notif-item.is-unread {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg3));
}
.notif-item-icon {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    color: var(--accent);
}
.notif-item-title { color: var(--text); }
.notif-item-msg { color: var(--text2); }
.notif-item-meta { color: var(--text3); }
.notif-empty { color: var(--text3); }

/* Owner logo — replaces the initial-letter square when uploaded. */
.logo-icon-image {
    width: 44px; height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface);
    border: 1px solid var(--border);
    display: block;
}
.login-logo .logo-icon-image { width: 56px; height: 56px; border-radius: 14px; }