* {
    box-sizing: border-box;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --background: #f6f8fb;
    --surface: #ffffff;

    --text: #172033;
    --muted: #6b7280;

    --border: #e5e7eb;

    --sidebar: #111827;
    --sidebar-hover: #1f2937;

    --radius: 14px;
}

body {
    margin: 0;

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

    background: var(--background);

    color: var(--text);
}

a {
    color: inherit;
}


/* =========================================================
   APP LAYOUT
========================================================= */

.app-layout {
    min-height: 100vh;
}


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

.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width: 250px;
    height: 100vh;

    padding: 24px 16px;

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

    display: flex;
    flex-direction: column;

    z-index: 100;
}


.sidebar-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 8px 24px;
}


.brand-icon {
    width: 42px;
    height: 42px;

    border-radius: 11px;

    background: var(--primary);

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

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


.sidebar-brand strong {
    display: block;

    font-size: 17px;
}


.sidebar-brand small {
    display: block;

    margin-top: 3px;

    color: #9ca3af;

    font-size: 11px;
}


.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 10px;
}


.sidebar-nav a {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 13px;

    border-radius: 9px;

    text-decoration: none;

    color: #d1d5db;

    font-size: 14px;
    font-weight: 500;

    transition: 0.2s;
}


.sidebar-nav a:hover {
    background: var(--sidebar-hover);

    color: white;
}


.sidebar-nav a.active {
    background: var(--primary);

    color: white;
}


.sidebar-nav span {
    width: 20px;

    text-align: center;

    font-size: 17px;
}


.sidebar-bottom {
    margin-top: auto;

    border-top: 1px solid #374151;

    padding: 18px 8px 0;
}


.sidebar-user strong {
    display: block;

    font-size: 13px;
}


.sidebar-user small {
    display: block;

    margin-top: 4px;

    color: #9ca3af;

    font-size: 12px;
}


.logout-link {
    display: inline-block;

    margin-top: 15px;

    color: #fca5a5;

    font-size: 13px;

    text-decoration: none;
}


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

.main-content {
    margin-left: 250px;

    min-height: 100vh;

    padding: 38px 42px;
}


.page-header {
    display: flex;

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

    margin-bottom: 28px;
}


.page-eyebrow {
    margin: 0 0 7px;

    color: var(--primary);

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

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.page-header h1 {
    margin: 0;

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

    letter-spacing: -0.5px;
}


.page-description {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 14px;
}


/* =========================================================
   BUSINESS CARD
========================================================= */

.business-card {
    padding: 22px 25px;

    background: var(--surface);

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

    border-radius: var(--radius);

    margin-bottom: 30px;
}


.business-label {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.business-card h2 {
    margin: 0;

    font-size: 20px;
}


/* =========================================================
   SECTIONS
========================================================= */

.dashboard-section {
    margin-top: 10px;
}


.section-heading {
    display: flex;

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

    margin-bottom: 17px;
}


.section-heading h2 {
    margin: 0;

    font-size: 20px;
}


.section-heading p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   MODULE CARDS
========================================================= */

.module-grid {
    display: grid;

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

    gap: 18px;
}


.module-card {
    position: relative;

    display: flex;

    gap: 16px;

    min-height: 145px;

    padding: 22px;

    background: var(--surface);

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

    border-radius: var(--radius);

    text-decoration: none;

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


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

    border-color: #cbd5e1;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.07);
}


.module-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    border-radius: 11px;

    background: #eff6ff;

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

    font-size: 21px;
}


.module-card h3 {
    margin: 2px 0 7px;

    font-size: 16px;
}


.module-card p {
    margin: 0;

    max-width: 270px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.55;
}


.module-arrow {
    position: absolute;

    right: 18px;
    bottom: 17px;

    color: var(--primary);

    font-size: 20px;
}


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

.stats {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin: 20px 0;
}


.stat-card {
    min-width: 180px;

    padding: 20px;

    background: var(--surface);

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

    border-radius: var(--radius);
}


.stat-card h3 {
    margin-top: 0;

    color: var(--muted);

    font-size: 13px;
}


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


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

@media (max-width: 800px) {

    .sidebar {
        position: relative;

        width: 100%;
        height: auto;
    }


    .sidebar-bottom {
        margin-top: 20px;
    }


    .main-content {
        margin-left: 0;

        padding: 25px 18px;
    }


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

}

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

.page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


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

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

    min-height: 40px;

    padding: 10px 16px;

    border: 1px solid transparent;
    border-radius: 9px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: 0.2s;
}


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


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


.btn-secondary {
    background: white;

    border-color: var(--border);

    color: var(--text);
}


.btn-secondary:hover,
.btn-light:hover {
    background: #f9fafb;
}


.btn-light {
    background: white;

    border-color: var(--border);

    color: var(--muted);
}


/* =========================================================
   INVENTORY TOOLS
========================================================= */

.inventory-tools {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;
}


.inventory-tools a {
    padding: 10px 14px;

    background: white;

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

    color: var(--text);

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;
}


.inventory-tools a:hover {
    border-color: #cbd5e1;

    background: #f9fafb;
}


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

.content-card {
    overflow: hidden;

    background: white;

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


.content-card-header {
    padding: 22px 24px 17px;

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


.content-card-header h2 {
    margin: 0;

    font-size: 18px;
}


.content-card-header p {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 13px;
}


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

.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    padding: 16px 24px;

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


.filter-bar input,
.filter-bar select {
    height: 40px;

    padding: 0 12px;

    background: white;

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

    color: var(--text);

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

    outline: none;
}


.filter-bar input {
    width: 330px;
}


.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--primary);
}


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

.table-wrapper {
    width: 100%;

    overflow-x: auto;
}


.data-table {
    width: 100%;

    border-collapse: collapse;
}


.data-table th {
    padding: 13px 16px;

    background: #f9fafb;

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

    color: var(--muted);

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

    text-align: left;
    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.data-table td {
    padding: 15px 16px;

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

    font-size: 13px;

    vertical-align: middle;
}


.data-table tbody tr:last-child td {
    border-bottom: 0;
}


.data-table tbody tr:hover {
    background: #fafbfc;
}


.table-action {
    color: var(--primary);

    font-weight: 600;

    text-decoration: none;
}


.table-action:hover {
    text-decoration: underline;
}


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

.status-badge {
    display: inline-flex;

    padding: 5px 9px;

    border-radius: 20px;

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


.status-success {
    background: #ecfdf5;
    color: #047857;
}


.status-warning {
    background: #fffbeb;
    color: #b45309;
}


.status-danger {
    background: #fef2f2;
    color: #b91c1c;
}


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

.empty-state {
    padding: 50px 25px;

    text-align: center;
}


.empty-state h3 {
    margin: 0 0 7px;
}


.empty-state p {
    margin: 0 0 20px;

    color: var(--muted);

    font-size: 13px;
}


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

@media (max-width: 800px) {

    .page-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }


    .page-actions {
        width: 100%;

        flex-wrap: wrap;
    }


    .filter-bar input {
        width: 100%;
    }


    .stats {
        display: grid;

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


    .stat-card {
        min-width: 0;
    }

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

.status-badge:not(.status-success):not(.status-warning):not(.status-danger) {
    background: #f3f4f6;
    color: #4b5563;
}
/* =========================================================
   APPOINTMENTS
========================================================= */

.status-info {
    background: #eff6ff;
    color: #2563eb;
}


.success-message {
    margin-bottom: 24px;

    padding: 13px 16px;

    background: #ecfdf5;

    border: 1px solid #a7f3d0;
    border-radius: 9px;

    color: #047857;

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


.action-separator {
    margin: 0 7px;

    color: #d1d5db;
}
/* =========================================================
   FORMS / SUBPAGES
========================================================= */

.form-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

.form-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
}

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

.form-group label {
    display: block;
    margin-bottom: 7px;

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

.form-control {
    width: 100%;
    min-height: 42px;

    padding: 10px 12px;

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

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

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

    outline: none;
}

.form-control:focus {
    border-color: var(--primary);

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

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.form-row {
    display: grid;

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

    gap: 16px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 20px;
}

.back-link {
    display: inline-block;

    margin-bottom: 20px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}

.back-link:hover {
    color: var(--primary);
}

.error-message {
    margin-bottom: 20px;

    padding: 13px 16px;

    background: #fef2f2;

    border: 1px solid #fecaca;
    border-radius: 9px;

    color: #b91c1c;

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

@media (max-width: 700px) {

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

}
/* =========================================================
   NEW SALE
========================================================= */

.sale-product-row {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        140px
        auto;

    gap: 16px;

    align-items: end;
}


.sale-product-row .form-group {
    margin-bottom: 0;
}


.sale-add-button {
    display: flex;
}


.sale-add-button .btn {
    min-height: 42px;
}


.sale-total-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 3px;
}


.sale-total-header span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
}


.sale-total-header strong {
    font-size: 19px;
}


.sale-footer {
    display: flex;

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

    gap: 20px;

    padding: 20px 24px;

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

    background: #fafbfc;
}


.sale-total {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.sale-total span {
    color: var(--muted);

    font-size: 12px;
}


.sale-total strong {
    font-size: 22px;
}


.table-subtext {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
}


.remove-action {
    color: #dc2626;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}


.remove-action:hover {
    text-decoration: underline;
}


@media (max-width: 800px) {

    .sale-product-row {
        grid-template-columns: 1fr;
    }


    .sale-footer {
        align-items: stretch;
        flex-direction: column;
    }


    .sale-footer .btn {
        width: 100%;
    }

}
/* =========================================================
   SALE RECEIPT
========================================================= */

.receipt-card {
    max-width: 900px;

    background: white;

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

    overflow: hidden;
}


.receipt-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    padding: 28px 30px;

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


.receipt-label {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

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

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.receipt-header h2 {
    margin: 0;

    font-size: 24px;
}


.receipt-number {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 5px;
}


.receipt-number span {
    color: var(--muted);

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

    letter-spacing: 0.08em;
}


.receipt-number strong {
    font-size: 18px;
}


.receipt-info {
    display: grid;

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

    gap: 20px;

    padding: 20px 30px;

    background: #fafbfc;

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


.receipt-info div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.receipt-info span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
}


.receipt-info strong {
    font-size: 13px;
}


.receipt-table th,
.receipt-table td {
    padding-left: 30px;
    padding-right: 30px;
}


.receipt-summary {
    display: flex;
    justify-content: flex-end;

    padding: 25px 30px;

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


.receipt-total {
    min-width: 250px;

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

    gap: 30px;
}


.receipt-total span {
    color: var(--muted);

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


.receipt-total strong {
    font-size: 25px;
}


.internal-profit {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 0 30px 25px;

    padding: 13px 15px;

    background: #ecfdf5;

    border: 1px solid #a7f3d0;
    border-radius: 9px;

    color: #047857;
}


.internal-profit span {
    font-size: 12px;
    font-weight: 600;
}


.internal-profit strong {
    font-size: 14px;
}


.receipt-footer {
    padding: 25px 30px;

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

    text-align: center;
}


.receipt-footer p {
    margin: 0 0 5px;

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


.receipt-footer small {
    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   PRINT RECEIPT
========================================================= */

@media print {

    body {
        background: white;
    }


    .no-print,
    .sidebar {
        display: none !important;
    }


    .main-content {
        margin: 0;
        padding: 0;
    }


    .receipt-card {
        max-width: none;

        border: 0;
        border-radius: 0;
    }


    .internal-profit {
        display: none !important;
    }

}


@media (max-width: 700px) {

    .receipt-header {
        flex-direction: column;
    }


    .receipt-number {
        align-items: flex-start;
    }


    .receipt-info {
        grid-template-columns: 1fr;
    }


    .receipt-total {
        width: 100%;
        min-width: 0;
    }

}
/* =========================================================
   PRODUCT FORMS
========================================================= */

.product-form-card {
    max-width: 900px;
}


.form-section-header {
    margin-bottom: 22px;
}


.form-section-header h2 {
    margin: 0 0 5px;

    font-size: 17px;
}


.form-section-header p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


.form-help {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.4;
}


.form-divider {
    height: 1px;

    margin: 28px 0;

    background: var(--border);
}


/* CFA INSIDE PRICE INPUT */

.input-with-suffix {
    position: relative;
}


.input-with-suffix .form-control {
    padding-right: 60px;
}


.input-with-suffix span {
    position: absolute;

    top: 50%;
    right: 12px;

    transform: translateY(-50%);

    color: var(--muted);

    font-size: 12px;
    font-weight: 600;

    pointer-events: none;
}
/* =========================================================
   ADD STOCK
========================================================= */

.stock-form-card {
    max-width: 720px;
}
/* =========================================================
   STOCK HISTORY
========================================================= */

.stock-change {
    font-size: 13px;
    font-weight: 700;
}


.stock-positive {
    color: #047857;
}


.stock-negative {
    color: #b91c1c;
}


.table-muted {
    color: var(--muted);
}
/* =========================================================
   SALES HISTORY
========================================================= */

.profit-positive {
    color: #047857;

    font-weight: 700;
}


.profit-negative {
    color: #b91c1c;

    font-weight: 700;
}
/* =========================================================
   CATEGORIES
========================================================= */

.category-form-card {
    max-width: 750px;
}


.category-add-row {
    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        auto;

    gap: 15px;

    align-items: end;
}


.category-add-row .form-group {
    margin-bottom: 0;
}


.category-add-button {
    display: flex;
}


.category-add-button .btn {
    min-height: 42px;
}


.category-count {
    padding: 6px 10px;

    background: #f3f4f6;

    border-radius: 20px;

    color: var(--muted);

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


.category-id {
    color: var(--muted);

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


@media (max-width: 700px) {

    .category-add-row {
        grid-template-columns: 1fr;
    }


    .category-add-button .btn {
        width: 100%;
    }

}
/* =========================================================
   CREATE INVOICE
========================================================= */

.invoice-item-row {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        120px
        190px
        auto;

    gap: 15px;

    align-items: end;
}


.invoice-item-row .form-group {
    margin-bottom: 0;
}


.invoice-add-button {
    display: flex;
}


.invoice-add-button .btn {
    min-height: 42px;
}


.invoice-items-card {
    margin-bottom: 24px;
}


.invoice-header-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 3px;
}


.invoice-header-total span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
}


.invoice-header-total strong {
    font-size: 19px;
}


.invoice-total-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 35px;

    padding: 20px 24px;

    background: #fafbfc;

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


.invoice-total-footer span {
    color: var(--muted);

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


.invoice-total-footer strong {
    font-size: 22px;
}


.invoice-details-card {
    max-width: 900px;
}


.invoice-date-field {
    max-width: 300px;
}


.invoice-create-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 28px;

    padding: 20px;

    background: #f9fafb;

    border: 1px solid var(--border);
    border-radius: 10px;
}


.invoice-create-summary > div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.invoice-create-summary span {
    color: var(--muted);

    font-size: 12px;
}


.invoice-create-summary strong {
    font-size: 23px;
}


.btn:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


@media (max-width: 950px) {

    .invoice-item-row {
        grid-template-columns:
            1fr 1fr;
    }


    .invoice-description-field {
        grid-column: 1 / -1;
    }

}


@media (max-width: 650px) {

    .invoice-item-row {
        grid-template-columns: 1fr;
    }


    .invoice-description-field {
        grid-column: auto;
    }


    .invoice-add-button .btn {
        width: 100%;
    }


    .invoice-create-summary {
        align-items: stretch;
        flex-direction: column;
    }


    .invoice-create-summary .btn {
        width: 100%;
    }

}
/* =========================================================
   INVOICE DOCUMENT
========================================================= */

.invoice-document {
    max-width: 950px;

    background: white;

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

    overflow: hidden;
}


.invoice-document-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    padding: 30px;
}


.invoice-small-label {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

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

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.invoice-document-header h2 {
    margin: 0;

    font-size: 25px;
}


.invoice-document-number {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 5px;
}


.invoice-document-number span {
    color: var(--muted);

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

    letter-spacing: 0.1em;
}


.invoice-document-number strong {
    font-size: 20px;
}


/* META */

.invoice-meta {
    display: grid;

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

    gap: 20px;

    padding: 18px 30px;

    background: #f9fafb;

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


.invoice-meta > div {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.invoice-meta > div > span {
    color: var(--muted);

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

    text-transform: uppercase;
}


.invoice-meta strong {
    font-size: 13px;
}


/* CLIENT */

.invoice-client-section {
    padding: 28px 30px;

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


.invoice-client-section h3 {
    margin: 0 0 8px;

    font-size: 17px;
}


.invoice-client-section p {
    margin: 3px 0;

    color: var(--muted);

    font-size: 13px;
}


/* TABLE */

.invoice-document-table th,
.invoice-document-table td {
    padding-left: 30px;
    padding-right: 30px;
}


/* SUMMARY */

.invoice-summary {
    width: 360px;

    margin-left: auto;

    padding: 25px 30px;
}


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

    gap: 25px;

    padding: 9px 0;

    color: var(--muted);

    font-size: 13px;
}


.invoice-summary-row strong {
    color: var(--text);
}


.invoice-paid-amount {
    color: #047857 !important;
}


.invoice-remaining-row {
    margin-top: 8px;

    padding-top: 16px;

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

    color: var(--text);

    font-weight: 700;
}


.invoice-remaining-row strong {
    font-size: 20px;
}


/* NOTES */

.invoice-notes {
    margin: 0 30px 25px;

    padding: 16px;

    background: #f9fafb;

    border: 1px solid var(--border);
    border-radius: 9px;
}


.invoice-notes p {
    margin: 0;

    color: var(--text);

    font-size: 13px;

    line-height: 1.6;
}


/* FOOTER */

.invoice-document-footer {
    padding: 25px 30px;

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

    text-align: center;
}


.invoice-document-footer p {
    margin: 0 0 4px;

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


.invoice-document-footer small {
    color: var(--muted);

    font-size: 10px;
}


/* =========================================================
   PRINT INVOICE
========================================================= */

@media print {

    body {
        background: white;
    }


    .sidebar,
    .no-print {
        display: none !important;
    }


    .app-layout {
        display: block;
    }


    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }


    .invoice-document {
        width: 100%;
        max-width: none;

        border: 0;
        border-radius: 0;
    }


    .invoice-document-table {
        page-break-inside: auto;
    }


    .invoice-document-table tr {
        page-break-inside: avoid;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .invoice-document-header {
        flex-direction: column;
    }


    .invoice-document-number {
        align-items: flex-start;
    }


    .invoice-meta {
        grid-template-columns: 1fr;
    }


    .invoice-summary {
        width: auto;

        margin: 0;
    }

}
/* =========================================================
   PAYMENTS
========================================================= */

.payment-summary-card {
    display: grid;

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

    gap: 1px;

    max-width: 850px;

    margin-bottom: 24px;

    overflow: hidden;

    background: var(--border);

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


.payment-summary-item {
    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 22px;

    background: white;
}


.payment-summary-item span {
    color: var(--muted);

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

    text-transform: uppercase;
}


.payment-summary-item strong {
    font-size: 21px;
}


.payment-paid {
    color: #047857;
}


.payment-remaining {
    color: #b45309;
}


.payment-form-card {
    max-width: 650px;
}


.payment-complete-card {
    display: flex;
    align-items: center;

    gap: 18px;

    max-width: 750px;

    padding: 22px;

    background: white;

    border: 1px solid #a7f3d0;
    border-radius: var(--radius);
}


.payment-complete-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

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

    background: #ecfdf5;

    border-radius: 50%;

    color: #047857;

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


.payment-complete-card h2 {
    margin: 0 0 4px;

    font-size: 17px;
}


.payment-complete-card p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


.payment-complete-card .btn {
    margin-left: auto;
}


@media (max-width: 700px) {

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


    .payment-complete-card {
        align-items: flex-start;
        flex-direction: column;
    }


    .payment-complete-card .btn {
        width: 100%;

        margin-left: 0;
    }

}
/* =========================================================
   INVOICE HISTORY
========================================================= */

.invoice-paid-text {
    color: #047857;

    font-weight: 600;
}


.invoice-remaining-text {
    color: #b45309;

    font-weight: 600;
}
/* =========================================================
   APPOINTMENT FORMS
========================================================= */

.appointment-form-card {
    max-width: 850px;
}
/* =========================================================
   APPOINTMENT DETAILS
========================================================= */

.appointment-detail-card {
    max-width: 900px;

    margin-bottom: 24px;

    background: white;

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

    overflow: hidden;
}


.appointment-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 25px;
}


.appointment-label {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

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

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.appointment-detail-header h2 {
    margin: 0;

    font-size: 22px;
}


/* MAIN INFO */

.appointment-info-grid {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 1px;

    background: var(--border);

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


.appointment-info-item {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 18px;

    background: white;
}


.appointment-info-item span {
    color: var(--muted);

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

    text-transform: uppercase;
}


.appointment-info-item strong {
    font-size: 13px;
}


/* SECTIONS */

.appointment-section {
    padding: 24px 25px;

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


.appointment-section:last-child {
    border-bottom: 0;
}


.appointment-section-title {
    margin-bottom: 16px;
}


.appointment-section-title h2,
.appointment-section-title h3 {
    margin: 0 0 4px;
}


.appointment-section-title h2 {
    font-size: 17px;
}


.appointment-section-title h3 {
    font-size: 14px;
}


.appointment-section-title p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


.appointment-contact-grid {
    display: grid;

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

    gap: 15px;
}


.appointment-contact-grid .appointment-info-item {
    background: #f9fafb;

    border: 1px solid var(--border);
    border-radius: 8px;
}


.appointment-notes {
    padding: 15px;

    background: #f9fafb;

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

    font-size: 13px;

    line-height: 1.6;
}


/* ACTIONS */

.appointment-actions-card {
    max-width: 900px;

    padding: 22px 25px;

    background: white;

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


.appointment-status-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.appointment-status-actions form {
    margin: 0;
}


/* BUTTON COLORS */

.btn-success {
    background: #059669;

    border-color: #059669;

    color: white;
}


.btn-success:hover {
    background: #047857;
}


.btn-warning {
    background: #f59e0b;

    border-color: #f59e0b;

    color: white;
}


.btn-warning:hover {
    background: #d97706;
}


.btn-danger {
    background: #dc2626;

    border-color: #dc2626;

    color: white;
}


.btn-danger:hover {
    background: #b91c1c;
}


@media (max-width: 700px) {

    .appointment-detail-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .appointment-info-grid {
        grid-template-columns: 1fr;
    }


    .appointment-contact-grid {
        grid-template-columns: 1fr;
    }


    .appointment-status-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .appointment-status-actions form,
    .appointment-status-actions .btn {
        width: 100%;
    }

}
/* =========================================================
   APPOINTMENT HISTORY
========================================================= */

.appointment-count {
    padding: 6px 10px;

    background: #f3f4f6;

    border-radius: 20px;

    color: var(--muted);

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


.appointment-filter-bar input {
    min-width: 280px;
}


.table-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;
}


@media (max-width: 700px) {

    .appointment-filter-bar input {
        min-width: 0;
        width: 100%;
    }

}
/* =========================================================
   USER MANAGEMENT
========================================================= */

.permissions-list {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}


.permissions-list span {
    padding: 4px 7px;

    background: #eff6ff;

    border-radius: 6px;

    color: #2563eb;

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


.permissions-list .permission-none {
    background: #f3f4f6;

    color: var(--muted);
}
/* =========================================================
   USER FORM
========================================================= */

.user-form-card {
    max-width: 900px;
}

.permission-checkbox-grid {
    display: grid;

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

    gap: 12px;
}

.permission-option {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 15px;

    background: #f9fafb;

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

    cursor: pointer;
}

.permission-option input {
    margin-top: 3px;
}

.permission-option strong {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
}

.permission-option span {
    display: block;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.4;
}

@media (max-width: 700px) {

    .permission-checkbox-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   USER STATUS
========================================================= */

.user-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    max-width: 900px;

    margin-top: 24px;

    padding: 22px 24px;

    background: white;

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

.user-status-card h2 {
    margin: 0 0 5px;

    font-size: 16px;
}

.user-status-card p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}

.user-status-card form {
    margin: 0;
}

@media (max-width: 700px) {

    .user-status-card {
        align-items: stretch;
        flex-direction: column;
    }

    .user-status-card .btn {
        width: 100%;
    }

}
/* =========================================================
   SUPER ADMIN
========================================================= */

.admin-layout {
    min-height: 100vh;
}

.admin-sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width: 250px;
    height: 100vh;

    padding: 24px 16px;

    background: #0f172a;
    color: white;

    display: flex;
    flex-direction: column;
}

.admin-main {
    min-height: 100vh;

    margin-left: 250px;

    padding: 38px 42px;

    background: var(--background);
}

@media (max-width: 800px) {

    .admin-sidebar {
        position: relative;

        width: 100%;
        height: auto;
    }

    .admin-main {
        margin-left: 0;

        padding: 25px 18px;
    }

}
/* =========================================================
   SUPER ADMIN BUSINESS DETAILS
========================================================= */

.admin-section-spacing {
    margin-top: 24px;
}

.admin-business-info-grid {
    display: grid;

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

    gap: 1px;

    background: var(--border);
}

.admin-module-grid {
    display: grid;

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

    gap: 12px;

    padding: 20px;
}

.admin-module-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 16px;

    background: #f9fafb;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.admin-module-item strong {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
}

.admin-module-item > div > span {
    color: var(--muted);

    font-size: 11px;
}

@media (max-width: 800px) {

    .admin-business-info-grid,
    .admin-module-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   SUPER ADMIN EDIT BUSINESS
========================================================= */

.admin-warning-box {
    margin-top: 22px;

    padding: 15px 17px;

    background: #fffbeb;

    border: 1px solid #fde68a;
    border-radius: 9px;

    color: #92400e;
}

.admin-warning-box strong {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;
}

.admin-warning-box p {
    margin: 0;

    font-size: 11px;

    line-height: 1.5;
}
/* =========================================================
   PUBLIC LANDING PAGE
========================================================= */

.landing-body {
    margin: 0;

    background: #f7f9fc;

    color: var(--text);
}

.landing-container {
    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;
}


/* HEADER */

.landing-header {
    background: rgba(255, 255, 255, 0.96);

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

.landing-nav {
    min-height: 78px;

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

    gap: 25px;
}

.landing-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--text);

    text-decoration: none;
}

.landing-brand > div:last-child {
    display: flex;
    flex-direction: column;
}

.landing-brand strong {
    font-size: 17px;
}

.landing-brand small {
    color: var(--muted);

    font-size: 10px;
}

.landing-nav-actions {
    display: flex;

    gap: 10px;
}


/* HERO */

.landing-hero {
    padding: 90px 0 80px;
}

.landing-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.95fr);

    gap: 70px;

    align-items: center;
}

.landing-hero-content h1 {
    max-width: 680px;

    margin: 10px 0 20px;

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.05;

    letter-spacing: -0.04em;
}

.landing-hero-text {
    max-width: 650px;

    margin: 0;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;
}

.landing-hero-actions {
    display: flex;

    gap: 12px;

    margin-top: 30px;
}

.landing-main-button {
    min-height: 48px;

    padding-left: 22px;
    padding-right: 22px;
}

.landing-points {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 24px;

    color: var(--muted);

    font-size: 12px;
}


/* PREVIEW */

.landing-preview-card {
    padding: 25px;

    background: white;

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

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.08);
}

.landing-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 20px;

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

.landing-preview-header > div:first-child {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.landing-preview-header span {
    color: var(--muted);

    font-size: 10px;

    text-transform: uppercase;
}

.landing-preview-header strong {
    font-size: 17px;
}

.landing-preview-avatar {
    width: 40px;
    height: 40px;

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

    background: #2563eb;

    border-radius: 10px;

    color: white;

    font-weight: 800;
}

.landing-preview-stats {
    display: grid;

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

    gap: 10px;

    margin: 20px 0;
}

.landing-preview-stats > div {
    padding: 14px;

    background: #f8fafc;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.landing-preview-stats span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 10px;
}

.landing-preview-stats strong {
    font-size: 20px;
}

.landing-preview-modules {
    display: grid;

    gap: 10px;
}

.landing-preview-modules > div {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.landing-module-icon {
    width: 42px;
    height: 42px;

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

    background: #eff6ff;

    border-radius: 10px;
}

.landing-preview-modules strong {
    display: block;

    margin-bottom: 3px;

    font-size: 12px;
}

.landing-preview-modules small {
    color: var(--muted);

    font-size: 10px;
}


/* FEATURES */

.landing-features {
    padding: 80px 0;

    background: white;

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

.landing-section-heading {
    max-width: 650px;

    margin-bottom: 36px;
}

.landing-section-heading h2 {
    margin: 8px 0;

    font-size: 32px;
}

.landing-section-heading > p:last-child {
    margin: 0;

    color: var(--muted);
}

.landing-feature-grid {
    display: grid;

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

    gap: 18px;
}

.landing-feature-card {
    padding: 25px;

    background: #f9fafb;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.landing-feature-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 18px;

    background: #eff6ff;

    border-radius: 12px;

    font-size: 21px;
}

.landing-feature-card h3 {
    margin: 0 0 9px;

    font-size: 17px;
}

.landing-feature-card p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;
}


/* TEAM */

.landing-team-section {
    padding: 80px 0;
}

.landing-team-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.8fr);

    gap: 60px;

    align-items: center;

    padding: 45px;

    background: #0f172a;

    border-radius: 18px;

    color: white;
}

.landing-team-card h2 {
    margin: 8px 0 12px;

    font-size: 30px;
}

.landing-team-card p {
    max-width: 650px;

    margin: 0;

    color: #cbd5e1;

    line-height: 1.7;
}

.landing-permission-example {
    display: grid;

    gap: 12px;
}

.landing-permission-example > div {
    padding: 16px;

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

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

.landing-permission-example strong {
    display: block;

    margin-bottom: 10px;
}

.landing-permission-example span {
    display: inline-block;

    margin: 3px 4px 3px 0;

    padding: 5px 8px;

    background: rgba(59, 130, 246, 0.18);

    border-radius: 6px;

    color: #bfdbfe;

    font-size: 10px;
}


/* CTA */

.landing-cta {
    padding: 0 0 80px;
}

.landing-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 35px 40px;

    background: white;

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

.landing-cta-card h2 {
    margin: 0 0 7px;

    font-size: 25px;
}

.landing-cta-card p {
    margin: 0;

    color: var(--muted);
}


/* FOOTER */

.landing-footer {
    padding: 28px 0;

    background: white;

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

.landing-footer .landing-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.landing-footer span {
    color: var(--muted);

    font-size: 11px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .landing-hero-grid,
    .landing-team-card {
        grid-template-columns: 1fr;
    }

    .landing-feature-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 650px) {

    .landing-nav {
        align-items: flex-start;

        flex-direction: column;

        padding: 16px 0;
    }

    .landing-nav-actions {
        width: 100%;
    }

    .landing-nav-actions .btn {
        flex: 1;
    }

    .landing-hero {
        padding: 60px 0;
    }

    .landing-hero-grid {
        gap: 40px;
    }

    .landing-hero-actions,
    .landing-cta-card {
        align-items: stretch;

        flex-direction: column;
    }

    .landing-hero-actions .btn,
    .landing-cta-card .btn {
        width: 100%;
    }

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

    .landing-team-card {
        padding: 28px 22px;
    }

    .landing-footer .landing-container {
        align-items: flex-start;

        flex-direction: column;
    }

}
/* =========================================================
   AUTHENTICATION PAGES
========================================================= */

.auth-page {
    margin: 0;

    min-height: 100vh;

    background: #f8fafc;

    color: var(--text);
}

.auth-layout {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(380px, 0.9fr)
        minmax(500px, 1.1fr);
}


/* LEFT PANEL */

.auth-side-panel {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 42px 55px;

    background: #0f172a;

    color: white;
}

.auth-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    color: white;

    text-decoration: none;
}

.auth-brand > div:last-child {
    display: flex;
    flex-direction: column;
}

.auth-brand strong {
    font-size: 17px;
}

.auth-brand small {
    margin-top: 2px;

    color: #94a3b8;

    font-size: 10px;
}

.auth-side-content {
    width: 100%;

    max-width: 520px;

    margin: auto 0;
}

.auth-eyebrow {
    margin: 0 0 12px;

    color: #60a5fa;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.auth-side-content h1 {
    margin: 0 0 18px;

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.07;

    letter-spacing: -0.04em;
}

.auth-side-content > p:not(.auth-eyebrow) {
    margin: 0;

    color: #cbd5e1;

    font-size: 15px;

    line-height: 1.7;
}

.auth-benefits {
    display: grid;

    gap: 12px;

    margin-top: 32px;
}

.auth-benefits > div {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #e2e8f0;

    font-size: 13px;
}

.auth-benefits span {
    width: 23px;
    height: 23px;

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

    flex: 0 0 23px;

    background: rgba(37, 99, 235, 0.2);

    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 50%;

    color: #93c5fd;

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


/* RIGHT PANEL */

.auth-main {
    min-height: 100vh;

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

    padding: 50px;
}

.auth-form-wrapper {
    width: 100%;

    max-width: 520px;
}

.auth-login-wrapper {
    max-width: 450px;
}

.auth-back-link {
    display: inline-block;

    margin-bottom: 35px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.auth-back-link:hover {
    color: #2563eb;
}

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

.auth-heading h2 {
    margin: 7px 0 8px;

    font-size: 32px;

    letter-spacing: -0.025em;
}

.auth-heading > p:last-child {
    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;
}


/* FORM */

.auth-form {
    display: grid;

    gap: 17px;

    margin-top: 22px;
}

.auth-field {
    display: grid;

    gap: 7px;
}

.auth-field label {
    color: #334155;

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

.auth-field input {
    width: 100%;

    height: 46px;

    box-sizing: border-box;

    padding: 0 13px;

    background: white;

    border: 1px solid #d8dee8;
    border-radius: 8px;

    outline: none;

    color: #0f172a;

    font: inherit;

    font-size: 13px;

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

.auth-field input::placeholder {
    color: #a1a9b7;
}

.auth-field input:focus {
    border-color: #2563eb;

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

.auth-submit {
    width: 100%;

    min-height: 47px;

    margin-top: 5px;

    padding: 0 18px;

    background: #2563eb;

    border: 1px solid #2563eb;
    border-radius: 8px;

    color: white;

    cursor: pointer;

    font: inherit;

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

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.auth-submit:hover {
    background: #1d4ed8;
}

.auth-submit:active {
    transform: translateY(1px);
}


/* MESSAGES */

.auth-form-wrapper .error-message,
.auth-form-wrapper .success-message {
    margin-bottom: 20px;

    padding: 13px 15px;

    border-radius: 8px;

    font-size: 11px;

    line-height: 1.5;
}

.auth-switch {
    margin: 22px 0 0;

    color: var(--muted);

    text-align: center;

    font-size: 12px;
}

.auth-switch a {
    color: #2563eb;

    font-weight: 700;

    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}


/* ADMIN */

.admin-auth-side {
    background: #0b1220;
}

.admin-auth-note {
    margin-top: 25px;

    padding-top: 18px;

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

    color: var(--muted);

    font-size: 10px;

    text-align: center;
}


/* RESPONSIVE */

@media (max-width: 900px) {

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

    .auth-side-panel {
        min-height: auto;

        padding: 30px;
    }

    .auth-side-content {
        margin: 70px 0 30px;
    }

    .auth-side-content h1 {
        max-width: 650px;
    }

    .auth-main {
        min-height: auto;

        padding: 50px 25px 70px;
    }

}


@media (max-width: 520px) {

    .auth-side-panel {
        padding: 24px 20px;
    }

    .auth-side-content {
        margin: 50px 0 20px;
    }

    .auth-side-content h1 {
        font-size: 34px;
    }

    .auth-main {
        padding: 40px 20px 60px;
    }

    .auth-heading h2 {
        font-size: 28px;
    }

}
/* =========================================================
   SUPER ADMIN SUBSCRIPTION
========================================================= */

.admin-subscription-card {
    max-width: 900px;
}

.admin-approval-actions,
.admin-subscription-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    padding: 20px 24px;
}

.admin-approval-actions form,
.admin-subscription-actions form {
    margin: 0;
}

.admin-action-help {
    margin: 0;

    padding: 0 24px 20px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;
}

.admin-subscription-info {
    display: grid;

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

    gap: 1px;

    background: var(--border);

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

.admin-subscription-info > div {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 18px 24px;

    background: white;
}

.admin-subscription-info span {
    color: var(--muted);

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

    text-transform: uppercase;
}

.admin-subscription-info strong {
    font-size: 16px;
}

.admin-expiration-form {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin: 0 24px 24px;

    padding: 18px;

    background: #f9fafb;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.admin-expiration-form > div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.admin-expiration-form > div strong {
    font-size: 12px;
}

.admin-expiration-form > div span {
    color: var(--muted);

    font-size: 10px;
}

.admin-expiration-form form {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0;
}

.admin-expiration-form input[type="date"] {
    min-height: 40px;

    padding: 0 11px;

    background: white;

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

    font: inherit;

    font-size: 12px;
}

@media (max-width: 700px) {

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

    .admin-expiration-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-expiration-form form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-expiration-form .btn {
        width: 100%;
    }

}
/* =========================================================
   SUPER ADMIN - SUBSCRIPTION LIST
========================================================= */

.table-muted {
    color: var(--muted);
}

.subscription-date {
    white-space: nowrap;

    font-size: 11px;
}

.status-warning {
    background: #fff7ed;

    border: 1px solid #fed7aa;

    color: #c2410c;
}
.admin-owner-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1px;

    margin-bottom: 24px;

    background: var(--border);

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

    overflow: hidden;
}

.admin-owner-summary > div {
    padding: 16px 18px;

    background: white;
}

.admin-owner-summary span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

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

    text-transform: uppercase;
}

.admin-owner-summary strong {
    font-size: 13px;
}

@media (max-width: 700px) {

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

}
/* =========================================================
   LANDING - UPDATED PRICING
========================================================= */

.landing-price-highlight {
    display: flex;
    align-items: baseline;

    gap: 7px;

    margin-top: 25px;
}

.landing-price-highlight strong {
    color: #0f172a;

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

.landing-price-highlight span {
    color: var(--muted);

    font-size: 13px;
}

.landing-price-note {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.landing-process-section {
    padding: 80px 0;
}

.landing-process-grid {
    display: grid;

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

    gap: 16px;
}

.landing-process-card {
    padding: 24px;

    background: white;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.landing-process-card > span {
    width: 34px;
    height: 34px;

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

    margin-bottom: 18px;

    background: #eff6ff;

    border-radius: 50%;

    color: #2563eb;

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

.landing-process-card h3 {
    margin: 0 0 8px;

    font-size: 15px;
}

.landing-process-card p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   PRICING
========================================================= */

.landing-pricing-section {
    padding: 80px 0;

    background: white;

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

.landing-pricing-heading {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.landing-pricing-card {
    width: min(460px, 100%);

    box-sizing: border-box;

    margin: 0 auto;

    padding: 32px;

    background: #ffffff;

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

    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.08);
}

.landing-pricing-top > span {
    display: block;

    margin-bottom: 14px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.landing-pricing-price {
    display: flex;
    align-items: center;

    gap: 10px;
}

.landing-pricing-price > strong {
    font-size: 48px;

    line-height: 1;

    letter-spacing: -0.04em;
}

.landing-pricing-price > div {
    display: flex;
    flex-direction: column;
}

.landing-pricing-price span {
    color: #334155;

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

.landing-pricing-price small {
    color: var(--muted);

    font-size: 10px;
}

.landing-pricing-top p {
    margin: 17px 0 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;
}

.landing-pricing-features {
    display: grid;

    gap: 11px;

    margin: 27px 0;
    padding: 23px 0;

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

.landing-pricing-features span {
    color: #334155;

    font-size: 12px;
}

.landing-pricing-button {
    width: 100%;

    box-sizing: border-box;

    justify-content: center;

    min-height: 48px;
}

.landing-pricing-note {
    display: block;

    margin-top: 14px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   UPDATED FEATURE GRID
========================================================= */

.landing-feature-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


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

@media (max-width: 1000px) {

    .landing-process-grid,
    .landing-feature-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .landing-process-grid,
    .landing-feature-grid {
        grid-template-columns: 1fr;
    }

    .landing-pricing-card {
        padding: 25px 20px;
    }

    .landing-pricing-price > strong {
        font-size: 40px;
    }

}
/* =========================================================
   CONTACT / ASSISTANCE
========================================================= */

.landing-contact-section {
    padding: 70px 0;
}

.landing-contact-card {
    max-width: 720px;

    margin: 0 auto;

    text-align: center;
}

.landing-contact-card h2 {
    margin: 8px 0 14px;

    font-size: 28px;
}

.landing-contact-card > p {
    max-width: 600px;

    margin: 0 auto 10px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.7;
}

.landing-contact-info {
    display: flex;
    justify-content: center;

    gap: 50px;

    margin-top: 28px;
}

.landing-contact-info div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.landing-contact-info small {
    color: var(--muted);

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

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.landing-contact-info strong {
    color: #0f172a;

    font-size: 13px;
}


/* MOBILE */

@media (max-width: 650px) {

    .landing-contact-info {
        flex-direction: column;

        gap: 18px;
    }

}
/* =========================================================
   BUSINESS LOGO SETTINGS
========================================================= */

.business-logo-preview {
    width: 120px;
    height: 120px;

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

    margin: 20px 0 25px;

    padding: 10px;

    background: white;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.business-logo-preview img {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

.business-logo-empty {
    margin: 20px 0 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px dashed var(--border);
    border-radius: 10px;

    color: var(--muted);

    font-size: 12px;
}

.form-help {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;
}
/* =========================================================
   SIDEBAR BUSINESS LOGO
========================================================= */

.sidebar-business-user {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 12px;
}

.sidebar-business-logo {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.sidebar-business-logo img {
    width: 100%;
    height: 100%;

    padding: 4px;

    box-sizing: border-box;

    object-fit: contain;
}

.sidebar-business-logo span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #2563eb;

    color: white;

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

.sidebar-business-user .sidebar-user {
    min-width: 0;

    flex: 1;
}

.sidebar-business-user .sidebar-user strong,
.sidebar-business-user .sidebar-user small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}
/* =========================================================
   INVOICE BUSINESS LOGO
========================================================= */

.invoice-business-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.invoice-business-logo {
    width: 70px;
    height: 70px;

    flex-shrink: 0;

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

    padding: 6px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.invoice-business-logo img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

.invoice-business-details h2 {
    margin-top: 5px;
}

@media print {

    .invoice-business-logo {
        border: none;
    }

    .invoice-business-logo img {
        max-width: 70px;
        max-height: 70px;
    }

}
/* =========================================================
   INVOICE SIGNATURE
========================================================= */

.invoice-signature-section {
    display: flex;
    justify-content: flex-end;

    margin-top: 45px;
    margin-bottom: 35px;
}

.invoice-signature-box {
    width: 220px;

    text-align: center;
}

.invoice-signature-box strong {
    display: block;

    margin-bottom: 55px;

    font-size: 12px;
    color: #334155;
}

.invoice-signature-space {
    width: 100%;

    border-bottom: 1px solid #94a3b8;
}


/* PRINT */

@media print {

    .invoice-signature-section {
        margin-top: 40px;
        margin-bottom: 30px;
    }

}