/* LMT SBR Tracker — theme derived from LMT Technology Solutions brand mark
   Navy: #2C3F6C | Terracotta: #AD4C3B | Slate: #4A5563 */

:root {
    --lmt-navy: #2c3f6c;
    --lmt-navy-dark: #1f2d4f;
    --lmt-navy-light: #3d5590;
    --lmt-terracotta: #ad4c3b;
    --lmt-terracotta-dark: #8f3c2e;
    --lmt-terracotta-light: #c96a58;
    --lmt-slate: #4a5563;
    --lmt-slate-light: #6b7684;
    --lmt-bg: #f4f5f8;
    --lmt-card: #ffffff;
    --lmt-border: #e1e4ea;
    --lmt-text: #202634;
    --lmt-text-muted: #6b7684;
    --lmt-sidebar-bg: #2c3f6c;
    --lmt-input-bg: #ffffff;
    --lmt-surface-alt: #f0f2f6;
    --lmt-shadow: rgba(20,30,60,0.04);
    --lmt-shadow-hover: rgba(20,30,60,0.08);

    --status-past-due: #ad4c3b;
    --status-upcoming: #c98a2e;
    --status-ok: #2f8f5b;
    --status-na: #6b7684;

    /* To-do list owner/date chips: a bit more saturated than the shared
       .badge-status-* pastels so they read as a chip rather than fading
       into the card background. */
    --todo-badge-cadence-bg: #dbe2f1;
    --todo-badge-past-due-bg: #f5d2ca;
    --todo-badge-upcoming-bg: #f8dfa6;
    --todo-badge-ok-bg: #c7e9d7;
    --lmt-terracotta-tint: rgba(173, 76, 59, 0.10);
    /* Filled red buttons. Follows the theme's red, except dark mode, which
       lightens --lmt-terracotta for text contrast but keeps buttons the
       same red as light mode (white text needs the darker shade). */
    --lmt-btn-red: var(--lmt-terracotta);
    --lmt-btn-red-hover: var(--lmt-terracotta-dark);
}

:root[data-theme="dark"] {
    --lmt-navy: #8aa0d6;
    --lmt-navy-dark: #eef1f7;
    --lmt-navy-light: #6b86c2;
    --lmt-terracotta: #e0806c;
    --lmt-terracotta-dark: #eb9a89;
    --lmt-terracotta-light: #eb9a89;
    --lmt-slate: #a8b0c0;
    --lmt-slate-light: #8b93a7;
    --lmt-bg: #14171f;
    --lmt-card: #1c2130;
    --lmt-border: #333c4f;
    --lmt-text: #dde1ea;
    --lmt-text-muted: #8b93a7;
    --lmt-sidebar-bg: #1a2036;
    --lmt-input-bg: #232939;
    --lmt-surface-alt: #232939;
    --lmt-shadow: rgba(0,0,0,0.3);
    --lmt-shadow-hover: rgba(0,0,0,0.45);

    --todo-badge-cadence-bg: #313c5c;
    --todo-badge-past-due-bg: #4a2c27;
    --todo-badge-upcoming-bg: #473a1f;
    --todo-badge-ok-bg: #1f3d30;
    --lmt-terracotta-tint: rgba(224, 128, 108, 0.16);
    --lmt-btn-red: #ad4c3b;
    --lmt-btn-red-hover: #8f3c2e;
}

/* Easter egg theme, only ever set explicitly from /themes - never applied
   from a system preference, so it isn't listed in the prefers-color-scheme
   block below (which is excluded from matching it, same as it already
   excludes an explicit "light" choice). */
:root[data-theme="halloween"] {
    --lmt-navy: #a771d1;
    --lmt-navy-dark: #ffb04d;
    --lmt-navy-light: #c79ae6;
    --lmt-terracotta: #ff7518;
    --lmt-terracotta-dark: #d9600a;
    --lmt-terracotta-light: #ffa057;
    --lmt-slate: #a18fae;
    --lmt-slate-light: #cbb8d6;
    --lmt-bg: #120a16;
    --lmt-card: #1e1322;
    --lmt-border: #3d2a47;
    --lmt-text: #ece3ea;
    --lmt-text-muted: #ab98b6;
    --lmt-sidebar-bg: #0a0510;
    --lmt-input-bg: #241728;
    --lmt-surface-alt: #2a1a30;
    --lmt-shadow: rgba(0,0,0,0.5);
    --lmt-shadow-hover: rgba(0,0,0,0.65);

    --todo-badge-cadence-bg: #3a2a52;
    --todo-badge-past-due-bg: #4a2318;
    --todo-badge-upcoming-bg: #4a3414;
    --todo-badge-ok-bg: #1d3a26;
    --lmt-terracotta-tint: rgba(255, 117, 24, 0.18);
}

/* Easter egg theme: cozy pine green + red/gold, dark like Halloween above. */
:root[data-theme="christmas"] {
    --lmt-navy: #3fa06b;
    --lmt-navy-dark: #ffd966;
    --lmt-navy-light: #5fc088;
    --lmt-terracotta: #d42426;
    --lmt-terracotta-dark: #a81d1f;
    --lmt-terracotta-light: #e8676a;
    --lmt-slate: #9fb0a3;
    --lmt-slate-light: #c3d1c6;
    --lmt-bg: #0d1a12;
    --lmt-card: #142a1c;
    --lmt-border: #2a4733;
    --lmt-text: #e9f2ec;
    --lmt-text-muted: #9fb0a3;
    --lmt-sidebar-bg: #081209;
    --lmt-input-bg: #16301f;
    --lmt-surface-alt: #1a3322;
    --lmt-shadow: rgba(0,0,0,0.45);
    --lmt-shadow-hover: rgba(0,0,0,0.6);

    --todo-badge-cadence-bg: #1e3d2a;
    --todo-badge-past-due-bg: #4a1f20;
    --todo-badge-upcoming-bg: #4a3414;
    --todo-badge-ok-bg: #1d3a26;
    --lmt-terracotta-tint: rgba(212, 36, 38, 0.18);
}

/* Easter egg theme: warm autumn harvest - light instead of dark, like a
   cozy afternoon rather than a night theme. */
:root[data-theme="fall"] {
    --lmt-navy: #8a5a2b;
    --lmt-navy-dark: #5c3a1a;
    --lmt-navy-light: #a97a44;
    --lmt-terracotta: #d2691e;
    --lmt-terracotta-dark: #a8530f;
    --lmt-terracotta-light: #e08a42;
    --lmt-slate: #8a7560;
    --lmt-slate-light: #ab9a87;
    --lmt-bg: #f7efe2;
    --lmt-card: #fffaf2;
    --lmt-border: #e3d3b8;
    --lmt-text: #3b2a1a;
    --lmt-text-muted: #8a7560;
    --lmt-sidebar-bg: #5c3a1a;
    --lmt-input-bg: #fffaf2;
    --lmt-surface-alt: #f1e4cf;
    --lmt-shadow: rgba(90,60,20,0.08);
    --lmt-shadow-hover: rgba(90,60,20,0.15);

    --todo-badge-cadence-bg: #e9dcc3;
    --todo-badge-past-due-bg: #f3d7c0;
    --todo-badge-upcoming-bg: #f6e2b8;
    --todo-badge-ok-bg: #dce8c9;
    --lmt-terracotta-tint: rgba(210, 105, 30, 0.12);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) {
        --lmt-navy: #8aa0d6;
        --lmt-navy-dark: #eef1f7;
        --lmt-navy-light: #6b86c2;
        --lmt-terracotta: #e0806c;
        --lmt-terracotta-dark: #eb9a89;
        --lmt-terracotta-light: #eb9a89;
        --lmt-slate: #a8b0c0;
        --lmt-slate-light: #8b93a7;
        --lmt-bg: #14171f;
        --lmt-card: #1c2130;
        --lmt-border: #333c4f;
        --lmt-text: #dde1ea;
        --lmt-text-muted: #8b93a7;
        --lmt-sidebar-bg: #1a2036;
        --lmt-input-bg: #232939;
        --lmt-surface-alt: #232939;
        --lmt-shadow: rgba(0,0,0,0.3);
        --lmt-shadow-hover: rgba(0,0,0,0.45);

        --todo-badge-cadence-bg: #313c5c;
        --todo-badge-past-due-bg: #4a2c27;
        --todo-badge-upcoming-bg: #473a1f;
        --todo-badge-ok-bg: #1f3d30;
        --lmt-terracotta-tint: rgba(224, 128, 108, 0.16);
        --lmt-btn-red: #ad4c3b;
        --lmt-btn-red-hover: #8f3c2e;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    background: var(--lmt-bg);
    color: var(--lmt-text);
}

body {
    transition: background-color .15s ease, color .15s ease;
    display: flex;
    flex-direction: column;
}

/* Christmas theme easter egg: a string of lights across the very top of
   the screen. Hidden/zero-height outside that theme; .app-shell below is
   flex:1 rather than height:100% so it exactly fills whatever's left
   instead of overflowing past the lights bar. */
.xmas-lights {
    display: none;
    flex-shrink: 0;
    height: 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25), transparent 70%);
}
:root[data-theme="christmas"] .xmas-lights {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    padding-top: 5px;
}
.xmas-lights::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,0.25);
}
.xmas-light {
    width: 8px;
    height: 12px;
    border-radius: 50% 50% 45% 45%;
    flex-shrink: 0;
    box-shadow: 0 0 6px 2px currentColor;
    animation: xmas-twinkle 1.8s ease-in-out infinite;
}
.xmas-light:nth-child(5n+1) { color: #ff3b3b; background: #ff3b3b; }
.xmas-light:nth-child(5n+2) { color: #3bdc6b; background: #3bdc6b; }
.xmas-light:nth-child(5n+3) { color: #4ea2ff; background: #4ea2ff; }
.xmas-light:nth-child(5n+4) { color: #ffd93b; background: #ffd93b; }
.xmas-light:nth-child(5n+5) { color: #ff8c3b; background: #ff8c3b; }
.xmas-light:nth-child(2n) { animation-delay: .35s; }
.xmas-light:nth-child(3n) { animation-delay: .7s; }
.xmas-light:nth-child(4n) { animation-delay: 1.05s; }
.xmas-light:nth-child(5n) { animation-delay: 1.4s; }

@keyframes xmas-twinkle {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: .3; filter: brightness(.5); }
}

@media (prefers-reduced-motion: reduce) {
    .xmas-light { animation: none; }
}

/* Snow toggle button, top-left, and the falling snow it switches on. Both
   hidden outside the Christmas theme; the snow layer is created once by JS
   and its flakes too, so there's nothing to clean up when switching away -
   see the script at the bottom of this file for the spawn/stop logic. */
.xmas-snow-toggle {
    display: none;
    position: fixed;
    top: 2px;
    left: 2px;
    z-index: 1001;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
:root[data-theme="christmas"] .xmas-snow-toggle { display: flex; }
.xmas-snow-toggle:hover { background: rgba(255,255,255,0.3); }
.xmas-snow-toggle[aria-pressed="true"] { background: #4ea2ff; color: #fff; }

.xmas-snow-layer {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
}
:root[data-theme="christmas"] .xmas-snow-layer { display: block; }

.xmas-snowflake {
    position: absolute;
    top: -20px;
    color: #fff;
    text-shadow: 0 0 4px rgba(255,255,255,0.8);
    animation-name: xmas-snow-fall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes xmas-snow-fall {
    from { transform: translateY(0) translateX(0); }
    to { transform: translateY(110vh) translateX(var(--drift, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    .xmas-snowflake { display: none; }
}

/* Jack-o'-lantern lights across the top, Halloween's answer to the
   Christmas lights bar above - same slot/approach, just pumpkins that
   flicker like candlelight instead of bulbs that twinkle. */
.halloween-lights {
    display: none;
    flex-shrink: 0;
    height: 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25), transparent 70%);
}
:root[data-theme="halloween"] .halloween-lights {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    padding-top: 2px;
}
.halloween-lights::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,0.2);
}
.halloween-light {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 0 4px #ff8c1a);
    animation: halloween-flicker 2.2s ease-in-out infinite;
}
.halloween-light:nth-child(2n) { animation-delay: .4s; }
.halloween-light:nth-child(3n) { animation-delay: .8s; }
.halloween-light:nth-child(4n) { animation-delay: 1.2s; }
.halloween-light:nth-child(5n) { animation-delay: 1.6s; }

@keyframes halloween-flicker {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #ff8c1a) brightness(1); }
    45% { opacity: .75; filter: drop-shadow(0 0 2px #ff8c1a) brightness(.8); }
    55% { opacity: 1; filter: drop-shadow(0 0 6px #ff8c1a) brightness(1.3); }
    80% { opacity: .85; filter: drop-shadow(0 0 3px #ff8c1a) brightness(.9); }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-light { animation: none; }
}

/* Bat toggle button, top-left (same slot as the snow button - the two
   themes are mutually exclusive so there's no overlap), and the bats it
   sends flying around the window. */
.halloween-bat-toggle {
    display: none;
    position: fixed;
    top: 2px;
    left: 2px;
    z-index: 1001;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
:root[data-theme="halloween"] .halloween-bat-toggle { display: flex; }
.halloween-bat-toggle:hover { background: rgba(255,255,255,0.3); }
.halloween-bat-toggle[aria-pressed="true"] { background: #ff7518; color: #fff; }

.halloween-bat-layer {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
}
:root[data-theme="halloween"] .halloween-bat-layer { display: block; }

.halloween-bat {
    position: absolute;
    top: 0;
    left: 0;
    animation-name: halloween-bat-fly;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
.halloween-bat--diag { animation-name: halloween-bat-fly-diag; }

.halloween-bat-glyph {
    display: inline-block;
    animation: halloween-bat-flap .3s ease-in-out infinite;
}

@keyframes halloween-bat-flap {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(.6); }
}

@keyframes halloween-bat-fly {
    0%   { transform: translate(-10vw, var(--start-y, 40vh)) rotate(0deg); }
    20%  { transform: translate(18vw, calc(var(--start-y, 40vh) - 6vh)) rotate(-6deg); }
    40%  { transform: translate(40vw, calc(var(--start-y, 40vh) + 5vh)) rotate(4deg); }
    60%  { transform: translate(62vw, calc(var(--start-y, 40vh) - 7vh)) rotate(-5deg); }
    80%  { transform: translate(84vw, calc(var(--start-y, 40vh) + 4vh)) rotate(3deg); }
    100% { transform: translate(110vw, var(--start-y, 40vh)) rotate(0deg); }
}

@keyframes halloween-bat-fly-diag {
    0%   { transform: translate(-10vw, -10vh) rotate(10deg); }
    25%  { transform: translate(20vw, 28vh) rotate(-8deg); }
    50%  { transform: translate(45vw, 55vh) rotate(6deg); }
    75%  { transform: translate(75vw, 80vh) rotate(-8deg); }
    100% { transform: translate(110vw, 112vh) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-bat { display: none; }
}

/* Lantern lights across the top, Fall's answer to the Christmas/Halloween
   lights bars above - same slot/approach, warm paper lanterns glowing at
   dusk instead of bulbs or pumpkins. Fall is a light theme, so the bar
   still darkens its own strip (a warm dusk brown rather than black) so the
   glow reads the same way it does on the two dark themes. */
.fall-lights {
    display: none;
    flex-shrink: 0;
    height: 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(70,45,15,0.35), transparent 70%);
}
:root[data-theme="fall"] .fall-lights {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    padding-top: 2px;
}
.fall-lights::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,225,190,0.35);
}
.fall-light {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 0 4px #d2691e);
    animation: fall-light-flicker 2.4s ease-in-out infinite;
}
.fall-light:nth-child(2n) { animation-delay: .4s; }
.fall-light:nth-child(3n) { animation-delay: .8s; }
.fall-light:nth-child(4n) { animation-delay: 1.2s; }
.fall-light:nth-child(5n) { animation-delay: 1.6s; }

@keyframes fall-light-flicker {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #d2691e) brightness(1); }
    45% { opacity: .8; filter: drop-shadow(0 0 2px #d2691e) brightness(.85); }
    55% { opacity: 1; filter: drop-shadow(0 0 6px #d2691e) brightness(1.2); }
    80% { opacity: .9; filter: drop-shadow(0 0 3px #d2691e) brightness(.95); }
}

@media (prefers-reduced-motion: reduce) {
    .fall-light { animation: none; }
}

/* Leaf toggle button, top-left (same slot as the snow/bat buttons - the
   three themes are mutually exclusive so there's no overlap), and the
   leaves it sends drifting down the window. */
.fall-leaf-toggle {
    display: none;
    position: fixed;
    top: 2px;
    left: 2px;
    z-index: 1001;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.12);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
:root[data-theme="fall"] .fall-leaf-toggle { display: flex; }
.fall-leaf-toggle:hover { background: rgba(0,0,0,0.22); }
.fall-leaf-toggle[aria-pressed="true"] { background: #d2691e; color: #fff; }

.fall-leaf-layer {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
}
:root[data-theme="fall"] .fall-leaf-layer { display: block; }

.fall-leaf {
    position: absolute;
    top: -20px;
    animation-name: fall-leaf-fall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes fall-leaf-fall {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(var(--drift1, 25px), 28vh) rotate(90deg); }
    50%  { transform: translate(var(--drift2, -20px), 55vh) rotate(190deg); }
    75%  { transform: translate(var(--drift1, 25px), 82vh) rotate(290deg); }
    100% { transform: translate(0, 110vh) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fall-leaf { display: none; }
}

/* Seasonal themes: swap the brand logo for a recolor (logo-christmas.png /
   logo-halloween.png / logo-fall.png, each generated from logo.png by
   remapping its three flat brand colors). All logos are always in the
   markup; these rules just decide which one is visible - specificity has
   to beat .sidebar-logo img below, hence the repeated img.logo-* selectors
   rather than the plain class alone. */
.sidebar-logo img.logo-christmas,
img.mobile-topbar-logo.logo-christmas,
.sidebar-logo img.logo-halloween,
img.mobile-topbar-logo.logo-halloween,
.sidebar-logo img.logo-fall,
img.mobile-topbar-logo.logo-fall {
    display: none;
}
:root[data-theme="christmas"] .sidebar-logo img.logo-default,
:root[data-theme="christmas"] img.mobile-topbar-logo.logo-default {
    display: none;
}
:root[data-theme="christmas"] .sidebar-logo img.logo-christmas,
:root[data-theme="christmas"] img.mobile-topbar-logo.logo-christmas {
    display: block;
}
:root[data-theme="halloween"] .sidebar-logo img.logo-default,
:root[data-theme="halloween"] img.mobile-topbar-logo.logo-default {
    display: none;
}
:root[data-theme="halloween"] .sidebar-logo img.logo-halloween,
:root[data-theme="halloween"] img.mobile-topbar-logo.logo-halloween {
    display: block;
}
:root[data-theme="fall"] .sidebar-logo img.logo-default,
:root[data-theme="fall"] img.mobile-topbar-logo.logo-default {
    display: none;
}
:root[data-theme="fall"] .sidebar-logo img.logo-fall,
:root[data-theme="fall"] img.mobile-topbar-logo.logo-fall {
    display: block;
}

a { color: var(--lmt-navy); text-decoration: none; }
a:hover { color: var(--lmt-terracotta); }

/* ---------- Themed scrollbars ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--lmt-slate-light) transparent;
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--lmt-slate-light);
    border-radius: 100px;
    border: 3px solid var(--lmt-bg);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--lmt-terracotta);
}

.sidebar {
    scrollbar-color: rgba(255,255,255,0.35) transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.35);
    border-color: var(--lmt-sidebar-bg);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.55);
}

/* ---------- Layout ---------- */
.app-shell {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sidebar {
    width: 240px;
    background: var(--lmt-sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding-bottom: 24px;
    height: 100%;
    overflow-y: auto;
}

.sidebar-logo {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: #fff;
}

/* Christmas/Halloween: swap the white logo plate for each theme's own dark
   card color, so the recolored logo sits on something more festive than a
   plain white box. */
:root[data-theme="christmas"] .sidebar-logo { background: var(--lmt-card); }
:root[data-theme="halloween"] .sidebar-logo { background: var(--lmt-card); }

/* Fall: --lmt-card is a light cream here (the theme itself is light, unlike
   the two above), so reusing it wouldn't read as "not white" - a dedicated
   deep burgundy instead, which stays in the same warm reds/oranges/browns
   family as the rest of the theme while giving the brown/orange/taupe logo
   real contrast to sit on. */
:root[data-theme="fall"] .sidebar-logo { background: #4a1b1f; }

.logo-home-link { display: block; }
.mobile-topbar .logo-home-link { display: flex; align-items: center; }
.logo-home-link:focus-visible { outline: 2px solid var(--lmt-navy); outline-offset: 3px; border-radius: 4px; }

.sidebar-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.sidebar-nav {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.sidebar-nav a {
    color: rgba(255,255,255,0.85);
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 500;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-nav a:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.sidebar-nav a.active {
    background: rgba(255,255,255,0.10);
    border-left-color: var(--lmt-terracotta);
    color: #fff;
}

.sidebar-nav .icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    flex-shrink: 0;
}

.sidebar-nav .icon svg {
    display: block;
    color: inherit;
}

.sidebar-group-toggle {
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: rgba(255,255,255,0.85);
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.sidebar-group-toggle:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.sidebar-group-toggle.active {
    background: rgba(255,255,255,0.10);
    border-left-color: var(--lmt-terracotta);
    color: #fff;
}

.sidebar-group-chevron {
    margin-left: auto;
    display: inline-flex;
    transition: transform 0.15s ease;
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-chevron {
    transform: rotate(90deg);
}

.sidebar-subnav {
    display: none;
    flex-direction: column;
}

.sidebar-subnav.open {
    display: flex;
}

.sidebar-subnav a {
    padding-left: 40px;
    font-size: 14px;
}

/* ---------- Mobile top bar (hidden on desktop) ---------- */
.mobile-topbar {
    display: none;
}

.mobile-nav-toggle {
    background: none;
    border: 1px solid var(--lmt-border);
    border-radius: 6px;
    font-size: 20px;
    line-height: 1;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--lmt-navy);
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px 22px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    color: rgba(255,255,255,0.9);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .1s ease;
}

.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.14);
}

.sidebar-footer-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.sidebar-footer-actions form,
.sidebar-footer-actions > .theme-toggle-btn {
    flex: 1;
    margin: 0;
}

.sidebar-footer-actions .theme-toggle-btn {
    width: 100%;
    margin-bottom: 0;
    padding: 9px 6px;
    gap: 6px;
    font-size: 12.5px;
    justify-content: center;
}

.sidebar-footer-text {
    padding-bottom: 4px;
}

.main-content {
    flex: 1;
    padding: 20px 30px 36px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--lmt-navy-dark);
    margin: 0 0 4px;
}

.page-subtitle {
    color: var(--lmt-text-muted);
    font-size: 14px;
    margin: 0;
}

/* ---------- Flash messages ---------- */
.flash-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.flash {
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.flash-success {
    background: rgba(47,143,91,0.12);
    color: var(--status-ok);
    border: 1px solid rgba(47,143,91,0.35);
}

.flash-error {
    background: rgba(173,76,59,0.12);
    color: var(--lmt-terracotta-dark);
    border: 1px solid rgba(173,76,59,0.35);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

.btn-primary {
    background: var(--lmt-btn-red);
    color: #fff;
}
.btn-primary:hover { background: var(--lmt-btn-red-hover); color: #fff; }

.btn-secondary {
    background: var(--lmt-card);
    color: var(--lmt-navy);
    border: 1px solid var(--lmt-border);
}
.btn-secondary:hover { border-color: var(--lmt-navy); color: var(--lmt-navy); }

.btn-outline-danger {
    background: var(--lmt-card);
    color: var(--lmt-terracotta);
    border: 1px solid var(--lmt-terracotta);
}
.btn-outline-danger:hover { background: var(--lmt-btn-red); border-color: var(--lmt-btn-red); color: #fff; }

.btn-sm { padding: 6px 12px; font-size: 13px; }

/* The hidden attribute always hides. Without this, any class that sets its
   own display (flex, grid...) silently overrides the browser's built-in
   [hidden] { display: none } and the element shows anyway. */
[hidden] { display: none !important; }

/* ---------- Cards ---------- */
.card {
    background: var(--lmt-card);
    border: 1px solid var(--lmt-border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px var(--lmt-shadow);
    position: relative;
}

.card + .card { margin-top: 12px; }
/* A popup <dialog> sitting between two cards in the markup takes no space,
   but it does break the plain .card + .card match above. */
.card + dialog.modal + .card { margin-top: 12px; }

.card-fullscreen-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 5;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lmt-terracotta);
    border: 1px solid var(--lmt-terracotta);
    border-radius: 50%;
    box-shadow: 0 1px 3px var(--lmt-shadow);
    padding: 0;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    color: #fff;
}

.card.card-fullscreen {
    position: fixed;
    inset: 16px;
    z-index: 1000;
    overflow-y: auto;
    margin: 0;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

/* The collapsed button deliberately pokes out past the card's own edge so
   it never collides with a card's own top-right controls (e.g. Key
   Players' "+", ConnectWise Opportunities' "Refresh") - but overflow-y:auto
   above clips any child positioned outside the box it's set on, so once
   fullscreen the button has to move back inside or it gets cut off and is
   unclickable. */
.card.card-fullscreen .card-fullscreen-btn {
    top: 14px;
    right: 16px;
}

body.card-fullscreen-open { overflow: hidden; }

/* Collapse button, top-left - mirrors .card-fullscreen-btn on the
   top-right. A collapsed card keeps only its header row (the child holding
   .card-title, tagged .card-header-row by script) plus these buttons. */
.card-collapse-btn {
    position: absolute;
    top: -10px;
    /* inset rather than poking out like the fullscreen button, so in a
       two-column row it doesn't run into the left card's fullscreen button */
    left: 12px;
    z-index: 5;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lmt-terracotta);
    border: 1px solid var(--lmt-terracotta);
    border-radius: 50%;
    box-shadow: 0 1px 3px var(--lmt-shadow);
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    color: #fff;
}
.card.card-fullscreen .card-collapse-btn { display: none; }

/* ---------- Caption buttons like a Windows title bar ----------
   The collapse and fullscreen buttons are flat, square "caption buttons"
   sitting inside the card's top-right corner, side by side - collapse
   (minimize line / restore), then fullscreen (maximize square / close X).
   Icons are drawn with CSS so they stay crisp; the buttons' text glyphs
   are hidden. Phones get bigger touch targets (see the max-width: 900px
   block after this one). */
@media all {
    .card-fullscreen-btn,
    .card-collapse-btn,
    .card.card-fullscreen .card-fullscreen-btn {
        top: 0;
        left: auto;
        right: 0;
        width: 42px;
        height: 30px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--lmt-text-muted);
        font-size: 0;          /* hide the phone glyph */
        transition: background-color .1s ease, color .1s ease;
    }
    .card-fullscreen-btn { border-top-right-radius: 10px; }  /* follow the card's corner */
    .card-collapse-btn { right: 42px; }
    .card-fullscreen-btn,
    .card-collapse-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;   /* no double-tap-zoom delay */
    }
    .card-fullscreen-btn:active,
    .card-collapse-btn:active {
        background: var(--lmt-border);
        color: var(--lmt-text);
    }
    .card-fullscreen-btn:focus-visible,
    .card-collapse-btn:focus-visible {
        outline: 2px solid var(--lmt-navy);
        outline-offset: -2px;
    }
    .card-fullscreen-btn::before, .card-fullscreen-btn::after,
    .card-collapse-btn::before, .card-collapse-btn::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        box-sizing: border-box;
    }

    /* Collapse: a minimize line... */
    .card-collapse-btn::before {
        width: 10px;
        height: 0;
        border-top: 1px solid currentColor;
        transform: translate(-50%, 0);
    }
    /* ...and once collapsed, a restore glyph (two offset squares). */
    .card.card-collapsed .card-collapse-btn::before {
        width: 8px;
        height: 8px;
        border: 1px solid currentColor;
        transform: translate(-6px, -3px);
    }
    .card.card-collapsed .card-collapse-btn::after {
        width: 8px;
        height: 8px;
        border-top: 1px solid currentColor;
        border-right: 1px solid currentColor;
        transform: translate(-4px, -5px);
    }

    /* Fullscreen: a maximize square... */
    .card-fullscreen-btn::before {
        width: 10px;
        height: 10px;
        border: 1px solid currentColor;
        transform: translate(-50%, -50%);
    }
    /* ...and once fullscreen, a close X with Windows' red hover. */
    .card.card-fullscreen .card-fullscreen-btn::before,
    .card.card-fullscreen .card-fullscreen-btn::after {
        width: 13px;
        height: 0;
        border: 0;
        border-top: 1px solid currentColor;
        transform: translate(-50%, 0) rotate(45deg);
    }
    .card.card-fullscreen .card-fullscreen-btn::after { transform: translate(-50%, 0) rotate(-45deg); }
    .card.card-fullscreen .card-fullscreen-btn:active { background: #c42b1c; color: #fff; }

    /* In fullscreen, pin the close button to the window's corner so it stays
       reachable while a long card scrolls underneath it (the card sits at
       inset: 16px with a 1px border). */
    .card.card-fullscreen .card-fullscreen-btn {
        position: fixed;
        top: 17px;
        right: 17px;
        z-index: 10;
        border-top-right-radius: 9px;
        background: var(--lmt-card);
    }

    /* Keep each card's own header controls (Refresh, +, ...) clear of the
       caption buttons: room for one, or two where there's a collapse button. */
    .card > .card-header-row { padding-right: 46px; }
    .card:has(> .card-collapse-btn) > .card-header-row { padding-right: 88px; }
    .card.card-fullscreen > .card-header-row { padding-right: 46px; }
    .card.card-caption-pad { padding-top: 32px; }

    /* A collapsed card's title row expands it on click/tap (client page). */
    .card.card-collapsed:not(.card-fullscreen) > .card-header-row { cursor: pointer; }
}

/* Hover highlight only for a real pointer - on touch screens :hover sticks
   after a tap, leaving the button looking pressed. */
@media (hover: hover) {
    .card-fullscreen-btn:hover,
    .card-collapse-btn:hover {
        background: var(--lmt-surface-alt);
        border-color: transparent;
        color: var(--lmt-text);
    }
    .card.card-fullscreen .card-fullscreen-btn:hover { background: #c42b1c; color: #fff; }
}

/* Phones: finger-sized caption buttons (44 x 40, about Apple's 44pt
   minimum) with slightly larger icons, and room for them in the title row. */
@media (max-width: 900px) {
    .card-fullscreen-btn,
    .card-collapse-btn,
    .card.card-fullscreen .card-fullscreen-btn {
        width: 44px;
        height: 40px;
    }
    .card-collapse-btn { right: 44px; }
    .card-collapse-btn::before { width: 13px; }
    .card-fullscreen-btn::before { width: 12px; height: 12px; }
    .card.card-collapsed .card-collapse-btn::before { width: 10px; height: 10px; transform: translate(-7px, -4px); }
    .card.card-collapsed .card-collapse-btn::after { width: 10px; height: 10px; transform: translate(-4px, -7px); }
    .card.card-fullscreen .card-fullscreen-btn::before,
    .card.card-fullscreen .card-fullscreen-btn::after { width: 16px; height: 0; }

    .card > .card-header-row { padding-right: 48px; min-height: 26px; }
    .card:has(> .card-collapse-btn) > .card-header-row { padding-right: 92px; }
    .card.card-fullscreen > .card-header-row { padding-right: 48px; }
    .card.card-caption-pad { padding-top: 40px; }

    /* Collapse All / Expand All: two even, full-width, easy-to-hit buttons. */
    .card-bulk-toggle .btn { flex: 1; justify-content: center; min-height: 40px; }
}

.card.card-collapsed:not(.card-fullscreen) > :not(.card-header-row):not(.card-fullscreen-btn):not(.card-collapse-btn):not(.layout-edit-bar) {
    display: none;
}
.card.card-collapsed:not(.card-fullscreen) .card-title { margin-bottom: 0; }
.card-bulk-toggle {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
/* In a detail-grid row, don't stretch a collapsed card to its neighbours' height. */
.detail-grid .card.card-collapsed:not(.card-fullscreen) { height: auto; align-self: start; }

.theme-picker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.theme-picker-list .btn { justify-content: flex-start; text-align: left; }

.card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lmt-navy-dark);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Dashboard stat tiles ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

/* The to-do page's stat grid has a 5th "All Tasks" card. */
.todo-stat-grid { grid-template-columns: repeat(5, 1fr); }
.todo-stat-grid .stat-card { border-top-width: 5px; }

.stat-card {
    background: var(--lmt-card);
    border: 1px solid var(--lmt-border);
    border-radius: 8px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .08s ease, box-shadow .08s ease;
    border-top: 3px solid var(--lmt-navy);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--lmt-shadow-hover);
}

.stat-card.stat-upcoming { border-top-color: var(--status-upcoming); }
.stat-card.stat-past-due { border-top-color: var(--status-past-due); }
.stat-card.stat-ok { border-top-color: var(--status-ok); }
.stat-card.stat-total { border-top-color: var(--lmt-navy); }
.stat-card.stat-slate { border-top-color: var(--lmt-slate); }

.stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--lmt-navy-dark);
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    color: var(--lmt-text-muted);
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-card.active-filter {
    box-shadow: 0 0 0 2px var(--lmt-terracotta);
}

/* To-do stat cards double as filter buttons - the plain 2px ring used
   elsewhere reads as decoration more than "selected", so make the active
   one unmistakable: a thicker ring plus a tinted fill. */
.todo-stat-grid .stat-card.active-filter {
    box-shadow: 0 0 0 3px var(--lmt-terracotta);
    background: var(--lmt-terracotta-tint);
}

/* ---------- Tables ---------- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Vertically scrolling table (height set by script to fit N rows) with
   the header pinned while the body scrolls. */
.table-scroll-y {
    overflow-y: auto;
}
.table-scroll-y table.data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

table.data-table th {
    text-align: left;
    padding: 7px 10px;
    background: var(--lmt-surface-alt);
    color: var(--lmt-navy-dark);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--lmt-border);
    white-space: nowrap;
}

.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    cursor: pointer;
}

.sort-link:hover {
    color: var(--lmt-terracotta);
}

.sort-link.sort-active {
    color: var(--lmt-terracotta);
}

.sort-arrow {
    font-size: 9px;
}

table.data-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--lmt-border);
    vertical-align: middle;
}

table.data-table tr:hover td { background: var(--lmt-surface-alt); }

table.data-table a.row-link {
    color: var(--lmt-navy-dark);
    font-weight: 600;
}

table.data-table tr.row-inactive td { opacity: 0.55; }
table.data-table tr.row-inactive a.row-link { color: var(--lmt-text-muted); }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
}

.badge-tier-S { background: #2c3f6c; color: #fff; }
.badge-tier-A { background: #3d5590; color: #fff; }
.badge-tier-B { background: #8a93a5; color: #fff; }
.badge-tier-C { background: #c4cad4; color: #333; }
.badge-tier-D { background: #e5e8ee; color: #555; }

.badge-status-past-due { background: #fbe9e7; color: var(--status-past-due); }
.badge-status-upcoming { background: #fdf1de; color: var(--status-upcoming); }
.badge-status-ok { background: #e5f4ec; color: var(--status-ok); }
.badge-status-na { background: #eceef1; color: var(--status-na); }
.badge-status-suggested { background: #f0eafc; color: #6d4fa8; }

.badge-cadence {
    background: #eef1f7;
    color: var(--lmt-navy);
}

/* AI maturity assessment: low-to-high stages colored red -> amber -> neutral -> green */
.badge-maturity-unaware { background: #fbe9e7; color: var(--status-past-due); }
.badge-maturity-experimenting { background: #fdf1de; color: var(--status-upcoming); }
.badge-maturity-adopting { background: #eef1f7; color: var(--lmt-navy); }
.badge-maturity-managed { background: #e5f4ec; color: var(--status-ok); }
.badge-maturity-optimized { background: var(--status-ok); color: #fff; }

/* ---------- Forms ---------- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group { margin-bottom: 16px; }
.form-group.full { grid-column: 1 / -1; }

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lmt-navy-dark);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--lmt-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: var(--lmt-input-bg);
    color: var(--lmt-text);
}

.form-control:focus {
    outline: none;
    border-color: var(--lmt-navy-light);
    box-shadow: 0 0 0 3px rgba(61,85,144,0.15);
}

textarea.form-control { resize: vertical; min-height: 90px; }

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-bar .form-control { max-width: 260px; }

/* Month/day recurring-date pickers (Fiscal Year End, Budget Deadline): two
   selects that should stay side-by-side even on a narrow phone screen —
   min-width:0 lets flexbox actually shrink them below their own content's
   intrinsic width instead of overflowing the form. */
.month-day-picker {
    display: flex;
    gap: 8px;
}

.month-day-picker select {
    flex: 1 1 0;
    min-width: 0;
}

/* ---------- Client detail ---------- */
.client-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.client-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.meta-item {
    background: var(--lmt-surface-alt);
    border: 1px solid var(--lmt-border);
    border-radius: 8px;
    padding: 10px 14px;
}

.meta-item .meta-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lmt-text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}

.meta-item .meta-value {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lmt-navy-dark);
}

.detail-tabs {
    display: flex;
    gap: 4px;
    margin: 24px 0 16px;
    border-bottom: 1px solid var(--lmt-border);
}

.detail-tabs a {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lmt-text-muted);
    border-bottom: 3px solid transparent;
}

.detail-tabs a.active {
    color: var(--lmt-navy-dark);
    border-bottom-color: var(--lmt-terracotta);
}

/* ---------- Timeline ---------- */
.timeline {
    position: relative;
    padding-left: 28px;
    margin-top: 10px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--lmt-border);
}

.timeline-item {
    position: relative;
    margin-bottom: 22px;
}

.timeline-dot {
    position: absolute;
    left: -28px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--lmt-border);
}

.timeline-dot.dot-sbr { background: var(--lmt-navy); }
.timeline-dot.dot-note { background: var(--lmt-terracotta); }
.timeline-dot.dot-checkin { background: var(--status-ok); }

.timeline-card {
    background: var(--lmt-card);
    border: 1px solid var(--lmt-border);
    border-radius: 8px;
    padding: 14px 16px;
}

.timeline-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
}

.timeline-card-header a.row-link {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--lmt-navy-dark);
}

.timeline-kind {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 100px;
}

.timeline-kind.kind-sbr { background: #e8ecf5; color: var(--lmt-navy); }
.timeline-kind.kind-note { background: #fbe9e7; color: var(--lmt-terracotta-dark); }
.timeline-kind.kind-checkin { background: #e5f4ec; color: var(--status-ok); }

.timeline-date { font-size: 13px; color: var(--lmt-text-muted); font-weight: 600; }
.timeline-by { font-weight: 400; }

.timeline-body { font-size: 14px; color: var(--lmt-text); line-height: 1.5; }

.note-todo-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--status-ok);
    background: rgba(47,143,91,0.12);
    border-radius: 6px;
    padding: 3px 8px;
    margin: 4px 0 6px;
}

.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lmt-terracotta);
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--lmt-text-muted);
}

.empty-state h3 {
    color: var(--lmt-navy-dark);
    margin-bottom: 6px;
}

.text-muted { color: var(--lmt-text-muted); }

/* Preserve line breaks in displayed user-entered multi-line text (notes,
   SBR summaries, initiative/todo descriptions, etc.) — a plain <p>/<span>
   collapses newlines by default, turning multi-paragraph input into one
   run-on block. */
.text-preserve { white-space: pre-wrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-auto { margin-top: auto; }

/* Lets a card's action button sit flush at the bottom regardless of how much
   content is above it, once the card itself stretches to a shared row height
   (see .detail-grid .card). The form grows to fill the remaining space and
   its last child (the submit button, via .mt-auto) sticks to the bottom. */
.card-fill-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.inline-form { display: inline; }

@media (max-width: 900px) {
    html, body { height: auto; overflow: visible; }
    .app-shell { height: auto; flex-direction: column; }

    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--lmt-card);
        padding: 10px 16px;
        border-bottom: 1px solid var(--lmt-border);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .mobile-topbar-logo { height: 30px; width: auto; }

    /* Sidebar becomes a collapsed dropdown panel, toggled by the hamburger button */
    .sidebar {
        display: none;
        width: 100%;
        height: auto;
        overflow: visible;
        flex-direction: column;
        padding-bottom: 10px;
    }
    .sidebar.open { display: flex; }
    .sidebar-logo { display: none; }
    .sidebar-nav { flex-direction: column; margin-top: 0; }
    .sidebar-nav a { padding: 14px 22px; }
    .sidebar-group-toggle { padding: 14px 22px; }
    .sidebar-subnav a { padding-left: 44px; }
    .sidebar-footer { margin-top: 0; padding-top: 10px; }

    .main-content { height: auto; overflow: visible; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .client-meta-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .main-content { padding: 14px 14px 28px; }
    .page-title { font-size: 21px; }

    /* iOS Safari auto-zooms on focusing any input/select/textarea under
       16px — every form field on the site would trigger it at the 14px
       base size, so bump to 16px specifically on phone-width viewports
       rather than changing the desktop look. */
    .form-control, textarea.form-control, select.form-control {
        font-size: 16px;
    }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .client-meta-grid { grid-template-columns: 1fr; }
    .topbar { gap: 10px; }
    /* stretch, so a one-line button ("Scopes") matches the height of a
       neighbour whose label wraps to two lines ("IT Roadmap") */
    .topbar-actions { width: 100%; align-items: stretch; }
    .topbar-actions .btn { flex: 1; justify-content: center; text-align: center; }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; justify-content: center; }
    /* form.-qualified so these beat the base .todo-add-form rules, which
       come later in this file. */
    form.todo-add-form { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .todo-add-form input[type="date"],
    .todo-add-form select { max-width: none !important; }
    /* The base flex-basis:100% is for the wrapping row layout; in this
       column layout it pushed the details into a second column off-screen. */
    form.todo-add-form .todo-add-details { flex-basis: auto; }
    form.todo-add-form > .btn { justify-content: center; }

    /* Definition lists (Client Details, My Account) — a fixed-width label
       column next to the value reads fine on a tablet/desktop but gets
       cramped once the label itself (e.g. "Two-Factor Authentication") is
       competing with the value for space on a phone-width screen. */
    .detail-list {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .detail-list dd { margin-bottom: 8px; }

    .kb-article-body { padding: 16px; }

    .auth-shell { padding: 16px 10px; }
    .auth-card { padding: 24px 18px; }
}


/* ========== CO-MANAGED & RESPONSIBILITY MATRIX STYLES ========== */

.badge-matrix-ok {
    background-color: #10b981;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

.badge-matrix-ok:hover {
    background-color: #059669;
}

.badge-matrix-missing {
    background-color: #ef4444;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
    animation: pulse-warning 2s infinite;
}

.badge-matrix-missing:hover {
    background-color: #dc2626;
}

@keyframes pulse-warning {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Checkbox label styling */
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: var(--lmt-text);
    margin: 0;
}

.checkbox-input {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

/* File upload section */
.file-upload-section {
    padding: 12px;
    background-color: var(--lmt-surface-alt);
    border: 1px dashed var(--lmt-border);
    border-radius: 6px;
    margin-bottom: 8px;
}

.file-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--lmt-border);
}

.file-info p {
    margin: 0 0 8px 0;
    font-size: 13px;
}

.form-help {
    margin-top: 6px;
    font-size: 12px;
    color: var(--lmt-text-muted);
    font-style: italic;
}

/* Matrix info section in detail view */
.matrix-info {
    background-color: rgba(16,185,129,0.12);
    padding: 12px;
    border-left: 4px solid #10b981;
    border-radius: 4px;
}

.matrix-info h4 {
    color: var(--lmt-text);
    font-size: 14px;
    font-weight: 600;
}

.pdf-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.pdf-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

/* ========== TO-DO LIST ========== */
.todo-add-form {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.todo-add-form input[type="text"] {
    flex: 1;
    min-width: 200px;
}

.todo-add-details {
    flex-basis: 100%;
}

.todo-add-details[open] summary {
    margin-bottom: 8px;
}

.todo-add-details .form-group {
    margin-bottom: 8px;
}

.todo-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.todo-item {
    display: block;
    padding: 10px 4px;
    border-bottom: 1px solid var(--lmt-border);
}

.todo-item:last-child { border-bottom: none; }

.todo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.todo-details {
    padding: 4px 0 0 30px;
    font-size: 12.5px;
    color: var(--lmt-text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: pre-wrap;
}

.todo-check-form { display: flex; }

.todo-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.todo-text {
    flex: 1;
    font-size: 14px;
    color: var(--lmt-text);
}

/* Client page task list: the task's own text sits on its own line below
   the owner/initiative/deadline tags and action buttons, indented to line
   up with .todo-details below it, instead of competing for space to their
   left in the same row. */
.todo-text-row {
    padding: 4px 0 0 30px;
}

.todo-item.todo-done .todo-text {
    text-decoration: line-through;
    color: var(--lmt-text-muted);
}

.todo-delete-form { flex-shrink: 0; }

/* ---------- Global to-do list (all clients) ---------- */
.todo-main {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.todo-client-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--lmt-text-muted);
}

.todo-client-link:hover { color: var(--lmt-terracotta); }

/* Owner and deadline chips on a to-do row: the shared .badge-* pastels are
   too washed out here against the card background (worse once the dark
   theme reuses the same light hex), so give them their own, slightly
   richer tint per theme. */
.todo-row .badge-cadence { background: var(--todo-badge-cadence-bg); }
.todo-row .badge-status-past-due { background: var(--todo-badge-past-due-bg); }
.todo-row .badge-status-upcoming { background: var(--todo-badge-upcoming-bg); }
.todo-row .badge-status-ok { background: var(--todo-badge-ok-bg); }

.todo-complete-toggle { flex-shrink: 0; }

.todo-complete-form {
    display: none;
    padding: 0 4px 14px 34px;
    flex-direction: column;
    gap: 8px;
}

.todo-complete-form.open { display: flex; }

.todo-complete-actions {
    display: flex;
    gap: 8px;
}

/* ---------- Client detail layout (used by account.html too) ---------- */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-items: stretch;
    margin-bottom: 12px;
}

.detail-grid .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Grid `gap` already spaces these cards — without this override, the global
   `.card + .card` stacking margin adds on top of it, growing the 2nd/3rd
   card taller than the row and pushing them into whatever comes after. */
.detail-grid .card + .card {
    margin-top: 0;
}

.detail-list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 14px;
    font-size: 14px;
}

.detail-list dt { color: var(--lmt-text-muted); font-weight: 600; }
.detail-list dd { margin: 0; }

/* ---------- Buttons (danger / full-width variants) ---------- */
.btn-danger {
    background: var(--lmt-btn-red);
    color: #fff;
}
.btn-danger:hover { background: var(--lmt-btn-red-hover); color: #fff; }

.btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

.btn-link-danger {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--lmt-terracotta);
    cursor: pointer;
    font-family: inherit;
}
.btn-link-danger:hover { color: var(--lmt-terracotta-dark); text-decoration: underline; }

/* ---------- Role badges ---------- */
.badge-role-admin { background: #2c3f6c; color: #fff; }
.badge-role-poweruser { background: var(--lmt-terracotta); color: #fff; }
.badge-role-user { background: #eef1f7; color: var(--lmt-navy); }
.badge-role-sales { background: #e6f2ec; color: #2f6b4f; }
.badge-role-readonly { background: #eceef1; color: var(--status-na); }

/* ---------- Users table actions ---------- */
.table-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

/* ---------- Sidebar user info / logout (base.html) ---------- */
.sidebar-user-info {
    font-size: 12.5px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-user-info .role-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 100px;
    background: rgba(255,255,255,0.14);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}

/* ---------- Standalone auth pages (login / setup / 2FA) ---------- */
.auth-body {
    display: flex;
}

.auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 24px 16px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 32px 30px;
}

.auth-logo { text-align: center; margin-bottom: 22px; }
.auth-logo img { max-width: 200px; height: auto; }

.auth-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--lmt-navy-dark);
    margin: 0 0 6px;
    text-align: center;
}

.auth-subtitle {
    font-size: 13.5px;
    color: var(--lmt-text-muted);
    margin: 0 0 22px;
    text-align: center;
    line-height: 1.5;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: var(--lmt-text-muted);
    font-size: 12.5px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lmt-border);
}

/* ---------- 2FA QR / code entry ---------- */
.qr-wrap { text-align: center; margin: 4px 0 16px; }

.qr-image {
    width: 220px;
    height: 220px;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--lmt-border);
}

.totp-secret {
    display: block;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    letter-spacing: 1.5px;
    background: var(--lmt-surface-alt);
    border: 1px solid var(--lmt-border);
    border-radius: 6px;
    padding: 10px;
    margin: 8px 0 22px;
    word-break: break-all;
    color: var(--lmt-text);
}

.totp-form { margin-top: 4px; }

.totp-input {
    text-align: center;
    font-size: 24px;
    letter-spacing: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Initiatives ---------- */
.initiative-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.initiative-card {
    display: block;
    color: inherit;
    cursor: pointer;
}

.initiative-card:hover {
    border-color: var(--lmt-navy-light);
    box-shadow: 0 2px 8px var(--lmt-shadow-hover);
    color: inherit;
}

.initiative-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.initiative-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--lmt-text-muted);
    margin-top: 8px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 100px;
    background: var(--lmt-surface-alt);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--status-ok);
    border-radius: 100px;
    transition: width .2s ease;
}

/* Visually hidden, still read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Client page layout grid ----------
   Every card on the client page sits in one two-column grid. A card is half
   or full width per data-layout-width (set by the page script from the
   viewer's saved layout, falling back to data-layout-default); phones are
   always one column. Order is the DOM order, which the script rearranges. */
.client-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
.client-layout > .card { margin: 0; min-width: 0; }
/* Half-width cards stretch to their row's height (as the old two-up rows
   did), so e.g. Log a Check-in can pin its button to the bottom. */
.client-layout > .card[data-layout-width="half"],
.client-layout > .card:not([data-layout-width])[data-layout-default="half"] { display: flex; flex-direction: column; }
.client-layout > .card + .card { margin-top: 0; }
.client-layout > .card[data-layout-width="full"],
.client-layout > .card:not([data-layout-width])[data-layout-default="full"] { grid-column: 1 / -1; }
.client-layout > .card.card-collapsed:not(.card-fullscreen) { align-self: start; }
@media (max-width: 900px) {
    .client-layout { grid-template-columns: minmax(0, 1fr); }
    .client-layout > .card { grid-column: 1 / -1; }
}

/* Gear menu next to Collapse All / Expand All */
.layout-menu-wrap { position: relative; display: inline-flex; }
.layout-gear { padding: 6px 9px; display: inline-flex; align-items: center; }
.layout-gear svg { width: 16px; height: 16px; display: block; }
.layout-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    min-width: 200px;
    padding: 4px;
    background: var(--lmt-card);
    border: 1px solid var(--lmt-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(20, 30, 60, 0.18);
}
.layout-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--lmt-text);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}
.layout-menu button:hover, .layout-menu button:focus-visible { background: var(--lmt-surface-alt); outline: none; }

/* Edit mode */
.layout-edit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--lmt-navy);
    border-radius: 10px;
    background: var(--lmt-surface-alt);
    position: sticky;
    top: 0;
    z-index: 40;
}
.layout-edit-banner p { margin: 0; font-size: 13px; }
.layout-edit-banner .layout-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.layout-edit-bar { display: none; }
.client-layout.layout-editing > .card {
    border-style: dashed;
    border-color: var(--lmt-navy);
    cursor: grab;
}
.client-layout.layout-editing > .card > :not(.card-header-row):not(.layout-edit-bar) { display: none !important; }
.client-layout.layout-editing > .card > .card-header-row { padding-right: 0; pointer-events: none; }
.client-layout.layout-editing > .card > .card-header-row :is(button, a, label, input) { display: none; }
.client-layout.layout-editing > .card .card-title { margin-bottom: 0; }
.client-layout.layout-editing > .card { align-self: start; }
.client-layout.layout-editing .layout-edit-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.layout-edit-bar .layout-handle { color: var(--lmt-text-muted); font-size: 18px; line-height: 1; cursor: grab; user-select: none; }
.layout-edit-bar .btn { min-width: 36px; justify-content: center; }
.layout-edit-bar .layout-up, .layout-edit-bar .layout-down { font-size: 16px; line-height: 1; padding: 5px 10px; }
.layout-width-toggle { display: inline-flex; margin-left: auto; border: 1px solid var(--lmt-border); border-radius: 6px; overflow: hidden; }
.layout-width-toggle button {
    border: 0;
    background: var(--lmt-card);
    color: var(--lmt-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
}
.layout-width-toggle button + button { border-left: 1px solid var(--lmt-border); }
.layout-width-toggle button[aria-pressed="true"] { background: var(--lmt-navy); color: #fff; }
.client-layout.layout-editing > .card.layout-dragging { opacity: 0.4; }
.client-layout.layout-editing > .card.layout-drop-before { box-shadow: inset 0 4px 0 var(--lmt-terracotta); }
.client-layout.layout-editing > .card.layout-drop-after { box-shadow: inset 0 -4px 0 var(--lmt-terracotta); }
.layout-phone-note { display: none; }
@media (max-width: 900px) {
    .layout-width-toggle { display: none; }      /* phones are always full width */
    .layout-phone-note { display: inline; }
    .layout-edit-bar .btn { min-height: 40px; min-width: 44px; }
}
/* While editing, hide the caption buttons and the bulk collapse controls. */
.client-layout.layout-editing .card-collapse-btn,
.client-layout.layout-editing .card-fullscreen-btn { display: none; }

/* ---------- Bundle Balance card (client detail) ---------- */
/* A row that keeps a lone card at half width, like Client Details beside
   Log a Check-in, rather than stretching it across the page. */
.detail-grid.detail-grid-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .detail-grid.detail-grid-halves { grid-template-columns: minmax(0, 1fr); }
}
.bundle-list { display: flex; flex-direction: column; gap: 14px; }
.bundle-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.bundle-name { font-size: 13.5px; font-weight: 600; color: var(--lmt-navy-dark); }
.bundle-pct { font-size: 13px; font-weight: 600; white-space: nowrap; }
.bundle-bar { height: 14px; position: relative; }
/* Where we are in the month, so usage can be read against it. */
.bundle-month-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--lmt-navy-dark);
    opacity: 0.75;
}
.bundle-report-cell { display: flex; align-items: center; gap: 8px; }
.bundle-report-cell .bundle-bar { flex: 1; min-width: 100px; }
.bundle-report-pct { font-weight: 600; font-size: 12.5px; min-width: 38px; text-align: right; }
.bundle-basis { font-size: 11.5px; margin-top: 4px; }
.am-report-table td.am-sorted, .am-report-table th.am-sorted { background: var(--lmt-surface-alt); }
.am-report-table td { min-width: 170px; }
.am-report-table td:first-child, .am-report-table td:nth-child(2), .am-report-table td:nth-child(3) { min-width: 0; }
.am-cell-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; margin-top: 3px; white-space: nowrap; }
.bundle-month {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lmt-navy);
    margin: 0 0 12px;
}
.bundle-fill-warn { background: var(--status-upcoming); }
.bundle-fill-over { background: var(--status-past-due); }
.bundle-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: 12.5px;
    margin-top: 6px;
}

/* ---------- Note / check-in attachments ---------- */
.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--lmt-surface-alt);
    border: 1px solid var(--lmt-border);
    border-radius: 6px;
    padding: 4px 8px;
}

.attachment-thumb-link { display: block; line-height: 0; }

.attachment-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.attachment-delete-form .btn-link-danger {
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}

/* ---------- Bulk actions bar (Clients page) ---------- */
.bulk-actions-bar {
    display: none;
    align-items: center;
    gap: 10px;
    background: var(--lmt-surface-alt);
    border: 1px solid var(--lmt-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.bulk-actions-bar.visible {
    display: flex;
}

/* ---------- Modal (native <dialog>) ---------- */
.modal {
    border: 1px solid var(--lmt-border);
    border-radius: 10px;
    padding: 18px 20px;
    background: var(--lmt-card);
    color: var(--lmt-text);
    box-shadow: 0 12px 32px var(--lmt-shadow-hover);
    max-width: 480px;
    width: 90vw;
}

.modal::backdrop {
    background: rgba(20, 23, 31, 0.55);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--lmt-border);
}

.modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--lmt-navy-dark);
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--lmt-text-muted);
    padding: 2px 6px;
}

.modal-close:hover { color: var(--lmt-terracotta); }

/* ---------- Phones: full-screen dialogs and stacked tables ----------
   .modal-mobile-full fills the whole viewport on phones (respecting the
   notch / home-bar safe areas), with its header - title and close button -
   pinned while the content scrolls, and the page behind it locked.
   .stack-on-mobile turns a wide table into one block per row, each cell
   labelled from its data-label; .stack-wide cells take a full line. */
@media (max-width: 900px) {
    .modal.modal-mobile-full {
        width: 100vw;
        max-width: none !important;     /* beats an inline desktop max-width */
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        inset: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .modal.modal-mobile-full .modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 -16px 12px;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 10px 16px;
        background: var(--lmt-card);
    }
    .modal.modal-mobile-full .modal-title { font-size: 16px; }
    .modal.modal-mobile-full .modal-close {
        width: 44px;
        height: 44px;
        font-size: 26px;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .modal.modal-mobile-full .table-scroll { overflow-x: visible; }
    body:has(dialog.modal-mobile-full[open]) { overflow: hidden; }
    /* Label/value lists (e.g. Task Details): label above value, full width. */
    .modal.modal-mobile-full .detail-list { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 15px; }
    .modal.modal-mobile-full .detail-list dt {
        margin-top: 12px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .modal.modal-mobile-full .detail-list dt:first-child { margin-top: 0; }
    .modal.modal-mobile-full .detail-list dd { margin: 0; overflow-wrap: anywhere; }

    table.stack-on-mobile thead { display: none; }
    table.stack-on-mobile,
    table.stack-on-mobile tbody,
    table.stack-on-mobile tfoot { display: block; width: 100%; }
    table.stack-on-mobile tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--lmt-border);
    }
    table.stack-on-mobile td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left !important;
        font-size: 14px;
    }
    table.stack-on-mobile td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--lmt-text-muted);
        margin-bottom: 1px;
    }
    table.stack-on-mobile td.stack-wide { grid-column: 1 / -1; }
    table.stack-on-mobile td.stack-wide:first-child { font-weight: 700; }
    /* Total row: label and amount on one line. */
    table.stack-on-mobile tfoot tr { display: flex; justify-content: space-between; border-bottom: 0; }
    table.stack-on-mobile tfoot td { font-size: 15px; }
}

/* ---------- Info bubble (small "?" trigger for a help modal) ---------- */
.info-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lmt-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: none;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
    margin-left: 4px;
}

.info-bubble:hover { background: var(--lmt-navy-dark); }

.role-block { margin-bottom: 16px; }
.role-block:last-child { margin-bottom: 0; }

.role-block h4 {
    margin: 0 0 6px;
    color: var(--lmt-navy-dark);
    font-size: 13.5px;
}

.role-block ul {
    margin: 0;
    padding-left: 20px;
}

.role-block li { margin-bottom: 4px; }

/* ---------- Timeline item header / inline edit (client detail) ---------- */
.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.timeline-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--lmt-navy);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.btn-link:hover { color: var(--lmt-terracotta); text-decoration: underline; }

.timeline-editable .timeline-edit-form { display: none; }
.timeline-editable.open .timeline-view { display: none; }
.timeline-editable.open .timeline-edit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-toggle-btn {
    background: none;
    border: 1px solid var(--lmt-border);
    border-radius: 6px;
    color: var(--lmt-navy);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.card-toggle-btn:hover {
    color: #fff;
    background: var(--lmt-navy);
    border-color: var(--lmt-navy);
}

.card-toggle-btn[aria-expanded="true"] {
    transform: rotate(45deg);
}

.card-collapsible { display: none; }
.card-collapsible.open { display: block; }

/* ---------- Knowledge Base ---------- */
.kb-article-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.kb-article-list-item p {
    margin: 4px 0 0;
    font-size: 13px;
}

.kb-article-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kb-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.kb-sidebar {
    padding: 16px;
    position: sticky;
    top: 16px;
}

.kb-sidebar-group + .kb-sidebar-group { margin-top: 16px; }

.kb-sidebar-category {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lmt-text-muted);
    margin-bottom: 6px;
}

.kb-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kb-sidebar-list a {
    display: block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--lmt-text);
    text-decoration: none;
}

.kb-sidebar-list a:hover { background: var(--lmt-surface-alt); }

.kb-sidebar-list a.active {
    background: var(--lmt-navy);
    color: #fff;
}

.kb-article-body {
    padding: 24px;
    line-height: 1.6;
}

.kb-article-body h3 {
    margin: 24px 0 8px;
}

.kb-article-body h3:first-child { margin-top: 0; }

.kb-article-body ul,
.kb-article-body ol {
    margin: 8px 0;
    padding-left: 22px;
}

.kb-article-body table.data-table { margin-top: 8px; }

@media (max-width: 800px) {
    .kb-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    /* A wide table scrolls inside its own box instead of stretching the
       page (and the article column) sideways. */
    .kb-article-body table { display: block; max-width: 100%; overflow-x: auto; }
    .kb-sidebar {
        position: static;
    }
}

/* ========== 12-MONTH IT ROADMAP ========== */
.roadmap-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.roadmap-board {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.roadmap-column {
    flex: 0 0 240px;
    width: 240px;
    background: var(--lmt-surface-alt);
    border: 1px solid var(--lmt-border);
    border-radius: 8px;
    padding: 8px;
}

.roadmap-column-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 4px 8px;
    border-bottom: 1px solid var(--lmt-border);
    margin-bottom: 8px;
}

.roadmap-column-month {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lmt-navy-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.roadmap-column-cost {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--lmt-text-muted);
    margin-left: 6px;
}

.roadmap-column-count {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--lmt-text-muted);
    background: var(--lmt-card);
    border: 1px solid var(--lmt-border);
    border-radius: 100px;
    padding: 1px 7px;
}

.roadmap-column-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roadmap-column-empty {
    font-size: 12.5px;
    color: var(--lmt-text-muted);
    text-align: center;
    padding: 10px 4px;
}

.roadmap-item-card {
    background: var(--lmt-card);
    border: 1px solid var(--lmt-border);
    border-left: 3px solid var(--lmt-navy);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.roadmap-item-card.status-complete { border-left-color: var(--status-ok); opacity: 0.75; }
.roadmap-item-card.status-in_progress { border-left-color: var(--status-upcoming); }
.roadmap-item-card.status-deferred { border-left-color: var(--status-na); opacity: 0.75; }
.roadmap-item-card.status-suggested { border-left-color: #6d4fa8; border-left-style: dashed; }

.roadmap-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.roadmap-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lmt-text);
    line-height: 1.3;
}

.roadmap-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.badge-roadmap-priority-high { background: #fbe9e7; color: var(--status-past-due); }
.badge-roadmap-priority-medium { background: #fdf1de; color: var(--status-upcoming); }
.badge-roadmap-priority-low { background: #eceef1; color: var(--status-na); }

/* Dark mode: the pastel badges above have fixed light backgrounds, which
   read as bright stickers on a dark page. Give them dark tints with light
   text (the same palette as the task-row badges). Solid badges - tiers
   S/A/B, Admin, Power User, matrix - already work in both. */
:root[data-theme="dark"] .badge-status-past-due,
:root[data-theme="dark"] .badge-maturity-unaware,
:root[data-theme="dark"] .badge-roadmap-priority-high { background: #4a2c27; color: #f0a493; }
:root[data-theme="dark"] .badge-status-upcoming,
:root[data-theme="dark"] .badge-maturity-experimenting,
:root[data-theme="dark"] .badge-roadmap-priority-medium { background: #473a1f; color: #e8b860; }
:root[data-theme="dark"] .badge-status-ok,
:root[data-theme="dark"] .badge-maturity-managed,
:root[data-theme="dark"] .badge-role-sales { background: #1f3d30; color: #6fcf97; }
:root[data-theme="dark"] .badge-status-na,
:root[data-theme="dark"] .badge-role-readonly,
:root[data-theme="dark"] .badge-roadmap-priority-low { background: #2a3142; color: #a8b0c0; }
:root[data-theme="dark"] .badge-cadence,
:root[data-theme="dark"] .badge-maturity-adopting,
:root[data-theme="dark"] .badge-role-user { background: #313c5c; color: #b8c6ea; }
:root[data-theme="dark"] .badge-status-suggested { background: #352c4d; color: #c3b1ee; }
:root[data-theme="dark"] .badge-tier-C { background: #4a5163; color: #e6e8ee; }
:root[data-theme="dark"] .badge-tier-D { background: #343b4c; color: #c4cad4; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-status-past-due,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-maturity-unaware,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-roadmap-priority-high { background: #4a2c27; color: #f0a493; }
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-status-upcoming,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-maturity-experimenting,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-roadmap-priority-medium { background: #473a1f; color: #e8b860; }
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-status-ok,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-maturity-managed,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-role-sales { background: #1f3d30; color: #6fcf97; }
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-status-na,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-role-readonly,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-roadmap-priority-low { background: #2a3142; color: #a8b0c0; }
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-cadence,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-maturity-adopting,
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-role-user { background: #313c5c; color: #b8c6ea; }
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-status-suggested { background: #352c4d; color: #c3b1ee; }
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-tier-C { background: #4a5163; color: #e6e8ee; }
    :root:not([data-theme="light"]):not([data-theme="halloween"]):not([data-theme="christmas"]):not([data-theme="fall"]) .badge-tier-D { background: #343b4c; color: #c4cad4; }
}

.roadmap-item-cost {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lmt-navy-dark);
}

.roadmap-item-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--lmt-text-muted);
    white-space: pre-wrap;
}

.roadmap-status-form { display: block; }

.roadmap-status-select {
    width: 100%;
    padding: 3px 8px;
    font-size: 11.5px;
    border: none;
    cursor: pointer;
}

.roadmap-past {
    background: var(--lmt-card);
    border: 1px solid var(--lmt-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 12px;
}

.roadmap-past summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--lmt-navy-dark);
    font-size: 14px;
}

.roadmap-past[open] summary { margin-bottom: 10px; }

/* Frozen Responsibility Matrix revision content (see
   responsibility_matrix_snapshot.html) - these class names are baked
   permanently into stored static_html, so keep them stable even if the
   visuals here change later. */
.matrix-doc-title { margin-top: 0; color: var(--lmt-navy); }
.matrix-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin-bottom: 12px; }
.matrix-meta dt { color: var(--lmt-text-muted); font-weight: 600; }
.matrix-meta dd { margin: 0; }
.matrix-meta-label { font-weight: 600; margin-bottom: 4px; }
.matrix-contributors { margin: 0 0 16px; padding-left: 20px; }
.matrix-section-title { color: var(--lmt-navy); margin: 20px 0 8px; }
.matrix-table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
.matrix-table th, .matrix-table td { border: 1px solid var(--lmt-border); padding: 8px; vertical-align: top; text-align: left; font-size: 0.9rem; }
.matrix-table th { background: var(--lmt-navy); color: #fff; }
.matrix-note { white-space: pre-wrap; word-break: break-word; }

@media (max-width: 900px) {
    .roadmap-board { flex-direction: column; }
    .roadmap-column { width: 100%; }
}

/* ---------- Rich-text field (check-in notes) - see base.html's .rich-text-field JS ---------- */
.rich-text-field { width: 100%; }

.rich-text-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 6px;
    border: 1px solid var(--lmt-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--lmt-surface-alt);
}

.rich-text-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 28px;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--lmt-text);
    cursor: pointer;
    font-size: 13px;
}

.rich-text-toolbar button:hover { background: var(--lmt-card); border-color: var(--lmt-border); }
.rich-text-toolbar button.active { background: var(--lmt-card); border-color: var(--lmt-navy-light); }
.rich-text-toolbar select { width: auto; padding: 4px 6px; font-size: 13px; }
.rich-text-toolbar input[type="color"] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--lmt-border); border-radius: 4px; cursor: pointer; background: none; }
.rich-text-toolbar-sep { width: 1px; height: 20px; background: var(--lmt-border); margin: 0 2px; }

.rt-color-picker { position: relative; }

.rt-color-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--lmt-card);
    border: 1px solid var(--lmt-border);
    border-radius: 6px;
    box-shadow: 0 6px 16px var(--lmt-shadow-hover);
    min-width: 130px;
}

/* An author rule always beats the browser's own [hidden]{display:none} UA
   style regardless of specificity/order, so the plain .rt-color-popup rule
   above (display:flex) was permanently overriding it - toggling the
   `hidden` attribute in JS had no visible effect. This restores it. */
.rt-color-popup[hidden] { display: none; }

.rt-color-auto {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--lmt-border);
    border-radius: 4px;
    background: transparent;
    color: var(--lmt-navy);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.rt-color-auto:hover { background: var(--lmt-surface-alt); }

.rt-color-trigger { flex-direction: column; gap: 1px; padding: 3px 6px; line-height: 1; }
.rt-color-trigger-letter { font-weight: 700; font-size: 13px; }
.rt-color-trigger-bar { display: block; width: 16px; height: 3px; border-radius: 1px; }

.rt-color-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.rt-color-swatch {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--lmt-border);
    border-radius: 4px;
    cursor: pointer;
}

.rt-color-swatch:hover { outline: 2px solid var(--lmt-navy-light); outline-offset: 1px; }

.rt-color-custom-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    color: var(--lmt-text-muted);
    padding-top: 4px;
    border-top: 1px solid var(--lmt-border);
}

.rt-color-popup input[type="color"] { width: 40px; height: 24px; padding: 0; }

.rich-text-editable {
    min-height: 90px;
    padding: 9px 12px;
    border: 1px solid var(--lmt-border);
    border-radius: 0 0 6px 6px;
    background: var(--lmt-input-bg);
    color: var(--lmt-text);
    font-size: 14px;
    overflow-y: auto;
}

.rich-text-editable:focus { outline: none; border-color: var(--lmt-navy-light); }
.rich-text-editable:empty::before { content: attr(data-placeholder); color: var(--lmt-text-muted); }
.rich-text-editable p, .rich-text-editable div { margin: 0 0 4px; }
.rich-text-editable ul, .rich-text-editable ol { margin: 0 0 4px; padding-left: 22px; }

.rich-text-display p, .rich-text-display div { margin: 0 0 4px; }
.rich-text-display p:last-child, .rich-text-display div:last-child { margin-bottom: 0; }
.rich-text-display ul, .rich-text-display ol { margin: 0 0 4px; padding-left: 22px; }

/* ---------- SBR form: Attendees / Action Items repeatable rows ---------- */
.attendee-row, .action-item-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.attendee-row input, .action-item-row input, .action-item-row select { flex: 1; min-width: 140px; }