/*
|--------------------------------------------------------------------------
| Stage 122 - Blue Professional Theme UI Final
|--------------------------------------------------------------------------
| Tema biru profesional untuk Ys Comindo Service.
| Fokus: bersih, modern, responsive, dan tetap akuntabel.
*/
:root{
    --ys122-blue:#0D6EFD;
    --ys122-blue-2:#075FEA;
    --ys122-navy:#0B1F3A;
    --ys122-navy-2:#061B4F;
    --ys122-cyan:#00B8D9;
    --ys122-green:#22C55E;
    --ys122-orange:#F97316;
    --ys122-red:#EF4444;
    --ys122-bg:#F5F9FF;
    --ys122-card:#FFFFFF;
    --ys122-soft:#EAF4FF;
    --ys122-soft-2:#F8FBFF;
    --ys122-text:#0F172A;
    --ys122-muted:#64748B;
    --ys122-line:#D8E6F7;
    --ys122-shadow:0 22px 60px rgba(11,31,58,.11);
    --ys122-shadow-soft:0 10px 28px rgba(11,31,58,.07);
    --ys122-radius:24px;
    --ys122-radius-sm:15px;
}

/* GLOBAL */
body.ys-public-unified,
body.ys-dashboard-unified,
body.ys-auth119-body{
    color:var(--ys122-text)!important;
    background:radial-gradient(circle at top left, rgba(0,184,217,.10), transparent 28%),linear-gradient(180deg,#fff,#f5f9ff 55%,#fff)!important;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}

/* PUBLIC WEBSITE */
body.ys-public-unified .header{
    background:rgba(255,255,255,.92)!important;
    backdrop-filter:blur(18px)!important;
    border-bottom:1px solid var(--ys122-line)!important;
    box-shadow:0 12px 34px rgba(11,31,58,.07)!important;
}
body.ys-public-unified .brand-mark,
body.ys-dashboard-unified .brand-mark{
    background:linear-gradient(135deg,var(--ys122-cyan),var(--ys122-blue))!important;
    box-shadow:0 16px 38px rgba(13,110,253,.23)!important;
}
body.ys-public-unified .nav-link{color:var(--ys122-navy)!important}
body.ys-public-unified .nav-link:hover,
body.ys-public-unified .nav-link.active{background:var(--ys122-soft)!important;color:var(--ys122-blue)!important}
body.ys-public-unified .btn,
body.ys-public-unified .ys118-btn,
body.ys-public-unified .login-btn,
body.ys-public-unified .register-btn{
    background:linear-gradient(135deg,var(--ys122-blue),var(--ys122-blue-2))!important;
    color:#fff!important;
    border:1px solid rgba(13,110,253,.1)!important;
    box-shadow:0 16px 36px rgba(13,110,253,.22)!important;
    border-radius:12px!important;
}
body.ys-public-unified .btn.secondary,
body.ys-public-unified .ys118-btn.secondary,
body.ys-public-unified .btn.login-btn{
    background:#fff!important;
    color:var(--ys122-blue)!important;
    border:1px solid rgba(13,110,253,.35)!important;
    box-shadow:none!important;
}
body.ys-public-unified .ys118-public-page,
body.ys-public-unified .section.light{background:#fff!important;color:var(--ys122-text)!important}
body.ys-public-unified .ys118-hero-public,
body.ys-public-unified .hero{
    background:linear-gradient(135deg,#F7FBFF,#EAF4FF)!important;
    border:1px solid var(--ys122-line)!important;
    box-shadow:var(--ys122-shadow-soft)!important;
}
body.ys-public-unified .ys118-badge,
body.ys-public-unified .badge{
    background:#EAF4FF!important;
    color:var(--ys122-blue)!important;
    border-color:#B9D7FF!important;
}
body.ys-public-unified h1 strong,
body.ys-public-unified h1 span,
body.ys-public-unified .ys118-title h1,
body.ys-public-unified .hero h1{color:var(--ys122-navy)!important}
body.ys-public-unified .ys118-card,
body.ys-public-unified .card,
body.ys-public-unified .mini-card{
    border-color:var(--ys122-line)!important;
    box-shadow:var(--ys122-shadow-soft)!important;
}
body.ys-public-unified .ys118-banner,
body.ys-public-unified .cta,
body.ys-public-unified .wa-float{
    background:linear-gradient(135deg,var(--ys122-blue),var(--ys122-cyan))!important;
    color:#fff!important;
}
body.ys-public-unified .footer{
    background:linear-gradient(180deg,var(--ys122-navy),#061426)!important;
}

/* AUTH MASUK / DAFTAR */
body.ys-auth119-body{
    --ys119-pink:var(--ys122-blue)!important;
    --ys119-pink-dark:var(--ys122-blue-2)!important;
    --ys119-blue:var(--ys122-cyan)!important;
}
body.ys-auth119-body .ys-auth119-page{
    background:radial-gradient(circle at 20% 0%,rgba(13,110,253,.08),transparent 30%),radial-gradient(circle at 80% 10%,rgba(0,184,217,.10),transparent 30%),#fff!important;
}
body.ys-auth119-body .ys-auth119-card{max-width:410px!important}
body.ys-auth119-body .ys-auth119-field label{color:#334155!important}
body.ys-auth119-body .ys-auth119-field input,
body.ys-auth119-body .ys-auth119-field textarea{
    border-color:#B8C7DA!important;
    border-radius:9px!important;
    background:#fff!important;
}
body.ys-auth119-body .ys-auth119-field input:focus,
body.ys-auth119-body .ys-auth119-field textarea:focus{
    border-color:var(--ys122-blue)!important;
    box-shadow:0 0 0 4px rgba(13,110,253,.10)!important;
}
body.ys-auth119-body .ys-auth119-btn{
    background:linear-gradient(135deg,var(--ys122-blue),var(--ys122-blue-2))!important;
    border-color:transparent!important;
    color:#fff!important;
    border-radius:9px!important;
    box-shadow:0 16px 34px rgba(13,110,253,.18)!important;
}
body.ys-auth119-body .ys-auth119-btn:hover{background:var(--ys122-blue-2)!important}
body.ys-auth119-body .ys-auth119-btn-outline{
    background:#fff!important;color:var(--ys122-blue)!important;border-color:var(--ys122-blue)!important;box-shadow:none!important;
}
body.ys-auth119-body .ys-auth119-btn-social{
    background:#fff!important;color:#334155!important;border-color:#CBD5E1!important;box-shadow:none!important;
}
body.ys-auth119-body .ys-auth119-phone,
body.ys-auth119-body .ys-auth119-forgot a,
body.ys-auth119-body .ys-auth119-toplink a,
body.ys-auth119-body .ys-auth119-bottom a{color:var(--ys122-blue)!important}
body.ys-auth119-body .ys-auth119-eye{background:var(--ys122-navy)!important}
body.ys-auth119-body .ys-auth119-address-panel{background:#F7FBFF!important;border-color:#A8CBFF!important}

/* DASHBOARD */
body.ys-dashboard-unified .sidebar{
    background:linear-gradient(180deg,var(--ys122-navy),#061426)!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
}
body.ys-dashboard-unified .nav a:hover,
body.ys-dashboard-unified .nav .active,
body.ys-dashboard-unified .nav-section[open] .nav-section-title{
    background:rgba(13,110,253,.16)!important;
    color:#fff!important;
    border-color:rgba(13,110,253,.34)!important;
}
body.ys-dashboard-unified .nav-section-title::after{color:#B7D4FF!important}
body.ys-dashboard-unified .nav-section[open] .nav-section-title::after{color:#fff!important}
body.ys-dashboard-unified .content{background:transparent!important}
body.ys-dashboard-unified .topbar,
body.ys-dashboard-unified .card,
body.ys-dashboard-unified .ys118-card,
body.ys-dashboard-unified .ys118-panel{
    background:rgba(255,255,255,.96)!important;
    border:1px solid var(--ys122-line)!important;
    box-shadow:var(--ys122-shadow-soft)!important;
}
body.ys-dashboard-unified .ys118-page{color:var(--ys122-text)!important}
body.ys-dashboard-unified .ys118-badge,
body.ys-dashboard-unified .badge{
    background:var(--ys122-soft)!important;
    color:var(--ys122-blue)!important;
    border-color:#B9D7FF!important;
}
body.ys-dashboard-unified .ys118-btn,
body.ys-dashboard-unified .btn,
body.ys-dashboard-unified .button,
body.ys-dashboard-unified button[type="submit"]{
    background:linear-gradient(135deg,var(--ys122-blue),var(--ys122-blue-2))!important;
    border-color:rgba(13,110,253,.2)!important;
    color:#fff!important;
    box-shadow:0 16px 34px rgba(13,110,253,.18)!important;
}
body.ys-dashboard-unified .ys118-btn.secondary,
body.ys-dashboard-unified .btn.secondary{
    background:#fff!important;color:var(--ys122-blue)!important;border-color:#B9D7FF!important;box-shadow:none!important;
}
body.ys-dashboard-unified .ys118-card .icon,
body.ys-dashboard-unified .icon,
body.ys-dashboard-unified .menu-icon{
    background:var(--ys122-soft)!important;color:var(--ys122-blue)!important;
}
body.ys-dashboard-unified .ys118-money-in{color:var(--ys122-green)!important}
body.ys-dashboard-unified .ys118-money-out{color:var(--ys122-red)!important}
body.ys-dashboard-unified .ys118-pill.ok{background:#DCFCE7!important;color:#166534!important}
body.ys-dashboard-unified .ys118-pill.warn{background:#FFF7ED!important;color:#C2410C!important}
body.ys-dashboard-unified .ys118-pill.danger{background:#FEE2E2!important;color:#991B1B!important}
body.ys-dashboard-unified .ys118-chart svg polyline:first-child{stroke:var(--ys122-blue)!important}
body.ys-dashboard-unified .ys118-chart svg polyline:nth-child(2){stroke:var(--ys122-cyan)!important}
body.ys-dashboard-unified .ys118-map{
    background:linear-gradient(135deg,#F0F8FF,#E2F1FF)!important;
    border:1px solid var(--ys122-line)!important;
}
body.ys-dashboard-unified .ys118-map:before{background:var(--ys122-blue)!important;box-shadow:60px 30px 0 var(--ys122-cyan),140px 76px 0 var(--ys122-blue-2)!important}

/* STAGE 122 PAGE */
.ys122-page{display:grid;gap:22px}
.ys122-hero{background:linear-gradient(135deg,var(--ys122-navy),var(--ys122-blue));color:#fff;border-radius:28px;padding:26px;box-shadow:var(--ys122-shadow);display:flex;justify-content:space-between;gap:22px;align-items:center;flex-wrap:wrap;overflow:hidden;position:relative}
.ys122-hero:after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:999px;background:rgba(255,255,255,.09)}
.ys122-hero h1{margin:0 0 8px;font-size:clamp(26px,4vw,42px);letter-spacing:-.04em}
.ys122-hero p{margin:0;color:#DBEAFE;max-width:780px}.ys122-hero .actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.ys122-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.24);border-radius:14px;background:#fff;color:var(--ys122-blue);font-weight:900;padding:12px 16px;text-decoration:none}.ys122-btn.secondary{background:rgba(255,255,255,.10);color:#fff}
.ys122-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ys122-card{background:#fff;border:1px solid var(--ys122-line);border-radius:22px;padding:18px;box-shadow:var(--ys122-shadow-soft)}.ys122-card strong{display:block;font-size:28px;color:var(--ys122-navy);letter-spacing:-.03em}.ys122-card span{color:var(--ys122-muted);font-weight:750}.ys122-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ys122-panel{background:#fff;border:1px solid var(--ys122-line);border-radius:24px;padding:20px;box-shadow:var(--ys122-shadow-soft)}.ys122-panel h2{margin:0 0 12px;color:var(--ys122-navy)}.ys122-list{display:grid;gap:10px}.ys122-row{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid #EDF3FB;border-radius:14px;background:#FAFDFF}.ys122-status{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:900}.ys122-status.green{background:#DCFCE7;color:#166534}.ys122-status.yellow{background:#FEF3C7;color:#B45309}.ys122-status.red{background:#FEE2E2;color:#991B1B}.ys122-status.blue{background:#DBEAFE;color:#1D4ED8}.ys122-chart{height:190px;background:linear-gradient(180deg,#fff,#F3F8FF);border:1px solid #E5EFFB;border-radius:20px;padding:14px}.ys122-chart svg{width:100%;height:100%}.ys122-color-row{display:flex;gap:8px;flex-wrap:wrap}.ys122-swatch{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid #E5EFFB;border-radius:999px;background:#fff;font-size:12px;font-weight:850}.ys122-swatch i{width:18px;height:18px;border-radius:6px;display:inline-block}.ys122-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ys122-check{padding:12px;border-radius:16px;border:1px solid #E5EFFB;background:#fff;display:flex;gap:10px}.ys122-check .dot{width:12px;height:12px;border-radius:99px;margin-top:4px;background:var(--ys122-green);flex:0 0 auto}.ys122-check.yellow .dot{background:var(--ys122-orange)}.ys122-check.red .dot{background:var(--ys122-red)}

@media(max-width:1100px){
    body.ys-dashboard-unified .sidebar{width:250px!important}.content{margin-left:250px!important;width:calc(100% - 250px)!important}
    .ys122-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.ys122-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    body.ys-dashboard-unified .sidebar{position:relative!important;width:100%!important;min-height:auto!important}.app{display:block!important}.content{margin-left:0!important;width:100%!important;padding:16px!important}.topbar{position:sticky;top:0;z-index:20!important}
    .ys118-kpi,.ys118-grid,.ys118-grid.equal,.ys122-kpi,.ys122-checks{grid-template-columns:1fr!important}.ys122-hero{padding:22px}.ys122-card strong{font-size:23px}
    body.ys-public-unified .header{position:sticky!important;top:0!important}.nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}