/* =========================================
   GLOBAL
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fb;
    color: #20243a;
}

button {
    font-family: inherit;
    cursor: pointer;
}


/* =========================================
   DASHBOARD LAYOUT
========================================= */

.dashboard {
    display: flex;
    min-height: 100vh;
}


/* =========================================
   SIDEBAR
========================================= */

.sidebar {
    width: 250px;
    min-height: 100vh;
    background: linear-gradient(180deg, #0e1d2b, #162a3d);
    color: white;
    padding: 28px 18px;
    display: flex;
    flex-direction: column;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 35px;
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: white;
    color: #0e1d2b;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
}

.logo h2 {
    font-size: 18px;
    margin-bottom: 3px;
}

.logo span {
    font-size: 11px;
    opacity: 0.75;
}


/* NAVIGATION */

nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nav-item {
    width: 100%;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.8);
    padding: 13px 14px;
    border-radius: 10px;
    text-align: left;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-item:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}

.nav-item.active {
    background: rgba(255,255,255,0.18);
    color: white;
    font-weight: 600;
}

.nav-item span {
    width: 22px;
    text-align: center;
}

.sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}


/* =========================================
   MAIN CONTENT
========================================= */

.main-content {
    flex: 1;
    min-width: 0;
}


/* =========================================
   TOP BAR
========================================= */

.topbar {
    height: 90px;
    background: white;
    border-bottom: 1px solid #e8eaf0;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar h1 {
    font-size: 27px;
    margin-bottom: 5px;
}

.topbar p {
    color: #777d91;
    font-size: 14px;
}

.user-area {
    display: flex;
    align-items: center;
    gap: 13px;
}

.user-info {
    text-align: right;
}

.user-info strong {
    display: block;
    font-size: 14px;
}

.user-info span {
    display: block;
    color: #85899b;
    font-size: 12px;
    margin-top: 3px;
}

.user-avatar {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: linear-gradient(135deg, #162a3d, #0e1d2b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 17px;
}


/* =========================================
   CONTENT
========================================= */

.dashboard-content {
    padding: 35px 40px 50px;
    max-width: 1500px;
}


/* =========================================
   WELCOME CARD
========================================= */

.welcome-card {
    background: linear-gradient(135deg, #162a3d, #162a3d);
    border-radius: 20px;
    padding: 35px 40px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 235px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(67, 54, 180, 0.2);
}

.small-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    opacity: 0.75;
}

.welcome-card h2 {
    font-size: 31px;
    line-height: 1.2;
    margin: 12px 0;
}

.welcome-card p {
    max-width: 650px;
    line-height: 1.6;
    font-size: 14px;
    opacity: 0.88;
    margin-bottom: 22px;
}

.welcome-icon {
    font-size: 105px;
    opacity: 0.18;
    margin-right: 55px;
}

.primary-button {
    border: none;
    background: white;
    color: #162a3d;
    padding: 13px 20px;
    border-radius: 9px;
    font-weight: bold;
    font-size: 14px;
}

.primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}


/* =========================================
   STAT CARDS
========================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.stat-card {
    background: white;
    border: 1px solid #e9ebf2;
    border-radius: 15px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 3px 12px rgba(30,35,60,0.04);
}

.stat-card span {
    display: block;
    color: #81869a;
    font-size: 12px;
    margin-bottom: 6px;
}

.stat-card strong {
    font-size: 25px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.stat-icon.blue {
    background: #f2f5f7;
}

.stat-icon.purple {
    background: #fff7e5;
}

.stat-icon.orange {
    background: #fff0df;
}

.stat-icon.green {
    background: #e5f8ee;
}


/* =========================================
   LOWER GRID
========================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    margin-top: 22px;
}

.dashboard-card {
    background: white;
    border: 1px solid #e9ebf2;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 3px 12px rgba(30,35,60,0.04);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.card-header h3 {
    font-size: 17px;
    margin-bottom: 5px;
}

.card-header p {
    font-size: 12px;
    color: #8a8fa2;
}

.text-button {
    background: transparent;
    border: none;
    color: #162a3d;
    font-size: 12px;
    font-weight: bold;
}


/* =========================================
   EMPTY STATES
========================================= */

.empty-state {
    text-align: center;
    padding: 35px 20px;
    color: #777d91;
}

.empty-icon {
    font-size: 35px;
    margin-bottom: 12px;
}

.empty-state h4 {
    color: #30344b;
    font-size: 14px;
    margin-bottom: 7px;
}

.empty-state p {
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================
   QUICK ACTIONS
========================================= */

.quick-actions-card {
    margin-top: 22px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.quick-action {
    border: 1px solid #e6e8ef;
    background: #fafbfe;
    border-radius: 12px;
    padding: 18px;
    text-align: left;
    transition: 0.2s;
}

.quick-action:hover {
    border-color: #f0a81c;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(60,50,150,0.08);
}

.quick-action span {
    display: block;
    font-size: 23px;
    margin-bottom: 12px;
}

.quick-action strong {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.quick-action small {
    color: #8a8fa2;
    font-size: 11px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .topbar {
        padding: 0 20px;
    }

    .dashboard-content {
        padding: 20px;
    }

    .welcome-card {
        padding: 25px;
    }

    .welcome-card h2 {
        font-size: 24px;
    }

    .welcome-icon {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   SUPPLIER PAGE
========================================= */

.supplier-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.supplier-page-header h2 {
    font-size: 27px;
    margin-bottom: 6px;
}

.supplier-page-header p {
    color: #81869a;
    font-size: 13px;
}


/* SEARCH */

.search-input {
    width: 230px;
    padding: 10px 13px;
    border: 1px solid #e1e4ec;
    border-radius: 8px;
    outline: none;
    font-size: 12px;
}

.search-input:focus {
    border-color: #f0a81c;
}


/* TABLE */

.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: #f8f9fc;
}

th {
    text-align: left;
    padding: 13px 12px;
    font-size: 11px;
    color: #74798d;
    font-weight: 600;
    white-space: nowrap;
}

td {
    padding: 16px 12px;
    border-top: 1px solid #edf0f5;
    font-size: 12px;
    color: #555a6e;
}

td strong {
    color: #292d43;
    font-size: 13px;
}


/* BADGES */

.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.criticality-low {
    background: #e9f8ef;
    color: #21844b;
}

.criticality-medium {
    background: #fff4df;
    color: #9b6800;
}

.criticality-high {
    background: #ffe9e9;
    color: #c23b3b;
}

.criticality-strategic {
    background: #fff7e5;
    color: #a06a00;
}

.impact-low {
    background: #e9f8ef;
    color: #21844b;
}

.impact-medium {
    background: #fff4df;
    color: #9b6800;
}

.impact-high {
    background: #ffe9e9;
    color: #c23b3b;
}


/* TABLE BUTTON */

.table-button {
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
}

.delete-button {
    color: #d14949;
}

.delete-button:hover {
    text-decoration: underline;
}


/* =========================================
   MODAL
========================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 23, 40, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.modal-overlay.show {
    display: flex;
}

.modal {
    width: 100%;
    max-width: 520px;
    background: white;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.modal-header h2 {
    font-size: 21px;
    margin-bottom: 5px;
}

.modal-header p {
    font-size: 12px;
    color: #85899b;
}

.close-button {
    border: none;
    background: #f2f3f7;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 22px;
    color: #656a7b;
}


/* FORM */

.form-group {
    margin-bottom: 17px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 7px;
    color: #35394e;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #dfe2ea;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    background: white;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #f0a81c;
    box-shadow: 0 0 0 3px rgba(240,168,28,.12);
}


/* FORM BUTTONS */

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}

.secondary-button {
    border: 1px solid #dfe2ea;
    background: white;
    color: #555a6e;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
}

.secondary-button:hover {
    background: #f7f8fb;
}

.form-error {
    color: #d14949;
    font-size: 12px;
    margin-top: 5px;
}
/* =========================================
   ASSESSMENT PAGE
========================================= */

.assessment-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.assessment-progress {
    background: white;
    border: 1px solid #e9ebf2;
    border-radius: 14px;
    padding: 20px 24px;
    margin-top: 20px;
}

.progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.progress-label {
    display: block;
    color: #7d8295;
    font-size: 11px;
    margin-bottom: 5px;
}

.progress-top strong {
    font-size: 13px;
}

.progress-top > strong {
    color: #162a3d;
    font-size: 18px;
}

.progress-bar {
    height: 8px;
    background: #eceef4;
    border-radius: 20px;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #162a3d, #f0a81c);
    border-radius: 20px;
    transition: width 0.3s ease;
}


/* AREA TABS */

.area-tabs {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.area-tab {
    border: 1px solid #e0e2ea;
    background: white;
    color: #666b7d;
    border-radius: 9px;
    padding: 11px 15px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
}

.area-tab:hover {
    border-color: #f0a81c;
}

.area-tab.active {
    background: #162a3d;
    color: white;
    border-color: #162a3d;
}

.area-tab.complete {
    border-color: #4caf78;
}

.area-tab.complete::after {
    content: " ✓";
    color: #3b9b68;
}

.area-tab.active.complete::after {
    color: white;
}


/* SECTION HEADER */

.assessment-section-header {
    background: linear-gradient(135deg, #f7f9fa, #f7f9fa);
    border: 1px solid #f7f9fa;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-number {
    font-size: 10px;
    font-weight: bold;
    color: #f0a81c;
    letter-spacing: 1px;
}

.assessment-section-header h2 {
    margin: 8px 0 5px;
    font-size: 24px;
}

.assessment-section-header p {
    color: #777d91;
    font-size: 12px;
}

.section-count {
    background: white;
    border: 1px solid #f2f5f7;
    color: #f0a81c;
    padding: 9px 13px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}


/* QUESTIONS */

.questions-container {
    margin-top: 20px;
}

.question-card {
    background: white;
    border: 1px solid #e9ebf2;
    border-radius: 13px;
    padding: 20px;
    margin-bottom: 12px;
    display: flex;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(30,35,60,0.03);
}

.question-number {
    width: 31px;
    height: 31px;
    min-width: 31px;
    border-radius: 50%;
    background: #fff7e5;
    color: #162a3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
}

.question-content {
    flex: 1;
}

.question-text {
    font-size: 13px;
    font-weight: 600;
    color: #30344b;
    line-height: 1.5;
    margin-bottom: 15px;
}


/* SCORE OPTIONS */

.score-options {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.score-option {
    min-width: 70px;
    border: 1px solid #dfe2ea;
    background: white;
    border-radius: 9px;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #656a7d;
}

.score-option strong {
    font-size: 15px;
}

.score-option span {
    font-size: 9px;
}

.score-option:hover {
    border-color: #f0a81c;
    background: #f7f9fa;
}

.score-option.selected {
    background: #162a3d;
    border-color: #162a3d;
    color: white;
}

.na-option {
    min-width: 85px;
}


/* NAVIGATION */

.assessment-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-bottom: 20px;
}

.assessment-navigation button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* MOBILE */

@media (max-width: 700px) {

    .assessment-details-grid {
        grid-template-columns: 1fr;
    }

    .assessment-section-header {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column;
    }

    .score-option {
        min-width: 60px;
    }

}
/* =========================================
   ASSESSMENT - POLISHED DESIGN
========================================= */

.assessment-setup {
    margin-bottom: 18px;
}

.assessment-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.assessment-details-grid .form-group {
    margin-bottom: 0;
}


/* =========================================
   PROGRESS
========================================= */

.assessment-progress {
    background: white;
    border: 1px solid #e7e9f0;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 18px;
    box-shadow: 0 3px 12px rgba(30,35,60,0.04);
}

.progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.progress-label {
    display: block;
    font-size: 11px;
    color: #858a9c;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 5px;
}

#progressText {
    font-size: 13px;
    color: #30344b;
}

#progressPercentage {
    font-size: 20px;
    color: #162a3d;
}

.progress-bar {
    width: 100%;
    height: 9px;
    background: #eceef5;
    border-radius: 20px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #162a3d, #f0a81c);
    border-radius: 20px;
    transition: width 0.3s ease;
}


/* =========================================
   AREA NAVIGATION
========================================= */

.area-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.area-tab {
    border: 1px solid #e0e2ea;
    background: white;
    color: #686d80;
    border-radius: 10px;
    padding: 12px 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.area-tab:hover {
    border-color: #0e1d2b;
    color: #162a3d;
    transform: translateY(-1px);
}

.area-tab.active {
    background: #162a3d;
    border-color: #162a3d;
    color: white;
    box-shadow: 0 5px 12px rgba(81,69,205,0.2);
}

.area-tab.complete {
    border-color: #55ad7d;
}

.area-tab.complete::after {
    content: " ✓";
    color: #55ad7d;
}

.area-tab.active.complete::after {
    color: white;
}


/* =========================================
   SECTION HEADER
========================================= */

.assessment-section-header {
    background: linear-gradient(135deg, #162a3d, #162a3d);
    color: white;
    border-radius: 16px;
    padding: 25px 28px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 20px rgba(81,69,205,0.15);
}

.section-number {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    opacity: 0.75;
    margin-bottom: 7px;
}

.assessment-section-header h2 {
    font-size: 24px;
    margin: 0 0 6px;
}

.assessment-section-header p {
    font-size: 12px;
    margin: 0;
    opacity: 0.82;
}

.section-count {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 11px;
    white-space: nowrap;
}


/* =========================================
   QUESTIONS
========================================= */

.questions-container {
    margin-top: 0;
}

.question-card {
    background: white;
    border: 1px solid #e7e9f0;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(30,35,60,0.03);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.question-card:hover {
    border-color: #f2f5f7;
    box-shadow: 0 4px 12px rgba(30,35,60,0.05);
}

.question-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
    background: #fff7e5;
    color: #162a3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.question-content {
    flex: 1;
    min-width: 0;
}

.question-text {
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
    color: #30344b;
    margin: 3px 0 14px;
}


/* =========================================
   SCORE BUTTONS
========================================= */

.score-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.score-option {
    min-width: 72px;
    height: 52px;
    padding: 6px 9px;
    border: 1px solid #dfe2ea;
    background: #fff;
    border-radius: 9px;
    color: #666b7d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.score-option strong {
    font-size: 14px;
    line-height: 1;
}

.score-option span {
    font-size: 8px;
    white-space: nowrap;
}

.score-option:hover {
    border-color: #0e1d2b;
    background: #f7f9fa;
    color: #162a3d;
    transform: translateY(-1px);
}

.score-option.selected {
    background: #162a3d;
    border-color: #162a3d;
    color: white;
    box-shadow: 0 4px 10px rgba(81,69,205,0.2);
}

.na-option {
    min-width: 100px;
}


/* =========================================
   NAVIGATION
========================================= */

.assessment-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding-bottom: 30px;
}

.assessment-navigation .primary-button,
.assessment-navigation .secondary-button {
    min-height: 42px;
}

.assessment-navigation button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* =========================================
   ASSESSMENT ERROR
========================================= */

#setupError {
    margin-top: 8px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 1100px) {

    .area-tabs {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 750px) {

    .assessment-details-grid {
        grid-template-columns: 1fr;
    }

    .area-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .assessment-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .question-card {
        padding: 17px;
    }

    .score-option {
        min-width: 62px;
    }

}

@media (max-width: 500px) {

    .area-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .score-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .score-option,
    .na-option {
        min-width: 0;
        width: 100%;
    }

}
/* =========================================
   RESULTS PAGE - POLISHED
========================================= */

.results-header {
    background: linear-gradient(135deg, #162a3d 0%, #f0a81c 100%);
    color: white;
    border-radius: 20px;
    padding: 30px 34px;
    margin-bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-shadow: 0 12px 30px rgba(81, 69, 205, 0.18);
}

.results-header .small-label {
    color: rgba(255,255,255,0.75);
    font-size: 10px;
    letter-spacing: 1.5px;
}

.results-header h2 {
    font-size: 30px;
    margin: 8px 0 5px;
    color: white;
}

.results-header p {
    color: rgba(255,255,255,0.75);
    font-size: 12px;
}

.overall-score {
    min-width: 170px;
    text-align: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 18px 25px;
}

.overall-score span {
    display: block;
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    margin-bottom: 4px;
}

.overall-score strong {
    display: block;
    color: white;
    font-size: 42px;
    line-height: 1.1;
}


/* =========================================
   RESULTS GRID
========================================= */

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.result-card {
    background: white;
    border: 1px solid #e7e9f0;
    border-radius: 15px;
    padding: 20px;

    box-shadow: 0 3px 12px rgba(30,35,60,0.04);

    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

.result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(30,35,60,0.08);
}

.result-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.result-area {
    font-size: 13px;
    font-weight: 700;
    color: #30344b;
    line-height: 1.3;
}

.result-status {
    font-size: 9px;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.result-score {
    margin: 20px 0 12px;
}

.result-score strong {
    font-size: 32px;
    color: #30344b;
}

.result-bar {
    width: 100%;
    height: 8px;
    background: #eceef4;
    border-radius: 20px;
    overflow: hidden;
}

.result-bar-fill {
    height: 100%;
    border-radius: 20px;
}


/* =========================================
   SCORE STATUS
========================================= */

.status-critical {
    background: #ffe5e5;
    color: #c33737;
}

.status-major {
    background: #ffe8e8;
    color: #b83b3b;
}

.status-improvement {
    background: #fff0d8;
    color: #a56b00;
}

.status-good {
    background: #e1f6e9;
    color: #21824b;
}

.status-strong {
    background: #e1f6e9;
    color: #21824b;
}


/* =========================================
   SCORE BAR
========================================= */

.result-bar-fill.status-critical {
    background: #d94b4b;
}

.result-bar-fill.status-major {
    background: #e45b5b;
}

.result-bar-fill.status-improvement {
    background: #e2a536;
}

.result-bar-fill.status-good {
    background: #42a66e;
}

.result-bar-fill.status-strong {
    background: #42a66e;
}


/* =========================================
   RADAR CHART
========================================= */

.chart-card {
    margin-bottom: 22px;
}

.radar-container {
    width: 100%;
    max-width: 720px;
    height: 500px;
    margin: 0 auto;
}


/* =========================================
   PERFORMANCE SUMMARY
========================================= */

.performance-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.summary-item {
    background: #f7f8fc;
    border: 1px solid #eceef4;
    border-radius: 12px;
    padding: 18px;
}

.summary-item span {
    display: block;
    color: #858a9c;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.summary-item strong {
    display: block;
    color: #30344b;
    font-size: 14px;
    line-height: 1.4;
}


/* =========================================
   RESULTS RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 750px) {

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .overall-score {
        width: 100%;
        text-align: left;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .performance-summary {
        grid-template-columns: 1fr;
    }

    .radar-container {
        height: 400px;
    }

}

@media (max-width: 500px) {

    .results-header {
        padding: 24px;
    }

    .results-header h2 {
        font-size: 24px;
    }

    .radar-container {
        height: 330px;
    }

}
/* ================================
   ASSESSOR NOTES / EVIDENCE
   ================================ */

.question-notes {
    margin-top: 20px;
    width: 100%;
}

.question-notes label {
    display: block;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #2f3152;
}

.question-notes label span {
    font-weight: 400;
    color: #888aa3;
    margin-left: 4px;
}

.assessment-notes {
    display: block;
    width: 100%;
    min-height: 95px;
    padding: 14px 16px;

    box-sizing: border-box;

    border: 1px solid #d5dde3;
    border-radius: 12px;

    background: #f7f9fa;

    color: #2f3152;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;

    resize: vertical;
    overflow: auto;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.assessment-notes::placeholder {
    color: #a5a6b8;
}

.assessment-notes:hover {
    border-color: #d5dde3;
    background: #ffffff;
}

.assessment-notes:focus {
    border-color: #f0a81c;
    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(240,168,28,.12);
}
/* ==========================================
   LOGIN / SIGN UP PAGE
   ========================================== */

.page {
    min-height: 100vh;
    display: flex;
    background: #f5f7fb;
}

/* Left side */
.page > .info-panel {
    width: 50%;
    min-height: 100vh;
    box-sizing: border-box;
    background: linear-gradient(145deg, #0e1d2b, #162a3d);
    color: white;
    padding: 70px 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Right side */
.page > .form-panel {
    width: 50%;
    min-height: 100vh;
    box-sizing: border-box;
    background: #f5f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}

/* Form container */
.form-container {
    width: 100%;
    max-width: 480px;
}

/* White login box */
.form-box {
    background: white;
    border-radius: 22px;
    padding: 42px;
    box-shadow: 0 15px 45px rgba(38, 35, 100, 0.12);
}

/* Heading */
.form-heading {
    margin-bottom: 30px;
}

.form-heading h2 {
    margin: 0 0 10px;
    color: #24243f;
    font-size: 30px;
    font-weight: 750;
}

.form-heading p {
    margin: 0;
    color: #777994;
    font-size: 15px;
}

/* Form */
#loginFormElement {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Labels */
#loginFormElement label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #373852;
    font-size: 14px;
    font-weight: 600;
}

/* Inputs */
#loginFormElement input[type="email"],
#loginFormElement input[type="password"],
#loginFormElement input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid #d5dde3;
    border-radius: 11px;
    background: #f7f9fa;
    color: #292a46;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: 0.2s ease;
}

#loginFormElement input:focus {
    border-color: #f0a81c;
    background: white;
    box-shadow: 0 0 0 3px rgba(240,168,28,.12);
}

/* Login button */
#loginFormElement button {
    width: 100%;
    margin-top: 20px;
    padding: 14px 20px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, #0e1d2b, #162a3d);
    color: white;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

#loginFormElement button:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(85, 66, 216, 0.25);
}

#loginFormElement button:active {
    transform: translateY(0);
}

/* Create account / switch links */
.form-box a,
.form-box button.secondary-button {
    color: #162a3d;
}

/* Mobile */
@media (max-width: 600px) {

    .page {
        flex-direction: column;
    }

    .page > .info-panel,
    .page > .form-panel {
        width: 100%;
        min-height: auto;
    }

    .page > .info-panel {
        padding: 45px 30px;
    }

    .page > .form-panel {
        padding: 30px 20px;
    }

    .form-box {
        padding: 30px 25px;
    }
}
/* =========================================================
   PROFESSIONAL LOGIN / SIGN-UP PAGE
   ========================================================= */

.page {
    min-height: 100vh;
    display: flex;
    background: #f5f6fb;
}

/* =========================
   LEFT INFORMATION PANEL
   ========================= */

.page > .info-panel {
    width: 50%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 80px 70px;

    background: linear-gradient(145deg, #0e1d2b 0%, #162a3d 100%);
    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page > .info-panel h1,
.page > .info-panel h2,
.page > .info-panel h3,
.page > .info-panel p,
.page > .info-panel li {
    color: white;
}

.page > .info-panel h1 {
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 5px;
}

.page > .info-panel h2 {
    font-size: 28px;
    margin-top: 0;
}

.page > .info-panel p {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.9;
}

/* =========================
   RIGHT SIDE
   ========================= */

.page > .form-panel {
    width: 50%;
    min-height: 100vh;
    box-sizing: border-box;

    padding: 50px 70px;

    background: #f5f6fb;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow-y: auto;
}

.form-container {
    width: 100%;
    max-width: 520px;
}

.business-site-link {
    display: inline-block;
    margin: 0 0 18px 4px;
    color: #34465a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.business-site-link:hover {
    text-decoration: underline;
}

/* =========================
   FORM CARDS
   ========================= */

.form-box {
    width: 100%;
    box-sizing: border-box;

    background: white;
    border-radius: 20px;

    padding: 40px;

    box-shadow:
        0 10px 35px rgba(45, 40, 110, 0.10);

    margin-bottom: 24px;
}

/* =========================
   FORM HEADINGS
   ========================= */

.form-heading {
    margin-bottom: 28px;
}

.form-heading h2 {
    margin: 0 0 8px;

    color: #252642;
    font-size: 30px;
    line-height: 1.2;
}

.form-heading p {
    margin: 0;

    color: #777a98;
    font-size: 15px;
    line-height: 1.5;
}

/* =========================
   ALL FORMS
   ========================= */

.form-box form {
    width: 100%;

    display: flex;
    flex-direction: column;
}

/* =========================
   LABELS
   ========================= */

.form-box form label {
    display: block;

    margin-top: 14px;
    margin-bottom: 7px;

    color: #363752;

    font-size: 14px;
    font-weight: 600;
}

/* =========================
   INPUTS
   ========================= */

.form-box form input {
    width: 100%;
    height: 48px;

    box-sizing: border-box;

    padding: 0 15px;

    border: 1px solid #f2f5f7;
    border-radius: 10px;

    background: #f7f9fa;

    color: #292a46;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.form-box form input::placeholder {
    color: #aaaabd;
}

.form-box form input:hover {
    border-color: #d5dde3;
    background: white;
}

.form-box form input:focus {
    border-color: #162a3d;
    background: white;

    box-shadow:
        0 0 0 3px rgba(240,168,28,.12);
}

/* =========================
   BUTTONS
   ========================= */

.form-box form button {
    width: 100%;
    height: 48px;

    margin-top: 22px;

    border: none;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #0e1d2b,
        #162a3d
    );

    color: white;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.form-box form button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(85, 66, 216, 0.25);
}

/* =========================
   SWITCH LOGIN / SIGN UP
   ========================= */

.form-box > p {
    margin: 14px 0 0;

    color: #555873;
    font-size: 14px;
}

.form-box > p button,
.form-box > p a {
    color: #0e1d2b;

    font-weight: 600;

    cursor: pointer;
}

/* =========================
   SIGN-UP FORM
   ========================= */

#signupFormElement {
    display: flex;
    flex-direction: column;
}

#signupFormElement input {
    margin-bottom: 2px;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 900px) {

    .page {
        flex-direction: column;
    }

    .page > .info-panel,
    .page > .form-panel {
        width: 100%;
        min-height: auto;
    }

    .page > .info-panel {
        padding: 50px 30px;
    }

    .page > .form-panel {
        padding: 35px 20px;
    }

    .form-container {
        max-width: 520px;
    }
}

@media (max-width: 600px) {

    .page > .info-panel {
        padding: 35px 22px;
    }

    .page > .form-panel {
        padding: 25px 15px;
    }

    .form-box {
        padding: 28px 22px;
        border-radius: 16px;
    }

    .form-heading h2 {
        font-size: 26px;
    }
}
/* =========================================================
   WELCOME PANEL - LOGIN PAGE
   ========================================================= */

.welcome-panel {
    width: 50%;
    min-height: 100vh;
    box-sizing: border-box;

    background: linear-gradient(145deg, #0e1d2b, #162a3d);

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px;
}

.welcome-content {
    width: 100%;
    max-width: 520px;
}

/* Logo */

.welcome-content .logo {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 30px;

    border-radius: 16px;

    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);

    color: white;

    font-size: 19px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Main heading */

.welcome-content h1 {
    margin: 0;

    color: white;

    font-size: 42px;
    line-height: 1.1;
    font-weight: 750;
}

/* Subtitle */

.welcome-content h2 {
    margin: 7px 0 22px;

    color: rgba(255,255,255,0.9);

    font-size: 25px;
    font-weight: 500;
}

/* Description */

.welcome-content > p {
    max-width: 480px;

    margin: 0 0 42px;

    color: rgba(255,255,255,0.78);

    font-size: 16px;
    line-height: 1.65;
}

/* Features */

.welcome-content .features {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Individual feature */

.welcome-content .feature {
    display: flex;
    align-items: flex-start;

    gap: 15px;
}

/* Tick */

.welcome-content .feature > span:first-child {
    flex-shrink: 0;

    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,0.15);

    color: white;

    font-size: 14px;
    font-weight: 700;
}

/* Feature text */

.welcome-content .feature > span:last-child {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.welcome-content .feature strong {
    color: white;

    font-size: 16px;
    font-weight: 700;
}

.welcome-content .feature small {
    color: rgba(255,255,255,0.7);

    font-size: 14px;
    line-height: 1.45;
}

/* Responsive */

@media (max-width: 900px) {

    .welcome-panel {
        width: 100%;
        min-height: auto;

        padding: 50px 30px;
    }

    .welcome-content {
        max-width: 600px;
    }
}
/* =========================================
   CLICKABLE SUPPLIER NAME
========================================= */

.supplier-name-button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: #292b46;
    cursor: pointer;
    text-align: left;
}

.supplier-name-button:hover {
    color: #162a3d;
    text-decoration: underline;
}
/* =========================================
   RESULTS & TRENDS PAGE
========================================= */

/* Supplier selection card */
#supplierSelect {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #d5dde3;
    border-radius: 11px;
    background: #f7f9fa;
    color: #292b46;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    cursor: pointer;
    transition: 0.2s ease;
}

#supplierSelect:hover {
    border-color: #d5dde3;
    background: #ffffff;
}

#supplierSelect:focus {
    border-color: #f0a81c;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(240,168,28,.12);
}


/* =========================================
   OVERALL SCORE CARDS
========================================= */

.results-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.overview-score-card {
    background: #f7f9fa;
    border: 1px solid #f2f5f7;
    border-radius: 14px;
    padding: 22px 24px;
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.2s ease;
}

.overview-score-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(44, 43, 85, 0.08);
}

.overview-score-card span {
    font-size: 13px;
    font-weight: 600;
    color: #7b7e98;
    margin-bottom: 9px;
}

.overview-score-card strong {
    font-size: 32px;
    font-weight: 750;
    color: #0e1d2b;
}


/* =========================================
   DEPARTMENT RESULTS
========================================= */

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.result-card {
    background: #ffffff;
    border: 1px solid #f2f5f7;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(44, 43, 85, 0.04);
    transition: 0.2s ease;
}

.result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(44, 43, 85, 0.08);
}

.result-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}

.result-card-top h3 {
    margin: 0;
    font-size: 16px;
    color: #292b46;
}

.result-card-top strong {
    font-size: 20px;
    color: #0e1d2b;
    white-space: nowrap;
}


/* Performance bar */
.result-mini-bar {
    width: 100%;
    height: 7px;
    background: #ececf5;
    border-radius: 20px;
    overflow: hidden;
}

.result-mini-fill {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #0e1d2b, #f0a81c);
}


/* =========================================
   CHART CONTAINERS
========================================= */

.radar-chart-container {
    position: relative;
    height: 430px;
    margin-top: 10px;
    padding: 10px;
}

.trend-chart-container {
    position: relative;
    width: 100%;
    height: 330px;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.trend-chart-container canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================
   EMPTY STATE
========================================= */

#resultsEmpty {
    padding: 55px 30px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .results-overview-grid {
        grid-template-columns: 1fr;
    }

    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .results-grid {
        grid-template-columns: 1fr;
    }

    .radar-chart-container {
        height: 350px;
    }

    .trend-chart-container {
        height: 280px;
    }

}
/* =========================================
   DEVELOPMENT ACTIONS PAGE
========================================= */

/* Summary cards */
.action-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.action-summary-card {
    background: #ffffff;
    border: 1px solid #f2f5f7;
    border-radius: 14px;
    padding: 21px 22px;
    box-shadow: 0 2px 8px rgba(44, 43, 85, 0.04);
    transition: 0.2s ease;
}

.action-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(44, 43, 85, 0.08);
}

.action-summary-card span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #7b7e98;
    margin-bottom: 8px;
}

.action-summary-card strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: #0e1d2b;
}


/* =========================================
   FILTERS
========================================= */

.action-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.action-filter-grid .form-group {
    margin: 0;
}

.action-filter-grid select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d5dde3;
    border-radius: 10px;
    background: #f7f9fa;
    color: #292b46;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.action-filter-grid select:hover {
    border-color: #d5dde3;
    background: #ffffff;
}

.action-filter-grid select:focus {
    border-color: #f0a81c;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(240,168,28,.12);
}


/* =========================================
   ACTION TABLE
========================================= */

.action-title-cell {
    max-width: 300px;
}

.action-title-cell strong {
    display: block;
    color: #292b46;
    font-size: 14px;
    line-height: 1.4;
}

.action-title-cell small {
    display: none;
    margin-top: 5px;
    color: #85879e;
    font-size: 12px;
    line-height: 1.45;
}


/* =========================================
   PRIORITY BADGES
========================================= */

.action-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.priority-critical {
    background: #fde8e8;
    color: #c62828;
}

.priority-high {
    background: #fff0e0;
    color: #b86600;
}

.priority-medium {
    background: #fff8d9;
    color: #8c7100;
}

.priority-low {
    background: #e8f7ed;
    color: #287a3d;
}


/* =========================================
   STATUS BADGES
========================================= */

.action-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.status-open {
    background: #fff7e5;
    color: #0e1d2b;
}

.status-in_progress {
    background: #fff0e0;
    color: #b86600;
}

.status-completed {
    background: #e8f7ed;
    color: #287a3d;
}


/* =========================================
   TABLE VIEW BUTTON
========================================= */

#actionsTableBody .table-button {
    border: 1px solid #f2f5f7;
    background: #f7f5ff;
    color: #0e1d2b;
    border-radius: 8px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

#actionsTableBody .table-button:hover {
    background: #0e1d2b;
    color: #ffffff;
    border-color: #0e1d2b;
}


/* =========================================
   TABLE ROW HOVER
========================================= */

#actionsTableBody tr {
    transition: 0.15s ease;
}

#actionsTableBody tr:hover {
    background: #f7f9fa;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .action-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .action-filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .action-summary-grid {
        grid-template-columns: 1fr;
    }

    .action-filter-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   DASHBOARD SUPPLIER PERFORMANCE
   ========================================= */

.supplier-performance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
}

.supplier-performance-row:last-child {
    border-bottom: none;
}

.supplier-performance-row strong {
    display: block;
    font-size: 15px;
    color: #1f2937;
    margin-bottom: 5px;
}

.supplier-performance-date {
    display: block;
    font-size: 13px;
    color: #6b7280;
}

.supplier-score-section {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
}

.supplier-score-bar {
    width: 120px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.supplier-score-fill {
    height: 100%;
    border-radius: 10px;
}

.supplier-score {
    min-width: 45px;
    text-align: right;
}


/* =========================================
   SCORE COLOURS
   ========================================= */

.score-red {
    color: #dc2626;
}

.score-orange {
    color: #ea580c;
}

.score-yellow {
    color: #ca8a04;
}

.score-green {
    color: #16a34a;
}

.supplier-score-fill.score-red {
    background: #dc2626;
}

.supplier-score-fill.score-orange {
    background: #ea580c;
}

.supplier-score-fill.score-yellow {
    background: #eab308;
}

.supplier-score-fill.score-green {
    background: #16a34a;
}

.score-badge {
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.score-none {
    background: #f3f4f6;
    color: #6b7280;
}


/* =========================================
   DASHBOARD DEVELOPMENT ACTIONS
   ========================================= */

.dashboard-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-action-row:last-child {
    border-bottom: none;
}

.dashboard-action-title {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 5px;
}

.dashboard-action-meta {
    font-size: 13px;
    color: #6b7280;
}

.dashboard-action-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dashboard-priority {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.dashboard-priority.critical {
    background: #fee2e2;
    color: #dc2626;
}

.dashboard-priority.high {
    background: #ffedd5;
    color: #ea580c;
}

.dashboard-priority.medium {
    background: #fef3c7;
    color: #b45309;
}

.dashboard-priority.low {
    background: #dcfce7;
    color: #16a34a;
}

.dashboard-action-status {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}


/* =========================================
   MOBILE DASHBOARD
   ========================================= */

@media (max-width: 700px) {

    .supplier-performance-row,
    .dashboard-action-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .supplier-score-section {
        width: 100%;
    }

    .supplier-score-bar {
        flex: 1;
    }

    .dashboard-action-right {
        width: 100%;
        justify-content: flex-start;
    }
}
/* =========================================
   DASHBOARD STAT CARDS - PREMIUM LOOK
   ========================================= */

.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.stat-card::after {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -35px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.06);
}

.stat-card strong {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
}

.stat-card span {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}


/* =========================================
   WELCOME CARD
   ========================================= */

.welcome-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.welcome-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -80px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.07);
    pointer-events: none;
}

.welcome-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.welcome-card p {
    color: #6b7280;
    line-height: 1.6;
}


/* =========================================
   DASHBOARD SECTION HEADERS
   ========================================= */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.section-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}


/* =========================================
   VIEW ALL BUTTONS
   ========================================= */

.view-all-button {
    border: none;
    background: transparent;
    color: #a06a00;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.view-all-button:hover {
    background: #eff6ff;
}


/* =========================================
   QUICK ACTIONS
   ========================================= */

.quick-action {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.quick-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}


/* =========================================
   DASHBOARD CARD POLISH
   ========================================= */

.dashboard-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

@media (max-width: 700px) {

    .stat-card strong {
        font-size: 24px;
    }

    .welcome-card h2 {
        font-size: 20px;
    }
}
/* =========================================
   DASHBOARD MAIN LAYOUT UPGRADE
   ========================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #eef0f3;
}

.card-header h3 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.card-header p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.text-button {
    border: none;
    background: #eff6ff;
    color: #a06a00;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.text-button:hover {
    background: #dbeafe;
    transform: translateY(-1px);
}


/* =========================================
   QUICK ACTIONS
   ========================================= */

.quick-actions-card {
    margin-top: 24px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 22px 24px 24px;
}

.quick-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 7px;
    min-height: 130px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fafafa;
    transition: all 0.2s ease;
}

.quick-action:hover {
    background: #ffffff;
    border-color: #bfdbfe;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.quick-action span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eff6ff;
    font-size: 19px;
}

.quick-action strong {
    font-size: 14px;
    color: #111827;
}

.quick-action small {
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
}


/* =========================================
   EMPTY STATES
   ========================================= */

.empty-state {
    padding: 35px 24px;
    text-align: center;
}

.empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #f3f4f6;
    font-size: 23px;
}

.empty-state h4 {
    margin: 0 0 7px;
    font-size: 15px;
    color: #1f2937;
}

.empty-state p {
    max-width: 350px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}


/* =========================================
   RESPONSIVE DASHBOARD
   ========================================= */

@media (max-width: 1000px) {

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 750px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .card-header {
        padding: 18px;
    }
}
/* =========================================
   DASHBOARD STATISTICS - FINAL POLISH
   ========================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.stat-card {
    position: relative;
    padding: 22px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #a06a00;
}

.stat-card:nth-child(2)::before {
    background: #f0a81c;
}

.stat-card:nth-child(3)::before {
    background: #ea580c;
}

.stat-card:nth-child(4)::before {
    background: #16a34a;
}

.stat-card .stat-icon {
    margin-bottom: 16px;
}

.stat-card strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    font-weight: 750;
    color: #111827;
    margin-bottom: 7px;
}

.stat-card span {
    font-size: 13px;
    color: #6b7280;
}


/* Average score emphasis */

#averageScore {
    font-size: 32px;
}


/* Responsive */

@media (max-width: 1000px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }
}
/* Supplier Health Overview - Header */
.supplier-health-card .health-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #f8fbff, #f7f9fa);
    border: 1px solid #d5dde3;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

/* Title area */
.supplier-health-card .health-header > div {
    position: relative;
    padding-left: 16px;
}

/* Blue accent bar */
.supplier-health-card .health-header > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 5px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(180deg, #a06a00, #f0a81c);
}

/* Main title */
.supplier-health-card .health-header h3 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

/* Subtitle */
.supplier-health-card .health-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.4;
}

/* Latest assessments badge */
.supplier-health-card .health-updated {
    padding: 9px 15px;
    border-radius: 20px;
    background: #dbeafe;
    color: #a06a00;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid #bfdbfe;
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.health-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease;
}

.health-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.health-icon {
    font-size: 28px;
    line-height: 1;
}

.health-item strong {
    display: block;
    font-size: 25px;
    font-weight: 700;
    color: #1f2937;
}

.health-item span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.health-item.critical {
    border-left: 4px solid #ef4444;
}

.health-item.improvement {
    border-left: 4px solid #f97316;
}

.health-item.good {
    border-left: 4px solid #facc15;
}

.health-item.strong {
    border-left: 4px solid #22c55e;
}

@media (max-width: 900px) {
    .health-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .health-grid {
        grid-template-columns: 1fr;
    }
}
/* Welcome banner contrast */
.welcome-card h2,
.welcome-card h3,
.welcome-card h4,
.welcome-card p,
.welcome-card .welcome-label {
    color: white !important;
}

.welcome-card a,
.welcome-card button {
    background: #ffffff !important;
    color: #0e1d2b !important;
    border: none !important;
}

.welcome-card a:hover,
.welcome-card button:hover {
    background: #e8eefc !important;
    color: #0e1d2b !important;
}

/* =========================================
   SUPPLIER PERFORMANCE + DEVELOPMENT ACTIONS
   ========================================= */

.dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}

.dashboard-grid .dashboard-card {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}

.dashboard-grid .dashboard-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.dashboard-grid .dashboard-card h3 {
    font-size: 24px;
    line-height: 1.15;
}

.dashboard-grid .dashboard-card p {
    line-height: 1.4;
}

/* Keep the cards usable when the window is narrower */
@media (max-width: 1000px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================
   RECENT ASSESSMENTS
   ========================================= */

.recent-assessments-card {
    margin-top: 24px;
}

.recent-assessment-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 4px;
    border-bottom: 1px solid #e5e7eb;
}

.recent-assessment-row:last-child {
    border-bottom: none;
}

.recent-assessment-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7e5;
    border-radius: 12px;
    font-size: 22px;
    flex-shrink: 0;
}

.recent-assessment-info {
    flex: 1;
    min-width: 0;
}

.recent-assessment-info strong {
    display: block;
    font-size: 16px;
    color: #172033;
    margin-bottom: 5px;
}

.recent-assessment-info span {
    display: block;
    font-size: 13px;
    color: #64748b;
}

.recent-assessment-score {
    min-width: 70px;
    text-align: center;
}

.recent-assessment-score strong {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 10px;
    background: #fef3c7;
    color: #b45309;
    font-size: 15px;
}

.recent-assessment-score span {
    font-size: 13px;
    color: #64748b;
}

.recent-assessment-view {
    padding: 9px 16px;
    border: none;
    border-radius: 9px;
    background: #fff7e5;
    color: #162a3d;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.recent-assessment-view:hover {
    background: #162a3d;
    color: white;
}

/* Responsive */
@media (max-width: 650px) {

    .recent-assessment-row {
        gap: 10px;
    }

    .recent-assessment-info strong {
        font-size: 14px;
    }

    .recent-assessment-score {
        min-width: 55px;
    }

    .recent-assessment-view {
        padding: 8px 11px;
    }
}
/* =========================================
   SETTINGS PAGE LAYOUT
   ========================================= */

/* Make Settings use the same layout as the Dashboard */
.settings-page {
    display: flex !important;
    min-height: 100vh !important;
    position: relative !important;
}


/* Main content sits directly beside the sidebar */
.settings-page .settings-main {
    flex: 1 !important;
    width: auto !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
/* =========================================
   SETTINGS PAGE - MODERN DESIGN
   ========================================= */

/* Main settings area */
.settings-page .settings-main {
    flex: 1 !important;
    width: auto !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}
/* Settings header - match Dashboard header positioning */
.settings-page .top-header {
    height: 90px;
    background: white;
    border-bottom: 1px solid #e8eaf0;
    padding: 0 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0 !important;
}

.settings-page .top-header h1 {
    margin: 0 0 5px !important;
}
.settings-page .top-header {
    margin-top: 0 !important;
    padding-left: 22px !important;
}

/* Settings heading */
.settings-page .settings-main h1 {
    font-size: 36px;
    font-weight: 800;
    color: #0e1d2b;
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}

.settings-page .settings-main .top-header p {
    color: #64748b;
    font-size: 16px;
    margin: 0;
}

/* Main content spacing */
.settings-page .settings-main .content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
}
.settings-page .settings-main .content .settings-card {
    width: calc(100% - 20px) !important;
    max-width: none !important;
}

/* Section headings */
.settings-page .settings-main h2 {
    color: #0e1d2b;
    font-size: 27px;
    font-weight: 800;
    margin: 28px 0 4px;
    letter-spacing: -0.3px;
}

.settings-page .settings-main h2 + p {
    color: #64748b;
    margin-top: 0;
    margin-bottom: 18px;
}

/* Settings cards / sections */
.settings-page .settings-card,
.settings-page .settings-section,
.settings-page .settings-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 26px;
    margin-bottom: 24px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

/* Form labels */
.settings-page label {
    display: block;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 7px;
}

/* Inputs */
.settings-page input,
.settings-page select {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #1e293b;
    font-size: 15px;
    transition: all 0.2s ease;
}

/* Input focus */
.settings-page input:focus,
.settings-page select:focus {
    outline: none;
    border-color: #162a3d;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

/* Space between form fields */
.settings-page input + label,
.settings-page select + label {
    margin-top: 18px;
}

/* Buttons */
.settings-page button {
    font-family: inherit;
}

.settings-page button:not(.nav-item) {
    border: none;
    border-radius: 10px;
    background: #162a3d;
    color: white;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-page button:not(.nav-item):hover {
    background: #0e1d2b;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(30, 58, 138, 0.2);
}

/* Disabled/read-only inputs */
.settings-page input[readonly] {
    background: #f1f5f9;
    color: #64748b;
    cursor: default;
}

/* Account information area */
.settings-page .account-info {
    background: #f8fafc;
    border-radius: 12px;
    padding: 18px;
    border: 1px solid #e2e8f0;
}

/* Improve vertical spacing throughout settings */
.settings-page .content > * {
    box-sizing: border-box;
}

/* Mobile / smaller window */
@media (max-width: 1000px) {
    .settings-page .settings-main {
    padding: 0 !important;
    box-sizing: border-box;
    }

    .settings-page .settings-main .content {
        max-width: none;
    }

    .settings-page .settings-main h1 {
        font-size: 28px;
    }

    .settings-page .settings-main h2 {
        font-size: 24px;
    }
}
/* Make Settings cards wider */
.settings-page .settings-card,
.settings-page .settings-section,
.settings-page .settings-panel {
    width: 100% !important;
    max-width: 1200px !important;
    box-sizing: border-box;
}
/* Make Settings cards properly wide */
.settings-page .settings-main section.content .settings-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.settings-page .settings-main .content {
    padding: 35px 24px 50px !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* =========================================
   SUPPLIER PORTAL - MATCH SETTINGS LAYOUT
   ========================================= */


.supplier-portal-page .top-header {
    margin-top: 0 !important;
    padding: 0 0 0 22px !important;
    box-sizing: border-box;
}

.supplier-portal-page .top-header h1 {
    margin: 0 0 5px !important;
}

.supplier-portal-page .content {
    padding: 15px 10px 50px !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.supplier-portal-page .welcome-card,
.supplier-portal-page .dashboard-card,
.supplier-portal-page .stats-grid {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

@media (max-width: 1000px) {

    .supplier-portal-page .sidebar {
        flex: 0 0 220px !important;
        width: 220px !important;
        min-width: 220px !important;
    }

    .supplier-portal-page .top-header {
        padding-left: 22px !important;
    }

    .supplier-portal-page .content {
        padding: 15px 10px 50px !important;
    }

}
/* Supplier Portal - match Settings header */

.supplier-portal-page .top-header {
    background: white !important;
    padding: 25px 0 20px 22px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
}

.supplier-portal-page .top-header h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin: 0 0 5px !important;
}

.supplier-portal-page .top-header p {
    margin: 0 !important;
    color: #64748b !important;
}
/* Supplier Portal - Dashboard-style header */

.supplier-portal-page .topbar {
    width: 100% !important;
    box-sizing: border-box !important;
}

.supplier-portal-page .topbar h1 {
    font-size: 27px !important;
    line-height: 1.2 !important;
    margin: -1px 0 3px !important;
}

.supplier-portal-page .topbar p {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.supplier-portal-page .user-area {
    flex-shrink: 0 !important;
}
.supplier-portal-page .welcome-card {
    padding: 48px !important;
}
/* SUPPLIER PORTAL - WELCOME CARD SIZE */

.supplier-portal-page section.content {
    padding: 20px 20px 50px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.supplier-portal-page section.content .welcome-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 272px !important;
    box-sizing: border-box !important;
}
/* =========================================
   PORTAL USERS MODAL
   ========================================= */

.portal-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
}

.portal-user-row > div {
    flex: 1;
}

.portal-user-row strong {
    display: block;
    font-size: 16px;
    color: #172033;
    margin-bottom: 5px;
}

.portal-user-row p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    text-transform: capitalize;
}

.portal-user-row .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}
.badge-active {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.badge-inactive {
    background: #fee2e2 !important;
    color: #991b1b !important;
}
#addPortalUserForm {
    margin-top: 22px !important;
    padding: 22px !important;
    background: #f7f9fc !important;
    border: 1px solid #e2e7ef !important;
    border-radius: 14px !important;
}

#addPortalUserForm h3 {
    margin: 0 0 18px 0 !important;
    font-size: 20px !important;
    color: #0e1d2b !important;
}

#addPortalUserForm label {
    display: block !important;
    margin: 12px 0 6px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

#addPortalUserForm input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 13px !important;
    border: 1px solid #d5dbe5 !important;
    border-radius: 9px !important;
    background: white !important;
    font-size: 14px !important;
    color: #111827 !important;
    outline: none !important;
}

#addPortalUserForm input:focus {
    border-color: #162a3d !important;
    box-shadow: 0 0 0 3px rgba(36, 59, 128, 0.1) !important;
}

#addPortalUserForm button {
    margin-top: 16px !important;
    margin-right: 8px !important;
}

#addPortalUserForm #cancelPortalInviteButton {
    background: white !important;
    color: #374151 !important;
    border: 1px solid #d5dbe5 !important;
}
#addPortalUserButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border: none !important;
    border-radius: 9px !important;
    background: #162a3d !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin: 18px 0 0 0 !important;
}

#addPortalUserButton:hover {
    opacity: 0.9 !important;
}

#sendPortalInviteButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 17px !important;
    border: none !important;
    border-radius: 9px !important;
    background: #162a3d !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

#sendPortalInviteButton:hover {
    opacity: 0.9 !important;
}

#sendPortalInviteButton:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

#cancelPortalInviteButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 17px !important;
    border: 1px solid #d5dbe5 !important;
    border-radius: 9px !important;
    background: white !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
/* Supplier portal welcome-card styling */
.supplier-portal-page section.content .welcome-card {
    background: linear-gradient(135deg, #0e1d2b, #162a3d) !important;
    color: white !important;
}

.supplier-portal-page section.content .welcome-card h2,
.supplier-portal-page section.content .welcome-card h3,
.supplier-portal-page section.content .welcome-card h4,
.supplier-portal-page section.content .welcome-card p,
.supplier-portal-page section.content .welcome-card .welcome-label {
    color: white !important;
}

.supplier-settings-page {
    background: #f4f7fb !important;
}
.supplier-settings-page .welcome-card {
    width: 100% !important;
    min-height: 220px !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background: #0e1d2b !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
}

.supplier-settings-page .welcome-card h2 {
    margin: 0 0 12px 0 !important;
    color: white !important;
    font-size: 30px !important;
}

.supplier-settings-page .welcome-card p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
}

.supplier-settings-page .card {
    background: white !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin-top: 24px !important;
    box-shadow: 0 4px 18px rgba(23, 37, 84, 0.08) !important;
    box-sizing: border-box !important;
}

.supplier-settings-page .section-header {
    margin-bottom: 24px !important;
}

.supplier-settings-page .section-header h2 {
    margin: 0 0 6px 0 !important;
    color: #0e1d2b !important;
    font-size: 22px !important;
}

.supplier-settings-page .section-header p {
    margin: 0 !important;
    color: #6b7280 !important;
    font-size: 14px !important;
}

.supplier-settings-page .form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
    margin-bottom: 24px !important;
}

.supplier-settings-page .form-group {
    display: flex !important;
    flex-direction: column !important;
}

.supplier-settings-page .form-group label {
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.supplier-settings-page .form-group input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border: 1px solid #d5dbe5 !important;
    border-radius: 9px !important;
    background: white !important;
    color: #111827 !important;
    font-size: 14px !important;
}

.supplier-settings-page .form-group input:disabled {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
}

.supplier-settings-page .btn-primary {
    padding: 11px 18px !important;
    border: none !important;
    border-radius: 9px !important;
    background: #162a3d !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.supplier-settings-page .btn-primary:hover {
    opacity: 0.9 !important;
}

.supplier-settings-page .btn-secondary {
    padding: 11px 18px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.supplier-settings-page #settingsMessage {
    margin-bottom: 18px !important;
}

.supplier-settings-page .info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

.supplier-settings-page .info-grid > div {
    padding: 18px !important;
    background: #f7f9fc !important;
    border: 1px solid #e5e9f0 !important;
    border-radius: 12px !important;
}

.supplier-settings-page .info-label {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.supplier-settings-page .info-grid strong {
    color: #0e1d2b !important;
    font-size: 16px !important;
}

@media (max-width: 700px) {

    .supplier-settings-page .form-grid,
    .supplier-settings-page .info-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Supplier Settings - final layout fix */

body.supplier-settings-page {
    display: flex !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

body.supplier-settings-page .content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 35px 24px 50px !important;
    box-sizing: border-box !important;
}

body.supplier-settings-page .welcome-card,
body.supplier-settings-page .dashboard-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
/* FINAL SUPPLIER SETTINGS LAYOUT */

body.supplier-settings-page {
    display: flex !important;
    width: 100vw !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

body.supplier-settings-page > .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    z-index: 100 !important;
}

body.supplier-settings-page > .main-content {
    margin-left: 0 !important;
    width: calc(100vw - 250px) !important;
    min-width: 0 !important;
    flex: none !important;
}

body.supplier-settings-page > .main-content > .content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 35px 40px 50px !important;
    box-sizing: border-box !important;
}

body.supplier-settings-page .welcome-card {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 235px !important;
    box-sizing: border-box !important;
}

body.supplier-settings-page .dashboard-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
/* ==========================================
   SUPPLIER SETTINGS PAGE
========================================== */

.supplier-settings-page {
    background: #f5f7fb !important;
}


/* SETTINGS CONTENT */

.supplier-settings-content {
    padding: 35px 40px 50px !important;
    width: 100% !important;
    max-width: 1500px !important;
    box-sizing: border-box !important;
}


/* SETTINGS CARDS */

.supplier-settings-page .settings-card {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 28px 30px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 16px rgba(23, 37, 84, 0.06) !important;
    box-sizing: border-box !important;
}


/* CARD HEADER */

.supplier-settings-page .settings-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 25px !important;
}


.supplier-settings-page .settings-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #fff7e5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
}


.supplier-settings-page .settings-card-header h2 {
    margin: 0 0 5px 0 !important;
    color: #0e1d2b !important;
    font-size: 22px !important;
}


.supplier-settings-page .settings-card-header p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
}


/* FORM */

.supplier-settings-page .settings-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
    margin-bottom: 24px !important;
}


.supplier-settings-page .settings-form-group {
    display: flex !important;
    flex-direction: column !important;
}


.supplier-settings-page .settings-form-group label {
    margin-bottom: 8px !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}


.supplier-settings-page .settings-form-group input {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: white !important;
    color: #0e1d2b !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    outline: none !important;
}


.supplier-settings-page .settings-form-group input:focus {
    border-color: #162a3d !important;
    box-shadow: 0 0 0 3px rgba(36, 59, 128, 0.1) !important;
}


.supplier-settings-page .settings-form-group input:disabled {
    background: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
}


/* BUTTONS */

.supplier-settings-page .settings-primary-button {
    padding: 11px 20px !important;
    border: none !important;
    border-radius: 9px !important;
    background: #162a3d !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}


.supplier-settings-page .settings-primary-button:hover {
    opacity: 0.9 !important;
}


.supplier-settings-page .settings-primary-button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}


.supplier-settings-page .settings-secondary-button {
    padding: 11px 20px !important;
    border: none !important;
    border-radius: 9px !important;
    background: #162a3d !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}


.supplier-settings-page .settings-secondary-button:hover {
    background: #f8fafc !important;
}


/* SUPPLIER ACCOUNT */

.supplier-settings-page .supplier-account-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border-top: 1px solid #e2e8f0 !important;
}


.supplier-settings-page .supplier-detail {
    padding: 22px 18px 8px 0 !important;
}


.supplier-settings-page .supplier-detail + .supplier-detail {
    border-left: 1px solid #e2e8f0 !important;
    padding-left: 28px !important;
}


.supplier-settings-page .supplier-detail span {
    display: block !important;
    margin-bottom: 8px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}


.supplier-settings-page .supplier-detail strong {
    color: #0e1d2b !important;
    font-size: 17px !important;
}


.supplier-settings-page .portal-active {
    color: #16a34a !important;
}


.supplier-settings-page .portal-inactive {
    color: #dc2626 !important;
}


/* MESSAGES */

.supplier-settings-page .settings-message {
    margin-bottom: 18px !important;
    padding: 11px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}


.supplier-settings-page .settings-message.success {
    background: #ecfdf5 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}


.supplier-settings-page .settings-message.error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}


/* MOBILE */

@media (max-width: 800px) {

    .supplier-settings-page .settings-form-grid,
    .supplier-settings-page .supplier-account-details {
        grid-template-columns: 1fr !important;
    }

    .supplier-settings-page .supplier-detail + .supplier-detail {
        border-left: none !important;
        border-top: 1px solid #e2e8f0 !important;
        padding-left: 0 !important;
    }

    .supplier-settings-content {
        padding: 25px 20px 40px !important;
    }

}
/* SUPPLIER SETTINGS - MATCH NORMAL SETTINGS PAGE */

body.supplier-settings-page {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}


/* SIDEBAR */

body.supplier-settings-page > .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    height: 100vh !important;
    margin: 0 !important;
}


/* MAIN AREA */

body.supplier-settings-page > .main-content {
    position: relative !important;
    margin-left: 220px !important;
    padding: 0 !important;
    width: calc(100% - 220px) !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 !important;
}


/* TOPBAR */

body.supplier-settings-page > .main-content > .topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}


/* SETTINGS CONTENT */

body.supplier-settings-page .supplier-settings-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 35px 28px 50px !important;
    box-sizing: border-box !important;
}


/* SETTINGS BOXES */

body.supplier-settings-page .settings-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 24px 0 !important;
    box-sizing: border-box !important;
}


/* REMOVE ANY OLD WIDTH LIMITS */

body.supplier-settings-page .settings-card,
body.supplier-settings-page .settings-form-grid,
body.supplier-settings-page .supplier-account-details {
    max-width: none !important;
}
/* SUPPLIER SETTINGS - FINAL SIZE FIX */

body.supplier-settings-page > .main-content {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
}

/* Make the actual content section wide */
body.supplier-settings-page > .main-content > .content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 25px 28px 50px !important;
    box-sizing: border-box !important;
}

/* Make every settings box use the available width */
body.supplier-settings-page .settings-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Make the topbar span the whole main area */
body.supplier-settings-page > .main-content > .topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
/* ASSESSMENT TOPBAR - BETTER HALF-SCREEN LAYOUT */

@media (max-width: 900px) {

    body.assessment-page .topbar {
        padding: 18px 24px !important;
        min-height: 70px !important;
    }

    body.assessment-page .topbar h1 {
        font-size: 24px !important;
        line-height: 1.15 !important;
        margin-bottom: 3px !important;
    }

    body.assessment-page .topbar p {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    body.assessment-page .user-info strong {
        font-size: 14px !important;
    }

    body.assessment-page .user-info span {
        font-size: 12px !important;
    }

    body.assessment-page .user-avatar {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

}
/* SUPPLIER DEVELOPMENT ACTIONS PAGE */

body.supplier-development-actions-page {
    overflow-x: hidden;
}

body.supplier-development-actions-page .welcome-card {
    display: block !important;
    width: 100% !important;
    min-height: 160px !important;
    padding: 28px 28px !important;
    box-sizing: border-box !important;
}

body.supplier-development-actions-page .welcome-card h2 {
    margin: 0 0 10px 0 !important;
    font-size: 30px !important;
}

body.supplier-development-actions-page .welcome-card p {
    margin: 0 !important;
    max-width: 700px !important;
    line-height: 1.6 !important;
}

body.supplier-development-actions-page .dashboard-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 35px 40px !important;
}

body.supplier-development-actions-page .card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
}

body.supplier-development-actions-page .card-header h3 {
    margin: 0 0 6px 0 !important;
    font-size: 24px !important;
}

body.supplier-development-actions-page .card-header p {
    margin: 0 !important;
}

body.supplier-development-actions-page .stat-number {
    font-size: 32px !important;
    font-weight: 700 !important;
}

body.supplier-development-actions-page .dashboard-action-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
    padding: 25px 0 !important;
    border-top: 1px solid #e5e7eb !important;
}

body.supplier-development-actions-page .dashboard-action-row strong {
    display: block !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

body.supplier-development-actions-page .dashboard-action-row p {
    margin: 0 0 8px 0 !important;
    line-height: 1.5 !important;
}

body.supplier-development-actions-page .dashboard-action-row small {
    font-weight: 600 !important;
}

body.supplier-development-actions-page .action-meta {
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

body.supplier-development-actions-page .action-meta span {
    padding: 7px 12px !important;
    border-radius: 20px !important;
    background: #f1f5f9 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
/* DEVELOPMENT ACTION PRIORITY BADGES */

body.supplier-development-actions-page .priority-badge {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Critical */
body.supplier-development-actions-page .priority-critical {
    color: #b91c1c !important;
    background: #fee2e2 !important;
}

/* High */
body.supplier-development-actions-page .priority-high {
    color: #b45309 !important;
    background: #fef3c7 !important;
}

/* Medium */
body.supplier-development-actions-page .priority-medium {
    color: #a16207 !important;
    background: #fef9c3 !important;
}

/* Low */
body.supplier-development-actions-page .priority-low {
    color: #15803d !important;
    background: #dcfce7 !important;
}


/* DEVELOPMENT ACTION STATUS BADGES */

body.supplier-development-actions-page .status-badge {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Open */
body.supplier-development-actions-page .status-open {
    color: #0e1d2b !important;
    background: #fff7e5 !important;
}

/* In Progress */
body.supplier-development-actions-page .status-in_progress {
    color: #f0a81c !important;
    background: #fff7e5 !important;
}

/* Completed */
body.supplier-development-actions-page .status-completed {
    color: #15803d !important;
    background: #dcfce7 !important;
}
/* =========================================
   SUPPLIER DEVELOPMENT ACTION DETAILS
========================================= */

body.supplier-development-actions-page .dashboard-action-row {
    align-items: flex-start !important;
    padding: 28px 0 !important;
    gap: 30px !important;
}

body.supplier-development-actions-page .dashboard-action-row > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
}

body.supplier-development-actions-page .dashboard-action-row > div:first-child > strong {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}

body.supplier-development-actions-page .dashboard-action-row > div:first-child > p {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
}

body.supplier-development-actions-page .dashboard-action-row > div:first-child > small {
    display: inline-block !important;
    color: #0e1d2b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: #f7f9fa !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
}

/* Owner + due date */

body.supplier-development-actions-page .supplier-action-details {
    display: flex !important;
    gap: 28px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eef0f4 !important;
}

body.supplier-development-actions-page .supplier-action-details span {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    color: #64748b !important;
    font-size: 13px !important;
}

body.supplier-development-actions-page .supplier-action-details span strong {
    font-size: 11px !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.supplier-development-actions-page .supplier-action-details span {
    font-weight: 600 !important;
    color: #334155 !important;
}

/* Keep badges together on the right */

body.supplier-development-actions-page .action-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    padding-top: 2px !important;
}

/* Supplier Development Actions - top right user area */

body.supplier-development-actions-page .topbar .user-area {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 13px !important;
}

body.supplier-development-actions-page .topbar .user-info {
    display: block !important;
    text-align: right !important;
}

body.supplier-development-actions-page .topbar .user-info strong {
    display: block !important;
    margin: 0 !important;
}

body.supplier-development-actions-page .topbar .user-info span {
    display: block !important;
    margin-top: 3px !important;
}

body.supplier-development-actions-page .topbar .user-avatar {
    flex-shrink: 0 !important;
}
/* Smaller topbar title on narrow screens */

@media (max-width: 900px) {
    body.supplier-development-actions-page .topbar h1 {
        font-size: 24px !important;
        line-height: 1.15 !important;
        margin-bottom: 4px !important;
    }

    body.supplier-development-actions-page .topbar p {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
}
/* Supplier Development Actions - cleaner action cards */

body.supplier-development-actions-page .dashboard-action-row {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    padding: 24px 26px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

body.supplier-development-actions-page .dashboard-action-row:first-child {
    border-top: 1px solid #e5e7eb !important;
}

body.supplier-development-actions-page .dashboard-action-row > div:first-child > strong {
    color: #172033 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

body.supplier-development-actions-page .dashboard-action-row > div:first-child > p {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 6px 0 12px !important;
}

body.supplier-development-actions-page .dashboard-action-row > div:first-child > small {
    color: #0e1d2b !important;
    background: #f7f9fa !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

body.supplier-development-actions-page .supplier-action-details {
    margin-top: 17px !important;
    padding-top: 15px !important;
    border-top: 1px solid #eef0f4 !important;
}

body.supplier-development-actions-page .action-meta {
    gap: 8px !important;
}

body.supplier-development-actions-page .action-meta span {
    font-size: 11px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
/* =========================================================
   RESULTS & TRENDS - COLLAPSIBLE SIDEBAR
   ========================================================= */

/* Toggle button */
.sidebar-toggle {
    position: absolute;
    top: 18px;
    left: 180px;

    width: 32px;
    height: 32px;

    border: none;
    border-radius: 8px;

    background: rgba(255,255,255,0.12);
    color: white;

    font-size: 18px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 20;
}

.sidebar-toggle:hover {
    background: rgba(255,255,255,0.2);
}



/* =========================================
   SUPPLIERS TABLE - KEEP ACTIONS TOGETHER
   ========================================= */

.supplier-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.supplier-table-wrapper table {
    min-width: 1050px;
}

.supplier-table-wrapper th:last-child,
.supplier-table-wrapper td:last-child {
    white-space: nowrap;
    min-width: 150px;
}

.supplier-table-wrapper td:last-child .secondary-button,
.supplier-table-wrapper td:last-child .table-button {
    display: inline-flex !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    margin-right: 6px !important;
}

@media (max-width: 900px) {

    .supplier-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .supplier-table-wrapper table {
        min-width: 1050px !important;
    }

    .supplier-table-wrapper th:last-child,
    .supplier-table-wrapper td:last-child {
        white-space: nowrap !important;
        min-width: 160px !important;
    }

    .supplier-table-wrapper td:last-child .secondary-button,
    .supplier-table-wrapper td:last-child .table-button {
        display: inline-flex !important;
        white-space: nowrap !important;
    }
}
/* =========================================
   SUPPLIERS TABLE - HORIZONTAL SCROLL
   ========================================= */

.supplier-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.supplier-table-wrapper table {
    min-width: 1050px;
}

.supplier-table-wrapper th:last-child,
.supplier-table-wrapper td:last-child {
    white-space: nowrap;
    min-width: 160px;
}

.supplier-table-wrapper td:last-child .secondary-button,
.supplier-table-wrapper td:last-child .table-button {
    display: inline-flex !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    margin-right: 6px !important;
}

@media (max-width: 900px) {

    .supplier-table-wrapper {
        overflow-x: auto !important;
    }

    .supplier-table-wrapper table {
        min-width: 1050px !important;
    }

    .supplier-table-wrapper th:last-child,
    .supplier-table-wrapper td:last-child {
        white-space: nowrap !important;
        min-width: 160px !important;
    }

    .supplier-table-wrapper td:last-child .secondary-button,
    .supplier-table-wrapper td:last-child .table-button {
        display: inline-flex !important;
        white-space: nowrap !important;
    }
}
/* =========================================
   SETTINGS - ACCOUNT INFORMATION
   ========================================= */

.settings-page .account-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.settings-page .account-info-row {
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
}

.settings-page .account-label {
    display: flex;
    align-items: center;
    gap: 15px;
}

.settings-page .account-label > span {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.settings-page .account-label > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.settings-page .account-label small {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.settings-page .account-label strong {
    font-size: 15px;
    color: #0e1d2b;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.settings-page .account-label .status-active {
    color: #15803d;
}

.settings-page .account-actions {
    padding-top: 22px;
}
/* Settings sidebar collapsed */
@media (max-width: 900px) {

    body.settings-page.sidebar-collapsed > .sidebar {
        width: 72px !important;
        min-width: 72px !important;
        padding: 28px 10px !important;
    }

    /* Centre the logo */
    body.settings-page.sidebar-collapsed > .sidebar .logo {
        justify-content: center !important;
    }

    /* Hide the logo text */
    body.settings-page.sidebar-collapsed > .sidebar .logo > div:not(:first-child) {
        display: none !important;
    }

    /* Hide navigation text */
    body.settings-page.sidebar-collapsed > .sidebar .nav-item {
        font-size: 0 !important;
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Keep navigation icons visible */
    body.settings-page.sidebar-collapsed > .sidebar .nav-item span {
        display: inline-flex !important;
        font-size: 20px !important;
    }

}
body.settings-page .sidebar-toggle {
    opacity: 0.5 !important;
    visibility: visible !important;
}
body.settings-page .sidebar-toggle {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #e5e7eb !important;
}

/* =========================================
   SUPPLIER DEVELOPMENT ACTIONS
   ========================================= */

body.supplier-development-actions-page {
    display: flex !important;
    min-height: 100vh !important;
    height: auto !important;
    align-items: stretch !important;
}


/* =========================================
   SUPPLIER DEVELOPMENT ACTIONS - CLEAN LAYOUT
   ========================================= */

body.supplier-development-actions-page .content {
    padding: 20px 20px 45px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Smaller welcome card */
@media (max-width: 900px) {

    body.supplier-portal-page.supplier-development-actions-page {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

}

body.supplier-development-actions-page .welcome-card h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 0 0 12px !important;
}

body.supplier-development-actions-page .welcome-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Main actions card */
body.supplier-development-actions-page .dashboard-card {
    padding: 28px 32px !important;
    width: 100% !important;
    margin: 20px 0 0 0 !important;
    box-sizing: border-box !important;
}

body.supplier-development-actions-page .card-header {
    margin-bottom: 18px !important;
}

body.supplier-development-actions-page .card-header h3 {
    font-size: 22px !important;
}

body.supplier-development-actions-page .stat-number {
    font-size: 28px !important;
}
@media (min-width: 900px) {
    body.supplier-development-actions-page .welcome-card {
        min-height: 0 !important;
        height: 160px !important;
        max-height: 160px !important;
        flex: none !important;
        box-sizing: border-box !important;
    }
}
@media (min-width: 900px) {

    body.supplier-portal-page.supplier-development-actions-page section.content .welcome-card {
        min-height: 0 !important;
        height: 160px !important;
        max-height: 160px !important;
    }

}
/* =========================================
   SUPPLIER PORTAL - MY PROGRESS
   WIDE SCREEN WELCOME CARD
   ========================================= */

@media (min-width: 900px) {

    body.supplier-portal-page:not(.supplier-development-actions-page) section.content .welcome-card {
        min-height: 160px !important;
        height: 160px !important;
        max-height: 160px !important;
        box-sizing: border-box !important;
    }

}
@media (max-width: 900px) {

    body.supplier-portal-page:not(.supplier-development-actions-page) .welcome-card {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.supplier-portal-page:not(.supplier-development-actions-page) .welcome-card > div {
        transform: translate(-15px, -31px) !important;
    }

}


/* =========================================
   SUPPLIER SETTINGS - FIX CONTENT POSITION
   ========================================= */

body.supplier-settings-page {
    display: block !important;
    min-height: 100vh !important;
}

body.supplier-settings-page > .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    height: 100vh !important;
    z-index: 1000 !important;
}

body.supplier-settings-page > .main-content {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.supplier-settings-page > .main-content > .topbar {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

body.supplier-settings-page .supplier-settings-content {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
/* =========================================
   SUPPLIER SETTINGS - COLLAPSIBLE SIDEBAR
   ========================================= */

body.supplier-settings-page > .sidebar {
    transition: width 0.25s ease, min-width 0.25s ease !important;
}

body.supplier-settings-page.sidebar-collapsed > .sidebar {
    width: 72px !important;
    min-width: 72px !important;
}

body.supplier-settings-page.sidebar-collapsed > .sidebar .logo {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.supplier-settings-page.sidebar-collapsed > .sidebar .logo > div:not(.logo-icon) {
    display: none !important;
}

body.supplier-settings-page.sidebar-collapsed > .sidebar .nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
}

body.supplier-settings-page.sidebar-collapsed > .sidebar .nav-item span {
    display: inline-flex !important;
    width: auto !important;
    font-size: 20px !important;
}

body.supplier-settings-page.sidebar-collapsed > .main-content {
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
}
/* =========================================================
   SUPPLIER PORTAL - SECTION TITLE HEADERS
   ========================================================= */

body.supplier-portal-page .supplier-title-header {
    width: 100%;
    min-height: 125px;

    margin-bottom: 25px !important;
    padding: 24px 28px !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: linear-gradient(
        135deg,
        #f8fbff,
        #f2f5f7
    ) !important;

    border: 1px solid #d5dde3 !important;
    border-radius: 20px !important;

    box-shadow:
        0 5px 18px rgba(37, 99, 235, 0.06) !important;

    box-sizing: border-box;
}


/* LEFT SIDE */

body.supplier-portal-page .supplier-title-left {
    display: flex;
    align-items: center;
    gap: 22px;

    min-width: 0;
}


/* BLUE VERTICAL LINE */

body.supplier-portal-page .supplier-title-accent {
    width: 9px;
    min-width: 9px;
    height: 88px;

    border-radius: 10px;

    background: linear-gradient(
        180deg,
        #a06a00,
        #f0a81c
    );
}


/* TITLE */

body.supplier-portal-page .supplier-title-header h3 {
    margin: 0 0 8px !important;

    color: #172033 !important;

    font-size: 30px !important;
    line-height: 1.15 !important;

    font-weight: 800 !important;

    letter-spacing: -0.7px !important;
}


/* SUBTITLE */

body.supplier-portal-page .supplier-title-header p {
    margin: 0 !important;

    color: #64748b !important;

    font-size: 16px !important;
    line-height: 1.4 !important;

    font-weight: 500 !important;
}


/* RIGHT-HAND BADGE */

body.supplier-portal-page .supplier-title-badge {
    flex-shrink: 0;

    padding: 14px 28px;

    border-radius: 999px;

    background: #f2f5f7;

    border: 2px solid #bfdbfe;

    color: #a06a00;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    body.supplier-portal-page .supplier-title-header {
        min-height: auto;
        padding: 22px !important;
    }

    body.supplier-portal-page .supplier-title-header h3 {
        font-size: 25px !important;
    }

    body.supplier-portal-page .supplier-title-header p {
        font-size: 14px !important;
    }

    body.supplier-portal-page .supplier-title-badge {
        padding: 11px 18px;
        font-size: 12px;
    }

}


@media (max-width: 600px) {

    body.supplier-portal-page .supplier-title-header {
        align-items: flex-start;
        gap: 15px;
    }

    body.supplier-portal-page .supplier-title-left {
        gap: 14px;
    }

    body.supplier-portal-page .supplier-title-accent {
        width: 6px;
        min-width: 6px;
        height: 70px;
    }

    body.supplier-portal-page .supplier-title-header h3 {
        font-size: 21px !important;
    }

    body.supplier-portal-page .supplier-title-header p {
        font-size: 12px !important;
    }

    body.supplier-portal-page .supplier-title-badge {
        display: none;
    }

}


body.supplier-portal-page .logo {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

body.supplier-portal-page .nav-item {
    padding-left: 11px !important;
    padding-right: 11px !important;
}
/* =========================================================
   DASHBOARD - SEPARATE TITLE BOX FROM CONTENT BOX
   ========================================================= */


/* Remove the old combined-card appearance */
.dashboard-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    padding: 0 !important;

    overflow: visible !important;
}


/* =========================================================
   TITLE BOX
   ========================================================= */

.dashboard-card .card-header {
    position: relative !important;

    width: 100% !important;
    min-height: 118px !important;

    margin: 0 0 18px 0 !important;

    padding: 24px 28px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    background: linear-gradient(
        135deg,
        #f7f9fa 0%,
        #f7f9fa 100%
    ) !important;

    border: 1px solid #d5dde3 !important;

    border-radius: 20px !important;

    box-shadow:
        0 4px 12px rgba(37, 99, 235, 0.06) !important;
}


/* =========================================================
   BLUE VERTICAL LINE
   ========================================================= */

.dashboard-card .card-header > div:first-child {
    position: relative !important;

    flex: 1 !important;

    padding-left: 20px !important;
}


/* Match dashboard section headers to Supplier Health Overview */

.dashboard-card .card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 22px 24px !important;
    margin-bottom: 20px !important;

    background: linear-gradient(
        135deg,
        #f8fbff,
        #f7f9fa
    ) !important;

    border: 1px solid #d5dde3 !important;
    border-radius: 16px !important;

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;

    min-height: auto !important;
    box-sizing: border-box !important;
}


/* Match the Supplier Health title size */

.dashboard-card .card-header h3 {
    margin: 0 0 5px !important;

    font-size: 25px !important;
    line-height: 1.2 !important;

    font-weight: 700 !important;

    letter-spacing: -0.3px !important;

    color: #172033 !important;
}


/* Match the subtitle */

.dashboard-card .card-header p {
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.4 !important;

    color: #64748b !important;
}


/* Keep the blue vertical accent */

.dashboard-card .card-header > div:first-child {
    position: relative !important;
    padding-left: 17px !important;
}

.dashboard-card .card-header > div:first-child::before {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 6px !important;
    height: 48px !important;

    border-radius: 8px !important;

    background: #4f8df7 !important;
}


/* Keep View All on the right */

.dashboard-card .card-header .text-button {
    flex-shrink: 0 !important;
    align-self: center !important;
    margin-left: auto !important;
}
/* =========================================================
   QUICK ACTIONS - KEEP 2 COLUMNS ON NARROW SCREENS
   ========================================================= */

.quick-actions {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 16px !important;
}


/* Only switch to one column on very small phones */

@media (max-width: 500px) {

    .quick-actions {
        grid-template-columns: 1fr !important;
    }

}
.current-performance-card {
    margin-top: 20px !important;
}
/* =========================================================
   RESTORE WHITE CONTENT BOXES
   ========================================================= */

/* Keep the title/header separate from the white content */
.dashboard-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* SUPPLIER PERFORMANCE CONTENT */
.dashboard-card > #supplierPerformance {
    background: #ffffff !important;

    border: 1px solid #e3e8f0 !important;
    border-radius: 20px !important;

    padding: 28px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.05) !important;
}


/* DEVELOPMENT ACTIONS CONTENT */
.dashboard-card > #developmentActions {
    background: #ffffff !important;

    border: 1px solid #e3e8f0 !important;
    border-radius: 20px !important;

    padding: 28px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.05) !important;
}


/* RECENT ASSESSMENTS CONTENT */
.dashboard-card > #recentAssessmentsList {
    background: #ffffff !important;

    border: 1px solid #e3e8f0 !important;
    border-radius: 20px !important;

    padding: 28px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.05) !important;
}


/* QUICK ACTIONS CONTENT */
.dashboard-card > .quick-actions {
    background: #ffffff !important;

    border: 1px solid #e3e8f0 !important;
    border-radius: 20px !important;

    padding: 28px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.05) !important;
}
/* =========================================
   DESKTOP SIDEBAR COLLAPSE
   ========================================= */

.dashboard.sidebar-collapsed .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    padding: 28px 10px !important;
}

.dashboard.sidebar-collapsed .logo {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dashboard.sidebar-collapsed .logo h2,
.dashboard.sidebar-collapsed .logo span {
    display: none !important;
}

.dashboard.sidebar-collapsed .nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
}

.dashboard.sidebar-collapsed .nav-item span {
    display: inline-flex !important;
    width: auto !important;
    font-size: 20px !important;
}

.dashboard.sidebar-collapsed .main-content {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
}
/* =========================================
   FIELD INFO ICONS
========================================= */

.field-label-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

.field-label-row label {
    margin-bottom: 0 !important;
}

.field-help {
    position: relative;
    display: inline-block;
}

.field-help-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff7e5;
    color: #a06a00;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    user-select: none;
}

.field-help-popup {
    position: absolute;
    left: 75%;
    top: -100px;
    width: 280px;
    background: white;
    border: 1px solid #e1e5f0;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(20, 30, 60, 0.15);
    color: #4b5563;
    font-size: 13px;
    line-height: 1.5;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 2000;
}

.field-help:hover .field-help-popup {
    opacity: 1;
    visibility: visible;
}

.field-help-popup strong {
    display: block;
    color: #202a44;
    margin-bottom: 4px;
}

.sidebar-toggle {
    position: absolute !important;
    top: 18px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 100 !important;
}


/* =========================================
   COLLAPSED SIDEBAR
   ========================================= */

@media (min-width: 901px) {

    .dashboard.sidebar-collapsed .sidebar .sidebar-toggle {
        right: 12px !important;
    }

}


/* =========================================
   NARROW / HALF-SCREEN
   ========================================= */

@media (max-width: 900px) {

    .dashboard .sidebar .sidebar-toggle {
        right: 12px !important;
    }

}


/* =========================================
   MOBILE / SMALL SIDEBAR
   ========================================= */

@media (max-width: 700px) {

    .dashboard .sidebar .sidebar-toggle {
        right: 10px !important;
    }

}
/* =========================================================
   DEVELOPMENT ACTIONS PAGE
   ========================================================= */

.development-actions-page .topbar h1 {
    font-size: 27px;
    white-space: nowrap;
}

.development-actions-page .topbar p {
    font-size: 14px;
}

/* Supplier Development Plan header */
.development-actions-page .supplier-page-header {
    background: linear-gradient(135deg, #f2f5f7, #f7f9fa);
    border: 1px solid #dfe7f5;
    border-radius: 16px;
    padding: 25px 28px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(30, 35, 60, 0.04);
    position: relative;
}

.development-actions-page .supplier-page-header::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 24px;
    bottom: 24px;
    width: 5px;
    border-radius: 10px;
    background: #162a3d;
}

.development-actions-page .supplier-page-header > div {
    padding-left: 15px;
}

.development-actions-page .supplier-page-header h2 {
    font-size: 27px;
    color: #20243a;
    margin-bottom: 6px;
}

.development-actions-page .supplier-page-header p {
    color: #777d91;
    font-size: 12px;
    line-height: 1.5;
}

/* Keep the topbar title fitting at half screen */
@media (max-width: 900px) and (min-width: 900px) {
    .development-actions-page .topbar h1 {
        font-size: 21px;
    }

    .development-actions-page .topbar p {
        font-size: 11px;
    }
}
/* Move the Development Actions table box lower */
.development-actions-page .dashboard-card:has(.table-container) {
    margin-top: 20px;
}
.settings-page .account-actions {
    margin-top: 18px !important;
    padding-top: 3px !important;
    padding-left: 10px;
    padding-bottom: 18px !important;
}
/* ADMIN SETTINGS - SIDEBAR TOGGLE FIX */

body.settings-page .sidebar-toggle {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

/* Admin Settings collapsed sidebar - works at full screen */
body.settings-page.sidebar-collapsed > .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    flex: 0 0 72px !important;
    padding: 28px 10px !important;
}

/* Centre logo */
body.settings-page.sidebar-collapsed > .sidebar .logo {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide logo text */
body.settings-page.sidebar-collapsed > .sidebar .logo > div:not(:first-child) {
    display: none !important;
}

/* Icons only */
body.settings-page.sidebar-collapsed > .sidebar .nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
}

/* Keep icons visible */
body.settings-page.sidebar-collapsed > .sidebar .nav-item span {
    display: inline-flex !important;
    width: auto !important;
    font-size: 20px !important;
}
/* =========================================================
   MASTER FIXED SIDEBAR SYSTEM
   Applies to ADMIN + SUPPLIER PORTAL pages
   Sidebar stays fixed while main content scrolls.
   ========================================================= */

/* ---------------------------------------------------------
   STANDARD FIXED SIDEBAR
   --------------------------------------------------------- */

.dashboard > .sidebar,
.settings-page > .sidebar,
body.supplier-portal-page > .sidebar {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;

    flex: none !important;
    flex-shrink: 0 !important;

    box-sizing: border-box !important;

    z-index: 1000 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    transition:
        width 0.25s ease,
        min-width 0.25s ease,
        max-width 0.25s ease !important;
}


/* ---------------------------------------------------------
   MAIN CONTENT — ADMIN DASHBOARD PAGES
   --------------------------------------------------------- */

.dashboard > .main-content {
    display: block !important;
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   MAIN CONTENT — SUPPLIER PORTAL
   --------------------------------------------------------- */

body.supplier-portal-page > .main-content {
    display: block !important;

    margin-left: 220px !important;

    width: calc(100% - 220px) !important;
    min-width: 0 !important;

    flex: none !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   ADMIN SETTINGS
   --------------------------------------------------------- */

.settings-page {
    min-height: 100vh !important;
}

.settings-page > .settings-main {
    display: block !important;
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   SUPPLIER SETTINGS
   --------------------------------------------------------- */

body.supplier-settings-page > .main-content {
    display: block !important;
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   TOPBARS ALWAYS USE THE AVAILABLE MAIN WIDTH
   --------------------------------------------------------- */

.dashboard > .main-content > .topbar,
body.supplier-portal-page > .main-content > .topbar,
body.supplier-settings-page > .main-content > .topbar,
.settings-page > .settings-main > .topbar {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   SIDEBAR TOGGLE
   --------------------------------------------------------- */

.dashboard > .sidebar .sidebar-toggle,
.settings-page > .sidebar .sidebar-toggle,
body.supplier-portal-page > .sidebar .sidebar-toggle {
    position: absolute !important;

    top: 18px !important;
    right: 12px !important;
    left: auto !important;

    width: 32px !important;
    height: 32px !important;

    z-index: 1100 !important;
}


/* =========================================================
   COLLAPSED SIDEBAR — ADMIN
   ========================================================= */

.dashboard.sidebar-collapsed > .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    padding: 28px 10px !important;
}

.dashboard.sidebar-collapsed > .main-content {
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
}


/* =========================================================
   COLLAPSED SIDEBAR — SUPPLIER PORTAL
   ========================================================= */

body.supplier-portal-page.sidebar-collapsed > .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    padding: 28px 10px !important;
}

body.supplier-portal-page.sidebar-collapsed > .main-content {
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
}


/* =========================================================
   COLLAPSED SIDEBAR — SETTINGS
   ========================================================= */

.settings-page.sidebar-collapsed > .sidebar,
body.settings-page.sidebar-collapsed > .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    padding: 28px 10px !important;
}

.settings-page.sidebar-collapsed > .settings-main,
body.settings-page.sidebar-collapsed > .settings-main {
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
}


/* =========================================================
   COLLAPSED SIDEBAR — SUPPLIER SETTINGS
   ========================================================= */

body.supplier-settings-page.sidebar-collapsed > .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    padding: 28px 10px !important;
}

body.supplier-settings-page.sidebar-collapsed > .main-content {
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
}


/* ---------------------------------------------------------
   COLLAPSED SIDEBAR CONTENT
   --------------------------------------------------------- */

.dashboard.sidebar-collapsed > .sidebar .logo,
body.supplier-portal-page.sidebar-collapsed > .sidebar .logo,
.settings-page.sidebar-collapsed > .sidebar .logo,
body.supplier-settings-page.sidebar-collapsed > .sidebar .logo {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dashboard.sidebar-collapsed > .sidebar .logo > div:not(.logo-icon),
body.supplier-portal-page.sidebar-collapsed > .sidebar .logo > div:not(.logo-icon),
.settings-page.sidebar-collapsed > .sidebar .logo > div:not(.logo-icon),
body.supplier-settings-page.sidebar-collapsed > .sidebar .logo > div:not(.logo-icon) {
    display: none !important;
}

.dashboard.sidebar-collapsed > .sidebar .nav-item,
body.supplier-portal-page.sidebar-collapsed > .sidebar .nav-item,
.settings-page.sidebar-collapsed > .sidebar .nav-item,
body.supplier-settings-page.sidebar-collapsed > .sidebar .nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
}

.dashboard.sidebar-collapsed > .sidebar .nav-item span,
body.supplier-portal-page.sidebar-collapsed > .sidebar .nav-item span,
.settings-page.sidebar-collapsed > .sidebar .nav-item span,
body.supplier-settings-page.sidebar-collapsed > .sidebar .nav-item span {
    display: inline-flex !important;
    width: auto !important;
    font-size: 20px !important;
}


/* =========================================================
   DEVELOPMENT ACTIONS — SAME FIXED BEHAVIOUR
   ========================================================= */

body.supplier-development-actions-page > .sidebar {
    display: flex !important;
    width: 220px !important;
    min-width: 220px !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 1 !important;
    z-index: 1000 !important;
}
body.supplier-development-actions-page > .main-content {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
    
}


/* =========================================================
   SMALLER WINDOWS
   Keep sidebar visible instead of making it disappear.
   ========================================================= */

@media (max-width: 700px) {

    .dashboard > .sidebar,
    .settings-page > .sidebar,
    body.supplier-portal-page > .sidebar {
        display: flex !important;
    }

    .dashboard > .main-content,
    body.supplier-portal-page > .main-content,
    .settings-page > .settings-main,
    body.supplier-settings-page > .main-content {
        min-width: 0 !important;
    }
}

body.supplier-portal-page #actionsSection {
    width: calc(100% + 64px) !important;
    max-width: none !important;
    margin-left: -32px !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}


/* =========================================
   CLICKABLE RESULTS CARDS
========================================= */

.result-card-clickable {
    width: 100%;
    border: 1px solid #e9ebf2;
    font-family: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.result-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(30,35,60,0.08);
}

.supplier-area-result .result-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.supplier-area-result .result-card-header strong {
    color: #0e1d2b;
    font-size: 14px;
}

.supplier-area-result [class^="score-"] {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.supplier-area-result .score-critical { color: #c33737; }
.supplier-area-result .score-improvement { color: #a06a00; }
.supplier-area-result .score-good,
.supplier-area-result .score-strong { color: #21824b; }
.supplier-area-result .result-mini-fill.score-critical { background: #d94b4b; }
.supplier-area-result .result-mini-fill.score-improvement { background: #e2a536; }
.supplier-area-result .result-mini-fill.score-good,
.supplier-area-result .result-mini-fill.score-strong { background: #42a66e; }


.result-view-questions {
    display: block;
    margin-top: 13px;
    color: #162a3d;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================
   AREA QUESTIONS POPUP
========================================= */

.area-questions-overlay {
    position: fixed;
    inset: 0;

    background: rgba(20, 23, 40, 0.58);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    z-index: 50000;
}


.area-questions-modal {
    width: 100%;
    max-width: 850px;
    max-height: 90vh;

    background: white;

    border-radius: 20px;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.22);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* HEADER */

.area-questions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 28px 30px;

    background: linear-gradient(
        135deg,
        #f7f9fa,
        #f7f9fa
    );

    border-bottom: 1px solid #e3e8f1;
}


.area-questions-label {
    display: block;

    color: #a06a00;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;

    margin-bottom: 7px;
}


.area-questions-header h2 {
    margin: 0 0 5px;

    color: #172033;

    font-size: 25px;
}


.area-questions-header p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
}


.area-questions-close {
    width: 38px;
    height: 38px;

    border: none;

    border-radius: 10px;

    background: white;

    color: #64748b;

    font-size: 25px;

    cursor: pointer;
}


.area-questions-close:hover {
    background: #eef2f7;
    color: #172033;
}


/* BODY */

.area-questions-body {
    padding: 24px 30px;

    overflow-y: auto;
}


/* QUESTION */

.area-question {
    display: flex;

    gap: 16px;

    padding: 20px 0;

    border-bottom: 1px solid #edf0f4;
}


.area-question:first-child {
    padding-top: 5px;
}


.area-question:last-child {
    border-bottom: none;
}


.area-question-number {
    width: 32px;
    height: 32px;

    min-width: 32px;

    border-radius: 50%;

    background: #fff7e5;

    color: #162a3d;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 800;
}


.area-question-content {
    flex: 1;
}


.area-question-text {
    margin: 0 0 12px;

    color: #30344b;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 600;
}


.area-question-score {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 11px;

    background: #f5f7fb;

    border-radius: 8px;

    color: #64748b;

    font-size: 11px;
}


.area-question-score strong {
    color: #172033;

    font-size: 12px;
}


/* NOTES */

.assessment-note {
    margin-top: 14px;

    padding: 13px 15px;

    background: #f8fbff;

    border-left: 3px solid #f0a81c;

    border-radius: 0 9px 9px 0;
}


.assessment-note strong {
    display: block;

    margin-bottom: 5px;

    color: #a06a00;

    font-size: 11px;
}


.assessment-note p {
    margin: 0;

    color: #475569;

    font-size: 13px;

    line-height: 1.55;
}


/* FOOTER */

.area-questions-footer {
    display: flex;
    justify-content: flex-end;

    padding: 16px 30px;

    border-top: 1px solid #edf0f4;

    background: #fafbfc;
}


/* MOBILE */

@media (max-width: 650px) {

    .area-questions-overlay {
        padding: 10px;
    }

    .area-questions-modal {
        max-height: 95vh;
        border-radius: 16px;
    }

    .area-questions-header {
        padding: 22px;
    }

    .area-questions-body {
        padding: 20px 22px;
    }

    .area-questions-footer {
        padding: 14px 22px;
    }

}
/* =========================================
   ASSESSMENT SELECTOR
========================================= */

.assessment-selector-wrapper {
    margin-top: 16px;
}


.assessment-selector-label {
    display: block;

    margin-bottom: 7px;

    color: #7b7e98;

    font-size: 12px;

    font-weight: 600;
}


.assessment-selector {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid #d5dde3;

    border-radius: 11px;

    background: #f7f9fa;

    color: #292b46;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    cursor: pointer;

    transition: 0.2s ease;
}


.assessment-selector:hover {
    border-color: #d5dde3;

    background: #ffffff;
}


.assessment-selector:focus {
    border-color: #f0a81c;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(
            102,
            84,
            232,
            0.10
        );
}
/* =========================================
   RESULTS PAGE - KEEP SIDEBAR CLICKABLE
   ========================================= */

body.results-trends-page > .dashboard {
    position: relative !important;
}

body.results-trends-page .sidebar {
    position: fixed !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

body.results-trends-page .sidebar .nav-item {
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
}

/* =========================================
   RESULTS CARDS - HALF SCREEN FIX
   ========================================= */

@media (max-width: 900px) {

    body.results-trends-page .dashboard .results-grid .result-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.results-trends-page .dashboard .results-grid .result-card-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.results-trends-page .dashboard .results-grid .result-card-top h3 {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        overflow-wrap: break-word !important;
    }

    body.results-trends-page .dashboard .results-grid .department-score {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 18px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        box-sizing: border-box !important;
    }
}
/* Shared Business Excellence palette */
body { color: #16222d; background: #f2f5f7; }
.sidebar { background: linear-gradient(180deg, #0e1d2b, #162a3d); }
.logo-icon { color: #0e1d2b; border-radius: 4px; }
.nav-item.active { background: rgba(240,168,28,.18); border-left: 3px solid #f0a81c; }
.nav-item:hover { background: rgba(255,255,255,.10); }
.user-avatar { background: #162a3d; }
.primary-button { background: #f0a81c; color: #0e1d2b; }
.primary-button:hover { background: #d9930c; }
.text-button, .table-button, a { color: #a06a00; }
.assessment-notes:focus, .form-group input:focus, .form-group select:focus,
.search-input:focus { border-color: #f0a81c; box-shadow: 0 0 0 3px rgba(240,168,28,.14); }
.welcome-card { background: linear-gradient(135deg, #162a3d, #0e1d2b); box-shadow: 0 12px 30px rgba(14,29,43,.18); }
.quick-action:hover { border-color: #f0a81c; box-shadow: 0 5px 15px rgba(14,29,43,.08); }
.assessment-page .progress-fill, .assessment-page .area-tab.active { background: #0e1d2b; }
.assessment-page .assessment-section-header { background: #162a3d; border-color: #162a3d; }
.assessment-page .score-option.selected { border-color: #f0a81c; background: #fff7e5; color: #0e1d2b; }
.results-grid .result-mini-fill, .result-bar-fill { background-color: #f0a81c; }
.area-development-actions, .result-actions { margin-top: 16px; padding: 14px; border-left: 3px solid #f0a81c; background: #f7f9fa; }
.area-development-actions h3, .result-actions strong { color: #0e1d2b; margin-bottom: 8px; display: block; }
.area-development-actions article { padding: 9px 0; border-top: 1px solid #d5dde3; }
.area-development-actions p, .result-actions p { margin-top: 4px; color: #5a6b7a; }
.area-development-actions small { color: #a06a00; }
.previous-assessment-reference, .previous-answer { margin: 8px 0; color: #5a6b7a; font-size: 12px; }
.score-option small { display: block; color: #a06a00; font-size: 10px; margin-top: 3px; }
.question-weight-control { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin: 0; white-space: nowrap; }
.question-weight-control label { margin: 0; color: #0e1d2b; font-size: 12px; font-weight: 700; }
.question-weight-select { width: auto; min-width: 92px; padding: 7px 10px; border: 1px solid #d5dde3; border-radius: 7px; background: #fff; color: #0e1d2b; font-weight: 700; }
.answer-weight { display: inline-block; margin-left: 10px; color: #a06a00; font-size: 12px; font-weight: 700; }
.page > .info-panel { background: linear-gradient(145deg, #0e1d2b, #162a3d) !important; }
.form-heading h2 { color: #0e1d2b; }
.question-prompt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.question-prompt-row .question-text { flex: 1; }
@media (max-width: 600px) { .question-prompt-row { flex-direction: column; gap: 8px; } }
.supplier-assessment-picker { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.supplier-assessment-picker label { color: #5a6b7a; font-size: 12px; font-weight: 700; }
.supplier-assessment-picker select { min-width: 230px; max-width: 100%; padding: 10px 12px; border: 1px solid #d5dde3; border-radius: 8px; background: #fff; color: #0e1d2b; }
.assessment-score-date { display: block; margin-top: 4px; color: #64748b; font-size: 11px; line-height: 1.4; }
@media (max-width: 650px) { .supplier-assessment-picker { width: 100%; align-items: flex-start; flex-direction: column; } .supplier-assessment-picker select { width: 100%; min-width: 0; } }
.status-unrated { color: #5a6b7a; background: #e4eaee; }
.result-bar-fill.status-unrated { background: #b9c5cd; }
.result-score strong.status-critical,
.result-score strong.status-improvement,
.result-score strong.status-good,
.result-score strong.status-strong,
.result-score strong.status-unrated { background: transparent; }
.result-score strong.status-critical { color: #c33737; }
.result-score strong.status-improvement { color: #a06a00; }
.result-score strong.status-good { color: #21824b; }
.result-score strong.status-strong { color: #21824b; }
.result-score strong.status-unrated { color: #64748b; }
.assessment-notes { max-height: 80px; resize: none; }
.sidebar { background: linear-gradient(180deg, #0e1d2b, #162a3d) !important; }
.nav-item.active, .nav-link.active { background: rgba(240,168,28,.18) !important; border-left: 3px solid #f0a81c; }
.nav-item:hover, .nav-link:hover { background: rgba(255,255,255,.10) !important; }
button.primary, .btn-primary, .primary-button, .btn-primary-action { background: #f0a81c !important; border-color: #f0a81c !important; color: #0e1d2b !important; }
button.primary:hover, .btn-primary:hover, .primary-button:hover, .btn-primary-action:hover { background: #d9930c !important; border-color: #d9930c !important; }

/* Authentication screen: keep the two modes separate and links lightweight. */
.form-box.hidden {
    display: none !important;
}

.page > .form-panel {
    align-items: center;
    padding: 32px;
}

.form-container {
    max-width: 460px;
}

.form-box {
    margin-bottom: 0;
    border: 1px solid #e5eaf0;
    box-shadow: 0 18px 48px rgba(14, 29, 43, 0.09);
}

.form-heading h2 {
    color: #132536;
}

.form-box form button.primary-button {
    background: #f0a81c !important;
    color: #102233 !important;
}

.form-box form button.primary-button:hover {
    background: #d9930c !important;
    box-shadow: 0 7px 18px rgba(217, 147, 12, 0.2);
}

.form-box form button.link-button,
.form-box > p button.link-button {
    width: auto;
    height: auto;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    color: #9a6500 !important;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.form-box form button.link-button:hover,
.form-box > p button.link-button:hover {
    transform: none;
    text-decoration: underline;
}

.form-box > p button.link-button {
    margin: 0 0 0 4px;
}

@media (max-width: 900px) {
    .page > .form-panel {
        align-items: flex-start;
    }
}
a { color: #a06a00 !important; }
input:focus, select:focus, textarea:focus { border-color: #f0a81c !important; box-shadow: 0 0 0 3px rgba(240,168,28,.14) !important; }
.welcome-card { background: linear-gradient(135deg, #162a3d, #0e1d2b) !important; }
.user-avatar { background: #162a3d !important; }
.result-card-clickable { width: 100%; font-family: inherit; text-align: left; cursor: pointer; }