/* =============================================================
   COMPONENTS  —  variable-driven refinements over AdminLTE/BS4
   -------------------------------------------------------------
   We DO NOT replace Bootstrap/AdminLTE classes (they are baked
   into every template). We refine them through tokens so the
   look is centralized. Colors are preserved; we modernize
   surface, radius, shadow, focus and motion.
   ============================================================= */

/* BUTTONS live in buttons.css */

/* ---------------------------------------------------------------
   FORM CONTROLS  ·  inputs, selects, textareas
   --------------------------------------------------------------- */
.form-control,
.custom-select,
textarea.form-control {
  border-radius: var(--radius-small);
  border-color: var(--border-color);
  color: var(--text-primary);
  transition: border-color var(--speed-fast) var(--ease),
              box-shadow var(--speed-fast) var(--ease);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}
.form-control::placeholder { color: var(--text-muted); }

/* input groups line up with the token radius */
.input-group-text {
  border-radius: var(--radius-small);
  border-color: var(--border-color);
  background: var(--surface-2);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------
   CARDS  ·  softer elevation + consistent radius
   --------------------------------------------------------------- */
.card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  background: var(--surface);
  transition: box-shadow var(--animation-speed) var(--ease),
              transform var(--animation-speed) var(--ease);
}
.card:hover { box-shadow: var(--shadow-large); }

.card-header {
  border-top-left-radius: var(--radius-large);
  border-top-right-radius: var(--radius-large);
  border-bottom: 1px solid var(--border-color);
  font-weight: var(--fw-medium);
}
.card-footer {
  border-bottom-left-radius: var(--radius-large);
  border-bottom-right-radius: var(--radius-large);
  background: var(--surface-2);
}

/* Solid (colored) card headers — the section headers used across the app
   (سعر الذهب / سعر الدولار / الفاتوره …). Color-agnostic: a diagonal sheen
   layers over AdminLTE's solid background so every variant (secondary, info,
   primary, success, danger…) gains depth + polish without per-color rules. */
.card:not(.card-outline) > .card-header:not(.p-0) {
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0) 42%,
      rgba(0, 0, 0, 0.12) 100%);
  border-bottom: 0;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08),
              0 2px 6px rgba(16, 24, 40, 0.10);
  position: relative;
  color: #fff;
}
.card:not(.card-outline) > .card-header:not(.p-0),
.card:not(.card-outline) > .card-header:not(.p-0) .card-title,
.card:not(.card-outline) > .card-header:not(.p-0) a,
.card:not(.card-outline) > .card-header:not(.p-0) label,
.card:not(.card-outline) > .card-header:not(.p-0) h1,
.card:not(.card-outline) > .card-header:not(.p-0) h2,
.card:not(.card-outline) > .card-header:not(.p-0) h3,
.card:not(.card-outline) > .card-header:not(.p-0) h4 {
  color: #fff !important;
}
/* leading accent marker (start edge — RTL-aware) */
.card:not(.card-outline) > .card-header:not(.p-0)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18%;
  height: 64%;
  width: 4px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: rgba(255, 255, 255, 0.7);
}
.card:not(.card-outline) > .card-header .card-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: 0.2px;
  line-height: var(--lh-tight);
}
/* keep header action icons crisp on the tinted surface */
.card:not(.card-outline) > .card-header .card-tools .btn-tool {
  color: rgba(255, 255, 255, 0.85);
}
.card:not(.card-outline) > .card-header .card-tools .btn-tool:hover {
  color: #fff;
}

/* AdminLTE small-box (dashboard KPI tiles) */
.small-box {
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  transition: transform var(--animation-speed) var(--ease),
              box-shadow var(--animation-speed) var(--ease);
}
.small-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-large); }

/* ---------------------------------------------------------------
   TABLE COLUMN VISIBILITY  ·  the "الأعمدة" control injected above
   every report table by dist/js/table-colvis.js
   --------------------------------------------------------------- */
.colvis { position: relative; display: inline-block; margin: 0 0 10px; }

.colvis-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: color var(--speed-fast) var(--ease),
              border-color var(--speed-fast) var(--ease),
              background var(--speed-fast) var(--ease);
}
.colvis-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.colvis.has-hidden .colvis-btn { color: var(--accent); border-color: var(--accent); }

.colvis-badge {
  min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--accent-contrast, #fff);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.colvis-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
  z-index: 1050;
  min-width: 216px; max-height: 320px; overflow-y: auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-large);
  animation: ds-scale-in var(--speed-fast) var(--ease-out) both;
}
.colvis-menu.show { display: block; }

.colvis-head {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.colvis-head button {
  flex: 1; padding: 4px 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.colvis-head button:hover { color: var(--accent); border-color: var(--accent); }

.colvis-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin: 0;
  font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background var(--speed-fast) var(--ease);
}
.colvis-item:hover { background: var(--surface-hover); }
.colvis-item input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.colvis-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the control is a screen affordance — never print it */
@media print { .colvis { display: none !important; } }

/* ---------------------------------------------------------------
   TABLES  ·  cleaner rows, zebra, smooth hover, and a header that
   stays pinned to the top while the user scrolls down (app-wide).
   --------------------------------------------------------------- */
.table { color: var(--text-primary); }

/* Sticky header — pins on page scroll (layout isn't fixed) and on any
   scroll container (.ds-table-scroll / .table-responsive / .rpt-tablewrap)
   alike. A box-shadow underline is used instead of border-bottom because
   collapsed table borders don't travel with a position:sticky cell.
   The cell MUST stay opaque, otherwise rows scroll through it — hence the
   .gk-table-enhanced pairing below, which re-themes the flat #fff that
   dist/css/base-ui.css would otherwise win with (it is more specific). */
.table thead th,
.table thead td,
.table.gk-table-enhanced thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  background-clip: padding-box;
  color: var(--text-secondary);
  font-weight: var(--fw-bold);
  letter-spacing: .2px;
  white-space: nowrap;
  vertical-align: middle;
  border-top: 0;
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 var(--border-strong);
}
/* Grouped (multi-row) headers stack: dist/js/sticky-table-head.js measures
   each header row and writes the real offset onto the cells. This is only
   the no-JS fallback for the common two-row case. */
.table thead tr:nth-child(2) th,
.table thead tr:nth-child(2) td { top: 40px; }

/* the underline belongs to the last header row only */
.table thead tr:not(:last-child) th { box-shadow: none; }

.table td,
.table th {
  border-top-color: var(--border-color);
  vertical-align: middle;
}

/* gentle zebra for readability — row-level so explicitly coloured cells
   (which set their own td background) still show through. */
.table:not(.table-striped):not(.table-dark) tbody tr:nth-of-type(even) {
  background-color: var(--surface-2);
}

/* hover — the extra .table bumps specificity so it always wins over zebra */
.table-hover tbody tr { transition: background-color var(--speed-fast) var(--ease); }
.table.table-hover tbody tr:hover { background-color: var(--surface-hover); }

/* themed borders for bordered tables */
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--border-color); }

/* Bootstrap's .table-responsive only scrolls horizontally, which still makes
   it the table's scroll container — a sticky header inside it would pin to a
   box as tall as the table and therefore never move. Bounding it the same way
   as .ds-table-scroll is what makes those headers actually stay put. */
.table-responsive {
  border-radius: var(--radius-medium);
  max-height: 72vh;
  overflow: auto;
}

/* ---------------------------------------------------------------
   TABLE SCROLL CONTAINER  ·  keeps wide tables from overflowing the
   page. Both axes scroll INSIDE the box, so the sticky header pins to
   the box top while the user scrolls — horizontally and vertically.
   `.ds-table-scroll` is added automatically to any unwrapped .table
   by dist/js/table-scroll.js; `.rpt-tablewrap` is the manual variant.
   Token-driven → dark-mode + palette aware.
   --------------------------------------------------------------- */
.ds-table-scroll,
.rpt-tablewrap {
  max-height: 72vh;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-medium);
  background: var(--surface);
}
.ds-table-scroll > .table,
.rpt-tablewrap > .table { margin-bottom: 0; }

/* themed, thin scrollbars for the container (WebKit/Blink) */
.ds-table-scroll::-webkit-scrollbar,
.rpt-tablewrap::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
.ds-table-scroll::-webkit-scrollbar-thumb,
.rpt-tablewrap::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); border-radius: var(--radius-pill);
}
.ds-table-scroll::-webkit-scrollbar-thumb:hover,
.rpt-tablewrap::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ---------------------------------------------------------------
   STICKY HORIZONTAL SCROLLBAR  ·  proxy bar pinned to the bottom of
   the viewport, mirrored onto whichever wide scroll box is on screen
   (dist/js/sticky-hscroll.js). The box's own bar sits on its bottom
   edge — normally below the fold on a report — so sideways scrolling
   used to mean scrolling the page down first. This one is always
   reachable. Shown only while a box actually overflows sideways.
   --------------------------------------------------------------- */
.ds-hscroll {
  position: fixed;
  bottom: 0;
  height: 14px;            /* must match BAR_H in sticky-hscroll.js */
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 1035;           /* over the content, under Bootstrap modals (1050) */
  display: none;
  background: var(--surface-2);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .12);
}
.ds-hscroll.is-on { display: block; }
.ds-hscroll__inner { height: 1px; }

/* always visible thumb — this bar exists to be found, so no overlay fade */
.ds-hscroll::-webkit-scrollbar { height: 13px; }
.ds-hscroll::-webkit-scrollbar-track { background: transparent; }
.ds-hscroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
.ds-hscroll::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
.ds-hscroll { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* never clip the table when printing */
@media print {
  .ds-hscroll { display: none !important; }
  .ds-table-scroll,
  .rpt-tablewrap,
  .table-responsive { max-height: none; overflow: visible; border: 0; }
  .table thead th,
  .table thead td,
  .table.gk-table-enhanced thead th { position: static; }
}

/* Phones keep base-ui's behaviour: tables scroll sideways only and the header
   rides along, so nothing is bounded vertically and nothing pins. */
@media (max-width: 767.98px) {
  .gk-mobile-ui .ds-table-scroll,
  .gk-mobile-ui .table-responsive { max-height: none; }
  .gk-mobile-ui .table thead th,
  .gk-mobile-ui .table thead td,
  .gk-mobile-ui .table.gk-table-enhanced thead th { position: static; }
}

/* ---------------------------------------------------------------
   BADGES
   --------------------------------------------------------------- */
.badge { border-radius: var(--radius-pill); font-weight: var(--fw-medium); }

/* ---------------------------------------------------------------
   ALERTS
   --------------------------------------------------------------- */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-small);
}

/* ---------------------------------------------------------------
   DROPDOWNS  ·  soft entrance + elevated menu
   --------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-large);
  padding: var(--space-1) 0;
}
.dropdown-menu.show { animation: ds-scale-in var(--speed-fast) var(--ease-out) both; }
.dropdown-item {
  transition: background-color var(--speed-fast) var(--ease);
  border-radius: var(--radius-small);
}
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--surface-hover); }

/* ---------------------------------------------------------------
   MODALS  ·  gentle scale-in + rounded elevated dialog
   --------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-large);
}
.modal.show .modal-dialog { animation: ds-fade-in-up var(--animation-speed) var(--ease-out) both; }
.modal-header,
.modal-footer { border-color: var(--border-color); }

/* ---------------------------------------------------------------
   PAGINATION  ·  separated rounded pills, palette + dark-mode aware
   (authoritative — scoped under .pagination so it wins over AdminLTE,
    Bootstrap's white .page-link, and legacy custom.css rules)
   --------------------------------------------------------------- */
.pagination {
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}
.pagination .page-item { margin: 0; }
.pagination .page-link {
  min-width: 38px;
  height: 38px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-medium);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  transition: color var(--speed-fast) var(--ease),
              background-color var(--speed-fast) var(--ease),
              border-color var(--speed-fast) var(--ease),
              box-shadow var(--speed-fast) var(--ease),
              transform var(--speed-fast) var(--ease);
}
.pagination .page-link:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  z-index: 1;
}
.pagination .page-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pagination .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 2px 8px var(--accent-soft);
}
.pagination .page-item.active .page-link:hover {
  color: var(--accent-contrast);
}
.pagination .page-item.disabled .page-link {
  background: var(--surface-2);
  border-color: var(--border-color);
  color: var(--text-muted);
  opacity: 0.6;
}

/* ---------------------------------------------------------------
   CODE + NAME PICKER  ·  the "كود التاجر / اسم التاجر" pair
   -------------------------------------------------------------
   Used on the merchant-account screens (and anywhere else the same
   two fields sit in one cell). It replaces the ad-hoc
   `style="display:flex"` + `col-md-2` that used to size these:
   a grid column inside a flex row gave the code box a percentage
   width with 15px of Bootstrap gutter, so its placeholder was
   clipped and the two controls touched each other.
   --------------------------------------------------------------- */
.gk-picker {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.gk-picker > .form-control { min-width: 0; }

/* the code box: fixed and narrow, never a percentage of the cell */
.gk-picker > input.form-control {
  flex: 0 0 150px;
  width: 150px;
  max-width: 150px;
  padding-right: .5rem;
  padding-left: .5rem;
  text-align: center;
}

/* the name box: one fixed width on every screen, so the cell (and with
   it the whole column, since the table is auto-layout) comes out the
   same everywhere instead of stretching to the longest merchant name */
.gk-picker > select.form-control {
  flex: 1 1 auto;
  width: 320px;
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .gk-picker { flex-wrap: wrap; }
  .gk-picker > input.form-control { flex: 1 1 110px; width: auto; max-width: none; }
  .gk-picker > select.form-control { flex: 1 1 100%; width: auto; }
}