/**
 * The SoftiX look.
 *
 * tokens.css carries the palette and compat.css restyles Bootstrap through it;
 * this is the identity on top: a dark branded sidebar instead of the stock
 * white one, a calmer header, softer surfaces, and tables that read as a
 * ledger rather than a spreadsheet. Loaded last, so it can be removed in one
 * line (layouts/partials/css.blade.php) if anything here ever has to go.
 *
 * Specificity is deliberate: the shell is built from single-class Tailwind
 * utilities (`tw-bg-white`, `hover:tw-bg-gray-100`), so every override here
 * carries at least one extra class or the #side-bar id and wins without
 * !important. The few !important below override inline styles.
 */

:root {
    --sx-theme-sidebar: 9 33 30;          /* #09211E — deep teal-black */
    --sx-theme-sidebar-raised: 14 46 42;  /* hover / open group */
    --sx-theme-sidebar-text: 176 201 196;
    --sx-theme-sidebar-text-strong: 236 245 243;
    --sx-theme-sidebar-line: 255 255 255;

    --sx-theme-canvas: 243 246 245;       /* #F3F6F5 — a whisper of the teal */
    --sx-theme-radius-card: 12px;
    --sx-theme-radius-control: 8px;
    --sx-theme-shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.04);
    --sx-theme-shadow-raised: 0 4px 12px rgb(16 24 40 / 0.08);
}

/* -------------------------------------------------------------------
   Canvas
   ------------------------------------------------------------------- */

body,
.content-wrapper,
.thetop {
    background-color: rgb(var(--sx-theme-canvas));
}

/* -------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------- */

aside.side-bar {
    background-color: rgb(var(--sx-theme-sidebar));
    border-inline-end: 0;
}

aside.side-bar .tw-h-15.tw-border-b {
    background-color: rgb(var(--sx-theme-sidebar));
    border-bottom-color: rgb(var(--sx-theme-sidebar-line) / 0.08);
}

aside.side-bar .tw-h-15 .side-bar-heading {
    color: rgb(var(--sx-theme-sidebar-text-strong));
    letter-spacing: 0.01em;
}

aside.side-bar #sidebar_menu_search {
    background-color: rgb(var(--sx-theme-sidebar-line) / 0.06);
    border-color: rgb(var(--sx-theme-sidebar-line) / 0.10);
    color: rgb(var(--sx-theme-sidebar-text-strong));
}

aside.side-bar #sidebar_menu_search::placeholder {
    color: rgb(var(--sx-theme-sidebar-text) / 0.7);
}

aside.side-bar #side-bar {
    border-inline-end: 0;
    scrollbar-color: rgb(var(--sx-theme-sidebar-line) / 0.15) transparent;
}

/* Items, top level and children. */
aside.side-bar #side-bar a {
    color: rgb(var(--sx-theme-sidebar-text));
    border-radius: var(--sx-theme-radius-control);
}

aside.side-bar #side-bar a:hover,
aside.side-bar #side-bar a:focus {
    background-color: rgb(var(--sx-theme-sidebar-raised));
    color: rgb(var(--sx-theme-sidebar-text-strong));
}

/* One icon colour. The rainbow that was here gave every module its own hue,
   which on a dark panel reads as a fairground rather than a menu. */
aside.side-bar #side-bar svg,
aside.side-bar #side-bar i {
    color: rgb(var(--sx-theme-sidebar-text) / 0.85) !important;
}

/* The active page, and the group it sits in. */
aside.side-bar #side-bar a.tw-bg-gray-200,
aside.side-bar #side-bar .tw-bg-gray-200 > a.drop_down {
    background-color: rgb(var(--sx-primary-600));
    color: rgb(255 255 255);
}

aside.side-bar #side-bar a.tw-bg-gray-200 svg,
aside.side-bar #side-bar .tw-bg-gray-200 > a.drop_down svg {
    color: rgb(255 255 255) !important;
}

aside.side-bar #side-bar div.tw-bg-gray-200 {
    background-color: rgb(var(--sx-theme-sidebar-raised));
}

aside.side-bar #side-bar .chiled a.tw-text-primary-700,
aside.side-bar #side-bar .chiled a[class*="tw-text-primary"] {
    color: rgb(var(--sx-primary-300));
    font-weight: 700;
}

/* The thin guide line beside open children. */
aside.side-bar #side-bar .chiled .tw-bg-gray-200 {
    background-color: rgb(var(--sx-theme-sidebar-line) / 0.10);
}

/* Section headers. */
aside.side-bar #side-bar .tw-uppercase {
    color: rgb(var(--sx-theme-sidebar-text) / 0.55);
}

/* -------------------------------------------------------------------
   Header
   ------------------------------------------------------------------- */

header.no-print,
.main-header {
    background-color: rgb(255 255 255);
    border-bottom-color: rgb(var(--sx-border));
    box-shadow: 0 1px 0 rgb(16 24 40 / 0.02);
}

/* -------------------------------------------------------------------
   Surfaces
   ------------------------------------------------------------------- */

.box,
.sx-card,
.tw-rounded-xl.tw-bg-white,
.tw-bg-white.tw-shadow-sm,
.tw-bg-white.tw-ring-1 {
    border-radius: var(--sx-theme-radius-card);
    box-shadow: var(--sx-theme-shadow-card);
}

.box {
    border-top: 0;
    border: 1px solid rgb(var(--sx-border));
}

.box > .box-header {
    border-bottom: 1px solid rgb(var(--sx-border));
}

/* -------------------------------------------------------------------
   Page titles
   ------------------------------------------------------------------- */

.content-header > h1,
.sx-page-header h1 {
    color: rgb(var(--sx-text));
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The component header sits outside section.content, so it took none of
   its gutter and its title ran into the sidebar. */
.sx-page-header {
    padding: 20px 15px 0;
    margin-bottom: 0;
}

/* Card header: title at the start, tools at the far end. The tools were a
   float that landed against the title ("جميع جهات الاتصالإضافة"). */
.sx-card .box-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.sx-card .box-header > .box-tools {
    float: none;
    position: static;
    margin-inline-start: auto;
}

.sx-card .box-header > small {
    flex-basis: 100%;
}

/* The per-row "Actions" dropdown in every list was daisyUI's sky blue. */
.tw-dw-btn-outline.tw-dw-btn-info {
    color: rgb(var(--sx-primary-600));
    border-color: rgb(var(--sx-primary-300));
}

.tw-dw-btn-outline.tw-dw-btn-info:hover,
.open > .tw-dw-btn-outline.tw-dw-btn-info {
    color: rgb(255 255 255);
    background-color: rgb(var(--sx-primary-600));
    border-color: rgb(var(--sx-primary-600));
}

/* AdminLTE's identity blues, used as fills on addons, badges and tiles,
   take the brand instead. Green, red and yellow mean paid, owed and
   pending, so they stay. */
.bg-light-blue,
.bg-blue,
.bg-aqua,
.bg-navy {
    background-color: rgb(var(--sx-primary-600)) !important;
    color: rgb(255 255 255) !important;
}

.input-group-addon.bg-light-blue {
    border-color: rgb(var(--sx-primary-600));
}

/* Native checkboxes and radios (iCheck is not on every screen) in the
   brand colour rather than the browser's blue. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: rgb(var(--sx-primary-600));
}

/* The bare file input showed the browser's grey "Choose File" button. */
input[type="file"] {
    font-size: 13px;
    color: rgb(var(--sx-text-muted));
}

input[type="file"]::file-selector-button {
    margin-inline-end: 10px;
    padding: 6px 14px;
    border: 1px solid rgb(var(--sx-primary-200));
    border-radius: var(--sx-theme-radius-control);
    background: rgb(var(--sx-primary-50));
    color: rgb(var(--sx-primary-700));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: rgb(var(--sx-primary-100));
}

/* -------------------------------------------------------------------
   Controls
   ------------------------------------------------------------------- */

.btn,
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.input-group-addon {
    border-radius: var(--sx-theme-radius-control);
}

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

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

.btn-primary,
.tw-dw-btn-primary:not(.tw-dw-btn-outline) {
    background-color: rgb(var(--sx-primary-700));
    border-color: rgb(var(--sx-primary-700));
}

.btn-primary:hover,
.btn-primary:focus,
.tw-dw-btn-primary:not(.tw-dw-btn-outline):hover {
    background-color: rgb(var(--sx-primary-800));
    border-color: rgb(var(--sx-primary-800));
}

/* The outline variant (the Edit button in every list) had been caught by
   the fill above: daisyUI's blue text on a dark teal fill, unreadable. */
.tw-dw-btn-outline.tw-dw-btn-primary {
    background-color: transparent;
    color: rgb(var(--sx-primary-700));
    border-color: rgb(var(--sx-primary-300));
}

.tw-dw-btn-outline.tw-dw-btn-primary:hover {
    background-color: rgb(var(--sx-primary-700));
    color: rgb(255 255 255);
    border-color: rgb(var(--sx-primary-700));
}

.form-control:focus,
.select2-container--focus .select2-selection {
    border-color: rgb(var(--sx-primary-500));
    box-shadow: 0 0 0 3px rgb(var(--sx-primary-500) / 0.15);
}

/* Native dropdowns: Bootstrap's fixed height plus its padding left too little
   room for the text, so every <select> clipped its value at the bottom
   ("wesome Shop"). One control height across text inputs and selects. */
.form-control,
.select2-container--default .select2-selection--single {
    min-height: 36px;
}

select.form-control {
    height: 36px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.6;
}

select.form-control.input-sm,
.input-sm select.form-control {
    height: 32px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* AdminLTE's cyan info icons and #3c8dbc links predate the palette. */
.text-primary,
a.text-primary,
.btn-link,
.fa-plus-circle,
.text-info,
.fa-info-circle,
.fas.fa-info-circle {
    color: rgb(var(--sx-primary-600));
}

a.text-primary:hover,
.btn-link:hover {
    color: rgb(var(--sx-primary-800));
}

/* vendor.css sets .text-info {color:#11cdef !important}; the tooltip icon
   carries that class on every form label. */
i.hover-q.text-info,
.text-info.fa-info-circle {
    color: rgb(var(--sx-primary-500)) !important;
}

/* -------------------------------------------------------------------
   Tables — a ledger, not a spreadsheet
   ------------------------------------------------------------------- */

.table > thead > tr > th,
table.dataTable thead th {
    background-color: rgb(var(--sx-primary-50) / 0.6);
    border-bottom: 1px solid rgb(var(--sx-border));
    color: rgb(var(--sx-text-muted));
    font-size: var(--sx-text-sm);
    font-weight: 700;
}

.table > tbody > tr > td {
    border-top-color: rgb(var(--sx-border) / 0.7);
    vertical-align: middle;
}

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

.table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover {
    background-color: rgb(var(--sx-primary-50) / 0.5);
}

/* The totals row under every list was AdminLTE's slab grey (#d2d6de) with
   black text. It is the row a reader looks for, so it takes the brand tint. */
tfoot > tr.bg-gray,
tr.footer-total {
    background-color: rgb(var(--sx-primary-50)) !important;
    color: rgb(var(--sx-primary-900));
    font-weight: 700;
}

tfoot > tr.bg-gray > td,
tr.footer-total > td {
    border-top: 2px solid rgb(var(--sx-primary-200)) !important;
    font-variant-numeric: tabular-nums;
}

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

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: rgb(var(--sx-primary-600));
}

.nav-tabs-custom > .nav-tabs > li.active > a {
    color: rgb(var(--sx-primary-700));
}

/* -------------------------------------------------------------------
   Settings — the vertical tab list
   ------------------------------------------------------------------- */

/* app.css painted the active tab in an indigo-to-blue gradient. */
div.pos-tab-menu div.list-group > a.active,
div.pos-tab-menu div.list-group > a.active .glyphicon,
div.pos-tab-menu div.list-group > a.active .fa {
    background: rgb(var(--sx-primary-700));
    color: rgb(255 255 255);
    border-color: rgb(var(--sx-primary-700));
}

div.pos-tab-menu div.list-group > a:not(.active):hover {
    background: rgb(var(--sx-primary-50));
    color: rgb(var(--sx-primary-800));
}

/* -------------------------------------------------------------------
   Kitchen and waiter boards
   ------------------------------------------------------------------- */

.sx-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px;
    padding: 6px 14px;
    border: 1px solid rgb(var(--sx-primary-200));
    border-radius: var(--sx-theme-radius-control);
    background: rgb(var(--sx-surface));
    color: rgb(var(--sx-primary-700));
    font-weight: 600;
}

.sx-back-link:hover,
.sx-back-link:focus {
    background: rgb(var(--sx-primary-50));
    color: rgb(var(--sx-primary-800));
    text-decoration: none;
}

[dir="ltr"] .sx-back-link .fa-arrow-right {
    transform: scaleX(-1);
}

/* An order ticket: a white card, the invoice number as its heading, the
   action the cook takes in brand colour and the details link quiet beneath
   it. It was a grey AdminLTE small-box with an orange and a cyan bar. */
.order_div .small-box.bg-gray {
    background: rgb(var(--sx-surface)) !important;
    color: rgb(var(--sx-text));
    border: 1px solid rgb(var(--sx-border));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sx-theme-shadow-card);
}

.order_div .small-box .inner h4 {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgb(var(--sx-border));
}

.order_div .small-box .table-slim th {
    color: rgb(var(--sx-text-muted));
    font-weight: 600;
}

.order_div .small-box > .small-box-footer {
    display: block;
    padding: 9px 0;
    font-weight: 700;
    border-radius: 0;
}

.order_div .small-box > .small-box-footer.bg-yellow {
    background: rgb(var(--sx-primary-700)) !important;
    color: rgb(255 255 255) !important;
}

.order_div .small-box > .small-box-footer.bg-yellow:hover {
    background: rgb(var(--sx-primary-800)) !important;
}

.order_div .small-box > .small-box-footer.bg-info {
    background: rgb(var(--sx-primary-50)) !important;
    color: rgb(var(--sx-primary-700)) !important;
}

.order_div .small-box > .small-box-footer.bg-info:hover {
    background: rgb(var(--sx-primary-100)) !important;
}

.order_div .small-box > div.small-box-footer.bg-gray {
    background: rgb(var(--sx-surface-sunken)) !important;
}

/* -------------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------------- */

/* The greeting and its filters sit on a brand band: the first thing seen
   after signing in is the product's colour, not a grey page. */
.sx-dash .sx-dash-hero {
    background: linear-gradient(135deg, rgb(var(--sx-primary-900)), rgb(var(--sx-primary-700)));
    border-radius: 16px;
    padding: 22px 24px;
    margin-top: 8px;
    box-shadow: var(--sx-theme-shadow-raised);
}

.sx-dash .sx-dash-hero h1,
.sx-dash .sx-dash-hero h1 span {
    color: rgb(255 255 255);
    margin-bottom: 0;
}

.sx-dash .sx-dash-hero .select2-container--default .select2-selection--single,
.sx-dash .sx-dash-hero .form-control,
.sx-dash .sx-dash-hero button {
    background-color: rgb(255 255 255 / 0.12);
    border-color: rgb(255 255 255 / 0.25);
    color: rgb(255 255 255);
}

.sx-dash .sx-dash-hero .select2-container--default .select2-selection--single .select2-selection__rendered,
.sx-dash .sx-dash-hero button svg,
.sx-dash .sx-dash-hero button span {
    color: rgb(255 255 255);
}

.sx-dash .sx-dash-hero button:hover {
    background-color: rgb(255 255 255 / 0.2);
}

/* Stat tiles */
.sx-dash .tw-ring-1.tw-ring-gray-200 {
    border-radius: 14px;
    box-shadow: var(--sx-theme-shadow-card);
    --tw-ring-color: rgb(var(--sx-border));
}

.sx-dash .tw-ring-1.tw-ring-gray-200:hover {
    box-shadow: var(--sx-theme-shadow-raised);
}

/* Money in a numeral face, not a typewriter one. */
.sx-dash .tw-font-mono {
    font-family: var(--sx-font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Icon chips: sales and net in brand teal. Amber (unpaid) and red
   (returns, expenses) keep their meaning and stay as they are. */
.sx-dash .tw-bg-sky-100,
.sx-dash .tw-bg-green-100 {
    background-color: rgb(var(--sx-primary-50));
    color: rgb(var(--sx-primary-700));
}

.sx-dash .tw-text-sky-500,
.sx-dash .tw-text-green-500 {
    color: rgb(var(--sx-primary-700));
}

@media (prefers-reduced-motion: reduce) {
    aside.side-bar #side-bar a {
        transition: none;
    }
}