/* --- APP BUNDLE (LEGACY & MODULE SPECIFIC) --- */
/* Design tokens moved to vars.css */

/* --- SHARED UTILITIES --- */
*, *::before, *::after {
    box-sizing: border-box;
}

.custom-scrollbar::-webkit-scrollbar,
.scrollable-body::-webkit-scrollbar,
.scrollable-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.scrollable-body::-webkit-scrollbar-track,
.scrollable-content::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.scrollable-body::-webkit-scrollbar-thumb,
.scrollable-content::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.scrollable-body::-webkit-scrollbar-thumb:hover,
.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Firefox scrollbar styling (scrollbar-width/color) omitted to satisfy IDE compatibility warnings */

/* --- ANIMATIONS --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
    animation: fadeIn 0.4s ease-out forwards;
}

/* --- BADGES & INDICATORS --- */
.app-badge-new {
    position: absolute;
    top: 2px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    padding: 0px 4px;
    height: 14px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    border-radius: 3px;
    background-image: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
    pointer-events: none;
    z-index: 10;
    transition: all 0.3s ease;
}

/* Sidebar collapsed state: transform badge to dot */
.sidebar-collapsed .app-badge-new {
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    color: transparent;
    border-radius: 50%;
    margin: 0;
    min-width: 8px;
}

/* Navigation header state if needed */
.unitykit-brand .app-badge-new {
    position: static;
    margin-left: 8px;
}

@keyframes pulse-gentle {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-pulse-gentle {
    animation: pulse-gentle 2s infinite ease-in-out;
}

/* --- GLOBAL BASE STYLES --- */
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .font-premium {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

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

/* Baseline SVG constraint to prevent layout blowout if Tailwind fails */
svg {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.format-btn.border-red-500 {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border-width: 2px !important;
}

/* Fix for black elements turning blue on visit */
a.text-black:visited,
.text-black:visited {
    color: inherit;
}

a:visited {
    color: inherit;
}

/* Fix for buttons that are <a> tags to prevent color change after visit */
a.btn-standard:visited {
    color: inherit !important;
}

/* Global Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.header-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
}

.glass-header {
    background-color: var(--nav-bg) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 3px 0 var(--shadow-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.filter-bar-unified {
    background-color: var(--surface-2) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease !important;
}

html.dark .filter-bar-unified {
    background-color: rgba(42, 42, 58, 0.5) !important;
}

::-webkit-scrollbar-track {
    background: var(--surface-2);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

html.dark ::-webkit-scrollbar-track {
    background: #1a1a24;
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(249,115,22,0.5);
}

/* --- APP TABS (Global Standard) --- */
.app-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
}

.app-tab {
    padding: 0.5rem 1.25rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm, 0.375rem) var(--radius-sm, 0.375rem) 0 0;
}

.app-tab:hover {
    color: var(--text);
    background: var(--surface-alt, #f8fafc);
}

.app-tab.active {
    color: var(--accent, #f97316);
    border-bottom-color: var(--accent, #f97316);
    font-weight: 600;
}

.app-tab-content {
    display: none;
}

.app-tab-content.active {
    display: block;
}

/* Utility for scrollable areas - Integrated into SHARED UTILITIES above */

/* Force light background for form elements to avoid "black input" issues */
input, select, textarea {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--input-border);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

html.dark input, html.dark select, html.dark textarea {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--input-border);
    color-scheme: dark;
}

/* --- QUICK ACTION BUTTONS (Uiverse Style) --- */
.action-btn {
    background-color: transparent;
    position: relative;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.action-btn {
    background-color: transparent;
    position: relative;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.action-icon {
    transform: scale(1);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 18px;
    height: 18px;
}

.action-btn:hover .action-icon {
    transform: scale(1.4);
}

/* Global Floating Tooltip (Portal) */
.global-floating-tooltip {
    position: fixed;
    z-index: 10000;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.global-floating-tooltip.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Delete Action */
.action-btn-delete .action-icon { fill: #ef4444; } /* Tailwind red-500 */
.action-btn-delete:hover .action-icon { fill: #b91c1c; } /* Tailwind red-700 */

/* Edit Action */
.action-btn-edit .action-icon { stroke: #f97316; stroke-width: 2; fill: none; } /* Tailwind orange-500 */
.action-btn-edit:hover .action-icon { stroke: #c2410c; } /* Tailwind orange-700 */

/* Print/View Action */
.action-btn-primary .action-icon { stroke: #6366f1; stroke-width: 2; fill: none; } /* Tailwind indigo-500 */
.action-btn-primary:hover .action-icon { stroke: #4338ca; } /* Tailwind indigo-700 */

/* Success Action */
.action-btn-success .action-icon { stroke: #22c55e; stroke-width: 2; fill: none; } /* Tailwind green-500 */
.action-btn-success:hover .action-icon { stroke: #15803d; } /* Tailwind green-700 */

/* Variant Tooltip Backgrounds for Portal Tooltip */
.global-floating-tooltip.danger { background-color: #b91c1c; }
.global-floating-tooltip.success { background-color: #15803d; }
.global-floating-tooltip.warning { background-color: #c2410c; }
.global-floating-tooltip.primary { background-color: #4338ca; }

/* --- PREMIUM DROPDOWN STYLES --- */
.dropdown-premium {
    position: absolute;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-width: 200px;
}

.dark .dropdown-premium {
    background-color: #1f2937;
    border-color: #374151;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.dropdown-premium .separator {
    border-top: 1px solid #e5e7eb;
    margin: 4px 0;
}

.dark .dropdown-premium .separator {
    border-top-color: #374151;
}

.dropdown-premium-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
}

.dropdown-premium-item {
    display: flex;
    align-items: center;
    color: #374151;
    gap: 10px;
    transition: all 0.3s ease-out;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none !important;
}

.dark .dropdown-premium-item {
    color: #d1d5db;
}

.dropdown-premium-item svg {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease-out;
}

.dropdown-premium-item .label {
    font-weight: 600;
    font-size: 13px;
}

.dropdown-premium-item:hover {
    background-color: #1f2937;
    color: #ffffff !important;
    transform: translate(1px, -1px);
}

.dark .dropdown-premium-item:hover {
    background-color: #374151;
}

.dropdown-premium-item:hover svg {
    stroke: #ffffff !important;
}

.dropdown-premium-item:active {
    transform: scale(0.98);
}

/* Delete Variant */
.dropdown-premium-item.danger:hover {
    background-color: #8e2a2a;
}

/* Special List Variant (e.g. for Logout or Special Actions) */
.dropdown-premium-list-special .dropdown-premium-item {
    color: #bd89ff;
}
.dropdown-premium-list-special .dropdown-premium-item svg {
    stroke: #bd89ff;
}
.dropdown-premium-list-special .dropdown-premium-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #bd89ff !important;
}
.dark .dropdown-premium-list-special .dropdown-premium-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- UNITYKIT BRANDING --- */
.unitykit-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    height: 48px;
    padding: 5px 16px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: transparent;
}

.unitykit-brand:hover {
    background: rgba(249, 115, 22, 0.08); /* fallback for orange-500 alpha */
    transform: translateY(-1px);
}

.unitykit-logo-box {
    position: relative;
    width: 50px;
    height: 32px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.unitykit-brand:hover .unitykit-logo-box {
    width: 200px;
}

.unitykit-icon-svg {
    height: 30px;
    width: 60px;
    flex-shrink: 0;
    fill: #f97316;
}

.dark .unitykit-icon-svg {
    fill: #fb923c;
}

.unitykit-text-svg {
    height: 24px;
    margin-left: 12px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    fill: #1e293b;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.dark .unitykit-text-svg {
    fill: #f8fafc;
}

.unitykit-brand:hover .unitykit-text-svg {
    opacity: 1;
    transform: translateX(0);
}

.unitykit-trail {
    position: absolute;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.unitykit-brand:hover .unitykit-trail {
    animation: unity-trail 0.8s ease-in-out forwards;
}

@keyframes unity-trail {
    0% {
        background: linear-gradient(90deg, rgba(249, 115, 22, 0) 90%, rgba(249, 115, 22, 0.5) 100%);
        opacity: 0;
    }
    30%, 70% {
        background: linear-gradient(90deg, rgba(249, 115, 22, 0) 70%, rgba(249, 115, 22, 0.5) 100%);
        opacity: 1;
    }
    100% {
        background: linear-gradient(90deg, rgba(249, 115, 22, 0) 90%, rgba(249, 115, 22, 0.5) 100%);
        opacity: 0;
    }
}

.unitykit-badge {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    border-radius: 5px;
    background: #f97316;
    color: white;
    box-shadow: 0 3px 6px rgba(249, 115, 22, 0.25);
    transition: all 0.3s ease;
}

.unitykit-brand:hover .unitykit-badge {
    transform: scale(1.08);
    background: #ea580c;
}

/* --- PREMIUM HAMBURGER MENU --- */
.hamburger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.hamburger:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dark .hamburger:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.hamburger input {
    display: none !important;
}

.hamburger svg {
    height: 2.2em;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger .line {
    fill: none;
    stroke: #1f2937; /* Monochrome Dark */
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke 0.3s ease;
}

.dark .hamburger .line {
    stroke: #f3f4f6;
}

.hamburger .line-top-bottom {
    stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
    transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}

/* --- TAILWIND LAYER COMPONENTS --- */
/* Note: @layer directive is used in Tailwind build process,
   here we provide the processed/standard CSS equivalents. */

.card-premium {
    background-color: #ffffff;
    border-radius: 1rem;
    border-width: 1px;
    border-color: #f1f5f9;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.card-premium-hover:hover {
    box-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.05), 0 8px 10px -6px rgba(249, 115, 22, 0.05);
    transform: translateY(-0.25rem);
}

.btn-standard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    transition-property: all;
    line-height: 1;
}

.btn-standard:active {
    transform: scale(0.98);
}

.btn-primary-standard {
    background-color: #ea580c;
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2);
}

.btn-primary-standard:hover {
    background-color: #c2410c;
}

.btn-secondary-standard {
    background-color: #ffffff;
    border-width: 1px;
    border-color: #e2e8f0;
    color: #334155;
}

.btn-secondary-standard:hover {
    background-color: #f8fafc;
}

.btn-primary-dark-standard {
    background-color: #111827;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-primary-dark-standard:hover {
    background-color: #000000;
}

.btn-danger-standard {
    background-color: #e11d48;
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(244, 63, 94, 0.2);
}

.btn-danger-standard:hover {
    background-color: #be123c;
}

.btn-text-premium {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    transition: color 0.2s;
}

.btn-text-premium:hover {
    color: #f97316;
}

.input-premium {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    background-color: #ffffff;
    border-width: 1px;
    border-color: #e2e8f0;
    border-radius: 0.75rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: all;
    font-size: 0.8125rem;
}

.input-premium-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-premium-wrapper svg {
    position: absolute;
    left: 0.75rem;
    pointer-events: none;
    z-index: 10;
}

.input-premium-wrapper .input-premium {
    padding-left: 2.25rem;
}

.input-premium-compact {
    height: 2rem;
    font-size: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.input-premium:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

.label-premium {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 11px;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge-premium {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 0.5rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success-premium {
    background-color: #ecfdf5;
    color: #059669;
    border-width: 1px;
    border-color: #d1fae5;
}

.badge-info-premium {
    background-color: #fff7ed;
    color: #ea580c;
    border-width: 1px;
    border-color: #ffedd5;
}

.badge-warning-premium {
    background-color: #fffbeb;
    color: #d97706;
    border-width: 1px;
    border-color: #fef3c7;
}

.badge-danger-premium {
    background-color: #fff1f2;
    color: #e11d48;
    border-width: 1px;
    border-color: #ffe4e6;
}

.section-header-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #1e293b;
    letter-spacing: -0.025em;
}

/* --- CLIENTS MODULE --- */
/* --- SHARED INTERACTION COMPONENTS --- */

/* Selection mode visibility */
.checkbox-column,
.tile-checkbox {
    display: none;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

body.selection-mode .checkbox-column {
    display: table-cell;
    opacity: 1;
}

body.selection-mode .tile-checkbox {
    display: block;
    opacity: 1;
}

/* Custom Animated Checkbox (SVG) */
.cb-container {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 0;
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
    margin: 1px;
}

.cb-container input {
    position: absolute;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
}

.cb-container svg {
    overflow: visible !important;
    height: 100%;
    width: 100%;
    display: block;
}

.cb-path {
    fill: none !important;
    stroke: #000000 !important;
    stroke-width: 8 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease, stroke 0.3s ease;
    stroke-dasharray: 241 9999999;
    stroke-dashoffset: 0;
}

.cb-container input:checked ~ svg .cb-path {
    stroke: #f97316 !important; /* Orange accent for selected */
    stroke-dasharray: 70.5096664428711 9999999;
    stroke-dashoffset: -262.2723388671875;
}

/* Global Layout Fragments */
.header-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #f1f5f9;
}

.main-content-height {
    height: calc(100vh - 4rem);
}

.scrollable-body {
    flex: 1;
    overflow-y: auto;
}

/* --- MODULE SPECIFIC OVERRIDES (Optional cleanup) --- */
/* Elements below will be kept if they provide unique styling not covered by SHARED. */

/* --- SHARED CONFIRM MODAL --- */
/* --- SHARED CONFIRM MODAL (RE-DESIGNED) --- */
.premium-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.premium-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.premium-confirm-card {
    background: white;
    border-radius: 28px;
    padding: 40px 32px 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dark .premium-confirm-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.premium-confirm-overlay.active .premium-confirm-card {
    transform: scale(1) translateY(0);
}

.premium-confirm-icon-wrap {
    width: 64px;
    height: 64px;
    background: #fff1f2;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: #e11d48;
    animation: icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dark .premium-confirm-icon-wrap {
    background: rgba(225, 29, 72, 0.15);
}

@keyframes icon-pop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.premium-confirm-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1e293b;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
}

.dark .premium-confirm-title {
    color: #f8fafc;
}

.premium-confirm-message {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 32px;
    padding: 0 10px;
}

.dark .premium-confirm-message {
    color: #94a3b8;
}

.premium-confirm-actions {
    display: flex;
    flex-direction: column; /* Match the screenshot layout */
    gap: 12px;
}

.premium-confirm-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 16px;
    font-size: 0.9375rem;
    font-weight: 900;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    outline: none;
}

.premium-confirm-btn-confirm {
    background: #e11d48;
    color: white;
    box-shadow: 0 8px 20px -4px rgba(225, 29, 72, 0.4);
}

.premium-confirm-btn-confirm:hover {
    background: #be123c;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -4px rgba(225, 29, 72, 0.5);
}

.premium-confirm-btn-confirm:active {
    transform: scale(0.98);
}

.premium-confirm-btn-cancel {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.dark .premium-confirm-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.premium-confirm-btn-cancel:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.dark .premium-confirm-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

/* --- THEME SWITCHER --- */
.theme-switcher {
    padding: 2px;
    width: fit-content;
    display: flex;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
}
.dark .theme-switcher {
    background-color: #1e293b;
    border-color: #334155;
}
.theme-switcher_switch {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
}
.theme-switcher_switch:hover {
    color: #334155;
}
.dark .theme-switcher_switch:hover {
    color: #cbd5e1;
}
.theme-switcher_switch[data-active="true"] {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    color: #ea580c;
}
.dark .theme-switcher_switch[data-active="true"] {
    background-color: #334155;
    color: #fb923c;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* Module styles for Passports migrated to SHARED section */

/* --- INVENTORY MODULE --- */
.warehouse-card {
    background-color: #ffffff;
    border-radius: 1.5rem; /* 3xl */
    padding: 1.5rem; /* 6 */
    border: 1px solid rgba(226, 232, 240, 0.6); /* slate-200/60 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.warehouse-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-color: rgba(226, 232, 240, 1);
}

/* --- GLOBAL PREMIUM COMPONENTS --- */
/* --- PREMIUM MODAL SYSTEM --- */
:root {
    --modal-padding: 40px;
    --modal-gap: 32px;
    --field-gap: 20px;
    --modal-radius: 28px;
    --card-radius: 20px;
    --modal-bg: #ffffff;
    --modal-section-bg: #fdfdfe; /* Almost white but distinct */
}

.modal-premium-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-premium-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-premium-container {
    background: var(--modal-bg);
    width: 95%;
    max-width: 680px;
    border-radius: var(--modal-radius);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: modalIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255,255,255,0.8);
    overflow: hidden;
    transform: translateY(20px) scale(0.98);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.text-danger-premium {
    color: #ef4444;
}

textarea.input-premium {
    resize: none;
}

.modal-premium-overlay.active .modal-premium-container {
    transform: translateY(0) scale(1);
}

.modal-premium-header {
    padding: 24px var(--modal-padding);
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    z-index: 10;
}

.modal-premium-header h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.modal-close-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #f1f5f9;
    background: white;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.modal-close-btn:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #e2e8f0;
    transform: rotate(90deg) scale(1.05);
}

.modal-premium-body {
    padding: var(--modal-padding);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--modal-gap);
    flex: 1;
}

.modal-premium-section {
    background: #fcfcfd;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 28px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    width: 100%;
}

.modal-premium-section:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.modal-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 800;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
}

.modal-section-label svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--field-gap);
    width: 100%;
}

.field-full {
    grid-column: 1 / -1;
}

.modal-premium-footer {
    padding: 24px var(--modal-padding);
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
}

.input-premium {
    width: 100%;
    padding: 14px 20px;
    background-color: #ffffff;
    border: 1.5px solid #f1f5f9;
    border-radius: 16px;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    color: #1e293b;
    appearance: none;
}

.input-premium::placeholder {
    color: #cbd5e1;
}

.input-premium:hover {
    border-color: #e2e8f0;
}

.input-premium:focus {
    border-color: #f97316;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.08);
}

.label-premium {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: -0.01em;
}

.btn-save-premium {
    background: #1e293b; /* Back to charcoal/dark for true premium feel as in original sketch */
    color: white;
    padding: 14px 36px;
    border-radius: 16px;
    font-weight: 800;
    text-transform: none; /* Sentence case/Title case looks more premium */
    font-size: 15px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* User asked for orange button specifically in later requests though?
   Let's keep the orange but make it more elegant (gradients/subtle shadows). */
.btn-save-premium-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    padding: 14px 36px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px -5px rgba(249, 115, 22, 0.3);
}

.btn-save-premium-orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(249, 115, 22, 0.4);
    filter: brightness(1.05);
}

.btn-cancel-premium {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    font-size: 11px;
    padding: 12px;
    transition: all 0.2s;
}

.btn-cancel-premium:hover {
    color: #1e293b;
    transform: scale(1.02);
}

.dark .modal-premium-container { background: #1e293b; border: 1px solid rgba(255,255,255,0.05); }
.dark .modal-premium-header, .dark .modal-premium-footer { background: #1e293b; border-color: rgba(255,255,255,0.05); }
.dark .modal-premium-header h2 { color: #f8fafc; }
.dark .modal-premium-section { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); }

/* --- END PREMIUM MODAL SYSTEM --- */

/* --- PASSPORTS PRINT --- */
@media print {
    [data-context="passports-print"] body { background: #fff; }
    [data-context="passports-print"] .no-print { display: none !important; }
    [data-context="passports-print"] .sheet { box-shadow: none !important; margin: 0 !important; page-break-after: always; }
}

[data-context="passports-print"] .template-underlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 210mm;
    height: 297mm;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}

[data-context="passports-print"] .sheet {
    width: 210mm;
    height: 296.5mm;
    background: #fff;
    margin: 10mm auto;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    overflow: hidden;
    box-sizing: border-box;
}

[data-context="passports-print"] .frame {
    position: absolute;
    top: 5mm;
    right: 5mm;
    bottom: 5mm;
    left: 20mm;
    box-sizing: border-box;
    z-index: 10;
}

[data-context="passports-print"] .content {
    position: absolute;
    top: 10mm;
    left: 25mm;
    right: 5mm;
    bottom: 10mm;
    overflow: hidden;
    z-index: 20;
    box-sizing: border-box;
    background: transparent;
}

/* Frame Type Overrides */
[data-context="passports-print"] .frame-type-1 .frame { border: 2px solid #000; }
[data-context="passports-print"] .frame-type-1 .content { top: 10mm; bottom: 5mm; }
[data-context="passports-print"] .frame-type-2 .content { top: 10mm; bottom: 45mm; right: 10mm; }
[data-context="passports-print"] .frame-type-3 .content { top: 10mm; bottom: 20mm; right: 10mm; }

[data-context="passports-print"] .grid-stamp-f2 {
    position: absolute;
    bottom: 5mm;
    left: 20mm;
    width: 185mm;
    height: 40mm;
    background: transparent;
    box-sizing: border-box;
    z-index: 30;
}

[data-context="passports-print"] .grid-stamp-f2 > div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 8pt;
    text-align: center;
}

[data-context="passports-print"] .f2-sig-name {
    left: 35mm;
    width: 20mm;
    height: 5mm;
    justify-content: flex-start;
    padding-left: 1mm;
    font-size: 8pt;
}

[data-context="passports-print"] .f2-sig-date {
    left: 55mm;
    width: 15mm;
    height: 5mm;
    justify-content: center;
    font-size: 7pt;
}

[data-context="passports-print"] .f2-main-id {
    left: 70mm;
    width: 65mm;
    height: 15mm;
    top: 0;
    justify-content: center;
    font-weight: bold;
    font-size: 12pt;
}

[data-context="passports-print"] .f2-main-title {
    left: 70mm;
    width: 65mm;
    height: 25mm;
    top: 15mm;
    justify-content: center;
    font-weight: bold;
    font-size: 14pt;
    line-height: 1.1;
    padding: 0 1mm;
}

[data-context="passports-print"] .f2-meta-val {
    left: 135mm;
    width: 50mm;
    height: 5mm;
    font-weight: bold;
    font-size: 10pt;
    display: grid !important;
    grid-template-columns: 15mm 15mm 20mm;
    top: 30mm;
}

[data-context="passports-print"] .f2-meta-val div { display: flex; align-items: center; justify-content: center; }

[data-context="passports-print"] .f2-company-block {
    left: 135mm;
    width: 50mm;
    height: 5mm;
    top: 35mm;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 11pt;
    line-height: 1.1;
}

[data-context="passports-print"] .title-grid {
    display: grid;
    grid-template-rows: 50mm 20mm 15mm 50mm 35mm 90mm 20mm;
    height: 100%;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

[data-context="passports-print"] .header-area {
    grid-row: 1;
    overflow-wrap: break-word;
}

[data-context="passports-print"] .header-company { font-size: 16pt; font-weight: bold; margin-bottom: 5mm; text-transform: uppercase; }
[data-context="passports-print"] .header-address { font-size: 9pt; line-height: 1.2; }

[data-context="passports-print"] .project-title-area {
    grid-row: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 2mm;
    overflow-wrap: break-word;
}

[data-context="passports-print"] .project-title {
    font-size: 14pt;
    font-weight: bold;
    line-height: 1.3;
    text-transform: uppercase;
}

[data-context="passports-print"] .side-registration {
    position: absolute;
    top: 5mm;
    left: 0;
    width: 20mm;
    height: 287mm;
    z-index: 5;
    display: block;
}

[data-context="passports-print"] .side-reg-parent {
    position: absolute;
    left: 5mm;
    top: 0;
    width: 15mm;
    height: 60mm;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    border: 1px solid #000;
    background: #fff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transform-origin: center;
}

[data-context="passports-print"] .grid-stamp-f2a {
    position: absolute;
    bottom: 5mm;
    left: 20mm;
    width: 185mm;
    height: 15mm;
    display: grid;
    grid-template-columns: 10mm 15mm 15mm 70mm auto 15mm;
    grid-template-rows: 8mm 7mm;
    background: transparent;
    box-sizing: border-box;
    z-index: 30;
}

[data-context="passports-print"] .controls {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 12px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    z-index: 1000;
    display: flex;
    gap: 12px;
    align-items: center;
}

[data-context="passports-print"] .nav-sidebar {
    position: fixed;
    top: 96px;
    left: 20px;
    width: 250px;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid #f1f5f9;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 1000;
    padding: 1rem;
    font-family: sans-serif;
    font-size: 14px;
}

[data-context="passports-print"] [contenteditable="true"] {
    outline: 2px dashed #9ca3af;
    background: rgba(255, 255, 200, 0.2);
    cursor: text;
}

[data-context="passports-print"] [contenteditable="true"]:focus {
    outline: 2px solid #ea580c;
    background: #fff;
}

/* --- KANBAN V2 CARDS --- */
.kanban-task {
  position: relative;
  color: #2e2e2f;
  cursor: move;
  background-color: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
  margin-bottom: 1rem;
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
}

.kanban-task:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 4px 12px 0px;
  border-color: #f97316 !important;
  transform: translateY(-2px);
}

.kanban-task h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0.8rem 0;
  line-height: 1.4;
  color: #1e293b;
}

.kanban-tag {
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #ea580c;
  letter-spacing: 0.025em;
}

.kanban-tags {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.kanban-options {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: all 0.2s;
}

.kanban-options:hover {
    background-color: #f1f5f9;
    color: #f97316;
}

.kanban-options svg {
  fill: currentColor;
  width: 18px;
}

.kanban-stats {
  position: relative;
  width: 100%;
  color: #64748b;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

.kanban-stats > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kanban-stats-item {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kanban-stats-item svg {
  height: 14px;
  width: 14px;
  stroke: #94a3b8;
}

.kanban-viewer {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.kanban-viewer span {
  height: 24px;
  width: 24px;
  background-color: #f97316;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 9px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.kanban-viewer span:hover {
    transform: scale(1.1);
    z-index: 10;
}

.kanban-viewer span svg {
  stroke: #fff;
  width: 12px;
  height: 12px;
}

.kanban-ghost {
  opacity: 0.4;
  border: 2px dashed #f97316 !important;
  background-color: #f8fafc !important;
}


.kanban-ghost * {
  visibility: hidden;
}

/* --- 3D CUBE LOADER (Uiverse.io by Pradeepsaranbishnoi) --- */
.kbm-loader-wrap {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    transition: opacity 0.3s ease;
}

.loader {
    position: relative;
    width: 160px;
    height: 160px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.cubes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-135deg);
    animation: cubes 8s cubic-bezier(0,0,1,1) infinite;
}

@keyframes cubes {
    0%   { transform: rotateX(60deg) rotateZ(-135deg); }
    100% { transform: rotateX(60deg) rotateZ(225deg); }
}

.cube {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: cube 2s cubic-bezier(.64,.21,.42,.85) infinite;
}

@keyframes cube {
    0%        { opacity: 0; transform: translateZ(100px); }
    40%, 60%  { opacity: 1; transform: translateZ(10px); }
    100%      { opacity: 0; transform: translateZ(-100px); }
}

.side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.side:nth-child(1) { transform: rotateX(-180deg) translateZ(10px); background-color: #1e3f57; }
.side:nth-child(2) { transform: rotateY(-90deg)  translateZ(10px); background-color: #6bb2cd; }
.side:nth-child(3) { transform: rotateY(90deg)   translateZ(10px); background-color: #6bb2cd; }
.side:nth-child(4) { transform: rotateX(90deg)   translateZ(10px); background-color: #3c617d; }
.side:nth-child(5) { transform: rotateX(-90deg)  translateZ(10px); background-color: #3c617d; }
.side:nth-child(6) { transform: translateZ(10px);                  background-color: #1e3f57; }

.cube:nth-child(8n+1) { left: 20px; }
.cube:nth-child(8n+2) { left: 40px; }
.cube:nth-child(8n+3) { left: 60px; }
.cube:nth-child(8n+4) { left: 80px; }
.cube:nth-child(8n+5) { left: 100px; }
.cube:nth-child(8n+6) { left: 120px; }
.cube:nth-child(8n+7) { left: 140px; }

.cube:nth-child(n+8):nth-child(-n+15)  { top: 20px; }
.cube:nth-child(n+16):nth-child(-n+23) { top: 40px; }
.cube:nth-child(n+24):nth-child(-n+31) { top: 60px; }
.cube:nth-child(n+32):nth-child(-n+39) { top: 80px; }
.cube:nth-child(n+40):nth-child(-n+47) { top: 100px; }
.cube:nth-child(n+48):nth-child(-n+55) { top: 120px; }
.cube:nth-child(n+56):nth-child(-n+63) { top: 140px; }

.cube:nth-child(1),.cube:nth-child(8)  { animation-delay: 50ms; }
.cube:nth-child(2),.cube:nth-child(9),.cube:nth-child(16) { animation-delay: 100ms; }
.cube:nth-child(3),.cube:nth-child(10),.cube:nth-child(17),.cube:nth-child(24) { animation-delay: 150ms; }
.cube:nth-child(4),.cube:nth-child(11),.cube:nth-child(18),.cube:nth-child(25),.cube:nth-child(32) { animation-delay: 200ms; }
.cube:nth-child(5),.cube:nth-child(12),.cube:nth-child(19),.cube:nth-child(26),.cube:nth-child(33),.cube:nth-child(40) { animation-delay: 250ms; }
.cube:nth-child(6),.cube:nth-child(13),.cube:nth-child(20),.cube:nth-child(27),.cube:nth-child(34),.cube:nth-child(41),.cube:nth-child(48) { animation-delay: 300ms; }
.cube:nth-child(7),.cube:nth-child(14),.cube:nth-child(21),.cube:nth-child(28),.cube:nth-child(35),.cube:nth-child(42),.cube:nth-child(49),.cube:nth-child(56) { animation-delay: 350ms; }
.cube:nth-child(15),.cube:nth-child(22),.cube:nth-child(29),.cube:nth-child(36),.cube:nth-child(43),.cube:nth-child(50),.cube:nth-child(57) { animation-delay: 400ms; }
.cube:nth-child(23),.cube:nth-child(30),.cube:nth-child(37),.cube:nth-child(44),.cube:nth-child(51),.cube:nth-child(58) { animation-delay: 450ms; }
.cube:nth-child(31),.cube:nth-child(38),.cube:nth-child(45),.cube:nth-child(52),.cube:nth-child(59) { animation-delay: 500ms; }
.cube:nth-child(39),.cube:nth-child(46),.cube:nth-child(53),.cube:nth-child(60) { animation-delay: 550ms; }
.cube:nth-child(47),.cube:nth-child(54),.cube:nth-child(61) { animation-delay: 600ms; }
.cube:nth-child(55),.cube:nth-child(62) { animation-delay: 650ms; }
.cube:nth-child(63) { animation-delay: 700ms; }


/* ================================================================
   DARK THEME OVERRIDES
   Активируется классом "dark" на <html>.
   ================================================================ */

/* ── Навбар ─────────────────────────────────────────────────── */
html.dark nav {
    background-color: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

html.dark .header-sticky {
    background-color: var(--nav-bg) !important;
    border-bottom-color: var(--border) !important;
}

html.dark nav .text-gray-500,
html.dark nav .text-gray-600 {
    color: var(--text-muted);
}

html.dark nav .text-gray-900 {
    color: var(--text);
}

html.dark nav .border-l {
    border-color: var(--border) !important;
}

html.dark nav #tools-menu-button {
    background-color: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.dark nav #tools-menu-button:hover {
    background-color: #333348 !important;
}

/* Notification dropdown */
html.dark #notification-dropdown {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

html.dark #notification-dropdown .border-b {
    border-color: var(--border) !important;
}

html.dark #notification-dropdown .bg-gray-50\/50 {
    background-color: var(--surface-2) !important;
}

html.dark #notification-dropdown h3 {
    color: var(--text) !important;
}

html.dark #notification-dropdown p {
    color: var(--text-muted);
}

html.dark #notification-dropdown .text-gray-900 {
    color: var(--text) !important;
}

/* ── Сайдбар ─────────────────────────────────────────────────── */
html.dark #sidebar > div {
    background-color: var(--sidebar-bg) !important;
    border-right-color: var(--border) !important;
}

html.dark #sidebar .border-b {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border) !important;
}

html.dark #sidebar .text-gray-800 {
    color: var(--text) !important;
}

html.dark #sidebar .bg-white {
    background-color: var(--sidebar-bg) !important;
}

html.dark #sidebar .section-header button:hover {
    background-color: var(--surface-2) !important;
}

html.dark #sidebar .text-gray-400 {
    color: var(--text-muted) !important;
}

html.dark .sidebar-btn {
    background: var(--sidebar-btn-bg) !important;
    color: var(--sidebar-btn-text) !important;
}

html.dark .sidebar-btn::before {
    background-color: var(--sidebar-btn-hover-bg) !important;
}

html.dark .sidebar-btn:hover,
html.dark .sidebar-btn.active {
    color: var(--sidebar-btn-hover-text) !important;
}

html.dark .sidebar-btn.active {
    background: var(--accent) !important;
}

html.dark .sidebar-btn.active::before {
    background-color: var(--accent-hover) !important;
}

html.dark #sidebar .border-t {
    border-color: var(--border) !important;
}

html.dark #sidebar .text-gray-500 {
    color: var(--text-muted) !important;
}

/* ── Карточки ─────────────────────────────────────────────────── */
html.dark .card-premium {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 2px 8px var(--shadow-color) !important;
}

html.dark .warehouse-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

html.dark .warehouse-card:hover {
    box-shadow: 0 6px 16px var(--shadow-color) !important;
    border-color: rgba(249,115,22,0.3) !important;
}

html.dark .section-title {
    color: var(--text);
}

/* ── Канбан ─────────────────────────────────────────────────── */
html.dark .kanban-task {
    background-color: var(--card-bg) !important;
    border-color: var(--border) !important;
    box-shadow: 0 2px 8px var(--shadow-color) !important;
    color: var(--text) !important;
}

html.dark .kanban-task h4 {
    color: var(--text) !important;
}

html.dark .kanban-task:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 16px rgba(249,115,22,0.15) !important;
}

html.dark .kanban-options {
    color: var(--text-muted) !important;
}

html.dark .kanban-options:hover {
    background-color: var(--surface-2) !important;
    color: var(--accent) !important;
}

html.dark .kanban-stats {
    color: var(--text-muted) !important;
}

html.dark .kanban-ghost {
    background-color: var(--surface-2) !important;
}

/* ── Инпуты (premium-версии) ─────────────────────────────────── */
html.dark .input-premium {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text) !important;
}

html.dark .input-premium::placeholder {
    color: var(--text-muted) !important;
}

html.dark .input-premium:hover {
    border-color: rgba(255,255,255,0.18) !important;
}

html.dark .input-premium:focus {
    border-color: var(--accent) !important;
    background-color: var(--surface-2) !important;
    box-shadow: 0 0 0 4px rgba(249,115,22,0.15) !important;
}

html.dark .label-premium {
    color: var(--text-muted) !important;
}

/* ── Бейджи ─────────────────────────────────────────────────── */
html.dark .badge-success-premium {
    background-color: rgba(5,150,105,0.15) !important;
    color: #34d399 !important;
    border-color: rgba(5,150,105,0.25) !important;
}

html.dark .badge-info-premium {
    background-color: rgba(249,115,22,0.15) !important;
    color: #fb923c !important;
    border-color: rgba(249,115,22,0.25) !important;
}

html.dark .badge-warning-premium {
    background-color: rgba(217,119,6,0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(217,119,6,0.25) !important;
}

html.dark .badge-danger-premium {
    background-color: rgba(225,29,72,0.15) !important;
    color: #fb7185 !important;
    border-color: rgba(225,29,72,0.25) !important;
}

/* ── Кнопки ─────────────────────────────────────────────────── */
html.dark .btn-secondary-standard {
    background-color: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.dark .btn-secondary-standard:hover {
    background-color: #333348 !important;
}

html.dark .btn-cancel-premium {
    color: var(--text-muted) !important;
}

html.dark .btn-cancel-premium:hover {
    color: var(--text) !important;
}

html.dark .btn-save-premium {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

html.dark .btn-save-premium:hover {
    background: #333348 !important;
}

/* ── Dropdown Premium ─────────────────────────────────────────── */
html.dark .dropdown-premium {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

html.dark .dropdown-premium .separator {
    border-top-color: var(--border) !important;
}

html.dark .dropdown-premium-item {
    color: var(--text-muted) !important;
}

html.dark .dropdown-premium-item:hover {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}

html.dark .dropdown-premium-item:hover svg {
    stroke: var(--accent) !important;
}

/* ── Модальные окна ─────────────────────────────────────────────── */
html.dark .modal-premium-container {
    background: var(--modal-bg) !important;
    border-color: var(--border) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6) !important;
}

html.dark .modal-premium-header,
html.dark .modal-premium-footer {
    background: var(--modal-bg) !important;
    border-color: var(--border) !important;
}

html.dark .modal-premium-header h2 {
    color: var(--text) !important;
}

html.dark .modal-section-label {
    color: var(--text-muted) !important;
}

html.dark .modal-premium-section {
    background: var(--modal-section-bg) !important;
    border-color: var(--border) !important;
}

html.dark .modal-premium-section:hover {
    border-color: rgba(255,255,255,0.12) !important;
}

html.dark .modal-close-btn {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

html.dark .modal-close-btn:hover {
    background: #333348 !important;
    color: var(--text) !important;
}

/* ── Confirm Modal ─────────────────────────────────────────────── */
html.dark .premium-confirm-card {
    background: var(--modal-bg) !important;
    border-color: var(--border) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6) !important;
}

html.dark .premium-confirm-title {
    color: var(--text) !important;
}

html.dark .premium-confirm-message {
    color: var(--text-muted) !important;
}

html.dark .premium-confirm-btn-cancel {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

html.dark .premium-confirm-btn-cancel:hover {
    background: #333348 !important;
    color: var(--text) !important;
}

/* ── Глобальные Tailwind-оверрайды ─────────────────────────────── */
html.dark .bg-white {
    background-color: var(--surface) !important;
}

html.dark .bg-gray-50 {
    background-color: var(--surface-2) !important;
}

html.dark .bg-gray-100 {
    background-color: #2a2a3a !important;
}

html.dark .bg-gray-900 {
    background-color: #0d0d14 !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200 {
    border-color: var(--border) !important;
}

html.dark .border-gray-50 {
    border-color: var(--border) !important;
}

html.dark .text-gray-900 {
    color: var(--text) !important;
}

html.dark .text-gray-700,
html.dark .text-gray-800 {
    color: #c8c8e0 !important;
}

html.dark .text-gray-500,
html.dark .text-gray-600 {
    color: var(--text-muted) !important;
}

html.dark .text-gray-400 {
    color: #5a5a7a !important;
}

html.dark .divide-y > * + * {
    border-color: var(--border) !important;
}

html.dark .hover\:bg-gray-50:hover {
    background-color: var(--surface-2) !important;
}

html.dark .hover\:bg-gray-100:hover {
    background-color: #2a2a3a !important;
}

/* Loader wrap */
html.dark .kbm-loader-wrap {
    background: rgba(25,25,35,0.7) !important;
}

/* Кастомные скроллбары */
html.dark .custom-scrollbar::-webkit-scrollbar-thumb,
html.dark .scrollable-body::-webkit-scrollbar-thumb,
html.dark .scrollable-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
}

html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover,
html.dark .scrollable-body::-webkit-scrollbar-thumb:hover,
html.dark .scrollable-content::-webkit-scrollbar-thumb:hover {
    background: rgba(249,115,22,0.4);
}

/* Theme switcher */
html.dark .theme-switcher {
    background-color: var(--surface-2) !important;
    border-color: var(--border) !important;
}

html.dark .theme-switcher_switch[data-active="true"] {
    background-color: var(--surface) !important;
    color: var(--accent) !important;
}

/* ── Виджеты дашборда ────────────────────────────────────────── */
html.dark #apt-widget {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark .apt-card {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.dark .apt-card:hover {
    background: #333348 !important;
    border-color: rgba(249,115,22,0.3) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

html.dark .apt-card .text-gray-800 { color: var(--text) !important; }
html.dark .apt-card .text-gray-400 { color: var(--text-muted) !important; }
html.dark .apt-progress-track { background: rgba(255,255,255,0.1) !important; }
html.dark .apt-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; }

html.dark #apt-widget .bg-blue-50 { background-color: rgba(59,130,246,0.12) !important; }

/* Все виджеты с shadow-sm + border */
html.dark .shadow-sm.border.border-gray-100 {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark .shadow-sm.border.border-gray-200 {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Округлённые карточки */
html.dark .rounded-xl.bg-white,
html.dark .rounded-2xl.bg-white,
html.dark .rounded-3xl.bg-white {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Иконки с фоновым кружком */
html.dark .rounded-lg.bg-blue-50 { background-color: rgba(59,130,246,0.12) !important; }
html.dark .rounded-lg.bg-orange-100 { background-color: rgba(249,115,22,0.12) !important; }
html.dark .rounded-lg.bg-emerald-100 { background-color: rgba(16,185,129,0.12) !important; }
html.dark .rounded-lg.bg-purple-100 { background-color: rgba(139,92,246,0.12) !important; }
html.dark .rounded-lg.bg-gray-100 { background-color: var(--surface-2) !important; }

/* Таблицы */
html.dark table { color: var(--text); }

html.dark thead th,
html.dark thead td {
    background-color: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

html.dark tbody tr { border-color: var(--border) !important; }
html.dark tbody tr:hover { background-color: var(--surface-2) !important; }
html.dark tbody td { color: var(--text) !important; border-color: var(--border) !important; }
html.dark td.bg-white, html.dark th.bg-white { background-color: var(--surface) !important; }

/* Divide borders */
html.dark .divide-y > * + * { border-color: var(--border) !important; }
html.dark .divide-gray-50 > * + *, html.dark .divide-gray-100 > * + * {
    border-color: var(--border) !important;
}

/* ── Полоса фильтров ──────────────────────────────────────────────
   Промежуточный тон между header (#21212e) и контентом (#191923).
   Цель: ~#1d1d2a — чуть темнее surface, не выбивается из ряда.
   ──────────────────────────────────────────────────────────────── */

/* bg-gray-50/50 — фон полосы фильтров */
html.dark .bg-gray-50\/50 {
    background-color: #1d1d2a !important;
}

/* Граница под фильтрами */
html.dark .border-b.border-gray-100 {
    border-bottom-color: rgba(255,255,255,0.05) !important;
}

/* Select внутри фильтров: bg-white → тёмный */
html.dark select.px-3.py-1 {
    background-color: #252535 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--text-muted) !important;
}

html.dark select.px-3.py-1:focus {
    border-color: var(--accent) !important;
    color: var(--text) !important;
}

html.dark select.px-3.py-1 option {
    background-color: #252535;
    color: var(--text);
}

/* Кнопка сброса сортировки */
html.dark #sortToggleBtn {
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.dark #sortToggleBtn:hover {
    background-color: #2a2a3a !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Специфично для Клиентов, где кнопка отдельно стоит */
html.dark [data-context="clients"] #sortToggleBtn {
    background-color: #252535 !important;
    border-color: rgba(255,255,255,0.1) !important;
    width: 32px !important;
    min-width: 32px !important; /* Гарантируем квадратность */
    height: 32px !important;
    padding: 0 !important; /* Убираем паддинги для точного центрирования */
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important; /* Запрещаем сжатие в flex-контейнере */
}

/* Переключатель вида (list/tile) — bg-slate-100 */
html.dark .bg-slate-100 {
    background-color: #252535 !important;
}

/* Активная кнопка вида — bg-white внутри переключателя */
html.dark .bg-slate-100 .bg-white,
html.dark .bg-slate-100 [class*="bg-white"] {
    background-color: #333348 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Разделители h-px или w-px bg-gray-200 */
html.dark .bg-gray-200 {
    background-color: rgba(255,255,255,0.08) !important;
}

/* Метки "Фільтри:" / "Сортування:" */
html.dark .text-slate-400 {
    color: #5a5a7a !important;
}

/* header-sticky в dark: согласуем с nav */
html.dark .header-sticky {
    background-color: var(--surface) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Тень под header-sticky убираем */
html.dark .header-sticky.shadow-sm {
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* main-content: фон #191923 */
html.dark #main-content,
html.dark .bg-gray-50 {
    background-color: var(--bg) !important;
}

/* Обёртка flex bg-white pt-16 */
html.dark .flex.overflow-hidden.bg-white {
    background-color: var(--bg) !important;
}

/* ── Плиточный вид (Tile View) ─────────────────────────────── */
html.dark #tileView .bg-white {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark #tileView .border-slate-100 {
    border-color: var(--border) !important;
}

/* Футер карточки */
html.dark #tileView .bg-slate-50 {
    background-color: rgba(255,255,255,0.02) !important;
    border-top-color: var(--border) !important;
}

/* Тексты в карточках */
html.dark #tileView .text-slate-800 { color: var(--text) !important; }
html.dark #tileView .text-slate-600 { color: var(--text-muted) !important; }
html.dark #tileView .text-slate-400 { color: #5a5a7a !important; }

/* Аватар-заглушка */
html.dark #tileView .bg-blue-100 {
    background-color: rgba(59,130,246,0.15) !important;
    color: #60a5fa !important;
}

/* ── Статусные бейджи (приглушение цветов) ─────────────────── */
html.dark .bg-amber-100   { background-color: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; }
html.dark .bg-blue-100    { background-color: rgba(59,130,246,0.15) !important; color: #60a5fa !important; }
html.dark .bg-indigo-100  { background-color: rgba(99,102,241,0.15) !important; color: #818cf8 !important; }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.15) !important; color: #34d399 !important; }
html.dark .bg-slate-200    { background-color: rgba(148,163,184,0.15) !important; color: #94a3b8 !important; }
html.dark .bg-purple-100  { background-color: rgba(168,85,247,0.15) !important; color: #c084fc !important; }
html.dark .bg-orange-100  { background-color: rgba(249,115,22,0.15) !important; color: #fb923c !important; }
html.dark .bg-green-100   { background-color: rgba(34,197,94,0.15) !important; color: #4ade80 !important; }
html.dark .bg-red-100     { background-color: rgba(239,68,68,0.15) !important; color: #f87171 !important; }
html.dark .bg-slate-100   { background-color: rgba(148,163,184,0.12) !important; color: #94a3b8 !important; }

/* ── Страница Заказов (Deals) ─────────────────────────────── */

/* Заголовки таблицы (bg-gray-100) */
html.dark th.bg-gray-100 {
    background-color: var(--surface) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text-muted) !important;
}

/* Контейнер сортировки "Сорт:" */
html.dark .flex.items-center.bg-white.border.border-slate-200.rounded-lg {
    background-color: #252535 !important;
    border-color: rgba(255,255,255,0.1) !important;
}

html.dark #sortToggleBtn.hover\:bg-slate-50:hover {
    background-color: #2a2a3a !important;
}

/* Плиточный вид Deals */
html.dark #tileView .bg-white.rounded-2xl {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark #tileView .ring-slate-900\/5 {
    --tw-ring-color: rgba(0,0,0,0.4) !important;
}

/* Дополнительные статусы для Deals */
html.dark .bg-yellow-100  { background-color: rgba(234,179,8,0.15) !important; color: #facc15 !important; }

/* Общие правки для таблиц в Deals */
html.dark #ajaxContent .bg-white {
    background-color: var(--bg) !important;
}

html.dark #ajaxContent td.bg-white {
    background-color: var(--bg) !important;
}

/* Пустое состояние */
html.dark .bg-white.rounded-lg.shadow-inner {
    background-color: var(--surface) !important;
    border: 1px dashed var(--border) !important;
    box-shadow: none !important;
}

/* Floating Actions для Deals */
html.dark #floatingActions {
    background-color: rgba(21,21,30,0.95) !important;
}

/* ── Заголовки страниц (h1) ────────────────────────────────── */
html.dark h1.text-slate-800 {
    color: var(--text) !important;
}

/* ── Страница Компаний (Companies) ────────────────────────── */

/* Переключатели ролей (role-tabs) */
html.dark .role-tab {
    border: none !important;
    box-shadow: none !important;
}

html.dark .role-tab.bg-white {
    background-color: #2a2a3a !important;
    color: #f97316 !important; /* Orange accent */
}

html.dark .role-tab.text-slate-500 {
    color: var(--text-muted) !important;
}

/* Контейнер вкладок */
html.dark .header-sticky .bg-slate-100.border-slate-200\/50 {
    background-color: #1c1c28 !important;
    border-color: rgba(255,255,255,0.05) !important;
}

/* Аватары компаний */
html.dark .bg-blue-50 {
    background-color: #252535 !important;
    color: #60a5fa !important;
}

html.dark .group:hover .bg-blue-50 {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Статусы в компаниях */
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; color: #34d399 !important; }
html.dark .bg-purple-50  { background-color: rgba(168,85,247,0.12) !important; color: #c084fc !important; }

/* Плитки компаний */
html.dark #tileView .from-blue-50.to-indigo-50 {
    background: linear-gradient(to bottom right, #252535, #2a2a3a) !important;
}

html.dark #companiesContent th.bg-gray-50\/50 {
    background-color: var(--surface) !important;
}

html.dark .group.hover\:bg-blue-50\/30:hover {
    background-color: rgba(59,130,246,0.04) !important;
}

/* ── Страница Склада (Inventory) ──────────────────────────── */

/* Карточки складов */
html.dark .warehouse-card {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark .warehouse-card .bg-slate-50 {
    background-color: #252535 !important;
    color: var(--text-muted) !important;
}

html.dark .warehouse-card .text-slate-900 {
    color: var(--text) !important;
}

html.dark .warehouse-card .border-slate-100 {
    border-color: var(--border) !important;
}

/* Кнопка Детали в карточке */
html.dark .warehouse-card .group\/link .bg-slate-50 {
    background-color: #2a2a3a !important;
    border-color: rgba(255,255,255,0.05) !important;
    color: var(--text-muted) !important;
}

html.dark .warehouse-card .group\/link:hover .bg-slate-900 {
    background-color: var(--text) !important;
    color: var(--bg) !important;
}

/* Заголовок "Останні операції" */
html.dark h2.text-slate-900.uppercase {
    color: var(--text) !important;
}

html.dark .p-1\.5.bg-slate-100.rounded-lg.text-slate-500 {
    background-color: #252535 !important;
    color: var(--text-muted) !important;
}

/* Таблица операций */
html.dark .inventory-operations-container {
    background-color: var(--surface) !important;
    border-color: rgba(255,255,255,0.05) !important;
    padding-right: 3px !important; /* "Прячем" скроллбар внутрь рамки, отодвигая его от края */
}

html.dark .inventory-operations-container thead tr.bg-slate-50\/90 {
    background-color: #1c1c28 !important;
    border-bottom-color: var(--border) !important;
}

html.dark .inventory-operations-container tbody.divide-y.divide-slate-50 {
    border-color: var(--border) !important;
}

html.dark .inventory-operations-container tbody.divide-y.divide-slate-50 > tr {
    border-bottom-color: var(--border) !important;
}

html.dark .inventory-operations-container tr.hover\:bg-slate-50\/50:hover {
    background-color: rgba(255,255,255,0.02) !important;
}

html.dark .inventory-operations-container .text-slate-900 {
    color: var(--text) !important;
}

/* Аватар менеджера в таблице */
html.dark .inventory-operations-container .w-6.h-6.bg-slate-50 {
    background-color: #252535 !important;
    border-color: rgba(255,255,255,0.05) !important;
    color: var(--text-muted) !important;
}

/* Бейджи в таблице */
html.dark .bg-emerald-50\/50 { background-color: rgba(16,185,129,0.1) !important; border-color: rgba(16,185,129,0.2) !important; }
html.dark .bg-rose-50\/50    { background-color: rgba(244,63,94,0.1) !important;   border-color: rgba(244,63,94,0.2) !important; }
html.dark .bg-blue-50\/50    { background-color: rgba(59,130,246,0.1) !important;  border-color: rgba(59,130,246,0.2) !important; }/* ── Страница Документов (Documents) ───────────────────────── */

html.dark .header-sticky h1 {
    color: var(--text) !important;
}

/* Кнопка "Звіт про прибутки" в хедере (после унификации) */
html.dark .header-sticky a.text-emerald-600 {
    border-color: rgba(16,185,129,0.2) !important;
    background-color: rgba(16,185,129,0.1) !important;
    color: #34d399 !important;
}

html.dark .header-sticky a.text-emerald-600:hover {
    background-color: rgba(16,185,129,0.2) !important;
}

/* Бейджи типов отчетов (B/P) в списке */
html.dark .inline-flex.bg-blue-50.text-blue-600.border-blue-100 {
    background-color: rgba(59,130,246,0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59,130,246,0.2) !important;
}

html.dark .inline-flex.bg-green-50.text-green-600.border-green-100 {
    background-color: rgba(16,185,129,0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16,185,129,0.2) !important;
}

/* Карточка списка отчетов */
html.dark .card-premium .divide-y.divide-gray-100 {
    border-color: var(--border) !important;
}

html.dark .card-premium .divide-y.divide-gray-100 > li {
    border-bottom-color: var(--border) !important;
}

html.dark .card-premium .hover\:bg-gray-50:hover {
    background-color: rgba(255,255,255,0.02) !important;
}

html.dark .card-premium .text-gray-800 {
    color: var(--text) !important;
}

/* Пустое состояние */
html.dark .border-dashed.border-gray-200 {
    border-color: var(--border) !important;
    background-color: var(--surface) !important;
}

html.dark .border-dashed.border-gray-200 .bg-gray-50 {
    background-color: #252535 !important;
}

/* ── P&L Звіт (Finance Report) ────────────────────────────── */

html.dark main .max-w-5xl.mx-auto {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark .text-center.mb-12.border-b.pb-8 {
    border-bottom-color: var(--border) !important;
}

html.dark .text-center.mb-12.border-b.pb-8 h2 {
    color: var(--text) !important;
}

/* Группы услуг (Income/COGS) */
html.dark [data-context="finance"] .border.rounded-xl.overflow-hidden.shadow-sm,
html.dark .bg-white.rounded-2xl.shadow-sm.border.border-gray-100 {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark .bg-gray-50.px-6.py-4.border-b {
    background-color: #1c1c28 !important;
    border-bottom-color: var(--border) !important;
}

html.dark .bg-gray-50.px-6.py-4.border-b h3 {
    color: var(--text) !important;
}

html.dark .mt-2.pt-2.border-t.bg-gray-50\/50 {
    background-color: rgba(255,255,255,0.02) !important;
    border-top-color: var(--border) !important;
}

/* OPEX Секция */
html.dark .bg-gray-100.px-6.py-4.rounded-xl.mb-4 {
    background-color: #1c1c28 !important;
}

html.dark .bg-gray-100.px-6.py-4.rounded-xl.mb-4 h3 {
    color: var(--text) !important;
}

html.dark .grid-cols-1.md-grid-cols-2.gap-4.px-4 .border-b {
    border-bottom-color: var(--border) !important;
}

/* Финальное резюме (Черный блок) */
html.dark .bg-gray-900.text-white.rounded-3xl.p-10 {
    background-color: #0c0c14 !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

html.dark .bg-gray-900 .text-gray-400 {
    color: var(--text-muted) !important;
}

html.dark .border-l.border-white\/10 {
    border-left-color: rgba(255,255,255,0.1) !important;
}

/* Общие цвета текста в отчете */
html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: var(--text-muted) !important;
}

html.dark .text-gray-800,
html.dark .text-gray-900 {
    color: var(--text) !important;
}

html.dark .text-red-500,
html.dark .text-red-600 {
    color: #f87171 !important;
}

html.dark .text-emerald-600,
html.dark .text-emerald-400 {
    color: #34d399 !important;
}

/* ── Модуль Завдання (Activities) ─────────────────────────── */

html.dark .header-sticky h1.section-title {
    color: var(--text) !important;
}

/* Панель фильтров */
html.dark .filter-bar-activities {
    background-color: #1c1c28 !important;
    border-bottom-color: var(--border) !important;
}

html.dark .filter-bar-activities select,
html.dark .filter-bar-activities span {
    color: var(--text-muted) !important;
}

html.dark .filter-bar-activities select option {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

/* Таблица задач */
html.dark #listView {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark #listView th {
    background-color: #1c1c28 !important;
    border-bottom-color: var(--border) !important;
    color: var(--text-muted) !important;
}

html.dark td.text-cell-activities {
    border-bottom-color: var(--border) !important;
}

html.dark tr.hover\:bg-gray-50\/50:hover td {
    background-color: rgba(255,255,255,0.02) !important;
}

html.dark td.text-cell-activities button,
html.dark td.text-cell-activities p {
    color: var(--text) !important;
}

html.dark td.text-cell-activities .text-gray-500 {
    color: var(--text-muted) !important;
}

/* Карточки (Tile View) */
html.dark .card-activities {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark .card-activities h3.title-activities button {
    color: var(--text) !important;
}

html.dark .card-activities h3.title-activities button:hover {
    color: #60a5fa !important;
}

html.dark .card-footer-activities {
    background-color: #1c1c28 !important;
    border-top-color: var(--border) !important;
}

html.dark .card-footer-activities span {
    color: var(--text-muted) !important;
}

/* Пустое состояние */
html.dark .empty-box-activities {
    background-color: rgba(255,255,255,0.01) !important;
    border-color: var(--border) !important;
}

/* ── Модули Пользователи (Employees/Groups/Users) ───────────────── */

html.dark .header-sticky .section-title,
html.dark h1.text-2xl.font-bold,
html.dark h1.text-2xl.font-black {
    color: var(--text) !important;
}

html.dark .header-sticky {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* ── Модуль Шаблоны ───────────────── */

html.dark #templates-grid .bg-slate-50 {
    background-color: rgba(255,255,255,0.02) !important;
}

html.dark #templates-grid .border-slate-100 {
    border-color: var(--border) !important;
}

/* ── Модуль Історія активності ───────────────── */

html.dark .filter-select {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.dark .filter-select:hover {
    background-color: var(--bg-body) !important;
}

html.dark .filter-label {
    color: var(--text-muted) !important;
}

html.dark #auditLogTable .bg-slate-100 {
    background-color: var(--bg-body) !important;
    color: var(--text-muted) !important;
}

/* Таблицы пользователей и групп */
html.dark #employeesTable th,
html.dark #groupsTable th {
    background-color: #1c1c28 !important;
    border-bottom-color: var(--border) !important;
    color: var(--text-muted) !important;
}

html.dark #employeesTable td,
html.dark #groupsTable td {
    border-bottom-color: var(--border) !important;
}

/* Аватары и иконки групп */
html.dark .w-10.h-10.rounded-2xl.bg-gray-100,
html.dark .w-8.h-8.rounded-xl.bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted) !important;
}

html.dark tr:hover .w-10.h-10.rounded-2xl,
html.dark tr:hover .w-8.h-8.rounded-xl {
    background-color: rgba(96, 165, 250, 0.1) !important;
    color: #60a5fa !important;
}

/* Текст в таблицах */
html.dark #employeesTable .text-slate-700,
html.dark #groupsTable .text-slate-700,
html.dark #groupsTable .text-slate-800 {
    color: var(--text) !important;
}

html.dark #employeesTable .text-slate-600,
html.dark #employeesTable .text-slate-500,
html.dark #employeesTable .text-slate-400,
html.dark #groupsTable .text-slate-500 {
    color: var(--text-muted) !important;
}

/* Модалки подтверждения (локальные стили) */
html.dark #premiumConfirmModal .bg-white {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark #premiumConfirmModal .text-slate-800 {
    color: var(--text) !important;
}

html.dark #premiumConfirmModal .text-slate-500 {
    color: var(--text-muted) !important;
}

html.dark #premiumConfirmModal .bg-slate-50 {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-top-color: var(--border) !important;
}

/* --- PASSPORT STAMP STYLES (PRINT) --- */
.grid-stamp-f2 {
    position: absolute;
    bottom: 5mm;
    left: 20mm;
    width: 185mm;
    height: 40mm;
    display: grid;
    grid-template-columns: 10mm 12mm 10mm 12mm 15mm 20mm 58mm 15mm 15mm 20mm;
    grid-template-rows: repeat(8, 5mm);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background: transparent;
    box-sizing: border-box;
    z-index: 30;
}

.grid-stamp-f2 > div {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 8pt;
    text-align: center;
    width: 100%;
    height: 100%;
}

.grid-stamp-f2 .div3 {
    grid-area: 1 / 7 / 4 / 11;
    font-weight: bold;
    font-size: 20pt !important;
    font-style: italic !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.grid-stamp-f2 .div2 {
    grid-area: 4 / 7 / 9 / 8;
    font-weight: bold;
    font-size: 18pt !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.grid-stamp-f2 .div30 { grid-area: 5 / 8 / 6 / 9; font-weight: bold; font-size: 11pt !important; }
.grid-stamp-f2 .div31 { grid-area: 5 / 9 / 6 / 10; font-weight: bold; font-size: 11pt !important; }
.grid-stamp-f2 .div32 { grid-area: 5 / 10 / 6 / 11; font-weight: bold; font-size: 11pt !important; }

.grid-stamp-f2 .div6, .grid-stamp-f2 .div7 { justify-content: flex-start !important; padding-left: 1mm; }
.grid-stamp-f2 .div10 { justify-content: flex-start !important; padding-left: 1.5mm; }
.grid-stamp-f2 .div11 { justify-content: flex-start !important; padding-left: 1.5mm; }
.grid-stamp-f2 .div38, .grid-stamp-f2 .div39 { justify-content: center !important; font-size: 7.5pt !important; }

.grid-stamp-f2 .div1 {
    grid-area: 6 / 8 / 9 / 11;
    flex-direction: column;
    font-weight: bold;
    font-size: 11pt !important;
    line-height: 1.1;
    padding-top: 5mm;
    padding-bottom: 0.5mm;
    justify-content: space-around !important;
    margin-left: -2px;
    margin-right: 2px;
}

/* Form 2a */
.grid-stamp-f2a {
    position: absolute;
    bottom: 5mm;
    left: 20mm;
    width: 185mm;
    height: 15mm;
    display: grid;
    grid-template-columns: 10mm 12mm 10mm 12mm 15mm 20mm 86mm 20mm;
    grid-template-rows: 5mm 10mm;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background: transparent;
    box-sizing: border-box;
    z-index: 30;
    border: none;
}

.grid-stamp-f2a > div {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 8pt;
    text-align: center;
    width: 100%;
    height: 100%;
}

.grid-stamp-f2a .col-1 { grid-area: 1 / 1 / 3 / 2; }
.grid-stamp-f2a .col-2 { grid-area: 1 / 2 / 3 / 3; }
.grid-stamp-f2a .col-3 { grid-area: 1 / 3 / 3 / 4; }
.grid-stamp-f2a .col-4 { grid-area: 1 / 4 / 3 / 5; }
.grid-stamp-f2a .col-5 { grid-area: 1 / 5 / 3 / 6; }
.grid-stamp-f2a .col-6 { grid-area: 1 / 6 / 3 / 7; }

.grid-stamp-f2a .designation {
    grid-area: 1 / 7 / 3 / 8;
    font-size: 16pt;
    font-weight: bold;
    justify-content: center;
    padding-right: 5mm;
}

.grid-stamp-f2a .page-label {
    grid-area: 1 / 8 / 3 / 9;
    justify-content: center;
    padding-right: 0;
    font-size: 14pt;
    font-weight: bold;
    align-items: center;
}

/* Debug Markup */
body.show-debug .grid-stamp-f2 > div,
body.show-debug .grid-stamp-f2a > div {
    outline: 1px dashed rgba(255, 165, 0, 0.5);
}

/* --- Migrated Header & Sidebar Styles --- */
@keyframes glow-blink {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8));
    }
    50% {
        opacity: 0.5;
        filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.2));
    }
}

.animate-glow-blink {
    animation: glow-blink 1.5s ease-in-out infinite;
}

#header-search-bar { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#header-search-bar:focus-within { width: 320px !important; }

/* Layout Overrides for Header-only Menu */
body[data-menu-layout="header"] #main-content {
    margin-left: 0 !important;
}
body[data-menu-layout="header"] #sidebar {
    display: none !important;
}
body[data-menu-layout="header"] #toggleSidebarFull {
    display: none !important;
}

/* Sidebar Styles */
html.sidebar-collapsed #sidebar {
    width: 5rem !important;
}

html.sidebar-collapsed #main-content {
    margin-left: 5rem !important;
}

html.sidebar-collapsed .sidebar-text,
html.sidebar-collapsed [data-section-arrow] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

html.sidebar-collapsed .section-header {
    display: none !important;
}

[data-section-item].section-pre-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

[data-section-item] {
    overflow: hidden;
}

.sidebar-text {
    display: inline-block;
}

#sidebar .overflow-y-auto::-webkit-scrollbar {
    display: none;
}

#sidebar .overflow-y-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar-btn {
    padding: 10px 16px;
    border: unset;
    border-radius: 15px;
    color: var(--sidebar-btn-text);
    z-index: 1;
    background: var(--sidebar-btn-bg);
    position: relative;
    font-weight: 800;
    font-size: 13px;
    box-shadow: none;
    transition: all 250ms;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    margin-bottom: 0.35rem;
}

.sidebar-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 15px;
    background-color: var(--sidebar-btn-hover-bg);
    z-index: -1;
    box-shadow: none;
    transition: all 250ms;
}

.sidebar-btn:hover, .sidebar-btn.active {
    color: var(--sidebar-btn-hover-text);
}

.sidebar-btn:hover::before, .sidebar-btn.active::before {
    width: 100%;
}

.sidebar-btn .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    flex-shrink: 0;
    margin-right: 0.75rem;
    transition: color 250ms;
}

.sidebar-btn:hover .icon-wrapper, .sidebar-btn.active .icon-wrapper {
    color: var(--sidebar-btn-hover-text);
}

.sidebar-btn .icon-wrapper svg {
    width: 1.25rem;
    height: 1.25rem;
}