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

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

:root {
  --white:      #ffffff;
  --bg:         #f8f9fa;
  --border:     #e5e7eb;
  --border2:    #d1d5db;
  --text:       #111827;
  --text2:      #6b7280;
  --text3:      #9ca3af;
  --blue:       #2563eb;
  --blue-bg:    #eff6ff;
  --blue-txt:   #1d4ed8;
  --green-bg:   #dcfce7; --green-txt: #166534;
  --amber-bg:   #fef9c3; --amber-txt: #854d0e;
  --red-bg:     #fee2e2; --red-txt:   #991b1b;
  --gray-bg:    #f3f4f6; --gray-txt:  #374151;
  --purple-bg:  #f3e8ff; --purple-txt:#6b21a8;
}

body { font-family: 'Sora', sans-serif; background: var(--bg);
       color: var(--text); font-size: 14px; }

/* ── Layout ── */
.app-shell   { display: flex; height: 100vh; overflow: hidden; }
.sidebar     { width: 210px; background: var(--white); border-right: 1px solid var(--border);
               display: flex; flex-direction: column; flex-shrink: 0; }
.main        { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.page        { flex: 1; overflow-y: auto; }

/* ── Sidebar ── */
.sidebar-logo { padding: 20px 18px 16px; border-bottom: 1px solid var(--border); }
.sidebar-logo h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.05em; }
.sidebar-logo span { color: var(--blue); }
.sidebar-nav  { flex: 1; padding: 10px; }
.nav-item     { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
                border-radius: 6px; font-size: 12px; font-weight: 600;
                letter-spacing: 0.04em; text-transform: uppercase;
                text-decoration: none; color: var(--text2);
                margin-bottom: 2px; transition: background 0.1s; }
.nav-item:hover   { background: var(--blue-bg); color: var(--blue); }
.nav-item.active  { background: var(--blue-bg); color: var(--blue);
                    border-left: 3px solid var(--blue); }
.nav-divider  { height: 1px; background: var(--border); margin: 8px 0; }
.sidebar-footer { padding: 14px; border-top: 1px solid var(--border);
                  font-size: 10px; }
.sidebar-footer .user-name { font-weight: 600; color: var(--text); font-size: 11px; }
.sidebar-footer .user-role { color: var(--blue); margin-bottom: 8px; }
.sidebar-footer .conn-label { color: var(--text3); text-transform: uppercase;
                               letter-spacing: 0.05em; font-size: 9px; }
.sidebar-footer .conn-server { color: var(--text2); }
.sidebar-footer .conn-db     { color: var(--blue); font-weight: 600; }

/* ── Page header ── */
.page-header  { background: var(--white); padding: 14px 24px;
                border-bottom: 1px solid var(--border);
                display: flex; align-items: center; justify-content: space-between; }
.page-title   { font-size: 16px; font-weight: 600; text-transform: uppercase;
                letter-spacing: 0.04em; }

/* ── Buttons ── */
.btn          { display: inline-flex; align-items: center; gap: 6px;
                padding: 7px 14px; border-radius: 6px; font-family: 'Sora', sans-serif;
                font-size: 11px; font-weight: 600; cursor: pointer;
                border: none; text-decoration: none; transition: filter 0.15s; }
.btn:hover    { filter: brightness(0.9); }
.btn-primary  { background: var(--blue); color: white; }
.btn-ghost    { background: var(--white); color: var(--text2);
                border: 1px solid var(--border2); }
.btn-danger   { background: var(--red-bg); color: var(--red-txt);
                border: 1px solid #fca5a5; }
.btn-success  { background: var(--green-bg); color: var(--green-txt);
                border: 1px solid #86efac; }
.btn-sm       { padding: 4px 10px; font-size: 10px; }

/* ── Filter bar ── */
.filter-bar   { background: var(--white); padding: 10px 24px;
                border-bottom: 1px solid var(--border);
                display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filter-label { font-size: 9px; font-weight: 600; text-transform: uppercase;
                letter-spacing: 0.06em; color: var(--text3); }
.filter-sep   { width: 1px; height: 20px; background: var(--border2);
                flex-shrink: 0; }
.pill-group   { display: flex; gap: 4px; }
.pill         { padding: 4px 10px; border-radius: 20px; font-size: 10px;
                font-weight: 600; cursor: pointer; text-decoration: none;
                background: var(--gray-bg); color: var(--gray-txt);
                letter-spacing: 0.03em; border: none; font-family: 'Sora', sans-serif; }
.pill.active  { background: var(--blue); color: white; }
.search-wrap  { display: flex; align-items: center; border: 1px solid var(--border2);
                border-radius: 6px; background: var(--white); padding: 0 10px; }
.search-wrap input { border: none; outline: none; font-family: 'Sora', sans-serif;
                     font-size: 12px; padding: 6px 6px; width: 200px; background: transparent; }
.reviewer-select { font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 600;
                   letter-spacing: 0.03em; padding: 5px 10px; border-radius: 20px;
                   border: 1px solid var(--border2); background: var(--white);
                   color: var(--gray-txt); cursor: pointer; outline: none; }
.reviewer-select.active { background: var(--blue); color: white; border-color: var(--blue); }

/* ── Table ── */
.table-wrap   { overflow-x: auto; padding: 0; }
table         { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th      { background: var(--bg); color: var(--text3); font-size: 10px;
                font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
                padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border);
                white-space: nowrap; position: sticky; top: 0; }
thead th a    { color: inherit; text-decoration: none; display: flex;
                align-items: center; gap: 4px; }
thead th a:hover { color: var(--blue); }
tbody tr      { border-bottom: 1px solid var(--border); background: var(--white);
                transition: background 0.1s; cursor: pointer; }
tbody tr:hover { background: var(--blue-bg); }
tbody tr.selected { background: var(--blue-bg); }
tbody td      { padding: 9px 12px; color: var(--text); vertical-align: middle; }
.td-center    { text-align: center; }
.td-score     { text-align: center; font-weight: 600; }
.score-hi     { color: var(--green-txt); }
.score-mid    { color: var(--amber-txt); }
.score-lo     { color: var(--red-txt); }
.score-blind  { color: var(--text3); font-style: italic; }
.score-bubble { display:inline-flex;align-items:center;justify-content:center;
                min-width:36px;padding:2px 6px;border-radius:20px;
                font-size:11px;font-weight:600;color:white; }
.bubble-hi    { background: #16a34a; }
.bubble-mid   { background: #d97706; }
.bubble-lo    { background: #dc2626; }
.bubble-none  { background: transparent; color: var(--text3); }

/* ── Score dots ── */
.dot-row      { display: flex; gap: 6px; align-items: center; }
.dot          { width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
                border: 1.5px solid var(--border2); background: var(--white);
                position: relative; transition: border-color 0.1s; flex-shrink: 0; }
.dot.filled   { background: var(--blue); border-color: var(--blue); }
.dot.half::after { content: ''; position: absolute; left: 0; top: 0;
                   width: 50%; height: 100%; background: var(--blue);
                   border-radius: 50% 0 0 50%; }
.dot.hover-preview { border-color: #93c5fd; background: #93c5fd; }
.dot-val      { font-size: 11px; font-weight: 600; min-width: 28px;
                color: var(--text2); }
.dot-val.hi   { color: var(--green-txt); }
.dot-val.mid  { color: var(--amber-txt); }
.dot-val.lo   { color: var(--red-txt); }

/* ── Forms ── */
.form-card    { background: var(--white); border-radius: 8px; padding: 0;
                border: 1px solid var(--border); margin: 20px 24px; }
.form-header  { padding: 16px 24px; border-bottom: 1px solid var(--border);
                display: flex; align-items: center; gap: 12px; }
.form-header-bar { width: 3px; height: 24px; background: var(--blue);
                   border-radius: 2px; flex-shrink: 0; }
.form-header h2  { font-size: 15px; font-weight: 600; text-transform: uppercase;
                   letter-spacing: 0.04em; }
.form-body    { padding: 8px 24px 16px; }
.form-section-title { font-size: 9px; font-weight: 600; text-transform: uppercase;
                      letter-spacing: 0.06em; color: var(--text);
                      padding-top: 16px; margin-bottom: 4px; }
.form-divider { height: 1px; background: var(--border); margin-bottom: 10px; }
.form-grid    { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px;
                align-items: center; }
.form-label   { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
                color: var(--text3); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border2);
  border-radius: 6px; font-family: 'Sora', sans-serif; font-size: 12px;
  color: var(--text); background: var(--white); outline: none;
  transition: border-color 0.15s; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--blue); }
.form-textarea { resize: vertical; min-height: 80px; }
.yn-toggle    { display: flex; }
.yn-btn       { padding: 6px 14px; font-family: 'Sora', sans-serif;
                font-size: 10px; font-weight: 600; cursor: pointer;
                border: 1px solid var(--border2); background: var(--gray-bg);
                color: var(--gray-txt); }
.yn-btn:first-child { border-radius: 6px 0 0 6px; }
.yn-btn:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.yn-btn.active      { background: var(--blue); color: white; border-color: var(--blue); }
.form-footer  { padding: 12px 24px; border-top: 1px solid var(--border);
                display: flex; justify-content: flex-end; gap: 8px; }

/* ── Login ── */
.login-shell  { min-height: 100vh; background: var(--bg); display: flex;
                align-items: center; justify-content: center; }
.login-card   { background: var(--white); border: 1px solid var(--border2);
                border-radius: 12px; padding: 40px; width: 360px; }
.login-logo   { text-align: center; margin-bottom: 28px; }
.login-logo h1 { font-size: 20px; font-weight: 600; letter-spacing: 0.06em; }
.login-logo span { color: var(--blue); }
.login-divider { height: 1px; background: var(--border); margin: 20px 0; }
.login-link   { color: var(--blue); font-weight: 600; cursor: pointer;
                font-size: 12px; text-decoration: none; }
.login-link:hover { text-decoration: underline; }
.error-msg    { color: var(--red-txt); font-size: 11px; margin-top: 6px;
                background: var(--red-bg); padding: 6px 10px;
                border-radius: 4px; }
.success-msg  { color: var(--green-txt); font-size: 11px; margin-top: 6px;
                background: var(--green-bg); padding: 6px 10px;
                border-radius: 4px; }

/* ── Stat cards ── */
.stat-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
                gap: 12px; padding: 20px 24px; }
.stat-card    { background: var(--white); border: 1px solid var(--border);
                border-radius: 8px; padding: 16px; }
.stat-label   { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
                color: var(--text2); margin-bottom: 6px; }
.stat-value   { font-size: 24px; font-weight: 600; }
.stat-sub     { font-size: 10px; color: var(--text3); }

/* ── Request cards ── */
.request-list { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.req-card     { background: var(--white); border: 1px solid var(--border);
                border-radius: 8px; padding: 16px; }
.req-name     { font-weight: 600; font-size: 13px; }
.req-meta     { font-size: 11px; color: var(--text2); margin: 4px 0 12px; }
.req-actions  { display: flex; gap: 8px; }
.pin-display  { font-size: 28px; font-weight: 600; background: var(--gray-bg);
                padding: 10px 20px; border-radius: 6px; letter-spacing: 0.2em;
                text-align: center; margin: 12px 0; }
.empty-state  { text-align: center; padding: 60px 0; color: var(--text3);
                font-size: 13px; }

/* ── Flash messages ── */
.flash        { padding: 10px 24px; font-size: 12px; }
.flash.error  { background: var(--red-bg); color: var(--red-txt); }
.flash.success { background: var(--green-bg); color: var(--green-txt); }


.mobile-strip { display:none; padding:8px 14px; background:var(--white);
                border-bottom:1px solid var(--border);
                align-items:center; gap:10px; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  —  activates below 768px, desktop untouched
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .mobile-strip { display:flex !important; }


  /* ── App shell — stack sidebar on top ── */
  .app-shell   { flex-direction: column; height: auto; min-height: 100vh; }
  .main        { overflow: visible; }
  .page        { overflow: visible; }

  /* ── Sidebar becomes a top bar ── */
  .sidebar     { width: 100%; border-right: none;
                 border-bottom: 1px solid var(--border);
                 flex-direction: row; align-items: center;
                 padding: 0; position: sticky; top: 0; z-index: 200;
                 background: var(--white); }
  .sidebar-logo { padding: 12px 16px; border-bottom: none;
                  border-right: 1px solid var(--border); flex-shrink: 0; }
  .sidebar-logo h1 { font-size: 13px; }
  .sidebar-nav  { flex-direction: row; padding: 0 8px; flex: 1;
                  overflow-x: auto; gap: 2px; display: flex; }
  .nav-item     { padding: 12px 10px; font-size: 10px; white-space: nowrap;
                  border-radius: 0; border-bottom: 3px solid transparent;
                  margin-bottom: 0; }
  .nav-item.active { border-left: none; border-bottom: 3px solid var(--blue);
                     background: transparent; }
  .nav-divider  { display: none; }

  /* Hide sidebar footer on mobile — show user info differently */
  .sidebar-footer { display: none; }

  /* ── Page header ── */
  .page-header  { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .page-title   { font-size: 13px; }

  /* ── Filter bar — scroll horizontally ── */
  .filter-bar   { padding: 8px 14px; overflow-x: auto; flex-wrap: nowrap;
                  gap: 10px; -webkit-overflow-scrolling: touch; }
  .filter-bar form { display: contents; }
  .search-wrap input { width: 140px; }
  .filter-sep   { display: none; }

  /* ── Table — hide non-essential columns ── */
  .table-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table         { font-size: 11px; min-width: 100%; }
  thead th      { padding: 6px 8px; font-size: 9px; }
  tbody td      { padding: 7px 8px; }

  /* Hide: Year, Genre, Date, Theater, all subscores */
  /* Keep: Title, Type, Reviewer, Score, Rewatch, actions */
  thead th:nth-child(2),  /* Year */
  thead th:nth-child(4),  /* Genre */
  thead th:nth-child(6),  /* Date */
  thead th:nth-child(7),  /* Theater */
  thead th:nth-child(8),  /* Prod */
  thead th:nth-child(9),  /* Cast */
  thead th:nth-child(10), /* Chem */
  thead th:nth-child(11), /* Plot */
  thead th:nth-child(12), /* OST */
  thead th:nth-child(13), /* Pace */
  thead th:nth-child(14), /* End */
  thead th:nth-child(15), /* Orig */
  tbody td:nth-child(2),
  tbody td:nth-child(4),
  tbody td:nth-child(6),
  tbody td:nth-child(7),
  tbody td:nth-child(8),
  tbody td:nth-child(9),
  tbody td:nth-child(10),
  tbody td:nth-child(11),
  tbody td:nth-child(12),
  tbody td:nth-child(13),
  tbody td:nth-child(14),
  tbody td:nth-child(15) { display: none; }

  /* ── Forms ── */
  .form-card    { margin: 12px; }
  .form-grid    { grid-template-columns: 1fr; gap: 4px; }
  .form-label   { font-size: 10px; margin-top: 8px; }
  .form-footer  { padding: 10px 14px; }

  /* ── Stat cards ── */
  .stat-grid    { grid-template-columns: repeat(2, 1fr);
                  padding: 12px 14px; gap: 8px; }
  .stat-value   { font-size: 20px; }

  /* ── Request cards ── */
  .request-list { padding: 12px 14px; }

  /* ── Modal ── */
  .modal-box    { width: 95vw; max-height: 85vh; }
  .modal-header { padding: 12px 14px; }
  .modal-body   { padding: 10px 14px; }
  .modal-footer { padding: 8px 14px; }

  /* ── Login card ── */
  .login-card   { width: 92vw; padding: 28px 20px; }

  /* ── Autocomplete ── */
  .ac-input     { max-width: 100% !important; }

  /* ── Action buttons — stack tighter ── */
  .btn-sm       { padding: 4px 7px; font-size: 9px; }
}

/* Extra small phones */
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .pill      { padding: 3px 7px; font-size: 9px; }
}