/* ============================================================
   user.css — ITCSS architecture
   01 Settings  → :root tokens
   02 Generic   → resets & normalizations
   03 Elements  → HTML element defaults
   04 Objects   → layout patterns
   05 Components → Bootstrap 3/Lumen overrides
   06 Custom UI  → project-specific UI components
   07 App Layout → page & section layouts
   08 Utilities  → helpers, animations, dark mode
   ============================================================ */

/* ============================================================
   01 – SETTINGS  — design tokens (:root)
   ============================================================ */
:root {
    --bookkeeping-color: 250, 192, 190;
    --payroll-color: 191, 247, 247;
    --annualaccount-color: 198, 223, 178;
    --auditing-color: 255, 232, 140;
    --consultation-color: 188, 204, 235;
    --app-navbar-height: 70px;

    /* Shared progress palette (used by receipts + plan/detail hover accents) */
	--progress-planned-base: #F4B942;  /* was #ffca28 — bright amber → warm ochre  */
	--progress-actual-base:  #52B2CF;  /* was #0EB1D2 — bright cyan  → muted teal  */
	--progress-done-base:    #44AF69;  /* was #4caf50 — material green → sage      */
	--progress-total-base: #ffe08d;  /* was #ffe69c — lemon cream → warm sand    */
	--progress-target-base:  #6B7F94;  /* unchanged — already the mature reference */
	--progress-track-base:   #ECEBE7;  /* was #f0f0f0 — a hair warmer, sits with the ochre */


    --progress-planned-light: color-mix(in srgb, var(--progress-planned-base) 68%, white);
    --progress-actual-light: color-mix(in srgb, var(--progress-actual-base) 68%, white);
    --progress-done-light: color-mix(in srgb, var(--progress-done-base) 68%, white);
    --progress-total-light: color-mix(in srgb, var(--progress-total-base) 68%, white);

    --progress-planned-lighter: color-mix(in srgb, var(--progress-planned-base) 48%, white);
    --progress-actual-lighter: color-mix(in srgb, var(--progress-actual-base) 48%, white);
    --progress-done-lighter: color-mix(in srgb, var(--progress-done-base) 48%, white);
    --progress-total-lighter: color-mix(in srgb, var(--progress-total-base) 48%, white);

    --progress-planned-gradient: linear-gradient(135deg, var(--progress-planned-light) 0%, var(--progress-planned-base) 100%);
    --progress-actual-gradient: linear-gradient(135deg, var(--progress-actual-light) 0%, var(--progress-actual-base) 100%);
    --progress-done-gradient: linear-gradient(135deg, var(--progress-done-light) 0%, var(--progress-done-base) 100%);
    --progress-total-gradient: linear-gradient(135deg, var(--progress-total-light) 0%, var(--progress-total-base) 100%);

    --progress-planned-hover-gradient: linear-gradient(135deg, var(--progress-planned-lighter) 0%, var(--progress-planned-light) 100%);
    --progress-actual-hover-gradient: linear-gradient(135deg, var(--progress-actual-lighter) 0%, var(--progress-actual-light) 100%);
    --progress-done-hover-gradient: linear-gradient(135deg, var(--progress-done-lighter) 0%, var(--progress-done-light) 100%);
    --progress-total-hover-gradient: linear-gradient(135deg, var(--progress-total-lighter) 0%, var(--progress-total-light) 100%);

    --progress-target-hover-base: color-mix(in srgb, var(--progress-target-base) 70%, white);
    --progress-target-dash: repeating-linear-gradient(
        to bottom,
        var(--progress-target-base) 0px,
        var(--progress-target-base) 4px,
        transparent 4px,
        transparent 8px
    );
    --progress-target-dash-hover: repeating-linear-gradient(
        to bottom,
        var(--progress-target-hover-base) 0px,
        var(--progress-target-hover-base) 4px,
        transparent 4px,
        transparent 8px
    );
    --progress-target-label-bg: color-mix(in srgb, var(--progress-target-base) 95%, transparent);
    --progress-target-label-text: #ffffff;

    --progress-planned-glow: color-mix(in srgb, var(--progress-planned-base) 55%, transparent);
    --progress-actual-glow: color-mix(in srgb, var(--progress-actual-base) 55%, transparent);
    --progress-done-glow: color-mix(in srgb, var(--progress-done-base) 55%, transparent);
    --progress-total-glow: color-mix(in srgb, var(--progress-total-base) 65%, transparent);
    --progress-target-glow: color-mix(in srgb, var(--progress-target-base) 60%, transparent);

    --progress-planned-indicator-border: color-mix(in srgb, var(--progress-planned-base) 90%, black);
    --progress-actual-indicator-border: var(--progress-actual-base);
    --progress-done-indicator-border: color-mix(in srgb, var(--progress-done-base) 88%, black);
    --progress-total-indicator-border: color-mix(in srgb, var(--progress-total-base) 80%, black);

    --progress-planned-label-text: color-mix(in srgb, var(--progress-planned-base) 55%, black);
    --progress-total-text: color-mix(in srgb, var(--progress-total-base) 35%, black);
    --progress-total-text-hover: color-mix(in srgb, var(--progress-total-base) 50%, black);

    /* Semantic state palette (aligned to receipts table language) */
    --state-done-top: #d8efde;
    --state-done-base: #a8d4b2;
    --state-done-border: #5e9a6a;
    --state-done-text: #245533;

    --state-active-top: #d7e8f9;
    --state-active-base: #9ec3e9;
    --state-active-border: #4a80b3;
    --state-active-text: #21496f;

    --state-outstanding-top: #ffe4c5;
    --state-outstanding-base: #f8c286;
    --state-outstanding-border: #d79a5a;
    --state-outstanding-text: #6b4115;

    --state-overdue-top: #f8cec8;
    --state-overdue-base: #e98f82;
    --state-overdue-border: #c8675b;
    --state-overdue-text: #65231f;

    --state-missing-top: #f9dad6;
    --state-missing-base: #efb6af;
    --state-missing-border: #d99289;
    --state-missing-text: #7f3a34;

    --state-upcoming-top: #f6f4f1;
    --state-upcoming-base: #e5e1dc;
    --state-upcoming-border: #bdb7af;
    --state-upcoming-text: #5e5953;

    --state-waiting-top: #fff3cf;
    --state-waiting-base: #f4dd9a;
    --state-waiting-border: #c8a95b;
    --state-waiting-text: #6a5322;

    --state-skipped-top: #eef2f5;
    --state-skipped-base: #d8e0e6;
    --state-skipped-border: #9caeb8;
    --state-skipped-text: #4a5b66;

    /* Shared shape + interaction tokens for reusable UI controls */
    --ui-radius-pill: 999px;
    --ui-radius-label: 7px;
    --ui-radius-chip: 8px;
    --ui-badge-shadow: 0 1px 3px rgba(0,0,0,0.2);

    --ui-press-border: #6f879f;
    --ui-press-bg: linear-gradient(180deg, #ffffff 0%, #dce8f4 100%);
    --ui-press-text: #2f4c65;
    /* Neutral/gray-white raised button shadows used by default controls. */
    --ui-press-neutral-shadow:
        0 2px 0 rgba(96, 128, 149, 0.5),
        0 4px 7px rgba(34, 62, 82, 0.15);
    --ui-press-neutral-hover-shadow:
        0 3px 0 rgba(94, 126, 148, 0.52),
        0 6px 10px rgba(34, 62, 82, 0.17);
    --ui-press-neutral-active-shadow:
        0 1px 0 rgba(94, 126, 148, 0.5),
        0 2px 4px rgba(34, 62, 82, 0.18);
    --ui-press-shadow: var(--ui-press-neutral-shadow);
    --ui-press-hover-border: #4e6a87;
    --ui-press-hover-shadow: var(--ui-press-neutral-hover-shadow);
    --ui-press-active-shadow: var(--ui-press-neutral-active-shadow);
    --ui-press-focus-ring: 0 0 0 2px rgba(61, 122, 169, 0.22), 0 0 0 5px rgba(61, 122, 169, 0.42);

    /* Bootstrap 3 theme bridge tokens (receipts design language) */
    --bs3-font-family-base: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs3-font-size-base: 14px;
    --bs3-line-height-base: 1.42857143;
    --bs3-font-weight-normal: 400;
    --bs3-font-weight-strong: 700;

    --bs3-text-color: #2f3f4d;
    --bs3-text-muted: #6d8191;
    --bs3-heading-color: #1f3e56;
    --bs3-body-bg: rgb(255, 255, 255);
    --bs3-surface-bg: #ffffff;
    --bs3-surface-bg-soft: #f7fbff;
    --bs3-border-color: #c8d7e3;
    --bs3-border-strong: #90a9bd;
    --bs3-divider-color: #dde8f1;

    --bs3-radius-xs: 4px;
    --bs3-radius-sm: 6px;
    --bs3-radius-md: 8px;
    --bs3-radius-lg: 12px;
    --bs3-radius-pill: var(--ui-radius-pill);

    --bs3-shadow-soft: 0 2px 6px rgba(31, 62, 86, 0.08);
    --bs3-shadow-raised: 0 8px 18px rgba(21, 70, 108, 0.14);
    --bs3-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.74);

    --bs3-focus-outline: none;
    --bs3-focus-border: #4e7fa5;
    --bs3-focus-ring: 0 0 0 2px rgba(61, 122, 169, 0.22), 0 0 0 4px rgba(61, 122, 169, 0.2);

    --bs3-link-color: #2f6fa0;
    --bs3-link-hover-color: #1f547c;
    --bs3-link-decoration: none;
    --bs3-link-hover-decoration: none;

    --bs3-btn-padding-y: 6px;
    --bs3-btn-padding-x: 12px;
    --bs3-btn-line-height: 1.35;
    --bs3-btn-font-size: 14px;
    --bs3-btn-font-weight: 700;
    --bs3-btn-border-width: 1px;
    --bs3-btn-border-radius: var(--bs3-radius-pill);
    --bs3-btn-icon-gap: 4px;
    --bs3-btn-transition: 0.16s ease;
    --bs3-btn-shadow: var(--ui-press-shadow);
    --bs3-btn-hover-shadow: var(--ui-press-hover-shadow);
    --bs3-btn-active-shadow: var(--ui-press-active-shadow);
    --bs3-btn-transform-hover: translateY(-1px);
    --bs3-btn-transform-active: translateY(1px);
    --bs3-btn-disabled-opacity: 0.55;
    --bs3-btn-fused-overlap: 1px;
    --bs3-btn-fused-z-hover: 5;

    --bs3-btn-default-top: #ffffff;
    --bs3-btn-default-base: #dce8f4;
    --bs3-btn-default-border: #6f879f;
    --bs3-btn-default-text: #2f4c65;

    --bs3-btn-primary-top: #5db0df;
    --bs3-btn-primary-base: #2f86b8;
    --bs3-btn-primary-border: #2d6f95;
    --bs3-btn-primary-text: #ffffff;

    --bs3-btn-success-top: var(--state-done-top, #d8efde);
    --bs3-btn-success-base: var(--state-done-base, #a8d4b2);
    --bs3-btn-success-border: var(--state-done-border, #5e9a6a);
    --bs3-btn-success-text: var(--state-done-text, #245533);

    --bs3-btn-info-top: #d9edf8;
    --bs3-btn-info-base: #9dcbe3;
    --bs3-btn-info-border: #5e96b3;
    --bs3-btn-info-text: #23475d;

    --bs3-btn-warning-top: var(--state-outstanding-top, #ffe9ba);
    --bs3-btn-warning-base: var(--state-outstanding-base, #f6c96b);
    --bs3-btn-warning-border: var(--state-outstanding-border, #c99533);
    --bs3-btn-warning-text: var(--state-outstanding-text, #6c4a11);

    --bs3-btn-danger-top: var(--state-overdue-top, #f8cec8);
    --bs3-btn-danger-base: var(--state-overdue-base, #e98f82);
    --bs3-btn-danger-border: var(--state-overdue-border, #c8675b);
    --bs3-btn-danger-text: var(--state-overdue-text, #65231f);

    --bs3-btn-link-text: var(--bs3-link-color);
    --bs3-btn-link-hover-text: var(--bs3-link-hover-color);

    --bs3-btn-sm-padding-y: 4px;
    --bs3-btn-sm-padding-x: 10px;
    --bs3-btn-sm-font-size: 12px;
    --bs3-btn-lg-padding-y: 10px;
    --bs3-btn-lg-padding-x: 16px;
    --bs3-btn-lg-font-size: 16px;
    --bs3-btn-xs-padding-y: 2px;
    --bs3-btn-xs-padding-x: 8px;
    --bs3-btn-xs-font-size: 11px;

    --bs3-field-height: 34px;
    --bs3-field-padding-y: 6px;
    --bs3-field-padding-x: 10px;
    --bs3-field-font-size: 14px;
    --bs3-field-line-height: 1.35;
    --bs3-field-bg: #ffffff;
    --bs3-field-text: #2d4355;
    --bs3-field-border: #b8cad8;
    --bs3-field-border-hover: #95aec2;
    --bs3-field-radius: var(--bs3-radius-sm);
    --bs3-field-shadow: inset 0 1px 2px rgba(20, 53, 79, 0.06);
    --bs3-field-focus-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(61, 122, 169, 0.18);
    --bs3-field-placeholder: #8ca0af;
    --bs3-field-disabled-bg: #edf3f8;
    --bs3-field-disabled-text: #7f92a1;
    --bs3-input-combo-shadow: 0 2px 0 rgba(96, 128, 149, 0.35), 0 5px 10px rgba(34, 62, 82, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --bs3-input-combo-hover-shadow: 0 2px 0 rgba(96, 128, 149, 0.42), 0 5px 12px rgba(34, 62, 82, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --bs3-input-combo-focus-shadow: 0 0 0 2px rgba(61, 122, 169, 0.2), 0 2px 0 rgba(96, 128, 149, 0.38), 0 5px 12px rgba(34, 62, 82, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);

    --bs3-addon-bg: #e8f0f7;
    --bs3-addon-text: #496275;
    --bs3-addon-border: #b8cad8;

    --bs3-dropdown-bg: #ffffff;
    --bs3-dropdown-border: #b5c8d8;
    --bs3-dropdown-radius: var(--bs3-radius-sm);
    --bs3-dropdown-text: #2f4658;
    --bs3-dropdown-header-text: #6e8495;
    --bs3-dropdown-divider: #dbe6ef;
    --bs3-dropdown-shadow: 0 10px 20px rgba(24, 55, 80, 0.16);
    --bs3-dropdown-item-padding-y: 7px;
    --bs3-dropdown-item-padding-x: 16px;
    --bs3-dropdown-item-hover-bg: #edf5fb;
    --bs3-dropdown-item-hover-text: #214b67;
    --bs3-dropdown-item-active-bg: linear-gradient(180deg, #6cb4dd 0%, #4a98c5 100%);
    --bs3-dropdown-item-active-text: #ffffff;

    --bs3-navbar-bg-top: #ffffff;
    --bs3-navbar-bg-base: #e9f2f9;
    --bs3-navbar-border: #c3d4e3;
    --bs3-navbar-text: #325269;
    --bs3-navbar-brand: #214a80;
    --bs3-navbar-link-hover-bg: #dceaf5;
    --bs3-navbar-link-hover-text: #1f4660;
    --bs3-navbar-link-active-bg: #cfe2f1;
    --bs3-navbar-link-active-text: #173a52;

    --bs3-nav-link-color: #39566d;
    --bs3-nav-link-hover-color: #244961;
    --bs3-nav-link-hover-bg: #edf4fa;
    --bs3-nav-tab-border: #c3d4e2;
    --bs3-nav-tab-bg-top: #fdfefe;
    --bs3-nav-tab-bg-base: #e9f2f8;
    --bs3-nav-tab-active-top: #ffffff;
    --bs3-nav-tab-active-base: #ffffff;
    --bs3-nav-tab-active-border: #9fb8cc;
    --bs3-nav-pill-top: #fefefe;
    --bs3-nav-pill-base: #e3edf7;
    --bs3-nav-pill-border: #b5c9da;
    --bs3-nav-pill-text: #2f4d64;
    --bs3-nav-pill-active-top: #69afd9;
    --bs3-nav-pill-active-base: #3f90bf;
    --bs3-nav-pill-active-border: #33749b;
    --bs3-nav-pill-active-text: #ffffff;

    --bs3-panel-radius: var(--bs3-radius-md);
    --bs3-panel-border: #b8cbda;
    --bs3-panel-bg: #ffffff;
    --bs3-panel-shadow: var(--bs3-shadow-soft);
    --bs3-panel-heading-padding-y: 9px;
    --bs3-panel-heading-padding-x: 14px;
    --bs3-panel-body-padding: 15px;

    --bs3-panel-default-top: #fbfdff;
    --bs3-panel-default-base: #e8f1f8;
    --bs3-panel-default-border: #b8cbda;
    --bs3-panel-default-text: #2c4b62;

    --bs3-panel-primary-top: #69afd9;
    --bs3-panel-primary-base: #3f90bf;
    --bs3-panel-primary-border: #33749b;
    --bs3-panel-primary-text: #ffffff;

    --bs3-panel-success-top: var(--state-done-top, #d8efde);
    --bs3-panel-success-base: var(--state-done-base, #a8d4b2);
    --bs3-panel-success-border: var(--state-done-border, #5e9a6a);
    --bs3-panel-success-text: var(--state-done-text, #245533);

    --bs3-panel-info-top: #d9edf8;
    --bs3-panel-info-base: #9dcbe3;
    --bs3-panel-info-border: #5e96b3;
    --bs3-panel-info-text: #23475d;

    --bs3-panel-warning-top: var(--state-outstanding-top, #ffe9ba);
    --bs3-panel-warning-base: var(--state-outstanding-base, #f6c96b);
    --bs3-panel-warning-border: var(--state-outstanding-border, #c99533);
    --bs3-panel-warning-text: var(--state-outstanding-text, #6c4a11);

    --bs3-panel-danger-top: var(--state-overdue-top, #f8cec8);
    --bs3-panel-danger-base: var(--state-overdue-base, #e98f82);
    --bs3-panel-danger-border: var(--state-overdue-border, #c8675b);
    --bs3-panel-danger-text: var(--state-overdue-text, #65231f);

    --bs3-table-head-top: #fefefe;
    --bs3-table-head-base: #e8f1f8;
    --bs3-table-head-text: #2f5168;
    --bs3-table-head-border: #b8cbda;
    --bs3-table-cell-border: #d8e4ee;
    --bs3-table-row-bg: #ffffff;
    --bs3-table-row-alt-bg: #f7fbff;
    --bs3-table-row-hover-bg: #eaf3fb;
    --bs3-table-row-active-bg: #dbe9f5;

    --bs3-alert-radius: var(--bs3-radius-sm);
    --bs3-alert-padding-y: 10px;
    --bs3-alert-padding-x: 14px;
    --bs3-alert-default-top: #fbfdff;
    --bs3-alert-default-base: #edf4fa;
    --bs3-alert-default-border: #b9ccdb;
    --bs3-alert-default-text: #37576e;

    --bs3-alert-success-top: var(--state-done-top, #d8efde);
    --bs3-alert-success-base: var(--state-done-base, #a8d4b2);
    --bs3-alert-success-border: var(--state-done-border, #5e9a6a);
    --bs3-alert-success-text: var(--state-done-text, #245533);

    --bs3-alert-info-top: #d9edf8;
    --bs3-alert-info-base: #9dcbe3;
    --bs3-alert-info-border: #5e96b3;
    --bs3-alert-info-text: #23475d;

    --bs3-alert-warning-top: var(--state-outstanding-top, #ffe9ba);
    --bs3-alert-warning-base: var(--state-outstanding-base, #f6c96b);
    --bs3-alert-warning-border: var(--state-outstanding-border, #c99533);
    --bs3-alert-warning-text: var(--state-outstanding-text, #6c4a11);

    --bs3-alert-danger-top: var(--state-overdue-top, #f8cec8);
    --bs3-alert-danger-base: var(--state-overdue-base, #e98f82);
    --bs3-alert-danger-border: var(--state-overdue-border, #c8675b);
    --bs3-alert-danger-text: var(--state-overdue-text, #65231f);

    --bs3-label-radius: var(--bs3-radius-xs);
    --bs3-label-padding-y: 0.2em;
    --bs3-label-padding-x: 0.6em;
    --bs3-label-default-bg: #8ca0af;
    --bs3-label-primary-bg: #4b93c0;
    --bs3-label-success-bg: #6dae7c;
    --bs3-label-info-bg: #5d9dbf;
    --bs3-label-warning-bg: #c99533;
    --bs3-label-danger-bg: #c8675b;
    --bs3-label-text: #ffffff;

    --bs3-progress-height: 20px;
    --bs3-progress-bg: #e4edf5;
    --bs3-progress-border: #c7d7e4;
    --bs3-progress-radius: var(--bs3-radius-pill);
    --bs3-progress-bar-top: #69afd9;
    --bs3-progress-bar-base: #3f90bf;
    --bs3-progress-bar-border: #33749b;
    --bs3-progress-bar-text: #ffffff;

    --bs3-pagination-bg: #ffffff;
    --bs3-pagination-border: #bdd0df;
    --bs3-pagination-text: #2f5470;
    --bs3-pagination-hover-bg: #eaf3fb;
    --bs3-pagination-hover-text: #214965;
    --bs3-pagination-active-top: #69afd9;
    --bs3-pagination-active-base: #3f90bf;
    --bs3-pagination-active-border: #33749b;
    --bs3-pagination-active-text: #ffffff;

    --bs3-list-group-bg: #ffffff;
    --bs3-list-group-border: #c7d7e4;
    --bs3-list-group-text: #314b61;
    --bs3-list-group-hover-bg: #eef5fb;
    --bs3-list-group-active-top: #69afd9;
    --bs3-list-group-active-base: #3f90bf;
    --bs3-list-group-active-border: #33749b;
    --bs3-list-group-active-text: #ffffff;

    --bs3-modal-bg: #ffffff;
    --bs3-modal-border: #aac0d2;
    --bs3-modal-radius: var(--bs3-radius-lg);
    --bs3-modal-shadow: 0 18px 40px rgba(18, 48, 71, 0.28);
    --bs3-modal-head-top: #fefefe;
    --bs3-modal-head-base: #e8f1f8;
    --bs3-modal-head-text: #2f5168;
    --bs3-modal-backdrop: rgba(18, 40, 58, 0.48);
    --bs3-modal-divider: #d6e3ee;

    --bs3-tooltip-bg: #244861;
    --bs3-tooltip-text: #ffffff;
    --bs3-popover-bg: #ffffff;
    --bs3-popover-border: #b7cadd;
    --bs3-popover-title-bg: #e9f2f8;
    --bs3-popover-title-text: #2b4f68;
    --bs3-popover-shadow: 0 8px 20px rgba(24, 54, 80, 0.18);

    --bs3-well-bg: #edf4fa;
    --bs3-well-border: #c7d8e6;
    --bs3-thumbnail-bg: #ffffff;
    --bs3-thumbnail-border: #c3d5e4;
    --bs3-thumbnail-shadow: var(--bs3-shadow-soft);
    --bs3-breadcrumb-bg: #edf4fa;
    --bs3-breadcrumb-border: #c8d9e6;
    --bs3-breadcrumb-text: #577086;
    --bs3-breadcrumb-active: #2f4e65;
    --bs3-jumbotron-top: #fefefe;
    --bs3-jumbotron-base: #e8f1f8;
    --bs3-jumbotron-border: #bfd2e2;
    --bs3-jumbotron-text: #2f4f66;

    --bs3-border-width: 1px;
    --bs3-transition-fast: 0.16s ease;
    --bs3-control-transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;

    --bs3-field-height-sm: 30px;
    --bs3-field-height-lg: 44px;
    --bs3-field-padding-y-sm: 5px;
    --bs3-field-padding-x-sm: 9px;
    --bs3-field-padding-y-lg: 10px;
    --bs3-field-padding-x-lg: 12px;
    --bs3-field-font-size-sm: 12px;
    --bs3-field-font-size-lg: 16px;
    --bs3-field-radius-sm: var(--bs3-radius-xs);
    --bs3-field-radius-lg: var(--bs3-radius-md);

    --bs3-validation-success-border: var(--state-done-border);
    --bs3-validation-success-shadow: 0 0 0 2px rgba(94, 154, 106, 0.18);
    --bs3-validation-success-text: var(--state-done-text);
    --bs3-validation-warning-border: var(--state-outstanding-border);
    --bs3-validation-warning-shadow: 0 0 0 2px rgba(201, 149, 51, 0.2);
    --bs3-validation-warning-text: var(--state-outstanding-text);
    --bs3-validation-error-border: var(--state-overdue-border);
    --bs3-validation-error-shadow: 0 0 0 2px rgba(200, 103, 91, 0.2);
    --bs3-validation-error-text: var(--state-overdue-text);

    --bs3-context-success-bg: #edf8f0;
    --bs3-context-success-border: #c9e4d0;
    --bs3-context-success-text: #245533;
    --bs3-context-info-bg: #e8f4fb;
    --bs3-context-info-border: #c5dcec;
    --bs3-context-info-text: #23475d;
    --bs3-context-warning-bg: #fff8eb;
    --bs3-context-warning-border: #f0dfbb;
    --bs3-context-warning-text: #6c4a11;
    --bs3-context-danger-bg: #fdeeed;
    --bs3-context-danger-border: #f1d2ce;
    --bs3-context-danger-text: #65231f;

    --bs3-badge-bg: #8ca0af;
    --bs3-badge-text: #ffffff;
    --bs3-badge-active-bg: #4b93c0;
    --bs3-badge-active-text: #ffffff;

    --bs3-pager-bg: var(--bs3-pagination-bg);
    --bs3-pager-border: var(--bs3-pagination-border);
    --bs3-pager-text: var(--bs3-pagination-text);
    --bs3-pager-hover-bg: var(--bs3-pagination-hover-bg);
    --bs3-pager-hover-text: var(--bs3-pagination-hover-text);
    --bs3-pager-disabled-bg: #eef4f9;
    --bs3-pager-disabled-text: #8ca1b0;

    --bs3-navbar-inverse-bg-top: #35526a;
    --bs3-navbar-inverse-bg-base: #223a4f;
    --bs3-navbar-inverse-border: #1a2d3d;
    --bs3-navbar-inverse-text: #d7e6f1;
    --bs3-navbar-inverse-brand: #ffffff;
    --bs3-navbar-inverse-link-hover-bg: #2d4a62;
    --bs3-navbar-inverse-link-hover-text: #ffffff;
    --bs3-navbar-inverse-link-active-bg: #1b3347;
    --bs3-navbar-inverse-link-active-text: #ffffff;

    --bs3-tooltip-radius: var(--bs3-radius-xs);
    --bs3-popover-radius: var(--bs3-radius-sm);
    --bs3-popover-title-border: #d3e2ed;
    --bs3-dropdown-min-width: 180px;
    --bs3-dropdown-padding-y: 6px;
    --bs3-dropdown-padding-x: 0px;
    --bs3-badge-min-width: 10px;
    --bs3-badge-padding-y: 0.35em;
    --bs3-badge-padding-x: 0.65em;
    --bs3-progress-track-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    --bs3-progress-stripe-color: rgba(255, 255, 255, 0.18);
    --bs3-navbar-inverse-toggle-bg: rgba(255, 255, 255, 0.07);
    --bs3-navbar-inverse-toggle-hover-bg: rgba(255, 255, 255, 0.14);
    --bs3-navbar-inverse-divider: rgba(255, 255, 255, 0.15);
    --bs3-modal-backdrop-opacity: 1;
    --bs3-close-color: #6e8495;
    --bs3-close-hover-color: #2c5068;
    --bs3-close-opacity: 0.8;
    --bs3-close-hover-opacity: 1;
}

/* ============================================================
   02 – GENERIC  — resets & normalizations
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

::selection {
    background: rgba(78, 127, 165, 0.28);
    color: inherit;
}

html {
    scrollbar-gutter: auto;
}


/* ============================================================
   03 – ELEMENTS  — HTML element defaults
   ============================================================ */

html,
body {
    font-family: var(--bs3-font-family-base);
    font-size: var(--bs3-font-size-base);
    line-height: var(--bs3-line-height-base);
    font-weight: var(--bs3-font-weight-normal);
    color: var(--bs3-text-color);
    background-color: var(--bs3-body-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs3-heading-color);
    font-weight: var(--bs3-font-weight-strong);
}

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

a {
    color: var(--bs3-link-color);
    text-decoration: var(--bs3-link-decoration);
    transition: color var(--bs3-transition-fast), text-decoration-color var(--bs3-transition-fast);
}

a:hover,
a:focus {
    color: var(--bs3-link-hover-color);
    text-decoration: var(--bs3-link-hover-decoration);
}

a, a p, a h3 {
    text-decoration-skip-ink: auto;
}

hr {
    border-top: var(--bs3-border-width) solid var(--bs3-divider-color);
}

fieldset {
    margin-bottom: 2em;
    margin-left: 2px;
}

fieldset legend {
    color: #333333;
    font-size: 16px;
    margin-left: -5px;
}

.radio,
.checkbox {
    margin-top: 8px;
}

.radio label,
.checkbox label {
    margin-top: 0;
    padding-left: 24px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    margin-left: -22px;
}

input[type="checkbox"],
input[type="radio"] {
    transform: scale(1.2);
}

/* Extra smaller checkboxes in .small context */
.small .radio label,
.small .checkbox label {
    padding-left: 20px;
}

.small .radio input[type="radio"],
.small .checkbox input[type="checkbox"] {
    margin-left: -20px;
}

.small input[type="checkbox"],
.small input[type="radio"] {
    transform: scale(0.9);
}

.small .radio,
.small .checkbox {
    margin-top: 5px;
}

/* Date/time inputs: normalize line-height and suppress browser chrome */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
    line-height: var(--bs3-field-line-height);
    -webkit-appearance: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
    display: none;
    -webkit-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 10%;
}

details summary {
    display: list-item;
    cursor: pointer;
    padding-bottom: 5px;
}


/* ============================================================
   04 – OBJECTS  — layout patterns & structural helpers
   ============================================================ */

/* Custom fractional grid columns (Bootstrap 3 extension) */
@media (min-width: 992px) {
    .col-md-3_5 {
        width: 28%;
    }

    .col-md-4_5 {
        width: 37.5%;
    }
}

/* Row-level padding helpers for tight two-column layouts */
@media screen and (min-width: 992px) {
    .row-sm-no-padding-right {
        padding-right: 0;
        margin-right: -2px;
    }

    .row-sm-no-padding-left {
        padding-left: 0;
        margin-left: -2px;
    }
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
    .row-sm-only-no-padding-right {
        padding-right: 0;
        margin-right: -2px;
    }

    .row-sm-only-no-padding-left {
        padding-left: 0;
        margin-left: -2px;
    }
}

@media screen and (min-width: 1200px) {
    .input-group-e1 {
        float: left;
    }

    .input-group-e2 {
        float: right;
    }
}

@media screen and (max-width: 1199px) {
    .input-group-e1 {
        display: inline-block;
    }

    .input-group-e2 {
        display: inline-block;
        padding-left: 15px;
    }
}

/* Modal size variants */
.modal-sm {
    width: 450px;
}

@media (min-width: 800px) {
    .modal-dialog.modal-xlg {
        width: 780px;
    }
}

@media (min-width: 900px) {
    .modal-dialog.modal-xlg {
        width: 880px;
    }
}

@media (min-width: 1000px) {
    .modal-dialog.modal-xlg {
        width: 980px;
    }
}

@media (min-width: 1100px) {
    .modal-dialog.modal-xlg {
        width: 1080px;
    }
}

/* Draggable modals */
.ui-draggable .modal-header {
    cursor: grab;
}

.ui-draggable.ui-draggable-dragging .modal-header {
    cursor: grabbing;
}

/* ============================================================
   05 – COMPONENTS  (see inline comments per sub-section)
   ============================================================ */

/* ============================================================
   05 – COMPONENTS  — Bootstrap 3 / Bootswatch Lumen overrides
   All color, shape and interaction tokens from Section 01.

   Specificity notes vs Lumen:
     Lumen uses compound selectors (0-2-0) on many state rules.
     We match or exceed them with :not() pseudo-class patterns
     which add to the specificity (0-3-0) and cascade after Lumen.
   ============================================================ */

/* — Buttons — tone variables ——————————————————————————————— */

.btn-default {
    --bs3-btn-tone-top: var(--bs3-btn-default-top);
    --bs3-btn-tone-base: var(--bs3-btn-default-base);
    --bs3-btn-tone-border: var(--bs3-btn-default-border);
    --bs3-btn-tone-text: var(--bs3-btn-default-text);
    --bs3-btn-shadow-override: var(--ui-press-neutral-shadow);
    --bs3-btn-hover-shadow-override: var(--ui-press-neutral-hover-shadow);
    --bs3-btn-active-shadow-override: var(--ui-press-neutral-active-shadow);
}

.btn-primary {
    --bs3-btn-tone-top: var(--bs3-btn-primary-top);
    --bs3-btn-tone-base: var(--bs3-btn-primary-base);
    --bs3-btn-tone-border: var(--bs3-btn-primary-border);
    --bs3-btn-tone-text: var(--bs3-btn-primary-text);
}

.btn-success {
    --bs3-btn-tone-top: var(--bs3-btn-success-top);
    --bs3-btn-tone-base: var(--bs3-btn-success-base);
    --bs3-btn-tone-border: var(--bs3-btn-success-border);
    --bs3-btn-tone-text: var(--bs3-btn-success-text);
}

.btn-info {
    --bs3-btn-tone-top: var(--bs3-btn-info-top);
    --bs3-btn-tone-base: var(--bs3-btn-info-base);
    --bs3-btn-tone-border: var(--bs3-btn-info-border);
    --bs3-btn-tone-text: var(--bs3-btn-info-text);
}

.btn-warning {
    --bs3-btn-tone-top: var(--bs3-btn-warning-top);
    --bs3-btn-tone-base: var(--bs3-btn-warning-base);
    --bs3-btn-tone-border: var(--bs3-btn-warning-border);
    --bs3-btn-tone-text: var(--bs3-btn-warning-text);
}

.btn-danger {
    --bs3-btn-tone-top: var(--bs3-btn-danger-top);
    --bs3-btn-tone-base: var(--bs3-btn-danger-base);
    --bs3-btn-tone-border: var(--bs3-btn-danger-border);
    --bs3-btn-tone-text: var(--bs3-btn-danger-text);
}

/* — Buttons — base rule ————————————————————————————————————
   Resolves current-color variables and sets the full 3-layer
   shadow + gradient surface used by all button variants.      */

.btn {
    --bs3-btn-tone-top-current:    var(--bs3-btn-tone-top,    var(--bs3-btn-default-top));
    --bs3-btn-tone-base-current:   var(--bs3-btn-tone-base,   var(--bs3-btn-default-base));
    --bs3-btn-tone-border-current: var(--bs3-btn-tone-border, var(--bs3-btn-default-border));
    --bs3-btn-tone-text-current:   var(--bs3-btn-tone-text,   var(--bs3-btn-default-text));
    --bs3-btn-shadow-current: var(
        --bs3-btn-shadow-override,
        0 2px 0 color-mix(in srgb, var(--bs3-btn-tone-border-current) 72%, black),
        0 5px 10px color-mix(in srgb, var(--bs3-btn-tone-border-current) 36%, transparent)
    );
    --bs3-btn-hover-shadow-current: var(
        --bs3-btn-hover-shadow-override,
        0 3px 0 color-mix(in srgb, var(--bs3-btn-tone-border-current) 62%, black),
        0 7px 13px color-mix(in srgb, var(--bs3-btn-tone-border-current) 42%, transparent)
    );
    --bs3-btn-active-shadow-current: var(
        --bs3-btn-active-shadow-override,
        0 1px 0 color-mix(in srgb, var(--bs3-btn-tone-border-current) 48%, black),
        0 2px 4px color-mix(in srgb, var(--bs3-btn-tone-border-current) 24%, transparent)
    );

    border-width: var(--bs3-btn-border-width);
    border-style: solid;
    border-color: var(--bs3-btn-tone-border-current);
    background: linear-gradient(
        180deg,
        var(--bs3-btn-tone-top-current) 0%,
        var(--bs3-btn-tone-base-current) 100%
    );
    color: var(--bs3-btn-tone-text-current);
    font-weight: var(--bs3-btn-font-weight);
    font-size: var(--bs3-btn-font-size);
    line-height: var(--bs3-btn-line-height);
    padding: var(--bs3-btn-padding-y) var(--bs3-btn-padding-x);
    border-radius: var(--bs3-btn-border-radius);
    margin-top: 0;
    top: auto;
    box-shadow: var(--bs3-btn-shadow-current);
    transition:
        transform var(--bs3-btn-transition),
        box-shadow var(--bs3-btn-transition),
        border-color var(--bs3-btn-transition),
        background var(--bs3-btn-transition),
        color var(--bs3-btn-transition),
        filter var(--bs3-btn-transition);
    text-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    background-origin: border-box;
    background-clip: border-box;
    touch-action: manipulation;
    will-change: transform, box-shadow, filter;
    cursor: pointer;
    text-transform: none;
}

/* Hover ─ explicitly declare background to defeat Lumen's
   .btn-primary:hover { background-color: #106a8c } (0-2-0).
   Our :not() pushes specificity to 0-3-0 and we cascade after. */
.btn:not(.btn-link):hover,
.open > .dropdown-toggle.btn:not(.btn-link) {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bs3-btn-tone-top-current) 92%, white) 0%,
        color-mix(in srgb, var(--bs3-btn-tone-base-current) 92%, white) 100%
    );
    border-color: var(--bs3-btn-tone-border-current);
    color: var(--bs3-btn-tone-text-current);
    margin-top: 0;
    border-width: var(--bs3-btn-border-width);
    filter: saturate(1.1) brightness(1.03) contrast(1.01);
    transform: var(--bs3-btn-transform-hover);
    box-shadow: var(--bs3-btn-hover-shadow-current);
}

/* Focus ─ defeat Lumen's .btn:hover,.btn:focus { color: #555555 }
   and .btn:focus,.btn:active:focus { outline: 5px auto } (both 0-1-0) */
.btn:not(.btn-link):focus,
.btn:not(.btn-link):active:focus {
    color: var(--bs3-btn-tone-text-current);
    outline: none;
}

.btn:not(.btn-link):focus-visible {
    outline: none;
    box-shadow: var(--ui-press-focus-ring);
}

.btn:not(.btn-link):focus:not(:focus-visible) {
    outline: none;
}

/* Press state (:active) ─ defeat Lumen's .btn-primary:active { background-image: none }
   and .btn:active { box-shadow: inset 0 3px 5px ... } */
.btn:not(.btn-link):active,
.open > .dropdown-toggle.btn:not(.btn-link):active {
    background: linear-gradient(
        180deg,
        var(--bs3-btn-tone-top-current) 0%,
        var(--bs3-btn-tone-base-current) 100%
    );
    border-color: var(--bs3-btn-tone-border-current);
    color: var(--bs3-btn-tone-text-current);
    margin-top: 0;
    border-width: var(--bs3-btn-border-width);
    filter: none;
    transform: var(--bs3-btn-transform-active);
    box-shadow: var(--bs3-btn-active-shadow-current);
}

/* Toggle/selected state (.active) ─ visually sunken with a tinted inset shadow
   so the selection is clearly visible rather than flat/shadowless. */
.btn:not(.btn-link).active,
.open > .dropdown-toggle.btn:not(.btn-link).active {
    background: linear-gradient(
        180deg,
        var(--bs3-btn-tone-top-current) 0%,
        var(--bs3-btn-tone-base-current) 100%
    );
    border-color: var(--bs3-btn-tone-border-current);
    color: var(--bs3-btn-tone-text-current);
    margin-top: 0;
    border-width: var(--bs3-btn-border-width);
    filter: brightness(0.97) saturate(1.05);
    transform: translateY(1px);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--bs3-btn-tone-border-current) 55%, black),
        inset 0 2px 5px color-mix(in srgb, var(--bs3-btn-tone-border-current) 30%, black);
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: var(--bs3-btn-disabled-opacity);
    filter: none;
    transform: none;
    box-shadow: none;
}

.btn-link {
    border-color: transparent;
    background: transparent;
    color: var(--bs3-btn-link-text);
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    margin-top: 0;
    color: var(--bs3-btn-link-hover-text);
    background: transparent;
    border-color: transparent;
    border-width: 0;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* Neutralize Bootswatch navbar button margin offsets */
.navbar-btn,
.navbar-btn:hover,
.navbar-btn:active,
.navbar-btn.btn-sm:hover,
.navbar-btn.btn-sm:active,
.navbar-btn.btn-xs:hover,
.navbar-btn.btn-xs:active {
    margin-top: 0;
}

.btn-lg,
.btn-group-lg > .btn {
    padding: var(--bs3-btn-lg-padding-y) var(--bs3-btn-lg-padding-x);
    font-size: var(--bs3-btn-lg-font-size);
}

.btn-sm,
.btn-group-sm > .btn {
    padding: var(--bs3-btn-sm-padding-y) var(--bs3-btn-sm-padding-x);
    font-size: var(--bs3-btn-sm-font-size);
}

.btn-xs,
.btn-group-xs > .btn {
    padding: var(--bs3-btn-xs-padding-y) var(--bs3-btn-xs-padding-x);
    font-size: var(--bs3-btn-xs-font-size);
}

.btn .caret {
    border-top-color: currentColor;
}

/* — Button groups ——————————————————————————————————————————— */

.btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group > .btn,
.btn-group > .btn-group {
    float: left;
}

.btn-group > .btn,
.btn-group > .btn-group > .btn,
.input-group-btn > .btn,
.input-group-btn > .btn-group > .btn {
    position: relative;
    z-index: 1;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus-visible,
.btn-group > .btn-group > .btn:hover,
.btn-group > .btn-group > .btn:focus-visible,
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus-visible,
.input-group-btn > .btn-group > .btn:hover,
.input-group-btn > .btn-group > .btn:focus-visible {
    z-index: var(--bs3-btn-fused-z-hover);
}

.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group > .btn-group > .btn:active,
.btn-group > .btn-group > .btn.active,
.input-group-btn > .btn:active,
.input-group-btn > .btn.active,
.input-group-btn > .btn-group > .btn:active,
.input-group-btn > .btn-group > .btn.active {
    z-index: calc(var(--bs3-btn-fused-z-hover) - 1);
}

.btn-group > .btn + .btn,
.btn-group > .btn + .btn-group,
.btn-group > .btn-group + .btn,
.btn-group > .btn-group + .btn-group,
.input-group-btn > .btn + .btn,
.input-group-btn > .btn + .btn-group,
.input-group-btn > .btn-group + .btn,
.input-group-btn > .btn-group + .btn-group {
    margin-left: 0;
}

.btn-group > .btn + .btn,
.btn-group > .btn-group + .btn,
.btn-group > .btn + .btn-group > .btn,
.btn-group > .btn-group + .btn-group > .btn {
    border-left-width: var(--bs3-btn-border-width);
}

.input-group-btn > .btn + .btn,
.input-group-btn > .btn + .btn-group,
.input-group-btn > .btn-group + .btn,
.input-group-btn > .btn-group + .btn-group {
    margin-left: calc(-1 * var(--bs3-btn-fused-overlap));
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.input-group-btn:not(:first-child):not(:last-child) > .btn,
.input-group-btn:not(:first-child):not(:last-child) > .btn-group > .btn {
    border-radius: 0;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.input-group-btn:first-child > .btn:not(:last-child),
.input-group-btn:first-child > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child),
.input-group-btn:last-child > .btn:not(:first-child),
.input-group-btn:last-child > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-btn > .btn {
    line-height: var(--bs3-btn-line-height);
}

/* — Forms ——————————————————————————————————————————————————— */

.form-control {
    display: block;
    width: 100%;
    height: var(--bs3-field-height);
    padding: var(--bs3-field-padding-y) var(--bs3-field-padding-x);
    font-size: var(--bs3-field-font-size);
    line-height: var(--bs3-field-line-height);
    color: var(--bs3-field-text);
    background-color: var(--bs3-field-bg);
    background-image: none;
    border: var(--bs3-border-width) solid var(--bs3-field-border);
    border-radius: var(--bs3-field-radius);
    box-shadow: var(--bs3-field-shadow);
    transition: var(--bs3-control-transition);
}

.form-control:hover {
    border-color: var(--bs3-field-border-hover);
}

.form-control:focus {
    color: var(--bs3-field-text);
    background-color: var(--bs3-field-bg);
    border-color: var(--bs3-focus-border);
    outline: var(--bs3-focus-outline);
    box-shadow: var(--bs3-field-focus-shadow);
}

.form-control::-webkit-input-placeholder { color: var(--bs3-field-placeholder); }
.form-control::-moz-placeholder         { color: var(--bs3-field-placeholder); opacity: 1; }
.form-control:-ms-input-placeholder     { color: var(--bs3-field-placeholder); }
.form-control::placeholder              { color: var(--bs3-field-placeholder); }

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--bs3-field-disabled-bg);
    color: var(--bs3-field-disabled-text);
    border-color: var(--bs3-field-border);
    box-shadow: none;
    opacity: 1;
}

textarea.form-control {
    height: auto;
    min-height: calc(var(--bs3-field-height) * 2);
}

.input-sm,
.form-group-sm .form-control {
    height: var(--bs3-field-height-sm);
    padding: var(--bs3-field-padding-y-sm) var(--bs3-field-padding-x-sm);
    font-size: var(--bs3-field-font-size-sm);
    border-radius: var(--bs3-field-radius-sm);
}

.input-lg,
.form-group-lg .form-control {
    height: var(--bs3-field-height-lg);
    padding: var(--bs3-field-padding-y-lg) var(--bs3-field-padding-x-lg);
    font-size: var(--bs3-field-font-size-lg);
    border-radius: var(--bs3-field-radius-lg);
}

select.input-sm,
.form-group-sm select.form-control {
    height: var(--bs3-field-height-sm);
    line-height: var(--bs3-field-height-sm);
}

select.input-lg,
.form-group-lg select.form-control {
    height: var(--bs3-field-height-lg);
    line-height: var(--bs3-field-height-lg);
}

/* — Input groups ———————————————————————————————————————————
   Flex layout so the wrapper can have a proper pill border-radius
   and a single unified shadow — no more rectangular faint boxes.
   Individual children strip their own shadows; the wrapper owns it. */

.input-group {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
    border-radius: var(--bs3-btn-border-radius);
    box-shadow: var(--bs3-input-combo-shadow);
    transition: box-shadow var(--bs3-transition-fast);
}

.input-group:hover {
    box-shadow: var(--bs3-input-combo-hover-shadow);
}

.input-group:focus-within {
    box-shadow: var(--bs3-input-combo-focus-shadow);
}

.form-inline .input-group {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* Reset Bootstrap's table-cell / float model so flex takes over.
   Each child type gets only the display it actually needs. */

/* form-control: plain block — no nested flex (input has no flex children) */
.input-group > .form-control {
    display: block;
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

/* addon: flex for vertical centering of its text/icon content */
.input-group > .input-group-addon {
    display: flex;
    align-items: center;
    float: none;
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

/* btn wrapper: flex-stretch so contained buttons fill full height */
.input-group > .input-group-btn {
    display: flex;
    align-items: stretch;
    float: none;
    flex: 0 0 auto;
    width: auto;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn > .btn-group > .btn {
    box-shadow: none;
    position: relative;
    z-index: 1;
}

.input-group > .bootstrap-select {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    z-index: 2;
}

.input-group > .bootstrap-select > .dropdown-toggle {
    width: 100%;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

.input-group .form-control:focus,
.input-group .bootstrap-select.open > .dropdown-toggle,
.input-group .bootstrap-select > .dropdown-toggle:focus {
    box-shadow: none;
    z-index: 3;
}

.input-group-addon {
    padding: var(--bs3-field-padding-y) var(--bs3-field-padding-x);
    font-size: var(--bs3-field-font-size);
    font-weight: var(--bs3-font-weight-strong);
    line-height: var(--bs3-field-line-height);
    color: var(--bs3-addon-text);
    text-align: center;
    background-color: var(--bs3-addon-bg);
    border: var(--bs3-border-width) solid var(--bs3-addon-border);
    border-radius: 0;
    box-shadow: none;
}

/* Seamless joining: collapse internal left borders */
.input-group .form-control + .input-group-addon,
.input-group .form-control + .input-group-btn > .btn,
.input-group .form-control + .bootstrap-select > .dropdown-toggle,
.input-group-addon + .form-control,
.input-group-addon + .input-group-btn > .btn,
.input-group-addon + .input-group-btn > .btn-group > .btn,
.input-group-addon + .bootstrap-select > .dropdown-toggle,
.input-group-btn + .form-control,
.input-group-btn + .input-group-addon,
.input-group-btn + .bootstrap-select > .dropdown-toggle,
.input-group-btn + .input-group-btn > .btn,
.input-group-btn + .input-group-btn > .btn-group > .btn,
.input-group .bootstrap-select + .form-control,
.input-group .bootstrap-select + .input-group-addon,
.input-group .bootstrap-select + .input-group-btn > .btn,
.input-group .bootstrap-select + .input-group-btn > .btn-group > .btn,
.input-group-addon + .input-group-addon {
    border-left-width: 0;
}

/* Bootstrap's table-layout margin hacks cause overlap in the flex rewrite. */
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
    margin-left: 0;
    margin-right: 0;
}

/* Middle items: square on all corners */
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group .bootstrap-select:not(:first-child):not(:last-child) > .dropdown-toggle,
.input-group-btn:not(:first-child):not(:last-child) > .btn,
.input-group-btn:not(:first-child):not(:last-child) > .btn-group > .btn {
    border-radius: 0;
}

/* First child: pill on the left edge */
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group .bootstrap-select:first-child > .dropdown-toggle,
.input-group .form-control:first-child {
    border-top-left-radius: var(--bs3-btn-border-radius);
    border-bottom-left-radius: var(--bs3-btn-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Last child: pill on the right edge */
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group .bootstrap-select:last-child > .dropdown-toggle,
.input-group .form-control:last-child {
    border-top-right-radius: var(--bs3-btn-border-radius);
    border-bottom-right-radius: var(--bs3-btn-border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* — bootstrap-select bridge ———————————————————————————————— */

.bootstrap-select > .dropdown-toggle {
    height: var(--bs3-field-height);
    padding: var(--bs3-field-padding-y) var(--bs3-field-padding-x);
    font-size: var(--bs3-field-font-size);
    font-family: var(--bs3-font-family-base);
    font-weight: var(--bs3-font-weight-normal);
    font-style: normal;
    line-height: var(--bs3-field-line-height);
    color: var(--bs3-field-text);
    background: var(--bs3-field-bg);
    border: var(--bs3-border-width) solid var(--bs3-field-border);
    border-radius: var(--bs3-field-radius);
    box-shadow: var(--bs3-field-shadow);
    transition: var(--bs3-control-transition);
}

.bootstrap-select > .dropdown-toggle:hover {
    border-color: var(--bs3-field-border-hover);
}

.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--bs3-focus-border);
    outline: var(--bs3-focus-outline);
    box-shadow: var(--bs3-field-focus-shadow);
}

.bootstrap-select.input-sm > .dropdown-toggle {
    height: var(--bs3-field-height-sm);
    padding: var(--bs3-field-padding-y-sm) var(--bs3-field-padding-x-sm);
    font-size: var(--bs3-field-font-size-sm);
    border-radius: var(--bs3-field-radius-sm);
    line-height: var(--bs3-field-height-sm);
}

.bootstrap-select.input-lg > .dropdown-toggle {
    height: var(--bs3-field-height-lg);
    padding: var(--bs3-field-padding-y-lg) var(--bs3-field-padding-x-lg);
    font-size: var(--bs3-field-font-size-lg);
    border-radius: var(--bs3-field-radius-lg);
}

/* — Validation states ——————————————————————————————————————— */

.has-success .control-label,
.has-success .help-block,
.has-success .form-control-feedback {
    color: var(--bs3-validation-success-text);
}

.has-success .form-control {
    border-color: var(--bs3-validation-success-border);
}

.has-success .form-control:focus {
    border-color: var(--bs3-validation-success-border);
    box-shadow: var(--bs3-validation-success-shadow);
}

.has-warning .control-label,
.has-warning .help-block,
.has-warning .form-control-feedback {
    color: var(--bs3-validation-warning-text);
}

.has-warning .form-control {
    border-color: var(--bs3-validation-warning-border);
}

.has-warning .form-control:focus {
    border-color: var(--bs3-validation-warning-border);
    box-shadow: var(--bs3-validation-warning-shadow);
}

.has-error .control-label,
.has-error .help-block,
.has-error .form-control-feedback {
    color: var(--bs3-validation-error-text);
}

.has-error .form-control {
    border-color: var(--bs3-validation-error-border);
}

.has-error .form-control:focus {
    border-color: var(--bs3-validation-error-border);
    box-shadow: var(--bs3-validation-error-shadow);
}

/* — Dropdowns ——————————————————————————————————————————————— */

.dropdown-menu {
    min-width: var(--bs3-dropdown-min-width);
    border: var(--bs3-border-width) solid var(--bs3-dropdown-border);
    border-radius: var(--bs3-dropdown-radius);
    background-color: var(--bs3-dropdown-bg);
    box-shadow: var(--bs3-dropdown-shadow);
    padding: var(--bs3-dropdown-padding-y) var(--bs3-dropdown-padding-x);
}

.dropdown-menu > li > a,
.dropdown-menu > li > button {
    display: block;
    width: 100%;
    padding: var(--bs3-dropdown-item-padding-y) var(--bs3-dropdown-item-padding-x);
    color: var(--bs3-dropdown-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    text-align: left;
    transition: background-color var(--bs3-transition-fast), color var(--bs3-transition-fast);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus {
    color: var(--bs3-dropdown-item-hover-text);
    background: var(--bs3-dropdown-item-hover-bg);
    outline: var(--bs3-focus-outline);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > button,
.dropdown-menu > .active > button:hover,
.dropdown-menu > .active > button:focus {
    color: var(--bs3-dropdown-item-active-text);
    background: var(--bs3-dropdown-item-active-bg);
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    color: var(--bs3-text-muted);
    background: transparent;
}

.dropdown-menu .divider {
    background-color: var(--bs3-dropdown-divider);
}

.dropdown-header {
    color: var(--bs3-dropdown-header-text);
}

/* — Navigation ————————————————————————————————————————————— */

.nav > li > a {
    color: var(--bs3-nav-link-color);
    border-radius: var(--bs3-radius-sm);
    transition: background-color var(--bs3-transition-fast), color var(--bs3-transition-fast);
}

.nav > li > a:hover,
.nav > li > a:focus,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    color: var(--bs3-nav-link-hover-color);
    background-color: var(--bs3-nav-link-hover-bg);
}

.nav-tabs {
    border-bottom: var(--bs3-border-width) solid var(--bs3-nav-tab-border);
}

ul.nav-tabs {
    border-bottom: var(--bs3-border-width) solid var(--bs3-nav-tab-border);
    margin-bottom: 0;
}

ul.nav-tabs > li {
    margin-bottom: -1px;
}

ul.nav-tabs > li > a {
    margin-right: 6px;
    padding: 9px 16px 10px;
    border: var(--bs3-border-width) solid var(--bs3-nav-tab-border);
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #ffffff 0%, var(--bs3-nav-tab-bg-base) 100%);
    color: var(--bs3-nav-link-color);
    font-weight: 600;
    line-height: 1.25;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

ul.nav-tabs > li > a:hover,
ul.nav-tabs > li > a:focus {
    border-color: var(--bs3-nav-tab-active-border);
    background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
    color: var(--bs3-nav-link-hover-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 4px 8px rgba(51, 91, 120, 0.14);
    transform: translateY(-1px);
}

ul.nav-tabs > li.active > a,
ul.nav-tabs > li.active > a:hover,
ul.nav-tabs > li.active > a:focus {
    border-color: var(--bs3-nav-tab-active-border);
    border-bottom-color: var(--bs3-body-bg, #ffffff);
    background: linear-gradient(180deg, var(--bs3-nav-tab-active-top) 0%, var(--bs3-nav-tab-active-base) 100%);
    color: var(--bs3-nav-link-hover-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 0 var(--bs3-body-bg, #ffffff);
    transform: none;
}

.nav-pills > li > a {
    border: var(--bs3-border-width) solid var(--bs3-nav-pill-border);
    background: linear-gradient(180deg, var(--bs3-nav-pill-top) 0%, var(--bs3-nav-pill-base) 100%);
    color: var(--bs3-nav-pill-text);
    box-shadow: var(--bs3-shadow-inset-top);
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background: linear-gradient(180deg, var(--bs3-surface-bg) 0%, var(--bs3-nav-pill-base) 100%);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    border-color: var(--bs3-nav-pill-active-border);
    background: linear-gradient(180deg, var(--bs3-nav-pill-active-top) 0%, var(--bs3-nav-pill-active-base) 100%);
    color: var(--bs3-nav-pill-active-text);
}

/* — Navbar ————————————————————————————————————————————————— */

.navbar {
    border: var(--bs3-border-width) solid var(--bs3-navbar-border);
    border-radius: var(--bs3-radius-sm);
    box-shadow: var(--bs3-shadow-soft);
}

.navbar-default {
    background: linear-gradient(180deg, var(--bs3-navbar-bg-top) 0%, var(--bs3-navbar-bg-base) 100%);
    border-color: var(--bs3-navbar-border);
}

.navbar-default .navbar-brand {
    color: var(--bs3-navbar-brand);
    font-weight: var(--bs3-font-weight-strong);
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: var(--bs3-navbar-link-hover-text);
}

.navbar-default .navbar-nav > li > a {
    color: var(--bs3-navbar-text);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--bs3-navbar-link-hover-text);
    background-color: var(--bs3-navbar-link-hover-bg);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: var(--bs3-navbar-link-active-text);
    background-color: var(--bs3-navbar-link-active-bg);
}

.navbar-default .navbar-toggle {
    border-color: var(--bs3-navbar-border);
    background-color: var(--bs3-surface-bg);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--bs3-navbar-link-hover-bg);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--bs3-navbar-text);
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: var(--bs3-navbar-border);
}

.navbar-inverse {
    background: linear-gradient(180deg, var(--bs3-navbar-inverse-bg-top) 0%, var(--bs3-navbar-inverse-bg-base) 100%);
    border-color: var(--bs3-navbar-inverse-border);
}

.navbar-inverse .navbar-brand {
    color: var(--bs3-navbar-inverse-brand);
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: var(--bs3-navbar-inverse-brand);
}

.navbar-inverse .navbar-nav > li > a {
    color: var(--bs3-navbar-inverse-text);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--bs3-navbar-inverse-link-hover-text);
    background-color: var(--bs3-navbar-inverse-link-hover-bg);
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: var(--bs3-navbar-inverse-link-active-text);
    background-color: var(--bs3-navbar-inverse-link-active-bg);
}

.navbar-inverse .navbar-toggle {
    border-color: var(--bs3-navbar-inverse-border);
    background: var(--bs3-navbar-inverse-toggle-bg);
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background: var(--bs3-navbar-inverse-toggle-hover-bg);
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--bs3-navbar-inverse-text);
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: var(--bs3-navbar-inverse-divider);
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: var(--bs3-navbar-text);
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--bs3-navbar-link-hover-text);
        background-color: var(--bs3-navbar-link-hover-bg);
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: var(--bs3-navbar-inverse-text);
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--bs3-navbar-inverse-link-hover-text);
        background-color: var(--bs3-navbar-inverse-link-hover-bg);
    }
}

/* — Panels ————————————————————————————————————————————————— */

.panel-default {
    --bs3-panel-tone-top:    var(--bs3-panel-default-top);
    --bs3-panel-tone-base:   var(--bs3-panel-default-base);
    --bs3-panel-tone-border: var(--bs3-panel-default-border);
    --bs3-panel-tone-text:   var(--bs3-panel-default-text);
}

.panel-primary {
    --bs3-panel-tone-top:    var(--bs3-panel-primary-top);
    --bs3-panel-tone-base:   var(--bs3-panel-primary-base);
    --bs3-panel-tone-border: var(--bs3-panel-primary-border);
    --bs3-panel-tone-text:   var(--bs3-panel-primary-text);
}

.panel-success {
    --bs3-panel-tone-top:    var(--bs3-panel-success-top);
    --bs3-panel-tone-base:   var(--bs3-panel-success-base);
    --bs3-panel-tone-border: var(--bs3-panel-success-border);
    --bs3-panel-tone-text:   var(--bs3-panel-success-text);
}

.panel-info {
    --bs3-panel-tone-top:    var(--bs3-panel-info-top);
    --bs3-panel-tone-base:   var(--bs3-panel-info-base);
    --bs3-panel-tone-border: var(--bs3-panel-info-border);
    --bs3-panel-tone-text:   var(--bs3-panel-info-text);
}

.panel-warning {
    --bs3-panel-tone-top:    var(--bs3-panel-warning-top);
    --bs3-panel-tone-base:   var(--bs3-panel-warning-base);
    --bs3-panel-tone-border: var(--bs3-panel-warning-border);
    --bs3-panel-tone-text:   var(--bs3-panel-warning-text);
}

.panel-danger {
    --bs3-panel-tone-top:    var(--bs3-panel-danger-top);
    --bs3-panel-tone-base:   var(--bs3-panel-danger-base);
    --bs3-panel-tone-border: var(--bs3-panel-danger-border);
    --bs3-panel-tone-text:   var(--bs3-panel-danger-text);
}

.panel {
    border: var(--bs3-border-width) solid var(--bs3-panel-tone-border, var(--bs3-panel-border));
    border-radius: var(--bs3-panel-radius);
    background-color: var(--bs3-panel-bg);
    box-shadow: var(--bs3-panel-shadow);
}

/* Base heading (0-1-0) — sets layout, border-radius, transitions.
   Compound rules below (0-2-0) defeat Lumen's .panel-default>.panel-heading. */
.panel-heading {
    padding: var(--bs3-panel-heading-padding-y) var(--bs3-panel-heading-padding-x);
    border-bottom: var(--bs3-border-width) solid var(--bs3-panel-tone-border, var(--bs3-panel-border));
    border-top-left-radius:  calc(var(--bs3-panel-radius) - 1px);
    border-top-right-radius: calc(var(--bs3-panel-radius) - 1px);
    background: linear-gradient(
        180deg,
        var(--bs3-panel-tone-top,  var(--bs3-panel-default-top))  0%,
        var(--bs3-panel-tone-base, var(--bs3-panel-default-base)) 100%
    );
    color: var(--bs3-panel-tone-text, var(--bs3-panel-default-text));
}

/* Explicit compound selectors (0-2-0) override Lumen's
   .panel-default>.panel-heading { background-color: #f5f5f5 } */
.panel-default > .panel-heading {
    background: linear-gradient(180deg, var(--bs3-panel-default-top) 0%, var(--bs3-panel-default-base) 100%);
    color: var(--bs3-panel-default-text);
    border-color: var(--bs3-panel-default-border);
}

.panel-primary > .panel-heading {
    background: linear-gradient(180deg, var(--bs3-panel-primary-top) 0%, var(--bs3-panel-primary-base) 100%);
    color: var(--bs3-panel-primary-text);
    border-color: var(--bs3-panel-primary-border);
}

.panel-success > .panel-heading {
    background: linear-gradient(180deg, var(--bs3-panel-success-top) 0%, var(--bs3-panel-success-base) 100%);
    color: var(--bs3-panel-success-text);
    border-color: var(--bs3-panel-success-border);
}

.panel-info > .panel-heading {
    background: linear-gradient(180deg, var(--bs3-panel-info-top) 0%, var(--bs3-panel-info-base) 100%);
    color: var(--bs3-panel-info-text);
    border-color: var(--bs3-panel-info-border);
}

.panel-warning > .panel-heading {
    background: linear-gradient(180deg, var(--bs3-panel-warning-top) 0%, var(--bs3-panel-warning-base) 100%);
    color: var(--bs3-panel-warning-text);
    border-color: var(--bs3-panel-warning-border);
}

.panel-danger > .panel-heading {
    background: linear-gradient(180deg, var(--bs3-panel-danger-top) 0%, var(--bs3-panel-danger-base) 100%);
    color: var(--bs3-panel-danger-text);
    border-color: var(--bs3-panel-danger-border);
}

.panel-title,
.panel-title > a {
    color: inherit;
    font-weight: var(--bs3-font-weight-strong);
}

.panel-body {
    padding: var(--bs3-panel-body-padding);
}

.panel-footer {
    background-color: var(--bs3-surface-bg-soft);
    border-top: var(--bs3-border-width) solid var(--bs3-divider-color);
    color: var(--bs3-text-color);
}

.panel-group .panel {
    border-radius: var(--bs3-panel-radius);
}

/* — Tables ————————————————————————————————————————————————— */

.table {
    color: var(--bs3-text-color);
    background-color: var(--bs3-table-row-bg);
}

.table > thead > tr > th {
    color: var(--bs3-table-head-text);
    background: linear-gradient(180deg, var(--bs3-table-head-top) 0%, var(--bs3-table-head-base) 100%);
    border-top: var(--bs3-border-width) solid var(--bs3-table-head-border);
    border-bottom: var(--bs3-border-width) solid var(--bs3-table-head-border);
    font-weight: var(--bs3-font-weight-strong);
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: var(--bs3-border-width) solid var(--bs3-table-cell-border);
}

.table-bordered {
    border: var(--bs3-border-width) solid var(--bs3-table-head-border);
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: var(--bs3-border-width) solid var(--bs3-table-cell-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bs3-table-row-alt-bg);
}

.table-hover > tbody > tr:hover {
    background-color: var(--bs3-table-row-hover-bg);
}

.table-v2 {
    --table-v2-surface: #f8f9fa;
    --table-v2-header-bg: linear-gradient(180deg, #fcfdff 0%, #eef4f8 100%);
    --table-v2-header-text: #2a465d;
    --table-v2-section-bg: linear-gradient(180deg, #eaf2f8 0%, #d7e6f1 100%);
    --table-v2-section-text: #1f4e78;
    --table-v2-row-bg: #ffffff;
    --table-v2-row-hover-bg: #f5faff;
    --table-v2-row-selected-bg: rgba(217, 237, 247, 0.72);
    --table-v2-row-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --table-v2-row-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    --table-v2-radius: 8px;
    border: none;
    border-collapse: separate;
    border-spacing: 0 8px;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: -8px;
    overflow: visible;
    background: var(--table-v2-surface);
}

.table-v2 > thead > tr > th {
    padding: 10px 8px;
    border: none;
    background: var(--table-v2-header-bg);
    box-shadow: 0 8px 0 0 var(--table-v2-surface), 0 -1px 0 #f7fbff, inset 0 -1px 0 #d6e1ea;
    color: var(--table-v2-header-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
    vertical-align: bottom;
}

.table-v2 > thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--table-v2-radius);
}

.table-v2 > thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--table-v2-radius);
}

.table-v2 > tbody > tr {
    box-shadow: var(--table-v2-row-shadow);
    transition: transform 0.2s ease, box-shadow 0.18s ease-out;
}

.table-v2 > tbody > tr > td,
.table-v2 > tbody > tr > th {
    padding: 8px 10px;
    border: none;
    background-color: var(--table-v2-row-bg);
    vertical-align: middle;
}

.table-v2 > tbody > tr > td:first-child,
.table-v2 > tbody > tr > th:first-child {
    border-top-left-radius: var(--table-v2-radius);
    border-bottom-left-radius: var(--table-v2-radius);
}

.table-v2 > tbody > tr > td:last-child,
.table-v2 > tbody > tr > th:last-child {
    border-top-right-radius: var(--table-v2-radius);
    border-bottom-right-radius: var(--table-v2-radius);
}

.table-v2 > tbody > tr:hover {
    position: relative;
    z-index: 20;
    transform: translateY(-1px);
    box-shadow: var(--table-v2-row-hover-shadow);
}

.table-v2 > tbody > tr:hover > td,
.table-v2 > tbody > tr:hover > th {
    background-color: var(--table-v2-row-hover-bg);
}

.table-v2 > tbody > tr.selected > td,
.table-v2 > tbody > tr.selected > th,
.table-v2 > tbody > tr.selected:hover > td,
.table-v2 > tbody > tr.selected:hover > th {
    background-color: var(--table-v2-row-selected-bg);
}

.table-v2 > tbody > tr.table-v2-section-row,
.table-v2 > tbody > tr.table-v2-section-row:hover {
    transform: none;
    box-shadow: none;
}

.table-v2 > tbody > tr.table-v2-section-row > td,
.table-v2 > tbody > tr.table-v2-section-row > th,
.table-v2 > tbody > tr.table-v2-section-row:hover > td,
.table-v2 > tbody > tr.table-v2-section-row:hover > th {
    padding: 8px 10px;
    border: none;
    border-radius: var(--table-v2-radius);
    background: var(--table-v2-section-bg);
    color: var(--table-v2-section-text);
    font-weight: 700;
}

table.table.table-v2 th.sortable a,
table.table.table-v2 th.tablesorter-header:not(.sorter-false) .tablesorter-header-inner {
    color: var(--table-v2-header-text);
    text-decoration: none;
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active {
    background-color: var(--bs3-table-row-active-bg);
}

.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success {
    background-color: var(--bs3-context-success-bg);
    color: var(--bs3-context-success-text);
}

.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tbody > tr > td.info,
.table > tbody > tr > th.info {
    background-color: var(--bs3-context-info-bg);
    color: var(--bs3-context-info-text);
}

.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning {
    background-color: var(--bs3-context-warning-bg);
    color: var(--bs3-context-warning-text);
}

.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger {
    background-color: var(--bs3-context-danger-bg);
    color: var(--bs3-context-danger-text);
}

/* — Alerts ————————————————————————————————————————————————— */

.alert {
    --bs3-alert-tone-top:    var(--bs3-alert-default-top);
    --bs3-alert-tone-base:   var(--bs3-alert-default-base);
    --bs3-alert-tone-border: var(--bs3-alert-default-border);
    --bs3-alert-tone-text:   var(--bs3-alert-default-text);
    padding: var(--bs3-alert-padding-y) var(--bs3-alert-padding-x);
    border: var(--bs3-border-width) solid var(--bs3-alert-tone-border);
    border-radius: var(--bs3-alert-radius);
    background: linear-gradient(180deg, var(--bs3-alert-tone-top) 0%, var(--bs3-alert-tone-base) 100%);
    color: var(--bs3-alert-tone-text);
    box-shadow: var(--bs3-shadow-inset-top);
}

.alert-success {
    --bs3-alert-tone-top:    var(--bs3-alert-success-top);
    --bs3-alert-tone-base:   var(--bs3-alert-success-base);
    --bs3-alert-tone-border: var(--bs3-alert-success-border);
    --bs3-alert-tone-text:   var(--bs3-alert-success-text);
}

.alert-info {
    --bs3-alert-tone-top:    var(--bs3-alert-info-top);
    --bs3-alert-tone-base:   var(--bs3-alert-info-base);
    --bs3-alert-tone-border: var(--bs3-alert-info-border);
    --bs3-alert-tone-text:   var(--bs3-alert-info-text);
}

.alert-warning {
    --bs3-alert-tone-top:    var(--bs3-alert-warning-top);
    --bs3-alert-tone-base:   var(--bs3-alert-warning-base);
    --bs3-alert-tone-border: var(--bs3-alert-warning-border);
    --bs3-alert-tone-text:   var(--bs3-alert-warning-text);
}

.alert-danger {
    --bs3-alert-tone-top:    var(--bs3-alert-danger-top);
    --bs3-alert-tone-base:   var(--bs3-alert-danger-base);
    --bs3-alert-tone-border: var(--bs3-alert-danger-border);
    --bs3-alert-tone-text:   var(--bs3-alert-danger-text);
}

.alert a,
.alert .alert-link {
    color: inherit;
    font-weight: var(--bs3-font-weight-strong);
}

/* — Labels & badges ————————————————————————————————————————— */

.label {
    display: inline;
    padding: var(--bs3-label-padding-y) var(--bs3-label-padding-x);
    border-radius: var(--bs3-label-radius);
    color: var(--bs3-label-text);
    font-weight: var(--bs3-font-weight-strong);
}

.label-default { background-color: var(--bs3-label-default-bg); }
.label-primary { background-color: var(--bs3-label-primary-bg); }
.label-success { background-color: var(--bs3-label-success-bg); }
.label-info    { background-color: var(--bs3-label-info-bg);    }
.label-warning { background-color: var(--bs3-label-warning-bg); }
.label-danger  { background-color: var(--bs3-label-danger-bg);  }

.badge {
    min-width: var(--bs3-badge-min-width);
    padding: var(--bs3-badge-padding-y) var(--bs3-badge-padding-x);
    font-weight: var(--bs3-font-weight-strong);
    color: var(--bs3-badge-text);
    background-color: var(--bs3-badge-bg);
    border-radius: var(--bs3-radius-pill);
}

a.badge:hover,
a.badge:focus {
    color: var(--bs3-badge-active-text);
    background-color: var(--bs3-badge-active-bg);
}

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
    color: var(--bs3-badge-active-bg);
    background-color: var(--bs3-badge-active-text);
}

/* — Progress ——————————————————————————————————————————————— */

.progress {
    height: var(--bs3-progress-height);
    background-color: var(--bs3-progress-bg);
    border: var(--bs3-border-width) solid var(--bs3-progress-border);
    border-radius: var(--bs3-progress-radius);
    box-shadow: var(--bs3-progress-track-shadow);
    overflow: hidden;
}

.progress-bar {
    --bs3-progress-tone-top:  var(--bs3-progress-bar-top);
    --bs3-progress-tone-base: var(--bs3-progress-bar-base);
    background: linear-gradient(180deg, var(--bs3-progress-tone-top) 0%, var(--bs3-progress-tone-base) 100%);
    color: var(--bs3-progress-bar-text);
}

.progress-bar-success {
    --bs3-progress-tone-top:  var(--bs3-btn-success-top);
    --bs3-progress-tone-base: var(--bs3-btn-success-base);
}

.progress-bar-info {
    --bs3-progress-tone-top:  var(--bs3-btn-info-top);
    --bs3-progress-tone-base: var(--bs3-btn-info-base);
}

.progress-bar-warning {
    --bs3-progress-tone-top:  var(--bs3-btn-warning-top);
    --bs3-progress-tone-base: var(--bs3-btn-warning-base);
}

.progress-bar-danger {
    --bs3-progress-tone-top:  var(--bs3-btn-danger-top);
    --bs3-progress-tone-base: var(--bs3-btn-danger-base);
}

.progress-striped .progress-bar,
.progress-bar-striped {
    background-image:
        linear-gradient(
            45deg,
            var(--bs3-progress-stripe-color) 25%,
            transparent 25%,
            transparent 50%,
            var(--bs3-progress-stripe-color) 50%,
            var(--bs3-progress-stripe-color) 75%,
            transparent 75%,
            transparent
        ),
        linear-gradient(180deg, var(--bs3-progress-tone-top) 0%, var(--bs3-progress-tone-base) 100%);
}

/* — Pagination ————————————————————————————————————————————— */

.pagination > li > a,
.pagination > li > span {
    position: static;
    top: auto;
    font-size: var(--bs3-font-size-base);
    font-weight: var(--bs3-font-weight-strong);
    text-transform: none;
    color: var(--bs3-pagination-text);
    background-color: var(--bs3-pagination-bg);
    border: var(--bs3-border-width) solid var(--bs3-pagination-border);
    transition: background-color var(--bs3-transition-fast), color var(--bs3-transition-fast), border-color var(--bs3-transition-fast);
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > li > a:active,
.pagination > li > span:active {
    top: auto;
    border-width: var(--bs3-border-width);
    color: var(--bs3-pagination-hover-text);
    background-color: var(--bs3-pagination-hover-bg);
    border-color: var(--bs3-pagination-border);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    top: auto;
    border-width: var(--bs3-border-width);
    color: var(--bs3-pagination-active-text);
    border-color: var(--bs3-pagination-active-border);
    background: linear-gradient(180deg, var(--bs3-pagination-active-top) 0%, var(--bs3-pagination-active-base) 100%);
}

.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover,
.pagination > .disabled > span:hover,
.pagination > .disabled > a:focus,
.pagination > .disabled > span:focus {
    top: auto;
    border-width: var(--bs3-border-width);
    color: var(--bs3-text-muted);
    background-color: var(--bs3-surface-bg-soft);
    border-color: var(--bs3-pagination-border);
}

.pager li > a,
.pager li > span {
    position: static;
    top: auto;
    font-size: var(--bs3-font-size-base);
    font-weight: var(--bs3-font-weight-strong);
    text-transform: none;
    color: var(--bs3-pager-text);
    background-color: var(--bs3-pager-bg);
    border: var(--bs3-border-width) solid var(--bs3-pager-border);
    border-radius: var(--bs3-radius-pill);
    transition: background-color var(--bs3-transition-fast), color var(--bs3-transition-fast), border-color var(--bs3-transition-fast);
}

.pager li > a:hover,
.pager li > a:focus,
.pager li > a:active {
    top: auto;
    border-width: var(--bs3-border-width);
    color: var(--bs3-pager-hover-text);
    background-color: var(--bs3-pager-hover-bg);
    border-color: var(--bs3-pager-border);
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
    top: auto;
    border-width: var(--bs3-border-width);
    color: var(--bs3-pager-disabled-text);
    background-color: var(--bs3-pager-disabled-bg);
    border-color: var(--bs3-pager-border);
}

/* — List groups ————————————————————————————————————————————— */

.list-group-item {
    color: var(--bs3-list-group-text);
    background-color: var(--bs3-list-group-bg);
    border: var(--bs3-border-width) solid var(--bs3-list-group-border);
    transition: background-color var(--bs3-transition-fast), color var(--bs3-transition-fast), border-color var(--bs3-transition-fast);
}

a.list-group-item,
button.list-group-item {
    color: var(--bs3-list-group-text);
}

a.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:hover,
button.list-group-item:focus {
    color: var(--bs3-list-group-text);
    background-color: var(--bs3-list-group-hover-bg);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    color: var(--bs3-list-group-active-text);
    border-color: var(--bs3-list-group-active-border);
    background: linear-gradient(180deg, var(--bs3-list-group-active-top) 0%, var(--bs3-list-group-active-base) 100%);
}

.list-group-item-success {
    color: var(--bs3-context-success-text);
    background-color: var(--bs3-context-success-bg);
    border-color: var(--bs3-context-success-border);
}

.list-group-item-info {
    color: var(--bs3-context-info-text);
    background-color: var(--bs3-context-info-bg);
    border-color: var(--bs3-context-info-border);
}

.list-group-item-warning {
    color: var(--bs3-context-warning-text);
    background-color: var(--bs3-context-warning-bg);
    border-color: var(--bs3-context-warning-border);
}

.list-group-item-danger {
    color: var(--bs3-context-danger-text);
    background-color: var(--bs3-context-danger-bg);
    border-color: var(--bs3-context-danger-border);
}

/* — Modals ————————————————————————————————————————————————— */

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -20%);
    -ms-transform: translate(0, -20%);
    -o-transform: translate(0, -20%);
    transform: translate(0, -20%);
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: -o-transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal {
    scrollbar-gutter: stable;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}

.modal-dialog {
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    min-height: 0;
    pointer-events: none;
}

.modal-content {
    background-color: var(--bs3-modal-bg);
    border: var(--bs3-border-width) solid var(--bs3-modal-border);
    border-radius: var(--bs3-modal-radius);
    box-shadow: var(--bs3-modal-shadow);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    pointer-events: auto;
}

.modal-content > form,
#modal_add_vacation_content,
#modal_add_repeating_content,
#modal_add_vacation_content > form,
#modal_add_repeating_content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.modal-header {
    border-bottom: var(--bs3-border-width) solid var(--bs3-modal-divider);
    background: linear-gradient(180deg, var(--bs3-modal-head-top) 0%, var(--bs3-modal-head-base) 100%);
    color: var(--bs3-modal-head-text);
    flex: 0 0 auto;
}

.modal-title {
    color: inherit;
    font-weight: var(--bs3-font-weight-strong);
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-footer {
    border-top: var(--bs3-border-width) solid var(--bs3-modal-divider);
    background: var(--bs3-surface-bg-soft);
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .modal-dialog {
        height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
    }
}

.modal-backdrop {
    background-color: var(--bs3-modal-backdrop);
}

.modal-backdrop.in {
    opacity: var(--bs3-modal-backdrop-opacity);
}

/* — Tooltips & popovers ————————————————————————————————————— */

.tooltip-inner {
    color: var(--bs3-tooltip-text);
    background-color: var(--bs3-tooltip-bg);
    border-radius: var(--bs3-tooltip-radius);
}

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow    { border-top-color:    var(--bs3-tooltip-bg); }
.tooltip.right .tooltip-arrow        { border-right-color:  var(--bs3-tooltip-bg); }
.tooltip.left .tooltip-arrow         { border-left-color:   var(--bs3-tooltip-bg); }
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--bs3-tooltip-bg); }

.popover {
    background-color: var(--bs3-popover-bg);
    border: var(--bs3-border-width) solid var(--bs3-popover-border);
    border-radius: var(--bs3-popover-radius);
    box-shadow: var(--bs3-popover-shadow);
}

.popover-title {
    color: var(--bs3-popover-title-text);
    background-color: var(--bs3-popover-title-bg);
    border-bottom: var(--bs3-border-width) solid var(--bs3-popover-title-border);
}

.popover.top    > .arrow        { border-top-color:    var(--bs3-popover-border); }
.popover.top    > .arrow:after  { border-top-color:    var(--bs3-popover-bg);     }
.popover.right  > .arrow        { border-right-color:  var(--bs3-popover-border); }
.popover.right  > .arrow:after  { border-right-color:  var(--bs3-popover-bg);     }
.popover.bottom > .arrow        { border-bottom-color: var(--bs3-popover-border); }
.popover.bottom > .arrow:after  { border-bottom-color: var(--bs3-popover-bg);     }
.popover.left   > .arrow        { border-left-color:   var(--bs3-popover-border); }
.popover.left   > .arrow:after  { border-left-color:   var(--bs3-popover-bg);     }

/* — Wells, thumbnails, breadcrumb, jumbotron, close ————————— */

.well {
    background-color: var(--bs3-well-bg);
    border: var(--bs3-border-width) solid var(--bs3-well-border);
    border-radius: var(--bs3-radius-sm);
    box-shadow: var(--bs3-shadow-inset-top);
}

.thumbnail {
    background-color: var(--bs3-thumbnail-bg);
    border: var(--bs3-border-width) solid var(--bs3-thumbnail-border);
    border-radius: var(--bs3-radius-sm);
    box-shadow: var(--bs3-thumbnail-shadow);
    transition: border-color var(--bs3-transition-fast), box-shadow var(--bs3-transition-fast);
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
    border-color: var(--bs3-focus-border);
    box-shadow: var(--bs3-shadow-raised);
}

.breadcrumb {
    background-color: var(--bs3-breadcrumb-bg);
    border: var(--bs3-border-width) solid var(--bs3-breadcrumb-border);
    border-radius: var(--bs3-radius-sm);
}

.breadcrumb > li,
.breadcrumb > li + li:before {
    color: var(--bs3-breadcrumb-text);
}

.breadcrumb > .active {
    color: var(--bs3-breadcrumb-active);
}

.jumbotron {
    background: linear-gradient(180deg, var(--bs3-jumbotron-top) 0%, var(--bs3-jumbotron-base) 100%);
    border: var(--bs3-border-width) solid var(--bs3-jumbotron-border);
    color: var(--bs3-jumbotron-text);
    border-radius: var(--bs3-radius-lg);
    box-shadow: var(--bs3-shadow-soft);
}

.close {
    color: var(--bs3-close-color);
    text-shadow: none;
    opacity: var(--bs3-close-opacity);
    transition: color var(--bs3-transition-fast), opacity var(--bs3-transition-fast);
}

.close:hover,
.close:focus {
    color: var(--bs3-close-hover-color);
    opacity: var(--bs3-close-hover-opacity);
}

/* ============================================================
   06 – CUSTOM UI  — project-specific pressable components
   ============================================================ */

.ui-pressable,
.receipt-btn,
.legend-status-btn {
    border: 1px solid var(--ui-press-border);
    background: var(--ui-press-bg);
    color: var(--ui-press-text);
    -webkit-appearance: none;
    appearance: none;
    background-origin: border-box;
    background-clip: border-box;
    cursor: pointer;
    box-shadow: var(--ui-press-shadow);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        filter 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
    touch-action: manipulation;
}

.ui-pressable:hover,
.receipt-btn:hover,
.legend-status-btn:hover {
    transform: translateY(-1px);
    border-color: var(--ui-press-hover-border);
    filter: saturate(1.1) brightness(1.03) contrast(1.01);
    box-shadow: var(--ui-press-hover-shadow);
}

.ui-pressable:active,
.receipt-btn:active,
.legend-status-btn:active {
    transform: translateY(1px);
    filter: none;
    box-shadow: var(--ui-press-active-shadow);
}

.ui-pressable:focus-visible,
.receipt-btn:focus-visible,
.legend-status-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-press-focus-ring);
}

.ui-radius-pill,
.receipt-btn,
.legend-status-btn,
.ui-status-pill,
.eigener-status-pill,
.ui-status-badge,
.legend-status-badge,
.ui-status-chip,
.receipts-date-state {
    border-radius: var(--ui-radius-pill);
}

.ui-radius-label {
    border-radius: var(--ui-radius-label);
}

/* Reusable pressable size/layout variants. */
.ui-pressable--icon,
.receipt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex: 1;
    max-width: 36px;
    height: 26px;
}

.ui-pressable--status,
.legend-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    padding: 3px 9px;
    min-width: 76px;
    min-height: 24px;
}

.ui-pressable__icon,
.legend-status-btn .glyphicon {
    display: inline-block;
    line-height: 1;
    font-size: 12px;
    vertical-align: middle;
}

.ui-pressable__text,
.legend-status-btn .legend-status-btn-text {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

/* Reusable focus variant for compact status buttons. */
.ui-pressable--focus-tight:focus-visible,
.legend-status-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(61, 122, 169, 0.24);
}

.ui-pressable--focus-tight:focus:not(:focus-visible),
.legend-status-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Reusable status button size variants. */
.ui-pressable--status-category,
.legend-status-btn.is-category {
    padding: 3px 8px;
}

.ui-pressable--status-compact,
.legend-status-btn.is-task,
.legend-status-btn.is-day {
    height: 20px;
    min-height: 20px;
    padding: 1px 7px;
}

/* Reusable non-interactive status badge component. */
.ui-status-badge,
.legend-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border: 1px solid transparent;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ui-status-badge--open,
.legend-status-badge.open {
    background: var(--progress-planned-gradient);
    border-color: var(--progress-planned-indicator-border);
    color: var(--progress-planned-label-text);
}

.ui-status-badge--done,
.legend-status-badge.done {
    background: var(--progress-done-gradient);
    border-color: var(--progress-done-indicator-border);
    color: var(--state-done-text);
}

.ui-status-badge--mixed,
.legend-status-badge.mixed {
    background: linear-gradient(180deg, var(--state-outstanding-top) 0%, var(--state-outstanding-base) 100%);
    border-color: var(--state-outstanding-border);
    color: var(--state-outstanding-text);
}

.ui-status-badge--none,
.legend-status-badge.none {
    background: linear-gradient(180deg, var(--state-skipped-top) 0%, var(--state-skipped-base) 100%);
    border-color: var(--state-skipped-border);
    color: var(--state-skipped-text);
}

/* Reusable status-pill component for compact state indicators. */
.ui-status-pill,
.eigener-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    max-width: 112px;
    padding: 3px 8px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    margin: 0;
    white-space: nowrap;
}

.ui-status-pill.is-hidden,
.eigener-status-pill.is-hidden {
    display: none;
}

.ui-status-pill__icon,
.eigener-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ui-status-pill__icon .glyphicon,
.eigener-status-icon .glyphicon {
    top: 0;
    line-height: 1;
    font-size: 11px;
}

.ui-status-pill__label,
.eigener-status-label {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-status-pill--tone-active,
.eigener-status-pill.is-active,
.eigener-status-pill.is-working,
.eigener-status-pill.is-ready {
    --ui-status-pill-top: var(--state-active-top, #d7e8f9);
    --ui-status-pill-base: var(--state-active-base, #9ec3e9);
    --ui-status-pill-border: var(--state-active-border, #4a80b3);
    --ui-status-pill-text: var(--state-active-text, #21496f);
}

.ui-status-pill--tone-missing {
    --ui-status-pill-top: var(--state-missing-top, #f9dad6);
    --ui-status-pill-base: var(--state-missing-base, #efb6af);
    --ui-status-pill-border: var(--state-missing-border, #d99289);
    --ui-status-pill-text: var(--state-missing-text, #7f3a34);
}

.eigener-status-pill.is-missing {
    --ui-status-pill-top: var(--state-upcoming-top, #f6f4f1);
    --ui-status-pill-base: var(--state-upcoming-base, #e5e1dc);
    --ui-status-pill-border: var(--state-upcoming-border, #bdb7af);
    --ui-status-pill-text: var(--state-upcoming-text, #5e5953);
}

.ui-status-pill--tone-waiting,
.eigener-status-pill.is-waiting {
    --ui-status-pill-top: var(--state-waiting-top, #fff3cf);
    --ui-status-pill-base: var(--state-waiting-base, #f4dd9a);
    --ui-status-pill-border: var(--state-waiting-border, #c8a95b);
    --ui-status-pill-text: var(--state-waiting-text, #6a5322);
}

.ui-status-pill--tone-done,
.eigener-status-pill.is-done,
.eigener-status-pill.is-deadline-ok {
    --ui-status-pill-top: var(--state-done-top, #d8efde);
    --ui-status-pill-base: var(--state-done-base, #a8d4b2);
    --ui-status-pill-border: var(--state-done-border, #5e9a6a);
    --ui-status-pill-text: var(--state-done-text, #245533);
}

.ui-status-pill--tone-skipped,
.eigener-status-pill.is-skipped,
.eigener-status-pill.is-none,
.eigener-status-pill.is-deadline-none {
    --ui-status-pill-top: var(--state-skipped-top, #eef2f5);
    --ui-status-pill-base: var(--state-skipped-base, #d8e0e6);
    --ui-status-pill-border: var(--state-skipped-border, #9caeb8);
    --ui-status-pill-text: var(--state-skipped-text, #4a5b66);
}

.ui-status-pill--tone-delayed,
.eigener-status-pill.is-deadline-delayed {
    --ui-status-pill-top: var(--state-delayed-top, #fff0d6);
    --ui-status-pill-base: var(--state-delayed-base, #f3c889);
    --ui-status-pill-border: var(--state-delayed-border, #cc9c51);
    --ui-status-pill-text: var(--state-delayed-text, #6e4a20);
}

.ui-status-pill--tone-outstanding,
.eigener-status-pill.is-deadline-outstanding {
    --ui-status-pill-top: var(--state-outstanding-top, #ffe9ba);
    --ui-status-pill-base: var(--state-outstanding-base, #f6c96b);
    --ui-status-pill-border: var(--state-outstanding-border, #c99533);
    --ui-status-pill-text: var(--state-outstanding-text, #6c4a11);
}

.ui-status-pill--tone-overdue,
.eigener-status-pill.is-deadline-overdue {
    --ui-status-pill-top: var(--state-overdue-top, #f8cec8);
    --ui-status-pill-base: var(--state-overdue-base, #e98f82);
    --ui-status-pill-border: var(--state-overdue-border, #c8675b);
    --ui-status-pill-text: var(--state-overdue-text, #65231f);
}

.ui-status-pill--semantic,
.eigener-status-pill.is-active,
.eigener-status-pill.is-working,
.eigener-status-pill.is-ready,
.eigener-status-pill.is-missing,
.eigener-status-pill.is-waiting,
.eigener-status-pill.is-done,
.eigener-status-pill.is-skipped,
.eigener-status-pill.is-none,
.eigener-status-pill.is-deadline-delayed,
.eigener-status-pill.is-deadline-outstanding,
.eigener-status-pill.is-deadline-overdue,
.eigener-status-pill.is-deadline-ok,
.eigener-status-pill.is-deadline-none {
    background: linear-gradient(180deg, var(--ui-status-pill-top) 0%, var(--ui-status-pill-base) 100%);
    border-color: var(--ui-status-pill-border);
    color: var(--ui-status-pill-text);
}

/* Reusable compact status chip used by date/status labels. */
.ui-status-chip,
.receipts-date-state {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.ui-status-chip--overdue,
.receipts-date-state.is-overdue {
    background: linear-gradient(180deg, var(--state-overdue-top) 0%, var(--state-overdue-base) 100%);
    color: var(--state-overdue-text);
    border: 1px solid var(--state-overdue-border);
}

/* Shared receipts controls used across non-receipts views (dash, plan, times). */
.receipts-filter-host {
    margin-bottom: 10px;
}

/* Shared page head composition for all filter-based pages:
   leading unit (title + action buttons) + controls unit (filters). */
.filter-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 18px;
    justify-content: flex-start;
    padding-top: 8px;
    padding-bottom: 6px;
    width: 100%;
}

.filter-head-leading {
    flex: 0 1 auto;
    min-width: 180px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-head-leading > header {
    margin: 0;
}

.filter-head-leading h1 {
    margin: 0;
    font-size: clamp(24px, 1.85vw, 32px);
    line-height: 1.05;
}

.filter-head-leading .filter-header-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

.filter-head-leading .filter-header-title {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.filter-head-leading .filter-header-title .icon {
    margin-right: 0;
}

.filter-head-controls {
    flex: 1 1 540px;
    min-width: 260px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    width: auto;
    max-width: 100%;
}

.filter-head-controls > [class*="col-"] {
    float: none;
    margin-left: 0 !important;
}

.filter-head-controls > .receipts-filter-host,
.filter-head-controls > .dash-filter-host,
.filter-head-controls > .plan-row2-layout,
.filter-head-controls > .dash-row2-layout {
    flex: 1 1 520px;
    width: auto;
    max-width: 100%;
    min-width: 280px;
    margin: 0;
    padding: 0;
}

.filter-head-controls > .receipts-filter-summary-host,
.filter-head-controls > .filter-summary-row {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.filter-head-controls .plan-row2-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 16px;
    margin-top: 0;
}

.filter-head-controls .plan-row2-right {
    flex: 1 1 520px;
    min-width: 280px;
    padding-bottom: 0;
}

@media (min-width: 992px) {
    /* Wide pages: center title + controls as one content-sized unit.
       This avoids large empty space inside the controls block when filters are compact. */
    .filter-page--wide .filter-head-row {
        justify-content: center;
    }

    .filter-page--wide .filter-head-controls {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .filter-page--wide .filter-head-controls > .receipts-filter-host,
    .filter-page--wide .filter-head-controls > .dash-filter-host,
    .filter-page--wide .filter-head-controls > .plan-row2-layout,
    .filter-page--wide .filter-head-controls > .dash-row2-layout {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }
}

/* Shared hover menus for filter-header extra action buttons. */
.filter-header-action-row {
    --filter-header-action-menu-right: 0px;
    --filter-header-action-menu-overlap: 19px;
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
    position: relative;
    z-index: 450;
    overflow: visible;
}

.filter-header-action-row > .btn,
.filter-header-action-row > .btn-group,
.filter-header-action-row > .filter-header-core-extra-cluster,
.filter-header-action-row > .filter-header-plan-menu-cluster {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
}

.filter-header-action-row > .btn:not(:first-child),
.filter-header-action-row > .btn-group:not(:first-child),
.filter-header-action-row > .filter-header-core-extra-cluster:not(:first-child),
.filter-header-action-row > .filter-header-plan-menu-cluster:not(:first-child) {
    margin-left: 8px;
}

.filter-header-core-extra-cluster,
.filter-header-plan-menu-cluster {
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
    position: relative;
    overflow: visible;
}

.filter-header-core-extra-cluster > .btn-group,
.filter-header-plan-menu-cluster > .btn-group {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
}

.filter-header-extra-trigger-group {
    position: relative;
    overflow: visible;
}

.filter-header-core-action-group--paired-start + .filter-header-extra-trigger-group--paired-end,
.filter-header-plan-menu-cluster > .plan-header-add-group + .filter-header-extra-trigger-group--paired-end {
    margin-left: 0;
}

.filter-header-core-action-group--paired-start > .btn:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.filter-header-extra-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--bs3-btn-border-radius, 999px);
    position: relative;
    z-index: 3;
}

.filter-header-core-action-group--paired-start + .filter-header-extra-trigger-group--paired-end .filter-header-extra-trigger,
.filter-header-plan-menu-cluster > .plan-header-add-group + .filter-header-extra-trigger-group--paired-end .filter-header-extra-trigger {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs3-btn-border-radius, 999px) !important;
    border-bottom-right-radius: var(--bs3-btn-border-radius, 999px) !important;
}

.filter-header-extra-trigger .glyphicon-chevron-down {
    top: 0;
    flex: 0 0 auto;
    font-size: 10px;
    opacity: 0.78;
    transition: transform 0.16s ease, opacity 0.16s ease;
    transform-origin: 50% 45%;
}

.filter-header-extra-trigger-group:hover .filter-header-extra-trigger .glyphicon-chevron-down,
.filter-header-extra-trigger-group.is-open .filter-header-extra-trigger .glyphicon-chevron-down,
.filter-header-extra-trigger-group:has(> .filter-header-extra-menu:hover) .filter-header-extra-trigger .glyphicon-chevron-down,
.filter-header-core-extra-cluster:has(> .filter-header-extra-menu:hover) > .filter-header-extra-trigger-group > .filter-header-extra-trigger .glyphicon-chevron-down,
.filter-header-plan-menu-cluster:has(> .filter-header-extra-menu:hover) > .filter-header-extra-trigger-group > .filter-header-extra-trigger .glyphicon-chevron-down {
    transform: rotate(180deg);
    opacity: 0.95;
}

.filter-header-extra-trigger-group:hover .filter-header-extra-trigger,
.filter-header-extra-trigger-group.is-open .filter-header-extra-trigger,
.plan-header-add-group.is-open .plan-header-add-trigger,
.filter-header-extra-trigger-group:has(> .filter-header-extra-menu:hover) .filter-header-extra-trigger,
.filter-header-core-extra-cluster:has(> .filter-header-extra-menu:hover) > .filter-header-extra-trigger-group > .filter-header-extra-trigger,
.filter-header-plan-menu-cluster:has(> .filter-header-extra-menu:hover) > .filter-header-extra-trigger-group > .filter-header-extra-trigger,
.filter-header-plan-menu-cluster:has(> .plan-header-add-menu:hover) > .plan-header-add-group > .plan-header-add-trigger {
    transform: translateY(1px);
    filter: none;
    box-shadow: var(--ui-press-active-shadow, 0 1px 0 rgba(94, 126, 148, 0.5), 0 2px 4px rgba(34, 62, 82, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7));
}

.filter-header-search-group {
    margin-left: 8px;
}

.filter-header-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 33px;
    min-height: 33px;
    padding-left: 0;
    padding-right: 0;
    border-radius: var(--bs3-btn-border-radius, 999px) !important;
}

.filter-header-search-button .glyphicon {
    top: 0;
}

.filter-header-action-menu {
    --receipts-toolbar-shell-border: #c7d6e3;
    --receipts-toolbar-shell-text: #2a465d;
    --receipts-toolbar-menu-bg: #ffffff;
    position: absolute;
    left: 0;
    right: var(--filter-header-action-menu-right, 0px);
    top: calc(100% - var(--filter-header-action-menu-overlap, 19px));
    bottom: auto;
    display: none;
    float: none;
    width: auto;
    min-width: 100%;
    max-height: min(360px, 62vh);
    margin: 0;
    padding: calc(var(--filter-header-action-menu-overlap, 19px) + 6px) 6px 6px;
    z-index: 1;
    transform: none;
    overflow-y: auto;
    border: 1px solid var(--receipts-toolbar-shell-border);
    border-radius: 10px;
    background: var(--receipts-toolbar-menu-bg);
    color: var(--receipts-toolbar-shell-text);
    background-clip: padding-box;
    box-shadow: 0 14px 26px -10px rgba(23, 48, 66, 0.32), 0 5px 10px rgba(23, 48, 66, 0.14);
}

.filter-header-core-extra-cluster > .filter-header-action-menu,
.filter-header-core-extra-cluster > .filter-header-extra-trigger-group > .filter-header-action-menu,
.filter-header-extra-trigger-group > .filter-header-action-menu,
.filter-header-plan-menu-cluster > .filter-header-action-menu {
    left: 0;
    right: 0;
}

.filter-header-extra-trigger-group:hover > .filter-header-extra-menu,
.filter-header-extra-trigger-group.is-open > .filter-header-extra-menu,
.filter-header-extra-trigger-group:hover ~ .filter-header-extra-menu,
.filter-header-extra-trigger-group.is-open ~ .filter-header-extra-menu,
.filter-header-extra-menu:hover,
.plan-header-add-group.is-open ~ .plan-header-add-menu,
.plan-header-add-menu:hover {
    display: block;
}

.filter-header-action-menu > li + li {
    margin-top: 1px;
}

.filter-header-action-menu > li.filter-header-action-menu-priority {
    position: relative;
}

.filter-header-action-menu > li.filter-header-action-menu-priority + li.filter-header-action-menu-priority {
    margin-top: 0;
}

.filter-header-action-menu > li.filter-header-action-menu-priority::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    z-index: 2;
    width: 3px;
    background: #2f8fd0;
    opacity: 0.96;
}

.filter-header-action-menu > li.filter-header-action-menu-priority:first-child::before,
.filter-header-action-menu > li.filter-header-action-menu-priority--first::before {
    top: 6px;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
}

.filter-header-action-menu > li.filter-header-action-menu-priority:last-child::before,
.filter-header-action-menu > li.filter-header-action-menu-priority--last::before {
    bottom: 6px;
    border-bottom-left-radius: 999px;
    border-bottom-right-radius: 999px;
}

.filter-header-action-menu > li.divider {
    height: 1px;
    margin: 7px 4px;
    overflow: hidden;
    background-color: #d8e4ee;
}

.filter-header-action-menu > li.filter-header-menu-caption {
    padding: 7px 10px 3px;
    color: rgba(47, 76, 101, 0.74);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.filter-header-action-menu > li > a,
.filter-header-action-menu > li > button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    color: #2a465d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    text-transform: none;
    text-shadow: none;
    background: #ffffff;
    box-shadow: none;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
    outline: none;
}

.filter-header-action-menu > li > a:hover,
.filter-header-action-menu > li > a:focus,
.filter-header-action-menu > li > button:hover,
.filter-header-action-menu > li > button:focus {
    transform: none;
    color: #204960;
    text-decoration: none;
    background: #f4f8fc;
    box-shadow: none;
}

.filter-header-action-menu > li > a:active,
.filter-header-action-menu > li > button:active {
    transform: translateY(1px);
}

.filter-header-action-menu > li > a > .glyphicon,
.filter-header-action-menu > li > button > .glyphicon {
    color: #6f8799;
    top: 0;
    flex: 0 0 18px;
    width: 18px;
    margin-right: 0;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    transition: color 0.14s ease, transform 0.14s ease;
}

.filter-header-action-menu > li.filter-header-action-menu-priority > a,
.filter-header-action-menu > li.filter-header-action-menu-priority > button {
    z-index: 1;
    padding-left: 14px;
}

.filter-header-action-menu > li.filter-header-action-menu-priority > a > .glyphicon,
.filter-header-action-menu > li.filter-header-action-menu-priority > button > .glyphicon {
    color: #2f8fd0;
}

.filter-header-action-menu > li.filter-header-action-menu-priority > a:hover > .glyphicon,
.filter-header-action-menu > li.filter-header-action-menu-priority > a:focus > .glyphicon,
.filter-header-action-menu > li.filter-header-action-menu-priority > button:hover > .glyphicon,
.filter-header-action-menu > li.filter-header-action-menu-priority > button:focus > .glyphicon {
    color: #1474b2;
}

@media (max-width: 767px) {
    .filter-header-action-menu {
        max-height: min(320px, 58vh);
    }

}

/* Dash controller styles use ID selectors; keep shared wrapping behavior stronger. */
:is(#page-dash, .help-production-dash) .filter-head-controls .dash-row2-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
    margin-top: 0;
}

:is(#page-dash, .help-production-dash) .filter-head-controls .dash-row2-left {
    flex: 0 1 auto;
}

:is(#page-dash, .help-production-dash) .filter-head-controls .dash-row2-right {
    flex: 1 1 520px;
    min-width: 280px;
    padding-bottom: 0;
}

/* Keep dash tabs visually attached to the sticky divider line. */
:is(#page-dash, .help-production-dash).filter-page--page-scroll .filter-head-row {
    padding-bottom: 0;
}

/* Match the 260px floor of inline-styled date pickers so all three-column toolbars render
   at the same natural width regardless of whether their content contains date pickers. */
:is(#page-dash, .help-production-dash) .receipts-filter-toolbar {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
}

:is(#page-dash, .help-production-dash) .dash-filter-toolbar {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
}

@media (min-width: 992px) {
    :is(#page-dash, .help-production-dash) .filter-head-controls {
        flex: 0 0 804px;
        width: 804px;
        max-width: 100%;
    }
    :is(#page-dash, .help-production-dash) .filter-head-controls > .receipts-filter-host,
    :is(#page-dash, .help-production-dash) .filter-head-controls > .dash-filter-host {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

.receipts-filter-form {
    width: 100%;
    position: relative;
}

.receipts-filter-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
}

.receipts-toolbar-item {
    min-width: 0;
    position: relative;
}

/* Login_times: keep filter row compact like legacy layout. */
#page-times .times-filter-host,
:is(#page-punchclock, .help-production-punchclock) .times-filter-host {
    margin-bottom: 0;
    padding-right: 0;
}

#page-times .times-filter-toolbar,
:is(#page-punchclock, .help-production-punchclock) .times-filter-toolbar {
    grid-template-columns: max-content minmax(0, 4fr) minmax(0, 3fr);
    gap: 12px;
    align-items: center;
}

#page-times .times-filter-toolbar.times-filter-toolbar-date-only,
:is(#page-punchclock, .help-production-punchclock) .times-filter-toolbar.times-filter-toolbar-date-only {
    grid-template-columns: max-content minmax(0, 3fr);
}

#page-times .times-filter-toolbar.times-filter-toolbar-no-view,
:is(#page-punchclock, .help-production-punchclock) .times-filter-toolbar.times-filter-toolbar-no-view {
    grid-template-columns: minmax(0, 380px) minmax(0, 320px);
}

#page-times .times-filter-toolbar.times-filter-toolbar-no-view.times-filter-toolbar-date-only,
:is(#page-punchclock, .help-production-punchclock) .times-filter-toolbar.times-filter-toolbar-no-view.times-filter-toolbar-date-only {
    grid-template-columns: minmax(0, 320px);
}

#page-times .times-filter-item-view,
:is(#page-punchclock, .help-production-punchclock) .times-filter-item-view {
    width: 220px;
    max-width: none;
    justify-self: start;
}

#page-times #times-view-mode-dropdown,
:is(#page-punchclock, .help-production-punchclock) #times-view-mode-dropdown {
    width: 100%;
}

#page-times #times-view-mode-menu,
:is(#page-punchclock, .help-production-punchclock) #times-view-mode-menu {
    right: 5px;
    left: 5px;
}

#page-times .times-filter-item-staff,
:is(#page-punchclock, .help-production-punchclock) .times-filter-item-staff {
    max-width: 380px;
}

#page-times .times-filter-item-date,
:is(#page-punchclock, .help-production-punchclock) .times-filter-item-date {
    max-width: 320px;
}

#page-times #times-filter-date-nav,
:is(#page-punchclock, .help-production-punchclock) #times-filter-date-nav {
    width: 100%;
}

/* Login_workplace_booking: mirror the compact Login_times filter header. */
:is(#page-workplace_booking, .help-production-workplace-booking) .workplace-booking-filter-host {
    margin-bottom: 0;
    padding-right: 0;
}

:is(#page-workplace_booking, .help-production-workplace-booking) .workplace-booking-filter-toolbar {
    grid-template-columns: minmax(0, 380px) minmax(0, 320px);
    gap: 12px;
    align-items: center;
}

:is(#page-workplace_booking, .help-production-workplace-booking) .workplace-booking-filter-item-workplace {
    max-width: 380px;
}

:is(#page-workplace_booking, .help-production-workplace-booking) .workplace-booking-filter-item-date {
    max-width: 320px;
}

:is(#page-workplace_booking, .help-production-workplace-booking) #filterworkplace-modal-dropdown,
:is(#page-workplace_booking, .help-production-workplace-booking) #workplace-booking-filter-date-nav {
    width: 100%;
}

:is(#page-workplace_booking, .help-production-workplace-booking) #filterworkplace-modal-dropdown.is-open > .receipts-pill-control {
    z-index: 1222;
}

#filterworkplace-menu.receipts-toolbar-dropdown-menu-portal {
    z-index: 1221;
}

/* Keep the active staff pill above its portaled menu without lifting the field container over it. */
#page-times #filterstaff-modal-dropdown.is-open > .receipts-pill-control,
:is(#page-punchclock, .help-production-punchclock) #filterstaff-modal-dropdown.is-open > .receipts-pill-control {
    z-index: 1222;
}

#filterstaff-menu.receipts-toolbar-dropdown-menu-portal:not([data-filter-modal-dropdown-menu="1"]) {
    z-index: 1221;
}

@media (max-width: 991px) {
    .filter-head-leading,
    .filter-head-controls {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .filter-head-controls > .receipts-filter-host,
    .filter-head-controls > .dash-filter-host,
    .filter-head-controls > .plan-row2-layout,
    .filter-head-controls > .dash-row2-layout {
        min-width: 0;
        flex-basis: 100%;
    }

    .filter-head-controls .plan-row2-right {
        min-width: 0;
        flex-basis: 100%;
    }
}

@media (max-width: 767px) {

    #page-times .times-filter-toolbar,
    :is(#page-punchclock, .help-production-punchclock) .times-filter-toolbar {
        grid-template-columns: 1fr;
    }

    :is(#page-workplace_booking, .help-production-workplace-booking) .workplace-booking-filter-toolbar {
        grid-template-columns: 1fr;
    }

    #page-times .times-filter-item-view,
    #page-times .times-filter-item-staff,
    #page-times .times-filter-item-date,
    :is(#page-punchclock, .help-production-punchclock) .times-filter-item-view,
    :is(#page-punchclock, .help-production-punchclock) .times-filter-item-staff,
    :is(#page-punchclock, .help-production-punchclock) .times-filter-item-date {
        width: 100%;
        max-width: none;
    }

    :is(#page-workplace_booking, .help-production-workplace-booking) .workplace-booking-filter-item-workplace,
    :is(#page-workplace_booking, .help-production-workplace-booking) .workplace-booking-filter-item-date {
        width: 100%;
        max-width: none;
    }

    #page-times #times-view-mode-dropdown,
    :is(#page-punchclock, .help-production-punchclock) #times-view-mode-dropdown {
        width: 100%;
    }
}

.receipts-pill-control {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    border: 1px solid var(--ui-press-border, #6f879f);
    border-radius: var(--ui-radius-pill, 999px);
    background: var(--ui-press-bg, linear-gradient(180deg, #ffffff 0%, #dce8f4 100%));
    color: var(--ui-press-text, #2f4c65);
    box-shadow: var(--ui-press-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.75));
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        filter 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
    touch-action: manipulation;
    overflow: hidden;
}

.receipts-pill-control:hover {
    transform: translateY(-1px);
    border-color: var(--ui-press-hover-border, #4e6a87);
    filter: saturate(1.1) brightness(1.03) contrast(1.01);
    box-shadow: var(--ui-press-hover-shadow, 0 3px 0 rgba(94, 126, 148, 0.52), 0 6px 10px rgba(34, 62, 82, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.82));
}

.receipts-pill-control:active {
    transform: translateY(1px);
    filter: none;
    box-shadow: var(--ui-press-active-shadow, 0 1px 0 rgba(94, 126, 148, 0.5), 0 2px 4px rgba(34, 62, 82, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7));
}

.receipts-pill-control:focus-within:not(:active) {
    outline: none;
    box-shadow: var(--ui-press-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.75));
}

/* Table-themed variant for the view/sort dropdown controls. */
.receipts-pill-control-table {
    --receipts-toolbar-shell-top: var(--bs3-btn-default-top, #ffffff);
    --receipts-toolbar-shell-end: var(--bs3-btn-default-base, #dce8f4);
    --ui-press-border: var(--bs3-btn-default-border, #6f879f);
    --ui-press-hover-border: #4e6a87;
    --ui-press-bg: linear-gradient(180deg, var(--receipts-toolbar-shell-top) 0%, var(--receipts-toolbar-shell-end) 100%);
    --ui-press-text: var(--bs3-btn-default-text, #2f4c65);
    --ui-press-shadow: var(--ui-press-neutral-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.75));
    --ui-press-hover-shadow: var(--ui-press-neutral-hover-shadow, 0 3px 0 rgba(94, 126, 148, 0.52), 0 6px 10px rgba(34, 62, 82, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.82));
    --ui-press-active-shadow: var(--ui-press-neutral-active-shadow, 0 1px 0 rgba(94, 126, 148, 0.5), 0 2px 4px rgba(34, 62, 82, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7));
}

.receipts-pill-control-table .receipts-pill-symbol {
    background: transparent;
    border-right-color: var(--ui-press-border, #6f879f);
}

/* Shared pill inputs for text/number fields and addon variants. */
.app-input-pill {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.app-input-pill--with-addon {
    grid-template-columns: minmax(0, 1fr) auto;
}

.app-input-pill--with-addons {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.app-input-pill--with-leading-addon {
    grid-template-columns: 36px minmax(0, 1fr);
}

.app-input-pill__control.form-control {
    width: 100%;
    height: 36px;
    min-width: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: none;
    color: #2f4c65;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

.app-input-pill .app-input-pill__control.form-control,
.app-input-pill .fulltext-search-input.app-input-pill__control.form-control {
    display: block;
    width: 100%;
    height: 36px;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #2f4c65;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

.app-input-pill__control.form-control:focus {
    border: 0;
    outline: none;
    box-shadow: none;
}

.app-input-pill .app-input-pill__control.form-control:focus,
.app-input-pill .fulltext-search-input.app-input-pill__control.form-control:focus {
    border: 0;
    outline: none;
}

.app-input-pill__control.form-control::placeholder {
    color: #6d8294;
    font-weight: 400;
    opacity: 0.76;
}

.app-input-pill__control.form-control:required {
    padding-right: 18px;
    box-shadow: inset -6px 0 0 0 rgba(40, 182, 44, 0.85);
}

.app-input-pill__control.form-control:required:focus {
    box-shadow: inset -6px 0 0 0 rgba(40, 182, 44, 0.85);
}

select[data-receipts-modal-dropdown="1"]:required + .receipts-modal-dropdown > .receipts-pill-control::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 18px;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    box-shadow: inset -6px 0 0 0 rgba(40, 182, 44, 0.85);
    pointer-events: none;
}

.app-input-pill--with-addon .app-input-pill__control.form-control,
.app-input-pill--with-addon .fulltext-search-input.app-input-pill__control.form-control,
.app-input-pill--with-addons .app-input-pill__control.form-control,
.app-input-pill--with-addons .fulltext-search-input.app-input-pill__control.form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.app-input-pill--with-leading-addon .app-input-pill__control.form-control,
.app-input-pill--with-leading-addon .fulltext-search-input.app-input-pill__control.form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.app-input-pill--with-addon,
.app-input-pill--with-addons {
    position: relative;
}

.app-input-pill--with-addon .app-input-pill__control.form-control:required,
.app-input-pill--with-addon .app-input-pill__control.form-control:required:focus,
.app-input-pill--with-addons .app-input-pill__control.form-control:required,
.app-input-pill--with-addons .app-input-pill__control.form-control:required:focus {
    padding-right: 12px;
    box-shadow: none !important;
}

.app-input-pill__control:required + .app-input-pill__addon::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    width: 6px;
    background: rgba(40, 182, 44, 0.85);
    pointer-events: none;
}

.app-input-pill__control--number.form-control {
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.app-input-pill--textarea {
    align-items: stretch;
    border-radius: 12px;
}

.app-input-pill .app-input-pill__control--textarea.form-control {
    height: auto;
    min-height: 64px;
    padding: 8px 12px;
    border-radius: 10px;
    line-height: 1.35;
    resize: vertical;
}

.receipts-pill-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-right: 1px solid rgba(79, 111, 131, 0.3);
    color: #35586f;
}

.receipts-pill-symbol .glyphicon {
    font-size: 12px;
    line-height: 1;
}

.app-input-pill .app-input-pill__addon {
    position: relative;
    z-index: 1;
    align-self: stretch;
    box-sizing: border-box;
    min-width: 0;
    margin-left: -2px;
    padding: 0 12px 0 13px;
    border-right: 0;
    border-left: 0;
    background: var(--ui-press-bg, linear-gradient(180deg, #ffffff 0%, #dce8f4 100%));
    background-clip: border-box;
    box-shadow: inset 1px 0 0 rgba(111, 135, 159, 0.62);
    white-space: nowrap;
    font-weight: 700;
}

.app-input-pill .app-input-pill__addon--hint {
    gap: 4px;
    font-size: 12px;
}

.receipts-pill-symbol-action {
    border: 0;
    border-right: 1px solid var(--ui-press-border, rgba(79, 111, 131, 0.3));
    background: transparent;
    padding: 0;
    width: 100%;
    cursor: pointer;
    font: inherit;
}

.receipts-pill-symbol-action:hover,
.receipts-pill-symbol-action:focus {
    outline: none;
    color: #1f4f70;
    text-decoration: none;
}

.receipts-pill-control.is-disabled .receipts-pill-symbol-action {
    cursor: default;
    pointer-events: none;
}

.receipts-sort-direction-toggle {
    border: 0;
    border-right: 1px solid var(--ui-press-border, #6f879f);
    background: transparent;
    padding: 0;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
}

.receipts-sort-direction-toggle:focus,
.receipts-sort-direction-toggle:focus-visible {
    outline: none;
}

.receipts-sort-direction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.receipts-sort-direction-icon .glyphicon {
    font-size: 9px;
    opacity: 0.34;
    transition: opacity 0.16s ease, color 0.16s ease;
}

.receipts-sort-direction-toggle:hover .receipts-sort-direction-icon .glyphicon {
    opacity: 0.6;
}

.receipts-sort-direction-toggle.is-asc .receipts-sort-direction-up .glyphicon,
.receipts-sort-direction-toggle.is-desc .receipts-sort-direction-down .glyphicon {
    opacity: 0.95;
    color: #1f4f70;
}

.receipts-toolbar-dropdown {
    position: relative;
    --receipts-toolbar-shell-border: var(--bs3-btn-default-border, #6f879f);
    --receipts-toolbar-shell-text: var(--bs3-btn-default-text, #2f4c65);
    --receipts-toolbar-shell-top: var(--bs3-btn-default-top, #ffffff);
    --receipts-toolbar-shell-end: var(--bs3-btn-default-base, #dce8f4);
    --receipts-toolbar-shell-menu-end: #cfdde8;
    --receipts-toolbar-menu-overlap: 19px;
    --receipts-toolbar-menu-start: color-mix(in srgb, var(--receipts-toolbar-shell-top) 50%, var(--receipts-toolbar-shell-end) 50%);
    --receipts-toolbar-menu-end-dynamic: var(--receipts-toolbar-shell-menu-end);
    /* Menu starts from the button mid-tone; JS refines this from the rendered height. */
    --receipts-toolbar-menu-bg: linear-gradient(
        180deg,
        var(--receipts-toolbar-menu-start) 0%,
        var(--receipts-toolbar-menu-end-dynamic) 100%
    );
}

.receipts-toolbar-dropdown-toggle,
.receipts-filter-toggle {
    width: 100%;
    height: 36px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 13px;
    line-height: 1.2;
    padding: 0 12px;
    box-shadow: none;
}

.receipts-toolbar-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0 var(--ui-radius-pill, 999px) var(--ui-radius-pill, 999px) 0;
}

.receipts-toolbar-dropdown-toggle:focus,
.receipts-toolbar-dropdown-toggle:active:focus {
    outline: none;
    box-shadow: none;
}

.receipts-toolbar-dropdown-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.receipts-toolbar-dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receipts-toolbar-dropdown-toggle .glyphicon-chevron-down {
    font-size: 10px;
    opacity: 0.75;
    transition: transform 0.16s ease, opacity 0.16s ease;
    transform-origin: 50% 45%;
}

.receipts-toolbar-dropdown.is-open .receipts-toolbar-dropdown-toggle .glyphicon-chevron-down {
    transform: rotate(180deg);
    opacity: 0.92;
}

.receipts-toolbar-dropdown > .receipts-pill-control {
    position: relative;
    /* Keep toolbar above table chrome, but below Bootstrap modal/backdrop layers. */
    z-index: 351;
}

.receipts-toolbar-dropdown-menu {
    /* Start from pill midline and expand underneath the button. */
    left: 0;
    right: 0;
    top: 50%;
    min-width: 0;
    width: auto;
    margin-top: 0;
    padding: calc(var(--receipts-toolbar-menu-overlap) + 7px) 6px 7px;
    z-index: 350;
    border: 1px solid var(--receipts-toolbar-shell-border);
    border-radius: 10px;
    background: var(--receipts-toolbar-menu-bg);
    color: var(--receipts-toolbar-shell-text);
    overflow: hidden;
    background-clip: padding-box;
    box-shadow:
        0 14px 26px -10px rgba(23, 48, 66, 0.42),
        0 5px 10px rgba(23, 48, 66, 0.18);
}

.receipts-toolbar-dropdown.is-open > .dropdown-menu {
    display: block;
}

/* Dropdown pills should never show the focus-ring outline on click. */
.receipts-toolbar-dropdown .receipts-pill-control:focus-within:not(:active) {
    outline: none;
    box-shadow: var(--ui-press-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.75));
}

/* Keep hover lift/shadow growth even when the inner button remains focused after click-drag-release. */
.receipts-toolbar-dropdown:not(.is-open) .receipts-pill-control:hover:focus-within:not(:active) {
    box-shadow: var(--ui-press-hover-shadow, 0 3px 0 rgba(94, 126, 148, 0.52), 0 6px 10px rgba(34, 62, 82, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.82));
}

/* Suppress focus ring/outline in open state and visually fuse pill + menu. */
.receipts-toolbar-dropdown.is-open .receipts-pill-control,
.receipts-toolbar-dropdown.is-open .receipts-pill-control:focus-within {
    transform: translateY(1px);
    filter: none;
    box-shadow: var(--ui-press-active-shadow, 0 1px 0 rgba(94, 126, 148, 0.5), 0 2px 4px rgba(34, 62, 82, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7));
}

/* Filter pill should use the same non-ring focus behavior as view/sort pills. */
.receipts-filter-menu .receipts-pill-control:focus-within:not(:active) {
    outline: none;
    box-shadow: var(--ui-press-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.75));
}

.receipts-filter-menu:not(.is-open) .receipts-pill-control:hover:focus-within:not(:active) {
    box-shadow: var(--ui-press-hover-shadow, 0 3px 0 rgba(94, 126, 148, 0.52), 0 6px 10px rgba(34, 62, 82, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.82));
}

.receipts-filter-menu.is-open .receipts-pill-control,
.receipts-filter-menu.is-open .receipts-pill-control:focus-within {
    transform: translateY(1px);
    filter: none;
    box-shadow: var(--ui-press-active-shadow, 0 1px 0 rgba(94, 126, 148, 0.5), 0 2px 4px rgba(34, 62, 82, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7));
}

.receipts-toolbar-dropdown-menu > li + li {
    margin-top: 2px;
}

.receipts-toolbar-dropdown-menu > li > button {
    position: relative;
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: #2a465d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.14) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
    outline: none;
}

.receipts-toolbar-dropdown-menu > li.modal-keyboard-active:not(.active) > button,
.receipts-toolbar-dropdown-menu > li > button:hover,
.receipts-toolbar-dropdown-menu > li > button:focus {
    transform: translateY(-1px);
    color: #0d4660;
    background: linear-gradient(180deg, rgba(179, 241, 255, 0.96) 0%, rgba(86, 211, 244, 0.84) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 0 0 1px rgba(30, 148, 190, 0.68),
        0 5px 10px rgba(26, 99, 128, 0.16);
}

.receipts-toolbar-dropdown-menu > li > button:active {
    transform: translateY(1px);
}

.receipts-toolbar-dropdown-menu > li.active > button,
.receipts-toolbar-dropdown-menu > li.active > button:hover,
.receipts-toolbar-dropdown-menu > li.active > button:focus {
    transform: none;
    color: #0d4660;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    background: linear-gradient(180deg, #7ff0ff 0%, #27c8ee 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -1px 0 rgba(12, 118, 154, 0.28),
        0 0 0 1px rgba(27, 165, 208, 0.5);
}

.receipts-toolbar-dropdown-menu > li.modal-keyboard-active-selected > button,
.receipts-toolbar-dropdown-menu > li.modal-keyboard-active-selected > button:hover,
.receipts-toolbar-dropdown-menu > li.modal-keyboard-active-selected > button:focus {
    transform: none;
    color: #173f52;
    text-shadow: none;
    background:
        linear-gradient(180deg, rgba(92, 112, 126, 0.18) 0%, rgba(92, 112, 126, 0.28) 100%),
        linear-gradient(180deg, #7ff0ff 0%, #27c8ee 100%);
    box-shadow:
        inset 0 0 0 1px rgba(83, 105, 120, 0.46),
        inset 3px 0 0 rgba(30, 140, 185, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.receipts-toolbar-dropdown-menu > li.active > button::after {
    content: '\2713';
    float: right;
    opacity: 0.9;
    font-weight: 700;
    color: rgba(7, 83, 112, 0.92);
}

.receipts-toolbar-dropdown-menu > li.disabled > button {
    opacity: 0.56;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.1) 100%);
    cursor: not-allowed;
    pointer-events: none;
}

/* Keep top-toolbar view/sort menus visually aligned with modal dropdown options. */
.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal {
    background: #ffffff;
    border-color: #c7d6e3;
    --receipts-toolbar-menu-bg: #ffffff;
    box-shadow: 0 10px 20px rgba(27, 55, 77, 0.14);
}

.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li > button {
    color: #2a465d;
    background: #ffffff;
    text-shadow: none;
    box-shadow: none;
}

.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li.modal-keyboard-active:not(.active) > button,
.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li > button:hover,
.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li > button:focus {
    transform: none;
    color: #204960;
    background: #f4f8fc;
    box-shadow: none;
}

.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li.active > button,
.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li.active > button:hover,
.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li.active > button:focus {
    transform: none;
    color: #0f4a63;
    background: #def3ff;
    box-shadow: inset 0 0 0 1px rgba(41, 155, 201, 0.34);
    text-shadow: none;
}

.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li.modal-keyboard-active-selected > button,
.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li.modal-keyboard-active-selected > button:hover,
.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li.modal-keyboard-active-selected > button:focus {
    color: #173f52;
    background:
        linear-gradient(180deg, rgba(92, 112, 126, 0.18) 0%, rgba(92, 112, 126, 0.28) 100%),
        #def3ff;
    box-shadow:
        inset 0 0 0 1px rgba(83, 105, 120, 0.42),
        inset 3px 0 0 rgba(30, 140, 185, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
    text-shadow: none;
    transform: none;
}

.receipts-toolbar-dropdown-menu.receipts-toolbar-dropdown-menu-match-modal > li.active > button::after {
    color: rgba(9, 84, 111, 0.92);
}

.receipts-pill-control.is-disabled {
    opacity: 0.62;
    filter: grayscale(0.25);
    pointer-events: none;
}

.receipts-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0 var(--ui-radius-pill, 999px) var(--ui-radius-pill, 999px) 0;
}

.receipts-filter-toggle:focus,
.receipts-filter-toggle:active:focus,
.receipts-filter-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.receipts-filter-toggle-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receipts-filter-toggle .glyphicon-chevron-down {
    font-size: 10px;
    opacity: 0.75;
}

.receipts-overlay-select,
.receipts-overlay-input,
.receipts-inline-button {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #c7d8e5;
    background: linear-gradient(180deg, #fdfefe 0%, #f2f7fb 100%);
    color: #2a4456;
    font-size: 13px;
    line-height: 1.2;
    padding: 0 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.receipts-overlay-select:focus,
.receipts-overlay-input:focus,
.receipts-inline-button:focus {
    outline: none;
    border-color: #77a9c7;
    box-shadow: 0 0 0 3px rgba(21, 140, 186, 0.16);
}

.receipts-toolbar-dropdown-toggle:disabled {
    color: #8b9ca8;
    background: transparent;
    cursor: not-allowed;
}

.receipts-toolbar-item-filter {
    z-index: auto;
}

.receipts-filter-menu {
    position: relative;
}

.receipts-filter-modal .modal-dialog {
    width: min(680px, calc(100vw - 34px));
    max-width: 680px;
}

.receipts-filter-modal.in .modal-dialog {
    /* Avoid Bootstrap transform stacking-context after the entrance transition. */
    -webkit-transform: none !important;
    transform: none !important;
}

.receipts-filter-modal .modal-content {
    border: 1px solid #bdd3e2;
    border-radius: 12px;
    box-shadow: 0 18px 36px rgba(27, 70, 99, 0.18), 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.receipts-filter-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #d5e3ee;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
    border-radius: 12px 12px 0 0;
    color: #2d4f65;
}

.receipts-filter-overlay-head strong {
    font-size: 13px;
    font-weight: 700;
}

.receipts-overlay-close {
    border: 1px solid #bdd3e2;
    background: #fff;
    color: #4b6c81;
    border-radius: 8px;
    min-width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.receipts-overlay-close:hover {
    background: #eff6fb;
}

.receipts-filter-overlay-body {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.receipts-filter-field {
    min-width: 0;
}

.receipts-filter-field label,
.receipts-field-caption {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #4f6f83;
}

/* Transposed client-row styling for one filter element (Mitarbeiter). */
.receipts-filter-field-has-info > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.receipts-filter-field-shell > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #dbe7f0;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, #edf6fd 0%, #e3f0fa 100%);
    color: #156d9f;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.receipts-filter-field-has-info > label .receipts-filter-label-copy {
    display: block;
    min-width: 0;
}

.receipts-filter-info-trigger {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #8fc0dc;
    border-radius: 999px;
    background: linear-gradient(180deg, #f0f9ff 0%, #deeffa 100%);
    color: #1d79a8;
    cursor: help;
    position: relative;
    top: -1px;
    left: -1px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.receipts-filter-info-trigger .glyphicon {
    font-size: 10px;
    line-height: 1;
}

.receipts-filter-info-trigger:hover,
.receipts-filter-info-trigger:focus {
    outline: none;
    border-color: #6eaed2;
    background: linear-gradient(180deg, #e7f5ff 0%, #d1e8f7 100%);
    color: #115f8c;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(18, 87, 126, 0.14);
}

.receipts-filter-info-trigger:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

/* Shared help cards for the compact Ansicht / Filter / Sortierung toolbars. */
.filter-explanation-hover {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
    margin-left: 7px;
    vertical-align: middle;
}

.filter-explanation-hover-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #8fc0dc;
    border-radius: 999px;
    background: linear-gradient(180deg, #f6fbff 0%, #deeffa 100%);
    color: #1d79a8;
    font-size: 10px;
    line-height: 1;
    cursor: help;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 1px 2px rgba(34, 72, 96, 0.1);
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.filter-explanation-hover-trigger:hover,
.filter-explanation-hover-trigger:focus,
.filter-explanation-hover.hover-card-active .filter-explanation-hover-trigger {
    outline: none;
    border-color: #6eaed2;
    background: linear-gradient(180deg, #e7f5ff 0%, #d1e8f7 100%);
    color: #115f8c;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(18, 87, 126, 0.16);
}

.filter-explanation-hover-card {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: min(430px, calc(100vw - 24px));
    min-width: min(280px, calc(100vw - 24px));
    padding: 0;
    border: 2px solid #158cba;
    border-radius: 10px;
    box-sizing: border-box;
    background: #ffffff;
    color: #25465d;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 14px 30px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    z-index: 200000;
}

.filter-explanation-hover-card.transitioning {
    display: block;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.filter-explanation-hover-card.show {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.filter-explanation-hover-card.position-above {
    transform: translateY(8px);
}

.filter-explanation-hover-card.position-above.show {
    transform: translateY(0);
}

.filter-explanation-hover-card::before,
.filter-explanation-hover-card::after {
    content: "";
    position: absolute;
    left: var(--arrow-left, 28px);
    width: 0;
    height: 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.filter-explanation-hover-card:not(.position-above)::before {
    top: -10px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #158cba;
    border-left: 10px solid transparent;
}

.filter-explanation-hover-card:not(.position-above)::after {
    top: -7px;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #1a9fd8;
    border-left: 7px solid transparent;
}

.filter-explanation-hover-card.position-above::before {
    bottom: -10px;
    border-top: 10px solid #158cba;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

.filter-explanation-hover-card.position-above::after {
    bottom: -7px;
    border-top: 7px solid #f7fbff;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.filter-explanation-hover-card-head {
    display: block;
    padding: 9px 12px;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(135deg, #1a9fd8 0%, #158cba 58%, #127a9f 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.filter-explanation-hover-card-body {
    display: grid;
    gap: 9px;
    max-height: min(560px, calc(100vh - 96px));
    padding: 11px 12px 12px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filter-explanation-hover-card-intro,
.filter-explanation-hover-card-note,
.filter-explanation-hover-card-list,
.filter-explanation-hover-card-list > span {
    display: block;
}

.filter-explanation-hover-card-list {
    display: grid;
    gap: 6px;
}

.filter-explanation-hover-card-list > span {
    padding-left: 10px;
    border-left: 3px solid #c6e2f2;
}

.filter-explanation-hover-card-list strong {
    color: #0f648f;
}

.filter-explanation-hover-card-note {
    padding: 8px 9px;
    border: 1px solid #d5e8f3;
    border-radius: 7px;
    background: #f2f8fc;
    color: #48697c;
}

@media (max-width: 520px) {
    .filter-explanation-hover-card {
        min-width: 0;
    }
}

.receipts-filter-field-shell .receipts-toolbar-dropdown,
.receipts-filter-field-shell .receipts-filter-shell-body {
    position: relative;
    z-index: auto;
    padding: 5px;
    border: 1px solid #dbe7f0;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, #fcfdff 0%, #f5f9fc 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.modal-field-grid,
.filter-field-grid {
    align-items: stretch;
}

.modal-field-grid > .receipts-filter-field-shell,
.filter-field-grid > .receipts-filter-field-shell {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
}

.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
}

.modal-field-grid > .receipts-filter-field-shell > label,
.filter-field-grid > .receipts-filter-field-shell > label,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > label {
    flex: 0 0 auto;
}

.modal-field-grid > .receipts-filter-field-shell > .receipts-toolbar-dropdown,
.modal-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body,
.filter-field-grid > .receipts-filter-field-shell > .receipts-toolbar-dropdown,
.filter-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-toolbar-dropdown,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-filter-shell-body {
    flex: 1 1 auto;
    min-height: 50px;
    box-sizing: border-box;
}

.modal-field-grid > .receipts-filter-field-shell > .receipts-toolbar-dropdown,
.filter-field-grid > .receipts-filter-field-shell > .receipts-toolbar-dropdown,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-toolbar-dropdown,
.modal-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body:has(> .receipts-choice-grid),
.modal-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body:has(> .receipts-toolbar-dropdown),
.modal-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body:has(> .receipts-pill-control),
.filter-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body:has(> .receipts-choice-grid),
.filter-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body:has(> .receipts-toolbar-dropdown),
.filter-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body:has(> .receipts-pill-control),
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-filter-shell-body:has(> .receipts-choice-grid),
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-filter-shell-body:has(> .receipts-toolbar-dropdown),
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-filter-shell-body:has(> .receipts-pill-control) {
    display: flex;
    align-items: center;
}

.modal-field-grid > .receipts-filter-field-shell > .receipts-toolbar-dropdown > .receipts-pill-control,
.filter-field-grid > .receipts-filter-field-shell > .receipts-toolbar-dropdown > .receipts-pill-control,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-toolbar-dropdown > .receipts-pill-control,
.modal-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body > .receipts-choice-grid,
.modal-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body > .receipts-toolbar-dropdown,
.modal-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body > .receipts-pill-control,
.filter-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body > .receipts-choice-grid,
.filter-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body > .receipts-toolbar-dropdown,
.filter-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body > .receipts-pill-control,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-filter-shell-body > .receipts-choice-grid,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-filter-shell-body > .receipts-toolbar-dropdown,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-filter-shell-body > .receipts-pill-control {
    width: 100%;
}

.receipts-filter-field-shell .receipts-filter-shell-body > .receipts-overlay-input {
    margin: 0;
}

.receipts-filter-info-stage {
    position: relative;
}

.receipts-filter-info-target {
    transition: opacity 0.2s ease;
}

.receipts-filter-info-panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #dbe7f0;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #fcfdff 0%, #f5f9fc 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        visibility 0s linear 0.2s;
}

.receipts-filter-info-panel-copy {
    width: 100%;
    color: #4a6d83;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.receipts-filter-field-shell-compact .receipts-filter-info-panel {
    padding-top: 4px;
    padding-bottom: 4px;
}

.receipts-filter-field-shell-compact .receipts-filter-info-panel-copy {
    font-size: 10.5px;
}

.receipts-filter-field.is-info-preview .receipts-filter-info-target {
    opacity: 0;
    pointer-events: none;
}

.receipts-filter-field.is-info-preview .receipts-filter-info-panel {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.receipts-period-shell-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 10px;
    align-items: center;
}

.modal-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body.receipts-period-shell-body,
.filter-field-grid > .receipts-filter-field-shell > .receipts-filter-shell-body.receipts-period-shell-body,
.filter-field-grid > .receipts-filter-field-shell > .filter-field-grid-inner > .receipts-filter-shell-body.receipts-period-shell-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
}

.receipts-period-dropdown-wrap {
    min-width: 0;
    align-self: center;
}

/* Period row already has shell styling on .receipts-period-shell-body. */
.receipts-period-shell-body .receipts-toolbar-dropdown {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.receipts-period-dropdown {
    width: 100%;
}

.receipts-period-dropdown > .receipts-pill-control {
    width: 100%;
}

.receipts-period-dropdown .receipts-pill-symbol {
    flex: 0 0 34px;
    cursor: pointer;
}

.receipts-period-dropdown .receipts-pill-control.is-disabled .receipts-pill-symbol {
    cursor: default;
    pointer-events: none;
}

.receipts-period-dropdown-menu {
    padding: 8px;
}

.receipts-period-dropdown-menu > li.receipts-period-dropdown-columns-row,
.receipts-toolbar-dropdown-menu-portal.receipts-period-dropdown-menu > li.receipts-period-dropdown-columns-row {
    margin: 0;
    padding: 0;
}

.receipts-period-dropdown-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.receipts-period-dropdown-column {
    min-width: 0;
}

.receipts-period-dropdown-column-title {
    display: block;
    margin: 0 0 5px;
    padding: 0 4px;
    color: #658094;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.receipts-period-dropdown-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.receipts-period-dropdown-item {
    position: relative;
    width: 100%;
    display: block;
    padding: 6px 9px;
    border: 0;
    border-radius: 6px;
    color: #2a465d;
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    letter-spacing: 0;
    box-shadow: none;
    text-shadow: none;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.receipts-period-dropdown-item.modal-keyboard-active:not(.active):not(.is-active),
.receipts-period-dropdown-item:hover,
.receipts-period-dropdown-item:focus {
    color: #123f54;
    background: #e9f5fc;
    box-shadow:
        inset 0 0 0 1px rgba(77, 142, 179, 0.28),
        inset 3px 0 0 rgba(30, 140, 185, 0.68);
    outline: none;
}

.receipts-period-dropdown-item.active,
.receipts-period-dropdown-item.active:hover,
.receipts-period-dropdown-item.active:focus {
    color: #0f4a63;
    background: #def3ff;
    box-shadow: inset 0 0 0 1px rgba(41, 155, 201, 0.34);
}

.receipts-period-dropdown-item.modal-keyboard-active-selected,
.receipts-period-dropdown-item.modal-keyboard-active-selected:hover,
.receipts-period-dropdown-item.modal-keyboard-active-selected:focus {
    color: #173f52;
    background:
        linear-gradient(180deg, rgba(92, 112, 126, 0.18) 0%, rgba(92, 112, 126, 0.28) 100%),
        #def3ff;
    box-shadow:
        inset 0 0 0 1px rgba(83, 105, 120, 0.42),
        inset 3px 0 0 rgba(30, 140, 185, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
    outline: none;
}

.receipts-period-dropdown-item.active::after {
    content: '\2713';
    float: right;
    opacity: 0.9;
    font-weight: 700;
    color: rgba(9, 84, 111, 0.92);
}

.receipts-filter-field-shell:hover > label {
    border-color: #c8dced;
    color: #0e5f8c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 1px 2px rgba(33, 94, 130, 0.12);
}

.receipts-filter-field-shell:hover .receipts-toolbar-dropdown,
.receipts-filter-field-shell:hover .receipts-filter-shell-body {
    border-color: #c8dced;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 1px 2px rgba(33, 94, 130, 0.12);
}

.receipts-filter-field-shell .receipts-filter-shell-body > .receipts-toolbar-dropdown,
.receipts-filter-field-shell:hover .receipts-filter-shell-body > .receipts-toolbar-dropdown,
.receipts-filter-field-shell .receipts-filter-shell-body > .receipts-toolbar-dropdown:hover,
.receipts-filter-field-shell .receipts-filter-shell-body > .receipts-toolbar-dropdown:focus-within {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Avoid hover halo behind the period pill; only outer shell + pill should be visible. */
.receipts-filter-field-shell:hover .receipts-period-shell-body .receipts-toolbar-dropdown,
.receipts-filter-field-shell .receipts-period-shell-body .receipts-toolbar-dropdown:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.receipts-filter-field-full {
    grid-column: 1 / -1;
}

.receipts-filter-cluster {
    margin-top: 8px;
    margin-bottom: 10px;
    padding: 8px 10px 10px;
    border: 1px solid #d5e4ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfeff 0%, #f3f8fc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.receipts-filter-cluster-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 9px 0 0;
    padding: 8px 8px 2px;
    border-top: 1px solid #dbe7f0;
    text-align: center;
}

.receipts-filter-cluster-line {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #3f6580;
}

.receipts-filter-cluster-line-sub {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #6f8799;
}

.receipts-filter-cluster-status-line {
    display: block;
    min-height: 22px;
    white-space: normal;
}

.receipts-filter-cluster-status-empty {
    display: none;
}

.receipts-filter-cluster-status-line.is-empty .receipts-filter-cluster-status-empty {
    display: inline;
}

.receipts-filter-cluster-status-slot {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transform: translateY(2px) scale(0.94);
    transition:
        max-width 0.24s cubic-bezier(0.22, 0.78, 0.2, 1),
        opacity 0.18s ease,
        transform 0.24s cubic-bezier(0.22, 0.78, 0.2, 1);
}

.receipts-filter-cluster-status-slot.is-visible {
    max-width: 140px;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.receipts-filter-cluster-status-pill {
    margin: 0 2px 2px;
    font-size: 9.5px;
    padding: 3px 7px;
    border-radius: 6px !important;
    cursor: default !important;
    border: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.receipts-filter-cluster-status-pill .eigener-status-icon {
    width: 12px;
    height: 12px;
}

.receipts-filter-cluster-status-pill .eigener-status-icon .glyphicon {
    font-size: 9px;
}

.receipts-filter-cluster-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.receipts-modal-source-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* Shared time-entry modal. Keep these global because the same modal is loaded from multiple controllers. */
:is(#modal-times-edit, .times-entry-modal) .receipts-filter-field-shell {
    margin-bottom: 12px;
}
:is(#modal-times-edit, .times-entry-modal) #times__date_nav {
    width: 100%;
}
:is(#modal-times-edit, .times-entry-modal) #times__date_nav.basic-calendar-nav-inline-today {
    --basic-calendar-mask-center-x: calc(50% - 43px);
}
:is(#modal-times-edit, .times-entry-modal) .modal-content {
    overflow: visible;
}

:is(#modal-times-edit, .times-entry-modal) .modal-dialog.times-modal-dialog-height-animating {
    will-change: height;
}

:is(#modal-times-edit, .times-entry-modal) .plan-times-loading-body {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

:is(#modal-times-edit, .times-entry-modal) .plan-times-loading-shell {
    pointer-events: none;
}

:is(#modal-times-edit, .times-entry-modal) .plan-times-loading-error {
    width: 100%;
    max-width: 420px;
    margin: 0;
}

:is(#modal-times-edit, .times-entry-modal) .modal-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-clip: padding-box;
}

:is(#modal-times-edit, .times-entry-modal) .modal-footer {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    background-clip: padding-box;
}

:is(#modal-times-edit, .times-entry-modal) #times_last_values_button {
    display: none;
    position: absolute;
    right: 50px;
    top: 10px;
}

:is(#modal-times-edit, .times-entry-modal) .times__compact-shell-body {
    padding: 4px;
}

:is(#modal-times-edit, .times-entry-modal) #time_error {
    color: #c00;
    display: none;
}

:is(#modal-times-edit, .times-entry-modal) .basic-time-picker.is-range-invalid {
    --basic-time-mask-center-offset: var(--basic-time-required-marker-center-offset);
}

:is(#modal-times-edit, .times-entry-modal) .basic-time-picker.is-range-invalid > .basic-time-required-marker {
    display: block;
    background: rgba(211, 48, 48, 0.92);
}

:is(#modal-times-edit, .times-entry-modal) #periodreceiptwarning {
	display: none;
}
:is(#modal-times-edit, .times-entry-modal) #related_plan_dailys {
	display: inline-flex;
}

:is(#modal-times-edit, .times-entry-modal) .times__period-warning-alert {
    margin: 8px 0 0;
}

:is(#modal-times-edit, .times-entry-modal) .times__task-alert {
    text-shadow: none;
}

:is(#modal-times-edit, .times-entry-modal) .times__invalid-text {
    color: #c00;
}

:is(#modal-times-edit, .times-entry-modal) .times__period-context-invalid {
    font-size: 9px;
    line-height: 10px;
}

:is(#modal-times-edit, .times-entry-modal) .times__comment-paste-btn {
    background: transparent;
    border: 1px solid rgba(21, 109, 159, 0.35);
    color: #156d9f;
    opacity: 0.7;
    padding: 1px 5px;
    line-height: 1;
    transition: opacity 0.15s, border-color 0.15s;
}
:is(#modal-times-edit, .times-entry-modal) .times__comment-paste-btn:hover {
    opacity: 1;
    border-color: #156d9f;
    background: rgba(255,255,255,0.35);
}

:is(#modal-times-edit, .times-entry-modal) .times__period-abbrev-info {
    color: #5a7a90;
    font-size: 11px;
}
:is(#modal-times-edit, .times-entry-modal) .times__accounting-lines-info {
    color: #5a7a90;
    font-size: 11px;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .receipts-filter-shell-body,
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .receipts-filter-shell-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    align-items: stretch;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .times__field-addon-group,
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__field-addon-group {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .times__period-addon-group {
    grid-template-columns: 104px minmax(0, 1fr);
}

:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__accounting-addon-group {
    grid-template-columns: 96px minmax(0, 1fr);
}

:is(#modal-times-edit, .times-entry-modal) .times__field-addon-group > .app-input-pill__control {
    min-width: 0;
}

:is(#modal-times-edit, .times-entry-modal) .times__field-addon-group > .app-input-pill__addon {
    display: -webkit-box !important;
    flex: 1 1 auto;
    text-align: left;
    white-space: normal;
    text-overflow: ellipsis;
    line-height: 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 0;
    height: 36px;
    min-height: 0;
    max-height: 36px;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: none;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_info.is-single-line-info {
    font-size: 11px;
    line-height: 36px;
    -webkit-line-clamp: 1;
    padding-top: 0;
    padding-bottom: 0;
}
:is(#modal-times-edit, .times-entry-modal) .times__field-addon-group > .app-input-pill__control:required + .app-input-pill__addon::before {
    display: none;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .times__period-addon-group::before,
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__accounting-addon-group::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(111, 135, 159, 0.62);
    pointer-events: none;
    z-index: 2;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .times__period-addon-group::before {
    left: 103px;
}
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__accounting-addon-group::before {
    left: 95px;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .times__period-addon-group:has(> .app-input-pill__control:required:not(:disabled))::before,
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__accounting-addon-group:has(> .app-input-pill__control:required:not(:disabled))::before {
    display: none;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .times__period-addon-group:has(> .app-input-pill__control:required:not(:disabled))::after,
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__accounting-addon-group:has(> .app-input-pill__control:required:not(:disabled))::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    background: rgba(40, 182, 44, 0.85);
    pointer-events: none;
    z-index: 2;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .times__period-addon-group:has(> .app-input-pill__control:required:not(:disabled))::after {
    left: 103px;
}
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__accounting-addon-group:has(> .app-input-pill__control:required:not(:disabled))::after {
    left: 95px;
}
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__accounting-lines-info {
    line-height: 12px;
    -webkit-line-clamp: 2;
    padding-top: 5px;
    padding-bottom: 5px;
}
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .times__accounting-lines-copy {
    display: block;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row .help-block,
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_row #periodreceiptwarning,
:is(#modal-times-edit, .times-entry-modal) #times__accounting_lines_row .help-block {
    grid-column: 1 / -1;
    margin-top: 5px;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_info {
    display: flex;
    line-height: 12px;
}
:is(#modal-times-edit, .times-entry-modal) #times__period_abbrev_info.is-visible {
    display: flex;
}

:is(#modal-times-edit, .times-entry-modal) .times__von-bis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
:is(#modal-times-edit, .times-entry-modal) .times__von-bis-grid > .times-collapsible {
    min-height: 0;
    align-self: start;
}
:is(#modal-times-edit, .times-entry-modal) .times__von-bis-grid .receipts-filter-field-shell {
    margin-bottom: 0;
}
:is(#modal-times-edit, .times-entry-modal) .times-availability-field.is-disabled > label {
    color: #7e93a1;
    background: linear-gradient(180deg, #edf1f4 0%, #e4eaee 100%);
    border-color: #d4dee5;
}
:is(#modal-times-edit, .times-entry-modal) .times-availability-field.is-disabled .receipts-filter-shell-body,
:is(#modal-times-edit, .times-entry-modal) .times-availability-field.is-disabled .receipts-toolbar-dropdown {
    background: linear-gradient(180deg, #f5f7f8 0%, #edf2f5 100%);
    border-color: #d4dee5;
}
:is(#modal-times-edit, .times-entry-modal) .times-availability-field.is-disabled input,
:is(#modal-times-edit, .times-entry-modal) .times-availability-field.is-disabled .receipts-pill-control {
    cursor: not-allowed;
}
:is(#modal-times-edit, .times-entry-modal) .times__period-done-grid #times__target_hours_done,
:is(#modal-times-edit, .times-entry-modal) .times__period-done-grid #times__monthly_done_row,
:is(#modal-times-edit, .times-entry-modal) .times__period-done-grid #times__interval_done_row {
    grid-column: auto;
    margin-bottom: 0;
}
:is(#modal-times-edit, .times-entry-modal) .times__period-done-grid.has-all-done-controls #times__interval_done_row {
    grid-column: 1 / -1;
}
:is(#modal-times-edit, .times-entry-modal) #times__target_hours_done.times-collapsible,
:is(#modal-times-edit, .times-entry-modal) #times__monthly_done_row.times-collapsible,
:is(#modal-times-edit, .times-entry-modal) #times__interval_done_row.times-collapsible {
    display: none;
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: visible;
}
:is(#modal-times-edit, .times-entry-modal) #times__target_hours_done.times-collapsible.is-open,
:is(#modal-times-edit, .times-entry-modal) #times__monthly_done_row.times-collapsible.is-open,
:is(#modal-times-edit, .times-entry-modal) #times__interval_done_row.times-collapsible.is-open {
    display: block;
}
:is(#modal-times-edit, .times-entry-modal) #times__comment_row {
    grid-column: 1 / -1;
}
:is(#modal-times-edit, .times-entry-modal) .clients-date-pill {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    border: 1px solid #6f879f;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #dce8f4 100%);
    color: #2f4c65;
    box-shadow: 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    overflow: hidden;
}
:is(#modal-times-edit, .times-entry-modal) .clients-date-pill-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-right: 1px solid rgba(79, 111, 131, 0.3);
    color: #35586f;
}
:is(#modal-times-edit, .times-entry-modal) .clients-date-pill-symbol .glyphicon {
    font-size: 12px;
}
:is(#modal-times-edit, .times-entry-modal) .clients-modal-date-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 36px;
}
:is(#modal-times-edit, .times-entry-modal) .clients-modal-date-nav input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: inherit;
    height: 100%;
    padding: 0 4px;
}
:is(#modal-times-edit, .times-entry-modal) .clients-modal-date-nav input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
:is(#modal-times-edit, .times-entry-modal) .clients-modal-date-nav-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.15s;
    font-size: 12px;
    white-space: nowrap;
}
:is(#modal-times-edit, .times-entry-modal) .clients-modal-date-nav-today {
    padding: 4px 10px;
    font-weight: 600;
    opacity: 0.85;
}
:is(#modal-times-edit, .times-entry-modal) .clients-modal-date-nav-btn:hover {
    opacity: 1;
}
:is(#modal-times-edit, .times-entry-modal) .times-collapsible {
    overflow: hidden;
    max-height: 0;
    transform-origin: 50% 0;
    opacity: 0;
    transform: translateY(-2px) scale(0.985);
    transition:
        max-height 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.18s ease,
        transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: max-height;
    pointer-events: none;
}
:is(#modal-times-edit, .times-entry-modal) .times-collapsible.is-open {
    max-height: var(--times-collapsible-max-height, 240px);
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

:is(#modal-times-edit, .times-entry-modal) #times__target_hours_done,
:is(#modal-times-edit, .times-entry-modal) #times__monthly_done_row,
:is(#modal-times-edit, .times-entry-modal) #times__interval_done_row,
:is(#modal-times-edit, .times-entry-modal) #times__target_hours_status {
    position: relative;
    margin-bottom: 12px;
}
:is(#modal-times-edit, .times-entry-modal) #times__client_row.is-open {
    overflow: visible;
}
:is(#modal-times-edit, .times-entry-modal) #times__target_hours_done.is-open {
    overflow: visible;
    z-index: auto;
    --times-collapsible-max-height: 520px;
}
:is(#modal-times-edit, .times-entry-modal) #times__target_hours_done .receipts-filter-shell-body,
:is(#modal-times-edit, .times-entry-modal) #times__target_hours_done .times__done-shell,
:is(#modal-times-edit, .times-entry-modal) #times__target_hours_done .times__done-related,
:is(#modal-times-edit, .times-entry-modal) #times__monthly_done_row .receipts-filter-shell-body,
:is(#modal-times-edit, .times-entry-modal) #times__interval_done_row .receipts-filter-shell-body {
    overflow: visible;
}
:is(#modal-times-edit, .times-entry-modal) #times__target_hours_status.is-open {
    z-index: 10;
    --times-collapsible-max-height: 140px;
}
:is(#modal-times-edit, .times-entry-modal) #times__status_row {
    grid-column: 1 / -1;
}
:is(#modal-times-edit, .times-entry-modal) .times__done-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 9px;
}
:is(#modal-times-edit, .times-entry-modal) .times__done-main {
    min-width: 0;
}
:is(#modal-times-edit, .times-entry-modal) .times__done-main .help-block {
    margin: 6px 0 0;
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 240px;
    max-width: 100%;
    margin: 0 auto;
}
:is(#modal-times-edit, .times-entry-modal) #times__interval_done_row .times__done-choice-grid {
    width: 100%;
}
:is(#modal-times-edit, .times-entry-modal) .times-availability-field.is-disabled .times__done-choice-grid .receipts-choice-chip {
    cursor: not-allowed;
    opacity: 0.72;
}
:is(#modal-times-edit, .times-entry-modal) .times-availability-field.is-disabled .times__done-choice-grid .receipts-choice-chip:hover .receipts-choice-chip-text {
    border-color: #d6e5ef;
    background: linear-gradient(180deg, #f5f7f8 0%, #edf2f5 100%);
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip {
    display: inline-flex;
    position: relative;
    margin: 0;
    cursor: pointer;
    user-select: none;
    width: 100%;
    min-width: 0;
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid #d6e5ef;
    border-radius: 999px;
    background: linear-gradient(180deg, #fcfeff 0%, #f0f7fc 100%);
    color: #2f617e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip-text::before {
    content: '\2713';
    display: block;
    width: 0;
    max-width: 0;
    margin-right: 0;
    opacity: 0;
    color: #176d9d;
    font-size: 10px;
    line-height: 1;
    transform: translateX(-4px) scale(0.75);
    transform-origin: center;
    transition: width 0.2s cubic-bezier(0.22, 0.78, 0.2, 1), max-width 0.2s cubic-bezier(0.22, 0.78, 0.2, 1), margin-right 0.2s ease, opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 0.78, 0.2, 1);
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip-copy {
    display: block;
    white-space: nowrap;
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(0.22, 0.78, 0.2, 1);
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip:hover .receipts-choice-chip-text {
    border-color: #c3dbe9;
    background: linear-gradient(180deg, #f9fdff 0%, #e9f3fa 100%);
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip input[type="radio"]:checked + .receipts-choice-chip-text {
    border-color: #a9cfe4;
    background: linear-gradient(180deg, #ebf7ff 0%, #deeffa 100%);
    color: #0f648f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 0 0 1px rgba(158, 201, 226, 0.28);
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip input[type="radio"]:checked + .receipts-choice-chip-text::before {
    width: 10px;
    max-width: 10px;
    margin-right: 4px;
    opacity: 0.96;
    transform: translateX(0) scale(1);
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip input[type="radio"]:checked + .receipts-choice-chip-text .receipts-choice-chip-copy {
    transform: translateX(1px);
}
:is(#modal-times-edit, .times-entry-modal) .times__done-choice-grid .receipts-choice-chip input[type="radio"]:focus-visible + .receipts-choice-chip-text {
    box-shadow: 0 0 0 2px rgba(21, 140, 186, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}
:is(#modal-times-edit, .times-entry-modal) .times__done-related {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-height: 28px;
    color: #2f4f66;
    font-size: 12px;
}
	.related-plan-dailys-info-wrapper {
		display: inline-flex;
		align-items: center;
		position: relative;
		z-index: 1200;
	}

	.related-plan-dailys-label {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 28px;
		border: 1px solid #b7d0df;
		border-radius: 7px;
		padding: 4px 9px;
		background: linear-gradient(180deg, #fafdff 0%, #e8f2f8 100%);
		color: #2b607e;
		cursor: help;
		font-size: 11.5px;
		font-weight: 700;
		line-height: 1.1;
		text-align: left;
		transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
	}
	.related-plan-dailys-info-wrapper:not(.is-disabled) .related-plan-dailys-label:hover,
	.related-plan-dailys-info-wrapper:not(.is-disabled) .related-plan-dailys-label:focus {
		border-color: #8db9d1;
		background: linear-gradient(180deg, #ffffff 0%, #dcecf5 100%);
		color: #1f678f;
		box-shadow: 0 0 0 2px rgba(73, 145, 182, 0.16);
		outline: none;
	}
	.times__done-related.is-disabled .related-plan-dailys-label,
	.related-plan-dailys-label:disabled {
		border-color: #d4dee5;
		background: linear-gradient(180deg, #f2f5f7 0%, #e7ecef 100%);
		color: #8496a2;
		box-shadow: none;
		cursor: default;
		opacity: 0.82;
	}
	.related-plan-dailys-label-line {
		display: block;
		white-space: nowrap;
	}

	.related-plan-dailys-error-text {
		color: #c00;
	}

	.related-plan-dailys-hovercard {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200000;
		width: min(520px, calc(100vw - 24px));
		min-width: min(300px, calc(100vw - 24px));
		padding: 0;
		background: #ffffff;
		border: 2px solid #158cba;
		border-radius: 10px;
		color: #25465d;
		font-size: 12px;
		line-height: 1.35;
		box-shadow: 0 14px 30px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0, 0, 0, 0.14);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
	}
	.related-plan-dailys-hovercard.transitioning {
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}
	.related-plan-dailys-hovercard.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}
	.related-plan-dailys-hovercard.position-above {
		transform: translateY(8px);
	}
	.related-plan-dailys-hovercard.position-above.show {
		transform: translateY(0);
	}
	.related-plan-dailys-hovercard-content {
		display: grid;
		gap: 12px;
		max-height: 300px;
		padding: 12px;
		overflow-y: auto;
		overflow-x: hidden;
		border-radius: 0 0 8px 8px;
		background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
		background-clip: padding-box;
		scrollbar-width: thin;
		scrollbar-color: #b8cedb #eef5f9;
	}
	.related-plan-dailys-hovercard-content::-webkit-scrollbar {
		width: 6px;
	}
	.related-plan-dailys-hovercard-content::-webkit-scrollbar-track {
		background: #eef5f9;
		border-radius: 3px;
	}
	.related-plan-dailys-hovercard-content::-webkit-scrollbar-thumb {
		background: #b8cedb;
		border-radius: 3px;
	}
	.related-plan-dailys-hovercard-content::-webkit-scrollbar-thumb:hover {
		background: #93adbd;
	}
	.related-plan-dailys-hovercard-head {
		display: block;
		padding: 10px 13px;
		border-radius: 7px 7px 0 0;
		background: linear-gradient(135deg, #1a9fd8 0%, #158cba 58%, #127a9f 100%);
		color: #ffffff;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.25;
		box-shadow: 0 2px 8px rgba(21, 140, 186, 0.3);
	}
	.related-plan-dailys-hovercard,
	.related-plan-dailys-hovercard * {
		text-shadow: none !important;
	}
	.related-plan-dailys-hovercard::before,
	.related-plan-dailys-hovercard::after {
		content: '';
		position: absolute;
		left: var(--arrow-left, 28px);
		width: 0;
		height: 0;
		transform: translateX(-50%);
		pointer-events: none;
	}
	.related-plan-dailys-hovercard:not(.position-above)::before {
		top: -10px;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #158cba;
		border-left: 10px solid transparent;
	}
	.related-plan-dailys-hovercard:not(.position-above)::after {
		top: -7px;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #1a9fd8;
		border-left: 7px solid transparent;
	}
	.related-plan-dailys-hovercard.position-above::before {
		bottom: -10px;
		border-top: 10px solid #158cba;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
	}
	.related-plan-dailys-hovercard.position-above::after {
		bottom: -7px;
		border-top: 7px solid #f4f9fc;
		border-right: 7px solid transparent;
		border-left: 7px solid transparent;
	}

	.related-plan-dailys-table-title {
		margin: 0 0 7px;
		padding-left: 9px;
		border-left: 3px solid #75b7d8;
		color: #205f82;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.25;
	}

	.related-plan-dailys-table {
		margin: 0;
	}
	.related-plan-dailys-hovercard .table {
		margin-bottom: 0;
		border: 1px solid #d4e5ef;
		border-radius: 7px;
		background: #ffffff;
		box-shadow: 0 1px 3px rgba(34, 72, 96, 0.08);
	}
	.related-plan-dailys-hovercard .table th,
	.related-plan-dailys-hovercard .table td {
		font-size: 12px;
		padding: 6px 7px;
		border-color: #dbe8f0;
		vertical-align: middle;
	}
	.related-plan-dailys-hovercard .table th {
		background: #eaf5fb;
		color: #315b73;
		font-weight: 700;
	}
	.related-plan-dailys-hovercard .table-striped > tbody > tr:nth-of-type(odd) > td {
		background: #f8fbfd;
	}
	.related-plan-dailys-hovercard .table td em {
		color: #78909f;
	}
@media (max-width: 620px) {
    :is(#modal-times-edit, .times-entry-modal) .times__done-shell {
        grid-template-columns: 1fr;
        align-items: start;
    }
    :is(#modal-times-edit, .times-entry-modal) .times__done-related {
        flex-wrap: wrap;
        min-height: 0;
    }
}

/* Shared time-entry modal dropdown controls. */
:is(#modal-times-edit, .times-entry-modal) select[data-receipts-modal-dropdown="1"]:not(.receipts-modal-source-select) {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 34px 0 14px;
    border: 1px solid #6f879f;
    border-radius: 999px;
    background:
        linear-gradient(45deg, transparent 50%, #35586f 50%) calc(100% - 18px) 16px / 5px 5px no-repeat,
        linear-gradient(135deg, #35586f 50%, transparent 50%) calc(100% - 13px) 16px / 5px 5px no-repeat,
        linear-gradient(180deg, #ffffff 0%, #dce8f4 100%);
    color: #2f4c65;
    font-size: 13px;
    box-shadow:
        0 2px 0 rgba(96, 128, 149, 0.5),
        0 4px 7px rgba(34, 62, 82, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    appearance: none;
    -webkit-appearance: none;
}

:is(#modal-times-edit, .times-entry-modal) select[data-receipts-modal-dropdown="1"]:not(.receipts-modal-source-select):focus {
    border-color: #4f7896;
    outline: none;
    box-shadow:
        0 2px 0 rgba(96, 128, 149, 0.5),
        0 4px 7px rgba(34, 62, 82, 0.15),
        0 0 0 2px rgba(21, 140, 186, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

:is(#modal-times-edit, .times-entry-modal) select.receipts-modal-source-select {
    display: none !important;
    pointer-events: none !important;
}

:is(#modal-times-edit, .times-entry-modal) .receipts-modal-dropdown > .receipts-pill-control,
.receipts-filter-modal .receipts-modal-dropdown > .receipts-pill-control {
    cursor: pointer;
}

:is(#modal-times-edit, .times-entry-modal) .receipts-modal-dropdown .receipts-toolbar-dropdown-toggle,
:is(#modal-times-edit, .times-entry-modal) .receipts-modal-dropdown .receipts-pill-symbol:not(.receipts-pill-symbol-action),
.receipts-filter-modal .receipts-modal-dropdown[id$="-modal-dropdown"] .receipts-toolbar-dropdown-toggle,
.receipts-filter-modal .receipts-modal-dropdown[id$="-modal-dropdown"] .receipts-pill-symbol:not(.receipts-pill-symbol-action) {
    pointer-events: none;
}

:is(#modal-times-edit, .times-entry-modal) .receipts-modal-dropdown .receipts-pill-symbol-action,
.receipts-filter-modal .receipts-modal-dropdown .receipts-pill-symbol-action {
    cursor: pointer;
}

:is(#modal-times-edit, .times-entry-modal) .receipts-modal-dropdown.is-open > .receipts-pill-control,
:is(#modal-times-edit, .times-entry-modal) .receipts-modal-dropdown.is-open > .receipts-pill-control:hover,
:is(#modal-times-edit, .times-entry-modal) .receipts-modal-dropdown.is-open > .receipts-pill-control:focus-within {
    transform: none;
}

.receipts-filter-modal .receipts-toolbar-dropdown {
    width: 100%;
    z-index: auto;
}

.receipts-filter-modal .receipts-toolbar-dropdown.is-open {
    z-index: auto;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-pill-control {
    width: 100%;
    z-index: 1040;
}

/* Layering in modal: active pill > open portal menu > passive pills/backgrounds. */
.receipts-filter-modal .receipts-toolbar-dropdown.is-open > .receipts-pill-control {
    z-index: 1221;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu {
    max-height: min(360px, 62vh);
    overflow-y: auto;
    z-index: 1;
    background: #ffffff;
    border: 1px solid #c7d6e3;
    padding: 4px;
    box-shadow: 0 10px 20px rgba(27, 55, 77, 0.14);
}

.receipts-toolbar-dropdown-menu-portal {
    position: fixed;
    display: block;
    margin-top: 0;
    z-index: 1220;
    pointer-events: auto;
    max-height: min(360px, 62vh);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #c7d6e3;
    border-radius: 8px;
    padding: 0 4px 4px;
    color: #2a465d;
    background-clip: padding-box;
    box-shadow: 0 10px 20px rgba(27, 55, 77, 0.14);
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li + li,
.receipts-toolbar-dropdown-menu-portal > li + li {
    margin-top: 1px;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.receipts-toolbar-dropdown-search-row,
.receipts-toolbar-dropdown-menu-portal > li.receipts-toolbar-dropdown-search-row {
    position: sticky;
    top: 0;
    display: block;
    z-index: 2;
    background: #ffffff;
    border-bottom: 1px solid #d8e4ee;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.receipts-toolbar-dropdown-search-row {
    margin: 0;
    padding: 0 1px 6px;
}

.receipts-toolbar-dropdown-menu-portal.receipts-toolbar-dropdown-menu-has-search > li.receipts-toolbar-dropdown-search-row {
    z-index: 3;
    margin: 0 -4px;
    padding: var(--receipts-portal-overlap, 0px) 5px 6px;
    background: #ffffff;
    border-bottom: 1px solid #d8e4ee;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.receipts-toolbar-dropdown-search-row + li,
.receipts-toolbar-dropdown-menu-portal > li.receipts-toolbar-dropdown-search-row + li {
    margin-top: 6px;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu .receipts-toolbar-dropdown-search-wrap,
.receipts-toolbar-dropdown-menu-portal .receipts-toolbar-dropdown-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid #c7d9e6;
    border-radius: 6px;
    background: #ffffff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu .receipts-toolbar-dropdown-search-wrap .glyphicon,
.receipts-toolbar-dropdown-menu-portal .receipts-toolbar-dropdown-search-wrap .glyphicon {
    font-size: 11px;
    line-height: 1;
    color: #688299;
    flex: 0 0 auto;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu .receipts-toolbar-dropdown-search-input,
.receipts-toolbar-dropdown-menu-portal .receipts-toolbar-dropdown-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 26px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #25465d;
    font-size: 12px;
    line-height: 1.2;
    box-shadow: none;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu .receipts-toolbar-dropdown-search-input::placeholder,
.receipts-toolbar-dropdown-menu-portal .receipts-toolbar-dropdown-search-input::placeholder {
    color: #8da1b2;
    opacity: 1;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu .receipts-toolbar-dropdown-search-wrap:focus-within,
.receipts-toolbar-dropdown-menu-portal .receipts-toolbar-dropdown-search-wrap:focus-within {
    border-color: #8fb6d2;
    box-shadow: 0 0 0 1px rgba(124, 177, 209, 0.35);
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.receipts-toolbar-dropdown-empty,
.receipts-toolbar-dropdown-menu-portal > li.receipts-toolbar-dropdown-empty {
    padding: 8px 9px;
    font-size: 12px;
    line-height: 1.2;
    color: #6f8799;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li > button,
.receipts-toolbar-dropdown-menu-portal > li > button {
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: #2a465d;
    background: #ffffff;
    text-shadow: none;
    box-shadow: none;
    transform: none;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.modal-keyboard-active:not(.active) > button,
.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li > button:hover,
.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li > button:focus,
.receipts-toolbar-dropdown-menu-portal > li.modal-keyboard-active:not(.active) > button,
.receipts-toolbar-dropdown-menu-portal > li > button:hover,
.receipts-toolbar-dropdown-menu-portal > li > button:focus {
    color: #123f54;
    background: #e9f5fc;
    box-shadow:
        inset 0 0 0 1px rgba(77, 142, 179, 0.28),
        inset 3px 0 0 rgba(30, 140, 185, 0.68);
    transform: none;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.active > button,
.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.active > button:hover,
.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.active > button:focus,
.receipts-toolbar-dropdown-menu-portal > li.active > button,
.receipts-toolbar-dropdown-menu-portal > li.active > button:hover,
.receipts-toolbar-dropdown-menu-portal > li.active > button:focus {
    color: #0f4a63;
    background: #def3ff;
    box-shadow: inset 0 0 0 1px rgba(41, 155, 201, 0.34);
    text-shadow: none;
    transform: none;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.modal-keyboard-active-selected > button,
.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.modal-keyboard-active-selected > button:hover,
.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.modal-keyboard-active-selected > button:focus,
.receipts-toolbar-dropdown-menu-portal > li.modal-keyboard-active-selected > button,
.receipts-toolbar-dropdown-menu-portal > li.modal-keyboard-active-selected > button:hover,
.receipts-toolbar-dropdown-menu-portal > li.modal-keyboard-active-selected > button:focus {
    color: #173f52;
    background:
        linear-gradient(180deg, rgba(92, 112, 126, 0.18) 0%, rgba(92, 112, 126, 0.28) 100%),
        #def3ff;
    box-shadow:
        inset 0 0 0 1px rgba(83, 105, 120, 0.42),
        inset 3px 0 0 rgba(30, 140, 185, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
    text-shadow: none;
    transform: none;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu > li.active > button::after,
.receipts-toolbar-dropdown-menu-portal > li.active > button::after {
    color: rgba(9, 84, 111, 0.92);
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu,
.receipts-toolbar-dropdown-menu-portal {
    scrollbar-width: thin;
    scrollbar-color: #b2c2cf #ffffff;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu::-webkit-scrollbar,
.receipts-toolbar-dropdown-menu-portal::-webkit-scrollbar {
    width: 5px;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu::-webkit-scrollbar-track,
.receipts-toolbar-dropdown-menu-portal::-webkit-scrollbar-track {
    background: #ffffff;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu::-webkit-scrollbar-thumb,
.receipts-toolbar-dropdown-menu-portal::-webkit-scrollbar-thumb {
    background: #b2c2cf;
    border-radius: 999px;
}

.receipts-filter-modal .receipts-toolbar-dropdown > .receipts-toolbar-dropdown-menu::-webkit-scrollbar-thumb:hover,
.receipts-toolbar-dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
    background: #9fb2c2;
}

/* In modal context, keep open dropdown pills visually "pressed" (no hover lift/grow). */
.receipts-filter-modal .receipts-toolbar-dropdown.is-open > .receipts-pill-control,
.receipts-filter-modal .receipts-toolbar-dropdown.is-open > .receipts-pill-control:hover,
.receipts-filter-modal .receipts-toolbar-dropdown.is-open > .receipts-pill-control:focus-within,
.receipts-filter-modal .receipts-toolbar-dropdown.is-open > .receipts-pill-control:hover:focus-within {
    transform: translateY(1px);
    border-color: var(--ui-press-border, #6f879f);
    filter: none;
    box-shadow: var(--ui-press-active-shadow, 0 1px 0 rgba(94, 126, 148, 0.5), 0 2px 4px rgba(34, 62, 82, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7));
}

.receipts-overlay-select {
    appearance: none;
    border-radius: var(--ui-radius-pill, 999px);
    border-color: var(--ui-press-border, #6f879f);
    background-color: #ffffff;
    box-shadow: var(--ui-press-neutral-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15));
    background-image: none;
    padding-right: 12px;
}

.receipts-overlay-select:hover:not(:disabled) {
    border-color: var(--ui-press-hover-border, #4e6a87);
    box-shadow: var(--ui-press-neutral-hover-shadow, 0 3px 0 rgba(94, 126, 148, 0.52), 0 6px 10px rgba(34, 62, 82, 0.17));
}

.receipts-overlay-select:focus {
    background-color: #ffffff;
}

.receipts-overlay-select option {
    background-color: #ffffff;
    color: #2a4456;
}

.receipts-overlay-select:disabled {
    background-color: #f5f8fb;
    color: #8a9ba8;
    cursor: not-allowed;
}

.receipts-filter-modal .bootstrap-select {
    width: 100% !important;
}

.receipts-filter-modal .bootstrap-select > .dropdown-toggle {
    height: 36px;
    border-radius: var(--ui-radius-pill, 999px);
    border: 1px solid var(--ui-press-border, #6f879f);
    background: var(--ui-press-bg, linear-gradient(180deg, #ffffff 0%, #dce8f4 100%));
    color: var(--ui-press-text, #2f4c65);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    padding: 0 30px 0 12px;
    box-shadow: var(--ui-press-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15));
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.receipts-filter-modal .bootstrap-select > .dropdown-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--ui-press-hover-border, #4e6a87);
    box-shadow: var(--ui-press-hover-shadow, 0 3px 0 rgba(94, 126, 148, 0.52), 0 6px 10px rgba(34, 62, 82, 0.17));
}

.receipts-filter-modal .bootstrap-select.open > .dropdown-toggle {
    transform: translateY(1px);
    filter: none;
    border-color: var(--ui-press-hover-border, #4e6a87);
    box-shadow: var(--ui-press-active-shadow, 0 1px 0 rgba(94, 126, 148, 0.5), 0 2px 4px rgba(34, 62, 82, 0.18));
}

.receipts-filter-modal .bootstrap-select > .dropdown-toggle:focus {
    outline: none;
    border-color: var(--ui-press-border, #6f879f);
    box-shadow: var(--ui-press-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15));
}

.receipts-filter-modal .bootstrap-select > .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
    height: 100%;
    color: inherit;
}

.receipts-filter-modal .bootstrap-select > .dropdown-toggle .caret {
    border-top-color: currentColor;
    transition: none;
    transform: none !important;
}

.receipts-filter-modal .bootstrap-select.open > .dropdown-toggle .caret {
    transform: none !important;
}

.receipts-filter-modal .bootstrap-select .dropdown-menu {
    margin-top: 4px;
    border: 1px solid var(--ui-press-border, #6f879f);
    border-radius: 10px;
    background: #ffffff;
    color: #2a465d;
    overflow: hidden;
    background-clip: padding-box;
    box-shadow: 0 14px 26px -10px rgba(23, 48, 66, 0.42), 0 5px 10px rgba(23, 48, 66, 0.18);
    padding: 6px;
}

.receipts-filter-modal .bootstrap-select .dropdown-menu > li > a {
    position: relative;
    width: 100%;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: #2a465d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
    background: #ffffff;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
    outline: none;
}

.receipts-filter-modal .bootstrap-select .dropdown-menu > li > a:hover,
.receipts-filter-modal .bootstrap-select .dropdown-menu > li > a:focus {
    transform: translateY(-1px);
    color: #114d66;
    background: #e9f6ff;
    box-shadow: 0 0 0 1px rgba(49, 179, 218, 0.32), 0 4px 8px rgba(26, 99, 128, 0.1);
}

.receipts-filter-modal .bootstrap-select .dropdown-menu > li.selected > a,
.receipts-filter-modal .bootstrap-select .dropdown-menu > li.selected > a:hover,
.receipts-filter-modal .bootstrap-select .dropdown-menu > li.selected > a:focus {
    transform: none;
    color: #0d4660;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    background: #cfefff;
    box-shadow: 0 0 0 1px rgba(27, 165, 208, 0.35);
}

.receipts-filter-modal .bootstrap-select .dropdown-menu > li.selected > a::after {
    content: '\2713';
    float: right;
    opacity: 0.9;
    font-weight: 700;
    color: rgba(7, 83, 112, 0.92);
}

.receipts-overlay-input {
    padding-right: 11px;
}

.receipts-overlay-input-readonly {
    cursor: pointer;
}

.receipts-input-with-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.receipts-inline-button {
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: #2e5f7d;
    cursor: pointer;
}

.receipts-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 2px;
}

.receipts-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #2e4c60;
    font-size: 13px;
    font-weight: 600;
}

.receipts-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #158cba;
}

.receipts-choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 1px;
}

.receipts-choice-grid--planung,
.receipts-choice-grid--belegeingang,
.receipts-choice-grid--leistung,
.receipts-choice-grid--ma {
    flex-wrap: nowrap;
}

.receipts-choice-grid--planung .receipts-choice-chip,
.receipts-choice-grid--belegeingang .receipts-choice-chip,
.receipts-choice-grid--leistung .receipts-choice-chip,
.receipts-choice-grid--ma .receipts-choice-chip {
    flex: 1 1 0;
    min-width: 0;
}

.receipts-choice-grid--faelligkeitsstatus {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
}

.receipts-choice-grid--faelligkeitsstatus .receipts-choice-chip {
    flex: 1 1 0;
    min-width: 0;
}

.receipts-filter-field-shell-compact .receipts-filter-shell-body {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 4px 5px;
}

.receipts-filter-field-shell-compact .receipts-choice-grid {
    width: 100%;
}

.receipts-filter-field-shell-compact .receipts-choice-chip-text {
    min-height: 24px;
    padding: 2px 9px;
    font-size: 11px;
    line-height: 1.1;
}

.receipts-choice-grid--faelligkeitsstatus .receipts-choice-chip-text {
    font-size: 10px;
    padding-left: 9px;
    padding-right: 9px;
}

.receipts-choice-chip {
    display: inline-flex;
    position: relative;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.receipts-choice-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.receipts-choice-chip-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid #d6e5ef;
    border-radius: 999px;
    background: linear-gradient(180deg, #fcfeff 0%, #f0f7fc 100%);
    color: #2f617e;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.receipts-choice-chip-text::before {
    content: '\2713';
    display: block;
    width: 0;
    max-width: 0;
    margin-right: 0;
    opacity: 0;
    color: #176d9d;
    font-size: 10px;
    line-height: 1;
    transform: translateX(-4px) scale(0.75);
    transform-origin: center;
    transition: width 0.2s cubic-bezier(0.22, 0.78, 0.2, 1), max-width 0.2s cubic-bezier(0.22, 0.78, 0.2, 1), margin-right 0.2s ease, opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 0.78, 0.2, 1);
}

.receipts-choice-chip-copy {
    display: block;
    white-space: nowrap;
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(0.22, 0.78, 0.2, 1);
}

.receipts-choice-chip:hover .receipts-choice-chip-text {
    border-color: #c3dbe9;
    background: linear-gradient(180deg, #f9fdff 0%, #e9f3fa 100%);
}

.receipts-choice-chip.is-last-selected-locked,
.receipts-choice-chip.is-last-selected-locked .receipts-choice-chip-text {
    cursor: default;
}

.receipts-choice-chip input[type="checkbox"]:checked + .receipts-choice-chip-text {
    border-color: #a9cfe4;
    background: linear-gradient(180deg, #ebf7ff 0%, #deeffa 100%);
    color: #0f648f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 0 0 1px rgba(158, 201, 226, 0.28);
}

.receipts-choice-chip input[type="checkbox"]:checked + .receipts-choice-chip-text::before {
    width: 10px;
    max-width: 10px;
    margin-right: 4px;
    opacity: 0.96;
    transform: translateX(0) scale(1);
}

.receipts-choice-chip input[type="checkbox"]:checked + .receipts-choice-chip-text .receipts-choice-chip-copy {
    transform: translateX(1px);
}

.receipts-choice-chip input[type="checkbox"]:focus-visible + .receipts-choice-chip-text {
    box-shadow: 0 0 0 2px rgba(21, 140, 186, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.modal .receipts-choice-chip input[type="checkbox"]:focus-visible + .receipts-choice-chip-text,
.modal .receipts-choice-chip input[type="radio"]:focus-visible + .receipts-choice-chip-text,
.receipts-filter-modal .receipts-choice-chip input[type="checkbox"]:focus-visible + .receipts-choice-chip-text,
.receipts-filter-modal .receipts-choice-chip input[type="radio"]:focus-visible + .receipts-choice-chip-text {
    outline: none !important;
    box-shadow: inset 0 0 0 2px rgba(47, 128, 237, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

.receipts-choice-chip.is-last-selected-locked:hover .receipts-choice-chip-text {
    border-color: #a9cfe4;
    background: linear-gradient(180deg, #ebf7ff 0%, #deeffa 100%);
}

.receipts-choice-chip:active .receipts-choice-chip-text {
    filter: brightness(0.985);
}

.receipts-choice-chip.is-last-selected-locked:active .receipts-choice-chip-text {
    filter: none;
}

.receipts-filter-overlay-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px 14px;
    border-top: 1px solid #dfeaf2;
}

.receipts-action-primary,
.receipts-action-danger {
    height: 34px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    padding: 0 13px;
    cursor: pointer;
    transition: filter 0.16s ease, box-shadow 0.16s ease;
}

.receipts-action-primary {
    background: linear-gradient(180deg, #1aa0d8 0%, #158cba 100%);
    border-color: #127ba3;
    color: #fff;
    box-shadow: 0 2px 6px rgba(21, 140, 186, 0.24);
}

.receipts-action-danger {
    background: linear-gradient(180deg, #f9f3ea 0%, #f5e4cf 100%);
    border-color: #e3c7a4;
    color: #7d4f26;
}

.receipts-action-primary:hover,
.receipts-action-danger:hover {
    filter: brightness(0.98);
}

.receipts-hidden {
    display: none !important;
}

@media (max-width: 1199px) {
    .receipts-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .receipts-toolbar-item-filter {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .receipts-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .receipts-toolbar-item-filter {
        grid-column: 1;
    }

    .receipts-filter-modal .modal-dialog {
        width: calc(100vw - 24px);
        margin-left: auto;
        margin-right: auto;
    }

    .receipts-filter-overlay-body {
        grid-template-columns: 1fr;
    }

    .receipts-filter-cluster-grid {
        grid-template-columns: 1fr;
    }
}

/* Reusable compact icon trigger (e.g., row action menus). */
.ui-icon-trigger,
.row-menu-toggle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #cfdce6;
    background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
    color: #4d6172;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.ui-icon-trigger__dots,
.row-menu-dots {
    font-size: 18px;
    font-weight: 800;
    font-family: "Arial Black", "Segoe UI Symbol", sans-serif;
    line-height: 0.8;
    transform: translateY(-1px);
}

.ui-icon-trigger:hover,
.row-menu-toggle:hover {
    border-color: #9fbed5;
    color: #2f566f;
    background: linear-gradient(180deg, #f8fcff 0%, #eaf3f9 100%);
    box-shadow: 0 2px 6px rgba(27, 92, 133, 0.18);
}

.ui-icon-trigger:active,
.row-menu-toggle:active {
    border-color: #9fbed5;
    color: #2f566f;
    background: linear-gradient(180deg, #f8fcff 0%, #eaf3f9 100%);
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(21, 77, 114, 0.22);
}

/* Reusable note panel/editor block. */
.ui-note-panel,
.eigener-status-message {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 7px 8px;
    border: 1px solid #d9e3eb;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
}

.ui-note-panel--inline,
.eigener-status-message-inline {
    padding: 5px 7px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ui-note-panel__inline-text,
.eigener-status-message-inline-text {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 11px;
    line-height: 1.25;
    color: #3b4b57;
    scrollbar-width: thin;
}

.ui-note-panel__inline-text::-webkit-scrollbar,
.eigener-status-message-inline-text::-webkit-scrollbar {
    height: 5px;
}

.ui-note-panel__display,
.eigener-status-message-display {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ui-note-panel__text,
.eigener-status-message-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #3b4b57;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ui-note-panel__empty,
.eigener-status-message-empty {
    color: #7c8d99;
    font-style: italic;
}

.ui-note-panel__edit,
.eigener-status-message-edit {
    border: none;
    background: transparent;
    color: #5e7382;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    margin-top: 1px;
}

.ui-note-panel__edit:hover,
.eigener-status-message-edit:hover {
    color: #2f5f7a;
}

.ui-note-panel__editor,
.eigener-status-message-editor {
    display: none;
    margin-top: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ui-note-panel.is-editing .ui-note-panel__display,
.eigener-status-message-block.is-editing .eigener-status-message-display {
    display: none;
}

.ui-note-panel.is-editing .ui-note-panel__editor,
.eigener-status-message-block.is-editing .eigener-status-message-editor {
    display: block;
}

.ui-note-panel__input,
.eigener-status-message-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 56px;
    max-height: 120px;
    resize: vertical;
    padding: 6px 8px;
    border: 1px solid #b8c8d5;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.35;
    background: #fff;
    color: #2f3c45;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ui-note-panel__actions,
.eigener-status-message-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.ui-note-btn,
.eigener-status-message-btn {
    border: none;
    border-radius: var(--ui-radius-pill);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ui-note-btn--save,
.eigener-status-message-btn.is-save {
    background: linear-gradient(180deg, #63bb44 0%, #4ca737 100%);
    color: #fff;
}

.ui-note-btn--cancel,
.eigener-status-message-btn.is-cancel {
    background: linear-gradient(180deg, #ebf0f4 0%, #dce5ec 100%);
    color: #4f6472;
}

/* Reusable semantic color treatment for pressable controls. */
.ui-pressable--tone-done,
.receipt-btn.recorded,
.legend-status-btn.is-mark-done {
    --ui-tone-top: var(--state-done-top, #d8efde);
    --ui-tone-base: var(--state-done-base, #a8d4b2);
    --ui-tone-border: var(--state-done-border, #5e9a6a);
    --ui-tone-text: var(--state-done-text, #245533);
}

.ui-pressable--tone-overdue,
.receipt-btn.missing {
    --ui-tone-top: var(--state-overdue-top, #f8cec8);
    --ui-tone-base: var(--state-overdue-base, #e98f82);
    --ui-tone-border: var(--state-overdue-border, #c8675b);
    --ui-tone-text: var(--state-overdue-text, #65231f);
}

.ui-pressable--tone-missing,
.legend-status-btn.is-mark-undone {
    --ui-tone-top: var(--state-missing-top, #f9dad6);
    --ui-tone-base: var(--state-missing-base, #efb6af);
    --ui-tone-border: var(--state-missing-border, #d99289);
    --ui-tone-text: var(--state-missing-text, #7f3a34);
}

.ui-pressable--semantic,
.receipt-btn.recorded,
.receipt-btn.missing,
.legend-status-btn.is-mark-done,
.legend-status-btn.is-mark-undone {
    background: linear-gradient(180deg, var(--ui-tone-top) 0%, var(--ui-tone-base) 100%);
    border-color: var(--ui-tone-border);
    color: var(--ui-tone-text);
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--ui-tone-border) 72%, black),
        0 5px 10px color-mix(in srgb, var(--ui-tone-border) 36%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.ui-pressable--semantic:hover,
.receipt-btn.recorded:hover,
.receipt-btn.missing:hover,
.legend-status-btn.is-mark-done:hover,
.legend-status-btn.is-mark-undone:hover {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ui-tone-top) 84%, white) 0%,
        color-mix(in srgb, var(--ui-tone-base) 84%, white) 100%
    );
    border-color: color-mix(in srgb, var(--ui-tone-border) 90%, white);
    color: var(--ui-tone-text);
    box-shadow:
        0 3px 0 color-mix(in srgb, var(--ui-tone-border) 62%, black),
        0 7px 13px color-mix(in srgb, var(--ui-tone-border) 42%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.ui-pressable--semantic:active,
.receipt-btn.recorded:active,
.receipt-btn.missing:active,
.legend-status-btn.is-mark-done:active,
.legend-status-btn.is-mark-undone:active {
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--ui-tone-border) 48%, black),
        0 2px 4px color-mix(in srgb, var(--ui-tone-border) 24%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}


/* ============================================================
   07 – APP LAYOUT  — page/section specific styles
   ============================================================ */

.hide__show_edit_no_submit,
.hide__faulty_autoinfo,
.hide__faulty_minreceiptplan {
    display: none !important;
    visibility: hidden !important;
}

.filter-page--wide .filter-result-container {
    width: var(--app-viewport-width, 100%);
    margin-left: calc((100% - var(--app-viewport-width, 100%)) / 2);
    margin-right: calc((100% - var(--app-viewport-width, 100%)) / 2);
    padding-left: var(--filter-wide-gutter, 3vw);
    padding-right: var(--filter-wide-gutter, 3vw);
}

.filter-page--wide .filter-result-container.table-responsive {
    border: 0;
}

.filter-page--page-scroll {
    --filter-sticky-row1-height: 0px;
    --filter-sticky-row2-height: 0px;
    --filter-sticky-stack-height: 120px;
    --app-sticky-offset: calc(var(--app-navbar-height, 70px) + var(--filter-sticky-stack-height));
}

.filter-page--page-scroll .filter-result-container {
    max-height: none;
    overflow: visible !important;
}

.filter-page--page-scroll .filter-sticky-stack--native {
    position: sticky;
    top: var(--app-navbar-height, 70px);
    z-index: 330;
    isolation: isolate;
}

.filter-page--page-scroll .filter-sticky-stack--native::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - (var(--app-viewport-width, 100%) / 2));
    right: calc(50% - (var(--app-viewport-width, 100%) / 2));
    background: var(--bs3-body-bg, #ffffff);
    border-bottom: 1px solid rgba(167, 188, 204, 0.45);
    pointer-events: none;
    z-index: -1;
}

.filter-page--page-scroll .filter-row3 {
    position: relative;
    padding-top: 10px;
}

.filter-page--page-scroll .native-sticky-table-wrapper {
    position: relative;
}

.filter-page--page-scroll .native-sticky-table-wrapper::before {
    content: "";
    position: sticky;
    top: calc(var(--app-sticky-offset, calc(var(--app-navbar-height, 70px) + var(--filter-sticky-stack-height, 120px))) - 1px);
    display: block;
    height: 3px;
    margin-bottom: -3px;
    background: linear-gradient(180deg, #fcfdff 0%, #eef4f8 100%);
    z-index: 119;
    pointer-events: none;
}

#page-receipts #result_container {
    overflow: hidden !important;
}

#receiptstab-wrapper {
    --receiptstab-head-height: 40px;
    height: auto;
    max-height: none;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding: 0;
    background: #f8f9fa;
    position: relative;
    border-radius: 8px 8px 0 0;
    isolation: isolate;
}

#receiptstab-wrapper::before {
    content: "";
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    width: auto;
    height: var(--receiptstab-head-height, 40px);
    margin-bottom: calc(-1 * var(--receiptstab-head-height, 40px));
    background: linear-gradient(180deg, #fcfdff 0%, #eef4f8 100%);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: inset 1px 0 0 #fcfdff, inset -1px 0 0 #fcfdff;
    pointer-events: none;
    z-index: 119;
    opacity: 1;
    transition: opacity 180ms ease;
}

.receiptstab-stage-shell.is-revealing #receiptstab-wrapper::before {
    opacity: 0;
}

.receiptstab-stage-shell.is-ready #receiptstab-wrapper::before {
    opacity: 1;
}

#receiptstab thead th {
    top: var(--native-sticky-top, 0px);
}

header.home {
    background-color: #11235C;
    color: #fff;
    padding: 20px;
    text-align: center;
    position: relative;
}

header.home a {
    color: #fff;
}

header.home h1 {
    margin: 0;
    font-size: 2.5em;
}

header.home span.greet,
span.title span.greet {
    font-size: 80%;
}

header.home p {
    margin: 5px 0 0;
    font-size: 1.2em;
}

.modal-title input#edit {
    border: none;
    outline: none;
    margin-left: 20px;
    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2) !important;
    color: #999999;
    font-size: 12px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><text x="4" y="15" font-size="12" font-family="Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif" fill="%23999999">ID:</text></svg>');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
}

/* App-specific navbar layout (position, z-index) */
@media screen and (min-width: 800px) {
    .navbar > .container .navbar-brand {
        margin-left: -30px;
    }
}

.navbar > .container .navbar-brand {
    position: absolute;
    left: 0;
    margin-left: 0;
}

.navbar {
    margin-bottom: 0;
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    padding-top: 11px;
}

.navbar-brand .title {
    margin-right: 1px;
    color: #214a80;
    font-size: 26px;
}

#myConfirmOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 43, 58, 0.42);
    z-index: 99998;
}

#myConfirm {
    z-index: 99999;
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(460px, calc(100vw - 32px));
    max-width: 460px;
    padding: 0;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 1px solid #d3e0ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(32, 71, 95, 0.28);
}

#myConfirm .custom-confirm-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e8eef3;
    background: linear-gradient(180deg, #f6fbff 0%, #eef6fc 100%);
}

#myConfirm .custom-confirm-title {
    margin: 0;
    color: #234c64;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

#myConfirm .custom-confirm-body {
    padding: 16px 18px 10px;
}

#confirmMessage {
    margin: 0;
    color: #334b5d;
    font-size: 13px;
    line-height: 1.45;
}

#myConfirm .custom-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 16px;
}

#myConfirm .btn {
    min-width: 86px;
    padding: 6px 12px;
}

#dash-header .nav > li > a {
    padding: 2px 15px;
}

#dash-header .nav-tabs > li.active > a {
    padding-bottom: 8px;
}

#dash-header .nav-tabs > li > a:hover {
    padding-bottom: 8px;
}

#dash-header > .col-md-8 {
    padding-right: 0;
}

#dash-header > .col-md-4 {
    padding-left: 0;
}

#dash-header .bottom-row {
    margin-top: 1px;
}

#dash-header .bottom-row-empty {
    margin-top: 41px;
}

@media (max-width: 992px) {
    .hero .get-it {
        text-align: center;
    }

    #dash-header > .col-md-8 {
        padding-left: 0;
    }

    .hero .phone-preview {
        text-align: center;
    }

    .features-clean .item .name {
        margin-bottom: 1px;
    }
}

.hero .get-it h1,
.hero .get-it p {
    color: #fff;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
}

.hero .get-it .btn {
    margin-left: 10px;
    margin-bottom: 10px;
    text-shadow: none;
}

.btn-wrap {
    white-space: normal;
}

.btn-slim {
    padding-left: 10px;
    padding-right: 10px;
}

.icon-feature {
    text-align: center;
}

.icon-feature .glyphicon {
    font-size: 60px;
    font-weight: normal;
}

small.glyphicon {
    font-size: 10px;
}

section.features {
    background-color: #369;
    padding: 40px 0;
    color: #fff;
}

.features h2 {
    color: #fff;
}

.features .icon-features {
    margin-top: 15px;
}

.testimonials blockquote {
    text-align: center;
}

section.testimonials {
    margin: 50px 0;
}

.site-footer {
    padding: 20px 0;
    text-align: center;
}

@media (min-width: 768px) {
    .site-footer h5 {
        text-align: left;
    }
}

.site-footer h5 {
    color: inherit;
    font-size: 20px;
}

header .glyphicon.icon {
    color: #214a80;
    font-size: 28px;
    margin-right: 7px;
}

button.with_text .glyphicon,
a.with_text .glyphicon {
    margin-right: 5px;
}

button.no-padding-up-down,
a.no-padding-up-down {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    border-bottom-width: 0 !important;
}

.table-responsive td:nth-child(1) {
    text-align: left;
}

@media (min-width: 767px) {
    .table-responsive th:nth-child(1),
    .table-responsive td:nth-child(1) {
        max-width: 250px;
        min-width: 160px;
    }

    .table-responsive table.width1 th:nth-child(1),
    .table-responsive table.width1 td:nth-child(1) {
        max-width: 350px;
        min-width: 220px;
    }

    .table-responsive table.fixedwidth1 th.fix1,
    .table-responsive table.fixedwidth1 td.fix1 {
        min-width: 140px;
    }

    .table-responsive table.fixedwidth1 td.fix1 .btn-group {
        margin-bottom: 5px;
    }
}

@media (max-width: 767px) {
    .table-responsive th:nth-child(1),
    .table-responsive td:nth-child(1) {
        max-width: 120px;
        min-width: 80px;
    }
}

.table-responsive tr.endrow th,
.table-responsive tr.endrow td {
    border-bottom-width: 4px;
}

table.table form {
    display: inline;
}

table.table th.sortable a,
table.table th.tablesorter-header:not(.sorter-false) .tablesorter-header-inner {
    text-decoration: none;
    color: #158cba;
    cursor: pointer;
}

table tr.selected {
    background-color: rgba(217, 237, 247, 0.5) !important;
}

span.width150 {
    max-width: 150px;
    word-break: break-word;
}

span.width200 {
    max-width: 200px;
    word-break: break-word;
}

.day_detail_info {
    display: inline-block;
    width: 40px;
    text-align: right;
}

#month_schedule .modal-body {
    min-height: 0;
    min-height: min(670px, calc(100vh - 118px));
}

#month_schedule .day_detail_info {
    float: right;
}

#month_schedule .yp_sched_day {
    font-weight: 700;
}

#month_schedule .table-cal th,
#month_schedule .table-cal td {
    max-width: 200px;
    min-width: 80px;
}

#month_schedule .table-cal td div.highlight {
    background-color: rgba(255, 150, 150, 0.3);
    display: block;
    margin: -8px;
    padding: 8px;
}

#month_schedule .table-cal td div.highlight .yp_sched_day {
    background-color: rgba(255, 150, 150, 0.7);
    border-radius: 10px;
    padding: 2px 4px;
    margin-left: -2px;
}

#month_schedule .yp_sched_week td:nth-child(6),
#month_schedule .yp_sched_week td:nth-child(7) {
    background-color: rgba(235, 235, 240, 0.5);
}

table.table th.sortinfo,
span.sortinfo {
    text-align: left;
    vertical-align: top;
    font-size: 6px;
    opacity: 0.4;
}

form .row {
    margin-bottom: 7px;
}

form .row.nosep {
    margin-bottom: 0px;
}

.row label {
    margin-top: 7px;
}

form:not(#filter) input:required {
    box-shadow: inset -6px 0px 0px 0px rgba(40, 182, 44, 0.85);
}

select:required {
    -webkit-box-shadow: 6px 0px 0px 0px rgba(40, 182, 44, 0.85);
    box-shadow: 6px 0px 0px 0px rgba(40, 182, 44, 0.85);
}

.bootstrap-select > select:required + button {
    -webkit-box-shadow: 6px 0px 1px 0px rgba(40, 182, 44, 0.85) !important;
    box-shadow: 6px 0px 1px 0px rgba(40, 182, 44, 0.85) !important;
}

input.val-error {
    box-shadow: inset -6px 0px 0px 0px rgba(182, 40, 44, 0.85) !important;
}

input.val-ok {
    box-shadow: inset -6px 0px 0px 0px rgba(41, 209, 45, 0.85) !important;
}

tr.inactive td,
tr.inactive a,
td.inactive,
div.inactive,
div.inactive h4 {
    text-decoration: line-through;
    -webkit-text-decoration-style: dashed;
    -webkit-text-decoration-color: #ff0000;
    text-decoration-style: dashed;
    text-decoration-color: #ff0000;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
}

.bg-warning-lgt { background-color: #fcf8e3; }
.bg-danger-lgt  { background-color: #f2dede; }
.bg-info-lgt    { background-color: #d9edf7; }
.bg-info-tra    { background-color: rgba(189, 225, 248, 0.25); }

.alert-danger-small {
    color: #d94442;
    background-color: #f2dede;
    border: 1px solid #eb6666;
    border-radius: 4px;
    padding: 1px 5px;
    margin: 1px;
}

.floatThead-wrapper thead {
    background-color: #ffffff;
}

.table > tbody > tr > td.info-lgt {
    background-color: #d9edf7;
    color: #31708f;
}

.table > tbody > tr > td.warning-lgt {
    background-color: #fcf8e3;
    color: #8a6d3b;
}

.table > tbody > tr > td.alert-lgt {
    background-color: #f2dede;
    color: #a94442;
}

.divoverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left top, transparent 49.6%, currentColor 49.9%, currentColor 50.1%, transparent 50.4%);
    z-index: 1000;
    top: 0;
}

.divinfo_with_existing {
    padding: 4px 10px;
    width: 500px;
    margin: 0 auto 10px auto;
}

/* Plan layout */
.row-datesgroup .date-header {
    min-height: 60px;
    padding-left: 2px;
}

.row-datesgroup h4 {
    float: left;
    border-radius: 10px;
    padding-left: 2px;
    padding-right: 4px;
    margin-top: 7px;
    margin-bottom: 5px;
}

.row-datesgroup h4 .itooltip_cl {
    padding-left: 0;
    padding-bottom: 0;
}

.row-datesgroup button .onhov {
    display: none;
}

.row-datesgroup button:hover .onhov {
    display: inline;
}

.row-datesgroup hr {
    margin: 0;
    padding: 4px;
    border-top: 8px solid #FFFFFF;
    border-bottom: 1px solid #e0e0e0;
    background-color: rgba(255, 255, 255, 0.75);
}

.row-datesgroup .glyphicon-refresh {
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.row-datesgroup .connectedDate_drop .glyphicon-refresh {
    animation-duration: 1000ms;
}

.tooltip_templates {
    display: none;
}

.row-datesgroup .sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: white;
    padding-top: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1px;
    margin-left: -15px;
    margin-right: -15px;
}

.row-datesgroup .sticky-header .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 3px;
    padding-right: 3px;
}

.row-datesgroup .header-buttons {
    position: absolute;
    right: 10px;
}

.sticky-tfoot {
    position: -webkit-sticky;
    position: sticky;
    bottom: 1px;
    outline: 1px solid #eeeeee;
    background: white;
    z-index: 10;
}

@media (min-width: 768px) {
    .row-datesgroup {
        margin-left: 0;
        margin-right: 0;
    }

    .row-datesgroup .col-sm-2 {
        width: 20%;
        min-height: 70vh;
    }

    .row-datesgroup .connectedDate_drop {
        min-height: 65vh;
    }

    .row-datesgroup .ui-state-highlight {
        padding: 5px;
    }

    .row-datesgroup .row-striped > div:nth-of-type(2n) {
        background-color: #ffffff;
    }

    .row-datesgroup .drag-handle {
        cursor: grab;
    }

    .row-datesgroup .ui-sortable-helper .drag-handle {
        cursor: grabbing;
    }

    .row-datesgroup .scrollable-div {
        box-shadow: -1px 0px 0px 0px #e0e0e0;
    }

    .row-datesgroup .scrollable-div > * {
        padding-left: 1px;
        padding-right: 2px;
    }
}

@media (max-width: 768px) {
    .row-datesgroup {
        margin-left: -5px;
        margin-right: 0;
    }
}

.row-striped > div:nth-of-type(2n+1) {
    background-color: #f9f9f9;
}

.icon-info {
    margin-right: 0;
    vertical-align: -7%;
}

.radioBtns .active {
    background-color: rgba(70, 102, 255, 0.2);
}

/* Keep icon-only filter buttons aligned with text buttons in header filter bars. */
.radioBtns .btn .glyphicon.icon {
    font-size: 1em;
    margin-right: 0;
    line-height: 1;
    vertical-align: middle;
}

.nav-tabs-responsive {
    overflow: auto;
}

.nav-tabs-responsive .nav-tabs {
    min-width: 500px;
    margin-top: 0;
    margin-bottom: 0;
}

.features-clean .item .name {
    margin-bottom: 10px;
}

small.input-group-addon {
    padding-left: 8px;
    padding-right: 8px;
}

.clear-input > span.glyphicon-remove-circle {
    position: absolute;
    right: 15px;
    top: 10px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #666666;
    z-index: 1000;
}

.yearplan-filtername .clear-input > span.glyphicon-remove-circle {
    right: 160px;
}

/* App-specific bootstrap-select width constraints */
.small-staff-select1 .bootstrap-select > .dropdown-toggle {
    max-width: 195px;
}

.small-staff-select2 .bootstrap-select > .dropdown-toggle {
    max-width: 225px;
}

.btn-sm i.glyphicon-remove-circle {
    font-size: 15px;
    line-height: 12px;
    vertical-align: -2px;
}

.jGrowl-notification {
    width: 300px;
    min-width: 10vw;
}

.jGrowl-notification.alert-warning {
    width: 360px;
    min-width: 20vw;
}

#modal-period-msg .alert {
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    #navcol-1 .dropdown:hover .dropdown-menu {
        display: block !important;
    }
}

#navcol-1 .glyp-border {
    display: inline-block;
    padding-top: 11px;
    color: rgba(153, 153, 153, 0.4);
}

@media (min-width: 992px) {
    #navcol-1 .glyp-btn {
        position: relative;
        padding-top: 24px;
        padding-bottom: 8px;
    }

    #navcol-1 .glyp-top {
        position: absolute;
        top: 9px;
        margin-left: 25px;
    }

    #navcol-1 .glyp-top0 { margin-left: 10px; }
    #navcol-1 .glyp-top1 { margin-left: 30px; }
    #navcol-1 .glyp-top2 { margin-left: 55px; }
    #navcol-1 .glyp-top3 { margin-left: 20px; }
    #navcol-1 .glyp-top4 { margin-left: 8px;  }
    #navcol-1 .glyp-top5 { margin-left: 24px; }
    #navcol-1 .glyp-top6 { margin-left: 40px; }
}

.dropdown-menu > li > button {
    width: 100%;
    text-align: left;
    padding: 7px 20px 5px 20px;
}

.my-pagination {
    margin-top: 8px;
    margin-bottom: 8px;
    clear: both;
}

#modal-auto-info1,
#modal-auto-info2 {
    font-size: 14px;
}

#modal-auto-info1 kbd,
#modal-auto-info2 kbd {
    font-size: 14px;
    padding-left: 8px;
    padding-right: 8px;
}

.glyphicon-stopwatch {
    border-top: 4px solid #1485ee;
    padding-top: 1px;
}

header .glyphicon-stopwatch {
    border-top-color: #214a80;
}

#navcol-1 .glyphicon-stopwatch {
    border-top: 2px solid rgb(153, 153, 153);
    padding-top: 0px;
}

#wait_spin {
    position: fixed;
    bottom: 1em;
    z-index: 10000;
    text-align: center;
    width: 100%;
    opacity: 0.5;
}

.radio.disabled label,
.radio-inline.disabled label,
.checkbox.disabled label,
th.disabled,
div.disabled {
    text-decoration: line-through;
    opacity: 0.5;
    cursor: not-allowed;
    color: rgb(85, 85, 85);
}

.navbar-punchclock-iframe {
    position: absolute;
    top: 3px;
    right: 0;
    width: 268px;
    height: 44px;
    margin: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

@media (min-width: 768px) {
    .navbar-punchclock-iframe.is-punchclock-action-open {
        width: 368px;
    }
}

@media (max-width: 767px) {
    .navbar-punchclock-iframe {
        top: 3px;
        right: 58px;
        width: 164px;
        height: 44px;
    }
}

.btn-in-dropdown-menu {
    width: 220px;
    text-align: left;
    color: #555555;
}

#modal-edit div.radio-inline {
    margin-right: 1em;
}

/* Slim scrollbar */
.scrollable-div::-webkit-scrollbar {
    width: 6px;
    transition: width 0.3s ease;
}

.scrollable-div:hover::-webkit-scrollbar {
    width: 8px;
}

.scrollable-div::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    transition: background-color 0.3s ease;
}

.scrollable-div:hover::-webkit-scrollbar-thumb {
    background-color: #999;
}

.scrollable-div {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}

hr.half-r {
    margin: 3px auto;
    text-align: left;
    width: 70%;
}

/* ============================================================
   08 – UTILITIES  — helpers, animations, dark mode
   ============================================================ */

/* Sortable drag-and-drop */
.sortable-ghost  { opacity: 0.5; }
.sortable-chosen { background-color: #e0e0e0; }

/* Glyphicon helpers */
.glyphicon.rotl90 {
    transform: rotate(-90deg);
}

.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

/* Multi-line text truncation */
.ellipsis-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    max-height: 3em;
    line-height: 1.5em;
}

/* Pulsate animation helper */
.pulsate {
    animation: pulsate 250ms infinite ease-in-out;
}

/* — Keyframes ——————————————————————————————————————————————— */

@keyframes fadein {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    80%  { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to   { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}

@keyframes pulsate {
    0%   { opacity: 0.8; }
    50%  { opacity: 0.4; }
    100% { opacity: 0.8; }
}

/* — Dark mode ——————————————————————————————————————————————— */

/* Reusable loading pill */
.pk-loader-host {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 125;
}

.pk-loader-host.pk-loader-host--fixed {
    position: fixed;
    inset: 0;
}

.pk-loader-host.pk-loader-host--absolute {
    position: absolute;
    inset: 0;
}

/* Initial staged loaders must not inherit a moving center from a shell whose
 * height is still being measured. Pin them to the stable viewport area below
 * the application navbar until the staged reveal hands control back. */
.pk-loader-host--viewport-center {
    position: fixed !important;
    top: var(--app-navbar-height, 70px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 900 !important;
}

.pk-loader-host.is-hidden {
    display: none;
}

.pk-loader-shell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0;
    border: 1px solid #c3d6e4;
    border-radius: 999px;
    background: linear-gradient(180deg, #f7fbff 0%, #e7f1f8 100%);
    color: #3d5f76;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 10px rgba(39, 68, 86, 0.16);
    opacity: 1;
    max-height: 48px;
    overflow: hidden;
    transition:
        opacity 220ms ease,
        max-height 260ms ease,
        margin 260ms ease,
        padding 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.pk-loader-shell.is-hiding {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    box-shadow: none;
}

.pk-loader-shell.is-hidden {
    display: none;
}

.pk-loader-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    flex: 0 0 12px;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    animation: spin 0.9s linear infinite;
}

.pk-loader-inline-row {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    border: 1px dashed #b8cad8;
    border-radius: 9px;
    background: linear-gradient(180deg, #f9fcff 0%, #edf4fa 100%);
    color: #44637a;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}

.pk-loader-inline-row.is-visible {
    display: inline-flex;
}

.pk-refresh-swap-overlay:not(.pk-refresh-swap-overlay-next) {
    filter: blur(1px) saturate(0.98) contrast(0.98);
}

.pk-refresh-swap-overlay:not(.pk-refresh-swap-overlay-next)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

.pk-refresh-swap-overlay-next {
    filter: none;
}

/* Yearplan month view: keep Richtwert metric aligned with shared badge depth. */
#yearplan-month-v2 .ym2-progress-metric-target {
    background-clip: padding-box;
    box-shadow: var(--ui-badge-shadow, 0 1px 3px rgba(0,0,0,0.2));
}

/* Yearplan month view: smooth visual handover on in-place query refresh */
#yearplan-filter .yearplan-filter-summary-host,
.yearplan-filter-summary-host,
#page-receipts .receipts-filter-summary-host,
.receipts-filter-summary-host {
    margin-top: 4px;
}

#yearplan-filter .yearplan-filter-summary-host .filter-summary-row,
.yearplan-filter-summary-host .filter-summary-row,
#page-receipts .receipts-filter-summary-host .filter-summary-row,
.receipts-filter-summary-host .filter-summary-row {
    margin-top: 0;
}

#yearplan-filter .yearplan-filter-summary-host.yearplan-summary-host-transitioning,
.yearplan-filter-summary-host.yearplan-summary-host-transitioning {
    transition: height 150ms cubic-bezier(0.22, 0.78, 0.2, 1);
}

.yearplan-filter-summary-host .filter-summary-row {
    opacity: 1;
    transform: translateY(0);
    transform-origin: top center;
    transition:
        opacity 150ms ease,
        transform 150ms cubic-bezier(0.22, 0.78, 0.2, 1);
    will-change: opacity, transform;
}

.yearplan-filter-summary-host .filter-summary-row.yearplan-summary-row-transition-pre,
.yearplan-filter-summary-host .filter-summary-row.yearplan-summary-row-transition-out {
    opacity: 0;
    transform: translateY(-14px);
}

.yearplan-filter-summary-host.yearplan-summary-host-has-placeholder .yearplan-summary-row-placeholder {
    pointer-events: none;
}

.yearplan-filter-summary-host .yearplan-summary-card-placeholder {
    opacity: 0.72;
}

.yearplan-filter-summary-host .yearplan-summary-pill-placeholder {
    opacity: 0.72;
}

/* Receipts filter summary: shared-core transition classes */
.receipts-filter-summary-host.receipts-summary-host-transitioning {
    transition: height 150ms cubic-bezier(0.22, 0.78, 0.2, 1);
}

.receipts-filter-summary-host .filter-summary-row {
    opacity: 1;
    transform: translateY(0);
    transform-origin: top center;
    transition:
        opacity 150ms ease,
        transform 150ms cubic-bezier(0.22, 0.78, 0.2, 1);
    will-change: opacity, transform;
}

.receipts-filter-summary-host .filter-summary-row.receipts-summary-row-transition-pre,
.receipts-filter-summary-host .filter-summary-row.receipts-summary-row-transition-out {
    opacity: 0;
    transform: translateY(-14px);
}

.receipts-filter-summary-host.receipts-summary-host-has-placeholder .receipts-summary-row-placeholder {
    pointer-events: none;
}

.receipts-filter-summary-host .receipts-summary-card-placeholder,
.receipts-filter-summary-host .receipts-summary-pill-placeholder {
    opacity: 0.72;
}

#yearplan-month-v2 .ym2-rows-layer {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 0.78, 0.2, 1);
    will-change: opacity, transform;
}

#yearplan-month-v2 .ym2-grid-header {
    transition: opacity 160ms ease;
}

#yearplan-month-v2.ym2-query-refreshing .ym2-rows-layer {
    opacity: 0.4;
    transform: translateY(5px);
}

#yearplan-month-v2.ym2-query-refreshing .ym2-grid-header {
    opacity: 1;
}

#yearplan-month-v2.ym2-query-refresh-hold .ym2-rows-layer {
    opacity: 0 !important;
    transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .yearplan-filter-summary-host.yearplan-summary-host-transitioning,
    .yearplan-filter-summary-host .filter-summary-row {
        transition: none !important;
    }

    .receipts-filter-summary-host.receipts-summary-host-transitioning,
    .receipts-filter-summary-host .filter-summary-row {
        transition: none !important;
    }

    #yearplan-month-v2 .ym2-rows-layer,
    #yearplan-month-v2 .ym2-grid-header {
        transition: none !important;
    }

    #yearplan-month-v2.ym2-query-refreshing .ym2-rows-layer {
        opacity: 1;
        transform: none;
    }

    #yearplan-month-v2.ym2-query-refreshing .ym2-grid-header {
        opacity: 1;
    }

    #yearplan-month-v2.ym2-query-refresh-hold .ym2-rows-layer {
        opacity: 1 !important;
        transform: none !important;
    }

    .pk-loader-shell {
        transition: none !important;
    }

    .pk-loader-icon {
        animation: none !important;
    }
}

/* Shared native-scroll table frame. The parent owns the visible outline and
 * clips the browser scrollbar; the child remains the only scroll owner. */
.pk-table-outline-frame {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #cbdbe7;
    border-radius: 10px;
    background: #f8f9fa;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
}

.pk-table-outline-frame > .pk-table-outline-scroll,
.pk-table-outline-frame > .native-sticky-table-wrapper {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
    box-sizing: border-box;
}

.pk-table-outline-frame > .pk-table-outline-scroll > table,
.pk-table-outline-frame > .native-sticky-table-wrapper > table {
    margin-bottom: 0;
}

.pk-table-outline-frame > .pk-table-outline-scroll > table > thead > tr:first-child > th:first-child,
.pk-table-outline-frame > .pk-table-outline-scroll > table > thead > tr:first-child > th:last-child,
.pk-table-outline-frame > .native-sticky-table-wrapper > table > thead > tr:first-child > th:first-child,
.pk-table-outline-frame > .native-sticky-table-wrapper > table > thead > tr:first-child > th:last-child {
    border-radius: 0 !important;
}

/* Keep the visible table frame content-fitted while the page itself still
 * occupies the viewport. The flexible gap belongs before the footer, not
 * inside a white table shell or grey scrolling surface. */
body:has(.pk-table-outline-frame) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body:has(.pk-table-outline-frame) > .site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
}

html.darkmode {
    filter: invert(99%);
}