/* KiSmart - Mobile UI overrides v10 - TOUCH EFFECTS & BUTTON COLORS
   Fokus: Profesional, Rapi, Smooth, Touch-Sensitive, Button Colors
   =========================================================== */

/* ===========================================================
   0. CSS VARIABLES - Design System
   =========================================================== */
:root {
  /* Easing curves */
  --ns-ease: cubic-bezier(.25, .1, .25, 1);
  --ns-ease-out: cubic-bezier(0, 0, .2, 1);
  --ns-ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Timing */
  --ns-instant: 50ms;
  --ns-fast: 120ms;
  --ns-med: 200ms;
  --ns-slow: 300ms;

  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Colors - Status */
  --color-success: #22c55e;
  --color-success-light: color-mix(in oklab, #22c55e 15%, transparent);
  --color-success-dark: #15803d;

  --color-warning: #f59e0b;
  --color-warning-light: color-mix(in oklab, #f59e0b 15%, transparent);
  --color-warning-dark: #b45309;

  --color-danger: #ef4444;
  --color-danger-light: color-mix(in oklab, #ef4444 15%, transparent);
  --color-danger-dark: #dc2626;

  --color-info: #3b82f6;
  --color-info-light: color-mix(in oklab, #3b82f6 12%, transparent);
  --color-info-dark: #2563eb;

  --color-purple: #8b5cf6;
  --color-purple-light: color-mix(in oklab, #8b5cf6 12%, transparent);

  /* Primary green (KiSmart theme) */
  --color-primary: #1f7a4d;
  --color-primary-light: color-mix(in oklab, #1f7a4d 10%, transparent);
  --color-primary-hover: color-mix(in oklab, #1f7a4d 15%, transparent);
  --color-primary-active: color-mix(in oklab, #1f7a4d 20%, transparent);

  /* Neutral */
  --color-neutral: #6b7280;
  --color-neutral-light: color-mix(in oklab, #6b7280 10%, transparent);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  scroll-behavior: smooth;
}

/* ===========================================================
   1. GLOBAL RESET
   =========================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html, body, #root {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
  min-height: unset !important;
  height: auto !important;
}

#root {
  overscroll-behavior: contain;
  min-height: unset !important;
}

/* ===========================================================
   2. CORE INTERACTIVE - Touch & Pointer
   =========================================================== */
button,
a,
input,
select,
textarea,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"],
[role="combobox"],
[class*="clickable"],
[class*="selectable"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition:
    background-color var(--ns-fast) var(--ns-ease-out),
    border-color var(--ns-fast) var(--ns-ease-out),
    color var(--ns-fast) var(--ns-ease-out),
    box-shadow var(--ns-fast) var(--ns-ease-out),
    transform var(--ns-instant) var(--ns-ease-out),
    opacity var(--ns-fast) var(--ns-ease-out);
}

/* ===========================================================
   3. BUTTON VARIANTS - Professional Colors
   =========================================================== */

/* --- PRIMARY: Save, Add, Submit, Approve, Apply, Login --- */
.btn-primary,
button[type="submit"]:not([class*="outline"]):not([class*="ghost"]),
.btn-save,
.btn-add,
.btn-submit,
.btn-approve,
.btn-apply,
.btn-login,
.btn-generate,
.btn-create,
[class*="btn-primary"],
[class*="bg-emerald"],
[class*="bg-green"] {
  background: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.btn-primary:hover,
button[type="submit"]:hover:not([class*="outline"]):not([class*="ghost"]),
.btn-save:hover,
.btn-add:hover,
.btn-submit:hover,
.btn-approve:hover,
.btn-apply:hover,
.btn-login:hover,
.btn-generate:hover,
.btn-create:hover {
  background: var(--color-success-dark) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active,
button[type="submit"]:active:not([class*="outline"]):not([class*="ghost"]) {
  transform: scale(0.98) translateY(0) !important;
  opacity: 0.9 !important;
}

/* --- SECONDARY: Cancel, Back, Close, Reset Light --- */
.btn-secondary,
.btn-outline,
.btn-cancel,
.btn-back,
.btn-close,
.btn-reset-light,
.btn-neutral,
button[type="button"]:not([class*="primary"]):not([class*="danger"]):not([class*="warning"]):not([class*="info"]),
[class*="btn-outline"],
[class*="btn-secondary"],
[class*="border-gray"],
[class*="border-muted"] {
  background: white !important;
  color: var(--color-neutral) !important;
  border-color: #d1d5db !important;
  font-weight: 500 !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-cancel:hover,
.btn-back:hover,
.btn-close:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
}

.btn-secondary:active,
.btn-outline:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- INFO: View, Detail, Preview, Info --- */
.btn-info,
.btn-view,
.btn-detail,
.btn-preview,
.btn-show,
.btn-info-action,
[class*="btn-info"],
[class*="btn-blue"],
.bg-blue,
.bg-info {
  background: var(--color-info) !important;
  color: white !important;
  border-color: var(--color-info) !important;
}

.btn-info:hover,
.btn-view:hover,
.btn-detail:hover,
.btn-preview:hover {
  background: var(--color-info-dark) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-1px) !important;
}

.btn-info:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- WARNING: Edit, Revise, Modify, Update --- */
.btn-warning,
.btn-edit,
.btn-revise,
.btn-modify,
.btn-update,
.btn-revision,
.btn-change,
.bg-amber,
.bg-yellow,
.bg-warning,
[class*="btn-warning"],
[class*="btn-edit"],
[class*="btn-orange"] {
  background: var(--color-warning-light) !important;
  color: var(--color-warning-dark) !important;
  border-color: var(--color-warning) !important;
  font-weight: 600 !important;
}

.btn-warning:hover,
.btn-edit:hover,
.btn-revise:hover,
.btn-modify:hover,
.btn-update:hover {
  background: var(--color-warning) !important;
  color: white !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-warning:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- DANGER: Delete, Reject, Cancel Large, Reset Big --- */
.btn-danger,
.btn-delete,
.btn-reject,
.btn-remove,
.btn-reset,
.btn-cancel-strong,
.btn-destroy,
.bg-red,
.bg-destructive,
.bg-danger,
[class*="btn-danger"],
[class*="btn-red"],
[class*="btn-delete"] {
  background: var(--color-danger) !important;
  color: white !important;
  border-color: var(--color-danger) !important;
  font-weight: 600 !important;
}

.btn-danger:hover,
.btn-delete:hover,
.btn-reject:hover {
  background: var(--color-danger-dark) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.btn-danger:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- SUCCESS: Present, Complete, Active, Approve --- */
.btn-success,
.btn-complete,
.btn-active,
.btn-enable,
.btn-confirm,
.bg-green-light,
.bg-success-light,
[class*="btn-success"],
[class*="btn-green"] {
  background: var(--color-success-light) !important;
  color: var(--color-success-dark) !important;
  border-color: var(--color-success) !important;
  font-weight: 600 !important;
}

.btn-success:hover,
.btn-complete:hover,
.btn-active:hover {
  background: var(--color-success) !important;
  color: white !important;
}

.btn-success:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- GHOST: Minimal style buttons --- */
.btn-ghost,
.btn-link,
button.ghost,
[class*="btn-ghost"],
[class*="btn-link"] {
  background: transparent !important;
  color: var(--color-neutral) !important;
  border-color: transparent !important;
  font-weight: 500 !important;
}

.btn-ghost:hover {
  background: var(--color-neutral-light) !important;
  color: #374151 !important;
}

/* --- NEUTRAL: Refresh, Filter, Reload --- */
.btn-neutral,
.btn-refresh,
.btn-filter,
.btn-reload,
.btn-refetch,
button[class*="bg-gray"],
button[class*="bg-muted"],
.bg-gray-light {
  background: var(--color-neutral-light) !important;
  color: var(--color-neutral) !important;
  border-color: #d1d5db !important;
}

.btn-neutral:hover,
.btn-refresh:hover,
.btn-filter:hover {
  background: #e5e7eb !important;
  color: #374151 !important;
}

/* ===========================================================
   4. TOUCH EFFECTS - All Interactive Elements
   =========================================================== */

/* Active/Tap effect - all clickables */
button:active,
a:active,
[role="button"]:active,
[role="tab"]:active {
  transform: scale(0.98) translateY(0) !important;
  opacity: 0.88 !important;
  transition: transform var(--ns-instant) var(--ns-ease-out), opacity var(--ns-instant) !important;
}

/* Hover effect - desktop only */
@media (hover: hover) {
  button:hover:not(:disabled),
  a:hover:not(:disabled),
  [role="button"]:hover:not(:disabled) {
    transform: translateY(-1px) !important;
  }

  .btn-primary:hover:not(:disabled),
  .btn-info:hover:not(:disabled),
  .btn-danger:hover:not(:disabled),
  .btn-success:hover:not(:disabled),
  .btn-warning:hover:not(:disabled) {
    box-shadow: var(--shadow-md) !important;
  }
}

/* Disabled state */
button:disabled,
button[disabled],
[aria-disabled="true"],
.is-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Focus visible - accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* ===========================================================
   5. RIPPLE EFFECT - Subtle Touch
   =========================================================== */
button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), currentColor 0%, transparent 70%);
  opacity: 0;
  transition: opacity 60ms;
  pointer-events: none;
}

button:active::after {
  opacity: 0.06;
  transition: opacity 0ms;
}

button {
  position: relative;
  overflow: hidden;
}

/* ===========================================================
   6. MENU & NAVIGATION - Touch Optimized
   =========================================================== */

/* Sidebar menu - desktop */
aside nav a,
aside nav button,
aside nav [role="menuitem"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  margin: 2px 8px !important;
  border-radius: var(--radius-md) !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}

aside nav a:hover,
aside nav button:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

aside nav a[aria-current="page"],
aside nav a.active,
aside nav button[aria-current="page"] {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--color-primary) !important;
}

aside nav a:active,
aside nav button:active {
  transform: scale(0.98) !important;
  opacity: 0.85 !important;
}

/* Bottom navigation - mobile */
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] {
  background: white !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
}

nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] a,
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 56px !important;
  padding: 6px 8px !important;
  color: #9ca3af !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] a:active,
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] button:active {
  transform: scale(0.95) translateY(-2px) !important;
  background: var(--color-primary-light) !important;
}

nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] a[aria-current="page"],
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] button[aria-current="page"] {
  color: var(--color-primary) !important;
}

nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] a[aria-current="page"]::before,
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] button[aria-current="page"]::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

/* ===========================================================
   7. TABS - Smooth & Touch-Friendly
   =========================================================== */
[role="tablist"],
.ns-tabs,
[class*="tab-container"],
.tabs-container {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px !important;
}

[role="tablist"]::-webkit-scrollbar {
  display: none;
}

[role="tab"],
.ns-tab,
[class*="tab-item"] {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  color: var(--color-neutral) !important;
  background: transparent !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

[role="tab"]:hover,
.ns-tab:hover {
  background: var(--color-neutral-light) !important;
  color: #374151 !important;
}

[role="tab"]:active,
.ns-tab:active {
  transform: scale(0.97) !important;
}

[role="tab"][aria-selected="true"],
.ns-tab.active,
[class*="tab-item"].active {
  background: var(--color-primary) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ===========================================================
   8. CARDS - Hover & Touch Effects
   =========================================================== */
.card,
section.rounded-xl,
section.rounded-2xl,
div.rounded-xl,
div.rounded-2xl {
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

@media (hover: hover) {
  .card:hover,
  section.rounded-xl:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
  }
}

.card:active,
section.rounded-xl:active {
  transform: scale(0.995) !important;
}

/* Card clickable items */
.card[class*="clickable"],
.card[class*="selectable"],
.card[data-clickable="true"] {
  cursor: pointer;
}

.card[class*="clickable"]:hover {
  border-color: var(--color-primary-light) !important;
}

/* ===========================================================
   9. FORM INPUTS - Focus & Touch
   =========================================================== */
input,
select,
textarea {
  min-height: 44px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-md) !important;
  font-size: 16px !important;
  border: 1px solid #d1d5db !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
  outline: none !important;
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 40px !important;
}

/* ===========================================================
   10. BADGES & STATUS - Color Variants
   =========================================================== */

/* Status badges */
.badge,
[class*="badge"],
.tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  gap: 4px !important;
}

/* Success/Present/Active */
.badge-success,
.badge-hadir,
.badge-present,
.badge-active,
.status-success,
.status-hadir,
.status-present,
.status-active {
  background: var(--color-success-light) !important;
  color: var(--color-success-dark) !important;
}

/* Warning/Edit/Revise */
.badge-warning,
.badge-edit,
.badge-revise,
.badge-menunggu,
.status-warning,
.status-edit,
.status-revise,
.status-menunggu {
  background: var(--color-warning-light) !important;
  color: var(--color-warning-dark) !important;
}

/* Danger/Delete/Reject/Absent */
.badge-danger,
.badge-error,
.badge-alfa,
.badge-delete,
.badge-tolak,
.badge-gagal,
.status-danger,
.status-alfa,
.status-delete,
.status-tolak {
  background: var(--color-danger-light) !important;
  color: var(--color-danger-dark) !important;
}

/* Info/View/Detail */
.badge-info,
.badge-view,
.badge-detail,
.status-info,
.status-view,
.status-detail {
  background: var(--color-info-light) !important;
  color: var(--color-info-dark) !important;
}

/* Purple/Dispensation */
.badge-purple,
.badge-dispensasi,
.badge-special,
.status-purple {
  background: var(--color-purple-light) !important;
  color: var(--color-purple) !important;
}

/* Neutral/Inactive/Pending */
.badge-neutral,
.badge-pending,
.badge-inactive,
.status-neutral,
.status-pending,
.status-inactive {
  background: var(--color-neutral-light) !important;
  color: var(--color-neutral) !important;
}

/* ===========================================================
   11. ABSENCE STATUS BUTTONS - Color Coded
   =========================================================== */

/* Present (H) */
button[aria-label*="Hadir"],
button[aria-label*="Set Hadir"],
.status-h,
.btn-status-hadir {
  background: var(--color-success-light) !important;
  color: var(--color-success-dark) !important;
  border-color: var(--color-success) !important;
}

button[aria-label*="Hadir"]:hover,
button[aria-label*="Set Hadir"]:hover {
  background: var(--color-success) !important;
  color: white !important;
}

/* Sick (S) */
button[aria-label*="Sakit"],
button[aria-label*="Set Sakit"],
.status-s,
.btn-status-sakit {
  background: var(--color-warning-light) !important;
  color: var(--color-warning-dark) !important;
  border-color: var(--color-warning) !important;
}

button[aria-label*="Sakit"]:hover {
  background: var(--color-warning) !important;
  color: white !important;
}

/* Permission (I) */
button[aria-label*="Izin"],
button[aria-label*="Set Izin"],
.status-i,
.btn-status-izin {
  background: var(--color-info-light) !important;
  color: var(--color-info-dark) !important;
  border-color: var(--color-info) !important;
}

button[aria-label*="Izin"]:hover {
  background: var(--color-info) !important;
  color: white !important;
}

/* Absent (A) */
button[aria-label*="Alfa"],
button[aria-label*="Set Alfa"],
.status-a,
.btn-status-alfa {
  background: var(--color-danger-light) !important;
  color: var(--color-danger-dark) !important;
  border-color: var(--color-danger) !important;
}

button[aria-label*="Alfa"]:hover {
  background: var(--color-danger) !important;
  color: white !important;
}

/* Dispensation (D) */
button[aria-label*="Dispensasi"],
button[aria-label*="Set Dispensasi"],
.status-d,
.btn-status-dispensasi {
  background: var(--color-purple-light) !important;
  color: var(--color-purple) !important;
  border-color: var(--color-purple) !important;
}

button[aria-label*="Dispensasi"]:hover {
  background: var(--color-purple) !important;
  color: white !important;
}

/* Absence status buttons common styles */
button[aria-label^="Set "] {
  height: 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-width: 1.5px !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

button[aria-label^="Set "]:active {
  transform: scale(0.95) !important;
}

/* Absence buttons container */
div:has(> button[aria-label^="Set "]) {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

/* ===========================================================
   12. TABLES - Hover & Focus
   =========================================================== */
table tbody tr {
  transition: background-color var(--ns-fast) var(--ns-ease-out) !important;
}

table tbody tr:hover {
  background: var(--color-primary-light) !important;
}

table tbody tr:active {
  background: var(--color-primary-hover) !important;
}

/* Table action buttons */
table button,
table a[role="button"] {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: var(--radius-sm) !important;
}

/* ===========================================================
   13. MODALS - Smooth Animation
   =========================================================== */
[role="dialog"] {
  border-radius: var(--radius-xl) !important;
  animation: modalIn var(--ns-slow) var(--ns-ease-out) forwards !important;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

[role="dialog"] header,
[role="dialog"] footer {
  padding: 16px !important;
}

[role="dialog"] footer {
  border-top: 1px solid #e5e7eb !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

/* ===========================================================
   14. DROPDOWNS - Smooth Reveal
   =========================================================== */
[data-radix-popper-content-wrapper],
[data-dropdown-content],
[class*="dropdown-menu"] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: dropdownIn var(--ns-med) var(--ns-ease-out) forwards !important;
  z-index: 9999 !important;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-radix-popper-content-wrapper] [role="menuitem"],
[data-radix-popper-content-wrapper] [role="option"] {
  min-height: 44px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-md) !important;
}

[data-radix-popper-content-wrapper] [role="menuitem"]:hover,
[data-radix-popper-content-wrapper] [role="option"]:hover {
  background: var(--color-primary-light) !important;
}

/* ===========================================================
   15. PAGE STRUCTURE - No Extra Space
   =========================================================== */
main,
[class*="content-area"],
.page-content {
  min-height: unset !important;
  height: auto !important;
}

@media (max-width: 640px) {
  main,
  [class*="content-area"],
  .page-content {
    padding: 12px !important;
  }
}

@media (min-width: 641px) {
  main,
  [class*="content-area"],
  .page-content {
    padding: 16px !important;
    max-width: 900px;
    margin: 0 auto;
  }
}

/* Bottom nav safe area */
@media (max-width: 640px) {
  body:has(nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"]) main,
  body:has(nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"]) [class*="content-area"] {
    padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 72px) !important;
  }
}

/* ===========================================================
   16. SKELETON LOADING - Smooth Pulse
   =========================================================== */
.animate-pulse,
.skeleton {
  border-radius: var(--radius-md) !important;
  background: linear-gradient(
    90deg,
    #e8ede9 30%,
    #f0f3f1 50%,
    #e8ede9 70%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeletonPulse 1.5s ease-in-out infinite !important;
}

@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

button:has(.animate-spin) {
  opacity: 0.8 !important;
  pointer-events: none !important;
}

/* ===========================================================
   17. PAGE TRANSITIONS - Smooth Navigation
   =========================================================== */
main,
.page-content,
[class*="page-view"] {
  animation: pageIn var(--ns-med) var(--ns-ease-out) forwards !important;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================================
   18. TOAST NOTIFICATIONS
   =========================================================== */
[data-sonner-toast],
[data-toast] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: toastIn var(--ns-med) var(--ns-ease-out) forwards !important;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===========================================================
   19. CUSTOM SCROLLBAR - Subtle
   =========================================================== */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.25) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.4) !important;
}

/* ===========================================================
   20. EMPTY STATES - Compact
   =========================================================== */
.empty-state,
[class*="empty-state"] {
  padding: 24px 16px !important;
  text-align: center !important;
}

.empty-state svg,
[class*="empty-state"] svg {
  width: 48px !important;
  height: 48px !important;
  opacity: 0.35 !important;
  margin-bottom: 12px !important;
}

.empty-state p,
[class*="empty-state"] p {
  font-size: 13px !important;
  color: var(--color-neutral) !important;
  margin: 0 !important;
}

/* ===========================================================
   21. ACTION BUTTONS - Grid Layout
   =========================================================== */
.action-buttons,
.button-group,
.ns-actions,
[class*="actions-container"],
.button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.action-buttons button,
.button-group button,
.ns-actions button,
[class*="actions-container"] button {
  flex: 1 1 auto !important;
  min-width: 80px !important;
}

/* ===========================================================
   22. FILTER BAR - Compact
   =========================================================== */
.filter-bar,
.search-bar,
[class*="filter-bar"],
[class*="toolbar"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* ===========================================================
   23. STAT CARDS - Grid
   =========================================================== */
.stats-grid,
.stat-grid,
[class*="stats-container"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 640px) {
  .stats-grid,
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.stat-card,
[class*="stat-card"] {
  padding: 14px !important;
  text-align: center !important;
}

/* ===========================================================
   24. ERROR PANELS - Hidden
   =========================================================== */
section[role="alert"]:has([class*="text-destructive"]),
div[role="alert"]:has([class*="text-destructive"]),
div.min-h-\[80vh\]:has([class*="text-destructive"]),
div.min-h-screen:has([role="alert"]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===========================================================
   25. LOGIN PAGE - Centered
   =========================================================== */
body.notesmart-login,
html.notesmart-login {
  min-height: 100vh !important;
  height: 100vh !important;
}

body.notesmart-login main,
body.notesmart-login #root > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 16px !important;
}

/* ===========================================================
   26. JOURNAL MODE TOGGLE - Grid
   =========================================================== */
.ns-journal-mode-custom,
.ns-mode-toggle,
[class*="mode-toggle"] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-neutral-light) !important;
}

.ns-journal-mode-button,
.ns-mode-toggle button {
  min-height: 44px !important;
}

/* ===========================================================
   27. REDUCED MOTION - Accessibility
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================
   28. RADIO & CHECKBOX
   =========================================================== */
input[type="radio"],
input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--color-primary) !important;
  cursor: pointer !important;
}

/* ===========================================================
   29. WORD WRAP - Mobile Safe
   =========================================================== */
@media (max-width: 640px) {
  button, a, nav *, h1, h2, h3, h4, h5, h6,
  [role="tab"], [role="menuitem"], [role="button"] {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
  }

  section.rounded-xl *,
  .card * {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
}

/* ===========================================================
   30. HEADER - Clean & Compact
   =========================================================== */
header {
  padding-top: env(safe-area-inset-top, 0px) !important;
  background: white !important;
  border-bottom: 1px solid #e5e7eb !important;
}

header > div {
  padding: 12px 14px !important;
}

/* ===========================================================
   31. PREVENT HORIZONTAL OVERFLOW
   =========================================================== */
html, body, #root {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* ===========================================================
   32. ACCOUNT DROPDOWN - Width Fix
   =========================================================== */
header [role="menu"],
[role="menu"].w-64 {
  width: 240px !important;
  min-width: 240px !important;
}

/* ===========================================================
   33. VOICE RECORDING UI
   =========================================================== */
[data-voice-btn] {
  cursor: pointer !important;
  touch-action: manipulation !important;
}

[data-voice-btn]:active {
  transform: scale(0.95) !important;
  opacity: 0.9 !important;
}

[data-recording-indicator] {
  animation: voicePulse 1.5s ease-in-out infinite !important;
}

@keyframes voicePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}

/* ===========================================================
   34. EXTRA ATTENDANCE FIELDS
   =========================================================== */
.ns-extra-fields {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #d1d5db;
}

.ns-extra-row > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-neutral);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ns-extra-row input,
.ns-extra-row textarea {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-md);
  font-size: 14px;
}

/* ===========================================================
   35. FINAL RESET - No Lingering Space
   =========================================================== */
main > *:last-child,
.page-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Ensure no full height forcing */
[style*="height: 100vh"],
[style*="min-height: 100vh"],
[style*="height: 100%"],
[style*="min-height: 100%"] {
  height: auto !important;
  min-height: unset !important;
}

/* Prevent iOS zoom on input */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}


/* HOTFIX 2026-06-15: admin content must never disappear */
#main-scrollable-area, main {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#main-scrollable-area > * {
  visibility: visible !important;
}
#main-scrollable-area .min-h-screen,
#main-scrollable-area .min-h-\[60vh\],
#main-scrollable-area .min-h-\[80vh\] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}