/* =========================================================
   ROOT / VARIABLES
========================================================= */

:root {
    --green: #006b45;
    --green2: #0a8156;
    --dark: #063b2b;
    --mint: #eaf7f1;

    --text: #173128;
    --muted: #6b7d76;

    --border: #dfe9e4;
    --bg: #f5f8f6;
    --white: #ffffff;

    --shadow: 0 10px 35px rgba(16, 62, 45, 0.08);

    --radius: 18px;
    --radius-sm: 12px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   PUBLIC HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;

    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.nav {
    height: 76px;

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

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: linear-gradient(
        145deg,
        var(--green),
        #1a9368
    );

    color: var(--white);
    font-weight: 900;
}

.brand b {
    display: block;

    font-size: 13px;
    letter-spacing: 0.3px;
}

.brand span {
    display: block;

    margin-top: 2px;

    color: var(--muted);
    font-size: 12px;
}

.quarter-badge {
    padding: 8px 13px;

    border-radius: 999px;

    background: var(--mint);
    color: var(--green);

    font-size: 13px;
    font-weight: 800;
}


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

.main {
    padding: 36px 0 70px;
}

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    min-height: 380px;

    display: grid;
    grid-template-columns: 1.25fr 0.75fr;

    overflow: hidden;

    padding: 48px;
}

.eyebrow {
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.hero h1 {
    margin: 12px 0 18px;

    color: var(--dark);

    font-size: 42px;
    line-height: 1.08;
}

.hero h1 strong {
    color: var(--green);
}

.hero p {
    max-width: 600px;

    color: var(--muted);

    font-size: 17px;
}

.hero-art {
    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at center,
            #e5f5ed 0 25%,
            transparent 26%
        );
}

.clipboard {
    width: 170px;
    height: 210px;

    display: grid;
    place-items: center;

    border: 10px solid var(--green);
    border-radius: 18px;

    background: var(--white);

    box-shadow: var(--shadow);

    color: var(--green);

    font-size: 75px;
    font-weight: 900;
}

.clipboard span {
    color: var(--muted);

    font-size: 11px;
    letter-spacing: 2px;
}


/* =========================================================
   BUTTON
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 18px;

    border: 0;
    border-radius: 11px;

    font-weight: 800;

    cursor: pointer;
}

.btn.primary {
    background: var(--green);
    color: var(--white);
}

.btn.primary:hover {
    background: var(--green2);
}

.btn.wide {
    width: 100%;
}

.small {
    margin-top: 12px;

    color: var(--muted);
    font-size: 12px;
}


/* =========================================================
   APPLICATION LIST
========================================================= */

.section {
    padding-top: 50px;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;

    margin-bottom: 18px;
}

.section h2 {
    margin: 4px 0;

    font-size: 25px;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}

.app-card {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: var(--white);

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);

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

.app-card:hover {
    transform: translateY(-2px);

    border-color: #a8d7c3;

    box-shadow: 0 10px 25px rgba(0, 107, 69, 0.08);
}

.app-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    flex: none;

    border-radius: 14px;

    background: var(--mint);
    color: var(--green);

    font-weight: 900;
}

.app-card b {
    display: block;
}

.app-card span {
    color: var(--muted);
    font-size: 12px;
}

.app-card .arrow {
    margin-left: auto;

    color: var(--green);

    font-size: 20px;
}


/* =========================================================
   SURVEY TOP
========================================================= */

.survey-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}

.back {
    color: var(--green);

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

.step {
    color: var(--muted);

    font-size: 12px;
    font-weight: 800;
}

.survey-form {
    display: grid;
    gap: 18px;
}


/* =========================================================
   FORM SECTION
========================================================= */

.form-section {
    padding: 28px;
}

.section-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 22px;
}

.section-title .number {
    padding: 8px 10px;

    border-radius: 10px;

    background: var(--mint);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.section-title h2 {
    margin: 0 0 3px;

    font-size: 20px;
}

.section-title p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


/* =========================================================
   FORM ELEMENT
========================================================= */

label {
    display: block;

    color: #385047;

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

input,
select,
textarea {
    width: 100%;

    margin-top: 7px;

    padding: 12px 13px;

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

    outline: none;

    background: var(--white);
    color: var(--text);

    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px
        rgba(0, 107, 69, 0.07);
}

textarea {
    min-height: 150px;

    resize: vertical;
}


/* =========================================================
   QUESTION
========================================================= */

.question {
    padding: 22px 0;

    border-top: 1px solid var(--border);
}

.q-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.q-head > span {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    flex: none;

    border-radius: 9px;

    background: var(--mint);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}


/* =========================================================
   RATING
========================================================= */

.rating {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 8px;

    margin: 15px 0 0 38px;
}

.rating label {
    padding: 10px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--white);

    text-align: center;

    cursor: pointer;

    transition:
        border-color 0.15s,
        background 0.15s;
}

.rating label:hover {
    border-color: #a8d7c3;
}

.rating label:has(input:checked) {
    border-color: var(--green);

    background: var(--mint);
}

.rating input {
    display: none;
}

.star {
    display: block;

    color: #bdc9c4;

    font-size: 21px;
}

.rating label:has(input:checked) .star {
    color: #f3b321;
}

.rating small {
    display: block;

    color: #536860;
}

.rating em {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;
    font-style: normal;
}


/* =========================================================
   SUBMIT
========================================================= */

.submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;
}


/* =========================================================
   SUCCESS / AUTH
========================================================= */

.success-page,
.auth-page {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 20px;
}

.success-card,
.auth-card {
    width: min(520px, 100%);

    padding: 38px;

    text-align: center;
}

.success-icon {
    width: 82px;
    height: 82px;

    display: grid;
    place-items: center;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #e7f6d9;
    color: #4baf39;

    font-size: 50px;
    font-weight: 900;
}

.success-card h1,
.auth-card h1 {
    color: var(--dark);

    font-size: 30px;
}

.success-card p {
    color: var(--muted);
}

.success-note {
    margin: 20px 0;

    padding: 15px;

    border-radius: 12px;

    background: var(--mint);
    color: #315b4a;

    font-size: 13px;
}

.auth-card {
    text-align: left;
}

.auth-card .brand {
    margin-bottom: 28px;
}

.auth-card h1 {
    margin-bottom: 4px;
}

.hint {
    margin-top: 15px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   ALERT
========================================================= */

.alert {
    margin: 15px 0;

    padding: 12px;

    border-radius: 10px;

    font-size: 13px;
}

.alert.danger {
    background: #fff0f0;
    color: #a52222;
}

.alert.success {
    background: var(--mint);
    color: #176243;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding: 24px 0;

    border-top: 1px solid var(--border);

    color: var(--muted);

    font-size: 12px;

    text-align: center;
}


/* =========================================================
   ADMIN HEADER
========================================================= */

.admin-header {
    background: var(--dark);
    color: var(--white);
}

.admin-header .brand b {
    color: var(--white);
}

.admin-header .brand span,
.admin-header a {
    color: #cbe4d8;
}

.admin-nav {
    height: 72px;

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

    font-size: 12px;
}


/* =========================================================
   ADMIN LAYOUT
========================================================= */

.admin-layout {
    display: grid;
    grid-template-columns: 235px 1fr;

    min-height: calc(100vh - 72px);
}


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

.sidebar {
    padding: 25px 14px;

    background: #073e2e;

    color: #d8eee5;
}

.sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 5px;

    padding: 12px 13px;

    border-radius: 10px;

    font-size: 13px;

    transition:
        background 0.2s,
        color 0.2s;
}

.sidebar a:hover,
.sidebar a.active {
    background: #0a6549;
    color: var(--white);
}

.menu-icon {
    width: 20px;

    text-align: center;
}


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

.admin-main {
    padding: 30px 0 60px;

    margin-left: 0;
}

.page-title {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.page-title h1 {
    margin: 4px 0;

    color: var(--dark);

    font-size: 29px;
}

.page-title p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   FILTER
========================================================= */

.filters {
    display: flex;
    align-items: center;

    gap: 8px;
}

.filters select {
    min-width: 145px;

    margin: 0;

    padding: 9px;
}

.filters .btn {
    padding: 10px 14px;
}


/* =========================================================
   DASHBOARD STATS
========================================================= */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    margin-bottom: 16px;
}

.stat {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--white);

    box-shadow: var(--shadow);
}

.stat small {
    color: var(--muted);

    font-size: 11px;
}

.stat b {
    display: block;

    margin-top: 5px;

    color: var(--dark);

    font-size: 28px;
}

.stat span {
    display: block;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;

    gap: 16px;

    margin-bottom: 16px;
}


/* =========================================================
   PANEL
========================================================= */

.panel {
    margin-bottom: 16px;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--white);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;
}

.panel-head h2 {
    margin: 0;

    font-size: 17px;
}

.panel-head span {
    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   METRIC
========================================================= */

.metric {
    margin: 13px 0;
}

.metric > div:first-child {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    font-size: 12px;
}

.metric b {
    color: var(--green);
}


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

.bar {
    height: 7px;

    margin-top: 6px;

    overflow: hidden;

    border-radius: 20px;

    background: #e8efec;
}

.bar i {
    display: block;

    height: 100%;

    border-radius: 20px;

    background: var(--green);
}


/* =========================================================
   QUARTER CHART
========================================================= */

.quarter-chart {
    height: 245px;

    display: flex;
    align-items: end;
    justify-content: space-around;

    gap: 15px;

    padding: 20px 20px 0;
}

.qbar {
    height: 100%;

    display: flex;
    flex: 1;

    flex-direction: column;
    align-items: center;
    justify-content: end;

    gap: 5px;
}

.qvalue {
    color: var(--green);

    font-size: 12px;
    font-weight: 800;
}

.qbar > b {
    color: var(--muted);

    font-size: 12px;
}

.bar.vertical {
    width: 35px;
    height: 170px;

    display: flex;
    align-items: end;

    margin: 0;

    background: #eef4f1;
}

.bar.vertical i {
    width: 100%;
    height: 0;
}


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

.table-wrap {
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

th,
td {
    padding: 11px 8px;

    border-bottom: 1px solid #edf1ef;

    text-align: left;

    white-space: nowrap;
}

th {
    color: var(--muted);

    font-size: 11px;
}

tbody tr:hover {
    background: #fafdfb;
}

.score-pill {
    padding: 5px 8px;

    border-radius: 999px;

    background: var(--mint);
    color: var(--green);

    font-weight: 900;
}


/* =========================================================
   SUGGESTION / FEEDBACK
========================================================= */

.suggestion {
    padding: 12px 0;

    border-bottom: 1px solid var(--border);
}

.suggestion > b {
    color: var(--green);

    font-size: 12px;
}

.suggestion > span {
    margin-left: 8px;

    color: var(--muted);

    font-size: 11px;
}

.suggestion p {
    margin: 7px 0 0;

    font-size: 13px;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .hero {
        grid-template-columns: 1fr;

        padding: 32px;
    }

    .hero-art {
        display: none;
    }

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

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

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .page-title {
        display: block;
    }

    .filters {
        flex-wrap: wrap;

        margin-top: 15px;
    }

    .filters select {
        flex: 1;

        min-width: 130px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 600px) {

    .container {
        width: min(
            100% - 22px,
            1180px
        );
    }

    .nav {
        height: 68px;
    }

    .brand b {
        font-size: 11px;
    }

    .brand span {
        font-size: 10px;
    }

    .quarter-badge {
        font-size: 11px;
    }


    /* Hero */

    .hero {
        min-height: auto;

        padding: 26px;
    }

    .hero h1 {
        font-size: 31px;
    }


    /* Application */

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


    /* Form */

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

    .form-section {
        padding: 20px;
    }


    /* Rating */

    .rating {
        grid-template-columns: repeat(5, 1fr);

        gap: 4px;

        margin-left: 0;
    }

    .rating label {
        padding: 7px 2px;
    }

    .rating .star {
        font-size: 17px;
    }

    .rating em {
        font-size: 8px;
    }


    /* Submit */

    .submit-row {
        display: block;
    }

    .submit-row .btn {
        width: 100%;

        margin-top: 15px;
    }


    /* Survey header */

    .survey-top {
        display: block;
    }

    .step {
        margin-top: 8px;
    }


    /* Success */

    .success-card,
    .auth-card {
        padding: 26px;
    }


    /* Dashboard */

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


    /* Filter */

    .filters {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }

    .filters select,
    .filters .btn {
        width: 100%;
    }


    /* Page title */

    .page-title h1 {
        font-size: 25px;
    }


    /* Panel */

    .panel {
        padding: 16px;
    }


    /* Table */

    .table-wrap {
        margin: 0 -4px;
    }

}