@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

/* GLOBAL TYPOGRAPHY — League Spartan everywhere.
   (Code/token displays intentionally keep monospace; see main.css .sequence-line and the share-token input.) */
html, body {
    font-family: "League Spartan", sans-serif;
}

:root {
    /* LIGHT THEME COLORS */
    --primary-color: #388E3C;                /* branding, headers (dark green) */
    --primary-accent-color: #4CAF50;         /* slightly lighter green */
    --secondary-color: #66BB6A;              /* buttons, highlights (medium green) */
    --other-color: #357F36;                  /* extra color for light mode to have darker borders */
    --secondary-accent-color: #A5D6A7;       /* button hover (slightly lighter green) */
    --background-color: #F0F2F1;             /* main background (light gray) */
    --sub-background-color: #CCCCCC;         /* side panels, etc (lighter gray) */
    --accent-color: #d3d3d3;                 /* lighter gray than subbackground */
    --header-color: #2E7D32;                 /* dark green for headers */
    --font-color: #333333;                   /* text (dark gray) */
    --scroll-color: #AAAAAA;                 /* scroll bar */
    --input-color: #357F36;
    --shadow: rgba(0,0,0,0.16);

    /* TYPOGRAPHY TOKENS */
    --font-family-base: "League Spartan", sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* SHARED DESIGN TOKENS (Batch 2) — consumed by the landing + editor redesigns */
    --accent-orange: #F57C00;            /* in-progress / warn */
    --accent-orange-strong: #E65100;
    --progress-track: #E0E0E0;           /* progress / pill track */
    --progress-fill: var(--primary-accent-color);   /* green fill (resolves per theme) */
    --row-hover: rgba(56, 142, 60, 0.06);
    --row-separator: #E0E0E0;
    --border-color: #D0D0D0;
    --panel-width: 340px;                /* docked right-side preview panel */

    /* spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;

    /* type scale */
    --font-size-sm: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.15rem;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* STAGE DIMENSIONS */
    --stage-max-width: 1200px;                /* maximum width of the stage */
    --stage-aspect-ratio: 16/9;               /* width:height ratio of the stage */

    --app-switch-caddy-bid-bg: #a590ba;
    --app-switch-caddy-bid-border: #6c5584;
    --app-switch-caddy-bid-hover-bg: #9486a3;
    --app-switch-caddy-bid-hover-border: #9486a3;

    /* USER RULES */
    user-select: none;
}

body.dark {
    /* DARK THEME COLORS */
    --primary-color: #388E3C;            /* branding, headers (green) */
    --primary-accent-color: #4CAF50;     /* lighter green */
    --secondary-color: #3E8E41;          /* buttons, highlights (medium green) */
    --other-color: #3E8E41;              /* extra color for borders */
    --secondary-accent-color: #66BB6A;   /* button hover (lighter green) */
    --background-color: #202020;         /* main background (dark gray) */
    --sub-background-color: #2E2E2E;     /* side panels (medium dark gray) */
    --accent-color: #333333;             /* lighter gray than sub-background */
    --header-color: #1B5E20;             /* dark green for header */
    --font-color: #E0E0E0;               /* text (light gray) */
    --scroll-color: #444444;             /* scroll bar */
    --input-color: #388E3C;
    --shadow: rgba(241, 241, 241, 0.05);

    /* SHARED DESIGN TOKENS — dark overrides (Batch 2).
       progress-fill / panel-width / spacing / type scale are theme-independent and inherit from :root. */
    --accent-orange: #FF9800;
    --accent-orange-strong: #F57C00;
    --progress-track: #3A3A3A;
    --row-hover: rgba(76, 175, 80, 0.10);
    --row-separator: #3A3A3A;
    --border-color: #3A3A3A;

    --app-switch-caddy-bid-bg: #7a6c88;

    /* UPDATE ICONS FOR HEADER*/
    #options-button .icon {
        content: url('/caddy/images/icons/menu/Light Options.png')
    }
    #light-dark-button .icon {
        content: url('/caddy/images/icons/toggle/light mode icon.png')
    }
    #logout-button .icon {
        content: url('/caddy/images/icons/logout/dark logout.png')
    }
    #home-button .icon, #back-button .icon {
        content: url('/caddy/images/icons/home/dark mode home.png')
    }
    #screensaver-logo,
    #logo-container img {
        content: url('/caddy/images/logos/dark long logo.png')
    }
    #edit-button .icon, .edit img, .edit-favorite-button img {
        content: url('/caddy/images/icons/edit/dark mode edit icon.png')
    }
    .arrow {
        content: url('/caddy/images/icons/collapse/dark collapse.png')
    }
    .save-button-right img {
        content: url('/caddy/images/icons/save/dark mode save icon.png')
    }
    .compile-button-right.compile img {
        content: url('/caddy/images/icons/compile/dark compile.png')
    }
    .compile-button-right.publish img {
        content: url('/caddy/images/icons/compile/dark publish.png')
    }
    .add-equipment-button img, #create-project img, .add-favorites-button img {
        content: url('/caddy/images/icons/add/dark mode plus icon.png')
    }
    .delete-project-button img, .delete-favorite-button img, .delete-equipment-button img {
        content: url('/caddy/images/icons/trashcan/Dark Trashcan.png')
    }
    .favorite-equipment-button img, .favorites-button img {
        content: url('/caddy/images/icons/favorite/star dark.png')
    }
    .share-button img{
        content: url('/caddy/images/icons/share/send-dark.png')
    }
    .prev-equipment img, #prev-page img, #friends-prev img, .left-arrow img{
        content: url('/caddy/images/icons/arrow/left-arrow-dark.png')
    }
    .next-equipment img, #next-page img, #friends-next img, .right-arrow img {
        content: url('/caddy/images/icons/arrow/right-arrow-dark.png')
    }
    .invite-btn img {
        content: url('/caddy/images/icons/share/share-dark.png')
    }
    .back-arrow-icon {
        background-image: url('/caddy/images/icons/arrow/dark-back.png')
    }
    .sidebar-arrow {
        background-image: url('/caddy/images/icons/collapse/dark collapse.png');
    }
    .tutorial-arrow {
        content: url('/caddy/images/icons/arrow/up-arrow-dark.png')
    }
    .main-image img {
        content: url('/caddy/images/login/dark desktop main.png')
    }
    .project-image img, .carousel-project img {
        content: url('/caddy/images/login/dark desktop project.png')
    }
    .live-preview img {
        content: url('/caddy/images/login/dark live-preview.gif')
    }
    .points img {
        content: url('/caddy/images/login/dark points list.png')
    }
    .sequence img {
        content: url('/caddy/images/login/dark SOP.png')
    }
    .pw-toggle img.pw-icon {
        content: url('/caddy/images/icons/login/password-dark.png')
    }
    .carousel-caddy img {
        content: url('/caddy/images/icons/login/caddy-ui.png')
    }
    .carousel-export img {
        content: url('/caddy/images/icons/login/export-dark.png')
    }
    .deny-btn img, .remove-btn img, .cancel-btn img {
        content: url('/caddy/images/icons/friend/dark-x.png')
    }
    .accept-btn img {
        content: url('/caddy/images/icons/friend/dark-checked.png')
    }
    .bell-read img {
        content: url('/caddy/images/icons/friend/dark-bell.png')
    }
    .bell-unread img {
        content: url('/caddy/images/icons/friend/dark-notification-bell.png')
    }
    .friends-btn img, .expand-btn img {
        content: url('/caddy/images/icons/friend/dark-friends.png')
    }
    .requests-btn img {
        content: url('/caddy/images/icons/friend/dark-add-friend.png')
    }
    .collapse-btn img {
        content: url('/caddy/images/icons/friend/dark-collapse.png')
    }
    .view-logs-btn img {
        content: url('/caddy/images/icons/share/dark-history.png')
    }
    .btn-back img {
        content: url('/caddy/images/icons/arrow/dark-back.png')
    }
    .app-link-image img {
        content: url("/caddy/images/login/bid-main.png");
    }
}

/* ============================================================
   SHARED GLOBAL RULES (Batch 2)
   Additive + class-scoped (cl- prefix) so existing pages are
   unaffected. The only global (non-class) restyle is the scrollbar.
   Consumed by the landing + editor redesigns in later batches.
   ============================================================ */

/* Custom scrollbar — global, themed via --scroll-color */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-color) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--scroll-color);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-accent-color);
    background-clip: content-box;
}

/* Progress bar — <div class="cl-progress"><div class="cl-progress-fill" style="width:NN%"></div></div>
   Add .is-partial on .cl-progress to show the orange (in-progress) fill. */
.cl-progress {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 6px;
    background: var(--progress-track);
    border-radius: 999px;
    overflow: hidden;
}
.cl-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--progress-fill);
    border-radius: inherit;
    transition: width 0.3s ease;
}
.cl-progress.is-partial .cl-progress-fill {
    background: var(--accent-orange);
}

/* Pill / badge */
.cl-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    background: var(--accent-color);
    color: var(--font-color);
}
.cl-pill-accent {
    background: var(--primary-color);
    color: #fff;
}

/* Compact data table */
.cl-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    color: var(--font-color);
}
.cl-data-table th,
.cl-data-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--row-separator);
}
.cl-data-table th {
    font-weight: var(--font-weight-bold);
    position: sticky;
    top: 0;
    background: var(--sub-background-color);
    z-index: 1;
}
.cl-data-table tbody tr:hover {
    background: var(--row-hover);
}

/* Buttons */
.cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--accent-color);
    color: var(--font-color);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cl-btn:hover {
    background: var(--secondary-accent-color);
}
.cl-btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.cl-btn-primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}