/* Ruci Asset Care: dasbor eksekutif dan komponen kecil. Tanpa pustaka grafik eksternal. */
:root {
    --rac-navy: #0b3a5c;
    --rac-gold: #c9963e;
    --rac-bg: #f5f7fa;
    --rac-card: #ffffff;
    --rac-text: #1f2d3a;
    --rac-muted: #6b7f90;
    --rac-line: #e3e8ec;
    --rac-track: #edf1f4;
    --rac-good: #2e7d32;
    --rac-good2: #66bb6a;
    --rac-mid: #f9a825;
    --rac-warn: #ef6c00;
    --rac-bad: #c62828;
}
.dark {
    --rac-bg: transparent;
    --rac-card: rgb(24 24 27);
    --rac-text: #e5e7eb;
    --rac-muted: #9aa8b5;
    --rac-line: rgb(63 63 70);
    --rac-track: rgb(39 39 42);
}
.rac-muted { color: var(--rac-muted); font-size: .85rem; }

.rac-dash { color: var(--rac-text); }
.rac-dash a { color: inherit; text-decoration: none; }
.rac-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rac-header h1 { margin: 0; font-size: 1.75rem; font-weight: 700; color: var(--rac-navy); }
.dark .rac-header h1 { color: #e5eef6; }
.rac-header p { margin: 3px 0 0; color: var(--rac-muted); font-size: .9rem; }
.rac-eyebrow { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rac-gold); font-weight: 600; }
.rac-index { background: var(--rac-navy); color: #fff !important; border-radius: 14px; padding: 10px 20px; box-shadow: 0 2px 9px #0002; }
.rac-index span { display: block; font-size: .75rem; opacity: .8; }
.rac-index strong { font-size: 2rem; margin-right: 3px; }
.rac-index small { opacity: .8; }

.rac-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rac-kpi { background: var(--rac-card); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 6px #0000000f; border-left: 4px solid #607d8b; transition: transform .12s, box-shadow .12s; }
.rac-kpi:hover, .rac-panel:hover { box-shadow: 0 4px 14px #0000001f; }
.rac-kpi:hover { transform: translateY(-1px); }
.rac-kpi span { display: block; color: var(--rac-muted); font-size: .75rem; margin-bottom: 4px; }
.rac-kpi strong { font-size: 1.35rem; display: block; }
.rac-kpi small { color: var(--rac-muted); font-size: .72rem; }
.rac-kpi.good { border-left-color: var(--rac-good); }
.rac-kpi.warning { border-left-color: var(--rac-warn); }
.rac-kpi.danger { border-left-color: var(--rac-bad); }

.rac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rac-panel { display: block; background: var(--rac-card); border-radius: 12px; padding: 16px; box-shadow: 0 1px 6px #0000000f; min-height: 230px; }
.rac-panel.wide { grid-column: span 2; }
.rac-panel.attention { grid-column: 1 / -1; min-height: auto; }
.rac-panel h3 { font-size: .95rem; font-weight: 600; margin: 0 0 14px; }
.rac-panel h3 small { font-weight: 400; color: var(--rac-muted); font-size: .72rem; margin-left: 6px; }

.rac-bar-row { display: grid; grid-template-columns: 160px 1fr 80px; align-items: center; gap: 10px; margin: 8px 0; font-size: .8rem; border-radius: 6px; padding: 2px 4px; }
.rac-bar-row[href]:hover { background: var(--rac-track); }
.rac-bar-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rac-bar-row .track { height: 12px; background: var(--rac-track); border-radius: 8px; overflow: hidden; }
.rac-bar-row .fill { display: block; height: 100%; background: linear-gradient(90deg, #4f7a96, #26a69a); border-radius: 8px; }
.rac-bar-row .fill.mid { background: linear-gradient(90deg, #f9a825, #fbc02d); }
.rac-bar-row .fill.bad { background: linear-gradient(90deg, #c62828, #ef6c00); }
.rac-bars.cost .fill { background: linear-gradient(90deg, var(--rac-navy), var(--rac-gold)); }
.rac-bar-row b { text-align: right; font-size: .75rem; }

.rac-condition { display: grid; grid-template-columns: 12px 1fr 40px 40px; gap: 8px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--rac-line); font-size: .85rem; }
.rac-condition:hover { background: var(--rac-track); }
.rac-condition small { color: var(--rac-muted); text-align: right; }
.rac-condition b { text-align: right; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #78909c; }
.dot.excellent { background: var(--rac-good); } .dot.good { background: var(--rac-good2); } .dot.fair { background: var(--rac-mid); }
.dot.poor { background: var(--rac-warn); } .dot.critical { background: var(--rac-bad); }

.rac-trend { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 6px; }
.rac-trend-month { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.rac-trend-month .bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.rac-trend-month .bars a { width: 28%; max-width: 12px; min-height: 2px; border-radius: 3px 3px 0 0; }
.rac-trend-month .bars a:hover { filter: brightness(1.15); }
.rac-trend-month .month { font-size: .7rem; color: var(--rac-muted); margin-top: 4px; }
.preventive { background: #26a69a; } .corrective { background: #f9a825; } .emergency { background: #c62828; }
.rac-legend { display: flex; gap: 14px; justify-content: center; margin-top: 10px; font-size: .75rem; }
.rac-legend span { background: none; display: inline-flex; align-items: center; gap: 5px; }
.rac-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rac-legend .preventive::before { background: #26a69a; } .rac-legend .corrective::before { background: #f9a825; } .rac-legend .emergency::before { background: #c62828; }

.rac-gauge { --pct: 0%; width: 160px; height: 160px; margin: 10px auto; border-radius: 50%; background: conic-gradient(var(--rac-good) 0 var(--pct), var(--rac-track) var(--pct) 100%); display: grid; place-items: center; }
.rac-gauge .value { width: 118px; height: 118px; border-radius: 50%; background: var(--rac-card); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rac-gauge strong { font-size: 1.5rem; }
.rac-gauge span { font-size: .75rem; color: var(--rac-muted); }

.rac-matrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.rac-matrix .cell { aspect-ratio: 1.4; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: .55; }
.rac-matrix .cell.has { opacity: 1; box-shadow: inset 0 0 0 2px #0003; }
.rac-matrix .cell:hover { opacity: 1; }
.rac-matrix .cell b { font-size: 1rem; color: #fff; }
.rac-matrix .cell small { font-size: .6rem; color: #fffc; }
.rac-matrix .low { background: #66bb6a; } .rac-matrix .medium { background: #f9a825; } .rac-matrix .high { background: #ef6c00; } .rac-matrix .critical { background: #c62828; }
.rac-axis { display: flex; justify-content: space-between; font-size: .7rem; color: var(--rac-muted); margin-top: 6px; }

.rac-table-wrap { overflow-x: auto; }
.rac-panel table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.rac-panel th { text-align: left; color: var(--rac-muted); font-weight: 500; font-size: .75rem; padding: 6px 8px; border-bottom: 1px solid var(--rac-line); }
.rac-panel td { padding: 9px 8px; border-bottom: 1px solid var(--rac-line); }
.rac-panel tbody tr { cursor: pointer; }
.rac-panel tbody tr:hover { background: var(--rac-track); }
.rac-panel td.drill { color: var(--rac-gold); text-align: right; white-space: nowrap; }
.rac-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .7rem; font-weight: 600; background: #eceff1; color: #455a64; }
.rac-badge.urgent { background: #ffebee; color: var(--rac-bad); } .rac-badge.high { background: #fff3e0; color: var(--rac-warn); }
.rac-badge.medium { background: #e3f2fd; color: #1565c0; }

.rac-qr-card { border: 1px solid var(--rac-line); border-radius: 12px; padding: 14px; text-align: center; background: var(--rac-card); }
.rac-qr-title { font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.rac-qr-img svg { width: 170px; height: 170px; margin: 0 auto; }
.dark .rac-qr-img svg { background: #fff; border-radius: 6px; }
.rac-qr-actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; font-size: .8rem; }
.rac-qr-actions a { color: var(--rac-navy); text-decoration: underline; }
.dark .rac-qr-actions a { color: #8cc3ea; }
.rac-qr-note { font-size: .72rem; color: var(--rac-muted); margin-top: 6px; }

@media (max-width: 1100px) {
    .rac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rac-grid { grid-template-columns: 1fr; }
    .rac-panel.wide { grid-column: auto; }
}
@media (max-width: 520px) {
    .rac-bar-row { grid-template-columns: 100px 1fr 64px; }
    .rac-kpi strong { font-size: 1.1rem; }
}

/* Halaman login: panel merek bergaris tegas di kiri, formulir di kanan. */
.fi-simple-layout:has(.rac-auth-hero) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; align-items: stretch; justify-content: stretch; background: #eef2f6; }
.dark .fi-simple-layout:has(.rac-auth-hero) { background: #0d1520; }
.fi-simple-layout:has(.rac-auth-hero) .fi-simple-main-ctn { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.fi-simple-layout:has(.rac-auth-hero) .fi-simple-main { width: 100%; max-width: 440px; margin: 0; border-radius: 14px; border-top: 6px solid var(--rac-gold); position: relative; z-index: 2; box-shadow: 0 18px 45px #0b3a5c26, 0 2px 6px #0b3a5c14; }
.fi-simple-layout:has(.rac-auth-hero) .fi-simple-main .fi-logo { display: none; }

.rac-auth-hero { position: relative; overflow: hidden; background: var(--rac-navy); color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.rac-auth-hero > *:not(.rac-auth-stripes) { position: relative; z-index: 1; }
.rac-auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; }
.rac-auth-brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 2px #ffffff30; }
.rac-auth-copy { max-width: 440px; }
.rac-auth-eyebrow { margin: 0 0 12px; color: var(--rac-gold); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rac-auth-copy h2 { margin: 0 0 24px; font-size: 2.6rem; line-height: 1.12; font-weight: 800; }
.rac-auth-copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rac-auth-copy li { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: #dbe7f1; }
.rac-auth-copy li::before { content: ""; width: 22px; height: 6px; border-radius: 3px; background: var(--rac-gold); flex: none; }
.rac-auth-foot { margin: 0; font-size: .8rem; color: #9fb6c9; }

/* Garis diagonal tegas: emas, biru, dan putih tipis di atas dasar navy. */
.rac-auth-stripes { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(118deg,
        transparent 0 62%,
        var(--rac-gold) 62% 66.5%,
        transparent 66.5% 69%,
        #2a6ea6 69% 78%,
        transparent 78% 80.5%,
        #ffffff 80.5% 81.5%,
        transparent 81.5% 84%,
        #14558a 84% 100%); }

@media (max-width: 900px) {
    .fi-simple-layout:has(.rac-auth-hero) { grid-template-columns: 1fr; align-content: start; }
    .rac-auth-hero { padding: 24px; gap: 0; min-height: 132px; }
    .rac-auth-copy, .rac-auth-foot { display: none; }
    .rac-auth-stripes { background:
        linear-gradient(118deg,
            transparent 0 64%,
            var(--rac-gold) 64% 69%,
            transparent 69% 72%,
            #2a6ea6 72% 82%,
            transparent 82% 85%,
            #ffffff 85% 86.5%,
            transparent 86.5% 89%,
            #14558a 89% 100%); }
    .fi-simple-layout:has(.rac-auth-hero) .fi-simple-main-ctn { align-items: flex-start; padding: 24px 16px 40px; margin-top: -36px; }
}