.logout-form {
  margin: 0;
}

.logout-form button {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.ttf') format('truetype'); }
@font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/noto-arabic-400.ttf') format('truetype'); }
@font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/noto-arabic-600.ttf') format('truetype'); }
@font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/noto-arabic-700.ttf') format('truetype'); }

/* ============================================
   SOS Children's Villages Palestine
   Procurement System — Complete Stylesheet
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Canonical SOS design tokens */
  --sos-blue: #009EE0;
  --sos-blue-dark: #00699A;
  --sos-blue-light: #E5F5FB;
  --sos-accent: #E74361;
  --sos-navy: #1F3864;
  --color-bg: #F7FAFC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EEF2F4;
  --color-border: #DDE3EA;
  --color-text: #1A2332;
  --color-text-muted: #526B78;
  --color-success: #1A6B33;
  --color-warning: #92640A;
  --color-danger: #8B0000;
  --color-info: #00699A;
  --color-focus: #00699A;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --font-ar: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
  --font-en: 'Inter', 'Segoe UI', sans-serif;
  --text-xs: 11px; --text-sm: 12px; --text-md: 14px; --text-lg: 16px;
  --text-xl: 22px; --text-2xl: 32px;
  --leading-tight: 1.25; --leading-normal: 1.5; --leading-ar: 1.75;
  /* Compatibility aliases */
  --primary: var(--sos-blue); --primary-dark: var(--sos-blue-dark);
  --navy: var(--sos-navy); --success: var(--color-success);
  --danger: var(--sos-accent); --warning: #EFB828;
  --bg: var(--color-bg); --surface: var(--color-surface);
  --text: var(--color-text); --text-muted: var(--color-text-muted);
  --border: var(--color-border); --radius: var(--radius-md);
  /* legacy aliases keep existing templates stable */
  --blue: var(--sos-blue-dark); --blue-light: var(--sos-blue-light); --blue-mid: var(--sos-blue);
  --blue-dark: var(--sos-navy); --green: var(--color-success); --green-light: #E8F8EC;
  --orange: var(--color-warning); --orange-light: #FFF6D9; --red: var(--color-danger); --red-light: #FDECEF;
  --teal: #146B72; --teal-light: #E6F5F4; --gray: #455A64; --gray-light: #EEF2F4;
  --white: var(--color-surface); --shadow: var(--shadow-sm);
}

body {
  font-family: var(--font-ar);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  min-height: 100dvh;
}

/* ============ NAVBAR ============ */
.navbar {
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.navbar-brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { background: white; color: var(--blue-dark); font-weight: 700; font-size: 13px; padding: 4px 8px; border-radius: 4px; }
.brand-logo-img { width: 112px; height: 33px; display: block; object-fit: contain; }
.brand-main { font-weight: 600; font-size: 14px; display: block; }
.brand-sub { font-size: 10px; opacity: 0.7; display: block; }
.navbar-links { display: flex; align-items: center; gap: 4px; margin-inline-start: 24px; }
.nav-link { color: rgba(255,255,255,0.85); text-decoration: none; padding: 6px 12px; border-radius: 6px; font-size: 13px; transition: all 0.15s; }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.15); color: white; }
.nav-link.active { box-shadow: inset 0 -2px var(--primary); }
.btn-primary-sm { background: white; color: var(--blue-dark) !important; font-weight: 600; padding: 6px 14px !important; }
.navbar-user { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.language-toggle { border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fff; border-radius: 999px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 11px; }
.language-toggle:hover { background: rgba(255,255,255,.14); }
.notif-icon { display: inline-block; width: 17px; height: 17px; border: 2px solid currentColor; border-radius: 10px 10px 4px 4px; position: relative; flex: 0 0 17px; }
.notif-icon::after { content: ""; position: absolute; inset-inline-start: 4px; bottom: -5px; width: 5px; height: 3px; border-radius: 0 0 5px 5px; background: currentColor; }
.user-avatar { width: 34px; height: 34px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.user-name { font-size: 13px; font-weight: 500; display: block; }
.user-role { font-size: 10px; }
.logout { font-size: 12px !important; opacity: 0.7; }

/* ============ NOTIFICATIONS ============ */
.notif-bell { cursor: pointer; position: relative; font-size: 18px; padding: 4px 8px; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-surface); }
.notif-badge { background: #FF5252; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: 700; align-items: center; justify-content: center; min-inline-size: 18px; min-block-size: 18px; }
.notif-dropdown { position: fixed; top: 62px; inset-inline-end: 16px; width: 320px; inline-size: min(360px, calc(100vw - var(--space-6))); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border); z-index: 200; max-height: 400px; max-block-size: min(480px, calc(100dvh - 84px)); overflow-y: auto; }

/* ============ MAIN CONTENT ============ */
.main-content { padding: 24px; max-width: 1400px; margin: 0 auto; }

/* ============ ALERTS ============ */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-inline-start-width: 4px; }
.alert-success { background: var(--green-light); color: var(--green); border: 1px solid #A5D6A7; }
.alert-error { background: var(--red-light); color: var(--red); border: 1px solid #EF9A9A; }

/* ============ PAGE HEADER ============ */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--text); }
.text-muted { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.badge-req-num { background: var(--blue-light); color: var(--blue); padding: 8px 16px; border-radius: var(--radius); font-size: 13px; border: 1px solid #BBDEFB; }

/* ============ STATS GRID ============ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: white; border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.stat-val { font-size: 32px; font-weight: 700; color: var(--text); line-height: 1; }
.stat-label { color: var(--text-muted); font-size: 12px; margin-top: 6px; }
.stat-blue .stat-val { color: var(--blue); }
.stat-green .stat-val { color: var(--green); }
.stat-orange .stat-val { color: var(--orange); }
.stat-red .stat-val { color: var(--red); }
.stat-teal .stat-val { color: var(--teal); }

/* ============ TWO COLUMN LAYOUT ============ */
.two-col { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.two-col-admin { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }

/* ============ SECTION HEADERS ============ */
.section-header { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.section-header h3 { font-size: 15px; font-weight: 600; color: var(--text); }

/* ============ TABLE ============ */
.table-card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { background: var(--bg); padding: 10px 12px; text-align: start; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); font-size: 12px; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #FAFBFC; }
.row-urgent td { background: #FFF8F0 !important; }
.row-delayed td { background: #FFF0F0 !important; }
.row-inactive td { opacity: 0.5; }
.row-blacklist td { background: #FFF0F0 !important; }
.row-danger td { background: #FFF0F0; }
.row-warn td { background: #FFFAF0; }
.selected-row td { background: var(--green-light) !important; }
.empty-state { text-align: center; padding: 32px !important; color: var(--text-muted); }
.table-scroll { overflow-x: auto; }

/* ============ STATUS BADGES ============ */
.status-badge { display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.status-draft { background: #ECEFF1; color: #546E7A; }
.status-submitted, .status-supervisor_review { background: #FFF3E0; color: #E65100; }
.status-department_specification { background: #EDE7F6; color: #5E35B1; }
.status-operations_review { background: #E8EAF6; color: #3949AB; }
.status-finance_review { background: #FCE4EC; color: #C2185B; }
.status-country_director_review { background: #EDE7F6; color: #4527A0; }
.status-approved { background: var(--green-light); color: var(--green); }
.status-procurement, .status-po_issued, .status-quotations, .status-evaluation { background: var(--blue-light); color: var(--blue); }
.status-completed, .status-closed { background: var(--teal-light); color: var(--teal); }
.status-draft, .status-submitted, .status-supervisor_review, .status-revision { background: #FFF6D9; color: #92640A; }
.status-approved, .status-completed, .status-closed { background: #E8F8EC; color: #1a6b33; }
.status-rejected { background: #FDECEF; color: #8B0000; }
.status-procurement, .status-operations_review, .status-finance_review, .status-quotations, .status-evaluation { background: #E5F5FB; color: #00699A; }
.status-po_issued { background: var(--navy); color: #fff; }
.status-revision { background: #FFF9C4; color: #F57F17; }

.urgency-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.urgency-level-1 { background: var(--gray-light); color: var(--gray); }
.urgency-level-2 { background: #EEF3F5; color: #607D8B; }
.urgency-level-3 { background: var(--blue-light); color: var(--blue-mid); }
.urgency-level-4 { background: var(--orange-light); color: var(--orange); }
.urgency-level-5 { background: var(--red-light); color: var(--red); animation: pulse 1.5s infinite; }
.urgency-low { background: var(--gray-light); color: var(--gray); }
.urgency-normal { background: var(--blue-light); color: var(--blue-mid); }
.urgency-high { background: var(--orange-light); color: var(--orange); }
.urgency-emergency { background: var(--red-light); color: var(--red); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }

.role-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.role-admin { background: #EDE7F6; color: #6A1B9A; }
.role-requester { background: var(--blue-light); color: var(--blue); }
.role-supervisor { background: var(--orange-light); color: var(--orange); }
.role-operations { background: #E8EAF6; color: #3949AB; }
.role-finance { background: #FCE4EC; color: #C2185B; }
.role-logistics { background: var(--teal-light); color: var(--teal); }
.role-sr_logistics { background: #F3E5F5; color: #7B1FA2; }
.role-country_director { background: #EDE7F6; color: #4527A0; }

.supplier-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.supplier-approved { background: var(--green-light); color: var(--green); }
.supplier-preferred { background: var(--blue-light); color: var(--blue); }
.supplier-pending { background: var(--orange-light); color: var(--orange); }
.supplier-blacklisted { background: var(--red-light); color: var(--red); }

.delay-badge { background: var(--red-light); color: var(--red); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-active { background: var(--green-light); color: var(--green); padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge-inactive { background: var(--gray-light); color: var(--gray); padding: 2px 8px; border-radius: 10px; font-size: 11px; }

/* ============ BUTTONS ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); border: none; cursor: pointer; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.15s; font-family: inherit; }
.btn-primary { background: var(--primary); color: var(--navy); }
.btn-primary:hover { background: #33afe5; }
.btn-secondary { background: white; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg); }
.btn-success { background: var(--green); color: white; }
.btn-success:hover { background: #1B5E20; }
.btn-danger { background: var(--red); color: white; }
.btn-danger:hover { background: #B71C1C; }
.btn-warning { background: #F57F17; color: white; }
.btn-warning:hover { background: #E65100; }
.btn-link { color: var(--blue); background: none; border: none; text-decoration: underline; padding: 6px; }
.btn:focus-visible, .nav-link:focus-visible, .language-toggle:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 15px; font-weight: 600; }
.btn-full { width: 100%; }
.btn-del-row { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #EAB9C3; border-radius: 7px; background: #FFF5F7; color: #A72E46; font-size: 20px; cursor: pointer; }
.btn-del-row:hover { border-color: var(--sos-accent); background: #FDECEF; color: var(--red); }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ FILTER BAR ============ */
.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; background: white; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); }
.filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit;
}

/* ============ SOS FORM STYLES ============ */
.sos-form-card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); margin-bottom: 20px; overflow: hidden; box-shadow: var(--shadow); }
.sos-form-header { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: white; border-bottom: 2px solid var(--blue); }
.sos-form-logo { background: var(--blue); color: white; font-weight: 800; font-size: 18px; padding: 8px 14px; border-radius: 6px; flex-shrink: 0; }
.sos-form-title { flex: 1; }
.sos-form-title-ar { font-size: 16px; font-weight: 700; color: var(--blue); direction: rtl; }
.sos-form-title-en { font-size: 13px; color: var(--text-muted); }
.sos-req-num { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.sos-date-box { text-align: end; }
.sos-date-box label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.sos-date-box input { border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; font-size: 13px; }

.sos-section-header { background: var(--blue); color: white; padding: 8px 20px; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; }

.sos-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; padding: 16px 20px; gap: 12px; }
.sos-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.sos-field input, .sos-field select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; color: var(--text); }
.sos-field input:focus, .sos-field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,101,192,0.1); }
.readonly-field { background: var(--bg); color: var(--text-muted); }

/* SOS View mode */
.sos-view-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 16px 20px; }
.sos-view-grid label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.sos-view-grid p { font-size: 13px; margin-top: 2px; }
.justification-view { padding: 16px 20px; font-size: 13px; color: var(--text); background: #FAFBFC; min-height: 60px; }
.specification-view { padding: 16px 20px; background: #F7F4FC; border-inline-start: 4px solid #7E57C2; }
.specification-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #5E35B1; font-size: 12px; }
.specification-content { white-space: pre-wrap; line-height: 1.7; }
.specification-pending { padding: 16px 20px; background: #FFF8E1; color: #8D6E00; }
.specification-action-card { border-color: #7E57C2; }
.specification-textarea { min-height: 180px; }
.specification-scope-textarea { min-height: 90px; }
.specification-title { color: var(--navy); font-size: 18px; margin: 4px 0 16px; }
.specification-summary-block { border-top: 1px solid #DED7EA; padding-top: 12px; margin-top: 12px; }
.specification-summary-block > strong { display: block; color: #5E35B1; margin-bottom: 5px; }
.specification-draft-banner { background: #FFF6D9; color: #765008; border: 1px solid #F4D56A; border-radius: var(--radius); padding: 9px 12px; margin-bottom: 12px; }
.specification-handoff-note { background: #F7F4FC; color: #5E35B1; border-inline-start: 3px solid #7E57C2; padding: 10px 12px; margin: 12px 0 18px; border-radius: 4px; }
.form-hint { display: block; color: var(--text-muted); font-size: 11px; line-height: 1.5; margin-top: 5px; }
.specification-details { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 14px 14px; margin: 18px 0; background: #FAFBFC; }
.specification-details summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 13px 0; color: var(--navy); }
.specification-details summary::marker { display: none; }
.specification-details[open] .details-toggle { transform: rotate(45deg); }
.details-toggle { color: var(--primary-dark); font-size: 20px; transition: transform .15s; }
.requirement-row { display: grid; grid-template-columns: 34px minmax(150px, 1fr) minmax(200px, 1.4fr) 130px 106px; gap: 8px; align-items: end; background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin: 10px 0; }
.requirement-row .form-group { margin: 0; }
.requirement-order { align-self: center; text-align: center; }
.requirement-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-light); color: var(--primary-dark); font-weight: 700; font-size: 11px; }
.requirement-actions { display: flex; gap: 4px; align-items: center; padding-bottom: 1px; }
.btn-icon { padding: 7px 9px; min-width: 30px; background: white; color: var(--text-muted); border: 1px solid var(--border); }
.btn-icon:hover { background: var(--bg); color: var(--navy); }
.btn-remove { color: var(--danger); }
.specification-requirements-table { margin-top: 8px; background: white; }
.specification-upload-section { border: 1px dashed #A99AC1; border-radius: var(--radius); padding: 14px; background: #FBF9FE; margin: 18px 0; }
.specification-upload-section > label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.specification-upload-section input[type="file"] { width: 100%; margin-top: 10px; font: inherit; font-size: 12px; }
.saved-specification-files { margin-top: 12px; }
.saved-specification-files > strong { font-size: 12px; color: var(--text); }
.saved-specification-files .attach-item > span { display: flex; align-items: center; gap: 8px; }
.selected-file-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.danger-link { color: var(--danger); }
.specification-form-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.owner-assignment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.owner-assignment-card { margin: 0; }
.owner-assignment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.owner-assignment-heading h3 { margin: 0 0 2px; }
.current-owner { display: flex; flex-direction: column; padding: 10px 12px; margin-bottom: 12px; background: #F7F9FB; border-radius: var(--radius); }
.current-owner small { color: var(--text-muted); margin-top: 3px; }
.department-create-card { margin-bottom: 20px; }
.department-create-card h2 { margin: 0 0 4px; }
.department-create-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
.department-create-form .form-group { margin: 0; }
.department-create-form .btn { white-space: nowrap; }

/* ============ ITEMS TABLE ============ */
.items-section-help { margin: 0 0 14px; padding: 10px 12px; border-inline-start: 4px solid var(--sos-blue); border-radius: var(--radius-md); background: var(--sos-blue-light); color: #355C6D; font-size: 12px; line-height: 1.65; }
.sos-form-card .table-scroll { overflow: visible; }
.sos-items-table { display: block; width: 100%; border-collapse: separate; font-size: 13px; }
.sos-items-table thead { display: none; }
.sos-items-table tbody { display: grid; gap: 14px; }
.sos-items-table .item-row {
  position: relative; display: grid;
  grid-template-columns: 44px minmax(170px, .9fr) minmax(300px, 1.6fr) 100px 90px 110px 110px 38px;
  gap: 10px; align-items: start; padding: 16px;
  border: 1px solid #D7E5EB; border-radius: var(--radius-lg); background: white;
  box-shadow: 0 2px 8px rgba(31,56,100,.05);
}
.sos-items-table td { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 0; border: 0; background: transparent !important; }
.sos-items-table td[data-label]::before { content: attr(data-label); color: #526B78; font-size: 10px; font-weight: 700; line-height: 1.4; }
.sos-items-table input { width: 100%; min-height: 42px; border: 1px solid #CAD9E0; padding: 9px 10px; border-radius: 7px; font-size: 12px; font-family: inherit; background: white; }
.sos-items-table input:hover { border-color: #9EB8C3; }
.sos-items-table input:focus { border-color: var(--blue); background: white; outline: none; box-shadow: 0 0 0 3px rgba(0,158,224,.12); }
.sos-items-table .item-name { text-align: start; }
[dir="rtl"] .sos-items-table .item-name { direction: rtl; text-align: start; }
.sos-items-table .item-name-cell { min-width: 0; }
.sos-items-table .col-num { width: auto; align-items: center; text-align: center; color: var(--text-muted); font-size: 11px; }
.item-row-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sos-blue-light); color: var(--sos-blue-dark); font-weight: 800; }
.col-unit { width: 80px; }
.col-qty { width: 80px; }
.col-price { width: 100px; }
.col-total { width: 100px; }
.col-del { width: 30px; }
.item-total-cell { justify-content: flex-start; min-height: 42px; font-weight: 700; color: var(--blue); }
.item-total-cell bdi { display: flex; align-items: center; min-height: 42px; padding: 9px 10px; border-radius: 7px; background: #F2F8FB; font-variant-numeric: tabular-nums; }
.sos-items-table .col-catalog, .catalog-cell { min-width: 0; vertical-align: top; }
.catalog-picker { display: grid; gap: 8px; position: relative; min-width: 0; }
.catalog-picker select, .catalog-picker input, .catalog-picker textarea { width: 100%; min-height: 42px; background: white; border: 1px solid #CAD9E0; border-radius: 7px; }
.catalog-picker select { padding: 8px 10px; font: inherit; font-size: 11px; }
.catalog-combobox { position: relative; }
.catalog-results {
  position: absolute; z-index: 30; inset-block-start: calc(100% + 3px); inset-inline: 0;
  max-height: 260px; overflow-y: auto; background: white; border: 1px solid #9CCFE3;
  border-radius: 8px; box-shadow: 0 12px 28px rgba(0,55,80,.16);
}
.catalog-result { display: grid; gap: 2px; width: 100%; padding: 9px 11px; border: 0; border-bottom: 1px solid #E8EFF2; background: white; text-align: start; cursor: pointer; font: inherit; }
.catalog-result:hover, .catalog-result:focus, .catalog-result.is-active { background: #EAF7FC; outline: 2px solid #009EE0; outline-offset: -2px; }
.catalog-result strong { color: #183E4D; font-size: 12px; }
.catalog-result span { color: #6E8791; font-size: 10px; direction: ltr; unicode-bidi: isolate; }
.catalog-result-message { padding: 12px; color: var(--text-muted); font-size: 11px; text-align: center; }
.catalog-custom-toggle { display: flex; align-items: center; gap: 6px; color: #576F79; font-size: 10px; font-weight: 700; cursor: pointer; }
.catalog-custom-toggle input { width: 14px; height: 14px; accent-color: var(--blue); }
.catalog-spec-fields { display: grid; gap: 6px; padding: 8px; background: #F4FAFC; border: 1px solid #DCECF2; border-radius: 7px; }
.catalog-spec-fields label { color: #526D78; font-size: 9.5px; font-weight: 700; }
.catalog-spec-fields textarea { display: block; margin-top: 3px; padding: 7px; resize: vertical; font-family: inherit; font-size: 10px; line-height: 1.5; }
.catalog-spec { direction: rtl; background: #F8FBFC !important; color: #344E58; }
.catalog-view-code { margin-top: 4px; color: #007EBA; font-size: 10px; font-weight: 700; }
.catalog-review-badge { display: inline-block; margin-top: 5px; padding: 3px 7px; border-radius: 12px; background: #FFF2D8; color: #A36500; font-size: 9px; font-weight: 700; }
.catalog-view-spec { margin-top: 7px; font-size: 11px; }
.catalog-view-spec summary { color: #007EBA; font-weight: 700; cursor: pointer; }
.catalog-view-spec div { margin-top: 5px; padding: 8px; border-radius: 6px; background: #F4FAFC; color: #3B555F; white-space: pre-wrap; line-height: 1.6; }
.catalog-view-additional { margin-top: 6px; padding: 7px; border-inline-start: 3px solid #5FD47C; background: #F1FBF3; font-size: 11px; white-space: pre-wrap; }
.catalog-view-additional span { display: block; color: #328249; font-size: 9px; font-weight: 800; }
.item-remove-cell { align-items: center; padding-top: 22px !important; }
.sos-items-table tfoot { display: block; margin-top: 14px; }
.sos-items-table tfoot tr { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--sos-navy); color: white; }
.sos-items-table tfoot td { display: block; color: inherit; }
.sos-items-table .total-row td { padding: 0; background: transparent !important; color: white; }
.sos-items-table .total-label { font-size: 12px; font-weight: 600; }
.sos-items-table .total-value { min-width: 120px; color: white; font-size: 18px; font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.items-add-button { margin-top: 14px; border-style: dashed; color: var(--sos-blue-dark); }
.items-add-button span { font-size: 17px; vertical-align: -1px; }

/* Admin catalogue */
.catalog-admin-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.catalog-admin-header p { margin: 5px 0 0; color: var(--text-muted); }
.catalog-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.catalog-admin-stats > div { padding: 16px; border: 1px solid #DCE8ED; border-radius: 10px; background: white; box-shadow: 0 2px 8px rgba(20,60,75,.04); }
.catalog-admin-stats span { display: block; color: #607985; font-size: 11px; font-weight: 700; }
.catalog-admin-stats strong { display: block; margin-top: 5px; color: #123F51; font-size: 25px; }
.catalog-admin-stats .is-flagged { border-color: #F2CE86; background: #FFFBF2; }
.catalog-admin-filters { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(180px, 1fr) minmax(150px, .8fr) auto auto; align-items: end; gap: 10px; margin-bottom: 18px; padding: 14px; border: 1px solid #DCE8ED; border-radius: 10px; background: white; }
.catalog-admin-filters .form-group { margin: 0; }
.catalog-admin-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(350px, .85fr); gap: 20px; align-items: start; }
.catalog-admin-list, .catalog-admin-editor { min-width: 0; }
.catalog-list-heading, .catalog-editor-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.catalog-list-heading h2, .catalog-editor-heading h2 { margin: 0; font-size: 18px; }
.catalog-list-heading span { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.catalog-editor-heading a { color: #68818B; font-size: 26px; line-height: 1; text-decoration: none; }
.catalog-admin-card { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; padding: 15px; border: 1px solid #DCE8ED; border-radius: 10px; background: white; box-shadow: 0 2px 7px rgba(20,60,75,.035); }
.catalog-admin-card.is-inactive { opacity: .72; background: #F6F8F9; }
.catalog-admin-card-main { min-width: 0; flex: 1; }
.catalog-card-topline { display: flex; align-items: center; gap: 9px; }
.catalog-card-topline code { color: #007EBA; font-weight: 800; direction: ltr; }
.catalog-admin-card h3 { margin: 7px 0 2px; color: #173F50; font-size: 15px; }
.catalog-name-en { margin: 0; color: #708690; font-size: 11px; }
.catalog-admin-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.catalog-admin-meta span { padding: 3px 7px; border-radius: 20px; background: #EDF7FA; color: #46707F; font-size: 9px; font-weight: 700; }
.catalog-admin-card details { margin-top: 9px; }
.catalog-admin-card details summary { color: #007EBA; cursor: pointer; font-size: 10px; font-weight: 800; }
.catalog-admin-card details p { max-height: 170px; overflow: auto; margin: 6px 0 0; padding: 9px; border-radius: 6px; background: #F5FAFC; color: #435E68; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.catalog-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.catalog-flags span { padding: 4px 7px; border: 1px solid #F0CF8F; border-radius: 5px; background: #FFF8E9; color: #9A6500; font-size: 9px; }
.catalog-admin-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.catalog-admin-actions form, .catalog-admin-actions button { width: 100%; }
.catalog-admin-editor { position: sticky; top: 16px; }
.catalog-admin-editor .form-card { max-height: calc(100vh - 120px); overflow-y: auto; }
.catalog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.catalog-admin-editor textarea { resize: vertical; }

@media (max-width: 1050px) {
  .catalog-admin-layout { grid-template-columns: 1fr; }
  .catalog-admin-editor { position: static; }
  .catalog-admin-editor .form-card { max-height: none; }
  .catalog-admin-filters { grid-template-columns: 2fr 1fr 1fr; }
}
@media (max-width: 700px) {
  .catalog-admin-header { align-items: flex-start; }
  .catalog-admin-stats { grid-template-columns: 1fr 1fr; }
  .catalog-admin-filters { grid-template-columns: 1fr 1fr; }
  .catalog-admin-filters .form-group:first-child { grid-column: 1 / -1; }
  .catalog-admin-card { flex-direction: column; }
  .catalog-admin-actions { flex-direction: row; }
  .catalog-form-grid { grid-template-columns: 1fr; }
}
.total-row td { background: var(--blue-light) !important; }
.total-label { text-align: end; font-weight: 700; color: var(--blue); padding: 10px 8px; }
.total-value { font-weight: 700; color: var(--blue); font-size: 15px; padding: 10px 8px; }
.view-table td { padding: 8px 10px; }

/* ============ SIGNATURES ============ */
.sig-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 20px; }
.sig-block { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sig-block-title { background: #E8EAF6; color: #3949AB; padding: 8px 12px; font-weight: 600; font-size: 12px; }
.sig-field { padding: 6px 12px; font-size: 12px; color: var(--text-muted); }
.sig-field span { font-weight: 600; color: var(--text); }
.sig-stamp { padding: 6px 12px; font-weight: 700; font-size: 12px; }
.sig-done .sig-stamp { color: var(--green); }
.sig-rejected .sig-stamp { color: var(--red); }
.sig-pending { opacity: 0.6; }
.sig-auto { color: var(--green); font-style: italic; padding: 6px 12px; font-size: 12px; }
.sig-pending-msg { padding: 12px; color: var(--text-muted); font-size: 12px; font-style: italic; }
.sig-comment { background: var(--orange-light); padding: 6px 12px; font-size: 11px; color: var(--orange); }
.approval-checkboxes { padding: 6px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.approval-checkboxes .checked { font-weight: 700; color: var(--green); }
.approval-status { padding: 6px 12px; font-size: 12px; }

/* ============ BUDGET INFO ============ */
.budget-info { font-size: 12px; margin-top: 4px; padding: 4px 8px; border-radius: 4px; }
.budget-info.ok { background: var(--green-light); color: var(--green); }
.budget-info.warn { background: var(--red-light); color: var(--red); }

.budget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.budget-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 14px; }
.budget-code { font-size: 11px; font-weight: 700; color: var(--text-muted); font-family: monospace; }
.budget-name { font-weight: 600; margin: 4px 0 8px; font-size: 13px; }
.budget-bar-wrap { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.budget-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
.budget-bar.ok { background: var(--green); }
.budget-bar.warn { background: #FFA000; }
.budget-bar.danger { background: var(--red); }
.budget-nums { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 6px; }

.mini-bar { display: inline-block; width: 60px; height: 6px; background: var(--bg); border-radius: 3px; vertical-align: middle; overflow: hidden; }
.mini-bar-fill { height: 100%; }
.mini-bar-fill.ok { background: var(--green); }
.mini-bar-fill.warn { background: #FFA000; }
.mini-bar-fill.danger { background: var(--red); }

/* ============ LOCATION GRID ============ */
.location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.location-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 14px; }
.loc-name { font-weight: 700; margin-bottom: 8px; }
.loc-stats { display: flex; flex-direction: column; gap: 4px; }
.loc-stat { font-size: 12px; padding: 2px 0; }
.loc-stat.active { color: var(--orange); }
.loc-stat.done { color: var(--green); }

/* ============ TIMELINE ============ */
.sidebar-card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.sidebar-card h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.timeline { position: relative; }
.tl-item { display: flex; gap: 12px; margin-bottom: 16px; position: relative; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); background: white; flex-shrink: 0; margin-top: 3px; }
.tl-item.done .tl-dot { border-color: var(--green); background: var(--green); }
.tl-item.rejected .tl-dot { border-color: var(--red); background: var(--red); }
.tl-item.pending .tl-dot { border-color: var(--text-muted); }
.tl-content { font-size: 12px; }
.tl-comment { margin-top: 4px; background: var(--orange-light); padding: 4px 8px; border-radius: 4px; font-size: 11px; color: var(--orange); }

/* ============ ATTACHMENTS ============ */
.attach-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px; text-align: center; background: var(--bg); margin: 12px 20px 20px; transition: all 0.15s; }
.attach-zone:hover { border-color: var(--blue); background: var(--blue-light); }
.attach-label { cursor: pointer; color: var(--text-muted); display: block; }
.attach-label small { color: var(--text-muted); font-size: 11px; }
.attach-zone input[type="file"] { display: none; }
.file-list { margin-top: 12px; text-align: start; }
.file-item { padding: 4px 0; font-size: 12px; color: var(--text-muted); }
.attach-item { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.attach-item a { color: var(--blue); text-decoration: none; }
.attach-item a:hover { text-decoration: underline; }

/* ============ APPROVAL ACTION CARD ============ */
.action-card { background: white; border-radius: var(--radius-lg); border: 2px solid var(--blue); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-md); }
.action-card h3 { font-size: 16px; font-weight: 700; color: var(--blue); margin-bottom: 16px; }
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ============ PROCUREMENT CARD ============ */
.procurement-card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow); }
.procurement-card h3 { font-weight: 700; margin-bottom: 16px; color: var(--text); }
.proc-status-bar { display: flex; gap: 4px; margin-bottom: 20px; }
.proc-step { flex: 1; text-align: center; padding: 8px 4px; background: var(--bg); border-radius: var(--radius); font-size: 11px; font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); }
.proc-step.done { background: var(--green-light); color: var(--green); border-color: #A5D6A7; font-weight: 600; }
.proc-step.active { background: #1565C0; color: #fff; border-color: #1565C0; font-weight: 700; }
.proc-step.next { background: #FFF9C4; color: #7B5800; border-color: #F9A825; font-weight: 600; }
.sub-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sub-section h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.coi-form { }
.coi-box { background: var(--orange-light); border: 1px solid #FFCC80; border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.coi-box h4 { font-size: 13px; font-weight: 700; color: var(--orange); margin-bottom: 12px; }
.coi-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.coi-label input { margin-top: 2px; }
.score-form-row { background: var(--blue-light) !important; }
.inline-score-form { padding: 12px; }

/* ============ FORM ELEMENTS ============ */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea, .form-textarea, .form-select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; font-family: inherit; color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,101,192,0.1); }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 150px; }
.form-textarea { min-height: 80px; resize: vertical; }
.form-card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 20px; }
.budget-actions-cell { min-inline-size: 170px; }
.budget-edit-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border-color: #BFD9E2;
  color: #17647E;
  background: #F3FAFC;
}
.budget-edit-trigger:hover { border-color: #009EE0; color: #00699A; background: #E5F5FB; }
.budget-edit-dialog {
  inline-size: min(560px, calc(100vw - 32px));
  max-block-size: min(760px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(24, 59, 88, .24);
}
.budget-edit-dialog::backdrop { background: rgba(24, 59, 88, .52); backdrop-filter: blur(2px); }
.budget-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 18px;
  background: linear-gradient(135deg, #F1FAFD, #fff);
  border-block-end: 1px solid #E2EEF2;
}
.budget-dialog-kicker {
  display: block;
  margin-block-end: 5px;
  color: #168BB3;
  font-size: 11px;
  font-weight: 700;
}
.budget-dialog-header h2 { margin: 0; color: #183B58; font-size: 21px; }
.budget-dialog-close {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid #D6E5E9;
  border-radius: 50%;
  color: #648091;
  background: #fff;
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}
.budget-dialog-close:hover { color: #E74361; border-color: #E74361; background: #FFF5F7; }
.budget-dialog-help { margin: 18px 26px 0; color: #648091; font-size: 12px; line-height: 1.7; }
.budget-edit-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 26px 0;
}
.budget-edit-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #DCE9ED;
  border-radius: 10px;
  background: #F7FAFC;
}
.budget-edit-summary span { color: #648091; font-size: 11px; }
.budget-edit-summary strong { color: #183B58; font-family: var(--font-en); font-size: 14px; direction: ltr; }
.budget-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 20px 26px 26px;
  text-align: start;
}
.budget-edit-form .form-group { margin: 0; }
.budget-edit-form label { font-size: 11px; }
.budget-edit-form input,
.budget-edit-form select { min-block-size: 34px; padding: 6px 8px; font-size: 12px; }
.budget-edit-form .form-group:nth-child(2) { grid-column: 1 / -1; }
.budget-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  grid-column: 1 / -1;
  padding-block-start: 5px;
  border-block-start: 1px solid #E2EEF2;
}
.budget-dialog-actions .btn { min-inline-size: 100px; }
@media (max-width: 600px) {
  .budget-edit-dialog { inline-size: calc(100vw - 20px); border-radius: 12px; }
  .budget-dialog-header { padding: 19px 18px 15px; }
  .budget-dialog-header h2 { font-size: 18px; }
  .budget-dialog-help { margin-inline: 18px; }
  .budget-edit-summary { margin-inline: 18px; }
  .budget-edit-form { grid-template-columns: 1fr; margin: 17px 18px 19px; }
  .budget-edit-form .form-group:nth-child(2) { grid-column: auto; }
  .budget-dialog-actions { grid-column: auto; }
  .budget-dialog-actions .btn { flex: 1; }
}
.justification-text { width: 100%; min-height: 100px; padding: 12px 16px; border: none; font-size: 13px; font-family: inherit; resize: vertical; }
.quotation-form .form-group input, .quotation-form .form-group select { width: 100%; }
.mb-2 { margin-bottom: 8px; }

/* ============ FORM ACTIONS ============ */
.form-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 0; }

/* ============ LOGIN ============ */
.login-body { background: var(--bg); min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.login-container { width: 100%; max-width: 480px; padding: 20px; }
.login-card { background: white; border-radius: 16px; padding: 36px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative; }
.login-logo-img { width: min(260px, 100%); height: auto; max-height: 76px; object-fit: contain; display: block; margin: 0 auto 12px; }
.login-header { text-align: center; margin-bottom: 28px; }
.login-logo { background: var(--blue); color: white; font-weight: 800; font-size: 24px; padding: 12px 20px; border-radius: 8px; display: inline-block; margin-bottom: 12px; }
.login-header h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.login-header p { color: var(--text-muted); font-size: 13px; }
.login-form .form-group { margin-bottom: 16px; }
.login-form .form-group label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: block; }
.login-form input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 14px; font-family: inherit; }
.login-demo { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.login-demo p { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.demo-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-account { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 11px; color: var(--blue); background: var(--blue-light); text-align: center; transition: all 0.1s; font-family: inherit; min-block-size: 44px; }
.demo-account:hover { background: var(--blue); color: white; }

/* ============ FOOTER ============ */
.footer { text-align: center; padding: 20px; color: var(--text-muted); font-size: 12px; display: flex; justify-content: center; max-width: 1400px; margin: 0 auto; border-top: 1px solid var(--border); }

/* ============ UTILITIES ============ */
.text-success { color: var(--green); }
.text-danger { color: var(--red); }
code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--blue-dark); font-family: 'Consolas', 'Monaco', monospace; }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .navbar { padding: 0 12px; }
  .brand-sub { display: none; }
  .main-content { padding: 12px; }
  .two-col, .two-col-admin { grid-template-columns: 1fr; }
  .sig-blocks { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .navbar-user .user-details { display: none; }
  .form-row { flex-direction: column; }
  .proc-status-bar { flex-wrap: wrap; }
  .sos-info-grid { grid-template-columns: 1fr 1fr; }
  .requirement-row { grid-template-columns: 34px 1fr 1fr; }
  .requirement-type { grid-column: 2 / 3; }
  .requirement-actions { grid-column: 3 / 4; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .sos-info-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  .navbar-links { display: none; }
  .requirement-row { grid-template-columns: 28px 1fr; }
  .requirement-row .form-group, .requirement-type, .requirement-actions { grid-column: 2 / 3; }
  .requirement-actions { justify-content: flex-start; }
  .specification-form-actions { flex-direction: column-reverse; }
  .specification-form-actions .btn { width: 100%; }
}
@media (max-width: 320px) {
  body { font-size: 13px; }
  .navbar { gap: 6px; height: 56px; }
  .navbar-user { gap: 6px; }
  .brand-main { font-size: 11px; }
  .language-toggle { padding: 3px 7px; }
  .login-card { padding: 24px 16px; }
}

/* ============ AI EVALUATION ============ */
.quotation-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.quotation-header-row h4 { margin: 0; }
.btn-ai { background: linear-gradient(135deg, #6B21A8, #7C3AED); color: white; border: none; padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(109,40,168,0.3); }
.btn-ai:hover { background: linear-gradient(135deg, #7C3AED, #8B5CF6); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(109,40,168,0.4); }

.ai-rec-card { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); border: 1.5px solid #C4B5FD; border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px; }
.ai-rec-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ai-badge { background: linear-gradient(135deg, #6B21A8, #7C3AED); color: white; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.ai-rec-winner { background: white; border: 1.5px solid #7C3AED; border-radius: var(--radius); padding: 10px 14px; font-size: 14px; color: #4C1D95; display: inline-block; }
.ai-rec-winner strong { color: #6B21A8; font-size: 15px; }
.ai-rec-text { font-family: 'Consolas', 'Monaco', monospace; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; background: white; border: 1px solid #DDD6FE; border-radius: var(--radius); padding: 14px; margin-top: 10px; color: #1F2937; }

.score-bar-wrap { display: flex; align-items: center; gap: 6px; }
.score-bar { height: 6px; border-radius: 3px; background: var(--blue); min-width: 4px; max-width: 60px; }
.score-bar-q { background: var(--green); }
.score-bar-d { background: var(--orange); }
.score-bar-c { background: #8B5CF6; }
.score-bar-wrap span { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }

.total-score-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-weight: 700; font-size: 13px; background: var(--bg); color: var(--text); border: 1px solid var(--border); }

/* Evaluation Sheet section */
.eval-sheet-section { background: linear-gradient(135deg, #F0FDF4, #ECFDF5); border: 1.5px solid #6EE7B7; border-radius: var(--radius-lg); padding: 18px; }
.eval-sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.eval-sheet-header h4 { margin: 0 0 4px; color: #065F46; }
.btn-excel { background: linear-gradient(135deg, #059669, #10B981); color: white; border: none; padding: 9px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; box-shadow: 0 2px 8px rgba(5,150,105,0.3); transition: all 0.2s; }
.btn-excel:hover { background: linear-gradient(135deg, #047857, #059669); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,150,105,0.4); text-decoration: none; color: white; }

.eval-sheet-workflow { display: flex; align-items: stretch; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.eval-step { flex: 1; min-width: 160px; display: flex; gap: 10px; align-items: flex-start; background: white; border: 1px solid #A7F3D0; border-radius: var(--radius); padding: 10px 12px; }
.eval-step-num { flex-shrink: 0; width: 24px; height: 24px; background: #059669; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.eval-step-text { font-size: 12px; color: #065F46; line-height: 1.5; }
.eval-step-arrow { display: flex; align-items: center; color: #6EE7B7; font-size: 20px; font-weight: 700; padding-top: 8px; }

.upload-eval-form { margin-top: 4px; }
.upload-eval-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.upload-eval-label { flex: 1; min-width: 220px; background: white; border: 2px dashed #6EE7B7; border-radius: var(--radius); padding: 10px 14px; cursor: pointer; font-size: 13px; color: #059669; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: border-color 0.2s; }
.upload-eval-label:hover { border-color: #059669; background: #F0FDF4; }
#evalUploadBtn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.manual-q-toggle { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; cursor: pointer; padding: 4px 0; user-select: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; }
.manual-q-toggle:hover h4 { color: var(--blue); }

/* ============ PO FORM ============ */
.po-form-section { background: #FAFFFE; border: 1.5px solid #90CAF9; border-radius: var(--radius-lg); padding: 18px; }
.po-form-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.po-form-header h4 { margin: 0 0 2px; color: #0D47A1; }
.po-section { background: white; border: 1px solid #BBDEFB; border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.po-section-title { font-size: 11px; font-weight: 700; color: #1565C0; border-bottom: 1px solid #BBDEFB; padding-bottom: 6px; margin-bottom: 12px; }
.po-vendor-badge { background: linear-gradient(135deg, #E8F5E9, #F1F8E9); border: 1px solid #A5D6A7; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: #1B5E20; margin-bottom: 12px; }
.po-total-display { background: #E3F2FD; border: 2px solid #1565C0; border-radius: var(--radius); padding: 8px 12px; font-weight: 700; font-size: 16px; color: #0D47A1; display: flex; align-items: center; min-height: 38px; }
.po-form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px; background: #F3F8FF; border-radius: var(--radius); margin-top: 4px; }
.po-compliance-note { font-size: 11px; color: var(--text-muted); max-width: 500px; line-height: 1.5; margin: 0; }
.req { color: var(--red); font-weight: 700; }

/* ============ PO SUMMARY ============ */
.po-summary-card { background: white; border: 2px solid #1565C0; border-radius: var(--radius-lg); padding: 0; overflow: hidden; }
.po-summary-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; background: linear-gradient(135deg, #0D47A1, #1565C0); }
.po-badge { background: white; color: #0D47A1; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-inline-end: 8px; }
.po-number-large { color: white; font-size: 20px; font-weight: 800; }
.po-summary-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.po-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #E3F2FD; border-top: 1px solid #E3F2FD; }
.po-summary-block { background: white; padding: 14px 16px; }
.po-summary-label { font-size: 10px; font-weight: 700; color: #1565C0; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid #E3F2FD; }
.po-summary-row { display: flex; justify-content: space-between; align-items: flex-start; font-size: 12px; padding: 3px 0; gap: 8px; }
.po-summary-row span:first-child { color: var(--text-muted); flex-shrink: 0; }
.po-summary-row span:last-child { text-align: end; color: var(--text); }
.po-total-row { padding-top: 6px; margin-top: 4px; border-top: 1.5px solid #1565C0; font-size: 13px; }
.po-doc-trail { padding: 14px 16px; border-top: 1px solid #E3F2FD; background: #F8FBFF; }
.po-trail-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.po-trail-item { font-size: 11.5px; padding: 4px 10px; border-radius: 20px; font-weight: 500; border: 1px solid; }
.po-trail-ok { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
.po-trail-warn { background: #FFF8E1; color: #F57F17; border-color: #FFE082; }
.po-trail-pending { background: #F5F5F5; color: #757575; border-color: #E0E0E0; }
.total-score-top { background: linear-gradient(135deg, #6B21A8, #7C3AED); color: white; border-color: transparent; }

.badge-selected { background: var(--green); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 600; }
.badge-ai-rec { background: linear-gradient(135deg, #6B21A8, #7C3AED); color: white; font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 600; }

.ai-top-row { background: #F5F3FF !important; }
.ai-top-row td { border-inline-start: 3px solid #7C3AED; }
.ai-top-row td:first-child { border-inline-start: 3px solid #7C3AED; }

/* ============ BIDI / RTL UTILITIES ============ */

/* Isolate LTR tokens (codes, numbers, emails, dates, amounts) inside Arabic text */
.ltr-inline {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Mirror directional icons / arrows in RTL (back arrows, forward chevrons, steppers) */
[dir="rtl"] .mirror-rtl {
  display: inline-block;
  transform: scaleX(-1);
}

/* ============ LANGUAGE-AWARE TYPOGRAPHY ============ */

html[lang="ar"] body {
  font-family: var(--font-ar);
  line-height: var(--leading-ar);
  letter-spacing: 0;
}

html[lang="en"] body {
  font-family: var(--font-en);
  line-height: var(--leading-normal);
}

/* Arabic glyphs inside English pages still shape correctly */
html[lang="en"] [lang="ar"],
html[lang="en"] .ar-text {
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* Suppress letter-spacing and uppercase on Arabic-visible elements */
html[lang="ar"] .data-table th,
html[lang="ar"] .status-badge,
html[lang="ar"] .urgency-badge,
html[lang="ar"] .sos-field label,
html[lang="ar"] .sos-view-grid label,
html[lang="ar"] .po-section-title,
html[lang="ar"] .po-summary-label { letter-spacing: 0; text-transform: none; }

/* LTR-lock data entry fields — numbers, dates, emails always read LTR */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] { direction: ltr; text-align: end; }

/* Numeric / currency table cells — align to end in both directions */
.col-amount, .col-currency, .amount-cell { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Select elements in RTL */
[dir="rtl"] select { text-align: start; }

/* ── Supplier Registry ─────────────────────────────────────── */
.supplier-pending-screening      { background: #FFF3E0; color: #E65100; }
.supplier-active                 { background: var(--green-light); color: var(--green); }
.supplier-qualification-required { background: var(--blue-light); color: var(--blue); }
.supplier-qualification-expired  { background: #FFF3E0; color: #E65100; }
.supplier-on-hold                { background: var(--red-light); color: var(--red); }
.supplier-inactive               { background: var(--gray-light); color: var(--gray); }

.category-tag         { display: inline-block; background: var(--blue-light); color: var(--blue); border-radius: 20px; padding: 2px 8px; font-size: 11px; font-weight: 600; margin: 2px; }
.qualification-tag    { background: #F3E5F5; color: #6A1B9A; }

.form-section-title   { font-size: 12px; font-weight: 700; color: var(--text-muted); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin: 20px 0 12px; }
.form-section-title:first-of-type { margin-top: 0; }

.toggle-wrap          { display: flex; align-items: center; gap: 10px; }
.toggle-wrap input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

.masked-field         { font-family: monospace; letter-spacing: 2px; color: var(--text-muted); }
.reveal-btn           { background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 8px; font-size: 11px; cursor: pointer; color: var(--blue); margin-inline-start: 6px; }
.reveal-btn:hover     { background: var(--blue-light); }

.warning-banner       { background: #FFF8E1; border: 1px solid #FFE082; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: #E65100; margin-bottom: 12px; }
.info-banner          { background: var(--blue-light); border: 1px solid #BBDEFB; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: var(--blue); margin-bottom: 12px; }

.detail-grid          { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 8px; }
.detail-field label   { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.detail-field .val    { font-size: 14px; color: var(--text); }

.star-rating          { display: inline-flex; gap: 1px; font-size: 15px; color: #F9A825; }
.star-rating .empty   { color: var(--border); }

.supplier-detail-header ~ .two-col .action-card { border-width: 1px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.action-card h4       { margin: 0 0 10px; font-size: 13px; }

.proposal-banner      { background: #FFF3E0; border: 1px solid #FFB74D; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.proposal-banner strong { color: #E65100; }

.audit-mini           { font-size: 12px; color: var(--text-muted); border-collapse: collapse; }
.audit-mini td        { padding: 4px 0; vertical-align: top; }

.supplier-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

.bank-verified        { color: var(--green); font-size: 12px; font-weight: 600; }
.bank-unverified      { color: var(--orange); font-size: 12px; font-weight: 600; }

/* Professional supplier database */
.supplier-registry { display: grid; gap: 20px; }
.supplier-page-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; padding: 28px 30px;
  border-radius: 18px; background: linear-gradient(125deg, #073E5B 0%, #006C9C 58%, #009EE0 100%);
  color: white; box-shadow: 0 14px 34px rgba(0, 79, 116, .18);
}
.supplier-page-hero::after {
  content: ""; position: absolute; inline-size: 220px; block-size: 220px;
  inset-block-start: -120px; inset-inline-end: -60px; border: 34px solid rgba(255,255,255,.08);
  border-radius: 50%; pointer-events: none;
}
.supplier-hero-copy, .supplier-hero-actions { position: relative; z-index: 1; }
.supplier-eyebrow {
  display: block; margin-block-end: 4px; color: #72D8F6; font-size: 11px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.supplier-hero-copy h1 { margin: 0; color: white; font-size: clamp(24px, 3vw, 34px); }
.supplier-hero-copy p { margin: 7px 0 0; color: rgba(255,255,255,.78); font-size: 13px; }
.supplier-hero-actions { display: flex; align-items: center; gap: 14px; }
.supplier-record-count {
  display: flex; flex-direction: column; min-inline-size: 92px; padding-inline-end: 14px;
  border-inline-end: 1px solid rgba(255,255,255,.24);
}
.supplier-record-count strong { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.supplier-record-count span { color: rgba(255,255,255,.74); font-size: 11px; }
.supplier-page-hero .btn-primary { background: white; color: #006C9C; border-color: white; box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.supplier-page-hero .btn-primary:hover { background: #EAF9FE; border-color: #EAF9FE; color: #004F74; }

.supplier-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.supplier-stat-card {
  display: flex; align-items: center; gap: 13px; min-inline-size: 0; padding: 16px;
  background: white; border: 1px solid #DCE9EE; border-radius: 13px; box-shadow: 0 4px 14px rgba(0,52,74,.05);
}
.supplier-stat-icon {
  display: grid; place-items: center; flex: 0 0 40px; inline-size: 40px; block-size: 40px;
  border-radius: 11px; font-size: 19px; font-weight: 800;
}
.supplier-stat-card div { display: grid; min-inline-size: 0; }
.supplier-stat-card strong { font-size: 22px; line-height: 1.1; color: #123747; font-variant-numeric: tabular-nums; }
.supplier-stat-card span:not(.supplier-stat-icon) { font-size: 12px; font-weight: 700; color: #34515E; }
.supplier-stat-card small { overflow: hidden; color: #77909B; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-stat-total .supplier-stat-icon { background: #E5F5FB; color: #007EBA; }
.supplier-stat-active .supplier-stat-icon { background: #EAF8ED; color: #248C47; }
.supplier-stat-screening .supplier-stat-icon { background: #FFF6E2; color: #B87500; }
.supplier-stat-attention .supplier-stat-icon { background: #FDECEF; color: #C52F4B; }

.supplier-filter-panel {
  overflow: hidden; background: white; border: 1px solid #DCE9EE; border-radius: 14px;
  box-shadow: 0 5px 18px rgba(0,52,74,.055);
}
.supplier-filter-heading {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  background: #F5FAFC; border-block-end: 1px solid #E2EDF1;
}
.supplier-filter-icon {
  display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 8px;
  background: #E2F5FC; color: #007FB8; font-size: 18px;
}
.supplier-filter-heading div { display: grid; }
.supplier-filter-heading strong { color: #173D4D; font-size: 13px; }
.supplier-filter-heading small { color: #7B919A; font-size: 10px; }
.supplier-filter-fields {
  display: grid; grid-template-columns: minmax(230px, 2fr) repeat(2, minmax(150px, 1fr)) auto auto;
  align-items: end; gap: 12px; padding: 16px 18px 18px;
}
.supplier-filter-fields .form-group { margin: 0; }
.supplier-filter-fields label { margin-block-end: 5px; color: #5C747E; font-size: 10px; font-weight: 800; }
.supplier-local-toggle {
  display: flex; align-items: center; gap: 8px; min-block-size: 38px; margin: 0 !important;
  padding: 8px 11px; border: 1px solid #DCE7EB; border-radius: 8px; background: #FAFCFD;
  color: #36535F !important; font-size: 12px !important; cursor: pointer;
}
.supplier-local-toggle input { inline-size: 16px; block-size: 16px; accent-color: #009EE0; }
.supplier-filter-actions { display: flex; gap: 7px; }

.supplier-list-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-inline: 2px; }
.supplier-list-toolbar h2 { margin: 0; color: #153B4A; font-size: 18px; }
.supplier-list-toolbar .supplier-eyebrow { color: #0088C3; }
.supplier-list-count { padding: 6px 10px; border-radius: 20px; background: #E9F6FB; color: #0877A5; font-size: 11px; font-weight: 700; }

.supplier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.supplier-card {
  display: flex; flex-direction: column; min-inline-size: 0; padding: 18px 18px 0;
  background: white; border: 1px solid #DCE8ED; border-radius: 15px;
  box-shadow: 0 5px 18px rgba(0,52,74,.055); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.supplier-card:hover { transform: translateY(-2px); border-color: #9FD8ED; box-shadow: 0 11px 26px rgba(0,74,105,.11); }
.supplier-card-danger { border-color: #F2BCC6; }
.supplier-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.supplier-identity { display: flex; align-items: center; gap: 11px; min-inline-size: 0; }
.supplier-avatar {
  display: grid; place-items: center; flex: 0 0 42px; inline-size: 42px; block-size: 42px;
  border-radius: 12px; background: linear-gradient(145deg, #DDF3FB, #B9E7F7); color: #006D9D;
  font-size: 18px; font-weight: 800;
}
.supplier-identity div { min-inline-size: 0; }
.supplier-identity h3 { overflow: hidden; margin: 0; color: #143847; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-identity p { overflow: hidden; margin: 2px 0 0; color: #7A919A; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-card-top .supplier-status { flex-shrink: 0; padding: 4px 9px; border-radius: 20px; font-size: 10px; }
.supplier-card-flags { display: flex; flex-wrap: wrap; gap: 5px; min-block-size: 21px; margin-block: 11px 13px; }
.supplier-flag { padding: 3px 7px; border-radius: 5px; font-size: 9.5px; font-weight: 700; }
.supplier-flag-local { background: #EAF8ED; color: #257E42; }
.supplier-flag-qualification { background: #F3EBFA; color: #75429B; }
.supplier-flag-pending { background: #FFF4DE; color: #9A6700; }
.supplier-card-details {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  overflow: hidden; background: #E4EDF1; border: 1px solid #E4EDF1; border-radius: 9px;
}
.supplier-card-details > div { display: grid; gap: 2px; min-inline-size: 0; padding: 9px 11px; background: #FAFCFD; }
.supplier-card-details span, .supplier-card-label { color: #78909A; font-size: 9.5px; font-weight: 700; }
.supplier-card-details strong { overflow: hidden; color: #294956; font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.supplier-card-section { margin-block-start: 13px; }
.supplier-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-block-start: 6px; }
.supplier-tag { padding: 4px 8px; border-radius: 15px; background: #E8F6FB; color: #087AA9; font-size: 9.5px; font-weight: 700; }
.supplier-tags-more { align-self: center; color: #6F8892; font-size: 10px; }
.supplier-card-sites { display: grid; gap: 3px; margin-block: 12px; }
.supplier-sites-value { overflow: hidden; color: #365561; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-inline: -18px; margin-block-start: auto; padding: 11px 18px;
  border-block-start: 1px solid #E5EDF0; background: #FBFDFD; border-radius: 0 0 15px 15px;
}
.supplier-rating { display: flex; align-items: center; gap: 5px; color: #516B76; font-size: 10px; }
.supplier-card-footer .star-rating { font-size: 12px; }
.supplier-view-link { display: inline-flex; align-items: center; gap: 6px; color: #007EBA; font-size: 11px; font-weight: 800; text-decoration: none; }
.supplier-view-link:hover { color: #005A85; text-decoration: none; }
.supplier-empty-state { display: grid; place-items: center; min-block-size: 260px; padding: 40px; border: 1px dashed #BBD4DE; border-radius: 15px; background: #F8FCFD; text-align: center; }
.supplier-empty-state > span { font-size: 38px; color: #8DCADF; }
.supplier-empty-state strong { margin-block-start: 8px; color: #214654; }
.supplier-empty-state p { margin: 4px 0 0; color: #78909A; font-size: 12px; }
.supplier-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px;
  background: white; border: 1px solid #DFEAEE; border-radius: 12px; color: #6E8790; font-size: 11px;
}
.supplier-pagination div { display: flex; gap: 7px; }

/* Supplier profile */
.supplier-detail-shell { display: grid; gap: 16px; }
.supplier-detail-shell .supplier-detail-header {
  position: relative; overflow: hidden; margin: 0; padding: 25px 27px;
  border-radius: 17px; background: linear-gradient(125deg, #073E5B, #0077AA); color: white;
  box-shadow: 0 12px 28px rgba(0,61,89,.16);
}
.supplier-detail-shell .supplier-detail-header::after {
  content: ""; position: absolute; inline-size: 180px; block-size: 180px; inset-block-start: -105px;
  inset-inline-end: -45px; border: 27px solid rgba(255,255,255,.08); border-radius: 50%;
}
.supplier-detail-shell .supplier-detail-header > div { position: relative; z-index: 1; }
.supplier-detail-shell .supplier-detail-header h1 { color: white; font-size: 25px; }
.supplier-detail-shell .supplier-detail-header .text-muted { color: rgba(255,255,255,.7); }
.supplier-detail-shell .supplier-detail-header code { background: rgba(255,255,255,.12); color: white !important; }
.supplier-detail-shell > .two-col { align-items: start; gap: 16px; }
.supplier-detail-shell .form-card {
  overflow: hidden; margin-block-end: 14px !important; padding: 0; border: 1px solid #DCE8ED;
  border-radius: 14px; box-shadow: 0 5px 18px rgba(0,52,74,.055);
}
.supplier-detail-shell .form-section-title {
  margin: 0 !important; padding: 13px 17px; border-block-end: 1px solid #E0EAEE;
  background: #F5FAFC; color: #1F4A5B; font-size: 12px;
}
.supplier-detail-shell .form-card > .detail-grid,
.supplier-detail-shell .form-card > .detail-field,
.supplier-detail-shell .form-card > .warning-banner,
.supplier-detail-shell .form-card > .info-banner { margin-inline: 17px; }
.supplier-detail-shell .form-card > .detail-grid { margin-block: 16px; }
.supplier-detail-shell .form-card > .detail-field { margin-block: 14px !important; }
.supplier-detail-shell .form-card > .warning-banner,
.supplier-detail-shell .form-card > .info-banner { margin-block-start: 14px; margin-block-end: 0 !important; }
.supplier-detail-shell .detail-field { padding: 8px 10px; border-radius: 8px; background: #FAFCFD; }
.supplier-detail-shell .detail-field label { color: #718892; font-size: 10px; }
.supplier-detail-shell .detail-field .val { color: #203F4C; font-size: 13px; font-weight: 600; }
.supplier-detail-shell .action-card {
  overflow: hidden; margin-block-end: 13px !important; padding: 15px !important;
  border: 1px solid #DCE8ED !important; border-radius: 13px; background: white;
  box-shadow: 0 5px 18px rgba(0,52,74,.055) !important;
}
.supplier-detail-shell .action-card h4 { padding-block-end: 9px; border-block-end: 1px solid #E8EFF2; color: #244B5A; }
.supplier-detail-shell .audit-mini code { overflow-wrap: anywhere; }

html[lang="ar"] .form-section-title,
html[lang="ar"] .detail-field label,
html[lang="ar"] .supplier-eyebrow { letter-spacing: 0; text-transform: none; }

@media (max-width: 1050px) {
  .supplier-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-filter-fields { grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(140px, 1fr)); }
  .supplier-local-toggle, .supplier-filter-actions { align-self: end; }
}
@media (max-width: 780px) {
  .supplier-page-hero { align-items: flex-start; padding: 23px; }
  .supplier-hero-actions { flex-direction: column; align-items: stretch; }
  .supplier-record-count { flex-direction: row; align-items: baseline; gap: 6px; padding: 0; border: 0; }
  .supplier-record-count strong { font-size: 20px; }
  .supplier-filter-fields { grid-template-columns: 1fr 1fr; }
  .supplier-filter-search { grid-column: 1 / -1; }
  .supplier-grid { grid-template-columns: 1fr; }
  .supplier-detail-shell > .two-col { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .supplier-page-hero { flex-direction: column; }
  .supplier-hero-actions { inline-size: 100%; }
  .supplier-stat-grid, .supplier-filter-fields, .supplier-card-details { grid-template-columns: 1fr; }
  .supplier-filter-actions .btn { flex: 1; }
  .supplier-list-toolbar { align-items: flex-start; }
  .supplier-detail-shell .supplier-detail-header { padding: 21px 18px; }
  .supplier-detail-shell .detail-grid { grid-template-columns: 1fr; }
  .supplier-detail-shell .detail-field[style*="grid-column"] { grid-column: auto !important; }
}

/* ── Supplier form section cards ───────────────────────────── */
.sup-section-head  { display:flex; align-items:center; gap:10px; padding:12px 20px; background:var(--bg); border-bottom:1px solid var(--border); }
.sup-section-icon  { font-size:16px; line-height:1; }
.sup-section-title { font-size:13px; font-weight:700; color:var(--text); }
.sup-section-body  { padding:20px; }

/* Field hint text */
.field-hint { display:block; font-size:11px; color:var(--text-muted); margin-top:3px; }

/* Toggle row (checkbox + label side-by-side) */
.sup-toggle-row   { display:flex; align-items:flex-start; gap:10px; padding:10px 0 4px; }
.sup-toggle-row input[type="checkbox"] { width:16px; height:16px; margin-top:3px; flex-shrink:0; accent-color:var(--blue); cursor:pointer; }
.sup-toggle-label { cursor:pointer; font-size:13px; color:var(--text); line-height:1.5; }

/* Category checkbox grid */
.cat-check-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.cat-check-card {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg); cursor:pointer; transition:all 0.12s; font-size:13px;
  position:relative;
}
.cat-check-card:hover { border-color:var(--blue); background:var(--blue-light); }
.cat-check-card.cat-check-selected { border-color:var(--blue); background:var(--blue-light); }
.cat-check-card input[type="checkbox"] { width:15px; height:15px; flex-shrink:0; accent-color:var(--blue); cursor:pointer; }
.cat-check-name { flex:1; font-weight:500; }
.cat-qual-badge { font-size:13px; line-height:1; color:var(--orange); flex-shrink:0; }
.cat-qual { border-color:#FFE082; }
.cat-qual:hover, .cat-qual.cat-check-selected { border-color:var(--orange); background:#FFF8E1; }

/* Sites served pill row */
.site-check-row  { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.site-check-pill {
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 14px; border:1px solid var(--border); border-radius:20px;
  background:var(--bg); font-size:13px; font-weight:500; transition:all 0.12s;
}
.site-check-pill:hover { border-color:var(--blue); background:var(--blue-light); color:var(--blue); }
.site-check-pill input[type="checkbox"] { width:14px; height:14px; flex-shrink:0; accent-color:var(--blue); cursor:pointer; }
.site-check-pill:has(input:checked) { border-color:var(--blue); background:var(--blue-light); color:var(--blue); }

html[lang="ar"] .sup-section-title { letter-spacing:0; }

/* ============ CANONICAL RESPONSIVE / ACCESSIBILITY LAYER ============ */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
  z-index: 1000; transform: translateY(-160%); background: var(--sos-navy);
  color: var(--color-surface); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
.nav-menu-toggle {
  display: none; inline-size: 44px; block-size: 44px; border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-md); background: transparent; color: var(--color-surface);
  font: inherit; font-size: var(--text-xl); cursor: pointer;
}
.notif-bell:hover, .notif-bell[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.notif-list { display: grid; }
.notif-item {
  display: grid; inline-size: 100%; gap: var(--space-1); padding: var(--space-3) var(--space-4);
  border: 0; border-block-end: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); text-align: start; font: inherit; cursor: pointer;
}
.notif-item:hover, .notif-item:focus-visible { background: var(--sos-blue-light); }
.notif-title { font-weight: 700; font-size: var(--text-sm); }
.notif-msg { color: var(--color-text-muted); font-size: var(--text-sm); }
.notif-empty { padding: var(--space-5); color: var(--color-text-muted); text-align: center; }
.notif-mark-all {
  inline-size: 100%; min-block-size: 44px; border: 0; background: var(--color-surface);
  color: var(--sos-blue-dark); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
}
.notif-mark-all:hover { background: var(--sos-blue-light); }
.alert-close {
  flex: 0 0 44px; inline-size: 44px; block-size: 44px; margin: calc(var(--space-2) * -1);
  border: 0; background: transparent; color: currentColor; font: inherit; font-size: var(--text-xl);
  cursor: pointer; border-radius: var(--radius-md);
}
.alert-close:hover { background: rgba(0,0,0,.06); }
.btn, .language-toggle, .reveal-btn, .site-check-pill, .cat-check-card, .attach-label {
  min-block-size: 44px;
}
.btn:focus-visible, .nav-link:focus-visible, .language-toggle:focus-visible,
.nav-menu-toggle:focus-visible, .notif-bell:focus-visible, .notif-item:focus-visible,
.notif-mark-all:focus-visible, .alert-close:focus-visible, .reveal-btn:focus-visible,
.demo-account:focus-visible, .site-check-pill:focus-within, .cat-check-card:focus-within,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 2px;
}
.sos-field input:focus-visible, .sos-field select:focus-visible,
.sos-items-table input:focus-visible, .form-group input:focus-visible,
.form-group select:focus-visible, .form-group textarea:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus);
}
.status-badge::before, .supplier-status::before { content: "●"; margin-inline-end: var(--space-1); font-size: .72em; }
.status-approved::before, .status-completed::before, .status-closed::before,
.supplier-active::before, .supplier-approved::before { content: "✓"; }
.status-rejected::before, .supplier-blacklisted::before, .supplier-inactive::before { content: "×"; }
.status-revision::before, .status-department_specification::before,
.status-supervisor_review::before, .status-operations_review::before,
.status-finance_review::before, .supplier-pending-screening::before { content: "○"; }
.status-country_director_review::before { content: "◆"; }
.status-po_issued::before { content: "▣"; }
.status-badge, .supplier-status { text-transform: none; letter-spacing: 0; }
.login-language-toggle {
  position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3);
  color: var(--sos-blue-dark); border-color: var(--color-border); background: var(--color-surface);
}
.main-content:focus { outline: none; }
html[lang="ar"] .data-table th,
html[lang="ar"] .form-section-title,
html[lang="ar"] .po-section-title,
html[lang="ar"] .po-summary-label,
html[lang="ar"] .sos-field label,
html[lang="ar"] .sos-view-grid label,
html[lang="ar"] .detail-field label {
  text-transform: none; letter-spacing: 0; text-align: start;
}
html[lang="ar"] .sos-field input[dir="auto"],
html[lang="ar"] .sos-field textarea[dir="auto"],
html[lang="ar"] .sos-view-grid p[dir="auto"] {
  direction: rtl;
  text-align: start;
}
html[lang="ar"] .sos-items-table .item-unit {
  direction: rtl;
  text-align: start;
}
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] {
  direction: ltr; unicode-bidi: isolate; text-align: end; font-variant-numeric: tabular-nums;
}

/* Breakpoints: phone < 640px, tablet 640–1023px, desktop >= 1024px. */
@media (max-width: 1023px) {
  .navbar { gap: var(--space-2); padding-inline: var(--space-3); }
  .nav-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .navbar-links {
    position: fixed; inset-block: 60px 0; inset-inline-start: 0; z-index: 300;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
    inline-size: min(320px, 88vw); margin: 0; padding: var(--space-4);
    background: var(--sos-navy); box-shadow: var(--shadow-md);
    overflow-y: auto; transform: translateX(-110%); transition: transform .2s ease;
  }
  .navbar-links[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
  .nav-open .navbar-links[aria-hidden="true"] { visibility: visible; pointer-events: auto; }
  [dir="rtl"] .navbar-links { transform: translateX(110%); }
  .nav-open .navbar-links { transform: translateX(0); }
  .navbar-links .nav-link { min-block-size: 44px; display: flex; align-items: center; }
  .nav-open::after {
    content: ""; position: fixed; inset: 60px 0 0; z-index: 250;
    background: rgba(0,0,0,.42);
  }
  .navbar, .notif-dropdown { z-index: 400; }
  .two-col, .two-col-admin { grid-template-columns: 1fr; }
  .sos-items-table .item-row {
    grid-template-columns: 40px minmax(160px, 1fr) minmax(270px, 1.5fr) 90px 80px 100px;
  }
  .sos-items-table .item-total-cell { grid-column: 5 / 7; }
  .sos-items-table .item-remove-cell { grid-column: 1; grid-row: 2; padding-top: 0 !important; }
}

@media (max-width: 767px) {
  .main-content { padding: var(--space-3); }
  .brand-sub, .navbar-user .user-details { display: none; }
  .navbar-user { gap: var(--space-1); }
  .language-toggle { min-inline-size: 44px; padding-inline: var(--space-2); }
  .page-header { align-items: stretch; }
  .page-header .header-actions, .page-header .btn { inline-size: 100%; }
  .form-row { display: grid; grid-template-columns: 1fr; }
  .department-create-form { grid-template-columns: 1fr; gap: 12px; }
  .form-actions, .specification-form-actions {
    position: sticky; inset-block-end: 0; z-index: 20; display: grid; grid-template-columns: 1fr;
    padding: var(--space-3); margin-inline: calc(var(--space-3) * -1);
    background: var(--color-surface); box-shadow: 0 -4px 12px rgba(0,0,0,.08);
  }
  .table-card { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .table-scroll { overflow: visible; }
  .sos-form-card .table-scroll { overflow: visible; }
  .sos-items-table { min-inline-size: 0; }
  .sos-items-table .item-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px; padding: 14px;
  }
  .sos-items-table .col-num { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: center; }
  .sos-items-table .col-num::before { content: attr(data-label); }
  .sos-items-table .item-name-cell, .sos-items-table .catalog-cell { grid-column: 1 / -1; }
  .sos-items-table .item-total-cell { grid-column: auto; }
  .sos-items-table .item-remove-cell { grid-column: 1 / -1; grid-row: auto; align-items: stretch; padding: 0 !important; }
  .sos-items-table .item-remove-cell .btn-del-row { width: 100%; height: 40px; font-size: 18px; }
  .sos-items-table tfoot tr { justify-content: space-between; }
  .items-add-button { width: 100%; min-height: 44px; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; inline-size: 100%; }
  .data-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .data-table tbody { display: grid; gap: var(--space-3); }
  .data-table tbody tr {
    overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); box-shadow: var(--shadow-sm);
  }
  .data-table tbody td {
    display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--space-3);
    padding: var(--space-3); border-block-end: 1px solid var(--color-border); text-align: start;
    overflow-wrap: anywhere;
  }
  .data-table tbody td::before {
    content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs);
    font-weight: 700; text-align: start;
  }
  .data-table tbody td[colspan] { display: block; text-align: center; }
  .data-table tbody td[colspan]::before { display: none; }
  .data-table tbody td:last-child { border-block-end: 0; }
  .data-table tbody td .btn { inline-size: 100%; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: var(--space-4); }
  .stat-val { font-size: var(--text-xl); }
  .footer { padding: var(--space-4); }
}

@media (max-width: 479px) {
  .sos-form-header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 14px; }
  .sos-form-title-ar { font-size: 14px; }
  .sos-form-title-en { font-size: 11px; }
  .sos-date-box { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--color-border); text-align: start; }
  .sos-date-box label { margin: 0; }
  .sos-date-box input { min-height: 40px; }
  .brand-main { max-inline-size: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .login-container { padding: var(--space-3); }
  .login-card { padding: var(--space-6) var(--space-4); }
  .demo-accounts { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .notif-dropdown { inset-inline: var(--space-3); inline-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .urgency-emergency, .urgency-level-5 { animation: none; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: var(--color-surface); color: var(--color-text); font-size: 10pt; }
  .navbar, .footer, .skip-link, .header-actions, .action-card, .form-actions,
  .specification-form-actions, .sidebar-card form, .notif-dropdown, .btn,
  .attach-zone, .specification-upload-section { display: none !important; }
  .main-content { max-inline-size: none; padding: 0; margin: 0; }
  .two-col { display: block; }
  .table-card, .sos-form-card, .sidebar-card, .procurement-card, .po-summary-card {
    box-shadow: none; border-color: var(--color-border); break-inside: avoid;
  }
  .data-table { display: table; font-size: 8.5pt; }
  .data-table thead { display: table-header-group; position: static; inline-size: auto; block-size: auto; clip: auto; }
  .data-table tbody { display: table-row-group; }
  .data-table tr { display: table-row; break-inside: avoid; }
  .data-table th, .data-table td { display: table-cell; padding: 5px; }
  .data-table td::before { display: none; }
  a { color: inherit; text-decoration: none; }
}

/* ============ AUTHENTICATED SOS SHELL ============ */
.np-auth-shell {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 246px;
  min-block-size: 100dvh;
  height: 100dvh;
  padding: 22px 16px;
  gap: 18px;
  flex-direction: column;
  align-items: stretch;
  background: #183B58;
  border-inline-end: 3px solid #5FD47C;
  box-shadow: 4px 0 18px rgba(24, 59, 88, .16);
  overflow-y: auto;
}
.np-auth-shell .navbar-brand {
  padding: 0 7px 20px;
  border-block-end: 1px solid rgba(255,255,255,.14);
}
.np-auth-shell .brand-logo-img {
  inline-size: 58px;
  block-size: 42px;
  padding: 4px;
  border-radius: 7px;
  background: #fff;
}
.np-auth-shell .brand-main { font-size: 13px; }
.np-auth-shell .brand-sub { color: #B4D0D7; opacity: 1; font-size: 10px; }
.np-auth-shell .np-auth-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin: 0;
}
.np-auth-shell .nav-link {
  min-block-size: 38px;
  display: flex;
  align-items: center;
  color: #C7D9DE;
  padding-inline: 12px;
  font-size: 12px;
}
.np-auth-shell .nav-link:hover, .np-auth-shell .nav-link.active {
  color: #fff;
  background: rgba(0, 158, 224, .23);
}
.np-auth-shell .nav-link.active { box-shadow: inset 3px 0 #5FD47C; }
[dir="rtl"] .np-auth-shell .nav-link.active { box-shadow: inset -3px 0 #5FD47C; }
.np-auth-shell .btn-primary-sm {
  color: #fff !important;
  background: #009EE0;
  box-shadow: 0 4px 10px rgba(0, 158, 224, .22);
}
.np-auth-shell .btn-primary-sm:hover { background: #0088C2; }
.np-auth-shell .np-auth-user {
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-block-start: 14px;
  border-block-start: 1px solid rgba(255,255,255,.14);
}
.np-auth-shell .np-auth-tools,
.np-auth-shell .np-auth-profile {
  display: flex;
  align-items: center;
  gap: 9px;
}
.np-auth-shell .np-auth-tools { justify-content: space-between; }
.np-auth-shell .np-auth-profile { justify-content: space-between; }
.np-auth-shell .user-info { display: flex; align-items: center; gap: 9px; min-inline-size: 0; }
.np-auth-shell .user-details { min-inline-size: 0; }
.np-auth-shell .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-auth-shell .user-avatar { background: #DFF5E5; color: #277B49; }
.np-auth-shell .role-badge { background: rgba(255,255,255,.13); color: #D8EAEE; }
.np-auth-shell .language-toggle { border-radius: 6px; border-color: #89AAB5; }
.np-auth-shell .notif-bell:hover { background: rgba(0, 158, 224, .18); }
.np-auth-shell .logout { color: #C7D9DE; opacity: 1; }
.has-auth-shell .main-content {
  max-inline-size: none;
  margin-inline-start: 246px;
  padding: 30px 36px 50px;
}
.has-auth-shell .footer { margin-inline-start: 246px; }
.has-auth-shell .notif-dropdown {
  inset-inline-start: 258px;
  inset-inline-end: auto;
  top: auto;
  bottom: 18px;
}

/* ============ FINANCE DASHBOARD ============ */
.np-finance {
  --np-ink: #183B58;
  --np-muted: #648091;
  --np-line: #DCE9ED;
  --np-blue: #009EE0;
  --np-green: #5FD47C;
  --np-coral: #E74361;
  color: var(--np-ink);
  max-inline-size: 1510px;
  margin-inline: auto;
}
.np-finance-heading { margin-block: 4px 27px; }
.np-finance-heading h1 { font-size: 25px; letter-spacing: -.4px; color: var(--np-ink); }
.np-finance-heading p:last-child { margin-block-start: 5px; color: var(--np-muted); font-size: 13px; }
.np-finance-kicker {
  display: block;
  margin-block-end: 5px;
  color: #168BB3;
  font-size: 10px;
  letter-spacing: .2px;
}
.np-finance-kicker-coral { color: var(--np-coral); }
.np-finance-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block-end: 31px; max-inline-size: 620px; }
.np-finance-stat {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(31,82,101,.04);
}
.np-finance-stat-icon { display: grid; place-items: center; flex: 0 0 37px; inline-size: 37px; block-size: 37px; border-radius: 9px; font-weight: 700; }
.np-finance-stat-coral .np-finance-stat-icon { color: var(--np-coral); background: #FDE9ED; }
.np-finance-stat-blue .np-finance-stat-icon { color: var(--np-blue); background: #E2F5FB; }
.np-finance-stat-value { display: block; color: var(--np-ink); font-family: var(--font-en); font-size: 21px; font-weight: 700; line-height: 1.15; direction: ltr; text-align: start; }
.np-finance-stat-value + span { display: block; margin-block-start: 5px; color: var(--np-muted); font-size: 11px; }
.np-finance-section { margin-block-end: 30px; }
.np-finance-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-block-end: 13px; }
.np-finance-section-head h2 { color: var(--np-ink); font-size: 16px; font-weight: 700; }
.np-finance-count { display: grid; place-items: center; min-inline-size: 28px; block-size: 28px; border-radius: 50%; background: #FDE9ED; color: var(--np-coral); font-family: var(--font-en); font-size: 12px; font-weight: 700; }
.np-budget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.np-budget-card, .np-finance-table-card {
  background: #fff;
  border: 1px solid var(--np-line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(31,82,101,.04);
}
.np-budget-card { padding: 18px; }
.np-budget-card-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.np-budget-card code { color: #087CA2; font-family: var(--font-en); font-size: 10px; font-weight: 600; }
.np-budget-card h3 { margin-block-start: 5px; font-size: 13px; }
.np-budget-pct { font-family: var(--font-en); font-size: 18px; }
.np-budget-pct-ok { color: #37AD62; }.np-budget-pct-warn { color: #D48824; }.np-budget-pct-danger { color: var(--np-coral); }
.np-budget-progress { block-size: 7px; margin-block: 17px 12px; overflow: hidden; border-radius: 10px; background: #EDF3F2; }
.np-budget-progress i { display: block; block-size: 100%; border-radius: inherit; }
.np-budget-progress-ok { background: var(--np-green); }.np-budget-progress-warn { background: #EFB541; }.np-budget-progress-danger { background: var(--np-coral); }
.np-budget-values { display: flex; justify-content: space-between; gap: 10px; color: var(--np-muted); font-size: 10px; }
.np-budget-values span { display: flex; flex-direction: column; gap: 3px; }
.np-budget-values span:last-child { text-align: end; }
.np-budget-values bdi { color: var(--np-ink); direction: ltr; font-family: var(--font-en); font-size: 11px; font-weight: 600; }
.np-finance-empty { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--np-line); border-radius: 10px; color: var(--np-muted); text-align: center; }
.np-finance-table-card { overflow: hidden; }
.np-finance-table { min-inline-size: 850px; font-size: 11px; }
.np-finance-table th { padding: 11px 14px; background: #F7FBFA; color: var(--np-muted); font-size: 10px; }
.np-finance-table td { padding: 13px 14px; border-color: #EDF3F2; }
.np-finance-table td strong { font-size: 11px; }
.np-finance-table code { color: #087CA2; font-family: var(--font-en); font-size: 10px; font-weight: 600; }
.np-finance-table .amount-cell { font-family: var(--font-en); font-weight: 600; }
.np-budget-tag { display: inline-block; padding: 4px 8px; border-radius: 12px; background: #E8F6FA; color: #11718F; font-size: 10px; }
.np-review-link { color: #08739B; background: #fff; border: 1px solid #C9E2E7; font-size: 11px; }
.np-review-link:hover { background: #E6F6FA; border-color: var(--np-blue); }

@media (max-width: 1023px) {
  .np-auth-shell {
    position: sticky;
    inset: auto;
    inline-size: auto;
    min-block-size: 64px;
    height: 64px;
    padding: 0 14px;
    flex-direction: row;
    align-items: center;
    border-inline-end: 0;
    border-block-end: 3px solid #5FD47C;
    overflow: visible;
  }
  .np-auth-shell .navbar-brand { padding: 0; border: 0; }
  .np-auth-shell .np-auth-nav { background: #183B58; }
  .np-auth-shell .np-auth-nav .nav-link { color: #C7D9DE; }
  .np-auth-shell .np-auth-nav .nav-link.active { background: rgba(0, 158, 224, .23); }
  .np-auth-shell .np-auth-user {
    margin-inline-start: auto;
    margin-block-start: 0;
    padding: 0;
    border: 0;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .np-auth-shell .np-auth-tools,
  .np-auth-shell .np-auth-profile { gap: 7px; }
  .np-auth-shell .np-auth-profile .logout-form { display: none; }
  .has-auth-shell .main-content {
    margin-inline-start: 0;
    padding: 24px 20px 40px;
  }
  .has-auth-shell .footer { margin-inline-start: 0; }
  .has-auth-shell .notif-dropdown {
    inset-inline-start: auto;
    inset-inline-end: 16px;
    top: 66px;
    bottom: auto;
  }
  .np-budget-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .np-auth-shell { min-block-size: 60px; height: 60px; padding-inline: 12px; }
  .np-auth-shell .brand-logo-img { inline-size: 48px; block-size: 36px; }
  .np-auth-shell .np-auth-profile { display: none; }
  .has-auth-shell .main-content { padding: 20px 14px 36px; }
  .np-finance-heading { margin-block-end: 21px; }
  .np-finance-heading h1 { font-size: 22px; }
  .np-finance-stats { gap: 9px; margin-block-end: 25px; }
  .np-finance-stat { padding: 12px 10px; gap: 8px; }
  .np-finance-stat-icon { flex-basis: 31px; inline-size: 31px; block-size: 31px; }
  .np-finance-stat-value { font-size: 17px; }
  .np-finance-stat-value + span { font-size: 9px; }
  .np-finance-table { min-inline-size: 0; }
  .np-finance-table tbody tr { display: block; }
}