/*
 * BOS Power Brand Styling
 * Company: Bertel O. Steen Power Solutions
 * Brand Guidelines: data/branding/BOS_POWER_BRAND_GUIDELINES.md
 */

/* ============================================
   Font Face Declarations
   ============================================ */

@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-Regular_2.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-ExtraBold_2.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */

:root {
    /* Primary Brand Colors */
    --bos-marine-blue: #006CA5;
    --bos-marine-blue-dark: #005A8C;  /* Hover state */
    --bos-marine-blue-light: #0080C0;
    --bos-light-blue: #4A9FD8;
    --bos-white: #FFFFFF;

    /* Secondary Colors */
    --bos-dark-gray: #333333;
    --bos-medium-gray: #666666;
    --bos-light-gray: #F5F5F5;
    --bos-border-gray: #E0E0E0;

    /* Typography */
    --bos-font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
    --bos-font-weight-regular: 400;
    --bos-font-weight-bold: 800;

    /* Spacing */
    --bos-border-radius: 0.375rem;
}

/* ============================================
   Base Typography
   ============================================ */

body {
    font-family: var(--bos-font-family);
    font-weight: var(--bos-font-weight-regular);
    color: var(--bos-dark-gray);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bos-font-family);
    font-weight: var(--bos-font-weight-bold);
    color: var(--bos-marine-blue);
}

/* ============================================
   Navigation Bar
   ============================================ */

.navbar.bg-primary,
.navbar-dark.bg-primary {
    background-color: var(--bos-marine-blue) !important;
}

.navbar-brand {
    font-family: var(--bos-font-family);
    font-weight: var(--bos-font-weight-bold);
    color: var(--bos-white) !important;
    display: flex;
    align-items: center;
}

.navbar-brand img.bos-logo {
    height: 32px;
    margin-right: 12px;
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: var(--bos-white) !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--bos-border-radius);
}

.navbar-dark .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--bos-border-radius);
}

/* ============================================
   Buttons
   ============================================ */

.btn-primary {
    background-color: var(--bos-marine-blue);
    border-color: var(--bos-marine-blue);
    font-weight: var(--bos-font-weight-bold);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bos-marine-blue-dark);
    border-color: var(--bos-marine-blue-dark);
}

.btn-primary:active {
    background-color: var(--bos-marine-blue-dark) !important;
    border-color: var(--bos-marine-blue-dark) !important;
}

/* ============================================
   Cards
   ============================================ */

.card-header {
    background-color: var(--bos-marine-blue);
    color: var(--bos-white);
    font-family: var(--bos-font-family);
    font-weight: var(--bos-font-weight-bold);
    border-bottom: none;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--bos-white);
    margin-bottom: 0;
}

.card {
    border: 1px solid var(--bos-border-gray);
    border-radius: var(--bos-border-radius);
}

/* ============================================
   Tables
   ============================================ */

.table thead th {
    background-color: var(--bos-marine-blue);
    color: var(--bos-white);
    font-weight: var(--bos-font-weight-bold);
    border-bottom: 2px solid var(--bos-marine-blue-dark);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bos-light-gray);
}

/* ============================================
   Links
   ============================================ */

a {
    color: var(--bos-marine-blue);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--bos-light-blue);
    text-decoration: underline;
}

/* ============================================
   Badges
   ============================================ */

.badge.bg-primary {
    background-color: var(--bos-marine-blue) !important;
}

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

/* Status badges - keep existing colors but ensure consistency */
.badge.bg-success {
    /* Keep Bootstrap green for success states */
}

.badge.bg-warning {
    /* Keep Bootstrap yellow for warning states */
}

.badge.bg-danger {
    /* Keep Bootstrap red for danger states */
}

/* ============================================
   Dropdowns
   ============================================ */

.dropdown-menu {
    border: 1px solid var(--bos-border-gray);
    border-radius: var(--bos-border-radius);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bos-marine-blue);
    color: var(--bos-white);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bos-light-gray);
    color: var(--bos-marine-blue);
}

/* ============================================
   Forms
   ============================================ */

.form-control:focus,
.form-select:focus {
    border-color: var(--bos-light-blue);
    box-shadow: 0 0 0 0.25rem rgba(74, 159, 216, 0.25);
}

.form-label {
    font-weight: var(--bos-font-weight-bold);
    color: var(--bos-dark-gray);
}

/* ============================================
   Alerts
   ============================================ */

.alert-info {
    background-color: rgba(74, 159, 216, 0.1);
    border-color: var(--bos-light-blue);
    color: var(--bos-marine-blue);
}

/* ============================================
   Footer
   ============================================ */

footer {
    font-family: var(--bos-font-family);
    color: var(--bos-medium-gray);
}

footer a {
    color: var(--bos-marine-blue);
    text-decoration: none;
}

footer a:hover {
    color: var(--bos-light-blue);
    text-decoration: underline;
}

/* ============================================
   Page Headers
   ============================================ */

.page-header {
    background-color: var(--bos-light-gray);
    border-left: 4px solid var(--bos-marine-blue);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--bos-border-radius);
}

.page-header h1,
.page-header h2 {
    color: var(--bos-marine-blue);
    margin-bottom: 0.5rem;
}

/* ============================================
   Custom Components
   ============================================ */

/* Status indicators with BOS Power colors */
.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-indicator.connected {
    background-color: var(--bos-light-blue);
    box-shadow: 0 0 4px var(--bos-light-blue);
}

.status-indicator.active {
    background-color: var(--bos-marine-blue);
    box-shadow: 0 0 4px var(--bos-marine-blue);
}

/* Data visualization color palette */
.chart-color-primary {
    color: var(--bos-marine-blue);
    fill: var(--bos-marine-blue);
}

.chart-color-secondary {
    color: var(--bos-light-blue);
    fill: var(--bos-light-blue);
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    body {
        font-family: var(--bos-font-family);
        color: var(--bos-dark-gray);
    }

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

    .navbar,
    .no-print {
        display: none !important;
    }
}

/* ============================================
   Accessibility
   ============================================ */

/* Ensure sufficient contrast for WCAG AA compliance */
.text-on-marine-blue {
    color: var(--bos-white);
}

/* Focus indicators */
*:focus {
    outline: 2px solid var(--bos-light-blue);
    outline-offset: 2px;
}

button:focus,
a:focus {
    outline: 2px solid var(--bos-light-blue);
    outline-offset: 2px;
}

/* ============================================
   Responsive Typography
   ============================================ */

@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

@media (max-width: 576px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
}