/*
 * Stooco design tokens (Stage 7). Prefixed sc- throughout so these rules
 * never collide with the legacy Bootstrap 4 admin theme (webroot/global/)
 * still loaded on every page - this is an additive layer on top of it,
 * not a replacement. Only screens explicitly redesigned in Stage 7 use
 * the sc- component classes; everything else keeps its existing look
 * until redesigned in a later pass.
 */

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

:root {
    /* Neutrals - cool slate, not pure gray */
    --sc-gray-900: #0F172A;
    --sc-gray-700: #334155;
    --sc-gray-500: #64748B;
    --sc-gray-300: #CBD5E1;
    --sc-gray-200: #E2E8F0;
    --sc-gray-100: #F1F5F9;
    --sc-gray-50: #F8FAFC;
    --sc-white: #FFFFFF;

    /* Brand accent */
    --sc-primary: #4F46E5;
    --sc-primary-dark: #4338CA;
    --sc-primary-light: #EEF2FF;

    /* Semantic status */
    --sc-success: #16A34A;
    --sc-success-bg: #F0FDF4;
    --sc-warning: #D97706;
    --sc-warning-bg: #FFFBEB;
    --sc-danger: #DC2626;
    --sc-danger-bg: #FEF2F2;
    --sc-info: #2563EB;
    --sc-info-bg: #EFF6FF;

    /* Sales channels - small identifying accents only, never a whole
       screen's palette */
    --sc-lazada: #F57224;
    --sc-shopee: #EE4D2D;
    --sc-tiktok: #000000;
    --sc-tiktok-accent: #25F4EE;

    /* Sidebar - dark slate, not the legacy theme's near-black */
    --sc-sidebar-bg: #0F172A;
    --sc-sidebar-bg-active: #1E293B;
    --sc-sidebar-text: #CBD5E1;
    --sc-sidebar-text-active: #FFFFFF;

    /* Type */
    --sc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sc-text-xs: 12px;
    --sc-text-sm: 13px;
    --sc-text-base: 14px;
    --sc-text-lg: 16px;
    --sc-text-xl: 20px;
    --sc-text-2xl: 28px;

    /* Spacing (4px base) */
    --sc-space-1: 4px;
    --sc-space-2: 8px;
    --sc-space-3: 12px;
    --sc-space-4: 16px;
    --sc-space-6: 24px;
    --sc-space-8: 32px;
    --sc-space-12: 48px;

    /* Shape */
    --sc-radius-sm: 6px;
    --sc-radius-md: 8px;
    --sc-radius-full: 999px;
    --sc-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --sc-shadow-pop: 0 4px 16px rgba(15, 23, 42, 0.12);
}

/* ---------- Base ---------- */

.sc-page {
    font-family: var(--sc-font);
    color: var(--sc-gray-700);
    background: var(--sc-gray-50);
}

.sc-page h1, .sc-page h2, .sc-page h3, .sc-page h4 {
    font-family: var(--sc-font);
    color: var(--sc-gray-900);
    font-weight: 700;
}

.sc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sc-space-3);
    margin-bottom: var(--sc-space-6);
}

.sc-page-title {
    font-size: var(--sc-text-xl);
    font-weight: 700;
    color: var(--sc-gray-900);
    margin: 0;
}

.sc-page-subtitle {
    font-size: var(--sc-text-sm);
    color: var(--sc-gray-500);
    margin-top: 2px;
}

/* ---------- Buttons ---------- */

.sc-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-family: var(--sc-font);
    font-size: var(--sc-text-sm);
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--sc-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sc-btn:hover { text-decoration: none; }

.sc-btn-primary {
    background: var(--sc-primary);
    color: var(--sc-white);
}

.sc-btn-primary:hover {
    background: var(--sc-primary-dark);
    color: var(--sc-white);
}

.sc-btn-secondary {
    background: var(--sc-white);
    color: var(--sc-gray-700);
    border-color: var(--sc-gray-300);
}

.sc-btn-secondary:hover {
    background: var(--sc-gray-50);
    color: var(--sc-gray-900);
    border-color: var(--sc-gray-300);
}

.sc-btn-danger {
    background: var(--sc-white);
    color: var(--sc-danger);
    border-color: var(--sc-gray-300);
}

.sc-btn-danger:hover {
    background: var(--sc-danger-bg);
    border-color: var(--sc-danger);
}

.sc-btn-sm { padding: 6px 12px; font-size: var(--sc-text-xs); }
.sc-btn-lg { padding: 12px 24px; font-size: var(--sc-text-lg); }

/* ---------- Cards ---------- */

.sc-card {
    background: var(--sc-white);
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-card);
}

.sc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4) var(--sc-space-6);
    border-bottom: 1px solid var(--sc-gray-200);
}

.sc-card-header h3 {
    font-size: var(--sc-text-lg);
    margin: 0;
}

.sc-card-body { padding: var(--sc-space-6); }
.sc-card-body-flush { padding: 0; }

/* ---------- KPI stat cards ---------- */

.sc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-6);
}

.sc-kpi {
    background: var(--sc-white);
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-card);
    padding: var(--sc-space-4) var(--sc-space-6);
}

.sc-kpi-label {
    font-size: var(--sc-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-gray-500);
}

.sc-kpi-value {
    font-size: var(--sc-text-2xl);
    font-weight: 800;
    color: var(--sc-gray-900);
    line-height: 1.2;
    margin-top: var(--sc-space-1);
}

.sc-kpi-delta {
    font-size: var(--sc-text-xs);
    font-weight: 600;
    margin-top: var(--sc-space-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sc-kpi-delta.up { color: var(--sc-success); }
.sc-kpi-delta.down { color: var(--sc-danger); }
.sc-kpi-delta.flat { color: var(--sc-gray-500); }

/* ---------- Pills / badges ---------- */

.sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--sc-text-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--sc-radius-full);
    white-space: nowrap;
}

.sc-pill-success { background: var(--sc-success-bg); color: var(--sc-success); }
.sc-pill-warning { background: var(--sc-warning-bg); color: var(--sc-warning); }
.sc-pill-danger { background: var(--sc-danger-bg); color: var(--sc-danger); }
.sc-pill-info { background: var(--sc-info-bg); color: var(--sc-info); }
.sc-pill-neutral { background: var(--sc-gray-100); color: var(--sc-gray-700); }

.sc-channel-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.sc-channel-dot.lazada { background: var(--sc-lazada); }
.sc-channel-dot.shopee { background: var(--sc-shopee); }
.sc-channel-dot.tiktok { background: var(--sc-tiktok-accent); border: 1px solid var(--sc-tiktok); }

.sc-channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sc-text-xs);
    font-weight: 600;
    color: var(--sc-gray-700);
}

/* ---------- Tables ---------- */

.sc-table-wrap { overflow-x: auto; }

.sc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sc-text-sm);
}

.sc-table thead th {
    text-align: left;
    font-size: var(--sc-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sc-gray-500);
    background: var(--sc-gray-50);
    padding: var(--sc-space-3) var(--sc-space-4);
    border-bottom: 1px solid var(--sc-gray-200);
    white-space: nowrap;
}

.sc-table tbody td {
    padding: var(--sc-space-3) var(--sc-space-4);
    border-bottom: 1px solid var(--sc-gray-100);
    color: var(--sc-gray-700);
    vertical-align: middle;
}

.sc-table tbody tr:hover { background: var(--sc-gray-50); }
.sc-table tbody tr:last-child td { border-bottom: none; }

.sc-table-empty {
    padding: var(--sc-space-12) var(--sc-space-4);
    text-align: center;
    color: var(--sc-gray-500);
}

/* ---------- Connection / onboarding cards ---------- */

.sc-connection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sc-space-4);
}

.sc-connection-card {
    background: var(--sc-white);
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-card);
    padding: var(--sc-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.sc-connection-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sc-connection-name {
    font-size: var(--sc-text-lg);
    font-weight: 700;
    color: var(--sc-gray-900);
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.sc-connection-actions {
    display: flex;
    gap: var(--sc-space-2);
    margin-top: auto;
}

/* ---------- Forms ---------- */

.sc-field { margin-bottom: var(--sc-space-4); }

.sc-field label {
    display: block;
    font-size: var(--sc-text-sm);
    font-weight: 600;
    color: var(--sc-gray-900);
    margin-bottom: var(--sc-space-1);
}

.sc-field .sc-hint {
    font-size: var(--sc-text-xs);
    color: var(--sc-gray-500);
    margin-top: 4px;
}

.sc-page input.form-control,
.sc-page select.form-control,
.sc-page textarea.form-control {
    font-family: var(--sc-font);
    font-size: var(--sc-text-base);
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius-sm);
    padding: 9px 12px;
    color: var(--sc-gray-900);
}

.sc-page input.form-control:focus,
.sc-page select.form-control:focus,
.sc-page textarea.form-control:focus {
    border-color: var(--sc-primary);
    box-shadow: 0 0 0 3px var(--sc-primary-light);
    outline: none;
}

/* ---------- Sidebar nav (applied to the existing Bootstrap nav markup) ----------
   .sc-nav is added directly to the <ul class="navbar-toolbar"> element
   itself (see Element/Common/sidebar.ctp), not a wrapper around it. */

ul.sc-nav.navbar-toolbar {
    background: var(--sc-sidebar-bg);
}

.sc-nav .nav-item > .nav-link {
    font-family: var(--sc-font);
    font-size: var(--sc-text-sm);
    font-weight: 500;
    color: var(--sc-sidebar-text) !important;
    padding: var(--sc-space-3) var(--sc-space-4) !important;
    border-radius: var(--sc-radius-sm);
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.sc-nav .nav-item > .nav-link:hover,
.sc-nav .nav-item > .nav-link:focus {
    background: var(--sc-sidebar-bg-active) !important;
    color: var(--sc-sidebar-text-active) !important;
}

.sc-nav .nav-item.active > .nav-link {
    background: var(--sc-primary) !important;
    color: var(--sc-sidebar-text-active) !important;
}

.sc-nav .dropdown-menu {
    font-family: var(--sc-font);
    font-size: var(--sc-text-sm);
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-pop);
}

/* ---------- Utility ---------- */

.sc-empty-state {
    text-align: center;
    padding: var(--sc-space-12) var(--sc-space-6);
    color: var(--sc-gray-500);
}

.sc-empty-state .sc-empty-icon {
    font-size: 32px;
    color: var(--sc-gray-300);
    margin-bottom: var(--sc-space-3);
}

/* ---------- Marketing site (Stage: domain move) ----------
   Same tokens as the dashboard (Stage 7) - a merchant clicking from the
   marketing site into the app shouldn't see a different visual language. */

.sc-marketing {
    font-family: var(--sc-font);
    color: var(--sc-gray-700);
    background: var(--sc-white);
}

.sc-marketing h1, .sc-marketing h2, .sc-marketing h3, .sc-marketing h4 {
    font-family: var(--sc-font);
    color: var(--sc-gray-900);
    font-weight: 700;
}

.sc-marketing a { color: var(--sc-primary); }

.sc-mkt-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sc-space-4) var(--sc-space-8);
    border-bottom: 1px solid var(--sc-gray-200);
}

.sc-mkt-logo {
    font-size: var(--sc-text-lg);
    font-weight: 800;
    color: var(--sc-gray-900);
    text-decoration: none;
}

.sc-mkt-nav-links {
    display: flex;
    align-items: center;
    gap: var(--sc-space-6);
}

.sc-mkt-nav-links a {
    color: var(--sc-gray-700);
    font-weight: 600;
    font-size: var(--sc-text-sm);
    text-decoration: none;
}

.sc-mkt-nav-links a:hover { color: var(--sc-primary); }

.sc-mkt-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--sc-space-8);
}

.sc-hero {
    padding: var(--sc-space-12) 0;
    text-align: center;
}

.sc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sc-text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-primary);
    background: var(--sc-primary-light);
    padding: 4px 12px;
    border-radius: var(--sc-radius-full);
    margin-bottom: var(--sc-space-4);
}

.sc-hero h1 {
    font-size: 44px;
    line-height: 1.15;
    margin: 0 0 var(--sc-space-4);
}

.sc-hero p.sc-hero-sub {
    font-size: var(--sc-text-lg);
    color: var(--sc-gray-500);
    max-width: 640px;
    margin: 0 auto var(--sc-space-8);
}

.sc-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-3);
    flex-wrap: wrap;
}

.sc-section {
    padding: var(--sc-space-12) 0;
    border-top: 1px solid var(--sc-gray-100);
}

.sc-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--sc-space-8);
}

.sc-section-eyebrow {
    font-size: var(--sc-text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-primary);
    margin-bottom: var(--sc-space-2);
}

.sc-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sc-space-6);
}

.sc-feature-card {
    padding: var(--sc-space-6);
}

.sc-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--sc-radius-md);
    background: var(--sc-primary-light);
    color: var(--sc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: var(--sc-space-4);
}

.sc-feature-card h3 {
    font-size: var(--sc-text-lg);
    margin: 0 0 var(--sc-space-2);
}

.sc-feature-card p {
    font-size: var(--sc-text-sm);
    color: var(--sc-gray-500);
    margin: 0;
}

/* Mockup dashboard preview built from the same tokens - not a real
   screenshot, see the build report. */
.sc-mockup {
    background: var(--sc-gray-900);
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-pop);
    padding: var(--sc-space-3);
    max-width: 880px;
    margin: 0 auto;
}

.sc-mockup-inner {
    background: var(--sc-gray-50);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-6);
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--sc-space-4);
    text-align: left;
}

.sc-mockup-sidebar {
    background: var(--sc-sidebar-bg);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.sc-mockup-sidebar span {
    color: var(--sc-sidebar-text);
    font-size: var(--sc-text-xs);
    padding: var(--sc-space-2);
    border-radius: var(--sc-radius-sm);
}

.sc-mockup-sidebar span.active {
    background: var(--sc-primary);
    color: var(--sc-white);
    font-weight: 600;
}

.sc-pricing-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--sc-gray-100);
    border-radius: var(--sc-radius-full);
    padding: 4px;
    gap: 2px;
    margin: 0 auto var(--sc-space-8);
}

.sc-pricing-toggle button {
    border: none;
    background: transparent;
    font-family: var(--sc-font);
    font-size: var(--sc-text-sm);
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--sc-radius-full);
    color: var(--sc-gray-500);
    cursor: pointer;
}

.sc-pricing-toggle button.active {
    background: var(--sc-white);
    color: var(--sc-gray-900);
    box-shadow: var(--sc-shadow-card);
}

.sc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sc-space-6);
    align-items: stretch;
}

.sc-pricing-card {
    display: flex;
    flex-direction: column;
    padding: var(--sc-space-6);
}

.sc-pricing-card.featured {
    border-color: var(--sc-primary);
    box-shadow: 0 0 0 2px var(--sc-primary), var(--sc-shadow-pop);
}

.sc-pricing-price {
    font-size: 36px;
    font-weight: 800;
    color: var(--sc-gray-900);
    margin: var(--sc-space-3) 0;
}

.sc-pricing-price span {
    font-size: var(--sc-text-sm);
    font-weight: 500;
    color: var(--sc-gray-500);
}

.sc-pricing-features {
    list-style: none;
    padding: 0;
    margin: var(--sc-space-4) 0 var(--sc-space-6);
    flex: 1;
}

.sc-pricing-features li {
    font-size: var(--sc-text-sm);
    color: var(--sc-gray-700);
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.sc-mkt-footer {
    border-top: 1px solid var(--sc-gray-200);
    padding: var(--sc-space-8);
    text-align: center;
}

.sc-mkt-footer-links {
    display: flex;
    justify-content: center;
    gap: var(--sc-space-6);
    margin-bottom: var(--sc-space-3);
}

.sc-mkt-footer-links a {
    font-size: var(--sc-text-sm);
    color: var(--sc-gray-500);
    text-decoration: none;
}

.sc-mkt-footer-links a:hover { color: var(--sc-primary); }

.sc-mkt-footer-copy {
    font-size: var(--sc-text-xs);
    color: var(--sc-gray-300);
}

.sc-legal {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--sc-space-12) var(--sc-space-8);
}

.sc-legal h1 { font-size: var(--sc-text-2xl); margin-bottom: var(--sc-space-2); }
.sc-legal .sc-legal-updated { color: var(--sc-gray-500); font-size: var(--sc-text-sm); margin-bottom: var(--sc-space-8); }
.sc-legal h2 { font-size: var(--sc-text-xl); margin-top: var(--sc-space-8); }
.sc-legal p, .sc-legal li { font-size: var(--sc-text-base); line-height: 1.7; color: var(--sc-gray-700); }

.sc-legal-draft-banner {
    background: var(--sc-warning-bg);
    color: var(--sc-warning);
    border: 1px solid var(--sc-warning);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-4);
    font-size: var(--sc-text-sm);
    margin-bottom: var(--sc-space-8);
}

@media (max-width: 640px) {
    .sc-hero h1 { font-size: 30px; }
    .sc-mockup-inner { grid-template-columns: 1fr; }
    .sc-mkt-nav-links { display: none; }
}