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

:root {
  --bg:       #f4f5f7;
  --surface:  #ffffff;
  --border:   #e2e5ea;
  --text:     #1a1d23;
  --muted:    #6b7280;
  --primary:  #2563eb;
  --primary-hover: #1d4ed8;
  --danger:   #dc2626;
  --success:  #16a34a;
  --warning:  #d97706;
  --sidebar-w: 220px;
  --radius:   8px;
  --shadow:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  /* Rhythmethod brand accent — sampled from the turntable/vinyl artwork */
  --brand-amber: #e08a4b;
  --brand-amber-light: #f2b688;
  --sidebar-bg: #1e2433;
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Screens ─────────────────────────────────────────────────── */
.screen { min-height: 100vh; }
.hidden { display: none !important; }

/* ── Login ───────────────────────────────────────────────────── */
#login-screen {
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(15,17,23,.55), rgba(15,17,23,.75)),
    url('/img/brand-bg.jpg') center 35% / cover no-repeat;
  min-height: 100vh;
}
.login-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }

/* ── Brand mark: bracket-framed wordmark, matches the Rhythmethod logo ── */
.brand-mark { display: flex; align-items: center; justify-content: center; gap: 8px; }
.brand-bracket { width: 7px; height: 18px; flex-shrink: 0; }
.brand-bracket-l { border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; }
.brand-bracket-r { border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; }
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
.brand-tagline { font-size: 10px; letter-spacing: .3px; text-align: center; }

.login-box .brand-mark { color: var(--text); margin-bottom: 6px; }
.login-box .brand-mark-lg .brand-name { font-size: 22px; }
.login-box .brand-mark-lg .brand-bracket { height: 24px; width: 9px; }
.login-box .brand-tagline-lg { color: var(--muted); font-size: 12px; margin-bottom: 26px; }

/* ── Forms ───────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; color: var(--text); background: var(--surface); outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
textarea { resize: vertical; min-height: 80px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, opacity .15s; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--primary); color: #fff; width: 100%; justify-content: center; }
.btn-primary:hover:not(:disabled)  { background: var(--primary-hover); }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover:not(:disabled){ background: #d1d5db; }
.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled)   { background: #b91c1c; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* New Releases period switcher.
   .btn-primary is deliberately full-width (login and modal actions rely on
   it), which made whichever period was selected stretch across the page while
   the others stayed label-width. These override that locally: a fixed basis
   keeps every button the same size regardless of which is active. */
.nr-period-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
/* The period buttons stay together on one line; the week picker and download
   button may drop below them on a narrow window rather than squashing. */
.nr-period-group { display: flex; gap: 8px; flex-wrap: nowrap; }
/* 138px is the narrowest that still fits the longest label ("Future
   Releases" needs 135px including padding) and leaves the five buttons, the
   week picker and Download on one row inside the 1036px content area. */
.nr-period-btn { width: auto; flex: 0 0 138px; justify-content: center; white-space: nowrap; }
/* The global `select { width: 100% }` rule above wins over min-width, which
   stretched this to the full width of its row. Pinned to the same 150px basis
   as the buttons; the longest option ("28 Jul – 3 Aug") still fits. */
.nr-week-select { flex: 0 0 138px; width: 138px; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.nr-download-btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

/* ── Error / success messages ────────────────────────────────── */
.error   { color: var(--danger);  font-size: 13px; margin-top: 10px; min-height: 18px; }
.success { color: var(--success); font-size: 13px; margin-top: 10px; }

/* ── Sidebar + layout ────────────────────────────────────────── */
#main-screen { display: flex; }
#sidebar {
  width: var(--sidebar-w); min-height: 100vh; color: #c9cdd8;
  display: flex; flex-direction: column; flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(20,23,33,.90) 0%, rgba(20,23,33,.97) 45%, var(--sidebar-bg) 75%),
    url('/img/brand-bg.jpg') center 15% / cover no-repeat;
  background-color: var(--sidebar-bg);
}
.sidebar-header { padding: 22px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-header .brand-mark { color: #fff; }
.sidebar-header .brand-tagline { color: var(--brand-amber-light); margin-top: 4px; text-transform: uppercase; }
.nav-links { list-style: none; padding: 8px 0; flex: 1; }
.nav-links li a { display: block; padding: 9px 16px; color: #9ca3b0; font-size: 13.5px; border-radius: 0; border-left: 3px solid transparent; transition: background .12s, color .12s, border-color .12s; }
.nav-links li a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-links li a.active { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; border-left-color: var(--brand-amber); }
.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; color: #6b7585; background: var(--sidebar-bg); }
.sidebar-footer #nav-username { display: block; font-weight: 600; color: #9ca3b0; margin-bottom: 8px; }
.sidebar-footer a { display: block; color: #6b7585; margin-top: 4px; font-size: 12px; }
.sidebar-footer a:hover { color: #9ca3b0; text-decoration: none; }

#content { flex: 1; min-width: 0; padding: 28px 32px; max-width: 1100px; }

/* ── Page header ─────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-header h2 { font-size: 20px; font-weight: 700; }

/* ── Cards / panels ──────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 18px; }

/* ── Dashboard stat cards ────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.stat-card .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 6px; }
.stat-card .stat-value { font-size: 26px; font-weight: 700; }
.stat-card .stat-value.danger  { color: var(--danger); }
.stat-card .stat-value.warning { color: var(--warning); }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 9px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border-bottom: 2px solid var(--border); background: #fafbfc; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8f9fb; }
body.modal-open tr:hover td { background: inherit; }
td a { font-weight: 500; }

/* ── Search bar ──────────────────────────────────────────────── */
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.search-bar input { max-width: 320px; }
.search-bar select { width: auto; }

/* ── Detail layout ───────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.detail-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.detail-section .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.detail-section .section-body { padding: 14px 16px; }
.kv-list { display: grid; grid-template-columns: 140px 1fr; row-gap: 8px; }
.kv-list .k { font-size: 12px; font-weight: 600; color: var(--muted); }
.kv-list .v { font-size: 13.5px; word-break: break-word; }
.kv-list .v.balance { font-weight: 700; }
.kv-list .v.danger  { color: var(--danger); }

/* ── Notes ───────────────────────────────────────────────────── */
.notes-section { margin-top: 20px; }
.note-item { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.note-item:last-child { border-bottom: none; }
.note-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.note-body { font-size: 13.5px; white-space: pre-wrap; }
.note-actions { margin-top: 6px; display: flex; gap: 8px; }
.note-add { padding: 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-start; }
.note-add textarea { flex: 1; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-green  { background: #dcfce7; color: #166534; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-gray   { background: #f3f4f6; color: #374151; }
.badge-orange { background: #fff3e0; color: #e65100; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.btn-icon { background: none; border: none; cursor: pointer; font-size: 1em; padding: 2px 6px; border-radius: 4px; color: var(--text-muted); line-height: 1; }
.btn-icon:hover { background: var(--hover); color: var(--danger, #dc2626); }

/* ── Contact cards ───────────────────────────────────────────── */
.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 12px; }
.contact-card.contact-primary { border-left: 3px solid var(--accent); }
.contact-name { font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.contact-details { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.875rem; color: var(--text); margin-bottom: 6px; }
.contact-details a { color: var(--accent); }
.contact-position { color: var(--text-muted); font-style: italic; width: 100%; margin-bottom: 2px; }
.contact-memo { color: var(--text-muted); font-size: 0.82rem; width: 100%; }
.contact-roles { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Tabs ────────────────────────────────────────────────────── */
.tab-bar { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 2px solid var(--border); }
.tab-btn { background: none; border: none; padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Retail price table ──────────────────────────────────────── */
.price-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.price-table th { text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--border); color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.price-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: var(--surface); }

/* ── Back link ───────────────────────────────────────────────── */
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.back-link:hover { color: var(--text); text-decoration: none; }

/* ── Loading / empty states ──────────────────────────────────── */
.loading { color: var(--muted); padding: 32px; text-align: center; font-size: 13px; }
.empty   { color: var(--muted); padding: 24px; text-align: center; font-size: 13px; }

/* ── MFA setup ───────────────────────────────────────────────── */
.mfa-hint { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.mfa-qr   { text-align: center; margin: 16px 0; }
.mfa-qr img { border: 1px solid var(--border); border-radius: 6px; }
.mfa-secret { font-family: monospace; font-size: 13px; background: #f3f4f6; padding: 8px 12px; border-radius: 6px; word-break: break-all; text-align: center; margin-bottom: 12px; }

/* ── Sales dashboard ─────────────────────────────────────────── */
.sales-panel { margin-bottom: 24px; }
.sales-panel .panel-body { padding: 16px 18px; }
.chart-wrap { position: relative; height: 280px; margin: 12px 0 4px; }
.dept-totals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dept-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.dept-badge.cd    { background: #dbeafe; color: #1d4ed8; }
.dept-badge.wm    { background: #fef3c7; color: #92400e; }
.dept-badge.sony  { background: #d1fae5; color: #065f46; }
.dept-badge.total { background: var(--border); color: var(--text); }

/* ── Release tiles ───────────────────────────────────────────── */
.release-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.release-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.release-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.release-tile .tile-no-img { width: 100%; aspect-ratio: 1; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 48px; }
.release-tile .tile-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; }
.release-tile .tile-date { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--primary); margin-bottom: 4px; }
.release-tile .tile-artist { font-size: 13px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; }
.release-tile .tile-title  { font-size: 12px; color: var(--muted); line-height: 1.3; margin-bottom: 10px; }
.release-tile .tile-codes  { margin-top: auto; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.release-tile .tile-code-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; }
.release-tile .tile-code-row a { font-weight: 600; color: var(--primary); }
.release-tile .tile-code-row .tile-format { color: var(--muted); flex-shrink: 0; }
.release-tile .tile-code-row .tile-price  { color: var(--text); font-weight: 500; flex-shrink: 0; }

/* ── Import Products wizard ─────────────────────────────────── */
.mwi-steps { display: flex; margin-bottom: 16px; }
.mwi-step { flex: 1; padding: 6px 4px; font-size: 12px; font-weight: 500; color: var(--muted); border-bottom: 2px solid var(--border); text-align: center; white-space: nowrap; }
.mwi-step.active { color: var(--primary); border-bottom-color: var(--primary); }
.mwi-step.done { color: var(--success); border-bottom-color: var(--success); }

.mwi-dropzone { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; cursor: pointer; background: var(--bg); transition: background .15s; }
.mwi-dropzone.drag-over { background: #e6f1fb; border-color: var(--primary); }
.mwi-dropzone .mwi-dz-icon { font-size: 32px; margin-bottom: 6px; }

.mwi-supplier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; }
.mwi-supplier-card { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; cursor: pointer; transition: all .12s; background: var(--surface); }
.mwi-supplier-card:hover { background: var(--bg); }
.mwi-supplier-card.active { border-color: var(--primary); background: #e6f1fb; }
.mwi-supplier-card .code { font-size: 13px; font-weight: 600; }
.mwi-supplier-card .nm { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwi-supplier-card .eg { font-size: 10px; color: var(--muted); margin-top: 3px; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwi-group-label { grid-column: 1/-1; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 6px 0 2px; }
.mwi-rule-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.mwi-rule-panel code { font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }

.mwi-map-row { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; border-bottom: 1px solid var(--border); min-height: 38px; }
.mwi-map-row:last-child { border-bottom: none; }
.mwi-map-row:nth-child(even) { background: var(--bg); }
.mwi-map-fc { padding: 4px 8px; font-size: 12px; overflow: hidden; }
.mwi-map-fc .fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwi-map-fc .fh { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwi-map-row select { width: 100%; font-size: 11px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); }
.mwi-map-row select.mapped { border-color: var(--primary); background: #e6f1fb; color: #0c447c; }
.mwi-map-row select.req-mapped { border-color: var(--success); background: #eaf3de; color: #27500a; }
.mwi-label-panel { background: #fef0fb; border: 1px solid #e8a8d8; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #5c1252; margin-top: 8px; line-height: 1.8; }

.mwi-grid-wrap { overflow-x: auto; max-height: 460px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.mwi-grid { border-collapse: collapse; font-size: 11px; min-width: 100%; }
.mwi-grid th { padding: 5px 6px; background: var(--bg); border-bottom: 1px solid var(--border); text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap; position: sticky; top: 0; z-index: 2; }
.mwi-grid th.gen { color: var(--primary); } .mwi-grid th.lbl { color: #7c1b6a; }
.mwi-grid td { padding: 2px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mwi-grid tr:last-child td { border-bottom: none; }
.mwi-grid tr.row-error   td { background: rgba(220,38,38,.05); }
.mwi-grid tr.row-dup     td { background: rgba(124,58,237,.05); }
.mwi-grid tr.row-warning td { background: rgba(217,119,6,.05); }
.mwi-grid tr.row-skip    td { opacity: .35; }
.mwi-cell { width: 100%; font-size: 11px; font-family: monospace; padding: 2px 5px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--text); }
.mwi-cell:focus { border-color: var(--primary); background: var(--surface); outline: none; }
.mwi-cell.gen { color: var(--primary); }
.mwi-cell.lbl { color: #7c1b6a; font-weight: 500; }
.mwi-cell.lbl.unresolved { color: var(--warning); border-color: #f0d070; }
.mwi-cell.dup { border-color: #afa9ec; color: #3c3489; }
.mwi-cell.err { border-color: #f09595; color: #a32d2d; }
.mwi-row-num { font-size: 10px; color: var(--muted); text-align: right; padding: 0 6px; user-select: none; }
.mwi-issues { font-size: 10px; min-width: 140px; max-width: 220px; line-height: 1.6; }
.mwi-issues .ie { color: #a32d2d; display: block; } .mwi-issues .id { color: #3c3489; display: block; } .mwi-issues .iw { color: var(--warning); display: block; }

.mwi-progress-bar-wrap { height: 6px; background: #b5d4f4; border-radius: 20px; overflow: hidden; margin: 4px 0; }
.mwi-progress-bar { height: 100%; background: var(--primary); border-radius: 20px; transition: width .2s; width: 0%; }
.mwi-log { font-family: monospace; font-size: 11px; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid #b5d4f4; border-radius: 6px; padding: 6px; margin-top: 6px; }
.mwi-log-line { padding: 1px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.mwi-log-line:last-child { border: none; }
.mwi-log-ok { color: var(--success); } .mwi-log-err { color: var(--danger); } .mwi-log-skip { color: #3c3489; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.detail-grid { grid-template-columns: 1fr; }
  #content { padding: 16px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}