/* ==========================================================================
   HUB RESTO admin theme — design guideline from "HUB RESTO Admin" prototype
   (claude.ai/design project). Same identity as the tablet POS:
   Archivo type on warm cream, white cards with hairline sand borders,
   a dark ink sidebar and orange as the single accent.

   Loaded in layouts/app.blade.php AFTER argon.css + custom.css so it wins,
   but BEFORE per-page @stack('css') so pages can still override.

   The POS UI (modules/Poscloud) renders through its own master layout and
   never loads this file, so it is untouched — as intended.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

:root{
    --hr-ink:#241f19;
    --hr-accent:#d95d12; --hr-accent-700:#b34a0c;
    --hr-accent-soft:#fff4ec; --hr-accent-soft-2:#ffe9d9;
    --hr-canvas:#f4f1ec; --hr-surface:#ffffff; --hr-surface-2:#faf8f4;
    --hr-line:#e8e3da; --hr-line-2:#d0c8bc; --hr-line-soft:#f0ece5;
    --hr-muted:#8a8177; --hr-muted-2:#6b635a; --hr-muted-3:#b3a99c;
    --hr-success:#1d8a4a; --hr-success-soft:#eaf6ef;
    --hr-danger:#c0392b; --hr-danger-soft:#faf0ee;
    --hr-info:#2C6E8F; --hr-info-soft:#e1ebf0;
    --hr-kanban:#eeeae2;
    --hr-shadow:0 1px 3px rgba(36,31,25,.06);
    --hr-shadow-lg:0 12px 40px rgba(36,31,25,.16);
    --hr-radius:16px;
    --hr-radius-sm:12px;
    --hr-font:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* --------------------------------------------------------------------------
   1. Canvas & typography — Archivo everywhere, heavy headings
   -------------------------------------------------------------------------- */
body{
    background-color:var(--hr-canvas);
    color:var(--hr-ink);
    font-family:var(--hr-font);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,.modal-title{
    font-family:var(--hr-font);
    font-weight:800;
    letter-spacing:-.01em;
    color:var(--hr-ink);
}
.display-1,.display-2,.display-3,.display-4{ font-weight:900; }
#navbar-main .navbar-brand, #navbar-main a.h4{ font-family:var(--hr-font); font-weight:900; }

a{ color:var(--hr-accent); }
a:hover{ color:var(--hr-accent-700); }
.text-muted{ color:var(--hr-muted) !important; }

/* --------------------------------------------------------------------------
   2. Page header bands — the prototype has no gradient headers: content sits
   on the cream canvas under a white topbar. Gradient headers become the dark
   ink band (same surface as the POS "MONTANT DÛ" card and the sidebar).
   -------------------------------------------------------------------------- */
.bg-gradient-primary,
.bg-gradient-default{
    background:linear-gradient(180deg, #2c261f 0%, var(--hr-ink) 100%) !important;
}
.header.bg-gradient-primary,
.header.bg-gradient-default,
.header.bg-gradient-info,
.header.bg-gradient-success,
.header.bg-gradient-warning{ border-bottom:3px solid var(--hr-accent); }

.bg-gradient-secondary{
    background:linear-gradient(180deg, var(--hr-surface) 0%, var(--hr-surface-2) 100%) !important;
}
.bg-gradient-info{ background:linear-gradient(180deg, var(--hr-info) 0%, #245b76 100%) !important; }
.bg-gradient-success{ background:linear-gradient(180deg, var(--hr-success) 0%, #176e3b 100%) !important; }
.bg-gradient-warning{ background:linear-gradient(180deg, #e5731f 0%, var(--hr-accent) 100%) !important; }

/* --------------------------------------------------------------------------
   3. Cards & surfaces — white, 16px radius, 1.5px sand hairline, flat
   -------------------------------------------------------------------------- */
.card{
    background-color:var(--hr-surface);
    border:1.5px solid var(--hr-line);
    border-radius:var(--hr-radius);
    box-shadow:var(--hr-shadow);
}
.card .card-header{
    background-color:var(--hr-surface);
    border-bottom:1px solid var(--hr-line-soft);
    border-top-left-radius:var(--hr-radius);
    border-top-right-radius:var(--hr-radius);
    font-weight:800;
}
.card .card-footer{ background-color:var(--hr-surface-2); border-top:1px solid var(--hr-line-soft); }
.card.bg-secondary{ background-color:var(--hr-surface) !important; }
.card-stats .card-body{ position:relative; }
.icon-shape.bg-gradient-primary, .icon.bg-gradient-primary{
    background:linear-gradient(180deg,#e5731f,var(--hr-accent)) !important;
}

/* --------------------------------------------------------------------------
   4. Buttons — orange primary, chip-like neutrals, touch-sized, pressed scale
   primary/warning=orange · success=green · danger=clay red · secondary=chip
   -------------------------------------------------------------------------- */
.btn{
    border-radius:var(--hr-radius-sm);
    font-weight:800;
    font-family:var(--hr-font);
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:transform .08s ease, background-color .13s ease, border-color .13s ease;
}
.btn:not(:disabled):not(.disabled):active{ transform:scale(0.96); }
.btn-sm, .btn-group-sm > .btn{ min-height:36px; border-radius:10px; }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled){
    background-color:var(--hr-accent); border-color:var(--hr-accent); color:#fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active{
    background-color:var(--hr-accent-700); border-color:var(--hr-accent-700); color:#fff;
}
.btn-primary:focus{ box-shadow:0 0 0 3px rgba(217,93,18,.28); }

.btn-warning,
.btn-warning:not(:disabled):not(.disabled){
    background-color:var(--hr-accent); border-color:var(--hr-accent); color:#fff;
}
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active{
    background-color:var(--hr-accent-700); border-color:var(--hr-accent-700); color:#fff;
}
.btn-warning:focus{ box-shadow:0 0 0 3px rgba(217,93,18,.28); }

.btn-success,
.btn-success:not(:disabled):not(.disabled){
    background-color:var(--hr-success); border-color:var(--hr-success); color:#fff;
}
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active{
    background-color:#176e3b; border-color:#176e3b; color:#fff;
}
.btn-success:focus{ box-shadow:0 0 0 3px rgba(29,138,74,.30); }

.btn-info,
.btn-info:not(:disabled):not(.disabled){
    background-color:var(--hr-ink); border-color:var(--hr-ink); color:#fff;
}
.btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active{
    background-color:#3a332b; border-color:#3a332b; color:#fff;
}

.btn-danger,
.btn-danger:not(:disabled):not(.disabled){
    background-color:var(--hr-danger); border-color:var(--hr-danger); color:#fff;
}
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active{
    background-color:#a02f22; border-color:#a02f22; color:#fff;
}
.btn-danger:focus{ box-shadow:0 0 0 3px rgba(192,57,43,.30); }

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled){
    background-color:var(--hr-surface); border:1.5px solid var(--hr-line); color:var(--hr-muted-2);
}
.btn-secondary:hover, .btn-secondary:focus{
    background-color:var(--hr-surface-2); border-color:var(--hr-line-2); color:var(--hr-ink);
}
.btn-neutral{ color:var(--hr-accent); background-color:var(--hr-surface); border-color:transparent; }
.btn-neutral:hover{ color:var(--hr-accent-700); }

.btn-outline-primary{ color:var(--hr-accent); border:1.5px solid var(--hr-accent); }
.btn-outline-primary:hover{ background-color:var(--hr-accent); border-color:var(--hr-accent); color:#fff; }
.btn-outline-primary:not(:disabled):not(.disabled).active{
    background-color:var(--hr-accent-soft-2); border-color:var(--hr-accent); color:var(--hr-accent);
}

.btn-outline-white{ color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline-white:hover{ background-color:rgba(255,255,255,.14); color:#fff; }

/* --------------------------------------------------------------------------
   5. Utility colour remaps (Argon defines these with !important)
   -------------------------------------------------------------------------- */
.text-primary{ color:var(--hr-accent) !important; }
.text-info{ color:var(--hr-info) !important; }
.text-warning{ color:var(--hr-accent-700) !important; }
.text-success{ color:var(--hr-success) !important; }
.text-danger{ color:var(--hr-danger) !important; }
.bg-primary{ background-color:var(--hr-accent) !important; }
.bg-info{ background-color:var(--hr-info) !important; }
.bg-default{ background-color:var(--hr-ink) !important; }

/* --------------------------------------------------------------------------
   6. Badges & pills — soft chips like the prototype status tags
   -------------------------------------------------------------------------- */
.badge{ font-weight:800; letter-spacing:.02em; border-radius:7px; font-family:var(--hr-font); }
.badge-pill{ border-radius:999px; }
.badge-primary{ background-color:var(--hr-accent-soft); color:var(--hr-accent); }
.badge-secondary{ background-color:var(--hr-surface-2); color:var(--hr-muted); border:1px solid var(--hr-line); }
.badge-info{ background-color:var(--hr-info-soft); color:var(--hr-info); }
.badge-success{ background-color:var(--hr-success-soft); color:var(--hr-success); }
.badge-warning{ background-color:var(--hr-accent-soft); color:var(--hr-accent-700); }
.badge-danger{ background-color:var(--hr-danger-soft); color:var(--hr-danger); }

/* --------------------------------------------------------------------------
   7. Tables — prototype list style: sand header band, hairline rows
   -------------------------------------------------------------------------- */
.table thead th{
    text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; font-weight:800;
    color:var(--hr-muted); background-color:var(--hr-surface-2);
    border-bottom:1px solid var(--hr-line); border-top:0;
}
.table td, .table th{ border-top:1px solid var(--hr-line-soft); }
.table-hover tbody tr:hover{ background-color:var(--hr-surface-2); }
.card .table thead th{ background-color:var(--hr-surface-2); }

/* --------------------------------------------------------------------------
   8. Forms — tall rounded fields with the sand hairline, orange focus
   -------------------------------------------------------------------------- */
.form-control{
    border:1.5px solid var(--hr-line); border-radius:var(--hr-radius-sm);
    color:var(--hr-ink); font-family:var(--hr-font); font-weight:600;
    min-height:44px;
}
.form-control:focus{
    border-color:var(--hr-accent); box-shadow:0 0 0 3px rgba(217,93,18,.12); color:var(--hr-ink);
}
.form-control::placeholder{ color:var(--hr-muted-3); }
.form-control-label, label{ font-weight:700; color:var(--hr-muted-2); }
.input-group-text{ background-color:var(--hr-surface-2); border:1.5px solid var(--hr-line); color:var(--hr-muted); }
.custom-control-input:checked ~ .custom-control-label::before{
    background-color:var(--hr-accent); border-color:var(--hr-accent);
}
.custom-toggle input:checked + .custom-toggle-slider{
    border-color:var(--hr-accent); background:var(--hr-accent);
}
.custom-toggle input:checked + .custom-toggle-slider:before{ background:#fff; }
.custom-select{ border:1.5px solid var(--hr-line); border-radius:var(--hr-radius-sm); font-weight:600; min-height:44px; }
.custom-select:focus{ border-color:var(--hr-accent); box-shadow:0 0 0 3px rgba(217,93,18,.12); }

/* Select2 (used across the app) to match the form controls */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    border:1.5px solid var(--hr-line) !important; border-radius:var(--hr-radius-sm) !important;
    min-height:44px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color:var(--hr-accent) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color:var(--hr-accent-soft-2) !important; border-color:var(--hr-accent) !important; color:var(--hr-accent-700) !important;
}

/* --------------------------------------------------------------------------
   9. Navs, tabs, pagination, progress, dropdowns
   -------------------------------------------------------------------------- */
.nav-pills .nav-link{
    border-radius:11px; font-weight:800; color:var(--hr-muted-2);
    border:1.5px solid var(--hr-line); background:var(--hr-surface);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background-color:var(--hr-accent); border-color:var(--hr-accent); color:#fff;
}
.nav-tabs .nav-link{ font-weight:700; }
.nav-tabs .nav-link.active{ color:var(--hr-accent); border-bottom-color:var(--hr-accent); }
.page-item.active .page-link{ background-color:var(--hr-accent); border-color:var(--hr-accent); }
.page-link{ color:var(--hr-accent); }
.progress{ background-color:var(--hr-canvas); border-radius:5px; }
.progress-bar{ background-color:var(--hr-accent); }
.dropdown-menu{ border:1.5px solid var(--hr-line); border-radius:14px; box-shadow:var(--hr-shadow-lg); }
.dropdown-item{ font-weight:600; }
.dropdown-item:hover, .dropdown-item:focus{ background-color:var(--hr-surface-2); color:var(--hr-accent); }
.dropdown-item.active, .dropdown-item:active{ background-color:var(--hr-accent); color:#fff; }

/* --------------------------------------------------------------------------
   10. Alerts — soft tints
   -------------------------------------------------------------------------- */
.alert{ border-radius:var(--hr-radius-sm); font-weight:600; }
.alert-success{ background-color:var(--hr-success-soft); border-color:transparent; color:#176e3b; }
.alert-danger{ background-color:var(--hr-danger-soft); border-color:transparent; color:#a02f22; }
.alert-info{ background-color:var(--hr-info-soft); border-color:transparent; color:#1f5069; }
.alert-warning{ background-color:var(--hr-accent-soft); border-color:transparent; color:var(--hr-accent-700); }

/* --------------------------------------------------------------------------
   11. Dark ink sidebar — the prototype rail (#241f19, orange active pill).
   The structural block lives in sidebar.blade.php; these rules carry the
   colours with enough specificity to win over Argon + the scoped block.
   -------------------------------------------------------------------------- */
#sidenav-main.bg-white{ background-color:var(--hr-ink) !important; border-right:0; }
/* The dark site logo needs a light ground on the ink rail */
#sidenav-main .navbar-brand{ background:#fff; border-radius:10px; padding:.4rem .6rem !important; }
#sidenav-main .navbar-heading{ color:var(--hr-muted) !important; }
#sidenav-main hr{ border-top:1px solid rgba(255,255,255,.1) !important; }
nav#sidenav-main .navbar-nav .nav-link{
    color:#cfc7ba; font-weight:700; border-radius:10px; min-height:44px;
}
nav#sidenav-main .navbar-nav .nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; box-shadow:none; }
nav#sidenav-main .navbar-nav .nav-link.active{
    background:var(--hr-accent); color:#fff; box-shadow:none;
}
nav#sidenav-main .navbar-nav .nav-link i{ color:inherit !important; }
#sidenav-main .navbar-toggler-icon{ filter:invert(1); }
#sidenav-main .text-muted, #sidenav-main .navbar-heading .badge{ color:var(--hr-muted-3) !important; }
/* Collapse panel inside the sidebar keeps the dark ground */
#sidenav-main .navbar-collapse{ background:transparent; }
@media (max-width: 767.98px){
    /* Argon paints the expanded mobile menu white — keep it readable there */
    #sidenav-main .navbar-collapse.show, #sidenav-main .navbar-collapse.collapsing{
        background:var(--hr-ink);
    }
}

/* Top navbar: white band with hairline (prototype topbar) */
.navbar-top{ background-color:transparent; }
#navbar-main{ min-height:64px; }

/* Modals */
.modal-content{ border-radius:20px; border:1.5px solid var(--hr-line); }
.modal-header{ border-bottom:1px solid var(--hr-line-soft); }
.modal-footer{ border-top:1px solid var(--hr-line-soft); }

/* Focus visibility (accessibility floor) */
.btn:focus-visible, a:focus-visible, .form-control:focus-visible{
    outline:2px solid var(--hr-accent); outline-offset:2px;
}

/* --------------------------------------------------------------------------
   12. Detach the header band from the content. Argon overlaps a tall gradient
   header with the following content via a negative top margin (mt--7 etc.).
   Compact flat gradient headers into a slim band and drop content below it.
   (Same scoping rationale as the previous theme: only flat .header.bg-gradient-*
   bands and their immediately-following container are touched.)
   -------------------------------------------------------------------------- */
.header.bg-gradient-primary,
.header.bg-gradient-default,
.header.bg-gradient-info,
.header.bg-gradient-success,
.header.bg-gradient-warning{
    padding-top:4rem !important;
    padding-bottom:1.75rem !important;
}
.header.bg-gradient-primary + .container-fluid,
.header.bg-gradient-default + .container-fluid,
.header.bg-gradient-info + .container-fluid,
.header.bg-gradient-success + .container-fluid,
.header.bg-gradient-warning + .container-fluid,
.header.bg-gradient-primary + .container,
.header.bg-gradient-default + .container,
.header.bg-gradient-info + .container,
.header.bg-gradient-primary + .row,
.header.bg-gradient-default + .row,
.header.bg-gradient-info + .row{
    margin-top:1.5rem !important;
}

@media (prefers-reduced-motion:reduce){
    *{ scroll-behavior:auto !important; }
    .btn:not(:disabled):not(.disabled):active{ transform:none; }
}

/* --------------------------------------------------------------------------
   12b. Menu page (items/index) — that page scopes its own pine/amber tokens
   on .menu-admin. Re-map them to this guideline with a higher-specificity
   selector (doubled class beats the page block regardless of load order):
   pine (primary) -> dark ink, amber (accent) -> orange, paper -> cream.
   -------------------------------------------------------------------------- */
.menu-admin.menu-admin{
    --ink:#241f19;
    --pine:#241f19; --pine-700:#3a332b; --pine-900:#171310;
    --amber:#d95d12; --amber-600:#b34a0c; --amber-soft:#ffe9d9;
    --canvas:#f4f1ec; --surface:#ffffff; --surface-2:#faf8f4;
    --line:#e8e3da; --line-2:#d0c8bc;
    --muted:#8a8177; --muted-2:#b3a99c;
    --avail:#1d8a4a; --avail-soft:#eaf6ef;
    --danger:#c0392b; --danger-soft:#faf0ee;
    --shadow:0 1px 3px rgba(36,31,25,.06);
    --shadow-lg:0 12px 40px rgba(36,31,25,.16);
}
/* Archivo replaces the page's Fraunces/Open Sans mix (icon fonts excluded) */
.menu-admin.menu-admin,
.menu-admin.menu-admin *:not(i):not([class*="fa-"]):not([class*="ni-"]){
    font-family:var(--hr-font) !important;
}

/* ==========================================================================
   13. On-screen keyboard (keyboardless admin) — same sheet as the tablet POS.
   Markup is injected by custom/js/hubresto-osk.js; everything is .hrk-*.
   ========================================================================== */
.hrk-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:1080;
    background:#dcd7ce; border-top:1px solid #c8c1b5;
    padding:12px 16px 16px;
    box-shadow:0 -10px 34px rgba(0,0,0,.2);
    animation:hrk-slideup .18s;
    font-family:var(--hr-font);
    user-select:none; -webkit-user-select:none;
}
@keyframes hrk-slideup{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
.hrk-inner{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.hrk-echo{
    min-height:52px; display:flex; align-items:center; gap:12px;
    background:#fff; border-radius:12px; padding:8px 16px;
    font-size:17px; font-weight:700; color:var(--hr-ink);
}
.hrk-echo-label{
    font-size:11px; font-weight:800; color:var(--hr-muted-3);
    text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; max-width:160px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hrk-echo-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hrk-echo-value.hrk-empty{ color:var(--hr-muted-3); }
.hrk-caret{ width:2px; height:24px; background:var(--hr-accent); flex-shrink:0; }
.hrk-row{ display:flex; justify-content:center; gap:7px; }
.hrk-key{
    width:62px; height:54px; display:flex; align-items:center; justify-content:center;
    border:none; padding:0; cursor:pointer;
    border-radius:9px; font-size:17px; font-weight:700; font-family:var(--hr-font);
    background:#fff; color:var(--hr-ink);
    box-shadow:0 1.5px 0 rgba(0,0,0,.18);
    user-select:none; -webkit-user-select:none;
}
.hrk-key:active{ transform:translateY(1.5px); box-shadow:none; }
.hrk-key.hrk-dark{ background:#aba394; color:#fff; }
.hrk-key.hrk-orange{ background:var(--hr-accent); color:#fff; }
/* Room for the sheet so the focused field can scroll above it */
body.hrk-open{ padding-bottom:360px !important; }
/* Floating enable/disable toggle */
.hrk-fab{
    position:fixed; right:16px; bottom:16px; z-index:1079;
    width:48px; height:48px; border-radius:14px; border:none; cursor:pointer;
    background:var(--hr-ink); color:#fff; font-size:20px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.hrk-fab.hrk-on{ background:var(--hr-accent); }
.hrk-fab:active{ transform:scale(.92); }