/* MIR Dark Amber Admin Theme Override
   Source: MIR_SPEC.md Section 16 + 04-UI-SPEC.md
   Loaded after Bagisto Admin app.css via View::composer startPush('styles') */

/* === Dark Mode (default) === */
:root {
    --mir-background: hsl(220 16% 7%);
    --mir-dark-bg: hsl(220 18% 6%);
    --mir-card: hsl(220 14% 11%);
    --mir-foreground: hsl(216 25% 92%);
    --mir-muted-foreground: hsl(213 13% 65%);
    --mir-primary: hsl(43 100% 50%);
    --mir-primary-foreground: hsl(220 16% 7%);
    --mir-gold-hover: hsl(43 100% 60%);
    --mir-accent: hsl(207 97% 62%);
    --mir-success: hsl(145 100% 45%);
    --mir-destructive: hsl(8 100% 61%);
    --mir-warning: hsl(40 100% 50%);
    --mir-border: hsl(218 14% 17%);
    --mir-ring: hsl(43 100% 50%);
}

/* === Light Mode (when Bagisto's .dark class is absent) === */
html:not(.dark) {
    --mir-background: hsl(220 20% 97%);
    --mir-dark-bg: hsl(220 20% 95%);
    --mir-card: hsl(0 0% 100%);
    --mir-foreground: hsl(220 16% 12%);
    --mir-muted-foreground: hsl(213 13% 42%);
    --mir-primary: hsl(43 100% 45%);
    --mir-primary-foreground: hsl(0 0% 100%);
    --mir-gold-hover: hsl(43 100% 38%);
    --mir-accent: hsl(207 97% 48%);
    --mir-success: hsl(145 100% 35%);
    --mir-destructive: hsl(8 100% 50%);
    --mir-warning: hsl(40 100% 45%);
    --mir-border: hsl(220 14% 88%);
    --mir-ring: hsl(43 100% 45%);
}

/* === Body and Page Background === */
body {
    background-color: var(--mir-background) !important;
    color: var(--mir-foreground) !important;
}

/* Background on html element follows theme variables */
html.dark {
    background-color: var(--mir-background);
}
html:not(.dark) {
    background-color: var(--mir-background);
}

/* === Primary Button (was bg-blue-600) === */
.primary-button {
    background-color: var(--mir-primary) !important;
    border-color: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}

.primary-button:hover {
    background-color: var(--mir-gold-hover) !important;
    border-color: var(--mir-gold-hover) !important;
}

/* === Secondary Button (was border-blue-600 text-blue-600) === */
.secondary-button {
    border-color: var(--mir-primary) !important;
    color: var(--mir-primary) !important;
    background-color: transparent !important;
}

.secondary-button:hover,
.secondary-button:focus {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
}

/* === Transparent Button === */
.transparent-button {
    color: var(--mir-foreground) !important;
}

.transparent-button:hover,
.transparent-button:focus {
    background-color: var(--mir-card) !important;
}

/* === Sidebar and Header (box-shadow class) === */
.box-shadow {
    background-color: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}

/* === Sidebar Navigation Active State === */
.bg-blue-600\/10,
[class*="bg-blue-600"] {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
}

.text-blue-600,
[class*="text-blue-600"] {
    color: var(--mir-primary) !important;
}

.border-blue-600,
[class*="border-blue-600"] {
    border-color: var(--mir-primary) !important;
}

/* === Table Rows === */
.bg-white {
    background-color: var(--mir-card) !important;
}

.dark\:bg-gray-950 {
    background-color: var(--mir-background) !important;
}

.dark\:bg-gray-900 {
    background-color: var(--mir-card) !important;
}

/* === Input Fields === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    background-color: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--mir-primary) !important;
    box-shadow: 0 0 0 3px hsla(43, 100%, 50%, 0.15) !important;
}

/* === Shimmer / Empty State === */
.shimmer {
    background-color: var(--mir-border) !important;
}

/* === Breadcrumbs === */
.text-gray-600 {
    color: var(--mir-muted-foreground) !important;
}

/* === Dropdown Menus === */
.bg-white[class*="shadow"],
[class*="dropdown"] .bg-white {
    background-color: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}

/* === Pagination Active === */
.bg-blue-600 {
    background-color: var(--mir-primary) !important;
}

/* === Flash Messages === */
.bg-green-100,
.bg-green-500,
[class*="bg-green-"] {
    background-color: var(--mir-success) !important;
}

.bg-red-100,
.bg-red-500,
[class*="bg-red-"] {
    background-color: var(--mir-destructive) !important;
}

/* === Focus Rings (was ring-blue-500) === */
.ring-blue-500,
[class*="ring-blue-"] {
    --tw-ring-color: var(--mir-ring) !important;
}

/* === Text Colors === */
.text-gray-800,
.dark\:text-white {
    color: var(--mir-foreground) !important;
}

.text-gray-500,
.text-gray-400 {
    color: var(--mir-muted-foreground) !important;
}

/* === Border Colors === */
.border-gray-200,
.border-gray-300,
.dark\:border-gray-800 {
    border-color: var(--mir-border) !important;
}

/* === Card Backgrounds (general panels) === */
.bg-gray-50,
.dark\:bg-gray-800 {
    background-color: var(--mir-card) !important;
}

/* === Link Colors === */
a.text-blue-600,
a[class*="text-blue-"] {
    color: var(--mir-accent) !important;
}

/* === Hover Row States === */
tr:hover > td,
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover {
    background-color: var(--mir-border) !important;
}

/* === Sidebar Active Nav Item (amber left border) === */
.border-l-blue-600,
[class*="border-l-blue-"] {
    border-left-color: var(--mir-primary) !important;
}

/* === Phase 8: UI Utility Classes === */

/* Font family utilities */
.font-display {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace !important;
}

/* Gold gradient text for page titles */
.gold-gradient-text {
    background: linear-gradient(90deg, hsl(43 100% 50%) 0%, hsl(43 100% 67%) 50%, hsl(43 100% 50%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover lift effect (Phase 9: updated to match prototyper) */
.card-lift {
    transition: all 0.3s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    border-color: hsl(43 100% 50% / 0.25) !important;
    box-shadow: 0 0 30px hsl(43 100% 50% / 0.15) !important;
}

/* Amber glow for popular plan card */
.amber-glow {
    box-shadow: 0 0 20px hsla(43, 100%, 50%, 0.12);
}

/* Icon container for dashboard action cards */
.icon-container-amber {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(43, 100%, 50%, 0.08);
    border: 1px solid hsla(43, 100%, 50%, 0.15);
    border-radius: 10px;
}

/* Page entry animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-page-in {
    animation: fadeInUp 0.3s ease;
}

/* Primary button amber style for MIR CTAs */
.mir-btn-primary {
    background-color: var(--mir-primary);
    color: var(--mir-primary-foreground);
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}
.mir-btn-primary:hover {
    background-color: var(--mir-gold-hover);
    box-shadow: 0 0 20px hsla(43, 100%, 50%, 0.12);
}

/* Outline button */
.mir-btn-outline {
    background: transparent;
    color: var(--mir-foreground);
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--mir-border);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.mir-btn-outline:hover {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.05);
}

/* Ghost button for bulk actions */
.mir-btn-ghost {
    background: transparent;
    color: var(--mir-muted-foreground);
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}
.mir-btn-ghost:hover {
    color: var(--mir-foreground);
    background: hsla(216, 25%, 92%, 0.05);
}

/* Status badges */
.mir-badge-success {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: hsla(145, 100%, 45%, 0.15);
    color: var(--mir-success);
}

.mir-badge-destructive {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: hsla(8, 100%, 61%, 0.15);
    color: var(--mir-destructive);
}

.mir-badge-muted {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--mir-border);
    color: var(--mir-muted-foreground);
}

/* === Phase 9: Noise Texture Overlay === */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* === Phase 9: Content Above Noise === */
.content-above-noise {
    position: relative;
    z-index: 2;
}

/* =============================================
   HEADER — MIR theme overrides (Lovable prototype)
   Persists in <head> across Turbo body swaps.
   ============================================= */

header.sticky a[target="_blank"] {
    display: none !important;
}

header.sticky v-notifications .icon-notification {
    color: var(--mir-muted-foreground) !important;
}
header.sticky v-notifications .icon-notification:hover {
    color: var(--mir-primary) !important;
    background: hsla(43, 100%, 50%, 0.08) !important;
}
header.sticky v-notifications .bg-blue-600 {
    background-color: var(--mir-primary) !important;
    color: var(--mir-dark-bg) !important;
}

header.sticky .flex.items-center.gap-2\.5 > :has([class*="h-9"][class*="w-9"]) {
    display: none !important;
}

header.sticky {
    z-index: 10001;
    height: 56px !important;
    background-color: var(--mir-dark-bg) !important;
    border-color: var(--mir-border) !important;
    padding: 0 1rem !important;
}

header.sticky .flex.items-center.gap-1\.5 > a:first-of-type img {
    display: none !important;
}
header.sticky .flex.items-center.gap-1\.5 > a:first-of-type {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    background: linear-gradient(90deg, hsl(43 100% 50%) 0%, hsl(43 100% 67%) 50%, hsl(43 100% 50%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none !important;
}
header.sticky .flex.items-center.gap-1\.5 > a:first-of-type::after {
    content: "MIR";
}

header.sticky v-mega-search {
    flex: 1;
    max-width: 36rem;
    margin: 0 auto;
    min-width: 0;
}
header.sticky v-mega-search > div {
    width: 100% !important;
    max-width: 100% !important;
}
header.sticky v-mega-search input,
header.sticky v-mega-search .peer {
    background: var(--mir-background) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.5rem !important;
    color: var(--mir-foreground) !important;
    height: 2.25rem !important;
    font-size: 0.875rem !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    width: 100% !important;
}
header.sticky v-mega-search input::placeholder {
    color: var(--mir-muted-foreground) !important;
}
header.sticky v-mega-search input:focus {
    border-color: var(--mir-primary) !important;
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15) !important;
}
header.sticky v-mega-search .absolute {
    background: var(--mir-card) !important;
    border: 1px solid hsla(43, 100%, 50%, 0.15) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
header.sticky v-mega-search .border-b-2.border-blue-600,
header.sticky v-mega-search .-mb-px.border-blue-600 {
    border-color: var(--mir-primary) !important;
    color: var(--mir-primary) !important;
}
header.sticky v-mega-search a:hover,
header.sticky v-mega-search .cursor-pointer:hover {
    background: hsla(43, 100%, 50%, 0.05) !important;
}
header.sticky v-mega-search .icon-search {
    color: var(--mir-muted-foreground) !important;
}

/* === Mobile Header === */
@media (max-width: 1023px) {
    header.sticky {
        max-width: 100vw !important;
        padding: 0 0.5rem !important;
        gap: 0.25rem !important;
    }
    header.sticky > .flex.items-center.gap-1\.5 {
        gap: 0.375rem !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    header.sticky .icon-menu {
        padding: 0.25rem !important;
        font-size: 1.5rem !important;
    }
    header.sticky v-mega-search {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 0.25rem !important;
    }
    header.sticky v-mega-search > div,
    header.sticky v-mega-search .relative.flex {
        width: 100% !important;
        max-width: 100% !important;
    }
    header.sticky v-mega-search input {
        height: 2rem !important;
        font-size: 0.8125rem !important;
        padding-left: 2rem !important;
        padding-right: 0.5rem !important;
    }
    header.sticky v-mega-search .icon-search {
        font-size: 1.25rem !important;
        left: 0.5rem !important;
    }
    header.sticky > .flex.items-center.gap-2\.5 {
        gap: 0.125rem !important;
        flex-shrink: 0 !important;
    }
    header.sticky > .flex.items-center.gap-2\.5 .icon-notification,
    header.sticky > .flex.items-center.gap-2\.5 .icon-light,
    header.sticky > .flex.items-center.gap-2\.5 .icon-dark {
        font-size: 1.25rem !important;
        padding: 0.25rem !important;
    }
    header.sticky .v-mir-avatar-wrap button {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.75rem !important;
    }
}
@media (max-width: 399px) {
    header.sticky v-mega-search input {
        font-size: 0.75rem !important;
    }
}

/* Mobile dropdowns: constrain to viewport */
@media (max-width: 1023px) {
    header.sticky v-notifications .absolute,
    header.sticky v-notifications [class*="min-w-[250px]"] {
        position: fixed !important;
        top: 56px !important;
        right: 0.5rem !important;
        left: auto !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
    }
    header.sticky .v-mir-avatar-wrap > div:not(:first-child) {
        position: fixed !important;
        top: 56px !important;
        right: 0.5rem !important;
        left: auto !important;
        max-width: calc(100vw - 1rem) !important;
        z-index: 99999 !important;
    }
}

/* Sidebar: above noise + dark-bg background per prototype */
.fixed.top-14 {
    z-index: 1000;
    background-color: var(--mir-dark-bg) !important;
    box-shadow: none !important;
}

/* Main content area above noise */
.flex-1.overflow-auto,
.flex-1.overflow-y-auto,
main,
[class*="flex-1"][class*="overflow"] {
    position: relative;
    z-index: 2;
}

/* === Phase 9: Global Font Enforcement === */
html, html.dark {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* CTA buttons: Space Grotesk per prototype (button.tsx uses font-display).
   Sidebar nav items in Bagisto are <a> tags and inherit Inter from body. */
.primary-button,
.secondary-button,
.transparent-button,
[type="submit"],
[type="reset"] {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* Table headers: Space Grotesk */
th,
thead td {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* Tab text: Space Grotesk */
[role="tab"],
.border-b-2 {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* Dropdown/menu items: Inter (body font) */
[role="menu"],
[role="listbox"],
[role="option"],
.dropdown-list {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Breadcrumbs: Inter */
[class*="breadcrumb"],
.breadcrumbs {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Form inputs: Inter (body font) for text entry */
input,
select,
textarea,
optgroup {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Amber glow on hover */
.amber-glow-hover:hover {
    box-shadow: 0 8px 20px hsl(43 100% 50% / 0.15) !important;
}

/* === Phase 9: Border-Radius Enforcement (rounded-xl) === */
.box-shadow,
.rounded-lg:not(nav .rounded-lg):not(.icon-container-amber):not(.w-9):not(.w-10):not(.h-5):not(.h-6),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    border-radius: 0.75rem !important;
}

/* Preserve rounded-full for toggles/switches (track + knob) */
.rounded-full,
label.rounded-full,
button.rounded-full,
span.rounded-full {
    border-radius: 9999px !important;
}

/* === Toggle / Switch overrides === */
/* Bagisto toggle: label with peer-checked:bg-blue-600 — fix track + knob */
label[class*="peer-checked:bg-blue-600"],
label.peer-checked\:bg-blue-600 {
    background-color: var(--mir-border) !important;   /* off state: subtle track */
    border-radius: 9999px !important;
}
.peer:checked ~ label[class*="peer-checked:bg-blue-600"],
.peer:checked ~ label.peer-checked\:bg-blue-600 {
    background-color: var(--mir-primary) !important;  /* on state: amber */
}
/* Bagisto toggle knob (::after pseudo) */
label[class*="peer-checked:bg-blue-600"]::after {
    border-color: transparent !important;
    background-color: white !important;
    border-radius: 9999px !important;
}

/* MIR custom toggle button (settings page) */
button.rounded-full[class*="w-10"][class*="h-6"],
button.rounded-full.w-10 {
    border-radius: 9999px !important;
}
button.rounded-full[class*="w-10"] > span.rounded-full {
    border-radius: 9999px !important;
}

/* Modal containers */
[class*="modal"] > div > div,
.fixed[class*="z-"][class*="bg-"] > div {
    border-radius: 0.75rem !important;
}

/* Dropdown menus */
.absolute[class*="shadow"],
.absolute[class*="bg-white"],
.absolute[class*="bg-card"] {
    border-radius: 0.75rem !important;
}

/* ====================================================================
   SIDEBAR NAV — match Lovable prototype Sidebar.tsx exactly
   Prototype: px-3 py-2.5 rounded-lg text-sm, gap-3 (12px),
   bg-primary/8 + border-l-[3px] border-primary for active,
   text-muted-foreground for inactive, hover:bg-primary/5,
   ChevronDown w-4 h-4 rotate-180 when expanded,
   Sub-items: ml-4 pl-4 border-l border-border/50
   ==================================================================== */

/* --- Top-level nav links (both active and inactive) --- */
nav.grid > .px-4 > a {
    padding: 10px 12px !important;
    gap: 12px !important;
    border-radius: 0.5rem !important;
    font-size: 14px !important;
    line-height: 20px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-font-smoothing: antialiased;
    border-left: 3px solid transparent;
    color: var(--mir-muted-foreground) !important;
}

/* Nav labels */
nav.grid > .px-4 > a p {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: inherit !important;
}

/* Nav icons: 20px to match prototype w-5 h-5 */
nav.grid > .px-4 > a > span[class*="icon-"]:first-child {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* --- Active sidebar item (Bagisto applies bg-blue-600 when route matches) --- */
nav.grid > .px-4 > a.bg-blue-600,
nav.grid > .px-4 > a[class*="bg-blue-600"] {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    border-left: 3px solid var(--mir-primary) !important;
    border-radius: 0.5rem !important;
    color: var(--mir-foreground) !important;
}

/* Active item text: override Bagisto's white */
nav.grid > .px-4 > a.bg-blue-600 p,
nav.grid > .px-4 > a[class*="bg-blue-600"] p {
    color: var(--mir-foreground) !important;
}

/* Active item icon: amber */
nav.grid > .px-4 > a.bg-blue-600 > span:first-child,
nav.grid > .px-4 > a[class*="bg-blue-600"] > span:first-child {
    color: var(--mir-primary) !important;
}

/* --- Expanded parent (non-active route, toggled open via chevron) --- */
nav.grid > .px-4 > a.mir-parent-expanded {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    border-left: 3px solid var(--mir-primary) !important;
    border-radius: 0.5rem !important;
    color: var(--mir-foreground) !important;
}
nav.grid > .px-4 > a.mir-parent-expanded > span:first-child {
    color: var(--mir-primary) !important;
}
nav.grid > .px-4 > a.mir-parent-expanded p {
    color: var(--mir-foreground) !important;
}

/* --- Hover on inactive items --- */
nav.grid > .px-4 > a:not(.bg-blue-600):not([class*="bg-blue-600"]):not(.mir-parent-expanded):hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
    color: var(--mir-foreground) !important;
}

/* --- Kill ALL Bagisto hover flyout submenus — JS controls via .mir-submenu --- */
nav.grid .px-4 > div:not(:first-child):not(.mir-submenu) {
    display: none !important;
}
nav.grid .px-4:hover > div:not(:first-child):not(.mir-submenu),
nav.grid .px-4.inactive:hover > div:not(:first-child):not(.mir-submenu) {
    display: none !important;
}

/* Controlled submenu container — JS manages display/maxHeight */
.mir-submenu {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    z-index: auto !important;
}

/* --- Collapsed sidebar: override base .mir-submenu styles so Bagisto's
       native Tailwind flyout classes (position:fixed, left:70px, group-hover)
       can take effect. Uses high specificity to beat expanded-mode rules. --- */
.sidebar-collapsed nav.grid .px-4 > .mir-submenu {
    position: fixed !important;
    width: auto !important;
    min-width: 180px !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    transition: none !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    border-left: none !important;
    background: var(--mir-dark-bg) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3) !important;
}

.sidebar-collapsed .mir-chevron-indicator {
    display: none !important;
}

.sidebar-collapsed nav.grid .px-4 > .mir-submenu a {
    padding: 0.5rem 1.25rem !important;
    border-left: none !important;
    margin-left: 0 !important;
}

/* --- Submenu child container: left guide line (border-l border-border/50) --- */
nav.grid .px-4 > .mir-submenu {
    margin-left: 16px !important;
    margin-top: 4px !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
    padding-bottom: 4px !important;
    border-left: 1px solid var(--mir-border) !important;
    border-radius: 0 !important;
    gap: 2px !important;
}

/* --- Child links --- */
nav.grid .px-4 > .mir-submenu a {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 8px 12px !important;
    border-radius: 0.375rem !important;
    border-left: none !important;
    transition: all 0.2s ease !important;
    display: block !important;
    color: var(--mir-muted-foreground) !important;
}

/* Child: active — use exact class selector, NOT [class*="text-blue"] which
   falsely matches hover:text-blue-600 that Bagisto puts on ALL child links */
nav.grid .px-4 > .mir-submenu a.text-blue-600 {
    color: var(--mir-primary) !important;
    font-weight: 500 !important;
}

/* Child: hover (inactive) */
nav.grid .px-4 > .mir-submenu a:not(.text-blue-600):hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
    color: var(--mir-foreground) !important;
}

/* Child: hover keeps amber on active */
nav.grid .px-4 > .mir-submenu a.text-blue-600:hover {
    color: var(--mir-primary) !important;
}

/* --- Chevron indicator (visual-only, not interactive) --- */
.mir-chevron-indicator {
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    color: var(--mir-muted-foreground) !important;
    pointer-events: none !important;
}
.mir-chevron-indicator svg {
    transition: transform 0.2s ease !important;
    width: 16px !important;
    height: 16px !important;
}

/* --- Sidebar collapse button at bottom --- */
.fixed.bottom-0.w-full.cursor-pointer {
    background-color: var(--mir-dark-bg) !important;
    border-color: var(--mir-border) !important;
}
.fixed.bottom-0.w-full.cursor-pointer:hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
}

/* ====================================================================
   MOBILE RESPONSIVE: Content stretch + Drawer sidebar
   Sidebar hides at max-lg:hidden (<1024px) but content keeps pl-[270px].
   Mobile drawer uses <x-admin::drawer> with Bagisto default styling.
   ==================================================================== */

/* Content: remove sidebar padding when sidebar is hidden on mobile */
@media (max-width: 1023px) {
    [class*="group/container"] > .flex-1 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --- Drawer panel: full width when sidebar is hidden (<1024px) --- */
@media (max-width: 1023px) {
    .fixed[class*="z-[10002]"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- Drawer panel background --- */
.fixed[class*="z-[10002]"] {
    background-color: var(--mir-dark-bg) !important;
}
.fixed[class*="z-[10002]"] .pointer-events-auto {
    background-color: var(--mir-dark-bg) !important;
}

/* Drawer overlay: darker for dark theme */
.fixed.inset-0[class*="z-[10001]"] {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(2px) !important;
}

/* --- Drawer header: MIR branding instead of Bagisto logo --- */
.fixed[class*="z-[10002]"] .border-b {
    background-color: var(--mir-dark-bg) !important;
    border-color: var(--mir-border) !important;
}
.fixed[class*="z-[10002]"] .border-b img,
.fixed[class*="z-[10002]"] #logo-image {
    display: none !important;
}
.fixed[class*="z-[10002]"] .border-b .flex.items-center::before {
    content: "MIR";
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    background: linear-gradient(90deg, hsl(43 100% 50%) 0%, hsl(43 100% 67%) 50%, hsl(43 100% 50%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Close button (icon-cross) */
.fixed[class*="z-[10002]"] .icon-cross {
    color: var(--mir-muted-foreground) !important;
}
.fixed[class*="z-[10002]"] .icon-cross:hover {
    background-color: hsla(43, 100%, 50%, 0.1) !important;
    color: var(--mir-foreground) !important;
}

/* --- Drawer nav items: same MIR styling as desktop sidebar --- */
.fixed[class*="z-[10002]"] nav.grid > div > a {
    padding: 10px 12px !important;
    gap: 12px !important;
    border-radius: 0.5rem !important;
    font-size: 14px !important;
    line-height: 20px !important;
    transition: all 0.2s !important;
    border-left: 3px solid transparent;
    color: var(--mir-muted-foreground) !important;
}

.fixed[class*="z-[10002]"] nav.grid > div > a p {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: inherit !important;
}

.fixed[class*="z-[10002]"] nav.grid > div > a > span[class*="icon-"] {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Drawer: active item */
.fixed[class*="z-[10002]"] nav.grid > div > a.bg-blue-600,
.fixed[class*="z-[10002]"] nav.grid > div > a[class*="bg-blue-600"] {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    border-left: 3px solid var(--mir-primary) !important;
    border-radius: 0.5rem !important;
    color: var(--mir-foreground) !important;
}
.fixed[class*="z-[10002]"] nav.grid > div > a.bg-blue-600 p,
.fixed[class*="z-[10002]"] nav.grid > div > a[class*="bg-blue-600"] p {
    color: var(--mir-foreground) !important;
}
.fixed[class*="z-[10002]"] nav.grid > div > a.bg-blue-600 > span:first-child,
.fixed[class*="z-[10002]"] nav.grid > div > a[class*="bg-blue-600"] > span:first-child {
    color: var(--mir-primary) !important;
}

/* Drawer: expanded parent (non-active route, toggled via chevron) */
.fixed[class*="z-[10002]"] nav.grid > div > a.mir-parent-expanded {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    border-left: 3px solid var(--mir-primary) !important;
    border-radius: 0.5rem !important;
    color: var(--mir-foreground) !important;
}
.fixed[class*="z-[10002]"] nav.grid > div > a.mir-parent-expanded > span:first-child {
    color: var(--mir-primary) !important;
}
.fixed[class*="z-[10002]"] nav.grid > div > a.mir-parent-expanded p {
    color: var(--mir-foreground) !important;
}

/* Drawer: hover on inactive */
.fixed[class*="z-[10002]"] nav.grid > div > a:not(.bg-blue-600):not([class*="bg-blue-600"]):not(.mir-parent-expanded):hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
    color: var(--mir-foreground) !important;
}

/* --- Drawer child container --- */
.fixed[class*="z-[10002]"] nav.grid > div > div:not(:first-child) {
    background-color: transparent !important;
    margin-left: 16px !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
    border-left: 1px solid var(--mir-border) !important;
    border-radius: 0 !important;
}

/* Drawer child links */
.fixed[class*="z-[10002]"] nav.grid > div > div:not(:first-child) a {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 8px 12px !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s !important;
    color: var(--mir-muted-foreground) !important;
}
.fixed[class*="z-[10002]"] nav.grid > div > div:not(:first-child) a.text-blue-600 {
    color: var(--mir-primary) !important;
    font-weight: 500 !important;
}
.fixed[class*="z-[10002]"] nav.grid > div > div:not(:first-child) a:not(.text-blue-600):hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
    color: var(--mir-foreground) !important;
}
.fixed[class*="z-[10002]"] nav.grid > div > div:not(:first-child) a.text-blue-600:hover {
    color: var(--mir-primary) !important;
}

/* Pulsing status dot for notification bell */
.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--mir-primary);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ====================================================================
   MIR REUSABLE COMPONENT LIBRARY
   Define once, use everywhere. All MIR pages and Bagisto overrides
   should reference these classes for visual consistency.
   ==================================================================== */

/* === Buttons: Base === */
.mir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    text-decoration: none;
}

.mir-btn:disabled,
.mir-btn-primary:disabled,
.mir-btn-outline:disabled,
.mir-btn-ghost:disabled,
.mir-btn-destructive:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Destructive button */
.mir-btn-destructive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    background-color: var(--mir-destructive);
    color: white;
}
.mir-btn-destructive:hover {
    opacity: 0.9;
    box-shadow: 0 0 20px hsla(8, 100%, 61%, 0.15);
}

/* Size variants */
.mir-btn-sm,
.mir-btn-primary.mir-btn-sm,
.mir-btn-outline.mir-btn-sm,
.mir-btn-ghost.mir-btn-sm,
.mir-btn-destructive.mir-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    gap: 0.375rem;
}

.mir-btn-lg,
.mir-btn-primary.mir-btn-lg,
.mir-btn-outline.mir-btn-lg,
.mir-btn-ghost.mir-btn-lg,
.mir-btn-destructive.mir-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    gap: 0.5rem;
}

/* Icon-only button */
.mir-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Loading spinner inside button */
.mir-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.mir-btn-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--mir-border);
    border-top-color: var(--mir-primary-foreground);
    border-radius: 50%;
    animation: mir-spin 0.6s linear infinite;
}
@keyframes mir-spin {
    to { transform: rotate(360deg); }
}

/* === Form Elements === */
.mir-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mir-input::placeholder {
    color: var(--mir-muted-foreground);
}
.mir-input:focus {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
}
.mir-input-error {
    border-color: var(--mir-destructive) !important;
}
.mir-input-error:focus {
    box-shadow: 0 0 0 2px hsla(8, 100%, 61%, 0.15) !important;
}
.mir-input:disabled,
.mir-input-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.mir-input:read-only {
    opacity: 0.6;
}

.mir-select {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    outline: none;
    transition: border-color 0.2s;
    appearance: auto;
}
.mir-select:focus {
    border-color: var(--mir-primary);
}

.mir-textarea {
    width: 100%;
    min-height: 5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mir-textarea:focus {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
}

.mir-label {
    display: block;
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    color: var(--mir-muted-foreground);
    margin-bottom: 0.375rem;
}

.mir-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 2px solid var(--mir-border);
    appearance: none;
    cursor: pointer;
    transition: all 0.15s;
}
.mir-checkbox:checked {
    background: var(--mir-primary);
    border-color: var(--mir-primary);
}

.mir-toggle {
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--mir-border);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.mir-toggle.active {
    background: var(--mir-primary);
}
.mir-toggle > span {
    position: absolute;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--mir-foreground);
    transition: left 0.2s;
}
.mir-toggle:not(.active) > span { left: 0.25rem; }
.mir-toggle.active > span { left: 1.375rem; }

.mir-search-input {
    width: 100%;
    height: 2.25rem;
    padding-left: 2.25rem;
    padding-right: 0.75rem;
    border-radius: 0.5rem;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.mir-search-input::placeholder {
    color: var(--mir-muted-foreground);
}
.mir-search-input:focus {
    border-color: var(--mir-primary);
}

.mir-file-upload {
    border: 2px dashed var(--mir-border);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.mir-file-upload:hover,
.mir-file-upload.dragover {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.04);
}

/* === Cards === */
.mir-card {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
}

.mir-card-lift {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}
.mir-card-lift:hover {
    transform: translateY(-4px);
    border-color: hsla(43, 100%, 50%, 0.25);
    box-shadow: 0 0 30px hsla(43, 100%, 50%, 0.15);
}

.mir-stat-card {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.mir-stat-card .stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mir-primary);
}
.mir-stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--mir-muted-foreground);
    margin-bottom: 0.5rem;
}

/* === Navigation: Tabs === */
.mir-tab {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
    cursor: pointer;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--mir-muted-foreground);
}
.mir-tab:hover {
    color: var(--mir-foreground);
}
.mir-tab-active,
.mir-tab.active {
    border-bottom-color: var(--mir-primary);
    color: var(--mir-primary);
}

.mir-tab-bar {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--mir-border);
}

/* === Navigation: Category Pills === */
.mir-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.mir-pill-active {
    background: var(--mir-primary);
    color: var(--mir-primary-foreground);
}
.mir-pill-inactive {
    background: hsla(43, 100%, 50%, 0.08);
    border-color: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
}
.mir-pill-inactive:hover {
    background: hsla(43, 100%, 50%, 0.15);
}

/* === Navigation: Sub-filter Chips === */
.mir-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    background: var(--mir-card);
    cursor: pointer;
    transition: all 0.2s;
}
.mir-chip-active {
    border-color: var(--mir-primary);
    color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.05);
}
.mir-chip:hover:not(.mir-chip-active) {
    border-color: var(--mir-muted-foreground);
}

/* === Feedback: Progress Bar === */
.mir-progress-bar {
    width: 100%;
    height: 0.375rem;
    border-radius: 9999px;
    background: hsla(43, 100%, 50%, 0.08);
    overflow: hidden;
}
.mir-progress-bar > .fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--mir-primary);
    transition: width 0.3s ease;
}
.mir-progress-bar > .fill.danger {
    background: var(--mir-destructive);
}

/* === Feedback: Toasts === */
.mir-toast {
    position: fixed;
    z-index: 10000;
    border-radius: 0.75rem;
    padding: 1rem;
    width: 20rem;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.mir-toast-success { border-left: 3px solid var(--mir-success); }
.mir-toast-error { border-left: 3px solid var(--mir-destructive); }
.mir-toast-warning { border-left: 3px solid var(--mir-warning); }
.mir-toast-info { border-left: 3px solid var(--mir-accent); }

/* === Feedback: Skeleton Loader === */
.mir-skeleton {
    background: linear-gradient(90deg, var(--mir-border) 25%, hsla(218, 14%, 22%, 1) 50%, var(--mir-border) 75%);
    background-size: 200% 100%;
    animation: mir-shimmer 1.5s ease infinite;
    border-radius: 0.5rem;
}
@keyframes mir-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Feedback: Empty State === */
.mir-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    border-radius: 0.75rem;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
}
.mir-empty-state .icon {
    color: var(--mir-muted-foreground);
    opacity: 0.3;
    margin-bottom: 0.75rem;
}
.mir-empty-state .title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    color: var(--mir-foreground);
}
.mir-empty-state .description {
    font-size: 0.875rem;
    color: var(--mir-muted-foreground);
    margin-top: 0.25rem;
}

/* === Feedback: Additional Badges === */
.mir-badge-warning {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: hsla(40, 100%, 50%, 0.15);
    color: var(--mir-warning);
}

.mir-badge-info {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: hsla(207, 97%, 62%, 0.15);
    color: var(--mir-accent);
}

/* === Data Display: Tables === */
.mir-table {
    width: 100%;
    font-size: 0.875rem;
    color: var(--mir-foreground);
}
.mir-table thead tr {
    border-bottom: 1px solid var(--mir-border);
    background: hsla(220, 16%, 7%, 0.5);
}
.mir-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
}
.mir-table tbody tr {
    border-bottom: 1px solid var(--mir-border);
    transition: background 0.15s;
}
.mir-table tbody tr:last-child {
    border-bottom: none;
}
.mir-table tbody tr:hover {
    background: hsla(220, 16%, 7%, 0.5);
}
.mir-table td {
    padding: 0.875rem 1rem;
}

/* === Data Display: Key-Value Row === */
.mir-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mir-border);
}
.mir-kv-row:last-child {
    border-bottom: none;
}
.mir-kv-row .key {
    font-size: 0.875rem;
    color: var(--mir-muted-foreground);
}
.mir-kv-row .value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mir-foreground);
}

/* === Section Header (small caps pattern from prototype) === */
.mir-section-header {
    font-size: 0.75rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
    margin-bottom: 0.75rem;
}

/* === Font Utility Aliases (for body text) === */
.font-body {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ====================================================================
   BAGISTO NATIVE PAGE OVERRIDES
   Target Bagisto's component class names to apply MIR theme globally
   without modifying any Bagisto core files.
   ==================================================================== */

/* === DataGrid: Table Container === */
.table-responsive.box-shadow,
.table-responsive.box-shadow.grid {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
}

/* === DataGrid: Header Row === */
.table-responsive .row.grid.border-b.bg-gray-50,
.table-responsive .row.grid.font-semibold,
.row.grid.min-h-\[47px\].items-center.bg-gray-50 {
    background: hsla(220, 16%, 7%, 0.5) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-muted-foreground) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* === DataGrid: Body Rows === */
.table-responsive .row.grid.border-b:not(.bg-gray-50):not(.font-semibold) {
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}
.table-responsive .row.grid.border-b:hover {
    background: hsla(220, 16%, 7%, 0.5) !important;
}

/* === DataGrid: Empty State === */
.table-responsive .row.grid.text-center {
    color: var(--mir-muted-foreground) !important;
}

/* === DataGrid: Toolbar === */
.mt-7.flex.items-center.justify-between {
    color: var(--mir-foreground) !important;
}

/* === DataGrid: Search Input === */
.table-responsive ~ div input[type="text"],
[class*="datagrid"] input,
.flex.items-center.justify-between input[type="text"] {
    background: var(--mir-background) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
    border-radius: 0.5rem !important;
}

/* === DataGrid: Filter Button === */
.rounded-md.border.bg-white {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === DataGrid: Mass Action Checkbox (blue -> amber) === */
.peer-checked\:icon-checked.peer-checked\:text-blue-600,
.peer-checked\:text-blue-600 {
    color: var(--mir-primary) !important;
}

/* === DataGrid: Sort Arrows === */
.icon-arrow-up,
.icon-arrow-down,
.icon-up-arrow,
.icon-down-arrow {
    color: var(--mir-primary) !important;
}

/* === DataGrid: Pagination === */
.pagination button.bg-blue-600,
[class*="pagination"] .bg-blue-600 {
    background: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}

/* === Modal Overlay === */
.fixed.inset-0.bg-gray-500.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* === Modal Dialog === */
.box-shadow.relative.z-\[999\].rounded-lg.bg-white,
.box-shadow.rounded-lg.bg-white.max-w-\[568px\],
.box-shadow.rounded-lg.bg-white.max-w-\[400px\],
[class*="z-[999]"].rounded-lg.bg-white {
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.75rem !important;
}

/* === Modal Header === */
.box-shadow .border-b.px-4.py-3,
.box-shadow .flex.items-center.justify-between.border-b {
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === Modal Content === */
.box-shadow .border-b.px-4.py-2\.5 {
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === Modal Close Button === */
.icon-cancel-1.cursor-pointer {
    color: var(--mir-muted-foreground) !important;
}
.icon-cancel-1.cursor-pointer:hover {
    background: var(--mir-border) !important;
}

/* === Drawer Panel === */
.fixed.z-\[10002\].bg-white,
.pointer-events-auto.h-full.w-full.overflow-auto.bg-white {
    background: var(--mir-card) !important;
    border-left: 1px solid var(--mir-border) !important;
}

/* === Drawer Header === */
.grid.gap-y-2\.5.border-b.p-3 {
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === Drawer Close === */
.icon-cross.cursor-pointer {
    color: var(--mir-muted-foreground) !important;
}
.icon-cross.cursor-pointer:hover {
    background: var(--mir-border) !important;
}

/* === Tabs: Active State (blue -> amber) === */
.-mb-px.border-blue-600.border-b-2,
.border-b-2.border-blue-600,
[class*="-mb-px"][class*="border-blue-600"] {
    border-color: var(--mir-primary) !important;
    color: var(--mir-primary) !important;
}

/* === Tabs: Container === */
.tabs .flex.gap-4.border-b-2,
.mb-4.flex.gap-4.border-b-2 {
    border-color: var(--mir-border) !important;
}

/* === Tabs: Inactive Tab Text === */
.tabs .text-gray-600,
.tabs .text-gray-300,
.pb-3\.5.px-2\.5.text-base.font-medium.text-gray-600 {
    color: var(--mir-muted-foreground) !important;
}

/* === Footer: "Powered by Bagisto" === */
.mt-auto > .border-t.bg-white.py-2.text-center,
.mt-auto > .border-t.text-center {
    background: var(--mir-dark-bg) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-muted-foreground) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    border-top-width: 0 !important;
}

/* === Configuration: Section Cards === */
.box-shadow.rounded.bg-white.p-4,
.box-shadow.rounded.bg-white.p-4.dark\:bg-gray-900 {
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.75rem !important;
}

/* === Configuration: Card Hover === */
.flex.max-w-\[360px\].items-center.gap-2.rounded-lg.p-2:hover {
    background: hsla(43, 100%, 50%, 0.05) !important;
}

/* === Configuration: Page Title === */
.text-xl.font-bold.text-gray-800 {
    color: var(--mir-foreground) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* === Bagisto Star Rating === */
.icon-star-fill {
    color: var(--mir-primary) !important;
}

/* === Flash Message Container (Bagisto) === */
.alert-success,
.flash-group .p-4.bg-green-100 {
    background: hsla(145, 100%, 45%, 0.15) !important;
    color: var(--mir-success) !important;
    border-radius: 0.5rem !important;
}
.alert-error,
.flash-group .p-4.bg-red-100 {
    background: hsla(8, 100%, 61%, 0.15) !important;
    color: var(--mir-destructive) !important;
    border-radius: 0.5rem !important;
}

/* === Notification Dropdown === */
.notification-panel,
[class*="notification"] .bg-white {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}

/* === Sub-menu Links (blue -> amber/accent) === */
a.text-blue-600:not(.tabs a),
.hover\:text-blue-600:hover {
    color: var(--mir-accent) !important;
}

/* === "View details" / Action Links === */
.text-blue-600.transition-all:hover,
.cursor-pointer.text-blue-600:hover {
    color: var(--mir-gold-hover) !important;
}

/* === Dark Mode Background Overrides (catch-all) === */
.dark\:bg-gray-950 {
    background-color: var(--mir-background) !important;
}
.dark\:bg-gray-900 {
    background-color: var(--mir-card) !important;
}
.dark\:border-gray-800 {
    border-color: var(--mir-border) !important;
}
.dark\:text-gray-300 {
    color: var(--mir-muted-foreground) !important;
}
.dark\:text-white {
    color: var(--mir-foreground) !important;
}

/* === Shimmer Loader Override (Bagisto native) === */
.shimmer,
[class*="shimmer"] {
    background: linear-gradient(90deg, var(--mir-border) 25%, hsla(218, 14%, 22%, 1) 50%, var(--mir-border) 75%) !important;
    background-size: 200% 100% !important;
    animation: mir-shimmer 1.5s ease infinite !important;
}

/* === TinyMCE Editor Container === */
.tox.tox-tinymce {
    border-color: var(--mir-border) !important;
    border-radius: 0.5rem !important;
}
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow,
.tox .tox-menubar {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}
.tox .tox-edit-area__iframe {
    background: var(--mir-background) !important;
}

/* === File Upload Zones (Bagisto) === */
.cursor-pointer.rounded-xl.border.border-dashed,
[class*="border-dashed"][class*="cursor-pointer"] {
    border-color: var(--mir-border) !important;
    background: var(--mir-card) !important;
}
.cursor-pointer.rounded-xl.border.border-dashed:hover {
    border-color: var(--mir-primary) !important;
    background: hsla(43, 100%, 50%, 0.04) !important;
}

/* === Reporting: Chart Containers === */
.chart-container,
[class*="chart"] .bg-white {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}

/* === Category Tree View === */
.tree-container,
[class*="tree"] .bg-white,
[class*="tree"] .bg-gray-50 {
    background: var(--mir-card) !important;
}

/* === Footer Links (Bagisto dark:text-darkBlue) === */
.dark\:text-darkBlue {
    color: var(--mir-accent) !important;
}

/* === Dark Hover Surfaces (Bagisto dark:hover:bg-gray-950) === */
.dark\:hover\:bg-gray-950:hover {
    background-color: var(--mir-background) !important;
}

/* === Additional Gray/Blue Catch-all Overrides === */
.text-gray-700 {
    color: var(--mir-foreground) !important;
}
.bg-gray-100 {
    background-color: var(--mir-card) !important;
}
.dark\:bg-gray-800 {
    background-color: var(--mir-card) !important;
}
.dark\:border-gray-700 {
    border-color: var(--mir-border) !important;
}
.dark\:text-gray-400 {
    color: var(--mir-muted-foreground) !important;
}
.hover\:bg-gray-200:hover {
    background-color: var(--mir-border) !important;
}
.dark\:hover\:bg-gray-800:hover {
    background-color: var(--mir-border) !important;
}
.hover\:border-gray-400:hover {
    border-color: var(--mir-muted-foreground) !important;
}
.hover\:text-gray-600:hover {
    color: var(--mir-foreground) !important;
}

/* === Blue Icon/Upload Containers (super admin) === */
.bg-blue-50 {
    background: hsla(43, 100%, 50%, 0.08) !important;
}
.dark\:bg-blue-900\/20 {
    background: hsla(43, 100%, 50%, 0.08) !important;
}
.text-blue-600:not(a) {
    color: var(--mir-primary) !important;
}
.border-blue-500 {
    border-color: var(--mir-primary) !important;
}

/* === Warning Notices (yellow → MIR warning) === */
.bg-yellow-50 {
    background: hsla(40, 100%, 50%, 0.08) !important;
}
.text-yellow-700 {
    color: var(--mir-warning) !important;
}
.dark\:bg-yellow-900\/20 {
    background: hsla(40, 100%, 50%, 0.08) !important;
}
.dark\:text-yellow-400 {
    color: var(--mir-warning) !important;
}

/* === Success Notices (green → MIR success) === */
.bg-green-50 {
    background: hsla(145, 100%, 45%, 0.1) !important;
}
.text-green-700 {
    color: var(--mir-success) !important;
}
.dark\:text-green-400 {
    color: var(--mir-success) !important;
}
.border-green-200,
.dark\:border-green-800 {
    border-color: hsla(145, 100%, 45%, 0.2) !important;
}

/* === Delete/Red Button (red → MIR destructive) === */
.text-red-600 {
    color: var(--mir-destructive) !important;
}
.dark\:text-red-400 {
    color: var(--mir-destructive) !important;
}
.hover\:bg-red-50:hover {
    background: hsla(8, 100%, 61%, 0.08) !important;
}
.dark\:hover\:bg-red-900\/20:hover {
    background: hsla(8, 100%, 61%, 0.08) !important;
}
.border-red-500 {
    border-color: var(--mir-destructive) !important;
}
.text-red-500 {
    color: var(--mir-destructive) !important;
}

/* === Tag Badges (gray-600 bg) === */
.bg-gray-600 {
    background-color: var(--mir-border) !important;
}

/* === Inactive Toggle === */
.bg-gray-400 {
    background-color: var(--mir-border) !important;
}

/* === Super Admin: x-saas components share same class names.
   All selectors above apply via class-name targeting. === */

/* ====================================================
   LIGHT MODE UTILITY OVERRIDES
   Active when Bagisto removes .dark class from <html>
   ==================================================== */

/* Noise overlay: subtler on light backgrounds */
html:not(.dark) body::after {
    opacity: 0.02;
}

/* Gold gradient text: darker amber for contrast on white */
html:not(.dark) .gold-gradient-text {
    background: linear-gradient(90deg, hsl(43 100% 38%) 0%, hsl(43 100% 50%) 50%, hsl(43 100% 38%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card lift hover: visible shadow on light backgrounds */
html:not(.dark) .card-lift:hover {
    box-shadow: 0 8px 30px hsla(220, 16%, 12%, 0.12) !important;
    border-color: hsl(43 100% 45% / 0.3) !important;
}
html:not(.dark) .mir-card-lift:hover {
    box-shadow: 0 8px 30px hsla(220, 16%, 12%, 0.12);
    border-color: hsla(43, 100%, 45%, 0.3);
}
html:not(.dark) .mir-tpl-card-diagonal {
    background: hsla(0, 0%, 100%, 0.88);
}

/* Icon container: higher opacity for light bg contrast */
html:not(.dark) .icon-container-amber {
    background: hsla(43, 100%, 45%, 0.12);
    border-color: hsla(43, 100%, 45%, 0.2);
}

/* Amber glow: visible on light backgrounds */
html:not(.dark) .amber-glow {
    box-shadow: 0 0 20px hsla(43, 100%, 45%, 0.15);
}

/* Status badge backgrounds: slightly more visible in light mode */
html:not(.dark) .bg-green-100,
html:not(.dark) [class*="bg-green-100"] {
    background-color: hsla(145, 100%, 35%, 0.1) !important;
}
html:not(.dark) .bg-red-100,
html:not(.dark) [class*="bg-red-100"] {
    background-color: hsla(8, 100%, 50%, 0.1) !important;
}
html:not(.dark) .bg-yellow-100,
html:not(.dark) [class*="bg-yellow-100"] {
    background-color: hsla(40, 100%, 45%, 0.1) !important;
}

/* DataGrid header row: light treatment */
html:not(.dark) .table-responsive .row.grid.border-b.bg-gray-50 {
    background: hsla(220, 20%, 95%, 0.8) !important;
}

/* Sidebar active state: stronger amber tint on light sidebar */
html:not(.dark) nav.grid > .px-4 > a.bg-blue-600,
html:not(.dark) nav.grid > .px-4 > a[class*="bg-blue-600"],
html:not(.dark) nav.grid > .px-4 > a.mir-parent-expanded {
    background-color: hsla(43, 100%, 45%, 0.1) !important;
}

/* Light mode: sub-menu guide line uses light border */
html:not(.dark) nav.grid .px-4 > .mir-submenu {
    border-left-color: hsla(220, 14%, 88%, 0.5) !important;
}

/* Primary button: slightly darker amber for light bg */
html:not(.dark) .primary-button {
    background-color: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}
html:not(.dark) .primary-button:hover {
    background-color: var(--mir-gold-hover) !important;
}

/* ====================================================================
   PHASE 10: LUCIDE ICON FONT REPLACEMENT
   Replaces Bagisto's "bagisto-admin" icon font with Lucide (v0.469.0).
   Each .icon-*::before rule overrides the glyph codepoint + font-family.
   ==================================================================== */

@font-face {
    font-family: "lucide";
    src: url("/vendor/mir/fonts/lucide.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* Override base icon styles: redirect from bagisto-admin to lucide.
   Exclude .icon-container-amber which is a MIR layout utility, not a glyph. */
[class^="icon-"]:not(.icon-container-amber),
[class*=" icon-"]:not(.icon-container-amber) {
    font-family: "lucide" !important;
}

/* --- Bagisto icon → Lucide icon glyph mapping (80 core icons) --- */

.icon-phone:before { content: "\e136" !important; }
.icon-list:before { content: "\e10b" !important; }
.icon-admin-export:before { content: "\e0b6" !important; }
.icon-magic:before { content: "\e416" !important; }
.icon-zoom:before { content: "\e1b5" !important; }
.icon-ar:before { content: "\e065" !important; }
.icon-report:before { content: "\e313" !important; }
.icon-refund:before { content: "\e14b" !important; }
.icon-light:before { content: "\e17b" !important; }
.icon-dark:before { content: "\e121" !important; }
.icon-checkbox-partical:before { content: "\e174" !important; }
.icon-checkbox-partial:before { content: "\e174" !important; }
.icon-uncheckbox:before { content: "\e16a" !important; }
.icon-add-customer:before { content: "\e1a1" !important; }
.icon-arrow-down:before { content: "\e046" !important; }
.icon-arrow-left:before { content: "\e04c" !important; }
.icon-arrow-right:before { content: "\e04d" !important; }
.icon-arrow-up:before { content: "\e04e" !important; }
.icon-attribute-block:before { content: "\e104" !important; }
.icon-attribute:before { content: "\e299" !important; }
.icon-calendar:before { content: "\e067" !important; }
.icon-cancel-1:before { content: "\e1b1" !important; }
.icon-cancel:before { content: "\e088" !important; }
.icon-cart:before { content: "\e15f" !important; }
.icon-checked:before { content: "\e55d" !important; }
.icon-cms:before { content: "\e0d0" !important; }
.icon-configuration:before { content: "\e157" !important; }
.icon-cross:before { content: "\e1b1" !important; }
.icon-customer-2:before { content: "\e1a3" !important; }
.icon-customer:before { content: "\e19e" !important; }
.icon-dashboard:before { content: "\e1c0" !important; }
.icon-delete:before { content: "\e18d" !important; }
.icon-done:before { content: "\e070" !important; }
.icon-dot:before { content: "\e453" !important; }
.icon-dots:before { content: "\e0ba" !important; }
.icon-down-stat:before { content: "\e18f" !important; }
.icon-drag:before { content: "\e0ee" !important; }
.icon-edit-save:before { content: "\e150" !important; }
.icon-edit:before { content: "\e1f8" !important; }
.icon-filter:before { content: "\e0d5" !important; }
.icon-folder-block:before { content: "\e341" !important; }
.icon-folder:before { content: "\e0dc" !important; }
.icon-image:before { content: "\e0f9" !important; }
.icon-information:before { content: "\e0fe" !important; }
.icon-language:before { content: "\e0eb" !important; }
.icon-location:before { content: "\e114" !important; }
.icon-mail:before { content: "\e112" !important; }
.icon-menu:before { content: "\e118" !important; }
.icon-notification:before { content: "\e05d" !important; }
.icon-order-back:before { content: "\e2a0" !important; }
.icon-printer:before { content: "\e144" !important; }
.icon-processing:before { content: "\e10c" !important; }
.icon-product-1:before { content: "\e12c" !important; }
.icon-product:before { content: "\e12c" !important; }
.icon-promotion:before { content: "\e182" !important; }
.icon-radio-normal:before { content: "\e07a" !important; }
.icon-radio-selected:before { content: "\e348" !important; }
.icon-repeat:before { content: "\e149" !important; }
.icon-sales:before { content: "\e0b5" !important; }
.icon-search:before { content: "\e154" !important; }
.icon-setting:before { content: "\e157" !important; }
.icon-settings:before { content: "\e157" !important; }
.icon-ship:before { content: "\e193" !important; }
.icon-sort-down:before { content: "\e071" !important; }
.icon-sort-left:before { content: "\e072" !important; }
.icon-sort-right:before { content: "\e073" !important; }
.icon-sort-up-down:before { content: "\e210" !important; }
.icon-sort-up:before { content: "\e074" !important; }
.icon-star:before { content: "\e179" !important; }
.icon-store:before { content: "\e3e7" !important; }
.icon-tick:before { content: "\e070" !important; }
.icon-up-stat:before { content: "\e190" !important; }
.icon-view:before { content: "\e0be" !important; }
.icon-view-close:before { content: "\e0bf" !important; }
.icon-copy:before { content: "\e0a2" !important; }
.icon-exit:before { content: "\e111" !important; }
.icon-clip:before { content: "\e130" !important; }
.icon-collapse:before { content: "\e075" !important; }
.icon-login:before { content: "\e110" !important; }
.icon-pause:before { content: "\e131" !important; }
.icon-play:before { content: "\e13f" !important; }

/* --- Star fill: use Lucide star glyph with amber color --- */
.icon-star-fill:before { content: "\e179" !important; color: #ffb600 !important; }

/* --- Additional icons used in templates --- */
.icon-add-product:before { content: "\e267" !important; }
.icon-discount:before { content: "\e135" !important; }
.icon-clock:before { content: "\e08b" !important; }
.icon-size:before { content: "\e115" !important; }

/* --- Super admin extras --- */
.icon-camera:before { content: "\e068" !important; }
.icon-check-box:before { content: "\e55d" !important; }
.icon-double-arrow:before { content: "\e077" !important; }
.icon-hamburger:before { content: "\e118" !important; }
.icon-orders:before { content: "\e08a" !important; }
.icon-users:before { content: "\e1a3" !important; }

/* --- Social media icons (SVG mask, Lucide-style thin stroke) --- */
.icon-facebook:before,
.icon-twitter:before,
.icon-instagram:before,
.icon-linkedin:before,
.icon-google-plus:before {
    font-family: initial !important;
    content: "" !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
}

.icon-facebook:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
}

.icon-twitter:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'/%3E%3C/svg%3E");
}

.icon-instagram:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E");
}

.icon-linkedin:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect width='4' height='12' x='2' y='9'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect width='4' height='12' x='2' y='9'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

.icon-google-plus:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
}

/* --- Icon color overrides for dark/light mode --- */
/* Lucide icons inherit color via currentColor, so existing
   Bagisto dark/light rules ([class^="icon-"] color) still apply.
   Override sort arrows / stat indicators to use theme colors: */
html.dark [class^="icon-"]:not(.icon-container-amber),
html.dark [class*=" icon-"]:not(.icon-container-amber) {
    color: #d1d5db;
}

html:not(.dark) [class^="icon-"]:not(.icon-container-amber),
html:not(.dark) [class*=" icon-"]:not(.icon-container-amber) {
    color: #6b7280;
}

/* ====================================================================
   PHASE 11: DASHBOARD LAYOUT – match prototype AppShell spacing
   ==================================================================== */

/* Dashboard container: match prototype's AppShell spacing.
   Bagisto layout provides px-4 (16px) + pt-3 (12px).
   Enforce space-y-8 (32px) between child sections since
   Tailwind's space-y-8 may not be in compiled CSS. */
.mir-dashboard {
    padding-top: 0.25rem;
}
.mir-dashboard > * + * {
    margin-top: 2rem !important;
}
@media (min-width: 768px) {
    .mir-dashboard {
        padding-top: 1.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Action cards 2×2 grid: force correct layout regardless of
   Tailwind compilation (gap-4 may not be in compiled CSS). */
.mir-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

/* Action card individual styling */
.mir-action-grid > a,
.mir-action-grid > div {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 0.75rem !important;
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
}

/* Stack action cards on narrow screens */
@media (max-width: 639px) {
    .mir-action-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Recent Mockups grid: 3 cols mobile, 6 cols desktop.
   aspect-[4/5] and sm:grid-cols-6 are JIT classes that
   won't exist in Bagisto's compiled CSS, so we force them. */
.mir-mockups-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}
@media (min-width: 640px) {
    .mir-mockups-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* Mockup card */
.mir-mockups-grid > div {
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    cursor: pointer;
}

/* Image wrapper: force 4:5 aspect ratio */
.mir-mockups-grid > div > div:first-child {
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    background: var(--mir-background);
}
.mir-mockups-grid > div > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Card footer text */
.mir-mockups-grid > div > div:last-child {
    padding: 0 0.5rem 0.5rem !important;
}

/* Usage stats 3-column grid */
.mir-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

/* Stat card */
.mir-stats-grid > div {
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
}

/* Stat value */
.mir-stats-grid .mir-stat-value {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--mir-primary) !important;
    line-height: 1.75rem;
}

/* Stat label */
.mir-stats-grid .mir-stat-label {
    font-size: 0.75rem !important;
    color: var(--mir-muted-foreground) !important;
    margin-bottom: 0.5rem !important;
}

/* Progress bar track */
.mir-stats-grid .mir-progress-track {
    width: 100% !important;
    height: 6px !important;
    border-radius: 9999px !important;
    background: hsla(43, 100%, 50%, 0.08) !important;
}

/* Progress bar fill */
.mir-stats-grid .mir-progress-fill {
    height: 100% !important;
    border-radius: 9999px !important;
    background: var(--mir-primary) !important;
    transition: width 0.3s ease !important;
}

/* Stack stats on narrow screens */
@media (max-width: 639px) {
    .mir-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ====================================================================
   PHASE 12: TEMPLATES PAGE – match prototype layout
   ==================================================================== */

/* Page container */
.mir-templates-page {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}
.mir-templates-page > * + * {
    margin-top: 1.5rem;
}

/* Tab bar */
.mir-tab-bar {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--mir-border);
    margin-top: 1rem;
}
.mir-tab {
    padding: 0.625rem 1rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s ease;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.mir-tab:hover {
    color: var(--mir-foreground);
}
.mir-tab-active {
    border-bottom-color: var(--mir-primary) !important;
    color: var(--mir-primary) !important;
}

/* Section spacing */
.mir-tpl-section > * + * {
    margin-top: 1.5rem;
}

/* Category pills row */
.mir-pills-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mir-pills-row::-webkit-scrollbar {
    display: none;
}
.mir-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
}
.mir-pill-active {
    background: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}
.mir-pill-inactive {
    background: hsla(43, 100%, 50%, 0.08);
    border: 1px solid hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
}
.mir-pill-inactive:hover {
    background: hsla(43, 100%, 50%, 0.15);
}

/* Template count */
.mir-tpl-count {
    font-size: 0.875rem;
    color: var(--mir-muted-foreground);
}

/* Template grid: 2 cols mobile, 4 cols desktop */
.mir-tpl-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}
@media (min-width: 768px) {
    .mir-tpl-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Template card */
.mir-tpl-card {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

/* Card image area */
.mir-tpl-card-img {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-tpl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.35s ease;
}
.mir-tpl-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mir-background);
}

/* Diagonal hover action pane */
.mir-tpl-card-diagonal {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 55%;
    background: hsla(220, 16%, 7%, 0.85);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 0.75rem;
    z-index: 4;
}
.mir-tpl-card:hover .mir-tpl-card-diagonal {
    opacity: 1;
}
.mir-tpl-card-diagonal button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 9rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.mir-tpl-diag-primary {
    border: 1px solid hsla(43, 100%, 50%, 0.3);
    background: hsla(43, 100%, 50%, 0.05);
    color: var(--mir-primary);
}
.mir-tpl-diag-primary:hover {
    background: hsla(43, 100%, 50%, 0.15);
}
.mir-tpl-diag-ghost {
    border: 1px solid transparent;
    background: none;
    color: var(--mir-foreground);
}
.mir-tpl-diag-ghost:hover {
    background: hsla(0, 0%, 100%, 0.06);
}

/* Card badges */
.mir-tpl-badge {
    position: absolute;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    z-index: 2;
}
.mir-tpl-badge-custom {
    top: 0.5rem;
    right: 0.5rem;
    background: var(--mir-primary);
    color: var(--mir-primary-foreground);
}
.mir-tpl-badge-status {
    top: 0.5rem;
    left: 0.5rem;
    text-transform: capitalize;
}
.mir-pulse {
    animation: mir-pulse-anim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes mir-pulse-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* (Legacy overlay removed — replaced by diagonal action pane) */

/* Card footer */
.mir-tpl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
}
.mir-tpl-card-info {
    min-width: 0;
    flex: 1;
}
.mir-tpl-card-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mir-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mir-tpl-card-meta {
    font-size: 0.75rem;
    color: var(--mir-muted-foreground);
}

/* Card action buttons */
.mir-tpl-card-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.mir-tpl-btn-muted,
.mir-tpl-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s ease;
}
.mir-tpl-btn-muted {
    color: var(--mir-muted-foreground);
}
.mir-tpl-btn-muted:hover {
    color: var(--mir-primary);
}
.mir-tpl-btn-primary {
    color: var(--mir-primary);
}

/* Skeleton loading */
.mir-tpl-skeleton {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--mir-border);
}
.mir-tpl-skeleton-img {
    aspect-ratio: 1 / 1;
    background: var(--mir-border);
    animation: mir-pulse-anim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.mir-tpl-skeleton-text {
    padding: 0.75rem;
}

/* Empty state */
.mir-tpl-empty {
    padding: 4rem 0;
    text-align: center;
}
.mir-tpl-empty-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mir-foreground);
}
.mir-tpl-empty-sub {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--mir-muted-foreground);
}

/* =============================================
   Turbo Drive SPA navigation
   ============================================= */

.turbo-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    z-index: 100002;
    background: linear-gradient(90deg, hsl(43 100% 50%) 0%, hsl(43 100% 67%) 50%, hsl(43 100% 50%) 100%);
    background-size: 300% 100%;
    animation: turbo-bar-shimmer 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px hsl(43 100% 50% / 0.4), 0 0 5px hsl(43 100% 50% / 0.2);
    transition: opacity 0.3s ease;
}

@keyframes turbo-bar-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

[data-turbo-body] {
    transition: opacity 0.12s ease;
}

html.turbo-loading [data-turbo-body] {
    opacity: 0;
    transition: none;
}

/* ── vue-color-kit theme overrides ─────────────────────── */
.hu-color-picker {
    background: var(--mir-card) !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: none !important;
    padding: 10px !important;
}
.hu-color-picker .color-type .name {
    background: var(--mir-background) !important;
    color: var(--mir-muted-foreground) !important;
    border-radius: 4px 0 0 4px !important;
}
.hu-color-picker .color-type .value {
    background: var(--mir-background) !important;
    color: var(--mir-foreground) !important;
    border-radius: 0 4px 4px 0 !important;
}
.hu-color-picker .colors.history {
    border-top-color: var(--mir-border) !important;
}
.hu-color-picker .colors .item {
    border-radius: 50% !important;
}
.hu-color-picker .saturation,
.hu-color-picker .saturation canvas {
    border-radius: 6px !important;
}

/* ── Library: Artwork card hover overlay ──────────────── */
.mir-artwork-overlay {
    position: absolute;
    inset: 0;
    background: hsla(220, 14%, 11%, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}
.mir-artwork-card:hover .mir-artwork-overlay {
    opacity: 1;
}

/* ── Push-to-Store slide-in animation ─────────────────── */
@keyframes mirSlideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════
   PRINT AREA EDITOR — LITE MODE (sidebar-based layout)
   ═══════════════════════════════════════════════════════════ */

/* Skin toggle pill (shared between desktop + mobile) */
.mir-lite-skin-pill {
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mir-border);
    background: var(--mir-background);
    flex-shrink: 0;
}
.mir-lite-skin-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
}
.mir-lite-skin-btn:hover {
    color: var(--mir-foreground);
}
.mir-lite-skin-active {
    background: var(--mir-primary);
    color: #000 !important;
    cursor: default;
}

/* Zoom pill (floating in canvas area) */
.mir-lite-zoom-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-radius: 9999px;
    background: hsla(220, 14%, 11%, 0.95);
    border: 1px solid var(--mir-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    backdrop-filter: blur(12px);
    z-index: 15;
    transition: bottom 0.3s ease;
}
.mir-lite-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.12s ease;
}
.mir-lite-zoom-btn:hover {
    color: var(--mir-foreground);
    background: hsla(0, 0%, 100%, 0.06);
}

/* Icon rail (right edge of sidebar when layer selected) */
.mir-lite-icon-rail {
    width: 56px;
    border-right: 1px solid var(--mir-border);
    background: var(--mir-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
    flex-shrink: 0;
}
.mir-lite-icon-rail-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
    position: relative;
}
.mir-lite-icon-rail-btn:hover {
    background: hsla(0, 0%, 100%, 0.06);
    color: var(--mir-foreground);
}
.mir-lite-icon-rail-btn.active {
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
}
.mir-lite-icon-rail-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 9999px;
    background: var(--mir-primary);
}

/* Layer list rows (48px, hover effect) */
.mir-lite-layer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 16px;
    cursor: pointer;
    transition: background 0.1s ease;
    border-radius: 0;
}
.mir-lite-layer-row:hover {
    background: hsla(43, 100%, 50%, 0.06);
}

/* Color swatch grid (6 columns for POD presets) */
.mir-lite-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 36px);
    gap: 8px;
}
.mir-lite-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}
.mir-lite-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mir-lite-swatch.active {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.25);
    transform: scale(1.05);
}

/* Download pill (amber split button at sidebar bottom) */
.mir-lite-download-pill {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 40px;
    border-radius: 6px;
    background: var(--mir-primary);
    color: #000;
    overflow: hidden;
    box-shadow: 0 4px 14px -4px hsla(43, 100%, 50%, 0.6);
    transition: all 0.15s ease;
}
.mir-lite-download-pill.open {
    box-shadow: 0 4px 14px -4px hsla(43, 100%, 50%, 0.6), 0 0 0 2px hsla(43, 100%, 50%, 0.4), 0 0 0 4px var(--mir-card);
}

/* Scrollbar hide utility */
.mir-lite-scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mir-lite-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ── Floating overlays (Fit & Anchor on canvas) ── */
.mir-float-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mir-card);
    backdrop-filter: blur(8px);
    border: 1px solid var(--mir-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: var(--mir-primary);
    cursor: pointer;
    transition: border-color 0.15s;
}
.mir-float-btn:hover {
    border-color: hsla(43, 100%, 50%, 0.5);
}
.mir-float-panel {
    background: var(--mir-card);
    backdrop-filter: blur(8px);
    border: 1px solid var(--mir-border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mir-float-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 8px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
}
.mir-float-option:hover {
    color: var(--mir-foreground);
    background: hsla(0, 0%, 100%, 0.06);
}
.mir-float-option[data-active="true"] {
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
}
.mir-float-anchor-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mir-border);
    background: var(--mir-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
}
.mir-float-anchor-dot:hover {
    border-color: hsla(43, 100%, 50%, 0.5);
    background: hsla(0, 0%, 100%, 0.06);
}
.mir-float-anchor-dot[data-active="true"] {
    background: var(--mir-primary);
    border-color: var(--mir-primary);
    transform: scale(1.1);
    box-shadow: 0 0 8px hsla(43, 100%, 50%, 0.3);
}

/* Toast notifications */
.mir-lite-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    z-index: 100;
    animation: mirFadeIn 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}
.mir-lite-toast-success {
    background: hsla(145, 60%, 40%, 0.9);
    color: #fff;
}
.mir-lite-toast-error {
    background: hsla(0, 70%, 50%, 0.9);
    color: #fff;
}

/* Mobile bottom sheet — Polotno-style slide-up panel */
.mir-mobile-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mir-card);
    border-top: 1px solid var(--mir-border);
    border-radius: 16px 16px 0 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 55vh;
    overflow: hidden;
}
.mir-mobile-panel.open {
    transform: translateY(0);
}
.mir-mobile-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--mir-border);
    flex-shrink: 0;
}
.mir-mobile-panel__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--mir-foreground);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mir-mobile-panel__body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* Mobile layer tab strip */
.mir-mobile-tabs {
    display: flex;
    align-items: stretch;
    height: 64px;
    border-top: 1px solid var(--mir-border);
    background: hsla(220, 14%, 9%, 0.97);
    backdrop-filter: blur(12px);
    z-index: 30;
    flex-shrink: 0;
    padding: 8px 12px;
    gap: 8px;
}
.mir-mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1.5px solid var(--mir-border);
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    min-width: 0;
    transition: background 150ms ease, border-color 150ms ease;
}
.mir-mobile-tab:active {
    background: rgba(255,255,255,0.05);
}
.mir-mobile-tab--active {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.08);
}
.mir-mobile-tab__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-mobile-tab__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--mir-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.mir-mobile-tab--active .mir-mobile-tab__label {
    color: var(--mir-primary);
}
/* Icon-only mode (>3 layers) */
.mir-mobile-tabs--icons-only .mir-mobile-tab {
    flex: 0 0 48px;
    padding: 0;
}
.mir-mobile-tabs--icons-only .mir-mobile-tab__label {
    display: none;
}
.mir-mobile-tabs--icons-only .mir-mobile-tab__icon {
    width: 36px;
    height: 36px;
}
.mir-mobile-tabs--icons-only {
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
}
/* Add button (round) */
.mir-mobile-tab--add {
    flex: 0 0 44px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    border: 1.5px dashed var(--mir-border);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-mobile-tab--add:active {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.08);
}

/* Mobile download button — full width */
.mir-mobile-download {
    flex-shrink: 0;
    padding: 8px 12px;
    background: var(--mir-card);
    border-top: 1px solid var(--mir-border);
    z-index: 30;
}
.mir-mobile-download__btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: none;
    background: var(--mir-primary);
    color: #000;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 150ms ease;
}
.mir-mobile-download__btn:active {
    opacity: 0.85;
}
.mir-mobile-download__btn .meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.7;
}
/* Expand arrow */
.mir-mobile-download__expand {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Mobile download menu (slide-up) */
.mir-mobile-dl-menu {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mir-card);
    border-top: 1px solid var(--mir-border);
    border-radius: 16px 16px 0 0;
    z-index: 50;
    padding: 20px 16px 24px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.mir-mobile-dl-menu.open {
    transform: translateY(0);
}
.mir-mobile-dl-menu__section {
    margin-bottom: 16px;
}
.mir-mobile-dl-menu__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
    margin-bottom: 8px;
}
.mir-mobile-dl-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mir-mobile-dl-pill {
    height: 36px;
    padding: 0 16px;
    border-radius: 9999px;
    border: 1.5px solid var(--mir-border);
    background: transparent;
    color: var(--mir-foreground);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.mir-mobile-dl-pill--active {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.12);
    color: var(--mir-primary);
}
.mir-mobile-dl-output {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--mir-border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--mir-muted-foreground);
}

/* Spin animation (may already exist) */
@keyframes mirSpin {
    to { transform: rotate(360deg); }
}
@keyframes mirFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile layout */
.mir-lite-mobile {
    display: none;
}

/* Responsive: show mobile, hide desktop */
@media (min-width: 768px) {
    #lite-desktop-grid {
        display: grid !important;
    }
    .mir-lite-mobile {
        display: none !important;
    }
}
@media (max-width: 767px) {
    #lite-desktop-grid {
        display: none !important;
    }
    .mir-lite-mobile {
        display: flex !important;
    }
    .mir-lite-back-label {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   PRINT AREA EDITOR — SHARED CLASSES (Lite + Pro)
   Normalized to core MIR design tokens:
     text: 10px (micro) / 12px (sm) / 14px (base)
     fonts: Space Grotesk (display), JetBrains Mono (data), Inter (body)
     rounding: 8px (sm) / 12px (md) / 9999px (pill)
   ═══════════════════════════════════════════════════════════ */

/* ── Fullscreen shell ── */
.mir-editor-shell {
    position: fixed;
    inset: 0;
    z-index: 10002;
    overflow: hidden;
}

/* ── Top bar ── */
.mir-editor-topbar {
    height: 56px;
    border-bottom: 1px solid var(--mir-border);
    background: hsla(220, 14%, 11%, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 40;
    flex-shrink: 0;
}

/* ── Sidebar (left or right) ── */
.mir-editor-sidebar {
    background: var(--mir-card);
    flex-shrink: 0;
    overflow: hidden;
}
.mir-editor-sidebar-l { border-right: 1px solid var(--mir-border); }
.mir-editor-sidebar-r { border-left: 1px solid var(--mir-border); }

/* ── Canvas area ── */
.mir-editor-canvas {
    position: relative;
    overflow: hidden;
    background: var(--mir-background);
}

/* ── Section border (reusable bottom divider for panel sections) ── */
.mir-editor-section { border-bottom: 1px solid var(--mir-border); }

/* ── Panel header row (sidebar section headers) ── */
.mir-editor-panel-hd {
    height: 56px;
    border-bottom: 1px solid var(--mir-border);
    flex-shrink: 0;
}
.mir-editor-panel-hd-sm {
    height: 44px;
    border-bottom: 1px solid var(--mir-border);
    flex-shrink: 0;
}

/* ── Vertical divider (between header items) ── */
.mir-editor-vdiv {
    width: 1px;
    height: 20px;
    background: var(--mir-border);
    flex-shrink: 0;
}

/* ── Floating glass pill (mode toolbar, zoom controls) ── */
.mir-editor-glass {
    border-radius: 9999px;
    background: hsla(220, 14%, 11%, 0.95);
    border: 1px solid var(--mir-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Mode segmented button (Fixed / Perspective / Distorted) ── */
.mir-editor-mode-btn {
    height: 28px;
    padding: 0 12px;
    border-radius: 9999px;
    border: none;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: capitalize;
}
.mir-editor-mode-btn[data-active="true"] {
    background: var(--mir-primary);
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.mir-editor-mode-btn[data-active="false"] {
    background: transparent;
    color: var(--mir-muted-foreground);
    box-shadow: none;
}

/* ── Segmented control container (filter tabs, fit/bounds etc) ── */
.mir-editor-seg {
    border-radius: 8px;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
}

/* ── Segment tab button ── */
.mir-editor-seg-btn {
    height: 28px;
    border-radius: 6px;
    border: none;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.12s;
}
.mir-editor-seg-btn[data-active="true"] {
    background: var(--mir-card);
    color: var(--mir-foreground);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mir-editor-seg-btn[data-active="false"] {
    background: transparent;
    color: var(--mir-muted-foreground);
    box-shadow: none;
}

/* ── Pill toggle button (format/size in download panel) ── */
.mir-editor-pill-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 9999px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.mir-editor-pill-btn[data-active="true"] {
    background: var(--mir-primary);
    color: #000;
    border: 1px solid var(--mir-primary);
}
.mir-editor-pill-btn[data-active="false"] {
    background: transparent;
    color: var(--mir-muted-foreground);
    border: 1px solid var(--mir-border);
}

/* ── Micro label (above selects, stat boxes — font-mono uppercase 10px) ── */
.mir-editor-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
    display: block;
    margin-bottom: 4px;
}

/* ── Panel title (13px display font) ── */
.mir-editor-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--mir-foreground);
}

/* ── Panel subtitle (data/description) ── */
.mir-editor-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--mir-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Stat box (bounds readout, output summary) ── */
.mir-editor-stat-box {
    padding: 8px;
    border-radius: 8px;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
}

/* ── Icon accent box (download/add-layers header icons) ── */
.mir-editor-icon-accent {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: hsla(43, 100%, 50%, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Spinner (loading indicator) ── */
.mir-editor-spinner {
    border-radius: 50%;
    border: 2px solid var(--mir-border);
    border-top-color: var(--mir-primary);
    animation: mirSpin 0.8s linear infinite;
}
.mir-editor-spinner-sm { width: 18px; height: 18px; }
.mir-editor-spinner-md { width: 20px; height: 20px; }
.mir-editor-spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* ── Save button (amber glow) ── */
.mir-editor-save-active {
    background: var(--mir-primary);
    color: #000;
    font-weight: 600;
    box-shadow: 0 0 0 1px hsla(43, 100%, 50%, 0.4), 0 4px 14px -2px hsla(43, 100%, 50%, 0.35);
}
.mir-editor-save-done {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    font-weight: 600;
}

/* ── Upload dashed button ── */
.mir-editor-upload {
    height: 36px;
    border-radius: 8px;
    border: 1px dashed var(--mir-border);
    background: transparent;
    color: var(--mir-muted-foreground);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: border-color 0.15s;
}
.mir-editor-upload:hover {
    border-color: var(--mir-primary);
}

/* ── Masonry grid ── */
.mir-editor-masonry {
    display: flex;
    gap: 6px;
}
.mir-editor-masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mir-editor-masonry-tile {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}
.mir-editor-masonry-tile[data-active="true"] {
    border-color: var(--mir-primary);
}
.mir-editor-masonry-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mir-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-editor-masonry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Zoom percent display ── */
.mir-editor-zoom-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--mir-muted-foreground);
    width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Small input overrides for editor context (compact selects, search) ── */
.mir-editor-input-sm {
    height: 36px;
    font-size: 12px;
}

/* ── Muted hint text ── */
.mir-editor-muted {
    color: var(--mir-muted-foreground);
}
.mir-editor-text-10 { font-size: 10px; }
.mir-editor-text-12 { font-size: 12px; }
.mir-editor-text-14 { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   V2 PROTOTYPE ALIGNMENT — New reusable class families
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 2.1 Floating glass pill (mode bar, zoom, grid slider) ── */
.mir-float-pill {
    background: var(--mir-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--mir-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.mir-float-pill--round {
    border-radius: 50%;
}

/* ── 2.2 Icon rail ── */
.mir-icon-rail {
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
    flex-shrink: 0;
}
.mir-icon-rail__btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 150ms ease, color 150ms ease;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    border: none;
    background: transparent;
}
.mir-icon-rail__btn:hover {
    background: rgba(var(--mir-primary-rgb), 0.08);
}
.mir-icon-rail__btn--active {
    background: rgba(var(--mir-primary-rgb), 0.15);
    color: var(--mir-primary);
}
.mir-icon-rail__btn--active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--mir-primary);
}
.mir-icon-rail__btn--dimmed {
    opacity: 0.35;
}
.mir-icon-rail__btn--dimmed:hover {
    opacity: 0.7;
}
.mir-layer-select {
    flex: 1 1 0%;
    min-width: 0;
    font-size: 14px;
    color: var(--mir-foreground);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 2px 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 20px;
}
.mir-layer-select option {
    background: var(--mir-card);
    color: var(--mir-foreground);
}
.mir-icon-rail__swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--mir-border);
}
.mir-icon-rail__swatch-stack {
    position: relative;
    width: 24px;
    height: 24px;
}
.mir-icon-rail__swatch-stack > span {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--mir-card);
}
.mir-icon-rail__swatch-stack > span:nth-child(1) { left: 0; top: 0; z-index: 3; }
.mir-icon-rail__swatch-stack > span:nth-child(2) { left: 5px; top: 2px; z-index: 2; }
.mir-icon-rail__swatch-stack > span:nth-child(3) { left: 10px; top: 4px; z-index: 1; }

/* ── 2.3 Color picker ── */
.mir-color-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.mir-color-swatch {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.mir-color-swatch:hover {
    border-color: var(--mir-muted-foreground);
}
.mir-color-swatch--selected {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px rgba(var(--mir-primary-rgb), 0.25);
    transform: scale(1.05);
}
.mir-color-swatch--dark {
    border-color: var(--mir-border);
}
.mir-color-hex-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mir-color-hex-trigger {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid var(--mir-border);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 150ms ease;
}
.mir-color-hex-trigger:hover,
.mir-color-hex-trigger--open {
    border-color: var(--mir-primary);
}
.mir-color-hsv {
    display: flex;
    gap: 8px;
}
.mir-color-sv-square {
    flex: 1;
    aspect-ratio: 1;
    border-radius: 8px;
    cursor: crosshair;
    position: relative;
    overflow: hidden;
}
.mir-color-hue-bar {
    width: 16px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    background: linear-gradient(to bottom, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

/* ── 2.4 Bound field ── */
.mir-bound-field {
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.mir-bound-field__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
}
.mir-bound-field__value {
    color: var(--mir-foreground);
    text-align: right;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    width: 60px;
    font-variant-numeric: tabular-nums;
}
.mir-bound-field:focus-within {
    border-color: var(--mir-primary);
}

/* ── 2.5 Link toggle ── */
.mir-link-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--mir-border);
}
.mir-link-toggle__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mir-muted-foreground);
}
.mir-toggle-pill {
    width: 32px;
    height: 16px;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: background 200ms ease;
    background: var(--mir-border);
    flex-shrink: 0;
}
.mir-toggle-pill.active {
    background: var(--mir-primary);
}
.mir-toggle-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 200ms ease;
}
.mir-toggle-pill.active::after {
    transform: translateX(16px);
}

/* ── 2.6 Source tabs ── */
.mir-source-tabs {
    display: flex;
    border-bottom: 1px solid var(--mir-border);
}
.mir-source-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 11px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    position: relative;
    transition: color 150ms ease;
    background: transparent;
    border: none;
}
.mir-source-tab:hover {
    color: var(--mir-foreground);
}
.mir-source-tab--active {
    color: var(--mir-primary);
}
.mir-source-tab--active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mir-primary);
    border-radius: 1px;
}

/* ── 2.7 Download footer ── */
.mir-download-footer {
    height: 48px;
    flex-shrink: 0;
    border-top: 1px solid var(--mir-border);
    background: var(--mir-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
    z-index: 40;
}
.mir-output-selector {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    overflow: hidden;
    height: 32px;
}
.mir-output-selector select {
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 0 8px;
    color: var(--mir-foreground);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.mir-output-selector select + select {
    border-left: 1px solid var(--mir-border);
}

/* ── 2.8 Masonry artwork grid (CSS columns) ── */
.mir-artwork-grid {
    columns: 2;
    column-gap: 8px;
}
.mir-artwork-grid__item {
    break-inside: avoid;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mir-artwork-grid__item:hover {
    border-color: var(--mir-muted-foreground);
}
.mir-artwork-grid__item--selected {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px rgba(var(--mir-primary-rgb), 0.25);
}
.mir-artwork-grid__item img {
    width: 100%;
    display: block;
}

/* ── 2.9 Layer row ── */
.mir-layer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 150ms ease;
    min-height: 48px;
}
.mir-layer-row:hover {
    background: rgba(var(--mir-primary-rgb), 0.06);
}
.mir-layer-row__name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--mir-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 2.10 Floating mode button ── */
.mir-float-mode-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 11px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.mir-float-mode-btn:hover {
    color: var(--mir-foreground);
}
.mir-float-mode-btn--active {
    background: rgba(var(--mir-primary-rgb), 0.15);
    color: var(--mir-primary);
}

/* ── 2.11 Fit/Anchor floating controls ── */
.mir-float-fit-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    cursor: pointer;
    background: transparent;
    border: none;
}
.mir-float-fit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--mir-muted-foreground-rgb, 156,163,175), 0.4);
    transition: background 150ms ease;
}
.mir-float-fit-dot--active {
    background: var(--mir-primary);
}
.mir-float-fit-menu {
    padding: 4px;
}
.mir-float-fit-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 150ms ease;
    color: var(--mir-muted-foreground);
}
.mir-float-fit-option:hover {
    color: var(--mir-foreground);
    background: var(--mir-card);
}
.mir-float-fit-option--active {
    background: rgba(var(--mir-primary-rgb), 0.15);
    color: var(--mir-primary);
}
.mir-float-fit-option__label {
    font-size: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}
.mir-float-fit-option__sub {
    font-size: 9px;
    color: var(--mir-muted-foreground);
}

/* ── Section header (uppercase label + optional action) ── */
.mir-section-header {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mir-muted-foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Sidebar panel (scrollable content area) ── */
.mir-sidebar-panel {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ─── AI Background Panel ─── */
.mir-ai-prompt-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.mir-ai-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.mir-ai-category-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    background: transparent;
    cursor: pointer;
    transition: all 150ms ease;
    color: var(--mir-muted-foreground);
}
.mir-ai-category-chip:hover {
    border-color: var(--mir-primary);
    color: var(--mir-foreground);
    background: hsla(43, 100%, 50%, 0.04);
}
.mir-ai-category-chip--active {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.12);
    color: var(--mir-primary);
}
.mir-ai-category-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mir-ai-category-chip__label {
    font-size: 9px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mir-ai-status-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: hsla(43, 100%, 50%, 0.06);
    border: 1px solid hsla(43, 100%, 50%, 0.15);
}