/* ══════════════════════════════════════════════════════
   OFFICIAL ARIAL FONT (Local Static Assets)
   ══════════════════════════════════════════════════════ */

@font-face {
  font-family: 'ArialCustom';
  src: local('Arial'),
       url('../fonts/Arial.ttf') format('truetype'),
       url('/static/fonts/Arial.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ArialCustom';
  src: local('Arial Bold'),
       url('../fonts/Arial_Bold.ttf') format('truetype'),
       url('/static/fonts/Arial_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ArialCustom';
  src: local('Arial Italic'),
       url('../fonts/Arial_Italic.ttf') format('truetype'),
       url('/static/fonts/Arial_Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'ArialCustom';
  src: local('Arial Bold Italic'),
       url('../fonts/Arial_Bold_Italic.ttf') format('truetype'),
       url('/static/fonts/Arial_Bold_Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Surat AI – Professional Tech Blue
   Enterprise-grade · subtle · elegant · dark
   ============================================================ */

:root {
  /* Core palette */
  --ink-950:  #04091f;
  --ink-900:  #080f2a;
  --ink-800:  #0d1640;
  --ink-700:  #112057;

  --blue-600: #1d4ed8;
  --blue-500: #2563eb;
  --blue-400: #3b82f6;
  --blue-300: #93c5fd;
  --blue-200: #bfdbfe;
  --blue-100: #dbeafe;

  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;

  --surface-0: rgba(255,255,255,0.03);
  --surface-1: rgba(255,255,255,0.055);
  --surface-2: rgba(255,255,255,0.085);
  --border:    rgba(255,255,255,0.08);
  --border-hi: rgba(59,130,246,0.35);

  --text-primary:   #f0f4ff;
  --text-secondary: rgba(240,244,255,0.55);
  --text-muted:     rgba(37, 238, 249, 0.894);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm:  0 1px 4px rgba(0,0,0,0.3);
  --shadow:     0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.45);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.55);

  --transition: 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink-950);
  color: var(--text-primary);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Subtle circuit grid background ──────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(59,130,246,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* ── Ambient glow (static, no animation) ─────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 700px at 15% 10%, rgba(29,78,216,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 700px 500px at 85% 90%, rgba(17,32,87,0.18) 0%, transparent 70%);
}

/* Tech decorations wrapper */
.tech-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Floating tech shapes – very subtle, slow drift */
.tech-shape {
  position: absolute;
  opacity: 0.035;
  animation: gentleDrift 18s ease-in-out infinite;
  will-change: transform;
}
.tech-shape:nth-child(2) { animation-delay: -5s;  animation-duration: 22s; }
.tech-shape:nth-child(3) { animation-delay: -9s;  animation-duration: 16s; }
.tech-shape:nth-child(4) { animation-delay: -3s;  animation-duration: 25s; }
.tech-shape:nth-child(5) { animation-delay: -12s; animation-duration: 20s; }
.tech-shape:nth-child(6) { animation-delay: -7s;  animation-duration: 19s; }
.tech-shape:nth-child(7) { animation-delay: -15s; animation-duration: 23s; }

@keyframes gentleDrift {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(1.5deg); }
}

/* Scan line – very faint, slow */
.scan-line {
  position: fixed;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(59,130,246,0.18) 30%,
    rgba(96,165,250,0.22) 50%,
    rgba(59,130,246,0.18) 70%, transparent);
  z-index: 0;
  animation: scanMove 20s linear infinite;
  pointer-events: none;
}
@keyframes scanMove {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}

/* Pulse dots */
.pulse-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--blue-400);
  border-radius: 50%;
  opacity: 0;
  animation: pulseDot 6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(2); }
}

/* ══════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════ */

nav.navbar,
.alert-wrapper,
main.container-fluid { position: relative; z-index: 10; }

/* ── Navbar ───────────────────────────────────────────── */
.navbar {
  background: rgba(4,9,31,0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(59,130,246,0.08), var(--shadow) !important;
  padding: .7rem 2rem !important;
}
.navbar-brand {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary) !important;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.navbar-brand i {
  color: var(--blue-400);
  font-size: 1.1rem;
}
.navbar .nav-link {
  color: var(--text-secondary) !important;
  font-size: .82rem;
  font-weight: 500;
  border-radius: var(--radius-xs);
  padding: .38rem .7rem !important;
  transition: color var(--transition), background var(--transition);
}
.navbar .nav-link:hover {
  color: var(--text-primary) !important;
  background: var(--surface-2);
}
.navbar-toggler {
  border-color: var(--border) !important;
}

main.container-fluid {
  max-width: 1200px;
  padding: 2rem 1.5rem 4rem;
}

/* ══════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════ */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.page-header-left { flex: 1; min-width: 0; }
.eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #38bdf8 !important;
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before {
  content: '';
  width: 14px;
  height: 1.5px;
  background: #38bdf8;
  border-radius: 1px;
  display: inline-block;
  flex-shrink: 0;
}
.page-header h1 {
  font-size: 1.55rem;
  font-weight: 700;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.page-header .sub-text {
  font-size: .875rem;
  color: var(--text-secondary);
  margin-top: .4rem;
  max-width: 600px;
}
.page-header .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */

.btn {
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .46rem 1rem;
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  letter-spacing: .01em;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue-600) !important;
  border-color: rgba(59,130,246,.3) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--blue-500) !important;
  border-color: rgba(59,130,246,.5) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.4) !important;
  transform: translateY(-1px);
  color: #fff !important;
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
.btn-secondary:hover {
  background: var(--surface-2) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: var(--text-primary) !important;
}

.btn-outline-primary {
  background: transparent !important;
  border-color: var(--border-hi) !important;
  color: var(--blue-300) !important;
}
.btn-outline-primary:hover {
  background: rgba(59,130,246,.1) !important;
  color: var(--text-primary) !important;
}

.btn-danger {
  background: rgba(185,28,28,.8) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #fff !important;
}
.btn-danger:hover { background: #dc2626 !important; }

/* ══════════════════════════════════════════════════════
   SEARCH BAR
   ══════════════════════════════════════════════════════ */

.search-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.search-bar .form-control {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: .5rem .9rem;
  font-size: .85rem;
  background: var(--surface-1);
  color: var(--text-primary);
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.search-bar .form-control::placeholder { color: var(--text-muted); }
.search-bar .form-control:focus {
  border-color: var(--border-hi);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
  outline: none;
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(59,130,246,0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow), 0 0 0 1px rgba(59,130,246,.12);
  transform: translateY(-2px);
}
.card:hover::after { opacity: 1; }

.card-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .45rem;
  line-height: 1.35;
}
.card-text {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   LIST ROWS
   ══════════════════════════════════════════════════════ */

.list-panel { display: flex; flex-direction: column; gap: .45rem; }

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  position: relative;
}
.list-row::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: var(--blue-400);
  border-radius: 1px;
  opacity: 0;
  transition: opacity var(--transition);
}
.list-row:hover {
  background: var(--surface-1);
  border-color: var(--border-hi);
  box-shadow: var(--shadow);
}
.list-row:hover::before { opacity: 1; }
.list-row-left strong {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.list-row-left small {
  font-size: .77rem;
  color: var(--text-muted);
  margin-top: .1rem;
  display: block;
}
.list-row-right { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .85rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  opacity: 0;
  transition: opacity var(--transition);
}
.stat-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.stat-card .stat-label {
  font-size: .73rem;
  color: var(--text-muted);
  margin-top: .35rem;
}

/* ══════════════════════════════════════════════════════
   SECTION PANEL
   ══════════════════════════════════════════════════════ */

.section-panel {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}
.section-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}
.section-panel-header h2 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.section-panel-header a {
  font-size: .78rem;
  color: var(--blue-300);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition);
}
.section-panel-header a:hover { color: var(--text-primary); }

/* ══════════════════════════════════════════════════════
   FORMS – Professional Glass
   ══════════════════════════════════════════════════════ */

.form-container {
  background: var(--ink-800);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
  max-width: 960px;
}

/* Subtle top accent line */
.form-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,.6) 30%,
    rgba(147,197,253,.8) 50%,
    rgba(59,130,246,.6) 70%,
    transparent 100%);
}

/* Fieldset */
.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--surface-0);
}
.form-fieldset legend {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-300);
  padding: 0 .6rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  line-height: 1;
}
.form-fieldset legend::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--blue-400);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Grid */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1.25rem;
}
.form-grid-2 .col-span-2 { grid-column: 1 / -1; }

/* Field wrapper */
.form-field { display: flex; flex-direction: column; gap: .3rem; }
.form-field label,
.form-field .form-label,
.form-container label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .03em;
}

/* ── Input base ─────────────────────────────────────── */
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-field select,
.form-field textarea,
.form-container input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-container select,
.form-container textarea {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 .875rem;
  font-size: .875rem;
  font-family: inherit;
  background: var(--ink-900);
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-field input[type="date"],
.form-container input[type="date"] {
  appearance: auto;
  -webkit-appearance: auto;
  color-scheme: dark;
}
.form-container textarea,
.form-field textarea {
  height: auto;
  padding: .6rem .875rem;
  resize: vertical;
  min-height: 80px;
}
.form-container select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2393c5fd' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2rem;
}

.form-field input::placeholder,
.form-container input::placeholder,
.form-container textarea::placeholder { color: var(--text-muted); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
  background: rgba(4,9,31,.8);
  color: var(--text-primary);
}

/* Select option */
.form-container select option {
  background: var(--ink-900);
  color: var(--text-primary);
}

/* File input */
.form-container input[type="file"] {
  height: auto;
  padding: .55rem .875rem;
  background: var(--ink-900);
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .82rem;
}
.form-container input[type="file"]:hover {
  border-color: var(--blue-400);
  background: rgba(29,78,216,.08);
}

/* Checkbox */
.form-container input[type="checkbox"],
.form-container input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--blue-400);
  margin: 0;
}
/* Checkbox row layout */
.form-field label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--text-primary);
}

/* Error / help */
.errorlist, .form-field .errorlist {
  list-style: none;
  padding: 0;
  margin: .2rem 0 0;
  font-size: .75rem;
  color: #f87171;
}
.helptext, .form-field .helptext {
  font-size: .73rem;
  color: var(--text-muted);
  margin-top: .15rem;
  line-height: 1.45;
}

/* Override Bootstrap .text-muted so it's visible on dark background */
.text-muted {
  color: var(--text-secondary) !important;
}

/* Info / callout note box — reusable across templates */
.info-note {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: rgba(29,78,216,0.12);
  border: 1px solid rgba(59,130,246,0.28);
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  color: var(--text-primary);
  font-size: .875rem;
  line-height: 1.6;
}
.info-note .info-icon {
  color: var(--blue-300, #93c5fd);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.info-note strong {
  color: var(--blue-300, #93c5fd);
}

/* Actions */
.form-actions {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════ */

.badge-blue, .badge-green, .badge-red, .badge-gray {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: .18rem .65rem;
  border: 1px solid;
  text-transform: uppercase;
}
.badge-blue  { background: rgba(59,130,246,.1);  color: var(--blue-300);  border-color: rgba(59,130,246,.2); }
.badge-green { background: rgba(34,197,94,.09);  color: #86efac;          border-color: rgba(34,197,94,.2); }
.badge-red   { background: rgba(239,68,68,.09);  color: #fca5a5;          border-color: rgba(239,68,68,.18); }
.badge-gray  { background: rgba(255,255,255,.06); color: var(--text-secondary); border-color: var(--border); }

/* ══════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════ */

.alert {
  border-radius: var(--radius-sm) !important;
  border: 1px solid !important;
  font-size: .845rem;
  padding: .75rem 1rem !important;
}
.alert-info    { background: rgba(59,130,246,.07) !important; color: var(--blue-200) !important; border-color: rgba(59,130,246,.2) !important; }
.alert-success { background: rgba(34,197,94,.07)  !important; color: #bbf7d0 !important;         border-color: rgba(34,197,94,.2) !important; }
.alert-danger  { background: rgba(239,68,68,.07)  !important; color: #fecaca !important;         border-color: rgba(239,68,68,.18) !important; }
.alert-warning { background: rgba(251,191,36,.07) !important; color: #fde68a !important;         border-color: rgba(251,191,36,.2) !important; }
.btn-close-white { filter: brightness(0) invert(1) opacity(.4); }

/* ══════════════════════════════════════════════════════
   CHATBOT
   ══════════════════════════════════════════════════════ */

.chat-list { display: flex; flex-direction: column; gap: .85rem; }
.chat-item { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.chat-question {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}
.chat-answer {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.source-chip {
  display: inline-block;
  background: rgba(34,211,238,.08);
  color: var(--cyan-300);
  font-size: .68rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .18rem .62rem;
  margin: .18rem .18rem 0 0;
  text-decoration: none;
  border: 1px solid rgba(34,211,238,.18);
  transition: all var(--transition);
  letter-spacing: .02em;
}
.source-chip:hover {
  background: rgba(34,211,238,.16);
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   DOCUMENT TEXT
   ══════════════════════════════════════════════════════ */

.document-text {
  max-height: 480px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  background: var(--ink-900);
  font-size: .78rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════
   MARGIN CONTROL PANEL (Batas Kertas Manual)
   ══════════════════════════════════════════════════════ */

.margin-control-panel {
  padding: .85rem 1.25rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.margin-box {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.margin-box label {
  font-size: .8rem;
  margin: 0;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.format-group {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.format-group-label {
  font-size: .76rem;
  font-weight: 700;
  color: var(--blue-300);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.control-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 .2rem;
}
.input-unit {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: .25rem .5rem;
}
.input-unit input {
  width: 48px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: .85rem;
  font-weight: 600;
  text-align: right;
  padding: 0 4px 0 0;
  outline: none;
}
.input-unit span {
  font-size: .75rem;
  color: var(--text-muted);
  user-select: none;
}
.btn-preset-group {
  display: inline-flex;
  gap: 2px;
}
.btn-preset {
  padding: .15rem .45rem;
  font-size: .75rem;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1.2;
}
.btn-preset:hover,
.btn-preset.active {
  background: var(--blue-600);
  color: #fff;
  border-color: var(--blue-500);
}

/* ══════════════════════════════════════════════════════
   LETTER PREVIEW (white paper)
   ══════════════════════════════════════════════════════ */

.letter-preview {
  width: 210mm;
  min-height: 297mm;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: 20mm 20mm 20mm 25mm;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111;
  font-family: 'ArialCustom', Arial, Helvetica, sans-serif !important;
  font-size: 12pt;
  line-height: 1.5;
  box-sizing: border-box;
  box-shadow: var(--shadow-xl);
  position: relative;
}
.letter-preview * {
  font-family: 'ArialCustom', Arial, Helvetica, sans-serif;
}

/* Multi-page container & individual A4 sheets */
.letter-pages-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  margin: 0 auto 2rem;
}

.letter-page {
  width: 210mm;
  min-height: 297mm;
  height: 297mm;
  max-width: 100%;
  padding: 20mm 20mm 20mm 25mm;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  font-family: 'ArialCustom', Arial, Helvetica, sans-serif !important;
  font-size: 12pt;
  line-height: 1.5;
  box-shadow: var(--shadow-xl);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.letter-page * {
  font-family: 'ArialCustom', Arial, Helvetica, sans-serif;
}

.letter-page-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.letter-page-footer {
  height: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 11pt;
  color: #111;
  margin-top: auto;
}

.letter-page-footer .page-number {
  text-align: center;
  width: 100%;
  font-size: 11pt;
  letter-spacing: 0.08em;
}

.letter-page-footer .catchword {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 11pt;
  font-style: italic;
  white-space: nowrap;
}
.letterhead {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr) 86px;
  align-items: center;
  gap: 1px;
  margin-bottom: 24px;
  text-align: center;
}
.letterhead:not(.no-line)::after {
  content: "";
  grid-column: 1/-1;
  display: block;
  height: 4px;
  margin-top: 6px;
  border-top: 1px solid #111;
  border-bottom: 3px solid #111;
}
.letterhead strong  { display:block; font-size:14pt; line-height:1.15; }
.letterhead small   { display:block; color:#111; font-size:9pt; line-height:1.25; }
.letterhead-center-logo { grid-template-columns:1fr; }
.letterhead-center-logo .letterhead-logo { justify-self:center; }
.letterhead-center-logo .letterhead-text { grid-column:auto; }
.letter-meta {
  display: grid;
  grid-template-columns: 85px minmax(0,1fr);
  gap: 0 12px;
  font-weight: normal;
  line-height: 1.25 !important;
  font-size: 12pt;
}
.letter-meta dt {
  font-weight: normal;
  display: flex;
  justify-content: space-between;
  line-height: 1.25 !important;
}
.letter-meta dt::after {
  content: ":";
}
.letter-meta dd {
  font-weight: normal;
  margin: 0;
  line-height: 1.25 !important;
}
.letter-meta.compact {
  max-width: 600px;
}
.date-line {
  text-align: right;
  font-weight: normal;
  line-height: 1.25 !important;
  margin-bottom: 8px;
}
.nota-dinas-title,
.letter-preview h2.center,
.center {
  text-align: center;
  font-size: 12pt !important;
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none !important;
  margin: 8px 0 14px;
  color: #111;
  letter-spacing: 0.04em;
  border: none !important;
}
.nota-dinas-divider {
  border-bottom: 1.5px solid #111;
  margin: 10px 0 18px 0;
  width: 100%;
}
.letter-recipient {
  margin-top: 24px;    /* Jarak antara Hal dan Yth. */
  margin-bottom: 32px; /* Jarak antara Tempat dan Isi Surat */
  line-height: 1.25 !important;
  font-size: 12pt;
  font-weight: normal;
}
.letter-recipient p {
  margin: 0;
  line-height: 1.25 !important;
}
.body-text {
  margin-top: 20px;
  text-align: justify;
  line-height: var(--body-line-height, 1.5);
}
.body-text p {
  margin-top: 0 !important;
  margin-bottom: var(--paragraph-spacing, 8pt) !important;
  text-indent: var(--paragraph-indent, 1cm) !important;
  line-height: var(--body-line-height, 1.5) !important;
}
.body-text p.continuation-p {
  text-indent: 0 !important;
}
.cc {
  margin-top: 28px;
  clear: both;
  text-align: left;
  float: left;
  width: auto;
  max-width: 60%;
  font-size: 12pt;
  line-height: 1.25 !important;
}
.cc .cc-title,
.cc span {
  display: block;
  font-size: 12pt;
  font-weight: normal;
  margin-bottom: 2px;
}
.cc .cc-content {
  font-size: 12pt;
  line-height: 1.25 !important;
}
.kop-footer-address { text-align:center; font-size:9pt; margin:-14px 0 24px; }
.letterhead-spacer { height:16px; }

/* ══════════════════════════════════════════════════════
   LINKS & TYPOGRAPHY
   ══════════════════════════════════════════════════════ */

a { color: var(--blue-300); transition: color var(--transition); }
a:hover { color: var(--text-primary); }

h1,h2,h3,h4 { letter-spacing: -.02em; }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

/* ══════════════════════════════════════════════════════
   SIGNATURE – Definitif vs Plt / Plh format
   ══════════════════════════════════════════════════════ */

.signature {
  width: 320px;
  margin: 36px 0 0 auto;
  font-size: 12pt;
  line-height: 1.25 !important;
  color: #111;
  font-weight: normal !important;
}

.signature p,
.signature-title-text,
.signer-title,
.signer-status,
.signer-name,
.signer-rank,
.signer-nip,
.signer-person-block {
  font-weight: normal !important;
  color: #111;
  font-size: 12pt;
  line-height: 1.25 !important;
}

.signature-title-text {
  line-height: 1.25 !important;
  margin-bottom: 0;
}

/* Plt / Plh format:
   Kolom 1: Jenis jabatan (Plt. / Plh.)
   Kolom 2: Jabatan, spasi tanda tangan, dan Nama Pejabat sejajar dengan Jabatan (tidak di bawah jenis jabatan)
*/
.signature-grid-non-definitif {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
  align-items: start;
}

.signer-prefix-col {
  white-space: nowrap;
}

.signer-status {
  display: inline-block;
  line-height: 1.25 !important;
  white-space: nowrap;
  font-weight: normal !important;
  font-size: 12pt;
  color: #111;
}

.signer-content-col {
  display: flex;
  flex-direction: column;
}

.signer-title {
  line-height: 1.25 !important;
  font-weight: normal !important;
  font-size: 12pt;
  color: #111;
}

.signature-space {
  height: 56px;
  min-height: 56px;
}

.signer-person-block {
  display: flex;
  flex-direction: column;
  line-height: 1.25 !important;
}

.signer-name {
  font-weight: normal !important;
  font-size: 12pt;
  color: #111;
  line-height: 1.25 !important;
}

.signer-rank,
.signer-nip {
  font-weight: normal !important;
  font-size: 12pt;
  color: #111;
  line-height: 1.25 !important;
}

/* Fallback class */
.signature-title-block.non-definitif {
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

/* ══════════════════════════════════════════════════════
   BADGE – amber (non-definitif label)
   ══════════════════════════════════════════════════════ */

.badge-amber {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  background: rgba(251,191,36,.12);
  color: #f59e0b;
  border: 1px solid rgba(251,191,36,.28);
}

/* ══════════════════════════════════════════════════════
   BUTTONS – extra helpers
   ══════════════════════════════════════════════════════ */

.btn-outline-danger {
  background: transparent !important;
  border: 1px solid rgba(239,68,68,.5) !important;
  color: #f87171 !important;
  transition: background var(--transition), color var(--transition);
}
.btn-outline-danger:hover {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.8) !important;
  color: #fca5a5 !important;
}
.btn-sm {
  padding: .28rem .65rem !important;
  font-size: .78rem !important;
  border-radius: var(--radius-xs) !important;
}

/* ══════════════════════════════════════════════════════
   PRINT & PDF LOCKING (Strict A4 portrait: 210mm x 297mm)
   ══════════════════════════════════════════════════════ */

/* Top-level @page rule ensures Chromium, Firefox, WebKit lock paper size to A4 */
@page {
  size: 210mm 297mm;
  margin: 0mm !important;
}

@media print {
  @page {
    size: 210mm 297mm;
    margin: 0mm !important;
  }
  html, body, body::before, body::after {
    width: 210mm !important;
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .tech-bg,
  nav,
  .navbar,
  .alert-wrapper,
  .page-header,
  .section-panel,
  .no-print {
    display: none !important;
  }
  main.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .letter-pages-wrapper {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .letter-preview,
  .letter-page {
    width: 210mm !important;
    min-width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    /* padding diatur oleh dynamicPrintMarginStyle (JS) via CSS variables */
    padding: var(--page-margin-top, 20mm) var(--page-margin-right, 20mm) var(--page-margin-bottom, 20mm) var(--page-margin-left, 25mm) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    box-sizing: border-box !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    overflow: hidden !important;
  }
  .letter-page:last-child,
  .letter-preview.single-page {
    page-break-after: auto !important;
    break-after: auto !important;
  }
  .body-text {
    line-height: var(--body-line-height, 1.5) !important;
    text-align: justify !important;
  }
  .body-text p {
    margin-top: 0 !important;
    margin-bottom: var(--paragraph-spacing, 8pt) !important;
    text-indent: var(--paragraph-indent, 1cm) !important;
    line-height: var(--body-line-height, 1.5) !important;
  }
  .body-text p.continuation-p {
    text-indent: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .chat-item         { grid-template-columns: 1fr; }
  .form-grid-2       { grid-template-columns: 1fr; }
  .form-grid-2 .col-span-2 { grid-column: auto; }
  .letter-preview    { padding: 24px 20px; }
  .letterhead        { grid-template-columns: 1fr; }
  .page-header       { flex-direction: column; gap: .85rem; }
  .stat-grid         { grid-template-columns: repeat(2, 1fr); }
  .form-container    { padding: 1.5rem 1.25rem; }
  .navbar            { padding: .5rem 1rem !important; }
  main.container-fluid { padding: 1.25rem 1rem 3rem; }
}