/* ==========================================================================
   Form theme: shared look for all form / detail pages
   Change the colors in the :root block below. Everything else reads from it.

   The palettes

    Name	            Feel
    navy-gold	        Navy header, gold accents. Corporate and traditional.
    burgundy-stone	    Deep wine with a warm stone accent. Formal and refined.
    slate-teal	        Blue-grey with a teal accent. Modern and calm.
    charcoal-copper	    Near-black with copper accents. Bold and understated.
    royal-purple	    Deep purple with gold. Premium look.
    forest-sage	        Dark green with an olive-sage accent. Natural and softer than the default.
    ocean-blue	        Corporate blue with a sky accent. Familiar and clean.
    midnight-rose	    Dark indigo with a rose accent. Elegant.
    espresso-cream	    Brown with a tan accent on warm backgrounds. Cozy and classic.
    graphite	        Neutral greys. The most minimal option.
    crimson-ash         Deep red with a cool ash-grey accent. Serious and strong.
    indigo-amber        Rich indigo with an amber accent. Energetic but professional.
    teal-coral          Deep teal with a coral-orange accent. Fresh and friendly.
    plum-mauve          Dark plum with a soft mauve accent. Creative and warm.
    terracotta-sand     Clay red-brown with a sand accent. Earthy and inviting.
    steel-orange        Steel blue-grey with an orange accent. Industrial and clear.
    olive-bronze        Dark olive with a bronze accent. Heritage and grounded.
    black-lime          Near-black with a lime accent. Bold and modern.
    sky-light           Soft blue with a pale sky accent. Airy and clean.
    mint-fresh          Gentle green with a mint accent. Fresh and calm.
    blush-pink          Dusty rose with a light pink accent. Soft and friendly.
    lavender-mist       Muted violet with a lavender accent. Light and creative.
    peach-apricot       Warm apricot with a peach accent. Sunny and welcoming.
    butter-olive        Soft olive with a butter-yellow accent. Gentle and natural.
    cloud-grey          Light slate with a pale grey-blue accent. Quiet and neutral.
    aqua-sand           Soft teal with a sand accent. Beachy and relaxed.

    <html data-theme="navy-gold">                  {{-- whole app --}}
    <div class="ft-page" data-theme="slate-teal">  {{-- one page only --}}
   ========================================================================== */

:root {
    /* Brand */
    --ft-ink: #0f2a2b; /* header band, primary button, headings */
    --ft-ink-soft: #1c3d3e; /* primary button hover */
    --ft-accent: #b08d57; /* brass lines, tile edge, header underline */
    --ft-accent-dark: #8f6f3f;
    --ft-accent-ring: rgba(176, 141, 87, 0.25); /* focus ring */

    /* Surfaces & text */
    --ft-surface: #ffffff;
    --ft-mist: #f6f7f5; /* tiles, table headers, read-only fields */
    --ft-row-hover: #fbfcfb;
    --ft-line: #e3e7e3; /* dividers, card border */
    --ft-border: #d9ded9; /* input borders */
    --ft-text: #2b3437;
    --ft-muted: #6b7678;
    --ft-on-ink: #ffffff;
    --ft-on-ink-muted: rgba(255, 255, 255, 0.65);
    --ft-shadow: rgba(15, 42, 43, 0.3);
    --ft-disabled: #9aa5a5;

    /* Status colors: bg / text / border */
    --ft-success-bg: #e4f3ea;
    --ft-success-text: #1f6b45;
    --ft-success-border: #8cc9a6;
    --ft-success-solid: #2e8b57;
    --ft-danger-bg: #fbe7e7;
    --ft-danger-text: #a42a2a;
    --ft-danger-border: #e59a9a;
    --ft-danger-solid: #c0392b;
    --ft-warning-bg: #fdf6e3;
    --ft-warning-text: #8a6414;
    --ft-warning-border: #e6c36e;
    --ft-orange-bg: #fdeede;
    --ft-orange-text: #9a4f0f;
    --ft-orange-border: #efb27a;
    --ft-neutral-bg: #eceeed;
    --ft-neutral-text: #4a5558;
}

/* ==========================================================================
   Ready-made palettes
   The default palette (emerald + brass) is the :root block above.
   To switch, add data-theme to <html> (whole app) or to the .ft-page
   wrapper (one page):

       <html data-theme="navy-gold">
       <div class="ft-page" data-theme="burgundy-stone">

   Remove the attribute to go back to the default.
   Status colors (green / red / amber) stay the same in every palette.

   Available: navy-gold, burgundy-stone, slate-teal, charcoal-copper,
   royal-purple, forest-sage, ocean-blue, midnight-rose, espresso-cream,
   graphite
   ========================================================================== */

/* Navy + gold */
[data-theme="navy-gold"] {
    --ft-ink: #14213d;
    --ft-ink-soft: #22345c;
    --ft-accent: #c9a227;
    --ft-accent-dark: #a0801c;
    --ft-accent-ring: rgba(201, 162, 39, 0.26);
    --ft-mist: #f5f6f9;
    --ft-line: #e2e5ec;
    --ft-border: #d5d9e3;
    --ft-row-hover: #fafbfd;
    --ft-text: #232a3b;
    --ft-muted: #697189;
    --ft-shadow: rgba(20, 33, 61, 0.3);
    --ft-disabled: #9aa3b5;
}

/* Burgundy + stone */
[data-theme="burgundy-stone"] {
    --ft-ink: #4a1420;
    --ft-ink-soft: #661c2c;
    --ft-accent: #b8956a;
    --ft-accent-dark: #946f45;
    --ft-accent-ring: rgba(184, 149, 106, 0.26);
    --ft-mist: #f8f5f2;
    --ft-line: #ebe4de;
    --ft-border: #ddd3cb;
    --ft-row-hover: #fcfaf8;
    --ft-text: #342a2c;
    --ft-muted: #7a6b6e;
    --ft-shadow: rgba(74, 20, 32, 0.3);
    --ft-disabled: #b0a2a4;
}

/* Slate + teal */
[data-theme="slate-teal"] {
    --ft-ink: #1f2f3d;
    --ft-ink-soft: #2c4256;
    --ft-accent: #2a9d8f;
    --ft-accent-dark: #1f7a6f;
    --ft-accent-ring: rgba(42, 157, 143, 0.26);
    --ft-mist: #f4f7f8;
    --ft-line: #e1e8eb;
    --ft-border: #d3dde1;
    --ft-row-hover: #f9fbfb;
    --ft-text: #26323b;
    --ft-muted: #66767f;
    --ft-shadow: rgba(31, 47, 61, 0.3);
    --ft-disabled: #9aaab2;
}

/* Charcoal + copper */
[data-theme="charcoal-copper"] {
    --ft-ink: #26262b;
    --ft-ink-soft: #3a3a41;
    --ft-accent: #b87333;
    --ft-accent-dark: #965a24;
    --ft-accent-ring: rgba(184, 115, 51, 0.26);
    --ft-mist: #f6f5f3;
    --ft-line: #e6e3df;
    --ft-border: #d8d4ce;
    --ft-row-hover: #fbfaf9;
    --ft-text: #2c2b2e;
    --ft-muted: #6f6c70;
    --ft-shadow: rgba(38, 38, 43, 0.3);
    --ft-disabled: #a5a2a6;
}

/* Royal purple + gold */
[data-theme="royal-purple"] {
    --ft-ink: #2e1f5e;
    --ft-ink-soft: #44317f;
    --ft-accent: #d4a84b;
    --ft-accent-dark: #a8832f;
    --ft-accent-ring: rgba(212, 168, 75, 0.26);
    --ft-mist: #f7f6fb;
    --ft-line: #e6e3f0;
    --ft-border: #d9d5e8;
    --ft-row-hover: #fbfafd;
    --ft-text: #2a2540;
    --ft-muted: #6e6a85;
    --ft-shadow: rgba(46, 31, 94, 0.3);
    --ft-disabled: #a8a4bd;
}

/* Forest + sage */
[data-theme="forest-sage"] {
    --ft-ink: #1e3a2b;
    --ft-ink-soft: #2c5740;
    --ft-accent: #8a9a5b;
    --ft-accent-dark: #6c7a43;
    --ft-accent-ring: rgba(138, 154, 91, 0.26);
    --ft-mist: #f5f7f2;
    --ft-line: #e2e7dc;
    --ft-border: #d4dccb;
    --ft-row-hover: #fafbf8;
    --ft-text: #263229;
    --ft-muted: #667563;
    --ft-shadow: rgba(30, 58, 43, 0.3);
    --ft-disabled: #9aa896;
}

/* Ocean blue + sky */
[data-theme="ocean-blue"] {
    --ft-ink: #0b3c5d;
    --ft-ink-soft: #14577f;
    --ft-accent: #328cc1;
    --ft-accent-dark: #226a95;
    --ft-accent-ring: rgba(50, 140, 193, 0.26);
    --ft-mist: #f3f7fa;
    --ft-line: #dfe8ee;
    --ft-border: #d0dde6;
    --ft-row-hover: #f9fbfd;
    --ft-text: #20313d;
    --ft-muted: #627584;
    --ft-shadow: rgba(11, 60, 93, 0.3);
    --ft-disabled: #9bb0bd;
}

/* Midnight + rose */
[data-theme="midnight-rose"] {
    --ft-ink: #1d1b2f;
    --ft-ink-soft: #2f2c4a;
    --ft-accent: #c9707f;
    --ft-accent-dark: #a4535f;
    --ft-accent-ring: rgba(201, 112, 127, 0.26);
    --ft-mist: #f7f5f7;
    --ft-line: #e8e3e8;
    --ft-border: #dbd4db;
    --ft-row-hover: #fbfafb;
    --ft-text: #2a2833;
    --ft-muted: #706c7b;
    --ft-shadow: rgba(29, 27, 47, 0.3);
    --ft-disabled: #aaa6b4;
}

/* Espresso + cream */
[data-theme="espresso-cream"] {
    --ft-ink: #3b2a20;
    --ft-ink-soft: #55402f;
    --ft-accent: #c19a6b;
    --ft-accent-dark: #9a774c;
    --ft-accent-ring: rgba(193, 154, 107, 0.26);
    --ft-mist: #f8f4ee;
    --ft-line: #eae2d6;
    --ft-border: #ddd2c3;
    --ft-row-hover: #fcfaf6;
    --ft-text: #33291f;
    --ft-muted: #7a6b5b;
    --ft-shadow: rgba(59, 42, 32, 0.3);
    --ft-disabled: #b3a595;
}

/* Graphite (minimal, neutral) */
[data-theme="graphite"] {
    --ft-ink: #111827;
    --ft-ink-soft: #1f2937;
    --ft-accent: #6b7280;
    --ft-accent-dark: #4b5563;
    --ft-accent-ring: rgba(107, 114, 128, 0.26);
    --ft-mist: #f6f7f8;
    --ft-line: #e5e7eb;
    --ft-border: #d1d5db;
    --ft-row-hover: #fafafa;
    --ft-text: #1f2937;
    --ft-muted: #6b7280;
    --ft-shadow: rgba(17, 24, 39, 0.3);
    --ft-disabled: #9ca3af;
}

/* Crimson + ash */
[data-theme="crimson-ash"] {
    --ft-ink: #7b1e1e;
    --ft-ink-soft: #9a2a2a;
    --ft-accent: #8d99a6;
    --ft-accent-dark: #6b7783;
    --ft-accent-ring: rgba(141, 153, 166, 0.26);
    --ft-mist: #f7f6f6;
    --ft-line: #e8e5e5;
    --ft-border: #dbd6d6;
    --ft-row-hover: #fbfafa;
    --ft-text: #2e2a2a;
    --ft-muted: #766e6e;
    --ft-shadow: rgba(123, 30, 30, 0.3);
    --ft-disabled: #aea6a6;
}

/* Indigo + amber */
[data-theme="indigo-amber"] {
    --ft-ink: #272b66;
    --ft-ink-soft: #3a3f8a;
    --ft-accent: #f0a202;
    --ft-accent-dark: #c28100;
    --ft-accent-ring: rgba(240, 162, 2, 0.26);
    --ft-mist: #f5f5fa;
    --ft-line: #e3e4f0;
    --ft-border: #d5d7e8;
    --ft-row-hover: #fafafd;
    --ft-text: #25274a;
    --ft-muted: #6a6d8f;
    --ft-shadow: rgba(39, 43, 102, 0.3);
    --ft-disabled: #a0a3c0;
}

/* Teal + coral */
[data-theme="teal-coral"] {
    --ft-ink: #0f4c5c;
    --ft-ink-soft: #176a7e;
    --ft-accent: #e36414;
    --ft-accent-dark: #b94e0c;
    --ft-accent-ring: rgba(227, 100, 20, 0.26);
    --ft-mist: #f3f7f8;
    --ft-line: #dfe9eb;
    --ft-border: #d0dee1;
    --ft-row-hover: #f9fbfc;
    --ft-text: #1f3338;
    --ft-muted: #61777c;
    --ft-shadow: rgba(15, 76, 92, 0.3);
    --ft-disabled: #9bb2b7;
}

/* Plum + mauve */
[data-theme="plum-mauve"] {
    --ft-ink: #4a2545;
    --ft-ink-soft: #663562;
    --ft-accent: #b78fb0;
    --ft-accent-dark: #946b8d;
    --ft-accent-ring: rgba(183, 143, 176, 0.26);
    --ft-mist: #f8f5f8;
    --ft-line: #eae3ea;
    --ft-border: #ddd3dd;
    --ft-row-hover: #fcfafc;
    --ft-text: #332834;
    --ft-muted: #766a77;
    --ft-shadow: rgba(74, 37, 69, 0.3);
    --ft-disabled: #b0a3b0;
}

/* Terracotta + sand */
[data-theme="terracotta-sand"] {
    --ft-ink: #7a3b26;
    --ft-ink-soft: #98492f;
    --ft-accent: #d9a66c;
    --ft-accent-dark: #b3834a;
    --ft-accent-ring: rgba(217, 166, 108, 0.28);
    --ft-mist: #faf5f0;
    --ft-line: #eee3d8;
    --ft-border: #e2d3c4;
    --ft-row-hover: #fdfaf7;
    --ft-text: #3a2b24;
    --ft-muted: #85705f;
    --ft-shadow: rgba(122, 59, 38, 0.3);
    --ft-disabled: #b8a595;
}

/* Steel + orange */
[data-theme="steel-orange"] {
    --ft-ink: #2b3a4a;
    --ft-ink-soft: #3d5268;
    --ft-accent: #e8710a;
    --ft-accent-dark: #bd5a05;
    --ft-accent-ring: rgba(232, 113, 10, 0.26);
    --ft-mist: #f4f6f8;
    --ft-line: #e2e7ec;
    --ft-border: #d3dae1;
    --ft-row-hover: #f9fafb;
    --ft-text: #26303a;
    --ft-muted: #66737f;
    --ft-shadow: rgba(43, 58, 74, 0.3);
    --ft-disabled: #9ba8b4;
}

/* Olive + bronze */
[data-theme="olive-bronze"] {
    --ft-ink: #3b3d1c;
    --ft-ink-soft: #54572b;
    --ft-accent: #a67c37;
    --ft-accent-dark: #84602a;
    --ft-accent-ring: rgba(166, 124, 55, 0.26);
    --ft-mist: #f7f6f0;
    --ft-line: #e7e6da;
    --ft-border: #dad8c8;
    --ft-row-hover: #fbfbf7;
    --ft-text: #302f22;
    --ft-muted: #726f5c;
    --ft-shadow: rgba(59, 61, 28, 0.3);
    --ft-disabled: #aeab98;
}

/* Black + lime */
[data-theme="black-lime"] {
    --ft-ink: #0f1115;
    --ft-ink-soft: #1f232b;
    --ft-accent: #84cc16;
    --ft-accent-dark: #65a30d;
    --ft-accent-ring: rgba(132, 204, 22, 0.28);
    --ft-mist: #f5f6f4;
    --ft-line: #e4e6e1;
    --ft-border: #d6d9d2;
    --ft-row-hover: #fafbf9;
    --ft-text: #1c1f24;
    --ft-muted: #6a6f68;
    --ft-shadow: rgba(15, 17, 21, 0.3);
    --ft-disabled: #a0a59b;
}

/* Sky light */
[data-theme="sky-light"] {
    --ft-ink: #2f6f9f;
    --ft-ink-soft: #3f86b8;
    --ft-accent: #7cc0e8;
    --ft-accent-dark: #4fa3d4;
    --ft-accent-ring: rgba(124, 192, 232, 0.3);
    --ft-mist: #f2f8fc;
    --ft-line: #e0edf5;
    --ft-border: #d0e2ee;
    --ft-row-hover: #f8fbfd;
    --ft-text: #243645;
    --ft-muted: #67808f;
    --ft-shadow: rgba(47, 111, 159, 0.25);
    --ft-disabled: #a3b7c4;
}

/* Mint fresh */
[data-theme="mint-fresh"] {
    --ft-ink: #2f7d68;
    --ft-ink-soft: #3d9a81;
    --ft-accent: #8fd5bd;
    --ft-accent-dark: #5fb89c;
    --ft-accent-ring: rgba(143, 213, 189, 0.3);
    --ft-mist: #f2faf7;
    --ft-line: #dff0e9;
    --ft-border: #cfe5db;
    --ft-row-hover: #f8fcfa;
    --ft-text: #24372f;
    --ft-muted: #688377;
    --ft-shadow: rgba(47, 125, 104, 0.25);
    --ft-disabled: #a2bab0;
}

/* Blush pink */
[data-theme="blush-pink"] {
    --ft-ink: #b0456a;
    --ft-ink-soft: #c55c80;
    --ft-accent: #f2a7bf;
    --ft-accent-dark: #e07f9f;
    --ft-accent-ring: rgba(242, 167, 191, 0.3);
    --ft-mist: #fdf5f8;
    --ft-line: #f5e2e9;
    --ft-border: #ecd2dc;
    --ft-row-hover: #fffafb;
    --ft-text: #3b2831;
    --ft-muted: #86707a;
    --ft-shadow: rgba(176, 69, 106, 0.25);
    --ft-disabled: #c4aab4;
}

/* Lavender mist */
[data-theme="lavender-mist"] {
    --ft-ink: #6d5bb5;
    --ft-ink-soft: #8070c6;
    --ft-accent: #c4b8f0;
    --ft-accent-dark: #a393e0;
    --ft-accent-ring: rgba(196, 184, 240, 0.32);
    --ft-mist: #f7f5fd;
    --ft-line: #e8e4f6;
    --ft-border: #dcd6ef;
    --ft-row-hover: #fbfaff;
    --ft-text: #2f2a45;
    --ft-muted: #787394;
    --ft-shadow: rgba(109, 91, 181, 0.25);
    --ft-disabled: #b5b0cc;
}

/* Peach apricot */
[data-theme="peach-apricot"] {
    --ft-ink: #c2571a;
    --ft-ink-soft: #d66b2c;
    --ft-accent: #f7c59f;
    --ft-accent-dark: #eba06c;
    --ft-accent-ring: rgba(247, 197, 159, 0.35);
    --ft-mist: #fef8f2;
    --ft-line: #f6e8db;
    --ft-border: #eddac9;
    --ft-row-hover: #fffcf9;
    --ft-text: #3c2e24;
    --ft-muted: #8a7565;
    --ft-shadow: rgba(194, 87, 26, 0.25);
    --ft-disabled: #c4b2a3;
}

/* Butter + olive */
[data-theme="butter-olive"] {
    --ft-ink: #667a2b;
    --ft-ink-soft: #7b9137;
    --ft-accent: #e6d96f;
    --ft-accent-dark: #c9bb48;
    --ft-accent-ring: rgba(230, 217, 111, 0.38);
    --ft-mist: #fbfbf0;
    --ft-line: #eeeedb;
    --ft-border: #e1e1c8;
    --ft-row-hover: #fdfdf7;
    --ft-text: #33361f;
    --ft-muted: #77795a;
    --ft-shadow: rgba(102, 122, 43, 0.25);
    --ft-disabled: #b3b59a;
}

/* Cloud grey */
[data-theme="cloud-grey"] {
    --ft-ink: #55657a;
    --ft-ink-soft: #6b7d93;
    --ft-accent: #aebccd;
    --ft-accent-dark: #8d9eb3;
    --ft-accent-ring: rgba(174, 188, 205, 0.35);
    --ft-mist: #f6f8fa;
    --ft-line: #e6eaef;
    --ft-border: #d8dee6;
    --ft-row-hover: #fafbfc;
    --ft-text: #2a323d;
    --ft-muted: #6f7a89;
    --ft-shadow: rgba(85, 101, 122, 0.25);
    --ft-disabled: #a9b2bf;
}

/* Aqua + sand */
[data-theme="aqua-sand"] {
    --ft-ink: #237a83;
    --ft-ink-soft: #2f949e;
    --ft-accent: #f0d9a8;
    --ft-accent-dark: #dcc080;
    --ft-accent-ring: rgba(240, 217, 168, 0.4);
    --ft-mist: #f3fafa;
    --ft-line: #e0eff0;
    --ft-border: #d0e4e6;
    --ft-row-hover: #f9fcfc;
    --ft-text: #23373a;
    --ft-muted: #668084;
    --ft-shadow: rgba(35, 122, 131, 0.25);
    --ft-disabled: #a2babd;
}

/* Card ------------------------------------------------------------------- */
.ft-card {
    background: var(--ft-surface);
    border: 1px solid var(--ft-line);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 14px 34px -20px var(--ft-shadow);
    overflow: hidden;
}

.ft-card-head {
    background: var(--ft-ink);
    color: var(--ft-on-ink);
    padding: 1.5rem 2rem;
    border-bottom: 3px solid var(--ft-accent);
}

.ft-card-head h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ft-card-head p {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--ft-on-ink-muted);
}

.ft-body {
    padding: 2rem;
    color: var(--ft-text);
}

.ft-divider {
    border-top: 1px solid var(--ft-line);
}

/* Info tiles ------------------------------------------------------------- */
.ft-eyebrow {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ft-muted);
}

.ft-info {
    background: var(--ft-mist);
    border-left: 3px solid var(--ft-accent);
    border-radius: 4px;
    padding: 0.85rem 1rem;
}

.ft-info-value {
    margin-top: 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ft-ink);
}

/* Section titles --------------------------------------------------------- */
.ft-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 2rem 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ft-ink);
}

.ft-section-title::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--ft-accent);
}

/* Fields ----------------------------------------------------------------- */
.ft-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ft-text);
}

.ft-field {
    width: 100%;
    background: var(--ft-surface);
    border: 1px solid var(--ft-border);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-size: 0.75rem;
    color: var(--ft-text);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.ft-field:focus {
    outline: none;
    border-color: var(--ft-ink);
    box-shadow: 0 0 0 3px var(--ft-accent-ring);
}

.ft-field[readonly] {
    background: var(--ft-mist);
    color: var(--ft-muted);
}

.ft-field-plain {
    border-color: transparent;
    background: transparent;
    font-weight: 600;
    color: var(--ft-ink);
}

/* Tables ----------------------------------------------------------------- */
.ft-table-wrap {
    border: 1px solid var(--ft-line);
    border-radius: 10px;
    overflow-x: auto;
}

.ft-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.ft-table thead th {
    background: var(--ft-mist);
    color: var(--ft-ink);
    padding: 0.8rem 1rem;
    text-align: left;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--ft-line);
}

.ft-table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ft-line);
}

.ft-table tbody tr:last-child td {
    border-bottom: 0;
}
.ft-table tbody tr:hover {
    background: var(--ft-row-hover);
}

.ft-empty {
    text-align: center;
    color: var(--ft-muted);
    padding: 1.5rem 1rem !important;
}

/* Badges ----------------------------------------------------------------- */
.ft-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
}

.ft-badge-ok {
    background: var(--ft-success-bg);
    color: var(--ft-success-text);
}
.ft-badge-no {
    background: var(--ft-danger-bg);
    color: var(--ft-danger-text);
}
.ft-badge-na {
    background: var(--ft-neutral-bg);
    color: var(--ft-neutral-text);
}

/* Status select (color follows data-status) ------------------------------ */
.ft-status {
    width: 100%;
    border: 1px solid var(--ft-border);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}

.ft-status:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--ft-accent-ring);
}

.ft-status[data-status="0"] {
    background: var(--ft-warning-bg);
    border-color: var(--ft-warning-border);
    color: var(--ft-warning-text);
}
.ft-status[data-status="1"] {
    background: var(--ft-success-bg);
    border-color: var(--ft-success-border);
    color: var(--ft-success-text);
}
.ft-status[data-status="2"] {
    background: var(--ft-orange-bg);
    border-color: var(--ft-orange-border);
    color: var(--ft-orange-text);
}
.ft-status[data-status="3"] {
    background: var(--ft-danger-bg);
    border-color: var(--ft-danger-border);
    color: var(--ft-danger-text);
}

.ft-status option {
    background: var(--ft-surface);
    color: var(--ft-text);
    font-weight: 400;
}

/* Alerts ----------------------------------------------------------------- */
.ft-alert {
    border-left: 4px solid;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

.ft-alert-error {
    background: var(--ft-danger-bg);
    border-color: var(--ft-danger-solid);
    color: var(--ft-danger-text);
}
.ft-alert-success {
    background: var(--ft-success-bg);
    border-color: var(--ft-success-solid);
    color: var(--ft-success-text);
}

/* Buttons ---------------------------------------------------------------- */
.ft-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.ft-btn:focus-visible {
    outline: 2px solid var(--ft-accent);
    outline-offset: 2px;
}

.ft-btn-ghost {
    color: var(--ft-ink);
    background: var(--ft-surface);
    border: 1px solid var(--ft-border);
}

.ft-btn-ghost:hover {
    background: var(--ft-mist);
    border-color: var(--ft-ink);
}

.ft-btn-primary {
    color: var(--ft-on-ink);
    background: var(--ft-ink);
    border: 1px solid var(--ft-ink);
}

.ft-btn-primary:hover {
    background: var(--ft-ink-soft);
}

.ft-btn-primary:disabled {
    background: var(--ft-disabled);
    border-color: var(--ft-disabled);
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .ft-page * {
        transition: none !important;
    }
}

/* ==========================================================================
   Login page
   Use on the guest-layout page:  <div class="ft-card ft-login"> ... </div>
   The wallpaper path is relative to this file (public/assets/css/ -> public/images/).
   ========================================================================== */

body:has(.ft-login) {
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--ft-ink) 82%, transparent),
            color-mix(in srgb, var(--ft-ink) 88%, transparent)
        ),
        url("../../images/wallpaper.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div:has(> .ft-login) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 26rem !important;
    overflow: visible !important;
}

.ft-login {
    border: 1px solid color-mix(in srgb, var(--ft-accent) 60%, transparent);
}

.ft-login .ft-card-head h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2rem;
    line-height: 1.1;
}

.ft-login input[type="checkbox"] {
    border-radius: 3px;
    border-color: var(--ft-border);
    color: var(--ft-ink);
}

.ft-login input[type="checkbox"]:checked {
    border-color: var(--ft-ink);
}

.ft-login input[type="checkbox"]:focus,
.ft-login a:focus {
    --tw-ring-color: var(--ft-accent);
}

.ft-login a {
    color: var(--ft-ink);
    text-decoration-color: var(--ft-accent);
    text-underline-offset: 3px;
}

.ft-login a:hover {
    color: var(--ft-accent-dark);
}