/* Nomor Surat YPN — shadcn-style tokens + clean look + spring motion (vanilla, ringan) */
:root{
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 42%;
  --border: 220 13% 91%;
  --primary: 222 47% 11%;
  --primary-foreground: 0 0% 100%;
  --accent: 220 14% 96%;
  --accent-foreground: 222 47% 11%;
  --ring: 222 47% 40%;
  --ease-spring: cubic-bezier(.22,1,.36,1);
}
.dark{
  --background: 224 40% 6%;
  --foreground: 0 0% 98%;
  --card: 224 32% 9%;
  --muted: 224 28% 13%;
  --muted-foreground: 220 10% 62%;
  --border: 224 24% 16%;
  --primary: 0 0% 98%;
  --primary-foreground: 222 47% 11%;
  --accent: 224 28% 15%;
  --accent-foreground: 0 0% 98%;
}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-feature-settings:"cv11","ss01";text-rendering:optimizeLegibility;background:hsl(var(--background));transition:background .4s var(--ease-spring),color .4s var(--ease-spring)}
::selection{background:#111;color:#fff}.dark ::selection{background:#fff;color:#111}

/* BG */
.bg-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(hsl(var(--border)) 1px,transparent 1px),linear-gradient(90deg,hsl(var(--border)) 1px,transparent 1px);
  background-size:44px 44px;opacity:.5;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,black 35%,transparent 75%)}
.orb{position:absolute;border-radius:9999px;filter:blur(90px);opacity:.5;animation:drift 14s ease-in-out infinite alternate}
.orb-a{width:520px;height:520px;left:-140px;top:-160px;background:radial-gradient(circle,#c7d2fe,transparent 65%)}
.orb-b{width:460px;height:460px;right:-120px;top:6%;background:radial-gradient(circle,#fde68a,transparent 65%);animation-delay:-5s}
.orb-c{width:600px;height:300px;left:30%;bottom:-160px;background:radial-gradient(circle,#bae6fd,transparent 65%);animation-delay:-9s;opacity:.4}
.dark .orb{opacity:.22}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.08)}}

/* primitives */
.input{width:100%;border:1px solid hsl(var(--border));background:hsl(var(--background));border-radius:.7rem;padding:.62rem .85rem;font-size:.875rem;outline:none;transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring)/.15)}
.input:hover{border-color:hsl(var(--foreground)/.25)}
label{font-size:.78rem;font-weight:600;display:block;margin-bottom:.35rem}
.hint{font-weight:400;color:hsl(var(--muted-foreground));font-family:ui-monospace,monospace;font-size:.68rem}
kbd{font-family:ui-monospace,monospace;font-size:10px;border:1px solid hsl(var(--border));border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:hsl(var(--muted-foreground));background:hsl(var(--muted))}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:600;font-size:.85rem;border-radius:.7rem;padding:.62rem 1rem;border:1px solid hsl(var(--primary));box-shadow:0 1px 2px rgba(0,0,0,.12);transition:transform .18s var(--ease-spring),box-shadow .2s;white-space:nowrap}
.btn-primary:hover{box-shadow:0 8px 20px -8px rgba(0,0,0,.4);transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;border:1px solid hsl(var(--border));background:hsl(var(--card));border-radius:.7rem;padding:.62rem .9rem;transition:all .18s var(--ease-spring);white-space:nowrap}
.btn-ghost:hover{background:hsl(var(--accent));transform:translateY(-1px)}
.btn-icon{padding:.62rem}
.pressable:active{transform:scale(.96)!important}
.chip{font-size:11px;font-weight:700;font-family:ui-monospace,monospace;border:1px solid hsl(var(--border));background:hsl(var(--muted));border-radius:999px;padding:4px 10px;white-space:nowrap}
.logo-badge{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:12px;background:linear-gradient(135deg,#111,#444);color:#fff;border:1px solid rgba(255,255,255,.2)}
.dark .logo-badge{background:linear-gradient(135deg,#fff,#bbb);color:#111}
.field{margin:0}

/* stats + table */
.stat{border:1px solid hsl(var(--border));background:hsl(var(--card));border-radius:1rem;padding:1rem 1.1rem;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:transform .25s var(--ease-spring),box-shadow .25s,border-color .2s}
.stat:hover{transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(16,24,40,.25)}
.stat[data-fstat]{cursor:pointer;user-select:none}
.stat-active{border-color:hsl(var(--foreground)/.55)!important;box-shadow:0 0 0 3px hsl(var(--ring)/.15)}
.stat-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.stat-value{font-size:1.9rem;font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-top:.15rem}
.stat-sub{font-size:12px;color:hsl(var(--muted-foreground));margin-top:.1rem}
.th{padding:.8rem 1rem;font-weight:700;white-space:nowrap}
td{padding:.8rem 1rem;border-top:1px solid hsl(var(--border));vertical-align:middle}
.row-anim{animation:rowIn .5s var(--ease-spring) backwards;animation-delay:var(--d,0s)}
#rows .row-anim{transition:background .15s}
#rows .row-anim:hover{background:hsl(var(--muted)/.6)}
.row-cancelled{opacity:.62}
.row-cancelled .strike{text-decoration:line-through}
@keyframes rowIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;border:1px solid;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor;flex:none}
.b-draft{background:#fffbeb;color:#b45309;border-color:#fde68a}
.b-final{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.b-cancel{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.dark .b-draft{background:#451a03aa}.dark .b-final{background:#052e16aa}.dark .b-cancel{background:#450a0aaa}
.file-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#2563eb;border:1px solid #bfdbfe;background:#eff6ff;border-radius:8px;padding:4px 9px;transition:all .18s;white-space:nowrap}
.file-link:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(37,99,235,.5)}
.dark .file-link{color:#93c5fd;border-color:#1e3a8a;background:#172554}
.no-file{font-size:11px;font-family:ui-monospace,monospace;color:hsl(var(--muted-foreground));border:1px dashed hsl(var(--border));border-radius:8px;padding:4px 9px;white-space:nowrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--background));transition:all .16s var(--ease-spring);vertical-align:middle;color:hsl(var(--foreground))}
.icon-btn:hover{background:hsl(var(--accent));transform:translateY(-1px)}
.quota-fill{background:linear-gradient(90deg,#111,#555);transition:width .8s var(--ease-spring)}
.dark .quota-fill{background:linear-gradient(90deg,#fff,#999)}
.quota-full-bar{flex-wrap:wrap;align-items:center;gap:.75rem}
#quota-full{display:none}
#quota-full.show{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}

/* mobile cards */
.doc-card{border:1px solid hsl(var(--border));background:hsl(var(--background));border-radius:.9rem;padding:.85rem .95rem;cursor:pointer;transition:border-color .2s,transform .2s var(--ease-spring)}
.doc-card:hover{border-color:hsl(var(--foreground)/.3)}
.doc-card:active{transform:scale(.99)}

/* modal / drawer */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1rem}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,12,20,.5);backdrop-filter:blur(6px);animation:fadeIn .25s ease}
.modal-card{position:relative;width:100%;max-width:620px;max-height:92vh;max-height:92dvh;overflow:auto;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1.1rem;padding:1.4rem;box-shadow:0 24px 64px -16px rgba(0,0,0,.4);animation:popIn .38s var(--ease-spring)}
.drawer-card{position:absolute;right:0;top:0;height:100%;height:100dvh;width:min(430px,100%);background:hsl(var(--card));border-left:1px solid hsl(var(--border));padding:1.25rem 1.25rem 2rem;overflow:auto;animation:slideIn .42s var(--ease-spring);box-shadow:-24px 0 64px -24px rgba(0,0,0,.35)}
@keyframes popIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* reveal on load */
.reveal{animation:revealUp .6s var(--ease-spring) backwards;animation-delay:var(--d,0s)}
@keyframes revealUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* toast */
.toast{background:#111;color:#fff;border-radius:.8rem;padding:.7rem .9rem;font-size:.82rem;font-weight:500;display:flex;gap:.6rem;align-items:center;box-shadow:0 16px 40px -12px rgba(0,0,0,.5);animation:toastIn .4s var(--ease-spring);border:1px solid rgba(255,255,255,.15)}
.dark .toast{background:#fff;color:#111;border-color:rgba(0,0,0,.1)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px) scale(.97)}to{opacity:1;transform:none}}
.toast.out{transition:all .3s;opacity:0;transform:translateX(30px)}
.meta-row{display:flex;justify-content:space-between;gap:1rem;border:1px solid hsl(var(--border));border-radius:.7rem;padding:.55rem .8rem;background:hsl(var(--muted)/.5)}
.meta-row dt{font-size:11px;color:hsl(var(--muted-foreground));font-weight:600;flex:none}
.meta-row dd{font-size:13px;font-weight:600;text-align:right;min-w-0;overflow-wrap:anywhere}

/* heroicons */
.hic{width:18px;height:18px;flex:none}
.hic-sm{width:15px;height:15px}
.hic-lg{width:26px;height:26px}
.hic-xl{width:44px;height:44px}
.toast-ic{display:inline-flex;flex:none}

/* riwayat */
.audit-row{border:1px solid hsl(var(--border));border-radius:.7rem;padding:.6rem .8rem;background:hsl(var(--muted)/.5)}

/* mobile tuning */
@media (max-width:640px){
  .input,.btn-primary,.btn-ghost{font-size:16px} /* cegah auto-zoom iOS */
  .btn-primary,.btn-ghost{padding:.6rem .8rem}
  .btn-icon{padding:.6rem}
  .stat{padding:.8rem .9rem;border-radius:.85rem}
  .stat-value{font-size:1.45rem}
  .chip{font-size:10px;padding:3px 8px}
  .modal-card{padding:1.1rem;border-radius:1rem}
  label{font-size:.82rem}
}

/* print arsip */
@media print{
  .bg-scene,header,#hero,#toolbar,#toasts,.modal,.col-act,footer span:last-child,#btn-empty-reset,#quota-full{display:none!important}
  body{background:#fff}
  #view-app{display:block!important}
  #view-login{display:none!important}
  #cards{display:none!important}
  .overflow-x-auto .md\:block{display:block!important}
  .overflow-x-auto{display:block!important;overflow:visible}
  table{min-width:0!important;font-size:11px}
  section{box-shadow:none!important}
  .row-anim{animation:none}
}