:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eff6ff;

    --sidebar-bg: #07162f;
    --sidebar-bg-2: #0b1f45;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: #cbd5e1;
    --sidebar-muted: #7f96bd;

    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;

    --green: #16a34a;
    --orange: #f59e0b;
    --red: #dc2626;
    --purple: #7c3aed;

    --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    letter-spacing: -0.01em;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* PUBLIC PAGE */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

.public-header {
    height: 76px;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.public-nav {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    color: #111827;
}

.brand img {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    object-fit: contain;
}

.brand small {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 78px 0 50px;
    background:
        radial-gradient(circle at 85% 20%, rgba(141, 197, 255, 0.34), transparent 25%),
        linear-gradient(135deg, #0a55e8 0%, #07388b 65%, #051d4d 100%);
    color: white;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}

.hero h1 {
    font-size: 56px;
    line-height: 1.05;
    margin: 0 0 20px;
    font-weight: 950;
    letter-spacing: -1.8px;
}

.hero p {
    font-size: 18px;
    line-height: 1.8;
    color: #e6f0ff;
    margin: 0 0 24px;
}

.hero-panel {
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 30px;
    padding: 26px;
    box-shadow: var(--shadow);
}

.hero-card {
    background: white;
    color: #172033;
    border-radius: 22px;
    padding: 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 34px;
}

.public-stat {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    padding: 20px;
    text-align: center;
}

.public-stat b {
    font-size: 34px;
}

.section {
    padding: 62px 0;
}

.section h2 {
    font-size: 34px;
    letter-spacing: -0.8px;
    text-align: center;
    margin: 0 0 10px;
}

.section-lead {
    text-align: center;
    color: var(--muted);
    margin-bottom: 32px;
}

.footer {
    padding: 24px;
    background: #0b1220;
    color: #cbd5e1;
    text-align: center;
}

/* AUTH */
.auth-page {
    min-height: 100vh;
    display: flex;
    background: linear-gradient(135deg, #eef5ff, #f8fafc);
}

.auth-card {
    width: min(1080px, calc(100% - 32px));
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: white;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.14);
}

.auth-card:has(.auth-form:only-child) {
    grid-template-columns: 1fr;
    max-width: 560px;
}

.auth-form {
    padding: 42px;
}

.auth-demo {
    background: #f3f7ff;
    padding: 42px;
}

.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.demo-card {
    border-radius: 18px;
    background: white;
    border: 1px solid #dbe7ff;
    padding: 14px;
}

.demo-card b {
    display: block;
    font-size: 13px;
}

.demo-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 5px;
}

/* APP LAYOUT */
.app {
    display: flex;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.06), transparent 30%),
        var(--bg);
}

.sidebar {
    width: 292px;
    position: fixed;
    inset: 0 auto 0 0;
    background:
        linear-gradient(180deg, var(--sidebar-bg) 0%, #061329 100%);
    color: var(--sidebar-text);
    padding: 22px 18px;
    overflow-y: auto;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 14px 0 40px rgba(15, 23, 42, 0.14);
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 6px 6px 22px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.12);
}

.sidebar-logo {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sidebar-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 950;
    color: #ffffff;
    letter-spacing: 0.04em;
}

.sidebar-subtitle {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
    color: #91a4ca;
    letter-spacing: 0.08em;
}

.sidebar-menu {
    padding-bottom: 24px;
}

.sidebar-section {
    margin: 20px 10px 9px;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    letter-spacing: 0.12em;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 43px;
    padding: 10px 12px;
    margin-bottom: 5px;
    border-radius: 13px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 780;
    transition: all 0.18s ease;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    transform: translateX(2px);
}

.sidebar-link.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 13px 30px rgba(2, 6, 23, 0.18);
}

.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: #60a5fa;
}

.sidebar-link-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 950;
    flex: 0 0 auto;
    letter-spacing: -0.03em;
}

.sidebar-link.active .sidebar-link-icon {
    background: #eff6ff;
    color: var(--primary);
}

.sidebar-link-text {
    line-height: 1.2;
}

/* MAIN AREA */
.main {
    margin-left: 292px;
    width: calc(100% - 292px);
    min-height: 100vh;
}

.topbar {
    height: 76px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.topbar-title {
    font-size: 15px;
    font-weight: 950;
    color: var(--text);
}

.topbar-subtitle {
    width: fit-content;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f5f9;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-btn {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.18s ease;
}

.topbar-btn-light {
    background: #f8fafc;
    border: 1px solid var(--line);
    color: var(--primary);
}

.topbar-btn-light:hover {
    background: var(--primary-soft);
    border-color: #bfdbfe;
}

.topbar-btn-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.topbar-btn-danger:hover {
    background: #fecaca;
}

.content {
    padding: 30px 34px;
}

/* GENERAL COMPONENTS */
.page-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 950;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.04em;
}

.page-subtitle {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.welcome {
    background: linear-gradient(135deg, #2563eb, #123c92);
    border-radius: 28px;
    padding: 28px;
    color: white;
    box-shadow: var(--shadow);
    margin-bottom: 22px;
}

.welcome h1 {
    margin: 0 0 8px;
    font-size: 31px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.card,
.feature-card,
.stat-card {
    background: var(--card);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.feature-icon,
.stat-card .icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 18px;
    font-weight: 950;
}

.stat-card h3 {
    margin: 16px 0 4px;
    font-size: 28px;
    font-weight: 950;
}

.stat-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    margin-top: 20px;
}

/* BUTTON */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 13px;
    padding: 12px 18px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.18s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: 0 16px 32px rgb(59, 245, 22);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28);
}

.btn-white {
    background: white;
    color: var(--primary);
}

.btn-ghost {
    background: #f1f5f9;
    color: var(--primary);
}

.btn-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.btn-success {
    background: #dcfce7;
    color: #166534;
}

.btn-sm {
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 12px;
}

/* FORM */
.form-group {
    margin-bottom: 16px;
}

.label {
    display: block;
    font-weight: 850;
    margin-bottom: 8px;
    color: var(--text);
}

.input,
.select,
.textarea {
    width: 100%;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 14px;
    background: white;
    transition: all 0.16s ease;
}

.textarea {
    min-height: 110px;
    resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

/* TABLE */
.table-wrap {
    overflow: auto;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
}

.table th {
    background: #f8fafc;
    color: #475569;
    text-align: left;
    padding: 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 950;
}

.table td {
    padding: 14px;
    border-top: 1px solid var(--line);
    vertical-align: middle;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
}

.badge-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-green {
    background: #dcfce7;
    color: #166534;
}

.badge-orange {
    background: #fef3c7;
    color: #92400e;
}

.badge-red {
    background: #fee2e2;
    color: #b91c1c;
}

.badge-purple {
    background: #ede9fe;
    color: #6d28d9;
}

.badge-gray {
    background: #f1f5f9;
    color: #475569;
}

.progress {
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #22c55e);
    border-radius: 999px;
}

.filterbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.filterbar .input,
.filterbar .select {
    max-width: 260px;
}

.alert {
    padding: 14px 16px;
    border-radius: 16px;
    margin: 12px 0;
    font-weight: 800;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
}

/* EXTRA PAGE COMPONENTS */
.sop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.sop-card {
    position: relative;
    background: white;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.sop-card b {
    color: var(--primary);
    display: block;
    margin-bottom: 7px;
}

.sop-card h3 {
    margin: 0 0 9px;
}

.sop-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.mini-chart {
    height: 210px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-top: 25px;
}

.bar {
    flex: 1;
    background: linear-gradient(180deg, var(--primary), #82b8ff);
    border-radius: 12px 12px 4px 4px;
    min-height: 35px;
}

.invoice {
    max-width: 920px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    padding: 34px;
    box-shadow: var(--shadow-soft);
}

.invoice-head {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 22px;
    margin-bottom: 22px;
}

.manual-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.pagination {
    margin-top: 16px;
}

.pagination nav > div:first-child {
    display: none;
}

/* RESPONSIVE */
@media (max-width: 1050px) {
    .hero-grid,
    .auth-card,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .grid-4,
    .grid-3,
    .sop-grid,
    .kanban,
    .manual-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .sidebar {
        width: 256px;
    }

    .main {
        margin-left: 256px;
        width: calc(100% - 256px);
    }

    .content {
        padding: 24px;
    }
}

@media (max-width: 760px) {
    .app {
        display: block;
    }

    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    .main {
        margin-left: 0;
        width: 100%;
    }

    .grid-4,
    .grid-3,
    .sop-grid,
    .kanban,
    .manual-tabs,
    .stat-grid,
    .demo-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 38px;
    }

    .auth-page {
        padding: 18px;
    }

    .auth-form,
    .auth-demo {
        padding: 24px;
    }

    .topbar {
        padding: 0 18px;
    }

    .topbar-right {
        gap: 8px;
    }

    .content {
        padding: 18px;
    }
    /* SIDEBAR OFF-CANVAS */
.sidebar {
    transform: translateX(-108%);
    transition: transform 0.25s ease;
    z-index: 1000;
}

.main {
    margin-left: 0 !important;
    width: 100% !important;
}

body.sidebar-open .sidebar {
    transform: translateX(0);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 900;
}

body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-toggle-btn {
    position: fixed;
    top: 18px;
    left: 22px;
    width: 42px;
    height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    z-index: 1100;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.sidebar-toggle-btn span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #0f172a;
    transition: 0.2s ease;
}

body.sidebar-open .sidebar-toggle-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.sidebar-open .sidebar-toggle-btn span:nth-child(2) {
    opacity: 0;
}

body.sidebar-open .sidebar-toggle-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.topbar {
    padding-left: 82px !important;
}

.content {
    width: 100%;
}

@media (max-width: 760px) {
    .sidebar {
        position: fixed !important;
        width: min(86vw, 292px) !important;
        height: 100vh !important;
        inset: 0 auto 0 0 !important;
    }

    .main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .topbar {
        padding-left: 76px !important;
    }
}
}
/* =========================================================
   UPA PTPU — PREMIUM UI SYSTEM OVERRIDE v2
   Basis warna logo: Blue #334F83, Slate #9A9A9A, Ink #101828
   Catatan: patch ini ditempel paling bawah agar aktif di desktop/tablet/mobile.
   ========================================================= */

:root {
    --upa-blue: #334f83;
    --upa-blue-700: #293f69;
    --upa-blue-600: #3d5f9b;
    --upa-blue-soft: #eef3fb;
    --upa-slate: #9a9a9a;
    --upa-ink: #101828;
    --upa-text: #1f2937;
    --upa-muted: #667085;
    --upa-line: #e4e7ec;
    --upa-page: #f6f7f9;
    --upa-card: #ffffff;
    --upa-success: #16815d;
    --upa-success-soft: #ecfdf3;
    --upa-warning: #b7791f;
    --upa-warning-soft: #fff8e6;
    --upa-danger: #b42318;
    --upa-danger-soft: #fff1f0;
    --upa-radius: 18px;
    --upa-radius-lg: 24px;
    --upa-shadow: 0 10px 30px rgba(16, 24, 40, .065);
    --upa-shadow-hover: 0 16px 42px rgba(16, 24, 40, .09);
}

html,
body {
    background: var(--upa-page) !important;
    color: var(--upa-text) !important;
}

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: -0.012em !important;
    text-rendering: geometricPrecision;
}

body .app {
    background: var(--upa-page) !important;
}

body .content {
    background:
        linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(246,247,249,0) 220px),
        var(--upa-page) !important;
    padding: 30px 36px !important;
}

/* ===== Layout shell ===== */
body .topbar {
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid var(--upa-line) !important;
    box-shadow: 0 1px 0 rgba(16,24,40,.03) !important;
    backdrop-filter: blur(18px) !important;
}

body .topbar-title {
    color: var(--upa-ink) !important;
    font-weight: 760 !important;
    letter-spacing: -.025em !important;
}

body .topbar-subtitle {
    background: #f2f4f7 !important;
    color: #667085 !important;
    border: 1px solid var(--upa-line) !important;
    font-weight: 650 !important;
}

body .sidebar {
    background: linear-gradient(180deg, #111827 0%, #0b1220 100%) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 12px 0 34px rgba(16,24,40,.16) !important;
}

body .sidebar-title {
    color: #fff !important;
    font-weight: 780 !important;
    letter-spacing: -.01em !important;
}

body .sidebar-subtitle,
body .sidebar-section,
body .nav-section {
    color: #98a2b3 !important;
    font-weight: 760 !important;
}

body .sidebar-logo,
body .sidebar-link-icon {
    background: rgba(255,255,255,.08) !important;
    color: #c7d7f3 !important;
    box-shadow: none !important;
}

body .sidebar-link,
body .nav-link {
    color: #d0d5dd !important;
    border-radius: 12px !important;
    font-weight: 680 !important;
    letter-spacing: -.01em !important;
}

body .sidebar-link:hover,
body .nav-link:hover {
    background: rgba(255,255,255,.075) !important;
    color: #ffffff !important;
    transform: none !important;
}

body .sidebar-link.active,
body .nav-link.active {
    background: #ffffff !important;
    color: var(--upa-ink) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
}

body .sidebar-link.active .sidebar-link-icon,
body .nav-link.active .sidebar-link-icon {
    background: var(--upa-blue-soft) !important;
    color: var(--upa-blue) !important;
}

body .sidebar-link.active::before {
    background: var(--upa-blue) !important;
}

/* ===== Typography ===== */
body .page-title,
body .dashboard-header h1,
body .content h1,
body .section-title,
body .dashboard-card-title {
    color: var(--upa-ink) !important;
    font-weight: 780 !important;
    letter-spacing: -.045em !important;
    line-height: 1.08 !important;
}

body .page-title,
body .dashboard-header h1,
body .content > h1 {
    font-size: clamp(28px, 2.05vw, 38px) !important;
}

body .page-subtitle,
body .dashboard-header p,
body .content > p,
body .section-desc,
body .dashboard-card-subtitle {
    color: var(--upa-muted) !important;
    font-weight: 480 !important;
    line-height: 1.65 !important;
}

/* ===== Buttons ===== */
body .btn,
body .topbar-btn,
body .chart-btn,
body button.btn,
body a.btn {
    border-radius: 12px !important;
    font-weight: 720 !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
}

body .btn-primary {
    background: var(--upa-blue) !important;
    border: 1px solid var(--upa-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(51,79,131,.18) !important;
}

body .btn-primary:hover {
    background: var(--upa-blue-700) !important;
    border-color: var(--upa-blue-700) !important;
    transform: translateY(-1px) !important;
}

body .btn-ghost,
body .btn-light,
body .btn-white,
body .topbar-btn-light,
body .chart-btn {
    background: #ffffff !important;
    color: var(--upa-blue) !important;
    border: 1px solid #d6deee !important;
}

body .btn-ghost:hover,
body .btn-light:hover,
body .btn-white:hover,
body .topbar-btn-light:hover,
body .chart-btn:hover {
    background: var(--upa-blue-soft) !important;
}

body .chart-btn.active {
    background: var(--upa-blue) !important;
    border-color: var(--upa-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(51,79,131,.16) !important;
}

body .btn-success,
body .btn-wa,
body a[href*="wa.me"].btn {
    background: var(--upa-success) !important;
    border: 1px solid var(--upa-success) !important;
    color: #ffffff !important;
}

body .btn-danger,
body .topbar-btn-danger {
    background: var(--upa-danger-soft) !important;
    border: 1px solid #fecdca !important;
    color: var(--upa-danger) !important;
}

/* ===== Cards & grids ===== */
@media (min-width: 1181px) {
    body .content .grid-4,
    body .content > .grid-4,
    body .dashboard-header + .grid-4,
    body .monitor-page-head + .grid-4,
    body .orders-header + .grid-4,
    body .stats-grid-4,
    body .finance-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    body .content .grid-4,
    body .content > .grid-4,
    body .dashboard-header + .grid-4,
    body .monitor-page-head + .grid-4,
    body .orders-header + .grid-4,
    body .stats-grid-4,
    body .finance-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

body .card,
body .feature-card,
body .stat-card,
body .stats-card,
body .chart-card,
body .summary-box,
body .monitor-card,
body .monitor-item,
body .invoice-card,
body .invoice-item,
body .sop-card,
body .notification-card,
body .report-card,
body .department-card,
body .user-card,
body .order-card {
    background: var(--upa-card) !important;
    border: 1px solid var(--upa-line) !important;
    border-radius: var(--upa-radius) !important;
    box-shadow: var(--upa-shadow) !important;
}

body .card:hover,
body .feature-card:hover,
body .stat-card:hover,
body .stats-card:hover,
body .monitor-card:hover,
body .invoice-card:hover,
body .sop-card:hover,
body .order-card:hover {
    box-shadow: var(--upa-shadow-hover) !important;
}

body .stat-card {
    min-height: 132px !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 16px !important;
}

body .stat-card .icon,
body .dashboard-stat-icon,
body .monitor-stat-icon,
body .orders-stat-icon,
body .finance-stat-icon,
body .stats-stat-icon,
body .report-stat-icon,
body .summary-icon {
    grid-row: 1 / 3 !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: var(--upa-blue-soft) !important;
    color: var(--upa-blue) !important;
    border: 1px solid rgba(51,79,131,.13) !important;
    box-shadow: none !important;
}

body .stat-card .icon::before,
body .dashboard-stat-icon::before,
body .monitor-stat-icon::before,
body .orders-stat-icon::before,
body .finance-stat-icon::before,
body .stats-stat-icon::before,
body .report-stat-icon::before,
body .summary-icon::before {
    width: 20px !important;
    height: 20px !important;
}

body .stat-card h3 {
    margin: 0 !important;
    color: var(--upa-ink) !important;
    font-size: clamp(23px, 1.65vw, 31px) !important;
    font-weight: 760 !important;
    letter-spacing: -.04em !important;
    line-height: 1.1 !important;
}

body .stat-card p {
    margin: 4px 0 0 !important;
    color: var(--upa-muted) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

body .dashboard-grid,
body .monitor-detail,
body .invoice-detail-grid,
body .stats-grid-2 {
    gap: 18px !important;
}

/* ===== Tables ===== */
body .table {
    background: #ffffff !important;
    border: 1px solid var(--upa-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--upa-shadow) !important;
}

body .table th {
    background: #f9fafb !important;
    color: #667085 !important;
    border-bottom: 1px solid var(--upa-line) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    letter-spacing: .075em !important;
}

body .table td {
    color: #344054 !important;
    border-top: 1px solid #eef0f3 !important;
    font-size: 14px !important;
}

body .table tr:hover td {
    background: #fbfcfe !important;
}

/* ===== Forms ===== */
body .input,
body .select,
body .textarea,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body select,
body textarea {
    background: #ffffff !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 12px !important;
    color: var(--upa-ink) !important;
    box-shadow: none !important;
}

body .input:focus,
body .select:focus,
body .textarea:focus,
body input:focus,
body select:focus,
body textarea:focus {
    border-color: var(--upa-blue) !important;
    box-shadow: 0 0 0 4px rgba(51,79,131,.12) !important;
    outline: none !important;
}

body .label,
body label {
    color: var(--upa-ink) !important;
    font-weight: 720 !important;
}

/* ===== Badges/status ===== */
body .badge {
    border: 1px solid transparent !important;
    font-weight: 720 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
}

body .badge-blue {
    background: var(--upa-blue-soft) !important;
    color: var(--upa-blue) !important;
    border-color: #d6deee !important;
}

body .badge-green {
    background: var(--upa-success-soft) !important;
    color: var(--upa-success) !important;
    border-color: #bbf7d0 !important;
}

body .badge-orange {
    background: var(--upa-warning-soft) !important;
    color: var(--upa-warning) !important;
    border-color: #fedf89 !important;
}

body .badge-red {
    background: var(--upa-danger-soft) !important;
    color: var(--upa-danger) !important;
    border-color: #fecdca !important;
}

body .badge-gray {
    background: #f2f4f7 !important;
    color: #667085 !important;
    border-color: var(--upa-line) !important;
}

body .badge-purple {
    background: #f4f3ff !important;
    color: #5925dc !important;
    border-color: #d9d6fe !important;
}

body .progress {
    background: #eaecf0 !important;
    height: 8px !important;
}

body .progress span {
    background: linear-gradient(90deg, var(--upa-blue), var(--upa-blue-600)) !important;
}

/* ===== Alerts ===== */
body .alert {
    border-radius: 14px !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    font-weight: 650 !important;
}

body .alert-success {
    background: var(--upa-success-soft) !important;
    color: var(--upa-success) !important;
    border-color: #bbf7d0 !important;
}

body .alert-error,
body .alert-danger {
    background: var(--upa-danger-soft) !important;
    color: var(--upa-danger) !important;
    border-color: #fecdca !important;
}

/* ===== Public page tone if classes exist ===== */
body .public-header,
body .header,
body .navbar {
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid var(--upa-line) !important;
    box-shadow: 0 1px 0 rgba(16,24,40,.035) !important;
}

body .hero {
    background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%) !important;
    color: var(--upa-ink) !important;
}

body .hero h1 {
    color: var(--upa-ink) !important;
    font-weight: 780 !important;
}

body .hero p,
body .hero-note,
body .panel-subtitle {
    color: var(--upa-muted) !important;
}

body .hero-badge {
    background: var(--upa-blue-soft) !important;
    border: 1px solid #d6deee !important;
    color: var(--upa-blue) !important;
}

body .hero-panel,
body .flow-card,
body .info-item,
body .highlight {
    background: #ffffff !important;
    border: 1px solid var(--upa-line) !important;
    box-shadow: var(--upa-shadow) !important;
}

body .cta-inner,
body .verify-box,
body .wa-box {
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 18px 42px rgba(16,24,40,.18) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

body .cta-inner p,
body .verify-box p,
body .wa-box p,
body .verify-note {
    color: #d0d5dd !important;
}

@media (max-width: 760px) {
    body .content {
        padding: 18px !important;
    }

    body .content .grid-4,
    body .content > .grid-4,
    body .dashboard-header + .grid-4,
    body .monitor-page-head + .grid-4,
    body .orders-header + .grid-4,
    body .stats-grid-4,
    body .finance-stat-grid {
        grid-template-columns: 1fr !important;
    }

    body .stat-card {
        min-height: 118px !important;
        padding: 16px !important;
    }

    body .page-title,
    body .dashboard-header h1,
    body .content h1 {
        font-size: 28px !important;
    }
}
/* =========================================================
   UPA PTPU — SIGNATURE UI SYSTEM v3.1
   Dibuat dari CSS terbaru user. CSS lama TIDAK dihapus.
   Prinsip visual:
   - palet logo: blue #334F83, gray #9A9A9A, ink #101828
   - clean enterprise, tidak terlalu ramai, tidak template
   - desain compact, proporsi card lebih rapi
   - hijau hanya untuk WhatsApp/sukses, merah hanya untuk logout/error
   ========================================================= */

:root {
    --ui-blue: #334f83;
    --ui-blue-900: #213557;
    --ui-blue-800: #293f69;
    --ui-blue-700: #304c81;
    --ui-blue-600: #3e5f9a;
    --ui-blue-100: #eef3fb;

    --ui-gray-logo: #9a9a9a;
    --ui-ink: #101828;
    --ui-text: #1d2939;
    --ui-muted: #667085;
    --ui-subtle: #98a2b3;
    --ui-line: #e4e7ec;
    --ui-line-strong: #d0d5dd;
    --ui-page: #f6f7f9;
    --ui-card: #ffffff;

    --ui-green: #16815d;
    --ui-green-soft: #ecfdf3;
    --ui-red: #b42318;
    --ui-red-soft: #fff1f0;
    --ui-yellow: #b7791f;
    --ui-yellow-soft: #fff8e6;

    --ui-radius-sm: 10px;
    --ui-radius: 16px;
    --ui-radius-lg: 22px;
    --ui-shadow-xs: 0 1px 2px rgba(16,24,40,.04);
    --ui-shadow: 0 10px 26px rgba(16,24,40,.06);
    --ui-shadow-strong: 0 18px 44px rgba(16,24,40,.10);
}

/* ---------- Core tone ---------- */
html body {
    background: var(--ui-page) !important;
    color: var(--ui-text) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: -0.012em !important;
    text-rendering: geometricPrecision;
}

html body .app {
    background:
        radial-gradient(circle at 100% 0%, rgba(51,79,131,.06), transparent 360px),
        var(--ui-page) !important;
}

html body .content {
    background: transparent !important;
    padding: 28px 36px !important;
    max-width: 100% !important;
}

/* ---------- App shell: topbar & sidebar ---------- */
html body .topbar {
    min-height: 76px !important;
    height: auto !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    box-shadow: 0 1px 0 rgba(16,24,40,.03) !important;
    backdrop-filter: blur(18px) !important;
}

html body .topbar-title {
    color: var(--ui-ink) !important;
    font-weight: 760 !important;
    letter-spacing: -.018em !important;
}

html body .topbar-subtitle {
    background: #f2f4f7 !important;
    color: var(--ui-muted) !important;
    border: 1px solid var(--ui-line) !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

html body .topbar-notif-badge {
    background: var(--ui-red) !important;
    border-color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(180,35,24,.22) !important;
}

/* app.blade punya inline style; selector ini lebih spesifik dari body .sidebar */
html body .sidebar {
    background: linear-gradient(180deg, #111827 0%, #0b1220 100%) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 10px 0 34px rgba(16,24,40,.16) !important;
}

html body .sidebar-brand,
html body .sidebar .brand {
    border-bottom-color: rgba(255,255,255,.10) !important;
}

html body .sidebar-logo {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: none !important;
}

html body .sidebar-title {
    color: #ffffff !important;
    font-weight: 760 !important;
    letter-spacing: -.01em !important;
}

html body .sidebar-subtitle,
html body .sidebar-section,
html body .nav-section {
    color: #98a2b3 !important;
    font-weight: 720 !important;
    letter-spacing: .11em !important;
}

html body .sidebar-link,
html body .nav-link {
    min-height: 42px !important;
    border-radius: 12px !important;
    color: #d0d5dd !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    border: 1px solid transparent !important;
    letter-spacing: -.008em !important;
    transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}

html body .sidebar-link:hover,
html body .nav-link:hover {
    background: rgba(255,255,255,.075) !important;
    color: #ffffff !important;
    transform: none !important;
}

html body .sidebar-link.active,
html body .nav-link.active {
    background: #ffffff !important;
    color: var(--ui-ink) !important;
    border-color: rgba(255,255,255,.92) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
}

html body .sidebar-link.active::before {
    background: var(--ui-blue) !important;
}

html body .sidebar-link-icon,
html body .nav-link .icon {
    background: rgba(255,255,255,.08) !important;
    color: #c9d8f2 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: none !important;
}

html body .sidebar-link.active .sidebar-link-icon {
    background: var(--ui-blue-100) !important;
    color: var(--ui-blue) !important;
    border-color: rgba(51,79,131,.12) !important;
}

html body .sidebar-toggle-btn {
    border-radius: 13px !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: 0 10px 24px rgba(16,24,40,.10) !important;
}

html body .sidebar-toggle-btn span {
    background: var(--ui-ink) !important;
}

/* ---------- Typography ---------- */
html body .page-title,
html body .dashboard-header h1,
html body .content h1,
html body .section-title,
html body .stats-section-title,
html body .monitor-company,
html body .invoice-company,
html body .invoice-title,
html body .sop-external-title,
html body .sop-card-title,
html body .report-card-title,
html body .notif-card-title,
html body .flow-title,
html body .payment-order-company,
html body .order-section-title,
html body .dept-title {
    color: var(--ui-ink) !important;
    font-weight: 760 !important;
    letter-spacing: -.04em !important;
}

html body .page-title,
html body .dashboard-header h1,
html body .content > h1 {
    font-size: clamp(28px, 2.05vw, 38px) !important;
    line-height: 1.08 !important;
}

html body .page-subtitle,
html body .dashboard-header p,
html body .content > p,
html body .section-desc,
html body .stats-section-subtitle,
html body .invoice-small,
html body .sop-external-desc,
html body .sop-card-subtitle,
html body .report-card-subtitle,
html body .notif-card-subtitle,
html body .order-section-subtitle,
html body .dept-subtitle {
    color: var(--ui-muted) !important;
    font-weight: 480 !important;
    line-height: 1.65 !important;
}

/* ---------- Buttons ---------- */
html body .btn,
html body .topbar-btn,
html body .chart-btn,
html body button.btn,
html body a.btn,
html body .btn-save,
html body .btn-edit,
html body .btn-print,
html body .btn-payment,
html body .btn-invoice-view,
html body .notif-read-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
}

html body .btn-primary,
html body .btn-save,
html body .btn-payment,
html body .btn-login {
    background: var(--ui-blue) !important;
    border-color: var(--ui-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(51,79,131,.18) !important;
}

html body .btn-primary:hover,
html body .btn-save:hover,
html body .btn-payment:hover,
html body .btn-login:hover {
    background: var(--ui-blue-800) !important;
    border-color: var(--ui-blue-800) !important;
    transform: translateY(-1px) !important;
}

html body .btn-ghost,
html body .btn-light,
html body .btn-white,
html body .topbar-btn-light,
html body .chart-btn,
html body .btn-back,
html body .btn-side,
html body .btn-step,
html body .btn-edit,
html body .btn-invoice-view {
    background: #ffffff !important;
    color: var(--ui-blue) !important;
    border-color: #d6deee !important;
}

html body .btn-ghost:hover,
html body .btn-light:hover,
html body .btn-white:hover,
html body .topbar-btn-light:hover,
html body .chart-btn:hover,
html body .btn-edit:hover,
html body .btn-invoice-view:hover {
    background: var(--ui-blue-100) !important;
    color: var(--ui-blue-800) !important;
}

html body .chart-btn.active {
    background: var(--ui-blue) !important;
    border-color: var(--ui-blue) !important;
    color: #ffffff !important;
}

html body .btn-success,
html body .btn-wa,
html body .btn-mail,
html body a[href*="wa.me"].btn {
    background: var(--ui-green) !important;
    border-color: var(--ui-green) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(22,129,93,.15) !important;
}

html body .btn-danger,
html body .topbar-btn-danger {
    background: var(--ui-red-soft) !important;
    color: var(--ui-red) !important;
    border-color: #fecdca !important;
}

/* ---------- Page card language ---------- */
html body .card,
html body .feature-card,
html body .stat-card,
html body .stats-card,
html body .chart-card,
html body .summary-box,
html body .monitor-card,
html body .monitor-item,
html body .invoice-card,
html body .invoice-item,
html body .sop-card,
html body .sop-panel,
html body .sop-legend-card,
html body .notification-card,
html body .report-card,
html body .department-card,
html body .user-card,
html body .order-card,
html body .order-form-card,
html body .payment-card,
html body .payment-guard-card,
html body .payment-order-box,
html body .detail-card,
html body .edit-card,
html body .empty-state,
html body .verify-card,
html body .auth-card,
html body .demo-card,
html body .flow-card,
html body .info-item,
html body .highlight,
html body .hero-panel {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}

html body .card:hover,
html body .feature-card:hover,
html body .stat-card:hover,
html body .stats-card:hover,
html body .monitor-card:hover,
html body .invoice-card:hover,
html body .sop-card:hover,
html body .order-card:hover,
html body .department-card:hover,
html body .user-card:hover {
    box-shadow: var(--ui-shadow-strong) !important;
}

/* ---------- KPI/stat cards: compact horizontal desktop ---------- */
@media (min-width: 1181px) {
    html body .content .grid-4,
    html body .content > .grid-4,
    html body .dashboard-header + .grid-4,
    html body .monitor-page-head + .grid-4,
    html body .orders-header + .grid-4,
    html body .invoice-page-head + .finance-stat-grid,
    html body .stats-grid-4,
    html body .finance-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    html body .stats-grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    html body .content .grid-4,
    html body .content > .grid-4,
    html body .dashboard-header + .grid-4,
    html body .monitor-page-head + .grid-4,
    html body .orders-header + .grid-4,
    html body .stats-grid-4,
    html body .stats-grid-5,
    html body .finance-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

html body .stat-card,
html body .finance-stat-card,
html body .stats-card:has(.stats-icon) {
    min-height: 126px !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 16px !important;
}

html body .stat-card .icon,
html body .dashboard-stat-icon,
html body .monitor-stat-icon,
html body .orders-stat-icon,
html body .finance-stat-icon,
html body .stats-stat-icon,
html body .report-stat-icon,
html body .summary-icon,
html body .dept-stat-icon,
html body .notif-stat-icon,
html body .stats-icon,
html body .sop-summary-icon {
    grid-row: 1 / 3 !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: var(--ui-blue-100) !important;
    color: var(--ui-blue) !important;
    border: 1px solid rgba(51,79,131,.13) !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
}

html body .stat-card .icon::before,
html body .dashboard-stat-icon::before,
html body .monitor-stat-icon::before,
html body .orders-stat-icon::before,
html body .finance-stat-icon::before,
html body .stats-stat-icon::before,
html body .report-stat-icon::before,
html body .summary-icon::before,
html body .stats-icon::before,
html body .sop-summary-icon::before {
    width: 20px !important;
    height: 20px !important;
}

html body .stat-card h3,
html body .finance-stat-card h3,
html body .stats-card h3,
html body .summary-value {
    margin: 0 !important;
    color: var(--ui-ink) !important;
    font-size: clamp(22px, 1.6vw, 30px) !important;
    font-weight: 760 !important;
    letter-spacing: -.038em !important;
    line-height: 1.1 !important;
}

html body .stat-card p,
html body .finance-stat-card p,
html body .stats-card p,
html body .summary-label {
    margin: 4px 0 0 !important;
    color: var(--ui-muted) !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    line-height: 1.35 !important;
}

/* ---------- Tables ---------- */
html body .table,
html body .dept-table,
html body .sop-table {
    background: #ffffff !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--ui-shadow) !important;
    overflow: hidden !important;
}

html body .table th,
html body .dept-table th,
html body .sop-table th {
    background: #f9fafb !important;
    color: var(--ui-muted) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    font-size: 11px !important;
    font-weight: 720 !important;
    letter-spacing: .075em !important;
}

html body .table td,
html body .dept-table td,
html body .sop-table td {
    color: #344054 !important;
    border-top: 1px solid #eef0f3 !important;
    font-size: 14px !important;
}

html body .table tr:hover td,
html body .dept-table tr:hover td {
    background: #fbfcfe !important;
}

html body .table-wrap,
html body .dept-table-wrap,
html body .sop-table-wrap {
    border-radius: 16px !important;
}

/* ---------- Forms ---------- */
html body .input,
html body .select,
html body .textarea,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="date"],
html body select,
html body textarea {
    background: #ffffff !important;
    border: 1px solid var(--ui-line-strong) !important;
    border-radius: 12px !important;
    color: var(--ui-ink) !important;
    box-shadow: none !important;
}

html body .input:focus,
html body .select:focus,
html body .textarea:focus,
html body input:focus,
html body select:focus,
html body textarea:focus {
    border-color: var(--ui-blue) !important;
    box-shadow: 0 0 0 4px rgba(51,79,131,.12) !important;
    outline: none !important;
}

html body .label,
html body label {
    color: var(--ui-ink) !important;
    font-weight: 700 !important;
}

/* ---------- Filters/toolbars ---------- */
html body .filterbar,
html body .monitor-toolbar,
html body .invoice-toolbar,
html body .stats-toolbar,
html body .report-toolbar,
html body .orders-toolbar,
html body .dept-filter,
html body .monitor-filter,
html body .invoice-filter,
html body .stats-filter,
html body .report-filter,
html body .notif-filter {
    background: #ffffff !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}

/* ---------- Badges/status ---------- */
html body .badge {
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
}

html body .badge-blue {
    background: var(--ui-blue-100) !important;
    color: var(--ui-blue) !important;
    border-color: #d6deee !important;
}

html body .badge-green {
    background: var(--ui-green-soft) !important;
    color: var(--ui-green) !important;
    border-color: #bbf7d0 !important;
}

html body .badge-orange {
    background: var(--ui-yellow-soft) !important;
    color: var(--ui-yellow) !important;
    border-color: #fedf89 !important;
}

html body .badge-red {
    background: var(--ui-red-soft) !important;
    color: var(--ui-red) !important;
    border-color: #fecdca !important;
}

html body .badge-gray {
    background: #f2f4f7 !important;
    color: var(--ui-muted) !important;
    border-color: var(--ui-line) !important;
}

html body .badge-purple {
    background: #f4f3ff !important;
    color: #5925dc !important;
    border-color: #d9d6fe !important;
}

html body .progress {
    height: 8px !important;
    background: #eaecf0 !important;
}

html body .progress span {
    background: linear-gradient(90deg, var(--ui-blue), var(--ui-blue-600)) !important;
}

/* ---------- Alerts ---------- */
html body .alert {
    border-radius: 14px !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    font-weight: 650 !important;
}

html body .alert-success {
    background: var(--ui-green-soft) !important;
    color: var(--ui-green) !important;
    border-color: #bbf7d0 !important;
}

html body .alert-error,
html body .alert-danger {
    background: var(--ui-red-soft) !important;
    color: var(--ui-red) !important;
    border-color: #fecdca !important;
}

/* ---------- Monitoring/invoice/detail refinement ---------- */
html body .monitor-summary,
html body .invoice-summary,
html body .payment-summary,
html body .report-summary {
    background: #ffffff !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}

html body .invoice-line,
html body .detail-line,
html body .summary-row {
    border-color: var(--ui-line) !important;
}

html body .invoice-label,
html body .summary-label {
    color: var(--ui-muted) !important;
}

html body .invoice-value,
html body .summary-value {
    color: var(--ui-ink) !important;
}

/* ---------- SOP ---------- */
html body .sop-shell,
html body .sop-tabs,
html body .sop-tab-nav,
html body .sop-external-path {
    background: #ffffff !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: var(--ui-shadow) !important;
}

html body .sop-tab-label {
    color: var(--ui-muted) !important;
}

html body .sop-tab-label.active,
html body .sop-primary,
html body .sop-number-cell {
    background: var(--ui-blue) !important;
    color: #ffffff !important;
}

/* ---------- Public/landing pages ---------- */
html body .public-header,
html body .header,
html body .navbar {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    box-shadow: 0 1px 0 rgba(16,24,40,.035) !important;
}

html body .hero {
    background: linear-gradient(180deg, #ffffff 0%, var(--ui-page) 100%) !important;
    color: var(--ui-ink) !important;
}

html body .hero h1,
html body .hero-title {
    color: var(--ui-ink) !important;
    font-weight: 760 !important;
}

html body .hero p,
html body .hero-desc,
html body .hero-note,
html body .panel-subtitle {
    color: var(--ui-muted) !important;
}

html body .hero-badge {
    background: var(--ui-blue-100) !important;
    border: 1px solid #d6deee !important;
    color: var(--ui-blue) !important;
}

html body .cta-inner,
html body .verify-box,
html body .wa-box {
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 18px 42px rgba(16,24,40,.18) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

html body .cta-inner p,
html body .verify-box p,
html body .wa-box p,
html body .verify-note {
    color: #d0d5dd !important;
}

/* ---------- Auth pages ---------- */
html body .auth-page {
    background:
        radial-gradient(circle at 18% 18%, rgba(51,79,131,.08), transparent 34%),
        var(--ui-page) !important;
}

html body .auth-demo {
    background: #f2f4f7 !important;
}

/* ---------- Print invoice must stay official ---------- */
@media print {
    html body {
        background: #ffffff !important;
    }

    html body .invoice-sheet,
    html body .invoice {
        box-shadow: none !important;
        border-color: #d0d5dd !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    html body .content {
        padding: 18px !important;
    }

    html body .content .grid-4,
    html body .content > .grid-4,
    html body .dashboard-header + .grid-4,
    html body .monitor-page-head + .grid-4,
    html body .orders-header + .grid-4,
    html body .stats-grid-4,
    html body .stats-grid-5,
    html body .finance-stat-grid {
        grid-template-columns: 1fr !important;
    }

    html body .stat-card,
    html body .finance-stat-card {
        min-height: 112px !important;
        padding: 16px !important;
    }

    html body .page-title,
    html body .dashboard-header h1,
    html body .content h1 {
        font-size: 27px !important;
    }

    html body .topbar {
        padding-left: 78px !important;
    }
}


:root {
    --side-icon-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='8' rx='2'/%3E%3Crect x='14' y='3' width='7' height='5' rx='2'/%3E%3Crect x='14' y='12' width='7' height='9' rx='2'/%3E%3Crect x='3' y='15' width='7' height='6' rx='2'/%3E%3C/svg%3E");
    --side-icon-sop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E");
    --side-icon-add-order: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8l1 2h3v14H4V6h3l1-2Z'/%3E%3Cpath d='M12 10v6'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E");
    --side-icon-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8l1 2h3v14H4V6h3l1-2Z'/%3E%3Cpath d='M9 10h6M9 14h6M9 18h4'/%3E%3C/svg%3E");
    --side-icon-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'/%3E%3C/svg%3E");
    --side-icon-offer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
    --side-icon-approval: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
    --side-icon-contract: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M9 18h3'/%3E%3Cpath d='m9 11 1.5 1.5L14 9'/%3E%3C/svg%3E");
    --side-icon-invoice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2V2Z'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E");
    --side-icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h16'/%3E%3Crect x='7' y='11' width='3' height='5' rx='1'/%3E%3Crect x='12' y='7' width='3' height='9' rx='1'/%3E%3Crect x='17' y='9' width='3' height='7' rx='1'/%3E%3C/svg%3E");
    --side-icon-report: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M9 14h6M9 18h6'/%3E%3C/svg%3E");
    --side-icon-department: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M17 9h2a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M8 7h2M8 11h2M8 15h2M13 7h1M13 11h1M13 15h1'/%3E%3C/svg%3E");
    --side-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --side-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
    --side-icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --side-icon-profile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --side-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 8.6 19a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 5 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3a2 2 0 1 1 4 0v.1A1.7 1.7 0 0 0 15.4 5a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.2.37.5.7.9.9.3.2.7.3 1.1.3H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5.8Z'/%3E%3C/svg%3E");
    --side-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.5 1.7c-.8.9-1.8 1.3-2.2 2.3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --side-icon-manual: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h5'/%3E%3C/svg%3E");
}

html body .sidebar-link .sidebar-link-icon {
    --sidebar-current-icon: var(--side-icon-dashboard);
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    color: inherit !important;
}

html body .sidebar-link .sidebar-link-icon::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    -webkit-mask-image: var(--sidebar-current-icon) !important;
    mask-image: var(--sidebar-current-icon) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

html body .sidebar-link[href$="/dashboard"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-dashboard); }
html body .sidebar-link[href*="alur-sop"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-sop); }
html body .sidebar-link[href*="form-pesanan"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-add-order); }
html body .sidebar-link[href*="manajemen-pesanan"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-orders); }
html body .sidebar-link[href*="monitoring-produksi"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-monitor); }
html body .sidebar-link[href*="penawaran"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-offer); }
html body .sidebar-link[href*="approval"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-approval); }
html body .sidebar-link[href*="kontrak"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-contract); }
html body .sidebar-link[href*="invoice"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-invoice); }
html body .sidebar-link[href*="statistik"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-chart); }
html body .sidebar-link[href*="laporan-akhir"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-report); }
html body .sidebar-link[href*="manajemen-jurusan"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-department); }
html body .sidebar-link[href*="manajemen-pengguna"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-users); }
html body .sidebar-link[href*="notifikasi"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-bell); }
html body .sidebar-link[href*="riwayat-aktivitas"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-history); }
html body .sidebar-link[href*="profil"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-profile); }
html body .sidebar-link[href*="pengaturan"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-settings); }
html body .sidebar-link[href*="bantuan"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-help); }
html body .sidebar-link[href*="manual"] .sidebar-link-icon { --sidebar-current-icon: var(--side-icon-manual); }

@supports not ((-webkit-mask-image: var(--side-icon-dashboard)) or (mask-image: var(--side-icon-dashboard))) {
    html body .sidebar-link .sidebar-link-icon::before {
        content: attr(data-icon) !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        background: none !important;
        font-size: 18px !important;
        line-height: 1 !important;
        font-family: "Segoe UI Symbol", "Arial Unicode MS", Arial, Helvetica, sans-serif !important;
    }
}