/* ==========================================================================
   Nizam compatibility layer
   --------------------------------------------------------------------------
   Maps the existing Bootstrap 3 / AdminLTE / DataTables / select2 / daisyUI
   markup onto the Nizam token system, so all ~137 views that extend
   layouts.app adopt the approved "Ledger + Nizam Blue" direction without
   their Blade being rewritten.

   Load order: tokens -> vendor.css -> rtl.css -> app.css -> THIS FILE.
   It is last so it wins, which is why `!important` appears sparingly here —
   only where AdminLTE or Bootstrap use higher specificity or inline styles.

   Rules:
     - every value comes from a --nz-* token, no literals
     - logical properties (inline-start/end) so RTL mirrors without extra CSS
     - existing class names and markup are untouched; this is purely visual
   ========================================================================== */

/* ── Brand: re-point the app's own theme variables at Nizam blue ──────────
   partials/css.blade.php emits --theme-700/800/900 from the business
   theme_color setting, and .theme-btn-bg / .theme-sidebar-active consume them.
   Overriding the variables means every existing theme-* class becomes Nizam
   blue with no markup change and no loss of the per-business mechanism.     */
:root{
  --theme-700: var(--nz-blue-600);
  --theme-800: var(--nz-blue-600);
  --theme-900: var(--nz-blue-700);
}

/* ── Typography ────────────────────────────────────────────────────────── */
body,
.content-wrapper, .main-footer,
button, input, select, textarea, .form-control{
  font-family: var(--nz-font) !important;
}
body{
  background: var(--nz-bg) !important;
  color: var(--nz-ink);
  font-size: var(--nz-text-base);
  line-height: var(--nz-lh-body);
  -webkit-font-smoothing: antialiased;
}
/* Headings need the font named explicitly, not inherited.

   AdminLTE declares `.h1..h6,h1..h6{font-family:'Source Sans Pro',sans-serif}`
   in vendor.css. A declaration on the element always beats a value inherited
   from body, whatever the specificity, so the body rule above never reached a
   heading. Source Sans Pro carries no Arabic glyphs, so every Arabic heading
   fell through to whatever the OS offered — a visibly different face from the
   Almarai used by the body, tables, buttons and the sidebar.

   `!important` for the same reason the body rule has it: module stylesheets
   are injected into the BODY, after this sheet, and win on source order. */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.box-title, .modal-title, .content-header > h1, legend{
  font-family: var(--nz-font) !important;
}
h1,h2,h3,h4,h5,h6{ font-weight: var(--nz-fw-bold); line-height: var(--nz-lh-tight); color: var(--nz-ink); }
h1{font-size:var(--nz-text-2xl)} h2{font-size:var(--nz-text-xl)} h3{font-size:var(--nz-text-lg)}
h4{font-size:var(--nz-text-base)} h5,h6{font-size:var(--nz-text-md)}
a{ color: var(--nz-brand); }
a:hover, a:focus{ color: var(--nz-brand-hover); }
small,.small{font-size:var(--nz-text-sm)}
hr{border-color:var(--nz-line)}

/* Keyboard focus is never invisible. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--nz-focus) !important;
  outline-offset: 2px;
}

/* ── Page chrome ───────────────────────────────────────────────────────── */
.content-header{
  padding: var(--nz-space-5) var(--nz-space-6) var(--nz-space-3);
  background: transparent;
}
.content-header > h1{
  font-size: var(--nz-text-2xl); font-weight: var(--nz-fw-bold); margin:0;
}
.content-header > h1 > small{
  display:block; font-size:var(--nz-text-md); color:var(--nz-ink-2);
  margin-block-start:var(--nz-space-1);
}
.content{ padding: var(--nz-space-2) var(--nz-space-6) var(--nz-space-8); }
.breadcrumb{
  background: transparent; padding: 0; margin-block-end: var(--nz-space-3);
  font-size: var(--nz-text-sm); border-radius: 0;
}
.breadcrumb > li + li::before{ color: var(--nz-ink-3); }
.breadcrumb a{ color: var(--nz-brand); }
.breadcrumb a:hover{ color: var(--nz-brand-hover); text-decoration: underline; }
/* Bootstrap paints the current crumb #777 — 3.07:1, measured. It is the one
   crumb naming where you are, so it should be the most legible, not the least. */
.breadcrumb > .active{ color: var(--nz-ink); font-weight: var(--nz-fw-bold); }

/* ── Shared card (components/widget.blade.php, 106 screens) ────────────────
   Matches .box exactly, so a widget and a panel sitting side by side read as
   the same object. Header is a direct child, so its rule is full-bleed.      */
.nz-card{
  background: var(--nz-surface);
  border: 1px solid var(--nz-line);
  border-radius: var(--nz-radius);
  box-shadow: none;
}
.nz-card > .box-header{
  border-block-end: 1px solid var(--nz-line);
  padding: var(--nz-space-3) var(--nz-space-4);
  border-radius: var(--nz-radius) var(--nz-radius) 0 0;
}
.nz-card > .box-header > .box-title{
  font-size: var(--nz-text-base); font-weight: var(--nz-fw-bold);
  line-height: var(--nz-lh-tight); color: var(--nz-ink);
}
.nz-card > .box-header > small{ color: var(--nz-ink-2); font-size: var(--nz-text-sm); }
.nz-card > .nz-card-body{ padding: var(--nz-space-4); }
/* A card whose only content is a full-width table should not inset it. */
.nz-card > .nz-card-body > .table-responsive:only-child,
.nz-card > .nz-card-body > .table:only-child{
  margin-block-end: 0;
}

/* ── Boxes / panels — hairlines, not shadows ───────────────────────────── */
.box, .panel, .nav-tabs-custom{
  background: var(--nz-surface);
  border: 1px solid var(--nz-line);
  border-block-start-width: 1px;
  border-radius: var(--nz-radius);
  box-shadow: none;
  margin-block-end: var(--nz-space-4);
}
.box-header, .panel-heading{
  border-block-end: 1px solid var(--nz-line);
  padding: var(--nz-space-3) var(--nz-space-4);
  background: var(--nz-surface);
  border-radius: var(--nz-radius) var(--nz-radius) 0 0;
}
.box-header .box-title, .panel-title{
  font-size: var(--nz-text-base); font-weight: var(--nz-fw-bold);
  line-height: var(--nz-lh-tight); color: var(--nz-ink);
}
.box-body, .panel-body{ padding: var(--nz-space-4); }
.box-footer, .panel-footer{
  background: var(--nz-surface-sunk); border-block-start: 1px solid var(--nz-line);
  padding: var(--nz-space-3) var(--nz-space-4);
}
/* AdminLTE's coloured solid boxes lose their loud headers. */
.box.box-solid > .box-header,
.box.box-primary > .box-header, .box.box-info > .box-header,
.box.box-success > .box-header, .box.box-warning > .box-header,
.box.box-danger  > .box-header, .box.box-default > .box-header{
  background: var(--nz-surface) !important;
  color: var(--nz-ink) !important;
}
.box.box-solid, .box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger, .box.box-default{
  border-block-start-color: var(--nz-line) !important;
}
.box-tools .btn-box-tool{ color: var(--nz-ink-3); }
.box-tools .btn-box-tool:hover{ color: var(--nz-brand); }

/* ── Buttons: Bootstrap ────────────────────────────────────────────────── */
.btn{
  font-family: var(--nz-font);
  font-size: var(--nz-text-md);
  font-weight: var(--nz-fw-bold);
  border-radius: var(--nz-radius);
  border: 1px solid transparent;
  padding: var(--nz-space-2) var(--nz-space-4);
  min-block-size: 36px;
  box-shadow: none;
  transition: background var(--nz-transition), border-color var(--nz-transition);
}
.btn:focus, .btn:active:focus{ outline-offset: 2px; }
.btn-primary, .btn-info{
  background: var(--nz-brand); border-color: var(--nz-brand); color: var(--nz-on-brand);
}
.btn-primary:hover, .btn-info:hover, .btn-primary:focus, .btn-info:focus,
.btn-primary:active, .btn-info:active{
  background: var(--nz-brand-hover); border-color: var(--nz-brand-hover); color: var(--nz-on-brand);
}
.btn-default, .btn-flat{
  background: var(--nz-surface); border-color: var(--nz-field-edge); color: var(--nz-ink);
}
.btn-default:hover, .btn-flat:hover{ background: var(--nz-surface-sunk); border-color: var(--nz-line-strong); }
.btn-success{ background: var(--nz-paid-fg); border-color: var(--nz-paid-fg); color: #fff; }
.btn-danger { background: var(--nz-due-fg);  border-color: var(--nz-due-fg);  color: #fff; }
.btn-warning{ background: var(--nz-overdue-fg); border-color: var(--nz-overdue-fg); color: #fff; }
.btn-link{ color: var(--nz-brand); }
.btn-xs{ font-size: var(--nz-text-xs); padding: 2px var(--nz-space-2); min-block-size: 26px; }
.btn-sm{ font-size: var(--nz-text-sm); padding: var(--nz-space-1) var(--nz-space-3); min-block-size: 32px; }
.btn-lg{ font-size: var(--nz-text-lg); padding: var(--nz-space-3) var(--nz-space-5); min-block-size: var(--nz-tap-min); }

/* ── Buttons: the prefixed daisyUI set used throughout this codebase ────── */
.tw-dw-btn{
  font-family: var(--nz-font) !important;
  font-weight: var(--nz-fw-bold);
  border-radius: var(--nz-radius) !important;
  min-height: 36px; height: auto;
  text-transform: none;
  box-shadow: none !important;
  transition: background var(--nz-transition), border-color var(--nz-transition);
}
.tw-dw-btn-primary{
  background-color: var(--nz-brand) !important;
  border-color: var(--nz-brand) !important;
  color: var(--nz-on-brand) !important;
}
.tw-dw-btn-primary:hover{
  background-color: var(--nz-brand-hover) !important;
  border-color: var(--nz-brand-hover) !important;
}
.tw-dw-btn-neutral{
  background-color: var(--nz-surface) !important;
  border-color: var(--nz-line-strong) !important;
  color: var(--nz-ink) !important;
}
.tw-dw-btn-neutral:hover{ background-color: var(--nz-surface-sunk) !important; }
/* Solid variants. */
.tw-dw-btn-info   { background-color: var(--nz-brand) !important;      border-color: var(--nz-brand) !important;      color: var(--nz-on-brand) !important; }
.tw-dw-btn-success{ background-color: var(--nz-paid-fg) !important;    border-color: var(--nz-paid-fg) !important;    color: #fff !important; }
.tw-dw-btn-error  { background-color: var(--nz-due-fg) !important;     border-color: var(--nz-due-fg) !important;     color: #fff !important; }
.tw-dw-btn-warning{ background-color: var(--nz-overdue-fg) !important; border-color: var(--nz-overdue-fg) !important; color: #fff !important; }

/* Outline variants MUST outrank the solid ones above. Both sets carry
   !important, so at equal specificity the later rule wins - which is how the
   row-action buttons in every DataTable ended up brand-blue text on a
   brand-blue fill, i.e. invisible. The extra .tw-dw-btn raises specificity so
   the transparent fill holds regardless of source order. */
.tw-dw-btn.tw-dw-btn-outline{ background-color: transparent !important; }
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary{ color: var(--nz-brand) !important;      border-color: var(--nz-brand) !important; }
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info   { color: var(--nz-brand) !important;      border-color: var(--nz-brand-edge) !important; }
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-error  { color: var(--nz-due-fg) !important;     border-color: var(--nz-due-edge) !important; }
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-success{ color: var(--nz-paid-fg) !important;    border-color: var(--nz-paid-fg) !important; }
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-warning{ color: var(--nz-overdue-fg) !important; border-color: var(--nz-overdue-fg) !important; }
.tw-dw-btn.tw-dw-btn-outline:hover{ background-color: var(--nz-surface-sunk) !important; }
.tw-dw-btn-xs{ min-height: 26px; font-size: var(--nz-text-xs); }
.tw-dw-btn-sm{ min-height: 32px; font-size: var(--nz-text-sm); }
.tw-dw-btn-lg{ min-height: var(--nz-tap-min); font-size: var(--nz-text-lg); }

/* Legacy inline Tailwind utilities that fight the direction.
   43 buttons carry `tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500` and
   72 carry `tw-rounded-full`. Utility classes beat class-based overrides, so
   these are the one place broad !important is justified. Flatten them to the
   brand rather than editing 100+ Blade files. */
.tw-dw-btn.tw-bg-gradient-to-r,
.tw-dw-btn[class*="tw-from-indigo"],
.tw-dw-btn[class*="tw-bg-indigo"],
a.tw-bg-gradient-to-r, button.tw-bg-gradient-to-r{
  background-image: none !important;
  background-color: var(--nz-brand) !important;
  color: var(--nz-on-brand) !important;
  border-color: var(--nz-brand) !important;
}
.tw-dw-btn.tw-bg-gradient-to-r:hover,
.tw-dw-btn[class*="tw-from-indigo"]:hover,
a.tw-bg-gradient-to-r:hover, button.tw-bg-gradient-to-r:hover{
  background-color: var(--nz-brand-hover) !important;
}
/* Pill buttons square off to the 3px system radius. Avatars and status dots
   keep their circle: only controls are targeted. */
.tw-dw-btn.tw-rounded-full,
button.tw-rounded-full, a.tw-dw-btn.tw-rounded-full{
  border-radius: var(--nz-radius) !important;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-group{ margin-block-end: var(--nz-space-4); }
.form-group > label, .control-label{
  font-size: var(--nz-text-sm); font-weight: var(--nz-fw-bold);
  color: var(--nz-ink-2); margin-block-end: var(--nz-space-1);
}
.form-control{
  background: var(--nz-surface);
  border: 1px solid var(--nz-field-edge);
  border-radius: var(--nz-radius);
  color: var(--nz-ink);
  font-size: var(--nz-text-md);
  block-size: 36px;
  padding: var(--nz-space-2) var(--nz-space-3);
  box-shadow: none;
  transition: border-color var(--nz-transition), box-shadow var(--nz-transition);
}
textarea.form-control{ block-size: auto; line-height: var(--nz-lh-body); }
.form-control:focus{
  border-color: var(--nz-brand);
  box-shadow: var(--nz-focus-ring);
  outline: none;
}
.form-control::placeholder{ color: var(--nz-ink-3); }
.form-control[disabled], .form-control[readonly]{ background: var(--nz-surface-sunk); color: var(--nz-ink-2); }
/* AdminLTE ships `.input-group .input-group-addon` at higher specificity, so
   the single-class form never reached it.

   The addon is filled with the brand rather than sunk: it carries the icon or
   the unit (%, currency, a calendar) that says what the field next to it is
   for, and a grey chip on a grey chrome read as another disabled input. White
   on --nz-brand measures 5.17:1, so the small glyphs in there stay legible. */
.input-group-addon,
.input-group .input-group-addon{
  background: var(--nz-brand);
  border: 1px solid var(--nz-brand);
  color: var(--nz-on-brand);
  font-size: var(--nz-text-sm);
  border-radius: var(--nz-radius);
}
/* One height for everything in an input group.

   The pieces were sizing themselves independently and disagreeing: a
   .form-control is 36px, a .btn is min 36px plus its two 1px borders (38),
   select2 renders its own 36px box, and on POS every .btn is bumped to the
   44px tap minimum while select2 stays at 36. The result is a field sitting
   visibly lower and shorter than the icon and button either side of it.

   Fixed heights rather than making .input-group a flex row: it is a Bootstrap
   3 table layout and the 1%-width addon sizing depends on that, which is a
   much larger thing to change than it looks.

   The -sm and -lg variants are excluded - a group that asked to be a
   different size should stay that size. */
.input-group:not(.input-group-sm):not(.input-group-lg) > .form-control,
.input-group:not(.input-group-sm):not(.input-group-lg) .input-group-addon,
.input-group:not(.input-group-sm):not(.input-group-lg) .input-group-btn > .btn,
.input-group:not(.input-group-sm):not(.input-group-lg) .select2-container .select2-selection--single,
.input-group:not(.input-group-sm):not(.input-group-lg) .select2-container .select2-selection--multiple{
  block-size: 36px;
  min-block-size: 36px;
}
/* select2 centres its text with a line-height, so the box and the text have
   to move together. */
.input-group:not(.input-group-sm):not(.input-group-lg) .select2-container .select2-selection--single .select2-selection__rendered{
  line-height: 34px;
}
.input-group:not(.input-group-sm):not(.input-group-lg) .select2-container .select2-selection--single .select2-selection__arrow{
  block-size: 34px;
}

.help-block{ font-size: var(--nz-text-sm); }   /* colour is set with !important further down */
.has-error .form-control{ border-color: var(--nz-due-fg); }
.has-error .help-block, .has-error .control-label{ color: var(--nz-due-fg); }
input[type="checkbox"], input[type="radio"]{ accent-color: var(--nz-brand); }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table{
  font-size: var(--nz-text-md);
  color: var(--nz-ink);
  margin-block-end: 0;
  background: var(--nz-surface);
}
.table > thead > tr > th{
  background: var(--nz-surface-sunk);
  color: var(--nz-ink-2);
  font-size: var(--nz-text-xs);
  font-weight: var(--nz-fw-bold);
  border-block-end: 1px solid var(--nz-line) !important;
  border-block-start: 0;
  padding: var(--nz-space-2) var(--nz-cell-pad-x);
  vertical-align: middle;
  white-space: nowrap;
}
.table > tbody > tr > td,
.table > tfoot > tr > td, .table > tfoot > tr > th{
  padding: var(--nz-row-pad-y) var(--nz-cell-pad-x);
  border-block-start: 1px solid var(--nz-line);
  vertical-align: middle;
  line-height: var(--nz-lh-tight);
}
.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th{
  border-color: var(--nz-line);
}
.table-striped > tbody > tr:nth-of-type(odd){ background: transparent; }
.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:hover{ background: var(--nz-surface-sunk); }
.table-condensed > tbody > tr > td{ padding: 5px var(--nz-space-2); }
.table-responsive{ border: 0; }
/* Digits line up in every table in the system. */
.table td, .table th{ font-variant-numeric: var(--nz-num); }

/* ── Status: kill colour-only encoding ─────────────────────────────────────
   @transaction_status / @payment_status emit these AdminLTE classes and
   nothing else. Give each a readable token pairing and a border so the state
   still reads at a glance for colour-blind users and in greyscale print.    */
.label, .badge{
  font-size: var(--nz-text-xs); font-weight: var(--nz-fw-bold);
  border-radius: var(--nz-radius); padding: 3px var(--nz-space-2);
  border: 1px solid transparent; line-height: 1.5;
}
.bg-light-green, .label-success, .badge-success,
.bg-green, .bg-olive{
  background: var(--nz-paid-bg) !important; color: var(--nz-paid-fg) !important;
  border-color: var(--nz-paid-edge) !important;
}
.bg-aqua, .label-info, .badge-info, .bg-blue, .bg-light-blue{
  background: var(--nz-brand-soft) !important; color: var(--nz-brand) !important;
  border-color: var(--nz-brand-edge) !important;
}
.bg-yellow, .label-warning, .badge-warning, .bg-orange{
  background: var(--nz-overdue-bg) !important; color: var(--nz-overdue-fg) !important;
  border-color: var(--nz-overdue-edge) !important;
}
.bg-red, .label-danger, .badge-danger, .bg-maroon{
  background: var(--nz-due-bg) !important; color: var(--nz-due-fg) !important;
  border-color: var(--nz-due-edge) !important;
}
.bg-gray, .label-default, .badge-default{
  background: var(--nz-partial-bg) !important; color: var(--nz-partial-fg) !important;
  border-color: var(--nz-partial-edge) !important;
}

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alert{
  border-radius: var(--nz-radius); border-width: 1px; padding: var(--nz-space-3) var(--nz-space-4);
  font-size: var(--nz-text-md);
}
/* !important is not decoration here. AdminLTE (bundled inside vendor.css)
   declares .alert-info, .bg-aqua, .label-info ... { background:#11CDEF
   !important }, so without it every info alert in the app kept rendering as
   white text on saturated cyan - 1.91:1, measured. Same for the other three. */
.alert-success{ background: var(--nz-paid-bg) !important;    border-color: var(--nz-paid-edge) !important;    color: var(--nz-paid-fg) !important; }
.alert-info   { background: var(--nz-brand-soft) !important; border-color: var(--nz-brand-edge) !important;   color: var(--nz-brand) !important; }
.alert-warning{ background: var(--nz-overdue-bg) !important; border-color: var(--nz-overdue-edge) !important; color: var(--nz-overdue-fg) !important; }
.alert-danger { background: var(--nz-due-bg) !important;     border-color: var(--nz-due-edge) !important;     color: var(--nz-due-fg) !important; }
.alert a, .alert .alert-link{ color: inherit !important; text-decoration: underline; }
/* Callouts share AdminLTE's palette and the same problem. */
.callout{ border-radius: var(--nz-radius); box-shadow: none; }
.callout.callout-info   { background: var(--nz-brand-soft) !important;  color: var(--nz-brand) !important;      border-inline-start: 3px solid var(--nz-brand) !important; }
.callout.callout-warning{ background: var(--nz-overdue-bg) !important;  color: var(--nz-overdue-fg) !important; border-inline-start: 3px solid var(--nz-overdue-fg) !important; }
.callout.callout-danger { background: var(--nz-due-bg) !important;      color: var(--nz-due-fg) !important;     border-inline-start: 3px solid var(--nz-due-fg) !important; }
.callout.callout-success{ background: var(--nz-paid-bg) !important;     color: var(--nz-paid-fg) !important;    border-inline-start: 3px solid var(--nz-paid-fg) !important; }

/* ── Modals ────────────────────────────────────────────────────────────── */
.modal-backdrop.in{ opacity: .45; background: #0B1220; }
.modal-content{
  background: var(--nz-surface);
  border: 1px solid var(--nz-line);
  border-radius: var(--nz-radius-lg);
  box-shadow: 0 12px 40px -12px rgba(15,23,42,.35);
}
.modal-header{
  border-block-end: 1px solid var(--nz-line);
  padding: var(--nz-space-4) var(--nz-space-5);
  display: flex; align-items: flex-start; gap: var(--nz-space-3);
}
.modal-title{
  font-size: var(--nz-text-lg); font-weight: var(--nz-fw-bold);
  line-height: var(--nz-lh-tight); flex: 1; margin: 0;
}
.modal-header .close{
  margin: 0; opacity: .6; font-size: 24px; line-height: 1;
  color: var(--nz-ink-2); text-shadow: none;
  min-inline-size: 32px; min-block-size: 32px;   /* was an unhittable 10px glyph */
}
.modal-header .close:hover{ opacity: 1; color: var(--nz-ink); }
.modal-body{ padding: var(--nz-space-5); font-size: var(--nz-text-md); }
.modal-footer{
  border-block-start: 1px solid var(--nz-line);
  padding: var(--nz-space-3) var(--nz-space-5);
  background: var(--nz-surface-sunk);
  border-radius: 0 0 var(--nz-radius-lg) var(--nz-radius-lg);
  display: flex; gap: var(--nz-space-2); justify-content: flex-end; flex-wrap: wrap;
}
.modal-footer > .btn + .btn, .modal-footer > .tw-dw-btn + .tw-dw-btn{ margin: 0; }
/* Long modals scroll inside themselves instead of running off the viewport. */
@media (min-width: 768px){
  .modal-body{ max-block-size: calc(100vh - 210px); overflow-y: auto; }
}
/* Full-width on phones. */
@media (max-width: 767px){
  .modal-dialog{ margin: var(--nz-space-2); }
  .modal-footer{ justify-content: stretch; }
  .modal-footer > .btn, .modal-footer > .tw-dw-btn{ flex: 1; }
}

/* ── Dropdowns ─────────────────────────────────────────────────────────── */
.dropdown-menu{
  background: var(--nz-surface);
  border: 1px solid var(--nz-line);
  border-radius: var(--nz-radius);
  box-shadow: var(--nz-shadow-lg);
  padding: var(--nz-space-1);
  font-size: var(--nz-text-md);
  min-inline-size: 180px;
}
.dropdown-menu > li > a{
  padding: var(--nz-space-2) var(--nz-space-3);
  border-radius: var(--nz-radius-sm);
  color: var(--nz-ink);
  display: flex; align-items: center; gap: var(--nz-space-2);
  min-block-size: 36px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
  background: var(--nz-surface-sunk); color: var(--nz-brand);
}
.dropdown-menu .divider{ background: var(--nz-line); margin: var(--nz-space-1) 0; }
/* RTL: Bootstrap 3 pins dropdowns to the left edge.
   Menus only. The date and time plugins borrow .dropdown-menu for its chrome
   but position themselves with an inline `left`, and they keep their own
   `direction: ltr` - so `inset-inline-end` resolves against THEIR direction and
   lands as `right: 0`. With `left` already set inline that is both edges
   pinned, and the panel stretched from wherever it opened to the viewport
   edge: a 210px calendar rendered 558px wide, over the sidebar. Their geometry
   belongs to the plugin. */
[dir="rtl"] .dropdown-menu:not(.datepicker):not(.daterangepicker):not(.bootstrap-datetimepicker-widget):not(.bootstrap-timepicker-widget){
  inset-inline-start: auto;
  inset-inline-end: 0;
  text-align: start;
}
[dir="rtl"] .dropdown-menu-left{ inset-inline-start: 0; inset-inline-end: auto; }

/* Belt and braces for the same class of bug from another sheet, written in the
   physical property the plugins themselves use. Only `right`, and only on the
   widgets that actually borrow .dropdown-menu - .daterangepicker does not, and
   sizing it here would be meddling with geometry that is not broken. */
[dir="rtl"] .datepicker.dropdown-menu,
[dir="rtl"] .bootstrap-datetimepicker-widget.dropdown-menu,
[dir="rtl"] .bootstrap-timepicker-widget.dropdown-menu{ right: auto; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.nav-tabs{ border-block-end: 1px solid var(--nz-line); }
.nav-tabs > li > a{
  border: 0; border-block-end: 2px solid transparent; border-radius: 0;
  color: var(--nz-ink-2); font-size: var(--nz-text-md); font-weight: var(--nz-fw-bold);
  padding: var(--nz-space-3) var(--nz-space-4); margin: 0;
}
.nav-tabs > li > a:hover{ background: transparent; color: var(--nz-ink); border-block-end-color: var(--nz-line-strong); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
  background: transparent; color: var(--nz-brand);
  border: 0; border-block-end: 2px solid var(--nz-brand);
}

/* ── DataTables ────────────────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: var(--nz-surface); border: 1px solid var(--nz-field-edge);
  border-radius: var(--nz-radius); color: var(--nz-ink);
  padding: var(--nz-space-1) var(--nz-space-2); min-block-size: 32px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color: var(--nz-brand); box-shadow: var(--nz-focus-ring); outline: none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  font-size: var(--nz-text-sm); color: var(--nz-ink-2);
}
/* .paginate_button means two different elements depending on which pagination
   DataTables renders: the <a> in its own markup, but the wrapping <li> under
   the Bootstrap integration this app uses. Styling it unconditionally drew a
   second, empty bordered chip next to every real pager button. Restricted to
   the anchor form; the <li> form is covered by .pagination > li > a above. */
.dataTables_wrapper .dataTables_paginate a.paginate_button{
  border-radius: var(--nz-radius) !important; border: 1px solid var(--nz-line) !important;
  background: var(--nz-surface) !important; color: var(--nz-ink-2) !important;
  padding: var(--nz-space-1) var(--nz-space-3) !important; margin-inline-start: 2px;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover{
  background: var(--nz-brand) !important; border-color: var(--nz-brand) !important;
  color: var(--nz-on-brand) !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
  background: var(--nz-surface-sunk) !important; color: var(--nz-brand) !important;
}
/* The <li> under the Bootstrap integration carries structure only. */
.dataTables_wrapper .dataTables_paginate li.paginate_button{
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{ cursor: pointer; }
.dt-buttons .dt-button{
  background: var(--nz-surface) !important; border: 1px solid var(--nz-field-edge) !important;
  border-radius: var(--nz-radius) !important; color: var(--nz-ink) !important;
  font-size: var(--nz-text-sm) !important; font-weight: var(--nz-fw-bold);
  padding: var(--nz-space-1) var(--nz-space-3) !important; box-shadow: none !important;
}
.dt-buttons .dt-button:hover{ background: var(--nz-surface-sunk) !important; }

/* ── Empty states ──────────────────────────────────────────────────────────
   DataTables renders "no data" as a bare cell. The strings are already
   translated (public/js/lang/*.js -> LANG.table_emptyTable); what was missing
   was any visual treatment, so an empty table read as a broken one. */
.dataTables_empty{
  padding: var(--nz-space-10) var(--nz-space-6) !important;
  text-align: center !important;
  color: var(--nz-ink-2);
  font-size: var(--nz-text-md);
  background: var(--nz-surface);
}
.dataTables_empty::before{
  content: "";
  display: block;
  inline-size: 40px; block-size: 40px;
  margin: 0 auto var(--nz-space-3);
  border-radius: 50%;
  background: var(--nz-surface-sunk);
  border: 1px solid var(--nz-line);
}

/* Blade-level empty state, for tables and lists that are not DataTables. */
.nz-empty-state{
  /* Flex column rather than text-align: inside a DataTables empty cell the
     inline svg would not centre with the sentence. */
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--nz-space-10) var(--nz-space-6);
  color: var(--nz-ink-2);
}
.nz-empty-state h4{
  margin: var(--nz-space-3) 0 var(--nz-space-1);
  font-size: var(--nz-text-lg); color: var(--nz-ink);
}
.nz-empty-state p{ margin: 0 auto var(--nz-space-4); max-inline-size: 46ch; }
.nz-empty-state svg{ color: var(--nz-ink-3); }
/* Inside a table cell the state is a row, not a page, so it needs less room
   and no trailing margin under the sentence. */
td .nz-empty-state, .dataTables_empty .nz-empty-state{
  padding: var(--nz-space-6) var(--nz-space-4);
}
td .nz-empty-state p, .dataTables_empty .nz-empty-state p{ margin-block-end: 0; }
.dataTables_empty{ text-align: center !important; }

/* ── Permission-denied state ───────────────────────────────────────────────
   Paired with the JSON 403 envelope in App\Exceptions\Handler. Where a panel
   is gated, this is what stands in for it - a calm explanation, not an error. */
/* A single cell the role may not see: withheld, not empty. A blank money
   column cannot be told apart from a customer who genuinely owes nothing. */
.nz-cell-restricted{
  color: var(--nz-ink-3);
  cursor: help;
  border-block-end: 1px dotted var(--nz-line-strong);
}
.nz-restricted{
  display: flex; align-items: flex-start; gap: var(--nz-space-3);
  background: var(--nz-surface-sunk);
  border: 1px dashed var(--nz-line-strong);
  border-radius: var(--nz-radius);
  padding: var(--nz-space-4);
  color: var(--nz-ink-2); font-size: var(--nz-text-md);
}
.nz-restricted svg{
  inline-size: 18px; block-size: 18px; flex: none;
  color: var(--nz-ink-3); stroke-width: 1.8;
}
.nz-restricted strong{ color: var(--nz-ink); font-weight: var(--nz-fw-bold); }

/* ── select2 ───────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  background: var(--nz-surface); border: 1px solid var(--nz-field-edge);
  border-radius: var(--nz-radius); min-block-size: 36px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--nz-ink); line-height: 34px; font-size: var(--nz-text-md);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ block-size: 34px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color: var(--nz-brand); box-shadow: var(--nz-focus-ring);
}
.select2-dropdown{
  background: var(--nz-surface); border-color: var(--nz-line-strong);
  border-radius: var(--nz-radius);
  /* Every floating surface reads the same: dropdown, select2, popover, modal. */
  box-shadow: var(--nz-shadow-lg);
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background: var(--nz-brand); color: var(--nz-on-brand);
}
.select2-container--default .select2-results__option[aria-selected=true]{
  background: var(--nz-brand-soft); color: var(--nz-brand);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background: var(--nz-brand-soft); border-color: var(--nz-brand-edge);
  color: var(--nz-brand); border-radius: var(--nz-radius-sm);
}
/* select2 keeps the remove control white for its own dark chip. On the token
   chip that is white-on-pale - the x that removes a selection was invisible
   in every multi-select in the app. */
.select2-container--default .select2-selection__choice__remove{
  color: var(--nz-brand) !important;
  opacity: 1 !important;
  margin-inline-end: 4px;
  font-weight: var(--nz-fw-bold);
}
.select2-container--default .select2-selection__choice__remove:hover{
  color: var(--nz-due-fg) !important;
}
.select2-search__field{ font-family: var(--nz-font); }

/* ── Pagination (Laravel / Bootstrap) ──────────────────────────────────── */
/* The theme gives .pagination > li a background, border and padding of its
   own, but the visible button is the floated <a> inside it. Every pager
   therefore drew a small empty bordered box beside each control. The li is
   structure; only the anchor is a button. */
.pagination > li{
  background: transparent; border: 0; padding: 0;
  display: inline-block; vertical-align: middle;
}
.pagination > li > a, .pagination > li > span{
  color: var(--nz-ink-2); border-color: var(--nz-line); background: var(--nz-surface);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover{
  background: var(--nz-brand); border-color: var(--nz-brand); color: var(--nz-on-brand);
}
.pagination > li > a:hover{ background: var(--nz-surface-sunk); color: var(--nz-brand); }

/* ── toastr / sweetalert ───────────────────────────────────────────────── */
#toast-container > div{
  border-radius: var(--nz-radius); box-shadow: 0 8px 24px -10px rgba(15,23,42,.4);
  opacity: 1; font-family: var(--nz-font); font-size: var(--nz-text-md);
}
#toast-container > .toast-success{ background-color: var(--nz-paid-fg); }
#toast-container > .toast-error  { background-color: var(--nz-due-fg); }
#toast-container > .toast-info   { background-color: var(--nz-brand); }
#toast-container > .toast-warning{ background-color: var(--nz-overdue-fg); }
.swal-modal{ border-radius: var(--nz-radius-lg); font-family: var(--nz-font); }
.swal-title{ font-size: var(--nz-text-xl); font-weight: var(--nz-fw-bold); color: var(--nz-ink); }
.swal-text{ font-size: var(--nz-text-md); color: var(--nz-ink-2); }
.swal-button{
  background: var(--nz-brand); border-radius: var(--nz-radius);
  font-family: var(--nz-font); font-weight: var(--nz-fw-bold); font-size: var(--nz-text-md);
}
.swal-button:not([disabled]):hover{ background: var(--nz-brand-hover); }
.swal-button--cancel{ background: var(--nz-surface-sunk); color: var(--nz-ink); }

/* ── AdminLTE stat widgets ─────────────────────────────────────────────── */
.small-box, .info-box{
  background: var(--nz-surface) !important;
  border: 1px solid var(--nz-line);
  border-radius: var(--nz-radius);
  box-shadow: none !important;
  color: var(--nz-ink) !important;
}
.small-box > .inner h3, .info-box-number{
  color: var(--nz-ink) !important; font-weight: var(--nz-fw-bold);
  font-variant-numeric: var(--nz-num);
}
.small-box > .inner p, .info-box-text{ color: var(--nz-ink-2) !important; font-size: var(--nz-text-sm); }
.small-box .icon{ color: var(--nz-line-strong) !important; opacity: 1; }
.small-box > .small-box-footer{
  background: var(--nz-surface-sunk) !important; color: var(--nz-brand) !important;
}
/* AdminLTE lays .info-box out with float:left on the icon and a 90px
   margin-left on the content. Both are physical, so in Arabic the icon floats
   to one edge while the content is pushed away from the other and the card
   visibly comes apart - which is exactly how the SaaS dashboard rendered.
   Flex row instead: no floats, no magic offset, correct in both directions. */
.info-box{
  display: flex; align-items: stretch;
  min-block-size: 78px; overflow: hidden;
}
.info-box-icon{
  background: var(--nz-brand-soft) !important;
  color: var(--nz-brand) !important;
  float: none !important;
  inline-size: 78px; block-size: auto !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: var(--nz-text-xl); line-height: 1;
  border-radius: 0;
  border-start-start-radius: var(--nz-radius);
  border-end-start-radius: var(--nz-radius);
}
.info-box-content{
  margin: 0 !important;
  padding: var(--nz-space-3) var(--nz-space-4) !important;
  display: flex; flex-direction: column; justify-content: center;
  flex: 1; min-inline-size: 0;
}
/* isolate keeps the digits in their own run so "79.99" cannot reorder inside
   Arabic text. Not direction:ltr - that would also drag the number to the
   physical left of an Arabic card, away from where the label starts. */
.info-box-number{ unicode-bidi: isolate; font-variant-numeric: var(--nz-num); }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
#side-bar{ background: var(--nz-surface); border-inline-end: 1px solid var(--nz-line); }
#side-bar a{ font-size: var(--nz-text-md); border-radius: var(--nz-radius); }
#side-bar a svg, #side-bar a i{ color: var(--nz-ink-3); }
#side-bar a:hover svg, #side-bar a:hover i,
#side-bar a.theme-sidebar-active svg, #side-bar a.theme-sidebar-active i{ color: var(--nz-brand); }
#side-bar .theme-sidebar-active{
  background: var(--nz-brand-soft) !important; color: var(--nz-brand) !important;
  font-weight: var(--nz-fw-bold);
}

/* ── Utility corrections ───────────────────────────────────────────────── */
.well{ background: var(--nz-surface-sunk); border-color: var(--nz-line); border-radius: var(--nz-radius); box-shadow: none; }
.list-group-item{ border-color: var(--nz-line); background: var(--nz-surface); }
.text-muted{ color: var(--nz-ink-2) !important; }
.close{ text-shadow: none; }
code, kbd, pre, samp, .ws-nowrap{ font-variant-numeric: var(--nz-num); }

/* ── RTL corrections for the legacy layer ──────────────────────────────────
   Bootstrap 3 and AdminLTE are LTR-first and rtl.css only patches some of it.
   These are the cases that still leak in Arabic.                            */
/* NOT repeated here: .pull-left/.pull-right/.text-left/.text-right/.close.
   public/css/rtl.css already flips all five, and it is loaded only for RTL
   locales. Duplicating them was a mistake in the first pass - same result, two
   sources of truth. rtl.css owns them; this file does not.

   What follows is genuinely additive - either rtl.css does not cover it, or it
   exists because this layer restyled the component in the first place. */
/* Bootstrap drops the addon's joining border with physical properties, which
   point the wrong way in Arabic. Re-stated logically - and in the addon's own
   colour, since it is filled: a grey line here would draw a stripe down the
   outer edge of a blue chip. */
[dir="rtl"] .input-group-addon:first-child{ border-inline-end: 0; border-inline-start: 1px solid var(--nz-brand); }
[dir="rtl"] .input-group-addon:last-child{ border-inline-start: 0; border-inline-end: 1px solid var(--nz-brand); }
[dir="rtl"] .breadcrumb{ padding-inline-start: 0; }
/* .modal-footer became a flex container in this file, so rtl.css's
   text-align:left no longer positions its buttons. */
[dir="rtl"] .modal-footer{ justify-content: flex-start; }

/* Tailwind ships no logical utilities in this build (tw-ms-/tw-me-/tw-ps-/
   tw-pe-/tw-start-/tw-end- are all absent from the prebuilt tailwind/app.css),
   so the physical ones cannot simply be swapped in the Blade. There are only
   22 occurrences across four classes; flip them here instead. */
[dir="rtl"] .tw-border-r{ border-inline-end: 0; border-inline-start: 1px solid var(--nz-line); }
[dir="rtl"] .tw-border-l{ border-inline-start: 0; border-inline-end: 1px solid var(--nz-line); }
[dir="rtl"] .tw-text-left{ text-align: right; }
[dir="rtl"] .tw-text-right{ text-align: left; }
/* Numeric ratios, references and money reorder inside RTL text unless isolated. */
[dir="rtl"] .dataTables_info,
[dir="rtl"] .pagination,
[dir="rtl"] .ws-nowrap{ unicode-bidi: isolate; }

/* Mixed Arabic/English: invoice numbers, SKUs, emails, phone numbers must not
   reorder when they sit inside an Arabic sentence. */
[dir="rtl"] .display_currency,
[dir="rtl"] td [data-orig-value]{ unicode-bidi: isolate; }

/* ── Low-contrast leftovers the audit caught ───────────────────────────────
   Measured, not guessed: the footer ran 4.16:1 and DataTables' pager 4.48:1,
   both under the 4.5:1 floor. --nz-ink-2 (#5A6673) clears it on every ground
   these sit on (6.0:1 on white, 5.33:1 on the footer's #EEF2F6).            */
footer .tw-text-gray-500,
footer .tw-text-gray-500 *,
.main-footer, .main-footer *{ color: var(--nz-ink-2) !important; }
/* :not(.active) matters. DataTables renders the current page as
   li.paginate_button.active > a, which .pagination > .active > a already
   paints brand-on-white; a blanket colour here outranks it and turns the
   current page number invisible. */
.dataTables_paginate li:not(.active) > a,
.dataTables_info, .dataTables_length, .dataTables_filter{ color: var(--nz-ink-2) !important; }
.dataTables_paginate li.active > a,
.dataTables_paginate .paginate_button.current{
  color: var(--nz-on-brand) !important; background: var(--nz-brand) !important;
  border-color: var(--nz-brand) !important;
}
.dataTables_paginate li.disabled > a,
.dataTables_paginate .paginate_button.disabled{ color: var(--nz-ink-3) !important; }

/* ── Guided tour (public/js/help-tour.js) ──────────────────────────────────
   The tour ships Prev and Next as .btn-success, so the first thing a new user
   sees is two green buttons in a blue product, with no indication which one
   moves them forward. Restyled here only - the script is untouched.          */
.popover.tour{
  background: var(--nz-surface);
  border: 1px solid var(--nz-line);
  border-radius: var(--nz-radius);
  box-shadow: var(--nz-shadow-lg);
  padding: 0;
}
.popover.tour .popover-title{
  background: var(--nz-surface-sunk); color: var(--nz-ink);
  border-block-end: 1px solid var(--nz-line);
  font-size: var(--nz-text-base); font-weight: var(--nz-fw-bold);
  padding: var(--nz-space-3) var(--nz-space-4);
}
.popover.tour .popover-content{
  color: var(--nz-ink-2); padding: var(--nz-space-4);
  line-height: var(--nz-lh-body);
}
.popover.tour .popover-navigation{
  display: flex; gap: var(--nz-space-2); align-items: center;
  padding: 0 var(--nz-space-4) var(--nz-space-4);
}
/* One forward action, and it is the brand colour. */
.popover.tour .popover-navigation .btn[data-role="next"]{
  background: var(--nz-brand) !important; border-color: var(--nz-brand) !important;
  color: var(--nz-on-brand) !important; order: 3;
}
.popover.tour .popover-navigation .btn[data-role="prev"]{
  background: var(--nz-surface) !important; border-color: var(--nz-line-strong) !important;
  color: var(--nz-ink-2) !important; order: 2;
}
.popover.tour .popover-navigation .btn[data-role="end"]{
  background: transparent !important; border-color: transparent !important;
  color: var(--nz-ink-3) !important; order: 1; margin-inline-end: auto;
}
.popover.tour .popover-navigation .btn[data-role="end"]:hover{
  color: var(--nz-ink) !important; text-decoration: underline;
}

/* ── Semantic text colours ─────────────────────────────────────────────────
   The theme's .text-success is #2DCE89 - 2.04:1 on white. On the Profit &
   Loss report that colour carries "Gross Profit" and "Net Profit", so the two
   numbers the whole report exists to show were its least readable text.
   .text-danger (#F5365C) ran 3.77:1. Both now use the status tokens, which
   were picked against the 4.5:1 floor and already appear on every status
   label in the app, so profit reads the same green as a Paid badge.         */
.text-success, .text-success *{ color: var(--nz-paid-fg) !important; }
.text-danger,  .text-danger  *{ color: var(--nz-due-fg) !important; }
.text-warning, .text-warning *{ color: var(--nz-overdue-fg) !important; }
.text-info,    .text-info    *{ color: var(--nz-brand-hover) !important; }
/* Solid backgrounds still want white text, so do not let the above leak in. */
.bg-success .text-success, .bg-danger .text-danger,
.label .text-success, .label .text-danger{ color: inherit !important; }

/* Small print and secondary utilities. Both sat at 4.16-4.48:1. */
/* inherit was the wrong default: inside AdminLTE's .profile-username and the
   heading styles, small then picked up #777 (4.48:1). An explicit token is
   the only way to hold the floor wherever these appear. */
small, .small{ color: var(--nz-ink-2); }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small{
  color: var(--nz-ink-2);
}
.text-muted small, small.text-muted, .help-block{ color: var(--nz-ink-2) !important; }
.tw-text-gray-500, .tw-text-gray-500 *{ color: var(--nz-ink-2) !important; }
.dataTables_wrapper small{ color: var(--nz-ink-2); }

/* Placeholders are the accessible name when a field has no visible label,
   so they hold to the same floor. select2 shipped #999 (2.85:1). */
.select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
::placeholder{ color: var(--nz-ink-3) !important; opacity: 1; }

/* Active item in a list-group nav (business settings' section switcher).
   The theme leaves the white text but drops the background, so the section
   you are on is the one you cannot read. */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus{
  background: var(--nz-brand) !important;
  border-color: var(--nz-brand) !important;
  color: var(--nz-on-brand) !important;
}
.list-group-item.active *{ color: var(--nz-on-brand) !important; }

/* ── Disabled controls that still carry information ───────────────────────
   daisyUI fades a disabled button to 20% alpha - 1.54:1, measured. That is
   defensible for a control nobody can press, but this app uses disabled
   buttons as read-only markers: the "Default" flag on an invoice scheme is
   one. A label the user is meant to read has to be readable, so disabled
   drops to muted ink rather than near-invisible, and loses its fill and
   pointer affordance instead so it still reads as inert.                    */
.tw-dw-btn:disabled, .tw-dw-btn[disabled], .tw-dw-btn.tw-dw-btn-disabled,
.btn:disabled, .btn.disabled, fieldset[disabled] .btn{
  /* ink-2, not ink-3: on the sunk surface ink-3 measures 4.37:1, just under
     the floor. Measured on the "Default" marker at /invoice-schemes. */
  color: var(--nz-ink-2) !important;
  background-color: var(--nz-surface-sunk) !important;
  border-color: var(--nz-line) !important;
  opacity: 1 !important;
  cursor: default;
  box-shadow: none !important;
}
.tw-dw-btn:disabled:hover, .btn:disabled:hover, .btn.disabled:hover{
  background-color: var(--nz-surface-sunk) !important;
  color: var(--nz-ink-2) !important;
}
/* A disabled form field is different: it must read as a value, not a label. */
.form-control:disabled, .form-control[readonly],
input:disabled, select:disabled, textarea:disabled{
  background-color: var(--nz-surface-sunk) !important;
  color: var(--nz-ink) !important;
  opacity: 1;
}

/* ── Numeric columns ───────────────────────────────────────────────────────
   Applied by public/js/nizam-tables.js, which infers which columns hold
   figures from their rendered content. Money and quantities end-align so the
   digits stack, and isolate so a Latin-digit amount keeps its own order
   inside an Arabic row.                                                     */
.nz-col-num{
  text-align: end;
  font-variant-numeric: var(--nz-num);
  unicode-bidi: isolate;
  white-space: nowrap;
}
th.nz-col-num{ text-align: end; }
/* DataTables puts its sort arrows in ::after on the header; keep them beside
   the label rather than pushed to the far edge of a now end-aligned cell. */
table.dataTable thead th.nz-col-num{ padding-inline-start: var(--nz-space-4); }
@media print{
  .nz-col-num{ text-align: end; }
}

/* ── iCheck checkboxes and radios (48 views) ───────────────────────────────
   iCheck draws its controls from a raster sprite in AdminLTE's blue, which is
   not the brand blue, cannot be recoloured, and blurs on a HiDPI screen. The
   sprite is dropped and the control drawn in CSS from the tokens instead.
   iCheck still owns the behaviour - it toggles .checked/.disabled/.hover on
   the wrapper and keeps the real input in sync - so form submission, the
   ifChanged event and every existing handler are untouched.                 */
.icheckbox_square-blue,
.iradio_square-blue{
  background-image: none !important;
  inline-size: 18px !important; block-size: 18px !important;
  border: 1px solid var(--nz-field-edge);
  background-color: var(--nz-surface);
  border-radius: var(--nz-radius);
  position: relative;
  transition: background-color var(--nz-transition), border-color var(--nz-transition);
}
.iradio_square-blue{ border-radius: 50%; }
.icheckbox_square-blue.hover,
.iradio_square-blue.hover{ border-color: var(--nz-brand); }
.icheckbox_square-blue.checked,
.iradio_square-blue.checked{
  background-color: var(--nz-brand);
  border-color: var(--nz-brand);
}
/* The tick is drawn, not sprited, so it stays sharp at any pixel density. */
.icheckbox_square-blue.checked::after{
  content: '';
  position: absolute;
  inset-inline-start: 5px; inset-block-start: 1px;
  inline-size: 5px; block-size: 10px;
  border: solid var(--nz-on-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.iradio_square-blue.checked::after{
  content: '';
  position: absolute; inset: 4px;
  border-radius: 50%; background: var(--nz-on-brand);
}
.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled{
  background-color: var(--nz-surface-sunk);
  border-color: var(--nz-line);
  opacity: 1;
}
.icheckbox_square-blue.disabled.checked,
.iradio_square-blue.disabled.checked{
  background-color: var(--nz-ink-3); border-color: var(--nz-ink-3);
}
/* iCheck hides the real input, so the ring has to go on the wrapper. */
.icheckbox_square-blue:focus-within,
.iradio_square-blue:focus-within{
  outline: 2px solid var(--nz-focus); outline-offset: 2px;
}

/* ── Arbitrary Tailwind colour values ──────────────────────────────────────
   A handful of views hardcode hex and rgb() straight into Tailwind arbitrary
   utilities, which no token can reach and no theme setting can change. They
   are mapped here rather than edited across twenty Blade files, so the change
   is one place and reverts cleanly. Every pairing below was failing:

     #646EE4 indigo with white text   4.29:1  (POS header pills, action bar)
     rgb(40,183,123) with white text  2.58:1  (the POS Cash button)
     slate-400 as body text           2.56:1  (POS hints, secondary labels)   */
[class*="tw-bg-[#646EE4]"],
[class*="tw-bg-[#414aac]"]{
  background-color: var(--nz-brand) !important;
  color: var(--nz-on-brand) !important;
}
[class*="tw-bg-[#646EE4]"]:hover,
[class*="tw-bg-[#414aac]"]:hover{ background-color: var(--nz-brand-hover) !important; }
[class*="tw-text-[#646EE4]"]{ color: var(--nz-brand) !important; }
[class*="tw-bg-[rgb(40,183,123)]"]{
  background-color: var(--nz-paid-fg) !important;   /* 7.13:1 with white */
  color: #fff !important;
}
[class*="tw-bg-[rgb(40,183,123)]"]:hover{
  background-color: color-mix(in srgb, var(--nz-paid-fg) 85%, #000) !important;
}
/* slate-400 is the theme's "quiet text" and it does not clear the floor on
   any surface in this app - as text or as an icon, which needs 3:1. */
.tw-text-slate-400, .tw-text-gray-400{ color: var(--nz-ink-3) !important; }
/* Neutral arbitrary fills line up with the token surfaces. */
[class*="tw-bg-[#f8fafc]"], [class*="tw-bg-[#f3f4f6]"]{ background-color: var(--nz-surface-sunk) !important; }
[class*="tw-bg-[#e2e8f0]"]{ background-color: var(--nz-line) !important; }

/* ── Coloured section headers in the product forms ─────────────────────────
   app.css paints .add-product-price-table th, .table-th-green th and
   .blue-header th as solid Bootstrap green/blue bands with white text -
   2.48:1 on the green, measured across eight header cells of the variation
   pricing table. The colour is carrying real meaning there (it separates the
   pricing block from the stock block), so it is kept as a rule above the
   header rather than dropped: the grouping still reads, and the label is
   legible. app.css itself is left untouched. */
.add-product-price-table th,
.table-th-green th{
  background-color: var(--nz-surface-sunk) !important;
  color: var(--nz-ink) !important;
  border-block-start: 2px solid var(--nz-paid-fg) !important;
}
.blue-header th{
  background-color: var(--nz-surface-sunk) !important;
  color: var(--nz-ink) !important;
  border-block-start: 2px solid var(--nz-brand) !important;
}

/* ── Sign-in screens ───────────────────────────────────────────────────────
   layouts/auth2.blade.php styles its links tw-text-white, which was written
   for a dark backdrop the page no longer has: on the light ground the
   language switcher and the "Sign In" link were white on #F7F8F9 - measured
   invisible. Scoped to .nz-auth on the body, and only for links and the
   dropdown summary, so the Login button (which sets its own background) keeps
   its white label.                                                          */
.nz-auth a.tw-text-white,
.nz-auth a.tw-text-white:hover,
.nz-auth summary.tw-text-white,
.nz-auth .tw-text-white.tw-bg-transparent{
  color: var(--nz-brand) !important;
}
.nz-auth a.tw-text-white:hover{ color: var(--nz-brand-hover) !important; text-decoration: underline; }
/* A plain in-context link. Replaces the gradient-clipped text on the
   forgot-password link, which painted as a pale smudge on the white card. */
.nz-link{
  color: var(--nz-brand);
  text-decoration: none;
}
.nz-link:hover, .nz-link:focus{ color: var(--nz-brand-hover); text-decoration: underline; }
/* The auth card matches the rest of the system rather than floating. */
.nz-auth .tw-bg-white{ border-radius: var(--nz-radius-lg, 6px); }

/* ── Touch targets on checkbox rows ────────────────────────────────────────
   Measured at tablet width: the iCheck box renders 18x18 and its label row
   22px tall. Both are under the 24px comfortable minimum, and this system is
   operated on a shop tablet. The box grows slightly and the label row gets
   real vertical padding, which is where most of the hit area comes from.
   The role-permission grid is excluded: it stacks ~200 checkboxes and a
   taller row there costs more in scrolling than it gains in reach.          */
.icheckbox_square-blue,
.iradio_square-blue{ inline-size: 20px !important; block-size: 20px !important; }
.icheckbox_square-blue.checked::after{ inset-inline-start: 6px; inset-block-start: 2px; }

/* Not every checkbox sits in a .checkbox wrapper - the contact filters put
   the input straight inside a <label> in a .form-group - so the row is
   matched by what it contains rather than by a class it may not have. */
.checkbox label, .radio label,
.checkbox-inline, .radio-inline,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
label:has(> .icheckbox_square-blue),
label:has(> .iradio_square-blue){
  min-block-size: 28px;
  display: inline-flex; align-items: center; gap: var(--nz-space-2);
  padding-block: var(--nz-space-1);
}
.check_group .checkbox label,
.check_group .radio label,
.check_group label:has(> input[type="checkbox"]),
.check_group label:has(> input[type="radio"]),
.check_group label:has(> .icheckbox_square-blue),
.check_group label:has(> .iradio_square-blue){
  min-block-size: 0; padding-block: 0;
}
/* At the counter the target is a finger, not a pointer. */
body.lockscreen .checkbox label,
body.lockscreen .radio label,
body.lockscreen label:has(> input[type="checkbox"]),
body.lockscreen label:has(> .icheckbox_square-blue){ min-block-size: var(--nz-tap-min); }
body.lockscreen .icheckbox_square-blue,
body.lockscreen .iradio_square-blue{ inline-size: 24px !important; block-size: 24px !important; }
body.lockscreen .icheckbox_square-blue.checked::after{ inset-inline-start: 8px; inset-block-start: 3px; block-size: 12px; }

/* ── Badge inside a button ─────────────────────────────────────────────────
   Bootstrap inverts a badge that sits inside a button: it paints the badge
   white and gives its TEXT the button's own background colour. On the amber
   .btn-warning that is #f0ad4e on white — 1.95:1, for what is usually a
   count someone is meant to read at a glance.

   The button already carries the colour signal; the number just has to be
   legible. AdminLTE declares its badge colours !important inside vendor.css,
   so this has to as well. */
.btn > .badge,
.btn .badge {
  color: var(--nz-ink) !important;
  background-color: #fff !important;
}

/* ── Support-access banner ─────────────────────────────────────────────────
   Rendered by layouts/partials/header for a superadmin acting as a tenant
   user. It sits in the top bar on every screen of the impersonated session,
   so it has to read as a warning at a glance and never as chrome.

   Amber, not red: nothing is broken and nothing is being deleted. The
   overdue tokens are the existing "attention, not danger" pair and measure
   5.39:1 for the text on the fill.

   Logical properties throughout — this bar mirrors in Arabic. */
.nz-impersonation-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--nz-space-2);
  padding-block: var(--nz-space-1);
  padding-inline: var(--nz-space-3);
  margin-inline: var(--nz-space-2);
  border: 1px solid var(--nz-overdue-edge);
  border-radius: var(--nz-radius-lg);
  background-color: var(--nz-overdue-bg);
  color: var(--nz-overdue-fg);
  font-size: 12px;
  line-height: 1.4;
  max-inline-size: 100%;
}
.nz-impersonation-bar__text {
  /* The username and the business name are identifiers; keep them from
     reordering inside an Arabic sentence. */
  unicode-bidi: isolate;
}
.nz-impersonation-bar__form { display: inline; margin: 0; }
.nz-impersonation-bar__exit { white-space: nowrap; }
.nz-impersonation-bar__exit-short { display: none; }

/* On a phone the banner would take the whole top bar and push the header
   controls onto a second row, so it drops to the one part that can be acted
   on. Nothing is lost that a person needs there: whose session this is is
   already visible in the user menu, and the button says where it leads. The
   chrome goes with the text - a lone button inside an amber pill reads as a
   warning about the button rather than about the session. */
@media (max-width: 767px){
  .nz-impersonation-bar{
    padding: 0;
    margin-inline: var(--nz-space-1);
    border: 0;
    background: none;
  }
  .nz-impersonation-bar__icon,
  .nz-impersonation-bar__text,
  .nz-impersonation-bar__exit-long { display: none; }
  .nz-impersonation-bar__exit-short { display: inline; }
}

/* ── Search inputs ─────────────────────────────────────────────────────────
   Filled, not white: a search box is a different thing from a data field, and
   on a screen that is mostly white cards a white search box disappears into
   them.

   The darker ground moves two contrast floors, so both are restated here
   rather than inherited: the placeholder goes to --nz-ink-2 (--nz-ink-3
   measures 4.00:1 on this fill, under the 4.5:1 text floor) and the boundary
   goes to --nz-ink-3 (--nz-field-edge measures 2.72:1, under the 3:1 WCAG
   1.4.11 asks of a control's edge).

   The focus ring is left alone: it is drawn in the brand colour against the
   page, not against the fill. */
.nz-search-field,
input[type="search"],
.dataTables_wrapper .dataTables_filter input,
.select2-search__field,
#search_product{
  background-color: var(--nz-search-bg);
  border-color: var(--nz-ink-3);
  color: var(--nz-ink);
}
/* !important because a global `::placeholder{ color: var(--nz-ink-3) !important }`
   sits earlier in this file, put there to beat AdminLTE. Specificity does not
   help against it. */
.nz-search-field::placeholder,
input[type="search"]::placeholder,
.dataTables_wrapper .dataTables_filter input::placeholder,
.select2-search__field::placeholder,
#sidebar-search::placeholder,
#search_product::placeholder{
  color: var(--nz-ink-2) !important;
}
/* The sidebar menu search is a pill wrapping a transparent input, so the fill
   belongs to the wrapper.

   Its border is not decorative here: #e7e7e7 against the white sidebar is
   1.19:1, so the fill alone does not mark where the control is and the edge
   has to do it. --nz-ink-3 measures 4.01:1 on the fill; --nz-line-strong,
   which it had, measures 1.34:1. */
.nz-search-pill{
  background-color: var(--nz-search-bg) !important;
  border-color: var(--nz-ink-3) !important;
}

/* ── Sidebar brand strip ───────────────────────────────────────────────────
   Replaces the tenant's business name at the top of the menu with the Nizam
   wordmark (resources/views/layouts/partials/sidebar.blade.php).

   The strip is a LIGHT surface on purpose. public/img/logo-small.png is dark
   indigo ink on a transparent ground; on the old .theme-logo-bg — the themed
   blue, as dark as #00359E — it measured all but invisible. Anyone swapping
   this back to a dark ground needs a white-knockout asset first.

   60px matches lg:tw-h-15 on the main header, so the wordmark and the header
   bar share one baseline across the top of the screen.                       */
.nz-sidebar-brand{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 60px;
  padding-inline: var(--nz-space-4);
  background: var(--nz-surface);
  border-block-end: 1px solid var(--nz-line);
  text-decoration: none;
}
.nz-sidebar-brand:hover,
.nz-sidebar-brand:focus{ background: var(--nz-surface-sunk); text-decoration: none; }
.nz-sidebar-brand:focus-visible{ outline: none; box-shadow: inset var(--nz-focus-ring); }

.nz-sidebar-brand-mark{
  block-size: 26px;
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  display: block;
}