@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== Design tokens ===== =================================================
   Darkroom black background, safelight amber-red accent, contact-sheet cream
   text, film-strip sprocket motif as the signature element.
============================================================================ */
:root {
    --bg: #14100E;
    --panel: #1C1713;
    --panel-2: #241E19;
    --border: #3A332C;
    --accent: #D6401F;
    --accent-dim: #9C3016;
    --accent-soft: rgba(214, 64, 31, .14);
    --cream: #EFE7DA;
    --muted: #9A8F81;
    --muted-2: #6E655A;
    --success: #5C8A6A;
    --danger: #C0392B;
    --radius: 10px;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'Vazirmatn', Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--cream);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Film sprocket strip — signature element ===== */
.film-sprockets {
    height: 18px;
    background:
        repeating-linear-gradient(90deg, var(--panel-2) 0 10px, transparent 10px 22px),
        var(--bg);
    position: relative;
    border-bottom: 1px solid var(--border);
}
.film-sprockets::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--bg) 3px, transparent 3.2px);
    background-size: 22px 18px;
    background-position: 5px center;
}
.film-sprockets--bottom { border-bottom: none; border-top: 1px solid var(--border); }

/* ===== Aperture logo ===== */
.aperture-blades polygon {
    fill: var(--accent);
    opacity: .9;
    transform-origin: 50px 50px;
    transition: transform .4s ease;
}
svg:hover .aperture-blades polygon { transform: scale(.92); }

/* ===================== AUTH PAGE ===================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(214,64,31,.10), transparent 60%),
        var(--bg);
}
.auth-card {
    width: 100%;
    max-width: 380px;
    margin: 40px auto;
    padding: 40px 32px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.auth-brand__aperture { display: inline-block; width: 56px; height: 56px; margin-bottom: 12px; }
.auth-brand h1 { font-size: 19px; margin: 0 0 4px; color: var(--cream); }
.auth-brand__sub { color: var(--muted); font-size: 13px; margin: 0 0 26px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; text-align: right; }
.auth-form label { font-size: 13px; color: var(--muted); }
.auth-form input {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--cream);
    padding: 11px 14px; border-radius: 8px; font-size: 15px;
}
.auth-form input:focus { border-color: var(--accent); }
.auth-form button {
    margin-top: 6px; padding: 12px; border: none; border-radius: 8px;
    background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background .15s;
}
.auth-form button:hover { background: var(--accent-dim); }
.alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; text-align: right; margin-bottom: 4px; }
.alert--error { background: rgba(192,57,43,.15); color: #e6897d; border: 1px solid rgba(192,57,43,.35); }
.alert--warn { background: rgba(214,64,31,.12); color: #e2a48f; border: 1px solid rgba(214,64,31,.3); font-size: 13px; line-height: 1.9; text-align: right; }
.alert code { background: var(--panel-2); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: 12px; }

/* ===================== APP SHELL ===================== */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; gap: 20px;
    padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.topbar__brand { display: flex; align-items: center; gap: 12px; }
.topbar__logo { width: 34px; height: 34px; flex-shrink: 0; }
.topbar__brand strong { display: block; font-size: 14.5px; }
.topbar__brand span { display: block; font-size: 11.5px; color: var(--muted); }
.topbar__gauge { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.gauge-svg { width: 74px; height: 44px; }
.gauge-track { fill: none; stroke: var(--panel-2); stroke-width: 8; }
.gauge-fill {
    fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round;
    transition: stroke-dashoffset .6s ease;
}
.gauge-label { display: flex; flex-direction: column; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
.gauge-label span { color: var(--cream); font-weight: 600; }
.gauge-label small { color: var(--muted-2); }

.btn {
    background: var(--panel-2); color: var(--cream); border: 1px solid var(--border);
    padding: 9px 16px; border-radius: 8px; font-size: 13.5px; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--muted-2); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn--accent:hover { background: var(--accent-dim); }
.btn--ghost { background: transparent; text-decoration: none; display: inline-flex; align-items: center; }
.btn--block { width: 100%; margin-bottom: 14px; }
.btn--danger { color: #e6897d; }
.btn--sm { padding: 5px 10px; font-size: 12px; }

.app-body { flex: 1; display: grid; grid-template-columns: 240px 1fr; min-height: 0; }

/* ---- sidebar ---- */
.sidebar { background: var(--panel); border-inline-end: 1px solid var(--border); padding: 16px; overflow-y: auto; }
.folder-tree { font-size: 13.5px; }
.folder-node {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px;
    cursor: pointer; color: var(--muted); margin-bottom: 2px; user-select: none;
}
.folder-node:hover { background: var(--panel-2); color: var(--cream); }
.folder-node.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.folder-node__children { padding-inline-start: 16px; border-inline-start: 1px dashed var(--border); margin-inline-start: 10px; }
.folder-node__count { margin-inline-start: auto; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.folder-node__arrow {
    display: inline-block; width: 14px; text-align: center; font-size: 9px; color: var(--muted-2);
    cursor: pointer; transition: transform .1s;
}
.folder-node__arrow--empty { cursor: default; }
.folder-node__arrow:hover { color: var(--accent); }

/* ---- content ---- */
.content { display: flex; flex-direction: column; min-width: 0; }
.content__toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 22px; flex-wrap: wrap;
}
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.breadcrumb__item { cursor: pointer; padding: 3px 4px; }
.breadcrumb__item:hover { color: var(--cream); }
.breadcrumb__item.active { color: var(--accent); font-weight: 600; }
.breadcrumb__sep { color: var(--muted-2); }
.content__actions { display: flex; gap: 8px; align-items: center; }
.search-box {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--cream);
    padding: 8px 12px; border-radius: 8px; font-size: 13px; width: 180px;
}

.dropzone {
    margin: 0 22px 8px; padding: 22px; text-align: center; color: var(--muted-2);
    border: 1.5px dashed var(--border); border-radius: var(--radius); font-size: 13px;
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.upload-queue { padding: 0 22px; display: flex; flex-direction: column; gap: 8px; }
.upload-item { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.upload-item__row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-family: var(--mono); }
.upload-item__track { height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; position: relative; }
.upload-item__track::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(20,16,14,.6) 1.4px, transparent 1.6px);
    background-size: 8px 6px; z-index: 2;
}
.upload-item__bar { height: 100%; background: var(--accent); width: 0%; transition: width .15s; }
.upload-item.done .upload-item__bar { background: var(--success); }
.upload-item.error .upload-item__bar { background: var(--danger); }

.frame-counter {
    padding: 0 22px 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); letter-spacing: .04em;
}

/* ---- contact sheet grid ---- */
.contact-sheet {
    flex: 1; padding: 6px 22px 30px; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; align-content: start;
}
.empty-state { grid-column: 1 / -1; text-align: center; color: var(--muted-2); padding: 60px 20px; font-size: 13.5px; }

.frame {
    position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; cursor: default; transition: border-color .15s, transform .15s;
}
.frame:hover { border-color: var(--muted-2); }
.frame--folder { cursor: pointer; }
.frame--folder:hover { border-color: var(--accent); }
.frame__number {
    position: absolute; top: 6px; right: 8px; font-family: var(--mono); font-size: 10px;
    color: var(--muted-2); background: rgba(20,16,14,.65); padding: 1px 6px; border-radius: 4px; z-index: 3;
}
.frame__thumb {
    aspect-ratio: 4 / 3; background: var(--panel-2); display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: var(--muted-2); overflow: hidden;
}
.frame__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame__body { padding: 8px 10px 10px; }
.frame__name { font-size: 12.5px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame__meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); margin-top: 3px; }
.frame__actions {
    display: flex; gap: 4px; padding: 0 8px 8px; opacity: 0; transition: opacity .15s;
}
.frame:hover .frame__actions, .frame:focus-within .frame__actions { opacity: 1; }
.frame__actions button {
    flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
    border-radius: 6px; padding: 5px 4px; font-size: 11px; cursor: pointer;
}
.frame__actions button:hover { color: var(--cream); border-color: var(--muted-2); }
.frame__actions button.danger:hover { color: #e6897d; border-color: var(--danger); }

.topbar__user { display: flex; align-items: center; gap: 8px; margin-inline-start: 14px; }
.topbar__username { font-size: 13px; color: var(--muted); }

/* ---- sidebar view switcher ---- */
.view-switcher { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.view-switcher__item { font-size: 13.5px; }

/* ---- stats / dashboard view ---- */
.stats-view { padding: 10px 22px 30px; }
.stats-view__title { font-size: 16px; margin: 6px 0 16px; color: var(--cream); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; text-align: center;
}
.stat-card__value { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--accent); }
.stat-card__label { font-size: 12px; color: var(--muted); margin-top: 6px; }

.stats-panel { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.donut-wrap { position: relative; width: 160px; height: 160px; flex-shrink: 0; }
.donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-svg circle { fill: none; stroke-width: 16; }
.donut-center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--mono); text-align: center;
}
.donut-center strong { font-size: 15px; color: var(--cream); }
.donut-center span { font-size: 10.5px; color: var(--muted-2); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 160px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.donut-legend .count { margin-inline-start: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }

/* ---- view toggle ---- */
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle__btn { background: var(--panel-2); border: none; color: var(--muted); padding: 8px 12px; cursor: pointer; font-size: 14px; }
.view-toggle__btn.active { background: var(--accent); color: #fff; }

/* ---- list view table ---- */
.list-view { padding: 0 22px 30px; }
.list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.list-table th { text-align: right; color: var(--muted); font-weight: 500; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.list-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--cream); vertical-align: middle; }
.list-table tr:hover td { background: var(--panel-2); }
.list-table .lt-name { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.list-table .lt-icon { font-size: 15px; }
.list-table .lt-meta { color: var(--muted-2); font-family: var(--mono); font-size: 11.5px; }
.list-table .lt-actions { display: flex; gap: 4px; justify-content: flex-end; }
.list-table .lt-actions button {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
    border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer;
}
.list-table .lt-actions button:hover { color: var(--cream); }

/* ---- users modal ---- */
.users-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.users-list li { display: flex; align-items: center; justify-content: space-between; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.users-list .u-name { color: var(--cream); }
.users-list .u-username { color: var(--muted-2); font-family: var(--mono); font-size: 11.5px; margin-inline-start: 6px; }
.users-list button { background: transparent; border: none; color: #e6897d; cursor: pointer; font-size: 12px; }
/* ---- tags ---- */
.frame__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tag-chip {
    background: var(--accent-soft); color: var(--accent); border-radius: 5px; padding: 1px 7px;
    font-size: 10px; white-space: nowrap;
}
.lt-name .frame__tags { margin-top: 3px; margin-inline-start: 0; }

/* ---- drag & drop ---- */
.frame[draggable="true"], .list-table tr[draggable="true"] { cursor: grab; }
.frame.drop-target, .folder-node.drop-target, .breadcrumb__item.drop-target,
.list-table tr.drop-target td {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: var(--accent-soft);
}

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(10,8,7,.7); display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px; width: 100%; max-width: 380px;
}
.modal h3 { margin: 0 0 14px; font-size: 15px; }
.modal p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.modal input {
    width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--cream);
    padding: 10px 12px; border-radius: 7px; font-size: 14px; margin-bottom: 14px; box-sizing: border-box;
}
.modal__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== Toasts ===== */
.toast-stack { position: fixed; bottom: 20px; left: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--panel); border: 1px solid var(--border); border-inline-start: 3px solid var(--accent);
    color: var(--cream); padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
    animation: toast-in .2s ease;
}
.toast--success { border-inline-start-color: var(--success); }
.toast--error { border-inline-start-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 760px) {
    .app-body { grid-template-columns: 1fr; }
    .sidebar { border-inline-end: none; border-bottom: 1px solid var(--border); max-height: 180px; }
    .content__toolbar { flex-direction: column; align-items: stretch; }
    .search-box { width: 100%; }
    .contact-sheet { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}