/*----------------------------------------------------------------------------------------------------------------------
Smart Media Vision - Color System
Brand: Smart Media Vision
Version: 1.0.0

Color Palette:
- SMV Blue (Primary): #3E6FD3
- Vivid Orange (Secondary): #F38E24  
- Magenta Pop (Accent): #D44B9D
- Smart Green (Support): #3FA965
- Neutral Backgrounds: #FFFFFF & #F5F5F5
- Typography: #1A1A1A

----------------------------------------------------------------------------------------------------------------------*/

/* CSS Custom Properties for SMV Color System */
:root {
    /* Primary Colors */
    --smv-blue: #3E6FD3;
    --smv-blue-light: #5A8BE8;
    --smv-blue-dark: #2A5BB8;
    
    /* Secondary Colors */
    --vivid-orange: #F38E24;
    --vivid-orange-light: #F5A54A;
    --vivid-orange-dark: #E67A1A;
    
    /* Accent Colors */
    --magenta-pop: #D44B9D;
    --magenta-pop-light: #E06BB3;
    --magenta-pop-dark: #B83A7F;
    
    /* Support Colors */
    --smart-green: #3FA965;
    --smart-green-light: #4FC275;
    --smart-green-dark: #2E8A4F;
    
    /* Neutral Colors */
    --white: #FFFFFF;
    --light-gray: #F5F5F5;
    --medium-gray: #E0E0E0;
    --dark-gray: #666666;
    
    /* Typography */
    --text-primary: #1A1A1A;
    --text-secondary: #333333;
    --text-muted: #666666;
    --text-light: #FFFFFF;
    
    /* Semantic Colors */
    --success: var(--smart-green);
    --warning: var(--vivid-orange);
    --error: #DC3545;
    --info: var(--smv-blue);

    /* Logo sizing (base) */
    --logo-nav-max-height: 60px; /* base height, header stays compact */
    --logo-nav-max-height-mobile: 40px; /* base height on mobile */
}

/* Primary Color Classes */
.smv-primary {
    color: var(--smv-blue);
}

.smv-primary-bg {
    background-color: var(--smv-blue);
}

.smv-primary-border {
    border-color: var(--smv-blue);
}

/* Secondary Color Classes */
.smv-secondary {
    color: var(--vivid-orange);
}

.smv-secondary-bg {
    background-color: var(--vivid-orange);
}

.smv-secondary-border {
    border-color: var(--vivid-orange);
}

/* Accent Color Classes */
.smv-accent {
    color: var(--magenta-pop);
}

.smv-accent-bg {
    background-color: var(--magenta-pop);
}

.smv-accent-border {
    border-color: var(--magenta-pop);
}

/* Support Color Classes */
.smv-support {
    color: var(--smart-green);
}

.smv-support-bg {
    background-color: var(--smart-green);
}

.smv-support-border {
    border-color: var(--smart-green);
}

/* Neutral Color Classes */
.smv-neutral {
    color: var(--text-primary);
}

.smv-neutral-bg {
    background-color: var(--white);
}

.smv-light-bg {
    background-color: var(--light-gray);
}

/* Button Styles with SMV Colors */
.btn-smv-primary {
    background-color: var(--smv-blue);
    border-color: var(--smv-blue);
    color: var(--white);
}

.btn-smv-primary:hover {
    background-color: var(--smv-blue-dark);
    border-color: var(--smv-blue-dark);
    color: var(--white);
}

.btn-smv-secondary {
    background-color: var(--vivid-orange);
    border-color: var(--vivid-orange);
    color: var(--white);
}

.btn-smv-secondary:hover {
    background-color: var(--vivid-orange-dark);
    border-color: var(--vivid-orange-dark);
    color: var(--white);
}

.btn-smv-outline-primary {
    background-color: transparent;
    border-color: var(--smv-blue);
    color: var(--smv-blue);
}

.btn-smv-outline-primary:hover {
    background-color: var(--smv-blue);
    border-color: var(--smv-blue);
    color: var(--white);
}

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

.btn-smv-outline-secondary:hover {
    background-color: var(--vivid-orange);
    border-color: var(--vivid-orange);
    color: var(--white);
}

/* Text Color Utilities */
.text-smv-primary {
    color: var(--smv-blue) !important;
}

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

.text-smv-accent {
    color: var(--magenta-pop) !important;
}

.text-smv-support {
    color: var(--smart-green) !important;
}

/* Background Color Utilities */
.bg-smv-primary {
    background-color: var(--smv-blue) !important;
}

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

.bg-smv-accent {
    background-color: var(--magenta-pop) !important;
}

.bg-smv-support {
    background-color: var(--smart-green) !important;
}

.bg-smv-light {
    background-color: var(--light-gray) !important;
}

/* Border Color Utilities */
.border-smv-primary {
    border-color: var(--smv-blue) !important;
}

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

.border-smv-accent {
    border-color: var(--magenta-pop) !important;
}

.border-smv-support {
    border-color: var(--smart-green) !important;
}

/* Hover Effects */
.hover-smv-primary:hover {
    color: var(--smv-blue) !important;
}

.hover-smv-secondary:hover {
    color: var(--vivid-orange) !important;
}

.hover-smv-accent:hover {
    color: var(--magenta-pop) !important;
}

/* Focus States */
.form-control:focus {
    border-color: var(--smv-blue);
    box-shadow: 0 0 0 0.2rem rgba(62, 111, 211, 0.25);
}

/* Link Colors */
a {
    color: var(--smv-blue);
}

a:hover {
    color: var(--smv-blue-dark);
}

/* Progress Bars */
.progress-bar {
    background-color: var(--smv-blue);
}

/* Alert Colors */
.alert-primary {
    background-color: rgba(62, 111, 211, 0.1);
    border-color: var(--smv-blue);
    color: var(--smv-blue);
}

.alert-secondary {
    background-color: rgba(243, 142, 36, 0.1);
    border-color: var(--vivid-orange);
    color: var(--vivid-orange);
}

.alert-accent {
    background-color: rgba(212, 75, 157, 0.1);
    border-color: var(--magenta-pop);
    color: var(--magenta-pop);
}

.alert-support {
    background-color: rgba(63, 169, 101, 0.1);
    border-color: var(--smart-green);
    color: var(--smart-green);
}

/* Logo Styling */
.navbar-brand img {
    max-height: var(--logo-nav-max-height, 60px);
    width: auto;
    margin: 10px 0;
}

.navbar-brand {
    padding: 0;
}

/* Smaller Header */
.navbar {
    padding: 5px 0;
    min-height: 60px;
}

.navbar-nav .nav-link {
    padding: 8px 15px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .navbar-brand img {
        max-height: var(--logo-nav-max-height-mobile, 40px);
        margin: 5px 0;
    }
    
    .navbar {
        padding: 3px 0;
        min-height: 50px;
    }
} 

/* Scale the visible logo without changing layout */
.navbar .navbar-brand img[src$="logo.png"] {
    transform: scale(2);
    transform-origin: left center;
    display: inline-block;
}

@media (max-width: 768px) {
    .navbar .navbar-brand img[src$="logo.png"] {
        transform: scale(2);
        transform-origin: left center;
    }
}

/* Footer logo bigger */
#ts-footer .footer-logo {
    max-height: 160px !important;
    width: auto;
}

@media (max-width: 576px) {
    #ts-footer .footer-logo {
        max-height: 110px !important;
    }
}