/* =====================================================================
   CCZ Verified — Company Portal
   Premium SaaS. Dark navy sidebar, light data canvas, refined panels,
   crisp charts. Shares the brand blue with the public site but reads as
   a professional back-office, not the public certificate look.
   ===================================================================== */

:root {
    --blue:        #006EB7;
    --blue-dark:   #005089;
    --blue-light:  #e8f2fa;
    --blue-tint:   #f3f8fc;
    --accent:      #0a86e0;

    --nav:         #0d1b2a;   /* sidebar */
    --nav-2:       #13263a;
    --nav-line:    rgba(255,255,255,.08);
    --nav-text:    #9fb3c8;
    --nav-active:  #1b3b5a;

    --canvas:      #f5f7fa;   /* app background */
    --panel:       #ffffff;
    --ink:         #0e1b2a;
    --ink-2:       #445668;
    --ink-3:       #7a8a9b;
    --line:        #e5eaf0;
    --line-2:      #d5dde6;

    --green:       #10b981; --green-bg:#e7f7f0;
    --amber:       #f59e0b; --amber-bg:#fdf3e0;
    --red:         #ef4444; --red-bg:#fdecec;
    --violet:      #7c6ff0; --violet-bg:#efedfd;

    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
    --sh-sm: 0 1px 2px rgba(13,27,42,.06);
    --sh-md: 0 4px 16px rgba(13,27,42,.07);
    --sh-lg: 0 12px 34px rgba(13,27,42,.10);
    --ease: cubic-bezier(.4,0,.2,1);
    --t: .2s var(--ease);

    --sidebar-w: 256px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: var(--canvas); color: var(--ink);
    line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
img { max-width:100%; display:block; }
input, select, textarea { font-family:inherit; }

h1,h2,h3,h4 { font-family:'Manrope','Inter',sans-serif; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.2; }
.mono { font-family:'JetBrains Mono','SF Mono',monospace; letter-spacing:.04em; font-variant-numeric:tabular-nums; }

/* =====================================================================
   AUTH SCREENS (login / register)
   ===================================================================== */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns: 1fr 1fr; }
.auth-aside {
    background:
        radial-gradient(1000px 600px at 20% -10%, rgba(10,134,224,.35), transparent 60%),
        var(--nav);
    color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.auth-aside::before {
    content:""; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:40px 40px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000,transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000,transparent 75%);
}
.auth-aside > * { position:relative; z-index:2; }
.auth-brand img { height:34px; }
.auth-aside h2 { color:#fff; font-size:2rem; line-height:1.15; margin-bottom:16px; max-width:420px; }
.auth-aside p { color:rgba(255,255,255,.72); max-width:400px; }
.auth-points { list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.auth-points li { display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.85); font-size:.94rem; }
.auth-points i { color:#4dd4a4; margin-top:3px; }
.auth-foot { color:rgba(255,255,255,.5); font-size:.82rem; }

.auth-main { display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-card { width:100%; max-width:400px; }
.auth-card .logo-sm { display:none; }
.auth-card h1 { font-size:1.7rem; margin-bottom:8px; }
.auth-card .sub { color:var(--ink-3); margin-bottom:32px; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:.86rem; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.field .control { position:relative; }
.field .control i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:.9rem; }
.field input {
    width:100%; padding:13px 14px 13px 40px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
    font-size:.96rem; background:#fff; transition:var(--t);
}
.field input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light); }
.auth-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; font-size:.86rem; }
.auth-row label { display:flex; align-items:center; gap:7px; color:var(--ink-2); cursor:pointer; }
.auth-row a { color:var(--blue); font-weight:600; }
.btn-auth { width:100%; padding:14px; border-radius:var(--r-sm); background:var(--blue); color:#fff; font-weight:600; font-size:.98rem; transition:var(--t); display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-auth:hover { background:var(--blue-dark); }
.auth-alt { text-align:center; margin-top:24px; font-size:.9rem; color:var(--ink-3); }
.auth-alt a { color:var(--blue); font-weight:600; }
.auth-error { display:flex; align-items:center; gap:9px; padding:12px 14px; border-radius:var(--r-sm); background:var(--red-bg); color:var(--red); font-size:.9rem; font-weight:500; margin-bottom:22px; }
.demo-hint { margin-top:22px; padding:12px 14px; background:var(--blue-tint); border:1px dashed var(--line-2); border-radius:var(--r-sm); font-size:.82rem; color:var(--ink-2); }
.demo-hint code { background:#fff; padding:2px 6px; border-radius:4px; font-size:.8rem; color:var(--blue); }

@media (max-width:900px){
    .auth-wrap { grid-template-columns:1fr; }
    .auth-aside { display:none; }
    .auth-card .logo-sm { display:block; margin-bottom:28px; }
    .auth-card .logo-sm img { height:32px; }
}

/* =====================================================================
   APP SHELL
   ===================================================================== */
.app { display:grid; grid-template-columns: var(--sidebar-w) 1fr; min-height:100vh; }

/* Sidebar */
.sidebar {
    background:var(--nav); color:var(--nav-text);
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
    border-right:1px solid var(--nav-line);
}
.sidebar-head { padding:22px 22px 18px; border-bottom:1px solid var(--nav-line); }
.sidebar-head img { height:28px; }
.sidebar-portal-tag { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--nav-text); margin-top:8px; font-weight:600; }
.sidebar-nav { padding:16px 12px; flex:1; overflow-y:auto; }
.nav-section { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#5a6f85; font-weight:700; padding:14px 12px 8px; }
.snav-link {
    display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-sm);
    color:var(--nav-text); font-size:.92rem; font-weight:500; transition:var(--t); margin-bottom:2px; position:relative;
}
.snav-link i { width:18px; text-align:center; font-size:.98rem; }
.snav-link:hover { background:var(--nav-2); color:#fff; }
.snav-link.active { background:linear-gradient(90deg, rgba(10,134,224,.22), rgba(10,134,224,.06)); color:#fff; }
.snav-link.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.snav-badge { margin-left:auto; background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:var(--r-pill); }
.snav-badge.red { background:var(--red); }

.sidebar-foot { padding:14px; border-top:1px solid var(--nav-line); }
.sidebar-user { display:flex; align-items:center; gap:11px; padding:8px; border-radius:var(--r-sm); transition:var(--t); }
.sidebar-user:hover { background:var(--nav-2); }
.su-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--accent)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; flex-shrink:0; }
.su-meta { min-width:0; flex:1; }
.su-name { color:#fff; font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.su-role { font-size:.74rem; color:var(--nav-text); text-transform:capitalize; }
.su-logout { color:var(--nav-text); padding:6px; border-radius:6px; transition:var(--t); }
.su-logout:hover { color:#fff; background:var(--nav-2); }

/* Main column */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar {
    height:66px; background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
    display:flex; align-items:center; gap:18px; padding:0 28px;
}
.topbar .menu-btn { display:none; }
.page-titles h1 { font-size:1.3rem; }
.page-titles .crumb { font-size:.8rem; color:var(--ink-3); }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:12px; }
.top-search { display:flex; align-items:center; gap:9px; background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 15px; min-width:230px; transition:var(--t); }
.top-search:focus-within { border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px var(--blue-light); }
.top-search i { color:var(--ink-3); font-size:.85rem; }
.top-search input { border:none; outline:none; background:none; width:100%; font-size:.88rem; }
.icon-btn { width:40px; height:40px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--ink-2); border:1px solid var(--line); background:#fff; transition:var(--t); position:relative; }
.icon-btn:hover { border-color:var(--line-2); color:var(--ink); }
.icon-btn .dot { position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--red); border:2px solid #fff; }

.content { padding:28px; flex:1; }
.content-narrow { max-width:1100px; }

/* Page intro row */
.page-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:24px; flex-wrap:wrap; }
.page-intro h2 { font-size:1.5rem; margin-bottom:4px; }
.page-intro p { color:var(--ink-3); font-size:.94rem; }
.intro-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-sm); font-weight:600; font-size:.9rem; transition:var(--t); border:1.5px solid transparent; white-space:nowrap; }
.btn i { font-size:.9em; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-light { background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-light:hover { border-color:var(--blue); color:var(--blue); }
.btn-sm { padding:7px 13px; font-size:.84rem; }
.btn-ghost-danger { background:#fff; color:var(--red); border-color:var(--line-2); }
.btn-ghost-danger:hover { border-color:var(--red); background:var(--red-bg); }

/* =====================================================================
   KPI CARDS
   ===================================================================== */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.kpi {
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:20px;
    position:relative; overflow:hidden; transition:var(--t);
}
.kpi:hover { box-shadow:var(--sh-md); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.kpi-icon { width:42px; height:42px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:1.1rem; }
.kpi-icon.blue { background:var(--blue-light); color:var(--blue); }
.kpi-icon.green { background:var(--green-bg); color:var(--green); }
.kpi-icon.amber { background:var(--amber-bg); color:var(--amber); }
.kpi-icon.violet { background:var(--violet-bg); color:var(--violet); }
.kpi-icon.red { background:var(--red-bg); color:var(--red); }
.kpi-trend { font-size:.78rem; font-weight:700; display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--r-pill); }
.kpi-trend.up { color:var(--green); background:var(--green-bg); }
.kpi-trend.down { color:var(--red); background:var(--red-bg); }
.kpi-trend.flat { color:var(--ink-3); background:var(--canvas); }
.kpi-value { font-family:'Manrope'; font-size:2rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.kpi-label { color:var(--ink-3); font-size:.86rem; margin-top:6px; }
.kpi-sub { font-size:.78rem; color:var(--ink-3); margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.kpi-sub strong { color:var(--ink-2); }

/* =====================================================================
   PANELS  (chart + table containers)
   ===================================================================== */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.panel-head { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.panel-head h3 { font-size:1.05rem; }
.panel-head .sub { font-size:.82rem; color:var(--ink-3); margin-top:2px; }
.panel-body { padding:22px; }
.panel-tools { display:flex; gap:6px; }
.seg { display:inline-flex; background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; }
.seg button { padding:6px 12px; border-radius:6px; font-size:.82rem; font-weight:600; color:var(--ink-3); transition:var(--t); }
.seg button.active { background:#fff; color:var(--blue); box-shadow:var(--sh-sm); }

.grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:22px; }
.grid-2b { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; }

/* Chart canvas sizing */
.chart-holder { position:relative; height:300px; }
.chart-holder.sm { height:220px; }

/* Legend / donut center */
.donut-wrap { display:flex; align-items:center; gap:24px; }
.donut-box { position:relative; width:180px; height:180px; flex-shrink:0; }
.donut-center { position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none; }
.donut-center .big { font-family:'Manrope'; font-size:1.8rem; font-weight:800; }
.donut-center .lbl { font-size:.72rem; color:var(--ink-3); }
.legend { flex:1; display:flex; flex-direction:column; gap:10px; }
.legend-row { display:flex; align-items:center; gap:10px; font-size:.88rem; }
.legend-dot { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.legend-row .val { margin-left:auto; font-weight:700; color:var(--ink); }

/* =====================================================================
   TABLES
   ===================================================================== */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:12px 22px; border-bottom:1px solid var(--line); background:var(--canvas); }
.tbl td { padding:14px 22px; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--ink-2); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--blue-tint); }
.tbl .prod-cell { display:flex; align-items:center; gap:12px; }
.tbl .prod-thumb { width:38px; height:38px; border-radius:var(--r-sm); background:var(--canvas); border:1px solid var(--line); object-fit:cover; flex-shrink:0; display:grid; place-items:center; color:var(--ink-3); }
.tbl .prod-name { font-weight:600; color:var(--ink); }
.tbl .muted { color:var(--ink-3); font-size:.82rem; }

/* mini bar inside table */
.minibar { width:90px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; display:inline-block; vertical-align:middle; }
.minibar span { display:block; height:100%; background:var(--blue); border-radius:3px; }

/* Badges / pills */
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill); font-size:.76rem; font-weight:700; }
.pill.green { background:var(--green-bg); color:var(--green); }
.pill.amber { background:var(--amber-bg); color:var(--amber); }
.pill.red { background:var(--red-bg); color:var(--red); }
.pill.blue { background:var(--blue-light); color:var(--blue); }
.pill.gray { background:var(--canvas); color:var(--ink-3); }
.stars { color:var(--amber); letter-spacing:1px; font-size:.86rem; }
.stars .off { color:var(--line-2); }

/* Activity feed */
.feed-item { display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); }
.feed-item:last-child { border-bottom:none; }
.feed-ico { width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center; flex-shrink:0; font-size:.85rem; }
.feed-ico.scan { background:var(--green-bg); color:var(--green); }
.feed-ico.rate { background:var(--amber-bg); color:var(--amber); }
.feed-ico.fb { background:var(--blue-light); color:var(--blue); }
.feed-ico.rep { background:var(--red-bg); color:var(--red); }
.feed-body { flex:1; min-width:0; }
.feed-body .t { font-size:.88rem; color:var(--ink); }
.feed-body .t strong { font-weight:600; }
.feed-body .m { font-size:.76rem; color:var(--ink-3); margin-top:2px; }

/* Empty */
.empty { text-align:center; padding:48px 20px; color:var(--ink-3); }
.empty i { font-size:2rem; color:var(--line-2); margin-bottom:12px; }
.empty h4 { color:var(--ink); margin-bottom:6px; }
.empty p { font-size:.9rem; }

/* Forms (settings / product edit) */
.form-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); }
.form-section { padding:24px; border-bottom:1px solid var(--line); }
.form-section:last-child { border-bottom:none; }
.form-section h4 { margin-bottom:4px; }
.form-section .desc { font-size:.85rem; color:var(--ink-3); margin-bottom:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field { margin-bottom:18px; }
.form-field.full { grid-column:1/-1; }
.form-field label { display:block; font-size:.85rem; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.form-field input, .form-field select, .form-field textarea {
    width:100%; padding:11px 13px; border:1.5px solid var(--line-2); border-radius:var(--r-sm); font-size:.92rem; background:#fff; transition:var(--t);
}
.form-field textarea { min-height:100px; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light); }
.form-actions { padding:18px 24px; background:var(--canvas); display:flex; justify-content:flex-end; gap:10px; }

.flash { display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:var(--r-sm); font-weight:500; font-size:.92rem; margin-bottom:20px; }
.flash.ok { background:var(--green-bg); color:var(--green); }
.flash.err { background:var(--red-bg); color:var(--red); }

/* Cover editor (brand page) */
.cover-edit { height:180px; border-radius:var(--r-md); background:linear-gradient(120deg,var(--nav),var(--blue)); position:relative; overflow:hidden; border:1px solid var(--line); }
.cover-edit img { width:100%; height:100%; object-fit:cover; }
.cover-edit .edit-btn { position:absolute; right:14px; bottom:14px; background:rgba(0,0,0,.55); color:#fff; padding:8px 14px; border-radius:var(--r-sm); font-size:.82rem; font-weight:600; backdrop-filter:blur(4px); }
.brand-editor-head { display:flex; gap:20px; align-items:flex-end; margin-top:-46px; padding:0 20px; position:relative; z-index:2; }
.brand-editor-logo { width:96px; height:96px; border-radius:var(--r-md); border:4px solid #fff; background:#fff; box-shadow:var(--sh-md); display:grid; place-items:center; overflow:hidden; }
.brand-editor-logo .fallback { font-family:'Manrope'; font-weight:800; font-size:2.2rem; color:var(--blue); }

/* modal (reuse minimal) */
.pmodal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(13,27,42,.55); backdrop-filter:blur(4px); }
.pmodal.open { display:flex; }
.pmodal-box { background:#fff; border-radius:var(--r-lg); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:var(--sh-lg); }
.pmodal-head { padding:20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.pmodal-body { padding:24px; }
.pmodal-foot { padding:16px 24px; background:var(--canvas); display:flex; justify-content:flex-end; gap:10px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
.backdrop { display:none; }
@media (max-width:1100px){
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
    .grid-2, .grid-2b, .grid-3 { grid-template-columns:1fr; }
}
@media (max-width:900px){
    .app { grid-template-columns:1fr; }
    .sidebar { position:fixed; left:0; top:0; z-index:120; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .3s var(--ease); }
    .sidebar.open { transform:translateX(0); }
    .backdrop.show { display:block; position:fixed; inset:0; background:rgba(13,27,42,.5); z-index:110; }
    .topbar .menu-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--line); }
    .top-search { display:none; }
    .form-grid { grid-template-columns:1fr; }
}
@media (max-width:560px){
    .kpi-grid { grid-template-columns:1fr; }
    .content { padding:18px; }
    .topbar { padding:0 16px; }
    .donut-wrap { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }