/* lolpos.css - our own app-wide fixes on top of BardPOS's stylesheets.
   Loaded once by resources/views/layouts/app.blade.php, after dark-mode.css, so it wins over both.
   Recorded in CUSTOMISATIONS.md. Keep each rule small and say why. */

/* ── Dark mode gaps ─────────────────────────────────────────────────────────────── */

/* The page container behind every screen kept its light body colour, so long pages showed a white band
   under the side menu and page titles (light text) sat on light grey. */
html.dark-mode .container.grid,
html.dark-mode .content-wrapper,
html.dark-mode .content { background-color: var(--bg-app) !important; }

/* Table rows that BardPOS paints white or light grey (striped rows, totals rows, highlighted rows). */
html.dark-mode table tr,
html.dark-mode table.table-striped > tbody > tr:nth-of-type(odd),
html.dark-mode .table > tbody > tr.bg-gray,
html.dark-mode .table > tfoot > tr,
html.dark-mode tr.bg-light-gray,
html.dark-mode .bg-gray,
html.dark-mode .bg-light-gray { background-color: transparent !important; }
html.dark-mode table.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: rgba(255, 255, 255, .025) !important; }
html.dark-mode .table > tfoot > tr > td,
html.dark-mode .table > tfoot > tr > th,
html.dark-mode tr.footer-total > td { background-color: var(--bg-elevated) !important; }

/* Charts (Highcharts): axis labels, legends and titles were dark grey on the dark background. */
html.dark-mode .highcharts-axis-labels text,
html.dark-mode .highcharts-axis-title,
html.dark-mode .highcharts-legend-item text,
html.dark-mode .highcharts-title,
html.dark-mode .highcharts-subtitle,
html.dark-mode .highcharts-data-label text { fill: var(--text-secondary) !important; color: var(--text-secondary) !important; }
html.dark-mode .highcharts-text-outline { stroke: var(--bg-surface) !important; fill: var(--bg-surface) !important; }
html.dark-mode .highcharts-background { fill: transparent !important; }
html.dark-mode .highcharts-grid-line { stroke: rgba(255, 255, 255, .08) !important; }

/* ── Text on light colours ─────────────────────────────────────────────────────────── */
/* A business can pick any theme colour, and the dark theme repaints some buttons and labels and not others.
   On a light background BardPOS's white text can't be read, so js/lolpos.js measures each button, label and
   active menu item and marks the ones on a light background. */
html .lp-on-light.lp-on-light, html .lp-on-light.lp-on-light *:not(img):not(svg) { color: #000 !important; }

/* ── Public pages: pricing, sign up, log in (layouts/auth) ─────────────────────────── */
/* The header's buttons were three identical outlines, and on phones they hid behind a menu. Sign up is the one
   thing these pages are for, so it is the brand crimson; Sign in is solid white; Pricing stays an outline. */
.header-auth .btn.btn-header-auth { border-radius: 999px !important; padding: 8px 18px !important; font-weight: 700 !important; }
.header-auth a.btn-header-auth[href*="business/register"] { background: #D91C5C !important; border-color: #D91C5C !important; color: #fff !important; box-shadow: 0 6px 16px rgba(217, 28, 92, .35); }
.header-auth a.btn-header-auth[href*="business/register"]:hover { background: #b8154c !important; border-color: #b8154c !important; color: #fff !important; }
.header-auth a.btn-header-auth[href*="/login"] { background: #fff !important; border-color: #fff !important; color: #083646 !important; }
.header-auth a.btn-header-auth[href*="/login"]:hover { background: #e6f6fd !important; color: #083646 !important; }
/* The log in button: white on amber could hardly be read */
.login-layout .button-wrapper button[type="submit"] { background: #D91C5C !important; color: #fff !important; border: 0 !important; font-weight: 700; letter-spacing: .02em; box-shadow: 0 8px 18px rgba(217, 28, 92, .3); }
.login-layout .button-wrapper button[type="submit"]:hover { background: #b8154c !important; }
.login-layout .form-footer a { color: #D91C5C !important; font-weight: 700; }
@media (max-width: 768px) {
    /* Keep the buttons in the header on phones (instead of behind a menu), smaller, beside the language switch */
    .header-auth { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 58px; }
    .header-auth .header-left, .header-auth .header-right { position: static !important; }
    .header-auth .header-right { display: flex !important; gap: 6px; align-items: center; padding: 10px 10px 10px 0; margin-left: auto; }
    .header-auth .header-right .pull-right { display: flex; gap: 6px; flex-wrap: nowrap; }
    .header-auth .header-right .btn.btn-header-auth { margin: 0 !important; padding: 7px 12px !important; font-size: 13px; }
    .header-auth .header-auth-mobile { display: none !important; }
    .header-auth .header-left { padding: 14px 10px; }
    .login-layout .logo-text { font-size: 30px; margin-top: 10px; text-align: center; }
}
@media (max-width: 400px) {
    /* the Pricing link moves out of the way on the narrowest phones; Register and Sign in stay */
    .header-auth a.btn-header-auth[href*="pricing"] { display: none !important; }
}

/* No sideways scrolling on phones: some Bootstrap rows and off-screen drawers poke past the edge */
@media (max-width: 768px) { html, body { overflow-x: clip; } }

/* "Packages" with nothing under it: the old fixed packages are off sale (plans are built in the plan builder),
   so the heading stood alone, and on the public pricing page it was dark text on the dark page. */
.main-container > .row:has(.package-container):not(:has(.package-container *)),
.box:has(> .box-body .package-container):not(:has(.package-container *)) { display: none !important; }
.login-layout .main-container h3.text-center { color: #fff; }

/* Superadmin report boxes (small-box bg-info and friends): light boxes with the dark theme's light text */
html.dark-mode .small-box { background-color: var(--bg-elevated) !important; border: 1px solid rgba(255, 255, 255, .08); }
html.dark-mode .small-box .icon, html.dark-mode .small-box .icon * { color: rgba(255, 255, 255, .12) !important; }

/* Hotel bookings (Add / Edit booking): the six-column rooms table sat beside the extras list in a column too narrow
   for it and ran over the extras, and the room row's edit button stretched across. The rooms table and the extras
   each take the full width now, and the row's buttons keep their size. */
.booking_add_room.col-md-8, .booking_add_room + .col-md-4 { width: 100%; float: none; clear: both; }
/* clear: both keeps the rooms table below the floated date and time fields; without it its box slid up under them,
   sat on top, and took the clicks, so Arrival time and Departure date/time could not be picked. */
.booking_add_room + .col-md-4 { margin-top: 18px; }
.booking_add_room table td:last-child, .booking_add_room .price-td { white-space: nowrap; }
.booking_add_room table td:last-child { width: 1%; }
.booking_add_room table td .btn { width: auto !important; min-width: 0 !important; display: inline-block !important; margin: 0 2px; padding: 5px 10px !important; }

/* Appointment calendar: FullCalendar's default gradient and white text shadow
   survive a background-color override and hide the light arrows in dark mode. */
html.dark-mode #calendar .fc-toolbar .fc-button {
    background-image: none !important;
    text-shadow: none !important;
}
html.dark-mode #calendar .fc-toolbar .fc-button .fc-icon,
html.dark-mode #calendar .fc-toolbar .fc-button .fc-icon::after {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}
html.dark-mode #calendar .fc-toolbar .fc-button:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* Contrast contract: keep muted information readable on dark surfaces. */
html.dark-mode { --text-secondary:#b3bdcc; --text-muted:#a6b0bf; }
html.dark-mode .text-muted,html.dark-mode .help-block{color:var(--text-muted)!important;}
html.dark-mode .form-control::placeholder,html.dark-mode input::placeholder,html.dark-mode textarea::placeholder{color:var(--text-muted)!important;opacity:1;}
html.dark-mode .form-control:disabled,html.dark-mode .form-control[readonly]{color:var(--text-primary)!important;background-color:var(--bg-elevated)!important;opacity:1;}
html.dark-mode .text-danger{color:#fca5a5!important;}
html.dark-mode .text-success{color:#6ee7b7!important;}
html.dark-mode .text-warning{color:#fde68a!important;}
html.dark-mode .text-info{color:#93c5fd!important;}
html .lp-on-dark.lp-on-dark,html .lp-on-dark.lp-on-dark *:not(img):not(svg){color:#fff!important;}
/* The jobs/order board is reused by field service and restaurant businesses.
   div-based values escaped the old dark-theme span/p colour reset. */
html .orders-layout-row{--order-surface:#fff;--order-body:#f8fafc;--order-text:#172033;--order-secondary:#475569;--order-border:#c4ccd8;}
html.dark-mode .orders-layout-row{--order-surface:#1a1d24;--order-body:#13151a;--order-text:#f1f5f9;--order-secondary:#b3bdcc;--order-border:#5d687a;}
html .orders-layout-row .order-card,html .orders-layout-row .box{background:var(--order-surface)!important;color:var(--order-text)!important;border-color:var(--order-border)!important;}
html .orders-layout-row .box-body{background:var(--order-body)!important;color:var(--order-text)!important;}
html .orders-layout-row .order-card-id,html .orders-layout-row .order-card-meta-value,html .orders-layout-row .order-card-body,
html .orders-layout-row .order-card-products,html .orders-layout-row .order-card-products strong{color:var(--order-text)!important;}
html .orders-layout-row .order-card-meta,html .orders-layout-row .order-card-meta-label{color:var(--order-secondary)!important;}
html .orders-layout-row .order-card-status{color:#172033!important;background:#e2e8f0!important;}
html .orders-layout-row .order-card-status--received{color:#075985!important;background:#e0f2fe!important;}
html .orders-layout-row .order-card-status--cooked,html .orders-layout-row .order-card-status--partial_cooked{color:#991b1b!important;background:#fee2e2!important;}
html .orders-layout-row .order-card-status--served,html .orders-layout-row .order-card-status--partial_served{color:#14532d!important;background:#dcfce7!important;}
html .orders-layout-row .box-header{background:#075a72!important;color:#fff!important;border-color:var(--order-border)!important;}
html .orders-layout-row .box-header .box-title{color:#fff!important;}
html .orders-layout-row .order-card-header .dropdown-toggle{color:var(--order-text)!important;background:var(--order-body)!important;min-width:30px;min-height:30px;}
html .orders-layout-row .order-card-header .dropdown-toggle i{color:inherit!important;}
html .orders-layout-row .order-card-body [style*="color:#4b5563"]{color:var(--order-secondary)!important;}
html .orders-layout-row :is(button,a,input,select):focus-visible{outline:3px solid #087ca7!important;outline-offset:3px;}
html.dark-mode .orders-layout-row :is(button,a,input,select):focus-visible{outline-color:#7dd3fc!important;}
/* Normal text uses the same contrast target in light mode, including helpers. */
html:not(.dark-mode) .text-muted,html:not(.dark-mode) .help-block{color:#526174!important;}
html:not(.dark-mode) .text-danger{color:#b42318!important;}
html:not(.dark-mode) .text-success{color:#166534!important;}
html:not(.dark-mode) .text-warning{color:#854d0e!important;}
html:not(.dark-mode) .text-info{color:#075985!important;}
html .form-control:focus-visible{outline:2px solid #087ca7!important;outline-offset:2px;}
html.dark-mode .form-control:focus-visible{outline-color:#7dd3fc!important;}
html:not(.dark-mode) .form-control::placeholder,html:not(.dark-mode) input::placeholder,html:not(.dark-mode) textarea::placeholder{color:#526174!important;opacity:1;}
/* Input boundaries remain distinguishable before focus (3:1 non-text target). */
html:not(.dark-mode) .form-control,html:not(.dark-mode) .select2-container--default .select2-selection--single,
html:not(.dark-mode) .select2-container--default .select2-selection--multiple{border-color:#7c899c!important;}
html.dark-mode .form-control,html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple{border-color:#657185!important;}