/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
    --bg:           #f0f2f5;
    --surface:      #ffffff;
    --border:       #e2e8f0;
    --text:         #1e293b;
    --text-muted:   #64748b;
    --accent:       #2563eb;
    --accent-dark:  #1d4ed8;
    --danger:       #dc2626;
    --warn-bg:      #fef9c3;
    --warn-border:  #fbbf24;
    --success-bg:   #dcfce7;
    --success-text: #166534;
    --success-border:#bbf7d0;
    --error-bg:     #fee2e2;
    --error-text:   #991b1b;
    --error-border: #fecaca;
    --shadow-sm:    0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
    --shadow-md:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
    --shadow-lg:    0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
    --radius:       10px;
    --radius-sm:    6px;
    --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family: var(--font);
    background:  var(--bg);
    color:       var(--text);
    line-height: 1.5;
    min-height:  100vh;
}

img { display: block; max-width: 100%; }

.hidden { display: none !important; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          0 20px;
    height:           56px;
    background:       var(--accent);
    color:            #fff;
    position:         sticky;
    top:              0;
    z-index:          100;
    box-shadow:       var(--shadow-md);
}

.site-header h1 {
    font-size:    1.05rem;
    font-weight:  600;
    letter-spacing: .01em;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tab-nav   { display: flex; gap: 4px; }

.tab-btn {
    padding:      6px 18px;
    border:       none;
    border-radius: 20px;
    background:   rgba(255,255,255,.15);
    color:        rgba(255,255,255,.8);
    font-size:    .875rem;
    font-weight:  500;
    font-family:  var(--font);
    cursor:       pointer;
    transition:   background .15s, color .15s;
}
.tab-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.tab-btn.active { background: #fff; color: var(--accent); }

/* ── Tab panels ─────────────────────────────────────────────────────────── */
.tab-panel { min-height: calc(100vh - 56px); }

/* ── Scan tab: centres content vertically ───────────────────────────────── */
#tab-scan {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px 16px;
}

/* ── Shared panel wrapper ────────────────────────────────────────────────── */
.panel {
    width:           100%;
    max-width:       560px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             16px;
}

/* ── Idle ───────────────────────────────────────────────────────────────── */
.panel-idle { text-align: center; color: var(--text-muted); }

.scan-icon-wrap {
    width:         88px;
    height:        88px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    var(--surface);
    border-radius: 50%;
    box-shadow:    var(--shadow-sm);
    color:         #94a3b8;
    margin:        0 auto 12px;
}

.scan-ready-label { font-size: 1rem; font-weight: 500; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.spinner {
    width:         40px;
    height:        40px;
    border:        3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation:     spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-label { color: var(--text-muted); font-size: .95rem; }

/* ── Confirm card ───────────────────────────────────────────────────────── */
.confirm-card {
    background:    var(--surface);
    border-radius: var(--radius);
    box-shadow:    var(--shadow-lg);
    overflow:      hidden;
    width:         100%;
    display:       flex;
    flex-direction: column;
}

@media (min-width: 480px) {
    .confirm-card { flex-direction: row; }
    .confirm-cover { width: 180px; flex-shrink: 0; }
}

.confirm-cover {
    background:   #f1f5f9;
    min-height:   160px;
    display:      flex;
    align-items:  center;
    justify-content: center;
    overflow:     hidden;
}
.confirm-cover img { width: 100%; height: 100%; object-fit: cover; }

.confirm-info {
    padding:        20px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    flex:           1;
}

.confirm-barcode-tag {
    font-family:   monospace;
    font-size:     .78rem;
    color:         var(--text-muted);
    background:    var(--bg);
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 4px;
    letter-spacing: .04em;
}

.confirm-title {
    font-size:   1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Picker ─────────────────────────────────────────────────────────────── */
.picker-header { text-align: center; width: 100%; }
.picker-header h2 { font-size: 1.05rem; font-weight: 600; }
.picker-sub { color: var(--text-muted); font-size: .875rem; margin-top: 4px; }

.picker-list {
    width:          100%;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    max-height:     55vh;
    overflow-y:     auto;
    padding-right:  2px;
}

.picker-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 14px;
    background:    var(--surface);
    border-radius: var(--radius-sm);
    box-shadow:    var(--shadow-sm);
    cursor:        pointer;
    transition:    box-shadow .15s, transform .1s;
    border:        1.5px solid transparent;
}
.picker-item:hover {
    box-shadow: var(--shadow-md);
    transform:  translateY(-1px);
    border-color: var(--accent);
}
.picker-item img {
    width:         44px;
    height:        60px;
    object-fit:    cover;
    border-radius: 4px;
    flex-shrink:   0;
    background:    #f1f5f9;
}
.picker-title { font-size: .9rem; font-weight: 500; line-height: 1.3; }

.picker-footer { width: 100%; text-align: center; padding-top: 4px; }

/* ── Manual entry ───────────────────────────────────────────────────────── */
.manual-card {
    background:    var(--surface);
    border-radius: var(--radius);
    box-shadow:    var(--shadow-lg);
    padding:       24px;
    width:         100%;
    display:       flex;
    flex-direction: column;
    gap:           16px;
}
.manual-card h2 { font-size: 1.05rem; font-weight: 600; }

.manual-cover-preview { text-align: center; }
.manual-cover-preview img {
    max-width:     120px;
    max-height:    160px;
    object-fit:    cover;
    border-radius: var(--radius-sm);
    box-shadow:    var(--shadow-sm);
    margin:        0 auto;
}

/* ── Duplicate warning ──────────────────────────────────────────────────── */
.duplicate-card {
    background:    var(--warn-bg);
    border:        1.5px solid var(--warn-border);
    border-radius: var(--radius);
    padding:       28px 24px;
    width:         100%;
    text-align:    center;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           12px;
}
.duplicate-icon { font-size: 2.5rem; line-height: 1; }
.duplicate-card h2 { font-size: 1.1rem; font-weight: 700; }
.duplicate-thumb {
    max-width:     80px;
    max-height:    110px;
    object-fit:    cover;
    border-radius: var(--radius-sm);
    box-shadow:    var(--shadow-sm);
}
.duplicate-disc-title { font-weight: 600; }
.duplicate-barcode    { font-family: monospace; font-size: .8rem; color: var(--text-muted); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-row {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}
.form-row label {
    font-size:   .82rem;
    font-weight: 500;
    color:       var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.form-row input[type="text"],
.form-row input[type="number"] {
    padding:       9px 12px;
    border:        1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size:     1rem;
    font-family:   var(--font);
    background:    var(--surface);
    color:         var(--text);
    width:         100%;
    transition:    border-color .15s;
}
.form-row input:focus {
    outline:      none;
    border-color: var(--accent);
}
.form-row input[type="file"] {
    font-size:   .875rem;
    color:       var(--text-muted);
}
.input-readonly {
    background:  var(--bg)       !important;
    color:       var(--text-muted) !important;
    font-family: monospace       !important;
    font-size:   .875rem         !important;
    cursor:      default;
}
.field-hint  { font-size: .76rem; color: var(--text-muted); margin-top: 2px; }
.required    { color: var(--danger); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    padding:       9px 22px;
    border-radius: var(--radius-sm);
    font-size:     .9rem;
    font-weight:   500;
    font-family:   var(--font);
    cursor:        pointer;
    border:        1.5px solid transparent;
    text-decoration: none;
    transition:    background .15s, border-color .15s, color .15s;
    white-space:   nowrap;
}
.btn-primary {
    background:  var(--accent);
    color:       #fff;
    border-color: var(--accent);
}
.btn-primary:hover {
    background:  var(--accent-dark);
    border-color: var(--accent-dark);
}
.btn-ghost {
    background:   transparent;
    color:        var(--text-muted);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.btn-sm { padding: 6px 14px; font-size: .8rem; }

.btn-link {
    background:  none;
    border:      none;
    color:       var(--accent);
    font-size:   .85rem;
    font-family: var(--font);
    cursor:      pointer;
    padding:     4px 0;
    text-decoration: underline;
}
.btn-link:hover { color: var(--accent-dark); }

/* ── Browse tab ─────────────────────────────────────────────────────────── */
#tab-browse { padding: 16px; }

.browse-bar {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom: 16px;
    flex-wrap:   wrap;
}

#browse-search {
    flex:           1;
    min-width:      160px;
    padding:        8px 16px;
    border:         1.5px solid var(--border);
    border-radius:  20px;
    font-size:      .9rem;
    font-family:    var(--font);
    background:     var(--surface);
    color:          var(--text);
    transition:     border-color .15s;
}
#browse-search:focus { outline: none; border-color: var(--accent); }

.browse-count {
    font-size:   .82rem;
    color:       var(--text-muted);
    white-space: nowrap;
}

/* ── Disc grid ──────────────────────────────────────────────────────────── */
.browse-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap:                   12px;
}

@media (min-width: 600px) {
    .browse-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.disc-card {
    background:    var(--surface);
    border-radius: var(--radius);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    position:      relative;
    transition:    box-shadow .15s, transform .1s;
}
.disc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.disc-cover {
    aspect-ratio: 2 / 3;
    background:   #f1f5f9;
    overflow:     hidden;
}
.disc-cover img { width: 100%; height: 100%; object-fit: cover; }

.no-cover {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #94a3b8;
    font-size:       .72rem;
    text-align:      center;
    padding:         8px;
}

.disc-meta {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.disc-title {
    font-size:         .78rem;
    font-weight:       600;
    line-height:       1.3;
    overflow:          hidden;
    display:           -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.disc-barcode {
    font-family: monospace;
    font-size:   .68rem;
    color:       var(--text-muted);
}
.disc-price {
    font-size:   .78rem;
    font-weight: 700;
    color:       var(--accent);
    margin-top:  2px;
}

.disc-delete {
    position:      absolute;
    top:           5px;
    right:         5px;
    width:         22px;
    height:        22px;
    border-radius: 50%;
    background:    rgba(0,0,0,.45);
    color:         #fff;
    border:        none;
    font-size:     14px;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    opacity:       0;
    transition:    opacity .15s;
}
.disc-card:hover .disc-delete { opacity: 1; }

.empty-msg {
    grid-column: 1 / -1;
    text-align: center;
    color:      var(--text-muted);
    padding:    56px 16px;
    font-size:  .95rem;
}

/* ── Toast notifications ────────────────────────────────────────────────── */
#toast-container {
    position:       fixed;
    bottom:         20px;
    right:          20px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    z-index:        999;
    pointer-events: none;
}

.toast {
    padding:        11px 18px;
    border-radius:  var(--radius-sm);
    font-size:      .875rem;
    font-weight:    500;
    box-shadow:     var(--shadow-md);
    max-width:      320px;
    pointer-events: auto;
    opacity:        0;
    transform:      translateY(6px);
    transition:     opacity .25s, transform .25s;
    border:         1px solid transparent;
}
.toast-visible { opacity: 1; transform: translateY(0); }

.toast-success {
    background:   var(--success-bg);
    color:        var(--success-text);
    border-color: var(--success-border);
}
.toast-error {
    background:   var(--error-bg);
    color:        var(--error-text);
    border-color: var(--error-border);
}