/* =========================================================
   THEME: ROZTRP
   ---------------------------------------------------------
   Black / warm white / dark orange

   Inspired by the RozTRP emblem:
   dark field, white linework, one moving orange figure.
   ========================================================= */


:root[data-theme="roztrp"] {

    /* -----------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------- */

    --font-body:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-brand:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* -----------------------------------------------------
       MAIN PALETTE
       ----------------------------------------------------- */

    --page-bg: #07090b;

    --surface: #0e1114;
    --surface-muted: #15191d;
    --surface-soft: #111519;

    --text: #f3f0e8;
    --text-muted: #b3b0a9;
    --text-soft: #817f79;


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    --header-bg: #030405;
    --header-text: #f5f1e8;
    --header-muted: #a5a29c;
    --header-border: #272727;

    --header-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.03);

    --header-control-bg: #101316;
    --header-control-text: #ede9df;
    --header-control-border: #343638;


    /* -----------------------------------------------------
       ORANGE ACCENT
       ----------------------------------------------------- */

    --primary-solid: #c85b22;

    --primary-bg: #c85b22;
    --primary-hover: #df6a2d;

    --primary-text: #ffffff;
    --primary-border: #c85b22;

    --focus-ring:
        rgba(200, 91, 34, 0.32);


    /* -----------------------------------------------------
       SECONDARY CONTROLS
       ----------------------------------------------------- */

    --secondary-bg: #101316;
    --secondary-hover: #191d20;
    --secondary-text: #e6e2d9;
    --secondary-border: #3a3d3f;

    --control-bg: #0b0e10;
    --control-text: #f1eee6;
    --control-border: #3a3e41;


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --border: #292d30;
    --border-soft: #202427;
    --border-strong: #45494c;


    /* -----------------------------------------------------
       LINKS
       ----------------------------------------------------- */

    --link: #dc7139;


    /* -----------------------------------------------------
       TAB / VIEW SWITCH
       ----------------------------------------------------- */

    --view-bg: #111417;
    --view-active-bg: #f1ede4;
    --view-active-text: #111214;


    /* -----------------------------------------------------
       STATS
       ----------------------------------------------------- */

    --stat-bg: #111519;


    /* -----------------------------------------------------
       STATUS COLOURS
       Keep these deliberately muted.
       Orange remains reserved for primary interaction.
       ----------------------------------------------------- */

    --neutral-bg: #1b2024;
    --neutral-text: #bfc3c5;

    --success-bg: #12231b;
    --success-text: #8fc7a5;
    --success-border: #294637;

    --warning-bg: #241d11;
    --warning-text: #ddb875;
    --warning-border: #554323;

    --danger-bg: #261616;
    --danger-text: #df9993;
    --danger-border: #57302d;

    --info-bg: #151b20;
    --info-text: #9eabb5;
    --info-border: #303a41;

    --unassigned-bg: #251c10;
    --unassigned-text: #ddb36b;
    --unassigned-border: #a97029;


    /* -----------------------------------------------------
       GEOMETRY
       Elegant, relatively crisp.
       ----------------------------------------------------- */

    --radius-small: 5px;
    --radius-button: 7px;
    --radius-panel: 8px;
    --radius-card: 10px;
    --radius-large: 12px;

    --card-border-width: 1px;


    /* -----------------------------------------------------
       SHADOWS
       Almost none — darkness creates the hierarchy.
       ----------------------------------------------------- */

    --shadow-card:
        0 8px 24px
        rgba(0, 0, 0, 0.18);

    --shadow-active:
        0 2px 8px
        rgba(0, 0, 0, 0.35);


    /* -----------------------------------------------------
       TYPE CHARACTER
       ----------------------------------------------------- */

    --heading-weight: 760;
    --heading-letter-spacing: -0.025em;

    --button-weight: 700;
    --button-text-transform: none;
    --button-letter-spacing: 0.01em;

    --status-height: 32px;
}


/* =========================================================
   BODY
   ========================================================= */

[data-theme="roztrp"] body {
    background:
        radial-gradient(
            circle at 50% -200px,
            #101820 0,
            #07090b 460px
        );

    background-attachment: fixed;
}


/* =========================================================
   HEADER
   ========================================================= */

[data-theme="roztrp"] .app-header {
    border-bottom:
        1px solid
        #24282b;
}


/* Small orange identity line */

[data-theme="roztrp"] .app-header::after {
    content: "";

    display: block;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 25%,
            #c85b22 43%,
            #c85b22 57%,
            transparent 75%,
            transparent 100%
        );

    opacity: 0.85;
}


/* =========================================================
   BRAND
   ========================================================= */

[data-theme="roztrp"] .brand {
    color: #f3f0e8;

    font-size: 21px;
    font-weight: 830;

    letter-spacing: -0.035em;
}


/* Tiny orange signature on the brand */

[data-theme="roztrp"] .brand::after {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-left: 6px;

    border-radius: 50%;

    background: #c85b22;

    vertical-align: middle;
}


/* =========================================================
   HEADINGS
   ========================================================= */

[data-theme="roztrp"] .page-heading h1 {
    color: #f5f1e8;
}


[data-theme="roztrp"] .page-heading p {
    color: #989792;
}


/* =========================================================
   CARDS
   ========================================================= */

[data-theme="roztrp"] .session-card,
[data-theme="roztrp"] .trainer-session-card,
[data-theme="roztrp"] .detail-card,
[data-theme="roztrp"] .form-card,
[data-theme="roztrp"] .trainer-detail-card,
[data-theme="roztrp"] .participant-list,
[data-theme="roztrp"] .confirm-card,
[data-theme="roztrp"] .login-card {

    background:
        linear-gradient(
            145deg,
            #111519,
            #0c0f12
        );

    border-color: #292d30;
}


/* Very slight orange cue on interactive training cards */

[data-theme="roztrp"]
.trainer-session-link:hover
.trainer-session-card {

    border-color: #684126;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.28);
}


/* =========================================================
   TRAINING TIME
   ========================================================= */

[data-theme="roztrp"] .session-time {
    color: #f7f3eb;

    font-size: 22px;
    font-weight: 800;

    letter-spacing: -0.035em;
}


/* =========================================================
   TRAINER STATS
   ========================================================= */

[data-theme="roztrp"] .trainer-stat {
    background: #111519;

    border-color: #272c2f;
}


[data-theme="roztrp"] .trainer-stat strong {
    color: #f1eee6;

    font-weight: 760;
}


/*
Only a tiny detail in orange:
the central stat value.
*/

[data-theme="roztrp"]
.trainer-stat:nth-child(2) strong {
    color: #d5662d;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

[data-theme="roztrp"] .primary-button {
    box-shadow:
        0 3px 10px
        rgba(200, 91, 34, 0.17);
}


[data-theme="roztrp"] .primary-button:hover {
    box-shadow:
        0 5px 16px
        rgba(200, 91, 34, 0.25);
}


/* =========================================================
   SECONDARY BUTTONS
   ========================================================= */

[data-theme="roztrp"] .secondary-button {
    color: #e5e1d8;
}


[data-theme="roztrp"] .secondary-button:hover {
    border-color: #595b5c;
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

[data-theme="roztrp"] .form-input,
[data-theme="roztrp"] .form-field input,
[data-theme="roztrp"] textarea,
[data-theme="roztrp"] select {

    color-scheme: dark;
}


[data-theme="roztrp"] .form-input:focus,
[data-theme="roztrp"] .form-field input:focus {

    border-color: #c85b22;
}


/* =========================================================
   VIEW SWITCH
   ========================================================= */

[data-theme="roztrp"] .view-switch {
    border:
        1px solid
        #25292c;
}


[data-theme="roztrp"] .view-switch-item.active {
    background: #f2eee5;
    color: #121416;

    font-weight: 750;
}


/* Tiny orange marker below selected tab */

[data-theme="roztrp"] .view-switch-item.active::after {
    content: "";

    width: 5px;
    height: 5px;

    margin-left: 7px;

    border-radius: 50%;

    background: #c85b22;
}


/* =========================================================
   STATUS
   ========================================================= */

[data-theme="roztrp"] .status {
    border:
        1px solid
        rgba(255, 255, 255, 0.055);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.025em;

    text-transform: uppercase;
}


/* =========================================================
   LINKS
   ========================================================= */

[data-theme="roztrp"] .back-link,
[data-theme="roztrp"] .payment-action-button {
    color: #d66c34;
}


/* =========================================================
   LOGOUT
   ========================================================= */

[data-theme="roztrp"] .logout-button:hover {
    color: #f0ede5;
}


/* =========================================================
   THEME SELECTOR
   ========================================================= */

[data-theme="roztrp"] .theme-picker-select {
    background: #0c0f11;

    border-color: #35393c;

    color: #e7e3da;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

[data-theme="roztrp"] .empty-state {
    background: #0c0f12;

    border-color: #363a3d;

    color: #8f8f8b;
}


/* =========================================================
   SPECIAL PANELS
   ========================================================= */

[data-theme="roztrp"] .trainer-edit-highlight {
    background: #12171b;
}


/* =========================================================
   UNASSIGNED
   ========================================================= */

[data-theme="roztrp"] .trainer-session-unassigned {
    border-left-color: #a97029;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 649px) {

    [data-theme="roztrp"] .page {
        padding-left: 12px;
        padding-right: 12px;
    }

}

/* =========================================================
   ROZTRP – PARTICIPANT CARDS
   ========================================================= */

[data-theme="roztrp"]
.participant-session-registered {
    border-color: #b95522;

    box-shadow:
        0 0 0 1px rgba(200, 91, 34, 0.10),
        0 8px 24px rgba(0, 0, 0, 0.24);
}

[data-theme="roztrp"]
.participant-session-registered::before {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 0;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #d4672e 22%,
            #d4672e 78%,
            transparent
        );
}

[data-theme="roztrp"]
.participant-session-date {
    color: #ded8cc;
}

[data-theme="roztrp"]
.participant-session-time {
    color: #f7f3eb;
}

[data-theme="roztrp"]
.participant-session-location {
    color: #f0ece3;
}

[data-theme="roztrp"]
.participant-session-count-value {
    color: #f6f1e7;
}

[data-theme="roztrp"]
.participant-session-count-value span {
    color: #777a7b;
}

[data-theme="roztrp"]
.participant-session-registered
.participant-session-count-value {
    color: #d46830;
}

[data-theme="roztrp"]
.participant-registration-dot {
    background: #d46830;

    box-shadow:
        0 0 0 3px
        rgba(212, 104, 48, 0.10);
}

[data-theme="roztrp"]
.participant-session-when,
[data-theme="roztrp"]
.participant-session-count-block,
[data-theme="roztrp"]
.participant-session-action-zone {
    border-color: #24292c;
}

[data-theme="roztrp"]
.participant-session-cancelled {
    opacity: 0.62;

    border-color: #55352e;

    background:
        linear-gradient(
            145deg,
            #111315,
            #0c0d0f
        );

    box-shadow: none;
}

[data-theme="roztrp"]
.participant-cancelled-mark,
[data-theme="roztrp"]
.participant-cancelled-state strong {
    color: #ba7868;
}

/* =========================================================
   ROZTRP – TRAINER OVERVIEW
   ========================================================= */

[data-theme="roztrp"]
.trainer-overview-card {
    background:
        linear-gradient(
            145deg,
            #111519,
            #0c0f12
        );

    border-color: #292d30;
}


[data-theme="roztrp"]
.trainer-overview-date {
    color: #ded8cc;
}


[data-theme="roztrp"]
.trainer-overview-time {
    color: #f7f3eb;
}


[data-theme="roztrp"]
.trainer-overview-location {
    color: #f0ece3;
}


[data-theme="roztrp"]
.trainer-overview-count-value {
    color: #d46830;
}


[data-theme="roztrp"]
.trainer-overview-count-value span {
    color: #777a7b;
}


[data-theme="roztrp"]
.trainer-overview-when,
[data-theme="roztrp"]
.trainer-overview-stats {
    border-color: #24292c;
}


[data-theme="roztrp"]
.trainer-session-link:hover
.trainer-overview-card {
    border-color: #684126;
}


[data-theme="roztrp"]
.trainer-overview-unassigned {
    border-color: #66502c;
}


[data-theme="roztrp"]
.trainer-overview-attention-dot {
    background: #c78a30;

    box-shadow:
        0 0 0 3px
        rgba(199, 138, 48, 0.09);
}


[data-theme="roztrp"]
.trainer-overview-cancelled {
    opacity: 0.62;

    border-color: #55352e;

    background:
        linear-gradient(
            145deg,
            #111315,
            #0c0d0f
        );

    box-shadow: none;
}


[data-theme="roztrp"]
.trainer-overview-cancelled-mark {
    color: #ba7868;
}

/* =========================================================
   ROZTRP – TRAINER DETAIL
   ========================================================= */

[data-theme="roztrp"]
.trainer-detail-shell {
    background:
        linear-gradient(
            145deg,
            #111519,
            #0c0f12
        );

    border-color: #292d30;
}


[data-theme="roztrp"]
.trainer-detail-participants,
[data-theme="roztrp"]
.trainer-detail-participant-list,
[data-theme="roztrp"]
.trainer-detail-participant-row,
[data-theme="roztrp"]
.trainer-detail-danger-footer {
    border-color: #24292c;
}


[data-theme="roztrp"]
.trainer-detail-field-label {
    color: #817f79;
}