/* =========================================================
   SIAAM - Global Styles
   Dipakai bersama Tailwind CSS dan komponen dashboard.
   ========================================================= */

:root {
  --color-brand: #059669;
  --color-brand-dark: #065f46;
  --color-accent: #d97706;
  --color-ink: #0f172a;
  --color-muted: #64748b;
  --color-border: rgba(226, 232, 240, 0.85);
  --radius-card: 1.5rem;
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.06);
  --focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* Base layout */
html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: var(--color-ink);
  background: #f8fafc;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
label,
select,
input[type="file"],
input[type="radio"],
input[type="checkbox"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Reusable glass cards */
.glass-effect {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Scrollbars */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dashboard viewport */
#mainContentOutlet {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

#mainContentOutlet table {
  border-collapse: separate;
  border-spacing: 0;
}

#mainContentOutlet th {
  white-space: nowrap;
}

#mainContentOutlet td {
  vertical-align: middle;
}

/* Login screen */
#loginScreen {
  isolation: isolate;
}

#loginScreen form input,
#loginScreen form select {
  min-height: 44px;
}

#loginScreen form button {
  min-height: 48px;
}

/* Toast notifications */
#toastContainer {
  max-width: min(calc(100vw - 2rem), 26rem);
}

#toastContainer > div {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Modals */
#ratingMandatoryModal,
#cbtExamFullscreenModal {
  isolation: isolate;
}

#ratingMandatoryModal {
  z-index: 9999 !important;
}

#cbtExamFullscreenModal {
  z-index: 99999;
}

/* Upload drop zones */
input[type="file"]::file-selector-button {
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

/* Small-screen improvements */
@media (max-width: 767px) {
  header.sticky {
    padding-inline: 1rem;
  }

  #activePageTitle {
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #liveClockBadge {
    display: none;
  }

  #mainContentOutlet {
    padding: 1rem;
  }

  #toastContainer {
    top: 1rem;
    right: 1rem;
    left: 1rem;
    max-width: none;
  }
}

/* Respect users who prefer less animation */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print-friendly reports */
@media print {
  body {
    padding: 0;
    background: #fff;
  }

  #loginScreen,
  aside,
  header,
  #toastContainer,
  #ratingMandatoryModal,
  #cbtExamFullscreenModal,
  button {
    display: none !important;
  }

  #appContainer,
  main {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #mainContentOutlet {
    padding: 0;
  }

  .glass-effect {
    border: 0;
    box-shadow: none;
    background: #fff;
  }
}