/* =================================================================
   ط±ظ‚ظٹظ… — Raqeem Blue Design System
   طھطµظ…ظٹظ… ظ…ظˆط­ظ‘ط¯ ط¨ظ‡ظˆظٹط© ط²ط±ظ‚ط§ط، ط§ط­طھط±ط§ظپظٹط© — ط¹ط±ط¨ظٹ ط£ظˆظ„ط§ظ‹ (RTL)
   Single shared stylesheet for: auth, portal, search, tracking, contracts
   ================================================================= */

/* ===== Design Tokens ===== */
:root{
  /* Brand — ط£ط²ط±ظ‚ ط±ظ‚ظٹظ… (flat, restrained; gradient reserved for auth panels) */
  /* Original artwork colors remain inside the self-hosted SVG files. */
  --raqeem-brand-primary:#144966;
  --raqeem-brand-secondary:#40B0B5;
  --raqeem-page-bg:#F6F7F8;
  --raqeem-sidebar-bg:#EEF2F3;
  --raqeem-surface:#FFFFFF;
  --raqeem-surface-muted:#F8FAFA;
  --raqeem-border:#D7E0E3;
  --raqeem-text:#1C303C;
  --raqeem-text-muted:#526773;
  --raqeem-nav-hover-bg:#E5EBED;
  --raqeem-nav-active-bg:#DAE8EB;
  --raqeem-nav-active-text:#144966;
  --raqeem-on-primary:#FFFFFF;
  /* User-requested white text on the solid turquoise action treatment
     (.rq-workspace .btn-primary, .btn-accent). CONTRAST DISCLOSURE: white on
     #40B0B5 measures ≈2.6:1 — below WCAG AA for normal (4.5:1) and large
     (3:1) text. Implemented as requested; not claimed as passing. */
  --raqeem-on-secondary:#FFFFFF;
  --raqeem-primary:var(--raqeem-brand-primary);
  --raqeem-primary-dark:#103C53;
  --raqeem-primary-deep:#0B3045;
  --raqeem-primary-light:#E4EEF0;
  --raqeem-accent:var(--raqeem-brand-secondary);
  --raqeem-accent-light:#EAF6F6;

  --brand-1:var(--raqeem-brand-primary);
  --brand-2:var(--raqeem-primary-dark);
  --brand-3:var(--raqeem-primary-deep);
  --brand-grad:var(--raqeem-brand-primary);
  --brand-soft:rgba(20,73,102,.08);
  --primary:var(--raqeem-brand-primary);

  --side-1:var(--raqeem-sidebar-bg);
  --side-2:#E5EBED;
  --side-grad:var(--raqeem-sidebar-bg);
  --side-ink:var(--raqeem-text);
  --side-ink-dim:var(--raqeem-text-muted);

  --bg:var(--raqeem-page-bg);
  --bg-2:#EDF1F2;
  --card:var(--raqeem-surface);
  --card-2:var(--raqeem-surface-muted);
  --ink:var(--raqeem-text);
  --ink-2:#304A58;
  --muted:var(--raqeem-text-muted);
  --muted-2:#657D88;
  --line:var(--raqeem-border);
  --line-2:#E6EBED;

  /* Semantic — ط£ظ„ظˆط§ظ† ط§ظ„ط­ط§ظ„ط© (ظ„ط§ طھظڈط¹طھظ…ط¯ ط¹ظ„ظ‰ ط§ظ„ظ„ظˆظ† ظˆط­ط¯ظ‡) */
  --ok:#16a34a;   --ok-bg:#f0fdf4;   --ok-soft:rgba(22,163,74,.10);
  --soon:#d97706;  --soon-bg:#fffbeb;  --soon-soft:rgba(217,119,6,.10);
  --exp:#dc2626;   --exp-bg:#fef2f2;   --exp-soft:rgba(220,38,38,.09);
  --info:#144966;  --info-bg:#EAF2F4;  --info-soft:rgba(20,73,102,.09);
  --wait:#0369a1;  --wait-bg:#f0f9ff;  --wait-soft:rgba(3,105,161,.10);

  /* Shadows */
  --sh-sm:0 1px 2px rgba(15,27,46,.05);
  --sh:0 1px 3px rgba(15,27,46,.06),0 1px 2px rgba(15,27,46,.04);
  --sh-lg:0 8px 28px rgba(15,27,46,.10);
  --sh-brand:0 4px 14px rgba(20,73,102,.14);

  /* Radius */
  --r-sm:9px; --r:13px; --r-lg:18px; --r-xl:24px;
  --radius-sm:9px; --radius-md:13px; --radius-lg:18px;

  /* Spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;

  /* Type scale */
  --fs-page:24px; --fs-section:19px; --fs-card:16px; --fs-body:14px; --fs-small:12.5px;

  /* Motion */
  --t-fast:.15s ease; --t-med:.2s ease;

  --sidebar-w:330px;
  --font:"Alexandria","IBM Plex Sans Arabic","Tajawal","Noto Sans Arabic","Segoe UI",Tahoma,Arial,"Noto Sans",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font);
  background:var(--bg); color:var(--ink); direction:rtl; line-height:1.7;
  font-weight:400; letter-spacing:.1px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
input,select,textarea{font-family:inherit}
svg.ico{display:block;width:1em;height:1em;flex:0 0 auto}
.ava{display:flex;align-items:center;justify-content:center;overflow:hidden}
.ava>svg.ico{width:60%;height:60%}
.num,.kpi .v,.detail-card .v,td b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
::selection{background:var(--brand-3);color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c7d2dc;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#aab8c4}

/* ===== App Shell ===== */
#app{display:flex;height:100vh;min-width:0;overflow:hidden}

/* ===== Sidebar ===== */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--side-grad);color:var(--side-ink);
  display:flex;flex-direction:column;
  position:relative;height:100%;min-height:0;z-index:30;
  border-inline-start:1px solid rgba(37,99,235,.18);
}
.brand{
  display:flex;align-items:center;gap:12px;padding:22px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);position:relative;
}
.brand .b-logo{
  width:44px;height:44px;border-radius:13px;flex:0 0 44px;
  background:var(--brand-grad);display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.brand .b-name{font-size:15px;font-weight:800;color:#fff;line-height:1.3}
.brand .b-name span{font-size:10.5px;font-weight:500;color:var(--side-ink-dim);letter-spacing:.3px}

.nav-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--side-ink-dim);
  text-transform:uppercase;padding:18px 22px 8px}
.nav{display:flex;flex-direction:column;gap:3px;padding:0 14px;flex:1;overflow-y:auto}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  color:var(--side-ink);font-size:13.5px;font-weight:600;position:relative;
  transition:background .18s,color .18s,transform .18s;
}
.nav a .ic{display:flex;align-items:center;justify-content:center;font-size:19px;min-width:19px;opacity:.92}
.nav a:hover{background:rgba(59,130,246,.14);color:#fff;transform:translateX(-2px)}
.nav a.active{background:rgba(37,99,235,.32);color:#fff;font-weight:700}
.nav a.active::before{content:"";position:absolute;inset-inline-end:-14px;width:4px;height:60%;
  background:#3b82f6;border-radius:4px}
.nav a .badge{margin-inline-start:auto;background:var(--exp);color:#fff;font-size:10.5px;font-weight:800;
  min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.nav a.active .badge{background:rgba(255,255,255,.25)}

/* ===== Collapsible nav groups ===== */
.nav-group{margin-bottom:1px}
/* Parent toggle buttons: identical to .nav links (higher specificity to win) */
.nav .nav-group-toggle{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  color:var(--side-ink);font-size:13.5px;font-weight:700;position:relative;
  transition:background .18s,color .18s,transform .18s;text-align:right;
  width:100%;border:0;background:none;cursor:pointer;white-space:nowrap;
}
.nav .nav-group-toggle .ic{display:flex;align-items:center;justify-content:center;font-size:19px;min-width:19px;opacity:.92}
.nav .nav-group-toggle:hover{background:rgba(59,130,246,.14);color:#fff;transform:translateX(-2px)}
.nav .nav-group-toggle.active{color:#fff;font-weight:700}
.nav-group.open>.nav-group-toggle.active{background:rgba(37,99,235,.18)}
.nav-group.open>.nav-group-toggle.active::before{content:"";position:absolute;inset-inline-end:-14px;width:3px;height:40%;
  background:rgba(255,255,255,.35);border-radius:4px}
.nav .nav-group-toggle .badge{margin-inline-start:auto;background:var(--exp);color:#fff;font-size:10.5px;font-weight:800;
  min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.nav .nav-group-toggle.active .badge{background:rgba(255,255,255,.25)}
.nav .nav-group-toggle:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}
.nav-group-chevron{margin-inline-start:auto;transition:transform .22s ease;opacity:.65}
.nav .nav-group-toggle:hover .nav-group-chevron{opacity:1}
.nav-group.open .nav-group-chevron{transform:rotate(180deg)}
.nav-group-body{
  max-height:0;overflow:hidden;
  transition:max-height .25s ease;
}
.nav-group.open .nav-group-body{max-height:600px}
.nav-group-body>.nav-group-inner{overflow:hidden}
.nav-group-body a{
  padding-inline-start:32px;font-size:13px;font-weight:500;
}
.nav-group-body a .ic{font-size:15px !important;margin-inline-end:-4px}
.nav-group-body a .badge{font-size:10px;min-width:18px;height:18px}

.side-user{
  margin:12px 14px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);
  display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.06);
}
.side-user .ava{width:40px;height:40px;border-radius:12px;background:var(--brand-grad);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px}
.side-user .info{flex:1;min-width:0}
.side-user .info .n{font-size:13px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .info .r{font-size:11px;color:var(--side-ink-dim)}
.side-user .switch{background:rgba(255,255,255,.1);color:#fff;border-radius:9px;font-size:11px;font-weight:700;padding:7px 11px;transition:.18s}
.side-user .switch:hover{background:rgba(220,38,38,.55)}

/* ===== Main / Topbar ===== */
.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.topbar{
  background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:14px 26px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20;
}
.topbar h2{font-size:18px;font-weight:800;color:var(--ink);line-height:1.3}
.topbar .crumb{font-size:12px;color:var(--ink-2);font-weight:600}
.topbar-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;
  border:1px solid var(--line);background:#fff;border-radius:11px;color:var(--ink-2)}
.topbar-back:hover{color:var(--ink);background:var(--bg)}
.topbar-right{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.topbar .date{font-size:13px;color:var(--ink);font-weight:700;background:var(--card);display:flex;align-items:center;gap:7px;
  min-height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line);line-height:1}
.content{padding:26px;flex:1;width:100%;max-width:100%;margin:0;min-height:0;overflow-y:auto}

/* Holding context switcher */
.holding-switch{background:var(--card);border:1px solid var(--line);border-radius:12px;position:relative;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;max-width:240px}
.holding-switch .hs-ic{color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.holding-switch .hs-name{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.holding-switch select{border:none;background:transparent;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink);padding:8px 6px;cursor:pointer;max-width:200px;outline:none;-webkit-appearance:none;appearance:none}
.holding-switch:hover{border-color:var(--ink-2);box-shadow:0 0 0 3px var(--brand-soft)}
.holding-switch .chev{color:var(--muted);flex:0 0 auto;display:flex;align-items:center;pointer-events:none}

/* ===== Bell / Notifications ===== */
.bell-wrap{position:relative}
.bell{position:relative;background:var(--card);width:40px;height:40px;border-radius:12px;font-size:18px;border:1px solid var(--line);transition:.18s;display:flex;align-items:center;justify-content:center}
.bell svg.ico{width:20px;height:20px}
.bell:hover{background:var(--bg-2);border-color:var(--ink-2)}
.bell-badge{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--exp);color:#fff;font-size:10px;font-weight:800;
  min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
.bell-drop{position:absolute;inset-inline-end:0;top:54px;width:360px;max-width:92vw;background:#fff;border-radius:18px;
  box-shadow:var(--sh-lg);border:1px solid var(--line);z-index:50;display:none;overflow:hidden}
.bell-drop.open{display:block;animation:pop .18s ease}
.bell-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.bell-head b{color:var(--ink);font-size:14px;font-weight:800}
.link-btn{color:var(--ink);font-size:12px;font-weight:700}
.link-btn:hover{color:var(--brand-2)}
.bell-list{max-height:360px;overflow:auto}
.bell-item{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-2);transition:.15s}
.bell-item.unread{background:linear-gradient(90deg,var(--brand-soft),transparent)}
.bell-item:hover{background:var(--bg)}
.bell-item .ic{font-size:20px;flex:0 0 24px}
.bell-item .meta{flex:1;min-width:0}
.bell-item .meta .t{font-weight:700;display:block;font-size:13px}
.bell-item .meta .s{font-size:11.5px;color:var(--muted);display:block}
.bell-empty{text-align:center;padding:34px;color:var(--muted);font-size:13px}
.bell-foot{display:block;text-align:center;padding:12px;color:var(--ink);font-size:13px;font-weight:700;border-top:1px solid var(--line)}
.bell-foot:hover{background:var(--bg-2)}

/* ===== Page header ===== */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-head h2{font-size:21px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:9px;line-height:1.3}

/* ===== Dashboard alerts strip (compact) ===== */
.dash-strip{
  background:var(--brand-grad);color:#fff;border-radius:var(--r-lg);
  padding:16px 22px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;position:relative;overflow:hidden;
}
.ds-left{display:flex;align-items:center;gap:13px;position:relative;min-width:0;flex:1}
.ds-ico{width:46px;height:46px;border-radius:13px;flex:0 0 46px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.ds-ico.all-ok{background:rgba(255,255,255,.18)}
.ds-text{min-width:0}
.ds-text h2{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ds-date{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.78);background:rgba(255,255,255,.12);
  padding:3px 9px;border-radius:20px;letter-spacing:.2px}
.ds-status{font-size:13px;color:rgba(255,255,255,.9);margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds-status.warn a{display:inline-flex;align-items:center;gap:4px;font-weight:700;padding:3px 11px;border-radius:20px;
  background:rgba(255,255,255,.13);transition:background .15s}
.ds-status.warn a:hover{background:rgba(255,255,255,.24)}
.ds-status .c-exp{color:#fecaca}      /* red-200 */
.ds-status .c-soon{color:#fde68a}     /* amber-200 */
.ds-status a b{font-weight:800;margin-inline-start:1px}
.ds-link{color:#fff;font-weight:800;display:inline-flex;align-items:center;gap:4px;text-decoration:underline}
.ds-status.ok{color:rgba(255,255,255,.95)}
.ds-rate{display:flex;align-items:center;gap:13px;position:relative;flex:0 0 auto}
.ring{position:relative;width:62px;height:62px;flex:0 0 62px}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring .ring-bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3.4}
.ring .ring-fg{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;transition:stroke-dasharray .8s ease}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff}
.dash-strip .dw-rate-l{display:flex;flex-direction:column}
.dash-strip .dw-rate-l b{font-size:15px;color:#fff;font-weight:800}
.dash-strip .dw-rate-l span{font-size:11px;color:rgba(255,255,255,.78)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:11px;padding:11px 18px;
  font-size:13.5px;font-weight:700;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--raqeem-brand-primary);color:var(--raqeem-on-primary)}
.btn-primary:hover{background:var(--raqeem-primary-dark)}
.rq-workspace .btn-primary{background:var(--raqeem-brand-secondary);color:var(--raqeem-on-secondary);border:1px solid #28797D}
.rq-workspace .btn-primary:hover{background:#50BEC2;color:#FFFFFF}
.rq-workspace .btn-primary:active{background:#329A9F}
.rq-workspace .btn-primary:focus-visible{outline:3px solid #144966;outline-offset:2px}
.btn-accent{background:var(--raqeem-brand-secondary);color:var(--raqeem-on-secondary);border:1px solid #28797D}
.btn-accent:hover{background:#52BDC1;color:var(--raqeem-on-secondary)}
.btn-accent:active{background:#31979C}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none}
.btn-ghost{background:var(--card);color:var(--ink-2);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--ink-2);color:var(--ink)}
.btn-danger{background:var(--exp-bg);color:var(--exp)}
.btn-danger:hover{background:var(--exp);color:#fff}
.btn-light{background:var(--bg);color:var(--ink-2)}
.btn-sm{padding:8px 13px;font-size:12.5px;border-radius:10px}
.icon-btn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:7px 10px;font-size:13px;
  display:inline-flex;align-items:center;gap:4px;transition:.15s}
.icon-btn:hover{background:var(--bg-2);border-color:var(--ink-2);transform:translateY(-1px)}
/* Shared row-action group: single horizontal line on desktop; the table wrapper scrolls when tight. */
.rq-row-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
td.rq-actions-cell,th.rq-actions-cell{white-space:nowrap;width:1%}
.rq-row-actions .icon-btn{line-height:1}
.rq-table-action{color:var(--raqeem-primary-dark);font-weight:800;text-decoration:none;white-space:nowrap;padding:6px 4px;font-size:13px}
.rq-table-action:hover{text-decoration:underline}
.back-link{color:var(--ink-2);font-size:13px;font-weight:700;margin-bottom:18px;display:inline-flex;gap:6px;align-items:center;transition:color .15s}
.back-link:hover{color:var(--brand-2)}
.detail-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.detail-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-actions form{display:inline-flex}

/* ===== KPI cards (clickable) ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:16px;margin-bottom:24px}
.kpi{display:flex;flex-direction:column;justify-content:space-between;min-height:128px;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:18px 20px;position:relative;overflow:hidden;
  border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s;text-align:right}
.kpi::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--line)}
.kpi .top{display:flex;align-items:center;justify-content:space-between}
.kpi .ic{width:44px;height:44px;border-radius:13px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--ink-2)}
.kpi .go{font-size:15px;color:var(--muted-2);opacity:0;transform:translateX(6px);transition:.2s}
.kpi .v{font-size:34px;font-weight:800;color:var(--ink);line-height:1;margin-top:14px;letter-spacing:-.5px}
.kpi .l{font-size:12.5px;color:var(--ink-2);margin-top:6px;font-weight:700}
a.kpi{cursor:pointer}
a.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--line)}
a.kpi:hover .go{opacity:1;transform:translateX(0);color:var(--ink-2)}
.kpi.exp::after{background:var(--exp)} .kpi.exp .v{color:var(--exp)} .kpi.exp .ic{background:var(--exp-bg);color:var(--exp)}
.kpi.soon::after{background:var(--soon)} .kpi.soon .v{color:var(--soon)} .kpi.soon .ic{background:var(--soon-bg);color:var(--soon)}
.kpi.renew::after{background:var(--muted-2)} .kpi.renew .ic{background:var(--bg-2)}
.kpi.ok::after{background:var(--muted-2)} .kpi.ok .ic{background:var(--bg-2)}
.kpi.wait::after{background:var(--wait)} .kpi.wait .v{color:var(--wait)} .kpi.wait .ic{background:var(--wait-bg);color:var(--wait)}

/* ===== Panels / Charts ===== */
.row2{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-bottom:22px}
@media(max-width:980px){.row2{grid-template-columns:1fr}}
.panel{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:20px;border:1px solid var(--line)}
.panel h3{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.panel h3 .sub{margin-inline-start:auto;font-size:12px;color:var(--ink-2);font-weight:700}
.panel h3 .sub:hover{color:var(--ink)}
.chart-wrap{position:relative;height:280px}

/* mini list */
.mini-list{display:flex;flex-direction:column;gap:9px}
.mini-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;font-size:13px;background:var(--card);transition:border-color .15s,box-shadow .15s,transform .15s}
.mini-item.click{cursor:pointer}
.mini-item.click:hover{border-color:var(--ink-2);box-shadow:var(--sh);transform:translateX(-2px)}
.mini-item .meta{flex:1;min-width:0}
.mini-item .meta .t{font-weight:800;color:var(--ink);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.mini-item.click:hover .meta .t{color:var(--brand-2)}
.mini-item .meta .s{font-size:11.5px;color:var(--ink-2);font-weight:600;margin-top:1px}

/* ===== Attachments (compact inline rows) ===== */
.attach-list{display:flex;flex-direction:column;gap:8px}
.attach-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--card-2);transition:.15s}
.attach-item:hover{background:#fff;border-color:var(--ink-2);box-shadow:var(--sh-sm)}
.attach-ic{width:38px;height:38px;border-radius:10px;background:var(--bg-2);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 38px}
.attach-meta{flex:1;min-width:0}
.attach-name{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}
.attach-name:hover{color:var(--ink)}
.attach-sub{font-size:11.5px;color:var(--muted);font-weight:600;display:block;margin-top:2px}
.attach-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-inline-start:auto}
.attach-actions form{display:inline-flex}

/* ===== Alert bar ===== */
.alert-bar{background:var(--exp-bg);border:1px solid var(--exp-soft);
  border-radius:15px;padding:15px 18px;margin-bottom:22px;display:flex;align-items:center;gap:13px}
.alert-bar .ic{font-size:24px;color:var(--exp)}
.alert-bar .txt{font-size:13.5px;color:var(--ink-2);font-weight:500}
.alert-bar .txt b{color:var(--exp);font-weight:800}

/* ===== Badges / Pills ===== */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:30px;font-size:11.5px;font-weight:800;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.soon{background:var(--soon-bg);color:var(--soon)}
.pill.exp{background:var(--exp-bg);color:var(--exp)}
.pill.renew{background:var(--info-bg);color:var(--info)}
.pill.done{background:var(--ok-bg);color:var(--ok)}
.pill.late{background:var(--exp-bg);color:var(--exp)}
.pill.wait{background:var(--wait-bg);color:var(--wait)}
.chip{font-size:11.5px;padding:5px 11px;border-radius:30px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.chip.docs{background:var(--bg-2);color:var(--ink-2)}
.chip.exp{background:var(--exp-bg);color:var(--exp)}
.chip.soon{background:var(--soon-bg);color:var(--soon)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.renew{background:var(--info-bg);color:var(--info)}

/* ===== Credit status pills (ط§ط¹طھظ…ط§ط¯ط§طھ) ===== */
.pill.lc{font-size:11.5px;font-weight:800;padding:4px 12px;border-radius:30px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pill.lc::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.lc-draft{background:#f1f5f9;color:#475569}
.pill.lc-approved{background:#f4f2f7;color:#6d5d8f}
.pill.lc-submitted{background:#f5f1ec;color:#94795d}
.pill.lc-active{background:#f1f5f9;color:#475569}
.pill.lc-expired{background:#fef2f2;color:#b91c1c}
.pill.lc-rejected{background:#fef2f2;color:#b91c1c}

/* ===== Credit timeline (ط¯ظˆط±ط© ط­ظٹط§ط© ط§ظ„ط§ط¹طھظ…ط§ط¯) ===== */
.lc-timeline{display:flex;flex-direction:column;gap:0;padding:4px 0}
.lc-step{display:flex;gap:14px;position:relative;padding-bottom:22px}
.lc-step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:15px;top:30px;bottom:-2px;width:2px;background:var(--line)}
.lc-step.done:not(:last-child)::before{background:var(--muted-2)}
.lc-step .dot{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;z-index:1;box-shadow:0 0 0 4px var(--card)}
.lc-step.current .dot{box-shadow:0 0 0 4px var(--card),0 0 0 7px var(--brand-soft);animation:pop .3s ease}
.lc-step-body{flex:1;padding-top:3px}
.lc-step-label{font-size:13.5px;font-weight:800;color:var(--ink)}
.lc-step:not(.done) .lc-step-label{color:var(--muted)}
.lc-step-date{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ===== Company / Category cards ===== */
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.co-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:20px;
  transition:transform .2s,box-shadow .2s;border:1px solid var(--line);position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.co-card::before{content:"";position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:4px;background:var(--ok)}
.co-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.co-card.has-exp::before{background:var(--exp)}
.co-card.has-soon::before{background:var(--soon)}
.co-card.has-renew::before{background:var(--info)}
.co-card .head{display:flex;align-items:flex-start;gap:13px;margin-bottom:13px}
.co-card .ava{width:50px;height:50px;border-radius:14px;background:var(--brand-grad);color:#fff;
  flex:0 0 50px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.co-card .name{font-size:15px;font-weight:800;line-height:1.4}
.co-card .act{font-size:12px;color:var(--muted);margin-top:2px}
.co-card .stats{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.co-card .co-actions{margin-top:auto;padding-top:13px;display:flex;gap:6px;border-top:1px solid var(--line);align-items:center}

/* ===== Toolbar / Tables ===== */
.filter-summary{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.filter-summary .fs-count{font-size:13px;color:var(--ink-2);font-weight:600}
.filter-summary .fs-count b{color:var(--ink);font-weight:800}
.filter-summary .fs-clear{font-size:12.5px;font-weight:700;color:var(--exp)}
.filter-summary .fs-clear:hover{text-decoration:underline}

.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px;align-items:center;background:var(--card);
  padding:14px;border-radius:var(--r-lg);box-shadow:var(--sh-sm);border:1px solid var(--line)}
.filter-btn{border:1px solid var(--line);background:var(--card);border-radius:30px;padding:8px 15px;
  font-size:12.5px;color:var(--muted);font-weight:700;transition:.15s}
.filter-btn:hover{border-color:var(--brand-3);color:var(--brand-2)}
.filter-btn.active{background:var(--brand-grad);color:#fff;border-color:transparent}
select.filter-btn{padding:8px 12px;border-radius:11px}
.search{flex:1;min-width:160px;max-width:300px;border:1px solid var(--line);border-radius:30px;
  padding:9px 16px;font-size:13px;background:var(--bg);transition:.15s}
.search:focus{outline:none;border-color:var(--ink-2);background:#fff;box-shadow:0 0 0 4px var(--brand-soft)}

.table-wrap{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
thead th{background:var(--card-2);color:var(--ink);text-align:right;padding:14px 16px;font-weight:800;white-space:nowrap;font-size:12.5px;
  letter-spacing:.3px;border-bottom:2px solid var(--line-2)}
tbody td{padding:14px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--bg)}
tbody td:first-child{min-width:200px}
.doc-name{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.35;
  transition:color .15s}
.doc-name:hover{color:var(--brand-2)}
.doc-name-sub{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:3px;line-height:1.3}
.days{font-size:11.5px;color:var(--ink-2);display:block;margin-top:3px;font-weight:700}
.cat-tag{font-size:11px;color:var(--muted);font-weight:600}

/* ===== Forms ===== */
.form-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:26px;max-width:820px;border:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.form-field{margin-bottom:2px}
.form-field.full{grid-column:1/-1}
.form-field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.form-field label .req{color:var(--exp)}
.form-field input,.form-field select,.form-field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13.5px;
  background:var(--card-2);transition:.15s;color:var(--ink)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--ink-2);background:#fff;box-shadow:0 0 0 4px var(--brand-soft)}
.form-field .hint{font-size:11px;color:var(--muted-2);margin-top:5px;font-weight:600}
.form-check{display:flex;align-items:center;gap:9px}
.form-check input{width:18px;height:18px;accent-color:var(--brand-2);cursor:pointer}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;
  max-height:240px;overflow:auto;padding:10px;border:1.5px solid var(--line);border-radius:11px;background:var(--card-2)}
.co-check{font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;cursor:pointer;transition:.12s;margin:0}
.co-check:hover{border-color:var(--ink-2);background:var(--bg-2)}
.co-check input{margin:0}
.co-check input:checked + span{color:var(--ink)}
.form-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line)}
.form-err{color:var(--exp);font-size:11.5px;margin-top:4px;font-weight:600}

/* ===== Detail header ===== */
.co-header{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:24px;margin-bottom:20px;
  display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;border:1px solid var(--line);position:relative;overflow:hidden}
.co-header::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:6px;background:var(--brand-grad)}
.co-header .ava{width:68px;height:68px;border-radius:18px;background:var(--brand-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:32px;flex:0 0 68px}
.co-header .info{flex:1;min-width:200px}
.co-header .info h2{font-size:22px;color:var(--ink);margin-bottom:4px;font-weight:800;line-height:1.3}
.co-header .info .sub{color:var(--ink-2);font-size:13px;font-weight:600}
.co-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.co-meta .m{font-size:13px;font-weight:700;color:var(--ink)}
.co-meta .m b{color:var(--ink-2);font-weight:800;display:block;font-size:11px;letter-spacing:.2px;margin-bottom:2px}
.section-title{font-size:16px;font-weight:800;color:var(--ink);margin:22px 0 14px;display:flex;align-items:center;gap:9px;
  padding-bottom:10px;border-bottom:1px solid var(--line-2)}

/* ===== Credit detail header (full-width, status panel to the edge) ===== */
.co-header.lc-header{padding:0;align-items:stretch;gap:0;flex-wrap:nowrap}
.co-header.lc-header .lc-main{flex:1;min-width:0;display:flex;align-items:flex-start;gap:18px;padding:24px}
.co-header.lc-header .info{flex:1;min-width:0;width:100%}
.co-header.lc-header .info .co-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px 18px;width:100%}
.co-header.lc-header .lc-status-box{flex:0 0 auto;min-width:210px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:10px;padding:24px;background:var(--bg-2);border-inline-start:1px solid var(--line)}
.co-header.lc-header .lc-status-box .pill{font-size:14px;padding:9px 20px}
.co-header.lc-header .lc-status-box .days{margin-top:0}
@media(max-width:760px){
  .co-header.lc-header{flex-wrap:wrap}
  .co-header.lc-header .lc-main{padding:18px}
  .co-header.lc-header .lc-status-box{flex:1 1 100%;min-width:0;flex-direction:row;justify-content:space-between;
    border-inline-start:none;border-top:1px solid var(--line);padding:14px 18px}
}

.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:16px 0}
.detail-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;transition:border-color .15s,box-shadow .15s}
.detail-card:hover{border-color:var(--line);box-shadow:var(--sh-sm)}
.detail-card .l{font-size:11.5px;color:var(--ink-2);margin-bottom:4px;font-weight:700;letter-spacing:.2px}
.detail-card .v{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.35}

/* ===== Kanban ===== */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
@media(max-width:1050px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kanban{grid-template-columns:1fr}}
.kcol{background:var(--bg);border-radius:var(--r-lg);padding:14px;min-height:150px;border:1px solid var(--line)}
.kcol h4{font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800}
.kcol h4 .cnt{margin-inline-start:auto;background:#fff;border-radius:10px;font-size:11px;padding:2px 9px;color:var(--muted);border:1px solid var(--line)}
.kcol h4 .sw{width:12px;height:12px;border-radius:4px}
.task{background:var(--card);border-radius:13px;padding:13px;box-shadow:var(--sh-sm);margin-bottom:11px;
  border-inline-start:4px solid var(--line);transition:.15s;border:1px solid var(--line)}
.task:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.task.urgent{border-inline-start-color:var(--exp)}
.task .tt{font-size:13px;font-weight:700;line-height:1.45;margin-bottom:5px}
.task .co{font-size:11.5px;color:var(--muted);font-weight:600}
.task .due{font-size:11.5px;margin-top:7px;display:flex;align-items:center;gap:5px;font-weight:600}
.task .due.over{color:var(--exp)}
.task .acts{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;align-items:stretch}
.task .acts form{display:flex}
.task select,.task .mini{font-family:inherit;font-size:11.5px;font-weight:700;line-height:1;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  height:32px;padding:0 10px;transition:.15s}
.task select{flex:1;min-width:90px;cursor:pointer}
.task .mini{display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;text-decoration:none;white-space:nowrap}
.task .mini.icon-only{width:32px;padding:0}
.task .mini:hover{background:var(--bg-2);border-color:var(--ink-2)}

/* ===== Credits Board (6 columns) ===== */
.kanban-board{grid-template-columns:repeat(6,minmax(220px,1fr));overflow-x:auto;padding-bottom:8px}
@media(max-width:1400px){.kanban-board{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.kanban-board{grid-template-columns:repeat(2,minmax(220px,1fr))}}
@media(max-width:560px){.kanban-board{grid-template-columns:1fr}}

/* ===== Tabs ===== */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;font-size:13px;font-weight:700;color:var(--muted);
  border:1px solid transparent;border-bottom:none;border-radius:10px 10px 0 0;background:transparent;cursor:pointer;transition:.15s}
.tab:hover{color:var(--ink);background:var(--bg-2)}
.tab.active{color:var(--ink);background:var(--card);border-color:var(--line);position:relative;top:1px}

/* ===== Modal ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);
  z-index:200;align-items:center;justify-content:center;padding:20px}
.modal-overlay[style*="flex"]{display:flex}
.modal-box{background:var(--card);border-radius:var(--r-lg);width:100%;max-width:480px;box-shadow:var(--sh-lg);
  overflow:hidden;animation:modalIn .2s ease}
@keyframes modalIn{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15px;font-weight:800;flex:1}
.modal-head.danger{color:var(--exp)}
.modal-x{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--muted);cursor:pointer}
.modal-x:hover{background:var(--bg-2);color:var(--ink)}
.modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.modal-body p{font-size:14px;line-height:1.7}
.note-box.danger{background:var(--exp-bg);border-color:var(--exp-soft);color:var(--exp);display:flex;gap:10px;align-items:flex-start}
.note-box.danger div{color:var(--ink-2);font-weight:500;line-height:1.7}
.note-box.danger b{color:var(--exp)}
.del-stats{margin:8px 0 2px;padding-inline-start:20px;font-size:13px;font-weight:600}
.del-stats li{margin-bottom:3px}
.modal-confirm{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;line-height:1.6}
.modal-confirm input{margin-top:3px;accent-color:var(--exp);width:17px;height:17px;flex:0 0 auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid var(--line);background:var(--card-2)}
.modal-foot form{display:inline}

/* ===== Toast ===== */
#toast,.toast-session{position:fixed;bottom:26px;inset-inline-start:50%;transform:translateX(50%) translateY(140px);
  background:var(--ink);color:#fff;padding:14px 24px;border-radius:30px;font-size:13.5px;font-weight:700;
  box-shadow:var(--sh-lg);z-index:90;transition:transform .3s;max-width:90vw}
#toast.show{transform:translateX(50%) translateY(0)}
.toast-session{display:none}

/* ===== Empty / Pagination ===== */
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty .ic{font-size:46px;display:inline-block;margin-bottom:12px;opacity:.5;color:var(--muted-2)}
.empty .t{font-weight:700;color:var(--ink-2);font-size:14px;line-height:1.6}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 13px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:#fff;font-weight:700}
.pagination .active{background:var(--brand-grad);color:#fff;border-color:transparent}
.pagination a:hover{border-color:var(--ink-2);color:var(--ink)}
.note-box{background:var(--card);border-inline-start:4px solid var(--muted-2);border-radius:13px;padding:13px 16px;
  font-size:12.5px;color:var(--ink-2);margin-bottom:20px;font-weight:600;border:1px solid var(--line);border-inline-start-width:4px}

/* ===== Permission matrix & user cells ===== */
.perm-matrix{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);border:1px solid var(--line);padding:20px;margin-bottom:22px}
.perm-matrix .pm-head{font-size:15px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.pm-item{background:var(--card-2);border:1px solid var(--line);border-radius:13px;padding:15px;display:flex;flex-direction:column;gap:5px}
.pm-item .pm-ic{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.pm-item b{font-size:13.5px;color:var(--ink)}
.pm-item span{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.5}
.u-cell{display:flex;align-items:center;gap:11px}
.ava-sm{width:38px;height:38px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 38px}

/* ===== Animations ===== */
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.panel,.kpi,.co-card,.co-header,.form-card,.table-wrap{animation:fadeUp .35s ease both}
.kpi:nth-child(2){animation-delay:.04s}.kpi:nth-child(3){animation-delay:.08s}
.kpi:nth-child(4){animation-delay:.12s}.kpi:nth-child(5){animation-delay:.16s}
.kpi:nth-child(6){animation-delay:.2s}.kpi:nth-child(7){animation-delay:.24s}

/* ===== Print ===== */
@media print{
  .sidebar,.topbar,.back-link,.topbar-back,.btn,.page-head,.co-actions,.acts,.icon-btn,.toolbar,.detail-bar,.no-print{display:none !important}
  .content{padding:0}
  body{background:#fff}
}

/* ===== Mobile / Responsive ===== */

/* Off-canvas sidebar backdrop (mobile only) */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);
  backdrop-filter:blur(1px);z-index:35;opacity:0;transition:opacity .25s}
.sidebar-overlay.open{display:block;opacity:1}

/* Collapsible "Filters" toggle (mobile only) */
.filters-toggle{display:none}
.filters-toggle{align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);border-radius:11px;padding:10px 14px;font-size:13px;font-weight:800;
  flex:0 0 auto;transition:.15s}
.filters-toggle:hover{border-color:var(--ink-2);color:var(--ink);background:var(--bg-2)}
.filters-toggle .ft-chev{transition:transform .2s;display:inline-flex;color:var(--muted)}
.filters-toggle.is-open .ft-chev{transform:rotate(180deg)}
.filters-toggle .ft-count{background:var(--brand-grad);color:#fff;font-size:11px;font-weight:800;
  min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}

@media(max-width:980px){
  .content{padding:20px}
}
@media(max-width:760px){
  :root{--sidebar-w:100%}

  /* ---- Sidebar / off-canvas ---- */
  .sidebar{position:fixed;z-index:40;transform:translateX(110%);transition:transform .28s;box-shadow:var(--sh-lg);
    width:min(86%,320px)}
  .sidebar.open{transform:translateX(0)}
  .menu-toggle{display:inline-flex !important}

  /* ---- Topbar ---- */
  .content{padding:14px}
  .topbar{padding:10px 12px;gap:10px;flex-wrap:wrap;height:auto}
  .topbar h2{font-size:16px}
  .topbar .crumb{font-size:11px}
  .topbar-back{width:38px;height:38px}
  .topbar-right{gap:8px;flex-wrap:wrap;margin-inline-start:auto}
  .holding-switch{max-width:150px;min-height:38px}
  .holding-switch select{font-size:12px}
  .bell{width:38px;height:38px}
  .topbar .date{display:none}

  /* ---- Typography ---- */
  .page-head h2{font-size:17px}
  .panel h3{font-size:14px}
  .section-title{font-size:15px}
  .co-header .info h2{font-size:17px}

  /* ---- Buttons: bigger touch targets ---- */
  .btn{padding:12px 16px;font-size:13.5px}
  .btn-sm{padding:10px 13px}
  .icon-btn{padding:9px 11px}
  .pager-btn{min-width:36px;height:36px}

  /* ---- KPI ---- */
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .kpi{min-height:108px;padding:14px}
  .kpi .v{font-size:25px}
  .kpi .ic{width:40px;height:40px;font-size:19px}

  /* ---- Charts / panels ---- */
  .chart-wrap{height:220px}
  .panel{padding:16px}
  .row2{gap:14px}

  /* ---- Cards ---- */
  .co-card{padding:16px}
  .co-header{padding:16px;gap:12px}
  .co-header .ava{width:56px;height:56px;flex:0 0 56px;font-size:26px}
  .co-meta{gap:14px}

  /* ---- Dashboard strip ---- */
  .dash-strip{padding:14px;flex-direction:column;align-items:stretch}
  .ds-ico{width:42px;height:42px;flex:0 0 42px;font-size:20px}
  .ds-text h2{font-size:15px}
  .ds-rate{align-self:flex-start}

  /* ---- Forms ---- */
  .form-card{padding:18px}
  .form-grid{grid-template-columns:1fr !important;gap:14px}
  .form-field input,.form-field select,.form-field textarea{font-size:16px;padding:12px 13px} /* 16px avoids iOS zoom */
  .form-actions{flex-direction:column-reverse;align-items:stretch}
  .form-actions .btn{width:100%;justify-content:center}
  .check-grid{grid-template-columns:1fr 1fr !important;max-height:200px}
  .detail-grid{grid-template-columns:1fr}

  /* ---- Filter toolbar (collapsible panel) ---- */
  .toolbar{padding:12px}
  .filters-toggle{display:inline-flex}
  .toolbar:not(.expanded) > *:not(.filters-toggle):not(.search){display:none}
  .toolbar:not(.expanded) .search{flex:1 1 100%;max-width:100%;width:100%}
  .toolbar.expanded{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;
    position:relative;animation:fadeUp .2s ease both}
  .toolbar.expanded > .filters-toggle{grid-column:1/-1}
  .toolbar.expanded > .search{max-width:100%;width:100%;grid-column:1/-1}
  .toolbar.expanded > .filter-btn,
  .toolbar.expanded > select,
  .toolbar.expanded > input[type=date]{width:100%;min-width:0;border-radius:11px;padding:11px 12px;font-size:13px}
  .toolbar.expanded > .btn{grid-column:span 1;width:100%;justify-content:center}
  .toolbar.expanded .filter-btn.active{width:100%}

  /* ---- Tables: smooth horizontal scroll ---- */
  .table-wrap{font-size:12.5px;-webkit-overflow-scrolling:touch;touch-action:pan-x;
    border-radius:14px}
  table{min-width:520px}
  thead th{padding:11px 12px;font-size:11px}
  tbody td{padding:11px 12px}

  /* ---- Mini items / attachments ---- */
  .mini-item{flex-wrap:wrap;gap:8px;padding:11px}
  .mini-item .meta{flex:1 1 100%;min-width:0}

  /* ---- Tabs: scroll horizontally instead of wrapping cramped ---- */
  .tabs{gap:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab{flex:0 0 auto;white-space:nowrap}

  /* ---- Modal ---- */
  .modal-overlay{padding:14px;align-items:flex-end}
  .modal-box{max-width:100%;border-radius:16px 16px 0 0;width:100%}
  .modal-foot{flex-direction:column-reverse}
  .modal-foot .btn{width:100%;justify-content:center}
  .modal-foot form{display:block;width:100%}

  /* ---- Bell dropdown ---- */
  .bell-drop{width:min(360px,94vw);inset-inline-end:-6px}

  /* ---- Search full width ---- */
  .search{max-width:100%;min-width:120px}

  /* ---- Toast above bottom safe area ---- */
  #toast,.toast-session{bottom:18px;max-width:92vw;font-size:13px}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr !important}
  .co-grid{grid-template-columns:1fr}
  .toolbar.expanded{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:stretch}
  .page-head .btn{width:100%;justify-content:center}
  .topbar-right .date{display:none}
}
@media(max-width:380px){
  .kpi-grid{grid-template-columns:1fr}
}
.menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 12px;font-size:18px}

/* ===== Pagination ===== */
.pager{display:flex;justify-content:center;margin-top:24px}
.pager-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;
  font-size:13px;font-weight:700;color:var(--ink-2);background:var(--card);border:1px solid var(--line);
  border-radius:10px;transition:.15s;line-height:1}
.pager-btn:hover{color:var(--ink);border-color:var(--ink-2);background:var(--bg-2)}
.pager-btn.active{color:#fff;background:var(--brand-grad);border-color:transparent}
.pager-btn.disabled{color:var(--muted-2);background:var(--bg-2);cursor:not-allowed;opacity:.7}
.pager-dots{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:38px;color:var(--muted);font-weight:700}

/* =================================================================
   RAQEEM BLUE — shared component layer (auth / portal / search / contracts)
   ================================================================= */

/* Standalone pages (login, portal, search, ready) load app.css too:
   release the app-shell scroll lock */
body.rq-standalone{height:auto;overflow:auto}
body.rq-standalone::-webkit-scrollbar-thumb{border-color:var(--bg)}
.container{max-width:520px;margin:0 auto;padding:46px 20px}

/* Focus visibility (keyboard) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--raqeem-primary);outline-offset:2px;border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ===== Brand mark (reusable) ===== */
.rq-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.rq-mark{width:44px;height:44px;border-radius:13px;flex:0 0 44px;background:var(--brand-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;
  box-shadow:var(--sh-brand);letter-spacing:-.5px}
.rq-mark.sm{width:38px;height:38px;flex-basis:38px;font-size:17px;border-radius:11px}
.rq-brand .rq-word{font-size:19px;font-weight:800;color:#fff;line-height:1.25}
.rq-brand .rq-word small{display:block;font-size:11px;font-weight:600;color:var(--side-ink-dim);margin-top:2px;letter-spacing:.2px}
.rq-brand .rq-word-en{display:block;font-size:10px;font-weight:700;letter-spacing:2.5px;color:rgba(255,255,255,.55);margin-top:1px}

/* ===== Auth / Login ===== */
.auth-shell{min-height:100vh;display:flex;background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%);position:relative}
.auth-shell::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(720px 420px at 18% 22%,#000 0%,transparent 78%);
          mask-image:radial-gradient(720px 420px at 18% 22%,#000 0%,transparent 78%)}
.auth-panel{flex:1 1 46%;display:flex;flex-direction:column;justify-content:space-between;
  padding:52px 56px;color:#fff;position:relative;overflow:hidden}
.auth-panel .rq-word{font-size:24px;font-weight:800}
.auth-panel .rq-tag{margin-top:6px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.86)}
.auth-points{margin-top:44px;display:flex;flex-direction:column;gap:16px}
.auth-point{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 16px;max-width:400px}
.auth-point .ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.auth-point b{font-size:14px;font-weight:700;display:block}
.auth-point span{font-size:12px;color:rgba(255,255,255,.78);font-weight:500;display:block;margin-top:1px}
.auth-foot{margin-top:auto;padding-top:34px;font-size:12px;color:rgba(255,255,255,.6);font-weight:600}
.auth-card-wrap{flex:1 1 54%;display:flex;align-items:center;justify-content:center;padding:40px 24px;position:relative}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:0 18px 50px rgba(15,27,46,.16);padding:38px 36px}
.auth-card .rq-mark{background:linear-gradient(135deg,#1e3a8a,#2563eb);margin-bottom:18px}
.auth-card h1{font-size:24px;font-weight:800;color:var(--ink);line-height:1.3}
.auth-card .auth-sub{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.8}
.auth-tenant{display:inline-flex;align-items:center;gap:8px;background:var(--info-bg);color:var(--info);
  border:1px solid #bfdbfe;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:800;margin-top:16px}
.auth-form{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.auth-field label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.auth-field .ctl{position:relative}
.auth-field input{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14.5px;
  background:var(--card-2);transition:border-color .15s,box-shadow .15s;color:var(--ink)}
.auth-field input:focus{outline:none;border-color:var(--raqeem-primary);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.auth-field input::placeholder{color:var(--muted-2)}
.pw-toggle{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:10px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);border-radius:9px;
  padding:5px 9px;font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:5px;cursor:pointer}
.pw-toggle:hover{background:var(--bg);color:var(--ink)}
.auth-error{background:var(--exp-bg);border:1px solid var(--exp-soft);color:var(--exp);
  border-radius:12px;padding:11px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:9px}
.auth-error[role=alert]{margin-top:2px}
.auth-submit{width:100%;justify-content:center;background:var(--brand-grad);color:#fff;
  border:none;border-radius:12px;padding:13px 18px;font-size:15px;font-weight:800;cursor:pointer;
  font-family:inherit;transition:background .15s,transform .12s,box-shadow .15s;box-shadow:var(--sh-brand)}
.auth-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand-grad);color:#fff;
  border:none;border-radius:12px;padding:13px 18px;font-size:15px;font-weight:800;cursor:pointer;
  font-family:inherit;transition:background .15s,transform .12s,box-shadow .15s;box-shadow:var(--sh-brand)}
.auth-submit:hover{background:var(--raqeem-primary-dark)}
.auth-submit:active{transform:scale(.985)}
.auth-meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.auth-meta span{font-size:12px;color:var(--muted);font-weight:600}
@media(max-width:900px){
  .auth-panel{display:none}
  .auth-card-wrap{flex:1 1 100%;background:var(--bg)}
  .auth-card{box-shadow:var(--sh-lg)}
}

/* ===== Systems Portal ===== */
.portal-bg{position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(1000px 500px at 85% -10%,rgba(219,234,254,.55),transparent 70%),
    radial-gradient(900px 480px at 8% 108%,rgba(224,242,254,.6),transparent 70%)}
.portal-wrap{position:relative;max-width:1020px;margin:0 auto;padding:44px 22px 30px}
.portal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:30px;flex-wrap:wrap}
.portal-brand .rq-word{color:var(--ink);font-size:20px;font-weight:800}
.portal-brand .rq-word small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.user-chip{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:8px 14px;font-size:13.5px;font-weight:700;color:var(--ink)}
.user-chip .dot{width:34px;height:34px;border-radius:10px;background:var(--brand-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.portal-welcome h1{font-size:26px;font-weight:800;color:var(--ink);margin-bottom:6px}
.portal-welcome .sub{color:var(--muted);font-size:14px;font-weight:600;margin-bottom:26px}
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.sys-card{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;text-decoration:none;color:inherit;transition:var(--t-med);
  box-shadow:var(--sh);position:relative;overflow:hidden}
.sys-card::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--line);transition:background .2s}
.sys-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:#A6C0C8}
.sys-card:hover::after{background:var(--raqeem-primary)}
.sys-card .ic{width:52px;height:52px;border-radius:15px;background:var(--info-bg);color:var(--raqeem-primary);
  display:flex;align-items:center;justify-content:center}
.sys-card .ic svg{width:26px;height:26px}
.sys-card h2{font-size:17px;font-weight:800;color:var(--ink)}
.sys-card p{font-size:13px;color:var(--muted);line-height:1.8;font-weight:600}
.sys-card .go{align-self:flex-start;font-size:12.5px;font-weight:800;color:var(--raqeem-primary-dark);
  display:inline-flex;align-items:center;gap:6px;transition:gap .18s}
.sys-card:hover .go{gap:10px}
.portal-foot{margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  color:var(--muted);font-size:12.5px;font-weight:600;flex-wrap:wrap}
.portal-empty{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;text-align:center;color:var(--muted);font-weight:600}

/* Portal quick search */
.qwrap{position:relative;flex:1;max-width:380px;min-width:230px}
.qwrap form{display:flex;gap:8px}
.qwrap input[type=search]{flex:1;padding:11px 15px;border:1px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:13.5px;background:var(--card);color:var(--ink)}
.qwrap input[type=search]:focus{outline:none;border-color:var(--raqeem-primary);box-shadow:0 0 0 3px var(--raqeem-nav-active-bg)}
.qwrap button{background:var(--brand-grad);color:#fff;border:none;border-radius:12px;padding:0 18px;
  font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.qdrop{position:absolute;top:calc(100% + 8px);right:0;left:0;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-lg);z-index:20;overflow:hidden;display:none}
.qdrop.open{display:block;animation:pop .18s ease}
.qdrop a{display:flex;gap:10px;align-items:center;padding:11px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line-2)}
.qdrop a:last-child{border-bottom:none}
.qdrop a:hover{background:var(--bg)}
.qdrop .ic{width:34px;height:34px;border-radius:9px;background:var(--info-bg);color:var(--raqeem-primary);
  display:flex;align-items:center;justify-content:center;flex:none}
.qdrop .t{font-size:13px;font-weight:800;color:var(--ink)}
.qdrop .s{font-size:11.5px;color:var(--muted);font-weight:600}
.qdrop .none{padding:14px;color:var(--muted);font-size:12.5px;font-weight:600;text-align:center}

/* ===== Unified Search page ===== */
.qs-wrap{max-width:880px;margin:0 auto;padding:34px 20px 40px}
.qs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.qs-top .rq-word{color:var(--ink)}
.qs-top .rq-word small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.qs-top .portal{font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px;transition:var(--t-fast)}
.qs-top .portal:hover{background:var(--bg-2);color:var(--ink)}
.qs-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:24px;box-shadow:var(--sh-sm)}
.qs-box form{display:flex;gap:10px}
.qs-box input[type=search]{flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;background:var(--card-2);color:var(--ink)}
.qs-box input[type=search]:focus{outline:none;border-color:var(--raqeem-primary);background:#fff;box-shadow:0 0 0 3px var(--raqeem-nav-active-bg)}
.qs-box button{background:var(--brand-grad);color:#fff;border:none;border-radius:12px;padding:0 26px;
  font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;transition:background .15s}
.qs-box button:hover{background:var(--raqeem-primary-dark)}
.qs-hint{color:var(--muted);font-size:12px;margin-top:10px;font-weight:600;line-height:1.9}
.qs-group{margin-bottom:22px}
.qs-group > h2{font-size:15px;font-weight:800;color:var(--raqeem-primary-deep);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.qs-group h2 .count{background:var(--raqeem-primary-light);color:var(--raqeem-primary-deep);font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 9px}
.qs-result{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;margin-bottom:10px;text-decoration:none;color:inherit;transition:var(--t-fast)}
.qs-result:hover{border-color:#A6C0C8;box-shadow:var(--sh);transform:translateY(-1px)}
.qs-result .ic{width:40px;height:40px;border-radius:11px;background:var(--info-bg);color:var(--raqeem-primary);
  display:flex;align-items:center;justify-content:center;flex:none}
.qs-result .ic svg{width:20px;height:20px}
.qs-result .body{flex:1;min-width:0}
.qs-result .t{font-size:14.5px;font-weight:800;color:var(--ink)}
.qs-result .s{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.qs-result .x{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.8}
.qs-result .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;font-weight:800}
.qs-result .badge{background:var(--bg-2);color:var(--ink-2);border-radius:999px;padding:3px 10px;font-weight:700}
.qs-empty{text-align:center;color:var(--muted);padding:40px 10px;font-size:13.5px;font-weight:600;line-height:2;
  background:var(--card);border:1px dashed var(--line);border-radius:var(--r-lg)}
.qs-foot{margin-top:28px;text-align:center;color:var(--muted-2);font-size:12px;font-weight:600}

/* ===== Contracts shell (blue app bar) ===== */
.ctk-top{background:var(--raqeem-primary-deep);color:#fff;
  padding:0 22px;box-shadow:0 2px 12px rgba(15,27,46,.14);position:sticky;top:0;z-index:40}
.ctk-top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:64px;padding:10px 0}
.ctk-top .rq-word{color:#fff}
.ctk-top .rq-word small{display:block;font-size:10.5px;color:rgba(255,255,255,.62);font-weight:600;margin-top:1px}
.ctk-sys{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15.5px;color:#fff;
  padding-inline-start:18px;border-inline-start:1px solid rgba(255,255,255,.18)}
.ctk-sys .ic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center}
.ctk-sys .ic svg{width:18px;height:18px}
.ctk-top nav{display:flex;gap:4px;flex-wrap:wrap;margin-inline-start:auto}
.ctk-top nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:13px;font-weight:700;
  padding:8px 13px;border-radius:10px;transition:var(--t-fast)}
.ctk-top nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.ctk-top nav a.active{background:rgba(37,99,235,.45);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ctk-top .portal-link{color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.12);padding:8px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;transition:var(--t-fast)}
.ctk-top .portal-link:hover{background:rgba(255,255,255,.2)}
.ctk-body{max-width:1180px;margin:0 auto;padding:28px 20px 46px}
@media(max-width:760px){
  .ctk-top{padding:10px 14px}
  .ctk-sys{border-inline-start:none;padding-inline-start:0}
}

/* Contracts content building blocks */
.ctk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.ctk-head h1{font-size:24px;font-weight:800;color:var(--ink);margin:0 0 4px;line-height:1.3}
.ctk-head .sub{color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.8}
.ctk-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ctk-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.ctk-metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.ctk-metric::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--raqeem-primary)}
.ctk-metric.warn::after{background:var(--soon)}
.ctk-metric.ok::after{background:var(--ok)}
.ctk-metric.info::after{background:var(--info)}
a.ctk-metric{display:block;text-decoration:none;color:inherit;transition:box-shadow .16s,transform .16s}a.ctk-metric:hover,a.ctk-metric:focus-visible{box-shadow:0 8px 24px rgba(23,72,137,.18);transform:translateY(-2px)}a.ctk-metric:focus-visible{outline:3px solid var(--raqeem-primary);outline-offset:2px}
.ctk-metric .l{font-size:12.5px;color:var(--muted);font-weight:700}
.ctk-metric .v{font-size:30px;font-weight:800;color:var(--ink);margin-top:4px;letter-spacing:-.5px}
.ctk-metric.warn .v{color:var(--soon)}
.ctk-metric.ok .v{color:var(--ok)}
.ctk-metric.info .v{color:var(--raqeem-primary-dark)}
.doc-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  margin-bottom:16px;box-shadow:var(--sh-sm)}
.doc-panel > h2{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.doc-panel > h2 svg{color:var(--raqeem-primary)}
.doc-panel table{min-width:0}
.record-fields-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.doc-panel tbody td{border-bottom:1px solid var(--line-2);padding:10px 6px}
.doc-panel tbody tr:last-child td{border-bottom:none}
.doc-panel .kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;font-size:13.5px}
.doc-panel .kv{color:var(--ink-2);line-height:1.9}
.doc-panel .kv .k{color:var(--muted);font-weight:700}
.field-row{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px}
.field-row .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.field-row input,.field-row select,.field-row textarea{padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;width:100%;font-size:13px;background:#fff;color:var(--ink);font-family:inherit;transition:var(--t-fast)}
.field-row input:focus,.field-row select:focus,.field-row textarea:focus{outline:none;border-color:var(--raqeem-primary);box-shadow:0 0 0 3px var(--raqeem-nav-active-bg)}
.field-row label{font-size:12px;font-weight:700;color:var(--ink-2);display:block;margin-bottom:4px}
.field-note{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.8}
.rq-record-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;align-items:start}
.rq-record-fields .field-row{background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:5px 0 14px;margin:0;min-width:0}
.rq-record-fields .field-row input:not([type=checkbox]),.rq-record-fields .field-row select{min-height:44px}
.rq-record-fields .rq-record-field-wide,.rq-record-field-section{grid-column:1/-1}
.rq-record-field-section{font-size:15px;color:var(--raqeem-primary-dark);margin:15px 0 2px;padding-bottom:7px;border-bottom:1px solid var(--line-2)}
.rq-field-review{display:inline-block;font-size:11px;font-weight:700;color:#7a4b12;background:#fff3dc;border-radius:6px;padding:2px 6px;margin-inline-start:8px}
@media(max-width:760px){.rq-record-fields{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.field-row .grid{grid-template-columns:1fr}}

/* Data tables inside contracts (standard, shared with tracking) */
.ctk-tablewrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;box-shadow:var(--sh-sm)}
.ctk-tablewrap table{min-width:720px}

/* ===== Status pills (standardized; text + color, never color alone) ===== */
.pill.active{background:var(--ok-bg);color:var(--ok)}
.pill.inactive,.pill.closed,.pill.neutral{background:var(--bg-2);color:var(--ink-2)}
.pill.draft{background:var(--soon-bg);color:var(--soon)}
.pill.review{background:var(--soon-bg);color:var(--soon)}
.pill.final{background:var(--ok-bg);color:var(--ok)}
.pill.recorded,.pill.final-blue{background:var(--info-bg);color:var(--raqeem-primary-dark)}
.pill.open-book{background:var(--ok-bg);color:var(--ok)}
.pill.archived{background:var(--bg-2);color:var(--muted)}
.pill.approved{background:var(--ok-bg);color:var(--ok)}
.pill.submitted{background:var(--info-bg);color:var(--raqeem-primary-dark)}
.pill.rejected{background:var(--exp-bg);color:var(--exp)}
.pill.cancelled{background:var(--exp-bg);color:var(--exp)}
.pill.version{background:var(--raqeem-primary-light);color:var(--raqeem-primary-deep)}
.pill.source{background:var(--ok-bg);color:var(--ok)}

/* ===== Alerts / notes (contracts + shared) ===== */
.rq-alert{border-radius:13px;padding:13px 16px;font-size:13px;font-weight:600;line-height:1.9;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.rq-alert svg{flex:0 0 auto;margin-top:2px}
.rq-alert b{font-weight:800}
.rq-alert.info{background:var(--info-bg);border:1px solid #A6C0C8;color:var(--raqeem-primary-deep)}
.rq-alert.success{background:var(--ok-bg);border:1px solid #bbf7d0;color:#166534}
.rq-alert.warning{background:var(--soon-bg);border:1px solid #fde68a;color:#92400e}
.rq-alert.danger{background:var(--exp-bg);border:1px solid var(--exp-soft);color:var(--exp)}
.note-box.info{background:var(--info-bg);border-color:#A6C0C8;border-inline-start-color:var(--raqeem-primary);color:var(--raqeem-primary-deep)}

/* ===== Correction / amendment flow (timeline) ===== */
.corr-flow{display:flex;flex-direction:column;gap:0;margin:6px 0 4px}
.corr-step{display:flex;gap:13px;position:relative;padding-bottom:20px}
.corr-step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:16px;top:36px;bottom:0;width:2px;background:var(--line)}
.corr-step .dot{width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:flex;align-items:center;justify-content:center;
  background:var(--raqeem-primary-light);color:var(--raqeem-primary-deep);z-index:1;box-shadow:0 0 0 4px var(--card)}
.corr-step.done .dot{background:var(--ok-bg);color:var(--ok)}
.corr-step.danger .dot{background:var(--exp-bg);color:var(--exp)}
.corr-step .body{flex:1;min-width:0;padding-top:2px}
.corr-step .t{font-size:13.5px;font-weight:800;color:var(--ink)}
.corr-step .s{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.8}
.corr-step .s a{color:var(--raqeem-primary-dark);font-weight:800;text-decoration:none}
.corr-step .s a:hover{text-decoration:underline}
.disclaimer{background:var(--soon-bg);border:1px solid #fde68a;border-radius:12px;padding:10px 14px;
  font-size:12.5px;color:#92400e;font-weight:700;line-height:1.9;display:flex;gap:9px;align-items:flex-start}

/* ===== Empty states ===== */
.rq-empty{text-align:center;padding:48px 20px;background:var(--card);border:1px dashed var(--line);
  border-radius:var(--r-lg);color:var(--muted)}
.rq-empty .ic{color:var(--muted-2);margin-bottom:12px;display:inline-flex}
.rq-empty .t{font-weight:800;color:var(--ink-2);font-size:14.5px;line-height:1.7}
.rq-empty .d{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.9}
.rq-empty .btn{margin-top:16px}
.empty .btn{margin-top:14px}

/* ===== Toast (contracts standalone pages) ===== */
.toast-msg{background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--ok);
  border-radius:13px;padding:13px 16px;font-size:13px;color:var(--ink-2);font-weight:600;margin-bottom:18px;line-height:1.8}
.toast-msg.error{border-inline-start-color:var(--exp);color:var(--exp)}

/* ===== Buttons: additions ===== */
.btn-success{background:var(--ok-bg);color:var(--ok)}
.btn-success:hover{background:var(--ok);color:#fff}
.btn-outline-danger{background:var(--exp-bg);color:var(--exp);border:1px solid var(--exp-soft)}
.btn-outline-danger:hover{background:var(--exp);color:#fff}
.btn:focus-visible{outline:2px solid var(--raqeem-primary-deep);outline-offset:2px}

/* ===== Details/summary (editor source box) ===== */
details.rq-details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--card)}
details.rq-details summary{font-weight:700;font-size:13px;cursor:pointer;color:var(--ink-2)}
details.rq-details summary:hover{color:var(--ink)}

/* small screens: contracts body padding */
@media(max-width:640px){
  .ctk-body{padding:18px 14px 34px}
  .ctk-head h1{font-size:19px}
  .ctk-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
  .ctk-metrics{grid-template-columns:1fr}
}

/* search result status badges (text label + class; never color alone) */
.badge.b-draft,.badge.b-review{background:var(--soon-bg);color:var(--soon)}
.badge.b-final,.badge.b-recorded,.badge.b-approved{background:var(--ok-bg);color:var(--ok)}
.badge.b-inactive,.badge.b-closed,.badge.b-archived{background:var(--bg-2);color:var(--ink-2)}
.badge.b-submitted{background:var(--info-bg);color:var(--raqeem-primary-dark)}
.badge.b-cancelled,.badge.b-rejected{background:var(--exp-bg);color:var(--exp)}

/* ===== Batch 011C — Dual fill modes ===== */
/* Manual handwriting print blanks (screen + print consistent, mm-based) */
.fill-blank{display:inline-block;vertical-align:bottom;position:relative;border-bottom:1.6px solid var(--ink);background:rgba(37,99,235,.045);border-radius:2px}
.fill-blank:hover{background:rgba(37,99,235,.1)}
.fill-line{min-width:130px}
.fill-box{border:1.4px solid var(--ink);border-bottom:1.6px solid var(--ink);border-radius:3px;vertical-align:middle}
.fill-textarea{display:block;width:100%;border:1.2px solid #9aa4b2;border-radius:4px;margin:6px 0}
.fill-signature{display:block;width:100%;border:1.2px solid var(--ink);border-radius:4px;margin:6px 0;background:repeating-linear-gradient(0deg,transparent 0 8mm,#e2e8f0 8mm 8.3mm)}
.blank-group-table td{height:11mm;min-height:11mm;border-color:#94a3b8 !important}
.blank-group-table thead th{background:var(--info-bg);color:var(--raqeem-primary-deep)}

/* Electronic repeating-group editor */
.fill-group-editor{margin:6px 0 10px;padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.fill-group-table-wrap{overflow-x:auto;margin-bottom:10px}
.fill-group-edit{min-width:560px;font-size:12.5px}
.fill-group-edit th{background:var(--card);color:var(--ink-2);font-size:12px;padding:9px 10px;white-space:nowrap}
.fill-group-edit td{padding:6px;border-bottom:1px solid var(--line-2);vertical-align:top}
.fill-group-edit input,.fill-group-edit select,.fill-group-edit textarea{font-size:12.5px}
.fill-group-del{border:1px solid var(--exp-soft);background:#fff;color:var(--exp);border-radius:8px;width:28px;height:28px;font-size:12px;cursor:pointer;font-weight:800}
.fill-group-del:hover{background:var(--exp);color:#fff}
.fill-group-add{margin-inline-end:8px}

/* Dual-mode actions on template cards */
.dual-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.dual-actions .btn{flex:1 1 auto;justify-content:center}

@media print{
  .fill-blank{background:transparent}
}

/* Batch 011D: one Arabic-first workspace for Tracking and Contracts.
   Document scrolling is intentional: no parent clips the final row or form action. */
:root{
  --sh-sm:0 1px 4px rgba(9,46,90,.05);--sh:0 2px 9px rgba(9,46,90,.06);
  --r-lg:13px;--sidebar-w:300px;
}
html:has(>body.rq-workspace),body.rq-workspace{height:auto;min-height:100%;overflow:visible}
body.rq-workspace{background:var(--bg)}
.rq-app{display:flex;min-height:100dvh;min-width:0;align-items:stretch}
.rq-sidebar{position:sticky;top:0;align-self:flex-start;width:var(--sidebar-w);flex:0 0 var(--sidebar-w);height:100dvh;background:var(--raqeem-sidebar-bg);color:var(--ink);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:0;z-index:60}
.rq-sidebar-header{flex:0 0 auto;min-height:76px;display:flex;align-items:center;padding:8px 14px 10px;border-bottom:1px solid var(--line)}
/* The logo lockup (raqeem-logo.svg, 175.39x47.82 viewBox) fills the identity block. */
.rq-sidebar-identity{display:block;width:62%;margin-inline-start:0;margin-inline-end:auto}
.rq-sidebar-brand{display:block;width:100%;line-height:0;border-radius:8px}
.rq-sidebar-logo{display:block;width:100%;height:auto}
.rq-sidebar-nav{flex:1 1 auto;min-height:0;overflow-y:visible;overscroll-behavior:contain;padding:12px 12px 22px;scrollbar-color:#AABCC4 transparent}.rq-sidebar-nav.rq-nav-overflow{overflow-y:auto}
.rq-page-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:100%}.rq-page-actions .btn{white-space:normal;text-align:center}.rq-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px}.rq-settings-link{display:flex;align-items:center;gap:14px;min-width:0;padding:17px;background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh-sm);color:var(--ink)}.rq-settings-link:hover{border-color:var(--raqeem-brand-secondary);background:var(--raqeem-nav-hover-bg)}.rq-settings-link>span:nth-child(2){min-width:0;flex:1}.rq-settings-link strong,.rq-settings-link small{display:block}.rq-settings-link small{color:var(--muted);font-size:12px;margin-top:4px}.rq-settings-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;background:var(--raqeem-nav-active-bg);border-radius:9px;color:var(--raqeem-brand-primary)}.rq-nav-group{display:grid;gap:2px;margin:3px 0 9px}.rq-nav-group+.rq-nav-group{margin-top:4px}.rq-nav-link{display:flex;align-items:center;gap:11px;color:var(--ink);padding:10px 12px;border-radius:9px;font-size:15px;font-weight:600;min-height:44px;transition:background .16s ease,color .16s ease}.rq-nav-icon{width:25px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}.rq-nav-icon .rq-nav-icon-img{width:24px;height:24px;object-fit:contain;display:block;flex:0 0 auto}.rq-nav-link:hover{background:var(--raqeem-nav-hover-bg);color:var(--ink)}.rq-nav-link.active{background:var(--raqeem-nav-active-bg);color:var(--raqeem-nav-active-text);font-weight:800;box-shadow:inset -3px 0 var(--raqeem-brand-primary)}.rq-nav-link.active .rq-nav-icon{color:var(--raqeem-brand-primary)}
.rq-sidebar-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--line);background:var(--raqeem-sidebar-bg)}.rq-system-switch{display:flex;justify-content:center;align-items:center;gap:12px;min-height:51px;background:var(--raqeem-brand-primary);border-radius:9px;color:var(--raqeem-on-primary);font-weight:800;font-size:14px;transition:background .16s ease}.rq-system-switch:hover{background:var(--raqeem-primary-dark);color:#fff}.rq-user-panel{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;background:var(--raqeem-surface-muted);border:1px solid var(--line);border-radius:9px}.rq-user-avatar{flex:0 0 34px;height:34px;display:grid;place-items:center;background:var(--raqeem-nav-active-bg);color:var(--raqeem-brand-primary);border-radius:8px}.rq-user-panel>div{flex:1;min-width:0}.rq-user-panel strong,.rq-user-panel small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.rq-user-panel strong{font-size:12.5px}.rq-user-panel small{font-size:11px;color:var(--muted)}.rq-user-panel button{color:var(--raqeem-brand-primary);padding:8px;border-radius:7px}.rq-user-panel button:hover{background:var(--raqeem-nav-hover-bg)}
.rq-main{min-width:0;flex:1;display:flex;flex-direction:column}.rq-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;min-height:76px;padding:10px 22px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}.rq-top-context{min-width:160px}.rq-top-context strong,.rq-top-context small{display:block}.rq-top-context strong{font-size:19px;font-weight:800;line-height:1.3}.rq-top-context small{font-size:11px;color:var(--muted);font-weight:600}.rq-top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:9px;min-width:0}.rq-quick{position:relative;display:flex;align-items:center;gap:8px;color:#6f86a5;width:240px;min-width:0;padding:0 12px;background:#fff;border:1px solid var(--line);border-radius:11px;height:42px}.rq-quick:focus-within{border-color:var(--raqeem-brand-primary);box-shadow:0 0 0 3px var(--raqeem-nav-active-bg)}.rq-quick input{flex:1;width:0;border:0;outline:0;color:var(--ink);background:transparent;font-size:13px}.rq-quick-results{position:absolute;top:calc(100% + 7px);right:0;width:min(370px,90vw);max-height:320px;overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--line);box-shadow:0 9px 30px rgba(7,29,58,.16);border-radius:12px;z-index:80}.rq-quick-results[hidden]{display:none}.rq-quick-results a{display:block;padding:10px 13px;border-bottom:1px solid var(--line-2)}.rq-quick-results a:hover,.rq-quick-results a.rq-selected{background:var(--raqeem-nav-hover-bg)}.rq-quick-results strong,.rq-quick-results small{display:block}.rq-quick-results strong{font-size:13px}.rq-quick-results small{font-size:11px;color:var(--muted)}.rq-quick-message{padding:13px;font-size:12px;color:var(--muted)}
.rq-full-search{display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:44px;padding:0 16px;border-radius:9px;background:var(--raqeem-brand-primary);color:var(--raqeem-on-primary);font-size:13px;font-weight:800;white-space:nowrap;transition:background .16s ease}.rq-full-search:hover{background:var(--raqeem-primary-dark);color:#fff}.rq-top-icon,.rq-top-date{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:10px;background:#fff}.rq-top-icon{width:42px;position:relative}.rq-unread{position:absolute;top:-5px;left:-5px;background:#ef4444;border-radius:20px;color:#fff;font-size:10px;padding:0 5px}.rq-top-date{padding:0 11px;white-space:nowrap;font-size:11px;font-weight:700}
.rq-view-all{display:inline-flex;align-items:center;margin-inline-start:auto;padding:4px 13px;font-size:12px;font-weight:800;color:var(--raqeem-primary-dark);background:#fff;border:1px solid var(--line);border-radius:999px;text-decoration:none;white-space:nowrap}
.rq-view-all:hover{border-color:var(--raqeem-brand-primary);color:var(--raqeem-brand-primary);background:var(--raqeem-nav-hover-bg)}
.attach-form{display:grid;gap:12px;margin-top:14px}
.attach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.attach-field{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.attach-field input,.attach-field textarea{padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;width:100%;font-size:13px;background:#fff;color:var(--ink);font-family:inherit}
.attach-field textarea{min-height:84px;resize:vertical;line-height:1.7}
.attach-field input:focus,.attach-field textarea:focus{outline:none;border-color:var(--raqeem-primary);box-shadow:0 0 0 3px var(--raqeem-nav-active-bg)}
.attach-field input::placeholder,.attach-field textarea::placeholder{color:var(--muted);font-weight:500}
.attach-limits{font-size:12px;color:var(--muted)}
.attach-limits summary{cursor:pointer;font-weight:700;color:var(--ink-2);width:fit-content}
.attach-limits summary:hover{color:var(--ink)}
.attach-limits p{margin:6px 0 0}
.attach-item{margin-block:.75rem}
.attach-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.attach-head strong{font-size:14px}
.attach-meta{font-size:11.5px;color:var(--muted)}
.attach-desc{margin:8px 0 0;font-size:13px;line-height:1.8}
.attach-item .ctk-actions{margin-top:10px}
.rq-tracking-scope{display:flex;align-items:center;min-width:0;max-width:190px;padding:3px 7px;border:1px solid var(--line);border-radius:10px;background:#fff}.rq-tracking-scope select{width:170px;min-width:0;max-width:100%;height:34px;border:0;background:transparent;color:var(--raqeem-primary-dark);font-size:12px;font-weight:800;text-overflow:ellipsis;cursor:pointer}.rq-tracking-reset button{color:var(--raqeem-primary-dark);font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}.rq-tracking-reset button:hover{text-decoration:underline}
.rq-notification-wrap{position:relative;flex:0 0 42px;z-index:40}.rq-notification-wrap .rq-top-icon{cursor:pointer}.rq-notification-panel{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;display:flex;flex-direction:column;width:min(365px,calc(100vw - 24px));max-height:min(460px,calc(100dvh - 95px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(7,29,58,.2);overflow:hidden;z-index:50}.rq-notification-panel[hidden]{display:none}.rq-notification-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}.rq-notification-head strong{font-size:14px}.rq-notification-head span{font-size:11px;color:var(--muted)}.rq-notification-list{min-height:0;overflow-y:auto;overscroll-behavior:contain}.rq-notification-item{display:grid;gap:3px;padding:9px 13px;border-bottom:1px solid var(--line-2);color:var(--ink)}a.rq-notification-item:hover{background:var(--raqeem-nav-hover-bg)}.rq-notification-item.rq-is-unread{background:#f2f9fb;border-inline-start:3px solid var(--raqeem-brand-secondary)}.rq-notification-title{font-size:12.5px;font-weight:800}.rq-notification-summary{font-size:11px;color:var(--ink-2);line-height:1.5}.rq-notification-item small{font-size:10.5px;color:var(--muted)}.rq-notification-unavailable,.rq-notification-empty{color:var(--muted);font-size:12px}.rq-notification-empty{padding:22px;text-align:center;margin:0}.rq-notification-footer{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;color:var(--raqeem-primary-dark);font-size:12px;font-weight:800;border-top:1px solid var(--line)}.rq-notification-footer:hover{background:var(--raqeem-nav-hover-bg)}
.rq-content{width:100%;min-width:0;padding:24px 22px 54px;flex:1}.rq-content>.ctk-head,.rq-content>.ctk-metrics,.rq-content>.ctk-tablewrap{max-width:none}.rq-content .ctk-body{max-width:none}.rq-content .kpi,.rq-content .panel,.rq-content .sys-card,.rq-content .ctk-metric,.rq-content .doc-panel{border-color:var(--line);border-radius:13px;box-shadow:var(--sh-sm)}.rq-content .ctk-metrics{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.rq-content .kpi{padding:15px 13px;min-height:145px}.rq-content .kpi .ic{width:39px;height:39px}.rq-content .kpi .v{font-size:31px}.rq-content .kpi .l{font-size:11.5px;line-height:1.45}.rq-content .ctk-metric::after{inset:auto 18px 0;height:3px;width:auto}.rq-content .sys-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rq-content .kpi-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.rq-content :is(.ctk-tablewrap,.table-wrap,.table-scroll){max-width:100%;overflow-x:auto}.rq-content table{max-width:100%}
.rq-header-back{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);font-size:12px;font-weight:800;text-decoration:none}.rq-header-back:hover{background:var(--raqeem-nav-hover-bg);color:var(--raqeem-brand-primary)}.rq-drawer-overlay,.rq-menu-button{display:none}.rq-workspace :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--raqeem-brand-primary);outline-offset:2px}.rq-sidebar :is(a,button,summary):focus-visible{outline-color:var(--raqeem-brand-primary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1200px){.rq-content .sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rq-content .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1090px){.rq-topbar{flex-wrap:wrap}.rq-top-context{flex:1}.rq-top-actions{flex:1 1 100%;justify-content:flex-start;margin:0}.rq-quick{flex:1;width:auto}.rq-top-date{margin-inline-start:auto}}
@media(max-width:640px){.rq-top-actions{flex-wrap:wrap}.rq-tracking-scope{max-width:44%;flex:0 1 44%}.rq-tracking-scope select{width:100%}.rq-tracking-reset button{font-size:10px}}
@media(max-width:640px){.rq-notification-panel{position:fixed;inset-inline:12px;width:auto;top:var(--rq-notification-top,120px);max-height:calc(100dvh - var(--rq-notification-top,120px) - 12px)}}
@media(max-width:800px){
 .rq-sidebar{position:fixed;right:0;top:0;bottom:0;transform:translateX(105%);transition:transform .2s ease;width:min(310px,88vw);height:100dvh}.rq-sidebar.rq-open{transform:translateX(0)}.rq-drawer-overlay{position:fixed;inset:0;background:rgba(6,24,52,.52);z-index:50;border:0;width:100%;height:100%;display:none}.rq-sidebar.rq-open+.rq-drawer-overlay{display:block}.rq-drawer-open{overflow:hidden!important}.rq-menu-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink)}.rq-topbar{padding:10px 16px}.rq-content{padding:20px 16px 46px}
}
@media(max-width:530px){.rq-top-context{min-width:0}.rq-top-context strong{font-size:16px}.rq-top-context small{font-size:10px}.rq-top-actions{flex-wrap:wrap}.rq-quick{flex:1 1 130px;width:auto;max-width:none}.rq-full-search{padding:0 9px;font-size:12px}.rq-top-icon{flex:0 0 42px}.rq-top-date{display:none}.rq-content{padding:14px 12px 48px}.rq-content .ctk-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.rq-content .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rq-content .sys-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rq-sidebar{transition:none}}
/* Operational template selection uses the same restrained table surface as template administration. */
.rq-picker-filters{display:flex;align-items:end;gap:9px;flex-wrap:wrap;margin-bottom:14px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.rq-picker-filters select{max-width:240px}
.rq-picker-scroll-hint{display:none}
.ctk-tablewrap .rq-picker-table{min-width:1050px;table-layout:fixed}
.rq-picker-table th:nth-child(1){width:27%}
.rq-picker-table th:nth-child(2){width:12%}
.rq-picker-table th:nth-child(3){width:18%}
.rq-picker-table th:nth-child(4){width:19%}
.rq-picker-table th:nth-child(5){width:24%}
.rq-picker-table td{padding:10px 12px;vertical-align:middle;overflow-wrap:anywhere}
.rq-picker-table td .pill,.rq-picker-source{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}
.rq-picker-source{display:block;font-size:12px;line-height:1.5}
.rq-picker-title{display:block;overflow-wrap:anywhere;line-height:1.5;font-size:14px;font-weight:800;color:var(--ink)}
.rq-picker-category{color:var(--muted);font-size:13px}
.rq-picker-actions{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap}
.rq-picker-actions>*{flex:0 0 auto;white-space:nowrap}
.rq-picker-action{min-height:42px;padding:9px 11px;justify-content:center;text-align:center;font-size:12.5px}
@media(max-width:1200px){.rq-picker-scroll-hint{display:block;margin:0 0 7px;color:var(--muted);font-size:11px;font-weight:700}}
@media(max-width:600px){.rq-picker-filters>div{flex:1 1 100%;min-width:0!important}.rq-picker-filters select{max-width:none;width:100%}}
@media print{.rq-header-back,.rq-sidebar,.rq-topbar,.rq-drawer-overlay,.rq-quick-results{display:none!important}.rq-app,.rq-main,.rq-content{display:block!important;min-height:0!important;overflow:visible!important;padding:0!important;margin:0!important}}
/* Official local artwork; the login backdrop never enters legal print canvases. */
body.rq-login{height:auto;min-height:100dvh;overflow:auto}
.rq-login-scene{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:#144966 url('../assets/brand/raqeem/login-background.jpg') center bottom / cover no-repeat}
.rq-login-card{width:min(100%,490px);background:var(--raqeem-surface);border:1px solid var(--raqeem-border);border-radius:14px;box-shadow:0 18px 42px rgba(11,37,53,.20);padding:26px 34px 32px}
.rq-login-identity{text-align:center}.rq-login-logo{display:block;width:220px;max-width:100%;height:auto;margin:0 auto}
.rq-login-card h1{text-align:center;margin:14px 0 0;padding-top:15px;border-top:1px solid var(--line);font-size:26px;line-height:1.4;color:var(--ink)}
.rq-login-tenant{text-align:center;font-size:12px;color:var(--muted);margin:2px 0 19px}
.rq-login-form{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.rq-login-form label{font-weight:700;font-size:14px}
.rq-login-field{display:flex;align-items:center;gap:12px;height:53px;border:1px solid var(--line);border-radius:10px;padding:0 14px;color:var(--muted);background:#fff}
.rq-login-field:focus-within{border-color:var(--raqeem-brand-primary);box-shadow:0 0 0 3px var(--raqeem-nav-active-bg)}
.rq-login-field input{border:0;background:transparent;outline:0;flex:1;min-width:0;height:100%;font-size:14px;color:var(--ink)}
.rq-login-field button{color:var(--raqeem-brand-primary);font-weight:700;font-size:12px;min-width:44px;min-height:44px}
.rq-login-submit{margin-top:12px;min-height:54px;background:var(--raqeem-brand-primary);border-radius:9px;color:var(--raqeem-on-primary);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:12px;transition:background .16s ease}
.rq-login-submit:hover{background:var(--raqeem-primary-dark)}.rq-login-submit:active{background:var(--raqeem-primary-deep)}.rq-login-submit:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:530px){.rq-login-scene{padding:16px 12px}.rq-login-card{padding:21px 20px 25px}.rq-login-logo{width:180px}.rq-login-card h1{font-size:24px}}
.rq-template-detail{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:18px;align-items:start}.rq-template-detail>*{min-width:0}@media(max-width:900px){.rq-template-detail{grid-template-columns:1fr}}
/* Comprehensive search shares the workspace shell, not a second search backend. */
.rq-search-page{max-width:1500px}.rq-search-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;margin-bottom:20px;box-shadow:var(--sh-sm)}.rq-search-filters label{display:grid;gap:5px;font-size:12px;font-weight:700;color:var(--ink-2)}.rq-search-filters :is(input,select){height:44px;border:1px solid var(--line);border-radius:9px;padding:0 10px;background:#fff;color:var(--ink);font-size:13px;min-width:0}.rq-search-filters button{height:43px}.rq-search-group{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:13px;overflow:hidden}.rq-search-group h2{font-size:16px;padding:11px 16px;border-bottom:1px solid var(--line);color:var(--ink)}.rq-search-group h2 span{font-size:12px;font-weight:600;color:var(--muted)}.rq-search-result{display:grid;gap:2px;padding:11px 16px;border-bottom:1px solid var(--line-2)}.rq-search-result:hover{background:var(--raqeem-nav-hover-bg)}.rq-search-result strong{font-size:14px}.rq-search-result span{font-size:12px;color:var(--ink-2)}.rq-search-result small{font-size:11px;color:var(--muted)}.rq-search-empty{padding:28px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:center}.rq-search-note{font-size:11px;color:var(--muted);margin:18px 0}@media(max-width:760px){.rq-search-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:450px){.rq-search-filters{grid-template-columns:1fr}}
.rq-office-form{max-width:900px;margin-inline:auto}.rq-office-form h2{font-size:16px;border-bottom:1px solid var(--line-2);padding-bottom:8px;margin:18px 0 14px}.rq-office-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.rq-office-grid>*{min-width:0}.rq-office-wide{grid-column:1/-1}.rq-office-grid :is(input,textarea){width:100%;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;color:var(--ink)}.rq-office-grid textarea{resize:vertical}.rq-office-error{display:block;color:var(--exp);font-weight:700;margin-top:4px}.rq-office-form .hint{margin:18px 0 10px}@media(max-width:600px){.rq-office-grid{grid-template-columns:1fr}.rq-office-form{padding:16px}.rq-office-form .form-actions{flex-wrap:wrap}}
.rq-office-sourced{padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--raqeem-nav-hover-bg);overflow-wrap:anywhere;white-space:pre-wrap}
.rq-office-fields{border:0;min-width:0}.rq-office-fields:disabled{opacity:.8}