/* Cyber Cafe panel (/cyber-cafe-panel) - the panel's own look, loaded after cc-panel-base.css and the
   page styles (exam-admin / store-admin / cc-admin). Light sidebar, teal accent, compact forms,
   quiet tables, a role-aware bottom bar on phones. Only overrides live here; the base file stays a
   plain copy of the admin console styles. */
:root {
    --sidebar-width: 256px;
    --header-height: 64px;
    --admin-accent: #0d9488;
    --admin-accent-2: #14b8a6;
    --admin-accent-soft: rgba(13, 148, 136, 0.10);
    --admin-accent-grad: linear-gradient(135deg, #0f766e 0%, #0d9488 60%, #14b8a6 100%);
    --admin-accent-shadow: rgba(13, 148, 136, 0.35);
    --ccp-accent-ink: #0f766e;
    --bg-page: #f4f6f8;
    --bg-card: #ffffff;
    --bg-subtle: #f8fafb;
    --border-color: #e5e9ee;
    --border-strong: #d5dbe2;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #8a94a3;
    --success: #15803d;
    --success-bg: #e9f8ef;
    --warning: #b45309;
    --warning-bg: #fff6e5;
    --danger: #dc2626;
    --danger-bg: #fdeeee;
    --info: #2563eb;
    --info-bg: #ebf2ff;
    --corner-radius: 14px;
    --corner-radius-sm: 10px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px -6px rgba(16, 24, 40, 0.08);
    --shadow-lift: 0 10px 30px -10px rgba(16, 24, 40, 0.25);
    --ccp-bottom-nav: 0px;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --admin-accent: #2dd4bf;
    --admin-accent-soft: rgba(45, 212, 191, 0.12);
    --ccp-accent-ink: #5eead4;
    --bg-page: #0f1417;
    --bg-card: #161d21;
    --bg-subtle: #1c2429;
    --border-color: #263238;
    --border-strong: #33424a;
    --text-primary: #e8eef0;
    --text-secondary: #b3c0c5;
    --text-muted: #7b8a91;
    --success: #4ade80;
    --success-bg: rgba(34, 197, 94, 0.14);
    --warning: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.14);
    --danger: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.14);
    --info: #60a5fa;
    --info-bg: rgba(59, 130, 246, 0.14);
}

body, h1, h2, h3, h4, h5, .page-title, .sidebar-logo-text, .btn, .form-control, input, select, textarea, button {
    font-family: 'Inter', 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { font-size: 14px; color: var(--text-primary); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* links inside page content: teal, no underline until hover */
.main-content a:where(:not(.btn, .cc-kpi, .cc-pill, .oe-icon-btn, .ccp-tile, .cc-progress-chip)) { color: var(--ccp-accent-ink); text-decoration: none; }
.main-content a:where(:not(.btn, .cc-kpi, .cc-pill, .oe-icon-btn, .ccp-tile, .cc-progress-chip)):hover { text-decoration: underline; }
.main-content a.ss-name { color: var(--text-primary); font-weight: 600; }
.main-content a.ss-name:hover { color: var(--ccp-accent-ink); }

/* ---------------------------------------------------------------- sidebar (light) */
.sidebar { background: var(--bg-card); border-right: 1px solid var(--border-color); }
.sidebar-header { height: auto; padding: 16px 14px 12px; border-bottom: 0; }
.sidebar-logo { width: 100%; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border-color); }
.sidebar-logo:hover { border-color: var(--border-strong); }
.sidebar-logo-badge { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; }
.sidebar-logo-text { min-width: 0; }
.sidebar-logo-text strong { color: var(--text-primary); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-logo-text span { color: var(--text-muted); font-size: 11px; letter-spacing: 0; text-transform: none; }
.sidebar-nav { padding: 4px 12px 16px; scrollbar-color: var(--border-strong) transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: var(--border-strong); }
.sidebar-nav-fade { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-card) 100%); }
.nav-section-title { color: var(--text-muted); font-size: 10.5px; letter-spacing: .08em; padding: 16px 10px 6px; }
.nav-section-title::before { display: none; }
.nav-item { margin-bottom: 2px; }
.nav-item a { height: 40px; gap: 10px; padding: 0 10px; border-radius: 10px; color: var(--text-secondary); font-size: 13.5px; }
.nav-item a:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nav-icon-chip { width: 28px; height: 28px; border-radius: 8px; color: var(--text-muted); background: transparent; }
.nav-icon-chip i, .nav-icon-chip svg { width: 18px; height: 18px; }
.nav-item a:hover .nav-icon-chip { transform: none; color: var(--text-secondary); }
.nav-item.active > a { background: var(--admin-accent-soft); color: var(--ccp-accent-ink); font-weight: 600; box-shadow: none; }
.nav-item.active > a::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--admin-accent); }
.nav-item.active .nav-icon-chip { background: transparent !important; color: var(--admin-accent) !important; }
.sidebar-footer { border-top: 1px solid var(--border-color); padding: 10px 12px; }
.user-avatar-btn { background: transparent; border: 1px solid transparent; }
.user-avatar-btn:hover { background: var(--bg-subtle); border-color: var(--border-color); }
.user-avatar-icon { border-radius: 50%; background: var(--admin-accent-soft); color: var(--ccp-accent-ink); }
.user-name { color: var(--text-primary); }
.user-role, .user-menu-arrow { color: var(--text-muted); }
@media (min-width: 901px) {
    .dashboard-grid.is-collapsed .sidebar-header { padding: 16px 0 12px; }
    .dashboard-grid.is-collapsed .sidebar-logo { width: auto; padding: 6px; background: transparent; border-color: transparent; }
    .dashboard-grid.is-collapsed .nav-item.active > a::before { left: -12px; }
}

/* ---------------------------------------------------------------- header */
.header { padding: 0 28px; box-shadow: none; gap: 12px; }
.header-left { gap: 10px; }
.breadcrumb { font-size: 12px; }
.page-title { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-right { gap: 8px; }
.icon-btn { border-radius: 10px; }
.ccp-shop-chip { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-color); padding: 5px 10px; }
.ccp-shop-chip svg { color: var(--admin-accent); }
.ccp-head-actions { display: flex; gap: 8px; }
.ccp-head-actions .btn { padding: 8px 13px; font-size: 13px; }
.ccp-head-actions .btn svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- content: cards, buttons, forms */
.main-content { padding: 24px 28px 40px; }
.main-content > *:last-child { margin-bottom: 0; }
.card { border-radius: var(--corner-radius); box-shadow: var(--shadow-xs); margin-bottom: 20px; }
.card-header { padding: 14px 20px; gap: 12px; }
.card-header h5 { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.card-header h5 svg { width: 18px; height: 18px; color: var(--admin-accent); }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; }

.btn { padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; gap: 7px; }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-primary, .btn-accent { background: var(--admin-accent); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); border-color: transparent; filter: none; }
.btn-primary:hover, .btn-accent:hover { background: #0f766e; color: #fff; filter: none; }
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-accent { background: #0d9488; }
html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-accent:hover { background: #14b8a6; }
.btn-outline { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-card); }
.btn-outline:hover { border-color: var(--text-muted); background: var(--bg-subtle); }
.btn:focus-visible, .form-control:focus-visible, .icon-btn:focus-visible, .nav-item a:focus-visible { outline: 2px solid var(--admin-accent); outline-offset: 2px; }

.main-content .form-group { margin-bottom: 14px; }
.main-content .form-group > label, .main-content label.form-label, .ccp-auth .form-group > label {
    display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); line-height: 1.35;
}
.form-control { min-height: 40px; padding: 8px 12px; border-radius: 10px; border-color: var(--border-strong); font-size: 14px; width: 100%; }
textarea.form-control { min-height: 0; line-height: 1.5; }
.form-control:hover { border-color: var(--text-muted); }
.form-control:focus { border-color: var(--admin-accent); box-shadow: 0 0 0 3px var(--admin-accent-soft); }
.form-control::placeholder { color: var(--text-muted); }
select.form-control { cursor: pointer; }
.main-content .ss-sub { font-size: 12px; margin-top: 3px; }
.main-content .form-group > .ss-sub { margin-top: 6px; }

.badge { font-size: 11.5px; font-weight: 600; padding: 3px 9px; }

/* tables: quiet headers, roomy rows, readable first column */
table.admin-table th {
    background: var(--bg-subtle); color: var(--text-muted); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
html[data-theme="dark"] table.admin-table th { color: var(--text-muted); }
table.admin-table td { padding: 12px 14px; font-size: 13.5px; vertical-align: middle; }
table.admin-table td:first-child { min-width: 180px; }
table.admin-table tbody tr:hover { background: var(--bg-subtle); }
.oe-count { background: var(--admin-accent-soft); color: var(--ccp-accent-ink); }
.oe-icon-btn { border-radius: 8px; }

/* banners */
.ccp-banner { align-items: center; border-radius: 12px; font-size: 13.5px; }
.ccp-banner.is-ok { background: var(--success-bg); border-color: rgba(22, 163, 74, .3); }
.ccp-banner.is-ok svg { color: var(--success); }

/* ---------------------------------------------------------------- shared page pieces (cc-admin) */
.cc-pills { gap: 8px; margin-bottom: 16px; }
.cc-pill { padding: 6px 13px; font-weight: 600; font-size: 13px; border-color: var(--border-color); }
.cc-pill.is-current { background: var(--text-primary); color: var(--bg-card); }
html[data-theme="dark"] .cc-pill.is-current { background: var(--admin-accent); color: #04201d; }
.cc-pill b { background: var(--bg-subtle); color: var(--text-secondary); font-weight: 700; }
.cc-pill.is-current b { background: rgba(255, 255, 255, .2); color: inherit; }
.card-header .cc-filters { flex: 1 1 320px; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; align-items: center; }
.card-header .cc-filters .form-control { min-width: 0 !important; flex: 1 1 auto; max-width: 340px; }
.main-content .cc-filters .form-group { margin-bottom: 0; }
.cc-filters .btn { min-height: 40px; }
@media (min-width: 1101px) { .main-content .ss-split { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 1480px) { .main-content .ss-split.ccp-work-split { grid-template-columns: minmax(0, 1fr); } .ccp-work-split > form.card { position: static; } }
.cc-status-select { min-width: 132px; width: auto; min-height: 34px; padding: 5px 30px 5px 10px; font-size: 13px; }
.cc-picked { border-radius: 10px; }

/* ---------------------------------------------------------------- dashboard */
.ccp-hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.ccp-hello h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.ccp-hello p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13.5px; }
.ccp-hello-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; padding: 6px 12px; }
.ccp-hello-date svg { width: 15px; height: 15px; color: var(--admin-accent); }

.ccp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.ccp-tile { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); text-decoration: none; box-shadow: var(--shadow-xs); transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.ccp-tile:hover { border-color: var(--admin-accent); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.ccp-tile-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ccp-tile-ico svg { width: 20px; height: 20px; }
.ccp-tile strong { display: block; font-size: 14px; }
.ccp-tile small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.ccp-tiles.is-tools { margin-bottom: 0; }   /* the dashboard's "Shop tools" card */
.ccp-tile.is-main { background: var(--admin-accent); border-color: transparent; color: #fff; }
.ccp-tile.is-main small { color: rgba(255, 255, 255, .8); }
.ccp-tile.is-main .ccp-tile-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.ccp-tile.is-main:hover { background: #0f766e; }
.ico-teal { background: rgba(13, 148, 136, .12); color: #0d9488; }
.ico-blue { background: rgba(37, 99, 235, .10); color: #2563eb; }
.ico-amber { background: rgba(217, 119, 6, .12); color: #d97706; }
.ico-green { background: rgba(22, 163, 74, .11); color: #16a34a; }
.ico-rose { background: rgba(225, 29, 72, .10); color: #e11d48; }
.ico-violet { background: rgba(124, 58, 237, .10); color: #7c3aed; }
html[data-theme="dark"] .ico-teal { color: #2dd4bf; }
html[data-theme="dark"] .ico-blue { color: #60a5fa; }
html[data-theme="dark"] .ico-amber { color: #fbbf24; }
html[data-theme="dark"] .ico-green { color: #4ade80; }
html[data-theme="dark"] .ico-rose { color: #fb7185; }
html[data-theme="dark"] .ico-violet { color: #a78bfa; }

.cc-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cc-kpis.is-dash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-kpi { position: relative; gap: 2px; padding: 16px; border-radius: 14px; box-shadow: var(--shadow-xs); transition: border-color 150ms ease, box-shadow 150ms ease; }
.cc-kpi.has-ico { flex-direction: row; align-items: center; gap: 14px; }
.cc-kpi-label svg { color: var(--admin-accent); }
a.cc-kpi:hover { border-color: var(--admin-accent); box-shadow: var(--shadow-soft); }
.cc-kpi-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cc-kpi-ico svg { width: 21px; height: 21px; }
.cc-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-kpi-label { color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.cc-kpi-value { font-size: 24px; font-weight: 750; letter-spacing: -0.4px; color: var(--text-primary); }
.cc-kpi-sub { font-size: 12px; color: var(--text-muted); }
.cc-kpi.is-warn .cc-kpi-value { color: var(--warning); }
.cc-kpi.is-good .cc-kpi-value { color: var(--text-primary); }
.cc-kpi.is-warn::after { content: ''; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .15); }

/* recent work as a list (fits phones without sideways scroll) */
.ccp-rows { list-style: none; margin: 0; padding: 0; }
.ccp-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border-color); }
.ccp-row:last-child { border-bottom: 0; }
.ccp-row:hover { background: var(--bg-subtle); }
.ccp-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--admin-accent-soft); color: var(--ccp-accent-ink); }
.ccp-row-main { min-width: 0; }
.ccp-row-main .ss-name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ccp-row-main .ss-sub { margin-top: 1px; }
.ccp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.ccp-row-side .cc-money { font-weight: 700; font-size: 14px; }
.ccp-row-side .cc-due { font-size: 12px; }
.ccp-empty { padding: 36px 20px; text-align: center; color: var(--text-muted); }
.ccp-empty svg { width: 34px; height: 34px; color: var(--border-strong); display: block; margin: 0 auto 8px; }
.ccp-empty strong { display: block; color: var(--text-primary); font-size: 15px; margin-bottom: 4px; }
.ccp-card-link { font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------- sign-in / registration */
.ccp-auth { background: radial-gradient(900px 420px at 0% -10%, rgba(13, 148, 136, .14), transparent), radial-gradient(700px 360px at 110% 110%, rgba(37, 99, 235, .08), transparent), var(--bg-page); }
.ccp-auth-card { border-radius: 18px; box-shadow: 0 20px 50px -24px rgba(16, 24, 40, .3); padding: 30px 28px; }
.ccp-auth-brand .sidebar-logo-badge { box-shadow: none; }
.ccp-auth h1 { font-size: 22px; letter-spacing: -0.3px; }
.ccp-auth .btn { min-height: 44px; font-size: 14.5px; }
.ccp-auth-foot a, .ccp-auth a { color: var(--ccp-accent-ink); }

/* ---------------------------------------------------------------- phones: bottom bar */
.ccp-bottom-nav { display: none; }
@media (max-width: 1100px) {
    .ccp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cc-kpis.is-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    :root { --ccp-bottom-nav: 64px; }
    .header { padding: 0 12px; }
    .breadcrumb { display: none; }
    .page-title { font-size: 17px; }
    .ccp-head-actions .btn span { display: none; }
    .ccp-head-actions .btn { padding: 8px 10px; }
    .ccp-head-actions .btn.is-secondary { display: none; }
    .ccp-shop-chip { display: none; }
    .main-content { padding: 16px 14px calc(28px + var(--ccp-bottom-nav)); }
    .sidebar { width: 280px; z-index: 1300; }
    .sidebar-overlay { z-index: 1250; }
    .nav-item.active > a::before { display: none; }
    .ccp-bottom-nav {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; height: var(--ccp-bottom-nav);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 16px -8px rgba(16, 24, 40, .15);
    }
    .ccp-bottom-nav a, .ccp-bottom-nav button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
        border: 0; background: none; border-radius: 10px; color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer;
    }
    .ccp-bottom-nav svg { width: 21px; height: 21px; }
    .ccp-bottom-nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ccp-bottom-nav .is-current { color: var(--ccp-accent-ink); }
    .ccp-bottom-nav .is-current svg { background: var(--admin-accent-soft); border-radius: 999px; padding: 3px 12px; width: 46px; height: 27px; }
    .ccp-hello h2 { font-size: 19px; }
    .ccp-hello-date { display: none; }
    .card-header { padding: 12px 16px; }
    .card-body { padding: 16px; }
    .ccp-row { padding: 12px 16px; }
    .card-header .cc-filters { flex-basis: 100%; }
    .card-header .cc-filters .form-control { max-width: none; }
    .cc-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 14px; padding: 0 14px 2px; scrollbar-width: none; }
    .cc-pills::-webkit-scrollbar { display: none; }
    .cc-pill { flex: 0 0 auto; }
    /* wide tables scroll inside their card; keep each cell on one line instead of breaking words */
    table.admin-table td { white-space: nowrap; }
    table.admin-table td:first-child { white-space: normal; min-width: 170px; }
    table.admin-table td .ss-sub { overflow-wrap: normal; }
}
@media (max-width: 560px) {
    .ccp-tiles { gap: 10px; }
    .ccp-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    .ccp-tile small { display: none; }
    .cc-kpis { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cc-kpi { padding: 13px; }
    .cc-kpi.has-ico { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cc-kpi-ico { width: 36px; height: 36px; border-radius: 10px; }
    .cc-kpi-ico svg { width: 18px; height: 18px; }
    .cc-kpi-value { font-size: 20px; }
    .cc-kpi-sub { display: none; }
    .ccp-avatar { width: 34px; height: 34px; font-size: 13px; }
    .ccp-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
}
@media print {
    .ccp-bottom-nav { display: none !important; }
}