/* ==========================================================================
   DESKTOP.CSS - Desktop Styles (1024px - 1199px)
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1199.98px) {

    /* Sidebar - Light Theme (White Background) */
    .sidebar {
        width: var(--sidebar-width);
        background: #ffffff !important;
        border-right: 1px solid #E5E7EB !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02) !important;
        transform: translateX(0);
        color: #374151 !important;
    }

    .sidebar-header {
        background: #ffffff !important;
        border-bottom: 1px solid #E5E7EB !important;
    }

    .sidebar-logo {
        color: #10B981 !important;
    }

    /* Menu links - Gray on white */
    .sidebar-menu-link,
    .sidebar a {
        color: #4B5563 !important;
        margin: 4px 12px;
        padding: 10px 15px;
        border-radius: 8px;
        transition: all 0.2s;
    }

    .sidebar-menu-link:hover,
    .sidebar a:hover {
        background-color: #F3F4F6 !important;
        color: #374151 !important;
    }

    .sidebar-menu-link.active,
    .sidebar a.active {
        background-color: #ECFDF5 !important;
        color: #10B981 !important;
        font-weight: 600;
    }

    .sidebar-menu-link .material-icons,
    .sidebar a .material-icons {
        color: inherit;
    }

    /* Main content - Full width */
    .main-content {
        margin-left: var(--sidebar-width);
        flex: 1;
        flex-grow: 1;
        width: 100%;
    }

    /* Content wrapper */
    .content-wrapper {
        padding: 1.5rem 2rem;
        flex: 1;
        flex-grow: 1;
        width: 100%;
        max-width: 100%;
        background-color: #F9FAFB;
    }

    /* Grid - 3 columns */
    .grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Calendar - Larger cells */
    .calendar-day {
        min-height: 110px;
        padding: 8px;
    }

    .calendar-event {
        font-size: 0.8125rem;
        padding: 3px 6px;
    }

    .calendar-date-number {
        font-size: 0.9375rem;
        width: 30px;
        height: 30px;
    }

    /* Hide menu toggle */
    .menu-toggle {
        display: none;
    }

    /* Cards */
    .card-header {
        padding: 1.25rem 1.5rem;
    }

    .card-body {
        padding: 1.5rem;
    }
}