/*
 * Web RS Design System 1.0
 * Step 35A - Fondasi visual bersama untuk portal publik, pasien, dan petugas.
 */
:root{
  --ds-brand-900:#082b59;
  --ds-brand-800:#0b3978;
  --ds-brand-700:#104d96;
  --ds-brand-600:#1764b5;
  --ds-brand-500:#2979c9;
  --ds-brand-100:#e7f1fc;
  --ds-brand-50:#f2f7fd;
  --ds-accent-700:#08737f;
  --ds-accent-600:#0b8795;
  --ds-accent-100:#dff5f5;
  --ds-success-700:#087451;
  --ds-success-100:#def7eb;
  --ds-warning-700:#925a00;
  --ds-warning-100:#fff2cf;
  --ds-danger-700:#a52c2c;
  --ds-danger-100:#ffe7e7;
  --ds-info-700:#17558c;
  --ds-info-100:#e5f2ff;
  --ds-neutral-950:#10233f;
  --ds-neutral-800:#293b54;
  --ds-neutral-700:#40536d;
  --ds-neutral-600:#596b82;
  --ds-neutral-500:#718096;
  --ds-neutral-300:#c9d5e2;
  --ds-neutral-200:#dbe4ee;
  --ds-neutral-100:#eaf0f6;
  --ds-neutral-50:#f5f8fb;
  --ds-white:#fff;

  --ds-font-sans:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ds-font-mono:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --ds-text-xs:.75rem;
  --ds-text-sm:.875rem;
  --ds-text-md:1rem;
  --ds-text-lg:1.125rem;
  --ds-text-xl:1.25rem;
  --ds-text-2xl:1.5rem;
  --ds-text-3xl:2rem;
  --ds-text-4xl:clamp(2.25rem,4vw,3.5rem);

  --ds-space-1:.25rem;
  --ds-space-2:.5rem;
  --ds-space-3:.75rem;
  --ds-space-4:1rem;
  --ds-space-5:1.25rem;
  --ds-space-6:1.5rem;
  --ds-space-8:2rem;
  --ds-space-10:2.5rem;
  --ds-space-12:3rem;
  --ds-space-16:4rem;

  --ds-radius-sm:.5rem;
  --ds-radius-md:.75rem;
  --ds-radius-lg:1rem;
  --ds-radius-xl:1.5rem;
  --ds-radius-pill:999px;
  --ds-shadow-sm:0 1px 2px rgba(10,39,75,.06);
  --ds-shadow-md:0 8px 24px rgba(10,39,75,.08);
  --ds-shadow-lg:0 20px 48px rgba(10,39,75,.13);
  --ds-focus:0 0 0 3px rgba(41,121,201,.22);
  --ds-content:1200px;
  --ds-reading:760px;
  --ds-control-height:46px;
  --ds-transition:160ms ease;

  /* Alias untuk komponen lama supaya seluruh portal memakai palet yang sama. */
  --primary:var(--ds-brand-600);
  --primary-dark:var(--ds-brand-800);
  --cyan:var(--ds-accent-600);
  --green:var(--ds-success-700);
  --warning:var(--ds-warning-700);
  --danger:var(--ds-danger-700);
  --ink:var(--ds-neutral-950);
  --muted:var(--ds-neutral-600);
  --line:var(--ds-neutral-200);
  --soft:var(--ds-neutral-50);
  --white:var(--ds-white);
  --shadow:var(--ds-shadow-lg);
}

html{font-size:16px;text-rendering:optimizeLegibility}
body{
  font-family:var(--ds-font-sans);
  color:var(--ds-neutral-950);
  background:var(--ds-neutral-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:where(h1,h2,h3,h4,h5,h6){
  color:var(--ds-neutral-950);
  font-family:var(--ds-font-sans);
  font-weight:750;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.hero :where(h1,h2,h3),.page-hero :where(h1,h2,h3),.cta-box :where(h1,h2,h3),.ui-docs-hero :where(h1,h2,h3){color:inherit}
:where(p,li,dd){text-wrap:pretty}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid transparent;
  box-shadow:var(--ds-focus);
}
::selection{color:var(--ds-brand-900);background:#cfe5ff}
.container-wide{width:min(var(--ds-content),calc(100% - 40px))}
.container-article,.container-narrow{width:min(var(--ds-reading),calc(100% - 40px))}

/* Judul dan jarak halaman */
.section{padding-block:clamp(3.5rem,7vw,5.5rem)}
.section-heading{margin-bottom:var(--ds-space-8)}
.section-heading h2{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.18;letter-spacing:-.035em}
.section-heading p{font-size:var(--ds-text-md);max-width:65ch}
.section-kicker{
  margin-bottom:var(--ds-space-2);
  color:var(--ds-brand-700);
  font-size:var(--ds-text-xs);
  font-weight:800;
  letter-spacing:.12em;
}
.page-hero{padding-block:clamp(2.75rem,5vw,4rem);background:linear-gradient(120deg,var(--ds-brand-900),var(--ds-brand-600));}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem);line-height:1.12;letter-spacing:-.04em}
.page-hero p{max-width:68ch;font-size:var(--ds-text-lg)}
.eyebrow{font-size:var(--ds-text-xs);font-weight:800}

/* Permukaan dan kartu */
.card{
  border:1px solid var(--ds-neutral-200);
  border-radius:var(--ds-radius-lg);
  background:var(--ds-white);
  box-shadow:var(--ds-shadow-sm);
  padding:var(--ds-space-6);
}
.card:hover{border-color:#cad8e7}
.ui-card-elevated{box-shadow:var(--ds-shadow-md)}
.ui-card-flat{box-shadow:none}
.ui-card-interactive{
  color:inherit;
  text-decoration:none;
  transition:border-color var(--ds-transition),box-shadow var(--ds-transition),transform var(--ds-transition);
}
.ui-card-interactive:hover{border-color:#a9c4e1;box-shadow:var(--ds-shadow-md);transform:translateY(-2px)}
.card-heading{padding-bottom:var(--ds-space-4);margin-bottom:var(--ds-space-4)}

/* Tombol */
.btn{
  min-height:var(--ds-control-height);
  border-radius:var(--ds-radius-md);
  padding:.7rem 1.15rem;
  font-family:var(--ds-font-sans);
  font-size:var(--ds-text-sm);
  font-weight:750;
  line-height:1.2;
  box-shadow:none;
  transition:background-color var(--ds-transition),border-color var(--ds-transition),color var(--ds-transition),box-shadow var(--ds-transition),transform var(--ds-transition);
}
.btn:hover{transform:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ds-brand-600);color:#fff;box-shadow:0 6px 15px rgba(23,100,181,.2)}
.btn-primary:hover{background:var(--ds-brand-700)}
.btn-outline{border:1px solid var(--ds-neutral-300);background:#fff;color:var(--ds-brand-800)}
.btn-outline:hover{border-color:var(--ds-brand-500);background:var(--ds-brand-50)}
.btn-success{background:var(--ds-success-700);color:#fff}
.btn-danger{background:var(--ds-danger-700);color:#fff}
.btn-ghost{border:1px solid transparent;background:transparent;color:var(--ds-brand-700)}
.btn-ghost:hover{background:var(--ds-brand-50)}
.btn-sm{min-height:36px;padding:.45rem .75rem;font-size:var(--ds-text-xs)}
.btn-lg{min-height:52px;padding:.85rem 1.35rem;font-size:var(--ds-text-md)}
.btn-block{display:inline-flex;width:100%}
.btn:disabled,.btn[aria-disabled="true"],.btn.is-loading{cursor:not-allowed;opacity:.58;box-shadow:none}
.btn.is-loading::before{
  content:"";
  width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:ui-spin .7s linear infinite;
}

/* Form */
.field{min-width:0}
.field label{margin-bottom:var(--ds-space-2);color:var(--ds-neutral-800);font-size:var(--ds-text-sm);font-weight:700}
.field input,.field select,.field textarea,
.filter-row input,.filter-row select{
  min-height:var(--ds-control-height);
  border:1px solid var(--ds-neutral-300);
  border-radius:var(--ds-radius-md);
  padding:.7rem .85rem;
  color:var(--ds-neutral-950);
  background:#fff;
  font-family:var(--ds-font-sans);
  font-size:var(--ds-text-md);
  transition:border-color var(--ds-transition),box-shadow var(--ds-transition),background-color var(--ds-transition);
}
.field input::placeholder,.field textarea::placeholder{color:#8795a8;opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#9fb1c5}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ds-brand-500);
  box-shadow:var(--ds-focus);
}
.field input:disabled,.field select:disabled,.field textarea:disabled{cursor:not-allowed;background:var(--ds-neutral-100);color:var(--ds-neutral-600)}
.field small,.ui-helper{margin-top:var(--ds-space-2);color:var(--ds-neutral-600);font-size:var(--ds-text-xs);line-height:1.45}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea,[aria-invalid="true"]{border-color:var(--ds-danger-700)}
.field-error{display:block;margin-top:var(--ds-space-2);color:var(--ds-danger-700);font-size:var(--ds-text-xs);font-weight:700}
.required::after{content:" *";color:var(--ds-danger-700)}
.radio-card{min-height:44px;border-color:var(--ds-neutral-300);border-radius:var(--ds-radius-md)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ds-brand-600)}

/* Status, badge, dan alert */
.badge{
  align-items:center;
  min-height:26px;
  padding:.3rem .65rem;
  border:1px solid transparent;
  border-radius:var(--ds-radius-pill);
  font-size:.7rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
}
.badge-primary,.badge-info{background:var(--ds-brand-100);color:var(--ds-brand-800)}
.badge-success{background:var(--ds-success-100);color:var(--ds-success-700)}
.badge-warning{background:var(--ds-warning-100);color:var(--ds-warning-700)}
.badge-danger{background:var(--ds-danger-100);color:var(--ds-danger-700)}
.badge-muted{background:var(--ds-neutral-100);color:var(--ds-neutral-700)}
.alert{
  position:relative;
  border-radius:var(--ds-radius-md);
  padding:var(--ds-space-4) var(--ds-space-5);
  margin-block:var(--ds-space-4);
  font-size:var(--ds-text-sm);
  line-height:1.55;
}
.alert.success{border-color:#b4e6d2;background:var(--ds-success-100);color:var(--ds-success-700)}
.alert.warning{border-color:#efd79a;background:#fff8e5;color:var(--ds-warning-700)}
.alert.danger{border-color:#f0bcbc;background:var(--ds-danger-100);color:var(--ds-danger-700)}
.alert.info{border-color:#bfdcf6;background:var(--ds-info-100);color:var(--ds-info-700)}
.alert-title{display:block;margin-bottom:var(--ds-space-1);font-weight:800}
.alert-dismiss{position:absolute;right:.55rem;top:.55rem;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}

/* Tabel */
.table-wrap{border-color:var(--ds-neutral-200);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-sm)}
.table th,.table td{padding:.85rem 1rem;border-bottom-color:var(--ds-neutral-100);font-size:var(--ds-text-sm)}
.table th{
  color:var(--ds-neutral-700);
  background:var(--ds-neutral-50);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.055em;
}
.table tbody tr{transition:background-color var(--ds-transition)}
.table tbody tr:hover{background:#f8fbff}
.table-sub{font-size:var(--ds-text-xs)}

/* Empty, loading, skeleton, dan modal */
.empty-state{padding:clamp(2.5rem,7vw,4.5rem) var(--ds-space-5);border-color:var(--ds-neutral-300);border-radius:var(--ds-radius-lg)}
.empty-state h2{margin:.75rem 0 .35rem}
.ui-state-icon{
  display:grid;place-items:center;width:56px;height:56px;margin-inline:auto;
  border-radius:var(--ds-radius-lg);background:var(--ds-brand-100);color:var(--ds-brand-800);font-size:var(--ds-text-xl);font-weight:800;
}
.ui-loading{display:flex;align-items:center;justify-content:center;gap:var(--ds-space-3);min-height:96px;color:var(--ds-neutral-600)}
.ui-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--ds-neutral-300);border-top-color:var(--ds-brand-600);border-radius:50%;animation:ui-spin .75s linear infinite}
.ui-skeleton{display:block;min-height:1rem;border-radius:var(--ds-radius-sm);background:linear-gradient(90deg,#edf2f7 25%,#f7f9fc 40%,#edf2f7 60%);background-size:300% 100%;animation:ui-shimmer 1.35s ease infinite}
.ui-skeleton-title{width:62%;height:1.4rem}.ui-skeleton-line{width:100%;margin-top:.65rem}.ui-skeleton-line.short{width:72%}
.ui-dialog{width:min(560px,calc(100% - 32px));border:0;border-radius:var(--ds-radius-xl);padding:0;box-shadow:var(--ds-shadow-lg);color:var(--ds-neutral-950)}
.ui-dialog::backdrop{background:rgba(8,25,48,.62);backdrop-filter:blur(2px)}
.ui-dialog-head,.ui-dialog-body,.ui-dialog-foot{padding:var(--ds-space-5) var(--ds-space-6)}
.ui-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-4);border-bottom:1px solid var(--ds-neutral-200)}
.ui-dialog-head h2{margin:0;font-size:var(--ds-text-xl)}
.ui-dialog-body{color:var(--ds-neutral-700)}
.ui-dialog-foot{display:flex;justify-content:flex-end;gap:var(--ds-space-3);border-top:1px solid var(--ds-neutral-200)}

/* Ikon dan utilitas layout */
.icon-tile,.ui-icon{
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:48px;height:48px;border-radius:var(--ds-radius-md);
  color:var(--ds-brand-700);background:var(--ds-brand-100);font-family:var(--ds-font-sans);font-weight:800;
}
.ui-icon-sm{width:36px;height:36px;border-radius:var(--ds-radius-sm);font-size:var(--ds-text-sm)}
.ui-icon-lg{width:64px;height:64px;border-radius:var(--ds-radius-lg);font-size:var(--ds-text-2xl)}
.icon-tile.icon-label{font-size:.72rem;letter-spacing:.06em}
.ui-stack{display:grid;gap:var(--ds-space-4)}
.ui-cluster{display:flex;align-items:center;gap:var(--ds-space-3);flex-wrap:wrap}
.ui-divider{height:1px;border:0;background:var(--ds-neutral-200);margin-block:var(--ds-space-6)}
.ui-muted{color:var(--ds-neutral-600)}
.ui-reading-width{max-width:var(--ds-reading)}
.ui-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Navigasi dan footer memakai bahasa visual yang sama tanpa mengubah arsitektur menu. */
.site-header{border-bottom-color:var(--ds-neutral-200);box-shadow:0 1px 0 rgba(10,39,75,.03)}
.main-nav a,.nav-menu summary{font-weight:700}
.main-nav a.active,.main-nav a:hover,.nav-menu summary.active{color:var(--ds-brand-700);background:var(--ds-brand-50)}
.nav-menu-panel{border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-lg)}
.site-footer{background:var(--ds-brand-900)}
.admin-topbar{background:var(--ds-brand-900)}
.admin-nav a{border-radius:var(--ds-radius-md);font-size:var(--ds-text-xs)}
.admin-nav a.active{background:var(--ds-brand-600)}

/* Dokumentasi komponen internal */
.ui-docs-hero{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-8);
  margin-bottom:var(--ds-space-8);padding:var(--ds-space-8);
  border-radius:var(--ds-radius-xl);color:#fff;background:linear-gradient(120deg,var(--ds-brand-900),var(--ds-brand-600) 62%,var(--ds-accent-600));
}
.ui-docs-hero h2{margin:.3rem 0;color:#fff;font-size:var(--ds-text-3xl)}
.ui-docs-hero p{max-width:65ch;margin:0;color:#dcecff}
.ui-docs-version{flex:0 0 auto;padding:.45rem .75rem;border:1px solid rgba(255,255,255,.3);border-radius:var(--ds-radius-pill);font-size:var(--ds-text-xs);font-weight:800}
.ui-docs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-6);margin-bottom:var(--ds-space-10)}
.ui-docs-section{padding:var(--ds-space-6)}
.ui-docs-section.full{grid-column:1/-1}
.ui-docs-section>h3{margin:0 0 var(--ds-space-2)}
.ui-docs-section>.ui-muted{margin:0 0 var(--ds-space-6)}
.ui-swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ds-space-3)}
.ui-swatch{overflow:hidden;border:1px solid var(--ds-neutral-200);border-radius:var(--ds-radius-md);background:#fff}
.ui-swatch-color{height:58px;background:var(--swatch)}
.ui-swatch span,.ui-swatch code{display:block;padding-inline:var(--ds-space-3)}
.ui-swatch span{padding-top:var(--ds-space-2);font-size:var(--ds-text-xs);font-weight:800}.ui-swatch code{padding-bottom:var(--ds-space-2);color:var(--ds-neutral-600);font-size:.68rem}
.ui-type-sample{padding-block:var(--ds-space-3);border-bottom:1px solid var(--ds-neutral-100)}.ui-type-sample:last-child{border-bottom:0}.ui-type-sample>*{margin:0}.ui-type-sample small{color:var(--ds-neutral-600)}
.ui-component-row{display:flex;align-items:center;gap:var(--ds-space-3);flex-wrap:wrap;margin-bottom:var(--ds-space-5)}
.ui-demo-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-space-4)}
.ui-demo-card-grid .card{padding:var(--ds-space-5)}
.ui-demo-card-grid h4{margin:var(--ds-space-3) 0 var(--ds-space-1)}
.ui-demo-card-grid p{margin:0;color:var(--ds-neutral-600);font-size:var(--ds-text-sm)}
.ui-code{display:block;margin-top:var(--ds-space-4);padding:var(--ds-space-4);overflow:auto;border-radius:var(--ds-radius-md);color:#dcecff;background:#0a2545;font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);white-space:pre}

@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media(max-width:900px){
  .container-wide,.container-article,.container-narrow{width:min(100% - 28px,var(--ds-content))}
  .section{padding-block:3.5rem}
  .ui-docs-grid{grid-template-columns:1fr}.ui-docs-section.full{grid-column:auto}.ui-demo-card-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  :root{--ds-control-height:48px}
  .container-wide,.container-article,.container-narrow{width:min(100% - 22px,var(--ds-content))}
  .card{padding:var(--ds-space-5)}
  .page-hero{padding-block:2.5rem}
  .page-hero p{font-size:var(--ds-text-md)}
  .actions .btn{flex:1 1 auto}
  .ui-dialog-head,.ui-dialog-body,.ui-dialog-foot{padding:var(--ds-space-4)}
  .ui-docs-hero{padding:var(--ds-space-6);flex-direction:column}.ui-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .ui-card-interactive,.btn,.table tbody tr{transition:none}
  .ui-card-interactive:hover{transform:none}
  .ui-spinner,.btn.is-loading::before,.ui-skeleton{animation-duration:1ms;animation-iteration-count:1}
}
@media print{
  .card,.table-wrap{box-shadow:none}
  .btn{border:1px solid #777;background:#fff!important;color:#000!important}
}