/* ---
    DESIGN SYSTEM & CUSTOM CSS
    Dibuat secara manual untuk kontrol penuh atas tampilan.
    --- */
:root {
  --font-sans: "Inter", sans-serif;
  --font-mono: "Courier Prime", monospace;
  --font-size-base: 16px;

  /* Light Theme */
  --bg-app-light: #f0f2f5;
  --bg-header-light: #ffffff;
  --bg-paper-light: #ffffff;
  --bg-input-light: #ffffff;
  --bg-hover-light: #f8f9fa;
  --bg-active-light: #e9ecef;

  --text-primary-light: #181a1b;
  --text-secondary-light: #5c6266;
  --text-placeholder-light: #9ca3af;

  --border-light: #dee2e6;
  --border-focus-light: #80bdff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.1);

  /* Dark Theme */
  --bg-app-dark: #181a1b;
  --bg-header-dark: #202324;
  --bg-paper-dark: #202324;
  --bg-input-dark: #2c2f30;
  --bg-hover-dark: #313436;
  --bg-active-dark: #3a3d3f;

  --text-primary-dark: #e8e6e3;
  --text-secondary-dark: #b1b3b5;
  --text-placeholder-dark: #737678;

  --border-dark: #45494b;
  --border-focus-dark: #5a99e4;
}

/* --- General Reset & Base --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: var(--font-size-base);
}
body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
  overflow: hidden;
}
button,
input,
textarea {
  font-family: inherit;
}

/* --- Theme Management --- */
body {
  --bg-app: var(--bg-app-light);
  --bg-header: var(--bg-header-light);
  --bg-paper: var(--bg-paper-light);
  --bg-input: var(--bg-input-light);
  --bg-hover: var(--bg-hover-light);
  --bg-active: var(--bg-active-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-placeholder: var(--text-placeholder-light);
  --border-color: var(--border-light);
  --border-focus: var(--border-focus-light);
}
body.dark-mode {
  --bg-app: var(--bg-app-dark);
  --bg-header: var(--bg-header-dark);
  --bg-paper: var(--bg-paper-dark);
  --bg-input: var(--bg-input-dark);
  --bg-hover: var(--bg-hover-dark);
  --bg-active: var(--bg-active-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-placeholder: var(--text-placeholder-dark);
  --border-color: var(--border-dark);
  --border-focus: var(--border-focus-dark);
}

/* --- Main App Layout --- */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.app-header {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 24px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}
.header-top,
.header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-bottom {
  margin-top: 12px;
}
.main-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 32px;
}
.app-status-bar {
  background-color: var(--bg-header);
  border-top: 1px solid var(--border-color);
  padding: 8px 24px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

/* --- Header Components --- */
.app-title {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-title svg {
  color: #4f46e5;
}
.action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none; /* For <a> tags styled as buttons */
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn-primary {
  background-color: #4f46e5;
  color: white;
  border-color: #4f46e5;
}
.btn-primary:hover {
  background-color: #4338ca;
  border-color: #4338ca;
}
.btn-danger {
  background-color: transparent;
  color: #dc2626;
  border-color: #fca5a5;
}
.btn-danger:hover {
  background-color: #fef2f2;
  border-color: #ef4444;
}
.btn-secondary {
  background-color: var(--bg-active);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-secondary:hover {
  border-color: var(--text-secondary);
}

/* --- Tabs & Toolbar --- */
.tab-group {
  display: flex;
  align-items: center;
  background-color: var(--bg-app);
  padding: 4px;
  border-radius: 8px;
}
.tab-btn {
  padding: 6px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab-btn:hover {
  color: var(--text-primary);
}
.tab-btn.active {
  background-color: var(--bg-header);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.toolbar {
  display: flex;
  gap: 4px;
}
.toolbar-btn {
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.toolbar-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.toolbar-btn.active {
  background-color: #4f46e5;
  color: white;
}

/* --- Form Elements --- */
.form-group {
  margin-bottom: 24px;
}
.form-label {
  display: block;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-size: 0.875rem;
}
.form-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
.form-input::placeholder {
  color: var(--text-placeholder);
}
textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

/* --- PERBAIKAN: Editor Area dengan Pagination --- */
#page-container {
  display: flex;
  flex-direction: column; /* Menyusun halaman secara vertikal */
  align-items: center;   /* Pusatkan halaman secara horizontal */
  gap: 32px; /* Jarak antar halaman */
}
.page {
  font-family: var(--font-mono);
  font-size: 12pt;
  line-height: 16px; /* 12pt * (96/72) = 16px. Rasio 1:1. */
  color: var(--text-primary);
  background-color: var(--bg-paper);
  box-shadow: var(--shadow-lg);
  width: 8.5in;
  height: 11in; /* Tinggi tetap, tidak lagi min-height */
  outline: none;
  transition: all 0.3s ease;
  padding-left: 1.5in;
  padding-right: 1in;
  padding-top: 1in;
  padding-bottom: 1in;
  overflow: hidden; /* Sembunyikan konten yang meluap, JS akan menanganinya */
}
.scene-heading {
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 1.5em; /* 18pt */
  margin-bottom: 1em; /* 12pt */
}
.action {
  margin-top: 1em; /* 12pt */
}
.character {
  text-transform: uppercase;
  font-weight: bold;
  margin-left: 1.9in;
  margin-top: 1em; /* 12pt */
}
.dialog {
  margin-left: 0.9in;
  margin-right: 1.3in;
  margin-bottom: 15px; /* 11.25pt */
}
.parenthetical {
  margin-left: 1.3in;
  margin-right: 1.8in;
}
.transition {
  text-transform: uppercase;
  font-weight: bold;
  text-align: right;
  margin-top: 1.5em; /* 18pt */
  margin-bottom: 1em; /* 12pt */
}
.placeholder-line {
  color: var(--text-placeholder);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) {
  .main-content {
    padding: 16px;
  }
  #page-container {
      gap: 16px;
  }
  .page {
    width: 100%;
    height: auto; /* Di layar kecil, kembali ke perilaku lama (satu halaman memanjang) */
    min-height: 70vh;
    padding: 1in;
    box-shadow: var(--shadow-md);
    overflow: visible; /* Biarkan konten memanjang */
  }
  .scene-heading,
  .action,
  .character,
  .dialog,
  .parenthetical,
  .transition {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}
@media (max-width: 768px) {
  .header-top {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .header-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .page {
    padding: 0.75in 0.5in;
  }
}
/* --- End of Editor Area --- */

/* --- Modals and Popups --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-content {
  background-color: var(--bg-header);
  padding: 32px;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 450px;
  text-align: center;
}
.modal-message {
  font-size: 1.125rem;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.autocomplete-popup {
  position: absolute;
  z-index: 20;
  background-color: var(--bg-header);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-size: 0.875rem;
}
.autocomplete-popup div {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-secondary);
}
.autocomplete-popup div:hover,
.autocomplete-popup div.selected {
  background-color: #4f46e5;
  color: white;
}
.hidden {
  display: none !important;
}

/* Add Google Fonts import at the top of the CSS file */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');