/* ─────────────────────────────────────────────────────────────────────────────
   Bread Society VOD — app.css
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Reset & Base ──────────────────────────────────────────────────────────── */

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

:root {
    /* Brand */
    --color-primary:       #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-danger:        #dc2626;
    --color-danger-hover:  #b91c1c;
    --color-success:       #16a34a;
    --color-warn:          #d97706;

    /* Neutrals */
    --color-bg:            #0f1117;
    --color-surface:       #1a1d27;
    --color-surface-2:     #222535;
    --color-border:        #2e3245;
    --color-text:          #e2e8f0;
    --color-text-muted:    #94a3b8;
    --color-text-faint:    #475569;

    /* Player */
    --player-bg:           #000;
    --player-ctrl-bg:      linear-gradient(to top, rgba(0,0,0,.85), transparent);

    /* Typography */
    --font:                'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:           'JetBrains Mono', 'Fira Code', monospace;

    /* Layout */
    --radius:              8px;
    --radius-sm:           4px;
    --shadow:              0 4px 24px rgba(0,0,0,.4);
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--font);
    background-color: var(--color-bg);
    color:            var(--color-text);
    line-height:      1.6;
    min-height:       100dvh;
    display:          flex;
    flex-direction:   column;
}

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

code {
    font-family:      var(--font-mono);
    font-size:        .875em;
    background:       var(--color-surface-2);
    padding:          .1em .35em;
    border-radius:    var(--radius-sm);
    word-break:       break-all;
}

small { font-size: .8rem; color: var(--color-text-muted); }

.hidden { display: none !important; }

/* ── Layout ────────────────────────────────────────────────────────────────── */

.main-content {
    flex: 1;
    padding: 24px 16px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* ── Site Header ───────────────────────────────────────────────────────────── */

.site-header {
    background:   var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding:      0 24px;
    height:       60px;
    display:      flex;
    align-items:  center;
}

.header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    max-width:       1200px;
    margin:          0 auto;
}

.site-logo {
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--color-text);
    text-decoration: none;
    letter-spacing: -.01em;
}
.site-logo span { color: var(--color-primary); }

.header-nav {
    display:     flex;
    align-items: center;
    gap:         20px;
    font-size:   .9rem;
}

.header-username {
    color:       var(--color-text-muted);
    font-size:   .85rem;
}

.nav-logout {
    color: var(--color-danger);
}
.nav-logout:hover { color: var(--color-danger-hover); }

/* ── Site Footer ───────────────────────────────────────────────────────────── */

.site-footer {
    text-align:  center;
    padding:     16px;
    font-size:   .8rem;
    color:       var(--color-text-faint);
    border-top:  1px solid var(--color-border);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       10px 18px;
    border-radius: var(--radius);
    border:        none;
    font-family:   var(--font);
    font-size:     .9rem;
    font-weight:   500;
    cursor:        pointer;
    transition:    background .15s, opacity .15s;
    text-decoration: none;
    white-space:   nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary   { background: var(--color-primary);  color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-secondary { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover:not(:disabled) { background: var(--color-border); }

.btn-danger    { background: var(--color-danger);   color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-hover); }

.btn-ghost     { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); }
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); }

.btn-full      { width: 100%; justify-content: center; }
.btn-sm        { padding: 7px 14px; font-size: .85rem; }
.btn-xs        { padding: 4px 10px; font-size: .78rem; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */

.form-group {
    display:       flex;
    flex-direction: column;
    gap:           6px;
    margin-bottom: 16px;
}

.form-group label {
    font-size:   .875rem;
    font-weight: 500;
    color:       var(--color-text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text);
    font-family:   var(--font);
    font-size:     .95rem;
    padding:       10px 12px;
    width:         100%;
    transition:    border-color .15s;
    outline:       none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
}
.form-group textarea { resize: vertical; min-height: 80px; }

.input-disabled {
    opacity: .6;
    cursor:  not-allowed;
}

.input-wrap {
    position: relative;
    display:  flex;
    gap:      8px;
}
.input-wrap input { flex: 1; }

.toggle-pw {
    background: var(--color-surface-2);
    border:     1px solid var(--color-border);
    border-radius: var(--radius);
    padding:    0 12px;
    cursor:     pointer;
    color:      var(--color-text-muted);
    display:    flex;
    align-items: center;
}
.toggle-pw svg { width: 18px; height: 18px; }
.toggle-pw:hover { color: var(--color-text); }

.checkbox-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   .875rem;
    color:       var(--color-text-muted);
    cursor:      pointer;
}
.checkbox-label input[type=checkbox] { width: auto; }

.form-actions {
    display:     flex;
    gap:         10px;
    flex-wrap:   wrap;
    margin-top:  4px;
}

.generated-pw {
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       10px 14px;
    margin-top:    6px;
    font-size:     .85rem;
    color:         var(--color-text-muted);
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.generated-pw code {
    font-size:  1rem;
    color:      var(--color-text);
    background: transparent;
    padding:    0;
    word-break: break-all;
}

/* ── Password strength ─────────────────────────────────────────────────────── */

.pw-strength {
    font-size:   .8rem;
    font-weight: 600;
    height:      18px;
}
.pw-strength.very-weak  { color: #ef4444; }
.pw-strength.weak       { color: #f97316; }
.pw-strength.fair       { color: #eab308; }
.pw-strength.strong     { color: #22c55e; }
.pw-strength.very-strong { color: #10b981; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */

.alert {
    padding:       12px 16px;
    border-radius: var(--radius);
    font-size:     .9rem;
    margin-bottom: 20px;
    border:        1px solid transparent;
}
.alert-error   { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.3); color: #fca5a5; }
.alert-warn    { background: rgba(217,119,6,.12);  border-color: rgba(217,119,6,.3);  color: #fcd34d; }
.alert-success { background: rgba(22,163,74,.12);  border-color: rgba(22,163,74,.3);  color: #86efac; }
.alert-info    { background: rgba(37,99,235,.12);  border-color: rgba(37,99,235,.3);  color: #93c5fd; }

/* ── Auth (login) ──────────────────────────────────────────────────────────── */

.auth-wrap {
    display:         flex;
    justify-content: center;
    align-items:     center;
    min-height:      calc(100dvh - 60px - 48px);
    padding:         24px 16px;
}

.auth-box {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       40px 36px;
    width:         100%;
    max-width:     420px;
    box-shadow:    var(--shadow);
}

.auth-logo {
    text-align:    center;
    margin-bottom: 32px;
}
.auth-logo h1 {
    font-size:   1.6rem;
    font-weight: 700;
    color:       var(--color-text);
}
.auth-logo h1 span { color: var(--color-primary); }
.auth-logo p  { color: var(--color-text-muted); font-size: .9rem; margin-top: 4px; }

/* ── Player ────────────────────────────────────────────────────────────────── */

.player-wrap {
    max-width: 960px;
    margin:    0 auto;
}

.player-header {
    margin-bottom: 16px;
}
.player-header h1 {
    font-size:   1.4rem;
    font-weight: 600;
}
.broadcast-date {
    font-size:  .85rem;
    color:      var(--color-text-muted);
    margin-top: 4px;
    display:    block;
}

.player-container {
    position:      relative;
    background:    var(--player-bg);
    border-radius: var(--radius);
    overflow:      hidden;
    aspect-ratio:  16 / 9;
    box-shadow:    var(--shadow);
}

#player {
    width:  100%;
    height: 100%;
    display: block;
}

.player-controls {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    background: var(--player-ctrl-bg);
    padding:    32px 16px 14px;
    display:    flex;
    align-items: center;
    gap:        12px;
    opacity:    0;
    transition: opacity .2s;
}
.player-container:hover .player-controls { opacity: 1; }

.ctrl-btn {
    background: none;
    border:     none;
    color:      #fff;
    cursor:     pointer;
    padding:    4px;
    display:    flex;
    align-items: center;
    opacity:    .9;
    flex-shrink: 0;
}
.ctrl-btn:hover { opacity: 1; }
.ctrl-btn svg   { width: 22px; height: 22px; }

.progress-wrap {
    flex:   1;
    cursor: not-allowed;   /* seeking disabled */
    title:  "Seeking is disabled";
}

.progress-bar {
    height:        4px;
    background:    rgba(255,255,255,.2);
    border-radius: 2px;
    overflow:      hidden;
}

.progress-fill {
    height:        100%;
    background:    var(--color-primary);
    border-radius: 2px;
    transition:    width .5s linear;
    width:         0%;
}

.time-display {
    color:       rgba(255,255,255,.85);
    font-size:   .8rem;
    font-family: var(--font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

.player-msg {
    margin-top:    12px;
    padding:       10px 14px;
    border-radius: var(--radius);
    font-size:     .875rem;
}
.player-msg.info  { background: rgba(37,99,235,.15); color: #93c5fd; }
.player-msg.warn  { background: rgba(217,119,6,.15);  color: #fcd34d; }
.player-msg.error { background: rgba(220,38,38,.15);  color: #fca5a5; }

.no-video {
    text-align:  center;
    padding:     80px 20px;
    color:       var(--color-text-muted);
}
.no-video p { margin-bottom: 8px; }

/* ── Profile ───────────────────────────────────────────────────────────────── */

.profile-wrap {
    max-width: 600px;
}
.profile-wrap h1 {
    font-size:     1.4rem;
    font-weight:   600;
    margin-bottom: 24px;
}

.profile-section {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       24px;
    margin-bottom: 20px;
}
.profile-section h2 {
    font-size:     1rem;
    font-weight:   600;
    margin-bottom: 16px;
    color:         var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size:     .8rem;
}

.profile-field {
    display:       flex;
    gap:           16px;
    padding:       10px 0;
    border-bottom: 1px solid var(--color-border);
    align-items:   center;
}
.profile-field:last-of-type { border-bottom: none; }

.profile-field label {
    width:       140px;
    flex-shrink: 0;
    font-size:   .875rem;
    color:       var(--color-text-muted);
}
.profile-field span { font-size: .95rem; }

.profile-note {
    font-size:  .8rem;
    color:      var(--color-text-faint);
    margin-top: 12px;
}

/* ── Role badges ───────────────────────────────────────────────────────────── */

.role-badge {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 99px;
    font-size:     .75rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.role-superadmin { background: rgba(168,85,247,.15); color: #c084fc; }
.role-admin      { background: rgba(37,99,235,.15);  color: #93c5fd; }
.role-user       { background: rgba(100,116,139,.15); color: #94a3b8; }

/* ── Status badges ─────────────────────────────────────────────────────────── */

.status-badge {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 99px;
    font-size:     .75rem;
    font-weight:   600;
}
.status-active      { background: rgba(22,163,74,.15);  color: #86efac; }
.status-inactive    { background: rgba(100,116,139,.15); color: #94a3b8; }
.status-pending     { background: rgba(217,119,6,.15);   color: #fcd34d; }
.status-processing  { background: rgba(37,99,235,.15);   color: #93c5fd; }
.status-ready       { background: rgba(22,163,74,.15);   color: #86efac; }
.status-failed      { background: rgba(220,38,38,.15);   color: #fca5a5; }

/* ── Admin layout ──────────────────────────────────────────────────────────── */

.admin-wrap { width: 100%; }

.admin-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   28px;
    flex-wrap:       wrap;
    gap:             12px;
}
.admin-header h1 {
    font-size:   1.4rem;
    font-weight: 600;
}

.admin-nav {
    display:  flex;
    gap:      4px;
    flex-wrap: wrap;
}
.admin-nav a {
    padding:       6px 14px;
    border-radius: var(--radius);
    font-size:     .875rem;
    color:         var(--color-text-muted);
    text-decoration: none;
    border:        1px solid transparent;
    transition:    all .15s;
}
.admin-nav a:hover  { background: var(--color-surface-2); color: var(--color-text); }
.admin-nav a.active { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }

.admin-section {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       24px;
    margin-bottom: 20px;
}
.admin-section h2 {
    font-size:     1rem;
    font-weight:   600;
    margin-bottom: 16px;
    display:       flex;
    align-items:   baseline;
    gap:           10px;
}
.admin-section h2 small {
    font-size:   .8rem;
    color:       var(--color-text-faint);
    font-weight: 400;
}

/* ── Stat cards ────────────────────────────────────────────────────────────── */

.stat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                   16px;
    margin-bottom:         28px;
}

.stat-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       20px;
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.stat-card.stat-warn { border-color: rgba(217,119,6,.4); }
.stat-card.stat-live { border-color: rgba(22,163,74,.4); }

.stat-value {
    font-size:   2rem;
    font-weight: 700;
    line-height: 1;
}
.stat-label {
    font-size: .8rem;
    color:     var(--color-text-muted);
}

/* ── Progress stats ────────────────────────────────────────────────────────── */

.progress-stats {
    display:  flex;
    gap:      20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pstat {
    display:       flex;
    flex-direction: column;
    gap:           2px;
    padding:       12px 16px;
    background:    var(--color-surface-2);
    border-radius: var(--radius);
    min-width:     80px;
}
.pstat-val  { font-size: 1.5rem; font-weight: 700; }
.pstat-lbl  { font-size: .75rem; color: var(--color-text-muted); }
.pstat-green .pstat-val { color: #86efac; }
.pstat-yellow .pstat-val { color: #fcd34d; }
.pstat-gray .pstat-val  { color: #94a3b8; }

/* ── Toolbar ───────────────────────────────────────────────────────────────── */

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

.search-form {
    display:  flex;
    gap:      8px;
    flex:     1;
    min-width: 200px;
}
.search-form input {
    flex:          1;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text);
    font-family:   var(--font);
    font-size:     .9rem;
    padding:       7px 12px;
    outline:       none;
}
.search-form input:focus { border-color: var(--color-primary); }

.result-count {
    font-size:     .85rem;
    color:         var(--color-text-muted);
    margin-bottom: 12px;
}

.select-video {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text);
    font-family:   var(--font);
    font-size:     .9rem;
    padding:       7px 12px;
    outline:       none;
    min-width:     280px;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */

.admin-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
}
.admin-table th {
    text-align:      left;
    padding:         10px 12px;
    color:           var(--color-text-muted);
    font-size:       .75rem;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .05em;
    border-bottom:   1px solid var(--color-border);
}
.admin-table td {
    padding:         12px 12px;
    border-bottom:   1px solid var(--color-border);
    vertical-align:  middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.row-inactive  { opacity: .5; }
.admin-table tr:hover td      { background: var(--color-surface-2); }

.row-actions {
    display:     flex;
    gap:         6px;
    flex-wrap:   wrap;
    align-items: center;
}

.empty-row {
    text-align: center;
    color:      var(--color-text-faint);
    padding:    40px !important;
}

/* ── Pagination ────────────────────────────────────────────────────────────── */

.pagination {
    display:    flex;
    gap:        4px;
    margin-top: 16px;
    flex-wrap:  wrap;
}
.page-btn {
    padding:       6px 12px;
    border-radius: var(--radius-sm);
    font-size:     .85rem;
    color:         var(--color-text-muted);
    border:        1px solid var(--color-border);
    text-decoration: none;
    transition:    all .15s;
}
.page-btn:hover   { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.page-current     { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Mini progress bar (access table) ─────────────────────────────────────── */

.mini-progress {
    height:        6px;
    background:    var(--color-surface-2);
    border-radius: 3px;
    overflow:      hidden;
    width:         100px;
    margin-bottom: 2px;
}
.mini-fill {
    height:     100%;
    background: var(--color-primary);
    border-radius: 3px;
}

.badge-complete    { color: #86efac; font-size: .8rem; font-weight: 600; }
.badge-notstarted  { color: #94a3b8; font-size: .8rem; }

/* ── Modals ────────────────────────────────────────────────────────────────── */

.modal {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.65);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         100;
    padding:         16px;
}

.modal-box {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    width:         100%;
    max-width:     480px;
    max-height:    90dvh;
    overflow-y:    auto;
    box-shadow:    var(--shadow);
}

.modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 24px 0;
    margin-bottom:   20px;
}
.modal-header h2 { font-size: 1.1rem; font-weight: 600; }

.modal-close {
    background:  none;
    border:      none;
    color:       var(--color-text-muted);
    font-size:   1.4rem;
    cursor:      pointer;
    line-height: 1;
    padding:     0 4px;
    text-decoration: none;
}
.modal-close:hover { color: var(--color-text); }

.modal-box form { padding: 0 24px; }

.modal-footer {
    display:         flex;
    justify-content: flex-end;
    gap:             10px;
    padding:         16px 24px 24px;
}

.provision-note {
    font-size:     .85rem;
    color:         var(--color-text-muted);
    background:    var(--color-surface-2);
    border-radius: var(--radius);
    padding:       10px 14px;
    margin-bottom: 8px;
}

/* ── Upload progress ───────────────────────────────────────────────────────── */

.upload-progress {
    margin:      12px 0;
    display:     flex;
    align-items: center;
    gap:         10px;
}
.upload-bar {
    flex:          1;
    height:        6px;
    background:    var(--color-surface-2);
    border-radius: 3px;
    overflow:      hidden;
}
.upload-fill {
    height:     100%;
    background: var(--color-primary);
    width:      0%;
    transition: width .3s;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .main-content    { padding: 16px 12px; }
    .auth-box        { padding: 28px 20px; }
    .admin-header    { flex-direction: column; align-items: flex-start; }
    .stat-grid       { grid-template-columns: repeat(2, 1fr); }
    .admin-table th,
    .admin-table td  { padding: 10px 8px; }
    .player-controls { padding: 24px 10px 10px; }
    .modal-box       { max-height: 95dvh; }
    .profile-field   { flex-direction: column; gap: 2px; }
    .profile-field label { width: auto; }
}

@media (max-width: 400px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
}