/*!
 * Gopinath Infotech — Project & Accounting Management System
 * Design system (tokens, Bootstrap mapping, layout, components).
 */

/* ==========================================================================
   1. Fonts
   ========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/inter/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/inter/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/inter/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/inter/inter-700.woff2") format("woff2"); }

/* ==========================================================================
   2. Tokens + Bootstrap variable mapping
   ========================================================================== */
:root {
    --gi-navy-950: #06122A;
    --gi-navy-900: #0A1B3D;
    --gi-navy-800: #0F2A57;
    --gi-deep: #183C84;
    --gi-primary: #1A4B94;
    --gi-royal: #1860A8;
    --gi-sky: #2490CC;
    --gi-green: #6CA83C;
    --gi-green-600: #5A9431;
    --gi-green-400: #8CC152;
    --gi-amber: #F59E0B;
    --gi-red: #DC3545;
    --gi-info: #2490CC;

    --gi-gray-25: #FAFBFD;
    --gi-gray-50: #F6F8FB;
    --gi-gray-100: #EEF2F7;
    --gi-gray-200: #E3E8EF;
    --gi-gray-300: #CFD7E3;
    --gi-gray-400: #98A4B7;
    --gi-gray-500: #6B7A90;
    --gi-gray-600: #4A5870;
    --gi-gray-700: #334155;
    --gi-ink: #0F172A;

    --gi-primary-rgb: 26, 75, 148;
    --gi-royal-rgb: 24, 96, 168;
    --gi-sky-rgb: 36, 144, 204;
    --gi-green-rgb: 108, 168, 60;
    --gi-amber-rgb: 245, 158, 11;
    --gi-red-rgb: 220, 53, 69;
    --gi-navy-rgb: 10, 27, 61;
    --gi-ink-rgb: 15, 23, 42;

    --gi-gradient: linear-gradient(135deg, #183C84 0%, #1860A8 55%, #2490CC 100%);
    --gi-gradient-green: linear-gradient(135deg, #6CA83C 0%, #8CC152 100%);
    --gi-gradient-navy: linear-gradient(180deg, #06122A 0%, #0A1B3D 100%);

    --gi-radius-xs: 6px;
    --gi-radius-sm: 8px;
    --gi-radius: 12px;
    --gi-radius-lg: 16px;
    --gi-radius-xl: 20px;

    --gi-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --gi-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --gi-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, .05), 0 8px 18px -6px rgba(16, 24, 40, .09);
    --gi-shadow-lg: 0 4px 8px -4px rgba(16, 24, 40, .05), 0 16px 32px -8px rgba(16, 24, 40, .12);
    --gi-shadow-xl: 0 8px 16px -8px rgba(10, 27, 61, .08), 0 28px 56px -12px rgba(10, 27, 61, .22);
    --gi-ring: 0 0 0 4px rgba(26, 75, 148, .13);
    --gi-ring-danger: 0 0 0 4px rgba(220, 53, 69, .12);
    --gi-focus-border: #7A98C8;

    --gi-ease: cubic-bezier(.2, .8, .2, 1);
    --gi-dur: .18s;

    --gi-sidebar-w: 268px;
    --gi-sidebar-rail-w: 76px;
    --gi-topbar-h: 64px;
    --gi-bottom-nav-h: 64px;
    --gi-content-pad: 28px;
    --gi-safe-top: env(safe-area-inset-top, 0px);
    --gi-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Bootstrap mapping */
    --bs-blue: #1A4B94;
    --bs-primary: #1A4B94;
    --bs-primary-rgb: 26, 75, 148;
    --bs-secondary: #6B7A90;
    --bs-secondary-rgb: 107, 122, 144;
    --bs-success: #6CA83C;
    --bs-success-rgb: 108, 168, 60;
    --bs-info: #2490CC;
    --bs-info-rgb: 36, 144, 204;
    --bs-warning: #F59E0B;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #DC3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-dark: #0A1B3D;
    --bs-dark-rgb: 10, 27, 61;
    --bs-light: #F6F8FB;
    --bs-light-rgb: 246, 248, 251;

    --bs-primary-text-emphasis: #143A73;
    --bs-primary-bg-subtle: #EAF0F8;
    --bs-primary-border-subtle: #C8D6EA;
    --bs-secondary-text-emphasis: #4A5870;
    --bs-secondary-bg-subtle: #EEF2F7;
    --bs-secondary-border-subtle: #DCE2EA;
    --bs-success-text-emphasis: #3E7520;
    --bs-success-bg-subtle: #EFF6E8;
    --bs-success-border-subtle: #CFE4BE;
    --bs-info-text-emphasis: #17699A;
    --bs-info-bg-subtle: #E8F4FB;
    --bs-info-border-subtle: #BCDDF0;
    --bs-warning-text-emphasis: #93510A;
    --bs-warning-bg-subtle: #FEF5E4;
    --bs-warning-border-subtle: #FBDDA4;
    --bs-danger-text-emphasis: #A61E2C;
    --bs-danger-bg-subtle: #FCECEE;
    --bs-danger-border-subtle: #F4C2C7;
    --bs-dark-text-emphasis: #0F172A;
    --bs-dark-bg-subtle: #E6EAF1;
    --bs-dark-border-subtle: #CFD7E3;
    --bs-light-text-emphasis: #334155;
    --bs-light-bg-subtle: #FAFBFD;
    --bs-light-border-subtle: #E3E8EF;

    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.55;
    --bs-body-color: #1E293B;
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-bg: #F6F8FB;
    --bs-body-bg-rgb: 246, 248, 251;
    --bs-emphasis-color: #0F172A;
    --bs-emphasis-color-rgb: 15, 23, 42;
    --bs-secondary-color: #6B7A90;
    --bs-secondary-color-rgb: 107, 122, 144;
    --bs-secondary-bg: #EEF2F7;
    --bs-tertiary-color: #98A4B7;
    --bs-tertiary-bg: #F6F8FB;
    --bs-heading-color: #0F172A;
    --bs-link-color: #1860A8;
    --bs-link-color-rgb: 24, 96, 168;
    --bs-link-hover-color: #183C84;
    --bs-link-hover-color-rgb: 24, 60, 132;
    --bs-code-color: #1860A8;
    --bs-highlight-bg: #FEF5E4;
    --bs-border-color: #E3E8EF;
    --bs-border-color-translucent: rgba(15, 23, 42, .08);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: 16px;
    --bs-border-radius-xxl: 20px;
    --bs-box-shadow: var(--gi-shadow-md);
    --bs-box-shadow-sm: var(--gi-shadow-sm);
    --bs-box-shadow-lg: var(--gi-shadow-lg);
    --bs-focus-ring-width: 4px;
    --bs-focus-ring-opacity: .13;
    --bs-focus-ring-color: rgba(26, 75, 148, .13);
    --bs-form-valid-color: #5A9431;
    --bs-form-valid-border-color: #6CA83C;
    --bs-form-invalid-color: #C92A3A;
    --bs-form-invalid-border-color: #DC3545;
}

/* ==========================================================================
   3. Base
   ========================================================================== */
html { font-size: 14px; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--gi-topbar-h) + 16px); }
body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -.003em;
    -webkit-tap-highlight-color: transparent;
}
::selection { background: rgba(var(--gi-royal-rgb), .16); color: var(--gi-ink); }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; color: var(--gi-ink); letter-spacing: -.018em; line-height: 1.25; }
h1, .h1 { font-size: 1.857rem; }
h2, .h2 { font-size: 1.571rem; }
h3, .h3 { font-size: 1.357rem; }
h4, .h4 { font-size: 1.214rem; }
h5, .h5 { font-size: 1.071rem; }
h6, .h6 { font-size: 1rem; }
small, .small { font-size: .893em; }
b, strong { font-weight: 600; }
a { text-decoration: none; transition: color var(--gi-dur) ease; }
a:hover { text-decoration: none; }
hr { border-color: var(--gi-gray-200); opacity: 1; }
kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
    font: 600 11px/1 var(--bs-font-sans-serif); color: var(--gi-gray-500);
    background: #fff; border: 1px solid var(--gi-gray-200); border-bottom-width: 2px; border-radius: 6px; box-shadow: none;
}
.text-muted { color: var(--gi-gray-500) !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.min-w-0 { min-width: 0 !important; }
.lh-tight { line-height: 1.25 !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.border-light-subtle { border-color: var(--gi-gray-100) !important; }

/* Scrollbars (desktop) */
@media (hover: hover) {
    * { scrollbar-width: thin; scrollbar-color: var(--gi-gray-300) transparent; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: var(--gi-gray-300); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--gi-gray-400); }
    ::-webkit-scrollbar-track { background: transparent; }
}

/* ==========================================================================
   4. Utilities (contract)
   ========================================================================== */
.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv02", "cv03", "cv04", "cv11"; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.text-brand { color: var(--gi-primary) !important; }
.text-brand-gradient { background: var(--gi-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-green { color: var(--gi-green-600) !important; }
.bg-brand-gradient { background: var(--gi-gradient) !important; color: #fff; }
.bg-navy { background: var(--gi-navy-900) !important; color: #fff; }
.gi-muted { color: var(--gi-gray-500) !important; }
.gi-section-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gi-gray-500);
}
.gi-section-title::after { content: ""; flex: 1; height: 1px; background: var(--gi-gray-200); }
.gi-kpi { font-size: 1.786rem; font-weight: 600; letter-spacing: -.025em; color: var(--gi-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.gi-divider { height: 1px; background: var(--gi-gray-200); margin: 20px 0; }
.gi-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 10px 16px; margin: 0; font-size: 13.5px; }
.gi-dl dt { font-weight: 500; color: var(--gi-gray-500); }
.gi-dl dd { margin: 0; color: var(--gi-ink); word-break: break-word; }
.gi-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }

/* Skeleton shimmer */
.skeleton {
    display: block; border-radius: 6px; color: transparent !important; user-select: none;
    background: linear-gradient(90deg, var(--gi-gray-100) 25%, #F8FAFC 37%, var(--gi-gray-100) 63%);
    background-size: 400% 100%; animation: giShimmer 1.4s ease infinite;
}
.skeleton-text { height: 12px; margin: 6px 0; }
.skeleton-circle { border-radius: 50%; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .56rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.45;
    --bs-btn-border-radius: 10px;
    --bs-btn-focus-box-shadow: 0 0 0 4px rgba(var(--bs-btn-focus-shadow-rgb), .2);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    letter-spacing: -.005em; white-space: nowrap;
    transition: color var(--gi-dur) ease, background-color var(--gi-dur) ease, border-color var(--gi-dur) ease, box-shadow var(--gi-dur) ease, transform .12s ease;
}
.btn > .bi { font-size: 1.07em; line-height: 1; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .38rem; --bs-btn-font-size: .929rem; --bs-btn-border-radius: 8px; gap: 6px; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1.071rem; --bs-btn-border-radius: 12px; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .spinner-border { width: 1em; height: 1em; border-width: .15em; }

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: #1A4B94; --bs-btn-border-color: #17438A;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #173F7D; --bs-btn-hover-border-color: #143873;
    --bs-btn-focus-shadow-rgb: 26, 75, 148;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #12356A; --bs-btn-active-border-color: #12356A;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #1A4B94; --bs-btn-disabled-border-color: #1A4B94;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 2px rgba(10, 27, 61, .16), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-brand {
    --bs-btn-color: #fff; --bs-btn-bg: #1860A8; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1860A8; --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 36, 144, 204;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #183C84; --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #1860A8; --bs-btn-disabled-border-color: transparent;
    background-image: var(--gi-gradient); background-size: 140% 100%; background-position: 0 0;
    box-shadow: 0 10px 24px -10px rgba(36, 144, 204, .7), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: background-position .4s var(--gi-ease), box-shadow var(--gi-dur) ease, transform .12s ease;
}
.btn-brand:hover { background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(36, 144, 204, .8), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: #6CA83C; --bs-btn-border-color: #639C36;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5A9431; --bs-btn-hover-border-color: #54892D;
    --bs-btn-focus-shadow-rgb: 108, 168, 60;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #4E8229; --bs-btn-active-border-color: #4E8229;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #6CA83C; --bs-btn-disabled-border-color: #6CA83C;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 2px rgba(62, 117, 32, .2), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: #DC3545; --bs-btn-border-color: #D12F3F;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #C82D3C; --bs-btn-hover-border-color: #BE2A39;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #B42735; --bs-btn-active-border-color: #B42735;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #DC3545; --bs-btn-disabled-border-color: #DC3545;
    box-shadow: 0 1px 2px rgba(180, 39, 53, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-warning {
    --bs-btn-color: #3B2503; --bs-btn-bg: #F59E0B; --bs-btn-border-color: #EC960A;
    --bs-btn-hover-color: #3B2503; --bs-btn-hover-bg: #E8920A; --bs-btn-hover-border-color: #DC8A09;
    --bs-btn-focus-shadow-rgb: 245, 158, 11;
    --bs-btn-active-color: #3B2503; --bs-btn-active-bg: #D58508; --bs-btn-active-border-color: #D58508;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: #2490CC; --bs-btn-border-color: #2188C1;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1F80B6; --bs-btn-hover-border-color: #1D79AC;
    --bs-btn-focus-shadow-rgb: 36, 144, 204;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1B72A2; --bs-btn-active-border-color: #1B72A2;
}
.btn-dark {
    --bs-btn-color: #fff; --bs-btn-bg: #0A1B3D; --bs-btn-border-color: #0A1B3D;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0F2A57; --bs-btn-hover-border-color: #0F2A57;
    --bs-btn-focus-shadow-rgb: 10, 27, 61;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #06122A; --bs-btn-active-border-color: #06122A;
}
.btn-secondary {
    --bs-btn-color: #fff; --bs-btn-bg: #4A5870; --bs-btn-border-color: #4A5870;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3D4A60; --bs-btn-hover-border-color: #3D4A60;
    --bs-btn-focus-shadow-rgb: 74, 88, 112;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #334155; --bs-btn-active-border-color: #334155;
}
.btn-light, .btn-white {
    --bs-btn-color: #1E293B; --bs-btn-bg: #fff; --bs-btn-border-color: #DDE3EB;
    --bs-btn-hover-color: #0F172A; --bs-btn-hover-bg: #F6F8FB; --bs-btn-hover-border-color: #CFD7E3;
    --bs-btn-focus-shadow-rgb: 26, 75, 148;
    --bs-btn-active-color: #0F172A; --bs-btn-active-bg: #EEF2F7; --bs-btn-active-border-color: #CFD7E3;
    --bs-btn-disabled-color: #98A4B7; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #E3E8EF;
    box-shadow: var(--gi-shadow-xs);
}
.btn-outline-primary {
    --bs-btn-color: #1A4B94; --bs-btn-border-color: #B9CAE3; --bs-btn-bg: #fff;
    --bs-btn-hover-color: #1A4B94; --bs-btn-hover-bg: #EEF3FA; --bs-btn-hover-border-color: #8FA9D1;
    --bs-btn-focus-shadow-rgb: 26, 75, 148;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1A4B94; --bs-btn-active-border-color: #1A4B94;
}
.btn-outline-secondary {
    --bs-btn-color: #334155; --bs-btn-border-color: #DDE3EB; --bs-btn-bg: transparent;
    --bs-btn-hover-color: #0F172A; --bs-btn-hover-bg: #F6F8FB; --bs-btn-hover-border-color: #CFD7E3;
    --bs-btn-focus-shadow-rgb: 107, 122, 144;
    --bs-btn-active-color: #0F172A; --bs-btn-active-bg: #EEF2F7; --bs-btn-active-border-color: #CFD7E3;
}
.btn-outline-success {
    --bs-btn-color: #4E8229; --bs-btn-border-color: #BCD9A5; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6CA83C; --bs-btn-hover-border-color: #6CA83C;
    --bs-btn-focus-shadow-rgb: 108, 168, 60; --bs-btn-active-bg: #5A9431; --bs-btn-active-border-color: #5A9431;
}
.btn-outline-danger {
    --bs-btn-color: #C92A3A; --bs-btn-border-color: #F1BDC3; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #DC3545; --bs-btn-hover-border-color: #DC3545;
    --bs-btn-focus-shadow-rgb: 220, 53, 69; --bs-btn-active-bg: #C82D3C; --bs-btn-active-border-color: #C82D3C;
}
.btn-link { --bs-btn-color: #1860A8; --bs-btn-hover-color: #183C84; --bs-btn-active-color: #183C84; --bs-btn-focus-shadow-rgb: 26, 75, 148; text-decoration: none; font-weight: 500; }

.btn-soft-primary, .btn-soft-success, .btn-soft-danger, .btn-soft-warning, .btn-soft-info, .btn-soft-secondary {
    --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
}
.btn-soft-primary { --bs-btn-color: #1A4B94; --bs-btn-bg: #EDF2F9; --bs-btn-hover-color: #143A73; --bs-btn-hover-bg: #E0E9F5; --bs-btn-active-bg: #D3DFF0; --bs-btn-active-color: #143A73; --bs-btn-focus-shadow-rgb: 26, 75, 148; }
.btn-soft-success { --bs-btn-color: #3E7520; --bs-btn-bg: #EFF6E8; --bs-btn-hover-color: #335F1A; --bs-btn-hover-bg: #E3EFD8; --bs-btn-active-bg: #D6E8C6; --bs-btn-active-color: #335F1A; --bs-btn-focus-shadow-rgb: 108, 168, 60; }
.btn-soft-danger { --bs-btn-color: #B42331; --bs-btn-bg: #FCEEF0; --bs-btn-hover-color: #9A1D2A; --bs-btn-hover-bg: #F9E0E3; --bs-btn-active-bg: #F5D0D5; --bs-btn-active-color: #9A1D2A; --bs-btn-focus-shadow-rgb: 220, 53, 69; }
.btn-soft-warning { --bs-btn-color: #93510A; --bs-btn-bg: #FEF5E4; --bs-btn-hover-color: #7A4308; --bs-btn-hover-bg: #FDECCB; --bs-btn-active-bg: #FCE2B2; --bs-btn-active-color: #7A4308; --bs-btn-focus-shadow-rgb: 245, 158, 11; }
.btn-soft-info { --bs-btn-color: #17699A; --bs-btn-bg: #E8F4FB; --bs-btn-hover-color: #125780; --bs-btn-hover-bg: #D7EBF7; --bs-btn-active-bg: #C6E2F3; --bs-btn-active-color: #125780; --bs-btn-focus-shadow-rgb: 36, 144, 204; }
.btn-soft-secondary { --bs-btn-color: #334155; --bs-btn-bg: #EEF2F7; --bs-btn-hover-color: #0F172A; --bs-btn-hover-bg: #E3E8EF; --bs-btn-active-bg: #D8DFE8; --bs-btn-active-color: #0F172A; --bs-btn-focus-shadow-rgb: 107, 122, 144; }

.btn-icon { --bs-btn-padding-x: 0; width: 40px; height: 40px; padding-left: 0; padding-right: 0; }
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-group > .btn { box-shadow: none; }

/* ==========================================================================
   6. Forms
   ========================================================================== */
.form-label { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--gi-gray-700); }
.req { color: var(--gi-red); margin-left: 2px; font-weight: 600; }
.form-text { margin-top: 6px; font-size: 12.5px; color: var(--gi-gray-500); }
.invalid-feedback { margin-top: 6px; font-size: 12.5px; font-weight: 500; color: #C92A3A; }
.invalid-feedback::before { content: "\F33A"; font-family: "bootstrap-icons"; margin-right: 5px; font-size: 12px; vertical-align: -1px; }

.form-control, .form-select {
    padding: .6rem .86rem; font-size: 1rem; line-height: 1.45; color: var(--gi-ink);
    background-color: #fff; border: 1px solid var(--gi-gray-200); border-radius: 10px;
    box-shadow: var(--gi-shadow-xs);
    transition: border-color var(--gi-dur) ease, box-shadow var(--gi-dur) ease, background-color var(--gi-dur) ease;
}
.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: var(--gi-gray-300); }
.form-control:focus, .form-select:focus { border-color: var(--gi-focus-border); box-shadow: var(--gi-ring); color: var(--gi-ink); }
.form-control::placeholder { color: var(--gi-gray-400); opacity: 1; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--gi-gray-50); color: var(--gi-gray-600); box-shadow: none; }
.form-control-sm, .form-select-sm { padding: .42rem .7rem; font-size: .929rem; border-radius: 8px; }
.form-control-lg { padding: .8rem 1rem; font-size: 1.071rem; border-radius: 12px; }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--gi-red); background-image: none; padding-right: .86rem; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--gi-red); box-shadow: var(--gi-ring-danger); }
.form-select { background-position: right .8rem center; padding-right: 2.4rem; }
textarea.form-control { min-height: 88px; }
input[type="number"].no-spin::-webkit-outer-spin-button, input[type="number"].no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].no-spin { -moz-appearance: textfield; appearance: textfield; }

/* Floating labels */
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select { height: 52px; min-height: 52px; padding: 1.55rem .86rem .45rem; line-height: 1.3; }
.form-floating > textarea.form-control { height: auto; min-height: 104px; padding-top: 1.75rem; }
.form-floating > label { padding: .96rem .86rem; color: var(--gi-gray-500); font-weight: 400; max-width: 100%; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label { transform: scale(.8) translateY(-.64rem) translateX(.18rem); color: var(--gi-gray-500); opacity: 1; }
.form-floating > .form-control:focus ~ label { color: var(--gi-primary); }
.form-floating > .form-control.is-invalid ~ label { color: #C92A3A; }
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > textarea:focus ~ label::after,
.form-floating > textarea:not(:placeholder-shown) ~ label::after { background-color: #fff; }
.form-floating > .form-control:disabled ~ label::after, .form-floating > .form-control[readonly] ~ label::after { background-color: var(--gi-gray-50); }
.form-floating > .form-control:focus::placeholder { color: var(--gi-gray-400); }
.form-floating > .form-control::placeholder { color: transparent; }

/* Input groups — seamless addons, ring on the whole group */
.input-group-text { padding: .6rem .8rem; font-size: 1rem; color: var(--gi-gray-500); background-color: var(--gi-gray-50); border-color: var(--gi-gray-200); border-radius: 10px; }
.gi-input-group { border-radius: 10px; box-shadow: var(--gi-shadow-xs); transition: box-shadow var(--gi-dur) ease; flex-wrap: nowrap; }
.gi-input-group > .form-control, .gi-input-group > .form-floating > .form-control, .gi-input-group > .input-group-text { box-shadow: none; }
.gi-input-group > .input-group-text { background: #fff; color: var(--gi-gray-400); min-width: 42px; justify-content: center; transition: border-color var(--gi-dur) ease, color var(--gi-dur) ease; }
.gi-input-group > .input-group-text.gi-addon-start { border-right: 0; padding-right: .15rem; }
.gi-input-group > .input-group-text.gi-addon-end { border-left: 0; padding-left: .15rem; }
.gi-input-group > .gi-addon-start + .form-control, .gi-input-group > .gi-addon-start + .form-floating > .form-control { border-left: 0; padding-left: .55rem; }
.gi-input-group > .gi-addon-start + .form-floating > label { padding-left: .55rem; }
.gi-input-group > .form-control:has(+ .gi-addon-end), .gi-input-group > .form-floating:has(+ .gi-addon-end) > .form-control { border-right: 0; }
.gi-input-group:focus-within { box-shadow: var(--gi-ring); }
.gi-input-group:focus-within > .input-group-text, .gi-input-group:focus-within > .form-control, .gi-input-group:focus-within > .form-floating > .form-control { border-color: var(--gi-focus-border); }
.gi-input-group:focus-within > .input-group-text { color: var(--gi-primary); }
.gi-input-group > .form-control:focus, .gi-input-group > .form-floating > .form-control:focus { box-shadow: none; }
.gi-input-group.is-invalid > .input-group-text, .gi-input-group.is-invalid > .form-control, .gi-input-group.is-invalid > .form-floating > .form-control { border-color: var(--gi-red); }
.gi-input-group.is-invalid:focus-within { box-shadow: var(--gi-ring-danger); }
.gi-input-group .gi-addon-currency { font-weight: 600; color: var(--gi-gray-500); }
.gi-input-group:has(.form-control[readonly]) > .input-group-text, .gi-input-group:has(.form-control:disabled) > .input-group-text { background: var(--gi-gray-50); }
.gi-input-group > .btn { box-shadow: none; border-color: var(--gi-gray-200); }

/* Compact controls (filter bars) */
.gi-compact .form-label { margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--gi-gray-500); }
.gi-compact .form-control, .gi-compact .form-select { padding: .48rem .75rem; font-size: .964rem; border-radius: 9px; min-height: 38px; }
.gi-compact .gi-input-group > .input-group-text { padding: .4rem .6rem; min-width: 36px; }

/* Checks & switches */
.form-check-input { border-color: var(--gi-gray-300); box-shadow: var(--gi-shadow-xs); }
.form-check-input:checked { background-color: var(--gi-primary); border-color: var(--gi-primary); }
.form-check-input:focus { border-color: var(--gi-focus-border); box-shadow: var(--gi-ring); }
.form-check-input[type="checkbox"] { border-radius: 5px; }
.form-check-label { color: var(--gi-gray-700); }
.form-switch .form-check-input { width: 2.4em; height: 1.35em; margin-top: .1em; border: 0; background-color: var(--gi-gray-200); cursor: pointer;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.2' fill='%23fff'/%3e%3c/svg%3e");
    transition: background-color .2s ease, background-position .2s var(--gi-ease); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.2' fill='%23fff'/%3e%3c/svg%3e"); box-shadow: var(--gi-ring); }
.form-switch .form-check-input:checked { background-color: var(--gi-green); }

.gi-switch-card {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; height: 100%;
    padding: 10px 14px; background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 10px; box-shadow: var(--gi-shadow-xs);
    transition: border-color var(--gi-dur) ease, background-color var(--gi-dur) ease; cursor: pointer; margin: 0;
}
.gi-switch-card:hover { border-color: var(--gi-gray-300); }
.gi-switch-card .gi-switch-text { display: flex; flex-direction: column; min-width: 0; }
.gi-switch-card .gi-switch-label { font-weight: 500; color: var(--gi-ink); line-height: 1.3; }
.gi-switch-card .gi-switch-help { font-size: 12px; color: var(--gi-gray-500); line-height: 1.35; margin-top: 2px; }
.gi-switch-card .form-check { margin: 0; padding: 0; min-height: 0; }
.gi-switch-card .form-check-input { float: none; margin: 0; }
.gi-switch-card.is-invalid { border-color: var(--gi-red); }
.gi-compact .gi-switch-card { min-height: 38px; padding: 6px 12px; }

/* Select2 (bootstrap-5 theme) */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 42px; padding: .6rem .86rem; font-size: 1rem; line-height: 1.45; color: var(--gi-ink);
    border: 1px solid var(--gi-gray-200); border-radius: 10px; box-shadow: var(--gi-shadow-xs);
    transition: border-color var(--gi-dur) ease, box-shadow var(--gi-dur) ease;
}
.select2-container--bootstrap-5 .select2-selection:hover { border-color: var(--gi-gray-300); }
.select2-container--bootstrap-5 .select2-selection--single { padding-right: 2.4rem; background-position: right .8rem center; background-size: 14px 10px;
    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='%236B7A90' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--gi-ink); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: var(--gi-gray-400); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--gi-focus-border); box-shadow: var(--gi-ring); }
.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection,
.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection { border: 1px solid var(--gi-focus-border); border-radius: 10px; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear { right: 2.3rem; width: .7rem; height: .7rem; opacity: .55; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear { right: .9rem; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    padding: .18em .55em; margin: 0 .35rem .3rem 0; font-size: .929rem; font-weight: 500; color: var(--gi-primary);
    background: #EDF2F9; border: 1px solid #D3DFF0; border-radius: 7px;
}
.select2-container--bootstrap-5 .select2-selection--single { display: flex; align-items: center; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { flex: 1 1 auto; min-width: 0; }
.select2-container--bootstrap-5 .select2-selection--multiple { display: flex; flex-wrap: wrap; align-items: center; padding-right: 2.2rem; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered { display: inline-flex; flex-wrap: wrap; margin: 0; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { margin: 2px 6px 2px 0; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    width: .55rem; height: .55rem; margin-right: .4rem; opacity: .55; background-size: .55rem auto;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover { opacity: 1; background-size: .55rem auto; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search { display: inline-flex; flex: 1 1 60px; width: auto; height: auto; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field { height: 1.6rem; line-height: 1.6rem; margin: 2px 0; }
.select2-container--bootstrap-5.select2-container--disabled .select2-selection { background-color: var(--gi-gray-50); border-color: var(--gi-gray-200); color: var(--gi-gray-500); }
.is-invalid + .select2-container--bootstrap-5 .select2-selection { border-color: var(--gi-red); }
.is-invalid + .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.is-invalid + .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--gi-red); box-shadow: var(--gi-ring-danger); }

.select2-container--bootstrap-5 .select2-dropdown {
    margin-top: 6px; border: 1px solid var(--gi-gray-200) !important; border-radius: 12px !important;
    box-shadow: var(--gi-shadow-lg); overflow: hidden; color: var(--gi-ink); z-index: 1070;
    animation: giDropIn .14s var(--gi-ease);
}
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above { margin-top: -6px; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search { padding: 8px 8px 4px; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    padding: .5rem .75rem .5rem 2.1rem; font-size: .964rem; border-color: var(--gi-gray-200); border-radius: 8px; background: var(--gi-gray-50)
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2398A4B7'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3e%3c/svg%3e") no-repeat .7rem center / 13px;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus { background-color: #fff; border-color: var(--gi-focus-border); box-shadow: var(--gi-ring); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options { padding: 4px 6px 6px; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options:not(.select2-results__options--nested) { max-height: 17rem; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { padding: .5rem .7rem; margin: 1px 0; font-size: .964rem; border-radius: 8px; transition: background-color .1s ease; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { color: var(--gi-ink); background-color: var(--gi-gray-100); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) { color: var(--gi-primary); background-color: #EDF2F9; font-weight: 500; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected.select2-results__option--highlighted { color: var(--gi-primary); background-color: #E0E9F5; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message { color: var(--gi-gray-500); font-size: .929rem; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group { padding: .55rem .7rem .3rem; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gi-gray-400); }
.gi-s2-option { display: flex; flex-direction: column; line-height: 1.3; }
.gi-s2-option small { color: var(--gi-gray-500); font-size: 12px; margin-top: 1px; }
.select2-results__option--highlighted .gi-s2-option small { color: var(--gi-gray-600); }

/* Select2 with in-box label, aligned to floating inputs */
.gi-select-float { position: relative; }
.gi-select-float > .gi-float-label {
    position: absolute; top: 7px; left: 14px; z-index: 3; margin: 0; pointer-events: none;
    font-size: 11.2px; font-weight: 400; color: var(--gi-gray-500); line-height: 1.2; letter-spacing: .005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 56px);
}
.gi-select-float .select2-container--bootstrap-5 .select2-selection { min-height: 52px; padding-top: 1.45rem; padding-bottom: .38rem; }
.gi-select-float .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear { top: 58%; }
.gi-select-float .select2-container--bootstrap-5.select2-container--focus ~ .gi-float-label,
.gi-select-float .select2-container--bootstrap-5.select2-container--open ~ .gi-float-label { color: var(--gi-primary); }
.gi-select-float .is-invalid ~ .gi-float-label { color: #C92A3A; }
.gi-select-float > select.form-select { min-height: 52px; padding-top: 1.45rem; }

/* Compact Select2 */
.gi-compact .select2-container--bootstrap-5 .select2-selection { min-height: 38px; padding-top: .45rem; padding-bottom: .45rem; font-size: .964rem; border-radius: 9px; }

/* flatpickr */
.flatpickr-calendar {
    font-family: var(--bs-font-sans-serif); border: 1px solid var(--gi-gray-200); border-radius: 14px;
    box-shadow: var(--gi-shadow-xl); padding: 6px; width: auto; animation: giDropIn .16s var(--gi-ease) !important;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-calendar.open { margin-top: 6px; }
.flatpickr-months { padding: 4px 2px 6px; }
.flatpickr-months .flatpickr-month { height: 38px; color: var(--gi-ink); }
.flatpickr-current-month { font-size: 14px; font-weight: 600; padding-top: 8px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; border-radius: 6px; }
.flatpickr-current-month input.cur-year { font-weight: 600; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { top: 6px; padding: 8px; border-radius: 8px; height: 34px; width: 34px; display: flex; align-items: center; justify-content: center; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--gi-gray-100); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--gi-primary); }
span.flatpickr-weekday { font-size: 11px; font-weight: 600; color: var(--gi-gray-400); text-transform: uppercase; letter-spacing: .04em; }
.flatpickr-day { border-radius: 9px; font-size: 13px; color: var(--gi-ink); font-weight: 500; height: 38px; line-height: 38px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--gi-gray-100); border-color: transparent; }
.flatpickr-day.today { border-color: rgba(var(--gi-sky-rgb), .6); }
.flatpickr-day.today:hover { background: rgba(var(--gi-sky-rgb), .1); color: var(--gi-ink); border-color: rgba(var(--gi-sky-rgb), .6); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--gi-primary); border-color: var(--gi-primary); color: #fff; box-shadow: 0 6px 14px -6px rgba(var(--gi-primary-rgb), .7); }
.flatpickr-day.inRange { background: #EDF2F9; border-color: #EDF2F9; box-shadow: -5px 0 0 #EDF2F9, 5px 0 0 #EDF2F9; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--gi-gray-300); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--gi-gray-300); }
.flatpickr-input[readonly] { background-color: #fff; cursor: pointer; }
.flatpickr-input.form-control[readonly]:disabled { background-color: var(--gi-gray-50); }

/* ==========================================================================
   7. Cards
   ========================================================================== */
.card {
    --bs-card-border-color: var(--gi-gray-200);
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 15px;
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.43rem;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.43rem;
    box-shadow: var(--gi-shadow-sm);
}
.card-premium { position: relative; background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 16px; box-shadow: var(--gi-shadow-sm); }
.card-premium > .card-header {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 60px; padding: 14px 20px;
    background: transparent; border-bottom: 1px solid var(--gi-gray-100);
}
.card-premium > .card-header:first-child { border-radius: 16px 16px 0 0; }
.card-premium > .card-body { padding: 20px; }
.card-premium > .card-body.p-0 { padding: 0; }
.card-premium > .card-footer { padding: 14px 20px; background: var(--gi-gray-25); border-top: 1px solid var(--gi-gray-100); border-radius: 0 0 16px 16px; }
.card-premium > .card-body.p-0 > .table-wrap:last-child, .card-premium > .card-body.p-0 > .table-wrap:last-child .table-premium { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.gi-card-heading { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.gi-card-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--gi-primary); background: #EDF2F9; box-shadow: inset 0 0 0 1px rgba(var(--gi-primary-rgb), .06);
}
.gi-card-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--gi-ink); letter-spacing: -.012em; line-height: 1.3; }
.gi-card-subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--gi-gray-500); line-height: 1.35; }
.gi-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; margin-left: auto; }
.gi-card-tools > .nav { min-width: 0; max-width: 100%; }
.card-hover { transition: transform var(--gi-dur) var(--gi-ease), box-shadow var(--gi-dur) var(--gi-ease), border-color var(--gi-dur) ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--gi-shadow-md); border-color: var(--gi-gray-300); }

/* ==========================================================================
   8. Stat cards / summary tiles / KPI
   ========================================================================== */
.gi-stat, .gi-tile, .gi-tl-item, .gi-avatar { --gi-accent: var(--gi-primary); --gi-accent-rgb: var(--gi-primary-rgb); --gi-accent-ink: #143A73; }
.gi-accent-primary { --gi-accent: #1A4B94; --gi-accent-rgb: 26, 75, 148; --gi-accent-ink: #143A73; }
.gi-accent-royal { --gi-accent: #1860A8; --gi-accent-rgb: 24, 96, 168; --gi-accent-ink: #144E88; }
.gi-accent-green, .gi-accent-success { --gi-accent: #6CA83C; --gi-accent-rgb: 108, 168, 60; --gi-accent-ink: #3E7520; }
.gi-accent-amber, .gi-accent-warning { --gi-accent: #F59E0B; --gi-accent-rgb: 245, 158, 11; --gi-accent-ink: #93510A; }
.gi-accent-red, .gi-accent-danger { --gi-accent: #DC3545; --gi-accent-rgb: 220, 53, 69; --gi-accent-ink: #A61E2C; }
.gi-accent-navy, .gi-accent-dark { --gi-accent: #0A1B3D; --gi-accent-rgb: 10, 27, 61; --gi-accent-ink: #0A1B3D; }
.gi-accent-sky, .gi-accent-info { --gi-accent: #2490CC; --gi-accent-rgb: 36, 144, 204; --gi-accent-ink: #17699A; }
.gi-accent-secondary, .gi-accent-gray { --gi-accent: #6B7A90; --gi-accent-rgb: 107, 122, 144; --gi-accent-ink: #334155; }

.gi-stat {
    position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 20px 17px;
    background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 16px; box-shadow: var(--gi-shadow-sm);
    color: inherit; overflow: hidden; isolation: isolate;
    transition: transform var(--gi-dur) var(--gi-ease), box-shadow var(--gi-dur) var(--gi-ease), border-color var(--gi-dur) ease;
}
.gi-stat::after {
    content: ""; position: absolute; z-index: -1; top: -48px; right: -48px; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gi-accent-rgb), .10) 0%, rgba(var(--gi-accent-rgb), 0) 70%);
}
a.gi-stat:hover { transform: translateY(-2px); box-shadow: var(--gi-shadow-md); border-color: var(--gi-gray-300); color: inherit; }
.gi-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gi-stat-label { font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--gi-gray-500); line-height: 1.35; padding-top: 3px; }
.gi-stat-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--gi-accent); background: rgba(var(--gi-accent-rgb), .10); box-shadow: inset 0 0 0 1px rgba(var(--gi-accent-rgb), .08);
}
.gi-accent-navy .gi-stat-icon { color: #fff; background: var(--gi-gradient-navy); box-shadow: 0 6px 14px -6px rgba(var(--gi-navy-rgb), .6); }
.gi-stat-value { font-size: clamp(1.5rem, 1.2rem + .6vw, 1.786rem); font-weight: 600; letter-spacing: -.028em; color: var(--gi-ink); line-height: 1.12; font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; word-break: break-word; }
.gi-stat-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12.5px; color: var(--gi-gray-500); margin-top: auto; }
.gi-trend { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gi-trend.up { color: #3E7520; background: #EFF6E8; }
.gi-trend.down { color: #A61E2C; background: #FCECEE; }
.gi-trend.flat { color: var(--gi-gray-600); background: var(--gi-gray-100); }
.gi-stat-link { position: absolute; right: 16px; bottom: 14px; color: var(--gi-gray-300); font-size: 15px; transition: transform var(--gi-dur) var(--gi-ease), color var(--gi-dur) ease; }
a.gi-stat:hover .gi-stat-link { color: var(--gi-accent); transform: translateX(3px); }
a.gi-stat .gi-stat-foot { padding-right: 22px; }

.gi-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 16px; overflow: hidden; box-shadow: var(--gi-shadow-sm);
}
.gi-tile { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; background: #fff; box-shadow: 1px 0 0 var(--gi-gray-100), 0 1px 0 var(--gi-gray-100); }
.gi-tile-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gi-tile-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14.5px; color: var(--gi-accent); background: rgba(var(--gi-accent-rgb), .10);
}
.gi-tile-label { min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gi-gray-500); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.gi-tile-value { font-size: 1.214rem; font-weight: 600; color: var(--gi-ink); letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; overflow-wrap: anywhere; }
.gi-tile.is-highlight { background: linear-gradient(135deg, rgba(var(--gi-accent-rgb), .09), rgba(var(--gi-accent-rgb), .02)); }
.gi-tile.is-highlight::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gi-accent); }
.gi-tile.is-highlight .gi-tile-value { color: var(--gi-accent-ink); }

/* ==========================================================================
   9. Badges / avatars / money
   ========================================================================== */
.badge { font-weight: 600; font-size: 11.5px; letter-spacing: .01em; padding: .42em .72em; border-radius: 999px; line-height: 1.1; }
[class*="badge-soft-"] { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; white-space: nowrap; }
[class*="badge-soft-"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex-shrink: 0; }
.badge-soft-primary { color: #1A4B94; background: #EDF2F9; border-color: #D8E3F2; }
.badge-soft-royal { color: #144E88; background: #EAF2FA; border-color: #D2E2F2; }
.badge-soft-success { color: #3E7520; background: #EFF6E8; border-color: #DCEBCD; }
.badge-soft-info { color: #17699A; background: #E8F4FB; border-color: #CFE7F5; }
.badge-soft-warning { color: #93510A; background: #FEF5E4; border-color: #FBE3B7; }
.badge-soft-danger { color: #B42331; background: #FCEDEF; border-color: #F7D3D8; }
.badge-soft-secondary { color: #4A5870; background: #F1F4F8; border-color: #E3E8EF; }
.badge-soft-dark { color: #0F172A; background: #E9ECF2; border-color: #D5DBE5; }
.badge-soft-light { color: #4A5870; background: #fff; border-color: #E3E8EF; }
.badge-plain::before { display: none; }
.badge-count { min-width: 20px; padding: .3em .5em; background: var(--gi-gray-100); color: var(--gi-gray-600); font-variant-numeric: tabular-nums; }

.gi-avatar {
    --gi-avatar-size: 36px;
    flex-shrink: 0; width: var(--gi-avatar-size); height: var(--gi-avatar-size); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    font-size: calc(var(--gi-avatar-size) * .37); font-weight: 600; letter-spacing: .02em; color: #fff; line-height: 1;
    background: var(--gi-gradient); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 6px -2px rgba(var(--gi-primary-rgb), .45);
    user-select: none; object-fit: cover;
}
.gi-avatar-xs { --gi-avatar-size: 24px; }
.gi-avatar-sm { --gi-avatar-size: 30px; }
.gi-avatar-md { --gi-avatar-size: 36px; }
.gi-avatar-lg { --gi-avatar-size: 48px; }
.gi-avatar-xl { --gi-avatar-size: 64px; }
.gi-avatar-tone-1 { background: linear-gradient(135deg, #4F8A2A 0%, #7DB548 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 6px -2px rgba(var(--gi-green-rgb), .45); }
.gi-avatar-tone-2 { background: linear-gradient(135deg, #1860A8 0%, #2490CC 100%); }
.gi-avatar-tone-3 { background: linear-gradient(135deg, #0A1B3D 0%, #183C84 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 6px -2px rgba(var(--gi-navy-rgb), .45); }
.gi-avatar-tone-4 { background: linear-gradient(135deg, #C9760A 0%, #F59E0B 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 6px -2px rgba(var(--gi-amber-rgb), .45); }
.gi-avatar-group { display: inline-flex; }
.gi-avatar-group .gi-avatar { box-shadow: 0 0 0 2px #fff; }
.gi-avatar-group .gi-avatar + .gi-avatar { margin-left: -6px; }
.gi-money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; white-space: nowrap; }
.gi-money.is-negative { color: #B42331; }

/* ==========================================================================
   10. Page header
   ========================================================================== */
.gi-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.gi-page-heading { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 320px; }
.gi-page-icon {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 21px; color: #fff; background: var(--gi-gradient);
    box-shadow: 0 10px 22px -10px rgba(var(--gi-royal-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.gi-page-title { margin: 0; font-size: 1.643rem; font-weight: 600; letter-spacing: -.025em; color: var(--gi-ink); line-height: 1.2; word-break: break-word; }
.gi-page-subtitle { margin: 4px 0 0; font-size: 13.5px; color: var(--gi-gray-500); line-height: 1.45; }
.gi-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   11. Tables
   ========================================================================== */
.table-wrap { position: relative; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
@media (min-width: 992px) {
    .table-wrap { max-height: calc(100vh - 170px); }
    .table-wrap.table-wrap-auto { max-height: none; }
}
.table-premium {
    --bs-table-bg: #fff; --bs-table-color: #1E293B; --bs-table-border-color: var(--gi-gray-100);
    --bs-table-hover-bg: #F7F9FC; --bs-table-hover-color: var(--gi-ink); --bs-table-striped-bg: #FAFBFD; --bs-table-active-bg: #F2F5FA;
    width: 100%; margin: 0; font-size: 13.5px; border-collapse: separate; border-spacing: 0; vertical-align: middle;
}
.table-premium > thead > tr > th {
    position: sticky; top: 0; z-index: 2; padding: 11px 14px; background: #F8FAFC; color: var(--gi-gray-500);
    font-size: 11px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; white-space: nowrap;
    border-bottom: 1px solid var(--gi-gray-200); border-top: 0; vertical-align: middle;
}
.table-premium > thead > tr > th.num, .table-premium > tbody > tr > td.num, .table-premium > tfoot > tr > td.num, .table-premium > tfoot > tr > th.num { text-align: right; }
.table-premium > tbody > tr > td, .table-premium > tbody > tr > th { padding: 13px 14px; border-bottom: 1px solid var(--gi-gray-100); vertical-align: middle; white-space: nowrap; transition: background-color .12s ease; }
.table-premium .td-wrap { white-space: normal; min-width: 220px; }
/* Secondary columns shown only on wide screens (1800px+); .xwide-sub repeats their value as a sub-line below that width. */
.table-premium .xwide-sub, .table-premium .td-sub.xwide-sub { display: none; }
@media (max-width: 1799.98px) {
    .table-premium .col-xwide { display: none; }
    .table-premium .xwide-sub, .table-premium .td-sub.xwide-sub { display: block; }
}
.table-premium > tbody > tr:last-child > td, .table-premium > tbody > tr:last-child > th { border-bottom: 0; }
.table-premium > tbody > tr:hover > * { --bs-table-bg-state: #F7F9FC; }
.table-premium > tfoot > tr > td, .table-premium > tfoot > tr > th { padding: 13px 14px; font-weight: 600; color: var(--gi-ink); background: var(--gi-gray-50); border-top: 1px solid var(--gi-gray-200); border-bottom: 0; }
.table-premium > tbody + tbody { border-top: 0; }
.table-premium tr > :first-child { padding-left: 20px; }
.table-premium tr > :last-child { padding-right: 20px; }
.table-premium .td-actions, .table-premium .th-actions { width: 56px; text-align: right; white-space: nowrap; }
/* Row actions stay reachable while a wide table scrolls sideways (edge shadow while more columns are hidden). */
.table-wrap .table-premium > tbody > tr > td.td-actions, .table-wrap .table-premium > thead > tr > th.th-actions { position: sticky; right: 0; }
.table-wrap .table-premium > tbody > tr > td.td-actions { z-index: 1; }
.table-wrap .table-premium > thead > tr > th.th-actions { z-index: 3; }
.table-wrap .table-premium > tbody > tr > td.td-actions:has(.show) { z-index: 4; }
.table-wrap.is-scrollable:not(.is-at-end) .table-premium > tbody > tr > td.td-actions { box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))), -12px 0 14px -12px rgba(15, 23, 42, .28); }
.table-wrap.is-scrollable:not(.is-at-end) .table-premium > thead > tr > th.th-actions { box-shadow: -12px 0 14px -12px rgba(15, 23, 42, .28); }
.table-premium .td-check { width: 44px; }
.table-premium .td-strong, .table-premium a.td-link { font-weight: 600; color: var(--gi-ink); }
.table-premium a.td-link:hover { color: var(--gi-primary); }
.table-premium .td-sub { display: block; font-size: 12px; color: var(--gi-gray-500); margin-top: 1px; font-weight: 400; }
.table-premium .text-nowrap-ellipsis { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-premium tr[data-href] { cursor: pointer; }
.table-premium tr.is-muted > td { color: var(--gi-gray-400); }
.table-premium.table-sm > tbody > tr > td, .table-premium.table-sm > thead > tr > th { padding: 8px 12px; }
.table-premium .row-total > td { font-weight: 600; background: var(--gi-gray-50); }
.table-premium .row-opening > td { background: #FAFBFD; font-style: normal; color: var(--gi-gray-600); }
.table-premium .credit { color: #3E7520; }
.table-premium .debit { color: #B42331; }

.gi-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.gi-sort:hover { color: var(--gi-ink); }
.gi-sort .bi { font-size: 11px; opacity: .45; transition: opacity var(--gi-dur) ease; }
.gi-sort:hover .bi { opacity: .8; }
.gi-sort.is-active { color: var(--gi-primary); }
.gi-sort.is-active .bi { opacity: 1; }
th.num .gi-sort { flex-direction: row-reverse; }

/* Action menu */
.gi-action-btn {
    width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--gi-gray-500); font-size: 16px;
    transition: background-color var(--gi-dur) ease, color var(--gi-dur) ease, border-color var(--gi-dur) ease;
}
.gi-action-btn:hover, .gi-action-btn[aria-expanded="true"] { background: #fff; border-color: var(--gi-gray-200); color: var(--gi-ink); box-shadow: var(--gi-shadow-xs); }
.gi-action-btn:focus-visible { outline: 0; box-shadow: var(--gi-ring); }

/* Dropdowns */
.dropdown-menu {
    --bs-dropdown-font-size: .964rem; --bs-dropdown-color: var(--gi-gray-700); --bs-dropdown-border-color: var(--gi-gray-200);
    --bs-dropdown-border-radius: 12px; --bs-dropdown-padding-x: 6px; --bs-dropdown-padding-y: 6px; --bs-dropdown-min-width: 200px;
    --bs-dropdown-link-color: var(--gi-gray-700); --bs-dropdown-link-hover-color: var(--gi-ink); --bs-dropdown-link-hover-bg: var(--gi-gray-50);
    --bs-dropdown-link-active-color: var(--gi-primary); --bs-dropdown-link-active-bg: #EDF2F9;
    --bs-dropdown-item-padding-x: 10px; --bs-dropdown-item-padding-y: 8px; --bs-dropdown-item-border-radius: 8px;
    --bs-dropdown-divider-bg: var(--gi-gray-100); --bs-dropdown-divider-margin-y: 6px; --bs-dropdown-header-color: var(--gi-gray-400);
    --bs-dropdown-box-shadow: var(--gi-shadow-lg);
    box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-menu.show { animation: giDropIn .14s var(--gi-ease); }
.dropdown-item { display: flex; align-items: center; gap: 10px; font-weight: 500; border-radius: 8px; }
.dropdown-item > .bi { font-size: 15px; color: var(--gi-gray-400); width: 18px; text-align: center; transition: color .12s ease; }
.dropdown-item:hover > .bi, .dropdown-item:focus > .bi { color: var(--gi-primary); }
.dropdown-item.text-danger > .bi, .dropdown-item.is-danger > .bi { color: #E0717C; }
.dropdown-item.text-danger, .dropdown-item.is-danger { color: #C92A3A; }
.dropdown-item.text-danger:hover, .dropdown-item.is-danger:hover, .dropdown-item.is-danger:focus { background: #FCEEF0; color: #A61E2C; }
.dropdown-item.text-danger:hover > .bi, .dropdown-item.is-danger:hover > .bi { color: #C92A3A; }
.dropdown-header { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px 4px; }
.gi-action-menu form { margin: 0; }
.gi-action-menu .dropdown-item { width: 100%; text-align: left; background: transparent; border: 0; }

/* ==========================================================================
   12. Filter bar
   ========================================================================== */
.gi-filter-bar { margin-bottom: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 16px; box-shadow: var(--gi-shadow-sm); }
.gi-filter-bar .gi-filter-search .form-control { min-height: 38px; }
.gi-filter-toggle .badge { background: var(--gi-primary); color: #fff; padding: .25em .5em; font-size: 10.5px; }
.gi-filter-extra .gi-filter-actions { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.gi-filter-actions .btn { min-height: 38px; }
@media (min-width: 768px) {
    .gi-filter-extra, .gi-filter-extra > .row { display: contents !important; }
    .gi-filter-extra .gi-filter-actions { margin-left: auto; }
    .gi-filter-search { min-width: 240px; }
}
@media (max-width: 767.98px) {
    .gi-filter-bar { padding: 12px; border-radius: 14px; }
    .gi-filter-extra .gi-filter-actions { width: 100%; }
    .gi-filter-extra .gi-filter-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   13. Pagination
   ========================================================================== */
.gi-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 16px 4px 4px; font-size: 13px; color: var(--gi-gray-500); }
.card-premium .gi-pagination, .card .gi-pagination { padding: 14px 20px; border-top: 1px solid var(--gi-gray-100); }
.gi-pagination-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gi-pagination-info strong { color: var(--gi-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.gi-per-page .btn { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: 12.5px; box-shadow: none; }
.pagination {
    --bs-pagination-padding-x: .6rem; --bs-pagination-padding-y: .38rem; --bs-pagination-font-size: 13px;
    --bs-pagination-color: var(--gi-gray-600); --bs-pagination-bg: #fff; --bs-pagination-border-width: 1px; --bs-pagination-border-color: var(--gi-gray-200);
    --bs-pagination-border-radius: 9px; --bs-pagination-hover-color: var(--gi-ink); --bs-pagination-hover-bg: var(--gi-gray-50); --bs-pagination-hover-border-color: var(--gi-gray-300);
    --bs-pagination-focus-color: var(--gi-primary); --bs-pagination-focus-bg: #fff; --bs-pagination-focus-box-shadow: var(--gi-ring);
    --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--gi-primary); --bs-pagination-active-border-color: var(--gi-primary);
    --bs-pagination-disabled-color: var(--gi-gray-300); --bs-pagination-disabled-bg: #fff; --bs-pagination-disabled-border-color: var(--gi-gray-200);
    gap: 4px; margin: 0; flex-wrap: wrap;
}
.pagination .page-link { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px !important; font-weight: 500; font-variant-numeric: tabular-nums; margin: 0 !important; }
.pagination .page-item.active .page-link { box-shadow: 0 6px 14px -6px rgba(var(--gi-primary-rgb), .7); }
.pagination .page-item.gi-ellipsis .page-link { border-color: transparent; background: transparent; }

/* ==========================================================================
   14. Empty state
   ========================================================================== */
.gi-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; }
.gi-empty-art { position: relative; width: 88px; height: 88px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; }
.gi-empty-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gi-royal-rgb), .10) 0%, rgba(var(--gi-royal-rgb), .03) 60%, transparent 72%); }
.gi-empty-art::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1px dashed rgba(var(--gi-royal-rgb), .22); }
.gi-empty-icon {
    position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 23px; color: var(--gi-primary); background: #fff; border: 1px solid var(--gi-gray-200);
    box-shadow: 0 10px 24px -12px rgba(var(--gi-primary-rgb), .45), var(--gi-shadow-xs);
}
.gi-empty-title { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--gi-ink); }
.gi-empty-message { max-width: 420px; margin: 6px 0 0; font-size: 13.5px; color: var(--gi-gray-500); }
.gi-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.gi-empty.is-compact { padding: 28px 16px; }
.gi-empty.is-compact .gi-empty-art { width: 64px; height: 64px; margin-bottom: 12px; }
.gi-empty.is-compact .gi-empty-icon { width: 42px; height: 42px; font-size: 19px; border-radius: 13px; }

/* ==========================================================================
   15. Timeline
   ========================================================================== */
.gi-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.gi-tl-item { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.gi-tl-item:last-child { padding-bottom: 0; }
.gi-tl-item::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(var(--gi-accent-rgb), .35), var(--gi-gray-200) 60%); }
.gi-tl-item:last-child::before { display: none; }
.gi-tl-node {
    position: relative; z-index: 1; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    color: var(--gi-accent); background: #fff; border: 2px solid rgba(var(--gi-accent-rgb), .35);
    box-shadow: 0 0 0 4px rgba(var(--gi-accent-rgb), .08);
}
.gi-tl-item.is-done .gi-tl-node { color: #fff; background: var(--gi-accent); border-color: var(--gi-accent); box-shadow: 0 6px 14px -6px rgba(var(--gi-accent-rgb), .8); }
.gi-tl-content { flex: 1; min-width: 0; padding: 12px 16px; background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 14px; box-shadow: var(--gi-shadow-xs); transition: border-color var(--gi-dur) ease, box-shadow var(--gi-dur) ease; }
.gi-tl-content:hover { border-color: var(--gi-gray-300); box-shadow: var(--gi-shadow-sm); }
.gi-tl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.gi-tl-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--gi-ink); line-height: 1.35; }
.gi-tl-subtitle { margin-top: 2px; font-size: 12.5px; color: var(--gi-gray-500); }
.gi-tl-date { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--gi-gray-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gi-tl-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gi-tl-body { margin-top: 8px; font-size: 13px; color: var(--gi-gray-600); line-height: 1.55; }
.gi-timeline.is-plain .gi-tl-content { padding: 2px 0 0; background: transparent; border: 0; box-shadow: none; }

/* ==========================================================================
   16. Form section + sticky form actions
   ========================================================================== */
.gi-form-section { margin-bottom: 20px; background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 16px; box-shadow: var(--gi-shadow-sm); scroll-margin-top: calc(var(--gi-topbar-h) + 16px); }
.gi-form-section-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--gi-gray-100); }
.gi-form-section-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; color: var(--gi-primary); background: #EDF2F9; box-shadow: inset 0 0 0 1px rgba(var(--gi-primary-rgb), .07);
}
.gi-form-section-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--gi-ink); letter-spacing: -.012em; line-height: 1.35; }
.gi-form-section-desc { margin: 2px 0 0; font-size: 12.5px; color: var(--gi-gray-500); line-height: 1.45; }
.gi-form-section-body { padding: 20px 22px 22px; }
.gi-form-section-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.gi-form-actions { position: sticky; bottom: 16px; z-index: 1010; margin-top: 24px; pointer-events: none; }
.gi-form-actions-inner {
    pointer-events: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px 12px 20px; background: rgba(255, 255, 255, .9); border: 1px solid var(--gi-gray-200); border-radius: 16px;
    box-shadow: var(--gi-shadow-lg); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
.gi-form-actions-note { margin-right: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gi-gray-500); }

/* ==========================================================================
   17. File drop zone + attachments
   ========================================================================== */
.gi-dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 18px;
    text-align: center; cursor: pointer; background: linear-gradient(180deg, #fff 0%, var(--gi-gray-25) 100%);
    border: 1.5px dashed var(--gi-gray-300); border-radius: 14px;
    transition: border-color var(--gi-dur) ease, background-color var(--gi-dur) ease, box-shadow var(--gi-dur) ease;
}
.gi-dropzone:hover { border-color: #9DB4D8; background: #FBFCFE; }
.gi-dropzone.is-dragover { border-color: var(--gi-royal); background: rgba(var(--gi-royal-rgb), .04); box-shadow: var(--gi-ring); }
.gi-dropzone.is-invalid { border-color: var(--gi-red); }
.gi-dropzone:focus-within { border-color: var(--gi-focus-border); box-shadow: var(--gi-ring); }
.gi-dropzone-icon {
    width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
    font-size: 21px; color: var(--gi-royal); background: #fff; border: 1px solid var(--gi-gray-200); box-shadow: 0 8px 18px -10px rgba(var(--gi-royal-rgb), .55);
    transition: transform var(--gi-dur) var(--gi-ease);
}
.gi-dropzone:hover .gi-dropzone-icon, .gi-dropzone.is-dragover .gi-dropzone-icon { transform: translateY(-2px); }
.gi-dropzone-title { font-size: 13.5px; color: var(--gi-gray-700); }
.gi-dropzone-title .gi-link { color: var(--gi-royal); font-weight: 600; background: none; border: 0; padding: 0; }
.gi-dropzone-hint { font-size: 12px; color: var(--gi-gray-400); }
.gi-dropzone-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.gi-dropzone.is-compact { flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; padding: 14px 16px; }
.gi-dropzone.is-compact .gi-dropzone-icon { margin: 0; width: 40px; height: 40px; font-size: 18px; flex-shrink: 0; }
.gi-dropzone.is-compact .gi-dropzone-actions { margin: 0 0 0 auto; }
.gi-file-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gi-file-chips:empty { display: none; }
.gi-file-chip {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 6px 6px 10px; font-size: 12.5px;
    background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 10px; box-shadow: var(--gi-shadow-xs); animation: giFadeUp .2s var(--gi-ease);
}
.gi-file-chip .bi-file { font-size: 15px; }
.gi-file-chip-thumb { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; border: 1px solid var(--gi-gray-200); flex-shrink: 0; }
.gi-file-chip-name { max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: var(--gi-ink); }
.gi-file-chip-size { color: var(--gi-gray-400); white-space: nowrap; }
.gi-file-chip-remove { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--gi-gray-400); padding: 0; }
.gi-file-chip-remove:hover { background: #FCEEF0; color: var(--gi-red); }

.gi-ft-pdf { --gi-ft: #D93A3A; --gi-ft-bg: #FDEEEE; }
.gi-ft-image { --gi-ft: #1F86BF; --gi-ft-bg: #E8F4FB; }
.gi-ft-word { --gi-ft: #1A4B94; --gi-ft-bg: #EDF2F9; }
.gi-ft-excel { --gi-ft: #3E8A2A; --gi-ft-bg: #EFF6E8; }
.gi-ft-zip { --gi-ft: #B7700A; --gi-ft-bg: #FEF5E4; }
.gi-ft-other { --gi-ft: #6B7A90; --gi-ft-bg: #F1F4F8; }
.gi-file-chip .bi, .gi-att-icon { color: var(--gi-ft, var(--gi-gray-500)); }

.gi-att-upload { padding: 16px 20px; border-bottom: 1px solid var(--gi-gray-100); background: var(--gi-gray-25); }
.gi-att-list { list-style: none; margin: 0; padding: 0; }
.gi-att-item { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--gi-gray-100); transition: background-color .12s ease; }
.gi-att-item:last-child { border-bottom: 0; }
.gi-att-item:hover { background: #FAFBFD; }
.gi-att-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; background: var(--gi-ft-bg, var(--gi-gray-100)); }
.gi-att-thumb { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; object-fit: cover; border: 1px solid var(--gi-gray-200); background: var(--gi-gray-50); }
.gi-att-main { flex: 1; min-width: 0; }
.gi-att-name { display: block; font-weight: 600; font-size: 13.5px; color: var(--gi-ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
a.gi-att-name:hover { color: var(--gi-primary); }
.gi-att-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: var(--gi-gray-500); }
.gi-att-meta .gi-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gi-gray-300); }
.gi-att-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gi-att-actions form { margin: 0; }
.gi-att-share { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 12px; color: var(--gi-gray-500); white-space: nowrap; }
.gi-att-share .form-check-input { margin: 0; }
.gi-att-note { display: flex; align-items: center; gap: 10px; margin: 16px 20px; padding: 12px 14px; font-size: 13px; color: var(--gi-gray-600); background: var(--gi-gray-50); border: 1px dashed var(--gi-gray-300); border-radius: 12px; }

.gi-preview-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--gi-shadow-xl); }
.gi-preview-modal .modal-header { padding: 14px 18px; border-bottom: 1px solid var(--gi-gray-100); gap: 12px; }
.gi-preview-modal .modal-title { font-size: 14.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gi-preview-modal .modal-body { padding: 0; background: #F1F4F8; min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.gi-preview-modal .modal-body img { max-width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.gi-preview-modal .modal-body iframe { width: 100%; height: 78vh; border: 0; background: #fff; }

/* ==========================================================================
   18. Items editor (document line items)
   ========================================================================== */
.gi-items { --gi-li-cols: 26px minmax(220px, 1fr) 84px 86px 118px 150px 96px 124px 34px; }
.gi-items-head, .gi-li-row { display: grid; grid-template-columns: var(--gi-li-cols); gap: 10px; align-items: start; }
.gi-items-head {
    padding: 10px 16px; background: #F8FAFC; border-bottom: 1px solid var(--gi-gray-200);
    font-size: 11px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; color: var(--gi-gray-500);
}
.gi-items-head > .num { text-align: right; }
.gi-li-body { counter-reset: gi-li; }
.gi-li-row { position: relative; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--gi-gray-100); counter-increment: gi-li; transition: background-color .12s ease; }
.gi-li-row:hover { background: #FBFCFE; }
.gi-li-row.is-ghost { opacity: .5; background: #EDF2F9; }
.gi-li-row.is-chosen { box-shadow: var(--gi-shadow-lg); border-radius: 12px; z-index: 5; }
.gi-li-row.is-new { animation: giFadeUp .22s var(--gi-ease); }
.gi-li-row .form-control, .gi-li-row .form-select { padding: .5rem .65rem; font-size: .964rem; min-height: 38px; border-radius: 9px; }
.gi-li-row .select2-container--bootstrap-5 .select2-selection { min-height: 38px; padding-top: .45rem; padding-bottom: .45rem; font-size: .964rem; border-radius: 9px; }
.gi-li-row .num-input { text-align: right; font-variant-numeric: tabular-nums; }
.gi-li-handle { grid-area: handle; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 9px; color: var(--gi-gray-300); cursor: grab; user-select: none; touch-action: none; }
.gi-li-handle::before { content: counter(gi-li); font-size: 11.5px; font-weight: 600; color: var(--gi-gray-400); font-variant-numeric: tabular-nums; }
.gi-li-handle .bi { font-size: 14px; opacity: 0; transition: opacity var(--gi-dur) ease; }
.gi-li-row:hover .gi-li-handle .bi { opacity: 1; }
.gi-li-handle:active { cursor: grabbing; }
.gi-li-item { grid-area: item; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gi-li-item textarea.form-control { min-height: 38px; height: 38px; resize: none; overflow: hidden; line-height: 1.4; }
.gi-li-sac { display: flex; align-items: center; gap: 6px; }
.gi-li-sac .form-control { max-width: 150px; min-height: 30px; padding: .3rem .55rem; font-size: 12.5px; }
.gi-li-sac-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gi-gray-400); }
.gi-li-qty { grid-area: qty; } .gi-li-unit { grid-area: unit; } .gi-li-rate { grid-area: rate; } .gi-li-disc { grid-area: disc; } .gi-li-tax { grid-area: tax; }
.gi-li-amount { grid-area: amount; padding-top: 9px; text-align: right; font-weight: 600; color: var(--gi-ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.gi-li-amount small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--gi-gray-400); }
.gi-li-remove { grid-area: remove; padding-top: 3px; text-align: right; }
.gi-li-remove .btn { width: 32px; height: 32px; padding: 0; color: var(--gi-gray-400); border-radius: 9px; }
.gi-li-remove .btn:hover { background: #FCEEF0; color: var(--gi-red); }
.gi-li-label { display: none; margin-bottom: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gi-gray-400); }
.gi-li-disc-group { display: flex; gap: 0; }
.gi-li-disc-group .gi-disc-toggle { display: inline-flex; flex-shrink: 0; padding: 3px; background: var(--gi-gray-100); border-radius: 9px 0 0 9px; border: 1px solid var(--gi-gray-200); border-right: 0; }
.gi-li-disc-group .gi-disc-toggle button { width: 24px; height: 30px; border: 0; padding: 0; font-size: 12px; font-weight: 600; color: var(--gi-gray-500); background: transparent; border-radius: 6px; transition: all .12s ease; }
.gi-li-disc-group .gi-disc-toggle button.active { color: var(--gi-primary); background: #fff; box-shadow: var(--gi-shadow-xs); }
.gi-li-disc-group .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }
.gi-li-row .is-muted { opacity: .5; }
.gi-li-row .invalid-feedback { display: block; font-size: 11.5px; margin-top: 4px; }
.gi-li-row .invalid-feedback::before { display: none; }

.gi-items-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px; }
.gi-items-foot-left { display: flex; flex-direction: column; gap: 10px; }
.gi-items-hint { font-size: 12px; color: var(--gi-gray-400); display: flex; align-items: center; gap: 6px; }
.gi-totals { width: 100%; max-width: 380px; margin-left: auto; padding: 14px 16px; background: var(--gi-gray-25); border: 1px solid var(--gi-gray-200); border-radius: 14px; }
.gi-total-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 13.5px; color: var(--gi-gray-600); }
.gi-total-row > span:last-child { font-weight: 500; color: var(--gi-ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.gi-total-row.is-sub { border-top: 1px dashed var(--gi-gray-200); margin-top: 4px; padding-top: 10px; }
.gi-total-row[hidden] { display: none; }
.gi-total-grand {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 12px 14px;
    background: linear-gradient(135deg, rgba(var(--gi-primary-rgb), .08), rgba(var(--gi-sky-rgb), .06)); border: 1px solid rgba(var(--gi-primary-rgb), .12); border-radius: 11px;
}
.gi-total-grand > span:first-child { font-weight: 600; color: var(--gi-ink); font-size: 13.5px; }
.gi-total-grand > span:first-child small { display: block; font-size: 11.5px; font-weight: 500; color: var(--gi-gray-500); }
.gi-total-grand > span:last-child { font-size: 1.43rem; font-weight: 700; letter-spacing: -.02em; color: var(--gi-primary); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.gi-items-error { margin: 12px 16px 0; }
.gi-li-row .gi-li-errors { grid-column: 1 / -1; margin: 0; }
/* Embedded inside a form section: the section already provides the heading, keep a light inner frame. */
.gi-form-section-body .gi-items { border-radius: 14px; box-shadow: none; overflow: hidden; }
.gi-form-section-body .gi-items > .card-header { display: none; }
.row > .gi-items { flex: 0 0 auto; width: calc(100% - var(--bs-gutter-x)); margin-left: calc(var(--bs-gutter-x) * .5); margin-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; padding-right: 0; }

@media (max-width: 1199.98px) {
    .gi-items-head { display: none; }
    .gi-items { --gi-li-cols: 26px 0.8fr 0.9fr 1.15fr 1.45fr 0.95fr 1.1fr 34px; }
    .gi-li-row { grid-template-areas: "handle item item item item item item remove" "handle qty unit rate disc tax amount remove"; row-gap: 12px; padding: 14px 16px; }
    .gi-li-label { display: block; }
    .gi-li-amount { padding-top: 26px; }
}
@media (min-width: 1200px) {
    .gi-li-row { grid-template-areas: "handle item qty unit rate disc tax amount remove"; }
}
@media (max-width: 767.98px) {
    .gi-items { --gi-li-cols: 1fr 1fr; }
    .gi-li-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--gi-gray-50); }
    .gi-li-row { grid-template-areas: "handle remove" "item item" "qty unit" "rate disc" "tax amount"; gap: 10px 12px; padding: 12px 14px 14px; border: 1px solid var(--gi-gray-200); border-radius: 14px; box-shadow: var(--gi-shadow-xs); }
    .gi-li-handle { flex-direction: row; align-items: center; gap: 8px; padding: 0; }
    .gi-li-handle::before { content: "Item " counter(gi-li); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gi-gray-600); order: 2; }
    .gi-li-handle .bi { opacity: 1; order: 1; }
    .gi-li-remove { padding: 0; }
    .gi-li-amount { padding-top: 22px; font-size: 15px; }
    .gi-items-foot { padding: 12px; }
    .gi-totals { max-width: none; }
}

/* ==========================================================================
   19. App shell: sidebar
   ========================================================================== */
.gi-app { min-height: 100vh; background: var(--bs-body-bg); }
.gi-skip-link { position: fixed; top: -60px; left: 16px; z-index: 2000; padding: 10px 16px; background: var(--gi-primary); color: #fff; border-radius: 10px; font-weight: 600; transition: top .2s ease; }
.gi-skip-link:focus { top: 12px; color: #fff; }

.gi-sidebar-surface {
    color: rgba(255, 255, 255, .72);
    background:
        radial-gradient(420px 280px at -8% -6%, rgba(36, 144, 204, .22) 0%, rgba(36, 144, 204, 0) 70%),
        radial-gradient(380px 320px at 110% 104%, rgba(108, 168, 60, .12) 0%, rgba(108, 168, 60, 0) 70%),
        linear-gradient(180deg, var(--gi-navy-950) 0%, var(--gi-navy-900) 100%);
}
.gi-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1035; width: var(--gi-sidebar-w);
    display: flex; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, .04);
    transition: width .22s var(--gi-ease), box-shadow .22s ease;
}
.gi-sidebar-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%; }
.gi-sidebar-brand { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 84px; padding: 0 22px; padding-top: var(--gi-safe-top); box-sizing: content-box; }
.gi-brand-link { display: inline-flex; align-items: center; min-width: 0; }
.gi-brand-full { display: block; height: 54px; width: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .25)); }
.gi-brand-mark { display: none; width: 38px; height: 38px; }
.gi-sidebar-brand::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, 0)); }

.gi-nav {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 14px 24px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
}
.gi-nav { scrollbar-color: transparent transparent; }
.gi-nav:hover { scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.gi-nav::-webkit-scrollbar-thumb { background: transparent; border: 3px solid transparent; background-clip: content-box; }
.gi-nav:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .16); }
.gi-nav-list, .gi-nav-sub { list-style: none; margin: 0; padding: 0; }
.gi-nav-heading { padding: 18px 12px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .36); white-space: nowrap; }
.gi-nav-heading:first-child { padding-top: 8px; }
.gi-nav-link {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0; padding: 9px 12px;
    font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .74); white-space: nowrap; border-radius: 10px; border: 0; background: transparent;
    transition: background-color var(--gi-dur) ease, color var(--gi-dur) ease, box-shadow var(--gi-dur) ease;
}
.gi-nav-link:hover, .gi-nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); outline: 0; }
.gi-nav-link:focus-visible { box-shadow: 0 0 0 2px rgba(36, 144, 204, .6); }
.gi-nav-icon { flex-shrink: 0; width: 20px; font-size: 17px; line-height: 1; text-align: center; color: rgba(255, 255, 255, .5); transition: color var(--gi-dur) ease; }
.gi-nav-link:hover .gi-nav-icon { color: rgba(255, 255, 255, .95); }
.gi-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gi-nav-caret { flex-shrink: 0; font-size: 10.5px; opacity: .5; transition: transform .22s var(--gi-ease), opacity var(--gi-dur) ease; }
.gi-nav-toggle:not(.collapsed) .gi-nav-caret { transform: rotate(180deg); opacity: .85; }
.gi-nav-link.active {
    color: #fff; background: var(--gi-gradient);
    box-shadow: 0 10px 22px -12px rgba(36, 144, 204, .75), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.gi-nav-link.active .gi-nav-icon { color: #fff; }
.gi-nav-link.active::before, .gi-nav-sublink.active::after {
    content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0;
    background: var(--gi-gradient-green); box-shadow: 0 0 12px rgba(140, 193, 82, .65);
}
.gi-nav-group.is-active > .gi-nav-toggle { color: #fff; }
.gi-nav-group.is-active > .gi-nav-toggle .gi-nav-icon { color: #7CC3EA; }
.gi-nav-sub { position: relative; padding: 2px 0 6px 22px; }
.gi-nav-sub::before { content: ""; position: absolute; left: 21px; top: 6px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .1); }
.gi-nav-sublink {
    position: relative; display: flex; align-items: center; gap: 10px; margin: 1px 0; padding: 7px 12px 7px 20px;
    font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .6); white-space: nowrap; border-radius: 9px;
    transition: background-color var(--gi-dur) ease, color var(--gi-dur) ease;
}
.gi-nav-sublink::before { content: ""; position: absolute; left: -3.5px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #0D2148; border: 1.5px solid rgba(255, 255, 255, .22); transition: all var(--gi-dur) ease; }
.gi-nav-sublink:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.gi-nav-sublink:hover::before { border-color: rgba(255, 255, 255, .5); }
.gi-nav-sublink.active { color: #fff; background: var(--gi-gradient); box-shadow: 0 10px 22px -12px rgba(36, 144, 204, .75), inset 0 1px 0 rgba(255, 255, 255, .14); }
.gi-nav-sublink.active::before { background: var(--gi-green-400); border-color: var(--gi-green-400); box-shadow: 0 0 0 3px rgba(140, 193, 82, .22); }
.gi-nav-sublink.active::after { left: -36px; top: 7px; bottom: 7px; }
.gi-nav .collapsing { transition: height .22s var(--gi-ease); }
.gi-nav-badge {
    flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; color: #fff; background: var(--gi-red); border-radius: 10px; font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px -4px rgba(220, 53, 69, .7);
}
.gi-nav-badge[hidden] { display: none; }

.gi-sidebar-footer { flex-shrink: 0; padding: 14px 18px calc(16px + var(--gi-safe-bottom)); }
.gi-sidebar-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.gi-sidebar-card img { width: 32px; height: 32px; flex-shrink: 0; }
.gi-sidebar-card-text { min-width: 0; line-height: 1.3; }
.gi-sidebar-card-text strong { display: block; font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-sidebar-card-text span { display: block; font-size: 11px; color: rgba(255, 255, 255, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Offcanvas (mobile drawer) */
.gi-offcanvas { --bs-offcanvas-width: 292px; --bs-offcanvas-bg: var(--gi-navy-950); --bs-offcanvas-border-width: 0; border-right: 0 !important; box-shadow: 24px 0 48px -12px rgba(6, 18, 42, .5); }
.gi-offcanvas .gi-offcanvas-close { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); border: 0; border-radius: 10px; font-size: 18px; }
.gi-offcanvas .gi-offcanvas-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.offcanvas-backdrop.show { opacity: .55; }
.offcanvas-backdrop { background-color: #06122A; }

/* Main column */
.gi-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; transition: margin-left .22s var(--gi-ease); }
@media (min-width: 992px) {
    .gi-main { margin-left: var(--gi-sidebar-w); }
    .gi-sidebar-collapsed .gi-main { margin-left: var(--gi-sidebar-rail-w); }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) { width: var(--gi-sidebar-rail-w); }
    .gi-sidebar-collapsed .gi-sidebar.is-peek { box-shadow: 28px 0 60px -16px rgba(6, 18, 42, .55); }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-sidebar-brand { padding: 0; justify-content: center; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-sidebar-brand::after { left: 16px; right: 16px; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-brand-full { display: none; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-brand-mark { display: block; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav { padding-left: 14px; padding-right: 14px; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-heading { padding: 12px 0 8px; font-size: 0; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-heading::before { content: ""; display: block; height: 1px; margin: 0 10px; background: rgba(255, 255, 255, .1); }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-heading:first-child::before { display: none; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-link { justify-content: center; padding: 10px 0; gap: 0; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-text,
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-caret,
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-list .collapse,
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-list .collapsing,
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-sidebar-card-text { display: none !important; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-badge { position: absolute; top: 3px; right: 6px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-nav-group.is-active > .gi-nav-toggle { background: rgba(255, 255, 255, .08); }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-sidebar-footer { padding-left: 12px; padding-right: 12px; }
    .gi-sidebar-collapsed .gi-sidebar:not(.is-peek) .gi-sidebar-card { justify-content: center; padding: 10px 0; }
}

/* ==========================================================================
   20. Topbar
   ========================================================================== */
.gi-topbar {
    position: sticky; top: 0; z-index: 1030; padding-top: var(--gi-safe-top);
    background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(227, 232, 239, .9);
    transition: box-shadow var(--gi-dur) ease;
}
.gi-topbar.is-scrolled { box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .18); }
.gi-topbar-inner { position: relative; display: flex; align-items: center; gap: 10px; height: var(--gi-topbar-h); padding: 0 var(--gi-content-pad); }
.gi-icon-btn {
    position: relative; flex-shrink: 0; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px; color: var(--gi-gray-600); background: transparent; border: 0; border-radius: 11px;
    transition: background-color var(--gi-dur) ease, color var(--gi-dur) ease;
}
.gi-icon-btn:hover, .gi-icon-btn[aria-expanded="true"] { color: var(--gi-ink); background: var(--gi-gray-100); }
.gi-icon-btn:focus-visible { outline: 0; box-shadow: var(--gi-ring); }
.gi-topbar-mark { display: inline-flex; flex-shrink: 0; }
.gi-topbar-mark img { width: 32px; height: 32px; }
.gi-topbar-heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-left: 4px; }
.gi-breadcrumb { --bs-breadcrumb-divider: "/"; --bs-breadcrumb-item-padding-x: .55rem; --bs-breadcrumb-divider-color: var(--gi-gray-300); margin: 0; flex-wrap: nowrap; font-size: 13px; min-width: 0; }
/* The current page gives way first; parent crumbs only shrink (with an ellipsis) once it is down to ~90px. */
.gi-breadcrumb .breadcrumb-item { white-space: nowrap; min-width: 0; max-width: 220px; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.gi-breadcrumb .breadcrumb-item:first-child { flex: 0 0 auto; overflow: visible; }
.gi-breadcrumb .breadcrumb-item.active { flex-shrink: 100; min-width: 90px; max-width: none; }
.gi-breadcrumb .breadcrumb-item a { color: var(--gi-gray-500); font-weight: 500; }
.gi-breadcrumb .breadcrumb-item a:hover { color: var(--gi-primary); }
.gi-breadcrumb .breadcrumb-item.active { color: var(--gi-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.gi-breadcrumb .breadcrumb-item .bi-house-door { font-size: 14px; }
.gi-topbar-title { font-size: 15px; font-weight: 600; color: var(--gi-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; transition: opacity .2s ease, transform .2s ease; }
.gi-topbar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Global search */
.gi-search { position: relative; width: clamp(220px, 26vw, 360px); margin-right: 6px; }
.gi-search-field { position: relative; }
.gi-search-field > .bi-search { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gi-gray-400); font-size: 14px; pointer-events: none; }
.gi-search-input.form-control { height: 40px; padding: .5rem 2.6rem .5rem 2.4rem; background: var(--gi-gray-50); border-color: var(--gi-gray-100); border-radius: 11px; box-shadow: none; font-size: .964rem; }
.gi-search-input.form-control:hover { border-color: var(--gi-gray-200); }
.gi-search-input.form-control:focus { background: #fff; border-color: var(--gi-focus-border); box-shadow: var(--gi-ring); }
.gi-search-input::-webkit-search-cancel-button { display: none; }
.gi-search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: opacity .15s ease; }
.gi-search-input:focus ~ .gi-search-kbd, .gi-search-input:not(:placeholder-shown) ~ .gi-search-kbd { opacity: 0; }
.gi-search-close { display: none; }
.gi-search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 380px; z-index: 1060; max-height: min(460px, 70vh); overflow-y: auto;
    padding: 6px; background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 14px; box-shadow: var(--gi-shadow-xl);
    animation: giDropIn .14s var(--gi-ease);
}
.gi-search-results[hidden] { display: none; }
.gi-search-group { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gi-gray-400); }
.gi-search-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--gi-ink); }
.gi-search-item:hover, .gi-search-item.is-active { background: var(--gi-gray-50); color: var(--gi-ink); }
.gi-search-item.is-active { box-shadow: inset 0 0 0 1px var(--gi-gray-200); }
.gi-search-item-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--gi-primary); background: #EDF2F9; }
.gi-search-item-text { min-width: 0; flex: 1; line-height: 1.3; }
.gi-search-item-title { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-search-item-title mark { padding: 0; background: rgba(245, 158, 11, .22); color: inherit; border-radius: 3px; }
.gi-search-item-sub { display: block; font-size: 12px; color: var(--gi-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-search-item .bi-arrow-return-left { color: var(--gi-gray-300); font-size: 13px; opacity: 0; }
.gi-search-item.is-active .bi-arrow-return-left { opacity: 1; }
.gi-search-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--gi-gray-500); }
.gi-search-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--gi-gray-100); font-size: 11.5px; color: var(--gi-gray-400); }
.gi-search-footer a { font-weight: 600; font-size: 12px; }

/* Notifications */
.gi-dot-badge {
    position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: var(--gi-red); border-radius: 9px; box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums;
}
.gi-dot-badge[hidden] { display: none; }
.gi-bell-ring .bi-bell { animation: giBell .9s var(--gi-ease); transform-origin: 50% 10%; }
.gi-notify-menu { width: 390px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0; }
.gi-notify-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--gi-gray-100); }
.gi-notify-head strong { font-size: 14.5px; color: var(--gi-ink); }
.gi-notify-head .gi-notify-count { margin-left: 6px; }
.gi-notify-head .btn-link { padding: 0; font-size: 12.5px; }
.gi-notify-list { max-height: min(420px, 60vh); overflow-y: auto; }
.gi-notify-item { position: relative; display: flex; gap: 12px; padding: 12px 16px; color: inherit; border-bottom: 1px solid var(--gi-gray-100); transition: background-color .12s ease; cursor: pointer; }
.gi-notify-item:last-child { border-bottom: 0; }
.gi-notify-item:hover { background: var(--gi-gray-50); color: inherit; }
.gi-notify-item.is-unread { background: #F7FAFE; }
.gi-notify-item.is-unread::after { content: ""; position: absolute; right: 16px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--gi-royal); box-shadow: 0 0 0 3px rgba(var(--gi-royal-rgb), .15); }
.gi-notify-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--gi-accent); background: rgba(var(--gi-accent-rgb), .1); }
.gi-notify-body { min-width: 0; flex: 1; padding-right: 14px; }
.gi-notify-title { font-size: 13.5px; font-weight: 600; color: var(--gi-ink); line-height: 1.35; }
.gi-notify-msg { margin-top: 2px; font-size: 12.5px; color: var(--gi-gray-600); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gi-notify-time { margin-top: 4px; font-size: 11.5px; color: var(--gi-gray-400); }
.gi-notify-foot { display: block; padding: 11px 16px; text-align: center; font-size: 13px; font-weight: 600; border-top: 1px solid var(--gi-gray-100); background: var(--gi-gray-25); }
.gi-notify-foot:hover { background: var(--gi-gray-50); }
.gi-notify-empty { padding: 36px 20px; text-align: center; }
.gi-notify-empty .bi { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; font-size: 21px; color: var(--gi-green-600); background: #EFF6E8; border-radius: 14px; margin-bottom: 10px; }
.gi-notify-empty p { margin: 0; font-size: 13px; color: var(--gi-gray-500); }

/* User menu */
.gi-user-btn { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; margin-left: 4px; border: 0; background: transparent; border-radius: 12px; text-align: left; transition: background-color var(--gi-dur) ease; }
.gi-user-btn:hover, .gi-user-btn[aria-expanded="true"] { background: var(--gi-gray-100); }
.gi-user-btn:focus-visible { outline: 0; box-shadow: var(--gi-ring); }
.gi-user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gi-user-name { font-size: 13px; font-weight: 600; color: var(--gi-ink); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-user-role { font-size: 11.5px; color: var(--gi-gray-500); }
.gi-user-btn .bi-chevron-down { font-size: 11px; color: var(--gi-gray-400); }
.gi-user-menu { width: 272px; }
.gi-user-card { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--gi-gray-100); }
.gi-user-card-text { min-width: 0; line-height: 1.35; }
.gi-user-card-text strong { display: block; font-size: 14px; color: var(--gi-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-user-card-text span { display: block; font-size: 12px; color: var(--gi-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-user-card .badge { margin-top: 6px; }

/* Top progress bar */
.gi-progress { position: fixed; top: 0; left: 0; z-index: 2100; height: 2.5px; width: 0; opacity: 0; background: linear-gradient(90deg, #2490CC, #6CA83C); box-shadow: 0 0 10px rgba(36, 144, 204, .6); pointer-events: none; }
.gi-progress.is-active { opacity: 1; animation: giProgress 8s cubic-bezier(.1, .7, .2, 1) forwards; }
.gi-progress.is-done { opacity: 0; width: 100%; transition: width .2s ease, opacity .4s ease .2s; }

/* ==========================================================================
   21. Content area + footer
   ========================================================================== */
.gi-content { flex: 1 0 auto; width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px var(--gi-content-pad) 40px; }
.gi-content > * { animation: giFadeUp .26s var(--gi-ease) both; }
.gi-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 1680px; margin: 0 auto; padding: 18px var(--gi-content-pad) 22px; font-size: 12px; color: var(--gi-gray-400); }
.gi-footer img { height: 18px; width: auto; opacity: .75; }

/* ==========================================================================
   22. Bottom navigation (mobile)
   ========================================================================== */
.gi-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: stretch; justify-content: space-around;
    height: calc(var(--gi-bottom-nav-h) + var(--gi-safe-bottom)); padding: 0 6px var(--gi-safe-bottom);
    background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--gi-gray-200); box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, .25);
}
.gi-bottom-item {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--gi-gray-500);
    background: none; border: 0; text-decoration: none; transition: color var(--gi-dur) ease;
}
.gi-bottom-item span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-bottom-icon { position: relative; width: 50px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 19px; border-radius: 15px; transition: background-color .2s var(--gi-ease), transform .2s var(--gi-ease); }
.gi-bottom-item:active .gi-bottom-icon { transform: scale(.92); }
.gi-bottom-item.active { color: var(--gi-primary); }
.gi-bottom-item.active .gi-bottom-icon { background: rgba(var(--gi-primary-rgb), .1); }
.gi-bottom-item .gi-dot-badge { top: -2px; right: 6px; }

/* ==========================================================================
   23. Alerts / modals / SweetAlert2 / tooltips / nav tabs
   ========================================================================== */
.alert { --bs-alert-border-radius: 12px; --bs-alert-padding-y: .85rem; --bs-alert-padding-x: 1rem; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.alert > .bi { font-size: 17px; line-height: 1.2; flex-shrink: 0; }
.modal { --bs-modal-border-radius: 18px; --bs-modal-border-color: transparent; --bs-modal-box-shadow: var(--gi-shadow-xl); --bs-modal-header-padding: 1rem 1.43rem; --bs-modal-padding: 1.43rem; --bs-modal-footer-border-color: var(--gi-gray-100); --bs-modal-header-border-color: var(--gi-gray-100); }
.modal-backdrop { --bs-backdrop-bg: #06122A; --bs-backdrop-opacity: .5; }
.modal-title { font-size: 1.071rem; font-weight: 600; }
.tooltip { --bs-tooltip-bg: #0F172A; --bs-tooltip-border-radius: 8px; --bs-tooltip-font-size: 12px; --bs-tooltip-padding-x: .6rem; --bs-tooltip-padding-y: .35rem; }
.popover { --bs-popover-border-color: var(--gi-gray-200); --bs-popover-border-radius: 12px; --bs-popover-box-shadow: var(--gi-shadow-lg); }
.progress { --bs-progress-bg: var(--gi-gray-100); --bs-progress-bar-bg: var(--gi-primary); --bs-progress-border-radius: 999px; --bs-progress-height: 8px; }
.progress-bar { background-image: var(--gi-gradient); }
.list-group { --bs-list-group-border-color: var(--gi-gray-100); --bs-list-group-active-bg: var(--gi-primary); --bs-list-group-active-border-color: var(--gi-primary); --bs-list-group-action-hover-bg: var(--gi-gray-50); }
.nav-tabs { --bs-nav-tabs-border-color: var(--gi-gray-200); --bs-nav-tabs-link-active-color: var(--gi-primary); --bs-nav-tabs-link-active-border-color: transparent; gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--gi-gray-500); font-weight: 500; padding: .7rem .9rem; margin-bottom: -1px; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--gi-ink); border-bottom-color: var(--gi-gray-300); }
.nav-tabs .nav-link.active { color: var(--gi-primary); background: transparent; border-bottom-color: var(--gi-primary); }
/* Tabs stay on one line and scroll sideways (active tab is scrolled into view by app.js) instead of wrapping. */
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs > .nav-item, .nav-tabs > .nav-link { flex-shrink: 0; }
.nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-pills { --bs-nav-pills-border-radius: 10px; --bs-nav-pills-link-active-bg: var(--gi-primary); gap: 4px; }
.nav-pills .nav-link { color: var(--gi-gray-600); font-weight: 500; }
.nav-segment { display: inline-flex; gap: 2px; padding: 3px; background: var(--gi-gray-100); border-radius: 11px; flex-wrap: wrap; }
.nav-segment .nav-link { padding: .42rem .85rem; font-size: 13px; font-weight: 500; color: var(--gi-gray-600); border-radius: 8px; }
.nav-segment .nav-link:hover { color: var(--gi-ink); }
.nav-segment .nav-link.active { color: var(--gi-ink); background: #fff; box-shadow: var(--gi-shadow-sm); }
.accordion { --bs-accordion-border-color: var(--gi-gray-200); --bs-accordion-border-radius: 14px; --bs-accordion-inner-border-radius: 13px; --bs-accordion-active-bg: var(--gi-gray-25); --bs-accordion-active-color: var(--gi-ink); --bs-accordion-btn-focus-box-shadow: var(--gi-ring); }

div:where(.swal2-container) { z-index: 2060; }
div:where(.swal2-container).swal2-backdrop-show { background: rgba(6, 18, 42, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
div:where(.swal2-container) div:where(.swal2-popup).gi-swal { width: 29em; max-width: calc(100vw - 32px); padding: 28px 26px 24px; border-radius: 20px; font-family: var(--bs-font-sans-serif); box-shadow: var(--gi-shadow-xl); }
div:where(.swal2-container) .gi-swal h2:where(.swal2-title) { padding: 6px 0 0; font-size: 19px; font-weight: 600; color: var(--gi-ink); letter-spacing: -.015em; }
div:where(.swal2-container) .gi-swal div:where(.swal2-html-container) { margin: 8px 0 0; padding: 0 4px; font-size: 14px; color: var(--gi-gray-600); line-height: 1.55; }
div:where(.swal2-container) .gi-swal div:where(.swal2-actions) { gap: 10px; margin-top: 22px; width: 100%; }
div:where(.swal2-container) .gi-swal div:where(.swal2-actions) .btn { min-width: 120px; }
div:where(.swal2-icon) { border-width: 3px !important; }
div:where(.swal2-container) .gi-swal div:where(.swal2-icon) { width: 64px; height: 64px; margin: 6px auto 4px; }
div:where(.swal2-container) .gi-swal div:where(.swal2-icon) .swal2-icon-content { font-size: 38px; }
div:where(.swal2-icon).swal2-warning { border-color: #FBD38D !important; color: var(--gi-amber) !important; }
div:where(.swal2-icon).swal2-error { border-color: #F1A7AF !important; }
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] { background-color: var(--gi-red) !important; }
div:where(.swal2-icon).swal2-success { border-color: rgba(108, 168, 60, .35) !important; color: var(--gi-green) !important; }
div:where(.swal2-icon).swal2-success [class^=swal2-success-line] { background-color: var(--gi-green) !important; }
div:where(.swal2-icon).swal2-success .swal2-success-ring { border-color: rgba(108, 168, 60, .3) !important; }
div:where(.swal2-icon).swal2-info { border-color: #9ACDEB !important; color: var(--gi-sky) !important; }
div:where(.swal2-icon).swal2-question { border-color: #A9BDDD !important; color: var(--gi-primary) !important; }
div:where(.swal2-container) div:where(.swal2-popup).gi-toast {
    display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px;
    width: 380px; max-width: calc(100vw - 24px); padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px solid var(--gi-gray-200);
    box-shadow: var(--gi-shadow-xl); font-family: var(--bs-font-sans-serif); background: rgba(255, 255, 255, .97);
}
div:where(.swal2-container) .gi-toast h2:where(.swal2-title) { margin: 0; padding: 0; font-size: 13.5px; font-weight: 500; color: var(--gi-ink); line-height: 1.45; text-align: left; }
div:where(.swal2-container) .gi-toast div:where(.swal2-icon) { width: 30px !important; min-width: 30px; height: 30px !important; margin: 0 !important; border-width: 2px !important; }
div:where(.swal2-container) .gi-toast div:where(.swal2-icon) .swal2-icon-content { font-size: 18px !important; font-weight: 700; }
div:where(.swal2-container) .gi-toast button:where(.swal2-close) { position: static; width: 26px; height: 26px; font-size: 20px; color: var(--gi-gray-400); border-radius: 8px; margin: 0; }
div:where(.swal2-container) .gi-toast button:where(.swal2-close):hover { background: var(--gi-gray-100); color: var(--gi-ink); }
div:where(.swal2-container) .gi-toast div:where(.swal2-timer-progress-bar-container) { border-radius: 0 0 14px 14px; }
div:where(.swal2-container) .gi-toast div:where(.swal2-timer-progress-bar) { height: 2.5px; background: rgba(var(--gi-accent-rgb, 26, 75, 148), .45); }
.gi-toast-success { --gi-accent-rgb: 108, 168, 60; }
.gi-toast-error { --gi-accent-rgb: 220, 53, 69; }
.gi-toast-warning { --gi-accent-rgb: 245, 158, 11; }
.gi-toast-info { --gi-accent-rgb: 36, 144, 204; }

/* ApexCharts */
.gi-chart { min-height: 280px; }
.apexcharts-tooltip.apexcharts-theme-light { border: 1px solid var(--gi-gray-200) !important; border-radius: 10px !important; box-shadow: var(--gi-shadow-lg) !important; }
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--gi-gray-50) !important; border-bottom: 1px solid var(--gi-gray-100) !important; font-weight: 600; }
.apexcharts-xaxistooltip { border-radius: 8px !important; border-color: var(--gi-gray-200) !important; background: #fff !important; }
.apexcharts-legend-text { color: var(--gi-gray-600) !important; }

/* ==========================================================================
   24. Auth (login) + error pages
   ========================================================================== */
.gi-auth-body { min-height: 100vh; min-height: 100dvh; margin: 0; color: #fff; background: #06122A; overflow-x: hidden; }
.gi-auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background: radial-gradient(1200px 700px at 10% 0%, #0F2A57 0%, rgba(15, 42, 87, 0) 60%), linear-gradient(160deg, #06122A 0%, #0A1B3D 55%, #07162F 100%); }
/* Background photo (Settings → Company Profile → Login Page Background), dimmed in brand navy per data-shade. */
.gi-auth-photo { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.gi-auth-shade { position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(6, 18, 42, var(--gi-shade-a)) 0%, rgba(8, 26, 60, var(--gi-shade-b)) 52%, rgba(6, 18, 42, var(--gi-shade-c)) 100%); }
.gi-auth-bg[data-shade="light"] { --gi-shade-a: .80; --gi-shade-b: .52; --gi-shade-c: .62; }
.gi-auth-bg, .gi-auth-bg[data-shade="medium"] { --gi-shade-a: .90; --gi-shade-b: .70; --gi-shade-c: .78; }
.gi-auth-bg[data-shade="dark"] { --gi-shade-a: .95; --gi-shade-b: .87; --gi-shade-c: .90; }
.gi-auth-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.gi-auth-blob.b1 { width: 560px; height: 560px; left: -140px; top: -160px; background: radial-gradient(circle, #1860A8 0%, rgba(24, 96, 168, 0) 70%); animation: giMesh1 22s ease-in-out infinite alternate; }
.gi-auth-blob.b2 { width: 520px; height: 520px; right: -120px; top: 10%; background: radial-gradient(circle, #2490CC 0%, rgba(36, 144, 204, 0) 70%); opacity: .38; animation: giMesh2 26s ease-in-out infinite alternate; }
.gi-auth-blob.b3 { width: 460px; height: 460px; left: 30%; bottom: -200px; background: radial-gradient(circle, #6CA83C 0%, rgba(108, 168, 60, 0) 70%); opacity: .26; animation: giMesh3 30s ease-in-out infinite alternate; }
.gi-auth-blob.b4 { width: 380px; height: 380px; right: 18%; bottom: 8%; background: radial-gradient(circle, #183C84 0%, rgba(24, 60, 132, 0) 70%); opacity: .6; animation: giMesh1 34s ease-in-out infinite alternate-reverse; }
.gi-auth-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 35% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 35% 40%, #000 20%, transparent 75%); }
.gi-auth { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; width: 100%; max-width: 1240px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: calc(40px + var(--gi-safe-top)) 40px calc(40px + var(--gi-safe-bottom)); }
.gi-auth-brand { max-width: 540px; animation: giFadeUp .6s var(--gi-ease) both; }
.gi-auth-logo { display: block; width: 250px; max-width: 70%; height: auto; margin-bottom: 38px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .35)); }
.gi-auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #BFE0A4; background: rgba(108, 168, 60, .12); border: 1px solid rgba(140, 193, 82, .25); border-radius: 999px; }
.gi-auth-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8CC152; box-shadow: 0 0 10px #8CC152; }
.gi-auth-title { margin: 0; font-size: clamp(2rem, 1.3rem + 2vw, 2.9rem); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; color: #fff; }
.gi-auth-title span { background: linear-gradient(90deg, #7CC3EA 0%, #A6D57E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gi-auth-lead { margin: 18px 0 0; max-width: 460px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .62); }
.gi-auth-props { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.gi-auth-props li { display: flex; gap: 14px; align-items: flex-start; }
.gi-auth-props .ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #9AD0F0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.gi-auth-props strong { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.gi-auth-props span:not(.ico) { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .55); }
.gi-auth-panel { display: flex; flex-direction: column; align-items: center; animation: giFadeUp .6s .08s var(--gi-ease) both; }
.gi-glass {
    position: relative; width: 100%; max-width: 440px; padding: 40px 38px 34px; border-radius: 24px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.gi-glass::before { content: ""; position: absolute; inset: -1px; border-radius: 24px; padding: 1px; pointer-events: none;
    background: linear-gradient(140deg, rgba(124, 195, 234, .55), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(140, 193, 82, .45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.gi-glass-mark { display: none; }
.gi-glass h2 { margin: 0; font-size: 1.643rem; font-weight: 600; color: #fff; letter-spacing: -.025em; }
.gi-glass .gi-glass-sub { margin: 6px 0 26px; font-size: 14px; color: rgba(255, 255, 255, .58); }
.gi-glass .form-floating { margin-bottom: 14px; }
.gi-glass .form-control {
    color: #fff; background-color: rgba(6, 18, 42, .35); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; box-shadow: none;
}
.gi-glass .form-control:hover { border-color: rgba(255, 255, 255, .24); }
.gi-glass .form-control:focus { color: #fff; background-color: rgba(6, 18, 42, .5); border-color: rgba(124, 195, 234, .75); box-shadow: 0 0 0 4px rgba(36, 144, 204, .22); }
.gi-glass .form-control.is-invalid { border-color: #F08892; }
.gi-glass .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 53, 69, .25); }
.gi-glass .form-floating > label { color: rgba(255, 255, 255, .55); }
.gi-glass .form-floating > .form-control:focus ~ label, .gi-glass .form-floating > .form-control:not(:placeholder-shown) ~ label { color: rgba(255, 255, 255, .6); }
.gi-glass .form-floating > .form-control:focus ~ label { color: #9AD0F0; }
.gi-glass .form-floating > .form-control ~ label::after { background-color: transparent !important; }
.gi-glass .form-control:-webkit-autofill, .gi-glass .form-control:-webkit-autofill:hover, .gi-glass .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #0E2249 inset; transition: background-color 9999s ease-out;
}
.gi-glass .gi-pass-wrap { position: relative; }
.gi-glass .gi-pass-wrap .form-control { padding-right: 3rem; }
.gi-glass .gi-pass-toggle { position: absolute; right: 8px; top: 8px; z-index: 5; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .55); background: transparent; border: 0; border-radius: 9px; font-size: 17px; }
.gi-glass .gi-pass-toggle:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.gi-glass .invalid-feedback { color: #FFB3BA; }
.gi-glass .form-check-input { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); }
.gi-glass .form-check-input:checked { background-color: #2490CC; border-color: #2490CC; }
.gi-glass .form-check-label { color: rgba(255, 255, 255, .7); font-size: 13.5px; }
.gi-glass .gi-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; }
.gi-glass .gi-auth-row a { font-size: 13px; color: #9AD0F0; }
.gi-glass .gi-auth-row a:hover { color: #fff; }
.gi-glass .btn-brand { height: 52px; font-size: 15px; font-weight: 600; border-radius: 13px; letter-spacing: -.005em; }
.gi-auth-alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; font-size: 13px; line-height: 1.45; border-radius: 12px; color: #FFD6DA; background: rgba(220, 53, 69, .14); border: 1px solid rgba(240, 136, 146, .35); }
.gi-auth-alert.is-info { color: #CDEBFA; background: rgba(36, 144, 204, .14); border-color: rgba(124, 195, 234, .35); }
.gi-auth-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 12px; color: rgba(255, 255, 255, .42); }
.gi-auth-foot { margin: 22px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .4); text-align: center; }

.gi-error-body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--gi-gray-50); display: flex; align-items: center; justify-content: center; overflow-x: hidden; }
.gi-error-body::before { content: ""; position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(700px 400px at 15% 10%, rgba(36, 144, 204, .12), transparent 70%), radial-gradient(600px 400px at 90% 95%, rgba(108, 168, 60, .10), transparent 70%); }
.gi-error-body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px); background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 10%, transparent 75%); }
.gi-error { position: relative; z-index: 1; width: 100%; max-width: 560px; padding: 40px 24px; text-align: center; animation: giFadeUp .5s var(--gi-ease) both; }
.gi-error-logo { height: 58px; width: auto; margin-bottom: 36px; }
.gi-error-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 14px; font-size: 26px; color: var(--gi-royal); background: #fff; border: 1px solid var(--gi-gray-200); border-radius: 18px; box-shadow: 0 14px 30px -14px rgba(var(--gi-royal-rgb), .5); }
.gi-error-code { font-size: clamp(4.5rem, 3rem + 7vw, 7.5rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; background: var(--gi-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.gi-error-title { margin: 14px 0 0; font-size: 1.571rem; font-weight: 600; color: var(--gi-ink); letter-spacing: -.02em; }
.gi-error-message { margin: 10px auto 0; max-width: 440px; font-size: 14.5px; line-height: 1.6; color: var(--gi-gray-500); }
.gi-error-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.gi-error-foot { margin-top: 44px; font-size: 12px; color: var(--gi-gray-400); }

/* ==========================================================================
   25. UI kit helpers (dev page)
   ========================================================================== */
.gi-swatch { display: flex; flex-direction: column; gap: 8px; }
.gi-swatch-chip { height: 64px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); }
.gi-swatch-name { font-size: 12.5px; font-weight: 600; color: var(--gi-ink); line-height: 1.2; }
.gi-swatch-hex { font-size: 11.5px; color: var(--gi-gray-500); font-variant-numeric: tabular-nums; }
.gi-kit-nav { position: sticky; top: calc(var(--gi-topbar-h) + 20px); }
.gi-kit-nav .nav-link { padding: 6px 12px; font-size: 13px; color: var(--gi-gray-600); border-radius: 8px; font-weight: 500; }
.gi-kit-nav .nav-link:hover { color: var(--gi-ink); background: var(--gi-gray-100); }
.gi-kit-section { scroll-margin-top: calc(var(--gi-topbar-h) + 20px); margin-bottom: 40px; }

/* ==========================================================================
   26. Responsive shell
   ========================================================================== */
@media (max-width: 1599.98px) {
    /* Denser cells on laptop widths so index tables fit beside the sidebar (outer cells keep a 16px gutter). */
    .table-premium > thead > tr > th, .table-premium > tbody > tr > td, .table-premium > tbody > tr > th,
    .table-premium > tfoot > tr > td, .table-premium > tfoot > tr > th { padding-left: 10px; padding-right: 10px; }
    .table-premium { font-size: 13px; }
    .table-premium tr > :first-child { padding-left: 16px; }
    .table-premium tr > :last-child { padding-right: 16px; }
}
@media (max-width: 1199.98px) {
    :root { --gi-content-pad: 24px; }
}
@media (max-width: 991.98px) {
    :root { --gi-content-pad: 20px; }
    .gi-search { width: clamp(180px, 34vw, 300px); }
    .gi-auth { grid-template-columns: 1fr; gap: 36px; max-width: 560px; padding-top: calc(56px + var(--gi-safe-top)); }
    .gi-auth-brand { max-width: none; text-align: center; }
    .gi-auth-logo { margin: 0 auto 26px; width: 220px; }
    .gi-auth-lead { margin-left: auto; margin-right: auto; }
    .gi-auth-props { display: none; }
    .gi-auth-title br { display: none; }
}
@media (max-width: 767.98px) {
    :root { --gi-content-pad: 16px; --gi-topbar-h: 58px; }
    .form-control, .form-select, .select2-container--bootstrap-5 .select2-selection, .select2-search__field, .gi-search-input.form-control { font-size: 16px !important; }
    .gi-content { padding-top: 18px; padding-bottom: 28px; }
    .gi-has-bottom-nav .gi-content { padding-bottom: calc(var(--gi-bottom-nav-h) + var(--gi-safe-bottom) + 24px); }
    .gi-has-bottom-nav .gi-footer { display: none; }
    .gi-topbar-inner { gap: 6px; padding: 0 10px; }
    .gi-topbar-title { font-size: 15.5px; }
    .gi-page-title-hidden .gi-topbar-title { opacity: 0; transform: translateY(4px); }
    .gi-search { display: none; position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); width: auto; margin: 0; z-index: 5; }
    .gi-topbar.is-searching .gi-search { display: block; }
    .gi-topbar.is-searching .gi-topbar-inner > :not(.gi-search) { visibility: hidden; }
    .gi-topbar.is-searching .gi-search-close { display: inline-flex; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--gi-gray-500); font-size: 18px; border-radius: 9px; }
    .gi-search-kbd { display: none; }
    .gi-search-results { position: fixed; left: 10px; right: 10px; top: calc(var(--gi-topbar-h) + var(--gi-safe-top) + 4px); min-width: 0; max-height: calc(100vh - var(--gi-topbar-h) - 120px); }
    .gi-notify-menu { position: fixed !important; left: 10px !important; right: 10px !important; top: calc(var(--gi-topbar-h) + var(--gi-safe-top) + 4px) !important; width: auto; max-width: none; transform: none !important; }
    .gi-page-header { margin-bottom: 18px; gap: 14px; }
    .gi-page-heading { gap: 12px; flex-basis: 100%; align-items: flex-start; }
    .gi-page-icon { width: 42px; height: 42px; font-size: 18px; border-radius: 12px; }
    .gi-page-title { font-size: 1.36rem; }
    .gi-page-subtitle { font-size: 13px; }
    .gi-page-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; margin-bottom: -2px; scrollbar-width: none; }
    .gi-page-actions::-webkit-scrollbar { display: none; }
    .gi-page-actions > .btn:only-child { flex: 1 1 auto; }
    .card-premium > .card-header { padding: 13px 16px; min-height: 54px; }
    .card-premium > .card-body { padding: 16px; }
    .card-premium > .card-footer { padding: 12px 16px; }
    .gi-form-section-head { padding: 15px 16px; }
    .gi-form-section-body { padding: 16px; }
    .gi-form-actions { bottom: 12px; }
    .gi-has-bottom-nav .gi-form-actions { bottom: calc(var(--gi-bottom-nav-h) + var(--gi-safe-bottom) + 10px); }
    .gi-form-actions-inner { padding: 10px; }
    .gi-form-actions-note { display: none; }
    .gi-form-actions-inner > .btn { flex: 1 1 0; }
    .gi-stat { padding: 15px 16px; }
    .gi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gi-tiles > .gi-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .gi-tile { padding: 13px 14px; gap: 8px; }
    .gi-tile-icon { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
    .gi-tile-value { font-size: 1.07rem; }
    .gi-att-item { flex-wrap: wrap; padding: 12px 16px; }
    .gi-att-actions { width: 100%; justify-content: flex-end; padding-left: 56px; margin-top: -4px; }
    .gi-att-upload { padding: 14px 16px; }
    .gi-dropzone.is-compact { flex-wrap: wrap; }
    .gi-dropzone.is-compact .gi-dropzone-actions { margin: 4px 0 0; width: 100%; }
    .gi-pagination { justify-content: center; }
    .gi-pagination-info { justify-content: center; width: 100%; }
    .gi-auth { padding: calc(36px + var(--gi-safe-top)) 18px calc(28px + var(--gi-safe-bottom)); gap: 26px; align-content: center; }
    .gi-auth-logo { width: 190px; margin-bottom: 20px; }
    .gi-auth-title { font-size: 1.6rem; }
    .gi-auth-lead { font-size: 13.5px; margin-top: 12px; }
    .gi-auth-eyebrow { margin-bottom: 12px; font-size: 10.5px; }
    .gi-glass { padding: 28px 22px 24px; border-radius: 22px; }
    .gi-glass h2 { font-size: 1.43rem; }
    .gi-error-logo { height: 46px; margin-bottom: 26px; }
    .gi-tl-content { padding: 11px 13px; }
    .gi-dl { grid-template-columns: 1fr; gap: 2px 0; }
    .gi-dl dd { margin-bottom: 10px; }
}
@media (min-width: 768px) {
    .gi-bottom-nav { display: none !important; }
}
@media (max-width: 379.98px) {
    .gi-tiles { grid-template-columns: 1fr; }
    .gi-user-btn { padding: 2px; }
}

/* Native app shell (Capacitor) */
.is-native-app { -webkit-user-select: none; user-select: none; }
.is-native-app input, .is-native-app textarea, .is-native-app [contenteditable], .is-native-app .table-premium, .is-native-app .gi-dl { -webkit-user-select: text; user-select: text; }
.is-native-app .gi-footer { display: none; }

/* ==========================================================================
   27. Motion
   ========================================================================== */
@keyframes giFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes giDropIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes giShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes giProgress { 0% { width: 0; } 20% { width: 45%; } 60% { width: 72%; } 100% { width: 88%; } }
@keyframes giBell { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes giMesh1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(120px, 80px) scale(1.12); } 100% { transform: translate(40px, 180px) scale(.95); } }
@keyframes giMesh2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-140px, 120px) scale(.9); } 100% { transform: translate(-60px, -60px) scale(1.1); } }
@keyframes giMesh3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(160px, -100px) scale(1.15); } 100% { transform: translate(-120px, -40px) scale(.92); } }

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

/* ==========================================================================
   28. Print
   ========================================================================== */
@media print {
    @page { margin: 12mm; }
    html { font-size: 12px; }
    body, .gi-app { background: #fff !important; }
    .gi-sidebar, .gi-offcanvas, .gi-topbar, .gi-bottom-nav, .gi-footer, .gi-form-actions, .gi-filter-bar, .gi-page-actions, .gi-progress,
    .gi-action-menu, .td-actions, .th-actions, .gi-att-upload, .gi-att-actions, .gi-pagination, .btn, .no-print, .swal2-container, .gi-skip-link { display: none !important; }
    .gi-main { margin-left: 0 !important; }
    .gi-content { max-width: none; padding: 0 !important; }
    .gi-content > * { animation: none !important; }
    .card, .card-premium, .gi-stat, .gi-tiles, .gi-form-section, .gi-filter-bar, .gi-tl-content { box-shadow: none !important; break-inside: avoid; }
    .table-wrap { max-height: none !important; overflow: visible !important; }
    .table-premium > thead > tr > th { position: static; background: #F1F4F8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .gi-page-icon, .badge, [class*="badge-soft-"], .gi-stat-icon, .gi-tile-icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a[href]::after { content: none !important; }
}