/* -------------------------------------------------
   MODERN SAAS UI — LIGHT + DARK THEME
--------------------------------------------------*/

:root {
    --bg: #f5f7fa;
    --card-bg: #ffffff;
    --text: #1f2937;
    --header-bg: linear-gradient(90deg,#6366f1,#3b82f6);
    --button-bg: linear-gradient(90deg,#4f46e5,#3b82f6);
    --button-hover: brightness(1.1);
    --badge-active: #10b981;
    --badge-inactive: #ef4444;
    --log-bg: #1e293b;
    --log-text: #e2e8f0;
}

/* DARK MODE */
body.dark {
    --bg: #0f172a;
    --card-bg: #1e293b;
    --text: #e2e8f0;
    --header-bg: linear-gradient(90deg,#0ea5e9,#2563eb);
    --button-bg: linear-gradient(90deg,#0ea5e9,#3b82f6);
    --button-hover: brightness(1.2);
    --badge-active: #22c55e;
    --badge-inactive: #f43f5e;
    --log-bg: #000000;
    --log-text: #e5e7eb;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", sans-serif;
    transition: background 0.3s, color 0.3s;
}

/* HEADER */
header {
    background: var(--header-bg);
    padding: 15px;
    color: white;
    border-radius: 8px;
    /* Default layout uses flex for simple pages. When the header has the
       `.header-grid` class applied this is overridden via a more
       sophisticated grid layout defined below. */
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    font-weight:600;
}

/* SECTIONS */
section {
    background: var(--card-bg);
    padding:20px;
    border-radius:12px;
    margin-bottom:20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transition: background 0.3s;
}

/* -----------------------------------------------------------------
   Header layout for the main scheduler page
   The `.site-header` class creates a two-row header: the first row
   (`.header-row`) contains controls like the brand label, theme toggle,
   logout button and server time. The second row is the statistics bar,
   centred horizontally. Separating these rows prevents crowding and
   ensures the stats are always centred, regardless of viewport width.
*/
.site-header {
    background: var(--header-bg);
    padding: 15px;
    color: white;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
}
.site-header .header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Centre the stats bar and remove top margin in the two-row header */
.site-header .stats-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
}

section h2 {
    color:#3b82f6;
    font-size:20px;
    margin-bottom:12px;
    border-left:4px solid #3b82f6;
    padding-left:8px;
}

/* BUTTONS */
.button {
    background: var(--button-bg);
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    color: white;
    font-weight:600;
    cursor:pointer;
    transition: transform 0.2s, filter 0.2s;
}
.button:hover {
    filter: var(--button-hover);
    transform: translateY(-2px);
}

/* INPUTS */
input {
    padding:8px 10px;
    border-radius:6px;
    border:1px solid #cbd5e1;
    background: white;
    color:black;
}
body.dark input {
    background:#0f172a;
    border-color:#334155;
    color:white;
}

/* CAMPAIGN ROWS */
.campaign-row {
    background: var(--card-bg);
    padding: 12px;
    border-radius: 8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:12px;
    transition: background 0.3s, opacity 0.3s;
}

/* Mode selector styling within campaign rows */
.campaign-row select.campaign-mode {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #111;
    font-size: 14px;
}
body.dark .campaign-row select.campaign-mode {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

/* BADGES */
.status-badge {
    padding:4px 8px;
    border-radius:6px;
    color:white;
    font-weight:600;
}
.status-badge.active {
    background: var(--badge-active);
}
.status-badge.inactive {
    background: var(--badge-inactive);
}

/* LOGS */
#log {
    background: var(--log-bg);
    color: var(--log-text);
    border-radius:6px;
    padding:12px;
    height:240px;
    overflow-y:auto;
    font-family: monospace;
    font-size:14px;
    transition: background 0.3s;
}

/* FOOTER */
footer {
    text-align:center;
    opacity:0.5;
    margin-top:20px;
}

/* THEME TOGGLE BUTTON */
#themeToggle {
    background:rgba(255,255,255,0.3);
    border:none;
    padding:6px 10px;
    border-radius:6px;
    color:white;
    cursor:pointer;
}

.stats-bar {
    display:flex;
    gap:12px;
    margin-top:15px;
}
.stat-card {
    background: var(--card-bg);
    padding:12px 20px;
    border-radius:12px;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.3s;
}
.stat-card .label {
    font-size:12px;
    opacity:0.7;
}
.stat-card .value {
    font-size:18px;
    font-weight:700;
}

/* Lift and shadow on hover for stat cards */
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* API key status indicator */
.api-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444; /* default red */
}
.api-status-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.api-active {
    background: #10b981 !important;
}
.api-inactive {
    background: #ef4444 !important;
}

/* Fix invisible text */
.stat-card .label,
.stat-card .value {
    color:#111 !important;
}

/* Center stat cards */
#topStats {
    justify-content:center !important;
}

/* Keep logout/time left aligned (handled in HTML structure) */

/* Premium gradient header */
header {
    background: linear-gradient(135deg, #6366f1, #3b82f6) !important;
}

/* Slide-in animation */
@keyframes slideFadeIn {
    from { opacity:0; transform: translateY(-12px); }
    to { opacity:1; transform: translateY(0); }
}
.stat-card {
    animation: slideFadeIn 0.6s ease;
}

/* ------------------------------------------------------------------
   Custom header grid layout and controls
   The scheduler header uses a grid-based layout when the `.header-grid`
   class is applied. The left side contains the brand/title, theme toggle,
   logout button and clock. The centre column holds the traffic statistics
   cards and is horizontally centred. Buttons and the clock are lightly
   styled to blend in with the header. */

/* Grid container for the header */
header.header-grid {
    /*
     * Use a three‑column grid for the header. The middle column holds
     * the traffic statistics and the outer columns grow to consume the
     * remaining space. This centres the stats bar horizontally while
     * keeping the left controls anchored. The right column is left
     * intentionally empty to act as a spacer.
     */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 20px;
}

/* Left group: brand, theme toggle, logout and clock */
.header-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Centre wrapper to ensure stats bar is perfectly centred */
.header-center {
    display: flex;
    justify-content: center;
}

/* Right column: empty spacer to balance the grid. No styles needed but
   defined for clarity. */
.header-right {
    /* this element flexes to take up remaining space */
}

/* Override default button appearance inside the header for a cleaner look */
.header-button {
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.2s;
}
.header-button:hover {
    filter: brightness(1.2);
}

/* Server time styling */
.server-time {
    font-weight: bold;
    margin-left: 5px;
}

/* Brand styling */
.brand {
    font-weight: 600;
    margin-right: 10px;
    white-space: nowrap;
}

/* --- Improved Dark Mode --- */
body.dark {
    --bg: #0f172a;
    --card-bg: #1e293b;
    --text-color: #e2e8f0;
    --input-bg: #1e293b;
    --input-border: #334155;
    --button-bg: #3b82f6;
    --button-text: #fff;
}

/* -----------------------------------------------------------------
   API status indicator styles
   These classes style the status bar beneath the API token field. A
   coloured dot indicates whether the API token is active or inactive
   based on recent statistics fetches. The dot defaults to the
   inactive colour when no status is known. The accompanying text
   describes the status. */
.api-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.api-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--badge-inactive);
}
.api-status-text {
    font-size: 14px;
    font-weight: 500;
}
/* Active/inactive status modifiers for the dot */
.api-dot.api-active {
    background: var(--badge-active);
}
.api-dot.api-inactive {
    background: var(--badge-inactive);
}

/* Logo image shared between scheduler and login pages */
.logo-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-right: 8px;
}

/* -----------------------------------------------------------------
   Login page styles
   These classes give the login page a professional look with a centered card,
   clean form inputs, subtle shadows and responsive spacing. The login card
   inherits colours from the main theme variables to ensure consistency. */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--header-bg);
    color: white;
}
.login-card {
    background: var(--card-bg);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    width: 340px;
    text-align: center;
}
.login-card h1 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #3b82f6;
}
.login-card form label {
    display: block;
    text-align: left;
    margin-top: 15px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}
.login-card form input[type="text"],
.login-card form input[type="password"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: var(--bg);
    color: var(--text);
    margin-top: 5px;
    box-sizing: border-box;
}
body.dark .login-card form input[type="text"],
body.dark .login-card form input[type="password"] {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.login-card .remember {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 12px;
    color: var(--text);
    font-size: 14px;
}
.login-card button[type="submit"] {
    width: 100%;
    margin-top: 18px;
}
.login-card .error {
    color: var(--badge-inactive);
    font-weight: 600;
    margin-top: 12px;
    font-size: 14px;
}

body.dark main {
    background: var(--bg);
    color: var(--text-color);
}

body.dark .stat-card {
    background: #1e293b !important;
    color: var(--text-color) !important;
    box-shadow: 0 0 0 1px #334155 inset;
}

body.dark input,
body.dark select {
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
}

body.dark header {
    background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
}

body.dark .button {
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: none !important;
}

body.dark #apiStatusText {
    color: var(--text-color) !important;
}