/* =========================================================================
   Solar ERP — Professional Design System
   ========================================================================= */

:root{
  /* Brand */
  --navy-950:#0b1526;
  --navy-900:#0f1c33;
  --navy-800:#152341;
  --navy-700:#1c2d52;
  --orange-500:#f7941d;
  --orange-600:#e07f0a;
  --orange-50:#fff4e5;

  /* Neutral */
  --bg:#f5f7fa;
  --panel:#ffffff;
  --border:#e6e9ee;
  --border-strong:#d8dde5;
  --text:#1a2233;
  --text-soft:#5b6577;
  --muted:#8b93a3;

  /* Semantic */
  --success:#0ea968;
  --success-bg:#e7f8f0;
  --danger:#e0392f;
  --danger-bg:#fdeceb;
  --warning:#e0980f;
  --warning-bg:#fff4e0;
  --info:#2e6fe0;
  --info-bg:#eaf1ff;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(15,28,51,.06);
  --shadow:0 4px 16px rgba(15,28,51,.08);
  --shadow-lg:0 12px 32px rgba(15,28,51,.14);
  --sidebar-w:250px;
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  margin:0;
  font-family:'Inter','Segoe UI',Tahoma,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
}
body.lang-rtl{font-family:'Noto Kufi Arabic','Segoe UI',Tahoma,Arial,sans-serif}
a{color:var(--orange-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;color:var(--navy-900)}
code{background:#eef1f5;padding:1px 6px;border-radius:4px;font-size:12px}

/* ---------------------------------------------------------------------
   Shell / layout
   --------------------------------------------------------------------- */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 100%);
  color:#aeb9cf;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  transition:transform .22s ease;
  z-index:40;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:22px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand .logo-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--orange-500),#ffb347);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#1a1200;font-size:15px;flex-shrink:0;
  box-shadow:0 3px 10px rgba(247,148,29,.35);
}
.sidebar-brand .logo-mark-img{
  background:#fff;object-fit:contain;padding:3px;box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.sidebar-brand .brand-text{color:#fff;font-weight:700;font-size:15px;line-height:1.2}
.sidebar-brand .brand-text small{display:block;color:#7f8cab;font-weight:400;font-size:11px;margin-top:2px}

.sidebar-group{border-bottom:1px solid rgba(255,255,255,.04)}
.sidebar-group:last-of-type{border-bottom:none}
.sidebar-section-label{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 8px;margin:0;border:none;background:none;cursor:pointer;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#5c6a8a;font-family:inherit;transition:color .15s ease;
}
.sidebar-section-label:hover{color:#8b9ab8}
.sidebar-section-label .group-chevron{width:13px;height:13px;flex-shrink:0;transition:transform .18s ease;opacity:.7}
.sidebar-group.collapsed .sidebar-section-label .group-chevron{transform:rotate(90deg)}
[dir="rtl"] .sidebar-section-label .group-chevron{transform:rotate(180deg)}
[dir="rtl"] .sidebar-group.collapsed .sidebar-section-label .group-chevron{transform:rotate(90deg)}
.sidebar-group-list{
  list-style:none;margin:0;padding:4px 10px;
  max-height:600px;overflow:hidden;transition:max-height .22s ease,opacity .18s ease;opacity:1;
}
.sidebar-group.collapsed .sidebar-group-list{max-height:0;padding-top:0;padding-bottom:0;opacity:0}
.sidebar li{display:flex;align-items:center;gap:2px}
.sidebar li a{
  display:flex;align-items:center;gap:11px;flex:1;min-width:0;
  padding:9px 12px;margin-bottom:2px;
  border-radius:8px;color:#aeb9cf;font-size:13.5px;font-weight:500;
  transition:background .15s ease,color .15s ease,transform .1s ease;
}
.sidebar li a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none;transform:translateX(2px)}
[dir="rtl"] .sidebar li a:hover{transform:translateX(-2px)}
.sidebar li.active a{background:rgba(247,148,29,.16);color:#ffb763;font-weight:600}
.sidebar li a .nav-icon{width:17px;height:17px;flex-shrink:0;opacity:.9}
.sidebar-footer{margin-top:auto;padding:16px 20px;font-size:11px;color:#4d5a78;border-top:1px solid rgba(255,255,255,.06)}

.fav-toggle-form{flex-shrink:0;margin-bottom:2px}
.fav-star{
  background:none;border:none;cursor:pointer;color:#5c6a8a;font-size:14px;
  padding:6px 8px;border-radius:6px;opacity:0;transition:opacity .15s ease,color .15s ease;line-height:1;
}
.sidebar li:hover .fav-star{opacity:1}
.fav-star.active{opacity:1;color:var(--orange-500)}
.fav-star:hover{color:var(--orange-500);background:rgba(255,255,255,.08)}
.sidebar-favorites-empty{padding:8px 14px 12px;font-size:11.5px;color:#5c6a8a;line-height:1.5}
@media (max-width:900px),(hover:none){
  .fav-star{opacity:.55}
}

.app-main{flex:1;display:flex;flex-direction:column;min-width:0}

.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;background:var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:5;
  gap:14px;
}
.topbar-left{display:flex;align-items:center;gap:14px}
.hamburger-btn{
  display:none;width:36px;height:36px;border-radius:8px;border:1px solid var(--border-strong);
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;
}
.hamburger-btn svg{width:18px;height:18px}
.sidebar-backdrop{display:none}
.topbar h1{font-size:19px;margin:0}
.topbar-breadcrumb{font-size:12px;color:var(--muted);margin-top:2px}
.topbar-user{display:flex;align-items:center;gap:14px}
.topbar-user .who{text-align:right;line-height:1.3}
.topbar-user .who strong{display:block;font-size:13px;color:var(--text)}
.topbar-user .who small{color:var(--muted);text-transform:capitalize}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}
.content{padding:26px 28px 40px;max-width:1500px}

/* ---------------------------------------------------------------------
   Panels / cards
   --------------------------------------------------------------------- */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease;
}
.panel h2,.panel h3{margin-top:0;font-size:16px}
.panel h4{font-size:13px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 8px}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.panel-header h3{margin:0}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:13.2px}
table th,table td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:start;vertical-align:middle}
table th{
  background:#fafbfd;color:var(--text-soft);font-weight:600;
  text-transform:uppercase;font-size:10.8px;letter-spacing:.05em;
  border-bottom:1px solid var(--border-strong);
}
table tr:last-child td{border-bottom:none}
table tbody tr{transition:background .1s ease}
table tbody tr:hover td{background:#f9fafc}
.table-wrap{overflow-x:auto}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:8px;border:1px solid var(--border-strong);
  background:#fff;color:var(--text);cursor:pointer;font-size:13px;font-weight:600;
  transition:all .12s ease;line-height:1.3;
}
.btn:hover{background:#f5f6f8;text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--orange-500);border-color:var(--orange-500);color:#fff;box-shadow:0 2px 6px rgba(247,148,29,.35)}
.btn-primary:hover{background:var(--orange-600);box-shadow:0 4px 12px rgba(247,148,29,.4)}
.btn-dark{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.btn-dark:hover{background:var(--navy-800)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:#c62d24}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}
.btn-block{display:flex;width:100%;justify-content:center}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
form label{display:block;margin-bottom:14px;font-weight:600;font-size:12.5px;color:var(--text-soft)}
form input,form select,form textarea{
  width:100%;padding:9px 11px;margin-top:6px;
  border:1px solid var(--border-strong);border-radius:8px;
  font-size:13.5px;font-weight:400;color:var(--text);
  background:#fff;transition:border-color .12s ease,box-shadow .12s ease;
}
form input:focus,form select:focus,form textarea:focus{
  outline:none;border-color:var(--orange-500);box-shadow:0 0 0 3px rgba(247,148,29,.15);
}
form .checkbox{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--text)}
form .checkbox input{width:auto;margin-top:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   Alerts / badges
   --------------------------------------------------------------------- */
.alert{padding:11px 16px;border-radius:10px;margin-bottom:16px;font-size:13px;font-weight:500;border:1px solid transparent}
.alert-success{background:var(--success-bg);color:#086b43;border-color:#bfe9d5}
.alert-error{background:var(--danger-bg);color:#9c261e;border-color:#f4c6c2}
.alert-warning{background:var(--warning-bg);color:#8a5c00;border-color:#f3ddab}

.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.01em}
.badge-success{background:var(--success-bg);color:#086b43}
.badge-warning{background:var(--warning-bg);color:#8a5c00}
.badge-danger{background:var(--danger-bg);color:#9c261e}
.badge-info{background:var(--info-bg);color:#1d4ec2}
.badge-muted{background:#eef0f4;color:#5b6577}
.badge-navy{background:#e3e8f2;color:var(--navy-800)}

.text-success{color:var(--success)}
.text-danger{color:var(--danger)}

.muted{color:var(--muted)}
small.muted{font-size:12px}

/* ---------------------------------------------------------------------
   Stat cards / dashboard
   --------------------------------------------------------------------- */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
@media (max-width:1100px){.stat-cards{grid-template-columns:repeat(2,1fr)}}
.stat-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-card::before{
  content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--orange-500);
}
.stat-card.accent-navy::before{background:var(--navy-800)}
.stat-card.accent-success::before{background:var(--success)}
.stat-card.accent-danger::before{background:var(--danger)}
.stat-card .icon{
  width:38px;height:38px;border-radius:10px;background:var(--orange-50);color:var(--orange-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.stat-card .value{font-size:25px;font-weight:800;color:var(--navy-900);letter-spacing:-.02em}
.stat-card .label{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.stat-card .delta{font-size:11.5px;font-weight:600;margin-top:6px}
.stat-card .delta.up{color:var(--success)}
.stat-card .delta.down{color:var(--danger)}

/* ---------------------------------------------------------------------
   Toolbar / search
   --------------------------------------------------------------------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.toolbar form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar input[type=text],.toolbar input[type=date]{padding:9px 12px;border:1px solid var(--border-strong);border-radius:8px;font-size:13px;min-width:200px}
.toolbar select{padding:9px 12px;border:1px solid var(--border-strong);border-radius:8px;font-size:13px}

/* ---------------------------------------------------------------------
   Tabs / pill nav (used on statement, reports pages)
   --------------------------------------------------------------------- */
.tab-nav{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:18px}
.tab-nav a{padding:9px 16px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.tab-nav a.active{color:var(--orange-600);border-color:var(--orange-500)}

/* ---------------------------------------------------------------------
   Auth pages
   --------------------------------------------------------------------- */
.auth-page{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(circle at 20% 20%,#1c3560 0%,var(--navy-950) 60%);
  padding:20px;
}
.auth-box{
  background:#fff;padding:38px 36px;border-radius:var(--radius-lg);width:360px;
  box-shadow:var(--shadow-lg);
}
.auth-box .logo-mark{
  width:46px;height:46px;border-radius:12px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--orange-500),#ffb347);
  display:flex;align-items:center;justify-content:center;color:#1a1200;font-weight:800;font-size:19px;
  box-shadow:0 4px 14px rgba(247,148,29,.4);
}
.auth-box h1{margin:0 0 4px;text-align:center;font-size:20px}
.auth-box p.muted{text-align:center;margin-bottom:22px}

/* ---------------------------------------------------------------------
   Login page — split brand/form panel design
   --------------------------------------------------------------------- */
.auth-split{display:flex;min-height:100vh}

.auth-brand-panel{
  flex:1;position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--navy-950) 0%,var(--navy-800) 55%,#2a4270 100%);
  display:flex;align-items:center;justify-content:center;padding:60px;
}
.auth-brand-decor{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 15% 25%,rgba(247,148,29,.18) 0%,transparent 40%),
    radial-gradient(circle at 85% 80%,rgba(247,148,29,.12) 0%,transparent 45%);
}
.auth-brand-decor::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);top:-120px;inset-inline-end:-140px;
}
.auth-brand-decor::after{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  border:1px solid rgba(255,255,255,.05);bottom:-100px;inset-inline-start:-80px;
}
.auth-brand-content{position:relative;z-index:1;max-width:400px;color:#fff}
.auth-brand-logo{
  width:56px;height:56px;border-radius:14px;margin-bottom:22px;
  background:linear-gradient(135deg,var(--orange-500),#ffb347);
  display:flex;align-items:center;justify-content:center;color:#1a1200;font-weight:800;font-size:24px;
  box-shadow:0 6px 20px rgba(247,148,29,.4);
}
.auth-brand-logo-img{background:#fff;object-fit:contain;padding:6px}
.auth-brand-content h1{color:#fff;font-size:28px;margin:0 0 8px}
.auth-brand-content p{color:#aeb9cf;font-size:14.5px;margin:0 0 28px;line-height:1.6}
.auth-feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.auth-feature-list li{display:flex;align-items:center;gap:12px;color:#dbe2f0;font-size:13.5px;font-weight:500}
.auth-feature-list li span{
  width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}

.auth-form-panel{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:40px;position:relative;
}
.auth-lang-corner{position:absolute;top:24px;inset-inline-end:24px;display:flex;gap:6px}
.auth-card{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:40px 38px;width:380px;max-width:100%;
}
.auth-card-logo{
  width:46px;height:46px;border-radius:12px;margin:0 auto 18px;
  background:linear-gradient(135deg,var(--orange-500),#ffb347);
  display:none;align-items:center;justify-content:center;color:#1a1200;font-weight:800;font-size:19px;
  box-shadow:0 4px 14px rgba(247,148,29,.4);
}
.auth-card-logo-img{background:#fff;object-fit:contain;padding:5px}
.auth-card h1{margin:0 0 4px;font-size:22px}
.auth-card p.muted{margin-bottom:24px}

.input-icon-wrap{position:relative;display:flex;align-items:center}
.input-icon-wrap .input-icon{
  position:absolute;inset-inline-start:12px;width:16px;height:16px;color:var(--muted);pointer-events:none;
}
.input-icon-wrap input{padding-inline-start:38px !important}
.input-icon-wrap input#passwordInput{padding-inline-end:38px !important}
.password-toggle{
  position:absolute;inset-inline-end:10px;background:none;border:none;cursor:pointer;
  color:var(--muted);padding:4px;display:flex;align-items:center;border-radius:6px;
}
.password-toggle:hover{color:var(--text-soft);background:var(--bg)}
.password-toggle svg{width:18px;height:18px}
.password-toggle.is-visible{color:var(--orange-600)}

.auth-row{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 18px}

@media (max-width:840px){
  .auth-brand-panel{display:none}
  .auth-form-panel{padding:20px}
  .auth-card-logo{display:flex}
  .auth-lang-corner{position:static;justify-content:center;margin-bottom:18px}
  .auth-form-panel{flex-direction:column}
}

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.divider{height:1px;background:var(--border);margin:18px 0;border:none}
.kv-list{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.kv-list dt{color:var(--muted);font-weight:600}
.kv-list dd{margin:0}
.empty-state{text-align:center;padding:36px 20px;color:var(--muted)}
.empty-state .icon{font-size:32px;margin-bottom:8px;opacity:.5}
.text-right{text-align:end}
.font-mono{font-family:'SFMono-Regular',Consolas,monospace}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.progress-bar{height:6px;border-radius:99px;background:#eef0f4;overflow:hidden}
.progress-bar span{display:block;height:100%;background:var(--orange-500)}

/* Sales form: per-row insufficient-stock warning (non-blocking) */
tr.row-stock-warning td{background:var(--danger-bg) !important}
tr.row-stock-warning select,tr.row-stock-warning input{border-color:var(--danger) !important}
.stock-warning{color:var(--danger);font-size:11px;font-weight:600;margin-top:4px}

/* Contract point selection (admin form) */
.point-select-row{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:#fafbfc}
.point-select-row textarea{margin-top:8px}
.point-select-row textarea:disabled{background:#f0f1f3;color:var(--muted)}

/* Contract letterhead / printed sheet — uses the client's actual uploaded frame
   graphic (assets/img/contract-frame.png) as the background, with text overlaid
   in the safe zones measured from that image (banner top-left, meta top-right,
   contact strip near the bottom). The frame + overlays repeat on every printed
   page in print (position:fixed); on screen they sit at the top of the sheet. */
.contract-sheet-wrap{margin:0 auto;position:relative}
.contract-sheet{background:#fff;padding:0 !important;position:relative}

.contract-frame-layer{position:relative;pointer-events:none}
.contract-frame-bg{display:block;width:100%;height:auto}

.contract-banner-overlay{
  position:absolute;top:6%;left:10.5%;display:flex;align-items:center;gap:10px;
  pointer-events:none;
}
.contract-logo-badge{
  background:#fff;border-radius:7px;width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.contract-company-info h2{margin:0;color:var(--navy-900);font-size:17px;letter-spacing:.01em;line-height:1.1}
.contract-company-info .tagline{font-size:9px;color:var(--navy-800);letter-spacing:.05em;text-transform:uppercase;opacity:.8}

.contract-meta-overlay{
  position:absolute;top:2.5%;right:8%;text-align:end;font-size:10.5px;color:var(--navy-900);
  line-height:1.6;
}
.contract-meta-overlay strong{color:var(--orange-600)}

.contract-footer-overlay{
  position:absolute;bottom:6.5%;left:9%;right:9%;
  display:flex;justify-content:space-between;gap:16px;font-size:9.5px;color:var(--navy-900);line-height:1.6;
}
.footer-col-end{text-align:end}

.contract-body{position:relative;padding:24px 32px 32px}
.contract-title{text-align:center;font-size:22px;margin:0 0 22px;color:var(--navy-900)}
.contract-intro{font-size:13px;color:var(--text-soft);line-height:1.8;margin-bottom:26px;text-align:justify;
  background:var(--bg);border-radius:8px;padding:14px 18px;border:1px solid var(--border)}

.contract-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}
.party-box{border:1px solid var(--border);border-radius:12px;padding:18px 20px;position:relative}
.party-box-first{border-top:3px solid var(--navy-800)}
.party-box-second{border-top:3px solid var(--orange-500)}
.party-box h4{margin:0 0 12px;color:var(--text-soft);font-size:12px;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:8px}
.party-num{
  width:20px;height:20px;border-radius:50%;background:var(--navy-800);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;
}
.party-box-second .party-num{background:var(--orange-500);color:#1a1200}
.party-box p{margin:0 0 6px;font-size:13.5px}
.party-primary-name{font-size:16px !important;font-weight:800;color:var(--navy-900);margin-bottom:8px !important}

.contract-points{margin-bottom:20px}
.points-heading{color:var(--text-soft);font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;
  border-bottom:1px solid var(--border);padding-bottom:8px}
.contract-point{display:flex;gap:14px;margin-bottom:18px;break-inside:avoid}
.point-num{
  width:26px;height:26px;border-radius:50%;background:var(--orange-50);color:var(--orange-600);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex-shrink:0;margin-top:1px;
}
.point-title{font-weight:700;font-size:13.5px;color:var(--navy-900);margin-bottom:4px}
.point-content{font-size:13px;line-height:1.75;color:var(--text-soft)}

.contract-signatures{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:56px}
.contract-signatures .sig-line{border-bottom:1px solid var(--text);height:50px}
.contract-signatures span{display:block;text-align:center;margin-top:8px;font-size:12.5px;color:var(--text-soft)}

/* Print: the frame layer becomes fixed to the page (not the content flow), which
   makes browsers repeat it on every printed page. The body gets matching padding
   (same percentages as screen, since the frame keeps the same proportions) so
   real content never renders underneath the banner/footer artwork. */
@media print{
  .contract-sheet-wrap *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important}
  .contract-parties{grid-template-columns:1fr 1fr}
  .contract-sheet-wrap,.contract-sheet{box-shadow:none;border:none;max-width:none !important}
  .contract-frame-layer{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-1;overflow:hidden}
  .contract-frame-bg{width:100%;height:100%;object-fit:fill}
  .contract-banner-overlay,.contract-meta-overlay,.contract-footer-overlay{position:fixed}
  .contract-body{padding:19% 6.5% 9%}
  @page{margin:0}
}


[dir="rtl"] .sidebar li.active a{border-right:none;border-left:3px solid var(--orange-500)}
[dir="rtl"] .stat-card::before{left:auto;right:0}
[dir="rtl"] .kv-list{grid-template-columns:1fr auto}
[dir="rtl"] .topbar-user .who{text-align:left}
[dir="rtl"] .auth-box{direction:rtl}

/* Language switcher dropdown */
.lang-switcher{position:relative}
.lang-menu{
  display:none;position:absolute;top:calc(100% + 6px);inset-inline-end:0;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-lg);min-width:150px;overflow:hidden;z-index:20;
}
.lang-menu.open{display:block}
.lang-menu a{display:block;padding:10px 16px;font-size:13px;color:var(--text);font-weight:500}
.lang-menu a:hover{background:var(--bg);text-decoration:none}
.lang-menu a.active{color:var(--orange-600);font-weight:700;background:var(--orange-50)}

/* ---------------------------------------------------------------------
   Reusable modal component (used by quick-add popups, confirmations, etc.)
   --------------------------------------------------------------------- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(11,21,38,.55);
  z-index:100;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .15s ease;
}
.modal-overlay.open{display:flex}
.modal-box{
  width:480px;max-width:100%;max-height:88vh;overflow-y:auto;
  animation:modalPop .18s ease;
  margin-bottom:0 !important;
  box-shadow:var(--shadow-lg);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ---------------------------------------------------------------------
   Mobile responsive: sidebar becomes an off-canvas drawer
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .hamburger-btn{display:flex}
  .sidebar{
    position:fixed;top:0;bottom:0;inset-inline-start:0;height:100vh;
    transform:translateX(-100%);box-shadow:var(--shadow-lg);
  }
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(11,21,38,.45);z-index:35;
  }
  .sidebar-backdrop.open{display:block}
  .topbar{padding:12px 16px}
  .content{padding:18px 16px 32px}
  .topbar-user .who{display:none}
  .stat-cards{grid-template-columns:1fr 1fr}
}

.print-only{display:none}

@media print{
  .sidebar,.topbar,.toolbar,.no-print{display:none !important}
  .app-main{margin:0}
  .content{padding:0}
  .panel{box-shadow:none;border:none;break-inside:avoid}
  .stat-card{break-inside:avoid}
  body{background:#fff}
  .print-only{display:block;margin-bottom:18px}
  .print-header h2{margin:0 0 4px;font-size:18px}
  .print-header p{margin:0;color:var(--muted);font-size:12px}
  a[href]:after{content:""}
  table{font-size:11px}
}