/* =========================
   Survey STTIN – Blue Friendly Theme
   ========================= */

:root{
  --bg: #f5f8ff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;

  --primary: #2563eb;         /* biru dominan */
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --primary-soft: rgba(37, 99, 235, .12);

  --border: rgba(2, 6, 23, .10);
  --shadow: 0 10px 30px rgba(2, 6, 23, .08);

  --radius: 16px;
}

/* base */
html, body{ height:100%; }
body{
  background: radial-gradient(1200px 500px at 10% -10%, rgba(37,99,235,.12), transparent 60%),
              radial-gradient(900px 400px at 90% 0%, rgba(37,99,235,.10), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* container override (kalau pakai .app-shell dari header kita) */
.app-shell{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* typography */
h1,h2,h3{ letter-spacing: -0.02em; }
.h3{ font-weight: 800; }
.text-muted{ color: var(--muted) !important; }

/* cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.p-0{ overflow:hidden; }

/* tables */
.table{
  --bs-table-bg: transparent;
  margin-bottom: 0;
}
.table thead th{
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #334155;
  border-bottom: 1px solid var(--border) !important;
  padding-top: 14px;
  padding-bottom: 14px;
}
.table tbody td{
  border-top: 1px solid rgba(2,6,23,.06) !important;
  padding-top: 14px;
  padding-bottom: 14px;
}
.table-responsive{
  border-radius: var(--radius);
}

/* badges */
.badge{
  border-radius: 999px;
  padding: .45rem .65rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.badge.text-bg-success{ background: rgba(16,185,129,.12) !important; color:#047857 !important; }
.badge.text-bg-secondary{ background: rgba(100,116,139,.14) !important; color:#334155 !important; }

/* buttons – dominan biru */
.btn{
  border-radius: 12px;
  font-weight: 700;
  padding: .60rem 1.0rem;
  box-shadow: none;
}
.btn:focus{ box-shadow: 0 0 0 .25rem var(--primary-soft) !important; }

.btn-primary{
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border: 1px solid rgba(37,99,235,.45);
}
.btn-primary:hover{
  background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
  border-color: rgba(30,64,175,.55);
}

.btn-success{
  background: linear-gradient(180deg, #16a34a, #15803d);
  border: 1px solid rgba(22,163,74,.45);
}
.btn-success:hover{
  background: linear-gradient(180deg, #15803d, #166534);
}

.btn-outline-primary{
  border: 1px solid rgba(37,99,235,.45);
  color: var(--primary);
  background: rgba(37,99,235,.04);
}
.btn-outline-primary:hover{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn-outline-secondary{
  border: 1px solid rgba(100,116,139,.35);
  color: #334155;
  background: rgba(100,116,139,.05);
}
.btn-outline-secondary:hover{
  background: rgba(100,116,139,.14);
  border-color: rgba(100,116,139,.45);
  color: #0f172a;
}

/* inputs */
.form-control, .form-select{
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,.12);
  padding: .70rem .85rem;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 .25rem var(--primary-soft);
}

/* alerts (kalau ada) */
.alert{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* header logo spacing (kalau logo dipakai) */
.global-logo-wrap{
  padding: 6px 8px 2px;
}
.global-logo-wrap img{
  filter: drop-shadow(0 10px 18px rgba(2,6,23,.12));
}

/* footer */
footer{
  color: rgba(15,23,42,.65);
}


/* ===== Dashboard survey compact v3 ===== */
.dashboard-survey-card{ overflow:hidden; }
.surveys-admin-table{ table-layout: fixed; }
.surveys-admin-table thead th{ font-size:.78rem; padding-top:12px; padding-bottom:12px; }
.surveys-admin-table tbody td{ padding-top:10px; padding-bottom:10px; vertical-align:top; }
.surveys-admin-table .col-survey{ width:46%; }
.surveys-admin-table .col-schedule{ width:18%; }
.surveys-admin-table .col-status{ width:10%; }
.surveys-admin-table .col-response{ width:6%; }
.surveys-admin-table .col-action{ width:20%; }
.survey-main-cell{ min-width:420px; }
.survey-title{ font-size:1rem; line-height:1.2; font-weight:800; max-width:460px; margin-bottom:6px; }
.survey-desc{ font-size:.80rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-width:480px; margin-bottom:6px; }
.survey-meta-row{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:5px; }
.survey-meta-item{ font-size:.76rem; color:#475569; }
.survey-link-row{ display:flex; align-items:center; gap:8px; min-width:0; }
.survey-link-row .text-muted{ font-size:.74rem; flex:0 0 auto; }
.survey-link{ display:inline-block; max-width:360px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.76rem; text-decoration:none; }
.schedule-cell div{ display:grid; grid-template-columns:60px 1fr; gap:8px; align-items:start; margin-bottom:4px; font-size:.80rem; }
.schedule-cell .text-muted{ font-size:.74rem; }
.schedule-cell strong{ font-weight:700; color:#0f172a; }
.surveys-admin-table .badge{ font-size:.74rem; padding:.38rem .58rem; }
.surveys-admin-table td.text-center{ font-size:.95rem; font-weight:700; }
.action-cell{ min-width:0; }
.action-grid{ display:grid; grid-template-columns:repeat(4, minmax(78px, 1fr)); gap:8px; max-width:360px; margin-left:auto; }
.btn.btn-xs.dash-action-btn{ min-height:34px; padding:.42rem .55rem; font-size:.76rem; line-height:1.15; border-radius:10px; font-weight:700; }
.btn.btn-xs.dash-action-btn + form{ display:contents; }
.action-grid form{ margin:0; }
@media (max-width: 1400px){
  .surveys-admin-table .col-survey{ width:42%; }
  .surveys-admin-table .col-action{ width:24%; }
  .action-grid{ grid-template-columns:repeat(3, minmax(82px,1fr)); max-width:300px; }
  .survey-main-cell{ min-width:340px; }
}
@media (max-width: 1100px){
  .surveys-admin-table{ table-layout:auto; }
  .action-grid{ grid-template-columns:repeat(2, minmax(90px,1fr)); max-width:220px; }
}

/* ===== Dashboard survey compact v4 ===== */
.surveys-admin-table thead th,
.surveys-admin-table .col-response,
.surveys-admin-table .col-action{ white-space:nowrap; }
.surveys-admin-table thead th.col-response,
.surveys-admin-table thead th.col-action{ word-break:keep-all; }
.surveys-admin-table .col-survey{ width:44%; }
.surveys-admin-table .col-schedule{ width:15%; }
.surveys-admin-table .col-status{ width:8%; }
.surveys-admin-table .col-response{ width:7%; }
.surveys-admin-table .col-action{ width:26%; }
.survey-main-cell{ min-width:500px; }
.survey-title{ font-size:1rem; max-width:620px; margin-bottom:5px; }
.survey-desc{ font-size:.79rem; line-height:1.35; max-width:620px; margin-bottom:5px; }
.survey-meta-row{ gap:6px 14px; margin-bottom:4px; }
.survey-meta-item{ font-size:.75rem; }
.survey-link-row .text-muted{ font-size:.73rem; }
.survey-link{ max-width:520px; font-size:.75rem; }
.schedule-cell div{ grid-template-columns:54px 1fr; gap:6px; margin-bottom:3px; font-size:.79rem; }
.surveys-admin-table .badge{ font-size:.72rem; padding:.32rem .56rem; }
.surveys-admin-table td.text-center{ font-size:.88rem; }
.action-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; max-width:470px; }
.btn.btn-xs.dash-action-btn{
  min-height:31px;
  padding:.28rem .38rem;
  font-size:.68rem;
  line-height:1.1;
  border-radius:8px;
  letter-spacing:0;
  white-space:nowrap;
  word-break:keep-all;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width: 1600px){
  .surveys-admin-table .col-survey{ width:42%; }
  .surveys-admin-table .col-action{ width:28%; }
  .action-grid{ max-width:440px; }
}
@media (max-width: 1360px){
  .surveys-admin-table .col-survey{ width:40%; }
  .surveys-admin-table .col-action{ width:30%; }
  .survey-main-cell{ min-width:420px; }
  .survey-link{ max-width:430px; }
  .action-grid{ max-width:420px; }
  .btn.btn-xs.dash-action-btn{ font-size:.66rem; }
}
@media (max-width: 1200px){
  .action-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); max-width:360px; }
}

/* ===== Respondent detail refine ===== */
.exam-shell .page-hero__eyebrow{
  font-size:.82rem !important;
  letter-spacing:.06em !important;
  color:#64748b !important;
}
.exam-shell .exam-hero__text,
.exam-shell .quiz-camera .cam-note,
.exam-shell .section-help,
.exam-shell .question-nav-note,
.exam-shell .exam-panel-note,
.exam-shell .form-text,
.exam-shell small,
.exam-shell .small{
  font-size:.93rem !important;
  line-height:1.68 !important;
  color:#5f6f86 !important;
  letter-spacing:0 !important;
}
.exam-shell .question-nav-note{
  max-width:760px !important;
  margin-bottom:0 !important;
}
.exam-shell .section-help{
  margin-top:10px !important;
}
.exam-shell .quiz-camera .cam-note{
  max-width:860px !important;
}
.exam-shell .cam-badge{
  font-size:.84rem !important;
}
.exam-shell .fw-bold.fs-5{
  font-size:1.05rem !important;
  line-height:1.35 !important;
}
.exam-shell .text-muted,
.exam-shell .muted,
.exam-shell .opacity-75{
  color:#6b7b93 !important;
}
.exam-shell .nav-qbtn{
  font-size:.95rem !important;
}
.exam-shell .help-red{
  font-size:.84rem !important;
  line-height:1.55 !important;
  padding:7px 11px !important;
}
.exam-shell label,
.exam-shell .form-label{
  font-size:.97rem;
  letter-spacing:0;
}
.exam-shell .question-surface .text-muted{
  font-size:.92rem !important;
}
@media (max-width: 992px){
  .exam-shell .exam-hero__text,
  .exam-shell .quiz-camera .cam-note,
  .exam-shell .section-help,
  .exam-shell .question-nav-note,
  .exam-shell .exam-panel-note,
  .exam-shell .form-text,
  .exam-shell small,
  .exam-shell .small{
    font-size:.9rem !important;
    line-height:1.62 !important;
  }
}