/* ===== CSS Variables ===== */
:root {
    --sidebar-width: 260px;
    /* The shared top bar's height. It was 64 when this shell had a bar of its
       own; it renders the same 45px bar as the staff shell now. */
    --navbar-height: 45px;
    --content-gap: 1rem;
    /* Sidebar lettering. These defaults suit a DARK sidebar, which is what six
       of the eight themes have and what the starter project assumed
       throughout. A theme with a light sidebar must override all five, and the
       two that do are marked below.

       This exists because they were hard-coded white in adminlayout.css. On
       the Elbe theme, whose sidebar is white, that made the whole admin menu
       white-on-white -- present, focusable, and completely invisible. */
    --theme-sidebar-text: #ffffff;
    --theme-sidebar-text-muted: rgba(255, 255, 255, 0.7);
    --theme-sidebar-heading: rgba(255, 255, 255, 0.4);
    --theme-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --theme-sidebar-active-bg: rgba(255, 255, 255, 0.2);
}

/* ===== The Elbe palette, one set per theme ==================================

   These eleven names are read 278 times across elbe-look.css and dialogs.css --
   the brass, the hairline, the muted ink, the four semantic colours. They used
   to be written once, in elbe-look.css, as the ivory theme's values. That made
   them right on one theme of eight and wrong on the rest, and the wrongness was
   patched by hand, one rule at a time.

   Declaring them per theme instead means changing a theme is changing this
   file. Nothing downstream has to know which theme is on.

   The pairs to keep straight:

     --elbe-brass        a FILL: buttons, rules, borders. May be any strength.
     --elbe-brass-text   the same idea as TEXT, so it must carry 4.5:1 on that
                         theme's card. On ivory those are two different values
                         (#FFC200 fills, #8A6A00 letters); on a dark theme they
                         are usually the same bright hue.
     --elbe-ivory-dim    muted lettering -- held at 7:1, not the 4.5 minimum,
                         because it is what tables and captions are set in.
     --elbe-felt/wine/
       sky/violet        the four semantic colours as FILLS. The same hue on
                         every theme -- a green badge is green everywhere.
     --elbe-*-text       and as LETTERING, which is not the same value: deep
                         on a light theme, lifted on a dark one.

   The default below is the ivory theme's, so anything rendered without a theme
   class still looks like the school. */

:root {
    --elbe-brass: #FFC200;
    --elbe-brass-text: #8A6A00;   /* brass as TEXT on white: 5.1:1 */
    --elbe-eyebrow: #B58900;      /* the original's eyebrow colour: 4.6:1 */
    --elbe-ivory-dim: #5E584C;    /* muted text on white: 7.1:1 */
    --elbe-line: rgba(28, 22, 8, 0.12);

    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;

    /* The same four as lettering. Measured on #FFFFFF. */
    --elbe-felt-text: #14663A;    /* 6.3:1 */
    --elbe-wine-text: #9B2A1D;    /* 6.1:1 */
    --elbe-sky-text: #1F5C86;     /* 6.2:1 */
    --elbe-violet-text: #6B2F94;  /* 6.6:1 */

    --elbe-shadow: 0 14px 34px -16px rgba(120, 86, 10, 0.28);
}

/* ===== Theme: Elbe (default) — warm ivory board light, brass accents =====
   Contrast measured against this theme's own surfaces:
     text #1C1814 on page #F5F1E7 ....... 14.9:1
     text #1C1814 on card  #FFFFFF ...... 16.4:1
     muted #5E584C on card #FFFFFF ...... 7.1:1
     accent-text #8A6A00 on card #FFFFFF  5.1:1  <- gold used as TEXT
   Raw brass #FFC200 is 1.6:1 on white and is therefore used only for fills,
   borders and rules — never for text on a light surface. */
.theme-elbe {
    --bs-body-bg: #F5F1E7;
    --bs-body-color: #1C1814;
    --theme-sidebar-bg: #FFFFFF;
    --theme-accent: #8A6A00;
    --theme-accent-light: #B8890A;
    --theme-brass: #FFC200;
    --theme-border: rgba(28,22,8,0.12);
    --theme-text: #1C1814;
    --theme-text-muted: #5E584C;
    --bs-tertiary-bg: #F1E9D4;
    --theme-card-bg: #FFFFFF;
    --theme-hover-bg: rgba(28,22,8,0.05);
    --theme-active-bg: rgba(255,194,0,0.18);
    --theme-input-bg: #FFFFFF;
    /* Light sidebar, so the lettering has to be dark. Measured on #FFFFFF:
         text    #1C1814 ... 16.4:1
         muted   #5E584C .... 7.1:1
         heading #6B6353 .... 5.6:1 */
    --theme-sidebar-text: #1C1814;
    --theme-sidebar-text-muted: #5E584C;
    --theme-sidebar-heading: #6B6353;
    --theme-sidebar-hover-bg: rgba(28,22,8,0.05);
    --theme-sidebar-active-bg: rgba(255,194,0,0.18);
    --theme-input-border: rgba(28,22,8,0.22);
    --theme-navbar-text: #1C1814;
    /* The school's own, and the default above -- named again so the theme
       reads whole. */
    --elbe-brass: #FFC200;
    --elbe-brass-text: #7E6000;   /* 5.9:1 on a card and 4.9:1 on a 15% wash of
                                    itself, which is what a tag puts behind it.
                                    #8A6A00 was 4.19:1 on that wash. */
    --elbe-eyebrow: #7E6000;    /* 5.2:1 on the page, 5.9:1 on a card.
                                   #B58900 was 2.85:1 on the page, and the
                                   eyebrow sits on the page, not on a card. */
    --elbe-ivory-dim: #5E584C;
    --elbe-line: rgba(28, 22, 8, 0.12);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;

    /* The same four as lettering. Measured on #FFFFFF. */
    --elbe-felt-text: #14663A;    /* 6.3:1 */
    --elbe-wine-text: #9B2A1D;    /* 6.1:1 */
    --elbe-sky-text: #1F5C86;     /* 6.2:1 */
    --elbe-violet-text: #6B2F94;  /* 6.6:1 */
    --elbe-shadow: 0 14px 34px -16px rgba(120, 86, 10, 0.28);

    /* Lettering on the accent fill: white on #8A6A00 .... 4.6:1 */
    --theme-on-accent: #FFFFFF;   /* on --theme-accent: 5.1:1 */

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #1C1814 on this theme's fill .... 10.9:1 */
    --theme-on-brass: #1C1814;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #FFFFFF .... 5.1:1 */
    --theme-on-accent-fill: #FFFFFF;
}

/* ===== Theme: Brass — dark board wood, brass accents =====
     text #F3EDDB on page #1C1814 ....... 15.0:1
     muted #9A9384 on card #241F19 ...... 5.9:1
     accent #FFC200 on card #241F19 ..... 10.4:1 */
.theme-brass {
    --bs-body-bg: #1C1814;
    --bs-body-color: #F3EDDB;
    --theme-sidebar-bg: #241F19;
    --theme-accent: #FFC200;
    --theme-accent-light: #FFD24D;
    --theme-brass: #FFC200;
    --theme-border: rgba(255,194,0,0.16);
    --theme-text: #F3EDDB;
    --theme-text-muted: #9A9384;
    --bs-tertiary-bg: #2E2820;
    --theme-card-bg: #241F19;
    --theme-hover-bg: rgba(255,194,0,0.08);
    --theme-active-bg: rgba(255,194,0,0.16);
    --theme-input-bg: #2E2820;
    --theme-input-border: rgba(255,194,0,0.22);
    --theme-navbar-text: #F3EDDB;
    /* Same brass, but it is the lettering colour here as well as the fill --
       #8A6A00 is 1.9:1 on this card. Measured on #241F19. */
    --elbe-brass: #FFC200;
    --elbe-brass-text: #FFC200;   /* 10.4:1 */
    --elbe-eyebrow: #FFD24D;      /* 11.4:1 */
    --elbe-ivory-dim: #B8B0A0;    /*  7.4:1 */
    --elbe-line: rgba(255, 194, 0, 0.16);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;
    --elbe-felt-text: #6BD79B;    /*  8.5:1 */
    --elbe-wine-text: #F58B7C;    /*  7.2:1 */
    --elbe-sky-text: #79BDE8;     /*  7.8:1 */
    --elbe-violet-text: #C99BEA;  /*  7.6:1 */
    --elbe-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.60);

    /* Lettering on the accent fill: ink on #FFC200 ..... 10.9:1 (white would be 1.6:1) */
    --theme-on-accent: #1C1814;   /* on --theme-accent: 10.9:1 */

    /* The sidebar is this theme's card colour, so what reads on a card
       reads here. Written out per theme rather than inherited, which is how
       every other value in this file is kept. */
    --theme-sidebar-text: #F3EDDB;
    --theme-sidebar-text-muted: #9A9384;
    --theme-sidebar-heading: #9A9384;
    --theme-sidebar-hover-bg: rgba(255,194,0,0.08);
    --theme-sidebar-active-bg: rgba(255,194,0,0.16);

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #1C1814 on this theme's fill .... 10.9:1 */
    --theme-on-brass: #1C1814;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #1C1814 .... 10.9:1 */
    --theme-on-accent-fill: #1C1814;
}

/* ===== Theme: Dark (default) ===== */
.theme-dark {
    --bs-body-bg: #1a1a2e;
    --bs-body-color: #e2e8f0;
    --theme-sidebar-bg: #16213e;
    --theme-accent: #e8b645;
    --theme-accent-light: #f0c040;
    --theme-border: rgba(255,255,255,0.08);
    --theme-text: #e2e8f0;
    --theme-text-muted: #94a3b8;
    --bs-tertiary-bg: #1e293b;
    --theme-card-bg: #16213e;
    --theme-hover-bg: rgba(255,255,255,0.08);
    --theme-active-bg: rgba(255,255,255,0.12);
    --theme-input-bg: #1e293b;
    --theme-input-border: rgba(255,255,255,0.15);
    --theme-navbar-text: #e2e8f0;
    /* Measured on #16213e. */
    --elbe-brass: #e8b645;
    --elbe-brass-text: #e8b645;   /* 7.9:1 */
    --elbe-eyebrow: #f0c040;      /* 8.6:1 */
    --elbe-ivory-dim: #AEB9C9;    /* 7.6:1 */
    --elbe-line: rgba(255, 255, 255, 0.10);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;

    /* The same four as lettering. Measured on #FFFFFF. */
    --elbe-felt-text: #14663A;    /* 6.3:1 */
    --elbe-wine-text: #9B2A1D;    /* 6.1:1 */
    --elbe-sky-text: #1F5C86;     /* 6.2:1 */
    --elbe-violet-text: #6B2F94;  /* 6.6:1 */
    --elbe-felt-text: #6BD79B;
    --elbe-wine-text: #F58B7C;
    --elbe-sky-text: #79BDE8;
    --elbe-violet-text: #C99BEA;
    --elbe-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.60);

    /* Lettering on the accent fill: ink on #e8b645 ..... 10.2:1 */
    --theme-on-accent: #1C1814;   /* on --theme-accent: 9.4:1 */

    /* The sidebar is this theme's card colour, so what reads on a card
       reads here. Written out per theme rather than inherited, which is how
       every other value in this file is kept. */
    --theme-sidebar-text: #e2e8f0;
    --theme-sidebar-text-muted: #94a3b8;
    --theme-sidebar-heading: #94a3b8;
    --theme-sidebar-hover-bg: rgba(255,255,255,0.08);
    --theme-sidebar-active-bg: rgba(255,255,255,0.12);

    /* The accent again, under the name the shared rules use. */
    --theme-brass: #e8b645;

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #1C1814 on this theme's fill .... 9.4:1 */
    --theme-on-brass: #1C1814;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #1C1814 .... 9.4:1 */
    --theme-on-accent-fill: #1C1814;
}

/* ===== Theme: Midnight ===== */
.theme-midnight {
    --bs-body-bg: #0f0f1a;
    --bs-body-color: #d4d4e8;
    --theme-sidebar-bg: #1a1a2e;
    --theme-accent: #9B6BF5;   /* 4.7:1 on the card. #7c3aed was 2.99:1,
                                  and this value is read as lettering. */
    --theme-accent-light: #8b5cf6;
    --theme-border: rgba(124,58,237,0.15);
    --theme-text: #d4d4e8;
    --theme-text-muted: #8888a8;
    --bs-tertiary-bg: #1e1e32;
    --theme-card-bg: #1a1a2e;
    --theme-hover-bg: rgba(124,58,237,0.08);
    --theme-active-bg: rgba(124,58,237,0.15);
    --theme-input-bg: #1e1e32;
    --theme-input-border: rgba(124,58,237,0.2);
    --theme-navbar-text: #d4d4e8;
    /* The theme's violet is a fill here: #7c3aed is 2.4:1 on #1a1a2e, so the
       lettering takes a lifted one. */
    --elbe-brass: #7c3aed;
    --elbe-brass-text: #A78BFA;   /* 6.2:1 */
    --elbe-eyebrow: #B9A3FC;      /* 7.6:1 */
    --elbe-ivory-dim: #A6A6C4;    /* 7.5:1 */
    --elbe-line: rgba(124, 58, 237, 0.20);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;

    /* The same four as lettering. Measured on #FFFFFF. */
    --elbe-felt-text: #14663A;    /* 6.3:1 */
    --elbe-wine-text: #9B2A1D;    /* 6.1:1 */
    --elbe-sky-text: #1F5C86;     /* 6.2:1 */
    --elbe-violet-text: #6B2F94;  /* 6.6:1 */
    --elbe-felt-text: #6BD79B;
    --elbe-wine-text: #F58B7C;
    --elbe-sky-text: #79BDE8;
    --elbe-violet-text: #C99BEA;
    --elbe-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.65);

    /* Lettering on the accent fill: white on #7c3aed ... 5.6:1 */
    --theme-on-accent: #1C1814;   /* on --theme-accent: 4.9:1 */

    /* The sidebar is this theme's card colour, so what reads on a card
       reads here. Written out per theme rather than inherited, which is how
       every other value in this file is kept. */
    --theme-sidebar-text: #d4d4e8;
    --theme-sidebar-text-muted: #8888a8;
    --theme-sidebar-heading: #8888a8;
    --theme-sidebar-hover-bg: rgba(124,58,237,0.08);
    --theme-sidebar-active-bg: rgba(124,58,237,0.15);

    /* The accent again, under the name the shared rules use. */
    --theme-brass: #7c3aed;

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #FFFFFF on this theme's fill .... 5.7:1 */
    --theme-on-brass: #FFFFFF;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #1C1814 .... 6.5:1 */
    --theme-on-accent-fill: #1C1814;
}

/* ===== Theme: Ocean ===== */
.theme-ocean {
    --bs-body-bg: #0a192f;
    --bs-body-color: #ccd6f6;
    --theme-sidebar-bg: #112240;
    --theme-accent: #64ffda;
    --theme-accent-light: #7afde2;
    --theme-border: rgba(100,255,218,0.1);
    --theme-text: #ccd6f6;
    --theme-text-muted: #8892b0;
    --bs-tertiary-bg: #172a45;
    --theme-card-bg: #112240;
    --theme-hover-bg: rgba(100,255,218,0.05);
    --theme-active-bg: rgba(100,255,218,0.1);
    --theme-input-bg: #172a45;
    --theme-input-border: rgba(100,255,218,0.15);
    --theme-navbar-text: #ccd6f6;
    /* Measured on #112240. */
    --elbe-brass: #64ffda;
    --elbe-brass-text: #64ffda;   /* 12.3:1 */
    --elbe-eyebrow: #7afde2;      /* 12.6:1 */
    --elbe-ivory-dim: #A3AFC8;    /* 7.4:1 */
    --elbe-line: rgba(100, 255, 218, 0.14);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;

    /* The same four as lettering. Measured on #FFFFFF. */
    --elbe-felt-text: #14663A;    /* 6.3:1 */
    --elbe-wine-text: #9B2A1D;    /* 6.1:1 */
    --elbe-sky-text: #1F5C86;     /* 6.2:1 */
    --elbe-violet-text: #6B2F94;  /* 6.6:1 */
    --elbe-felt-text: #6BD79B;
    --elbe-wine-text: #F58B7C;
    --elbe-sky-text: #79BDE8;
    --elbe-violet-text: #C99BEA;
    --elbe-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.65);

    /* Lettering on the accent fill: ink on #64ffda ..... 14.7:1 */
    --theme-on-accent: #1C1814;   /* on --theme-accent: 14.2:1 */

    /* The sidebar is this theme's card colour, so what reads on a card
       reads here. Written out per theme rather than inherited, which is how
       every other value in this file is kept. */
    --theme-sidebar-text: #ccd6f6;
    --theme-sidebar-text-muted: #8892b0;
    --theme-sidebar-heading: #8892b0;
    --theme-sidebar-hover-bg: rgba(100,255,218,0.05);
    --theme-sidebar-active-bg: rgba(100,255,218,0.1);

    /* The accent again, under the name the shared rules use. */
    --theme-brass: #64ffda;

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #1C1814 on this theme's fill .... 14.2:1 */
    --theme-on-brass: #1C1814;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #1C1814 .... 14.2:1 */
    --theme-on-accent-fill: #1C1814;
}

/* ===== Theme: Forest ===== */
.theme-forest {
    --bs-body-bg: #1a2e1a;
    --bs-body-color: #d4e8d4;
    --theme-sidebar-bg: #0d1f0d;
    --theme-accent: #4ade80;
    --theme-accent-light: #6ee7a0;
    --theme-border: rgba(74,222,128,0.12);
    --theme-text: #d4e8d4;
    --theme-text-muted: #88a888;
    --bs-tertiary-bg: #1e3a1e;
    --theme-card-bg: #0d1f0d;
    --theme-hover-bg: rgba(74,222,128,0.06);
    --theme-active-bg: rgba(74,222,128,0.12);
    --theme-input-bg: #1e3a1e;
    --theme-input-border: rgba(74,222,128,0.18);
    --theme-navbar-text: #d4e8d4;
    /* Measured on #0d1f0d. */
    --elbe-brass: #4ade80;
    --elbe-brass-text: #4ade80;   /* 9.9:1 */
    --elbe-eyebrow: #6ee7a0;      /* 11.4:1 */
    --elbe-ivory-dim: #A2BCA2;    /* 7.7:1 */
    --elbe-line: rgba(74, 222, 128, 0.16);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;

    /* The same four as lettering. Measured on #FFFFFF. */
    --elbe-felt-text: #14663A;    /* 6.3:1 */
    --elbe-wine-text: #9B2A1D;    /* 6.1:1 */
    --elbe-sky-text: #1F5C86;     /* 6.2:1 */
    --elbe-violet-text: #6B2F94;  /* 6.6:1 */
    --elbe-felt-text: #6BD79B;
    --elbe-wine-text: #F58B7C;
    --elbe-sky-text: #79BDE8;
    --elbe-violet-text: #C99BEA;
    --elbe-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.65);

    /* Lettering on the accent fill: ink on #4ade80 ..... 12.0:1 */
    --theme-on-accent: #1C1814;   /* on --theme-accent: 10.1:1 */

    /* The sidebar is this theme's card colour, so what reads on a card
       reads here. Written out per theme rather than inherited, which is how
       every other value in this file is kept. */
    --theme-sidebar-text: #d4e8d4;
    --theme-sidebar-text-muted: #88a888;
    --theme-sidebar-heading: #88a888;
    --theme-sidebar-hover-bg: rgba(74,222,128,0.06);
    --theme-sidebar-active-bg: rgba(74,222,128,0.12);

    /* The accent again, under the name the shared rules use. */
    --theme-brass: #4ade80;

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #1C1814 on this theme's fill .... 10.1:1 */
    --theme-on-brass: #1C1814;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #1C1814 .... 10.1:1 */
    --theme-on-accent-fill: #1C1814;
}

/* ===== Theme: Sunset ===== */
.theme-sunset {
    --bs-body-bg: #1f1020;
    --bs-body-color: #f0dde8;
    --theme-sidebar-bg: #2a1428;
    --theme-accent: #f97316;
    --theme-accent-light: #fb923c;
    --theme-border: rgba(249,115,22,0.12);
    --theme-text: #f0dde8;
    --theme-text-muted: #b88da0;
    --bs-tertiary-bg: #2e1a2c;
    --theme-card-bg: #2a1428;
    --theme-hover-bg: rgba(249,115,22,0.06);
    --theme-active-bg: rgba(249,115,22,0.12);
    --theme-input-bg: #2e1a2c;
    --theme-input-border: rgba(249,115,22,0.18);
    --theme-navbar-text: #f0dde8;
    /* #f97316 is 4.4:1 on #2a1428, just short, so the lettering takes the
       lighter one and the fill keeps the stronger. */
    --elbe-brass: #f97316;
    --elbe-brass-text: #FB923C;   /* 6.1:1 */
    --elbe-eyebrow: #FDBA74;      /* 8.6:1 */
    --elbe-ivory-dim: #C7A3B4;    /* 7.2:1 */
    --elbe-line: rgba(249, 115, 22, 0.18);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;

    /* The same four as lettering. Measured on #FFFFFF. */
    --elbe-felt-text: #14663A;    /* 6.3:1 */
    --elbe-wine-text: #9B2A1D;    /* 6.1:1 */
    --elbe-sky-text: #1F5C86;     /* 6.2:1 */
    --elbe-violet-text: #6B2F94;  /* 6.6:1 */
    --elbe-felt-text: #6BD79B;
    --elbe-wine-text: #F58B7C;
    --elbe-sky-text: #79BDE8;
    --elbe-violet-text: #C99BEA;
    --elbe-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.65);

    /* Lettering on the accent fill: ink on #f97316 ...... 7.4:1 */
    --theme-on-accent: #1C1814;   /* on --theme-accent: 6.3:1 */

    /* The sidebar is this theme's card colour, so what reads on a card
       reads here. Written out per theme rather than inherited, which is how
       every other value in this file is kept. */
    --theme-sidebar-text: #f0dde8;
    --theme-sidebar-text-muted: #b88da0;
    --theme-sidebar-heading: #b88da0;
    --theme-sidebar-hover-bg: rgba(249,115,22,0.06);
    --theme-sidebar-active-bg: rgba(249,115,22,0.12);

    /* The accent again, under the name the shared rules use. */
    --theme-brass: #f97316;

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #1C1814 on this theme's fill .... 6.3:1 */
    --theme-on-brass: #1C1814;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #1C1814 .... 7.8:1 */
    --theme-on-accent-fill: #1C1814;
}

/* ===== Theme: Blue Sky ==========================================

   Brought over from the `MyChessClub` solution, where it is the theme the site
   is actually set to and is called "My Preferred Theme". Its own file describes
   it as "Sarafi Default Blue": slate ground, slate cards, a bright blue accent.

   The page, card, sidebar and lettering colours are that theme's own, unchanged
   -- #0f172a, #1e293b, #334155, #f1f5f9, #94a3b8, #3b82f6, #60a5fa. What is
   added is everything this stylesheet asks of a theme that MyChessClub's has no
   equivalent for: the semantic four as fills and again as lettering, the muted
   ink held at 7:1, and the three separate answers to "what colour are the
   letters on the accent".

   One value is not carried across as-is, and it matters. #3b82f6 is a mid blue,
   and the primary button is a gradient running from lighter than the accent to
   darker than it. Measured across that gradient on #3b82f6: white is 2.8:1 at
   the light end and dark ink is 3.7:1 at the dark end -- neither colour of
   lettering is readable over the whole button. So the button and the accent
   lettering take this theme's own hover blue, #60a5fa, which carries dark ink
   at 5.2:1 to 8.5:1 right across it, and #3b82f6 stays as the fill for the
   rules, bars and borders, where nothing is written on top. The same split
   Sunset makes just above, for the same reason. */
.theme-blueskytemplate {
    --bs-body-bg: #0f172a;
    --bs-body-color: #f1f5f9;
    --theme-sidebar-bg: #1e293b;
    --theme-accent: #60a5fa;
    --theme-accent-light: #93c5fd;
    --theme-border: rgba(148,163,184,0.20);
    --theme-text: #f1f5f9;
    --theme-text-muted: #94a3b8;
    --bs-tertiary-bg: #334155;
    --theme-card-bg: #1e293b;
    --theme-hover-bg: rgba(96,165,250,0.08);
    --theme-active-bg: rgba(96,165,250,0.15);
    --theme-input-bg: #334155;
    --theme-input-border: rgba(148,163,184,0.25);
    --theme-navbar-text: #f1f5f9;
    /* Measured on #1e293b. #3b82f6 is 4.0:1 there -- short of the 4.5 this is
       read at -- so the lettering takes the lighter one and the fill keeps the
       stronger, as on Sunset. */
    --elbe-brass: #3b82f6;
    --elbe-brass-text: #60a5fa;   /* 5.8:1 */
    --elbe-eyebrow: #93c5fd;      /* 8.1:1 */
    --elbe-ivory-dim: #AEBBCC;    /* 7.5:1 */
    --elbe-line: rgba(148, 163, 184, 0.20);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;

    /* The same four as lettering. Measured on #FFFFFF. */
    --elbe-felt-text: #14663A;    /* 6.3:1 */
    --elbe-wine-text: #9B2A1D;    /* 6.1:1 */
    --elbe-sky-text: #1F5C86;     /* 6.2:1 */
    --elbe-violet-text: #6B2F94;  /* 6.6:1 */
    --elbe-felt-text: #6BD79B;
    --elbe-wine-text: #F58B7C;
    --elbe-sky-text: #79BDE8;
    --elbe-violet-text: #C99BEA;
    --elbe-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.65);

    /* Lettering on the accent fill: ink on #60a5fa ...... 6.9:1 */
    --theme-on-accent: #1C1814;   /* on --theme-accent: 6.9:1 */

    /* The sidebar is this theme's card colour, so what reads on a card
       reads here. Written out per theme rather than inherited, which is how
       every other value in this file is kept. */
    --theme-sidebar-text: #f1f5f9;
    --theme-sidebar-text-muted: #94a3b8;
    --theme-sidebar-heading: #94a3b8;
    --theme-sidebar-hover-bg: rgba(96,165,250,0.08);
    --theme-sidebar-active-bg: rgba(96,165,250,0.15);

    /* The accent again, under the name the shared rules use. This is the one
       the button gradient is built from, which is why it is the lifted blue
       and not #3b82f6 -- see the note above the theme. */
    --theme-brass: #60a5fa;

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #1C1814 on this theme's fill .... 6.9:1, and 8.5:1 / 5.2:1 at
       the light and dark ends of the button gradient. */
    --theme-on-brass: #1C1814;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #1C1814 .... 6.9:1 */
    --theme-on-accent-fill: #1C1814;
}

/* ===== Theme: Light ===== */
.theme-light {
    --bs-body-bg: #f5f5f5;
    --bs-body-color: #1a1a2e;
    --theme-sidebar-bg: #ffffff;
    --theme-accent: #2563eb;
    --theme-accent-light: #3b82f6;
    --theme-border: rgba(0,0,0,0.1);
    --theme-text: #1a1a2e;
    --theme-text-muted: #5B6878;   /* 5.2:1 on the page. #64748b was 4.36:1. */
    --bs-tertiary-bg: #e2e8f0;
    --theme-card-bg: #ffffff;
    --theme-hover-bg: rgba(0,0,0,0.04);
    --theme-active-bg: rgba(37,99,235,0.08);
    --theme-input-bg: #ffffff;
    --theme-input-border: rgba(0,0,0,0.2);
    --theme-navbar-text: #1a1a2e;
    /* Light sidebar here too. Measured on #ffffff:
         text    #1a1a2e ... 15.9:1
         muted   #4b5563 .... 7.6:1
         heading #64748b .... 4.8:1 */
    --theme-sidebar-text: #1a1a2e;
    --theme-sidebar-text-muted: #4b5563;
    /* 4.36:1 on the page as #64748b, which is under the line. */
    --theme-sidebar-heading: #5B6878;   /* 5.7:1 on white, 5.2:1 on the page */
    --theme-sidebar-hover-bg: rgba(0,0,0,0.04);
    --theme-sidebar-active-bg: rgba(37,99,235,0.10);
    /* A light theme, so these are the ivory values with the theme's blue in
       place of the brass. Measured on #ffffff. */
    --elbe-brass: #2563eb;
    --elbe-brass-text: #1D4ED8;   /* 6.3:1 */
    --elbe-eyebrow: #1D4ED8;
    --elbe-ivory-dim: #4B5563;    /* 7.6:1 */
    --elbe-line: rgba(0, 0, 0, 0.10);
    --elbe-felt: #1F9D57;
    --elbe-wine: #D63B2A;
    --elbe-sky: #2E86C1;
    --elbe-violet: #9A4DD0;
    --elbe-felt-text: #14663A;
    --elbe-wine-text: #9B2A1D;
    --elbe-sky-text: #1F5C86;
    --elbe-violet-text: #6B2F94;
    --elbe-shadow: 0 14px 34px -16px rgba(15, 23, 42, 0.28);

    /* Lettering on the accent fill: white on #2563eb .... 5.2:1 */
    --theme-on-accent: #FFFFFF;   /* on --theme-accent: 5.2:1 */

    /* The accent again, under the name the shared rules use. */
    --theme-brass: #2563eb;

    /* Lettering on the accent FILL, which is a different question from
       --theme-on-accent: the fill is --theme-brass, not --theme-accent.
       Measured: #FFFFFF on this theme's fill .... 5.2:1 */
    --theme-on-brass: #FFFFFF;

    /* Lettering on a tile filled with --elbe-brass-text -- the avatar
       in the top bar. That colour is the accent tuned to be READ on a
       card, so on a dark theme it is a bright one and white letters on
       it are invisible. Measured: #FFFFFF .... 6.7:1 */
    --theme-on-accent-fill: #FFFFFF;
}

[dir="rtl"] body {
    font-family: "Tahoma", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", Arial, sans-serif;
}

/* ===== Member Wrapper ===== */
.member-wrapper {
    min-height: 100vh;
    background: var(--bs-body-bg);
}

/* ===== Top Navbar ===== */
.member-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background: var(--theme-sidebar-bg);
    border-bottom: 1px solid var(--theme-border);
    z-index: 1030;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}


/* ===== The older variable names, derived ====================================

   adminlayout.css and the shell were written against a second set of names --
   --theme-text-primary where this file says --theme-text, and so on. They used
   to be a second set of VALUES too, in a second file, and the two disagreed.

   Here they are the same values under the older names. A rule may use either
   set and get the same colour, and a theme is still one block to edit.

   `[class*="theme-"]` rather than :root because a custom property that says
   `var(--theme-accent)` resolves against the element it is declared on -- on
   :root that would be the default palette, not the theme the body is wearing. */

[class*="theme-"] {
    --theme-bg-primary: var(--bs-body-bg);
    --theme-bg-secondary: var(--bs-tertiary-bg);
    --theme-accent-primary: var(--theme-accent);
    --theme-accent-secondary: var(--theme-accent-light);
    --theme-text-primary: var(--theme-text);
    --theme-text-secondary: var(--theme-text-muted);
    --theme-card-bg-solid: var(--theme-card-bg);
    --theme-card-border: var(--theme-border);
    --theme-card-hover: var(--theme-hover-bg);

    /* These four were stated per theme in the old file and are all the accent
       or the surfaces at a given strength, so they are mixed rather than
       written down. */
    --theme-sidebar-accent: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-light));
    --theme-table-header-bg: var(--bs-tertiary-bg);
    --theme-table-header-text: var(--theme-text);
    --theme-table-row-hover: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    --theme-glow: color-mix(in srgb, var(--theme-accent) 28%, transparent);
}

/* ===== Sidebar ===== */
.member-sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--theme-sidebar-bg);
    border-right: 1px solid var(--theme-border);
    overflow-y: auto;
    z-index: 1020;
    padding: 1rem 0;
}

[dir="rtl"] .member-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--theme-border);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0.5rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    color: var(--theme-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.sidebar-link:hover {
    background: var(--theme-hover-bg, rgba(255,255,255,0.08));
    color: var(--theme-text);
}

.sidebar-link.active {
    background: var(--theme-active-bg, rgba(255,255,255,0.12));
    color: var(--theme-accent);
}

.sidebar-link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* ===== Main Content ===== */
.member-main {
    margin-left: var(--sidebar-width);
    padding: var(--content-gap);
    min-height: calc(100vh - var(--navbar-height));

    /* No margin-top. The old .member-navbar was `position: fixed` and took no
       space in the flow, so the content underneath had to be pushed down by
       hand. The shared bar is `position: sticky`, which does occupy its place
       in the flow, and keeping the margin left a gap of exactly one bar
       height between the bar and the first thing below it. */
    margin-top: 0;
}

[dir="rtl"] .member-main {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

/* The student's pages take the room they are given.

   This carried `max-width: 1400px`, which on an ordinary 1920 window left 200
   pixels of the content area empty down the right-hand side of every one of the
   twenty-two student screens — a table of lessons stopping short with nothing
   beside it. The staff screens were never capped, so the two halves of the site
   did not even agree with each other.

   Anything that genuinely reads better narrow says so where it is drawn — the
   leaderboard keeps its list at 640px so a name and its score stay beside each
   other rather than at opposite ends of the room, and the board screens keep
   their own cap below. */
.member-content {
    width: 100%;
}

/* ===== Theme-aware Bootstrap overrides =====

   These used to hang off `.member-wrapper`, the box the member shell put round
   its whole page. Every signed-in role is framed by _Shell.cshtml now and the
   content sits in `.content-area`, so each rule names both: the wrapper is kept
   because the phone shell still draws one, and without `.content-area` a
   student's cards, inputs and tables would silently lose their theme colours
   the moment the desktop shells were merged. */
.member-wrapper .card,
.content-area .card {
    background: var(--theme-card-bg, var(--theme-sidebar-bg));
    color: var(--theme-text);
    border-color: var(--theme-border);
}

.member-wrapper .form-control,
.member-wrapper .form-select,
.content-area .form-control,
.content-area .form-select {
    background-color: var(--theme-input-bg, var(--bs-tertiary-bg));
    color: var(--theme-text);
    border-color: var(--theme-input-border, var(--theme-border));
}

.member-wrapper .form-control:focus,
.member-wrapper .form-select:focus,
.content-area .form-control:focus,
.content-area .form-select:focus {
    background-color: var(--theme-input-bg, var(--bs-tertiary-bg));
    color: var(--theme-text);
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--theme-accent), 0.15);
}

.member-wrapper .table,
.content-area .table {
    color: var(--theme-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--theme-hover-bg, rgba(255,255,255,0.03));
    --bs-table-hover-bg: var(--theme-hover-bg, rgba(255,255,255,0.05));
}

/* Navbar theme-aware text and buttons */
.navbar-theme-text {
    color: var(--theme-navbar-text, var(--theme-text)) !important;
}

.navbar-theme-btn {
    color: var(--theme-navbar-text, var(--theme-text));
    border-color: var(--theme-border);
    background: transparent;
}

.navbar-theme-btn:hover,
.navbar-theme-btn:focus {
    background: var(--theme-hover-bg);
    color: var(--theme-navbar-text, var(--theme-text));
    border-color: var(--theme-text-muted);
}

/* Notification dropdown */
.member-navbar .dropdown-menu,
.mobile-navbar .dropdown-menu {
    background: var(--theme-card-bg, var(--theme-sidebar-bg));
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.member-navbar .dropdown-menu .text-muted,
.mobile-navbar .dropdown-menu .text-muted {
    color: var(--theme-text-muted) !important;
}

/* Mobile bottom nav */
.mobile-bottomnav .dropdown-menu {
    background: var(--theme-card-bg, var(--theme-sidebar-bg));
    border-color: var(--theme-border);
    color: var(--theme-text);
}

/* ===== Theme Thumbnail Cards ===== */
.theme-card {
    cursor: pointer;
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s;
}

.theme-card:hover {
    transform: translateY(-2px);
    border-color: var(--theme-accent);
}

.theme-card.active {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 2px var(--theme-accent);
}

/*  The swatch. Every colour comes from the theme it is showing: the inner
    `.theme-swatch` carries `theme-ocean` and the rest follows. The class sits
    there rather than on `.theme-card` so the card's own border and its selected
    ring stay in the theme the reader is actually wearing.

    The markup therefore has no colours in it at all. */

.theme-preview {
    height: 82px;
    display: flex;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.theme-preview-sidebar {
    width: 26px;
    padding: 7px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--theme-sidebar-bg);
    border-inline-end: 1px solid var(--theme-border);
}

.theme-preview-sidebar-line {
    height: 4px;
    border-radius: 2px;
    background: var(--theme-sidebar-text-muted);
}

.theme-preview-sidebar-line.accent { background: var(--theme-accent); }

.theme-preview-content {
    flex: 1;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.theme-preview-content-line {
    height: 5px;
    width: 62%;
    border-radius: 3px;
    background: var(--theme-text);
    opacity: 0.85;
}

.theme-preview-content-block {
    flex: 1;
    border-radius: 5px;
    background: var(--theme-text);
    opacity: 0.14;
}

.theme-card-label {
    padding: 7px 9px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--theme-card-bg);
    color: var(--theme-text);
}


/* ===== Responsive ===== */
@media (max-width: 992px) {
    .member-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s;
    }

    [dir="rtl"] .member-sidebar {
        transform: translateX(100%);
    }

    .member-sidebar.show {
        transform: translateX(0);
    }

    .member-main {
        margin-left: 0;
    }

    [dir="rtl"] .member-main {
        margin-right: 0;
    }
}


/* ===== Composite surfaces ====================================

   The gradients, glows and washes the school's look is made of, written once
   and derived from the atoms each theme sets above.

   Before this they were spelled out as literals inside `elbe-look.css`, twice:
   once for Elbe and once for Pirinc. That is why the other six themes came out
   half-dressed -- a rule written `body.theme-elbe .sidebar, body.theme-brass
   .sidebar` simply does not fire on Okyanus, so Okyanus had no sidebar styling
   at all and fell back to the starter template's.

   Declared on `body` and on anything else carrying a theme class, never on
   `:root`. A `var(--theme-brass)` written on `:root` would resolve against
   `html`, where no theme applies, so every theme would get the same answer.

   The second half of that selector matters as much as the first. A custom
   property is resolved where it is declared and inherits as a finished value,
   so a composite worked out on `body` arrives at a descendant already mixed
   from the page's theme. The theme picker on Site settings puts a theme class
   on each card to make it preview itself, and every card came out in the
   page's colours until these re-derived there too. */
body,
[class*="theme-"] {
    /* The page's faint glows. The original's two, in the theme's own accent. */
    --theme-page-glow:
        radial-gradient(1100px 680px at 84% -12%,
            color-mix(in srgb, var(--theme-brass) 12%, transparent), transparent 56%),
        radial-gradient(820px 560px at -8% 6%,
            color-mix(in srgb, var(--theme-brass) 7%, transparent), transparent 54%);

    /* A card is a soft vertical fall, not a flat box. */
    --theme-card-grad: linear-gradient(180deg,
        var(--theme-card-bg),
        color-mix(in srgb, var(--theme-card-bg) 88%, var(--bs-body-bg)));

    /* The sidebar lifts slightly at the top and settles into the page. */
    --theme-sidebar-grad: linear-gradient(180deg,
        color-mix(in srgb, var(--theme-sidebar-bg) 93%, var(--theme-brass)) 0%,
        var(--bs-body-bg) 58%);

    /* The lit menu entry: a wash left to right, fading out. */
    --theme-nav-active-grad: linear-gradient(90deg,
        var(--theme-sidebar-active-bg), transparent);

    /* The primary button, the most recognisable single element. */
    --theme-accent-grad: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-brass) 80%, white) 0%,
        var(--theme-brass) 52%,
        color-mix(in srgb, var(--theme-brass) 86%, black) 100%);

    --theme-accent-grad-hover: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-brass) 66%, white) 0%,
        color-mix(in srgb, var(--theme-brass) 94%, white) 52%,
        var(--theme-brass) 100%);

    /* Washes of the accent, at the four strengths the chrome asks for. */
    --theme-wash-06: color-mix(in srgb, var(--theme-brass) 6%, transparent);
    --theme-wash-10: color-mix(in srgb, var(--theme-brass) 10%, transparent);
    --theme-wash-16: color-mix(in srgb, var(--theme-brass) 16%, transparent);
    --theme-wash-22: color-mix(in srgb, var(--theme-brass) 22%, transparent);
}

/* YakutSoft "About Us" popup — the fixed navy spotlight card brought over
   from MyChessClub, identical in every theme. The two-class selector outranks
   any generic .swal2-popup theming. Text #f1f5fb on #131f33 is ~14:1; the
   muted lines (#8b98b3, #93a0b8) sit near 5:1 on the same navy. */
.swal2-popup.about-yakutsoft-swal {
    background: #131f33 !important;
    color: #eef3fa !important;
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 14px;
}

.swal2-popup.about-yakutsoft-swal .swal2-html-container {
    color: #eef3fa !important;
}

/*  The About card had a round ghost ✕ of its own — a faint slate circle on the
    navy, warming to ruby. It is the site's own button now: `.swal2-close` in
    dialogs.css, one look in every popup on every screen (Kamal, 2026-08-31).
    Its pale face reads on this navy at 7.9:1, better than the ghost did, and
    the card keeps everything else that is its own. */