/* ============================================================
   MAIN.CSS — Variabel, Reset, Base, Layout Utama
   ============================================================ */

/* ─── CSS Layers ─────────────────────────────────────────── */
@layer reset, base, layout, components, dashboard, utilities;

/* ─── Custom Properties (Variabel CSS) ─────────────────── */
:root {
  /* Warna utama */
  --color-primary      : #1a6b3c;
  --color-primary-light: #2d9455;
  --color-primary-dark : #114d2b;
  --color-accent       : #f5a623;
  --color-danger       : #d93025;
  --color-warning      : #f4a900;
  --color-success      : #1e7e34;
  --color-info         : #0c63e4;

  /* Warna netral */
  --color-bg           : #f8f9fa;
  --color-surface      : #ffffff;
  --color-border       : #dee2e6;
  --color-text         : #212529;
  --color-text-muted   : #6c757d;

  /* Tipografi */
  --font-sans          : 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono          : 'JetBrains Mono', 'Courier New', monospace;
  --font-size-xs       : 0.75rem;
  --font-size-sm       : 0.875rem;
  --font-size-base     : 1rem;
  --font-size-lg       : 1.125rem;
  --font-size-xl       : 1.25rem;
  --font-size-2xl      : 1.5rem;
  --font-size-3xl      : 1.875rem;
  --line-height-tight  : 1.25;
  --line-height-base   : 1.6;

  /* Spasi */
  --space-1  : 0.25rem;
  --space-2  : 0.5rem;
  --space-3  : 0.75rem;
  --space-4  : 1rem;
  --space-6  : 1.5rem;
  --space-8  : 2rem;
  --space-12 : 3rem;
  --space-16 : 4rem;

  /* Radius */
  --radius-sm  : 4px;
  --radius-md  : 8px;
  --radius-lg  : 12px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm : 0 1px 2px rgba(0,0,0,.06);
  --shadow-md : 0 4px 6px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg : 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);

  /* Transisi */
  --transition-fast  : 150ms ease;
  --transition-base  : 250ms ease;
  --transition-slow  : 400ms ease;

  /* Z-index */
  --z-dropdown : 100;
  --z-sticky   : 200;
  --z-modal    : 300;
  --z-toast    : 400;
  --z-tooltip  : 500;

  /* Layout */
  --sidebar-width      : 240px;
  --sidebar-collapsed  : 60px;
  --header-height      : 56px;
  --content-max-width  : 1200px;
}

/* ─── Dark Mode via prefers-color-scheme ───────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg      : #121212;
    --color-surface : #1e1e1e;
    --color-border  : #333333;
    --color-text    : #e8eaed;
    --color-text-muted: #9aa0a6;
    --shadow-sm     : 0 1px 2px rgba(0,0,0,.3);
    --shadow-md     : 0 4px 6px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow-lg     : 0 10px 15px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.3);
  }
}

/* Override manual via data-theme */
[data-theme="dark"] {
  --color-bg      : #121212;
  --color-surface : #1e1e1e;
  --color-border  : #333333;
  --color-text    : #e8eaed;
  --color-text-muted: #9aa0a6;
  --shadow-sm     : 0 1px 2px rgba(0,0,0,.3);
  --shadow-md     : 0 4px 6px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg     : 0 10px 15px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.3);
}

/* ─── Layer: reset ──────────────────────────────────────── */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  img, svg { display: block; max-width: 100%; }
  button { cursor: pointer; font: inherit; color: inherit; }
  input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
}

/* ─── Layer: base ────────────────────────────────────────── */
@layer base {
  html {
    font-size: 100%; /* 16px */
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    line-height: var(--line-height-tight);
    font-weight: 600;
  }

  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
  h4 { font-size: var(--font-size-lg); }

  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* ─── Layer: layout ─────────────────────────────────────── */
@layer layout {
  #app {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr;
    min-height: 100dvh;
  }

  .sidebar {
    grid-column: 1 / 2;
    grid-row: 1 / -1;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: transform var(--transition-base);
  }

  .sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
  }

  .sidebar__logo {
    font-size: 1.5rem;
  }

  .sidebar__menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
  }

  .sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .sidebar__link:hover {
    background-color: var(--color-primary-light);
    color: white;
  }

  .sidebar__link.active {
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
  }

  .main-content {
    grid-column: 2 / 3;
    padding: var(--space-6);
    overflow-y: auto;
    max-width: var(--content-max-width);
    width: 100%;
    margin: 0 auto;
  }

  /* Sidebar responsif: mobile */
  @media (max-width: 767px) {
    #app {
      grid-template-columns: 1fr;
    }

    .sidebar {
      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      transform: translateX(-100%);
      width: 80%;
      max-width: 300px;
    }

    .sidebar.is-open {
      transform: translateX(0);
    }

    .main-content {
      grid-column: 1 / 2;
      padding: var(--space-4);
    }
  }
}

/* ─── Toast Notification Container ─────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 360px;
  animation: toastSlideIn var(--transition-base) ease;
}

.toast--success { border-left: 4px solid var(--color-success); }
.toast--error   { border-left: 4px solid var(--color-danger); }
.toast--warning { border-left: 4px solid var(--color-warning); }
.toast--info    { border-left: 4px solid var(--color-info); }

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

/* ─── Modal Overlay Dasar ──────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.modal__close {
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  line-height: 1;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.modal__close:hover {
  color: var(--color-danger);
}

.modal__body {
  padding: var(--space-6);
  overflow-y: auto;
}

/* ─── Reduksi gerakan ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Utility Dasar ────────────────────────────────────── */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
  }
}