/* ============================================================
   ARTIVITY POS - COMPLETE APPLICATION STYLESHEET BUNDLE
   Consolidated & Compact Core Stylesheet (app.bundle.css)
   Includes: Fonts, Tokens, Utilities, Layout, Components, Polish, Responsive
   Generated: 2026-09-21
   ============================================================ */


/* --- 1. LOCAL FONTS (Nunito, Inter & Iosevka Charon Mono) --- */
/* Nunito Font Family (Headings & Bold Text) */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nunito/nunito-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/nunito/nunito-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/nunito/nunito-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/nunito/nunito-800.woff2') format('woff2');
}

/* Inter Font Family (Body & Normal Text) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter/inter-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/inter-700.woff2') format('woff2');
}

/* Iosevka Charon Mono Font Family (Numbers & Digits) */
@font-face {
    font-family: 'Iosevka Charon Mono';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/iosevka-charon-mono/iosevka-charon-mono-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Iosevka Charon Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/iosevka-charon-mono/iosevka-charon-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Iosevka Charon Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/iosevka-charon-mono/iosevka-charon-mono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Iosevka Charon Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/iosevka-charon-mono/iosevka-charon-mono-700.woff2') format('woff2');
}


/* --- 2. CORE DESIGN SYSTEM & UTILITIES --- */
/* --- Badges --- */
.bg-soft-primary {
    background-color: rgba(14, 165, 233, 0.1) !important;
    color: #0EA5E9 !important;
}
.bg-soft-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
    color: #198754 !important;
}
.bg-soft-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
}
.bg-soft-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #856404 !important;
}
.bg-soft-info {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: #6366F1 !important;
}

/* --- Border Radius Utilities --- */
.rounded-xs { border-radius: var(--radius-xs) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

/* --- Text Utilities --- */
.text-heading { color: var(--text-heading) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-placeholder { color: var(--text-placeholder) !important; }
.text-main { color: var(--text-main) !important; }
.text-muted-soft { color: var(--text-muted) !important; }

/* --- Background Utilities --- */
.bg-main { background-color: var(--bg-main) !important; }
.bg-card { background-color: var(--bg-card) !important; }
.bg-input { background-color: var(--bg-input) !important; }
.bg-sidebar { background-color: var(--bg-sidebar) !important; }

/* --- Border Utilities --- */
.border-color { border-color: var(--border-color) !important; }
.border-color-light { border-color: var(--border-color-light) !important; }
.border-color-hover { border-color: var(--border-color-hover) !important; }
.border-dashed { border-style: dashed !important; }

/* --- Soft Background Variants --- */
.bg-soft-secondary {
    background-color: rgba(108, 117, 125, 0.1) !important;
    color: #6c757d !important;
}
.bg-soft-light {
    background-color: rgba(248, 249, 250, 0.5) !important;
    color: #6c757d !important;
}
.bg-soft-dark {
    background-color: rgba(33, 37, 41, 0.1) !important;
    color: #212529 !important;
}

/* --- Gradient Backgrounds --- */
.bg-gradient-blue { background: linear-gradient(135deg, #38BDF8, #0EA5E9) !important; }
.bg-gradient-green { background: linear-gradient(135deg, #10b981, #059669) !important; }
.bg-gradient-amber { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.bg-gradient-purple { background: linear-gradient(135deg, #F28B74, #E8634A) !important; }

/* --- Animation Delays --- */
.anim-delay-1 { animation-delay: 0.05s !important; }
.anim-delay-2 { animation-delay: 0.1s !important; }
.anim-delay-3 { animation-delay: 0.15s !important; }
.anim-delay-4 { animation-delay: 0.2s !important; }
.anim-delay-5 { animation-delay: 0.25s !important; }
.anim-delay-6 { animation-delay: 0.3s !important; }
.anim-delay-7 { animation-delay: 0.35s !important; }
.anim-delay-8 { animation-delay: 0.4s !important; }
.anim-delay-9 { animation-delay: 0.45s !important; }
.anim-delay-10 { animation-delay: 0.5s !important; }

/* --- Spec Color Text --- */
.text-spec-blue { color: var(--spec-blue) !important; }
.text-spec-amber { color: var(--spec-amber) !important; }
.text-spec-red { color: var(--spec-red) !important; }
.text-spec-green { color: var(--spec-green) !important; }
.text-spec-teal { color: var(--spec-teal) !important; }

/* --- Size Utilities --- */
.w-50px { width: 50px !important; }
.size-40 { width: 40px !important; height: 40px !important; }
.size-45 { width: 45px !important; height: 45px !important; }
.min-h-600 { min-height: 600px !important; }

/* --- Font Sizes --- */
.fs-7 { font-size: 0.85rem !important; }
.fs-8 { font-size: 0.78rem !important; }
.fs-9 { font-size: 0.72rem !important; }

/* --- Spacing Utilities --- */
.gap-1 { gap: var(--space-xs) !important; }
.gap-2 { gap: var(--space-sm) !important; }
.gap-3 { gap: var(--space-md) !important; }
.gap-4 { gap: var(--space-lg) !important; }
.gap-5 { gap: var(--space-xl) !important; }


/* --- 3. BASE LAYOUT & INTERFACE STYLES (pos-style) --- */
/* ============================================================
   ARTIVITY POS - PREMIUM UI SYSTEM
   v4.0 "Warm Coral" (Artivity Brand)
   Focus: Cleanliness, Softness, Modernity
============================================================ */

:root {
    /* --- Colors: Warm Coral Brand Palette --- */
    /* Primary (Warm Coral) - Action & Brand */
    --primary: #0EA5E9;       /* Sky Blue */
    --primary-light: #38BDF8; /* Sky Light */
    --primary-dark: #0284C7;  /* Sky Dark */
    --primary-soft: rgba(14, 165, 233, 0.10);

    /* Secondary (Sky Blue) - Accents */
    --secondary: #E8634A;       /* Coral accent */
    --secondary-light: #F28B74; /* Coral Light */
    --secondary-soft: rgba(232, 100, 74, 0.12);

    /* Functional Colors */
    --success: #10B981;       /* Emerald */
    --success-soft: rgba(16, 185, 129, 0.12);
    --warning: #F59E0B;       /* Amber */
    --warning-soft: rgba(245, 158, 11, 0.12);
    --danger: #EF4444;        /* Red */
    --danger-soft: rgba(239, 68, 68, 0.12);
    --info: #6366F1;          /* Indigo */
    --info-soft: rgba(99, 102, 241, 0.12);

    /* Backgrounds */
    --bg-main: #F8FAFC;       /* Slate 50 - Very clean, light background */
    --bg-sidebar: #1E293B;    /* Slate 800 - Deep, professional contrast */
    --bg-card: #FFFFFF;
    --bg-input: #F1F5F9;      /* Slate 100 */

    /* Typography */
    --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-numeric: 'Iosevka Charon Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    --font-mono: 'Iosevka Charon Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    --bs-font-sans-serif: var(--font-body);
    --bs-font-monospace: var(--font-numeric);
    --bs-body-font-family: var(--font-body);
    --text-main: #334155;     /* Slate 700 - Softer than black */
    --text-muted: #94A3B8;    /* Slate 400 */
    --text-light: #F8FAFC;    /* Slate 50 */

    /* --- Shadows & Glass --- */
    /* Ultra-soft, diffused shadows */
    --shadow-sm: 0 2px 4px rgba(148, 163, 184, 0.05);
    --shadow-md: 0 8px 16px -4px rgba(148, 163, 184, 0.08);
    --shadow-lg: 0 20px 40px -10px rgba(148, 163, 184, 0.12);
    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.25);

    --glass-border: 1px solid rgba(255, 255, 255, 0.6);
    --glass-blur: blur(16px);

    /* --- Animation --- */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Dimensions --- */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --polish-ring: 0 0 0 3px rgba(14, 165, 233, 0.18);
    --polish-focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22);
    --radius-pill: 9999px;

    /* --- Borders --- */
    --border-color: #E2E8F0;
    --border-color-light: #F1F5F9;
    --border-color-hover: #CBD5E1;

    /* --- Text Variants --- */
    --text-heading: #1E293B;    /* Slate 800 - Headings */
    --text-secondary: #64748B;  /* Slate 500 */
    --text-placeholder: #94A3B8;/* Slate 400 */

    /* --- Functional Color Pairs (Bootstrap-compatible) --- */
    --bs-primary: #0EA5E9;
    --bs-primary-hover: #0284C7;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-secondary: #6c757d;

    /* --- Spacing Scale --- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* --- Z-Index Scale --- */
    --z-sidebar: 1500;
    --z-modal: 1600;
    --z-swal2: 1600;
    --z-search-dropdown: 99999;
    --z-tooltip: 1000;

    /* --- Transitions --- */
    --transition-fast: 0.15s var(--ease-smooth);
    --transition-base: 0.25s var(--ease-smooth);
    --transition-slow: 0.35s var(--ease-smooth);

    /* --- Attendance Spec Colors --- */
    --spec-blue: #185FA5;
    --spec-amber: #BA7517;
    --spec-red: #E24B4A;
    --spec-green: #3B6D11;
    --spec-teal: #0F6E56;

    /* --- Gradient Tokens --- */
    --gradient-primary: linear-gradient(135deg, var(--primary-light), var(--primary));
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-analytics: linear-gradient(135deg, #38BDF8, #0EA5E9);

    /* --- WhatsApp Theme --- */
    --wa-green: #008069;
    --wa-chat-bg: #efeae2;
    --wa-bubble-out: #d9fdd3;
}

/* ============================================================
   RESET & TYPOGRAPHY
============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    min-height: 100%;
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-main);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Remove the old background image override to ensure clean look */
body {
    min-height: 100%;
    font-family: var(--font-body);
    color: var(--text-main);
    background: var(--bg-main) !important;
    overflow: visible;
}

/* Better Scrollbar (Rounder & Softer) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color-hover);
    border-radius: 10px;
    border: 2px solid var(--bg-main); /* Creates padding effect */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================================
   ANIMATIONS & MICRO-INTERACTIONS
============================================================ */

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.98) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-entrance {
    animation: fadeInScale 0.6s var(--ease-primary) forwards;
}

/* Card Hover Lift */
.hover-lift {
    transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Click feedback */
.active-press:active {
    transform: scale(0.98);
}

/* ============================================================
   DATATABLES
============================================================ */

.dataTables_info {
    padding: 1rem !important;
    font-size: 0.875rem !important;
    justify-content: center !important;
    align-items: center !important;
}

.dataTables_paginate {
    padding: 1rem !important;
    font-size: 0.875rem !important;
}

.dataTables_length {
    padding: 1rem !important;
    font-size: 0.875rem !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ============================================================ 
   SIDEBAR (Modern, Compact & Alive)
============================================================ */
:root {
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 76px;
    --sidebar-header-height: 56px;
    --sidebar-bg: #0F172A;
    --sidebar-surface: #131F37;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-text: #94A3B8;
    --sidebar-text-bright: #F8FAFC;
    --sidebar-active-bg: rgba(14, 165, 233, 0.12);
    --sidebar-active-text: #38BDF8;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, #0F172A 0%, #111D32 50%, #0D1628 100%);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.22); 
    z-index: var(--z-sidebar);
    transition: width 0.35s var(--ease-smooth);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sidebar-border);
    user-select: none;
}

#sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Header */
.sidebar-header {
    height: var(--sidebar-header-height);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.35s var(--ease-smooth);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

#sidebar.collapsed .sidebar-header {
    padding: 0;
    justify-content: center;
    flex-direction: column;
    height: auto;
    padding-top: 14px;
    padding-bottom: 10px;
    gap: 10px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s var(--ease-smooth);
}

.brand .logo {
    height: 28px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(14, 165, 233, 0.25));
    transition: transform 0.25s var(--ease-smooth);
}

.brand .logo-collapsed {
    display: none;
    height: 28px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(14, 165, 233, 0.3));
    transition: transform 0.25s var(--ease-smooth);
}

#sidebar.collapsed .brand {
    justify-content: center;
    width: 100%;
}

#sidebar.collapsed .brand .logo {
    display: none;
}

#sidebar.collapsed .brand .logo-collapsed {
    display: block;
}

.brand:hover .logo, 
.brand:hover .logo-collapsed {
    transform: scale(1.04);
}

#toggleSidebar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.25s var(--ease-smooth);
    flex-shrink: 0;
}

#toggleSidebar:hover {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.3);
    color: var(--primary-light);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.3);
}

/* Menu Container */
.sidebar-menu {
    flex: 1;
    padding: 8px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sleek custom scrollbar */
.sidebar-menu::-webkit-scrollbar {
    width: 3px;
}
.sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}
.sidebar-menu:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* Section Grouping */
.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
    margin-top: 5px;
}

.sidebar-section:first-child {
    margin-top: 1px;
}

.sidebar-section-label {
    display: flex;
    align-items: center;
    padding: 8px 10px 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94A3B8;
    opacity: 0.85;
    user-select: none;
}

.sidebar-section-label span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar.collapsed .sidebar-section-label {
    display: none;
}

#sidebar.collapsed .sidebar-section {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

#sidebar.collapsed .sidebar-section:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* Menu Items */
.menu-item {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: all 0.2s var(--ease-smooth);
    font-weight: 500;
    font-size: 15px;
    border: 1px solid transparent;
    position: relative;
    cursor: pointer;
    width: 100%;
    background: none;
    line-height: 1.35;
    text-align: left;
}

.menu-item .icon {
    width: 22px;
    font-size: 16px;
    margin-right: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s var(--ease-spring), color 0.2s ease;
    color: #64748B;
    flex-shrink: 0;
}

.menu-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.menu-item:hover {
    color: var(--sidebar-text-bright);
    background: rgba(255, 255, 255, 0.045);
    transform: translateX(2px);
}

.menu-item:hover .icon {
    color: #38BDF8;
    transform: scale(1.1);
}

/* Active Menu Item (Clean, Glowing Notch on Left, No Clashing Dot) */
.menu-item.active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.16) 0%, rgba(14, 165, 233, 0.04) 100%);
    color: #FFFFFF;
    border: 1px solid rgba(14, 165, 233, 0.22);
    font-weight: 600;
    box-shadow: inset 3px 0 0 #0EA5E9, 0 2px 8px rgba(0, 0, 0, 0.12);
}

.menu-item.active:hover {
    transform: none;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0.06) 100%);
}

.menu-item.active .icon {
    color: #38BDF8;
    filter: drop-shadow(0 2px 6px rgba(14, 165, 233, 0.45));
}

.menu-item.active .rotate {
    color: #38BDF8;
}

/* Rotate Chevron for expandable menus */
.rotate {
    font-size: 12.5px;
    color: #64748B;
    transition: transform 0.25s var(--ease-smooth), color 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.menu-item:not(.collapsed) .rotate,
.menu-item[aria-expanded="true"] .rotate,
.rotate.down {
    transform: rotate(90deg);
    color: #38BDF8;
}

/* Submenu container & tree indicator */
.submenu {
    position: relative;
    margin: 2px 0 3px 16px;
    padding: 2px 0 2px 8px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.submenu a {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    color: #A9B6C9;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.18s ease;
    border-radius: 6px;
    position: relative;
}

.sub-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.4);
    margin-right: 8px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.submenu a:hover {
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(2px);
}

.submenu a:hover .sub-dot {
    background: #38BDF8;
    box-shadow: 0 0 6px rgba(14, 165, 233, 0.8);
    transform: scale(1.3);
}

.submenu a.active {
    background: rgba(14, 165, 233, 0.12);
    color: #38BDF8;
    font-weight: 600;
}

.submenu a.active .sub-dot {
    background: #38BDF8;
    box-shadow: 0 0 8px #0EA5E9;
    transform: scale(1.4);
}

/* Collapsed Sidebar Logic */
#sidebar.collapsed .menu-item {
    justify-content: center;
    padding: 9px 0;
    border-radius: 9px;
}

#sidebar.collapsed .menu-title,
#sidebar.collapsed .rotate {
    display: none !important;
}

#sidebar.collapsed .menu-item .icon {
    margin: 0;
    width: 26px;
    font-size: 18px;
}

#sidebar.collapsed .sidebar-menu {
    overflow: visible;
    padding: 8px 6px;
}

#sidebar.collapsed .menu-group {
    position: relative;
}

#sidebar.collapsed .submenu {
    display: none !important;
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    min-width: 190px;
    background: #111C2E;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    z-index: 100;
    margin: 0;
    height: auto !important;
}

#sidebar.collapsed .menu-group:hover > .submenu {
    display: flex !important;
    flex-direction: column;
}

#sidebar.collapsed .submenu::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 8px;
}

#sidebar.collapsed .submenu a {
    padding: 7px 11px;
    white-space: nowrap;
}

/* Sidebar System Status Card (Alive Atmosphere & Balance) */
.sidebar-status-card {
    margin-top: auto;
    padding: 12px 4px 4px;
}

.status-card-inner {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 9px;
    padding: 8px 10px;
    transition: all 0.25s var(--ease-smooth);
}

.status-card-inner:hover {
    border-color: rgba(14, 165, 233, 0.3);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.status-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.status-dot-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
    animation: radar-pulse 2s infinite ease-in-out;
}

.status-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #38BDF8;
    text-transform: uppercase;
}

.status-branch-name {
    font-size: 14px;
    font-weight: 600;
    color: #F8FAFC;
    line-height: 1.3;
}

.status-meta-text {
    font-size: 12.5px;
    color: #94A3B8;
    margin-top: 1px;
}

#sidebar.collapsed .sidebar-status-card {
    display: none;
}

/* Footer / Profile Dock */
.sidebar-footer {
    padding: 8px 8px 10px;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s var(--ease-smooth);
}

.profile-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.sidebar-footer .avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.35);
}

.live-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    background-color: #10B981;
    border: 1.5px solid #0F172A;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: radar-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.details {
    flex: 1;
    min-width: 0;
}

.details .name {
    color: #F8FAFC;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.role-badge-pill {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #CBD5E1;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
}

.status-online-text {
    font-size: 11.5px;
    font-weight: 600;
    color: #10B981;
    line-height: 1.2;
}

.logout-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s var(--ease-smooth);
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #F87171;
    transform: scale(1.06);
}

#sidebar.collapsed .profile-card {
    background: transparent;
    border: none;
    padding: 0;
    justify-content: center;
}

#sidebar.collapsed .details,
#sidebar.collapsed .logout-btn {
    display: none;
}

#sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: 10px 0;
}

/* ============================================================ 
   CONTENT & LAYOUT
============================================================ */
#contentArea {
    position: relative;
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 32px;
    min-height: 100vh;
    transition: all 0.35s var(--ease-smooth);
}

#contentArea.collapsed {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

/* Card System */
.card, .content-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color); /* Subtle border */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); /* Soft shadow */
    transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
    overflow: visible; /* Important for dropdowns */
    position: relative;
    margin-bottom: 24px;
}

/* Ensure complex interactive elements inside don't break */
.card:has(.result-box),
.content-box:has(.result-box) { overflow: visible !important; }

/* Ensure cards with open dropdowns float above following cards/tables */
.card:has(.custom-select-wrapper.open),
.card.has-open-select,
.content-box:has(.custom-select-wrapper.open),
.content-box.has-open-select,
.filter-bar-card:has(.custom-select-wrapper.open),
.filter-bar-card.has-open-select,
.modal-content:has(.custom-select-wrapper.open),
.modal-content.has-open-select {
    z-index: 1050 !important;
    position: relative;
}

.modal .custom-options {
    z-index: 1080 !important;
}

.filter-bar-card {
    position: relative;
    z-index: 10;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md); /* Lift effect */
    border-color: var(--border-color-hover);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color-light);
    padding: 24px 32px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-body {
    padding: 32px;
}

/* ============================================================
   UI ELEMENTS
============================================================ */

.swal2-actions {
    gap: 14px;
}

.swal2-actions button {
    border-radius: 16px;
    transition: all 0.2s var(--ease-smooth);
}
.swal2-actions button:hover {
    transform: scale(1.025);
}

/* Buttons */
.btn {
    border-radius: var(--radius-md); /* More rounded */
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s var(--ease-smooth);
    border: none;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(14, 165, 233, 0.45);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: transparent;
    box-shadow: 0 8px 20px -6px rgba(14, 165, 233, 0.55);
}

/* Secondary/Outline style */
.btn-outline-secondary {
    border: 1px solid var(--border-color);
    color: var(--text-main);
    background: #fff;
}
.btn-outline-secondary:hover {
    background: var(--bg-main);
    border-color: var(--border-color-hover);
    color: var(--primary);
}

/* Inputs */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    padding: 10px 14px;
    font-size: 14px;
    min-height: 44px;
    transition: border-color 0.18s var(--ease-smooth),
                box-shadow 0.18s var(--ease-smooth),
                background-color 0.18s var(--ease-smooth);
    color: var(--text-main);
}

.form-control:focus, .form-select:focus {
    background-color: #FFFFFF;
    border-color: var(--primary);
    box-shadow: var(--polish-focus-ring);
    outline: none;
}

.form-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Tables - Clean & Spacious */
.table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    table-layout: fixed;
}
.table thead th {
    background: var(--bg-main);
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    padding: 14px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    top: 0;
    z-index: 5;
}
.table thead th:first-child {
    border-top-left-radius: var(--radius-md);
}
.table thead th:last-child {
    border-top-right-radius: var(--radius-md);
}
.table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-main);
    font-size: 14px;
    background: #fff;
    transition: background 0.2s;
}
.table-hover tbody tr:hover td {
    background: rgba(14, 165, 233, 0.04);
}

/* DataTables container — fit parent width */
div.dataTables_wrapper div.dataTables_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table.dataTable {
    table-layout: fixed !important;
    width: 100% !important;
}
/* Override DataTables nowrap so cells can wrap */
table.dataTable tbody td {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
}
table.dataTable thead th {
    white-space: nowrap !important;
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.table-responsive > .table {
    min-width: 600px;
}

/* Category Group Headers for Product List */
.table .group-header td {
    background: linear-gradient(135deg, var(--bg-input) 0%, var(--border-color) 100%) !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-dark);
    padding: 12px 24px !important;
    border-top: 2px solid var(--primary-light);
    border-bottom: 1px solid var(--border-color-hover);
    position: sticky;
    top: 0;
    z-index: 10;
}

.table .group-header td i {
    opacity: 0.7;
}

/* ============================================================
   POLISH: table header sort indicators
   ============================================================ */
table.dataTable thead th.th-sort-asc .sort-icon::after {
    content: ' ▲';
    margin-left: 0.5rem;
    color: var(--primary);
    font-size: 10px;
}
table.dataTable thead th.th-sort-desc .sort-icon::after {
    content: ' ▼';
    margin-left: 0.5rem;
    color: var(--primary);
    font-size: 10px;
}

/* ============================================================
   POLISH: empty state panel
   ============================================================ */
.empty-state-panel {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-state-panel i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Badges - Pastel Pops */
.badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Pagination */
.page-item .page-link {
    border-radius: 8px;
    margin: 0 4px;
    border: none;
    color: var(--text-muted);
    background: transparent;
    font-weight: 500;
}
.page-item.active .page-link {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

/* ============================================================
   POS TOP HUD BAR & STATUS INDICATORS
============================================================ */
.pos-hud-bar {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s var(--ease-smooth);
}

.pos-status-indicator.pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    position: relative;
    animation: pulseGreen 2s infinite ease-out;
}

@keyframes pulseGreen {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* --- Live Shift Stats HUD --- */
.shift-stats-hud {
    background: linear-gradient(135deg, #fef3c7 0%, #f8fafc 100%);
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s var(--ease-smooth);
}
.shift-stats-hud strong {
    color: #0f172a;
    font-weight: 700;
}

/* --- Sound Effects Toggle Button --- */
.pos-sound-toggle {
    transition: all 0.2s var(--ease-smooth);
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}
.pos-sound-toggle:hover {
    background: #f8fafc;
    border-color: var(--primary-light);
    color: var(--primary-dark);
    transform: translateY(-1px);
}
.pos-sound-toggle.is-muted {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
}
.pos-sound-toggle.is-muted .sound-icon-on {
    display: none !important;
}
.pos-sound-toggle.is-muted .sound-icon-off {
    display: inline-block !important;
}
.pos-sound-toggle.is-muted .sound-label {
    color: #94a3b8;
}

/* ============================================================
   SEARCH RESULT BOX & OVERFLOW
============================================================ */
/* Fix z-indices and overflows for dropdowns */
.pos-layout, .pos-layout .card, .pos-layout .card-body {
    overflow: visible !important;
}

.result-box {
    top: calc(100% + 12px);
    border: none;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -5px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
    padding: 8px;
    max-height: 380px;
    z-index: var(--z-search-dropdown) !important;
    background: #fff;
    overflow-y: auto;
}

.result-item {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.result-item:hover {
    background-color: var(--primary-soft);
    border-color: rgba(14, 165, 233, 0.2);
    transform: translateX(4px);
}

.result-item .fw-bold { color: var(--text-main); font-size: 15px; }
.result-item .small { color: var(--text-muted); font-size: 13px; }

/* ============================================================
   PRINT PREVIEW & MODALS
============================================================ */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 2px solid var(--border-color-light);
    padding: 24px 32px;
}
.modal-footer {
    border-top: 1px solid var(--border-color-light);
    padding: 24px 32px;
}
.modal-backdrop { display: none !important; }
.modal {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal) !important;
}
.swal2-container { z-index: var(--z-swal2) !important; }

/* Receipt Paper */
.paper-receipt {
    background: #fff;
    padding: 24px;
    margin: 20px auto;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.1);
    /* Zig-zag bottom */
    mask-image: radial-gradient(circle at 10px bottom, transparent 10px, black 11px) 0 100%/20px 20px repeat-x;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 10px), transparent 100%),
        radial-gradient(10px circle at 10px bottom, transparent 50%, black 51%) 0 100% / 20px 10px repeat-x;
}
.paper-receipt.w-58 { width: 360px; min-width: 360px; }
.paper-receipt.w-80 { width: 440px; min-width: 440px; }

/* Preview Area Pattern */
#previewScrollArea {
    background-color: var(--bg-main);
    background-image: radial-gradient(var(--border-color-hover) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Nav Pills */
.nav-pills .nav-link {
    border-radius: var(--radius-md);
    padding: 10px 20px;
    color: var(--text-muted);
    font-weight: 500;
}
.nav-pills .nav-link:hover {
    color: var(--primary);
    background: var(--primary-soft);
}
.nav-pills .nav-link.active {
    background: #fff;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* ============================================================
   UTILITIES & HELPERS
============================================================ */
.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Legacy / Print Overrides */
.preview-container, .preview-po {
    font-family: var(--font-numeric), monospace !important;
    background: #fff;
    padding: 15px; border: 1px solid var(--border-color);
}

@media print {
    #sidebar, #toggleSidebar, .no-print { display: none !important; }
    #contentArea { margin: 0; width: 100%; padding: 0; }
    body { background: #fff !important; }
}

/* ============================================================
   POS UX IMPROVEMENTS v2 — Keyboard, Flow, Cart Cards
   Added for pos_transaksi.php speed/UX overhaul
============================================================ */

/* --- Popular Products Strip --- */
.popular-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.08) 0%, rgba(251, 146, 60, 0.02) 100%);
    border: 1px solid #fed7aa;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
    min-height: 40px;
}
.popular-strip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #d97706;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    white-space: nowrap;
    padding-right: 10px;
    border-right: 1px solid #fed7aa;
    line-height: 1;
}
.popular-strip-label br {
    display: none;
}
.popular-strip-label small,
.popular-strip-label span {
    white-space: nowrap;
    font-weight: 700;
}
.popular-strip-items {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 2px 0;
}
.popular-strip-items::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}
.product-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.product-chip:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary-dark);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}
.product-chip:active {
    transform: scale(0.96);
}
.product-chip .chip-qty {
    display: inline-block;
    padding: 1px 6px;
    background: var(--warning-soft);
    color: var(--warning);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}
.product-chip:hover .chip-qty {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* --- Cart Card List (replaces table) --- */
.cart-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    container: cart / inline-size;   /* cards switch layout by list width */
}
.cart-list:empty::before {
    content: 'Keranjang kosong. Pilih produk untuk memulai.';
    display: block;
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* --- Cart Empty State (Rich Illustration & Floating Motion) --- */
@keyframes floatCart {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    min-height: 280px;
}

.cart-empty-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(56, 189, 248, 0.05) 100%);
    border: 2px dashed rgba(14, 165, 233, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px -4px rgba(14, 165, 233, 0.15);
    animation: floatCart 3.5s ease-in-out infinite;
}

.cart-empty-icon {
    font-size: 32px;
    color: var(--primary, #0EA5E9);
    filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3));
}

.cart-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    margin-bottom: 6px;
}

.cart-empty-desc {
    font-size: 12.5px;
    color: var(--text-muted, #64748B);
    max-width: 280px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.cart-empty-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #475569;
}
/* Compact single-row cart item:
   [category tile] [name / meta] [qty] [price] [delete]
   Narrow lists (< 560px) wrap qty + price onto a second row. */
.cart-item-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "tile main main del"
        ".    qty  price price";
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 10px 8px 10px 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth),
                background-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}
@container cart (min-width: 560px) {
    .cart-item-card {
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        grid-template-areas: "tile main qty price del";
    }
}
.cart-item-card:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08);
}
.cart-item-card.is-merged {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), #fff);
    border-color: rgba(251, 191, 36, 0.3);
}
.cart-item-card.is-leaving {
    pointer-events: none;
}

/* Category tones: tile + category label share one colour per category */
.cart-tone-sky    { --tone-bg: rgba(14, 165, 233, 0.12);  --tone-fg: #0369A1; }
.cart-tone-violet { --tone-bg: rgba(139, 92, 246, 0.12);  --tone-fg: #6D28D9; }
.cart-tone-teal   { --tone-bg: rgba(20, 184, 166, 0.14);  --tone-fg: #0F766E; }
.cart-tone-rose   { --tone-bg: rgba(244, 63, 94, 0.10);   --tone-fg: #BE123C; }
.cart-tone-indigo { --tone-bg: rgba(99, 102, 241, 0.12);  --tone-fg: #4338CA; }
.cart-tone-amber  { --tone-bg: rgba(245, 158, 11, 0.14);  --tone-fg: #B45309; }
.cart-tone-slate  { --tone-bg: #F1F5F9;                    --tone-fg: #475569; }

/* Category tile doubles as the drag handle: the card tilts it on hover to
   hint it can be grabbed, the tile itself swaps its icon for a grip. The
   corner number is the order on the nota/PO. Arrow keys reorder. */
.cart-item-tile {
    grid-area: tile;
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--tone-bg, #F1F5F9);
    color: var(--tone-fg, #475569);
    font-size: 15px;
    cursor: grab;
    user-select: none;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.15s var(--ease-smooth);
}
.cart-item-tile:active {
    cursor: grabbing;
}
.cart-item-card:hover .cart-item-tile {
    transform: rotate(-6deg);
}
.cart-item-tile .cart-tile-icon,
.cart-item-tile .drag-handle-grip {
    transition: opacity 0.15s var(--ease-smooth), transform 0.15s var(--ease-smooth);
}
.cart-item-tile .drag-handle-grip {
    position: absolute;
    opacity: 0;
    transform: scale(0.6);
}
.cart-item-tile:hover .cart-tile-icon,
.cart-item-tile:focus-visible .cart-tile-icon {
    opacity: 0;
    transform: scale(0.6);
}
.cart-item-tile:hover .drag-handle-grip,
.cart-item-tile:focus-visible .drag-handle-grip {
    opacity: 1;
    transform: none;
}
.cart-item-tile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg-card, #fff), 0 0 0 5px var(--tone-fg, var(--primary));
}
.cart-tile-num {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-card, #fff);
    color: var(--text-heading);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.cart-item-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cart-item-card .item-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-heading);
}
.cart-item-card .item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.cart-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.cart-item-meta .meta-cat {
    color: var(--tone-fg, var(--text-secondary));
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cart-item-meta .meta-cat + .meta-ukuran::before {
    content: '·';
    margin-right: 8px;
    color: var(--text-muted);
}
.cart-item-meta .meta-ket {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    color: var(--text-muted);
}

/* JASA nested under its parent product: indent + connector elbow so the PO
   grouping is visible without reading the chip. The trunk runs under the
   parent's tile centre (x = 32px from the parent's outer edge). */
.cart-item-card.is-jasa-child {
    margin-left: 44px;
    background: linear-gradient(rgba(20, 184, 166, 0.04), rgba(20, 184, 166, 0.04)), var(--bg-card, #fff);
    border-color: rgba(20, 184, 166, 0.25);
}
.cart-item-card.jasa-link-up::before,
.cart-item-card.jasa-link-down::after {
    content: '';
    position: absolute;
    left: -14px;
    pointer-events: none;
    border-left: 2px solid rgba(20, 184, 166, 0.45);
}
.cart-item-card.jasa-link-up::before {
    top: -9px;               /* own border + 8px list gap = parent's bottom edge */
    width: 12px;
    height: 40px;            /* lands on the tile row when qty/price wrap */
    border-bottom: 2px solid rgba(20, 184, 166, 0.45);
    border-bottom-left-radius: 10px;
}
@container cart (min-width: 560px) {
    .cart-item-card.jasa-link-up::before {
        height: calc(50% + 8px);   /* single row: tile sits at the card's middle */
    }
}
.cart-item-card.jasa-link-down::after {
    top: 0;
    bottom: -9px;
}
@container cart (max-width: 420px) {
    .cart-item-card.is-jasa-child {
        margin-left: 28px;
    }
    .cart-item-card.jasa-link-up::before,
    .cart-item-card.jasa-link-down::after {
        left: -16px;
    }
    .cart-item-card.jasa-link-up::before {
        width: 14px;
    }
}

.cart-item-card.dragging {
    opacity: 0.4;
    border-style: dashed;
    box-shadow: none;
}
.cart-item-card.drag-over-top {
    border-color: var(--primary);
    box-shadow: 0 -3px 0 0 var(--primary);
}
.cart-item-card.drag-over-bottom {
    border-color: var(--primary);
    box-shadow: 0 3px 0 0 var(--primary);
}

/* Small labels inside a cart card */
.cart-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.cart-chip-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: #047857;
}
.cart-chip-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #B45309;
}
.cart-chip-info {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.22);
    color: #4338CA;
}
.cart-chip-pricetype {
    text-transform: capitalize;
}

/* JASA relation chip (attached / detached / orphan), inline in the meta row */
.cart-jasa-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-width: 0;
    padding: 1px 2px 1px 7px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.1);
    color: #0F766E;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.cart-jasa-link > i {
    font-size: 9.5px;
    flex-shrink: 0;
}
.cart-jasa-link-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-jasa-link-text strong {
    font-weight: 700;
}
.cart-jasa-link.is-detached {
    border-style: dashed;
    border-color: var(--border-color-hover);
    background: var(--bg-input);
    color: var(--text-secondary);
}
.cart-jasa-link.is-orphan {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
}
.btn-jasa-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 7px;
    border: none;
    border-radius: 4px;
    background: #fff;
    color: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
    transition: box-shadow 0.15s var(--ease-smooth), transform 0.15s var(--ease-smooth);
}
.btn-jasa-toggle i {
    font-size: 9.5px;
}
.btn-jasa-toggle:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
}
.btn-jasa-toggle:active {
    transform: scale(0.94);
}
.btn-jasa-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.cart-item-card .qty-stepper {
    grid-area: qty;
    justify-self: start;
}
.cart-item-prices {
    grid-area: price;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 124px;        /* fixed column so qty steppers line up across rows */
    text-align: right;
}
.cart-item-prices .price-subtotal {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
    transform-origin: right center;
}
.cart-item-prices .price-subtotal.is-zero {
    color: var(--text-secondary);
}
.cart-item-prices .price-unit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.cart-item-actions {
    grid-area: del;
    display: flex;
    align-items: center;
    gap: 2px;
}
.btn-icon-delete,
.btn-icon-unmerge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth),
                transform 0.15s var(--ease-smooth);
    flex-shrink: 0;
}
.cart-item-card:hover .btn-icon-delete,
.cart-item-card:hover .btn-icon-unmerge {
    color: var(--text-secondary);
}
.btn-icon-delete:hover,
.btn-icon-delete:focus-visible {
    background: var(--danger-soft);
    color: var(--danger) !important;
}
.btn-icon-unmerge:hover,
.btn-icon-unmerge:focus-visible {
    background: var(--warning-soft);
    color: #B45309 !important;
}
.btn-icon-delete:active,
.btn-icon-unmerge:active {
    transform: scale(0.9);
}
.btn-icon-delete:focus-visible,
.btn-icon-unmerge:focus-visible {
    outline: none;
    box-shadow: var(--polish-ring);
}

/* Undo snackbar after removing an item: dark so it reads as a transient
   overlay above the cards; the bottom bar shows the time left to undo. */
.cart-list-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Room under the last card so the bar never covers its qty stepper */
.cart-list-shell .cart-list {
    transition: padding-bottom 0.2s var(--ease-smooth);
}
.cart-list-shell:has(.cart-undo-bar.is-visible) .cart-list {
    padding-bottom: 64px;
}
.cart-undo-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 7px 7px 7px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-sidebar, #1E293B);
    color: #F8FAFC;
    font-size: 13px;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.45);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s var(--ease-smooth), transform 0.25s var(--ease-spring), visibility 0s linear 0.25s;
}
.cart-undo-bar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}
.cart-undo-bar > i {
    color: #94A3B8;
    font-size: 12px;
}
.cart-undo-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-undo-btn {
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #7DD3FC;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.cart-undo-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.cart-undo-btn:focus-visible {
    outline: 2px solid #7DD3FC;
    outline-offset: 2px;
}
.cart-undo-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #38BDF8;
    transform-origin: left center;
    transform: scaleX(0);
}
.cart-undo-bar.is-visible .cart-undo-progress {
    animation: cartUndoCountdown var(--undo-ms, 6s) linear forwards;
}
@keyframes cartUndoCountdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* --- Qty Stepper --- */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-input);
    border-radius: var(--radius-pill);
    padding: 3px 5px;
    border: 1px solid var(--border-color);
    min-height: 44px;
    box-sizing: border-box;
    flex-wrap: nowrap;
}
.qty-stepper button,
.qty-stepper .qty-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s var(--ease-smooth);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    padding: 0 !important;
}
.qty-stepper button:hover:not(:disabled),
.qty-stepper .qty-step:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
}
.qty-stepper button:active:not(:disabled),
.qty-stepper .qty-step:active:not(:disabled) { transform: scale(0.92); }
.qty-stepper button:disabled,
.qty-stepper .qty-step:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.qty-stepper .form-control,
.qty-stepper .qty-input,
.qty-stepper input {
    flex: 1;
    min-width: 28px;
    width: 38px;
    text-align: center;
    border: none !important;
    background: transparent !important;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main) !important;
    padding: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}
.qty-stepper .form-control::-webkit-outer-spin-button,
.qty-stepper .form-control::-webkit-inner-spin-button,
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button,
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-stepper .form-control:focus,
.qty-stepper .qty-input:focus,
.qty-stepper input:focus { outline: none; box-shadow: none !important; }

.cart-item-card .qty-stepper {
    min-height: 30px;
    padding: 2px;
}
.cart-item-card .qty-stepper button {
    width: 26px;
    height: 26px;
    font-size: 10px;
}
.cart-item-card .qty-stepper .qty-input {
    width: 34px;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

/* --- Quick Amount Buttons --- */
.quick-amount-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.quick-amount-btn {
    padding: 8px 4px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s var(--ease-smooth);
    text-align: center;
    line-height: 1.2;
}
.quick-amount-btn small {
    display: block;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
}
.quick-amount-btn:hover {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.2);
}
.quick-amount-btn:hover small { color: rgba(255,255,255,0.8); }
.quick-amount-btn:active { transform: scale(0.97); }

/* --- Help button (top-right floating) --- */
.help-fab {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
    cursor: pointer;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s var(--ease-smooth);
}
.help-fab:hover {
    background: var(--primary-dark);
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.5);
}

/* --- Help Modal Table --- */
.help-table {
    font-size: 13px;
    margin: 0;
}
.help-table .help-category {
    background: var(--bg-input);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 8px 12px;
}
.help-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
}
.help-table kbd,
.pos-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 10.5px;
    font-family: var(--font-numeric);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-bottom: 2px solid #94a3b8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-transform: uppercase;
    vertical-align: middle;
}

.help-table kbd {
    margin-right: 4px;
}

/* Inverted / translucent variant (e.g. inside primary buttons) */
.btn-primary .pos-kbd,
.btn .pos-kbd.bg-white,
.pos-kbd.bg-white {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pos-kbd.border-0 {
    border: none !important;
    box-shadow: none !important;
}

/* --- Result-item keyboard nav highlight --- */
.result-item.active,
.result-item.active:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    transform: translateX(4px);
}
.result-item.active .fw-bold { color: var(--primary-dark); }

/* --- Active focus ring for inputs in POS --- */
.pos-layout .form-control:focus,
.pos-layout .form-select:focus {
    box-shadow: 0 0 0 4px var(--primary-soft), 0 0 0 1px var(--primary);
}

/* --- Sticky bottom action bar --- */
/* --- Floating bottom action bar --- */
.pos-action-bar {
    position: sticky;
    bottom: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 9999px;
    padding: 8px 14px !important;
    margin: 16px 0 4px 0 !important;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pos-action-bar:hover {
    box-shadow: 0 14px 30px -4px rgba(15, 23, 42, 0.12), 0 6px 12px -2px rgba(15, 23, 42, 0.06);
    border-color: rgba(203, 213, 225, 0.95);
}

.pos-action-bar-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pos-action-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Compact button base inside action bar - full rounded pill */
.pos-action-bar .btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.pos-action-bar .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
}
.pos-action-bar .btn:active {
    transform: translateY(0) scale(0.98);
}

/* Reset button: sleek pill outline with subtle danger hover & icon rotation */
.pos-action-bar #btnReset {
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px !important;
}
.pos-action-bar #btnReset:hover {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.16);
}
.pos-action-bar #btnReset i {
    transition: transform 0.25s ease;
}
.pos-action-bar #btnReset:hover i {
    transform: rotate(-90deg);
}

/* Draft Segmented Control: unified pill capsule */
.pos-draft-group {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 3px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    gap: 2px;
}
.pos-draft-group .btn {
    border: none !important;
    border-radius: 9999px !important;
    color: #475569;
    background: transparent !important;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none !important;
    transform: none !important;
}
.pos-draft-group .btn:not(:last-child) {
    border-right: none !important;
}
.pos-draft-group .btn:hover {
    background: #ffffff !important;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-1px) !important;
}
.pos-draft-group .btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* --- Modal Draft List & Cards --- */
.draft-list-container {
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overscroll-behavior: contain;
    padding-bottom: 24px !important;
}
.draft-list-container::-webkit-scrollbar {
    width: 6px;
}
.draft-list-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.draft-list-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.draft-list-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.draft-item-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}
.draft-item-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }



/* Preview Nota: soft, intentional blue tint pill */
.pos-action-bar #btnPreviewNota {
    color: #0284c7;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 9999px !important;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08);
}
.pos-action-bar #btnPreviewNota:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0369a1;
    border-color: #7dd3fc;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.2);
}
.pos-action-bar #btnPreviewNota i {
    transition: transform 0.2s ease;
}
.pos-action-bar #btnPreviewNota:hover i {
    transform: scale(1.15);
}

/* Cetak Draft: soft teal tint pill when unhidden */
.pos-action-bar #btnCetakDraft {
    color: #0d9488;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 9999px !important;
    font-size: 12.5px;
    font-weight: 600;
}
.pos-action-bar #btnCetakDraft:hover {
    background: #ccfbf1;
    color: #0f766e;
    border-color: #5eead4;
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.2);
}

/* Selesai Transaksi: Primary Hero CTA with elevation and full rounded pill */
.pos-action-bar #btnSimpan {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: none !important;
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 22px !important;
    border-radius: 9999px !important;
    box-shadow: 0 6px 18px -2px rgba(14, 165, 233, 0.42), 0 2px 6px rgba(14, 165, 233, 0.2) !important;
    letter-spacing: 0.2px;
}
.pos-action-bar #btnSimpan:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    box-shadow: 0 8px 24px -2px rgba(14, 165, 233, 0.55), 0 4px 10px rgba(14, 165, 233, 0.28) !important;
    transform: translateY(-2px) scale(1.02);
}
.pos-action-bar #btnSimpan:active {
    transform: translateY(0) scale(0.99);
}
.pos-action-bar #btnSimpan i {
    transition: transform 0.25s ease;
}
.pos-action-bar #btnSimpan:hover i {
    transform: scale(1.18);
}

/* Selesai Transaksi Ready State (Pulse Animation) */
@keyframes finishPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.65), 0 6px 18px -2px rgba(14, 165, 233, 0.42);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(14, 165, 233, 0), 0 8px 24px -2px rgba(14, 165, 233, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0), 0 6px 18px -2px rgba(14, 165, 233, 0.42);
    }
}

.btn-finish-ready,
#btnSimpan.btn-finish-ready {
    animation: finishPulse 1.8s infinite !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    transform: translateY(-1px);
    border-radius: 9999px !important;
    border-color: transparent !important;
}

@media (max-width: 768px) {
    .pos-action-bar {
        border-radius: 20px;
        padding: 10px 12px !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .pos-action-bar-right {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   POS PAYMENT UX v2 — Kasir-Oriented Layout
   Compact trio, large displays, breakdown, DP mode badge
============================================================ */

/* --- Total Card with Breakdown --- */
.pos-total-card {
    background: linear-gradient(135deg, #fff 0%, rgba(14, 165, 233, 0.03) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.06);
}
.pos-total-breakdown {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pos-total-breakdown:empty {
    display: none;
}
.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}
.breakdown-row .breakdown-label {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px;
}
.breakdown-row .breakdown-value {
    font-weight: 600;
    color: var(--text-main);
}
.breakdown-row.breakdown-discount .breakdown-value {
    color: var(--warning);
    font-weight: 700;
}
.pos-total-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.pos-total-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--text-muted);
}
.pos-total-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

/* --- DP Mode Badge --- */
.dp-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--warning);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 10px rgba(251, 146, 60, 0.35);
    animation: fadeInScale 0.3s var(--ease-smooth);
}
.dp-mode-badge i { font-size: 11px; }
.dp-mode-badge strong { font-weight: 800; }

/* --- Payment Trio (compact horizontal) --- */
.payment-trio {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}
.payment-trio-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.payment-trio-input {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.2s ease;
}
.payment-trio-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.payment-trio-field.payment-amount {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
    width: 100%;
}
.payment-trio-field.payment-amount:focus {
    outline: none;
    box-shadow: none;
    background: transparent;
}
.payment-trio-display {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.payment-trio-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}
.payment-trio-change::before { background: var(--success); }
.payment-trio-remaining::before { background: var(--danger); }
.payment-trio-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.3px;
    color: var(--text-muted);
    margin-top: 2px;
    transition: all 0.2s var(--ease-smooth);
}
.payment-trio-value.has-value {
    transform: scale(1.02);
}
.payment-trio-change .payment-trio-value.has-value {
    color: var(--success);
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}
.payment-trio-remaining .payment-trio-value.has-value {
    color: var(--danger);
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.2);
}

/* Kembalian Celebration & Uang Pas States */
.payment-trio-change.is-exact {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, #ffffff 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.28) !important;
    transition: all 0.3s var(--ease-smooth);
}
.payment-trio-change.is-exact::before {
    background: #10b981 !important;
    width: 6px !important;
}
.payment-trio-change.is-lunas {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, #ffffff 100%);
    border-color: rgba(16, 185, 129, 0.45);
    transition: all 0.3s var(--ease-smooth);
}
.badge-uang-pas {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    letter-spacing: 0.3px;
    animation: bounceScaleIn 0.35s var(--ease-spring);
}
@keyframes bounceScaleIn {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    60% {
        transform: scale(1.12);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

/* --- Quick Amount Grid (compact under bayar) --- */
.payment-trio-input .quick-amount-grid {
    grid-template-columns: repeat(6, 1fr);
    margin-top: 8px;
    gap: 4px;
}
.payment-trio-input .quick-amount-btn {
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.payment-trio-input .quick-amount-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(14, 165, 233, 0.2);
}

/* --- Payment Method Compact --- */
.payment-method-compact {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.payment-method-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.payment-method-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.payment-method-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    position: relative;
}
.payment-method-tile i {
    font-size: 16px;
    color: var(--text-muted);
    transition: color 0.18s var(--ease-smooth);
}
.payment-method-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.payment-method-tile:hover {
    border-color: #38bdf8;
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.1);
}
.payment-method-tile:hover i { color: var(--primary); }
.payment-method-tile.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.payment-method-tile.active i { color: var(--primary); }

/* --- Tunai (Cash): Emerald / Green --- */
.payment-method-tile.tile-tunai:hover {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.04);
}
.payment-method-tile.tile-tunai:hover i {
    color: #10B981;
}
.payment-method-tile.tile-tunai.active {
    border-color: #059669;
    background: rgba(16, 185, 129, 0.14);
    color: #065F46;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    font-weight: 700;
}
.payment-method-tile.tile-tunai.active i {
    color: #059669;
    transform: scale(1.15);
}

/* --- Transfer (Bank): Ocean Blue --- */
.payment-method-tile.tile-transfer:hover {
    border-color: #0284C7;
    background: rgba(14, 165, 233, 0.04);
}
.payment-method-tile.tile-transfer:hover i {
    color: #0284C7;
}
.payment-method-tile.tile-transfer.active {
    border-color: #0284C7;
    background: rgba(14, 165, 233, 0.14);
    color: #0369A1;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
    font-weight: 700;
}
.payment-method-tile.tile-transfer.active i {
    color: #0284C7;
    transform: scale(1.15);
}

/* --- QRIS: Violet / Purple --- */
.payment-method-tile.tile-qris:hover {
    border-color: #6366F1;
    background: rgba(99, 102, 241, 0.04);
}
.payment-method-tile.tile-qris:hover i {
    color: #6366F1;
}
.payment-method-tile.tile-qris.active {
    border-color: #6366F1;
    background: rgba(124, 58, 237, 0.14);
    color: #5B21B6;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
    font-weight: 700;
}
.payment-method-tile.tile-qris.active i {
    color: #6366F1;
    transform: scale(1.15);
}

/* --- Compact deadline+diskon row --- */
.form-control-sm[type="datetime-local"] {
    padding: 4px 8px;
    height: auto;
    line-height: 1.4;
}

/* --- Mobile fallback: stack payment trio --- */
@media (max-width: 991px) {
    .payment-trio {
        grid-template-columns: 1fr;
    }
    .payment-trio-display {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .payment-trio-value { font-size: 18px; }
}

/* --- Anchored SweetAlert Popover for Payment Confirmation --- */
.swal2-container.swal-anchored-container {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(15, 23, 42, 0.22) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 1060 !important;
}

.swal2-container.swal-anchored-container .swal2-popup.swal-compact-payment {
    position: absolute !important;
    margin: 0 !important;
    padding: 16px 18px 14px !important;
    min-width: 0 !important;
    max-width: 310px !important;
    width: 310px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
    transform-origin: var(--arrow-x, 50%) bottom;
    pointer-events: auto !important;
}

.swal2-container.swal-anchored-container .swal2-popup.swal-compact-payment.swal-popover-in {
    animation: swalPopoverIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.swal2-container.swal-anchored-container .swal2-popup.swal-compact-payment[data-placement="bottom"] {
    transform-origin: var(--arrow-x, 50%) top;
}

@keyframes swalPopoverIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Close Button in Compact Popover */
.swal2-popup.swal-compact-payment .swal2-close,
.swal2-popup.swal-compact-payment .swal-compact-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 18px !important;
    line-height: 26px !important;
    color: #94a3b8 !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    padding: 0 !important;
}

.swal2-popup.swal-compact-payment .swal2-close:hover,
.swal2-popup.swal-compact-payment .swal-compact-close:hover {
    color: #ef4444 !important;
    background: #fee2e2 !important;
    transform: scale(1.08) !important;
}

/* Arrow pointer to target payment tile */
.swal2-container.swal-anchored-container .swal2-popup.swal-compact-payment::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: var(--arrow-x, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffff;
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.1));
    pointer-events: none;
}

.swal2-container.swal-anchored-container .swal2-popup.swal-compact-payment[data-placement="bottom"]::after {
    bottom: auto;
    top: -7px;
    border-top: none;
    border-bottom: 8px solid #ffffff;
    filter: drop-shadow(0 -2px 2px rgba(15, 23, 42, 0.1));
}

.swal2-popup.swal-compact-payment .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
}

.swal2-popup.swal-compact-payment .swal2-actions {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 0 !important;
}

.swal2-popup.swal-compact-payment .swal-btn {
    flex: 1 1 50% !important;
    padding: 8px 10px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   POLISH: TABLE ENHANCEMENTS
   ============================================================ */

/* Table: better first column styling */
.table tbody td:first-child {
    font-weight: 600;
    color: var(--text-heading);
}

/* Table row hover tint consolidated */

/* Table: action column text muted */
.table td:last-child {
    color: var(--text-muted);
}

/* Table: striped rows subtle tint */
.table tbody tr:nth-child(odd) td {
    background: rgba(248, 250, 252, 0.5);
}

/* Table header sticky styling consolidated into primary definition */

/* Table: bottom border on last row */
.table tbody tr:last-child td {
    border-bottom: 2px solid var(--border-color);
}

/* DataTables: better pagination styling */
.dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
}

.dataTables_paginate .paginate_button:hover {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* DataTables: filter input styling */
.dataTables_filter input {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    background: var(--bg-input);
    transition: all 0.2s;
}

.dataTables_filter input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px var(--primary-soft);
    outline: none;
}

/* DataTables: length select styling */
.dataTables_length select {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    background: var(--bg-input);
}

/* Button small refinement & prevent text wrapping in action bars */
.btn-sm {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

/* DataTables: footer controls layout */
.dataTables_wrapper .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    margin-bottom: 0;
}
.dataTables_wrapper .dataTables_length select {
    padding: 4px 28px 4px 10px;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color, #e2e8f0);
    background-color: #ffffff;
    color: var(--text-main, #334155);
}
.dataTables_wrapper .dataTables_info {
    padding: 0 !important;
    font-size: 0.8125rem !important;
    color: var(--text-secondary, #64748b) !important;
    margin-bottom: 0;
}
.dataTables_wrapper .dataTables_paginate {
    padding: 0 !important;
    margin-bottom: 0;
}
/* ============================================================
   POLISH: SIDEBAR ENHANCEMENTS
   ============================================================ */

/* Submenu hover & active handled in primary navigation section */

/* Collapsed sidebar: submenu flyout improved shadow */
#sidebar.collapsed .submenu {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

/* Menu group: slight indent for grouped sections */
.menu-group {
    margin-bottom: 4px;
}

/* Active menu item accent handled in primary definition with inset box-shadow */

/* Menu item stagger entrance animation */
.sidebar-menu .menu-item {
    opacity: 0;
    animation: menuItemFadeIn 0.3s var(--ease-smooth) forwards;
}

@keyframes menuItemFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.sidebar-menu .menu-item:nth-child(1) { animation-delay: 0.02s; }
.sidebar-menu .menu-item:nth-child(2) { animation-delay: 0.04s; }
.sidebar-menu .menu-item:nth-child(3) { animation-delay: 0.06s; }
.sidebar-menu .menu-item:nth-child(4) { animation-delay: 0.08s; }
.sidebar-menu .menu-item:nth-child(5) { animation-delay: 0.10s; }
.sidebar-menu .menu-item:nth-child(6) { animation-delay: 0.12s; }
.sidebar-menu .menu-item:nth-child(7) { animation-delay: 0.14s; }
.sidebar-menu .menu-item:nth-child(8) { animation-delay: 0.16s; }
.sidebar-menu .menu-item:nth-child(9) { animation-delay: 0.18s; }
.sidebar-menu .menu-item:nth-child(10) { animation-delay: 0.20s; }
.sidebar-menu .menu-item:nth-child(n+11) { animation-delay: 0.22s; }

/* ============================================================
   POLISH: FORM & INPUT ENHANCEMENTS
   ============================================================ */

/* Form input height consolidated into primary declaration */

/* Form: placeholder styling */
.form-control::placeholder {
    color: var(--text-placeholder);
    opacity: 0.7;
}

/* Form: textarea auto-grow hint */
textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Form: error state with coral border */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23EF4444' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 4a.75.75 0 1 0 0 1.5A.75.75 0 0 0 8 6zm0 4a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Form: success state */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success);
}

/* Form: inline checkbox/radio better spacing */
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Form: select arrow styling */
.form-select {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M4.427 6.427a.75.75 0 0 1 1.06 0L8 9.193l2.513-2.766a.75.75 0 1 1 1.074 1.026l-3 3.27a.75.75 0 0 1-1.074 0l-3-3.27a.75.75 0 0 1 0-1.026z'/%3E%3C/svg%3E") right 0.75rem center / 16px 12px no-repeat;
    background-color: var(--bg-input);
}

/* ============================================================
   CUSTOM SELECT COMPONENT
   ============================================================ */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
    font-family: inherit;
}
.custom-select-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
    background: var(--bg-input);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    min-height: 44px;
}
.custom-select-trigger:hover {
    border-color: var(--border-color-hover);
    background: #fff;
}
.custom-select-wrapper.open {
    z-index: 1050;
    position: relative;
}
.custom-select-wrapper.custom-select-sm .custom-select-trigger {
    min-height: 34px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}
.custom-select-wrapper.disabled .custom-select-trigger {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--bg-card);
}
.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 4px var(--primary-soft);
    background: #fff;
}
.custom-select-value-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 15px;
}
.custom-select-value-text.is-placeholder {
    color: var(--text-placeholder, #94a3b8) !important;
    font-weight: 400;
}
.custom-select-arrow {
    position: relative;
    height: 12px;
    width: 12px;
    flex-shrink: 0;
}
.custom-select-arrow::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--text-muted);
    border-right: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: all var(--transition-fast);
}
.custom-select-wrapper.open .custom-select-arrow::after {
    transform: rotate(225deg);
    top: 4px;
    border-color: var(--primary);
}
.custom-options {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    background: #fff;
    transition: all var(--transition-fast);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    z-index: 1060;
    margin-top: 5px;
    max-height: 250px;
    overflow-y: auto;
}
.custom-select-wrapper.open .custom-options {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}
.custom-option {
    position: relative;
    display: block;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-main);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-color-light);
}
.custom-option:last-child {
    border-bottom: none;
}
.custom-option:hover {
    background-color: var(--primary-soft);
    color: var(--primary-dark);
    padding-left: 1.2rem;
}
.custom-option.selected {
    color: #fff;
    background-color: var(--primary);
    font-weight: 600;
}
.custom-options::-webkit-scrollbar { width: 6px; }
.custom-options::-webkit-scrollbar-track { background: var(--border-color-light); border-radius: 4px; }
.custom-options::-webkit-scrollbar-thumb { background: var(--border-color-hover); border-radius: 4px; }
.custom-options::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================================
   POLISH: MODAL ENHANCEMENTS
   ============================================================ */

/* Modal header & footer borders consolidated into primary modal block */

/* Modal: icon row in modal body */
.modal-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

/* Modal: backdrop blur intensity */
.modal-backdrop.show {
    opacity: 0.4;
}

/* ============================================================
   POLISH: DASHBOARD & CARD ENHANCEMENTS
   ============================================================ */

/* Stat card: better icon alignment */
.stat-card .stat-decor-icon {
    opacity: 0.08;
}

/* KPI card: number animation hint */
.kpi-card .kpi-value,
.kpi-card .kpi-val {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

/* Card: entrance animation */
.card {
    animation: cardFadeIn 0.4s var(--ease-smooth) forwards;
    opacity: 0;
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Card: delay for grid children */
.row .col-md-3:nth-child(1) .card,
.row .col-md-4:nth-child(1) .card,
.row .col-6:nth-child(1) .card { animation-delay: 0.05s; }
.row .col-md-3:nth-child(2) .card,
.row .col-md-4:nth-child(2) .card,
.row .col-6:nth-child(2) .card { animation-delay: 0.10s; }
.row .col-md-3:nth-child(3) .card,
.row .col-md-4:nth-child(3) .card,
.row .col-6:nth-child(3) .card { animation-delay: 0.15s; }
.row .col-md-3:nth-child(4) .card,
.row .col-md-4:nth-child(4) .card,
.row .col-6:nth-child(4) .card { animation-delay: 0.20s; }

/* ============================================================
   POLISH: EMPTY STATE & FEEDBACK ENHANCEMENTS
   ============================================================ */

/* Empty state: centered illustration area */
.empty-state-wrap {
    text-align: center;
    padding: 48px 24px;
}

.empty-state-wrap i {
    font-size: 3rem;
    color: var(--border-color-hover);
    margin-bottom: 16px;
    display: block;
}

.empty-state-wrap h5 {
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.empty-state-wrap p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Loading spinner: primary accent */
.spinner-primary {
    color: var(--primary);
}

/* Toast: primary accent */
.toast-primary {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(2, 132, 199, 0.95));
    color: white;
}

/* ============================================================
   POLISH: TYPOGRAPHY POLISH
   Headings & Bold: Nunito
   Body & Normal  : Inter
   Numbers & Digits: Iosevka Charon Mono
   ============================================================ */

/* Headings: Nunito with clean line height */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    line-height: 1.3;
    color: var(--text-heading);
}

/* Bold / heavy elements use Nunito */
th,
b, strong,
.fw-bold, .fw-bolder, .fw-semibold,
.card-title,
.modal-title,
.offcanvas-title,
.dash-section-title,
.sidebar-section-label,
.brand,
.brand-title,
.btn,
.swal2-title,
.swal-title,
.swal2-toast-title,
.section-title,
.page-title,
.main-card-title,
.filter-label,
.label-bold {
    font-family: var(--font-heading);
}

/* Standardized Numbers & Tabular Figures in Iosevka Charon Mono */
.font-numeric,
.font-mono,
.font-monospace,
.stat-value,
.stat-number,
.metric-value,
.metric-val,
.kpi-value,
.kpi-val,
.price,
.harga,
.amount,
.amount-btn,
.total,
.total-value,
.pos-total-value,
.breakdown-value,
.cart-total,
.calc-display,
.total-display,
.invoice-no,
.invoice-number,
.invoice-num,
.nomor-struk,
.table-num,
.col-num,
.payment-trio-value,
.payment-trio-field,
.qty-badge,
.badge-num,
.stock-count,
.summary-value,
[data-format="currency"],
.format-rupiah,
.currency,
.rp,
input[type="number"],
input[inputmode="numeric"],
code, kbd, samp, pre,
.preview-text-wrapper,
.preview-container,
.preview-po {
    font-family: var(--font-numeric) !important;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Ensure right-aligned table cells align tabular numbers */
td.text-end, th.text-end {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Table cells explicitly marked or carrying monospace numbers */
td.text-end.font-monospace,
th.text-end.font-monospace,
.dataTables_wrapper td.text-end {
    font-family: var(--font-numeric);
}

/* Link: primary tint on hover */
a {
    color: var(--primary);
    transition: color 0.2s;
}

a:hover {
    color: var(--primary-dark);
}

/* Code/mono: better background */
code {
    font-family: var(--font-numeric) !important;
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: 0.875em;
    color: var(--primary-dark);
}

/* ============================================================
   TRANSAKSI & HUTANG FILTER BAR REVAMP
   Segmented pills, unified search, compact filters
   ============================================================ */
.segmented-pill-group {
    display: inline-flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid var(--border-color, #e2e8f0);
    position: relative;
    user-select: none;
}

.segmented-pill-group .btn-check + .btn {
    border: none !important;
    border-radius: var(--radius-pill, 9999px) !important;
    padding: 7px 18px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.segmented-pill-group .btn-check:checked + .btn {
    background: var(--primary, #0ea5e9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}

.segmented-pill-group .btn-check + .btn:hover:not(:checked) {
    color: #1e293b !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

.search-input-wrapper {
    position: relative;
    transition: all 0.2s ease;
}

.search-input-wrapper .form-control {
    background-color: #f8fafc;
    border: 1px solid var(--border-color, #e2e8f0);
    color: #1e293b;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.search-input-wrapper .form-control:focus {
    background-color: #ffffff;
    border-color: var(--primary, #0ea5e9);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.search-input-wrapper #btnClearSearch {
    color: #94a3b8;
    transition: color 0.15s ease;
}

.search-input-wrapper #btnClearSearch:hover {
    color: #ef4444;
}

#transaksiDaterange {
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    transition: all 0.2s ease;
}

#transaksiDaterange:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1 !important;
}

#transaksiDaterange:focus,
#transaksiDaterange.is-open {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
    border-color: var(--primary, #0ea5e9) !important;
}

/* ============================================================
   ARTIVITY THEMED DATERANGEPICKER COMPONENT
   ============================================================ */
.daterangepicker {
    font-family: inherit !important;
    border-radius: var(--radius-lg, 16px) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.14), 0 8px 16px -4px rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin-top: 8px !important;
    z-index: 2050 !important;
    overflow: visible !important;
    animation: drpFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drpFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Arrow indicators */
.daterangepicker:before {
    top: -8px !important;
    border-right: 8px solid transparent !important;
    border-left: 8px solid transparent !important;
    border-bottom: 8px solid var(--border-color, #e2e8f0) !important;
}

.daterangepicker:after {
    top: -7px !important;
    border-right: 7px solid transparent !important;
    border-left: 7px solid transparent !important;
    border-bottom: 7px solid #ffffff !important;
}

.daterangepicker.opensleft:before {
    right: 28px !important;
}

.daterangepicker.opensleft:after {
    right: 29px !important;
}

/* Left sidebar: Preset Ranges */
.daterangepicker .ranges {
    padding: 10px 8px !important;
    background-color: #f8fafc !important;
    border-right: 1px solid var(--border-color-light, #f1f5f9) !important;
    border-top-left-radius: 16px !important;
    margin: 0 !important;
}

.daterangepicker .ranges ul {
    width: 160px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.daterangepicker .ranges li {
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
}

.daterangepicker .ranges li:hover {
    background-color: rgba(14, 165, 233, 0.08) !important;
    color: var(--primary-dark, #0284c7) !important;
    padding-left: 15px !important;
}

.daterangepicker .ranges li.active {
    background-color: var(--primary, #0ea5e9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}

/* Calendar bodies */
.daterangepicker .drp-calendar {
    padding: 14px 16px !important;
    max-width: 290px !important;
}

.daterangepicker .drp-calendar.left {
    padding: 14px 10px 14px 16px !important;
}

.daterangepicker .drp-calendar.right {
    padding: 14px 16px 14px 10px !important;
}

.daterangepicker .calendar-table {
    background: transparent !important;
    border: none !important;
}

.daterangepicker .calendar-table table {
    border-spacing: 0 !important;
    border-collapse: separate !important;
    width: 100% !important;
}

/* Month and Year navigation */
.daterangepicker th.month {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 8px 0 !important;
}

.daterangepicker .calendar-table .next,
.daterangepicker .calendar-table .prev {
    vertical-align: middle !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.daterangepicker .calendar-table .next:hover,
.daterangepicker .calendar-table .prev:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: #64748b !important;
    border-width: 0 2px 2px 0 !important;
    padding: 3px !important;
}

/* Day of week headers */
.daterangepicker .calendar-table th {
    color: #94a3b8 !important;
    font-size: 0.725rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 0 !important;
}

/* Date cells */
.daterangepicker .calendar-table td {
    width: 34px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    border-radius: 6px !important;
    transition: all 0.12s ease !important;
    border: 1px solid transparent !important;
}

.daterangepicker td.available:hover {
    background-color: #f1f5f9 !important;
    color: var(--primary, #0ea5e9) !important;
    border-radius: 6px !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range {
    color: #cbd5e1 !important;
    background-color: transparent !important;
}

.daterangepicker td.in-range {
    background-color: rgba(14, 165, 233, 0.09) !important;
    color: #0284c7 !important;
    border-radius: 0 !important;
}

.daterangepicker td.start-date {
    border-radius: 8px 0 0 8px !important;
    background-color: var(--primary, #0ea5e9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3) !important;
}

.daterangepicker td.end-date {
    border-radius: 0 8px 8px 0 !important;
    background-color: var(--primary, #0ea5e9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3) !important;
}

.daterangepicker td.start-date.end-date {
    border-radius: 8px !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--primary, #0ea5e9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Footer: Bottom actions bar */
.daterangepicker .drp-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 10px 16px !important;
    border-top: 1px solid var(--border-color-light, #f1f5f9) !important;
    background-color: #f8fafc !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    gap: 8px !important;
}

.daterangepicker .drp-selected {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    padding: 0 !important;
    margin-right: auto !important;
}

.daterangepicker .drp-buttons .btn {
    margin: 0 !important;
    font-size: 0.8rem !important;
    padding: 6px 16px !important;
    border-radius: var(--radius-pill, 9999px) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.daterangepicker .drp-buttons .cancelBtn {
    background-color: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: #64748b !important;
    box-shadow: none !important;
}

.daterangepicker .drp-buttons .cancelBtn:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

.daterangepicker .drp-buttons .applyBtn {
    background-color: var(--primary, #0ea5e9) !important;
    border: 1px solid var(--primary, #0ea5e9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}

.daterangepicker .drp-buttons .applyBtn:hover {
    background-color: var(--primary-dark, #0284c7) !important;
    border-color: var(--primary-dark, #0284c7) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.45) !important;
    transform: translateY(-1px);
}

/* DateRange Button Trigger Micro-Interactions */
.btn-daterange {
    background-color: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
}

.btn-daterange:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.btn-daterange.is-open,
.btn-daterange:focus {
    border-color: var(--primary, #0ea5e9) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
    background-color: #ffffff !important;
}

.btn-daterange .fa-chevron-down {
    transition: transform 0.2s ease;
}

.btn-daterange.is-open .fa-chevron-down {
    transform: rotate(180deg);
    color: var(--primary, #0ea5e9) !important;
}

/* Reset button styling */
.btn-filter-reset {
    border: 1px solid var(--border-color, #e2e8f0) !important;
    background: #ffffff !important;
    color: #64748b !important;
    transition: all 0.2s ease !important;
}

.btn-filter-reset:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.btn-filter-reset:active {
    transform: scale(0.97);
}

.btn-filter-reset .fa-redo-alt {
    transition: transform 0.3s ease;
}

.btn-filter-reset:hover .fa-redo-alt {
    transform: rotate(-45deg);
}

/* CustomSelect pill rounded support */
.custom-select-wrapper.rounded-pill .custom-select-trigger {
    border-radius: var(--radius-pill, 9999px) !important;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    background-color: #f8fafc;
    border: 1px solid var(--border-color, #e2e8f0);
    min-height: 42px;
    font-size: 0.875rem;
}

.custom-select-wrapper.rounded-pill.open .custom-select-trigger {
    background-color: #ffffff;
    border-color: var(--primary, #0ea5e9);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}


/* --- 4. REUSABLE UI COMPONENTS (components) --- */
/* ============================================================
   ARTIVITY POS - Reusable Components
   Organized by category
============================================================ */

/* --- Action & Interaction Elements --- */
.table-actions-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    flex-wrap: nowrap;
}
.table-actions-wrap .btn-icon-action {
    flex-shrink: 0;
}
.btn-icon-action {
    width: 32px;
    height: 32px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-icon-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

/* --- Stat Card (Unified Gradient) --- */
.stat-card {
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 16px 20px;
    position: relative;
    color: #fff;
    transition: all var(--transition-slow);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
}
.stat-card .stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.stat-card .stat-value {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: #fff;
}
.stat-card .stat-unit {
    font-size: 0.82rem;
    font-weight: 400;
    opacity: 0.7;
}
.stat-card .stat-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    margin-top: 4px;
}
.stat-card .stat-decor-icon {
    position: absolute;
    bottom: -5px;
    right: 10px;
    font-size: 3.5rem;
    opacity: 0.1;
}
.stat-card .stat-badge {
    float: right;
}

/* Color gradients */
.stat-card--blue    { background: linear-gradient(135deg, #38BDF8, #0EA5E9); }
.stat-card--green   { background: linear-gradient(135deg, #10b981, #059669); }
.stat-card--amber   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-card--purple  { background: linear-gradient(135deg, #F28B74, #E8634A); }
.stat-card--red     { background: linear-gradient(135deg, #ef4444, #dc2626); }
.stat-card--primary { background: linear-gradient(135deg, #0EA5E9, #0284C7); }
.stat-card--success { background: linear-gradient(135deg, #10b981, #059669); }
.stat-card--danger  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.stat-card--warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-card--info    { background: linear-gradient(135deg, #06b6d4, #0891b2); }

.dots-pattern {
    background-image: radial-gradient(var(--border-color-hover) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* --- Tab Navigation --- */
.tab-group,.period-tabs,.view-tabs{display:flex;gap:8px;background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:6px;border:1px solid rgba(0,0,0,0.06)}
.tab-item,.period-tab,.view-tab{padding:10px 24px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--text-secondary);font-weight:600;font-size:0.9rem;cursor:pointer;transition:all var(--transition-slow)}
.tab-item:hover,.period-tab:hover,.view-tab:hover{background:var(--primary-soft);color:var(--primary)}
.tab-item.active,.period-tab.active,.view-tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 15px rgba(14, 165, 233, 0.3)}

/* --- KPI Cards --- */
.kpi-card{background:#fff;border:none;border-radius:var(--radius-xl);padding:16px 20px;overflow:hidden;transition:all var(--transition-slow);position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px}
.kpi-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.12)!important}
.kpi-card .kpi-icon{width:56px;height:56px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.kpi-card .kpi-value{font-size:1.75rem;font-weight:800;letter-spacing:-0.5px;line-height:1.2}
.kpi-card .kpi-label{font-size:0.82rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;opacity:0.7}
.kpi-card .kpi-sub{font-size:0.82rem;opacity:0.85}
.kpi-card .kpi-val{font-size:1.65rem;font-weight:800;letter-spacing:-0.5px}
.kpi-card .kpi-lbl{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;opacity:0.75}

/* --- Badges & Indicators --- */
.growth-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-pill);font-size:0.78rem;font-weight:700}
.growth-badge.up{background:rgba(25,135,84,0.12);color:#198754}
.growth-badge.down{background:rgba(220,53,69,0.12);color:#dc3545}
.growth-badge.neutral{background:rgba(108,117,125,0.12);color:#6c757d}
.growth-badge.on-dark.up{background:rgba(255,255,255,0.25);color:#fff}
.growth-badge.on-dark.down{background:rgba(220,53,69,0.2);color:#ffc9cf}
/* Legacy */
.growth-pill{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:var(--radius-pill);font-size:0.75rem;font-weight:700}
.growth-pill.up{background:rgba(255,255,255,0.25);color:#fff}
.growth-pill.down{background:rgba(220,53,69,0.2);color:#ffc9cf}

.rank-badge{width:28px;height:28px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:0.8rem}
.rank-1{background:linear-gradient(135deg,#ffd700,#ffb800);color:#7c5e00}
.rank-2{background:linear-gradient(135deg,#c0c0c0,#a8a8a8);color:#555}
.rank-3{background:linear-gradient(135deg,#cd7f32,#b87333);color:#fff}
.rank-default{background:#f0f0f0;color:#999}

/* Attendance Badge Colors */
.badge-shift1{background:#E6F1FB!important;color:#0C447C!important}
.badge-shift2{background:#EEEDFE!important;color:#3C3489!important}
.badge-shift3{background:#E1F5EE!important;color:#085041!important}
.badge-hadir{background:#EAF3DE!important;color:#27500A!important}
.badge-terlambat{background:#FAEEDA!important;color:#633806!important}
.badge-absen{background:#FCEBEB!important;color:#501313!important}
.bg-light-danger{background-color:rgba(226,75,74,0.08)!important}
.bg-light-warning{background-color:rgba(186,117,23,0.08)!important}

/* --- Filter Chips --- */
.filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.filter-chip{padding:8px 16px;border-radius:var(--radius-pill);border:1px solid rgba(0,0,0,0.1);background:white;color:var(--text-secondary);font-size:0.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-base)}
.filter-chip:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.filter-chip.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border-color:transparent}

/* --- Insight Card --- */
.insight-card{border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,0.06);padding:16px 20px;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);transition:all var(--transition-slow)}
.insight-card:hover{transform:translateX(4px);box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.insight-card.positive{border-left:4px solid var(--bs-success)}
.insight-card.warning{border-left:4px solid var(--bs-warning)}
.insight-card.danger{border-left:4px solid var(--bs-danger)}
.insight-card.info{border-left:4px solid var(--primary)}
.insight-card.neutral{border-left:4px solid var(--bs-secondary)}
.insight-icon{font-size:1.5rem}
.insight-title{font-weight:700;font-size:0.9rem;color:var(--text-heading)}
.insight-message{font-size:0.85rem;color:var(--text-secondary);margin:0;line-height:1.5}

/* --- Data Visualization --- */
.chart-container-fixed{position:relative;height:250px;width:100%}
.contrib-bar{height:6px;border-radius:6px;background:var(--bg-input);overflow:hidden;min-width:60px}
.contrib-bar-fill{height:100%;border-radius:6px;background:var(--gradient-analytics);transition:width 0.8s ease}
.cat-bar-wrap{display:flex;gap:4px;align-items:flex-end;height:40px}
.cat-bar{flex:1;min-width:8px;border-radius:4px 4px 0 0;transition:height 0.5s ease}
.sparkline-wrap{position:relative;height:60px}
.sparkline-wrap.tall{height:140px}

.legend-row{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;background:#f8fafc;border-top:1px solid #f1f5f9;}
.legend-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:12px 16px;flex-grow:1}
.legend-item{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:#475569;background:#fff;padding:6px 10px;border-radius:6px;border:1px solid #e2e8f0;transition:all 0.2s;cursor:help}
.legend-item:hover{border-color:#cbd5e1;box-shadow:0 2px 4px rgba(0,0,0,0.02)}
.legend-color{width:16px;height:16px;border-radius:4px;flex-shrink:0}
.legend-text{font-size:0.8rem;color:#64748b}
.legend-text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Timeline --- */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border-color)}
.timeline-item{position:relative;margin-bottom:20px}
.timeline-marker{position:absolute;left:-26px;top:0;width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--border-color)}
.timeline-content{padding-left:10px}

/* --- Avatar --- */
.avatar-circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.avatar-initials{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}

/* --- Slow Mover Item --- */
.slow-mover-item{padding:12px 16px;border-radius:var(--radius-md);background:rgba(255,193,7,0.06);border:1px solid rgba(255,193,7,0.15);transition:all var(--transition-base)}
.slow-mover-item:hover{background:rgba(255,193,7,0.12)}

/* --- Recap Tooltip --- */
.recap-day-cell{position:relative;display:inline-flex;align-items:center;justify-content:center}
.recap-badge{cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
.recap-badge:hover{transform:scale(1.15);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.recap-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:#2C2C2A;color:#fff;border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;line-height:1.6;white-space:nowrap;z-index:var(--z-tooltip);box-shadow:0 4px 16px rgba(0,0,0,0.2);pointer-events:none;opacity:0;transition:opacity var(--transition-base),transform var(--transition-base)}
.recap-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#2C2C2A}
.recap-day-cell:hover .recap-tooltip{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
.recap-tooltip-row{display:flex;align-items:center;gap:8px}
.recap-tooltip-row i{width:14px;text-align:center;opacity:0.6;font-size:10px}
.recap-tooltip-row span{opacity:0.7;min-width:42px}
.recap-tooltip-row b{font-weight:600;margin-left:auto}

/* --- Settings Card --- */
.settings-card{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.6);border-radius:var(--radius-xl);box-shadow:0 8px 32px rgba(0,0,0,0.06)}
.preview-panel{background:var(--bg-main);border-radius:var(--radius-lg);padding:24px;position:sticky;top:20px}
.preview-text-wrapper{background:#fff;border-radius:var(--radius-md);padding:16px;box-shadow:0 2px 12px rgba(0,0,0,0.08);font-family:var(--font-numeric, 'Iosevka Charon Mono', monospace);font-size:13px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;max-height:500px;overflow-y:auto}
.form-section{margin-bottom:24px}
.form-section-title{font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-secondary);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,0.06)}
.logo-preview-box{width:120px;height:80px;border:2px dashed var(--border-color);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;transition:all 0.3s ease}
.logo-preview-box:hover{border-color:var(--primary)}
.logo-preview-box img{max-width:100%;max-height:100%;object-fit:contain}

/* --- Schedule Grid --- */
.schedule-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}
.schedule-title{display:flex;align-items:center;gap:16px}
.icon-box-primary{background:#0EA5E9;color:white;width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.schedule-actions{display:flex;gap:12px}
.summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.schedule-toolbar{background:white;padding:16px 24px;border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,0.02);flex-wrap:wrap;gap:16px}
.btn-toggle-group{display:inline-flex;background:var(--bg-input);border-radius:var(--radius-sm);padding:4px}
.btn-toggle-group .btn{border:none;padding:6px 16px;font-size:0.875rem;color:var(--text-secondary);font-weight:500;border-radius:6px}
.btn-toggle-group .btn.active{background:white;color:var(--text-heading);box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.grid-card{background:white;border-radius:var(--radius-lg);box-shadow:0 4px 12px rgba(0,0,0,0.03);overflow:hidden}
.grid-header-tools{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border-color-light)}
.week-nav{display:flex;align-items:center;gap:8px}
.week-nav .btn{background:white;border:1px solid var(--border-color);color:var(--text-secondary);font-size:0.875rem;padding:6px 12px;border-radius:var(--radius-sm)}
.week-nav .btn:hover{background:var(--bg-main)}

/* Table Sticky Layout */
.table-schedule-wrap{max-height: none; overflow-x: auto; position: relative; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.03); background: #fff;}
.table-schedule{width:100%;border-collapse:separate;border-spacing:0;}
.table-schedule th, .table-schedule td{border-right:1px solid var(--border-color-light);border-bottom:1px solid var(--border-color-light); position: relative;}
.table-schedule th{padding:16px 8px;text-align:center;font-weight:500;font-size:0.875rem;color:var(--text-secondary);min-width:130px; position: sticky; top: 0; background: #fff; z-index: 10; box-shadow: 0 1px 0 #e2e8f0;}
.table-schedule th.today{background: rgba(14, 165, 233, 0.08);color:var(--primary);font-weight:600; border-bottom: 2px solid var(--primary);}
.table-schedule td.today-col{background-color: rgba(14, 165, 233, 0.03); border-left: 2px solid rgba(14, 165, 233, 0.2) !important; border-right: 2px solid rgba(14, 165, 233, 0.2) !important;}

.table-schedule th.employee-cell, .table-schedule td.employee-cell {
    position: sticky; left: 0; background: #fff; z-index: 11;
    border-right: 2px solid var(--border-color-light) !important;
}
.table-schedule th.employee-cell { z-index: 12; }

.employee-cell{padding:16px 24px;min-width:200px;text-align:left!important;}
.employee-name{font-size:0.95rem;font-weight:700;color:var(--text-heading);margin:0}
.employee-id{font-size:0.75rem;color:var(--text-muted);margin:0; margin-top:2px}
.shift-cell{padding:10px;text-align:center;vertical-align:top}
.shift-block{border-radius:var(--radius-md);padding:10px 12px;color:white;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:90px;cursor:pointer;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position:relative; box-shadow:0 2px 4px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05);}
.shift-block.single:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(0,0,0,0.12); z-index:5; border-color: rgba(255,255,255,0.4);}

/* Visual Merge Grouping */
.shift-block.group-start {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    margin-right: -11px;
    padding-right: 15px;
    z-index: 2;
}
.shift-block.group-middle {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-left: -11px;
    margin-right: -11px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 2;
}
.shift-block.group-end {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
    margin-left: -11px;
    padding-left: 15px;
    z-index: 2;
}

/* Hover Sync for Groups */
.shift-block.hover-synced {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(0,0,0,0.2) !important;
    filter: brightness(1.05);
    z-index: 5;
    border-color: rgba(255,255,255,0.3) !important;
}

.shift-name{font-size:0.85rem;font-weight:700;line-height:1.2; text-shadow:0 1px 2px rgba(0,0,0,0.15); letter-spacing: 0.5px;}
.shift-time{font-size:0.7rem;opacity:0.9;margin-top:4px;display:flex;align-items:center;gap:4px;}
.shift-duration{font-size:0.65rem; font-weight:700;}

/* Holiday Block */
.holiday-block {
    border: 1px solid #e2e8f0;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-radius: var(--radius-md);
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.holiday-block .holiday-content {
    transition: opacity 0.2s, transform 0.2s;
}
.holiday-block .empty-block-text {
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1px;
    font-size: 0.75rem;
}
.holiday-block .holiday-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    opacity: 0;
    color: var(--primary);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.holiday-block:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
    background: #fff;
    transform: translateY(-2px);
}
.holiday-block:hover .holiday-content {
    opacity: 0;
    transform: translateY(-10px);
}
.holiday-block:hover .holiday-hover {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.summary-cell{background:#f8fafc; border-left:2px solid var(--border-color-light)!important; text-align:center; vertical-align:middle;}
.table-schedule th.summary-cell{position:sticky; right:0; z-index:11;}
.table-schedule td.summary-cell{position:sticky; right:0; z-index:10; background:#f8fafc;}


/* --- Animations --- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp 0.5s ease forwards;opacity:0}
.fade-up{animation:fadeInUp 0.5s ease forwards;opacity:0}

/* --- Detail Modal (Attendance) --- */
.detail-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-info-item{display:flex;flex-direction:column;gap:2px}
.detail-info-item .label{font-size:11px;color:#5F5E5A;text-transform:uppercase;font-weight:500}
.detail-info-item .value{font-size:14px;font-weight:600;color:#2C2C2A}
.detail-photo-card{background:#F1EFE8;border-radius:10px;padding:12px;text-align:center}
.detail-photo-card img{max-height:200px;max-width:100%;border-radius:var(--radius-sm);object-fit:cover;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease}
.detail-photo-card img:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.detail-photo-placeholder{color:#888780;padding:30px 0;font-size:13px}
.detail-photo-placeholder i{font-size:28px;display:block;margin-bottom:8px;opacity:0.4}
.btn-detail{border-radius:6px;padding:4px 10px;transition:all 0.15s ease}
.btn-detail:hover{transform:scale(1.05)}
.detail-modal-header{display:flex;align-items:center;gap:12px}
.detail-modal-header .avatar-initials{width:36px;height:36px;font-size:14px}

/* --- Dashboard Extras --- */
.qi-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-md);font-size:0.82rem;font-weight:600;background:rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.05);transition:all 0.2s ease}
.qi-badge:hover{background:rgba(14, 165, 233, 0.06)}
.analytics-link{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--radius-lg);background:var(--gradient-analytics);color:#fff;text-decoration:none;transition:all 0.3s ease;box-shadow:0 6px 24px rgba(14, 165, 233, 0.25)}
.analytics-link:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(14, 165, 233, 0.35);color:#fff}
.pm-pill{padding:6px 12px;border-radius:10px;font-size:0.78rem;font-weight:600;background:rgba(0,0,0,0.04);display:inline-flex;align-items:center;gap:6px}
.dash-section-title{font-size:1rem;font-weight:700;color:var(--text-heading);margin-bottom:16px}
.recent-row:hover{background:rgba(14, 165, 233, 0.03)}

/* --- View Content Toggle --- */
.view-content{display:none}
.view-content.active{display:block}

/* --- Skeleton Loading --- */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:80px}
.skeleton-chart{height:250px}
.skeleton-row{height:50px;margin-bottom:8px}

/* --- Form Controls: Radio Buttons --- */
.premium-radio-group{display:flex;flex-direction:column;gap:0.5rem;width:100%;margin-bottom:1.5rem}
.premium-radio-label{display:block;margin-bottom:0.5rem;font-size:0.75rem;font-weight:700;text-transform:uppercase;color:#6c757d;letter-spacing:0.5px}
.premium-radio-options{display:flex;background:#f1f3f5;padding:0.4rem;border-radius:12px;gap:0.25rem;box-shadow:inset 0 2px 4px rgba(0,0,0,0.05)}
.premium-radio-item{flex:1;position:relative}
.premium-radio-item input{position:absolute;opacity:0;width:0;height:0}
.premium-radio-button{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.6rem 1rem;background:transparent;color:#495057;font-size:0.9rem;font-weight:600;border-radius:10px;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);border:none;white-space:nowrap}
.premium-radio-item input:checked+.premium-radio-button{background:#fff;color:var(--primary);box-shadow:0 4px 12px rgba(14, 165, 233, 0.15),0 2px 4px rgba(0,0,0,0.05);transform:translateY(-1px)}
.premium-radio-item input:checked+.premium-radio-button i{color:var(--primary)}
.premium-radio-button:hover:not(.checked){background:rgba(255,255,255,0.5)}
.premium-radio-button i{font-size:1rem;color:#adb5bd;transition:color 0.25s}

.tile-radio-group{display:flex;flex-direction:column;gap:0.75rem;width:100%;margin-bottom:1.5rem}
.tile-radio-label{display:block;font-size:0.75rem;font-weight:700;text-transform:uppercase;color:#6c757d;letter-spacing:0.5px}
.tile-radio-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:0.75rem}
.tile-radio-item{position:relative}
.tile-radio-item input{position:absolute;opacity:0;width:0;height:0}
.tile-radio-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;padding:1.25rem 0.5rem;background:#fff;color:#495057;border:2px solid #e9ecef;border-radius:16px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-align:center}
.tile-radio-button i{font-size:1.5rem;color:#adb5bd;transition:all 0.3s}
.tile-radio-button span{font-size:0.85rem;font-weight:700}
.tile-radio-item input:checked+.tile-radio-button{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);box-shadow:0 10px 20px rgba(14, 165, 233, 0.1);transform:translateY(-3px)}
.tile-radio-item input:checked+.tile-radio-button i{color:var(--primary);transform:scale(1.1)}
.tile-radio-button:hover:not(.checked){border-color:#dee2e6;background:#f8f9fa}

/* --- Analytics: Ranking Table --- */
.ranking-table{border-collapse:separate;border-spacing:0}
.ranking-table thead th{background:var(--bg-input);border:none!important;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-secondary);padding:12px 16px}
.ranking-table thead th:first-child{border-radius:var(--radius-md) 0 0 0}
.ranking-table thead th:last-child{border-radius:0 var(--radius-md) 0 0}
.ranking-table tbody td{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,0.04);font-size:0.9rem;vertical-align:middle}
.ranking-table tbody tr:hover{background:rgba(14, 165, 233, 0.03)}

/* --- Analytics: Section Titles --- */
.section-title{font-size:1.1rem;font-weight:800;color:var(--text-heading);margin-bottom:4px}
.section-subtitle{font-size:0.85rem;color:var(--text-secondary);margin-bottom:20px}

/* --- Analytics: Misc --- */
.period-label{font-size:0.9rem;color:var(--text-secondary);font-weight:600}
.chart-container{position:relative;padding:8px 0}
.analytics-card{background:rgba(255,255,255,0.92)!important;backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,0.6)!important;border-radius:var(--radius-xl);box-shadow:0 8px 32px rgba(0,0,0,0.06)!important}

/* --- Analytics: Bars --- */
.segment-bar{height:12px;border-radius:12px;overflow:hidden;display:flex}
.segment-bar-fill{height:100%;transition:width 1s ease}
.aging-bar{height:8px;border-radius:8px;background:var(--bg-input);overflow:hidden}
.aging-bar-fill{height:100%;border-radius:8px;transition:width 1s ease}

/* --- Responsive Overrides --- */
@media (max-width: 576px) {
    .detail-info-grid{grid-template-columns:1fr}
}
@media (max-width: 768px) {
    .view-tabs{overflow-x:auto;flex-wrap:nowrap}
    .view-tab{white-space:nowrap}
    .filter-chips{overflow-x:auto;flex-wrap:nowrap}
    .filter-chip{white-space:nowrap}
    .hide-mobile{display:none!important}
}

/* --- Customer: Credit Balance --- */
.credit-balance{font-size:1.1rem;font-weight:600}
.credit-balance.has-debt{color:#e53935}

/* --- Settings: Save Status --- */
.save-status{display:none;animation:fadeInUp 0.3s ease}

/* ============================================================
   LIQUID GLASS - SweetAlert2 & Modals
   Soft, smooth, modern glassmorphism
============================================================ */

@keyframes swalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes swalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}

.swal-show {
    animation: swalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.swal-hide {
    animation: swalSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Swal Liquid Glass Popup */
.swal-liquid-glass:not(.swal2-toast) {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(248, 250, 252, 0.75) 100%
    ) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 24px !important;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 -1px 0 0 rgba(255, 255, 255, 0.4) inset !important;
    padding: 32px !important;
    min-width: 360px !important;
    max-width: 90vw !important;
}

.swal2-popup.swal-liquid-glass:not(.swal2-toast) .swal2-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 20px !important;
}

.swal2-popup.swal-liquid-glass:not(.swal2-toast) .swal2-icon.swal2-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1)) !important;
    border: 2px solid rgba(16, 185, 129, 0.3) !important;
}

.swal2-popup.swal-liquid-glass:not(.swal2-toast) .swal2-icon.swal2-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)) !important;
    border: 2px solid rgba(239, 68, 68, 0.3) !important;
}

.swal2-popup.swal-liquid-glass:not(.swal2-toast) .swal2-icon.swal2-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1)) !important;
    border: 2px solid rgba(245, 158, 11, 0.3) !important;
}

.swal2-popup.swal-liquid-glass:not(.swal2-toast) .swal2-icon.swal2-info {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(2, 132, 199, 0.1)) !important;
    border: 2px solid rgba(14, 165, 233, 0.3) !important;
}

.swal2-popup.swal-liquid-glass:not(.swal2-toast) .swal2-icon.swal2-question {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(109, 40, 217, 0.1)) !important;
    border: 2px solid rgba(139, 92, 246, 0.3) !important;
}

.swal2-popup.swal-liquid-glass:not(.swal2-toast) .swal2-icon .swal2-icon-content {
    font-size: 36px !important;
}

/* ============================================================
   MODERN SWEETALERT2 TOAST NOTIFICATION
   ============================================================ */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
    top: 24px !important;
    right: 24px !important;
    z-index: 99999 !important;
}

.swal2-popup.swal2-toast,
.swal2-popup.swal2-toast-modern {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.04) !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    overflow: hidden !important;
}

.swal2-popup.swal2-toast .swal2-icon {
    margin: 0 12px 0 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
}

.swal2-popup.swal2-toast .swal2-title,
.swal2-toast-title {
    font-family: var(--font-heading, 'Nunito', sans-serif) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.swal2-popup.swal2-toast .swal2-html-container,
.swal2-toast-content {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.8125rem !important;
    color: #64748b !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.swal2-popup.swal2-toast .swal2-close,
.swal2-toast-close {
    width: 22px !important;
    height: 22px !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: #94a3b8 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    margin: 0 0 0 8px !important;
}

.swal2-popup.swal2-toast .swal2-close:hover,
.swal2-toast-close:hover {
    color: #1e293b !important;
    background: #f1f5f9 !important;
}

.swal2-popup.swal2-toast .swal2-timer-progress-bar,
.swal2-toast-progress {
    background: linear-gradient(90deg, #10b981, #059669) !important;
    height: 3px !important;
    border-radius: 0 0 14px 14px !important;
}

/* --- Utilities --- */
.text-xs{font-size:0.75rem!important;}
.text-sm{font-size:0.875rem!important;}
.fw-500{font-weight:500!important;}
.fw-600{font-weight:600!important;}
.rounded-lg{border-radius:var(--radius-lg)!important;}
.opacity-80{opacity:0.8!important;}
.shadow-hover{transition:box-shadow 0.2s;}
.shadow-hover:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)!important;}

/* Search Box Component */
.search-box { position: relative; }
.search-box input { width: 100%; padding: 8px 16px 8px 36px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 0.875rem; transition: all 0.2s; background: #fff; }
.search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); }
.search-box i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.875rem; }

.swal-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.swal-content {
    font-size: 1rem !important;
    color: #64748B !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

.swal-btn {
    padding: 12px 28px !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.swal-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}

.swal-btn:hover::before {
    opacity: 1 !important;
}

.swal-btn:active {
    transform: scale(0.97) !important;
}

.swal-btn-primary {
    background: linear-gradient(135deg, #38BDF8, #0EA5E9) !important;
    color: white !important;
    box-shadow:
        0 4px 15px rgba(14, 165, 233, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}

.swal-btn-primary:hover {
    box-shadow:
        0 8px 25px rgba(14, 165, 233, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
    transform: translateY(-2px) !important;
}

.swal-btn-secondary {
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0) !important;
    color: #475569 !important;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
}

.swal-btn-secondary:hover {
    background: linear-gradient(135deg, #E2E8F0, #CBD5E1) !important;
    transform: translateY(-2px) !important;
}

.swal-btn-danger {
    background: linear-gradient(135deg, #F87171, #EF4444) !important;
    color: white !important;
    box-shadow:
        0 4px 15px rgba(248, 113, 113, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}

.swal-btn-danger:hover {
    box-shadow:
        0 8px 25px rgba(248, 113, 113, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
    transform: translateY(-2px) !important;
}

.swal-input {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(203, 213, 225, 0.5) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    color: #334155 !important;
    transition: all 0.3s !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) inset !important;
}

.swal-input:focus {
    outline: none !important;
    border-color: rgba(14, 165, 233, 0.6) !important;
    box-shadow:
        0 0 0 3px rgba(14, 165, 233, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.04) inset !important;
}

.swal-validation {
    color: #EF4444 !important;
    font-size: 0.875rem !important;
    margin-top: 8px !important;
}

/* Swal Timer Progress Bar */
.swal2-timer-progress-bar {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.3), rgba(2, 132, 199, 0.3)) !important;
    height: 4px !important;
    border-radius: 0 0 24px 24px !important;
}

/* Swal Close Button (Modal Dialogs Only) */
.swal2-popup:not(.swal2-toast) .swal2-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(241, 245, 249, 0.8) !important;
    border: none !important;
    color: #64748B !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    z-index: 10 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-close:hover {
    background: rgba(226, 232, 240, 1) !important;
    color: #1E293B !important;
    transform: rotate(90deg) !important;
}

/* ============================================================
   MODAL LIQUID GLASS - Bootstrap 5 Override
============================================================ */

.modal-liquid-glass .modal-content {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(248, 250, 252, 0.88) 100%
    ) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 24px !important;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset,
        0 -1px 0 0 rgba(255, 255, 255, 0.5) inset !important;
    overflow: hidden !important;
}

.modal-liquid-glass .modal-header {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(241, 245, 249, 0.4) 100%
    ) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5) !important;
    padding: 20px 28px !important;
}

.modal-liquid-glass .modal-header .modal-title {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: #1E293B !important;
    letter-spacing: -0.02em !important;
}

.modal-liquid-glass .modal-body {
    padding: 28px !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

.modal-liquid-glass .modal-footer {
    background: linear-gradient(
        135deg,
        rgba(241, 245, 249, 0.4) 0%,
        rgba(226, 232, 240, 0.3) 100%
    ) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.5) !important;
    padding: 16px 28px !important;
}

/* Modal Animation */
.modal-liquid-glass.fade .modal-dialog {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    transform: translateY(20px) scale(0.98) !important;
    opacity: 0 !important;
}

.modal-liquid-glass.show .modal-dialog {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

.modal-liquid-glass .modal-backdrop {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal Size Variants */
.modal-liquid-glass .modal-lg {
    max-width: 720px !important;
}

.modal-liquid-glass .modal-sm {
    max-width: 400px !important;
}

.modal-liquid-glass .modal-xl {
    max-width: 1140px !important;
}

/* Modal Form Controls */
.modal-liquid-glass .form-control,
.modal-liquid-glass .form-select {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(203, 213, 225, 0.5) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    color: #334155 !important;
    transition: all 0.3s !important;
}

.modal-liquid-glass .form-control:focus,
.modal-liquid-glass .form-select:focus {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(14, 165, 233, 0.6) !important;
    box-shadow:
        0 0 0 3px rgba(14, 165, 233, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.modal-liquid-glass .form-label {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
}

/* Modal Buttons */
.modal-liquid-glass .btn {
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modal-liquid-glass .btn-primary {
    background: linear-gradient(135deg, #38BDF8, #0EA5E9) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
}

.modal-liquid-glass .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5) !important;
}

.modal-liquid-glass .btn-secondary {
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0) !important;
    border: none !important;
    color: #475569 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.modal-liquid-glass .btn-secondary:hover {
    background: linear-gradient(135deg, #E2E8F0, #CBD5E1) !important;
    transform: translateY(-2px) !important;
}

.modal-liquid-glass .btn-danger {
    background: linear-gradient(135deg, #F87171, #EF4444) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(248, 113, 113, 0.4) !important;
}

.modal-liquid-glass .btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(248, 113, 113, 0.5) !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
============================================================ */

@media (max-width: 576px) {
    .swal-liquid-glass:not(.swal2-toast) {
        padding: 20px !important;
        min-width: 90vw !important;
        border-radius: 20px !important;
    }

    .swal-title {
        font-size: 1.25rem !important;
    }

    .swal-btn {
        padding: 10px 20px !important;
    }

    .modal-liquid-glass .modal-header,
    .modal-liquid-glass .modal-body,
    .modal-liquid-glass .modal-footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ============================================================
   PRICING COPY-PASTE BUTTONS
============================================================ */

/* Header cell layout with label + button */
.pricing-header-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Base copy/paste button */
.pricing-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 20px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.4;
    white-space: nowrap;
}

.pricing-copy-btn:hover {
    border-color: #94a3b8;
    color: #475569;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pricing-copy-btn:active {
    transform: translateY(0);
}

/* Copied state (green) — source column */
.pricing-copy-btn.is-copied {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #16a34a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.pricing-copy-btn.is-copied:hover {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #15803d;
}

/* Paste state (blue) — target columns */
.pricing-copy-btn.is-paste {
    border-color: #0EA5E9;
    background: #fff;
    color: #0EA5E9;
    animation: pricingPastePulse 2s ease-in-out infinite;
}

.pricing-copy-btn.is-paste:hover {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #0284C7;
    border-color: #0284C7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
    animation: none;
}

@keyframes pricingPastePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
    50% { box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1); }
}

/* Highlight source column cells */
.pricing-col-highlight {
    position: relative;
}

.pricing-col-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: #22c55e;
    border-radius: 0 3px 3px 0;
}

/* Toast notification for pricing actions */
.pricing-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.pricing-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.pricing-toast.toast-success {
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(220, 252, 231, 0.95));
    border: 1px solid #bbf7d0;
    color: #166534;
}

.pricing-toast.toast-info {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.95));
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.pricing-toast .toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pricing-toast .toast-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: 0 0 0 8px;
    font-size: 1rem;
    transition: opacity 0.2s;
}

.pricing-toast .toast-close:hover {
    opacity: 1;
}

/* --- Select2 (material filter) align to design tokens --- */
.select2-container--default .select2-selection--single {
    background: var(--bg-input);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    min-height: 44px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--text-main);
}
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 4px var(--primary-soft);
    background: #fff;
}
.select2-dropdown {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
    color: #fff;
}


/* --- 5. LIVING UI & POLISH MICRO-INTERACTIONS (polish) --- */
/* ============================================================
   ARTIVITY POS - UI POLISH
   v1.0  (additive overrides, di-load terakhir)
   Arah: kehalusan modern (Watermelon-inspired), warna brand Warm Coral
   Prinsip: hanya override, tidak menghapus. Hormati prefers-reduced-motion.
   Semua nilai pakai token --* dari pos-style.css (fallback hardcoded).
============================================================ */

/* :root tokens consolidated in main design tokens */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   BUTTONS  — hover lift + shadow halus, active press
------------------------------------------------------------ */
.btn {
    transition: transform 0.18s var(--polish-ease),
                box-shadow 0.18s var(--polish-ease),
                background-color 0.18s var(--polish-ease),
                border-color 0.18s var(--polish-ease);
}
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
    transform: translateY(1px) scale(0.98);
}


.btn-success {
    background: linear-gradient(135deg, var(--success, #10B981), var(--bs-success, #198754));
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(16, 185, 129, 0.4);
}
.btn-danger {
    background: linear-gradient(135deg, var(--danger, #EF4444), var(--bs-danger, #dc3545));
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(239, 68, 68, 0.4);
}
.btn-outline-primary {
    border-color: var(--primary, #0EA5E9);
    color: var(--primary, #0EA5E9);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--primary-soft, rgba(14, 165, 233, 0.1));
    border-color: var(--primary, #0EA5E9);
    color: var(--primary-dark, #0284C7);
}

/* ------------------------------------------------------------
   CARDS  — radius lembut, shadow menyebar, hover terangkat
------------------------------------------------------------ */
.card,
.main-card,
.settings-card {
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 8px 16px -4px rgba(148, 163, 184, 0.15));
    transition: transform 0.2s var(--polish-ease),
                box-shadow 0.2s var(--polish-ease);
}
.stat-card,
.insight-card,
.settings-card {
    transition: transform 0.2s var(--polish-ease),
                box-shadow 0.2s var(--polish-ease);
}
.stat-card:hover,
.insight-card:hover,
.settings-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 20px 40px -10px rgba(148, 163, 184, 0.25));
}

/* ------------------------------------------------------------
   TABLES  — hover baris lembut, header sticky halus
------------------------------------------------------------ */
.table-hover tbody tr:hover,
.table tbody tr:hover {
    background-color: var(--primary-soft, rgba(14, 165, 233, 0.08)) !important;
}

/* ------------------------------------------------------------
   DATATABLES & ADMIN TABLES  — pagination, search, header
------------------------------------------------------------ */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-input, #F1F5F9);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-sm, 6px);
    padding: 0.35rem 0.6rem;
    color: var(--text-main, #334155);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    background-color: #FFFFFF;
    border-color: var(--primary, #0EA5E9);
    box-shadow: var(--polish-focus-ring);
    outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color, #E2E8F0);
    margin: 0 2px;
    padding: 0.25rem 0.75rem;
    color: var(--text-secondary, #64748B) !important;
    transition: background-color 0.15s var(--polish-ease), color 0.15s var(--polish-ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary, #0EA5E9) !important;
    border-color: var(--primary, #0EA5E9) !important;
    color: #FFFFFF !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label {
    color: var(--text-secondary, #64748B);
    font-size: 0.85rem;
}
.paginate_button.disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ------------------------------------------------------------
   INPUTS & SELECT  — fokus ring warna brand, transisi
------------------------------------------------------------ */
.form-control,
.form-select,
select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
textarea {
    background-color: var(--bg-input, #F1F5F9);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-sm, 8px);
    transition: border-color 0.18s var(--polish-ease),
                box-shadow 0.18s var(--polish-ease),
                background-color 0.18s var(--polish-ease);
}
.form-control:focus,
.form-select:focus,
select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus {
    background-color: #FFFFFF;
    border-color: var(--primary, #0EA5E9);
    box-shadow: var(--polish-focus-ring);
}

/* Select2 dropdown — samakan dengan fokus brand */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-sm, 8px);
    min-height: 38px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary, #0EA5E9);
    box-shadow: var(--polish-focus-ring);
}

/* ------------------------------------------------------------
   BADGES (soft)  — token-based, bukan hex mentah
------------------------------------------------------------ */
.bg-soft-primary { background-color: var(--primary-soft, rgba(14, 165, 233, 0.12)) !important; color: var(--primary-dark, #0284C7) !important; }
.bg-soft-success { background-color: var(--success-soft, rgba(16, 185, 129, 0.12)) !important; color: var(--bs-success, #198754) !important; }
.bg-soft-danger  { background-color: var(--danger-soft, rgba(239, 68, 68, 0.12)) !important; color: var(--bs-danger, #dc3545) !important; }
.bg-soft-warning { background-color: var(--warning-soft, rgba(245, 158, 11, 0.14)) !important; color: #B45309 !important; }
.bg-soft-info    { background-color: var(--info-soft, rgba(99, 102, 241, 0.12)) !important; color: var(--info, #6366F1) !important; }

/* ------------------------------------------------------------
   MODALS  — masuk lebih halus, backdrop apik
------------------------------------------------------------ */
.modal-content {
    border: none;
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.35);
}
.modal-backdrop.show {
    opacity: 0.5;
}
.modal.fade .modal-dialog {
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s var(--polish-ease);
}
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}
.modal-liquid-glass {
    border-radius: var(--radius-lg, 16px);
}

/* ------------------------------------------------------------
   POS / KASIR  — stepper qty, keranjang, popular strip
------------------------------------------------------------ */
.qty-stepper .form-control,
.qty-stepper .qty-input,
.qty-stepper input {
    width: 48px;
    text-align: center;
    border: none !important;
    background: transparent !important;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main) !important;
    padding: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}
.qty-stepper .btn {
    border-color: var(--border-color, #E2E8F0);
    background-color: var(--bg-input, #F1F5F9);
    color: var(--primary-dark, #0284C7);
}
.qty-stepper .btn:hover {
    background-color: var(--primary-soft, rgba(14, 165, 233, 0.1));
    border-color: var(--primary, #0EA5E9);
}
.pos-layout .result-box {
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-lg, 0 20px 40px -10px rgba(148, 163, 184, 0.25));
}
.popular-strip {
    background: var(--primary-soft, rgba(14, 165, 233, 0.06));
    border: 1px solid rgba(14, 165, 233, 0.15);
    border-radius: var(--radius-md, 10px);
}
.popular-strip .product-chip {
    transition: transform 0.15s var(--polish-ease), box-shadow 0.15s var(--polish-ease),
                border-color 0.15s var(--polish-ease);
    border-color: var(--border-color, #E2E8F0);
}
.popular-strip .product-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 16px -4px rgba(148, 163, 184, 0.2));
    border-color: var(--primary, #0EA5E9);
}
.pos-total-value {
    color: var(--primary-dark, #0284C7);
    text-shadow: none;
}

@keyframes pulse-new {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
    25%      { box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.35); }
    50%      { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0.15); }
}
.kanban-col.pulse-new,
.col-tab.pulse-new {
    animation: pulse-new 1.2s ease-out;
}

/* ------------------------------------------------------------
   AUTH / LOGIN
------------------------------------------------------------ */
.auth-card {
    animation: login-rise 0.45s var(--polish-ease);
}
.login-brand-logo {
    height: 56px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.15));
    transition: transform 0.25s var(--polish-ease);
}
.login-brand-logo:hover {
    transform: scale(1.03);
}
@keyframes login-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   SIDEBAR & NAVIGASI  — active pill + accent bar + hover slide
------------------------------------------------------------ */
.menu-item {
    border-radius: 9px;
    transition: transform 0.18s var(--polish-ease),
                background-color 0.18s var(--polish-ease),
                color 0.18s var(--polish-ease),
                border-color 0.18s var(--polish-ease);
}
.menu-item:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.045);
}
.menu-item.active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0.03) 100%);
    border-color: rgba(14, 165, 233, 0.2);
    box-shadow: inset 3px 0 0 #0EA5E9, 0 2px 8px rgba(0, 0, 0, 0.12);
}
.menu-item.active:hover {
    transform: none;
}

/* ------------------------------------------------------------
   SCROLLBARS  — tipis, menyatu dengan brand
------------------------------------------------------------ */
.cart-list,
.result-box,
.sidebar-menu,
.table-responsive,
.modal-body,
.dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-hover, #CBD5E1) transparent;
}
.cart-list::-webkit-scrollbar,
.result-box::-webkit-scrollbar,
.sidebar-menu::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.cart-list::-webkit-scrollbar-thumb,
.result-box::-webkit-scrollbar-thumb,
.sidebar-menu::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: var(--border-color-hover, #CBD5E1);
    border-radius: 999px;
}
.cart-list::-webkit-scrollbar-thumb:hover,
.result-box::-webkit-scrollbar-thumb:hover,
.sidebar-menu::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: var(--primary, #0EA5E9);
}

/* ------------------------------------------------------------
   DASHBOARD DETAILS  — judul seksi & chips konsisten
------------------------------------------------------------ */
.dash-section-title {
    font-weight: 700;
    color: var(--text-heading, #1E293B);
}
.quick-stats-chip,
.filter-chip {
    border-radius: var(--radius-pill, 9999px);
    transition: transform 0.15s var(--polish-ease),
                border-color 0.15s var(--polish-ease);
}
.quick-stats-chip:hover,
.filter-chip:hover {
    transform: translateY(-1px);
    border-color: var(--primary, #0EA5E9);
}

/* ------------------------------------------------------------
   USER SELECTION & FOCUS VISIBILITY  — aksesibilitas
------------------------------------------------------------ */
::selection {
    background: var(--primary-soft, rgba(14, 165, 233, 0.25));
    color: var(--text-heading, #1E293B);
}
:focus-visible {
    outline: 2px solid var(--primary, #0EA5E9);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   LIVING AMBIENT CANVAS & DEPTH (SUBTLE & CLEAN)
------------------------------------------------------------ */
.main-card {
    position: relative;
    background: #f8fafc;
}

.main-ambient-canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.45;
    will-change: transform;
    animation: ambient-drift 22s ease-in-out infinite alternate;
}

.ambient-orb.orb-1 {
    width: 480px;
    height: 480px;
    top: -140px;
    right: -100px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, rgba(14, 165, 233, 0) 70%);
    animation-duration: 20s;
}

.ambient-orb.orb-2 {
    width: 520px;
    height: 520px;
    bottom: 8%;
    left: 8%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0) 70%);
    animation-duration: 26s;
    animation-delay: -6s;
}

.ambient-orb.orb-3 {
    width: 400px;
    height: 400px;
    top: 45%;
    right: 20%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0) 70%);
    animation-duration: 24s;
    animation-delay: -12s;
}

@keyframes ambient-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(25px, -18px) scale(1.05); }
    100% { transform: translate(-18px, 25px) scale(0.96); }
}

/* ------------------------------------------------------------
   LIVING CARDS & STAT WIDGETS
------------------------------------------------------------ */
.card,
.insight-card {
    position: relative;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: var(--radius-lg, 16px);
    transition: transform 0.22s var(--polish-ease),
                box-shadow 0.22s var(--polish-ease),
                border-color 0.22s var(--polish-ease);
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(14, 165, 233, 0.08);
}

/* Stat Cards keep their signature vivid gradients with living hover physics */
.stat-card {
    height: stretch;
    position: relative;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.18);
    transition: transform 0.22s var(--polish-ease),
                box-shadow 0.22s var(--polish-ease);
}

.stat-card:hover {
    transform: translateY(-4px) scale(1.01);
}

/* Stat Card Ambient Colored Glows */
.stat-card--blue:hover {
    box-shadow: 0 16px 32px -8px rgba(14, 165, 233, 0.32), 0 4px 12px -2px rgba(14, 165, 233, 0.2);
}
.stat-card--green:hover {
    box-shadow: 0 16px 32px -8px rgba(16, 185, 129, 0.32), 0 4px 12px -2px rgba(16, 185, 129, 0.2);
}
.stat-card--amber:hover {
    box-shadow: 0 16px 32px -8px rgba(245, 158, 11, 0.32), 0 4px 12px -2px rgba(245, 158, 11, 0.2);
}
.stat-card--red:hover,
.stat-card--coral:hover {
    box-shadow: 0 16px 32px -8px rgba(239, 68, 68, 0.32), 0 4px 12px -2px rgba(239, 68, 68, 0.2);
}
.stat-card--purple:hover {
    box-shadow: 0 16px 32px -8px rgba(168, 85, 247, 0.32), 0 4px 12px -2px rgba(168, 85, 247, 0.2);
}

/* ------------------------------------------------------------
   TACTILE BUTTONS & SHIMMER SWEEP
------------------------------------------------------------ */
.btn-primary,
.btn-success {
    position: relative;
    overflow: hidden;
}

.btn-primary::after,
.btn-success::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -80%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    pointer-events: none;
    transition: none;
}

.btn-primary:hover::after,
.btn-success:hover::after {
    left: 140%;
    transition: left 0.75s cubic-bezier(0.2, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   LIVING SIDEBAR, RADAR PULSE & STATUS
------------------------------------------------------------ */
.live-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    background-color: #10B981;
    border: 2px solid #0F172A;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: radar-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes radar-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.status-pill-subtle {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: #10B981;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 9999px;
    padding: 1px 6px;
    line-height: 1.2;
}

.sidebar .menu-item {
    transition: transform 0.18s var(--polish-ease),
                background-color 0.18s var(--polish-ease),
                color 0.18s var(--polish-ease),
                box-shadow 0.18s var(--polish-ease);
}

.sidebar .menu-item:hover {
    transform: translateX(2px);
}

.sidebar .menu-item.active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0.03) 100%) !important;
    box-shadow: inset 3px 0 0 var(--primary, #0EA5E9), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* ------------------------------------------------------------
   CASCADE ENTRANCE ANIMATIONS (SMOOTH & ORGANIC)
------------------------------------------------------------ */
.animate-entrance {
    animation: living-rise 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes living-rise {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger entrance for KPI rows & grid lists */
#dashKpiRow > div:nth-child(1) { animation: living-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.04s backwards; }
#dashKpiRow > div:nth-child(2) { animation: living-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.08s backwards; }
#dashKpiRow > div:nth-child(3) { animation: living-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards; }
#dashKpiRow > div:nth-child(4) { animation: living-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.16s backwards; }

/* ------------------------------------------------------------
   FROSTED GLASS PAGE HEADER & FILTER BARS
------------------------------------------------------------ */
.page-header,
.filter-bar,
.date-filter-btn {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* Living Table Micro-hover */
.table-hover tbody tr {
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.table-hover tbody tr:hover {
    background-color: rgba(14, 165, 233, 0.06) !important;
}


/* --- 6. UNIFIED RESPONSIVE BREAKPOINTS (responsive) --- */
/* ============================================================
   ARTIVITY POS - Global Mobile Responsiveness
   Loaded after all other styles for CSS-only overrides.
   Primary breakpoint: 768px | Small phone: 400px
============================================================ */

/* ============================================================
   PHASE 1: SIDEBAR + LAYOUT FOUNDATION
============================================================ */

/* --- Mobile Hamburger Button --- */
.mobile-hamburger {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1400;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: #fff;
    color: var(--text-heading);
    font-size: 1.2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.25s var(--ease-smooth);
}
.mobile-hamburger:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(14,165,233,0.4);
}

/* --- Sidebar Overlay --- */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    z-index: 1499;
    opacity: 0;
    transition: opacity 0.3s var(--ease-smooth);
}
.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

@media (max-width: 767.98px) {
    /* Show hamburger */
    .mobile-hamburger {
        display: flex;
    }

    /* Sidebar: off-canvas by default */
    #sidebar {
        transform: translateX(-100%);
        width: 280px !important;
        z-index: 1500;
        transition: transform 0.35s var(--ease-smooth);
    }
    #sidebar.collapsed {
        width: 280px !important;
    }
    /* Never show collapsed state on mobile */
    #sidebar.collapsed .menu-item span,
    #sidebar.collapsed .rotate,
    #sidebar.collapsed .menu-item.active::after {
        display: flex;
    }
    #sidebar.collapsed .menu-item span {
        display: inline;
    }
    #sidebar.collapsed .menu-item .icon {
        margin-right: 14px;
    }
    #sidebar.collapsed .menu-item {
        justify-content: flex-start;
        padding: 14px 18px;
    }
    #sidebar.collapsed .sidebar-header {
        padding: 0 24px;
        justify-content: space-between;
        flex-direction: row;
        height: 90px;
        padding-top: 0;
    }
    #sidebar.collapsed .brand {
        justify-content: flex-start;
        width: auto;
    }
    #sidebar.collapsed .brand .logo {
        display: block;
    }
    #sidebar.collapsed .brand .logo-collapsed {
        display: none;
    }
    #sidebar.collapsed .details,
    #sidebar.collapsed .logout-btn {
        display: block;
    }
    #sidebar.collapsed .sidebar-footer {
        justify-content: space-between;
        padding: 24px;
    }
    /* Collapsed flyout not needed on mobile */
    #sidebar.collapsed .sidebar-menu {
        overflow-y: auto;
        overflow-x: hidden;
    }
    #sidebar.collapsed .submenu {
        display: none !important;
        position: static !important;
        min-width: 0;
        background: rgba(0,0,0,0.2);
        box-shadow: none;
        height: auto !important;
    }
    #sidebar.collapsed .menu-group:hover > .submenu {
        display: none !important;
    }

    /* Mobile open state */
    #sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Content area: full width */
    #contentArea,
    #contentArea.collapsed {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 20px 16px;
        padding-top: 72px; /* space for hamburger */
    }

    /* Body lock when sidebar open */
    body.sidebar-open {
        overflow: hidden;
    }

    /* Hide desktop toggle on mobile */
    #toggleSidebar {
        display: none;
    }

    /* Reduce card padding */
    .card-body {
        padding: 20px 16px;
    }
    .card-header {
        padding: 16px;
    }

    /* Full-screen modals */
    .modal-dialog {
        max-width: 100vw !important;
        margin: 0 !important;
        height: 100%;
    }
    .modal-dialog .modal-content {
        border-radius: 0 !important;
        height: 100%;
        overflow-y: auto;
    }
    .modal-dialog .modal-header {
        border-radius: 0 !important;
    }
    /* Keep liquid glass modals rounded */
    .modal-liquid-glass .modal-dialog .modal-content {
        border-radius: 24px !important;
        height: auto;
    }
    .modal-liquid-glass .modal-dialog {
        max-width: 95vw !important;
        margin: 16px auto !important;
        height: auto;
    }
}

@media (max-width: 399.98px) {
    /* Even tighter on very small phones */
    #contentArea,
    #contentArea.collapsed {
        padding: 16px 10px;
        padding-top: 68px;
    }
    .card-body {
        padding: 14px 10px;
    }
}


/* ============================================================
   PHASE 2: DATATABLES RESPONSIVE
============================================================ */
@media (max-width: 767.98px) {
    /* Stack length/filter/info/paginate vertically */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left !important;
        padding: 8px 0 !important;
    }
    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
    }
    div.dataTables_wrapper .row > div {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Reduce table cell padding */
    .table thead th {
        padding: 10px 8px;
        font-size: 10px;
    }
    .table tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }

    /* Better touch scrolling on table wrapper */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
        width: calc(100% + 32px);
    }

    /* DataTables responsive child row styling */
    table.dataTable > tbody > tr.child ul.dtr-details {
        display: block;
        width: 100%;
    }
    table.dataTable > tbody > tr.child ul.dtr-details > li {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 6px 0;
        border-bottom: 1px solid var(--border-color-light);
    }
    table.dataTable > tbody > tr.child span.dtr-title {
        font-weight: 600;
        font-size: 12px;
        color: var(--text-secondary);
        min-width: 100px;
        padding-right: 12px;
    }
    table.dataTable > tbody > tr.child span.dtr-data {
        font-size: 13px;
        text-align: right;
    }
}


/* ============================================================
   PHASE 3: POS TRANSACTION PAGE
============================================================ */
@media (max-width: 767.98px) {
    /* POS layout: natural stack (input first, cart below) — col-md-4/col-md-8 auto-stack */
    .pos-layout .row {
        flex-direction: column;
    }
    .pos-layout .row > [class*="col-md-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Cart table compact */
    .pos-layout .table tbody td,
    .pos-layout .table thead th {
        padding: 8px 6px;
        font-size: 12px;
    }

    /* Payment buttons: full width stacked */
    .pos-layout .d-grid .btn,
    .pos-layout .btn-payment {
        width: 100%;
    }

    /* Tile radio options: horizontal scroll */
    .tile-radio-options {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .tile-radio-options .tile-radio-item {
        flex: 0 0 auto;
        min-width: 90px;
    }
    .tile-radio-button {
        padding: 1rem 0.75rem;
    }

    /* Search result box: reduced height */
    .result-box {
        max-height: 260px;
    }

    /* modal-xl (print preview): full screen */
    .modal-xl .modal-dialog,
    .modal-dialog.modal-xl {
        max-width: 100vw !important;
        margin: 0 !important;
        height: 100%;
    }
    /* Stack print preview columns */
    .modal-xl .row > [class*="col-md-"],
    .modal-xl .row > [class*="col-lg-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Receipt paper sizing on mobile */
    .paper-receipt.w-58,
    .paper-receipt.w-80 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 360px;
    }
    /* modal-lg: full screen */
    .modal-lg .modal-dialog,
    .modal-dialog.modal-lg {
        max-width: 100vw !important;
        margin: 0 !important;
    }

    /* Premium radio options: horizontal scroll */
    .premium-radio-options {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .premium-radio-item {
        flex: 0 0 auto;
    }
}

@media (max-width: 399.98px) {
    /* Hide "Ukuran" column on very small screens */
    .pos-layout .table th.size-col,
    .pos-layout .table td.size-col {
        display: none;
    }
}


/* ============================================================
   PHASE 4: DASHBOARD + CHARTS
============================================================ */
@media (max-width: 767.98px) {
    /* KPI cards: reduce padding */
    .kpi-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .kpi-card .kpi-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
    .kpi-card .kpi-value {
        font-size: 1.3rem;
    }
    .kpi-card .kpi-val {
        font-size: 1.25rem;
    }

    /* Stat cards: reduce padding */
    .stat-card {
        padding: 12px 14px;
    }
    .stat-card .stat-value {
        font-size: 1.3rem;
    }

    /* Chart containers: explicit heights */
    .chart-container-fixed {
        height: 200px !important;
    }
    .chart-container {
        position: relative;
    }
    canvas {
        max-height: 200px;
    }

    /* Dashboard grid: stack all cols */
    .row > [class*="col-md-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Analytics card compact */
    .analytics-card {
        border-radius: var(--radius-lg) !important;
    }

    /* Section titles */
    .dash-section-title {
        font-size: 0.9rem;
    }
}

@media (max-width: 767.98px) and (min-width: 400px) {
    /* Tablet-ish phone: slightly taller charts */
    .chart-container-fixed {
        height: 250px !important;
    }
}

@media (max-width: 399.98px) {
    /* Small phones: stat cards go full width */
    .row > [class*="col-6"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .kpi-card {
        flex-direction: row;
    }
    .chart-container-fixed {
        height: 180px !important;
    }
}


/* ============================================================
   PHASE 5: FORMS + SCHEDULE + EDGE CASES
============================================================ */
@media (max-width: 767.98px) {
    /* Form rows: stack col-md-6 */
    .row > [class*="col-md-6"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Schedule grid: horizontal scroll */
    .schedule-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .schedule-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .schedule-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .summary-cards {
        grid-template-columns: 1fr;
    }
    .table-schedule {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .grid-card {
        overflow-x: auto;
    }

    /* Filter bars: full-width inputs */
    .filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .filter-chip {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Settings preview: remove sticky */
    .preview-panel {
        position: static !important;
    }

    /* Period tabs: scrollable */
    .period-tabs,
    .tab-group,
    .view-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .period-tab,
    .tab-item,
    .view-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Week nav controls */
    .week-nav {
        flex-wrap: wrap;
    }
    .grid-header-tools {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    /* Detail info grid */
    .detail-info-grid {
        grid-template-columns: 1fr;
    }

    /* Btn toggle groups */
    .btn-toggle-group {
        width: 100%;
        overflow-x: auto;
    }
}


/* ============================================================
   PHASE 6: POLISH
============================================================ */

/* --- Touch Targets --- */
@media (max-width: 767.98px) {
    .btn-icon-action {
        width: 44px;
        height: 44px;
    }
    .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn-close {
        width: 44px !important;
        height: 44px !important;
    }

    /* SweetAlert2 */
    .swal2-popup {
        max-width: 95vw !important;
    }
    .swal2-popup .swal2-icon {
        width: 56px !important;
        height: 56px !important;
    }
    .swal2-popup .swal2-icon .swal2-icon-content {
        font-size: 28px !important;
    }
    .swal2-popup.swal-liquid-glass:not(.swal2-toast) {
        min-width: 0 !important;
        border-radius: 20px !important;
        padding: 20px !important;
    }

    /* Form inputs: larger touch targets */
    .form-control,
    .form-select {
        min-height: 44px;
    }

    /* Nav pills: scrollable */
    .nav-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .nav-pills .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Legend rows */
    .legend-row {
        padding: 12px 16px;
        gap: 10px;
    }
}

/* --- Utility Classes --- */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
    .show-mobile {
        display: block !important;
    }
    .show-mobile-flex {
        display: flex !important;
    }
    .show-mobile-inline {
        display: inline !important;
    }
}

@media (min-width: 768px) {
    .show-mobile,
    .show-mobile-flex,
    .show-mobile-inline {
        display: none !important;
    }
    .hide-desktop {
        display: none !important;
    }
}