/* ==========================================
   KYOKA BRAND CSS STYLESHEET
   Building Regulations Tracker
   Replaces Bootstrap blue with Kyoka colors
   ========================================== */

/* ==========================================
   BRAND COLOR VARIABLES
   ========================================== */
:root {
    --kyoka-primary: #E60000;      /* Kyoka Red */
    --kyoka-black: #000000;        /* Kyoka Black */
    --kyoka-light-grey: #F6F6F6;   /* Kyoka Light Grey */
    --kyoka-medium-grey: #BFBFBF;  /* Supporting Grey */
    --kyoka-warm-grey: #E6DAD7;    /* Warm Supporting Grey */
    --kyoka-darker-grey: #AC9895;  /* Darker Supporting Grey */
    
    /* Functional colors */
    --kyoka-success: #198754;      /* Keep Bootstrap green for compliance */
    --kyoka-warning: #fd7e14;      /* Keep Bootstrap amber for partial compliance */
    --kyoka-danger: var(--kyoka-primary);   /* Use Kyoka red for danger */
    --kyoka-info: #6c757d;         /* Grey for info states */
    
    /* Text colors */
    --kyoka-text-dark: var(--kyoka-black);
    --kyoka-text-light: #ffffff;
    --kyoka-text-muted: #6c757d;
}

/* ==========================================
   NAVIGATION BAR - KYOKA BRANDED
   ========================================== */
.navbar-dark.bg-primary {
    background-color: var(--kyoka-primary) !important;
    border-bottom: 2px solid var(--kyoka-black);
}

.navbar-brand {
    font-weight: bold;
    color: var(--kyoka-text-light) !important;
}

.navbar-nav .nav-link {
    color: var(--kyoka-text-light) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--kyoka-light-grey) !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.navbar-toggler {
    border-color: var(--kyoka-text-light);
}

/* ==========================================
   BUTTONS - KYOKA STYLED
   ========================================== */
.btn-primary {
    background-color: var(--kyoka-primary);
    border-color: var(--kyoka-primary);
    color: var(--kyoka-text-light);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #cc0000;  /* Darker red on hover */
    border-color: #cc0000;
    color: var(--kyoka-text-light);
}

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

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

/* Secondary buttons use Kyoka black */
.btn-secondary {
    background-color: var(--kyoka-black);
    border-color: var(--kyoka-black);
    color: var(--kyoka-text-light);
}

.btn-secondary:hover {
    background-color: #333333;
    border-color: #333333;
}

/* ==========================================
   PROGRESS BARS - KYOKA STYLED
   ========================================== */
.progress {
    background-color: var(--kyoka-light-grey);
    border: 1px solid var(--kyoka-medium-grey);
}

.progress-bar {
    background-color: var(--kyoka-primary);
    color: var(--kyoka-text-light);
    font-weight: bold;
}

/* RIBA Stage-specific progress bars */
.progress-bar.stage-completed {
    background-color: var(--kyoka-success);
}

.progress-bar.stage-in-progress {
    background-color: var(--kyoka-primary);
}

.progress-bar.stage-under-review {
    background-color: var(--kyoka-warning);
}

.progress-bar.stage-not-started {
    background-color: var(--kyoka-info);
}

/* ==========================================
   CARDS AND CONTAINERS
   ========================================== */
.card {
    border: 1px solid var(--kyoka-medium-grey);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: var(--kyoka-light-grey);
    border-bottom: 1px solid var(--kyoka-medium-grey);
    font-weight: bold;
    color: var(--kyoka-text-dark);
}

.card-header.bg-primary {
    background-color: var(--kyoka-primary) !important;
    color: var(--kyoka-text-light);
}

/* ==========================================
   NAVIGATION TABS - KYOKA STYLED
   ========================================== */
.nav-tabs .nav-link {
    color: var(--kyoka-text-dark);
    border: 1px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--kyoka-primary);
    border-color: var(--kyoka-medium-grey);
}

.nav-tabs .nav-link.active {
    background-color: var(--kyoka-primary) !important;
    color: var(--kyoka-text-light) !important;
    border-color: var(--kyoka-primary) !important;
}

/* ==========================================
   STATUS COLORS - COMPLIANCE SYSTEM
   ========================================== */
.status-grey {
    background-color: var(--kyoka-info);
    color: var(--kyoka-text-light);
}

.status-red {
    background-color: var(--kyoka-primary);
    color: var(--kyoka-text-light);
}

.status-amber {
    background-color: var(--kyoka-warning);
    color: var(--kyoka-text-light);
}

.status-green {
    background-color: var(--kyoka-success);
    color: var(--kyoka-text-light);
}

/* ==========================================
   FORMS AND INPUTS
   ========================================== */
.form-control:focus {
    border-color: var(--kyoka-primary);
    box-shadow: 0 0 0 0.2rem rgba(230, 0, 0, 0.25);
}

.form-select:focus {
    border-color: var(--kyoka-primary);
    box-shadow: 0 0 0 0.2rem rgba(230, 0, 0, 0.25);
}

/* ==========================================
   BADGES - KYOKA STYLED
   ========================================== */
.badge.bg-primary {
    background-color: var(--kyoka-primary) !important;
}

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

.professional-badge {
    background-color: var(--kyoka-black) !important;
    color: var(--kyoka-text-light);
}

/* ==========================================
   RIBA STAGE SPECIFIC STYLING
   ========================================== */
.riba-stage-card {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-left: 4px solid var(--kyoka-primary);
}

.riba-stage-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-left-color: var(--kyoka-black);
}

.riba-stage-header {
    background-color: var(--kyoka-primary);
    color: var(--kyoka-text-light);
    font-weight: bold;
}

.stage-indicator {
    font-size: 0.6rem;
    padding: 1px 3px;
    border-radius: 2px;
    margin: 1px;
    display: block;
    line-height: 1.2;
}

.critical-stage {
    background-color: var(--kyoka-primary);
    color: var(--kyoka-text-light);
    font-weight: bold;
}

.recommended-stage {
    background-color: var(--kyoka-success);
    color: var(--kyoka-text-light);
}

.optional-stage {
    background-color: var(--kyoka-info);
    color: var(--kyoka-text-light);
}

/* ==========================================
   BREADCRUMBS
   ========================================== */
.breadcrumb-nav {
    background-color: var(--kyoka-light-grey);
    border-bottom: 1px solid var(--kyoka-medium-grey);
}

.breadcrumb-item a {
    color: var(--kyoka-primary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--kyoka-black);
    text-decoration: underline;
}

/* ==========================================
   COMPLIANCE MATRIX STYLING
   ========================================== */
.compliance-matrix {
    font-size: 0.85rem;
}

.status-cell {
    text-align: center;
    padding: 8px 4px;
    vertical-align: middle;
    position: relative;
}

.status-compliant {
    background-color: #d4edda;
    color: #155724;
}

.status-partial {
    background-color: #fff3cd;
    color: #856404;
}

.status-non-compliant {
    background-color: #f8d7da;
    color: #721c24;
}

.status-not-applicable {
    background-color: var(--kyoka-light-grey);
    color: var(--kyoka-text-muted);
}

.status-not-started {
    background-color: #f8f9fa;
    color: var(--kyoka-text-muted);
}

/* ==========================================
   FLOATING ACTION BUTTONS
   ========================================== */
.btn-group-vertical .btn {
    box-shadow: 0 4px 8px rgba(230, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.btn-group-vertical .btn:hover {
    transform: scale(1.1);
}

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

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

/* ==========================================
   TABLE STYLING
   ========================================== */
.compliance-table th {
    background-color: var(--kyoka-light-grey);
    color: var(--kyoka-text-dark);
    border-bottom: 2px solid var(--kyoka-medium-grey);
}

.table-hover tbody tr:hover {
    background-color: rgba(230, 0, 0, 0.05);
}

/* ==========================================
   ALERTS AND NOTIFICATIONS
   ========================================== */
.alert-primary {
    background-color: rgba(230, 0, 0, 0.1);
    border-color: var(--kyoka-primary);
    color: var(--kyoka-black);
}

.alert-secondary {
    background-color: var(--kyoka-light-grey);
    border-color: var(--kyoka-medium-grey);
    color: var(--kyoka-text-dark);
}

/* ==========================================
   DROPDOWN MENUS
   ========================================== */
.dropdown-menu {
    border: 1px solid var(--kyoka-medium-grey);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-item:hover {
    background-color: rgba(230, 0, 0, 0.1);
    color: var(--kyoka-black);
}

/* ==========================================
   UTILITIES AND OVERRIDES
   ========================================== */
.text-primary {
    color: var(--kyoka-primary) !important;
}

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

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

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

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
    .riba-stage-card {
        margin-bottom: 1rem;
    }
    
    .btn-group-vertical .btn {
        margin-bottom: 0.5rem;
    }
    
    .progress {
        height: 30px !important;
    }
    
    .progress-bar {
        font-size: 0.75rem;
    }
}

/* ==========================================
   ANIMATION ENHANCEMENTS
   ========================================== */
@keyframes kyoka-pulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(230, 0, 0, 0.7); 
    }
    70% { 
        box-shadow: 0 0 0 10px rgba(230, 0, 0, 0); 
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(230, 0, 0, 0); 
    }
}

.kyoka-pulse-animation {
    animation: kyoka-pulse 2s infinite;
}

/* ==========================================
   DARK MODE CONSIDERATIONS (Optional)
   ========================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --kyoka-light-grey: #2a2a2a;
        --kyoka-medium-grey: #404040;
        --kyoka-text-muted: #888888;
    }
    
    .card {
        background-color: #1a1a1a;
        color: var(--kyoka-text-light);
    }
    
    .card-header {
        background-color: var(--kyoka-light-grey);
        color: var(--kyoka-text-light);
    }
}