:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eff6ff;
    --sidebar: #0f172a;
    --sidebar-hover: #1e293b;
    --background: #f5f7fb;
    --surface: #ffffff;
    --text: #172033;
    --muted: #6b7280;
    --border: #e5e7eb;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    --purple: #7c3aed;
    --shadow: 0 10px 30px rgba(15, 23, 42, .07);
    --radius: 14px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--jcom-default-font);
    background: var(--background);
    color: var(--text);
    font-size: 14px;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 258px;
    display: flex;
    flex-direction: column;
    background: var(--sidebar);
    color: #cbd5e1;
    z-index: 1000;
    transition: transform .25s ease;
}
.sidebar-brand {
    height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.25px;
}
.brand-mark {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    box-shadow: 0 8px 22px rgba(37,99,235,.35);
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 18px 12px; }
.nav-label {
    padding: 18px 12px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    color: #64748b;
}
.nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 3px 0;
    border-radius: 10px;
    color: #cbd5e1;
    transition: .18s ease;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; transform: translateX(2px); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(37,99,235,.96), rgba(59,130,246,.82)); box-shadow: 0 8px 22px rgba(37,99,235,.22); }
.nav-icon { width: 22px; text-align: center; font-size: 17px; }
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-user { display: flex; gap: 10px; align-items: center; padding: 10px; background: rgba(255,255,255,.05); border-radius: 12px; }
.sidebar-user-info { min-width: 0; display: flex; flex-direction: column; }
.sidebar-user-info strong { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info small { color: #94a3b8; }

.main-content { min-height: 100vh; margin-left: 258px; display: flex; flex-direction: column; }
.topbar {
    height: 72px;
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.topbar-left, .topbar-actions, .user-menu-button { display: flex; align-items: center; }
.topbar-left { gap: 14px; }
.topbar-title { font-weight: 800; font-size: 16px; color: #111827; }
.topbar-subtitle { color: var(--muted); font-size: 12px; margin-top: 2px; }
.topbar-actions { gap: 10px; }
.icon-button {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 11px;
    color: #475569;
}
.icon-button:hover { background: #f8fafc; border-color: #cbd5e1; }
#sidebarToggle { display: none; font-size: 20px; }
.notification-button { position: relative; }
.notification-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; top: 7px; right: 8px; }
.user-menu { position: relative; }
.user-menu-button { gap: 10px; padding: 5px 8px 5px 5px; border: 0; background: transparent; border-radius: 12px; }
.user-menu-button:hover { background: #f1f5f9; }
.user-menu-name { font-weight: 700; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chevron { color: var(--muted); }
.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 190px;
    display: none;
    padding: 7px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 18px 45px rgba(15,23,42,.14);
}
.user-dropdown.show { display: block; }
.user-dropdown a, .user-dropdown button { display: block; width: 100%; padding: 10px 11px; text-align: left; border: 0; border-radius: 8px; background: transparent; }
.user-dropdown a:hover, .user-dropdown button:hover { background: #f1f5f9; }
.user-dropdown .dropdown-danger { color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--border); margin: 5px 0; }

.page-content { flex: 1; padding: 28px; }
.footer { min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 28px; color: var(--muted); border-top: 1px solid var(--border); background: #fff; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.page-heading h1 { margin: 0 0 5px; font-size: 24px; letter-spacing: -.5px; }
.page-heading p { margin: 0; color: var(--muted); }
.breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.breadcrumb a { color: var(--primary); }

.grid { display: grid; gap: 20px; }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-header h2, .card-header h3 { margin: 0; font-size: 16px; }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--border); }

.stat-card { position: relative; overflow: hidden; padding: 20px; }
.stat-card::after { content: ''; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: var(--primary-soft); }
.stat-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.stat-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 900; font-size: 18px; }
.stat-label { color: var(--muted); font-weight: 600; }
.stat-number { font-size: 29px; line-height: 1.1; font-weight: 850; margin: 18px 0 8px; letter-spacing: -1px; }
.stat-meta { color: var(--muted); font-size: 12px; }
.stat-meta strong { color: var(--success); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 15px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; transition: .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 7px 18px rgba(37,99,235,.2); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #fff; color: #334155; border-color: var(--border); }
.btn-danger { background: #fff1f2; color: var(--danger); border-color: #fecdd3; }
.btn-success { background: #ecfdf5; color: var(--success); border-color: #bbf7d0; }
.btn-sm { min-height: 34px; padding: 7px 10px; font-size: 12px; border-radius: 8px; }
.btn-icon { width: 34px; padding: 0; }

.form-group { margin-bottom: 17px; }
.form-label { display: block; margin-bottom: 7px; font-weight: 700; color: #334155; }
.form-control, .form-select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d7dde7;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border .15s, box-shadow .15s;
}
textarea.form-control { min-height: 100px; resize: vertical; }
.form-control:focus, .form-select:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.form-hint { margin-top: 6px; color: var(--muted); font-size: 12px; }
.form-error { margin-top: 6px; color: var(--danger); font-size: 12px; }
.input-group { display: flex; gap: 10px; }
.input-group > * { flex: 1; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check input { width: 17px; height: 17px; accent-color: var(--primary); }

.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; flex: 1; }
.filters .form-group { margin: 0; }
.search-control { min-width: 250px; }

.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: 12px 14px; text-align: left; color: #64748b; font-size: 11px; letter-spacing: .55px; text-transform: uppercase; background: #f8fafc; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 14px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
.table tbody tr:hover { background: #fbfdff; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-user { display: flex; align-items: center; gap: 11px; }
.table-user strong { display: block; }
.table-user small { display: block; color: var(--muted); margin-top: 2px; }
.actions { display: flex; gap: 6px; justify-content: flex-end; }
.text-right { text-align: right !important; }
.text-muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.fw-bold { font-weight: 800; }

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-weight: 750; font-size: 11px; }
.badge-green { color: #15803d; background: #dcfce7; }
.badge-red { color: #b91c1c; background: #fee2e2; }
.badge-blue { color: #1d4ed8; background: #dbeafe; }
.badge-purple { color: #6d28d9; background: #ede9fe; }
.badge-slate { color: #475569; background: #e2e8f0; }
.badge-yellow { color: #a16207; background: #fef9c3; }

.alert { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 13px 15px; border-radius: 11px; border: 1px solid; }
.alert-success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.alert-danger { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.alert-warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.alert-info { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.alert-close { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; }

.avatar { flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #dbeafe, #bfdbfe); color: #1d4ed8; font-weight: 850; }
.avatar-sm { width: 36px; height: 36px; font-size: 12px; }
.avatar-lg { width: 76px; height: 76px; font-size: 23px; }

.chart-wrap { position: relative; min-height: 290px; }
#activityChart { width: 100%; height: 290px; display: block; }
.legend { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 12px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }

.activity-list { display: grid; gap: 0; }
.activity-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0f4; }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f1f5f9; color: #475569; }
.activity-copy strong { display: block; font-size: 13px; }
.activity-copy small { color: var(--muted); display: block; margin-top: 3px; }
.activity-time { color: var(--muted); font-size: 11px; white-space: nowrap; }

.pagination { display: flex; justify-content: flex-end; gap: 6px; padding: 14px 0 0; }
.page-link { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: #475569; }
.page-link:hover { border-color: #93c5fd; color: var(--primary); }
.page-link.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-link.disabled { pointer-events: none; opacity: .45; }

.empty-state { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty-state-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 16px; background: #f1f5f9; font-size: 22px; }

.profile-banner { height: 130px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, #1d4ed8, #60a5fa); }
.profile-summary { text-align: center; padding: 0 20px 24px; }
.profile-summary .avatar { margin: -38px auto 12px; border: 5px solid #fff; }
.profile-summary h3 { margin: 0 0 4px; }
.profile-summary p { margin: 0; color: var(--muted); }
.info-list { display: grid; gap: 10px; margin-top: 20px; text-align: left; }
.info-row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.info-row span:first-child { color: var(--muted); }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); background: #fff; }
.login-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; color: #fff; background: radial-gradient(circle at 20% 10%, rgba(96,165,250,.65), transparent 30%), linear-gradient(140deg, #0f172a 0%, #1d4ed8 62%, #3b82f6 100%); }
.login-visual::before, .login-visual::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.login-visual::before { width: 430px; height: 430px; right: -140px; top: 80px; }
.login-visual::after { width: 260px; height: 260px; right: 30px; top: 165px; }
.login-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; font-weight: 850; font-size: 20px; }
.login-copy { max-width: 520px; position: relative; z-index: 1; }
.login-copy h1 { margin: 0 0 18px; font-size: clamp(38px, 5vw, 62px); line-height: 1.02; letter-spacing: -2px; }
.login-copy p { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.7; color: #dbeafe; }
.login-features { display: flex; gap: 18px; flex-wrap: wrap; position: relative; z-index: 1; }
.login-feature { padding: 10px 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); border-radius: 999px; backdrop-filter: blur(8px); }
.login-panel { display: grid; place-items: center; padding: 40px; background: #fff; }
.login-card { width: 100%; max-width: 430px; }
.login-card h2 { margin: 0 0 8px; font-size: 29px; letter-spacing: -.7px; }
.login-card > p { margin: 0 0 28px; color: var(--muted); }
.password-wrap { position: relative; }
.password-wrap .form-control { padding-right: 52px; }
.password-toggle { position: absolute; inset: 6px 6px 6px auto; width: 39px; border: 0; border-radius: 8px; background: #f1f5f9; color: #64748b; }
.login-submit { width: 100%; min-height: 46px; margin-top: 8px; }
.login-help { margin-top: 22px; text-align: center; color: var(--muted); font-size: 12px; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.48); z-index: 950; }

@media (max-width: 1180px) {
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
    .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show { display: block; }
    .main-content { margin-left: 0; }
    #sidebarToggle { display: grid; }
    .login-page { grid-template-columns: 1fr; }
    .login-visual { display: none; }
}

@media (max-width: 680px) {
    .topbar { padding: 0 16px; }
    .page-content { padding: 18px 14px; }
    .footer { padding: 16px; flex-direction: column; align-items: flex-start; }
    .user-menu-name { display: none; }
    .page-heading { flex-direction: column; }
    .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .col-span-2 { grid-column: span 1; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .filters { flex-direction: column; align-items: stretch; }
    .filters .form-group, .search-control { width: 100%; min-width: 0; }
    .input-group { flex-direction: column; }
    .login-panel { padding: 30px 20px; }
    .hide-mobile { display: none; }
}

.col-span-3 { grid-column: span 3; }
.role-cards { align-items: stretch; }
.role-card { display: flex; flex-direction: column; }
.role-card .card-body { flex: 1; }
.role-description { min-height: 44px; line-height: 1.6; }
.role-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.role-stat-grid > div { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; }
.role-stat-grid strong { display: block; font-size: 22px; }
.role-stat-grid span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.role-system-note { margin: 16px 0 0; font-size: 12px; }
.permission-select-all { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.permission-groups { display: grid; gap: 22px; }
.permission-group { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.permission-group-title { padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid var(--border); font-weight: 800; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
.permission-item { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; padding: 14px; border-right: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; cursor: pointer; }
.permission-item:nth-child(2n) { border-right: 0; }
.permission-item strong { display: block; font-size: 13px; }
.permission-item small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.5; }
.permission-item code { font-size: 10px; color: #475569; }
.permission-item input { margin-top: 3px; }

@media (max-width: 680px) {
    .col-span-3 { grid-column: span 1; }
    .permission-grid { grid-template-columns: 1fr; }
    .permission-item { border-right: 0; }
}

/* Modul bisnis dan sidebar ringkas */
.sidebar { width: 232px; }
.main-content { margin-left: 232px; }
.sidebar-brand { height: 64px; padding: 0 16px; font-size: 16px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; }
.sidebar-nav { padding: 10px 9px; }
.nav-label { padding: 13px 10px 5px; font-size: 9px; letter-spacing: 1.15px; }
.nav-item { min-height: 37px; gap: 9px; padding: 7px 9px; margin: 2px 0; border-radius: 8px; font-size: 12.5px; }
.nav-icon { width: 19px; font-size: 14px; }
.sidebar-footer { padding: 9px; }
.sidebar-user { padding: 8px; border-radius: 9px; }
.sidebar-user-info strong { font-size: 12px; }
.sidebar-user-info small { font-size: 10px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-span-2 { grid-column: span 2; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.table-compact th { padding: 10px 11px; }
.table-compact td { padding: 11px; white-space: nowrap; }
.cell-limit { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.module-summary { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 920px) {
    .main-content { margin-left: 0; }
}

@media (max-width: 680px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-span-2 { grid-column: span 1; }
    .form-actions { justify-content: stretch; }
    .form-actions .btn { flex: 1; }
}
.stat-number.stat-money { font-size: clamp(18px, 2vw, 27px); letter-spacing: -.6px; }
.nav-item > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-note { display: block; max-width: 150px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }

/* Live search dan lookup 3 karakter */
.live-search-hint {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.live-lookup {
    position: relative;
    width: 100%;
    min-width: 150px;
}

.live-lookup-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border: 0 !important;
}

.live-lookup-input {
    width: 100%;
    min-height: 42px;
    padding: 9px 36px 9px 12px;
    border: 1px solid #d7dde7;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border .15s, box-shadow .15s;
}

.live-lookup-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

.live-lookup-input:disabled {
    color: #94a3b8;
    background: #f1f5f9;
    cursor: not-allowed;
}

.live-lookup::after {
    content: '⌕';
    position: absolute;
    top: 10px;
    right: 12px;
    color: #64748b;
    font-size: 16px;
    pointer-events: none;
}

.live-lookup-panel {
    display: none;
    position: absolute;
    z-index: 1200;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(15,23,42,.16);
}

.live-lookup-panel.show { display: block; }

.live-lookup-option {
    display: block;
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #1e293b;
    text-align: left;
    cursor: pointer;
}

.live-lookup-option:hover,
.live-lookup-option:focus,
.live-lookup-option.is-keyboard-active {
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
}

.live-lookup-message {
    padding: 11px;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

.document-items .live-lookup-input {
    min-width: 190px;
}

@media (max-width: 680px) {
    .live-lookup-panel { max-height: 220px; }
}


/* V2.7.3: hasil live search item transaksi tidak terpotong pada tabel desktop. */
@media (min-width: 901px) {
    .table-responsive:has(.document-items .live-lookup) {
        overflow: visible;
    }
}
.document-items .live-lookup-option {
    white-space: normal;
    line-height: 1.35;
}


/* V2.7.8 — tampilan changelog pada Pengaturan. */
.system-changelog {
    margin: 0;
    max-height: 420px;
    overflow: auto;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #334155;
    font-family: var(--jcom-default-font);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* V2.8.0 — informasi stok pada live search item penjualan. */
.document-items .stock-available {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}
.document-items .stock-available.text-danger {
    color: var(--danger);
}

.live-lookup-option.is-stock-available {
    font-weight: 600;
}
.live-lookup-option.is-stock-empty {
    color: #94a3b8;
    background: #f8fafc;
}
.live-lookup-option.is-stock-empty:hover,
.live-lookup-option.is-stock-empty:focus,
.live-lookup-option.is-stock-empty.is-keyboard-active {
    color: #b91c1c;
    background: #fef2f2;
}


/* V2.8.3 — Laporan Pembelian dan Penjualan. */
.report-period {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}
.statement {
    width: 100%;
    border-collapse: collapse;
}
.statement td {
    padding: 10px 4px;
    border-bottom: 1px dashed #dbe2ea;
}
.statement td:last-child {
    text-align: right;
    white-space: nowrap;
}
.statement .subtotal td {
    font-weight: 800;
    border-top: 2px solid #cbd5e1;
}
.statement .grand td {
    border-top: 2px solid #334155;
    border-bottom: 0;
    font-size: 17px;
    font-weight: 900;
}
@media print {
    .report-period {
        padding: 0 0 3mm;
        border: 0;
        background: transparent;
        color: #000;
    }
}

/* V2.8.3 - penyempurnaan tampilan Valuasi Stok. */
.stock-valuation-filter-card {
    margin-bottom: 14px;
}
.stock-valuation-period {
    margin: 0 0 14px;
    padding: 9px 13px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}
.stock-valuation-summary {
    margin-bottom: 18px;
}
.stock-valuation-ending-card {
    border-color: #94a3b8;
}
.stock-valuation-table-card {
    margin-bottom: 14px;
}
.stock-valuation-table-card .card-header small {
    display: block;
    margin-top: 3px;
    color: #64748b;
}
.stock-valuation-print-table {
    min-width: 1280px;
}
.stock-valuation-print-table .stock-valuation-group-row th {
    background: #e2e8f0;
    color: #334155;
    text-align: center;
}
.stock-valuation-print-table th:not(:first-child),
.stock-valuation-print-table td:not(:first-child) {
    text-align: right;
}
.stock-valuation-print-table thead tr:nth-child(2) th {
    text-align: center;
}
.stock-valuation-print-table tfoot th {
    font-weight: 900;
}
.stock-valuation-formula {
    margin-top: 14px;
}

/* V2.8.3 - pilihan checklist tunggal pada master data. */
.choice-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.choice-checklist-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid #d7dde7;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-weight: 700;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.choice-checklist-option:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.choice-checklist-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-checklist-mark {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: transparent;
    font-size: 13px;
    line-height: 1;
}

.choice-checklist-option:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
    color: #1d4ed8;
}

.choice-checklist-option:has(input:checked) .choice-checklist-mark {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.choice-checklist-option:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}

@media (max-width: 520px) {
    .choice-checklist {
        grid-template-columns: 1fr;
    }
}


/* Sidebar fly-out refinement V2.9.2 */
.sidebar {
    width: 190px;
    overflow: visible;
    background:
        radial-gradient(circle at 24px 38px, rgba(59,130,246,.12), transparent 145px),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
    box-shadow: 12px 0 32px rgba(15,23,42,.08);
}
.main-content { margin-left: 190px; }
.sidebar-brand {
    height: 54px;
    padding: 0 11px;
    gap: 8px;
    border-bottom-color: rgba(148,163,184,.12);
}
.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 8px 18px rgba(37,99,235,.28);
}
.brand-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    letter-spacing: -.1px;
}
.sidebar-footer { padding: 7px; }
.sidebar-user { gap: 7px; padding: 6px; border-radius: 8px; }
.sidebar-user .avatar-sm { width: 30px; height: 30px; font-size: 10px; }
.sidebar-user-info strong { font-size: 11px; }
.sidebar-user-info small { font-size: 9.5px; }
.sidebar-nav {
    position: relative;
    flex: 1;
    overflow: visible;
    padding: 7px 7px 9px;
}
.nav-dashboard,
.nav-parent {
    position: relative;
    min-height: 35px;
    border-radius: 8px;
}
.nav-dashboard {
    gap: 7px;
    padding: 6px 7px;
    margin: 1px 0 5px;
    font-size: 11.5px;
}
.nav-group {
    position: relative;
    margin: 1px 0;
}
.nav-parent {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #cbd5e1;
    text-align: left;
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.nav-parent .nav-icon,
.nav-dashboard .nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(148,163,184,.09);
    color: #cbd5e1;
    font-size: 11.5px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-dashboard:hover,
.nav-parent:hover,
.nav-parent:focus-visible,
.nav-group:focus-within > .nav-parent {
    background: rgba(255,255,255,.065);
    color: #fff;
    border-color: rgba(148,163,184,.08);
}
.nav-dashboard:hover .nav-icon,
.nav-parent:hover .nav-icon,
.nav-parent:focus-visible .nav-icon,
.nav-group:focus-within > .nav-parent .nav-icon {
    background: rgba(59,130,246,.18);
    color: #bfdbfe;
}
.nav-dashboard.active,
.nav-group.active > .nav-parent {
    background: linear-gradient(90deg, rgba(37,99,235,.22), rgba(37,99,235,.08));
    color: #fff;
    border-color: rgba(96,165,250,.2);
    box-shadow: inset 3px 0 0 #3b82f6;
}
.nav-dashboard.active .nav-icon,
.nav-group.active > .nav-parent .nav-icon {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 5px 12px rgba(37,99,235,.2);
}
.nav-parent:focus-visible,
.nav-dashboard:focus-visible {
    outline: 2px solid rgba(96,165,250,.72);
    outline-offset: 1px;
}
.nav-sub-badge { margin-left: auto; flex: 0 0 auto; }
.nav-parent-badge {
    margin-left: 6px;
    min-width: 21px;
    height: 20px;
    padding: 1px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(250,204,21,.28);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
.nav-group.active > .nav-parent .nav-parent-badge {
    color: #854d0e;
    background: #fef08a;
}


.nav-parent-label {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-chevron {
    width: 13px;
    flex: 0 0 13px;
    color: #64748b;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    transition: color .16s ease, transform .16s ease;
}
.nav-group:hover > .nav-parent .nav-chevron,
.nav-group:focus-within > .nav-parent .nav-chevron,
.nav-group.open > .nav-parent .nav-chevron {
    color: #bfdbfe;
    transform: translateX(2px);
}

/* Fly-out hanya untuk desktop dengan mouse. */
@media (hover: hover) and (pointer: fine) and (min-width: 921px) {
    .nav-submenu {
        --submenu-shift-y: 0px;
        position: absolute;
        z-index: 1200;
        left: calc(100% + 8px);
        top: var(--submenu-shift-y);
        width: 220px;
        padding: 7px;
        border: 1px solid rgba(148,163,184,.18);
        border-radius: 10px;
        background: rgba(15,23,42,.985);
        box-shadow: 0 18px 45px rgba(2,6,23,.28), 0 2px 8px rgba(2,6,23,.18);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-7px) scale(.985);
        transform-origin: left top;
        transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
    }
    .nav-submenu::before {
        content: '';
        position: absolute;
        left: -11px;
        top: 0;
        width: 12px;
        height: 100%;
    }
    .nav-submenu-title {
        padding: 4px 8px 7px;
        margin-bottom: 3px;
        border-bottom: 1px solid rgba(148,163,184,.12);
        color: #94a3b8;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    .nav-submenu-inner {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(148,163,184,.28) transparent;
    }
    .nav-group:hover > .nav-submenu,
    .nav-group:focus-within > .nav-submenu,
    .nav-group.open > .nav-submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0) scale(1);
        transition-delay: 0s;
    }
    .nav-subitem {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 33px;
        margin: 1px 0;
        padding: 6px 8px;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #cbd5e1;
        font-size: 11.5px;
        text-decoration: none;
        transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
    }
    .nav-subitem::before { display: none; }
    .nav-sub-dot {
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        border-radius: 50%;
        background: #475569;
        transition: background .14s ease, box-shadow .14s ease;
    }
    .nav-sub-label {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nav-subitem:hover,
    .nav-subitem:focus-visible {
        background: rgba(255,255,255,.07);
        border-color: rgba(148,163,184,.08);
        color: #fff;
        transform: translateX(2px);
        outline: none;
    }
    .nav-subitem:hover .nav-sub-dot,
    .nav-subitem:focus-visible .nav-sub-dot {
        background: #60a5fa;
    }
    .nav-subitem.active {
        background: rgba(37,99,235,.22);
        border-color: rgba(96,165,250,.2);
        color: #fff;
        font-weight: 750;
    }
    .nav-subitem.active .nav-sub-dot {
        background: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96,165,250,.16);
    }
    .nav-sub-badge {
        margin-left: auto;
        min-width: 20px;
        padding: 2px 6px;
        text-align: center;
    }
}

/* Tablet/mobile: submenu kembali menjadi accordion di dalam sidebar. */
@media (max-width: 920px), (hover: none) {
    .sidebar {
        width: 210px;
        overflow: hidden;
    }
    .main-content { margin-left: 0; }
    .sidebar-nav {
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 12px;
    }
    .nav-submenu {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        pointer-events: none;
        transition: grid-template-rows .18s ease, opacity .14s ease;
    }
    .nav-submenu-title { display: none; }
    .nav-submenu-inner {
        min-height: 0;
        overflow: hidden;
        padding: 0 0 0 10px;
    }
    .nav-subitem {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 31px;
        margin: 1px 0 1px 6px;
        padding: 5px 7px 5px 9px;
        border-radius: 7px;
        color: #94a3b8;
        font-size: 11.2px;
        text-decoration: none;
    }
    .nav-subitem::before {
        content: '';
        position: absolute;
        left: -9px;
        top: -7px;
        bottom: -7px;
        width: 1px;
        background: rgba(148,163,184,.18);
    }
    .nav-sub-dot {
        position: relative;
        z-index: 1;
        width: 5px;
        height: 5px;
        flex: 0 0 5px;
        border-radius: 50%;
        background: #64748b;
    }
    .nav-sub-label {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nav-subitem:hover,
    .nav-subitem:focus-visible {
        background: rgba(255,255,255,.07);
        color: #fff;
        outline: none;
    }
    .nav-subitem.active {
        background: rgba(37,99,235,.88);
        color: #fff;
        font-weight: 700;
    }
    .nav-subitem.active .nav-sub-dot { background: #fff; }
    .nav-group.open > .nav-submenu,
    .nav-group.active > .nav-submenu {
        grid-template-rows: 1fr;
        opacity: 1;
        pointer-events: auto;
    }
    .nav-group.open > .nav-parent .nav-chevron,
    .nav-group.active > .nav-parent .nav-chevron {
        transform: rotate(90deg);
        color: #bfdbfe;
    }
}

@media (max-height: 650px) and (min-width: 921px) {
    .sidebar-brand { height: 50px; }
    .sidebar-nav { padding-top: 7px; }
    .nav-dashboard, .nav-parent { min-height: 32px; }
    .nav-dashboard { margin-bottom: 4px; }
    .nav-parent { padding-top: 5px; padding-bottom: 5px; }
    .sidebar-footer { padding-top: 7px; padding-bottom: 7px; }
}


/* Master Data compact professional workspace V2.9.2 */
@media (min-width: 921px) {
    body.master-workspace {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }
    body.master-workspace .app-shell {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
    body.master-workspace .main-content {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
    body.master-workspace .topbar,
    body.master-workspace .footer {
        flex: 0 0 auto;
    }
    body.master-workspace .topbar {
        position: relative;
        top: auto;
        height: 56px;
        padding: 0 18px;
        box-shadow: 0 1px 0 rgba(15,23,42,.035);
    }
    body.master-workspace .topbar-left { gap: 10px; }
    body.master-workspace .topbar-title { font-size: 14px; }
    body.master-workspace .topbar-subtitle { font-size: 10.5px; }
    body.master-workspace .topbar-actions { gap: 7px; }
    body.master-workspace .topbar .icon-button { width: 34px; height: 34px; border-radius: 9px; }
    body.master-workspace .topbar .user-menu-button { padding: 3px 6px 3px 3px; }
    body.master-workspace .page-content {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding: 16px 18px 20px;
    }
    body.master-workspace .footer {
        min-height: 36px;
        padding: 8px 18px;
        font-size: 10.5px;
        background: rgba(255,255,255,.98);
    }
}

body.master-workspace .page-heading.master-page-heading {
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 0 1px;
}
body.master-workspace .master-heading-copy { min-width: 0; }
body.master-workspace .page-heading.master-page-heading h1 {
    margin-bottom: 2px;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.35px;
}
body.master-workspace .page-heading.master-page-heading p {
    max-width: 850px;
    font-size: 11.5px;
    line-height: 1.45;
}
body.master-workspace .breadcrumb {
    gap: 6px;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 650;
}
body.master-workspace .page-heading .action-bar { justify-content: flex-end; }
body.master-workspace .btn {
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 11.5px;
}
body.master-workspace .btn.btn-sm {
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 10.8px;
}
body.master-workspace .master-card {
    border-color: #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(15,23,42,.045);
    overflow: hidden;
}
body.master-workspace .master-card + .master-card { margin-top: 12px; }
body.master-workspace .master-card-header {
    min-height: 46px;
    padding: 9px 12px;
    gap: 10px;
    background: linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
body.master-workspace .master-card-header h2,
body.master-workspace .master-card-header h3 {
    font-size: 13px;
    letter-spacing: -.1px;
}
body.master-workspace .master-card-subtitle {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.35;
}
body.master-workspace .master-card .card-body { padding: 13px; }
body.master-workspace .master-form-card .doc-grid,
body.master-workspace .master-form-card .doc-grid-3 { gap: 11px 12px; }
body.master-workspace .master-form-card .field label {
    margin-bottom: 4px;
    font-size: 10.8px;
    font-weight: 720;
}
body.master-workspace .master-form-card .field input,
body.master-workspace .master-form-card .field select,
body.master-workspace .master-form-card .field textarea {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 11.5px;
}
body.master-workspace .master-form-card .field textarea { min-height: 68px; }
body.master-workspace .master-form-card .field small {
    margin-top: 3px;
    font-size: 9.8px;
    line-height: 1.35;
}
body.master-workspace .master-form-card .choice-checklist { gap: 7px; }
body.master-workspace .master-form-card .choice-checklist-option { min-height: 34px; padding: 6px 9px; }
body.master-workspace .master-filter-header {
    position: relative;
    flex-wrap: wrap;
}
body.master-workspace .master-filter-bar {
    flex: 1 1 420px;
    gap: 7px;
    align-items: center;
}
body.master-workspace .master-filter-bar input,
body.master-workspace .master-filter-bar select {
    min-height: 31px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11.2px;
}
body.master-workspace .master-filter-bar input[name="q"] { min-width: 250px; max-width: 420px; flex: 1 1 260px; }
body.master-workspace .master-record-count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    white-space: nowrap;
    font-size: 9.8px;
}
body.master-workspace .master-record-count strong { color: #0f172a; font-size: 11px; }
body.master-workspace .master-table-responsive {
    max-height: calc(100vh - 214px);
    overflow: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
body.master-workspace .master-form-card + .master-table-card .master-table-responsive {
    max-height: min(48vh, 520px);
}
body.master-workspace .master-table {
    font-size: 11.2px;
}
body.master-workspace .master-table th,
body.master-workspace .master-table td {
    padding: 7px 9px;
    line-height: 1.35;
    border-bottom-color: #edf2f7;
}
body.master-workspace .master-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8fafc;
    color: #475569;
    font-size: 9.7px;
    font-weight: 800;
    letter-spacing: .32px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}
body.master-workspace .master-table tbody tr { transition: background .12s ease; }
body.master-workspace .master-table tbody tr:hover { background: #f8fbff; }
body.master-workspace .master-table td > strong { color: #0f172a; font-weight: 720; }
body.master-workspace .master-table td .action-bar { flex-wrap: nowrap; gap: 5px; }
body.master-workspace .master-table .badge { font-size: 9.5px; }
body.master-workspace .empty-state { padding: 28px 12px; font-size: 11px; }
body.master-workspace .status-help {
    padding: 9px 11px;
    border-left-width: 3px;
    border-radius: 6px;
    font-size: 10.8px;
}
body.master-workspace .alert { padding: 9px 11px; margin-bottom: 10px; font-size: 11px; }

@media (max-width: 920px) {
    body.master-workspace .page-content { padding: 14px 12px 18px; }
    body.master-workspace .page-heading.master-page-heading { align-items: flex-start; flex-direction: column; }
    body.master-workspace .page-heading.master-page-heading .action-bar { width: 100%; justify-content: flex-start; }
    body.master-workspace .master-filter-header { align-items: stretch; }
    body.master-workspace .master-record-count { margin-left: auto; }
    body.master-workspace .master-filter-bar input[name="q"] { min-width: 160px; max-width: none; }
}

/* V2.9.2 - Global compact workspace: page title is represented by the fixed topbar. */
@media (min-width: 921px) {
    body.compact-workspace {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }
    body.compact-workspace .app-shell {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
    body.compact-workspace .main-content {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
    body.compact-workspace .topbar,
    body.compact-workspace .footer {
        flex: 0 0 auto;
    }
    body.compact-workspace .topbar {
        position: relative;
        top: auto;
        height: 52px;
        min-height: 52px;
        padding: 0 16px;
        box-shadow: 0 1px 0 rgba(15,23,42,.045);
    }
    body.compact-workspace .topbar-left { gap: 9px; }
    body.compact-workspace .topbar-title { font-size: 13px; letter-spacing: -.1px; }
    body.compact-workspace .topbar-subtitle { margin-top: 1px; font-size: 10px; }
    body.compact-workspace .topbar-actions { gap: 6px; }
    body.compact-workspace .topbar .icon-button { width: 32px; height: 32px; border-radius: 8px; }
    body.compact-workspace .topbar .user-menu-button { padding: 2px 5px 2px 2px; }
    body.compact-workspace .page-content {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding: 10px 14px 14px;
    }
    body.compact-workspace .footer {
        min-height: 32px;
        padding: 6px 14px;
        font-size: 9.8px;
        background: rgba(255,255,255,.98);
    }
}

/* Remove duplicated breadcrumb/title/description blocks; topbar keeps the page identity. */
body.compact-workspace .page-heading .breadcrumb,
body.compact-workspace .page-heading h1,
body.compact-workspace .page-heading p,
body.compact-workspace .page-heading .master-heading-copy {
    display: none !important;
}
body.compact-workspace .page-heading > div:first-child:has(> .breadcrumb, > h1),
body.compact-workspace .page-heading > .financial-report-heading:first-child {
    display: none !important;
}
body.compact-workspace .page-heading {
    min-height: 0;
    margin: 0 0 8px;
    padding: 0;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}
body.compact-workspace .page-heading:not(:has(> a, > button, > form, > .action-bar, > .input-group, > div.action-bar, > div.input-group)) {
    display: none !important;
}
body.compact-workspace .page-heading > .action-bar,
body.compact-workspace .page-heading > .input-group {
    margin-left: auto;
    justify-content: flex-end;
}

/* Compact visual density for all application pages. */
body.compact-workspace .grid { gap: 12px; }
body.compact-workspace .card {
    border-radius: 9px;
    box-shadow: 0 3px 14px rgba(15,23,42,.04);
}
body.compact-workspace .card-header {
    min-height: 42px;
    padding: 8px 11px;
    gap: 8px;
}
body.compact-workspace .card-header h2,
body.compact-workspace .card-header h3 { font-size: 12.5px; }
body.compact-workspace .card-body { padding: 11px; }
body.compact-workspace .card-footer { padding: 8px 11px; }
body.compact-workspace .btn {
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 7px;
    gap: 6px;
    font-size: 11px;
}
body.compact-workspace .btn.btn-sm {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10.3px;
}
body.compact-workspace .toolbar { gap: 8px; margin-bottom: 10px; }
body.compact-workspace .filters { gap: 7px; }
body.compact-workspace .form-group { margin-bottom: 10px; }
body.compact-workspace .form-label { margin-bottom: 4px; font-size: 10.8px; }
body.compact-workspace .form-control,
body.compact-workspace .form-select,
body.compact-workspace .field input,
body.compact-workspace .field select,
body.compact-workspace .field textarea,
body.compact-workspace .filter-bar input,
body.compact-workspace .filter-bar select {
    min-height: 33px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 11.2px;
}
body.compact-workspace textarea.form-control,
body.compact-workspace .field textarea { min-height: 64px; }
body.compact-workspace .field label { margin-bottom: 4px; font-size: 10.7px; }
body.compact-workspace .field small,
body.compact-workspace .form-hint,
body.compact-workspace .form-error { font-size: 9.7px; }
body.compact-workspace .doc-grid,
body.compact-workspace .doc-grid-3 { gap: 9px 10px; }
body.compact-workspace .filter-bar { gap: 7px; }
body.compact-workspace .table { font-size: 11px; }
body.compact-workspace .table th,
body.compact-workspace .table td {
    padding: 7px 9px;
    line-height: 1.3;
}
body.compact-workspace .table th {
    font-size: 9.5px;
    letter-spacing: .3px;
}
body.compact-workspace .badge { padding: 3px 7px; font-size: 9.5px; }
body.compact-workspace .alert {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 10.8px;
}
body.compact-workspace .stat-card { padding: 13px; }
body.compact-workspace .stat-icon { width: 36px; height: 36px; border-radius: 9px; font-size: 15px; }
body.compact-workspace .stat-number { margin: 10px 0 5px; font-size: 24px; }
body.compact-workspace .stat-label,
body.compact-workspace .stat-meta { font-size: 10.5px; }

/* Long tables scroll inside the content area while keeping column headings visible. */
@media (min-width: 921px) {
    body.compact-workspace .table-responsive {
        scrollbar-width: thin;
        /* V2.10.65: tahan overscroll horizontal tabel, tetapi jangan mengunci
           wheel/trackpad vertikal agar scroll dapat diteruskan ke page-content. */
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
    }
    body.compact-workspace .table-responsive .table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        box-shadow: inset 0 -1px 0 #e2e8f0;
    }
}

@media (max-width: 920px) {
    body.compact-workspace .page-content { padding: 10px 10px 14px; }
    body.compact-workspace .page-heading { justify-content: flex-start; flex-wrap: wrap; }
    body.compact-workspace .page-heading > .action-bar,
    body.compact-workspace .page-heading > .input-group { margin-left: 0; justify-content: flex-start; }
}

/* V2.9.2 - Konten tampil instan tanpa animasi/transisi. */
.page-content,
.page-content *,
.page-content *::before,
.page-content *::after {
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* Hindari gerakan tombol/baris saat hover di area konten. */
.page-content .btn:hover,
.page-content .btn:focus,
.page-content .btn:active,
.page-content .table tbody tr:hover,
.page-content .card:hover {
    transform: none !important;
}



/* V2.9.2 - Pilihan identitas/opsi tunggal dibuat statis tanpa animasi visual. */
.choice-checklist-option,
.choice-checklist-option:hover,
.choice-checklist-option:focus-within,
.choice-checklist-option:active,
.choice-checklist-mark,
.choice-checklist-label {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Bentuk radio compact/flat untuk Jenis ID NPWP/NIK dan checklist tunggal sejenis. */
.choice-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.choice-checklist-option {
    min-height: 30px;
    padding: 4px 9px;
    gap: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    box-shadow: none !important;
    cursor: pointer;
    font-weight: 650;
}
.choice-checklist-option:hover,
.choice-checklist-option:focus-within {
    border-color: #94a3b8;
    background: #fff;
    color: #334155;
    box-shadow: none !important;
}
.choice-checklist-mark {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 1.5px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    color: transparent !important;
    font-size: 0;
    box-shadow: none !important;
}
.choice-checklist-option:has(input:checked) {
    border-color: #64748b;
    background: #f8fafc;
    color: #0f172a;
    box-shadow: none !important;
}
.choice-checklist-option:has(input:checked) .choice-checklist-mark {
    border: 4px solid #334155;
    background: #fff;
    color: transparent !important;
    box-shadow: none !important;
}

/* Label Jenis ID pada daftar master dibuat flat/statis, bukan badge berwarna. */
.master-static-label {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    color: #334155;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .15px;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* V2.9.2 - Semua label data/status di area konten dibuat flat/plain text.
   Berlaku untuk Status UOM, Satuan Harga/Metode Pricelist, status transaksi,
   role, jenis identitas, metode, approval, payment/stock state, dan label sejenis.
   Badge notifikasi sidebar sengaja tidak ikut karena berada di luar .page-content. */
.page-content .badge,
.page-content [class*="badge-"],
.page-content .master-static-label,
.page-content .identity-type-label,
.page-content .plain-data-label,
.page-content .status-label,
.page-content .pill,
.page-content .chip {
    display: inline !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 650 !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
}

/* Hilangkan pseudo-element dekoratif dari label data bila ada. */
.page-content .badge::before,
.page-content .badge::after,
.page-content .master-static-label::before,
.page-content .master-static-label::after,
.page-content .identity-type-label::before,
.page-content .identity-type-label::after,
.page-content .pill::before,
.page-content .pill::after,
.page-content .chip::before,
.page-content .chip::after {
    content: none !important;
    display: none !important;
}

/* V2.10.4 - Responsive Stock Valuation Report */
.stock-valuation-filter-card .card-body {
    padding: 16px 18px;
}
.stock-valuation-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(170px, 220px)) auto;
    gap: 10px;
    align-items: end;
}
.stock-valuation-filter label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
}
.stock-valuation-filter input {
    width: 100%;
    min-width: 0;
}
.stock-valuation-period {
    margin: 14px 0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.stock-valuation-summary {
    margin-bottom: 18px;
}
.stock-valuation-summary .stat-card {
    min-width: 0;
}
.stock-valuation-summary .stat-number {
    font-size: clamp(20px, 2.15vw, 29px);
    overflow-wrap: anywhere;
}
.stock-valuation-table-card {
    min-width: 0;
    overflow: hidden;
}
.stock-valuation-table-card > .card-header {
    flex-wrap: wrap;
}
.stock-valuation-table-card > .card-header > div {
    min-width: 0;
}
.stock-valuation-table-card > .card-header small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}
.stock-valuation-scroll-hint {
    display: none;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
}
.stock-valuation-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
.stock-valuation-table-wrap:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: -2px;
}
.stock-valuation-print-table {
    min-width: 1180px;
    table-layout: auto;
}
.stock-valuation-print-table th,
.stock-valuation-print-table td {
    padding-left: 10px;
    padding-right: 10px;
}
.stock-valuation-print-table th:not(:first-child),
.stock-valuation-print-table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}
.stock-valuation-print-table th:first-child,
.stock-valuation-print-table td:first-child {
    min-width: 220px;
    max-width: 300px;
    white-space: normal;
}
.stock-valuation-print-table td:first-child strong,
.stock-valuation-print-table td:first-child small {
    display: block;
    overflow-wrap: anywhere;
}
.stock-valuation-print-table td:first-child small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}
@media screen and (min-width: 681px) {
    .stock-valuation-print-table th:first-child,
    .stock-valuation-print-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 1px 0 0 var(--border);
    }
    .stock-valuation-print-table thead th:first-child {
        z-index: 4;
        background: #f8fafc;
    }
    .stock-valuation-print-table tbody td:first-child {
        background: var(--surface);
    }
    .stock-valuation-print-table tbody tr:hover td:first-child {
        background: #fbfdff;
    }
    .stock-valuation-print-table tfoot th:first-child {
        z-index: 3;
        background: #f8fafc;
    }
}
@media screen and (max-width: 1024px) {
    .stock-valuation-scroll-hint {
        display: block;
    }
    .stock-valuation-print-table {
        min-width: 1080px;
    }
}
@media screen and (max-width: 680px) {
    .stock-valuation-filter-card .card-body {
        padding: 13px;
    }
    .stock-valuation-filter {
        grid-template-columns: 1fr;
    }
    .stock-valuation-filter-submit {
        width: 100%;
    }
    .stock-valuation-period {
        margin: 10px 0 12px;
        font-size: 11px;
    }
    .stock-valuation-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 12px;
    }
    .stock-valuation-summary .stat-card {
        padding: 13px;
    }
    .stock-valuation-summary .stat-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 13px;
    }
    .stock-valuation-summary .stat-label {
        font-size: 11px;
    }
    .stock-valuation-summary .stat-number {
        margin: 11px 0 5px;
        font-size: clamp(16px, 4.6vw, 21px);
        letter-spacing: -.4px;
    }
    .stock-valuation-summary .stat-meta {
        font-size: 10px;
    }
    .stock-valuation-table-card > .card-header {
        padding: 13px 14px;
    }
    .stock-valuation-table-card > .card-header h2 {
        font-size: 14px;
    }
    .stock-valuation-scroll-hint {
        padding: 7px 12px;
        font-size: 10px;
    }
    .stock-valuation-print-table {
        min-width: 1040px;
    }
    .stock-valuation-print-table th,
    .stock-valuation-print-table td {
        padding: 9px 8px;
        font-size: 11px;
    }
    .stock-valuation-print-table th:first-child,
    .stock-valuation-print-table td:first-child {
        min-width: 190px;
        max-width: 220px;
    }
    .stock-valuation-formula {
        font-size: 11px;
        line-height: 1.55;
    }
}
@media screen and (max-width: 430px) {
    .stock-valuation-summary {
        grid-template-columns: 1fr;
    }
}


/* V2.10.18 — Notifikasi pending Pembelian/Penjualan per role. */
.notification-menu { position: relative; }
.notification-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
.notification-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(360px, calc(100vw - 24px));
    display: none;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15,23,42,.14);
    z-index: 90;
}
.notification-dropdown.show { display: block; }
.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
}
.notification-dropdown-header strong,
.notification-dropdown-header small { display: block; }
.notification-dropdown-header small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.notification-list { max-height: min(420px, 65vh); overflow-y: auto; padding: 6px; }
.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 9px;
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
}
.notification-item:hover { background: #f8fafc; }
.notification-item-copy { min-width: 0; }
.notification-item-copy strong,
.notification-item-copy small { display: block; }
.notification-item-copy strong { font-size: 13px; line-height: 1.35; }
.notification-item-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.notification-empty { padding: 18px 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 520px) {
    .notification-dropdown { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; }
}

/* V2.10.19 — Template cetak Purchase Order gaya referensi portrait. CSS cetak utama ada di print.css. */


/* V2.10.38 - Popup message box proses */
.process-message-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .44);
    opacity: 0;
    transition: opacity .12s ease;
}
.process-message-overlay[hidden] { display: none !important; }
.process-message-overlay.show { opacity: 1; }
.process-message-box {
    position: relative;
    width: min(520px, 100%);
    max-height: min(78vh, 640px);
    overflow: auto;
    background: #fff;
    color: #111827;
    border: 1px solid #d7dde5;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    padding: 24px 24px 20px;
    transform: translateY(8px) scale(.985);
    transition: transform .12s ease;
}
.process-message-overlay.show .process-message-box { transform: translateY(0) scale(1); }
.process-message-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #4b5563;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}
.process-message-close:hover { background: #f3f4f6; color: #111827; }
.process-message-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border: 2px solid #64748b;
    border-radius: 50%;
    color: #334155;
    font-size: 24px;
    font-weight: 800;
}
.process-message-box[data-type="success"] .process-message-icon { border-color: #15803d; color: #15803d; }
.process-message-box[data-type="error"] .process-message-icon { border-color: #b91c1c; color: #b91c1c; }
.process-message-box[data-type="warning"] .process-message-icon { border-color: #a16207; color: #a16207; }
.process-message-box[data-type="info"] .process-message-icon { border-color: #1d4ed8; color: #1d4ed8; }
.process-message-title {
    margin: 0 42px 8px 0;
    color: #111827;
    font-size: 20px;
    line-height: 1.25;
}
.process-message-text {
    color: #374151;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.process-message-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}
.process-message-actions .btn { min-width: 88px; }
@media (max-width: 560px) {
    .process-message-overlay { padding: 12px; }
    .process-message-box { padding: 20px 18px 16px; border-radius: 12px; }
    .process-message-title { font-size: 18px; }
    .process-message-text { font-size: 13px; }
}
@media print {
    .process-message-overlay { display: none !important; }
}


/* V2.10.48 - Readable transaction document content (view)
 * Membesarkan isi data hanya pada 6 halaman detail transaksi.
 * Sidebar, heading, tombol, ukuran card, dan struktur/layout tetap sama. */
body.document-detail-view .card-body {
    font-size: 13.5px;
    line-height: 1.48;
}
body.document-detail-view .detail-item small {
    font-size: 11.5px;
    line-height: 1.35;
}
body.document-detail-view .detail-item strong {
    font-size: 13.5px;
    line-height: 1.45;
}
body.document-detail-view .table {
    font-size: 13px;
    line-height: 1.42;
}
body.document-detail-view .table th {
    font-size: 10.5px;
    line-height: 1.3;
}
body.document-detail-view .table td {
    font-size: 13px;
    line-height: 1.42;
}
body.document-detail-view .table td small,
body.document-detail-view .table td .cell-note {
    font-size: 11.5px;
    line-height: 1.35;
}
body.document-detail-view .document-summary,
body.document-detail-view .summary-row {
    font-size: 13px;
    line-height: 1.42;
}
body.document-detail-view .summary-row.total {
    font-size: 14px;
}
body.document-detail-view .status-help,
body.document-detail-view .preserve-lines {
    font-size: 13px;
    line-height: 1.48;
}
body.document-detail-view .document-company-view-card .detail-item small {
    font-size: 11.5px;
}
body.document-detail-view .document-company-view-card .detail-item strong {
    font-size: 13.5px;
}


/* V2.10.57 - Professional system actions and buttons */
.btn {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
    transform: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: none; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.btn-primary { box-shadow: none; }
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.btn-success:hover { background: #dcfce7; border-color: #86efac; }
.btn-danger:hover { background: #ffe4e6; border-color: #fda4af; }
.btn-warning { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.btn-warning:hover { background: #fef3c7; border-color: #f59e0b; color: #78350f; }
.btn-ghost { background: transparent; color: #475569; border-color: transparent; }
.btn-ghost:hover { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; }
.btn[disabled], .btn.disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-sm { min-height: 32px; padding: 6px 10px; border-radius: 7px; font-size: 12px; }

.page-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.action-bar.action-bar-professional { gap:8px; }
.actions { align-items:center; flex-wrap:wrap; }
.actions form { margin:0; }

.system-action-panel { margin-bottom: 20px; }
.system-action-panel-header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:10px; }
.system-action-panel-header h2 { margin:0 0 4px; font-size:15px; color:#0f172a; }
.system-action-panel-header p { margin:0; color:var(--muted); font-size:12px; }
.system-action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.system-action-card {
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:112px;
    padding:14px 38px 14px 15px;
    border:1px solid #dfe5ec;
    border-radius:10px;
    background:#fff;
    color:#0f172a;
    box-shadow:0 1px 2px rgba(15,23,42,.035);
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.system-action-card:hover { border-color:#bfdbfe; background:#fbfdff; box-shadow:0 4px 12px rgba(15,23,42,.06); }
.system-action-card:focus-visible { outline:0; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.system-action-card::after { content:'›'; position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:24px; font-weight:400; }
.system-action-kicker { margin-bottom:7px; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.system-action-title { display:block; margin-bottom:5px; font-size:14px; font-weight:800; line-height:1.25; }
.system-action-desc { color:#64748b; font-size:11.5px; line-height:1.45; }

.system-maintenance { margin-top:10px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; overflow:hidden; }
.system-maintenance > summary { list-style:none; cursor:pointer; padding:11px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:750; color:#334155; user-select:none; }
.system-maintenance > summary::-webkit-details-marker { display:none; }
.system-maintenance > summary::after { content:'+'; color:#94a3b8; font-size:18px; font-weight:500; }
.system-maintenance[open] > summary::after { content:'−'; }
.system-maintenance[open] > summary { border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.system-maintenance-summary-note { color:#94a3b8; font-size:11px; font-weight:600; margin-left:auto; }
.system-maintenance-body { padding:12px 14px 14px; }
.maintenance-actions { display:flex; flex-wrap:wrap; gap:7px; }
.maintenance-actions .btn { min-height:32px; padding:6px 10px; font-size:11.5px; font-weight:650; }

.backup-row-actions { justify-content:flex-start; flex-wrap:nowrap; }
.backup-row-actions .btn { white-space:nowrap; }

@media (max-width:1180px) {
    .system-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
    .page-actions { width:100%; justify-content:flex-start; }
    .system-action-panel-header { align-items:flex-start; flex-direction:column; }
    .system-action-grid { grid-template-columns:1fr; }
    .system-action-card { min-height:auto; }
    .maintenance-actions .btn { width:100%; justify-content:flex-start; }
    .backup-row-actions { flex-wrap:wrap; }
}

/* ======================================================================
 * V2.10.58 — Professional Role & Permission Workspace
 * Merapikan Manajemen Sistem > Role & Permission tanpa mengubah backend.
 * ====================================================================== */
.role-page-heading,
.role-editor-heading { margin-bottom: 16px; }
.role-page-heading h1,
.role-editor-heading h1 { font-size: 22px; }
.role-page-heading p,
.role-editor-heading p { max-width: 720px; font-size: 12px; line-height: 1.55; }

.role-sync-alert { align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.role-sync-alert small { color: inherit; opacity: .82; }

.role-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.role-summary-card {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.role-summary-card > span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}
.role-summary-card strong {
    display: block;
    color: #0f172a;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.5px;
}
.role-summary-card small { display: block; margin-top: 6px; color: #94a3b8; font-size: 10.5px; }

.role-management-card { overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
body.compact-workspace .role-management-card .card-header,
.role-management-header { padding: 13px 15px; }
.role-management-header h2 { font-size: 14px !important; }
.role-management-header small { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; }
.role-count-label {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: 10.5px;
    font-weight: 750;
    white-space: nowrap;
}
.role-table-wrap { width: 100%; overflow-x: auto; }
body.compact-workspace .role-management-table,
.role-management-table { width: 100%; margin: 0; font-size: 11.5px; }
body.compact-workspace .role-management-table th,
body.compact-workspace .role-management-table td,
.role-management-table th,
.role-management-table td { padding: 11px 13px; vertical-align: middle; }
.role-management-table thead th {
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .42px;
    text-transform: uppercase;
    white-space: nowrap;
}
.role-management-table tbody tr:last-child td { border-bottom: 0; }
.role-management-table tbody tr:hover { background: #fbfdff; }
.role-name-cell { min-width: 245px; }
.role-name-cell strong { display: block; color: #0f172a; font-size: 12.5px; font-weight: 800; }
.role-name-cell span {
    display: block;
    max-width: 440px;
    margin-top: 3px;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.4;
    white-space: normal;
}
.role-name-cell code {
    display: inline-block;
    margin-top: 5px;
    padding: 1px 5px;
    border-radius: 4px;
    color: #64748b;
    background: #f1f5f9;
    font-size: 9.5px;
}
.role-user-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    background: #fff;
    font-weight: 800;
}
.role-access-cell { min-width: 150px; }
.role-access-line { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.role-access-line strong { color: #0f172a; font-size: 12px; }
.role-access-line span { color: #64748b; font-size: 10px; }
.role-access-progress { width: 120px; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #e2e8f0; }
.role-access-progress span { display: block; height: 100%; border-radius: inherit; background: #3b82f6; }
.role-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: 9.5px;
    font-weight: 800;
}
.role-type-system { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.role-row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.role-row-actions form { margin: 0; }

.role-editor-layout {
    display: grid;
    grid-template-columns: minmax(275px, 320px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.role-editor-sidebar { display: grid; gap: 14px; }
.role-info-card,
.dashboard-access-card,
.permission-manager-card { overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
body.compact-workspace .role-info-card .card-header,
body.compact-workspace .dashboard-access-card .card-header { padding: 12px 14px; }
body.compact-workspace .role-info-card .card-body,
body.compact-workspace .dashboard-access-card .card-body { padding: 14px; }
.role-info-card .card-header h2,
.dashboard-access-card .card-header h2 { font-size: 13.5px !important; }
.role-info-card .card-header small,
.dashboard-access-card .card-header small { font-size: 10px; }
.role-info-card .form-group { margin-bottom: 13px; }
.role-info-card .form-group:last-child { margin-bottom: 0; }
.role-info-card .form-label { margin-bottom: 5px; font-size: 10.5px; font-weight: 800; color: #334155; }
.role-info-card .form-control,
.role-info-card .form-select { min-height: 36px; padding: 7px 9px; font-size: 11.5px; }
.role-info-card textarea.form-control { min-height: 78px; resize: vertical; }
.role-info-card .form-hint { margin-top: 4px; font-size: 9.5px; line-height: 1.4; }
.required-mark { color: #dc2626; }
.role-locked-note {
    display: grid;
    gap: 3px;
    margin-top: 6px;
    padding: 10px 11px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}
.role-locked-note strong { color: #1d4ed8; font-size: 10.5px; }
.role-locked-note span { color: #475569; font-size: 9.8px; line-height: 1.45; }
.role-compact-alert { padding: 9px 10px; margin: 0 0 10px; font-size: 9.8px; line-height: 1.45; }
.dashboard-widget-list { display: grid; gap: 11px; }
.dashboard-widget-group { display: grid; gap: 5px; }
.dashboard-widget-group + .dashboard-widget-group { padding-top: 10px; border-top: 1px solid #eef2f7; }
.dashboard-widget-group-title { color: #64748b; font-size: 9.5px; font-weight: 850; letter-spacing: .4px; text-transform: uppercase; }
.dashboard-widget-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 28px;
    padding: 5px 6px;
    border-radius: 6px;
    color: #334155;
    font-size: 10.5px;
    line-height: 1.4;
    cursor: pointer;
}
.dashboard-widget-option:hover { background: #f8fafc; }
.dashboard-widget-option input { margin-top: 2px; }

.permission-manager-card { min-width: 0; }
.permission-manager-top { padding: 14px 15px 12px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.permission-manager-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.permission-manager-title h2 { margin: 0; color: #0f172a; font-size: 15px; }
.permission-manager-title p { margin: 3px 0 0; color: #64748b; font-size: 10.5px; line-height: 1.45; }
.permission-selected-summary { flex: 0 0 auto; min-width: 86px; text-align: right; }
.permission-selected-summary strong { display: block; color: #2563eb; font-size: 20px; line-height: 1; }
.permission-selected-summary span { display: block; margin-top: 4px; color: #64748b; font-size: 9.5px; }
.permission-error-alert { margin: 11px 0 0; }
.permission-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.permission-search-wrap { position: relative; flex: 1; min-width: 0; }
.permission-search-wrap .form-control { min-height: 34px; padding-left: 31px; font-size: 10.8px; }
.permission-search-icon { position: absolute; z-index: 1; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 16px; line-height: 1; pointer-events: none; }
.permission-select-all-pro {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #dbe3ee;
    border-radius: 7px;
    color: #334155;
    background: #f8fafc;
    font-size: 10.5px;
}
.permission-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.permission-quick-actions > span { margin-right: 2px; color: #64748b; font-size: 9.8px; font-weight: 750; }
.permission-quick-actions .btn { min-height: 28px; padding: 4px 8px; font-size: 9.8px; }
.permission-policy-note {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    padding: 9px 15px;
    border-bottom: 1px solid #dbeafe;
    color: #475569;
    background: #f8fbff;
    font-size: 9.8px;
    line-height: 1.45;
}
.permission-policy-note strong { color: #1e40af; white-space: nowrap; }
body.compact-workspace .permission-groups-pro,
.permission-groups-pro { display: grid; gap: 10px; padding: 12px; background: #f8fafc; }
.permission-module {
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 9px;
    background: #fff;
}
.permission-module[hidden], .permission-item-pro[hidden] { display: none !important; }
.permission-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 8px 11px;
    border-bottom: 1px solid #e8edf3;
    background: #fbfcfe;
}
.permission-module-heading { min-width: 0; }
.permission-module-heading strong { display: block; color: #0f172a; font-size: 11.5px; }
.permission-module-heading span { display: block; margin-top: 2px; color: #94a3b8; font-size: 9px; }
.permission-module-select { display: inline-flex; align-items: center; gap: 6px; color: #475569; font-size: 9.5px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.permission-grid-pro { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.permission-item-pro {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    gap: 8px;
    min-height: 66px;
    padding: 10px 11px;
    border: 0;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
    cursor: pointer;
}
.permission-item-pro:nth-child(2n) { border-right: 0; }
.permission-item-pro:hover { background: #fbfdff; }
.permission-item-pro:has(input:checked) { background: #f7fbff; }
.permission-item-pro input { margin-top: 2px; accent-color: #2563eb; }
.permission-item-copy { min-width: 0; }
.permission-item-copy strong { display: block; color: #1e293b; font-size: 10.8px; font-weight: 800; line-height: 1.35; }
.permission-item-copy small { display: block; margin-top: 3px; color: #64748b; font-size: 9.4px; line-height: 1.38; }
.permission-item-copy code {
    display: inline-block;
    max-width: 100%;
    margin-top: 5px;
    overflow: hidden;
    color: #64748b;
    font-size: 8.7px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.permission-empty-state { padding: 30px 16px; border: 1px dashed #cbd5e1; border-radius: 9px; color: #64748b; background: #fff; text-align: center; font-size: 10.5px; }
body.compact-workspace .permission-manager-card .card-footer,
.role-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    background: #fff;
}
.role-editor-save-note { color: #94a3b8; font-size: 9.5px; }
.role-editor-actions .action-bar { display: flex; gap: 7px; }
.role-editor-actions .btn { min-height: 32px; }

@media (max-width: 1180px) {
    .role-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .role-editor-layout { grid-template-columns: 270px minmax(0,1fr); }
}
@media (max-width: 920px) {
    .role-editor-layout { grid-template-columns: 1fr; }
    .role-editor-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .role-summary-grid { grid-template-columns: 1fr 1fr; }
    .role-editor-sidebar { grid-template-columns: 1fr; }
    .permission-grid-pro { grid-template-columns: 1fr; }
    .permission-item-pro { border-right: 0; }
    .permission-toolbar { align-items: stretch; flex-direction: column; }
    .permission-select-all-pro { justify-content: flex-start; }
    .permission-manager-title { align-items: flex-start; }
    .permission-policy-note { grid-template-columns: 1fr; gap: 3px; }
    .permission-module-header { align-items: flex-start; }
    .role-editor-actions { align-items: stretch; flex-direction: column; }
    .role-editor-actions .action-bar { justify-content: flex-end; }
    .role-editor-save-note { order: 2; }
}
@media (max-width: 520px) {
    .role-summary-grid { grid-template-columns: 1fr; }
    .role-sync-alert { align-items: stretch; flex-direction: column; }
    .role-sync-alert .btn { width: 100%; }
    .permission-selected-summary { min-width: auto; }
}

/* V2.10.59 - Professional Role Form */
.role-form-heading { align-items: flex-end; margin-bottom: 14px; }
.role-form-title-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.role-form-title-row > div { min-width: 0; }
.role-form-title-row h1 { margin-bottom: 3px; }
.role-form-title-row p { max-width: 760px; margin-bottom: 0; }
.role-form-mode-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .15px;
    white-space: nowrap;
}
.role-form-mode-badge.is-system { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.role-form-mode-badge.is-custom { color: #475569; border-color: #dbe3ee; background: #fff; }

.role-form-overview {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.035);
}
.role-form-overview-item {
    position: relative;
    min-width: 0;
    padding: 12px 14px;
}
.role-form-overview-item + .role-form-overview-item { border-left: 1px solid #edf1f5; }
.role-form-overview-label {
    display: block;
    margin-bottom: 5px;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .55px;
    text-transform: uppercase;
}
.role-form-overview-item strong { display: block; color: #0f172a; font-size: 12.5px; line-height: 1.2; }
.role-form-overview-item strong em { color: #94a3b8; font-size: 10px; font-style: normal; font-weight: 700; }
.role-form-overview-item small { display: block; margin-top: 4px; overflow: hidden; color: #64748b; font-size: 9.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.role-form-status-value.is-active { color: #15803d; }
.role-form-status-value.is-inactive { color: #b45309; }

.role-form-layout-pro { grid-template-columns: minmax(320px,350px) minmax(0,1fr); gap: 16px; }
.role-form-sidebar-pro { gap: 16px; }
.role-form-card-pro,
.permission-manager-card-pro { border-color: #dfe6ef; border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,.045); }
.role-form-card-header { align-items: flex-start; padding: 15px 16px !important; background: #fff; }
.role-form-card-header > div { min-width: 0; }
.role-form-card-header h2 { margin: 2px 0 0; color: #0f172a; font-size: 14px !important; line-height: 1.3; }
.role-form-card-header small { display: block; margin-top: 4px; color: #64748b; font-size: 10px !important; line-height: 1.45; }
.role-form-eyebrow { display: block; color: #94a3b8; font-size: 8.5px; font-weight: 900; letter-spacing: .65px; text-transform: uppercase; }
.role-form-fields { padding: 16px !important; }
.role-form-fields .role-field-block { margin: 0; padding: 0 0 15px; }
.role-form-fields .role-field-block + .role-field-block { padding-top: 15px; border-top: 1px solid #f0f3f7; }
.role-form-fields .role-field-block:last-of-type { padding-bottom: 0; }
.role-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.role-info-card .role-field-label-row .form-label { margin: 0; color: #1e293b; font-size: 11px; font-weight: 800; }
.role-field-meta { color: #94a3b8; font-size: 8.8px; font-weight: 750; white-space: nowrap; }
.role-form-fields .form-control,
.role-form-fields .form-select {
    width: 100%;
    min-height: 39px;
    padding: 8px 10px;
    border-color: #cfd8e4;
    border-radius: 7px;
    color: #0f172a;
    background-color: #fff;
    font-size: 11.5px;
    line-height: 1.35;
    box-shadow: none;
}
.role-form-fields .form-control:focus,
.role-form-fields .form-select:focus { border-color: #93b4e8; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.role-form-fields textarea.form-control { min-height: 96px; padding-top: 9px; resize: vertical; }
.role-form-fields .form-control[readonly] { color: #64748b; background: #f8fafc; }
.role-form-fields .form-hint { margin-top: 5px; color: #64748b; font-size: 9.4px; line-height: 1.45; }
.role-field-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.role-field-footer .form-hint { flex: 1; }
.role-char-count { flex: 0 0 auto; margin-top: 5px; color: #94a3b8; font-size: 8.8px; font-variant-numeric: tabular-nums; }
.role-slug-control { display: flex; align-items: stretch; }
.role-slug-prefix {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 9px;
    border: 1px solid #cfd8e4;
    border-right: 0;
    border-radius: 7px 0 0 7px;
    color: #64748b;
    background: #f8fafc;
    font-family: var(--jcom-default-font);
    font-size: 9.5px;
}
.role-slug-control .form-control { border-radius: 0 7px 7px 0; font-family: var(--jcom-default-font); font-size: 10.5px; }
.role-status-field { padding-bottom: 0 !important; }
.role-locked-note-pro { grid-template-columns: 36px minmax(0,1fr); align-items: start; gap: 10px; margin-top: 15px; padding: 11px; }
.role-lock-mark { display: flex; align-items: center; justify-content: center; width: 34px; height: 28px; border: 1px solid #bfdbfe; border-radius: 6px; color: #1d4ed8; background: #fff; font-size: 8px; font-weight: 900; letter-spacing: .5px; }
.role-locked-note-pro > div:last-child { display: grid; gap: 3px; }

.role-dashboard-counter {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 46px;
    padding: 5px 7px;
    border: 1px solid #dbe3ee;
    border-radius: 7px;
    color: #64748b;
    background: #f8fafc;
    font-size: 9px;
    font-weight: 750;
}
.role-dashboard-counter b { margin-right: 2px; color: #2563eb; font-size: 12px; }
.dashboard-widget-list-pro { gap: 13px; padding: 14px 16px 16px !important; }
.dashboard-widget-options-pro { display: grid; gap: 5px; }
.dashboard-widget-option-pro {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #334155;
    background: #fff;
    font-size: 10.5px;
    line-height: 1.35;
}
.dashboard-widget-option-pro:hover { border-color: #e2e8f0; background: #fbfdff; }
.dashboard-widget-option-pro:has(input:checked) { border-color: #dbeafe; background: #f8fbff; }
.dashboard-widget-option-pro input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dashboard-widget-check {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 1.5px solid #b8c4d3;
    border-radius: 4px;
    background: #fff;
}
.dashboard-widget-option-pro input:checked + .dashboard-widget-check { border-color: #2563eb; background: #2563eb; }
.dashboard-widget-option-pro input:checked + .dashboard-widget-check::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dashboard-widget-option-pro input:disabled + .dashboard-widget-check { opacity: .75; }

.role-permission-panel-pro { min-width: 0; }
.permission-manager-top-pro { padding: 16px 17px 14px; }
.permission-manager-title-pro { gap: 22px; }
.permission-manager-title-pro h2 { margin-top: 2px; font-size: 15px; }
.permission-manager-title-pro p { max-width: 670px; margin-top: 5px; font-size: 10.2px; }
.permission-selected-summary-pro {
    min-width: 108px;
    padding: 8px 10px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fbff;
    text-align: center;
}
.permission-selected-summary-pro strong { font-size: 21px; }
.permission-selected-summary-pro span { margin-top: 3px; font-size: 8.8px; white-space: nowrap; }
.permission-toolbar-pro { margin-top: 14px; }
.permission-toolbar-pro .permission-search-wrap .form-control { min-height: 38px; padding: 8px 11px 8px 35px; border-radius: 7px; font-size: 10.8px; }
.permission-search-icon { left: 12px; width: 12px; height: 12px; border: 1.5px solid #94a3b8; border-radius: 50%; }
.permission-search-icon::after { content: ''; position: absolute; width: 5px; height: 1.5px; right: -4px; bottom: -2px; background: #94a3b8; transform: rotate(45deg); border-radius: 2px; }
.permission-select-all-control { min-height: 38px; padding: 7px 11px; border-radius: 7px; font-size: 10.3px; }
.permission-quick-actions-pro { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px 10px; margin-top: 12px; }
.permission-quick-label { color: #64748b; font-size: 9.3px; font-weight: 800; }
.permission-quick-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.permission-quick-buttons .btn { min-height: 29px; padding: 4px 8px; }
.permission-policy-note-pro { padding: 10px 17px; font-size: 9.6px; }
.permission-groups-v21059 { gap: 12px; padding: 14px !important; }
.permission-module-pro { border-color: #dfe6ef; border-radius: 9px; box-shadow: 0 1px 1px rgba(15,23,42,.018); }
.permission-module-header-pro { min-height: 46px; padding: 9px 12px; background: #fbfcfe; }
.permission-module-heading-pro strong { font-size: 11.8px; }
.permission-module-heading-pro span { margin-top: 3px; font-size: 9px; }
.permission-module-select-pro { padding: 4px 6px; border-radius: 6px; font-size: 9.3px; }
.permission-module-select-pro:hover { background: #f1f5f9; }
.permission-grid-v21059 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
.permission-item-v21059 {
    position: relative;
    grid-template-columns: 20px minmax(0,1fr);
    gap: 9px;
    min-height: 74px;
    padding: 11px 12px;
    transition: background-color .12s ease,border-color .12s ease;
}
.permission-item-v21059 input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.permission-item-indicator {
    position: relative;
    display: block;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border: 1.5px solid #b8c4d3;
    border-radius: 4px;
    background: #fff;
}
.permission-item-v21059 input:checked + .permission-item-indicator { border-color: #2563eb; background: #2563eb; }
.permission-item-v21059 input:checked + .permission-item-indicator::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.permission-item-v21059 input:disabled + .permission-item-indicator { opacity: .75; }
.permission-item-v21059 .permission-item-copy strong { font-size: 10.9px; }
.permission-item-v21059 .permission-item-copy small { margin-top: 3px; font-size: 9.3px; }
.permission-item-v21059 .permission-item-copy code { margin-top: 6px; padding: 2px 5px; border-radius: 4px; background: #f1f5f9; font-size: 8.4px; }
.permission-item-v21059:has(input:checked) { box-shadow: inset 3px 0 0 #2563eb; }
.permission-empty-state-pro { display: grid; gap: 4px; padding: 34px 18px; }
.permission-empty-state-pro strong { color: #334155; font-size: 11px; }
.permission-empty-state-pro span { color: #94a3b8; font-size: 9.5px; }
.role-editor-actions-pro { position: sticky; z-index: 4; bottom: 0; padding: 11px 14px; border-top: 1px solid #dfe6ef; box-shadow: 0 -4px 12px rgba(15,23,42,.035); }
.role-editor-actions-pro .role-editor-save-note { display: grid; gap: 2px; }
.role-editor-actions-pro .role-editor-save-note strong { color: #334155; font-size: 9.8px; }
.role-editor-actions-pro .role-editor-save-note span { color: #94a3b8; font-size: 9px; }
.role-editor-actions-pro .action-bar { gap: 8px; }
.role-editor-actions-pro .btn { min-height: 35px; padding-left: 13px; padding-right: 13px; }
.role-save-button { min-width: 132px; }

@media (min-width: 1181px) {
    .role-form-sidebar-pro { position: sticky; top: 14px; align-self: start; }
}
@media (max-width: 1180px) {
    .role-form-layout-pro { grid-template-columns: 300px minmax(0,1fr); }
    .role-form-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .role-form-overview-item:nth-child(3) { border-left: 0; border-top: 1px solid #edf1f5; }
    .role-form-overview-item:nth-child(4) { border-top: 1px solid #edf1f5; }
}
@media (max-width: 920px) {
    .role-form-layout-pro { grid-template-columns: 1fr; }
    .role-form-sidebar-pro { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .role-form-heading { align-items: stretch; }
    .role-form-heading > .btn { width: 100%; }
    .role-form-title-row { align-items: flex-start; flex-direction: column; }
    .role-form-overview { grid-template-columns: 1fr 1fr; }
    .role-form-sidebar-pro { grid-template-columns: 1fr; }
    .permission-manager-title-pro { flex-direction: column; }
    .permission-selected-summary-pro { width: 100%; text-align: left; }
    .permission-selected-summary-pro strong,
    .permission-selected-summary-pro span { display: inline; }
    .permission-selected-summary-pro span { margin-left: 5px; }
    .permission-quick-actions-pro { grid-template-columns: 1fr; }
    .permission-grid-v21059 { grid-template-columns: 1fr; }
    .permission-item-v21059 { border-right: 0; }
    .role-editor-actions-pro { position: static; }
}
@media (max-width: 520px) {
    .role-form-overview { grid-template-columns: 1fr; }
    .role-form-overview-item + .role-form-overview-item { border-left: 0; border-top: 1px solid #edf1f5; }
    .role-form-overview-item small { white-space: normal; }
    .role-editor-actions-pro .action-bar { display: grid; grid-template-columns: 1fr; width: 100%; }
    .role-editor-actions-pro .btn { width: 100%; }
}


/* V2.10.60 - Compact Role Form */
.role-form-overview-v21060 {}
.role-form-overview { margin-bottom: 10px; border-radius: 8px; box-shadow: none; }
.role-form-overview-item { padding: 8px 11px; }
.role-form-overview-label { margin-bottom: 3px; font-size: 8.4px; }
.role-form-overview-item strong { font-size: 11.5px; }
.role-form-layout-pro { grid-template-columns: minmax(285px,315px) minmax(0,1fr); gap: 12px; }
.role-form-sidebar-pro { gap: 12px; }
.role-form-card-header { padding: 11px 13px !important; }
.role-form-card-header h2 { font-size: 12.5px !important; }
.role-form-fields { padding: 12px 13px !important; }
.role-form-fields .role-field-block { padding-bottom: 11px; }
.role-form-fields .role-field-block + .role-field-block { padding-top: 11px; }
.role-field-label-row { margin-bottom: 4px; }
.role-form-fields .form-control,
.role-form-fields .form-select { min-height: 35px; padding: 7px 9px; font-size: 10.8px; }
.role-form-fields textarea.form-control { min-height: 68px; }
.role-char-count { margin-top: 4px; }
.dashboard-widget-list-pro { gap: 9px; padding: 10px 13px 12px !important; }
.dashboard-widget-option-pro { min-height: 30px; padding: 5px 7px; }
.permission-manager-top-pro { padding: 12px 14px 10px; }
.permission-manager-title-pro h2 { font-size: 13.5px; }
.permission-manager-title-pro p { margin-top: 2px; }
.permission-selected-summary-pro { min-width: 94px; padding: 6px 8px; }
.permission-selected-summary-pro strong { font-size: 18px; }
.permission-toolbar-pro { margin-top: 9px; }
.permission-toolbar-pro .permission-search-wrap .form-control,
.permission-select-all-control { min-height: 34px; }
.permission-quick-actions-pro { margin-top: 8px; }
.permission-policy-note-pro { padding: 7px 14px; }
.permission-groups-v21059 { gap: 8px; padding: 10px !important; }
.permission-module-header-pro { min-height: 38px; padding: 7px 10px; }
.permission-module-heading-pro strong { font-size: 11px; }
.permission-module-heading-pro span { margin-top: 1px; font-size: 8.5px; }
.permission-grid-v21059 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.permission-item-v21060 {
    align-items: center;
    grid-template-columns: 18px minmax(0,1fr);
    gap: 7px;
    min-height: 40px;
    padding: 7px 9px;
}
.permission-item-v21060 .permission-item-indicator { width: 16px; height: 16px; margin-top: 0; }
.permission-item-v21060 .permission-item-copy strong { font-size: 10.2px; font-weight: 750; line-height: 1.25; }
.permission-item-v21060 .permission-item-copy small,
.permission-item-v21060 .permission-item-copy code { display: none !important; }
.role-editor-actions-pro { padding: 8px 11px; }
.role-editor-actions-pro .btn { min-height: 32px; }
@media (max-width: 1180px) {
    .role-form-layout-pro { grid-template-columns: 280px minmax(0,1fr); }
    .permission-grid-v21059 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 920px) {
    .role-form-layout-pro { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .permission-grid-v21059 { grid-template-columns: 1fr; }
}

/* V2.10.61 - explicit auto/custom mode for Faktur Penjualan & Surat Jalan */
.number-mode-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}
.number-mode-row > select,
.number-mode-row > input {
    width: 100%;
    min-width: 0;
}
.number-mode-row > select {
    font-weight: 700;
}
.number-mode-row > input.readonly {
    cursor: default;
}
@media (max-width: 640px) {
    .number-mode-row { grid-template-columns: 1fr; }
}

/* V2.10.62 - Valuasi Stok lebih ringkas dan mudah dibaca. */
.stock-valuation-filter-card {
    border: 1px solid #dfe4ea;
    box-shadow: none;
}
.stock-valuation-filter-card .card-body {
    padding: 14px 16px;
}
.stock-valuation-filter label {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}
.stock-valuation-period {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 12px 0 14px;
    padding: 10px 12px;
    border: 1px solid #dfe4ea;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 12px;
}
.stock-valuation-period-label {
    color: #64748b;
    font-weight: 700;
}
.stock-valuation-period strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}
.stock-valuation-period strong span {
    color: #64748b;
    font-weight: 600;
}
.stock-valuation-period-count {
    margin-left: auto;
    color: #64748b;
    font-weight: 650;
}
.stock-valuation-summary {
    gap: 12px;
    margin-bottom: 16px;
}
.stock-valuation-summary .stat-card {
    min-height: 0;
    padding: 14px 15px;
    border: 1px solid #dfe4ea;
    border-radius: 9px;
    box-shadow: none;
}
.stock-valuation-summary .stat-icon {
    display: none;
}
.stock-valuation-summary .stat-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.stock-valuation-summary .stat-number {
    margin: 8px 0 4px;
    color: #0f172a;
    font-size: clamp(19px, 1.9vw, 25px);
    font-weight: 800;
    letter-spacing: -.35px;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
}
.stock-valuation-summary .stat-meta {
    color: #64748b;
    font-size: 11px;
}
.stock-valuation-ending-card {
    border-color: #aeb8c5 !important;
    background: #f8fafc;
}
.stock-valuation-table-card {
    border: 1px solid #dfe4ea;
    border-radius: 9px;
    box-shadow: none;
}
.stock-valuation-table-card > .card-header {
    padding: 13px 15px;
    border-bottom: 1px solid #dfe4ea;
    background: #fff;
}
.stock-valuation-table-card > .card-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}
.stock-valuation-table-card > .card-header small {
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
}
.stock-valuation-scroll-hint {
    background: #f8fafc;
    color: #64748b;
}
.stock-valuation-print-table {
    min-width: 1210px;
    margin: 0;
    table-layout: fixed;
    font-size: 12px;
    line-height: 1.35;
}
.stock-valuation-print-table col.sv-col-product { width: 18%; }
.stock-valuation-print-table col.sv-col-qty { width: 7%; }
.stock-valuation-print-table col.sv-col-average { width: 8%; }
.stock-valuation-print-table col.sv-col-value { width: 9.5%; }
.stock-valuation-print-table th,
.stock-valuation-print-table td {
    padding: 9px 8px;
    border-color: #e2e8f0;
    vertical-align: middle;
}
.stock-valuation-print-table thead th {
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    white-space: normal;
}
.stock-valuation-print-table .stock-valuation-group-row th {
    padding-top: 8px;
    padding-bottom: 8px;
    background: #eef2f6;
    color: #1e293b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .015em;
    text-align: center;
}
.stock-valuation-print-table thead tr:nth-child(2) th {
    background: #f8fafc;
    color: #475569;
    font-size: 10.5px;
    font-weight: 750;
    text-align: center;
}
.stock-valuation-print-table .sv-group-purchase,
.stock-valuation-print-table .sv-group-sales,
.stock-valuation-print-table .sv-group-ending {
    border-left: 1.5px solid #cbd5e1;
}
.stock-valuation-print-table .sv-group-end,
.stock-valuation-print-table tbody .sv-group-end,
.stock-valuation-print-table tfoot .sv-group-end {
    border-right: 1.5px solid #cbd5e1;
}
.stock-valuation-print-table tbody tr:nth-child(even) td {
    background: #fbfcfd;
}
.stock-valuation-print-table tbody tr:hover td {
    background: #f6f8fb;
}
.stock-valuation-print-table tbody td:first-child {
    color: #0f172a;
}
.stock-valuation-print-table tbody td:first-child strong {
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
}
.stock-valuation-print-table tbody td:first-child small {
    margin-top: 3px;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 550;
}
.stock-valuation-print-table .sv-qty,
.stock-valuation-print-table .sv-money {
    font-variant-numeric: tabular-nums;
}
.stock-valuation-print-table .sv-cell-ending,
.stock-valuation-print-table tbody tr:nth-child(even) .sv-cell-ending {
    background: #f7f9fb;
}
.stock-valuation-print-table tbody tr:hover .sv-cell-ending {
    background: #f0f4f8;
}
.stock-valuation-print-table .sv-cell-ending strong {
    color: #0f172a;
    font-weight: 850;
}
.stock-valuation-print-table tfoot th {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid #94a3b8;
    background: #eef2f6;
    color: #0f172a;
    font-size: 11.5px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.stock-valuation-print-table tfoot .sv-ending-total {
    background: #e5eaf0;
    font-size: 12px;
}
.stock-valuation-formula {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #dfe4ea;
    background: #fafbfc;
    color: #475569;
    font-size: 11px;
    line-height: 1.55;
}
.stock-valuation-formula strong {
    color: #1e293b;
}
@media screen and (max-width: 680px) {
    .stock-valuation-period {
        align-items: flex-start;
    }
    .stock-valuation-period-count {
        width: 100%;
        margin-left: 0;
    }
    .stock-valuation-summary .stat-card {
        padding: 12px 13px;
    }
    .stock-valuation-print-table {
        min-width: 1110px;
        font-size: 11px;
    }
}

/* V2.10.63 - Pilihan Qty Kemasan / Satuan Isi pada Valuasi Stok. */
.stock-valuation-filter select[name="qty_mode"] {
    min-width: 270px;
}
.stock-valuation-qty-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 10px;
    border-left: 1px solid #dfe4ea;
    color: #64748b;
    white-space: nowrap;
}
.stock-valuation-qty-mode strong {
    font-size: inherit;
    color: #334155;
    font-weight: 750;
}
.stock-valuation-content-warning {
    margin-top: -4px;
    margin-bottom: 14px;
}
.stock-valuation-print-table .sv-qty {
    white-space: nowrap;
}
@media (max-width: 760px) {
    .stock-valuation-filter select[name="qty_mode"] {
        min-width: 0;
        width: 100%;
    }
    .stock-valuation-qty-mode {
        width: 100%;
        padding: 6px 0 0;
        border-left: 0;
        border-top: 1px solid #eef2f7;
    }
}

/* ========================================================================
 * V2.10.68 - READABLE GLYPH / FONT NORMALIZATION
 * Menyamakan font konten layar agar huruf l, I dan angka 1 lebih mudah
 * dibedakan dan tidak tampak seperti karakter garis vertikal |.
 * Tidak mengubah ukuran/layout komponen.
 * ======================================================================== */
:root {
    --jcom-readable-font: "Trebuchet MS", "DejaVu Sans", Arial, Helvetica, sans-serif;
}

body,
button,
input,
select,
textarea,
.page-content,
.page-content table,
.page-content .card,
.page-content .form-control,
.page-content .form-select,
.page-content .btn {
    font-family: var(--jcom-default-font) !important;
    font-synthesis: none;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "clig" 0;
    text-rendering: optimizeLegibility;
}

/* Jaga keterbacaan isi tabel/detail tanpa mengubah ukuran font. */
.page-content table th,
.page-content table td,
.page-content .detail-value,
.page-content .meta-value,
.page-content .form-control,
.page-content .form-select {
    letter-spacing: 0.005em;
}

/* Field teknis tetap monospace agar kode/slug tetap mudah dibedakan. */
.page-content code,
.page-content pre,
.role-slug-control .form-control,
.font-monospace {
    font-family: var(--jcom-default-font) !important;
    font-synthesis: none;
    font-variant-ligatures: none;
}

/* ========================================================================
 * V2.10.70 - FINAL UI GLYPH HARDENING
 * Menggunakan font metric-compatible yang stabil pada Windows/Linux dan
 * menghindari stroke tipis huruf l/I/1 terlihat seperti karakter |.
 * ======================================================================== */
:root {
    --jcom-readable-font: Calibri, Carlito, "Segoe UI", Tahoma, Arial, sans-serif;
}

body,
button,
input,
select,
textarea,
.page-content,
.page-content table,
.page-content .card,
.page-content .form-control,
.page-content .form-select,
.page-content .btn {
    font-family: var(--jcom-default-font) !important;
    font-synthesis: auto !important;
    font-variant-ligatures: none !important;
    font-feature-settings: "liga" 0, "clig" 0 !important;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.page-content table th,
.page-content table td,
.page-content .detail-item,
.page-content .detail-item *,
.page-content .meta-value,
.page-content .form-control,
.page-content .form-select {
    letter-spacing: 0.008em;
}

.page-content table td,
.page-content .detail-item strong,
.page-content .detail-item span {
    font-weight: 400;
}

.page-content table th,
.page-content .detail-item small,
.page-content .card-header strong {
    font-weight: 600;
}

/* ========================================================================
 * V2.10.71 - UNIFIED FONT: VIEW / PREVIEW / PRINT / PDF
 * Satu font stack untuk seluruh teks aplikasi. Tidak ada lagi pengecualian
 * monospace pada View agar jenis font konsisten dengan dokumen cetak/PDF.
 * Ukuran, weight, spacing, dan layout tidak diubah oleh blok ini.
 * ======================================================================== */
:root {
    --jcom-unified-font: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
}

html,
body,
body * {
    font-family: var(--jcom-default-font) !important;
    font-variant-ligatures: none !important;
    font-feature-settings: "liga" 0, "clig" 0 !important;
    font-kerning: normal !important;
    text-rendering: optimizeLegibility;
}

/* ========================================================================
 * V2.10.72 - STRONGER TYPOGRAPHY / SCREEN-PRINT WEIGHT PARITY
 * Menegaskan stroke huruf tanpa mengubah ukuran/layout. Hierarki weight final:
 * isi 500, label/header 600, judul/total utama 700. Berlaku pada View dan
 * menjadi acuan yang sama untuk Preview/Cetak/PDF di print.css.
 * ======================================================================== */
:root {
    --jcom-unified-font: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
    --jcom-content-weight: 500;
    --jcom-label-weight: 600;
    --jcom-emphasis-weight: 700;
}

html,
body,
body * {
    font-family: var(--jcom-default-font) !important;
    font-synthesis: auto !important;
    font-variant-ligatures: none !important;
    font-feature-settings: "liga" 0, "clig" 0 !important;
    font-kerning: normal !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

/* Isi utama dibuat satu tingkat lebih tegas daripada Regular. */
body,
.page-content,
.page-content p,
.page-content li,
.page-content table td,
.page-content .card-body,
.page-content .detail-item,
.page-content .detail-item span,
.page-content .detail-item strong,
.page-content .detail-value,
.page-content .meta-value,
.page-content .form-control,
.page-content .form-select,
.page-content input,
.page-content select,
.page-content textarea,
.page-content .muted,
.page-content small {
    font-weight: var(--jcom-content-weight) !important;
}

/* Label, kepala tabel, tombol dan metadata memakai Semibold yang konsisten. */
.page-content table th,
.page-content label,
.page-content .form-label,
.page-content .field label,
.page-content .card-header,
.page-content .btn,
.page-content .badge,
.page-content .status-badge,
.page-content .nav-tab,
.page-content .filter-label {
    font-weight: var(--jcom-label-weight) !important;
}

/* Judul dan penekanan utama tetap jelas tanpa dibuat terlalu berat. */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.page-content .page-heading h1,
.page-content .stat-number,
.page-content .summary-row.total,
.page-content strong.emphasis,
.page-content .grand-total {
    font-weight: var(--jcom-emphasis-weight) !important;
}


/* ========================================================================
 * V2.10.73 - ONE DEFAULT FONT EVERYWHERE
 * Satu font family final untuk View, Preview, Print Preview, printer, PDF,
 * form, tabel, kode/slug, dan seluruh komponen. Weight/size tetap mengikuti
 * hierarchy dokumen; hanya jenis font yang diseragamkan.
 * ======================================================================== */
:root {
    --jcom-default-font: Arial, Helvetica, sans-serif;
    --jcom-unified-font: var(--jcom-default-font);
    --jcom-readable-font: var(--jcom-default-font);
}

html,
body,
body *,
button,
input,
select,
textarea,
option,
optgroup,
code,
pre,
kbd,
samp {
    font-family: var(--jcom-default-font) !important;
}

/* ========================================================================
 * V2.10.74 - SHARPER SCREEN TYPOGRAPHY + BORDERS
 * Menegaskan warna teks dan border tanpa mengubah ukuran/layout.
 * ======================================================================== */
:root {
    --jcom-screen-ink: #0a0a0a;
    --jcom-screen-border: #4a4a4a;
}

body,
.page-content,
.page-content p,
.page-content li,
.page-content td,
.page-content th,
.page-content label,
.page-content .form-control,
.page-content .form-select,
.page-content .btn {
    color: var(--jcom-screen-ink);
    text-shadow: none !important;
    filter: none !important;
    -webkit-font-smoothing: auto !important;
    text-rendering: geometricPrecision !important;
}

.page-content table,
.page-content table th,
.page-content table td,
.page-content .table,
.page-content .table > :not(caption) > * > * {
    border-color: var(--jcom-screen-border) !important;
}

/* ========================================================================
 * V2.10.75 - DOCUMENT VIEW PARITY
 * Identitas perusahaan dan area tanda tangan pada View menggunakan hierarki
 * yang sama dengan Preview/Cetak tanpa meniru kanvas kertas secara penuh.
 * ======================================================================== */
.document-company-view-card {
    margin: 0 0 18px;
    padding: 16px 20px 14px;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    background: #fff;
    color: #000;
    text-align: center;
    box-shadow: none !important;
    position: relative;
}
.document-company-view-card::after {
    content: "";
    display: block;
    width: 100%;
    margin-top: 10px;
    border-top: 1px solid #000;
    box-shadow: 0 3px 0 -2px #000;
}
.document-company-view-name {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700 !important;
    color: #000;
}
.document-company-view-address {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500 !important;
    color: #111;
}
.document-company-view-address span { display: block; }
.document-company-view-npwp {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 600 !important;
    color: #111;
}

.document-signature-view-card {
    margin-top: 18px;
    box-shadow: none !important;
}
.document-signature-view-grid {
    display: grid;
    grid-template-columns: repeat(var(--signature-count, 3), minmax(0, 1fr));
    gap: 24px;
}
.document-signature-view-box {
    min-width: 0;
    text-align: center;
    color: #111;
    font-size: 13px;
    line-height: 1.25;
}
.document-signature-view-box strong {
    display: block;
    font-weight: 600 !important;
}
.document-signature-view-space { height: 58px; }
.document-signature-view-box span {
    display: block;
    min-height: 18px;
    padding-top: 4px;
    border-top: 1px solid #666;
    font-weight: 500 !important;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .document-company-view-card { padding: 14px 12px 12px; }
    .document-signature-view-grid { grid-template-columns: 1fr; gap: 16px; }
    .document-signature-view-space { height: 36px; }
}

/* V2.10.75 - detail/view Penjualan dibuat satu keluarga dengan dokumen cetak. */
.document-view-page-heading {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #b8b8b8;
}
.document-view-page-heading h1 {
    color: #000 !important;
    letter-spacing: 0 !important;
}
.document-view-card {
    border-color: #6b6b6b !important;
    box-shadow: none !important;
}
.document-view-card > .card-header {
    background: #fff !important;
    border-bottom-color: #8a8a8a !important;
}
.document-view-table {
    border-collapse: collapse !important;
    border: 1px solid #4a4a4a !important;
}
.document-view-table th,
.document-view-table td {
    border-color: #6a6a6a !important;
    vertical-align: middle !important;
}
.document-view-table th {
    background: #f7f7f7 !important;
    color: #000 !important;
    font-weight: 600 !important;
}
.document-view-table td {
    background: #fff !important;
    color: #111 !important;
    font-weight: 500 !important;
}

/* ========================================================================
 * V2.10.80 - VALUASI STOK: READABILITY + CONTENT-AWARE COLUMNS
 * Default periode = bulan berjalan; tabel layar mengikuti panjang isi dan
 * tetap menggunakan horizontal scroll bila total kolom melebihi viewport.
 * ======================================================================== */
.stock-valuation-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid #e2e8f0;
}
.stock-valuation-filter-head > div {
    min-width: 0;
}
.stock-valuation-filter-head strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700 !important;
    line-height: 1.25;
}
.stock-valuation-filter-head small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.4;
}
.stock-valuation-month-button {
    flex: 0 0 auto;
    white-space: nowrap;
}
.stock-valuation-month-button.is-active {
    border-color: #64748b !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}
.stock-valuation-filter {
    align-items: end;
}
.stock-valuation-filter label {
    min-width: 0;
}
.stock-valuation-filter input[type="date"],
.stock-valuation-filter select {
    max-width: 100%;
}
.stock-valuation-period-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 10px;
    font-weight: 700 !important;
    line-height: 1.2;
    white-space: nowrap;
}

.stock-valuation-table-card {
    overflow: hidden;
}
.stock-valuation-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
.stock-valuation-print-table {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.35;
}
.stock-valuation-print-table th,
.stock-valuation-print-table td {
    box-sizing: border-box;
    padding: 9px 10px;
    vertical-align: middle;
}
.stock-valuation-print-table thead th {
    max-width: 180px;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    text-align: center !important;
    line-height: 1.25;
}
.stock-valuation-print-table .stock-valuation-group-row th > span,
.stock-valuation-print-table .stock-valuation-group-row th > small {
    display: block;
}
.stock-valuation-print-table .stock-valuation-group-row th > small {
    margin-top: 2px;
    color: #64748b;
    font-size: 9.5px;
    font-weight: 600 !important;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0;
}
.stock-valuation-print-table th:first-child,
.stock-valuation-print-table td:first-child {
    min-width: 250px !important;
    width: 280px;
    max-width: 360px !important;
    white-space: normal !important;
    text-align: left !important;
}
.stock-valuation-print-table tbody td:first-child strong {
    display: block;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.32;
}
.stock-valuation-print-table tbody td:first-child small {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.25;
}
.stock-valuation-print-table .sv-col-qty,
.stock-valuation-print-table .sv-qty {
    min-width: 105px;
    width: auto !important;
    white-space: nowrap !important;
    text-align: right !important;
}
.stock-valuation-print-table .sv-col-average {
    min-width: 118px;
    width: auto !important;
    white-space: nowrap !important;
    text-align: right !important;
}
.stock-valuation-print-table .sv-col-value,
.stock-valuation-print-table .sv-money {
    min-width: 128px;
    width: auto !important;
    white-space: nowrap !important;
    text-align: right !important;
}
.stock-valuation-print-table thead .sv-col-qty,
.stock-valuation-print-table thead .sv-col-average,
.stock-valuation-print-table thead .sv-col-value {
    white-space: normal !important;
    text-align: center !important;
}
.stock-valuation-print-table tfoot th {
    white-space: nowrap;
}

@media screen and (max-width: 760px) {
    .stock-valuation-filter-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .stock-valuation-month-button {
        width: 100%;
        justify-content: center;
    }
    .stock-valuation-period-badge {
        order: 3;
    }
    .stock-valuation-print-table {
        width: max-content !important;
        min-width: 1080px !important;
    }
    .stock-valuation-print-table th:first-child,
    .stock-valuation-print-table td:first-child {
        min-width: 210px !important;
        width: 230px;
        max-width: 270px !important;
    }
}

/* ==========================================================================
 * V2.10.81 - SIDEBAR LAPORAN / VALUASI STOK
 * Kelompok laporan dibuat lebih ringkas dan Valuasi Stok lebih mudah dipindai.
 * ========================================================================== */
.nav-subsection {
    margin: 7px 8px 3px;
    padding: 6px 0 3px;
    border-top: 1px solid rgba(148,163,184,.12);
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .7px;
    text-transform: uppercase;
    user-select: none;
}
.nav-subsection:first-child {
    margin-top: 1px;
    padding-top: 2px;
    border-top: 0;
}


/* ==========================================================================
 * V2.10.85 - UNIFIED SIDEBAR STATE / TANPA REDUP
 * Seluruh menu Dashboard, parent group, dan submenu memakai state visual yang
 * sama. Tidak ada opacity/filter/shadow khusus ketika menu aktif atau diklik.
 * ========================================================================== */
:root {
    --sidebar-item-text: #cbd5e1;
    --sidebar-item-hover-bg: #1e293b;
    --sidebar-item-active-bg: #2563eb;
    --sidebar-item-active-text: #ffffff;
    --sidebar-item-border: rgba(148,163,184,.10);
}

.sidebar,
.sidebar-nav {
    opacity: 1 !important;
    filter: none !important;
}

/* Semua elemen menu klik selalu 100% terlihat. */
.sidebar .nav-dashboard,
.sidebar .nav-parent,
.sidebar .nav-subitem,
.sidebar .nav-dashboard .nav-icon,
.sidebar .nav-parent .nav-icon,
.sidebar .nav-chevron,
.sidebar .nav-sub-dot {
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
}

/* State normal seragam. */
.sidebar .nav-dashboard,
.sidebar .nav-parent {
    color: var(--sidebar-item-text) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
.sidebar .nav-dashboard .nav-icon,
.sidebar .nav-parent .nav-icon {
    color: var(--sidebar-item-text) !important;
    background: rgba(148,163,184,.09) !important;
    box-shadow: none !important;
    transform: none !important;
}
.sidebar .nav-chevron {
    color: #94a3b8 !important;
    transform: none;
}

/* Hover/focus seragam dan tidak mengubah opacity. */
.sidebar .nav-dashboard:hover,
.sidebar .nav-dashboard:focus-visible,
.sidebar .nav-parent:hover,
.sidebar .nav-parent:focus-visible,
.sidebar .nav-group:focus-within > .nav-parent {
    color: #fff !important;
    background: var(--sidebar-item-hover-bg) !important;
    border-color: var(--sidebar-item-border) !important;
    box-shadow: none !important;
    transform: none !important;
}
.sidebar .nav-dashboard:hover .nav-icon,
.sidebar .nav-dashboard:focus-visible .nav-icon,
.sidebar .nav-parent:hover .nav-icon,
.sidebar .nav-parent:focus-visible .nav-icon,
.sidebar .nav-group:focus-within > .nav-parent .nav-icon {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Dashboard dan seluruh parent aktif memakai biru solid yang sama. */
.sidebar .nav-dashboard.active,
.sidebar .nav-group.active > .nav-parent {
    color: var(--sidebar-item-active-text) !important;
    background: var(--sidebar-item-active-bg) !important;
    border-color: var(--sidebar-item-active-bg) !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}
.sidebar .nav-dashboard.active .nav-icon,
.sidebar .nav-group.active > .nav-parent .nav-icon {
    color: #fff !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
}
.sidebar .nav-group.active > .nav-parent .nav-chevron {
    color: #fff !important;
}

/* Seluruh submenu: normal / hover / aktif konsisten pada desktop dan mobile. */
.sidebar .nav-subitem {
    color: var(--sidebar-item-text) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
.sidebar .nav-subitem .nav-sub-dot {
    background: #64748b !important;
    box-shadow: none !important;
}
.sidebar .nav-subitem:hover,
.sidebar .nav-subitem:focus-visible {
    color: #fff !important;
    background: var(--sidebar-item-hover-bg) !important;
    border-color: var(--sidebar-item-border) !important;
    box-shadow: none !important;
    transform: none !important;
}
.sidebar .nav-subitem:hover .nav-sub-dot,
.sidebar .nav-subitem:focus-visible .nav-sub-dot {
    background: #93c5fd !important;
    box-shadow: none !important;
}
.sidebar .nav-subitem.active,
.sidebar .nav-subitem.active:hover,
.sidebar .nav-subitem.active:focus-visible {
    color: var(--sidebar-item-active-text) !important;
    background: var(--sidebar-item-active-bg) !important;
    border-color: var(--sidebar-item-active-bg) !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}
.sidebar .nav-subitem.active .nav-sub-dot {
    background: #fff !important;
    box-shadow: none !important;
}

/* Chevron hanya menunjukkan buka/tutup, tidak mengubah kecerahan menu. */
.sidebar .nav-group:hover > .nav-parent .nav-chevron,
.sidebar .nav-group:focus-within > .nav-parent .nav-chevron,
.sidebar .nav-group.open > .nav-parent .nav-chevron {
    color: #fff !important;
}
@media (min-width: 921px) and (hover: hover) and (pointer: fine) {
    .sidebar .nav-group.open > .nav-parent .nav-chevron {
        transform: translateX(2px);
    }
}
@media (max-width: 920px), (hover: none) {
    .sidebar .nav-group.open > .nav-parent .nav-chevron,
    .sidebar .nav-group.active > .nav-parent .nav-chevron {
        transform: rotate(90deg);
    }
}


/* ========================================================================
 * V2.10.88 - PURCHASE / SALES VIEW TABLE STABILITY
 * Kolom dibuat stabil per jenis tabel. Isi panjang wrap di dalam sel tanpa
 * mengubah proporsi seluruh tabel. Pada layar sempit container yang scroll.
 * ======================================================================== */
body.document-detail-view .document-view-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
}
body.document-detail-view .trade-view-table {
    width: 100% !important;
    min-width: 760px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}
body.document-detail-view .trade-view-table th,
body.document-detail-view .trade-view-table td {
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    vertical-align: middle !important;
}
body.document-detail-view .trade-view-table td strong,
body.document-detail-view .trade-view-table td small,
body.document-detail-view .trade-view-table .badge {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}
/* Invoice detail: Barang | Qty | Harga | Total */
body.document-detail-view .trade-view-4-invoice th:nth-child(1),
body.document-detail-view .trade-view-4-invoice td:nth-child(1) { width: 34%; }
body.document-detail-view .trade-view-4-invoice th:nth-child(2),
body.document-detail-view .trade-view-4-invoice td:nth-child(2) { width: 20%; }
body.document-detail-view .trade-view-4-invoice th:nth-child(3),
body.document-detail-view .trade-view-4-invoice td:nth-child(3) { width: 26%; }
body.document-detail-view .trade-view-4-invoice th:nth-child(4),
body.document-detail-view .trade-view-4-invoice td:nth-child(4) { width: 20%; }
/* PO / Barang Keluar: 6 kolom operasional */
body.document-detail-view .trade-view-6-main th:nth-child(1),
body.document-detail-view .trade-view-6-main td:nth-child(1) { width: 27%; }
body.document-detail-view .trade-view-6-main th:nth-child(2),
body.document-detail-view .trade-view-6-main td:nth-child(2) { width: 17%; }
body.document-detail-view .trade-view-6-main th:nth-child(3),
body.document-detail-view .trade-view-6-main td:nth-child(3) { width: 19%; }
body.document-detail-view .trade-view-6-main th:nth-child(4),
body.document-detail-view .trade-view-6-main td:nth-child(4) { width: 14%; }
body.document-detail-view .trade-view-6-main th:nth-child(5),
body.document-detail-view .trade-view-6-main td:nth-child(5) { width: 14%; }
body.document-detail-view .trade-view-6-main th:nth-child(6),
body.document-detail-view .trade-view-6-main td:nth-child(6) { width: 9%; }
/* Retur: beri ruang seimbang untuk nilai stok/HPP. */
body.document-detail-view .trade-view-6-return th:nth-child(1),
body.document-detail-view .trade-view-6-return td:nth-child(1) { width: 25%; }
body.document-detail-view .trade-view-6-return th:nth-child(2),
body.document-detail-view .trade-view-6-return td:nth-child(2) { width: 15%; }
body.document-detail-view .trade-view-6-return th:nth-child(3),
body.document-detail-view .trade-view-6-return td:nth-child(3),
body.document-detail-view .trade-view-6-return th:nth-child(4),
body.document-detail-view .trade-view-6-return td:nth-child(4),
body.document-detail-view .trade-view-6-return th:nth-child(5),
body.document-detail-view .trade-view-6-return td:nth-child(5),
body.document-detail-view .trade-view-6-return th:nth-child(6),
body.document-detail-view .trade-view-6-return td:nth-child(6) { width: 15%; }
body.document-detail-view .trade-view-table td.text-right,
body.document-detail-view .trade-view-table td.number {
    font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
    body.document-detail-view .trade-view-table { min-width: 820px !important; }
}

/* V2.10.96 - Retur memakai unit transaksi Pembelian/Penjualan */
.return-entry-table .return-qty-input,
.return-entry-table .return-unit-select { width:100%; min-width:105px; }
.return-entry-table small.return-equivalent,
.return-entry-table small.return-max-selected,
.return-entry-table small.return-price-equivalent { display:block; margin-top:4px; color:#64748b; line-height:1.3; white-space:normal; }
.return-entry-table .return-qty-over .return-qty-input { border-color:#b91c1c; }
.return-entry-table .return-qty-over .return-equivalent { color:#b91c1c; font-weight:600; }
@media (max-width: 900px) { .return-entry-table { min-width:1180px; } }

/* ========================================================================
 * V2.10.98 - SALES VIEW PARITY WITH PRINT
 * View dokumen Penjualan mengikuti hierarki Preview/Cetak: caption, info,
 * tabel dokumen, ringkasan, catatan, dan tanda tangan. Nilai Rupiah ditampilkan
 * tanpa 2 angka desimal; nilai database tidak berubah.
 * ======================================================================== */
body.document-detail-view .sales-view-document {
    margin: 0 0 16px;
    padding: 0;
    background: #fff;
    color: #000;
    border: 1px solid #444;
    box-shadow: none !important;
}
body.document-detail-view .sales-view-document-caption {
    padding: 8px 12px;
    border-bottom: 1px solid #444;
    text-align: center;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700 !important;
    letter-spacing: .02em;
}
body.document-detail-view .sales-view-info-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 16px;
    padding: 10px 12px;
    border-bottom: 1px solid #666;
}
body.document-detail-view .sales-view-info-column { min-width: 0; }
body.document-detail-view .sales-view-info-column > div {
    display: grid;
    grid-template-columns: minmax(110px, 34%) 10px minmax(0,1fr);
    gap: 4px;
    align-items: start;
    min-height: 24px;
    padding: 2px 0;
    font-size: 12px;
    line-height: 1.3;
}
body.document-detail-view .sales-view-info-column span,
body.document-detail-view .sales-view-info-column i,
body.document-detail-view .sales-view-info-column strong {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}
body.document-detail-view .sales-view-info-column i { font-style: normal; text-align:center; }
body.document-detail-view .sales-view-info-column strong { font-weight: 600 !important; }
body.document-detail-view .sales-view-document .document-view-table-wrap {
    margin: 0 !important;
    overflow-x: auto !important;
}
body.document-detail-view .sales-view-print-table {
    width: 100% !important;
    min-width: 760px !important;
    margin: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 0 !important;
}
body.document-detail-view .sales-view-print-table th,
body.document-detail-view .sales-view-print-table td {
    box-sizing: border-box !important;
    padding: 7px 8px !important;
    border: 1px solid #555 !important;
    border-top: 0 !important;
    color: #000 !important;
    background: #fff !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    vertical-align: middle !important;
}
body.document-detail-view .sales-view-print-table th {
    background: #f5f5f5 !important;
    font-weight: 700 !important;
    text-align: center;
}
body.document-detail-view .sales-view-print-table tr > :first-child { border-left: 0 !important; }
body.document-detail-view .sales-view-print-table tr > :last-child { border-right: 0 !important; }
/* Surat Jalan: No | Produk | Kemasan | Qty | Keterangan */
body.document-detail-view .sales-view-delivery-table th:nth-child(1),
body.document-detail-view .sales-view-delivery-table td:nth-child(1) { width: 6%; }
body.document-detail-view .sales-view-delivery-table th:nth-child(2),
body.document-detail-view .sales-view-delivery-table td:nth-child(2) { width: 36%; }
body.document-detail-view .sales-view-delivery-table th:nth-child(3),
body.document-detail-view .sales-view-delivery-table td:nth-child(3) { width: 14%; }
body.document-detail-view .sales-view-delivery-table th:nth-child(4),
body.document-detail-view .sales-view-delivery-table td:nth-child(4) { width: 16%; }
body.document-detail-view .sales-view-delivery-table th:nth-child(5),
body.document-detail-view .sales-view-delivery-table td:nth-child(5) { width: 28%; }
/* Faktur/Retur: No | Produk | Kemasan | Qty | Harga | Jumlah */
body.document-detail-view .sales-view-invoice-table th:nth-child(1),
body.document-detail-view .sales-view-invoice-table td:nth-child(1) { width: 6%; }
body.document-detail-view .sales-view-invoice-table th:nth-child(2),
body.document-detail-view .sales-view-invoice-table td:nth-child(2) { width: 30%; }
body.document-detail-view .sales-view-invoice-table th:nth-child(3),
body.document-detail-view .sales-view-invoice-table td:nth-child(3) { width: 13%; }
body.document-detail-view .sales-view-invoice-table th:nth-child(4),
body.document-detail-view .sales-view-invoice-table td:nth-child(4) { width: 14%; }
body.document-detail-view .sales-view-invoice-table th:nth-child(5),
body.document-detail-view .sales-view-invoice-table td:nth-child(5) { width: 19%; }
body.document-detail-view .sales-view-invoice-table th:nth-child(6),
body.document-detail-view .sales-view-invoice-table td:nth-child(6) { width: 18%; }
body.document-detail-view .sales-view-payment-table th:first-child,
body.document-detail-view .sales-view-payment-table td:first-child { width: 62%; }
body.document-detail-view .sales-view-payment-table th:last-child,
body.document-detail-view .sales-view-payment-table td:last-child { width: 38%; text-align:right; }
body.document-detail-view .sales-view-note {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    gap: 8px;
    padding: 9px 12px;
    border-top: 0;
    border-bottom: 1px solid #777;
    font-size: 12px;
    line-height: 1.35;
}
body.document-detail-view .sales-view-note span { min-width:0; overflow-wrap:break-word; }
body.document-detail-view .sales-view-summary {
    width: min(440px, 100%);
    margin-left: auto;
    padding: 8px 12px 10px;
}
body.document-detail-view .sales-view-summary > div {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 18px;
    padding: 4px 0;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    line-height: 1.3;
}
body.document-detail-view .sales-view-summary > div strong {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
body.document-detail-view .sales-view-summary > div.grand {
    padding-top: 6px;
    border-top: 1px solid #444;
    border-bottom-color: #444;
    font-weight: 700 !important;
}
body.document-detail-view .sales-view-system-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 8px 12px 10px;
    border-top: 1px solid #888;
    font-size: 11px;
    color: #333;
}
body.document-detail-view .sales-view-accounting-card { margin: 16px 0; box-shadow:none !important; }
@media (max-width: 760px) {
    body.document-detail-view .sales-view-info-grid { grid-template-columns: 1fr; gap: 4px; }
    body.document-detail-view .sales-view-info-column > div { grid-template-columns: 105px 10px minmax(0,1fr); }
    body.document-detail-view .sales-view-summary { width: 100%; }
}

/* ========================================================================
 * V2.10.99 - TANDA TANGAN VIEW PENJUALAN SEJAJAR DENGAN CETAK
 * Tiga area tanda tangan memakai grid/baris yang sama sehingga label, ruang
 * tanda tangan, dan nama berada pada baseline yang sejajar seperti cetak.
 * ======================================================================== */
.document-signature-view-section {
    margin-top: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none !important;
}
.document-signature-view-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
.document-signature-view-section .document-signature-view-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--signature-count, 3), minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 38px !important;
    width: 100%;
    min-width: 620px;
    padding: 0 4px 2px;
}
.document-signature-view-section .document-signature-view-box {
    display: grid !important;
    grid-template-rows: auto 66px minmax(20px, auto) !important;
    align-items: start !important;
    min-width: 0 !important;
    min-height: 104px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    color: #111 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}
.document-signature-view-section .document-signature-view-box strong {
    display: block !important;
    min-height: 18px;
    margin: 0 !important;
    font-weight: 600 !important;
    text-align: center !important;
}
.document-signature-view-section .document-signature-view-space {
    height: auto !important;
    min-height: 66px !important;
}
.document-signature-view-section .document-signature-view-box span {
    display: block !important;
    align-self: start !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
@media (max-width: 760px) {
    .document-signature-view-section .document-signature-view-grid {
        grid-template-columns: repeat(var(--signature-count, 3), minmax(180px, 1fr)) !important;
        gap: 24px !important;
        min-width: 620px;
    }
    .document-signature-view-section .document-signature-view-box {
        grid-template-rows: auto 52px minmax(20px, auto) !important;
        min-height: 90px;
    }
    .document-signature-view-section .document-signature-view-space {
        min-height: 52px !important;
    }
}


/* ========================================================================
 * V2.10.101 - SALES VIEW / PREVIEW PARITY FINAL
 * View Penjualan memakai geometri tipografi dan tanda tangan yang sama dengan
 * template Preview/Cetak. Status sistem tetap berada di luar badan dokumen.
 * ======================================================================== */
body.document-detail-view .sales-view-document {
    overflow: hidden !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #000 !important;
}
body.document-detail-view .sales-view-document > .document-company-view-card {
    margin: 0 !important;
    padding: 12px 12px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}
body.document-detail-view .sales-view-document > .document-company-view-card::after {
    margin-top: 9px !important;
    border-top: 1px solid #000 !important;
    box-shadow: 0 3px 0 -2px #000 !important;
}
body.document-detail-view .sales-view-document .document-company-view-name {
    margin-bottom: 3px !important;
    font-size: 16pt !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
}
body.document-detail-view .sales-view-document .document-company-view-address {
    font-size: 9.5pt !important;
    line-height: 1.18 !important;
    font-weight: 500 !important;
}
body.document-detail-view .sales-view-document .document-company-view-npwp {
    margin-top: 2px !important;
    font-size: 9pt !important;
    line-height: 1.16 !important;
    font-weight: 600 !important;
}
body.document-detail-view .sales-view-document-caption {
    padding: 8px 12px 6px !important;
    font-size: 12pt !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
}
body.document-detail-view .sales-view-info-grid {
    gap: 9mm !important;
    padding: 6px 12px 9px !important;
}
body.document-detail-view .sales-view-info-column > div {
    grid-template-columns: 31mm 2.5mm minmax(0, 1fr) !important;
    gap: 1px !important;
    min-height: 4.2mm !important;
    padding: 1px 0 !important;
    font-size: 8.5pt !important;
    line-height: 1.2 !important;
}
body.document-detail-view .sales-view-info-column span { font-weight: 600 !important; }
body.document-detail-view .sales-view-info-column strong { font-weight: 500 !important; }
body.document-detail-view .sales-view-print-table th,
body.document-detail-view .sales-view-print-table td {
    padding: 1.05mm 1.2mm !important;
    border-color: #000 !important;
    font-size: 8.5pt !important;
    line-height: 1.18 !important;
}
body.document-detail-view .sales-view-print-table th { font-weight: 600 !important; }
body.document-detail-view .sales-view-print-table td strong { font-weight: 500 !important; }
/* Proporsi View dibuat identik dengan Preview/Cetak V2.10.75+. */
body.document-detail-view .sales-view-delivery-table th:nth-child(1),
body.document-detail-view .sales-view-delivery-table td:nth-child(1) { width: 6% !important; }
body.document-detail-view .sales-view-delivery-table th:nth-child(2),
body.document-detail-view .sales-view-delivery-table td:nth-child(2) { width: 35% !important; }
body.document-detail-view .sales-view-delivery-table th:nth-child(3),
body.document-detail-view .sales-view-delivery-table td:nth-child(3) { width: 16% !important; }
body.document-detail-view .sales-view-delivery-table th:nth-child(4),
body.document-detail-view .sales-view-delivery-table td:nth-child(4) { width: 18% !important; }
body.document-detail-view .sales-view-delivery-table th:nth-child(5),
body.document-detail-view .sales-view-delivery-table td:nth-child(5) { width: 25% !important; }
body.document-detail-view .sales-view-invoice-table th:nth-child(1),
body.document-detail-view .sales-view-invoice-table td:nth-child(1) { width: 6% !important; }
body.document-detail-view .sales-view-invoice-table th:nth-child(2),
body.document-detail-view .sales-view-invoice-table td:nth-child(2) { width: 24% !important; }
body.document-detail-view .sales-view-invoice-table th:nth-child(3),
body.document-detail-view .sales-view-invoice-table td:nth-child(3) { width: 15% !important; }
body.document-detail-view .sales-view-invoice-table th:nth-child(4),
body.document-detail-view .sales-view-invoice-table td:nth-child(4) { width: 16% !important; }
body.document-detail-view .sales-view-invoice-table th:nth-child(5),
body.document-detail-view .sales-view-invoice-table td:nth-child(5) { width: 21% !important; }
body.document-detail-view .sales-view-invoice-table th:nth-child(6),
body.document-detail-view .sales-view-invoice-table td:nth-child(6) { width: 18% !important; }
body.document-detail-view .sales-view-payment-table th:first-child,
body.document-detail-view .sales-view-payment-table td:first-child { width: 66% !important; }
body.document-detail-view .sales-view-payment-table th:last-child,
body.document-detail-view .sales-view-payment-table td:last-child { width: 34% !important; }
body.document-detail-view .sales-view-note {
    grid-template-columns: 31mm minmax(0, 1fr) !important;
    gap: 2.5mm !important;
    min-height: 11mm !important;
    padding: 2mm 12px !important;
    border-bottom: 0 !important;
    font-size: 8.5pt !important;
    line-height: 1.25 !important;
}
body.document-detail-view .sales-view-note strong { font-weight: 600 !important; }
body.document-detail-view .sales-view-summary {
    width: min(72mm, 100%) !important;
    margin-left: auto !important;
    padding: 1.5mm 12px 0 !important;
}
body.document-detail-view .sales-view-summary > div {
    grid-template-columns: minmax(0, 1fr) 34mm !important;
    gap: 2mm !important;
    padding: .65mm 0 !important;
    border-bottom: .5pt solid #000 !important;
    font-size: 8.5pt !important;
    line-height: 1.18 !important;
}
body.document-detail-view .sales-view-summary > div span,
body.document-detail-view .sales-view-summary > div strong { font-weight: 500 !important; }
body.document-detail-view .sales-view-summary > div.grand span,
body.document-detail-view .sales-view-summary > div.grand strong { font-weight: 700 !important; }

/* Tanda tangan View = Preview/Cetak: 3 kolom, gap 10mm, ruang 16mm. */
body.document-detail-view .sales-view-document .document-signature-view-section {
    width: auto !important;
    margin: 5mm 12px 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    break-inside: avoid !important;
}
body.document-detail-view .sales-view-document .document-signature-view-scroll {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}
body.document-detail-view .sales-view-document .document-signature-view-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10mm !important;
    width: 100% !important;
    min-width: 160mm !important;
    padding: 0 !important;
}
body.document-detail-view .sales-view-document .document-signature-view-box {
    display: grid !important;
    grid-template-rows: 4mm 16mm minmax(4mm, auto) !important;
    align-items: start !important;
    min-width: 0 !important;
    min-height: 31mm !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    font-size: 8.5pt !important;
    line-height: 1.18 !important;
    font-weight: 500 !important;
    text-align: center !important;
}
body.document-detail-view .sales-view-document .document-signature-view-box strong {
    display: block !important;
    min-height: 4mm !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 600 !important;
    text-align: center !important;
}
body.document-detail-view .sales-view-document .document-signature-view-space {
    height: 16mm !important;
    min-height: 16mm !important;
}
body.document-detail-view .sales-view-document .document-signature-view-box span {
    display: block !important;
    align-self: start !important;
    min-height: 4mm !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
body.document-detail-view > .page-content .sales-view-system-status,
body.document-detail-view .sales-view-system-status {
    margin: -1px 0 16px !important;
    border: 1px solid #888 !important;
    border-top: 0 !important;
    background: #fafafa !important;
}
@media (max-width: 760px) {
    body.document-detail-view .sales-view-info-grid { gap: 4px !important; }
    body.document-detail-view .sales-view-info-column > div {
        grid-template-columns: 31mm 2.5mm minmax(0, 1fr) !important;
    }
    body.document-detail-view .sales-view-document .document-signature-view-grid {
        grid-template-columns: repeat(3, minmax(48mm, 1fr)) !important;
        gap: 10mm !important;
        min-width: 160mm !important;
    }
}

/* ========================================================================
 * V2.10.105 - VALUASI STOK: MUTASI DIPISAHKAN, TIDAK ADA LABEL "BERSIH"
 * Pembelian, Retur Pembelian, Penjualan/HPP, dan Retur Penjualan ditampilkan
 * terpisah agar retur lintas periode tidak terlihat sebagai transaksi negatif.
 * ======================================================================== */
.stock-valuation-split-table {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
}
.stock-valuation-split-table col.svw-product { width: 280px; }
.stock-valuation-split-table col.svw-qty { width: 108px; }
.stock-valuation-split-table col.svw-average { width: 124px; }
.stock-valuation-split-table col.svw-value { width: 132px; }
.stock-valuation-split-table th:first-child,
.stock-valuation-split-table td:first-child {
    min-width: 260px !important;
    width: 280px !important;
    max-width: 360px !important;
}
.stock-valuation-split-table .sv-qty {
    min-width: 108px !important;
    white-space: nowrap !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}
.stock-valuation-split-table .sv-money {
    min-width: 132px !important;
    white-space: nowrap !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}
.stock-valuation-split-table .sv-group-purchase,
.stock-valuation-split-table .sv-group-purchase-return,
.stock-valuation-split-table .sv-group-sales,
.stock-valuation-split-table .sv-group-sales-return,
.stock-valuation-split-table .sv-group-adjustment,
.stock-valuation-split-table .sv-group-ending {
    border-left: 2px solid #94a3b8 !important;
}
.stock-valuation-split-table .sv-group-end {
    border-right: 1px solid #cbd5e1 !important;
}
.stock-valuation-split-table .sv-cell-purchase-return,
.stock-valuation-split-table .sv-cell-sales-return {
    background: #fffdf8 !important;
}
.stock-valuation-split-table .sv-cell-adjustment {
    background: #f8fafc !important;
}
.stock-valuation-split-table .sv-cell-ending {
    background: #f3f4f6 !important;
}
.stock-valuation-split-table thead .sv-group-purchase-return,
.stock-valuation-split-table thead .sv-group-sales-return {
    background: #f8fafc !important;
}
.stock-valuation-split-table tfoot th {
    font-variant-numeric: tabular-nums !important;
}
.stock-valuation-summary .stat-meta {
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
}
@media screen and (max-width: 760px) {
    .stock-valuation-split-table {
        min-width: 1550px !important;
    }
    .stock-valuation-split-table.has-adjustments {
        min-width: 1770px !important;
    }
}


/* ========================================================================
 * V2.10.106 - VALUASI STOK: KOLOM QTY STOK AWAL 30% LEBIH RINGKAS
 * Hanya kolom Qty pada kelompok Stok Awal yang diperkecil; kolom Qty mutasi
 * lain tetap menggunakan ukuran V2.10.105.
 * ======================================================================== */
.stock-valuation-split-table col.svw-opening-qty { width: 76px !important; }
.stock-valuation-split-table .sv-opening-qty-head,
.stock-valuation-split-table tbody td.sv-cell-opening.sv-qty {
    min-width: 76px !important;
    width: 76px !important;
    max-width: 76px !important;
}

/* V2.10.108 — Warning Hutang/Piutang */
.stat-reminder {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 600;
}
.stat-reminder.is-warning { color: #92400e; }
.stat-reminder.is-danger { color: #b91c1c; }
.stat-reminder.is-clear { color: #047857; }
.notification-section-label {
    padding: 8px 14px 5px;
    border-top: 1px solid var(--border);
    background: #f8fafc;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.notification-dropdown-header + .notification-section-label { border-top: 0; }

/* ========================================================================
 * V2.10.128 - VIEW FAKTUR PENJUALAN SESUAI REFERENSI FISIK
 * ======================================================================== */
body.document-detail-view .sales-view-invoice-photo {
    padding: 14px !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
}
body.document-detail-view .sales-view-invoice-photo > .document-company-view-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 0 8px !important;
    border: 0 !important;
}
body.document-detail-view .sales-view-invoice-photo > .document-company-view-card::after { display: none !important; }
body.document-detail-view .sales-view-invoice-photo .document-company-view-name {
    order: 1 !important;
    margin: 0 0 2px !important;
    font-size: 11pt !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
}
body.document-detail-view .sales-view-invoice-photo .document-company-view-npwp {
    order: 2 !important;
    margin: 0 0 2px !important;
    font-size: 9pt !important;
    line-height: 1.12 !important;
    font-weight: 600 !important;
}
body.document-detail-view .sales-view-invoice-photo .document-company-view-address {
    order: 3 !important;
    font-size: 9pt !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
}
body.document-detail-view .sales-view-invoice-photo-heading { padding: 0 0 6px !important; }
body.document-detail-view .sales-view-invoice-photo-title {
    margin-bottom: 6px !important;
    font-size: 12pt !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    text-align: center !important;
}
body.document-detail-view .sales-view-invoice-photo-meta {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(280px,35%) !important;
    gap: 32px !important;
    font-size: 9pt !important;
    line-height: 1.15 !important;
}
body.document-detail-view .sales-view-invoice-photo-customer > div,
body.document-detail-view .sales-view-invoice-photo-number {
    display: grid !important;
    grid-template-columns: 120px 12px minmax(0,1fr) !important;
    min-height: 22px !important;
    align-items: start !important;
}
body.document-detail-view .sales-view-invoice-photo-number {
    grid-template-columns: 34px 12px minmax(0,1fr) !important;
    margin-top: 22px !important;
}
body.document-detail-view .sales-view-invoice-photo-meta span,
body.document-detail-view .sales-view-invoice-photo-meta strong { font-weight: 600 !important; }
body.document-detail-view .sales-view-invoice-photo-meta i { font-style: normal !important; font-weight: 600 !important; }
body.document-detail-view .sales-view-invoice-photo-table-wrap { overflow-x: auto !important; }
body.document-detail-view .sales-view-invoice-photo-table {
    width: 100% !important;
    min-width: 760px !important;
    margin: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1px solid #000 !important;
}
body.document-detail-view .sales-view-invoice-photo-table th,
body.document-detail-view .sales-view-invoice-photo-table td {
    height: 30px !important;
    padding: 4px 7px !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 9pt !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
}
body.document-detail-view .sales-view-invoice-photo-table th { font-weight: 700 !important; text-align: center !important; }
body.document-detail-view .sales-view-invoice-photo-table th:nth-child(1),
body.document-detail-view .sales-view-invoice-photo-table td:nth-child(1) { width: 11% !important; }
body.document-detail-view .sales-view-invoice-photo-table th:nth-child(2),
body.document-detail-view .sales-view-invoice-photo-table td:nth-child(2) { width: 10% !important; }
body.document-detail-view .sales-view-invoice-photo-table th:nth-child(3),
body.document-detail-view .sales-view-invoice-photo-table td:nth-child(3) { width: 35% !important; }
body.document-detail-view .sales-view-invoice-photo-table th:nth-child(4),
body.document-detail-view .sales-view-invoice-photo-table td:nth-child(4) { width: 24% !important; }
body.document-detail-view .sales-view-invoice-photo-table th:nth-child(5),
body.document-detail-view .sales-view-invoice-photo-table td:nth-child(5) { width: 20% !important; }
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-blank td { height: 28px !important; padding: 0 !important; }
body.document-detail-view .sales-view-invoice-photo-bottom {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 330px !important;
    gap: 28px !important;
    align-items: start !important;
}
body.document-detail-view .sales-view-invoice-photo-terbilang {
    display: grid !important;
    grid-template-columns: 105px minmax(0,1fr) !important;
    gap: 8px !important;
    padding-top: 7px !important;
    font-size: 9pt !important;
    line-height: 1.25 !important;
}
body.document-detail-view .sales-view-invoice-photo-terbilang strong,
body.document-detail-view .sales-view-invoice-photo-terbilang span { font-weight: 600 !important; }
body.document-detail-view .sales-view-invoice-photo-summary {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    font-size: 9pt !important;
}
body.document-detail-view .sales-view-invoice-photo-summary th,
body.document-detail-view .sales-view-invoice-photo-summary td {
    height: 25px !important;
    padding: 3px 7px !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
}
body.document-detail-view .sales-view-invoice-photo-summary th { width: 54% !important; text-align: left !important; font-weight: 600 !important; }
body.document-detail-view .sales-view-invoice-photo-summary td { text-align: right !important; font-weight: 600 !important; }
body.document-detail-view .sales-view-invoice-photo-summary .grand th,
body.document-detail-view .sales-view-invoice-photo-summary .grand td { font-weight: 700 !important; }
body.document-detail-view .sales-view-invoice-photo-footer-note {
    width: 65% !important;
    margin-top: 10px !important;
    font-size: 9pt !important;
    font-weight: 600 !important;
    text-align: center !important;
}
body.document-detail-view .sales-view-invoice-photo-signatures {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 120px !important;
    margin: 5px 55px 10px !important;
    font-size: 9pt !important;
    font-weight: 600 !important;
    text-align: center !important;
}
body.document-detail-view .sales-view-invoice-photo-signatures > div {
    display: grid !important;
    grid-template-rows: auto 52px auto !important;
}
body.document-detail-view .sales-view-invoice-photo-signatures strong,
body.document-detail-view .sales-view-invoice-photo-signatures em { font-style: normal !important; font-weight: 600 !important; }
body.document-detail-view .sales-view-invoice-photo-signatures .space { min-height: 52px !important; }
@media (max-width: 900px) {
    body.document-detail-view .sales-view-invoice-photo-meta { grid-template-columns: 1fr !important; gap: 4px !important; }
    body.document-detail-view .sales-view-invoice-photo-number { margin-top: 0 !important; }
    body.document-detail-view .sales-view-invoice-photo-bottom { grid-template-columns: 1fr !important; gap: 8px !important; }
    body.document-detail-view .sales-view-invoice-photo-summary { width: 100% !important; }
    body.document-detail-view .sales-view-invoice-photo-footer-note { width: 100% !important; }
    body.document-detail-view .sales-view-invoice-photo-signatures { gap: 30px !important; margin-left: 15px !important; margin-right: 15px !important; }
}


/* ========================================================================
 * V2.10.129 - VIEW FAKTUR PENJUALAN: SUMMARY MENYATU + CATATAN RATA KIRI
 * ======================================================================== */
body.document-detail-view .sales-view-invoice-photo .document-company-view-card,
body.document-detail-view .sales-view-invoice-photo .document-company-view-card * {
    text-align: left !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-summary-row th,
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-summary-row td {
    height: 25px !important;
    min-height: 25px !important;
    padding: 3px 7px !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-summary-label {
    text-align: left !important;
    font-weight: 600 !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-summary-value {
    text-align: right !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-grand .sales-view-invoice-photo-summary-label,
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-grand .sales-view-invoice-photo-summary-value {
    font-weight: 700 !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-terbilang-cell {
    padding: 7px !important;
    vertical-align: top !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-terbilang {
    display: grid !important;
    grid-template-columns: 105px minmax(0,1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    text-align: left !important;
}
body.document-detail-view .sales-view-invoice-photo-footer-note {
    width: 100% !important;
    margin-top: 10px !important;
    text-align: left !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-summary-label { width: 24% !important; }
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-summary-value { width: 20% !important; }

/* ========================================================================
 * V2.10.130 - FAKTUR PENJUALAN: ALIGN ALAMAT HEADER
 * Alamat baris 1-3 dan Kota harus mulai dari titik kiri yang sama.
 * ======================================================================== */
body.document-detail-view .sales-view-invoice-photo .document-company-view-address {
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
body.document-detail-view .sales-view-invoice-photo .document-company-view-address > span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
}

/* ========================================================================
 * V2.10.131 - VIEW FAKTUR PENJUALAN: TERBILANG LANGSUNG TANPA GARIS
 * ======================================================================== */
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-terbilang-cell {
    border: 0 !important;
    padding: 7px 7px 0 0 !important;
    vertical-align: top !important;
    background: #fff !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-terbilang {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    text-align: left !important;
}

/* ========================================================================
 * V2.10.134 - VIEW FAKTUR PENJUALAN: BORDER TERBILANG BENAR-BENAR DIHILANGKAN
 * Pada border-collapse, border:none masih dapat kalah oleh border sel tetangga.
 * Gunakan border-style:hidden pada sisi luar area terbilang agar garis tidak
 * dirender; sisi kanan tetap menjadi pembatas tabel ringkasan nominal.
 * ======================================================================== */
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-terbilang-cell {
    border-top-style: hidden !important;
    border-left-style: hidden !important;
    border-bottom-style: hidden !important;
    border-right: 1px solid #000 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* ========================================================================
 * V2.10.135 - VIEW FAKTUR PENJUALAN: GARIS ATAS TERBILANG DIKEMBALIKAN
 * Hanya border atas area Terbilang yang ditampilkan kembali. Sisi kiri dan
 * bawah tetap tanpa border; sisi kanan tetap menjadi pemisah summary nominal.
 * ======================================================================== */
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-terbilang-cell {
    border-top: 1px solid #000 !important;
    border-left-style: hidden !important;
    border-bottom-style: hidden !important;
    border-right: 1px solid #000 !important;
}

/* ========================================================================
 * V2.10.138 - FAKTUR PENJUALAN: NAMA PERUSAHAAN 12PT
 * Hanya nama perusahaan pada header Faktur Penjualan yang dibuat 12pt.
 * Elemen lain tetap mengikuti layout V2.10.137 One Sheet Fix.
 * ======================================================================== */
body.document-detail-view .sales-view-invoice-photo .document-company-view-name {
    font-size: 12pt !important;
}


/* ========================================================================
 * V2.10.139 - FAKTUR PENJUALAN: NAMA PERUSAHAAN 12PT + NAMA BARANG NORMAL
 * Nama perusahaan tetap 12pt. Nama barang tidak bold pada View.
 * ======================================================================== */
body.document-detail-view .sales-view-invoice-photo .document-company-view-name {
    font-size: 12pt !important;
}
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-product-cell,
body.document-detail-view .sales-view-invoice-photo-table .sales-view-invoice-photo-product-cell strong {
    font-weight: 400 !important;
}

/* V2.10.174 — Master Detil Barang / Stok lebih rapat */
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-heading {
    margin-bottom: 8px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-heading h1 {
    margin-bottom: 1px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-heading p {
    margin-top: 1px;
    font-size: 10.5px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-panel {
    margin-bottom: 8px;
    overflow: visible;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-panel + .stock-detail-table-card {
    margin-top: 8px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 7px 10px;
    cursor: pointer;
    list-style: none;
    background: #fbfdff;
    border-bottom: 1px solid transparent;
    user-select: none;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-summary::-webkit-details-marker { display: none; }
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-summary > span:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-summary strong {
    font-size: 12px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-summary small {
    color: #94a3b8;
    font-size: 9.5px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-toggle {
    color: #64748b;
    font-size: 9.5px;
    white-space: nowrap;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-panel[open] .stock-opening-summary {
    border-bottom-color: #e2e8f0;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-panel .card-body {
    padding: 9px 10px 10px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-grid {
    display: grid;
    grid-template-columns: minmax(210px, 1.8fr) minmax(132px, .9fr) minmax(90px, .65fr) minmax(105px, .72fr) minmax(120px, .85fr) minmax(112px, .78fr);
    gap: 7px 8px;
    align-items: end;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-grid .field label {
    margin-bottom: 3px;
    font-size: 10px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-grid .field input,
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-grid .field select {
    min-height: 30px;
    height: 30px;
    padding: 4px 7px;
    font-size: 10.7px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-notes-field {
    grid-column: 1 / span 5;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-action {
    display: flex;
    align-items: end;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-action .btn {
    width: 100%;
    min-height: 30px;
    padding: 5px 8px;
    font-size: 10.7px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table-card .master-card-header {
    min-height: 38px;
    padding: 6px 9px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table-card .master-filter-bar {
    gap: 5px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table-card .master-filter-bar input,
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table-card .master-filter-bar select {
    min-height: 28px;
    height: 28px;
    padding: 4px 7px;
    font-size: 10.5px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table-card .btn.btn-sm {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10.3px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table-card .master-record-count {
    padding: 3px 7px;
    font-size: 9.3px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table-card .master-table-responsive {
    max-height: calc(100vh - 172px);
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-panel[open] + .stock-detail-table-card .master-table-responsive {
    max-height: min(56vh, 590px);
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table {
    font-size: 10.5px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table th,
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table td {
    padding: 4px 6px;
    line-height: 1.22;
    vertical-align: middle;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table thead th {
    font-size: 9px;
    letter-spacing: .18px;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table td.num {
    text-align: right;
    white-space: nowrap;
}
body.master-workspace[data-print-route="detil_barang.php"] .stock-detail-table td:first-child {
    min-width: 190px;
}
@media (max-width: 1180px) {
    body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
    body.master-workspace[data-print-route="detil_barang.php"] .stock-product-field { grid-column: span 2; }
    body.master-workspace[data-print-route="detil_barang.php"] .stock-notes-field { grid-column: span 2; }
}
@media (max-width: 760px) {
    body.master-workspace[data-print-route="detil_barang.php"] .stock-opening-grid {
        grid-template-columns: 1fr 1fr;
    }
    body.master-workspace[data-print-route="detil_barang.php"] .stock-product-field,
    body.master-workspace[data-print-route="detil_barang.php"] .stock-notes-field { grid-column: 1 / -1; }
}

/* V2.10.195 - Penanda input yang gagal validasi global */
.form-control.jcom-invalid-field,
.form-select.jcom-invalid-field,
textarea.jcom-invalid-field,
input.jcom-invalid-field,
select.jcom-invalid-field {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .10) !important;
}