:root {

    --primary: #075e54;
    --primary-dark: #03453e;
    --secondary: #1f8a70;
    --gold: #d4af37;

    --success: #16803c;
    --danger: #c0392b;
    --warning: #e69b00;

    --background: #f4f7f6;
    --white: #ffffff;

    --text: #1f2933;
    --muted: #6b7280;

    --border: #dce3e1;

    --shadow:
        0 5px 25px rgba(0,0,0,.08);

}


* {

    box-sizing:
        border-box;

}


body {

    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

}


button,
input,
select {

    font:
        inherit;

}


.hidden {

    display:
        none !important;

}


/* =====================================================
   LOGIN
===================================================== */

.login-screen {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        linear-gradient(
            135deg,
            #023b35,
            #075e54,
            #1f8a70
        );

}


.login-box {

    width:
        100%;

    max-width:
        450px;

    background:
        white;

    padding:
        35px;

    border-radius:
        18px;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.3);

    text-align:
        center;

}


.logo-circle {

    width:
        80px;

    height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 15px;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        white;

    border:
        4px solid var(--gold);

    font-size:
        25px;

    font-weight:
        bold;

}


.login-box h1 {

    margin:
        0;

    color:
        var(--primary);

}


.login-subtitle {

    color:
        var(--muted);

    margin-bottom:
        25px;

}


.login-tabs {

    display:
        flex;

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

    margin-bottom:
        25px;

}


.login-tab {

    flex:
        1;

    padding:
        13px;

    border:
        none;

    background:
        transparent;

    cursor:
        pointer;

    font-weight:
        bold;

}


.login-tab.active {

    color:
        var(--primary);

    border-bottom:
        3px solid
        var(--primary);

}


.login-box label {

    display:
        block;

    text-align:
        left;

    margin:
        12px 0 6px;

    font-size:
        13px;

    font-weight:
        bold;

}


.login-box input {

    width:
        100%;

    padding:
        12px;

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

    border-radius:
        7px;

}


.login-note {

    font-size:
        12px;

    color:
        var(--muted);

}


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

#app {

    min-height:
        100vh;

}


#sidebar {

    position:
        fixed;

    left:
        0;

    top:
        0;

    width:
        255px;

    height:
        100vh;

    background:
        var(--primary-dark);

    color:
        white;

    z-index:
        1000;

    display:
        flex;

    flex-direction:
        column;

}


.brand {

    padding:
        20px;

    display:
        flex;

    gap:
        12px;

    align-items:
        center;

    border-bottom:
        1px solid
        rgba(255,255,255,.1);

}


.brand-logo {

    width:
        48px;

    height:
        48px;

    border-radius:
        50%;

    background:
        var(--primary);

    border:
        3px solid
        var(--gold);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        bold;

}


.brand small {

    display:
        block;

    color:
        #acd0ca;

    margin-top:
        4px;

}


#navigation {

    padding:
        15px;

    flex:
        1;

}


.nav-item {

    width:
        100%;

    border:
        none;

    background:
        transparent;

    color:
        #d9eeea;

    padding:
        13px 15px;

    text-align:
        left;

    border-radius:
        8px;

    cursor:
        pointer;

    margin-bottom:
        5px;

}


.nav-item:hover,
.nav-item.active {

    background:
        rgba(255,255,255,.12);

    color:
        white;

}


.logout {

    margin:
        15px;

    border:
        none;

    background:
        rgba(0,0,0,.2);

    color:
        white;

    padding:
        13px;

    border-radius:
        8px;

    cursor:
        pointer;

}


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

main {

    margin-left:
        255px;

    min-height:
        100vh;

}


.topbar {

    height:
        75px;

    background:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        12px 30px;

    position:
        sticky;

    top:
        0;

    z-index:
        100;

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

}


.topbar h2 {

    margin:
        0;

    color:
        var(--primary);

}


.topbar span {

    color:
        var(--muted);

    font-size:
        12px;

}


.logged-user {

    text-align:
        right;

}


.logged-user small {

    display:
        block;

    color:
        var(--muted);

}


.menu-btn {

    display:
        none;

    background:
        var(--primary);

    color:
        white;

    border:
        none;

    padding:
        8px 12px;

    border-radius:
        6px;

    cursor:
        pointer;

}


.content {

    padding:
        30px;

}


.page {

    display:
        none;

}


.page.active {

    display:
        block;

}


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

.dashboard-cards {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        18px;

    margin-bottom:
        25px;

}


.dashboard-card {

    background:
        white;

    padding:
        22px;

    border-radius:
        12px;

    box-shadow:
        var(--shadow);

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border-left:
        5px solid
        var(--primary);

}


.dashboard-card > span {

    font-size:
        32px;

}


.dashboard-card small {

    display:
        block;

    color:
        var(--muted);

}


.dashboard-card strong {

    display:
        block;

    margin-top:
        8px;

    font-size:
        22px;

    color:
        var(--primary-dark);

}


/* =====================================================
   PANELS
===================================================== */

.panel {

    background:
        white;

    padding:
        22px;

    border-radius:
        12px;

    box-shadow:
        var(--shadow);

    margin-bottom:
        25px;

}


.panel-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        18px;

}


.panel-header h3,
.panel h3 {

    color:
        var(--primary);

    margin-top:
        0;

}


/* =====================================================
   PAGE ACTIONS
===================================================== */

.page-actions {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        20px;

}


.page-actions h3 {

    margin:
        0;

    color:
        var(--primary);

}


.page-actions p {

    margin:
        5px 0;

    color:
        var(--muted);

}


.button-group {

    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;

}


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

.form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        18px;

    margin-bottom:
        20px;

}


label {

    display:
        block;

    margin-bottom:
        6px;

    font-size:
        13px;

    font-weight:
        bold;

}


input,
select {

    width:
        100%;

    padding:
        11px;

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

    border-radius:
        7px;

    background:
        white;

}


input:focus,
select:focus {

    outline:
        2px solid
        rgba(31,138,112,.15);

    border-color:
        var(--secondary);

}


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

.btn {

    border:
        none;

    border-radius:
        7px;

    padding:
        11px 17px;

    cursor:
        pointer;

    font-weight:
        bold;

}


.btn.primary {

    background:
        var(--primary);

    color:
        white;

}


.btn.secondary {

    background:
        #e6f1ef;

    color:
        var(--primary);

}


.btn.success {

    background:
        var(--success);

    color:
        white;

}


.btn.danger {

    background:
        var(--danger);

    color:
        white;

}


.btn.full {

    width:
        100%;

    margin-top:
        18px;

}


.close-btn {

    border:
        none;

    background:
        transparent;

    font-size:
        25px;

    cursor:
        pointer;

}


/* =====================================================
   TABLES
===================================================== */

.table-container {

    width:
        100%;

    overflow-x:
        auto;

}


table {

    width:
        100%;

    border-collapse:
        collapse;

    min-width:
        750px;

}


th,
td {

    padding:
        12px;

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

    text-align:
        left;

    font-size:
        13px;

}


th {

    background:
        #eef6f4;

    color:
        var(--primary-dark);

}


tr:hover td {

    background:
        #fafdfc;

}


.empty {

    text-align:
        center;

    padding:
        30px;

    color:
        var(--muted);

}


.table-btn {

    padding:
        6px 9px;

    border:
        none;

    border-radius:
        5px;

    background:
        #e7f1ef;

    color:
        var(--primary);

    cursor:
        pointer;

    margin:
        2px;

}


.table-btn.edit {

    background:
        #fff1c7;

    color:
        #8a6300;

}


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

.status {

    padding:
        5px 9px;

    border-radius:
        20px;

    font-size:
        11px;

    font-weight:
        bold;

}


.status.active {

    background:
        #def5e5;

    color:
        var(--success);

}


.status.inactive {

    background:
        #fbe0dd;

    color:
        var(--danger);

}


.status.completed {

    background:
        #e0ebff;

    color:
        #2056a8;

}


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

.summary-cards {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        18px;

    margin-bottom:
        25px;

}


.summary-cards > div {

    background:
        white;

    padding:
        20px;

    border-radius:
        12px;

    box-shadow:
        var(--shadow);

}


.summary-cards small {

    display:
        block;

    color:
        var(--muted);

}


.summary-cards strong {

    display:
        block;

    font-size:
        22px;

    margin-top:
        8px;

    color:
        var(--primary);

}


/* =====================================================
   PROFILE
===================================================== */

.profile-header {

    background:
        white;

    padding:
        25px;

    border-radius:
        14px;

    box-shadow:
        var(--shadow);

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-bottom:
        20px;

}


.avatar {

    width:
        75px;

    height:
        75px;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        24px;

    font-weight:
        bold;

    border:
        4px solid
        var(--gold);

}


.profile-main h2 {

    margin:
        0 0 8px;

    color:
        var(--primary);

}


.profile-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

}


.details p {

    padding:
        9px 0;

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

}


.financial-box {

    padding:
        15px;

    background:
        #f1f7f6;

    margin-bottom:
        10px;

    border-radius:
        8px;

}


.financial-box span {

    display:
        block;

    color:
        var(--muted);

}


.financial-box strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--primary);

}


/* =====================================================
   TARGET
===================================================== */

.target-box {

    background:
        linear-gradient(
            135deg,
            #075e54,
            #1f8a70
        );

    color:
        white;

    padding:
        25px;

    border-radius:
        15px;

    text-align:
        center;

    margin-bottom:
        20px;

    box-shadow:
        var(--shadow);

}


.target-title {

    font-size:
        18px;

    font-weight:
        bold;

}


.target-number {

    font-size:
        38px;

    font-weight:
        bold;

    color:
        #ffd84d;

    margin:
        15px 0 5px;

}


.progress {

    height:
        13px;

    background:
        rgba(255,255,255,.25);

    border-radius:
        20px;

    margin:
        20px 0;

    overflow:
        hidden;

}


.progress div {

    height:
        100%;

    background:
        #ffd84d;

    border-radius:
        20px;

}


.target-info {

    display:
        flex;

    justify-content:
        space-around;

    flex-wrap:
        wrap;

    gap:
        10px;

    font-size:
        13px;

}


/* =====================================================
   MODALS
===================================================== */

.modal {

    position:
        fixed;

    inset:
        0;

    background:
        rgba(0,0,0,.6);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        5000;

    padding:
        20px;

}


.modal-box {

    width:
        100%;

    max-width:
        500px;

    max-height:
        90vh;

    overflow-y:
        auto;

    background:
        white;

    border-radius:
        12px;

    padding:
        25px;

}


.modal-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        15px;

}


/* =====================================================
   STATEMENT
===================================================== */

.statement-paper {

    background:
        white;

    padding:
        40px;

    box-shadow:
        var(--shadow);

    max-width:
        1100px;

    margin:
        auto;

}


.letterhead {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    text-align:
        center;

}


.statement-logo {

    width:
        75px;

    height:
        75px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--primary);

    color:
        white;

    border:
        4px solid
        var(--gold);

    font-size:
        24px;

    font-weight:
        bold;

}


.letterhead h1 {

    margin:
        0;

    color:
        var(--primary);

    font-size:
        25px;

}


.letterhead h2 {

    margin:
        5px 0;

    font-size:
        15px;

}


.letterhead p {

    margin:
        5px;

    color:
        var(--muted);

}


.letterhead-line {

    border-bottom:
        3px double
        var(--primary);

    margin:
        20px 0;

}


.statement-heading {

    text-align:
        center;

    margin-bottom:
        20px;

}


.statement-heading h2 {

    color:
        var(--primary);

}


.statement-member-details {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        15px;

    background:
        #f4f8f7;

    padding:
        15px;

    margin-bottom:
        20px;

}


.statement-member-details strong {

    display:
        block;

    color:
        var(--muted);

    font-size:
        11px;

    margin-bottom:
        5px;

}


.statement-totals {

    margin-top:
        20px;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        10px;

}


.statement-totals > div {

    padding:
        15px;

    background:
        #f3f7f6;

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

}


.statement-totals span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        12px;

}


.statement-totals strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--primary);

}


.statement-totals .outstanding {

    background:
        #fff2e9;

}


.statement-footer {

    margin-top:
        40px;

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

    padding-top:
        20px;

    text-align:
        center;

    color:
        var(--muted);

}


.signature-area {

    display:
        flex;

    justify-content:
        space-around;

    margin-top:
        40px;

    color:
        var(--text);

}


/* =====================================================
   TOAST
===================================================== */

#toastContainer {

    position:
        fixed;

    top:
        20px;

    right:
        20px;

    z-index:
        10000;

}


.toast {

    color:
        white;

    padding:
        13px 18px;

    margin-bottom:
        10px;

    border-radius:
        7px;

    box-shadow:
        var(--shadow);

    max-width:
        350px;

}


.toast.success {

    background:
        var(--success);

}


.toast.error {

    background:
        var(--danger);

}


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

@media(
    max-width: 1000px
) {

    .dashboard-cards {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


@media(
    max-width: 800px
) {

    #sidebar {

        transform:
            translateX(-100%);

    }


    #sidebar.open {

        transform:
            translateX(0);

    }


    main {

        margin-left:
            0;

    }


    .menu-btn {

        display:
            block;

    }


    .topbar {

        padding:
            12px 18px;

    }


    .content {

        padding:
            18px;

    }


    .form-grid {

        grid-template-columns:
            1fr;

    }


    .profile-grid {

        grid-template-columns:
            1fr;

    }


    .statement-member-details {

        grid-template-columns:
            1fr 1fr;

    }


    .statement-totals {

        grid-template-columns:
            1fr 1fr;

    }

}


@media(
    max-width: 550px
) {

    .dashboard-cards {

        grid-template-columns:
            1fr;

    }


    .summary-cards {

        grid-template-columns:
            1fr;

    }


    .page-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .profile-header {

        flex-direction:
            column;

        text-align:
            center;

    }


    .target-number {

        font-size:
            30px;

    }


    .statement-paper {

        padding:
            15px;

    }


    .statement-member-details {

        grid-template-columns:
            1fr;

    }


    .statement-totals {

        grid-template-columns:
            1fr;

    }


    .letterhead {

        flex-direction:
            column;

    }


    .signature-area {

        flex-direction:
            column;

        gap:
            30px;

    }


    .logged-user {

        display:
            none;

    }

}


/* =====================================================
   PRINT STATEMENT
===================================================== */

@media print {

    body * {

        visibility:
            hidden;

    }


    #statementPaper,
    #statementPaper * {

        visibility:
            visible;

    }


    #statementPaper {

        position:
            absolute;

        left:
            0;

        top:
            0;

        width:
            100%;

        max-width:
            none;

        box-shadow:
            none;

        padding:
            20px;

    }


    .statement-controls {

        display:
            none !important;

    }


    .letterhead {

        display:
            flex !important;

    }


    table {

        min-width:
            0;

    }


    th,
    td {

        font-size:
            10px;

    }

}