/* ============================================================
   Asset Manager — Complete Fresh Stylesheet
   ============================================================ */

:root {
  --amber:        #f5a623;
  --amber-dark:   #e09516;
  --amber-light:  #fff8ec;
  --sidebar-w:    230px;
  --sidebar-bg:   #1a1d23;
  --surface:      #ffffff;
  --surface-2:    #f4f6f9;
  --border:       #e2e8f0;
  --text:         #1a1d23;
  --text-muted:   #64748b;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.07);
}

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

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--surface-2);
  color: var(--text);
  margin: 0;
  /* overflow: hidden; */
  overflow-y: auto;   /* ✅ allow vertical scroll */
  overflow-x: hidden;
  height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  margin-bottom: 1.5rem;
}

.sidebar .nav-link {
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  color: rgba(255,255,255,.55) !important;
  font-size: .875rem;
  display: flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.sidebar .nav-link:hover  { background: rgba(255,255,255,.08); color: #fff !important; }
.sidebar .nav-link.active { background: rgba(245,166,35,.15);  color: var(--amber) !important; }
.sidebar .nav-link i      { width: 1.25rem; }

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .875rem;
  margin-top: auto;
}

/* ── Main content ───────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  height: 100vh;
  overflow-y: auto;
  padding: 1.75rem 2rem;
  background: var(--surface-2);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  background: var(--surface);
  transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow-hover) !important; }

.card-header {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

.card-footer {
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  background: #fff !important;
}

/* Card header custom style */
.card-header-custom {
  display: flex;
  align-items: center;
  padding: .875rem 1.25rem;
  font-weight: 600;
  font-size: .9rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.step-badge {
  width: 1.6rem; height: 1.6rem;
  background: var(--amber);
  color: #fff;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .5rem;
  flex-shrink: 0;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-warning {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #1a1d23 !important;
  font-weight: 600;
}
.btn-warning:hover {
  background: var(--amber-dark) !important;
  border-color: var(--amber-dark) !important;
}
.btn-outline-warning {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}
.btn-outline-warning:hover {
  background: var(--amber) !important;
  color: #1a1d23 !important;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table { margin-bottom: 0; }
.table th {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border) !important;
}
.table td { vertical-align: middle; font-size: .875rem; }
.table-hover tbody tr:hover { background: var(--amber-light) !important; }
.table-light { background: #f8fafc !important; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .02em; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border) !important;
  font-size: .875rem;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(245,166,35,.15) !important;
}
.input-group-text {
  border-color: var(--border) !important;
  background: #f8fafc;
  font-size: .875rem;
}

/* ── Pagination ─────────────────────────────────────────────── */
.page-link {
  color: var(--text);
  border-color: var(--border);
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  font-size: .825rem;
}
.page-link:hover { background: var(--amber-light); color: var(--text); border-color: var(--amber); }
.page-item.active .page-link {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #1a1d23 !important;
  font-weight: 700;
}
.page-item.disabled .page-link { color: #ccc; }

/* ── Password policy badges ─────────────────────────────────── */
#pwdPolicy { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
#pwdPolicy .badge { font-size: .72rem; transition: background .2s; padding: .3em .6em; }

/* ── OTP input ──────────────────────────────────────────────── */
#otpCode {
  letter-spacing: .5rem;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}

/* ── Sync spin animation ────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .7s linear infinite; }

/* ── Upload dropzone ────────────────────────────────────────── */
.upload-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-dropzone:hover, .upload-dropzone.dragover {
  border-color: var(--amber);
  background: var(--amber-light);
}

/* ── Image viewer ───────────────────────────────────────────── */
.image-viewer-container {
  position: relative;
  display: inline-block;
  border-radius: var(--radius);
  overflow: hidden;
}
.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .875rem;
  opacity: 0;
  cursor: pointer;
  transition: opacity .2s;
  border-radius: var(--radius);
}
.image-viewer-container:hover .image-overlay { opacity: 1; }
.record-image { border-radius: var(--radius); max-height: 320px; }

/* ── History ─────────────────────────────────────────────────── */
.history-state-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
  padding: .25rem .5rem;
  border-radius: 4px;
  display: inline-block;
}
.history-state-label.before { background: #fee2e2; color: #991b1b; }
.history-state-label.after  { background: #dcfce7; color: #166534; }

/* ── Detail page ─────────────────────────────────────────────── */
.detail-meta-item {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: .625rem .875rem;
  height: 100%;
}
.detail-meta-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .2rem;
}
.detail-meta-value { font-size: .875rem; font-weight: 500; }

/* ── Fields grid (new record) ────────────────────────────────── */
.fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .4rem;
}
.field-check-item {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  transition: border-color .15s, background .15s;
}
.field-check-item:hover { border-color: var(--amber); background: var(--amber-light); }

/* ── Gemini mode box ─────────────────────────────────────────── */
#gemini-key-box {
  border-left: 3px solid var(--amber);
  padding-left: .75rem;
}

/* ── OTP dev box ─────────────────────────────────────────────── */
#otpDevAlert {
  border-left: 4px solid var(--amber);
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar hides as fixed panel on mobile — shown via offcanvas drawer instead */
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: 1rem; }

  /* Mobile top bar */
  .mobile-topbar {
    display: flex !important;
  }
}

/* Mobile top bar — hidden on desktop */
.mobile-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--sidebar-bg);
  padding: .6rem 1rem;
  align-items: center;
  gap: .75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.mobile-topbar .brand-name {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  flex: 1;
}
.mobile-topbar .hamburger {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: .2rem .4rem;
  cursor: pointer;
}

/* Offcanvas sidebar drawer (mobile) */
.offcanvas-sidebar {
  background: var(--sidebar-bg) !important;
  width: 240px !important;
}
.offcanvas-sidebar .nav-link {
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  color: rgba(255,255,255,.65) !important;
  font-size: .9rem;
  display: flex;
  align-items: center;
}
.offcanvas-sidebar .nav-link:hover  { background: rgba(255,255,255,.08); color: #fff !important; }
.offcanvas-sidebar .nav-link.active { background: rgba(245,166,35,.15);  color: var(--amber) !important; }
.offcanvas-sidebar .nav-link i      { width: 1.25rem; }
.offcanvas-sidebar .sidebar-footer  {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .875rem;
  margin-top: auto;
}

/* ── Upload tabs (New Record page) ───────────────────────── */
.upload-tabs {
  display: flex;
  gap: .5rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.upload-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: .6rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color .15s, border-color .15s, background .15s;
  display: flex;
  align-items: center;
}
.upload-tab-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}
.upload-tab-btn.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
  background: var(--surface);
}

/* =============================================================
   ── RESPONSIVE LAYER  (PC + tablet + mobile browser support) ──
   Breakpoints:  ≤992 (small tablet)  ≤768 (large phone)  ≤576 (phone)
   ============================================================= */

/* iOS Safari: fix 100vh overflow when address bar appears */
@supports (height: 100svh) {
  .sidebar      { height: 100svh; }
  .main-content { height: 100svh; }
}

/* Make every <table> inside the app horizontally scrollable on narrow
   screens so it never blows out the page width. */
.main-content table { max-width: 100%; }
.main-content .table-responsive { -webkit-overflow-scrolling: touch; }

/* Universal: prevent horizontal overflow from any rogue child */
html, body { overflow-x: hidden; }
.main-content { word-wrap: break-word; overflow-wrap: anywhere; }

/* Tap targets: minimum 36px (Apple/Google guidelines for touch) */
@media (max-width: 992px) {
  .btn-sm { min-height: 32px; }
  .btn    { min-height: 36px; }
  /* Keep dropdown menus inside the viewport */
  .dropdown-menu { max-width: calc(100vw - 24px); }
}

/* ── Tablet and smaller (≤992px) ───────────────────────────── */
@media (max-width: 992px) {
  .main-content { padding: 1.25rem 1rem; }
  .page-header  { flex-wrap: wrap; gap: .5rem; }
  .page-header h4, .page-header h5 { font-size: 1.05rem; }

  /* Cards: tighter padding */
  .card-body { padding: .9rem 1rem; }

  /* Page-level button strips wrap nicely */
  .d-flex.gap-2, .d-flex.gap-3 { flex-wrap: wrap; }
}

/* ── Phone (≤768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Reduce vertical rhythm */
  h1, .h1 { font-size: 1.4rem; }
  h2, .h2 { font-size: 1.25rem; }
  h3, .h3 { font-size: 1.1rem; }
  h4, .h4 { font-size: 1rem; }
  h5, .h5 { font-size: .95rem; }

  /* Tracks badge layout: 1 column on phones — sides stack */
  .trk-sides { grid-template-columns: 1fr !important; }

  /* Image previews don't dominate the viewport */
  .record-image, .upload-dropzone img { max-height: 240px !important; }

  /* QR card centered, not overflowing */
  .qr-image { max-width: 160px !important; }

  /* Modal dialogs use full width on mobile */
  .modal-dialog { margin: .5rem; }

  /* Forms: full-width controls and stacked input groups */
  .input-group { flex-wrap: wrap; }

  /* Detail page meta items take full width */
  .detail-meta-item { padding: .5rem .25rem; }

  /* Reduce print-area size hints (the print itself uses @page) */
}

/* ── Small phone (≤576px) ──────────────────────────────────── */
@media (max-width: 576px) {
  .main-content { padding: 1rem .75rem; }
  .card-body    { padding: .75rem .85rem; }
  .card-header-custom { padding: .65rem .85rem; font-size: .9rem; }

  /* Stack the page-header action row beneath title */
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header > div:last-child { width: 100%; }
  .page-header > div:last-child .btn { flex: 1 1 auto; }

  /* Buttons: shrink padding so multiple fit per row */
  .btn-sm { padding: .35rem .55rem; font-size: .8rem; }

  /* Detail page edit form: stack the col-4/col-5/col-3 trio (wider columns) */
  #editFields .field-row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* New-record extracted fields (col-5/col-6/col-1): keep on a single line — shrink instead */
  #s-fields-container .field-row {
    --bs-gutter-x: 4px !important;
    flex-wrap: nowrap !important;
  }
  #s-fields-container .field-row > .col-5 { flex: 0 0 40%; max-width: 40%; padding-left: 2px; padding-right: 2px; }
  #s-fields-container .field-row > .col-6 { flex: 0 0 46%; max-width: 46%; padding-left: 2px; padding-right: 2px; }
  #s-fields-container .field-row > .col-1 { flex: 0 0 14%; max-width: 14%; padding-left: 2px; padding-right: 2px; }
  #s-fields-container .field-row .form-control { font-size: .78rem; padding: .3rem .45rem; min-height: 30px; }
  #s-fields-container .field-row textarea.form-control { font-size: .75rem; min-height: 60px; }
  #s-fields-container .field-row .btn { padding: .2rem .3rem; min-height: 30px; width: 100%; }
  #s-fields-container .field-row .btn i { font-size: .75rem; }

  /* Tracks editor: stack side/# inputs above the song input */
  .te-track .row > .col-2 { width: 50%; max-width: 50%; flex: 0 0 50%; }
  .te-track .row > .col-7 { width: 100%; max-width: 100%; flex: 0 0 100%; margin-top: .35rem; }
  .te-track .row > .col-1 { width: 100%; max-width: 100%; flex: 0 0 100%; text-align: left !important; }

  /* Track artist chips: smaller */
  .trk-artist-badge, .te-chip { font-size: .68rem; padding: 1px 6px; }

  /* Image-zoom modal: use more vertical space on tiny screens */
  .iz-stage { height: 65vh; }
  @supports (height: 65svh) { .iz-stage { height: 65svh; } }
}

/* ── Print-specific (always, regardless of viewport) ──────── */
@media print {
  .sidebar, .mobile-topbar, .offcanvas, .btn, button, .alert { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; }
}