/* SMITampa Theme - Color Palette from Brand Photo IMG_20260106_154133.png
   Colors extracted via Coolors: https://coolors.co/palette/e7cbcf-b9898c-47434b-2c2b30-564e55
*/

:root {
    /* =========================================
       PRIMARY COLORS - Main brand colors
       Dark charcoal tones from the image
       ========================================= */
    --smi-primary: #2C2B30; /* Primary brand color - near black */
    --smi-primary-light: #47434B; /* Lighter shade - dark charcoal */
    --smi-primary-dark: #1f1e22; /* Darker shade */
    /* =========================================
       SECONDARY COLORS - Accent colors
       Dusty rose/mauve tones from the image
       ========================================= */
    --smi-secondary: #871F0B; /* Secondary accent - dusty rose */
    --smi-secondary-light: #F54927; /* Lighter shade - blush pink */
    --smi-secondary-dark: #871F0B; /* Darker shade */
    /* =========================================
       NEUTRAL COLORS - Text, backgrounds, borders
       ========================================= */
    --smi-text-primary: #871F0B; /* Main text color */
    --smi-text-secondary: #871F0B; /* Secondary text - medium gray */
    --smi-text-light: #847c83; /* Light text/muted */

    --smi-bg-primary: #ffffff; /* Main background */
    --smi-bg-secondary: #f9f7f8; /* Secondary background - warm white */
    --smi-bg-accent: #E7CBCF; /* Accent background - blush */

    --smi-border-light: #E7CBCF; /* Light borders - blush */
    --smi-border-dark: #B9898C; /* Darker borders - dusty rose */
    /* =========================================
       STATE COLORS - Success, warning, error
       ========================================= */
    --smi-success: #6b9080;
    --smi-warning: #d4a574;
    --smi-error: #c45b5b;
    --smi-info: #7a93ac;
    /* =========================================
       TYPOGRAPHY
       ========================================= */
    --smi-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --smi-font-heading: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* =========================================
       SPACING & SIZING
       ========================================= */
    --smi-border-radius: 0.375rem;
    --smi-border-radius-lg: 0.5rem;
    --smi-shadow-sm: 0 1px 2px rgba(44, 43, 48, 0.08);
    --smi-shadow: 0 4px 6px rgba(44, 43, 48, 0.12);
    --smi-shadow-lg: 0 10px 25px rgba(44, 43, 48, 0.18);
}

/* =========================================
   GLOBAL STYLES
   ========================================= */
body {
    font-family: var(--smi-font-family);
    color: var(--smi-text-primary);
    background-color: var(--smi-bg-primary);
}

/* =========================================
   NAVIGATION
   ========================================= */
.navbar {
    background-color: var(--smi-primary) !important;
    box-shadow: var(--smi-shadow);
}

.navbar-brand,
.navbar .nav-link {
    color: #ffffff !important;
}

.navbar .nav-link:hover {
    color: var(--smi-secondary-light) !important;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn-primary {
    background-color: var(--smi-primary);
    border-color: var(--smi-primary-dark);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--smi-primary-light);
    border-color: var(--smi-primary);
}

.btn-secondary {
    background-color: var(--smi-secondary);
    border-color: var(--smi-secondary-dark);
    color: #ffffff;
}

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

.btn-outline-primary {
    color: var(--smi-primary);
    border-color: var(--smi-primary);
}

.btn-outline-primary:hover {
    background-color: var(--smi-primary);
    color: #ffffff;
}

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

.btn-outline-secondary:hover {
    background-color: var(--smi-secondary);
    color: #ffffff;
}

/* =========================================
   LINKS
   ========================================= */
a {
    color: var(--smi-secondary-dark);
    text-decoration: none;
}

a:hover {
    color: var(--smi-primary);
    text-decoration: underline;
}

/* =========================================
   CARDS & PANELS
   ========================================= */
.card {
    border-radius: var(--smi-border-radius-lg);
    box-shadow: var(--smi-shadow-sm);
    border-color: var(--smi-border-light);
}

.card-header {
    background-color: var(--smi-bg-secondary);
    border-bottom-color: var(--smi-border-light);
}

/* =========================================
   FORMS
   ========================================= */
.form-control:focus {
    border-color: var(--smi-secondary);
    box-shadow: 0 0 0 0.2rem rgba(185, 137, 140, 0.25);
}

.form-check-input:checked {
    background-color: var(--smi-secondary);
    border-color: var(--smi-secondary);
}

/* =========================================
   FOOTER
   ========================================= */
.footer {
    background-color: var(--smi-primary);
    color: #ffffff;
}

.footer a {
    color: var(--smi-secondary-light);
}

.footer a:hover {
    color: #ffffff;
}

/* =========================================
   HEADINGS
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--smi-font-heading);
    color: var(--smi-text-primary);
}

/* =========================================
   ALERTS
   ========================================= */
.alert-success {
    background-color: rgba(107, 144, 128, 0.1);
    border-color: var(--smi-success);
    color: #4a6456;
}

.alert-warning {
    background-color: rgba(212, 165, 116, 0.1);
    border-color: var(--smi-warning);
    color: #8b6d3f;
}

.alert-danger {
    background-color: rgba(196, 91, 91, 0.1);
    border-color: var(--smi-error);
    color: var(--smi-error);
}

.alert-info {
    background-color: rgba(122, 147, 172, 0.1);
    border-color: var(--smi-info);
    color: #5a7089;
}

/* =========================================
   TABLES
   ========================================= */
.table thead th {
    background-color: var(--smi-primary);
    color: #ffffff;
    border-color: var(--smi-primary-dark);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--smi-bg-secondary);
}

/* =========================================
   BADGE & PILLS
   ========================================= */
.badge.bg-primary {
    background-color: var(--smi-primary) !important;
}

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

/* =========================================
   HERO SECTION (if needed)
   ========================================= */
.hero-section {
    background: linear-gradient(135deg, var(--smi-primary) 0%, var(--smi-primary-light) 100%);
    color: #ffffff;
    padding: 4rem 0;
}

/* Hero with brand background image */
.hero-section-image {
    background-image: 
        linear-gradient(135deg, rgba(44, 43, 48, 0.85) 0%, rgba(71, 67, 75, 0.75) 100%),
        url('/Assets/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #ffffff;
    padding: 4rem 0;
}

.hero-section-accent {
    background: linear-gradient(135deg, var(--smi-secondary) 0%, var(--smi-secondary-dark) 100%);
    color: #ffffff;
    padding: 4rem 0;
}

/* =========================================
   BACKGROUND IMAGE UTILITIES
   ========================================= */
.bg-brand-image {
    background-image: url('/Assets/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-brand-image-overlay {
    background-image: 
        linear-gradient(135deg, rgba(44, 43, 48, 0.9) 0%, rgba(71, 67, 75, 0.8) 100%),
        url('/Assets/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-brand-image-overlay-light {
    background-image: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(249, 247, 248, 0.88) 100%),
        url('/Assets/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-brand-image-fixed {
    background-image: url('/Assets/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Parallax effect for brand background */
.bg-parallax {
    background-image: 
        linear-gradient(135deg, rgba(44, 43, 48, 0.85) 0%, rgba(71, 67, 75, 0.75) 100%),
        url('/Assets/bg1.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* =========================================
   UTILITY CLASSES
   ========================================= */
.bg-smi-primary {
    background-color: var(--smi-primary) !important;
}

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

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

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

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

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

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

/* =========================================
   SELECTION HIGHLIGHT
   ========================================= */
::selection {
    background-color: var(--smi-secondary-light);
    color: var(--smi-primary);
}

::-moz-selection {
    background-color: var(--smi-secondary-light);
    color: var(--smi-primary);
}