/**
 * Store Sage - Custom Brand Colors & Styling
 * Olive Green Theme with complementary colors
 */

:root {
    --ss-primary: #6B8E23;           /* Olive Green */
    --ss-primary-dark: #556B2F;      /* Dark Olive Green */
    --ss-primary-light: #9ACD32;     /* Light Olive Green */
    --ss-secondary: #ffffff;         /* White Secondary */
    --ss-secondary-light: #f8f9fa;   /* Light white tone */
    --ss-accent: #D4AF37;            /* Gold Accent */
    --ss-accent-light: #F5F5DC;      /* Cream/Beige */
    --ss-text-dark: #333333;         /* Dark Text */
    --ss-text-muted: #666666;        /* Muted Text */
    --ss-border: #E8E8E0;            /* Subtle Border */
}

/* Primary Navbar */
.navbar-dark.bg-primary {
    background-color: var(--ss-primary) !important;
    border-bottom: 2px solid var(--ss-primary-dark);
}

.navbar-dark.bg-primary .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar-dark.bg-primary .navbar-brand img {
    height: 32px;
    width: auto;
}

.navbar-dark.bg-primary .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color 0.2s ease;
}

.navbar-dark.bg-primary .nav-link:hover {
    color: var(--ss-accent) !important;
}

.navbar-dark.bg-primary .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.85);
}

.navbar-dark.bg-primary .btn-outline-light:hover {
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
    color: var(--ss-text-dark);
}

/* Primary Buttons */
.btn-primary {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

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

.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--ss-primary-dark);
    border-color: var(--ss-primary-dark);
    box-shadow: 0 0 0 0.25rem rgba(107, 142, 35, 0.5);
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--ss-primary-dark);
    border-color: var(--ss-primary-dark);
}

/* Outline Primary */
.btn-outline-primary {
    color: var(--ss-primary);
    border-color: var(--ss-primary);
}

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

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

.badge.bg-accent {
    background-color: var(--ss-accent) !important;
    color: var(--ss-text-dark);
}

/* Links */
a {
    color: var(--ss-primary);
    text-decoration: none;
}

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

/* Form Controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 0.2rem rgba(107, 142, 35, 0.25);
}

/* Secondary backgrounds and text */
.bg-secondary, .badge.bg-secondary {
    background-color: var(--ss-secondary) !important;
    color: var(--ss-text-dark) !important;
}

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

.alert-info {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: var(--ss-border);
    color: var(--ss-text-dark);
}

/* Progress Bar */
.progress-bar {
    background-color: var(--ss-primary);
}

/* Cards */
.card {
    border-color: var(--ss-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background-color: var(--ss-secondary);
}

.card-header {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: var(--ss-border);
    font-weight: 500;
    color: var(--ss-text-dark);
}

/* Tables */
.table-light {
    background-color: rgba(107, 142, 35, 0.05);
}

.table-hover tbody tr:hover {
    background-color: rgba(107, 142, 35, 0.08);
}

/* Accent Background */
.bg-accent {
    background-color: var(--ss-accent-light) !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--ss-secondary-light);
}

/* List Groups */
.list-group-item.active {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

/* Dropdowns */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--ss-primary);
}

/* Page Title Styling */
h1, h2, h3, h4, h5, h6 {
    color: var(--ss-text-dark);
}

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

/* Logo styling helper */
.brand-logo {
    height: 32px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.brand-text {
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Matter document drop zone */
.ss-drop-zone {
    cursor: pointer;
    border-style: dashed !important;
    border-width: 2px !important;
    border-color: var(--ss-border) !important;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    min-height: 4.5rem;
    user-select: none;
}
.ss-drop-zone:hover,
.ss-drop-zone:focus {
    border-color: var(--ss-primary) !important;
    outline: none;
}
.ss-drop-zone--active {
    border-color: var(--ss-primary) !important;
    background-color: rgba(107, 142, 35, 0.12) !important;
}
.ss-drop-zone--ready {
    border-color: var(--ss-primary) !important;
    background-color: rgba(107, 142, 35, 0.06) !important;
}

/* Footer */
footer {
    background-color: rgba(107, 142, 35, 0.02);
    border-top: 1px solid var(--ss-border);
}