* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #eef2f7;
    color: #1e293b;
}


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

.topbar {
    background: linear-gradient(135deg, #111827, #1e3a8a);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(0,0,0,.20);
}

.topbrand {
    font-weight: 700;
    color: #facc15;
    font-size: 17px;
}

.topbar nav {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.topbar a {
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 14px;
    transition: .2s;
}

.topbar a:hover {
    background: rgba(255,255,255,.18);
    color: #facc15;
}


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

.container {
    max-width: 1250px;
    margin: 28px auto;
    padding: 0 18px;
}


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

.grid {
    display: grid;
    gap: 18px;
}

.cards {
    grid-template-columns:
        repeat(auto-fit, minmax(190px, 1fr));
}


/* =====================================================
   GENERAL CARD
   ===================================================== */

.card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow:
        0 4px 14px rgba(15,23,42,.08);
    transition: .2s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 22px rgba(15,23,42,.14);
}

.card strong {
    display: block;
    font-size: 28px;
    margin-top: 10px;
    color: #0f172a;
}


/* =====================================================
   DASHBOARD COLORED CARDS
   ===================================================== */

.dashboard-card {
    color: #fff;
    border: none;
}

.dashboard-card strong {
    color: #fff;
}


/* Total Properties */

.card-total {
    background:
        linear-gradient(135deg, #2563eb, #1d4ed8);
}


/* Available */

.card-available {
    background:
        linear-gradient(135deg, #16a34a, #15803d);
}


/* Agreement */

.card-agreement {
    background:
        linear-gradient(135deg, #f59e0b, #d97706);
}


/* Booked */

.card-booked {
    background:
        linear-gradient(135deg, #f97316, #ea580c);
}


/* Sold */

.card-sold {
    background:
        linear-gradient(135deg, #dc2626, #b91c1c);
}


/* Customers */

.card-customers {
    background:
        linear-gradient(135deg, #7c3aed, #6d28d9);
}


/* Agents */

.card-agents {
    background:
        linear-gradient(135deg, #0891b2, #0e7490);
}


/* Pending Booking */

.card-pending {
    background:
        linear-gradient(135deg, #be123c, #9f1239);
}


/* =====================================================
   FINANCIAL CARDS
   ===================================================== */

.financial {
    margin-top: 18px;
}

.financial-card {
    color: #fff;
    border: none;
}

.financial-agreement {
    background:
        linear-gradient(135deg, #0f766e, #115e59);
}

.financial-farmer {
    background:
        linear-gradient(135deg, #65a30d, #4d7c0f);
}

.financial-sale {
    background:
        linear-gradient(135deg, #9333ea, #7e22ce);
}

.financial-received {
    background:
        linear-gradient(135deg, #0284c7, #0369a1);
}


/* =====================================================
   SECTION HEADINGS
   ===================================================== */

.section-title {
    margin: 30px 0 15px;
    padding: 12px 16px;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #2563eb
        );

    color: #fff;

    font-size: 20px;
    font-weight: 700;

    box-shadow:
        0 4px 12px rgba(37,99,235,.20);
}


/* =====================================================
   PAGE HEAD
   ===================================================== */

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;

    padding: 16px 18px;

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #2563eb
        );

    color: #fff;

    border-radius: 12px;

    box-shadow:
        0 5px 15px rgba(30,58,138,.20);
}

.page-head h1,
.page-head h2,
.page-head h3 {
    margin: 0;
}


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

.table-wrap {
    background: #fff;
    border-radius: 14px;
    overflow: auto;

    border: 1px solid #dbe3ef;

    box-shadow:
        0 4px 15px rgba(15,23,42,.08);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}


/* TABLE HEADER */

th {
    padding: 14px 12px;

    text-align: left;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #2563eb
        );

    font-size: 14px;

    border-bottom: 3px solid #facc15;

    white-space: nowrap;
}


/* TABLE CELLS */

td {
    padding: 13px 12px;

    border-bottom: 1px solid #e2e8f0;

    text-align: left;

    white-space: nowrap;
}


/* ALTERNATE ROW */

tbody tr:nth-child(even) {
    background: #f8fafc;
}


/* HOVER ROW */

tbody tr:hover {
    background: #dbeafe;
}


/* FIRST COLUMN */

tbody td:first-child {
    font-weight: 700;
    color: #1e3a8a;
}


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

.badge {
    display: inline-block;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    background: #dbeafe;

    color: #1e40af;
}


/* Status colors */

.badge.available {
    background: #dcfce7;
    color: #166534;
}

.badge.agreement {
    background: #fef3c7;
    color: #92400e;
}

.badge.booked {
    background: #ffedd5;
    color: #9a3412;
}

.badge.sold {
    background: #fee2e2;
    color: #991b1b;
}

.badge.pending {
    background: #fce7f3;
    color: #9d174d;
}


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

.btn {
    display: inline-block;

    padding: 10px 15px;

    border: 0;

    border-radius: 8px;

    background: #e2e8f0;

    color: #111827;

    text-decoration: none;

    cursor: pointer;

    font-weight: 600;

    transition: .2s;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn.primary {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color: #fff;
}

.btn.success {
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #15803d
        );

    color: #fff;
}

.btn.danger {
    background:
        linear-gradient(
            135deg,
            #dc2626,
            #b91c1c
        );

    color: #fff;
}

.btn.warning {
    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #d97706
        );

    color: #fff;
}

.btn.info {
    background:
        linear-gradient(
            135deg,
            #0891b2,
            #0e7490
        );

    color: #fff;
}

.btn.purple {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #6d28d9
        );

    color: #fff;
}


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

.quick {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}


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

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

.form-grid fieldset {
    border: 1px solid #dbe3ef;

    background: #fff;

    border-radius: 14px;

    padding: 20px;

    display: grid;

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

    gap: 15px;

    box-shadow:
        0 4px 14px rgba(15,23,42,.06);
}

.form-grid legend {

    font-weight: 700;

    padding: 7px 14px;

    border-radius: 7px;

    background: #1e3a8a;

    color: #fff;
}

.form-grid label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    font-weight: 600;

    font-size: 14px;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.login-card input {

    padding: 11px;

    border: 1px solid #cbd5e1;

    border-radius: 8px;

    font: inherit;

    background: #fff;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.login-card input:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.12);
}

.form-grid textarea {
    min-height: 90px;
}

.wide {
    grid-column: 1/-1;
}


/* =====================================================
   DETAIL GRID
   ===================================================== */

.detail-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap: 18px;
}


/* =====================================================
   CONFIDENTIAL
   ===================================================== */

.confidential {

    border-left: 5px solid #dc2626;

    background: #fff7f7;
}


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

.alert {

    padding: 13px 15px;

    border-radius: 9px;

    margin: 12px 0;

    font-weight: 600;
}

.alert.success {

    background: #dcfce7;

    color: #166534;

    border-left: 5px solid #16a34a;
}

.alert.error {

    background: #fee2e2;

    color: #991b1b;

    border-left: 5px solid #dc2626;
}

.alert.warning {

    background: #fef3c7;

    color: #92400e;

    border-left: 5px solid #f59e0b;
}

.alert.info {

    background: #dbeafe;

    color: #1e40af;

    border-left: 5px solid #2563eb;
}


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

.login-page {

    min-height: 100vh;

    display: grid;

    place-items: center;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #f8fafc
        );
}

.login-card {

    background: #fff;

    width: min(420px,100%);

    padding: 30px;

    border-radius: 18px;

    box-shadow:
        0 15px 45px
        rgba(15,23,42,.18);
}

.login-card form {

    display: grid;

    gap: 8px;
}

.login-card label {

    font-weight: 600;

    margin-top: 8px;
}


/* =====================================================
   BRAND MARK
   ===================================================== */

.brand-mark {

    width: 58px;

    height: 58px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: #fff;

    display: grid;

    place-items: center;

    font-weight: 800;

    font-size: 20px;
}


/* =====================================================
   MUTED
   ===================================================== */

.muted {

    color: #64748b;

    font-size: 14px;
}


/* =====================================================
   FULL WIDTH
   ===================================================== */

.full {
    width: 100%;
}


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

@media(max-width:700px) {

    .topbar {

        align-items: flex-start;

        flex-direction: column;

        padding: 12px 15px;
    }

    .topbar nav {

        gap: 4px;
    }

    .topbar a {

        font-size: 13px;

        padding: 7px 9px;
    }

    .container {

        margin-top: 20px;

        padding: 0 12px;
    }

    .form-grid fieldset {

        grid-template-columns: 1fr;
    }

    .wide {

        grid-column: auto;
    }

    .page-head {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .quick {

        flex-direction: column;
    }

    .quick .btn {

        text-align: center;

        width: 100%;
    }

}