/* =========================================================
   VARIABLES
========================================================= */

:root {

    --primary: #5146e5;
    --primary-dark: #4038c7;

    --sidebar: #101b33;
    --sidebar-2: #0d1930;

    --text: #101828;
    --muted: #718096;

    --border: #e7ebf3;

    --background: #f7f9fc;

    --white: #ffffff;

    --green: #16a34a;
    --orange: #f59e0b;
    --red: #ef4444;

    --shadow:
        0 3px 15px rgba(20,35,70,.06);

    --radius: 12px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {

    font-family: Inter, sans-serif;

    background: var(--background);

    color: var(--text);

    font-size: 13px;
}

button,
input,
select {
    font-family: inherit;
}


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

.dashboard {

    min-height: 100vh;

    display: flex;
}


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

.sidebar {

    width: 205px;

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    background:
        linear-gradient(
            180deg,
            var(--sidebar),
            var(--sidebar-2)
        );

    z-index: 100;

    color: #fff;
}


.logo {

    height: 68px;

    padding: 14px 20px;

    display: flex;

    align-items: center;
}


.logo img {

    max-width: 145px;

    max-height: 42px;

    width: auto;

    height: auto;

    object-fit: contain;
}


.menu {

    padding: 10px;
}


.menu-item {

    height: 42px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 0 12px;

    margin-bottom: 4px;

    border-radius: 7px;

    color: #e7ebf5;

    text-decoration: none;

    font-size: 12px;

    font-weight: 500;

    transition: .2s;
}


.menu-item i {

    width: 18px;

    text-align: center;

    font-size: 14px;
}


.menu-item:hover {

    background: rgba(255,255,255,.08);
}


.menu-item.active {

    background:
        linear-gradient(
            90deg,
            #5146e5,
            #5b4bf0
        );

    box-shadow:
        0 6px 15px
        rgba(79,70,229,.25);
}


.menu-divider {

    height: 1px;

    margin: 17px 10px;

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


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

.main {

    margin-left: 205px;

    width: calc(100% - 205px);

    min-width: 0;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {

    height: 68px;

    background: #fff;

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

    display: flex !important;

    align-items: center;

    justify-content: space-between;

    padding: 0 28px;

    position: sticky;

    top: 0;

    z-index: 50;
}


.search {

    width: 360px;

    height: 38px;

    border:
        1px solid #e3e7ef;

    border-radius: 8px;

    display: flex;

    align-items: center;

    padding: 0 13px;

    color: #94a3b8;
}


.search i {

    margin-right: 10px;
}


.search input {

    border: 0;

    outline: 0;

    width: 100%;

    font-size: 12px;
}


.top-actions {

    display: flex;

    align-items: center;

    gap: 22px;
}


.icon-button {

    border: 0;

    background: transparent;

    cursor: pointer;

    position: relative;

    color: #475569;

    font-size: 16px;
}


.notification-dot {

    position: absolute;

    top: -3px;

    right: -3px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #ef4444;
}


.profile {

    display: flex;

    align-items: center;

    gap: 10px;
}


.avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    object-fit: cover;
}


.profile-info {

    line-height: 1.3;
}


.profile-name {

    font-size: 12px;

    font-weight: 600;
}


.profile-role {

    font-size: 10px;

    color: #8a94a6;
}


.profile > i {

    font-size: 9px;

    color: #64748b;

    margin-left: 8px;
}


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

.content {

    padding: 22px 28px 35px;
}


.page-title {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 16px;
}


/* =========================================================
   STATISTICS
========================================================= */

.stats {

    display: grid;

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

    gap: 18px;
}


.stat-card {

    background: #fff;

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

    border-radius: var(--radius);

    padding: 18px;

    display: flex;

    align-items: center;

    gap: 14px;

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


.stat-icon {

    width: 44px;

    height: 44px;

    flex: 0 0 44px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 18px;
}


.stat-icon.blue {

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #6366f1
        );
}


.stat-icon.green {

    background: #22c55e;
}


.stat-icon.sky {

    background: #1687e8;
}


.stat-icon.orange {

    background: #f59e0b;
}


.stat-label {

    font-size: 10px;

    color: #64748b;

    margin-bottom: 5px;
}


.stat-value {

    font-size: 22px;

    line-height: 1.2;

    font-weight: 700;
}


.stat-subtitle {

    font-size: 9px;

    color: #16a34a;

    margin-top: 4px;
}


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

.dashboard-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, 1fr)
        245px;

    gap: 18px;

    margin-top: 18px;
}


.card {

    background: #fff;

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    min-width: 0;
}


.card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 17px 19px 5px;
}


.card-title {

    font-size: 12px;

    font-weight: 700;
}


.view-all {

    font-size: 10px;

    color: var(--primary);

    text-decoration: none;
}


/* =========================================================
   CHART
========================================================= */

.chart-card {

    height: 230px;
}


.chart-container {

    height: 175px;

    padding: 5px 18px 10px;
}


.chart-card select {

    border:
        1px solid #e5e9f0;

    background: #fff;

    border-radius: 6px;

    padding: 5px 8px;

    font-size: 9px;

    color: #475569;

    outline: none;
}


/* =========================================================
   BOOKINGS
========================================================= */

.booking-list {

    padding: 8px 18px 15px;
}


.booking {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 0;

    border-bottom:
        1px solid #f1f3f7;
}


.booking:last-child {

    border-bottom: 0;
}


.booking-avatar {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    object-fit: cover;
}


.booking-info {

    flex: 1;

    min-width: 0;
}


.booking-name {

    font-size: 11px;

    font-weight: 600;
}


.booking-service {

    font-size: 9px;

    color: #7b8798;

    margin-top: 2px;
}


.booking-date {

    font-size: 9px;

    color: #64748b;

    white-space: nowrap;
}


.empty-state {

    padding: 35px 10px;

    text-align: center;

    color: #94a3b8;

    font-size: 11px;
}


/* =========================================================
   CALENDAR
========================================================= */

.calendar-card {

    grid-column: 3;

    grid-row: span 2;
}


.calendar {

    padding: 12px 16px 18px;
}


.calendar-month {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 11px;

    margin-bottom: 15px;
}


.calendar-month button {

    border: 0;

    background: transparent;

    color: #475569;

    cursor: pointer;
}


.calendar-week,
.calendar-days {

    display: grid;

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

    text-align: center;
}


.calendar-week span {

    font-size: 8px;

    color: #64748b;

    margin-bottom: 10px;
}


.calendar-days span {

    font-size: 9px;

    padding: 7px 0;
}


.calendar-days .muted {

    color: #c1c7d0;
}


.calendar-days .selected {

    background: var(--primary);

    color: #fff;

    width: 23px;

    height: 23px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    padding: 0;
}


/* =========================================================
   RECENT PAYMENTS
========================================================= */

.recent-payments {

    margin-top: 18px;
}


.payments-table {

    width: 100%;
}


.payment-header,
.payment-row {

    display: grid;

    grid-template-columns:
        1.4fr
        .8fr
        .8fr
        .8fr
        .9fr;

    align-items: center;

    gap: 10px;

    padding:
        11px 19px;

    font-size: 10px;
}


.payment-header {

    color: #718096;

    font-size: 9px;

    font-weight: 500;

    background: #fafbfc;

    border-top:
        1px solid #f0f2f5;

    border-bottom:
        1px solid #f0f2f5;
}


.payment-row {

    border-bottom:
        1px solid #f0f2f5;
}


.payment-row:last-child {

    border-bottom: 0;
}


.status {

    display: inline-flex;

    padding: 4px 8px;

    border-radius: 5px;

    font-size: 8px;

    font-weight: 600;
}


.status.paid {

    background: #eaf8ef;

    color: #169c4b;
}


.status.processing {

    background: #fff6df;

    color: #c27b00;
}


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

.mobile-menu {

    display: none;

    border: 0;

    background: transparent;

    font-size: 18px;

    color: #334155;
}


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

@media(max-width:1200px) {

    .dashboard-grid {

        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,1fr);
    }


    .calendar-card {

        grid-column: auto;

        grid-row: auto;
    }

}


@media(max-width:900px) {

    .sidebar {

        transform:
            translateX(-100%);

        transition: .25s;
    }


    .sidebar.open {

        transform:
            translateX(0);
    }


    .main {

        margin-left: 0;

        width: 100%;
    }


    .mobile-menu {

        display: block;

        margin-right: 15px;
    }


    .stats {

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


    .dashboard-grid {

        grid-template-columns: 1fr;
    }

}


@media(max-width:600px) {

    .topbar {

        padding: 0 15px;
    }


    .search {

        display: none;
    }


    .content {

        padding:
            18px 14px 30px;
    }


    .stats {

        grid-template-columns: 1fr;
    }


    .profile-info {

        display: none;
    }


    .top-actions {

        gap: 15px;
    }


    .payment-header {

        display: none;
    }


    .payment-row {

        grid-template-columns:
            1fr auto;

        padding: 12px 15px;
    }


    .payment-row > div:nth-child(2) {

        display: none;
    }


    .payment-row > div:nth-child(5) {

        font-size: 8px;

        color: #718096;
    }

}
.page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}
.page-heading-wrap h1{margin:0;font-size:20px;line-height:1.3}
.page-heading-wrap p{margin:5px 0 0;color:#7b8798;font-size:11px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid #e1e6ef;border-radius:7px;background:#fff;color:#334155;text-decoration:none;font-size:11px;font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.filter-card{padding:14px;margin-bottom:18px}
.filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 240px auto auto;
    gap: 9px;
    align-items: center;
}

.filters .form-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.btn-clear{
    width: 130px;
    background: lightgray;
}
.instructor-filter {
    width: 240px;
    min-width: 0;
}

@media (max-width: 900px) {
    .filters {
        grid-template-columns: 1fr;
    }

    .filters .form-control,
    .instructor-filter {
        width: 100%;
    }
}
.form-control{width:100%;height:36px;border:1px solid #e1e6ef;border-radius:7px;background:#fff;padding:0 11px;outline:none;font-size:11px;color:#334155}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(81,70,229,.08)}
textarea.form-control{height:100px;padding:10px 11px;resize:vertical}
.table-card{overflow:hidden}
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:11px 16px;background:#fafbfc;border-bottom:1px solid #edf0f4;color:#718096;font-size:9px;font-weight:600;text-align:left;white-space:nowrap}
.data-table td{padding:12px 16px;border-bottom:1px solid #f0f2f5;font-size:10px;color:#334155;vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.user-cell{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#eef1f7}
.user-name{font-size:11px;font-weight:600;color:#172033}
.user-email{margin-top:2px;font-size:9px;color:#8792a4}
.status-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:5px;font-size:8px;font-weight:600}
.status-badge.active{background:#eaf8ef;color:#169c4b}
.status-badge.inactive{background:#f1f3f6;color:#7b8798}
.actions{display:flex;align-items:center;gap:6px}
.action-btn{width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e3e7ef;border-radius:6px;background:#fff;color:#64748b;text-decoration:none;cursor:pointer}
.action-btn:hover{color:var(--primary);border-color:#cfd4f8}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 16px;border-top:1px solid #edf0f4;font-size:9px;color:#7b8798}
.pagination-links{display:flex;gap:5px}
.pagination-links a,.pagination-links span{min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e1e6ef;border-radius:6px;text-decoration:none;color:#475569;background:#fff}
.pagination-links .current{color:#fff;border-color:var(--primary);background:var(--primary)}
.empty-table{padding:45px 20px;text-align:center;color:#94a3b8;font-size:11px}
.alert{padding:11px 13px;border-radius:7px;margin-bottom:15px;font-size:10px}
.alert.success{background:#eaf8ef;color:#16753b}
.alert.error{background:#fff0f0;color:#b42318}
.edit-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:18px}
.form-card{padding:20px}
.form-card h2{margin:0 0 16px;font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-group{min-width:0}
.form-group.full{grid-column:1/-1}
.form-label{display:block;margin-bottom:6px;color:#475569;font-size:10px;font-weight:600}
.form-help{margin-top:5px;color:#94a3b8;font-size:9px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #edf0f4}
.profile-summary{text-align:center;padding:10px 0 20px}
.large-avatar{width:82px;height:82px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.profile-summary h2{margin:0;font-size:14px}
.profile-summary p{margin:4px 0 0;color:#7b8798;font-size:10px}
.summary-list{margin:0;padding:0;list-style:none;border-top:1px solid #edf0f4}
.summary-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #edf0f4;font-size:10px}
.summary-list li span:first-child{color:#7b8798}
.summary-list li span:last-child{font-weight:600;color:#334155;text-align:right}
@media(max-width:900px){.filters{grid-template-columns:1fr 120px auto}.edit-grid{grid-template-columns:1fr}}
@media(max-width:600px){.page-toolbar{align-items:flex-start;flex-direction:column}.filters{grid-template-columns:1fr}.data-table{min-width:760px}.table-card{overflow-x:auto}.form-grid{grid-template-columns:1fr}.form-group.full{grid-column:auto}}