@import url('/fonts/cairo-local.css');

/* ===========================================================================
   إدارة طلبات العملاء — design tokens
   Palette sampled from the real brand assets: the gold ramp and teal come from
   ref/bin/Debug/logo.png, the balance red from FrmCashCalc.designer.cs:405, the
   table surface from InitReport.cs:171, the divider from FrmAbout.designer.cs:43.
   =========================================================================== */
:root {
  /* Brand gold. The metallic ramp is for the logo lockup only — a flat gold is
     used for UI fills. #CFA650 does NOT reach 4.5:1 on white, so gold TEXT uses
     the dark stop and gold FILLS carry near-black text. */
  --gold-300: #E8C166;
  --gold-500: #CFA650;
  --gold-600: #B88A30;
  --gold-800: #99731C;
  --gold-ink: #2A2013;

  /* Brand teal — navigation and headers. */
  --teal-400: #7FA8AD;
  --teal-600: #5D9EA6;
  --teal-800: #3F7078;

  /* Semantic. --due is the single most loaded colour in the app: money owed. */
  --due: #C00000;
  --ok: #1B7F4B;
  --warn: #B8860B;
  --danger: #C0392B;

  --ink: #1E1E1E;
  --ink-soft: #5A5A5A;
  --ink-faint: #8A8A8A;
  --surface: #FFFFFF;
  --surface-2: #F7F7F5;
  --surface-3: #F5F5F5;
  --divider: #E0E0E0;
  --ground: #F2F1EE;

  --radius-field: 6px;
  --radius-card: 12px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .12);

  --topbar-h: 56px;
  --side-w: 260px;
  --side-w-collapsed: 64px;

  --font: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;

  /* Bootstrap overrides so its components inherit the brand. */
  --bs-primary: var(--teal-600);
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--ground);
  --bs-border-color: var(--divider);
}

/* ---------------------------------------------------------------------------
   Base. 15px, not the legacy 11px Tahoma.
   --------------------------------------------------------------------------- */
html { font-size: 15px; }

body {
  font-family: var(--font);
  background: var(--ground);
  color: var(--ink);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

a { color: var(--teal-800); text-decoration: none; }
a:hover { color: var(--teal-600); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   RTL and the deliberate LTR islands.
   The legacy app set RightToLeft.No on exactly these field kinds
   (FrmAppInfo.designer.cs:162,244,269,296) and it was right: a reversed
   05xxxxxxxx is unreadable.
   --------------------------------------------------------------------------- */
.ltr-field {
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Money and any numeric column: tabular figures so digits line up vertically. */
.num, .money, td.num, th.num {
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

.money-due { color: var(--due); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Shell: top bar + right-hand sidebar
   --------------------------------------------------------------------------- */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-inline: 1rem;
}

.topbar .brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.topbar .brand img { height: 30px; width: auto; }

.shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--topbar-h)); }

/* Sidebar sits on the RIGHT because the page is Arabic. */
.sidebar {
  width: var(--side-w);
  flex: 0 0 var(--side-w);
  background: var(--surface);
  border-inline-start: 1px solid var(--divider);
  padding: .75rem;
}

.sidebar .nav-link {
  color: var(--ink);
  border-radius: var(--radius-field);
  padding: .55rem .7rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .15rem;
  font-weight: 500;
}

.sidebar .nav-link:hover { background: var(--surface-3); text-decoration: none; }

.sidebar .nav-link.active {
  background: var(--teal-600);
  color: #fff;
}

.sidebar .nav-link .count {
  margin-inline-start: auto;
  background: var(--due);
  color: #fff;
  border-radius: 999px;
  font-size: .75rem;
  padding: .05rem .45rem;
  font-variant-numeric: tabular-nums;
}

.sidebar .nav-link.active .count { background: #fff; color: var(--teal-800); }

.content {
  flex: 1 1 auto;
  min-width: 0;            /* lets inner tables scroll instead of the page */
  padding: 1.25rem 1rem;
  max-width: 1320px;
}

/* ---------------------------------------------------------------------------
   Cards, KPIs
   --------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--surface);
}

.kpi { display: block; color: inherit; }
.kpi:hover { text-decoration: none; transform: translateY(-1px); }
.kpi .kpi-label { font-size: .85rem; color: var(--ink-soft); }
.kpi .kpi-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kpi .kpi-unit { font-size: .8rem; color: var(--ink-faint); }
.kpi.kpi-due .kpi-value { color: var(--due); }

/* ---------------------------------------------------------------------------
   Status badges. Colour is never the only cue — each carries an icon, because
   some staff cannot distinguish the three hues.
   --------------------------------------------------------------------------- */
.state {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.state-success { background: #E7F4EC; color: #146B3E; border-color: #BFE3CE; }
.state-warning { background: #FDF3DC; color: #8A6400; border-color: #F0DCA8; }
.state-danger  { background: #FBE9E7; color: var(--due); border-color: #F2C4BE; }

/* ---------------------------------------------------------------------------
   Tables. The orders grid has 14 columns — the table scrolls inside its own
   frame and the page never scrolls sideways.
   --------------------------------------------------------------------------- */
.table-frame {
  overflow-x: auto;
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.table { margin: 0; }

.table > thead > tr > th {
  padding-block: .65rem;
  background: var(--surface-3);
  border-bottom: 1px solid var(--divider);
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
  color: var(--ink-soft);
  position: sticky;
  top: 0;
  z-index: 2;
}

.table > tbody > tr > td { vertical-align: middle; font-size: .9rem; padding-block: .65rem; }
.table > tbody > tr:hover > td { background: #EAF3F4; }   /* teal-tinted, replacing the legacy #C0FFFF */

/* Totals row, pinned to the bottom of the frame. */
.table tfoot td {
  background: var(--surface-3);
  border-top: 2px solid var(--divider);
  font-weight: 600;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.table-dense > tbody > tr > td,
.table-dense > thead > tr > th { padding-block: .5rem; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn { border-radius: var(--radius-field); font-weight: 500; }

.btn-gold {
  background: var(--gold-500);
  border-color: var(--gold-600);
  color: var(--gold-ink);
}
.btn-gold:hover { background: var(--gold-600); border-color: var(--gold-800); color: #fff; }

.btn-teal { background: var(--teal-600); border-color: var(--teal-800); color: #fff; }
.btn-teal:hover { background: var(--teal-800); color: #fff; }

.btn-icon { padding: .25rem .45rem; line-height: 1; }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.form-label { font-size: .85rem; font-weight: 500; color: var(--ink-soft); margin-bottom: .25rem; }

/* Every field a user can type in is WHITE — that is the signal for "you can
   edit this". Bootstrap derives .form-control's background from --bs-body-bg,
   which is the off-white page ground here, so without this the fields would
   blend into the page and look read-only. */
.form-control,
.form-select,
textarea.form-control,
.input-group > .form-control,
.form-check-input {
  background-color: var(--surface);
  border-radius: var(--radius-field);
  border-color: var(--divider);
}

/* Keep the white even inside a tinted card or filter bar. */
.card .form-control,
.card .form-select,
.filter-bar .form-control,
.filter-bar .form-select,
.bg-body-tertiary .form-control,
.bg-body-tertiary .form-select { background-color: var(--surface); }

.form-control:focus, .form-select:focus {
  background-color: var(--surface);
  border-color: var(--teal-400);
  box-shadow: 0 0 0 .2rem rgba(127, 168, 173, .25);
}

/* The inverse of the rule above: anything NOT editable is visibly grey, so the
   distinction actually carries information. Computed fields such as «المتبقي»
   and the auto-assigned «الرقم» land here. */
.form-control[readonly],
.form-select[disabled],
.form-control:disabled,
.form-select:disabled,
.form-control[readonly]:focus {
  background-color: var(--surface-3);
  color: var(--ink-soft);
  box-shadow: none;
}

/* A readonly field inside an input-group (e.g. المتبقي) must stay grey even
   though the group-level rule above paints controls white. */
.input-group > .form-control[readonly] { background-color: var(--surface-3); }

.filter-bar { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-card); padding: .85rem; }

/* The WhatsApp state dot in the topbar, sitting where the notification badge
   sits on the bell beside it. Colour is set by app.js: success / warning /
   secondary for linked / unlinked / service down. */
.wa-dot {
  position: absolute;
  top: 0;
  inset-inline-start: 100%;
  transform: translate(50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

/* Tom Select, nudged to match Bootstrap field metrics in RTL — and white, like
   every other editable field. Tom Select renders its own div over the <select>,
   so it does not inherit the .form-select rules above. */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.focus .ts-control {
  background-color: var(--surface) !important;
  border-radius: var(--radius-field);
  border-color: var(--divider);
  min-height: 38px;
  font-family: var(--font);
}
.ts-wrapper.focus .ts-control { border-color: var(--teal-400); }
.ts-wrapper.disabled .ts-control { background-color: var(--surface-3) !important; }
.ts-dropdown { font-family: var(--font); text-align: right; background: var(--surface); }

/* Required fields carry a red asterisk on the label, so «إجباري» is visible
   up front rather than only in the error list after a failed save. */
.form-label.req::after { content: " *"; color: var(--due); font-weight: 700; }

/* Tom Select paints its own control, so Bootstrap's .is-invalid never reaches
   it. The class goes on the wrapper instead (see checkRequiredSelects). */
.ts-wrapper.is-invalid .ts-control { border-color: var(--due) !important; }
.ts-wrapper.is-invalid.focus .ts-control { box-shadow: 0 0 0 .2rem rgba(192, 0, 0, .2); }

/* flatpickr in an RTL page */
.flatpickr-calendar { font-family: var(--font); direction: rtl; }

/* ---------------------------------------------------------------------------
   Modals
   --------------------------------------------------------------------------- */
/* Bootstrap's .modal-dialog-scrollable assumes .modal-body is a DIRECT child of
   .modal-content. Every modal partial here puts <form> in between (header, then
   form wrapping body + footer), so the body never inherits a height to scroll
   inside and .modal-content's own overflow:hidden clips the long forms instead
   — بطاقة طلب most of all. Hand the flex behaviour to the form. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; }
.modal-dialog-scrollable .modal-content > form > .modal-footer { flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Empty / loading states
   --------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty-state .empty-icon { font-size: 2.5rem; opacity: .35; margin-bottom: .5rem; }
.empty-state.empty-good { color: var(--ok); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, #ECECEC 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: sk 1.2s ease infinite;
  border-radius: var(--radius-field);
  height: 1rem;
}
@keyframes sk { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ---------------------------------------------------------------------------
   Phone. Tables become cards; nothing scrolls sideways.
   --------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%;
    flex: 0 0 auto;
    border-inline-start: 0;
    border-bottom: 1px solid var(--divider);
  }
  .content { padding-inline: 1rem; max-width: 100%; }
}

@media (max-width: 576px) {
  html { font-size: 14.5px; }
  .content { padding-inline: 1rem; }
  .kpi .kpi-value { font-size: 1.4rem; }
  /* Touch targets never below 44px. */
  .btn, .form-control, .form-select { min-height: 44px; }
  .btn-icon { min-height: 38px; }
}

/* ---------------------------------------------------------------------------
   Print. PDF and report output will move to FastReport later; these rules only
   make the browser's own print view usable in the meantime.
   --------------------------------------------------------------------------- */
@media print {
  .topbar, .sidebar, .filter-bar, .no-print, .btn { display: none !important; }
  .shell, .content { display: block; max-width: none; padding: 0; }
  .table-frame { border: 0; overflow: visible; }
  body { background: #fff; }

  /* Screen rows are roomier; paper keeps the tighter grid so a printed report
     still fits the same number of lines per page. */
  .table > thead > tr > th,
  .table > tbody > tr > td { padding-block: .35rem; }
}