/* Komponen formulir & tabel aplikasi keuangan internal (sama dengan aplikasi workflow / invoice) */
.input {
    width: 100%;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: .6rem;
    padding: .6rem .8rem;
    font-size: .875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: #FF6B00; box-shadow: 0 0 0 3px rgba(255, 107, 0, .15); }
.label { display: block; font-size: .75rem; font-weight: 700; color: #475569; margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .04em; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: .6rem; font-size: .875rem; font-weight: 700; transition: background .15s, color .15s, border-color .15s; cursor: pointer; white-space: nowrap; }
.btn-primary { background: #FF6B00; color: #fff; }
.btn-primary:hover { background: #E56000; }
.btn-dark { background: #0B0B0C; color: #fff; }
.btn-dark:hover { background: #26262b; }
.btn-light { background: #fff; color: #0f172a; border: 1px solid #cbd5e1; }
.btn-light:hover { border-color: #FF6B00; color: #FF6B00; }
.btn-danger { background: #fff; color: #dc2626; border: 1px solid #fecaca; }
.btn-danger:hover { background: #fef2f2; }
.table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 700; padding: .75rem 1rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.table td { padding: .8rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tabel matriks bulanan (rapat, kolom pertama menempel saat digulir) */
.matrix { font-size: .8rem; }
.matrix th, .matrix td { padding: .5rem .7rem; }
.matrix th:first-child, .matrix td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 220px; }
.matrix thead th:first-child { background: #f8fafc; }
.matrix tr.subtotal td { background: #f8fafc; font-weight: 700; }
.matrix tr.subtotal td:first-child { background: #f8fafc; }
.matrix tr.total td { background: #0B0B0C; color: #fff; font-weight: 800; border-bottom: 0; }
.matrix tr.total td:first-child { background: #0B0B0C; }
.matrix td.col-total, .matrix th.col-total { background: #fff7ed; font-weight: 700; }
.matrix tr.total td.col-total { background: #26262b; }
.matrix tbody tr:hover td { background: #f8fafc; }
.matrix tbody tr.total:hover td { background: #0B0B0C; }

/* ===== Tema berwarna ===== */
.app-bg {
    background-color: #fdf4ff;
    background-image:
        radial-gradient(at 0% 0%, rgba(251, 146, 60, .22) 0, transparent 45%),
        radial-gradient(at 100% 0%, rgba(59, 130, 246, .20) 0, transparent 45%),
        radial-gradient(at 100% 100%, rgba(16, 185, 129, .18) 0, transparent 50%),
        radial-gradient(at 0% 100%, rgba(168, 85, 247, .18) 0, transparent 50%);
    background-attachment: fixed;
}
.app-header { background: linear-gradient(90deg, #0f172a 0%, #1e3a8a 30%, #6d28d9 62%, #db2777 85%, #ea580c 100%); box-shadow: 0 6px 20px -8px rgba(30, 58, 138, .6); }
.app-header nav a { color: rgba(255, 255, 255, .9) !important; }
.app-header nav a.bg-white\/10 { background: rgba(255, 255, 255, .22) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.app-header nav a:hover { background: rgba(255, 255, 255, .14); }
.app-header nav a i { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.app-header .text-brand-gold { color: #fde047; }
.rainbow-bar { height: 5px; background: linear-gradient(90deg, #facc15, #fb923c, #f43f5e, #d946ef, #8b5cf6, #3b82f6, #06b6d4, #10b981); }

.page-h1 { position: relative; padding-bottom: .4rem; font-size: 1.75rem; background: linear-gradient(90deg, #ea580c, #db2777 40%, #7c3aed 70%, #2563eb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 80px; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #facc15, #f43f5e, #8b5cf6, #06b6d4); }

/* Kartu angka (KPI): gradasi penuh, teks putih, ikon besar samar di pojok */
.kpi { border: 0; position: relative; overflow: hidden; color: #fff; box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .5); transition: transform .15s, box-shadow .15s; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(15, 23, 42, .55); }
.kpi p, .kpi a, .kpi .text-brand-gold { color: #fff !important; }
.kpi p:first-of-type { opacity: .95; }
.kpi-sub { opacity: .88; }
.kpi a { text-decoration: underline; }
.kpi-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; background: rgba(255, 255, 255, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); flex-shrink: 0; }
.kpi-bg { position: absolute; right: -10px; bottom: -14px; font-size: 5rem; opacity: .14; transform: rotate(-12deg); pointer-events: none; }
.kpi-sky { background: linear-gradient(135deg, #38bdf8, #4f46e5); }
.kpi-orange { background: linear-gradient(135deg, #fb923c, #e11d48); }
.kpi-violet { background: linear-gradient(135deg, #a855f7, #db2777); }
.kpi-teal { background: linear-gradient(135deg, #2dd4bf, #0284c7); }
.kpi-pink { background: linear-gradient(135deg, #f472b6, #9333ea); }
.kpi-amber { background: linear-gradient(135deg, #facc15, #ea580c); }
.kpi-emerald { background: linear-gradient(135deg, #34d399, #047857); }
.kpi-rose { background: linear-gradient(135deg, #fb7185, #be123c); }

/* Kartu bagian: garis warna di atas, latar tipis, ikon/judul bergiliran warna */
.card { border-color: #e9e3f5; }
section.card { border-top-width: 5px; box-shadow: 0 8px 22px -14px rgba(76, 29, 149, .35); }
section.card:nth-of-type(6n+1) { border-top-color: #3b82f6; background: linear-gradient(180deg, #eff6ff, #fff 140px); }
section.card:nth-of-type(6n+2) { border-top-color: #f97316; background: linear-gradient(180deg, #fff7ed, #fff 140px); }
section.card:nth-of-type(6n+3) { border-top-color: #8b5cf6; background: linear-gradient(180deg, #f5f3ff, #fff 140px); }
section.card:nth-of-type(6n+4) { border-top-color: #10b981; background: linear-gradient(180deg, #ecfdf5, #fff 140px); }
section.card:nth-of-type(6n+5) { border-top-color: #ec4899; background: linear-gradient(180deg, #fdf2f8, #fff 140px); }
section.card:nth-of-type(6n+6) { border-top-color: #eab308; background: linear-gradient(180deg, #fefce8, #fff 140px); }
section.card:nth-of-type(6n+1) h2 { color: #1d4ed8; } section.card:nth-of-type(6n+2) h2 { color: #c2410c; }
section.card:nth-of-type(6n+3) h2 { color: #6d28d9; } section.card:nth-of-type(6n+4) h2 { color: #047857; }
section.card:nth-of-type(6n+5) h2 { color: #be185d; } section.card:nth-of-type(6n+6) h2 { color: #a16207; }
form.card { border-top: 0; padding-top: 1.6rem; background: linear-gradient(90deg, #8b5cf6, #ec4899, #f97316) top / 100% 5px no-repeat, linear-gradient(180deg, #faf5ff, #fff 50%); }
form.card h2 { color: #6d28d9; }

/* Tab view: pil berwarna */
.vtabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.vtabs::-webkit-scrollbar { display: none; }
.vtabs a { flex-shrink: 0; padding: .55rem 1rem; font-size: .875rem; font-weight: 700; color: #475569; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); transition: transform .15s; }
.vtabs a:hover { transform: translateY(-1px); color: #0f172a; }
.vtabs a:nth-child(5n+1) i { color: #f97316; } .vtabs a:nth-child(5n+2) i { color: #3b82f6; }
.vtabs a:nth-child(5n+3) i { color: #8b5cf6; } .vtabs a:nth-child(5n+4) i { color: #10b981; }
.vtabs a:nth-child(5n+5) i { color: #ec4899; }
.vtabs a.on { color: #fff; background: linear-gradient(135deg, #f97316, #ec4899); }
.vtabs a:nth-child(5n+2).on { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.vtabs a:nth-child(5n+3).on { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.vtabs a:nth-child(5n+4).on { background: linear-gradient(135deg, #10b981, #06b6d4); }
.vtabs a:nth-child(5n+5).on { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.vtabs a.on i { color: #fff !important; }

/* Tabel: header gradasi, baris belang lembut (warna solid agar kolom menempel tetap rapi) */
.table thead tr { background: linear-gradient(90deg, #2563eb, #7c3aed 50%, #db2777); }
.table th { background: transparent; color: #fff; border-bottom: 0; }
.matrix thead th:first-child { background: #2563eb; }
.table tbody tr:nth-child(even) td { background: #faf7ff; }
.table tbody tr:hover td { background: #fef3c7; }
.table.matrix tbody tr.subtotal td { background: #ede9fe; }
.table.matrix tbody tr td.col-total { background: #fff1e6; }
.matrix th.col-total { background: #db2777; }
.table.matrix tbody tr.total td, .table.matrix tbody tr.total:hover td { background: #312e81; color: #fff; }
.table.matrix tbody tr.total td.col-total { background: #4c1d95; color: #fde047; }

/* Tombol & isian */
.btn-primary { background: linear-gradient(135deg, #f97316, #ec4899 60%, #8b5cf6); box-shadow: 0 4px 14px -4px rgba(236, 72, 153, .5); }
.btn-primary:hover { background: linear-gradient(135deg, #ea580c, #db2777 60%, #7c3aed); }
.btn-dark { background: linear-gradient(135deg, #1e3a8a, #6d28d9); }
.btn-dark:hover { background: linear-gradient(135deg, #1e40af, #7c3aed); }
.btn-light { border-color: #c4b5fd; }
.btn-light:hover { background: linear-gradient(135deg, #f5f3ff, #fdf2f8); border-color: #ec4899; color: #db2777; }
.input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.label { color: #6d28d9; }
.table tfoot td { background: linear-gradient(90deg, #eff6ff, #f5f3ff 50%, #fdf2f8); border-top: 2px solid #c4b5fd; color: #3b0764; }
.app-header nav { scrollbar-width: none; }
.app-header nav::-webkit-scrollbar { display: none; }