/* =============================================
   Woninginspectie - Custom Styles
   Color Palette:
   --primary-red: #C62828
   --dark-gray:   #2B2B2B
   --light-gray:  #F5F5F5
   --white:       #FFFFFF
   ============================================= */

:root {
    --primary-red: #C62828;
    --dark-gray: #2B2B2B;
    --light-gray: #F5F5F5;
    --white: #FFFFFF;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--dark-gray);
    background-color: var(--white);
}

/* Navbar */
.navbar-app {
    background-color: var(--dark-gray);
}

/* Buttons - Primary (Red CTA) */
.btn-primary-app {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: var(--white);
}
.btn-primary-app:hover,
.btn-primary-app:focus {
    background-color: #A51D1D;
    border-color: #A51D1D;
    color: var(--white);
}

/* Buttons - Outline */
.btn-outline-app {
    border-color: var(--dark-gray);
    color: var(--dark-gray);
}
.btn-outline-app:hover,
.btn-outline-app:focus {
    background-color: var(--dark-gray);
    color: var(--white);
}

/* Section backgrounds */
.section-light {
    background-color: var(--light-gray);
    border-radius: 0.375rem;
    padding: 1rem;
}

/* Cards */
.card-app {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}
.card-app .card-header {
    background-color: var(--dark-gray);
    color: var(--white);
    font-weight: 600;
    padding: 0.5rem 1rem;
}

/* Tables */
.table-app thead th {
    background-color: var(--dark-gray);
    color: var(--white);
    font-weight: 600;
    font-size: 0.875rem;
}
.table-app tbody td {
    font-size: 0.875rem;
    vertical-align: middle;
}

/* Form elements - compact */
.form-control-sm,
.form-select-sm {
    font-size: 0.875rem;
}

/* Inspection point card */
.inspection-point {
    background-color: var(--white);
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.inspection-point.result-ja {
    border-left: 3px solid #2E7D32;
}
.inspection-point.result-nee {
    border-left: 3px solid var(--primary-red);
}
.inspection-point.result-nvt {
    border-left: 3px solid #9E9E9E;
}

/* Photo thumbnails */
.photo-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;
}
.photo-container {
    position: relative;
    display: inline-block;
}
.photo-delete-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0.625rem;
    line-height: 1;
    border-radius: 50%;
}

/* Chapter header in inspection view */
.chapter-header {
    background-color: var(--light-gray);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    font-size: 1rem;
}
.chapter-header:first-of-type {
    margin-top: 0;
}

/* Active state for select */
.form-select-result option[value="ja"] { color: #2E7D32; }
.form-select-result option[value="nee"] { color: var(--primary-red); }
.form-select-result option[value="nvt"] { color: #757575; }

/* Alert overrides */
.alert-success {
    background-color: #E8F5E9;
    border-color: #C8E6C9;
    color: #2E7D32;
}
.alert-danger {
    background-color: #FFEBEE;
    border-color: #FFCDD2;
    color: var(--primary-red);
}

/* Responsive */
@media (max-width: 576px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .photo-thumb {
        width: 60px;
        height: 60px;
    }
}

/* Status indicator */
.status-open {
    color: #E65100;
}
.status-completed {
    color: #2E7D32;
}

/* Loading spinner */
.spinner-inline {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}