body{
    --bs-font-sans-serif: "Nunito Sans", Helvetica, "sans-serif" !important;
    /*font-family: Be Vietnam Pro !important;*/
    font-family: "Nunito Sans" !important;
    font-size: 12.8px !important;
    font-weight: 500;
}

.page-break {
    page-break-before: always; /* Force next section to start on new page */
}
.grid-toolbar,
.sth-grid_actions > a{
    display: none !important;
}
.grid-bulk-action{
    min-width:200px;
}
@media print {
    @page {
        margin: 10mm 6mm;
    }
    .page-break {
        break-before: page; /* modern property */
        page-break-after: always; /* har section ke baad page break */
    }
    .a4-page {
        width: 210mm;     /* A4 width */
        min-height: 279mm; /* A4 height */
        height: 279mm;    /* lock height */
        padding: 15mm;    /* inner margin */
        box-sizing: border-box;
        page-break-after: always; /* har section ke baad page break */
    }
    html, body {
        padding: 0 !important;
        margin: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Top pe extra gap hatao */
    img, h1, h2, h3, header {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .container, .wrapper, main {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    table { width: 100% !important; border-collapse: collapse; }
    tr, td, th { page-break-inside: avoid; break-inside: avoid; }


    /* Screen-only (nav, buttons, etc.) */
    .no-print, nav, .actions { display: none !important; }
}

.card {
    box-shadow: 0px 3px 4px 0px rgba(0,0,0,.03);
    background-color: #fff;
    border-radius: 0.75rem;
    border: #f1f1f4;
}
.card .card-header{
    box-shadow: 0px 3px 4px 0px rgba(0,0,0,.03);
    background-color: #fff;
    border-radius: 0.75rem;
    border: #f1f1f4;
}
/* body, .app-default {
    background-color: rgb(245, 247, 250);
} */
a{
    font-weight: 600;
}
.card .card-footer{
    font-weight: 700;
    font-size: 1rem;
}

.app-sidebar-menu .menu > .menu-item > .menu-link > .menu-title {
    font-size: 13px;
    font-weight: 500;
}
.card-title, .card-title h3{
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
}
.form-control{
    font-size: 13px;
}
.alert > ul{
    margin-bottom: 0;
}
input::placeholder {
    font-size: 12px;
}
.custom-file-input{
    padding:0;
}
.card .card-header{
    min-height: 50px;
    padding: 0 1.25rem;
}
.input-icon{
    background: transparent;
}
/* Elegant search row — a subtly tinted "toolbar band" between the header and
   the data rows, not just a bare line of inputs. */
.search-tr{
    background: var(--bs-gray-100);
}
.search-tr th{
    vertical-align: middle;
    text-align: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--bs-border-color, #eef0f4);
}
.search-tr .form-control,
.search-tr .form-select{
    padding: 7px 9px;
    border-radius: 4px;
    font-size: .85rem;
}
.search-tr .form-control::placeholder{
    color: var(--bs-gray-400);
    font-style: italic;
}
.dropdown-menu{
    padding: 0;
}
.dropdown,
.btn-group,
.dropup,
.dropend,
.dropstart {
    position: relative;
}
.dropdown.show,
.btn-group.show,
.dropup.show,
.dropend.show,
.dropstart.show {
    z-index: 1090;
}
.dropdown-menu,
.dropdown-menu.show,
.menu-sub-dropdown {
    z-index: 1095 !important;
}
.card:has(.dropdown.show),
.card-body:has(.dropdown.show),
.grid-form:has(.dropdown.show),
.sb-filterbar:has(.dropdown.show),
.sample-card:has(.dropdown.show),
.research-card:has(.dropdown.show),
.customer-card:has(.dropdown.show),
.supplier-card:has(.dropdown.show),
.goal-row:has(.dropdown.show) {
    overflow: visible !important;
}
/* Grid box that owns the open dropdown must sit above its siblings, otherwise
   the menu is painted behind the next card in DOM/grid order. */
.sample-card:has(.dropdown.show),
.research-card:has(.dropdown.show),
.customer-card:has(.dropdown.show),
.supplier-card:has(.dropdown.show),
.goal-row:has(.dropdown.show) {
    position: relative;
    z-index: 1080;
}
.dropdown-item{
    display: flex;
    align-items: center;
}
.btn-group button{
    padding: 4px 12px !important;
}
.form-control:not(.rounded-pill)
, .btn-group button
, .form-check-input[type=checkbox]
, .select2-search__field
, .form-select
, .input-group-text
, .btn-group
{
    /*border-radius: .30rem !important;*/
}

.fs-1xx{
    font-size: 1.2rem !important;
}
.form-btns .btn{
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.grid-table{
    margin-bottom: 0px !important;
}
.grid-table > td{
    vertical-align: center !important;
}
.grid-table .tr-titles a{
    color: black;
    display: flex;
    align-items: center;
}
.grid-table td img{
    width: 36px;
    height: 36px;
}
.grid-form{
    margin-bottom: 2rem;
}
.card .card-footer {
    padding: 0.8rem 2.25rem !important;
}
.overlay{
    display: inline-block;
}
.page-link.active, .active > .page-link{
    background-color: #d0bdf9;
    color: #7239ea !important;
}

.r-field:first-child > label::after {
    content: "*";
    position: relative;
    font-size: inherit;
    color: var(--bs-danger);
    padding-left: 0.25rem;
    font-weight: 600;
}
.menu-items li.placeholder{
    height: 52px;
    background-color: var(--bs-gray-300) !important;
    margin-bottom: 20px;
}
.menu-items ol{
    list-style: none;
}
/*------------------------*/
.table thead{
    background-color: #fcfcfc;
}
.table thead th
, .table thead th a{
    font-size: .9rem;
    line-height: 1.2rem;
    vertical-align: middle;
}
.page-item .page-link {
    border-radius: 0.3rem;
    height: 2.3rem;
    min-width: 2.3rem;
    font-weight: 700;
    font-size: 1rem;
}
.pagination a{
    line-height: 10px;
}

/* ── select2 ──────────────────────────────────────────────────────────
   IMPORTANT: this app's global select2 default is set to the BOOTSTRAP5
   theme (public/assets/admin/plugins/global/plugins.bundle.js:
   `$.fn.select2.defaults.set("theme", "bootstrap5")`), so every generated
   element carries `.select2-container--bootstrap5`, never `--default`.
   An earlier pass here styled `.select2-container--default …` — those
   rules never matched anything and had zero visual effect. Removed.

   Metronic's own bootstrap5 skin (plugins.bundle.css) already renders a
   clean dropdown — box shadow, rounded corners, hover/selected tint via
   var(--bs-component-hover-bg), and a checkmark on the selected option.
   Don't fight that; only add what it's missing: a search icon in the
   dropdown's search box (the custom scrollbar below already worked
   regardless of theme, since it targets .select2-results__options with
   no theme prefix). */
.select2-container--bootstrap5 .select2-dropdown .select2-search{
    position: relative;
}
.select2-container--bootstrap5 .select2-dropdown .select2-search::before{
    content: '';
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A5B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / contain;
}
.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field{
    padding-left: 2.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field:focus{
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem var(--bs-primary-light, rgba(27,132,255,.15));
}
.select2-results__options{
    scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-400, #b5b5c3) transparent;
}
.select2-results__options::-webkit-scrollbar{
    width: 8px;
}
.select2-results__options::-webkit-scrollbar-track{
    background: transparent;
}
.select2-results__options::-webkit-scrollbar-thumb{
    background-color: var(--bs-gray-400, #b5b5c3);
    border-radius: 10px;
    border: 2px solid var(--bs-body-bg, #fff);
}
.select2-results__options::-webkit-scrollbar-thumb:hover{
    background-color: var(--bs-gray-500, #a1a5b7);
}

/* ── Grid.php (app/Helpers/Grid.php) — data grid table ───────────────── */
/* Sticky header */
.grid-sticky-wrap { max-height: 70vh; overflow-y: auto; }
.grid-sticky-wrap thead tr { position: sticky; top: 0; z-index: 5; }
/* Pinned first data column */
.col-pinned { position: sticky; left: 0; z-index: 4; background: var(--bs-card-bg, #fff); box-shadow: 2px 0 4px rgba(0,0,0,.06); }
/* Column resize handle */
th.resizable { position: relative; }
th.resizable .col-resize { position: absolute; right: 0; top: 0; height: 100%; width: 5px; cursor: col-resize; z-index: 10; }
/* Row expand */
.row-expand-btn i { transition: transform .2s; }
.row-expand-btn.open i { transform: rotate(180deg); }

/* Header row background — was var(--kt-card-bg), a variable that doesn't
   exist in this Metronic build (always fell back to plain #fff, wrong in
   dark mode); --bs-gray-100 is a real, theme-aware Metronic token. */
.tr-titles th { padding-right: 10px !important; background: var(--bs-gray-100); }
.th-in { display: flex; align-items: center; gap: 6px; }
.th-name { display: inline-flex; align-items: center; gap: 4px; color: inherit; cursor: pointer; }
.th-name:hover { color: var(--bs-primary); }
th.th-sorted .th-name { color: var(--bs-primary); }
/* Sort arrow — dlf.php's inline SVG, colored via currentColor so it follows
   .th-name / .th-sorted's color (Metronic --bs-primary) automatically. */
.th-arr { display: inline-flex; align-items: center; }
.th-arr svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.th-filter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 4px; color: var(--bs-gray-500); cursor: pointer;
    opacity: .55; transition: all .12s;
}
/* search-tr cell: funnel overlaps the value input's right edge (same
   icon-in-input pattern as the login page's password show/hide toggle) —
   padding-right reserves room so typed text never runs under the icon. */
.sc-input { padding-right: 26px !important; }
.th-filter:hover { opacity: 1; color: var(--bs-primary); background: var(--bs-primary-light, rgba(0,158,247,.1)); }
.th-filter.on { opacity: 1; color: var(--bs-primary); background: var(--bs-primary-light, rgba(0,158,247,.1)); }
/* Active-filter dot — this column currently has a filter value applied.
   .th-filter is already a positioned element (Bootstrap's .position-absolute
   utility), so it's a containing block for this pseudo-element with no
   extra markup/CSS needed. */
.th-filter.on::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 1.5px solid var(--bs-body-bg, #fff);
}
/* Filter popup — dlf.php-style floating panel. position:fixed + JS-computed
   top/left (from the funnel icon's getBoundingClientRect()) so it renders
   relative to the viewport and is never clipped by an ancestor's
   overflow-x/y:auto (the grid's .table-responsive / .grid-sticky-wrap). It
   stays a real descendant of the <th> (never reparented to <body>), so its
   inputs remain part of the surrounding <form> and still submit on Apply. */
.th-fpop {
    display: none;
    position: fixed;
    z-index: 1090;
    width: 250px;
    text-transform: none; letter-spacing: normal; font-weight: normal;
    cursor: default; padding: 12px; border-radius: 8px;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.175);
}
.th-fpop.show { display: block; }

/* Active-filter chips (pill style) */
.grid-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px; }
.grid-fchip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
    padding: 4px 6px 4px 10px; border-radius: 14px;
    background: var(--bs-primary-light, rgba(0,158,247,.1)); border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
}
.grid-fchip a { display: inline-flex; color: inherit; opacity: .7; }
.grid-fchip a:hover { opacity: 1; color: var(--bs-danger); }
.grid-fchip-clear {
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 14px;
    border: 1px dashed var(--bs-gray-400); background: transparent; color: var(--bs-gray-600);
}
.grid-fchip-clear:hover { color: var(--bs-danger); border-color: var(--bs-danger); }

/* Admin Dashboard > Modules launcher grid. NOTE: an earlier fix for this was
   written into public/assets/admin/css/yana-premium.css, which turned out to
   never be <link>'d by any admin layout view — completely inert, hence the
   grid still rendering as a single stacked column. This file (custom.css) IS
   actually loaded (see resources/views/admin/layouts/*), so the real fix
   lives here instead. auto-fill/minmax lets column count adapt to available
   width rather than being hardcoded per breakpoint — some module titles run
   long ("Meal & Ancillary Options", "Message Templates") and a fixed 8-9
   column count squeezed those onto multiple wrapped lines. */
.yp-modules-grid {
    display: grid;
    gap: .875rem;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
@media (min-width: 576px) {
    .yp-modules-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.yp-module-card {
    height: 100%;
    border-radius: .95rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.yp-module-card:hover,
.yp-module-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--bs-primary);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}
.yp-module-card:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.yp-module-card .card-body { padding-block: 1.35rem; }
.yp-module-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--bs-primary-light, rgba(0,158,247,.1));
    transition: background-color .15s ease;
}
.yp-module-card:hover .yp-module-icon { background: var(--bs-primary); }
.yp-module-card:hover .yp-module-icon img { filter: brightness(0) invert(1); }
.yp-module-card .card-body > span:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
}