@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Cairo:wght@400;600;700;800&display=swap');
/* ============================================================
EMDATRA · Design Tokens
============================================================ */
:root{
/* Brand · Deep Indigo */
--c-primary-50:#EEF2FF;--c-primary-100:#DDE5FF;--c-primary-200:#B8C7FF;
--c-primary-300:#8AA1F5;--c-primary-400:#5C7BE0;--c-primary-500:#3658CC;
--c-primary-600:#2643A8;--c-primary-700:#1B3387;--c-primary-800:#152663;
--c-primary-900:#0B1839;
/* Accent · Teal */
--c-accent-50:#E6FBFA;--c-accent-200:#7FE5E0;--c-accent-400:#1FC9C2;
--c-accent-500:#06B0AA;--c-accent-700:#04827E;
/* Neutrals */
--c-white:#FFFFFF;--c-bg:#F8FAFC;--c-surface:#FFFFFF;
--c-n-50:#F8FAFC;--c-n-100:#F1F5F9;--c-n-200:#E2E8F0;--c-n-300:#CBD5E1;
--c-n-400:#94A3B8;--c-n-500:#64748B;--c-n-600:#475569;--c-n-700:#334155;
--c-n-800:#1E293B;--c-n-900:#0F172A;
/* Semantic */
--c-success-50:#ECFDF5;--c-success-500:#10B981;--c-success-700:#047857;
--c-warning-50:#FFFBEB;--c-warning-500:#F59E0B;--c-warning-700:#B45309;
--c-danger-50:#FEF2F2;--c-danger-500:#EF4444;--c-danger-700:#B91C1C;
--c-info-50:#EFF6FF;--c-info-500:#3B82F6;--c-info-700:#1D4ED8;
/* Spacing */
--sp-xs:4px;--sp-sm:8px;--sp-md:12px;--sp-base:16px;--sp-lg:20px;--sp-xl:24px;--sp-2xl:32px;--sp-3xl:48px;--sp-4xl:64px;
/* Radius */
--r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:24px;--r-full:9999px;
/* Shadow */
--sh-sm:0 1px 2px rgba(0,0,0,.04);
--sh-md:0 4px 8px rgba(0,0,0,.06);
--sh-lg:0 8px 24px -4px rgba(0,0,0,.08);
--sh-xl:0 20px 40px -8px rgba(0,0,0,.12);
--sh-glow:0 4px 12px -2px rgba(54,88,204,.25);
/* Type */
--ff-ar:'IBM Plex Sans Arabic','Cairo','Tajawal','Segoe UI',Tahoma,sans-serif;
--ff-en:'Inter','Segoe UI',Tahoma,sans-serif;
--ff-num:'Inter','Cairo',monospace;
/* Brand gradient */
--grad-brand:linear-gradient(135deg,#3658CC,#06B0AA);
--grad-sidebar:linear-gradient(180deg,#0B1839,#152663);
--grad-surface:linear-gradient(135deg,#0B1839,#1B3387);
}
*{box-sizing:border-box;margin:0;padding:0}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideUp{from{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}
html{overflow-x:hidden;max-width:100vw}
/* NOTE: overflow-x:hidden must NOT be set on here. When body has
overflow-x:hidden the browser computes its overflow-y to `auto`, turning
body into a scroll container. Since body's content height equals its own
height (nothing to scroll), and overscroll-behavior was `contain`, mouse-
wheel/trackpad scrolls were absorbed by body and never chained to
(the real scroller) — locking the whole page. Keep horizontal clipping on
only; let stay overflow:visible so scrolling works. */
body{max-width:100vw}
body{font-family:'IBM Plex Sans Arabic','Cairo','Segoe UI',Tahoma,sans-serif;background:#F1F5F9;color:#0F172A;direction:rtl}
.ptr-indicator{position:fixed;top:-60px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;z-index:9999;transition:top .2s ease}
.ptr-indicator.pulling{transition:none}
.ptr-indicator.visible{top:16px}
.ptr-indicator .ptr-spinner{width:24px;height:24px;border:3px solid #e2e8f0;border-top-color:#4a7a9a;border-radius:50%;animation:ptr-spin .8s linear infinite}
@keyframes ptr-spin{to{transform:rotate(360deg)}}
.app-loading{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(2px)}
.app-loading-box{background:#fff;border-radius:16px;padding:24px 40px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.app-loading-box .ptr-spinner{width:32px;height:32px;border:3px solid #e2e8f0;border-top-color:#4a7a9a;border-radius:50%;animation:ptr-spin .8s linear infinite;margin:0 auto 12px}
.app-loading-box p{font-size:14px;color:#374151;font-weight:600}
.btn.saving{opacity:.6;pointer-events:none;position:relative}
.field-error{border-color:#ef4444!important;box-shadow:0 0 0 2px rgba(239,68,68,.2)!important}
.field-error-msg{color:#ef4444;font-size:11px;margin-top:2px;display:block}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}
/* SIDEBAR */
.sidebar{position:fixed;right:0;top:0;width:230px;height:100vh;height:100dvh;background:linear-gradient(180deg,#0B1839,#152663);color:#fff;z-index:100;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-shadow:-3px 0 15px rgba(0,0,0,.2)}
.sidebar-logo{padding:20px 16px;border-bottom:1px solid rgba(255,255,255,.1);text-align:center}
.sidebar-logo .logo-icon{font-size:30px;margin-bottom:6px}
.sidebar-logo h2{font-size:14px;font-weight:700;line-height:1.4}
.sidebar-logo .sub{font-size:10px;opacity:.5;margin-top:3px}
.nav-sec{padding:14px 12px 4px;font-size:13px;text-transform:uppercase;opacity:.5;letter-spacing:1px;font-family:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif;font-weight:800}
.nav-item{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;font-size:17.5px;color:rgba(255,255,255,.78);border-right:3px solid transparent;transition:all .2s;white-space:nowrap;font-family:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif;font-weight:800}
.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.1);color:#fff;border-right-color:#06B0AA}
.nav-item .ic{font-size:19px;width:24px;text-align:center}
.nav-sub{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 16px;padding-right:36px;font-size:12px;color:rgba(255,255,255,.55);cursor:pointer;border-right:3px solid transparent;transition:all .2s}
.nav-sub .ic{font-size:13px;width:18px;text-align:center}
.nav-sub:hover,.nav-sub.active{color:#fff;border-right-color:#06B0AA;background:rgba(255,255,255,.06)}
.nav-submenu{background:rgba(0,0,0,.15);border-right:3px solid rgba(6,176,170,.3)}
.nav-arrow{margin-right:auto;font-size:10px;opacity:.5;transition:transform .2s}
/* MAIN */
.main{margin-right:230px;min-height:100vh;position:relative}
/* ===== TOPBAR — Light Pills (Option 4) ===== */
/* === TOPBAR (modernized — Header Option A v2) === */
.topbar{background:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 2px rgba(11,24,57,.06);position:sticky;top:0;z-index:50;gap:14px;min-height:72px;border-bottom:1px solid #e2e8f0}
.topbar-right{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.topbar-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* Brand cluster: gradient logo bubble + brand text */
.topbar-brand{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}
.tb-logo-bubble{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:800;background:linear-gradient(135deg,#0B1839 0%,#06B0AA 100%);box-shadow:0 4px 10px rgba(11,24,57,.25);flex-shrink:0;letter-spacing:0}
.tb-brand-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.tb-brand-org{font-size:13px;font-weight:800;color:#0F172A;letter-spacing:.4px;line-height:1.1;font-family:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif}
.tb-brand-page{font-size:11px;font-weight:500;color:#64748B;line-height:1.1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif}
.topbar h1.tb-brand-page{font-size:11px;font-weight:500;color:#64748B}
/* Meta chips (clock + currency) */
.tb-meta{display:flex;align-items:center;gap:8px;min-width:0}
.tb-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap;background:#F8FAFC;color:#475569;border:1px solid transparent;transition:background .15s}
.tb-chip:hover{background:#F1F5F9}
.tb-chip-ic{font-size:13px;line-height:1}
.tb-clock #topbar-clock{font-family:'Courier New',monospace;font-size:12px;font-weight:700;color:#0F172A;letter-spacing:.5px;direction:ltr}
.tb-fx{background:#F0FDF4;color:#15803D;cursor:pointer;direction:ltr}
.tb-fx:hover{background:#DCFCE7}
.tb-fx-dot{width:6px;height:6px;border-radius:50%;background:#10B981;display:inline-block;flex-shrink:0;animation:tb-fx-pulse 2.4s ease-in-out infinite}
.tb-fx-text{font-size:12px;font-weight:700;font-family:'Inter','Cairo',sans-serif}
@keyframes tb-fx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 4px rgba(16,185,129,0)}}
/* Action cluster: segmented pill (search / bell / theme) */
.tb-action-cluster{display:inline-flex;align-items:stretch;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:0;height:48px;overflow:hidden}
.tb-action-cluster .tb-icon-btn{position:relative;width:52px;height:46px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;padding:0;margin:0;color:#0F172A;transition:background .12s}
.tb-action-cluster .tb-icon-btn:hover{background:#F1F5F9}
.tb-action-cluster .tb-icon-btn + .tb-icon-btn,
.tb-action-cluster .tb-icon-btn + .notification-bell-wrap,
.tb-action-cluster .notification-bell-wrap + .tb-icon-btn,
.tb-action-cluster .tb-icon-btn:nth-child(n+2){border-right:1px solid #E2E8F0}
.tb-action-cluster .tb-icon{font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.tb-action-cluster .theme-toggle{width:52px;height:46px;border-radius:0;background:transparent}
.tb-action-cluster .theme-toggle:hover{background:#F1F5F9;color:inherit}
.tb-action-cluster .notification-bell-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:52px;height:46px}
.tb-action-cluster .notification-bell-wrap.tb-icon-btn{padding:0;background:transparent;border:0}
.tb-action-cluster .notification-bell-wrap .notification-bell-btn{width:100%;height:100%;background:transparent;border:0;cursor:pointer;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;color:#0F172A;transition:background .12s;position:relative}
.tb-action-cluster .notification-bell-wrap .notification-bell-btn:hover{background:#F1F5F9}
.tb-icon-badge{position:absolute;top:6px;left:8px;min-width:18px;height:18px;line-height:14px;padding:0 4px;border-radius:9px;background:#EF4444;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #F8FAFC;font-family:'Inter','Cairo',sans-serif;box-shadow:0 1px 3px rgba(239,68,68,.4)}
/* Language pill */
.tb-lang-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0F172A;border:1px solid #E2E8F0;border-radius:12px;padding:0 14px;height:48px;font-size:12px;font-weight:800;cursor:pointer;font-family:'Inter','Cairo',sans-serif;transition:all .12s}
.tb-lang-pill:hover{background:#F8FAFC;border-color:#CBD5E1}
.tb-lang-ic{font-size:14px}
.tb-lang-txt{letter-spacing:.6px}
/* User cluster */
#user-badge{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.tb-user{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:6px 12px 6px 6px;cursor:default;transition:all .12s;height:48px}
.tb-user:hover{border-color:#CBD5E1}
.tb-user-ava{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3658CC,#06B0AA);color:#fff;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Cairo',sans-serif}
.tb-user-text{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.1}
.tb-user-name{font-size:12px;font-weight:700;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.tb-user-role{font-size:10px;font-weight:500;color:#64748B;white-space:nowrap}
.tb-logout{display:inline-flex;align-items:center;gap:6px;background:#FEF2F2;color:#DC2626;border:1px solid #FECACA;border-radius:12px;padding:0 14px;height:48px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;transition:all .12s}
.tb-logout:hover{background:#FEE2E2;border-color:#FCA5A5}
.tb-logout-ic{font-size:13px;font-weight:800;display:inline-flex}
.tb-logout-txt{font-size:12px;font-weight:700}
/* Sidebar toggle (hamburger) styled to match cluster on desktop */
.topbar .hamburger{flex-shrink:0}
.content{padding:20px 24px}
.page{display:none}.page.active{display:block}
/* CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat-card{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 2px 12px rgba(0,0,0,.07);border:none;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:default}
.stat-card::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;border-radius:0 14px 14px 0}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.stat-card.c1::before{background:#3658CC}.stat-card.c2::before{background:#10b981}
.stat-card.c3::before{background:#f59e0b}.stat-card.c4::before{background:#8b5cf6}
.stat-card.c5::before{background:#ef4444}.stat-card.c6::before{background:#06b6d4}
.stat-card .sc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px;flex-shrink:0}
.stat-card.c1 .sc-icon{background:#F8FAFC}.stat-card.c2 .sc-icon{background:#ecfdf5}
.stat-card.c3 .sc-icon{background:#fffbeb}.stat-card.c4 .sc-icon{background:#f5f3ff}
.stat-card.c5 .sc-icon{background:#fef2f2}.stat-card.c6 .sc-icon{background:#ecfeff}
.stat-card .lbl{font-size:11px;color:#6b7280;font-weight:600;letter-spacing:.3px;margin-bottom:4px}
.stat-card .val{font-size:22px;font-weight:800;color:#111827;line-height:1.1;margin-bottom:4px}
.stat-card .sub{font-size:11px;color:#9ca3af;display:flex;align-items:center;gap:4px}
.stat-card .sc-bg{position:absolute;left:-10px;top:50%;transform:translateY(-50%);font-size:60px;opacity:.04;pointer-events:none}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.chart-card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.06);display:flex;flex-direction:column}
.chart-card canvas{flex:1;min-height:200px;max-height:280px}
.chart-card h3{font-size:14px;font-weight:700;color:#0B1839;margin-bottom:14px}
.chart-card canvas{max-height:240px}
/* TABLE */
.tbl-card{background:#fff;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.08);overflow:visible;margin-bottom:20px;border:1px solid #c5cfd9}
.ps-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.tbl-hdr{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f4f8;flex-wrap:wrap;gap:8px}
.tbl-hdr h3{font-size:15px;font-weight:800;color:#0B1839;font-family:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif}
.tbl-toolbar{padding:10px 16px;display:flex;gap:6px;flex-wrap:wrap;background:#fafbfc;border-bottom:1px solid #f0f4f8;align-items:center}
.srch{flex:1;min-width:140px;padding:7px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:12px;outline:none;font-family:inherit;direction:rtl;background:#fff;transition:border-color .2s,box-shadow .2s}
.srch:focus{border-color:#3658CC;box-shadow:0 0 0 3px rgba(54,88,204,.1)}
.fsel{padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:12px;outline:none;font-family:inherit;background:#fff;direction:rtl;transition:border-color .2s;cursor:pointer;max-width:160px}
.fsel:focus{border-color:#3658CC}
table{width:100%;border-collapse:collapse;border:1px solid #b8c5d1;font-family:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif}
th{background:linear-gradient(180deg,#eef2f7 0%,#dde4ec 100%);padding:7px 9px;text-align:right;font-size:11px;font-weight:700;color:#334155;border:1px solid #b8c5d1;border-bottom:2px solid #3658CC;white-space:nowrap;position:relative;letter-spacing:.2px}
th[data-col]{cursor:pointer;user-select:none}
th[data-col]:hover{background:linear-gradient(180deg,#e0e8f0 0%,#cbd5e1 100%);color:#1e3a5f}
th[data-col].col-filtered{background:linear-gradient(180deg,#dde8d8 0%,#c3d4bc 100%);color:#365c2a}
th[data-col] .col-filter-icon{font-size:9px;margin-right:3px;opacity:.5;transition:opacity .2s}
th[data-col]:hover .col-filter-icon,th[data-col].col-filtered .col-filter-icon{opacity:1}
.col-filter-dd{position:absolute;top:100%;right:0;z-index:999;background:#fff;border:1.5px solid #b8c5d1;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:180px;max-height:260px;overflow-y:auto;padding:6px 0;font-weight:400;text-transform:none;direction:rtl}
.col-filter-dd .cfd-search{width:calc(100% - 16px);margin:4px 8px 6px;padding:6px 10px;border:1.5px solid #b8c5d1;border-radius:3px;font-size:12px;font-family:inherit;outline:none;direction:rtl}
.col-filter-dd .cfd-search:focus{border-color:#3658CC}
.col-filter-dd .cfd-item{padding:6px 14px;font-size:12px;color:#374151;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;user-select:none}
.col-filter-dd .cfd-item:hover{background:#eef2f7}
.col-filter-dd .cfd-item.active{background:#dde8d8;color:#365c2a;font-weight:600}
.col-filter-dd .cfd-cb{margin:0;cursor:pointer;accent-color:#365c2a}
.col-filter-dd .cfd-actions{display:flex;gap:6px;padding:6px 10px 4px;border-bottom:1px solid #e2e8f0}
.col-filter-dd .cfd-btn{flex:1;padding:5px 8px;font-size:11px;font-family:inherit;border:1px solid #cbd5e1;background:#f8fafc;color:#334155;border-radius:3px;cursor:pointer;font-weight:600}
.col-filter-dd .cfd-btn:hover{background:#e2e8f0}
.col-filter-dd .cfd-list{max-height:200px;overflow-y:auto}
.col-filter-dd .cfd-footer{border-top:1px solid #e2e8f0;padding:4px}
.col-filter-dd .cfd-clear-btn{width:100%;padding:6px;font-size:11px;background:#fef2f2;color:#dc2626;border:0;border-radius:3px;cursor:pointer;font-weight:600;font-family:inherit}
.col-filter-dd .cfd-clear-btn:hover{background:#fee2e2}
td{padding:6px 9px;font-size:12px;color:#1f2937;border:1px solid #d6dde5;vertical-align:middle;white-space:nowrap;background:#fff}
tbody tr:nth-child(even) td{background:#f7f9fc}
tbody tr:hover td{background:#fff8d6}
tbody tr.selected td,tbody tr[data-selected="true"] td{background:#dbeafe}
tfoot.totals-foot td{padding:8px 9px;font-size:12px;border:1px solid #b8c5d1;border-top:2px solid #3658CC;background:#ecfdf5;white-space:nowrap}
.pgn{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0f4f8}
.pgn-info{font-size:12px;color:#6b7280}
.pgn-btns{display:flex;gap:5px}
.pb{width:30px;height:30px;border-radius:7px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:all .2s}
.pb:hover,.pb.active{background:#3658CC;color:#fff;border-color:#3658CC}
/* BADGES */
.bdg{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:600}
.b-blue{background:#dbeafe;color:#1d4ed8}.b-green{background:#d1fae5;color:#065f46}
.b-orange{background:#fed7aa;color:#92400e}.b-purple{background:#ede9fe;color:#5b21b6}
.b-gray{background:#f3f4f6;color:#374151}.b-red{background:#fee2e2;color:#991b1b}
.b-teal{background:#ccfbf1;color:#0f766e}.b-yellow{background:#fef3c7;color:#92400e}
.amt{font-weight:700;color:#059669}
.amt-d{font-weight:700;color:#1d4ed8}
.amt-s{font-weight:700;color:#d97706}
/* BTNS */
.btn{padding:8px 16px;border-radius:7px;border:none;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.btn-p{background:#3658CC;color:#fff}.btn-p:hover{background:#2643A8}
.btn-g{background:#10b981;color:#fff}.btn-g:hover{background:#059669}
.btn-r{background:#ef4444;color:#fff}.btn-r:hover{background:#dc2626}
.btn-o{background:#f59e0b;color:#fff}.btn-o:hover{background:#d97706}
.btn-sm{padding:4px 9px;font-size:11px}
.btn-out{background:#fff;border:1.5px solid #e2e8f0;color:#374151}
.btn-out:hover{border-color:#3658CC;color:#3658CC}
/* TABS inside page */
.subtabs{display:flex;gap:4px;margin-bottom:16px;background:#fff;border-radius:10px;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.06);width:fit-content}
.stab{padding:8px 18px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;color:#6b7280;transition:all .2s}
.stab.active{background:#3658CC;color:#fff}
/* MODAL */
.mov{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;z-index:200;padding:20px;overflow-y:auto;backdrop-filter:blur(4px)}
.mov.open{display:flex}
.mdl{background:#fff;border-radius:14px;padding:24px;width:100%;max-width:700px;margin:auto;animation:si .2s ease;box-shadow:0 20px 60px rgba(0,0,0,.2)}
@keyframes si{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}
.mdl h3{font-size:16px;font-weight:700;color:#0B1839;margin-bottom:4px}
.mdl .msub{font-size:11px;color:#9ca3af;margin-bottom:18px}
.fg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fgrp{display:flex;flex-direction:column;gap:4px}
.fgrp.full{grid-column:1/-1}.fgrp.sp2{grid-column:span 2}
.fgrp label{font-size:11px;font-weight:600;color:#374151}
.fgrp label .req{color:#ef4444}
.fi{padding:8px 11px;border:1.5px solid #e2e8f0;border-radius:7px;font-size:13px;outline:none;font-family:inherit;direction:rtl;width:100%;transition:border-color .2s}
.fi:focus{border-color:#3658CC;box-shadow:0 0 0 3px rgba(54,88,204,.1)}
input[type="date"].fi,input[type="date"].fsel{direction:ltr;text-align:right;cursor:pointer;position:relative}
input[type="date"].fi::-webkit-calendar-picker-indicator,input[type="date"].fsel::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.fi.req-f{border-color:#fca5a5;background:#fff8f8}
.sec-title{font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid #f0f4f8}
.mftr{display:flex;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid #f0f4f8}
/* TOAST */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;padding:10px 22px;border-radius:9px;font-size:13px;font-weight:600;z-index:300;display:none}
/* Inventory cards grid */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:16px}
/* ===== USER PERMISSIONS MODAL ===== */
.uperm-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;display:none;align-items:center;justify-content:center}
.uperm-modal-overlay.open{display:flex}
.uperm-modal{background:#fff;border-radius:16px;width:96vw;max-width:900px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.uperm-header{background:linear-gradient(135deg,#0B1839,#3658CC);color:#fff;padding:20px 24px;display:flex;align-items:center;gap:16px}
.uperm-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;flex-shrink:0}
.uperm-header h2{font-size:18px;font-weight:700;margin:0}
.uperm-header p{font-size:12px;opacity:.8;margin:2px 0 0}
.uperm-close{margin-right:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
.uperm-close:hover{background:rgba(255,255,255,.3)}
.uperm-tabs{display:flex;border-bottom:2px solid #f0f4f8;padding:0 20px;background:#f8fafc}
.uperm-tab{padding:12px 18px;font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s}
.uperm-tab.active{color:#3658CC;border-bottom-color:#3658CC}
.uperm-body{flex:1;overflow-y:auto;padding:20px}
.uperm-section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:20px}
.uperm-sec-card{background:#f8fafc;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}
.th-sel,.td-sel{width:32px;text-align:center!important;padding:4px!important}
.row-sel{width:15px;height:15px;cursor:pointer;accent-color:#3658CC}
.sel-bar{display:none;align-items:center;gap:10px;background:#F8FAFC;border:1px solid #c5d9ca;border-radius:8px;padding:8px 14px;margin-bottom:8px;font-size:13px;color:#4a7a9a}
.sel-bar .sel-count{font-weight:700;color:#2643A8}
.sel-bar .btn-sel-del{background:#ef4444;color:#fff;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;font-size:12px;font-weight:600}
.sel-bar .btn-sel-exp{background:#3658CC;color:#fff;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;font-size:12px;font-weight:600}
.sel-bar .btn-sel-clr{background:transparent;border:1px solid #c5d9ca;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:12px;color:#4a7a9a}
.uperm-sec-hdr{padding:10px 14px;background:#fff;border-bottom:1px solid #f0f4f8;font-size:13px;font-weight:700;color:#0B1839;display:flex;align-items:center;gap:8px}
.uperm-sec-hdr .toggle-all{margin-right:auto;font-size:11px;color:#3658CC;cursor:pointer;font-weight:600}
.uperm-sec-body{padding:10px 14px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.uperm-chk{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
.uperm-chk input[type=checkbox]{accent-color:#3658CC;width:14px;height:14px;cursor:pointer}
.uperm-cols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.uperm-col-card{background:#f8fafc;border-radius:10px;border:1px solid #e5e7eb;padding:12px}
.uperm-col-card h5{font-size:12px;font-weight:700;color:#0B1839;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #e5e7eb}
.uperm-col-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid #f8fafc;font-size:12px}
.uperm-col-row:last-child{border-bottom:none}
.toggle-switch{position:relative;display:inline-block;width:34px;height:18px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#d1d5db;border-radius:18px;transition:.3s}
.toggle-slider:before{position:absolute;content:'';width:14px;height:14px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.3s}
.toggle-switch input:checked+.toggle-slider{background:#3658CC}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(16px)}
.uperm-footer{padding:16px 20px;border-top:1px solid #f0f4f8;display:flex;justify-content:space-between;align-items:center;background:#f8fafc}
.uperm-footer-note{font-size:11px;color:#9ca3af}
/* ===== SECTION STATS BAR ===== */
.sec-stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
/* Dashboard KPI: single continuous row. JS renders all cards into
#db-stats; #db-stats2 stays empty and collapses. auto-fit lets the
row wrap only when cards drop below 180px. */
#db-stats{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important;gap:14px;width:100%;margin-bottom:20px}
#db-stats2{display:none !important}
#db-stats .stat-card{display:flex;flex-direction:column;justify-content:space-between;min-height:130px;padding:14px 16px;width:auto;min-width:0}
#db-stats .stat-card .sc-value{font-size:22px;line-height:1.15;margin-bottom:4px;display:flex;align-items:center;gap:8px}
#db-stats .stat-card .sc-label{font-size:12px;color:var(--c-n-700);font-weight:600;margin-bottom:2px}
#db-stats .stat-card .sc-sub{font-size:10.5px;color:var(--c-n-500);line-height:1.4}
.stat-card .sc-value{font-size:22px;font-weight:800;line-height:1.1;margin-bottom:6px}
.stat-card .sc-label{font-size:12px;color:#6b7280;font-weight:600}
.stat-card .sc-sub{font-size:10px;color:#9ca3af;margin-top:4px}
/* Sandooq running balance */
.sb-pos{color:#059669;font-weight:700}.sb-neg{color:#dc2626;font-weight:700}
.inv-item{background:#fff;border-radius:10px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);text-align:center;border-top:3px solid #3658CC}
.inv-item .i-name{font-size:13px;font-weight:700;color:#0B1839;margin-bottom:6px;word-break:break-word}
.inv-item .i-qty{font-size:20px;font-weight:800;color:#059669}
.inv-item .i-lbl{font-size:10px;color:#9ca3af}
.inv-low{border-top-color:#ef4444!important;background:#fef2f2!important}
.inv-low .i-qty{color:#ef4444}
.inv-low .i-lbl{color:#dc2626;font-weight:600}
.inv-warn{border-top-color:#f59e0b!important;background:#fffbeb!important}
.inv-warn .i-qty{color:#d97706}
.inv-warn .i-lbl{color:#d97706;font-weight:600}
.subtab-content{display:none}.subtab-content.active{display:block}
/* DASHBOARD FILTERS */
.db-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 2px 10px rgba(0,0,0,.06);margin-bottom:20px}
.db-filter-group{display:flex;flex-direction:column;gap:4px}
.db-filter-group label{font-size:11px;font-weight:600;color:#6b7280}
.db-filter-group .fi,.db-filter-group .fsel{min-width:140px}
.stats-grid.eight{grid-template-columns:repeat(4,1fr)}
.stat-card .trend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px}
.stat-card .trend.up{color:#059669;background:#d1fae5}
.stat-card .trend.down{color:#dc2626;background:#fee2e2}
.stat-card .trend.neutral{color:#6b7280;background:#f3f4f6}
.pbar{height:6px;border-radius:3px;background:#f0f4f8;overflow:hidden;margin-top:4px}
.pbar-fill{height:100%;border-radius:3px;transition:width .5s ease}
.recent-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f4f8}
.recent-item:last-child{border-bottom:none}
.recent-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.recent-icon.ri-takya{background:#dbeafe}.recent-icon.ri-proj{background:#d1fae5}
.recent-icon.ri-buy{background:#fef3c7}.recent-icon.ri-con{background:#fee2e2}
.recent-icon.ri-tawtheeq{background:#ede9fe}.recent-icon.ri-sandooq{background:#ccfbf1}
.recent-body{flex:1}.recent-body .rb-title{font-size:12px;color:#374151;font-weight:600}
.recent-body .rb-sub{font-size:11px;color:#9ca3af;margin-top:2px}
/* LOGIN SCREEN */
.login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#152663 0%,#0B1839 50%,#1B3387 100%);z-index:500;display:flex;align-items:center;justify-content:center}
.login-overlay.hidden{display:none}
.login-box{background:#fff;border-radius:20px;padding:40px;width:380px;box-shadow:0 30px 80px rgba(0,0,0,.3);text-align:center}
.login-box .logo{font-size:48px;margin-bottom:12px}
.login-box h2{font-size:20px;font-weight:800;color:#0B1839;margin-bottom:4px}
.login-box .lsub{font-size:12px;color:#9ca3af;margin-bottom:24px}
.login-box .fi{margin-bottom:12px;text-align:right}
.login-box .lbtn{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,#3658CC,#0B1839);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit;margin-top:8px}
.login-box .lbtn:hover{background:linear-gradient(135deg,#2643A8,#4a7a62)}
.login-box .lerr{color:#ef4444;font-size:12px;font-weight:600;min-height:18px;margin-top:6px}
/* ADMIN CARDS */
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.adm-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.06);border-right:4px solid}
.adm-card.ac1{border-right-color:#3658CC}.adm-card.ac2{border-right-color:#10b981}
.adm-card.ac3{border-right-color:#f59e0b}.adm-card.ac4{border-right-color:#8b5cf6}
.adm-card.ac5{border-right-color:#ef4444}.adm-card.ac6{border-right-color:#06b6d4}
.adm-card h4{font-size:13px;color:#6b7280;font-weight:600;margin-bottom:6px}
.adm-card .av{font-size:28px;font-weight:800;color:#1a202c}
.adm-card .asub{font-size:11px;color:#9ca3af;margin-top:4px}
/* USER CARD */
.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:20px}
.user-card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.06);position:relative;border-top:4px solid #3658CC}
.user-card.admin-card{border-top-color:#f59e0b}
.user-card.viewer-card{border-top-color:#10b981}
.user-card .uc-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff;margin-bottom:10px}
.user-card .uc-name{font-size:16px;font-weight:700;color:#0B1839}
.user-card .uc-email{font-size:12px;color:#6b7280;margin-top:2px}
.user-card .uc-role{margin-top:8px}
.user-card .uc-acts{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid #f0f4f8}
.user-card .uc-status{position:absolute;top:14px;left:14px}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.status-dot.online{background:#10b981}.status-dot.offline{background:#d1d5db}
/* === PERMISSIONS TABLE (Matrix Plus — Stage B) === */
.perm-table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--ff-ar)}
/* Sticky header (gradient) */
.perm-table thead th{
background:linear-gradient(135deg,#0B1839,#1E3A8A);color:#fff;
padding:10px 8px;text-align:center;font-size:11.5px;font-weight:700;
position:sticky;top:0;z-index:3;border-bottom:2px solid rgba(255,255,255,.1)
}
.perm-table thead th.perm-th-section{
text-align:right;padding:10px 14px;background:linear-gradient(135deg,#0B1839,#152663);min-width:160px
}
.perm-table thead th[data-role-color="admin"]{box-shadow:inset 0 -3px 0 var(--c-danger-500)}
.perm-table thead th[data-role-color="manager"]{box-shadow:inset 0 -3px 0 var(--c-primary-500)}
.perm-table thead th[data-role-color="editor"]{box-shadow:inset 0 -3px 0 var(--c-warning-500)}
.perm-table thead th[data-role-color="accountant"]{box-shadow:inset 0 -3px 0 var(--c-success-500)}
.perm-table thead th[data-role-color="viewer"]{box-shadow:inset 0 -3px 0 var(--c-n-400)}
.perm-th-inner{display:flex;flex-direction:column;align-items:center;gap:3px}
.perm-th-role{font-size:11px;font-weight:800;color:#fff;letter-spacing:-.01em}
.perm-th-pt{font-size:10px;font-weight:600;color:rgba(255,255,255,.78)}
.perm-bulk-col-check{
margin-top:4px;width:14px;height:14px;cursor:pointer;
accent-color:#fff;
filter:invert(1) hue-rotate(180deg);opacity:.9
}
.perm-bulk-col-check[disabled]{display:none}
/* Body rows */
.perm-table td{padding:8px 10px;border-bottom:1px solid var(--c-n-100);text-align:center;font-size:12.5px;background:#fff}
.perm-table tr:nth-child(even) td{background:#FAFBFD}
.perm-table tr:hover td{background:#F1F5F9}
.perm-table .perm-td-section{text-align:right;font-weight:700;color:var(--c-primary-900);padding:10px 14px;border-right:3px solid transparent}
.perm-table .perm-td-cell{position:relative}
.perm-table .perm-td-cell.is-on{background:rgba(16,185,129,.08) !important}
.perm-table .perm-td-cell[data-role-color="admin"].is-on{background:rgba(220,38,38,.06) !important}
.perm-table .perm-td-cell[data-role-color="manager"].is-on{background:rgba(54,88,204,.08) !important}
.perm-table .perm-td-cell[data-role-color="editor"].is-on{background:rgba(245,158,11,.10) !important}
.perm-table .perm-td-cell[data-role-color="accountant"].is-on{background:rgba(16,185,129,.10) !important}
.perm-table .perm-td-cell[data-role-color="viewer"].is-on{background:rgba(100,116,139,.08) !important}
.perm-section-label{
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
user-select:none;font-family:var(--ff-ar);font-weight:700;font-size:12.5px;color:var(--c-primary-900)
}
.perm-bulk-row-check{
width:16px;height:16px;cursor:pointer;accent-color:var(--c-primary-600);flex-shrink:0
}
.perm-check{
width:18px;height:18px;cursor:pointer;
accent-color:#10B981;
border-radius:4px;transition:transform .12s ease
}
.perm-check:not([disabled]):hover{transform:scale(1.15)}
.perm-check:disabled{accent-color:#DC2626;cursor:not-allowed;opacity:.7}
/* Toolbar above table */
.perm-toolbar{
display:flex;align-items:center;gap:14px;
padding:12px 16px;border-bottom:1px solid var(--c-n-100);
background:var(--c-n-50);flex-wrap:wrap
}
.perm-search{
flex:1;min-width:180px;height:36px;padding:0 14px;
background:#fff;border:1px solid var(--c-n-200);border-radius:9px;
font-size:13px;font-family:var(--ff-ar);color:var(--c-n-800);outline:none
}
.perm-search:focus{border-color:var(--c-primary-400);box-shadow:0 0 0 3px var(--c-primary-100)}
.perm-legend{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.perm-lg-item{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--c-n-700);font-family:var(--ff-ar)}
.perm-lg-dot{width:14px;height:14px;border-radius:4px;border:1px solid var(--c-n-200)}
.perm-lg-dot.perm-lg-on{background:#D1FAE5;border-color:#A7F3D0}
.perm-lg-dot.perm-lg-off{background:#fff}
.perm-lg-dot.perm-lg-admin{background:#FEE2E2;border-color:#FECACA}
/* Copy from role button */
.perm-copy-btn{
appearance:none;border:1px solid #B8C7FF;background:#fff;
color:var(--c-primary-700);height:36px;padding:0 14px;border-radius:9px;
font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--ff-ar);
display:inline-flex;align-items:center;gap:5px;transition:all .15s ease
}
.perm-copy-btn:hover{background:var(--c-primary-50);transform:translateY(-1px)}
/* Preview panel (Stage C) */
.perms-pv{
background:#fff;border:1px solid var(--c-n-200);border-radius:14px;
padding:18px 22px;margin-top:14px;
box-shadow:0 2px 8px rgba(11,24,57,.04);font-family:var(--ff-ar)
}
.perms-pv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.perms-pv-title{font-size:14px;font-weight:800;color:var(--c-primary-900)}
.perms-pv-sub{font-size:11.5px;font-weight:600;color:var(--c-n-500)}
.perms-pv-row{display:flex;gap:12px;margin-bottom:10px;align-items:flex-start;flex-wrap:wrap}
.perms-pv-row:last-child{margin-bottom:0}
.perms-pv-label{font-size:11.5px;font-weight:800;flex-shrink:0;padding-top:5px;min-width:130px}
.perms-pv-label-on{color:var(--c-success-700)}
.perms-pv-label-off{color:var(--c-danger-700)}
.perms-pv-chips{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.perms-pv-chip{
display:inline-flex;align-items:center;gap:5px;
padding:5px 10px;border-radius:7px;
font-size:11.5px;font-weight:700
}
.perms-pv-chip small{font-size:10px;opacity:.85}
.perms-pv-chip-on{background:var(--c-success-50);color:var(--c-success-700);border:1px solid #BBF7D0}
.perms-pv-chip-off{background:var(--c-danger-50);color:var(--c-danger-700);border:1px solid #FECACA}
.perms-pv-none{font-size:11px;color:var(--c-n-400);font-style:italic;padding:4px 0}
/* Copy modal options */
.perms-copy-list{display:flex;flex-direction:column;gap:8px}
.perms-copy-opt{
display:flex;align-items:center;justify-content:space-between;
background:var(--c-n-50);border:1px solid var(--c-n-200);border-radius:10px;
padding:12px 14px;cursor:pointer;font-family:var(--ff-ar);
transition:all .15s ease;text-align:right
}
.perms-copy-opt:hover{background:var(--c-primary-50);border-color:#B8C7FF;transform:translateY(-1px)}
.perms-copy-opt-lbl{font-size:13.5px;font-weight:800;color:var(--c-primary-900)}
.perms-copy-opt-arrow{font-size:18px;color:var(--c-primary-500);font-weight:700}
/* Role pills (mobile-friendly role filter, Stage D) */
.perm-role-pills{
display:flex;flex-wrap:wrap;gap:6px;width:100%;
padding-top:6px;border-top:1px dashed var(--c-n-200);margin-top:4px
}
.perm-role-pill{
appearance:none;border:1px solid var(--c-n-200);background:#fff;
color:var(--c-n-700);height:32px;padding:0 14px;border-radius:16px;
font-size:11.5px;font-weight:700;cursor:pointer;font-family:var(--ff-ar);
transition:all .15s ease
}
.perm-role-pill:hover{background:var(--c-primary-50);border-color:#B8C7FF;color:var(--c-primary-700)}
.perm-role-pill.is-active{
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
color:#fff;border-color:transparent;box-shadow:0 2px 6px rgba(54,88,204,.30)
}
/* Sticky save bar (appears on dirty changes — Stage D) */
.perms-sticky-bar{
position:fixed;left:0;right:0;bottom:0;
display:none;align-items:center;justify-content:space-between;gap:12px;
background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);
color:#fff;padding:14px 22px;z-index:90;
box-shadow:0 -8px 24px rgba(245,158,11,.30);
font-family:var(--ff-ar);
animation:permsBarIn .3s ease
}
.perms-sticky-bar.is-active{display:flex}
@keyframes permsBarIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
.perms-sticky-text{font-size:13.5px;font-weight:800}
.perms-sticky-actions{display:flex;gap:8px;flex-shrink:0}
.perms-sticky-discard,.perms-sticky-save{
appearance:none;border:0;cursor:pointer;
height:36px;padding:0 16px;border-radius:9px;
font-family:var(--ff-ar);font-size:12.5px;font-weight:800;
transition:all .15s ease
}
.perms-sticky-discard{background:rgba(255,255,255,.20);color:#fff;border:1px solid rgba(255,255,255,.30)}
.perms-sticky-discard:hover{background:rgba(255,255,255,.30)}
.perms-sticky-save{background:#fff;color:#9A3412}
.perms-sticky-save:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
@media(max-width:768px){
.perms-sticky-bar{padding:10px 14px;flex-wrap:wrap;gap:8px}
.perms-sticky-text{font-size:11.5px;flex:1 1 100%}
.perms-sticky-actions{flex:1 1 100%;justify-content:stretch}
.perms-sticky-discard,.perms-sticky-save{flex:1;height:34px;font-size:11.5px;padding:0 10px}
/* Add bottom padding to page so sticky bar doesn't overlap content */
body:has(.perms-sticky-bar.is-active) #page-permissions{padding-bottom:120px}
}
/* Dirty indicator on hero save button */
.permissions-hero .mh-btn-p.is-dirty{
background:linear-gradient(135deg,#F59E0B,#D97706);
color:#fff;animation:permsDirty 1.5s ease infinite
}
.permissions-hero .mh-btn-p.is-dirty .dirty-dot{
display:inline-block;width:8px;height:8px;border-radius:50%;
background:#fff;margin-right:6px;
box-shadow:0 0 0 3px rgba(255,255,255,.30);animation:permsDirtyDot 1s ease infinite
}
@keyframes permsDirty{0%,100%{box-shadow:0 4px 12px rgba(245,158,11,.30)}50%{box-shadow:0 4px 22px rgba(245,158,11,.55)}}
@keyframes permsDirtyDot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@media(max-width:768px){
.perms-pv{padding:14px 16px}
.perms-pv-label{min-width:100px;font-size:11px}
.perms-pv-chip{font-size:10.5px;padding:4px 8px}
.perm-toolbar{padding:10px 12px;gap:10px}
.perm-table thead th{padding:6px 4px;font-size:9.5px}
.perm-table thead th.perm-th-section{min-width:120px;font-size:11px;padding:6px 8px}
.perm-th-role{font-size:9.5px}
.perm-th-pt{font-size:9px}
.perm-table td{padding:5px 4px;font-size:11px}
.perm-table .perm-td-section{padding:6px 8px;font-size:11.5px}
.perm-check{width:14px;height:14px}
.perm-bulk-row-check{width:13px;height:13px}
.perm-bulk-col-check{width:11px;height:11px}
}
/* ACTIVITY LOG */
.act-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid #f0f4f8}
.act-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.act-icon.a-add{background:#d1fae5}.act-icon.a-edit{background:#dbeafe}.act-icon.a-del{background:#fee2e2}
.act-icon.a-login{background:#fef3c7}.act-icon.a-perm{background:#ede9fe}
.act-body{flex:1}
.act-body .act-msg{font-size:13px;color:#374151}
.act-body .act-time{font-size:11px;color:#9ca3af;margin-top:3px}
.act-body .act-user{font-weight:700;color:#0B1839}
/* AUTOCOMPLETE */
.fgrp{position:relative}
.ac-dropdown{position:absolute;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;max-height:200px;overflow-y:auto;z-index:1000;width:100%;box-shadow:0 4px 12px rgba(0,0,0,.1);top:100%;right:0;margin-top:2px}
.ac-item{padding:8px 12px;cursor:pointer;font-size:13px}
.ac-item:hover,.ac-item.selected{background:#F8FAFC;color:#2643A8}
/* SEARCHABLE SELECT */
.ss-wrap{position:relative}
.ss-wrap .ss-input{width:100%;box-sizing:border-box;padding:8px 32px 8px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat 8px center;transition:border-color .2s}
.ss-wrap .ss-input:focus{border-color:#3658CC;outline:none;box-shadow:0 0 0 3px rgba(54,88,204,.12)}
.ss-wrap .ss-dd{position:absolute;top:100%;right:0;left:0;margin-top:2px;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;max-height:220px;overflow-y:auto;z-index:1001;box-shadow:0 6px 20px rgba(0,0,0,.12);display:none}
.ss-wrap .ss-dd.open{display:block}
.ss-wrap .ss-dd .ss-opt{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f1f5f9;transition:background .15s}
.ss-wrap .ss-dd .ss-opt:last-child{border-bottom:none}
.ss-wrap .ss-dd .ss-opt:hover,.ss-wrap .ss-dd .ss-opt.active{background:#F8FAFC;color:#2643A8}
.ss-wrap .ss-dd .ss-opt.manual{color:#7c3aed;font-weight:600;border-top:2px solid #ede9fe}
.ss-wrap .ss-dd .ss-empty{padding:12px;text-align:center;color:#9ca3af;font-size:12px}
/* ITEM ANALYTICS PAGE */
.ia-filter{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 2px 10px rgba(0,0,0,.06);margin-bottom:20px}
.ia-filter-group{display:flex;flex-direction:column;gap:4px}
.ia-filter-group label{font-size:11px;font-weight:600;color:#6b7280}
.ia-filter-group .fi,.ia-filter-group .fsel{min-width:140px}
.summary-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.sum-card{background:#fff;border-radius:10px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);border-top:3px solid #3658CC;cursor:pointer;transition:all .2s}
.sum-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(54,88,204,.2);border-top-color:#2643A8}
.sum-card .sc-lbl{font-size:11px;color:#6b7280;font-weight:700}
.sum-card .sc-val{font-size:22px;font-weight:800;color:#0B1839;margin:6px 0 2px}
/* ITEM DETAIL MODAL */
.item-detail-header{display:flex;align-items:center;gap:14px;padding:18px;background:linear-gradient(135deg,#0B1839,#1B3387);border-radius:12px;color:#fff;margin-bottom:18px}
.item-detail-header .idh-icon{font-size:36px}
.item-detail-header h2{font-size:18px;font-weight:800}
.item-detail-header .idh-sub{font-size:12px;opacity:.7;margin-top:3px}
.idl-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.idl-kpi{background:#f8fafc;border-radius:10px;padding:14px;text-align:center;border-right:3px solid}
.idl-kpi.k1{border-right-color:#3b82f6}.idl-kpi.k2{border-right-color:#ef4444}.idl-kpi.k3{border-right-color:#10b981}
.idl-kpi.k4{border-right-color:#f59e0b}.idl-kpi.k5{border-right-color:#8b5cf6}.idl-kpi.k6{border-right-color:#06b6d4}.idl-kpi.k7{border-right-color:#f59e0b}.idl-kpi.k8{border-right-color:#8b5cf6}
.idl-kpi .kv{font-size:20px;font-weight:800;color:#1a202c}
.idl-kpi .kl{font-size:10px;color:#6b7280;font-weight:600;margin-top:3px}
.buy-hist-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px;background:#f8fafc;margin-bottom:6px}
.buy-hist-item .bhi-date{font-size:12px;color:#6b7280}
.buy-hist-item .bhi-qty{font-weight:700;color:#0B1839}
.buy-hist-item .bhi-price{font-weight:700;color:#059669}
.buy-hist-item .bhi-total{font-weight:700;color:#7c3aed}
/* FINANCIAL PAGE */
.kpi-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi-card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.06);border-top:4px solid}
.kpi-card.kpi-income{border-top-color:#10b981}
.kpi-card.kpi-expense{border-top-color:#ef4444}
.kpi-card.kpi-balance{border-top-color:#3658CC}
.kpi-card.kpi-ratio{border-top-color:#f59e0b}
.kpi-label{font-size:11px;color:#6b7280;font-weight:600}
.kpi-value{font-size:24px;font-weight:800;color:#1a202c;margin:8px 0 4px}
.kpi-unit{font-size:10px;color:#9ca3af}
/* ENHANCED ASNAF PAGE */
.cat-header{background:#F1F5F9;font-weight:700;color:#0B1839;padding:10px 13px;border-bottom:2px solid #e2e8f0}
.grid-toggle{display:flex;gap:6px;margin-bottom:16px}
.grid-toggle .btn{flex:0 0 auto}
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.item-card{background:#fff;border-radius:10px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);border-top:3px solid #3658CC;text-align:center}
.item-card .ic{font-size:32px;margin-bottom:6px}
.item-card .name{font-size:12px;font-weight:700;color:#0B1839;margin-bottom:4px;word-break:break-word;min-height:32px}
.item-card .cat{font-size:10px;color:#9ca3af;margin-bottom:2px}
.item-card .qty{font-size:16px;font-weight:800;color:#059669}
/* ACTIVITY LOG TABLE MODE */
.log-toggle{display:flex;gap:6px;margin-bottom:16px}
.log-toggle .btn{flex:0 0 auto}
.log-table{width:100%;border-collapse:collapse}
.log-table th{background:#f8fafc;padding:10px 13px;text-align:right;font-size:11px;font-weight:700;color:#64748b;border-bottom:2px solid #e2e8f0}
.log-table td{padding:10px 13px;font-size:12px;color:#374151;border-bottom:1px solid #f0f4f8}
.log-table tr:hover td{background:#f8fafc}
/* ===== LISTS MANAGEMENT (Professional Accordion) ===== */
.lists-grid{display:flex;flex-direction:column;gap:0}
.lists-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.lists-toolbar .lists-search{flex:1;min-width:180px;padding:9px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:13px;font-family:inherit;direction:rtl;outline:none;background:#fff;transition:all .2s}
.lists-toolbar .lists-search:focus{border-color:#3658CC;box-shadow:0 0 0 3px rgba(54,88,204,.1)}
.lists-toolbar .btn{border-radius:10px}
.lists-summary{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.lists-summary-card{background:#fff;border-radius:10px;padding:8px 14px;box-shadow:0 1px 4px rgba(0,0,0,.05);display:flex;align-items:center;gap:8px;font-size:12px;border:1px solid #f0f4f8}
.lists-summary-card .lsc-num{font-size:18px;font-weight:800;color:#2643A8}
.lists-summary-card .lsc-lbl{color:#6b7280;font-weight:600}
.list-accordion-item{background:#fff;border:1px solid #e8ecf0;border-bottom:none;transition:all .15s}
.list-accordion-item:first-child{border-radius:12px 12px 0 0}
.list-accordion-item:last-child{border-bottom:1px solid #e8ecf0;border-radius:0 0 12px 12px}
.list-accordion-item:only-child{border-radius:12px;border-bottom:1px solid #e8ecf0}
.list-accordion-item.lac-open{box-shadow:0 2px 8px rgba(0,0,0,.06);z-index:1;position:relative}
.list-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;cursor:pointer;transition:background .15s;user-select:none}
.list-accordion-header:hover{background:#f8fafc}
.lah-right{display:flex;align-items:center;gap:10px}
.lah-icon{font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#f0f4f8;border-radius:8px}
.lah-label{font-size:13px;font-weight:700;color:#0B1839}
.lah-count{font-size:10px;background:linear-gradient(135deg,#dde8d8,#e8efe6);color:#2643A8;padding:3px 10px;border-radius:12px;font-weight:700;min-width:28px;text-align:center}
.lah-left{display:flex;align-items:center;gap:2px}
.lah-btn{background:none;border:none;cursor:pointer;font-size:13px;padding:6px;border-radius:6px;transition:all .15s;opacity:0;color:#6b7280}
.list-accordion-header:hover .lah-btn{opacity:.6}
.lah-btn:hover{opacity:1!important;background:#f0f4f8}
.lah-btn-del:hover{background:#fee2e2!important;color:#ef4444}
.lah-arrow{font-size:11px;color:#9ca3af;margin-right:4px;transition:transform .3s ease;display:inline-block}
.lah-arrow.open{transform:rotate(-90deg)}
.list-accordion-body{max-height:0;overflow:hidden;transition:max-height .3s ease;border-top:0 solid transparent}
.list-accordion-body.lab-open{max-height:2000px;border-top:1px solid #f0f4f8;overflow:visible}
.lab-inner{padding:12px 18px 14px}
.lab-items{display:flex;flex-direction:column;gap:2px}
.list-item-row{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-radius:8px;background:#f8fafc;font-size:12px;transition:all .15s;border:1px solid transparent}
.list-item-row:hover{background:#F8FAFC;border-color:#dde8d8}
.list-item-row .li-num{font-size:10px;color:#9ca3af;font-weight:600;min-width:22px}
.list-item-row .li-text{font-weight:600;color:#0B1839;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-item-row .li-actions{display:flex;gap:1px;flex-shrink:0;opacity:0;transition:opacity .15s}
.list-item-row:hover .li-actions{opacity:1}
.list-item-row .li-edit,.list-item-row .li-del{background:none;border:none;cursor:pointer;font-size:12px;padding:4px 6px;border-radius:6px;transition:all .12s;color:#9ca3af}
.list-item-row .li-edit:hover{color:#3658CC;background:#dde8d8}
.list-item-row .li-del:hover{color:#ef4444;background:#fee2e2}
.list-add-row{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed #e2e8f0}
.list-add-row input{flex:1;padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:12px;font-family:inherit;direction:rtl;outline:none;transition:border-color .2s}
.list-add-row input:focus{border-color:#3658CC;box-shadow:0 0 0 3px rgba(54,88,204,.08)}
.list-add-row button{padding:8px 16px;border-radius:8px;border:none;background:linear-gradient(135deg,#3658CC,#2643A8);color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s;box-shadow:0 1px 3px rgba(90,138,171,.3)}
.list-add-row button:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(90,138,171,.35)}
.list-empty{text-align:center;padding:20px;color:#9ca3af;font-size:12px;background:#fafbfc;border-radius:8px;border:1px dashed #e2e8f0}
/* Mursala quick actions */
.mur-status-btn{cursor:pointer;transition:all .15s;position:relative}
.mur-status-btn:hover{opacity:.8;transform:scale(1.05)}
/* tawtheeq link hover */
a[href]:hover{opacity:.8}
/* ===== HAMBURGER MENU ===== */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border-radius:8px;background:transparent;border:none;z-index:200}
.hamburger span{display:block;width:22px;height:2px;background:#475569;border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;backdrop-filter:blur(2px)}
.sidebar-overlay.show{display:block}
/* ===== PWA: مؤشر حالة الاتصال ===== */
body.app-offline::before{
content:'📡 لا يوجد اتصال - الوضع المحلي';
display:block;position:fixed;top:0;left:0;right:0;z-index:99999;
background:#dc2626;color:#fff;text-align:center;padding:6px 12px;font-size:13px;font-weight:600
}
body.app-offline .main-content{padding-top:36px}
/* تحسين PWA: شاشة كاملة بدون شريط متصفح */
@media(display-mode:standalone){
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.sidebar{top:env(safe-area-inset-top)}
}
/* ===== RESPONSIVE: TABLET (max 1024px) ===== */
@media(max-width:1024px){
.sidebar{width:200px}
.main{margin-right:200px}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.charts-grid{grid-template-columns:1fr}
.admin-grid{grid-template-columns:repeat(2,1fr)}
.idl-kpis{grid-template-columns:repeat(3,1fr)}
.fg{grid-template-columns:1fr 1fr}
.db-filters{gap:8px}
}
/* ===== RESPONSIVE: MOBILE (max 768px) ===== */
@media(max-width:768px){
/* Global mobile: smooth scroll, tap highlight, no horizontal drift */
*{-webkit-tap-highlight-color:rgba(54,88,204,.15)}
/* Horizontal clipping on only — see note at line ~48. Setting
overflow-x:hidden on turns it into a scroll container and can
lock vertical scrolling. */
html{overflow-x:hidden;max-width:100vw;overscroll-behavior-x:none}
body{max-width:100vw;overscroll-behavior-x:none}
body{-webkit-text-size-adjust:100%;touch-action:pan-y}
.main,.content{max-width:100%;overflow-x:hidden}
/* الجداول تسمح بالتمرير داخل حاويتها لا من الجسم */
.tbl-card{overflow-x:auto}
table{max-width:100%}
/* إصلاح: إزالة العرض الثابت من حقول التاريخ والبحث */
.tbl-toolbar input[type="date"]{width:auto!important;min-width:0!important;flex:1}
.tbl-toolbar .srch{min-width:0!important}
.tbl-toolbar [style*="min-width"]{min-width:0!important}
.tbl-toolbar [style*="width:135"]{width:auto!important}
.tbl-toolbar [style*="width:140"]{width:auto!important}
[style*="min-width:160px"]{min-width:0!important}
[style*="min-width:200px"]{min-width:0!important}
[style*="min-width:300px"]{min-width:100%!important}
[style*="min-width:280px"]{min-width:100%!important}
/* إصلاح: شريط البحث بارتفاع مناسب للمس */
.srch{min-height:40px;font-size:13px}
/* Sidebar slides in/out */
.sidebar{right:-280px;width:260px;transition:right .3s ease;z-index:100;height:100vh;height:100dvh;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 60px)}
.sidebar.open{right:0}
.main{margin-right:0}
.hamburger{display:flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.nav-item{padding:14px 16px;font-size:18.5px;font-weight:700;min-height:50px}
.nav-sub{padding:12px 16px 12px 16px;padding-right:36px;min-height:44px;font-size:16px;font-weight:700}
/* === Topbar (mobile — modernized v2) === */
.topbar{padding:10px 12px;min-height:64px;gap:8px}
.topbar-right{gap:8px;flex:1;min-width:0;overflow:hidden}
.topbar-left{gap:6px}
/* Brand: shrink logo bubble + hide page sub-title (kept in JS) */
.tb-logo-bubble{width:36px;height:36px;font-size:18px;border-radius:10px}
.tb-brand-text{min-width:0}
.tb-brand-org{font-size:12px}
.tb-brand-page,.topbar h1.tb-brand-page{display:none}
/* Hide meta chips on mobile to save space */
.tb-meta{display:none}
/* Action cluster: compact */
.tb-action-cluster{height:42px;border-radius:12px}
.tb-action-cluster .tb-icon-btn,
.tb-action-cluster .notification-bell-wrap{width:42px;height:40px}
.tb-action-cluster .tb-icon{font-size:16px}
.tb-icon-badge{top:4px;left:4px;min-width:16px;height:16px;font-size:9px;padding:0 3px;border-width:1.5px}
/* Hide language pill on small mobile */
.tb-lang-pill{display:none}
/* User cluster: avatar-only */
#user-badge{gap:4px;flex-wrap:nowrap;flex-shrink:0}
.tb-user{padding:4px;border-radius:50%;height:42px;width:42px;justify-content:center}
.tb-user-text{display:none}
.tb-user-ava{width:32px;height:32px;font-size:13px}
/* Logout: icon-only */
.tb-logout{padding:0;width:42px;height:42px;justify-content:center;border-radius:12px}
.tb-logout-txt{display:none}
.tb-logout-ic{font-size:16px}
/* Content */
.content{padding:10px 8px}
/* Stats grid → 2 columns on mobile */
.stats-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.stat-card{padding:10px 12px;border-radius:10px}
.stat-card .val{font-size:16px}
.stat-card .lbl{font-size:10px}
.stat-card .sub{font-size:9px}
.stat-card .sc-icon{width:30px;height:30px;font-size:15px;margin-bottom:4px}
.stat-card .sc-bg{font-size:36px}
.sec-stats-bar{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.sec-stats-bar .stat-card .sc-value{font-size:16px}
.sec-stats-bar .stat-card .sc-label{font-size:10px}
.sec-stats-bar .stat-card .sc-sub{font-size:9px}
/* Charts → single column */
.charts-grid{grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.chart-card{padding:12px}
.chart-card canvas{max-height:180px}
.chart-card h3{font-size:12px;margin-bottom:10px}
/* Admin grid */
.admin-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.adm-card{padding:12px}
/* Tables: card layout on mobile */
.tbl-card{border-radius:8px;margin-bottom:12px}
.tbl-hdr{flex-direction:row;align-items:center;gap:8px;padding:10px 12px;flex-wrap:wrap}
.tbl-hdr h3{font-size:12px;flex:1;min-width:0}
.tbl-toolbar{padding:8px 10px;gap:6px;flex-direction:row;flex-wrap:wrap}
.tbl-toolbar .srch{flex:1 1 50%;min-width:0;order:1}
.tbl-toolbar .fsel{flex:1 1 auto;min-width:0;max-width:none;font-size:11px;padding:6px 8px;order:2}
.tbl-toolbar .btn{font-size:10px;padding:6px 10px;order:3}
.pgn{flex-direction:column;gap:6px;padding:8px 10px}
/* Tables: horizontal scroll, compact */
table{font-size:11px}
th{padding:6px 8px;font-size:10px}
td{padding:6px 8px;font-size:11px;white-space:nowrap}
/* Modal: full screen bottom sheet */
.mov{padding:0;align-items:flex-end}
.mdl{border-radius:16px 16px 0 0;max-width:100%!important;width:100%;padding:16px;max-height:92vh;overflow-y:auto}
.fg{grid-template-columns:1fr}
.fg2{grid-template-columns:1fr}
.fgrp.sp2,.fgrp.full{grid-column:1/-1}
.mftr{flex-direction:column-reverse;gap:8px}
.mftr .btn{width:100%;justify-content:center}
/* Subtabs: scroll horizontally */
.subtabs{overflow-x:auto;flex-wrap:nowrap;padding:4px;width:100%}
.stab{white-space:nowrap;padding:6px 10px;font-size:11px}
/* Dashboard filters */
.db-filters{flex-direction:column;gap:6px}
.db-filter-group{width:100%}
.db-filter-group .fi,.db-filter-group .fsel{min-width:0;width:100%}
/* Item analytics */
.ia-filter{flex-direction:column;gap:6px}
.ia-filter-group{width:100%}
.summary-cards{grid-template-columns:repeat(2,1fr);gap:8px}
/* Financial */
.fin-filters{flex-direction:column;gap:6px}
.idl-kpis{grid-template-columns:repeat(2,1fr);gap:8px}
.idl-kpi .kv{font-size:16px}
/* User cards */
.user-grid{grid-template-columns:1fr}
/* Permissions table: scroll */
.perm-table{font-size:10px}
.perm-table th,.perm-table td{padding:5px 6px}
/* Login box */
.login-box{width:94vw;padding:20px 16px}
.login-box h2{font-size:18px}
/* Item detail modal */
.item-detail-header{padding:12px}
.item-detail-header .idh-icon{font-size:24px}
.item-detail-header h2{font-size:14px}
.idl-kpis{grid-template-columns:repeat(2,1fr);gap:8px}
/* DB breakdown table: compact */
#db-breakdown-body tr td:nth-child(5),
#db-breakdown-body tr td:nth-child(6){display:none}
#db-breakdown-body tr th:nth-child(5),
#db-breakdown-body tr th:nth-child(6){display:none}
/* Buttons on mobile - touch-friendly */
.btn{padding:10px 14px;font-size:12px;min-height:40px;-webkit-tap-highlight-color:transparent}
.btn-sm{padding:6px 10px;font-size:11px;min-height:34px}
/* Forms - readable and touch-friendly */
.fi{font-size:14px;padding:10px 12px;min-height:42px}
.fsel{font-size:13px;padding:8px 10px;min-height:40px}
.fgrp label{font-size:12px;margin-bottom:2px}
/* KPI cards */
.kpi-cards{grid-template-columns:repeat(2,1fr)!important;gap:8px}
/* Quote page */
#page-quotes .tbl-hdr{flex-direction:column;gap:10px;align-items:stretch}
#page-quotes .tbl-hdr>div{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
#quote-form-card [style*="grid-template-columns"]{grid-template-columns:1fr!important}
/* الموبايل: نُبقي كل أعمدة المحرّر ظاهرة (بما فيها سعر الدولار والملاحظات) ليكون
تعديل العرض كاملاً من الجوال؛ الجدول داخل غلاف overflow-x:auto فيتمرّر أفقياً.
نُخفي فقط عمود الرقم (تسلسلي غير قابل للتعديل) لتوفير العرض. */
.quote-items-tbl{width:max-content!important;min-width:100%}
.quote-items-tbl .qi-col-num{display:none!important}
.quote-items-tbl th,.quote-items-tbl td{padding:4px 3px;font-size:11px}
.quote-items-tbl .qi-col-usd,.quote-items-tbl .qi-col-notes{min-width:90px}
.quote-items-tbl td:nth-child(2){min-width:80px}
.quote-items-tbl .fi{padding:5px 4px;font-size:11px;min-height:32px}
#quote-form-card [style*="min-width:280px"]{min-width:100%!important}
#quote-form-card [style*="display:flex;justify-content:flex-end"]{justify-content:stretch!important}
/* Settings grids */
#settings-grid{grid-template-columns:1fr!important}
#settings-grid [style*="grid-column:span 2"]{grid-column:span 1!important}
#settings-grid [style*="grid-template-columns:auto 1fr"]{grid-template-columns:1fr!important}
#settings-grid [style*="text-align:center"]{display:flex;flex-direction:column;align-items:center}
[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
/* Permissions page */
.uperm-modal{width:95vw!important;max-width:100%!important;max-height:90vh}
.uperm-cols-grid{grid-template-columns:1fr!important}
}
/* ===== RESPONSIVE: SMALL MOBILE (max 480px) ===== */
@media(max-width:480px){
.content{padding:8px 6px}
/* شريط الأدوات: مضغوط على الموبايل */
.tbl-toolbar{flex-direction:row!important;flex-wrap:wrap!important;gap:4px!important;padding:6px 8px!important;align-items:center}
.tbl-toolbar .srch{flex:1 1 45%!important;min-width:0!important;width:auto!important;padding:5px 8px;font-size:11px;height:30px}
.tbl-toolbar .fsel{flex:1 1 45%!important;min-width:0!important;width:auto!important;max-width:none;padding:5px 6px;font-size:10px;height:30px}
.tbl-toolbar input[type="date"]{flex:1 1 40%!important;width:auto!important;padding:5px 4px;font-size:10px;height:30px}
.tbl-toolbar .btn{font-size:9px;padding:4px 8px;height:28px}
.tbl-toolbar .export-wrap .btn{padding:4px 6px}
/* إصلاح: الإعدادات - حقول الصوت والإشعارات */
[style*="grid-template-columns:1fr 1fr auto"]{grid-template-columns:1fr!important}
.stats-grid{grid-template-columns:1fr 1fr;gap:6px}
.stat-card{padding:8px 10px}
.stat-card .val{font-size:14px}
.stat-card .lbl{font-size:9px}
.stat-card .sub{font-size:8px}
.stat-card .sc-icon{width:26px;height:26px;font-size:13px;margin-bottom:3px}
.sec-stats-bar .stat-card .sc-value{font-size:14px}
.sec-stats-bar .stat-card .sc-label{font-size:9px}
/* تحسين الجداول: عرض البطاقات على الموبايل الصغير */
.data-tbl thead{display:none}
.data-tbl tbody tr{display:block;padding:10px 12px;margin-bottom:8px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.data-tbl tbody tr td{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border:none;white-space:normal;font-size:12px}
.data-tbl tbody tr td::before{content:attr(data-label);font-weight:600;color:#6b7280;font-size:10px;flex-shrink:0;margin-left:8px}
/* عرض الأسعار: نُبقيه جدولاً حقيقياً (يتمرّر أفقياً) بدل التحوّل إلى كروت على الموبايل */
#page-quotes .data-tbl thead{display:table-header-group}
#page-quotes .data-tbl tbody tr{display:table-row;padding:0;margin:0;border:none;border-radius:0;background:transparent;box-shadow:none}
#page-quotes .data-tbl tbody tr td{display:table-cell;text-align:right;padding:7px 8px;border:none;border-bottom:1px solid #eef2f7;white-space:nowrap;font-size:11px}
#page-quotes .data-tbl tbody tr td::before{display:none}
.data-tbl tbody tr td:empty{display:none}
.data-tbl tbody tr td .row-actions{justify-content:flex-start}
.admin-grid{grid-template-columns:1fr 1fr;gap:6px}
.summary-cards{grid-template-columns:1fr 1fr;gap:6px}
.idl-kpis{grid-template-columns:1fr 1fr;gap:6px}
.charts-grid{grid-template-columns:1fr}
.fg{grid-template-columns:1fr}
.fg2{grid-template-columns:1fr}
.topbar{padding:8px 10px;min-height:60px;gap:6px}
.tb-brand-org{font-size:11px}
.tb-logo-bubble{width:34px;height:34px;font-size:16px;border-radius:9px}
.tb-action-cluster{height:38px;border-radius:11px}
.tb-action-cluster .tb-icon-btn,
.tb-action-cluster .notification-bell-wrap{width:38px;height:36px}
.tb-action-cluster .tb-icon{font-size:15px}
.tb-user{height:38px;width:38px}
.tb-user-ava{width:28px;height:28px;font-size:12px}
.tb-logout{height:38px;width:38px}
.tb-logout-ic{font-size:14px}
.tbl-hdr{padding:8px 10px}
.tbl-hdr h3{font-size:12px}
.btn{padding:5px 10px;font-size:10px}
.chart-card h3{font-size:11px}
.chart-card canvas{max-height:150px}
.quote-items-tbl .fi{padding:5px;font-size:11px}
.mdl{padding:12px}
table{font-size:10px}
th{padding:5px 6px;font-size:9px}
td{padding:5px 6px;font-size:10px}
.data-tbl tbody tr td{font-size:11px}
.data-tbl tbody tr td::before{font-size:9px}
.data-tbl tbody tr{padding:8px 10px}
}
/* ===== EXPORT DROPDOWN ===== */
.export-wrap{position:relative;display:inline-block}
.export-wrap .btn{min-width:0}
.export-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.12);border:1px solid #e2e8f0;z-index:999;min-width:140px;overflow:visible;margin-top:4px}
.export-menu.show{display:block}
.export-menu button{display:flex;align-items:center;gap:6px;width:100%;padding:8px 14px;border:none;background:none;cursor:pointer;font-size:12px;font-family:inherit;color:#374151;text-align:right;direction:rtl;transition:background .15s}
.export-menu button:hover{background:#f0f4f8}
.export-menu button:not(:last-child){border-bottom:1px solid #f0f4f8}
/* ===== QUOTE ITEMS TABLE ===== */
.quote-items-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.quote-items-tbl thead{background:#0B1839;color:#fff}
.quote-items-tbl th{padding:10px 8px;font-weight:700;font-size:13px;text-align:center}
.quote-items-tbl th:nth-child(1){width:40px}
.quote-items-tbl th:nth-child(2){width:auto}
.quote-items-tbl th:nth-child(3){width:80px}
.quote-items-tbl th:nth-child(4){width:100px}
.quote-items-tbl th:nth-child(5){width:110px}
.quote-items-tbl th:nth-child(6){width:100px}
.quote-items-tbl th:nth-child(7){width:auto}
.quote-items-tbl th:nth-child(8){width:45px}
.quote-items-tbl td{padding:6px 4px;border-bottom:1px solid #e2e8f0;vertical-align:top}
.quote-items-tbl td:nth-child(2){word-wrap:break-word;overflow-wrap:break-word;white-space:normal}
.quote-items-tbl .fi{border:1px solid #e2e8f0;border-radius:6px;padding:8px;font-size:13px;width:100%;box-sizing:border-box}
.quote-items-tbl td:nth-child(2) .fi{min-height:36px}
/* Financial Monitor */
.fm-tab .tbl-card{border-radius:12px}
.subtabs{display:flex;gap:8px;flex-wrap:wrap}
.stab{padding:8px 18px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s}
.stab:hover{background:#f1f5f9}
.stab.active{background:#3658CC;color:#fff;border-color:#3658CC}
@media(max-width:768px){.subtabs{flex-direction:column}.stab{text-align:center}#page-fin-monitor .stats-grid{grid-template-columns:1fr 1fr}#fm-tab-trends > div[style*="grid"]{grid-template-columns:1fr !important}}
/* ===== LTR MODE (Turkish) ===== */
[dir="ltr"] .sidebar{right:auto;left:0;box-shadow:3px 0 15px rgba(0,0,0,.2)}
[dir="ltr"] .main{margin-right:0;margin-left:230px}
[dir="ltr"] .nav-item{border-right:none;border-left:3px solid transparent}
[dir="ltr"] .nav-item:hover,[dir="ltr"] .nav-item.active{border-right:none;border-left-color:#06B0AA}
[dir="ltr"] .nav-sub{border-right:none;border-left:3px solid transparent;padding-right:16px;padding-left:36px}
[dir="ltr"] .nav-sub:hover,[dir="ltr"] .nav-sub.active{border-right:none;border-left-color:#06B0AA}
[dir="ltr"] .nav-submenu{border-right:none;border-left:3px solid rgba(6,176,170,.3)}
[dir="ltr"] .nav-arrow{margin-right:0;margin-left:auto}
[dir="ltr"] th{text-align:left}
[dir="ltr"] td{text-align:left}
[dir="ltr"] .col-filter-dd{right:auto;left:0}
[dir="ltr"] .srch,[dir="ltr"] .fi,[dir="ltr"] .fsel{direction:ltr;text-align:left}
[dir="ltr"] .topbar-brand{direction:ltr}
[dir="ltr"] .stat-card .sc-bg{left:auto;right:-10px}
[dir="ltr"] #lang-toggle-btn{font-family:'Cairo','Segoe UI',Tahoma,sans-serif}
@media(max-width:1024px){[dir="ltr"] .sidebar{width:200px}[dir="ltr"] .main{margin-left:200px;margin-right:0}}
@media(max-width:768px){[dir="ltr"] .sidebar{left:-280px;right:auto}[dir="ltr"] .sidebar.open{left:0;right:auto}[dir="ltr"] .main{margin-left:0}}
/* ===== NOTIFICATION PANEL ===== */
.notification-panel{position:absolute;top:100%;left:0;width:360px;max-height:480px;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.15);z-index:200;overflow:hidden;border:1px solid #e2e8f0}
.notif-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.notif-panel-list{max-height:380px;overflow-y:auto}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .15s;position:relative}
.notif-item:hover{background:#f8fafc}
.notif-item.unread{background:#F8FAFC;border-right:3px solid #3658CC}
.notif-icon{font-size:18px;flex-shrink:0;margin-top:2px}
.notif-content{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.4}
.notif-body{font-size:12px;color:#6b7280;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-time{font-size:11px;color:#9ca3af;margin-top:4px}
.notif-delete{position:absolute;top:8px;left:8px;background:none;border:none;font-size:12px;color:#9ca3af;cursor:pointer;padding:2px 4px;border-radius:4px;opacity:0;transition:opacity .15s}
.notif-item:hover .notif-delete{opacity:1}
.notif-delete:hover{color:#ef4444;background:#fef2f2}
@media(max-width:768px){.notification-panel{position:fixed;top:60px;left:8px;right:8px;width:auto;max-width:none;max-height:70vh;z-index:999}}
/* ===== MODERN CHAT SYSTEM ===== */
/* Chat container - fills page area */
.chat-container{display:flex;height:calc(100vh - 80px);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.08);margin:0}
/* --- Left sidebar: conversation list --- */
.chat-sidebar{width:320px;min-width:320px;border-left:1px solid #e2e8f0;display:flex;flex-direction:column;background:#fff;flex-shrink:0}
.chat-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e2e8f0;background:#f8faf9}
.chat-sidebar-title{font-size:16px;font-weight:700;color:#0B1839;margin:0}
.chat-new-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background .15s}
.chat-new-btn:hover{background:#e8f5e9}
.chat-search-box{padding:8px 12px;border-bottom:1px solid #f1f5f9}
.chat-search-input{width:100%;border:1px solid #e2e8f0;border-radius:20px;padding:8px 14px;font-size:13px;background:#F1F5F9;transition:border-color .2s}
.chat-search-input:focus{border-color:#0B1839;outline:none;background:#fff}
.chat-conv-list{flex:1;overflow-y:auto;overflow-x:hidden}
.chat-conv-loading{text-align:center;padding:30px;color:#6b7280;font-size:13px}
/* Conversation item */
.chat-conv-item{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;transition:background .15s;position:relative;border-bottom:1px solid #F1F5F9}
.chat-conv-item:hover{background:#f5f8f6}
.chat-conv-item.active{background:#e8f5e9;border-right:3px solid #0B1839}
.chat-conv-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#0B1839,#152663);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0;position:relative}
.chat-conv-avatar .online-dot{position:absolute;bottom:1px;left:1px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.chat-conv-info{flex:1;min-width:0}
.chat-conv-name{font-size:13px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-conv-preview{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.chat-conv-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex-shrink:0}
.chat-conv-time{font-size:10px;color:#9ca3af;white-space:nowrap}
.chat-conv-unread{background:#ef4444;color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-conv-empty{text-align:center;padding:40px 20px;color:#9ca3af;font-size:13px}
/* --- Right panel: active chat --- */
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;background:#F1F5F9;position:relative}
/* Empty state */
.chat-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}
.chat-empty-icon{font-size:64px;margin-bottom:16px;opacity:.6}
.chat-empty-text{font-size:18px;font-weight:700;color:#0B1839;margin-bottom:6px}
.chat-empty-sub{font-size:13px;color:#9ca3af}
/* Chat header */
.chat-header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;border-bottom:1px solid #e2e8f0;min-height:56px}
.chat-back-btn{display:none;background:none;border:none;font-size:20px;cursor:pointer;padding:4px 8px;color:#0B1839}
.chat-header-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0B1839,#152663);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-size:14px;font-weight:700;color:#1e293b}
.chat-header-status{font-size:11px;color:#22c55e;font-weight:600}
.chat-header-status.offline{color:#9ca3af}
.chat-header-actions{display:flex;gap:4px}
.chat-header-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:6px 8px;border-radius:8px;transition:background .15s;color:#6b7280}
.chat-header-btn:hover{background:#f1f5f9}
/* Inline search in chat */
.chat-inline-search{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fff;border-bottom:1px solid #e2e8f0}
.chat-inline-search .fi{flex:1}
/* Messages area */
.chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column}
.chat-messages-inner{display:flex;flex-direction:column;gap:4px;min-height:100%;justify-content:flex-end}
/* Date separator */
.chat-date-sep{text-align:center;margin:12px 0;position:relative}
.chat-date-sep span{background:#e2e8f0;color:#6b7280;font-size:11px;padding:3px 14px;border-radius:10px;display:inline-block}
/* Message bubble */
.chat-bubble{max-width:75%;padding:8px 12px;border-radius:12px;position:relative;word-wrap:break-word;line-height:1.5;margin-bottom:2px}
.chat-bubble-sent{background:#dcf8c6;align-self:flex-start;border-bottom-right-radius:4px;margin-left:auto}
.chat-bubble-recv{background:#fff;align-self:flex-end;border-bottom-left-radius:4px;margin-right:auto;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.chat-bubble-name{font-size:11px;font-weight:700;color:#0B1839;margin-bottom:2px}
.chat-bubble-body{font-size:13px;color:#1e293b;white-space:pre-wrap}
.chat-bubble-footer{display:flex;align-items:center;gap:4px;margin-top:3px;justify-content:flex-end}
.chat-bubble-time{font-size:10px;color:#8696a0}
.chat-bubble-check{font-size:12px;color:#8696a0;letter-spacing:-1px}
.chat-bubble-check.delivered{color:#8696a0}
.chat-bubble-check.read{color:#53bdeb}
.chat-bubble-sent .chat-bubble-footer{flex-direction:row-reverse;justify-content:flex-start}
/* Reply quote inside bubble */
.chat-reply-quote{background:rgba(0,0,0,.06);border-right:3px solid #0B1839;padding:5px 10px;border-radius:6px;margin-bottom:6px;cursor:pointer;font-size:12px;max-height:52px;overflow:hidden}
.chat-reply-quote-name{font-weight:700;color:#0B1839;font-size:11px;margin-bottom:1px}
.chat-reply-quote-text{color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-bubble-sent .chat-reply-quote{border-right-color:#152663;border-left:none}
.chat-bubble-recv .chat-reply-quote{border-right-color:#3658CC;border-left:none}
/* Bubble chevron (WhatsApp-style menu trigger) */
.chat-bubble{position:relative}
.chat-bubble-chevron{position:absolute;top:2px;left:2px;width:22px;height:22px;border:none;background:rgba(255,255,255,.75);color:#1f2937;border-radius:50%;font-size:14px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.15);z-index:2}
.chat-bubble-sent .chat-bubble-chevron{left:auto;right:2px}
.chat-bubble:hover .chat-bubble-chevron{opacity:1}
.chat-bubble-chevron:hover{background:#fff}
.chat-bubble.longpress-active{transform:scale(.98);transition:transform .1s}
/* Action menu (desktop floating + mobile bottom sheet) */
.chat-bubble-menu{position:absolute;background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:160px;padding:6px 0;z-index:1500;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s;font-family:'Cairo','Segoe UI',Tahoma,sans-serif}
.chat-bubble-menu.open,.chat-bubble-menu{opacity:1;transform:translateY(0)}
.chat-bubble-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;border:none;background:none;font-size:14px;color:#1f2937;cursor:pointer;text-align:right;font-family:inherit}
.chat-bubble-menu-item:hover{background:#f3f4f6}
.chat-bubble-menu-item.danger{color:#dc2626}
.chat-bubble-menu-item.danger:hover{background:#fef2f2}
.chat-bubble-menu-icon{font-size:16px;width:22px;text-align:center}
/* Bottom sheet variant (mobile) */
.chat-bubble-menu.bottom-sheet{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:18px 18px 0 0;min-width:0;width:100%;padding:8px 0 calc(8px + env(safe-area-inset-bottom));transform:translateY(100%);opacity:1;transition:transform .22s ease-out;box-shadow:0 -8px 28px rgba(0,0,0,.22)}
.chat-bubble-menu.bottom-sheet.open{transform:translateY(0)}
.chat-bubble-menu.bottom-sheet::before{content:'';display:block;width:40px;height:4px;border-radius:3px;background:#d1d5db;margin:6px auto 10px}
.chat-bubble-menu.bottom-sheet .chat-bubble-menu-item{padding:14px 24px;font-size:15px}
.chat-bubble-menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1400;opacity:0;transition:opacity .2s}
.chat-bubble-menu-backdrop.open{opacity:1}
/* Attachments in bubble */
.chat-bubble-attachments{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.chat-att-img{max-width:220px;max-height:220px;border-radius:8px;cursor:pointer;object-fit:cover}
.chat-att-file{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.08);border-radius:8px;font-size:12px;color:#334155;text-decoration:none}
.chat-att-file:hover{background:rgba(255,255,255,.9)}
/* Reply bar */
.chat-reply-bar{display:flex;align-items:center;padding:8px 16px;background:#fff;border-top:1px solid #e2e8f0;gap:10px}
.chat-reply-content{flex:1;border-right:3px solid #0B1839;padding:4px 10px;background:#f0fdf4;border-radius:0 6px 6px 0;min-width:0}
.chat-reply-name{font-size:11px;font-weight:700;color:#0B1839}
.chat-reply-text{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-reply-close{background:none;border:none;font-size:16px;cursor:pointer;padding:4px 8px;color:#6b7280;border-radius:8px;transition:background .15s}
.chat-reply-close:hover{background:#fef2f2;color:#ef4444}
/* File preview bar */
.chat-file-preview{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px;background:#fff;border-top:1px solid #f1f5f9;align-items:center}
.chat-file-preview-item{position:relative;border:1px solid #e2e8f0;border-radius:8px;padding:4px;background:#f8fafc}
.chat-file-preview-item img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.chat-file-preview-remove{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
/* Input area */
.chat-input-area{background:#fff;padding:8px 12px;border-top:1px solid #e2e8f0}
.chat-input-row{display:flex;align-items:flex-end;gap:6px}
.chat-input-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:6px;border-radius:50%;transition:background .15s;color:#6b7280;flex-shrink:0}
.chat-input-btn:hover{background:#f1f5f9}
.chat-text-input{flex:1;border:1px solid #e2e8f0;border-radius:20px;padding:8px 14px;font-size:13px;resize:none;max-height:120px;min-height:38px;line-height:1.4;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;background:#F1F5F9;transition:border-color .2s}
.chat-text-input:focus{border-color:#0B1839;outline:none;background:#fff}
.chat-send-btn{background:#0B1839;color:#fff;border:none;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .12s;flex-shrink:0}
.chat-send-btn:hover{background:#4a7a62}
.chat-send-btn:active{transform:scale(.88)}
.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}
.chat-send-btn svg{transform:rotate(180deg);transition:transform .18s}
.chat-send-btn.sending svg{animation:sendFly .4s ease-out}
@keyframes sendFly{0%{transform:rotate(180deg) translateY(0)}60%{transform:rotate(180deg) translateY(-22px) scale(.8);opacity:.3}61%{transform:rotate(180deg) translateY(22px) scale(.8);opacity:0}100%{transform:rotate(180deg) translateY(0);opacity:1}}
/* Pending (optimistic) bubble */
.chat-bubble-pending{opacity:.75}
.chat-bubble-pending .chat-bubble-check.pending{animation:pulseDot 1.1s infinite ease-in-out}
@keyframes pulseDot{0%,100%{opacity:.4}50%{opacity:1}}
.chat-bubble-failed{border:1px dashed #ef4444;background:#fef2f2!important;cursor:pointer}
.chat-bubble-failed .chat-bubble-body{color:#7f1d1d}
/* Emoji picker */
.chat-emoji-picker{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px;margin-top:6px;max-height:200px;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
.chat-emoji-item{font-size:22px;padding:4px;border-radius:6px;cursor:pointer;text-align:center;transition:background .1s;border:none;background:none}
.chat-emoji-item:hover{background:#f1f5f9}
/* Typing indicator */
.chat-typing{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:12px;color:#6b7280}
.chat-typing-dots{display:flex;gap:3px}
.chat-typing-dots span{width:6px;height:6px;border-radius:50%;background:#9ca3af;animation:chatTypingBounce 1.4s infinite ease-in-out}
.chat-typing-dots span:nth-child(1){animation-delay:0s}
.chat-typing-dots span:nth-child(2){animation-delay:.2s}
.chat-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes chatTypingBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
/* Group read avatars under sent bubble */
.chat-group-readers{display:flex;gap:-4px;margin-top:4px;justify-content:flex-end;align-items:center}
.chat-reader-avatar{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#0B1839;color:#fff;font-size:9px;font-weight:700;margin-left:-4px;border:1.5px solid #dcf8c6}
.chat-reader-more{font-size:10px;color:#6b7280;margin-right:2px}
/* Voice recording */
.chat-mic-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:6px;border-radius:50%;transition:background .15s;color:#6b7280;flex-shrink:0}
.chat-mic-btn:hover{background:#f1f5f9}
.chat-mic-btn.recording{color:#ef4444;animation:micPulse 1s infinite}
@keyframes micPulse{0%,100%{opacity:1}50%{opacity:.4}}
.chat-voice-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fef2f2;border-radius:12px;margin-top:6px}
.chat-voice-cancel{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background .15s}
.chat-voice-cancel:hover{background:#fee2e2}
.chat-voice-indicator{display:flex;align-items:center;gap:6px}
.chat-voice-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:micPulse 1s infinite}
.chat-voice-timer{font-size:14px;font-weight:700;color:#ef4444;font-variant-numeric:tabular-nums;min-width:36px}
.chat-voice-wave{flex:1;display:flex;align-items:center;gap:2px;height:28px;overflow:hidden}
.chat-voice-wave-bar{width:3px;border-radius:2px;background:#ef4444;transition:height .1s;opacity:.6}
.chat-voice-send{background:#0B1839;color:#fff;border:none;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;flex-shrink:0}
.chat-voice-send:hover{background:#4a7a62}
.chat-voice-send svg{transform:rotate(180deg)}
/* Audio player in bubble */
.chat-audio-player{display:flex;align-items:center;gap:8px;padding:6px 4px;min-width:200px}
.chat-audio-play-btn{background:none;border:none;font-size:22px;cursor:pointer;padding:2px;flex-shrink:0;line-height:1}
.chat-audio-wave{flex:1;height:28px;position:relative;cursor:pointer}
.chat-audio-wave canvas{width:100%;height:100%;display:block}
.chat-audio-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center}
.chat-audio-progress-bar{height:100%;background:rgba(11,24,57,.2);border-radius:4px;transition:width .1s}
.chat-audio-time{font-size:11px;color:#8696a0;min-width:32px;text-align:center;flex-shrink:0}
/* Group chat avatar badge */
.chat-conv-avatar-group{position:relative}
.group-icon-badge{position:absolute;bottom:-2px;left:-2px;font-size:10px;background:#fff;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.15);line-height:1}
.chat-header-avatar-group{background:linear-gradient(135deg,#3658CC,#06B0AA)!important;font-size:16px!important}
/* Forward label */
.chat-forward-label{font-size:11px;color:#6b7280;font-style:italic;margin-bottom:3px}
/* ===== CHAT MOBILE RESPONSIVE ===== */
@media(max-width:768px){
/* Use dvh (dynamic viewport height) to handle iOS keyboard + browser chrome */
.chat-container{height:calc(100vh - 60px);height:calc(100dvh - 60px);border-radius:0;margin:0}
.chat-sidebar{width:100%;min-width:100%}
.chat-main{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;display:none}
.chat-container.chat-open .chat-sidebar{display:none}
.chat-container.chat-open .chat-main{display:flex}
.chat-back-btn{display:block!important}
.chat-bubble{max-width:85%;font-size:14px}
.chat-bubble-body{font-size:14px}
.chat-emoji-picker{grid-template-columns:repeat(7,1fr)}
/* Safe area (notched phones) + prevent iOS auto-zoom on focus (>=16px) */
.chat-input-area{padding:8px 10px calc(8px + env(safe-area-inset-bottom));position:sticky;bottom:0;background:#fff;z-index:5}
.chat-text-input{font-size:16px!important;min-height:42px;padding:10px 14px}
.chat-send-btn,.chat-mic-btn,.chat-input-btn{width:42px;height:42px;min-width:42px}
.chat-send-btn{font-size:18px}
.chat-header{min-height:52px;padding:8px 12px;position:sticky;top:0;background:#fff;z-index:4}
.chat-messages{padding:10px 10px 4px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Keep action buttons visible on touch (hover doesn't work) */
.chat-bubble-actions{opacity:1;position:static;justify-content:flex-end;margin-top:4px}
.chat-bubble-action-btn{width:30px;height:30px;font-size:14px}
.chat-reply-bar{padding:8px 12px}
.chat-file-preview{padding:8px 12px}
/* Hide the mobile 'back-to-conversations' inside modern header */
.chat-sidebar-header{padding:12px 14px}
.chat-conv-item{padding:12px 12px}
}
/* Prevent body scroll when chat open (iOS bounce) */
@media(max-width:768px){
body:has(.chat-container.chat-open){overflow:hidden}
}
/* Quote tabs */
.quote-tab{flex:1;padding:12px 16px;border:none;background:#f8fafc;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;color:#6b7280;font-family:'Cairo','Segoe UI',Tahoma,sans-serif}
.quote-tab:hover{background:#f1f5f9}
.quote-tab.active{background:#0B1839;color:#fff}
.quote-tab:not(:last-child){border-left:1px solid #e2e8f0}
/* ===== FUND DOTS ===== */
.fund-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
/* ===== MESSAGE MODAL ===== */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:300;display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden}
/* ===== MOBILE BOTTOM NAV BAR — Option 4 (Dark minimal with outline icons) ===== */
.mobile-bottom-bar{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:#0f172a;border-top:1px solid #1e293b;box-shadow:0 -10px 32px rgba(15,23,42,.25);z-index:200;padding:8px 6px env(safe-area-inset-bottom);border-radius:22px 22px 0 0}
.mbb-btn{background:none;border:none;padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#64748b;cursor:pointer;font-family:inherit;position:relative;border-radius:12px;min-height:64px;transition:color .25s ease;-webkit-tap-highlight-color:transparent}
.mbb-btn:active{background:rgba(255,255,255,.04)}
.mbb-btn.active{color:#fff}
.mbb-btn.active::before{content:'';position:absolute;top:0;left:30%;right:30%;height:3px;background:#10b981;border-radius:0 0 3px 3px}
.mbb-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:54px;height:32px;border-radius:18px;transition:background .25s ease,color .25s ease}
.mbb-btn.active .mbb-ic{background:#334155;color:#fff}
.mbb-svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.mbb-lb{font-size:11px;font-weight:700;letter-spacing:.3px;transition:font-weight .2s ease}
.mbb-btn.active .mbb-lb{font-weight:800}
.mbb-badge{position:absolute;top:-3px;left:6px;min-width:18px;height:18px;padding:0 5px;background:linear-gradient(135deg,#f87171,#dc2626);color:#fff;border-radius:9px;font-size:10px;font-weight:800;line-height:18px;text-align:center;border:2px solid #0f172a;box-shadow:0 2px 6px rgba(220,38,38,.4)}
@media(max-width:768px){
body.has-mbb{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
/* الدردشة على الموبايل: تقليص الحاوية لترك مساحة الشريط. حقل الإدخال
يبقى sticky؛ نمنحه padding مريح وفاصلاً ناعماً، ومسافة سفلية كبيرة
للرسائل حتى تبقى آخر فقاعة مرئية بوضوح. */
body.has-mbb .chat-container{height:calc(100vh - 60px - 86px - env(safe-area-inset-bottom));height:calc(100dvh - 60px - 86px - env(safe-area-inset-bottom))}
/* رفع الحقل قليلاً عن الشريط (margin-bottom) + حافة علوية مقوّسة لفصل بصري أنظف */
body.has-mbb .chat-input-area{padding:14px 14px;border-top:1px solid #eef2f6;box-shadow:0 -4px 16px rgba(15,23,42,.07);margin-bottom:8px;border-radius:14px 14px 0 0}
body.has-mbb .chat-messages{padding-bottom:8px}
/* مسافة كبيرة أسفل آخر فقاعة حتى تكون مقروءة تماماً فوق صندوق الكتابة */
body.has-mbb .chat-messages-inner{padding-bottom:50px}
/* عند فتح أي modal: إخفاء الشريط حتى تبقى أزرار الـ modal (حفظ/إلغاء) قابلة للنقر */
body:has(.mov.open) .mobile-bottom-bar{display:none}
body:has(.mov.open).has-mbb{padding-bottom:0}
body:has(.mov.open).has-mbb .chat-container{height:calc(100vh - 60px);height:calc(100dvh - 60px)}
}
@media(min-width:769px){.mobile-bottom-bar{display:none !important}}
/* ================================================================
EMDATRA · Design System v2 (Figma-aligned)
تطبيق نظام التصميم الكامل من Figma فوق الـ legacy CSS
================================================================ */
/* === Typography upgrade === */
body{font-family:var(--ff-ar);color:var(--c-n-900);font-feature-settings:"ss01","cv11"}
h1,h2,h3,h4,h5,.tbl-hdr h3,.mdl h3,.chart-card h3{font-family:var(--ff-ar);letter-spacing:-.01em}
.amt,.amt-d,.amt-s,.val,.kpi-val,.sc-val{font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* === Sidebar v2 === */
.sidebar{width:260px;background:var(--grad-sidebar);box-shadow:-2px 0 12px rgba(11,24,57,.18)}
.main{margin-right:260px}
.sidebar-logo{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px;text-align:right}
.sidebar-logo .logo-icon{width:44px;height:44px;border-radius:11px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;box-shadow:0 4px 10px -2px rgba(54,88,204,.4);overflow:hidden}
.sidebar-logo .logo-icon span{font-size:24px !important;line-height:1;display:flex;align-items:center;justify-content:center;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.sidebar-logo h2{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0;text-align:right}
.sidebar-logo .sub{font-size:11px;opacity:.5;margin-top:2px;text-align:right;letter-spacing:.02em}
.nav-sec{padding:18px 22px 6px;font-size:13px;letter-spacing:.16em;opacity:.5;font-weight:700;font-family:var(--ff-ar)}
.nav-item{padding:12px 22px;font-size:17.5px;font-weight:700;color:rgba(255,255,255,.78);border-right:0;font-family:var(--ff-ar);position:relative;gap:12px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;border-right:0}
.nav-item.active{background:rgba(255,255,255,.10);color:#fff;font-weight:800;border-right:0}
.nav-item.active::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--c-accent-500);border-radius:2px 0 0 2px}
.nav-item .ic{font-size:17px;width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;text-align:center}
.nav-item.active .ic{background:var(--c-accent-500);color:var(--c-primary-900)}
.nav-sub{padding:10px 36px 10px 22px;font-size:15px;font-weight:700;font-family:var(--ff-ar)}
.nav-sub:hover,.nav-sub.active{background:rgba(255,255,255,.05);border-right:0}
.nav-submenu{background:rgba(0,0,0,.18);border-right:0;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
/* === Topbar v2 polish (uses base .topbar styles above) === */
.topbar{padding:12px 24px}
.tb-brand-org{font-family:var(--ff-en),var(--ff-ar)}
.tb-clock #topbar-clock{font-family:var(--ff-num)}
/* === Cards & Surfaces v2 === */
.content{padding:24px 28px}
.stats-grid{gap:16px;margin-bottom:20px}
.stat-card{background:#fff;border-radius:var(--r-xl);padding:20px 22px;box-shadow:var(--sh-md);border:1px solid var(--c-n-200);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.stat-card::before{width:36px;height:3px;border-radius:999px;top:18px;right:auto;left:22px}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--c-n-300)}
.stat-card .sc-icon{width:42px;height:42px;border-radius:11px;font-size:18px;margin-bottom:12px}
.stat-card .lbl{font-size:11px;color:var(--c-n-500);font-weight:600;letter-spacing:.04em;margin-bottom:6px;font-family:var(--ff-ar)}
.stat-card .val{font-size:26px;font-weight:700;color:var(--c-primary-900);line-height:1.1;margin-bottom:6px;font-family:var(--ff-num)}
.stat-card .sub{font-size:11px;color:var(--c-n-400)}
/* === Charts cards === */
.charts-grid{gap:18px;margin-bottom:22px}
.chart-card{background:#fff;border-radius:var(--r-xl);padding:22px;box-shadow:var(--sh-md);border:1px solid var(--c-n-200)}
.chart-card h3{font-size:15px;font-weight:700;color:var(--c-primary-900);margin-bottom:16px;font-family:var(--ff-ar);letter-spacing:-.01em}
/* === Table v2 (Excel-like polish) === */
.tbl-card{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-md);border:1px solid var(--c-n-200);overflow:hidden}
.tbl-hdr{padding:18px 22px;border-bottom:1px solid var(--c-n-100)}
.tbl-hdr h3{font-size:16px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);letter-spacing:-.01em}
.tbl-toolbar{padding:14px 18px;background:var(--c-n-50);border-bottom:1px solid var(--c-n-100);gap:8px}
.srch{padding:9px 14px;border:1px solid var(--c-n-200);border-radius:8px;font-size:13px;background:#fff;font-family:var(--ff-ar)}
.srch:focus{border-color:var(--c-primary-500);box-shadow:0 0 0 3px rgba(54,88,204,.12)}
.fsel{padding:9px 12px;border:1px solid var(--c-n-200);border-radius:8px;font-size:13px;font-family:var(--ff-ar)}
.fsel:focus{border-color:var(--c-primary-500)}
table{font-family:var(--ff-ar);border:none}
th{background:var(--c-n-50);padding:12px 14px;font-size:11px;font-weight:600;color:var(--c-n-700);border:none;border-bottom:1px solid var(--c-n-200);letter-spacing:.04em;text-transform:none}
th[data-col]:hover{background:var(--c-n-100);color:var(--c-primary-700)}
th[data-col].col-filtered{background:var(--c-primary-50);color:var(--c-primary-800)}
td{padding:12px 14px;font-size:13px;border:none;border-bottom:1px solid var(--c-n-100);background:#fff;font-family:var(--ff-ar)}
tbody tr:nth-child(even) td{background:var(--c-n-50)}
tbody tr:hover td{background:var(--c-primary-50)}
tbody tr.selected td,tbody tr[data-selected="true"] td{background:#dde5ff}
tfoot.totals-foot td{padding:14px;font-size:13px;border:none;border-top:2px solid var(--c-primary-700);background:var(--c-primary-900);color:#fff;font-weight:600;font-family:var(--ff-num)}
.amt{color:var(--c-success-700);font-weight:600;font-family:var(--ff-num)}
.amt-d{color:var(--c-primary-700);font-weight:600;font-family:var(--ff-num)}
.amt-s{color:var(--c-warning-700);font-weight:600;font-family:var(--ff-num)}
.pgn{padding:14px 22px;border-top:1px solid var(--c-n-100)}
.pgn-info{font-size:12px;color:var(--c-n-500)}
.pb{width:32px;height:32px;border-radius:8px;border:1px solid var(--c-n-200);font-family:var(--ff-en);font-size:12px;font-weight:600;color:var(--c-n-600);background:#fff;transition:all .15s ease}
.pb:hover{background:var(--c-n-50);color:var(--c-primary-700);border-color:var(--c-primary-300)}
.pb.active{background:var(--c-primary-500);color:#fff;border-color:var(--c-primary-500);box-shadow:var(--sh-glow)}
/* === Badges v2 === */
.bdg{padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.02em;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:4px}
.b-blue{background:var(--c-primary-50);color:var(--c-primary-700)}
.b-green{background:var(--c-success-50);color:var(--c-success-700)}
.b-orange{background:#FFEDD5;color:#9A3412}
.b-purple{background:#F5F3FF;color:#5B21B6}
.b-gray{background:var(--c-n-100);color:var(--c-n-700)}
.b-red{background:var(--c-danger-50);color:var(--c-danger-700)}
.b-teal{background:var(--c-accent-50);color:var(--c-accent-700)}
.b-yellow{background:var(--c-warning-50);color:var(--c-warning-700)}
/* === Buttons v2 === */
.btn{padding:9px 16px;border-radius:9px;font-size:13px;font-weight:600;font-family:var(--ff-ar);transition:all .15s ease;letter-spacing:-.005em;line-height:1.2;gap:6px}
.btn-p{background:var(--c-primary-500);box-shadow:var(--sh-glow)}
.btn-p:hover{background:var(--c-primary-600);box-shadow:0 6px 16px -2px rgba(54,88,204,.4);transform:translateY(-1px)}
.btn-g{background:var(--c-success-500)}
.btn-g:hover{background:var(--c-success-700)}
.btn-r{background:var(--c-danger-500)}
.btn-r:hover{background:var(--c-danger-700)}
.btn-o{background:var(--c-warning-500)}
.btn-o:hover{background:var(--c-warning-700)}
.btn-sm{padding:5px 10px;font-size:11.5px;border-radius:7px}
.btn-out{background:#fff;border:1px solid var(--c-n-200);color:var(--c-n-600)}
.btn-out:hover{background:var(--c-primary-50);border-color:var(--c-primary-300);color:var(--c-primary-700)}
/* === Tabs/Subtabs v2 === */
.subtabs{background:#fff;border-radius:var(--r-lg);padding:5px;box-shadow:var(--sh-sm);border:1px solid var(--c-n-200);gap:2px}
.stab{padding:9px 18px;border-radius:7px;font-size:13px;font-weight:600;color:var(--c-n-500);font-family:var(--ff-ar)}
.stab:hover{color:var(--c-primary-700);background:var(--c-n-50)}
.stab.active{background:var(--c-primary-500);color:#fff;box-shadow:var(--sh-glow)}
/* === Modal v2 === */
.mov{backdrop-filter:blur(8px);background:rgba(11,24,57,.5)}
.mdl{border-radius:var(--r-xl);padding:28px;box-shadow:var(--sh-xl);max-width:680px}
.mdl h3{font-size:18px;font-weight:700;color:var(--c-primary-900);margin-bottom:6px;font-family:var(--ff-ar);letter-spacing:-.01em}
.mdl .msub{font-size:12px;color:var(--c-n-500);margin-bottom:20px}
.fg,.fg2{gap:14px}
.fgrp label{font-size:11.5px;font-weight:600;color:var(--c-n-700);letter-spacing:.01em;font-family:var(--ff-ar)}
.fi{padding:10px 13px;border:1px solid var(--c-n-300);border-radius:9px;font-size:14px;font-family:var(--ff-ar);transition:border-color .15s,box-shadow .15s}
.fi:focus{border-color:var(--c-primary-500);box-shadow:0 0 0 3px rgba(54,88,204,.12);outline:none}
.fi.req-f{border-color:var(--c-danger-500);background:var(--c-danger-50)}
.sec-title{font-size:11px;font-weight:700;color:var(--c-n-600);letter-spacing:.06em;margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--c-n-100)}
.mftr{gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--c-n-100)}
/* === KPI Stats Bar (sec-stats-bar) v2 === */
.sec-stats-bar{display:flex;gap:12px;flex-wrap:wrap;background:transparent;padding:0}
.sec-stats-bar > *{background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-lg);padding:14px 18px;box-shadow:var(--sh-sm)}
/* === Login screen v2 === */
.login-overlay{background:linear-gradient(135deg,#0B1839 0%,#152663 50%,#1B3387 100%);position:fixed;inset:0;overflow:hidden}
.login-overlay::before,.login-overlay::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.login-overlay::before{width:600px;height:600px;background:radial-gradient(circle,rgba(6,176,170,.35),transparent 70%);top:-150px;right:-150px}
.login-overlay::after{width:500px;height:500px;background:radial-gradient(circle,rgba(92,123,224,.3),transparent 70%);bottom:-100px;left:-100px}
.login-box{background:#fff;border-radius:var(--r-2xl);padding:40px 36px;box-shadow:0 24px 60px -10px rgba(0,0,0,.3);position:relative;z-index:1;width:100%;max-width:420px}
.login-box .logo{font-size:42px;width:80px;height:80px;border-radius:20px;background:var(--grad-brand);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -6px rgba(54,88,204,.4);color:#fff;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.login-box h2{font-size:24px;font-weight:700;color:var(--c-primary-900);margin-bottom:6px;font-family:var(--ff-ar);letter-spacing:-.02em;text-align:center}
.login-box .lsub{font-size:13px;color:var(--c-n-500);text-align:center;margin-bottom:24px;letter-spacing:.04em}
.login-box .fgrp label{font-size:12px;font-weight:600;color:var(--c-n-700)}
.login-box .fi{padding:12px 14px;border-radius:11px;font-size:14px;background:var(--c-n-50);border:1px solid var(--c-n-200)}
.login-box .fi:focus{background:#fff;border-color:var(--c-primary-500);box-shadow:0 0 0 3px rgba(54,88,204,.12)}
.login-box .lbtn{padding:13px;background:linear-gradient(135deg,var(--c-primary-500),var(--c-primary-600));border-radius:11px;font-size:14px;font-weight:700;box-shadow:0 8px 20px -4px rgba(54,88,204,.4);font-family:var(--ff-ar);letter-spacing:.01em;transition:all .15s ease}
.login-box .lbtn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -4px rgba(54,88,204,.5)}
.login-box .lerr{font-size:12px;color:var(--c-danger-700);margin-top:10px;text-align:center;min-height:16px}
/* === Numeric tabular nums everywhere === */
.val,.amt,.amt-d,.amt-s,.bdg,.tb-date,#topbar-clock,td,th{font-feature-settings:"tnum","ss01"}
/* === Page title === */
#page-title{font-size:18px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);letter-spacing:-.015em}
/* === Inventory cards === */
.inv-grid{gap:14px}
.inv-item{border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-sm);border:1px solid var(--c-n-200);border-top:3px solid var(--c-primary-500);transition:all .2s ease}
.inv-item:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-top-color:var(--c-accent-500)}
/* === Form controls === */
input[type=checkbox],input[type=radio]{accent-color:var(--c-primary-500)}
/* === Scrollbar v2 === */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-n-300);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--c-n-400)}
/* ================================================================
v2 · Pattern Components (additive — never hides existing markup)
================================================================ */
/* === Dashboard Welcome Hero Banner === */
.dashboard-hero{position:relative;border-radius:var(--r-2xl);padding:28px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(120deg,#0B1839 0%,#1E3A8A 35%,#3658CC 65%,#06B0AA 100%);box-shadow:0 12px 30px -8px rgba(11,24,57,.35)}
.dh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dh-orb{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none}
.dh-orb-1{width:340px;height:340px;background:radial-gradient(circle,rgba(6,176,170,.45),transparent 70%);top:-120px;right:-80px;opacity:.5}
.dh-orb-2{width:520px;height:520px;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(120,160,255,.12) 35%,transparent 70%);top:-160px;left:-160px;opacity:.95;filter:blur(20px)}
.dh-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.dh-text h2{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;color:#fff;font-family:var(--ff-ar)}
.dh-text p{font-size:13px;color:rgba(184,199,255,.85);margin:0;font-family:var(--ff-ar)}
.dh-stats{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:12px 18px;border-radius:14px;backdrop-filter:blur(8px)}
.dh-stat{display:flex;flex-direction:column;gap:3px;min-width:0}
.dh-stat-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:rgba(184,199,255,.75);font-family:var(--ff-ar)}
.dh-stat-val{font-size:18px;font-weight:700;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.dh-stat-accent{color:var(--c-accent-200) !important}
.dh-stat-sep{width:1px;height:32px;background:rgba(255,255,255,.18);flex-shrink:0}
/* Hide trend % to match Figma's clean inline value style */
.dh-stat-trend{display:none}
.dh-stat-val{font-size:24px;font-weight:700;letter-spacing:-.01em}
/* Hero right-side actions cluster (LIVE pill + Quick Actions button) */
.dh-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.dh-live-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#EF4444;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;font-family:var(--ff-num);letter-spacing:.06em;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.dh-live-dot{width:7px;height:7px;border-radius:50%;background:#EF4444;animation:dh-pulse 1.6s ease-in-out infinite}
.dh-quick-btn{appearance:none;border:0;background:#fff;color:var(--c-primary-700);padding:10px 16px;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-ar);box-shadow:0 4px 14px rgba(15,23,57,.18);transition:all .15s ease}
.dh-quick-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,23,57,.22);color:var(--c-primary-800)}
.dh-qa-icon{font-size:14px}
.dh-qa-caret{font-size:11px;opacity:.7}
@media(max-width:900px){
.dh-actions{flex-direction:row;align-self:flex-start}
.dh-quick-btn{padding:8px 12px;font-size:12px}
}
/* === Merged filter bar items (section / search / reset moved into
.time-filter-wrap by design-v2.js) === */
.time-filter-wrap .tf-merged-item{display:flex;flex-direction:column;gap:3px;min-width:0;flex:0 1 auto}
.time-filter-wrap .tf-merged-item:has(input[type="text"]){flex:1 1 200px}
.time-filter-wrap .tf-merged-item label{font-size:10px;font-weight:700;color:var(--c-n-500);text-transform:uppercase;letter-spacing:.04em}
.time-filter-wrap .tf-merged-item .fi,
.time-filter-wrap .tf-merged-item .fsel{height:36px;padding:0 10px;border:1px solid var(--c-n-200);border-radius:8px;background:#fff;font-size:12.5px;color:var(--c-n-800);font-family:var(--ff-ar)}
.time-filter-wrap .tf-merged-item .fi:focus,
.time-filter-wrap .tf-merged-item .fsel:focus{outline:none;border-color:var(--c-primary-400);box-shadow:0 0 0 3px var(--c-primary-100)}
.time-filter-wrap .tf-merged-item .btn{height:36px;padding:0 14px;border-radius:8px;font-size:12px}
/* === Dashboard layout (Figma Option A v2) ===
The topbar stays white in normal flow (default styling). The hero sits
below it with a gradient. The filter card overlaps the hero bottom. */
body[data-page="dashboard"] #page-dashboard .dashboard-hero{margin:0;padding:32px 32px 64px;border-radius:0 0 var(--r-2xl) var(--r-2xl)}
body[data-page="dashboard"] .content{padding:0 0 24px}
/* Filter card overlaps the hero bottom — half inside, half outside */
body[data-page="dashboard"] #page-dashboard > .time-filter-wrap,
body[data-page="dashboard"] #page-dashboard .time-filter-wrap{
position:relative;z-index:3;
margin:-36px 24px 18px 24px;
padding:14px 18px;
border-radius:18px;
border:1px solid rgba(15,23,57,.06);
box-shadow:0 14px 30px -6px rgba(11,24,57,.20),0 4px 10px rgba(11,24,57,.06);
background:#fff
}
@media(max-width:900px){
body[data-page="dashboard"] #page-dashboard .dashboard-hero{padding:24px 18px 56px}
body[data-page="dashboard"] #page-dashboard .time-filter-wrap{margin:-28px 12px 14px 12px;padding:10px 12px}
}
/* === Sparkline mini-chart on stat cards === */
.spark{display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:10px;padding:0 1px}
.spark span{flex:1;background:currentColor;border-radius:2px;opacity:.5;min-width:3px;display:block;transition:opacity .2s}
.stat-card .spark{color:var(--c-primary-500)}
.stat-card.c1 .spark{color:var(--c-primary-500)}
.stat-card.c2 .spark{color:var(--c-success-500)}
.stat-card.c3 .spark{color:var(--c-warning-500)}
.stat-card.c4 .spark{color:#8B5CF6}
.stat-card.c5 .spark{color:var(--c-danger-500)}
.stat-card.c6 .spark{color:var(--c-accent-500)}
.stat-card:hover .spark span{opacity:1}
.sum-card .spark{color:var(--c-primary-500);height:18px;margin-top:8px}
.kpi-card .spark{color:var(--c-primary-500);height:20px;margin-top:8px}
/* === View Toggle (cards vs table) === */
.view-toggle{display:inline-flex;background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-lg);padding:4px;gap:2px;margin-bottom:14px;box-shadow:var(--sh-sm)}
.view-btn{appearance:none;background:transparent;border:0;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;color:var(--c-n-500);cursor:pointer;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}
.view-btn:hover{background:var(--c-n-50);color:var(--c-primary-700)}
.view-btn.active{background:var(--c-primary-500);color:#fff;box-shadow:var(--sh-glow)}
.view-btn span{font-size:14px;line-height:1}
/* === Employee cards grid === */
.ommal-cards-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:18px}
.ommal-cards-grid.active{display:grid}
.emp-card{background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-xl);padding:18px;box-shadow:var(--sh-sm);transition:all .2s ease;display:flex;flex-direction:column;gap:14px;cursor:pointer}
.emp-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--c-primary-200)}
.emp-top{display:flex;align-items:center;gap:12px}
.emp-avatar{width:48px;height:48px;border-radius:999px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0;font-family:var(--ff-en);position:relative}
.emp-avatar[data-color="indigo"]{background:linear-gradient(135deg,#3658CC,#1B3387)}
.emp-avatar[data-color="teal"]{background:linear-gradient(135deg,#06B0AA,#04827E)}
.emp-avatar[data-color="success"]{background:linear-gradient(135deg,#10B981,#047857)}
.emp-avatar[data-color="warning"]{background:linear-gradient(135deg,#F59E0B,#B45309)}
.emp-avatar[data-color="violet"]{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.emp-avatar[data-color="rose"]{background:linear-gradient(135deg,#EF4444,#B91C1C)}
.emp-status-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--c-success-500);border:2px solid #fff;bottom:0;left:0}
.emp-status-dot.inactive{background:var(--c-n-400)}
.emp-info{flex:1;min-width:0}
.emp-name{font-size:14px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-title{font-size:11.5px;color:var(--c-n-500);font-family:var(--ff-ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;border-top:1px solid var(--c-n-100)}
.emp-stat{display:flex;flex-direction:column;gap:3px}
.emp-stat-label{font-size:10px;color:var(--c-n-400);letter-spacing:.04em;font-family:var(--ff-ar)}
.emp-stat-val{font-size:12.5px;font-weight:600;color:var(--c-primary-900);font-family:var(--ff-ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--c-n-100);gap:8px}
.emp-foot-actions{display:flex;gap:8px}
.emp-foot-btn{appearance:none;background:var(--c-n-50);border:1px solid var(--c-n-200);width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--c-n-500);transition:all .15s ease}
.emp-foot-btn:hover{background:var(--c-primary-50);border-color:var(--c-primary-300);color:var(--c-primary-700)}
.emp-link{font-size:11.5px;color:var(--c-primary-600);font-weight:600;font-family:var(--ff-ar);text-decoration:none}
.emp-link:hover{color:var(--c-primary-700);text-decoration:underline}
/* When cards view is active, hide the table card on this page */
.page#page-ommal[data-view="cards"] #ommal-tbl-card{display:none}
.page#page-ommal[data-view="table"] #ommal-cards-grid{display:none !important}
/* Mobile employee cards */
@media(max-width:768px){
.ommal-cards-grid{grid-template-columns:1fr;gap:12px}
.emp-card{padding:14px;gap:12px}
.emp-avatar{width:40px;height:40px;font-size:14px}
.emp-name{font-size:13px}
.view-toggle{width:100%;justify-content:stretch}
.view-btn{flex:1;justify-content:center;padding:8px 12px}
}
/* ============================================================
Mursala (Sent Projects) — Hero + Filter + Views
Stage 1: hero header, unified filter overlap, view toggle
============================================================ */
.mursala-hero{
position:relative;border-radius:var(--r-2xl);
padding:28px 32px 64px;margin:0;overflow:hidden;color:#fff;
background:linear-gradient(120deg,#0B1839 0%,#1E3A8A 35%,#3658CC 65%,#06B0AA 100%);
box-shadow:0 12px 30px -8px rgba(11,24,57,.35)
}
.mursala-hero .mh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mursala-hero .mh-orb{
position:absolute;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(120,160,255,.12) 35%,transparent 70%);
top:-160px;left:-160px;filter:blur(20px);pointer-events:none
}
.mh-content{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:18px 24px;align-items:center}
.mh-text{grid-column:1/2;grid-row:1/2}
.mh-title{font-size:24px;font-weight:800;color:#fff;margin:0 0 6px 0;font-family:var(--ff-ar);letter-spacing:-.01em}
.mh-sub{font-size:13px;color:#fff;opacity:.85;margin:0;font-family:var(--ff-ar)}
.mh-actions{grid-column:2/3;grid-row:1/2;display:flex;gap:10px;align-items:center;justify-self:start}
.mh-btn{appearance:none;border:0;border-radius:12px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-ar);transition:all .15s ease}
.mh-btn span{font-size:14px;line-height:1}
.mh-btn-p{background:#fff;color:#0B1839;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.mh-btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.mh-btn-out{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.mh-btn-out:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.45)}
.mh-export-wrap{position:relative}
.mh-export-wrap .export-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--c-n-200);border-radius:10px;box-shadow:var(--sh-lg);min-width:160px;z-index:20;overflow:hidden}
.mh-export-wrap .export-menu.show{display:block}
.mh-export-wrap .export-menu button{display:block;width:100%;text-align:right;padding:10px 14px;font-size:12px;border:0;background:transparent;color:var(--c-n-700);cursor:pointer;font-family:var(--ff-ar);transition:background .15s}
.mh-export-wrap .export-menu button:hover{background:var(--c-n-50)}
.mh-stats{grid-column:1/3;grid-row:2/3;display:inline-flex;align-items:center;gap:0;justify-self:end;padding-top:6px}
.mh-stat{display:flex;flex-direction:column;gap:3px;padding:0 22px;min-width:0}
.mh-stat-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.mh-stat-val{font-size:22px;font-weight:700;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.mh-stat-success{color:#A7F3D0}
.mh-stat-warn{color:#FCD34D}
.mh-stat-sep{width:1px;height:36px;background:rgba(255,255,255,.18);flex-shrink:0}
/* Permissions hero — shares the same identity as mursala-hero */
.permissions-hero{
position:relative;border-radius:var(--r-2xl);
padding:28px 32px 64px;margin:0;overflow:hidden;color:#fff;
background:linear-gradient(120deg,#0B1839 0%,#1E3A8A 35%,#3658CC 65%,#06B0AA 100%);
box-shadow:0 12px 30px -8px rgba(11,24,57,.35)
}
.permissions-hero .mh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.permissions-hero .mh-orb{
position:absolute;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(120,160,255,.12) 35%,transparent 70%);
top:-160px;left:-160px;filter:blur(20px);pointer-events:none
}
@media(max-width:900px){
.permissions-hero{padding:20px 18px 48px;border-radius:var(--r-xl)}
}
/* View toggle for permissions page */
.perms-view-toggle{
display:inline-flex;background:#fff;border:1px solid var(--c-n-200);
border-radius:12px;padding:4px;gap:2px;
box-shadow:0 6px 18px rgba(11,24,57,.10);margin:-36px 16px 18px 16px;
position:relative;z-index:3;flex-wrap:wrap
}
.perms-view-toggle .view-btn{
appearance:none;background:transparent;border:0;padding:8px 16px;border-radius:9px;
font-size:12.5px;font-weight:600;color:var(--c-n-600);cursor:pointer;
font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px;
transition:all .15s ease;min-width:80px;justify-content:center
}
.perms-view-toggle .view-btn:hover{background:var(--c-n-50);color:var(--c-primary-700)}
.perms-view-toggle .view-btn.active{
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
color:#fff;box-shadow:0 2px 6px rgba(54,88,204,.25)
}
.perms-view-toggle .view-btn span{font-size:14px;line-height:1}
@media(max-width:768px){
.perms-view-toggle{width:calc(100% - 32px);margin:-30px 16px 14px}
.perms-view-toggle .view-btn{flex:1 1 calc(50% - 4px);min-width:0;padding:7px 8px;font-size:11.5px}
}
/* View visibility — only show blocks that match active view */
#page-permissions [data-perms-view]{display:none}
#page-permissions[data-perms-active="matrix"] [data-perms-view="matrix"]{display:block}
#page-permissions[data-perms-active="matrix"] #roles-summary[data-perms-view="matrix"]{display:grid}
#page-permissions[data-perms-active="fields"] [data-perms-view="fields"]{display:block}
#page-permissions[data-perms-active="users"] [data-perms-view="users"]{display:block}
#page-permissions[data-perms-active="restrictions"] [data-perms-view="restrictions"]{display:block}
/* Tawtheeq hero — shares the same identity as mursala-hero */
.tawtheeq-hero{
position:relative;border-radius:var(--r-2xl);
padding:28px 32px 64px;margin:0;overflow:hidden;color:#fff;
background:linear-gradient(120deg,#0B1839 0%,#1E3A8A 35%,#3658CC 65%,#06B0AA 100%);
box-shadow:0 12px 30px -8px rgba(11,24,57,.35)
}
.tawtheeq-hero .mh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tawtheeq-hero .mh-orb{
position:absolute;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(120,160,255,.12) 35%,transparent 70%);
top:-160px;left:-160px;filter:blur(20px);pointer-events:none
}
/* Filter overlap for tawtheeq (mirrors mursala) */
#page-tawtheeq > .time-filter-wrap,
#page-tawtheeq .time-filter-wrap[data-tf-target="tawtheeq"]{
position:relative;z-index:3;
margin:-36px 16px 18px 16px;
padding:14px 18px;
border-radius:18px;
border:1px solid rgba(15,23,57,.06);
box-shadow:0 14px 30px -6px rgba(11,24,57,.20),0 4px 10px rgba(11,24,57,.06);
background:#fff
}
@media(max-width:900px){
.tawtheeq-hero{padding:20px 18px 48px;border-radius:var(--r-xl)}
}
/* View toggle on tawtheeq — matches mursala identity */
#tawtheeq-view-toggle{display:inline-flex;background:#fff;border:1px solid var(--c-n-200);border-radius:12px;padding:4px;gap:2px;box-shadow:0 2px 6px rgba(11,24,57,.04);margin-bottom:14px}
#tawtheeq-view-toggle .view-btn{appearance:none;background:transparent;border:0;padding:8px 16px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--c-n-600);cursor:pointer;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;min-width:80px;justify-content:center}
#tawtheeq-view-toggle .view-btn:hover{background:var(--c-n-50);color:var(--c-primary-700)}
#tawtheeq-view-toggle .view-btn.active{background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));color:#fff;box-shadow:0 2px 6px rgba(54,88,204,.25)}
#tawtheeq-view-toggle .view-btn span{font-size:14px;line-height:1}
/* Unified filter overlap on hero (matches dashboard pattern) */
#page-mursala > .time-filter-wrap,
#page-mursala .time-filter-wrap[data-tf-target="mursala"]{
position:relative;z-index:3;
margin:-36px 16px 18px 16px;
padding:14px 18px;
border-radius:18px;
border:1px solid rgba(15,23,57,.06);
box-shadow:0 14px 30px -6px rgba(11,24,57,.20),0 4px 10px rgba(11,24,57,.06);
background:#fff
}
/* View toggle: 3 buttons styled like dashboard period pills */
#mursala-view-toggle{display:inline-flex;background:#fff;border:1px solid var(--c-n-200);border-radius:12px;padding:4px;gap:2px;box-shadow:0 2px 6px rgba(11,24,57,.04);margin-bottom:14px}
#mursala-view-toggle .view-btn{appearance:none;background:transparent;border:0;padding:8px 16px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--c-n-600);cursor:pointer;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;min-width:80px;justify-content:center}
#mursala-view-toggle .view-btn:hover{background:var(--c-n-50);color:var(--c-primary-700)}
#mursala-view-toggle .view-btn.active{background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));color:#fff;box-shadow:0 2px 6px rgba(54,88,204,.25)}
#mursala-view-toggle .view-btn span{font-size:14px;line-height:1}
/* Timeline view (Gantt) — Stage 3 */
.mursala-timeline{display:none;background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-md);margin-bottom:14px;font-family:var(--ff-ar);overflow:hidden}
.mursala-timeline.mt-frame{display:block}
.page#page-mursala[data-view="timeline"] .mursala-timeline{display:block}
/* Toolbar */
.mt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--c-n-100);flex-wrap:wrap}
.mt-month-nav{display:inline-flex;align-items:center;gap:8px}
.mt-nav-btn{appearance:none;background:#F8FAFC;border:1px solid var(--c-n-200);border-radius:8px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-n-700);font-size:12px;transition:all .15s}
.mt-nav-btn:hover{background:var(--c-n-100);color:var(--c-primary-700);border-color:var(--c-n-300)}
.mt-month-lbl{font-size:14px;font-weight:800;color:var(--c-primary-900);font-family:var(--ff-ar);padding:0 8px}
.mt-today-btn{appearance:none;background:#EFF6FF;border:1px solid #BFDBFE;color:var(--c-primary-700);border-radius:8px;padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--ff-ar);transition:all .15s;margin-right:8px}
.mt-today-btn:hover{background:#DBEAFE}
.mt-legend{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.mt-legend-t{font-size:11px;font-weight:700;color:var(--c-n-600)}
.mt-legend-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--c-n-700)}
.mt-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.mt-count{font-size:12px;font-weight:700;color:var(--c-n-600);background:var(--c-n-50);padding:5px 12px;border-radius:8px;font-family:var(--ff-num)}
/* Grid + day header */
.mt-grid{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mt-grid-track{position:relative;min-width:1100px}
.mt-day-header{display:flex;background:#F8FAFC;border-bottom:1px solid var(--c-n-100);padding-right:240px;position:sticky;top:0;z-index:2}
.mt-day-cell{flex:1 1 0;min-width:34px;padding:10px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;border-right:1px solid var(--c-n-100);font-family:var(--ff-ar)}
.mt-day-cell:first-child{border-right:0}
.mt-day-cell.is-weekend{background:rgba(15,23,57,.02)}
.mt-day-num{font-size:11px;font-weight:700;color:var(--c-n-700);font-family:var(--ff-num)}
.mt-day-name{font-size:9px;color:var(--c-n-400);font-family:var(--ff-ar)}
.mt-day-cell.is-today .mt-day-bubble{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));color:#fff;border-radius:6px;font-size:11px;font-weight:800;font-family:var(--ff-num);box-shadow:0 2px 6px rgba(54,88,204,.3)}
/* Rows */
.mt-rows{position:relative}
.mt-row{display:flex;min-height:52px;border-bottom:1px solid var(--c-n-50);position:relative}
.mt-row:nth-child(even){background:#FAFBFD}
.mt-row:hover{background:#F1F5F9}
.mt-row-info{
width:240px;flex-shrink:0;padding:8px 14px;display:flex;align-items:center;gap:8px;
border-right:1px solid var(--c-n-100);background:inherit;
position:absolute;right:0;top:0;bottom:0;z-index:3
}
.mt-row-dot{width:6px;height:34px;border-radius:3px;flex-shrink:0}
.mt-row-info-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mt-row-title{font-size:12px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-row-sub{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--c-n-500);font-family:var(--ff-ar);min-width:0}
.mt-row-sub > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.mt-row-amt{color:#10B981 !important;font-weight:800;font-family:var(--ff-num);font-variant-numeric:tabular-nums;flex-shrink:0;max-width:none !important}
/* Track + bars */
.mt-row-track{position:relative;flex:1;margin-right:240px;height:52px}
.mt-bar{
position:absolute;top:50%;transform:translateY(-50%);
height:30px;border-radius:7px;
display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 10px;
color:#fff;cursor:pointer;
box-shadow:0 2px 6px rgba(11,24,57,.15);
transition:all .15s ease;
overflow:hidden;
font-family:var(--ff-ar)
}
.mt-bar:hover{transform:translateY(-50%) scale(1.02);box-shadow:0 6px 16px rgba(11,24,57,.25);z-index:5}
.mt-bar.clip-l{border-top-right-radius:0;border-bottom-right-radius:0}
.mt-bar.clip-r{border-top-left-radius:0;border-bottom-left-radius:0}
.mt-bar-label{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.mt-bar-st{font-size:10px;font-weight:800;background:rgba(255,255,255,.22);padding:2px 7px;border-radius:4px;backdrop-filter:blur(4px)}
.mt-bar-amt{font-size:11px;font-weight:800;font-family:var(--ff-num);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.mt-bar-media{font-size:9px;font-weight:800;background:rgba(255,255,255,.22);padding:2px 6px;border-radius:4px;flex-shrink:0;font-family:var(--ff-num)}
/* Today vertical line */
.mt-today-line{
position:absolute;top:0;bottom:0;width:2px;
background:linear-gradient(180deg,rgba(54,88,204,.6),rgba(54,88,204,.25));
pointer-events:none;z-index:1
}
.mt-today-line::before{
content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
width:8px;height:8px;background:var(--c-primary-600);border-radius:50%;
box-shadow:0 0 0 3px rgba(54,88,204,.2)
}
/* Empty state */
.mt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;color:var(--c-n-400);text-align:center}
.mt-empty-ic{font-size:42px;opacity:.6;margin-bottom:10px}
.mt-empty-t{font-size:14px;font-weight:700;color:var(--c-n-600);margin-bottom:4px;font-family:var(--ff-ar)}
.mt-empty-s{font-size:12px;color:var(--c-n-400);font-family:var(--ff-ar)}
/* Mobile: bigger min-width forces horizontal scroll */
@media(max-width:900px){
.mt-toolbar{padding:12px 14px;gap:10px}
.mt-legend{display:none}
.mt-month-lbl{font-size:13px}
.mt-grid-track{min-width:900px}
.mt-row-info{width:160px;padding:6px 10px}
.mt-row-track{margin-right:160px}
.mt-day-header{padding-right:160px}
.mt-row-title{font-size:11px}
.mt-bar{height:26px}
.mt-bar-st{font-size:9px}
.mt-bar-amt{font-size:10px}
}
@media(max-width:480px){
.mt-row-info{width:130px;padding:5px 8px;gap:6px}
.mt-row-track{margin-right:130px}
.mt-day-header{padding-right:130px}
.mt-row-dot{width:4px;height:28px}
.mt-grid-track{min-width:780px}
}
/* Mobile responsive — Stage 1 */
@media(max-width:900px){
.mursala-hero{padding:20px 18px 48px;border-radius:var(--r-xl)}
.mh-content{grid-template-columns:1fr;gap:14px}
.mh-text{grid-column:1;grid-row:1}
.mh-title{font-size:18px}
.mh-sub{font-size:12px}
.mh-actions{grid-column:1;grid-row:3;justify-self:stretch;flex-wrap:wrap}
.mh-btn{flex:1;justify-content:center;padding:9px 12px;font-size:12px}
.mh-stats{grid-column:1;grid-row:2;justify-self:start;flex-wrap:wrap;gap:0;padding-top:0}
.mh-stat{padding:0 14px}
.mh-stat:first-child{padding-right:0}
.mh-stat-val{font-size:18px}
.mh-stat-label{font-size:10px}
.mh-stat-sep{height:28px}
#page-mursala > .time-filter-wrap,
#page-mursala .time-filter-wrap[data-tf-target="mursala"]{margin:-28px 12px 14px 12px;padding:10px 12px}
#mursala-view-toggle{width:100%}
#mursala-view-toggle .view-btn{flex:1;min-width:0;padding:8px 8px;font-size:11.5px}
}
/* ============================================================
Daily Log (السجل اليومي) — Stage 1
Hero + modern subtabs + comparison banner + filter overlap
============================================================ */
.daily-hero{
position:relative;border-radius:var(--r-2xl);
padding:24px 28px 56px;margin:0;overflow:hidden;color:#fff;
background:linear-gradient(120deg,#0B1839 0%,#601AA0 50%,#BE5BAA 100%);
box-shadow:0 12px 30px -8px rgba(11,24,57,.35)
}
.daily-hero .dly-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.daily-hero .dly-orb{
position:absolute;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(220,180,255,.14) 35%,transparent 70%);
top:-160px;left:-160px;filter:blur(20px);pointer-events:none
}
.dly-content{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:14px 24px;align-items:center}
.dly-text{grid-column:1/2;grid-row:1/2}
.dly-title{font-size:22px;font-weight:800;color:#fff;margin:0 0 4px 0;font-family:var(--ff-ar);letter-spacing:-.01em}
.dly-sub{font-size:12.5px;color:#fff;opacity:.85;margin:0;font-family:var(--ff-ar)}
.dly-actions{grid-column:2/3;grid-row:1/2;display:flex;gap:10px;align-items:center;justify-self:start}
.dly-btn{appearance:none;border:0;border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-ar);transition:all .15s ease}
.dly-btn span{font-size:13px;line-height:1}
.dly-btn-p{background:#fff;color:#0B1839;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.dly-btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.dly-btn-out{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.dly-btn-out:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.45)}
.dly-export-wrap{position:relative}
.dly-export-wrap .export-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--c-n-200);border-radius:10px;box-shadow:var(--sh-lg);min-width:160px;z-index:20;overflow:hidden}
.dly-export-wrap .export-menu.show{display:block}
.dly-export-wrap .export-menu button{display:block;width:100%;text-align:right;padding:10px 14px;font-size:12px;border:0;background:transparent;color:var(--c-n-700);cursor:pointer;font-family:var(--ff-ar);transition:background .15s}
.dly-export-wrap .export-menu button:hover{background:var(--c-n-50)}
.dly-stats{grid-column:1/3;grid-row:2/3;display:inline-flex;align-items:center;gap:0;justify-self:end;padding-top:4px}
.dly-stat{display:flex;flex-direction:column;gap:3px;padding:0 18px;min-width:0}
.dly-stat-label{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:rgba(228,200,255,.85);font-family:var(--ff-ar)}
.dly-stat-val{font-size:20px;font-weight:700;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.dly-stat-success{color:#A7F3D0}
.dly-stat-warn{color:#FCD34D}
.dly-stat-sep{width:1px;height:32px;background:rgba(255,255,255,.18);flex-shrink:0}
/* Modern subtab pills */
#page-daily .subtabs-modern{
position:relative;z-index:3;
margin:-32px 16px 14px 16px;
padding:6px;
border-radius:14px;
background:#FFFFFF;
border:1px solid rgba(15,23,57,.06);
box-shadow:0 14px 30px -6px rgba(11,24,57,.18),0 4px 10px rgba(11,24,57,.06);
display:flex;flex-wrap:wrap;gap:4px
}
#page-daily .subtabs-modern .stab{
flex:1 1 auto;min-width:0;
padding:9px 14px;border-radius:10px;
font-size:12.5px;font-weight:700;color:var(--c-n-600);
cursor:pointer;font-family:var(--ff-ar);
display:inline-flex;align-items:center;justify-content:center;gap:6px;
border:0;background:transparent;
transition:all .15s ease;white-space:nowrap
}
#page-daily .subtabs-modern .stab > span:first-child{font-size:14px;line-height:1}
#page-daily .subtabs-modern .stab:hover{background:var(--c-n-50);color:var(--c-primary-700)}
#page-daily .subtabs-modern .stab.active{
background:linear-gradient(135deg,#601AA0,#BE5BAA);
color:#fff;
box-shadow:0 2px 8px rgba(96,26,160,.35)
}
#page-daily .subtabs-modern .stab-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:18px;padding:0 6px;border-radius:5px;
font-size:10px;font-weight:800;font-family:var(--ff-num);
background:#F1F5F9;color:#475569
}
#page-daily .subtabs-modern .stab.active .stab-count{
background:rgba(255,255,255,.25);color:#fff
}
/* Smart comparison banner */
.dly-compare{
display:flex;align-items:center;gap:14px;
margin:0 16px 14px 16px;padding:12px 18px;
background:linear-gradient(135deg,#F0FDF4,#ECFDF5);
border:1px solid #BBF7D0;border-radius:12px;
font-family:var(--ff-ar)
}
.dly-compare-ic{font-size:22px;flex-shrink:0}
.dly-compare-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.dly-compare-title{font-size:13px;font-weight:800;color:#166534;font-family:var(--ff-ar)}
.dly-compare-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#475569}
.dly-compare-stats b{color:#0F172A;font-weight:700;margin-left:3px}
.dly-cmp-today{color:#059669;font-weight:800;font-family:var(--ff-num)}
.dly-cmp-trend{flex-shrink:0;display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:800;font-family:var(--ff-num);color:#FFFFFF;background:#10B981}
.dly-cmp-trend.down{background:#DC2626}
.dly-cmp-trend.flat{background:#64748B}
/* Unified filter overlap on daily subtabs */
#daily-takya > .time-filter-wrap,
#daily-proj > .time-filter-wrap,
#daily-expenses > .time-filter-wrap,
#page-daily .time-filter-wrap[data-tf-target="takya"],
#page-daily .time-filter-wrap[data-tf-target="proj"],
#page-daily .time-filter-wrap[data-tf-target="expenses"]{
position:relative;z-index:2;
margin:0 4px 14px 4px;
padding:14px 18px;
border-radius:16px;
border:1px solid rgba(15,23,57,.06);
box-shadow:0 6px 18px -4px rgba(11,24,57,.10);
background:#fff
}
@media(max-width:900px){
.daily-hero{padding:18px 16px 44px;border-radius:var(--r-xl)}
.dly-content{grid-template-columns:1fr;gap:12px}
.dly-text{grid-column:1;grid-row:1}
.dly-title{font-size:17px}
.dly-sub{font-size:11.5px}
.dly-actions{grid-column:1;grid-row:3;justify-self:stretch;flex-wrap:wrap}
.dly-btn{flex:1;justify-content:center;padding:8px 10px;font-size:12px}
.dly-stats{grid-column:1;grid-row:2;justify-self:start;flex-wrap:wrap;padding-top:0}
.dly-stat{padding:0 12px}
.dly-stat:first-child{padding-right:0}
.dly-stat-val{font-size:16px}
.dly-stat-label{font-size:9.5px}
.dly-stat-sep{height:26px}
#page-daily .subtabs-modern{margin:-24px 8px 12px 8px;padding:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:64px;z-index:5}
#page-daily .subtabs-modern::-webkit-scrollbar{display:none}
#page-daily .subtabs-modern .stab{flex:0 0 auto;font-size:11.5px;padding:8px 11px}
.dly-compare{margin:0 8px 12px 8px;padding:10px 12px;gap:10px}
.dly-compare-stats{gap:8px;font-size:11px}
.dly-compare-title{font-size:12px}
}
@media(max-width:480px){
#page-daily .subtabs-modern{top:60px}
#page-daily .subtabs-modern .stab{font-size:10.5px;padding:7px 9px}
}
/* === Daily Stage 2: Projects Kanban (5 status columns) === */
#daily-proj .proj-view-toggle{display:inline-flex;background:#fff;border:1px solid var(--c-n-200);border-radius:12px;padding:4px;gap:2px;box-shadow:0 2px 6px rgba(11,24,57,.04);margin-bottom:12px}
#daily-proj .proj-view-toggle .view-btn{appearance:none;background:transparent;border:0;padding:8px 16px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--c-n-600);cursor:pointer;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;min-width:80px;justify-content:center}
#daily-proj .proj-view-toggle .view-btn:hover{background:var(--c-n-50);color:var(--c-primary-700)}
#daily-proj .proj-view-toggle .view-btn.active{background:linear-gradient(135deg,#601AA0,#BE5BAA);color:#fff;box-shadow:0 2px 6px rgba(96,26,160,.25)}
/* Kanban visibility based on view */
#daily-proj[data-view="table"] #proj-kanban{display:none !important}
#daily-proj[data-view="kanban"] .tbl-card{display:none}
/* Project Kanban — 5 columns with status colors */
#proj-kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:10px;margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
#proj-kanban .kanban-col{background:transparent;border:0;padding:0;min-height:auto;gap:0;overflow:hidden}
#proj-kanban .kanban-col-head{
background:#F8FAFC;border:1px solid var(--c-n-200);border-bottom:0;
border-radius:14px 14px 0 0;padding:12px 14px;margin:0;
position:sticky;top:0;z-index:2;
display:flex;align-items:center;justify-content:space-between;gap:8px
}
#proj-kanban .kanban-col[data-col="planned"] .kanban-col-head{background:#EFF6FF;border-color:rgba(54,88,204,.25)}
#proj-kanban .kanban-col[data-col="inprogress"] .kanban-col-head{background:#FFFBEB;border-color:rgba(245,158,11,.25)}
#proj-kanban .kanban-col[data-col="done"] .kanban-col-head{background:#F0FDF4;border-color:rgba(16,185,129,.25)}
#proj-kanban .kanban-col[data-col="paused"] .kanban-col-head{background:#F5F3FF;border-color:rgba(139,92,246,.25)}
#proj-kanban .kanban-col[data-col="cancelled"] .kanban-col-head{background:#FEF2F2;border-color:rgba(220,38,38,.25)}
#proj-kanban .kanban-col-title{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#0F172A;font-family:var(--ff-ar)}
#proj-kanban .kanban-col-count{
background:rgba(15,23,57,.06);color:var(--c-primary-900);
border:0;padding:3px 10px;font-size:11px;font-weight:800;border-radius:6px;font-family:var(--ff-num)
}
#proj-kanban .kanban-col[data-col="planned"] .kanban-col-count{background:rgba(54,88,204,.18);color:var(--c-primary-700)}
#proj-kanban .kanban-col[data-col="inprogress"] .kanban-col-count{background:rgba(245,158,11,.18);color:#B45309}
#proj-kanban .kanban-col[data-col="done"] .kanban-col-count{background:rgba(16,185,129,.18);color:#15803D}
#proj-kanban .kanban-col[data-col="paused"] .kanban-col-count{background:rgba(139,92,246,.18);color:#6D28D9}
#proj-kanban .kanban-col[data-col="cancelled"] .kanban-col-count{background:rgba(220,38,38,.18);color:#B91C1C}
#proj-kanban .kb-list{
background:#fff;border:1px solid var(--c-n-200);border-top:0;
border-radius:0 0 14px 14px;
padding:10px;display:flex;flex-direction:column;gap:8px;
max-height:880px;overflow-y:auto;overflow-x:hidden;
scrollbar-width:thin;scrollbar-color:var(--c-n-300) transparent
}
#proj-kanban .kanban-col[data-col="planned"] .kb-list{border-color:rgba(54,88,204,.18)}
#proj-kanban .kanban-col[data-col="inprogress"] .kb-list{border-color:rgba(245,158,11,.18)}
#proj-kanban .kanban-col[data-col="done"] .kb-list{border-color:rgba(16,185,129,.18)}
#proj-kanban .kanban-col[data-col="paused"] .kb-list{border-color:rgba(139,92,246,.18)}
#proj-kanban .kanban-col[data-col="cancelled"] .kb-list{border-color:rgba(220,38,38,.18)}
#proj-kanban .kb-list::-webkit-scrollbar{width:6px}
#proj-kanban .kb-list::-webkit-scrollbar-thumb{background:var(--c-n-300);border-radius:3px}
#proj-kanban .kb-card{
display:flex;flex-direction:column;gap:7px;
background:#fff;border:1px solid var(--c-n-200);border-radius:12px;
padding:11px 12px;box-shadow:0 1px 2px rgba(11,24,57,.04);
transition:all .15s ease;cursor:pointer
}
#proj-kanban .kb-card:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(11,24,57,.10);border-color:#BE5BAA}
#proj-kanban .kb-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#proj-kanban .kb-type-pill{
display:inline-flex;align-items:center;padding:3px 8px;
border-radius:5px;font-size:10px;font-weight:800;
font-family:var(--ff-ar);line-height:1.4;white-space:nowrap;
background:#F1F5F9;color:#475569
}
#proj-kanban .kanban-col[data-col="planned"] .kb-type-pill{background:#EFF6FF;color:var(--c-primary-700)}
#proj-kanban .kanban-col[data-col="inprogress"] .kb-type-pill{background:#FFFBEB;color:#B45309}
#proj-kanban .kanban-col[data-col="done"] .kb-type-pill{background:#F0FDF4;color:#15803D}
#proj-kanban .kanban-col[data-col="paused"] .kb-type-pill{background:#F5F3FF;color:#6D28D9}
#proj-kanban .kanban-col[data-col="cancelled"] .kb-type-pill{background:#FEF2F2;color:#B91C1C}
#proj-kanban .kb-amount{font-size:13px;font-weight:800;color:#10B981;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
#proj-kanban .kb-amount-hidden{font-size:11px;color:var(--c-n-300)}
#proj-kanban .kb-title{
font-size:13.5px;font-weight:700;color:var(--c-primary-900);
font-family:var(--ff-ar);line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
#proj-kanban .kb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:11px;color:var(--c-n-600);font-family:var(--ff-ar)}
#proj-kanban .kb-meta-chip{display:inline-flex;align-items:center;gap:3px}
#proj-kanban .kb-foot{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding-top:7px;border-top:1px dashed var(--c-n-100);font-size:10px
}
#proj-kanban .kb-foot-l{display:inline-flex;align-items:center;gap:10px;color:var(--c-n-500)}
#proj-kanban .kb-empty{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:32px 12px;color:var(--c-n-400)
}
#proj-kanban .kb-empty-ic{font-size:28px;opacity:.6}
#proj-kanban .kb-empty-t{font-size:11.5px;font-family:var(--ff-ar)}
#proj-kanban .kb-scroll-hint{
position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;
margin:4px -10px -10px -10px;padding:8px 12px;
background:linear-gradient(to top,#fff 60%,rgba(255,255,255,.6) 100%);
font-size:11px;font-weight:700;color:var(--c-n-600);font-family:var(--ff-ar);
border-top:1px solid var(--c-n-100);pointer-events:none
}
@media(max-width:900px){
#proj-kanban{grid-template-columns:repeat(5,260px);padding-bottom:8px}
#proj-kanban .kb-list{max-height:600px;padding:8px}
}
/* === Daily Stage 3: Calendar Heatmap (all 3 subtabs) === */
.daily-view-toggle{display:inline-flex;background:#fff;border:1px solid var(--c-n-200);border-radius:12px;padding:4px;gap:2px;box-shadow:0 2px 6px rgba(11,24,57,.04);margin-bottom:12px}
.daily-view-toggle .view-btn{appearance:none;background:transparent;border:0;padding:8px 16px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--c-n-600);cursor:pointer;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;min-width:80px;justify-content:center}
.daily-view-toggle .view-btn:hover{background:var(--c-n-50);color:var(--c-primary-700)}
.daily-view-toggle .view-btn.active{background:linear-gradient(135deg,#601AA0,#BE5BAA);color:#fff;box-shadow:0 2px 6px rgba(96,26,160,.25)}
/* Calendar visibility per subtab data-view */
.daily-calendar{display:none;background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-md);border:1px solid var(--c-n-200);margin-bottom:14px;overflow:hidden;font-family:var(--ff-ar)}
#daily-takya[data-view="calendar"] .daily-calendar,
#daily-proj[data-view="calendar"] .daily-calendar,
#daily-expenses[data-view="calendar"] .daily-calendar{display:block}
#daily-takya[data-view="calendar"] .tbl-card,
#daily-expenses[data-view="calendar"] .tbl-card,
#daily-proj[data-view="calendar"] .tbl-card,
#daily-proj[data-view="calendar"] #proj-kanban{display:none !important}
/* Calendar header */
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--c-n-100);flex-wrap:wrap}
.cal-month-nav{display:inline-flex;align-items:center;gap:8px}
.cal-nav-btn{appearance:none;background:#F8FAFC;border:1px solid var(--c-n-200);border-radius:8px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-n-700);font-size:12px;transition:all .15s}
.cal-nav-btn:hover{background:var(--c-n-100);color:var(--c-primary-700);border-color:var(--c-n-300)}
.cal-month-lbl{font-size:14px;font-weight:800;color:var(--c-primary-900);font-family:var(--ff-ar);padding:0 8px}
.cal-today-btn{appearance:none;background:#F5F3FF;border:1px solid #DDD6FE;color:#6D28D9;border-radius:8px;padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--ff-ar);transition:all .15s;margin-right:8px}
.cal-today-btn:hover{background:#EDE9FE}
.cal-summary{display:inline-flex;align-items:center;gap:14px;font-size:12px;color:var(--c-n-600);font-family:var(--ff-ar);flex-wrap:wrap}
.cal-summary b{color:#0F172A}
.cal-summary-val{color:#10B981;font-weight:800;font-family:var(--ff-num)}
/* Heatmap legend */
.cal-legend{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--c-n-500)}
.cal-legend-cell{width:14px;height:14px;border-radius:3px;display:inline-block}
/* Day-name header row */
.cal-grid{padding:14px 12px}
.cal-week-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-week-head-cell{padding:8px 4px;text-align:center;font-size:11px;font-weight:700;color:var(--c-n-500);font-family:var(--ff-ar)}
/* 6×7 day grid */
.cal-weeks{display:grid;gap:4px}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{
position:relative;aspect-ratio:1.4/1;min-height:60px;
border:1px solid var(--c-n-100);border-radius:8px;
padding:6px 8px;display:flex;flex-direction:column;justify-content:space-between;gap:2px;
cursor:pointer;transition:all .15s ease;
background:#FAFBFD
}
.cal-day:hover{border-color:#BE5BAA;transform:translateY(-1px);box-shadow:0 4px 10px rgba(96,26,160,.10)}
.cal-day.muted{cursor:default;opacity:.4;background:transparent;border-color:transparent}
.cal-day.muted:hover{transform:none;box-shadow:none;border-color:transparent}
.cal-day-num{font-size:12px;font-weight:700;color:#0F172A;font-family:var(--ff-num)}
.cal-day-amount{font-size:10px;font-weight:700;color:#475569;font-family:var(--ff-num);font-variant-numeric:tabular-nums;line-height:1.1}
.cal-day-count{font-size:9px;color:var(--c-n-400);font-family:var(--ff-num);line-height:1}
/* Today highlight */
.cal-day.today{border-color:#BE5BAA;border-width:2px}
.cal-day.today .cal-day-num{color:#6D28D9}
/* Heatmap intensity (5 levels) — blends amount tint with text contrast */
.cal-day[data-intensity="1"]{background:#FAF5FF}
.cal-day[data-intensity="2"]{background:#E9D5FF}
.cal-day[data-intensity="3"]{background:#C084FC;color:#fff}
.cal-day[data-intensity="3"] .cal-day-num,
.cal-day[data-intensity="3"] .cal-day-amount,
.cal-day[data-intensity="3"] .cal-day-count{color:#fff}
.cal-day[data-intensity="4"]{background:#9333EA;color:#fff}
.cal-day[data-intensity="4"] .cal-day-num,
.cal-day[data-intensity="4"] .cal-day-amount,
.cal-day[data-intensity="4"] .cal-day-count{color:#fff}
.cal-day[data-intensity="5"]{background:#6D28D9;color:#fff}
.cal-day[data-intensity="5"] .cal-day-num,
.cal-day[data-intensity="5"] .cal-day-amount,
.cal-day[data-intensity="5"] .cal-day-count{color:#fff}
/* Empty state */
.cal-empty{padding:48px 20px;text-align:center;color:var(--c-n-400)}
.cal-empty-ic{font-size:42px;opacity:.6;margin-bottom:10px}
.cal-empty-t{font-size:14px;font-weight:700;color:var(--c-n-600);margin-bottom:4px;font-family:var(--ff-ar)}
.cal-empty-s{font-size:12px;color:var(--c-n-400);font-family:var(--ff-ar)}
/* Day-detail dialog */
.cal-day-dlg-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:600;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.cal-day-dlg-overlay.open{display:flex}
.cal-day-dlg{background:#fff;border-radius:var(--r-xl);max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);font-family:var(--ff-ar)}
.cal-day-dlg-hd{padding:16px 20px;border-bottom:1px solid var(--c-n-100);display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-day-dlg-title{display:flex;flex-direction:column;gap:2px}
.cal-day-dlg-title h3{font-size:15px;font-weight:800;color:var(--c-primary-900);margin:0;font-family:var(--ff-ar)}
.cal-day-dlg-title small{font-size:12px;color:var(--c-n-500)}
.cal-day-dlg-x{appearance:none;background:#F8FAFC;border:0;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px;color:var(--c-n-600)}
.cal-day-dlg-x:hover{background:var(--c-n-100)}
.cal-day-dlg-bd{padding:14px 20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px}
.cal-day-dlg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#FAFBFD;border:1px solid var(--c-n-100);border-radius:10px;font-size:12px}
.cal-day-dlg-row .lbl{font-weight:700;color:var(--c-primary-900)}
.cal-day-dlg-row .meta{font-size:10.5px;color:var(--c-n-500)}
.cal-day-dlg-row .amt{font-size:13px;font-weight:800;color:#F59E0B;font-family:var(--ff-num)}
.cal-day-dlg-ft{padding:12px 20px;border-top:1px solid var(--c-n-100);background:#FAFBFD;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--c-n-600)}
.cal-day-dlg-total{font-weight:800;color:#10B981;font-size:14px;font-family:var(--ff-num)}
@media(max-width:900px){
.cal-day{min-height:48px;padding:5px 4px}
.cal-day-num{font-size:11px}
.cal-day-amount{font-size:9px}
.cal-day-count{font-size:8px}
.cal-toolbar{padding:10px 12px;gap:8px}
.cal-summary{font-size:11px;gap:8px}
}
@media(max-width:480px){
.cal-day{min-height:42px;padding:4px 3px;gap:1px}
.cal-day-num{font-size:10px}
.cal-day-amount{font-size:8.5px;font-weight:800}
.cal-day-count{display:none}
}
/* === Daily Stage 4: Table polish + Mobile compact (Option C) + FAB === */
/* Polished table card on the daily page (matches the hero) */
#page-daily #daily-takya .tbl-card,
#page-daily #daily-proj .tbl-card,
#page-daily #daily-expenses .tbl-card{
border-radius:var(--r-xl);
box-shadow:0 8px 22px -6px rgba(11,24,57,.10),0 2px 6px rgba(11,24,57,.04);
border:1px solid var(--c-n-200);
overflow:hidden
}
#page-daily .tbl-hdr{padding:16px 20px;border-bottom:1px solid var(--c-n-100)}
#page-daily .tbl-hdr h3{font-size:15px;font-weight:700;color:var(--c-primary-900);margin:0}
/* Page-level scroll instead of inner table scroll, so the page never feels
stuck for users whose dashboard widgets above the table are smaller. */
#page-daily thead th{background:#F8FAFC;box-shadow:inset 0 -1px 0 var(--c-n-200)}
#page-daily .tbl-card > div[style*="overflow-x:auto"]{max-height:none !important;overflow-y:visible !important}
/* Total amount columns rendered bold with brand tones */
#page-daily #takya-body td[data-col="totalPrice"],
#page-daily #expenses-body td[data-col="amount"]{color:#F59E0B;font-weight:800;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
#page-daily #proj-body td[data-col="shekelVal"]{color:#F59E0B;font-weight:800;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
#page-daily #takya-body td[data-col="dollar"],
#page-daily #expenses-body td[data-col="dollar"],
#page-daily #proj-body td[data-col="dollarVal"]{color:#10B981;font-weight:800;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
/* Compact circular action buttons */
#page-daily tbody td:last-child > button{
width:30px;height:30px;border-radius:8px;padding:0 !important;
display:inline-flex;align-items:center;justify-content:center;
font-size:13px;line-height:1;margin:0 2px;
border:1px solid transparent;transition:all .15s ease
}
/* Pagination polish */
#page-daily .pgn{padding:12px 20px;background:#FAFBFD;border-top:1px solid var(--c-n-100);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#page-daily .pgn-info{font-size:12px;color:var(--c-n-600);font-family:var(--ff-ar)}
#page-daily .pgn-btns{display:inline-flex;gap:4px}
#page-daily .pgn-btns button{
appearance:none;background:#fff;border:1px solid var(--c-n-200);border-radius:8px;
padding:6px 12px;font-size:12px;font-weight:600;color:var(--c-n-700);
cursor:pointer;font-family:var(--ff-ar);transition:all .15s
}
#page-daily .pgn-btns button:hover{border-color:#BE5BAA;color:#6D28D9;background:#FAF5FF}
#page-daily .pgn-btns button.active{
background:linear-gradient(135deg,#601AA0,#BE5BAA);
color:#fff;border-color:transparent
}
/* === Mobile compact (Option C · Two-Line 48px) ===
Hide secondary columns and stack remaining info into 2 visual lines.
Goal: ~16 records per screen with all key info visible. */
@media(max-width:768px){
/* Card softens, in-card toolbar hidden (filters live in unified strip) */
#page-daily .tbl-card{border-radius:var(--r-md);margin:0 4px 12px}
#page-daily .tbl-toolbar{display:none}
/* بطلب المستخدم: إظهار كل الأعمدة على الموبايل (مع تمرير أفقي).
أُزيل إخفاء الأعمدة الثانوية الذي كان لتوفير المساحة فقط.
إخفاء الأعمدة حسب صلاحيات المستخدم يبقى فعّالاً (inline + !important). */
/* Compact spacing on visible cells */
#page-daily thead th{padding:8px 6px;font-size:10.5px}
#page-daily tbody td{padding:8px 6px;font-size:11px;vertical-align:middle}
#page-daily tbody td[data-col="date"]{white-space:nowrap;font-size:10.5px;color:var(--c-n-700);font-weight:700;font-family:var(--ff-num)}
#page-daily #takya-body td[data-col="totalPrice"],
#page-daily #proj-body td[data-col="shekelVal"],
#page-daily #expenses-body td[data-col="amount"]{font-size:11.5px}
/* Action buttons compact */
#page-daily tbody td:last-child{padding:8px 4px;text-align:left;white-space:nowrap}
#page-daily tbody td:last-child > button{width:26px;height:26px;font-size:11px}
}
/* === Multi-action FAB (mobile only · daily page) === */
.dly-fab-wrap{display:none}
@media(max-width:768px){
.page#page-daily .dly-fab-wrap{
display:flex;flex-direction:column;align-items:flex-start;gap:10px;
position:fixed;
bottom:calc(20px + env(safe-area-inset-bottom, 0px));
left:18px;z-index:50
}
.dly-fab{
appearance:none;border:0;cursor:pointer;
width:56px;height:56px;border-radius:28px;
color:#fff;font-size:24px;
background:linear-gradient(135deg,#601AA0,#BE5BAA);
box-shadow:0 8px 22px rgba(96,26,160,.4);
transition:transform .25s ease;
display:inline-flex;align-items:center;justify-content:center;
font-weight:700
}
.dly-fab:active{transform:scale(.95)}
.dly-fab-wrap.open .dly-fab{transform:rotate(45deg)}
.dly-fab-opt{
appearance:none;border:0;cursor:pointer;
background:#FFFFFF;color:#0F172A;
border-radius:24px;padding:9px 14px 9px 18px;
font-size:12.5px;font-weight:700;
display:inline-flex;align-items:center;gap:6px;
box-shadow:0 6px 16px rgba(11,24,57,.18);
font-family:var(--ff-ar);
/* Hidden by default — animated reveal when wrap is .open */
opacity:0;transform:translateY(12px) scale(.85);pointer-events:none;
transition:opacity .18s ease,transform .22s ease;
border:1px solid rgba(15,23,57,.06)
}
.dly-fab-opt:active{transform:translateY(0) scale(.96)}
.dly-fab-opt span{font-size:14px;line-height:1}
.dly-fab-wrap.open .dly-fab-opt{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.dly-fab-wrap.open .dly-fab-opt:nth-child(1){transition-delay:.10s}
.dly-fab-wrap.open .dly-fab-opt:nth-child(2){transition-delay:.05s}
.dly-fab-wrap.open .dly-fab-opt:nth-child(3){transition-delay:0s}
}
/* ============================================================
Makhzan (Warehouse) — Stage 1
Hero + modern subtab pills + filter overlap
============================================================ */
.makhzan-hero{
position:relative;border-radius:var(--r-2xl);
padding:24px 28px 56px;margin:0;overflow:hidden;color:#fff;
background:linear-gradient(120deg,#0B1839 0%,#04827E 50%,#06B0AA 80%,#0EA86E 100%);
box-shadow:0 12px 30px -8px rgba(11,24,57,.35)
}
.makhzan-hero .mkh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.makhzan-hero .mkh-orb{
position:absolute;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(120,255,200,.14) 35%,transparent 70%);
top:-160px;left:-160px;filter:blur(20px);pointer-events:none
}
.mkh-content{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:14px 24px;align-items:center}
.mkh-text{grid-column:1/2;grid-row:1/2}
.mkh-title{font-size:22px;font-weight:800;color:#fff;margin:0 0 4px 0;font-family:var(--ff-ar);letter-spacing:-.01em}
.mkh-sub{font-size:12.5px;color:#fff;opacity:.85;margin:0;font-family:var(--ff-ar)}
.mkh-actions{grid-column:2/3;grid-row:1/2;display:flex;gap:10px;align-items:center;justify-self:start}
.mkh-btn{appearance:none;border:0;border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-ar);transition:all .15s ease}
.mkh-btn span{font-size:13px;line-height:1}
.mkh-btn-p{background:#fff;color:#0B1839;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.mkh-btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.mkh-btn-out{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.mkh-btn-out:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.45)}
.mkh-export-wrap{position:relative}
.mkh-export-wrap .export-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--c-n-200);border-radius:10px;box-shadow:var(--sh-lg);min-width:160px;z-index:20;overflow:hidden}
.mkh-export-wrap .export-menu.show{display:block}
.mkh-export-wrap .export-menu button{display:block;width:100%;text-align:right;padding:10px 14px;font-size:12px;border:0;background:transparent;color:var(--c-n-700);cursor:pointer;font-family:var(--ff-ar);transition:background .15s}
.mkh-export-wrap .export-menu button:hover{background:var(--c-n-50)}
.mkh-stats{grid-column:1/3;grid-row:2/3;display:inline-flex;align-items:center;gap:0;justify-self:end;padding-top:4px}
.mkh-stat{display:flex;flex-direction:column;gap:3px;padding:0 18px;min-width:0}
.mkh-stat-label{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:rgba(184,255,210,.85);font-family:var(--ff-ar)}
.mkh-stat-val{font-size:20px;font-weight:700;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.mkh-stat-success{color:#A7F3D0}
.mkh-stat-warn{color:#FCD34D}
.mkh-stat-sep{width:1px;height:32px;background:rgba(255,255,255,.18);flex-shrink:0}
/* Modern subtab pills (overlap the hero like the dashboard filter pattern) */
#page-makhzan .subtabs-modern{
position:relative;z-index:3;
margin:-32px 16px 14px 16px;
padding:6px;
border-radius:14px;
background:#FFFFFF;
border:1px solid rgba(15,23,57,.06);
box-shadow:0 14px 30px -6px rgba(11,24,57,.18),0 4px 10px rgba(11,24,57,.06);
display:flex;flex-wrap:wrap;gap:4px
}
#page-makhzan .subtabs-modern .stab{
flex:1 1 auto;min-width:0;
padding:9px 14px;border-radius:10px;
font-size:12.5px;font-weight:700;color:var(--c-n-600);
cursor:pointer;font-family:var(--ff-ar);
display:inline-flex;align-items:center;justify-content:center;gap:6px;
border:0;background:transparent;
transition:all .15s ease;white-space:nowrap
}
#page-makhzan .subtabs-modern .stab > span:first-child{font-size:14px;line-height:1}
#page-makhzan .subtabs-modern .stab:hover{background:var(--c-n-50);color:var(--c-primary-700)}
#page-makhzan .subtabs-modern .stab.active{
background:linear-gradient(135deg,#04827E,#06B0AA);
color:#fff;
box-shadow:0 2px 8px rgba(6,176,170,.35)
}
#page-makhzan .subtabs-modern .stab-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:18px;padding:0 6px;border-radius:5px;
font-size:10px;font-weight:800;font-family:var(--ff-num);
background:#F1F5F9;color:#475569
}
#page-makhzan .subtabs-modern .stab.active .stab-count{
background:rgba(255,255,255,.25);color:#fff
}
#page-makhzan .subtabs-modern .stab-count.stab-count-alert{
background:#FEE2E2;color:#DC2626
}
#page-makhzan .subtabs-modern .stab.active .stab-count.stab-count-alert{
background:rgba(255,255,255,.25);color:#fff
}
/* Unified filter overlap on makhzan subtabs (matches dashboard pattern) */
#makhzan-buy > .time-filter-wrap,
#makhzan-buy-rubo > .time-filter-wrap,
#makhzan-con > .time-filter-wrap,
#page-makhzan .time-filter-wrap[data-tf-target="buy"],
#page-makhzan .time-filter-wrap[data-tf-target="buy_rubo"],
#page-makhzan .time-filter-wrap[data-tf-target="con"]{
position:relative;z-index:2;
margin:0 4px 14px 4px;
padding:14px 18px;
border-radius:16px;
border:1px solid rgba(15,23,57,.06);
box-shadow:0 6px 18px -4px rgba(11,24,57,.10);
background:#fff
}
/* Hide the inner tbl-toolbar within makhzan subtabs (we keep dropdowns
in the unified filter strip, but legacy users may still see them) */
#page-makhzan .tbl-toolbar{padding-top:10px;padding-bottom:10px}
@media(max-width:900px){
.makhzan-hero{padding:18px 16px 44px;border-radius:var(--r-xl)}
.mkh-content{grid-template-columns:1fr;gap:12px}
.mkh-text{grid-column:1;grid-row:1}
.mkh-title{font-size:17px}
.mkh-sub{font-size:11.5px}
.mkh-actions{grid-column:1;grid-row:3;justify-self:stretch;flex-wrap:wrap}
.mkh-btn{flex:1;justify-content:center;padding:8px 10px;font-size:12px}
.mkh-stats{grid-column:1;grid-row:2;justify-self:start;flex-wrap:wrap;padding-top:0}
.mkh-stat{padding:0 12px}
.mkh-stat:first-child{padding-right:0}
.mkh-stat-val{font-size:16px}
.mkh-stat-label{font-size:9.5px}
.mkh-stat-sep{height:26px}
#page-makhzan .subtabs-modern{
margin:-22px 8px 10px 8px;padding:3px;
flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
/* Stay visible while scrolling long tables (sits below the topbar) */
position:sticky;top:64px;z-index:5;
/* Hide scrollbar for cleaner look while still scrollable */
scrollbar-width:none
}
#page-makhzan .subtabs-modern::-webkit-scrollbar{display:none}
#page-makhzan .subtabs-modern .stab{flex:0 0 auto;font-size:11px;padding:7px 10px;gap:5px}
#page-makhzan .subtabs-modern .stab > span:first-child{font-size:13px}
#page-makhzan .subtabs-modern .stab-count{min-width:18px;height:16px;padding:0 5px;font-size:9px}
}
@media(max-width:480px){
#page-makhzan .subtabs-modern{top:60px;margin:-20px 6px 8px 6px}
#page-makhzan .subtabs-modern .stab{font-size:10.5px;padding:7px 9px}
}
/* === Makhzan Stage 3: Inventory Cards (Option B · Stat-First) === */
#makhzan-net .inv-view-toggle{display:inline-flex;background:#fff;border:1px solid var(--c-n-200);border-radius:12px;padding:4px;gap:2px;box-shadow:0 2px 6px rgba(11,24,57,.04);margin-bottom:12px}
#makhzan-net .inv-view-toggle .view-btn{appearance:none;background:transparent;border:0;padding:8px 16px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--c-n-600);cursor:pointer;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;min-width:80px;justify-content:center}
#makhzan-net .inv-view-toggle .view-btn:hover{background:var(--c-n-50);color:var(--c-primary-700)}
#makhzan-net .inv-view-toggle .view-btn.active{background:linear-gradient(135deg,#04827E,#06B0AA);color:#fff;box-shadow:0 2px 6px rgba(6,176,170,.25)}
/* Search + status filter (cards view) */
#makhzan-net .inv-search-bar{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--c-n-200);border-radius:12px;padding:8px 12px;margin-bottom:12px;box-shadow:0 2px 6px rgba(11,24,57,.04)}
#makhzan-net .inv-search-ic{font-size:14px;color:var(--c-n-400)}
#makhzan-net .inv-search{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:13px;color:var(--c-n-800);font-family:var(--ff-ar);padding:6px 0}
#makhzan-net .inv-search::placeholder{color:var(--c-n-400)}
#makhzan-net .inv-status-fi{appearance:none;-webkit-appearance:none;background:#F8FAFC;border:1px solid var(--c-n-200);border-radius:8px;padding:6px 28px 6px 12px;font-size:12px;font-weight:600;color:var(--c-n-700);font-family:var(--ff-ar);cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:left 8px center}
/* Cards grid */
.inv-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:18px}
#makhzan-net[data-view="table"] .inv-cards-grid,
#makhzan-net[data-view="table"] .inv-search-bar{display:none}
#makhzan-net[data-view="cards"] .inv-table-card{display:none}
/* Stat-First card (Option B) */
.inv-card{background:#fff;border:1px solid var(--c-n-200);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 8px rgba(11,24,57,.06);transition:all .15s ease;cursor:pointer;font-family:var(--ff-ar);min-height:124px}
.inv-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(11,24,57,.10);border-color:var(--c-primary-200)}
.inv-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.inv-card-stock{display:flex;align-items:flex-end;gap:8px;min-width:0;flex:1}
.inv-card-num{font-size:30px;font-weight:800;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.inv-card-name-block{display:flex;flex-direction:column;gap:1px;min-width:0;padding-bottom:4px}
.inv-card-name{font-size:13.5px;font-weight:800;color:var(--c-primary-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.inv-card-min{font-size:10px;color:var(--c-n-400)}
.inv-card-stP{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:10px;font-weight:800;line-height:1.4;white-space:nowrap;flex-shrink:0}
.inv-card-stP.good{background:#F0FDF4;color:#15803D}
.inv-card-stP.low{background:#FFFBEB;color:#B45309}
.inv-card-stP.critical{background:#FEF2F2;color:#DC2626}
.inv-card-num.good{color:#10B981}
.inv-card-num.low{color:#F59E0B}
.inv-card-num.critical{color:#DC2626}
/* Progress bar */
.inv-card-pbar{width:100%;height:6px;background:#F1F5F9;border-radius:3px;overflow:hidden}
.inv-card-pbar-inner{height:100%;border-radius:3px;transition:width .3s ease}
.inv-card-pbar-inner.good{background:#10B981}
.inv-card-pbar-inner.low{background:#F59E0B}
.inv-card-pbar-inner.critical{background:#DC2626}
/* Bottom row: meta (purchases/consumed) + value */
.inv-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.inv-card-foot-l{display:inline-flex;align-items:center;gap:8px;color:var(--c-n-500);min-width:0;flex-wrap:wrap}
.inv-card-foot-chip{display:inline-flex;align-items:center;gap:3px;font-family:var(--ff-ar)}
.inv-card-value{font-size:12.5px;font-weight:800;color:#10B981;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
.inv-card-value-hidden{font-size:11px;color:var(--c-n-300)}
/* Empty state for cards view */
.inv-cards-empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--c-n-400);font-family:var(--ff-ar)}
.inv-cards-empty-ic{font-size:42px;opacity:.6;margin-bottom:10px}
.inv-cards-empty-t{font-size:14px;font-weight:700;color:var(--c-n-600);margin-bottom:4px}
.inv-cards-empty-s{font-size:12px;color:var(--c-n-400)}
@media(max-width:768px){
.inv-cards-grid{grid-template-columns:1fr;gap:10px}
.inv-card{padding:12px;min-height:110px}
.inv-card-num{font-size:26px}
.inv-card-name{font-size:12.5px;max-width:120px}
#makhzan-net .inv-search-bar{padding:6px 10px}
}
/* === Makhzan Stage 4: Table polish + mobile compact rows + FAB === */
/* Polished table cards on the makhzan page (matches the hero radius/shadow) */
#page-makhzan #makhzan-buy .tbl-card,
#page-makhzan #makhzan-buy-rubo .tbl-card,
#page-makhzan #makhzan-con .tbl-card{
border-radius:var(--r-xl);
box-shadow:0 8px 22px -6px rgba(11,24,57,.10),0 2px 6px rgba(11,24,57,.04);
border:1px solid var(--c-n-200);
overflow:hidden
}
#page-makhzan #makhzan-buy .tbl-hdr,
#page-makhzan #makhzan-buy-rubo .tbl-hdr,
#page-makhzan #makhzan-con .tbl-hdr{padding:16px 20px;border-bottom:1px solid var(--c-n-100)}
#page-makhzan #makhzan-buy .tbl-hdr h3,
#page-makhzan #makhzan-buy-rubo .tbl-hdr h3,
#page-makhzan #makhzan-con .tbl-hdr h3{font-size:15px;font-weight:700;color:var(--c-primary-900);margin:0}
/* Page-level scroll instead of inner table scroll, so the page never feels
stuck for users whose dashboard widgets above the table are smaller. */
#page-makhzan #makhzan-buy .tbl-card > div[style*="overflow-x:auto"],
#page-makhzan #makhzan-buy-rubo .tbl-card > div[style*="overflow-x:auto"],
#page-makhzan #makhzan-con .tbl-card > div[style*="overflow-x:auto"]{max-height:none !important;overflow-y:visible !important}
#page-makhzan #makhzan-buy thead th,
#page-makhzan #makhzan-buy-rubo thead th,
#page-makhzan #makhzan-con thead th{background:#F8FAFC;box-shadow:inset 0 -1px 0 var(--c-n-200)}
/* Item icon chip in the buy/buy_rubo/con item column (purely visual) */
#page-makhzan #buy-body td[data-col="item"],
#page-makhzan #buy_rubo-body td[data-col="item"],
#page-makhzan #con-body td[data-col="item"]{font-weight:700}
/* Total amount columns rendered bold + warning/success tones */
#page-makhzan #buy-body td[data-col="total_price"],
#page-makhzan #buy_rubo-body td[data-col="total_price"],
#page-makhzan #con-body td[data-col="totalPrice"]{color:#F59E0B;font-weight:800;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
#page-makhzan #buy-body td[data-col="dollar"],
#page-makhzan #buy_rubo-body td[data-col="dollar"],
#page-makhzan #con-body td[data-col="dollar"]{color:#10B981;font-weight:800;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
/* Compact circular action buttons */
#page-makhzan #buy-body td:last-child > button,
#page-makhzan #buy_rubo-body td:last-child > button,
#page-makhzan #con-body td:last-child > button{
width:30px;height:30px;border-radius:8px;padding:0 !important;
display:inline-flex;align-items:center;justify-content:center;
font-size:13px;line-height:1;margin:0 2px;
border:1px solid transparent;transition:all .15s ease
}
/* Pagination polish */
#page-makhzan #makhzan-buy .pgn,
#page-makhzan #makhzan-buy-rubo .pgn,
#page-makhzan #makhzan-con .pgn{padding:12px 20px;background:#FAFBFD;border-top:1px solid var(--c-n-100);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#page-makhzan .pgn-info{font-size:12px;color:var(--c-n-600);font-family:var(--ff-ar)}
#page-makhzan .pgn-btns{display:inline-flex;gap:4px}
#page-makhzan .pgn-btns button{
appearance:none;background:#fff;border:1px solid var(--c-n-200);border-radius:8px;
padding:6px 12px;font-size:12px;font-weight:600;color:var(--c-n-700);
cursor:pointer;font-family:var(--ff-ar);transition:all .15s
}
#page-makhzan .pgn-btns button:hover{border-color:var(--c-primary-300);color:var(--c-primary-700);background:#F8FAFC}
#page-makhzan .pgn-btns button.active{
background:linear-gradient(135deg,#04827E,#06B0AA);
color:#fff;border-color:transparent
}
/* === Mobile compact rows ===
Hide secondary columns and compress visible cells so users see 12-15
records without horizontal scroll. */
@media(max-width:768px){
#page-makhzan .tbl-toolbar{display:none}
#page-makhzan #makhzan-buy .tbl-card,
#page-makhzan #makhzan-buy-rubo .tbl-card,
#page-makhzan #makhzan-con .tbl-card{border-radius:var(--r-md);margin:0 4px 12px}
/* بطلب المستخدم: إظهار كل الأعمدة على الموبايل (تمرير أفقي) —
أُزيل إخفاء الأعمدة الثانوية. صلاحيات إخفاء الأعمدة تبقى فعّالة. */
/* Compact spacing on the visible columns */
#page-makhzan #makhzan-buy thead th,
#page-makhzan #makhzan-buy-rubo thead th,
#page-makhzan #makhzan-con thead th{padding:8px 6px;font-size:10.5px}
#page-makhzan #buy-body td,
#page-makhzan #buy_rubo-body td,
#page-makhzan #con-body td{padding:8px 6px;font-size:11px}
#page-makhzan #buy-body td[data-col="date"],
#page-makhzan #buy_rubo-body td[data-col="date"],
#page-makhzan #con-body td[data-col="date"]{white-space:nowrap;font-size:10.5px;color:var(--c-n-700);font-weight:600;font-family:var(--ff-num)}
#page-makhzan #buy-body td[data-col="total_price"],
#page-makhzan #buy_rubo-body td[data-col="total_price"],
#page-makhzan #con-body td[data-col="totalPrice"]{font-size:11.5px}
/* Action buttons compact */
#page-makhzan #buy-body td:last-child,
#page-makhzan #buy_rubo-body td:last-child,
#page-makhzan #con-body td:last-child{padding:8px 4px;text-align:left;white-space:nowrap}
#page-makhzan #buy-body td:last-child > button,
#page-makhzan #buy_rubo-body td:last-child > button,
#page-makhzan #con-body td:last-child > button{width:26px;height:26px;font-size:11px}
}
/* FAB — floating add button on mobile (makhzan page only).
Anchored to the bottom-left of the viewport with safe-area padding so
it doesn't drift up when iOS Safari collapses its bottom toolbar. */
.mkh-fab{display:none}
@media(max-width:768px){
.page#page-makhzan .mkh-fab{
display:inline-flex;align-items:center;justify-content:center;
position:fixed;
bottom:calc(20px + env(safe-area-inset-bottom, 0px));
left:18px;z-index:50;
width:56px;height:56px;border-radius:28px;border:0;
color:#fff;font-size:24px;cursor:pointer;
background:linear-gradient(135deg,#04827E,#06B0AA);
box-shadow:0 8px 22px rgba(6,176,170,.4);
transition:transform .15s ease
}
.page#page-makhzan .mkh-fab:active{transform:scale(.95)}
/* Hide FAB on net/alerts/reports subtabs (no add modal there) */
.page#page-makhzan:has(#makhzan-net.active) .mkh-fab,
.page#page-makhzan:has(#makhzan-alerts.active) .mkh-fab,
.page#page-makhzan:has(#makhzan-reports.active) .mkh-fab{display:none}
}
/* ============================================================
Mursala Stage 4: Table polish + mobile compact rows
============================================================ */
/* Polished table card on the mursala page (matches hero radius/shadow) */
#page-mursala #mursala-tbl-card{
border-radius:var(--r-xl);
box-shadow:0 8px 22px -6px rgba(11,24,57,.10),0 2px 6px rgba(11,24,57,.04);
border:1px solid var(--c-n-200);
overflow:hidden
}
#page-mursala #mursala-tbl-card .tbl-hdr{padding:16px 20px;border-bottom:1px solid var(--c-n-100)}
#page-mursala #mursala-tbl-card .tbl-hdr h3{font-size:15px;font-weight:700;color:var(--c-primary-900);margin:0}
#page-mursala #mursala-tbl-card .tbl-toolbar{padding:12px 20px;border-bottom:1px solid var(--c-n-100);background:#FAFBFD}
/* Page-level scroll for everyone. Previously the inner table div had
max-height:680px on desktop, which made non-admin users feel stuck because
the body did not need to scroll and the inner scrollbar was not obvious. */
#page-mursala #mursala-tbl-card thead th{background:#F8FAFC;box-shadow:inset 0 -1px 0 var(--c-n-200)}
/* Wrapper around the table — keep a simple horizontal-scroll fallback on
mobile (matches the original inline style="overflow-x:auto"). Desktop
overrides this below to fit all columns without any scrollbar. */
#page-mursala #mursala-tbl-card > .mursala-tbl-wrap{overflow-x:auto}
/* Desktop: fit all 17 columns in the viewport — no horizontal scroll.
We compact paddings/fonts and let text ellipsize per cell. The
FAT-style ruleset uses !important on padding/font-size, so we use it
here too to win the cascade. */
@media(min-width:769px){
#page-mursala #mursala-tbl-card > .mursala-tbl-wrap{overflow-x:visible !important}
#page-mursala #mursala-tbl-card.fat-style table#mursala-table{
width:100% !important;min-width:0 !important;table-layout:fixed !important;font-size:11.5px
}
#page-mursala #mursala-tbl-card.fat-style thead th{
padding:7px 4px !important;font-size:10.5px !important;white-space:nowrap;letter-spacing:-.02em
}
#page-mursala #mursala-tbl-card.fat-style tbody td{
padding:5px 4px !important;font-size:11px !important;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
#page-mursala #mursala-tbl-card.fat-style tfoot td{
padding:5px 4px !important;font-size:11px !important
}
/* Hide the sort-arrow ::after on header so it doesn't push width */
#page-mursala #mursala-tbl-card.fat-style thead th[data-col]::after{margin-right:2px;font-size:7px}
/* Per-column widths tuned so 17 columns fit on a 1280px+ screen */
#page-mursala #mursala-table .th-sel,
#page-mursala #mursala-body td:nth-child(1){width:24px !important;text-align:center}
#page-mursala #mursala-table thead th:nth-child(2),
#page-mursala #mursala-body td:nth-child(2){width:32px !important;text-align:center}
#page-mursala #mursala-table thead th[data-col="req_date"],
#page-mursala #mursala-body td[data-col="req_date"],
#page-mursala #mursala-table thead th[data-col="exec_date"],
#page-mursala #mursala-body td[data-col="exec_date"]{width:82px !important}
#page-mursala #mursala-table thead th[data-col="status"],
#page-mursala #mursala-body td[data-col="status"]{width:80px !important}
#page-mursala #mursala-table thead th[data-col="funder"],
#page-mursala #mursala-body td[data-col="funder"]{width:9% !important}
#page-mursala #mursala-table thead th[data-col="donor"],
#page-mursala #mursala-body td[data-col="donor"]{width:8% !important}
#page-mursala #mursala-table thead th[data-col="proj_type"],
#page-mursala #mursala-body td[data-col="proj_type"]{width:8% !important}
#page-mursala #mursala-table thead th[data-col="type"],
#page-mursala #mursala-body td[data-col="type"]{width:6% !important}
#page-mursala #mursala-table thead th[data-col="qty"],
#page-mursala #mursala-body td[data-col="qty"]{width:48px !important;text-align:center}
#page-mursala #mursala-table thead th[data-col="unit_price"],
#page-mursala #mursala-body td[data-col="unit_price"]{width:64px !important;text-align:left}
#page-mursala #mursala-table thead th[data-col="total_price"],
#page-mursala #mursala-body td[data-col="total_price"]{width:74px !important;text-align:left}
#page-mursala #mursala-table thead th[data-col="location"],
#page-mursala #mursala-body td[data-col="location"]{width:8% !important}
#page-mursala #mursala-table thead th[data-col="media"],
#page-mursala #mursala-body td[data-col="media"]{width:62px !important;text-align:center}
#page-mursala #mursala-table thead th[data-col="notes_doc"],
#page-mursala #mursala-body td[data-col="notes_doc"]{width:60px !important;text-align:center}
#page-mursala #mursala-table thead th[data-col="notes_other"],
#page-mursala #mursala-body td[data-col="notes_other"]{width:60px !important;text-align:center}
#page-mursala #mursala-table thead th:last-child,
#page-mursala #mursala-body td:last-child{width:80px !important;text-align:center}
/* Compact action buttons so they fit in the narrower last column */
#page-mursala #mursala-body td:last-child .act-btn,
#page-mursala #mursala-body td:last-child > button{
width:24px;height:24px;font-size:11px;margin:0 1px
}
/* Status pill compacted */
#page-mursala #mursala-body .mur-status-btn,
#page-mursala #mursala-body .bdg{padding:3px 6px;font-size:10px}
/* Media button compacted */
#page-mursala #mursala-body .media-cell-btn{padding:4px 6px;font-size:11px;gap:3px}
}
/* Status pill in the table — color-themed like the kanban */
#page-mursala #mursala-body .mur-status-btn,
#page-mursala #mursala-body .bdg{
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:6px;
font-size:11px;font-weight:800;font-family:var(--ff-ar);line-height:1.4;
border:0
}
#page-mursala #mursala-body .bdg.b-green{background:#F0FDF4;color:#15803D}
#page-mursala #mursala-body .bdg.b-blue{background:#F0FDFA;color:#0F766E}
#page-mursala #mursala-body .bdg.b-orange{background:#EFF6FF;color:var(--c-primary-700)}
#page-mursala #mursala-body .bdg.b-red{background:#FFFBEB;color:#B45309}
/* Bold green for the total amount column */
#page-mursala #mursala-body td[data-col="total_price"] .amt{
color:#10B981;font-weight:800;font-family:var(--ff-num);
font-variant-numeric:tabular-nums;letter-spacing:-.01em
}
/* Compact circular action buttons (edit / delete) */
#page-mursala #mursala-body td:last-child .act-btn,
#page-mursala #mursala-body td:last-child > button{
width:30px;height:30px;border-radius:8px;padding:0 !important;
display:inline-flex;align-items:center;justify-content:center;
font-size:13px;line-height:1;margin:0 2px;
border:1px solid transparent;transition:all .15s ease
}
#page-mursala #mursala-body td:last-child .act-btn{font-size:0}
#page-mursala #mursala-body td:last-child .act-btn::before{font-size:13px}
/* Pagination polish */
#page-mursala #mursala-tbl-card .pgn{padding:12px 20px;background:#FAFBFD;border-top:1px solid var(--c-n-100);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#page-mursala #mursala-tbl-card .pgn-info{font-size:12px;color:var(--c-n-600);font-family:var(--ff-ar)}
#page-mursala #mursala-tbl-card .pgn-btns{display:inline-flex;gap:4px}
#page-mursala #mursala-tbl-card .pgn-btns button{
appearance:none;background:#fff;border:1px solid var(--c-n-200);border-radius:8px;
padding:6px 12px;font-size:12px;font-weight:600;color:var(--c-n-700);
cursor:pointer;font-family:var(--ff-ar);transition:all .15s
}
#page-mursala #mursala-tbl-card .pgn-btns button:hover{border-color:var(--c-primary-300);color:var(--c-primary-700);background:#F8FAFC}
#page-mursala #mursala-tbl-card .pgn-btns button.active,
#page-mursala #mursala-tbl-card .pgn-btns button[disabled]+button[disabled]{
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
color:#fff;border-color:transparent
}
/* === Mobile compact rows ===
Hide secondary columns and compress the visible cells so users see
12-15 records without horizontal scroll. The action buttons still work
exactly the same — they're just visually smaller. */
@media(max-width:768px){
/* Hide the entire table toolbar (filters live in the unified strip) */
#page-mursala #mursala-tbl-card .tbl-toolbar{display:none}
/* Card gets a softer border on mobile */
#page-mursala #mursala-tbl-card{border-radius:var(--r-md);margin:0 4px 12px}
/* Hide the totals (tfoot) row on mobile — it renders one cell per
ALL columns including hidden ones, which forces ghost columns and
leaves a wide white area when scrolling. The same totals are still
visible in the .fat-statusbar below the table. */
#page-mursala #mursala-tbl-card tfoot.fat-tfoot,
#page-mursala #mursala-tbl-card tfoot.totals-foot{display:none !important}
/* بطلب المستخدم: إظهار كل الأعمدة على الموبايل (تمرير أفقي) —
أُزيل إخفاء الأعمدة الثانوية. صلاحيات إخفاء الأعمدة تبقى فعّالة. */
/* Compact spacing on the visible columns */
#page-mursala #mursala-tbl-card thead th{padding:8px 6px;font-size:10.5px}
#page-mursala #mursala-body td{padding:8px 6px;font-size:11px}
#page-mursala #mursala-body td[data-col="req_date"]{white-space:nowrap;font-size:10.5px;color:var(--c-n-700);font-weight:600;font-family:var(--ff-num)}
#page-mursala #mursala-body td[data-col="status"] .bdg{font-size:9.5px;padding:3px 6px}
#page-mursala #mursala-body td[data-col="funder"]{font-size:11px;font-weight:700;color:var(--c-primary-900)}
#page-mursala #mursala-body td[data-col="total_price"] .amt{font-size:11.5px}
/* Media cell: drop the upload+delete buttons, keep only the count pill */
#page-mursala #mursala-body td[data-col="media"] button,
#page-mursala #mursala-body td[data-col="media"] input[type="file"]{display:none}
#page-mursala #mursala-body td[data-col="media"]{padding:8px 4px}
/* Action buttons compact */
#page-mursala #mursala-body td:last-child{padding:8px 4px;text-align:left;white-space:nowrap}
#page-mursala #mursala-body td:last-child > button,
#page-mursala #mursala-body td:last-child .act-btn{width:26px;height:26px;font-size:11px}
}
/* FAB — floating add button on mobile (mursala/tawtheeq pages) */
.mur-fab,.tw-fab{display:none}
@media(max-width:768px){
.page#page-mursala .mur-fab,
.page#page-tawtheeq .tw-fab{
display:inline-flex;align-items:center;justify-content:center;
position:fixed;
bottom:calc(20px + env(safe-area-inset-bottom, 0px));
left:18px;z-index:50;
width:56px;height:56px;border-radius:28px;border:0;
color:#fff;font-size:24px;cursor:pointer;
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
box-shadow:0 8px 22px rgba(54,88,204,.4);
transition:transform .15s ease
}
.page#page-mursala .mur-fab:active,
.page#page-tawtheeq .tw-fab:active{transform:scale(.95)}
}
/* === Financial Monitor · Health Score Card === */
.health-card{position:relative;border-radius:var(--r-2xl);padding:32px 36px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#04827E 60%,#06B0AA 100%);box-shadow:0 16px 40px -10px rgba(11,24,57,.4)}
.hc-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hc-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.hc-orb-1{width:380px;height:380px;background:radial-gradient(circle,rgba(16,185,129,.6),transparent 70%);top:-140px;right:-100px}
.hc-orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(54,88,204,.5),transparent 70%);bottom:-120px;left:-80px}
.hc-content{position:relative;display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.hc-gauge{position:relative;width:200px;height:120px;flex-shrink:0}
.hc-svg{width:100%;height:100%;display:block}
.hc-gauge-center{position:absolute;left:50%;top:65%;transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;align-items:center}
.hc-score{font-size:46px;font-weight:700;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.hc-score-max{font-size:11px;color:rgba(184,199,255,.85);letter-spacing:.06em;font-family:var(--ff-en)}
.hc-info{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
.hc-status{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgba(16,185,129,.25);border:1px solid rgba(16,185,129,.4);font-size:11px;font-weight:700;color:#fff;font-family:var(--ff-ar);align-self:flex-start}
.hc-status-dot{width:7px;height:7px;border-radius:50%;background:#86efac;box-shadow:0 0 10px #86efac;animation:hc-pulse 2s ease-in-out infinite}
@keyframes hc-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.hc-info h3{font-size:22px;font-weight:700;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;margin:0}
.hc-info p{font-size:12.5px;color:rgba(184,199,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.hc-indicators{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.hc-ind{display:flex;flex-direction:column;gap:2px}
.hc-ind-label{font-size:9.5px;letter-spacing:.06em;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.hc-ind-val{font-size:14px;font-weight:700;color:#fff;font-family:var(--ff-ar)}
.hc-ind-val.accent{color:#86efac}
/* === Severity-based alert cards === */
.fm-alerts-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.alert-card{background:#fff;border:1.5px solid var(--c-n-200);border-radius:var(--r-lg);padding:16px;display:flex;align-items:flex-start;gap:12px;box-shadow:var(--sh-sm);transition:all .2s ease}
.alert-card:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
.alert-card[data-sev="high"]{border-color:#FCA5A5;background:linear-gradient(180deg,#FFFFFF,#FEF2F2)}
.alert-card[data-sev="med"]{border-color:#FCD34D;background:linear-gradient(180deg,#FFFFFF,#FFFBEB)}
.alert-card[data-sev="low"]{border-color:#93C5FD;background:linear-gradient(180deg,#FFFFFF,#EFF6FF)}
.alert-card[data-sev="ok"]{border-color:#86EFAC;background:linear-gradient(180deg,#FFFFFF,#ECFDF5)}
.alert-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.alert-card[data-sev="high"] .alert-icon{background:#FEF2F2;color:#B91C1C}
.alert-card[data-sev="med"] .alert-icon{background:#FFFBEB;color:#B45309}
.alert-card[data-sev="low"] .alert-icon{background:#EFF6FF;color:#1D4ED8}
.alert-card[data-sev="ok"] .alert-icon{background:#ECFDF5;color:#047857}
.alert-content{flex:1;min-width:0}
.alert-title{font-size:13.5px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);margin-bottom:4px}
.alert-desc{font-size:11.5px;color:var(--c-n-500);font-family:var(--ff-ar);line-height:1.5;margin-bottom:8px}
.alert-action{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600;font-family:var(--ff-ar);text-decoration:none}
.alert-card[data-sev="high"] .alert-action{background:#FEF2F2;color:#B91C1C}
.alert-card[data-sev="med"] .alert-action{background:#FFFBEB;color:#B45309}
.alert-card[data-sev="low"] .alert-action{background:#EFF6FF;color:#1D4ED8}
.alert-card[data-sev="ok"] .alert-action{background:#ECFDF5;color:#047857}
/* Health card responsive */
@media(max-width:1024px){
.health-card{padding:26px 28px}
.hc-info h3{font-size:20px}
}
@media(max-width:768px){
.health-card{padding:22px;border-radius:var(--r-xl)}
.hc-content{flex-direction:column;align-items:center;text-align:center;gap:20px}
.hc-info{align-items:center;text-align:center}
.hc-info h3{font-size:18px}
.hc-indicators{justify-content:center}
.hc-gauge{width:180px;height:108px}
.hc-score{font-size:40px}
}
/* === Kanban board (mursala / sent projects) === */
.kanban-board{display:none;grid-template-columns:repeat(4,minmax(240px,1fr));gap:12px;margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.kanban-board.active{display:grid}
.kanban-col{background:var(--c-n-50);border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:10px;min-height:200px;border:1px solid var(--c-n-200)}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px}
.kanban-col-title{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar)}
.kanban-col-dot{width:9px;height:9px;border-radius:50%;background:var(--c-primary-500);flex-shrink:0}
.kanban-col[data-col="pending"] .kanban-col-dot{background:var(--c-warning-500)}
.kanban-col[data-col="received"] .kanban-col-dot{background:var(--c-primary-500)}
.kanban-col[data-col="executing"] .kanban-col-dot{background:var(--c-accent-500)}
.kanban-col[data-col="done"] .kanban-col-dot{background:var(--c-success-500)}
.kanban-col[data-col="other"] .kanban-col-dot{background:var(--c-n-400)}
.kanban-col-count{font-size:11px;font-weight:700;color:var(--c-n-500);background:#fff;padding:2px 8px;border-radius:999px;border:1px solid var(--c-n-200);font-family:var(--ff-num)}
.kb-card{background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-md);padding:12px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all .15s ease;box-shadow:var(--sh-sm)}
.kb-card:hover{transform:translateY(-1px);box-shadow:var(--sh-md);border-color:var(--c-primary-200)}
.kb-title{font-size:12.5px;font-weight:600;color:var(--c-primary-900);font-family:var(--ff-ar);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-meta{font-size:10.5px;color:var(--c-n-500);font-family:var(--ff-ar);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.kb-pill{display:inline-flex;align-items:center;gap:3px;background:var(--c-n-50);border:1px solid var(--c-n-100);border-radius:6px;padding:2px 7px;font-size:10.5px;color:var(--c-n-700);white-space:nowrap;line-height:1.4}
.kb-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:8px;border-top:1px solid var(--c-n-100)}
.kb-foot .kb-amount{font-size:12.5px;font-weight:700;color:var(--c-success-700);font-family:var(--ff-num);font-variant-numeric:tabular-nums}
.kb-foot .kb-amount-hidden{font-size:11px;color:var(--c-n-300);font-family:var(--ff-ar)}
.kb-foot .kb-date{font-size:10px;color:var(--c-n-400);font-family:var(--ff-ar)}
.kb-empty{font-size:12px;color:var(--c-n-400);text-align:center;padding:18px 8px;font-family:var(--ff-ar);font-style:italic}
html[data-theme="dark"] .kb-pill{background:#1E293B;border-color:#334155;color:#CBD5E1}
/* === Mursala Stage 2: modern Kanban cards + 6-card column scroll === */
.kb-col-modern{padding:0;background:transparent;border:0;min-height:auto;gap:0;overflow:hidden}
.kb-col-modern .kanban-col-head{
background:#F8FAFC;border:1px solid var(--c-n-200);border-bottom:0;
border-radius:14px 14px 0 0;padding:12px 14px;margin:0;
position:sticky;top:0;z-index:2
}
.kb-col-modern[data-col="pending"] .kanban-col-head{background:#FFFBEB;border-color:rgba(245,158,11,.25)}
.kb-col-modern[data-col="received"] .kanban-col-head{background:#F0FDFA;border-color:rgba(6,176,170,.25)}
.kb-col-modern[data-col="executing"] .kanban-col-head{background:#EFF6FF;border-color:rgba(54,88,204,.25)}
.kb-col-modern[data-col="done"] .kanban-col-head{background:#F0FDF4;border-color:rgba(16,185,129,.25)}
.kb-col-modern[data-col="other"] .kanban-col-head{background:var(--c-n-50);border-color:var(--c-n-200)}
.kb-col-modern .kanban-col-count{
background:rgba(15,23,57,.06);color:var(--c-primary-900);
border:0;padding:3px 10px;font-size:11px;font-weight:800
}
.kb-col-modern[data-col="pending"] .kanban-col-count{background:rgba(245,158,11,.18);color:#B45309}
.kb-col-modern[data-col="received"] .kanban-col-count{background:rgba(6,176,170,.18);color:#0F766E}
.kb-col-modern[data-col="executing"] .kanban-col-count{background:rgba(54,88,204,.18);color:var(--c-primary-700)}
.kb-col-modern[data-col="done"] .kanban-col-count{background:rgba(16,185,129,.18);color:#15803D}
/* Scrollable list area: 6 cards visible (~880px), then internal scroll */
.kb-col-modern .kb-list{
background:#fff;border:1px solid var(--c-n-200);border-top:0;
border-radius:0 0 14px 14px;
padding:10px;display:flex;flex-direction:column;gap:8px;
max-height:880px;overflow-y:auto;overflow-x:hidden;
scrollbar-width:thin;scrollbar-color:var(--c-n-300) transparent
}
.kb-col-modern[data-col="pending"] .kb-list{border-color:rgba(245,158,11,.18)}
.kb-col-modern[data-col="received"] .kb-list{border-color:rgba(6,176,170,.18)}
.kb-col-modern[data-col="executing"] .kb-list{border-color:rgba(54,88,204,.18)}
.kb-col-modern[data-col="done"] .kb-list{border-color:rgba(16,185,129,.18)}
.kb-col-modern .kb-list::-webkit-scrollbar{width:6px}
.kb-col-modern .kb-list::-webkit-scrollbar-track{background:transparent}
.kb-col-modern .kb-list::-webkit-scrollbar-thumb{background:var(--c-n-300);border-radius:3px}
.kb-col-modern .kb-list::-webkit-scrollbar-thumb:hover{background:var(--c-n-400)}
/* Modern card */
.kb-card-modern{
display:flex;flex-direction:column;gap:7px;
background:#fff;border:1px solid var(--c-n-200);border-radius:12px;
padding:11px 12px;box-shadow:0 1px 2px rgba(11,24,57,.04);
transition:all .15s ease;cursor:pointer
}
.kb-card-modern:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(11,24,57,.10);border-color:var(--c-primary-200)}
.kb-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kb-type-pill,.kb-status-pill{
display:inline-flex;align-items:center;padding:3px 8px;
border-radius:5px;font-size:10px;font-weight:800;
font-family:var(--ff-ar);line-height:1.4;white-space:nowrap;
background:var(--c-n-100);color:var(--c-n-700)
}
.kb-col-modern[data-col="pending"] .kb-type-pill,
.kb-col-modern[data-col="pending"] .kb-status-pill{background:#FFFBEB;color:#B45309}
.kb-col-modern[data-col="received"] .kb-type-pill,
.kb-col-modern[data-col="received"] .kb-status-pill{background:#F0FDFA;color:#0F766E}
.kb-col-modern[data-col="executing"] .kb-type-pill,
.kb-col-modern[data-col="executing"] .kb-status-pill{background:#EFF6FF;color:var(--c-primary-700)}
.kb-col-modern[data-col="done"] .kb-type-pill,
.kb-col-modern[data-col="done"] .kb-status-pill{background:#F0FDF4;color:#15803D}
.kb-card-modern .kb-amount{
font-size:13px;font-weight:800;color:#10B981;
font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em
}
.kb-card-modern .kb-amount-hidden{font-size:11px;color:var(--c-n-300)}
.kb-card-title{
font-size:13.5px;font-weight:700;color:var(--c-primary-900);
font-family:var(--ff-ar);line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.kb-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:11px;color:var(--c-n-600);font-family:var(--ff-ar)}
.kb-meta-row .kb-meta-ic{font-size:11px;line-height:1}
.kb-meta-row .kb-meta-t{color:var(--c-n-700)}
.kb-card-foot{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding-top:7px;border-top:1px dashed var(--c-n-100)
}
.kb-foot-left{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--c-n-500)}
.kb-foot-chip{display:inline-flex;align-items:center;gap:3px;font-family:var(--ff-ar)}
.kb-foot-chip span:first-child{font-size:10px}
.kb-foot-chip span:last-child{font-family:var(--ff-num)}
.kb-media-pill{
display:inline-flex;align-items:center;gap:3px;
background:#EFF6FF;color:var(--c-primary-700);
padding:2px 6px;border-radius:5px;font-size:10px;font-weight:800;
font-family:var(--ff-num)
}
.kb-media-pill span:first-child{font-size:9px}
/* Empty state */
.kb-col-modern .kb-empty{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:32px 12px;color:var(--c-n-400);font-style:normal
}
.kb-empty-ic{font-size:28px;opacity:.6}
.kb-empty-t{font-size:11.5px;font-family:var(--ff-ar)}
/* Scroll hint at column bottom */
.kb-scroll-hint{
position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;
margin:4px -10px -10px -10px;padding:8px 12px;
background:linear-gradient(to top,#fff 60%,rgba(255,255,255,.6) 100%);
font-size:11px;font-weight:700;color:var(--c-n-600);font-family:var(--ff-ar);
border-top:1px solid var(--c-n-100);pointer-events:none
}
.kb-scroll-arrow{display:inline-block;animation:kb-bounce 1.6s ease-in-out infinite;color:var(--c-primary-500)}
@keyframes kb-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@media(max-width:900px){
.kb-col-modern .kb-list{max-height:600px;padding:8px}
.kb-card-modern{padding:10px}
.kb-card-title{font-size:12.5px}
}
.page#page-mursala[data-view="kanban"] #mursala-tbl-card,
.page#page-mursala[data-view="kanban"] #mursala-timeline{display:none}
.page#page-mursala[data-view="table"] #mursala-kanban,
.page#page-mursala[data-view="table"] #mursala-timeline{display:none !important}
.page#page-mursala[data-view="timeline"] #mursala-kanban,
.page#page-mursala[data-view="timeline"] #mursala-tbl-card{display:none !important}
.page#page-mursala[data-view="timeline"] #mursala-timeline{display:block}
@media(max-width:1024px){
.kanban-board{grid-template-columns:repeat(4,minmax(220px,1fr))}
}
@media(max-width:768px){
.kanban-board{grid-template-columns:repeat(4,260px);overflow-x:auto;padding-bottom:8px}
.kanban-col{min-height:160px}
.view-toggle .view-btn span{font-size:13px}
}
@media(max-width:480px){
.kanban-board{grid-template-columns:repeat(4,240px);gap:10px}
}
/* === Generic Hero pattern (reusable across simple pages) === */
.generic-hero{position:relative;border-radius:var(--r-2xl);padding:24px 30px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#152663 50%,#1B3387 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.generic-hero[data-tone="indigo-teal"]{background:linear-gradient(135deg,#1B3387 0%,#3658CC 60%,#06B0AA 100%)}
.generic-hero[data-tone="dark-violet"]{background:linear-gradient(135deg,#0B1839 0%,#152663 60%,#5B21B6 100%)}
.generic-hero[data-tone="warm"]{background:linear-gradient(135deg,#0B1839 0%,#1B3387 50%,#F59E0B 100%)}
.gh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gh-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;width:340px;height:340px;background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%);top:-110px;right:-90px}
.gh-orb-2{top:auto;right:auto;bottom:-100px;left:-70px;width:280px;height:280px;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 70%)}
.gh-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.gh-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.gh-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.gh-text h2{font-size:22px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.gh-text p{font-size:12.5px;color:rgba(255,255,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.gh-stat{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);min-width:170px}
.gh-stat-icon{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;line-height:1}
.gh-stat[data-tone="success"] .gh-stat-icon{background:rgba(16,185,129,.4);color:#86efac;font-size:14px}
.gh-stat > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.gh-stat-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.85);font-family:var(--ff-ar)}
.gh-stat-val{font-size:20px;font-weight:700;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.gh-stat-grid{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:768px){
.generic-hero{padding:20px;border-radius:var(--r-xl)}
.gh-content{flex-direction:column;align-items:stretch;gap:14px}
.gh-text h2{font-size:18px}
.gh-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.gh-stat{min-width:0;padding:11px 14px}
.gh-stat-val{font-size:16px}
}
/* === Users Hero === */
.users-hero{position:relative;border-radius:var(--r-2xl);padding:26px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#152663 50%,#3658CC 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.uh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.uh-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.uh-orb-1{width:340px;height:340px;background:radial-gradient(circle,rgba(6,176,170,.5),transparent 70%);top:-110px;right:-90px}
.uh-orb-2{width:280px;height:280px;background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%);bottom:-100px;left:-70px}
.uh-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.uh-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.uh-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(184,199,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.uh-text h2{font-size:22px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.uh-text p{font-size:12.5px;color:rgba(184,199,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.uh-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.uh-stat{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);min-width:140px}
.uh-stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;flex-shrink:0}
.uh-stat[data-tone="indigo"] .uh-stat-icon{background:rgba(54,88,204,.4)}
.uh-stat[data-tone="success"] .uh-stat-icon{background:rgba(16,185,129,.4);color:#86efac;font-size:14px}
.uh-stat > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.uh-stat-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.uh-stat-val{font-size:18px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;line-height:1.1}
.uh-cta{appearance:none;background:#fff;border:0;color:var(--c-primary-700);font-size:13px;font-weight:700;padding:11px 18px;border-radius:12px;cursor:pointer;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px;box-shadow:0 6px 16px -4px rgba(0,0,0,.25);transition:all .2s ease}
.uh-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px -4px rgba(0,0,0,.3)}
.uh-cta span{font-size:14px;line-height:1}
@media(max-width:768px){
.users-hero{padding:20px;border-radius:var(--r-xl)}
.uh-content{flex-direction:column;align-items:stretch;gap:14px}
.uh-text h2{font-size:18px}
.uh-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.uh-cta{grid-column:1/-1;justify-content:center}
}
/* === Items Analytics Hero === */
.ia-hero{position:relative;border-radius:var(--r-2xl);padding:26px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#04827E 60%,#10B981 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.ia-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ia-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.ia-orb-1{width:340px;height:340px;background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%);top:-110px;right:-90px}
.ia-orb-2{width:280px;height:280px;background:radial-gradient(circle,rgba(54,88,204,.45),transparent 70%);bottom:-100px;left:-70px}
.ia-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ia-text{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.ia-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.ia-text h2{font-size:22px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.ia-text p{font-size:12.5px;color:rgba(255,255,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.ia-flow{display:flex;align-items:center;gap:10px;padding:12px 18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;backdrop-filter:blur(8px)}
.ia-flow-item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px}
.ia-flow-icon{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.ia-flow-item[data-tone="indigo"] .ia-flow-icon{background:rgba(54,88,204,.4)}
.ia-flow-item[data-tone="teal"] .ia-flow-icon{background:rgba(6,176,170,.4)}
.ia-flow-item[data-tone="success"] .ia-flow-icon{background:rgba(16,185,129,.4)}
.ia-flow-label{font-size:11px;font-weight:600;color:#fff;font-family:var(--ff-ar)}
.ia-flow-arrow{font-size:18px;color:rgba(255,255,255,.6);font-weight:700}
@media(max-width:768px){
.ia-hero{padding:20px;border-radius:var(--r-xl)}
.ia-content{flex-direction:column;align-items:stretch;gap:14px}
.ia-text h2{font-size:18px}
.ia-flow{justify-content:center;width:100%}
}
/* === Lists Hero === */
.lists-hero{position:relative;border-radius:var(--r-2xl);padding:26px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#1B3387 0%,#3658CC 60%,#06B0AA 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.lh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lh-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;width:340px;height:340px;background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%);top:-120px;right:-90px}
.lh-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lh-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.lh-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.lh-text h2{font-size:22px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.lh-text p{font-size:12px;color:rgba(255,255,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.6}
.lh-stat{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.lh-stat-icon{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;line-height:1}
.lh-stat > div{display:flex;flex-direction:column;gap:2px}
.lh-stat-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.85);font-family:var(--ff-ar)}
.lh-stat-val{font-size:24px;font-weight:700;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
@media(max-width:768px){
.lists-hero{padding:20px;border-radius:var(--r-xl)}
.lh-content{flex-direction:column;align-items:stretch;gap:14px}
.lh-text h2{font-size:18px}
.lh-stat{justify-content:flex-start}
}
/* === Lists Modal helpers (γ Option) === */
.lists-mdl-overlay{
position:fixed;inset:0;background:rgba(11,24,57,.55);
display:none;align-items:center;justify-content:center;z-index:600;
padding:20px;overflow-y:auto;backdrop-filter:blur(4px)
}
.lists-mdl-overlay.is-open{display:flex}
.lists-mdl{
background:#fff;border-radius:16px;width:100%;max-width:480px;
box-shadow:0 20px 60px rgba(11,24,57,.30);
animation:listsMdlIn .25s ease;overflow:hidden;font-family:var(--ff-ar)
}
@keyframes listsMdlIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.lists-mdl-head{
padding:18px 22px;color:#fff;
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
display:flex;align-items:center;gap:14px;position:relative;overflow:hidden
}
.lists-mdl-head.is-danger{background:linear-gradient(135deg,#DC2626,#991B1B)}
.lists-mdl-head::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.lists-mdl-head-icon{
width:46px;height:46px;flex-shrink:0;border-radius:11px;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.30);
display:inline-flex;align-items:center;justify-content:center;font-size:22px
}
.lists-mdl-head-titles{flex:1;min-width:0}
.lists-mdl-title{font-size:16px;font-weight:800;color:#fff;line-height:1.2;margin:0}
.lists-mdl-sub{font-size:11.5px;color:rgba(255,255,255,.86);margin-top:3px;font-family:var(--ff-ar)}
.lists-mdl-close{
appearance:none;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
color:#fff;width:32px;height:32px;border-radius:8px;font-size:16px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
}
.lists-mdl-close:hover{background:rgba(255,255,255,.28)}
.lists-mdl-body{padding:20px 22px}
.lists-mdl-body p{font-size:13px;color:var(--c-n-700);line-height:1.6;margin:0 0 10px;font-family:var(--ff-ar)}
.lists-mdl-body p strong{color:var(--c-primary-900);font-weight:800}
.lists-mdl-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lists-mdl-field label{font-size:11.5px;font-weight:700;color:var(--c-n-700);font-family:var(--ff-ar)}
.lists-mdl-input{
height:40px;padding:0 12px;
background:#fff;border:1.5px solid var(--c-n-200);border-radius:9px;
font-size:13.5px;font-family:var(--ff-ar);color:var(--c-n-900);outline:none
}
.lists-mdl-input:focus{border-color:var(--c-primary-400);box-shadow:0 0 0 3px var(--c-primary-100)}
.lists-mdl-icon-row{display:flex;align-items:center;gap:10px}
.lists-mdl-icon-row .lists-mdl-icon-preview{
width:48px;height:48px;flex-shrink:0;border-radius:12px;
background:var(--c-primary-50);border:1.5px solid var(--c-primary-100);
display:inline-flex;align-items:center;justify-content:center;font-size:26px;line-height:1
}
.lists-mdl-icon-row .lists-mdl-input{flex:1}
.lists-mdl-emoji-grid{
display:grid;grid-template-columns:repeat(10,1fr);gap:4px;
background:var(--c-n-50);border:1px solid var(--c-n-200);border-radius:9px;
padding:6px;margin-top:4px;max-height:140px;overflow-y:auto
}
.lists-mdl-emoji-btn{
appearance:none;background:transparent;border:0;cursor:pointer;
font-size:18px;padding:6px;border-radius:6px;line-height:1;
transition:all .15s ease
}
.lists-mdl-emoji-btn:hover{background:#fff;transform:scale(1.15)}
.lists-mdl-emoji-btn.is-active{background:var(--c-primary-600);color:#fff;transform:scale(1.05)}
.lists-mdl-foot{
display:flex;align-items:center;justify-content:flex-end;gap:8px;
padding:14px 22px;border-top:1px solid var(--c-n-100);background:var(--c-n-50)
}
.lists-mdl-btn{
appearance:none;border:0;cursor:pointer;height:38px;padding:0 18px;
border-radius:9px;font-family:var(--ff-ar);font-size:12.5px;font-weight:800;
display:inline-flex;align-items:center;gap:6px;transition:all .15s ease
}
.lists-mdl-btn-cancel{
background:#fff;border:1px solid var(--c-n-200);color:var(--c-n-700)
}
.lists-mdl-btn-cancel:hover{background:var(--c-n-100);border-color:var(--c-n-300)}
.lists-mdl-btn-primary{
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
color:#fff
}
.lists-mdl-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(54,88,204,.30)}
.lists-mdl-btn-danger{
background:linear-gradient(135deg,#DC2626,#991B1B);
color:#fff
}
.lists-mdl-btn-danger:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(220,38,38,.30)}
/* === Lists Master-Detail layout (γ Option) === */
.lists-md{
display:grid;grid-template-columns:420px 1fr;gap:14px;
margin-bottom:18px;align-items:start
}
.lists-md-tree{
background:#fff;border:1px solid var(--c-n-200);border-radius:14px;
box-shadow:0 2px 8px rgba(11,24,57,.04);
position:sticky;top:84px;
max-height:calc(100vh - 100px);
display:flex;flex-direction:column
}
.lists-md-tree-head{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;border-bottom:1px solid var(--c-n-100)
}
.lists-md-tree-head h3{margin:0;font-size:13px;font-weight:800;color:var(--c-primary-900);font-family:var(--ff-ar)}
.lists-md-tree-head .ltc-count{font-size:11px;font-weight:700;color:var(--c-n-500);background:var(--c-n-50);padding:3px 9px;border-radius:999px;font-family:var(--ff-num)}
.lists-md-tree-search{
margin:10px 12px 0;
padding:0 12px;height:36px;
background:var(--c-n-50);border:1px solid var(--c-n-200);
border-radius:9px;font-size:12.5px;font-family:var(--ff-ar);
color:var(--c-n-800);outline:none
}
.lists-md-tree-search:focus{background:#fff;border-color:var(--c-primary-400);box-shadow:0 0 0 3px var(--c-primary-100)}
.lists-md-tree-body{flex:1;overflow-y:auto;padding:8px 12px 14px}
.lists-tree-group{margin-bottom:6px}
.lists-tree-group-head{
display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
cursor:pointer;font-family:var(--ff-ar);transition:background .15s ease;user-select:none
}
.lists-tree-group-head:hover{background:var(--c-n-50)}
.lists-tree-group.is-open .lists-tree-group-head{background:var(--c-n-50)}
.lists-tree-group-arr{font-size:9px;color:var(--c-n-400);width:12px;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease}
.lists-tree-group.is-open .lists-tree-group-arr{transform:rotate(90deg)}
.lists-tree-group-icon{font-size:16px;width:24px;text-align:center}
.lists-tree-group-name{flex:1;font-size:12.5px;font-weight:700;color:var(--c-n-800);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lists-tree-group-count{font-size:10.5px;font-weight:700;color:var(--c-n-500);font-family:var(--ff-num)}
.lists-tree-children{
max-height:0;overflow:hidden;
transition:max-height .25s ease
}
.lists-tree-group.is-open .lists-tree-children{max-height:1000px;padding:4px 0 6px}
.lists-tree-item{
display:flex;align-items:center;gap:10px;padding:9px 12px;margin:0 16px 2px 4px;
border-radius:8px;cursor:pointer;font-family:var(--ff-ar);
color:var(--c-n-700);transition:all .15s ease;user-select:none
}
.lists-tree-item:hover{background:var(--c-n-50);color:var(--c-primary-700)}
.lists-tree-item-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0}
.lists-tree-item-name{flex:1;font-size:12px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lists-tree-item-count{font-size:10px;font-weight:700;color:var(--c-n-500);background:var(--c-n-100);padding:2px 7px;border-radius:8px;font-family:var(--ff-num);flex-shrink:0}
.lists-tree-item.is-active{
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
color:#fff;box-shadow:0 2px 8px rgba(54,88,204,.30)
}
.lists-tree-item.is-active .lists-tree-item-count{background:rgba(255,255,255,.30);color:#fff}
/* Detail panel */
.lists-md-detail{
background:#fff;border:1px solid var(--c-n-200);border-radius:14px;
box-shadow:0 2px 8px rgba(11,24,57,.04);overflow:hidden;
min-height:600px;display:flex;flex-direction:column
}
.lists-md-detail-empty{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;padding:48px 24px;text-align:center;color:var(--c-n-500);font-family:var(--ff-ar)
}
.lists-md-detail-empty-ic{font-size:48px;opacity:.6;margin-bottom:6px}
.lists-md-detail-empty-t{font-size:16px;font-weight:700;color:var(--c-n-700)}
.lists-md-detail-empty-s{font-size:12px;color:var(--c-n-500);max-width:280px}
.lists-detail-head{
position:relative;padding:24px 28px;color:#fff;
background:linear-gradient(135deg,var(--c-primary-600) 0%,var(--c-accent-500) 100%);
overflow:hidden
}
.lists-detail-head::before{
content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;
background:rgba(255,255,255,.10);pointer-events:none
}
.lists-detail-head-row{display:flex;align-items:center;gap:18px;position:relative;z-index:1}
.lists-detail-icon{
width:64px;height:64px;border-radius:14px;flex-shrink:0;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.30);
display:inline-flex;align-items:center;justify-content:center;
font-size:30px;line-height:1
}
.lists-detail-titles{flex:1;min-width:0}
.lists-detail-name{font-size:24px;font-weight:800;color:#fff;font-family:var(--ff-ar);letter-spacing:-.01em;line-height:1.2;margin:0}
.lists-detail-sub{font-size:12.5px;color:rgba(255,255,255,.86);font-family:var(--ff-ar);margin-top:6px}
.lists-detail-actions{display:flex;gap:8px;margin-top:16px;position:relative;z-index:1}
.lists-detail-act{
appearance:none;border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.18);
color:#fff;border-radius:9px;padding:8px 14px;
font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff-ar);
display:inline-flex;align-items:center;gap:5px;transition:all .15s ease
}
.lists-detail-act:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
.lists-detail-act.is-danger{background:rgba(244,63,94,.30);border-color:rgba(244,63,94,.45)}
.lists-detail-act.is-danger:hover{background:rgba(244,63,94,.45)}
.lists-detail-tabs{
display:flex;align-items:center;gap:0;border-bottom:1px solid var(--c-n-100);
padding:0 24px;background:#fff
}
.lists-detail-tab{
appearance:none;background:transparent;border:0;cursor:pointer;
padding:14px 16px;font-family:var(--ff-ar);font-size:13px;font-weight:600;
color:var(--c-n-500);position:relative;transition:color .15s ease
}
.lists-detail-tab:hover{color:var(--c-primary-700)}
.lists-detail-tab.is-active{color:var(--c-primary-700);font-weight:800}
.lists-detail-tab.is-active::after{
content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:2px 2px 0 0;
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500))
}
.lists-detail-body{padding:18px 24px 24px;overflow-y:auto}
.lists-add-row{
display:flex;gap:8px;align-items:center;
background:var(--c-primary-50);border:1px solid var(--c-primary-100);
border-radius:10px;padding:10px 12px;margin-bottom:14px
}
.lists-add-row .lists-add-input{
flex:1;height:32px;padding:0 12px;
background:#fff;border:1px solid var(--c-n-200);border-radius:8px;
font-size:12.5px;font-family:var(--ff-ar);color:var(--c-n-800);outline:none
}
.lists-add-row .lists-add-input:focus{border-color:var(--c-primary-400);box-shadow:0 0 0 3px var(--c-primary-100)}
.lists-add-row .lists-add-btn{
appearance:none;border:0;cursor:pointer;height:32px;padding:0 14px;border-radius:8px;
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));color:#fff;
font-family:var(--ff-ar);font-size:12px;font-weight:800
}
.lists-add-row .lists-add-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(54,88,204,.25)}
.lists-items-list{display:flex;flex-direction:column;gap:6px}
.lists-item-row{
display:flex;align-items:center;gap:10px;padding:10px 12px;
background:#fff;border:1px solid var(--c-n-100);border-radius:10px;
font-family:var(--ff-ar);transition:all .15s ease
}
.lists-item-row:hover{border-color:var(--c-primary-200,#B8C7FF);box-shadow:0 2px 6px rgba(11,24,57,.05)}
.lists-item-row .lir-drag{font-size:13px;color:var(--c-n-300);cursor:grab;padding:0 2px;flex-shrink:0;letter-spacing:-1px}
.lists-item-row .lir-num{
font-size:11px;font-weight:800;color:var(--c-n-600);
background:var(--c-n-100);border-radius:6px;padding:3px 7px;min-width:26px;text-align:center;
font-family:var(--ff-num);flex-shrink:0
}
.lists-item-row .lir-text{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--c-primary-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lists-item-row .lir-actions{display:flex;gap:2px;flex-shrink:0}
.lists-item-row .lir-act{
appearance:none;background:transparent;border:0;cursor:pointer;
padding:6px;border-radius:6px;font-size:13px;color:var(--c-n-400);
transition:all .15s ease
}
.lists-item-row .lir-act:hover{background:var(--c-n-50);color:var(--c-primary-700)}
.lists-item-row .lir-act.lir-del:hover{background:var(--c-danger-50);color:var(--c-danger-500)}
.lists-empty-block{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:8px;padding:32px 20px;text-align:center;color:var(--c-n-400);
background:var(--c-n-50);border:1px dashed var(--c-n-200);border-radius:10px;font-family:var(--ff-ar)
}
.lists-empty-ic{font-size:32px;opacity:.5}
.lists-empty-t{font-size:13px;font-weight:700;color:var(--c-n-600)}
.lists-empty-s{font-size:11px;color:var(--c-n-500)}
/* Mobile-only back button shown in detail when drilled-down */
.lists-md-back{display:none}
/* FAB */
.lists-fab{display:none}
/* Mobile drill-down */
@media(max-width:900px){
.lists-md{grid-template-columns:1fr;gap:0}
.lists-md-tree{position:static;max-height:none}
.lists-md.detail-open .lists-md-tree{display:none}
.lists-md.detail-open .lists-md-detail{display:flex}
.lists-md:not(.detail-open) .lists-md-detail{display:none}
.lists-md.detail-open .lists-md-back{display:inline-flex}
.lists-md-back{
align-items:center;gap:6px;
appearance:none;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.30);
color:#fff;border-radius:9px;padding:6px 11px;
font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff-ar);
margin-bottom:14px;align-self:flex-start;position:relative;z-index:2
}
.lists-detail-head{padding:18px 20px}
.lists-detail-name{font-size:20px}
.lists-detail-icon{width:54px;height:54px;font-size:26px}
.lists-detail-tabs{padding:0 12px}
.lists-detail-tab{padding:12px 12px;font-size:12px}
.lists-detail-body{padding:14px 16px 18px}
.page#page-lists .lists-fab{
display:inline-flex;align-items:center;justify-content:center;
position:fixed;bottom:24px;left:18px;z-index:50;
width:56px;height:56px;border-radius:28px;border:0;
color:#fff;font-size:24px;cursor:pointer;
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
box-shadow:0 8px 22px rgba(54,88,204,.4);
transition:transform .15s ease
}
.page#page-lists .lists-fab:active{transform:scale(.95)}
}
/* === Admin Hero === */
.admin-hero{position:relative;border-radius:var(--r-2xl);padding:28px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#152663 50%,#1B3387 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.ah-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ah-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.ah-orb-1{width:380px;height:380px;background:radial-gradient(circle,rgba(6,176,170,.5),transparent 70%);top:-130px;right:-100px}
.ah-orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%);bottom:-110px;left:-80px}
.ah-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ah-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.ah-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(184,199,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.ah-text h2{font-size:24px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.ah-text p{font-size:12.5px;color:rgba(184,199,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.ah-quick{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.ah-quick-btn{appearance:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--ff-ar);transition:all .2s ease;backdrop-filter:blur(8px);min-width:140px;text-align:right}
.ah-quick-btn:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.ah-quick-btn > span{font-size:20px;line-height:1;flex-shrink:0}
.ah-quick-btn > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.ah-quick-btn span:first-of-type{font-size:13px;font-weight:700;color:#fff}
.ah-quick-btn small{font-size:10.5px;color:rgba(184,199,255,.85)}
@media(max-width:1024px){
.admin-hero{padding:22px 24px}
.ah-text h2{font-size:20px}
}
@media(max-width:768px){
.admin-hero{padding:20px;border-radius:var(--r-xl)}
.ah-content{flex-direction:column;align-items:stretch;gap:16px}
.ah-text h2{font-size:18px}
.ah-quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%}
.ah-quick-btn{min-width:0;padding:10px 12px;flex-direction:column;text-align:center}
.ah-quick-btn > span{font-size:18px}
.ah-quick-btn span:first-of-type{font-size:11.5px}
.ah-quick-btn small{font-size:9.5px}
}
@media(max-width:480px){
.ah-quick{grid-template-columns:1fr}
.ah-quick-btn{flex-direction:row;text-align:right}
}
/* === Parties Hero === */
.parties-hero{position:relative;border-radius:var(--r-2xl);padding:28px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#1B3387 0%,#3658CC 50%,#06B0AA 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.ph-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ph-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.ph-orb-1{width:380px;height:380px;background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%);top:-130px;right:-100px}
.ph-orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%);bottom:-110px;left:-80px}
.ph-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ph-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.ph-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.8);font-family:var(--ff-ar);text-transform:uppercase}
.ph-text h2{font-size:24px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.ph-text p{font-size:12.5px;color:rgba(255,255,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.ph-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ph-stat{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);min-width:150px}
.ph-stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;line-height:1;font-family:var(--ff-en);color:#fff}
.ph-stat[data-tone="success"] .ph-stat-icon{background:rgba(16,185,129,.4)}
.ph-stat[data-tone="danger"] .ph-stat-icon{background:rgba(239,68,68,.4)}
.ph-stat[data-tone="indigo"] .ph-stat-icon{background:rgba(255,255,255,.2)}
.ph-stat > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ph-stat-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.85);font-family:var(--ff-ar)}
.ph-stat-val{font-size:18px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;color:#fff;white-space:nowrap}
@media(max-width:1024px){
.parties-hero{padding:22px 24px}
.ph-text h2{font-size:20px}
}
@media(max-width:768px){
.parties-hero{padding:20px;border-radius:var(--r-xl)}
.ph-content{flex-direction:column;align-items:stretch;gap:16px}
.ph-text h2{font-size:18px}
.ph-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%}
.ph-stat{min-width:0;padding:10px 12px}
.ph-stat-val{font-size:14px}
.ph-stat-icon{width:30px;height:30px;font-size:14px}
}
@media(max-width:480px){
.ph-stats{grid-template-columns:1fr}
}
/* === Financial Movement Hero === */
.financial-hero{position:relative;border-radius:var(--r-2xl);padding:28px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#152663 50%,#06B0AA 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.fh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fh-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.fh-orb-1{width:380px;height:380px;background:radial-gradient(circle,rgba(16,185,129,.55),transparent 70%);top:-140px;right:-100px}
.fh-orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(239,68,68,.45),transparent 70%);bottom:-120px;left:-80px}
.fh-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.fh-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.fh-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(184,199,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.fh-text h2{font-size:24px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.fh-text p{font-size:12.5px;color:rgba(184,199,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.fh-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fh-stat{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);min-width:170px}
.fh-stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;line-height:1;font-family:var(--ff-en)}
.fh-stat[data-tone="success"] .fh-stat-icon{background:rgba(16,185,129,.35);color:#86efac}
.fh-stat[data-tone="danger"] .fh-stat-icon{background:rgba(239,68,68,.35);color:#fca5a5}
.fh-stat[data-tone="indigo"] .fh-stat-icon{background:rgba(54,88,204,.35);color:#B8C7FF}
.fh-stat-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.fh-stat-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.fh-stat-val{font-size:18px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;color:#fff;white-space:nowrap}
.fh-stat[data-tone="success"] .fh-stat-val{color:#86efac}
.fh-stat[data-tone="danger"] .fh-stat-val{color:#fca5a5}
@media(max-width:1024px){
.financial-hero{padding:22px 24px}
.fh-text h2{font-size:20px}
}
@media(max-width:768px){
.financial-hero{padding:20px;border-radius:var(--r-xl)}
.fh-content{flex-direction:column;align-items:stretch;gap:16px}
.fh-text h2{font-size:18px}
.fh-stats{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
.fh-stat{min-width:0;padding:12px 14px}
.fh-stat-val{font-size:16px}
}
/* === Invoices Hero === */
.invoices-hero{position:relative;border-radius:var(--r-2xl);padding:28px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#1B3387 60%,#2643A8 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.ih-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ih-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.ih-orb-1{width:380px;height:380px;background:radial-gradient(circle,rgba(16,185,129,.55),transparent 70%);top:-140px;right:-100px}
.ih-orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(245,158,11,.45),transparent 70%);bottom:-120px;left:-80px}
.ih-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ih-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.ih-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(184,199,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.ih-text h2{font-size:24px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.ih-text p{font-size:12.5px;color:rgba(184,199,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.ih-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ih-stat{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);min-width:120px}
.ih-stat-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.ih-stat-val{font-size:22px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;color:#fff}
.ih-stat[data-tone="success"] .ih-stat-val{color:#86efac}
.ih-stat[data-tone="indigo"] .ih-stat-val{color:#B8C7FF}
.ih-stat[data-tone="warning"] .ih-stat-val{color:#fcd34d}
/* === Quotes Hero === */
.quotes-hero{position:relative;border-radius:var(--r-2xl);padding:26px 32px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#152663 0%,#3658CC 60%,#06B0AA 100%);box-shadow:0 14px 32px -10px rgba(11,24,57,.4)}
.qh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.qh-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.qh-orb-1{width:340px;height:340px;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%);top:-100px;right:-80px}
.qh-orb-2{width:280px;height:280px;background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%);bottom:-100px;left:-70px}
.qh-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.qh-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.qh-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.qh-text h2{font-size:24px;font-weight:700;margin:0;color:#fff;font-family:var(--ff-ar);letter-spacing:-.015em;line-height:1.25}
.qh-text p{font-size:12.5px;color:rgba(255,255,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.5}
.qh-actions{display:flex;gap:10px}
.qh-cta{appearance:none;background:#fff;border:0;color:var(--c-primary-700);font-size:14px;font-weight:700;padding:12px 22px;border-radius:12px;cursor:pointer;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 20px -4px rgba(0,0,0,.25);transition:all .2s ease}
.qh-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -4px rgba(0,0,0,.3)}
.qh-cta span{font-size:16px;line-height:1}
/* Quote tabs polish */
.quote-tabs{background:#fff;border-radius:var(--r-lg);padding:5px;box-shadow:var(--sh-sm);gap:2px}
.quote-tab{appearance:none;border:0;background:transparent;padding:9px 18px;border-radius:7px;font-size:13px;font-weight:600;color:var(--c-n-500);cursor:pointer;font-family:var(--ff-ar);transition:all .15s ease}
.quote-tab:hover{background:var(--c-n-50);color:var(--c-primary-700)}
.quote-tab.active{background:var(--c-primary-500);color:#fff;box-shadow:var(--sh-glow)}
@media(max-width:1024px){
.invoices-hero,.quotes-hero{padding:22px 24px}
.ih-text h2,.qh-text h2{font-size:20px}
}
@media(max-width:768px){
.invoices-hero,.quotes-hero{padding:20px;border-radius:var(--r-xl)}
.ih-content,.qh-content{flex-direction:column;align-items:stretch;gap:16px}
.ih-text h2,.qh-text h2{font-size:18px}
.ih-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%}
.ih-stat{min-width:0;padding:10px 12px}
.ih-stat-val{font-size:16px}
.qh-cta{justify-content:center;width:100%}
}
@media(max-width:480px){
.ih-stats{grid-template-columns:1fr 1fr}
}
/* === Warehouse: enhanced stock cards (.inv-item polish) === */
.inv-grid .inv-item{display:flex;flex-direction:column;gap:8px;padding:16px 18px}
.inv-item .i-name{font-size:13px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);min-height:0;text-align:right;line-height:1.4}
.inv-item .i-qty{font-size:24px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.inv-item .i-bar{position:relative;height:6px;border-radius:999px;background:var(--c-n-100);overflow:hidden;margin-top:4px}
.inv-item .i-bar > i{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--c-primary-500);transition:width .25s ease}
.inv-item.low .i-bar > i,.inv-item.out .i-bar > i{background:var(--c-danger-500)}
.inv-item.warn .i-bar > i{background:var(--c-warning-500)}
.inv-item.ok .i-bar > i{background:var(--c-success-500)}
.inv-item .i-foot{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--c-n-500);font-family:var(--ff-ar);margin-top:2px}
.inv-item .i-status{display:inline-flex;align-items:center;gap:4px;font-weight:700;padding:2px 8px;border-radius:999px;font-size:10px;font-family:var(--ff-ar)}
.inv-item .i-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.inv-item.low .i-status,.inv-item.out .i-status{color:var(--c-danger-700);background:var(--c-danger-50)}
.inv-item.warn .i-status{color:var(--c-warning-700);background:var(--c-warning-50)}
.inv-item.ok .i-status{color:var(--c-success-700);background:var(--c-success-50)}
/* === Warehouse: critical alert banner === */
.makhzan-alert-banner{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r-lg);background:linear-gradient(180deg,#FFFFFF,#FFFBEB);border:1.5px solid #FCD34D;box-shadow:var(--sh-sm);margin-bottom:14px}
.makhzan-alert-banner.danger{background:linear-gradient(180deg,#FFFFFF,#FEF2F2);border-color:#FCA5A5}
.makhzan-alert-banner .mb-icon{width:44px;height:44px;border-radius:11px;background:var(--c-warning-500);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;font-weight:700}
.makhzan-alert-banner.danger .mb-icon{background:var(--c-danger-500)}
.makhzan-alert-banner .mb-content{flex:1;min-width:0}
.makhzan-alert-banner .mb-title{font-size:14px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);margin-bottom:2px}
.makhzan-alert-banner .mb-sub{font-size:12px;color:var(--c-n-600);font-family:var(--ff-ar);line-height:1.4}
.makhzan-alert-banner .mb-action{padding:8px 14px;border-radius:8px;background:var(--c-warning-700);color:#fff;font-size:12px;font-weight:700;text-decoration:none;font-family:var(--ff-ar);white-space:nowrap;border:0;cursor:pointer}
.makhzan-alert-banner.danger .mb-action{background:var(--c-danger-700)}
.makhzan-alert-banner .mb-action:hover{filter:brightness(.92)}
/* === Time Filter Pills (Day / Week / Month / Year / All) === */
/* When the time-filter wrap is right above another filter bar (.db-filters
or .tbl-toolbar), pull the second bar closer and round only the bottom
corners so the two read as a single connected control panel. */
.time-filter-wrap + .db-filters,
.time-filter-wrap + .tbl-toolbar{margin-top:-6px;border-top-left-radius:0;border-top-right-radius:0}
/* When all date-filter-groups inside .db-filters have been hidden by JS
(because the time-filter handles dates), the bar collapses to just the
remaining controls — search, section, reset. Make it tighter. */
.db-filters .db-filter-group[data-hidden-by-time-filter="1"]{display:none !important}
.db-filters{
display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
background:linear-gradient(135deg,#fff 0%,#fafbff 100%);
border:1px solid var(--c-n-200);
border-radius:14px;padding:18px 22px;
box-shadow:0 4px 20px rgba(15,23,57,.06),0 1px 3px rgba(15,23,57,.04);
margin-bottom:18px;position:relative
}
.db-filters::before{
content:"";position:absolute;top:0;right:0;width:5px;height:100%;
background:linear-gradient(180deg,var(--c-primary-500),var(--c-accent-500));
border-radius:14px 0 0 14px
}
.db-filter-group{display:flex;flex-direction:column;gap:6px;position:relative}
.db-filter-group label{
font-size:10.5px;font-weight:700;color:var(--c-n-500);
text-transform:uppercase;letter-spacing:.05em;
display:flex;align-items:center;gap:5px
}
.db-filter-group .fi,.db-filter-group .fsel{
min-width:150px;height:38px;padding:0 12px;
border:1px solid var(--c-n-200);border-radius:9px;
background:#fff;font-size:13px;color:var(--c-n-800);
transition:all .15s ease;font-family:var(--ff-ar)
}
.db-filter-group .fi:focus,.db-filter-group .fsel:focus{
border-color:var(--c-primary-400);
box-shadow:0 0 0 3px var(--c-primary-100);
outline:none
}
.db-filter-group .fi[type="text"]{padding-right:34px}
.db-filter-group.has-search-icon::after{
content:"🔍";position:absolute;right:10px;bottom:10px;
font-size:12px;opacity:.4;pointer-events:none
}
.db-filter-group.btn-only{align-self:flex-end}
.db-filter-group.btn-only .btn{height:38px;padding:0 18px;border-radius:9px;font-size:13px;font-weight:600}
/* Reset button highlighted */
.db-filters .btn-out{
background:#fff;border:1px solid var(--c-n-300);
color:var(--c-primary-700);transition:all .15s ease
}
.db-filters .btn-out:hover{
border-color:var(--c-primary-400);background:var(--c-primary-50);
transform:translateY(-1px)
}
html[data-theme="dark"] .db-filters{background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);border-color:#334155}
html[data-theme="dark"] .db-filter-group .fi,html[data-theme="dark"] .db-filter-group .fsel{background:#0F172A;color:#E5E7EB;border-color:#334155}
/* === Time Filter v2 — pills + month/year pickers === */
.time-filter-wrap{
display:flex;align-items:center;justify-content:flex-start;
gap:14px;margin-bottom:14px;flex-wrap:wrap;
background:#fff;border:1px solid var(--c-n-200);border-radius:14px;
padding:12px 18px;box-shadow:0 2px 12px rgba(15,23,57,.04)
}
.time-filter-label{
font-size:11px;font-weight:700;color:var(--c-n-600);
font-family:var(--ff-ar);letter-spacing:.04em;
display:inline-flex;align-items:center;gap:6px
}
.time-filter{
display:inline-flex;align-items:center;
background:var(--c-n-100);border-radius:10px;padding:4px;gap:0;
flex-shrink:0;border:1px solid var(--c-n-200)
}
.time-filter button{
appearance:none;background:transparent;border:0;padding:8px 16px;
border-radius:7px;font-size:12.5px;font-weight:600;
color:var(--c-n-600);cursor:pointer;transition:all .15s ease;
font-family:var(--ff-ar);min-width:54px
}
.time-filter button:hover{color:var(--c-primary-700);background:rgba(255,255,255,.6)}
.time-filter button.active{
background:linear-gradient(135deg,var(--c-primary-600),var(--c-accent-500));
color:#fff;box-shadow:0 2px 6px rgba(54,88,204,.25)
}
/* Month / Year specific picker dropdowns sitting beside the pills */
.tf-pickers{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.tf-picker{
display:inline-flex;align-items:center;gap:6px;
background:#fff;border:1px solid var(--c-n-200);border-radius:10px;
padding:4px 6px;height:38px
}
.tf-picker label{
font-size:10.5px;font-weight:700;color:var(--c-n-500);
margin:0 4px 0 6px;letter-spacing:.04em
}
.tf-picker select{
appearance:none;-webkit-appearance:none;
background:transparent;border:0;padding:0 22px 0 8px;
font-size:12.5px;font-weight:600;color:var(--c-primary-800);
cursor:pointer;font-family:var(--ff-ar);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:left 6px center;
outline:none;min-width:90px
}
.tf-picker select:hover{color:var(--c-primary-600)}
.tf-picker select:focus{outline:2px solid var(--c-primary-300);outline-offset:1px;border-radius:6px}
html[data-theme="dark"] .time-filter-wrap{background:#0F172A;border-color:#334155}
html[data-theme="dark"] .time-filter{background:#1E293B;border-color:#334155}
html[data-theme="dark"] .time-filter button{color:#94A3B8}
html[data-theme="dark"] .time-filter button:hover{background:rgba(255,255,255,.06);color:#B8C7FF}
html[data-theme="dark"] .time-filter button.active{background:linear-gradient(135deg,var(--c-primary-500),var(--c-accent-500));color:#fff}
html[data-theme="dark"] .tf-picker{background:#1E293B;border-color:#334155}
html[data-theme="dark"] .tf-picker select{color:#B8C7FF}
html[data-theme="dark"] .tf-picker label{color:#94A3B8}
/* === Ultra-tight # and selection columns === */
.tbl-card th.th-sel,
.tbl-card td.col-sel,
.tbl-card td:has(> input.row-sel){
width:28px !important;min-width:28px !important;max-width:28px !important;
padding:4px !important;text-align:center !important
}
.tbl-card th.col-num,
.tbl-card td.col-num{
width:34px !important;min-width:34px !important;max-width:42px !important;
padding:4px 6px !important;text-align:center !important;
color:var(--c-n-400);font-weight:600;font-size:11px !important;
font-family:var(--ff-num);font-variant-numeric:tabular-nums
}
html[data-theme="dark"] .tbl-card td.col-num{color:#94A3B8}
.tbl-card th.th-sel input[type=checkbox],
.tbl-card td.col-sel input[type=checkbox],
.tbl-card td input.row-sel{transform:scale(.9);margin:0}
/* === Compact Pro · Density-first (Variant 1 — Figma-aligned) ===
Single-line rows, every column visible, hairline borders, tabular nums.
Each row 36px tall, body text 11.5pt, dense Bloomberg-style layout. */
.tbl-stacked table{border-collapse:collapse !important;table-layout:auto !important;width:100% !important}
.tbl-stacked thead th{
border:none !important;
border-bottom:1px solid var(--c-n-200) !important;
background:var(--c-n-50) !important;
padding:8px 10px !important;
font-size:10.5px !important;font-weight:700 !important;
color:var(--c-n-500) !important;letter-spacing:.06em;white-space:nowrap;
text-transform:uppercase;
height:36px;vertical-align:middle
}
.tbl-stacked tbody td{
border:none !important;
border-bottom:1px solid rgba(15,23,42,.06) !important;
height:36px;padding:6px 10px !important;vertical-align:middle;
font-family:var(--ff-ar);background:#fff;font-size:11.5pt !important;
font-variant-numeric:tabular-nums;white-space:nowrap;
color:var(--c-n-800)
}
.tbl-stacked tbody tr:hover td{background:var(--c-primary-50) !important}
.tbl-stacked tbody tr.cs-selected td{background:var(--c-primary-100) !important}
/* Frozen first column (#) — stays in place during horizontal scroll */
.tbl-stacked thead th.col-num,
.tbl-stacked tbody td.col-num{
position:sticky;right:0;z-index:2;background:#fff !important;
box-shadow:-1px 0 0 var(--c-n-100);
text-align:center;color:var(--c-n-400);font-weight:600
}
.tbl-stacked thead th.col-num{background:var(--c-n-50) !important}
.tbl-stacked tbody tr:hover td.col-num{background:var(--c-primary-50) !important}
/* Numeric / amount cells get the green tabular treatment */
.tbl-stacked tbody td.col-amount,
.tbl-stacked tbody td[data-col*="total"],
.tbl-stacked tbody td[data-col*="amount"]{
color:var(--c-success-700);font-weight:700;
font-family:var(--ff-num);font-variant-numeric:tabular-nums
}
.tbl-stacked tbody td[data-col*="dollar"]{
color:var(--c-primary-700);font-family:var(--ff-num);
font-variant-numeric:tabular-nums;direction:ltr;text-align:right
}
/* Dark mode */
html[data-theme="dark"] .tbl-stacked thead th{
border-bottom-color:#334155 !important;background:#1E293B !important;color:#94A3B8 !important
}
html[data-theme="dark"] .tbl-stacked tbody td{
border-bottom-color:rgba(255,255,255,.06) !important;background:#111827 !important;color:#E5E7EB
}
html[data-theme="dark"] .tbl-stacked tbody tr:hover td{background:rgba(54,88,204,.18) !important}
html[data-theme="dark"] .tbl-stacked thead th.col-num,
html[data-theme="dark"] .tbl-stacked tbody td.col-num{background:#111827 !important}
/* Sortable column headers (clickable arrow toggle) */
.cs-sort-toggle{display:inline-block;margin-right:6px;cursor:pointer;opacity:.45;font-size:11px;color:var(--c-n-500);transition:all .15s ease;font-weight:700;user-select:none;vertical-align:middle;line-height:1;padding:2px 4px;border-radius:4px}
.cs-sort-toggle:hover{opacity:1;color:var(--c-primary-600);background:var(--c-n-100)}
.cs-sort-toggle[data-state="asc"],
.cs-sort-toggle[data-state="desc"]{opacity:1;color:var(--c-primary-600);background:var(--c-primary-50)}
html[data-theme="dark"] .cs-sort-toggle{color:#94A3B8}
html[data-theme="dark"] .cs-sort-toggle:hover{color:#B8C7FF;background:#1E293B}
html[data-theme="dark"] .cs-sort-toggle[data-state="asc"],
html[data-theme="dark"] .cs-sort-toggle[data-state="desc"]{color:#B8C7FF;background:rgba(54,88,204,.25)}
/* Two-line stack inside a cell */
.cs{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.3}
.cs strong{font-size:13.5px;font-weight:600;color:var(--c-primary-900);font-family:var(--ff-ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs small{font-size:10.5px;color:var(--c-n-500);font-family:var(--ff-ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.cs strong.amount{color:var(--c-success-700);font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:14px}
.cs strong.muted{color:var(--c-n-700);font-weight:500}
.cs strong.dollar{color:var(--c-primary-700);font-family:var(--ff-num);font-variant-numeric:tabular-nums}
.cs strong.qty{font-family:var(--ff-num);font-variant-numeric:tabular-nums;font-size:14px;color:var(--c-primary-900);font-weight:700}
.cs.row-num{font-family:var(--ff-num);font-variant-numeric:tabular-nums;font-weight:700;color:var(--c-n-400);font-size:12px;align-items:center;justify-content:center}
.cs .cs-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cs .cs-pill{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:9.5px;font-weight:600;line-height:1.4;letter-spacing:.02em;font-family:var(--ff-ar)}
.cs .cs-pill[data-tone="indigo"]{background:var(--c-primary-50);color:var(--c-primary-700)}
.cs .cs-pill[data-tone="teal"]{background:var(--c-accent-50);color:var(--c-accent-700)}
.cs .cs-pill[data-tone="success"]{background:var(--c-success-50);color:var(--c-success-700)}
.cs .cs-pill[data-tone="warning"]{background:var(--c-warning-50);color:var(--c-warning-700)}
.cs .cs-pill[data-tone="danger"]{background:var(--c-danger-50);color:var(--c-danger-700)}
.cs .cs-pill[data-tone="neutral"]{background:var(--c-n-100);color:var(--c-n-700)}
.cs .cs-bar{height:4px;border-radius:999px;background:var(--c-n-100);position:relative;overflow:hidden;margin-top:3px;max-width:100px}
.cs .cs-bar > i{position:absolute;left:0;top:0;height:100%;background:var(--c-accent-500);border-radius:999px}
/* Avatar tile next to value */
.cs.with-avatar{flex-direction:row;align-items:center;gap:8px}
.cs .cs-avatar{width:24px;height:24px;border-radius:999px;background:var(--c-primary-50);color:var(--c-primary-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;font-family:var(--ff-ar)}
.cs.with-avatar > .cs-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cs.with-avatar > .cs-text strong{font-size:12.5px}
.cs.with-avatar > .cs-text small{font-size:10px}
/* In Compact Pro mode all columns are visible — never hide */
.tbl-stacked tbody td.cs-hidden,
.tbl-stacked thead th.cs-hidden{display:table-cell !important}
/* In compact mode, Excel column letters row doesn't make sense — hide it */
.tbl-stacked thead tr.col-letters{display:none}
/* First column (#) — narrow, frozen */
.tbl-stacked tbody td.col-num,
.tbl-stacked thead th.col-num{width:42px;min-width:42px;max-width:42px;text-align:center;font-size:11px;font-family:var(--ff-num)}
/* Compact Pro status pill — dot + label, success/warning/danger tones */
.cs-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5pt;font-weight:600;font-family:var(--ff-ar);padding:0;background:transparent !important}
.cs-status[data-tone="success"]{color:var(--c-success-700)}
.cs-status[data-tone="warning"]{color:#9A3412}
.cs-status[data-tone="danger"]{color:var(--c-danger-700)}
.cs-status[data-tone="neutral"]{color:var(--c-n-600)}
.cs-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0}
/* === Mobile: Ultra-compact tables — fit all columns without scroll ===
Keep # and selection visible BUT shrink them to absolute minimum width
(just the checkbox / row number, no extra padding). Hide the actions
column (last) since it's not data. */
@media(max-width:768px){
/* Hide ONLY actions (last column) — keep selection + # visible but tiny */
.tbl-card thead th:last-child,
.tbl-card tbody td:last-child{display:none !important}
/* Selection column: 16px wide, just enough for the checkbox.
Match by class, by :has, AND by nth-child as fallback. */
.tbl-card thead th.th-sel,
.tbl-card tbody td.td-sel,
.tbl-card tbody td.col-sel,
.tbl-card tbody td:has(> input.row-sel),
.tbl-card thead tr > th:first-child:has(input[type=checkbox]),
.tbl-card tbody tr > td:first-child:has(input[type=checkbox]){
width:16px !important;min-width:16px !important;max-width:16px !important;
padding:0 !important;text-align:center !important;line-height:1
}
.tbl-card .row-sel,
.tbl-card input[type=checkbox][id$="-sel-all"]{width:12px !important;height:12px !important;margin:0 !important;padding:0 !important}
/* # column: 20px wide, zero padding. Match by class AND by
nth-child(2) (always the # cell, since 1st is selection). */
.tbl-card tbody td.col-num,
.tbl-card thead th.col-num,
.tbl-card thead tr > th:nth-child(2):not([data-col]):not(.th-sel),
.tbl-card tbody tr > td:nth-child(2):not([data-col]):not(.td-sel):not(.col-sel){
width:20px !important;min-width:20px !important;max-width:20px !important;
padding:0 1px !important;font-size:9.5px !important;text-align:center !important;
color:var(--c-n-400);font-family:var(--ff-num)
}
/* Body cells compact */
.tbl-stacked tbody td{height:30px;padding:3px 5px !important;font-size:10.5px !important;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.tbl-stacked thead th{padding:4px 5px !important;font-size:9px !important;height:30px;letter-spacing:.02em;text-transform:none}
.cs-sort-toggle{font-size:9px;padding:0 2px;margin-right:2px}
/* Status pill smaller */
.cs-status{font-size:10px;gap:3px}
.cs-status::before{width:5px;height:5px}
.tbl-stacked tbody td[data-col*="dollar"]{font-size:10px !important;padding:3px 4px !important}
}
@media(max-width:480px){
/* Selection: 14px */
.tbl-card thead th.th-sel,
.tbl-card tbody td.td-sel,
.tbl-card tbody td.col-sel,
.tbl-card tbody td:has(> input.row-sel),
.tbl-card thead tr > th:first-child:has(input[type=checkbox]),
.tbl-card tbody tr > td:first-child:has(input[type=checkbox]){
width:14px !important;min-width:14px !important;max-width:14px !important;padding:0 !important
}
.tbl-card .row-sel,
.tbl-card input[type=checkbox][id$="-sel-all"]{width:11px !important;height:11px !important}
/* # column: 18px */
.tbl-card tbody td.col-num,
.tbl-card thead th.col-num,
.tbl-card thead tr > th:nth-child(2):not([data-col]):not(.th-sel),
.tbl-card tbody tr > td:nth-child(2):not([data-col]):not(.td-sel):not(.col-sel){
width:18px !important;min-width:18px !important;max-width:18px !important;
font-size:8.5px !important;padding:0 !important
}
.tbl-stacked tbody td{height:28px;padding:2px 4px !important;font-size:9.5px !important;max-width:80px}
.tbl-stacked thead th{padding:3px 4px !important;font-size:8.5px !important;height:28px}
/* Status on tiny screens: dot only, no label */
.cs-status{font-size:0;gap:0}
.cs-status::before{width:8px;height:8px}
.tbl-stacked tbody td[data-col*="total"],
.tbl-stacked tbody td[data-col*="amount"],
.tbl-stacked tbody td[data-col*="qty"]{font-weight:700}
.excel-foot{font-size:9px;padding:4px 6px;gap:6px;flex-wrap:wrap}
.excel-foot-item{padding:2px 4px}
.excel-foot-zoom{display:none}
}
/* === Excel-style Status Footer (auto-injected below tables) === */
.excel-foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:12px 18px;background:var(--c-n-50);border-top:1px solid var(--c-n-200);border-radius:0 0 var(--r-xl) var(--r-xl);font-family:var(--ff-num);font-variant-numeric:tabular-nums;border:1px solid var(--c-n-200);border-top:1px solid var(--c-n-200);margin-top:-1px}
.excel-foot-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--c-n-500);font-weight:600;letter-spacing:.04em}
.excel-foot-item strong{color:var(--c-primary-900);font-size:12.5px;font-weight:700;letter-spacing:0;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
.excel-foot-item.success strong{color:var(--c-success-700)}
.excel-foot-item.danger strong{color:var(--c-danger-700)}
.excel-foot-sep{width:1px;height:14px;background:var(--c-n-300);flex-shrink:0}
.excel-foot-zoom{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:11px;color:var(--c-n-500)}
.excel-foot-zoom-track{width:80px;height:4px;border-radius:999px;background:var(--c-n-200);position:relative;overflow:hidden}
.excel-foot-zoom-fill{position:absolute;left:0;top:0;height:100%;background:var(--c-primary-500);border-radius:999px}
/* Daily-page polish: KPI strip card */
.daily-kpi-strip{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
@media(max-width:768px){
.excel-foot{padding:10px 12px;gap:10px;font-size:10.5px}
.excel-foot-item{font-size:10px}
.excel-foot-item strong{font-size:11.5px}
.excel-foot-zoom{display:none}
}
/* === Import: Step Indicator + Drop Zone === */
.import-steps{display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-xl);padding:18px 22px;margin-bottom:18px;box-shadow:var(--sh-sm);overflow-x:auto;-webkit-overflow-scrolling:touch}
.step-item{display:flex;align-items:center;gap:10px;flex-shrink:0}
.step-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:var(--ff-en);background:var(--c-n-100);color:var(--c-n-500);transition:all .25s ease;flex-shrink:0}
.step-item[data-state="active"] .step-num{background:var(--c-primary-500);color:#fff;box-shadow:0 0 0 4px rgba(54,88,204,.18),var(--sh-glow);transform:scale(1.05)}
.step-item[data-state="done"] .step-num{background:var(--c-success-500);color:#fff}
.step-item[data-state="done"] .step-num::after{content:"✓";font-size:14px}
.step-item[data-state="done"] .step-num{font-size:0}
.step-label{display:flex;flex-direction:column;gap:1px;min-width:0}
.step-title{font-size:12.5px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);white-space:nowrap}
.step-sub{font-size:10px;color:var(--c-n-500);font-family:var(--ff-ar);white-space:nowrap}
.step-item[data-state="pending"] .step-title{color:var(--c-n-500)}
.step-item[data-state="pending"] .step-sub{color:var(--c-n-400)}
.step-line{flex:1;height:2px;background:var(--c-n-200);margin:0 14px;min-width:24px;border-radius:1px}
.step-item[data-state="done"] + .step-line{background:var(--c-success-500)}
/* Drop zone polish (around the file input) */
.import-drop{position:relative;border:2px dashed var(--c-n-300);border-radius:var(--r-xl);padding:40px 24px;text-align:center;background:var(--c-n-50);transition:all .2s ease;cursor:pointer}
.import-drop:hover,.import-drop.is-dragging{border-color:var(--c-primary-500);background:var(--c-primary-50)}
.import-drop-icon{font-size:42px;margin-bottom:10px;display:block}
.import-drop-title{font-size:15px;font-weight:700;color:var(--c-primary-900);margin-bottom:4px;font-family:var(--ff-ar)}
.import-drop-sub{font-size:12px;color:var(--c-n-500);font-family:var(--ff-ar)}
.import-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
@media(max-width:768px){
.import-steps{padding:14px 16px;gap:0}
.step-line{margin:0 8px;min-width:16px}
.step-num{width:32px;height:32px;font-size:13px}
.step-title{font-size:12px}
.step-sub{display:none}
.import-drop{padding:28px 16px}
}
/* === Roles Summary Grid (permissions page) === */
.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.role-tile{background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-lg);padding:14px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-sm);transition:all .2s ease;position:relative;overflow:hidden}
.role-tile::before{content:"";position:absolute;top:0;right:0;width:3px;height:100%;background:var(--c-primary-500)}
.role-tile[data-role="admin"]::before{background:var(--c-danger-500)}
.role-tile[data-role="manager"]::before{background:var(--c-primary-500)}
.role-tile[data-role="editor"]::before{background:var(--c-warning-500)}
.role-tile[data-role="accountant"]::before{background:var(--c-success-500)}
.role-tile[data-role="viewer"]::before{background:var(--c-n-400)}
.role-tile:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--c-primary-200)}
.role-tile-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;line-height:1}
.role-tile[data-role="admin"] .role-tile-icon{background:var(--c-danger-50);color:var(--c-danger-700)}
.role-tile[data-role="manager"] .role-tile-icon{background:var(--c-primary-50);color:var(--c-primary-700)}
.role-tile[data-role="editor"] .role-tile-icon{background:var(--c-warning-50);color:var(--c-warning-700)}
.role-tile[data-role="accountant"] .role-tile-icon{background:var(--c-success-50);color:var(--c-success-700)}
.role-tile[data-role="viewer"] .role-tile-icon{background:var(--c-n-100);color:var(--c-n-600)}
.role-tile-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.role-tile-name{font-size:13px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar)}
.role-tile-desc{font-size:11px;color:var(--c-n-500);font-family:var(--ff-ar)}
.role-tile-count{font-size:22px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-num);font-variant-numeric:tabular-nums;line-height:1;margin-left:6px}
/* === Permission table polish === */
.perm-table{width:100%;font-family:var(--ff-ar)}
.perm-table th{background:var(--c-n-50);padding:14px 16px;text-align:center;font-size:11.5px;font-weight:700;color:var(--c-n-700);letter-spacing:.04em;border:none;border-bottom:2px solid var(--c-n-200)}
.perm-table th:first-child{text-align:right;background:var(--c-primary-900);color:#fff}
.perm-table td{padding:12px 14px;text-align:center;border:none;border-bottom:1px solid var(--c-n-100);font-family:var(--ff-ar)}
.perm-table td:first-child{text-align:right;font-weight:600;color:var(--c-primary-900);background:var(--c-n-50)}
.perm-table tbody tr:hover td{background:var(--c-primary-50)}
.perm-table tbody tr:hover td:first-child{background:var(--c-primary-100)}
.perm-check{width:20px !important;height:20px !important;accent-color:var(--c-primary-500);cursor:pointer}
.perm-yes,.perm-no,.perm-partial{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;font-size:14px;font-weight:700;font-family:var(--ff-en)}
.perm-yes{background:var(--c-success-50);color:var(--c-success-700)}
.perm-no{background:var(--c-danger-50);color:var(--c-danger-700)}
.perm-partial{background:var(--c-warning-50);color:var(--c-warning-700)}
@media(max-width:768px){
.roles-grid{grid-template-columns:1fr 1fr;gap:10px}
.role-tile{padding:12px}
.role-tile-count{font-size:18px}
}
@media(max-width:480px){
.roles-grid{grid-template-columns:1fr}
}
/* === Supplier Cards Grid === */
.sup-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:18px}
.sup-grid.active{display:grid}
.sup-card{background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-xl);padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-sm);transition:all .2s ease;cursor:pointer;position:relative;overflow:hidden}
.sup-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--c-primary-200)}
.sup-top{display:flex;align-items:center;gap:12px}
.sup-avatar{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;line-height:1;background:rgba(54,88,204,.12);color:var(--c-primary-600)}
.sup-card[data-tier="1"] .sup-avatar{background:linear-gradient(135deg,#FEF3C7,#FCD34D);color:#92400E}
.sup-card[data-tier="2"] .sup-avatar{background:linear-gradient(135deg,#E2E8F0,#CBD5E1);color:#475569}
.sup-card[data-tier="3"] .sup-avatar{background:linear-gradient(135deg,#FED7AA,#FDBA74);color:#9A3412}
.sup-info{flex:1;min-width:0}
.sup-name{font-size:14px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.sup-name .sup-verified{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--c-accent-500);color:#fff;font-size:10px;font-weight:700;flex-shrink:0}
.sup-cat{font-size:11px;color:var(--c-n-500);font-family:var(--ff-ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sup-rating{display:flex;align-items:center;gap:6px;padding-top:10px;border-top:1px solid var(--c-n-100)}
.sup-stars{display:inline-flex;font-size:14px;letter-spacing:1px;color:var(--c-warning-500)}
.sup-stars .star-empty{color:var(--c-n-300)}
.sup-rating-num{font-size:11.5px;font-weight:600;color:var(--c-n-600);font-family:var(--ff-num)}
.sup-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:10px;border-top:1px solid var(--c-n-100)}
.sup-stat{display:flex;flex-direction:column;gap:3px}
.sup-stat-label{font-size:10px;color:var(--c-n-400);letter-spacing:.04em;font-family:var(--ff-ar)}
.sup-stat-val{font-size:13px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-stat-val.amount{color:var(--c-success-700)}
.sup-foot{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--c-n-100)}
.sup-foot a{flex:1;text-align:center;padding:7px 8px;border-radius:8px;font-size:11.5px;font-weight:600;font-family:var(--ff-ar);text-decoration:none;background:var(--c-n-50);color:var(--c-n-700);border:1px solid var(--c-n-200);transition:all .15s ease}
.sup-foot a:hover{background:var(--c-primary-50);border-color:var(--c-primary-300);color:var(--c-primary-700)}
.sup-foot a.primary{background:var(--c-primary-500);color:#fff;border-color:var(--c-primary-500);box-shadow:var(--sh-glow)}
.sup-foot a.primary:hover{background:var(--c-primary-600)}
.page#page-suppliers[data-view="cards"] #sup-tbl-card{display:none}
.page#page-suppliers[data-view="table"] #sup-cards-grid{display:none !important}
@media(max-width:768px){
.sup-grid{grid-template-columns:1fr;gap:12px}
.sup-card{padding:14px}
}
/* === Tawtheeq Gallery container — used by Timeline view (Option C) === */
.proj-gallery{display:none;margin-bottom:18px}
.proj-gallery.active{display:block}
/* Cards view hides table card on this page */
.page#page-tawtheeq[data-view="cards"] #tawtheeq-tbl-card{display:none}
.page#page-tawtheeq[data-view="table"] #tawtheeq-cards-grid{display:none !important}
/* Mobile: keep horizontal scroll fallback. Desktop overrides below. */
#page-tawtheeq #tawtheeq-tbl-card > .tawtheeq-tbl-wrap{overflow-x:auto}
/* Desktop: fit all 19 columns in the viewport — no horizontal scroll.
We compact paddings/fonts and let text ellipsize per cell. The
FAT-style ruleset uses !important on padding/font-size, so we use it
here too to win the cascade. */
@media(min-width:769px){
#page-tawtheeq #tawtheeq-tbl-card > .tawtheeq-tbl-wrap{overflow-x:visible !important}
#page-tawtheeq #tawtheeq-tbl-card.fat-style table#tawtheeq-table{
width:100% !important;min-width:0 !important;table-layout:fixed !important;font-size:11px
}
#page-tawtheeq #tawtheeq-tbl-card.fat-style thead th{
padding:6px 3px !important;font-size:10px !important;white-space:nowrap;letter-spacing:-.02em
}
#page-tawtheeq #tawtheeq-tbl-card.fat-style tbody td{
padding:5px 3px !important;font-size:10.5px !important;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
#page-tawtheeq #tawtheeq-tbl-card.fat-style tfoot td{
padding:5px 3px !important;font-size:10.5px !important
}
#page-tawtheeq #tawtheeq-tbl-card.fat-style thead th[data-col]::after{margin-right:2px;font-size:7px}
/* Per-column widths tuned so 19 columns fit on a 1280px+ screen */
#page-tawtheeq #tawtheeq-table .th-sel,
#page-tawtheeq #tawtheeq-body td:nth-child(1){width:22px !important;text-align:center}
#page-tawtheeq #tawtheeq-table thead th:nth-child(2),
#page-tawtheeq #tawtheeq-body td:nth-child(2){width:30px !important;text-align:center}
#page-tawtheeq #tawtheeq-table thead th[data-col="date"],
#page-tawtheeq #tawtheeq-body td[data-col="date"],
#page-tawtheeq #tawtheeq-table thead th[data-col="requestDate"],
#page-tawtheeq #tawtheeq-body td[data-col="requestDate"]{width:74px !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="org"],
#page-tawtheeq #tawtheeq-body td[data-col="org"]{width:8% !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="project"],
#page-tawtheeq #tawtheeq-body td[data-col="project"]{width:9% !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="elites"],
#page-tawtheeq #tawtheeq-body td[data-col="elites"]{width:6% !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="type"],
#page-tawtheeq #tawtheeq-body td[data-col="type"]{width:5% !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="distType"],
#page-tawtheeq #tawtheeq-body td[data-col="distType"]{width:6% !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="place"],
#page-tawtheeq #tawtheeq-body td[data-col="place"]{width:6% !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="kitchen"],
#page-tawtheeq #tawtheeq-body td[data-col="kitchen"]{width:6% !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="distPlace"],
#page-tawtheeq #tawtheeq-body td[data-col="distPlace"]{width:6% !important}
#page-tawtheeq #tawtheeq-table thead th[data-col="count"],
#page-tawtheeq #tawtheeq-body td[data-col="count"]{width:42px !important;text-align:center}
#page-tawtheeq #tawtheeq-table thead th[data-col="shekel"],
#page-tawtheeq #tawtheeq-body td[data-col="shekel"]{width:60px !important;text-align:left}
#page-tawtheeq #tawtheeq-table thead th[data-col="dollar"],
#page-tawtheeq #tawtheeq-body td[data-col="dollar"]{width:60px !important;text-align:left}
#page-tawtheeq #tawtheeq-table thead th[data-col="link"],
#page-tawtheeq #tawtheeq-body td[data-col="link"]{width:48px !important;text-align:center}
#page-tawtheeq #tawtheeq-table thead th[data-col="notes"],
#page-tawtheeq #tawtheeq-body td[data-col="notes"]{width:54px !important;text-align:center}
#page-tawtheeq #tawtheeq-table thead th[data-col="beneficiaries_file"],
#page-tawtheeq #tawtheeq-body td[data-col="beneficiaries_file"]{width:62px !important;text-align:center}
#page-tawtheeq #tawtheeq-table thead th:last-child,
#page-tawtheeq #tawtheeq-body td:last-child{width:74px !important;text-align:center}
/* Compact action buttons so they fit in the narrower last column */
#page-tawtheeq #tawtheeq-body td:last-child .act-btn,
#page-tawtheeq #tawtheeq-body td:last-child > button{
width:22px;height:22px;font-size:10.5px;margin:0 1px
}
/* Status pill / badge compacted */
#page-tawtheeq #tawtheeq-body .bdg{padding:3px 6px;font-size:10px}
/* Media button compacted */
#page-tawtheeq #tawtheeq-body .media-cell-btn{padding:4px 6px;font-size:11px;gap:3px}
}
/* === Mobile compact rows for tawtheeq ===
Hide secondary columns and compact spacing so the table fits the
viewport without horizontal scroll on phones. */
@media(max-width:768px){
/* Hide the Excel-style A/B/C... letter ribbon on phones — without it, the
hidden columns leave empty cells in that row that look like a glitch. */
.tbl-card.fat-style thead tr.col-letters{display:none !important}
/* Card softer border on mobile */
#page-tawtheeq #tawtheeq-tbl-card{border-radius:var(--r-md);margin:0 4px 12px}
/* Hide the totals (tfoot) row on mobile — it renders one cell per ALL
columns including hidden ones, which creates ghost columns and a
wide white area when scrolling. Totals stay visible in the status bar. */
#page-tawtheeq #tawtheeq-tbl-card tfoot.fat-tfoot,
#page-tawtheeq #tawtheeq-tbl-card tfoot.totals-foot{display:none !important}
/* بطلب المستخدم: إظهار كل الأعمدة على الموبايل (تمرير أفقي) —
أُزيل إخفاء الأعمدة الثانوية. صلاحيات إخفاء الأعمدة تبقى فعّالة. */
/* Compact spacing on the visible columns */
#page-tawtheeq #tawtheeq-tbl-card thead th{padding:8px 6px;font-size:10.5px}
#page-tawtheeq #tawtheeq-body td{padding:8px 6px;font-size:11px}
#page-tawtheeq #tawtheeq-body td[data-col="date"]{white-space:nowrap;font-size:10.5px;color:var(--c-n-700);font-weight:600;font-family:var(--ff-num)}
#page-tawtheeq #tawtheeq-body td[data-col="org"]{font-size:11px;font-weight:700;color:var(--c-primary-900)}
#page-tawtheeq #tawtheeq-body td[data-col="shekel"]{font-size:11.5px}
/* Action buttons compact */
#page-tawtheeq #tawtheeq-body td:last-child{padding:8px 4px;text-align:left;white-space:nowrap}
#page-tawtheeq #tawtheeq-body td:last-child > button,
#page-tawtheeq #tawtheeq-body td:last-child .act-btn{width:26px;height:26px;font-size:11px}
}
/* === Media cell button + popup menu (mursala/tawtheeq attachments) === */
.media-cell-btn{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
height:30px;padding:0 12px;border-radius:8px;
font-family:var(--ff-ar);font-size:12px;font-weight:700;
border:1.5px solid transparent;transition:all .15s ease;
white-space:nowrap
}
.media-cell-btn .mc-icon{font-size:14px;line-height:1}
.media-cell-btn .mc-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:20px;padding:0 6px;
border-radius:10px;font-family:var(--ff-num);font-variant-numeric:tabular-nums;
font-size:11.5px;font-weight:800;
background:#fff;color:var(--c-primary-700,#2643A8)
}
.media-cell-btn .mc-text{font-weight:700}
.media-cell-btn.has-files{
background:linear-gradient(180deg,#3658CC,#2643A8);
color:#fff;border-color:#1B3387;
box-shadow:0 2px 6px rgba(54,88,204,.30)
}
.media-cell-btn.has-files:hover{
background:linear-gradient(180deg,#2643A8,#1B3387);
transform:translateY(-1px);box-shadow:0 4px 10px rgba(54,88,204,.40)
}
.media-cell-btn.empty{
background:#fff;color:var(--c-n-700,#475569);
border-color:var(--c-n-300,#cbd5e1);border-style:dashed
}
.media-cell-btn.empty:hover{
background:#EFF6FF;color:var(--c-primary-700,#2643A8);border-color:var(--c-primary-400,#5C7BE0);border-style:solid
}
.media-cell-popup{
background:#fff;border:1px solid #cbd5e1;border-radius:12px;
box-shadow:0 8px 28px rgba(11,24,57,.20);
padding:6px;min-width:240px;
font-family:var(--ff-ar);direction:rtl;
animation:mcMenuIn .18s ease
}
@keyframes mcMenuIn{
from{opacity:0;transform:translateY(-6px) scale(.97)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.mc-menu-item{
appearance:none;border:0;cursor:pointer;
display:flex;align-items:center;gap:10px;
width:100%;padding:9px 12px;border-radius:8px;
background:transparent;text-align:right;
transition:background .12s ease;font-family:inherit
}
.mc-menu-item:hover:not(.is-disabled){background:#F1F5F9}
.mc-menu-item.is-danger:hover:not(.is-disabled){background:#FEE2E2}
.mc-menu-item.is-disabled{opacity:.45;cursor:not-allowed}
.mc-menu-ic{
width:34px;height:34px;border-radius:8px;flex-shrink:0;
background:#EFF6FF;color:var(--c-primary-700,#2643A8);
display:inline-flex;align-items:center;justify-content:center;
font-size:16px
}
.mc-menu-item.is-danger .mc-menu-ic{background:#FEE2E2;color:#DC2626}
.mc-menu-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mc-menu-label{font-size:12.5px;font-weight:800;color:var(--c-primary-900,#0B1839);line-height:1.2}
.mc-menu-sub{font-size:10.5px;font-weight:500;color:var(--c-n-500,#64748b);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.mc-menu-item.is-danger .mc-menu-label{color:#9F1239}
/* === Media popup with file list (count >= 2) === */
.mc-popup-files{padding:0;min-width:280px;max-width:340px}
.mc-popup-head{
display:flex;align-items:center;gap:8px;
padding:10px 14px;border-bottom:1px solid #e5e7eb;
background:linear-gradient(180deg,#F8FAFC,#F1F5F9);
border-radius:12px 12px 0 0
}
.mc-head-ic{font-size:15px}
.mc-head-text{font-size:12.5px;font-weight:800;color:#0B1839}
.mc-files-list{max-height:240px;overflow-y:auto;padding:6px}
.mc-file-row{
display:flex;align-items:center;gap:4px;
border-radius:8px;transition:background .12s ease
}
.mc-file-row:hover{background:#F1F5F9}
.mc-file-open{
appearance:none;border:0;cursor:pointer;background:transparent;
display:flex;align-items:center;gap:8px;flex:1;min-width:0;
padding:8px 10px;text-align:right;font-family:inherit
}
.mc-file-ic{
width:30px;height:30px;border-radius:7px;flex-shrink:0;
background:#EFF6FF;display:inline-flex;align-items:center;justify-content:center;
font-size:15px
}
.mc-file-name{
font-size:12px;font-weight:600;color:#0B1839;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
flex:1;min-width:0;text-align:right
}
.mc-file-del{
appearance:none;border:0;cursor:pointer;
width:32px;height:32px;border-radius:7px;
background:transparent;color:#dc2626;font-size:14px;flex-shrink:0;
transition:background .12s ease
}
.mc-file-del:hover{background:#FEE2E2}
.mc-popup-actions{
border-top:1px solid #e5e7eb;padding:6px;background:#FAFBFC;
border-radius:0 0 12px 12px
}
.mc-action-add{
appearance:none;border:0;cursor:pointer;
display:flex;align-items:center;gap:10px;
width:100%;padding:9px 12px;border-radius:8px;
background:transparent;text-align:right;
transition:background .12s ease;font-family:inherit
}
.mc-action-add:hover{background:#DBEAFE}
.mc-action-add .mc-menu-ic{background:#DBEAFE;color:#2643A8}
/* === Searchable combobox popup (used inside cells) === */
.combobox-popup{
position:absolute;z-index:9999;
background:#fff;border:1px solid #cbd5e1;border-radius:8px;
box-shadow:0 6px 24px rgba(11,24,57,.18);
min-width:200px;max-width:360px;max-height:280px;overflow-y:auto;
font-family:var(--ff-ar);direction:rtl
}
.combobox-popup .combobox-item{
padding:9px 14px;cursor:pointer;font-size:12.5px;color:var(--c-primary-900,#0B1839);
font-weight:600;transition:background .12s ease;border-bottom:1px solid #f1f5f9
}
.combobox-popup .combobox-item:last-child{border-bottom:0}
.combobox-popup .combobox-item:hover{background:#eff6ff;color:var(--c-primary-700,#2643A8)}
.combobox-popup .combobox-item.is-active{background:#dbeafe;font-weight:800;color:var(--c-primary-700,#2643A8)}
.combobox-popup .combobox-add{
padding:10px 14px;cursor:pointer;font-size:12px;font-weight:700;
background:linear-gradient(180deg,#dcfce7,#bbf7d0);
color:#065f46;border-top:1px solid #86efac;
position:sticky;bottom:0;
transition:background .12s ease
}
.combobox-popup .combobox-add:hover{background:linear-gradient(180deg,#bbf7d0,#86efac)}
.combobox-popup .combobox-add strong{color:#047857;font-weight:800}
.combobox-popup .combobox-empty{
padding:14px 12px;text-align:center;font-size:11.5px;color:#94a3b8;font-style:italic
}
/* === Mursala + Tawtheeq inline cell editing (BOTH dblclick) === */
/* Mursala — DOUBLE click */
#mursala-body td[data-col="req_date"],
#mursala-body td[data-col="funder"],
#mursala-body td[data-col="donor"],
#mursala-body td[data-col="proj_type"],
#mursala-body td[data-col="type"],
#mursala-body td[data-col="qty"],
#mursala-body td[data-col="location"]{
cursor:cell;position:relative;transition:background .15s ease
}
#mursala-body td[data-col="req_date"]:hover,
#mursala-body td[data-col="funder"]:hover,
#mursala-body td[data-col="donor"]:hover,
#mursala-body td[data-col="proj_type"]:hover,
#mursala-body td[data-col="type"]:hover,
#mursala-body td[data-col="qty"]:hover,
#mursala-body td[data-col="location"]:hover{
background:#FEF3C7 !important;
outline:1.5px dashed #F59E0B;outline-offset:-2px;
box-shadow:inset 0 0 0 9999px rgba(245,158,11,.05)
}
#mursala-body td[data-col="req_date"]:hover::after,
#mursala-body td[data-col="funder"]:hover::after,
#mursala-body td[data-col="donor"]:hover::after,
#mursala-body td[data-col="proj_type"]:hover::after,
#mursala-body td[data-col="type"]:hover::after,
#mursala-body td[data-col="qty"]:hover::after,
#mursala-body td[data-col="location"]:hover::after{
content:"⓶ ✏️";position:absolute;left:4px;top:50%;transform:translateY(-50%);
font-size:10px;opacity:.85;pointer-events:none;
background:#F59E0B;color:#fff;padding:2px 6px;border-radius:4px;font-weight:700;white-space:nowrap
}
#mursala-body td.is-editing{
background:#fff !important;
outline:2px solid var(--c-primary-600,#3658CC);outline-offset:-2px;padding:0 !important
}
#mursala-body td.is-editing::after{display:none !important}
/* Tawtheeq — DOUBLE click (Excel-style protective edit) */
#tawtheeq-body td[data-col="date"],
#tawtheeq-body td[data-col="requestDate"],
#tawtheeq-body td[data-col="org"],
#tawtheeq-body td[data-col="project"],
#tawtheeq-body td[data-col="elites"],
#tawtheeq-body td[data-col="type"],
#tawtheeq-body td[data-col="distType"],
#tawtheeq-body td[data-col="place"],
#tawtheeq-body td[data-col="kitchen"],
#tawtheeq-body td[data-col="distPlace"],
#tawtheeq-body td[data-col="notes"]{
cursor:cell;position:relative;transition:background .15s ease
}
#tawtheeq-body td[data-col="date"]:hover,
#tawtheeq-body td[data-col="requestDate"]:hover,
#tawtheeq-body td[data-col="org"]:hover,
#tawtheeq-body td[data-col="project"]:hover,
#tawtheeq-body td[data-col="elites"]:hover,
#tawtheeq-body td[data-col="type"]:hover,
#tawtheeq-body td[data-col="distType"]:hover,
#tawtheeq-body td[data-col="place"]:hover,
#tawtheeq-body td[data-col="kitchen"]:hover,
#tawtheeq-body td[data-col="distPlace"]:hover,
#tawtheeq-body td[data-col="notes"]:hover{
background:#DBEAFE !important;
outline:1.5px dashed #3658CC;outline-offset:-2px
}
#tawtheeq-body td[data-col="date"]:hover::after,
#tawtheeq-body td[data-col="requestDate"]:hover::after,
#tawtheeq-body td[data-col="org"]:hover::after,
#tawtheeq-body td[data-col="project"]:hover::after,
#tawtheeq-body td[data-col="elites"]:hover::after,
#tawtheeq-body td[data-col="type"]:hover::after,
#tawtheeq-body td[data-col="distType"]:hover::after,
#tawtheeq-body td[data-col="place"]:hover::after,
#tawtheeq-body td[data-col="kitchen"]:hover::after,
#tawtheeq-body td[data-col="distPlace"]:hover::after,
#tawtheeq-body td[data-col="notes"]:hover::after{
content:"⓶ ✏️";position:absolute;left:4px;top:50%;transform:translateY(-50%);
font-size:10px;opacity:.75;pointer-events:none;
background:#3658CC;color:#fff;padding:2px 6px;border-radius:4px;font-weight:700;
white-space:nowrap
}
#tawtheeq-body td.is-editing{
background:#fff !important;
outline:2px solid var(--c-primary-600,#3658CC);outline-offset:-2px;
padding:0 !important
}
#tawtheeq-body td.is-editing::after{display:none !important}
/* Reuse mursala's tooltip style for hover ✏️ on mursala cells */
#mursala-body td[data-col="req_date"]:hover::after,
#mursala-body td[data-col="funder"]:hover::after,
#mursala-body td[data-col="donor"]:hover::after,
#mursala-body td[data-col="proj_type"]:hover::after,
#mursala-body td[data-col="type"]:hover::after,
#mursala-body td[data-col="qty"]:hover::after,
#mursala-body td[data-col="location"]:hover::after{
content:"✏️";position:absolute;left:4px;top:50%;transform:translateY(-50%);
font-size:11px;opacity:.6;pointer-events:none
}
#mursala-body td.is-editing{
background:#fff !important;
outline:2px solid var(--c-primary-600,#3658CC);outline-offset:-2px;
padding:0 !important
}
#mursala-body td.is-editing::after{display:none !important}
.inline-edit-input{
width:100%;height:100%;min-height:28px;
padding:6px 10px;
border:0;outline:none;background:#fff;
font-family:inherit;font-size:inherit;color:var(--c-primary-900,#0B1839);
direction:rtl;text-align:right;font-weight:700
}
.inline-edit-input[type="number"]{font-family:var(--ff-num);font-variant-numeric:tabular-nums;text-align:left}
.inline-edit-input[type="date"]{text-align:center}
select.inline-edit-input{cursor:pointer;-webkit-appearance:menulist;appearance:menulist}
.inline-edit-input:focus{box-shadow:inset 0 0 0 1px var(--c-primary-400,#5C7BE0)}
/* === Format-As-Table (FAT) — Excel Banded Modern, Office 365 vibes === */
/* Applied via .fat-style class on the .tbl-card. Self-contained scope. */
/* FAT Ribbon (above the toolbar) */
.tbl-card.fat-style .fat-ribbon{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
padding:8px 14px;background:#D8E0FF;border-bottom:1px solid #8AA1F5;
font-family:var(--ff-ar)
}
.fat-ribbon-name{
font-weight:800;font-size:13px;color:#1B3387;
background:#fff;border:1px solid #B8C7FF;border-radius:5px;
padding:4px 10px;margin-left:4px
}
.fat-ribbon-btn{
appearance:none;border:1px solid #B8C7FF;background:#fff;color:#1B3387;
border-radius:5px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;
font-family:var(--ff-ar);transition:all .15s ease
}
.fat-ribbon-btn:hover{background:#EEF2FF}
.fat-ribbon-btn-active{
background:linear-gradient(180deg,#1E3A8A,#1B3387);
color:#fff;border-color:#1B3387;
box-shadow:0 2px 4px rgba(27,51,135,.30)
}
.fat-ribbon-btn-active:hover{background:linear-gradient(180deg,#1E3A8A,#152663)}
.fat-ribbon-spacer{flex:1}
.fat-ribbon-style{
font-size:10.5px;font-weight:600;color:#2643A8;font-family:var(--ff-ar);
white-space:nowrap
}
/* The table itself: gradient header + banded rows + soft borders */
.tbl-card.fat-style table{
width:auto;min-width:100%;
border-collapse:separate;border-spacing:0;
background:#fff;font-family:var(--ff-ar)
}
.tbl-card.fat-style thead th{
background:linear-gradient(180deg,#2643A8,#1B3387) !important;
color:#fff !important;
padding:11px 14px !important;
font-size:12px;font-weight:800;
text-align:right;
border-right:1px solid rgba(255,255,255,.18) !important;
border-bottom:2px solid #06B0AA !important;
position:relative;white-space:nowrap
}
.tbl-card.fat-style thead th:last-child{border-right:0 !important}
.tbl-card.fat-style thead th[data-col]::after{
content:"▼";display:inline-block;
font-size:8.5px;font-weight:700;color:rgba(255,255,255,.7);
margin-right:5px;vertical-align:middle;
transition:color .15s ease
}
.tbl-card.fat-style thead th[data-col]:hover::after{color:#fff}
.tbl-card.fat-style thead th.th-sel::after,
.tbl-card.fat-style thead th:first-child::after{content:""}
/* Banded body rows — clear contrast like Office 365 */
.tbl-card.fat-style[data-fat-banded="off"] tbody tr:nth-child(even){background:#fff}
.tbl-card.fat-style[data-fat-banded="on"] tbody tr:nth-child(even),
.tbl-card.fat-style:not([data-fat-banded]) tbody tr:nth-child(even){background:#F1F5FF}
.tbl-card.fat-style tbody tr:nth-child(odd){background:#fff}
.tbl-card.fat-style tbody tr:hover{background:#FFF9DB !important;outline:1px solid #FACC15;outline-offset:-1px}
.tbl-card.fat-style tbody td{
padding:9px 14px !important;font-size:12.5px !important;
border-right:1px solid #DDE5FF !important;
border-bottom:1px solid #DDE5FF !important;
color:#1F2937;white-space:nowrap;
font-family:var(--ff-ar)
}
.tbl-card.fat-style tbody td:last-child{border-right:0 !important}
/* Numeric cells (shekel/dollar/count) — tabular nums, left-align in RTL */
.tbl-card.fat-style tbody td[class*="amt"],
.tbl-card.fat-style tbody td.amt{
text-align:left;font-family:var(--ff-num);font-variant-numeric:tabular-nums;
font-weight:700;letter-spacing:-.01em
}
/* Total Row (tfoot) — Excel "Total Row" feature */
.tbl-card.fat-style[data-fat-totalrow="off"] tfoot.fat-tfoot{display:none}
.tbl-card.fat-style tfoot.fat-tfoot{
background:linear-gradient(180deg,#DDE5FF,#B8C7FF);
border-top:3px solid #1B3387
}
.tbl-card.fat-style tfoot.fat-tfoot td{
padding:10px 14px !important;
border-right:1px solid #8AA1F5 !important;
border-bottom:1px solid #8AA1F5 !important;
font-family:var(--ff-num);font-variant-numeric:tabular-nums;
font-weight:800 !important;color:#1B3387 !important;
font-size:13px !important
}
.tbl-card.fat-style tfoot.fat-tfoot td:first-child{
font-family:var(--ff-ar);text-align:right
}
.tbl-card.fat-style tfoot.fat-tfoot td:last-child{border-right:0 !important}
.tbl-card.fat-style tfoot.fat-tfoot td.fat-total-num{
text-align:left;color:#0F1F50 !important
}
.tbl-card.fat-style tfoot.fat-tfoot td.fat-total-pos{color:#047857 !important}
.tbl-card.fat-style tfoot.fat-tfoot td.fat-total-neg{color:#9F1239 !important}
/* Excel-style status bar (below the table) */
.tbl-card.fat-style .fat-statusbar{
display:flex;align-items:center;gap:8px;
padding:6px 14px;background:#F1F5FF;
border-top:1px solid #B8C7FF;
font-family:var(--ff-ar);font-size:11px;color:#1B3387
}
.fat-sb-state{font-weight:800;color:#047857}
.fat-sb-sep{color:#8AA1F5}
.fat-sb-rows{font-weight:600}
.fat-sb-spacer{flex:1}
.fat-sb-aggr{font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* Selected row indicator (when checkbox checked) */
.tbl-card.fat-style tbody tr.is-selected,
.tbl-card.fat-style tbody tr:has(input.row-sel:checked){
background:#DBEAFE !important;outline:2px solid #2563EB;outline-offset:-2px
}
/* Hide filter ▼ when filters option is off */
.tbl-card.fat-style[data-fat-filters="off"] thead th[data-col]::after{display:none}
/* Mobile tweaks: keep look but smaller */
@media(max-width:768px){
.tbl-card.fat-style .fat-ribbon{padding:6px 10px;gap:4px}
.fat-ribbon-name{font-size:11px;padding:3px 8px}
.fat-ribbon-btn{font-size:10px;padding:3px 8px}
.fat-ribbon-style{display:none}
.tbl-card.fat-style thead th{padding:8px 10px !important;font-size:11px}
.tbl-card.fat-style tbody td{padding:7px 10px !important;font-size:11.5px !important}
.tbl-card.fat-style tfoot.fat-tfoot td{padding:8px 10px !important;font-size:11.5px !important}
.tbl-card.fat-style .fat-statusbar{padding:5px 10px;font-size:10px;gap:5px;flex-wrap:wrap}
}
/* Dark mode */
html[data-theme="dark"] .tbl-card.fat-style .fat-ribbon{background:#1E293B;border-bottom-color:#334155}
html[data-theme="dark"] .fat-ribbon-name{background:#0F172A;border-color:#334155;color:#93C5FD}
html[data-theme="dark"] .fat-ribbon-btn{background:#0F172A;color:#93C5FD;border-color:#334155}
html[data-theme="dark"] .fat-ribbon-style{color:#93C5FD}
html[data-theme="dark"] .tbl-card.fat-style[data-fat-banded="on"] tbody tr:nth-child(even),
html[data-theme="dark"] .tbl-card.fat-style:not([data-fat-banded]) tbody tr:nth-child(even){background:rgba(54,88,204,.10)}
html[data-theme="dark"] .tbl-card.fat-style tbody tr:nth-child(odd){background:transparent}
html[data-theme="dark"] .tbl-card.fat-style tbody td{color:#E5E7EB;border-color:#1E3A8A}
html[data-theme="dark"] .tbl-card.fat-style tfoot.fat-tfoot{background:linear-gradient(180deg,#1E3A8A,#152663)}
html[data-theme="dark"] .tbl-card.fat-style tfoot.fat-tfoot td{color:#DDE5FF !important;border-color:#1E3A8A !important}
html[data-theme="dark"] .tbl-card.fat-style .fat-statusbar{background:#0F172A;border-top-color:#1E3A8A;color:#93C5FD}
/* === Tawtheeq Timeline (Option C) === */
.proj-gallery.tw-mode{display:none}
.proj-gallery.tw-mode.active{display:block}
.tw-tl{position:relative;padding:0 8px 8px;margin:0}
/* Month section header (per-month group) — gradient + inline mini-stats */
.tw-tl-mhdr{
background:linear-gradient(135deg,#1E3A8A 0%, #3658CC 50%, #06B0AA 100%);
border-radius:var(--r-xl);padding:18px 24px;margin:24px 0 16px;
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
color:#fff;box-shadow:0 6px 18px -6px rgba(11,24,57,.25);position:relative;overflow:hidden
}
.tw-tl-mhdr:first-child{margin-top:0}
.tw-tl-mhdr::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none}
.tw-tl-mhdr::after{content:"";position:absolute;left:-40px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:rgba(0,0,0,.10);pointer-events:none}
.tw-tl-mhdr-text{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.tw-tl-mhdr-title{font-size:20px;font-weight:800;color:#fff;font-family:var(--ff-ar);letter-spacing:-.01em;line-height:1.1}
.tw-tl-mhdr-iso{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);font-family:var(--ff-ar)}
.tw-tl-mhdr-stats{display:inline-flex;align-items:center;gap:0;position:relative;z-index:1;flex-wrap:wrap}
.tw-tl-mhdr-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px;text-align:center}
.tw-tl-mhdr-stat-val{font-size:18px;font-weight:800;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.tw-tl-mhdr-stat-lbl{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.82);font-family:var(--ff-ar);letter-spacing:.04em}
.tw-tl-mhdr-sep{width:1px;height:32px;background:rgba(255,255,255,.20);flex-shrink:0}
.tw-tl-mhdr-print{
appearance:none;border:0;cursor:pointer;
background:rgba(255,255,255,.18);color:#fff;
border:1px solid rgba(255,255,255,.30);backdrop-filter:blur(6px);
border-radius:10px;padding:8px 14px;
font-family:var(--ff-ar);font-size:12px;font-weight:700;
display:inline-flex;align-items:center;gap:6px;
transition:all .15s ease;position:relative;z-index:1
}
.tw-tl-mhdr-print:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.45);transform:translateY(-1px)}
.tw-tl-mhdr-print:active{transform:translateY(0)}
/* === Print mode (single-month report) === */
@media print {
body.tw-print-active{background:#fff !important}
body.tw-print-active .sidebar,
body.tw-print-active .topbar,
body.tw-print-active .mobile-bottom-bar,
body.tw-print-active .tawtheeq-hero,
body.tw-print-active .time-filter-wrap,
body.tw-print-active #tawtheeq-view-toggle,
body.tw-print-active #tawtheeq-tbl-card,
body.tw-print-active .tw-fab,
body.tw-print-active .ptr-indicator,
body.tw-print-active .login-overlay,
body.tw-print-active .sidebar-overlay,
body.tw-print-active .tw-tl-mhdr-print{display:none !important}
body.tw-print-active .main{margin:0 !important;padding:0 !important}
body.tw-print-active .page#page-tawtheeq{padding:0 !important;margin:0 !important}
body.tw-print-active #tawtheeq-cards-grid{display:block !important;margin:0 !important;padding:0 !important}
/* Show only the month group matching data-tw-print-month */
body.tw-print-active .tw-tl-mhdr,
body.tw-print-active .tw-tl-row{display:none !important}
}
/* Use attribute selector to dynamically match the requested month */
@media print {
body.tw-print-active[data-tw-print-month] .tw-tl{display:block !important}
}
/* JS sets a class on the matching mhdr and following rows (handled below) */
body.tw-print-active .tw-tl-mhdr.tw-print-show,
body.tw-print-active .tw-tl-row.tw-print-show{display:flex !important}
body.tw-print-active .tw-tl-row.tw-print-show{display:grid !important}
@media(max-width:768px){
.tw-tl-mhdr{padding:14px 16px;gap:12px;margin:18px 0 12px}
.tw-tl-mhdr-title{font-size:16px}
.tw-tl-mhdr-iso{font-size:10.5px}
.tw-tl-mhdr-stat{padding:0 10px}
.tw-tl-mhdr-stat-val{font-size:14px}
.tw-tl-mhdr-stat-lbl{font-size:9.5px}
.tw-tl-mhdr-sep{height:24px}
}
/* Vertical rail */
.tw-tl-row{position:relative;display:grid;grid-template-columns:160px 32px 1fr;gap:0;padding:6px 0 20px}
.tw-tl-row::before{
content:"";position:absolute;top:0;bottom:0;
right:175px;width:2px;background:var(--c-n-200)
}
[dir="ltr"] .tw-tl-row::before{right:auto;left:175px}
.tw-tl-row:last-child::before{bottom:auto;top:0;height:38px}
/* Date column */
.tw-tl-date{padding-top:6px;font-family:var(--ff-ar);text-align:left;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
[dir="ltr"] .tw-tl-date{text-align:right;align-items:flex-start}
.tw-tl-date-day{font-size:12.5px;font-weight:700;color:var(--c-n-700)}
.tw-tl-date-iso{font-size:11px;font-weight:500;color:var(--c-n-400);font-family:var(--ff-num)}
.tw-tl-date-hero{margin-top:6px;display:flex;flex-direction:column;gap:0}
.tw-tl-date-hero-lbl{font-size:10px;font-weight:600;color:var(--c-n-500);letter-spacing:.04em;font-family:var(--ff-ar)}
.tw-tl-date-hero-val{font-size:28px;font-weight:800;font-family:var(--ff-num);letter-spacing:-.02em;line-height:1.05;color:var(--c-primary-700)}
.tw-tl-row[data-color="success"] .tw-tl-date-hero-val{color:var(--c-success-700)}
.tw-tl-row[data-color="warning"] .tw-tl-date-hero-val{color:var(--c-warning-700)}
.tw-tl-row[data-color="teal"] .tw-tl-date-hero-val{color:var(--c-accent-700)}
.tw-tl-row[data-color="violet"] .tw-tl-date-hero-val{color:#6D28D9}
.tw-tl-row[data-color="rose"] .tw-tl-date-hero-val{color:var(--c-danger-700)}
.tw-tl-row[data-color="indigo"] .tw-tl-date-hero-val{color:var(--c-primary-700)}
/* Marker on rail */
.tw-tl-marker-cell{display:flex;justify-content:center;padding-top:14px}
.tw-tl-marker{
width:22px;height:22px;border-radius:50%;
background:var(--c-primary-500);border:4px solid #fff;
box-shadow:0 0 0 3px rgba(54,88,204,.18);position:relative;z-index:2
}
.tw-tl-row[data-color="success"] .tw-tl-marker{background:var(--c-success-500);box-shadow:0 0 0 3px rgba(16,185,129,.20)}
.tw-tl-row[data-color="warning"] .tw-tl-marker{background:var(--c-warning-500);box-shadow:0 0 0 3px rgba(245,158,11,.20)}
.tw-tl-row[data-color="teal"] .tw-tl-marker{background:var(--c-accent-500);box-shadow:0 0 0 3px rgba(6,176,170,.20)}
.tw-tl-row[data-color="violet"] .tw-tl-marker{background:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,.20)}
.tw-tl-row[data-color="rose"] .tw-tl-marker{background:var(--c-danger-500);box-shadow:0 0 0 3px rgba(244,63,94,.20)}
/* Timeline card */
.tw-tl-card{
background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-xl);
padding:0;display:flex;flex-direction:column;
box-shadow:0 2px 8px rgba(11,24,57,.04);overflow:hidden;position:relative;
transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease
}
.tw-tl-card:hover{box-shadow:0 8px 18px -6px rgba(11,24,57,.14);transform:translateY(-1px);border-color:var(--c-primary-200)}
/* Color strip — default is right edge (RTL is the page default); override for LTR */
.tw-tl-card::after{
content:"";position:absolute;top:0;bottom:0;right:0;width:6px;
background:var(--c-primary-500)
}
[dir="ltr"] .tw-tl-card::after{right:auto;left:0}
.tw-tl-row[data-color="success"] .tw-tl-card::after{background:var(--c-success-500)}
.tw-tl-row[data-color="warning"] .tw-tl-card::after{background:var(--c-warning-500)}
.tw-tl-row[data-color="teal"] .tw-tl-card::after{background:var(--c-accent-500)}
.tw-tl-row[data-color="violet"] .tw-tl-card::after{background:#8B5CF6}
.tw-tl-row[data-color="rose"] .tw-tl-card::after{background:var(--c-danger-500)}
.tw-tl-card-body{padding:14px 18px 12px;display:flex;flex-direction:column;gap:10px}
.tw-tl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tw-tl-chip{
display:inline-flex;align-items:center;gap:5px;
padding:5px 11px;border-radius:7px;
font-size:11.5px;font-weight:700;font-family:var(--ff-ar);
white-space:nowrap
}
.tw-tl-chip[data-kind="type"]{background:var(--c-primary-50);color:var(--c-primary-700)}
.tw-tl-row[data-color="success"] .tw-tl-chip[data-kind="type"]{background:var(--c-success-50);color:var(--c-success-700)}
.tw-tl-row[data-color="warning"] .tw-tl-chip[data-kind="type"]{background:var(--c-warning-50);color:var(--c-warning-700)}
.tw-tl-row[data-color="teal"] .tw-tl-chip[data-kind="type"]{background:var(--c-accent-50);color:var(--c-accent-700)}
.tw-tl-row[data-color="violet"] .tw-tl-chip[data-kind="type"]{background:#F5F3FF;color:#6D28D9}
.tw-tl-row[data-color="rose"] .tw-tl-chip[data-kind="type"]{background:var(--c-danger-50);color:var(--c-danger-700)}
.tw-tl-chip[data-kind="dist"]{background:var(--c-n-50);color:var(--c-n-700);border:1px solid var(--c-n-200)}
.tw-tl-chip[data-kind="status"]{
background:var(--c-success-50);color:var(--c-success-700);
margin-inline-start:auto
}
.tw-tl-title{font-size:17px;font-weight:800;color:var(--c-primary-900);font-family:var(--ff-ar);line-height:1.3;letter-spacing:-.01em;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tw-tl-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-family:var(--ff-ar);font-size:12.5px;color:var(--c-n-500);font-weight:500}
.tw-tl-meta span{display:inline-flex;align-items:center;gap:5px}
.tw-tl-money-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.tw-tl-money{
display:inline-flex;align-items:center;gap:6px;
padding:7px 12px;border-radius:8px;
font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
font-weight:800;font-size:13.5px;direction:ltr
}
.tw-tl-money bdi{unicode-bidi:isolate}
.tw-tl-money[data-cur="ils"]{background:var(--c-success-50);color:var(--c-success-700)}
.tw-tl-money[data-cur="usd"]{background:var(--c-info-50,#EFF6FF);color:var(--c-info-700,#1D4ED8)}
.tw-tl-money-cur{font-family:var(--ff-ar);font-size:11px;font-weight:700;opacity:.8}
.tw-tl-actions{margin-inline-start:auto;display:inline-flex;gap:14px;font-family:var(--ff-ar);font-weight:700;font-size:12px}
.tw-tl-actions a{color:var(--c-primary-700);text-decoration:none;cursor:pointer}
.tw-tl-actions a:hover{color:var(--c-primary-900)}
/* Mobile timeline */
@media(max-width:768px){
.tw-tl{padding:0 4px 8px}
.tw-tl-row{grid-template-columns:28px 1fr;gap:10px;padding:0 0 16px}
/* Center the rail in the 28px marker column → right:13 + width:2 = center at right:14 = 28/2 */
.tw-tl-row::before{right:13px;left:auto;width:2px}
[dir="ltr"] .tw-tl-row::before{right:auto;left:13px}
.tw-tl-marker-cell{padding-top:8px;justify-content:center;align-self:flex-start}
.tw-tl-marker{width:18px;height:18px;border-width:3px}
.tw-tl-row:last-child::before{height:30px}
.tw-tl-date{display:none}
.tw-tl-card{order:2;grid-column:2}
.tw-tl-mobile-date{display:flex;align-items:center;justify-content:space-between;padding:0 2px 4px;font-family:var(--ff-ar)}
.tw-tl-mobile-date-day{font-size:12px;font-weight:700;color:var(--c-n-700)}
.tw-tl-mobile-date-iso{font-size:11px;color:var(--c-n-400);font-family:var(--ff-num)}
.tw-tl-card-body{padding:12px 14px 11px;gap:8px}
.tw-tl-card::after{width:4px}
.tw-tl-title{font-size:14.5px}
.tw-tl-meta{font-size:11.5px;gap:12px}
.tw-tl-money{font-size:12.5px;padding:6px 10px}
.tw-tl-chip{font-size:11px;padding:4px 9px}
/* Inline beneficiaries pill instead of large hero on mobile */
.tw-tl-mobile-hero{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:8px;font-family:var(--ff-ar);
font-weight:800;font-size:13px;background:var(--c-primary-50);color:var(--c-primary-700)
}
.tw-tl-row[data-color="success"] .tw-tl-mobile-hero{background:var(--c-success-50);color:var(--c-success-700)}
.tw-tl-row[data-color="warning"] .tw-tl-mobile-hero{background:var(--c-warning-50);color:var(--c-warning-700)}
.tw-tl-row[data-color="teal"] .tw-tl-mobile-hero{background:var(--c-accent-50);color:var(--c-accent-700)}
.tw-tl-row[data-color="violet"] .tw-tl-mobile-hero{background:#F5F3FF;color:#6D28D9}
.tw-tl-row[data-color="rose"] .tw-tl-mobile-hero{background:var(--c-danger-50);color:var(--c-danger-700)}
}
@media(min-width:769px){
.tw-tl-mobile-date,.tw-tl-mobile-hero{display:none}
}
/* Dark mode */
html[data-theme="dark"] .tw-tl-card{background:#0F172A !important;border-color:#1E293B}
html[data-theme="dark"] .tw-tl-title{color:#F1F5F9}
html[data-theme="dark"] .tw-tl-meta{color:#94A3B8}
html[data-theme="dark"] .tw-tl-date-day{color:#CBD5E1}
html[data-theme="dark"] .tw-tl-date-iso{color:#64748B}
html[data-theme="dark"] .tw-tl-date-hero-lbl{color:#94A3B8}
html[data-theme="dark"] .tw-tl-row::before{background:#1E293B}
html[data-theme="dark"] .tw-tl-marker{border-color:#0F172A}
html[data-theme="dark"] .tw-tl-chip[data-kind="dist"]{background:#1E293B;color:#CBD5E1;border-color:#334155}
html[data-theme="dark"] .tw-tl-money[data-cur="ils"]{background:rgba(16,185,129,.15);color:#34D399}
html[data-theme="dark"] .tw-tl-money[data-cur="usd"]{background:rgba(29,78,216,.18);color:#60A5FA}
/* === Calendar Heatmap (GitHub-style) === */
.cal-heatmap-card{background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-xl);padding:20px 22px;margin-bottom:18px;box-shadow:var(--sh-sm)}
.cal-hm-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cal-hm-head h3{font-size:15px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);margin:0;letter-spacing:-.01em}
.cal-hm-head p{font-size:11.5px;color:var(--c-n-500);font-family:var(--ff-ar);margin:3px 0 0}
.cal-hm-legend{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--c-n-500);font-family:var(--ff-ar)}
.cal-hm-legend-label{padding:0 4px}
.cal-hm-cell{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--c-n-100)}
.cal-hm-cell[data-level="0"]{background:var(--c-n-100)}
.cal-hm-cell[data-level="1"]{background:#DDE5FF}
.cal-hm-cell[data-level="2"]{background:#8AA1F5}
.cal-hm-cell[data-level="3"]{background:#3658CC}
.cal-hm-cell[data-level="4"]{background:#1B3387}
.cal-hm-wrap{display:flex;gap:6px;align-items:flex-start}
.cal-hm-days{display:flex;flex-direction:column;gap:3px;padding-top:18px;flex-shrink:0}
.cal-hm-day-label{font-size:9.5px;color:var(--c-n-400);font-family:var(--ff-ar);height:11px;line-height:11px;width:32px}
.cal-hm-scroll{flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.cal-hm-months{display:flex;justify-content:space-between;font-size:10px;color:var(--c-n-500);font-family:var(--ff-ar);font-weight:600;margin-bottom:4px;padding:0 6px}
.cal-hm-grid{display:grid;grid-template-rows:repeat(7,11px);grid-auto-flow:column;grid-auto-columns:11px;gap:3px}
.cal-hm-grid .cal-hm-cell{cursor:pointer;transition:transform .1s ease}
.cal-hm-grid .cal-hm-cell:hover{transform:scale(1.4);box-shadow:0 0 0 2px var(--c-primary-300);border-radius:3px}
.cal-hm-stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;margin-top:14px;border-top:1px solid var(--c-n-100)}
.cal-hm-stat{display:flex;flex-direction:column;gap:2px}
.cal-hm-stat-label{font-size:10px;color:var(--c-n-500);font-family:var(--ff-ar);letter-spacing:.04em;font-weight:600}
.cal-hm-stat strong{font-size:16px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
@media(max-width:768px){
.cal-heatmap-card{padding:16px}
.cal-hm-head{align-items:flex-start;flex-direction:column;gap:8px}
.cal-hm-stats{gap:14px}
.cal-hm-stat strong{font-size:14px}
}
/* === Reports · Hero Header === */
.reports-hero{position:relative;border-radius:var(--r-2xl);padding:32px 36px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#1B3387 60%,#3658CC 100%);box-shadow:0 16px 36px -10px rgba(11,24,57,.4)}
.rh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rh-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.rh-orb-1{width:420px;height:420px;background:radial-gradient(circle,rgba(6,176,170,.6),transparent 70%);top:-160px;right:-120px}
.rh-orb-2{width:340px;height:340px;background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%);bottom:-130px;left:-90px}
.rh-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.rh-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
.rh-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(184,199,255,.85);font-family:var(--ff-ar);text-transform:uppercase}
.rh-text h2{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0;color:#fff;font-family:var(--ff-ar);line-height:1.2}
.rh-text p{font-size:13px;color:rgba(184,199,255,.85);margin:0;font-family:var(--ff-ar);line-height:1.6}
.rh-quick{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.rh-mini{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);min-width:160px}
.rh-mini-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;line-height:1;background:rgba(255,255,255,.1)}
.rh-mini[data-color="indigo"] .rh-mini-icon{background:rgba(54,88,204,.35)}
.rh-mini[data-color="rose"] .rh-mini-icon{background:rgba(239,68,68,.35)}
.rh-mini[data-color="success"] .rh-mini-icon{background:rgba(16,185,129,.35)}
.rh-mini-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.rh-mini-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.rh-mini-val{font-size:18px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;line-height:1.1;white-space:nowrap}
/* === Pivot/heatmap conditional formatting in report tables === */
.tbl-card[data-heatmap] td.heat-cell{background-clip:padding-box;font-variant-numeric:tabular-nums;font-family:var(--ff-num)}
td.heat-0{background:#FFFFFF;color:var(--c-n-300)}
td.heat-1{background:#EEF2FF;color:var(--c-primary-700)}
td.heat-2{background:#DDE5FF;color:var(--c-primary-700);font-weight:600}
td.heat-3{background:#B8C7FF;color:var(--c-primary-800);font-weight:600}
td.heat-4{background:#8AA1F5;color:#FFFFFF;font-weight:600}
td.heat-5{background:#3658CC;color:#FFFFFF;font-weight:700}
/* === Reports tab content polish === */
.rpt-tab .tbl-card{margin-bottom:16px}
.rpt-tab .tbl-card h3{display:flex;align-items:center;gap:8px}
.rpt-tab .tbl-card h3::before{content:none}
/* Reports hero responsive */
@media(max-width:1024px){
.reports-hero{padding:26px 28px}
.rh-text h2{font-size:24px}
}
@media(max-width:768px){
.reports-hero{padding:22px;border-radius:var(--r-xl)}
.rh-content{flex-direction:column;align-items:stretch;gap:18px}
.rh-text h2{font-size:20px}
.rh-text p{font-size:12px}
.rh-quick{display:grid;grid-template-columns:1fr 1fr;width:100%}
.rh-mini{min-width:0;padding:12px 14px}
.rh-mini-val{font-size:14px}
}
@media(max-width:480px){
.rh-quick{grid-template-columns:1fr}
}
/* === Sandooq · Hero Balance Card === */
.sandooq-hero{position:relative;border-radius:var(--r-2xl);padding:32px 36px;margin-bottom:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B1839 0%,#152663 50%,#04827E 100%);box-shadow:0 16px 40px -10px rgba(11,24,57,.4)}
.sh-decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sh-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6}
.sh-orb-1{width:380px;height:380px;background:radial-gradient(circle,rgba(6,176,170,.7),transparent 70%);top:-140px;right:-100px}
.sh-orb-2{width:320px;height:320px;background:radial-gradient(circle,rgba(92,123,224,.5),transparent 70%);bottom:-130px;left:-90px}
.sh-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.sh-main{display:flex;flex-direction:column;gap:8px;min-width:220px}
.sh-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.sh-balance{font-size:48px;font-weight:700;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.05;text-shadow:0 2px 12px rgba(0,0,0,.15)}
.sh-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.sh-meta-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.sh-meta-key{opacity:.75}
.sh-meta-val{font-weight:600;color:#fff;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
.sh-accent{color:var(--c-accent-200) !important}
.sh-meta-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25)}
.sh-side{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sh-mini{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);min-width:160px}
.sh-mini-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:rgba(184,199,255,.85);font-family:var(--ff-ar)}
.sh-mini-val{font-size:20px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.sh-mini-in .sh-mini-val{color:#86efac}
.sh-mini-out .sh-mini-val{color:#fca5a5}
.sh-mini-trend{font-size:10px;font-weight:600;color:rgba(255,255,255,.65);font-family:var(--ff-num)}
/* === Quick Actions Grid (also reused for other pages) === */
.sandooq-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:18px}
.qa-action{appearance:none;background:#fff;border:1px solid var(--c-n-200);border-radius:var(--r-lg);padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:right;transition:all .2s ease;font-family:var(--ff-ar);box-shadow:var(--sh-sm);width:100%}
.qa-action:hover{border-color:var(--c-primary-300);background:var(--c-primary-50);transform:translateY(-2px);box-shadow:var(--sh-md)}
.qa-action .qa-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;line-height:1}
.qa-action .qa-text{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;text-align:right}
.qa-action .qa-title{font-size:13.5px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar)}
.qa-action .qa-sub{font-size:11px;color:var(--c-n-500);font-family:var(--ff-ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-action .qa-arrow{font-size:18px;color:var(--c-n-400);transition:transform .2s ease,color .2s ease;flex-shrink:0}
.qa-action:hover .qa-arrow{color:var(--c-primary-600);transform:translateX(-3px)}
/* Sandooq hero responsive */
@media(max-width:768px){
.sandooq-hero{padding:22px;border-radius:var(--r-xl)}
.sh-content{flex-direction:column;align-items:stretch;gap:18px}
.sh-balance{font-size:36px}
.sh-side{width:100%}
.sh-mini{flex:1;min-width:130px;padding:12px 14px}
.sh-mini-val{font-size:16px}
.sandooq-actions{grid-template-columns:1fr 1fr;gap:10px}
.qa-action{padding:12px;gap:10px}
.qa-action .qa-icon{width:38px;height:38px;font-size:17px}
.qa-action .qa-title{font-size:12.5px}
.qa-action .qa-sub{font-size:10px}
}
@media(max-width:480px){
.sh-balance{font-size:30px}
.sh-meta{font-size:10px;gap:10px}
.sandooq-actions{grid-template-columns:1fr}
}
/* === Excel-like column letters row === */
thead.has-letters tr.col-letters{background:#fff}
.col-letter{background:var(--c-n-50) !important;color:var(--c-n-400) !important;font-size:10px !important;font-weight:600 !important;letter-spacing:.1em !important;font-family:var(--ff-en) !important;padding:4px 9px !important;text-align:center !important;border-bottom:1px solid var(--c-n-200) !important;text-transform:uppercase}
thead.has-letters tr:last-child th{border-top:1px solid var(--c-n-200)}
/* === Status dot indicator on badges === */
.bdg.has-dot::before,.status-bdg.has-dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:5px;flex-shrink:0;vertical-align:middle}
/* === Sigma glyph in totals row === */
.sigma-glyph{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:rgba(6,176,170,.18);color:var(--c-accent-500);font-size:14px;font-weight:700;font-family:var(--ff-en);margin-left:8px;line-height:1;vertical-align:middle}
/* === Toolbar chips (filters with values) === */
.tbl-toolbar .filter-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--c-n-200);font-size:12px;font-weight:600;color:var(--c-n-600);font-family:var(--ff-ar);transition:all .15s ease;cursor:pointer}
.tbl-toolbar .filter-chip:hover{border-color:var(--c-primary-300);color:var(--c-primary-700)}
.tbl-toolbar .filter-chip.active{background:var(--c-primary-50);border-color:var(--c-primary-300);color:var(--c-primary-800)}
.tbl-toolbar .filter-chip-value{font-weight:700;color:var(--c-primary-600)}
/* === Empty state polish === */
.empty-state{text-align:center;padding:48px 24px;color:var(--c-n-500)}
.empty-state-icon{font-size:48px;margin-bottom:12px;opacity:.5}
.empty-state-title{font-size:15px;font-weight:600;color:var(--c-n-700);margin-bottom:4px}
.empty-state-sub{font-size:12px;color:var(--c-n-400)}
/* === Activity feed polish === */
.activity-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--c-n-100);transition:background .15s ease}
.activity-row:hover{background:var(--c-n-50)}
.activity-row .avatar{width:36px;height:36px;border-radius:999px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;font-family:var(--ff-en)}
.activity-row .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.activity-row .meta strong{font-size:13px;color:var(--c-primary-900);font-weight:600;font-family:var(--ff-ar)}
.activity-row .meta small{font-size:11px;color:var(--c-n-400)}
.activity-row .value{font-size:12px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:999px;background:var(--c-n-100);color:var(--c-n-700)}
/* === Quick-action card === */
.qa-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--c-n-200);cursor:pointer;transition:all .15s ease}
.qa-card:hover{border-color:var(--c-primary-300);background:var(--c-primary-50);transform:translateX(-2px)}
.qa-card .qa-icon{width:42px;height:42px;border-radius:11px;background:var(--c-primary-50);color:var(--c-primary-600);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.qa-card .qa-text{flex:1}
.qa-card .qa-title{font-size:13px;font-weight:600;color:var(--c-primary-900);font-family:var(--ff-ar)}
.qa-card .qa-sub{font-size:11px;color:var(--c-n-500);margin-top:2px}
/* === Chart card accent indicators === */
.chart-card{position:relative}
.chart-card h3{display:flex;align-items:center;gap:8px}
.chart-card h3::before{content:"";display:inline-block;width:4px;height:18px;border-radius:2px;background:var(--c-primary-500);flex-shrink:0}
.chart-card.cc-indigo h3::before{background:var(--c-primary-500)}
.chart-card.cc-teal h3::before{background:var(--c-accent-500)}
.chart-card.cc-success h3::before{background:var(--c-success-500)}
.chart-card.cc-warning h3::before{background:var(--c-warning-500)}
.chart-card.cc-danger h3::before{background:var(--c-danger-500)}
.chart-card.cc-violet h3::before{background:#8B5CF6}
.chart-card canvas{max-height:300px;min-height:220px}
/* === Dashboard customize panel (modernized) === */
#dashboard-customize-panel{background:#fff !important;border:1px solid var(--c-n-200) !important;border-radius:var(--r-xl) !important;padding:20px !important;box-shadow:var(--sh-md);margin-bottom:18px !important}
#dashboard-customize-panel h4{font-size:14px;font-weight:700;color:var(--c-primary-900);margin-bottom:12px;font-family:var(--ff-ar);letter-spacing:-.01em}
/* === Dashboard filters modernized === */
.db-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;background:#fff;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--c-n-200);box-shadow:var(--sh-sm)}
.db-filter-group{display:flex;flex-direction:column;gap:5px;min-width:140px}
.db-filter-group label{font-size:10px;font-weight:600;color:var(--c-n-500);letter-spacing:.04em;font-family:var(--ff-ar)}
.db-filter-group .fi,.db-filter-group .fsel{padding:8px 10px;border:1px solid var(--c-n-200);border-radius:8px;font-size:12.5px;background:var(--c-n-50);font-family:var(--ff-ar)}
.db-filter-group .fi:focus,.db-filter-group .fsel:focus{background:#fff;border-color:var(--c-primary-500);box-shadow:0 0 0 3px rgba(54,88,204,.1)}
.db-filter-group .btn{margin-top:2px}
/* === Recent activity ticker polish (#db-recent) === */
#db-recent.v2-polished > *{margin-bottom:6px;border-radius:10px;transition:background .15s ease}
#db-recent.v2-polished > *:hover{background:var(--c-n-50)}
/* === Charts grid responsive === */
.charts-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px}
/* ================================================================
v2 Responsive · Mobile-first guardrails (web + mobile harmony)
================================================================ */
/* Tablet */
@media(max-width:1024px){
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.dh-stat-val{font-size:16px}
.content{padding:20px}
}
/* Mobile (≤768px) */
@media(max-width:768px){
/* Layout core */
.main{margin-right:0}
/* Hero */
.dashboard-hero{padding:20px;margin-bottom:14px;border-radius:var(--r-xl)}
.dh-content{flex-direction:column;align-items:flex-start;gap:16px}
.dh-text h2{font-size:20px}
.dh-text p{font-size:12px}
.dh-stats{width:100%;flex-wrap:wrap;gap:12px;padding:10px 14px}
.dh-stat-sep{display:none}
.dh-stat{flex:1;min-width:80px}
.dh-stat-val{font-size:14px}
.dh-stat-label{font-size:9px}
/* Filters */
.db-filters{padding:12px;gap:8px}
.db-filter-group{flex:1 1 calc(50% - 4px);min-width:calc(50% - 4px)}
.db-filter-group label{font-size:9px}
.db-filter-group .fi,.db-filter-group .fsel{padding:7px 9px;font-size:12px}
/* Charts */
.charts-grid{grid-template-columns:1fr;gap:14px}
.chart-card{padding:16px}
.chart-card h3{font-size:13px;margin-bottom:12px}
.chart-card h3::before{height:14px}
.chart-card canvas{max-height:240px;min-height:180px}
/* Excel column letters compact */
.col-letter{padding:3px 6px !important;font-size:9px !important;letter-spacing:.05em !important}
/* Quick actions */
.qa-card{padding:12px}
.qa-card .qa-icon{width:36px;height:36px;font-size:18px}
/* Activity rows */
.activity-row{padding:12px 14px;gap:10px}
.activity-row .avatar{width:32px;height:32px;font-size:12px}
.activity-row .meta strong{font-size:12px}
.activity-row .meta small{font-size:10px}
.activity-row .value{font-size:11px;padding:3px 8px}
/* Stats grid */
.stats-grid{grid-template-columns:1fr 1fr;gap:10px}
.stat-card{padding:14px}
.stat-card .val{font-size:20px}
.stat-card .lbl{font-size:10px}
.stat-card .sub{font-size:10px}
/* Modal */
.mdl{padding:20px;max-width:100%;width:calc(100% - 24px);border-radius:var(--r-lg)}
.mdl h3{font-size:16px}
.fg,.fg2{grid-template-columns:1fr}
/* Buttons */
.btn{padding:10px 14px;font-size:12.5px}
.btn-sm{padding:6px 10px;font-size:11px}
/* Sub-tabs scrollable */
.subtabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none;max-width:100%}
.subtabs::-webkit-scrollbar{display:none}
.stab{flex-shrink:0;font-size:12px;padding:8px 14px}
/* Tables — preserve horizontal scroll */
.tbl-card{border-radius:var(--r-lg)}
th,td{font-size:12px;padding:10px 11px}
.tbl-toolbar{padding:10px 12px;gap:6px}
.srch{font-size:12px;min-width:120px}
/* Topbar tablet compact (≤900px) */
.topbar{padding:10px 14px}
.tb-brand-page{font-size:10px}
/* Login */
.login-box{padding:28px 24px;margin:16px}
.login-box .logo{width:64px;height:64px;font-size:36px}
.login-box h2{font-size:20px}
}
/* Small mobile (≤480px) */
@media(max-width:480px){
.dashboard-hero{padding:18px;margin-bottom:12px}
.dh-text h2{font-size:18px}
.dh-stat{min-width:calc(50% - 6px)}
.topbar{padding:10px 14px;min-height:56px;gap:8px}
.content{padding:14px 12px}
.login-box{padding:24px 20px;border-radius:var(--r-xl);margin:12px}
.login-box .logo{width:60px;height:60px;font-size:32px;border-radius:16px}
.login-box h2{font-size:18px}
}
/* Touch targets */
@media(pointer:coarse){
.btn,.fi,.fsel,.srch,.pb,.stab,.topbar .badge{min-height:40px}
.nav-item{min-height:44px;padding:11px 22px}
}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
.stat-card:hover,.btn-p:hover,.qa-card:hover,.inv-item:hover{transform:none}
}
/* ================================================================
v2 Dark mode · semantic tokens flip when html[data-theme="dark"]
================================================================ */
html[data-theme="dark"]{
/* Surface tokens */
--c-bg:#0B1220;--c-surface:#111827;
/* Neutrals are inverted but keep semantic meaning */
--c-n-50:#0F172A;--c-n-100:#1E293B;--c-n-200:#334155;--c-n-300:#475569;
--c-n-400:#94A3B8;--c-n-500:#CBD5E1;--c-n-600:#E2E8F0;--c-n-700:#F1F5F9;
--c-n-800:#F8FAFC;--c-n-900:#FFFFFF;
/* Brand stays the same; just slightly brightened tints */
--c-primary-50:rgba(54,88,204,.18);
--c-primary-100:rgba(54,88,204,.25);
--c-accent-50:rgba(6,176,170,.18);
--c-success-50:rgba(16,185,129,.18);
--c-warning-50:rgba(245,158,11,.18);
--c-danger-50:rgba(239,68,68,.18);
--c-info-50:rgba(59,130,246,.18);
/* Brand gradients adjusted */
--grad-sidebar:linear-gradient(180deg,#0F172A,#1E293B);
--grad-surface:linear-gradient(135deg,#0F172A,#1E293B);
/* Shadows softened */
--sh-sm:0 1px 2px rgba(0,0,0,.45);
--sh-md:0 4px 8px rgba(0,0,0,.4);
--sh-lg:0 8px 24px -4px rgba(0,0,0,.5);
--sh-xl:0 20px 40px -8px rgba(0,0,0,.55);
--sh-glow:0 4px 14px -2px rgba(54,88,204,.4);
color-scheme:dark;
}
/* Apply dark mode to ALL surfaces */
html[data-theme="dark"] body{background:#0B1220;color:#F1F5F9}
html[data-theme="dark"] .topbar{background:#111827;border-bottom-color:#1E293B}
html[data-theme="dark"] .tb-brand-org{color:#F1F5F9}
html[data-theme="dark"] .tb-brand-page,html[data-theme="dark"] .topbar h1.tb-brand-page{color:#94A3B8}
html[data-theme="dark"] .tb-chip{background:#1E293B;color:#CBD5E1}
html[data-theme="dark"] .tb-chip:hover{background:#334155}
html[data-theme="dark"] .tb-clock #topbar-clock{color:#F1F5F9}
html[data-theme="dark"] .tb-fx{background:rgba(34,197,94,.18);color:#86EFAC}
html[data-theme="dark"] .tb-fx-text{color:#A7F3D0}
html[data-theme="dark"] .tb-action-cluster{background:#1E293B;border-color:#334155}
html[data-theme="dark"] .tb-action-cluster .tb-icon-btn,
html[data-theme="dark"] .tb-action-cluster .notification-bell-btn{color:#F1F5F9}
html[data-theme="dark"] .tb-action-cluster .tb-icon-btn:hover,
html[data-theme="dark"] .tb-action-cluster .notification-bell-btn:hover{background:#334155}
html[data-theme="dark"] .tb-action-cluster .tb-icon-btn + .tb-icon-btn,
html[data-theme="dark"] .tb-action-cluster .tb-icon-btn + .notification-bell-wrap,
html[data-theme="dark"] .tb-action-cluster .notification-bell-wrap + .tb-icon-btn,
html[data-theme="dark"] .tb-action-cluster .tb-icon-btn:nth-child(n+2){border-right-color:#334155}
html[data-theme="dark"] .tb-icon-badge{border-color:#1E293B}
html[data-theme="dark"] .tb-lang-pill{background:#1E293B;color:#F1F5F9;border-color:#334155}
html[data-theme="dark"] .tb-lang-pill:hover{background:#334155}
html[data-theme="dark"] .tb-user{background:#1E293B;border-color:#334155}
html[data-theme="dark"] .tb-user-name{color:#F1F5F9}
html[data-theme="dark"] .tb-user-role{color:#94A3B8}
html[data-theme="dark"] .tb-logout{background:rgba(239,68,68,.16);color:#FCA5A5;border-color:rgba(252,165,165,.3)}
html[data-theme="dark"] .tb-logout:hover{background:rgba(239,68,68,.28)}
/* Cards/surfaces */
html[data-theme="dark"] .stat-card,html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .tbl-card,html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .sum-card,html[data-theme="dark"] .item-card,
html[data-theme="dark"] .inv-item,html[data-theme="dark"] .role-tile,
html[data-theme="dark"] .qa-card,html[data-theme="dark"] .qa-action,
html[data-theme="dark"] .emp-card,
html[data-theme="dark"] .sup-card,html[data-theme="dark"] .kb-card,
html[data-theme="dark"] .kanban-col,html[data-theme="dark"] .alert-card,
html[data-theme="dark"] .cal-heatmap-card,html[data-theme="dark"] .activity-row,
html[data-theme="dark"] .dashboard-customize-panel,
html[data-theme="dark"] #dashboard-customize-panel,
html[data-theme="dark"] .db-filters,html[data-theme="dark"] .ia-filter,
html[data-theme="dark"] .subtabs,html[data-theme="dark"] .quote-tabs,
html[data-theme="dark"] .view-toggle,html[data-theme="dark"] .import-steps{
background:#111827 !important;border-color:#1E293B !important;color:#F1F5F9
}
html[data-theme="dark"] .stat-card .val,
html[data-theme="dark"] .tbl-hdr h3,
html[data-theme="dark"] .chart-card h3,
html[data-theme="dark"] .mdl h3,
html[data-theme="dark"] #page-title{color:#F8FAFC}
html[data-theme="dark"] .stat-card .lbl,
html[data-theme="dark"] .stat-card .sub,
html[data-theme="dark"] .pgn-info,
html[data-theme="dark"] .empty-state-sub{color:#94A3B8}
/* Tables */
html[data-theme="dark"] table{color:#F1F5F9}
html[data-theme="dark"] th{background:#1E293B !important;color:#CBD5E1 !important;border-color:#334155 !important}
html[data-theme="dark"] td{background:#111827 !important;color:#F1F5F9;border-color:#1E293B !important}
html[data-theme="dark"] tbody tr:nth-child(even) td{background:#0F172A !important}
html[data-theme="dark"] tbody tr:hover td{background:rgba(54,88,204,.18) !important}
html[data-theme="dark"] tfoot.totals-foot td{background:#000814 !important;color:#06B0AA !important}
html[data-theme="dark"] .col-letter{background:#0F172A !important;color:#64748B !important}
html[data-theme="dark"] .excel-foot{background:#0F172A;border-color:#1E293B}
html[data-theme="dark"] .excel-foot-item{color:#94A3B8}
html[data-theme="dark"] .excel-foot-item strong{color:#F1F5F9}
/* Forms */
html[data-theme="dark"] .fi,html[data-theme="dark"] .fsel,html[data-theme="dark"] .srch{
background:#1E293B !important;border-color:#334155 !important;color:#F1F5F9 !important
}
html[data-theme="dark"] .fi:focus,html[data-theme="dark"] .fsel:focus,html[data-theme="dark"] .srch:focus{
border-color:var(--c-primary-400) !important;background:#0F172A !important;
box-shadow:0 0 0 3px rgba(54,88,204,.25) !important
}
html[data-theme="dark"] .fgrp label,html[data-theme="dark"] .db-filter-group label{color:#CBD5E1}
html[data-theme="dark"] ::placeholder{color:#64748B !important}
/* Buttons */
html[data-theme="dark"] .btn-out{background:#1E293B;color:#CBD5E1;border-color:#334155}
html[data-theme="dark"] .btn-out:hover{background:rgba(54,88,204,.2);color:#B8C7FF;border-color:var(--c-primary-400)}
html[data-theme="dark"] .pb{background:#1E293B;border-color:#334155;color:#CBD5E1}
html[data-theme="dark"] .pb:hover{background:rgba(54,88,204,.25);color:#B8C7FF;border-color:var(--c-primary-400)}
/* Modal */
html[data-theme="dark"] .mov{background:rgba(0,0,0,.65)}
html[data-theme="dark"] .mdl{background:#111827;color:#F1F5F9}
html[data-theme="dark"] .mdl .msub{color:#94A3B8}
/* Badges (color-tinted backgrounds keep meaning) */
html[data-theme="dark"] .b-blue{background:rgba(54,88,204,.25);color:#B8C7FF}
html[data-theme="dark"] .b-green{background:rgba(16,185,129,.22);color:#86efac}
html[data-theme="dark"] .b-red{background:rgba(239,68,68,.22);color:#fca5a5}
html[data-theme="dark"] .b-yellow{background:rgba(245,158,11,.22);color:#fcd34d}
html[data-theme="dark"] .b-orange{background:rgba(249,115,22,.22);color:#fdba74}
html[data-theme="dark"] .b-purple{background:rgba(139,92,246,.22);color:#c4b5fd}
html[data-theme="dark"] .b-gray{background:#334155;color:#CBD5E1}
html[data-theme="dark"] .b-teal{background:rgba(6,176,170,.22);color:#7FE5E0}
/* Sidebar already dark-friendly; emphasize active a bit */
html[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#04070F,#0F172A)}
/* Hero banners - slight darken adjustments to compensate */
html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .reports-hero,
html[data-theme="dark"] .invoices-hero,
html[data-theme="dark"] .financial-hero,
html[data-theme="dark"] .parties-hero,
html[data-theme="dark"] .admin-hero,
html[data-theme="dark"] .lists-hero,
html[data-theme="dark"] .ia-hero,
html[data-theme="dark"] .users-hero,
html[data-theme="dark"] .quotes-hero,
html[data-theme="dark"] .sandooq-hero,
html[data-theme="dark"] .health-card,
html[data-theme="dark"] .generic-hero{
filter:saturate(.85) brightness(.85);
}
/* Filter chips */
html[data-theme="dark"] .tbl-toolbar .filter-chip{background:#1E293B;border-color:#334155;color:#CBD5E1}
html[data-theme="dark"] .tbl-toolbar .filter-chip.active{background:rgba(54,88,204,.25);border-color:var(--c-primary-400);color:#B8C7FF}
/* Heatmap cells in dark mode use brighter intensities */
html[data-theme="dark"] .cal-hm-cell[data-level="0"]{background:#1E293B}
/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#334155}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#475569}
/* Misc text */
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5{color:#F8FAFC}
html[data-theme="dark"] p,html[data-theme="dark"] span:not(.bdg):not([class*="-icon"]){color:inherit}
html[data-theme="dark"] .topbar-sep{color:#475569}
html[data-theme="dark"] .nav-sec{color:rgba(255,255,255,.5)}
/* Theme toggle button (added by JS) */
.theme-toggle{appearance:none;background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;color:var(--c-n-600);transition:all .15s ease;font-size:18px;line-height:1}
.theme-toggle:hover{background:var(--c-n-100);color:var(--c-primary-700)}
html[data-theme="dark"] .theme-toggle{color:#CBD5E1}
html[data-theme="dark"] .theme-toggle:hover{background:#1E293B;color:#fcd34d}
/* ================================================================
v2 Print styles · clean A4 output for invoices, quotes, ledger
================================================================ */
@media print{
@page{size:A4;margin:14mm}
/* Reset surfaces and colors */
*{box-shadow:none !important;text-shadow:none !important;animation:none !important;transition:none !important}
html,body{background:#FFFFFF !important;color:#0F172A !important;font-family:var(--ff-ar) !important;font-size:11pt;line-height:1.55}
/* Hide chrome */
.sidebar,.topbar,.mobile-bottom-bar,.mobile-bottom-bar *,
.login-overlay,.login-overlay *,
.ptr-indicator,.app-loading,
.notification-panel,.notification-bell-wrap,
.hamburger,#topbar-actions,#user-badge,
.subtabs,.view-toggle,.tbl-toolbar,
.pgn,.export-wrap,.export-menu,
.filter-chip,.db-filters,.ia-filter,
.qa-card,.qa-action,.qa-arrow,
.uh-actions,.qh-actions,.ah-quick,
.alert-card .alert-action,
.makhzan-alert-banner .mb-action,
.step-item .step-num::after,.import-steps,
.modal-overlay,.mov,.uperm-modal-overlay,
.btn:not(.btn-print-show),
button:not(.btn-print-show),
.topbar-actions,
/* hide all interactive controls */
input[type=button],input[type=submit],
/* hide page tabs except active */
.page:not(.active){display:none !important}
/* Promote main */
.main{margin:0 !important;padding:0 !important;display:block !important}
.content{padding:0 !important}
/* Hero banners: keep but flatten */
.dashboard-hero,.sandooq-hero,.reports-hero,.financial-hero,
.invoices-hero,.quotes-hero,.parties-hero,.admin-hero,
.lists-hero,.ia-hero,.users-hero,.health-card,.generic-hero{
color:#0B1839 !important;
background:#FFFFFF !important;
border:1.5px solid #0B1839 !important;
box-shadow:none !important;
padding:14pt 18pt !important;
page-break-inside:avoid;
margin-bottom:10pt !important;
}
.dh-decorations,.sh-decorations,.rh-decorations,.fh-decorations,
.ih-decorations,.qh-decorations,.ph-decorations,.ah-decorations,
.lh-decorations,.ia-decorations,.uh-decorations,.hc-decorations,
.gh-decorations,
.dh-orb,.sh-orb,.rh-orb,.fh-orb,.ih-orb,.qh-orb,.ph-orb,
.ah-orb,.lh-orb,.ia-orb,.uh-orb,.hc-orb,.gh-orb{display:none !important}
/* Re-color hero text */
.dh-text *,.sh-main *,.rh-text *,.fh-text *,.ih-text *,.qh-text *,
.ph-text *,.ah-text *,.lh-text *,.ia-text *,.uh-text *,.hc-info *,.gh-text *,
.ih-stat *,.fh-stat *,.ph-stat *,.uh-stat *,.lh-stat *,.gh-stat *,.sh-mini *{
color:#0B1839 !important;
}
/* Cards */
.tbl-card,.chart-card,.stat-card,.kpi-card,.cal-heatmap-card{
background:#FFFFFF !important;
border:1px solid #CBD5E1 !important;
box-shadow:none !important;
page-break-inside:avoid;
margin-bottom:10pt !important;
}
/* Tables */
table{border-collapse:collapse;width:100%}
th{background:#F1F5F9 !important;color:#0F172A !important;border:1px solid #CBD5E1 !important;font-weight:700;padding:6pt 8pt !important}
td{border:1px solid #E2E8F0 !important;padding:5pt 8pt !important;background:#FFFFFF !important}
tbody tr:nth-child(even) td{background:#FAFBFC !important}
tfoot.totals-foot td{background:#0B1839 !important;color:#FFFFFF !important;font-weight:700}
th[data-col]{cursor:default}
th[data-col] .col-filter-icon,th[data-col] span:not(:first-child){display:none !important}
/* Hide row select column on print */
.th-sel,td:has(input[type="checkbox"]):first-child{display:none}
/* Charts: keep canvas as image */
canvas{max-width:100% !important;height:auto !important;page-break-inside:avoid}
/* Force black text in critical zones */
.amt,.amt-d,.amt-s{color:#047857 !important}
.b-blue,.b-green,.b-orange,.b-purple,.b-gray,.b-red,.b-teal,.b-yellow{
background:#F1F5F9 !important;color:#0F172A !important;border:1px solid #CBD5E1 !important;
}
/* Footer print branding (added on print only, optional) */
body::after{
content:"EMDATRA · " attr(data-print-org) " · " attr(data-print-date);
display:none;
}
/* Insert a clean print header at top of each printed page */
.print-header{display:flex !important;align-items:center;justify-content:space-between;border-bottom:2px solid #0B1839;padding-bottom:8pt;margin-bottom:14pt;page-break-after:avoid}
.print-header .ph-brand{display:flex;align-items:center;gap:10pt}
.print-header .ph-mark{width:28pt;height:28pt;border-radius:6pt;background:#0B1839;color:#fff;font-weight:700;font-family:var(--ff-en);display:flex;align-items:center;justify-content:center;font-size:14pt}
.print-header .ph-name{font-size:14pt;font-weight:700;color:#0B1839;letter-spacing:-.01em}
.print-header .ph-meta{font-size:9pt;color:#64748B;text-align:left}
.print-footer{display:flex !important;align-items:center;justify-content:space-between;border-top:1px solid #CBD5E1;padding-top:6pt;margin-top:14pt;font-size:9pt;color:#64748B;page-break-before:avoid}
/* default hide on screen */
}
.print-header,.print-footer{display:none}
/* ================================================================
Dashboard v3 — Hybrid Executive+ (alerts + tabs + live feed +
quick actions + rich activity)
================================================================ */
/* Hero LIVE badge */
.dh-badges{position:absolute;top:18px;left:18px;display:flex;gap:8px;z-index:1}
.dh-live-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#EF4444;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;font-family:var(--ff-num);letter-spacing:.06em;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.dh-live-dot{width:7px;height:7px;border-radius:50%;background:#EF4444;animation:dh-pulse 1.6s ease-in-out infinite}
@keyframes dh-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
/* Top toolbar (customize button row) */
.db-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px;gap:8px}
/* Alerts banner */
.db-alerts{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#FEF2F2 0%,#FEE2E2 100%);border:1px solid #FCA5A5;border-radius:12px;padding:12px 18px;margin-bottom:14px;box-shadow:0 2px 10px rgba(239,68,68,.08)}
.db-alerts-ic{font-size:22px;line-height:1}
.db-alerts-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.db-alerts-title{font-size:13.5px;font-weight:700;color:#7F1D1D;font-family:var(--ff-ar)}
.db-alerts-detail{font-size:11.5px;color:#991B1B;font-family:var(--ff-ar)}
.db-alerts-cta{font-size:12px;font-weight:700;color:#EF4444;text-decoration:none;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.6);transition:background .15s ease;flex-shrink:0;font-family:var(--ff-ar)}
.db-alerts-cta:hover{background:#fff}
html[data-theme="dark"] .db-alerts{background:linear-gradient(135deg,#3F1F1F 0%,#5B2424 100%);border-color:#7F1D1D}
html[data-theme="dark"] .db-alerts-title{color:#FECACA}
html[data-theme="dark"] .db-alerts-detail{color:#FCA5A5}
/* 2-column row layout */
.db-row-2col{display:grid;grid-template-columns:1fr 320px;gap:16px;margin-bottom:18px}
.db-row-actions{grid-template-columns:300px 1fr}
/* Tabs card */
.db-tabs-card{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(15,23,57,.05);border:1px solid var(--c-n-100);overflow:hidden}
.db-tabs-bar{display:flex;background:var(--c-n-50);border-bottom:1px solid var(--c-n-100);padding:6px;gap:4px;overflow-x:auto;scrollbar-width:none}
.db-tabs-bar::-webkit-scrollbar{display:none}
.db-tab{appearance:none;background:transparent;border:0;padding:10px 18px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--c-n-500);cursor:pointer;font-family:var(--ff-ar);transition:all .15s ease;white-space:nowrap;flex-shrink:0;position:relative}
.db-tab:hover{background:rgba(255,255,255,.5);color:var(--c-primary-700)}
.db-tab.active{background:#fff;color:var(--c-primary-700);font-weight:700;box-shadow:0 1px 3px rgba(15,23,57,.06)}
.db-tab.active::after{content:"";position:absolute;left:24px;right:24px;bottom:-2px;height:3px;background:linear-gradient(90deg,var(--c-primary-500),var(--c-accent-500));border-radius:2px}
.db-tabs-content{padding:18px}
.db-tab-pane{display:none}
.db-tab-pane.active{display:block}
.db-charts-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.db-charts-2col .chart-card{margin:0}
/* Goals progress bars */
.db-goals{display:flex;flex-direction:column;gap:14px;padding:8px 4px}
.db-goal-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.db-goal-label{font-size:12px;font-weight:600;color:var(--c-n-700);font-family:var(--ff-ar)}
.db-goal-value{font-size:12px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums}
.db-goal-track{grid-column:1 / -1;height:8px;background:var(--c-n-100);border-radius:999px;overflow:hidden}
.db-goal-fill{height:100%;border-radius:999px;transition:width .4s ease}
/* Live feed sidebar */
.db-live-feed{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(15,23,57,.05);border:1px solid var(--c-n-100);overflow:hidden;display:flex;flex-direction:column}
.db-lf-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(135deg,var(--c-primary-600),var(--c-primary-700));color:#fff}
.db-lf-title{font-size:13px;font-weight:700;font-family:var(--ff-ar);display:inline-flex;align-items:center;gap:6px}
.db-lf-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.06em;font-family:var(--ff-num)}
.db-lf-pulse{width:7px;height:7px;border-radius:50%;background:#FCA5A5;box-shadow:0 0 0 0 rgba(252,165,165,.7);animation:dh-pulse 1.6s ease-in-out infinite}
.db-lf-list{flex:1;padding:8px 4px;overflow-y:auto;max-height:380px}
.db-lf-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;transition:background .15s ease}
.db-lf-item:hover{background:var(--c-n-50)}
.db-lf-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.db-lf-text{font-size:11.5px;color:var(--c-n-800);font-family:var(--ff-ar);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-lf-time{font-size:10px;color:var(--c-n-400);font-family:var(--ff-ar);flex-shrink:0}
.db-lf-empty{padding:24px;text-align:center;color:var(--c-n-400);font-size:12px;font-style:italic}
html[data-theme="dark"] .db-tabs-card,
html[data-theme="dark"] .db-live-feed,
html[data-theme="dark"] .db-quick-actions,
html[data-theme="dark"] .db-activity-rich{background:#0F172A;border-color:#334155}
html[data-theme="dark"] .db-tabs-bar{background:#1E293B;border-color:#334155}
html[data-theme="dark"] .db-tab{color:#94A3B8}
html[data-theme="dark"] .db-tab.active{background:#0F172A;color:#B8C7FF}
/* Quick Actions panel */
.db-quick-actions{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(15,23,57,.05);border:1px solid var(--c-n-100);padding:18px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .25s ease,transform .25s ease}
.db-quick-actions.db-qa-flash{box-shadow:0 0 0 4px var(--c-primary-200), 0 12px 32px rgba(54,88,204,.18);transform:scale(1.01)}
.db-section-title{font-size:13px;font-weight:700;color:var(--c-primary-900);font-family:var(--ff-ar);margin:0}
.db-qa-grid{display:flex;flex-direction:column;gap:10px}
.db-qa-btn{appearance:none;background:var(--c-n-50);border:1px solid var(--c-n-100);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s ease;text-align:right;font-family:var(--ff-ar);width:100%;text-decoration:none}
.db-qa-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(15,23,57,.06);border-color:var(--c-primary-200)}
.db-qa-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.db-qa-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.db-qa-label{font-size:13px;font-weight:700;color:var(--c-n-900)}
.db-qa-sub{font-size:10.5px;color:var(--c-n-500)}
.db-qa-arrow{font-size:18px;font-weight:700;flex-shrink:0;opacity:.7}
html[data-theme="dark"] .db-qa-btn{background:#0F172A;border-color:#334155}
html[data-theme="dark"] .db-qa-label{color:#E5E7EB}
/* Rich Activity Feed */
.db-activity-rich{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(15,23,57,.05);border:1px solid var(--c-n-100);padding:18px;display:flex;flex-direction:column;gap:14px}
.db-ar-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.db-ar-filters{display:flex;gap:6px;flex-wrap:wrap}
.db-ar-pill{appearance:none;background:var(--c-n-100);border:0;border-radius:6px;padding:5px 10px;font-size:11px;font-weight:600;color:var(--c-n-600);cursor:pointer;font-family:var(--ff-ar);transition:all .15s ease}
.db-ar-pill:hover{background:var(--c-primary-50);color:var(--c-primary-700)}
.db-ar-pill.active{background:var(--c-primary-600);color:#fff}
.db-ar-cta{margin-right:auto;font-size:11.5px;font-weight:600;color:var(--c-primary-600);cursor:pointer;font-family:var(--ff-ar)}
.db-ar-list{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto}
.db-ar-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px;border-radius:10px;transition:background .15s ease}
.db-ar-row:hover{background:var(--c-n-50)}
.db-ar-ring{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.db-ar-ring-inner{width:8px;height:8px;border-radius:50%}
.db-ar-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.db-ar-line{font-size:12px;color:var(--c-n-800);font-family:var(--ff-ar);line-height:1.4}
.db-ar-meta{font-size:10px;color:var(--c-n-400);font-family:var(--ff-ar)}
.db-ar-amount{font-size:12px;font-weight:700;font-family:var(--ff-num);font-variant-numeric:tabular-nums;flex-shrink:0}
/* Modern KPI cards (override the old single-row layout) */
#db-stats{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;gap:14px;width:100%;margin-bottom:14px}
#db-stats .stat-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 14px !important;min-height:160px;border-radius:16px !important;overflow:hidden}
#db-stats .stat-card::before{content:"";position:absolute;top:0;right:0;bottom:0;width:5px;border-radius:0 16px 16px 0}
#db-stats .stat-card .sc-bubble{position:absolute;top:14px;left:14px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:.18}
#db-stats .stat-card .sc-label{font-size:11px;font-weight:700;color:var(--c-n-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
#db-stats .stat-card .sc-value{font-size:24px;font-weight:800;color:var(--c-n-900);font-family:var(--ff-num);font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:4px}
#db-stats .stat-card .sc-sub{font-size:10.5px;color:var(--c-n-500);margin-bottom:10px}
#db-stats .stat-card .sc-trend-row{display:flex;align-items:center;gap:10px;margin-top:auto}
#db-stats .stat-card .sc-trend{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;font-family:var(--ff-num)}
#db-stats .stat-card .sc-spark{flex:1;height:24px;display:flex;align-items:flex-end;gap:1.5px}
#db-stats .stat-card .sc-spark span{flex:1;border-radius:1px;min-height:2px;opacity:.65}
#db-stats .stat-card .sc-vs{font-size:9.5px;color:var(--c-n-400);margin-top:6px}
#db-stats .stat-card.t-purple::before{background:#8B5CF6}
#db-stats .stat-card.t-purple .sc-bubble{background:#8B5CF6}
#db-stats .stat-card.t-purple .sc-spark span{background:#8B5CF6}
#db-stats .stat-card.t-warning::before{background:var(--c-warning-500)}
#db-stats .stat-card.t-warning .sc-bubble{background:var(--c-warning-500)}
#db-stats .stat-card.t-warning .sc-spark span{background:var(--c-warning-500)}
#db-stats .stat-card.t-success::before{background:var(--c-success-500)}
#db-stats .stat-card.t-success .sc-bubble{background:var(--c-success-500)}
#db-stats .stat-card.t-success .sc-spark span{background:var(--c-success-500)}
#db-stats .stat-card.t-primary::before{background:var(--c-primary-500)}
#db-stats .stat-card.t-primary .sc-bubble{background:var(--c-primary-500)}
#db-stats .stat-card.t-primary .sc-spark span{background:var(--c-primary-500)}
#db-stats .stat-card.t-accent::before{background:var(--c-accent-500)}
#db-stats .stat-card.t-accent .sc-bubble{background:var(--c-accent-500)}
#db-stats .stat-card.t-accent .sc-spark span{background:var(--c-accent-500)}
#db-stats .stat-card.t-danger::before{background:var(--c-danger-500)}
#db-stats .stat-card.t-danger .sc-bubble{background:var(--c-danger-500)}
#db-stats .stat-card.t-danger .sc-spark span{background:var(--c-danger-500)}
#db-stats .stat-card .sc-trend.up{background:var(--c-success-50);color:var(--c-success-700)}
#db-stats .stat-card .sc-trend.down{background:var(--c-danger-50);color:var(--c-danger-700)}
#db-stats2{display:none !important}
/* Mobile responsive for new dashboard widgets */
@media(max-width:900px){
.db-row-2col,.db-row-actions{grid-template-columns:1fr;gap:12px}
.db-charts-2col{grid-template-columns:1fr;gap:12px}
#db-stats{grid-template-columns:repeat(2,1fr) !important}
#db-stats .stat-card{min-height:140px;padding:14px !important}
#db-stats .stat-card .sc-value{font-size:20px}
.db-tabs-bar{padding:4px}
.db-tab{padding:8px 12px;font-size:11px}
.db-tabs-content{padding:12px}
.db-quick-actions,.db-activity-rich{padding:14px}
}
@media(max-width:560px){
#db-stats{grid-template-columns:1fr !important}
.db-alerts{padding:10px 14px;gap:10px;border-radius:10px}
.db-alerts-title{font-size:12px}
.db-alerts-detail{font-size:10.5px}
}
/* === Admin: Table View Settings (⚙️ button + modal) === */
.fat-tv-btn{
background:linear-gradient(135deg,#7C3AED,#5B21B6) !important;
color:#fff !important;border:0 !important;
font-weight:700;letter-spacing:.01em
}
.fat-tv-btn:hover{filter:brightness(1.1)}
.tv-modal-overlay{
position:fixed;inset:0;background:rgba(11,24,57,.55);
display:flex;align-items:center;justify-content:center;
z-index:9999;backdrop-filter:blur(4px);padding:16px;
font-family:var(--ff-ar);direction:rtl;
animation:tvModalIn .2s ease
}
@keyframes tvModalIn{from{opacity:0}to{opacity:1}}
.tv-modal{
background:#fff;border-radius:16px;width:100%;max-width:680px;
max-height:88vh;display:flex;flex-direction:column;
box-shadow:0 18px 48px rgba(11,24,57,.3);overflow:hidden
}
.tv-modal-head{
display:flex;align-items:center;gap:10px;
padding:16px 20px;border-bottom:1px solid #e5e7eb;
background:linear-gradient(180deg,#F8FAFC,#F1F5F9)
}
.tv-modal-icon{font-size:18px}
.tv-modal-title{flex:1;font-size:14px;font-weight:800;color:#0B1839}
.tv-modal-close{
appearance:none;border:0;background:transparent;cursor:pointer;
width:32px;height:32px;border-radius:8px;font-size:14px;color:#64748b;
transition:background .15s
}
.tv-modal-close:hover{background:#FEE2E2;color:#dc2626}
.tv-modal-body{
flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:18px
}
.tv-section{display:flex;flex-direction:column;gap:8px}
.tv-section-title{
font-size:13px;font-weight:800;color:#0B1839;
display:flex;align-items:center;gap:10px;flex-wrap:wrap
}
.tv-section-hint{font-size:11px;font-weight:500;color:#64748b}
.tv-cols-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:6px;background:#F8FAFC;border:1px solid #e5e7eb;border-radius:10px;padding:10px
}
.tv-col-row{
display:flex;align-items:center;gap:8px;padding:6px 10px;
border-radius:8px;cursor:pointer;transition:background .12s;
background:#fff;border:1px solid #eef2f6
}
.tv-col-row:hover{background:#F1F5F9}
.tv-col-row input[type=checkbox]{width:16px;height:16px;accent-color:#2643A8;cursor:pointer}
.tv-col-label{flex:1;font-size:12.5px;font-weight:700;color:#0B1839}
.tv-col-key{font-size:10px;color:#94a3b8;font-family:var(--ff-en);letter-spacing:.02em}
.tv-quick-actions{display:flex;gap:8px}
.tv-filters{display:flex;flex-direction:column;gap:6px}
.tv-empty{
padding:14px;text-align:center;font-size:12px;color:#94a3b8;
background:#F8FAFC;border:1px dashed #cbd5e1;border-radius:10px
}
.tv-filter-row{
display:grid;grid-template-columns:1fr 1fr 1fr 32px;gap:6px;align-items:center
}
.tv-filter-col,.tv-filter-op,.tv-filter-val{
appearance:none;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;
padding:8px 10px;font-size:12px;font-family:var(--ff-ar);outline:none;
transition:border-color .15s
}
.tv-filter-col:focus,.tv-filter-op:focus,.tv-filter-val:focus{border-color:#2643A8}
.tv-filter-del{
appearance:none;border:0;cursor:pointer;
width:32px;height:32px;border-radius:8px;
background:#FEE2E2;color:#dc2626;font-size:13px;
transition:background .15s
}
.tv-filter-del:hover{background:#FECACA}
.tv-modal-foot{
display:flex;justify-content:flex-end;gap:8px;
padding:14px 20px;border-top:1px solid #e5e7eb;background:#FAFBFC
}
.tv-btn{
appearance:none;border:0;cursor:pointer;
padding:9px 18px;border-radius:8px;font-size:12.5px;font-weight:700;
font-family:var(--ff-ar);transition:all .15s
}
.tv-btn-out{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}
.tv-btn-out:hover{background:#F1F5F9;color:#0B1839}
.tv-btn-p{background:linear-gradient(135deg,#2643A8,#06B0AA);color:#fff}
.tv-btn-p:hover{filter:brightness(1.08)}
@media(max-width:768px){
.tv-modal{max-height:92vh}
.tv-modal-body{padding:14px}
.tv-cols-grid{grid-template-columns:1fr 1fr}
.tv-filter-row{grid-template-columns:1fr;gap:4px}
.tv-filter-del{width:auto;justify-self:end}
}
/* =====================================================================
AURORA GLASS HUB SIDEBAR — Concept 02 (opt-in via ?ui=aurora)
Compact mode: rail-only by default; panel slides out as overlay
when a rail icon is clicked.
===================================================================== */
.aurora-sidebar { display: none; }
body.ui-aurora .sidebar { display: none !important; }
body.ui-aurora .aurora-sidebar {
display: block;
position: fixed;
inset: 0 0 0 auto;
width: 76px;
height: 100vh;
height: 100dvh;
z-index: 100;
padding: 12px 8px;
overflow: visible;
background: linear-gradient(180deg, #0A0E27 0%, #1A0E3A 100%);
pointer-events: auto;
}
body.ui-aurora .main { margin-right: 76px; }
.aurora-bg-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.aurora-bg-violet {
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(109,40,217,.55), transparent 70%);
top: -80px; right: -80px;
}
.aurora-bg-teal {
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(6,176,170,.40), transparent 70%);
bottom: -80px; left: -80px;
}
/* RAIL (always visible) */
.aurora-rail {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 22px;
padding: 12px 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
overflow-y: auto;
overscroll-behavior-y: contain;
}
.aurora-rail::-webkit-scrollbar { display: none; }
.aurora-rail .rail-logo {
width: 38px; height: 38px;
border-radius: 11px;
background: linear-gradient(135deg, #4FFFE9, #6D28D9);
display: flex; align-items: center; justify-content: center;
font-weight: 900; color: #0A0E27; font-size: 17px;
flex-shrink: 0;
font-family: 'Cairo', system-ui, sans-serif;
}
.aurora-rail .rail-divider {
width: 24px; height: 1px;
background: rgba(255,255,255,.16);
margin: 2px 0;
flex-shrink: 0;
}
.aurora-rail .rail-spacer { flex: 1; min-height: 8px; }
.aurora-rail .rail-btn {
position: relative;
width: 46px; height: 46px;
border-radius: 13px;
border: 1.5px solid transparent;
background: transparent;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
cursor: pointer;
flex-shrink: 0;
transition: all .25s ease;
color: #fff;
padding: 0;
}
.aurora-rail .rail-btn:hover { background: rgba(255,255,255,.08); }
.aurora-rail .rail-btn.active {
background: linear-gradient(135deg, rgba(79,255,233,.28), rgba(109,40,217,.28));
border-color: rgba(79,255,233,.7);
box-shadow: 0 0 16px rgba(79,255,233,.45);
}
.aurora-rail .rail-badge {
position: absolute;
top: -3px; left: -3px;
background: #FF6BCB; color: #fff;
font-size: 9px; font-weight: 800;
min-width: 16px; height: 16px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
padding: 0 4px;
border: 2px solid #0A0E27;
}
.aurora-rail .rail-avatar {
width: 46px; height: 46px;
border-radius: 13px;
background: linear-gradient(135deg, #FF6BCB, #6D28D9);
display: flex; align-items: center; justify-content: center;
font-weight: 800; color: #fff; font-size: 14px;
flex-shrink: 0;
cursor: pointer;
}
/* PANEL (overlay — hidden by default) */
.aurora-panel {
position: absolute;
top: 12px;
right: calc(100% + 4px);
width: 260px;
height: calc(100vh - 24px);
height: calc(100dvh - 24px);
background: rgba(15, 19, 50, 0.78);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 20px;
padding: 14px 12px;
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
opacity: 0;
visibility: hidden;
transform: translateX(8px);
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
box-shadow: -16px 24px 60px rgba(0,0,0,.45);
z-index: 2;
}
body.ui-aurora .aurora-sidebar.panel-open .aurora-panel {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: opacity .22s ease, transform .22s ease;
}
.aurora-panel .aurora-pane {
display: none;
flex-direction: column;
gap: 10px;
min-height: 100%;
}
.aurora-panel .aurora-pane.active { display: flex; }
.aurora-panel-head {
display: flex; justify-content: space-between; align-items: center;
}
.aurora-panel-head .panel-close {
width: 28px; height: 28px;
border-radius: 9px;
background: rgba(255,255,255,.10);
border: none;
color: rgba(255,255,255,.65);
font-size: 11px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .2s;
}
.aurora-panel-head .panel-close:hover { background: rgba(255,255,255,.20); color: #fff; }
.aurora-panel-head .panel-crumb { display: flex; align-items: center; gap: 7px; }
.aurora-panel-head .panel-crumb .title { font-size: 15px; font-weight: 800; color: #fff; }
.aurora-panel-head .panel-crumb .sep { color: rgba(255,255,255,.30); font-size: 12px; }
.aurora-panel-head .panel-crumb .root { color: rgba(255,255,255,.55); font-size: 11px; font-weight: 500; }
/* KPI banner (compact) */
.aurora-pane .kpi-banner {
display: flex; justify-content: space-between; align-items: center;
background: linear-gradient(135deg, rgba(6,176,170,.85), rgba(109,40,217,.85));
border: 1px solid rgba(79,255,233,.45);
border-radius: 14px;
padding: 10px 14px;
gap: 10px;
position: relative;
overflow: hidden;
color: #fff;
}
.aurora-pane .kpi-banner .spark { width: 70px; height: 36px; flex-shrink: 0; }
.aurora-pane .kpi-text { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.aurora-pane .kpi-label { font-size: 10px; font-weight: 500; opacity: .85; }
.aurora-pane .kpi-value { display: flex; align-items: baseline; gap: 5px; }
.aurora-pane .kpi-value .num { font-size: 19px; font-weight: 900; color: #fff; }
.aurora-pane .kpi-value .unit { font-size: 10px; font-weight: 500; opacity: .7; }
.aurora-pane .kpi-trend {
background: rgba(79,255,233,.30); color: #4FFFE9;
font-size: 8px; font-weight: 800;
padding: 2px 5px; border-radius: 7px;
display: inline-flex; align-items: center; gap: 3px;
}
/* Section label */
.aurora-section-label {
display: flex; justify-content: space-between; align-items: center;
padding: 2px 0 0;
}
.aurora-section-label .title { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); letter-spacing: .12em; }
.aurora-section-label .link { font-size: 10px; font-weight: 600; color: #4FFFE9; cursor: pointer; }
/* Bento grid (compact) — single tile per row for better readability */
.aurora-pane .bento-grid { display: flex; flex-direction: column; gap: 8px; }
.aurora-pane .bento-row { display: flex; flex-direction: column; gap: 8px; }
.aurora-pane .bento-tile {
flex: 1;
display: flex; flex-direction: column; gap: 5px;
padding: 9px 11px;
border-radius: 12px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
cursor: pointer;
transition: all .2s ease;
position: relative;
overflow: hidden;
min-height: 66px;
text-align: right;
color: #fff;
font-family: 'Cairo', system-ui, sans-serif;
}
.aurora-pane .bento-tile:hover {
background: rgba(255,255,255,.13);
border-color: rgba(255,255,255,.24);
transform: translateY(-1px);
}
.aurora-pane .bento-tile.feature { min-height: 92px; }
.aurora-pane .bento-tile.wide { min-height: 64px; }
.aurora-pane .bento-tile.tile-active {
background: linear-gradient(135deg, rgba(79,255,233,.20), rgba(109,40,217,.18));
border-color: rgba(79,255,233,.55);
box-shadow: 0 0 12px rgba(79,255,233,.30);
}
.aurora-pane .tile-top { display: flex; justify-content: space-between; align-items: center; }
.aurora-pane .tile-icon {
width: 28px; height: 28px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
background: rgba(79,255,233,.22);
border: 1px solid rgba(79,255,233,.45);
}
.aurora-pane .tile-icon[data-c="pink"] { background: rgba(255,107,203,.22); border-color: rgba(255,107,203,.45); }
.aurora-pane .tile-icon[data-c="lime"] { background: rgba(180,255,107,.22); border-color: rgba(180,255,107,.45); }
.aurora-pane .tile-icon[data-c="amber"] { background: rgba(255,184,79,.22); border-color: rgba(255,184,79,.45); }
.aurora-pane .tile-icon[data-c="coral"] { background: rgba(255,107,107,.22); border-color: rgba(255,107,107,.45); }
.aurora-pane .tile-icon[data-c="violet"] { background: rgba(109,40,217,.32); border-color: rgba(109,40,217,.55); }
.aurora-pane .tile-badge {
font-size: 8px; font-weight: 800;
padding: 2px 6px;
border-radius: 999px;
background: rgba(255,107,203,.22); color: #FF6BCB;
border: 1px solid rgba(255,107,203,.55);
}
.aurora-pane .tile-badge[data-c="amber"] { background: rgba(255,184,79,.22); color: #FFB84F; border-color: rgba(255,184,79,.55); }
.aurora-pane .tile-badge[data-c="teal"] { background: rgba(79,255,233,.22); color: #4FFFE9; border-color: rgba(79,255,233,.55); }
.aurora-pane .tile-badge[data-c="violet"]{ background: rgba(184,159,255,.25); color: #B89FFF; border-color: rgba(184,159,255,.55); }
.aurora-pane .tile-alert {
width: 7px; height: 7px;
border-radius: 50%;
background: #FF6B6B;
box-shadow: 0 0 7px #FF6B6B;
animation: aurora-pulse 1.6s infinite;
}
@keyframes aurora-pulse { 50% { opacity: .5; } }
.aurora-pane .tile-title {
font-size: 11.5px;
font-weight: 700;
margin-top: auto;
}
.aurora-pane .tile-meta {
display: flex; align-items: baseline; gap: 4px; justify-content: flex-start;
}
.aurora-pane .tile-meta .num { font-size: 14px; font-weight: 800; color: #4FFFE9; }
.aurora-pane .tile-meta[data-c="pink"] .num { color: #FF6BCB; }
.aurora-pane .tile-meta[data-c="lime"] .num { color: #B4FF6B; }
.aurora-pane .tile-meta[data-c="amber"] .num { color: #FFB84F; }
.aurora-pane .tile-meta[data-c="coral"] .num { color: #FF6B6B; }
.aurora-pane .tile-meta[data-c="violet"] .num { color: #B89FFF; }
.aurora-pane .tile-meta .sub { font-size: 9px; color: rgba(255,255,255,.45); }
.aurora-pane .tile-spark {
position: absolute;
bottom: 10px; left: 10px;
width: 110px; height: 20px;
pointer-events: none;
opacity: .55;
}
/* Search pane */
.aurora-search-wrap { padding-top: 4px; }
.aurora-search-input {
width: 100%;
padding: 10px 12px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.20);
border-radius: 10px;
color: #fff;
font-family: 'Cairo', system-ui, sans-serif;
font-size: 12px;
outline: none;
direction: rtl;
transition: all .2s;
}
.aurora-search-input:focus {
border-color: rgba(79,255,233,.6);
background: rgba(255,255,255,.14);
}
.aurora-search-input::placeholder { color: rgba(255,255,255,.40); }
.aurora-search-hint {
font-size: 10px;
color: rgba(255,255,255,.45);
margin-top: 6px;
text-align: right;
}
/* AI chip (compact) */
.aurora-pane .aurora-ai-chip {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(109,40,217,.40), rgba(255,107,203,.40));
border: 1px solid rgba(184,159,255,.55);
margin-top: auto;
}
.aurora-pane .aurora-ai-chip .ai-icon {
width: 26px; height: 26px;
border-radius: 8px;
background: rgba(184,159,255,.35);
display: flex; align-items: center; justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.aurora-pane .aurora-ai-chip .ai-text {
flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
min-width: 0;
}
.aurora-pane .aurora-ai-chip .ai-label {
font-size: 8px; font-weight: 800;
color: #B89FFF; letter-spacing: .12em;
}
.aurora-pane .aurora-ai-chip .ai-msg {
font-size: 10.5px; font-weight: 500; color: #fff;
}
.aurora-pane .aurora-ai-chip .ai-btn {
background: rgba(255,255,255,.20);
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 9px;
font-size: 10px;
font-weight: 700;
cursor: pointer;
transition: all .2s;
font-family: 'Cairo', system-ui, sans-serif;
}
.aurora-pane .aurora-ai-chip .ai-btn:hover { background: rgba(255,255,255,.30); }
/* Mobile */
@media (max-width: 1024px) {
body.ui-aurora .aurora-sidebar { width: 70px; }
body.ui-aurora .main { margin-right: 70px; }
.aurora-panel { width: 240px; }
}
@media (max-width: 768px) {
body.ui-aurora .aurora-sidebar {
right: -100%;
width: 76px;
transition: right .3s ease;
}
body.ui-aurora .aurora-sidebar.open { right: 0; }
body.ui-aurora .main { margin-right: 0; }
.aurora-panel {
position: fixed;
right: calc(76px + 8px);
top: 12px;
width: calc(100vw - 76px - 24px);
max-width: 280px;
height: calc(100vh - 24px);
}
/* When mobile drawer closed, panel must follow */
body.ui-aurora .aurora-sidebar:not(.open) .aurora-panel { display: none; }
}
/* LTR support */
[dir="ltr"] body.ui-aurora .aurora-sidebar { inset: 0 auto 0 0; }
[dir="ltr"] body.ui-aurora .main { margin-right: 0; margin-left: 76px; }
[dir="ltr"] .aurora-panel { right: auto; left: calc(100% + 4px); transform: translateX(-8px); }
[dir="ltr"] body.ui-aurora .aurora-sidebar.panel-open .aurora-panel { transform: translateX(0); }
@media (max-width: 1024px) {
[dir="ltr"] body.ui-aurora .main { margin-left: 70px; }
}
@media (max-width: 768px) {
[dir="ltr"] body.ui-aurora .aurora-sidebar { right: auto; left: -100%; transition: left .3s ease; }
[dir="ltr"] body.ui-aurora .aurora-sidebar.open { left: 0; }
[dir="ltr"] body.ui-aurora .main { margin-left: 0; }
[dir="ltr"] .aurora-panel { left: calc(76px + 8px); right: auto; }
}
/* ============================================================
META Campaign Dashboard — page-campaign-meta
Static report dashboard for Yedi Başak Facebook/Instagram
donation campaigns. Layout: tabs + hero + KPI + gauges +
sector table + ad cards + insights + footer.
See developer notes at top of #page-campaign-meta in index.php.
============================================================ */
#page-campaign-meta { padding: 0 16px 24px }
/* Internal tabs */
#page-campaign-meta .cmp-tabs { margin: 0 0 16px }
/* HERO */
.cmp-hero {
position: relative; overflow: hidden; color: #fff;
border-radius: var(--r-2xl); margin-bottom: 20px; padding: 40px 36px;
background: linear-gradient(120deg, #0B1839 0%, #1E3A8A 35%, #3658CC 65%, #06B0AA 100%);
box-shadow: 0 12px 30px -8px rgba(11,24,57,.35)
}
.cmp-hero-decorations { position:absolute; inset:0; pointer-events:none; overflow:hidden }
.cmp-orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:.45 }
.cmp-orb-1 { width:500px; height:500px; background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%); top:-120px; left:-80px }
.cmp-orb-2 { width:350px; height:350px; background:radial-gradient(circle,rgba(6,176,170,.4),transparent 70%); bottom:-120px; right:-80px }
.cmp-hero-content { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap }
.cmp-hero-text { flex:1; min-width:300px }
.cmp-hero-title {
font-size:36px; font-weight:800; letter-spacing:-.02em; margin:0 0 10px;
font-family:var(--ff-ar); color:#fff
}
.cmp-hero-subtitle {
font-size:13px; font-weight:600; color:rgba(255,255,255,.85);
font-family:var(--ff-num); letter-spacing:.04em; margin-bottom:10px
}
.cmp-hero-desc {
font-size:14px; color:rgba(255,255,255,.78); margin:0; max-width:560px;
font-family:var(--ff-ar); line-height:1.55
}
.cmp-hero-stats { display:flex; flex-direction:column; gap:14px; flex-shrink:0 }
.cmp-hero-stat {
background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
border-radius:14px; padding:12px 18px; min-width:200px;
backdrop-filter:blur(10px)
}
.cmp-hero-stat-val { font-size:22px; font-weight:800; color:#fff; font-family:var(--ff-num); line-height:1.1; letter-spacing:-.02em }
.cmp-hero-stat-lbl { font-size:11px; font-weight:600; color:rgba(255,255,255,.78); margin-top:4px; font-family:var(--ff-ar) }
/* KPI GRID */
.cmp-kpi-grid {
display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:20px
}
.cmp-kpi {
position:relative; background:#fff; border:1px solid var(--c-n-200);
border-radius:16px; padding:24px 22px; min-height:160px;
box-shadow:0 2px 8px rgba(11,24,57,.04); overflow:hidden
}
.cmp-kpi-stripe { position:absolute; top:0; left:0; right:0; height:4px; border-radius:16px 16px 0 0 }
.cmp-kpi[data-tone="green"] .cmp-kpi-stripe { background:linear-gradient(90deg,#10B981,#34D399) }
.cmp-kpi[data-tone="red"] .cmp-kpi-stripe { background:linear-gradient(90deg,#EF4444,#F87171) }
.cmp-kpi[data-tone="blue"] .cmp-kpi-stripe { background:linear-gradient(90deg,#3658CC,#06B0AA) }
.cmp-kpi[data-tone="purple"] .cmp-kpi-stripe { background:linear-gradient(90deg,#9333EA,#C084FC) }
.cmp-kpi[data-tone="orange"] .cmp-kpi-stripe { background:linear-gradient(90deg,#F59E0B,#FBBF24) }
.cmp-kpi-icon { font-size:32px; margin-bottom:8px }
.cmp-kpi-label { font-size:13px; font-weight:600; color:var(--c-n-600); font-family:var(--ff-ar); margin-bottom:8px }
.cmp-kpi-value { font-size:28px; font-weight:800; color:var(--c-primary-900); font-family:var(--ff-num); letter-spacing:-.02em; line-height:1.1; margin-bottom:10px }
.cmp-kpi-sub { font-size:12px; color:var(--c-n-500); font-family:var(--ff-ar) }
/* GAUGES */
.cmp-gauge-card {
background:#fff; border:1px solid var(--c-n-200); border-radius:16px;
padding:28px; margin-bottom:24px;
display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
box-shadow:0 2px 8px rgba(11,24,57,.04)
}
.cmp-gauge { display:flex; flex-direction:column; align-items:center; gap:8px; position:relative }
.cmp-gauge-circle {
width:80px; height:80px; border-radius:50%;
background:conic-gradient(var(--g-color, #06B0AA) calc(var(--pct, 0) * 1%), #E2E8F0 0);
display:flex; align-items:center; justify-content:center; position:relative
}
.cmp-gauge-circle::before {
content:''; width:60px; height:60px; border-radius:50%; background:#fff
}
.cmp-gauge-circle[data-tone="green"] { --g-color:#10B981 }
.cmp-gauge-circle[data-tone="blue"] { --g-color:#3658CC }
.cmp-gauge-circle[data-tone="red"] { --g-color:#EF4444 }
.cmp-gauge-circle[data-tone="purple"] { --g-color:#9333EA }
.cmp-gauge-dot { display:none } /* visual placeholders from Figma not needed in CSS gauge */
.cmp-gauge-val { font-size:22px; font-weight:800; color:var(--c-primary-900); font-family:var(--ff-num); letter-spacing:-.02em }
.cmp-gauge-label { font-size:13px; font-weight:600; color:var(--c-n-600); font-family:var(--ff-ar); text-align:center }
/* SECTION TITLES */
.cmp-section-title {
font-size:20px; font-weight:800; color:var(--c-primary-900);
margin:0 0 12px; font-family:var(--ff-ar); display:flex; align-items:center; gap:8px;
letter-spacing:-.01em
}
.cmp-section-title > span:first-child { font-size:24px }
/* SECTOR TABLE */
.cmp-table-card {
background:#fff; border:1px solid var(--c-n-200); border-radius:14px;
margin-bottom:24px; overflow:hidden; box-shadow:0 2px 8px rgba(11,24,57,.04)
}
.cmp-table { width:100%; border-collapse:collapse; font-family:var(--ff-num) }
.cmp-table thead th {
background:#F8FAFC; padding:14px 16px; font-size:12.5px; font-weight:700;
color:var(--c-n-600); text-align:right; border-bottom:2px solid var(--c-n-200);
font-family:var(--ff-ar); white-space:nowrap
}
.cmp-table tbody td {
padding:13px 16px; font-size:13px; color:var(--c-n-800);
border-bottom:1px solid var(--c-n-100); text-align:right; font-variant-numeric:tabular-nums
}
.cmp-table tbody td:first-child {
font-family:var(--ff-ar); font-weight:600; color:var(--c-primary-900); white-space:nowrap
}
.cmp-table tbody tr:hover { background:#FAFBFC }
.cmp-tbl-total td {
background:linear-gradient(90deg,#F1F5F9,#F8FAFC);
font-weight:800; color:var(--c-primary-900); border-top:2px solid var(--c-primary-600);
border-bottom:0
}
.cmp-sec-dot {
display:inline-block; width:10px; height:10px; border-radius:50%;
margin-left:6px; vertical-align:middle
}
/* AD CARDS */
.cmp-ad-grid {
display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px
}
.cmp-ad {
position:relative; background:#fff; border:1px solid var(--c-n-200);
border-radius:16px; padding:20px 24px; box-shadow:0 2px 8px rgba(11,24,57,.04)
}
.cmp-ad-stripe { position:absolute; top:14px; bottom:14px; right:0; width:4px; border-radius:4px 0 0 4px }
.cmp-ad[data-tone="purple"] .cmp-ad-stripe { background:#9333EA }
.cmp-ad[data-tone="blue"] .cmp-ad-stripe { background:#3658CC }
.cmp-ad[data-tone="gray"] .cmp-ad-stripe { background:#94A3B8 }
.cmp-ad-title { font-size:15px; font-weight:800; color:var(--c-primary-900); font-family:var(--ff-ar); margin-bottom:10px }
.cmp-ad-row {
display:flex; justify-content:space-between; align-items:center;
padding:10px 0; border-top:1px solid var(--c-n-100);
font-size:13px; color:var(--c-n-600); font-family:var(--ff-ar)
}
.cmp-ad-row:first-of-type { border-top:0 }
.cmp-ad-row b {
color:var(--c-primary-900); font-weight:800; font-size:14px;
font-family:var(--ff-num); font-variant-numeric:tabular-nums
}
/* INSIGHTS */
.cmp-insights {
background:linear-gradient(135deg,#FEF3C7,#FFFBEB); border:1px solid #F59E0B;
border-radius:18px; padding:24px 32px; margin-bottom:24px
}
.cmp-insights-title {
font-size:18px; font-weight:800; color:#92400E; font-family:var(--ff-ar);
margin:0 0 18px; display:flex; align-items:center; gap:8px
}
.cmp-insights-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px }
.cmp-insight {
background:rgba(255,255,255,.7); border:1px solid rgba(245,158,11,.3);
border-radius:14px; padding:16px 18px; text-align:center
}
.cmp-insight-emoji { font-size:28px; margin-bottom:6px }
.cmp-insight-val {
font-size:22px; font-weight:800; color:#92400E; font-family:var(--ff-num);
letter-spacing:-.02em; margin-bottom:4px
}
.cmp-insight-lbl { font-size:12px; font-weight:600; color:#78350F; font-family:var(--ff-ar) }
/* PLACEHOLDER TABS (sectors / ads / monthly) */
.cmp-empty {
background:#fff; border:1px solid var(--c-n-200); border-radius:16px;
padding:60px 40px; text-align:center
}
.cmp-empty-ic { font-size:56px; margin-bottom:14px }
.cmp-empty-title { font-size:18px; font-weight:800; color:var(--c-primary-900); font-family:var(--ff-ar); margin-bottom:6px }
.cmp-empty-sub { font-size:13px; color:var(--c-n-500); font-family:var(--ff-ar) }
/* FOOTER */
.cmp-footer {
text-align:center; padding:20px; margin-top:24px;
border-top:1px solid var(--c-n-200)
}
.cmp-footer-line { font-size:13px; font-weight:600; color:var(--c-n-700); font-family:var(--ff-ar); margin-bottom:4px }
.cmp-footer-sub { font-size:11px; color:var(--c-n-400); font-family:var(--ff-ar) }
/* RESPONSIVE */
@media (max-width: 1280px) {
.cmp-kpi-grid { grid-template-columns:repeat(3,1fr) }
.cmp-gauge-card { grid-template-columns:repeat(2,1fr) }
.cmp-insights-grid { grid-template-columns:repeat(3,1fr) }
}
@media (max-width: 768px) {
#page-campaign-meta { padding: 0 8px 16px }
.cmp-hero { padding:24px 18px }
.cmp-hero-title { font-size:24px }
.cmp-hero-stats { width:100% }
.cmp-hero-stat { min-width:100% }
.cmp-kpi-grid { grid-template-columns:repeat(2,1fr); gap:12px }
.cmp-kpi { padding:16px 14px; min-height:130px }
.cmp-kpi-value { font-size:20px }
.cmp-gauge-card { grid-template-columns:repeat(2,1fr); padding:18px; gap:16px }
.cmp-ad-grid { grid-template-columns:1fr }
.cmp-insights { padding:18px }
.cmp-insights-grid { grid-template-columns:repeat(2,1fr) }
.cmp-table thead th, .cmp-table tbody td { padding:10px 8px; font-size:11.5px }
}
/* RTL/LTR neutrality (table is always Arabic-aware via .ff-ar) */
html[dir="ltr"] .cmp-table thead th,
html[dir="ltr"] .cmp-table tbody td { text-align:left }
html[dir="ltr"] .cmp-sec-dot { margin-left:0; margin-right:6px }
html[dir="ltr"] .cmp-ad-stripe { right:auto; left:0; border-radius:0 4px 4px 0 }
/* META Campaign — toolbar + action buttons (per-tab CRUD) */
#page-campaign-meta .cmp-toolbar {
display:flex; gap:8px; flex-wrap:wrap; align-items:center;
margin-bottom:18px; padding:12px 14px;
background:#fff; border:1px solid var(--c-n-200); border-radius:12px;
box-shadow:0 2px 8px rgba(11,24,57,.04)
}
#page-campaign-meta .cmp-toolbar-note {
margin-inline-start:auto; font-size:11.5px; color:var(--c-n-500);
font-family:var(--ff-ar); padding:4px 10px;
background:#F1F5F9; border-radius:8px; border:1px dashed var(--c-n-300)
}
#page-campaign-meta .cmp-toolbar-note-master {
background:linear-gradient(135deg,#FEF3C7,#FDE68A); color:#92400E;
border-color:#F59E0B; font-weight:700
}
.cmp-btn {
appearance:none; border:0; cursor:pointer;
padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:700;
font-family:var(--ff-ar); display:inline-flex; align-items:center; gap:6px;
transition:all .15s ease
}
.cmp-btn span:first-child { font-size:14px }
.cmp-btn-p {
background:linear-gradient(135deg,#3658CC,#06B0AA); color:#fff;
box-shadow:0 2px 6px rgba(54,88,204,.25)
}
.cmp-btn-p:hover { filter:brightness(1.08); transform:translateY(-1px) }
.cmp-btn-out {
background:#fff; color:var(--c-n-700); border:1.5px solid var(--c-n-200)
}
.cmp-btn-out:hover { background:#F1F5F9; color:var(--c-primary-900); border-color:var(--c-primary-300) }
.cmp-btn-danger {
background:#FEE2E2; color:#B91C1C; border:1.5px solid #FCA5A5
}
.cmp-btn-danger:hover { background:#FCA5A5; color:#fff }
@media (max-width: 640px) {
#page-campaign-meta .cmp-toolbar { padding:10px 8px; gap:6px }
.cmp-btn { padding:7px 10px; font-size:11.5px }
#page-campaign-meta .cmp-toolbar-note { width:100%; margin:6px 0 0; text-align:center }
}
/* Permission UI: sub-row layout (uperm-sub-row) */
.uperm-sub-row { transition:background .15s }
.uperm-sub-row:hover { background:#eff6ff !important }
/* META Campaign — inline table render (sectors/ads/monthly tabs) */
.cmp-empty-inline {
background:#fff; border:1px dashed var(--c-n-300); border-radius:14px;
padding:30px 20px; text-align:center; font-size:13px;
color:var(--c-n-500); font-family:var(--ff-ar)
}
.cmp-mini-btn {
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:8px;
background:#fff; border:1px solid var(--c-n-200); cursor:pointer;
font-size:13px; margin:0 2px; transition:all .15s
}
.cmp-mini-btn:hover { background:#F1F5F9; border-color:var(--c-primary-300) }
.cmp-mini-del { color:#B91C1C; border-color:#FCA5A5 }
.cmp-mini-del:hover { background:#FCA5A5; color:#fff; border-color:#EF4444 }
/* ============================================================
META Campaign — Overview cards + table polish
============================================================ */
#page-campaign-meta .cmp-ov-hero {
display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;
margin-bottom:18px
}
#page-campaign-meta .cmp-ov-card {
background:#fff; border-radius:14px; padding:18px 20px;
box-shadow:0 2px 8px rgba(11,24,57,.04); border:1px solid var(--c-n-200);
position:relative; overflow:hidden
}
#page-campaign-meta .cmp-ov-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:4px
}
#page-campaign-meta .cmp-ov-green::before { background:linear-gradient(90deg,#10B981,#34D399) }
#page-campaign-meta .cmp-ov-blue::before { background:linear-gradient(90deg,#3B82F6,#06B0AA) }
#page-campaign-meta .cmp-ov-purple::before { background:linear-gradient(90deg,#A78BFA,#8B5CF6) }
#page-campaign-meta .cmp-ov-orange::before { background:linear-gradient(90deg,#F59E0B,#FB923C) }
#page-campaign-meta .cmp-ov-icon {
font-size:28px; margin-bottom:6px; opacity:.85
}
#page-campaign-meta .cmp-ov-lbl {
font-size:11.5px; color:var(--c-n-600); font-weight:600; margin-bottom:6px;
font-family:var(--ff-ar)
}
#page-campaign-meta .cmp-ov-val {
font-size:22px; font-weight:800; color:var(--c-primary-900);
font-family:var(--ff-num); letter-spacing:-.02em
}
#page-campaign-meta .cmp-ov-sub {
font-size:11px; color:var(--c-n-500); margin-top:4px; font-family:var(--ff-num)
}
#page-campaign-meta .cmp-ov-extra {
display:grid; grid-template-columns:repeat(7, 1fr); gap:10px;
margin-bottom:18px
}
#page-campaign-meta .cmp-ov-mini {
background:#fff; border:1px solid var(--c-n-200); border-radius:10px;
padding:12px 14px; display:flex; flex-direction:column; gap:4px
}
#page-campaign-meta .cmp-ov-mini span {
font-size:10.5px; font-weight:600; color:var(--c-n-500); font-family:var(--ff-ar);
letter-spacing:.04em
}
#page-campaign-meta .cmp-ov-mini b {
font-size:14px; color:var(--c-primary-900); font-weight:800;
font-family:var(--ff-num); font-variant-numeric:tabular-nums
}
@media(max-width:1024px){
#page-campaign-meta .cmp-ov-hero { grid-template-columns:repeat(2, 1fr) }
#page-campaign-meta .cmp-ov-extra { grid-template-columns:repeat(3, 1fr) }
}
@media(max-width:640px){
#page-campaign-meta .cmp-ov-hero { grid-template-columns:1fr }
#page-campaign-meta .cmp-ov-extra { grid-template-columns:repeat(2, 1fr) }
}
/* =====================================================================
META PERIOD REPORT — Yediasak XLSX dashboard (tab inside #page-campaign-meta)
===================================================================== */
#page-campaign-meta [data-tab-pane="period_report"] { padding: 0; }
.cmp-period-select {
background:#0F1B40;color:#fff;border:1px solid rgba(255,255,255,.18);
padding:8px 12px;border-radius:10px;font-family:var(--ff-ar);font-size:12.5px;
min-width:280px;cursor:pointer;direction:rtl
}
.cmp-period-select option { background:#0F1B40 }
.period-empty {
padding:40px;text-align:center;color:#64748b;font-size:13px;
background:#F8FAFC;border-radius:14px;border:1px dashed #CBD5E1
}
/* dark wrapper for all PR cards */
#period-report-host {
display:flex;flex-direction:column;gap:14px;
background:linear-gradient(135deg,#0A0E27 0%,#1A0E3A 100%);
border-radius:18px;padding:18px;margin-top:6px;position:relative;overflow:hidden
}
#period-report-host::before, #period-report-host::after {
content:"";position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0
}
#period-report-host::before { width:400px;height:400px;background:radial-gradient(circle,rgba(109,40,217,.4),transparent 70%);top:-100px;right:-100px }
#period-report-host::after { width:380px;height:380px;background:radial-gradient(circle,rgba(6,176,170,.3),transparent 70%);bottom:-100px;left:-100px }
#period-report-host > * { position:relative;z-index:1 }
.pr-header { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px }
.pr-header-title { display:flex;flex-direction:column;gap:4px;align-items:flex-end }
.pr-h-title-row { display:flex;gap:12px;align-items:center }
.pr-header h2 { color:#fff;font-size:22px;font-weight:800;margin:0;letter-spacing:-.02em }
.pr-h-sub { color:rgba(255,255,255,.6);font-size:12px }
.pr-period-chip {
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
padding:6px 12px;border-radius:999px;color:#4FFFE9;font-size:11px;font-weight:700;letter-spacing:.05em
}
.pr-period-chip .pr-dot { width:6px;height:6px;border-radius:50%;background:#4FFFE9;box-shadow:0 0 8px #4FFFE9 }
/* KPI ROW */
.pr-kpi-row { display:grid;grid-template-columns:repeat(6,1fr);gap:12px }
.pr-kpi-card {
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;
min-height:124px;position:relative;overflow:hidden
}
.pr-kpi-card::after {
content:"";position:absolute;top:14px;left:14px;width:3px;height:28px;
background:var(--c, #4FFFE9);border-radius:2px
}
.pr-kpi-label { font-size:10px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.08em;text-align:right }
.pr-kpi-grow { flex:1 }
.pr-kpi-val-row { display:flex;align-items:baseline;gap:5px;justify-content:flex-end }
.pr-kpi-val { font-size:24px;font-weight:900;color:var(--c, #4FFFE9);font-family:var(--ff-ar) }
.pr-kpi-unit { font-size:10px;font-weight:500;color:rgba(255,255,255,.55) }
.pr-kpi-sub { font-size:10px;font-weight:400;color:rgba(255,255,255,.5);text-align:right }
@media(max-width:1200px){.pr-kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.pr-kpi-row{grid-template-columns:repeat(2,1fr)}}
/* CHARTS ROW */
.pr-charts-row { display:grid;grid-template-columns:1fr 1.5fr;gap:12px }
.pr-card {
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:16px;padding:16px 20px;display:flex;flex-direction:column;gap:12px
}
.pr-card-head { display:flex;justify-content:space-between;align-items:center }
.pr-card-title { font-size:14px;font-weight:700;color:#fff }
.pr-card-sub { font-size:10px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.08em }
.pr-stack-bar { display:flex;height:14px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.08) }
.pr-stack-seg { height:100% }
.pr-legend { display:flex;flex-direction:column;gap:8px }
.pr-legend-item { display:flex;justify-content:space-between;align-items:center }
.pr-legend-left { display:flex;align-items:baseline;gap:6px }
.pr-legend-right { display:flex;align-items:center;gap:8px }
.pr-legend-pct { font-size:10px;color:rgba(255,255,255,.45) }
.pr-legend-n { font-size:13px;font-weight:700;color:#fff }
.pr-legend-label { font-size:12px;color:rgba(255,255,255,.85) }
.pr-legend-dot { width:10px;height:10px;border-radius:50% }
.pr-obj-bars { display:flex;flex-direction:column;gap:10px }
.pr-obj-row { display:flex;flex-direction:column;gap:5px }
.pr-obj-lbl { display:flex;justify-content:space-between;align-items:center }
.pr-obj-n { font-size:11px;font-weight:700 }
.pr-obj-name { font-size:12px;color:#fff }
.pr-obj-bar-bg { height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden }
.pr-obj-bar-fill { height:100%;border-radius:4px }
@media(max-width:900px){.pr-charts-row{grid-template-columns:1fr}}
/* TOP PERFORMERS */
.pr-top-row { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }
.pr-top-card {
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:320px
}
.pr-top-head { display:flex;justify-content:space-between;align-items:center }
.pr-top-badge {
font-size:9px;font-weight:800;padding:3px 8px;border-radius:8px;
background:rgba(255,255,255,.06);
color:var(--c);border:1px solid var(--c)
}
.pr-top-title { font-size:13px;font-weight:700;color:#fff }
.pr-top-list { display:flex;flex-direction:column;gap:7px }
.pr-top-row-it {
display:flex;justify-content:space-between;align-items:center;
background:rgba(255,255,255,.04);padding:8px 10px;border-radius:10px
}
.pr-top-val { display:flex;flex-direction:column;gap:1px;text-align:left }
.pr-top-num { font-size:14px;font-weight:700;color:var(--c) }
.pr-top-unit { font-size:9px;color:rgba(255,255,255,.45) }
.pr-top-meta { display:flex;align-items:center;gap:8px;max-width:60% }
.pr-top-name {
font-size:11px;color:rgba(255,255,255,.85);text-align:right;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl
}
.pr-top-rank {
display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:10px;font-size:10px;font-weight:700;
background:rgba(255,255,255,.06);
color:var(--c);border:1px solid var(--c);
flex-shrink:0
}
.pr-top-empty { padding:20px;text-align:center;color:rgba(255,255,255,.4);font-size:12px }
@media(max-width:900px){.pr-top-row{grid-template-columns:1fr}}
/* FILTERS */
.pr-filters { display:flex;gap:8px;align-items:center;flex-wrap:wrap }
.pr-chip {
display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
border-radius:999px;color:#fff;font-family:var(--ff-ar);font-size:11px;font-weight:600;
cursor:pointer;transition:all .15s
}
.pr-chip:hover { background:rgba(255,255,255,.1) }
.pr-chip.active {
background:rgba(255,255,255,.10);
border-color:var(--c);
color:var(--c)
}
.pr-chip-n { font-size:10px;font-weight:700;opacity:.8 }
.pr-chip.active .pr-chip-n { opacity:1 }
.pr-search {
flex:1;min-width:200px;padding:9px 14px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:10px;color:#fff;font-family:var(--ff-ar);font-size:12px;outline:none;
direction:rtl
}
.pr-search::placeholder { color:rgba(255,255,255,.4) }
.pr-search:focus { border-color:rgba(79,255,233,.5);background:rgba(255,255,255,.1) }
/* TABLE — high-contrast text so values read clearly against the aurora bg */
.pr-table-wrap {
background:rgba(15,19,40,.55);border:1px solid rgba(255,255,255,.14);
border-radius:14px;overflow:hidden;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.pr-table { width:100%;border-collapse:collapse;font-family:var(--ff-ar);direction:rtl }
.pr-table thead th {
background:rgba(255,255,255,.08);padding:12px 10px;text-align:right;
font-size:10.5px;font-weight:700;color:rgba(255,255,255,.85);
letter-spacing:.05em;border-bottom:1px solid rgba(255,255,255,.12)
}
.pr-table thead th:nth-child(-n+10) { text-align:left }
.pr-table tbody td {
padding:11px 10px;font-size:11.5px;color:#FFFFFF;
border-bottom:1px solid rgba(255,255,255,.06);text-align:left
}
.pr-table tbody td:last-child { text-align:right }
.pr-table tbody tr { background:rgba(255,255,255,.02) }
.pr-table tbody tr:nth-child(odd) { background:rgba(255,255,255,.05) }
.pr-table tbody tr:hover { background:rgba(79,255,233,.10) }
.pr-name-cell {
max-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
font-weight:600;color:#FFFFFF
}
.pr-status-pill {
display:inline-block;padding:2px 8px;border-radius:6px;
font-size:10px;font-weight:700
}
.pr-pager {
display:flex;justify-content:space-between;align-items:center;
padding:10px 16px;background:rgba(255,255,255,.03);
border-top:1px solid rgba(255,255,255,.05)
}
.pr-pager-info { font-size:11px;color:rgba(255,255,255,.5) }
.pr-pager-btns { display:flex;gap:4px;align-items:center }
.pr-pager-btn {
width:28px;height:28px;border-radius:8px;
background:transparent;border:1px solid transparent;
color:rgba(255,255,255,.5);font-family:var(--ff-ar);font-size:11px;font-weight:700;cursor:pointer
}
.pr-pager-btn:hover { background:rgba(255,255,255,.08);color:#fff }
.pr-pager-btn.active {
background:rgba(79,255,233,.18);border-color:rgba(79,255,233,.55);color:#4FFFE9
}
.pr-pager-dots { color:rgba(255,255,255,.4);padding:0 4px }
/* Light theme override — keep host dark since the design intentionally uses Aurora */
html[data-theme="light"] .period-empty { background:#F1F5F9;color:#64748b;border-color:#CBD5E1 }
/* Period Report — Print / Save as PDF */
@media print {
body.pr-print-mode .sidebar,
body.pr-print-mode .topbar,
body.pr-print-mode .mobile-bottom-bar,
body.pr-print-mode .aurora-sidebar,
body.pr-print-mode .cmp-tabs,
body.pr-print-mode .cmp-hero,
body.pr-print-mode .cmp-toolbar,
body.pr-print-mode .pr-filters,
body.pr-print-mode .pr-pager,
body.pr-print-mode .mdl { display: none !important; }
body.pr-print-mode .main { margin: 0 !important; padding: 0 !important; }
body.pr-print-mode #page-campaign-meta { padding: 0 !important; }
body.pr-print-mode #period-report-host {
background: white !important;
color: black !important;
padding: 20px !important;
box-shadow: none !important;
}
body.pr-print-mode #period-report-host::before,
body.pr-print-mode #period-report-host::after { display: none !important; }
body.pr-print-mode .pr-header h2,
body.pr-print-mode .pr-h-sub,
body.pr-print-mode .pr-card-title,
body.pr-print-mode .pr-card-sub,
body.pr-print-mode .pr-kpi-label,
body.pr-print-mode .pr-kpi-sub,
body.pr-print-mode .pr-obj-name,
body.pr-print-mode .pr-legend-label,
body.pr-print-mode .pr-top-title,
body.pr-print-mode .pr-top-name { color: #0B1839 !important; }
body.pr-print-mode .pr-kpi-card,
body.pr-print-mode .pr-card,
body.pr-print-mode .pr-top-card,
body.pr-print-mode .pr-table-wrap {
background: white !important;
border: 1px solid #cbd5e1 !important;
backdrop-filter: none !important;
}
body.pr-print-mode .pr-table thead th { background: #F1F5F9 !important; color: #475569 !important; }
body.pr-print-mode .pr-table tbody td { color: #0B1839 !important; border-bottom-color: #E2E8F0 !important; }
body.pr-print-mode .pr-table tbody tr:nth-child(odd) { background: #F8FAFC !important; }
body.pr-print-mode .pr-name-cell { color: #0B1839 !important; }
body.pr-print-mode .pr-period-chip { background: #F1F5F9 !important; color: #06B0AA !important; border-color: #06B0AA !important; }
@page { size: A3 landscape; margin: 10mm; }
}
/* === PERIOD REPORT — bullet-proof high-contrast overrides ===
* Forces visibility even if another rule overrides the originals.
* Loaded after the original table styles so this wins.
*/
#period-report-host .pr-table-wrap {
background: rgba(15, 19, 40, 0.7) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
}
#period-report-host .pr-table thead th {
color: rgba(255, 255, 255, 0.92) !important;
background: rgba(255, 255, 255, 0.10) !important;
font-size: 11px !important;
font-weight: 700 !important;
}
#period-report-host .pr-table tbody td {
color: #FFFFFF !important;
font-size: 12px !important;
font-weight: 500 !important;
}
#period-report-host .pr-table tbody tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.06) !important;
}
#period-report-host .pr-table tbody tr:hover {
background: rgba(79, 255, 233, 0.12) !important;
}
#period-report-host .pr-name-cell {
color: #FFFFFF !important;
font-weight: 600 !important;
}
#period-report-host .pr-status-pill {
font-weight: 800 !important;
border: 1px solid currentColor !important;
}
/* === PERIOD REPORT — NUCLEAR contrast override (v201) ===
* Many users reported the table text was invisible. The aurora gradient
* bleeds through any semi-transparent surface. Use SOLID backgrounds and
* tinted text (not pure white) so values pop in every theme/lighting.
*/
#period-report-host {
background: #0B132E !important;
background-image: linear-gradient(135deg, #0B132E 0%, #1A1245 100%) !important;
}
#period-report-host::before,
#period-report-host::after { display: none !important; }
#period-report-host .pr-table-wrap {
background: #131938 !important;
border: 1px solid rgba(255, 255, 255, 0.20) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#period-report-host .pr-table thead th {
background: #1B2247 !important;
color: #B8C5E6 !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .05em !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
#period-report-host .pr-table tbody td {
color: #E2E8F0 !important;
font-size: 13.5px !important;
font-weight: 600 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#period-report-host .pr-table tbody tr {
background: transparent !important;
}
#period-report-host .pr-table tbody tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.04) !important;
}
#period-report-host .pr-table tbody tr:hover {
background: rgba(79, 255, 233, 0.10) !important;
}
#period-report-host .pr-name-cell {
color: #F1F5F9 !important;
font-weight: 700 !important;
font-size: 13.5px !important;
}
#period-report-host .pr-status-pill {
font-weight: 800 !important;
font-size: 11px !important;
padding: 3px 10px !important;
}
/* === PERIOD REPORT — LIGHT TABLE (black text on white) ===
* Highest contrast possible: pure black text on white card.
* Overrides every previous table colour rule.
*/
#period-report-host .pr-table-wrap {
background: #FFFFFF !important;
border: 1px solid #CBD5E1 !important;
border-radius: 14px !important;
}
#period-report-host .pr-table { direction: rtl !important; }
#period-report-host .pr-table thead th {
background: #F1F5F9 !important;
color: #0B1839 !important;
font-size: 12.5px !important;
font-weight: 800 !important;
border-bottom: 1.5px solid #CBD5E1 !important;
}
#period-report-host .pr-table tbody td {
color: #000000 !important;
font-size: 14px !important;
font-weight: 600 !important;
border-bottom: 1px solid #E2E8F0 !important;
background: transparent !important;
}
#period-report-host .pr-table tbody tr {
background: #FFFFFF !important;
}
#period-report-host .pr-table tbody tr:nth-child(odd) {
background: #F8FAFC !important;
}
#period-report-host .pr-table tbody tr:hover {
background: #E0F2FE !important;
}
#period-report-host .pr-name-cell {
color: #000000 !important;
font-weight: 700 !important;
font-size: 14px !important;
}
/* Coloured value pills keep their accent colours but with darker shade for readability on white */
#period-report-host .pr-table tbody td span[style*="#FF6B6B"] { color: #DC2626 !important; font-weight: 800 !important; }
#period-report-host .pr-table tbody td span[style*="#B4FF6B"] { color: #16A34A !important; font-weight: 800 !important; }
#period-report-host .pr-table tbody td span[style*="#4FFFE9"] { color: #0891B2 !important; font-weight: 800 !important; }
#period-report-host .pr-table tbody td span[style*="#FF6BCB"] { color: #DB2777 !important; font-weight: 800 !important; }
/* Status pills — solid coloured backgrounds with white text for clarity on light bg */
#period-report-host .pr-status-pill {
font-weight: 800 !important;
font-size: 11px !important;
padding: 4px 10px !important;
background: #0B1839 !important;
color: #FFFFFF !important;
border-radius: 10px !important;
display: inline-block !important;
}
/* ============================================================
META Phase 1 — Daily Meta sync UI (modal result messages)
============================================================ */
.cmp-msg {
border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.6;
font-family:var(--ff-ar);
}
.cmp-msg-info { background:#EFF6FF; border:1px solid #3B82F6; color:#1E40AF }
.cmp-msg-ok { background:#D1FAE5; border:1px solid #059669; color:#064E3B }
.cmp-msg-warn { background:#FEF3C7; border:1px solid #D97706; color:#7C2D12 }
.cmp-msg-err { background:#FEE2E2; border:1px solid #DC2626; color:#991B1B }
.cmp-btn-sm { padding:5px 10px; font-size:11.5px }
/* Modal sizing on mobile — let the sync modal scroll inside */
@media (max-width:640px) {
#meta-gunluk-sync-mdl .mdl-card { max-width:100%; max-height:90vh; max-height:90dvh; overflow:auto }
#meta-gunluk-sync-mdl .mdl-bd { padding:14px 16px }
}
/* === PERIOD REPORT — Pages section (Facebook + Instagram) === */
.pr-pages-row {
display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px
}
@media(max-width:900px){.pr-pages-row{grid-template-columns:1fr}}
.pr-page-card {
background:#fff;border:1px solid #E2E8F0;border-radius:14px;
padding:18px 20px;display:flex;flex-direction:column;gap:14px
}
.pr-page-fb { border-top:4px solid #1877F2 }
.pr-page-ig { border-top:4px solid #E91E63 }
.pr-page-empty-ig {
border:1px dashed #cbd5e1;background:#F8FAFC;
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:160px;text-align:center;padding:30px
}
.pr-page-card-head { display:flex;align-items:center;gap:12px }
.pr-page-pic { width:54px;height:54px;border-radius:50%;object-fit:cover;flex-shrink:0 }
.pr-page-pic-empty {
background:#cbd5e1;color:#fff;font-weight:800;font-size:22px;
display:flex;align-items:center;justify-content:center
}
.pr-page-meta { flex:1 }
.pr-page-name { font-size:15px;font-weight:800;color:#0F172A }
.pr-page-platform { font-size:11px;color:#64748b;margin-top:2px }
.pr-page-followers {
display:flex;align-items:baseline;gap:6px;padding-bottom:12px;border-bottom:1px solid #f1f5f9
}
.pr-page-followers-n { font-size:28px;font-weight:900;color:#0F172A }
.pr-page-followers-l { font-size:11px;color:#64748b }
.pr-page-metrics { display:grid;grid-template-columns:1fr 1fr;gap:8px }
.pr-page-metric {
background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:8px 10px
}
.pr-page-metric-lbl { font-size:10px;color:#64748b;font-weight:700;letter-spacing:.04em }
.pr-page-metric-val { font-size:16px;font-weight:800;margin-top:2px }
.pr-pages-empty {
background:#F8FAFC;border:1px dashed #cbd5e1;border-radius:14px;
padding:24px;display:flex;flex-direction:column;align-items:center;gap:6px;
text-align:center;margin-top:14px
}
.pr-pages-empty-i { font-size:42px;opacity:.5 }
.pr-pages-empty-t { font-size:14px;font-weight:700;color:#0F172A }
.pr-pages-empty-s { font-size:11px;color:#64748b;max-width:400px;line-height:1.6 }
/* ============================================================
META Günlük tab — sub-navigation (Daily / Ad details)
Merges the old "Period Report" tab into the Günlük tab so all
Meta-sourced data lives under a single navigation entry.
============================================================ */
#page-campaign-meta .cmp-subnav {
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
background:#fff; border:1px solid var(--c-n-200); border-radius:12px;
padding:6px; margin-bottom:14px; box-shadow:0 2px 8px rgba(11,24,57,.04);
}
#page-campaign-meta .cmp-subnav-btn {
appearance:none; border:1px solid transparent; background:transparent;
color:var(--c-n-600); font-family:var(--ff-ar); font-weight:700;
font-size:12.5px; padding:8px 16px; border-radius:8px; cursor:pointer;
display:inline-flex; align-items:center; gap:6px; transition:all .15s ease;
}
#page-campaign-meta .cmp-subnav-btn:hover { background:#F1F5F9; color:var(--c-primary-900) }
#page-campaign-meta .cmp-subnav-btn.active {
background:linear-gradient(135deg, var(--c-primary-500), #06B0AA);
color:#fff; box-shadow:0 2px 8px rgba(54,88,204,.25);
}
#page-campaign-meta .cmp-subnav-btn.active span:first-child { filter:none }
#page-campaign-meta .cmp-subnav-spacer { flex:1 }
/* Top-of-page variant: the günlük sub-nav promoted above the hero. */
#page-campaign-meta .cmp-subnav-top { margin-top:2px; margin-bottom:16px; }
#page-campaign-meta .cmp-subnav-hint {
font-size:11.5px; color:var(--c-n-500); font-family:var(--ff-ar);
padding:0 10px; line-height:1.5;
}
@media (max-width:640px) {
#page-campaign-meta .cmp-subnav { padding:4px; gap:4px }
#page-campaign-meta .cmp-subnav-btn { padding:7px 12px; font-size:11.5px }
#page-campaign-meta .cmp-subnav-hint { width:100%; padding:6px 4px 2px; text-align:center }
}
/* ============================================================
META Günlük — date filter bar (presets + custom range)
Sits between the toolbar and the table. Filters rows client-side
by report_date before rendering.
============================================================ */
#page-campaign-meta .cmp-gn-filter {
display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
background:#fff; border:1px solid var(--c-n-200); border-radius:12px;
padding:10px 14px; margin-bottom:14px; box-shadow:0 2px 8px rgba(11,24,57,.04);
}
#page-campaign-meta .cmp-gn-filter-presets {
display:inline-flex; flex-wrap:wrap; gap:5px;
}
#page-campaign-meta .cmp-gn-chip {
appearance:none; border:1px solid var(--c-n-200); background:#fff;
color:var(--c-n-600); font-family:var(--ff-ar); font-weight:600;
font-size:11.5px; padding:6px 12px; border-radius:999px; cursor:pointer;
transition:all .15s ease; line-height:1;
}
#page-campaign-meta .cmp-gn-chip:hover {
border-color:var(--c-primary-300); color:var(--c-primary-700);
background:var(--c-primary-50);
}
#page-campaign-meta .cmp-gn-chip.active {
background:linear-gradient(135deg, var(--c-primary-500), #06B0AA);
color:#fff; border-color:transparent;
box-shadow:0 2px 6px rgba(54,88,204,.25);
}
#page-campaign-meta .cmp-gn-filter-range {
display:inline-flex; align-items:center; gap:6px; flex-wrap:nowrap;
}
#page-campaign-meta .cmp-gn-filter-lbl {
font-size:11.5px; color:var(--c-n-500); font-family:var(--ff-ar);
font-weight:700; margin:0;
}
#page-campaign-meta .cmp-gn-date {
width:auto; min-width:130px; padding:6px 9px; font-size:12px;
border-radius:7px;
}
#page-campaign-meta .cmp-gn-filter-count {
margin-inline-start:auto; font-size:11.5px; color:var(--c-n-500);
font-family:var(--ff-num); padding:4px 10px; background:#F1F5F9;
border-radius:6px; font-weight:700;
}
@media (max-width:640px) {
#page-campaign-meta .cmp-gn-filter { padding:8px; gap:8px }
#page-campaign-meta .cmp-gn-chip { padding:6px 10px; font-size:11px }
#page-campaign-meta .cmp-gn-filter-range { width:100%; flex-wrap:wrap }
#page-campaign-meta .cmp-gn-date { flex:1; min-width:0 }
#page-campaign-meta .cmp-gn-filter-count { width:100%; text-align:center }
}
/* Drag-and-drop reorder for the META Campaign main 8 sub-tabs.
Available to ALL users (was admin-only). Each user sees their own order
via localStorage('cmp_main_tabs_order'); admins can save a shared default
to the server. */
.cmp-tabs[data-cmp-reorderable] .stab { transition: opacity .15s, transform .15s; cursor:grab }
.cmp-tabs[data-cmp-reorderable] .stab:active { cursor:grabbing }
.cmp-tabs[data-cmp-reorderable] .stab.cmp-tab-dragging { opacity: .4; transform: scale(.95) }
.cmp-tabs[data-cmp-reorderable] .stab.cmp-tab-over {
outline: 2px dashed rgba(54,88,204,.55); outline-offset: 2px;
background: rgba(54,88,204,.08);
}
.cmp-tabs[data-cmp-reorderable] .stab[draggable="true"]:hover {
outline: 1px dashed rgba(6,176,170,.35); outline-offset: 2px;
}
.cmp-tabs[data-cmp-reorderable] .stab .stab-grip {
display:inline-block; margin-inline-end:5px; font-size:11px;
color:var(--c-n-400); font-weight:700; letter-spacing:-2px;
transform:rotate(90deg); line-height:1; vertical-align:middle;
}
.cmp-tabs[data-cmp-reorderable] .stab.active .stab-grip { color:rgba(255,255,255,.65) }
/* Touch devices: HTML5 DnD isn't reliable — hide the grip and reset cursor. */
@media (hover:none) and (pointer:coarse) {
.cmp-tabs[data-cmp-reorderable] .stab { cursor:default }
.cmp-tabs[data-cmp-reorderable] .stab .stab-grip { display:none }
}
/* ============================================================
META Günlük sub-nav — drag-and-drop reorder (origin/main)
============================================================ */
#page-campaign-meta .cmp-subnav-btn { cursor:grab; user-select:none }
#page-campaign-meta .cmp-subnav-btn:active { cursor:grabbing }
#page-campaign-meta .cmp-subnav-grip {
display:inline-block; margin-inline-end:4px; font-size:11px;
color:var(--c-n-400); font-weight:700; letter-spacing:-2px;
transform:rotate(90deg); line-height:1;
}
#page-campaign-meta .cmp-subnav-btn.active .cmp-subnav-grip { color:rgba(255,255,255,.6) }
#page-campaign-meta .cmp-subnav-btn.cmp-subnav-dragging { opacity:.4; transform:scale(.96) }
#page-campaign-meta .cmp-subnav-btn.cmp-subnav-over { outline:2px dashed var(--c-primary-500); outline-offset:2px }
@media (hover:none) and (pointer:coarse) {
#page-campaign-meta .cmp-subnav-btn { cursor:default }
#page-campaign-meta .cmp-subnav-grip { display:none }
}
/* ============================================================
FIX: standalone Meta modals were rendering ALWAYS-VISIBLE inline.
They use class="mdl" directly (no .mov overlay wrapper), and the
base .mdl rule is only a white card with no display:none — so all
four boxes stacked into the page flow and broke vertical scrolling.
Here we restore proper overlay behaviour: hidden by default, shown
as a fixed backdrop when .open is present. Scoped to the 4 IDs so
the existing .mov/.mdl modal system is untouched.
============================================================ */
#meta-gunluk-sync-mdl,
#meta-config-mdl,
#meta-pages-mdl,
#meta-sync-mdl {
position: fixed !important; inset: 0 !important; z-index: 1000;
background: rgba(11,24,57,.55); backdrop-filter: blur(4px);
display: none !important; align-items: flex-start; justify-content: center;
padding: 24px; overflow-y: auto;
border-radius: 0 !important; box-shadow: none !important;
max-width: none !important; width: auto !important; margin: 0 !important;
animation: none !important;
}
#meta-gunluk-sync-mdl.open,
#meta-config-mdl.open,
#meta-pages-mdl.open,
#meta-sync-mdl.open { display: flex !important; }
/* Inner card — handles both naming variants used across the 4 modals
(.mdl-card from one author, .mdl-content from another). */
#meta-gunluk-sync-mdl > .mdl-card,
#meta-gunluk-sync-mdl > .mdl-content,
#meta-config-mdl > .mdl-card,
#meta-config-mdl > .mdl-content,
#meta-pages-mdl > .mdl-card,
#meta-pages-mdl > .mdl-content,
#meta-sync-mdl > .mdl-card,
#meta-sync-mdl > .mdl-content {
background: #fff; border-radius: 14px;
width: 100%; max-width: 700px; margin: auto; height: max-content;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
animation: si .2s ease;
}
@media (max-width: 640px) {
#meta-gunluk-sync-mdl, #meta-config-mdl, #meta-pages-mdl, #meta-sync-mdl { padding: 0; align-items: flex-end }
#meta-gunluk-sync-mdl > .mdl-card, #meta-gunluk-sync-mdl > .mdl-content,
#meta-config-mdl > .mdl-card, #meta-config-mdl > .mdl-content,
#meta-pages-mdl > .mdl-card, #meta-pages-mdl > .mdl-content,
#meta-sync-mdl > .mdl-card, #meta-sync-mdl > .mdl-content {
max-width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
}
}
/* ============================================================
Meta modal substructure — .mdl-h / .mdl-b / .mdl-f / .mdl-x
These class names were used in the markup but had no CSS rules,
so the modal rendered as a bare white box with unstructured content
and the footer buttons scattered.
============================================================ */
#meta-config-mdl > .mdl-content,
#meta-pages-mdl > .mdl-content,
#meta-sync-mdl > .mdl-content,
#meta-gunluk-sync-mdl > .mdl-card {
display: flex; flex-direction: column;
max-height: 92vh; max-height: 92dvh;
overflow: hidden;
}
#meta-config-mdl .mdl-h,
#meta-pages-mdl .mdl-h,
#meta-sync-mdl .mdl-h {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--c-n-200, #E2E8F0);
flex-shrink: 0;
}
#meta-config-mdl .mdl-h h3,
#meta-pages-mdl .mdl-h h3,
#meta-sync-mdl .mdl-h h3 {
margin: 0; font-size: 15px; font-weight: 800;
color: var(--c-primary-900, #0B1839); font-family: var(--ff-ar);
}
#meta-config-mdl .mdl-x,
#meta-pages-mdl .mdl-x,
#meta-sync-mdl .mdl-x {
appearance: none; border: 0; background: transparent;
width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
font-size: 15px; color: var(--c-n-500, #64748B);
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
#meta-config-mdl .mdl-x:hover,
#meta-pages-mdl .mdl-x:hover,
#meta-sync-mdl .mdl-x:hover {
background: #FEE2E2; color: #B91C1C;
}
#meta-config-mdl .mdl-b,
#meta-pages-mdl .mdl-b,
#meta-sync-mdl .mdl-b {
padding: 16px 20px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
#meta-config-mdl .mdl-f,
#meta-pages-mdl .mdl-f,
#meta-sync-mdl .mdl-f {
display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
padding: 12px 20px;
border-top: 1px solid var(--c-n-200, #E2E8F0);
background: #F8FAFC;
flex-shrink: 0;
}
/* Footer buttons used legacy single-letter classes (btn-r/btn-o/btn-p)
without the `.btn` prefix — give them consistent sizing here. */
#meta-config-mdl .mdl-f > button,
#meta-pages-mdl .mdl-f > button,
#meta-sync-mdl .mdl-f > button {
padding: 9px 16px; border-radius: 9px; border: 0; cursor: pointer;
font-size: 12.5px; font-weight: 700; font-family: var(--ff-ar);
display: inline-flex; align-items: center; gap: 6px;
transition: all .15s ease;
}
#meta-config-mdl .mdl-f .btn-p,
#meta-pages-mdl .mdl-f .btn-p,
#meta-sync-mdl .mdl-f .btn-p { background: var(--c-primary-500, #3658CC); color: #fff }
#meta-config-mdl .mdl-f .btn-p:hover,
#meta-pages-mdl .mdl-f .btn-p:hover,
#meta-sync-mdl .mdl-f .btn-p:hover { background: var(--c-primary-600, #2643A8) }
#meta-config-mdl .mdl-f .btn-o,
#meta-pages-mdl .mdl-f .btn-o,
#meta-sync-mdl .mdl-f .btn-o { background: var(--c-warning-500, #F59E0B); color: #fff }
#meta-config-mdl .mdl-f .btn-r,
#meta-pages-mdl .mdl-f .btn-r,
#meta-sync-mdl .mdl-f .btn-r {
background: #fff; color: var(--c-n-600, #475569);
border: 1px solid var(--c-n-200, #E2E8F0);
}
#meta-config-mdl .mdl-f .btn-r:hover,
#meta-pages-mdl .mdl-f .btn-r:hover,
#meta-sync-mdl .mdl-f .btn-r:hover { background: #F1F5F9 }
/* Inline inside the small status lines was rendering as a thin
dotted strip because no rule existed — give it a clean badge look. */
#meta-config-mdl small code,
#meta-pages-mdl small code,
#meta-sync-mdl small code {
background: #F1F5F9; border: 1px solid var(--c-n-200, #E2E8F0);
padding: 1px 6px; border-radius: 4px; font-size: 10.5px;
color: var(--c-primary-700, #1E3A8A); font-family: var(--ff-num);
}
/* ============================================================
META — Page Insights sub-view (FB + IG follower/engagement stats)
============================================================ */
#page-campaign-meta .cmp-gn-pi-range { display:inline-flex; align-items:center; gap:6px }
#page-campaign-meta .pi-period-bar {
font-size:12px; font-weight:700; color:var(--c-n-600); font-family:var(--ff-ar);
background:#F1F5F9; border:1px solid var(--c-n-200); border-radius:8px;
padding:8px 14px; margin-bottom:14px; display:inline-block;
}
#page-campaign-meta .pi-platform-card {
background:#fff; border:1px solid var(--c-n-200); border-radius:16px;
padding:18px 20px; margin-bottom:16px; box-shadow:0 2px 10px rgba(11,24,57,.05);
position:relative; overflow:hidden;
}
#page-campaign-meta .pi-platform-card::before {
content:''; position:absolute; top:0; inset-inline:0; height:4px;
}
#page-campaign-meta .pi-fb::before { background:linear-gradient(90deg,#1877F2,#3B5998) }
#page-campaign-meta .pi-ig::before { background:linear-gradient(90deg,#E91E63,#F58529,#DD2A7B,#8134AF) }
#page-campaign-meta .pi-pf-head {
display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap;
}
#page-campaign-meta .pi-pf-pic {
width:54px; height:54px; border-radius:50%; object-fit:cover; flex-shrink:0;
border:2px solid var(--c-n-200);
}
#page-campaign-meta .pi-pf-pic-empty {
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#64748B,#334155); color:#fff;
font-weight:800; font-size:22px;
}
#page-campaign-meta .pi-pf-name { font-size:16px; font-weight:800; color:var(--c-primary-900); font-family:var(--ff-ar) }
#page-campaign-meta .pi-pf-sub { font-size:12px; color:var(--c-n-500); margin-top:2px; font-family:var(--ff-ar) }
#page-campaign-meta .pi-pf-total {
margin-inline-start:auto; text-align:center; padding:6px 16px;
background:#F8FAFC; border-radius:12px; border:1px solid var(--c-n-200);
}
#page-campaign-meta .pi-pf-total-n { display:block; font-size:22px; font-weight:900; color:var(--c-primary-900); font-family:var(--ff-num) }
#page-campaign-meta .pi-pf-total-l { display:block; font-size:10.5px; color:var(--c-n-500); font-family:var(--ff-ar); margin-top:1px }
#page-campaign-meta .pi-stat-grid {
display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px;
}
#page-campaign-meta .pi-stat {
background:#F8FAFC; border:1px solid var(--c-n-200); border-radius:12px;
padding:14px 10px; text-align:center;
}
#page-campaign-meta .pi-stat-icon { font-size:20px; margin-bottom:4px }
#page-campaign-meta .pi-stat-val { font-size:20px; font-weight:900; font-family:var(--ff-num); letter-spacing:-.02em }
#page-campaign-meta .pi-stat-lbl { font-size:11px; color:var(--c-n-600); font-family:var(--ff-ar); margin-top:3px; font-weight:600 }
#page-campaign-meta .pi-note {
font-size:11px; color:var(--c-n-500); font-family:var(--ff-ar);
margin-top:12px; padding-top:10px; border-top:1px dashed var(--c-n-200); line-height:1.6;
}
#page-campaign-meta .pi-ig-empty {
background:#fff; border:1px dashed var(--c-n-300); border-radius:16px;
padding:28px 20px; text-align:center;
}
@media (max-width:640px) {
#page-campaign-meta .pi-pf-total { margin-inline-start:0; width:100% }
#page-campaign-meta .pi-stat-grid { grid-template-columns:repeat(2, 1fr) }
}
/* Page Insights — multi-page grouping + remove/add controls */
#page-campaign-meta .pi-page-group {
background:#F8FAFC; border:1px solid var(--c-n-200); border-radius:14px;
padding:14px; margin-bottom:16px;
}
#page-campaign-meta .pi-page-group-head {
display:flex; align-items:center; gap:8px; font-size:13px;
color:var(--c-n-700); font-family:var(--ff-ar); margin-bottom:10px;
padding:0 4px;
}
#page-campaign-meta .pi-page-group .pi-platform-card { margin-bottom:10px }
#page-campaign-meta .pi-page-group .pi-platform-card:last-child { margin-bottom:0 }
#page-campaign-meta .pi-page-remove {
margin-inline-start:auto; background:transparent; border:0; cursor:pointer;
width:28px; height:28px; border-radius:8px; color:var(--c-n-500);
font-size:14px; transition:all .15s;
}
#page-campaign-meta .pi-page-remove:hover { background:#FEE2E2; color:#B91C1C }
#page-campaign-meta .pi-add-cta {
text-align:center; padding:12px; border:1px dashed var(--c-n-300);
border-radius:12px; margin-top:8px; background:#FCFCFD;
}
/* ============================================================
META TOOLS — Recommendations / Ad Library / Audiences
============================================================ */
#page-campaign-meta .cmp-tools-toggle {
display:flex; gap:6px; background:#fff; border:1px solid var(--c-n-200);
border-radius:12px; padding:6px; margin-bottom:14px; flex-wrap:wrap;
}
#page-campaign-meta .cmp-tools-btn {
appearance:none; border:0; background:transparent; cursor:pointer;
color:var(--c-n-600); font-family:var(--ff-ar); font-weight:700;
font-size:12px; padding:8px 14px; border-radius:8px; transition:all .15s;
}
#page-campaign-meta .cmp-tools-btn:hover { background:#F1F5F9; color:var(--c-primary-700) }
#page-campaign-meta .cmp-tools-btn.active {
background:linear-gradient(135deg, var(--c-primary-500), #06B0AA);
color:#fff; box-shadow:0 2px 6px rgba(54,88,204,.25);
}
/* ---- Recommendations ---- */
#page-campaign-meta .reco-summary {
font-size:12.5px; font-weight:700; color:var(--c-n-700);
background:#FEF3C7; border:1px solid #F59E0B; border-radius:10px;
padding:8px 14px; margin-bottom:14px; display:inline-block;
}
#page-campaign-meta .reco-group {
background:#fff; border:1px solid var(--c-n-200); border-radius:12px;
padding:14px 16px; margin-bottom:12px;
}
#page-campaign-meta .reco-group-head {
display:flex; align-items:center; gap:8px; padding-bottom:10px;
border-bottom:1px solid var(--c-n-200); margin-bottom:10px; flex-wrap:wrap;
}
#page-campaign-meta .reco-camp-name { font-weight:800; color:var(--c-primary-900); font-size:13.5px }
#page-campaign-meta .reco-obj {
font-size:10.5px; color:var(--c-n-600); background:#F1F5F9;
padding:2px 8px; border-radius:6px; font-family:var(--ff-num);
}
#page-campaign-meta .reco-status {
font-size:10px; padding:2px 8px; border-radius:6px; font-weight:700;
margin-inline-start:auto;
}
#page-campaign-meta .reco-status-active { background:#D1FAE5; color:#065F46 }
#page-campaign-meta .reco-status-paused { background:#FEE2E2; color:#991B1B }
#page-campaign-meta .reco-item {
padding:10px 12px; border-radius:8px; margin-top:8px;
border-inline-start:3px solid var(--c-n-300); background:#F8FAFC;
}
#page-campaign-meta .reco-imp-high { border-inline-start-color:#DC2626; background:#FEF2F2 }
#page-campaign-meta .reco-imp-med { border-inline-start-color:#F59E0B; background:#FFFBEB }
#page-campaign-meta .reco-imp-low { border-inline-start-color:#3B82F6; background:#EFF6FF }
#page-campaign-meta .reco-title { font-weight:700; font-size:12.5px; color:var(--c-primary-900); margin-bottom:4px }
#page-campaign-meta .reco-msg { font-size:12px; color:var(--c-n-700); line-height:1.6 }
#page-campaign-meta .reco-meta { font-size:10.5px; color:var(--c-n-500); margin-top:5px }
/* ---- Ad Library ---- */
#page-campaign-meta .adlib-count {
font-size:12px; font-weight:700; color:var(--c-n-700);
margin-bottom:12px; background:#EFF6FF; padding:6px 12px;
border-radius:8px; display:inline-block;
}
#page-campaign-meta .adlib-grid {
display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px;
}
#page-campaign-meta .adlib-card {
background:#fff; border:1px solid var(--c-n-200); border-radius:12px;
padding:14px; transition:all .15s;
}
#page-campaign-meta .adlib-card:hover { border-color:var(--c-primary-300); box-shadow:0 4px 12px rgba(54,88,204,.08) }
#page-campaign-meta .adlib-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; font-size:12.5px; color:var(--c-primary-900) }
#page-campaign-meta .adlib-date { font-size:10.5px; color:var(--c-n-500); font-family:var(--ff-num) }
#page-campaign-meta .adlib-title { font-weight:700; font-size:12.5px; color:var(--c-n-800); margin-bottom:5px }
#page-campaign-meta .adlib-body { font-size:11.5px; color:var(--c-n-600); line-height:1.6; margin-bottom:8px; max-height:80px; overflow:hidden }
#page-campaign-meta .adlib-stats { display:flex; gap:10px; font-size:10.5px; color:var(--c-n-600); padding-top:8px; border-top:1px solid var(--c-n-200); flex-wrap:wrap }
/* ---- Custom Audiences ---- */
#page-campaign-meta .aud-grid {
display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px;
}
#page-campaign-meta .aud-card {
background:#fff; border:1px solid var(--c-n-200); border-radius:12px;
padding:14px; position:relative; overflow:hidden;
}
#page-campaign-meta .aud-card::before { content:''; position:absolute; top:0; inset-inline:0; height:4px }
#page-campaign-meta .aud-custom::before { background:linear-gradient(90deg,#3B82F6,#06B0AA) }
#page-campaign-meta .aud-lookalike::before { background:linear-gradient(90deg,#8B5CF6,#EC4899) }
#page-campaign-meta .aud-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap }
#page-campaign-meta .aud-badge {
font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px;
background:#F1F5F9; color:var(--c-n-700);
}
#page-campaign-meta .aud-card b { font-size:13px; color:var(--c-primary-900) }
#page-campaign-meta .aud-desc { font-size:11.5px; color:var(--c-n-500); margin-bottom:10px; line-height:1.5 }
#page-campaign-meta .aud-stats { display:flex; gap:10px; font-size:11px; color:var(--c-n-600); flex-wrap:wrap; margin-bottom:10px }
#page-campaign-meta .aud-actions { display:flex; gap:6px; padding-top:8px; border-top:1px solid var(--c-n-200) }
/* Audience create modal tabs */
.cmp-aud-tabs { display:flex; gap:6px; background:#F1F5F9; border-radius:10px; padding:4px; margin-bottom:10px }
.cmp-aud-tab {
flex:1; appearance:none; border:0; background:transparent; cursor:pointer;
padding:8px 12px; border-radius:8px; font-family:var(--ff-ar); font-weight:700; font-size:12px;
color:var(--c-n-600); transition:all .15s;
}
.cmp-aud-tab.active { background:#fff; color:var(--c-primary-700); box-shadow:0 1px 4px rgba(0,0,0,.08) }
/* ============================================================
Ad Library — sort/save toolbar + AI generator
============================================================ */
#page-campaign-meta .adlib-toolbar {
display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
background:#fff; border:1px solid var(--c-n-200); border-radius:12px;
padding:10px 14px; margin-bottom:12px;
}
#page-campaign-meta .adlib-sort { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--c-n-600); flex-wrap:wrap }
#page-campaign-meta .adlib-sort-btn {
appearance:none; border:1px solid var(--c-n-200); background:#fff;
color:var(--c-n-600); font-family:var(--ff-ar); font-weight:600;
font-size:11.5px; padding:5px 10px; border-radius:999px; cursor:pointer;
transition:all .15s;
}
#page-campaign-meta .adlib-sort-btn:hover { border-color:var(--c-primary-300); color:var(--c-primary-700) }
#page-campaign-meta .adlib-sort-btn.active {
background:linear-gradient(135deg, var(--c-primary-500), #06B0AA);
color:#fff; border-color:transparent;
}
#page-campaign-meta .adlib-saved-info {
margin-inline-start:auto; font-size:12px; color:var(--c-n-600);
background:#FEF3C7; padding:6px 12px; border-radius:8px;
}
#page-campaign-meta .adlib-saved-info a { color:#7C2D12; font-weight:700; text-decoration:none }
#page-campaign-meta .adlib-actions {
display:flex; gap:6px; padding-top:10px; margin-top:10px;
border-top:1px solid var(--c-n-200);
}
#page-campaign-meta .adlib-act-btn {
appearance:none; border:1px solid var(--c-n-200); background:#fff;
cursor:pointer; padding:5px 10px; border-radius:7px; font-size:11px;
font-family:var(--ff-ar); color:var(--c-n-700); font-weight:600;
transition:all .15s;
}
#page-campaign-meta .adlib-act-btn:hover { background:var(--c-primary-50); border-color:var(--c-primary-300); color:var(--c-primary-700) }
/* AI generator modal */
.adgen-source-list { display:flex; flex-direction:column; gap:4px }
.adgen-source-item {
display:flex; align-items:flex-start; gap:8px; padding:8px 10px;
border-radius:6px; cursor:pointer; transition:background .15s;
}
.adgen-source-item:hover { background:#fff }
.adgen-source-item input[type=checkbox] { margin-top:3px; flex-shrink:0 }
.adgen-src-name { font-size:12px; font-weight:700; color:var(--c-primary-900) }
.adgen-src-preview { font-size:11px; color:var(--c-n-500); margin-top:2px; line-height:1.4 }
.adgen-result-card {
background:linear-gradient(135deg, #F0FDF4, #ECFDF5);
border:1px solid #10B981; border-radius:12px;
padding:14px 16px; margin-top:12px; position:relative;
}
.adgen-result-num {
position:absolute; top:10px; inset-inline-end:12px;
background:#10B981; color:#fff; font-weight:800; font-size:11px;
padding:2px 8px; border-radius:6px;
}
.adgen-hook {
font-size:15px; font-weight:800; color:#065F46;
font-family:var(--ff-ar); line-height:1.4; margin-bottom:8px;
}
.adgen-body { font-size:13px; color:#0F172A; line-height:1.6; margin-bottom:8px; font-family:var(--ff-ar) }
.adgen-cta {
font-size:12.5px; font-weight:800; color:#7C2D12;
background:#FEF3C7; padding:5px 12px; border-radius:6px;
display:inline-block; margin-bottom:6px;
}
.adgen-emojis { font-size:18px; margin:6px 0 }
.adgen-result-card .adlib-act-btn { margin-top:8px }
/* ============================================================
نموذج مقترح المشروع / Proje Teklif Formu — Yedi Başak brand
============================================================ */
#pp-form-card .pp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;position:sticky;top:0;z-index:5;background:var(--c-bg,#f1f5f9);padding:8px 0}
.pp-doc{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:30px 34px;max-width:932px;margin:0 auto;box-shadow:0 12px 34px -10px rgba(11,24,57,.10);font-family:'Cairo','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif}
/* الحفاظ على ألوان وتدرّجات الهوية عند الطباعة/التصدير لـ PDF */
.pp-doc,.pp-doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}
/* letterhead */
.pp-letterhead{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.pp-logo{display:inline-flex;align-items:center;height:48px;flex:0 0 auto}
.pp-logo svg{width:50px;height:48px;display:block}
.pp-logo-img{height:48px;width:auto;max-width:240px;object-fit:contain;display:block}
.pp-logo-upload{margin-inline-start:8px;align-self:center;background:#EAF7F8;border:1px solid #B6E6EB;color:#067885;border-radius:8px;font-size:11px;font-weight:700;padding:6px 10px;cursor:pointer;white-space:nowrap}
.pp-logo-upload:hover{background:#DBF3F5}
.pp-wm{display:flex;flex-direction:column;line-height:1}
.pp-wm b{font-size:25px;font-weight:800;color:#147C8D;letter-spacing:.5px}
.pp-wm small{font-size:10.5px;font-weight:700;color:#5AA9B5;letter-spacing:4px;margin-top:4px}
.pp-lh-eyebrow{margin-inline-start:auto;text-align:end;font-size:10px;color:#94A3B8;font-weight:600;line-height:1.7}
.pp-rule{height:3px;border-radius:2px;background:linear-gradient(90deg,#5FCCDB,#06B0AA);margin:12px 0 4px}
/* title */
.pp-title{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;background:linear-gradient(135deg,#5FCCDB,#06B0AA);border-radius:11px;padding:13px 14px;margin:12px 0;box-shadow:0 5px 14px -3px rgba(6,176,170,.28)}
.pp-title b{font-size:18px;font-weight:800;color:#fff;letter-spacing:1px}
.pp-title span{font-size:15px;font-weight:700;color:#EAFEFF}
/* notes */
.pp-note{background:#F0FBFC;border:1px solid #CDEFF3;border-radius:10px;padding:12px 14px;margin-bottom:6px}
.pp-note p{font-size:11px;line-height:1.65;color:#475569;margin:0}
.pp-note p.tr{direction:ltr;text-align:left}
.pp-note p.ar{direction:rtl;text-align:right;margin-top:7px}
.pp-note.pp-foot{background:#FFF7ED;border-color:#FED7AA;margin-top:14px;margin-bottom:0}
.pp-note.pp-foot p{color:#9A3412;font-weight:600}
/* section bands */
.pp-sec-head{background:linear-gradient(135deg,#5FCCDB,#06B0AA);color:#fff;font-weight:800;font-size:12.5px;border-radius:9px;padding:11px 14px;margin:16px 0 8px;box-shadow:0 3px 8px -2px rgba(6,176,170,.22)}
.pp-sub{background:#DBF3F5;border:1px solid #B6E6EB;color:#067885;font-weight:700;font-size:11.5px;border-radius:8px;padding:9px 13px;margin:14px 0 8px}
.pp-hint{font-size:10px;color:#64748b;margin:0 2px 8px;line-height:1.5}
/* key / value table */
.pp-fieldset{border:1px solid #D9E2E6;border-radius:10px;overflow:hidden;margin-bottom:4px}
.pp-frow{display:grid;grid-template-columns:272px 1fr;border-bottom:1px solid #E3EAED;min-height:42px}
.pp-frow:last-child{border-bottom:0}
.pp-frow.cols4{grid-template-columns:160px 1fr 160px 1fr}
.pp-frow.tall{min-height:64px}
.pp-frow>div{border-inline-start:1px solid #E3EAED}
.pp-frow>div:first-child{border-inline-start:0}
.pp-flabel{background:#EAF7F8;display:flex;align-items:center;padding:8px 11px;font-size:10.5px;font-weight:700;color:#0B3B40}
.pp-fval{background:#fff;display:flex;align-items:center;padding:3px 8px}
.pp-frow.tall .pp-fval{align-items:stretch;padding:6px 8px}
.pp-fval .fi{border:0!important;background:transparent;width:100%;min-height:30px;padding:4px;font-size:12px;color:#0B1839;box-shadow:none!important;direction:rtl}
.pp-fval .fi:focus{outline:0;background:#F0FBFC;border-radius:6px}
.pp-fval textarea.fi{min-height:50px;resize:vertical;line-height:1.55;overflow:hidden}
/* totals */
.pp-frow.pp-total .pp-flabel{background:#E6FBFA;color:#04707C;font-weight:800}
.pp-frow.pp-total .pp-fval .fi{color:#04707C;font-weight:800}
/* items table */
.pp-items-wrap{overflow-x:auto;border:1px solid #D9E2E6;border-radius:10px}
.pp-items-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.pp-items-tbl thead th{background:linear-gradient(135deg,#5FCCDB,#06B0AA);color:#063A3E;padding:11px 8px;font-weight:800;font-size:10.5px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.3)}
.pp-items-tbl thead th:first-child{border-inline-start:0}
.pp-items-tbl tbody td{border-top:1px solid #E3EAED;border-inline-start:1px solid #E3EAED;padding:4px}
.pp-items-tbl tbody td:first-child{border-inline-start:0}
.pp-items-tbl .fi{width:100%;min-height:32px;border:0!important;background:transparent;box-shadow:none!important}
.pp-items-tbl .fi:focus{outline:0;background:#F0FBFC;border-radius:6px}
.pp-additem{margin:8px 0 6px;color:#04827E;border-color:#7FE5E0}
/* signatures */
.pp-signs{display:grid;grid-template-columns:1fr 238px;gap:14px;margin-top:16px}
.pp-sign-box{border:1px solid #CBD9DE;border-radius:11px;padding:14px 16px}
.pp-sign-box .pp-frow{grid-template-columns:130px 1fr;border-bottom:0;min-height:auto;margin-bottom:10px}
.pp-sign-box .pp-frow:last-child{margin-bottom:0}
.pp-sign-box .pp-frow>div{border-inline-start:0}
.pp-sign-box .pp-flabel{background:transparent;padding:6px 0;align-items:flex-end;font-size:10.5px;color:#334155}
.pp-sign-box .pp-fval{background:transparent;border-bottom:1.5px solid #C2D0D6;padding:0 4px}
.pp-sign-box .pp-fval .fi{min-height:28px}
.pp-sign-title{font-weight:800;color:#04707C;font-size:11.5px;text-align:center;background:#EAF7F8;border-radius:8px;padding:7px;margin-bottom:12px}
.pp-stamp{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:176px;background:#FBFDFD;border:1.4px dashed #9FD9DF}
.pp-stamp .pp-sign-title{background:transparent;color:#5AA0AB;width:100%}
/* responsive */
@media(max-width:768px){
.pp-doc{padding:16px 12px}
.pp-frow,.pp-frow.cols4{grid-template-columns:1fr}
.pp-frow>div{border-inline-start:0}
.pp-frow>div.pp-flabel{border-bottom:1px solid #E3EAED}
.pp-signs{grid-template-columns:1fr}
.pp-stamp{min-height:120px}
.pp-items-tbl{width:max-content;min-width:100%}
}
/* الطباعة/التصدير: نُظهر النموذج فقط بشكل ورقة A4 نظيفة مع الحفاظ على ألوان الهوية */
@media print{
html,body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
body *{visibility:hidden!important}
#pp-form-card,#pp-form-card *{visibility:visible!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
#pp-form-card{position:absolute;inset:0;width:100%;margin:0;padding:0}
#pp-form-card .pp-actions,.pp-additem,#pp-form-title{display:none!important}
.pp-doc{border:none;box-shadow:none;max-width:100%;border-radius:0;padding:0}
.pp-improve,#pp-ai-modal,#pp-preview-modal,.pp-logo-upload{display:none!important}
/* rows must grow to fit content (textareas are swapped for auto-height divs
at print time) so long text expands its box instead of being clipped */
.pp-frow,.pp-frow.tall,.pp-frow.cols4{min-height:0!important;height:auto!important;break-inside:avoid}
.pp-fval{align-items:stretch!important}
.pp-fval textarea.fi{overflow:visible!important}
}
.pp-print-val{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-size:12px;line-height:1.55;color:#0B1839;padding:4px;width:100%;min-height:30px}
/* ===== AI proposal assistant (مساعد الذكاء الاصطناعي) ===== */
.pp-ai-btn{background:linear-gradient(135deg,#7C3AED,#06B0AA);color:#fff;border:0;font-weight:800;box-shadow:0 4px 12px -2px rgba(124,58,237,.35)}
.pp-ai-btn:hover{filter:brightness(1.05)}
.pp-fval-ai{position:relative}
.pp-improve{position:absolute;inset-inline-end:6px;top:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #D6C4F5;background:#F6F1FE;color:#7C3AED;border-radius:7px;font-size:12px;cursor:pointer;line-height:1;padding:0;transition:transform .12s,background .12s}
.pp-improve:hover{background:#EDE3FD;transform:scale(1.08)}
.pp-fval-ai textarea.fi{padding-inline-end:34px}
.pp-ai-box{display:flex;flex-direction:column;gap:12px;padding:20px}
.pp-ai-head{display:flex;align-items:center;justify-content:space-between}
.pp-ai-title{font-size:16px;font-weight:800;color:#0B1839}
.pp-ai-x{background:none;border:0;font-size:15px;color:#94A3B8;cursor:pointer;padding:4px}
.pp-ai-sub{font-size:12px;color:#64748b;line-height:1.6;margin:0}
.pp-ai-box #pp-ai-brief{width:100%;min-height:96px;resize:vertical;line-height:1.6}
.pp-ai-row{display:flex;align-items:center;gap:10px}
.pp-ai-row label{font-size:12px;font-weight:700;color:#334155;white-space:nowrap}
.pp-ai-row .fsel{flex:1}
.pp-ai-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.pp-ai-status{font-size:12px;color:#475569;min-height:18px;text-align:center}
/* ===== معاينة المقترح ===== */
.pp-prev-btn{background:#0B1839;color:#fff;border:0;font-weight:800}
.pp-prev-btn:hover{filter:brightness(1.12)}
#pp-preview-modal{align-items:center;justify-content:center}
.pp-preview-shell{background:#EAF0F2;border-radius:14px;width:96%;max-width:1010px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px -12px rgba(0,0,0,.4)}
.pp-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid #E2E8F0;flex-wrap:wrap}
.pp-preview-ttl{font-weight:800;color:#0B1839;font-size:15px}
.pp-preview-acts{display:flex;gap:8px;flex-wrap:wrap}
.pp-preview-scroll{overflow:auto;padding:20px;flex:1}
.pp-preview-scroll .pp-doc{margin:0 auto}
.pp-prev-val{min-height:18px;font-size:12px;color:#0B1839;padding:4px;white-space:pre-wrap;word-break:break-word;line-height:1.55}
.pp-prev-val:empty{min-height:22px}
/* ===== المدقق المالي بالذكاء ===== */
.aud-hero{background:linear-gradient(135deg,#0B1839,#06B0AA);border-radius:16px;padding:22px 26px;color:#fff;margin-bottom:16px;box-shadow:0 10px 28px -8px rgba(11,24,57,.35)}
.aud-hero .aud-eyebrow{font-size:12px;font-weight:800;opacity:.92;letter-spacing:.5px}
.aud-hero h2{font-size:20px;font-weight:800;margin:6px 0 4px}
.aud-hero p{font-size:12.5px;opacity:.9}
.aud-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.aud-tab{background:#fff;border:1px solid #E2E8F0;border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:700;color:#475569;cursor:pointer}
.aud-tab.active{background:linear-gradient(135deg,#5FCCDB,#06B0AA);color:#fff;border-color:transparent;box-shadow:0 4px 12px -3px rgba(6,176,170,.35)}
.aud-toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.aud-toolbar label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#334155}
.aud-toolbar .fi{width:160px}
.aud-stat{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:12px 18px;min-width:120px}
.aud-stat-val{font-size:20px;font-weight:800;color:#0B1839}
.aud-stat-lbl{font-size:11px;color:#64748b;font-weight:600}
.aud-stat-danger{border-color:#fca5a5;background:#fef2f2}
.aud-stat-danger .aud-stat-val{color:#dc2626}
.aud-ai-out{margin-top:14px;background:#F6F1FE;border:1px solid #D6C4F5;border-radius:12px;padding:16px 18px}
.aud-ai-title{font-weight:800;color:#7C3AED;font-size:14px;margin-bottom:8px}
.aud-ai-body{font-size:13px;line-height:1.85;color:#334155}
@media print{ #page-auditor{display:none!important} }
/* المدقق — بطاقات الضوابط (المرحلة 4) */
.aud-ctrl-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:16px 18px;margin-bottom:14px}
.aud-ctrl-card h4{font-size:14px;font-weight:800;color:#0B1839;margin-bottom:6px}
.aud-ctrl-card p{font-size:12px;color:#64748b;line-height:1.7;margin-bottom:10px}
/* كشف حساب الطرف — صفوف قابلة للنقر تنقل إلى السجل الأصلي في قسمه */
.stmt-link-row{cursor:pointer}
.stmt-link-row:hover td{background:#eef2ff}
/* وميض السجل المستهدف بعد القفز إليه من كشف الحساب */
@keyframes rowFlash{0%,60%{background:#fef08a}100%{background:transparent}}
tr.row-flash td{animation:rowFlash 3s ease-out}
/* ================================================================
بطاقات الموبايل للجداول الرئيسية (≤480px) — الدفعة الأولى:
التكية · المشاريع · المصروفات · المشتريات · ربوع · الاستهلاك
(البطاقات معلَّمة بـ .m-cards في index.php)
⚠️ تقديس الصلاحيات — قاعدة حاكمة:
خلايا الأعمدة الممنوعة تُخفى بقاعدتين أعلى أولوية من كل ما هنا:
1) صلاحيات المستخدم: #X-body td:nth-child(n){display:none !important}
2) إعداد المسؤول: #X-body td[data-col]{display:none !important}
لذلك «display» على td هنا بدون !important عمداً — كي تبقى قواعد
الصلاحيات فائزة دائماً، فلا يظهر في البطاقة أي حقل ممنوع.
================================================================ */
@media(max-width:480px){
/* رأس الأعمدة يختفي — البطاقة تحمل تسمياتها بنفسها */
.m-cards thead{display:none !important}
/* شريط إعدادات FAT الزخرفي وصفّ المجاميع السفلي — المجاميع تنتقل لشريط الحالة */
.m-cards .fat-ribbon{display:none !important}
.m-cards tfoot{display:none !important}
.m-cards table{display:block;min-width:0 !important}
.m-cards tbody{display:block}
/* الصف → بطاقة بشبكة عمودين */
.m-cards tbody tr{
display:grid;grid-template-columns:1fr 1fr;
background:#fff;border:1px solid var(--c-n-200,#e2e8f0);
border-radius:14px;margin:0 0 10px;padding:2px 2px 4px;
box-shadow:0 1px 3px rgba(11,24,57,.06);overflow:hidden;
}
/* الخلية → حقل بتسمية صغيرة فوق القيمة.
لا !important على display — الصلاحيات يجب أن تفوز. */
.m-cards tbody td{
display:flex;flex-direction:column;gap:1px;
padding:6px 11px !important;border:0 !important;
background:transparent !important;
text-align:right !important;white-space:normal !important;
font-size:13px !important;min-width:0;overflow-wrap:anywhere;
}
.m-cards tbody td[data-label]::before{
content:attr(data-label);
font-size:9.5px;font-weight:700;color:var(--c-n-500,#94a3b8);
letter-spacing:.02em;
}
/* خلية التحديد + رقم الصف: صف علوي مصغّر */
.m-cards tbody td.col-sel,
.m-cards tbody td:has(> input.row-sel){
flex-direction:row;align-items:center;padding:6px 11px 0 !important;
}
.m-cards tbody td.col-num{
flex-direction:row;align-items:center;justify-content:flex-end;
font-size:10.5px !important;color:var(--c-n-500,#94a3b8);
font-family:var(--ff-num,inherit);padding:6px 11px 0 !important;
}
.m-cards tbody td.col-num::before{display:none}
/* خلية العنوان (الصنف/المشروع/البيان): بعرض كامل وبروز */
.m-cards tbody td[data-col="item"],
.m-cards tbody td[data-col="project"],
.m-cards tbody td[data-col="desc"]{
grid-column:1/-1;
font-size:15.5px !important;font-weight:800 !important;
color:var(--c-primary-900,#16203A);
padding-top:2px !important;
}
.m-cards tbody td[data-col="item"]::before,
.m-cards tbody td[data-col="project"]::before,
.m-cards tbody td[data-col="desc"]::before{display:none}
/* التاريخ: رقمي مضغوط */
.m-cards tbody td[data-col="date"]{
font-family:var(--ff-num,inherit);font-weight:700;
font-variant-numeric:tabular-nums;
}
/* المبالغ: الشيقل أخضر بارز، الدولار أزرق — نفس ألوان النظام */
.m-cards tbody td[data-col="totalPrice"],
.m-cards tbody td[data-col="total_price"],
.m-cards tbody td[data-col="amount"],
.m-cards tbody td[data-col="shekelVal"]{
color:#059669 !important;font-weight:800 !important;
font-size:15px !important;font-variant-numeric:tabular-nums;
}
.m-cards tbody td[data-col="dollar"],
.m-cards tbody td[data-col="dollarVal"]{
color:#2643A8 !important;font-weight:700 !important;
font-variant-numeric:tabular-nums;
}
/* خلية الإجراءات (الأخيرة): شريط سفلي بعرض كامل */
.m-cards tbody td:last-child{
grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;
justify-content:flex-start;
border-top:1px dashed var(--c-n-200,#e2e8f0) !important;
margin-top:4px;padding:7px 11px 5px !important;
}
.m-cards tbody td:last-child::before{display:none}
.m-cards tbody td:last-child > button{width:32px;height:32px;font-size:13px}
/* رسالة «لا توجد سجلات» (colspan) تبقى سطراً كاملاً */
.m-cards tbody td[colspan]{grid-column:1/-1}
/* شريط الحالة السفلي = شريط المجاميع الثابت
(يعرض المجاميع عبر updateFatStatusBar المحمي بصلاحيات canViewColumn) */
.m-cards .fat-statusbar{
position:sticky;bottom:0;z-index:5;
border-radius:10px;margin:2px 0 0;
box-shadow:0 -2px 10px rgba(11,24,57,.08);
}
}
/* الوضع الداكن لبطاقات الموبايل */
@media(max-width:480px){
html[data-theme="dark"] .m-cards tbody tr{
background:#0F172A;border-color:#334155;
}
html[data-theme="dark"] .m-cards tbody td[data-col="item"],
html[data-theme="dark"] .m-cards tbody td[data-col="project"],
html[data-theme="dark"] .m-cards tbody td[data-col="desc"]{color:#E2E8F0}
html[data-theme="dark"] .m-cards tbody td[data-label]::before{color:#64748B}
html[data-theme="dark"] .m-cards tbody td:last-child{border-top-color:#334155 !important}
html[data-theme="dark"] .m-cards tbody td[data-col="totalPrice"],
html[data-theme="dark"] .m-cards tbody td[data-col="total_price"],
html[data-theme="dark"] .m-cards tbody td[data-col="amount"],
html[data-theme="dark"] .m-cards tbody td[data-col="shekelVal"]{color:#4FD0A0 !important}
html[data-theme="dark"] .m-cards tbody td[data-col="dollar"],
html[data-theme="dark"] .m-cards tbody td[data-col="dollarVal"]{color:#8CA2F7 !important}
}
/* خلية فارغة تماماً في البطاقة → لا تُعرض تسمية يتيمة
(بدون !important — لا تصادم مع قواعد الصلاحيات) */
@media(max-width:480px){
.m-cards tbody td:not(:last-child):not(.col-sel):empty{display:none}
}
/* ================================================================
تصحيحات بطاقات الموبايل فوق قواعد «الجدول المضغوط» القديمة
(القواعد القديمة في كتلتي 768/480 كانت تقفل ارتفاع الخلية على
28-30px مع overflow:hidden و max-width:80px — فتُقصّ القيمة تحت
التسمية ولا يظهر إلا سطر التسمية. كما كانت تخفي خلية الإجراءات.)
================================================================ */
@media(max-width:480px){
/* فكّ القفل: ارتفاع حر، لا قصّ، لا حدّ للعرض */
.m-cards tbody td{
height:auto !important;
max-width:none !important;
overflow:visible !important;
text-overflow:clip !important;
}
/* خلية الإجراءات كانت مخفية بـ display:none !important في وضع الجدول.
نعيدها كشريط سفلي للبطاقة.
🔒 ملاحظة صلاحيات: هذا آمن بالبناء — عمود الإجراءات ليس حقل بيانات:
صلاحيات الأعمدة تستهدف فقط td[data-col] أو nth-child مشتقاً من
th[data-col]، وخلية الإجراءات بلا data-col فلا تطالها أي قاعدة صلاحية.
أما أزرار تعديل/حذف داخلها فتُظهرها/تُخفيها applyPermissionsToUI
لكل مستخدم كما كانت دائماً. */
.m-cards tbody td:last-child{display:flex !important}
/* خلايا التحديد ورقم الصف: فكّ قيود العرض المصغّر (14-20px) */
.m-cards tbody td.td-sel,
.m-cards tbody td.col-sel,
.m-cards tbody td:has(> input.row-sel),
.m-cards tbody tr > td:first-child:has(input[type=checkbox]){
width:auto !important;min-width:0 !important;max-width:none !important;
padding:6px 11px 0 !important;
}
.m-cards tbody td.col-num,
.m-cards tbody tr > td:nth-child(2):not([data-col]):not(.td-sel):not(.col-sel){
width:auto !important;min-width:0 !important;max-width:none !important;
font-size:10.5px !important;padding:6px 11px 0 !important;
}
.m-cards .row-sel{width:16px !important;height:16px !important}
/* شارة الحالة (المشاريع): القاعدة القديمة صفّرت حجم الخط (نقطة فقط) —
في البطاقة يوجد متسع للنص الكامل */
.m-cards .cs-status{font-size:12px !important;gap:5px !important}
}
/* ===== مبدّل عرض الموبايل: بطاقات / جدول ===== */
.mview-toggle{display:none}
@media(max-width:480px){
.mview-toggle{
display:inline-flex;align-items:center;
background:var(--c-n-100,#f1f5f9);
border:1px solid var(--c-n-200,#e2e8f0);
border-radius:9px;padding:2px;flex:none;
}
.mview-toggle button{
appearance:none;border:0;background:transparent;
font-family:inherit;font-size:11px;font-weight:700;
padding:5px 10px;border-radius:7px;
color:var(--c-n-600,#475569);cursor:pointer;white-space:nowrap;
}
.mview-toggle button.active{
background:#fff;color:var(--c-primary-700,#2643A8);
box-shadow:0 1px 2px rgba(11,24,57,.12);
}
html[data-theme="dark"] .mview-toggle{background:#1E293B;border-color:#334155}
html[data-theme="dark"] .mview-toggle button{color:#94A3B8}
html[data-theme="dark"] .mview-toggle button.active{background:#0F172A;color:#B8C7FF}
/* رأس البطاقة يلتفّ إن ضاق المكان بالمبدّل */
.m-cards .tbl-hdr, .tbl-card .tbl-hdr{flex-wrap:wrap;gap:8px}
}
/* ===== فصل الفرز عن الفلترة في رأس العمود (المرحلة ١) =====
أيقونة ▼ صارت منطقة نقر أوسع (chip) — النقر عليها يفتح الفلترة،
والنقر على باقي الرأس يقلب الفرز (كما في Excel). */
th[data-col] .col-filter-icon{
font-size:9px;line-height:1;cursor:pointer;
display:inline-block;padding:4px 7px;margin-inline-start:2px;
border-radius:6px;opacity:.55;transition:opacity .15s,background .15s;
}
th[data-col] .col-filter-icon:hover{opacity:1;background:rgba(255,255,255,.22)}
th[data-col].col-filtered .col-filter-icon{opacity:1;color:#7EE2C0;background:rgba(126,226,192,.15)}
/* ===== المرحلة ٢: حجم الصفحة + رأس جدول ثابت ===== */
/* قائمة حجم الصفحة بجانب عدّاد الترقيم */
.pgn-ps{
margin-inline-start:8px;padding:3px 8px;
border:1px solid var(--c-n-200,#e2e8f0);border-radius:7px;
background:#fff;font-family:inherit;font-size:11.5px;font-weight:600;
color:var(--c-n-600,#475569);cursor:pointer;vertical-align:middle;
}
html[data-theme="dark"] .pgn-ps{background:#1E293B;border-color:#334155;color:#B8C7FF}
/* رأس ثابت أثناء التمرير — الجداول الطويلة تتصفّح داخل حاويتها
(كل رؤوس th تحمل خلفية معتمة أصلاً فلا تشفّ الصفوف من خلفها).
كمبيوتر فقط؛ الموبايل له وضعا البطاقات/الجدول المضغوط. */
@media(min-width:769px){
.tbl-card > div[style*="overflow-x:auto"],
.mursala-tbl-wrap{max-height:72vh;overflow-y:auto}
.tbl-card thead tr:not(.col-letters) th{position:sticky;top:0;z-index:4}
}
/* ===== المرحلة ٣: تجميع · عرض تدريجي · تخطيط أعمدة · تحرير مباشر ===== */
/* رأس المجموعة */
.grp-row td{
background:linear-gradient(120deg,var(--c-primary-50,#eef2ff) 0%,var(--c-n-50,#f8fafc) 100%) !important;
border-bottom:2px solid var(--c-primary-500,#3658CC) !important;
font-size:12.5px;padding:8px 12px !important;cursor:pointer;user-select:none;
}
.grp-row .grp-caret{display:inline-block;width:16px;color:var(--c-primary-600,#2643A8);font-weight:800}
.grp-row .grp-count{
display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:100px;
background:var(--c-primary-600,#2643A8);color:#fff;font-size:10.5px;font-weight:700;
font-variant-numeric:tabular-nums;
}
.grp-row .grp-sums{
margin-inline-start:12px;color:var(--c-n-600,#475569);font-weight:700;font-size:11.5px;
font-variant-numeric:tabular-nums;
}
html[data-theme="dark"] .grp-row td{background:#1a2440 !important;border-bottom-color:#4a63c8 !important}
html[data-theme="dark"] .grp-row .grp-sums{color:#9FABC6}
/* حارس العرض التدريجي */
.vs-sentinel td{
text-align:center;padding:12px !important;color:var(--c-n-400,#94a3b8);
font-size:12px;background:var(--c-n-50,#f8fafc) !important;
}
/* قائمة التجميع في شريط الأدوات */
.tbl-grp-sel{max-width:170px}
/* مقبض تغيير عرض العمود (الحافة اليسرى في RTL) */
th[data-col]{position:relative}
th[data-col] .th-rz{
position:absolute;top:0;bottom:0;left:0;width:7px;cursor:col-resize;
border-left:2px solid transparent;
}
th[data-col]:hover .th-rz{border-left-color:rgba(255,255,255,.4)}
th[data-col] .th-rz:hover{border-left-color:var(--c-accent-500,#20B2AA)}
/* سحب إعادة ترتيب الأعمدة */
th.col-dragging{opacity:.5}
th.col-drop-hint{box-shadow:inset 3px 0 0 var(--c-accent-500,#20B2AA)}
/* حقل التحرير المباشر داخل الخلية */
.ice-input{
width:100%;min-width:70px;box-sizing:border-box;
padding:4px 8px;border:2px solid var(--c-primary-500,#3658CC);border-radius:6px;
font-family:inherit;font-size:12.5px;font-weight:600;
background:#fff;color:var(--c-n-800,#1e293b);outline:none;
}
html[data-theme="dark"] .ice-input{background:#0F172A;color:#E9EDF7;border-color:#8CA2F7}
/* تلميح بصري خفيف أن الخلية قابلة للنقر المزدوج (كمبيوتر) */
@media(min-width:769px){
#takya-body td[data-col]:hover,#proj-body td[data-col]:hover,#expenses-body td[data-col]:hover,
#buy-body td[data-col]:hover,#buy_rubo-body td[data-col]:hover,#con-body td[data-col]:hover{cursor:cell}
}
/* ================================================================
نمط الجداول «كثيف محترف» (Dense Pro) — body.tbl-skin-dense
تهذيب النمط الحالي: هوية الرأس الداكن تبقى، حدود أخف، صفوف أنظف،
وحذف الزخارف (شريط FAT وصف حروف Excel). طبقة CSS خالصة — بنية
الخلايا لا تتغير، فقواعد الصلاحيات (إخفاء أعمدة) تعمل كما هي؛
الـ !important هنا على خصائص بصرية فقط، أبداً ليس على display.
================================================================ */
/* إخفاء الزخارف */
body.tbl-skin-dense .tbl-card.fat-style .fat-ribbon{display:none !important}
body.tbl-skin-dense .tbl-card.fat-style thead tr.col-letters{display:none !important}
/* الرأس الداكن الموحّد */
body.tbl-skin-dense .tbl-card.fat-style thead th{
background:linear-gradient(180deg,#132158 0%,#1D2F6E 100%) !important;
color:#E7ECFF !important;
font-size:10.5px !important;font-weight:700 !important;letter-spacing:.03em;
padding:8px 11px !important;
border:0 !important;border-bottom:2px solid var(--c-primary-500,#3658CC) !important;
}
body.tbl-skin-dense .tbl-card.fat-style thead th .cs-sort-toggle{color:#B9C6F5}
body.tbl-skin-dense .tbl-card.fat-style thead th .col-filter-icon{color:#B9C6F5}
/* الخلايا: كثافة مضبوطة وحدود أفقية خفيفة فقط (كمبيوتر/تابلت — البطاقات لها نمطها) */
@media(min-width:481px){
body.tbl-skin-dense .tbl-card.fat-style tbody td{
padding:7px 11px !important;font-size:12px !important;
border:0 !important;border-bottom:1px solid var(--c-n-100,#eef2f7) !important;
}
body.tbl-skin-dense .tbl-card.fat-style tbody tr:nth-child(even) td{
background:var(--c-n-50,#f8fafc);
}
body.tbl-skin-dense .tbl-card.fat-style tbody tr:hover td{
background:var(--c-primary-50,#EBEFFC) !important;
}
/* صف المجاميع: شريط كهرماني موحّد بارز */
body.tbl-skin-dense .tbl-card.fat-style tfoot td{
background:#FFF7E6 !important;color:#8A5A06 !important;
font-weight:800 !important;font-size:12px !important;
border:0 !important;border-top:2px solid #E8B84B !important;
padding:8px 11px !important;
}
}
/* الوضع الداكن */
html[data-theme="dark"] body.tbl-skin-dense .tbl-card.fat-style thead th{
background:#1D2848 !important;color:#C9D4F5 !important;
border-bottom-color:#4a63c8 !important;
}
@media(min-width:481px){
html[data-theme="dark"] body.tbl-skin-dense .tbl-card.fat-style tbody td{
border-bottom-color:#223052 !important;
}
html[data-theme="dark"] body.tbl-skin-dense .tbl-card.fat-style tbody tr:nth-child(even) td{
background:#111A30;
}
html[data-theme="dark"] body.tbl-skin-dense .tbl-card.fat-style tbody tr:hover td{
background:#1D2848 !important;
}
html[data-theme="dark"] body.tbl-skin-dense .tbl-card.fat-style tfoot td{
background:#2B2213 !important;color:#E3B057 !important;border-top-color:#8a6a2a !important;
}
}
/* زر تبديل النمط بجانب الترقيم (كمبيوتر فقط) */
.tbl-skin-btn{
margin-inline-start:6px;padding:3px 10px;
border:1px solid var(--c-n-200,#e2e8f0);border-radius:7px;
background:#fff;font-family:inherit;font-size:11px;font-weight:700;
color:var(--c-n-600,#475569);cursor:pointer;vertical-align:middle;
}
.tbl-skin-btn:hover{border-color:var(--c-primary-400,#5B79E3);color:var(--c-primary-700,#2643A8)}
html[data-theme="dark"] .tbl-skin-btn{background:#1E293B;border-color:#334155;color:#B8C7FF}
@media(max-width:768px){.tbl-skin-btn{display:none}}
/* ================================================================
Dense Pro — ضبط المحاذاة والأعمدة: كل عنوان فوق محتواه مباشرة
المبدأ: محاذاة يمين موحّدة للعناوين والخلايا معاً (RTL)، مع استثناء
مقصود للتحديد/الرقم/الإعلاميات/الإجراءات (وسط في الاثنين معاً).
يتغلّب على قواعد الأعمدة «المضبوطة» القديمة للمرسلة/التوثيق التي
كانت توسّط الخلايا وتترك العناوين يميناً — مصدر الخلل الظاهر.
================================================================ */
/* العناوين: يمين دائماً، بلا اقتطاع، وأيقونتا الفرز/الفلترة تطفوان يساراً
كي يلتصق نص العنوان بالحافة اليمنى فوق محتواه مباشرة */
body.tbl-skin-dense .tbl-card.fat-style thead th{
text-align:right !important;
overflow:visible !important;text-overflow:clip !important;max-width:none !important;
}
body.tbl-skin-dense .tbl-card.fat-style thead th[data-col]::after{display:none !important}
body.tbl-skin-dense .tbl-card.fat-style thead th .cs-sort-toggle,
body.tbl-skin-dense .tbl-card.fat-style thead th .col-filter-icon{
float:left;margin:0 0 0 2px;
}
@media(min-width:481px){
/* الخلايا: يمين موحّد */
body.tbl-skin-dense .tbl-card.fat-style tbody td{text-align:right !important}
/* استثناءات وسط — للعنوان وخليته معاً */
body.tbl-skin-dense .tbl-card.fat-style thead th.th-sel,
body.tbl-skin-dense .tbl-card.fat-style thead th.col-num,
body.tbl-skin-dense .tbl-card.fat-style thead th[data-col="media"],
body.tbl-skin-dense .tbl-card.fat-style thead th:last-child,
body.tbl-skin-dense .tbl-card.fat-style tbody td.td-sel,
body.tbl-skin-dense .tbl-card.fat-style tbody td.col-sel,
body.tbl-skin-dense .tbl-card.fat-style tbody td.col-num,
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="media"],
body.tbl-skin-dense .tbl-card.fat-style tbody td:last-child{text-align:center !important}
/* الأعمدة الرقمية: أرقام جدولية متراصّة */
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="qty"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="count"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="unit_price"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="unitPrice"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="total_price"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="totalPrice"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="amount"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="dollar"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="dollarVal"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="shekel"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col="shekelVal"]{
font-family:var(--ff-num);font-variant-numeric:tabular-nums;
}
/* الملاحظات: عرض معقول والتفاف — لا تمدّد فارغ ولا انسحاق لـ60px */
body.tbl-skin-dense .tbl-card.fat-style thead th[data-col^="notes"],
body.tbl-skin-dense .tbl-card.fat-style tbody td[data-col^="notes"]{
width:auto !important;min-width:130px !important;max-width:240px !important;
white-space:normal !important;text-align:right !important;
}
}
/* تغلُّب صريح على قواعد «الأعمدة المضبوطة» القديمة للمرسلة (Specificity أعلى) */
body.tbl-skin-dense #page-mursala #mursala-table thead th,
body.tbl-skin-dense #page-mursala #mursala-body td{text-align:right !important}
body.tbl-skin-dense #page-mursala #mursala-table .th-sel,
body.tbl-skin-dense #page-mursala #mursala-table thead th:nth-child(2),
body.tbl-skin-dense #page-mursala #mursala-table thead th[data-col="media"],
body.tbl-skin-dense #page-mursala #mursala-table thead th:last-child,
body.tbl-skin-dense #page-mursala #mursala-body td:nth-child(1),
body.tbl-skin-dense #page-mursala #mursala-body td:nth-child(2),
body.tbl-skin-dense #page-mursala #mursala-body td[data-col="media"],
body.tbl-skin-dense #page-mursala #mursala-body td:last-child{text-align:center !important}
body.tbl-skin-dense #page-mursala #mursala-table thead th[data-col^="notes"],
body.tbl-skin-dense #page-mursala #mursala-body td[data-col^="notes"]{
width:auto !important;min-width:130px !important;max-width:240px !important;
white-space:normal !important;text-align:right !important;
}
/* ونفسها للتوثيق */
body.tbl-skin-dense #page-tawtheeq #tawtheeq-table thead th,
body.tbl-skin-dense #page-tawtheeq #tawtheeq-body td{text-align:right !important}
body.tbl-skin-dense #page-tawtheeq #tawtheeq-table .th-sel,
body.tbl-skin-dense #page-tawtheeq #tawtheeq-table thead th:nth-child(2),
body.tbl-skin-dense #page-tawtheeq #tawtheeq-table thead th[data-col="media"],
body.tbl-skin-dense #page-tawtheeq #tawtheeq-table thead th:last-child,
body.tbl-skin-dense #page-tawtheeq #tawtheeq-body td:nth-child(1),
body.tbl-skin-dense #page-tawtheeq #tawtheeq-body td:nth-child(2),
body.tbl-skin-dense #page-tawtheeq #tawtheeq-body td[data-col="media"],
body.tbl-skin-dense #page-tawtheeq #tawtheeq-body td:last-child{text-align:center !important}
body.tbl-skin-dense #page-tawtheeq #tawtheeq-table thead th[data-col^="notes"],
body.tbl-skin-dense #page-tawtheeq #tawtheeq-body td[data-col^="notes"]{
width:auto !important;min-width:130px !important;max-width:240px !important;
white-space:normal !important;text-align:right !important;
}
/* Timeline المرسلة بنمط بطاقات المنفذة — تنفّس داخلي للحاوية */
#mursala-timeline .tw-tl{padding:14px 12px 12px}