/* Dilek Pilates — Desktop Professional Overrides */

.desktop-topbar {
    display: none;
}

@media (min-width: 1024px) {
    :root {
        --sidebar-width: 248px;
        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 10px;
        --radius-xl: 12px;
        --content-max: 1280px;
    }

    .desktop-topbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        padding: 0 32px;
        height: 52px;
        background: #fff;
        border-bottom: 1px solid var(--stone-200);
        position: sticky;
        top: 0;
        z-index: 50;
    }

    /* ─── Sidebar: light, restrained ─── */
    .sidebar {
        background: #ffffff;
        border-right: 1px solid var(--stone-200);
        color: var(--stone-700);
        box-shadow: none;
    }

    .sidebar-brand {
        padding: 18px 16px;
        border-bottom: 1px solid var(--stone-100);
    }

    .sidebar-logo {
        max-height: 175px;
    }

    .sidebar-brand-text {
        color: var(--stone-900);
        font-size: 0.9375rem;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: var(--brand-600);
        box-shadow: none;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .sidebar-nav {
        padding: 12px 10px;
    }

    .nav-section {
        margin-bottom: 20px;
    }

    .nav-section-title {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--stone-400);
        padding: 0 10px;
        margin-bottom: 4px;
    }

    .nav-link {
        padding: 8px 10px;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--stone-600);
        border-radius: var(--radius-sm);
        border-left: 2px solid transparent;
        margin-bottom: 1px;
    }

    .nav-link svg {
        width: 18px;
        height: 18px;
        opacity: 0.55;
        stroke-width: 1.5;
    }

    .nav-link:hover {
        background: var(--stone-50);
        color: var(--stone-900);
    }

    .nav-link:hover svg { opacity: 0.85; }

    .nav-link.active {
        background: var(--brand-50);
        color: var(--brand-700);
        border-left-color: var(--brand-600);
        box-shadow: none;
        font-weight: 600;
    }

    .nav-link.active svg {
        opacity: 1;
        color: var(--brand-600);
    }

    .nav-link-muted {
        color: var(--stone-500);
    }

    .nav-link-muted:hover {
        color: var(--stone-700);
    }

    .sidebar-footer {
        padding: 12px 10px 16px;
        border-top: 1px solid var(--stone-100);
    }

    .user-card {
        background: var(--stone-50);
        border: 1px solid var(--stone-100);
        padding: 8px 10px;
        margin-bottom: 6px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--brand-600);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .user-name {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--stone-900);
    }

    .user-role {
        font-size: 0.6875rem;
        color: var(--stone-400);
    }

    /* ─── Main shell ─── */
    .main-content {
        background: var(--stone-50);
    }

    .desktop-topbar-date {
        font-size: 0.8125rem;
        color: var(--stone-500);
        font-weight: 500;
    }

    .desktop-topbar-user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 8px 4px 4px;
        border-radius: var(--radius-md);
        border: 1px solid var(--stone-200);
        background: var(--stone-25);
    }

    .desktop-topbar-user .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .desktop-topbar-user .user-name {
        font-size: 0.8125rem;
        color: var(--stone-800);
    }

    .desktop-topbar-logout {
        font-size: 0.8125rem;
        color: var(--stone-500);
        padding: 6px 10px;
        border-radius: var(--radius-sm);
        transition: all var(--transition);
    }

    .desktop-topbar-logout:hover {
        background: var(--stone-100);
        color: var(--stone-800);
    }

    /* ─── Page header ─── */
    .page-header {
        background: transparent;
        padding: 28px 32px 0;
        max-width: var(--content-max);
        width: 100%;
        margin: 0 auto;
    }

    .page-header-eyebrow {
        display: none;
    }

    .page-header h2 {
        font-size: 1.375rem;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--stone-900);
    }

    .page-header-actions .btn {
        font-size: 0.8125rem;
    }

    .page-body {
        padding: 20px 32px 40px;
        max-width: var(--content-max);
        width: 100%;
        margin: 0 auto;
    }

    /* ─── Cards: flat, bordered ─── */
    .card {
        border: 1px solid var(--stone-200);
        border-radius: var(--radius-lg);
        box-shadow: none;
        background: #fff;
    }

    .card-header {
        padding: 16px 20px;
        border-bottom: 1px solid var(--stone-100);
        min-height: 52px;
    }

    .card-header h3 {
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .card-body {
        padding: 20px;
    }

    .card-footer {
        background: var(--stone-25);
        padding: 12px 20px;
    }

    /* ─── Stats: clean metric row ─── */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--stone-200);
        border: 1px solid var(--stone-200);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-bottom: 24px;
        box-shadow: none;
    }

    .stat-card {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 20px 22px;
        background: #fff;
    }

    .stat-card::before { display: none; }
    .stat-card:hover {
        transform: none;
        box-shadow: none;
        background: var(--stone-25);
    }

    .stat-card .stat-icon {
        display: none;
    }

    .stat-card .stat-label {
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--stone-500);
        margin-bottom: 6px;
    }

    .stat-card .stat-value {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
    }

    .stat-card .stat-change {
        font-size: 0.75rem;
        margin-top: 6px;
    }

    /* ─── Buttons: solid, no gradient ─── */
    .btn {
        font-size: 0.8125rem;
        font-weight: 500;
        padding: 8px 14px;
        border-radius: var(--radius-sm);
    }

    .btn-primary {
        background: var(--brand-600);
        border-color: var(--brand-600);
        box-shadow: none;
    }

    .btn-primary:hover:not(:disabled) {
        background: var(--brand-700);
        border-color: var(--brand-700);
        filter: none;
        box-shadow: none;
    }

    .btn-lg {
        padding: 10px 18px;
        font-size: 0.875rem;
    }

    /* ─── Forms ─── */
    .form-control {
        font-size: 0.875rem;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        border-color: var(--stone-200);
    }

    .form-control:focus {
        border-color: var(--brand-500);
        box-shadow: 0 0 0 2px rgba(184, 90, 66, 0.1);
    }

    .form-label {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--stone-600);
    }

    /* ─── Tables ─── */
    table.data-table th {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        padding: 10px 16px;
        background: var(--stone-25);
        border-bottom: 1px solid var(--stone-200);
        color: var(--stone-500);
    }

    table.data-table td {
        padding: 12px 16px;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--stone-100);
        color: var(--stone-700);
    }

    table.data-table tbody tr:hover {
        background: var(--stone-25);
    }

    table.data-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* ─── Badges ─── */
    .badge {
        font-size: 0.6875rem;
        font-weight: 600;
        padding: 2px 8px;
    }

    /* ─── Tabs: underline style ─── */
    .tabs {
        background: transparent;
        border-radius: 0;
        padding: 0;
        gap: 0;
        border-bottom: 1px solid var(--stone-200);
        margin-bottom: 24px;
    }

    .tab-link {
        padding: 10px 16px;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--stone-500);
        border-radius: 0;
        background: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }

    .tab-link:hover {
        color: var(--stone-800);
        background: none;
    }

    .tab-link.active {
        color: var(--brand-700);
        background: none;
        box-shadow: none;
        border-bottom-color: var(--brand-600);
        font-weight: 600;
    }

    /* ─── Filter bar ─── */
    .filter-bar,
    .calendar-filters {
        background: #fff;
        border: 1px solid var(--stone-200);
        border-radius: var(--radius-lg);
        padding: 12px 16px;
        box-shadow: none;
        gap: 8px;
    }

    .calendar-filters-toggle { display: none; }

    .calendar-filters-advanced {
        display: flex;
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }

    /* ─── Alerts ─── */
    .alert {
        font-size: 0.875rem;
        padding: 12px 16px;
        border-radius: var(--radius-md);
    }

    /* ─── Layout grids ─── */
    .content-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .content-grid-3-1 {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
    }

    /* ─── Calendar desktop ─── */
    .occupancy-summary-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .occupancy-summary-card {
        box-shadow: none;
        border-radius: var(--radius-md);
    }

    .occupancy-time-strip {
        padding-bottom: 16px;
    }

    .occupancy-time-chip {
        border-radius: var(--radius-sm);
        min-width: 68px;
        padding: 8px 12px;
    }

    .occupancy-time-chip.active {
        box-shadow: none;
    }

    table.calendar-grid th {
        font-size: 0.6875rem;
        padding: 8px;
    }

    .cal-cell {
        height: 64px;
        min-width: 80px;
    }

    /* ─── Schedule ─── */
    .lesson-card {
        border-radius: var(--radius-sm);
        box-shadow: none;
    }

    .lesson-card:hover {
        box-shadow: none;
        border-color: var(--stone-300);
    }

    .schedule-week-grid {
        gap: 10px;
        padding: 16px !important;
    }

    .week-day-column {
        border-radius: var(--radius-md);
    }

    /* ─── Empty state ─── */
    .empty-state {
        padding: 48px 24px;
    }

    /* ─── Pagination ─── */
    .pagination a,
    .pagination span {
        min-width: 32px;
        height: 32px;
        font-size: 0.8125rem;
        border-radius: var(--radius-sm);
    }

    /* ─── Revenue charts ─── */
    .chart-bar {
        border-radius: 3px 3px 0 0;
        background: var(--brand-500);
    }

    .sidebar-footer .user-card {
        display: none;
    }

    .sidebar-footer .nav-link-muted {
        margin-top: 0;
    }

    /* ─── Login desktop ─── */
    .login-card {
        padding: 48px 40px;
        border-radius: var(--radius-xl);
        border: 1px solid var(--stone-200);
        box-shadow: var(--shadow-md);
    }

    .login-page::before {
        display: none;
    }

    .login-page {
        background: var(--stone-100);
    }
}
