/* ============================================================
   EliteDrive — Site-wide glassmorphism overlay
   Applies translucent surfaces + backdrop-blur across every
   shared component. Finder UI has its own glass rules in
   finder.css and is left untouched. Tokens from tokens.css
   are the single source of truth — no raw colors here.
   ============================================================ */

/* -------- 1. Vibrant backdrop so blur has something to blur ---
   Without chromatic background the glass layer is invisible.
   Pastel mono gradient keeps the brand; dark variant below. */
body {
    background-color: var(--color-background);
    background-image:
        radial-gradient(1100px 700px at -5% -10%, rgba(156, 122, 58, 0.14), transparent 55%),
        radial-gradient(1000px 600px at 110% 0%, rgba(74, 106, 138, 0.14), transparent 55%),
        radial-gradient(900px 800px at 50% 115%, rgba(78, 122, 92, 0.12), transparent 55%),
        linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 45%, var(--gray-150) 100%);
    background-attachment: fixed;
}

[data-theme="dark"] body {
    background-image:
        radial-gradient(1100px 700px at -5% -10%, rgba(198, 165, 106, 0.10), transparent 55%),
        radial-gradient(1000px 600px at 110% 0%, rgba(127, 156, 192, 0.10), transparent 55%),
        radial-gradient(900px 800px at 50% 115%, rgba(127, 167, 142, 0.08), transparent 55%),
        linear-gradient(180deg, #0B0D10 0%, #12151A 50%, #0E1013 100%);
}

/* -------- 2. Card becomes glass by default -------------------- */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-color: var(--glass-border-soft);
    box-shadow: var(--shadow-sm), var(--shadow-inset);
}

/* Nested cards (card-in-card) get a stronger fill so text
   stays legible against the parent glass. */
.card .card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
}

/* Opt-out for places that need solid surface (dropdowns, menus). */
.card--solid {
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--color-border);
}

/* -------- 3. Tile (file/folder) glass ------------------------- */
.tile {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-color: var(--glass-border-soft);
    box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.tile:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border);
}

/* -------- 4. Table surface glass ------------------------------ */
.table {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-color: var(--glass-border-soft);
    box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.table thead th {
    background: var(--glass-bg-sunken);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-bottom-color: var(--glass-border-soft);
}
.table tbody td {
    border-bottom-color: var(--glass-border-soft);
}
.table tbody tr:hover {
    background: var(--glass-bg-sunken);
}

/* -------- 5. Form controls translucent ------------------------ */
.form-control {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-color: var(--glass-border-soft);
}
.form-control:hover:not(:disabled) {
    background: var(--glass-bg-strong);
    border-color: var(--color-border-strong);
}
.form-control:focus {
    background: var(--glass-bg-strong);
}
.form-control:disabled {
    background: var(--glass-bg-sunken);
}

/* Selects render the <option> list from the OS, which cannot be
   made translucent — but the collapsed control itself matches. */

/* -------- 6. Buttons: glass base, primary stays solid --------- */
.btn {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-color: var(--glass-border-soft);
    box-shadow: var(--shadow-xs), var(--shadow-inset);
}
.btn:hover:not(:disabled) {
    background: var(--glass-bg-strong);
    border-color: var(--color-border-strong);
}
.btn--primary {
    background: var(--color-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.btn--ghost {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
}
.btn--ghost:hover:not(:disabled) {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.btn--danger {
    background: var(--color-danger);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* -------- 7. Badges translucent ------------------------------- */
.badge {
    background: var(--glass-bg);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-color: var(--glass-border-soft);
}

/* -------- 8. Upload list items -------------------------------- */
.upload-item {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-color: var(--glass-border-soft);
}

/* -------- 9. <details>/<summary> glass panels ----------------- */
details.card > summary {
    padding: var(--space-1) 0;
    outline: none;
}
details.card[open] > summary {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--glass-border-soft);
}
details.card summary::marker { color: var(--color-foreground-subtle); }

/* -------- 10. Scrollable inner panels keep the glass feel ----- */
.glass-pane {
    background: var(--glass-bg-sunken);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-md);
}

/* -------- 11. Focus ring stays visible on glass --------------- */
:where(.form-control, .btn):focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* -------- 12. Fallback for no backdrop-filter support --------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card,
    .tile,
    .table,
    .table thead th,
    .form-control,
    .btn,
    .badge,
    .upload-item,
    .glass-pane {
        background: var(--color-surface);
        border-color: var(--color-border);
    }
    .btn--ghost { background: transparent; }
}

/* ============================================================
   Share dialog (Finder)
   ============================================================ */
.share-dialog__backdrop {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background: rgba(15, 17, 21, 0.45);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    z-index: var(--z-modal, 1000);
    padding: var(--space-4);
    animation: share-fade var(--duration-base) var(--ease-out);
}
.share-dialog {
    width: min(560px, 100%);
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), var(--shadow-inset);
    overflow: hidden;
    animation: share-pop var(--duration-slow) var(--ease-spring);
}
.share-dialog__header {
    padding: var(--space-5) var(--space-6) var(--space-3);
    border-bottom: 1px solid var(--glass-border-soft);
}
.share-dialog__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-foreground);
}
.share-dialog__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-foreground-subtle);
    margin: var(--space-1) 0 0;
    word-break: break-word;
}
.share-dialog__body {
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.share-dialog__footer {
    padding: var(--space-3) var(--space-6) var(--space-5);
    border-top: 1px solid var(--glass-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}
.share-dialog__section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-foreground-subtle);
    margin: 0;
}
.share-dialog__tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--glass-bg-sunken);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-1);
}
.share-dialog__tab {
    flex: 1;
    min-height: 36px;
    background: transparent;
    border: 0;
    color: var(--color-foreground-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.share-dialog__tab[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-foreground);
    box-shadow: var(--shadow-xs);
}
.share-dialog__subject-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 180px;
    overflow-y: auto;
    padding: var(--space-1);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-md);
    background: var(--glass-bg-sunken);
}
.share-dialog__subject {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 40px;
}
.share-dialog__subject:hover,
.share-dialog__subject[aria-selected="true"] {
    background: var(--glass-bg-strong);
}
.share-dialog__subject[aria-selected="true"] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}
.share-dialog__subject-primary { font-weight: var(--font-weight-medium); }
.share-dialog__subject-secondary {
    font-size: var(--font-size-xs);
    color: var(--color-foreground-subtle);
    margin-left: auto;
}
.share-dialog__existing {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 200px;
    overflow-y: auto;
    padding: var(--space-1);
}
.share-dialog__existing-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}
.share-dialog__existing-meta {
    font-size: var(--font-size-xs);
    color: var(--color-foreground-subtle);
}
.share-dialog__empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-foreground-subtle);
    font-size: var(--font-size-sm);
}
.share-dialog__error {
    padding: var(--space-2) var(--space-3);
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
@keyframes share-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes share-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* -------- 13. Reduced transparency a11y hint ------------------ */
@media (prefers-reduced-transparency: reduce) {
    .card,
    .tile,
    .table,
    .form-control,
    .btn,
    .badge,
    .upload-item,
    .glass-pane,
    .navbar,
    .sidebar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--color-surface) !important;
        border-color: var(--color-border) !important;
    }
    .btn--ghost { background: transparent !important; }
    .btn--primary { background: var(--color-primary) !important; }
    .btn--danger  { background: var(--color-danger)  !important; }
}