/* =====================================================================
   MTECH SYSTEMS ERP - "Midnight Glass" theme
   Place at: public/css/mtech-theme.css  (loaded LAST from css.blade.php)
   To undo the whole redesign: remove that one <link> line.
   Colours follow the business theme colour (--theme-700/800/900 are
   defined in css.blade.php), so the Settings > theme colour still works.
   Wrapped in @media screen so printouts/receipts are not affected.
   ===================================================================== */
@media screen {

:root {
    --mt-accent: color-mix(in srgb, var(--theme-700) 58%, #ffffff);
    --mt-accent-soft: color-mix(in srgb, var(--theme-700) 10%, transparent);
    --mt-ink: #0f172a;
    --mt-muted: #64748b;
    --mt-line: #e6ebf3;
    --mt-bg: #eef2f9;
    --mt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
    --mt-shadow-md: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 34px rgba(15, 23, 42, .10);
}

/* ---------- App background ---------- */
.thetop > main {
    background:
        radial-gradient(900px 420px at 100% -10%, color-mix(in srgb, var(--theme-700) 9%, transparent), transparent 60%),
        radial-gradient(700px 380px at -10% 110%, rgba(34, 211, 238, .07), transparent 60%),
        var(--mt-bg) !important;
}
#scrollable-container { background: transparent; }

/* ---------- Header ----------
   NOTE: the home dashboard banner reuses the .theme-header-bg class (twice: the
   banner and a layer behind the stat cards), so only the gradient is shared.
   Position / z-index / shadow / glass buttons apply to the real top bar only:
   it is the direct child of <main>.                                          */
.theme-header-bg {
    /* horizontal on purpose: the dashboard's two stacked layers must match */
    background-image: linear-gradient(to right, var(--theme-900) 0%, var(--theme-800) 55%,
        color-mix(in srgb, var(--theme-700) 80%, #06b6d4) 130%);
}
main > .theme-header-bg {
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--theme-900) 32%, transparent);
    position: relative;
    z-index: 6;
}
main > .theme-header-bg .theme-btn-bg,
main > .theme-header-bg summary.theme-btn-bg {
    background-color: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
main > .theme-header-bg .theme-btn-bg:hover,
main > .theme-header-bg summary.theme-btn-bg:hover {
    background-color: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
main > .theme-header-bg .theme-btn-bg:active { transform: none; }

/* ---------- Sidebar ---------- */
aside.side-bar {
    background:
        radial-gradient(120% 55% at 0% 0%, color-mix(in srgb, var(--theme-700) 38%, transparent), transparent 62%),
        linear-gradient(180deg, #0b1220 0%, #0e182d 55%, #0a101d 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 6px 0 28px rgba(8, 15, 32, .20);
    /* NO z-index here on purpose: the mobile drawer (.small-view-side-active in
       app.blade.php) needs its own z-index:1000 to sit above the dim overlay. */
}
@media (max-width: 1023px) {
    aside.side-bar.small-view-side-active { z-index: 1000 !important; }
}
aside.side-bar .theme-logo-bg {
    background: transparent !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
aside.side-bar .side-bar-heading {
    font-weight: 700;
    letter-spacing: .03em;
    background: linear-gradient(90deg, #ffffff 20%, var(--mt-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
aside.side-bar .side-bar-heading span {
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .22), 0 0 12px rgba(74, 222, 128, .75);
    animation: mtPulse 2.4s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes mtPulse { 50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, .08), 0 0 6px rgba(74, 222, 128, .4); } }

/* menu search */
.mt-side-search { border-right: 0 !important; padding-top: 12px !important; padding-bottom: 8px !important; }
.mt-side-search .mt-side-search-box {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    border-radius: 12px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mt-side-search .mt-side-search-box:focus-within {
    border-color: var(--mt-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-700) 32%, transparent);
}
.mt-side-search svg { color: #7f8db0; }
.mt-side-search #sidebar-search { color: #e6edf8 !important; }
.mt-side-search #sidebar-search::placeholder { color: #7f8db0; }
#sidebar-no-results { color: #7f8db0 !important; border-color: transparent !important; }

/* menu list */
.side-bar #side-bar,
.side-bar #side-bar ul,
.side-bar #side-bar li {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .07) !important;
}
.side-bar #side-bar a,
.side-bar #side-bar a span:not(.label):not(.badge) {
    color: #b6c2d8;
}
.side-bar #side-bar a {
    border-radius: 10px;
    transition: background-color .18s ease, color .18s ease, padding .18s ease;
}
.side-bar #side-bar a svg,
.side-bar #side-bar a i { color: #7f8db0; transition: color .18s ease; }
.side-bar #side-bar a:hover,
.side-bar #side-bar .theme-sidebar-hover:hover,
.side-bar #side-bar .theme-sidebar-hover:focus {
    background-color: rgba(255, 255, 255, .07);
    color: #ffffff;
}
.side-bar #side-bar a:hover span:not(.label):not(.badge) { color: #ffffff; }
.side-bar #side-bar a:hover svg,
.side-bar #side-bar a:hover i { color: var(--mt-accent); }
.side-bar #side-bar .theme-sidebar-active,
.side-bar #side-bar a.theme-sidebar-active {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--theme-700) 60%, transparent),
        color-mix(in srgb, var(--theme-700) 10%, transparent));
    box-shadow: inset 3px 0 0 var(--mt-accent), 0 6px 18px color-mix(in srgb, var(--theme-700) 22%, transparent);
    color: #ffffff;
}
.side-bar #side-bar .theme-sidebar-active span:not(.label):not(.badge) { color: #ffffff; }
.side-bar #side-bar .theme-sidebar-active svg,
.side-bar #side-bar .theme-sidebar-active i,
.side-bar #side-bar a.theme-sidebar-active svg,
.side-bar #side-bar a.theme-sidebar-active i { color: var(--mt-accent); }
.side-bar #side-bar .theme-sidebar-child-hover:hover,
.side-bar #side-bar .theme-sidebar-child-active,
.side-bar #side-bar .theme-sidebar-child-active span:not(.label):not(.badge) { color: #ffffff; }
/* submenu guide line + section headings (markup from AdminlteCustomPresenter) */
.side-bar #side-bar .chiled > div.tw-absolute { background-color: rgba(255, 255, 255, .10) !important; }
.side-bar #side-bar .tw-uppercase { color: #6f7d9c; }
#side-bar { scrollbar-color: rgba(255, 255, 255, .18) transparent; }
#side-bar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .18); }
#side-bar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .34); }

/* ---------- Page title ---------- */
.content-header > h1 {
    position: relative;
    padding-left: 16px;
    letter-spacing: -.02em;
}
.content-header > h1::before {
    content: '';
    position: absolute;
    left: 0; top: .16em; bottom: .16em;
    width: 5px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--theme-700), var(--mt-accent));
}

/* ---------- Cards ---------- */
.box {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: var(--mt-shadow-sm);
    transition: box-shadow .25s ease;
}
.box:hover { box-shadow: var(--mt-shadow-md); }
.box.box-primary, .box.box-solid, .box.box-info, .box.box-success, .box.box-warning, .box.box-danger {
    border-top: 1px solid rgba(15, 23, 42, .06) !important;
}
.box.box-primary::before {
    content: '';
    position: absolute;
    top: 0; left: 22px; right: 22px;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, var(--theme-700), var(--mt-accent), #22d3ee);
}
.box-header.with-border { border-bottom: 1px solid var(--mt-line); }
.box-header .box-title { font-weight: 700; color: var(--mt-ink); }

/* ---------- Tables ---------- */
.table > thead > tr > th {
    background: #f5f8fd;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid #e1e8f3 !important;
}
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td { border-color: #e9eef6; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafbfe; }
.table > tbody > tr { transition: background-color .15s ease; }
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover { background-color: color-mix(in srgb, var(--theme-700) 6%, #ffffff); }
tr.bg-gray, .bg-gray { background-color: #eaf0f9 !important; color: var(--mt-ink) !important; }
.table-responsive { border: 0; border-radius: 12px; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cfd8e6; border-radius: 9999px; }

/* DataTables + pagination */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 10px;
    border: 1px solid #d9e0ec;
    padding: 4px 10px;
}
.pagination > li > a, .pagination > li > span {
    border-radius: 8px !important;
    margin: 0 2px;
    border-color: var(--mt-line);
    color: var(--mt-ink);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--theme-700) !important;
    border-color: var(--theme-700) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-700) 35%, transparent);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}
.btn.btn-flat { border-radius: 10px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary {
    background-image: linear-gradient(135deg, var(--theme-700), color-mix(in srgb, var(--theme-700) 55%, #22d3ee));
    border-color: transparent;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-700) 30%, transparent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { filter: brightness(1.08); border-color: transparent; }
.btn-success { box-shadow: 0 6px 14px rgba(34, 197, 94, .22); }
.btn-danger { box-shadow: 0 6px 14px rgba(239, 68, 68, .22); }
.btn-default { background: #fff; border-color: #d9e0ec; }
.btn-default:hover { background: #f5f8fd; border-color: #c5cfe0; }

/* ---------- Forms ---------- */
.form-control {
    border-radius: 10px;
    border-color: #d9e0ec;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
    border-color: var(--theme-700);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-700) 18%, transparent);
}
.input-group-addon { border-color: #d9e0ec; background: #f5f8fd; color: var(--mt-muted); }
.form-group > label { font-weight: 600; color: #334155; }
.form-group > .select2-container--default .select2-selection--single,
.form-group > .select2-container--default .select2-selection--multiple {
    border-radius: 10px;
    border-color: #d9e0ec;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--theme-700);
}
.select2-dropdown { border-radius: 12px; border-color: #d9e0ec; box-shadow: var(--mt-shadow-md); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--theme-700); }

/* ---------- Tabs ---------- */
.nav-tabs-custom {
    border-radius: 16px;
    box-shadow: var(--mt-shadow-sm);
    overflow: hidden;
}
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--theme-700); }
.nav-tabs-custom > .nav-tabs > li.active > a { font-weight: 700; color: var(--theme-700); }

/* ---------- Labels, modals ---------- */
.label { border-radius: 999px; padding: .32em .75em; font-weight: 600; letter-spacing: .02em; }
.modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(8, 15, 32, .40);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--mt-line); }
.modal-footer { border-top: 1px solid var(--mt-line); }
.modal-backdrop.in { opacity: .55; backdrop-filter: blur(3px); }

/* ---------- Footer ---------- */
.mt-footer {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
    margin: 8px 20px 16px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(8px);
    border: 1px solid var(--mt-line);
    font-size: 12px;
    color: var(--mt-muted);
}
.mt-footer .mt-dot {
    display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}
.mt-footer .mt-ver {
    margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--mt-accent-soft); color: var(--theme-700);
}

/* ---------- Motion ---------- */
@keyframes mtFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#scrollable-container > .content-header,
#scrollable-container > .content { animation: mtFadeUp .35s ease backwards; }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- Soft scrollbar for the content area ---------- */
#scrollable-container { scrollbar-width: thin; scrollbar-color: #c3cddd transparent; }
#scrollable-container::-webkit-scrollbar { width: 8px; }
#scrollable-container::-webkit-scrollbar-thumb { background: #c3cddd; border-radius: 9999px; }

/* =====================================================================
   PREMIUM PACK
   ===================================================================== */

/* ---------- Details that feel expensive ---------- */
::selection { background: color-mix(in srgb, var(--theme-700) 28%, #ffffff); color: var(--mt-ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--theme-700); }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, .form-control:focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: 2px;
}
.table td, .table th, .display_currency, .total_sell, .net, .invoice_due { font-variant-numeric: tabular-nums; }
.dataTables_empty { padding: 30px 10px !important; color: var(--mt-muted); font-style: italic; }
.btn:active { transform: scale(.97); }

/* ---------- Dashboard stat cards: staggered entrance ---------- */
@keyframes mtRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
#scrollable-container .xl\:tw-grid-cols-4 > div { animation: mtRise .5s cubic-bezier(.2, .7, .2, 1) backwards; }
#scrollable-container .xl\:tw-grid-cols-4 > div:nth-child(2) { animation-delay: .06s; }
#scrollable-container .xl\:tw-grid-cols-4 > div:nth-child(3) { animation-delay: .12s; }
#scrollable-container .xl\:tw-grid-cols-4 > div:nth-child(4) { animation-delay: .18s; }
#scrollable-container .xl\:tw-grid-cols-4 > div:hover {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--theme-700) 16%, rgba(15, 23, 42, .10));
}

/* ---------- Header dropdowns pop in ---------- */
@keyframes mtPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
main > .theme-header-bg details[open] > ul { animation: mtPop .16s ease-out; border-radius: 14px; box-shadow: var(--mt-shadow-md); }

/* ---------- Loading states ---------- */
div.dataTables_processing {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(6px);
    border: 1px solid var(--mt-line);
    border-radius: 14px;
    box-shadow: var(--mt-shadow-md);
    color: var(--theme-700);
    font-weight: 600;
}
#mt-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100001;
    background: linear-gradient(90deg, var(--theme-700), var(--mt-accent), #22d3ee);
    box-shadow: 0 0 10px color-mix(in srgb, var(--theme-700) 70%, transparent);
    border-radius: 0 3px 3px 0;
    transition: width .25s ease, opacity .25s ease;
    pointer-events: none;
}

/* ---------- Notifications (toastr) ---------- */
#toast-container > div {
    border-radius: 14px;
    opacity: 1;
    box-shadow: 0 16px 44px rgba(8, 15, 32, .28);
    padding: 15px 15px 15px 52px;
    backdrop-filter: blur(6px);
}
#toast-container > div:hover { box-shadow: 0 20px 52px rgba(8, 15, 32, .34); }

/* ---------- Confirm dialogs (SweetAlert) ---------- */
.swal-overlay { backdrop-filter: blur(3px); }
.swal-modal { border-radius: 20px; box-shadow: 0 30px 80px rgba(8, 15, 32, .45); }
.swal-title { font-weight: 700; color: var(--mt-ink); }
.swal-button { border-radius: 10px; font-weight: 600; padding: 9px 22px; transition: transform .15s ease, filter .2s ease; }
.swal-button:hover { transform: translateY(-1px); }
.swal-button--confirm:not(.swal-button--danger) {
    background-image: linear-gradient(135deg, var(--theme-700), color-mix(in srgb, var(--theme-700) 55%, #22d3ee));
    background-color: var(--theme-700);
}
.swal-button--cancel { background: #f1f5f9; color: #334155; }

/* ---------- Date range picker ---------- */
.daterangepicker {
    border-radius: 16px;
    border: 1px solid var(--mt-line);
    box-shadow: var(--mt-shadow-md);
    overflow: hidden;
}
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--theme-700); }
.daterangepicker td.in-range { background-color: color-mix(in srgb, var(--theme-700) 10%, #ffffff); }
.daterangepicker .ranges li { border-radius: 8px; }
.daterangepicker .ranges li.active { background-color: var(--theme-700); }

/* ---------- Tooltips and popovers ---------- */
.tooltip-inner { background: var(--mt-ink); border-radius: 8px; padding: 6px 10px; font-weight: 500; box-shadow: 0 8px 20px rgba(8, 15, 32, .25); }
.popover { border-radius: 14px; border: 1px solid var(--mt-line); box-shadow: var(--mt-shadow-md); }

/* ---------- Quick-jump palette (Ctrl+K) ---------- */
#mt-cmdk {
    position: fixed; inset: 0; z-index: 100000;
    display: none; align-items: flex-start; justify-content: center; padding-top: 12vh;
    background: rgba(8, 15, 32, .45); backdrop-filter: blur(4px);
}
#mt-cmdk.open { display: flex; animation: mtPop .16s ease-out; }
#mt-cmdk .mt-cmdk-box {
    width: min(620px, 92vw); border-radius: 20px; overflow: hidden;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 34px 90px rgba(8, 15, 32, .50);
    border: 1px solid rgba(255, 255, 255, .6);
}
#mt-cmdk input {
    width: 100%; border: 0; outline: 0; padding: 18px 22px; font-size: 17px;
    background: transparent; color: var(--mt-ink); border-bottom: 1px solid var(--mt-line);
}
#mt-cmdk ul { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto; }
#mt-cmdk li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-radius: 12px; cursor: pointer; color: #334155;
}
#mt-cmdk li.active {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--theme-700) 16%, #ffffff), color-mix(in srgb, var(--theme-700) 4%, #ffffff));
    box-shadow: inset 3px 0 0 var(--theme-700);
    color: var(--mt-ink);
}
#mt-cmdk .mt-cmdk-label { font-weight: 600; }
#mt-cmdk .mt-cmdk-parent { font-size: 12px; color: var(--mt-muted); white-space: nowrap; }
#mt-cmdk .mt-cmdk-empty { color: var(--mt-muted); justify-content: center; cursor: default; }
#mt-cmdk .mt-cmdk-hint {
    display: flex; gap: 18px; padding: 10px 18px; font-size: 12px; color: var(--mt-muted);
    background: #f7f9fd; border-top: 1px solid var(--mt-line);
}
#mt-cmdk kbd {
    display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 6px; font-size: 11px;
    background: #fff; color: #334155; border: 1px solid #d9e0ec; box-shadow: 0 1px 0 #d9e0ec;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Small screens: header dropdowns (notification bell etc.) ----------
   Keep the open panel inside the visible screen and let it scroll by touch.
   (100dvh = the visible height, excluding the phone browser's address bar.) */
@media (max-width: 1023px) {
    main > .theme-header-bg details[open] > ul,
    main > .theme-header-bg details[open] > [class*="dropdown-content"],
    main > .theme-header-bg .dropdown-menu {
        max-height: calc(100vh - 96px) !important;
        max-height: calc(100dvh - 96px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Notification bell panel above Bootstrap's touch backdrop ----------
   On touch devices Bootstrap inserts a full-screen .dropdown-backdrop (z-index 990)
   to catch outside taps. The panel has !tw-z-10, so the backdrop sat on top of it and
   swallowed every swipe. Raise the panel above it. */
main > .theme-header-bg .notifications-menu > .dropdown-menu { z-index: 1000 !important; }

} /* end @media screen */