/* ========================================================================== 
   Interior Items - Mobile-first professional UI system
   Focus: content hierarchy, readable spacing, clean cards, responsive tables
   ========================================================================== */
:root {
    --brand-900: #064e3b;
    --brand-700: #047857;
    --brand-600: #059669;
    --brand-100: #d1fae5;
    --danger-600: #dc2626;
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --surface-50: #f8fafc;
    --surface-100: #f1f5f9;
    --surface-200: #e2e8f0;
    --surface: #ffffff;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-lift: 0 16px 36px rgba(15, 23, 42, 0.10);
}

html { font-size: 15px; max-width: 100%; overflow-x: clip; }
body {
    background: var(--surface-50);
    color: var(--ink-700);
    max-width: 100%;
    overflow-x: clip;
}
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* Flex/grid children must be allowed to shrink so the TABLE wrapper, not the page, owns horizontal overflow. */
.container,.container-fluid,.row,.row>* ,main,section,article,.card,.card-body,.tab-content,.tab-pane{min-width:0;}

.site-content-area { max-width: 1680px; margin-inline: auto; }
.product-grid-main { background: var(--surface-50); min-height: 100vh; }

.content-heading-card,
.theme-card,
.card,
.table-wrap,
.form-shell {
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.content-heading-card {
    border-left: 0 !important;
    position: relative;
}
.content-heading-card::before {
    content: '';
    position: absolute;
    inset-block: 14px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 999px;
    background: var(--brand-600);
}

.section-kicker {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--ink-500);
}
.theme-title-text { color: var(--ink-900) !important; line-height: 1.35; }
.content-count-badge {
    background: var(--surface-100);
    color: var(--brand-900);
    border: 1px solid var(--surface-200);
}

.theme-product-card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.theme-product-card:hover,
.theme-product-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift) !important;
    border-color: rgba(5, 150, 105, .25) !important;
}
.p-img-wrapper {
    height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--surface-100);
}
.theme-img-zoom {
    max-height: 92%;
    max-width: 92%;
    object-fit: contain;
    transition: transform .28s ease;
}
.theme-product-card:hover .theme-img-zoom { transform: scale(1.045); }
.product-meta { font-size: .72rem; }
.theme-product-title {
    font-size: .88rem;
    line-height: 1.45;
    min-height: 2.55rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.theme-price-text {
    color: var(--ink-900);
    font-family: Inter, 'Hind Siliguri', sans-serif;
    font-size: 1rem;
}
.theme-btn-cart {
    background: var(--brand-700);
    color: #fff;
    border: 0;
    font-size: .82rem !important;
}
.theme-btn-cart:hover,
.theme-btn-cart:focus {
    background: var(--brand-900);
    color: #fff;
    box-shadow: 0 10px 20px rgba(4, 120, 87, .18);
}
.empty-state-box { max-width: 520px; }
.empty-state-icon {
    width: 76px;
    height: 76px;
    background: var(--surface-100);
    color: var(--ink-500);
}

/* Content highlight: typography/structure first, not heavy color blocks */
.content-highlight,
.notice-card,
.info-panel {
    background: var(--surface);
    border: 1px solid var(--surface-200);
    border-left: 4px solid var(--brand-600);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-soft);
}
.content-highlight h1,
.content-highlight h2,
.content-highlight h3,
.notice-card h1,
.notice-card h2,
.notice-card h3 { color: var(--ink-900); }

/* Mobile-first unified form system */
:root {
    --form-field-height: 48px;
    --form-textarea-height: 96px;
}
.form-control:not(textarea):not([type="color"]),
.form-select {
    height: var(--form-field-height);
    min-height: var(--form-field-height);
    padding-top: .625rem;
    padding-bottom: .625rem;
}
textarea.form-control {
    min-height: var(--form-textarea-height);
    padding-top: .75rem;
    padding-bottom: .75rem;
    resize: vertical;
}
.input-group > .form-control:not(textarea),
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
    min-height: var(--form-field-height);
}
.form-control,
.form-select {
    border-radius: 12px;
    border-color: var(--surface-200);
}
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 .2rem rgba(5, 150, 105, .13);
}
.form-check-input { min-height: auto; }
.btn { min-height: 42px; border-radius: 12px; }

/* Responsive tables across admin/user pages.
   The nearest table wrapper is the only horizontal scroll owner. This prevents
   nested scroll containers and the desktop problem where the scrollbar is only
   reachable after scrolling to the very bottom of a long page. */
.table-responsive,
.auto-table-responsive,
.app-auto-table-responsive,
.app-data-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
}
.app-data-scroll:focus-visible { outline: 2px solid rgba(5,150,105,.45); outline-offset: 2px; }
.app-data-scroll > table { min-width: 100%; width: max-content; margin-bottom: 0; }
table { vertical-align: middle; }

/* A synchronized viewport-level rail appears only while a wide, long table is
   visible and its native bottom scrollbar is below the viewport. */
.app-floating-table-scroll {
    position: fixed;
    bottom: 10px;
    height: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1045;
    display: none;
    border: 1px solid rgba(15,23,42,.16);
    border-radius: 999px;
    background: rgba(248,250,252,.96);
    box-shadow: 0 5px 18px rgba(15,23,42,.16);
    scrollbar-width: auto;
}
.app-floating-table-scroll.is-visible { display: block; }
.app-floating-table-scroll-track { height: 1px; min-width: 100%; }
@media (max-width: 767.98px) {
    .app-floating-table-scroll { bottom: calc(72px + env(safe-area-inset-bottom)); height: 17px; }
}
.table th {
    color: var(--ink-900);
    font-weight: 800;
    white-space: nowrap;
}
.table td { color: var(--ink-700); }

/* Better dashboard/admin layouts on mobile */
@media (max-width: 575.98px) {
    html { font-size: 14px; }
    .container,
    .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .content-heading-card { padding: .9rem !important; }
    .p-img-wrapper { height: 128px; }
    .theme-product-title { font-size: .82rem; min-height: 2.35rem; }
    .theme-btn-cart { font-size: .74rem !important; padding-inline: .45rem !important; }
    .card-body { padding: .75rem; }
    .modal-dialog { margin: .75rem; }
    .table th,
    .table td { font-size: .86rem; white-space: nowrap; }
}

@media (min-width: 768px) {
    html { font-size: 16px; }
    .p-img-wrapper { height: 165px; }
}

@media (min-width: 1200px) {
    .p-img-wrapper { height: 185px; }
}

.mobile-bottom-nav { backdrop-filter: blur(14px); }
.offcanvas { max-width: 88vw; }

@media print {
    .mobile-bottom-nav,
    .navbar,
    .no-print,
    .app-floating-table-scroll { display: none !important; }
    .app-data-scroll,.table-responsive,.auto-table-responsive,.app-auto-table-responsive{overflow:visible!important;max-width:none!important;}
    .app-data-scroll>table{width:100%!important;min-width:0!important;}
    body { background: #fff !important; padding-bottom: 0 !important; }
}

.site-toast {
    position: fixed;
    inset-inline: 1rem;
    bottom: 92px;
    z-index: 2100;
    max-width: 420px;
    margin-inline: auto;
    padding: .85rem 1rem;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease;
    text-align: center;
    font-weight: 700;
}
.site-toast.show { opacity: 1; transform: translateY(0); }
.site-toast-success { background: #064e3b; }
.site-toast-error { background: #991b1b; }
.active-link { font-weight: 800; }

/* Stable homepage target used by the hero “পণ্য দেখুন” button. */
.product-catalog-anchor{display:block;position:relative;top:-92px;visibility:hidden;scroll-margin-top:92px}
.category-catalog-anchor{display:block;position:relative;top:-92px;visibility:hidden;scroll-margin-top:92px}
#ajax-product-grid{scroll-margin-top:100px}

/* Accessible compact note tooltip. Usage: <button class="app-note-help" data-note="...">?</button> */
.app-note-help{appearance:none;border:0;width:1.55rem;height:1.55rem;border-radius:999px;display:inline-grid;place-items:center;margin-inline-start:.35rem;background:#e8f5f0;color:#06785f;font-weight:900;cursor:help;position:relative;vertical-align:middle}
.app-note-help::after{content:attr(data-note);position:absolute;z-index:1000;inset-inline-start:50%;bottom:calc(100% + .55rem);transform:translateX(-50%) translateY(.25rem);width:min(19rem,80vw);padding:.7rem .8rem;border-radius:.8rem;background:#172033;color:#fff;font-size:.78rem;line-height:1.45;font-weight:500;text-align:start;box-shadow:0 12px 30px rgba(15,23,42,.22);opacity:0;visibility:hidden;pointer-events:none;transition:.16s ease}
.app-note-help:hover::after,.app-note-help:focus-visible::after,.app-note-help.is-open::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.app-note-help:focus-visible{outline:3px solid rgba(16,185,129,.28);outline-offset:2px}
@media(max-width:575.98px){.app-note-help::after{position:fixed;left:12px;right:12px;bottom:14px;transform:none;width:auto}.app-note-help:hover::after,.app-note-help:focus-visible::after,.app-note-help.is-open::after{transform:none}}


/* 2026 production UX/performance hardening */
.app-form-error-summary{margin:0 0 1rem;padding:.85rem 1rem;border:1px solid #fecaca;border-left:4px solid #dc2626;border-radius:12px;background:#fff7f7;color:#7f1d1d;box-shadow:0 6px 18px rgba(127,29,29,.06)}
.app-form-error-summary strong{display:block;margin-bottom:.35rem}.app-form-error-summary ul{margin:0;padding-inline-start:1.2rem}.app-form-restored{outline:2px solid rgba(245,158,11,.18);outline-offset:5px;border-radius:12px}
[aria-invalid="true"]{border-color:#dc2626!important;box-shadow:0 0 0 .18rem rgba(220,38,38,.10)!important}
.app-auto-table-responsive,.table-responsive{scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.theme-product-card,.dashboard-card{content-visibility:auto;contain-intrinsic-size:340px}
@media(hover:none),(pointer:coarse){.theme-product-card:hover,.theme-product-card:focus-within{transform:none!important}.theme-product-card:hover .theme-img-zoom{transform:none!important}}
@media(max-width:767.98px){.mobile-bottom-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.97)!important}.app-auto-table-responsive,.table-responsive{scroll-snap-type:x proximity}.card,.pm-card{transform:translateZ(0)}.site-toast{bottom:84px;max-width:calc(100vw - 24px);border-radius:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Consistent keyboard focus without changing mouse/touch presentation. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(5,150,105,.34);outline-offset:2px}
:where(a,button,input,select,textarea,[tabindex]):focus:not(:focus-visible){outline:none}