/* =========================================================
   01-design-tokens.css
   Shared design system for ALL screens
   Arabic RTL - Customer / Technician / CS / Admin
   ========================================================= */

:root {
  /* Brand */
  --brand-primary: #1F6FEB;
  --brand-primary-hover: #175CD3;
  --brand-primary-dark: #0F4FBF;
  --brand-primary-soft: #EAF2FF;
  --brand-navy: #10283F;
  --brand-navy-2: #0D2134;

  /* Surfaces */
  --page-bg: #F4F8FC;
  --page-bg-alt: #EEF4FA;
  --surface: #FFFFFF;
  --surface-soft: #F8FBFE;
  --surface-muted: #F1F5F9;

  /* Text */
  --text: #17324D;
  --text-strong: #0E2238;
  --text-muted: #71859A;
  --text-light: #98A8B8;
  --text-on-dark: #EAF2F8;
  --sidebar-muted: #8AA4BB;

  /* Borders */
  --border: #DCE6F0;
  --border-light: #E8EFF6;

  /* Status */
  --success: #20B97A;
  --success-soft: #E7F8F1;
  --warning: #F3A61D;
  --warning-soft: #FFF5DF;
  --danger: #F05252;
  --danger-soft: #FDECEC;
  --info: #3487F6;
  --info-soft: #EAF3FF;
  --purple: #7C4DFF;
  --purple-soft: #F0EBFF;
  --teal: #16B8A6;
  --teal-soft: #E6F9F6;

  /* Gray */
  --gray-50:#F9FBFD;
  --gray-100:#F1F5F9;
  --gray-200:#E2E8F0;
  --gray-300:#CBD5E1;
  --gray-400:#94A3B8;
  --gray-500:#64748B;
  --gray-700:#334155;
  --gray-900:#0F172A;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(16,40,63,.04);
  --shadow-sm: 0 2px 8px rgba(16,40,63,.06);
  --shadow-md: 0 8px 24px rgba(16,40,63,.08);
  --shadow-lg: 0 16px 40px rgba(16,40,63,.12);

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* Layout */
  --sidebar-width: 250px;
  --topbar-height: 72px;
  --mobile-max: 430px;
  --content-max: 1600px;
}

* { box-sizing: border-box; }

html {
  direction: rtl;
  background: var(--page-bg);
}

body {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  background:
    radial-gradient(1100px 420px at 100% -8%, rgba(31,111,235,.14), transparent 58%),
    radial-gradient(900px 360px at 0% 108%, rgba(16,40,63,.07), transparent 52%),
    var(--page-bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* Shared utility */
.text-primary{color:var(--brand-primary)!important}
.text-success{color:var(--success)!important}
.text-warning{color:var(--warning)!important}
.text-danger{color:var(--danger)!important}
.text-muted{color:var(--text-muted)!important}
.bg-primary-soft{background:var(--brand-primary-soft)!important}
.bg-success-soft{background:var(--success-soft)!important}
.bg-warning-soft{background:var(--warning-soft)!important}
.bg-danger-soft{background:var(--danger-soft)!important}
.bg-info-soft{background:var(--info-soft)!important}
.bg-purple-soft{background:var(--purple-soft)!important}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.hidden{display:none!important}
.w-100{width:100%!important}

/* =========================================================
   02-components.css
   Reusable UI components used across ALL screens
   ========================================================= */

.ui-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  overflow: hidden;
}

.ui-card--soft { background: var(--surface-soft); }
.ui-card--clickable { cursor: pointer; transition: .2s ease; }
.ui-card--clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.ui-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 800;
}
.ui-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}

.ui-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: .2s ease;
  text-decoration: none;
}
.ui-btn--primary {
  background: linear-gradient(180deg,#3B82F6,var(--brand-primary));
  color:#fff;
  box-shadow: 0 8px 18px rgba(31,111,235,.22);
}
.ui-btn--primary:hover { background: var(--brand-primary-hover); }
.ui-btn--secondary { background: var(--gray-100); color:var(--text); }
.ui-btn--outline { background:#fff; color:var(--brand-primary); border:1px solid #BCD5FF; }
.ui-btn--success { background:var(--success); color:#fff; }
.ui-btn--danger { background:var(--danger); color:#fff; }
.ui-btn--ghost { background:transparent; color:var(--text); }
.ui-btn--sm { min-height:34px; padding:0 12px; font-size:12px; }
.ui-btn--block { width:100%; }

.ui-input,
.ui-select,
.ui-textarea {
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.ui-input, .ui-select { min-height:44px; }
.ui-textarea { min-height:110px; resize:vertical; }
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  border-color:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(31,111,235,.12);
}
.ui-label {
  display:block;
  margin-bottom:6px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
}
.ui-help { color:var(--text-muted); font-size:12px; margin-top:5px; }

.ui-field { margin-bottom:14px; }

.ui-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.ui-badge--success{background:var(--success-soft);color:#12845B}
.ui-badge--warning{background:var(--warning-soft);color:#B97900}
.ui-badge--danger{background:var(--danger-soft);color:#C93E3E}
.ui-badge--info{background:var(--info-soft);color:#1A64C8}
.ui-badge--purple{background:var(--purple-soft);color:#6540D8}
.ui-badge--muted{background:var(--gray-100);color:var(--gray-500)}

.ui-tabs {
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:10px;
  background:var(--gray-100);
}
.ui-tab {
  border:0;
  background:transparent;
  color:var(--text-muted);
  border-radius:8px;
  padding:8px 14px;
  cursor:pointer;
}
.ui-tab.is-active {
  background:#fff;
  color:var(--brand-primary);
  box-shadow:var(--shadow-xs);
  font-weight:700;
}

.ui-list {
  margin:0;
  padding:0;
  list-style:none;
}
.ui-list-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--border-light);
}
.ui-list-item:last-child { border-bottom:0; }

.ui-avatar {
  width:40px;height:40px;border-radius:50%;
  object-fit:cover;background:var(--gray-100);
}
.ui-avatar--sm{width:30px;height:30px}
.ui-avatar--lg{width:58px;height:58px}

.ui-divider { height:1px; background:var(--border-light); margin:16px 0; }

.ui-alert {
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
}
.ui-alert--info{background:var(--info-soft);border-color:#C9E0FF;color:#1C5FAB}
.ui-alert--success{background:var(--success-soft);border-color:#B9ECD8;color:#0E7954}
.ui-alert--warning{background:var(--warning-soft);border-color:#F9DCA0;color:#8F6500}
.ui-alert--danger{background:var(--danger-soft);border-color:#F7C6C6;color:#A83232}

.ui-empty {
  text-align:center;
  padding:38px 20px;
  color:var(--text-muted);
}
.ui-empty-icon {
  width:64px;height:64px;
  margin:0 auto 14px;
  border-radius:18px;
  display:grid;place-items:center;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
}

.ui-modal-backdrop {
  position:fixed; inset:0;
  background:rgba(8,24,40,.45);
  display:grid; place-items:center;
  padding:18px;
  z-index:1000;
}
.ui-modal {
  width:min(560px,100%);
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  padding:20px;
}

.ui-progress { height:8px; border-radius:999px; background:var(--gray-100); overflow:hidden; }
.ui-progress-bar { height:100%; background:var(--brand-primary); border-radius:inherit; }

.ui-timeline {
  position:relative;
  padding-right:24px;
}
.ui-timeline::before {
  content:"";
  position:absolute;
  right:7px; top:6px; bottom:6px;
  width:2px; background:var(--border);
}
.ui-timeline-item {
  position:relative;
  padding:0 0 18px;
}
.ui-timeline-item::before {
  content:"";
  position:absolute;
  right:-22px; top:4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--brand-primary);
  border:3px solid #fff;
  box-shadow:0 0 0 1px var(--border);
}

.ui-stepper {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.ui-step {
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
}
.ui-step-dot {
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gray-100);
  color:var(--text-muted);
  font-size:12px;font-weight:800;
}
.ui-step.is-active .ui-step-dot,
.ui-step.is-done .ui-step-dot {
  background:var(--brand-primary);
  color:#fff;
}
.ui-step-line { flex:1; height:2px; background:var(--border); }
.ui-step.is-done .ui-step-line { background:var(--brand-primary); }

.ui-table-wrap { width:100%; overflow:auto; }
.ui-table { width:100%; border-collapse:collapse; min-width:760px; }
.ui-table th {
  padding:12px 14px;
  text-align:right;
  font-size:12px;
  color:var(--text-muted);
  background:var(--gray-50);
  border-bottom:1px solid var(--border-light);
}
.ui-table td {
  padding:13px 14px;
  font-size:13px;
  border-bottom:1px solid var(--border-light);
}
.ui-table tr:hover td { background:#FBFDFF; }

.status-upcoming{background:var(--info-soft);color:var(--info)}
.status-due{background:var(--warning-soft);color:#B97900}
.status-overdue{background:var(--danger-soft);color:var(--danger)}
.status-completed{background:var(--success-soft);color:var(--success)}
.status-revisit{background:var(--purple-soft);color:var(--purple)}
.status-enroute{background:var(--purple-soft);color:var(--purple)}
.status-progress{background:var(--warning-soft);color:#A97100}
.status-cancelled{background:var(--danger-soft);color:var(--danger)}

/* =========================================================
   03-customer-app.css
   Customer mobile app: Login, OTP, Home, Devices, QR,
   Maintenance, Booking, Appointments, Notifications, Support
   ========================================================= */

.customer-app {
  min-height:100vh;
  background:linear-gradient(180deg,#F8FBFF 0%,#F4F8FC 100%);
  color:var(--text);
}

.mobile-shell {
  width:100%;
  max-width:var(--mobile-max);
  min-height:100vh;
  margin:0 auto;
  background:#fff;
  position:relative;
  box-shadow:0 0 0 1px var(--border-light);
}

.mobile-header {
  min-height:60px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  border-bottom:1px solid var(--border-light);
  position:sticky; top:0; z-index:50;
}
.mobile-header--blue {
  background:linear-gradient(135deg,#2180F4,#1461D0);
  color:#fff;
  border-bottom:0;
}

.mobile-content {
  padding:16px 16px 92px;
}

.mobile-bottom-nav {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,var(--mobile-max));
  min-height:68px;
  padding:8px 14px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--border-light);
  backdrop-filter:blur(10px);
  z-index:60;
}
.mobile-nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--text-muted);
  font-size:11px;
  text-decoration:none;
}
.mobile-nav-item.is-active { color:var(--brand-primary); font-weight:700; }

.auth-screen {
  min-height:100vh;
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 82% -8%,rgba(69,165,255,.38),transparent 42%),
    radial-gradient(circle at 8% 112%,rgba(16,40,63,.16),transparent 46%),
    linear-gradient(180deg,#EAF2FF 0%,#F4F8FC 46%,#fff 100%);
}
.auth-logo {
  width:82px;height:82px;
  margin:0 auto 18px;
  border-radius:24px;
  display:grid;place-items:center;
  color:#fff;
  font-size:32px;
  font-weight:800;
  position:relative;
  background:linear-gradient(145deg,#45A5FF,#1F6FEB 58%,#10283F);
  box-shadow:0 12px 30px rgba(31,111,235,.22);
}
.auth-logo::after {
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:30px;
  border:2px solid rgba(31,111,235,.16);
  pointer-events:none;
}
.auth-title{text-align:center;font-size:24px;font-weight:800;color:var(--text-strong)}
.auth-copy{text-align:center;color:var(--text-muted);font-size:13px;margin:6px 0 24px}

.otp-row {
  display:flex;
  direction:ltr;
  gap:8px;
  justify-content:center;
}
.otp-box {
  width:48px;height:52px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:20px;
  font-weight:800;
  outline:none;
}
.otp-box:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(31,111,235,.12); }

.customer-hero {
  padding:16px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,#1F6FEB,#2D8DF4);
  box-shadow:0 12px 28px rgba(31,111,235,.22);
}
.customer-hero-row { display:flex;align-items:center;justify-content:space-between;gap:12px; }

.quick-actions {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.quick-action {
  padding:12px 8px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border-light);
  text-align:center;
  color:var(--text);
  font-size:11px;
}
.quick-action-icon {
  width:38px;height:38px;
  margin:0 auto 6px;
  display:grid;place-items:center;
  border-radius:11px;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
}

.device-card {
  display:flex;
  gap:12px;
  padding:14px;
  border:1px solid var(--border-light);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-xs);
}
.device-thumb {
  width:72px;height:72px;
  flex:0 0 72px;
  border-radius:12px;
  background:#F5F9FD;
  display:grid;place-items:center;
  overflow:hidden;
}
.device-info { min-width:0; flex:1; }
.device-name { font-weight:800;color:var(--text-strong);margin-bottom:3px; }
.device-meta { font-size:12px;color:var(--text-muted); }

.maintenance-summary {
  padding:14px;
  border-radius:14px;
  background:linear-gradient(135deg,#FFF9EC,#FFF3D4);
  border:1px solid #F7D995;
}
.maintenance-summary.is-overdue {
  background:linear-gradient(135deg,#FFF1F1,#FDECEC);
  border-color:#F4B9B9;
}

.maintenance-item {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--border-light);
}
.maintenance-item:last-child { border-bottom:0; }

.qr-card {
  text-align:center;
  padding:20px;
  border-radius:18px;
  border:1px solid var(--border-light);
  background:#fff;
}
.qr-frame {
  width:210px;height:210px;
  margin:0 auto 14px;
  padding:12px;
  border:2px dashed #B9CDF0;
  border-radius:18px;
  background:#fff;
}
.qr-scan-screen {
  min-height:100vh;
  background:#091827;
  color:#fff;
  display:flex;
  flex-direction:column;
}
.qr-camera {
  flex:1;
  display:grid;
  place-items:center;
  background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18));
}
.qr-reticle {
  width:250px;height:250px;
  border:3px solid rgba(255,255,255,.85);
  border-radius:24px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.28);
}

.booking-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.booking-option {
  border:1px solid var(--border);
  border-radius:15px;
  padding:16px;
  background:#fff;
  cursor:pointer;
}
.booking-option.is-selected {
  border-color:var(--brand-primary);
  background:var(--brand-primary-soft);
  box-shadow:0 0 0 2px rgba(31,111,235,.08);
}

.slot-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}
.slot {
  min-height:42px;
  border:1px solid var(--border);
  border-radius:10px;
  display:grid;place-items:center;
  background:#fff;
  color:var(--text);
}
.slot.is-selected {
  border-color:var(--brand-primary);
  background:var(--brand-primary);
  color:#fff;
}
.slot.is-disabled {
  opacity:.45;
  pointer-events:none;
  background:var(--gray-100);
}

.appointment-card {
  padding:14px;
  border:1px solid var(--border-light);
  border-radius:15px;
  background:#fff;
}
.appointment-actions {
  display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;
}

.visit-status {
  padding:16px;
  border-radius:15px;
  background:#fff;
  border:1px solid var(--border-light);
}
.visit-status-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
}
.visit-status-dot {
  width:18px;height:18px;border-radius:50%;
  background:var(--gray-200);
  border:4px solid #fff;
  box-shadow:0 0 0 1px var(--border);
}
.visit-status-row.is-done .visit-status-dot { background:var(--success); }
.visit-status-row.is-current .visit-status-dot { background:var(--brand-primary); }

.notification-card {
  display:flex;gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border-light);
}
.notification-dot {
  width:9px;height:9px;border-radius:50%;
  background:var(--brand-primary);
  margin-top:7px;
}
.notification-card.is-read .notification-dot { background:var(--gray-300); }

.profile-menu-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border-light);
}

.support-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.support-action {
  min-height:100px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  border:1px solid var(--border-light);
  border-radius:15px;
  background:#fff;
}

/* =========================================================
   04-technician-app.css
   Technician mobile app: tasks, route, map, checklist,
   components, photos, completion, revisit
   ========================================================= */

.technician-app {
  min-height:100vh;
  background:#F5FAF8;
}

.tech-header {
  min-height:64px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg,#14885F,#20B97A);
  color:#fff;
}

.tech-kpi-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.tech-kpi {
  padding:12px;
  border-radius:14px;
  background:#fff;
  border:1px solid #DDF0E8;
  text-align:center;
}
.tech-kpi-value{font-size:22px;font-weight:800;color:#0C6247}
.tech-kpi-label{font-size:11px;color:var(--text-muted)}

.task-card {
  padding:14px;
  border:1px solid #DDECE6;
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-xs);
}
.task-card + .task-card { margin-top:10px; }
.task-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.task-time {
  min-width:68px;
  text-align:center;
  border-radius:10px;
  background:var(--success-soft);
  color:#12845B;
  padding:8px;
  font-weight:800;
}

.tech-map {
  min-height:350px;
  border-radius:16px;
  overflow:hidden;
  background:#EAF4EF;
  border:1px solid #D5E9E0;
  position:relative;
}
.tech-map-actions {
  position:absolute;
  right:12px;
  bottom:12px;
  left:12px;
  display:flex;
  gap:8px;
}

.task-customer {
  display:flex;gap:12px;align-items:center;
  padding:14px;
  border:1px solid var(--border-light);
  border-radius:14px;
  background:#fff;
}

.checklist {
  margin:0;padding:0;list-style:none;
}
.check-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border-light);
}
.check-item:last-child{border-bottom:0}
.check-toggle {
  width:24px;height:24px;border-radius:7px;
  border:1px solid var(--border);
  display:grid;place-items:center;
  background:#fff;
}
.check-item.is-done .check-toggle {
  background:var(--success);
  color:#fff;
  border-color:var(--success);
}

.component-action-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid var(--border-light);
}
.component-actions {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.component-action {
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 9px;
  background:#fff;
  font-size:11px;
  cursor:pointer;
}
.component-action.is-selected[data-action="checked"]{background:var(--info-soft);border-color:#BFD7FB;color:var(--info)}
.component-action.is-selected[data-action="serviced"]{background:var(--success-soft);border-color:#B9ECD8;color:var(--success)}
.component-action.is-selected[data-action="replaced"]{background:var(--purple-soft);border-color:#D8CBFF;color:var(--purple)}
.component-action.is-selected[data-action="skipped"]{background:var(--gray-100);color:var(--gray-500)}

.photo-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.photo-tile {
  aspect-ratio:1;
  border-radius:12px;
  border:1px solid var(--border-light);
  background:var(--gray-100);
  overflow:hidden;
  position:relative;
}
.photo-add {
  display:grid;place-items:center;
  border:2px dashed var(--border);
  color:var(--text-muted);
  background:#fff;
}

.visit-result {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.result-option {
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  text-align:center;
  background:#fff;
}
.result-option.is-selected {
  border-color:var(--success);
  background:var(--success-soft);
}

.next-maintenance-box {
  padding:14px;
  border-radius:14px;
  background:var(--brand-primary-soft);
  border:1px solid #C9DDFB;
}

.tech-bottom-actions {
  position:sticky;
  bottom:0;
  padding:12px 16px;
  display:flex;
  gap:10px;
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--border-light);
}

/* =========================================================
   05-backoffice.css
   Customer Service + Admin web screens + Dashboards
   ========================================================= */

.web-app-shell {
  min-height:100vh;
  display:flex;
  background:var(--page-bg);
}

.web-sidebar {
  position:fixed;
  right:0;top:0;bottom:0;
  width:var(--sidebar-width);
  padding:18px 14px;
  overflow:auto;
  background:linear-gradient(180deg,var(--brand-navy),var(--brand-navy-2));
  color:var(--text-on-dark);
  z-index:100;
}

.web-main {
  width:calc(100% - var(--sidebar-width));
  margin-right:var(--sidebar-width);
  min-height:100vh;
}

.web-topbar {
  min-height:var(--topbar-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--border-light);
  backdrop-filter:blur(10px);
}

.web-content {
  max-width:var(--content-max);
  margin:0 auto;
  padding:24px;
}

.sidebar-brand {
  display:flex;align-items:center;gap:12px;
  padding:8px 10px 20px;
}
.sidebar-brand-mark {
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(145deg,#45A5FF,#1F6FEB 60%,#10283F);
  display:grid;place-items:center;color:#fff;
  font-weight:800;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
}
.sidebar-brand-title{font-size:16px;font-weight:800;color:#fff}
.sidebar-brand-sub{font-size:11px;color:var(--sidebar-muted)}

.sidebar-link {
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  border-radius:10px;
  margin-bottom:5px;
  color:var(--text-on-dark);
  text-decoration:none;
}
.sidebar-link:hover{background:rgba(255,255,255,.07)}
.sidebar-link.is-active {
  background:var(--brand-primary);
  color:#fff;
  box-shadow:0 6px 16px rgba(31,111,235,.25);
}

.global-search {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  min-width:min(620px,50vw);
}
.global-search input{
  flex:1;border:0;outline:0;background:transparent;
}

.kpi-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(150px,1fr));
  gap:16px;
}
.kpi-card {
  min-height:126px;
  padding:18px;
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.kpi-icon {
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:12px;
}
.kpi-value{font-size:28px;font-weight:800;color:var(--text-strong);margin-top:8px}
.kpi-label{font-size:14px;font-weight:700}
.kpi-meta{font-size:12px;color:var(--text-muted);margin-top:5px}

.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.col-12{grid-column:span 12}.col-9{grid-column:span 9}.col-8{grid-column:span 8}
.col-7{grid-column:span 7}.col-6{grid-column:span 6}.col-5{grid-column:span 5}
.col-4{grid-column:span 4}.col-3{grid-column:span 3}

.chart-panel {
  min-height:300px;
  padding:18px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--border-light);
}

.customer-360-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--border-light);
}
.customer-360-main {
  display:flex;align-items:center;gap:14px;
}
.customer-360-name{font-size:20px;font-weight:800;color:var(--text-strong)}
.customer-360-meta{font-size:12px;color:var(--text-muted)}

.customer-360-tabs {
  margin-top:14px;
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:4px;
}
.customer-360-tab{
  min-width:max-content;
  padding:8px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text-muted);
}
.customer-360-tab.is-active {
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
  border-color:#BDD4F7;
  font-weight:700;
}

.followup-board {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.followup-column {
  background:#F7FAFD;
  border:1px solid var(--border-light);
  border-radius:15px;
  padding:12px;
  min-height:420px;
}
.followup-column-title {
  font-weight:800;
  margin-bottom:10px;
}
.followup-card {
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-xs);
  margin-bottom:9px;
}

.calendar-shell {
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:16px;
  overflow:hidden;
}
.calendar-toolbar {
  min-height:60px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border-light);
}
.calendar-grid {
  min-width:900px;
  display:grid;
  grid-template-columns:80px repeat(7,1fr);
}
.calendar-cell {
  min-height:72px;
  border-left:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  padding:6px;
}
.calendar-event {
  padding:6px 8px;
  border-radius:8px;
  font-size:11px;
  margin-bottom:4px;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
  border-right:3px solid var(--brand-primary);
}

.dispatch-board {
  display:grid;
  grid-template-columns:330px 1fr 340px;
  gap:14px;
}
.dispatch-list,
.dispatch-map,
.dispatch-detail {
  min-height:620px;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:16px;
  overflow:hidden;
}
.dispatch-map { background:#EEF4F7; position:relative; }

.technician-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-light);
}
.technician-status {
  width:10px;height:10px;border-radius:50%;
}
.technician-status.available{background:var(--success)}
.technician-status.busy{background:var(--warning)}
.technician-status.offline{background:var(--gray-300)}

.report-filters {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:14px;
  border:1px solid var(--border-light);
  border-radius:14px;
  background:#fff;
}
.report-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.report-widget {
  min-height:260px;
  padding:18px;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:16px;
}

.integration-card {
  padding:18px;
  border:1px solid var(--border-light);
  border-radius:16px;
  background:#fff;
}
.integration-head {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.sync-log-row {
  display:grid;
  grid-template-columns:160px 140px 1fr 110px;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--border-light);
}

@media(max-width:1400px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}
  .dispatch-board{grid-template-columns:280px 1fr}
  .dispatch-detail{grid-column:1/-1;min-height:auto}
}
@media(max-width:1100px){
  :root{--sidebar-width:220px}
  .dashboard-grid{grid-template-columns:repeat(6,1fr)}
  .col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3{grid-column:span 6}
  .followup-board{grid-template-columns:1fr 1fr}
  .report-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  :root{--sidebar-width:0px}
  .web-sidebar{display:none}
  .web-main{width:100%;margin-right:0}
  .web-topbar{padding:10px 14px}
  .web-content{padding:14px}
  .global-search{min-width:0;width:100%}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .dashboard-grid{grid-template-columns:1fr}
  .col-12,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3{grid-column:span 1}
  .followup-board,.report-grid,.dispatch-board{grid-template-columns:1fr}
}

/* =========================================================
   06-special-screens.css
   QR, Maps, Booking, Support, Salla, Settings, Reports,
   modal states, printable QR label
   ========================================================= */

.qr-label-print {
  width:70mm;
  min-height:45mm;
  padding:5mm;
  border:1px solid #000;
  background:#fff;
  color:#000;
  display:grid;
  grid-template-columns:28mm 1fr;
  gap:4mm;
  align-items:center;
}
.qr-label-code { width:28mm;height:28mm; }
.qr-label-title{font-size:12pt;font-weight:800}
.qr-label-device{font-size:9pt;margin-top:2mm}
.qr-label-note{font-size:7.5pt;margin-top:2mm}

.map-screen {
  position:relative;
  min-height:calc(100vh - var(--topbar-height));
  background:#EDF3F6;
}
.map-overlay-card {
  position:absolute;
  top:18px;
  right:18px;
  width:min(360px,calc(100% - 36px));
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border-light);
  padding:14px;
}
.map-bottom-sheet {
  position:absolute;
  right:0;left:0;bottom:0;
  margin:auto;
  max-width:720px;
  background:#fff;
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 40px rgba(16,40,63,.12);
  padding:18px;
}

.booking-review {
  display:grid;
  gap:12px;
}
.booking-review-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--border-light);
}
.booking-review-row:last-child{border-bottom:0}

.support-thread {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.message-bubble {
  max-width:80%;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
}
.message-bubble.customer {
  align-self:flex-start;
  background:var(--brand-primary-soft);
  color:var(--text);
  border-bottom-right-radius:4px;
}
.message-bubble.staff {
  align-self:flex-end;
  background:var(--success-soft);
  color:var(--text);
  border-bottom-left-radius:4px;
}

.settings-section {
  padding:18px;
  border:1px solid var(--border-light);
  border-radius:16px;
  background:#fff;
  margin-bottom:14px;
}
.settings-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--border-light);
}
.settings-row:last-child{border-bottom:0}

.toggle {
  width:46px;height:26px;
  padding:3px;
  border-radius:999px;
  background:var(--gray-300);
  transition:.2s ease;
}
.toggle::after {
  content:"";
  width:20px;height:20px;
  display:block;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--shadow-xs);
}
.toggle.is-on{background:var(--success)}
.toggle.is-on::after{transform:translateX(-20px)}

.salla-status {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:12px;
  background:var(--success-soft);
  color:#0E7954;
}

.audit-row {
  display:grid;
  grid-template-columns:150px 170px 1fr 180px;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border-light);
  font-size:13px;
}

.permission-grid {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:14px;
}
.permission-nav {
  border:1px solid var(--border-light);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
}
.permission-content {
  border:1px solid var(--border-light);
  background:#fff;
  border-radius:14px;
  padding:18px;
}
.permission-row {
  display:grid;
  grid-template-columns:1fr repeat(4,100px);
  gap:8px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid var(--border-light);
}

@media print {
  body { background:#fff!important; }
  .no-print { display:none!important; }
  .qr-label-print { box-shadow:none!important; page-break-inside:avoid; }
}

@media(max-width:768px){
  .permission-grid{grid-template-columns:1fr}
  .audit-row{grid-template-columns:1fr}
}