/* ===========================================================
   KiSmart UI Audit Polish v1.0.0 - 2026-05-30
   Tujuan: merapikan tampilan global tanpa mengubah logika aplikasi.
   Area: login, dashboard, kartu, form, tabel, dialog, bottom nav,
   mobile/desktop, print, dan aksesibilitas sentuhan.
   =========================================================== */

:root {
  --ns-primary: #1f7a4d;
  --ns-primary-strong: #126b47;
  --ns-primary-soft: #e9f6ef;
  --ns-ink: #123524;
  --ns-muted: #64756b;
  --ns-border: #d7e5dc;
  --ns-border-strong: #bfd3c7;
  --ns-card: #ffffff;
  --ns-page: #f4f8f6;
  --ns-warning: #b45309;
  --ns-danger: #be123c;
  --ns-success: #047857;
  --ns-info: #0369a1;
  --ns-radius-sm: 10px;
  --ns-radius: 16px;
  --ns-radius-lg: 22px;
  --ns-shadow-sm: 0 8px 20px rgba(15, 23, 42, .055);
  --ns-shadow: 0 16px 38px rgba(15, 23, 42, .075);
  --ns-shadow-strong: 0 22px 58px rgba(15, 23, 42, .12);
  --ns-header-h: 62px;
  --ns-bottom-nav-h: 78px;
}

html,
body,
#root {
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(31, 122, 77, .09), transparent 34rem),
    linear-gradient(180deg, #f8fbf9 0%, var(--ns-page) 100%) !important;
  color: var(--foreground, var(--ns-ink));
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.005em;
}

/* Audit fix: aturan lama `contain: content` pada semua div/section bisa
   merusak sticky/fixed header, popover, dropdown, dan dialog. */
div,
section,
article,
main,
header,
footer,
nav,
form,
aside {
  contain: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Scroll halus, tetapi tidak memaksa semua container menjadi kaku. */
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto,
[data-radix-scroll-area-viewport],
.notesmart-admin-table-scroll,
[class*="table-scroll"] {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(31,122,77,.35) transparent;
}

.overflow-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
[data-radix-scroll-area-viewport]::-webkit-scrollbar,
.notesmart-admin-table-scroll::-webkit-scrollbar,
[class*="table-scroll"]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.overflow-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb,
[data-radix-scroll-area-viewport]::-webkit-scrollbar-thumb,
.notesmart-admin-table-scroll::-webkit-scrollbar-thumb,
[class*="table-scroll"]::-webkit-scrollbar-thumb {
  background: rgba(31,122,77,.28);
  border-radius: 999px;
}

/* ===========================================================
   Layout dasar aplikasi
   =========================================================== */
#root > div,
#root > main,
#root > section {
  min-height: 100vh;
}

main,
[class*="min-h-screen"] {
  min-width: 0;
}

/* Header/topbar lebih rapi dan tidak memotong dropdown akun. */
header {
  isolation: isolate;
  z-index: 40;
  background: color-mix(in oklab, var(--background, #fff) 92%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: color-mix(in oklab, var(--ns-border) 82%, transparent) !important;
}

header h1,
header h2,
header p,
header span {
  min-width: 0;
}

/* Area halaman umum: beri ruang aman untuk nav bawah dan safe-area HP. */
main[class*="px-"],
div[class*="px-4"][class*="py-4"],
section[class*="px-4"][class*="py-4"] {
  padding-bottom: max(96px, calc(var(--ns-bottom-nav-h) + 28px + env(safe-area-inset-bottom, 0px))) !important;
}

/* Jangan beri margin bawah besar pada setiap nested list; hanya kontainer utama. */
.space-y-4 > *:last-child {
  margin-bottom: 0 !important;
}
#root > div .space-y-4:last-child,
#root > main .space-y-4:last-child {
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

/* ===========================================================
   Kartu, panel, empty/error/loading state
   =========================================================== */
.rounded-xl.border,
.rounded-lg.border,
.rounded-md.border,
[class*="rounded-xl"][class*="border"],
[class*="rounded-lg"][class*="border"],
[role="status"].rounded-xl,
[role="alert"],
.ns-teacher-card,
.ns-teacher-panel {
  border-color: var(--ns-border) !important;
  background: color-mix(in oklab, var(--card, #fff) 96%, white) !important;
  box-shadow: var(--ns-shadow-sm) !important;
}

.rounded-xl.border,
[class*="rounded-xl"][class*="border"],
.ns-teacher-panel {
  border-radius: var(--ns-radius-lg) !important;
}

.rounded-lg.border,
[class*="rounded-lg"][class*="border"],
.ns-teacher-card,
.ns-teacher-row {
  border-radius: var(--ns-radius) !important;
}

.rounded-xl.border:hover,
.rounded-lg.border:hover,
.ns-teacher-card:hover,
.ns-teacher-row:hover {
  box-shadow: var(--ns-shadow) !important;
  border-color: var(--ns-border-strong) !important;
}

[role="status"],
[aria-busy="true"],
.skeleton,
[class*="animate-pulse"] {
  border-radius: var(--ns-radius) !important;
}

[role="alert"] {
  border-left: 4px solid var(--ns-danger) !important;
  background: #fff7f8 !important;
}

/* Judul dan teks kecil lebih terbaca. */
h1,
h2,
h3 {
  color: var(--foreground, var(--ns-ink));
  letter-spacing: -.02em;
}

.text-xs,
.text-\[11px\],
small {
  line-height: 1.45 !important;
}

.text-muted-foreground,
[class*="text-muted"] {
  color: var(--muted-foreground, var(--ns-muted)) !important;
}

/* ===========================================================
   Tombol dan aksi
   =========================================================== */
button,
a[role="button"],
[role="button"] {
  min-height: 40px;
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: -.005em;
}

button:not(:disabled):hover,
a[role="button"]:not(:disabled):hover,
[role="button"]:not(:disabled):hover {
  transform: translateY(-1px);
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58 !important;
}

/* Baris aksi dalam kartu jangan saling tabrakan atau terpotong. */
.rounded-xl.border div:has(> button),
.rounded-lg.border div:has(> button),
section:has(> div button) > div:has(button) {
  min-width: 0;
}

.rounded-xl.border button,
.rounded-lg.border button {
  white-space: normal !important;
  text-overflow: unset !important;
}

/* ===========================================================
   Form, input, select, textarea
   =========================================================== */
input,
select,
textarea,
[role="combobox"],
[data-radix-select-trigger] {
  border-color: var(--ns-border) !important;
  border-radius: 13px !important;
  background-color: var(--background, #fff) !important;
  color: var(--foreground, var(--ns-ink)) !important;
  min-height: 42px;
}

textarea {
  min-height: 92px;
  line-height: 1.55 !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in oklab, var(--muted-foreground, var(--ns-muted)) 68%, white) !important;
}

label {
  color: var(--foreground, var(--ns-ink));
}

[role="combobox"] span,
[data-radix-select-trigger] span {
  color: inherit !important;
  min-width: 0;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Dropdown/popover harus berada di atas header dan bottom nav. */
[data-radix-popper-content-wrapper],
[data-radix-select-content],
[role="menu"],
[role="listbox"] {
  z-index: 99999 !important;
}

[data-radix-select-content],
[role="listbox"],
[role="menu"] {
  border-radius: 16px !important;
  border: 1px solid var(--ns-border) !important;
  box-shadow: var(--ns-shadow-strong) !important;
  overflow: hidden !important;
}

[role="option"],
[role="menuitem"] {
  min-height: 42px !important;
}

/* ===========================================================
   Tabel dan laporan
   =========================================================== */
table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: 13px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef7f2 !important;
  color: var(--ns-ink) !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--ns-border-strong) !important;
}

th,
td {
  vertical-align: middle;
  border-color: var(--ns-border) !important;
}

tbody tr:hover td {
  background: rgba(31, 122, 77, .035) !important;
}

.notesmart-admin-table-scroll,
[class*="table-scroll"],
.rounded-xl.border:has(table),
.rounded-lg.border:has(table) {
  overflow: auto !important;
  max-width: 100%;
}

/* ===========================================================
   Tab, filter, badge status
   =========================================================== */
[role="tablist"] {
  background: rgba(31, 122, 77, .075) !important;
  border: 1px solid rgba(31, 122, 77, .12) !important;
  border-radius: 16px !important;
  padding: 5px !important;
}

[role="tab"] {
  border-radius: 12px !important;
  min-height: 38px !important;
}

[role="tab"][data-state="active"],
[aria-selected="true"] {
  background: #fff !important;
  color: var(--ns-primary-strong) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}

[class*="badge"],
.rounded-full {
  font-weight: 800;
  letter-spacing: -.005em;
}

/* Status absensi agar seragam meskipun class asal berbeda-beda. */
[class*="hadir"],
[class*="success"],
.ns-status-done { color: #166534 !important; }
[class*="sakit"],
[class*="izin"],
[class*="warning"],
.ns-status-draft { color: #92400e !important; }
[class*="alfa"],
[class*="bolos"],
[class*="danger"],
.ns-status-attention { color: #be123c !important; }

/* ===========================================================
   Bottom navigation mobile
   =========================================================== */
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] {
  left: 10px !important;
  right: 10px !important;
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  min-height: 64px;
  border: 1px solid rgba(31, 122, 77, .16) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18) !important;
  padding: 7px 8px !important;
  z-index: 70 !important;
}

nav[aria-label="Navigasi utama"] a,
nav[aria-label="Navigasi utama"] button {
  min-height: 50px !important;
  border-radius: 16px !important;
  gap: 3px !important;
}

nav[aria-label="Navigasi utama"] svg {
  width: 20px !important;
  height: 20px !important;
}

nav[aria-label="Navigasi utama"] span,
nav[aria-label="Navigasi utama"] p {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* ===========================================================
   Login dan halaman kosong
   =========================================================== */
body:has(input#teacher_code) main,
body:has(input#username) main,
body:has(input#password) main {
  background:
    radial-gradient(circle at 18% 12%, rgba(31,122,77,.16), transparent 22rem),
    radial-gradient(circle at 90% 8%, rgba(3,105,161,.11), transparent 20rem),
    linear-gradient(180deg, #f7fbf8, #eef6f1) !important;
}

body:has(input#teacher_code) form,
body:has(input#username) form,
body:has(input#password) form {
  border-radius: 24px !important;
  box-shadow: var(--ns-shadow-strong) !important;
}

/* ===========================================================
   Dashboard guru khusus
   =========================================================== */
.ns-teacher-dashboard {
  max-width: 1160px;
  margin: 0 auto;
}

.ns-teacher-hero {
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.22), transparent 16rem),
    linear-gradient(135deg, #126b47 0%, #1f7a4d 52%, #2f8f68 100%) !important;
  box-shadow: 0 20px 58px rgba(18,107,71,.24) !important;
}

.ns-teacher-actions a,
.ns-teacher-row {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.ns-teacher-actions a:hover,
.ns-teacher-row:hover {
  transform: translateY(-1px);
}

/* ===========================================================
   Mobile detail polish
   =========================================================== */
@media (max-width: 760px) {
  :root { --ns-bottom-nav-h: 86px; }

  body {
    font-size: 14px;
  }

  h1 { font-size: clamp(1.35rem, 6vw, 1.8rem) !important; }
  h2 { font-size: clamp(1.05rem, 4.7vw, 1.35rem) !important; }

  header {
    min-height: var(--ns-header-h);
  }

  main[class*="px-"],
  div[class*="px-4"][class*="py-4"],
  section[class*="px-4"][class*="py-4"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 14px !important;
  }

  .rounded-xl.border,
  [class*="rounded-xl"][class*="border"] {
    border-radius: 20px !important;
  }

  .rounded-lg.border,
  [class*="rounded-lg"][class*="border"] {
    border-radius: 16px !important;
  }

  input,
  select,
  textarea,
  button,
  [role="button"],
  [role="combobox"] {
    font-size: 16px !important;
  }

  /* Grid kartu otomatis turun ke 1 kolom bila terlalu sempit. */
  .grid[class*="grid-cols-2"],
  .grid[class*="grid-cols-3"],
  .grid[class*="grid-cols-4"] {
    gap: 10px !important;
  }

  /* Baris filter/tombol atas menjadi wrap rapi. */
  .flex:has(> button):not(nav *),
  .flex:has(> [role="combobox"]):not(nav *) {
    flex-wrap: wrap;
  }

  .flex:has(> button) > button:not(nav *),
  .flex:has(> a[role="button"]) > a[role="button"]:not(nav *) {
    flex: 1 1 auto;
  }

  /* Dialog tidak menabrak pinggir layar. */
  [role="dialog"][data-state="open"] {
    width: min(100vw - 18px, 560px) !important;
    max-height: min(88vh, 760px) !important;
    overflow: auto !important;
    border-radius: 22px !important;
  }

  table {
    min-width: 620px;
  }

  /* Tabel presensi/rekap tetap bisa discroll, bukan merusak lebar layar. */
  .rounded-xl.border:has(table),
  .rounded-lg.border:has(table) {
    -webkit-overflow-scrolling: touch;
  }

  .ns-teacher-hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 148px;
    padding: 20px !important;
  }

  .ns-teacher-grid,
  .ns-teacher-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  main[class*="px-"],
  div[class*="px-4"][class*="py-4"],
  section[class*="px-4"][class*="py-4"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ns-teacher-grid,
  .ns-teacher-actions,
  .grid[class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }

  nav[aria-label="Navigasi utama"] span,
  nav[aria-label="Navigasi utama"] p {
    font-size: 10px !important;
  }
}

/* ===========================================================
   Print: laporan bersih, tanpa nav/header fixed/shadow berlebihan
   =========================================================== */
@media print {
  html,
  body,
  #root {
    background: #fff !important;
  }

  nav[aria-label="Navigasi utama"],
  button,
  [role="button"],
  .no-print {
    display: none !important;
  }

  header {
    position: static !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .rounded-xl.border,
  .rounded-lg.border,
  [class*="rounded-xl"][class*="border"],
  [class*="rounded-lg"][class*="border"] {
    box-shadow: none !important;
    border-color: #999 !important;
  }

  table {
    min-width: 0 !important;
    font-size: 11px !important;
  }

  thead th {
    position: static !important;
    background: #f1f5f9 !important;
  }
}