/* ==========================================================================
   FileDrop-specific components, restyled with the MS365 UI Kit (Fluent)
   design tokens from css/theme/tokens.css. Loaded after the theme layer on
   every page. Only FileDrop's own class names live here — Bootstrap
   primitives get only the small button-alignment polish block below, and the
   c-* kit components are left to the theme CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Legacy token aliases.
   FileDrop's JS sets inline colors with the old variable names (e.g. the
   copy-button "Copied!" state and the reset-password requirement icons).
   Alias them onto the kit tokens so that logic stays untouched.
   -------------------------------------------------------------------------- */
:root {
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SFMono-Regular", Consolas, monospace;
    --success: var(--color-success);
    --danger: var(--color-danger);
    --warning: var(--color-warning);
}

/* --------------------------------------------------------------------------
   1. Bootstrap button polish — align the stock buttons used inside forms and
   modals to Fluent (accent colors come from the remapped --bs-* tokens;
   here we pin the surfaces and the radius to the kit scale).
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
}

.btn-primary {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
    color: var(--color-on-primary);
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-danger {
    color: var(--color-on-primary);
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    color: var(--color-on-primary);
    background: var(--color-danger);
    border-color: var(--color-danger);
    filter: brightness(.92);
}

.btn-warning {
    color: #242424;
    background: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-warning:hover,
.btn-warning:focus-visible {
    color: #242424;
    background: var(--color-warning);
    border-color: var(--color-warning);
    filter: brightness(.94);
}

.btn-outline-secondary {
    color: var(--color-text-secondary);
    border-color: var(--color-border-strong);
}

.btn-outline-secondary:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    color: var(--color-primary-hover);
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}

.btn-outline-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-outline-danger:hover {
    color: var(--color-danger);
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
}

/* ==========================================================================
   2. Dashboard stat cards
   ========================================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stat-card {
    position: relative;
    padding: var(--panel-padding);
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
}

.stat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
    background: rgba(15, 108, 189, .1);
    border-radius: var(--radius-sm);
}

.stat-card-icon .lucide {
    width: 18px;
    height: 18px;
}

.stat-card-label {
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stat-card-value {
    color: var(--color-text);
    font-size: 1.9rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -.02em;
    line-height: var(--line-height-tight);
}

.stat-card-sublabel {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    word-break: break-word;
}

.stat-max-storage {
    color: var(--color-text-muted);
    font-size: .45em;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* The upload card doubles as the drop zone surface. */
.stat-card.upload-card {
    display: flex;
    align-items: stretch;
    padding: 0;
}

.stat-card.upload-card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
}

.stat-card.upload-card .upload-drop-zone {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   3. Upload drop zone and options
   ========================================================================== */
.upload-drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px;
    cursor: pointer;
    text-align: center;
    background: var(--color-surface);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    transition: border-color .15s ease, background-color .15s ease;
}

.upload-drop-zone:hover {
    background: rgba(15, 108, 189, .05);
    border-color: var(--color-primary);
}

.upload-drop-zone.drag-over {
    background: rgba(15, 108, 189, .12);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.upload-drop-zone.uploading {
    pointer-events: none;
    opacity: .7;
}

.upload-drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.upload-drop-zone-icon {
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: 44px;
    line-height: 1;
}

.upload-drop-zone-text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.upload-drop-zone-subtext {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.upload-drop-zone-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.upload-options {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}

.upload-options-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--color-text-secondary);
    background: none;
    border: 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: color .15s ease;
}

.upload-options-toggle:hover {
    color: var(--color-primary);
}

.upload-options-toggle .lucide {
    font-size: 16px;
    transition: transform .15s ease;
}

.upload-options-panel {
    display: none;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
}

.upload-options-panel.open {
    display: block;
}

.upload-options-field {
    margin-bottom: var(--space-3);
}

.upload-options-field:last-child {
    margin-bottom: 0;
}

.upload-options-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.upload-options-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.upload-options-field input[type="number"] {
    width: 100%;
    margin-top: 6px;
    padding: 6px 10px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.upload-options-field input[type="number"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* dashboard.js toggles a .disabled class (not the attribute) on the
   access-timeout input when "keep forever" is checked. */
.upload-options-field input[type="number"].disabled,
.upload-options-field input.disabled {
    cursor: not-allowed;
    opacity: .5;
    background: var(--color-surface-muted);
}

.upload-options-hint {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   4. Files section header + search
   ========================================================================== */
.files-section {
    margin-top: var(--space-2);
}

.design-section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.design-title-group h2 {
    margin: 0 0 4px;
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -.01em;
}

.design-title-group p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.search-section {
    margin-bottom: var(--space-4);
}

.search-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.search-input-group {
    position: relative;
    flex: 1;
}

.search-input-group .search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    color: var(--color-text-muted);
    font-size: 18px;
    pointer-events: none;
    transform: translateY(-50%);
}

#search-input {
    /* Inside the c-command-bar input-group Bootstrap sizes the input;
       a fixed width here would force the group to wrap. */
    min-height: var(--control-height);
    padding: 8px 14px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    font-family: inherit;
    font-size: var(--font-size-md);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#search-input::placeholder {
    color: var(--color-text-muted);
}

#search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.search-actions {
    display: flex;
    gap: var(--space-2);
}

.btn-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--control-height);
    padding: 0 var(--control-padding-x);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-search-primary {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-search-primary:hover {
    color: var(--color-on-primary);
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-search-ghost {
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

.btn-search-ghost:hover {
    color: var(--color-primary-hover);
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}

/* ==========================================================================
   5. File cards
   ========================================================================== */
.file-cards-list {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* Inside a card the list blends into the card surface: rows are separated
   by hairlines only, matching the OneDrive/Fluent list treatment. */
.card .file-cards-list {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.card .c-pagination-bar {
    padding: 12px 22px;
}

.file-card {
    padding: var(--space-4) 20px;
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background-color .15s ease;
}

.file-card:last-child {
    border-bottom: none;
}

.file-card:hover {
    background: var(--color-surface-hover);
}

.file-card.file-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 3px vertical colored strip */
.file-strip {
    flex-shrink: 0;
    width: 3px;
    height: 40px;
    margin-right: 12px;
    border-radius: 2px;
    background: var(--color-border-strong);
}

.file-strip.pdf { background: var(--color-red); }
.file-strip.image { background: var(--color-blue); }
.file-strip.csv { background: var(--color-green); }
.file-strip.audio { background: var(--color-purple); }
.file-strip.video { background: var(--color-orange); }
.file-strip.code { background: #986f0b; }
.file-strip.default { background: var(--color-border-strong); }

.file-icon-wrap {
    position: relative;
    flex-shrink: 0;
    margin-right: 12px;
}

.file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    font-size: 20px;
}

.file-icon .lucide {
    width: 20px;
    height: 20px;
}

/* Translucent type tints read correctly on both light and dark surfaces. */
.file-icon.pdf { background: rgba(164, 38, 44, .12); color: var(--color-red); }
.file-icon.image { background: rgba(15, 108, 189, .12); color: var(--color-blue); }
.file-icon.csv { background: rgba(16, 124, 16, .12); color: var(--color-green); }
.file-icon.audio { background: rgba(92, 45, 145, .12); color: var(--color-purple); }
.file-icon.video { background: rgba(216, 59, 1, .12); color: var(--color-orange); }
.file-icon.code { background: rgba(152, 111, 11, .14); color: #986f0b; }
.file-icon.default { background: var(--color-surface-hover); color: var(--color-text-secondary); }

.file-type-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    padding: 2px 6px;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.file-type-badge.pdf { color: var(--color-red); }
.file-type-badge.image { color: var(--color-blue); }
.file-type-badge.csv { color: var(--color-green); }
.file-type-badge.audio { color: var(--color-purple); }
.file-type-badge.video { color: var(--color-orange); }
.file-type-badge.code { color: #986f0b; }
.file-type-badge.default { color: var(--color-text-secondary); }

.file-info {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.file-name {
    margin-bottom: 4px;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-name-link {
    display: block;
    color: var(--color-primary);
    text-decoration: none;
    transition: color .15s ease;
}

.file-name-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.file-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.file-meta .meta-separator {
    color: var(--color-text-muted);
}

.file-expiry {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    margin-right: var(--space-4);
}

.expiry-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.expiry-date {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.expiry-date.warning {
    color: var(--color-orange);
    font-weight: var(--font-weight-semibold);
}

.file-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-2);
}

.file-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.file-action-btn:hover:not(:disabled) {
    color: var(--color-text);
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
}

.file-action-btn.btn-extend:hover:not(:disabled) {
    color: var(--color-blue);
    background: rgba(15, 108, 189, .1);
    border-color: var(--color-primary);
}

.file-action-btn.btn-delete:hover:not(:disabled) {
    color: var(--color-red);
    background: rgba(164, 38, 44, .1);
    border-color: var(--color-danger);
}

.file-action-btn.btn-copy:hover:not(:disabled),
.file-action-btn.btn-forever:hover:not(:disabled) {
    color: var(--color-primary-hover);
    border-color: var(--color-primary);
}

.file-action-btn:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.file-card-empty {
    padding: 48px 24px;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    text-align: center;
}

/* ==========================================================================
   6. User card extras (users page reuses the file-row structure)
   ========================================================================== */
.user-strip.active { background: var(--color-green); }
.user-strip.inactive { background: var(--color-border-strong); }

/* Outlook-style circular initials avatar */
.user-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .02em;
    user-select: none;
}

/* Deactivated users: active rows look normal, deactivated rows are muted */
.user-row.deactivated .user-avatar,
.user-row.deactivated .file-info {
    opacity: .55;
    filter: grayscale(1);
}

.user-row.deactivated .file-name {
    color: var(--color-text-muted);
}

.api-key-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.api-key-group .form-control {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.action-btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ==========================================================================
   7. Pagination footer
   ========================================================================== */
.pagination-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding: var(--space-4) 20px;
}

.pagination-right-group {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

#pagination-info {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.page-size-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

#page-size-select {
    min-height: var(--control-height-sm);
    padding: 4px 10px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#page-size-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

#page-indicator {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.btn-page {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-page:hover:not(:disabled) {
    color: var(--color-text);
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
}

.btn-page:disabled {
    cursor: not-allowed;
    opacity: .4;
}

/* ==========================================================================
   8. Custom modal system (dashboard toggles .show on .modal/.modal-backdrop;
      Bootstrap modals on other pages keep working with the same class names).
   ========================================================================== */
/* Backdrops are owned by whichever system created them:
   - Dashboard custom backdrops carry an id (dashboard.js creates them hidden
     and reveals them with .show) and need the full custom treatment.
   - Bootstrap backdrops are id-less; Bootstrap's own CSS styles them
     (solid black at --bs-backdrop-opacity .5) and handles their clicks. */
.modal-backdrop[id] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-overlay);
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

[id].modal-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-backdrop:not([id]) {
    pointer-events: auto;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-overlay) + 5);
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
}

.modal.show {
    display: flex;
}

.modal-dialog {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(-16px);
    transition: transform .2s ease, opacity .2s ease;
}

.modal.show .modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

/* White Fluent surface; border/radius/shadow come from the kit's
   .modal-content rule in components.css. */
.modal-content {
    background: var(--color-surface);
}

.modal-title {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   9. Upload result modal bits
   ========================================================================== */
.upload-result-summary {
    margin-bottom: var(--space-4);
    color: var(--color-text);
    font-size: var(--font-size-md);
    line-height: 1.6;
}

.upload-result-summary.result-success {
    color: var(--color-success);
}

.upload-result-summary.result-error {
    color: var(--color-danger);
}

.upload-result-json-wrapper {
    margin-top: var(--space-2);
}

.upload-result-json-label {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.upload-result-json {
    max-height: 300px;
    margin: 0;
    padding: var(--space-4);
    overflow-x: auto;
    overflow-y: auto;
    color: var(--color-text);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ==========================================================================
   10. Profile page (two-column split)
   ========================================================================== */
.profile-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--space-6);
}

.profile-sidebar {
    height: fit-content;
    padding: var(--space-8) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sidebar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-4);
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-round);
    font-size: 28px;
    font-weight: var(--font-weight-medium);
}

.sidebar-name {
    margin: 0 0 4px;
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
}

.sidebar-email {
    margin: 0 0 20px;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    word-break: break-all;
}

.sidebar-divider {
    width: 100%;
    height: 1px;
    margin: 0 0 20px;
    background: var(--color-border-subtle);
}

.info-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-4);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
    text-align: left;
}

.info-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.info-value {
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.info-value.status-active {
    color: var(--color-success);
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#profile-main-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.main-card {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.main-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 24px;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
}

.main-card-header .lucide {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.main-card-header h6 {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.main-card-body {
    padding: 24px;
}

.premium-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-6) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.premium-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
}

.card-label {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.api-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.api-input-group {
    display: flex;
    align-items: stretch;
}

.api-input {
    flex: 1;
    padding: 12px 16px;
    color: var(--color-text);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-md);
    outline: none;
}

.api-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    transition: background-color .15s ease, border-color .15s ease;
}

.api-copy-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.api-copy-btn:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.helper-text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 20px 24px;
}

.setting-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.setting-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
}

.setting-icon .lucide {
    width: 20px;
    height: 20px;
}

.setting-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.setting-label {
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.setting-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.setting-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.setting-btn:hover {
    color: var(--color-primary-hover);
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}

.profile-card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.profile-card:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 4px;
}

.section-header .lucide {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
}

.section-header h6 {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ==========================================================================
   11. API docs bits
   ========================================================================== */
.endpoint-card {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.method-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.method-badge.method-get { color: var(--color-green); background: rgba(16, 124, 16, .12); }
.method-badge.method-post { color: var(--color-blue); background: rgba(15, 108, 189, .12); }
.method-badge.method-put { color: var(--color-orange); background: rgba(216, 59, 1, .12); }
.method-badge.method-delete { color: var(--color-red); background: rgba(164, 38, 44, .12); }

.code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: var(--font-size-xs);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.code-copy-btn:hover {
    color: var(--color-primary-hover);
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}

/* ==========================================================================
   12. Reset-password requirements box (markup carries no inline styles)
   ========================================================================== */
/* Reset-password page: single centered form panel (no orbit aside). */
.login-shell--single {
    max-width: 620px;
    margin-inline: auto;
}

.password-requirements {
    margin-bottom: var(--space-3);
    padding: 12px 16px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.password-requirements p {
    margin: 0 0 8px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.password-requirements ul {
    margin: 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    list-style: none;
}

.password-requirements li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr 1.5fr;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .upload-card {
        grid-column: 1 / -1;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-card-value {
        font-size: 1.6rem;
    }

    .search-wrapper {
        flex-wrap: wrap;
    }

    .search-input-group {
        flex-basis: 100%;
    }

    .search-actions {
        width: 100%;
    }

    .search-actions .btn-search {
        flex: 1;
        justify-content: center;
    }

    .design-section-header {
        flex-direction: column;
        gap: 12px;
    }

    .pagination-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pagination-right-group {
        width: 100%;
        justify-content: center;
    }

    #pagination-info {
        text-align: center;
    }

    .upload-drop-zone {
        padding: 24px 16px;
    }

    .upload-drop-zone-icon {
        font-size: 36px;
    }

    .modal {
        padding: 16px;
    }

    .modal-dialog {
        max-width: 100%;
    }

    .modal-body {
        padding: var(--space-4);
    }

    .modal-header,
    .modal-footer {
        padding: 12px 16px;
    }

    .file-card.file-row {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
    }

    .file-card.file-row .file-strip {
        height: 32px;
    }

    .file-card.file-row .file-icon {
        width: 32px;
        height: 32px;
    }

    .file-card.file-row .file-info {
        order: 1;
        width: 100%;
        min-width: 0;
    }

    .file-card.file-row .file-expiry {
        order: 2;
        align-items: flex-start;
        margin-right: 0;
        margin-left: auto;
    }

    .file-card.file-row .file-actions {
        order: 3;
        width: 100%;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--color-border-subtle);
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        padding: 24px 20px;
    }

    .main-card-body {
        padding: 20px;
    }

    .setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .api-input-group {
        flex-direction: column;
    }

    .api-input {
        border-right: 1px solid var(--color-border);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }

    .api-copy-btn {
        justify-content: center;
        border-top: none;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }
}

/* ==========================================================================
   14. Settings page
   ========================================================================== */
.settings-panel {
    max-width: 860px;
}

.settings-option {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.settings-option + .settings-option {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}

.settings-option-text {
    min-width: 0;
}

.settings-option-label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    cursor: pointer;
}

.settings-option-help {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.settings-option-default {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    opacity: 0.85;
}

.settings-option-switch {
    flex-shrink: 0;
    padding-top: 2px;
}

.settings-option-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    margin-left: 0;
    cursor: pointer;
    border-color: var(--color-border);
    background-color: var(--color-surface-muted);
}

.settings-option-switch .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.settings-option-switch .form-check-input:focus {
    border-color: var(--color-primary);
}

.settings-option-switch .form-check-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.settings-option-warning {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.settings-saved-at {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

@media (max-width: 576px) {
    .settings-option {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-option-switch {
        padding-top: 0;
    }
}

/* Audit launcher tile color (filedrop-specific suite tile). */
.tile-red { background: var(--color-danger); }