:root {
    --primary-color: #1a1e21;
    --secondary-color: #fdb913; /* EX-TEST Yellow */
    --accent-color: #343a40;
    --bg-light: #f4f7f6;
    --sidebar-width: 250px;
    --dark-grey: #2c3e50;
}

body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-light);
    color: #333;
    overflow-x: hidden;
}

/* Sidebar */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    min-height: 100vh;
    transition: all 0.3s;
    background: #1a1e21 !important;
    z-index: 999;
}

#sidebar.active {
    margin-left: calc(-1 * var(--sidebar-width));
}

#sidebar .sidebar-header {
    background: #111416;
}

#sidebar ul.components {
    padding: 20px 0;
}

#sidebar ul li a {
    padding: 10px 20px;
    font-size: 0.95rem;
    display: block;
    color: #adb5bd;
    text-decoration: none;
    transition: all 0.2s;
}

#sidebar ul li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

#sidebar ul li.active > a {
    background: var(--secondary-color);
    color: #000 !important;
    font-weight: 600;
}

#sidebar ul li a i {
    width: 20px;
}

/* Content */
#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.navbar {
    padding: 15px 20px;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Cards & Stats */
.card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.border-left-primary { border-left: 0.25rem solid #4e73df !important; }
.border-left-success { border-left: 0.25rem solid #1cc88a !important; }
.border-left-info { border-left: 0.25rem solid #36b9cc !important; }
.border-left-warning { border-left: 0.25rem solid #f6c23e !important; }
.border-left-danger { border-left: 0.25rem solid #e74a3b !important; }
.border-left-dark { border-left: 0.25rem solid #1a1e21 !important; }

/* Status Badges */
.badge {
    font-weight: 600;
    padding: 0.5em 0.8em;
    border-radius: 50rem;
}

/* Custom Statuses */
.status-compliant { background-color: #1cc88a; color: #fff; }
.status-due-soon { background-color: #f6c23e; color: #000; }
.status-expired { background-color: #e74a3b; color: #fff; }
.status-defect-open { background-color: #fd7e14; color: #fff; }
.status-failed { background-color: #85144b; color: #fff; }

.bg-orange { background-color: #fd7e14 !important; color: #fff; }

/* Tables */
.table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #5a5c69;
    background-color: #f8f9fc;
    border-bottom: 2px solid #e3e6f0;
}

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

/* Authentication Pages */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        linear-gradient(135deg, rgba(253, 185, 19, 0.05), transparent 40%),
        linear-gradient(180deg, #f4f7f9 0%, #e8eef3 100%);
    padding: 2rem 1rem;
    position: relative;
}

.auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(253, 185, 19, 0.12), transparent 30%);
    pointer-events: none;
}

.auth-shell {
    width: 100%;
    max-width: 440px;
    z-index: 1;
}

.auth-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-top: 5px solid var(--secondary-color);
    padding: 2.5rem;
}

.auth-logo-wrap {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    max-width: 210px;
    height: auto;
}

.auth-heading {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-heading h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.auth-heading p {
    color: #64748b;
    font-size: 0.925rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.auth-form .auth-field {
    margin-bottom: 1.5rem;
}

.auth-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
}

.auth-form .form-control {
    height: 48px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

.auth-form .form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(253, 185, 19, 0.15);
    outline: none;
}

.auth-button {
    width: 100%;
    height: 48px;
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-button:hover {
    background-color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.auth-button:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

.auth-links {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-link {
    font-size: 0.875rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.auth-alert {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.auth-alert.error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fee2e2;
}

.auth-alert.success {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #dcfce7;
}

.auth-alert.info {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #dbeafe;
}

.auth-footer {
    margin-top: 2rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.75rem;
}

/* Login Page Override */
body.logged-out {
    background-color: #f4f7f9;
    background-image: none;
}

body.logged-out .card {
    border-radius: 1rem;
    overflow: hidden;
}

/* Buttons */
.btn-dark {
    background-color: #1a1e21;
    border-color: #1a1e21;
}

.btn-dark:hover {
    background-color: #000;
    border-color: #000;
}

.btn-yellow {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #000;
    font-weight: 600;
}

.btn-yellow:hover {
    background-color: #e2a611;
    border-color: #e2a611;
    color: #000;
}

/* --- REUSABLE PORTAL STYLING --- */

/* Portal Card */
.portal-card {
    background: #ffffff;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* Page Heading */
.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.page-heading h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--primary-color);
}

.page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Primary Action Button */
.btn-primary-action {
    background-color: #1a1e21;
    color: #ffffff !important;
    border: none;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    border-radius: 0.375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.btn-primary-action:hover {
    background-color: var(--secondary-color);
    color: #000000 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Filter Bar */
.filter-bar, .asset-filter-bar {
    background: #f8f9fc;
    padding: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid #e3e6f0;
    margin-bottom: 1.5rem;
}

.portal-card .filter-bar {
    border: none;
    border-bottom: 1px solid #e3e6f0;
    border-radius: 0;
    margin-bottom: 0;
}

.filter-field {
    margin-bottom: 1rem;
}

.filter-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #5a5c69;
    margin-bottom: 0.4rem;
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.btn-filter {
    background-color: #1a1e21;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-filter:hover {
    background-color: #000;
}

.btn-reset {
    background-color: #eaecf4;
    color: #5a5c69;
    border: 1px solid #d1d3e2;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-reset:hover {
    background-color: #d1d3e2;
    color: #3a3b45;
}

/* Portal Tables */
.portal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.portal-table thead th {
    background-color: #f8f9fc;
    color: #5a5c69;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 1rem;
    border-bottom: 2px solid #e3e6f0;
}

.portal-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e3e6f0;
}

/* Table Action Buttons */
.table-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.action-btn {
    min-width: 68px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.action-view {
    background-color: #ffffff;
    border-color: #d1d3e2;
    color: #3a3b45 !important;
}

.action-view:hover {
    background-color: #f8f9fc;
    border-color: #b7b9cc;
    color: #2e2f37 !important;
}

.action-edit {
    background-color: #1a1e21;
    color: #ffffff !important;
}

.action-edit:hover {
    background-color: #000000;
}

.action-inspect {
    background-color: var(--secondary-color);
    color: #000000 !important;
}

.action-inspect:hover {
    background-color: #e2a611;
}

.action-download {
    background-color: #4e73df;
    color: #ffffff !important;
}

.action-download:hover {
    background-color: #2e59d9;
}

.action-email {
    background-color: #36b9cc;
    color: #ffffff !important;
}

.action-email:hover {
    background-color: #2c9faf;
}

.action-danger {
    background-color: #e74a3b;
    color: #ffffff !important;
}

.action-danger:hover {
    background-color: #be2617;
}

/* Inspection View Improvements */
.inspection-hero {
    background: #fff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-left: 5px solid #ffc107;
}

.inspection-hero .eyebrow {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c757d;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.inspection-hero h1 {
    margin-bottom: 0.5rem;
    font-weight: 800;
    color: #1a1e21;
}

.inspection-hero p {
    color: #6c757d;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.inspection-meta-pills {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.meta-pill {
    background: #f8f9fa;
    padding: 0.35rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    color: #495057;
    border: 1px solid #dee2e6;
    font-weight: 600;
}

.inspection-hero-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.inspection-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.report-card {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 2rem;
    overflow: hidden;
}

.report-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #edf2f9;
    background-color: #fff;
}

.report-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #1a1e21;
}

.report-card-body {
    padding: 1.5rem;
}

.report-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.report-detail-item {
    display: flex;
    flex-direction: column;
}

.report-detail-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #95aac9;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.report-detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: #12263f;
}

.report-status-card {
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    border: 1px solid transparent;
}

.report-status-card.issued {
    background-color: #d1f7e8;
    border-color: #b7e8d5;
    color: #0f6848;
}

.report-status-card.draft {
    background-color: #fff4d1;
    border-color: #ffeeba;
    color: #856404;
}

.report-status-card.archived {
    background-color: #eaecf4;
    border-color: #d1d3e2;
    color: #5a5c69;
}

.document-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.document-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #edf2f9;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.document-item:hover {
    border-color: #d2ddec;
    background: #fff;
}

.document-icon {
    width: 40px;
    height: 40px;
    background: #fee2e2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-weight: 800;
    font-size: 0.75rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.document-info {
    flex-grow: 1;
    min-width: 0;
}

.document-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #12263f;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-meta {
    font-size: 0.8rem;
    color: #95aac9;
}

.document-badges {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.visibility-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
}

.visibility-badge.visible { background: #d1f7e8; color: #0f6848; }
.visibility-badge.internal { background: #eaecf4; color: #5a5c69; }

.doc-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    background: #e0e7ff;
    color: #3730a3;
}

.document-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}

.observation-box {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    line-height: 1.5;
    border-left: 4px solid #dee2e6;
    color: #495057;
}

@media (max-width: 1200px) {
    .inspection-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .inspection-hero {
        flex-direction: column;
        padding: 1.5rem;
    }
    .inspection-hero-actions {
        margin-top: 1.5rem;
        width: 100%;
    }
    .inspection-hero-actions .btn-primary-action,
    .inspection-hero-actions .btn-secondary-action,
    .inspection-hero-actions .btn-reset {
        flex-grow: 1;
        justify-content: center;
    }
    .report-detail-grid {
        grid-template-columns: 1fr;
    }
    .document-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .document-actions {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
    }
    .document-actions .action-btn {
        flex-grow: 1;
        justify-content: center;
    }
}

/* Status Pills */
.status-pill {
    display: inline-block;
    padding: 0.35em 0.8em;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50rem;
    text-align: center;
    white-space: nowrap;
}

.status-pill.compliant, .status-pill.issued, .status-pill.closed { background-color: #d1f7e8; color: #0f6848; }
.status-pill.due_soon, .status-pill.superseded { background-color: #fff4d1; color: #856404; }
.status-pill.expired, .status-pill.critical { background-color: #fbd5d2; color: #721c24; }
.status-pill.defect_open, .status-pill.open { background-color: #ffe8d1; color: #854d0e; }
.status-pill.failed_do_not_use { background-color: #85144b; color: #ffffff; }
.status-pill.archived, .status-pill.draft { background-color: #eaecf4; color: #5a5c69; }

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.detail-value {
    font-size: 1rem;
    color: #1a1e21;
}

/* Alerts */
.alert-success {
    background-color: #d1f7e8;
    color: #0f6848;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #b7e8d5;
    margin-bottom: 1.5rem;
}

.alert-error, .alert-danger {
    background-color: #fbd5d2;
    color: #721c24;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #f8c0bc;
    margin-bottom: 1.5rem;
}

/* Buttons */
.btn-secondary-action {
    background-color: #6c757d;
    color: #ffffff !important;
    border: none;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    border-radius: 0.375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.btn-secondary-action:hover {
    background-color: #5a6268;
    color: #ffffff !important;
}

.page-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.inline-action-form {
    display: inline-flex;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .asset-filter-bar .row > div {
        margin-bottom: 1rem;
    }
    .asset-filter-bar .row {
        --bs-gutter-x: 1rem;
    }
}

@media (max-width: 768px) {
    .page-heading {
        flex-direction: column;
    }
    .page-heading h1 {
        margin-bottom: 0.5rem;
    }
    .btn-primary-action {
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }
    .filter-actions {
        flex-direction: column;
    }
    .btn-filter, .btn-reset {
        width: 100%;
    }
}

/* Mobile Responsive Sidebar Fix */
@media (max-width: 768px) {
    #sidebar {
        margin-left: calc(-1 * var(--sidebar-width));
        position: fixed;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        width: 100%;
    }
}