/* ------------------------------------------------------------------
   FILE: static/css/app.css
   PURPOSE: The app's own look, on top of Bootstrap: the Arabic font,
            the top bar, side menu / phone bottom bar, number styling,
            and iPhone "safe area" spacing.
   RULES: use "logical" sides (inline-start / inline-end) instead of
          left / right, so the layout mirrors by itself in Arabic.
   ------------------------------------------------------------------ */

/* ---------- Font: IBM Plex Sans Arabic (stored in static/vendor, no internet needed) ---------- */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.4fa3d81d41ab.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.64891a810259.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-700-normal.a4390abc98c2.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-latin-400-normal.4767e1197706.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-latin-600-normal.f417eeb0d15e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-latin-700-normal.8d04403cf599.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Colours and basic sizes (one place to change the look) ---------- */
:root {
  --app-primary: #0f5132;          /* dark green: top bar, main buttons */
  --app-primary-light: #e8f3ee;    /* light green: highlights */
  --app-bg: #f5f6f8;               /* page background */
  --app-header-height: 56px;
  --app-sidebar-width: 240px;
  --app-bottom-nav-height: 64px;
  --bs-body-font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-primary: #0f5132;
  --bs-primary-rgb: 15, 81, 50;
  --bs-link-color: #0f5132;
  --bs-link-color-rgb: 15, 81, 50;
}

body {
  background: var(--app-bg);
  font-family: var(--bs-body-font-family);
}

/* ---------- Top bar ---------- */
/* The green bar also fills the iPhone notch / status-bar area (the installed app draws under it,
   "black-translucent"), so its buttons always stay below the notch, also when the page scrolls. */
.app-header {
  background: var(--app-primary);
  min-height: var(--app-header-height);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.app-header .navbar-brand { min-width: 0; }
.app-brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

/* ---------- Page body: side menu (desktop) + main content ---------- */
.app-shell { display: flex; min-height: calc(100vh - var(--app-header-height)); }
.app-main {
  flex: 1 1 auto;
  min-width: 0;                    /* lets wide tables scroll inside their box instead of widening the page */
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
.page-narrow { max-width: 720px; margin-inline: auto; }

/* ---------- Buttons big enough for a thumb (44 x 44 px, docs/09 §8) ---------- */
.btn-tap { min-height: 44px; min-width: 44px; }
.form-control, .form-select { min-height: 44px; }
/* Tick boxes: a bigger box, and the whole row (box + label) is a 44 px tall tap area. */
.form-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding-inline-start: 0; margin-bottom: 0; }
.form-check .form-check-input { float: none; flex-shrink: 0; width: 1.4em; height: 1.4em; margin: 0; }
.form-check .form-check-label { flex: 1 1 auto; padding-block: .6rem; cursor: pointer; }
.form-check-inline { display: inline-flex; margin-inline-end: 1rem; }
/* Close (X) buttons: a 44 px tap area around the small cross. */
.btn-close { box-sizing: border-box; width: 2.75rem; height: 2.75rem; padding: 0; background-position: center;
  background-size: .9em; }
/* "Filters" and other fold headings: the whole line is tappable and 44 px tall. */
details > summary { padding-block: .65rem; cursor: pointer; }
/* Small buttons become thumb-sized on phones. */
@media (max-width: 575.98px) {
  .btn-sm { min-height: 44px; padding-block: .5rem; }
}

/* ---------- Numbers ---------- */
/* Numbers always read left-to-right, use equal-width digits so columns line up,
   and never break in the middle. */
.num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* In tables, numbers line up on the "end" side (right in English, left in Arabic). */
td.num, th.num { text-align: end; }
.num-negative { color: #b02a37; }

/* ---------- Tables scroll inside their own box on phones ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Messages ---------- */
.app-messages { max-width: 960px; margin-inline: auto; }

/* ---------- Side menu (desktop, 992 px and wider) ---------- */
.app-sidebar {
  width: var(--app-sidebar-width);
  flex: 0 0 var(--app-sidebar-width);
  background: #fff;
  border-inline-end: 1px solid #dee2e6;
  padding: .75rem .5rem;
  position: sticky;
  top: var(--app-header-height);
  height: calc(100vh - var(--app-header-height));
  overflow-y: auto;
}
.app-sidebar .nav-link {
  color: #343a40;
  border-radius: .5rem;
  padding: .55rem .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.app-sidebar .nav-link:hover { background: var(--app-primary-light); }
.app-sidebar .nav-link.active { background: var(--app-primary); color: #fff; }

/* ---------- Phone bottom bar (docs/05 §19.1) ---------- */
.app-bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-top: 1px solid #dee2e6;
  /* Keep the bar above the iPhone home indicator. */
  padding-bottom: env(safe-area-inset-bottom);
  min-height: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom));
}
.app-bottom-item {
  flex: 1 1 0;
  min-width: 44px;
  min-height: var(--app-bottom-nav-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #495057;
  text-decoration: none;
  font-size: .75rem;
  background: none;
  border: 0;
}
.app-bottom-item .bi { font-size: 1.35rem; line-height: 1; }
.app-bottom-item.active { color: var(--app-primary); font-weight: 600; }
.app-bottom-add .bi {
  background: var(--app-primary);
  color: #fff;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Leave room at the bottom of every page so the bar never covers content. */
@media (max-width: 991.98px) {
  body.has-app-nav .app-main {
    padding-bottom: calc(var(--app-bottom-nav-height) + 1.5rem + env(safe-area-inset-bottom));
  }
}

/* ---------- Bottom sheets ("+" and "More") ---------- */
.app-sheet { border-top-left-radius: 1rem; border-top-right-radius: 1rem; height: auto; max-height: 75vh; }
.app-sheet-tall { max-height: 85vh; }
.app-sheet .offcanvas-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.app-sheet-button { min-height: 72px; display: flex; flex-direction: column; justify-content: center; }
.app-list-tap { min-height: 48px; }

/* ---------- Cards, lists, forms ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1rem;
}
.page-header h1 { margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.form-actions .btn { min-height: 44px; }
.status-badge { font-weight: 500; }
.audit-changes { font-size: .85rem; }
.station-tile { min-height: 64px; }

/* ---------- Main buttons in the app's green ---------- */
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: #0b3d26;
  --bs-btn-hover-border-color: #0b3d26;
  --bs-btn-active-bg: #082c1b;
  --bs-btn-active-border-color: #082c1b;
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary);
  --bs-btn-active-border-color: var(--app-primary);
}
.list-group-item.active { background-color: var(--app-primary); border-color: var(--app-primary); }

/* ---------- Daily sales entry form (docs/05 §19.3) ---------- */
.stock-card > summary, .product-block > summary { cursor: pointer; list-style: none; min-height: 44px; }
.stock-card > summary::-webkit-details-marker, .product-block > summary::-webkit-details-marker { display: none; }
/* The fold arrow of the stock / product headings turns when a section is folded. */
.fold-chevron { display: inline-block; transition: transform .15s; margin-inline-end: .35rem; }
details:not([open]) > summary .fold-chevron { transform: rotate(-90deg); }
[dir="rtl"] details:not([open]) > summary .fold-chevron { transform: rotate(90deg); }
/* The formatted amount under a number field ("1,000,000"), so a missing zero is easy to see. */
.formatted-hint { min-height: 1.2em; }
.hose-card {
  border: 1px solid #dee2e6;
  border-radius: .75rem;
  padding: .75rem;
  background: #fff;
}
.hose-card.is-invalid-card { border-color: #dc3545; background: #fff5f5; }
.counter-input { font-size: 1.35rem; font-variant-numeric: tabular-nums; text-align: center; }
.product-total { color: #495057; }
.stock-summary { border-top: 1px dashed #ced4da; padding-top: .75rem; }

/* The bar fixed at the bottom with totals and Save; on phones it sits just above the bottom menu. */
.save-bar {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border-top: 1px solid #dee2e6;
  padding: .5rem 1rem;
  margin-inline: -1rem;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}
@media (max-width: 991.98px) {
  body.has-app-nav .save-bar { bottom: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom)); }
}

/* ---------- Printing (record print view, vouchers, reports): only the page content ---------- */
.print-only { display: none; }
@media print {
  .app-header, .app-sidebar, .app-bottom-nav, .app-messages, .no-print, .offcanvas { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; padding: 0; }
  .app-main { padding: 0; }
  .card { border: 0; box-shadow: none; }
  a { text-decoration: none; color: inherit; }
  @page { size: A4; margin: 12mm; }
}
.signature-line { border-top: 1px solid #000; padding-top: .25rem; margin-top: 3rem; text-align: center; }
.page-wide { max-width: 1100px; margin-inline: auto; }

/* ---------- Reports (docs/07): voided rows greyed; tables never wider than their box ---------- */
.row-voided td { color: var(--bs-secondary-color); text-decoration: line-through; }
.report-table th { white-space: nowrap; }
.report-notes { padding-inline-start: 1.25rem; }

/* A number on its own line follows the page direction (right in Arabic), next to its label. */
[dir="rtl"] div.num, [dir="rtl"] dd.num { text-align: right; }

/* Printing: a row shown only on paper (e.g. the signature lines) keeps its columns side by side. */
@media print {
  .row.print-only { display: flex; }
}

/* ---------- Install the app: a small banner above the phone bottom bar (docs/05 §19.5) ---------- */
.app-install-banner {
  position: fixed;
  inset-inline: .75rem;
  bottom: calc(var(--app-bottom-nav-height, 0px) + .75rem + env(safe-area-inset-bottom));
  z-index: 1040;
}
.app-install-banner[hidden], [data-install-app][hidden] { display: none !important; }
@media print { .app-install-banner { display: none !important; } }