/* ── Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Design tokens (light) ───────────────────────────────────────── */
:root{
  --bg:        #f3f4f8;
  --surface:   #ffffff;
  --surface-2: #f8f9fb;
  --border:    #eaecf0;
  --border-2:  #d6d9e0;
  --text-1:    #1a1f2e;
  --text-2:    #374151;
  --text-3:    #6b7280;
  --text-4:    #9ca3af;
  --sidebar-bg:#0f0e1a;
  --sidebar-text:rgba(255,255,255,.55);
  --sidebar-text-hover:rgba(255,255,255,.9);
  --sidebar-active-bg:rgba(91,94,245,.2);
  --sidebar-section:rgba(255,255,255,.25);
  --table-head-bg:#fafafa;
  --table-row-hover:#f8f9fb;
  --input-bg:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);
  --shadow-modal:0 24px 80px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.08);
  --modal-backdrop:rgba(0,0,0,.5);
}

/* ── Dark mode tokens ────────────────────────────────────────────── */
[data-theme="dark"]{
  --bg:        #0e0e11;
  --surface:   #18181c;
  --surface-2: #222227;
  --border:    #2c2c32;
  --border-2:  #38383f;
  --text-1:    #f0f0f5;
  --text-2:    #c0c0cc;
  --text-3:    #888899;
  --text-4:    #55556a;
  --table-head-bg:#1c1c21;
  --table-row-hover:#1f1f25;
  --input-bg:#1c1c21;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.2);
  --shadow-md:0 4px 16px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2);
  --shadow-modal:0 24px 80px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3);
  --modal-backdrop:rgba(0,0,0,.7);
}

/* ── Reset & base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;color:var(--text-1);background:var(--bg);-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
a{color:#5b5ef5;text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 12px;line-height:1.3;letter-spacing:-.01em;color:var(--text-1)}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px;padding-left:20px}
img{max-width:100%}
hr{border:none;border-top:1px solid var(--border);margin:20px 0}

/* ── Layout ──────────────────────────────────────────────────────── */
.app{display:flex;min-height:100vh}
.sidebar{width:224px;min-width:224px;background:var(--sidebar-bg);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.content{padding:28px;flex:1}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar-brand{padding:22px 20px 16px;color:#fff;font-weight:700;font-size:14px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-brand .icon{font-size:20px;filter:drop-shadow(0 0 6px rgba(139,92,246,.6))}
.sidebar-section{padding:20px 0 6px;font-size:10px;font-weight:600;color:var(--sidebar-section);text-transform:uppercase;letter-spacing:.1em;padding-left:20px}
.sidebar-link{display:flex;align-items:center;gap:9px;padding:9px 20px;color:var(--sidebar-text);font-size:13px;font-weight:500;cursor:pointer;transition:color .15s,background .15s;text-decoration:none}
.sidebar-link:hover{background:rgba(255,255,255,.06);color:var(--sidebar-text-hover);text-decoration:none}
.sidebar-link.active{background:var(--sidebar-active-bg);color:#fff;box-shadow:inset 3px 0 0 #7c7fff}
.sidebar-link .ico{font-size:15px;width:20px;text-align:center;opacity:.8}

/* Dark mode toggle button in sidebar */
.theme-toggle{background:none;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:rgba(255,255,255,.5);font-size:12px;cursor:pointer;padding:6px 12px;font-family:inherit;width:calc(100% - 32px);margin:0 16px 16px;display:flex;align-items:center;gap:7px;transition:color .15s,border-color .15s}
.theme-toggle:hover{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.2)}

/* ── Show sub-nav ────────────────────────────────────────────────── */
.show-nav{background:var(--surface);border-bottom:1px solid var(--border);display:flex;overflow-x:auto;padding:0 28px;scrollbar-width:none}
.show-nav::-webkit-scrollbar{display:none}
.show-nav-link{padding:14px 12px;font-size:12.5px;font-weight:500;color:var(--text-3);white-space:nowrap;border-bottom:2px solid transparent;display:flex;align-items:center;gap:5px;text-decoration:none;letter-spacing:.005em;transition:color .15s}
.show-nav-link:hover{color:#5b5ef5;text-decoration:none}
.show-nav-link.active{color:#5b5ef5;border-bottom-color:#5b5ef5;font-weight:600}

/* ── Cards ───────────────────────────────────────────────────────── */
.card{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-sm);border:1px solid var(--border);padding:20px;margin-bottom:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-header span{font-size:13px;font-weight:600;color:var(--text-1);letter-spacing:-.01em}
.card-header a{font-size:12px;color:#5b5ef5;font-weight:500}
.card-title{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em;color:var(--text-1)}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;border:none;cursor:pointer;transition:all .15s;text-decoration:none;letter-spacing:.01em;font-family:inherit}
.btn:hover{text-decoration:none}
.btn-primary{background:#5b5ef5;color:#fff;box-shadow:0 1px 3px rgba(91,94,245,.3)}.btn-primary:hover{background:#4a4de0;color:#fff;box-shadow:0 2px 6px rgba(91,94,245,.4)}
.btn-secondary{background:var(--surface);color:var(--text-2);border:1px solid var(--border-2)}.btn-secondary:hover{background:var(--surface-2)}
.btn-danger{background:#ef4444;color:#fff;box-shadow:0 1px 3px rgba(239,68,68,.25)}.btn-danger:hover{background:#dc2626;color:#fff}
.btn-success{background:#22c55e;color:#fff}.btn-success:hover{background:#16a34a;color:#fff}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}
.btn-icon{padding:7px;border-radius:7px;background:transparent;border:1px solid var(--border);cursor:pointer;color:var(--text-3);font-size:14px;line-height:1}
.btn-icon:hover{background:var(--surface-2)}

/* ── Forms ───────────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12.5px;font-weight:500;margin-bottom:5px;color:var(--text-2);letter-spacing:.005em}
.form-hint{font-size:12px;color:var(--text-4);margin-top:4px}
.form-control{width:100%;padding:9px 12px;border:1px solid var(--border-2);border-radius:8px;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;background:var(--input-bg);color:var(--text-1)}
.form-control:focus{border-color:#5b5ef5;box-shadow:0 0 0 3px rgba(91,94,245,.1)}
.form-control::placeholder{color:var(--text-4)}
textarea.form-control{min-height:80px;resize:vertical}
select.form-control{cursor:pointer}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid.g3{grid-template-columns:1fr 1fr 1fr}
.col-2{grid-column:span 2}

/* ── Tables ──────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;margin-bottom:4px;border-radius:10px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-4);background:var(--table-head-bg);border-bottom:1px solid var(--border)}
td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text-2)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--table-row-hover)}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:9999px;font-size:11px;font-weight:600;letter-spacing:.03em}
.badge-gray{background:var(--surface-2);color:var(--text-3)}
.badge-blue{background:#eff6ff;color:#3b82f6}
.badge-green{background:#f0fdf4;color:#16a34a}
.badge-red{background:#fef2f2;color:#ef4444}
.badge-yellow{background:#fefce8;color:#ca8a04}
.badge-purple{background:#f5f3ff;color:#7c3aed}
[data-theme="dark"] .badge-blue{background:#1e3a5f;color:#60a5fa}
[data-theme="dark"] .badge-green{background:#14391f;color:#4ade80}
[data-theme="dark"] .badge-red{background:#3b1212;color:#f87171}
[data-theme="dark"] .badge-yellow{background:#3b2e00;color:#fbbf24}
[data-theme="dark"] .badge-purple{background:#2a1a4a;color:#c084fc}

/* ── Alerts & flash ──────────────────────────────────────────────── */
.flash{padding:12px 16px;border-radius:9px;font-size:13.5px;margin-bottom:16px;font-weight:500}
.flash-success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.flash-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.flash-warning{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.alert{padding:12px 16px;border-radius:9px;font-size:13.5px;margin-bottom:16px}
.alert-info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
[data-theme="dark"] .flash-success{background:#14391f;color:#4ade80;border-color:#166534}
[data-theme="dark"] .flash-danger{background:#3b1212;color:#f87171;border-color:#7f1d1d}
[data-theme="dark"] .flash-warning{background:#3b2e00;color:#fbbf24;border-color:#78350f}
[data-theme="dark"] .alert-info{background:#1e3a5f;color:#93c5fd;border-color:#1e40af}

/* ── Modals ──────────────────────────────────────────────────────── */
.modal-backdrop{display:none;position:fixed;inset:0;background:var(--modal-backdrop);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal-backdrop.open{display:flex}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-modal);padding:26px;position:relative;border:1px solid var(--border)}
.modal-lg{max-width:720px}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.modal-title{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em;color:var(--text-1)}
.modal-close{background:none;border:none;font-size:18px;color:var(--text-4);cursor:pointer;line-height:1;padding:4px 6px;border-radius:5px;transition:color .15s,background .15s}
.modal-close:hover{color:var(--text-1);background:var(--surface-2)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar-title{font-size:15px;font-weight:600;color:var(--text-1);letter-spacing:-.015em}
.topbar-actions{display:flex;align-items:center;gap:10px}
.user-menu{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3)}

/* ── Utility ─────────────────────────────────────────────────────── */
.flex{display:flex}.flex-center{align-items:center}.flex-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.text-sm{font-size:12px}.text-muted{color:var(--text-4)}.text-danger{color:#ef4444}.text-center{text-align:center}
.font-semibold{font-weight:600}.font-bold{font-weight:700}
.w-full{width:100%}
.hidden{display:none}
.avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-3);flex-shrink:0}
.empty-state{text-align:center;padding:60px 24px;color:var(--text-4)}
.empty-state .icon{font-size:40px;margin-bottom:14px;display:block;opacity:.5}
.empty-state p{margin:0;font-size:14px}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
.tag{display:inline-block;background:var(--surface-2);color:var(--text-3);padding:2px 8px;border-radius:5px;font-size:12px;margin:2px;font-weight:500}

/* ── Audition registration public ───────────────────────────────── */
.public-wrap{max-width:680px;margin:0 auto;padding:40px 16px}
.show-card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-sm);border:1px solid var(--border);overflow:hidden;margin-bottom:16px;cursor:pointer;transition:box-shadow .2s,transform .15s}
.show-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.show-card-banner{background:#5b5ef5;height:5px}
.show-card-body{padding:20px}
.show-card-title{font-size:17px;font-weight:700;margin-bottom:4px;letter-spacing:-.02em;color:var(--text-1)}
.show-card-meta{font-size:13px;color:var(--text-3)}

/* ── Portal ──────────────────────────────────────────────────────── */
.portal-wrap{max-width:800px;margin:0 auto;padding:28px 16px}
.portal-header{background:#5b5ef5;color:#fff;padding:22px 26px;border-radius:14px;margin-bottom:20px}
.portal-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:20px;overflow-x:auto}
.portal-tab{padding:10px 16px;font-size:13px;font-weight:500;color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.portal-tab.active{color:#5b5ef5;border-bottom-color:#5b5ef5}
.portal-panel{display:none}.portal-panel.active{display:block}
.assignment-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
.assignment-status-bar{height:3px;border-radius:2px;margin-bottom:12px}
.status-pending{background:#d1d5db}
.status-offered{background:#3b82f6}
.status-accepted{background:#22c55e}
.status-declined{background:#ef4444}

/* ── Chat/Messages ───────────────────────────────────────────────── */
.chat-wrap{display:flex;flex-direction:column;height:400px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.chat-msg{max-width:75%;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.4}
.chat-msg.mine{background:#5b5ef5;color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.chat-msg.other{background:var(--surface-2);color:var(--text-1);align-self:flex-start;border-bottom-left-radius:3px}
.chat-msg .name{font-size:11px;font-weight:600;opacity:.7;margin-bottom:2px}
.chat-input-row{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:var(--surface)}
.chat-input-row input{flex:1}

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:768px){
  .sidebar{display:none}
  .form-grid{grid-template-columns:1fr}
  .col-2{grid-column:span 1}
  .content{padding:16px}
  .show-nav{padding:0 16px}
}