/* ============================================================
   CUSTOM BOOTSTRAP THEME
   Generated from brand colour palette
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ------------------------------------------------------------ */
:root {
    /* Brand colours */
    --color-primary: #DA7D2A;
    --color-primary-hover: #C96F22;
    --color-secondary: #3A86FF;
    --color-secondary-hover: #3A86FF;
    --color-success: #2EC4B6;
    --color-success-hover: #26A89C;
    --color-info: #6C63FF;
    --color-info-hover: #5A52E0;
    --color-warning: #FF9F43;
    --color-warning-hover: #E68E36;
    --color-danger: #E03131;
    --color-danger-hover: #C92A2A;
    /* Text */
    --color-text: #373737;
    --color-text-secondary: #555555;
    --color-text-disabled: #9CA3AF;
    --color-text-on-dark: #FFFFFF;
    /* Surfaces */
    --color-bg: #F5F5F5;
    --color-card: #FFFFFF;
    --color-border: #E0E0E0;
    /* Derived shades (10 % tint for backgrounds, 15 % shade for active) */
    --color-primary-subtle: #FDF0E3;
    --color-secondary-subtle: #E8F1FF;
    --color-success-subtle: #E3F8F6;
    --color-info-subtle: #EDECFF;
    --color-warning-subtle: #FFF4E6;
    --color-danger-subtle: #FDEAEA;
    /* Typography */
    --font-sans: 'DM Sans', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 28px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.07);
    /* Transitions */
    --transition: 0.18s ease;
}


/* ------------------------------------------------------------
   2. BOOTSTRAP 5 VARIABLE OVERRIDES (import before Bootstrap)
      If using Sass, place these as Sass variables instead.
   ------------------------------------------------------------ */

/* Override Bootstrap CSS-variable layer */
:root {
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 218, 125, 42;
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: 58, 134, 255;
    --bs-success: var(--color-success);
    --bs-success-rgb: 46, 196, 182;
    --bs-info: var(--color-info);
    --bs-info-rgb: 108, 99, 255;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 255, 159, 67;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 224, 49, 49;
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-font-sans-serif: var(--font-sans);
}


/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
}

p {
    color: var(--color-text);
}

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

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

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

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

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

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

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

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


/* ------------------------------------------------------------
   4. BUTTONS — solid variants
   ------------------------------------------------------------ */
.btn {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

    .btn:active {
        transform: scale(0.975);
    }

/* Primary */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
        color: var(--color-text-on-dark);
        box-shadow: 0 0 0 3px rgba(218,125,42,.25);
    }

/* Secondary */
.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-on-dark);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: var(--color-secondary-hover);
        border-color: var(--color-secondary-hover);
        color: var(--color-text-on-dark);
        box-shadow: 0 0 0 3px rgba(58,134,255,.25);
    }

/* Success */
.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-on-dark);
}

    .btn-success:hover,
    .btn-success:focus {
        background-color: var(--color-success-hover);
        border-color: var(--color-success-hover);
        color: var(--color-text-on-dark);
        box-shadow: 0 0 0 3px rgba(46,196,182,.25);
    }

/* Info */
.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-text-on-dark);
}

    .btn-info:hover,
    .btn-info:focus {
        background-color: var(--color-info-hover);
        border-color: var(--color-info-hover);
        color: var(--color-text-on-dark);
        box-shadow: 0 0 0 3px rgba(108,99,255,.25);
    }

/* Warning */
.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-text-on-dark);
}

    .btn-warning:hover,
    .btn-warning:focus {
        background-color: var(--color-warning-hover);
        border-color: var(--color-warning-hover);
        color: var(--color-text-on-dark);
        box-shadow: 0 0 0 3px rgba(255,159,67,.25);
    }

/* Danger */
.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-text-on-dark);
}

    .btn-danger:hover,
    .btn-danger:focus {
        background-color: var(--color-danger-hover);
        border-color: var(--color-danger-hover);
        color: var(--color-text-on-dark);
        box-shadow: 0 0 0 3px rgba(224,49,49,.25);
    }

/* Disabled state (all variants) */
.btn:disabled,
.btn.disabled {
    background-color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
    color: var(--color-text-on-dark);
    opacity: 1;
    cursor: not-allowed;
}


/* ------------------------------------------------------------
   5. BUTTONS — outline variants
   ------------------------------------------------------------ */
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: transparent;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-on-dark);
    }

.btn-outline-secondary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background: transparent;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
        color: var(--color-text-on-dark);
    }

.btn-outline-success {
    color: var(--color-success);
    border-color: var(--color-success);
    background: transparent;
}

    .btn-outline-success:hover,
    .btn-outline-success:focus {
        background-color: var(--color-success);
        border-color: var(--color-success);
        color: var(--color-text-on-dark);
    }

.btn-outline-info {
    color: var(--color-info);
    border-color: var(--color-info);
    background: transparent;
}

    .btn-outline-info:hover,
    .btn-outline-info:focus {
        background-color: var(--color-info);
        border-color: var(--color-info);
        color: var(--color-text-on-dark);
    }

.btn-outline-warning {
    color: var(--color-warning);
    border-color: var(--color-warning);
    background: transparent;
}

    .btn-outline-warning:hover,
    .btn-outline-warning:focus {
        background-color: var(--color-warning);
        border-color: var(--color-warning);
        color: var(--color-text-on-dark);
    }

.btn-outline-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: transparent;
}

    .btn-outline-danger:hover,
    .btn-outline-danger:focus {
        background-color: var(--color-danger);
        border-color: var(--color-danger);
        color: var(--color-text-on-dark);
    }


/* ------------------------------------------------------------
   6. ALERTS
   ------------------------------------------------------------ */
.alert {
    border-radius: var(--radius-md);
    border-width: 1px;
    border-style: solid;
    font-size: 0.9rem;
}

.alert-primary {
    background-color: var(--color-primary-subtle);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.alert-secondary {
    background-color: var(--color-secondary-subtle);
    border-color: var(--color-secondary);
    color: var(--color-secondary-hover);
}

.alert-success {
    background-color: var(--color-success-subtle);
    border-color: var(--color-success);
    color: var(--color-success-hover);
}

.alert-info {
    background-color: var(--color-info-subtle);
    border-color: var(--color-info);
    color: var(--color-info-hover);
}

.alert-warning {
    background-color: var(--color-warning-subtle);
    border-color: var(--color-warning);
    color: var(--color-warning-hover);
}

.alert-danger {
    background-color: var(--color-danger-subtle);
    border-color: var(--color-danger);
    color: var(--color-danger-hover);
}


/* ------------------------------------------------------------
   7. CARDS / PANELS
   ------------------------------------------------------------ */
.card {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

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

.card-header {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    font-weight: 600;
    color: var(--color-text);
}

.card-footer {
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    color: var(--color-text-secondary);
}

/* Coloured card border-top accent strips */
.card-primary {
    border-top: 3px solid var(--color-primary);
}

.card-secondary {
    border-top: 3px solid var(--color-secondary);
}

.card-success {
    border-top: 3px solid var(--color-success);
}

.card-info {
    border-top: 3px solid var(--color-info);
}

.card-warning {
    border-top: 3px solid var(--color-warning);
}

.card-danger {
    border-top: 3px solid var(--color-danger);
}


/* ------------------------------------------------------------
   8. BORDERS & DIVIDERS
   ------------------------------------------------------------ */
.border {
    border-color: var(--color-border) !important;
}

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

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

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

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

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

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

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


/* ------------------------------------------------------------
   9. FORM CONTROLS
   ------------------------------------------------------------ */
.form-control,
.form-select {
    border-color: var(--color-border);
    color: var(--color-text);
    background-color: var(--color-card);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(218,125,42,.20);
        outline: none;
    }

    .form-control:disabled,
    .form-select:disabled {
        background-color: var(--color-bg);
        color: var(--color-text-disabled);
        border-color: var(--color-text-disabled);
    }

    .form-control::placeholder {
        color: var(--color-text-disabled);
    }


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

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

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

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

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

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

.badge {
    border-radius: var(--radius-pill);
    font-weight: 500;
}


/* ------------------------------------------------------------
   11. NAVIGATION
   ------------------------------------------------------------ */
.nav-link {
    color: var(--color-text-secondary);
}

    .nav-link:hover {
        color: var(--color-primary);
    }

    .nav-link.active {
        color: var(--color-primary);
        font-weight: 600;
    }

.navbar {
    background-color: var(--color-card);
    /*border-bottom: 1px solid var(--color-border);*/
}

.navbar-brand {
    color: var(--color-primary) !important;
    font-weight: 700;
}


/* ------------------------------------------------------------
   12. TABLES
   ------------------------------------------------------------ */
.table {
    --bs-table-color: var(--color-text);
    --bs-table-bg: var(--color-card);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: var(--color-bg);
}

    .table thead th {
        color: var(--color-text-secondary);
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--color-border);
    }


/* ------------------------------------------------------------
   13. UTILITY BACKGROUND COLOURS
   ------------------------------------------------------------ */
.bg-primary {
    background-color: var(--color-primary) !important;
}

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

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

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

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

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

.bg-surface {
    background-color: var(--color-card) !important;
}

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

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

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

.bg-success-subtle {
    background-color: var(--color-success-subtle) !important;
}

.bg-info-subtle {
    background-color: var(--color-info-subtle) !important;
}

.bg-warning-subtle {
    background-color: var(--color-warning-subtle) !important;
}

.bg-danger-subtle {
    background-color: var(--color-danger-subtle) !important;
}


/* ------------------------------------------------------------
   14. SHADOWS (utility helpers)
   ------------------------------------------------------------ */
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

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

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


/* ============================================================
   END OF THEME
   ============================================================ */

/* ============================================================
   MANUAL CUSTOM STYLES START
   ============================================================ */
@media (min-width: 768px) {
    .text-md-start {
        text-align: left !important;
    }
}