/* Tahap 6 — Professional UI layer for PPID/Humas public pages and admin build.
   This file is intentionally additive: it does not remove existing CSS, but fixes
   responsive behavior, touch ergonomics, spacing, tables, cards, and loading states. */
:root{
  --ui-green-950:#052e24;
  --ui-green-900:#064e3b;
  --ui-green-800:#0b5a45;
  --ui-green-700:#047857;
  --ui-green-100:#e7f7ef;
  --ui-green-50:#f0fdf4;
  --ui-gold-500:#d9a21b;
  --ui-gold-100:#fff7d6;
  --ui-ink:#182124;
  --ui-muted:#66736f;
  --ui-line:#dde7e2;
  --ui-bg:#f6faf8;
  --ui-card:#ffffff;
  --ui-danger:#b91c1c;
  --ui-warning:#a16207;
  --ui-success:#047857;
  --ui-radius-sm:12px;
  --ui-radius-md:16px;
  --ui-radius-lg:22px;
  --ui-radius-xl:30px;
  --ui-shadow-sm:0 8px 22px rgba(6,78,59,.07);
  --ui-shadow-md:0 18px 48px rgba(6,78,59,.12);
  --ui-container:min(1200px, calc(100% - 32px));
}

*{box-sizing:border-box}
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{width:100%;max-width:100%;overflow-x:hidden;min-height:100vh;background:linear-gradient(180deg,#fbfefc 0%,var(--ui-bg) 45%,#f2f7f4 100%);color:var(--ui-ink);-webkit-tap-highlight-color:transparent}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
a,button,[role="button"]{touch-action:manipulation}
button,input,select,textarea{font:inherit;max-width:100%}
input,select,textarea{min-width:0}
textarea{line-height:1.55}
:focus-visible{outline:3px solid rgba(4,120,87,.28);outline-offset:3px;border-radius:10px}
::selection{background:rgba(217,162,27,.25)}

/* General layout polish */
.container,.wrap,.navbar,.top-strip .wrap{max-width:var(--ui-container)}
.card,.item,.stat-card,.metric-card,.panel,.content-card,[class*="rounded"]{scroll-margin-top:92px}
.card,.item,.panel,.content-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover,.item:hover,.panel:hover,.content-card:hover{border-color:rgba(4,120,87,.22)}
.btn,.button,button[type="submit"],a.btn{min-height:42px;line-height:1.2;white-space:normal;text-align:center}
.btn:disabled,button:disabled{opacity:.65;cursor:not-allowed;transform:none!important}
.badge,[class*="badge"],.status-pill{white-space:nowrap}

/* Tables: never force horizontal page scroll. */
table{width:100%;border-collapse:collapse}
.ui-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--ui-radius-md);border:1px solid var(--ui-line);background:#fff}
.ui-table-wrap table{min-width:720px;border:0!important}
.ui-table-wrap th,.ui-table-wrap td{vertical-align:top}
.ui-table-hint{display:none;font-size:12px;color:var(--ui-muted);margin:6px 2px 10px}

/* Forms */
form{max-width:100%}
label{line-height:1.35}
input,select,textarea{border-color:var(--ui-line)}
input:focus,select:focus,textarea:focus{border-color:rgba(4,120,87,.55)!important;box-shadow:0 0 0 4px rgba(4,120,87,.10)!important;outline:none!important}
input[type="search"]::-webkit-search-cancel-button{appearance:none}
.form-actions,.actions,.button-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form-actions .btn,.actions .btn,.button-row .btn{flex:0 0 auto}

/* Public portal pages */
.site-header{box-shadow:0 10px 32px rgba(6,78,59,.06)}
.hero,.public-hero,.ppid-hero{overflow:hidden}
.hero-card,.feature-card,.info-card,.news-card{border:1px solid rgba(6,78,59,.10);box-shadow:var(--ui-shadow-sm)}
.dropdown{max-width:calc(100vw - 32px)}
.dropdown a{line-height:1.35}
.stat-num,.metric-value{font-variant-numeric:tabular-nums}

/* Admin React build polish. Broad selectors are used because current frontend is bundled/minified. */
#root{min-height:100vh;isolation:isolate}
#root > *{max-width:100vw}
#root main,#root section,#root article{min-width:0}
#root .overflow-x-auto{max-width:100%;-webkit-overflow-scrolling:touch}
#root table{font-size:14px}
#root th,#root td{line-height:1.45}
#root button,#root a{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
#root button:hover,#root a:hover{transform:translateY(-1px)}
#root input,#root select,#root textarea{font-size:14px}
#root [class*="shadow"]{box-shadow:0 14px 42px rgba(6,78,59,.08)}
#root [class*="rounded"]{overflow-wrap:anywhere}
#root [class*="grid"]{min-width:0}
#root [class*="truncate"]{min-width:0}
#root [class*="fixed"]{max-width:100vw}
#root [class*="modal"],#root [role="dialog"]{max-width:calc(100vw - 24px)}

/* PPID standalone admin */
body .layout{background:linear-gradient(135deg,#f8fbfa 0%,#f3f8f5 100%)}
.ppid-admin-mobile-toggle{display:none}
.sidebar{box-shadow:8px 0 24px rgba(6,78,59,.04)}
.nav-link{transition:background-color .18s ease,color .18s ease,transform .18s ease}
.nav-link:hover{transform:translateX(2px)}
.main{min-width:0}
.title-row,.toolbar,.topbar{min-width:0}
.title h2{letter-spacing:-.03em}
.card h3{line-height:1.15}
.item{box-shadow:0 8px 20px rgba(6,78,59,.04)}
.item .actions{margin-top:12px}
.note{line-height:1.5}

/* Utilities injected by pro-ui.js */
.ui-scroll-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:9999;width:46px;height:46px;border-radius:999px;border:1px solid rgba(6,78,59,.18);background:#fff;color:var(--ui-green-900);box-shadow:var(--ui-shadow-md);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s ease;font-weight:900}
.ui-scroll-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.ui-loading-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:10000;background:linear-gradient(90deg,var(--ui-green-700),var(--ui-gold-500));box-shadow:0 0 16px rgba(4,120,87,.35);transition:width .2s ease,opacity .2s ease;opacity:0}
.ui-loading-bar.is-active{opacity:1;width:72%}
.ui-loading-bar.is-done{width:100%;opacity:0}
.ui-action-row{display:flex!important;gap:8px!important;flex-wrap:wrap!important;align-items:center!important}
.ui-visually-hidden{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}
.ui-mobile-only{display:none!important}

/* Public article/list pages that were very minimal */
.public-shell{min-height:100vh;background:linear-gradient(180deg,#fbfefc,#f3f8f5)}
.public-shell .page{width:var(--ui-container);margin:0 auto;padding:24px 0 48px}
.public-shell header,.public-shell .header{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--ui-line);position:sticky;top:0;z-index:50}
.public-shell .card,.public-shell article{background:#fff;border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-sm);padding:18px}
.public-shell .grid{display:grid;gap:16px}

@media (min-width:961px){
  .mobile-drawer-backdrop{display:none!important}
}

@media (max-width:960px){
  :root{--ui-container:calc(100% - 28px)}
  body{font-size:15px}
  input,select,textarea{font-size:16px!important}
  .grid,.grid-2,.grid-3,.grid-4,.two,.three{grid-template-columns:1fr!important}
  .top-strip .wrap{gap:8px}
  .top-strip .right{display:none!important}
  .navbar{padding:10px 0}
  .brand-logo{width:48px!important;height:48px!important;border-radius:15px!important}
  .brand-title{font-size:17px!important}
  .brand-sub{font-size:12px!important;display:block;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-actions{display:none!important}
  .main-nav{position:fixed;inset:0 0 auto auto;top:0;right:0;width:min(360px,86vw);height:100dvh;padding:92px 16px 18px;background:#fff;border-left:1px solid var(--ui-line);box-shadow:-22px 0 60px rgba(6,78,59,.18);transform:translateX(105%);transition:transform .22s ease;z-index:120;display:block;overflow:auto}
  body.mobile-menu-open .main-nav{transform:translateX(0)}
  .mobile-toggle{display:inline-flex!important;position:relative;z-index:130}
  body.mobile-menu-open .mobile-toggle span{opacity:0}
  body.mobile-menu-open .mobile-toggle::before{transform:rotate(45deg)}
  body.mobile-menu-open .mobile-toggle::after{transform:rotate(-45deg)}
  .mobile-drawer-backdrop{position:fixed;inset:0;background:rgba(2,20,14,.42);z-index:110;opacity:0;pointer-events:none;transition:.2s ease;backdrop-filter:blur(2px)}
  body.mobile-menu-open .mobile-drawer-backdrop{opacity:1;pointer-events:auto}
  .nav-item{display:block;margin-bottom:6px}
  .nav-link,.nav-button{width:100%;justify-content:space-between;height:auto;min-height:46px;padding:12px 14px}
  .dropdown{position:static;opacity:1;pointer-events:auto;transform:none;box-shadow:none;border-radius:14px;margin:4px 0 10px;min-width:0;display:none;background:#f8fbfa}
  .nav-item.open .dropdown{display:grid}
  .section{padding:22px 0}
  .section-title{font-size:clamp(24px,8vw,34px)}
  .section-desc{font-size:14px}
  .btn,.button,button[type="submit"],a.btn{min-height:46px;padding:12px 14px}
  .form-actions,.actions,.button-row{width:100%}
  .form-actions .btn,.actions .btn,.button-row .btn{flex:1 1 140px}
  .ui-table-hint{display:block}

  /* PPID standalone admin mobile behavior */
  body .layout{display:block!important;min-height:100vh}
  .sidebar{position:fixed!important;top:0;left:0;width:min(330px,86vw);height:100dvh!important;z-index:200;transform:translateX(-105%);transition:transform .22s ease;overflow:auto;padding-top:74px!important;border-right:1px solid var(--ui-line);box-shadow:24px 0 70px rgba(6,78,59,.18)}
  body.ppid-sidebar-open .sidebar{transform:translateX(0)}
  .ppid-admin-mobile-toggle{display:flex;position:fixed;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));z-index:230;width:48px;height:48px;border-radius:15px;border:1px solid var(--ui-line);background:#fff;box-shadow:0 12px 28px rgba(6,78,59,.14);align-items:center;justify-content:center;font-weight:900;color:var(--ui-green-900)}
  .ppid-sidebar-backdrop{position:fixed;inset:0;background:rgba(2,20,14,.42);z-index:190;opacity:0;pointer-events:none;transition:.2s ease;backdrop-filter:blur(2px)}
  body.ppid-sidebar-open .ppid-sidebar-backdrop{opacity:1;pointer-events:auto}
  .main{padding:78px 14px 32px!important}
  .topbar{align-items:flex-start;margin-bottom:14px!important}
  .title h2{font-size:26px!important;line-height:1.12}
  .title small{font-size:10px!important}
  .actions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .actions .btn{width:100%;padding-inline:10px!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat-num{font-size:26px!important}
  .card{padding:14px!important;border-radius:16px!important}
  .card h3{font-size:19px!important}
  .kv{grid-template-columns:1fr!important;gap:2px!important}
  .item{padding:12px!important}
  .title-row{display:grid!important;grid-template-columns:1fr!important}

  /* React build responsive reinforcement */
  #root{overflow-x:hidden}
  #root [class*="grid-cols-2"],#root [class*="grid-cols-3"],#root [class*="grid-cols-4"],#root [class*="grid-cols-5"]{grid-template-columns:1fr!important}
  #root [class*="w-["],#root [class*="min-w-["]{max-width:100%!important}
  #root aside{max-width:100vw}
  #root table{font-size:13px}
  #root th,#root td{padding:10px!important}
  #root .overflow-x-auto{border-radius:14px}
  #root [role="dialog"],#root [class*="fixed"] [class*="max-w"]{max-width:calc(100vw - 20px)!important}
  #root [class*="p-8"]{padding:1rem!important}
  #root [class*="px-8"]{padding-left:1rem!important;padding-right:1rem!important}
  #root [class*="py-8"]{padding-top:1rem!important;padding-bottom:1rem!important}
}

@media (max-width:520px){
  :root{--ui-container:calc(100% - 22px)}
  .brand-kicker{font-size:9px!important;letter-spacing:.14em!important}
  .brand-title{font-size:15px!important}
  .brand-sub{max-width:160px}
  .section{padding:18px 0}
  .btn,.button,button[type="submit"],a.btn{width:100%;justify-content:center}
  .top-chip{font-size:12px;padding:4px 8px}
  .stats{grid-template-columns:1fr!important}
  .actions{grid-template-columns:1fr!important}
  .ui-scroll-top{width:42px;height:42px;right:12px;bottom:12px}
  #root th,#root td{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}