:root {
    --primary: #9f3f8f;
    --primary-dark: #7c2c70;
    --secondary: #315f8d;

    --bg: #f7f5f8;
    --surface: #ffffff;

    --text: #25212a;
    --muted: #756d7a;

    --border: #e9e2eb;

    --shadow:
        0 12px 30px rgba(77, 45, 75, 0.08);

    --radius: 18px;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--bg);
    color: var(--text);
}


button,
a {
    font: inherit;
}


button {
    cursor: pointer;
}


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

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

    display: grid;

    grid-template-columns:
        250px 1fr;
}


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

.sidebar {
    min-height: 100vh;

    background: var(--surface);

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

    padding: 24px 18px;

    display: flex;
    flex-direction: column;

    position: sticky;

    top: 0;

    height: 100vh;
}


.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:
        6px 10px 26px;
}

.sidebar-logo {
    display: block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: contain;
}

.brand-text { min-width: 0; }

.brand-text strong {
    display: block;

    color: var(--secondary);

    font-size: 22px;
}


.brand-text span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 15px;
}


/* Navigation */

.dashboard-notice {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #ebc4ce;
    border-radius: 12px;
    background: #fff3f5;
    color: #8c263f;
}
.dashboard-notice p { margin: 0 0 12px; line-height: 1.5; }
.dashboard-notice button,
.dashboard-notice a {
    border: 1px solid currentColor;
    border-radius: 8px;
    padding: 8px 12px;
    background: white;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
}


.sidebar-link {
    display: block;
    padding: 13px 16px;
    border-radius: 12px;
    color: #5f5a68;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    transition: 0.2s ease;
}

.sidebar-link:hover {
    background: #f5f1f5;
    color: #8c287e;
}

.sidebar-link.active {
    background: #f1e2ef;
    color: #8c287e;
}

.nav-item {
    width: 100%;

    border: 0;

    border-radius: 12px;

    padding: 12px 14px;

    background: transparent;

    text-align: left;

    color: var(--muted);

    font-weight: 700;
}


.nav-item:hover {
    background: #f8f2f7;

    color: var(--primary-dark);
}


.nav-item.active {
    background: #f2e4ef;

    color: var(--primary-dark);
}


.sidebar-bottom {
    margin-top: auto;

    display: grid;

    gap: 10px;
}


.cashier-link,
.logout-button {
    width: 100%;

    padding: 11px 14px;

    border-radius: 12px;

    text-align: center;

    font-weight: 700;

    text-decoration: none;
}


.cashier-link {
    background: #eef3f8;

    color: var(--secondary);
}


.logout-button {
    border:
        1px solid var(--border);

    background: #fff;

    color: var(--muted);
}


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

.main-content {
    min-width: 0;

    padding: 30px;

    max-width: 1600px;

    width: 100%;
}


.page-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;
}


.page-header h1 {
    margin: 0;

    font-size: 34px;
}


.page-header p {
    margin:
        5px 0 0;

    color: var(--muted);
}


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

    border-radius: 999px;

    background: #f2e4ef;

    color: var(--primary-dark);

    font-size: 15px;

    font-weight: 800;
}


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

.stats-grid {
    display: grid;

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

    gap: 18px;

    margin-bottom: 22px;
}


.stat-card {
    background: var(--surface);

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

    border-radius: var(--radius);

    padding: 20px;

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


.stat-label {
    display: block;

    color: var(--muted);

    font-size: 16px;

    font-weight: 700;
}


.stat-value {
    display: block;

    margin:
        8px 0 4px;

    font-size: 34px;

    color: var(--primary-dark);
}


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

    font-size: 15px;
}


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

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr) minmax(280px, 0.8fr);

    gap: 20px;
}


.panel {
    background: var(--surface);

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    overflow: hidden;
}


.panel-header {
    padding:
        18px 20px;

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


.panel-header h2 {
    margin: 0;

    font-size: 22px;
}


.panel-header p {
    margin:
        4px 0 0;

    color: var(--muted);

    font-size: 16px;
}


.panel-body {
    padding: 20px;
}


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

.quick-actions {
    display: grid;

    gap: 10px;
}


.quick-action {
    display: block;

    width: 100%;

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

    border-radius: 12px;

    padding: 13px;

    background: #fff;

    color: var(--text);

    text-decoration: none;

    text-align: left;

    font-weight: 700;
}


.quick-action:hover {
    border-color: var(--primary);

    background: #fbf6fa;

    color: var(--primary-dark);
}


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

.empty-state {
    padding: 25px;

    border:
        1px dashed #ddd3df;

    border-radius: 12px;

    text-align: center;

    color: var(--muted);

    background: #fbf8fc;
}

/* =========================
   RECENT TRANSACTIONS
   ========================= */

.transaction-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 15px 0;

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


.transaction-row:first-child {
    padding-top: 0;
}


.transaction-row:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.transaction-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.transaction-info strong {
    font-size: 17px;
}


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

    font-size: 15px;
}


.transaction-right {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


.transaction-amount {
    font-size: 17px;
}


.transaction-status {
    min-width: 80px;

    padding: 5px 9px;

    border-radius: 999px;

    text-align: center;

    font-size: 14px;

    font-weight: 800;

    text-transform: capitalize;
}


.transaction-status.completed {
    background: #e8f5ef;

    color: #287653;
}


.transaction-status.returned {
    background: #fbe9eb;

    color: #b43c46;
}




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

@media (max-width: 600px) {

    .transaction-row {
        align-items: flex-start;

        flex-direction: column;
    }


    .transaction-right {
        width: 100%;

        justify-content: space-between;
    }

}

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


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

}


@media (max-width: 700px) {

    .admin-shell {
        display: block;
    }


    .sidebar {
        min-height: auto;

        height: auto;

        position: static;

        border-right: 0;

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


    .sidebar-nav {
        grid-template-columns:
            repeat(3, 1fr);
    }


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


    .main-content {
        padding: 18px;
    }


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

}
/* Website editor navigation */
.website-editor-back{display:inline-block;margin:0 0 22px;color:var(--primary-dark);font-size:16px;text-decoration:none}.website-editor-back:hover{text-decoration:underline}.website-management-intro{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:12px 0 28px;padding:25px 28px;background:#f0e4ee;border:1px solid #e5d4e1;border-radius:var(--radius)}.website-management-intro h2{margin:0 0 7px;font-size:24px;color:var(--primary-dark)}.website-management-intro p{margin:0;font-size:16px;line-height:1.8;color:var(--muted)}.website-preview-link{white-space:nowrap;background:white;border:1px solid #d9c6d6;border-radius:9px;padding:12px 17px;font-size:16px;color:var(--primary-dark);text-decoration:none}.website-editor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.website-editor-card{display:flex;flex-direction:column;padding:26px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);color:var(--text);text-decoration:none;min-height:250px;transition:border-color .15s,box-shadow .15s}.website-editor-card:hover{border-color:#b985ae;box-shadow:0 12px 28px #7c2c7014}.website-editor-card:focus-visible,.website-preview-link:focus-visible,.website-management-shortcut:focus-visible{outline:3px solid var(--primary);outline-offset:4px}.website-editor-card-top{display:flex;justify-content:space-between;gap:10px;color:var(--primary-dark);font-size:14px;letter-spacing:.4px;margin-bottom:24px}.website-editor-card-top span:last-child{color:#b3a7b4}.website-editor-card h2{font-size:23px;line-height:1.4;margin:0 0 12px}.website-editor-card p{font-size:16px;line-height:1.8;margin:0 0 25px;color:var(--muted)}.website-editor-card-action{margin-top:auto;color:var(--primary-dark);font-size:15px;font-weight:600}.website-management-shortcut{display:flex;justify-content:space-between;align-items:center;gap:25px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:12px;padding:20px 24px;text-decoration:none;color:var(--primary-dark);margin-bottom:25px}.website-management-shortcut strong{display:block;font-size:21px;margin-bottom:7px}.website-management-shortcut div span{font-size:15px;color:var(--muted)}#our-story-editor,#contact-details{scroll-margin-top:25px}