:root {
    /* Default Neon Purple from sweeteye.art (Superadmin & Login) */
    --color-primary: #BF24FF;
    /* Channel form of the same colour — Tailwind needs it to build `primary/20` etc. */
    --color-primary-rgb: 191 36 255;
    --color-primary-hover: #9c15d4;
    --color-glow: rgba(191, 36, 255, 0.12);
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
body {
    background-image: radial-gradient(circle at 50% 0%, var(--color-glow) 0%, #0a0a0a 45%);
    background-attachment: fixed;
}

/* Tailwind's text-3xl/text-5xl set line-height equal to font-size (ratio 1), which
   leaves no room above cap-height for Czech/Slovak diacritics (Ý, Č, Ř...) — on the
   Syne display font those accents render right at the clipped edge of the line box
   and look faint/cut off. A touch of extra line-height fixes it without affecting
   flex-centered badges that use this font (they center by box, not by line-height). */
.font-display {
    line-height: 1.15;
}

/* ─── Scrollbar ─────────────────────────────────────────────────────────── */
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }

/* ─── Custom Form Elements ─────────────────────────────────────────────── */

/* Checkboxes */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid #404040;
    border-radius: 4px;
    background: #0a0a0a;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    flex-shrink: 0;
}
input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
input[type="checkbox"]:hover { border-color: var(--color-primary); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Radio buttons */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid #404040;
    border-radius: 50%;
    background: #0a0a0a;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    flex-shrink: 0;
}
input[type="radio"]:checked {
    border-color: var(--color-primary);
}
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--color-primary);
    border-radius: 50%;
}
input[type="radio"]:hover { border-color: var(--color-primary); }

/* Select dropdowns */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 2.5rem !important;
    cursor: pointer;
    color-scheme: dark;
}
select:focus { outline: none; }

/* Range sliders */
input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    background: #2a2a2a;
    border-radius: 99px;
    cursor: pointer;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(191, 36, 255, 0.2);
    transition: box-shadow 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(191, 36, 255, 0.3);
}
input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}
input[type="range"]::-moz-range-track {
    height: 4px;
    background: #2a2a2a;
    border-radius: 99px;
}

/* File inputs */
input[type="file"]::file-selector-button {
    appearance: none;
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
input[type="file"]::file-selector-button:hover {
    background: var(--color-primary-hover);
}

/* Date/time inputs */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
    color-scheme: dark;
}

/* ─── Focus Styles (keyboard nav) ─────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible, a:focus-visible { border-radius: 8px; }

/* ─── Animations ──────────────────────────────────────────────────────── */
/* Opacity only — deliberately NO transform. Every page wrapper carries
   .animate-fade-in, and an element with any non-none transform becomes the
   containing block for its `position: fixed` descendants. That made every modal
   nested inside a page (Výdaje, Faktury, ...) position and clip against the
   scrolling page wrapper instead of the viewport, cutting off its lower half.
   Dropping the animation's fill-mode wasn't enough: while the animation is
   running — or frozen at frame 0 in a throttled/background tab — the transform
   is still applied and the bug comes back. Removing it is the only robust fix. */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(8px); }
}
@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-glow); }
    50% { box-shadow: 0 0 20px 6px var(--color-glow); }
}

/* NOTE: deliberately no `forwards` fill-mode here. Every page wrapper carries
   .animate-fade-in, and fadeIn's keyframes set `transform: translateY(...)`. With
   `forwards` the element kept a non-none transform permanently, which makes it the
   containing block for any `position: fixed` descendant — so all the modals nested
   inside a page (Výdaje, Faktury, ...) were being positioned and CLIPPED against the
   scrolling page wrapper instead of the viewport, cutting off their lower half.
   The animation's end state is identical to the natural state, so dropping the fill
   mode looks the same and lets the transform reset to `none` when it finishes. */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-fade-out { animation: fadeOut 0.3s ease-out forwards; }
.animate-modal-scale { animation: modalScaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-toast-slide { animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-toast-out { animation: toastSlideOut 0.3s ease-in forwards; }
.animate-spin-custom { animation: spin 1s linear infinite; }

/* ─── Skeleton Loader ─────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #242424 50%, #1a1a1a 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.w-3\/4 { width: 75%; }
.skeleton-text.w-1\/2 { width: 50%; }
.skeleton-title { height: 22px; margin-bottom: 12px; }
.skeleton-block { height: 60px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

/* Skeleton table row */
.skeleton-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #1a1a1a;
    align-items: center;
}

/* ─── Loading Spinner Utility ─────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
.spinner-sm { width: 12px; height: 12px; }
.spinner-lg { width: 20px; height: 20px; border-width: 3px; }

/* ─── Glassmorphism utility ───────────────────────────────────────────── */
.glass {
    background: rgba(23, 23, 23, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/*
 * Same look, no blur. backdrop-filter is composited per element, so a page that stacks
 * dozens of them — the superadmin company list, say — turns into a slideshow on any
 * machine without GPU acceleration. Where the count is high, use this instead.
 */
.glass-flat {
    background: #171717;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ─── Button States ───────────────────────────────────────────────────── */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Invoice Print Styles ────────────────────────────────────────────── */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    .invoice-watermark {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: #999;
        font-family: 'Inter', sans-serif;
        opacity: 0.8;
    }
}

/* ─── Context Menu ────────────────────────────────────────────────────── */
.context-menu {
    position: fixed;
    background: #171717;
    border: 1px solid #2a2a2a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    border-radius: 12px;
    padding: 6px;
    min-width: 170px;
    z-index: 99999;
    display: none;
    font-family: 'Inter', sans-serif;
    animation: modalScaleIn 0.15s ease-out forwards;
}
.context-menu-item {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #e5e5e5;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.12s ease;
    user-select: none;
}
.context-menu-item:hover {
    background: var(--color-primary);
    color: white;
}
.context-menu-item.danger:hover {
    background: #dc2626;
    color: white;
}
.context-menu-separator {
    height: 1px;
    background: #2a2a2a;
    margin: 4px 0;
}

/* ─── Drag and Drop Overlay ───────────────────────────────────────────── */
.drag-overlay {
    position: fixed;
    inset: 0;
    background: rgba(168, 85, 247, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 3px dashed var(--color-primary);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Inter', sans-serif;
    animation: fadeIn 0.15s ease-out;
}
.drag-overlay-card {
    background: #171717;
    border: 1px solid #2a2a2a;
    padding: 32px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

/* ─── Lasso Selection Box ─────────────────────────────────────────────── */
#cloud-lasso-box {
    position: fixed;
    border: 1.5px solid var(--color-primary);
    background: rgba(191, 36, 255, 0.07);
    pointer-events: none;
    z-index: 9998;
    border-radius: 4px;
}

/* ─── Smooth transitions on nav items ────────────────────────────────── */
a, button { transition-property: color, background-color, border-color, opacity, transform, box-shadow; transition-duration: 150ms; transition-timing-function: ease; }

/* ─── Empty State ─────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    color: #4b5563;
    text-align: center;
}
.empty-state-icon {
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 4px;
}
.empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
}
.empty-state-desc {
    font-size: 13px;
    color: #374151;
    max-width: 280px;
    line-height: 1.5;
}

/* ─── Custom Form Elements (Select, File) ────────────────────────────── */

.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}
.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    border: 1px solid #1f2937;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #ffffff;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.custom-select-trigger:hover {
    border-color: var(--primary-color, #a855f7);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.1);
}
.custom-select-trigger.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #110d14;
    border: 1px solid #2d1f36;
    border-radius: 0.5rem;
    margin-top: 4px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    max-height: 250px;
    overflow-y: auto;
}
.custom-select-wrapper.open .custom-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.custom-select-option {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}
.custom-select-option:hover {
    background-color: rgba(168, 85, 247, 0.1);
    color: #ffffff;
}
.custom-select-option.selected {
    background-color: var(--primary-color, #a855f7);
    color: #ffffff;
    font-weight: bold;
}

/* Hide original selects that are initialized */
select.custom-select-initialized {
    display: none !important;
}

/* Custom File Input */
.custom-file-wrapper {
    position: relative;
    width: 100%;
}
.custom-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #000000;
    border: 1px dashed #374151;
    border-radius: 0.75rem;
    padding: 1.5rem;
    color: #9ca3af;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.custom-file-label:hover {
    border-color: var(--primary-color, #a855f7);
    background-color: rgba(168, 85, 247, 0.05);
    color: #ffffff;
}
.custom-file-wrapper.has-file .custom-file-label {
    border: 1px solid var(--primary-color, #a855f7);
    background-color: rgba(168, 85, 247, 0.1);
    color: var(--primary-color, #a855f7);
    font-weight: bold;
}
.custom-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}