:root {
    --ks-dark: #004848;
    --ks-green: #00705a;
    --ks-teal: #007e8c;
    --ks-gold: #da9e00;
    --ks-light: #eff8f6;
    --ks-text: #243b3b;
}


/* PAGE */

body {
    background-color: #f5f8f8;
    color: var(--ks-text);
    min-height: 100vh;
}


/* NAVIGATION */

.ks-navbar {
    background: linear-gradient(
        90deg,
        var(--ks-dark),
        var(--ks-green)
    );
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}


.navbar-logo {
    width: 55px;
    height: 55px;
    object-fit: contain;
    background: white;
    border-radius: 10px;
}


.brand-name {
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 1rem;
}


.brand-subtitle {
    font-size: 0.72rem;
    color: #f4d36c;
}


/* DASHBOARD */

.dashboard-title {
    color: var(--ks-dark);
    font-weight: 800;
}


.stat-card {
    background: white;
    border-radius: 15px;
    padding: 22px;
    border-left: 5px solid var(--ks-gold);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
    height: 100%;
}


.stat-label {
    color: #6c757d;
    font-size: 0.9rem;
}


.stat-number {
    color: var(--ks-dark);
    font-size: 2rem;
    font-weight: 800;
    margin-top: 5px;
}


/* FINANCE */

.finance-card {
    background: var(--ks-dark);
    color: white;
    border-radius: 15px;
    padding: 24px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}


.finance-label {
    opacity: 0.85;
}


.finance-value {
    font-size: 1.7rem;
    font-weight: 800;
    margin-top: 8px;
}


.finance-value.profit {
    color: #f4cf55;
}


/* CONTENT */

.content-card {
    background: white;
    border-radius: 15px;
    padding: 24px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}


.content-card h4 {
    color: var(--ks-dark);
    font-weight: 700;
}


/* BUTTONS */

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


.ks-btn:hover {
    background-color: var(--ks-dark);
    border-color: var(--ks-dark);
    color: white;
}


/* TABLE */

.table thead th {
    color: var(--ks-dark);
    border-bottom: 2px solid var(--ks-gold);
}


/* FOOTER */

.ks-footer {
    color: #6c757d;
    font-size: 0.85rem;
}


.ks-footer strong {
    color: var(--ks-dark);
}

/* Customer table */
.customer-table th,
.customer-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.customer-table th {
    font-weight: 600;
}

.customer-table td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}