/*
 * CoPlanner Theme Foundation — clean-room Bootstrap variable overrides.
 *
 * Every value measured from the rendered app (Playwright computed-style
 * inspection) or taken from the compiled Bootstrap CSS variable block that
 * the previous vendor stylesheet exposed.  No code copied from any
 * third-party theme source.
 *
 * Loaded after Bootstrap CDN; overrides Bootstrap's default CSS variables
 * and adds the component-level overrides the app depends on.
 */

/* ─── 1. Global Bootstrap variable overrides ───────────────────────────── */

:root,
[data-bs-theme=light] {
  /* Color palette */
  --bs-blue:    #1890ff;
  --bs-indigo:  #6610f2;
  --bs-purple:  #6f42c1;
  --bs-pink:    #e83e8c;
  --bs-red:     #ff4d4f;
  --bs-orange:  #fd7e14;
  --bs-yellow:  #faad14;
  --bs-green:   #52c41a;
  --bs-teal:    #20c997;
  --bs-cyan:    #13c2c2;
  --bs-black:   #000000;
  --bs-white:   #ffffff;

  /* Semantic colors */
  --bs-primary:   #1890ff;
  --bs-secondary: #6c757d;
  --bs-success:   #52c41a;
  --bs-info:      #13c2c2;
  --bs-warning:   #faad14;
  --bs-danger:    #ff4d4f;
  --bs-light:     #f8f9fa;
  --bs-dark:      #141414;

  /* RGB values */
  --bs-primary-rgb:   24, 144, 255;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb:   82, 196, 26;
  --bs-info-rgb:      19, 194, 194;
  --bs-warning-rgb:   250, 173, 20;
  --bs-danger-rgb:    255, 77, 79;
  --bs-light-rgb:     248, 249, 250;
  --bs-dark-rgb:      20, 20, 20;

  /* Emphasis / subtle variants */
  --bs-primary-text-emphasis:   #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis:   #0a3622;
  --bs-info-text-emphasis:      #055160;
  --bs-warning-text-emphasis:   #664d03;
  --bs-danger-text-emphasis:    #58151c;
  --bs-light-text-emphasis:     #495057;
  --bs-dark-text-emphasis:      #495057;

  --bs-primary-bg-subtle:   #d1e9ff;
  --bs-secondary-bg-subtle: #f8f9fa;
  --bs-success-bg-subtle:   #dcf3d1;
  --bs-info-bg-subtle:      #d0f3f3;
  --bs-warning-bg-subtle:   #feefd0;
  --bs-danger-bg-subtle:    #ffdbdc;
  --bs-light-bg-subtle:     #fcfcfd;
  --bs-dark-bg-subtle:      #ced4da;

  --bs-primary-border-subtle:   #a3d3ff;
  --bs-secondary-border-subtle: #e9ecef;
  --bs-success-border-subtle:   #bae7a3;
  --bs-info-border-subtle:      #a1e7e7;
  --bs-warning-border-subtle:   #fddea1;
  --bs-danger-border-subtle:    #ffb8b9;
  --bs-light-border-subtle:     #e9ecef;
  --bs-dark-border-subtle:      #adb5bd;

  /* Typography */
  --bs-font-sans-serif: "Public Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size:   0.875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color:       #212529;
  --bs-body-color-rgb:   33, 37, 41;

  /* Body background */
  --bs-body-bg:     #fafafb;
  --bs-body-bg-rgb: 250, 250, 251;

  /* Secondary/tertiary colors */
  --bs-emphasis-color:     #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color:        rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb:    33, 37, 41;
  --bs-secondary-bg:           #e9ecef;
  --bs-secondary-bg-rgb:       233, 236, 239;
  --bs-tertiary-color:         rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb:     33, 37, 41;
  --bs-tertiary-bg:            #f8f9fa;
  --bs-tertiary-bg-rgb:        248, 249, 250;

  /* Headings / links */
  --bs-heading-color:         #262626;
  --bs-link-color:            #1890ff;
  --bs-link-color-rgb:        24, 144, 255;
  --bs-link-decoration:       none;
  --bs-link-hover-color:      #1373cc;
  --bs-link-hover-color-rgb:  19, 115, 204;
  --bs-link-hover-decoration: underline;

  /* Borders */
  --bs-border-width:  1px;
  --bs-border-style:  solid;
  --bs-border-color:  #e6ebf1;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

  /* Border radii — 4px base (vs Bootstrap's 6px default) */
  --bs-border-radius:      4px;
  --bs-border-radius-sm:   2px;
  --bs-border-radius-lg:   6px;
  --bs-border-radius-xl:   8rem;
  --bs-border-radius-xxl:  2rem;
  --bs-border-radius-2xl:  var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;

  /* Shadows */
  --bs-box-shadow:        0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm:     0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg:     0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset:  inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* Focus ring */
  --bs-focus-ring-width:   0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color:   rgba(24, 144, 255, 0.25);

  /* Form validation */
  --bs-form-valid-color:         #198754;
  --bs-form-valid-border-color:  #198754;
  --bs-form-invalid-color:       #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

/* ─── 2. Heading overrides (smaller than Bootstrap defaults) ────────────── */

h6, .h6,
h5, .h5,
h4, .h4,
h3, .h3,
h2, .h2,
h1, .h1 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

h1, .h1,
h2, .h2 {
  font-weight: 700;
}

h1, .h1 { font-size: calc(1.3625rem + 1.35vw); }
@media (min-width: 1200px) {
  h1, .h1 { font-size: 2.375rem; }
}

h2, .h2 { font-size: calc(1.3125rem + 0.75vw); }
@media (min-width: 1200px) {
  h2, .h2 { font-size: 1.875rem; }
}

h3, .h3 { font-size: calc(1.275rem + 0.3vw); }
@media (min-width: 1200px) {
  h3, .h3 { font-size: 1.5rem; }
}

h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

/* ─── 3. Card component overrides ──────────────────────────────────────── */

.card {
  --bs-card-spacer-y:           25px;
  --bs-card-spacer-x:           25px;
  --bs-card-title-spacer-y:     0.5rem;
  --bs-card-border-width:       1px;
  --bs-card-border-color:       #e6ebf1;
  --bs-card-border-radius:      4px;
  --bs-card-box-shadow:         0px 8px 24px rgba(27, 46, 94, 0.08);
  --bs-card-inner-border-radius: calc(4px - 1px);
  --bs-card-cap-padding-y:      25px;
  --bs-card-cap-padding-x:      25px;
  --bs-card-cap-bg:             transparent;
  --bs-card-bg:                 #ffffff;
  --bs-card-img-overlay-padding: 1.25rem;
  --bs-card-group-margin:       0.75rem;
}

/* ─── 4. Button base overrides ──────────────────────────────────────────── */

.btn {
  --bs-btn-padding-x:      1rem;
  --bs-btn-padding-y:      0.407rem;
  --bs-btn-font-size:      0.875rem;
  --bs-btn-font-weight:    400;
  --bs-btn-line-height:    1.5;
  --bs-btn-border-radius:  4px;
  --bs-btn-border-width:   1px;
}

/* ─── 5. Button variants ─────────────────────────────────────────────────── */

.btn-primary {
  --bs-btn-color:              #ffffff;
  --bs-btn-bg:                 #1890ff;
  --bs-btn-border-color:       #1890ff;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #147ad9;
  --bs-btn-hover-border-color: #1373cc;
  --bs-btn-focus-shadow-rgb:   59, 161, 255;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #1373cc;
  --bs-btn-active-border-color: #126cbf;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #ffffff;
  --bs-btn-disabled-bg:        #1890ff;
  --bs-btn-disabled-border-color: #1890ff;
}

.btn-secondary {
  --bs-btn-color:              #ffffff;
  --bs-btn-bg:                 #6c757d;
  --bs-btn-border-color:       #6c757d;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb:   130, 138, 145;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #ffffff;
  --bs-btn-disabled-bg:        #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
  --bs-btn-color:              #ffffff;
  --bs-btn-bg:                 #52c41a;
  --bs-btn-border-color:       #52c41a;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #46a716;
  --bs-btn-hover-border-color: #429d15;
  --bs-btn-focus-shadow-rgb:   108, 205, 60;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #429d15;
  --bs-btn-active-border-color: #3e9314;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #ffffff;
  --bs-btn-disabled-bg:        #52c41a;
  --bs-btn-disabled-border-color: #52c41a;
}

.btn-info {
  --bs-btn-color:              #ffffff;
  --bs-btn-bg:                 #13c2c2;
  --bs-btn-border-color:       #13c2c2;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #10a5a5;
  --bs-btn-hover-border-color: #0f9b9b;
  --bs-btn-focus-shadow-rgb:   54, 203, 203;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #0f9b9b;
  --bs-btn-active-border-color: #0e9292;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #ffffff;
  --bs-btn-disabled-bg:        #13c2c2;
  --bs-btn-disabled-border-color: #13c2c2;
}

.btn-warning {
  --bs-btn-color:              #ffffff;
  --bs-btn-bg:                 #faad14;
  --bs-btn-border-color:       #faad14;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #d59311;
  --bs-btn-hover-border-color: #c88a10;
  --bs-btn-focus-shadow-rgb:   251, 185, 55;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #c88a10;
  --bs-btn-active-border-color: #bc820f;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #ffffff;
  --bs-btn-disabled-bg:        #faad14;
  --bs-btn-disabled-border-color: #faad14;
}

.btn-danger {
  --bs-btn-color:              #ffffff;
  --bs-btn-bg:                 #ff4d4f;
  --bs-btn-border-color:       #ff4d4f;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #d94143;
  --bs-btn-hover-border-color: #cc3e3f;
  --bs-btn-focus-shadow-rgb:   255, 104, 105;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #cc3e3f;
  --bs-btn-active-border-color: #bf3a3b;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #ffffff;
  --bs-btn-disabled-bg:        #ff4d4f;
  --bs-btn-disabled-border-color: #ff4d4f;
}

.btn-light {
  --bs-btn-color:              #212529;
  --bs-btn-bg:                 #f8f9fa;
  --bs-btn-border-color:       #f8f9fa;
  --bs-btn-hover-color:        #212529;
  --bs-btn-hover-bg:           #d3d4d5;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-focus-shadow-rgb:   216, 217, 219;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #212529;
  --bs-btn-disabled-bg:        #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
  --bs-btn-color:              #ffffff;
  --bs-btn-bg:                 #141414;
  --bs-btn-border-color:       #141414;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #373737;
  --bs-btn-hover-border-color: #2c2c2c;
  --bs-btn-focus-shadow-rgb:   55, 55, 55;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #434343;
  --bs-btn-active-border-color: #2c2c2c;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #ffffff;
  --bs-btn-disabled-bg:        #141414;
  --bs-btn-disabled-border-color: #141414;
}

/* Outline variants */
.btn-outline-primary {
  --bs-btn-color:              #1890ff;
  --bs-btn-border-color:       #1890ff;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #1890ff;
  --bs-btn-hover-border-color: #1890ff;
  --bs-btn-focus-shadow-rgb:   24, 144, 255;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #1890ff;
  --bs-btn-active-border-color: #1890ff;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #1890ff;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #1890ff;
}

.btn-outline-secondary {
  --bs-btn-color:              #6c757d;
  --bs-btn-border-color:       #6c757d;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb:   108, 117, 125;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:     #6c757d;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-outline-success {
  --bs-btn-color:              #52c41a;
  --bs-btn-border-color:       #52c41a;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #52c41a;
  --bs-btn-hover-border-color: #52c41a;
  --bs-btn-focus-shadow-rgb:   82, 196, 26;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #52c41a;
  --bs-btn-active-border-color: #52c41a;
  --bs-btn-disabled-color:     #52c41a;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #52c41a;
}

.btn-outline-danger {
  --bs-btn-color:              #ff4d4f;
  --bs-btn-border-color:       #ff4d4f;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #ff4d4f;
  --bs-btn-hover-border-color: #ff4d4f;
  --bs-btn-focus-shadow-rgb:   255, 77, 79;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #ff4d4f;
  --bs-btn-active-border-color: #ff4d4f;
  --bs-btn-disabled-color:     #ff4d4f;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #ff4d4f;
}

.btn-outline-warning {
  --bs-btn-color:              #faad14;
  --bs-btn-border-color:       #faad14;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #faad14;
  --bs-btn-hover-border-color: #faad14;
  --bs-btn-focus-shadow-rgb:   250, 173, 20;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #faad14;
  --bs-btn-active-border-color: #faad14;
  --bs-btn-disabled-color:     #faad14;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #faad14;
}

.btn-outline-info {
  --bs-btn-color:              #13c2c2;
  --bs-btn-border-color:       #13c2c2;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #13c2c2;
  --bs-btn-hover-border-color: #13c2c2;
  --bs-btn-focus-shadow-rgb:   19, 194, 194;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #13c2c2;
  --bs-btn-active-border-color: #13c2c2;
  --bs-btn-disabled-color:     #13c2c2;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #13c2c2;
}

.btn-outline-light {
  --bs-btn-color:              #f8f9fa;
  --bs-btn-border-color:       #f8f9fa;
  --bs-btn-hover-color:        #212529;
  --bs-btn-hover-bg:           #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb:   248, 249, 250;
  --bs-btn-active-color:       #212529;
  --bs-btn-active-bg:          #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-disabled-color:     #f8f9fa;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-outline-dark {
  --bs-btn-color:              #141414;
  --bs-btn-border-color:       #141414;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #141414;
  --bs-btn-hover-border-color: #141414;
  --bs-btn-focus-shadow-rgb:   20, 20, 20;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #141414;
  --bs-btn-active-border-color: #141414;
  --bs-btn-disabled-color:     #141414;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #141414;
}

/* ─── 6. Nav overrides ───────────────────────────────────────────────────── */

.nav-tabs {
  --bs-nav-tabs-border-width:            1px;
  --bs-nav-tabs-border-color:            var(--bs-border-color);
  --bs-nav-tabs-border-radius:           4px;
  --bs-nav-tabs-link-hover-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-border-color);
  --bs-nav-tabs-link-active-color:       var(--bs-body-color);
  --bs-nav-tabs-link-active-bg:          var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

.nav-pills {
  --bs-nav-pills-border-radius:      4px;
  --bs-nav-pills-link-active-color:  #ffffff;
  --bs-nav-pills-link-active-bg:     var(--bs-primary);
}

/* ─── 7. Form overrides ──────────────────────────────────────────────────── */

.form-control,
.form-select {
  --bs-border-radius: 4px;
}

/* ─── 8. Badge overrides ─────────────────────────────────────────────────── */

.badge {
  --bs-badge-border-radius: 4px;
}

/* ─── 9. Modal overrides ─────────────────────────────────────────────────── */

.modal-content {
  --bs-modal-border-radius: 4px;
  --bs-modal-border-color:  #e6ebf1;
}

/* ─── 10. Dropdown overrides ─────────────────────────────────────────────── */

.dropdown-menu {
  --bs-dropdown-border-color:  #e6ebf1;
  --bs-dropdown-border-radius: 4px;
  --bs-dropdown-link-color:    #212529;
  --bs-dropdown-link-hover-color: var(--bs-dropdown-link-color);
  --bs-dropdown-link-hover-bg: #e9ecef;
  --bs-dropdown-link-active-color: var(--bs-dropdown-link-color);
  --bs-dropdown-link-active-bg: #e9ecef;
  --bs-dropdown-box-shadow:    0 4px 24px 0 rgba(62, 57, 107, 0.18);
  --bs-dropdown-font-size:     0.875rem;
  --bs-dropdown-item-padding-x: 1.5rem;
  --bs-dropdown-item-padding-y: 0.65rem;
  --bs-dropdown-item-border-radius: 0;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1.5rem;
  --bs-dropdown-header-padding-y: 0.5rem;
}

/* ─── 11. List group overrides ───────────────────────────────────────────── */

.list-group {
  --bs-list-group-border-color: #e6ebf1;
  --bs-list-group-border-radius: 4px;
}

/* ─── 12. Table overrides ────────────────────────────────────────────────── */

.table {
  --bs-table-color: #212529;
  --bs-table-bg: transparent;
  --bs-table-border-color: #e6ebf1;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #212529;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: rgba(24, 144, 255, 0.02);
  --bs-table-font-size: 0.875rem;
}

/* Table cell padding — vendor uses 0.9rem 0.75rem (Bootstrap default is 0.5rem 0.5rem) */
.table > :not(caption) > * > * {
  padding: 0.9rem 0.75rem;
}

/* Table-sm cell padding — vendor uses 0.3rem 0.3rem */
.table-sm > :not(caption) > * > * {
  padding: 0.3rem 0.3rem;
}

/* ─── 13. Alert overrides ────────────────────────────────────────────────── */

.alert {
  --bs-alert-border-radius: 4px;
}

/* ─── 14. Progress overrides ─────────────────────────────────────────────── */

.progress {
  --bs-progress-border-radius: 4px;
  --bs-progress-bg:            #e9ecef;
  --bs-progress-bar-bg:        #1890ff;
}

/* ─── 15. Tooltip / popover overrides ────────────────────────────────────── */

.tooltip {
  --bs-tooltip-border-radius: 4px;
}

.popover {
  --bs-popover-border-color:  #e6ebf1;
  --bs-popover-border-radius: 4px;
}

/* ─── 16. Input group overrides ──────────────────────────────────────────── */

.input-group-text {
  --bs-border-radius: 4px;
}

/* ─── 17. Table border-color fix (Bootstrap 5.3.2 doesn't inherit variable) */

.table > :not(caption) > * > * {
  border-bottom-color: var(--bs-table-border-color);
}

.table-bordered > :not(caption) > * {
  border-color: var(--bs-table-border-color);
}

.table-bordered > :not(caption) > * > * {
  border-color: var(--bs-table-border-color);
}

/* Table hover background — vendor uses primary-tinted hover */
.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

/* ─── 18. btn-light-* variants (vendor custom button colors) ────────────── */

.btn-light-primary {
  background: #e8f4ff;
  color: #1890ff;
  border-color: #e8f4ff;
}
.btn-light-primary:hover {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
}
.btn-light-primary:focus {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
}
.btn-light-primary:active,
.btn-light-primary.active,
.show > .btn-light-primary.dropdown-toggle {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.btn-light-secondary {
  background: #f0f1f2;
  color: #6c757d;
  border-color: #f0f1f2;
}
.btn-light-secondary:hover {
  background: #6c757d;
  color: #fff;
  border-color: #6c757d;
}
.btn-light-secondary:focus {
  background: #6c757d;
  color: #fff;
  border-color: #6c757d;
}

.btn-light-success {
  background: #dcf3d1;
  color: #52c41a;
  border-color: #dcf3d1;
}
.btn-light-success:hover {
  background: #52c41a;
  color: #fff;
  border-color: #52c41a;
}
.btn-light-success:focus {
  background: #52c41a;
  color: #fff;
  border-color: #52c41a;
}

.btn-light-info {
  background: #d0f3f3;
  color: #13c2c2;
  border-color: #d0f3f3;
}
.btn-light-info:hover {
  background: #13c2c2;
  color: #fff;
  border-color: #13c2c2;
}
.btn-light-info:focus {
  background: #13c2c2;
  color: #fff;
  border-color: #13c2c2;
}

.btn-light-warning {
  background: #feefd0;
  color: #faad14;
  border-color: #feefd0;
}
.btn-light-warning:hover {
  background: #faad14;
  color: #fff;
  border-color: #faad14;
}
.btn-light-warning:focus {
  background: #faad14;
  color: #fff;
  border-color: #faad14;
}

.btn-light-danger {
  background: #ffdbdc;
  color: #ff4d4f;
  border-color: #ffdbdc;
}
.btn-light-danger:hover {
  background: #ff4d4f;
  color: #fff;
  border-color: #ff4d4f;
}
.btn-light-danger:focus {
  background: #ff4d4f;
  color: #fff;
  border-color: #ff4d4f;
}

.btn-light-dark {
  background: #e9ecef;
  color: #141414;
  border-color: #e9ecef;
}
.btn-light-dark:hover {
  background: #141414;
  color: #fff;
  border-color: #141414;
}
.btn-light-dark:focus {
  background: #141414;
  color: #fff;
  border-color: #141414;
}

.btn-light-light {
  background: #fcfcfd;
  color: #f8f9fa;
  border-color: #fcfcfd;
}
.btn-light-light:hover {
  background: #f8f9fa;
  color: #212529;
  border-color: #f8f9fa;
}

/* ─── 19. Authentication page styles (vendor .auth-* classes) ──────────── */

.auth-main {
  position: relative;
}

.auth-main .auth-wrapper {
  height: 100%;
  width: 100%;
  min-height: 100vh;
}

.auth-main .auth-wrapper .saprator {
  position: relative;
  display: flex;
  align-self: center;
  justify-content: center;
}

.auth-main .auth-wrapper .saprator:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--bs-border-color);
  z-index: 1;
}

.auth-main .auth-wrapper .saprator span {
  font-size: 0.875rem;
  padding: 8px 24px;
  background: var(--bs-card-bg);
  z-index: 5;
  text-transform: capitalize;
  color: var(--bs-heading-color);
  font-weight: 500;
}

.auth-main .auth-wrapper.v3 {
  display: flex;
  align-items: center;
}

.auth-main .auth-wrapper.v3 .auth-form {
  flex-direction: column;
  background: url("/images/authentication/login.png");
  min-height: 100vh;
  padding: 24px;
  background-repeat: no-repeat;
  background-size: auto 75%;
  background-position: left center;
  position: relative;
  justify-content: space-between;
}

.auth-main .auth-wrapper.v3 .auth-form > * {
  position: relative;
  z-index: 5;
}

.auth-main .auth-wrapper.v3 .auth-form:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.auth-main .auth-wrapper .auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.auth-main .auth-wrapper .auth-form .card {
  width: 100%;
  max-width: 480px;
  box-shadow: none;
}

.auth-main .auth-wrapper .auth-form img + span {
  padding-left: 10px;
}

.auth-main .auth-wrapper .auth-form h5 span,
.auth-main .auth-wrapper .auth-form .h5 span {
  text-decoration: underline;
}

.auth-main .auth-wrapper .auth-footer,
.auth-main .auth-wrapper .auth-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ─── 20. Table cell border-color fix (Bootstrap 5.3.2 doesn't inherit) ─── */

.table > :not(caption) > * > * {
  border-bottom-color: var(--bs-table-border-color);
}

.table-bordered > :not(caption) > * {
  border-color: var(--bs-table-border-color);
}

.table-bordered > :not(caption) > * > * {
  border-color: var(--bs-table-border-color);
}

/* ─── 21. Table color variants (vendor overrides for .table-*) ─────────── */

.table-primary {
  --bs-table-color: #212529;
  --bs-table-bg: #d1e9ff;
  --bs-table-border-color: #bfd5ea;
  --bs-table-striped-bg: #c8dff4;
  --bs-table-active-bg: #bfd5ea;
  --bs-table-hover-bg: #cde5fb;
}

.table-secondary {
  --bs-table-color: #212529;
  --bs-table-bg: #e2e3e5;
  --bs-table-border-color: #cfd0d2;
  --bs-table-striped-bg: #d8dadc;
  --bs-table-active-bg: #cfd0d2;
  --bs-table-hover-bg: #dedfe1;
}

.table-success {
  --bs-table-color: #212529;
  --bs-table-bg: #dcf3d1;
  --bs-table-border-color: #c9dec0;
  --bs-table-striped-bg: #d3e9c9;
  --bs-table-active-bg: #c9dec0;
  --bs-table-hover-bg: #d8efce;
}

.table-info {
  --bs-table-color: #212529;
  --bs-table-bg: #d0f3f3;
  --bs-table-border-color: #bfdedf;
  --bs-table-striped-bg: #c7e9e9;
  --bs-table-active-bg: #bfdedf;
  --bs-table-hover-bg: #cdefef;
}

.table-warning {
  --bs-table-color: #212529;
  --bs-table-bg: #feefd0;
  --bs-table-border-color: #e8dbbf;
  --bs-table-striped-bg: #f3e5c8;
  --bs-table-active-bg: #e8dbbf;
  --bs-table-hover-bg: #faebcd;
}

.table-danger {
  --bs-table-color: #212529;
  --bs-table-bg: #ffdbdc;
  --bs-table-border-color: #e9c9ca;
  --bs-table-striped-bg: #f4d2d3;
  --bs-table-active-bg: #e9c9ca;
  --bs-table-hover-bg: #fbd7d8;
}

.table-light {
  --bs-table-color: #212529;
  --bs-table-bg: #f8f9fa;
  --bs-table-border-color: #e3e4e5;
  --bs-table-striped-bg: #edeef0;
  --bs-table-active-bg: #e3e4e5;
  --bs-table-hover-bg: #f4f5f6;
}

.table-dark {
  --bs-table-color: #ffffff;
  --bs-table-bg: #141414;
  --bs-table-border-color: #2c2c2c;
  --bs-table-striped-bg: #202020;
  --bs-table-active-bg: #2c2c2c;
  --bs-table-hover-bg: #191919;
}

/* ─── 22. Dropdown toggle arrow suppression (.arrow-none) ──────────────── */

.dropdown-toggle.arrow-none::after,
.dropdown-toggle.arrow-none::before {
  display: none !important;
}

/* ─── 23. Form controls (vendor: 0.65rem padding, #ced4da border) ───────── */

.form-control {
  display: block;
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  appearance: none;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  color: #212529;
  background-color: #f8f9fa;
  border-color: var(--bs-primary);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.1);
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.65rem 2rem 0.65rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select:focus {
  border-color: var(--bs-primary);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.1);
}

.form-label {
  margin-bottom: 0.5rem;
  color: var(--bs-heading-color);
}

.form-text {
  margin-top: 0.25rem;
  font-size: 80%;
  color: #6c757d;
}

/* ─── 24. Input group (vendor: 0.65rem padding, #fafafb bg) ─────────────── */

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #fafafb;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* ─── 25. Accordion (vendor: 4px radius, primary-tinted active) ─────────── */

.accordion {
  --bs-accordion-color: #212529;
  --bs-accordion-bg: #ffffff;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 4px;
  --bs-accordion-inner-border-radius: 3px;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: #212529;
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-focus-border-color: var(--bs-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: #1682e6;
  --bs-accordion-active-bg: #e8f4ff;
}

.accordion-button {
  font-size: 0.875rem;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
}

/* ─── 26. Breadcrumb (vendor: SVG chevron divider, no padding) ──────────── */

.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: #6c757d;
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: #6c757d;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' stroke='%236c757d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"));
}

/* ─── 27. Pagination (vendor: 0.375rem padding, #dee2e6 border) ─────────── */

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: #ffffff;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-border-radius: 4px;
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: #e9ecef;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: #e9ecef;
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #ffffff;
  --bs-pagination-disabled-border-color: #dee2e6;
}

/* ─── 28. Modal (vendor: 500px width, 1.25rem padding) ──────────────────── */

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1.25rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-bg: #ffffff;
  --bs-modal-border-color: rgba(0, 0, 0, 0.2);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 6px;
  --bs-modal-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
  --bs-modal-inner-border-radius: 5px;
  --bs-modal-header-padding-x: 1.5625rem;
  --bs-modal-header-padding-y: 1.25rem;
  --bs-modal-header-padding: 1.25rem 1.5625rem;
  --bs-modal-header-border-color: #e6ebf1;
  --bs-modal-header-border-width: 1px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: #e6ebf1;
  --bs-modal-footer-border-width: 1px;
}

/* ─── 29. btn-close (vendor: primary-tinted focus shadow) ───────────────── */

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ─── 30. Small / .small — vendor uses 80% (Bootstrap default is 0.875em) ── */

small,
.small {
  font-size: 80%;
}

/* ─── 31. Lead — vendor uses 1.09375rem (Bootstrap default is 1.25rem) ──── */

.lead {
  font-size: 1.09375rem;
  font-weight: 300;
}

/* ─── 32. Display headings — vendor uses smaller sizes ──────────────────── */

.display-1 { font-size: calc(1.625rem + 4.5vw); font-weight: 300; line-height: 1.2; }
.display-2 { font-size: calc(1.575rem + 3.9vw); font-weight: 300; line-height: 1.2; }
.display-3 { font-size: calc(1.525rem + 3.3vw); font-weight: 300; line-height: 1.2; }
.display-4 { font-size: calc(1.475rem + 2.7vw); font-weight: 300; line-height: 1.2; }
.display-5 { font-size: calc(1.425rem + 2.1vw); font-weight: 300; line-height: 1.2; }
.display-6 { font-size: calc(1.375rem + 1.5vw); font-weight: 300; line-height: 1.2; }

@media (min-width: 1200px) {
  .display-1 { font-size: 5rem; }
  .display-2 { font-size: 4.5rem; }
  .display-3 { font-size: 4rem; }
  .display-4 { font-size: 3.5rem; }
  .display-5 { font-size: 3rem; }
  .display-6 { font-size: 2.5rem; }
}

/* ─── 33. Blockquote — vendor uses 1.09375rem ───────────────────────────── */

.blockquote {
  font-size: 1.09375rem;
}

/* ─── 34. Tooltip / popover border colour ────────────────────────────────── */

.tooltip {
  --bs-tooltip-bg: #000000;
  --bs-tooltip-color: #ffffff;
  --bs-tooltip-border-radius: 4px;
}

.popover {
  --bs-popover-border-color: #e6ebf1;
  --bs-popover-border-radius: 4px;
  --bs-popover-header-bg: #fafafb;
  --bs-popover-body-font-size: 0.875rem;
}

/* ─── 35. Custom drag preview (planboard drag-and-drop) ─────────────────── */

.custom-drag-preview {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 1;
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background-color: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: inherit;
}

/* ─── 36. Planboard header cell padding (vendor: larger than .table-sm) ─── */

#calendar thead th,
#calendar thead .header-cell {
  padding: 0.75rem 0.5rem;
}

/* ─── 37. Dropdown item explicit padding (fixes variable inheritance) ──── */

.dropdown-item {
  padding: 0.65rem 1.5rem;
  border-radius: 0;
  color: #212529;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color, #212529);
  background-color: var(--bs-dropdown-link-hover-bg, #e9ecef);
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color, #212529);
  background-color: var(--bs-dropdown-link-active-bg, #e9ecef);
}

/* ─── 38. Link decoration — no underlines on base (vendor override) ─────── */

a {
  text-decoration: none;
}

/* ─── 39. Timesheet month card padding-bottom ───────────────────────────── */

/* Month cards on timesheets index and my_timesheets pages use .card-body.p-2
   which gives 8px padding. The vendor's card-body had more bottom padding
   to give the week badges room. Add explicit bottom padding. */
.card.border-0.shadow-sm > .card-body.p-2 {
  padding-bottom: 1.5rem !important;
}

/* ─── 40. Favicon / company logo icons ─────────────────────────────────── */

/* Logos are designed for light backgrounds; give them a white pill so they  */
/* remain legible against any card surface and stay consistently sized.       */
.favicon-icon {
  background-color: #ffffff;
  padding: 3px;
  border-radius: 4px;
}

/* ─── 41. Table vertical-align middle (vendor default was top/bottom) ──── */

.table > :not(caption) > * > * {
  vertical-align: middle;
}

.table > thead {
  vertical-align: middle;
}