/* assets/surya.css — SURYA Shared Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --s-red:        #E30613;
  --s-navy:       #1A2456;
  --s-navy-dk:    #0D1533;

  /* Neutrals */
  --s-white:      #FFFFFF;
  --s-gray-50:    #F8F9FA;
  --s-gray-100:   #F1F3F5;
  --s-gray-200:   #E9ECEF;
  --s-gray-400:   #CED4DA;
  --s-gray-500:   #ADB5BD;
  --s-gray-600:   #6C757D;
  --s-gray-700:   #495057;
  --s-gray-900:   #212529;

  /* Semantic */
  --s-success:    #28A745;
  --s-warning:    #FFC107;
  --s-orange:     #FD7E14;
  --s-danger:     #DC3545;

  /* Typography */
  --s-font:       'Inter', system-ui, -apple-system, sans-serif;
  --s-fs-xs:      11px;
  --s-fs-sm:      13px;
  --s-fs-base:    14px;
  --s-fs-md:      15px;
  --s-fs-lg:      16px;
  --s-fs-xl:      20px;
  --s-fs-2xl:     26px;

  /* Spacing */
  --s-sp-1: 4px;  --s-sp-2: 8px;  --s-sp-3: 12px;
  --s-sp-4: 16px; --s-sp-5: 20px; --s-sp-6: 24px;
  --s-sp-8: 32px;

  /* Radii */
  --s-r-sm: 6px; --s-r-md: 8px; --s-r-lg: 12px; --s-r-full: 9999px;

  /* Shadows */
  --s-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --s-shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --s-shadow-lg: 0 8px 32px rgba(0,0,0,.18);

  /* Transitions */
  --s-ease: .2s ease;

  /* ── Unprefixed aliases (used by Plans 4 and 5 inline styles) ── */
  --primary:       #E30613;
  --primary-light: #ff4d57;
  --navy:          #1A2456;
  --white:         #FFFFFF;
  --gray-50:       #F8F9FA;
  --gray-100:      #F1F3F5;
  --gray-200:      #E9ECEF;
  --gray-300:      #DEE2E6;
  --gray-400:      #CED4DA;
  --gray-500:      #ADB5BD;
  --gray-600:      #6C757D;
  --gray-700:      #495057;
  --gray-800:      #343A40;
  --gray-900:      #212529;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--s-font);
  font-size: var(--s-fs-base);
  color: var(--s-gray-900);
  background: var(--s-gray-50);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--s-font); cursor: pointer; }
input, select, textarea { font-family: var(--s-font); }

/* ─── PASSWORD GATE ──────────────────────────────────────── */
body.locked .surya-topbar,
body.locked .topbar,
body.locked .surya-page,
body.locked .review-layout,
body.locked .closure-page { display: none; }

.surya-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--s-navy);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.surya-gate.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.surya-gate__box {
  text-align: center; width: 90%; max-width: 360px;
}
.surya-gate__icon {
  font-size: 2rem; margin-bottom: var(--s-sp-4);
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  margin: 0 auto var(--s-sp-5);
}
.surya-gate__title {
  font-size: var(--s-fs-2xl); font-weight: 700; color: var(--s-white);
  letter-spacing: .15em; margin-bottom: var(--s-sp-1);
}
.surya-gate__sub {
  font-size: var(--s-fs-sm); color: rgba(255,255,255,.55);
  margin-bottom: var(--s-sp-6);
}
.surya-gate__box input[type="password"] {
  width: 100%; padding: .75rem 1rem;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--s-r-md); color: var(--s-white);
  font-size: var(--s-fs-base); text-align: center; letter-spacing: .1em;
  transition: border-color var(--s-ease);
}
.surya-gate__box input[type="password"]::placeholder { color: rgba(255,255,255,.35); }
.surya-gate__box input[type="password"]:focus {
  outline: none; border-color: rgba(255,255,255,.6);
}
.surya-gate__box input.shake { animation: s-shake .4s ease; }
.surya-gate__box button[type="submit"] {
  width: 100%; margin-top: var(--s-sp-3);
  padding: .75rem; background: var(--s-red);
  color: var(--s-white); border: none;
  border-radius: var(--s-r-md); font-size: var(--s-fs-base);
  font-weight: 600; transition: background var(--s-ease);
}
.surya-gate__box button[type="submit"]:hover { background: #c30511; }
.surya-gate__error {
  font-size: var(--s-fs-xs); color: #ff8a8a;
  margin-top: var(--s-sp-2); min-height: 1.2em;
}
.surya-gate__footer {
  font-size: .7rem; color: rgba(255,255,255,.3); margin-top: var(--s-sp-6);
}

@keyframes s-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* ─── TOPBAR ─────────────────────────────────────────────── */
.surya-topbar,
.topbar {
  height: 56px; background: var(--s-navy);
  display: flex; align-items: center; padding: 0 var(--s-sp-6);
  gap: var(--s-sp-4); position: relative; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.surya-topbar__brand { display: flex; align-items: baseline; gap: var(--s-sp-2); }
.surya-topbar__logo {
  font-size: var(--s-fs-xl); font-weight: 700; color: var(--s-white);
  letter-spacing: .15em;
}
.surya-topbar__tagline {
  font-size: var(--s-fs-xs); color: rgba(255,255,255,.45);
  font-weight: 400; letter-spacing: .02em; white-space: nowrap;
}
.surya-topbar__spacer { flex: 1; }
.surya-topbar__actions { display: flex; align-items: center; gap: var(--s-sp-3); }
.surya-topbar__icon-btn {
  width: 34px; height: 34px; border-radius: var(--s-r-full);
  background: rgba(255,255,255,.08); border: none;
  color: rgba(255,255,255,.7); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--s-ease);
}
.surya-topbar__icon-btn:hover { background: rgba(255,255,255,.16); }
.surya-topbar__avatar {
  width: 34px; height: 34px; border-radius: var(--s-r-full);
  background: var(--s-red); color: var(--s-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--s-fs-sm); font-weight: 600; cursor: pointer;
}
.surya-topbar__mitratel {
  font-size: var(--s-fs-xs); color: rgba(255,255,255,.4);
  font-weight: 500; letter-spacing: .06em; border-left: 1px solid rgba(255,255,255,.15);
  padding-left: var(--s-sp-3);
}

/* ─── KPI CARDS ──────────────────────────────────────────── */
.surya-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-sp-4); padding: var(--s-sp-4) var(--s-sp-6);
  background: var(--s-white); border-bottom: 1px solid var(--s-gray-200);
  position: relative;
  z-index: 99;
}
.surya-kpi {
  padding: var(--s-sp-3) var(--s-sp-4);
  border-radius: var(--s-r-md);
  border-left: 3px solid var(--s-gray-200);
}
.surya-kpi--red   { border-left-color: var(--s-red); }
.surya-kpi--green { border-left-color: var(--s-success); }
.surya-kpi--warn  { border-left-color: var(--s-warning); }
.surya-kpi__label {
  font-size: var(--s-fs-xs); font-weight: 600; color: var(--s-gray-500);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s-sp-1);
}
.surya-kpi__value { font-size: var(--s-fs-2xl); font-weight: 700; color: var(--s-gray-900); }
.surya-kpi__sub   { font-size: var(--s-fs-xs); color: var(--s-gray-500); margin-top: 2px; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.s-btn {
  display: inline-flex; align-items: center; gap: var(--s-sp-2);
  padding: .5rem 1rem; border-radius: var(--s-r-md);
  font-size: var(--s-fs-sm); font-weight: 600;
  border: none; transition: background var(--s-ease), opacity var(--s-ease);
  cursor: pointer; white-space: nowrap;
}
.s-btn--primary   { background: var(--s-red);     color: var(--s-white); }
.s-btn--primary:hover { background: #c30511; }
.s-btn--secondary { background: var(--s-gray-100); color: var(--s-gray-700); border: 1px solid var(--s-gray-200); }
.s-btn--secondary:hover { background: var(--s-gray-200); }
.s-btn--success   { background: var(--s-success);  color: var(--s-white); }
.s-btn--success:hover { background: #218838; }
.s-btn--danger    { background: var(--s-danger);   color: var(--s-white); }
.s-btn--danger:hover { background: #c82333; }
.s-btn--orange    { background: var(--s-orange);   color: var(--s-white); }
.s-btn--orange:hover { background: #e8690e; }
.s-btn--navy      { background: var(--s-navy);     color: var(--s-white); }
.s-btn--navy:hover { background: var(--s-navy-dk); }
.s-btn--lg { padding: .75rem 1.5rem; font-size: var(--s-fs-md); }
.s-btn--sm { padding: .35rem .75rem; font-size: var(--s-fs-xs); }
.s-btn--full { width: 100%; justify-content: center; }

/* ─── BADGES ─────────────────────────────────────────────── */
.s-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--s-r-full);
  font-size: var(--s-fs-xs); font-weight: 600;
}
.s-badge--red,    .badge-error   { background: #fde8ea; color: #842029; }
.s-badge--green,  .badge-success { background: #e6f4ea; color: var(--s-success); }
.s-badge--yellow, .badge-warning { background: #fff8e1; color: #856404; }
.s-badge--orange                 { background: #fff3e0; color: var(--s-orange); }
.s-badge--blue,   .badge-info    { background: #e3f2fd; color: #1565c0; }
.s-badge--gray                   { background: var(--s-gray-100); color: var(--s-gray-600); }
/* Shared .badge base (Plans 4 uses .badge .badge-*) */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--s-r-full);
  font-size: var(--s-fs-xs); font-weight: 600; white-space: nowrap;
}
.s-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* ─── FORM ELEMENTS ──────────────────────────────────────── */
.s-input {
  width: 100%; padding: .625rem .875rem;
  background: var(--s-white); border: 1.5px solid var(--s-gray-300, #dee2e6);
  border-radius: var(--s-r-md); font-size: var(--s-fs-base); color: var(--s-gray-900);
  transition: border-color var(--s-ease), box-shadow var(--s-ease);
}
.s-input:focus { outline: none; border-color: var(--s-navy); box-shadow: 0 0 0 3px rgba(26,36,86,.1); }
.s-input--error { border-color: var(--s-danger); }
.s-input--warn  { border-color: var(--s-warning); }
.s-label { font-size: var(--s-fs-sm); font-weight: 500; color: var(--s-gray-700); margin-bottom: var(--s-sp-1); display: block; }
.s-select {
  width: 100%; padding: .625rem .875rem; appearance: none;
  background: var(--s-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C757D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right .875rem center;
  border: 1.5px solid var(--s-gray-300, #dee2e6); border-radius: var(--s-r-md);
  font-size: var(--s-fs-base); color: var(--s-gray-900);
  transition: border-color var(--s-ease);
}
.s-select:focus { outline: none; border-color: var(--s-navy); }

/* Range slider */
.s-slider { width: 100%; height: 6px; appearance: none; background: var(--s-gray-200); border-radius: var(--s-r-full); outline: none; }
.s-slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--s-navy); cursor: pointer; box-shadow: var(--s-shadow-sm); }
.s-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--s-navy); cursor: pointer; border: none; }

/* ─── PANEL / DRAWER ─────────────────────────────────────── */
.s-panel {
  position: fixed; top: 56px; bottom: 0;
  width: 380px; background: var(--s-white);
  box-shadow: var(--s-shadow-lg); overflow-y: auto;
  transition: transform var(--s-ease);
  z-index: 200;
}
.s-panel--right { right: 0; transform: translateX(100%); }
.s-panel--left  { left: 0;  transform: translateX(-100%); }
.s-panel.open   { transform: translateX(0); }
.s-panel__header {
  padding: var(--s-sp-5) var(--s-sp-5) var(--s-sp-3);
  border-bottom: 1px solid var(--s-gray-200);
  position: sticky; top: 0; background: var(--s-white); z-index: 1;
}
.s-panel__close {
  position: absolute; top: var(--s-sp-4); right: var(--s-sp-4);
  background: var(--s-gray-100); border: none; border-radius: var(--s-r-full);
  width: 28px; height: 28px; font-size: 1rem; color: var(--s-gray-600);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.s-panel__body { padding: var(--s-sp-5); }
.s-panel__section { margin-bottom: var(--s-sp-5); }
.s-panel__section-title {
  font-size: var(--s-fs-xs); font-weight: 600; color: var(--s-gray-500);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--s-sp-3);
}
.s-panel__footer {
  padding: var(--s-sp-4) var(--s-sp-5);
  border-top: 1px solid var(--s-gray-200);
  position: sticky; bottom: 0; background: var(--s-white);
  display: flex; gap: var(--s-sp-2);
}

/* ─── TABS ───────────────────────────────────────────────── */
.s-tabs { display: flex; border-bottom: 2px solid var(--s-gray-200); gap: 0; }
.s-tab {
  padding: .625rem var(--s-sp-5); font-size: var(--s-fs-sm); font-weight: 500;
  color: var(--s-gray-600); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color var(--s-ease), border-color var(--s-ease);
}
.s-tab.active { color: var(--s-navy); border-bottom-color: var(--s-navy); font-weight: 600; }
.s-tab-panel { display: none; padding: var(--s-sp-5); }
.s-tab-panel.active { display: block; }

/* ─── CARD ───────────────────────────────────────────────── */
.s-card {
  background: var(--s-white); border: 1px solid var(--s-gray-200);
  border-radius: var(--s-r-lg); padding: var(--s-sp-4);
  box-shadow: var(--s-shadow-sm);
}
.s-card:hover { box-shadow: var(--s-shadow-md); }

/* ─── TIMELINE ───────────────────────────────────────────── */
.s-timeline { list-style: none; }
.s-timeline__item { display: flex; gap: var(--s-sp-3); padding-bottom: var(--s-sp-4); position: relative; }
.s-timeline__item::before {
  content: ''; position: absolute; left: 7px; top: 20px;
  bottom: 0; width: 2px; background: var(--s-gray-200);
}
.s-timeline__item:last-child::before { display: none; }
.s-timeline__dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--s-navy); flex-shrink: 0; margin-top: 2px;
}
.s-timeline__text { font-size: var(--s-fs-sm); color: var(--s-gray-700); }
.s-timeline__time { font-size: var(--s-fs-xs); color: var(--s-gray-500); }

/* ─── ALERT BANNER ───────────────────────────────────────── */
.s-alert {
  padding: var(--s-sp-3) var(--s-sp-4); border-radius: var(--s-r-md);
  font-size: var(--s-fs-sm); display: flex; gap: var(--s-sp-2); align-items: flex-start;
}
.s-alert--warn  { background: #fff8e1; color: #856404; border-left: 3px solid var(--s-warning); }
.s-alert--error { background: #fde8ea; color: #842029; border-left: 3px solid var(--s-danger); }
.s-alert--info  { background: #e3f2fd; color: #1565c0; border-left: 3px solid #1976d2; }
.s-alert--success { background: #e6f4ea; color: #1e4620; border-left: 3px solid var(--s-success); }

/* ─── PHOTO GRID ─────────────────────────────────────────── */
.s-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sp-3); }
.s-photo-slot {
  aspect-ratio: 4/3; border: 2px dashed var(--s-gray-300, #dee2e6);
  border-radius: var(--s-r-md); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s-sp-2);
  cursor: pointer; transition: border-color var(--s-ease), background var(--s-ease);
  overflow: hidden; position: relative; background: var(--s-gray-50);
}
.s-photo-slot:hover { border-color: var(--s-navy); background: var(--s-gray-100); }
.s-photo-slot__icon { font-size: 1.5rem; }
.s-photo-slot__label { font-size: var(--s-fs-xs); font-weight: 500; color: var(--s-gray-600); text-align: center; padding: 0 var(--s-sp-2); }
.s-photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-photo-slot.filled { border-style: solid; border-color: var(--s-success); }

/* ─── DOC UPLOAD ─────────────────────────────────────────── */
.s-doc-upload {
  border: 1.5px dashed var(--s-gray-300, #dee2e6); border-radius: var(--s-r-md);
  padding: var(--s-sp-4); display: flex; align-items: center; gap: var(--s-sp-3);
  cursor: pointer; transition: border-color var(--s-ease); background: var(--s-gray-50);
}
.s-doc-upload:hover { border-color: var(--s-navy); }
.s-doc-upload.done { border-color: var(--s-success); background: #e6f4ea; }
.s-doc-upload__icon { font-size: 1.5rem; }
.s-doc-upload__name { font-size: var(--s-fs-sm); font-weight: 500; color: var(--s-gray-700); flex: 1; }
.s-doc-upload__check { font-size: 1.2rem; color: var(--s-success); }

/* ─── OVERLAY BACKDROP ───────────────────────────────────── */
.s-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.3);
  z-index: 150; opacity: 0; visibility: hidden;
  transition: opacity var(--s-ease), visibility var(--s-ease);
}
.s-backdrop.active { opacity: 1; visibility: visible; }

/* ─── DIVIDER ────────────────────────────────────────────── */
.s-divider { border: none; border-top: 1px solid var(--s-gray-200); margin: var(--s-sp-4) 0; }

/* ─── SUCCESS POPUP ──────────────────────────────────────── */
.s-success-popup {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.s-success-popup.show { opacity: 1; visibility: visible; }
.s-success-popup__box {
  background: var(--s-white); border-radius: var(--s-r-xl);
  padding: var(--s-sp-8); text-align: center; max-width: 360px; width: 90%;
  box-shadow: var(--s-shadow-lg);
}
.s-success-popup__icon { font-size: 3rem; margin-bottom: var(--s-sp-4); }
.s-success-popup__title { font-size: var(--s-fs-xl); font-weight: 700; color: var(--s-success); margin-bottom: var(--s-sp-2); }
.s-success-popup__msg { font-size: var(--s-fs-sm); color: var(--s-gray-600); margin-bottom: var(--s-sp-6); }