/* ===========================================================
   KiSmart Desktop Layout Polish v2.0.0 - 2026-05-30

   Perbaikan untuk:
   1. Tampilan PC/Desktop tidak proporsional
   2. Layout terlalu sempit/melebar
   3. Space kosong berlebihan
   4. Header terlalu tinggi
   5. Card/tabel tidak proporsional

   Breakpoints:
   - Mobile: < 768px
   - Tablet: 768px - 1023px
   - Laptop: 1024px - 1279px
   - Desktop: 1280px - 1535px
   - Large Desktop: >= 1536px
   =========================================================== */

/* ===========================================================
   1. VARIABEL CSS - Desktop Layout System
   =========================================================== */
:root {
  /* Container widths per breakpoint */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-3xl: 1536px;

  /* Content widths */
  --content-max: 1360px;
  --sidebar-width: 280px;
  --header-height: 60px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* ===========================================================
   2. BASE LAYOUT - Desktop
   =========================================================== */
@media (min-width: 1024px) {
  /* Root container */
  #root > div {
    min-height: 100vh;
    max-width: 100%;
  }

  /* Main content wrapper */
  [data-layout="authenticated"],
  [data-layout="main"],
  .app-layout,
  .authenticated-layout {
    display: grid !important;
    grid-template-columns: var(--sidebar-width) 1fr !important;
    gap: var(--space-lg) !important;
    max-width: var(--container-3xl) !important;
    margin: 0 auto !important;
    padding: var(--space-lg) !important;
    min-height: calc(100vh - var(--header-height));
  }

  /* Sidebar - bukan fixed/floating */
  [data-sidebar],
  [class*="sidebar"] {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--ns-border, #d7e5dc) !important;
    background: #fff !important;
  }

  /* Main content area */
  main,
  [data-main],
  .main-content {
    min-width: 0 !important;
    padding: 0 !important;
  }
}

/* ===========================================================
   3. HEADER - Desktop Proporsional
   =========================================================== */
@media (min-width: 1024px) {
  /* Top header - tidak terlalu tinggi */
  [data-header],
  [class*="header-top"],
  header.top-0 {
    min-height: var(--header-height) !important;
    max-height: var(--header-height) !important;
    padding: 0 var(--space-lg) !important;
  }

  [data-header] h1,
  [class*="header-top"] h1,
  header.top-0 h1 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }

  /* Page header - dalam halaman */
  .page-header,
  [class*="page-header"] {
    padding: var(--space-lg) 0 var(--space-md) 0 !important;
    margin-bottom: var(--space-md) !important;
  }

  .page-header h1,
  [class*="page-header"] h1 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--ns-ink, #123524) !important;
  }

  .page-header p,
  [class*="page-header"] p,
  .page-header small {
    font-size: 0.875rem !important;
    color: var(--ns-muted, #64756b) !important;
  }
}

/* ===========================================================
   4. GRID SYSTEM - Desktop Columns
   =========================================================== */
@media (min-width: 1024px) {
  /* Dashboard statistik - 4 kolom */
  .stats-grid,
  .stat-cards,
  [class*="stats-grid"],
  [class*="stat-cards"],
  .grid.grid-cols-1 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--space-lg) !important;
  }

  /* Dashboard card - 2 kolom */
  .card-grid,
  .dashboard-cards,
  [class*="card-grid"]:not(.stats-grid):not(.stat-cards) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-md) !important;
  }

  /* Grid 3 kolom */
  .grid-cols-3,
  [class*="grid-cols-3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--space-md) !important;
  }

  /* Gap adjustments */
  .gap-4 { gap: var(--space-lg) !important; }
  .gap-6 { gap: var(--space-xl) !important; }
  .gap-2 { gap: var(--space-sm) !important; }
  .gap-3 { gap: var(--space-md) !important; }
}

/* ===========================================================
   5. CARDS - Desktop Sizing
   =========================================================== */
@media (min-width: 1024px) {
  /* Card container */
  .card,
  .rounded-xl,
  .rounded-lg,
  [class*="card"] {
    border-radius: var(--radius-lg) !important;
    padding: var(--space-lg) !important;
  }

  /* Card header */
  .card-header,
  [class*="card-header"] {
    padding-bottom: var(--space-md) !important;
    margin-bottom: var(--space-md) !important;
    border-bottom: 1px solid var(--ns-border, #d7e5dc) !important;
  }

  /* Stat card - tidak terlalu tinggi */
  .stat-card,
  [class*="stat-card"],
  [class*="stats-card"] {
    padding: var(--space-lg) !important;
  }

  .stat-card .text-4xl,
  .stat-card [class*="text-4xl"],
  [class*="stat-card"] [class*="text-4xl"] {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  /* Hero card - guru dashboard */
  .hero-card,
  .greeting-card,
  [class*="hero-card"],
  [class*="greeting-card"] {
    border-radius: var(--radius-xl) !important;
    padding: var(--space-xl) var(--space-2xl) !important;
    margin-bottom: var(--space-lg) !important;
  }
}

/* ===========================================================
   6. TABLES - Desktop Responsive
   =========================================================== */
@media (min-width: 1024px) {
  /* Table wrapper */
  .table-wrapper,
  .table-container,
  [class*="table-wrapper"],
  [class*="table-container"],
  .overflow-x-auto:has(table) {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--ns-border, #d7e5dc) !important;
    overflow: hidden !important;
  }

  /* Table styling */
  table {
    width: 100% !important;
    min-width: unset !important;
    font-size: 13px !important;
    border-collapse: collapse !important;
  }

  /* Header sticky */
  thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #eef7f2 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: var(--space-md) !important;
    border-bottom: 2px solid var(--ns-border, #d7e5dc) !important;
  }

  /* Cell padding */
  td {
    padding: var(--space-md) !important;
    vertical-align: middle !important;
  }

  /* Row hover */
  tbody tr:hover td {
    background: rgba(31, 122, 77, 0.03) !important;
  }

  /* Text wrapping untuk kolom tertentu */
  td:nth-child(n+2):nth-child(-n+5) {
    white-space: normal !important;
    max-width: 180px !important;
  }
}

/* ===========================================================
   7. FORMS - Desktop Layout
   =========================================================== */
@media (min-width: 1024px) {
  /* Form container - tidak terlalu sempit */
  form,
  [class*="form-container"],
  .form-wrapper {
    max-width: var(--container-lg) !important;
    margin: 0 auto !important;
  }

  /* Form grid 2 kolom */
  .form-grid,
  .form-row,
  [class*="form-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-md) !important;
  }

  /* Full width form fields */
  .form-full,
  [class*="form-full"] {
    grid-column: 1 / -1 !important;
  }

  /* Filter bar - horizontal */
  .filter-bar,
  .filters,
  [class*="filter-bar"],
  [class*="filters"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-md) !important;
    align-items: flex-end !important;
    padding: var(--space-md) !important;
    background: rgba(31, 122, 77, 0.03) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--space-lg) !important;
  }

  .filter-bar > *,
  .filters > * {
    flex: 0 0 auto !important;
    min-width: 160px !important;
  }

  /* Input sizing */
  input,
  select,
  textarea {
    min-height: 40px !important;
    font-size: 14px !important;
  }

  /* Label spacing */
  label {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: var(--space-xs) !important;
    display: block !important;
  }
}

/* ===========================================================
   8. TABS - Desktop Layout
   =========================================================== */
@media (min-width: 1024px) {
  /* Tab list */
  [role="tablist"] {
    display: flex !important;
    gap: var(--space-xs) !important;
    padding: 5px !important;
    background: rgba(31, 122, 77, 0.06) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(31, 122, 77, 0.1) !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Individual tab */
  [role="tab"] {
    flex: 0 0 auto !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-sm) var(--space-lg) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }

  /* Active tab */
  [role="tab"][data-state="active"],
  [role="tab"][aria-selected="true"] {
    background: #fff !important;
    color: var(--ns-primary, #1f7a4d) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
}

/* ===========================================================
   9. NAVIGATION - Desktop
   =========================================================== */
@media (min-width: 1024px) {
  /* Hide mobile bottom nav */
  nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"],
  nav.mobile-bottom,
  [class*="bottom-nav"] {
    display: none !important;
  }

  /* Desktop sidebar */
  .desktop-nav,
  .sidebar-nav,
  nav.desktop-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-xs) !important;
    padding: var(--space-md) !important;
  }

  .desktop-nav a,
  .sidebar-nav a,
  nav.desktop-sidebar a {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    color: var(--ns-muted, #64756b) !important;
    transition: all 0.15s ease !important;
  }

  .desktop-nav a:hover,
  .sidebar-nav a:hover {
    background: rgba(31, 122, 77, 0.06) !important;
    color: var(--ns-ink, #123524) !important;
  }

  .desktop-nav a.active,
  .sidebar-nav a.active,
  .desktop-nav a[aria-current="page"],
  .sidebar-nav a[aria-current="page"] {
    background: rgba(31, 122, 77, 0.1) !important;
    color: var(--ns-primary, #1f7a4d) !important;
    font-weight: 600 !important;
  }
}

/* ===========================================================
   10. MODALS/DIALOGS - Desktop
   =========================================================== */
@media (min-width: 1024px) {
  [role="dialog"] {
    max-width: 560px !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-xl) !important;
  }

  [role="dialog"].lg,
  [role="dialog"][class*="lg"] {
    max-width: 720px !important;
  }

  [role="dialog"].xl,
  [role="dialog"][class*="xl"] {
    max-width: 960px !important;
  }

  /* Dialog title */
  [role="dialog"] h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-lg) !important;
  }

  /* Dialog actions */
  [role="dialog"] [class*="actions"],
  [role="dialog"] .dialog-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: var(--space-sm) !important;
    margin-top: var(--space-lg) !important;
    padding-top: var(--space-lg) !important;
    border-top: 1px solid var(--ns-border, #d7e5dc) !important;
  }
}

/* ===========================================================
   11. SPACING UTILITIES - Desktop
   =========================================================== */
@media (min-width: 1024px) {
  /* Horizontal padding */
  .px-4 { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
  .px-6 { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
  .px-8 { padding-left: var(--space-2xl) !important; padding-right: var(--space-2xl) !important; }

  /* Vertical padding */
  .py-4 { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
  .py-6 { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
  .py-8 { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }

  /* Margins */
  .mt-4 { margin-top: var(--space-lg) !important; }
  .mt-6 { margin-top: var(--space-xl) !important; }
  .mb-4 { margin-bottom: var(--space-lg) !important; }
  .mb-6 { margin-bottom: var(--space-xl) !important; }

  /* Remove excessive margins */
  .space-y-4 > *:not(:last-child) { margin-bottom: var(--space-md) !important; }
  .space-y-6 > *:not(:last-child) { margin-bottom: var(--space-lg) !important; }
}

/* ===========================================================
   12. SPECIFIC PAGES - Desktop Layout
   =========================================================== */
@media (min-width: 1024px) {
  /* Dashboard page */
  [data-page="dashboard"],
  [class*="dashboard-page"] {
    max-width: var(--container-2xl) !important;
  }

  /* Jurnal page */
  [data-page="jurnal"],
  [class*="jurnal-page"] {
    max-width: var(--container-xl) !important;
  }

  /* Laporan page */
  [data-page="laporan"],
  [class*="laporan-page"] {
    max-width: var(--container-3xl) !important;
  }

  /* Absensi page */
  [data-page="absensi"],
  [class*="absensi-page"] {
    max-width: var(--container-xl) !important;
  }

  /* Master data page */
  [data-page="master-data"],
  [class*="master-data-page"] {
    max-width: var(--container-2xl) !important;
  }

  /* Settings page */
  [data-page="settings"],
  [class*="settings-page"] {
    max-width: var(--container-lg) !important;
  }
}

/* ===========================================================
   13. EMPTY STATE & LOADING - Desktop
   =========================================================== */
@media (min-width: 1024px) {
  /* Empty state - centered but not too big */
  [class*="empty-state"],
  [class*="no-data"],
  .empty-state {
    padding: var(--space-2xl) var(--space-lg) !important;
    text-align: center !important;
  }

  [class*="empty-state"] svg,
  [class*="no-data"] svg {
    width: 72px !important;
    height: 72px !important;
    opacity: 0.6 !important;
    margin-bottom: var(--space-md) !important;
  }

  [class*="empty-state"] h3 {
    font-size: 1.1rem !important;
    margin-bottom: var(--space-xs) !important;
  }

  [class*="empty-state"] p {
    font-size: 0.875rem !important;
    color: var(--ns-muted, #64756b) !important;
  }

  /* Loading skeleton */
  [role="status"],
  [aria-busy="true"],
  [class*="skeleton"] {
    border-radius: var(--radius-md) !important;
    min-height: 80px !important;
  }
}

/* ===========================================================
   14. LAPTOP SPECIFIC (1024px - 1279px)
   =========================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --container-xl: 1024px;
    --space-lg: 20px;
    --sidebar-width: 240px;
  }

  /* 4 column -> 2 column on laptop */
  .stats-grid,
  .stat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===========================================================
   15. LARGE DESKTOP (1280px - 1535px)
   =========================================================== */
@media (min-width: 1280px) and (max-width: 1535px) {
  :root {
    --container-xl: 1280px;
    --space-lg: 24px;
    --sidebar-width: 280px;
  }

  /* Full 4 columns */
  .stats-grid,
  .stat-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===========================================================
   16. EXTRA LARGE DESKTOP (>= 1536px)
   =========================================================== */
@media (min-width: 1536px) {
  :root {
    --container-3xl: 1536px;
    --space-xl: 32px;
    --space-2xl: 48px;
  }

  /* Even wider layouts for large screens */
  [data-page="dashboard"],
  [class*="dashboard-page"] {
    max-width: 1600px !important;
  }

  /* Table columns can be wider */
  td:nth-child(n+2):nth-child(-n+5) {
    max-width: 220px !important;
  }
}

/* ===========================================================
   17. PRINT OPTIMIZATION
   =========================================================== */
@media print {
  @media (min-width: 1024px) {
    nav,
    [class*="nav"]:not(table nav) {
      display: none !important;
    }

    [data-layout="authenticated"] {
      display: block !important;
    }

    .card,
    .rounded-xl,
    .rounded-lg {
      box-shadow: none !important;
      border: 1px solid #ddd !important;
    }

    table {
      font-size: 10px !important;
    }

    th, td {
      padding: 4px 8px !important;
    }
  }
}