/*!
 * TaktBase UI – the one design-system file.
 * Rules and usage: docs/DESIGN.md · live examples: /styleguide
 *
 * Loaded LAST on every app and login page (after bootstrap, dashboard.css,
 * style.css, custom.css, toastr, DataTables, tom-select, flatpickr), so it
 * restyles the legacy classes globally without touching the views.
 *
 *  0  Fonts            6  Forms               12 Modals & overlays
 *  1  Tokens           7  Tables & DataTables 13 Third-party (tom-select, flatpickr, toastr, cookie banner)
 *  2  Legacy aliases   8  Cards & panels      14 Legacy page normalisation
 *  3  Base             9  Badges & status     15 Feature blocks (recording, cost-benefit …)
 *  4  App shell       10  Hints & alerts      16 Utilities
 *  5  Buttons         11  KPI, tabs, empty    17 Responsive & motion
 * 18  Chips, live pulse, chart download, process navigation
 * 19  TaktBase works (optimizer animations: button, overlay, gliding)
 */

/* =====================================================================
   0 · FONTS – local woff2 only (no font CDN at runtime, GDPR)
   ===================================================================== */
/* Inter – UI text, tables, numbers (OFL, fonts/Inter/OFL.txt) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Inter/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Inter/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Poppins – headings (OFL, fonts/Poppins/OFL.txt) */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Poppins/poppins-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Poppins/poppins-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Poppins/poppins-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Poppins/poppins-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Poppins/poppins-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Poppins/poppins-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Legacy family names used all over the old CSS and inline styles.
   'Poppins-Regular' / 'Poppins-Light' / 'Poppins-Medium' now render the UI font (Inter);
   'Poppins-SemiBold' / 'Poppins-Bold' keep Poppins but load the small woff2 files.
   Declared after dashboard.css/style.css with the same descriptors, so these win. */
@font-face { font-family: 'Poppins-Regular'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Regular'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Regular'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Regular'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Inter/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Regular'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Regular'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Regular'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Regular'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Inter/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Light'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Light'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Light'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Light'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Medium'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Medium'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Medium'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Medium'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-SemiBold'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Poppins/poppins-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-SemiBold'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Poppins/poppins-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-SemiBold'; font-style: normal; font-weight: 500 1000; font-display: swap; src: url(../fonts/Poppins/poppins-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-SemiBold'; font-style: normal; font-weight: 500 1000; font-display: swap; src: url(../fonts/Poppins/poppins-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Bold'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Poppins/poppins-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Bold'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Poppins/poppins-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins-Bold'; font-style: normal; font-weight: 500 1000; font-display: swap; src: url(../fonts/Poppins/poppins-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins-Bold'; font-style: normal; font-weight: 500 1000; font-display: swap; src: url(../fonts/Poppins/poppins-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   1 · TOKENS – change values here, never hard-code colours in views
   ===================================================================== */
:root {
    color-scheme: dark;

    /* -- brand primitives (the only raw colours in the system) -- */
    --tb-navy-950: #0B1426;   /* brand navy – app background */
    --tb-navy-900: #0F1B30;
    --tb-navy-800: #142339;   /* brand navy 2 – cards */
    --tb-navy-700: #1A2B45;
    --tb-navy-600: #22365A;
    --tb-navy-500: #2C4268;
    --tb-navy-400: #3B5078;
    --tb-navy-300: #5D6D8C;
    --tb-lime-300: #B5E66A;
    --tb-lime-400: #95D62B;   /* hover */
    --tb-lime-500: #84CC16;   /* THE green */
    --tb-lime-600: #6DAA10;   /* pressed */
    --tb-pink-300: #FF6B86;   /* pink as text on navy (AA) */
    --tb-pink-400: #FF4D72;   /* hover */
    --tb-pink-500: #F33058;   /* THE pink */
    --tb-amber-500: #F5A524;
    --tb-blue-300: #6EA8FF;
    --tb-blue-500: #3B82F6;
    --tb-cyan-400: #22D3EE;
    --tb-white: #FFFFFF;

    /* -- surfaces (dark → light = low → high elevation) -- */
    --tb-bg: var(--tb-navy-950);          /* page, header, sidebar */
    --tb-surface: var(--tb-navy-800);     /* cards, modals, panels */
    --tb-surface-2: var(--tb-navy-700);   /* raised inside a card, table head, hover */
    --tb-surface-3: var(--tb-navy-600);   /* pressed / selected, hover on surface-2 */
    --tb-field: #0E1A2E;                  /* inputs (sunken) */
    --tb-overlay: rgba(4, 9, 20, .72);    /* modal backdrop */

    /* -- borders -- */
    --tb-border-subtle: #1E3050;          /* cards, separators */
    --tb-border: #2A3D60;                 /* dividers, table lines */
    --tb-border-strong: #3B5078;          /* inputs, secondary buttons */

    /* -- text -- */
    --tb-text: #F3F6FB;                   /* headings, values */
    --tb-text-2: #B8C4D9;                 /* body, labels */
    --tb-text-3: #8B9AB8;                 /* hints, captions, placeholders */
    --tb-text-disabled: #5D6D8C;
    --tb-text-on-accent: var(--tb-navy-950); /* text on lime / pink / amber fills */

    /* -- intent -- */
    --tb-primary: var(--tb-lime-500);
    --tb-primary-hover: var(--tb-lime-400);
    --tb-primary-active: var(--tb-lime-600);
    --tb-primary-text: var(--tb-lime-500);
    --tb-primary-subtle: rgba(132, 204, 22, .12);
    --tb-primary-border: rgba(132, 204, 22, .40);

    --tb-success: var(--tb-lime-500);
    --tb-success-text: var(--tb-lime-500);
    --tb-success-subtle: rgba(132, 204, 22, .12);
    --tb-success-border: rgba(132, 204, 22, .40);

    --tb-danger: var(--tb-pink-500);
    --tb-danger-hover: var(--tb-pink-400);
    --tb-danger-text: var(--tb-pink-300);
    --tb-danger-subtle: rgba(243, 48, 88, .12);
    --tb-danger-border: rgba(243, 48, 88, .45);

    --tb-warning: var(--tb-amber-500);
    --tb-warning-text: var(--tb-amber-500);
    --tb-warning-subtle: rgba(245, 165, 36, .12);
    --tb-warning-border: rgba(245, 165, 36, .45);

    --tb-info: var(--tb-blue-500);
    --tb-info-text: var(--tb-blue-300);
    --tb-info-subtle: rgba(59, 130, 246, .12);
    --tb-info-border: rgba(59, 130, 246, .40);

    --tb-ring: var(--tb-lime-500);
    --tb-ring-shadow: 0 0 0 3px rgba(132, 204, 22, .28);

    /* -- charts (Ist / Potenzial / Bestätigt / Ziel) -- */
    --tb-chart-current: var(--tb-blue-500);
    --tb-chart-potential: var(--tb-lime-500);
    --tb-chart-confirmed: var(--tb-cyan-400);
    --tb-chart-target: var(--tb-pink-500);
    --tb-chart-grid: rgba(139, 154, 184, .14);
    --tb-chart-shade: rgba(93, 109, 140, .22);   /* area after the target line in Gantt charts */

    /* -- typography -- */
    --tb-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --tb-font-display: 'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --tb-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --tb-text-xs: 12px;   --tb-leading-xs: 16px;
    --tb-text-sm: 13px;   --tb-leading-sm: 18px;
    --tb-text-md: 14px;   --tb-leading-md: 20px;   /* UI default */
    --tb-text-lg: 16px;   --tb-leading-lg: 24px;
    --tb-text-xl: 18px;   --tb-leading-xl: 26px;
    --tb-text-2xl: 24px;  --tb-leading-2xl: 32px;
    --tb-text-3xl: 30px;  --tb-leading-3xl: 38px;
    --tb-weight-regular: 400;
    --tb-weight-medium: 500;
    --tb-weight-semibold: 600;
    --tb-weight-bold: 700;
    --tb-tracking-tight: -0.015em;
    --tb-tracking-caps: 0.06em;

    /* -- spacing (4 px grid, Tailwind numbering) -- */
    --tb-space-0_5: 2px;
    --tb-space-1: 4px;
    --tb-space-1_5: 6px;
    --tb-space-2: 8px;
    --tb-space-3: 12px;
    --tb-space-4: 16px;
    --tb-space-5: 20px;
    --tb-space-6: 24px;
    --tb-space-8: 32px;
    --tb-space-10: 40px;
    --tb-space-12: 48px;
    --tb-space-16: 64px;

    /* -- radius -- */
    --tb-radius-xs: 4px;
    --tb-radius-sm: 6px;
    --tb-radius-md: 8px;    /* buttons, inputs */
    --tb-radius-lg: 12px;   /* cards */
    --tb-radius-xl: 16px;   /* modals, large panels */
    --tb-radius-full: 999px;

    /* -- elevation -- */
    --tb-shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
    --tb-shadow-sm: 0 1px 3px rgba(0, 0, 0, .30), 0 1px 2px rgba(0, 0, 0, .20);
    --tb-shadow-md: 0 8px 24px -6px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
    --tb-shadow-lg: 0 24px 64px -12px rgba(0, 0, 0, .60), 0 8px 20px rgba(0, 0, 0, .30);
    --tb-highlight: inset 0 1px 0 rgba(255, 255, 255, .04);

    /* -- controls -- */
    --tb-control-sm: 32px;
    --tb-control-md: 40px;
    --tb-control-lg: 48px;

    /* -- layout -- */
    --tb-header-h: 64px;
    --tb-sidebar-w: 248px;
    --tb-page-px: 32px;
    --tb-page-pt: 28px;

    /* -- motion -- */
    --tb-ease: cubic-bezier(.16, 1, .3, 1);
    --tb-duration-fast: 120ms;
    --tb-duration: 200ms;

    /* =================================================================
       2 · LEGACY ALIASES – old names keep working, but point to tokens
       ================================================================= */
    --white-color: var(--tb-text);
    --black-color: var(--tb-navy-950);
    --gray-color: var(--tb-text-3);
    --blue-color: var(--tb-bg);
    --dark-blue: var(--tb-surface);
    --dark-menu-bg: var(--tb-surface);
    --text-green: var(--tb-primary);
    --green-color: var(--tb-primary);
    --light-blue: var(--tb-info);

    --tb-line: var(--tb-border);
    --tb-lime: var(--tb-lime-500);
    --tb-lime-600-legacy: var(--tb-lime-600);
    --tb-pink: var(--tb-pink-500);
    --tb-amber: var(--tb-amber-500);
    --tb-blue: var(--tb-blue-500);
    --tb-text-1: var(--tb-text);
    --tb-radius: var(--tb-radius-md);
    --tb-control-h: var(--tb-control-md);
    --tb-fs-xs: var(--tb-text-xs);
    --tb-fs-sm: var(--tb-text-sm);
    --tb-fs-md: var(--tb-text-md);
    --tb-fs-lg: var(--tb-text-lg);
    --tb-fs-xl: var(--tb-text-xl);
    --tb-fs-2xl: var(--tb-text-2xl);

    /* Bootstrap 5 variables → tokens */
    --bs-body-font-family: var(--tb-font-sans);
    --bs-body-font-size: var(--tb-text-md);
    --bs-body-color: var(--tb-text-2);
    --bs-body-bg: var(--tb-bg);
    --bs-border-color: var(--tb-border);
    --bs-link-color: var(--tb-primary-text);
    --bs-link-color-rgb: 132, 204, 22;
    --bs-link-hover-color: var(--tb-primary-hover);
    --bs-link-hover-color-rgb: 149, 214, 43;
    --bs-emphasis-color: var(--tb-text);
    --bs-secondary-color: var(--tb-text-3);
    --bs-heading-color: var(--tb-text);
    --bs-border-radius: var(--tb-radius-md);
    --bs-focus-ring-color: rgba(132, 204, 22, .28);
}

/* =====================================================================
   3 · BASE
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md);
    line-height: var(--tb-leading-md);
    font-weight: var(--tb-weight-regular);
    color: var(--tb-text-2);
    background-color: var(--tb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tb-font-display);
    font-weight: var(--tb-weight-semibold);
    color: var(--tb-text);
    letter-spacing: var(--tb-tracking-tight);
    line-height: 1.25;
    margin-bottom: var(--tb-space-2);
}
h1, .h1 { font-size: var(--tb-text-3xl); line-height: var(--tb-leading-3xl); }
h2, .h2 { font-size: var(--tb-text-2xl); line-height: var(--tb-leading-2xl); }
h3, .h3, h4, .h4 { font-size: 20px; line-height: 28px; }
h5, .h5 { font-size: var(--tb-text-xl); line-height: var(--tb-leading-xl); }
h6, .h6 { font-size: var(--tb-text-lg); line-height: var(--tb-leading-lg); }

p {
    font-family: inherit;
    font-size: inherit;
    line-height: 1.6;
    color: inherit;
    margin-bottom: var(--tb-space-2);
}

small, .small { font-size: var(--tb-text-sm); }
strong, b { font-weight: var(--tb-weight-semibold); color: var(--tb-text); }

a { color: var(--tb-primary-text); text-decoration: none; transition: color var(--tb-duration-fast); }
a:hover { color: var(--tb-primary-hover); }

hr { border-color: var(--tb-border); opacity: 1; }

::selection { background: rgba(132, 204, 22, .32); color: var(--tb-white); }

:focus-visible { outline: 2px solid var(--tb-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

* { scrollbar-width: thin; scrollbar-color: var(--tb-navy-500) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--tb-navy-500); border-radius: 10px; border: 2px solid var(--tb-bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--tb-navy-400); }

/* Bootstrap text helpers → tokens */
.text-muted { color: var(--tb-text-3) !important; }
.text-secondary { color: var(--tb-text-2) !important; }
.text-danger { color: var(--tb-danger-text) !important; }
.text-success { color: var(--tb-success-text) !important; }
.text-warning { color: var(--tb-warning-text) !important; }
.text-info, .text-primary { color: var(--tb-info-text) !important; }
.text-white { color: var(--tb-text) !important; }

/* =====================================================================
   4 · APP SHELL – header, sidebar, content, guest pages
   ===================================================================== */
.dashboard_main { min-height: 100vh; height: auto; }

/* ---- header ---- */
.dashboard_main header.tb-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--tb-header-h);
    padding: 0 var(--tb-space-6) 0 var(--tb-space-5);
    display: flex;
    align-items: center;
    background: rgba(11, 20, 38, .86);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--tb-border-subtle);
    z-index: 999;
}

.tb-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--tb-space-4); width: 100%; min-width: 0; }
.tb-topbar__brand { display: flex; align-items: center; gap: var(--tb-space-3); min-width: 0; }
.tb-topbar__logo { display: inline-flex; align-items: center; border-radius: var(--tb-radius-sm); }
.tb-topbar__logo img { display: block; height: 26px; width: auto; max-width: none; }
.tb-topbar__tagline {
    margin: 0;
    padding-left: var(--tb-space-3);
    border-left: 1px solid var(--tb-border);
    font-size: var(--tb-text-xs);
    line-height: var(--tb-leading-xs);
    color: var(--tb-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_main header.tb-topbar .sidebar_icon { display: none; }
.dashboard_main header.tb-topbar .sidebar_icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tb-control-md);
    height: var(--tb-control-md);
    border-radius: var(--tb-radius-md);
    color: var(--tb-text-2);
}
.dashboard_main header.tb-topbar .sidebar_icon a:hover { background: var(--tb-surface-2); color: var(--tb-text); }
.dashboard_main header.tb-topbar .sidebar_icon svg { width: 22px; height: 22px; }
.dashboard_main header.tb-topbar .sidebar_icon .close { display: none; }
.dashboard_main:has(.sidebar_section.show) header.tb-topbar .sidebar_icon .open { display: none; }
.dashboard_main:has(.sidebar_section.show) header.tb-topbar .sidebar_icon .close { display: inline-flex; }

.dashboard_main header.tb-topbar .right_box.tb-topbar__actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tb-space-2);
}
.tb-topbar__divider { width: 1px; height: 24px; background: var(--tb-border); margin: 0 var(--tb-space-1); }

/* user menu trigger */
.dashboard_main header.tb-topbar .right_box .drop_click.tb-user-trigger {
    display: flex;
    align-items: center;
    gap: var(--tb-space-3);
    height: var(--tb-control-md);
    padding: 0 var(--tb-space-2) 0 var(--tb-space-1);
    border-radius: var(--tb-radius-md);
    color: var(--tb-text);
    transition: background-color var(--tb-duration-fast);
}
.dashboard_main header.tb-topbar .right_box .drop_click.tb-user-trigger:hover,
.dashboard_main header.tb-topbar .right_box.active .drop_click.tb-user-trigger { background: var(--tb-surface-2); }
.tb-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--tb-radius-full);
    background: linear-gradient(135deg, var(--tb-lime-500), #4FA30F);
    color: var(--tb-text-on-accent);
    font-size: var(--tb-text-sm);
    font-weight: var(--tb-weight-semibold);
    letter-spacing: 0;
}
.tb-avatar--lg { width: 40px; height: 40px; font-size: var(--tb-text-md); }
.tb-user-trigger .user_name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tb-user-trigger__name { display: block; font-size: var(--tb-text-sm); line-height: 18px; font-weight: var(--tb-weight-semibold); color: var(--tb-text); }
.tb-user-trigger__role { display: block; font-size: var(--tb-text-xs); line-height: 16px; color: var(--tb-text-3); }
.tb-user-trigger .tb-chevron { color: var(--tb-text-3); width: 16px; height: 16px; transition: transform var(--tb-duration); }
.right_box.active .tb-user-trigger .tb-chevron { transform: rotate(180deg); }

/* dropdown menu (header + generic .tb-menu) */
.dashboard_main header.tb-topbar .right_box .dropdown.tb-menu,
.tb-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 232px;
    padding: var(--tb-space-1_5);
    background: var(--tb-surface-2);
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-shadow-lg);
    z-index: 1000;
}
.dashboard_main header.tb-topbar .right_box .dropdown.tb-menu { display: none; }
.tb-menu__header { display: flex; align-items: center; gap: var(--tb-space-3); padding: var(--tb-space-2) var(--tb-space-2) var(--tb-space-3); border-bottom: 1px solid var(--tb-border); margin-bottom: var(--tb-space-1_5); }
.tb-menu__header strong { display: block; font-size: var(--tb-text-md); line-height: 20px; }
.tb-menu__header div > span { display: block; font-size: var(--tb-text-xs); color: var(--tb-text-3); line-height: 16px; word-break: break-all; }
.tb-menu ul { margin: 0; padding: 0; list-style: none; }
.tb-menu li + li { margin-top: 2px; }
.dashboard_main header.tb-topbar .right_box .dropdown .tb-menu__item,
.tb-menu .tb-menu__item {
    display: flex;
    align-items: center;
    gap: var(--tb-space-2_5, 10px);
    width: 100%;
    height: 36px;
    padding: 0 var(--tb-space-2);
    border: 0;
    border-radius: var(--tb-radius-sm);
    background: transparent;
    color: var(--tb-text-2);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md);
    font-weight: var(--tb-weight-medium);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.tb-menu .tb-menu__item svg { width: 16px; height: 16px; color: var(--tb-text-3); flex: none; }
.dashboard_main header.tb-topbar .right_box .dropdown .tb-menu__item:hover,
.tb-menu .tb-menu__item:hover { background: var(--tb-surface-3); color: var(--tb-text); }
.tb-menu .tb-menu__item[aria-current] { color: var(--tb-primary-text); font-weight: var(--tb-weight-semibold); }
.tb-menu .tb-menu__item:hover svg { color: var(--tb-text); }
.tb-menu .tb-menu__item--danger:hover { background: var(--tb-danger-subtle); color: var(--tb-danger-text); }
.tb-menu .tb-menu__item--danger:hover svg { color: var(--tb-danger-text); }
.tb-menu__sep { height: 1px; background: var(--tb-border); margin: var(--tb-space-1_5) 0; }
.tb-menu form { margin: 0; padding: 0; }

/* language switcher */
.tb-locale-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--tb-text-3);
}
.tb-locale-switcher > i,
.tb-locale-switcher > svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--tb-text-3);
    z-index: 1;
}
header .tb-locale-switcher select,
.tb-locale-switcher select {
    height: 36px;
    min-width: 0;
    padding: 0 30px 0 32px;
    border: 1px solid transparent !important;
    border-radius: var(--tb-radius-md);
    background-color: transparent;
    color: var(--tb-text-2);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-sm);
    font-weight: var(--tb-weight-medium);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B9AB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    box-shadow: none !important;
}
.tb-locale-switcher select:hover { background-color: var(--tb-surface-2); color: var(--tb-text); }
.tb-locale-switcher select:focus-visible { outline: 2px solid var(--tb-ring); outline-offset: 2px; }
.tb-locale-switcher select option { background: var(--tb-surface-2); color: var(--tb-text); }
.tb-locale-switcher--guest {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 20;
}
.tb-locale-switcher--guest select { background-color: rgba(20, 35, 57, .7); border-color: var(--tb-border-subtle) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---- sidebar ---- */
.sidebar_section.tb-sidebar {
    position: fixed;
    top: var(--tb-header-h);
    bottom: 0;
    left: 0;
    width: var(--tb-sidebar-w);
    height: auto;
    min-height: 0;
    padding: var(--tb-space-4) var(--tb-space-3);
    background: var(--tb-bg);
    border-right: 1px solid var(--tb-border-subtle);
    box-shadow: none;
    overflow-y: auto;
    z-index: 998;
    display: flex;
    flex-direction: column;
    transition: transform var(--tb-duration) var(--tb-ease), box-shadow var(--tb-duration);
}
.tb-sidebar .sidebar_nav { flex: 1; }
.tb-nav-group + .tb-nav-group { margin-top: var(--tb-space-5); }
.tb-nav-label {
    display: block;
    padding: 0 var(--tb-space-3);
    margin-bottom: var(--tb-space-1_5);
    font-size: 11px;
    line-height: 16px;
    font-weight: var(--tb-weight-semibold);
    letter-spacing: var(--tb-tracking-caps);
    text-transform: uppercase;
    color: var(--tb-text-3);
}
.sidebar_section.tb-sidebar .sidebar_nav ul li:not(:last-child) { margin-bottom: 2px; }
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tb-space-3);
    height: var(--tb-control-md);
    padding: 0 var(--tb-space-3);
    border-radius: var(--tb-radius-md);
    color: var(--tb-text-2);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md);
    font-weight: var(--tb-weight-medium);
    line-height: 1;
    transition: background-color var(--tb-duration-fast), color var(--tb-duration-fast);
}
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--tb-text-3);
    stroke: currentColor;
    fill: none;
    transition: color var(--tb-duration-fast);
}
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link svg :is(path, line, rect, circle, polyline, polygon) { fill: none; stroke: currentColor; }
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link:hover { background: var(--tb-surface); color: var(--tb-text); }
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link:hover svg { color: var(--tb-text-2); }
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link.active {
    background: var(--tb-primary-subtle);
    color: var(--tb-text);
}
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link.active svg { color: var(--tb-primary); stroke: currentColor; }
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link.active svg :is(path, line, rect, circle, polyline, polygon) { fill: none; stroke: currentColor; }
.sidebar_section.tb-sidebar .sidebar_nav ul li a.tb-nav-link.active::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--tb-space-3));
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tb-primary);
}
.tb-sidebar__footer {
    margin-top: var(--tb-space-6);
    padding: var(--tb-space-3);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-surface);
    font-size: var(--tb-text-xs);
    line-height: var(--tb-leading-xs);
    color: var(--tb-text-3);
}
.tb-sidebar__footer strong { display: block; font-size: var(--tb-text-sm); line-height: 18px; color: var(--tb-text); font-weight: var(--tb-weight-semibold); margin-bottom: 2px; }
.tb-sidebar-backdrop { display: none; }

/* ---- content ---- */
.dashboard_main .dashboard_content {
    width: calc(100% - var(--tb-sidebar-w));
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    padding: calc(var(--tb-header-h) + var(--tb-page-pt)) var(--tb-page-px) var(--tb-space-12);
}

/* page header (legacy .dash_title + new .tb-page-header) */
.dashboard_content .dash_title,
.tb-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tb-space-3) var(--tb-space-4);
    margin-bottom: var(--tb-space-6) !important;
}
.dashboard_content .dash_title h4,
.dash_title h4,
.tb-page-title {
    margin: 0;
    font-family: var(--tb-font-display);
    font-size: var(--tb-text-2xl);
    line-height: var(--tb-leading-2xl);
    font-weight: var(--tb-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--tb-text);
}
.dashboard_content .dash_title h4 span,
.optimization_process_manual .dash_title h4 span,
.tb-page-title span { color: var(--tb-text-2); font-weight: var(--tb-weight-medium); }
.tb-page-header__text { min-width: 0; }
.tb-page-subtitle { margin: var(--tb-space-1) 0 0; color: var(--tb-text-3); font-size: var(--tb-text-md); line-height: var(--tb-leading-md); }
.tb-page-header__actions,
.dashboard_content .dash_title .btn_container { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tb-space-2); margin: 0; }
/* The one "Back" of a page: secondary button top right, also on the phone (title wraps beside it). */
.tb-page-header--back { flex-wrap: nowrap; align-items: flex-start; }
.tb-page-header--back .tb-page-header__actions { flex: none; justify-content: flex-end; }
@media (max-width: 575px) {
    .tb-page-header--back .tb-page-title { font-size: var(--tb-text-xl); line-height: var(--tb-leading-xl); }
}

.dashboard_content h5 { font-size: var(--tb-text-xl); }
.dashboard_content h6 { font-size: var(--tb-text-lg); }
.dashboard_content p { font-size: inherit; line-height: 1.6; }
.dashboard_content .box_title p { font-family: var(--tb-font-display); font-size: var(--tb-text-lg); font-weight: var(--tb-weight-semibold); color: var(--tb-text); margin-bottom: var(--tb-space-3); }
.tb-section-title { font-family: var(--tb-font-display); font-size: var(--tb-text-lg); line-height: var(--tb-leading-lg); font-weight: var(--tb-weight-semibold); color: var(--tb-text); margin: 0 0 var(--tb-space-3); }
.tb-overline { font-size: 11px; line-height: 16px; font-weight: var(--tb-weight-semibold); letter-spacing: var(--tb-tracking-caps); text-transform: uppercase; color: var(--tb-text-3); }

/* ---- guest / auth pages ---- */
body.tb-guest {
    min-height: 100vh;
    background-color: var(--tb-bg);
    background-image:
        radial-gradient(900px 520px at 12% -8%, rgba(132, 204, 22, .13), transparent 62%),
        radial-gradient(760px 520px at 105% 108%, rgba(243, 48, 88, .10), transparent 60%),
        radial-gradient(rgba(139, 154, 184, .10) 1px, transparent 1px);
    background-size: auto, auto, 24px 24px;
    background-attachment: fixed;
}
body.tb-guest .common_design {
    min-height: 100vh;
    padding: 96px var(--tb-space-4) var(--tb-space-12);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}
body.tb-guest .common_design::after { display: none; }
body.tb-guest .common_design .center_form_box {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: var(--tb-space-10) var(--tb-space-8) var(--tb-space-8);
    background: rgba(20, 35, 57, .82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-xl);
    box-shadow: var(--tb-shadow-lg), var(--tb-highlight);
}
body.tb-guest .common_design .center_form_box .top_box { margin-bottom: var(--tb-space-6); }
body.tb-guest .common_design .center_form_box .logo-box { margin-bottom: var(--tb-space-6); }
body.tb-guest .common_design .center_form_box .logo-box img { max-width: 148px; height: auto; }
.tb-auth-title { margin: 0 0 var(--tb-space-1_5); font-size: var(--tb-text-2xl); line-height: var(--tb-leading-2xl); letter-spacing: -0.02em; }
.tb-auth-subtitle,
body.tb-guest .common_design .center_form_box .top_box p { margin: 0; font-size: var(--tb-text-md); line-height: 1.55; color: var(--tb-text-3); }
body.tb-guest .common_design .center_form_box .top_box h6 { font-family: var(--tb-font-sans); font-size: var(--tb-text-md); font-weight: var(--tb-weight-regular); color: var(--tb-text-3); letter-spacing: 0; margin: 0; }
body.tb-guest .common_design .center_form_box .form-group { margin-bottom: var(--tb-space-4); }
body.tb-guest .common_design .center_form_box .commonInput { height: 44px; border-radius: var(--tb-radius-md); background-color: var(--tb-field); }
body.tb-guest .common_design .center_form_box .form-group a { float: none; margin: 0; font-size: var(--tb-text-sm); font-weight: var(--tb-weight-medium); color: var(--tb-primary-text); }
body.tb-guest .common_design .center_form_box .btn-box .common-btn,
body.tb-guest .common_design .center_form_box .common-btn { width: 100%; height: 44px; border-radius: var(--tb-radius-md) !important; font-size: var(--tb-text-md); }
body.tb-guest .common_design .center_form_box .last { margin-top: var(--tb-space-6); padding-top: var(--tb-space-5); border-top: 1px solid var(--tb-border-subtle); font-size: var(--tb-text-sm); color: var(--tb-text-3); text-align: center; }
body.tb-guest .common_design .center_form_box .last a { color: var(--tb-primary-text); font-weight: var(--tb-weight-medium); }
body.tb-guest .common_design .check_box { margin: var(--tb-space-1) 0 var(--tb-space-5); }
body.tb-guest .common_design .check_box .clickTo { padding-left: 28px; margin: 0; }
body.tb-guest .common_design .check_box .clickTo .keyword-label { font-size: var(--tb-text-md); color: var(--tb-text-2); }
body.tb-guest .common_design .check_box .clickTo .keyword-label::before {
    width: 18px; height: 18px;
    border: 1px solid var(--tb-border-strong);
    border-radius: var(--tb-radius-xs);
    background: var(--tb-field);
}
body.tb-guest .common_design .check_box .clickTo input[type="checkbox"]:checked + .keyword-label::before {
    background: var(--tb-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1426' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    border-color: var(--tb-primary);
    content: '';
}
body.tb-guest .common_design .check_box .clickTo input[type="checkbox"]:focus-visible + .keyword-label::before { outline: 2px solid var(--tb-ring); outline-offset: 2px; }
.tb-auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--tb-space-3); margin-bottom: var(--tb-space-1_5); }
.tb-auth-row .commonLabel { margin-bottom: 0; }
.tb-auth-back { display: inline-flex; align-items: center; gap: var(--tb-space-2); font-size: var(--tb-text-sm); font-weight: var(--tb-weight-medium); color: var(--tb-text-3) !important; }
.tb-auth-back:hover { color: var(--tb-text) !important; }
.tb-auth-footer { margin-top: var(--tb-space-6); text-align: center; }
.tb-otp-input { text-align: center; font-size: 22px !important; letter-spacing: .4em; font-variant-numeric: tabular-nums; font-weight: var(--tb-weight-semibold); }
.tb-otp-input::placeholder { letter-spacing: normal; font-size: var(--tb-text-md) !important; font-weight: var(--tb-weight-regular); }
#otp_verify_main .commonLabel { opacity: 1; }

/* =====================================================================
   5 · BUTTONS – .tb-btn (+ legacy .common-btn, .cancel-btn, Bootstrap .btn-*)
   ===================================================================== */
.tb-btn,
.common-btn,
.cancel-btn,
.btn_resetAll,
.btn.btn-primary, .btn.btn-secondary, .btn.btn-success, .btn.btn-danger, .btn.btn-warning,
.btn.btn-info, .btn.btn-light, .btn.btn-dark,
.btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-success,
.btn.btn-outline-danger, .btn.btn-outline-light, .btn.btn-outline-dark {
    --tb-btn-bg: var(--tb-surface-2);
    --tb-btn-fg: var(--tb-text);
    --tb-btn-border: var(--tb-border-strong);
    --tb-btn-bg-hover: var(--tb-surface-3);
    --tb-btn-fg-hover: var(--tb-text);
    --tb-btn-border-hover: var(--tb-navy-300);
    --tb-btn-shadow: var(--tb-shadow-xs);
    --bs-btn-active-bg: var(--tb-btn-bg-hover);
    --bs-btn-active-color: var(--tb-btn-fg-hover);
    --bs-btn-active-border-color: var(--tb-btn-border-hover);
    --bs-btn-disabled-bg: var(--tb-btn-bg);
    --bs-btn-disabled-color: var(--tb-btn-fg);
    --bs-btn-disabled-border-color: var(--tb-btn-border);
    --bs-btn-disabled-opacity: .5;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tb-space-2);
    height: var(--tb-control-md);
    min-height: var(--tb-control-md);
    padding: 0 var(--tb-space-4);
    margin: 0;
    border: 1px solid var(--tb-btn-border);
    border-radius: var(--tb-radius-md);
    background: var(--tb-btn-bg);
    color: var(--tb-btn-fg);
    box-shadow: var(--tb-btn-shadow);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md);
    font-weight: var(--tb-weight-semibold);
    line-height: 1;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--tb-duration-fast), border-color var(--tb-duration-fast), color var(--tb-duration-fast), box-shadow var(--tb-duration-fast), transform 60ms;
}
.tb-btn:hover, .common-btn:hover, .cancel-btn:hover, .btn_resetAll:hover,
.btn.btn-primary:hover, .btn.btn-secondary:hover, .btn.btn-success:hover, .btn.btn-danger:hover, .btn.btn-warning:hover,
.btn.btn-info:hover, .btn.btn-light:hover, .btn.btn-dark:hover,
.btn.btn-outline-primary:hover, .btn.btn-outline-secondary:hover, .btn.btn-outline-success:hover,
.btn.btn-outline-danger:hover, .btn.btn-outline-light:hover, .btn.btn-outline-dark:hover {
    background: var(--tb-btn-bg-hover);
    color: var(--tb-btn-fg-hover);
    border-color: var(--tb-btn-border-hover);
}
.tb-btn:active, .common-btn:active, .cancel-btn:active, .btn_resetAll:active { transform: translateY(1px); }
.tb-btn:focus, .common-btn:focus, .cancel-btn:focus { color: var(--tb-btn-fg); }
.tb-btn:focus-visible, .common-btn:focus-visible, .cancel-btn:focus-visible, .btn_resetAll:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--tb-ring) !important;
    outline-offset: 2px;
    box-shadow: var(--tb-btn-shadow) !important;
}
.tb-btn i, .common-btn i, .cancel-btn i, .btn_resetAll i, .btn i { font-size: 14px; line-height: 1; }
.tb-btn svg, .common-btn svg, .cancel-btn svg, .btn_resetAll svg { flex: none; width: 16px; height: 16px; }
.tb-btn .me-1, .common-btn .me-1, .tb-btn .me-2, .common-btn .me-2 { margin-right: 0 !important; }

/* variants */
.common-btn, .tb-btn-primary, .btn.btn-primary, .btn.btn-success, .btn.btn-outline-success {
    --tb-btn-bg: var(--tb-primary);
    --tb-btn-fg: var(--tb-text-on-accent);
    --tb-btn-border: var(--tb-primary);
    --tb-btn-bg-hover: var(--tb-primary-hover);
    --tb-btn-fg-hover: var(--tb-text-on-accent);
    --tb-btn-border-hover: var(--tb-primary-hover);
    --tb-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .30);
}
.common-btn:active, .tb-btn-primary:active { background: var(--tb-primary-active); border-color: var(--tb-primary-active); }

.cancel-btn, .tb-btn-secondary, .btn.btn-secondary, .btn.btn-light, .btn.btn-dark, .btn.btn-info,
.btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-light, .btn.btn-outline-dark, .btn_resetAll {
    --tb-btn-bg: var(--tb-surface-2);
    --tb-btn-fg: var(--tb-text);
    --tb-btn-border: var(--tb-border-strong);
    --tb-btn-bg-hover: var(--tb-surface-3);
    --tb-btn-fg-hover: var(--tb-text);
    --tb-btn-border-hover: var(--tb-navy-300);
    --tb-btn-shadow: var(--tb-shadow-xs);
}

.tb-btn-ghost {
    --tb-btn-bg: transparent;
    --tb-btn-fg: var(--tb-text-2);
    --tb-btn-border: transparent;
    --tb-btn-bg-hover: var(--tb-surface-2);
    --tb-btn-fg-hover: var(--tb-text);
    --tb-btn-border-hover: transparent;
    --tb-btn-shadow: none;
    padding: 0 var(--tb-space-3);
}

.tb-btn-danger, .btn.btn-danger, .btn.btn-warning,
.deletWarning .modal-footer .common-btn,
.common_modal.deletWarning .modal-footer .btn.common-btn {
    --tb-btn-bg: var(--tb-danger);
    --tb-btn-fg: var(--tb-text-on-accent);
    --tb-btn-border: var(--tb-danger);
    --tb-btn-bg-hover: var(--tb-danger-hover);
    --tb-btn-fg-hover: var(--tb-text-on-accent);
    --tb-btn-border-hover: var(--tb-danger-hover);
    --tb-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .30);
}

.tb-btn-danger-soft, .btn.btn-outline-danger {
    --tb-btn-bg: var(--tb-danger-subtle);
    --tb-btn-fg: var(--tb-danger-text);
    --tb-btn-border: var(--tb-danger-border);
    --tb-btn-bg-hover: rgba(243, 48, 88, .2);
    --tb-btn-fg-hover: #FF8FA4;
    --tb-btn-border-hover: rgba(243, 48, 88, .65);
    --tb-btn-shadow: none;
}

.tb-btn-link {
    --tb-btn-bg: transparent;
    --tb-btn-fg: var(--tb-primary-text);
    --tb-btn-border: transparent;
    --tb-btn-bg-hover: transparent;
    --tb-btn-fg-hover: var(--tb-primary-hover);
    --tb-btn-border-hover: transparent;
    --tb-btn-shadow: none;
    height: auto;
    min-height: 0;
    padding: 0;
}
.tb-btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* sizes – small buttons keep a 40 px hit area */
.tb-btn-sm, .tb-btn.tb-btn-sm, .common-btn.tb-btn-sm, .btn-sm.common-btn, .btn-sm.cancel-btn {
    height: var(--tb-control-sm);
    min-height: var(--tb-control-sm);
    padding: 0 var(--tb-space-3);
    gap: var(--tb-space-1_5);
    font-size: var(--tb-text-sm);
    border-radius: var(--tb-radius-sm);
}
.tb-btn-sm::after { content: ''; position: absolute; inset: -4px; }
.tb-btn-lg, .tb-btn.tb-btn-lg {
    height: var(--tb-control-lg);
    min-height: var(--tb-control-lg);
    padding: 0 var(--tb-space-5);
    font-size: var(--tb-text-lg);
    border-radius: 10px;
}
.tb-btn-icon, .tb-btn.tb-btn-icon { width: var(--tb-control-md); padding: 0; }
.tb-btn-icon.tb-btn-sm { width: var(--tb-control-sm); }
.tb-btn-icon.tb-btn-lg { width: var(--tb-control-lg); }
.tb-btn-block { display: flex; width: 100%; }

/* states */
.tb-btn:disabled, .tb-btn.disabled, .tb-btn[aria-disabled="true"],
.common-btn:disabled, .common-btn.disabled, .common-btn[aria-disabled="true"],
.cancel-btn:disabled, .btn_resetAll:disabled, .btn:disabled, .btn.disabled,
.disabled-btn {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}
/* A locked next button that knows what is missing (tb-missing.js) stays clickable – the click shows it. */
.disabled-btn[data-missing], [data-missing][aria-disabled="true"] { pointer-events: auto; }
/* What is still missing – the same animation on every page: the places pulse with a warning ring, the reasons flash. */
.tb-missing { animation: tb-missing .65s ease-in-out 3; }
@keyframes tb-missing { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--tb-warning), 0 0 0 9px var(--tb-warning-subtle), 0 0 26px var(--tb-warning-border); } }
.tb-missing-text { animation: tb-missing-text .5s var(--tb-ease) 2; border-radius: var(--tb-radius-sm); }
@keyframes tb-missing-text { 0%, 100% { transform: none; background: transparent; } 25% { transform: translateX(-4px); background: var(--tb-warning-subtle); } 75% { transform: translateX(4px); background: var(--tb-warning-subtle); } }
.tb-missing-shake { animation: tb-tour-nudge .45s var(--tb-ease); }
@media (prefers-reduced-motion: reduce) {
    .tb-missing { animation: none; box-shadow: 0 0 0 3px var(--tb-warning), 0 0 0 9px var(--tb-warning-subtle); }
    .tb-missing-text { animation: none; background: var(--tb-warning-subtle); }
    .tb-missing-shake { animation: none; }
}
.tb-btn.is-loading { color: transparent !important; pointer-events: none; }
.tb-btn.is-loading::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--tb-btn-fg);
    border-right-color: transparent;
    animation: tb-spin .7s linear infinite;
}
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* button rows */
.btn_container,
.tb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tb-space-3);
    margin-top: var(--tb-space-6);
}
.btn_container .common-btn,
.btn_container .btn,
.btn_container a.common-btn { margin: 0 !important; display: inline-flex; }
.btn_container > .common-btn:first-child:not(:only-child),
.btn_container > .tb-btn:first-child:not(:only-child),
.tb-actions > .tb-actions__start { margin-right: auto !important; }

/* small square icon buttons (edit / delete / reset) */
.tb-icon-btn,
.edit_box .edit, .edit_box .delet,
.project_box .top_box .right_box .edit_box .edit,
.project_box .top_box .right_box .edit_box .delet,
.process_list_view .process_panel .panel_btn .edit,
.process_list_view .process_panel .panel_btn .delet,
.process_list_view .process_panel .panel_btn .edit_box .edit,
.process_list_view .process_panel .panel_btn .edit_box .delet,
.process_list_view .process_panel .panel_btn .reset_btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tb-control-md);
    height: var(--tb-control-md);
    border-radius: var(--tb-radius-md);
    border: 1px solid var(--tb-border-strong);
    background: var(--tb-surface-2);
    color: var(--tb-text-2);
    cursor: pointer;
    transition: background-color var(--tb-duration-fast), border-color var(--tb-duration-fast), color var(--tb-duration-fast);
}
.tb-icon-btn:hover,
.edit_box .edit:hover,
.project_box .top_box .right_box .edit_box .edit:hover,
.process_list_view .process_panel .panel_btn .edit:hover,
.process_list_view .process_panel .panel_btn .edit_box .edit:hover,
.process_list_view .process_panel .panel_btn .reset_btn a:hover { background: var(--tb-surface-3); color: var(--tb-text); border-color: var(--tb-navy-300); }
.edit_box .delet:hover,
.project_box .top_box .right_box .edit_box .delet:hover,
.process_list_view .process_panel .panel_btn .delet:hover,
.process_list_view .process_panel .panel_btn .edit_box .delet:hover,
.tb-icon-btn--danger:hover { background: var(--tb-danger-subtle); color: var(--tb-danger-text); border-color: var(--tb-danger-border); }
.edit_box .edit svg, .edit_box .delet svg,
.process_list_view .process_panel .panel_btn .edit svg,
.process_list_view .process_panel .panel_btn .delet svg,
.process_list_view .process_panel .panel_btn .reset_btn a svg { width: 18px; height: 18px; }
.edit_box .edit svg :is(path, line, rect, circle, polyline),
.edit_box .delet svg :is(path, line, rect, circle, polyline),
.process_list_view .process_panel .panel_btn .edit svg :is(path, line, rect, circle, polyline),
.process_list_view .process_panel .panel_btn .delet svg :is(path, line, rect, circle, polyline),
.process_list_view .process_panel .panel_btn .reset_btn a svg :is(path, line, rect, circle, polyline) { stroke: currentColor; }
.edit_box .edit i, .edit_box .delet i,
.process_list_view .process_panel .panel_btn .edit i,
.process_list_view .process_panel .panel_btn .delet i,
.process_list_view .process_panel .panel_btn .reset_btn a i { color: inherit; font-size: 15px; }
.tb-icon-btn--sm { width: var(--tb-control-sm); height: var(--tb-control-sm); border-radius: var(--tb-radius-sm); }

/* =====================================================================
   6 · FORMS
   ===================================================================== */
.commonLabel,
.tb-label,
.form-label {
    display: block;
    margin-bottom: var(--tb-space-1_5);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-sm);
    line-height: var(--tb-leading-sm);
    font-weight: var(--tb-weight-medium);
    color: var(--tb-text-2);
}
.tb-required { color: var(--tb-danger-text); margin-left: 2px; }
.tb-optional { color: var(--tb-text-3); font-weight: var(--tb-weight-regular); margin-left: 4px; }

.commonInput,
.selectLayout,
.tb-input,
.tb-select,
.tb-textarea,
.form-control,
.form-select,
input.tb-date {
    display: block;
    width: 100%;
    height: var(--tb-control-md);
    padding: 0 var(--tb-space-3);
    border: 1px solid var(--tb-border-strong) !important;
    border-radius: var(--tb-radius-md);
    background-color: var(--tb-field);
    color: var(--tb-text) !important;
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md);
    line-height: var(--tb-leading-md);
    box-shadow: none;
    outline: none;
    transition: border-color var(--tb-duration-fast), box-shadow var(--tb-duration-fast), background-color var(--tb-duration-fast);
}
.commonInput:hover, .selectLayout:hover, .tb-input:hover, input.tb-date:hover, .tb-select:hover, .form-control:hover, .form-select:hover { border-color: var(--tb-navy-300) !important; }
.commonInput:focus, .selectLayout:focus, .tb-input:focus, input.tb-date:focus, .tb-select:focus, .tb-textarea:focus, .form-control:focus, .form-select:focus {
    border-color: var(--tb-primary) !important;
    box-shadow: var(--tb-ring-shadow) !important;
    background-color: var(--tb-field);
    color: var(--tb-text);
    outline: none;
}
.commonInput::placeholder, .tb-input::placeholder, .tb-textarea::placeholder, .form-control::placeholder {
    font-size: var(--tb-text-md);
    color: var(--tb-text-3);
    opacity: 1;
}
textarea.commonInput, textarea.tb-input, .tb-textarea, textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: 10px var(--tb-space-3);
    line-height: 1.5;
    resize: vertical;
}
.commonInput:disabled, .commonInput[readonly]:not(.flatpickr-input), .tb-input:disabled, .form-control:disabled, select:disabled {
    background-color: var(--tb-bg);
    color: var(--tb-text-3) !important;
    border-style: dashed !important;
    cursor: not-allowed;
}
select.commonInput, .selectLayout, .tb-select, .form-select, select.form-control {
    padding-right: 36px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B9AB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}
select.commonInput[multiple], .form-select[multiple] { height: auto; background-image: none; padding: var(--tb-space-2); }
select option { background: var(--tb-surface-2); color: var(--tb-text); }

/* invalid */
.commonInput.is-invalid, .tb-input.is-invalid, .tb-textarea.is-invalid, .form-control.is-invalid, .tb-field.is-invalid .commonInput, .tb-field.is-invalid .tb-input,
.commonInput[aria-invalid="true"], .tb-input[aria-invalid="true"] { border-color: var(--tb-danger) !important; }
.commonInput.is-invalid:focus, .tb-input.is-invalid:focus, .tb-field.is-invalid .tb-input:focus { box-shadow: 0 0 0 3px rgba(243, 48, 88, .25) !important; }

/* checkbox / radio */
input[type="checkbox"], input[type="radio"] { accent-color: var(--tb-primary); }
.form-check-input {
    width: 18px; height: 18px;
    background-color: var(--tb-field);
    border: 1px solid var(--tb-border-strong);
}
.form-check-input:checked { background-color: var(--tb-primary); border-color: var(--tb-primary); }
.form-check-input:focus { border-color: var(--tb-primary); box-shadow: var(--tb-ring-shadow); }
.form-check-label { color: var(--tb-text-2); }
.form-switch .form-check-input { width: 36px; height: 20px; }
/* Off: a light knob (Bootstrap draws a dark one, invisible on the dark field). */
.form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e");
    border-color: var(--tb-border-strong);
}

/* field wrapper, help, errors */
.form-group { margin-bottom: var(--tb-space-4); }
.tb-field { margin-bottom: var(--tb-space-4); }
.tb-field:last-child { margin-bottom: 0; }
.tb-help {
    display: block;
    margin-top: var(--tb-space-1_5);
    font-size: var(--tb-text-xs);
    line-height: var(--tb-leading-xs);
    color: var(--tb-text-3);
}
.tb-error,
.error,
.invalid-feedback,
.process_error {
    display: block;
    margin-top: var(--tb-space-1_5);
    font-size: var(--tb-text-xs);
    line-height: var(--tb-leading-xs);
    font-weight: var(--tb-weight-medium);
    color: var(--tb-danger-text) !important;
}
.error:empty { display: none; }
.process_error { position: static; }
.tb-error svg, .tb-error i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.warning { color: var(--tb-warning-text); font-size: var(--tb-text-xs); }

.tb-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--tb-space-4) var(--tb-space-5);
}
.tb-form-grid > .form-group, .tb-form-grid > .tb-field { margin-bottom: 0; }

.tb-fieldset {
    margin-bottom: var(--tb-space-5);
    padding: var(--tb-space-5);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-surface);
}
.tb-fieldset legend,
.tb-fieldset > h6 {
    float: left;
    width: 100%;
    padding: 0;
    line-height: var(--tb-leading-lg);
    margin-bottom: var(--tb-space-4);
    font-family: var(--tb-font-display);
    font-size: var(--tb-text-lg);
    font-weight: var(--tb-weight-semibold);
    color: var(--tb-text);
}

.tb-fieldset legend + * { clear: left; }

/* input with unit (tb-input-group) and Bootstrap input-group */
.tb-input-group { display: flex; align-items: stretch; }
.tb-input-group .commonInput, .tb-input-group .tb-input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; }
.tb-input-group .tb-unit,
.input-group .input-group-text,
.input-group-lable {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--tb-space-3);
    border: 1px solid var(--tb-border-strong);
    border-left: none;
    border-radius: 0 var(--tb-radius-md) var(--tb-radius-md) 0;
    background: var(--tb-surface-2);
    color: var(--tb-text-2);
    font-size: var(--tb-text-sm);
    white-space: nowrap;
}
.input-group > .commonInput { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .commonInput { background-color: var(--tb-field); }

.tb-suggestion {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-space-1_5);
    margin-top: var(--tb-space-1_5);
    padding: 3px 10px;
    border: 1px dashed var(--tb-warning-border);
    border-radius: var(--tb-radius-full);
    background: var(--tb-warning-subtle);
    color: var(--tb-warning-text);
    font-size: var(--tb-text-xs);
    cursor: pointer;
}
.tb-suggestion:hover { background: rgba(245, 165, 36, .2); }

/* search field with icon */
.top_panel_box input.search-with-icon,
.search-with-icon,
.tb-search {
    height: var(--tb-control-md);
    min-width: 180px;
    padding: 0 var(--tb-space-3) 0 38px;
    border: 1px solid var(--tb-border-strong);
    border-radius: var(--tb-radius-md);
    background-color: var(--tb-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B9AB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-position: 12px center;
    background-size: 16px;
    background-repeat: no-repeat;
    color: var(--tb-text);
    font-size: var(--tb-text-md);
    line-height: normal;
}
.search-with-icon::placeholder, .tb-search::placeholder { color: var(--tb-text-3); font-size: var(--tb-text-md); }
.search-with-icon:focus, .tb-search:focus { border-color: var(--tb-primary); box-shadow: var(--tb-ring-shadow); outline: none; }

/* =====================================================================
   7 · TABLES & DATATABLES
   ===================================================================== */
.common_table,
.tb-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-surface);
}
/* wide tables (ui.js): a hint above, a visible scrollbar and a faded edge where more columns follow */
.tb-scroll-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--tb-space-2); font-size: var(--tb-text-xs); color: var(--tb-text-3); }
.tb-scroll-hint[hidden] { display: none; }
.tb-table-wrap.is-scrollable { scrollbar-width: auto; scrollbar-color: var(--tb-border-strong) transparent; }
.tb-table-wrap.is-scrollable::-webkit-scrollbar { height: 12px; }
.tb-table-wrap.is-scrollable::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--tb-border-strong) padding-box; }
.tb-table-wrap.is-scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0, 0, 0, .25)); mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0, 0, 0, .25)); }
.tb-table-wrap.is-scrollable:not(.at-end):not(.at-start) { -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .25), #000 48px, #000 calc(100% - 48px), rgba(0, 0, 0, .25)); mask-image: linear-gradient(to right, rgba(0, 0, 0, .25), #000 48px, #000 calc(100% - 48px), rgba(0, 0, 0, .25)); }
.tb-table-wrap.is-scrollable.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .25), #000 48px); mask-image: linear-gradient(to right, rgba(0, 0, 0, .25), #000 48px); }
.common_table table,
.common_table .table,
table.tb-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    border-radius: 0;
    color: var(--tb-text-2);
    --bs-table-bg: transparent;
    --bs-table-color: var(--tb-text-2);
    --bs-table-border-color: var(--tb-border);
    --bs-table-hover-bg: rgba(255, 255, 255, .02);
}
table.tb-table {
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
    overflow: hidden;
    background: var(--tb-surface);
}
.common_table th,
.common_table td,
table.tb-table th,
table.tb-table td {
    padding: 12px var(--tb-space-4);
    font-size: var(--tb-text-md);
    line-height: var(--tb-leading-md);
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid var(--tb-border-subtle) !important;
    border-radius: 0 !important;
}
.common_table thead th,
.common_table th,
table.tb-table th {
    background: var(--tb-surface-2) !important;
    color: var(--tb-text-3) !important;
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-sm);
    font-weight: var(--tb-weight-medium);
    text-transform: none !important;
    letter-spacing: 0;
    white-space: nowrap;
}
.common_table td,
table.tb-table td {
    background: transparent;
    color: var(--tb-text);
    font-variant-numeric: tabular-nums;
}
.common_table tbody tr,
table.tb-table tbody tr { background: transparent; transition: background-color var(--tb-duration-fast); }
.common_table tbody tr:hover,
.common_table tbody tr:hover td,
table.tb-table tbody tr:hover td { background-color: rgba(255, 255, 255, .025); }
.common_table tbody tr:last-child td,
table.tb-table tbody tr:last-child td { border-bottom: 0 !important; }
.common_table thead,
.common_table thead tr { background: transparent; }
.common_table .text-end, table.tb-table .text-end, table.tb-table th.text-end { text-align: right; }
table.tb-table tfoot td { background: var(--tb-surface-2); color: var(--tb-text); font-weight: var(--tb-weight-semibold); border-top: 1px solid var(--tb-border) !important; border-bottom: 0 !important; }
.common_table a:not(.common-btn):not(.tb-btn) { color: var(--tb-text-2); }
.common_table a:not(.common-btn):not(.tb-btn):hover { color: var(--tb-text); }
.common_table td .fa-pen-to-square, .common_table td .fa-edit, .common_table td .fa-trash, .common_table td .fa-trash-can { font-size: 15px; }
table.tb-table tr.tb-row-group td { background: var(--tb-surface-2); color: var(--tb-text); font-weight: var(--tb-weight-semibold); }
table.tb-table tr.tb-row-highlight td { background: var(--tb-danger-subtle); }
.tb-table--compact th, .tb-table--compact td { padding: 8px 12px !important; font-size: var(--tb-text-sm) !important; }

/* DataTables 1.13 */
.dataTables_wrapper { color: var(--tb-text-2); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--tb-text-3) !important;
    font-size: var(--tb-text-sm);
    padding: var(--tb-space-3) 0;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: var(--tb-space-2); color: var(--tb-text-3); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    height: 36px;
    margin: 0;
    padding: 0 var(--tb-space-3);
    border: 1px solid var(--tb-border-strong);
    border-radius: var(--tb-radius-md);
    background-color: var(--tb-field);
    color: var(--tb-text);
    font-size: var(--tb-text-md);
}
.dataTables_wrapper .dataTables_filter input {
    min-width: 220px;
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B9AB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-position: 10px center;
    background-size: 16px;
    background-repeat: no-repeat;
}
.dataTables_wrapper .dataTables_length select {
    padding-right: 30px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B9AB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: var(--tb-primary); box-shadow: var(--tb-ring-shadow); outline: none; }
table.dataTable { border-collapse: separate !important; }
table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid var(--tb-border-subtle) !important; }
table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::before,
table.dataTable thead > tr > th.sorting_desc::after { opacity: .25; font-size: 9px; }
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_desc::after { opacity: .9; color: var(--tb-primary); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px;
    height: 32px;
    margin: 0 2px;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent !important;
    border-radius: var(--tb-radius-sm) !important;
    background: transparent !important;
    color: var(--tb-text-2) !important;
    font-size: var(--tb-text-sm);
    font-weight: var(--tb-weight-medium);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--tb-surface-2) !important; color: var(--tb-text) !important; border-color: var(--tb-border) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--tb-primary-subtle) !important; color: var(--tb-primary-text) !important; border-color: var(--tb-primary-border) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { opacity: .4; background: transparent !important; border-color: transparent !important; }
.dataTables_wrapper .dataTables_processing { background: var(--tb-surface-2); color: var(--tb-text); border: 1px solid var(--tb-border); border-radius: var(--tb-radius-md); }
table.dataTable td.dataTables_empty { padding: var(--tb-space-8) !important; color: var(--tb-text-3); text-align: center; }
/* DataTables inside a .common_table card: controls sit inside the card */
.common_table .dataTables_wrapper .dataTables_length,
.common_table .dataTables_wrapper .dataTables_filter,
.common_table .dataTables_wrapper .dataTables_info,
.common_table .dataTables_wrapper .dataTables_paginate { padding: var(--tb-space-3) var(--tb-space-4); }

/* Bootstrap pagination (projects list) */
.paginationBox { margin-top: var(--tb-space-6); display: flex; justify-content: center; }
.pagination { gap: var(--tb-space-1); margin: 0; }
.pagination .page-item .page-link,
.paginationBox .pagination .page-item a.page-link,
.paginationBox .pagination .page-item span.page-link {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tb-border) !important;
    border-radius: var(--tb-radius-md) !important;
    background: var(--tb-surface);
    color: var(--tb-text-2);
    font-size: var(--tb-text-sm);
    font-weight: var(--tb-weight-medium);
    box-shadow: none !important;
}
.pagination .page-item .page-link:hover { background: var(--tb-surface-2); color: var(--tb-text); }
.pagination .page-item.active .page-link,
.paginationBox .pagination .page-item a.page-link.active,
.paginationBox .pagination .page-item.active span.page-link { background: var(--tb-primary-subtle); border-color: var(--tb-primary-border) !important; color: var(--tb-primary-text); }
.pagination .page-item.disabled .page-link { opacity: .4; background: transparent; }

/* =====================================================================
   8 · CARDS & PANELS
   ===================================================================== */
.tb-card,
.dashboard_content .projects_main,
.myprojects_main .add_new_project,
.project_add_list .project_box,
.process_list_view,
.process_bar .project_progress,
.process_question .common_questionBox,
.dashboard_main .user_flex_box .user_main_list,
.resource_charts,
.process_manual .question_box {
    background: var(--tb-surface);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-highlight);
}
.tb-card { padding: var(--tb-space-6); margin-bottom: var(--tb-space-6); }
.tb-card--flush { padding: 0; overflow: hidden; }
.tb-table-wrap > table.tb-table,
.tb-card--flush table.tb-table { border: 0; border-radius: 0; }
.tb-card--compact { padding: var(--tb-space-4); }
.tb-card--interactive { transition: border-color var(--tb-duration-fast), transform var(--tb-duration-fast), box-shadow var(--tb-duration-fast); }
.tb-card--interactive:hover { border-color: var(--tb-border-strong); box-shadow: var(--tb-shadow-md), var(--tb-highlight); }
.tb-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tb-space-4); margin-bottom: var(--tb-space-4); }
.tb-card-header > div { min-width: 0; }
.tb-card--flush > .tb-card-header { padding: var(--tb-space-5) var(--tb-space-6) 0; }
.tb-card-title {
    margin: 0;
    font-family: var(--tb-font-display);
    font-size: var(--tb-text-lg);
    line-height: var(--tb-leading-lg);
    font-weight: var(--tb-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--tb-text);
}
.tb-card > .tb-card-title { margin-bottom: var(--tb-space-3); }
.tb-card-subtitle { margin: 2px 0 0; font-size: var(--tb-text-sm); line-height: var(--tb-leading-sm); color: var(--tb-text-3); }
.tb-card-actions { display: flex; align-items: center; gap: var(--tb-space-2); flex: none; }
.tb-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--tb-space-3); margin: var(--tb-space-5) calc(-1 * var(--tb-space-6)) calc(-1 * var(--tb-space-6)); padding: var(--tb-space-4) var(--tb-space-6); border-top: 1px solid var(--tb-border-subtle); background: rgba(255, 255, 255, .015); border-radius: 0 0 var(--tb-radius-lg) var(--tb-radius-lg); }
.tb-card .common_table, .tb-card .tb-table-wrap { border-color: var(--tb-border-subtle); background: transparent; }
.tb-divider { height: 1px; background: var(--tb-border-subtle); border: 0; margin: var(--tb-space-5) 0; }

/* nested items inside a card (new: .tb-item) */
.tb-item { padding: var(--tb-space-3) var(--tb-space-4); }
.tb-item + .tb-item { margin-top: var(--tb-space-2); }
.tb-item,
.projects_box .project_panel,
.common_modal .form_box .flex_box .box_list,
.process_list_view .process_panel,
.dashboard_main .user_flex_box .user_list ul li,
.project_add_list .project_box .signal_box,
.process_bar .signal_box {
    background: var(--tb-surface-2);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-md);
}

/* =====================================================================
   9 · BADGES & STATUS
   ===================================================================== */
.tb-badge,
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-space-1);
    height: 22px;
    padding: 0 var(--tb-space-2);
    border: 1px solid transparent;
    border-radius: var(--tb-radius-full);
    background: var(--tb-surface-3);
    color: var(--tb-text-2);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-xs);
    line-height: 1;
    font-weight: var(--tb-weight-medium);
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}
.tb-badge i { font-size: 10px; }
.tb-badge svg { width: 12px; height: 12px; }
.tb-badge--lime, .tb-badge--success, .badge.bg-green, .bg-green.badge, .badge.bg-success { background: var(--tb-success-subtle); border-color: var(--tb-success-border); color: var(--tb-success-text); }
.tb-badge--pink, .tb-badge--danger, .badge.bg-danger { background: var(--tb-danger-subtle); border-color: var(--tb-danger-border); color: var(--tb-danger-text); }
.tb-badge--amber, .tb-badge--warning, .badge.bg-warning { background: var(--tb-warning-subtle); border-color: var(--tb-warning-border); color: var(--tb-warning-text); }
.tb-badge--blue, .tb-badge--info, .badge.bg-info, .badge.bg-primary { background: var(--tb-info-subtle); border-color: var(--tb-info-border); color: var(--tb-info-text); }
.tb-badge--outline { background: transparent; border-color: var(--tb-border-strong); color: var(--tb-text-2); }
.tb-badge--solid { background: var(--tb-primary); color: var(--tb-text-on-accent); border-color: var(--tb-primary); }
.tb-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tb-badge--lg { height: 26px; padding: 0 10px; font-size: var(--tb-text-sm); }
.bg-green { background-color: var(--tb-primary); color: var(--tb-text-on-accent); }

/* traffic-light status (project status) */
.signal_box { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; width: fit-content; }
.signal_box .com_span,
.radio-group-container .com_span,
.project_box .signal_box .com_span,
.process_bar .signal_box .com_span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--tb-navy-500);
}
.signal_box .com_span.green, .com_span.green { background-color: var(--tb-success); box-shadow: 0 0 0 3px rgba(132, 204, 22, .18); }
.signal_box .com_span.orange, .signal_box .com_span.yellow, .com_span.orange, .com_span.yellow { background-color: var(--tb-warning); box-shadow: 0 0 0 3px rgba(245, 165, 36, .18); }
.signal_box .com_span.red, .com_span.red { background-color: var(--tb-danger); box-shadow: 0 0 0 3px rgba(243, 48, 88, .18); }

/* progress bar */
.progress, .tb-progress { height: 8px; border-radius: var(--tb-radius-full); background: var(--tb-surface-3); overflow: hidden; }
.progress .progress-bar, .tb-progress > span { display: block; height: 100%; background: var(--tb-primary); border-radius: var(--tb-radius-full); }
.progress_box h6 { color: var(--tb-primary-text); font-family: var(--tb-font-sans); font-size: var(--tb-text-md); font-variant-numeric: tabular-nums; }

/* =====================================================================
   10 · HINTS & ALERTS
   ===================================================================== */
.tb-hint,
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--tb-space-3);
    margin-bottom: var(--tb-space-4);
    padding: var(--tb-space-3) var(--tb-space-4);
    border: 1px solid var(--tb-info-border);
    border-radius: var(--tb-radius-md);
    background: var(--tb-info-subtle);
    color: var(--tb-text-2);
    font-size: var(--tb-text-md);
    line-height: 1.55;
}
.tb-hint > i, .tb-hint > svg { flex: none; margin-top: 2px; color: var(--tb-info-text); width: 16px; height: 16px; font-size: 15px; }
.tb-hint > div { min-width: 0; }
.tb-hint strong, .alert strong { color: var(--tb-text); }
.tb-hint a, .alert a { color: var(--tb-primary-text); text-decoration: underline; text-underline-offset: 2px; }
.tb-hint p:last-child { margin-bottom: 0; }
.tb-hint--warning, .alert-warning { border-color: var(--tb-warning-border); background: var(--tb-warning-subtle); }
.tb-hint--warning > i, .tb-hint--warning > svg { color: var(--tb-warning-text); }
.tb-hint--success, .alert-success { border-color: var(--tb-success-border); background: var(--tb-success-subtle); }
.tb-hint--success > i, .tb-hint--success > svg { color: var(--tb-success-text); }
.tb-hint--danger, .alert-danger { border-color: var(--tb-danger-border); background: var(--tb-danger-subtle); }
.tb-hint--danger > i, .tb-hint--danger > svg { color: var(--tb-danger-text); }
.alert { display: block; color: var(--tb-text); }
.alert-success { color: var(--tb-text); }
.alert-danger { color: var(--tb-text); }

/* =====================================================================
   11 · KPI, TABS / SEGMENTED, EMPTY STATE, DETAILS, LEGEND, CHECKLIST
   ===================================================================== */
.tb-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--tb-space-4);
    margin-bottom: var(--tb-space-6);
}
.tb-kpi {
    position: relative;
    padding: var(--tb-space-4) var(--tb-space-5);
    background: var(--tb-surface);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-highlight);
}
.tb-kpi-label {
    display: flex;
    align-items: center;
    gap: var(--tb-space-1_5);
    margin-bottom: var(--tb-space-1_5);
    font-size: var(--tb-text-sm);
    line-height: var(--tb-leading-sm);
    font-weight: var(--tb-weight-medium);
    color: var(--tb-text-3);
}
.tb-kpi-label svg, .tb-kpi-label i { width: 14px; height: 14px; font-size: 13px; }
.tb-kpi-value {
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-2xl);
    line-height: var(--tb-leading-2xl);
    font-weight: var(--tb-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--tb-text);
    font-variant-numeric: tabular-nums;
}
.tb-kpi-sub { margin-top: var(--tb-space-1); font-size: var(--tb-text-xs); line-height: var(--tb-leading-xs); color: var(--tb-text-3); }
.tb-kpi--accent { border-color: var(--tb-primary-border); background: linear-gradient(180deg, rgba(132, 204, 22, .08), rgba(132, 204, 22, 0) 70%), var(--tb-surface); }
.tb-kpi--accent .tb-kpi-value { color: var(--tb-primary-text); }
.tb-kpi .tb-badge { margin-left: auto; }

/* tabs (underline) */
.tb-tabs, .nav-tabs {
    display: flex;
    gap: var(--tb-space-1);
    margin-bottom: var(--tb-space-5);
    border-bottom: 1px solid var(--tb-border-subtle);
    overflow-x: auto;
}
.tb-tabs__item, .nav-tabs .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--tb-space-2);
    height: var(--tb-control-md);
    padding: 0 var(--tb-space-3);
    margin-bottom: -1px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: var(--tb-text-3);
    font-size: var(--tb-text-md);
    font-weight: var(--tb-weight-medium);
    white-space: nowrap;
    cursor: pointer;
}
.tb-tabs__item:hover, .nav-tabs .nav-link:hover { color: var(--tb-text); }
.tb-tabs__item.is-active, .tb-tabs__item[aria-selected="true"], .nav-tabs .nav-link.active { color: var(--tb-text) !important; border-bottom-color: var(--tb-primary) !important; }

/* segmented control (pill toggle) */
.tb-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-md);
    background: var(--tb-bg);
}
.tb-segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tb-space-1_5);
    height: 30px;
    padding: 0 var(--tb-space-3);
    border: 0;
    border-radius: var(--tb-radius-sm);
    background: transparent;
    color: var(--tb-text-3);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-sm);
    font-weight: var(--tb-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--tb-duration-fast), color var(--tb-duration-fast);
}
.tb-segmented__item:hover { color: var(--tb-text); }
.tb-segmented__item.is-active, .tb-segmented__item[aria-pressed="true"], .tb-segmented input:checked + .tb-segmented__item {
    background: var(--tb-surface-2);
    color: var(--tb-text);
    box-shadow: var(--tb-shadow-sm), inset 0 0 0 1px var(--tb-border);
}
.tb-segmented input { position: absolute; opacity: 0; pointer-events: none; }

/* empty state */
.tb-empty,
.myprojects_main .add_new_project {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--tb-space-2);
    padding: var(--tb-space-12) var(--tb-space-6);
}
.tb-empty { border: 1px dashed var(--tb-border); border-radius: var(--tb-radius-lg); background: rgba(20, 35, 57, .5); }
.tb-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--tb-space-2);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-surface-2);
    border: 1px solid var(--tb-border);
    color: var(--tb-text-2);
}
.tb-empty__icon svg { width: 22px; height: 22px; }
.tb-empty__title, .myprojects_main .project_add_text h5 { margin: 0; font-family: var(--tb-font-display); font-size: var(--tb-text-lg); font-weight: var(--tb-weight-semibold); color: var(--tb-text); }
.tb-empty__text, .myprojects_main .project_add_text p { max-width: 440px; margin: 0 auto; color: var(--tb-text-3); font-size: var(--tb-text-md); line-height: 1.55; }
.tb-empty__actions, .myprojects_main .project_add_text .common-btn { margin-top: var(--tb-space-4); }
.tb-empty__actions { display: flex; gap: var(--tb-space-2); flex-wrap: wrap; justify-content: center; }
.myprojects_main .project_add_text { display: flex; flex-direction: column; align-items: center; gap: var(--tb-space-2); }

/* collapsible calculation path */
details.tb-details {
    margin-top: var(--tb-space-3);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-md);
    background: var(--tb-bg);
}
details.tb-details > summary {
    display: flex;
    align-items: center;
    gap: var(--tb-space-2);
    padding: 10px 14px;
    min-height: 44px;   /* touch target */
    list-style: none;
    cursor: pointer;
    font-size: var(--tb-text-sm);
    font-weight: var(--tb-weight-medium);
    color: var(--tb-text-2);
    border-radius: var(--tb-radius-md);
}
details.tb-details > summary:hover { color: var(--tb-text); }
details.tb-details > summary::-webkit-details-marker { display: none; }
details.tb-details > summary::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--tb-text-3);
    transition: transform var(--tb-duration-fast);
}
details.tb-details[open] > summary::before { transform: rotate(90deg); }
details.tb-details > .tb-details-body { padding: 0 14px 14px; font-size: var(--tb-text-sm); color: var(--tb-text-2); }

/* stacked bar + legend */
.tb-stack { display: flex; height: 12px; border-radius: var(--tb-radius-full); overflow: hidden; background: var(--tb-surface-3); gap: 2px; }
.tb-stack > span { display: block; height: 100%; }
.tb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: var(--tb-text-xs); color: var(--tb-text-2); }
.tb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.chart_legend { color: var(--tb-text-2); font-size: var(--tb-text-sm); gap: var(--tb-space-5); }
.legend_box { border-radius: 3px; }

/* checklist */
.tb-checklist { list-style: none; margin: 0; padding: 0; }
.tb-checklist li { display: flex; align-items: center; gap: var(--tb-space-4); padding: var(--tb-space-3) 0; border-bottom: 1px solid var(--tb-border-subtle); }
.tb-checklist li:last-child { border-bottom: none; }
.tb-checklist .tb-check {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--tb-border-strong);
    color: var(--tb-text-3);
    font-weight: var(--tb-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.tb-checklist li.is-done .tb-check { background: var(--tb-primary); border-color: var(--tb-primary); color: var(--tb-text-on-accent); }
.tb-checklist .tb-check-text { flex: 1; min-width: 0; }
.tb-checklist .tb-check-text strong { display: block; font-size: var(--tb-text-md); font-weight: var(--tb-weight-semibold); }
.tb-checklist .tb-check-text span { color: var(--tb-text-3); font-size: var(--tb-text-sm); }

/* stepper (project phases) – partial layouts/partials/process-flow.blade.php
   One grid column per phase: row 1 = markers + connectors, row 2 = labels, row 3 = sub-phase chips
   of the current phase. The steps use display: contents, so all labels share one row and the chips
   can span several columns. Narrow boxes (< 460 px – phones, small cards) show only the label of the
   current phase (the others stay readable for screen readers) and the chips use the full width.
   Text never below 12 px, words are never broken. */
.tb-stepper { container-type: inline-size; width: 100%; min-width: 0; padding: var(--tb-space-1) 0; }
.tb-stepper__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: var(--tb-space-2);
    margin: 0;
    padding: 0;
}
.tb-stepper__step { display: contents; }
.tb-stepper__marker {
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--tb-border-strong);
    border-radius: 50%;
    background: var(--tb-surface-2);
    color: var(--tb-text-3);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-sm);
    line-height: 1;
    font-weight: var(--tb-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.tb-stepper__marker svg { width: 16px; height: 16px; }
.tb-stepper__step.is-done > .tb-stepper__marker { background: var(--tb-primary-subtle); border-color: var(--tb-primary-border); color: var(--tb-primary-text); }
.tb-stepper__step.is-active > .tb-stepper__marker { background: var(--tb-primary); border-color: var(--tb-primary); color: var(--tb-text-on-accent); box-shadow: 0 0 0 4px rgba(132, 204, 22, .18); }
/* connector from the centre of this marker to the next one, with a small gap around the markers */
.tb-stepper__step:not(:last-child)::after {
    content: '';
    grid-row: 1;
    align-self: center;
    height: 2px;
    margin-inline: calc(25% + 20px);
    border-radius: 2px;
    background: var(--tb-border);
}
.tb-stepper__step.is-done:not(:last-child)::after,
.tb-stepper__step.is-passed:not(:last-child)::after { background: var(--tb-primary-border); }
.tb-stepper__label {
    grid-row: 2;
    min-width: 0;
    padding: 0 var(--tb-space-1);
    text-align: center;
    font-size: var(--tb-text-sm);
    line-height: var(--tb-leading-sm);
    font-weight: var(--tb-weight-medium);
    color: var(--tb-text-3);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}
.tb-stepper__step.is-done > .tb-stepper__label { color: var(--tb-text-2); }
.tb-stepper__step.is-active > .tb-stepper__label { color: var(--tb-text); font-weight: var(--tb-weight-semibold); }
.tb-stepper__subs {
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tb-space-1_5);
    min-width: 0;
    margin-top: var(--tb-space-1);
}
.tb-stepper__sub {
    display: inline-flex;
    align-items: center;
    min-height: var(--tb-control-sm);
    max-width: 100%;
    padding: 0 var(--tb-space-3);
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-bg);
    color: var(--tb-text-2);
    font-size: var(--tb-text-xs);
    line-height: var(--tb-leading-xs);
    font-weight: var(--tb-weight-medium);
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--tb-duration-fast), border-color var(--tb-duration-fast), color var(--tb-duration-fast);
}
a.tb-stepper__sub:hover { background: var(--tb-surface-2); border-color: var(--tb-border-strong); color: var(--tb-text); }
span.tb-stepper__sub:not(.is-active) { border-style: dashed; color: var(--tb-text-3); }   /* not reached yet – no link */
.tb-stepper__sub.is-active { background: var(--tb-primary-subtle); border-color: var(--tb-primary-border); color: var(--tb-primary-text); font-weight: var(--tb-weight-semibold); }
/* column of each phase (5 phases) */
.tb-stepper__step:nth-child(1) > .tb-stepper__marker, .tb-stepper__step:nth-child(1) > .tb-stepper__label { grid-column: 1; }
.tb-stepper__step:nth-child(2) > .tb-stepper__marker, .tb-stepper__step:nth-child(2) > .tb-stepper__label { grid-column: 2; }
.tb-stepper__step:nth-child(3) > .tb-stepper__marker, .tb-stepper__step:nth-child(3) > .tb-stepper__label { grid-column: 3; }
.tb-stepper__step:nth-child(4) > .tb-stepper__marker, .tb-stepper__step:nth-child(4) > .tb-stepper__label { grid-column: 4; }
.tb-stepper__step:nth-child(5) > .tb-stepper__marker, .tb-stepper__step:nth-child(5) > .tb-stepper__label { grid-column: 5; }
.tb-stepper__step:nth-child(1)::after { grid-column: 1 / span 2; }
.tb-stepper__step:nth-child(2)::after { grid-column: 2 / span 2; }
.tb-stepper__step:nth-child(3)::after { grid-column: 3 / span 2; }
.tb-stepper__step:nth-child(4)::after { grid-column: 4 / span 2; }
/* chips: three columns centred under the current phase (start / end aligned at the edges) */
.tb-stepper__step:nth-child(1) > .tb-stepper__subs { grid-column: 1 / span 3; justify-content: flex-start; }
.tb-stepper__step:nth-child(2) > .tb-stepper__subs { grid-column: 1 / span 3; }
.tb-stepper__step:nth-child(3) > .tb-stepper__subs { grid-column: 2 / span 3; }
.tb-stepper__step:nth-child(4) > .tb-stepper__subs { grid-column: 3 / span 3; }
.tb-stepper__step:nth-child(5) > .tb-stepper__subs { grid-column: 3 / span 3; justify-content: flex-end; }

@container (max-width: 459px) {
    .tb-stepper__marker { width: 28px; height: 28px; font-size: var(--tb-text-xs); }
    .tb-stepper__marker svg { width: 14px; height: 14px; }
    .tb-stepper__step:not(:last-child)::after { margin-inline: calc(25% + 18px); }
    /* only the current phase is labelled (completed project: the last one) */
    .tb-stepper__step > .tb-stepper__label {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .tb-stepper__step.is-active > .tb-stepper__label,
    .tb-stepper__steps:not(:has(.is-active)) > .tb-stepper__step:last-child > .tb-stepper__label {
        position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible;
        clip: auto; white-space: normal; font-size: var(--tb-text-xs); line-height: var(--tb-leading-xs);
    }
    .tb-stepper__step:nth-child(1) > .tb-stepper__label { grid-column: 1 / span 3; text-align: left; }
    .tb-stepper__step:nth-child(2) > .tb-stepper__label { grid-column: 1 / span 3; }
    .tb-stepper__step:nth-child(3) > .tb-stepper__label { grid-column: 2 / span 3; }
    .tb-stepper__step:nth-child(4) > .tb-stepper__label { grid-column: 3 / span 3; }
    .tb-stepper__step:nth-child(5) > .tb-stepper__label { grid-column: 3 / span 3; text-align: right; }
    /* chips use the full width, aligned towards the current phase */
    .tb-stepper .tb-stepper__step > .tb-stepper__subs { grid-column: 1 / -1; }
    .tb-stepper .tb-stepper__step:nth-child(2) > .tb-stepper__subs { justify-content: flex-start; }
    .tb-stepper .tb-stepper__step:nth-child(4) > .tb-stepper__subs { justify-content: flex-end; }
    .tb-stepper__sub { white-space: normal; }
}
@media (pointer: coarse) {
    a.tb-stepper__sub { min-height: var(--tb-control-md); }
}

/* =====================================================================
   12 · MODALS & OVERLAYS
   ===================================================================== */
.modal-backdrop { --bs-backdrop-bg: #040914; --bs-backdrop-opacity: .72; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal { --bs-modal-bg: var(--tb-surface); --bs-modal-color: var(--tb-text-2); --bs-modal-border-color: var(--tb-border); --bs-modal-border-radius: var(--tb-radius-xl); --bs-modal-header-border-color: var(--tb-border-subtle); --bs-modal-footer-border-color: var(--tb-border-subtle); }
.modal-content,
.common_modal .modal-content {
    background-color: var(--tb-surface);
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-xl);
    box-shadow: var(--tb-shadow-lg), var(--tb-highlight);
    color: var(--tb-text-2);
}
.modal-header,
.common_modal .modal-header {
    padding: var(--tb-space-5) var(--tb-space-6) var(--tb-space-4);
    border-bottom: 1px solid var(--tb-border-subtle);
    gap: var(--tb-space-3);
}
.modal-title,
.common_modal .modal-content .modal-title {
    margin: 0;
    font-family: var(--tb-font-display);
    font-size: var(--tb-text-xl);
    line-height: var(--tb-leading-xl);
    font-weight: var(--tb-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--tb-text);
}
.modal-header .btn-close {
    width: 32px; height: 32px;
    margin: -4px -8px -4px auto;
    padding: 0;
    border-radius: var(--tb-radius-sm);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8C4D9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 18px no-repeat;
    opacity: 1;
    filter: none;
}
.modal-header .btn-close:hover { background-color: var(--tb-surface-2); }
.modal-body,
.common_modal .modal-body { padding: var(--tb-space-6); }
.modal-footer,
.common_modal .modal-footer {
    padding: var(--tb-space-4) var(--tb-space-6);
    border-top: 1px solid var(--tb-border-subtle);
    gap: var(--tb-space-3);
    background: rgba(255, 255, 255, .015);
    border-radius: 0 0 var(--tb-radius-xl) var(--tb-radius-xl);
}
.modal-footer > * { margin: 0; }
.common_modal .modal-footer .btn,
.common_modal .modal-footer .common-btn,
.common_modal .modal-footer .cancel-btn {
    min-width: 112px;
    margin: 0;
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md);
    font-weight: var(--tb-weight-semibold);
    padding: 0 var(--tb-space-4);
    border-radius: var(--tb-radius-md);
}
.common_modal .modal-footer .cancel-btn {
    background: var(--tb-surface-2);
    color: var(--tb-text);
    border: 1px solid var(--tb-border-strong);
}
.common_modal .modal-footer .cancel-btn:hover { background: var(--tb-surface-3); border-color: var(--tb-navy-300); }
.common_modal .modal-footer .common-btn { background: var(--tb-btn-bg); color: var(--tb-btn-fg); border: 1px solid var(--tb-btn-border); }
.common_modal .modal-footer .common-btn:hover { background: var(--tb-btn-bg-hover); color: var(--tb-btn-fg-hover); }

/* confirmation dialogs (delete / reset): Cancel left, destructive action right */
.deletWarning .modal-dialog { max-width: 440px; }
.deletWarning.common_modal .modal-footer { flex-direction: row-reverse; justify-content: flex-start; }
.deletWarning.common_modal .warning_text,
.cost_benefit .warning_text { text-align: left; padding: 0; }
.deletWarning.common_modal .warning_text h5,
.cost_benefit .warning_text h5 { display: flex; align-items: center; gap: var(--tb-space-3); font-size: var(--tb-text-xl); margin-bottom: var(--tb-space-2); }
.deletWarning.common_modal .warning_text h5::before {
    content: '';
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--tb-radius-lg);
    background: var(--tb-danger-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / 20px no-repeat;
    border: 1px solid var(--tb-danger-border);
}
.deletWarning.common_modal .warning_text p,
.cost_benefit .warning_text p { font-size: var(--tb-text-md); color: var(--tb-text-2); padding: 0 0 0 52px; max-width: none; text-align: left; margin: 0; }

/* form layout inside legacy modals */
.common_modal .form_box .form-group { margin-bottom: var(--tb-space-4); }
.common_modal .form_box .flex_box { gap: var(--tb-space-4); }
.common_modal .form_box .flex_box .box_list { padding: 6px 10px; margin-bottom: var(--tb-space-2); }
.common_modal .form_box .flex_box .box_list span { font-size: var(--tb-text-sm); font-weight: var(--tb-weight-medium); color: var(--tb-text); }
.common_modal .form_box .flex_box .box_list i { color: var(--tb-text-3); font-size: 15px; cursor: pointer; }
.common_modal .form_box .flex_box .box_list i:hover { color: var(--tb-danger-text); }
.common_modal .form_box .flex_box .add_new { gap: var(--tb-space-2); }
.common_modal .form_box .flex_box .add_new .btn_add {
    flex: none;
    width: var(--tb-control-md);
    height: var(--tb-control-md);
    border-radius: var(--tb-radius-md);
    border: 1px solid var(--tb-primary);
    background: var(--tb-primary);
    color: var(--tb-text-on-accent);
}
.common_modal .form_box .flex_box .add_new .btn_add:hover { background: var(--tb-primary-hover); }
.common_modal .box_list { align-items: center; gap: var(--tb-space-2); }
.common_modal .box_list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* custom radio list (project status) */
.radio-group-container { gap: var(--tb-space-2); }
.radio-group-container .custom-radio-label {
    display: flex;
    align-items: center;
    gap: var(--tb-space-3);
    min-height: 44px;
    padding: 0 var(--tb-space-3);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-md);
    background: var(--tb-surface-2);
    color: var(--tb-text);
    font-size: var(--tb-text-md);
    cursor: pointer;
}
.radio-group-container .custom-radio-label:has(input:checked) { border-color: var(--tb-primary-border); background: var(--tb-primary-subtle); }
.radio-group-container .custom-radio-label:has(input:focus-visible) { outline: 2px solid var(--tb-primary); outline-offset: 2px; }
.radio-group-container .custom-radio-button { position: relative; width: 18px; height: 18px; border: 2px solid var(--tb-border-strong); border-radius: 50%; background: var(--tb-field); }
.radio-group-container .custom-radio-button::after { background: var(--tb-primary); }
.custom-radio-label:hover .custom-radio-button { border-color: var(--tb-primary); }

/* bug report dialog (header) */
.tb-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--tb-space-5);
    background: var(--tb-overlay);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.tb-dialog {
    width: 100%;
    max-width: 480px;
    background: var(--tb-surface);
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-xl);
    box-shadow: var(--tb-shadow-lg), var(--tb-highlight);
}
.tb-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--tb-space-3); padding: var(--tb-space-5) var(--tb-space-6) 0; }
.tb-dialog__title { display: flex; align-items: center; gap: var(--tb-space-3); margin: 0; font-size: var(--tb-text-xl); }
.tb-dialog__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--tb-radius-md); background: var(--tb-danger-subtle); border: 1px solid var(--tb-danger-border); color: var(--tb-danger-text); }
.tb-dialog__icon svg { width: 18px; height: 18px; }
.tb-dialog__body { padding: var(--tb-space-4) var(--tb-space-6) var(--tb-space-5); }
.tb-dialog__body > p { color: var(--tb-text-3); font-size: var(--tb-text-md); margin-bottom: var(--tb-space-4); }
.tb-dialog__footer { display: flex; justify-content: flex-end; gap: var(--tb-space-3); padding: var(--tb-space-4) var(--tb-space-6); border-top: 1px solid var(--tb-border-subtle); }
.tb-dialog__status { display: none; margin-top: var(--tb-space-3); font-size: var(--tb-text-sm); font-weight: var(--tb-weight-semibold); text-align: center; }

/* =====================================================================
   13 · THIRD PARTY – tom-select, flatpickr, toastr, cookie banner, Chart.js boxes
   ===================================================================== */
/* tom-select */
.ts-wrapper { min-height: var(--tb-control-md); }
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-control {
    min-height: var(--tb-control-md);
    padding: 6px 36px 6px var(--tb-space-3) !important;
    align-items: center;
    border: 1px solid var(--tb-border-strong) !important;
    border-radius: var(--tb-radius-md) !important;
    background: var(--tb-field) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--tb-text) !important;
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md) !important;
    line-height: var(--tb-leading-md);
}
.ts-wrapper.multi .ts-control { padding: 4px 36px 4px 6px !important; }
.ts-wrapper.focus .ts-control { border-color: var(--tb-primary) !important; box-shadow: var(--tb-ring-shadow) !important; }
.ts-control input,
.ts-control input::placeholder { color: var(--tb-text) !important; font-size: var(--tb-text-md) !important; }
.ts-control input::placeholder { color: var(--tb-text-3) !important; }
.ts-wrapper.single .ts-control::after,
.ts-wrapper:not(.single) .ts-control::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B9AB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform var(--tb-duration-fast);
}
.ts-wrapper.dropdown-active .ts-control::after { transform: rotate(180deg); }
.ts-wrapper.multi .ts-control > div,
.ts-wrapper.multi .ts-control > .item {
    margin: 2px 4px 2px 0;
    padding: 2px 8px !important;
    border: 1px solid var(--tb-border) !important;
    border-radius: var(--tb-radius-sm) !important;
    background: var(--tb-surface-3) !important;
    background-image: none !important;
    color: var(--tb-text) !important;
    font-size: var(--tb-text-sm);
    text-shadow: none !important;
    box-shadow: none !important;
}
.ts-wrapper.multi .ts-control > .item.active { border-color: var(--tb-primary-border) !important; background: var(--tb-primary-subtle) !important; }
.ts-wrapper.plugin-remove_button .item .remove { border-left-color: var(--tb-border) !important; color: var(--tb-text-3); }
.ts-wrapper.plugin-remove_button .item .remove:hover { background: transparent !important; color: var(--tb-danger-text); }
.ts-dropdown,
.ts-dropdown.single,
.ts-dropdown.multi {
    margin-top: 6px;
    padding: 4px;
    border: 1px solid var(--tb-border) !important;
    border-radius: var(--tb-radius-md) !important;
    background: var(--tb-surface-2) !important;
    box-shadow: var(--tb-shadow-lg) !important;
    color: var(--tb-text) !important;
    font-size: var(--tb-text-md) !important;
    z-index: 1060;
}
.ts-dropdown .option,
.ts-dropdown [data-selectable].option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
    padding: 8px 10px;
    border-radius: var(--tb-radius-sm) !important;
    color: var(--tb-text-2);
}
.ts-dropdown .optgroup-header { background: transparent; color: var(--tb-text-3); font-size: var(--tb-text-xs); font-weight: var(--tb-weight-semibold); text-transform: uppercase; letter-spacing: var(--tb-tracking-caps); }
.ts-dropdown .active,
.ts-dropdown .option:hover { background: var(--tb-surface-3) !important; color: var(--tb-text) !important; }
.ts-dropdown .selected,
.ts-dropdown .option.selected { color: var(--tb-primary-text) !important; }
.ts-dropdown .create { color: var(--tb-primary-text); }
.input-group .ts-wrapper.form-control { border: 0 !important; background: transparent !important; padding: 0; }
.input-group .ts-wrapper.form-control .ts-control { border-radius: var(--tb-radius-md) 0 0 var(--tb-radius-md) !important; }

/* flatpickr (large touch-friendly calendar) */
input.tb-date,
.flatpickr-input.commonInput[readonly] {
    cursor: pointer;
    color: var(--tb-text);
    background-color: var(--tb-field) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238B9AB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}
.flatpickr-calendar {
    width: 340px !important;
    padding: 10px;
    background: var(--tb-surface-2);
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-shadow-lg);
    font-family: var(--tb-font-sans);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--tb-surface-2); }
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--tb-surface-2); }
.flatpickr-months { padding-bottom: 6px; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--tb-text);
    fill: var(--tb-text);
    font-family: var(--tb-font-sans);
    font-size: 16px;
    font-weight: var(--tb-weight-semibold);
}
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--tb-surface-2); }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: var(--tb-text-2); fill: var(--tb-text-2); padding: 12px; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--tb-primary); }
span.flatpickr-weekday { color: var(--tb-text-3); font-size: var(--tb-text-xs); font-weight: var(--tb-weight-semibold); background: transparent; }
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { width: 318px !important; min-width: 318px !important; max-width: 318px !important; }
.flatpickr-day {
    max-width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: var(--tb-text-md);
    color: var(--tb-text);
    border-radius: var(--tb-radius-md);
    font-variant-numeric: tabular-nums;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--tb-surface-3); border-color: var(--tb-surface-3); }
.flatpickr-day.today { border-color: var(--tb-primary-border); }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--tb-primary);
    border-color: var(--tb-primary);
    color: var(--tb-text-on-accent);
    font-weight: var(--tb-weight-semibold);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: var(--tb-text-disabled); }

/* toastr */
#toast-container > div {
    width: 360px;
    padding: 14px 16px 14px 48px;
    border: 1px solid var(--tb-border);
    border-left: 3px solid var(--tb-info);
    border-radius: var(--tb-radius-lg);
    background-color: var(--tb-surface-2) !important;
    background-position: 16px center;
    background-size: 18px;
    box-shadow: var(--tb-shadow-lg) !important;
    color: var(--tb-text);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md);
    line-height: 1.45;
    opacity: 1;
}
#toast-container > div:hover { box-shadow: var(--tb-shadow-lg) !important; }
#toast-container > .toast-success { border-left-color: var(--tb-success); }
#toast-container > .toast-error { border-left-color: var(--tb-danger); }
#toast-container > .toast-warning { border-left-color: var(--tb-warning); }
#toast-container > .toast-info { border-left-color: var(--tb-info); }
.toast-title { font-weight: var(--tb-weight-semibold); color: var(--tb-text); }
.toast-message { color: var(--tb-text-2); }
.toast-close-button { color: var(--tb-text-3); text-shadow: none; opacity: 1; }
.toast-progress { background: var(--tb-primary); opacity: .6; }

/* cookie banner + cookie modal: styled in cookie-consent.css (scoped to #cookie-consent-banner / #cookie-modal) */

/* chart containers */
.chart_box canvas,
.analysis_chart,
#chart_div {
    background: var(--tb-surface);
    border: 1px solid var(--tb-border-subtle) !important;
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-highlight);
}
.analysis_chart { padding: var(--tb-space-5); overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Long process in a narrow card (half width, phone): the chart scrolls sideways inside its card
   instead of running out of it; step names, durations and resource labels stay in place. */
.analysis_chart .demo-main-content { min-width: max-content; }
.analysis_chart .process-name,
.analysis_chart .axis-left-header,
.analysis_chart .resource-name { position: sticky; left: 0; z-index: 6; }
.analysis_chart .duration-time { position: sticky; left: var(--tb-chart-name-w, 160px); z-index: 6; }
.tb-chart { position: relative; padding: var(--tb-space-5); background: var(--tb-surface); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-lg); }

/* =====================================================================
   14 · LEGACY PAGE NORMALISATION – old markup, new look
   ===================================================================== */
/* sorting dropdown (projects) + generic comDropbox */
.myproject_list .soarting_drop { position: relative; }
.myproject_list .soarting_drop .sort_click,
.comDropbox .drop_click,
.process_list_view .top_panel_box .manchine_drop .drop_click,
.process_list_view .top_panel_box .employees_drop .drop_click {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-2);
    height: var(--tb-control-md);
    min-width: 180px;
    padding: 0 var(--tb-space-3);
    border: 1px solid var(--tb-border-strong);
    border-radius: var(--tb-radius-md);
    background: var(--tb-field);
    color: var(--tb-text);
    font-family: var(--tb-font-sans);
    font-size: var(--tb-text-md);
    font-weight: var(--tb-weight-medium);
}
.myproject_list .soarting_drop .sort_click:hover,
.comDropbox .drop_click:hover { border-color: var(--tb-navy-300); }
.myproject_list .soarting_drop .sort_click i,
.comDropbox .drop_click i { font-size: 11px; color: var(--tb-text-3); }
.myproject_list .soarting_drop ul.dropdown,
.comDropbox ul.dropdown,
.process_list_view .top_panel_box .manchine_drop ul.dropdown,
.process_list_view .top_panel_box .employees_drop ul.dropdown {
    z-index: 1000;
    min-width: 220px;
    margin-top: 6px;
    padding: 4px;
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-md);
    background: var(--tb-surface-2);
    box-shadow: var(--tb-shadow-lg);
}
.myproject_list .soarting_drop ul.dropdown li a,
.comDropbox ul.dropdown li a,
.process_list_view .top_panel_box .manchine_drop ul.dropdown li a,
.process_list_view .top_panel_box .employees_drop ul.dropdown li a {
    display: flex;
    align-items: center;
    gap: var(--tb-space-2);
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--tb-radius-sm);
    color: var(--tb-text-2);
    font-size: var(--tb-text-md);
}
.myproject_list .soarting_drop ul.dropdown li a:hover,
.comDropbox ul.dropdown li a:hover,
.process_list_view .top_panel_box .manchine_drop ul.dropdown li a:hover,
.process_list_view .top_panel_box .employees_drop ul.dropdown li a:hover { background: var(--tb-surface-3); color: var(--tb-text); }

/* role or machine saved without a money value: one question in the dialog (ui.js tbMoneyReminder) */
.tb-money-reminder { display: flex; flex-direction: column; gap: var(--tb-space-2); margin-top: var(--tb-space-4); padding: var(--tb-space-3) var(--tb-space-4); border: 1px solid var(--tb-warning-border); border-radius: var(--tb-radius-md); background: var(--tb-warning-subtle); animation: tb-art-in .25s var(--tb-ease); }
.tb-money-reminder__text { margin: 0; color: var(--tb-text); font-size: var(--tb-text-sm); }
.tb-money-reminder__actions { display: flex; flex-wrap: wrap; gap: var(--tb-space-2); }

/* recording: one filter symbol (by machine / role) instead of two labelled buttons */
.tb-rec-filter { position: relative; }
.comDropbox.tb-rec-filter .drop_click { position: relative; justify-content: center; width: var(--tb-control-md); min-width: 0; padding: 0; }
.tb-rec-filter .drop_click svg { width: 18px; height: 18px; color: var(--tb-text-2); }
.tb-rec-filter.is-filtered .drop_click { border-color: var(--tb-primary-border); background: var(--tb-primary-subtle); }
.tb-rec-filter.is-filtered .drop_click svg { color: var(--tb-primary-text); }
.tb-rec-filter__count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--tb-radius-full); background: var(--tb-primary); color: var(--tb-text-on-accent); font-size: 11px; font-weight: var(--tb-weight-semibold); line-height: 18px; text-align: center; }
.tb-rec-filter__menu { display: none; position: absolute; z-index: 1000; left: 0; top: 100%; width: max-content; min-width: 240px; max-width: min(320px, 90vw); max-height: 60vh; overflow-y: auto; margin-top: 6px; padding: 6px; border: 1px solid var(--tb-border); border-radius: var(--tb-radius-md); background: var(--tb-surface-2); box-shadow: var(--tb-shadow-lg); }
.tb-rec-filter__title { margin: 6px 8px 2px; font-size: var(--tb-text-xs); font-weight: var(--tb-weight-semibold); letter-spacing: var(--tb-tracking-caps); text-transform: uppercase; color: var(--tb-text-3); }
.tb-rec-filter__menu ul { margin: 0 0 4px; padding: 0; list-style: none; }
.tb-rec-filter__menu a { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--tb-radius-sm); color: var(--tb-text-2); font-size: var(--tb-text-md); text-decoration: none; }
.tb-rec-filter__menu a:hover { background: var(--tb-surface-3); color: var(--tb-text); }
.tb-rec-filter__menu a.is-active { color: var(--tb-primary-text); font-weight: var(--tb-weight-semibold); }
.tb-rec-filter__menu a::before { content: ""; width: 14px; text-align: center; }
.tb-rec-filter__menu a.is-active::before { content: "✓"; }

/* project cards (projects list) */
.project_add_list { gap: var(--tb-space-5); margin-top: var(--tb-space-5); }
.project_add_list .project_box { width: calc(50% - 10px); padding: var(--tb-space-5) var(--tb-space-6); transition: border-color var(--tb-duration-fast), box-shadow var(--tb-duration-fast); }
.project_add_list .project_box:hover { border-color: var(--tb-border-strong); box-shadow: var(--tb-shadow-md), var(--tb-highlight); }
.project_add_list .project_box .top_box { gap: var(--tb-space-4); align-items: flex-start; }
.project_add_list .project_box .top_box h5 { font-family: var(--tb-font-display); font-size: var(--tb-text-xl); line-height: var(--tb-leading-xl); font-weight: var(--tb-weight-semibold); text-transform: none; color: var(--tb-text); margin: 0; }
.project_add_list .project_box .top_box a:hover h5 { color: var(--tb-primary-text); }
.project_add_list .project_box .top_box .right_box { gap: var(--tb-space-3); }
.project_box .top_box .right_box .edit_box { gap: var(--tb-space-2); }
.project_add_list .project_box p,
.project_add_list .project_box .font-16 { font-size: var(--tb-text-md); color: var(--tb-text-3); margin-bottom: var(--tb-space-1); }
.project_add_list .project_box p span { color: var(--tb-text); }
.project_add_list .project_box .date_box p,
.project_add_list .project_box .location p { font-size: var(--tb-text-md); color: var(--tb-text-3); }
.project_add_list .project_box .date_box p span,
.project_add_list .project_box .location p span { font-size: inherit; color: var(--tb-text); }
.project_add_list .project_box .machine_box,
.project_add_list .project_box .employee_box { margin-top: var(--tb-space-3); }
.project_add_list .project_box .machine_box p,
.project_add_list .project_box .employee_box p { font-size: var(--tb-text-sm); font-weight: var(--tb-weight-medium); color: var(--tb-text-3); margin-bottom: var(--tb-space-1_5); }
.project_add_list .project_box .machine_box span,
.project_add_list .project_box .employee_box span,
.project_add_list .project_box .machine_list span {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 0 4px 4px 0;
    padding: 0 var(--tb-space-2);
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-surface-2);
    color: var(--tb-text-2);
    font-size: var(--tb-text-xs);
    font-weight: var(--tb-weight-medium);
}
.project_add_list .project_box .project_progress .top_box p { font-size: var(--tb-text-sm); color: var(--tb-text-3); }
.project_progress .progress_box .progress { background: var(--tb-surface-3); }
.myprojects_main .add_new_project { margin-top: var(--tb-space-5); }

/* dashboard (overview) project panels */
.dashboard_content .projects_main { padding: var(--tb-space-4); }
.projects_box .project_panel { padding: var(--tb-space-4) var(--tb-space-5); margin-bottom: var(--tb-space-2); }
.projects_box .project_panel:last-child { margin-bottom: 0; }
.projects_box .project_panel .project_name h6 { font-family: var(--tb-font-sans); font-size: var(--tb-text-md); font-weight: var(--tb-weight-semibold); letter-spacing: 0; }
.projects_box .project_panel .top_box p { font-size: var(--tb-text-sm); color: var(--tb-text-3); }
.dashboard_main .user_flex_box .user_list ul li span { color: var(--tb-text); }

/* project progress box (process bar at the top of each step page) */
.process_bar .project_progress { padding: var(--tb-space-3) var(--tb-space-5) var(--tb-space-4); margin-bottom: var(--tb-space-5); }
.tb-pbar__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tb-space-2) var(--tb-space-4); margin-bottom: var(--tb-space-2); }
.tb-pbar__title { margin: 0; font-size: var(--tb-text-sm); font-weight: var(--tb-weight-medium); color: var(--tb-text-3); }
.tb-pbar__title span { color: var(--tb-text-2); }
.process_bar .signal_status { gap: var(--tb-space-2); margin: 0; justify-content: flex-end; }
.process_bar .signal_status .common-btn { height: var(--tb-control-sm); min-height: var(--tb-control-sm); padding: 0 var(--tb-space-3); font-size: var(--tb-text-sm); border-radius: var(--tb-radius-sm); }
.process_bar .signal_box { margin-left: 0; }

/* process recording list */
.process_list_view { padding: var(--tb-space-6); }
.process_list_view .top_panel_box .add_process .common-btn { height: var(--tb-control-md); min-height: var(--tb-control-md); width: 100%; }
.process_list_view .top_panel_box { gap: var(--tb-space-3); margin-bottom: var(--tb-space-5); }
.process_list_view .top_panel_box input { background-color: var(--tb-field); color: var(--tb-text); }
.process_list_view .tab_drag { margin-bottom: var(--tb-space-3); }
.process_list_view .tab_drag::after { background: var(--tb-surface-3); color: var(--tb-text-3); border-radius: var(--tb-radius-md) 0 0 var(--tb-radius-md); }
.process_list_view .process_panel { margin-bottom: 0; }
.process_list_view .btn_panel_box { gap: var(--tb-space-3); padding-top: var(--tb-space-6); margin-top: var(--tb-space-6); border-top: 1px solid var(--tb-border-subtle); }
.process_list_view .btn_panel_box .btn_resetAll,
.process_list_view .btn_panel_box .common-btn { font-size: var(--tb-text-md); padding: 0 var(--tb-space-4); gap: var(--tb-space-2); border-radius: var(--tb-radius-md); }
.process_list_view .process_panel .panel_btn .time span { color: var(--tb-text); font-family: var(--tb-font-sans); font-weight: var(--tb-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.process_list_view .process_panel .panel_btn .process_btn ul a.start { background: var(--tb-success); color: var(--tb-text-on-accent); }
.process_list_view .process_panel .panel_btn .process_btn ul a.pause { background: var(--tb-warning); color: var(--tb-text-on-accent); }
.process_list_view .process_panel .panel_btn .process_btn ul a.finish { background: var(--tb-danger); color: var(--tb-text-on-accent); }
.process_list_view .process_panel .panel_btn .process_btn ul a.complete i { color: var(--tb-success); }
.process_list_view .process_panel .panel_btn .reset_btn a { color: var(--tb-text-2); }

/* ECRS yes/no questions */
.process_question .common_questionBox { padding: var(--tb-space-6); }
.process_question .common_questionBox p span,
.process_manual .question_box h5 span { color: var(--tb-primary-text); }
.process_question .common_questionBox .btn_box .btn {
    height: var(--tb-control-md);
    min-width: 96px;
    padding: 0 var(--tb-space-4);
    border-radius: var(--tb-radius-md);
    font-size: var(--tb-text-md);
    font-weight: var(--tb-weight-semibold);
    border: 1px solid var(--tb-border-strong);
}
.process_question .common_questionBox .btn_box .btn.btn_ans_yes { background: var(--tb-primary); border-color: var(--tb-primary); color: var(--tb-text-on-accent); }
.process_question .common_questionBox .btn_box .btn.btn_ans_no { background: var(--tb-surface-2); color: var(--tb-text); }
.process_manual .question_box { padding: var(--tb-space-5); }

.undo_btn { border-radius: var(--tb-radius-md); }

/* DataTables pages with the old datatable.css (#manageUserTable – roles, machines, users) */
#manageUserTable_wrapper { margin-top: 0; color: var(--tb-text-2); }
#manageUserTable_wrapper .dataTables_length,
#manageUserTable_wrapper .dataTables_filter { margin-bottom: 0; }
#manageUserTable_wrapper .dataTables_filter input,
#manageUserTable_wrapper .dataTables_length select { background-color: var(--tb-field); border: 1px solid var(--tb-border-strong); border-radius: var(--tb-radius-md); color: var(--tb-text); }
#manageUserTable_wrapper .dataTables_filter input { padding: 0 var(--tb-space-3) 0 34px; }
#manageUserTable_wrapper .dataTables_length select { min-width: 72px; padding: 0 30px 0 var(--tb-space-3); }
#manageUserTable { background-color: transparent; border: 0; border-radius: 0; }
#manageUserTable thead { background-color: transparent; color: var(--tb-text-3); }
#manageUserTable tbody tr { background-color: transparent; }
#manageUserTable tbody tr:hover { background-color: rgba(255, 255, 255, .025); }
#manageUserTable_wrapper .dataTables_paginate .paginate_button { background: transparent !important; border: 1px solid transparent !important; color: var(--tb-text-2) !important; border-radius: var(--tb-radius-sm) !important; }
#manageUserTable_wrapper .dataTables_paginate .paginate_button:hover { background: var(--tb-surface-2) !important; color: var(--tb-text) !important; }
#manageUserTable_wrapper .dataTables_paginate .paginate_button.current,
#manageUserTable_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--tb-primary-subtle) !important; color: var(--tb-primary-text) !important; border: 1px solid var(--tb-primary-border) !important; }
#manageUserTable_wrapper .dataTables_info { color: var(--tb-text-3); }
.dataTables_wrapper .dataTables_length select { min-width: 72px; }

/* row actions in server-rendered tables (.editBtn / .deleteBtn) */
.btn.editBtn, .btn.deleteBtn, .common_table .btn.btn-sm:not(.common-btn):not(.cancel-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--tb-radius-md);
    background: transparent;
    color: var(--tb-text-2) !important;
}
.btn.editBtn i, .btn.deleteBtn i, .editBtn i, .deleteBtn i { color: inherit; font-size: 15px; }
.btn.editBtn:hover { background: var(--tb-surface-3); border-color: var(--tb-border); color: var(--tb-text) !important; }
.btn.deleteBtn:hover,
.tb-btn-ghost.deleteBtn:hover { background: var(--tb-danger-subtle); border-color: var(--tb-danger-border); color: var(--tb-danger-text) !important; }
/* list tables in cards: long text wraps (dashboard.css forces nowrap), DataTables controls get their padding */
.tb-table-wrap.common_table td { white-space: normal; }
.tb-table-wrap .dataTables_wrapper .dataTables_length,
.tb-table-wrap .dataTables_wrapper .dataTables_filter,
.tb-table-wrap .dataTables_wrapper .dataTables_info,
.tb-table-wrap .dataTables_wrapper .dataTables_paginate { padding: var(--tb-space-3) var(--tb-space-4); }
.editBtn:hover i, .deleteBtn:hover i { color: inherit; }

/* "Back" buttons are secondary everywhere (old views mark them only by the arrow icon) */
.common-btn:has(> .fa-arrow-left),
.common-btn[style*="41444C"],
.common-btn[style*="41444c"] {
    --tb-btn-bg: var(--tb-surface-2);
    --tb-btn-fg: var(--tb-text);
    --tb-btn-border: var(--tb-border-strong);
    --tb-btn-bg-hover: var(--tb-surface-3);
    --tb-btn-fg-hover: var(--tb-text);
    --tb-btn-border-hover: var(--tb-navy-300);
    --tb-btn-shadow: var(--tb-shadow-xs);
    background: var(--tb-btn-bg) !important;
    color: var(--tb-btn-fg) !important;
}
.common-btn:has(> .fa-arrow-left):hover,
.common-btn[style*="41444C"]:hover,
.common-btn[style*="41444c"]:hover { background: var(--tb-btn-bg-hover) !important; }

/* Gantt / resource charts (custom-chart.css, gantt-chart.css) on navy instead of grey */
.demo-main-container { background: var(--tb-bg); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-md); }
.process-row { border-bottom-color: var(--tb-border-subtle); border-right-color: var(--tb-border-subtle); }
.duration-time, .resource-name { background: var(--tb-surface-2); border-right-color: var(--tb-border); color: var(--tb-text-2); }
.process-name { color: var(--tb-text); }
.process-name, .process-row .process-name { background: var(--tb-surface-2); }
.axis-left-header, .axis-left-header .col-name, .axis-left-header .col-duration, .axis-header { background: var(--tb-surface-2); border-color: var(--tb-border); color: var(--tb-text-2); }
.axis-unit { border-color: var(--tb-border); color: var(--tb-text-3); }
.axis-scale .axis-box { background: var(--tb-surface); border-right-color: var(--tb-border); color: var(--tb-text-3); }
#gantt_chart_axis_container { border-bottom-color: var(--tb-border); }
#gantt_chart_before::before, #gantt_chart_after::before, #gantt_chart::before { background: var(--tb-chart-shade); }
#segTooltip { background: var(--tb-surface-2); border: 1px solid var(--tb-border); color: var(--tb-text); box-shadow: var(--tb-shadow-md); border-radius: var(--tb-radius-sm); }

/* KPI tiles inside a card sit one surface step higher */
.tb-card .tb-kpi { background: var(--tb-surface-2); box-shadow: none; }

/* =====================================================================
   15 · FEATURE BLOCKS (kept from Phase 1, now on tokens)
   ===================================================================== */
.tb-muted { color: var(--tb-text-3) !important; }
.tb-small { font-size: var(--tb-text-sm) !important; }
.tb-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-pos { color: var(--tb-success-text) !important; }
.tb-neg { color: var(--tb-danger-text) !important; }

/* process recording (tablet first) */
.tb-note {
    margin: 6px 0 0;
    font-size: var(--tb-text-sm) !important;
    color: var(--tb-text-2) !important;
    font-family: var(--tb-font-sans);
    white-space: pre-line;
}
.tb-note i { color: var(--tb-warning); margin-right: 6px; }
.tb-next-btn { min-height: 40px; padding: 0 14px; font-size: var(--tb-text-sm); }
.process_list_view .process_panel {
    align-items: center;
    gap: var(--tb-space-4);
    padding: var(--tb-space-4) var(--tb-space-5);
    background-color: var(--tb-surface-2);
}
.process_list_view .process_panel[data-status="start"] { border-color: var(--tb-primary); box-shadow: 0 0 0 1px var(--tb-primary) inset, 0 0 0 4px rgba(132, 204, 22, .12); }
.process_list_view .tb-step-info { min-width: 0; flex: 1; }
.process_list_view .tb-step-name { font-family: var(--tb-font-sans); font-weight: var(--tb-weight-semibold); font-size: var(--tb-text-lg) !important; color: var(--tb-text); }
.process_list_view .tb-step-resources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.process_list_view .tb-step-resources .tb-badge i { font-size: 10px; }
.process_list_view .process_panel .panel_btn { gap: 14px; flex-wrap: nowrap; }
.process_list_view .process_panel .panel_btn .process_btn ul { gap: 10px; margin: 0; padding: 0; }
.process_list_view .process_panel .panel_btn .process_btn ul a:not(.tb-next-btn) { width: 44px; height: 44px; }
.process_list_view .process_panel .panel_btn .process_btn ul a i { font-size: 22px; }
.process_list_view .process_panel .panel_btn .process_btn ul a.tb-next-btn { border-radius: var(--tb-radius-md); width: auto; height: auto; color: var(--tb-text-on-accent); }
.process_list_view .process_panel .panel_btn .process_btn ul a.tb-next-btn i { font-size: 15px; }
.process_list_view .process_panel .panel_btn .time span { font-size: 20px; }
.tb-chip-select { height: 28px; border-radius: var(--tb-radius-sm); border: 1px solid var(--tb-border-strong); background-color: var(--tb-field); color: var(--tb-text); font-size: var(--tb-text-xs); padding: 0 6px; }
.tb-confirm-list .tab_drag { padding-left: 0; }
.tb-confirm-list .tab_drag::after { display: none; }

/* cost-benefit page */
.tb-matrix { position: relative; height: 460px; background: var(--tb-bg); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-lg); padding: 8px; }
.tb-cba .checkbox-star-wrapper { position: relative; display: inline-flex; align-items: center; }
.tb-cba .star-overlay { position: absolute; left: 14px; top: -10px; width: 26px; height: 26px; pointer-events: none; }
.tb-cba .star-overlay svg { width: 26px; height: 26px; }
.tb-cba .star-overlay .star-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--tb-weight-semibold); color: var(--tb-text-on-accent); }
.tb-cba .priority-checkbox { width: 20px; height: 20px; accent-color: var(--tb-primary); cursor: pointer; }
.tb-cost-preview .tb-kpi { padding: 10px 14px; }
.tb-cost-preview .tb-kpi-value { font-size: var(--tb-text-xl); line-height: var(--tb-leading-xl); }
.tb-measured .tb-measured-text { margin-left: 6px; }

/* profile language choice */
.tb-lang-option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--tb-border-strong); border-radius: var(--tb-radius-md); cursor: pointer; background: var(--tb-field); color: var(--tb-text); }
.tb-lang-option:has(input:checked) { border-color: var(--tb-primary); background: var(--tb-primary-subtle); }
.tb-lang-option input { accent-color: var(--tb-primary); }

/* wide tables scroll inside their box instead of widening the page */
.optimization_process_auto .btn_container .common-btn,
.optimization_process_manual .btn_container .common-btn,
.optimization_process_manual .btn_container .tb-btn { display: inline-flex; align-items: center; }
.btn_container .btn,
.optimization_process_manual .btn_container .common-btn,
.optimization_process_auto .btn_container .common-btn,
.process_table .btn_container .common-btn { margin-top: 0 !important; }
.to_do_list_table { overflow-x: auto !important; position: relative; }
.to_do_list_table .table-responsive { overflow: visible !important; }
.to_do_list_table th, .to_do_list_table td { white-space: normal; }
.to_do_list_table td.tb-num { white-space: nowrap; }

/* =====================================================================
   16 · UTILITIES
   ===================================================================== */
.tb-stack-y > * + * { margin-top: var(--tb-space-4); }
.tb-row { display: flex; align-items: center; gap: var(--tb-space-3); flex-wrap: wrap; }
.tb-row--between { justify-content: space-between; }
.tb-grid { display: grid; gap: var(--tb-space-4); }
.tb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb-text { color: var(--tb-text) !important; }
.tb-text-2 { color: var(--tb-text-2) !important; }
.tb-text-3 { color: var(--tb-text-3) !important; }
.tb-text-xs { font-size: var(--tb-text-xs) !important; line-height: var(--tb-leading-xs); }
.tb-text-sm { font-size: var(--tb-text-sm) !important; line-height: var(--tb-leading-sm); }
.tb-text-lg { font-size: var(--tb-text-lg) !important; line-height: var(--tb-leading-lg); }
.tb-font-display { font-family: var(--tb-font-display) !important; }
.tb-semibold { font-weight: var(--tb-weight-semibold) !important; }
.tb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tb-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tb-icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em; }
.tb-kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--tb-border-strong); border-bottom-width: 2px; border-radius: var(--tb-radius-xs); font-family: var(--tb-font-mono); font-size: 11px; color: var(--tb-text-2); }
.font-16 { font-size: var(--tb-text-md); }
.font-14 { font-size: var(--tb-text-md); }

/* =====================================================================
   17 · RESPONSIVE & MOTION
   ===================================================================== */
@media (max-width: 1279px) {
    .tb-topbar__tagline { display: none; }
}

@media (max-width: 1199px) {
    .dashboard_main header.tb-topbar .sidebar_icon { display: inline-flex; }
    .sidebar_section.tb-sidebar {
        left: 0;
        top: var(--tb-header-h);
        transform: translateX(-100%);
        padding: var(--tb-space-4) var(--tb-space-3);
        min-height: 0;
    }
    .sidebar_section.tb-sidebar.show { transform: none; box-shadow: var(--tb-shadow-lg); }
    .dashboard_main:has(.sidebar_section.show) .tb-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--tb-header-h) 0 0 0;
        z-index: 997;
        background: var(--tb-overlay);
    }
    .dashboard_main .dashboard_content { width: 100%; padding: calc(var(--tb-header-h) + 24px) var(--tb-space-6) var(--tb-space-10); }
    .project_add_list .project_box { width: 100%; }
}

@media (max-width: 767px) {
    :root { --tb-page-px: 16px; }
    .dashboard_main header.tb-topbar { padding: 0 var(--tb-space-3); }
    .tb-user-trigger .user_name, .tb-user-trigger .tb-chevron { display: none !important; }
    .tb-topbar__report span { display: none; }
    .tb-topbar__divider { display: none; }
    .dashboard_main .dashboard_content { padding: calc(var(--tb-header-h) + 20px) var(--tb-space-4) var(--tb-space-10); }
    .dashboard_content .dash_title h4, .tb-page-title { font-size: 20px; line-height: 28px; }
    .tb-card { padding: var(--tb-space-4); }
    .tb-card.tb-card--flush { padding: 0; }
    .tb-card-footer { margin: var(--tb-space-4) calc(-1 * var(--tb-space-4)) calc(-1 * var(--tb-space-4)); padding: var(--tb-space-3) var(--tb-space-4); }
    .modal-body, .common_modal .modal-body { padding: var(--tb-space-4); }
    .modal-header, .common_modal .modal-header, .modal-footer, .common_modal .modal-footer { padding-left: var(--tb-space-4); padding-right: var(--tb-space-4); }
    .tb-grid--2, .tb-grid--3, .tb-grid--4 { grid-template-columns: 1fr; }
    .tb-locale-switcher select { padding-right: 8px; width: 44px; color: transparent; background-image: none; }
    .tb-locale-switcher select option { color: var(--tb-text); }
    body.tb-guest .common_design .center_form_box { padding: var(--tb-space-8) var(--tb-space-5) var(--tb-space-6); }
    .process_list_view { padding: var(--tb-space-4); }
}

/* touch devices: 16 px text in fields avoids iOS zoom, larger targets */
@media (pointer: coarse) {
    .commonInput, .tb-input, .selectLayout, .form-control, .form-select, .ts-control, .ts-control input,
    .dataTables_wrapper .dataTables_filter input { font-size: 16px !important; }
    .tb-btn, .common-btn, .cancel-btn { min-height: 44px; height: 44px; }
    .tb-btn-sm { min-height: 36px; height: 36px; }
    .tb-segmented__item { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .dashboard_main header.tb-topbar, .sidebar_section.tb-sidebar, #cookie-consent-banner { display: none !important; }
    .dashboard_main .dashboard_content { width: 100%; padding: 0; }
    body { background: #fff; color: #000; }
}

/* Monetary values hidden for users without permission (x-ui.money-hidden): blurred dummy digits */
.tb-money-hidden {
    display: inline-block;
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
    opacity: .75;
}
.tb-money-note { display: flex; align-items: center; gap: var(--tb-space-2); color: var(--tb-text-3); font-size: var(--tb-text-sm); }

/* =====================================================================
   18 · CHOICE CHIPS, LIVE PULSE, CHART DOWNLOAD, PROCESS NAVIGATION
   ===================================================================== */
/* Quick choice that fills a field (e.g. reason for ignoring a pause). aria-pressed marks the chosen one. */
.tb-chip-option {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--tb-space-4);
    border: 1px solid var(--tb-border-strong); border-radius: 999px; background: var(--tb-surface-2);
    color: var(--tb-text-2); font-size: var(--tb-text-sm); font-weight: 500; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tb-chip-option:hover { border-color: var(--tb-primary); color: var(--tb-text); }
.tb-chip-option[aria-pressed="true"] { border-color: var(--tb-primary); background: var(--tb-primary-subtle); color: var(--tb-text); }
.tb-chip-option:focus-visible { outline: 2px solid var(--tb-focus, var(--tb-primary)); outline-offset: 2px; }

/* Page change and reload after a save: short cross-fade instead of a white flash (Chromium, Safari). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* "Learn more" after a one-line hint (x-ui.more) */
.tb-more { margin-top: var(--tb-space-1); }
.tb-more > summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; font-size: var(--tb-text-sm); font-weight: var(--tb-weight-medium); color: var(--tb-primary-text); }
.tb-more > summary::-webkit-details-marker { display: none; }
.tb-more > summary::after { content: "›"; transition: transform var(--tb-duration-fast) var(--tb-ease); }
.tb-more[open] > summary::after { transform: rotate(90deg); }
.tb-more > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.tb-more__body { margin-top: var(--tb-space-1_5); color: inherit; }
/* Hints that only make sense with a mouse (e.g. the Alt key) */
@media (pointer: coarse) { .tb-only-fine { display: none; } }

/* PNG download button that ui.js adds to chart cards */
.tb-png-download svg { width: 16px; height: 16px; }

/* Process navigation: "Back" once, top right in the page header (x-ui.page-header :back); the next step
   bottom right in .tb-actions as primary button with an arrow; tools (downloads, save) bottom left.
   Phone: every button full width, the next step last – at the bottom, where the thumb is. */
@media (max-width: 575px) {
    .tb-actions { flex-direction: column; align-items: stretch; }
    .tb-actions > .tb-btn { width: 100%; min-height: 44px; justify-content: center; margin: 0 !important; }
    .tb-actions > .tb-btn-primary { order: 10; }
    .tb-actions > .tb-btn-primary ~ :not(.tb-btn) { order: 11; }   /* e.g. why the next step is still locked */
}
/* The next step stays in reach on long pages (computer, tablet): the action bar sticks to the bottom
   edge while scrolling and settles in its place at the end. Not on the phone (the buttons stack there)
   and not on the recording pages (their own stopwatch bar sits at the bottom). */
.dashboard_main .dashboard_content { overflow-x: clip; overflow-y: visible; }   /* no scroll container: sticky works */
@media (min-width: 768px) {
    .tb-actions.tb-actions--sticky {
        position: sticky; bottom: 0; z-index: 125;
        margin-inline: calc(-1 * var(--tb-space-4));
        padding: var(--tb-space-3) var(--tb-space-4) max(var(--tb-space-3), env(safe-area-inset-bottom, 0px));
        background: var(--tb-bg); border-top: 1px solid var(--tb-border-subtle);
        box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .55);
    }
    html:has(.tb-actions--sticky) { scroll-padding-bottom: 96px; }   /* focus never hides behind the bar */
}
/* Legacy margin of the old process table pages: the page header sits at the same height everywhere. */
.dashboard_content.process_table { margin-top: 0; }

/* =====================================================================
   19 · TAKTBASE WORKS – one look for everything TaktBase works out by itself
   ("Arrange optimally", "Suggest order", parallelization). Button with sparkles
   and help text, computing phase as an overlay (light sweep, counter, progress
   bar), then the bars / rows glide one after another. Script: taktbase-works.js.
   ===================================================================== */
.tbo-trigger { display: flex; flex-direction: column; align-items: flex-end; gap: var(--tb-space-1_5); max-width: 300px; }
.tbo-trigger-help { margin: 0; font-size: var(--tb-text-xs); line-height: var(--tb-leading-xs); color: var(--tb-text-3); text-align: right; }
.tbo-trigger .tb-btn .tb-icon--sparkles { transition: transform .45s var(--tb-ease); }
/* "AI" button: secondary (one primary per page stays the next step), with a faint lime glow inside;
   hovering or working lets a lime-to-cyan shimmer run through it, a click flashes a soft halo. */
.tb-btn.tb-btn-ai { position: relative; isolation: isolate; overflow: hidden; border-color: var(--tb-primary-border); color: var(--tb-text);
    background: linear-gradient(135deg, color-mix(in srgb, var(--tb-primary) 10%, var(--tb-surface-2)), var(--tb-surface-2) 60%); }
.tb-btn.tb-btn-ai::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 15%, color-mix(in srgb, var(--tb-primary) 28%, transparent) 38%,
        color-mix(in srgb, var(--tb-chart-confirmed) 24%, transparent) 52%, color-mix(in srgb, var(--tb-primary) 20%, transparent) 64%, transparent 85%);
    background-size: 260% 100%; background-position: 110% 0; transition: opacity .35s var(--tb-ease);
}
.tb-btn.tb-btn-ai:hover, .tb-btn.tb-btn-ai:focus-visible { border-color: var(--tb-primary); color: var(--tb-text); }
.tb-btn.tb-btn-ai:hover::before, .tb-btn.tb-btn-ai:focus-visible::before,
.tb-btn.tb-btn-ai[aria-busy="true"]::before { opacity: 1; animation: tb-ai-shimmer 1.8s linear infinite; }
.tb-btn.tb-btn-ai[aria-busy="true"]::before { animation-duration: 1s; }
.tb-btn.tb-btn-ai:active { box-shadow: 0 0 0 4px var(--tb-primary-subtle), 0 0 22px color-mix(in srgb, var(--tb-primary) 35%, transparent); }
.tb-btn.tb-btn-ai .tb-icon--sparkles { color: var(--tb-primary-text); }
@keyframes tb-ai-shimmer { from { background-position: 110% 0; } to { background-position: -160% 0; } }
@media (prefers-reduced-motion: reduce) { .tb-btn.tb-btn-ai::before { animation: none !important; } }
.tbo-trigger .tb-btn:hover .tb-icon--sparkles,
.tbo-trigger .tb-btn:focus-visible .tb-icon--sparkles { transform: rotate(18deg) scale(1.18); }
@media (max-width: 575px) {
    .tbo-trigger { align-items: stretch; max-width: none; }
    .tbo-trigger .tb-btn { width: 100%; min-height: 44px; }
    .tbo-trigger-help { text-align: left; }
}
@media (pointer: coarse) { .tbo-trigger .tb-btn { min-height: 44px; } }

.tbo-host { position: relative; }
.tbo-overlay {
    position: absolute; inset: 0; z-index: 120;   /* above the target label of the charts */
    display: flex; align-items: center; justify-content: center;
    padding: var(--tb-space-4); overflow: hidden; border-radius: inherit;
    background: color-mix(in srgb, var(--tb-bg) 52%, transparent);
    -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
    opacity: 0; transition: opacity .25s var(--tb-ease);
}
.tbo-overlay.is-visible { opacity: 1; }
/* Tall areas (several charts): the panel sits near the top, where the eye is. */
.tbo-overlay--top { align-items: flex-start; padding-top: clamp(var(--tb-space-6), 12vh, 140px); }
/* Light sweeping over the bars */
.tbo-overlay::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%;
    background: linear-gradient(100deg, transparent 0%, var(--tb-primary-subtle) 35%, color-mix(in srgb, var(--tb-primary) 20%, transparent) 50%, var(--tb-primary-subtle) 65%, transparent 100%);
    animation: tbo-sweep 1.15s cubic-bezier(.45, 0, .2, 1) infinite; pointer-events: none;
}
@keyframes tbo-sweep { to { transform: translateX(440%); } }
.tbo-overlay__panel {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: var(--tb-space-1) var(--tb-space-3); width: min(380px, 100%);
    padding: var(--tb-space-4) var(--tb-space-5);
    border: 1px solid var(--tb-border); border-radius: var(--tb-radius-lg);
    background: var(--tb-surface-2); box-shadow: var(--tb-shadow-lg), var(--tb-highlight);
    transform: translateY(6px) scale(.98); transition: transform .35s var(--tb-ease);
}
.tbo-overlay.is-visible .tbo-overlay__panel { transform: none; }
.tbo-overlay__icon {
    grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--tb-radius-md); background: var(--tb-primary-subtle); color: var(--tb-primary-text);
}
.tbo-overlay__icon svg { width: 20px; height: 20px; animation: tbo-twinkle 1.4s ease-in-out infinite; }
@keyframes tbo-twinkle { 50% { transform: rotate(14deg) scale(1.15); opacity: .75; } }
.tbo-overlay__title { margin: 0; text-wrap: balance; font-size: var(--tb-text-md); line-height: var(--tb-leading-md); font-weight: var(--tb-weight-semibold); color: var(--tb-text); }
.tbo-overlay__count { margin: 0; font-size: var(--tb-text-sm); line-height: var(--tb-leading-sm); color: var(--tb-text-3); font-variant-numeric: tabular-nums; }
.tbo-overlay__count strong { color: var(--tb-text); font-weight: var(--tb-weight-semibold); }
.tbo-progress { grid-column: 1 / -1; height: 4px; margin-top: var(--tb-space-2); overflow: hidden; border-radius: var(--tb-radius-full); background: var(--tb-border-subtle); }
.tbo-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--tb-primary); box-shadow: 0 0 8px var(--tb-primary-border); }

/* Gliding: a ring while moving, a short pulse when it lands (bars of the to-be chart, rows of a list). */
#gantt_chart_after .segment.optimized.tbo-gliding,
.tbo-glide-item.tbo-gliding { z-index: 4; box-shadow: 0 0 0 2px var(--tb-text), 0 6px 18px -4px var(--tb-primary-border); }
.tbo-glide-item { position: relative; z-index: 3; }   /* rows waiting for their turn stay above headings */
#gantt_chart_after .segment.optimized.tbo-landed,
.tbo-glide-item.tbo-landed { animation: tbo-land .6s var(--tb-ease); }
@keyframes tbo-land {
    0% { box-shadow: 0 0 0 2px var(--tb-text), 0 0 0 0 var(--tb-primary-border); }
    100% { box-shadow: 0 0 0 1px var(--tb-text-2), 0 0 0 10px transparent; }
}
/* Result figure appears with a small pop */
.tbo-pop { animation: tbo-pop .6s var(--tb-ease) backwards; }
@keyframes tbo-pop { from { transform: scale(.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .tbo-overlay, .tbo-overlay__panel, .tbo-trigger .tb-btn .tb-icon--sparkles { transition: none; }
    .tbo-overlay::before, .tbo-overlay__icon svg, .tbo-pop,
    #gantt_chart_after .segment.optimized.tbo-landed, .tbo-glide-item.tbo-landed { animation: none; }
}

/* =====================================================================
   20 · TUTORIAL (tb-tour.js, App\Support\Onboarding) – spotlight with a blurred,
   dimmed veil, a lime ring around the element, a card with chapter progress,
   small animations; setup banner after skipping.
   ===================================================================== */
html.tb-tour-open { scroll-behavior: auto; }
.tb-tour { position: fixed; inset: 0; z-index: 1990; pointer-events: none; opacity: 0; transition: opacity .25s var(--tb-ease); }
.tb-tour.is-on { opacity: 1; }
.tb-tour.is-leaving { opacity: 0; transition-duration: .18s; }
.tb-tour.is-paused, .tb-tour.is-hidden { opacity: 0; visibility: hidden; }
.tb-tour__veil { position: fixed; inset: 0; background: color-mix(in srgb, var(--tb-bg) 58%, transparent); -webkit-backdrop-filter: blur(3px) saturate(.8); backdrop-filter: blur(3px) saturate(.8); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tb-tour__block { position: fixed; pointer-events: auto; }
.tb-tour__ring { position: fixed; border-radius: 12px; box-shadow: 0 0 0 2px var(--tb-primary), 0 0 0 6px var(--tb-primary-subtle), 0 0 32px var(--tb-primary-border); pointer-events: none; animation: tb-tour-pulse 2.4s ease-in-out infinite; transition: opacity .2s; }
@keyframes tb-tour-pulse { 50% { box-shadow: 0 0 0 2px var(--tb-primary), 0 0 0 10px color-mix(in srgb, var(--tb-primary) 10%, transparent), 0 0 40px var(--tb-primary-border); } }
.tb-tour__ring.is-call { animation: tb-tour-call .5s var(--tb-ease) 2; }
@keyframes tb-tour-call { 50% { box-shadow: 0 0 0 3px var(--tb-primary), 0 0 0 14px var(--tb-primary-subtle), 0 0 48px var(--tb-primary); } }
.tb-tour__ring.is-ok { box-shadow: 0 0 0 2px var(--tb-success), 0 0 0 8px var(--tb-success-subtle), 0 0 36px color-mix(in srgb, var(--tb-success) 45%, transparent); animation: none; }

.tb-tour__card {
    position: fixed; pointer-events: auto; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
    padding: var(--tb-space-5); border: 1px solid var(--tb-border); border-radius: var(--tb-radius-lg);
    background: var(--tb-surface-2); color: var(--tb-text-2); box-shadow: var(--tb-shadow-lg), 0 0 0 1px rgba(255, 255, 255, .03);
    opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .28s var(--tb-ease), transform .28s var(--tb-ease);
}
.tb-tour__card.is-in { opacity: 1; transform: none; }
.tb-tour__card.is-center { left: 50% !important; top: 50% !important; width: min(560px, calc(100vw - 32px)); transform: translate(-50%, calc(-50% + 8px)) scale(.98); padding: var(--tb-space-6); }
.tb-tour__card.is-center.is-in { transform: translate(-50%, -50%); }
.tb-tour__card.is-sheet { left: 12px !important; right: 12px !important; top: auto !important; bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; width: auto; max-height: 62vh; }
.tb-tour__card.is-sheet.is-sheet-top { top: 72px !important; bottom: auto !important; }
.tb-tour__card:focus-within { outline: none; }
.tb-tour__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--tb-radius-sm); background: transparent; color: var(--tb-text-3); font-size: 15px; }
.tb-tour__close:hover { background: var(--tb-surface-3); color: var(--tb-text); }

.tb-tour__progress { margin: 0 36px var(--tb-space-4) 0; }
.tb-tour__meta { display: flex; justify-content: space-between; gap: var(--tb-space-2); margin-bottom: 6px; font-size: var(--tb-text-xs); color: var(--tb-text-3); font-variant-numeric: tabular-nums; }
.tb-tour__chapter { font-weight: var(--tb-weight-semibold); letter-spacing: var(--tb-tracking-caps); text-transform: uppercase; color: var(--tb-primary-text); }
.tb-tour__bar { display: flex; gap: 4px; }
.tb-tour__seg { height: 4px; border-radius: var(--tb-radius-full); background: var(--tb-border-subtle); overflow: hidden; }
.tb-tour__seg i { display: block; height: 100%; border-radius: inherit; background: var(--tb-primary); box-shadow: 0 0 8px var(--tb-primary-border); transition: width .4s var(--tb-ease); }
.tb-tour__title { margin: 0 0 var(--tb-space-2); font-family: var(--tb-font-display); font-size: var(--tb-text-lg); line-height: var(--tb-leading-lg); font-weight: var(--tb-weight-semibold); color: var(--tb-text); text-wrap: balance; }
.tb-tour__card.is-center .tb-tour__title { font-size: var(--tb-text-xl); line-height: var(--tb-leading-xl); }
.tb-tour__title:focus { outline: none; }
.tb-tour__body { margin: 0; line-height: 1.55; }
.tb-tour__example { margin: var(--tb-space-3) 0 0; padding: var(--tb-space-2) var(--tb-space-3); border-left: 3px solid var(--tb-primary); border-radius: 0 var(--tb-radius-sm) var(--tb-radius-sm) 0; background: var(--tb-primary-subtle); color: var(--tb-text); font-size: var(--tb-text-sm); }
.tb-tour__lead { margin: var(--tb-space-3) 0 0; font-size: var(--tb-text-sm); color: var(--tb-text-3); }
.tb-tour__more { margin-top: var(--tb-space-2); font-size: var(--tb-text-sm); }
.tb-tour__req { display: flex; align-items: center; gap: var(--tb-space-2); margin: var(--tb-space-4) 0 0; padding: var(--tb-space-2) var(--tb-space-3); border: 1px solid var(--tb-warning-border); border-radius: var(--tb-radius-md); background: var(--tb-warning-subtle); color: var(--tb-text); font-size: var(--tb-text-sm); font-weight: var(--tb-weight-medium); }
.tb-tour__req-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tb-warning); animation: tb-tour-blink 1.6s ease-in-out infinite; }
@keyframes tb-tour-blink { 50% { opacity: .35; } }
.tb-tour__req.is-soft { border-color: var(--tb-border); background: var(--tb-surface); color: var(--tb-text-2); }
.tb-tour__req.is-soft .tb-tour__req-dot { background: var(--tb-text-3); animation: none; }
.tb-tour__req.is-ok { border-color: var(--tb-success-border, var(--tb-primary-border)); background: var(--tb-success-subtle); }
.tb-tour__req.is-ok .tb-tour__req-dot { background: var(--tb-success); animation: none; }
.tb-tour__req.is-nudge { animation: tb-tour-nudge .45s var(--tb-ease); }
.tb-tour__req > span:not(.tb-tour__req-dot) { flex: 1; min-width: 0; }
.tb-tour__req.is-dirty { border-color: var(--tb-warning-border); }
.tb-tour__req.is-dirty .tb-tour__req-dot { background: var(--tb-warning); }
.tb-tour__save { flex: none; }
@keyframes tb-tour-nudge { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.tb-tour__opt { display: flex; align-items: flex-start; gap: var(--tb-space-2); margin: var(--tb-space-3) 0 0; font-size: var(--tb-text-sm); cursor: pointer; }
.tb-tour__opt .form-check-input { flex: none; margin: 2px 0 0; }
.tb-tour__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tb-space-3); margin-top: var(--tb-space-5); }
.tb-tour__nav { display: flex; gap: var(--tb-space-2); margin-left: auto; }
.tb-tour__nav .tb-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.tb-tour__nav .tb-btn.is-ready { animation: tb-tour-ready 1.2s var(--tb-ease) 2; }
@keyframes tb-tour-ready { 50% { box-shadow: 0 0 0 5px var(--tb-primary-subtle), 0 0 22px var(--tb-primary-border); } }
.tb-tour__skip { padding: 0; border: 0; background: none; color: var(--tb-text-3); font-size: var(--tb-text-xs); text-decoration: underline; text-underline-offset: 2px; }
.tb-tour__skip:hover { color: var(--tb-text-2); }
@media (max-width: 575px) {
    .tb-tour__foot { flex-direction: column-reverse; align-items: stretch; }
    .tb-tour__nav { margin-left: 0; }
    .tb-tour__nav .tb-btn { flex: 1 1 0; min-height: 44px; justify-content: center; }
    .tb-tour__skip { align-self: center; }
}

/* small animations of the cards in the middle */
.tb-art { margin: 0 0 var(--tb-space-4); }
.tb-art--phases, .tb-art--tips, .tb-art--ecrs, .tb-art--news { display: flex; flex-direction: column; gap: var(--tb-space-2); margin-top: var(--tb-space-4); margin-bottom: 0; padding: 0; list-style: none; order: 2; }
.tb-art--phases li, .tb-art--tips li, .tb-art--ecrs li, .tb-art--news li { display: flex; align-items: flex-start; gap: var(--tb-space-3); padding: var(--tb-space-2) var(--tb-space-3); border-radius: var(--tb-radius-md); background: var(--tb-surface); font-size: var(--tb-text-sm); animation: tb-art-in .35s var(--tb-ease) backwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes tb-art-in { from { opacity: 0; transform: translateY(6px); } }
.tb-art--phases li div, .tb-art--tips li div, .tb-art--ecrs li div, .tb-art--news li div { display: flex; flex-direction: column; min-width: 0; }
.tb-art--phases strong, .tb-art--tips strong { color: var(--tb-text); font-weight: var(--tb-weight-semibold); }
.tb-art__num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tb-primary-subtle); color: var(--tb-primary-text); font-size: var(--tb-text-xs); font-weight: var(--tb-weight-semibold); }
.tb-art--news .tb-art__num { width: 22px; height: 22px; background: var(--tb-primary); color: var(--tb-text-on-accent); }
.tb-art--news li { padding-block: var(--tb-space-1_5); }
.tb-art--news li span { color: var(--tb-text); }
.tb-art--ecrs .tb-art__num { border-radius: var(--tb-radius-sm); background: var(--tb-primary); color: var(--tb-text-on-accent); font-size: var(--tb-text-sm); }
.tb-art--check { display: flex; flex-direction: column; gap: var(--tb-space-2); padding: 0; list-style: none; }
.tb-art--check li { display: flex; align-items: center; gap: var(--tb-space-3); padding: var(--tb-space-3); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-md); background: var(--tb-surface); }
.tb-art--check strong { flex: 1 1 auto; color: var(--tb-text); font-weight: var(--tb-weight-medium); }
.tb-art--check em { font-style: normal; font-size: var(--tb-text-xs); color: var(--tb-text-3); }
.tb-art--check em.is-req { color: var(--tb-warning-text); font-weight: var(--tb-weight-semibold); }
.tb-art__tick { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--tb-border-strong); border-radius: 50%; color: var(--tb-text-on-accent); font-size: 12px; font-weight: 700; }
.tb-art--check li.is-done .tb-art__tick { border-color: var(--tb-primary); background: var(--tb-primary); }
.tb-art--done { position: relative; display: grid; place-items: center; height: 96px; }
.tb-art__check { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tb-primary); color: var(--tb-text-on-accent); font-size: 30px; font-weight: 700; animation: tb-art-pop .6s var(--tb-ease) backwards .1s; }
.tb-art__burst { position: absolute; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 0 var(--tb-primary-border); animation: tb-art-burst 1.6s var(--tb-ease) .3s 2; }
@keyframes tb-art-pop { from { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.12); } }
@keyframes tb-art-burst { to { box-shadow: 0 0 0 40px transparent; } }

/* Real screenshots of the demo company (art "shot", scripts/tour-screenshots.cjs): the picture as it is in the app,
   animated only on top – covers fade (tiles one by one), a cover shrinks (timeline fills), rings mark what matters. */
.tb-shot { margin: 0 0 var(--tb-space-4); }
.tb-shot__stage { position: relative; width: min(100%, calc(var(--tb-shot-max-h, 100vh) * var(--ar, 2))); margin-inline: auto; border: 1px solid var(--tb-border); border-radius: var(--tb-radius-md); background: var(--tb-bg); box-shadow: var(--tb-shadow-md); animation: tb-shot-in .5s var(--tb-ease) backwards; }
.tb-shot__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--tb-ease); }
.tb-shot__frame.is-on { opacity: 1; }
.tb-shot__frame img { display: block; width: 100%; height: 100%; border-radius: calc(var(--tb-radius-md) - 1px); }   /* rings may reach over the edge */
.tb-shot__cover, .tb-shot__sweep, .tb-shot__ring, .tb-shot__mark { position: absolute; pointer-events: none; }
.tb-shot__sweep { transform-origin: right center; }
.tb-shot__ring { border: 2px solid var(--tb-primary); border-radius: 12px; box-shadow: 0 0 0 4px var(--tb-primary-subtle), 0 0 22px var(--tb-primary-border); opacity: 0; }
.tb-shot__mark { border: 2px solid var(--tb-danger); border-radius: 7px; box-shadow: 0 0 0 3px var(--tb-danger-subtle), 0 0 16px var(--tb-danger-border); opacity: 0; }
/* low screens: the picture gets smaller so that the buttons stay in view */
@media (max-height: 860px) { .tb-shot { --tb-shot-max-h: 34vh; } }
.tb-shot figcaption { margin-top: var(--tb-space-2); font-size: var(--tb-text-xs); line-height: 1.45; color: var(--tb-text-3); }
/* only once the picture is loaded */
.tb-shot.is-ready .tb-shot__cover { animation: tb-shot-uncover .45s var(--tb-ease) forwards; animation-delay: calc(.35s + var(--j) * .38s); }
.tb-shot.is-ready .tb-shot__sweep { animation: tb-shot-sweep 1.9s cubic-bezier(.45, .05, .25, 1) .4s forwards; }
.tb-shot.is-ready .tb-shot__mark { animation: tb-shot-ring .4s var(--tb-ease) forwards, tb-shot-pulse-danger 1.5s ease-in-out 2; animation-delay: calc(2.4s + var(--j) * .35s), calc(2.8s + var(--j) * .35s); }
.tb-shot.is-ready .tb-shot__frame.is-on .tb-shot__ring { animation: tb-shot-ring .45s var(--tb-ease) forwards, tb-shot-pulse 1.5s ease-in-out 2; animation-delay: var(--ring-delay, .5s), calc(var(--ring-delay, .5s) + .45s); }
.tb-shot--result .tb-shot__frame { --ring-delay: calc(.55s + var(--n) * .38s); }
@keyframes tb-shot-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes tb-shot-uncover { to { opacity: 0; } }
@keyframes tb-shot-sweep { to { transform: scaleX(0); } }
@keyframes tb-shot-ring { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes tb-shot-pulse { 50% { box-shadow: 0 0 0 8px transparent, 0 0 30px var(--tb-primary-border); } }
@keyframes tb-shot-pulse-danger { 50% { box-shadow: 0 0 0 7px transparent, 0 0 26px var(--tb-danger-border); } }
.tb-tour__card.is-center { display: flex; flex-direction: column; }
/* lists and the short check below the text (.tb-art--below), pictures above the title */
.tb-tour__card.is-center > .tb-art--below { order: 5; }
.tb-tour__card.is-center > .tb-tour__progress { order: 0; } .tb-tour__card.is-center > .tb-art:not(.tb-art--below), .tb-tour__card.is-center > .tb-tour__kicker { order: 1; }
.tb-tour__card.is-center > .tb-tour__title { order: 2; } .tb-tour__card.is-center > .tb-tour__body { order: 3; } .tb-tour__card.is-center > .tb-tour__more { order: 4; }
.tb-tour__card.is-center > .tb-tour__example, .tb-tour__card.is-center > .tb-tour__lead { order: 6; } .tb-tour__card.is-center > .tb-tour__req, .tb-tour__card.is-center > .tb-tour__opt { order: 7; }
.tb-tour__card.is-center > .tb-tour__foot { order: 9; } .tb-tour__card.is-center > .tb-tour__close { order: -1; }

/* skipping: the warning */
.tb-tour__skipdlg { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--tb-space-4); pointer-events: auto; background: color-mix(in srgb, var(--tb-bg) 70%, transparent); animation: tb-art-in .2s var(--tb-ease); }
.tb-tour__skipcard { width: min(480px, 100%); padding: var(--tb-space-6); border: 1px solid var(--tb-danger-border); border-radius: var(--tb-radius-lg); background: var(--tb-surface-2); box-shadow: var(--tb-shadow-lg), 0 0 0 4px var(--tb-danger-subtle); color: var(--tb-text-2); }
.tb-tour__skipicon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--tb-space-3); border-radius: 50%; background: var(--tb-danger-subtle); color: var(--tb-danger-text); font-size: 22px; font-weight: 800; }
.tb-tour__skipcard h2 { margin: 0 0 var(--tb-space-2); font-family: var(--tb-font-display); font-size: var(--tb-text-xl); color: var(--tb-text); }
.tb-tour__skipcard p { margin: 0 0 var(--tb-space-2); }
.tb-tour__skipcard ul { margin: 0 0 var(--tb-space-4); padding: 0; list-style: none; color: var(--tb-text); }
.tb-tour__skipcard li { position: relative; padding-left: var(--tb-space-5); }
.tb-tour__skipcard li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--tb-danger); }
.tb-tour__skipcard li + li { margin-top: 6px; }
.tb-tour__skipconfirm { display: flex; align-items: flex-start; gap: var(--tb-space-2); padding: var(--tb-space-3); border: 1px dashed var(--tb-border-strong); border-radius: var(--tb-radius-md); font-size: var(--tb-text-sm); cursor: pointer; }
.tb-tour__skipconfirm .form-check-input { flex: none; margin: 2px 0 0; }
.tb-tour__skipnav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--tb-space-2); margin-top: var(--tb-space-4); }
@media (max-width: 575px) { .tb-tour__skipnav { flex-direction: column; } .tb-tour__skipnav .tb-btn { width: 100%; min-height: 44px; } }

/* paused / on another page: continue */
.tb-tour-resume { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 1980; display: inline-flex; align-items: center; gap: var(--tb-space-2); padding: 10px 16px; border: 1px solid var(--tb-primary-border); border-radius: var(--tb-radius-full); background: var(--tb-surface-2); color: var(--tb-text); font-weight: var(--tb-weight-semibold); box-shadow: var(--tb-shadow-lg), 0 0 0 4px var(--tb-primary-subtle); animation: tb-art-in .3s var(--tb-ease); }
.tb-tour-resume small { color: var(--tb-text-3); font-weight: var(--tb-weight-regular); }
.tb-tour-resume__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tb-primary); box-shadow: 0 0 10px var(--tb-primary); animation: tb-tour-blink 1.6s ease-in-out infinite; }
@media (max-width: 767px) { .tb-tour-resume { bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 72px)); } }

/* after skipping: the setup is still missing */
.tb-setup-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-space-2) var(--tb-space-4); margin: 0 0 var(--tb-space-5); padding: var(--tb-space-3) var(--tb-space-4); border: 1px solid var(--tb-warning-border); border-radius: var(--tb-radius-lg); background: var(--tb-warning-subtle); color: var(--tb-text); }
.tb-setup-banner > svg { flex: none; width: 18px; height: 18px; color: var(--tb-warning-text); }
.tb-setup-banner strong { font-weight: var(--tb-weight-semibold); }
.tb-setup-banner__items { display: flex; flex-wrap: wrap; gap: var(--tb-space-1_5) var(--tb-space-3); flex: 1 1 auto; margin: 0; padding: 0; list-style: none; font-size: var(--tb-text-sm); }
.tb-setup-banner__items li { display: inline-flex; align-items: center; gap: 5px; color: var(--tb-text-2); }
.tb-setup-banner__items li::before { content: "○"; color: var(--tb-warning-text); font-weight: 700; }
.tb-setup-banner__items li.is-done::before { content: "✓"; color: var(--tb-success-text); }
.tb-setup-banner form { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .tb-tour, .tb-tour__card, .tb-tour__seg i { transition: none; }
    .tb-tour__ring, .tb-tour__req-dot, .tb-art--phases li, .tb-art--tips li, .tb-art--ecrs li, .tb-art--news li,
    .tb-art__check, .tb-art__burst, .tb-tour-resume, .tb-tour-resume__dot, .tb-tour__skipdlg, .tb-tour__nav .tb-btn.is-ready { animation: none; }
    /* screenshots: the final picture right away, rings without motion */
    .tb-shot .tb-shot__stage, .tb-shot.is-ready .tb-shot__ring, .tb-shot.is-ready .tb-shot__mark { animation: none; opacity: 1; }
    .tb-shot__cover, .tb-shot__sweep { display: none; }
    .tb-shot__frame { transition: none; }
    .tb-tour__card.is-center, .tb-tour__card { transform: none; }
    .tb-tour__card.is-center { transform: translate(-50%, -50%); }
}

/* ---------------------------------------------------------
   20b · SHORT TIPS on the project pages (tb-tour.js page mode, App\Support\PageTips) – the spotlight of the
   tutorial; a label says what, why or watch out; small drawn animations (not pictures of the app: those are
   real screenshots), the short check and the method passport with eleven stamps.
--------------------------------------------------------- */
.tb-tour__kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--tb-space-1_5); font-size: var(--tb-text-xs); font-weight: var(--tb-weight-semibold); letter-spacing: var(--tb-tracking-caps); text-transform: uppercase; color: var(--tb-primary-text); }
.tb-tour__kicker svg { width: 14px; height: 14px; flex: none; }
.tb-tour__kicker--watch { color: var(--tb-warning-text); }
.tb-tour__kicker--why { color: var(--tb-chart-confirmed); }

/* time recording: rough → in detail */
.tb-detail { display: flex; flex-direction: column; gap: var(--tb-space-2); margin: 0 0 var(--tb-space-4); padding: var(--tb-space-3); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-md); background: var(--tb-surface); }
.tb-detail__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--tb-space-3); }
.tb-detail__label { font-size: var(--tb-text-xs); color: var(--tb-text-3); }
.tb-detail__bar { position: relative; height: 30px; border-radius: var(--tb-radius-sm); }
.tb-detail__bar.is-rough { display: flex; align-items: center; padding: 0 var(--tb-space-3); background: var(--tb-surface-3); color: var(--tb-text-2); font-size: var(--tb-text-xs); font-weight: var(--tb-weight-medium); }
.tb-detail__bar.is-rough span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-detail__seg { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; border-right: 2px solid var(--tb-surface); background: var(--tb-warning); color: var(--tb-text-on-accent); font-size: 11px; transform-origin: left center; }
.tb-detail__seg:first-child { border-radius: var(--tb-radius-sm) 0 0 var(--tb-radius-sm); }
.tb-detail__seg:last-child { border-right: 0; border-radius: 0 var(--tb-radius-sm) var(--tb-radius-sm) 0; }
.tb-detail__seg.is-waste { background: var(--tb-danger); color: #fff; }
.tb-detail__seg.is-value { background: var(--tb-primary); }
.tb-detail__waste { display: flex; flex-wrap: wrap; gap: var(--tb-space-1_5) var(--tb-space-3); margin: var(--tb-space-1) 0 0; padding: 0; list-style: none; font-size: var(--tb-text-xs); color: var(--tb-text-2); }
.tb-detail__waste li { display: inline-flex; align-items: center; gap: 6px; }
.tb-detail__waste i { width: 8px; height: 8px; border-radius: 2px; background: var(--tb-danger); }
.tb-detail__waste b { color: var(--tb-danger-text); font-weight: var(--tb-weight-semibold); font-variant-numeric: tabular-nums; }
.tb-detail figcaption { font-size: var(--tb-text-sm); font-weight: var(--tb-weight-medium); color: var(--tb-text); }
.tb-detail .tb-detail__seg { opacity: 0; transform: scaleX(.2); }
.tb-detail .tb-detail__waste li, .tb-detail figcaption { opacity: 0; }
.tb-detail.is-on .tb-detail__seg { animation: tb-detail-seg .4s var(--tb-ease) forwards; animation-delay: calc(.5s + var(--i) * .22s); }
.tb-detail.is-on .tb-detail__seg.is-waste { animation: tb-detail-seg .4s var(--tb-ease) forwards, tb-detail-alarm 1.2s ease-in-out 2; animation-delay: calc(.5s + var(--i) * .22s), 2.4s; }
.tb-detail.is-on .tb-detail__waste li { animation: tb-tips-in .35s var(--tb-ease) forwards; animation-delay: calc(2.3s + var(--i) * .18s); }
.tb-detail.is-on figcaption { animation: tb-tips-in .4s var(--tb-ease) forwards 3s; }
@keyframes tb-tips-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tb-detail-seg { to { opacity: 1; transform: none; } }
@keyframes tb-detail-alarm { 50% { box-shadow: 0 0 0 3px var(--tb-danger-subtle), 0 0 14px var(--tb-danger-border); } }
@media (max-width: 480px) { .tb-detail__row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* parallelization: the second step moves under the first, the lead time shrinks */
.tb-par { margin: 0 0 var(--tb-space-4); padding: var(--tb-space-3); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-md); background: var(--tb-surface); }
.tb-par__labels, .tb-par__lead { position: relative; height: 18px; font-size: var(--tb-text-xs); color: var(--tb-text-3); }
.tb-par__labels span, .tb-par__lead span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .4s var(--tb-ease); }
.tb-par__state { font-weight: var(--tb-weight-semibold); letter-spacing: var(--tb-tracking-caps); text-transform: uppercase; }
.tb-par__state.is-after, .tb-par__lead .is-after { opacity: 0; }
.tb-par__lead { margin-top: var(--tb-space-1_5); color: var(--tb-text-2); font-variant-numeric: tabular-nums; }
.tb-par__lead b { color: var(--tb-primary-text); }
.tb-par__lanes { position: relative; height: 72px; margin-top: var(--tb-space-1_5); }
.tb-par__bar { position: absolute; top: 4px; left: 0; width: 33.333%; height: 28px; padding: 0 2px; transition: transform .9s cubic-bezier(.45, .05, .25, 1), left .9s cubic-bezier(.45, .05, .25, 1); }
.tb-par__bar span { display: block; height: 100%; line-height: 28px; padding: 0 var(--tb-space-2); overflow: hidden; border-radius: var(--tb-radius-sm); background: var(--tb-warning); color: var(--tb-text-on-accent); font-size: 11px; font-weight: var(--tb-weight-medium); white-space: nowrap; text-overflow: ellipsis; }
.tb-par__bar.is-a span { background: var(--tb-primary); }
.tb-par__bar.is-b { left: 33.333%; }
.tb-par__bar.is-c { left: 66.666%; }
.tb-par__end { position: absolute; top: 0; bottom: 0; left: 100%; width: 2px; margin-left: -1px; background: var(--tb-chart-target); transition: left .9s cubic-bezier(.45, .05, .25, 1) .25s; }
.tb-par.is-on .tb-par__bar.is-b { left: 0; transform: translateY(36px); transition-delay: 1.2s; }
.tb-par.is-on .tb-par__bar.is-c { left: 33.333%; transition-delay: 1.45s; }
.tb-par.is-on .tb-par__end { left: 66.666%; transition-delay: 1.6s; }
.tb-par.is-on .is-before { opacity: 0; transition-delay: 1.2s; }
.tb-par.is-on .is-after { opacity: 1; transition-delay: 1.9s; }

/* ECRS: a workshop around the four questions */
.tb-workshop { --rad: 98px; position: relative; height: 248px; margin: 0 0 var(--tb-space-4); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-md); background: radial-gradient(circle at 50% 50%, var(--tb-primary-subtle), transparent 62%), var(--tb-surface); }
.tb-workshop__table { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--tb-primary); color: var(--tb-text-on-accent); font-family: var(--tb-font-display); font-size: var(--tb-text-lg); font-weight: var(--tb-weight-semibold); letter-spacing: .04em; box-shadow: 0 0 0 8px var(--tb-primary-subtle); }
.tb-workshop__seat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--rad)) rotate(calc(-1 * var(--a))); }
.tb-workshop__seat span { position: absolute; left: 0; top: 0; padding: 5px 10px; border: 1px solid var(--tb-border); border-radius: var(--tb-radius-full); background: var(--tb-surface-2); color: var(--tb-text); font-size: var(--tb-text-xs); font-weight: var(--tb-weight-medium); white-space: nowrap; transform: translate(-50%, -50%); box-shadow: var(--tb-shadow-md); }
.tb-workshop .tb-workshop__seat span, .tb-workshop .tb-workshop__table { opacity: 0; }
.tb-workshop.is-on .tb-workshop__table { animation: tb-workshop-table .6s var(--tb-ease) forwards .15s; }
@keyframes tb-workshop-table { from { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.tb-workshop.is-on .tb-workshop__seat span { animation: tb-workshop-seat .45s var(--tb-ease) forwards; animation-delay: calc(.6s + var(--i) * .16s); }
@keyframes tb-workshop-seat { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (max-width: 480px) { .tb-workshop { --rad: 82px; height: 220px; } .tb-workshop__table { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: var(--tb-text-md); } }

/* cost-benefit: the same idea, too optimistic and realistic */
.tb-est { display: flex; flex-direction: column; gap: var(--tb-space-2); margin: 0 0 var(--tb-space-4); padding: var(--tb-space-3); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-md); background: var(--tb-surface); }
.tb-est figcaption { font-size: var(--tb-text-xs); color: var(--tb-text-3); }
.tb-est__legend { display: flex; gap: var(--tb-space-4); font-size: var(--tb-text-xs); color: var(--tb-text-2); }
.tb-est__legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--tb-primary); }
.tb-est__legend .is-cost::before { background: var(--tb-warning); }
.tb-est__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "name bars" "name pay"; column-gap: var(--tb-space-3); row-gap: 2px; align-items: center; padding: var(--tb-space-2); border-radius: var(--tb-radius-sm); }
.tb-est__name { grid-area: name; font-size: var(--tb-text-sm); font-weight: var(--tb-weight-semibold); color: var(--tb-text); }
.tb-est__bars { grid-area: bars; display: flex; flex-direction: column; gap: 3px; }
.tb-est__bar { position: relative; display: flex; align-items: center; width: 0; max-width: 100%; height: 16px; border-radius: 3px; background: var(--tb-primary); }
.tb-est__bar.is-cost { background: var(--tb-warning); }
.tb-est__bar b { position: absolute; left: calc(100% + 6px); font-size: 11px; font-weight: var(--tb-weight-medium); color: var(--tb-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-est__pay { grid-area: pay; font-size: var(--tb-text-xs); font-weight: var(--tb-weight-semibold); }
.tb-est__row.is-bad { background: var(--tb-danger-subtle); }
.tb-est__row.is-bad .tb-est__name { text-decoration: line-through; text-decoration-color: var(--tb-danger); text-decoration-thickness: 2px; }
.tb-est__row.is-bad .tb-est__pay { color: var(--tb-danger-text); }
.tb-est__row.is-good { background: var(--tb-primary-subtle); }
.tb-est__row.is-good .tb-est__pay { color: var(--tb-primary-text); }
.tb-est__bars { padding-right: 76px; }
.tb-est .tb-est__row, .tb-est .tb-est__pay, .tb-est .tb-est__bar b { opacity: 0; }
.tb-est.is-on .tb-est__row { animation: tb-tips-in .35s var(--tb-ease) forwards; animation-delay: calc(.3s + var(--i) * 1.6s); }
.tb-est.is-on .tb-est__bar { animation: tb-est-grow .8s var(--tb-ease) forwards; animation-delay: calc(.5s + var(--i) * 1.6s); }
.tb-est.is-on .tb-est__bar b, .tb-est.is-on .tb-est__pay { animation: tb-tips-in .3s var(--tb-ease) forwards; animation-delay: calc(1.2s + var(--i) * 1.6s); }
.tb-est.is-on .tb-est__row.is-bad .tb-est__name { text-decoration-color: transparent; animation: tb-est-strike .4s var(--tb-ease) forwards 3.4s; }
@keyframes tb-est-grow { to { width: var(--w); } }
@keyframes tb-est-strike { to { text-decoration-color: var(--tb-danger); } }

/* the short check */
.tb-quiz { display: flex; flex-direction: column; gap: var(--tb-space-2); margin-top: var(--tb-space-4); }
.tb-quiz__answer { position: relative; display: flex; align-items: center; gap: var(--tb-space-3); width: 100%; min-height: 48px; padding: var(--tb-space-2) var(--tb-space-3); border: 1px solid var(--tb-border); border-radius: var(--tb-radius-md); background: var(--tb-surface); color: var(--tb-text); font-size: var(--tb-text-sm); text-align: left; transition: border-color .15s, background .15s, transform .15s, opacity .3s; animation: tb-art-in .35s var(--tb-ease) backwards; }
.tb-quiz__answer:nth-child(2) { animation-delay: .07s; } .tb-quiz__answer:nth-child(3) { animation-delay: .14s; }
.tb-quiz__answer:hover:not(:disabled) { border-color: var(--tb-primary-border); background: var(--tb-surface-3); transform: translateX(2px); }
.tb-quiz__answer:focus-visible { outline: 2px solid var(--tb-primary); outline-offset: 2px; }
.tb-quiz__answer:disabled { cursor: default; }
.tb-quiz__letter { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tb-surface-3); color: var(--tb-text-2); font-size: var(--tb-text-xs); font-weight: var(--tb-weight-semibold); }
.tb-quiz__answer.is-right { border-color: var(--tb-primary); background: var(--tb-primary-subtle); }
.tb-quiz__answer.is-right .tb-quiz__letter { background: var(--tb-primary); color: var(--tb-text-on-accent); }
.tb-quiz__answer.is-wrong { border-color: var(--tb-danger-border); background: var(--tb-danger-subtle); }
.tb-quiz__answer.is-wrong .tb-quiz__letter { background: var(--tb-danger); color: #fff; }
.tb-quiz__answer.is-dim { opacity: .5; }
.tb-quiz__answer.is-picked.is-right::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; animation: tb-quiz-burst .9s var(--tb-ease) forwards; pointer-events: none; }
.tb-quiz__answer.is-picked.is-wrong { animation: tb-tour-nudge .45s var(--tb-ease); }
@keyframes tb-quiz-burst { from { box-shadow: 0 0 0 0 var(--tb-primary-border); } to { box-shadow: 0 0 0 14px transparent; } }
.tb-quiz__feedback { margin: var(--tb-space-1) 0 0; font-size: var(--tb-text-sm); line-height: 1.5; color: var(--tb-text-2); }
.tb-quiz__feedback:empty { display: none; }
.tb-quiz__feedback.is-right strong { color: var(--tb-primary-text); }
.tb-quiz__feedback.is-wrong strong { color: var(--tb-danger-text); }
.tb-quiz__feedback:not(:empty) { animation: tb-art-in .3s var(--tb-ease); }
.tb-quiz.is-nudge { animation: tb-tour-nudge .45s var(--tb-ease); }

/* the method passport: eleven stamps */
.tb-pass { margin: 0 0 var(--tb-space-4); padding: var(--tb-space-3) var(--tb-space-3) var(--tb-space-4); border: 1px dashed var(--tb-border-strong); border-radius: var(--tb-radius-md); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255, 255, 255, .012) 10px 20px), var(--tb-surface); }
.tb-pass__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tb-space-2); margin-bottom: var(--tb-space-3); font-size: var(--tb-text-xs); letter-spacing: var(--tb-tracking-caps); text-transform: uppercase; color: var(--tb-text-3); }
.tb-pass__head strong { color: var(--tb-text); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-size: var(--tb-text-sm); }
.tb-pass__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--tb-space-3) var(--tb-space-2); margin: 0; padding: 0; list-style: none; }
.tb-pass__stamp { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.tb-pass__ink { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 2px dashed var(--tb-border-strong); border-radius: 50%; color: var(--tb-text-disabled); }
.tb-pass__ink svg { width: 22px; height: 22px; opacity: .45; }
.tb-pass__name { max-width: 100%; font-size: 11px; line-height: 1.25; color: var(--tb-text-3); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.tb-pass__stamp.is-stamped .tb-pass__ink { border: 3px double var(--tb-primary); background: var(--tb-primary-subtle); color: var(--tb-primary-text); transform: rotate(var(--r)); box-shadow: inset 0 0 0 3px var(--tb-surface), inset 0 0 0 5px var(--tb-primary-border); }
.tb-pass__stamp.is-stamped .tb-pass__ink svg { opacity: 1; }
.tb-pass__stamp.is-stamped .tb-pass__name { color: var(--tb-text-2); }
.tb-pass__stamp.is-here .tb-pass__name { color: var(--tb-text); font-weight: var(--tb-weight-semibold); }
.tb-pass__star { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tb-warning); color: var(--tb-text-on-accent); font-size: 12px; line-height: 1; box-shadow: 0 0 0 2px var(--tb-surface); transform: rotate(calc(-1 * var(--r))); }
.tb-art.tb-pass .tb-pass__stamp.is-here .tb-pass__ink { animation: tb-pass-here 1.6s ease-in-out 2 .3s; }
.tb-art.tb-pass .tb-pass__stamp.is-new .tb-pass__ink { animation: tb-pass-stamp .55s cubic-bezier(.2, .9, .3, 1.3) backwards .45s; }
.tb-art.tb-pass .tb-pass__stamp.is-new .tb-pass__star { animation: tb-art-pop .5s var(--tb-ease) backwards 1.15s; }
.tb-art.tb-pass:has(.is-new) .tb-pass__grid { animation: tb-pass-thump .3s ease-out .9s; }
@keyframes tb-pass-stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-28deg); } 70% { opacity: 1; transform: scale(.9) rotate(var(--r)); } 100% { transform: rotate(var(--r)); } }
@keyframes tb-pass-thump { 40% { transform: translateY(2px) scale(.995); } }
@keyframes tb-pass-here { 50% { box-shadow: inset 0 0 0 3px var(--tb-surface), inset 0 0 0 5px var(--tb-primary-border), 0 0 0 7px var(--tb-primary-subtle), 0 0 22px var(--tb-primary-border); } }
@media (max-width: 520px) { .tb-pass__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tb-pass__ink { width: 46px; height: 46px; } }
/* in a card of the page (My account): the passport without the frame */
.tb-pass--page { margin: 0; }

/* lightbulb button in the process bar: a dot while the stamp of this page is missing */
.tb-pbar__side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-space-2) var(--tb-space-3); }
.tb-tips-btn { position: relative; }
.tb-tips-btn.has-new::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--tb-primary); box-shadow: 0 0 8px var(--tb-primary); animation: tb-tour-blink 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .tb-detail .tb-detail__seg, .tb-detail .tb-detail__waste li, .tb-detail figcaption,
    .tb-workshop .tb-workshop__seat span, .tb-workshop .tb-workshop__table,
    .tb-est .tb-est__row, .tb-est .tb-est__pay, .tb-est .tb-est__bar b { opacity: 1; transform: none; animation: none !important; }
    .tb-workshop .tb-workshop__seat span { transform: translate(-50%, -50%); }
    .tb-est .tb-est__bar { width: var(--w); animation: none !important; }
    .tb-par__bar, .tb-par__end, .tb-par__labels span, .tb-par__lead span { transition: none !important; }
    .tb-quiz__answer, .tb-quiz.is-nudge, .tb-quiz__feedback:not(:empty), .tb-tips-btn.has-new::after,
    .tb-art.tb-pass .tb-pass__ink, .tb-art.tb-pass .tb-pass__star, .tb-art.tb-pass .tb-pass__grid { animation: none !important; }
}