/* ============================================================================
   DockVault Vault Service - Additional Components & Utilities
   Tabs, Badges, Alerts, Tables, Theme Switcher, etc.
   ============================================================================ */

/* ============================================================================
   SCREEN & LAYOUT MANAGEMENT
   ============================================================================ */
.screen {
    display: none;
}

.screen.active {
    display: block;
    opacity: 1;
    animation: fadeIn var(--transition-base) ease-out;
}

/* ============================================================================
   TABS
   ============================================================================ */
.tabs {
    display: flex;
    gap: var(--space-sm);
    border-bottom: 2px solid var(--surface-3);
    margin-bottom: var(--space-xl);
    overflow-x: auto;
}

.tab-btn {
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-tertiary);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    margin-bottom: -2px;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: var(--hover-overlay);
}

.tab-btn.active {
    color: var(--brand-secondary);
    border-bottom-color: var(--brand-secondary);
}

.tab-content {
    display: none;
    animation: fadeInUp var(--transition-base);
}

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

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

/* ============================================================================
   BADGES
   ============================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-secondary);
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.badge-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.badge-neutral {
    background: var(--surface-2);
    color: var(--text-secondary);
}

/* ============================================================================
   ALERTS & NOTIFICATIONS
   ============================================================================ */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    animation: slideInRight var(--transition-base);
}

/* Raw-icon alerts (a leading <svg> followed by .alert-content or inline text): keep the icon from
   squishing under flex and nudge it onto the first text line instead of the line-box top. */
.alert > svg { flex-shrink: 0; margin-top: 0.15em; }

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

.alert-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.alert-message {
    font-size: var(--text-sm);
    opacity: 0.9;
}

/* Alert Variants */
.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-left-color: var(--info);
    color: var(--info);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-left-color: var(--success);
    color: var(--success);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: var(--warning);
    color: var(--warning);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-left-color: var(--error);
    color: var(--error);
}

/* ============================================================================
   TABLES
   ============================================================================ */
.table-container {
    background: var(--surface-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--surface-3);
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: var(--surface-1);
    border-bottom: 1px solid var(--surface-3);
}

.table th {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--surface-3);
    color: var(--text-secondary);
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--hover-overlay);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================================================
   THEME SWITCHER
   ============================================================================ */
.theme-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.theme-toggle {
    position: relative;
    width: 3rem;
    height: 1.75rem;
    background: var(--surface-3);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base);
}

.theme-toggle:hover {
    background: var(--surface-4);
}

.theme-toggle-slider {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--surface-0);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.theme-toggle.active .theme-toggle-slider {
    transform: translateX(1.25rem);
}

.theme-toggle-icon {
    transition: transform var(--transition-base);
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */
.spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--surface-3);
    border-top-color: var(--brand-secondary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 50%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

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

.skeleton-text {
    height: 1rem;
    margin-bottom: var(--space-sm);
}

.skeleton-heading {
    height: 2rem;
    width: 60%;
    margin-bottom: var(--space-md);
}

.skeleton-card {
    height: 200px;
    width: 100%;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Text Utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-error { color: var(--error) !important; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Spacing Utilities */
.m-0 { margin: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Display Utilities */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flex Utilities */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* Gap Utilities */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Width Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }

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

/* Shadow Utilities */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */
@media (max-width: 768px) {
    .container {
        padding: var(--space-md);
    }
    
    .navbar-container {
        padding: 0 var(--space-md);
    }
    
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* ============================================================================
   SCROLLBAR STYLING (Webkit browsers)
   ============================================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--surface-4);
}

/* ============================================================================
   SELECTION STYLING
   ============================================================================ */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(59, 130, 246, 0.3);
    color: var(--text-primary);
}

/* ============================================================================
   THE HIDDEN ATTRIBUTE MEANS HIDDEN
   ============================================================================
   The user agent's `[hidden] { display: none }` is a plain rule on a single
   attribute selector, so ANY class that sets display beats it — `.btn`, `.alert`,
   `.badge`, `.form-group`, a flex container. Setting `el.hidden = true` then does
   nothing visible, and the element goes on painting.

   This sheet had accumulated thirteen one-off restorations for exactly that, each
   added after someone found a control that would not disappear: the copied-items
   button and panel, the rename error and warning, the upload-link dialog footer,
   the preview container, the groups dropdown, the audit cards, the bulk bar. That
   is not thirteen bugs. It is one mechanical fact being paid for retail, thirteen
   times, and the fourteenth was already waiting — index.html carries 76 `hidden`
   attributes and most had no restoration at all.

   So: once, generally, for every element that will ever carry it.

   Checked before shipping it, because `!important` is not a thing to scatter: the
   rule can only break an element that is REVEALED BY A CLASS while still carrying
   the attribute, since anything that clears the attribute stops matching. No CSS
   rule in this codebase grants display through a state class (.active/.open/.show),
   and no element carries both such a class and `hidden`. Modals use .modal/.active
   and carry no hidden attribute, so this cannot black one out.
   ============================================================================ */
[hidden] { display: none !important; }