:root {
    --app-bg: #eef4fb;
    --app-blue: #0b5ed7;
    --app-blue-dark: #073b8e;
    --app-blue-soft: #eaf3ff;
    --app-cyan: #35b9ff;
    --app-white: #ffffff;
    --app-text: #14213d;
    --app-muted: #64748b;
    --app-border: #dbe7f5;
    --app-border-soft: #edf3fa;
    --app-shadow: 0 18px 50px rgba(7, 59, 142, .10);
    --app-surface: rgba(255, 255, 255, .94);
    --app-surface-solid: #ffffff;
    --app-surface-soft: #f8fbff;
    --app-table-head: linear-gradient(180deg, #f7fbff, #edf6ff);
    --app-table-hover: #f8fbff;
    --app-input-bg: #ffffff;
    --app-topbar-bg: rgba(255, 255, 255, .86);
    --app-sidebar-bg:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(229, 239, 252, .98)),
        radial-gradient(circle at 0% 0%, rgba(76, 157, 255, .22), transparent 36%),
        radial-gradient(circle at 100% 16%, rgba(53, 185, 255, .18), transparent 34%);
    --sidebar-text: #1f3354;
    --sidebar-muted: #60708a;
    --sidebar-border: rgba(76, 124, 180, .18);
    --sidebar-line: rgba(63, 91, 132, .16);
    --sidebar-item: rgba(40, 84, 145, .06);
    --sidebar-item-hover: rgba(11, 94, 215, .09);
    --sidebar-item-active: linear-gradient(90deg, rgba(11, 94, 215, .18), rgba(53, 185, 255, .08));
    --sidebar-icon-bg: rgba(11, 94, 215, .08);
    --sidebar-icon-border: rgba(11, 94, 215, .12);
    --sidebar-toggle-bg: rgba(11, 94, 215, .08);
    --sidebar-switch-bg: rgba(11, 94, 215, .14);
    --sidebar-logout-bg: rgba(225, 72, 90, .10);
    --app-body-bg:
        linear-gradient(180deg, rgba(238, 244, 251, .96), rgba(248, 251, 255, .98)),
        radial-gradient(circle at 85% 0%, rgba(53, 185, 255, .16), transparent 28%);
    --sidebar-width: clamp(232px, 15vw, 286px);
    --sidebar-top: clamp(12px, 1.25vw, 24px);
    --sidebar-pad: clamp(12px, .95vw, 18px);
    --sidebar-gap: clamp(10px, .95vw, 18px);
    --sidebar-radius: clamp(18px, 1.35vw, 26px);
}

/* Compact centered login */
.login-page {
    background: #eef3fa !important;
    min-height: 100dvh;
}

.login-shell {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: 32px 16px !important;
}

.login-glass-card.login-compact-card {
    background: #ffffff !important;
    border: 1px solid #d4dfed !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    display: block !important;
    max-width: 504px !important;
    min-height: auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: min(100%, 504px) !important;
}

.login-compact-card::before,
.login-compact-card .login-bubble,
.login-compact-card .login-hero-panel {
    display: none !important;
}

.login-compact-card .login-form-panel {
    background: #ffffff !important;
    display: block !important;
    min-height: auto !important;
    padding: 40px 38px 36px !important;
}

.login-compact-card .login-brand {
    justify-content: center !important;
    margin: 0 0 22px !important;
    text-align: center !important;
}

.login-compact-card .login-brand img {
    display: block !important;
    height: 102px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    width: 132px !important;
}

.login-compact-card .login-heading {
    margin: 0 0 34px !important;
    text-align: center !important;
}

.login-compact-card .login-heading h1 {
    color: #07172f !important;
    font-size: 29px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
}

.login-compact-card .login-heading strong {
    color: #064899 !important;
    display: block !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    margin-bottom: 10px !important;
}

.login-compact-card .login-heading p {
    color: #60708a !important;
    font-size: 16px !important;
    margin: 0 !important;
}

.login-compact-card .login-form {
    gap: 18px !important;
}

.login-compact-card .login-form .form-label {
    color: #07172f !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.login-compact-card .login-input {
    align-items: stretch !important;
    background: #eaf2ff !important;
    border: 1px solid #d2dfef !important;
    border-radius: 8px !important;
    display: flex !important;
    min-height: 62px !important;
    padding: 0 !important;
}

.login-compact-card .login-input:focus-within {
    border-color: #1b5aaa !important;
    box-shadow: 0 0 0 3px rgba(27, 90, 170, .14) !important;
}

.login-compact-card .login-input-icon {
    align-items: center;
    background: #f4f8ff;
    border-right: 1px solid #d2dfef;
    color: #68778f;
    display: inline-flex;
    flex: 0 0 60px;
    font-size: 18px;
    justify-content: center;
}

.login-compact-card .login-input input {
    background: transparent !important;
    border: 0 !important;
    color: #07172f !important;
    flex: 1 1 auto !important;
    font-size: 18px !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 16px !important;
}

.login-compact-card .login-input input::placeholder {
    color: #6b7890 !important;
}

.login-compact-card .login-password-toggle {
    color: #68778f !important;
    flex: 0 0 48px !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
}

.login-compact-card .login-row {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 2px !important;
}

.login-compact-card .login-check {
    color: #5f6f86 !important;
    font-size: 16px !important;
    gap: 10px !important;
}

.login-compact-card .login-check input {
    border-color: #9aa9bd !important;
    height: 15px !important;
    width: 15px !important;
}

.login-compact-card .login-forgot {
    color: #00459a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.login-compact-card .login-submit {
    background: #1b57a4 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    height: 60px !important;
    margin-top: 4px !important;
}

.login-compact-card .login-submit:hover,
.login-compact-card .login-submit:focus {
    background: #164b8f !important;
}

.login-compact-card .login-terms {
    border-top: 1px solid #d7e0ec !important;
    color: #5f6f86 !important;
    font-size: 15px !important;
    margin-top: 26px !important;
    padding-top: 24px !important;
    text-align: center !important;
}

@media (max-width: 575.98px) {
    .login-glass-card.login-compact-card {
        max-width: 100% !important;
    }

    .login-compact-card .login-form-panel {
        padding: 30px 22px 28px !important;
    }

    .login-compact-card .login-heading h1 {
        font-size: 25px !important;
    }

    .login-compact-card .login-input {
        min-height: 56px !important;
    }
}

/* Login polish overrides */
.login-compact-card .login-form > div {
    display: grid !important;
    gap: 8px !important;
    position: static !important;
}

.login-compact-card .login-form .form-label {
    left: auto !important;
    margin: 0 !important;
    pointer-events: auto !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

.login-compact-card .login-brand {
    margin-bottom: 18px !important;
}

.login-compact-card .login-brand img {
    height: 76px !important;
    width: 118px !important;
}

.login-compact-card .login-heading {
    margin-bottom: 30px !important;
}

.login-compact-card .login-form {
    max-width: 100% !important;
}

.login-compact-card .login-input {
    gap: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.login-compact-card .login-input input {
    line-height: 1.2 !important;
}

.login-compact-card .login-submit {
    text-transform: none !important;
}

:root[data-theme="dark"] {
    --app-bg: #08111f;
    --app-blue: #4c9dff;
    --app-blue-dark: #78b7ff;
    --app-blue-soft: #122d50;
    --app-cyan: #45d0ff;
    --app-white: #101b2e;
    --app-text: #e8f1ff;
    --app-muted: #9fb0c9;
    --app-border: #233651;
    --app-border-soft: #1d2d44;
    --app-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    --app-surface: rgba(14, 25, 42, .96);
    --app-surface-solid: #101b2e;
    --app-surface-soft: #13243b;
    --app-table-head: linear-gradient(180deg, #142946, #10233d);
    --app-table-hover: #162943;
    --app-input-bg: #0e192a;
    --app-topbar-bg: rgba(12, 23, 39, .88);
    --app-sidebar-bg:
        linear-gradient(180deg, rgba(15, 25, 46, .98), rgba(7, 14, 28, .98)),
        radial-gradient(circle at 18% 0%, rgba(64, 148, 255, .34), transparent 35%),
        radial-gradient(circle at 100% 18%, rgba(41, 210, 255, .18), transparent 32%);
    --sidebar-text: #f5f8ff;
    --sidebar-muted: rgba(255, 255, 255, .64);
    --sidebar-border: rgba(255, 255, 255, .14);
    --sidebar-line: rgba(255, 255, 255, .14);
    --sidebar-item: rgba(255, 255, 255, .08);
    --sidebar-item-hover: rgba(255, 255, 255, .12);
    --sidebar-item-active: linear-gradient(90deg, rgba(64, 148, 255, .34), rgba(64, 148, 255, .10));
    --sidebar-icon-bg: rgba(255, 255, 255, .08);
    --sidebar-icon-border: rgba(255, 255, 255, .10);
    --sidebar-toggle-bg: rgba(255, 255, 255, .10);
    --sidebar-switch-bg: rgba(255, 255, 255, .16);
    --sidebar-logout-bg: rgba(255, 255, 255, .88);
    --app-body-bg:
        linear-gradient(180deg, rgba(8, 17, 31, .98), rgba(10, 20, 36, .98)),
        radial-gradient(circle at 88% 0%, rgba(53, 185, 255, .12), transparent 30%);
    color-scheme: dark;
}

* {
    letter-spacing: 0;
}

body,
.app-body {
    background: var(--app-body-bg);
    color: var(--app-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    min-height: 100vh;
}

a {
    text-decoration: none;
}

.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    background: var(--app-sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 0 var(--sidebar-radius) var(--sidebar-radius) 0;
    box-shadow: 18px 0 55px rgba(7, 22, 58, .24);
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap);
    height: calc(100dvh - (var(--sidebar-top) * 2));
    left: 0;
    overflow: hidden;
    padding: var(--sidebar-pad);
    position: fixed;
    top: var(--sidebar-top);
    width: var(--sidebar-width);
    z-index: 1020;
}

.app-sidebar::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 42%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.app-sidebar > * {
    position: relative;
    z-index: 1;
}

.app-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    width: calc(100% - var(--sidebar-width));
}

.sidebar-dots {
    display: flex;
    gap: clamp(5px, .45vw, 7px);
    padding: 4px clamp(5px, .6vw, 8px) 0;
}

.sidebar-dots span {
    border-radius: 999px;
    height: clamp(6px, .5vw, 8px);
    width: clamp(6px, .5vw, 8px);
}

.sidebar-dots span:nth-child(1) {
    background: #ff6b6b;
}

.sidebar-dots span:nth-child(2) {
    background: #ffd166;
}

.sidebar-dots span:nth-child(3) {
    background: #59d98e;
}

.sidebar-profile {
    align-items: center;
    border-bottom: 1px solid var(--sidebar-line);
    color: var(--sidebar-text);
    display: flex;
    gap: clamp(9px, .75vw, 12px);
    padding: clamp(8px, .75vw, 12px) clamp(5px, .6vw, 8px) clamp(12px, 1vw, 20px);
}

.sidebar-profile:hover {
    color: var(--sidebar-text);
}

.brand-mark {
    align-items: center;
    background: var(--sidebar-icon-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 50%;
    box-shadow: 0 14px 34px rgba(7, 22, 58, .24);
    color: var(--sidebar-text);
    display: flex;
    flex: 0 0 clamp(38px, 2.8vw, 46px);
    font-size: clamp(18px, 1.3vw, 21px);
    height: clamp(38px, 2.8vw, 46px);
    justify-content: center;
    width: clamp(38px, 2.8vw, 46px);
}

.sidebar-profile-copy,
.sidebar-profile-copy strong,
.sidebar-profile-copy small {
    display: block;
}

.sidebar-profile-copy strong {
    color: var(--sidebar-text);
    font-size: clamp(12px, .8vw, 14px);
    font-weight: 800;
    line-height: 1.25;
}

.sidebar-profile-copy small {
    color: var(--sidebar-muted);
    font-size: clamp(11px, .7vw, 12px);
    font-weight: 500;
}

.sidebar-menu {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: clamp(5px, .55vw, 8px);
    grid-auto-rows: max-content;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
}

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

.sidebar-menu::-webkit-scrollbar-thumb {
    background: var(--sidebar-line);
    border-radius: 999px;
}

.sidebar-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--sidebar-muted);
    display: flex;
    font-size: clamp(12px, .76vw, 13px);
    font-weight: 700;
    gap: clamp(8px, .7vw, 12px);
    min-height: clamp(38px, 2.55vw, 44px);
    padding: clamp(7px, .6vw, 9px) clamp(9px, .75vw, 12px);
    transition: .18s ease;
}

.sidebar-group {
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.sidebar-link-parent .sidebar-caret {
    background: transparent;
    border: 0;
    color: inherit;
    flex: 0 0 auto;
    font-size: 13px;
    height: auto;
    margin-left: auto;
    transform: rotate(-90deg);
    transition: .18s ease;
    width: auto;
}

.sidebar-group.open .sidebar-caret {
    transform: rotate(0);
}

.sidebar-submenu {
    box-sizing: border-box;
    display: none;
    gap: 2px;
    grid-template-columns: minmax(0, 1fr);
    padding: 3px 0 7px clamp(42px, 3vw, 54px);
    width: 100%;
}

.sidebar-group.open .sidebar-submenu {
    display: grid;
}

.sidebar-nested-group {
    display: grid;
    gap: 2px;
    grid-template-columns: minmax(0, 1fr);
}

.sidebar-sublink {
    border-radius: 10px;
    color: var(--sidebar-muted);
    display: block;
    font-size: clamp(12px, .76vw, 13px);
    font-weight: 700;
    line-height: 1.25;
    padding: clamp(7px, .58vw, 9px) clamp(9px, .75vw, 12px);
    transition: .18s ease;
    white-space: normal;
    width: 100%;
}

.sidebar-sublink-parent {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.sidebar-sublink-child {
    font-size: clamp(11px, .7vw, 12px);
    padding-left: clamp(13px, 1vw, 16px);
}

.sidebar-nested-caret {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: .75;
    transition: transform .18s ease;
}

.sidebar-nested-group.open .sidebar-nested-caret {
    transform: rotate(90deg);
}

.sidebar-nested-submenu {
    display: none;
    gap: 2px;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 12px;
}

.sidebar-nested-group.open .sidebar-nested-submenu {
    display: grid;
}

.sidebar-sublink:hover,
.sidebar-sublink:focus,
.sidebar-sublink.active {
    background: var(--sidebar-item-hover);
    color: var(--app-blue);
}

.sidebar-link i {
    align-items: center;
    background: var(--sidebar-icon-bg);
    border: 1px solid var(--sidebar-icon-border);
    border-radius: 10px;
    color: var(--sidebar-muted);
    display: inline-flex;
    flex: 0 0 clamp(26px, 1.9vw, 30px);
    font-size: clamp(12px, .85vw, 14px);
    height: clamp(26px, 1.9vw, 30px);
    justify-content: center;
    width: clamp(26px, 1.9vw, 30px);
}

.sidebar-link span {
    min-width: 0;
}

.sidebar-link:hover,
.sidebar-link:focus {
    background: var(--sidebar-item-hover);
    border-color: var(--sidebar-border);
    color: var(--sidebar-text);
    transform: translateX(2px);
}

.sidebar-link.active {
    background: var(--sidebar-item-active);
    border-color: rgba(126, 183, 255, .42);
    box-shadow: inset 3px 0 0 #57b9ff, 0 16px 36px rgba(9, 24, 65, .20);
    color: var(--sidebar-text);
}

.sidebar-link.active i {
    background: rgba(87, 185, 255, .22);
    border-color: rgba(126, 211, 255, .34);
    color: var(--sidebar-text);
}

.sidebar-footer {
    border-top: 1px solid var(--sidebar-line);
    display: grid;
    gap: clamp(7px, .65vw, 10px);
    margin-top: auto;
    padding-top: clamp(9px, .75vw, 14px);
}

.sidebar-mode,
.sidebar-logout {
    align-items: center;
    border: 0;
    border-radius: 14px;
    display: flex;
    font-size: clamp(11px, .72vw, 12px);
    font-weight: 800;
    justify-content: space-between;
    min-height: clamp(36px, 2.45vw, 42px);
    padding: clamp(8px, .65vw, 10px) clamp(9px, .75vw, 12px);
}

.sidebar-mode {
    background: var(--sidebar-toggle-bg);
    color: var(--sidebar-muted);
    cursor: pointer;
    width: 100%;
}

.sidebar-mode span {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.sidebar-mode span i {
    color: #b9dcff;
}

.theme-switch {
    align-items: center;
    background: var(--sidebar-switch-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 38px;
    height: 22px;
    justify-content: flex-start;
    padding: 2px;
    transition: .18s ease;
}

.theme-switch span {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
    display: block;
    height: 16px;
    transform: translateX(0);
    transition: .18s ease;
    width: 16px;
}

:root[data-theme="dark"] .theme-switch {
    background: rgba(76, 157, 255, .35);
    border-color: rgba(126, 183, 255, .42);
}

:root[data-theme="dark"] .theme-switch span {
    transform: translateX(16px);
}

.sidebar-logout {
    background: var(--sidebar-logout-bg);
    color: #e1485a;
    justify-content: center;
    gap: 8px;
}

.sidebar-logout:hover {
    background: var(--app-surface-solid);
    color: #c82d40;
}

.app-topbar {
    align-items: center;
    background: var(--app-topbar-bg);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(18px);
    display: flex;
    gap: 16px;
    min-height: 78px;
    padding: 14px 26px;
    position: sticky;
    top: 0;
    z-index: 1010;
}

.topbar-label {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.topbar-title {
    color: var(--app-text);
    font-size: 22px;
    font-weight: 800;
}

.sidebar-toggle {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    width: 42px;
}

.user-box {
    align-items: center;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
    display: flex;
    gap: 10px;
    padding: 8px;
}

.topbar-notification-btn {
    align-items: center;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text);
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    position: relative;
    text-decoration: none;
}

.topbar-notification-btn:hover {
    color: var(--app-blue);
}

.topbar-notification-btn span {
    align-items: center;
    background: #ff3b5f;
    border: 2px solid var(--app-surface-solid);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 5px;
    position: absolute;
    right: -7px;
    top: -7px;
}

.user-avatar {
    align-items: center;
    background: var(--app-blue-soft);
    border-radius: 8px;
    color: var(--app-blue);
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    overflow: hidden;
    width: 34px;
}

.user-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.user-copy {
    line-height: 1.15;
    min-width: 96px;
}

.user-copy span {
    color: var(--app-muted);
    display: block;
    font-size: 12px;
}

.user-copy strong {
    color: var(--app-text);
    display: block;
    font-size: 13px;
}

.app-container {
    max-width: 1500px;
}

.page-heading {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-heading h1 {
    color: var(--app-text);
    font-size: 30px;
}

.page-heading p {
    color: var(--app-muted);
    line-height: 1.65;
    margin: 0;
    max-width: 900px;
}

.btn {
    border-radius: 8px;
    font-weight: 700;
    min-height: 40px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--app-blue), #087df0);
    border: 0;
    box-shadow: 0 12px 28px rgba(11, 94, 215, .25);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--app-blue-dark), var(--app-blue));
}

.btn-light,
.btn-outline-primary {
    background: var(--app-surface-solid);
    border-color: var(--app-border);
}

.stat-card,
.panel,
.flow-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    box-shadow: var(--app-shadow);
}

.notification-page-list {
    display: grid;
    gap: 10px;
}

.notification-page-item {
    align-items: center;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text);
    display: flex;
    gap: 12px;
    padding: 14px;
    text-decoration: none;
}

.notification-page-item:hover {
    border-color: color-mix(in srgb, var(--app-blue) 45%, var(--app-border));
    color: var(--app-text);
}

.notification-page-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.notification-page-item span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.notification-page-item strong {
    color: var(--app-text);
}

.notification-page-item small,
.notification-page-item em {
    color: var(--app-muted);
    font-size: 13px;
    font-style: normal;
}

.notification-page-empty {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px dashed var(--app-border);
    border-radius: 8px;
    color: var(--app-muted);
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 30px;
    text-align: center;
}

.notification-page-empty i {
    color: #19a463;
    font-size: 30px;
}

.notification-page-empty strong {
    color: var(--app-text);
}

.stat-card {
    height: 100%;
    overflow: hidden;
    padding: 22px;
    position: relative;
}

.stat-card::after {
    background: linear-gradient(135deg, rgba(11, 94, 215, .14), rgba(53, 185, 255, .05));
    border-radius: 999px;
    content: "";
    height: 96px;
    position: absolute;
    right: -34px;
    top: -34px;
    width: 96px;
}

.stat-card p {
    font-size: 14px;
    font-weight: 700;
}

.stat-card h2 {
    color: var(--app-text);
    font-size: 36px;
    line-height: 1;
}

.stat-trend {
    color: #0f9f6e;
    font-size: 12px;
    font-weight: 800;
}

.stat-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 22px;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 48px;
    z-index: 1;
}

.stat-icon-primary,
.stat-icon-info {
    background: var(--app-blue-soft);
    color: var(--app-blue);
}

.stat-icon-success {
    background: #e8f8f0;
    color: #159957;
}

.stat-icon-warning {
    background: #fff6df;
    color: #c47a00;
}

.stat-icon-danger {
    background: #ffe9ed;
    color: #dc3545;
}

.panel {
    padding: 24px;
}

.panel-title {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.panel h2,
.flow-card h2,
.flow-card h3 {
    color: var(--app-text);
}

.flow-card {
    height: 100%;
    overflow: hidden;
    padding: 20px;
}

a.flow-card {
    color: inherit;
    display: block;
    min-height: 132px;
    width: 100%;
}

.flow-card h2,
.flow-card p {
    overflow-wrap: anywhere;
}

.master-card.active,
.master-card:hover,
.master-card:focus {
    border-color: rgba(76, 157, 255, .45);
    box-shadow: 0 16px 38px rgba(11, 94, 215, .16);
    transform: translateY(-1px);
}

.text-secondary {
    color: var(--app-muted) !important;
}

.priority-list {
    display: grid;
    gap: 10px;
}

.priority-item {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 13px 14px;
}

.warehouse-meter {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 16px;
}

.chart-wrap {
    align-items: end;
    background:
        linear-gradient(to top, rgba(219, 231, 245, .7) 1px, transparent 1px);
    background-size: 100% 38px;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(6, minmax(64px, 1fr));
    min-height: 260px;
    overflow-x: auto;
    padding: 28px 20px 16px;
}

.chart-group {
    align-items: center;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.chart-bars {
    align-items: end;
    display: flex;
    gap: 7px;
    height: 148px;
}

.chart-bar {
    border-radius: 8px 8px 3px 3px;
    box-shadow: 0 12px 20px rgba(11, 94, 215, .16);
    display: block;
    width: 13px;
}

.bar-tender {
    background: var(--app-blue);
}

.bar-kontrak {
    background: #35b9ff;
}

.bar-produksi {
    background: #74d3ff;
}

.chart-label {
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 800;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

.chart-legend span {
    align-items: center;
    color: var(--app-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
}

.legend-dot {
    border-radius: 999px;
    display: inline-flex;
    height: 10px;
    width: 10px;
}

.dot-tender {
    background: var(--app-blue);
}

.dot-kontrak {
    background: #35b9ff;
}

.dot-produksi {
    background: #74d3ff;
}

.dashboard-status-chart {
    display: grid;
    gap: 14px;
}

.dashboard-status-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(112px, 1fr) minmax(120px, 2fr) 42px;
}

.dashboard-status-row span,
.dashboard-status-row strong {
    color: var(--app-text);
    font-size: 13px;
    font-weight: 800;
}

.dashboard-status-row strong {
    text-align: right;
}

.dashboard-status-track {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
}

.dashboard-status-track i {
    border-radius: inherit;
    display: block;
    height: 100%;
}

.dashboard-status-track .bar-danger {
    background: #dc3545;
}

.dashboard-status-track .bar-success {
    background: #159957;
}

.dashboard-status-track .bar-warning {
    background: #f4b000;
}

.dashboard-analysis-item {
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1.55;
}

.table-responsive {
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
}

.material-table-scroll {
    max-height: 520px;
    overflow-y: auto;
}

.material-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tender-filter {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(260px, 1fr) 180px auto auto;
    margin: 18px 0 14px;
}

.tender-filter-search {
    position: relative;
}

.tender-filter-search i {
    color: var(--app-muted);
    left: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.tender-filter-search .form-control {
    padding-left: 42px;
}

.tender-table-scroll {
    max-height: 560px;
    overflow: auto;
}

.tender-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tender-stock-filter {
    align-items: center;
    display: flex;
    gap: 10px;
    margin: 18px 0 14px;
}

.tender-stock-filter .tender-filter-search {
    max-width: 480px;
    width: 100%;
}

.tender-stock-scroll {
    max-height: 430px;
    overflow: auto;
}

.tender-stock-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tender-stock-table {
    min-width: 1120px;
}

.tender-stock-table th {
    white-space: nowrap;
}

.tender-stock-table th:nth-child(2),
.tender-stock-table td:nth-child(2) {
    min-width: 360px;
}

.tender-data-table {
    min-width: 1180px;
    table-layout: fixed;
}

.tender-data-table th:nth-child(1),
.tender-data-table td:nth-child(1) {
    width: 30%;
}

.tender-data-table th:nth-child(2),
.tender-data-table td:nth-child(2) {
    width: 21%;
}

.tender-data-table th:nth-child(3),
.tender-data-table td:nth-child(3) {
    width: 11%;
}

.tender-data-table th:nth-child(4),
.tender-data-table td:nth-child(4) {
    width: 13%;
}

.tender-data-table th:nth-child(5),
.tender-data-table td:nth-child(5) {
    width: 13%;
}

.tender-data-table th:nth-child(6),
.tender-data-table td:nth-child(6) {
    width: 96px;
}

.tender-data-table th:nth-child(7),
.tender-data-table td:nth-child(7) {
    width: 140px;
}

.tender-data-table .badge {
    white-space: nowrap;
}

.tender-data-table .action-buttons {
    flex-wrap: nowrap;
    justify-content: center;
}

.khs-list-table {
    min-width: 1340px;
    table-layout: fixed;
}

.khs-list-table th:nth-child(1),
.khs-list-table td:nth-child(1) {
    width: 64px;
    text-align: center;
}

.khs-list-table th:nth-child(2),
.khs-list-table td:nth-child(2) {
    width: 300px;
}

.khs-list-table th:nth-child(3),
.khs-list-table td:nth-child(3) {
    width: 250px;
}

.khs-list-table th:nth-child(4),
.khs-list-table td:nth-child(4) {
    width: 240px;
}

.khs-list-table th:nth-child(5),
.khs-list-table td:nth-child(5) {
    width: 170px;
}

.khs-list-table th:nth-child(6),
.khs-list-table td:nth-child(6) {
    width: 190px;
}

.khs-list-table th:nth-child(7),
.khs-list-table td:nth-child(7) {
    width: 140px;
    text-align: center;
}

.khs-list-table .badge,
.khs-list-table .action-buttons {
    white-space: nowrap;
}

.khs-list-table .action-buttons {
    flex-wrap: nowrap;
}

.khs-date-range,
.khs-money-value {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    white-space: nowrap;
}

.khs-money-value {
    font-weight: 700;
}

.kontrak-filter {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(280px, 1fr) 180px 190px auto auto;
    margin: 18px 0 14px;
}

.kontrak-list-table {
    min-width: 1745px;
    table-layout: fixed;
}

.kontrak-list-col-no {
    width: 58px;
}

.kontrak-list-col-number {
    width: 240px;
}

.kontrak-list-col-unit {
    width: 155px;
}

.kontrak-list-col-kind {
    width: 130px;
}

.kontrak-list-col-value {
    width: 145px;
}

.kontrak-list-col-date {
    width: 112px;
}

.kontrak-list-col-status {
    width: 155px;
}

.kontrak-list-col-days {
    width: 110px;
}

.kontrak-list-col-actions {
    width: 150px;
}

.kontrak-list-table td:first-child {
    text-align: center;
}

.kontrak-list-table td:nth-child(2) {
    overflow-wrap: anywhere;
}

.kontrak-list-table td:nth-child(5),
.kontrak-list-table td:nth-child(6),
.kontrak-list-table td:nth-child(7),
.kontrak-list-table td:nth-child(8),
.kontrak-list-table td:nth-child(9),
.kontrak-list-table td:nth-child(10),
.kontrak-list-table td:nth-child(11),
.kontrak-list-table td:nth-child(12) {
    white-space: nowrap;
}

.kontrak-list-table .action-buttons {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.kontrak-list-table .kontrak-actions {
    gap: 6px;
}

.produksi-filter,
.delivery-filter {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(280px, 1fr) 190px auto auto;
    margin: 18px 0 14px;
}

.table {
    --bs-table-bg: var(--app-surface-solid);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border-soft);
    --bs-table-hover-bg: var(--app-table-hover);
    --bs-table-hover-color: var(--app-text);
    color: var(--app-text);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--app-border-soft);
    padding: 15px 16px;
    vertical-align: middle;
}

.table thead th {
    background: var(--app-table-head);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.table tbody tr:hover > * {
    background: var(--app-table-hover);
}

:root[data-theme="dark"] .table {
    --bs-table-bg: var(--app-surface-solid);
    --bs-table-striped-bg: rgba(148, 163, 184, .07);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: rgba(76, 157, 255, .13);
    --bs-table-hover-color: var(--app-text);
    color: var(--app-text);
}

:root[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    border-bottom-color: rgba(148, 163, 184, .18);
    color: var(--app-text);
}

:root[data-theme="dark"] .table thead th {
    background: var(--app-table-head);
    color: #eaf3ff;
}

:root[data-theme="dark"] .table tbody tr:hover > * {
    background-color: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

:root[data-theme="dark"] .table tfoot th,
:root[data-theme="dark"] .table tfoot td {
    background-color: #0d1727;
    border-color: rgba(148, 163, 184, .24);
    color: #f4f9ff;
}

.action-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.action-buttons form {
    margin: 0;
}

.action-buttons .btn {
    align-items: center;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    min-height: 34px;
    padding: 0;
    width: 38px;
}

.bayar-table-wrap {
    overflow-x: auto;
}

.bayar-table {
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    min-width: 1240px;
    overflow: hidden;
    table-layout: fixed;
}

.bayar-col-kontrak {
    width: 23%;
}

.bayar-col-customer {
    width: 16%;
}

.bayar-col-money {
    width: 12.5%;
}

.bayar-col-date {
    width: 11%;
}

.bayar-col-status {
    width: 12%;
}

.bayar-col-action {
    width: 192px;
}

.bayar-table thead th {
    background: #eaf3fc;
    color: #071831;
    font-size: 12px;
    padding: 14px 18px !important;
    vertical-align: middle;
}

.bayar-table tbody td {
    border-bottom: 1px solid var(--app-border-soft);
    padding: 18px !important;
    vertical-align: middle;
}

.bayar-table tfoot th {
    background: #f8fbff;
    border-top: 1px solid var(--app-border-soft);
    color: var(--app-text);
    font-size: 15px;
    padding: 16px 18px !important;
}

.bayar-table .bayar-money,
.bayar-table .badge,
.bayar-table thead th {
    white-space: nowrap;
}

.bayar-status-badge {
    min-width: 92px;
    padding: 7px 12px;
}

.bayar-table .action-buttons.bayar-actions {
    gap: 7px;
    flex-wrap: nowrap;
    justify-content: center;
}

.bayar-table .action-buttons.bayar-actions .btn {
    border-radius: 8px;
    flex: 0 0 40px;
    height: 40px;
    padding: 0;
    width: 40px;
}

.bayar-table .action-buttons.bayar-actions form {
    display: inline-flex;
    margin: 0;
}

.bayar-pajak-options {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 13px 18px;
}

.bayar-pajak-options-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 42px;
}

.bayar-pajak-option {
    min-width: 82px;
}

.bayar-pajak-options .form-check {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
}

.bayar-pajak-options .form-check-input {
    flex-shrink: 0;
    margin: 0;
}

.bayar-pajak-result {
    font-weight: 600;
}

.bayar-add-body {
    display: grid;
    gap: 22px;
}

.bayar-add-document {
    display: grid;
    gap: 22px;
}

.bayar-contract-summary-section h3,
.bayar-material-section h3,
.bayar-form-card h3 {
    color: var(--app-text);
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 12px;
}

.bayar-contract-summary-section {
    display: grid;
    gap: 10px;
}

.bayar-form-card {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 18px;
}

.bayar-payment-form-grid {
    display: grid;
    gap: 18px 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bayar-form-wide {
    grid-column: 1 / -1;
}

.bayar-field {
    min-width: 0;
}

.bayar-field-tax {
    grid-column: 1 / -1;
    max-width: 760px;
}

.bayar-span-4 {
    grid-column: span 1;
}

.bayar-span-6 {
    grid-column: span 1;
}

.bayar-span-12 {
    grid-column: 1 / -1;
}

.bayar-field-spacer {
    display: none;
}

.bayar-field-tax .bayar-pajak-options {
    padding: 9px 14px;
}

.bayar-field-tax .bayar-pajak-options-line {
    gap: 12px 36px;
}

.bayar-field-tax .bayar-pajak-option {
    min-width: 74px;
}

.bayar-field-tax .form-check-label {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 800;
}

.bayar-history-link {
    background: transparent;
    border: 0;
    color: var(--app-blue);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    margin-top: 4px;
    padding: 0;
}

.bayar-history-link:hover,
.bayar-history-link:focus {
    color: var(--app-blue-dark);
    text-decoration: underline;
}

.bayar-catatan-label {
    font-size: 22px;
}

.bayar-material-table-wrap {
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    overflow-x: auto;
}

.bayar-material-table {
    min-width: 880px;
    table-layout: fixed;
}

.bayar-material-table thead th {
    background: #a9cbea;
    color: #102443;
    font-weight: 700;
    white-space: nowrap;
}

.bayar-material-table th,
.bayar-material-table td {
    padding: 13px 14px !important;
}

.bayar-material-table tbody td {
    border-bottom: 1px solid var(--app-border-soft);
    color: var(--app-text);
    font-weight: 500;
}

.bayar-material-table tfoot th {
    background: #f8fbff;
    border-top: 1px solid var(--app-border-soft);
    color: var(--app-text);
    font-size: 15px;
    font-weight: 900;
    padding-bottom: 14px !important;
    padding-top: 14px !important;
}

.bayar-material-table th:nth-child(1),
.bayar-material-table td:nth-child(1) {
    width: 7%;
}

.bayar-material-table th:nth-child(2),
.bayar-material-table td:nth-child(2) {
    width: 25%;
}

.bayar-material-table th:nth-child(3),
.bayar-material-table td:nth-child(3) {
    width: 16%;
}

.bayar-material-table th:nth-child(4),
.bayar-material-table td:nth-child(4) {
    width: 13%;
}

.bayar-material-table th:nth-child(5),
.bayar-material-table td:nth-child(5),
.bayar-material-table th:nth-child(6),
.bayar-material-table td:nth-child(6) {
    width: 19.5%;
}

:root[data-theme="dark"] .bayar-material-table thead th {
    background: #24486f;
    color: #f4f9ff;
}

:root[data-theme="dark"] .bayar-material-table tbody td {
    background: #101b2e;
    border-bottom-color: rgba(148, 163, 184, .18);
    color: #eef6ff;
}

:root[data-theme="dark"] .bayar-material-table tfoot th {
    background: #0d1727;
    border-top-color: rgba(148, 163, 184, .24);
    color: #f4f9ff;
}

:root[data-theme="dark"] .bayar-material-table tfoot tr:last-child th {
    background: #13243b;
    color: #ffffff;
}

:root[data-theme="dark"] .bayar-form-card {
    background: #0d1727;
    border-color: rgba(148, 163, 184, .18);
}

.bayar-history-table-wrap {
    overflow-x: auto;
}

#modalBayarAdd.show {
    z-index: 1080;
}

#modalBayarAdd .modal-content {
    position: relative;
}

.bayar-history-panel[hidden] {
    display: none;
}

.bayar-history-panel {
    align-items: center;
    background: rgba(15, 23, 42, .38);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 22px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 8;
}

.bayar-history-panel-card {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    max-height: min(78dvh, 720px);
    max-width: min(1180px, calc(100% - 24px));
    overflow: auto;
    width: 100%;
}

.bayar-history-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--app-border-soft);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 18px 20px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--app-surface-solid);
}

.bayar-add-history-body {
    padding: 20px;
}

:root[data-theme="dark"] .bayar-history-panel-card,
:root[data-theme="dark"] .bayar-history-panel-header {
    background: #101b2e;
    border-color: rgba(148, 163, 184, .18);
}

.bayar-history-table {
    min-width: 920px;
}

.bayar-history-table th,
.bayar-history-table td {
    padding: 11px 12px !important;
    white-space: nowrap;
}

.bayar-history-table th:nth-child(1),
.bayar-history-table td:nth-child(1) {
    width: 54px;
}

.bayar-history-table th:nth-child(5),
.bayar-history-table td:nth-child(5) {
    width: 150px;
}

#modalBayarAdd .modal-content {
    max-height: calc(100dvh - 32px);
}

#modalBayarAdd .bayar-add-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#modalBayarAdd .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#modalBayarAdd .modal-footer {
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .bayar-pajak-options-line {
        gap: 12px 26px;
    }
}

.dokumen-table-wrap {
    overflow-x: auto;
}

.dokumen-filter {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(280px, 1fr) 190px auto auto;
    margin: 18px 0 14px;
}

.dokumen-dashboard-table {
    min-width: 1240px;
    table-layout: fixed;
}

.dokumen-col-no {
    width: 58px;
}

.dokumen-col-kontrak {
    width: 290px;
}

.dokumen-col-data-kontrak {
    width: 170px;
}

.dokumen-col-data-pengiriman,
.dokumen-col-data-penerima {
    width: 250px;
}

.dokumen-col-status {
    width: 185px;
}

.dokumen-col-action {
    width: 130px;
}

.dokumen-dashboard-table .badge {
    white-space: nowrap;
}

.dokumen-dashboard-table thead th {
    font-size: 11px;
    line-height: 1.25;
    padding: 10px 12px;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
}

.dokumen-dashboard-table td,
.dokumen-dashboard-table th {
    overflow-wrap: anywhere;
}

.dokumen-dashboard-table tbody td {
    padding: 12px 14px;
}

.dokumen-group-cell {
    display: grid;
    gap: 9px;
}

.dokumen-group-line {
    align-items: center;
    display: flex;
    gap: 9px;
    justify-content: flex-start;
}

.dokumen-group-line span:last-child {
    color: var(--app-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.dokumen-check-icon {
    align-items: center;
    background: #0d8fe8;
    border-radius: 999px;
    box-shadow: 0 5px 12px rgba(13, 143, 232, .18);
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    height: 22px;
    justify-content: center;
    line-height: 1;
    width: 22px;
}

.dokumen-check-icon.is-unchecked {
    background: #dc3545;
    box-shadow: 0 5px 12px rgba(220, 53, 69, .18);
}

.dokumen-check-icon .bi {
    color: inherit;
    font-weight: 900;
    -webkit-text-stroke: .25px currentColor;
}

.dokumen-source-cell {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-width: 130px;
}

.dokumen-download-btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.dokumen-add-summary {
    display: grid;
    gap: 10px;
}

.dokumen-add-summary div {
    display: flex;
    gap: 8px;
}

.dokumen-add-summary span {
    color: var(--app-text-muted);
    min-width: 132px;
}

.dokumen-add-summary strong {
    color: var(--app-text);
}

.dokumen-add-table-wrap {
    margin-top: 26px;
}

.dokumen-add-table {
    min-width: 860px;
}

.dokumen-add-table thead th {
    background: #a8ccec;
    color: #071831;
    font-size: 14px;
    padding: 8px 10px;
    text-transform: none;
}

.dokumen-add-table td {
    padding: 8px 10px;
}

.dokumen-add-table th:first-child,
.dokumen-add-table td:first-child {
    text-align: center;
    width: 52px;
}

.dokumen-add-table th:last-child,
.dokumen-add-table td:last-child {
    text-align: center;
    width: 72px;
}

.dokumen-name-cell {
    cursor: text;
}

.dokumen-name-cell:hover {
    background: rgba(13, 110, 253, .05);
}

.dokumen-inline-name-input {
    min-width: 180px;
}

.dokumen-dashboard-table .action-buttons.dokumen-actions {
    flex-wrap: nowrap;
    justify-content: center;
}

.dokumen-dashboard-table .action-buttons.dokumen-actions .btn {
    border-radius: 8px;
    flex: 0 0 32px;
    height: 32px;
    padding: 0;
    width: 32px;
}

.account-user-cell {
    align-items: center;
    display: flex;
    gap: 10px;
}

.account-user-avatar,
.account-photo-preview {
    align-items: center;
    background: #eef5ff;
    border: 1px solid #d4e4f8;
    border-radius: 8px;
    color: var(--app-blue);
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    width: 42px;
}

.account-photo-preview {
    height: 72px;
    width: 72px;
}

.account-user-avatar img,
.account-photo-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.account-photo-field {
    align-items: center;
    display: flex;
    gap: 14px;
}

#modalUser .modal-dialog,
#modalUser .modal-user-wide {
    max-width: min(96vw, 1520px) !important;
    width: min(96vw, 1520px) !important;
}

#modalUser .modal-content {
    max-height: calc(100dvh - 32px);
}

#modalUser .modal-body {
    overflow-y: auto;
}

#modalUser .modal-footer {
    background: var(--app-surface-solid);
    border-top: 1px solid var(--app-border);
    bottom: 0;
    position: sticky;
    z-index: 3;
}

#modalUser .user-permission-section .permission-table-wrap {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    max-height: min(50vh, 520px);
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

#modalUser .user-permission-section thead th {
    background: var(--app-table-head);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    padding: 14px 18px !important;
    position: sticky;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    z-index: 4;
}

#modalUser .user-permission-section thead th:first-child {
    left: 0;
    text-align: left;
    z-index: 5;
}

#modalUser .user-permission-section .account-permission-table {
    margin-bottom: 0;
    min-width: 1180px;
    table-layout: fixed;
}

#modalUser .permission-col-menu {
    width: 300px;
}

#modalUser .permission-col-action {
    width: 176px;
}

#modalUser .user-permission-section tbody td,
#modalUser .user-permission-section tbody th {
    background: var(--app-surface-solid);
    border-color: var(--app-border-soft);
    padding: 14px 18px !important;
    vertical-align: middle;
}

#modalUser .user-permission-section tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--app-surface-soft) 72%, var(--app-surface-solid));
}

#modalUser .permission-menu-cell {
    box-shadow: 8px 0 16px rgba(15, 23, 42, .04);
    left: 0;
    position: sticky;
    z-index: 2;
}

#modalUser .permission-menu-cell strong,
#modalUser .permission-menu-cell small {
    display: block;
}

#modalUser .permission-menu-cell strong {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 900;
}

#modalUser .permission-menu-cell small {
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
}

#modalUser .permission-check {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    margin: 0;
    width: 54px;
}

#modalUser .permission-check:hover {
    border-color: color-mix(in srgb, var(--app-primary) 45%, var(--app-border-soft));
}

#modalUser .permission-check .form-check-input {
    cursor: pointer;
    height: 16px;
    margin: 0;
    width: 16px;
}

#modalUser .user-permission-section .permission-table-wrap::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

#modalUser .user-permission-section .permission-table-wrap::-webkit-scrollbar-thumb {
    background: #8c96a3;
    border: 3px solid var(--app-surface-solid);
    border-radius: 999px;
}

#modalUser .user-permission-section .permission-table-wrap::-webkit-scrollbar-track {
    background: #edf3fb;
    border-radius: 999px;
}

.pengadaan-po-summary-table {
    min-width: 760px;
}

.pengadaan-po-summary-table th,
.pengadaan-po-summary-table td {
    white-space: nowrap;
}

.pengadaan-table-wrap {
    overflow-x: auto;
}

.pengadaan-filter {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(280px, 1fr) 176px 188px auto auto;
    margin: 18px 0 14px;
}

.pengadaan-table {
    min-width: 1720px;
    table-layout: fixed;
}

.pengadaan-col-no {
    width: 10%;
}

.pengadaan-col-kontrak {
    width: 20%;
}

.pengadaan-col-tujuan {
    width: 8%;
}

.pengadaan-col-date {
    width: 9%;
}

.pengadaan-col-date-wide {
    width: 9%;
}

.pengadaan-col-sisa {
    width: 10%;
}

.pengadaan-col-po {
    width: 13%;
}

.pengadaan-col-action {
    width: 12%;
}

.pengadaan-table th,
.pengadaan-table td {
    line-height: 1.35;
}

.pengadaan-table thead th {
    font-size: 11px;
    letter-spacing: 0;
    padding: 16px 18px;
    white-space: normal;
    word-break: normal;
}

.pengadaan-table tbody td {
    padding: 18px;
}

.pengadaan-table .pengadaan-contract-cell {
    overflow-wrap: anywhere;
}

.pengadaan-table .pengadaan-date-cell,
.pengadaan-table .btn {
    white-space: nowrap;
}

.pengadaan-table .pengadaan-date-cell {
    white-space: normal;
    overflow-wrap: anywhere;
}

.pengadaan-table .badge {
    white-space: nowrap;
}

.pengadaan-table .pengadaan-date-cell span:first-child {
    display: block;
    line-height: 1.35;
}

.pengadaan-table td:nth-child(8) {
    min-width: 150px;
    white-space: normal;
}

.pengadaan-po-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
}

.pengadaan-po-actions .btn {
    border-radius: 8px;
    min-width: 124px;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
}

.pengadaan-actions {
    flex-wrap: nowrap;
    justify-content: center;
}

.pengadaan-actions .btn {
    border-radius: 8px;
    flex: 0 0 38px;
}

.pengadaan-view-body .detail-grid {
    gap: 10px;
}

.pengadaan-view-body .detail-grid div {
    padding: 12px 14px;
}

.pengadaan-detail-table-wrap {
    border-radius: 8px;
}

.pengadaan-detail-material-table,
.pengadaan-detail-po-table {
    font-size: 13px;
}

.pengadaan-detail-material-table th,
.pengadaan-detail-material-table td,
.pengadaan-detail-po-table th,
.pengadaan-detail-po-table td {
    line-height: 1.35;
    padding: 10px 12px;
    vertical-align: middle;
}

.pengadaan-detail-po-table {
    min-width: 1180px;
}

.pengadaan-detail-po-table th {
    white-space: nowrap;
}

.pengadaan-detail-po-table th:nth-child(1),
.pengadaan-detail-po-table td:nth-child(1),
.pengadaan-detail-po-table th:nth-child(5),
.pengadaan-detail-po-table td:nth-child(5) {
    width: 92px;
}

.pengadaan-detail-po-table th:nth-child(8),
.pengadaan-detail-po-table td:nth-child(8) {
    width: 86px;
}

.pengadaan-detail-po-table th:nth-child(9),
.pengadaan-detail-po-table td:nth-child(9) {
    width: 92px;
}

.pengadaan-wrap-cell,
.pengadaan-note-cell {
    overflow-wrap: anywhere;
}

.pengadaan-note-cell {
    min-width: 120px;
}

.pengadaan-proof-link {
    color: var(--app-primary);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.pengadaan-proof-link:hover {
    text-decoration: underline;
}

.delivery-material-table-wrap {
    border-radius: 8px;
}

.delivery-list-table {
    min-width: 1180px;
    table-layout: fixed;
}

.delivery-list-col-kontrak {
    width: 250px;
}

.delivery-list-col-surat {
    width: 130px;
}

.delivery-list-col-tujuan {
    width: 120px;
}

.delivery-list-col-date {
    width: 126px;
}

.delivery-list-col-estimasi {
    width: 112px;
}

.delivery-list-col-terima {
    width: 150px;
}

.delivery-list-col-status {
    width: 110px;
}

.delivery-list-col-action {
    width: 130px;
}

.delivery-list-table td:first-child {
    overflow-wrap: anywhere;
}

.delivery-list-table td:nth-child(4),
.delivery-list-table td:nth-child(5),
.delivery-list-table td:nth-child(6),
.delivery-list-table td:nth-child(7),
.delivery-list-table td:nth-child(8) {
    white-space: nowrap;
}

.delivery-list-table .action-buttons {
    flex-wrap: nowrap;
}

.delivery-material-table {
    min-width: 1180px;
    table-layout: fixed;
}

.delivery-material-table th,
.delivery-material-table td {
    padding: 10px 12px;
}

.delivery-material-table th {
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
    word-break: keep-all;
}

.delivery-material-table th,
.delivery-material-table td {
    overflow-wrap: anywhere;
}

.delivery-col-no {
    width: 58px;
}

.delivery-col-material {
    width: 320px;
}

.delivery-col-satuan {
    width: 120px;
}

.delivery-col-qty {
    width: 145px;
}

.delivery-col-sisa {
    width: 145px;
}

.delivery-col-keterangan {
    width: 240px;
}

.delivery-col-action {
    width: 82px;
}

.delivery-material-table th:first-child,
.delivery-material-table td:first-child,
.delivery-material-table th:last-child,
.delivery-material-table td:last-child {
    text-align: center;
}

.delivery-material-table .form-control {
    min-height: 38px;
}

.delivery-modal .modal-content {
    border: 1px solid rgba(190, 207, 228, .9);
    border-radius: 8px;
    overflow: hidden;
}

.delivery-modal-header {
    align-items: flex-start;
    padding: 22px 28px 18px;
}

.delivery-modal-title-wrap {
    align-items: center;
    display: flex;
    gap: 14px;
}

.delivery-modal-title-icon {
    color: #0d6efd;
    display: inline-flex;
    font-size: 30px;
    line-height: 1;
}

.delivery-modal-title-wrap h2 {
    color: var(--app-text);
    font-size: 24px;
    font-weight: 900;
    margin: 0;
}

.delivery-modal-title-wrap p {
    color: var(--app-muted);
    font-size: 15px;
    font-weight: 600;
    margin: 4px 0 0;
}

.delivery-modal .modal-body {
    padding: 18px 28px 0;
}

.delivery-modal-grid {
    align-items: start;
    gap: 20px;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
}

.delivery-form-panel,
.delivery-document-panel,
.delivery-upload-card,
.delivery-preview-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
}

.delivery-form-panel,
.delivery-document-panel {
    padding: 20px;
}

.delivery-form-panel h3,
.delivery-document-panel h3,
.delivery-upload-card .document-preview-label,
.delivery-preview-card .document-preview-label {
    align-items: center;
    color: #005fe8;
    display: inline-flex;
    font-size: 14px;
    font-weight: 900;
    gap: 10px;
    letter-spacing: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.delivery-upload-card .document-preview-label,
.delivery-preview-card .document-preview-label {
    color: #164685;
    font-size: 16px;
    margin-bottom: 14px;
    text-transform: none;
}

.delivery-form-grid .form-label,
.delivery-period-box .form-label {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 8px;
}

.delivery-form-grid .form-control,
.delivery-form-grid .form-select,
.delivery-form-grid .input-group-text {
    border-color: #cfddef;
    border-radius: 8px;
    min-height: 48px;
}

.delivery-form-grid textarea.form-control {
    min-height: 96px;
}

.delivery-period-box {
    border: 1px solid #cfddef;
    border-radius: 8px;
    margin: 8px 0 0;
    padding: 18px 20px 16px;
}

.delivery-period-box legend {
    color: var(--app-text);
    float: none;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 10px;
    padding: 0 6px;
    width: auto;
}

.delivery-period-grid {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.delivery-period-separator {
    color: var(--app-text);
    font-weight: 900;
    padding-bottom: 13px;
}

.delivery-upload-card,
.delivery-preview-card {
    padding: 18px;
}

.delivery-document-panel .document-preview-list {
    gap: 20px;
}

.delivery-document-panel .document-dropzone {
    background: var(--app-surface);
    border-color: #bdd0ea;
    min-height: 136px;
    padding: 22px;
}

.delivery-document-panel .document-dropzone-icon {
    background: transparent;
    color: #0d6efd;
    font-size: 34px;
    height: auto;
    width: auto;
}

.delivery-document-panel .document-dropzone-title {
    color: var(--app-text);
    font-size: 15px;
    font-weight: 900;
}

.delivery-preview-grid {
    display: grid;
    gap: 12px;
}

.delivery-preview-grid .document-preview {
    align-items: center;
    background: linear-gradient(135deg, rgba(13, 110, 253, .04), rgba(255, 255, 255, .86));
    border-color: #c7d8ee;
    min-height: 86px;
    padding: 14px;
}

.delivery-modal .modal-footer {
    background: var(--app-surface);
    border-top: 1px solid var(--app-border-soft);
    padding: 18px 28px;
}

.warehouse-stock-table {
    min-width: 820px;
    width: 100%;
    table-layout: fixed;
}

.warehouse-stock-table th,
.warehouse-stock-table td {
    padding: 12px 18px;
    vertical-align: middle;
}

.warehouse-stock-table th {
    white-space: nowrap;
}

.warehouse-stock-table th:first-child,
.warehouse-stock-table td:first-child {
    text-align: left;
    width: 370px;
}

.warehouse-stock-table th:nth-child(2),
.warehouse-stock-table td:nth-child(2) {
    text-align: left;
    white-space: nowrap;
    width: 90px;
}

.warehouse-stock-table th:nth-child(3),
.warehouse-stock-table td:nth-child(3),
.warehouse-stock-table th:nth-child(4),
.warehouse-stock-table td:nth-child(4),
.warehouse-stock-table th:nth-child(5),
.warehouse-stock-table td:nth-child(5) {
    text-align: right;
    width: 142px;
}

.warehouse-stock-table th:nth-child(3),
.warehouse-stock-table td:nth-child(3),
.warehouse-stock-table th:nth-child(4),
.warehouse-stock-table td:nth-child(4),
.warehouse-stock-table th:nth-child(5),
.warehouse-stock-table td:nth-child(5) {
    padding-left: 10px;
    padding-right: 10px;
}

.warehouse-stock-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 520px;
}

.warehouse-stock-scroll .warehouse-stock-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.warehouse-filter {
    max-width: 460px;
}

.warehouse-request-scroll {
    max-height: 560px;
    overflow: auto;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
}

.warehouse-request-scroll .warehouse-request-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.warehouse-request-table {
    margin-bottom: 0;
    min-width: 980px;
    table-layout: fixed;
    width: 100%;
}

.warehouse-request-table th,
.warehouse-request-table td {
    font-size: 13px;
    padding: 10px 12px;
    vertical-align: middle;
}

.warehouse-request-table th {
    background: var(--app-surface-soft);
    line-height: 1.25;
    white-space: normal;
}

.warehouse-request-table th:nth-child(1),
.warehouse-request-table td:nth-child(1) {
    width: 8%;
}

.warehouse-request-table th:nth-child(2),
.warehouse-request-table td:nth-child(2) {
    width: 20%;
}

.warehouse-request-table th:nth-child(3),
.warehouse-request-table td:nth-child(3) {
    width: 12%;
}

.warehouse-request-table th:nth-child(4),
.warehouse-request-table td:nth-child(4) {
    width: 31%;
}

.warehouse-request-table th:nth-child(5),
.warehouse-request-table td:nth-child(5) {
    width: 7%;
}

.warehouse-request-table th:nth-child(6),
.warehouse-request-table td:nth-child(6) {
    width: 7%;
}

.warehouse-request-table th:nth-child(7),
.warehouse-request-table td:nth-child(7) {
    width: 15%;
}

.warehouse-request-table td:nth-child(4) {
    font-weight: 700;
}

.warehouse-request-table .btn {
    font-size: 12px;
    padding: 5px 8px;
    white-space: nowrap;
}

.warehouse-request-table td:nth-child(7) .d-flex {
    gap: 6px !important;
}

.warehouse-pickup-dialog {
    max-width: min(1180px, calc(100vw - 48px));
}

.warehouse-pickup-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.warehouse-pickup-wide {
    grid-column: 1 / -1;
}

.warehouse-signature-box {
    background: #f7f7fb;
    border: 1px dashed #4f7cff;
    border-radius: 0;
    height: 220px;
    overflow: hidden;
    position: relative;
    touch-action: none;
    width: 100%;
}

.warehouse-signature-pad {
    display: block;
    height: 100%;
    width: 100%;
}

.warehouse-signature-clear {
    align-items: center;
    background: transparent;
    border: 0;
    color: #6b7280;
    display: inline-flex;
    font-size: 20px;
    height: 34px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    z-index: 2;
}

.warehouse-signature-clear:hover {
    color: #111827;
}

@media (max-width: 768px) {
    .warehouse-pickup-grid {
        grid-template-columns: 1fr;
    }
}

.warehouse-request-progress {
    min-width: 110px;
}

.warehouse-request-progress .progress-bar {
    font-size: 11px;
    font-weight: 800;
}

.produksi-list-table {
    min-width: 1020px;
    table-layout: fixed;
}

.produksi-list-table .produksi-col-wo {
    width: 100px;
}

.produksi-list-table .produksi-col-kontrak {
    width: 25%;
}

.produksi-list-table .produksi-col-tujuan {
    width: 19%;
}

.produksi-list-table .produksi-col-lama {
    width: 86px;
}

.produksi-list-table .produksi-col-target {
    width: 124px;
}

.produksi-list-table .produksi-col-progress {
    width: 150px;
}

.produksi-list-table .produksi-col-status {
    width: 130px;
}

.produksi-list-table .produksi-col-aksi {
    width: 130px;
}

.produksi-list-table th {
    white-space: nowrap;
}

.produksi-list-table td:nth-child(2) {
    overflow-wrap: anywhere;
}

.produksi-list-table td:nth-child(4),
.produksi-list-table td:nth-child(5),
.produksi-list-table td:nth-child(7) {
    white-space: nowrap;
}

.produksi-list-table .action-buttons {
    flex-wrap: nowrap;
    justify-content: center;
}

.produksi-needed-table,
.produksi-request-form-table {
    min-width: 980px;
    table-layout: fixed;
}

.produksi-needed-table th,
.produksi-needed-table td,
.produksi-request-form-table th,
.produksi-request-form-table td {
    border-color: #1f2937 !important;
    padding: 8px 10px;
}

.produksi-needed-table thead th,
.produksi-request-form-table thead th {
    background: #ffff00;
    color: #000;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}

.produksi-needed-table .produksi-group-title,
.produksi-request-form-table .produksi-group-title {
    font-size: 14px;
}

.produksi-needed-table td,
.produksi-request-form-table td {
    background: var(--app-surface-solid);
}

:root[data-theme="dark"] .produksi-needed-table th,
:root[data-theme="dark"] .produksi-needed-table td,
:root[data-theme="dark"] .produksi-request-form-table th,
:root[data-theme="dark"] .produksi-request-form-table td {
    border-color: rgba(148, 163, 184, .22) !important;
    color: #eef6ff;
}

:root[data-theme="dark"] .produksi-needed-table thead th,
:root[data-theme="dark"] .produksi-request-form-table thead th {
    background: #263f19;
    color: #f4ffd7;
}

:root[data-theme="dark"] .produksi-needed-table td,
:root[data-theme="dark"] .produksi-request-form-table td {
    background: #101b2e;
}

.produksi-needed-table th:nth-child(1),
.produksi-needed-table td:nth-child(1) {
    width: 34%;
}

.produksi-needed-table th:nth-child(2),
.produksi-needed-table td:nth-child(2) {
    width: 25%;
}

.produksi-needed-table th:nth-child(3),
.produksi-needed-table td:nth-child(3) {
    width: 15%;
}

.produksi-needed-table th:nth-child(4),
.produksi-needed-table td:nth-child(4) {
    width: 26%;
}

.produksi-request-form-table th:nth-child(1),
.produksi-request-form-table td:nth-child(1) {
    width: 9%;
}

.produksi-request-form-table th:nth-child(2),
.produksi-request-form-table td:nth-child(2) {
    width: 68%;
}

.produksi-request-form-table th:nth-child(3),
.produksi-request-form-table td:nth-child(3) {
    width: 10%;
}

.produksi-request-form-table th:nth-child(4),
.produksi-request-form-table td:nth-child(4) {
    width: 13%;
}

.produksi-request-form-table th,
.produksi-request-form-table td {
    padding: 6px 8px;
}

.produksi-needed-table .form-control,
.produksi-needed-table .form-select,
.produksi-needed-table .btn,
.produksi-request-form-table .form-control,
.produksi-request-form-table .form-select,
.produksi-request-form-table .btn {
    font-size: 13px;
    min-height: 38px;
    padding: 6px 10px;
}

.produksi-request-form-table .form-control,
.produksi-request-form-table .btn {
    min-height: 34px;
    padding: 5px 9px;
}

.produksi-request-form-table .produksi-request-total {
    max-width: 110px;
}

.produksi-request-form-table .produksi-request-name {
    width: 100%;
}

.produksi-request-form-table .produksi-request-qty-unit {
    max-width: 130px;
}

.produksi-request-form-table .produksi-request-status-btn {
    max-width: 150px;
}

.produksi-needed-table .btn,
.produksi-request-form-table .btn {
    white-space: nowrap;
}

.produksi-qty-unit .form-control:first-child {
    flex: 0 0 58px;
}

.customer-detail-list {
    display: grid;
    gap: 14px;
}

.customer-detail-hero {
    align-items: center;
    background: linear-gradient(135deg, var(--app-surface-soft), var(--app-surface-solid));
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
}

.customer-detail-icon {
    align-items: center;
    background: var(--app-blue-soft);
    border-radius: 8px;
    color: var(--app-blue);
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 22px;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.customer-detail-hero h3 {
    color: var(--app-text);
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px;
}

.customer-detail-meta {
    align-items: center;
    color: var(--app-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 700;
}

.customer-detail-meta span:not(.badge) {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.customer-detail-item {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
    padding: 16px;
}

.customer-detail-item-head {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.customer-detail-item-head span {
    background: var(--app-blue-soft);
    border-radius: 999px;
    color: var(--app-blue);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.customer-detail-item-head h3 {
    color: var(--app-text);
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}

.customer-detail-address {
    align-items: flex-start;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    color: var(--app-muted);
    display: flex;
    gap: 9px;
    line-height: 1.55;
    margin-bottom: 12px;
    padding: 12px;
}

.customer-detail-address i {
    color: var(--app-blue);
    margin-top: 2px;
}

.customer-detail-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-detail-grid div {
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 10px 12px;
}

.customer-detail-grid small {
    color: var(--app-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}

.customer-detail-grid strong {
    color: var(--app-text);
    display: block;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.detail-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-grid div {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 12px;
}

.detail-grid small {
    color: var(--app-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.detail-grid strong {
    color: var(--app-text);
    display: block;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.customer-detail-table-wrap {
    max-height: 470px;
    overflow: auto;
}

.customer-detail-table {
    min-width: 1180px;
}

.customer-detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.customer-detail-table td {
    font-weight: 700;
}

.customer-detail-table td strong {
    color: var(--app-text);
    display: block;
    margin-top: 6px;
}

.table-pill {
    background: var(--app-blue-soft);
    border-radius: 999px;
    color: var(--app-blue);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 9px;
}

.customer-address-cell {
    min-width: 320px;
    white-space: normal;
}

.excel-table {
    box-shadow: inset 0 0 0 1px #fff;
}

.badge {
    border-radius: 999px;
    font-weight: 800;
    padding: 7px 10px;
}

.pic-badge {
    align-items: center;
    background: var(--app-blue-soft);
    border: 1px solid rgba(11, 94, 215, .18);
    border-radius: 999px;
    color: var(--app-blue);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 9px;
}

.customer-type-blue {
    background: #0d6efd !important;
    color: #fff !important;
}

.customer-type-green {
    background: #159957 !important;
    color: #fff !important;
}

.customer-type-red {
    background: #dc3545 !important;
    color: #fff !important;
}

.form-label {
    color: var(--app-text);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 7px;
}

.form-control,
.form-select {
    background-color: var(--app-input-bg);
    border-color: var(--app-border);
    color: var(--app-text);
    border-radius: 8px;
    min-height: 44px;
}

.form-control::placeholder {
    color: var(--app-muted);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text {
    background-color: #0b1728;
    border-color: rgba(148, 163, 184, .22);
    color: #eef6ff;
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: #0d1c31;
    border-color: rgba(126, 183, 255, .62);
    color: #ffffff;
}

:root[data-theme="dark"] .form-control::placeholder {
    color: #91a4bf;
}

:root[data-theme="dark"] .form-text,
:root[data-theme="dark"] .text-secondary {
    color: #a8b7ce !important;
}

.master-form {
    display: grid;
    gap: 18px;
}

.form-section {
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 18px;
}

.form-section h3 {
    color: var(--app-text);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
}

.customer-name-row {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 7px;
}

.customer-type-options {
    background: var(--app-blue-soft);
    border: 1px solid rgba(11, 94, 215, .18);
    border-radius: 999px;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
}

.customer-type-btn {
    align-items: center;
    border-radius: 999px;
    color: var(--app-muted);
    cursor: pointer;
    display: inline-flex;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    min-height: 26px;
    justify-content: center;
    padding: 4px 9px;
    transition: .16s ease;
    white-space: nowrap;
}

.customer-type-options .btn-check:checked + .customer-type-btn {
    background: var(--app-blue);
    color: #fff;
}

#jenisBumn:checked + .customer-type-btn {
    background: #0d6efd;
}

#jenisSwasta:checked + .customer-type-btn {
    background: #159957;
}

#jenisPerseorangan:checked + .customer-type-btn {
    background: #dc3545;
}

.form-section-title,
.region-item-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.form-section-title h3 {
    margin-bottom: 0;
}

.region-list {
    display: grid;
    gap: 14px;
}

.region-item {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 16px;
}

.region-item-head {
    margin-bottom: 12px;
}

.region-item-head strong {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 800;
}

.remove-region-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 34px;
    width: 38px;
}

.maps-autocomplete {
    position: relative;
}

.maps-suggestions {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1085;
}

.maps-suggestion-btn {
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--app-text);
    display: block;
    font-weight: 700;
    line-height: 1.35;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.maps-suggestion-btn:hover,
.maps-suggestion-btn:focus {
    background: var(--app-surface-soft);
}

.maps-suggestion-btn small {
    color: var(--app-muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.maps-empty {
    color: var(--app-muted);
    font-weight: 700;
    padding: 10px 12px;
}

.osm-map {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    height: 240px;
    overflow: hidden;
    width: 100%;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.confirm-check {
    align-items: center;
    background: #fff8e1;
    border: 1px solid #ffe08a;
    border-radius: 8px;
    color: #7a5200;
    display: flex;
    gap: 10px;
    font-weight: 800;
    padding: 12px 14px;
}

:root[data-theme="dark"] .confirm-check {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .34);
    color: #ffd88a;
}

.tender-modal-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr);
}

.tender-modal-grid > *,
.form-section,
.row > * {
    min-width: 0;
}

.khs-modal-grid {
    grid-template-columns: minmax(640px, 1.18fr) minmax(360px, .82fr);
}

.khs-entry-modal {
    border: 1px solid rgba(189, 209, 236, .86);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 35, 75, .24);
    overflow: hidden;
}

.khs-entry-header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(219, 232, 247, .9);
    padding: 24px 28px;
}

.khs-entry-title-wrap {
    align-items: flex-start;
    display: flex;
    gap: 14px;
}

.khs-entry-title-icon {
    align-items: center;
    border: 2px solid var(--app-blue);
    border-radius: 6px;
    color: var(--app-blue);
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 22px;
    height: 42px;
    justify-content: center;
    width: 34px;
}

.khs-entry-title-wrap h2 {
    color: var(--app-text);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.khs-entry-title-wrap p {
    color: var(--app-muted);
    font-size: 15px;
    font-weight: 600;
    margin: 6px 0 0;
}

.khs-entry-modal .modal-body {
    padding: 24px 28px;
}

.khs-entry-modal .modal-footer {
    border-top: 1px solid rgba(219, 232, 247, .9);
    padding: 18px 28px;
}

.khs-entry-grid {
    gap: 22px;
    grid-template-columns: minmax(620px, 1.3fr) minmax(380px, .72fr);
}

.khs-entry-section,
.khs-document-panel {
    background: var(--app-surface-solid);
    border: 1px solid rgba(208, 224, 244, .95);
    border-radius: 8px;
    padding: 24px;
}

.khs-entry-section h3,
.khs-document-panel h3 {
    align-items: center;
    color: var(--app-blue);
    display: flex;
    font-size: 17px;
    font-weight: 900;
    gap: 10px;
    margin: 0 0 26px;
}

.khs-entry-fields {
    display: grid;
    gap: 24px 30px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.khs-entry-field {
    min-width: 0;
}

.khs-span-12 {
    grid-column: span 12;
}

.khs-span-6 {
    grid-column: span 6;
}

.khs-span-4 {
    grid-column: span 4;
}

.khs-entry-field .form-label {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 10px;
}

.khs-icon-input {
    flex-wrap: nowrap;
}

.khs-selected-tender-meta {
    color: var(--app-text);
    display: grid;
    font-size: 12px;
    font-weight: 900;
    gap: 3px;
    line-height: 1.35;
    margin-top: 7px;
}

.khs-selected-tender-meta span {
    overflow-wrap: anywhere;
}

.khs-icon-input > .input-group-text {
    background: #f7faff;
    border-color: #d2e0f2;
    color: var(--app-blue);
    font-size: 19px;
    font-weight: 900;
    justify-content: center;
    min-width: 50px;
}

.khs-icon-input > .form-control {
    border-color: #d2e0f2;
    color: var(--app-text);
    font-size: 15px;
    font-weight: 650;
    min-height: 52px;
}

.khs-icon-input > .form-control::placeholder {
    color: #607094;
    font-weight: 600;
}

.khs-icon-input > .form-control:focus {
    border-color: var(--app-blue);
    box-shadow: 0 0 0 .18rem rgba(11, 94, 215, .12);
}

.khs-icon-input .khs-unit-text {
    color: var(--app-text);
    font-size: 15px;
    min-width: 56px;
}

.khs-icon-input .khs-currency-text {
    font-size: 15px;
}

.khs-upload-card {
    border: 1px solid rgba(208, 224, 244, .95);
    border-radius: 8px;
    padding: 20px;
}

.khs-document-panel .document-preview-label {
    color: var(--app-text);
    display: block;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 18px;
}

.khs-document-dropzone {
    background: #fbfdff;
    border-color: #9dc4ff;
    min-height: 284px;
    padding: 30px;
}

.khs-document-dropzone .document-dropzone-icon {
    background: transparent;
    border: 0;
    color: var(--app-blue);
    font-size: 68px;
    height: 84px;
    width: 84px;
}

.khs-document-dropzone .document-dropzone-title {
    font-size: 15px;
}

.khs-document-dropzone .document-dropzone-meta {
    font-size: 14px;
    font-weight: 600;
}

.khs-document-dropzone .document-dropzone-count {
    margin-top: 4px;
}

.khs-preview-file-list {
    margin-top: 22px;
}

.khs-preview-file-list .document-preview {
    align-items: center;
    border-color: #d2e0f2;
    min-height: 264px;
}

.khs-preview-empty {
    align-content: center;
    background: transparent;
    border: 0;
    color: #607094;
    display: grid;
    gap: 8px;
    height: 100%;
    justify-items: center;
    text-align: center;
}

.khs-preview-empty i {
    color: #b8cbec;
    font-size: 64px;
    line-height: 1;
}

.khs-preview-empty strong {
    color: var(--app-text);
    font-size: 15px;
    font-weight: 900;
}

.khs-preview-empty span {
    max-width: 280px;
}

.document-preview-panel {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 18px;
}

.document-preview-panel h3,
.document-preview-label {
    color: var(--app-text);
    font-size: 16px;
    font-weight: 800;
}

#modalTenderStage {
    z-index: 1110;
}

#modalTenderStagePreview {
    z-index: 1120;
}

.modal-backdrop.tender-stage-backdrop {
    z-index: 1100;
}

.modal-backdrop.tender-stage-preview-backdrop {
    z-index: 1115;
}

.document-preview-list {
    display: grid;
    gap: 14px;
}

.document-preview {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    min-height: 210px;
    padding: 12px;
}

.document-preview-file {
    border-top: 1px solid var(--app-border-soft);
    display: grid;
    gap: 8px;
    padding-top: 10px;
}

.document-preview-file:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.document-dropzone {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px dashed var(--app-border);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 8px;
    justify-items: center;
    min-height: 168px;
    padding: 24px;
    text-align: center;
    transition: .18s ease;
}

.document-dropzone:hover,
.document-dropzone.drag-over {
    background: var(--app-blue-soft);
    border-color: var(--app-blue);
    box-shadow: 0 12px 28px rgba(11, 94, 215, .10);
}

.document-dropzone input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.document-dropzone-icon {
    align-items: center;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-blue);
    display: inline-flex;
    font-size: 24px;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.document-dropzone-title {
    color: var(--app-text);
    font-size: 15px;
    font-weight: 800;
}

.document-dropzone-meta,
.document-dropzone-count {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 700;
}

.document-dropzone-count {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border-soft);
    border-radius: 999px;
    padding: 6px 10px;
}

.document-selected-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 100%;
}

.document-selected-files span {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border-soft);
    border-radius: 999px;
    color: var(--app-text);
    font-size: 12px;
    font-weight: 800;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 6px 10px;
}

.tender-material-list {
    display: grid;
    gap: 12px;
}

.tender-material-item {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 14px;
}

.material-entry-grid {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(150px, .9fr) minmax(260px, 2fr) minmax(130px, .8fr) minmax(120px, .7fr) minmax(220px, 1.4fr) 56px;
    width: 100%;
}

.tender-material-item .material-entry-grid {
    grid-template-columns: minmax(150px, .8fr) minmax(300px, 2fr) minmax(90px, .45fr) minmax(80px, .35fr) minmax(220px, 1.1fr) 56px;
}

.kontrak-instansi-list,
.kontrak-detail-instansi-list {
    display: grid;
    gap: 12px;
}

.kontrak-instansi-card,
.kontrak-detail-instansi-card {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    overflow: hidden;
}

.kontrak-instansi-head,
.kontrak-detail-instansi-head {
    align-items: center;
    background: color-mix(in srgb, var(--app-blue) 10%, var(--app-surface-soft));
    border-bottom: 1px solid var(--app-border);
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.kontrak-instansi-head strong,
.kontrak-detail-instansi-head strong {
    color: var(--app-text);
    font-weight: 900;
}

.kontrak-instansi-title,
.kontrak-detail-instansi-head div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.kontrak-instansi-address,
.kontrak-detail-instansi-head small {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.kontrak-instansi-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.kontrak-type-checks {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kontrak-type-check {
    align-items: center;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    min-height: 42px;
    padding: 8px 13px;
}

.kontrak-type-check span {
    color: var(--app-text);
    font-size: 13px;
    font-weight: 800;
}

.kontrak-type-check .form-check-input {
    cursor: pointer;
    margin: 0;
}

.kontrak-instansi-toggle {
    align-items: center;
    color: var(--app-text);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    width: 28px;
}

.kontrak-instansi-toggle i {
    transition: transform .18s ease;
}

.kontrak-instansi-card.is-collapsed .kontrak-instansi-toggle i {
    transform: rotate(-90deg);
}

.kontrak-instansi-card.is-collapsed .kontrak-instansi-body {
    display: none;
}

.kontrak-instansi-card {
    overflow: visible;
}

.kontrak-instansi-body .table {
    --bs-table-bg: var(--app-surface-solid);
    --bs-table-color: var(--app-text);
    border-color: var(--app-border);
    margin-bottom: 0;
    min-width: 1470px;
    table-layout: fixed;
    width: 100%;
}

.kontrak-instansi-body .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 8px;
}

.kontrak-instansi-body td {
    padding: 12px 10px;
    vertical-align: middle;
}

.kontrak-instansi-body th {
    padding: 11px 10px;
    vertical-align: middle;
}

.kontrak-col-no {
    width: 56px;
}

.kontrak-col-material {
    width: 300px;
}

.kontrak-col-code {
    width: 150px;
}

.kontrak-col-satuan {
    width: 145px;
}

.kontrak-col-qty {
    width: 95px;
}

.kontrak-col-stock {
    width: 105px;
}

.kontrak-col-harga,
.kontrak-col-total {
    width: 165px;
}

.kontrak-col-keterangan {
    width: 220px;
}

.kontrak-col-aksi {
    width: 58px;
}

.kontrak-instansi-body .table thead th,
.kontrak-detail-instansi-card .table thead th {
    background: var(--app-table-head);
    color: var(--app-text);
    font-size: 12px;
    text-transform: uppercase;
}

.kontrak-instansi-body .form-control {
    min-height: 38px;
    width: 100%;
}

.kontrak-instansi-body .input-group {
    flex-wrap: nowrap;
}

.kontrak-instansi-body .kontrak-material-list {
    display: table-row-group;
}

.kontrak-instansi-body .kontrak-material-item {
    display: table-row;
}

.kontrak-instansi-body .material-autocomplete-holder {
    min-width: 0;
}

.kontrak-instansi-body .material-suggestions {
    min-width: min(520px, calc(100vw - 56px));
    z-index: 1100;
}

.kontrak-material-line-total {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text);
    display: flex;
    font-weight: 900;
    min-height: 38px;
    padding: 7px 12px;
    white-space: nowrap;
}

.kontrak-material-stock {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text);
    display: flex;
    font-weight: 900;
    justify-content: flex-end;
    min-height: 38px;
    padding: 7px 12px;
    white-space: nowrap;
}

.kontrak-instansi-total {
    color: var(--app-text);
    font-size: 14px;
    padding-top: 12px !important;
    text-align: right;
}

.kontrak-material-grand-box {
    margin-top: 12px;
}

.kontrak-khs-qty-warning {
    margin: 0 0 12px;
}

.kontrak-instansi-body .tender-material-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.kontrak-empty-instansi {
    background: var(--app-surface-soft);
    border: 1px dashed var(--app-border);
    border-radius: 8px;
    margin-top: 12px;
    padding: 14px;
}

.kontrak-detail-instansi-head {
    justify-content: space-between;
}

.kontrak-detail-instansi-card .table {
    --bs-table-bg: var(--app-surface-solid);
    --bs-table-color: var(--app-text);
    border-color: var(--app-border);
}

.kontrak-detail-table-wrap {
    overflow-x: auto;
}

.kontrak-detail-material-table {
    table-layout: fixed;
    width: 100%;
}

.kontrak-detail-material-table th,
.kontrak-detail-material-table td {
    padding: 12px 14px !important;
}

.kontrak-detail-material-table th:nth-child(1) {
    width: 62px;
}

.kontrak-detail-material-table th:nth-child(2) {
    width: 25%;
}

.kontrak-detail-material-table th:nth-child(3) {
    width: 92px;
}

.kontrak-detail-material-table th:nth-child(4) {
    width: 92px;
}

.kontrak-detail-material-table th:nth-child(5) {
    width: 110px;
}

.kontrak-detail-material-table th:nth-child(6),
.kontrak-detail-material-table th:nth-child(7) {
    width: 160px;
}

.kontrak-detail-material-table td:nth-child(5),
.kontrak-detail-material-table td:nth-child(6),
.kontrak-detail-material-table td:nth-child(7) {
    white-space: nowrap;
}

.kontrak-status-detail-btn {
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    line-height: 1.1;
    padding: .45em .75em;
}

.kontrak-status-detail-btn:hover,
.kontrak-status-detail-btn:focus {
    filter: brightness(.96);
    outline: 2px solid rgba(13, 110, 253, .22);
    outline-offset: 2px;
}

.kontrak-history-card {
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
}

.kontrak-history-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.kontrak-history-head strong,
.kontrak-history-head span {
    display: block;
}

.kontrak-history-head span {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 700;
}

.kontrak-history-section-title {
    color: var(--app-text);
    font-size: 13px;
    font-weight: 900;
    margin: 2px 0 -4px;
    text-transform: uppercase;
}

.kontrak-history-table th,
.kontrak-history-table td {
    font-size: 13px;
    vertical-align: middle;
}

.kontrak-history-file-list {
    display: grid;
    gap: 8px;
}

.kontrak-history-file-item {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 12px;
}

.kontrak-history-file-item strong,
.kontrak-history-file-item small {
    display: block;
}

.kontrak-history-file-item small {
    color: var(--app-muted);
    font-size: 12px;
}

.kontrak-history-subcard {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.kontrak-instansi-name-modal {
    z-index: 1085;
}

.khs-material-entry-grid {
    grid-template-columns: minmax(560px, 4.2fr) minmax(70px, .3fr) minmax(58px, .25fr) minmax(132px, .72fr) minmax(120px, .65fr) minmax(160px, .95fr) 56px;
}

.khs-material-line-total {
    align-items: center;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text);
    display: flex;
    font-weight: 900;
    min-height: 48px;
    padding: 10px 12px;
}

.khs-material-total-box {
    align-items: center;
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface-solid));
    border: 1px solid var(--app-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 14px;
    padding: 12px 14px;
}

.khs-material-total-box span {
    color: var(--app-muted);
    font-weight: 800;
}

.khs-material-total-box strong {
    color: var(--app-text);
    font-size: 18px;
}

.material-autocomplete-holder,
.unit-autocomplete-holder {
    position: relative;
}

.material-suggestions,
.unit-suggestions {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .16);
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1095;
}

.material-suggestions {
    max-height: 320px;
    max-width: calc(100vw - 56px);
    min-width: min(520px, calc(100vw - 56px));
    right: auto;
    width: max(100%, min(520px, calc(100vw - 56px)));
}

.material-suggestion-btn,
.unit-suggestion-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--app-text);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    line-height: 1.35;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.material-suggestion-btn {
    align-items: flex-start;
}

.material-suggestion-btn:hover,
.material-suggestion-btn:focus,
.unit-suggestion-btn:hover,
.unit-suggestion-btn:focus {
    background: var(--app-surface-soft);
}

.material-suggestion-main,
.unit-suggestion-btn {
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
}

.material-suggestion-main {
    display: grid;
    gap: 2px;
}

.material-suggestion-main strong {
    color: var(--app-primary);
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.2;
}

.material-suggestion-main span {
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.3;
}

.material-suggestion-btn small,
.unit-suggestion-btn small {
    color: var(--app-muted);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
}

.report-panel {
    display: grid;
    gap: 18px;
}

.report-menu-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.report-menu-card {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text);
    display: flex;
    gap: 12px;
    min-height: 64px;
    padding: 14px 16px;
    text-decoration: none;
}

.report-menu-card i {
    align-items: center;
    background: rgba(13, 110, 253, .10);
    border-radius: 8px;
    color: var(--app-primary);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.report-menu-card span {
    font-weight: 900;
}

.report-menu-card:hover,
.report-menu-card.active {
    background: linear-gradient(180deg, rgba(13, 110, 253, .12), rgba(53, 185, 255, .08));
    border-color: rgba(13, 110, 253, .28);
    color: var(--app-text);
}

.report-title-row {
    align-items: flex-start;
    gap: 14px;
}

.report-filter-form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1.4fr) minmax(170px, .55fr) minmax(170px, .55fr) auto;
}

.report-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-table-wrap {
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    max-height: 62vh;
    overflow: auto;
}

.report-table {
    margin-bottom: 0;
    min-width: 980px;
}

.report-table thead th {
    background: var(--app-surface-soft);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 900;
    position: sticky;
    top: 0;
    z-index: 2;
}

.report-table td,
.report-table th {
    border-color: var(--app-border-soft);
    font-size: 13px;
    vertical-align: middle;
}

.report-summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.report-summary-card {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 14px 16px;
}

.report-summary-card small {
    color: var(--app-muted);
    display: block;
    font-weight: 800;
}

.report-summary-card strong {
    color: var(--app-text);
    display: block;
    font-size: 24px;
    font-weight: 900;
    margin-top: 4px;
}

.backup-preview-section {
    display: grid;
    gap: 8px;
}

.backup-preview-section h3 {
    align-items: center;
    display: flex;
    font-size: 15px;
    font-weight: 900;
    gap: 8px;
    margin: 0;
}

.backup-preview-section h3 span {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 999px;
    color: var(--app-muted);
    font-size: 12px;
    padding: 3px 8px;
}

@media (max-width: 992px) {
    .report-filter-form {
        grid-template-columns: 1fr;
    }
}

.tender-stage-preview,
.tender-stage-detail {
    background: linear-gradient(180deg, var(--app-surface-solid), var(--app-surface-soft));
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 10px;
}

.tender-stage-title {
    color: var(--app-text);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 7px;
    text-align: center;
    text-transform: uppercase;
}

.tender-stage-titlebar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tender-stage-titlebar .tender-stage-title {
    margin-bottom: 0;
    text-align: left;
}

.tender-stage-titlebar .btn {
    white-space: nowrap;
}

.tender-stage-table {
    border: 1px solid var(--app-border);
    font-size: 11px;
    margin-bottom: 0;
    min-width: 760px;
}

.tender-stage-preview .table-responsive {
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
}

.tender-stage-table th {
    background: color-mix(in srgb, var(--app-primary) 20%, var(--app-surface-solid));
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-weight: 900;
    padding: 7px 8px;
    position: sticky;
    top: 0;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}

.tender-stage-table td {
    background: color-mix(in srgb, var(--app-surface-solid) 88%, var(--app-surface-soft));
    border: 1px solid var(--app-border);
    color: var(--app-text);
    padding: 6px 8px;
    vertical-align: middle;
}

.tender-stage-table tbody tr {
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.tender-stage-table tbody tr:hover td {
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface-solid));
}

.tender-stage-table th:first-child,
.tender-stage-table td:first-child {
    text-align: center;
    width: 44px;
}

.tender-stage-table th:nth-child(2),
.tender-stage-table td:nth-child(2) {
    min-width: 260px;
}

.tender-stage-table th:nth-child(3),
.tender-stage-table th:nth-child(4),
.tender-stage-table td:nth-child(3),
.tender-stage-table td:nth-child(4) {
    min-width: 130px;
}

.tender-stage-table th:nth-child(5),
.tender-stage-table td:nth-child(5) {
    min-width: 230px;
}

.tender-stage-history-cell {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tender-stage-view-doc {
    background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface-solid));
    border: 1px solid color-mix(in srgb, var(--app-primary) 45%, var(--app-border));
    border-radius: 999px;
    color: var(--app-primary);
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    padding: 5px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tender-stage-table th:nth-child(6),
.tender-stage-table td:nth-child(6) {
    min-width: 90px;
}

.tender-stage-table th:last-child,
.tender-stage-table td:last-child {
    min-width: 100px;
}

.tender-stage-text {
    color: var(--app-text);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.tender-stage-history-text {
    max-width: 190px;
}

.tender-stage-name-text {
    max-width: 250px;
}

.tender-stage-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.tender-stage-actions .btn {
    font-size: 11px;
    padding: 4px 8px;
}

.material-remove-btn {
    height: 48px;
    width: 100%;
}

.comparison-table th,
.comparison-table td {
    white-space: nowrap;
}

.comparison-table td:first-child {
    min-width: 280px;
    white-space: normal;
}

.khs-view-title {
    align-items: center;
    display: inline-flex;
    gap: 12px;
    font-weight: 900;
}

.khs-view-title span {
    align-items: center;
    background: #0d6efd;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.khs-detail-grid {
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 10px;
}

.khs-detail-card {
    align-items: center;
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    display: flex;
    gap: 14px;
    min-height: 78px;
    min-width: 0;
    padding: 16px 12px;
}

.khs-detail-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 38px;
    font-size: 19px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.khs-detail-icon-blue {
    background: #eaf2ff;
    color: #0d6efd;
}

.khs-detail-icon-purple {
    background: #f0edff;
    color: #5b5bd6;
}

.khs-detail-icon-green {
    background: #eaf8e6;
    color: #299334;
}

.khs-detail-content {
    display: block;
    min-width: 0;
}

.khs-detail-content small {
    color: var(--app-muted);
    display: block;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 7px;
}

.khs-detail-content strong {
    color: var(--app-text);
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.khs-detail-content a {
    color: var(--app-blue);
    font-weight: 900;
    text-decoration: none;
}

.khs-detail-content a:hover {
    text-decoration: underline;
}

.khs-view-table-card {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    padding: 16px;
}

.khs-view-table-scroll {
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    max-height: 420px;
    overflow: auto;
}

.khs-view-material-table {
    min-width: 860px;
}

.khs-view-material-table th,
.khs-view-material-table td {
    font-size: 13px;
    padding: 12px 14px !important;
    text-align: center;
    white-space: nowrap;
}

.khs-view-material-table thead th {
    background: var(--app-table-head) !important;
    border-bottom: 1px solid var(--app-border) !important;
    color: var(--app-text);
    font-weight: 900;
    line-height: 1.45;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    vertical-align: middle;
    z-index: 2;
}

.khs-view-material-table thead tr:first-child th {
    top: 0;
    z-index: 4;
}

.khs-view-material-table thead tr:nth-child(2) th {
    top: 42px;
    z-index: 3;
}

.khs-view-material-table thead th.khs-base-head {
    background: #a9ccec !important;
    color: #0f172a;
}

.khs-view-material-table thead th.khs-absorption-head {
    background: #f5c2a2 !important;
    color: #111827;
    text-align: center;
}

.khs-view-material-table thead th.khs-unit-head {
    background: #f8d2b8 !important;
    color: #111827;
    text-align: center;
}

.khs-view-material-table thead th.khs-amendment-head {
    background: #9bdf78 !important;
    color: #0f172a;
    text-align: center;
}

.amandemen-list-table .action-buttons {
    flex-wrap: nowrap;
    justify-content: center;
}

.amandemen-list-table td,
.amandemen-material-form-table td {
    vertical-align: middle;
}

.amandemen-rekap-table {
    min-width: 1120px;
}

.amandemen-rekap-table th,
.amandemen-rekap-table td {
    text-align: center;
}

.khs-view-material-table .khs-qty-cell {
    text-align: center !important;
    vertical-align: middle;
}

.amandemen-rekap-table th:nth-child(2),
.amandemen-rekap-table td:nth-child(2) {
    min-width: 280px;
    text-align: left;
}

.amandemen-summary-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.amandemen-summary-card {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: flex;
    gap: 14px;
    min-height: 86px;
    padding: 14px 16px;
}

.amandemen-summary-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.amandemen-summary-icon.tone-blue {
    background: #dbeafe;
    color: #2563eb;
}

.amandemen-summary-icon.tone-green {
    background: #dcfce7;
    color: #15803d;
}

.amandemen-summary-icon.tone-orange {
    background: #fed7aa;
    color: #ea580c;
}

.amandemen-summary-icon.tone-purple {
    background: #f3e8ff;
    color: #9333ea;
}

.amandemen-summary-card small {
    color: var(--app-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}

.amandemen-summary-card strong,
.amandemen-summary-card span {
    color: var(--app-text);
    display: block;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.amandemen-note-history {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.amandemen-note-history h3 {
    color: var(--app-text);
    font-size: 13px;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
}

.amandemen-note-item {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.amandemen-note-item strong {
    color: var(--app-text);
    font-size: 13px;
}

.amandemen-note-item span {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 700;
}

.amandemen-note-item p {
    color: var(--app-text);
    font-size: 13px;
    margin: 0;
}

.khs-view-material-table thead th.khs-total-absorption-head,
.amandemen-rekap-table .amandemen-total-cell {
    background: #fde9a9 !important;
    color: #111827;
}

.amandemen-rekap-table .amandemen-total-row td {
    background: rgba(241, 245, 249, .85) !important;
    font-weight: 900;
}

.approve-detail-stack {
    display: grid;
    gap: 12px;
}

.approve-detail-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.approve-detail-row > div {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border-soft);
    border-radius: 8px;
    min-height: 72px;
    padding: 12px 14px;
}

.approve-detail-row small {
    color: var(--app-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.approve-detail-row strong {
    color: var(--app-text);
    display: block;
    font-weight: 900;
    overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
    .amandemen-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .khs-detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .delivery-modal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .amandemen-summary-grid {
        grid-template-columns: 1fr;
    }

    .approve-detail-row {
        grid-template-columns: 1fr;
    }

    .khs-detail-grid {
        grid-template-columns: 1fr;
    }

    .khs-detail-card {
        min-height: 70px;
    }

    .delivery-modal-header,
    .delivery-modal .modal-body,
    .delivery-modal .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .delivery-period-grid {
        grid-template-columns: 1fr;
    }

    .delivery-period-separator {
        display: none;
    }
}

.section-title-row {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

#modalAmandemenForm .amandemen-form-dialog {
    max-width: min(98vw, 1680px);
    width: min(98vw, 1680px);
}

#modalAmandemenForm .modal-content {
    overflow: hidden;
}

#modalAmandemenForm .modal-header,
#modalAmandemenForm .modal-footer {
    padding-left: clamp(18px, 1.6vw, 28px);
    padding-right: clamp(18px, 1.6vw, 28px);
}

#modalAmandemenForm .amandemen-form-modal-body {
    padding: clamp(18px, 1.6vw, 28px);
}

#modalAmandemenForm .form-section {
    border-color: var(--app-border);
    box-shadow: none;
}

#modalAmandemenForm .amandemen-data-section .form-label,
#modalAmandemenForm .amandemen-instansi-card .form-label {
    color: var(--app-text);
    font-size: 12px;
    font-weight: 900;
}

#modalAmandemenForm .section-title-row {
    align-items: center;
    flex-wrap: wrap;
}

#modalAmandemenForm .section-title-row h3 {
    margin-bottom: 4px;
}

.amandemen-instansi-list {
    display: grid;
    gap: 14px;
}

.amandemen-instansi-card {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    overflow: hidden;
}

.amandemen-instansi-head {
    align-items: center;
    background: linear-gradient(180deg, rgba(11, 94, 215, .10), rgba(53, 185, 255, .07));
    border-bottom: 1px solid var(--app-border);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 12px 16px;
}

.amandemen-instansi-title {
    align-items: center;
    display: flex;
    gap: 10px;
    flex: 1 1 420px;
    min-width: 0;
}

.amandemen-instansi-name {
    font-weight: 800;
    max-width: 420px;
}

.amandemen-card-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: 236px;
}

.amandemen-card-actions .btn {
    align-items: center;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
}

.amandemen-card-actions .amandemen-add-material-btn {
    min-width: 142px;
}

.amandemen-card-actions .amandemen-delete-instansi-btn {
    min-width: 76px;
}

.amandemen-material-table-wrap {
    background: var(--app-surface-solid);
    max-height: min(42vh, 520px);
    overflow: auto;
}

.amandemen-material-table-wrap::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.amandemen-material-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);
    border-radius: 999px;
}

.amandemen-material-form-table {
    margin-bottom: 0;
    min-width: 1560px;
    table-layout: fixed;
}

.amandemen-material-form-table col.am-form-col-no {
    width: 56px;
}

.amandemen-material-form-table col.am-form-col-code {
    width: 170px;
}

.amandemen-material-form-table col.am-form-col-material {
    width: 330px;
}

.amandemen-material-form-table col.am-form-col-satuan {
    width: 160px;
}

.amandemen-material-form-table col.am-form-col-qty {
    width: 150px;
}

.amandemen-material-form-table col.am-form-col-harga {
    width: 190px;
}

.amandemen-material-form-table col.am-form-col-note {
    width: 220px;
}

.amandemen-material-form-table col.am-form-col-action {
    width: 78px;
}

.amandemen-material-form-table th,
.amandemen-material-form-table td {
    border-color: var(--app-border-soft);
    font-size: 13px;
    padding: 12px 16px !important;
    vertical-align: middle;
    white-space: normal;
}

.amandemen-material-form-table thead th {
    background: var(--app-table-head);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 900;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 2;
}

.amandemen-material-form-table tbody tr:hover td {
    background: var(--app-table-hover);
}

.amandemen-material-form-table .form-control {
    min-height: 38px;
}

.amandemen-material-form-table th:nth-child(2),
.amandemen-material-form-table td:nth-child(2) {
    color: var(--app-text);
    font-weight: 800;
    line-height: 1.45;
    white-space: normal;
}

.amandemen-material-form-table th:first-child,
.amandemen-material-form-table td:first-child,
.amandemen-material-form-table th:nth-child(4),
.amandemen-material-form-table td:nth-child(4),
.amandemen-material-form-table th:nth-child(5),
.amandemen-material-form-table td:nth-child(5),
.amandemen-material-form-table th:nth-child(7),
.amandemen-material-form-table td:nth-child(7) {
    text-align: center;
}

.amandemen-material-form-table th:last-child,
.amandemen-material-form-table td:last-child {
    text-align: center;
}

.amandemen-material-form-table .btn-sm {
    align-items: center;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    min-height: 40px;
    padding: 0;
    width: 40px;
}

.khs-view-material-table th:first-child,
.khs-view-material-table td:first-child,
.khs-view-material-table th:last-child,
.khs-view-material-table td:last-child {
    text-align: left;
    white-space: normal;
}

.khs-view-material-table td:first-child {
    font-weight: 800;
    min-width: 220px;
}

.khs-view-material-table th:nth-child(3),
.khs-view-material-table td:nth-child(3) {
    min-width: 92px;
}

.khs-view-material-table .khs-amandemen-row td {
    background: rgba(245, 158, 11, .12) !important;
    color: var(--app-text);
}

.amandemen-rekap-table {
    table-layout: fixed;
    width: max-content;
}

.amandemen-rekap-table col.am-col-no {
    width: 52px;
}

.amandemen-rekap-table col.am-col-material {
    width: 360px;
}

.amandemen-rekap-table col.am-col-satuan {
    width: 82px;
}

.amandemen-rekap-table col.am-col-qty,
.amandemen-rekap-table col.am-col-amandemen,
.amandemen-rekap-table col.am-col-penyerapan {
    width: 96px;
}

.amandemen-rekap-table col.am-col-total,
.amandemen-rekap-table col.am-col-selisih {
    width: 118px;
}

.amandemen-rekap-table col.am-col-keterangan {
    width: 132px;
}

.amandemen-rekap-table th,
.amandemen-rekap-table td {
    font-size: 12px;
    line-height: 1.35;
    padding: 9px 10px !important;
    white-space: normal;
}

.amandemen-rekap-table th:first-child,
.amandemen-rekap-table td:first-child {
    min-width: 0;
    text-align: center;
    width: 52px;
}

.amandemen-rekap-table th:nth-child(2),
.amandemen-rekap-table td:nth-child(2) {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}

.amandemen-rekap-table td:nth-child(n+3) {
    text-align: center;
}

.amandemen-rekap-table th:last-child,
.amandemen-rekap-table td:last-child {
    min-width: 0;
    text-align: center;
}

.amandemen-rekap-table .amandemen-total-row td:first-child {
    text-align: center;
}

.amandemen-rekap-table thead th {
    border-color: rgba(80, 116, 153, .28) !important;
    border-bottom-width: 0 !important;
    box-shadow: none !important;
}

.amandemen-rekap-table thead tr:first-child th {
    border-bottom: 0 !important;
}

.amandemen-rekap-table thead tr:nth-child(2) th {
    border-top: 1px solid rgba(80, 116, 153, .24) !important;
    top: 38px;
}

.amandemen-rekap-table thead th.khs-amendment-head {
    border-color: rgba(88, 160, 55, .38) !important;
}

.amandemen-rekap-table thead th.khs-absorption-head,
.amandemen-rekap-table thead th.khs-unit-head {
    border-color: rgba(209, 126, 74, .34) !important;
}

.amandemen-rekap-table thead th.khs-total-absorption-head {
    border-color: rgba(205, 158, 38, .34) !important;
}

.khs-contract-qty-link,
.khs-absorption-detail-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--app-blue);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 900;
    justify-content: center;
    min-width: 34px;
    padding: 3px 8px;
    text-decoration: none;
}

.khs-contract-qty-link:hover,
.khs-contract-qty-link:focus,
.khs-absorption-detail-btn:hover,
.khs-absorption-detail-btn:focus {
    background: rgba(14, 102, 241, .12);
    color: var(--app-blue-strong);
}

:root[data-theme="dark"] .khs-view-table-card {
    background: var(--app-surface-solid);
    border-color: rgba(148, 163, 184, .24);
}

:root[data-theme="dark"] .khs-view-table-scroll {
    border-color: rgba(148, 163, 184, .22);
}

:root[data-theme="dark"] .khs-detail-grid,
:root[data-theme="dark"] .khs-detail-card {
    background: var(--app-surface-solid);
    border-color: rgba(148, 163, 184, .22);
}

:root[data-theme="dark"] .khs-detail-card {
    box-shadow: none;
}

:root[data-theme="dark"] .khs-detail-icon-blue {
    background: rgba(59, 130, 246, .18);
    color: #93c5fd;
}

:root[data-theme="dark"] .khs-detail-icon-purple {
    background: rgba(129, 140, 248, .18);
    color: #c4b5fd;
}

:root[data-theme="dark"] .khs-detail-icon-green {
    background: rgba(34, 197, 94, .16);
    color: #86efac;
}

:root[data-theme="dark"] .khs-view-material-table {
    --bs-table-bg: var(--app-surface-solid);
    --bs-table-striped-bg: rgba(148, 163, 184, .08);
    --bs-table-hover-bg: rgba(96, 165, 250, .12);
    --bs-table-color: var(--app-text);
    color: var(--app-text);
}

:root[data-theme="dark"] .khs-view-material-table thead th {
    background: rgba(37, 99, 235, .18) !important;
    border-bottom-color: rgba(148, 163, 184, .28) !important;
    color: var(--app-text);
}

:root[data-theme="dark"] .khs-view-material-table thead th.khs-base-head {
    background: rgba(59, 130, 246, .34) !important;
    color: var(--app-text);
}

:root[data-theme="dark"] .khs-view-material-table thead th.khs-absorption-head,
:root[data-theme="dark"] .khs-view-material-table thead th.khs-unit-head {
    background: rgba(249, 115, 22, .32) !important;
    color: var(--app-text);
}

:root[data-theme="dark"] .khs-view-material-table th,
:root[data-theme="dark"] .khs-view-material-table td {
    border-color: rgba(148, 163, 184, .18);
    color: var(--app-text);
}

:root[data-theme="dark"] .khs-view-material-table .khs-amandemen-row td {
    background: rgba(245, 158, 11, .18) !important;
    color: var(--app-text);
}

:root[data-theme="dark"] .khs-contract-qty-link,
:root[data-theme="dark"] .khs-absorption-detail-btn {
    color: #93c5fd;
}

:root[data-theme="dark"] .khs-contract-qty-link:hover,
:root[data-theme="dark"] .khs-contract-qty-link:focus,
:root[data-theme="dark"] .khs-absorption-detail-btn:hover,
:root[data-theme="dark"] .khs-absorption-detail-btn:focus {
    background: rgba(147, 197, 253, .14);
    color: #bfdbfe;
}

.kontrak-material-full {
    width: 100%;
}

.kontrak-material-list,
.khs-material-list {
    display: grid;
    gap: 12px;
}

.pengadaan-material-list {
    display: grid;
    gap: 12px;
}

.pengadaan-material-entry-grid {
    align-items: end;
    grid-template-columns: minmax(420px, 1fr) 150px 140px 56px;
}

.pengadaan-material-entry-grid .pengadaan-material-name-field {
    min-width: 0;
}

.pengadaan-material-entry-grid .pengadaan-material-name-field .form-control {
    min-width: 0;
    width: 100%;
}

.pengadaan-material-entry-grid .pengadaan-material-qty-field,
.pengadaan-material-entry-grid .pengadaan-material-unit-field {
    max-width: 150px;
}

.pengadaan-material-entry-grid .pengadaan-material-unit-field {
    max-width: 140px;
}

@media (max-width: 992px) {
    .material-entry-grid {
        grid-template-columns: 1fr 1fr;
    }

    .material-entry-grid > div:first-child,
    .material-entry-grid > div:nth-child(4),
    .material-entry-grid > div:last-child {
        grid-column: 1 / -1;
    }

    .pengadaan-material-entry-grid .pengadaan-material-qty-field,
    .pengadaan-material-entry-grid .pengadaan-material-unit-field {
        max-width: none;
    }
}

.document-preview-empty {
    align-items: center;
    border: 1px dashed var(--app-border);
    border-radius: 8px;
    color: var(--app-muted);
    display: flex;
    font-weight: 700;
    justify-content: center;
    min-height: 154px;
    padding: 16px;
    text-align: center;
}

.document-preview-frame,
.document-preview-image {
    border: 0;
    border-radius: 8px;
    height: 420px;
    object-fit: contain;
    width: 100%;
}

.document-preview-name {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.form-control:focus,
.form-select:focus {
    border-color: #8cc4ff;
    box-shadow: 0 0 0 .2rem rgba(11, 94, 215, .12);
}

.progress {
    background: #e7f0fb;
    border-radius: 999px;
    height: 18px;
}

.progress-bar {
    background: linear-gradient(90deg, var(--app-blue), var(--app-cyan));
    font-size: 12px;
    font-weight: 800;
}

.list-group-item {
    background: var(--app-surface-solid);
    border-color: var(--app-border-soft);
    color: var(--app-text);
}

.modal-content {
    background: var(--app-surface-solid);
    border: 0;
    border-radius: 8px;
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

.modal-master-wide {
    max-width: min(96vw, 1420px);
    width: min(96vw, 1420px);
}

#modalKontrak .modal-master-wide {
    max-width: min(98vw, 1760px);
    width: min(98vw, 1760px);
}

.modal-header,
.modal-footer {
    border-color: var(--app-border-soft);
}

:root[data-theme="dark"] .modal-content {
    background: #101b2e;
    color: #eef6ff;
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    background: #101b2e;
    border-color: rgba(148, 163, 184, .18);
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

:root[data-theme="dark"] .detail-grid div,
:root[data-theme="dark"] .form-section,
:root[data-theme="dark"] .bayar-pajak-options,
:root[data-theme="dark"] .bayar-material-table-wrap,
:root[data-theme="dark"] .bayar-history-table-wrap {
    background: #0d1727;
    border-color: rgba(148, 163, 184, .18);
}

.login-page {
    align-items: center;
    background:
        radial-gradient(circle at 8% 12%, rgba(126, 183, 255, .38), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(255, 181, 196, .48), transparent 32%),
        linear-gradient(135deg, #d9e4ff 0%, #fff2f6 52%, #fff8e8 100%);
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    padding: clamp(18px, 4vw, 52px);
}

.login-shell {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 980px;
    width: 100%;
}

.login-card {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(59, 91, 164, .22);
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.login-card-desktop {
    display: grid;
    grid-template-columns: minmax(340px, .95fr) minmax(360px, 1.05fr);
    min-height: 520px;
}

.login-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 5vw, 68px);
}

.login-brand {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: clamp(28px, 5vw, 56px);
}

.login-brand-mark {
    align-items: center;
    background: linear-gradient(135deg, #0b5ed7, #35b9ff);
    border-radius: 50%;
    box-shadow: 0 14px 28px rgba(11, 94, 215, .25);
    color: #fff;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.login-brand strong,
.login-brand small {
    display: block;
}

.login-brand strong {
    color: #13243b;
    font-weight: 900;
}

.login-brand small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.login-heading {
    margin-bottom: 24px;
}

.login-heading h1 {
    color: #111827;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 10px;
}

.login-heading p {
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-form .form-label {
    color: #1f2937;
    font-size: 12px;
    font-weight: 900;
}

.login-input {
    align-items: center;
    background: #f7f9ff;
    border: 1px solid #e9eef9;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
}

.login-input:focus-within {
    background: #fff;
    border-color: #8cc4ff;
    box-shadow: 0 0 0 .2rem rgba(11, 94, 215, .12);
}

.login-input > i {
    color: #7a8aa5;
    flex: 0 0 auto;
}

.login-input input {
    background: transparent;
    border: 0;
    color: #172033;
    flex: 1 1 auto;
    font-weight: 700;
    min-width: 0;
    outline: 0;
}

.login-input input::placeholder {
    color: #a6b1c2;
}

.login-password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #7a8aa5;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    padding: 0;
}

.login-mini-text,
.login-default {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.login-check {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
}

.login-submit {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    min-height: 48px;
    text-transform: uppercase;
}

.login-default {
    margin-top: 18px;
}

.login-art-panel {
    align-items: center;
    background:
        radial-gradient(circle at 68% 24%, rgba(255, 206, 89, .34), transparent 18%),
        radial-gradient(circle at 18% 74%, rgba(255, 129, 191, .30), transparent 20%),
        linear-gradient(135deg, #3866ff 0%, #7645d8 48%, #15255d 100%);
    border-bottom-left-radius: 52%;
    border-top-left-radius: 52%;
    display: flex;
    justify-content: center;
    min-height: 520px;
    overflow: hidden;
    position: relative;
}

.login-art-scene {
    height: min(78vw, 420px);
    max-height: 420px;
    max-width: 420px;
    position: relative;
    width: min(78vw, 420px);
}

.login-art-scene::before,
.login-art-scene::after {
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    content: "";
    inset: 12%;
    position: absolute;
}

.login-art-scene::after {
    inset: 25%;
}

.login-orbit {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border: 5px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    box-shadow: 0 14px 34px rgba(12, 20, 61, .28), 0 0 28px rgba(255, 255, 255, .5);
    color: #3866ff;
    display: inline-flex;
    font-size: clamp(20px, 2vw, 30px);
    height: clamp(58px, 7vw, 84px);
    justify-content: center;
    position: absolute;
    width: clamp(58px, 7vw, 84px);
}

.orbit-1 {
    left: 7%;
    top: 29%;
}

.orbit-2 {
    right: 13%;
    top: 17%;
    color: #ff9b31;
}

.orbit-3 {
    bottom: 19%;
    left: 16%;
    color: #a14cff;
}

.orbit-4 {
    bottom: 29%;
    right: 9%;
    color: #ffc531;
}

.orbit-5 {
    bottom: 7%;
    left: 48%;
    color: #ff5e7e;
    height: 58px;
    width: 58px;
}

.login-person {
    bottom: 28%;
    display: block;
    height: 140px;
    left: 47%;
    position: absolute;
    transform: translateX(-50%);
    width: 76px;
}

.login-person-head,
.login-person-body,
.login-person-leg {
    display: block;
    position: absolute;
}

.login-person-head {
    background: #ffc7a6;
    border-radius: 50%;
    height: 28px;
    left: 25px;
    top: 0;
    width: 28px;
}

.login-person-body {
    background: linear-gradient(180deg, #f765a3, #4038a8);
    border-radius: 20px 20px 14px 14px;
    height: 76px;
    left: 20px;
    top: 24px;
    transform: rotate(-8deg);
    width: 38px;
}

.login-person-leg {
    background: #1f2b74;
    border-radius: 999px;
    height: 62px;
    top: 89px;
    width: 12px;
}

.leg-left {
    left: 29px;
    transform: rotate(24deg);
}

.leg-right {
    left: 48px;
    transform: rotate(-32deg);
}

:root[data-theme="dark"] .login-page {
    background:
        radial-gradient(circle at 10% 12%, rgba(76, 157, 255, .28), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(255, 129, 191, .22), transparent 32%),
        linear-gradient(135deg, #08111f 0%, #101b2e 55%, #201533 100%);
}

:root[data-theme="dark"] .login-card {
    background: rgba(16, 27, 46, .94);
    border-color: rgba(148, 163, 184, .18);
}

:root[data-theme="dark"] .login-brand strong,
:root[data-theme="dark"] .login-heading h1,
:root[data-theme="dark"] .login-form .form-label {
    color: #eef6ff;
}

:root[data-theme="dark"] .login-brand small,
:root[data-theme="dark"] .login-heading p,
:root[data-theme="dark"] .login-mini-text,
:root[data-theme="dark"] .login-default,
:root[data-theme="dark"] .login-check {
    color: #a8b7ce;
}

:root[data-theme="dark"] .login-input {
    background: #0b1728;
    border-color: rgba(148, 163, 184, .22);
}

:root[data-theme="dark"] .login-input input {
    color: #eef6ff;
}

.login-page {
    align-items: center;
    background:
        radial-gradient(circle at 13% 0%, rgba(150, 91, 235, .26) 0 7%, transparent 7.2%),
        radial-gradient(circle at 71% -5%, rgba(128, 75, 222, .74) 0 8%, transparent 8.2%),
        radial-gradient(circle at 25% 100%, rgba(126, 83, 235, .72) 0 9%, transparent 9.2%),
        radial-gradient(circle at 94% 99%, rgba(255, 193, 103, .72) 0 13%, transparent 13.2%),
        radial-gradient(circle at 87% 88%, rgba(221, 100, 202, .20) 0 4%, transparent 4.2%),
        radial-gradient(circle at 8% 13%, rgba(164, 210, 255, .58), transparent 26%),
        radial-gradient(circle at 76% 37%, rgba(255, 119, 67, .62), transparent 25%),
        radial-gradient(circle at 63% 57%, rgba(221, 65, 243, .48), transparent 24%),
        linear-gradient(135deg, #eaf6ff 0%, #eff9f4 42%, #fff4e5 100%);
    min-height: 100vh;
    padding: clamp(22px, 4vw, 44px);
}

.login-shell {
    max-width: 1130px;
}

.login-glass-card {
    background: rgba(255, 255, 255, .50);
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(84, 93, 127, .18);
    display: grid;
    grid-template-columns: minmax(310px, 410px) minmax(430px, 1fr);
    min-height: 680px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.login-glass-card::before {
    background:
        radial-gradient(circle at 64% 29%, rgba(151, 224, 202, .44), transparent 17%),
        radial-gradient(circle at 79% 45%, rgba(222, 91, 207, .38), transparent 19%),
        radial-gradient(circle at 89% 63%, rgba(143, 83, 232, .34), transparent 18%),
        radial-gradient(circle at 57% 47%, rgba(100, 224, 231, .26), transparent 20%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.login-bubble {
    border-radius: 50%;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.login-bubble-top-left {
    background: rgba(171, 102, 231, .20);
    height: 92px;
    left: 40px;
    top: -42px;
    width: 92px;
}

.login-bubble-top-right {
    background: rgba(129, 73, 226, .75);
    height: 150px;
    right: 168px;
    top: -92px;
    width: 150px;
}

.login-bubble-bottom-left {
    background: rgba(128, 82, 236, .70);
    bottom: -112px;
    height: 218px;
    left: 176px;
    width: 218px;
}

.login-bubble-bottom-right {
    background: rgba(221, 100, 202, .22);
    bottom: -10px;
    height: 96px;
    right: 66px;
    width: 96px;
}

.login-form-panel,
.login-hero-panel {
    position: relative;
    z-index: 2;
}

.login-form-panel {
    display: block;
    padding: 78px 0 74px 98px;
}

.login-brand {
    align-items: center;
    display: inline-flex;
    filter: none;
    line-height: 1;
    margin: 0 0 74px;
    text-shadow: none;
}

.login-brand img {
    display: block;
    height: auto;
    max-height: 86px;
    object-fit: contain;
    width: 150px;
}

.login-heading {
    margin-bottom: 16px;
}

.login-heading h1 {
    color: #454d6c;
    font-size: 30px;
    font-weight: 600;
    margin: 0;
}

.login-heading p {
    color: #0799ec;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin: 2px 0 0;
}

.login-form {
    gap: 14px;
    max-width: 330px;
}

.login-form .form-label {
    color: #8c95a7;
    font-size: 10px;
    font-weight: 700;
    left: 16px;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 10px;
    z-index: 1;
}

.login-form > div {
    position: relative;
}

.login-input {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(185, 202, 223, .72);
    border-radius: 3px;
    gap: 8px;
    min-height: 45px;
    padding: 16px 12px 6px 16px;
}

.login-input:focus-within {
    background: rgba(255, 255, 255, .90);
    border-color: #12a8f3;
    box-shadow: 0 0 0 1px rgba(18, 168, 243, .35);
}

.login-input input {
    color: #26304d;
    font-size: 13px;
    font-weight: 600;
}

.login-input input::placeholder {
    color: #9aa6b8;
}

.login-password-toggle {
    color: #a6afbf;
}

.login-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}

.login-check {
    color: #778295;
    font-size: 11px;
    gap: 7px;
}

.login-check input {
    height: 12px;
    width: 12px;
}

.login-forgot {
    color: #0799ec;
    font-size: 11px;
    font-weight: 800;
}

.login-actions {
    display: grid;
    gap: 9px;
    grid-template-columns: 1fr;
    margin-top: 8px;
}

.login-submit,
.login-submit-outline {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    height: 42px;
    transition: .18s ease;
}

.login-submit {
    background: #159fe7;
    border: 1px solid #159fe7;
    box-shadow: 0 12px 24px rgba(21, 159, 231, .25);
    color: #fff;
}

.login-submit-outline {
    background: rgba(255, 255, 255, .56);
    border: 1px solid #159fe7;
    color: #138ad0;
}

.login-submit:hover,
.login-submit:focus,
.login-submit-outline:hover,
.login-submit-outline:focus {
    transform: translateY(-1px);
}

.login-terms {
    color: #2f3447;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 42px;
    max-width: 285px;
}

.login-hero-panel {
    min-width: 0;
    padding: 82px 72px 84px 24px;
    position: relative;
}

.login-asset {
    display: block;
    object-fit: contain;
    pointer-events: none;
    position: absolute;
}

.login-asset-person {
    bottom: 122px;
    right: 96px;
    width: 400px;
    z-index: 4;
}

.login-asset-plant {
    bottom: 114px;
    left: 34px;
    width: 188px;
    z-index: 3;
}

.login-asset-cup {
    bottom: 128px;
    right: 2px;
    width: 112px;
    z-index: 3;
}

.login-asset-bubbles-left {
    bottom: 132px;
    left: 12px;
    opacity: .86;
    width: 278px;
    z-index: 1;
}

.login-asset-bubble-large {
    right: 132px;
    top: 126px;
    width: 274px;
    z-index: 1;
}

.login-asset-bubbles-right {
    bottom: 70px;
    right: 18px;
    opacity: .88;
    width: 176px;
    z-index: 2;
}

.login-dotted-loop {
    border: 2px dotted rgba(255, 255, 255, .78);
    border-radius: 47% 53% 43% 57% / 51% 41% 59% 49%;
    height: 238px;
    position: absolute;
    right: 112px;
    top: 188px;
    transform: rotate(-7deg);
    width: 430px;
    z-index: 3;
}

:root[data-theme="dark"] .login-glass-card {
    background: rgba(255, 255, 255, .50);
    border-color: rgba(255, 255, 255, .92);
}

:root[data-theme="dark"] .login-heading h1,
:root[data-theme="dark"] .login-input input,
:root[data-theme="dark"] .login-terms {
    color: #26304d;
}

:root[data-theme="dark"] .login-form .form-label,
:root[data-theme="dark"] .login-check {
    color: #778295;
}

:root[data-theme="dark"] .login-input {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(185, 202, 223, .72);
}

.mobile-sidebar {
    width: min(86vw, 320px);
}

.mobile-sidebar .offcanvas-body {
    background: var(--app-surface-solid);
}

@media (min-width: 992px) and (max-width: 1500px) {
    :root {
        --sidebar-width: clamp(218px, 16vw, 250px);
        --sidebar-top: 12px;
        --sidebar-pad: 12px;
        --sidebar-gap: 10px;
    }

    .sidebar-profile-copy small {
        display: none;
    }
}

@media (min-width: 992px) and (max-height: 780px) {
    :root {
        --sidebar-top: 8px;
        --sidebar-pad: 10px;
        --sidebar-gap: 8px;
    }

    .sidebar-profile {
        padding-bottom: 10px;
    }

    .sidebar-link {
        min-height: 34px;
    }

    .sidebar-sublink {
        padding-bottom: 6px;
        padding-top: 6px;
    }
}

@media (max-width: 991.98px) {
    .login-shell {
        max-width: 520px;
    }

    .login-glass-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .login-hero-panel {
        display: none;
    }

    .login-form-panel {
        padding: 48px 38px;
    }

    .login-brand {
        margin-bottom: 56px;
    }

    .login-card-desktop {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .login-art-panel {
        display: none;
    }

    .login-form-panel {
        padding: 48px 38px;
    }

    .login-brand {
        margin-bottom: 56px;
    }

    .app-sidebar {
        display: none;
    }

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

    .app-topbar {
        padding: 12px 16px;
    }

    .mobile-sidebar {
        background: var(--app-sidebar-bg);
        color: var(--sidebar-text);
    }

    .mobile-sidebar .offcanvas-header,
    .mobile-sidebar .offcanvas-body {
        background: transparent;
    }

    .mobile-sidebar .offcanvas-title {
        color: var(--sidebar-text);
    }

    .mobile-sidebar .btn-close {
        filter: none;
    }

    :root[data-theme="dark"] .mobile-sidebar .btn-close {
        filter: invert(1) grayscale(1);
    }
}

@media (max-width: 767.98px) {
    body,
    .app-body {
        font-size: 14px;
    }

    .topbar-label {
        display: none;
    }

    .topbar-title {
        font-size: 18px;
    }

    .page-heading {
        display: block;
        margin-bottom: 18px;
    }

    .page-heading h1 {
        font-size: 24px;
    }

    .page-heading .btn,
    .page-heading button {
        margin-top: 14px;
        width: 100%;
    }

    .panel,
    .stat-card,
    .flow-card {
        padding: 18px;
    }

    .panel-title {
        display: block;
    }

    .panel-title .btn,
    .panel-title .badge {
        margin-top: 12px;
    }

    .tender-filter {
        grid-template-columns: 1fr;
    }

    .tender-filter .btn {
        width: 100%;
    }

    .kontrak-filter {
        grid-template-columns: 1fr;
    }

    .kontrak-filter .btn {
        width: 100%;
    }

    .pengadaan-filter {
        grid-template-columns: 1fr;
    }

    .pengadaan-filter .btn {
        width: 100%;
    }

    .produksi-filter,
    .delivery-filter,
    .dokumen-filter {
        grid-template-columns: 1fr;
    }

    .produksi-filter .btn,
    .delivery-filter .btn,
    .dokumen-filter .btn {
        width: 100%;
    }

    .chart-wrap {
        grid-template-columns: repeat(6, 70px);
    }

    .tender-modal-grid {
        grid-template-columns: 1fr;
    }

    .khs-modal-grid {
        grid-template-columns: 1fr;
    }

    .khs-entry-fields {
        grid-template-columns: 1fr;
    }

    .khs-span-12,
    .khs-span-6,
    .khs-span-4 {
        grid-column: 1 / -1;
    }

    .table > :not(caption) > * > * {
        padding: 12px;
    }

    .login-page {
        align-items: center;
        min-height: 100dvh;
        padding: 18px;
    }

    .login-card {
        padding: 0;
    }

    .login-form-panel {
        padding: 24px;
    }

    .login-heading h1 {
        font-size: 24px;
    }

    .login-heading p {
        font-size: 14px;
    }

    .login-glass-card {
        border-radius: 22px;
    }

    .login-form-panel {
        padding: 38px 24px;
    }

    .login-brand {
        margin-bottom: 42px;
    }

    .login-brand img {
        max-height: 70px;
        width: 124px;
    }

    .login-heading h1 {
        font-size: 28px;
    }

    .login-form {
        max-width: none;
    }

    .login-terms {
        margin-top: 30px;
    }

    .bayar-payment-form-grid {
        grid-template-columns: 1fr;
    }

    .bayar-field-tax,
    .bayar-span-4,
    .bayar-span-6,
    .bayar-span-12,
    .bayar-field-spacer {
        grid-column: 1 / -1;
    }

    .bayar-field-spacer {
        display: none;
    }

    .bayar-form-card {
        padding: 0;
    }
}

/* Final login override: compact centered RKA portal */
.login-page {
    background: #eef3fa !important;
    min-height: 100dvh;
}

.login-shell {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: 32px 16px !important;
}

.login-glass-card.login-compact-card {
    background: #ffffff !important;
    border: 1px solid #d4dfed !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    display: block !important;
    max-width: 504px !important;
    min-height: auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: min(100%, 504px) !important;
}

.login-compact-card::before,
.login-compact-card .login-bubble,
.login-compact-card .login-hero-panel {
    display: none !important;
}

.login-compact-card .login-form-panel {
    background: #ffffff !important;
    display: block !important;
    min-height: auto !important;
    padding: 40px 38px 36px !important;
}

.login-compact-card .login-brand {
    justify-content: center !important;
    margin: 0 0 22px !important;
    text-align: center !important;
}

.login-compact-card .login-brand img {
    display: block !important;
    height: 102px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    width: 132px !important;
}

.login-compact-card .login-heading {
    margin: 0 0 34px !important;
    text-align: center !important;
}

.login-compact-card .login-heading h1 {
    color: #07172f !important;
    font-size: 29px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
}

.login-compact-card .login-heading strong {
    color: #064899 !important;
    display: block !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    margin-bottom: 10px !important;
}

.login-compact-card .login-heading p {
    color: #60708a !important;
    font-size: 16px !important;
    margin: 0 !important;
}

.login-compact-card .login-form {
    gap: 18px !important;
}

.login-compact-card .login-form .form-label {
    color: #07172f !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.login-compact-card .login-input {
    align-items: stretch !important;
    background: #eaf2ff !important;
    border: 1px solid #d2dfef !important;
    border-radius: 8px !important;
    display: flex !important;
    min-height: 62px !important;
    padding: 0 !important;
}

.login-compact-card .login-input:focus-within {
    border-color: #1b5aaa !important;
    box-shadow: 0 0 0 3px rgba(27, 90, 170, .14) !important;
}

.login-compact-card .login-input-icon {
    align-items: center;
    background: #f4f8ff;
    border-right: 1px solid #d2dfef;
    color: #68778f;
    display: inline-flex;
    flex: 0 0 60px;
    font-size: 18px;
    justify-content: center;
}

.login-compact-card .login-input input {
    background: transparent !important;
    border: 0 !important;
    color: #07172f !important;
    flex: 1 1 auto !important;
    font-size: 18px !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 16px !important;
}

.login-compact-card .login-input input::placeholder {
    color: #6b7890 !important;
}

.login-compact-card .login-password-toggle {
    color: #68778f !important;
    flex: 0 0 48px !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
}

.login-compact-card .login-row {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 2px !important;
}

.login-compact-card .login-check {
    color: #5f6f86 !important;
    font-size: 16px !important;
    gap: 10px !important;
}

.login-compact-card .login-check input {
    border-color: #9aa9bd !important;
    height: 15px !important;
    width: 15px !important;
}

.login-compact-card .login-forgot {
    color: #00459a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.login-compact-card .login-submit {
    background: #1b57a4 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    height: 60px !important;
    margin-top: 4px !important;
}

.login-compact-card .login-submit:hover,
.login-compact-card .login-submit:focus {
    background: #164b8f !important;
}

.login-compact-card .login-terms {
    border-top: 1px solid #d7e0ec !important;
    color: #5f6f86 !important;
    font-size: 15px !important;
    margin-top: 26px !important;
    padding-top: 24px !important;
    text-align: center !important;
}

@media (max-width: 575.98px) {
    .login-glass-card.login-compact-card {
        max-width: 100% !important;
    }

    .login-compact-card .login-form-panel {
        padding: 30px 22px 28px !important;
    }

    .login-compact-card .login-heading h1 {
        font-size: 25px !important;
    }

    .login-compact-card .login-input {
        min-height: 56px !important;
    }
}
.login-compact-card .login-brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

.login-compact-card .login-brand img {
    display: block !important;
    margin: 0 auto !important;
    object-position: center center !important;
}

.kontrak-bank-garansi-action {
    margin-top: 0.6rem;
}

.kontrak-bank-garansi-summary {
    line-height: 1.35;
}

.bank-garansi-current-link {
    display: inline-block;
    margin-top: 0.5rem;
}