/* Khutwa Design System — theme layer for the customer portal.
   Loaded LAST (after Color Admin, Kendo, custom.css). Tokens come from the
   Khutwa design system (tokens.json); overrides remap Bootstrap / Color Admin /
   Kendo to those tokens. */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap");

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --deep-olive-green: #2e3b22; --medium-olive: #556b3a; --champagne-gold: #c9a66b;
  --light-beige: #f2ede3; --warm-off-white: #faf8f4;
  --olive-900: #1c2515; --olive-800: #2e3b22; --olive-700: #3e4f2c; --olive-600: #556b3a;
  --olive-500: #6c8250; --olive-400: #8e9f75; --olive-300: #b4c09f; --olive-200: #d3dac5; --olive-100: #e9ede2;
  --gold-800: #8a6b36; --gold-700: #a9834a; --gold-600: #be945a; --gold-500: #c9a66b;
  --gold-400: #d8bb8c; --gold-300: #e5d0ae; --gold-200: #f0e3cc; --gold-100: #f8f1e5;
  --sand-300: #dcd2c0; --sand-200: #e7dfd1; --sand-100: #f2ede3; --sand-050: #faf8f4; --white: #ffffff;

  --text-primary: var(--olive-800); --text-secondary: var(--olive-600); --text-muted: #6b7360;
  --text-accent: var(--gold-700); --text-on-dark: var(--sand-050);
  --surface-page: var(--warm-off-white); --surface-card: var(--white); --surface-sunken: var(--light-beige);
  --surface-brand: var(--deep-olive-green); --surface-brand-soft: var(--olive-100);
  --border-subtle: var(--sand-200); --border-default: var(--sand-300); --border-strong: var(--olive-300);
  --border-accent: var(--gold-400); --focus-ring: var(--gold-500);
  --status-success: var(--medium-olive); --status-success-soft: var(--olive-100);
  --status-warning: var(--gold-700); --status-warning-soft: var(--gold-100);
  --status-danger: #8c3b2e; --status-danger-soft: #f6e6e2;
  --status-info: #3f5a63; --status-info-soft: #e6edef;

  --shadow-xs: 0 1px 2px rgba(46,59,34,.06); --shadow-sm: 0 2px 6px rgba(46,59,34,.07);
  --shadow-md: 0 8px 24px rgba(46,59,34,.08); --shadow-lg: 0 20px 48px rgba(46,59,34,.12);
  --shadow-gold-glow: 0 0 0 4px rgba(201,166,107,.28);
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --duration-fast: 140ms; --duration-base: 220ms;
  --control-h-md: 44px;
  --font-arabic: "Cairo", "Segoe UI", system-ui, sans-serif;
  --font-latin: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ── Bootstrap 5 / Color Admin remap ── */
  --bs-primary: #2e3b22; --bs-primary-rgb: 46,59,34;
  --bs-secondary: #c9a66b; --bs-secondary-rgb: 201,166,107;
  --bs-success: #556b3a; --bs-success-rgb: 85,107,58;
  --bs-info: #3f5a63; --bs-info-rgb: 63,90,99;
  --bs-warning: #a9834a; --bs-warning-rgb: 169,131,74;
  --bs-danger: #8c3b2e; --bs-danger-rgb: 140,59,46;
  --bs-body-bg: #faf8f4; --bs-body-bg-rgb: 250,248,244;
  --bs-body-color: #2e3b22; --bs-body-color-rgb: 46,59,34;
  --bs-link-color: #2e3b22; --bs-link-hover-color: #a9834a;
  --bs-border-color: #e7dfd1;
  --bs-body-font-family: var(--font-latin);
  --bs-body-font-size: .875rem;
  --bs-body-line-height: 1.6;
  --app-theme: #2e3b22; --app-theme-rgb: 46,59,34;
  --app-component-active-bg: #2e3b22;
  --app-header-bg: #2e3b22;
  --app-sidebar-bg: #2e3b22;
}

/* Arabic: Cairo, generous leading */
html[lang="ar"], html[dir="rtl"], [dir="rtl"] body {
  --bs-body-font-family: var(--font-arabic);
  --bs-body-line-height: 1.8;
}
html[lang="ar"] body, html[dir="rtl"] body,
html[lang="ar"] .k-widget, html[dir="rtl"] .k-widget,
html[lang="ar"] .k-input, html[dir="rtl"] .k-input,
html[lang="ar"] .btn, html[dir="rtl"] .btn { font-family: var(--font-arabic); }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.4; }

body { font-family: var(--bs-body-font-family); background: var(--surface-page) !important; color: var(--text-primary); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--olive-800); font-weight: var(--weight-bold, 700); }
a { color: var(--olive-700); transition: color var(--duration-base) var(--ease-standard); }
a:hover { color: var(--gold-700); }
.text-primary { color: var(--olive-800) !important; }
.text-success { color: var(--status-success) !important; }
.text-danger, .text-danger-700 { color: var(--status-danger) !important; }
.text-warning { color: var(--status-warning) !important; }
.text-info { color: var(--status-info) !important; }
.text-gray { color: var(--text-muted) !important; }
.text-orange { color: var(--gold-700) !important; }
.bg-primary, .bg-backgreen, .bg-main-blue { background-color: var(--olive-800) !important; }
.bg-success { background-color: var(--status-success) !important; }
.bg-danger { background-color: var(--status-danger) !important; }
.bg-warning { background-color: var(--gold-500) !important; color: var(--olive-900) !important; }
.bg-light-orange, .bg-blue-light-bg { background: var(--olive-100) !important; }

/* ── Buttons: pill, olive primary, gold secondary ── */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .btn:focus { box-shadow: var(--shadow-gold-glow) !important; outline: 0; }
.btn-primary {
  --bs-btn-bg: var(--olive-800); --bs-btn-border-color: var(--olive-800); --bs-btn-color: var(--sand-050);
  --bs-btn-hover-bg: var(--olive-700); --bs-btn-hover-border-color: var(--olive-700); --bs-btn-hover-color: var(--sand-050);
  --bs-btn-active-bg: var(--olive-900); --bs-btn-active-border-color: var(--olive-900); --bs-btn-active-color: var(--sand-050);
  --bs-btn-disabled-bg: var(--olive-200); --bs-btn-disabled-border-color: var(--olive-200); --bs-btn-disabled-color: var(--olive-600);
}
.btn-secondary, .btn-warning {
  --bs-btn-bg: var(--gold-500); --bs-btn-border-color: var(--gold-500); --bs-btn-color: var(--olive-900);
  --bs-btn-hover-bg: var(--gold-600); --bs-btn-hover-border-color: var(--gold-600); --bs-btn-hover-color: var(--olive-900);
  --bs-btn-active-bg: var(--gold-700); --bs-btn-active-border-color: var(--gold-700); --bs-btn-active-color: var(--olive-900);
}
.btn-success {
  --bs-btn-bg: var(--olive-600); --bs-btn-border-color: var(--olive-600); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--olive-700); --bs-btn-hover-border-color: var(--olive-700); --bs-btn-hover-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--status-danger); --bs-btn-border-color: var(--status-danger); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #73301f; --bs-btn-hover-border-color: #73301f; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #73301f; --bs-btn-active-border-color: #73301f;
}
.btn-light, .btn-default, .btn-outline-primary, .btn-outline-default {
  --bs-btn-bg: transparent; --bs-btn-color: var(--olive-800); --bs-btn-border-color: var(--olive-300);
  --bs-btn-hover-bg: var(--olive-100); --bs-btn-hover-color: var(--olive-800); --bs-btn-hover-border-color: var(--olive-400);
  --bs-btn-active-bg: var(--olive-100); --bs-btn-active-color: var(--olive-800); --bs-btn-active-border-color: var(--olive-400);
  background-color: var(--bs-btn-bg); border: 1px solid var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn-light:hover, .btn-default:hover, .btn-outline-primary:hover { background-color: var(--olive-100); color: var(--olive-800); }
.btn-link { color: var(--olive-700); }

/* ── Forms ── */
.form-control, .form-select, .input-group-text {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-card);
  color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
  border-color: var(--olive-700);
  box-shadow: var(--shadow-gold-glow);
  background-color: var(--surface-card);
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-sunken); }
.form-label, label { color: var(--olive-800); font-weight: 600; }
.form-check-input:checked { background-color: var(--olive-800); border-color: var(--olive-800); }
.form-check-input:focus { border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
.form-switch .form-check-input:checked { background-color: var(--olive-800); }
.invalid-feedback, .field-validation-error, .validation-summary-errors { color: var(--status-danger); }
.is-invalid, .input-validation-error { border-color: var(--status-danger) !important; }
.is-invalid:focus { box-shadow: 0 0 0 4px rgba(140,59,46,.18); }

/* ── Surfaces ── */
.card, .panel, .panel-inverse, .modal-content, .dropdown-menu, .accordion-item, .offcanvas {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.modal-content { box-shadow: var(--shadow-lg); border-radius: var(--radius-xl); }
.card-header, .panel-heading, .modal-header, .modal-footer, .accordion-button { background: transparent; border-color: var(--border-subtle); }
.accordion-button:not(.collapsed) { background: var(--olive-100); color: var(--olive-800); box-shadow: none; }
.accordion-button:focus { box-shadow: var(--shadow-gold-glow); border-color: var(--gold-400); }
hr { border-color: var(--border-subtle); opacity: 1; }
.note { border-inline-start: 3px solid var(--gold-500); background: var(--surface-accent-soft, var(--gold-100)); border-left-color: var(--gold-500); }
.table > :not(caption) > * > * { border-color: var(--border-subtle); }
.table thead th { background: var(--surface-sunken); color: var(--olive-800); }
.badge.bg-primary, .badge.bg-success { border-radius: var(--radius-pill); }
.alert { border-radius: var(--radius-md); }
.alert-success { background: var(--status-success-soft); border-color: var(--olive-300); color: var(--olive-800); }
.alert-danger  { background: var(--status-danger-soft); border-color: #e3c2ba; color: var(--status-danger); }
.alert-warning { background: var(--status-warning-soft); border-color: var(--gold-300); color: var(--gold-800); }
.alert-info    { background: var(--status-info-soft); border-color: #c4d3d8; color: var(--status-info); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: var(--olive-800); border-color: var(--gold-500); }
.nav-pills .nav-link.active { background: var(--olive-800); color: var(--sand-050); border-radius: var(--radius-pill); }
.page-link { color: var(--olive-800); }
.page-item.active .page-link { background: var(--olive-800); border-color: var(--olive-800); }
.progress-bar { background-color: var(--olive-600); }

/* ── Header / footer / sidebar ── */
.app-header { background: var(--olive-800); border-bottom: 2px solid var(--gold-500); box-shadow: var(--shadow-sm); }
.app-header .navbar-brand { display: flex; align-items: center; padding: 6px 12px; height: 66px; }
.app-header .navbar-brand img {
  height: 52px; width: auto;
  background: var(--surface-page);
  border-radius: var(--radius-md);
  padding: 2px 8px;
}
.app-header .navbar-nav .navbar-item .navbar-link,
.app-header .navbar-nav .navbar-item .navbar-link:hover { color: var(--sand-050); }
.app-header a:hover { color: var(--gold-300); }
.app-footer { background: var(--olive-900); color: var(--sand-100); border-top: 2px solid var(--gold-500); }
.app-footer a { color: var(--sand-100); }
.app-footer a:hover { color: var(--gold-400); }
.app-sidebar { background: var(--olive-800); }
.app-sidebar .menu .menu-item.active > .menu-link { background: var(--olive-700); box-shadow: inset 3px 0 0 var(--gold-500); }
[dir="rtl"] .app-sidebar .menu .menu-item.active > .menu-link { box-shadow: inset -3px 0 0 var(--gold-500); }
#content, .app-content { background: transparent; }

/* ── Kendo UI (default theme orange/grey → olive/gold) ── */
.k-widget, .k-input, .k-picker, .k-button, .k-grid, .k-calendar { font-family: var(--bs-body-font-family); }
.k-button-solid-primary, .k-primary {
  background-color: var(--olive-800); border-color: var(--olive-800); color: var(--sand-050);
  border-radius: var(--radius-pill);
}
.k-button-solid-primary:hover, .k-primary:hover { background-color: var(--olive-700); border-color: var(--olive-700); }
.k-input, .k-picker, .k-widget.k-input { border-radius: var(--radius-sm); border-color: var(--border-default); }
.k-input:focus-within, .k-picker:focus-within, .k-focus { border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
.k-calendar td.k-selected .k-link, .k-calendar td.k-state-selected .k-link,
.k-selected, .k-state-selected { background-color: var(--olive-800); color: var(--sand-050); border-color: var(--olive-800); }
.k-calendar td.k-today .k-link, .k-calendar .k-today { color: var(--gold-700); }
.k-calendar td:hover .k-link, .k-list-item:hover, .k-item:hover { background-color: var(--olive-100); color: var(--olive-800); }
.k-grid-header, th.k-header, .k-table-th { background: var(--surface-sunken); color: var(--olive-800); border-color: var(--border-subtle); }
.k-pager-wrap .k-link.k-selected, .k-pager-wrap .k-link.k-state-selected { background-color: var(--olive-800); color: var(--sand-050); }
.k-link, a.k-link { color: var(--olive-800); }
.k-loading-color { background-color: rgba(250,248,244,.8); }
.k-progressbar .k-selected, .k-progress-status-wrap { background-color: var(--olive-600); }
.k-upload .k-upload-button { border-radius: var(--radius-pill); }

/* ── SweetAlert ── */
.swal-modal { border-radius: var(--radius-xl); font-family: var(--bs-body-font-family); }
.swal-title { color: var(--olive-800); }
.swal-button { background-color: var(--olive-800); border-radius: var(--radius-pill); }
.swal-button:not([disabled]):hover { background-color: var(--olive-700); }
.swal-button--cancel { background-color: var(--sand-100); color: var(--olive-800); }
.swal-button--danger { background-color: var(--status-danger); }
.swal-button:focus { box-shadow: var(--shadow-gold-glow); }

/* ── Pace / loader ── */
.pace .pace-progress { background: var(--gold-500); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Logo lockup is an opaque raster on warm off-white: give it a soft plate on dark grounds */
img[src*="khutwa/logo-lockup"] { background: var(--surface-page); border-radius: var(--radius-md); padding: 2px 8px; width: auto; max-height: 90px; object-fit: contain; }
.app-header .navbar-brand img[src*="khutwa/logo-lockup"] { max-height: 52px; }

/* ── Gritter notifications ── */
#gritter-notice-wrapper .gritter-item {
  background: var(--olive-800); color: var(--sand-050);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  border-inline-start: 4px solid var(--gold-500);
}
#gritter-notice-wrapper .gritter-item .gritter-title,
#gritter-notice-wrapper .gritter-item p { color: var(--sand-050); font-family: var(--bs-body-font-family); text-shadow: none; }
#gritter-notice-wrapper .gritter-item a { color: var(--gold-300); }
#gritter-notice-wrapper .gritter-close { background-color: var(--gold-500); color: var(--olive-900); border-radius: var(--radius-pill); }