/* FlexyBOT Light Theme (aligned with verification page styling) */

/* Define palettes per mode to avoid overriding dark */
html.light {
    --fb-bg: #F7F3EF;            /* page background */
    --fb-surface: #FFFFFF;       /* cards, surfaces */
    --fb-border: #D9D2CB;        /* subtle borders (higher contrast) */
    --fb-text: #232323;          /* primary text (higher contrast) */
    --fb-text-muted: #5D5753;    /* secondary text */
    --fb-primary: #B08D6D;       /* primary accent (buttons, highlights) */
    --fb-primary-contrast: #FFFFFF;
    --fb-accent: #D2B79F;        /* lighter accent (hovers) */
    --fb-warning: #D4973A;
    --fb-danger: #B64646;        /* slightly darker for contrast */
    --fb-success: #3F9A61;
    --fb-info: #5F81BE;
    --fb-shadow: 0 8px 20px rgba(176,141,109,0.15);

    /* Chart palette aligned with theme */
    --fb-chart-primary: #B08D6D;
    --fb-chart-blocked: #B64646;
    --fb-chart-warning: #D4973A;
    --fb-chart-success: #3F9A61;
}

html.dark {
    /* Restore a proper dark palette */
    --fb-bg: #0F1216;
    --fb-surface: #171C22;
    --fb-border: #27303A;
    --fb-text: #E8E9EA;
    --fb-text-muted: #A8B0B8;
    --fb-primary: #4BB7E4;
    --fb-primary-contrast: #0A0C0F;
    --fb-accent: #3FA4CC;
    --fb-warning: #E0A04A;
    --fb-danger: #E06060;
    --fb-success: #57C08A;
    --fb-info: #6BA4FF;
    --fb-shadow: 0 8px 24px rgba(0,0,0,0.35);

    --fb-chart-primary: #4BB7E4;
    --fb-chart-blocked: #E06060;
    --fb-chart-warning: #E0A04A;
    --fb-chart-success: #57C08A;
}

html.light, html.auto {
    background: var(--fb-bg);
    color: var(--fb-text);
}

/* Admin shell elements */
html.light .header {
    background: var(--fb-surface);
    border-bottom: 1px solid var(--fb-border);
    box-shadow: var(--fb-shadow);
}

html.light .nav a {
    color: var(--fb-text);
}
html.light .nav a:hover { color: var(--fb-primary); }

html.light .card {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    box-shadow: var(--fb-shadow);
}

html.light .btn { background: var(--fb-primary); color: var(--fb-primary-contrast); }
html.light .btn:hover { background: var(--fb-accent); }
html.light .btn.btn-secondary { background: var(--fb-surface); color: var(--fb-text); border: 1px solid var(--fb-border); }
html.light .btn.btn-warning { background: var(--fb-warning); }
html.light .btn.btn-danger { background: var(--fb-danger); }
html.light .btn.btn-info { background: var(--fb-info); }
html.light .btn.btn-success { background: var(--fb-success); }

/* Tables and lists */
html.light .stats-table .stat-row,
html.light .list .list-item,
html.light .info-item,
html.light .backup-item,
html.light .monitor-item { border-color: var(--fb-border); }

/* Badges, pills */
html.light .badge,
html.light .stat-card { background: var(--fb-surface); border: 1px solid var(--fb-border); box-shadow: var(--fb-shadow); }

/* Inputs */
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="number"],
html.light input[type="password"],
html.light select,
html.light textarea { background: #FFF; border: 1px solid var(--fb-border); color: var(--fb-text); }
html.light input:focus, html.light select:focus, html.light textarea:focus { outline: 2px solid var(--fb-accent); border-color: var(--fb-accent); }

/* Charts container */
html.light .chart-container { background: var(--fb-surface); border: 1px solid var(--fb-border); box-shadow: var(--fb-shadow); }

/* Footer */
html.light .footer { background: var(--fb-surface); border-top: 1px solid var(--fb-border); color: var(--fb-text-muted); }

/* Theme toggle (improve visibility in light mode) */
html.light .theme-toggle {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 1px solid var(--fb-border);
    border-radius: 16px;
    background: var(--fb-surface);
    box-shadow: var(--fb-shadow);
}
html.light .theme-toggle .slider {
    position: relative;
    width: 44px;
    height: 22px;
    background: #EDE7E1; /* subtle beige */
    border: 1px solid var(--fb-border);
    border-radius: 999px;
    display: inline-block;
}
html.light .theme-toggle input { display: none; }
html.light .theme-toggle .slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fb-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}
html.light .theme-toggle input:checked + .slider::after {
    transform: translateX(22px);
    background: var(--fb-accent);
}
html.light .theme-toggle:hover .slider { border-color: var(--fb-accent); }