/* =============================================================================
   A-Aaron Drive — its own design system, built on the portal's tokens
   =============================================================================
   The portal's assets/css/style.css still supplies raw material — color
   variables, .btn, .alert, .badge, .form-control, the mobile hamburger — but
   the DRIVE no longer just borrows the admin panel's look. It has its own
   identity now: A-Aaron's slate-and-red, expressed the way a premium file
   manager reads rather than the way an admin CRUD screen reads. Same brand,
   different room.

   Reference point: Google Drive's structural fluency (color-coded file
   types, generous whitespace, a search that leads, hover-revealed actions,
   a grid/list choice) — reinterpreted in A-Aaron's own palette rather than
   copied wholesale. Every color below is a portal variable or a tint of one,
   so the Drive restyles itself automatically if the brand palette changes.

   Signature element: the grid view's type-tinted file tiles (search
   "Signature" below) plus the document viewer's dark inspection canvas —
   the two moments in the Drive that could not belong to any other product.
   ========================================================================== */

/* ── Type, tightened ──────────────────────────────────────────────────────── */
/* Inter is now actually loaded (see layout_start.php) — lean into the wider
   weight range and tighter tracking that makes a UI read as considered
   rather than default-browser. Scoped to .admin-panel so this never reaches
   into the training portal's own admin pages, which don't load this file. */
.admin-panel {
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

.admin-panel h1,
.admin-panel h2,
.admin-panel h3 {
    letter-spacing: -0.01em;
}

.admin-panel .styled-table th {
    letter-spacing: 0.6px;
}

/* ── Toolbar: title on the left, actions on the right ────────────────────── */
.drive-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.drive-toolbar h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.drive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.drive-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

.drive-crumbs a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.drive-crumbs a:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.drive-crumbs .is-current {
    color: var(--text-main);
    font-weight: 600;
    padding: 4px 8px;
}

.drive-crumbs .sep {
    color: var(--border);
    user-select: none;
}

/* ── File / folder rows ──────────────────────────────────────────────────── */
.drive-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.drive-name a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
}

.drive-name a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* The name is the column that matters — give it the room, and let the meta and
   action columns take what is left. Without this the actions cell (which cannot
   wrap) squeezes the name until short words break mid-syllable. */
.drive-table th:first-child,
.drive-table td:first-child {
    width: 45%;
    min-width: 200px;
}

/* Break at word boundaries by preference; only split a word when it genuinely
   cannot fit, which is what a long random filename needs. */
.drive-name a,
.drive-name span {
    overflow-wrap: break-word;
    word-break: normal;
}

/* ── Type chips ──────────────────────────────────────────────────────────────
   One glanceable element instead of an icon set. The tint is information:
   red = PDF, blue = image, green = spreadsheet, amber = slides, grey = archive.
   Same mapping on every screen, applied by driveFileIcon(). */
.drive-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.drive-icon.is-folder {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.drive-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.drive-icon.t-pdf   { background: var(--danger-bg);  color: var(--danger);  border-color: #fecaca; }
.drive-icon.t-img   { background: var(--info-bg);    color: var(--info);    border-color: #bae6fd; }
.drive-icon.t-sheet { background: var(--success-bg); color: var(--success); border-color: #a7f3d0; }
.drive-icon.t-slide { background: var(--warning-bg); color: var(--warning); border-color: #fde68a; }
.drive-icon.t-doc   { background: #eef2ff;           color: #4f46e5;        border-color: #c7d2fe; }
.drive-icon.t-zip   { background: var(--bg-body);    color: var(--text-muted); border-color: var(--border); }
.drive-icon.t-media { background: #fdf4ff;           color: #a21caf;        border-color: #f5d0fe; }

/* ── Table refinements ───────────────────────────────────────────────────── */
/* A visible container with real elevation, not a flat bordered box — this is
   the single biggest lever for "premium": the listing now reads as a raised
   surface sitting on the canvas, the way Drive's own file list does. */
.table-container {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.drive-table thead th {
    background: var(--primary);
}

.drive-table tbody tr {
    transition: background-color 0.12s ease;
}

.drive-table tbody tr:hover {
    background-color: rgba(15, 23, 42, 0.028);
}

.drive-table td,
.drive-table th {
    vertical-align: middle;
}

.drive-table .col-meta {
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 13px;
}

.drive-table .col-actions {
    white-space: nowrap;
    text-align: right;
}

/* Actions stay on one line and the table scrolls instead. Letting them wrap
   turned a four-button row into a four-line stack, which made every row tall
   and the list unreadable. .table-responsive (portal CSS) provides the scroll. */
.drive-row-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.drive-row-actions form {
    display: inline;
    margin: 0;
}

/* Row actions read quieter until the row is engaged — the list is for
   scanning names, not for a wall of buttons. Touch screens (no hover) and
   keyboard focus always get full strength. */
@media (hover: hover) {
    .drive-table tbody tr .drive-row-actions {
        opacity: 0.45;
        transition: opacity 0.15s ease;
    }

    .drive-table tbody tr:hover .drive-row-actions,
    .drive-table tbody tr:focus-within .drive-row-actions {
        opacity: 1;
    }
}

/* ── Signature: grid view ─────────────────────────────────────────────────────
   The one interaction that could only belong to a file manager. List view
   (the table above) is the everyday tool — scanning, sorting, bulk actions.
   Grid view is for recognizing things by color and shape, the way a physical
   filing cabinet lets you spot a folder by its tab colour before you read the
   label. Folders get the slate treatment; files carry their type tint
   straight onto the tile, not just a small chip. */
.drive-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
}

.drive-view-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.drive-view-toggle button + button {
    border-left: 1px solid var(--border);
}

.drive-view-toggle button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.drive-view-toggle button:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.drive-view-toggle button.is-active {
    background: var(--primary);
    color: #fff;
}

/* JS toggles .is-grid on this wrapper; both views render server-side so the
   page works with scripting off (defaults to list view, the toggle just
   never appears — see drive.js). */
.drive-listing .drive-grid-view { display: none; }
.drive-listing.is-grid .drive-list-view { display: none; }
.drive-listing.is-grid .drive-grid-view { display: block; }

.drive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}

.drive-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    min-height: 132px;
}

.drive-tile:hover,
.drive-tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.18);
    border-color: transparent;
    outline: none;
}

.drive-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 14px;
    background: var(--bg-body);
    color: var(--text-muted);
}

.drive-tile-icon.is-folder { background: var(--primary); color: #fff; }
.drive-tile-icon.t-pdf   { background: var(--danger);  color: #fff; }
.drive-tile-icon.t-img   { background: var(--info);    color: #fff; }
.drive-tile-icon.t-sheet { background: var(--success); color: #fff; }
.drive-tile-icon.t-slide { background: var(--warning); color: #fff; }
.drive-tile-icon.t-doc   { background: #4f46e5;        color: #fff; }
.drive-tile-icon.t-zip   { background: var(--text-muted); color: #fff; }
.drive-tile-icon.t-media { background: #a21caf;        color: #fff; }

.drive-tile-icon svg { width: 20px; height: 20px; fill: currentColor; }

.drive-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.drive-tile-meta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Header search ────────────────────────────────────────────────────────── */
/* Drive leads with search; this replaces a "Search" link buried in the page
   toolbar with a real input sitting in the top bar on every screen. */
.drive-header-search {
    flex: 1 1 420px;
    max-width: 480px;
    margin: 0 20px;
}

.drive-header-search form {
    position: relative;
}

.drive-header-search input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-body);
    font-size: 14px;
    color: var(--text-main);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.drive-header-search input:focus {
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.drive-header-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: var(--text-muted);
    pointer-events: none;
}

@media (max-width: 900px) {
    .drive-header-search { display: none; }
}

/* ── Sidebar polish ───────────────────────────────────────────────────────── */
/* The portal's .nav-item.active is a solid red block — bold, but it's an
   admin-CRUD-panel move. Here the active row reads as "selected", not
   "alarmed": a soft tint and a slim accent bar instead of a filled red slab. */
.sidebar-nav .nav-item.active {
    background-color: rgba(220, 38, 38, 0.16);
    color: #fff;
    border-left-color: var(--accent);
    box-shadow: none;
}

.sidebar-nav .nav-item:hover {
    transform: none; /* the portal's slide-on-hover reads busy in a file list context */
}

.sidebar-header {
    padding-bottom: 20px;
}

/* ── Storage meter in the sidebar ────────────────────────────────────────── */
.drive-meter {
    margin: 24px 16px 16px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
}

.drive-meter-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 8px;
}

.drive-meter-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.drive-meter-fill {
    height: 100%;
    background: var(--success);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.drive-meter-fill.is-warning {
    background: var(--warning);
}

.drive-meter-note {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Inline panels (New folder, Upload, Add Employee File) ───────────────── */
/* Disclosure panels rather than modals: no JavaScript to go wrong, and the
   form still submits if scripting is unavailable. */
.drive-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    align-items: start;
}

.drive-panels .drive-panel {
    margin-bottom: 0;
}

.drive-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.drive-panel > summary {
    cursor: pointer;
    padding: 14px 20px;
    font-weight: 600;
    color: var(--text-main);
    list-style: none;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}

.drive-panel > summary:hover {
    background: var(--bg-body);
}

.drive-panel > summary::-webkit-details-marker {
    display: none;
}

.drive-panel > summary::before {
    content: "+";
    display: inline-block;
    width: 20px;
    font-weight: 700;
    color: var(--accent);
}

.drive-panel[open] > summary::before {
    content: "\2212"; /* minus */
}

.drive-panel-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.drive-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.drive-field-row .form-group {
    flex: 1 1 220px;
    min-width: 0;
}

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty-state .drive-empty-art {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: block;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.2;
    opacity: 0.45;
}

/* ── Document viewer (Phase 3) ───────────────────────────────────────────────
   The drive's signature surface: the file on a dark inspection canvas — the
   one dark surface in the drive, so opening a document feels like an event —
   with a filing-card rail beside it. The faint dot grid on the canvas is the
   examination table; the slate is the portal's own --primary. */
.drive-viewer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: stretch;
    min-height: calc(100vh - 200px);
}

.drive-viewer-stage {
    background:
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px),
        linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    background-size: 22px 22px, cover;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 420px;
}

.drive-viewer-frame {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    display: block;
    animation: drive-rise 0.35s ease-out both;
}

.drive-viewer-stage.is-image {
    padding: 32px;
}

.drive-viewer-image {
    max-width: 100%;
    max-height: calc(100vh - 280px);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xl);
    animation: drive-rise 0.35s ease-out both;
}

/* No inline preview: same canvas, plain words, one obvious way forward */
.drive-viewer-none {
    text-align: center;
    color: var(--text-light);
    padding: 40px;
}

.drive-viewer-none .drive-icon {
    width: 52px;
    height: 52px;
    font-size: 13px;
    margin-bottom: 16px;
}

.drive-viewer-none h3 {
    margin: 0 0 8px;
    color: #fff;
}

.drive-viewer-none p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.6);
}

/* On the slate canvas the slate button disappears — the accent carries here */
.drive-viewer-none .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.drive-viewer-none .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* The filing card */
.drive-viewer-rail {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: start;
}

.drive-viewer-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.drive-viewer-title h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    overflow-wrap: break-word;
    word-break: normal;
    min-width: 0;
}

.drive-viewer-details {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 10px;
    font-size: 14px;
}

.drive-viewer-details dt {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: center;
}

.drive-viewer-details dd {
    margin: 0;
    color: var(--text-main);
    overflow-wrap: break-word;
    min-width: 0;
}

.drive-viewer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

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

/* ── Employee document grouping ──────────────────────────────────────────── */
.drive-employee-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.drive-employee-head .email {
    color: var(--text-muted);
    font-size: 13px;
}

/* Type-ahead results for Add Employee File */
.drive-typeahead {
    position: relative;
}

.drive-typeahead-results {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 260px;
    overflow-y: auto;
    display: none;
}

.drive-typeahead-results.is-open {
    display: block;
}

.drive-typeahead-results button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
}

.drive-typeahead-results button:hover,
.drive-typeahead-results button:focus {
    background: var(--bg-body);
}

.drive-typeahead-results .muted {
    color: var(--text-muted);
    font-size: 12px;
}

.drive-typeahead-empty {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Confirms the pick, and makes clear that free text was not accepted */
.drive-selected-employee {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 10px;
    border-radius: var(--radius-md);
    background: var(--success-bg);
    border: 1px solid var(--success);
    font-size: 14px;
}

.drive-selected-employee.is-visible {
    display: flex;
}

/* ── Auth pages (login, setup, change password, share password gate) ────────
   These load drive.css too, so the elevation applies only here — the
   portal's own login pages never load this file. */
.login-page {
    background:
        radial-gradient(circle at 15% 15%, rgba(220, 38, 38, 0.06), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(15, 23, 42, 0.05), transparent 45%),
        var(--bg-body);
}

.login-box {
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 48px -20px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

/* ── Accessibility floor ─────────────────────────────────────────────────── */
.drive-panel > summary:focus-visible,
.drive-name a:focus-visible,
.drive-crumbs a:focus-visible,
.drive-row-actions .btn:focus-visible,
.drive-typeahead-results button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .drive-viewer-frame,
    .drive-viewer-image {
        animation: none;
    }

    .drive-meter-fill,
    .drive-crumbs a,
    .drive-panel > summary,
    .drive-row-actions {
        transition: none;
    }
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Canvas first, filing card after — reading order matches importance */
    .drive-viewer {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .drive-viewer-stage {
        min-height: 55vh;
    }

    .drive-viewer-image {
        max-height: 50vh;
    }
}

@media (max-width: 768px) {
    /* The hamburger is position: fixed at top-left, so it sits on top of the
       header. Push the title clear of it rather than touching the shared
       stylesheet, which the whole portal depends on. */
    .top-header .header-left {
        padding-left: 56px;
    }

    .top-header .header-left h2 {
        font-size: 16px;
        line-height: 1.3;
    }

    .drive-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Meta columns are secondary — drop them before the name wraps to nothing */
    .drive-table .col-meta.is-optional {
        display: none;
    }

    .drive-table .col-actions {
        text-align: left;
    }

    .drive-row-actions {
        justify-content: flex-start;
    }

    /* The name no longer needs a large share once the meta columns are gone */
    .drive-table th:first-child,
    .drive-table td:first-child {
        width: auto;
        min-width: 160px;
    }
}