/* Alys Childcare Centre - v2 Custom Styles */

/* Global font size bump — staff feedback: font terlalu kecil */
html {
    font-size: 17px; /* default browser 16px → 17px (+6%) */
}
/* Tailwind text-xs/text-sm overrides — slightly larger for readability */
.text-xs { font-size: 0.8rem !important; line-height: 1.15rem !important; }   /* was 0.75rem (12px) → ~13.6px */
.text-sm { font-size: 0.9rem !important; line-height: 1.35rem !important; }   /* was 0.875rem (14px) → ~15.3px */
/* Tables: ensure comfortable row height */
table td, table th { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* Flash message animation */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Auto-hide flash messages after 5s */
.flash-msg {
    animation: slideIn 0.3s ease-out;
}

/* Scrollbar styling */
aside::-webkit-scrollbar {
    width: 4px;
}
aside::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}
aside::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Table row hover */
tr.hover-row:hover {
    background-color: #f9fafb;
}

/* Loading spinner */
.spinner {
    border: 3px solid #e5e7eb;
    border-top-color: #7d4e57;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Confirm dialog backdrop */
.confirm-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* Sidebar nav section transitions */
.nav-section [id^="nav-"] {
    transition: max-height 0.2s ease-out;
}

/* Toggle switch styles */
.peer:checked ~ div {
    background-color: #7d4e57;
}
.peer:checked ~ div::after {
    transform: translateX(100%);
}

/* Hide scrollbar for tab navigation on mobile */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* PWA standalone mode adjustments */
@media (display-mode: standalone) {
  html { overscroll-behavior-y: contain; }

  /* Status bar safe area for the header */
  header.sticky {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Sidebar: account for status bar on mobile */
  aside#sidebar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Sidebar overlay: cover full screen including status bar */
  #sidebar-overlay {
    top: 0;
  }

  /* Main content: safe area on sides */
  main {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  /* Bottom safe area for pages with bottom content */
  body::after {
    content: '';
    display: block;
    height: env(safe-area-inset-bottom, 0px);
  }
}

/* iOS standalone: ensure sidebar doesn't go under status bar */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    /* Push body content below status bar area */
    .flex.min-h-screen > .flex-1 {
      padding-top: 0; /* header handles its own safe area */
    }
  }
}

/* Print styles */
@media print {
    aside, header, footer, .no-print { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; }
}