/* Application styles on top of the Metronic bundle. */

/* Header menu dropdown rendered as column groups (legacy "horizontal_menu"). */
@media (min-width: 992px) {
    .menu-columns {
        min-width: calc(250px * var(--cols, 1));
    }
}

/* Report rows that expand into details (reports/partials/table.blade.php): the arrow turns when open. */
.report-expand-arrow {
    transition: transform 0.2s ease;
}

.report-expandable:not(.collapsed) .report-expand-arrow {
    transform: rotate(90deg);
}

/* <x-date-input> / <x-month-input> with a validation error (the flatpickr field is outside Livewire's updates) */
.date-input-invalid .form-control { border-color: var(--bs-danger) !important; }

/* Month picker (flatpickr monthSelect): Metronic narrows the calendar to 280px, too tight for "septembris" */
.flatpickr-calendar.flatpickr-monthSelect-theme-light { width: 320px !important; }
.flatpickr-monthSelect-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0.5rem 0; }
.flatpickr-monthSelect-month { width: auto; margin: 0; padding: 0.65rem 0.25rem; white-space: nowrap; }

/* Alpine: hidden until Alpine starts (e.g. inactive tabs) */
[x-cloak] { display: none !important; }

/* Card header that stays under the fixed app header while its card scrolls (e.g. totals of selected rows) */
/* (.card .card-header sets a transparent background, so the selector must be at least as specific) */
.card > .card-header.card-header-sticky {
    position: sticky;
    top: var(--bs-app-header-height-actual, 70px);
    z-index: 5;
    background-color: var(--bs-card-bg, var(--bs-body-bg));
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* <x-filter-select> / <x-filter-search>: a chosen filter is tinted and has × inside to clear it */
.filter-control { position: relative; }
.filter-control .filter-active {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary);
    font-weight: 600;
}
.filter-control .form-select.filter-active { padding-right: 3.75rem; }
.filter-control .form-control.filter-active { padding-right: 2.25rem; }
.filter-control .filter-clear {
    position: absolute;
    top: 50%;
    right: 2.25rem;
    transform: translateY(-50%);
    display: inline-flex;
    padding: 0.25rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--bs-primary);
    line-height: 1;
}
.filter-control .filter-clear:hover { background-color: rgba(var(--bs-primary-rgb), 0.12); }
.filter-control .filter-clear i { color: inherit; }
.filter-control .filter-clear-end { right: 0.5rem; }
.filter-control .filter-clear { -webkit-appearance: none; appearance: none; }
/* Phones: the search takes a full line, the dropdowns share the lines evenly (over their w-* widths) */
@media (max-width: 575.98px) {
    .filter-control { flex: 1 1 9rem; width: auto !important; }
    .filter-control.filter-search { flex-basis: 100%; }
    .filter-break { flex-basis: 100%; }   /* the actions after the filters start their own line */
}

/* Table header row that stays under the fixed app header while the table scrolls with the page (not inside a
   scroll box: use table-responsive-{breakpoint} so it only scrolls sideways on narrow screens).
   --sticky-offset: the height of a sticky card header above it. */
.table.table-sticky-head > thead > tr > th {
    position: sticky;
    top: calc(var(--bs-app-header-height-actual, 70px) + var(--sticky-offset, 0px));
    z-index: 3;
    background-color: var(--bs-card-bg, var(--bs-body-bg));
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* A table that scrolls sideways only on tablets: on phones it has fewer columns, and a scroll box would stop its
   sticky header */
@media (min-width: 768px) and (max-width: 991.98px) {
    .table-scroll-tablet { overflow-x: auto; }
}

/* Phones: the table keeps to its card (fixed column widths from the header cells, the rest truncates) */
@media (max-width: 767.98px) {
    .table.table-fixed-phone { table-layout: fixed; width: 100%; }
}

/* A chevron that turns when its section opens: <i class="ki-outline ki-down chevron-toggle" :class="{ open }"> */
.chevron-toggle { transition: transform 0.2s ease; }
.chevron-toggle.open { transform: rotate(180deg); }

/* Side menu titles stay on one line; a long one is shrunk to fit by fitSidebarTitles() (public/js/app.js) */
.sidebar-title {
    display: block;
    max-width: 100%;
    white-space: nowrap;
}

/* Side menu: Metronic hover-scroll-y always reserves a scrollbar (overflow-y: scroll), which pushed the icons left.
   Scroll only when the menu does not fit. */
#kt_app_sidebar_primary_nav {
    overflow-y: auto !important;
}

/* Calendar header (FullCalendar): a smaller month title (.card: the bundle CSS loads after this file) */
.card .fc .fc-toolbar-title {
    font-size: 1.25rem;
}

/* Phones: the .col-frozen cells of a wide table stay in place while it scrolls sideways (in .table-responsive).
   The column is narrow there, so its text wraps. */
@media (max-width: 767.98px) {
    .table.table-freeze-first .col-frozen {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 7.5rem;
        min-width: 7.5rem;
        max-width: 7.5rem;
        white-space: normal !important;
        background-color: var(--bs-card-bg, var(--bs-body-bg));
        box-shadow: inset -1px 0 0 var(--bs-border-color);
    }
    .table.table-freeze-first tr.bg-light > .col-frozen { background-color: var(--bs-light); }
}

/* Phones: a .phone-row of a wrapping toolbar takes a full line, shared evenly by what is in it */
@media (max-width: 575.98px) {
    .phone-row { flex: 1 1 100%; margin-right: 0 !important; }
    .phone-row > * { flex: 1 1 0; width: auto !important; }
    .phone-row > .btn { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}

/* One line from tablets up (Bootstrap has no responsive text-nowrap) */
@media (min-width: 768px) {
    .text-md-nowrap { white-space: nowrap !important; }
}

/* Hidden on phones whatever its display is otherwise (e.g. a table's header row group) */
@media (max-width: 767.98px) {
    .hide-below-md { display: none !important; }
}

/* Phones: tabs stay on one line and scroll sideways instead of wrapping into several */
@media (max-width: 767.98px) {
    .nav.nav-scroll-phone {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        position: relative;
        scrollbar-width: none;
    }
    .nav.nav-scroll-phone::-webkit-scrollbar { display: none; }
    /* the open tab's line is drawn below the row: keep it inside the scroll box */
    .nav.nav-scroll-phone { overflow-y: hidden; }
    .nav.nav-scroll-phone .nav-item { margin-bottom: 0; }
}

/* Phones: the page trail is one line (scrolling sideways when long) and ends at the parent — the page's own
   title is the heading right above it */
@media (max-width: 767.98px) {
    .breadcrumb.breadcrumb-phone-line {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .breadcrumb.breadcrumb-phone-line::-webkit-scrollbar { display: none; }
    .breadcrumb.breadcrumb-phone-line > li:nth-last-child(-n+2) { display: none; }
}

/* A matrix table (e.g. roles × permissions) in a scroll box of its own: the header row and the first column stay
   in place while the rest scrolls both ways */
.table-matrix-scroll {
    max-height: calc(100vh - 17rem);
    min-height: 15rem;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.475rem;
}
.table.table-matrix { border-collapse: separate; border-spacing: 0; }
.table.table-matrix > * > tr > * {
    background-color: var(--bs-card-bg, var(--bs-body-bg));
    border-bottom: 1px dashed var(--bs-border-color);
}
.table.table-matrix > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    vertical-align: bottom;
    min-width: 6.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.table.table-matrix > * > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 24rem;
    min-width: 16rem;
    max-width: 24rem;
    border-right: 1px solid var(--bs-border-color);
}
.table.table-matrix > thead > tr > :first-child { z-index: 4; }
/* long role names wrap instead of widening their column */
.table.table-matrix > thead > tr > th:not(:first-child) { max-width: 9rem; white-space: normal; }
.table.table-matrix > thead > tr > th .btn { white-space: normal; line-height: 1.3; }
.table.table-matrix > tbody > tr.table-matrix-group > * {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-600);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}
.table.table-matrix > tbody > tr:not(.table-matrix-group):hover > * { background-color: var(--bs-gray-100); }
@media (max-width: 767.98px) {
    .table.table-matrix > * > tr > :first-child { width: 10rem; min-width: 10rem; max-width: 10rem; }
    .table.table-matrix > thead > tr > th { min-width: 5.5rem; }
}

/* <x-header-dropdown>: the panel under a header icon; on phones it spans the screen under the header */
.header-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 110;
    max-width: calc(100vw - 1.5rem);
}
.header-dropdown-scroll { max-height: min(60vh, 26rem); overflow-y: auto; }
@media (max-width: 575.98px) {
    /* four more icons in the header: a smaller logo and tighter icons keep it on one line */
    .app-header-logo img { height: 20px !important; }
    .app-navbar .header-icon { margin-left: 0 !important; }
    .app-navbar .header-icon > .btn.btn-icon { width: 30px !important; height: 30px !important; }
    .app-navbar #kt_header_user_menu_toggle { margin-left: 0.4rem !important; }
    .header-dropdown {
        position: fixed;
        top: calc(var(--bs-app-header-height, 60px) + 0.25rem);
        left: 0.75rem;
        right: 0.75rem;
        width: auto !important;
        max-width: none;
    }
}

/* A call in the header: the phone shakes like a ringing one */
@keyframes call-ring {
    0%, 50%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(-14deg); }
    20%, 40% { transform: rotate(14deg); }
}
.call-ring { animation: call-ring 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .call-ring { animation: none; } }

/* <x-phone-input>: intl-tel-input across the field, and a server error's red border (the field is wire:ignore) */
.phone-input .iti { width: 100%; display: block; }
.phone-input-invalid .form-control { border-color: var(--bs-danger) !important; }

/* Amber text: Metronic's amber (#F6C000) on white or on its pale amber is hard to read. A darker amber for the text of warnings
   (alerts, light badges, .text-warning) in the light theme; the dark theme keeps Metronic's, which reads well on dark. */
[data-bs-theme=light] {
    --tw-warning-text: #8a6200;
    --bs-text-warning: var(--tw-warning-text);
}
[data-bs-theme=light] .alert-warning,
[data-bs-theme=light] .alert-warning .alert-link,
[data-bs-theme=light] .badge-light-warning { color: var(--tw-warning-text); }

/* x-search-keys (public/js/app.js): the result marked with the arrow keys */
[data-results] a.search-active { background-color: var(--bs-primary-light) !important; color: var(--bs-primary) !important; }

/* x-draggable (public/js/app.js): a dialog moved by its header */
@media (pointer: fine) and (min-width: 768px) {
    .modal-draggable .modal-header { cursor: move; }
}
.modal-dragging { user-select: none; }

/* data-lightbox (public/js/app.js): a product picture opened over the page */
[data-lightbox] { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; background: rgba(0, 0, 0, 0.8); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.475rem; background: #fff; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4); }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; }
.lightbox-pdf { cursor: default; padding: 4rem 1rem 1rem; }
.lightbox-pdf iframe { width: min(100%, 1000px); height: 100%; border: 0; border-radius: 0.475rem; background: #fff; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4); }
.lightbox-tab { position: absolute; top: 1rem; right: 4rem; }
/* Imports no Autoshop: the supplier's invoice PDF beside the table, staying in view while the table scrolls */
.autoshop-pdf-panel { width: 40%; position: sticky; top: calc(var(--bs-app-header-height, 0px) + 1.25rem); height: calc(100vh - var(--bs-app-header-height, 0px) - 2.5rem); }
.pdf-open .payer-column { display: none !important; }
.payer-inline { display: none; }
.pdf-open .payer-inline { display: block; }
.pdf-open .pdf-open-hide { display: none; }
.pdf-open .btn:has(> .pdf-open-hide) { padding-left: calc(0.75rem + 1px); padding-right: calc(0.75rem + 1px); }
.pdf-open .btn:has(> .pdf-open-hide) > i { padding-right: 0; }
.pdf-row > td { background: rgba(var(--bs-primary-rgb), 0.04); }
.pdf-row > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); padding-left: 0.75rem !important; }
.pdf-open th.min-w-150px { min-width: 120px !important; }

/* Login and the pages around it (components/layouts/auth): Twinauto red instead of the Metronic blue, in those pages only */
.auth-red {
    --bs-primary: #A91F23;
    --bs-primary-rgb: 169, 31, 35;
    --bs-primary-active: #8E191D;
    --bs-primary-light: #FBEBEC;
    --bs-primary-inverse: #FFFFFF;
    --bs-primary-clarity: rgba(169, 31, 35, 0.2);
}
[data-bs-theme="dark"] .auth-red { --bs-primary-light: #2E1A1B; }
.auth-red .auth-red-panel {
    position: relative;
    overflow: hidden;
    min-height: 140px;
    background: linear-gradient(135deg, #A91F23 0%, #7A1417 100%);
}
/* The white mark, large and running off the bottom right corner, in fine dots like the invoice background */
.auth-red .auth-red-panel::before {
    content: '';
    position: absolute;
    right: -12%;
    bottom: -18%;
    width: 115%;
    aspect-ratio: 210 / 135;
    background: url('/assets/media/logos/logo-mark-w.svg') no-repeat center / contain;
    opacity: 0.32;
    -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 42%);
    -webkit-mask-size: 5px 5px;
    mask-image: radial-gradient(circle, #000 38%, transparent 42%);
    mask-size: 5px 5px;
    pointer-events: none;
}