/*
 * Hiba POS design system v1.0 (Oct 2026), web layer.
 *
 * Loaded after tailwind/app.css, vendor.css (Bootstrap 3 + AdminLTE) and
 * app.css, so equal-specificity rules here win. There is no Node build in
 * the repo, which is why this is plain CSS over the compiled builds instead
 * of a Tailwind config change.
 *
 * Paper and ink everywhere; the accent (Teal 700 by default, or the
 * business's chosen theme colour through --theme-*) marks the one thing to
 * tap. Semantic colours always travel with a word. Hairlines and one soft
 * shadow give depth; the dashboard overview adds a light theme tint.
 */

:root {
    --hiba-teal-700: #0E7A75;
    --hiba-teal-800: #0B5F5B;
    --hiba-teal-100: #D9F1EE;
    --hiba-teal-300: #4FC1BC;
    --hiba-saffron-500: #F5A524;
    --hiba-saffron-100: #FFF1D6;

    --hiba-success: #1B7A45;
    --hiba-success-bg: #DFF4EA;
    --hiba-success-ink: #145C36;
    --hiba-warning: #A15C00;
    --hiba-warning-bg: #FFF1E6;
    --hiba-warning-ink: #7A3E00;
    --hiba-danger: #C2283B;
    --hiba-danger-hover: #A31F31;
    --hiba-danger-bg: #FFE4E8;
    --hiba-danger-ink: #8E1A2A;
    --hiba-info: #2F5FBF;
    --hiba-info-bg: #E6EDFF;
    --hiba-info-ink: #223F85;

    --hiba-canvas: #F7F6F2;
    --hiba-surface: #FFFFFF;
    --hiba-surface-2: #EDEBE4;
    --hiba-hairline: #E6E3DA;
    --hiba-hairline-soft: #F1EFE9;
    --hiba-field-border: #C9C5B9;
    --hiba-ink: #1B1C18;
    --hiba-ink-2: #5F5D56;
    --hiba-ink-3: #6F6C64;
    --hiba-disabled: #A6A39A;

    /* The accent follows the business theme colour; css.blade.php maps the
       default theme to Teal 700 / 800 / 100. */
    --hiba-accent: var(--theme-700, #0E7A75);
    --hiba-accent-strong: var(--theme-800, #0B5F5B);
    --hiba-accent-tonal: var(--theme-100, #D9F1EE);

    --hiba-radius-chip: 8px;
    --hiba-radius-input: 10px;
    --hiba-radius-button: 12px;
    --hiba-radius-card: 16px;
    --hiba-radius-sheet: 20px;
    --hiba-shadow-1: 0 8px 32px rgba(27, 28, 24, 0.06);
    --hiba-shadow-2: 0 16px 48px rgba(27, 28, 24, 0.14);
    --hiba-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--hiba-accent);

    --hiba-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --hiba-font-display: "Inter Tight", Inter, system-ui, sans-serif;
    --hiba-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --hiba-ease-out: cubic-bezier(0.2, 0, 0, 1);
    --hiba-fast: 120ms;
    --hiba-mid: 180ms;
    --hiba-slow: 260ms;
}

/* daisyUI (tw-dw-*) reads its palette from these oklch triplets. */
html[data-theme=light] {
    --p: 52.42% 0.0877 189.69;
    --pc: 100% 0 0;
    /* Secondary (pricing toggle) and accent (download / add-row outline
       buttons) were pink and bright aqua; both take Teal 800. */
    --s: 43.95% 0.0728 189.67;
    --sc: 100% 0 0;
    --a: 43.95% 0.0728 189.67;
    --ac: 100% 0 0;
    --n: 93.97% 0.0096 93.57;
    --nc: 22.38% 0.0077 118.44;
    --su: 51.28% 0.1195 153.49;
    --suc: 100% 0 0;
    --wa: 54.25% 0.1242 62.55;
    --wac: 100% 0 0;
    --er: 53.39% 0.1883 20.49;
    --erc: 100% 0 0;
    --in: 50.67% 0.1599 262.29;
    --inc: 100% 0 0;
    --b1: 100% 0 0;
    --b2: 93.97% 0.0096 93.57;
    --b3: 91.57% 0.0125 91.52;
    --bc: 22.38% 0.0077 118.44;
    --rounded-box: 1rem;
    --rounded-btn: 0.75rem;
    --rounded-badge: 999px;
    --animation-btn: 0.12s;
    --btn-focus-scale: 0.98;
    background-color: var(--hiba-canvas);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

body {
    font-family: var(--hiba-font);
    color: var(--hiba-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    accent-color: var(--hiba-accent);
}

body.tw-bg-gray-100,
.thetop > main.tw-bg-gray-100,
.content-wrapper {
    background-color: var(--hiba-canvas);
}

body.tw-text-gray-900 {
    color: var(--hiba-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--hiba-font);
    color: var(--hiba-ink);
}

a {
    color: var(--hiba-accent);
}

a:hover,
a:focus {
    color: var(--hiba-accent-strong);
}

::selection {
    background: var(--hiba-accent-tonal);
    color: var(--hiba-ink);
}

/* One visible focus treatment for everything you can operate. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.tw-dw-btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--hiba-accent);
    outline-offset: 2px;
}

/* Money and counts line up in columns everywhere. */
table,
.display_currency,
.info-box-number,
.tw-tabular-nums {
    font-variant-numeric: tabular-nums;
}

.text-muted,
.help-block {
    color: var(--hiba-ink-2);
}

/* AdminLTE marks these !important, so the brand versions must too. */
.text-primary,
.text-light-blue,
.text-blue {
    color: var(--hiba-accent) !important;
}

.text-success,
.text-green {
    color: var(--hiba-success) !important;
}

.text-danger,
.text-red {
    color: var(--hiba-danger) !important;
}

.text-warning,
.text-yellow,
.text-orange {
    color: var(--hiba-warning) !important;
}

.text-info,
.text-aqua {
    color: var(--hiba-info) !important;
}

/* Tooltip triggers are quiet: Ink 3, Ink 2 on hover. */
.hover-q,
.fa-info-circle.text-info {
    color: var(--hiba-ink-3) !important;
}

.hover-q:hover,
.fa-info-circle.text-info:hover {
    color: var(--hiba-ink-2) !important;
}

/* ------------------------------------------------------------------ */
/* Page header                                                         */
/* ------------------------------------------------------------------ */

.content-header > h1 {
    color: var(--hiba-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.content-header > h1 > small,
.content-header > h1 .tw-text-gray-600 {
    color: var(--hiba-ink-2);
    letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* Cards: one card style, hairline only (no border plus shadow)        */
/* ------------------------------------------------------------------ */

.hiba-card {
    background: var(--hiba-surface);
    border: 1px solid var(--hiba-hairline);
    border-radius: var(--hiba-radius-card);
}

.box {
    background: var(--hiba-surface);
    border: 1px solid var(--hiba-hairline);
    border-top: 1px solid var(--hiba-hairline);
    border-radius: var(--hiba-radius-card);
    box-shadow: none;
}

.box.box-solid {
    border: 1px solid var(--hiba-hairline);
}

.box-header {
    color: var(--hiba-ink);
}

.box-header.with-border {
    border-bottom: 1px solid var(--hiba-hairline);
}

.box-header .box-title,
.box-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hiba-ink);
}

.box-footer {
    background: transparent;
    border-top: 1px solid var(--hiba-hairline);
    border-radius: 0 0 var(--hiba-radius-card) var(--hiba-radius-card);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
    border-radius: var(--hiba-radius-button);
    font-weight: 600;
    box-shadow: none;
    transition: background-color var(--hiba-fast) var(--hiba-ease-out),
        border-color var(--hiba-fast) var(--hiba-ease-out),
        color var(--hiba-fast) var(--hiba-ease-out);
}

.btn.btn-flat {
    border-radius: var(--hiba-radius-button);
}

.btn-sm,
.btn-group-sm > .btn,
.btn.btn-flat.btn-sm {
    border-radius: 10px;
}

.btn-xs,
.btn-group-xs > .btn,
.btn.btn-flat.btn-xs {
    border-radius: var(--hiba-radius-chip);
}

.btn:active,
.btn.active {
    box-shadow: none;
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--hiba-accent);
    border-color: var(--hiba-accent);
    color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--hiba-accent-strong);
    border-color: var(--hiba-accent-strong);
    color: #FFFFFF;
}

.btn-success,
.btn-success:focus {
    background-color: var(--hiba-success);
    border-color: var(--hiba-success);
    color: #FFFFFF;
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    background-color: var(--hiba-success-ink);
    border-color: var(--hiba-success-ink);
    color: #FFFFFF;
}

.btn-danger,
.btn-danger:focus {
    background-color: var(--hiba-danger);
    border-color: var(--hiba-danger);
    color: #FFFFFF;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    background-color: var(--hiba-danger-hover);
    border-color: var(--hiba-danger-hover);
    color: #FFFFFF;
}

.btn-warning,
.btn-warning:focus {
    background-color: var(--hiba-warning);
    border-color: var(--hiba-warning);
    color: #FFFFFF;
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
    background-color: var(--hiba-warning-ink);
    border-color: var(--hiba-warning-ink);
    color: #FFFFFF;
}

.btn-info,
.btn-info:focus {
    background-color: var(--hiba-info);
    border-color: var(--hiba-info);
    color: #FFFFFF;
}

.btn-info:hover,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background-color: var(--hiba-info-ink);
    border-color: var(--hiba-info-ink);
    color: #FFFFFF;
}

.btn-default {
    background-color: var(--hiba-surface);
    border-color: var(--hiba-field-border);
    color: var(--hiba-ink);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-color: var(--hiba-surface-2);
    border-color: var(--hiba-field-border);
    color: var(--hiba-ink);
}

.btn-link {
    color: var(--hiba-accent);
}

/* File pickers ("Browse") are a secondary action: tonal, not a second fill. */
.btn-file.btn-primary,
.file-input .btn-primary.btn-file,
.input-group-btn .btn-primary.btn-file {
    background-color: var(--hiba-accent-tonal);
    border-color: var(--hiba-field-border);
    color: var(--hiba-accent-strong);
}

.btn-file.btn-primary:hover,
.btn-file.btn-primary:focus,
.btn-file.btn-primary:active {
    background-color: var(--hiba-surface-2);
    border-color: var(--hiba-field-border);
    color: var(--hiba-ink);
}

.btn[disabled],
.btn.disabled,
fieldset[disabled] .btn {
    opacity: 1;
    background-color: var(--hiba-surface-2);
    border-color: var(--hiba-surface-2);
    color: var(--hiba-disabled);
}

/* daisyUI buttons */
.tw-dw-btn {
    font-weight: 600;
    text-transform: none;
}

.tw-dw-btn-sm,
.tw-dw-btn-xs {
    border-radius: var(--hiba-radius-chip);
}

/* "Close" and other neutral buttons are tonal, never a second dark fill. */
.tw-dw-btn.tw-dw-btn-neutral {
    background-color: var(--hiba-surface-2);
    border-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
}

.tw-dw-btn.tw-dw-btn-neutral:hover {
    background-color: var(--hiba-hairline);
    border-color: var(--hiba-hairline);
    color: var(--hiba-ink);
}

/* Row-level outline buttons: hairline, coloured word, tonal on hover
   (never a full fill inside a table row). */
.tw-dw-btn.tw-dw-btn-outline {
    background-color: var(--hiba-surface);
    border-color: var(--hiba-field-border);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary {
    color: var(--hiba-accent-strong);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info:hover,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary:hover {
    background-color: var(--hiba-accent-tonal);
    border-color: var(--hiba-field-border);
    color: var(--hiba-accent-strong);
}

/* The per-row "Actions" menu trigger is ink: it opens choices, it is not one. */
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
    color: var(--hiba-ink);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
.open > .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
    background-color: var(--hiba-surface-2);
    border-color: var(--hiba-field-border);
    color: var(--hiba-ink);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-error {
    color: var(--hiba-danger-ink);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-error:hover {
    background-color: var(--hiba-danger-bg);
    border-color: var(--hiba-field-border);
    color: var(--hiba-danger-ink);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-success {
    color: var(--hiba-success-ink);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-success:hover {
    background-color: var(--hiba-success-bg);
    border-color: var(--hiba-field-border);
    color: var(--hiba-success-ink);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-warning {
    color: var(--hiba-warning-ink);
}

.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-warning:hover {
    background-color: var(--hiba-warning-bg);
    border-color: var(--hiba-field-border);
    color: var(--hiba-warning-ink);
}

/* Tonal accent button: the secondary action beside a primary one. */
.tw-dw-btn.hiba-btn-tonal,
.btn.hiba-btn-tonal,
.btn.hiba-btn-tonal:focus {
    background-color: var(--hiba-accent-tonal);
    border-color: var(--hiba-accent-tonal);
    color: var(--hiba-accent-strong);
}

.tw-dw-btn.hiba-btn-tonal:hover,
.btn.hiba-btn-tonal:hover,
.btn.hiba-btn-tonal:active {
    background-color: var(--hiba-surface-2);
    border-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
}

/* AdminLTE navy buttons (project report links, CRM bulk actions) are
   secondary actions: tonal. AdminLTE marks bg-* !important. */
.btn.bg-navy,
.btn.bg-navy:focus {
    background-color: var(--hiba-accent-tonal) !important;
    border-color: var(--hiba-accent-tonal);
    color: var(--hiba-accent-strong) !important;
}

.btn.bg-navy:hover,
.btn.bg-navy:active {
    background-color: var(--hiba-surface-2) !important;
    color: var(--hiba-ink) !important;
}

/* Tonal destructive button (reset, delete): never a red fill beside the
   page's primary action. */
.tw-dw-btn.hiba-btn-danger-tonal,
.btn.hiba-btn-danger-tonal,
.btn.hiba-btn-danger-tonal:focus {
    background-color: var(--hiba-danger-bg);
    border-color: var(--hiba-danger-bg);
    color: var(--hiba-danger-ink);
}

.tw-dw-btn.hiba-btn-danger-tonal:hover,
.btn.hiba-btn-danger-tonal:hover,
.btn.hiba-btn-danger-tonal:active {
    background-color: #FFD3DA;
    border-color: #FFD3DA;
    color: var(--hiba-danger-ink);
}

/* The "+ Add" buttons on every list page were an indigo-to-blue gradient
   pill; they are the page's one solid accent button now. */
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-500,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-primary-600 {
    background-image: none;
    background-color: var(--hiba-accent);
    border-radius: var(--hiba-radius-button);
    color: #FFFFFF;
}

.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600:hover,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-500:hover,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-primary-600:hover {
    background-color: var(--hiba-accent-strong);
}

/* DataTables export buttons (CSV, Excel, Print, Columns, PDF) */
.dt-buttons .btn,
.dt-button,
a.dt-button,
button.dt-button {
    background: var(--hiba-surface);
    background-image: none;
    border: 1px solid var(--hiba-hairline);
    border-radius: var(--hiba-radius-chip);
    color: var(--hiba-ink);
    font-weight: 500;
}

.dt-buttons .btn:hover,
.dt-button:hover,
a.dt-button:hover:not(.disabled),
button.dt-button:hover:not(.disabled) {
    background: var(--hiba-surface-2);
    background-image: none;
    border-color: var(--hiba-field-border);
    color: var(--hiba-ink);
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

label,
.control-label {
    color: var(--hiba-ink-2);
    font-weight: 500;
}

.form-control {
    border-color: var(--hiba-field-border);
    border-radius: var(--hiba-radius-input);
    color: var(--hiba-ink);
    box-shadow: none;
    transition: border-color var(--hiba-fast) var(--hiba-ease-out),
        box-shadow var(--hiba-fast) var(--hiba-ease-out);
}

.form-control::placeholder {
    color: var(--hiba-ink-3);
    opacity: 1;
}

.form-control:focus {
    border-color: var(--hiba-accent);
    box-shadow: 0 0 0 1px var(--hiba-accent);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--hiba-canvas);
    color: var(--hiba-ink-2);
}

.has-error .form-control,
.has-error .form-control:focus,
.form-control.error {
    border-color: var(--hiba-danger);
    box-shadow: 0 0 0 1px var(--hiba-danger);
}

.has-error .help-block,
.has-error .control-label,
label.error,
.error {
    color: var(--hiba-danger);
}

.has-success .form-control {
    border-color: var(--hiba-success);
}

/* Inside input groups only the outer corners are round. */
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle {
    border-radius: var(--hiba-radius-input) 0 0 var(--hiba-radius-input);
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle {
    border-radius: 0 var(--hiba-radius-input) var(--hiba-radius-input) 0;
}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
}

.input-group .form-control:only-child {
    border-radius: var(--hiba-radius-input);
}

.input-group-addon {
    background-color: var(--hiba-canvas);
    border-color: var(--hiba-field-border);
    color: var(--hiba-ink-2);
}

/* Coloured icon addons (location pickers on reports) sit on paper too. */
.input-group-addon[class*="bg-"] {
    background-color: var(--hiba-canvas) !important;
    border-color: var(--hiba-field-border);
    color: var(--hiba-ink-2) !important;
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--hiba-field-border);
    border-radius: var(--hiba-radius-input);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--hiba-accent);
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--hiba-ink);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--hiba-ink-3);
}

.select2-dropdown {
    border-color: var(--hiba-hairline);
    border-radius: var(--hiba-radius-input);
    box-shadow: var(--hiba-shadow-2);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: var(--hiba-accent-tonal);
    color: var(--hiba-ink);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--hiba-field-border);
    border-radius: var(--hiba-radius-chip);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--hiba-accent-tonal);
    border: 0;
    border-radius: var(--hiba-radius-chip);
    color: var(--hiba-accent-strong);
    font-weight: 500;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--hiba-accent-strong);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--hiba-danger-ink);
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

.table > thead > tr > th,
table.dataTable thead th {
    color: var(--hiba-ink-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--hiba-hairline);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    border-top-color: var(--hiba-hairline-soft);
    color: var(--hiba-ink);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-color: var(--hiba-hairline);
}

/* Detail views (sale, purchase, ledger) head their tables with AdminLTE
   bg-green and fill rows with bg-gray. On paper: a caption-style head row
   on the canvas and plain rows. AdminLTE marks bg-* !important. */
tr.bg-green,
thead.bg-green,
tr.bg-info,
thead.bg-info,
tr.bg-light-blue,
thead.bg-light-blue {
    background-color: var(--hiba-canvas) !important;
    color: var(--hiba-ink-2) !important;
}

tr.bg-green > th,
thead.bg-green th,
tr.bg-info > th,
thead.bg-info th {
    color: var(--hiba-ink-2);
    font-weight: 600;
    border-bottom: 1px solid var(--hiba-hairline);
}

tr.bg-gray,
td.bg-gray,
th.bg-gray,
table.bg-gray,
.well.bg-gray,
.table .bg-gray {
    background-color: var(--hiba-canvas) !important;
    color: var(--hiba-ink) !important;
}

.well {
    background-color: var(--hiba-canvas);
    border: 1px solid var(--hiba-hairline);
    border-radius: 12px;
    box-shadow: none;
}

/* Form tables headed in Bootstrap green or AdminLTE blue (purchase lines,
   product prices, variation values, recipe ingredients). */
.table-th-green th,
.add-product-price-table th,
.blue-header th {
    background-color: var(--hiba-canvas);
    color: var(--hiba-ink-2);
    font-weight: 600;
}

/* Bootstrap contextual rows and cells in brand tints. */
.table > thead > tr > .success, .table > tbody > tr > .success, .table > tfoot > tr > .success,
.table > thead > tr.success > td, .table > thead > tr.success > th,
.table > tbody > tr.success > td, .table > tbody > tr.success > th,
.table > tfoot > tr.success > td, .table > tfoot > tr.success > th {
    background-color: var(--hiba-success-bg);
}

.table > thead > tr > .info, .table > tbody > tr > .info, .table > tfoot > tr > .info,
.table > thead > tr.info > td, .table > thead > tr.info > th,
.table > tbody > tr.info > td, .table > tbody > tr.info > th,
.table > tfoot > tr.info > td, .table > tfoot > tr.info > th {
    background-color: var(--hiba-info-bg);
}

.table > thead > tr > .warning, .table > tbody > tr > .warning, .table > tfoot > tr > .warning,
.table > thead > tr.warning > td, .table > thead > tr.warning > th,
.table > tbody > tr.warning > td, .table > tbody > tr.warning > th,
.table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th {
    background-color: var(--hiba-warning-bg);
}

.table > thead > tr > .danger, .table > tbody > tr > .danger, .table > tfoot > tr > .danger,
.table > thead > tr.danger > td, .table > thead > tr.danger > th,
.table > tbody > tr.danger > td, .table > tbody > tr.danger > th,
.table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th {
    background-color: var(--hiba-danger-bg);
}

/* Bootstrap's light row backgrounds (low stock in the stock report etc.). */
tr.bg-danger { background-color: var(--hiba-danger-bg); }
tr.bg-warning { background-color: var(--hiba-warning-bg); }
tr.bg-success { background-color: var(--hiba-success-bg); }
tr.bg-info { background-color: var(--hiba-info-bg); }

code {
    background-color: var(--hiba-surface-2);
    border-radius: 6px;
    color: var(--hiba-ink);
    font-family: var(--hiba-font-mono);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--hiba-canvas);
}

.table-hover > tbody > tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: var(--hiba-hairline-soft);
}

.table > tfoot > tr > td,
tr.footer-total > td,
.footer-total td {
    font-weight: 600;
}

table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
    background-color: var(--hiba-accent-tonal);
    color: var(--hiba-ink);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--hiba-field-border);
    border-radius: var(--hiba-radius-chip);
}

.dataTables_wrapper .dataTables_info {
    color: var(--hiba-ink-2);
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
    color: var(--hiba-ink);
    border-color: var(--hiba-hairline);
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus {
    background-color: var(--hiba-surface-2);
    border-color: var(--hiba-hairline);
    color: var(--hiba-ink);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover {
    background-color: var(--hiba-accent);
    border-color: var(--hiba-accent);
    color: #FFFFFF;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-radius: var(--hiba-radius-chip) 0 0 var(--hiba-radius-chip);
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: 0 var(--hiba-radius-chip) var(--hiba-radius-chip) 0;
}

/* ------------------------------------------------------------------ */
/* Status pills: tonal fill, dark text, always a word                   */
/* ------------------------------------------------------------------ */

.label,
.badge {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
}

.label {
    display: inline-block;
    padding: 2px 10px;
}

.label.label-round {
    padding: 2px 6px;
}

.label-default,
.label.bg-gray,
.label.bg-navy,
.label.bg-black {
    background-color: var(--hiba-surface-2) !important;
    color: var(--hiba-ink-2) !important;
}

.label-primary,
.label.bg-primary,
.label.bg-light-blue,
.label.bg-blue {
    background-color: var(--hiba-accent-tonal) !important;
    color: var(--hiba-accent-strong) !important;
}

.label-success,
.label.bg-green,
.label.bg-light-green {
    background-color: var(--hiba-success-bg) !important;
    color: var(--hiba-success-ink) !important;
}

.label-warning,
.label.bg-yellow,
.label.bg-orange {
    background-color: var(--hiba-warning-bg) !important;
    color: var(--hiba-warning-ink) !important;
}

.label-danger,
.label.bg-red,
.label.bg-maroon {
    background-color: var(--hiba-danger-bg) !important;
    color: var(--hiba-danger-ink) !important;
}

.label-info,
.label.bg-info,
.label.bg-aqua {
    background-color: var(--hiba-info-bg) !important;
    color: var(--hiba-info-ink) !important;
}

/* ------------------------------------------------------------------ */
/* Alerts and callouts: inline, specific, the fix as the action         */
/* ------------------------------------------------------------------ */

.alert,
.callout {
    border: 0;
    border-radius: 12px;
}

.alert-success,
.callout.callout-success {
    background-color: var(--hiba-success-bg) !important;
    color: var(--hiba-success-ink) !important;
}

.alert-warning,
.callout.callout-warning {
    background-color: var(--hiba-warning-bg) !important;
    color: var(--hiba-warning-ink) !important;
}

.alert-danger,
.alert-error,
.callout.callout-danger {
    background-color: var(--hiba-danger-bg) !important;
    color: var(--hiba-danger-ink) !important;
}

.alert-info,
.callout.callout-info {
    background-color: var(--hiba-info-bg) !important;
    color: var(--hiba-info-ink) !important;
}

.alert a,
.callout a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.alert .close {
    color: inherit;
    opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Modals, dropdowns, popovers: the only things that float              */
/* ------------------------------------------------------------------ */

.modal-content {
    border: 0;
    border-radius: var(--hiba-radius-sheet);
    box-shadow: var(--hiba-shadow-2);
}

.modal-header {
    border-bottom: 1px solid var(--hiba-hairline);
    padding: 16px 20px;
}

.modal-title {
    color: var(--hiba-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--hiba-hairline);
    padding: 14px 20px;
}

.modal-backdrop.in {
    background-color: var(--hiba-ink);
    opacity: 0.4;
}

/* Phone sidebar backdrop (the layout's own rule is 80% black). */
body .overlay {
    background: rgba(27, 28, 24, 0.4);
}

.dropdown-menu {
    border: 1px solid var(--hiba-hairline);
    border-radius: 12px;
    box-shadow: var(--hiba-shadow-2);
    padding: 6px;
}

.dropdown-menu > li > a {
    border-radius: var(--hiba-radius-chip);
    color: var(--hiba-ink);
    padding: 7px 12px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--hiba-accent-tonal);
    color: var(--hiba-accent-strong);
}

.dropdown-menu > li > a > .fa,
.dropdown-menu > li > a > .fas,
.dropdown-menu > li > a > .glyphicon {
    color: var(--hiba-ink-3);
}

.dropdown-menu .divider {
    background-color: var(--hiba-hairline);
}

.popover {
    border: 1px solid var(--hiba-hairline);
    border-radius: 12px;
    box-shadow: var(--hiba-shadow-2);
    color: var(--hiba-ink);
}

.tooltip-inner {
    background-color: var(--hiba-ink);
    border-radius: var(--hiba-radius-chip);
    color: #F2EFE5;
}

/* ------------------------------------------------------------------ */
/* Tabs                                                                */
/* ------------------------------------------------------------------ */

.nav-tabs-custom {
    border-radius: var(--hiba-radius-card);
    box-shadow: none;
    border: 1px solid var(--hiba-hairline);
}

.nav-tabs-custom > .nav-tabs {
    border-bottom-color: var(--hiba-hairline);
    border-radius: var(--hiba-radius-card) var(--hiba-radius-card) 0 0;
}

.nav-tabs-custom > .nav-tabs > li {
    border-top: 0;
    margin-bottom: -1px;
}

.nav-tabs-custom > .nav-tabs > li > a {
    color: var(--hiba-ink-2);
    font-weight: 500;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top: 0;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
    color: var(--hiba-ink);
    font-weight: 600;
    border-left-color: transparent;
    border-right-color: transparent;
    box-shadow: inset 0 -2px 0 var(--hiba-accent);
}

.nav-tabs > li > a {
    color: var(--hiba-ink-2);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--hiba-ink);
}

.nav-pills > li > a {
    border-radius: var(--hiba-radius-chip);
    color: var(--hiba-ink);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--hiba-ink);
    border-top-color: transparent;
    color: #FFFFFF;
}

/* Settings pages: vertical tab list */
div.pos-tab-menu div.list-group > a {
    color: var(--hiba-ink-2);
}

div.pos-tab-menu div.list-group > a.active,
div.pos-tab-menu div.list-group > a.active:hover {
    background-color: var(--hiba-accent-tonal);
    background-image: none;
    border-color: var(--hiba-hairline);
    color: var(--hiba-accent-strong);
    font-weight: 600;
}

div.pos-tab-menu div.list-group > a.active .fa,
div.pos-tab-menu div.list-group > a.active .glyphicon {
    color: var(--hiba-accent-strong);
}

div.pos-tab-menu div.list-group > a.active:after {
    border-left-color: var(--hiba-accent-tonal);
}

/* ------------------------------------------------------------------ */
/* Feedback: toasts are ink, sweetalert buttons follow the button rules */
/* ------------------------------------------------------------------ */

#toast-container > div {
    border-radius: 12px;
    box-shadow: var(--hiba-shadow-2);
    opacity: 1;
    font-family: var(--hiba-font);
}

#toast-container > div:hover {
    box-shadow: var(--hiba-shadow-2);
}

#toast-container > .toast-success {
    background-color: var(--hiba-ink);
    color: #F2EFE5;
}

#toast-container > .toast-info {
    background-color: var(--hiba-info-ink);
}

#toast-container > .toast-warning {
    background-color: var(--hiba-warning-ink);
}

#toast-container > .toast-error {
    background-color: var(--hiba-danger-ink);
}

.toast-progress {
    background-color: var(--hiba-teal-300);
}

.swal-modal {
    border-radius: var(--hiba-radius-sheet);
}

.swal-title {
    color: var(--hiba-ink);
    font-family: var(--hiba-font);
    font-weight: 600;
}

.swal-text {
    color: var(--hiba-ink-2);
    font-family: var(--hiba-font);
}

.swal-button {
    background-color: var(--hiba-accent);
    border-radius: var(--hiba-radius-button);
    font-family: var(--hiba-font);
    font-weight: 600;
}

.swal-button:not([disabled]):hover {
    background-color: var(--hiba-accent-strong);
}

.swal-button:focus {
    box-shadow: var(--hiba-focus-ring);
}

.swal-button--cancel {
    background-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
}

.swal-button--cancel:not([disabled]):hover {
    background-color: var(--hiba-hairline);
}

.swal-button--danger {
    background-color: var(--hiba-danger);
}

.swal-button--danger:not([disabled]):hover {
    background-color: var(--hiba-danger-hover);
}

/* Progress bars */
.progress {
    background-color: var(--hiba-surface-2);
    border-radius: 999px;
    box-shadow: none;
}

.progress-bar {
    background-color: var(--hiba-accent);
}

/* ------------------------------------------------------------------ */
/* App shell: paper header, paper sidebar, one accent action            */
/* ------------------------------------------------------------------ */

.hiba-header {
    background-color: var(--hiba-surface);
    background-image: none;
    border-bottom: 1px solid var(--hiba-hairline);
}

/* Header controls were white on a gradient; on paper they are plain icon
   buttons in Ink 2 that take Surface 2 on hover. */
.hiba-header .theme-btn-bg,
.hiba-header .clock_in_btn,
.hiba-header .clock_out_btn,
.hiba-header .tw-bg-primary-800 {
    background-color: transparent;
    color: var(--hiba-ink-2);
    --tw-ring-color: transparent;
}

.hiba-header .theme-btn-bg:hover,
.hiba-header .theme-btn-bg:active,
.hiba-header .theme-btn-bg:focus,
.hiba-header .clock_in_btn:hover,
.hiba-header .clock_out_btn:hover,
.hiba-header .tw-bg-primary-800:hover,
.hiba-header details[open] > summary.theme-btn-bg {
    background-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
    outline: none;
}

.hiba-header .theme-btn-bg:focus-visible {
    outline: 2px solid var(--hiba-accent);
    outline-offset: 2px;
}

.hiba-header .tw-text-white,
.hiba-header .hover\:tw-text-white:hover {
    color: var(--hiba-ink-2);
}

.hiba-header .theme-btn-bg:hover.tw-text-white,
.hiba-header .theme-btn-bg:hover .tw-text-white {
    color: var(--hiba-ink);
}

/* Labelled header actions (POS, Repair) are tonal: clearly live, while the
   page's own primary action stays the only fill on the screen. Icon-only
   header buttons stay plain. */
.hiba-header .hiba-header-action,
.hiba-header .hiba-header-action.tw-text-white,
.hiba-header .hiba-header-action:focus {
    background-color: var(--hiba-accent-tonal);
    color: var(--hiba-accent-strong);
}

.hiba-header .hiba-header-action:hover,
.hiba-header .hiba-header-action:active,
.hiba-header .hiba-header-action.hover\:tw-text-white:hover {
    background-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
}

/* Module header buttons that build their fill from the theme name
   (tw-bg-<theme>-800) read as plain header buttons too. */
.hiba-header a[class*="tw-bg-"][class*="-800"],
.hiba-header button[class*="tw-bg-"][class*="-800"] {
    background-color: transparent;
    color: var(--hiba-ink-2);
}

.hiba-header .hiba-header-date {
    color: var(--hiba-ink-2);
    font-family: var(--hiba-font-mono);
    font-weight: 500;
}

.hiba-header .hiba-header-info {
    color: var(--hiba-ink-3);
    margin-top: 6px;
}

.hiba-header .btn-danger {
    margin: 0;
}

/* Sidebar */
.side-bar {
    border-right: 1px solid var(--hiba-hairline);
}

.side-bar .tw-border-r,
.side-bar .tw-border-gray-200 {
    border-color: var(--hiba-hairline);
}

.hiba-sidebar-brand,
.hiba-sidebar-brand:hover,
.hiba-sidebar-brand:focus {
    background-color: var(--hiba-surface);
    border-color: var(--hiba-hairline);
    color: var(--hiba-ink);
    text-decoration: none;
}

.hiba-sidebar-mark {
    flex: none;
}

.hiba-sidebar-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.hiba-sidebar-search {
    background-color: var(--hiba-surface-2);
    border-color: transparent;
    border-radius: var(--hiba-radius-input);
}

.hiba-sidebar-search:focus-within {
    background-color: var(--hiba-surface);
    border-color: var(--hiba-accent);
}

.hiba-sidebar-search input,
.hiba-sidebar-search input::placeholder {
    color: var(--hiba-ink-2);
}

#side-bar a {
    color: var(--hiba-ink-2);
}

#side-bar a.theme-sidebar-active {
    color: var(--hiba-accent-strong);
}

/* Tailwind's cool greys, warmed to the paper palette where they show most. */
.tw-text-gray-900,
.tw-text-black {
    color: var(--hiba-ink);
}

.tw-text-gray-800,
.tw-text-gray-700 {
    color: #2E2F2A;
}

.tw-text-gray-600 {
    color: var(--hiba-ink-2);
}

.tw-text-gray-500 {
    color: var(--hiba-ink-3);
}

/* Tailwind status hues used on dashboard icons, in their brand versions. */
.tw-text-yellow-500 {
    color: var(--hiba-warning);
}

.tw-text-sky-500 {
    color: var(--hiba-info);
}

.tw-ring-gray-200 {
    --tw-ring-color: var(--hiba-hairline);
}

.tw-border-gray-200 {
    border-color: var(--hiba-hairline);
}

.tw-border-gray-300 {
    border-color: var(--hiba-field-border);
}

.tw-bg-gray-50 {
    background-color: var(--hiba-canvas);
}

.hover\:tw-bg-gray-50:hover,
.hover\:tw-bg-gray-100:hover {
    background-color: var(--hiba-surface-2);
}

/* ------------------------------------------------------------------ */
/* Money type and the dashboard                                         */
/* ------------------------------------------------------------------ */

/* Every figure already marked mono (dashboard, POS totals) gets the money face. */
.tw-font-mono {
    font-family: var(--hiba-font-mono);
    font-variant-numeric: tabular-nums;
}

/* The overview tint follows System Settings > Theme color. The precomputed
   tonal theme token also works on older tablets without color-mix(). Keep the
   tint near the top when KPI cards stack on small screens. */
.hiba-dashboard-overview {
    background-color: var(--hiba-canvas);
    background-image: linear-gradient(180deg, var(--hiba-accent-tonal), var(--hiba-canvas));
    background-size: 100% 360px;
    background-repeat: no-repeat;
}

.hiba-page-title {
    color: var(--hiba-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hiba-kpi .tw-text-gray-500 {
    color: var(--hiba-ink-2);
}

.hiba-kpi .tw-font-mono {
    font-weight: 700;
    letter-spacing: 0;
}

/* AdminLTE info boxes (Asset Management and older module dashboards):
   neutral icon tile, like the dashboard KPI tiles. */
.info-box {
    border: 1px solid var(--hiba-hairline);
    border-radius: var(--hiba-radius-card);
    box-shadow: none;
}

.info-box-icon[class*="bg-"] {
    background-color: var(--hiba-surface-2) !important;
    color: var(--hiba-ink-2) !important;
    border-radius: 12px;
}

/* Subscription and public pricing package cards. */
.hiba-package-price {
    color: var(--hiba-ink);
    font-family: var(--hiba-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}

a.hiba-package-cta,
button.hiba-package-cta {
    background-color: var(--hiba-accent);
    color: #FFFFFF;
    border-radius: var(--hiba-radius-button);
    text-decoration: none;
}

a.hiba-package-cta:hover,
a.hiba-package-cta:focus,
button.hiba-package-cta:hover {
    background-color: var(--hiba-accent-strong);
    color: #FFFFFF;
}

.hiba-kpi-icon {
    background-color: var(--hiba-surface-2);
    border-radius: 12px;
    color: var(--hiba-ink-2);
}

/* Overview KPI colours stay consistent across business themes. Existing labels
   and icon shapes carry the meaning as well as colour. */
.hiba-dashboard-overview .hiba-kpi-icon--sales,
.hiba-dashboard-overview .hiba-kpi-icon--purchase {
    background-color: #E0F2FE;
    color: #0284C7;
}

.hiba-dashboard-overview .hiba-kpi-icon--net {
    background-color: #DCFCE7;
    color: #047857;
}

.hiba-dashboard-overview .hiba-kpi-icon--due {
    background-color: #FEF3C7;
    color: #A15C00;
}

.hiba-dashboard-overview .hiba-kpi-icon--return,
.hiba-dashboard-overview .hiba-kpi-icon--expense {
    background-color: #FEE2E2;
    color: #C24141;
}

/* ------------------------------------------------------------------ */
/* POS: Cash is the one Pay fill, Multiple Pay tonal. The other bottom-  */
/* bar actions keep their v7.3 colours (owner's call, 2026-10-25).       */
/* ------------------------------------------------------------------ */

.hiba-pos-bar {
    background-color: var(--hiba-surface);
    border-top: 1px solid var(--hiba-hairline);
    box-shadow: none;
}

.hiba-pos-bar button {
    transition: background-color var(--hiba-fast) var(--hiba-ease-out),
        transform var(--hiba-fast) var(--hiba-ease-out);
}

.hiba-pos-bar .hiba-pos-pay,
.hiba-pos-bar .hiba-pos-tonal {
    border: 0;
    border-radius: var(--hiba-radius-button);
    min-height: 40px;
}

.hiba-pos-bar .hiba-pos-pay {
    background-color: var(--hiba-accent);
    color: #FFFFFF;
}

.hiba-pos-bar .hiba-pos-pay:hover,
.hiba-pos-bar .hiba-pos-pay:active {
    background-color: var(--hiba-accent-strong);
}

.hiba-pos-bar .hiba-pos-tonal {
    background-color: var(--hiba-accent-tonal);
    color: var(--hiba-accent-strong);
}

.hiba-pos-bar .hiba-pos-tonal:hover {
    background-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
}

.hiba-pos-header {
    border: 1px solid var(--hiba-hairline);
}

.hiba-pos-header .pos-nav-divider {
    background-color: var(--hiba-hairline);
}

/* Cart table head: the light grey labels were 2.5:1 on their fill. */
table th[class*="pos-th-"] {
    color: var(--hiba-ink-3) !important;
}

/* Product tile without a photo: initials on a tonal tile. */
.hiba-tile-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 7px auto;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Same initials in a cart row, sized like the 36 px row photo. */
.hiba-cart-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-top: 1px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.hiba-tile-initials--0 {
    background-color: var(--hiba-teal-100);
    color: var(--hiba-teal-800);
}

.hiba-tile-initials--1 {
    background-color: var(--hiba-saffron-100);
    color: var(--hiba-warning-ink);
}

.hiba-tile-initials--2 {
    background-color: var(--hiba-info-bg);
    color: var(--hiba-info-ink);
}

.hiba-tile-initials--3 {
    background-color: var(--hiba-danger-bg);
    color: var(--hiba-danger-ink);
}

.hiba-pos-bar .pos-footer-divider {
    background-color: var(--hiba-hairline);
}

/* Quantity stepper: Ink 2 glyphs on paper, not red minus / green plus. */
.input-group-btn .btn.quantity-down,
.input-group-btn .btn.quantity-up {
    background-color: var(--hiba-surface);
    border-color: var(--hiba-field-border) !important;
    color: var(--hiba-ink-2) !important;
}

.input-group-btn .btn.quantity-down:hover,
.input-group-btn .btn.quantity-up:hover {
    background-color: var(--hiba-surface-2);
    color: var(--hiba-ink) !important;
}

/* Payment sheet summary: paper, labels in Ink 2, money in mono. */
.hiba-pay-summary {
    background-color: var(--hiba-canvas);
    color: var(--hiba-ink);
}

.hiba-pay-summary strong {
    color: var(--hiba-ink-2);
    font-size: 13px;
    font-weight: 500;
}

.hiba-pay-summary .lead {
    font-family: var(--hiba-font-mono);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hiba-ink);
}

.hiba-pay-summary .total_payable_span {
    font-size: 28px;
}

.hiba-pay-summary hr {
    border-top-color: var(--hiba-hairline);
    margin: 12px 0;
}

.bg-lightgray {
    background-color: var(--hiba-canvas);
}

.hiba-pos-datepill {
    background-color: var(--hiba-accent-tonal);
    color: var(--hiba-accent-strong);
}

.hiba-pos-datepill .curr_datetime {
    color: var(--hiba-accent-strong);
    font-family: var(--hiba-font-mono);
    font-weight: 600;
}

.hiba-pos-datepill .hover-q {
    color: var(--hiba-accent-strong) !important;
}

/* ------------------------------------------------------------------ */
/* Date pickers and iCheck: the accent instead of stock blue            */
/* ------------------------------------------------------------------ */

.daterangepicker {
    border-color: var(--hiba-hairline);
    border-radius: 12px;
    box-shadow: var(--hiba-shadow-2);
    font-family: var(--hiba-font);
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
    background-color: var(--hiba-accent);
    color: #FFFFFF;
}

.daterangepicker td.in-range {
    background-color: var(--hiba-accent-tonal);
    color: var(--hiba-ink);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.daterangepicker .ranges li:hover {
    background-color: var(--hiba-surface-2);
}

.daterangepicker .ranges li {
    border-radius: var(--hiba-radius-chip);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--hiba-accent);
    color: #FFFFFF;
    text-shadow: none;
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--hiba-accent);
}

/* FullCalendar (calendar, reminders, bookings): flat buttons, accent for
   the active view, a tonal today cell instead of yellow. */
.fc-state-default,
.fc-button {
    background-color: var(--hiba-surface);
    background-image: none;
    border: 1px solid var(--hiba-field-border);
    box-shadow: none;
    color: var(--hiba-ink);
    text-shadow: none;
}

.fc-state-hover,
.fc-button:hover {
    background-color: var(--hiba-surface-2);
    color: var(--hiba-ink);
}

.fc-state-active,
.fc-state-down,
.fc-button.fc-state-active {
    background-color: var(--hiba-accent);
    border-color: var(--hiba-accent);
    box-shadow: none;
    color: #FFFFFF;
}

.fc-state-default.fc-corner-left {
    border-top-left-radius: var(--hiba-radius-chip);
    border-bottom-left-radius: var(--hiba-radius-chip);
}

.fc-state-default.fc-corner-right {
    border-top-right-radius: var(--hiba-radius-chip);
    border-bottom-right-radius: var(--hiba-radius-chip);
}

.fc-unthemed td.fc-today,
.fc td.fc-today {
    background-color: var(--hiba-accent-tonal);
}

.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-popover {
    border-color: var(--hiba-hairline);
}

/* AdminLTE's big square buttons (attendance clock in / out): the page's
   one action, so the accent fill. */
.btn.btn-app.hiba-btn-app {
    background-color: var(--hiba-accent);
    border: 0;
    border-radius: var(--hiba-radius-card);
    color: #FFFFFF;
}

.btn.btn-app.hiba-btn-app:hover,
.btn.btn-app.hiba-btn-app:focus {
    background-color: var(--hiba-accent-strong);
    color: #FFFFFF;
}

/* iCheck's square-blue skin is a sprite image; draw the box instead so it
   takes the accent. Same 22 px footprint as the sprite. */
.icheckbox_square-blue,
.iradio_square-blue {
    background: var(--hiba-surface);
    border: 1.5px solid var(--hiba-field-border);
    border-radius: 6px;
    box-sizing: border-box;
    position: relative;
    transition: background-color var(--hiba-fast) var(--hiba-ease-out),
        border-color var(--hiba-fast) var(--hiba-ease-out);
}

.iradio_square-blue {
    border-radius: 50%;
}

.icheckbox_square-blue.hover,
.iradio_square-blue.hover,
.icheckbox_square-blue.focus,
.iradio_square-blue.focus {
    border-color: var(--hiba-accent);
}

.icheckbox_square-blue.checked {
    background: var(--hiba-accent);
    border-color: var(--hiba-accent);
}

.icheckbox_square-blue.checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.iradio_square-blue.checked {
    border-color: var(--hiba-accent);
}

.iradio_square-blue.checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--hiba-accent);
}

.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled {
    background: var(--hiba-surface-2);
    border-color: var(--hiba-hairline);
    cursor: default;
}

.icheckbox_square-blue.checked.disabled {
    background: var(--hiba-disabled);
    border-color: var(--hiba-disabled);
}

/* ------------------------------------------------------------------ */
/* Motion: nothing moves unless the user asked                          */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
        scroll-behavior: auto !important;
    }
}