/* ============================================
   VISION TECHNOLOGY - BRAND VARIABLES
   ============================================ */

:root {
    /* Primary Brand Colors */
    --primary: #0e2f76;
    --primary-dark: #081c48;
    --primary-light: #3b63c4;
    --primary-soft: #e7ecf7;
    /* brand-* aliases used in DESIGN.md */
    --brand-primary: var(--primary);
    --brand-primary-dark: var(--primary-dark);
    --brand-primary-light: var(--primary-light);
    --brand-primary-soft: var(--primary-soft);
    --brand-primary-lightest: #f3f6fc;

    /* Secondary Colors */
    --secondary: #3f8cff;
    --secondary-dark: #2a6fd9;
    --secondary-light: #7ab3ff;

    /* Status Colors */
    --success: #256b4d;
    --success-soft: #d4f1e3;
    --warning: #8a5a00;
    --warning-soft: #fdebc8;
    --error: #b23a3a;
    --error-soft: #fbdcdc;
    --info: #2a5d9f;
    --info-soft: #d6e4f9;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --text-dark: #1a1a1a;
    --text-muted: #5f5f6b;
    --text-light: #9ca3af;
    --bg: #f8f9fc;
  --bg-body: #f0f3fa;
  --bg-page: #ffffff;
    --bg-soft: #f3f4f6;
    --border: #e5e7eb;
    --border-light: #f0f0f0;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(14, 47, 118, 0.05);
    --shadow: 0 2px 8px rgba(14, 47, 118, 0.08);
    --shadow-md: 0 4px 12px rgba(14, 47, 118, 0.1);
    --shadow-lg: 0 8px 24px rgba(14, 47, 118, 0.12);
    --shadow-xl: 0 16px 48px rgba(14, 47, 118, 0.15);

    /* Border Radius */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   CUSTOM FONTS
   ============================================ */

@font-face {
    font-family: sig;
    src: url('./font/CreattionDemo.otf');
}

@font-face {
    font-family: BAHNSCHRIFT;
    src: url('./font/BAHNSCHRIFT.TTF');
}

@font-face {
    src: url('.//font/Great Day Personal Use.ttf');
    font-family: handWritting;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: BAHNSCHRIFT;
}

/* ============================================
   BOOTSTRAP COLOR OVERRIDES
   ============================================ */

/* Primary Color Override */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-subtle,
.bg-primary-soft {
    background-color: var(--primary-soft) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
    transition: var(--transition);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn-primary:active {
    background-color: var(--primary-dark) !important;
    transform: translateY(0);
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
    transition: var(--transition);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark) !important;
    border-color: var(--secondary-dark) !important;
}

/* Success, Warning, Danger Buttons */
.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
}

.btn-danger {
    background-color: var(--error) !important;
    border-color: var(--error) !important;
}

/* Legacy alias from V7 (was a gradient). Solid primary now; prefer .btn-primary. */
.btn-gradient {
    background: var(--primary) !important;
    border: none !important;
    color: var(--white) !important;
    transition: var(--transition);
}

.btn-gradient:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Links */
a {
    color: var(--primary);
    transition: var(--transition);
}

a:hover {
    color: var(--primary-light);
}

/* Cards */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--primary) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary) !important;
}

/* Alerts */
.alert-primary {
    background-color: var(--primary-soft) !important;
    border-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

.alert-success {
    background-color: var(--success-soft) !important;
    border-color: var(--success) !important;
    color: #065f46 !important;
}

.alert-warning {
    background-color: var(--warning-soft) !important;
    border-color: var(--warning) !important;
    color: #92400e !important;
}

.alert-danger {
    background-color: var(--error-soft) !important;
    border-color: var(--error) !important;
    color: #991b1b !important;
}

/* Form Controls with Brand Colors */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(14, 47, 118, 0.15) !important;
}

.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Progress Bars */
.progress-bar {
    background-color: var(--primary) !important;
}

/* Navbar Brand Colors */
.navbar-dark {
    background: var(--primary) !important;
}

/* Pagination */
.page-link {
    color: var(--primary);
}

.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.page-link:hover {
    color: var(--primary-dark);
    background-color: var(--primary-soft);
}

/* Spinners */
.spinner-border.text-primary {
    color: var(--primary) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Background Utilities */
.bg-gradient-primary {
    background: var(--primary) !important;
}

.bg-gradient-soft {
    background: var(--primary-soft) !important;
}

/* Text Utilities */
.text-muted {
    color: var(--text-muted) !important;
}

/* Shadow Utilities */
.shadow-brand {
    box-shadow: var(--shadow) !important;
}

.shadow-brand-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Hover Effects */
.hover-lift {
    transition: var(--transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(14, 47, 118, 0.3);
}
    
    .sig {
        font-family: sig;
        margin: 0px;
    }
    
    .ben {
        font-family: BAHNSCHRIFT;
        margin: 0px;
    }
    
    .handWritting {
        font-family: handWritting;
        margin: 0px;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        margin: 0px;
    }
    
    .row {
        margin: 0px;
    }
    
    .rounded-4 {
        border-radius: 8px;
    }
    
    .rounded-5 {
        border-radius: 10px;
    }
    
    .rounded-6 {
        border-radius: 13px;
    }
    
    .rounded-7 {
        border-radius: 15px;
    }
    
    .rounded-8 {
        border-radius: 20px;
    }
    
    .rounded-top-0 {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
    
    .rounded-bottom-0 {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    
    .rounded-right-0 {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    
    .rounded-left-0 {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    
    .table tr th:first-child,
    .table tr td:first-child {
        border-radius: 80px 0px 0px 80px;
    }
    
    .table tr th:last-child,
    .table tr td:last-child {
        border-radius: 0px 80px 80px 0px;
    }
    
    table,
    table th,
    table td,
    table thead,
    table tfoot {
        border: 0px;
        border-collapse: separate;
        border-spacing: 5px;
    }
    
    .table tr td:nth-child(1),
    .table tr th:nth-child(1) {
        border-radius: 10 px 0 px 0 px 10 px;
    }
    
    .table tr td:last-child,
    .table tr th:last-child {
        border-radius: 0 px 10 px 10 px 0 px;
    }
    
    .modal-dialog {
        border-radius: 15px;
        overflow: hidden;
        border: 0px;
    }
    
    .modal-header {
        color: #000;
        box-shadow: 0px 5px 15px rgba(106, 106, 106, 0.4);
        border: 0px;
    }
    
    .modal-footer {
        background-color: rgba(137, 176, 255, 0.30);
        border: 0px;
    }
    
    .modal-body form input,
    .modal-body form select,
    .modal-body form option {
        background-color: white;
        padding-left: 10px !important;
        padding-right: 10px !important;
        color: rgb(23, 100, 255) !important;
    }
    
    .modal-body form label {
        color: rgb(67, 130, 255);
        font-size: small;
        font-weight: 600;
    }
    
    .modal-content {
        border-radius: 15px;
        border: 0px;
    }
    
    .form-control,
    .form-control:focus,
    .form-control:hover,
    .form-control:active,
    .form-control-lg {
        border: 0px;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
    }
/* Body background token (DESIGN.md section 2) */
body { background-color: var(--bg-body); }

/* ==========================================================================
   Dark mode (DESIGN.md section 10). Two hooks:
   - explicit choice:  <html data-theme="dark">  (saved in localStorage by the nav toggle)
   - system default:   prefers-color-scheme: dark, unless the visitor chose light
   Bootstrap 5.3 follows via data-bs-theme, set together with data-theme by the head script.
   ========================================================================== */
:root { color-scheme: light; --bs-body-bg: var(--bg-body); --bs-body-color: var(--text-dark); --bs-border-color: var(--border); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-dark); }
:root[data-theme="dark"],
:root:not([data-theme="light"]):has(body.prefers-dark) { color-scheme: dark; }

:root[data-theme="dark"] {
  --bg-body: #000521;
  --bg-page: #0a1030;
  --bg: #0a1030;
  --bg-soft: #101838;
  --text-dark: #e8ecf6;
  --text-muted: #a5aec6;
  --text-light: #6f7a99;
  --border: #1f2a4d;
  --border-light: #182246;
  --primary: #4f78d8;
  --primary-dark: #0e2f76;
  --primary-light: #7fa0ea;
  --primary-soft: #0f1d45;
  --brand-primary-lightest: #0b1436;
  --success: #9fdcbf; --success-soft: #17362a;
  --error: #f2a7a7; --error-soft: #4a2323;
  --warning: #f3cf8a; --warning-soft: #4a3a14;
  --info: #a9c7f2; --info-soft: #1d3050;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --bs-body-bg: #000521; --bs-body-color: #e8ecf6; --bs-border-color: #1f2a4d;
  --bs-secondary-color: #a5aec6; --bs-tertiary-bg: #0a1030; --bs-emphasis-color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-body: #000521; --bg-page: #0a1030; --bg: #0a1030; --bg-soft: #101838;
    --text-dark: #e8ecf6; --text-muted: #a5aec6; --text-light: #6f7a99;
    --border: #1f2a4d; --border-light: #182246;
    --primary: #4f78d8; --primary-dark: #0e2f76; --primary-light: #7fa0ea; --primary-soft: #0f1d45; --brand-primary-lightest: #0b1436;
    --success: #9fdcbf; --success-soft: #17362a;
    --error: #f2a7a7; --error-soft: #4a2323;
    --warning: #f3cf8a; --warning-soft: #4a3a14;
    --info: #a9c7f2; --info-soft: #1d3050;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); --gradient-primary-soft: var(--primary);
    --bs-body-bg: #000521; --bs-body-color: #e8ecf6; --bs-border-color: #1f2a4d; --bs-secondary-color: #a5aec6; --bs-tertiary-bg: #0a1030; --bs-emphasis-color: #ffffff;
  }
}
/* Surfaces that must follow the theme regardless of Bootstrap version */
body { color: var(--text-dark); }
.site-header, .card, .dropdown-menu, .form-control, .page-link, .table { background-color: var(--bg-page); color: var(--text-dark); }
.card, .dropdown-menu, .form-control, .page-link, .border, .border-bottom, .border-top, hr { border-color: var(--border) !important; }
.dropdown-item, .nav-link, .page-link, .navbar-brand { color: var(--text-dark); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--primary-soft); color: var(--text-dark); }
.dropdown-item.active, .dropdown-item:active, .page-item.active .page-link { background-color: var(--primary); color: #fff; }
.text-muted, .text-body-secondary { color: var(--text-muted) !important; }
.form-control::placeholder { color: var(--text-light); }
.btn-light { background-color: #fff; color: var(--primary-dark); border-color: #fff; }
.text-bg-light { background-color: var(--bg-soft) !important; color: var(--text-dark) !important; }
.navbar-toggler { border-color: var(--border); }
:root[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navbar-toggler-icon { filter: invert(1); } }