/**
 * Compact Notebook Styles
 * Ottimizzazioni per schermi notebook (<=1440px)
 * Breakpoint progressivi: 1440px, 1366px, 1280px
 * Caricato dopo sidebar.css per garantire cascade corretto
 */

/* ============================================================
   BREAKPOINT 1: <= 1440px (Large notebooks, small desktops)
   Base reduction: ~6% smaller
   ============================================================ */
@media (max-width: 1440px) {

    /* === Sidebar === */
    .app-sidebar {
        width: 250px !important;
        font-size: 15px;
    }

    .main-content {
        margin-left: 250px !important;
        padding: 1.25rem !important;
    }

    .app-sidebar.collapsed ~ .main-content {
        margin-left: 64px !important;
    }

    /* === Content & Topbar === */
    .content {
        padding: 1.25rem !important;
    }

    .topbar {
        padding: 0.5rem 1.25rem !important;
    }

    /* === Page Header === */
    .page-title {
        font-size: 1.375rem;
    }

    .main-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .page-subtitle {
        font-size: 0.8125rem;
    }

    /* === Cards === */
    .card-header {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card {
        margin-bottom: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    /* === Grid & Spacing === */
    .grid {
        gap: 1rem;
    }

    /* Tailwind utility overrides for notebook */
    .gap-6 {
        gap: 1rem !important;
    }

    .gap-4 {
        gap: 0.75rem !important;
    }

    .p-8 {
        padding: 1.25rem !important;
    }

    .p-6 {
        padding: 1rem !important;
    }

    .p-5 {
        padding: 0.875rem !important;
    }

    .mb-6 {
        margin-bottom: 1rem !important;
    }

    .mb-8 {
        margin-bottom: 1.25rem !important;
    }

    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }

    /* === Search & Filters === */
    .search-filters {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* === Tables === */
    .table th,
    .table td {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .table th {
        font-size: 0.6875rem;
    }

    /* === Sidebar Nav Items === */
    .nav-item {
        padding: 0.5rem 0.875rem;
        margin: 0.1rem 0.5rem;
    }

    .nav-label {
        font-size: 0.8125rem;
    }

    .nav-section-title {
        padding: 0.5rem 0.875rem;
        font-size: 0.625rem;
    }

    .nav-section-group {
        margin: 0.375rem 0.5rem;
    }

    .sidebar-header {
        padding: 0.5rem 0.875rem;
    }

    .app-name {
        font-size: 1rem;
    }

    /* === Buttons === */
    .btn {
        padding: 0.4rem 0.875rem;
        font-size: 0.8125rem;
    }

    .btn-sm {
        padding: 0.25rem 0.625rem;
        font-size: 0.6875rem;
    }

    /* === Form Controls === */
    .form-control,
    .form-select {
        padding: 0.4rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* === Modals === */
    .modal-header {
        padding: 1rem 1.25rem;
    }

    .modal-body {
        padding: 1rem 1.25rem;
    }

    .modal-footer {
        padding: 0.75rem 1.25rem;
    }

    /* === Tailwind text size overrides === */
    .text-2xl {
        font-size: 1.375rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }

    .text-lg {
        font-size: 0.9375rem !important;
    }

    /* === Icon containers === */
    .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .w-10.h-10 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

}

/* === Dark mode compatibility for 1440px === */
@media (max-width: 1440px) {
    .dark .card-header {
        padding: 0.875rem 1rem;
    }

    .dark .card-body {
        padding: 1rem;
    }

    .dark .main-content {
        margin-left: 250px !important;
        padding: 1.25rem !important;
    }

    .dark .app-sidebar.collapsed ~ .main-content {
        margin-left: 64px !important;
    }
}


/* ============================================================
   BREAKPOINT 2: <= 1366px (Standard notebooks - 1366x768)
   Base reduction: ~12% smaller
   ============================================================ */
@media (max-width: 1366px) {

    /* === Sidebar === */
    .app-sidebar {
        width: 220px !important;
        font-size: 14px;
    }

    .main-content {
        margin-left: 220px !important;
        padding: 1rem !important;
    }

    .app-sidebar.collapsed ~ .main-content {
        margin-left: 64px !important;
    }

    /* === Content & Topbar === */
    .content {
        padding: 1rem !important;
    }

    .topbar {
        padding: 0.4rem 1rem !important;
    }

    /* === Page Header === */
    .page-title {
        font-size: 1.25rem;
    }

    .main-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .page-subtitle {
        font-size: 0.75rem;
    }

    /* === Cards === */
    .card-header {
        padding: 0.75rem 0.875rem;
        font-size: 0.9375rem;
    }

    .card-body {
        padding: 0.875rem;
    }

    .card {
        margin-bottom: 0.75rem;
    }

    .stat-card {
        padding: 0.875rem;
    }

    .stat-value {
        font-size: 1.375rem;
        margin-bottom: 0.125rem;
    }

    .stat-label {
        font-size: 0.6875rem;
    }

    /* === Grid & Spacing === */
    .grid {
        gap: 0.75rem;
    }

    .gap-6 {
        gap: 0.75rem !important;
    }

    .gap-4 {
        gap: 0.625rem !important;
    }

    .p-8 {
        padding: 1rem !important;
    }

    .p-6 {
        padding: 0.875rem !important;
    }

    .p-5 {
        padding: 0.75rem !important;
    }

    .mb-6 {
        margin-bottom: 0.75rem !important;
    }

    .mb-8 {
        margin-bottom: 1rem !important;
    }

    .space-y-6 > * + * {
        margin-top: 0.75rem !important;
    }

    /* === Search & Filters === */
    .search-filters {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    /* === Tables === */
    .table th,
    .table td {
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }

    .table th {
        font-size: 0.6875rem;
    }

    /* === Sidebar Nav Items === */
    .nav-item {
        padding: 0.4rem 0.75rem;
        margin: 0.075rem 0.375rem;
    }

    .nav-label {
        font-size: 0.75rem;
    }

    .nav-section-title {
        padding: 0.375rem 0.75rem;
        font-size: 0.5625rem;
    }

    .nav-section-group {
        margin: 0.25rem 0.375rem;
    }

    .sidebar-header {
        padding: 0.4rem 0.75rem;
    }

    .app-name {
        font-size: 0.9375rem;
    }

    .app-version {
        font-size: 0.625rem;
    }

    /* === Buttons === */
    .btn {
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }

    .btn-sm {
        padding: 0.2rem 0.5rem;
        font-size: 0.625rem;
    }

    /* === Form Controls === */
    .form-control,
    .form-select {
        padding: 0.35rem 0.625rem;
        font-size: 0.75rem;
    }

    /* === Modals === */
    .modal-header {
        padding: 0.875rem 1rem;
    }

    .modal-body {
        padding: 0.875rem 1rem;
    }

    .modal-footer {
        padding: 0.625rem 1rem;
    }

    /* === Tailwind text size overrides === */
    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1rem !important;
    }

    .text-lg {
        font-size: 0.875rem !important;
    }

    .text-sm {
        font-size: 0.75rem !important;
    }

    .text-xs {
        font-size: 0.625rem !important;
    }

    /* === Icon containers === */
    .w-12.h-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .w-10.h-10 {
        width: 2rem !important;
        height: 2rem !important;
    }

    /* === User info in sidebar === */
    .user-name {
        font-size: 0.7rem;
    }

    .user-role {
        font-size: 0.5625rem;
    }
}

/* === Dark mode compatibility for 1366px === */
@media (max-width: 1366px) {
    .dark .card-header {
        padding: 0.75rem 0.875rem;
    }

    .dark .card-body {
        padding: 0.875rem;
    }

    .dark .main-content {
        margin-left: 220px !important;
        padding: 1rem !important;
    }

    .dark .app-sidebar.collapsed ~ .main-content {
        margin-left: 64px !important;
    }
}


/* ============================================================
   BREAKPOINT 3: <= 1280px (Small notebooks - 1280x720/800)
   Base reduction: ~19% smaller
   ============================================================ */
@media (max-width: 1280px) {

    /* === Sidebar === */
    .app-sidebar {
        width: 200px !important;
        font-size: 13px;
    }

    .main-content {
        margin-left: 200px !important;
        padding: 0.875rem !important;
    }

    .app-sidebar.collapsed ~ .main-content {
        margin-left: 64px !important;
    }

    /* === Content & Topbar === */
    .content {
        padding: 0.875rem !important;
    }

    .topbar {
        padding: 0.375rem 0.875rem !important;
    }

    /* === Page Header === */
    .page-title {
        font-size: 1.125rem;
    }

    .main-header {
        margin-bottom: 0.625rem;
        padding-bottom: 0.375rem;
    }

    .page-subtitle {
        font-size: 0.6875rem;
    }

    /* === Cards === */
    .card-header {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card {
        margin-bottom: 0.625rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-value {
        font-size: 1.25rem;
        margin-bottom: 0.125rem;
    }

    .stat-label {
        font-size: 0.625rem;
    }

    /* === Grid & Spacing === */
    .grid {
        gap: 0.625rem;
    }

    .gap-6 {
        gap: 0.625rem !important;
    }

    .gap-4 {
        gap: 0.5rem !important;
    }

    .p-8 {
        padding: 0.875rem !important;
    }

    .p-6 {
        padding: 0.75rem !important;
    }

    .p-5 {
        padding: 0.625rem !important;
    }

    .mb-6 {
        margin-bottom: 0.625rem !important;
    }

    .mb-8 {
        margin-bottom: 0.875rem !important;
    }

    .space-y-6 > * + * {
        margin-top: 0.625rem !important;
    }

    /* === Search & Filters === */
    .search-filters {
        padding: 0.625rem;
        margin-bottom: 0.625rem;
    }

    /* === Tables === */
    .table th,
    .table td {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }

    .table th {
        font-size: 0.625rem;
    }

    /* === Sidebar Nav Items === */
    .nav-item {
        padding: 0.35rem 0.625rem;
        margin: 0.05rem 0.3rem;
    }

    .nav-label {
        font-size: 0.6875rem;
    }

    .nav-section-title {
        padding: 0.3rem 0.625rem;
        font-size: 0.5rem;
    }

    .nav-section-group {
        margin: 0.2rem 0.3rem;
    }

    .sidebar-header {
        padding: 0.35rem 0.625rem;
    }

    .app-name {
        font-size: 0.875rem;
    }

    .app-version {
        font-size: 0.5625rem;
    }

    /* === Buttons === */
    .btn {
        padding: 0.3rem 0.625rem;
        font-size: 0.6875rem;
    }

    .btn-sm {
        padding: 0.175rem 0.4rem;
        font-size: 0.5625rem;
    }

    /* === Form Controls === */
    .form-control,
    .form-select {
        padding: 0.3rem 0.5rem;
        font-size: 0.6875rem;
    }

    /* === Modals === */
    .modal-header {
        padding: 0.75rem 0.875rem;
    }

    .modal-body {
        padding: 0.75rem 0.875rem;
    }

    .modal-footer {
        padding: 0.5rem 0.875rem;
    }

    /* === Tailwind text size overrides === */
    .text-2xl {
        font-size: 1.125rem !important;
    }

    .text-xl {
        font-size: 0.9375rem !important;
    }

    .text-lg {
        font-size: 0.8125rem !important;
    }

    .text-sm {
        font-size: 0.6875rem !important;
    }

    .text-xs {
        font-size: 0.5625rem !important;
    }

    /* === Icon containers === */
    .w-12.h-12 {
        width: 2rem !important;
        height: 2rem !important;
    }

    .w-10.h-10 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    /* === User info in sidebar === */
    .user-name {
        font-size: 0.625rem;
    }

    .user-role {
        font-size: 0.5rem;
    }
}

/* === Dark mode compatibility for 1280px === */
@media (max-width: 1280px) {
    .dark .card-header {
        padding: 0.625rem 0.75rem;
    }

    .dark .card-body {
        padding: 0.75rem;
    }

    .dark .main-content {
        margin-left: 200px !important;
        padding: 0.875rem !important;
    }

    .dark .app-sidebar.collapsed ~ .main-content {
        margin-left: 64px !important;
    }
}