* {
    box-sizing: border-box;
}

:root {
    --bg: #eef3f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #101828;
    --muted: #667085;
    --border: #e4e7ec;
    --primary: #155eef;
    --primary-dark: #004eeb;
    --navy: #0b1f3a;
    --navy-soft: #16375d;
    --success-bg: #dcfae6;
    --success-text: #067647;
    --danger-bg: #fee4e2;
    --danger-text: #b42318;
    --shadow: 0 14px 36px rgba(16, 24, 40, .08);
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* =========================================
   LOGIN / SETUP
========================================= */

.login-body,
.setup-body {
    min-height: 100vh;
    background:
        linear-gradient(
            135deg,
            #07162a 0%,
            #123d73 55%,
            #1b5bb5 100%
        );
}

.login-wrapper {
    width: min(1180px, calc(100% - 28px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 460px);
    align-items: center;
    gap: 54px;
    padding: 28px 0;
}

.login-brand-panel {
    color: #ffffff;
}

.brand-badge {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--primary);
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 18px 40px rgba(21, 94, 239, .35);
}

.brand-badge.small {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 13px;
    flex: 0 0 auto;
}

.login-brand-panel h1 {
    margin: 24px 0 14px;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -1.5px;
}

.login-brand-panel > p {
    max-width: 560px;
    margin: 0 0 28px;
    color: #d4deea;
    font-size: 18px;
    line-height: 1.7;
}

.login-feature {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #ecf3fb;
    font-size: 15px;
}

.login-feature span {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #8ff0b6;
    font-weight: 900;
}

.login-card,
.setup-card {
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 24px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .22);
}

.login-card {
    padding: 34px;
}

.login-heading span,
.eyebrow {
    display: inline-block;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.login-heading h2 {
    margin: 10px 0 6px;
    font-size: 30px;
}

.login-heading p {
    margin: 0 0 24px;
    color: var(--muted);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-size: 14px;
    font-weight: 700;
}

.form-group input {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    outline: none;
    background: #ffffff;
    color: var(--text);
    transition: border-color .2s, box-shadow .2s;
}

.form-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(21, 94, 239, .12);
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 92px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #eef4ff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.login-help {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.setup-container {
    width: min(660px, calc(100% - 20px));
    margin: 0 auto;
    padding: 26px 0;
}

.setup-card {
    padding: 30px;
}

.setup-card h1 {
    margin: 18px 0 20px;
}

.setup-result {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.setup-row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: #344054;
}

.setup-row:last-child {
    border-bottom: 0;
}

.credential-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

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

.credential-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .6px;
}

.credential-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 19px;
}

.credential-card small {
    color: var(--muted);
}

/* =========================================
   BUTTON & ALERT
========================================= */

.button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid var(--primary);
    border-radius: 12px;
    background: var(--primary);
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}

.button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.button:active {
    transform: translateY(1px);
}

.button-block {
    width: 100%;
}

.button-outline {
    min-height: 40px;
    background: #ffffff;
    border-color: #d0d5dd;
    color: #344054;
}

.button-outline:hover {
    background: #f8fafc;
    border-color: #98a2b3;
    color: var(--text);
}

.alert {
    margin-bottom: 18px;
    padding: 14px 15px;
    border-radius: 12px;
    line-height: 1.55;
    font-size: 14px;
}

.alert.success {
    background: var(--success-bg);
    color: var(--success-text);
}

.alert.danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}

/* =========================================
   APP LAYOUT
========================================= */

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

.sidebar {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    width: 272px;
    display: flex;
    flex-direction: column;
    background: var(--navy);
    color: #ffffff;
    box-shadow: 10px 0 30px rgba(11, 31, 58, .12);
}

.sidebar-brand {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-brand strong {
    display: block;
    font-size: 15px;
    letter-spacing: .2px;
}

.sidebar-brand span {
    display: block;
    margin-top: 4px;
    color: #a9bbcf;
    font-size: 11px;
}

.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.menu-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 0 13px;
    border-radius: 12px;
    color: #d4deea;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s, color .2s;
}

.menu-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.menu-link.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(21, 94, 239, .24);
}

.menu-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .09);
    font-size: 14px;
}

.sidebar-user {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 15px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .08);
}

.avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ffffff;
    color: var(--navy);
    font-weight: 900;
}

.sidebar-user-text {
    min-width: 0;
    flex: 1;
}

.sidebar-user-text strong,
.sidebar-user-text span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-text strong {
    font-size: 13px;
}

.sidebar-user-text span {
    margin-top: 4px;
    color: #a9bbcf;
    font-size: 11px;
}

.logout-mini {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #d4deea;
    text-decoration: none;
    background: rgba(255, 255, 255, .07);
}

.main-content {
    min-height: 100vh;
    margin-left: 272px;
}

.topbar-app {
    position: sticky;
    z-index: 500;
    top: 0;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-left h1 {
    margin: 0;
    font-size: 23px;
}

.topbar-left p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    cursor: pointer;
}

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

.role-chip {
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
}

.role-chip.admin {
    background: #e0eaff;
    color: #1849a9;
}

.role-chip.kasir {
    background: var(--success-bg);
    color: var(--success-text);
}

.content-wrapper {
    padding: 24px;
}

.welcome-card {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 26px;
    border-radius: 18px;
    background: linear-gradient(120deg, #ffffff, #edf4ff);
    border: 1px solid #dbe7ff;
    box-shadow: var(--shadow);
}

.welcome-card h2 {
    margin: 10px 0;
    font-size: 28px;
}

.welcome-card p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.welcome-role {
    min-width: 145px;
    padding: 22px 16px;
    border-radius: 16px;
    background: var(--navy);
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .7px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-card,
.panel,
.module-placeholder {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .05);
}

.stat-card {
    padding: 18px;
}

.stat-card > span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.stat-card strong {
    display: block;
    margin: 12px 0 7px;
    font-size: 28px;
}

.stat-card small {
    color: #98a2b3;
}

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

.panel {
    padding: 22px;
}

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

.panel-heading h3 {
    margin: 7px 0 0;
    font-size: 22px;
}

.status-dot {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--success-bg);
    color: var(--success-text);
    font-size: 11px;
    font-weight: 900;
}

.sales-total {
    margin-bottom: 20px;
    padding: 17px;
    border-radius: 14px;
    background: var(--surface-soft);
}

.sales-total span,
.sales-total strong {
    display: block;
}

.sales-total span {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 13px;
}

.sales-total strong {
    font-size: 27px;
}

.panel-text {
    min-height: 68px;
    color: var(--muted);
    line-height: 1.65;
}

.permission-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.permission-list div {
    display: flex;
    gap: 10px;
    color: #344054;
    font-size: 14px;
}

.permission-list span {
    color: var(--success-text);
    font-weight: 900;
}

.module-placeholder {
    max-width: 760px;
    margin: 20px auto;
    padding: 36px 24px;
    text-align: center;
}

.module-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: #e0eaff;
    color: var(--primary);
    font-size: 26px;
    font-weight: 900;
}

.module-placeholder h2 {
    margin: 10px 0;
    font-size: 28px;
}

.module-placeholder > p {
    color: var(--muted);
    line-height: 1.65;
}

.access-info {
    margin: 20px 0;
    padding: 14px;
    border-radius: 11px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

.muted {
    font-size: 14px;
}

.sidebar-overlay {
    display: none;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .login-wrapper {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 22px 0;
    }

    .login-brand-panel {
        text-align: center;
    }

    .login-brand-panel .brand-badge {
        margin: 0 auto;
    }

    .login-brand-panel > p {
        margin-left: auto;
        margin-right: auto;
    }

    .login-feature {
        justify-content: center;
        text-align: left;
    }

    .sidebar {
        transform: translateX(-105%);
        transition: transform .25s ease;
    }

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

    .sidebar-overlay {
        position: fixed;
        z-index: 900;
        inset: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(11, 31, 58, .55);
        transition: opacity .25s, visibility .25s;
    }

    .sidebar-overlay.show {
        visibility: visible;
        opacity: 1;
    }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: inline-grid;
        place-items: center;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .login-wrapper {
        width: min(100% - 18px, 1180px);
    }

    .login-brand-panel {
        padding-top: 8px;
    }

    .login-brand-panel h1 {
        margin: 18px 0 10px;
        font-size: 40px;
        line-height: 1.05;
    }

    .login-brand-panel > p {
        margin-bottom: 18px;
        font-size: 15px;
    }

    .login-feature {
        margin-top: 9px;
        font-size: 14px;
    }

    .login-card,
    .setup-card {
        padding: 22px 16px;
        border-radius: 18px;
    }

    .login-heading h2 {
        font-size: 26px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group input {
        min-height: 48px;
        font-size: 16px; /* nyaman di HP dan cegah zoom iPhone */
    }

    .password-wrapper input {
        padding-right: 88px;
    }

    .password-toggle {
        min-height: 34px;
        padding: 0 10px;
    }

    .credential-grid {
        grid-template-columns: 1fr;
    }

    .topbar-app {
        padding: 12px 14px;
    }

    .topbar-left h1 {
        font-size: 19px;
    }

    .topbar-account .button {
        display: none;
    }

    .content-wrapper {
        padding: 16px 12px 28px;
    }

    .welcome-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px 18px;
    }

    .welcome-card h2 {
        font-size: 24px;
    }

    .welcome-role {
        min-width: 0;
        width: 100%;
        padding: 14px 12px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-card,
    .panel {
        border-radius: 14px;
    }

    .panel {
        padding: 18px 16px;
    }

    .panel-heading h3 {
        font-size: 20px;
    }

    .sales-total strong {
        font-size: 24px;
    }

    .module-placeholder {
        margin: 8px auto;
        padding: 28px 16px;
    }

    .module-placeholder h2 {
        font-size: 24px;
    }
}

@media (max-width: 430px) {
    .login-wrapper {
        width: min(100% - 12px, 1180px);
    }

    .brand-badge {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        font-size: 20px;
    }

    .login-brand-panel h1 {
        font-size: 34px;
    }

    .login-brand-panel > p {
        font-size: 14px;
        line-height: 1.6;
    }

    .login-feature {
        gap: 10px;
        font-size: 13.5px;
    }

    .button,
    .button-block {
        min-height: 48px;
        font-size: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .topbar-account {
        gap: 8px;
    }

    .role-chip {
        font-size: 10px;
    }
}


/* =========================================================
   DASHBOARD PROFESIONAL + CRUD PENGGUNA
========================================================= */

.topbar-user-name {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.topbar-user-name strong {
    font-size: 13px;
}

.topbar-user-name small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
}

.dashboard-hero {
    min-height: 240px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 30px;
    overflow: hidden;
    position: relative;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 82% 15%,
            rgba(255, 255, 255, .18),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #0b1f3a,
            #154b87 58%,
            #155eef
        );
    color: #ffffff;
    box-shadow:
        0 22px 45px
        rgba(11, 31, 58, .18);
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    right: -65px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    border: 36px solid
        rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.dashboard-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.eyebrow-light {
    color: #bfd7ff;
}

.dashboard-hero h2 {
    margin: 8px 0;
    font-size: clamp(
        30px,
        4vw,
        45px
    );
    letter-spacing: -.8px;
}

.dashboard-hero p {
    max-width: 620px;
    margin: 0;
    color: #d9e8fa;
    line-height: 1.7;
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.button-light {
    background: #ffffff;
    border-color: #ffffff;
    color: #123d73;
}

.button-light:hover {
    background: #edf4ff;
    border-color: #edf4ff;
    color: #0b1f3a;
}

.button-ghost-light {
    background:
        rgba(255, 255, 255, .08);
    border-color:
        rgba(255, 255, 255, .35);
    color: #ffffff;
}

.button-ghost-light:hover {
    background:
        rgba(255, 255, 255, .17);
    border-color:
        rgba(255, 255, 255, .6);
}

.dashboard-clock-card {
    position: relative;
    z-index: 1;
    width: 210px;
    min-height: 170px;
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    border: 1px solid
        rgba(255, 255, 255, .18);
    border-radius: 20px;
    background:
        rgba(255, 255, 255, .11);
    backdrop-filter: blur(9px);
}

.dashboard-clock-card span {
    color: #cfe1f7;
    font-size: 12px;
}

.dashboard-clock-card strong {
    display: block;
    margin: 8px 0;
    font-size: 44px;
    letter-spacing: -2px;
}

.dashboard-clock-card small {
    color: #d9e8fa;
}

.metric-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow:
        0 8px 24px
        rgba(16, 24, 40, .05);
}

.metric-card > div:last-child {
    min-width: 0;
}

.metric-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #edf4ff;
    color: var(--primary);
    font-size: 16px;
    font-weight: 900;
}

.metric-card span,
.metric-card strong,
.metric-card small {
    display: block;
}

.metric-card span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-card strong {
    margin: 5px 0 3px;
    overflow: hidden;
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-card small {
    color: #98a2b3;
    font-size: 11px;
}

.metric-primary {
    border-color: #cadcff;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf4ff
        );
}

.metric-warning {
    border-color: #fedf89;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff7e8
        );
}

.metric-warning .metric-icon {
    background: #fff1cf;
    color: #b54708;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, .75fr);
    gap: 18px;
    align-items: start;
}

.dashboard-side-stack {
    display: grid;
    gap: 18px;
}

.dashboard-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow:
        0 8px 24px
        rgba(16, 24, 40, .05);
}

.dashboard-panel-header,
.management-panel-header,
.section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-panel-header {
    margin-bottom: 17px;
}

.dashboard-panel-header h3,
.section-title-row h3,
.management-panel-header h3 {
    margin: 6px 0 0;
    font-size: 21px;
}

.management-panel-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.text-link {
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

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

.count-chip {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff1cf;
    color: #b54708;
    font-size: 12px;
    font-weight: 900;
}

.stock-list {
    display: grid;
}

.stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.stock-item:last-child {
    border-bottom: 0;
}

.stock-item > div:first-child {
    min-width: 0;
}

.stock-item strong,
.stock-item span {
    display: block;
}

.stock-item strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-item span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.stock-number {
    flex: 0 0 auto;
    color: #b42318;
    font-size: 20px;
    font-weight: 900;
    text-align: right;
}

.stock-number small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.inventory-value {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f8ff
        );
}

.inventory-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.inventory-value-row span {
    color: var(--muted);
    font-size: 12px;
}

.inventory-value-row strong {
    font-size: 15px;
}

.inventory-mini-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.inventory-mini-grid > div {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
}

.inventory-mini-grid span,
.inventory-mini-grid strong {
    display: block;
}

.inventory-mini-grid span {
    color: var(--muted);
    font-size: 11px;
}

.inventory-mini-grid strong {
    margin-top: 4px;
    font-size: 20px;
}

.quick-action-section {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow:
        0 8px 24px
        rgba(16, 24, 40, .05);
}

.quick-action-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-top: 18px;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-soft);
    text-decoration: none;
    transition:
        transform .2s,
        border-color .2s,
        box-shadow .2s;
}

.quick-action-card:hover {
    transform: translateY(-2px);
    border-color: #b5cbfa;
    box-shadow:
        0 12px 22px
        rgba(21, 94, 239, .09);
}

.quick-action-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: auto;
    border-radius: 12px;
    background: #e8f0ff;
    color: var(--primary);
    font-weight: 900;
}

.quick-action-card strong {
    margin-top: 18px;
    font-size: 15px;
}

.quick-action-card small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}

.responsive-table {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .35px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border);
    color: #344054;
    font-size: 13px;
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover {
    background: #fafcff;
}

.table-subtext {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .3px;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.badge-primary {
    background: #e0eaff;
    color: #1849a9;
}

.badge-neutral {
    background: #f2f4f7;
    color: #475467;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 25px;
    color: var(--muted);
    text-align: center;
}

.empty-state.compact {
    min-height: 110px;
    padding: 18px;
}

.empty-state strong {
    color: #344054;
    font-size: 14px;
}

.empty-state span {
    margin-top: 5px;
    font-size: 12px;
}

/* PENGGUNA */

.page-toolbar,
.form-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f7ff
        );
    box-shadow:
        0 8px 24px
        rgba(16, 24, 40, .05);
}

.page-toolbar h2,
.form-page-header h2 {
    margin: 7px 0 5px;
    font-size: 27px;
}

.page-toolbar p,
.form-page-header p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.summary-card-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 18px;
}

.summary-mini-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    box-shadow:
        0 8px 22px
        rgba(16, 24, 40, .04);
}

.summary-mini-card span,
.summary-mini-card strong {
    display: block;
}

.summary-mini-card span {
    color: var(--muted);
    font-size: 12px;
}

.summary-mini-card strong {
    margin-top: 8px;
    font-size: 28px;
}

.management-panel {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow:
        0 8px 24px
        rgba(16, 24, 40, .05);
}

.management-panel-header {
    align-items: center;
    margin-bottom: 18px;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-form input {
    width: 260px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    outline: none;
}

.search-form input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .1);
}

.button-search {
    min-height: 42px;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 210px;
}

.user-avatar {
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e8f0ff;
    color: var(--primary);
    font-weight: 900;
}

.user-cell strong,
.user-cell span {
    display: block;
}

.user-cell span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.self-label {
    display: inline-flex !important;
    margin: 0 0 0 5px !important;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e0eaff;
    color: #1849a9 !important;
    font-size: 9px !important;
    vertical-align: middle;
}

.text-right {
    text-align: right !important;
}

.text-muted {
    color: var(--muted);
}

.action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.inline-form {
    display: inline;
    margin: 0;
}

.action-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.action-button.edit {
    border-color: #c7d7fe;
    background: #edf4ff;
    color: #1849a9;
}

.action-button.delete {
    border-color: #fecdca;
    background: #fff1f0;
    color: #b42318;
}

/* FORM PENGGUNA */

.form-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, .55fr);
    gap: 18px;
    align-items: start;
}

.form-card,
.form-info-card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow:
        0 8px 24px
        rgba(16, 24, 40, .05);
}

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

.form-group select {
    width: 100%;
    min-height: 50px;
    padding: 0 13px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    outline: none;
    background: #ffffff;
    color: var(--text);
}

.form-group select:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .12);
}

.form-group select:disabled {
    background: #f2f4f7;
    color: #667085;
    cursor: not-allowed;
}

.form-hint {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.label-optional {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.alert.warning {
    background: #fff7e8;
    color: #b54708;
}

.form-info-card h3 {
    margin: 7px 0 18px;
    font-size: 21px;
}

.role-information {
    display: grid;
    gap: 17px;
}

.role-information > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.role-info-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 900;
}

.role-info-icon.admin {
    background: #e0eaff;
    color: #1849a9;
}

.role-info-icon.kasir {
    background: var(--success-bg);
    color: var(--success-text);
}

.role-information strong {
    display: block;
    font-size: 13px;
}

.role-information p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.security-note {
    margin-top: 22px;
    padding: 15px;
    border-radius: 13px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

.security-note strong {
    font-size: 13px;
}

.security-note p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

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

    .quick-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .dashboard-main-grid,
    .form-layout {
        grid-template-columns: 1fr;
    }

    .summary-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .topbar-user-name {
        display: none;
    }

    .dashboard-hero {
        min-height: 0;
        flex-direction: column;
        padding: 23px 18px;
    }

    .dashboard-clock-card {
        width: 100%;
        min-height: 0;
        padding: 17px;
    }

    .dashboard-clock-card strong {
        font-size: 34px;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        padding: 17px;
    }

    .dashboard-panel,
    .quick-action-section,
    .management-panel,
    .form-card,
    .form-info-card {
        padding: 18px 14px;
        border-radius: 15px;
    }

    .quick-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .page-toolbar,
    .form-page-header {
        align-items: stretch;
        flex-direction: column;
        padding: 20px 16px;
    }

    .page-toolbar .button,
    .form-page-header .button {
        width: 100%;
    }

    .management-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .search-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .search-form input {
        width: 100%;
        flex: 1 0 100%;
        font-size: 16px;
    }

    .search-form .button {
        flex: 1;
    }

    .form-grid-two {
        grid-template-columns: 1fr;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .form-actions .button {
        width: 100%;
    }

    .responsive-table {
        overflow: visible;
    }

    .user-table,
    .user-table thead,
    .user-table tbody,
    .user-table tr,
    .user-table td {
        display: block;
        width: 100%;
    }

    .user-table thead {
        display: none;
    }

    .user-table tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #ffffff;
    }

    .user-table td {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--border);
        text-align: right;
    }

    .user-table td:last-child {
        border-bottom: 0;
    }

    .user-table td::before {
        content: attr(data-label);
        flex: 0 0 92px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .3px;
        text-align: left;
        text-transform: uppercase;
    }

    .user-table td:first-child {
        display: block;
        padding-top: 0;
        text-align: left;
    }

    .user-table td:first-child::before {
        display: none;
    }

    .user-table .action-buttons {
        width: 100%;
    }

    .user-table .action-button,
    .user-table .inline-form {
        flex: 1;
    }

    .user-table .action-button {
        width: 100%;
        min-height: 40px;
    }
}

@media (max-width: 520px) {
    .dashboard-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-hero-actions .button {
        width: 100%;
    }

    .quick-action-grid,
    .summary-card-grid {
        grid-template-columns: 1fr;
    }

    .quick-action-card {
        min-height: 130px;
    }

    .dashboard-table,
    .dashboard-table thead,
    .dashboard-table tbody,
    .dashboard-table tr,
    .dashboard-table td {
        display: block;
        width: 100%;
    }

    .dashboard-table thead {
        display: none;
    }

    .dashboard-table tr {
        margin-bottom: 11px;
        padding: 13px;
        border: 1px solid var(--border);
        border-radius: 13px;
    }

    .dashboard-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px dashed var(--border);
        text-align: right;
    }

    .dashboard-table td:last-child {
        border-bottom: 0;
    }

    .dashboard-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 10px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
    }

    .dashboard-table td:first-child {
        align-items: flex-start;
    }
}


/* =========================================================
   MASTER DATA: KATEGORI, SUPPLIER, PELANGGAN, SPAREPART
========================================================= */

.form-card-narrow {
    max-width: 720px;
}

.form-group textarea {
    width: 100%;
    min-height: 110px;
    padding: 13px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    outline: none;
    resize: vertical;
    background: #ffffff;
    color: var(--text);
    font: inherit;
    line-height: 1.55;
}

.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .12);
}

.form-span-two {
    grid-column: span 2;
}

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

.form-span-three {
    grid-column: span 3;
}

.form-section-title {
    margin-bottom: 17px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

.form-section-title:not(:first-of-type) {
    margin-top: 22px;
}

.form-section-title h3 {
    margin: 6px 0 0;
    font-size: 19px;
}

.filter-bar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(160px, 210px)
        minmax(145px, 190px)
        auto
        auto;
    gap: 9px;
    margin-bottom: 18px;
}

.filter-bar input,
.filter-bar select {
    width: 100%;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    outline: none;
    background: #ffffff;
    color: var(--text);
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .1);
}

.table-clamp {
    display: -webkit-box;
    max-width: 280px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.45;
}

.phone-link {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.phone-link:hover {
    text-decoration: underline;
}

.product-cell {
    min-width: 220px;
}

.product-cell strong,
.product-cell span,
.product-cell small {
    display: block;
}

.product-cell span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.product-cell small {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 10px;
}

.badge-warning {
    background: #fff1cf;
    color: #b54708;
}

.profit-text {
    color: var(--success-text);
    font-weight: 800;
}

.money-small {
    font-size: 21px !important;
}

.calculated-field {
    min-height: 50px;
    padding: 9px 13px;
    border: 1px solid #c7d7fe;
    border-radius: 12px;
    background: #edf4ff;
}

.calculated-field strong,
.calculated-field span {
    display: block;
}

.calculated-field strong {
    color: #1849a9;
    font-size: 16px;
}

.calculated-field span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}

@media (max-width: 1080px) {
    .form-grid-three {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .form-span-three {
        grid-column: span 2;
    }

    .filter-bar {
        grid-template-columns:
            1fr 1fr;
    }

    .filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .form-span-two,
    .form-span-three {
        grid-column: span 1;
    }

    .form-grid-three {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        grid-template-columns: 1fr;
    }

    .filter-search {
        grid-column: span 1;
    }

    .filter-bar .button {
        width: 100%;
    }

    .master-table,
    .master-table thead,
    .master-table tbody,
    .master-table tr,
    .master-table td {
        display: block;
        width: 100%;
    }

    .master-table thead {
        display: none;
    }

    .master-table tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #ffffff;
    }

    .master-table td {
        min-height: 39px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--border);
        text-align: right;
    }

    .master-table td:last-child {
        border-bottom: 0;
    }

    .master-table td::before {
        content: attr(data-label);
        flex: 0 0 100px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .3px;
        text-align: left;
        text-transform: uppercase;
    }

    .master-table td:first-child {
        display: block;
        padding-top: 0;
        text-align: left;
    }

    .master-table td:first-child::before {
        display: none;
    }

    .master-table .action-buttons {
        width: 100%;
    }

    .master-table .action-button,
    .master-table .inline-form {
        flex: 1;
    }

    .master-table .action-button {
        width: 100%;
        min-height: 40px;
    }

    .table-clamp {
        max-width: 190px;
        text-align: right;
    }

    .product-cell {
        min-width: 0;
    }
}


/* =========================================================
   GENERATE KODE SPAREPART
========================================================= */

.input-action-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.input-action-group input {
    min-width: 0;
    flex: 1;
}

.button-generate {
    min-height: 50px;
    flex: 0 0 auto;
    padding: 0 15px;
    border-color: var(--navy);
    background: var(--navy);
    white-space: nowrap;
}

.button-generate:hover {
    border-color: var(--navy-soft);
    background: var(--navy-soft);
}

.button-generate:disabled {
    opacity: .65;
    cursor: wait;
}

@media (max-width: 430px) {
    .input-action-group {
        flex-direction: column;
    }

    .button-generate {
        width: 100%;
    }
}


/* =========================================================
   GENERATE KODE - ICON ONLY
========================================================= */

.button-generate-icon {
    width: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    border-color: var(--navy);
    background: var(--navy);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.button-generate-icon:hover {
    border-color: var(--navy-soft);
    background: var(--navy-soft);
}

.button-generate-icon:disabled {
    opacity: .65;
    cursor: wait;
}

@media (max-width: 430px) {
    .button-generate-icon {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   KODE OTOMATIS & BARCODE GENERATE
========================================================= */

.input-readonly-group {
    display: flex;
    align-items: stretch;
}

.input-readonly-group input {
    min-width: 0;
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: #f2f4f7;
    color: #344054;
    font-weight: 800;
    cursor: not-allowed;
}

.readonly-icon {
    width: 50px;
    min-width: 50px;
    display: grid;
    place-items: center;
    border: 1px solid #d0d5dd;
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: #e8f0ff;
    color: var(--primary);
    font-size: 18px;
}

.button-generate-icon.is-loading {
    animation:
        generateIconSpin
        .8s linear infinite;
}

@keyframes generateIconSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 430px) {
    .input-action-group {
        flex-direction: row;
    }

    .button-generate-icon {
        width: 50px;
        min-width: 50px;
    }
}


/* =========================================================
   MASTER DATA LANGSUNG TANPA REFRESH
========================================================= */

body.modal-open {
    overflow: hidden;
}

.app-modal {
    position: fixed;
    z-index: 3000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity .18s ease,
        visibility .18s ease;
}

.app-modal.show {
    visibility: visible;
    opacity: 1;
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        rgba(11, 31, 58, .64);
    backdrop-filter: blur(3px);
}

.app-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid
        rgba(255, 255, 255, .65);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 28px 70px
        rgba(11, 31, 58, .28);
    transform: translateY(10px);
    transition: transform .18s ease;
}

.app-modal.show
.app-modal-dialog {
    transform: translateY(0);
}

.app-modal-dialog.modal-small {
    width: min(480px, 100%);
}

.app-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid
        var(--border);
}

.app-modal-header h3 {
    margin: 6px 0 0;
    font-size: 22px;
}

.modal-close {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid
        var(--border);
    border-radius: 11px;
    background: #ffffff;
    color: #475467;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    background: #f2f4f7;
    color: #101828;
}

.modal-message[hidden] {
    display: none;
}

.modal-actions {
    margin-top: 5px;
}

.modal-hint {
    margin-top: -4px;
    margin-bottom: 15px;
}

.live-toast {
    position: fixed;
    z-index: 3500;
    right: 22px;
    bottom: 22px;
    max-width: min(
        380px,
        calc(100% - 28px)
    );
    padding: 14px 17px;
    border-radius: 13px;
    background: #067647;
    color: #ffffff;
    box-shadow:
        0 16px 35px
        rgba(6, 118, 71, .25);
    font-size: 13px;
    font-weight: 800;
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity .2s,
        transform .2s,
        visibility .2s;
}

.live-toast.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.select-action-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.select-action-group select {
    min-width: 0;
    flex: 1;
}

.select-add-button {
    width: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    border-color: var(--navy);
    background: var(--navy);
    font-size: 22px;
    line-height: 1;
}

.select-add-button:hover {
    border-color: var(--navy-soft);
    background: var(--navy-soft);
}

@media (max-width: 560px) {
    .app-modal {
        align-items: end;
        padding: 0;
    }

    .app-modal-dialog,
    .app-modal-dialog.modal-small {
        width: 100%;
        max-height: 92vh;
        padding: 20px 15px;
        border-radius: 20px 20px 0 0;
    }

    .app-modal-header {
        margin-bottom: 16px;
    }

    .modal-actions {
        position: sticky;
        bottom: -20px;
        margin-left: -15px;
        margin-right: -15px;
        padding: 14px 15px 20px;
        border-top: 1px solid
            var(--border);
        background: #ffffff;
    }

    .live-toast {
        right: 14px;
        bottom: 14px;
        left: 14px;
        max-width: none;
        text-align: center;
    }
}


/* =========================================================
   PENYEMPURNAAN TAMPILAN DAFTAR SPAREPART
========================================================= */

.product-table {
    border-collapse: separate;
    border-spacing: 0;
}

.product-table thead th {
    padding-top: 16px;
    padding-bottom: 14px;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .4px;
}

.product-table tbody tr {
    transition:
        background-color .16s ease,
        box-shadow .16s ease;
}

.product-table tbody tr:hover {
    background: #f8fbff;
}

.product-table tbody td {
    padding-top: 18px;
    padding-bottom: 18px;
    vertical-align: middle;
    font-size: 14px;
    color: #101828;
}

.product-table .product-cell {
    min-width: 280px;
}

.product-table .product-cell strong {
    display: block;
    margin-bottom: 6px;
    color: #101828;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
}

.product-table .product-cell span {
    display: block;
    margin-top: 0;
    color: #344054;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.product-table .product-cell small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.product-table .badge {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.product-table .table-subtext {
    display: block;
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.product-table .price-text {
    color: #101828;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.product-table .price-sale {
    color: #0f172a;
}

.product-table .profit-text {
    color: #027a48;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
}

.table-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.table-pill-soft {
    background: #eef4ff;
    color: #1849a9;
}

.table-pill-muted {
    background: #f2f4f7;
    color: #667085;
}

.table-pill-dark {
    background: #eef2f6;
    color: #344054;
}

.product-table .action-button {
    min-width: 70px;
    min-height: 36px;
    font-size: 12px;
    font-weight: 800;
}

.product-table .text-right {
    white-space: nowrap;
}

@media (max-width: 980px) {
    .product-table .product-cell strong {
        font-size: 18px;
    }

    .product-table .price-text,
    .product-table .profit-text {
        font-size: 16px;
    }
}

@media (max-width: 760px) {
    .product-table td[data-label="Harga Beli"],
    .product-table td[data-label="Harga Jual"],
    .product-table td[data-label="Margin"] {
        align-items: flex-start;
        text-align: left;
    }

    .product-table td[data-label="Harga Beli"]::before,
    .product-table td[data-label="Harga Jual"]::before,
    .product-table td[data-label="Margin"]::before {
        margin-bottom: 5px;
    }

    .product-table .product-cell strong {
        font-size: 18px;
    }

    .product-table .product-cell span {
        font-size: 13px;
    }

    .product-table .product-cell small {
        font-size: 11px;
    }

    .product-table .price-text,
    .product-table .profit-text {
        font-size: 16px;
    }

    .product-table .table-pill,
    .product-table .badge {
        font-size: 12px;
    }
}


/* =========================================================
   TYPOGRAPHY LEBIH JELAS - GAYA MODERN SEPERTI CHATGPT
========================================================= */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #111827;
    font-weight: 700;
    letter-spacing: -0.025em;
}

strong,
b {
    font-weight: 700;
}

.topbar-left h1,
.page-toolbar h2,
.form-page-header h2,
.dashboard-hero h2,
.login-heading h2 {
    font-weight: 750;
    letter-spacing: -0.035em;
}

.sidebar-brand strong,
.brand,
.menu-link {
    letter-spacing: -0.01em;
}

.eyebrow,
.login-heading span {
    font-weight: 700;
    letter-spacing: .08em;
}

.data-table th {
    font-weight: 700;
    letter-spacing: .035em;
}

.data-table td,
.product-table tbody td,
.form-group label,
.form-hint,
.table-subtext,
.product-cell span,
.product-cell small {
    letter-spacing: -0.005em;
}

.product-table .product-cell strong {
    font-weight: 750;
    letter-spacing: -0.025em;
}

.product-table .price-text,
.product-table .profit-text,
.metric-card strong,
.summary-mini-card strong,
.stat-card strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

.button,
.action-button,
.badge,
.table-pill,
.role-chip {
    font-weight: 700;
    letter-spacing: -0.01em;
}

input,
select,
textarea {
    color: #111827;
}

input::placeholder,
textarea::placeholder {
    color: #98a2b3;
    opacity: 1;
}

@media (max-width: 760px) {
    body {
        font-size: 15px;
        line-height: 1.5;
    }

    .product-table .product-cell strong {
        font-size: 19px;
    }
}


/* =========================================================
   SINKRONISASI WARNA FONT
========================================================= */

:root {
    --text-strong: #101828;
    --text-default: #344054;
    --text-muted: #667085;
    --text-soft: #98a2b3;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #cbd5e1;
    --text-link: #155eef;
    --text-success: #067647;
    --text-danger: #b42318;
    --text-warning: #b54708;
}

/* Warna teks utama */
body {
    color: var(--text-default);
}

p,
li,
td,
label {
    color: var(--text-default);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-strong);
}

small,
.form-hint,
.table-subtext,
.text-muted,
.login-help,
.panel-text,
.page-toolbar p,
.form-page-header p,
.management-panel-header p,
.topbar-left p,
.sidebar-brand span,
.sidebar-user-text span {
    color: var(--text-muted);
}

/* Komponen gelap */
.sidebar,
.sidebar strong,
.sidebar b,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar h6 {
    color: var(--text-on-dark);
}

.sidebar .menu-link {
    color: #d4deea;
}

.sidebar .menu-link:hover,
.sidebar .menu-link.active {
    color: var(--text-on-dark);
}

.sidebar-brand span,
.sidebar-user-text span {
    color: #a9bbcf;
}

.dashboard-hero,
.dashboard-hero h1,
.dashboard-hero h2,
.dashboard-hero h3,
.dashboard-hero h4,
.dashboard-hero strong,
.dashboard-hero b {
    color: var(--text-on-dark);
}

.dashboard-hero p,
.dashboard-clock-card span,
.dashboard-clock-card small {
    color: #d9e8fa;
}

.login-brand-panel,
.login-brand-panel h1,
.login-brand-panel h2,
.login-brand-panel h3,
.login-brand-panel strong,
.login-brand-panel b {
    color: var(--text-on-dark);
}

.login-brand-panel > p,
.login-feature {
    color: #d4deea;
}

/* Tombol */
.button,
.button strong,
.button b,
.action-button,
.action-button strong,
.action-button b {
    color: #ffffff;
}

.button-outline,
.button-outline strong,
.button-outline b {
    color: var(--text-default);
}

.button-light,
.button-light strong,
.button-light b {
    color: #123d73;
}

.button-ghost-light,
.button-ghost-light strong,
.button-ghost-light b {
    color: #ffffff;
}

/* Badge dan pill */
.badge,
.table-pill,
.role-chip,
.status-dot,
.count-chip {
    color: inherit;
}

.badge-success {
    color: var(--text-success);
}

.badge-danger {
    color: var(--text-danger);
}

.badge-warning {
    color: var(--text-warning);
}

.badge-primary {
    color: #1849a9;
}

.badge-neutral {
    color: #475467;
}

.table-pill-soft {
    color: #1849a9;
}

.table-pill-muted {
    color: var(--text-muted);
}

.table-pill-dark {
    color: var(--text-default);
}

/* Tabel dan daftar sparepart */
.data-table td {
    color: var(--text-default);
}

.data-table th {
    color: #475467;
}

.product-table .product-cell strong {
    color: var(--text-strong);
}

.product-table .product-cell span {
    color: var(--text-default);
}

.product-table .product-cell small {
    color: var(--text-muted);
}

.product-table .price-text {
    color: var(--text-strong);
}

.product-table .price-sale {
    color: #0f172a;
}

.product-table .profit-text {
    color: #027a48;
}

.phone-link,
.text-link {
    color: var(--text-link);
}

/* Ringkasan dan kartu */
.metric-card strong,
.summary-mini-card strong,
.stat-card strong,
.inventory-value-row strong,
.inventory-mini-grid strong,
.sales-total strong {
    color: var(--text-strong);
}

.metric-card span,
.summary-mini-card span,
.stat-card span,
.inventory-value-row span,
.inventory-mini-grid span,
.sales-total span {
    color: var(--text-muted);
}

.metric-card small,
.summary-mini-card small,
.stat-card small {
    color: var(--text-soft);
}

/* Form */
.form-group label {
    color: var(--text-default);
}

.form-group input,
.form-group select,
.form-group textarea {
    color: var(--text-strong);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group input[readonly] {
    color: #475467;
}

.calculated-field strong {
    color: #1849a9;
}

.calculated-field span {
    color: var(--text-muted);
}

/* Alert */
.alert.success,
.alert.success strong,
.alert.success b {
    color: var(--text-success);
}

.alert.danger,
.alert.danger strong,
.alert.danger b {
    color: var(--text-danger);
}

.alert.warning,
.alert.warning strong,
.alert.warning b {
    color: var(--text-warning);
}

/* Avatar dan identitas pengguna */
.user-cell strong,
.topbar-user-name strong {
    color: var(--text-strong);
}

.user-cell span,
.topbar-user-name small {
    color: var(--text-muted);
}

.user-avatar {
    color: var(--text-link);
}

.avatar {
    color: var(--navy);
}

/* Modal */
.app-modal-header h3,
.form-section-title h3 {
    color: var(--text-strong);
}

.modal-close {
    color: #475467;
}

.modal-close:hover {
    color: var(--text-strong);
}

/* Link dan aksi */
.action-button.edit {
    color: #1849a9;
}

.action-button.delete {
    color: var(--text-danger);
}

.logout-mini {
    color: #d4deea;
}

.logout-mini:hover {
    color: #ffffff;
}

/* Pastikan inherited strong tidak menimpa warna konteks */
.badge strong,
.table-pill strong,
.role-chip strong,
.status-dot strong,
.count-chip strong,
.profit-text strong,
.price-text strong {
    color: inherit;
}

@media (max-width: 760px) {
    .master-table td::before,
    .user-table td::before,
    .dashboard-table td::before {
        color: var(--text-muted);
    }
}


/* =========================================================
   DATA SPAREPART SEMPURNA - DESKTOP & HP
========================================================= */

.sparepart-summary-cards
.summary-mini-card small {
    display: block;
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 11px;
}

.summary-mini-card.summary-warning {
    border-color: #fedf89;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff8eb
        );
}

.sparepart-list-heading {
    align-items: center;
}

.sparepart-list-heading
.result-number {
    color: var(--text-strong);
}

.active-filter-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    background: #e0eaff;
    color: #1849a9;
    font-size: 11px;
    font-weight: 800;
}

.sparepart-filter-bar {
    grid-template-columns:
        minmax(300px, 1fr)
        minmax(170px, 220px)
        minmax(150px, 190px)
        auto
        auto;
}

.sparepart-search-box {
    position: relative;
}

.sparepart-search-box input {
    padding-left: 42px;
}

.search-leading-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #667085;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

.sparepart-desktop-table {
    display: block;
}

.sparepart-mobile-list {
    display: none;
}

.sparepart-empty-state {
    min-height: 280px;
    gap: 8px;
}

.empty-state-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 17px;
    background: #edf4ff;
    color: var(--primary);
    font-size: 25px;
    font-weight: 900;
}

.mobile-add-sparepart {
    display: none;
}

/* Desktop dibuat lebih lega */
.product-table tbody td {
    padding-top: 20px;
    padding-bottom: 20px;
}

.product-table .product-cell {
    min-width: 285px;
}

.product-table .product-cell strong {
    font-size: 18px;
    line-height: 1.3;
}

.product-table .product-cell span {
    margin-top: 5px;
    font-size: 13px;
}

.product-table .product-cell small {
    margin-top: 5px;
    font-size: 11px;
}

.product-table .price-text,
.product-table .profit-text {
    font-size: 16px;
}

/* =========================================================
   TABLET & HP
========================================================= */

@media (max-width: 1180px) {
    .sparepart-add-desktop {
        display: none;
    }

    .sparepart-summary-cards {
        display: flex;
        gap: 12px;
        margin-right: -14px;
        padding-right: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .sparepart-summary-cards::-webkit-scrollbar {
        display: none;
    }

    .sparepart-summary-cards
    .summary-mini-card {
        min-width: 210px;
        flex: 0 0 70%;
        scroll-snap-align: start;
    }

    .sparepart-management-panel {
        padding: 18px 14px;
    }

    .sparepart-filter-bar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sparepart-search-box {
        grid-column: span 2;
    }

    .sparepart-filter-bar
    .button {
        width: 100%;
    }

    .sparepart-desktop-table {
        display: none;
    }

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

    .sparepart-mobile-card {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #ffffff;
        box-shadow:
            0 8px 22px
            rgba(16, 24, 40, .06);
    }

    .mobile-product-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 16px 10px;
    }

    .mobile-product-title {
        min-width: 0;
        flex: 1;
    }

    .mobile-product-code {
        display: block;
        margin-bottom: 5px;
        color: var(--primary);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.4;
    }

    .mobile-product-title h4 {
        margin: 0;
        color: var(--text-strong);
        font-size: 19px;
        font-weight: 750;
        line-height: 1.32;
        overflow-wrap: anywhere;
    }

    .mobile-stock-box {
        min-width: 69px;
        flex: 0 0 auto;
        padding: 10px 9px;
        border-radius: 14px;
        text-align: center;
    }

    .mobile-stock-box strong,
    .mobile-stock-box span {
        display: block;
        color: inherit;
    }

    .mobile-stock-box strong {
        font-size: 22px;
        font-weight: 850;
        line-height: 1;
    }

    .mobile-stock-box span {
        margin-top: 5px;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .mobile-stock-safe {
        background: #dcfae6;
        color: #067647;
    }

    .mobile-stock-low {
        background: #fff1cf;
        color: #b54708;
    }

    .mobile-stock-empty {
        background: #fee4e2;
        color: #b42318;
    }

    .mobile-stock-caption {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 16px 13px;
    }

    .mobile-stock-caption > span {
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
    }

    .mobile-stock-caption small {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
    }

    .mobile-barcode-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 16px 13px;
        padding: 10px 12px;
        border: 1px dashed #cbd5e1;
        border-radius: 11px;
        background: #f8fafc;
    }

    .mobile-barcode-row span {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-barcode-row code {
        min-width: 0;
        overflow: hidden;
        color: var(--text-strong);
        font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Consolas,
            monospace;
        font-size: 12px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-product-tags {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 0 16px 14px;
    }

    .mobile-product-tags > span {
        min-width: 0;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: #f8fafc;
    }

    .mobile-product-tags small,
    .mobile-product-tags strong {
        display: block;
    }

    .mobile-product-tags small {
        margin-bottom: 4px;
        color: var(--text-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .mobile-product-tags strong {
        overflow: hidden;
        color: var(--text-default);
        font-size: 11px;
        font-weight: 750;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-price-grid {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 9px;
        padding: 14px 16px;
        border-top: 1px solid var(--border);
        background: #fbfcfe;
    }

    .mobile-price-grid > div {
        padding: 11px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #ffffff;
    }

    .mobile-price-grid span,
    .mobile-price-grid strong {
        display: block;
    }

    .mobile-price-grid span {
        margin-bottom: 5px;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 700;
    }

    .mobile-price-grid strong {
        color: var(--text-strong);
        font-size: 15px;
        font-weight: 800;
        line-height: 1.35;
        white-space: nowrap;
    }

    .mobile-profit-box {
        grid-column: span 2;
        border-color: #abefc6 !important;
        background: #ecfdf3 !important;
    }

    .mobile-profit-box strong {
        color: #067647;
        font-size: 17px;
    }

    .mobile-card-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 9px;
        padding: 13px 16px 16px;
        border-top: 1px solid var(--border);
    }

    .mobile-card-actions form {
        margin: 0;
    }

    .mobile-action-button {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 13px;
        border: 1px solid transparent;
        border-radius: 11px;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-action-button.edit {
        border-color: #b2ccff;
        background: #edf4ff;
        color: #1849a9;
    }

    .mobile-action-button.delete {
        border-color: #fecdca;
        background: #fff1f0;
        color: #b42318;
    }

    .mobile-add-sparepart {
        position: fixed;
        z-index: 820;
        right: 16px;
        bottom: 18px;
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 19px;
        border-radius: 999px;
        background: var(--primary);
        color: #ffffff;
        box-shadow:
            0 16px 34px
            rgba(21, 94, 239, .34);
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
    }

    .mobile-add-sparepart span {
        color: inherit;
        font-size: 22px;
        font-weight: 500;
        line-height: 1;
    }

    .content-wrapper {
        padding-bottom: 92px;
    }
}

@media (max-width: 520px) {
    .sparepart-page-toolbar {
        padding: 20px 16px;
    }

    .sparepart-page-toolbar h2 {
        font-size: 25px;
    }

    .sparepart-page-toolbar p {
        font-size: 13px;
    }

    .sparepart-summary-cards
    .summary-mini-card {
        min-width: 190px;
        flex-basis: 78%;
    }

    .sparepart-management-panel {
        margin-left: -2px;
        margin-right: -2px;
        padding: 16px 10px;
        border-radius: 15px;
    }

    .sparepart-list-heading {
        align-items: flex-start;
    }

    .active-filter-badge {
        min-height: 29px;
        padding: 0 9px;
        font-size: 10px;
    }

    .sparepart-filter-bar {
        grid-template-columns: 1fr;
    }

    .sparepart-search-box {
        grid-column: span 1;
    }

    .sparepart-filter-bar input,
    .sparepart-filter-bar select {
        min-height: 48px;
        font-size: 16px;
    }

    .sparepart-filter-bar
    .button {
        min-height: 46px;
    }

    .mobile-product-header {
        padding: 16px 14px 9px;
    }

    .mobile-product-title h4 {
        font-size: 18px;
    }

    .mobile-stock-caption,
    .mobile-product-tags {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mobile-barcode-row {
        margin-left: 14px;
        margin-right: 14px;
    }

    .mobile-product-tags {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mobile-product-tags > span:last-child {
        grid-column: span 2;
    }

    .mobile-price-grid,
    .mobile-card-actions {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 370px) {
    .mobile-product-header {
        align-items: stretch;
        flex-direction: column;
    }

    .mobile-stock-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .mobile-stock-box strong,
    .mobile-stock-box span {
        display: inline;
        margin: 0;
    }

    .mobile-product-tags {
        grid-template-columns: 1fr;
    }

    .mobile-product-tags > span:last-child {
        grid-column: span 1;
    }

    .mobile-price-grid {
        grid-template-columns: 1fr;
    }

    .mobile-profit-box {
        grid-column: span 1;
    }

    .mobile-card-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   FOTO BARANG SPAREPART
========================================================= */

.product-photo-form {
    display: grid;
    grid-template-columns:
        220px
        minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #f8fafc;
}

.product-photo-preview {
    width: 220px;
    height: 170px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 15px;
    background: #ffffff;
}

.product-photo-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #ffffff;
}

.product-photo-placeholder {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-align: center;
}

.product-photo-placeholder span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #edf4ff;
    color: var(--primary);
    font-size: 25px;
}

.product-photo-placeholder strong {
    color: var(--text-muted);
    font-size: 13px;
}

.product-photo-controls {
    min-width: 0;
}

.photo-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.photo-upload-button {
    min-width: 145px;
}

.product-photo-controls p {
    margin: 12px 0 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.selected-photo-name {
    display: block;
    overflow: hidden;
    color: var(--text-default);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-photo-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    color: var(--text-danger);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.remove-photo-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--text-danger);
}

/* Foto pada tabel desktop */
.product-cell-with-photo {
    min-width: 350px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-list-photo {
    width: 76px;
    height: 66px;
    flex: 0 0 auto;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
}

.product-list-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.product-list-photo-empty {
    background: #f2f4f7;
    color: #98a2b3;
    font-size: 23px;
}

/* Foto pada kartu HP */
.mobile-product-main {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mobile-product-photo {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
    text-decoration: none;
}

.mobile-product-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.mobile-product-photo-empty {
    background: #f2f4f7;
    color: #98a2b3;
    font-size: 24px;
}

@media (max-width: 760px) {
    .product-photo-form {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 14px;
    }

    .product-photo-preview {
        width: 100%;
        height: 220px;
    }

    .photo-upload-button {
        width: 100%;
    }

    .selected-photo-name {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 430px) {
    .product-photo-preview {
        height: 190px;
    }

    .mobile-product-photo {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 370px) {
    .mobile-product-main {
        width: 100%;
    }
}


/* =========================================================
   RESPONSIVE TABLET / IPAD / ANDROID TABLET
========================================================= */

/*
|--------------------------------------------------------------------------
| AREA AMAN UNTUK PERANGKAT DENGAN NOTCH / HOME INDICATOR
|--------------------------------------------------------------------------
*/

body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.topbar-app {
    padding-top:
        max(
            12px,
            env(safe-area-inset-top)
        );
}

.content-wrapper {
    padding-bottom:
        max(
            28px,
            env(safe-area-inset-bottom)
        );
}

/*
|--------------------------------------------------------------------------
| TARGET SENTUH
|--------------------------------------------------------------------------
*/

@media (hover: none) and (pointer: coarse) {
    .button,
    .action-button,
    .mobile-action-button,
    .menu-toggle,
    .modal-close,
    .select-add-button,
    .button-generate-icon {
        min-height: 46px;
    }

    .menu-link {
        min-height: 52px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    a,
    button,
    label,
    select {
        -webkit-tap-highlight-color:
            rgba(21, 94, 239, .12);
    }
}

/*
|--------------------------------------------------------------------------
| TABLET LANDSCAPE & PORTRAIT
|--------------------------------------------------------------------------
|
| Berlaku untuk iPad, iPad Mini, iPad Air,
| Samsung Galaxy Tab, Xiaomi Pad, dan tablet Android.
|
*/

@media (min-width: 700px) and (max-width: 1180px) {

    /*
    |----------------------------------------------------------------------
    | SIDEBAR MENJADI DRAWER
    |----------------------------------------------------------------------
    */

    .sidebar {
        width: 300px;
        transform: translateX(-105%);
        transition: transform .25s ease;
    }

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

    .sidebar-overlay {
        position: fixed;
        z-index: 900;
        inset: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        background:
            rgba(11, 31, 58, .52);
        backdrop-filter: blur(2px);
        transition:
            opacity .25s,
            visibility .25s;
    }

    .sidebar-overlay.show {
        visibility: visible;
        opacity: 1;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: inline-grid;
        place-items: center;
        width: 46px;
        height: 46px;
        flex: 0 0 auto;
    }

    /*
    |----------------------------------------------------------------------
    | TOPBAR TABLET
    |----------------------------------------------------------------------
    */

    .topbar-app {
        min-height: 76px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .topbar-left h1 {
        font-size: 22px;
    }

    .topbar-left p {
        max-width: 420px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-user-name {
        display: none;
    }

    .topbar-account {
        gap: 9px;
    }

    .topbar-account .button-outline {
        min-width: 86px;
    }

    /*
    |----------------------------------------------------------------------
    | KONTEN
    |----------------------------------------------------------------------
    */

    .content-wrapper {
        padding:
            22px
            20px
            36px;
    }

    .page-toolbar,
    .form-page-header {
        align-items: center;
        padding: 24px;
    }

    .page-toolbar h2,
    .form-page-header h2 {
        font-size: 28px;
    }

    /*
    |----------------------------------------------------------------------
    | DASHBOARD TABLET
    |----------------------------------------------------------------------
    */

    .dashboard-hero {
        min-height: 220px;
        padding: 26px;
    }

    .dashboard-clock-card {
        width: 190px;
    }

    .metric-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-side-stack {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .quick-action-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    /*
    |----------------------------------------------------------------------
    | RINGKASAN MASTER DATA
    |----------------------------------------------------------------------
    */

    .summary-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .summary-mini-card {
        min-height: 120px;
    }

    /*
    |----------------------------------------------------------------------
    | FORM TABLET
    |----------------------------------------------------------------------
    */

    .form-layout {
        grid-template-columns: 1fr;
    }

    .form-grid-two {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .form-grid-three {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .form-span-three {
        grid-column: span 2;
    }

    .form-card,
    .form-info-card {
        padding: 24px;
    }

    .product-photo-form {
        grid-template-columns:
            240px
            minmax(0, 1fr);
    }

    .product-photo-preview {
        width: 240px;
        height: 190px;
    }

    /*
    |----------------------------------------------------------------------
    | MODAL TABLET
    |----------------------------------------------------------------------
    */

    .app-modal {
        align-items: center;
        padding: 24px;
    }

    .app-modal-dialog,
    .app-modal-dialog.modal-small {
        width: min(680px, 100%);
        max-height: calc(100vh - 48px);
        padding: 26px;
        border-radius: 22px;
    }

    .modal-actions {
        position: static;
        margin-left: 0;
        margin-right: 0;
        padding:
            20px
            0
            0;
        background: transparent;
    }

    /*
    |----------------------------------------------------------------------
    | HALAMAN SPAREPART TABLET
    |----------------------------------------------------------------------
    */

    .sparepart-add-desktop {
        display: inline-flex;
    }

    .mobile-add-sparepart {
        display: none;
    }

    .sparepart-summary-cards {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-right: 0;
        padding-right: 0;
        overflow: visible;
    }

    .sparepart-summary-cards
    .summary-mini-card {
        min-width: 0;
        min-height: 126px;
        flex: initial;
    }

    .sparepart-filter-bar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sparepart-filter-bar
    .button {
        width: 100%;
        min-height: 46px;
    }

    .sparepart-search-box {
        grid-column: span 2;
    }

    .sparepart-filter-bar input,
    .sparepart-filter-bar select {
        min-width: 0;
        min-height: 48px;
    }

    .sparepart-desktop-table {
        display: none;
    }

    .sparepart-mobile-list {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .sparepart-mobile-card {
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .mobile-product-header {
        align-items: flex-start;
    }

    .mobile-product-main {
        min-width: 0;
    }

    .mobile-product-photo {
        width: 84px;
        height: 84px;
    }

    .mobile-product-title h4 {
        font-size: 18px;
    }

    .mobile-product-tags {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mobile-product-tags > span:last-child {
        grid-column: span 2;
    }

    .mobile-price-grid {
        margin-top: auto;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mobile-customer-price-box {
        grid-column: span 2;
    }

    .mobile-profit-box {
        grid-column: span 1;
    }

    .mobile-card-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /*
    |----------------------------------------------------------------------
    | TABEL MASTER DATA LAIN
    |----------------------------------------------------------------------
    */

    .management-panel {
        padding: 22px;
    }

    .master-table {
        min-width: 820px;
    }

    .responsive-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .responsive-table::after {
        content: "";
        display: block;
        width: 1px;
        height: 1px;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET KECIL / PORTRAIT 700–850
|--------------------------------------------------------------------------
*/

@media (min-width: 700px) and (max-width: 850px) {

    .topbar-account .button-outline {
        display: none;
    }

    .dashboard-hero {
        flex-direction: column;
    }

    .dashboard-clock-card {
        width: 100%;
        min-height: 110px;
    }

    .dashboard-side-stack {
        grid-template-columns: 1fr;
    }

    .quick-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sparepart-mobile-list {
        grid-template-columns: 1fr;
    }

    .sparepart-filter-bar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sparepart-search-box {
        grid-column: span 2;
    }

    .product-photo-form {
        grid-template-columns: 1fr;
    }

    .product-photo-preview {
        width: 100%;
        height: 270px;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET LANDSCAPE 1024–1366
|--------------------------------------------------------------------------
|
| Saat layar besar tetapi tinggi pendek, elemen dibuat
| lebih rapat agar tidak terlalu banyak scroll.
|
*/

@media
    (min-width: 1024px)
    and (max-width: 1366px)
    and (orientation: landscape)
    and (max-height: 850px) {

    .topbar-app {
        min-height: 70px;
    }

    .content-wrapper {
        padding-top: 18px;
    }

    .page-toolbar {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .summary-mini-card {
        min-height: 108px;
    }

    .sparepart-mobile-card {
        border-radius: 16px;
    }

    .mobile-product-header {
        padding-top: 15px;
    }
}

/*
|--------------------------------------------------------------------------
| LOGIN TABLET
|--------------------------------------------------------------------------
*/

@media (min-width: 700px) and (max-width: 1180px) {
    .login-wrapper {
        width: min(
            960px,
            calc(100% - 40px)
        );
        grid-template-columns:
            minmax(0, .9fr)
            minmax(360px, 440px);
        gap: 38px;
    }

    .login-brand-panel h1 {
        font-size: clamp(
            36px,
            5vw,
            52px
        );
    }

    .login-brand-panel > p {
        font-size: 16px;
    }

    .login-card {
        padding: 32px;
    }
}

@media
    (min-width: 700px)
    and (max-width: 900px)
    and (orientation: portrait) {

    .login-wrapper {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .login-brand-panel {
        text-align: center;
    }

    .login-brand-panel .brand-badge {
        margin: 0 auto;
    }

    .login-brand-panel > p {
        margin-left: auto;
        margin-right: auto;
    }

    .login-feature {
        justify-content: center;
    }
}

/*
|--------------------------------------------------------------------------
| LAYAR BESAR DI ATAS TABLET
|--------------------------------------------------------------------------
*/

@media (min-width: 1181px) and (max-width: 1450px) {
    .content-wrapper {
        padding:
            24px
            22px
            36px;
    }

    .product-table .product-cell-with-photo {
        min-width: 320px;
    }

    .product-table th,
    .product-table td {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* =========================================================
   ICON FOTO KOSONG
========================================================= */

.empty-photo-icon {
    position: relative;
    width: 58px;
    height: 44px;
    display: block;
    border: 2px solid #bfd3f2;
    border-radius: 11px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #eef5ff
        );
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .65);
}

.empty-photo-icon::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 16px;
    border-radius: 0 0 8px 8px;
    background:
        linear-gradient(
            135deg,
            #7aa2e3 0%,
            #7aa2e3 38%,
            #a7c4f3 38%,
            #a7c4f3 58%,
            #5f89d3 58%,
            #5f89d3 100%
        );
    clip-path: polygon(
        0 100%,
        0 70%,
        24% 38%,
        45% 72%,
        63% 52%,
        83% 18%,
        100% 56%,
        100% 100%
    );
}

.empty-photo-icon::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f6b73c;
    box-shadow:
        0 0 0 3px
        rgba(246, 183, 60, .14);
}

.empty-photo-icon-small {
    width: 42px;
    height: 32px;
    border-radius: 9px;
}

.empty-photo-icon-small::before {
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 12px;
    border-radius: 0 0 6px 6px;
}

.empty-photo-icon-small::after {
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
}

.empty-photo-icon-mobile {
    width: 46px;
    height: 35px;
    border-radius: 10px;
}

.empty-photo-icon-mobile::before {
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 13px;
    border-radius: 0 0 6px 6px;
}

.empty-photo-icon-mobile::after {
    top: 6px;
    right: 7px;
    width: 7px;
    height: 7px;
}

.product-photo-placeholder .empty-photo-icon {
    margin: 0 auto;
}

.product-list-photo-empty,
.mobile-product-photo-empty {
    display: grid;
    place-items: center;
}


/* =========================================================
   PERBAIKAN PREVIEW FOTO KOSONG
========================================================= */

.product-photo-preview img[hidden],
.product-photo-placeholder[hidden] {
    display: none !important;
}

.product-photo-preview img:not([src]),
.product-photo-preview img[src=""] {
    display: none !important;
}

.product-photo-preview {
    position: relative;
}

.product-photo-placeholder {
    width: 100%;
    height: 100%;
    align-content: center;
}


/* =========================================================
   KATEGORI, SUPPLIER, PELANGGAN, PENGGUNA, LAPORAN RESPONSIF
========================================================= */

.responsive-page-toolbar {
    align-items: center;
}

.compact-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.compact-summary-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-summary-card {
    min-width: 0;
    min-height: 108px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .045);
}

.compact-summary-card span,
.compact-summary-card strong,
.compact-summary-card small {
    display: block;
}

.compact-summary-card span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.compact-summary-card strong {
    margin-top: 9px;
    color: var(--text-strong);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
}

.compact-summary-card .compact-money {
    font-size: 20px;
}

.responsive-list-panel,
.report-panel,
.report-filter-panel {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .05);
}

.responsive-list-header,
.report-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.responsive-list-header h3,
.report-panel-header h3 {
    margin: 6px 0 0;
    color: var(--text-strong);
    font-size: 22px;
}

.responsive-list-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.responsive-search-form {
    display: grid;
    grid-template-columns: minmax(260px, 360px) auto auto;
    gap: 9px;
    align-items: center;
}

.responsive-search-input {
    position: relative;
}

.responsive-search-input > span {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: #667085;
    font-size: 20px;
    pointer-events: none;
}

.responsive-search-input input {
    width: 100%;
    min-height: 44px;
    padding: 0 13px 0 41px;
    border: 1px solid #d0d5dd;
    border-radius: 11px;
    outline: none;
    color: var(--text-strong);
    background: #ffffff;
}

.responsive-search-input input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(21, 94, 239, .1);
}

.entity-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.customer-entity-grid,
.user-entity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entity-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(16, 24, 40, .045);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.entity-card:hover {
    transform: translateY(-2px);
    border-color: #bfd0f8;
    box-shadow: 0 13px 26px rgba(21, 94, 239, .08);
}

.entity-card-top,
.customer-card-header,
.user-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 17px 0;
}

.entity-card-top {
    justify-content: space-between;
}

.entity-icon {
    width: 47px;
    height: 47px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 850;
}

.entity-icon-blue {
    background: #e8f0ff;
    color: #1849a9;
}

.entity-icon-green {
    background: #dcfae6;
    color: #067647;
}

.entity-icon-purple {
    background: #f0e8ff;
    color: #6941c6;
}

.entity-count-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 800;
}

.entity-card-content {
    flex: 1;
    padding: 15px 17px 17px;
}

.entity-card-content h4,
.customer-card-header h4,
.user-card-header h4 {
    margin: 0;
    color: var(--text-strong);
    font-size: 18px;
    font-weight: 780;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.entity-card-content > p,
.customer-card-header p,
.user-card-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.entity-contact-list {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}

.entity-contact-list a,
.entity-contact-list p {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: var(--text-default);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.entity-contact-list a {
    color: var(--text-link);
    font-weight: 700;
}

.entity-contact-list span {
    min-width: 54px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.entity-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding: 13px 17px 17px;
    border-top: 1px solid var(--border);
    background: #fbfcfe;
}

.entity-card-actions form {
    margin: 0;
}

.entity-action,
.entity-action-disabled {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.entity-action.edit {
    border-color: #b2ccff;
    background: #edf4ff;
    color: #1849a9;
}

.entity-action.delete {
    border-color: #fecdca;
    background: #fff1f0;
    color: #b42318;
}

.entity-action-disabled {
    border-color: #e4e7ec;
    background: #f2f4f7;
    color: #667085;
    cursor: default;
}

.entity-empty-state {
    grid-column: 1 / -1;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 25px;
    color: var(--text-muted);
    text-align: center;
}

.entity-empty-state strong {
    color: var(--text-strong);
}

.entity-empty-state p {
    max-width: 420px;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.entity-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 17px;
    background: #edf4ff;
    color: var(--primary);
    font-size: 25px;
    font-weight: 900;
}

.customer-card-header > div,
.user-card-identity {
    min-width: 0;
    flex: 1;
}

.customer-contact-list {
    padding: 0 17px;
}

.entity-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 15px 17px;
}

.entity-stat-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.entity-stat-grid span,
.entity-stat-grid strong {
    display: block;
}

.entity-stat-grid span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
}

.entity-stat-grid strong {
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-stat-grid .stat-text-small {
    font-size: 12px;
}

.user-card-header {
    align-items: center;
}

.user-card-identity h4 small {
    display: inline-flex;
    margin-left: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e0eaff;
    color: #1849a9;
    font-size: 9px;
    vertical-align: middle;
}

.status-dot-large {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.status-dot-large.is-active {
    background: #dcfae6;
    color: #067647;
}

.status-dot-large.is-inactive {
    background: #fee4e2;
    color: #b42318;
}

.user-role-row {
    padding: 12px 17px 0;
}

.role-badge-large {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
}

.role-badge-large.admin {
    background: #e0eaff;
    color: #1849a9;
}

.role-badge-large.kasir {
    background: #dcfae6;
    color: #067647;
}

.mobile-floating-action {
    display: none;
}

/* LAPORAN */

.report-filter-panel {
    margin-bottom: 18px;
}

.report-filter-form {
    display: grid;
    grid-template-columns:
        minmax(170px, 220px)
        minmax(170px, 220px)
        auto
        auto;
    gap: 10px;
    align-items: end;
}

.report-filter-form .form-group {
    margin: 0;
}

.report-filter-form input {
    font-size: 14px;
}

.report-filter-panel > p {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.report-summary-card {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .045);
}

.report-summary-card span,
.report-summary-card strong,
.report-summary-card small {
    display: block;
}

.report-summary-card span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.report-summary-card strong {
    margin: 8px 0 5px;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 23px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-summary-card small {
    color: var(--text-soft);
    font-size: 11px;
}

.report-profit-card {
    border-color: #abefc6;
    background: linear-gradient(145deg, #ffffff, #ecfdf3);
}

.report-profit-card strong {
    color: #067647;
}

.report-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.report-breakdown-list,
.report-product-list {
    display: grid;
}

.report-breakdown-item,
.report-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.report-breakdown-item:last-child,
.report-product-item:last-child {
    border-bottom: 0;
}

.payment-method-icon,
.report-rank {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #edf4ff;
    color: #1849a9;
    font-weight: 850;
}

.report-breakdown-item > div,
.report-product-item > div {
    min-width: 0;
    flex: 1;
}

.report-breakdown-item strong,
.report-breakdown-item small,
.report-product-item strong,
.report-product-item small {
    display: block;
}

.report-breakdown-item strong,
.report-product-item strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-breakdown-item small,
.report-product-item small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
}

.report-breakdown-item b,
.report-product-item b {
    flex: 0 0 auto;
    color: var(--text-strong);
    font-size: 13px;
    white-space: nowrap;
}

.report-unpaid-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff1f0;
    color: #b42318;
    font-size: 10px;
    font-weight: 800;
}

.report-transaction-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.report-transaction-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #ffffff;
}

.report-transaction-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    background: #fbfcfe;
}

.report-transaction-head strong,
.report-transaction-head small {
    display: block;
}

.report-transaction-head strong {
    color: var(--text-strong);
    font-size: 13px;
}

.report-transaction-head small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.report-status {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.report-status.paid {
    background: #dcfae6;
    color: #067647;
}

.report-status.unpaid {
    background: #fee4e2;
    color: #b42318;
}

.report-transaction-meta {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.report-transaction-meta p {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.report-transaction-meta span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.report-transaction-meta strong {
    overflow: hidden;
    color: var(--text-default);
    font-size: 11px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-transaction-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-top: 1px solid var(--border);
    background: #edf4ff;
}

.report-transaction-total span {
    color: #475467;
    font-size: 11px;
    font-weight: 700;
}

.report-transaction-total strong {
    color: #1849a9;
    font-size: 15px;
}

.report-empty {
    min-height: 150px;
}

.report-note {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #fedf89;
    border-radius: 13px;
    background: #fff8eb;
    color: #7a2e0e;
    font-size: 12px;
    line-height: 1.6;
}

.report-note strong {
    color: #7a2e0e;
}

/* TABLET */

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

    .report-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-transaction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* HP */

@media (max-width: 760px) {
    .responsive-page-toolbar {
        align-items: stretch;
    }

    .desktop-primary-action {
        display: none;
    }

    .compact-summary-grid,
    .compact-summary-grid-four {
        display: flex;
        gap: 11px;
        margin-right: -12px;
        padding-right: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .compact-summary-grid::-webkit-scrollbar {
        display: none;
    }

    .compact-summary-card {
        min-width: 185px;
        min-height: 102px;
        flex: 0 0 74%;
        scroll-snap-align: start;
    }

    .responsive-list-panel,
    .report-panel,
    .report-filter-panel {
        padding: 17px 13px;
        border-radius: 15px;
    }

    .responsive-list-header,
    .report-panel-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .responsive-search-form {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .responsive-search-input {
        grid-column: 1 / -1;
    }

    .responsive-search-input input {
        min-height: 49px;
        font-size: 16px;
    }

    .responsive-search-form .button {
        width: 100%;
        min-height: 46px;
    }

    .entity-card-grid,
    .customer-entity-grid,
    .user-entity-grid {
        grid-template-columns: 1fr;
    }

    .entity-card:hover {
        transform: none;
    }

    .entity-card-top,
    .customer-card-header,
    .user-card-header {
        padding: 15px 14px 0;
    }

    .entity-card-content {
        padding: 14px;
    }

    .customer-contact-list {
        padding-left: 14px;
        padding-right: 14px;
    }

    .entity-stat-grid {
        padding-left: 14px;
        padding-right: 14px;
    }

    .entity-card-actions {
        padding-left: 14px;
        padding-right: 14px;
    }

    .entity-action,
    .entity-action-disabled {
        min-height: 46px;
        font-size: 13px;
    }

    .mobile-floating-action {
        position: fixed;
        z-index: 820;
        right: 15px;
        bottom: max(17px, env(safe-area-inset-bottom));
        min-height: 53px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: var(--primary);
        color: #ffffff;
        box-shadow: 0 16px 34px rgba(21, 94, 239, .34);
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-floating-action span {
        color: inherit;
        font-size: 21px;
        line-height: 1;
    }

    .content-wrapper {
        padding-bottom: 92px;
    }

    .report-filter-form {
        grid-template-columns: 1fr;
    }

    .report-filter-form input {
        min-height: 49px;
        font-size: 16px;
    }

    .report-filter-form .button {
        width: 100%;
        min-height: 46px;
    }

    .report-summary-grid {
        display: flex;
        gap: 11px;
        margin-right: -12px;
        padding-right: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .report-summary-grid::-webkit-scrollbar {
        display: none;
    }

    .report-summary-card {
        min-width: 220px;
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    .report-two-column {
        grid-template-columns: 1fr;
    }

    .report-transaction-grid {
        grid-template-columns: 1fr;
    }

    .report-breakdown-item b,
    .report-product-item b {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 390px) {
    .entity-card-actions {
        grid-template-columns: 1fr;
    }

    .entity-stat-grid {
        grid-template-columns: 1fr;
    }

    .status-dot-large {
        font-size: 8px;
    }

    .report-breakdown-item,
    .report-product-item {
        align-items: flex-start;
    }

    .report-breakdown-item b,
    .report-product-item b {
        max-width: 100px;
        font-size: 11px;
    }
}


/* =========================================================
   HARGA JUAL UMUM DAN HARGA JUAL PELANGGAN
========================================================= */

.calculated-field-customer {
    border-color: #b7e4c7;
    background: #effcf4;
}

.calculated-field-customer strong {
    color: #067647;
}

.product-table .price-customer {
    color: #6941c6;
}

.mobile-customer-price-box {
    border-color: #d6bbfb !important;
    background: #f9f5ff !important;
}

.mobile-customer-price-box strong {
    color: #6941c6 !important;
}

.mobile-profit-customer {
    border-color: #b7e4c7 !important;
    background: #f0fdf4 !important;
}

.mobile-profit-customer strong {
    color: #067647 !important;
}

@media (max-width: 920px) {
    .mobile-price-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mobile-profit-box {
        grid-column: span 1;
    }
}

@media (max-width: 390px) {
    .mobile-price-grid {
        grid-template-columns: 1fr;
    }

    .mobile-profit-box,
    .mobile-customer-price-box {
        grid-column: span 1;
    }
}


/* =========================================================
   SISTEM IKON SVG KONSISTEN — UI/UX TETAP DIPATENKAN
========================================================= */

.ui-icon {
    width: 1em;
    height: 1em;
    display: block;
    flex: 0 0 auto;
    overflow: visible;
    stroke-width: 1.85;
    color: inherit;
    shape-rendering: geometricPrecision;
}

.menu-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.menu-toggle .ui-icon,
.logout-mini .ui-icon {
    width: 20px;
    height: 20px;
}

.metric-icon .ui-icon {
    width: 23px;
    height: 23px;
}

.quick-action-icon .ui-icon {
    width: 22px;
    height: 22px;
}

.search-leading-icon .ui-icon,
.responsive-search-input .search-icon-slot .ui-icon {
    width: 18px;
    height: 18px;
}

.empty-state-icon .ui-icon,
.entity-empty-icon .ui-icon {
    width: 27px;
    height: 27px;
}

.readonly-icon .ui-icon,
.button-generate-icon .ui-icon,
.select-add-button .ui-icon {
    width: 19px;
    height: 19px;
}

.modal-close .ui-icon {
    width: 20px;
    height: 20px;
}

.payment-method-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.login-feature > span,
.setup-row > .ui-icon {
    flex: 0 0 auto;
}

.login-feature > span .ui-icon {
    width: 18px;
    height: 18px;
}

.setup-row > .ui-icon {
    width: 18px;
    height: 18px;
    color: var(--success-text);
}

.mobile-floating-action > .ui-icon,
.mobile-add-sparepart > .ui-icon {
    width: 20px;
    height: 20px;
}

.button > .ui-icon,
.entity-action > .ui-icon,
.action-button > .ui-icon {
    width: 17px;
    height: 17px;
}

.button:has(> .ui-icon),
.mobile-floating-action:has(> .ui-icon),
.mobile-add-sparepart:has(> .ui-icon) {
    gap: 8px;
}

.button-outline[href] > .ui-icon {
    margin-right: 1px;
}

/*
|--------------------------------------------------------------------------
| FOKUS KEYBOARD DAN AKSESIBILITAS
|--------------------------------------------------------------------------
|
| Tidak mengubah layout. Hanya memperjelas posisi fokus ketika
| aplikasi digunakan dengan keyboard atau perangkat bantu.
|
*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(21, 94, 239, .28);
    outline-offset: 2px;
}

.menu-link:focus-visible {
    outline-color: rgba(255, 255, 255, .45);
    outline-offset: -2px;
}

/*
|--------------------------------------------------------------------------
| KONSISTENSI RENDERING KOMPONEN
|--------------------------------------------------------------------------
*/

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: rgba(21, 94, 239, .1);
}

button:disabled,
.button:disabled,
.action-button:disabled {
    cursor: not-allowed;
}

img {
    max-width: 100%;
}

.menu-icon,
.metric-icon,
.quick-action-icon,
.readonly-icon,
.button-generate-icon,
.select-add-button,
.modal-close,
.logout-mini,
.menu-toggle,
.payment-method-icon,
.empty-state-icon,
.entity-empty-icon {
    line-height: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   PERBAIKAN RESPONSIF DAFTAR SPAREPART 921–1180 PX
========================================================= */

/*
|--------------------------------------------------------------------------
| TABLET DAN LAYAR KOMPUTER KECIL
|--------------------------------------------------------------------------
|
| Menjamin seluruh style kartu tetap aktif pada lebar yang
| sudah beralih dari tabel desktop ke daftar kartu.
|
*/

@media (min-width: 921px) and (max-width: 1180px) {
    .sparepart-management-panel {
        overflow: hidden;
    }

    .sparepart-mobile-list {
        align-items: stretch;
    }

    .sparepart-mobile-card {
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .mobile-product-header {
        min-width: 0;
    }

    .mobile-product-main {
        min-width: 0;
        flex: 1;
    }

    .mobile-product-title {
        min-width: 0;
    }

    .mobile-product-title h4 {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .mobile-stock-caption {
        min-height: 43px;
    }

    .mobile-barcode-row {
        min-width: 0;
    }

    .mobile-barcode-row code {
        max-width: 62%;
    }

    .mobile-product-tags > span {
        min-height: 63px;
    }

    .mobile-product-tags strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mobile-price-grid > div {
        min-width: 0;
    }

    .mobile-price-grid strong {
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-action-button {
        min-height: 46px;
    }

    .content-wrapper {
        padding-bottom:
            max(
                36px,
                env(safe-area-inset-bottom)
            );
    }
}

/*
|--------------------------------------------------------------------------
| TABLET KECIL
|--------------------------------------------------------------------------
*/

@media (min-width: 700px) and (max-width: 850px) {
    .sparepart-mobile-card {
        max-width: 100%;
    }

    .mobile-product-title h4 {
        -webkit-line-clamp: 2;
    }

    .mobile-price-grid strong {
        font-size: 15px;
    }
}

/*
|--------------------------------------------------------------------------
| HP
|--------------------------------------------------------------------------
|
| Harga pelanggan dibuat satu baris penuh sehingga lima
| informasi harga tetap seimbang dan mudah dibaca.
|
*/

@media (max-width: 699px) {
    .mobile-customer-price-box {
        grid-column: span 2;
    }

    .mobile-profit-box {
        grid-column: span 1;
    }
}

@media (max-width: 390px) {
    .mobile-customer-price-box,
    .mobile-profit-box {
        grid-column: span 1;
    }
}


/* =========================================================
   KASIR / PENJUALAN
========================================================= */

.cashier-page-toolbar {
    align-items: center;
}

.cashier-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cashier-today-chip,
.cashier-price-mode,
.sale-payment-method {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.cashier-price-mode.customer {
    background: #f4ebff;
    color: #6941c6;
}

.cashier-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr);
    gap: 18px;
    align-items: start;
}

.cashier-catalog-panel,
.cashier-cart-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .05);
}

.cashier-cart-panel {
    position: sticky;
    top: 94px;
}

.cashier-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
}

.cashier-section-header h3 {
    margin: 5px 0 0;
    color: var(--text-strong);
    font-size: 21px;
}

.cashier-customer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 20px;
}

.cashier-customer-row .form-group {
    margin: 0;
}

.cashier-add-customer {
    min-height: 46px;
}

.cashier-product-search {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #f8fafc;
}

.cashier-product-search > label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 750;
}

.cashier-product-search > small {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
}

.cashier-search-control {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

.cashier-search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #667085;
    line-height: 0;
    pointer-events: none;
}

.cashier-search-icon .ui-icon {
    width: 18px;
    height: 18px;
}

.cashier-search-control input {
    min-width: 0;
    min-height: 48px;
    padding-left: 43px;
    font-size: 15px;
}

.cashier-search-control .button {
    min-width: 90px;
}

.cashier-product-feedback,
.cashier-submit-feedback {
    min-height: 20px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
}

.cashier-product-feedback.error,
.cashier-submit-feedback.error {
    color: #b42318;
}

.cashier-submit-feedback.success {
    color: #067647;
}

.cashier-submit-feedback.loading {
    color: #1849a9;
}

.cashier-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 5px;
}

.cashier-product-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    transition: transform .18s ease, border-color .18s ease,
        box-shadow .18s ease;
}

.cashier-product-card:hover {
    transform: translateY(-2px);
    border-color: #b2ccff;
    box-shadow: 0 12px 24px rgba(21, 94, 239, .08);
}

.cashier-product-photo {
    height: 118px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}

.cashier-product-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.cashier-product-content {
    min-width: 0;
    flex: 1;
    padding: 13px;
}

.cashier-product-code,
.cashier-product-price,
.cashier-product-price-type {
    display: block;
}

.cashier-product-code {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-product-content h4 {
    min-height: 43px;
    margin: 7px 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 780;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cashier-product-content p {
    margin: 0 0 10px;
    color: #475467;
    font-size: 11px;
}

.cashier-product-price {
    color: #1849a9;
    font-size: 15px;
    font-weight: 820;
}

.cashier-product-price-type {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
}

.cashier-add-product {
    position: absolute;
    top: 100px;
    right: 10px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 7px 16px rgba(21, 94, 239, .27);
    font-size: 22px;
    cursor: pointer;
}

.cashier-loading-state,
.cashier-empty-product {
    grid-column: 1 / -1;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text-muted);
    text-align: center;
}

.cashier-empty-product strong {
    color: var(--text-strong);
}

.cashier-empty-product p {
    max-width: 360px;
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}

.cashier-cart-header h3 span {
    min-width: 27px;
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    padding: 0 7px;
    border-radius: 999px;
    background: #edf4ff;
    color: #1849a9;
    font-size: 11px;
    vertical-align: middle;
}

.cashier-clear-button {
    border: 0;
    background: transparent;
    color: #b42318;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.cashier-cart-list {
    max-height: min(38vh, 390px);
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-width: thin;
}

.cashier-empty-cart {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
}

.cashier-empty-cart > span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: #edf4ff;
    color: #1849a9;
    font-size: 23px;
}

.cashier-empty-cart strong {
    color: var(--text-strong);
}

.cashier-empty-cart p {
    max-width: 260px;
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
}

.cashier-cart-item {
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.cashier-cart-item:first-child {
    padding-top: 0;
}

.cashier-cart-item-head,
.cashier-cart-item-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cashier-cart-item-info {
    min-width: 0;
    flex: 1;
}

.cashier-cart-item-info span,
.cashier-cart-item-info strong,
.cashier-cart-item-info small {
    display: block;
}

.cashier-cart-item-info span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
}

.cashier-cart-item-info strong {
    margin: 4px 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-cart-item-info small {
    color: #475467;
    font-size: 9px;
}

.cashier-remove-item {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #fecdca;
    border-radius: 9px;
    background: #fff1f0;
    color: #b42318;
    font-size: 18px;
    cursor: pointer;
}

.cashier-cart-item-bottom {
    align-items: center;
    margin-top: 11px;
}

.cashier-quantity-control {
    display: grid;
    grid-template-columns: 34px 48px 34px;
    overflow: hidden;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
}

.cashier-quantity-control button,
.cashier-quantity-control input {
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: #fff;
    text-align: center;
}

.cashier-quantity-control button {
    color: #1849a9;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.cashier-quantity-control input {
    border-right: 1px solid #e4e7ec;
    border-left: 1px solid #e4e7ec;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 800;
    appearance: textfield;
}

.cashier-quantity-control input::-webkit-inner-spin-button,
.cashier-quantity-control input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.cashier-cart-item-total {
    color: var(--text-strong);
    font-size: 13px;
    white-space: nowrap;
}

.cashier-total-box {
    display: grid;
    gap: 11px;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
}

.cashier-total-box > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cashier-total-box span,
.cashier-total-box label {
    color: #475467;
    font-size: 11px;
    font-weight: 700;
}

.cashier-total-box strong {
    color: var(--text-strong);
    font-size: 13px;
}



/* =========================================================
   INPUT UANG — PREFIX RP LEBIH JELAS
========================================================= */

.cashier-money-input {
    min-width: 150px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #c7d0dd;
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .035);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.cashier-money-input:focus-within {
    border-color: #528bff;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .10);
}

.cashier-money-input span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-right: 1px solid #e4e7ec;
    background: #f8fafc;
    color: #344054;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .01em;
    user-select: none;
    pointer-events: none;
}

.cashier-money-input input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: #101828;
    background: transparent;
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    caret-color: #155eef;
}

.cashier-money-input input::placeholder {
    color: #98a2b3;
    opacity: 1;
}


@media screen and (max-width: 699px) {
    .cashier-money-input {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .cashier-money-input span {
        font-size: 12px;
    }

    .cashier-money-input input {
        height: 42px;
        padding: 0 12px;
        font-size: 14px;
    }

    .cashier-paid-input input {
        height: 44px;
        font-size: 15px;
    }
}


.cashier-grand-total {
    margin: 2px -15px -15px;
    padding: 14px 15px;
    border-radius: 0 0 14px 14px;
    background: #edf4ff;
}

.cashier-grand-total span,
.cashier-grand-total strong {
    color: #1849a9;
    font-weight: 800;
}

.cashier-grand-total strong {
    font-size: 20px;
}

.cashier-payment-form {
    display: grid;
    gap: 13px;
    margin-top: 16px;
}

.cashier-payment-form .form-group {
    margin: 0;
}

.cashier-paid-input {
    width: 100%;
    min-height: 46px;
}

.cashier-paid-input input {
    height: 44px;
    font-size: 15px;
}

.cashier-change-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid #abefc6;
    border-radius: 12px;
    background: #ecfdf3;
}

.cashier-change-box span,
.cashier-change-box strong {
    color: #067647;
}

.cashier-change-box span {
    font-size: 11px;
    font-weight: 750;
}

.cashier-change-box strong {
    font-size: 16px;
}

.cashier-submit-button {
    width: 100%;
    min-height: 51px;
    font-size: 14px;
}

.cashier-submit-button:disabled {
    opacity: .55;
}

/* RIWAYAT */

.sales-filter-header {
    margin-bottom: 14px;
}

.sales-filter-header h3 {
    margin: 5px 0 0;
    color: var(--text-strong);
    font-size: 22px;
}

.sales-filter-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.sales-history-filter {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(150px, 180px)
        minmax(145px, 165px)
        minmax(145px, 165px)
        auto auto;
    gap: 9px;
    align-items: center;
    margin-bottom: 18px;
}

.sales-history-filter input,
.sales-history-filter select,
.sales-history-filter .button {
    min-width: 0;
    min-height: 44px;
}

.sales-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.sales-history-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
}

.sales-history-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    background: #fbfcfe;
}

.sales-history-card-head strong,
.sales-history-card-head small {
    display: block;
}

.sales-history-card-head strong {
    color: var(--text-strong);
    font-size: 13px;
}

.sales-history-card-head small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.sales-history-customer {
    padding: 14px 14px 7px;
}

.sales-history-customer span,
.sales-history-customer strong {
    display: block;
}

.sales-history-customer span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.sales-history-customer strong {
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-history-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 8px 14px 14px;
}

.sales-history-meta > div {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fafc;
}

.sales-history-meta span,
.sales-history-meta strong {
    display: block;
}

.sales-history-meta span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 750;
}

.sales-history-meta strong {
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-history-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 13px 14px;
    border-top: 1px solid var(--border);
    background: #edf4ff;
}

.sales-history-total span {
    color: #475467;
    font-size: 10px;
    font-weight: 750;
}

.sales-history-total strong {
    color: #1849a9;
    font-size: 15px;
}

.sales-history-open {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #b2ccff;
    color: #1849a9;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

/* DETAIL DAN NOTA */

.detail-sale-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.sale-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 420px);
    gap: 18px;
    align-items: start;
}

.sale-detail-summary,
.receipt-paper {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .05);
}

.sale-detail-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
}

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

.sale-detail-info-grid > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.sale-detail-info-grid span,
.sale-detail-info-grid strong {
    display: block;
}

.sale-detail-info-grid span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
}

.sale-detail-info-grid strong {
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale-detail-note {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fff8eb;
}

.sale-detail-note span,
.sale-detail-note p {
    color: #7a2e0e;
}

.sale-detail-note span {
    font-size: 10px;
    font-weight: 800;
}

.sale-detail-note p {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.6;
}

.receipt-paper {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    color: #101828;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", monospace;
}

.receipt-header,
.receipt-footer {
    text-align: center;
}

.receipt-header > strong {
    display: block;
    font-size: 18px;
}

.receipt-header p,
.receipt-footer p {
    margin: 4px 0 0;
    font-size: 10px;
    line-height: 1.45;
}

.receipt-divider {
    margin: 13px 0;
    border-top: 1px dashed #98a2b3;
}

.receipt-meta,
.receipt-totals {
    display: grid;
    gap: 6px;
}

.receipt-meta p,
.receipt-totals p {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-size: 10px;
}

.receipt-meta span,
.receipt-totals span {
    color: #475467;
}

.receipt-meta strong,
.receipt-totals strong {
    max-width: 68%;
    text-align: right;
    overflow-wrap: anywhere;
}

.receipt-item-list {
    display: grid;
    gap: 12px;
}

.receipt-item-name strong,
.receipt-item-name small {
    display: block;
}

.receipt-item-name strong {
    font-size: 11px;
    line-height: 1.45;
}

.receipt-item-name small {
    margin-top: 2px;
    color: #667085;
    font-size: 8px;
}

.receipt-item-calc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
    font-size: 9px;
}

.receipt-total-main {
    padding: 8px 0;
    border-top: 1px solid #d0d5dd;
    border-bottom: 1px solid #d0d5dd;
    font-size: 13px !important;
}

.receipt-note strong,
.receipt-note p {
    font-size: 9px;
}

.receipt-note p {
    margin: 4px 0 0;
    line-height: 1.5;
}

.receipt-footer strong {
    font-size: 12px;
}

/* RESPONSIVE */

@media (max-width: 1180px) {
    .cashier-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    }

    .cashier-product-grid,
    .sales-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-history-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-search-field {
        grid-column: span 2;
    }
}

@media (max-width: 920px) {
    .cashier-layout,
    .sale-detail-layout {
        grid-template-columns: 1fr;
    }

    .cashier-cart-panel {
        position: static;
    }

    .cashier-cart-list {
        max-height: none;
    }

    .cashier-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .receipt-paper {
        max-width: 520px;
    }
}

@media (max-width: 760px) {
    .cashier-page-toolbar {
        align-items: stretch;
    }

    .cashier-toolbar-actions,
    .detail-sale-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cashier-toolbar-actions .button,
    .detail-sale-actions .button {
        width: 100%;
    }

    .cashier-today-chip {
        justify-content: center;
    }

    .cashier-catalog-panel,
    .cashier-cart-panel,
    .sale-detail-summary,
    .receipt-paper {
        padding: 17px 13px;
        border-radius: 15px;
    }

    .cashier-customer-row,
    .cashier-search-control {
        grid-template-columns: 1fr;
    }

    .cashier-add-customer,
    .cashier-search-control .button {
        width: 100%;
    }

    .cashier-search-control input,
    .sales-history-filter input,
    .sales-history-filter select {
        min-height: 48px;
        font-size: 16px;
    }

    .cashier-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cashier-product-photo {
        height: 105px;
    }

    .cashier-product-card:hover {
        transform: none;
    }

    .cashier-add-product {
        top: 87px;
    }

    .sales-history-filter,
    .sales-history-grid {
        grid-template-columns: 1fr;
    }

    .sales-search-field {
        grid-column: span 1;
    }

    .sales-history-filter .button {
        width: 100%;
        min-height: 46px;
    }
}

@media (max-width: 430px) {
    .cashier-product-grid {
        grid-template-columns: 1fr;
    }

    .cashier-product-card {
        min-height: 124px;
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .cashier-product-photo {
        height: 100%;
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .cashier-product-content h4 {
        min-height: 0;
    }

    .cashier-add-product {
        top: auto;
        right: 9px;
        bottom: 9px;
    }

    .cashier-discount-row {
        align-items: stretch !important;
        flex-direction: column;
    }

    .cashier-money-input {
        width: 100%;
        min-width: 0;
    }

    .sale-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .sales-history-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-history-meta > div:last-child {
        grid-column: span 2;
    }
}

/* CETAK NOTA THERMAL 80 MM */

@media print {
    @page {
        size: 80mm auto;
        margin: 4mm;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .sidebar,
    .topbar-app,
    .sidebar-overlay,
    .no-print,
    .flash-message,
    .live-toast {
        display: none !important;
    }

    .app-layout,
    .main-content,
    .content-wrapper,
    .sale-detail-layout {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .receipt-paper {
        width: 72mm !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   PENYEMPURNAAN UX KASIR — PC, TABLET, IPAD, HP
========================================================= */

.cashier-toolbar-copy {
    min-width: 0;
}

.cashier-today-summary {
    min-width: 148px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #f8fafc;
}

.cashier-today-summary span,
.cashier-today-summary strong,
.cashier-today-summary small {
    display: block;
}

.cashier-today-summary span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cashier-today-summary strong {
    margin-top: 3px;
    color: var(--text-strong);
    font-size: 12px;
}

.cashier-today-summary small {
    margin-top: 3px;
    color: #1849a9;
    font-size: 11px;
    font-weight: 800;
}

.cashier-history-button {
    min-height: 46px;
}

.cashier-history-button .ui-icon {
    width: 17px;
    height: 17px;
}

.cashier-buyer-header {
    align-items: flex-start;
}

.cashier-buyer-header p {
    max-width: 520px;
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
}

.cashier-customer-field {
    min-width: 0;
}

.cashier-select-shell {
    position: relative;
}

.cashier-field-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: #667085;
    line-height: 0;
    pointer-events: none;
}

.cashier-field-icon .ui-icon {
    width: 18px;
    height: 18px;
}

.cashier-select-shell select {
    width: 100%;
    padding-left: 42px;
}

.cashier-add-customer {
    gap: 8px;
    white-space: nowrap;
}

.cashier-add-customer .ui-icon {
    width: 17px;
    height: 17px;
}

.cashier-search-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.cashier-search-heading label {
    display: block;
    margin-top: 4px;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 780;
}

.cashier-scan-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 0 9px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.cashier-scan-hint .ui-icon {
    width: 15px;
    height: 15px;
}

.cashier-search-help {
    line-height: 1.55;
}

.cashier-cart-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cashier-cart-title-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #edf4ff;
    color: #1849a9;
    line-height: 0;
}

.cashier-cart-title-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.cashier-payment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 2px;
}

.cashier-payment-heading h4 {
    margin: 4px 0 0;
    color: var(--text-strong);
    font-size: 15px;
}

.cashier-payment-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ecfdf3;
    color: #067647;
    line-height: 0;
}

.cashier-payment-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.cashier-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cashier-submit-button .ui-icon {
    width: 18px;
    height: 18px;
}

.cashier-empty-cart-symbol svg {
    width: 25px;
    height: 25px;
    display: block;
    stroke-width: 1.8;
}

/*
|--------------------------------------------------------------------------
| PC BESAR
|--------------------------------------------------------------------------
*/

@media (min-width: 1440px) {
    .cashier-layout {
        grid-template-columns:
            minmax(0, 1.7fr)
            minmax(380px, .7fr);
    }

    .cashier-product-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .cashier-product-photo {
        height: 126px;
    }
}

/*
|--------------------------------------------------------------------------
| PC / LAPTOP
|--------------------------------------------------------------------------
*/

@media (min-width: 1181px) and (max-width: 1439px) {
    .cashier-layout {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(350px, .8fr);
    }

    .cashier-product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/*
|--------------------------------------------------------------------------
| TABLET LANDSCAPE / IPAD PRO
|--------------------------------------------------------------------------
*/

@media (min-width: 921px) and (max-width: 1180px) {
    .cashier-layout {
        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(330px, .82fr);
        gap: 15px;
    }

    .cashier-catalog-panel,
    .cashier-cart-panel {
        padding: 18px;
    }

    .cashier-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cashier-product-card {
        min-height: 250px;
    }

    .cashier-product-photo {
        height: 118px;
    }

    .cashier-cart-panel {
        top: 88px;
    }

    .cashier-toolbar-actions {
        flex-wrap: wrap;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET PORTRAIT / IPAD MINI / ANDROID TABLET
|--------------------------------------------------------------------------
*/

@media (min-width: 700px) and (max-width: 920px) {
    .cashier-layout {
        grid-template-columns: 1fr;
    }

    .cashier-cart-panel {
        position: static;
    }

    .cashier-product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .cashier-product-photo {
        height: 108px;
    }

    .cashier-cart-list {
        max-height: 420px;
    }

    .cashier-payment-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .cashier-payment-heading,
    .cashier-change-box,
    .cashier-submit-feedback,
    .cashier-submit-button,
    .cashier-payment-form > .form-group:last-of-type {
        grid-column: span 2;
    }

    .cashier-payment-form .cashier-submit-button {
        min-height: 54px;
    }
}

/*
|--------------------------------------------------------------------------
| HP BESAR
|--------------------------------------------------------------------------
*/

@media (min-width: 431px) and (max-width: 699px) {
    .cashier-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cashier-product-card {
        min-height: 232px;
    }
}

/*
|--------------------------------------------------------------------------
| HP
|--------------------------------------------------------------------------
*/

@media (max-width: 699px) {
    .cashier-page-toolbar {
        gap: 16px;
    }

    .cashier-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cashier-today-summary {
        width: 100%;
        min-width: 0;
    }

    .cashier-history-button {
        width: 100%;
    }

    .cashier-buyer-header,
    .cashier-search-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .cashier-price-mode,
    .cashier-scan-hint {
        align-self: flex-start;
    }

    .cashier-customer-row {
        grid-template-columns: 1fr;
    }

    .cashier-add-customer {
        width: 100%;
    }

    .cashier-search-control {
        grid-template-columns: 1fr;
    }

    .cashier-search-control .button {
        width: 100%;
        min-height: 48px;
    }

    .cashier-cart-title-icon {
        width: 39px;
        height: 39px;
    }

    .cashier-cart-header {
        align-items: center;
    }

    .cashier-total-box {
        margin-top: 13px;
    }

    .cashier-payment-form {
        grid-template-columns: 1fr;
    }

    .cashier-payment-heading {
        grid-column: span 1;
    }
}

/*
|--------------------------------------------------------------------------
| HP KECIL
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {
    .cashier-product-card {
        min-height: 128px;
    }

    .cashier-product-content {
        padding: 12px 48px 12px 12px;
    }

    .cashier-product-price {
        font-size: 14px;
    }

    .cashier-cart-item-head {
        gap: 8px;
    }

    .cashier-cart-item-bottom {
        align-items: flex-end;
        flex-direction: column;
    }

    .cashier-quantity-control {
        align-self: flex-start;
    }

    .cashier-cart-item-total {
        align-self: flex-end;
        font-size: 14px;
    }

    .cashier-total-box > div {
        align-items: stretch;
    }

    .cashier-total-box > div:not(.cashier-grand-total) {
        flex-direction: column;
    }

    .cashier-money-input {
        width: 100%;
    }

    .cashier-grand-total {
        align-items: center !important;
        flex-direction: row !important;
    }
}


/* =========================================================
   RETUR, PEMBATALAN, DAN HAPUS NOTA
========================================================= */

.detail-sale-actions .button {
    gap: 7px;
}

.detail-sale-actions .ui-icon {
    width: 17px;
    height: 17px;
}

.button-return {
    border-color: #a6f4c5;
    background: #ecfdf3;
    color: #067647;
}

.button-return:hover {
    border-color: #75e0a7;
    background: #dcfae6;
    color: #05603a;
}

.button-cancel-sale {
    border-color: #fedf89;
    background: #fffaeb;
    color: #b54708;
}

.button-cancel-sale:hover {
    border-color: #fec84b;
    background: #fef0c7;
    color: #93370d;
}

.button-delete-sale {
    border-color: #fecdca;
    background: #fff1f0;
    color: #b42318;
}

.button-delete-sale:hover {
    border-color: #fda29b;
    background: #fee4e2;
    color: #912018;
}

.transaction-state-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #ffffff;
}

.transaction-state-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    line-height: 0;
}

.transaction-state-icon .ui-icon {
    width: 22px;
    height: 22px;
}

.transaction-state-banner > div {
    min-width: 0;
}

.transaction-state-banner > div > span,
.transaction-state-banner > div > strong {
    display: block;
}

.transaction-state-banner > div > span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.transaction-state-banner > div > strong {
    margin-top: 3px;
    color: var(--text-strong);
    font-size: 15px;
}

.transaction-state-banner p {
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.55;
}

.transaction-state-banner.active {
    border-color: #abefc6;
    background: #f6fef9;
    color: #067647;
}

.transaction-state-banner.active
.transaction-state-icon {
    background: #dcfae6;
}

.transaction-state-banner.partially-returned {
    border-color: #b2ccff;
    background: #f5f8ff;
    color: #1849a9;
}

.transaction-state-banner.partially-returned
.transaction-state-icon {
    background: #e0eaff;
}

.transaction-state-banner.fully-returned {
    border-color: #d6bbfb;
    background: #f9f5ff;
    color: #6941c6;
}

.transaction-state-banner.fully-returned
.transaction-state-icon {
    background: #f0e8ff;
}

.transaction-state-banner.cancelled {
    border-color: #fda29b;
    background: #fff5f4;
    color: #b42318;
}

.transaction-state-banner.cancelled
.transaction-state-icon {
    background: #fee4e2;
}

.sale-detail-main-column {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.sale-status-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.sale-transaction-status {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .02em;
    white-space: nowrap;
}

.sale-transaction-status.active {
    background: #dcfae6;
    color: #067647;
}

.sale-transaction-status.partially-returned {
    background: #e0eaff;
    color: #1849a9;
}

.sale-transaction-status.fully-returned {
    background: #f0e8ff;
    color: #6941c6;
}

.sale-transaction-status.cancelled {
    background: #fee4e2;
    color: #b42318;
}

.sale-refund-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.sale-refund-summary > div,
.sale-quantity-summary > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.sale-refund-summary span,
.sale-refund-summary strong,
.sale-quantity-summary span,
.sale-quantity-summary strong {
    display: block;
}

.sale-refund-summary span,
.sale-quantity-summary span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
}

.sale-refund-summary strong {
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale-refund-summary .return-value {
    color: #b54708;
}

.sale-refund-summary .net-sale-value {
    border-color: #abefc6;
    background: #ecfdf3;
}

.sale-refund-summary .net-sale-value strong {
    color: #067647;
}

.sale-quantity-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.sale-quantity-summary strong {
    margin-top: 5px;
    color: var(--text-strong);
    font-size: 17px;
}

.sale-cancellation-note {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #fda29b;
    border-radius: 12px;
    background: #fff5f4;
}

.sale-cancellation-note span,
.sale-cancellation-note strong {
    display: block;
}

.sale-cancellation-note span {
    color: #b42318;
    font-size: 9px;
    font-weight: 750;
}

.sale-cancellation-note strong {
    margin-top: 4px;
    color: #7a271a;
    font-size: 12px;
}

.sale-cancellation-note p {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: #7a271a;
    font-size: 11px;
    line-height: 1.55;
}

.sale-items-panel,
.sale-return-history {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 8px 24px
        rgba(16, 24, 40, .05);
}

.sale-items-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.sale-items-panel-header h3 {
    margin: 5px 0 0;
    color: var(--text-strong);
    font-size: 19px;
}

.sale-items-panel-header > span {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

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

.sale-item-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
}

.sale-item-card.fully-returned {
    border-color: #d6bbfb;
    background: #fcfaff;
}

.sale-item-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 13px;
    border-bottom: 1px solid var(--border);
    background: #fbfcfe;
}

.sale-item-card-head > div {
    min-width: 0;
}

.sale-item-card-head span,
.sale-item-card-head h4 {
    display: block;
}

.sale-item-card-head > div > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
}

.sale-item-card-head h4 {
    margin: 5px 0 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-return-badge {
    flex: 0 0 auto;
    min-height: 26px;
    display: inline-flex !important;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #f0e8ff;
    color: #6941c6 !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    white-space: nowrap;
}

.sale-item-card-stats {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 12px;
}

.sale-item-card-stats > div {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f8fafc;
}

.sale-item-card-stats span,
.sale-item-card-stats strong {
    display: block;
}

.sale-item-card-stats span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 750;
}

.sale-item-card-stats strong {
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale-item-card-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-top: 1px solid var(--border);
    background: #edf4ff;
}

.sale-item-card-total span {
    color: #475467;
    font-size: 9px;
    font-weight: 750;
}

.sale-item-card-total strong {
    color: #1849a9;
    font-size: 13px;
}

.sale-return-empty {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
}

.sale-return-empty > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #f2f4f7;
    color: #667085;
    line-height: 0;
}

.sale-return-empty .ui-icon {
    width: 21px;
    height: 21px;
}

.sale-return-empty strong {
    color: var(--text-strong);
}

.sale-return-empty p {
    margin: 0;
    font-size: 10px;
}

.sale-return-history-list {
    display: grid;
    gap: 9px;
}

.sale-return-history-item {
    min-width: 0;
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fbfcfe;
}

.sale-return-history-item.pembatalan {
    border-color: #fda29b;
    background: #fff5f4;
}

.sale-return-history-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e0eaff;
    color: #1849a9;
    line-height: 0;
}

.sale-return-history-item.pembatalan
.sale-return-history-icon {
    background: #fee4e2;
    color: #b42318;
}

.sale-return-history-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.sale-return-history-content {
    min-width: 0;
}

.sale-return-history-content > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.sale-return-history-content strong {
    color: var(--text-strong);
    font-size: 11px;
}

.sale-return-history-content > div > span {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #edf4ff;
    color: #1849a9;
    font-size: 7px;
    font-weight: 850;
}

.sale-return-history-item.pembatalan
.sale-return-history-content > div > span {
    background: #fee4e2;
    color: #b42318;
}

.sale-return-history-content p {
    margin: 5px 0;
    color: #475467;
    font-size: 10px;
    line-height: 1.5;
}

.sale-return-history-content small {
    color: var(--text-muted);
    font-size: 8px;
}

.sale-return-history-value {
    color: #b54708;
    font-size: 12px;
    white-space: nowrap;
}

.receipt-status-stamp {
    margin-top: 11px;
    padding: 7px;
    border: 2px solid currentColor;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
}

.receipt-status-stamp.partially-returned {
    color: #1849a9;
}

.receipt-status-stamp.fully-returned {
    color: #6941c6;
}

.receipt-status-stamp.cancelled {
    color: #b42318;
}

.receipt-item-return {
    margin-top: 4px;
    padding: 3px 5px;
    border-radius: 4px;
    background: #f4ebff;
    color: #6941c6;
    font-size: 8px;
    font-weight: 700;
}

.receipt-return-value strong {
    color: #b42318;
}

/* MODAL AKSI PENJUALAN */

.sale-action-dialog {
    width: min(760px, 100%);
}

.return-form-note,
.danger-action-warning {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 15px;
    padding: 13px;
    border: 1px solid #b2ccff;
    border-radius: 12px;
    background: #f5f8ff;
}

.return-form-note > span,
.danger-action-warning > span {
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e0eaff;
    color: #1849a9;
    line-height: 0;
}

.return-form-note .ui-icon,
.danger-action-warning .ui-icon {
    width: 18px;
    height: 18px;
}

.return-form-note p,
.danger-action-warning p {
    margin: 0;
    color: #344054;
    font-size: 10px;
    line-height: 1.6;
}

.danger-action-warning {
    border-color: #fedf89;
    background: #fffaeb;
}

.danger-action-warning > span {
    background: #fef0c7;
    color: #b54708;
}

.danger-action-warning strong {
    display: block;
    color: #7a2e0e;
    font-size: 11px;
}

.danger-action-warning p {
    margin-top: 4px;
    color: #7a2e0e;
}

.danger-action-warning.delete-warning {
    border-color: #fda29b;
    background: #fff5f4;
}

.danger-action-warning.delete-warning > span {
    background: #fee4e2;
    color: #b42318;
}

.danger-action-warning.delete-warning strong,
.danger-action-warning.delete-warning p {
    color: #7a271a;
}

.return-item-form-list {
    max-height: min(42vh, 390px);
    display: grid;
    gap: 9px;
    margin-bottom: 15px;
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-width: thin;
}

.return-item-form-row {
    min-width: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        105px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fbfcfe;
}

.return-item-form-row > div:first-child {
    min-width: 0;
}

.return-item-form-row span,
.return-item-form-row strong,
.return-item-form-row small {
    display: block;
}

.return-item-form-row span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 750;
}

.return-item-form-row strong {
    margin: 4px 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.return-item-form-row small {
    color: #475467;
    font-size: 9px;
}

.return-qty-field label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 750;
}

.return-qty-field input {
    width: 100%;
    min-height: 43px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
}

/* RIWAYAT PENJUALAN */

.return-summary-value {
    color: #b54708 !important;
}

.sales-history-filter-return {
    grid-template-columns:
        minmax(230px, 1fr)
        minmax(145px, 180px)
        minmax(155px, 190px)
        minmax(140px, 165px)
        minmax(140px, 165px)
        auto
        auto;
}

.sales-card-status-stack,
.report-card-status-stack {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
}

.sales-history-card.cancelled {
    border-color: #fda29b;
}

.sales-history-card.fully-returned {
    border-color: #d6bbfb;
}

.sales-history-card.partially-returned {
    border-color: #b2ccff;
}

.sales-history-return-row,
.report-transaction-return {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #fedf89;
    background: #fffaeb;
}

.sales-history-return-row span,
.report-transaction-return span {
    color: #b54708;
    font-size: 9px;
    font-weight: 750;
}

.sales-history-return-row strong,
.report-transaction-return strong {
    color: #b54708;
    font-size: 11px;
}

/* =========================================================
   RESPONSIVE RETUR DAN PEMBATALAN
========================================================= */

@media (max-width: 1180px) {
    .sales-history-filter-return {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .sales-history-filter-return
    .sales-search-field {
        grid-column: span 3;
    }
}

@media (max-width: 920px) {
    .sale-items-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sale-refund-summary,
    .sale-quantity-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .sales-history-filter-return {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sales-history-filter-return
    .sales-search-field {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .detail-sale-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .detail-sale-actions .button {
        width: 100%;
        min-height: 46px;
    }

    .transaction-state-banner {
        align-items: flex-start;
        padding: 14px;
    }

    .sale-items-panel,
    .sale-return-history {
        padding: 16px 13px;
        border-radius: 15px;
    }

    .sale-items-grid {
        grid-template-columns: 1fr;
    }

    .sale-refund-summary {
        display: flex;
        gap: 9px;
        margin-right: -13px;
        padding-right: 13px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .sale-refund-summary::-webkit-scrollbar {
        display: none;
    }

    .sale-refund-summary > div {
        min-width: 165px;
        flex: 0 0 70%;
        scroll-snap-align: start;
    }

    .sale-quantity-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .sale-return-history-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);
    }

    .sale-return-history-icon {
        width: 38px;
        height: 38px;
    }

    .sale-return-history-value {
        grid-column: 2;
        justify-self: start;
    }

    .sale-action-dialog {
        width: 100%;
    }

    .return-item-form-list {
        max-height: 45vh;
    }

    .sales-history-filter-return {
        grid-template-columns: 1fr;
    }

    .sales-history-filter-return
    .sales-search-field {
        grid-column: span 1;
    }
}

@media (max-width: 460px) {
    .detail-sale-actions {
        grid-template-columns: 1fr;
    }

    .sale-quantity-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .sale-quantity-summary > div {
        padding: 10px 7px;
        text-align: center;
    }

    .sale-quantity-summary span {
        font-size: 8px;
    }

    .sale-quantity-summary strong {
        font-size: 15px;
    }

    .sale-cancellation-note {
        grid-template-columns: 1fr;
    }

    .sale-cancellation-note p {
        grid-column: span 1;
    }

    .sale-item-card-stats {
        grid-template-columns: 1fr;
    }

    .return-item-form-row {
        grid-template-columns: 1fr;
    }

    .return-qty-field {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            90px;
        align-items: center;
        gap: 10px;
    }

    .return-qty-field label {
        margin: 0;
    }
}

@media print {
    .transaction-state-banner,
    .sale-items-panel,
    .sale-return-history,
    .sale-action-modal {
        display: none !important;
    }

    .receipt-status-stamp {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}


/* =========================================================
   DASHBOARD MODE PC — TEKS LEBIH BESAR DAN MUDAH DIGUNAKAN
========================================================= */

.dashboard-page {
    min-width: 0;
}

.dashboard-recent-header .text-link {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #b2ccff;
    border-radius: 10px;
    background: #f5f8ff;
    text-decoration: none;
}

.dashboard-recent-header .text-link:hover {
    background: #eaf1ff;
    text-decoration: none;
}

.dashboard-recent-header .text-link .ui-icon {
    width: 16px;
    height: 16px;
}

.dashboard-table-wrapper {
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #ffffff;
}

.dashboard-table {
    min-width: 780px;
}

.dashboard-table th:last-child,
.dashboard-table td:last-child {
    text-align: right;
}

.dashboard-table tbody tr {
    transition:
        background .16s ease,
        box-shadow .16s ease;
}

.dashboard-transaction-number {
    display: inline-block;
    color: #1849a9;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-transaction-number:hover {
    color: #155eef;
    text-decoration: underline;
}

.dashboard-customer-name,
.dashboard-cashier-name,
.dashboard-amount {
    display: block;
}

.dashboard-customer-name {
    color: var(--text-strong);
}

.dashboard-cashier-name {
    color: #344054;
    font-weight: 650;
}

.dashboard-amount {
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dashboard-date-text {
    white-space: nowrap;
}

.dashboard-return-text {
    display: block;
    margin-top: 4px;
    color: #b54708;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-status-stack {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
}

.dashboard-status-stack small {
    color: #667085;
    font-weight: 650;
    white-space: nowrap;
}

.dashboard-open-sale {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #b2ccff;
    border-radius: 9px;
    background: #ffffff;
    color: #1849a9;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-open-sale:hover {
    border-color: #84adff;
    background: #edf4ff;
    color: #155eef;
}

.dashboard-open-sale .ui-icon {
    width: 15px;
    height: 15px;
    transform: rotate(180deg);
}

.dashboard-action-heading {
    width: 92px;
}

.dashboard-empty-state {
    min-height: 145px;
}

/*
|--------------------------------------------------------------------------
| TABLET LANDSCAPE DAN MODE PC KECIL
|--------------------------------------------------------------------------
|
| Screenshot pengguna berada pada lebar sekitar 900 piksel.
| Ukuran di bawah ini mulai aktif dari 761 piksel agar mode PC
| dan tablet landscape tetap mudah dibaca.
|
*/

@media (min-width: 761px) {
    .dashboard-page .dashboard-panel {
        padding: 26px;
    }

    .dashboard-page .dashboard-panel-header {
        margin-bottom: 21px;
    }

    .dashboard-page .dashboard-panel-header h3,
    .dashboard-page .section-title-row h3 {
        margin-top: 7px;
        font-size: 24px;
        line-height: 1.25;
    }

    .dashboard-page .eyebrow {
        font-size: 12px;
    }

    .dashboard-page .text-link {
        font-size: 14px;
    }

    .dashboard-page .metric-card {
        min-height: 112px;
        gap: 16px;
        padding: 22px;
    }

    .dashboard-page .metric-icon {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }

    .dashboard-page .metric-icon .ui-icon {
        width: 25px;
        height: 25px;
    }

    .dashboard-page .metric-card span {
        font-size: 14px;
    }

    .dashboard-page .metric-card strong {
        margin-top: 6px;
        font-size: 26px;
        line-height: 1.25;
    }

    .dashboard-page .metric-card small {
        font-size: 12px;
    }

    .dashboard-page .dashboard-table th {
        padding: 14px;
        font-size: 12px;
        letter-spacing: .045em;
    }

    .dashboard-page .dashboard-table td {
        height: 72px;
        padding: 15px 14px;
        font-size: 15px;
        line-height: 1.4;
    }

    .dashboard-page .dashboard-table tbody tr:hover {
        background: #f7faff;
        box-shadow:
            inset 3px 0 0
            #155eef;
    }

    .dashboard-page .dashboard-transaction-number {
        font-size: 15px;
    }

    .dashboard-page .dashboard-customer-name,
    .dashboard-page .dashboard-cashier-name {
        font-size: 14px;
    }

    .dashboard-page .dashboard-amount {
        font-size: 16px;
    }

    .dashboard-page .table-subtext,
    .dashboard-page .dashboard-status-stack small,
    .dashboard-page .dashboard-return-text {
        font-size: 11px;
    }

    .dashboard-page .badge {
        min-height: 31px;
        padding: 0 11px;
        font-size: 10px;
    }

    .dashboard-page .dashboard-open-sale {
        min-height: 40px;
        font-size: 12px;
    }

    .dashboard-page .stock-item {
        min-height: 66px;
        padding: 15px 0;
    }

    .dashboard-page .stock-item strong {
        font-size: 15px;
    }

    .dashboard-page .stock-item span {
        font-size: 12px;
    }

    .dashboard-page .stock-number {
        font-size: 23px;
    }

    .dashboard-page .stock-number small {
        font-size: 11px;
    }

    .dashboard-page .inventory-value-row {
        min-height: 57px;
        padding: 14px 0;
    }

    .dashboard-page .inventory-value-row span {
        font-size: 13px;
    }

    .dashboard-page .inventory-value-row strong {
        font-size: 17px;
    }

    .dashboard-page .inventory-mini-grid span {
        font-size: 12px;
    }

    .dashboard-page .inventory-mini-grid strong {
        font-size: 23px;
    }

    .dashboard-page .quick-action-section {
        padding: 26px;
    }

    .dashboard-page .quick-action-card {
        min-height: 165px;
        padding: 20px;
    }

    .dashboard-page .quick-action-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .dashboard-page .quick-action-icon .ui-icon {
        width: 23px;
        height: 23px;
    }

    .dashboard-page .quick-action-card strong {
        font-size: 17px;
    }

    .dashboard-page .quick-action-card small {
        font-size: 13px;
        line-height: 1.55;
    }
}

/*
|--------------------------------------------------------------------------
| PC BESAR
|--------------------------------------------------------------------------
*/

@media (min-width: 1200px) {
    .dashboard-page .dashboard-hero {
        min-height: 260px;
        padding: 34px;
    }

    .dashboard-page .dashboard-hero p {
        font-size: 16px;
    }

    .dashboard-page .dashboard-clock-card span {
        font-size: 13px;
    }

    .dashboard-page .dashboard-clock-card small {
        font-size: 12px;
    }

    .dashboard-page .metric-grid {
        gap: 17px;
    }

    .dashboard-page .dashboard-main-grid {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(330px, .7fr);
        gap: 20px;
    }

    .dashboard-page .dashboard-table {
        min-width: 850px;
    }

    .dashboard-page .dashboard-table th {
        font-size: 13px;
    }

    .dashboard-page .dashboard-table td {
        height: 78px;
        font-size: 16px;
    }

    .dashboard-page .dashboard-transaction-number {
        font-size: 16px;
    }

    .dashboard-page .dashboard-customer-name,
    .dashboard-page .dashboard-cashier-name {
        font-size: 15px;
    }

    .dashboard-page .dashboard-amount {
        font-size: 17px;
    }

    .dashboard-page .table-subtext,
    .dashboard-page .dashboard-status-stack small,
    .dashboard-page .dashboard-return-text {
        font-size: 12px;
    }

    .dashboard-page .badge {
        font-size: 11px;
    }

    .dashboard-page .dashboard-open-sale {
        min-height: 42px;
        font-size: 13px;
    }
}

/*
|--------------------------------------------------------------------------
| HP
|--------------------------------------------------------------------------
|
| Tampilan kartu/tabel responsif lama tetap dipertahankan.
|
*/

@media (max-width: 760px) {
    .dashboard-recent-header {
        align-items: center;
    }

    .dashboard-recent-header .text-link {
        min-height: 36px;
        padding: 0 10px;
        font-size: 11px;
    }

    .dashboard-table {
        min-width: 720px;
    }
}


/* =========================================================
   SISTEM TAMPILAN ADAPTIF SELURUH APLIKASI
   PC >= 1181 | TABLET 700–1180 | HP <= 699
========================================================= */

:root {
    --app-content-max:
        1680px;
    --app-desktop-sidebar:
        284px;
    --app-tablet-sidebar:
        304px;
    --app-mobile-sidebar:
        min(88vw, 330px);
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
}

.content-wrapper {
    width: 100%;
    max-width: var(
        --app-content-max
    );
    margin-right: auto;
    margin-left: auto;
}

.page-toolbar > div,
.form-page-header > div,
.responsive-list-header > div,
.report-panel-header > div,
.management-panel-header > div {
    min-width: 0;
}

.page-toolbar h2,
.form-page-header h2,
.responsive-list-header h3,
.report-panel-header h3,
.management-panel-header h3 {
    text-wrap: balance;
}

.page-toolbar p,
.form-page-header p,
.responsive-list-header p,
.management-panel-header p {
    text-wrap: pretty;
}

.button,
.entity-action,
.action-button,
.mobile-action-button {
    -webkit-user-select: none;
    user-select: none;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

.responsive-table {
    scrollbar-width: thin;
    scrollbar-color:
        #bfc9d8
        transparent;
}

.responsive-table::-webkit-scrollbar {
    height: 9px;
}

.responsive-table::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        #bfc9d8;
    background-clip:
        padding-box;
}

/*
|--------------------------------------------------------------------------
| MODE PC
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1181px) {
    body,
    body.app-device-desktop {
        font-size: 15px;
    }

    .sidebar {
        width:
            var(
                --app-desktop-sidebar
            );
    }

    .main-content {
        margin-left:
            var(
                --app-desktop-sidebar
            );
    }

    .sidebar-brand {
        min-height: 88px;
        gap: 14px;
        padding: 17px 20px;
    }

    .sidebar-brand strong {
        font-size: 16px;
    }

    .sidebar-brand span {
        font-size: 12px;
    }

    .sidebar-menu {
        padding: 18px 14px;
    }

    .menu-link {
        min-height: 52px;
        gap: 13px;
        margin-bottom: 7px;
        padding: 0 15px;
        font-size: 15px;
    }

    .menu-icon {
        width: 28px;
        height: 28px;
    }

    .menu-icon .ui-icon {
        width: 21px;
        height: 21px;
    }

    .sidebar-user {
        min-height: 82px;
        padding: 15px 17px;
    }

    .sidebar-user-text strong {
        font-size: 14px;
    }

    .sidebar-user-text span {
        font-size: 12px;
    }

    .topbar-app {
        min-height: 84px;
        padding:
            15px
            clamp(
                24px,
                2.2vw,
                36px
            );
    }

    .topbar-left h1 {
        font-size: 25px;
        line-height: 1.2;
    }

    .topbar-left p {
        margin-top: 5px;
        font-size: 13px;
    }

    .topbar-user-name strong {
        font-size: 14px;
    }

    .topbar-user-name small {
        font-size: 11px;
    }

    .role-chip {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        font-size: 11px;
    }

    .topbar-account .button {
        min-height: 44px;
        font-size: 14px;
    }

    .content-wrapper {
        padding:
            28px
            clamp(
                26px,
                2.4vw,
                40px
            )
            42px;
    }

    .page-toolbar,
    .form-page-header {
        min-height: 128px;
        align-items: center;
        padding: 28px 30px;
        border-radius: 20px;
    }

    .page-toolbar h2,
    .form-page-header h2 {
        margin-top: 8px;
        font-size: 30px;
        line-height: 1.2;
    }

    .page-toolbar p,
    .form-page-header p {
        font-size: 14px;
    }

    .page-toolbar .button,
    .form-page-header .button,
    .desktop-primary-action {
        min-height: 48px;
        padding: 0 20px;
        font-size: 14px;
    }

    .compact-summary-grid,
    .summary-card-grid,
    .report-summary-grid {
        gap: 16px;
    }

    .compact-summary-card,
    .summary-mini-card,
    .report-summary-card {
        min-height: 125px;
        padding: 21px;
        border-radius: 17px;
    }

    .compact-summary-card span,
    .summary-mini-card span,
    .report-summary-card span {
        font-size: 13px;
    }

    .compact-summary-card strong,
    .summary-mini-card strong {
        font-size: 30px;
    }

    .compact-summary-card
    .compact-money {
        font-size: 23px;
    }

    .report-summary-card strong {
        font-size: 26px;
    }

    .report-summary-card small {
        font-size: 12px;
    }

    .responsive-list-panel,
    .management-panel,
    .report-panel,
    .report-filter-panel,
    .form-card,
    .form-info-card {
        padding: 27px;
        border-radius: 20px;
    }

    .responsive-list-header,
    .management-panel-header,
    .report-panel-header {
        margin-bottom: 22px;
    }

    .responsive-list-header h3,
    .management-panel-header h3,
    .report-panel-header h3 {
        font-size: 25px;
    }

    .responsive-list-header p,
    .management-panel-header p {
        font-size: 14px;
    }

    .responsive-search-form {
        grid-template-columns:
            minmax(
                320px,
                460px
            )
            auto
            auto;
        gap: 10px;
    }

    .responsive-search-input input,
    .filter-bar input,
    .filter-bar select,
    .report-filter-form input,
    .report-filter-form select {
        min-height: 48px;
        font-size: 14px;
    }

    .responsive-search-form .button,
    .filter-bar .button,
    .report-filter-form .button {
        min-height: 48px;
        font-size: 14px;
    }

    .entity-card-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
        gap: 17px;
    }

    .customer-entity-grid,
    .user-entity-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .entity-card {
        min-height: 255px;
        border-radius: 18px;
    }

    .entity-card-top,
    .customer-card-header,
    .user-card-header {
        padding:
            20px
            20px
            0;
    }

    .entity-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .entity-card-content {
        padding:
            17px
            20px
            20px;
    }

    .entity-card-content h4,
    .customer-card-header h4,
    .user-card-header h4 {
        font-size: 19px;
    }

    .entity-card-content > p,
    .customer-card-header p,
    .user-card-header p {
        font-size: 13px;
    }

    .entity-contact-list a,
    .entity-contact-list p {
        font-size: 14px;
    }

    .entity-stat-grid {
        gap: 10px;
        padding: 17px 20px;
    }

    .entity-stat-grid > div {
        min-height: 70px;
        padding: 13px;
    }

    .entity-stat-grid span {
        font-size: 11px;
    }

    .entity-stat-grid strong {
        font-size: 16px;
    }

    .entity-card-actions {
        gap: 9px;
        padding:
            15px
            20px
            20px;
    }

    .entity-action,
    .entity-action-disabled {
        min-height: 45px;
        font-size: 13px;
    }

    .form-card {
        max-width: 1280px;
    }

    .form-card-narrow {
        max-width: 780px;
    }

    .form-layout {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(320px, .55fr);
        gap: 22px;
    }

    .form-grid-two {
        gap: 5px 22px;
    }

    .form-grid-three {
        gap: 5px 22px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        margin-bottom: 9px;
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 52px;
        font-size: 15px;
    }

    .form-group textarea {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .form-hint {
        font-size: 12px;
    }

    .form-actions {
        gap: 11px;
        padding-top: 23px;
    }

    .form-actions .button {
        min-width: 130px;
        min-height: 48px;
        font-size: 14px;
    }

    .data-table th {
        height: 49px;
        padding: 13px 15px;
        font-size: 12px;
    }

    .data-table td {
        min-height: 66px;
        padding: 14px 15px;
        font-size: 14px;
    }

    .action-button {
        min-height: 39px;
        padding: 0 13px;
        font-size: 12px;
    }

    .report-two-column {
        gap: 20px;
    }

    .report-breakdown-item,
    .report-product-item {
        min-height: 68px;
        padding: 15px 0;
    }

    .report-breakdown-item strong,
    .report-product-item strong {
        font-size: 14px;
    }

    .report-breakdown-item small,
    .report-product-item small {
        font-size: 12px;
    }

    .report-breakdown-item b,
    .report-product-item b {
        font-size: 14px;
    }

    .report-transaction-grid,
    .sales-history-grid {
        gap: 16px;
    }

    .report-transaction-card,
    .sales-history-card {
        border-radius: 17px;
    }

    .report-transaction-head,
    .sales-history-card-head {
        padding: 16px;
    }

    .report-transaction-head strong,
    .sales-history-card-head strong {
        font-size: 14px;
    }

    .report-transaction-head small,
    .sales-history-card-head small {
        font-size: 11px;
    }

    .app-modal-dialog {
        max-height:
            min(
                86vh,
                860px
            );
    }
}

@media screen and (min-width: 1450px) {
    .entity-card-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .customer-entity-grid,
    .user-entity-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .report-transaction-grid,
    .sales-history-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}

/*
|--------------------------------------------------------------------------
| MODE TABLET / IPAD
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 700px) and (max-width: 1180px) {
    body,
    body.app-device-tablet {
        font-size: 14px;
    }

    .sidebar {
        width:
            var(
                --app-tablet-sidebar
            );
        transform:
            translateX(-105%);
    }

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

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: inline-grid;
        place-items: center;
    }

    .sidebar-brand {
        min-height: 84px;
        padding: 16px 19px;
    }

    .sidebar-menu {
        padding: 17px 13px;
    }

    .menu-link {
        min-height: 52px;
        padding: 0 15px;
        font-size: 15px;
    }

    .topbar-app {
        min-height: 76px;
        padding:
            12px
            18px;
    }

    .topbar-left {
        min-width: 0;
    }

    .topbar-left > div {
        min-width: 0;
    }

    .topbar-left h1 {
        overflow: hidden;
        font-size: 22px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-left p {
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-user-name {
        display: none;
    }

    .topbar-account .button {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }

    .content-wrapper {
        padding:
            20px
            18px
            34px;
    }

    .page-toolbar,
    .form-page-header {
        min-height: 112px;
        align-items: center;
        padding: 22px;
        border-radius: 18px;
    }

    .page-toolbar h2,
    .form-page-header h2 {
        font-size: 27px;
    }

    .page-toolbar p,
    .form-page-header p {
        font-size: 13px;
    }

    .page-toolbar .button,
    .form-page-header .button {
        min-height: 46px;
    }

    .compact-summary-grid,
    .summary-card-grid,
    .report-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 13px;
    }

    .compact-summary-grid-four {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .compact-summary-card,
    .summary-mini-card,
    .report-summary-card {
        min-height: 112px;
        padding: 18px;
    }

    .responsive-list-panel,
    .management-panel,
    .report-panel,
    .report-filter-panel,
    .form-card,
    .form-info-card {
        padding: 21px;
    }

    .responsive-list-header,
    .management-panel-header,
    .report-panel-header {
        align-items: flex-start;
    }

    .responsive-search-form {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;
    }

    .responsive-search-input input,
    .responsive-search-form .button {
        min-height: 47px;
    }

    .entity-card-grid,
    .customer-entity-grid,
    .user-entity-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 14px;
    }

    .entity-card {
        min-height: 245px;
    }

    .entity-action,
    .entity-action-disabled {
        min-height: 44px;
        font-size: 13px;
    }

    .form-layout {
        grid-template-columns: 1fr;
    }

    .form-grid-two {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 3px 18px;
    }

    .form-grid-three {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 3px 18px;
    }

    .form-span-three {
        grid-column: span 2;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 50px;
        font-size: 15px;
    }

    .form-actions .button {
        min-height: 47px;
    }

    .report-filter-form {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .report-filter-form .button {
        width: 100%;
        min-height: 47px;
    }

    .report-two-column {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .report-transaction-grid,
    .sales-history-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .app-modal-dialog {
        width:
            min(
                760px,
                calc(100% - 36px)
            );
        max-height:
            calc(
                var(
                    --app-viewport-height,
                    100vh
                ) -
                48px
            );
    }

    .mobile-floating-action,
    .mobile-add-sparepart {
        display: none;
    }
}

@media screen and (min-width: 700px) and (max-width: 900px) {
    .page-toolbar,
    .form-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .page-toolbar > .button,
    .form-page-header > .button {
        align-self: flex-start;
    }

    .responsive-list-header,
    .report-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .responsive-search-form {
        width: 100%;
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;
    }

    .report-two-column {
        grid-template-columns: 1fr;
    }

    .report-transaction-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/*
|--------------------------------------------------------------------------
| MODE HP
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 699px) {
    body,
    body.app-device-mobile {
        font-size: 14px;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .sidebar {
        width:
            var(
                --app-mobile-sidebar
            );
        max-width: 330px;
        transform:
            translateX(-105%);
    }

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

    .sidebar-brand {
        min-height: 78px;
        padding: 14px 16px;
    }

    .sidebar-brand strong {
        font-size: 15px;
    }

    .sidebar-brand span {
        font-size: 11px;
    }

    .sidebar-menu {
        padding: 14px 11px;
    }

    .menu-link {
        min-height: 52px;
        margin-bottom: 6px;
        padding: 0 14px;
        font-size: 15px;
    }

    .sidebar-user {
        min-height: 76px;
    }

    .main-content {
        margin-left: 0;
    }

    .topbar-app {
        min-height: 68px;
        gap: 10px;
        padding:
            10px
            12px;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        border-radius: 12px;
    }

    .topbar-left {
        min-width: 0;
        flex: 1;
        gap: 10px;
    }

    .topbar-left > div {
        min-width: 0;
    }

    .topbar-left h1 {
        overflow: hidden;
        font-size: 18px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-left p {
        max-width: 46vw;
        overflow: hidden;
        margin-top: 3px;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-user-name,
    .topbar-account .button {
        display: none;
    }

    .topbar-account {
        flex: 0 0 auto;
    }

    .role-chip {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        padding: 0 9px;
        font-size: 9px;
    }

    .content-wrapper {
        padding:
            13px
            10px
            calc(
                88px +
                env(
                    safe-area-inset-bottom
                )
            );
    }

    .alert {
        margin-bottom: 13px;
        padding: 12px 13px;
        border-radius: 11px;
        font-size: 13px;
    }

    .page-toolbar,
    .form-page-header {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 13px;
        padding: 17px 15px;
        border-radius: 15px;
    }

    .page-toolbar h2,
    .form-page-header h2 {
        margin-top: 6px;
        font-size: 23px;
        line-height: 1.2;
    }

    .page-toolbar p,
    .form-page-header p {
        font-size: 12px;
        line-height: 1.55;
    }

    .page-toolbar > .button,
    .form-page-header > .button,
    .page-toolbar
    .desktop-primary-action {
        width: 100%;
        min-height: 49px;
    }

    .eyebrow {
        font-size: 10px;
        letter-spacing: .85px;
    }

    .compact-summary-grid,
    .compact-summary-grid-four,
    .summary-card-grid,
    .report-summary-grid {
        display: flex;
        gap: 10px;
        margin-right: -10px;
        margin-bottom: 13px;
        padding-right: 10px;
        overflow-x: auto;
        scroll-snap-type:
            x mandatory;
        scrollbar-width: none;
    }

    .compact-summary-grid::-webkit-scrollbar,
    .summary-card-grid::-webkit-scrollbar,
    .report-summary-grid::-webkit-scrollbar {
        display: none;
    }

    .compact-summary-card,
    .summary-mini-card,
    .report-summary-card {
        min-width: 178px;
        min-height: 104px;
        flex: 0 0 72%;
        padding: 16px;
        border-radius: 14px;
        scroll-snap-align: start;
    }

    .compact-summary-card span,
    .summary-mini-card span,
    .report-summary-card span {
        font-size: 11px;
    }

    .compact-summary-card strong,
    .summary-mini-card strong {
        font-size: 25px;
    }

    .compact-summary-card
    .compact-money,
    .report-summary-card strong {
        font-size: 19px;
    }

    .responsive-list-panel,
    .management-panel,
    .report-panel,
    .report-filter-panel,
    .form-card,
    .form-info-card {
        padding: 15px 13px;
        border-radius: 15px;
    }

    .responsive-list-header,
    .management-panel-header,
    .report-panel-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px;
    }

    .responsive-list-header h3,
    .management-panel-header h3,
    .report-panel-header h3 {
        font-size: 20px;
    }

    .responsive-list-header p,
    .management-panel-header p {
        font-size: 12px;
    }

    .responsive-search-form,
    .filter-bar,
    .report-filter-form,
    .sales-history-filter,
    .sales-history-filter-return {
        width: 100%;
        grid-template-columns:
            1fr !important;
        gap: 9px;
    }

    .responsive-search-input,
    .responsive-search-form .button,
    .filter-bar > *,
    .report-filter-form > *,
    .sales-history-filter > * {
        grid-column:
            span 1 !important;
    }

    .responsive-search-input input,
    .filter-bar input,
    .filter-bar select,
    .report-filter-form input,
    .report-filter-form select,
    .sales-history-filter input,
    .sales-history-filter select {
        min-height: 50px;
        font-size: 16px;
    }

    .responsive-search-form .button,
    .filter-bar .button,
    .report-filter-form .button,
    .sales-history-filter .button {
        width: 100%;
        min-height: 49px;
        font-size: 14px;
    }

    .entity-card-grid,
    .customer-entity-grid,
    .user-entity-grid,
    .report-transaction-grid,
    .sales-history-grid {
        grid-template-columns:
            1fr;
        gap: 11px;
    }

    .entity-card {
        min-height: 0;
        border-radius: 15px;
    }

    .entity-card:hover {
        transform: none;
    }

    .entity-card-top,
    .customer-card-header,
    .user-card-header {
        padding:
            15px
            15px
            0;
    }

    .entity-icon {
        width: 45px;
        height: 45px;
        border-radius: 13px;
    }

    .entity-card-content {
        padding:
            14px
            15px
            15px;
    }

    .entity-card-content h4,
    .customer-card-header h4,
    .user-card-header h4 {
        font-size: 17px;
    }

    .entity-contact-list a,
    .entity-contact-list p {
        font-size: 13px;
    }

    .entity-stat-grid {
        gap: 8px;
        padding:
            13px
            15px;
    }

    .entity-stat-grid > div {
        padding: 11px;
    }

    .entity-card-actions {
        gap: 8px;
        padding:
            12px
            15px
            15px;
    }

    .entity-action,
    .entity-action-disabled {
        min-height: 46px;
        font-size: 13px;
    }

    .desktop-primary-action,
    .sparepart-add-desktop {
        display: none !important;
    }

    .mobile-floating-action,
    .mobile-add-sparepart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .form-layout,
    .form-grid-two,
    .form-grid-three {
        grid-template-columns:
            1fr;
        gap: 0;
    }

    .form-span-two,
    .form-span-three {
        grid-column:
            span 1;
    }

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

    .form-group label {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 51px;
        font-size: 16px;
    }

    .form-group textarea {
        min-height: 105px;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .form-hint {
        font-size: 11px;
    }

    .form-actions {
        position: sticky;
        z-index: 30;
        bottom: 0;
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 8px;
        margin:
            16px
            -13px
            -15px;
        padding:
            12px
            13px
            calc(
                12px +
                env(
                    safe-area-inset-bottom
                )
            );
        border-top:
            1px solid
            var(--border);
        background:
            rgba(
                255,
                255,
                255,
                .97
            );
        box-shadow:
            0 -8px 18px
            rgba(
                16,
                24,
                40,
                .08
            );
        backdrop-filter:
            blur(10px);
    }

    .form-actions .button {
        width: 100%;
        min-width: 0;
        min-height: 49px;
        padding: 0 11px;
        font-size: 13px;
    }

    .report-two-column {
        grid-template-columns:
            1fr;
        gap: 13px;
    }

    .report-breakdown-item,
    .report-product-item {
        min-height: 62px;
        padding: 13px 0;
    }

    .report-transaction-card,
    .sales-history-card {
        border-radius: 15px;
    }

    .report-transaction-head,
    .sales-history-card-head {
        padding: 14px;
    }

    .app-modal {
        align-items: flex-end;
        padding: 0;
    }

    .app-modal-dialog,
    .app-modal-dialog.modal-small,
    .sale-action-dialog {
        width: 100%;
        max-width: none;
        max-height:
            min(
                91dvh,
                calc(
                    var(
                        --app-viewport-height,
                        100vh
                    ) -
                    30px
                )
            );
        margin: 0;
        overflow-y: auto;
        border-radius:
            20px
            20px
            0
            0;
    }

    .app-modal-header {
        position: sticky;
        z-index: 5;
        top: 0;
        padding:
            16px
            15px;
        background:
            rgba(
                255,
                255,
                255,
                .97
            );
        backdrop-filter:
            blur(10px);
    }

    .modal-actions {
        position: sticky;
        z-index: 5;
        bottom: 0;
        margin:
            16px
            -1px
            -1px;
        background: #ffffff;
    }

    .data-table th {
        font-size: 11px;
    }

    .data-table td {
        font-size: 13px;
    }

    .login-wrapper {
        min-height:
            var(
                --app-viewport-height,
                100vh
            );
    }
}

@media screen and (max-width: 390px) {
    .topbar-left p {
        display: none;
    }

    .role-chip {
        padding: 0 7px;
        font-size: 8px;
    }

    .content-wrapper {
        padding-right: 8px;
        padding-left: 8px;
    }

    .compact-summary-card,
    .summary-mini-card,
    .report-summary-card {
        min-width: 166px;
        flex-basis: 79%;
    }

    .form-actions {
        grid-template-columns:
            1fr;
    }
}

/*
|--------------------------------------------------------------------------
| PERANGKAT SENTUH
|--------------------------------------------------------------------------
*/

@media (hover: none) and (pointer: coarse) {
    .button,
    .entity-action,
    .action-button,
    .mobile-action-button,
    .menu-link,
    .dashboard-open-sale,
    .sales-history-open {
        min-height: 46px;
    }

    .entity-card:hover,
    .cashier-product-card:hover,
    .dashboard-table tbody tr:hover {
        transform: none;
        box-shadow: none;
    }
}


/* =========================================================
   TOMBOL PLUS KASIR — CENTER PRESISI
========================================================= */

.cashier-add-product {
    display: inline-grid;
    place-content: center;
    place-items: center;
    padding: 0;
    overflow: visible;
    line-height: 0;
    text-align: center;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
}

.cashier-add-product svg {
    width: 18px;
    height: 18px;
    display: block;
    margin: 0;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transform: translate(0, 0);
}

.cashier-add-product:hover svg,
.cashier-add-product:focus-visible svg,
.cashier-add-product:active svg {
    transform: translate(0, 0);
}

.cashier-add-product:active {
    transform: scale(.96);
}

@media (max-width: 430px) {
    .cashier-add-product svg {
        width: 17px;
        height: 17px;
    }
}


/* =========================================================
   PENYEMPURNAAN AREA CARI / SCAN BARCODE KASIR
========================================================= */

.cashier-product-search {
    padding: 17px;
    border-color: #d7deea;
    background:
        linear-gradient(
            180deg,
            #fbfcfe 0%,
            #f7f9fc 100%
        );
}

.cashier-search-heading {
    align-items: center;
    margin-bottom: 12px;
}

.cashier-search-heading > div {
    min-width: 0;
}

.cashier-search-heading label {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.35;
}

.cashier-scan-hint {
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid #abefc6;
    background: #ecfdf3;
    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .04);
}

.cashier-search-control {
    position: static;
    grid-template-columns:
        minmax(0, 1fr)
        116px;
    gap: 10px;
    align-items: stretch;
}

.cashier-search-input-wrap {
    position: relative;
    min-width: 0;
}

.cashier-search-input-wrap input {
    width: 100%;
    min-height: 52px;
    padding:
        0
        48px
        0
        45px;
    border: 1px solid #b8c2d1;
    border-radius: 12px;
    background: #ffffff;
    font-size: 15px;
    line-height: 1;
    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .04);
}

.cashier-search-input-wrap input::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.cashier-search-input-wrap input:hover {
    border-color: #98a2b3;
}

.cashier-search-input-wrap input:focus {
    border-color: #528bff;
    outline: 0;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .12);
}

.cashier-search-icon {
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.cashier-search-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.cashier-search-clear {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 9px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #667085;
    line-height: 0;
    cursor: pointer;
}

.cashier-search-clear:hover,
.cashier-search-clear:focus-visible {
    background: #f2f4f7;
    color: #344054;
}

.cashier-search-clear[hidden] {
    display: none;
}

.cashier-search-clear .ui-icon {
    width: 17px;
    height: 17px;
}

.cashier-search-submit {
    min-width: 0 !important;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-size: 14px;
}

.cashier-search-submit .ui-icon {
    width: 18px;
    height: 18px;
}

.cashier-search-help {
    display: flex !important;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    color: #667085;
}

.cashier-search-help > span {
    flex: 0 0 auto;
    margin-top: 1px;
    line-height: 0;
}

.cashier-search-help .ui-icon {
    width: 15px;
    height: 15px;
}

.cashier-search-help small {
    display: block;
    margin: 0;
    font-size: 10px;
    line-height: 1.55;
}

/*
|--------------------------------------------------------------------------
| TABLET DAN IPAD
|--------------------------------------------------------------------------
*/

@media (min-width: 700px) and (max-width: 1180px) {
    .cashier-search-control {
        grid-template-columns:
            minmax(0, 1fr)
            110px;
    }

    .cashier-search-input-wrap input {
        min-height: 52px;
        font-size: 16px;
    }
}

/*
|--------------------------------------------------------------------------
| HP BESAR
|--------------------------------------------------------------------------
*/

@media (min-width: 431px) and (max-width: 699px) {
    .cashier-product-search {
        padding: 15px;
    }

    .cashier-search-heading {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cashier-search-control {
        grid-template-columns:
            minmax(0, 1fr)
            104px;
    }

    .cashier-search-control .button {
        width: auto;
    }

    .cashier-search-input-wrap input {
        min-height: 52px;
        font-size: 16px;
    }
}

/*
|--------------------------------------------------------------------------
| HP KECIL
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {
    .cashier-product-search {
        padding: 14px 12px;
    }

    .cashier-search-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .cashier-search-control {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .cashier-search-input-wrap input {
        min-height: 52px;
        padding-left: 43px;
        font-size: 16px;
    }

    .cashier-search-submit {
        width: 100%;
        min-height: 50px;
    }

    .cashier-search-help {
        margin-top: 9px;
    }
}


/* =========================================================
   TRANSAKSI PENJUALAN DASHBOARD — MODE HP
========================================================= */

@media screen and (max-width: 699px) {
    .dashboard-recent-panel {
        padding: 16px 13px !important;
        overflow: hidden;
    }

    .dashboard-recent-header {
        align-items: center;
        flex-direction: row;
        gap: 10px;
        margin-bottom: 14px !important;
    }

    .dashboard-recent-header > div {
        min-width: 0;
        flex: 1;
    }

    .dashboard-recent-header .eyebrow {
        font-size: 9px;
    }

    .dashboard-recent-header h3 {
        margin-top: 5px !important;
        font-size: 20px !important;
        line-height: 1.2;
    }

    .dashboard-recent-header .text-link {
        min-width: 0;
        min-height: 38px;
        flex: 0 0 auto;
        gap: 6px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 10px;
        white-space: nowrap;
    }

    .dashboard-recent-header
    .text-link
    .ui-icon {
        width: 15px;
        height: 15px;
    }

    .dashboard-table-wrapper {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .dashboard-table,
    .dashboard-table tbody {
        width: 100%;
        min-width: 0 !important;
        display: block;
    }

    .dashboard-table thead {
        display: none;
    }

    .dashboard-table
    .dashboard-mobile-sale-card {
        width: 100%;
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 0 10px;
        margin: 0 0 11px;
        padding: 14px;
        overflow: hidden;
        border: 1px solid #d8e0ec;
        border-radius: 15px;
        background: #ffffff;
        box-shadow:
            0 4px 12px
            rgba(16, 24, 40, .045);
    }

    .dashboard-table
    .dashboard-mobile-sale-card:last-child {
        margin-bottom: 0;
    }

    .dashboard-table
    .dashboard-mobile-sale-card
    td {
        width: auto;
        min-width: 0;
        height: auto;
        display: block;
        padding: 10px 0;
        border: 0;
        text-align: left;
    }

    .dashboard-table
    .dashboard-mobile-sale-card
    td::before {
        display: block;
        margin-bottom: 5px;
        color: #667085;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: .045em;
        line-height: 1.2;
        text-align: left;
        text-transform: uppercase;
    }

    .dashboard-mobile-sale-number {
        position: relative;
        grid-column: 1 / -1;
        padding-top: 0 !important;
        padding-right: 118px !important;
        padding-bottom: 13px !important;
        border-bottom:
            1px solid
            #e4e7ec !important;
    }

    .dashboard-mobile-sale-number::before {
        display: none !important;
    }

    .dashboard-mobile-sale-number
    .dashboard-transaction-number {
        max-width: 100%;
        display: block;
        overflow: hidden;
        color: #1849a9;
        font-size: 14px;
        font-weight: 850;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-mobile-sale-number
    .dashboard-date-text {
        display: block;
        margin-top: 4px;
        color: #667085;
        font-size: 10px;
        line-height: 1.35;
        white-space: normal;
    }

    .dashboard-mobile-sale-customer,
    .dashboard-mobile-sale-cashier {
        min-height: 69px;
        padding-top: 12px !important;
        padding-bottom: 11px !important;
    }

    .dashboard-mobile-sale-customer {
        padding-right: 10px !important;
        border-right:
            1px solid
            #e4e7ec !important;
    }

    .dashboard-mobile-sale-cashier {
        padding-left: 2px !important;
    }

    .dashboard-mobile-sale-customer
    .dashboard-customer-name,
    .dashboard-mobile-sale-cashier
    .dashboard-cashier-name {
        overflow: hidden;
        color: #101828;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-mobile-sale-total {
        grid-column: 1 / -1;
        margin: 0 -14px;
        padding:
            12px
            14px !important;
        border-top:
            1px solid
            #d8e0ec !important;
        border-bottom:
            1px solid
            #d8e0ec !important;
        background:
            linear-gradient(
                135deg,
                #f5f8ff,
                #edf4ff
            );
    }

    .dashboard-mobile-sale-total::before {
        color: #475467 !important;
    }

    .dashboard-mobile-sale-total
    .dashboard-amount {
        color: #1849a9;
        font-size: 18px;
        font-weight: 850;
        line-height: 1.25;
    }

    .dashboard-mobile-sale-total
    .dashboard-return-text {
        margin-top: 5px;
        color: #b54708;
        font-size: 10px;
        font-weight: 750;
        line-height: 1.35;
        white-space: normal;
    }

    .dashboard-mobile-sale-status {
        grid-column: 1 / -1;
        padding:
            12px
            0
            4px !important;
    }

    .dashboard-mobile-sale-status
    .dashboard-status-stack {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        gap: 9px;
    }

    .dashboard-mobile-sale-status
    .badge {
        max-width: 60%;
        min-height: 29px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        overflow: hidden;
        border-radius: 999px;
        font-size: 8px;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-mobile-sale-status
    .dashboard-status-stack
    small {
        min-width: 0;
        overflow: hidden;
        color: #667085;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.3;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-action-cell {
        position: absolute;
        top: 14px;
        right: 14px;
        width: auto !important;
        padding: 0 !important;
    }

    .dashboard-action-cell::before {
        display: none !important;
    }

    .dashboard-open-sale {
        min-height: 35px;
        gap: 5px;
        padding: 0 9px;
        border-radius: 9px;
        font-size: 9px;
    }

    .dashboard-open-sale
    .ui-icon {
        width: 13px;
        height: 13px;
    }

    .dashboard-table
    .dashboard-mobile-sale-card:hover {
        transform: none;
        background: #ffffff;
        box-shadow:
            0 4px 12px
            rgba(16, 24, 40, .045);
    }

    .dashboard-empty-state {
        min-height: 135px;
        padding: 18px;
    }
}

@media screen and (max-width: 390px) {
    .dashboard-recent-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-recent-header
    .text-link {
        width: 100%;
    }

    .dashboard-mobile-sale-number {
        padding-right: 0 !important;
    }

    .dashboard-action-cell {
        position: static;
        grid-column: 1 / -1;
        width: 100% !important;
        padding-top: 9px !important;
    }

    .dashboard-open-sale {
        width: 100%;
        min-height: 42px;
    }

    .dashboard-mobile-sale-status
    .dashboard-status-stack {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-mobile-sale-status
    .badge {
        max-width: 100%;
    }

    .dashboard-mobile-sale-status
    .dashboard-status-stack
    small {
        text-align: left;
        white-space: normal;
    }
}


/* =========================================================
   LIVE SEARCH KASIR — TANPA TOMBOL CARI
========================================================= */

/*
| Chrome/Edge memberi tombol X bawaan untuk input type="search".
| Tombol bawaan disembunyikan agar tidak muncul dua tanda X.
*/

.cashier-search-input-wrap
input[type="search"]::-webkit-search-decoration,
.cashier-search-input-wrap
input[type="search"]::-webkit-search-cancel-button,
.cashier-search-input-wrap
input[type="search"]::-webkit-search-results-button,
.cashier-search-input-wrap
input[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

.cashier-search-input-wrap
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

.cashier-product-feedback.loading {
    color: #1849a9;
}

.cashier-product-feedback.success {
    color: #067647;
}

.cashier-product-feedback.empty {
    color: #b54708;
}

.cashier-product-grid {
    transition:
        opacity .16s ease,
        filter .16s ease;
}

.cashier-product-grid.is-searching {
    opacity: .62;
    filter: saturate(.82);
    pointer-events: none;
}

.cashier-search-submit.is-loading {
    cursor: wait;
}

.cashier-search-submit.is-loading
.ui-icon {
    animation:
        cashier-search-pulse
        .8s ease-in-out
        infinite alternate;
}

@keyframes cashier-search-pulse {
    from {
        opacity: .45;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*
| Pada HP tombol Cari tetap tersedia sebagai alternatif,
| tetapi pencarian sudah berjalan otomatis setelah 320 ms.
*/

@media (max-width: 699px) {
    .cashier-search-help small {
        font-size: 10px;
        line-height: 1.5;
    }
}


/* =========================================================
   TOMBOL CARI KASIR — IKON SAJA
========================================================= */

.cashier-search-submit {
    width: 52px;
    min-width: 52px !important;
    padding: 0 !important;
}

.cashier-search-submit span {
    display: none !important;
}

.cashier-search-submit .ui-icon {
    width: 19px;
    height: 19px;
}

@media (min-width: 700px) and (max-width: 1180px) {
    .cashier-search-control {
        grid-template-columns:
            minmax(0, 1fr)
            52px;
    }
}

@media (min-width: 431px) and (max-width: 699px) {
    .cashier-search-control {
        grid-template-columns:
            minmax(0, 1fr)
            52px;
    }

    .cashier-search-control .button {
        width: 52px;
    }
}

@media (max-width: 430px) {
    .cashier-search-submit {
        width: 100%;
        min-width: 0 !important;
    }
}


/* =========================================================
   KERANJANG KASIR — PENYEMPURNAAN UI/UX MODE PC
========================================================= */

@media screen and (min-width: 1181px) {
    .cashier-layout {
        grid-template-columns:
            minmax(0, 1.58fr)
            minmax(390px, .82fr);
        gap: 20px;
    }

    .cashier-cart-panel {
        padding: 24px;
        border-radius: 20px;
    }

    .cashier-cart-header {
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e4e7ec;
    }

    .cashier-cart-title {
        gap: 12px;
    }

    .cashier-cart-title-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .cashier-cart-title-icon .ui-icon {
        width: 23px;
        height: 23px;
    }

    .cashier-cart-title .eyebrow {
        font-size: 11px;
        letter-spacing: .07em;
    }

    .cashier-cart-header h3 {
        margin-top: 5px;
        font-size: 24px;
        line-height: 1.2;
    }

    .cashier-cart-header h3 span {
        min-width: 31px;
        min-height: 31px;
        margin-left: 7px;
        padding: 0 9px;
        font-size: 12px;
    }

    .cashier-clear-button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 11px;
        border: 1px solid #fecdca;
        border-radius: 9px;
        background: #fff5f4;
        color: #b42318;
        font-size: 11px;
        font-weight: 800;
    }

    .cashier-clear-button:hover {
        border-color: #fda29b;
        background: #fee4e2;
        color: #912018;
    }

    .cashier-cart-list {
        max-height: min(42vh, 470px);
        padding-right: 7px;
    }

    .cashier-cart-item {
        padding: 18px 0;
    }

    .cashier-cart-item:first-child {
        padding-top: 2px;
    }

    .cashier-cart-item-head {
        gap: 14px;
    }

    .cashier-cart-item-info span {
        color: #667085;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .025em;
    }

    .cashier-cart-item-info strong {
        margin: 6px 0;
        color: #101828;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.45;
        white-space: normal;
    }

    .cashier-cart-item-info small {
        color: #475467;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.45;
    }

    .cashier-remove-item {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 20px;
    }

    .cashier-cart-item-bottom {
        align-items: center;
        margin-top: 14px;
    }

    .cashier-quantity-control {
        grid-template-columns:
            40px
            56px
            40px;
        border-radius: 11px;
    }

    .cashier-quantity-control button,
    .cashier-quantity-control input {
        height: 40px;
    }

    .cashier-quantity-control button {
        font-size: 19px;
    }

    .cashier-quantity-control input {
        font-size: 14px;
    }

    .cashier-cart-item-total {
        color: #101828;
        font-size: 16px;
        font-weight: 850;
    }

    .cashier-total-box {
        gap: 13px;
        margin-top: 18px;
        padding: 17px;
        border-radius: 15px;
    }

    .cashier-total-box span,
    .cashier-total-box label {
        font-size: 12px;
    }

    .cashier-total-box strong {
        font-size: 15px;
    }

    .cashier-grand-total {
        margin:
            3px
            -17px
            -17px;
        padding: 16px 17px;
        border-radius: 0 0 15px 15px;
    }

    .cashier-grand-total span {
        font-size: 13px;
    }

    .cashier-grand-total strong {
        font-size: 23px;
    }

    .cashier-payment-heading h4 {
        font-size: 18px;
    }

    .cashier-payment-heading .eyebrow {
        font-size: 11px;
    }

    .cashier-payment-form .form-group label {
        font-size: 13px;
    }

    .cashier-payment-form select,
    .cashier-payment-form input,
    .cashier-payment-form textarea {
        font-size: 14px;
    }

    .cashier-change-box span {
        font-size: 12px;
    }

    .cashier-change-box strong {
        font-size: 18px;
    }

    .cashier-submit-button {
        min-height: 54px;
        font-size: 15px;
    }

    .cashier-empty-cart {
        min-height: 230px;
    }

    .cashier-empty-cart strong {
        font-size: 15px;
    }

    .cashier-empty-cart p {
        font-size: 12px;
    }
}

@media screen and (min-width: 1450px) {
    .cashier-layout {
        grid-template-columns:
            minmax(0, 1.72fr)
            minmax(420px, .78fr);
    }

    .cashier-cart-panel {
        padding: 26px;
    }

    .cashier-cart-header h3 {
        font-size: 26px;
    }

    .cashier-cart-item-info strong {
        font-size: 16px;
    }

    .cashier-cart-item-info small {
        font-size: 12px;
    }

    .cashier-cart-item-total {
        font-size: 17px;
    }
}


/* =========================================================
   SPAREPART DESKTOP — DAFTAR SPAREPART DISEMPURNAKAN
========================================================= */

@media screen and (min-width: 1181px) {
    .sparepart-page-toolbar {
        min-height: 132px;
    }

    .sparepart-summary-cards .summary-mini-card,
    .sparepart-summary-cards .compact-summary-card {
        min-height: 122px;
    }

    .sparepart-management-panel {
        padding: 28px;
        border-radius: 22px;
    }

    .sparepart-list-heading {
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .sparepart-list-heading h3 {
        font-size: 26px;
        line-height: 1.2;
    }

    .sparepart-list-heading p {
        font-size: 14px;
    }

    .sparepart-filter-bar {
        grid-template-columns:
            minmax(360px, 1fr)
            220px
            190px
            auto
            auto;
        gap: 12px;
        align-items: center;
        margin-bottom: 22px;
    }

    .sparepart-search-box input,
    .sparepart-filter-bar select {
        min-height: 48px;
        font-size: 14px;
    }

    .sparepart-filter-bar .button {
        min-height: 48px;
        padding: 0 16px;
        font-size: 14px;
    }

    .sparepart-desktop-table {
        display: block;
        overflow: auto;
        border: 1px solid #e4e7ec;
        border-radius: 18px;
        background: #ffffff;
    }

    .sparepart-desktop-data-table {
        min-width: 1400px;
        table-layout: fixed;
    }

    .sparepart-desktop-data-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 16px 14px;
        border-bottom: 1px solid #e4e7ec;
        background: #ffffff;
        color: #475467;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .sparepart-col-product {
        width: 31%;
    }

    .sparepart-col-category {
        width: 9%;
    }

    .sparepart-col-supplier {
        width: 9%;
    }

    .sparepart-col-stock {
        width: 8%;
    }

    .sparepart-col-buy {
        width: 9%;
    }

    .sparepart-col-general-price {
        width: 10%;
    }

    .sparepart-col-customer-price {
        width: 12%;
    }

    .sparepart-col-margin {
        width: 9%;
    }

    .sparepart-col-rack {
        width: 8%;
    }

    .sparepart-col-action {
        width: 8%;
    }

    .sparepart-row td {
        padding: 20px 14px;
        border-bottom: 1px solid #eef2f6;
        vertical-align: middle;
        background: #ffffff;
    }

    .sparepart-row:last-child td {
        border-bottom: 0;
    }

    .sparepart-row:hover td {
        background: #f8fbff;
    }

    .sparepart-col-product-cell {
        padding-left: 18px !important;
    }

    .product-cell-with-photo {
        min-width: 0;
        gap: 16px;
    }

    .product-list-photo {
        width: 84px;
        height: 74px;
        border-radius: 14px;
        background: #f8fafc;
    }

    .product-list-photo-empty {
        background: #eef2f6;
    }

    .sparepart-desktop-data-table .product-cell {
        min-width: 0;
    }

    .sparepart-desktop-data-table .product-cell strong {
        margin-bottom: 7px;
        color: #101828;
        font-size: 18px;
        font-weight: 850;
        line-height: 1.35;
        letter-spacing: -.01em;
    }

    .sparepart-desktop-data-table .product-cell span {
        color: #344054;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.45;
    }

    .sparepart-desktop-data-table .product-cell small {
        margin-top: 6px;
        color: #667085;
        font-size: 11px;
        font-weight: 650;
        line-height: 1.45;
        word-break: break-word;
    }

    .sparepart-col-category-cell,
    .sparepart-col-supplier-cell,
    .sparepart-col-rack-cell {
        white-space: normal;
    }

    .sparepart-desktop-data-table .table-pill {
        min-height: 34px;
        padding: 7px 11px;
        font-size: 12px;
        font-weight: 800;
    }

    .sparepart-col-stock-cell .badge {
        min-width: 82px;
        justify-content: center;
        font-size: 14px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .sparepart-col-stock-cell .table-subtext {
        margin-top: 8px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
    }

    .sparepart-col-buy-cell .price-text,
    .sparepart-col-general-price-cell .price-text,
    .sparepart-col-customer-price-cell .price-text,
    .sparepart-col-margin-cell .profit-text {
        font-size: 17px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        line-height: 1.35;
        white-space: nowrap;
    }

    .sparepart-col-general-price-cell .price-sale {
        color: #1849a9;
    }

    .sparepart-col-customer-price-cell .price-customer {
        color: #6941c6;
    }

    .sparepart-col-margin-cell .profit-text {
        display: block;
        color: #027a48;
    }

    .sparepart-col-margin-cell .table-subtext {
        margin-top: 7px;
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
    }

    .sparepart-col-action-cell {
        position: sticky;
        right: 0;
        z-index: 1;
        padding-right: 18px !important;
        background: #ffffff;
        box-shadow: -10px 0 18px rgba(255, 255, 255, .96);
    }

    .sparepart-row:hover .sparepart-col-action-cell {
        background: #f8fbff;
        box-shadow: -10px 0 18px rgba(248, 251, 255, .96);
    }

    .sparepart-action-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 76px;
    }

    .sparepart-action-buttons .action-button {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        font-size: 12px;
        font-weight: 800;
    }

    .sparepart-action-buttons .inline-form {
        display: block;
        width: 100%;
    }

    .sparepart-action-buttons .inline-form .action-button {
        width: 100%;
    }
}

@media screen and (min-width: 1450px) {
    .sparepart-filter-bar {
        grid-template-columns:
            minmax(420px, 1fr)
            230px
            200px
            auto
            auto;
    }

    .sparepart-desktop-data-table {
        min-width: 1460px;
    }

    .sparepart-desktop-data-table .product-cell strong {
        font-size: 19px;
    }

    .sparepart-col-buy-cell .price-text,
    .sparepart-col-general-price-cell .price-text,
    .sparepart-col-customer-price-cell .price-text,
    .sparepart-col-margin-cell .profit-text {
        font-size: 18px;
    }
}


/* =========================================================
   DETAIL PENJUALAN — PENYEMPURNAAN MODE PC
========================================================= */

.sale-detail-section-heading,
.receipt-preview-heading {
    display: none;
}

.sale-receipt-column {
    min-width: 0;
}

@media screen and (min-width: 1181px) {
    .sale-detail-toolbar {
        min-height: 126px;
        align-items: center;
        gap: 22px;
        padding: 24px 28px;
    }

    .sale-detail-toolbar > div:first-child {
        min-width: 250px;
        flex: 1;
    }

    .sale-detail-toolbar h2 {
        margin-top: 7px;
        font-size: 29px;
        letter-spacing: -.02em;
    }

    .sale-detail-toolbar p {
        margin-top: 7px;
        font-size: 13px;
        font-weight: 650;
    }

    .detail-sale-actions {
        max-width: 760px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 9px;
    }

    .detail-sale-actions .button {
        min-height: 44px;
        padding: 0 14px;
        border-radius: 11px;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

    .detail-sale-actions .ui-icon {
        width: 16px;
        height: 16px;
    }

    .transaction-state-banner {
        min-height: 78px;
        gap: 16px;
        margin-bottom: 20px;
        padding: 15px 19px;
        border-radius: 17px;
    }

    .transaction-state-icon {
        width: 49px;
        height: 49px;
        border-radius: 14px;
    }

    .transaction-state-icon .ui-icon {
        width: 23px;
        height: 23px;
    }

    .transaction-state-banner > div > span {
        font-size: 10px;
    }

    .transaction-state-banner > div > strong {
        margin-top: 3px;
        font-size: 16px;
    }

    .transaction-state-banner p {
        margin-top: 4px;
        font-size: 12px;
    }

    .sale-detail-layout-desktop {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(410px, 460px);
        gap: 22px;
        align-items: start;
    }

    .sale-detail-main-column {
        gap: 20px;
    }

    .sale-detail-summary,
    .sale-items-panel,
    .sale-return-history {
        padding: 24px;
        border-radius: 20px;
    }

    .sale-detail-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 18px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e4e7ec;
    }

    .sale-detail-section-heading h3 {
        margin: 6px 0 0;
        color: #101828;
        font-size: 21px;
        line-height: 1.2;
    }

    .sale-detail-number {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 0 11px;
        border: 1px solid #b2ccff;
        border-radius: 999px;
        background: #f5f8ff;
        color: #1849a9;
        font-size: 11px;
        font-weight: 850;
        white-space: nowrap;
    }

    .sale-detail-status-row {
        margin-bottom: 15px;
    }

    .sale-status-badges {
        gap: 8px;
    }

    .sale-detail-summary .report-status,
    .sale-detail-summary .sale-transaction-status,
    .sale-detail-summary .sale-payment-method {
        min-height: 31px;
        padding: 0 11px;
        font-size: 9px;
        font-weight: 850;
    }

    .sale-detail-info-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .sale-detail-info-grid > div {
        min-height: 82px;
        padding: 14px 15px;
        border-radius: 12px;
    }

    .sale-detail-info-grid span {
        font-size: 10px;
    }

    .sale-detail-info-grid strong {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.4;
    }

    .sale-refund-summary {
        gap: 11px;
        margin-top: 13px;
    }

    .sale-refund-summary > div {
        min-height: 86px;
        padding: 15px;
        border-radius: 13px;
    }

    .sale-refund-summary span {
        font-size: 10px;
    }

    .sale-refund-summary strong {
        margin-top: 8px;
        font-size: 17px;
        font-variant-numeric: tabular-nums;
    }

    .sale-quantity-summary {
        gap: 11px;
        margin-top: 11px;
    }

    .sale-quantity-summary > div {
        min-height: 74px;
        padding: 13px 15px;
        border-radius: 12px;
    }

    .sale-quantity-summary span {
        font-size: 10px;
    }

    .sale-quantity-summary strong {
        margin-top: 7px;
        font-size: 20px;
        font-variant-numeric: tabular-nums;
    }

    .sale-detail-note,
    .sale-cancellation-note {
        margin-top: 15px;
        padding: 15px;
        border-radius: 13px;
    }

    .sale-items-panel-header {
        margin-bottom: 18px;
    }

    .sale-items-panel-header h3 {
        margin-top: 6px;
        font-size: 22px;
    }

    .sale-items-panel-header > span {
        min-height: 32px;
        padding: 0 10px;
        font-size: 10px;
    }

    .sale-items-grid {
        gap: 13px;
    }

    .sale-item-card {
        border-radius: 15px;
    }

    .sale-item-card-head {
        min-height: 84px;
        padding: 15px;
    }

    .sale-item-card-head > div > span {
        font-size: 10px;
    }

    .sale-item-card-head h4 {
        margin-top: 7px;
        overflow: visible;
        font-size: 14px;
        line-height: 1.45;
        text-overflow: clip;
        white-space: normal;
    }

    .item-return-badge {
        min-height: 29px;
        padding: 0 9px;
        font-size: 9px !important;
    }

    .sale-item-card-stats {
        gap: 8px;
        padding: 13px;
    }

    .sale-item-card-stats > div {
        min-height: 60px;
        padding: 11px;
        border-radius: 10px;
    }

    .sale-item-card-stats span {
        font-size: 9px;
    }

    .sale-item-card-stats strong {
        margin-top: 6px;
        overflow: visible;
        font-size: 12px;
        line-height: 1.35;
        text-overflow: clip;
        white-space: normal;
    }

    .sale-item-card-total {
        min-height: 48px;
        padding: 12px 15px;
    }

    .sale-item-card-total span {
        font-size: 10px;
    }

    .sale-item-card-total strong {
        font-size: 15px;
        font-variant-numeric: tabular-nums;
    }

    .sale-return-history-list {
        gap: 10px;
    }

    .sale-return-history-item {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            auto;
        gap: 13px;
        padding: 14px;
        border-radius: 13px;
    }

    .sale-return-history-icon {
        width: 44px;
        height: 44px;
    }

    .sale-return-history-content strong {
        font-size: 12px;
    }

    .sale-return-history-content p {
        margin: 6px 0;
        font-size: 11px;
    }

    .sale-return-history-content small {
        font-size: 9px;
    }

    .sale-return-history-value {
        font-size: 13px;
        font-variant-numeric: tabular-nums;
    }

    .sale-receipt-column {
        position: sticky;
        top: 102px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
        scrollbar-color: #c7d0dd transparent;
    }

    .sale-receipt-column::-webkit-scrollbar {
        width: 7px;
    }

    .sale-receipt-column::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #c7d0dd;
    }

    .receipt-preview-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        padding: 12px 14px;
        border: 1px solid #d8e0ec;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(16, 24, 40, .045);
    }

    .receipt-preview-heading h3 {
        margin: 5px 0 0;
        color: #101828;
        font-size: 17px;
    }

    .receipt-preview-print {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid #b2ccff;
        border-radius: 11px;
        background: #edf4ff;
        color: #1849a9;
        cursor: pointer;
    }

    .receipt-preview-print:hover {
        border-color: #84adff;
        background: #e0eaff;
    }

    .receipt-preview-print .ui-icon {
        width: 18px;
        height: 18px;
    }

    .receipt-paper-desktop {
        max-width: 460px;
        padding: 26px;
        border-radius: 20px;
        box-shadow: 0 10px 28px rgba(16, 24, 40, .07);
    }

    .receipt-paper-desktop .receipt-header > strong {
        font-size: 20px;
        letter-spacing: .02em;
    }

    .receipt-paper-desktop .receipt-header p,
    .receipt-paper-desktop .receipt-footer p {
        font-size: 10px;
        line-height: 1.55;
    }

    .receipt-paper-desktop .receipt-status-stamp {
        margin-top: 13px;
        padding: 8px;
        font-size: 11px;
    }

    .receipt-paper-desktop .receipt-divider {
        margin: 15px 0;
    }

    .receipt-paper-desktop .receipt-meta,
    .receipt-paper-desktop .receipt-totals {
        gap: 8px;
    }

    .receipt-paper-desktop .receipt-meta p,
    .receipt-paper-desktop .receipt-totals p {
        font-size: 10px;
        line-height: 1.45;
    }

    .receipt-paper-desktop .receipt-item-list {
        gap: 14px;
    }

    .receipt-paper-desktop .receipt-item-name strong {
        font-size: 12px;
        line-height: 1.45;
    }

    .receipt-paper-desktop .receipt-item-name small {
        margin-top: 3px;
        font-size: 8px;
    }

    .receipt-paper-desktop .receipt-item-calc {
        margin-top: 6px;
        font-size: 10px;
    }

    .receipt-paper-desktop .receipt-item-return {
        margin-top: 6px;
        padding: 5px 7px;
        font-size: 8px;
    }

    .receipt-paper-desktop .receipt-total-main {
        padding: 9px 0;
        font-size: 14px !important;
    }

    .receipt-paper-desktop .receipt-footer strong {
        font-size: 13px;
    }
}

@media screen and (min-width: 1500px) {
    .sale-detail-layout-desktop {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(440px, 490px);
        gap: 24px;
    }

    .receipt-paper-desktop {
        max-width: 490px;
        padding: 28px;
    }

    .sale-items-grid {
        gap: 14px;
    }

    .sale-item-card-head h4 {
        font-size: 15px;
    }
}

@media print {
    .sale-receipt-column {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }
}


/* =========================================================
   DAFTAR SPAREPART PC — GAYA TABEL TRANSAKSI
========================================================= */

@media screen and (min-width: 1181px) {
    .sparepart-management-panel {
        padding: 26px;
        overflow: hidden;
        border: 1px solid #e4e7ec;
        border-radius: 20px;
        background: #ffffff;
        box-shadow:
            0 8px 24px
            rgba(16, 24, 40, .045);
    }

    .sparepart-list-heading {
        align-items: center;
        margin-bottom: 20px;
    }

    .sparepart-list-heading h3 {
        margin-top: 6px;
        font-size: 25px;
        line-height: 1.2;
    }

    .sparepart-list-heading p {
        margin-top: 5px;
        font-size: 13px;
    }

    .sparepart-filter-bar {
        grid-template-columns:
            minmax(360px, 1fr)
            220px
            190px
            auto
            auto;
        gap: 10px;
        margin-bottom: 20px;
    }

    .sparepart-filter-bar input,
    .sparepart-filter-bar select,
    .sparepart-filter-bar .button {
        min-height: 48px;
        border-radius: 11px;
        font-size: 14px;
    }

    .sparepart-desktop-table {
        display: block;
        overflow-x: auto;
        border: 1px solid #dce3ed;
        border-radius: 15px;
        background: #ffffff;
        box-shadow: none;
    }

    .sparepart-desktop-data-table {
        width: 100%;
        min-width: 1280px;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }

    .sparepart-desktop-data-table thead th {
        position: static;
        height: 49px;
        padding: 0 13px;
        border-bottom: 1px solid #dce3ed;
        background: #ffffff;
        color: #344054;
        font-size: 11px;
        font-weight: 850;
        letter-spacing: .035em;
        line-height: 1.2;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .sparepart-desktop-data-table thead th:first-child {
        padding-left: 17px;
    }

    .sparepart-desktop-data-table thead th:last-child {
        padding-right: 17px;
    }

    .sparepart-col-product {
        width: 24%;
    }

    .sparepart-col-category {
        width: 8%;
    }

    .sparepart-col-supplier {
        width: 8%;
    }

    .sparepart-col-stock {
        width: 8%;
    }

    .sparepart-col-buy {
        width: 9%;
    }

    .sparepart-col-general-price {
        width: 9%;
    }

    .sparepart-col-customer-price {
        width: 10%;
    }

    .sparepart-col-margin {
        width: 9%;
    }

    .sparepart-col-rack {
        width: 7%;
    }

    .sparepart-col-action {
        width: 8%;
    }

    .sparepart-row td {
        height: 94px;
        padding: 13px;
        border-bottom: 1px solid #e4e7ec;
        background: #ffffff;
        color: #344054;
        font-size: 13px;
        vertical-align: middle;
    }

    .sparepart-row:last-child td {
        border-bottom: 0;
    }

    .sparepart-row:hover td {
        background: #f8fbff;
    }

    .sparepart-col-product-cell {
        padding-left: 17px !important;
    }

    .product-cell-with-photo {
        min-width: 0;
        gap: 13px;
    }

    .product-list-photo {
        width: 62px;
        height: 62px;
        flex: 0 0 62px;
        border-radius: 12px;
        background: #f2f4f7;
    }

    .product-list-photo img {
        object-fit: cover;
    }

    .product-list-photo-empty {
        background: #f2f4f7;
    }

    .sparepart-desktop-data-table .product-cell {
        min-width: 0;
    }

    .sparepart-desktop-data-table .product-cell strong {
        display: -webkit-box;
        margin: 0 0 5px;
        overflow: hidden;
        color: #101828;
        font-size: 14px;
        font-weight: 850;
        line-height: 1.35;
        letter-spacing: -.01em;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .sparepart-desktop-data-table .product-cell span {
        display: block;
        overflow: hidden;
        color: #344054;
        font-size: 11px;
        font-weight: 750;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sparepart-desktop-data-table .product-cell small {
        display: block;
        margin-top: 4px;
        overflow: hidden;
        color: #667085;
        font-size: 9px;
        font-weight: 600;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sparepart-col-category-cell,
    .sparepart-col-supplier-cell,
    .sparepart-col-rack-cell {
        text-align: left;
    }

    .sparepart-desktop-data-table .table-pill {
        min-height: 28px;
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 9px;
        overflow: hidden;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
        text-overflow: ellipsis;
    }

    .sparepart-col-stock-cell {
        text-align: left;
    }

    .sparepart-col-stock-cell .badge {
        min-width: 58px;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 850;
        line-height: 1.15;
        text-align: center;
    }

    .sparepart-col-stock-cell .table-subtext {
        display: block;
        margin-top: 6px;
        color: #667085;
        font-size: 9px;
        font-weight: 650;
        line-height: 1.35;
        white-space: normal;
    }

    .sparepart-col-buy-cell,
    .sparepart-col-general-price-cell,
    .sparepart-col-customer-price-cell,
    .sparepart-col-margin-cell {
        text-align: left;
    }

    .sparepart-col-buy-cell .price-text,
    .sparepart-col-general-price-cell .price-text,
    .sparepart-col-customer-price-cell .price-text,
    .sparepart-col-margin-cell .profit-text {
        display: block;
        color: #101828;
        font-size: 13px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        line-height: 1.35;
        white-space: nowrap;
    }

    .sparepart-col-general-price-cell .price-sale {
        color: #1849a9;
    }

    .sparepart-col-customer-price-cell .price-customer {
        color: #6941c6;
    }

    .sparepart-col-margin-cell .profit-text {
        color: #027a48;
    }

    .sparepart-col-margin-cell .table-subtext {
        display: block;
        margin-top: 5px;
        color: #667085;
        font-size: 9px;
        font-weight: 650;
        line-height: 1.35;
        white-space: normal;
    }

    .sparepart-col-action-cell {
        position: static;
        padding-right: 17px !important;
        background: #ffffff;
        box-shadow: none;
    }

    .sparepart-row:hover .sparepart-col-action-cell {
        background: #f8fbff;
        box-shadow: none;
    }

    .sparepart-action-buttons {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row;
        gap: 7px;
        min-width: 0;
    }

    .sparepart-action-buttons .action-button {
        width: auto;
        min-width: 58px;
        min-height: 38px;
        padding: 0 10px;
        border-radius: 9px;
        font-size: 10px;
        font-weight: 800;
    }

    .sparepart-action-buttons .inline-form {
        display: inline-flex;
        width: auto;
    }

    .sparepart-action-buttons .inline-form .action-button {
        width: auto;
    }
}

@media screen and (min-width: 1450px) {
    .sparepart-desktop-data-table {
        min-width: 1340px;
    }

    .sparepart-row td {
        height: 98px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .product-list-photo {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
    }

    .sparepart-desktop-data-table .product-cell strong {
        font-size: 15px;
    }

    .sparepart-col-buy-cell .price-text,
    .sparepart-col-general-price-cell .price-text,
    .sparepart-col-customer-price-cell .price-text,
    .sparepart-col-margin-cell .profit-text {
        font-size: 14px;
    }
}


/* =========================================================
   MODUL TAGIHAN / PIUTANG
========================================================= */

.tagihan-overdue-summary {
    border-color: #fda29b;
    background: #fff5f4;
}

.tagihan-overdue-summary strong {
    color: #b42318;
}

.tagihan-filter-form {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(170px, 210px)
        minmax(170px, 210px)
        auto
        auto;
    gap: 10px;
    margin-bottom: 18px;
}

.tagihan-filter-form input,
.tagihan-filter-form select,
.tagihan-filter-form .button {
    min-height: 47px;
}

.tagihan-desktop-table {
    overflow-x: auto;
    border: 1px solid #dce3ed;
    border-radius: 15px;
}

.tagihan-data-table {
    min-width: 1120px;
}

.tagihan-customer-cell {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

.tagihan-customer-cell a {
    color: #1849a9;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.tagihan-customer-cell strong {
    color: #101828;
    font-size: 13px;
}

.tagihan-customer-cell small {
    color: #667085;
    font-size: 10px;
}

.tagihan-due-badge,
.tagihan-status-badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
    white-space: nowrap;
}

.tagihan-due-badge.terlambat {
    background: #fee4e2;
    color: #b42318;
}

.tagihan-due-badge.hari_ini {
    background: #fef0c7;
    color: #b54708;
}

.tagihan-due-badge.akan_datang {
    background: #dcfae6;
    color: #067647;
}

.tagihan-due-badge.belum_diatur {
    background: #f2f4f7;
    color: #475467;
}

.tagihan-status-badge.belum_ditagih {
    background: #f2f4f7;
    color: #475467;
}

.tagihan-status-badge.sudah_ditagih {
    background: #e0eaff;
    color: #1849a9;
}

.tagihan-status-badge.janji_bayar {
    background: #f0e8ff;
    color: #6941c6;
}

.tagihan-status-badge.selesai {
    background: #dcfae6;
    color: #067647;
}

.tagihan-money,
.tagihan-paid-value,
.tagihan-outstanding-value {
    font-size: 13px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tagihan-paid-value {
    color: #067647;
}

.tagihan-outstanding-value {
    color: #b42318;
}

.tagihan-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.tagihan-pay-button {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #067647;
}

.tagihan-wa-button {
    border-color: #abefc6;
    background: #12b76a;
    color: #ffffff;
}

.tagihan-wa-button:hover {
    background: #039855;
    color: #ffffff;
}

.tagihan-mobile-list {
    display: none;
}

.tagihan-payment-context {
    margin-bottom: 15px;
    padding: 13px;
    border: 1px solid #dce3ed;
    border-radius: 12px;
    background: #f8fafc;
}

.tagihan-payment-context span,
.tagihan-payment-context strong {
    display: block;
}

.tagihan-payment-context span {
    color: #1849a9;
    font-size: 10px;
    font-weight: 850;
}

.tagihan-payment-context strong {
    margin-top: 5px;
    color: #101828;
    font-size: 14px;
}

.tagihan-payment-context p {
    margin: 7px 0 0;
    color: #475467;
    font-size: 11px;
}

.cashier-debt-due-group[hidden] {
    display: none !important;
}

.cashier-due-date-control {
    position: relative;
}

.cashier-due-date-control > span {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    transform: translateY(-50%);
    color: #667085;
    line-height: 0;
    pointer-events: none;
}

.cashier-due-date-control .ui-icon {
    width: 18px;
    height: 18px;
}

.cashier-due-date-control input {
    width: 100%;
    padding-left: 42px;
}

.detail-tagihan-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 390px);
    gap: 20px;
    align-items: start;
}

.detail-tagihan-main {
    display: grid;
    gap: 18px;
}

.detail-tagihan-summary,
.tagihan-items-panel,
.tagihan-history-panel,
.tagihan-action-card,
.tagihan-payment-history-card,
.tagihan-paid-card {
    padding: 21px;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 7px 20px
        rgba(16, 24, 40, .045);
}

.detail-tagihan-status-row,
.tagihan-panel-heading,
.tagihan-action-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.detail-tagihan-status-row > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.detail-tagihan-info-grid,
.detail-tagihan-money-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.detail-tagihan-money-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.detail-tagihan-info-grid > div,
.detail-tagihan-money-grid > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #f8fafc;
}

.detail-tagihan-info-grid span,
.detail-tagihan-money-grid span {
    display: block;
    color: #667085;
    font-size: 9px;
    font-weight: 750;
}

.detail-tagihan-info-grid strong,
.detail-tagihan-money-grid strong {
    display: block;
    margin-top: 6px;
    color: #101828;
    font-size: 13px;
}

.detail-tagihan-money-grid strong {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.detail-tagihan-money-grid .paid strong {
    color: #067647;
}

.detail-tagihan-money-grid .outstanding {
    border-color: #fda29b;
    background: #fff5f4;
}

.detail-tagihan-money-grid .outstanding strong {
    color: #b42318;
}

.detail-tagihan-note {
    margin-top: 13px;
    padding: 13px;
    border: 1px solid #b2ccff;
    border-radius: 12px;
    background: #f5f8ff;
}

.detail-tagihan-note span {
    color: #1849a9;
    font-size: 9px;
    font-weight: 850;
}

.detail-tagihan-note p {
    margin: 5px 0 0;
    color: #344054;
    font-size: 11px;
    line-height: 1.55;
}

.tagihan-panel-heading {
    margin-bottom: 14px;
}

.tagihan-panel-heading h3 {
    margin: 5px 0 0;
    color: #101828;
    font-size: 20px;
}

.tagihan-panel-heading > span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 8px;
    font-weight: 800;
}

.tagihan-item-list,
.tagihan-timeline,
.tagihan-payment-history-list {
    display: grid;
    gap: 9px;
}

.tagihan-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fbfcfe;
}

.tagihan-item-row > div:first-child {
    min-width: 0;
}

.tagihan-item-row span,
.tagihan-item-row strong,
.tagihan-item-row small {
    display: block;
}

.tagihan-item-row > div:first-child span {
    color: #667085;
    font-size: 9px;
    font-weight: 750;
}

.tagihan-item-row > div:first-child strong {
    margin-top: 4px;
    color: #101828;
    font-size: 12px;
}

.tagihan-item-row > div:first-child small {
    margin-top: 4px;
    color: #6941c6;
    font-size: 9px;
}

.tagihan-item-calculation {
    flex: 0 0 auto;
    text-align: right;
}

.tagihan-item-calculation span {
    color: #667085;
    font-size: 9px;
}

.tagihan-item-calculation strong {
    margin-top: 5px;
    color: #1849a9;
    font-size: 13px;
}

.tagihan-timeline-item {
    display: grid;
    grid-template-columns:
        40px
        minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fbfcfe;
}

.tagihan-timeline-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf4ff;
    color: #1849a9;
    line-height: 0;
}

.tagihan-timeline-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.tagihan-timeline-item > div > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.tagihan-timeline-item strong {
    color: #101828;
    font-size: 11px;
}

.tagihan-timeline-item span {
    color: #667085;
    font-size: 9px;
}

.tagihan-timeline-item p {
    margin: 5px 0;
    color: #475467;
    font-size: 10px;
    line-height: 1.5;
}

.tagihan-timeline-item small {
    color: #667085;
    font-size: 8px;
}

.detail-tagihan-side {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 15px;
}

.tagihan-action-card-heading {
    justify-content: flex-start;
    margin-bottom: 15px;
}

.tagihan-action-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ecfdf3;
    color: #067647;
    line-height: 0;
}

.tagihan-action-icon.secondary {
    background: #edf4ff;
    color: #1849a9;
}

.tagihan-action-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.tagihan-action-card-heading h3 {
    margin: 5px 0 0;
    color: #101828;
    font-size: 17px;
}

.tagihan-full-action {
    width: 100%;
    min-height: 48px;
}

.tagihan-paid-card {
    text-align: center;
}

.tagihan-paid-card > span {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    border-radius: 14px;
    background: #dcfae6;
    color: #067647;
}

.tagihan-paid-card strong {
    display: block;
    color: #067647;
    font-size: 15px;
}

.tagihan-paid-card p,
.tagihan-no-payment {
    margin: 6px 0 0;
    color: #667085;
    font-size: 10px;
    line-height: 1.5;
}

.tagihan-payment-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #e4e7ec;
}

.tagihan-payment-history-item:last-child {
    border-bottom: 0;
}

.tagihan-payment-history-item strong {
    display: block;
    color: #067647;
    font-size: 12px;
}

.tagihan-payment-history-item span,
.tagihan-payment-history-item small {
    color: #667085;
    font-size: 8px;
}

@media screen and (max-width: 920px) {
    .tagihan-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .tagihan-search-field {
        grid-column: span 2;
    }

    .detail-tagihan-layout {
        grid-template-columns: 1fr;
    }

    .detail-tagihan-side {
        position: static;
    }

    .detail-tagihan-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 699px) {
    .tagihan-desktop-table {
        display: none;
    }

    .tagihan-mobile-list {
        display: grid;
        gap: 11px;
    }

    .tagihan-filter-form {
        grid-template-columns: 1fr;
    }

    .tagihan-search-field {
        grid-column: span 1;
    }

    .tagihan-mobile-card {
        overflow: hidden;
        border: 1px solid #dce3ed;
        border-radius: 15px;
        background: #ffffff;
    }

    .tagihan-mobile-card-head,
    .tagihan-mobile-customer,
    .tagihan-mobile-meta,
    .tagihan-mobile-actions {
        padding: 13px;
    }

    .tagihan-mobile-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 9px;
        border-bottom: 1px solid #e4e7ec;
    }

    .tagihan-mobile-card-head a {
        color: #1849a9;
        font-size: 12px;
        font-weight: 850;
        text-decoration: none;
    }

    .tagihan-mobile-card-head small {
        display: block;
        margin-top: 4px;
        color: #667085;
        font-size: 9px;
    }

    .tagihan-mobile-customer span,
    .tagihan-mobile-customer strong,
    .tagihan-mobile-customer small {
        display: block;
    }

    .tagihan-mobile-customer span {
        color: #667085;
        font-size: 8px;
        font-weight: 750;
    }

    .tagihan-mobile-customer strong {
        margin-top: 4px;
        color: #101828;
        font-size: 13px;
    }

    .tagihan-mobile-customer small {
        margin-top: 3px;
        color: #667085;
        font-size: 9px;
    }

    .tagihan-mobile-values {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        border-top: 1px solid #e4e7ec;
        border-bottom: 1px solid #e4e7ec;
    }

    .tagihan-mobile-values > div {
        min-width: 0;
        padding: 11px 8px;
        border-right: 1px solid #e4e7ec;
    }

    .tagihan-mobile-values > div:last-child {
        border-right: 0;
    }

    .tagihan-mobile-values span,
    .tagihan-mobile-values strong {
        display: block;
    }

    .tagihan-mobile-values span {
        color: #667085;
        font-size: 8px;
    }

    .tagihan-mobile-values strong {
        margin-top: 5px;
        overflow: hidden;
        color: #101828;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tagihan-mobile-values .outstanding {
        background: #fff5f4;
    }

    .tagihan-mobile-values .outstanding strong {
        color: #b42318;
    }

    .tagihan-mobile-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 9px;
        color: #667085;
        font-size: 9px;
    }

    .tagihan-mobile-actions {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 7px;
        border-top: 1px solid #e4e7ec;
    }

    .tagihan-mobile-actions form {
        display: contents;
    }

    .tagihan-mobile-actions .button {
        width: 100%;
        min-height: 44px;
        padding: 0 7px;
        font-size: 10px;
    }

    .detail-tagihan-info-grid,
    .detail-tagihan-money-grid {
        grid-template-columns: 1fr;
    }

    .tagihan-item-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .tagihan-item-calculation {
        width: 100%;
        text-align: left;
    }
}


/* =========================================================
   SPAREPART PC — FONT LEBIH BESAR & AKSI ICON
========================================================= */

@media screen and (min-width: 1181px) {
    .sparepart-desktop-data-table thead th {
        font-size: 12px;
        font-weight: 900;
    }

    .sparepart-row td {
        height: 102px;
        padding: 15px 14px;
        font-size: 14px;
    }

    .product-list-photo {
        width: 70px;
        height: 70px;
        flex: 0 0 70px;
        border-radius: 13px;
    }

    .sparepart-desktop-data-table .product-cell strong {
        font-size: 16px;
        line-height: 1.38;
        -webkit-line-clamp: 2;
    }

    .sparepart-desktop-data-table .product-cell span {
        font-size: 12px;
        line-height: 1.4;
    }

    .sparepart-desktop-data-table .product-cell small {
        font-size: 10px;
        line-height: 1.4;
    }

    .sparepart-desktop-data-table .table-pill {
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
        font-weight: 850;
    }

    .sparepart-col-stock-cell .badge {
        min-width: 66px;
        min-height: 36px;
        font-size: 12px;
        font-weight: 900;
    }

    .sparepart-col-stock-cell .table-subtext {
        font-size: 10px;
        line-height: 1.4;
    }

    .sparepart-col-buy-cell .price-text,
    .sparepart-col-general-price-cell .price-text,
    .sparepart-col-customer-price-cell .price-text,
    .sparepart-col-margin-cell .profit-text {
        font-size: 15px;
        font-weight: 900;
        line-height: 1.35;
    }

    .sparepart-col-margin-cell .table-subtext {
        font-size: 10px;
        line-height: 1.4;
    }

    .sparepart-action-buttons {
        gap: 8px;
    }

    .sparepart-icon-action {
        width: 42px;
        min-width: 42px !important;
        height: 42px;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .sparepart-icon-action .ui-icon {
        width: 18px;
        height: 18px;
    }
}

@media screen and (min-width: 1450px) {
    .sparepart-row td {
        height: 108px;
    }

    .product-list-photo {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }

    .sparepart-desktop-data-table .product-cell strong {
        font-size: 17px;
    }

    .sparepart-col-buy-cell .price-text,
    .sparepart-col-general-price-cell .price-text,
    .sparepart-col-customer-price-cell .price-text,
    .sparepart-col-margin-cell .profit-text {
        font-size: 16px;
    }
}


/* =========================================================
   PENJUALAN.PHP — DAFTAR PENJUALAN MODE PC
========================================================= */

.penjualan-desktop-table {
    display: none;
}

@media screen and (min-width: 1181px) {
    .penjualan-list-panel {
        padding: 27px;
        overflow: hidden;
        border-radius: 21px;
    }

    .penjualan-list-header {
        margin-bottom: 18px;
    }

    .penjualan-list-header h3 {
        margin-top: 7px;
        font-size: 26px;
        line-height: 1.2;
    }

    .penjualan-list-header p {
        margin-top: 6px;
        font-size: 13px;
    }

    .sales-history-filter-return {
        grid-template-columns:
            minmax(300px, 1fr)
            minmax(170px, 190px)
            minmax(175px, 205px)
            minmax(145px, 165px)
            minmax(145px, 165px)
            auto
            auto;
        gap: 10px;
        margin-bottom: 21px;
    }

    .sales-history-filter-return input,
    .sales-history-filter-return select,
    .sales-history-filter-return .button {
        min-height: 48px;
        border-radius: 11px;
        font-size: 14px;
    }

    .penjualan-desktop-table {
        display: block;
    }

    .penjualan-card-list {
        display: none;
    }

    .penjualan-table-scroll {
        overflow-x: auto;
        border: 1px solid #dce3ed;
        border-radius: 16px;
        background: #ffffff;
    }

    .penjualan-data-table {
        width: 100%;
        min-width: 980px;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }

    .penjualan-data-table thead th {
        height: 48px;
        padding: 0 14px;
        border-bottom: 1px solid #dce3ed;
        background: #ffffff;
        color: #475467;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .04em;
        line-height: 1.2;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .penjualan-data-table thead th:first-child {
        padding-left: 18px;
    }

    .penjualan-data-table thead th:last-child {
        padding-right: 18px;
    }

    .penjualan-col-nota { width: 17%; }
    .penjualan-col-customer { width: 20%; }
    .penjualan-col-cashier { width: 15%; }
    .penjualan-col-total { width: 15%; }
    .penjualan-col-status { width: 19%; }
    .penjualan-col-action { width: 14%; }

    .penjualan-table-row td {
        height: 82px;
        padding: 14px;
        border-bottom: 1px solid #e4e7ec;
        background: #ffffff;
        color: #344054;
        font-size: 14px;
        vertical-align: middle;
    }

    .penjualan-table-row:last-child td {
        border-bottom: 0;
    }

    .penjualan-table-row:hover td {
        background: #f8fbff;
    }

    .penjualan-nota-cell {
        padding-left: 18px !important;
    }

    .penjualan-nota-number,
    .penjualan-customer-cell strong,
    .penjualan-cashier-cell strong,
    .penjualan-total-cell strong {
        display: block;
    }

    .penjualan-nota-number {
        overflow: hidden;
        color: #175cd3;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.3;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .penjualan-nota-number:hover {
        color: #155eef;
        text-decoration: underline;
    }

    .penjualan-nota-cell small {
        display: block;
        margin-top: 5px;
        color: #667085;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.35;
    }

    .penjualan-customer-cell strong,
    .penjualan-cashier-cell strong {
        overflow: hidden;
        color: #101828;
        font-size: 15px;
        font-weight: 850;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .penjualan-total-cell strong {
        color: #101828;
        font-size: 16px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .penjualan-status-cell .sale-transaction-status {
        min-height: 33px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
    }

    .penjualan-action-cell {
        padding-right: 14px !important;
    }

    .penjualan-open-button {
        min-width: 102px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 16px;
        border: 1px solid #b2ccff;
        border-radius: 12px;
        background: #f8fbff;
        color: #175cd3;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
    }

    .penjualan-open-button:hover {
        border-color: #84adff;
        background: #edf4ff;
        color: #155eef;
    }

    .penjualan-desktop-empty {
        min-height: 230px;
        border: 1px solid #dce3ed;
        border-radius: 15px;
    }
}

@media screen and (min-width: 1450px) {
    .penjualan-data-table {
        min-width: 1020px;
    }

    .penjualan-table-row td {
        height: 86px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .penjualan-nota-number,
    .penjualan-customer-cell strong,
    .penjualan-cashier-cell strong {
        font-size: 16px;
    }

    .penjualan-total-cell strong {
        font-size: 17px;
    }
}

@media screen and (max-width: 1180px) {
    .penjualan-desktop-table {
        display: none;
    }

    .penjualan-card-list {
        display: grid;
    }
}


/* =========================================================
   PENJUALAN PC — FINAL: TABEL SAJA, KARTU KHUSUS TABLET/HP
========================================================= */

@media screen and (min-width: 1181px) {
    .penjualan-desktop-table {
        display: block !important;
    }

    .penjualan-card-list {
        display: none !important;
    }

    .penjualan-list-panel {
        width: 100%;
        min-width: 0;
        padding: 28px;
    }

    .penjualan-list-header {
        margin-bottom: 19px;
    }

    .sales-history-filter-return {
        width: 100%;
        grid-template-columns:
            minmax(300px, 1fr)
            minmax(170px, 190px)
            minmax(180px, 205px)
            minmax(150px, 165px)
            minmax(150px, 165px)
            auto
            auto;
        gap: 10px;
        align-items: center;
    }

    .sales-history-filter-return input,
    .sales-history-filter-return select {
        min-height: 48px;
        border: 1px solid #c7d0dd;
        border-radius: 11px;
        background: #ffffff;
        color: #101828;
        font-size: 14px;
    }

    .sales-history-filter-return input:focus,
    .sales-history-filter-return select:focus {
        border-color: #528bff;
        outline: 0;
        box-shadow:
            0 0 0 4px
            rgba(21, 94, 239, .10);
    }

    .sales-history-filter-return .button {
        min-height: 48px;
        padding: 0 17px;
        border-radius: 11px;
        font-size: 14px;
        white-space: nowrap;
    }

    .penjualan-table-scroll {
        width: 100%;
        overflow-x: auto;
        border: 1px solid #d8e0ec;
        border-radius: 16px;
        background: #ffffff;
    }

    .penjualan-data-table {
        width: 100%;
        min-width: 980px;
    }

    .penjualan-data-table thead th {
        height: 49px;
        padding-right: 17px;
        padding-left: 17px;
    }

    .penjualan-table-row td {
        height: 84px;
        padding-right: 17px;
        padding-left: 17px;
    }

    .penjualan-nota-number {
        font-size: 16px;
    }

    .penjualan-nota-cell small {
        font-size: 11px;
    }

    .penjualan-customer-cell strong,
    .penjualan-cashier-cell strong {
        font-size: 15px;
    }

    .penjualan-total-cell strong {
        font-size: 17px;
    }

    .penjualan-status-cell
    .sale-transaction-status {
        min-height: 34px;
        padding: 0 12px;
        font-size: 11px;
    }

    .penjualan-open-button {
        min-width: 104px;
        min-height: 43px;
        border-radius: 12px;
        font-size: 14px;
    }
}

@media screen and (min-width: 700px) and (max-width: 1180px) {
    .penjualan-desktop-table {
        display: none !important;
    }

    .penjualan-card-list {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 699px) {
    .penjualan-desktop-table {
        display: none !important;
    }

    .penjualan-card-list {
        display: grid !important;
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   STATUS PEMBAYARAN LEBIH MENONJOL
========================================================= */

.penjualan-status-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.penjualan-payment-badge,
.dashboard-payment-badge {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    white-space: nowrap;
}

.penjualan-payment-badge.paid,
.dashboard-payment-badge.paid {
    background: #dcfae6;
    color: #067647;
}

.penjualan-payment-badge.unpaid,
.dashboard-payment-badge.unpaid {
    background: #fee4e2;
    color: #b42318;
}

.penjualan-method-meta,
.dashboard-method-meta {
    color: #667085;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.dashboard-payment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

@media screen and (min-width: 1181px) {
    .penjualan-payment-badge {
        min-height: 28px;
        padding: 0 12px;
        font-size: 11px;
    }
}


/* =========================================================
   PENJUALAN.PHP DESKTOP DISAMAKAN DENGAN DASHBOARD
========================================================= */

@media screen and (min-width: 1181px) {
    .penjualan-list-panel {
        padding: 26px;
        overflow: hidden;
        border: 1px solid #e4e7ec;
        border-radius: 22px;
        background: #ffffff;
        box-shadow:
            0 8px 24px
            rgba(16, 24, 40, .04);
    }

    .penjualan-list-header {
        margin-bottom: 16px;
    }

    .penjualan-list-header h3 {
        margin-top: 6px;
        font-size: 26px;
        line-height: 1.2;
    }

    .penjualan-list-header p {
        margin-top: 6px;
        font-size: 13px;
    }

    .sales-history-filter-return {
        grid-template-columns:
            minmax(320px, 1fr)
            minmax(175px, 190px)
            minmax(185px, 205px)
            minmax(145px, 160px)
            minmax(145px, 160px)
            auto
            auto;
        gap: 10px;
        align-items: center;
        margin-bottom: 20px;
    }

    .sales-history-filter-return input,
    .sales-history-filter-return select,
    .sales-history-filter-return .button {
        min-height: 48px;
        border-radius: 11px;
        font-size: 14px;
    }

    .penjualan-table-scroll {
        overflow-x: auto;
        border: 1px solid #dce3ed;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: none;
    }

    .penjualan-data-table {
        width: 100%;
        min-width: 980px;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }

    .penjualan-data-table thead th {
        height: 48px;
        padding: 0 17px;
        border-bottom: 1px solid #dce3ed;
        background: #ffffff;
        color: #475467;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .04em;
        line-height: 1.2;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .penjualan-col-nota {
        width: 21%;
    }

    .penjualan-col-customer {
        width: 22%;
    }

    .penjualan-col-cashier {
        width: 16%;
    }

    .penjualan-col-total {
        width: 15%;
    }

    .penjualan-col-status {
        width: 16%;
    }

    .penjualan-col-action {
        width: 10%;
    }

    .penjualan-table-row td {
        height: 86px;
        padding: 14px 17px;
        border-bottom: 1px solid #e4e7ec;
        background: #ffffff;
        color: #344054;
        font-size: 14px;
        vertical-align: middle;
    }

    .penjualan-table-row:last-child td {
        border-bottom: 0;
    }

    .penjualan-table-row:hover td {
        background: #f8fbff;
    }

    .penjualan-nota-cell {
        padding-left: 18px !important;
    }

    .penjualan-nota-number {
        display: block;
        overflow: hidden;
        color: #1849a9;
        font-size: 15px;
        font-weight: 850;
        line-height: 1.35;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .penjualan-nota-number:hover {
        color: #155eef;
        text-decoration: underline;
    }

    .penjualan-nota-cell small {
        display: block;
        margin-top: 4px;
        color: #667085;
        font-size: 11px;
        font-weight: 650;
        line-height: 1.35;
        white-space: nowrap;
    }

    .penjualan-customer-cell strong,
    .penjualan-cashier-cell strong,
    .penjualan-total-cell strong {
        display: block;
    }

    .penjualan-customer-cell strong {
        overflow: hidden;
        color: #101828;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .penjualan-cashier-cell strong {
        color: #344054;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
    }

    .penjualan-total-cell strong {
        color: #101828;
        font-size: 16px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        line-height: 1.3;
        white-space: nowrap;
    }

    .penjualan-status-cell .badge {
        min-height: 31px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 11px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    .penjualan-status-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
    }

    .penjualan-payment-badge {
        min-height: 28px;
        padding: 0 10px;
        font-size: 10px;
        font-weight: 900;
    }

    .penjualan-method-meta {
        color: #667085;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
    }

    .penjualan-action-cell {
        padding-right: 18px !important;
    }

    .penjualan-dashboard-open {
        min-height: 40px;
        min-width: 94px;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 12px;
    }

    .penjualan-dashboard-open .ui-icon {
        width: 15px;
        height: 15px;
    }
}

@media screen and (min-width: 1450px) {
    .penjualan-data-table {
        min-width: 1040px;
    }

    .penjualan-table-row td {
        height: 88px;
    }

    .penjualan-nota-number,
    .penjualan-customer-cell strong {
        font-size: 16px;
    }

    .penjualan-cashier-cell strong {
        font-size: 15px;
    }

    .penjualan-total-cell strong {
        font-size: 17px;
    }
}


/* =========================================================
   FILTER PENJUALAN — PROFESIONAL & FLEKSIBEL
========================================================= */

.penjualan-filter-toolbar {
    width: 100%;
    display: grid;
    align-items: stretch;
    gap: 10px;
}

.penjualan-filter-search {
    min-width: 0;
}

.penjualan-filter-search input {
    width: 100%;
    min-height: 58px;
    padding-left: 45px;
    border: 1px solid #c7d0dd;
    border-radius: 13px;
    background: #ffffff;
    color: #101828;
    font-size: 15px;
    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .035);
}

.penjualan-filter-search input::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.penjualan-filter-search input:hover {
    border-color: #98a2b3;
}

.penjualan-filter-search input:focus {
    border-color: #528bff;
    outline: 0;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .10);
}

.penjualan-filter-search
.search-icon-slot {
    left: 15px;
    color: #667085;
}

.penjualan-filter-field,
.penjualan-date-field {
    min-width: 0;
    min-height: 58px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 6px 11px 5px;
    border: 1px solid #c7d0dd;
    border-radius: 13px;
    background: #ffffff;
    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .035);
    cursor: pointer;
}

.penjualan-filter-field:hover,
.penjualan-date-field:hover {
    border-color: #98a2b3;
}

.penjualan-filter-field:focus-within,
.penjualan-date-field:focus-within {
    border-color: #528bff;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .10);
}

.penjualan-filter-field > span,
.penjualan-date-field > span {
    display: block;
    margin-bottom: 1px;
    color: #667085;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .045em;
    line-height: 1.2;
    text-transform: uppercase;
}

.penjualan-filter-field select,
.penjualan-date-field input {
    width: 100%;
    min-width: 0;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    color: #101828;
    font-size: 14px !important;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none !important;
}

.penjualan-filter-field select {
    padding-right: 23px !important;
    cursor: pointer;
}

.penjualan-date-field input {
    cursor: pointer;
}

.penjualan-date-range {
    min-width: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.penjualan-date-separator {
    color: #98a2b3;
    font-size: 15px;
    font-weight: 800;
}

.penjualan-filter-actions {
    display: grid;
    grid-template-columns:
        auto
        auto;
    align-items: stretch;
    gap: 8px;
}

.penjualan-filter-actions .button {
    min-height: 58px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 850;
    white-space: nowrap;
}

.penjualan-filter-actions .ui-icon {
    width: 16px;
    height: 16px;
}

.penjualan-reset-filter {
    min-width: 88px;
}

/*
|--------------------------------------------------------------------------
| PC BESAR — SATU BARIS
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1400px) {
    .penjualan-filter-toolbar {
        grid-template-columns:
            minmax(310px, 1.55fr)
            minmax(170px, .72fr)
            minmax(180px, .78fr)
            minmax(320px, 1.22fr)
            auto;
    }
}

/*
|--------------------------------------------------------------------------
| PC KECIL — DUA BARIS AGAR TIDAK SEMPIT
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1181px) and (max-width: 1399px) {
    .penjualan-filter-toolbar {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .penjualan-filter-search {
        grid-column: span 2;
    }

    .penjualan-date-range {
        grid-column: span 3;
    }

    .penjualan-filter-actions {
        grid-column: span 1;
    }

    .penjualan-filter-actions .button {
        padding-right: 11px;
        padding-left: 11px;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET / IPAD
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 700px) and (max-width: 1180px) {
    .penjualan-filter-toolbar {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .penjualan-filter-search,
    .penjualan-date-range,
    .penjualan-filter-actions {
        grid-column: span 2 !important;
    }

    .penjualan-filter-search input {
        min-height: 54px;
        font-size: 16px;
    }

    .penjualan-filter-field,
    .penjualan-date-field {
        min-height: 54px;
    }

    .penjualan-filter-actions .button {
        min-height: 52px !important;
    }
}

/*
|--------------------------------------------------------------------------
| HP
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 699px) {
    .penjualan-filter-toolbar {
        grid-template-columns:
            1fr !important;
        gap: 9px;
    }

    .penjualan-filter-search,
    .penjualan-date-range,
    .penjualan-filter-actions {
        grid-column: span 1 !important;
    }

    .penjualan-filter-search input {
        min-height: 52px;
        font-size: 16px;
    }

    .penjualan-filter-field,
    .penjualan-date-field {
        min-height: 54px;
    }

    .penjualan-filter-field select,
    .penjualan-date-field input {
        font-size: 16px !important;
    }

    .penjualan-date-range {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .penjualan-date-separator {
        display: none;
    }

    .penjualan-filter-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .penjualan-filter-actions .button {
        width: 100%;
        min-height: 50px !important;
        padding: 0 10px;
    }
}

@media screen and (max-width: 380px) {
    .penjualan-filter-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   TAGIHAN BULANAN — BANYAK NOTA DALAM SATU REKAP
========================================================= */

.tagihan-toolbar-actions,
.monthly-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.action-button.monthly {
    border-color: #d6bbfb;
    background: #f9f5ff;
    color: #6941c6;
}

.monthly-overdue-summary {
    border-color: #fda29b;
    background: #fff5f4;
}

.monthly-overdue-summary strong {
    color: #b42318;
}

.monthly-billing-filter {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(190px, 230px)
        auto
        auto;
    gap: 10px;
    margin-bottom: 19px;
}

.monthly-billing-filter input,
.monthly-billing-filter select,
.monthly-billing-filter .button {
    min-height: 48px;
}

.monthly-billing-desktop-table {
    overflow-x: auto;
    border: 1px solid #dce3ed;
    border-radius: 16px;
    background: #ffffff;
}

.monthly-billing-table {
    width: 100%;
    min-width: 1120px;
    table-layout: fixed;
}

.monthly-billing-table thead th {
    height: 49px;
    padding: 0 14px;
    color: #475467;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.monthly-billing-table td {
    height: 82px;
    padding: 14px;
    vertical-align: middle;
}

.monthly-customer-cell strong,
.monthly-customer-cell small {
    display: block;
}

.monthly-customer-cell strong {
    color: #101828;
    font-size: 14px;
    font-weight: 850;
}

.monthly-customer-cell small {
    margin-top: 5px;
    color: #667085;
    font-size: 10px;
}

.monthly-period {
    color: #1849a9;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.monthly-invoice-count {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #edf4ff;
    color: #1849a9;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.monthly-money,
.monthly-paid,
.monthly-outstanding {
    font-size: 14px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.monthly-paid {
    color: #067647;
}

.monthly-outstanding {
    color: #b42318;
}

.monthly-open-button {
    min-height: 40px;
    font-size: 11px;
}

.monthly-billing-mobile-list {
    display: none;
}

/*
|--------------------------------------------------------------------------
| DETAIL REKAP BULANAN
|--------------------------------------------------------------------------
*/

.monthly-statement {
    display: grid;
    gap: 18px;
}

.monthly-statement-header,
.monthly-invoice-panel,
.monthly-activity-panel {
    padding: 22px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #ffffff;
    box-shadow:
        0 7px 20px
        rgba(16, 24, 40, .045);
}

.monthly-statement-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.monthly-statement-header h1 {
    margin: 6px 0 0;
    color: #101828;
    font-size: 27px;
    line-height: 1.2;
}

.monthly-statement-header p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 12px;
}

.monthly-statement-status {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.monthly-statement-status.paid {
    background: #dcfae6;
    color: #067647;
}

.monthly-statement-status.unpaid {
    background: #fef0c7;
    color: #b54708;
}

.monthly-statement-status.overdue {
    background: #fee4e2;
    color: #b42318;
}

.monthly-statement-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.monthly-statement-summary > div {
    min-height: 93px;
    padding: 16px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;
}

.monthly-statement-summary span,
.monthly-statement-summary strong {
    display: block;
}

.monthly-statement-summary span {
    color: #667085;
    font-size: 10px;
    font-weight: 750;
}

.monthly-statement-summary strong {
    margin-top: 8px;
    color: #101828;
    font-size: 19px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.monthly-statement-summary strong.paid {
    color: #067647;
}

.monthly-statement-summary .outstanding {
    border-color: #fda29b;
    background: #fff5f4;
}

.monthly-statement-summary .outstanding strong {
    color: #b42318;
}

.monthly-detail-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, 390px);
    gap: 18px;
    align-items: start;
}

.monthly-detail-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.monthly-detail-side {
    position: sticky;
    top: 100px;
}

.monthly-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    margin-bottom: 16px;
}

.monthly-panel-heading h3 {
    margin: 5px 0 0;
    color: #101828;
    font-size: 21px;
    line-height: 1.25;
}

.monthly-panel-heading > span {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.monthly-invoice-table-wrap {
    overflow-x: auto;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
}

.monthly-invoice-table {
    min-width: 940px;
}

.monthly-invoice-table th {
    height: 45px;
    font-size: 10px;
}

.monthly-invoice-table td {
    height: 69px;
    font-size: 11px;
}

.monthly-note-number {
    color: #1849a9;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.monthly-note-money,
.monthly-note-paid,
.monthly-note-outstanding {
    font-size: 12px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.monthly-note-paid {
    color: #067647;
}

.monthly-note-outstanding {
    color: #b42318;
}

.monthly-payment-card {
    padding: 21px;
}

.monthly-allocation-note {
    margin-bottom: 14px;
    padding: 11px 12px;
    border: 1px solid #b2ccff;
    border-radius: 11px;
    background: #f5f8ff;
    color: #1849a9;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}

.monthly-billing-card {
    overflow: hidden;
    border: 1px solid #dce3ed;
    border-radius: 15px;
    background: #ffffff;
}

.monthly-billing-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid #e4e7ec;
}

.monthly-billing-card-head span,
.monthly-billing-card-head strong,
.monthly-billing-card-head small {
    display: block;
}

.monthly-billing-card-head > div > span {
    color: #1849a9;
    font-size: 9px;
    font-weight: 850;
}

.monthly-billing-card-head strong {
    margin-top: 5px;
    color: #101828;
    font-size: 14px;
}

.monthly-billing-card-head small {
    margin-top: 4px;
    color: #667085;
    font-size: 9px;
}

.monthly-billing-card-values {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.monthly-billing-card-values > div {
    min-width: 0;
    padding: 12px 9px;
    border-right: 1px solid #e4e7ec;
}

.monthly-billing-card-values > div:last-child {
    border-right: 0;
}

.monthly-billing-card-values span,
.monthly-billing-card-values strong {
    display: block;
}

.monthly-billing-card-values span {
    color: #667085;
    font-size: 8px;
}

.monthly-billing-card-values strong {
    margin-top: 5px;
    overflow: hidden;
    color: #101828;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-billing-card-values strong.paid {
    color: #067647;
}

.monthly-billing-card-values strong.outstanding {
    color: #b42318;
}

.monthly-billing-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 12px 14px;
    border-top: 1px solid #e4e7ec;
}

@media screen and (max-width: 1180px) {
    .monthly-detail-layout {
        grid-template-columns: 1fr;
    }

    .monthly-detail-side {
        position: static;
    }

    .monthly-billing-desktop-table {
        display: none;
    }

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

@media screen and (max-width: 900px) {
    .monthly-billing-filter {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .monthly-billing-filter
    .responsive-search-input {
        grid-column: span 2;
    }

    .monthly-statement-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 699px) {
    .tagihan-toolbar-actions,
    .monthly-detail-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .tagihan-toolbar-actions .button,
    .monthly-detail-actions .button,
    .monthly-detail-actions form,
    .monthly-detail-actions form .button {
        width: 100%;
    }

    .monthly-billing-filter {
        grid-template-columns: 1fr;
    }

    .monthly-billing-filter
    .responsive-search-input {
        grid-column: span 1;
    }

    .monthly-billing-mobile-list {
        grid-template-columns: 1fr;
    }

    .monthly-statement-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 17px 15px;
    }

    .monthly-statement-header h1 {
        font-size: 22px;
    }

    .monthly-statement-summary {
        display: flex;
        gap: 10px;
        margin-right: -10px;
        padding-right: 10px;
        overflow-x: auto;
        scroll-snap-type:
            x mandatory;
        scrollbar-width: none;
    }

    .monthly-statement-summary::-webkit-scrollbar {
        display: none;
    }

    .monthly-statement-summary > div {
        min-width: 175px;
        flex: 0 0 72%;
        scroll-snap-align: start;
    }

    .monthly-invoice-panel,
    .monthly-activity-panel {
        padding: 15px 13px;
    }

    .monthly-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .monthly-billing-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .monthly-billing-card-footer .button {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| CETAK REKAP BULANAN
|--------------------------------------------------------------------------
*/

@media print {
    .monthly-statement {
        display: block;
    }

    .monthly-statement-header,
    .monthly-invoice-panel {
        margin-bottom: 14px;
        padding: 14px;
        border: 1px solid #000000;
        border-radius: 0;
        box-shadow: none;
    }

    .monthly-statement-summary {
        margin-bottom: 14px;
        gap: 6px;
    }

    .monthly-statement-summary > div {
        min-height: 70px;
        padding: 10px;
        border: 1px solid #000000;
        border-radius: 0;
    }

    .monthly-statement-summary strong {
        font-size: 14px;
    }

    .monthly-detail-layout {
        display: block;
    }

    .monthly-invoice-table-wrap {
        overflow: visible;
        border: 1px solid #000000;
        border-radius: 0;
    }

    .monthly-invoice-table {
        width: 100%;
        min-width: 0;
    }

    .monthly-invoice-table th,
    .monthly-invoice-table td {
        padding: 6px;
        border-color: #000000;
        font-size: 8px;
    }
}


/* =========================================================
   FILTER TAGIHAN — PROFESIONAL & RESPONSIF
========================================================= */

.tagihan-filter-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns:
        minmax(340px, 1.45fr)
        minmax(190px, .72fr)
        minmax(190px, .72fr)
        auto;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 20px;
}

.tagihan-filter-search {
    min-width: 0;
}

.tagihan-filter-search input {
    width: 100%;
    min-height: 58px;
    padding:
        0
        16px
        0
        46px;
    border: 1px solid #c7d0dd;
    border-radius: 13px;
    background: #ffffff;
    color: #101828;
    font-size: 15px;
    font-weight: 550;
    line-height: 1;
    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .035);
}

.tagihan-filter-search input::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.tagihan-filter-search input:hover {
    border-color: #98a2b3;
}

.tagihan-filter-search input:focus {
    border-color: #528bff;
    outline: 0;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .10);
}

.tagihan-filter-search
.search-icon-slot {
    left: 15px;
    color: #667085;
}

.tagihan-filter-search
.search-icon-slot
.ui-icon {
    width: 18px;
    height: 18px;
}

.tagihan-filter-field {
    min-width: 0;
    min-height: 58px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding:
        6px
        12px
        5px;
    border: 1px solid #c7d0dd;
    border-radius: 13px;
    background: #ffffff;
    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .035);
    cursor: pointer;
}

.tagihan-filter-field:hover {
    border-color: #98a2b3;
}

.tagihan-filter-field:focus-within {
    border-color: #528bff;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .10);
}

.tagihan-filter-field > span {
    display: block;
    margin-bottom: 1px;
    color: #667085;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .045em;
    line-height: 1.2;
    text-transform: uppercase;
}

.tagihan-filter-field select {
    width: 100%;
    min-width: 0;
    min-height: 30px !important;
    padding:
        0
        24px
        0
        0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    color: #101828;
    font-size: 14px !important;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none !important;
    cursor: pointer;
}

.tagihan-filter-actions {
    display: grid;
    grid-template-columns:
        auto
        auto;
    align-items: stretch;
    gap: 8px;
}

.tagihan-filter-actions .button {
    min-height: 58px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding:
        0
        16px;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 850;
    white-space: nowrap;
}

.tagihan-filter-actions .ui-icon {
    width: 16px;
    height: 16px;
}

.tagihan-reset-filter {
    min-width: 88px;
}

/*
|--------------------------------------------------------------------------
| PC MENENGAH
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1181px) and (max-width: 1370px) {
    .tagihan-filter-toolbar {
        grid-template-columns:
            minmax(300px, 1.25fr)
            minmax(175px, .72fr)
            minmax(175px, .72fr)
            auto;
    }

    .tagihan-filter-actions .button {
        padding:
            0
            12px;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET / IPAD
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 700px) and (max-width: 1180px) {
    .tagihan-filter-toolbar {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 10px;
    }

    .tagihan-filter-search,
    .tagihan-filter-actions {
        grid-column: span 2;
    }

    .tagihan-filter-search input {
        min-height: 54px;
        font-size: 16px;
    }

    .tagihan-filter-field {
        min-height: 54px;
    }

    .tagihan-filter-field select {
        font-size: 16px !important;
    }

    .tagihan-filter-actions .button {
        min-height: 52px !important;
    }
}

/*
|--------------------------------------------------------------------------
| HP
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 699px) {
    .tagihan-filter-toolbar {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .tagihan-filter-search,
    .tagihan-filter-actions {
        grid-column: span 1;
    }

    .tagihan-filter-search input {
        min-height: 52px;
        padding-left: 44px;
        font-size: 16px;
    }

    .tagihan-filter-field {
        min-height: 54px;
    }

    .tagihan-filter-field select {
        font-size: 16px !important;
    }

    .tagihan-filter-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .tagihan-filter-actions .button {
        width: 100%;
        min-height: 50px !important;
        padding:
            0
            10px;
    }
}

@media screen and (max-width: 380px) {
    .tagihan-filter-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SIDEBAR ACTIVE LEBIH JELAS
========================================================= */

.menu-link {
    position: relative;
}

.menu-link > span:last-child {
    letter-spacing: .01em;
    transition:
        color .2s ease,
        opacity .2s ease,
        transform .2s ease,
        font-size .2s ease,
        font-weight .2s ease;
}

.menu-link .menu-icon {
    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.menu-link .menu-icon .ui-icon,
.menu-link .menu-icon svg {
    transition:
        transform .2s ease,
        opacity .2s ease;
}

.menu-link.active {
    background:
        linear-gradient(
            135deg,
            #2d6df6 0%,
            #155eef 100%
        );
    color: #ffffff;
    box-shadow:
        0 12px 26px
        rgba(21, 94, 239, .28);
}

.menu-link.active::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
}

.menu-link.active > span:last-child {
    color: #ffffff;
    font-size: 15px;
    font-weight: 850;
    text-shadow:
        0 1px 0
        rgba(0, 0, 0, .08);
}

.menu-link.active .menu-icon {
    background:
        rgba(255, 255, 255, .18);
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .16),
        0 6px 14px
        rgba(11, 33, 84, .18);
    transform: scale(1.03);
}

.menu-link.active .menu-icon .ui-icon,
.menu-link.active .menu-icon svg {
    opacity: 1;
    transform: scale(1.04);
}

.menu-link:hover > span:last-child {
    color: #ffffff;
}

.sidebar .menu-link:not(.active) > span:last-child {
    opacity: .98;
}

@media screen and (max-width: 1180px) {
    .menu-link.active > span:last-child {
        font-size: 14.5px;
    }
}

@media screen and (max-width: 699px) {
    .menu-link.active::before {
        left: 7px;
        top: 9px;
        bottom: 9px;
    }

    .menu-link.active > span:last-child {
        font-size: 14px;
    }
}


/* =========================================================
   KASIR.PHP — PENYEMPURNAAN FINAL PC, TABLET, IPAD & HP
========================================================= */

.cashier-layout-refined {
    margin-bottom: 20px;
}

.cashier-clear-button {
    gap: 6px;
}

.cashier-clear-button .ui-icon {
    width: 15px;
    height: 15px;
}

.cashier-product-card {
    cursor: pointer;
}

.cashier-product-card:focus-visible {
    border-color: #528bff;
    outline: 0;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .12),
        0 12px 24px
        rgba(21, 94, 239, .08);
}

.cashier-product-stock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 11px !important;
    padding: 7px 9px;
    border-radius: 9px;
    background: #f2f4f7;
}

.cashier-product-stock span,
.cashier-product-stock strong {
    display: block;
}

.cashier-product-stock span {
    color: #667085;
    font-size: 9px;
    font-weight: 750;
}

.cashier-product-stock strong {
    color: #344054;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.cashier-remove-item svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cashier-remove-item:hover {
    border-color: #fda29b;
    background: #fee4e2;
    color: #912018;
}

.cashier-quantity-control button:hover {
    background: #edf4ff;
}

.cashier-quantity-control button:focus-visible,
.cashier-remove-item:focus-visible,
.cashier-add-product:focus-visible {
    outline: 3px solid rgba(21, 94, 239, .20);
    outline-offset: 1px;
}

/*
|--------------------------------------------------------------------------
| MODE PC
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1181px) {
    .cashier-page-toolbar {
        min-height: 126px;
        padding: 23px 26px;
        border-radius: 20px;
    }

    .cashier-toolbar-copy h2 {
        margin-top: 7px;
        font-size: 29px;
        letter-spacing: -.02em;
    }

    .cashier-toolbar-copy p {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.5;
    }

    .cashier-today-summary {
        min-width: 164px;
        padding: 11px 15px;
    }

    .cashier-today-summary strong {
        font-size: 13px;
    }

    .cashier-today-summary small {
        font-size: 12px;
    }

    .cashier-history-button {
        min-height: 48px;
        padding: 0 15px;
        font-size: 13px;
    }

    .cashier-layout-refined {
        grid-template-columns:
            minmax(0, 1.62fr)
            minmax(400px, .78fr);
        gap: 20px;
    }

    .cashier-catalog-panel {
        padding: 25px;
        border-radius: 20px;
    }

    .cashier-cart-panel {
        max-height:
            calc(100vh - 112px);
        padding: 24px;
        overflow-y: auto;
        border-radius: 20px;
        scrollbar-width: thin;
        scrollbar-color:
            #c7d0dd
            transparent;
    }

    .cashier-cart-panel::-webkit-scrollbar {
        width: 7px;
    }

    .cashier-cart-panel::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #c7d0dd;
    }

    .cashier-buyer-header {
        margin-bottom: 18px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e4e7ec;
    }

    .cashier-buyer-header h3 {
        font-size: 23px;
    }

    .cashier-buyer-header p {
        max-width: 650px;
        font-size: 12px;
    }

    .cashier-price-mode {
        min-height: 34px;
        padding: 0 12px;
        font-size: 10px;
    }

    .cashier-customer-row {
        margin-bottom: 22px;
    }

    .cashier-customer-row label {
        font-size: 13px;
    }

    .cashier-select-shell select,
    .cashier-add-customer {
        min-height: 50px;
        font-size: 14px;
    }

    .cashier-product-search {
        padding: 18px;
        border-radius: 16px;
    }

    .cashier-search-heading label {
        font-size: 15px;
    }

    .cashier-search-input-wrap input {
        min-height: 54px;
        font-size: 16px;
    }

    .cashier-search-submit {
        width: 54px;
        min-width: 54px !important;
        min-height: 54px;
    }

    .cashier-search-help small {
        font-size: 11px;
    }

    .cashier-product-feedback {
        min-height: 22px;
        margin-top: 11px;
        font-size: 11px;
    }

    .cashier-product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 6px;
    }

    .cashier-product-card {
        min-height: 292px;
        border-radius: 16px;
    }

    .cashier-product-photo {
        height: 132px;
    }

    .cashier-product-content {
        padding: 15px;
    }

    .cashier-product-code {
        font-size: 11px;
    }

    .cashier-product-content h4 {
        min-height: 44px;
        margin: 8px 0 10px;
        font-size: 15px;
        line-height: 1.45;
    }

    .cashier-product-stock {
        margin-bottom: 12px !important;
    }

    .cashier-product-stock span {
        font-size: 10px;
    }

    .cashier-product-stock strong {
        font-size: 11px;
    }

    .cashier-product-price {
        font-size: 18px;
        font-weight: 900;
    }

    .cashier-product-price-type {
        margin-top: 4px;
        font-size: 10px;
    }

    .cashier-add-product {
        top: 112px;
        right: 12px;
        width: 42px;
        height: 42px;
    }

    .cashier-add-product svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .cashier-cart-list {
        max-height: min(38vh, 430px);
    }

    .cashier-cart-item-info strong {
        font-size: 15px;
    }

    .cashier-cart-item-info small {
        font-size: 11px;
    }

    .cashier-total-box {
        margin-top: 17px;
    }

    .cashier-payment-form {
        padding-top: 3px;
    }

    .cashier-payment-form select,
    .cashier-payment-form textarea,
    .cashier-payment-form
    > .form-group
    > input {
        min-height: 48px;
    }
}

/*
|--------------------------------------------------------------------------
| MONITOR BESAR
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1500px) {
    .cashier-layout-refined {
        grid-template-columns:
            minmax(0, 1.72fr)
            minmax(420px, .78fr);
    }

    .cashier-product-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .cashier-product-card {
        min-height: 300px;
    }

    .cashier-product-photo {
        height: 138px;
    }

    .cashier-product-content h4 {
        font-size: 15px;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET LANDSCAPE / IPAD PRO
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 921px) and (max-width: 1180px) {
    .cashier-layout-refined {
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(340px, .88fr);
        gap: 15px;
    }

    .cashier-catalog-panel,
    .cashier-cart-panel {
        padding: 18px;
    }

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

    .cashier-product-card {
        min-height: 274px;
    }

    .cashier-product-photo {
        height: 122px;
    }

    .cashier-product-content h4 {
        font-size: 14px;
    }

    .cashier-product-price {
        font-size: 17px;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET PORTRAIT / IPAD MINI
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 700px) and (max-width: 920px) {
    .cashier-layout-refined {
        grid-template-columns: 1fr;
    }

    .cashier-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .cashier-product-card {
        min-height: 270px;
    }

    .cashier-product-photo {
        height: 120px;
    }

    .cashier-cart-panel {
        position: static;
    }

    .cashier-cart-list {
        max-height: 440px;
    }
}

/*
|--------------------------------------------------------------------------
| HP
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 699px) {
    .cashier-page-toolbar {
        padding: 18px 15px;
    }

    .cashier-toolbar-copy h2 {
        font-size: 24px;
    }

    .cashier-catalog-panel,
    .cashier-cart-panel {
        padding: 15px 13px;
        border-radius: 17px;
    }

    .cashier-buyer-header h3,
    .cashier-cart-header h3 {
        font-size: 20px;
    }

    .cashier-customer-row {
        margin-bottom: 17px;
    }

    .cashier-select-shell select,
    .cashier-add-customer {
        min-height: 50px;
        font-size: 16px;
    }

    .cashier-product-search {
        padding: 14px 12px;
    }

    .cashier-search-heading label {
        font-size: 14px;
    }

    .cashier-search-control {
        grid-template-columns:
            minmax(0, 1fr)
            52px !important;
        gap: 8px;
    }

    .cashier-search-submit {
        width: 52px !important;
        min-width: 52px !important;
        min-height: 52px;
    }

    .cashier-search-input-wrap input {
        min-height: 52px;
        font-size: 16px;
    }

    .cashier-search-help small {
        font-size: 10px;
    }

    .cashier-product-grid {
        gap: 10px;
    }

    .cashier-product-card {
        min-height: 248px;
    }

    .cashier-product-photo {
        height: 108px;
    }

    .cashier-product-content {
        padding: 12px;
    }

    .cashier-product-content h4 {
        min-height: 40px;
        margin: 6px 0 8px;
        font-size: 13px;
        line-height: 1.45;
    }

    .cashier-product-stock {
        padding: 6px 8px;
    }

    .cashier-product-price {
        font-size: 15px;
    }

    .cashier-add-product {
        top: 91px;
        right: 9px;
        width: 38px;
        height: 38px;
    }

    .cashier-clear-button {
        min-height: 36px;
        padding: 0 9px;
    }

    .cashier-cart-item {
        padding: 15px 0;
    }

    .cashier-cart-item-info strong {
        white-space: normal;
    }

    .cashier-remove-item {
        width: 36px;
        height: 36px;
    }

    .cashier-quantity-control {
        grid-template-columns:
            40px
            54px
            40px;
    }

    .cashier-quantity-control button,
    .cashier-quantity-control input {
        height: 40px;
    }

    .cashier-submit-button {
        min-height: 54px;
        font-size: 15px;
    }
}

/*
|--------------------------------------------------------------------------
| HP KECIL
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 430px) {
    .cashier-search-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .cashier-product-grid {
        grid-template-columns: 1fr;
    }

    .cashier-product-card {
        min-height: 142px;
        display: grid;
        grid-template-columns:
            112px
            minmax(0, 1fr);
    }

    .cashier-product-photo {
        width: 112px;
        height: 100%;
        min-height: 142px;
        border-right: 1px solid #e4e7ec;
        border-bottom: 0;
    }

    .cashier-product-content {
        padding:
            12px
            48px
            12px
            12px;
    }

    .cashier-product-content h4 {
        min-height: 0;
        -webkit-line-clamp: 2;
    }

    .cashier-product-stock {
        margin-bottom: 8px !important;
    }

    .cashier-product-price {
        font-size: 14px;
    }

    .cashier-add-product {
        top: 50%;
        right: 9px;
        transform: translateY(-50%);
    }

    .cashier-add-product:active {
        transform:
            translateY(-50%)
            scale(.96);
    }

    .cashier-cart-header {
        align-items: flex-start;
    }

    .cashier-clear-button span {
        display: none;
    }

    .cashier-clear-button {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }

    .cashier-cart-item-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .cashier-quantity-control {
        align-self: flex-start;
    }

    .cashier-cart-item-total {
        align-self: flex-end;
        font-size: 15px;
    }
}


/* =========================================================
   PENGATURAN APLIKASI LENGKAP
========================================================= */

.sidebar-brand-logo.has-image,
.login-brand-logo.has-image {
    overflow: hidden;
    padding: 0;
    background: #ffffff;
}

.sidebar-brand-logo img,
.login-brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.sidebar-brand > div:last-child {
    min-width: 0;
}

.sidebar-brand > div:last-child strong {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.login-brand-logo {
    width: 72px;
    height: 72px;
    border-radius: 19px;
}

.login-brand-panel h1 {
    max-width: 460px;
    overflow-wrap: anywhere;
}

.receipt-store-logo {
    width: auto;
    max-width: 54mm;
    height: auto;
    max-height: 18mm;
    display: block;
    margin: 0 auto 8px;
    object-fit: contain;
}

.settings-workspace {
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 8px 24px
        rgba(16, 24, 40, .045);
}

.settings-subnav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid #e4e7ec;
    background: #f8fafc;
}

.settings-subnav-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #ffffff;
    color: #475467;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.settings-subnav-button:hover {
    border-color: #84adff;
    color: #1849a9;
}

.settings-subnav-button.active {
    border-color: #155eef;
    background: #155eef;
    color: #ffffff;
    box-shadow:
        0 7px 16px
        rgba(21, 94, 239, .20);
}

.settings-subnav-button .ui-icon {
    width: 17px;
    height: 17px;
}

.settings-form {
    min-width: 0;
}

.settings-tab-panel {
    display: none;
    padding: 25px;
}

.settings-tab-panel.active {
    display: block;
}

.settings-panel-heading {
    margin-bottom: 20px;
}

.settings-panel-heading h3 {
    margin: 6px 0 0;
    color: #101828;
    font-size: 23px;
    line-height: 1.25;
}

.settings-panel-heading p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}

.settings-logo-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 22px;
    padding: 17px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #f8fafc;
}

.settings-logo-preview {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.settings-logo-box {
    width: 104px;
    height: 86px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px dashed #98a2b3;
    border-radius: 14px;
    background: #ffffff;
    color: #667085;
}

.settings-logo-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.settings-logo-box > span {
    line-height: 0;
}

.settings-logo-box .ui-icon {
    width: 30px;
    height: 30px;
}

.settings-logo-box small {
    margin-top: -22px;
    font-size: 9px;
}

.settings-logo-preview > div:last-child {
    min-width: 0;
}

.settings-logo-preview strong {
    display: block;
    color: #101828;
    font-size: 15px;
}

.settings-logo-preview p {
    max-width: 520px;
    margin: 6px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}

.settings-logo-control {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 9px;
}

.settings-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.settings-upload-button {
    cursor: pointer;
}

.settings-remove-logo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #b42318;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

.settings-remove-logo input {
    width: 16px;
    height: 16px;
    accent-color: #d92d20;
}

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

.settings-span-2 {
    grid-column: span 2;
}

.settings-form-grid input,
.settings-form-grid textarea {
    min-height: 50px;
    font-size: 14px;
}

.settings-form-grid textarea {
    min-height: 96px;
    resize: vertical;
}

.paper-option-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.paper-option-card {
    position: relative;
    min-height: 210px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 18px;
    border: 1px solid #d0d5dd;
    border-radius: 16px;
    background: #ffffff;
    text-align: center;
    cursor: pointer;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.paper-option-card:hover {
    border-color: #84adff;
    transform: translateY(-2px);
}

.paper-option-card:has(input:checked) {
    border-color: #155eef;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .10);
}

.paper-option-card input {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    accent-color: #155eef;
}

.paper-option-visual {
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border: 2px solid #b2ccff;
    border-radius: 6px;
    background: #f5f8ff;
    color: #1849a9;
    font-size: 14px;
    font-weight: 900;
}

.paper-option-visual.thermal-58 {
    width: 54px;
    height: 90px;
}

.paper-option-visual.thermal-80 {
    width: 70px;
    height: 90px;
}

.paper-option-visual.a4 {
    width: 70px;
    height: 98px;
}

.paper-option-card strong {
    color: #101828;
    font-size: 14px;
}

.paper-option-card small {
    margin-top: 7px;
    color: #667085;
    font-size: 10px;
    line-height: 1.5;
}

.settings-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid #b2ccff;
    border-radius: 13px;
    background: #f5f8ff;
    color: #1849a9;
}

.settings-info-box > .ui-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
}

.settings-info-box strong {
    display: block;
    font-size: 12px;
}

.settings-info-box p {
    margin: 5px 0 0;
    font-size: 10px;
    line-height: 1.5;
}

.login-logo-box {
    width: 96px;
    height: 96px;
    border-radius: 20px;
}

.settings-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 25px;
    border-top: 1px solid #e4e7ec;
    background: rgba(255, 255, 255, .96);
    box-shadow:
        0 -8px 22px
        rgba(16, 24, 40, .05);
    backdrop-filter: blur(10px);
}

.settings-save-bar > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 10px;
    font-weight: 650;
}

.settings-save-bar > div .ui-icon {
    width: 17px;
    height: 17px;
    color: #067647;
}

.settings-save-button {
    min-height: 48px;
    padding: 0 18px;
}

@media screen and (max-width: 900px) {
    .settings-logo-layout {
        grid-template-columns: 1fr;
    }

    .settings-logo-control {
        align-items: flex-start;
    }

    .paper-option-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 699px) {
    .settings-page-toolbar .button {
        width: 100%;
    }

    .settings-subnav {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .settings-subnav::-webkit-scrollbar {
        display: none;
    }

    .settings-subnav-button {
        flex: 0 0 auto;
        min-width: 160px;
        scroll-snap-align: start;
    }

    .settings-tab-panel {
        padding: 18px 14px;
    }

    .settings-logo-preview {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-logo-box {
        width: 100%;
        height: 130px;
    }

    .login-logo-box {
        width: 120px;
        height: 120px;
    }

    .settings-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-span-2 {
        grid-column: span 1;
    }

    .settings-form-grid input,
    .settings-form-grid textarea {
        font-size: 16px;
    }

    .paper-option-grid {
        grid-template-columns: 1fr;
    }

    .paper-option-card {
        min-height: 170px;
        display: grid;
        grid-template-columns:
            90px
            minmax(0, 1fr);
        align-content: center;
        column-gap: 14px;
        text-align: left;
    }

    .paper-option-visual {
        grid-row: span 2;
        margin: 0 auto;
    }

    .paper-option-card strong,
    .paper-option-card small {
        align-self: end;
    }

    .paper-option-card small {
        align-self: start;
    }

    .settings-save-bar {
        align-items: stretch;
        flex-direction: column;
        padding: 13px 14px;
    }

    .settings-save-bar > div {
        display: none;
    }

    .settings-save-button {
        width: 100%;
    }
}

@media print {
    .receipt-store-logo {
        max-height: 16mm;
        margin-bottom: 5px;
    }

    body.paper-size-a4 .receipt-paper {
        padding: 8mm !important;
        font-family:
            ui-sans-serif,
            system-ui,
            -apple-system,
            "Segoe UI",
            sans-serif;
    }

    body.paper-size-a4 .receipt-header > strong {
        font-size: 20px;
    }

    body.paper-size-a4 .receipt-header p,
    body.paper-size-a4 .receipt-meta p,
    body.paper-size-a4 .receipt-item-calc,
    body.paper-size-a4 .receipt-totals p,
    body.paper-size-a4 .receipt-footer p {
        font-size: 11px;
    }
}


/* =========================================================
   SUB-SETTING UCAPAN DI BAWAH NOTA
========================================================= */

.receipt-message-settings {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #e4e7ec;
}

.receipt-message-heading {
    margin-bottom: 16px;
}

.receipt-message-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(250px, 330px);
    gap: 18px;
    align-items: start;
}

.receipt-message-fields small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 10px;
    line-height: 1.45;
}

.receipt-message-preview {
    padding: 15px;
    border: 1px solid #dce3ed;
    border-radius: 15px;
    background: #f8fafc;
}

.receipt-message-paper {
    max-width: 245px;
    min-height: 270px;
    margin: 11px auto 0;
    padding: 21px 17px;
    border: 1px solid #d0d5dd;
    border-radius: 5px;
    background: #ffffff;
    box-shadow:
        0 9px 20px
        rgba(16, 24, 40, .08);
    text-align: center;
}

.receipt-message-paper > div {
    height: 7px;
    margin-bottom: 9px;
    border-radius: 999px;
    background: #eaecf0;
}

.receipt-message-paper > div:nth-child(1) {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}

.receipt-message-paper > div:nth-child(2) {
    width: 100%;
}

.receipt-message-paper > div:nth-child(3) {
    width: 84%;
}

.receipt-message-paper hr {
    margin: 74px 0 17px;
    border: 0;
    border-top: 1px dashed #98a2b3;
}

.receipt-message-paper strong {
    display: block;
    color: #101828;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.receipt-message-paper p {
    margin: 8px 0 0;
    color: #475467;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size: 10px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 900px) {
    .receipt-message-layout {
        grid-template-columns: 1fr;
    }

    .receipt-message-preview {
        max-width: 420px;
    }
}

@media screen and (max-width: 699px) {
    .receipt-message-settings {
        margin-top: 18px;
        padding-top: 18px;
    }

    .receipt-message-preview {
        max-width: none;
    }

    .receipt-message-paper {
        max-width: 270px;
    }
}


/* =========================================================
   DASHBOARD STOK MENIPIS DAPAT DIKLIK
========================================================= */

.stock-item-link {
    position: relative;
    margin: 0 -10px;
    padding-right: 10px !important;
    padding-left: 10px !important;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition:
        background-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.stock-item-link:hover {
    background: #f5f8ff;
    box-shadow:
        inset 0 0 0 1px
        #b2ccff;
    transform: translateY(-1px);
}

.stock-item-link:focus-visible {
    outline: 0;
    background: #f5f8ff;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .12),
        inset 0 0 0 1px
        #528bff;
}

.stock-item-link strong {
    color: #101828;
}

.stock-item-link:hover strong {
    color: #1849a9;
}

.stock-update-hint {
    display: block;
    margin-top: 6px;
    color: #1849a9;
    font-size: 9px;
    font-weight: 800;
    opacity: .8;
}

.stock-item-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-edit-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid !important;
    place-items: center;
    margin-top: 0 !important;
    border: 1px solid #b2ccff;
    border-radius: 10px;
    background: #edf4ff;
    color: #1849a9 !important;
}

.stock-edit-icon .ui-icon {
    width: 16px;
    height: 16px;
}

.stock-item-link:hover
.stock-edit-icon {
    border-color: #84adff;
    background: #dbeafe;
    color: #155eef !important;
}

.stock-update-target {
    position: relative;
    padding: 14px;
    border: 1px solid #84adff;
    border-radius: 13px;
    background: #f5f8ff;
    box-shadow:
        0 0 0 4px
        rgba(21, 94, 239, .08);
}

.stock-update-target label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.stock-update-label {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #155eef;
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
}

.stock-update-target input {
    border-color: #528bff;
    background: #ffffff;
    font-size: 18px;
    font-weight: 850;
}

.stock-update-help {
    display: block;
    margin-top: 7px;
    color: #1849a9;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.45;
}

@media screen and (max-width: 699px) {
    .stock-item-link {
        margin-right: -5px;
        margin-left: -5px;
        padding-right: 7px !important;
        padding-left: 7px !important;
    }

    .stock-update-hint {
        font-size: 8px;
    }

    .stock-edit-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .stock-update-target {
        padding: 12px;
    }
}

/* =========================================================
   PEMILIK BARANG & BAGI HASIL
========================================================= */

.owner-settings-content {
    padding: 24px;
}

.owner-default-card,
.owner-form-card,
.owner-list-card {
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(16, 24, 40, .045);
}

.owner-default-card {
    padding: 20px;
    margin-bottom: 18px;
}

.owner-section-heading h3 {
    margin: 6px 0 0;
    color: #101828;
    font-size: 21px;
}

.owner-section-heading p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 11px;
}

.owner-default-form {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 40px minmax(170px, 220px) auto;
    align-items: end;
    gap: 12px;
    margin-top: 16px;
}

.owner-default-form label > span,
.owner-form label {
    color: #344054;
    font-size: 12px;
    font-weight: 750;
}

.owner-percent-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    overflow: hidden;
    margin-top: 7px;
    border: 1px solid #d0d5dd;
    border-radius: 11px;
    background: #ffffff;
}

.owner-percent-input:focus-within {
    border-color: #528bff;
    box-shadow: 0 0 0 4px rgba(21, 94, 239, .10);
}

.owner-percent-input input {
    min-width: 0;
    min-height: 46px;
    padding: 0 12px;
    border: 0 !important;
    outline: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 800;
    box-shadow: none !important;
}

.owner-percent-input > span {
    display: grid;
    place-items: center;
    border-left: 1px solid #e4e7ec;
    background: #f8fafc;
    color: #475467;
    font-size: 13px;
    font-weight: 850;
}

.owner-percent-input.readonly {
    background: #f8fafc;
}

.owner-split-arrow {
    height: 46px;
    display: grid;
    place-items: center;
    color: #98a2b3;
}

.owner-split-arrow .ui-icon {
    width: 19px;
    height: 19px;
    transform: rotate(180deg);
}

.owner-management-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.owner-form-card,
.owner-list-card {
    padding: 20px;
}

.owner-form {
    display: grid;
    gap: 14px;
    margin-top: 17px;
}

.owner-form input[type="text"] {
    min-height: 48px;
}

.owner-live-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.owner-live-split > div {
    padding: 12px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #f8fafc;
}

.owner-live-split span,
.owner-live-split strong {
    display: block;
}

.owner-live-split span {
    color: #667085;
    font-size: 9px;
}

.owner-live-split strong {
    margin-top: 5px;
    color: #101828;
    font-size: 16px;
}

.owner-active-toggle {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #475467 !important;
    font-size: 11px !important;
    line-height: 1.45;
    cursor: pointer;
}

.owner-active-toggle input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: #155eef;
}

.owner-form-actions {
    margin-top: 2px;
}

.owner-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.owner-list-item {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.2fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fbfcfe;
}

.owner-list-item.inactive {
    opacity: .62;
}

.owner-list-main,
.owner-name-row,
.owner-list-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.owner-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e0eaff;
    color: #1849a9;
    font-size: 17px;
    font-weight: 900;
}

.owner-list-main strong {
    color: #101828;
    font-size: 13px;
}

.owner-list-main small {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 9px;
}

.owner-system-badge,
.owner-inactive-badge {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
}

.owner-system-badge {
    background: #dcfae6;
    color: #067647;
}

.owner-inactive-badge {
    background: #fee4e2;
    color: #b42318;
}

.owner-list-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.owner-list-split > div {
    min-width: 0;
    padding: 9px;
    border-radius: 10px;
    background: #ffffff;
}

.owner-list-split span,
.owner-list-split strong {
    display: block;
}

.owner-list-split span {
    color: #667085;
    font-size: 8px;
}

.owner-list-split strong {
    margin-top: 4px;
    overflow: hidden;
    color: #101828;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-list-actions .action-button {
    min-height: 36px;
    gap: 5px;
}

.owner-list-actions .ui-icon {
    width: 14px;
    height: 14px;
}

.owner-product-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 7px;
    padding: 9px 11px;
    border: 1px solid #b2ccff;
    border-radius: 10px;
    background: #f5f8ff;
    color: #475467;
    font-size: 10px;
}

.owner-product-preview strong {
    color: #1849a9;
}

.owner-profit-simulation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.owner-profit-simulation > div {
    padding: 13px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #f8fafc;
}

.owner-profit-simulation > div:nth-child(2) {
    border-color: #d6bbfb;
    background: #f9f5ff;
}

.owner-profit-simulation > div:nth-child(3) {
    border-color: #abefc6;
    background: #ecfdf3;
}

.owner-profit-simulation span,
.owner-profit-simulation strong {
    display: block;
}

.owner-profit-simulation span {
    color: #667085;
    font-size: 9px;
}

.owner-profit-simulation strong {
    margin-top: 6px;
    color: #101828;
    font-size: 15px;
}

.sparepart-owner-cell strong,
.sparepart-owner-cell small {
    display: block;
}

.sparepart-owner-cell strong {
    color: #101828;
    font-size: 11px;
    font-weight: 850;
}

.sparepart-owner-cell small {
    margin-top: 5px;
    color: #667085;
    font-size: 8px;
    line-height: 1.35;
}

.mobile-owner-tag em {
    display: block;
    margin-top: 4px;
    color: #6941c6;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.sale-item-owner-profit {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 11px;
    border-top: 1px solid #e4e7ec;
    background: #fbfcfe;
}

.sale-item-owner-profit > div {
    min-width: 0;
}

.sale-item-owner-profit span,
.sale-item-owner-profit strong,
.sale-item-owner-profit small {
    display: block;
}

.sale-item-owner-profit span {
    color: #667085;
    font-size: 8px;
}

.sale-item-owner-profit strong {
    margin-top: 4px;
    overflow: hidden;
    color: #101828;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale-item-owner-profit small {
    margin-top: 3px;
    color: #6941c6;
    font-size: 8px;
}

.sale-item-owner-profit .owner-share-value {
    color: #6941c6;
}

.sale-item-owner-profit .store-share-value {
    color: #067647;
}

.owner-share-summary-card {
    border-color: #d6bbfb;
    background: #f9f5ff;
}

.owner-share-summary-card strong {
    color: #6941c6;
}

.store-share-summary-card {
    border-color: #abefc6;
    background: #ecfdf3;
}

.store-share-summary-card strong {
    color: #067647;
}

.owner-profit-report-panel {
    margin-top: 18px;
}

.owner-profit-total-badge {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #f0f9ff;
    color: #026aa2;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.owner-profit-report-list {
    display: grid;
    gap: 9px;
}

.owner-profit-report-item {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(360px, 1.4fr);
    align-items: center;
    gap: 14px;
    padding: 13px;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    background: #fbfcfe;
}

.owner-profit-report-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-owner-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 15px;
}

.owner-profit-report-name strong,
.owner-profit-report-name small {
    display: block;
}

.owner-profit-report-name strong {
    color: #101828;
    font-size: 12px;
}

.owner-profit-report-name small {
    margin-top: 4px;
    color: #667085;
    font-size: 9px;
}

.owner-profit-report-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.owner-profit-report-values > div {
    min-width: 0;
    padding: 9px;
    border-radius: 10px;
    background: #ffffff;
}

.owner-profit-report-values .owner-value {
    background: #f9f5ff;
}

.owner-profit-report-values .store-value {
    background: #ecfdf3;
}

.owner-profit-report-values span,
.owner-profit-report-values strong {
    display: block;
}

.owner-profit-report-values span {
    color: #667085;
    font-size: 8px;
}

.owner-profit-report-values strong {
    margin-top: 4px;
    overflow: hidden;
    color: #101828;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (min-width: 1181px) {
    .sparepart-desktop-data-table {
        min-width: 1450px;
    }

    .sparepart-col-product { width: 21%; }
    .sparepart-col-category { width: 7%; }
    .sparepart-col-supplier { width: 7%; }
    .sparepart-col-owner { width: 11%; }
    .sparepart-col-stock { width: 7%; }
    .sparepart-col-buy { width: 8%; }
    .sparepart-col-general-price { width: 8%; }
    .sparepart-col-customer-price { width: 9%; }
    .sparepart-col-margin { width: 8%; }
    .sparepart-col-rack { width: 6%; }
    .sparepart-col-action { width: 8%; }
}

@media screen and (max-width: 1100px) {
    .owner-management-layout {
        grid-template-columns: 1fr;
    }

    .owner-list-item {
        grid-template-columns: 1fr;
    }

    .owner-list-actions {
        justify-content: flex-end;
    }
}

@media screen and (max-width: 800px) {
    .owner-default-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .owner-split-arrow {
        display: none;
    }

    .owner-default-form .button {
        grid-column: span 2;
    }

    .owner-profit-report-item {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 699px) {
    .owner-settings-content {
        padding: 14px;
    }

    .owner-default-card,
    .owner-form-card,
    .owner-list-card {
        padding: 15px;
    }

    .owner-default-form,
    .owner-live-split,
    .owner-list-split,
    .owner-profit-simulation,
    .owner-profit-report-values {
        grid-template-columns: 1fr;
    }

    .owner-default-form .button {
        grid-column: span 1;
    }

    .owner-list-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .owner-list-actions form,
    .owner-list-actions .action-button {
        width: 100%;
    }

    .sale-item-owner-profit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   LAPORAN DATA BARANG PER PEMILIK
========================================================= */

.owner-report-toolbar-actions,
.sparepart-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.owner-report-filter-panel {
    margin-bottom: 18px;
    padding: 17px;
    border: 1px solid #e4e7ec;
    border-radius: 17px;
    background: #ffffff;
}

.owner-report-filter {
    display: grid;
    grid-template-columns:
        minmax(220px, .9fr)
        minmax(155px, .55fr)
        minmax(155px, .55fr)
        minmax(280px, 1fr)
        auto
        auto;
    gap: 9px;
    align-items: stretch;
}

.owner-report-filter-field {
    min-width: 0;
    min-height: 55px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 6px 11px;
    border: 1px solid #c7d0dd;
    border-radius: 12px;
    background: #ffffff;
}

.owner-report-filter-field > span {
    margin-bottom: 2px;
    color: #667085;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.owner-report-filter-field select,
.owner-report-filter-field input {
    width: 100%;
    min-width: 0;
    min-height: 29px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #101828;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.owner-report-search input,
.owner-report-filter > .button {
    min-height: 55px;
}

.owner-report-print-sheet {
    display: grid;
    gap: 18px;
}

.owner-report-print-header,
.owner-report-summary-section,
.owner-report-table-section {
    padding: 22px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #ffffff;
    box-shadow:
        0 7px 20px
        rgba(16, 24, 40, .04);
}

.owner-report-print-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, auto);
    gap: 22px;
    align-items: center;
}

.owner-report-store {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.owner-report-store img {
    width: 78px;
    height: 70px;
    flex: 0 0 78px;
    object-fit: contain;
}

.owner-report-store strong,
.owner-report-store span {
    display: block;
}

.owner-report-store strong {
    color: #101828;
    font-size: 18px;
    font-weight: 900;
}

.owner-report-store span {
    margin-top: 4px;
    color: #667085;
    font-size: 10px;
    line-height: 1.45;
}

.owner-report-title-block {
    text-align: right;
}

.owner-report-title-block > span {
    color: #155eef;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.owner-report-title-block h1 {
    margin: 6px 0 0;
    color: #101828;
    font-size: 25px;
    line-height: 1.2;
}

.owner-report-title-block p {
    margin: 7px 0;
    color: #667085;
    font-size: 11px;
}

.owner-report-title-block strong {
    color: #6941c6;
    font-size: 11px;
}

.owner-report-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.owner-report-section-heading h3 {
    margin: 6px 0 0;
    color: #101828;
    font-size: 21px;
}

.owner-report-section-heading > span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.owner-report-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.owner-report-summary-grid article {
    min-width: 0;
    min-height: 105px;
    padding: 15px;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    background: #f8fafc;
}

.owner-report-summary-grid span,
.owner-report-summary-grid strong,
.owner-report-summary-grid small {
    display: block;
}

.owner-report-summary-grid span {
    color: #667085;
    font-size: 9px;
    font-weight: 750;
}

.owner-report-summary-grid strong {
    margin-top: 8px;
    color: #101828;
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.owner-report-summary-grid small {
    margin-top: 7px;
    color: #667085;
    font-size: 9px;
    line-height: 1.4;
}

.owner-report-summary-grid
.owner-summary-accent {
    border-color: #abefc6;
    background: #ecfdf3;
}

.owner-report-summary-grid
.owner-summary-accent strong {
    color: #067647;
}

.owner-report-summary-grid
.store-summary-accent {
    border-color: #b2ccff;
    background: #f5f8ff;
}

.owner-report-summary-grid
.store-summary-accent strong {
    color: #1849a9;
}

.owner-report-summary-grid
.owner-summary-warning {
    border-color: #fedf89;
    background: #fffaeb;
}

.owner-report-summary-grid
.owner-summary-warning strong {
    color: #b54708;
}

.owner-report-table-scroll {
    overflow-x: auto;
    border: 1px solid #dce3ed;
    border-radius: 14px;
}

.owner-inventory-table {
    min-width: 1240px;
}

.owner-sales-table {
    min-width: 1120px;
}

.owner-transaction-table {
    min-width: 1280px;
}

.owner-report-table-section
.data-table thead th {
    height: 46px;
    padding: 0 12px;
    color: #475467;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.owner-report-table-section
.data-table td {
    height: 70px;
    padding: 11px 12px;
    color: #344054;
    font-size: 10px;
    vertical-align: middle;
}

.owner-report-product strong,
.owner-report-product span,
.owner-report-product small {
    display: block;
}

.owner-report-product strong {
    color: #101828;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.4;
}

.owner-report-product span {
    margin-top: 4px;
    color: #344054;
    font-size: 9px;
    font-weight: 700;
}

.owner-report-product small {
    margin-top: 4px;
    color: #667085;
    font-size: 8px;
}

.owner-report-product.compact strong {
    font-size: 10px;
}

.owner-report-pill {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #edf4ff;
    color: #1849a9;
    font-size: 8px;
    font-weight: 800;
}

.owner-report-stock {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}

.owner-report-stock.safe {
    background: #dcfae6;
    color: #067647;
}

.owner-report-stock.warning {
    background: #fef0c7;
    color: #b54708;
}

.owner-report-stock.danger {
    background: #fee4e2;
    color: #b42318;
}

.owner-report-money {
    color: #101828;
    font-size: 10px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.owner-report-money.sale {
    color: #1849a9;
}

.owner-report-money.customer {
    color: #6941c6;
}

.owner-report-money.owner {
    color: #067647;
}

.owner-report-money.store {
    color: #155eef;
}

.owner-report-return {
    color: #b42318 !important;
    font-weight: 850;
}

.owner-pending-text {
    color: #b54708 !important;
}

.owner-report-invoice-link {
    color: #1849a9;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
}

.owner-report-invoice-link:hover {
    text-decoration: underline;
}

.owner-report-note {
    padding: 14px 16px;
    border: 1px solid #fedf89;
    border-radius: 13px;
    background: #fffaeb;
    color: #7a2e0e;
    font-size: 10px;
    line-height: 1.6;
}

.owner-report-signatures {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 80px;
    padding: 30px 40px 10px;
}

.owner-report-signatures > div {
    min-height: 115px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    border-bottom: 1px solid #98a2b3;
    text-align: center;
}

.owner-report-signatures span {
    color: #667085;
    font-size: 10px;
}

.owner-report-signatures strong {
    margin-bottom: 8px;
    color: #101828;
    font-size: 12px;
}

.owner-report-action {
    border-color: #b2ccff;
    background: #f5f8ff;
    color: #1849a9;
}

.owner-profit-report-link {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 11px;
    padding: 0 11px;
    border: 1px solid #b2ccff;
    border-radius: 9px;
    background: #f5f8ff;
    color: #1849a9;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.owner-profit-report-link .ui-icon {
    width: 14px;
    height: 14px;
}

@media screen and (min-width: 1181px) {
    .sparepart-filter-bar {
        grid-template-columns:
            minmax(300px, 1fr)
            minmax(155px, 175px)
            minmax(170px, 195px)
            minmax(145px, 165px)
            auto
            auto !important;
    }
}

@media screen and (max-width: 1050px) {
    .owner-report-filter {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .owner-filter-owner,
    .owner-report-search {
        grid-column: span 2;
    }

    .owner-report-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 699px) {
    .owner-report-toolbar-actions,
    .sparepart-toolbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .owner-report-toolbar-actions .button,
    .sparepart-toolbar-actions .button {
        width: 100%;
    }

    .owner-report-filter {
        grid-template-columns: 1fr;
    }

    .owner-filter-owner,
    .owner-report-search {
        grid-column: span 1;
    }

    .owner-report-filter-field select,
    .owner-report-filter-field input,
    .owner-report-search input {
        font-size: 16px;
    }

    .owner-report-print-header {
        grid-template-columns: 1fr;
        padding: 16px 14px;
    }

    .owner-report-title-block {
        padding-top: 14px;
        border-top: 1px solid #e4e7ec;
        text-align: left;
    }

    .owner-report-store {
        align-items: flex-start;
    }

    .owner-report-store img {
        width: 62px;
        height: 58px;
        flex-basis: 62px;
    }

    .owner-report-summary-section,
    .owner-report-table-section {
        padding: 16px 13px;
    }

    .owner-report-section-heading {
        flex-direction: column;
    }

    .owner-report-summary-grid {
        display: flex;
        gap: 9px;
        margin-right: -13px;
        padding-right: 13px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .owner-report-summary-grid::-webkit-scrollbar {
        display: none;
    }

    .owner-report-summary-grid article {
        min-width: 185px;
        flex: 0 0 72%;
        scroll-snap-align: start;
    }

    .owner-report-signatures {
        gap: 25px;
        padding: 25px 10px 5px;
    }
}

/*
|--------------------------------------------------------------------------
| CETAK / PDF LAPORAN PEMILIK
|--------------------------------------------------------------------------
*/

@media print {
    body {
        background: #ffffff !important;
    }

    .owner-report-print-sheet {
        display: block;
    }

    .owner-report-print-header,
    .owner-report-summary-section,
    .owner-report-table-section {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #000000;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    .owner-report-print-header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, auto);
    }

    .owner-report-store img {
        width: 55px;
        height: 50px;
    }

    .owner-report-title-block h1 {
        font-size: 18px;
    }

    .owner-report-summary-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .owner-report-summary-grid article {
        min-height: 67px;
        padding: 7px;
        border-color: #000000;
        border-radius: 0;
        background: #ffffff !important;
    }

    .owner-report-summary-grid strong {
        font-size: 11px;
    }

    .owner-report-summary-grid span,
    .owner-report-summary-grid small {
        color: #000000 !important;
        font-size: 7px;
    }

    .owner-report-table-scroll {
        overflow: visible;
        border-color: #000000;
        border-radius: 0;
    }

    .owner-report-table-section
    .data-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .owner-report-table-section
    .data-table th,
    .owner-report-table-section
    .data-table td {
        height: auto;
        padding: 4px;
        border-color: #000000;
        color: #000000 !important;
        font-size: 6.5px;
        white-space: normal;
    }

    .owner-report-product strong,
    .owner-report-product span,
    .owner-report-product small,
    .owner-report-money {
        color: #000000 !important;
        font-size: 6.5px;
        white-space: normal;
    }

    .owner-report-pill,
    .owner-report-stock,
    .penjualan-payment-badge {
        min-height: 0;
        padding: 0;
        background: transparent !important;
        color: #000000 !important;
        font-size: 6.5px;
    }

    .no-print-link {
        color: #000000 !important;
        text-decoration: none;
    }

    .owner-report-note {
        border-color: #000000;
        border-radius: 0;
        background: #ffffff;
        color: #000000;
        font-size: 7px;
    }

    .owner-report-signatures {
        break-inside: avoid;
    }
}


/* =========================================================
   UI/UX MODE PC PROFESIONAL — SELURUH APLIKASI
   PC >= 1181px
   Tampilan tablet dan HP tetap menggunakan aturan sebelumnya.
========================================================= */

@media screen and (min-width: 1181px) {

    /* -----------------------------------------------------
       DESIGN TOKENS MODE PC
    ----------------------------------------------------- */

    body.app-ui-professional {
        --app-desktop-sidebar: 280px;
        --app-content-max: 1880px;
        --pc-bg: #edf2f7;
        --pc-surface: #ffffff;
        --pc-surface-soft: #f8fafc;
        --pc-surface-blue: #f5f8ff;
        --pc-border: #dce3ed;
        --pc-border-strong: #c7d0dd;
        --pc-text: #101828;
        --pc-text-soft: #344054;
        --pc-muted: #667085;
        --pc-primary: #155eef;
        --pc-primary-dark: #004eeb;
        --pc-radius-sm: 10px;
        --pc-radius-md: 14px;
        --pc-radius-lg: 20px;
        --pc-shadow-sm:
            0 2px 8px
            rgba(16, 24, 40, .035);
        --pc-shadow-card:
            0 10px 28px
            rgba(16, 24, 40, .055);
        --pc-shadow-hover:
            0 15px 34px
            rgba(16, 24, 40, .09);
        background:
            linear-gradient(
                180deg,
                #f4f7fb 0,
                var(--pc-bg) 340px
            );
        color: var(--pc-text);
        font-size: 16px;
        line-height: 1.55;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    body.app-ui-professional *,
    body.app-ui-professional *::before,
    body.app-ui-professional *::after {
        scrollbar-width: thin;
        scrollbar-color:
            #b8c3d1
            transparent;
    }

    body.app-ui-professional *::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }

    body.app-ui-professional *::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: #b8c3d1;
        background-clip: padding-box;
    }

    body.app-ui-professional *::-webkit-scrollbar-track {
        background: transparent;
    }

    body.app-ui-professional :focus-visible {
        outline: 3px solid rgba(21, 94, 239, .23);
        outline-offset: 2px;
    }

    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    body.app-ui-professional .sidebar {
        width: var(--app-desktop-sidebar);
        border-right:
            1px solid
            rgba(255, 255, 255, .055);
        background:
            linear-gradient(
                180deg,
                #0b213e 0%,
                #081b33 100%
            );
        box-shadow:
            14px 0 36px
            rgba(11, 31, 58, .12);
    }

    body.app-ui-professional .sidebar-brand {
        min-height: 92px;
        gap: 14px;
        padding: 18px 20px;
        background:
            rgba(255, 255, 255, .018);
    }

    body.app-ui-professional .sidebar-brand-logo {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        box-shadow:
            0 10px 24px
            rgba(21, 94, 239, .25);
    }

    body.app-ui-professional .sidebar-brand > div:last-child {
        min-width: 0;
    }

    body.app-ui-professional .sidebar-brand strong {
        overflow: hidden;
        color: #ffffff;
        font-size: 16px;
        font-weight: 850;
        letter-spacing: -.01em;
        line-height: 1.3;
        text-overflow: ellipsis;
    }

    body.app-ui-professional .sidebar-brand span {
        margin-top: 5px;
        color: #aebfd3;
        font-size: 11px;
        font-weight: 550;
    }

    body.app-ui-professional .sidebar-menu {
        padding: 18px 13px 22px;
    }

    body.app-ui-professional .menu-link {
        min-height: 52px;
        gap: 13px;
        margin-bottom: 6px;
        padding: 0 15px;
        border:
            1px solid
            transparent;
        border-radius: 13px;
        color: #d4deea;
        font-size: 14px;
        font-weight: 720;
        letter-spacing: -.005em;
    }

    body.app-ui-professional .menu-link:hover {
        border-color:
            rgba(255, 255, 255, .07);
        background:
            rgba(255, 255, 255, .07);
        transform: translateX(2px);
    }

    body.app-ui-professional .menu-link.active {
        border-color:
            rgba(255, 255, 255, .15);
        background:
            linear-gradient(
                135deg,
                #2d6df6 0%,
                #155eef 100%
            );
        box-shadow:
            0 12px 28px
            rgba(21, 94, 239, .28);
        transform: none;
    }

    body.app-ui-professional
    .menu-link.active::before {
        left: 7px;
        width: 3px;
    }

    body.app-ui-professional .menu-link > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-ui-professional
    .menu-link.active > span:last-child {
        font-size: 14px;
        font-weight: 850;
    }

    body.app-ui-professional .menu-icon {
        width: 29px;
        height: 29px;
        flex: 0 0 29px;
        border-radius: 9px;
        background:
            rgba(255, 255, 255, .085);
    }

    body.app-ui-professional .menu-icon .ui-icon,
    body.app-ui-professional .menu-icon svg {
        width: 19px;
        height: 19px;
    }

    body.app-ui-professional .sidebar-user {
        min-height: 86px;
        padding: 15px 17px;
        background:
            rgba(0, 0, 0, .11);
    }

    body.app-ui-professional .sidebar-user .avatar {
        width: 42px;
        height: 42px;
        box-shadow:
            0 5px 14px
            rgba(0, 0, 0, .16);
    }

    body.app-ui-professional
    .sidebar-user-text strong {
        font-size: 13px;
        font-weight: 800;
    }

    body.app-ui-professional
    .sidebar-user-text span {
        font-size: 10px;
        font-weight: 650;
        letter-spacing: .035em;
    }

    body.app-ui-professional .logout-mini {
        width: 38px;
        height: 38px;
        border:
            1px solid
            rgba(255, 255, 255, .06);
        border-radius: 11px;
    }

    body.app-ui-professional .logout-mini:hover {
        border-color:
            rgba(255, 255, 255, .13);
        background:
            rgba(255, 255, 255, .12);
        color: #ffffff;
    }

    /* -----------------------------------------------------
       MAIN LAYOUT & TOPBAR
    ----------------------------------------------------- */

    body.app-ui-professional .main-content {
        min-width: 0;
        margin-left:
            var(--app-desktop-sidebar);
    }

    body.app-ui-professional .topbar-app {
        min-height: 86px;
        padding:
            14px
            clamp(
                25px,
                2.3vw,
                38px
            );
        border-bottom:
            1px solid
            rgba(208, 213, 221, .78);
        background:
            rgba(255, 255, 255, .965);
        box-shadow:
            0 5px 18px
            rgba(16, 24, 40, .035);
        backdrop-filter: blur(15px);
    }

    body.app-ui-professional .topbar-left {
        min-width: 0;
        gap: 16px;
    }

    body.app-ui-professional .topbar-left > div {
        min-width: 0;
    }

    body.app-ui-professional .topbar-left h1 {
        overflow: hidden;
        margin: 0;
        color: var(--pc-text);
        font-size: 25px;
        font-weight: 850;
        letter-spacing: -.025em;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-ui-professional .topbar-left p {
        overflow: hidden;
        margin-top: 5px;
        color: var(--pc-muted);
        font-size: 12px;
        font-weight: 550;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-ui-professional .topbar-account {
        flex: 0 0 auto;
        gap: 10px;
    }

    body.app-ui-professional .topbar-user-name {
        min-width: 120px;
        padding-right: 3px;
        text-align: right;
    }

    body.app-ui-professional .topbar-user-name strong {
        color: var(--pc-text);
        font-size: 13px;
        font-weight: 800;
    }

    body.app-ui-professional .topbar-user-name small {
        margin-top: 2px;
        color: var(--pc-muted);
        font-size: 10px;
        font-weight: 650;
    }

    body.app-ui-professional .role-chip {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        border: 1px solid transparent;
        font-size: 10px;
    }

    body.app-ui-professional .topbar-account .button {
        min-height: 42px;
        padding: 0 16px;
        border-radius: 11px;
        font-size: 13px;
    }

    body.app-ui-professional .content-wrapper {
        width: 100%;
        max-width: var(--app-content-max);
        margin: 0 auto;
        padding:
            28px
            clamp(
                25px,
                2.35vw,
                42px
            )
            48px;
    }

    /* -----------------------------------------------------
       TYPOGRAPHY
    ----------------------------------------------------- */

    body.app-ui-professional h1,
    body.app-ui-professional h2,
    body.app-ui-professional h3,
    body.app-ui-professional h4,
    body.app-ui-professional strong {
        letter-spacing: -.015em;
    }

    body.app-ui-professional .eyebrow {
        color: var(--pc-primary);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .095em;
    }

    body.app-ui-professional .table-subtext,
    body.app-ui-professional .form-hint {
        color: var(--pc-muted);
        font-size: 11px;
        line-height: 1.45;
    }

    /* -----------------------------------------------------
       TOOLBAR HALAMAN
    ----------------------------------------------------- */

    body.app-ui-professional .page-toolbar,
    body.app-ui-professional .form-page-header {
        min-height: 114px;
        align-items: center;
        gap: 22px;
        margin-bottom: 18px;
        padding: 23px 26px;
        border:
            1px solid
            var(--pc-border);
        border-radius: var(--pc-radius-lg);
        background:
            linear-gradient(
                135deg,
                #ffffff 0%,
                #fbfdff 100%
            );
        box-shadow: var(--pc-shadow-card);
    }

    body.app-ui-professional .page-toolbar > div,
    body.app-ui-professional .form-page-header > div {
        min-width: 0;
    }

    body.app-ui-professional .page-toolbar h2,
    body.app-ui-professional .form-page-header h2 {
        margin: 6px 0 0;
        color: var(--pc-text);
        font-size: 28px;
        font-weight: 850;
        letter-spacing: -.035em;
        line-height: 1.22;
    }

    body.app-ui-professional .page-toolbar p,
    body.app-ui-professional .form-page-header p {
        max-width: 820px;
        margin: 7px 0 0;
        color: var(--pc-muted);
        font-size: 13px;
        line-height: 1.55;
    }

    body.app-ui-professional
    .page-toolbar > .button,
    body.app-ui-professional
    .page-toolbar > div:last-child .button,
    body.app-ui-professional
    .form-page-header > .button,
    body.app-ui-professional
    .desktop-primary-action {
        min-height: 46px;
        padding: 0 17px;
        font-size: 13px;
    }

    /* -----------------------------------------------------
       BUTTON
    ----------------------------------------------------- */

    body.app-ui-professional .button {
        min-height: 46px;
        padding: 0 17px;
        border-radius: 11px;
        font-size: 13px;
        font-weight: 820;
        box-shadow:
            0 3px 8px
            rgba(21, 94, 239, .08);
        transition:
            border-color .18s ease,
            background-color .18s ease,
            color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
    }

    body.app-ui-professional .button:hover {
        box-shadow:
            0 7px 15px
            rgba(21, 94, 239, .17);
        transform: translateY(-1px);
    }

    body.app-ui-professional .button:active {
        transform: translateY(0);
    }

    body.app-ui-professional .button-outline {
        border-color: var(--pc-border-strong);
        background: #ffffff;
        color: var(--pc-text-soft);
        box-shadow: var(--pc-shadow-sm);
    }

    body.app-ui-professional .button-outline:hover {
        border-color: #84adff;
        background: var(--pc-surface-blue);
        color: #1849a9;
    }

    body.app-ui-professional .button .ui-icon {
        width: 16px;
        height: 16px;
    }

    body.app-ui-professional .action-button,
    body.app-ui-professional .entity-action,
    body.app-ui-professional .mobile-action-button {
        min-height: 40px;
        padding: 0 13px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 820;
    }

    body.app-ui-professional
    .action-button .ui-icon,
    body.app-ui-professional
    .entity-action .ui-icon {
        width: 15px;
        height: 15px;
    }

    body.app-ui-professional
    .action-button.edit,
    body.app-ui-professional
    .entity-action.edit {
        border-color: #b2ccff;
        background: #f5f8ff;
        color: #1849a9;
    }

    body.app-ui-professional
    .action-button.delete,
    body.app-ui-professional
    .entity-action.delete {
        border-color: #fda29b;
        background: #fff5f4;
        color: #b42318;
    }

    /* -----------------------------------------------------
       ALERT
    ----------------------------------------------------- */

    body.app-ui-professional .alert {
        margin-bottom: 18px;
        padding: 15px 17px;
        border: 1px solid transparent;
        border-radius: 13px;
        font-size: 13px;
        font-weight: 650;
        box-shadow: var(--pc-shadow-sm);
    }

    body.app-ui-professional .alert.success {
        border-color: #abefc6;
    }

    body.app-ui-professional .alert.danger {
        border-color: #fda29b;
    }

    /* -----------------------------------------------------
       PANEL, CARD, SUMMARY
    ----------------------------------------------------- */

    body.app-ui-professional .responsive-list-panel,
    body.app-ui-professional .management-panel,
    body.app-ui-professional .report-panel,
    body.app-ui-professional .report-filter-panel,
    body.app-ui-professional .form-card,
    body.app-ui-professional .form-info-card,
    body.app-ui-professional .dashboard-panel,
    body.app-ui-professional .cashier-catalog-panel,
    body.app-ui-professional .cashier-cart-panel,
    body.app-ui-professional .tagihan-items-panel,
    body.app-ui-professional .tagihan-history-panel,
    body.app-ui-professional .tagihan-action-card,
    body.app-ui-professional .tagihan-payment-history-card,
    body.app-ui-professional .detail-tagihan-summary,
    body.app-ui-professional .sale-detail-summary,
    body.app-ui-professional .sale-items-panel,
    body.app-ui-professional .settings-workspace,
    body.app-ui-professional .owner-settings-workspace,
    body.app-ui-professional .owner-report-filter-panel,
    body.app-ui-professional .owner-report-print-header,
    body.app-ui-professional .owner-report-summary-section,
    body.app-ui-professional .owner-report-table-section {
        border-color: var(--pc-border);
        background: var(--pc-surface);
        box-shadow: var(--pc-shadow-card);
    }

    body.app-ui-professional .responsive-list-panel,
    body.app-ui-professional .management-panel,
    body.app-ui-professional .report-panel,
    body.app-ui-professional .report-filter-panel,
    body.app-ui-professional .form-card,
    body.app-ui-professional .form-info-card {
        padding: 24px;
        border-radius: var(--pc-radius-lg);
    }

    body.app-ui-professional .responsive-list-header,
    body.app-ui-professional .management-panel-header,
    body.app-ui-professional .report-panel-header {
        align-items: center;
        gap: 18px;
        margin-bottom: 19px;
    }

    body.app-ui-professional
    .responsive-list-header h3,
    body.app-ui-professional
    .management-panel-header h3,
    body.app-ui-professional
    .report-panel-header h3 {
        margin-top: 5px;
        color: var(--pc-text);
        font-size: 23px;
        font-weight: 850;
        letter-spacing: -.03em;
    }

    body.app-ui-professional
    .responsive-list-header p,
    body.app-ui-professional
    .management-panel-header p,
    body.app-ui-professional
    .report-panel-header p {
        margin-top: 5px;
        color: var(--pc-muted);
        font-size: 12px;
    }

    body.app-ui-professional .compact-summary-grid,
    body.app-ui-professional .summary-card-grid,
    body.app-ui-professional .report-summary-grid,
    body.app-ui-professional .metric-grid {
        gap: 14px;
        margin-bottom: 18px;
    }

    body.app-ui-professional .compact-summary-card,
    body.app-ui-professional .summary-mini-card,
    body.app-ui-professional .report-summary-card,
    body.app-ui-professional .metric-card {
        min-height: 112px;
        padding: 18px;
        border:
            1px solid
            var(--pc-border);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: var(--pc-shadow-sm);
        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
    }

    body.app-ui-professional .compact-summary-card:hover,
    body.app-ui-professional .summary-mini-card:hover,
    body.app-ui-professional .report-summary-card:hover,
    body.app-ui-professional .metric-card:hover {
        border-color: #b2ccff;
        box-shadow: var(--pc-shadow-card);
        transform: translateY(-2px);
    }

    body.app-ui-professional
    .compact-summary-card span,
    body.app-ui-professional
    .summary-mini-card span,
    body.app-ui-professional
    .report-summary-card span,
    body.app-ui-professional
    .metric-card span {
        color: var(--pc-muted);
        font-size: 11px;
        font-weight: 720;
    }

    body.app-ui-professional
    .compact-summary-card strong,
    body.app-ui-professional
    .summary-mini-card strong,
    body.app-ui-professional
    .report-summary-card strong,
    body.app-ui-professional
    .metric-card strong {
        margin-top: 8px;
        color: var(--pc-text);
        font-size: 25px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        line-height: 1.15;
    }

    body.app-ui-professional
    .compact-summary-card .compact-money,
    body.app-ui-professional
    .summary-mini-card .compact-money {
        font-size: 21px;
    }

    body.app-ui-professional
    .compact-summary-card small,
    body.app-ui-professional
    .summary-mini-card small,
    body.app-ui-professional
    .report-summary-card small,
    body.app-ui-professional
    .metric-card small {
        margin-top: 8px;
        color: #8490a3;
        font-size: 10px;
        line-height: 1.4;
    }

    /* -----------------------------------------------------
       FORM & INPUT
    ----------------------------------------------------- */

    body.app-ui-professional .form-card {
        max-width: 1380px;
    }

    body.app-ui-professional .form-card-narrow {
        max-width: 840px;
    }

    body.app-ui-professional .form-layout {
        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(330px, .55fr);
        gap: 22px;
    }

    body.app-ui-professional .form-grid-two,
    body.app-ui-professional .form-grid-three,
    body.app-ui-professional .settings-form-grid {
        column-gap: 20px;
        row-gap: 4px;
    }

    body.app-ui-professional .form-section-title {
        margin:
            8px
            0
            18px;
        padding-bottom: 10px;
        border-bottom:
            1px solid
            var(--pc-border);
        color: var(--pc-primary);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .065em;
        text-transform: uppercase;
    }

    body.app-ui-professional .form-group {
        margin-bottom: 18px;
    }

    body.app-ui-professional .form-group label {
        margin-bottom: 8px;
        color: var(--pc-text-soft);
        font-size: 13px;
        font-weight: 780;
    }

    body.app-ui-professional
    .form-group input,
    body.app-ui-professional
    .form-group select,
    body.app-ui-professional
    .form-group textarea,
    body.app-ui-professional
    .responsive-search-input input,
    body.app-ui-professional
    .filter-bar input,
    body.app-ui-professional
    .filter-bar select,
    body.app-ui-professional
    .report-filter-form input,
    body.app-ui-professional
    .report-filter-form select,
    body.app-ui-professional
    .sales-history-filter input,
    body.app-ui-professional
    .sales-history-filter select {
        min-height: 50px;
        border:
            1px solid
            var(--pc-border-strong);
        border-radius: 11px;
        background: #ffffff;
        color: var(--pc-text);
        font-size: 14px;
        box-shadow:
            0 1px 2px
            rgba(16, 24, 40, .025);
    }

    body.app-ui-professional
    .form-group input:hover,
    body.app-ui-professional
    .form-group select:hover,
    body.app-ui-professional
    .form-group textarea:hover,
    body.app-ui-professional
    .responsive-search-input input:hover,
    body.app-ui-professional
    .filter-bar input:hover,
    body.app-ui-professional
    .filter-bar select:hover {
        border-color: #98a2b3;
    }

    body.app-ui-professional
    .form-group input:focus,
    body.app-ui-professional
    .form-group select:focus,
    body.app-ui-professional
    .form-group textarea:focus,
    body.app-ui-professional
    .responsive-search-input input:focus,
    body.app-ui-professional
    .filter-bar input:focus,
    body.app-ui-professional
    .filter-bar select:focus {
        border-color: #528bff;
        outline: none;
        box-shadow:
            0 0 0 4px
            rgba(21, 94, 239, .10);
    }

    body.app-ui-professional .form-group textarea {
        min-height: 100px;
        padding-top: 13px;
        padding-bottom: 13px;
        line-height: 1.55;
    }

    body.app-ui-professional
    input::placeholder,
    body.app-ui-professional
    textarea::placeholder {
        color: #98a2b3;
        opacity: 1;
    }

    body.app-ui-professional .form-hint {
        margin-top: 7px;
    }

    body.app-ui-professional .form-actions {
        gap: 10px;
        padding-top: 21px;
        border-top:
            1px solid
            var(--pc-border);
    }

    body.app-ui-professional
    .form-actions .button {
        min-width: 128px;
        min-height: 46px;
    }

    body.app-ui-professional .input-action-group,
    body.app-ui-professional .select-action-group {
        gap: 8px;
    }

    body.app-ui-professional
    .select-add-button,
    body.app-ui-professional
    .button-generate-icon {
        width: 50px;
        min-width: 50px;
        height: 50px;
        border-radius: 11px;
    }

    /* -----------------------------------------------------
       FILTER BAR
    ----------------------------------------------------- */

    body.app-ui-professional .responsive-search-form,
    body.app-ui-professional .filter-bar,
    body.app-ui-professional .report-filter-form {
        gap: 9px;
        margin-bottom: 18px;
    }

    body.app-ui-professional
    .responsive-search-input {
        position: relative;
        min-width: 0;
    }

    body.app-ui-professional
    .responsive-search-input input {
        padding-left: 43px;
    }

    body.app-ui-professional
    .search-icon-slot {
        left: 14px;
        color: var(--pc-muted);
    }

    body.app-ui-professional
    .search-icon-slot .ui-icon {
        width: 17px;
        height: 17px;
    }

    body.app-ui-professional
    .filter-bar .button,
    body.app-ui-professional
    .responsive-search-form .button,
    body.app-ui-professional
    .report-filter-form .button {
        min-height: 50px;
    }

    /* -----------------------------------------------------
       TABLE
    ----------------------------------------------------- */

    body.app-ui-professional .responsive-table,
    body.app-ui-professional .penjualan-table-scroll,
    body.app-ui-professional .tagihan-desktop-table,
    body.app-ui-professional .monthly-billing-desktop-table,
    body.app-ui-professional .monthly-invoice-table-wrap,
    body.app-ui-professional .owner-report-table-scroll,
    body.app-ui-professional .dashboard-table-wrapper {
        border:
            1px solid
            var(--pc-border);
        border-radius: 15px;
        background: #ffffff;
        box-shadow:
            0 2px 7px
            rgba(16, 24, 40, .025);
    }

    body.app-ui-professional .data-table,
    body.app-ui-professional .dashboard-table {
        border-collapse: separate;
        border-spacing: 0;
        color: var(--pc-text-soft);
        font-variant-numeric: tabular-nums;
    }

    body.app-ui-professional .data-table thead th,
    body.app-ui-professional .dashboard-table thead th {
        height: 48px;
        padding: 0 14px;
        border-bottom:
            1px solid
            var(--pc-border);
        background:
            linear-gradient(
                180deg,
                #fbfcfe 0%,
                #f7f9fc 100%
            );
        color: #475467;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .055em;
        line-height: 1.25;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.app-ui-professional .data-table tbody td,
    body.app-ui-professional .dashboard-table tbody td {
        min-height: 68px;
        padding: 13px 14px;
        border-bottom:
            1px solid
            #e7ebf0;
        color: var(--pc-text-soft);
        font-size: 13px;
        line-height: 1.45;
        vertical-align: middle;
    }

    body.app-ui-professional
    .data-table tbody tr:nth-child(even) td,
    body.app-ui-professional
    .dashboard-table tbody tr:nth-child(even) td {
        background: #fcfdff;
    }

    body.app-ui-professional
    .data-table tbody tr:hover td,
    body.app-ui-professional
    .dashboard-table tbody tr:hover td {
        background: #f5f8ff;
    }

    body.app-ui-professional
    .data-table tbody tr:last-child td,
    body.app-ui-professional
    .dashboard-table tbody tr:last-child td {
        border-bottom: 0;
    }

    body.app-ui-professional .data-table strong,
    body.app-ui-professional .dashboard-table strong {
        color: var(--pc-text);
        font-weight: 820;
    }

    body.app-ui-professional .badge,
    body.app-ui-professional .report-status,
    body.app-ui-professional .sale-transaction-status,
    body.app-ui-professional .tagihan-status-badge,
    body.app-ui-professional .tagihan-due-badge,
    body.app-ui-professional .penjualan-payment-badge {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 9px;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }

    /* -----------------------------------------------------
       ENTITY CARDS: PELANGGAN, KATEGORI, SUPPLIER, PENGGUNA
    ----------------------------------------------------- */

    body.app-ui-professional .entity-card-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
        gap: 15px;
    }

    body.app-ui-professional
    .customer-entity-grid,
    body.app-ui-professional
    .user-entity-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    body.app-ui-professional .entity-card {
        min-height: 238px;
        overflow: hidden;
        border:
            1px solid
            var(--pc-border);
        border-radius: 17px;
        background: #ffffff;
        box-shadow: var(--pc-shadow-sm);
        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
    }

    body.app-ui-professional .entity-card:hover {
        border-color: #b2ccff;
        box-shadow: var(--pc-shadow-hover);
        transform: translateY(-3px);
    }

    body.app-ui-professional .entity-card-top,
    body.app-ui-professional .customer-card-header,
    body.app-ui-professional .user-card-header {
        padding:
            18px
            18px
            0;
    }

    body.app-ui-professional .entity-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    body.app-ui-professional .entity-icon .ui-icon {
        width: 23px;
        height: 23px;
    }

    body.app-ui-professional .entity-card-content {
        padding:
            15px
            18px
            18px;
    }

    body.app-ui-professional
    .entity-card-content h4,
    body.app-ui-professional
    .customer-card-header h4,
    body.app-ui-professional
    .user-card-header h4 {
        color: var(--pc-text);
        font-size: 17px;
        font-weight: 850;
        line-height: 1.35;
    }

    body.app-ui-professional
    .entity-card-content > p,
    body.app-ui-professional
    .customer-card-header p,
    body.app-ui-professional
    .user-card-header p {
        color: var(--pc-muted);
        font-size: 12px;
        line-height: 1.5;
    }

    body.app-ui-professional .entity-contact-list a,
    body.app-ui-professional .entity-contact-list p {
        color: var(--pc-text-soft);
        font-size: 13px;
    }

    body.app-ui-professional .entity-stat-grid {
        gap: 8px;
        padding: 14px 18px;
        border-top:
            1px solid
            var(--pc-border);
        border-bottom:
            1px solid
            var(--pc-border);
        background: #fafcff;
    }

    body.app-ui-professional .entity-stat-grid > div {
        min-height: 64px;
        padding: 11px;
        border-color: var(--pc-border);
        border-radius: 11px;
    }

    body.app-ui-professional .entity-stat-grid span {
        font-size: 9px;
    }

    body.app-ui-professional .entity-stat-grid strong {
        font-size: 14px;
    }

    body.app-ui-professional .entity-card-actions {
        gap: 8px;
        padding:
            14px
            18px
            18px;
    }

    /* -----------------------------------------------------
       EMPTY STATE & MODAL
    ----------------------------------------------------- */

    body.app-ui-professional .entity-empty-state,
    body.app-ui-professional .empty-state,
    body.app-ui-professional .report-empty,
    body.app-ui-professional .dashboard-empty-state {
        min-height: 230px;
        padding: 34px;
        border:
            1px dashed
            #b8c3d1;
        border-radius: 16px;
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f9fbfd 100%
            );
    }

    body.app-ui-professional .entity-empty-icon,
    body.app-ui-professional .empty-state-icon {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }

    body.app-ui-professional .app-modal {
        padding: 24px;
        backdrop-filter: blur(5px);
    }

    body.app-ui-professional .app-modal-dialog {
        width: min(720px, 100%);
        max-height: min(88vh, 880px);
        border:
            1px solid
            rgba(255, 255, 255, .65);
        border-radius: 20px;
        box-shadow:
            0 28px 70px
            rgba(16, 24, 40, .22);
    }

    body.app-ui-professional
    .app-modal-dialog.modal-small {
        width: min(520px, 100%);
    }

    body.app-ui-professional .app-modal-header {
        min-height: 70px;
        padding: 17px 20px;
        border-bottom:
            1px solid
            var(--pc-border);
    }

    body.app-ui-professional .app-modal-header h3 {
        font-size: 20px;
    }

    body.app-ui-professional .modal-close {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    /* -----------------------------------------------------
       DASHBOARD
    ----------------------------------------------------- */

    body.app-ui-professional .dashboard-page {
        display: grid;
        gap: 17px;
    }

    body.app-ui-professional .dashboard-hero {
        min-height: 188px;
        padding: 27px 30px;
        border-radius: 22px;
        box-shadow:
            0 16px 36px
            rgba(17, 69, 140, .18);
    }

    body.app-ui-professional .dashboard-hero h2 {
        margin: 8px 0 9px;
        font-size: 31px;
        letter-spacing: -.04em;
    }

    body.app-ui-professional .dashboard-hero p {
        max-width: 750px;
        font-size: 13px;
        line-height: 1.6;
    }

    body.app-ui-professional
    .dashboard-hero-actions {
        gap: 9px;
        margin-top: 18px;
    }

    body.app-ui-professional
    .dashboard-hero-actions .button {
        min-height: 46px;
    }

    body.app-ui-professional .dashboard-clock-card {
        min-width: 190px;
        padding: 17px;
        border-radius: 16px;
    }

    body.app-ui-professional .dashboard-main-grid {
        grid-template-columns:
            minmax(0, 2.12fr)
            minmax(310px, .86fr);
        gap: 17px;
        align-items: start;
    }

    body.app-ui-professional .dashboard-panel {
        border-radius: 19px;
    }

    body.app-ui-professional
    .dashboard-recent-panel {
        padding: 22px;
    }

    body.app-ui-professional
    .dashboard-panel-header h3,
    body.app-ui-professional
    .dashboard-recent-header h3 {
        font-size: 22px;
    }

    body.app-ui-professional
    .dashboard-side-stack {
        gap: 17px;
    }

    body.app-ui-professional .stock-item {
        min-height: 78px;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    body.app-ui-professional .stock-item strong {
        font-size: 13px;
    }

    body.app-ui-professional .stock-number {
        font-size: 20px;
    }

    body.app-ui-professional .inventory-value-row {
        min-height: 58px;
    }

    body.app-ui-professional .quick-action-section {
        padding-top: 2px;
    }

    body.app-ui-professional .quick-action-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
        gap: 14px;
    }

    body.app-ui-professional .quick-action-card {
        min-height: 132px;
        padding: 18px;
        border:
            1px solid
            var(--pc-border);
        border-radius: 16px;
        box-shadow: var(--pc-shadow-sm);
    }

    body.app-ui-professional .quick-action-card:hover {
        border-color: #b2ccff;
        box-shadow: var(--pc-shadow-hover);
        transform: translateY(-3px);
    }

    body.app-ui-professional .quick-action-icon {
        width: 43px;
        height: 43px;
        border-radius: 12px;
    }

    body.app-ui-professional .quick-action-card strong {
        font-size: 14px;
    }

    body.app-ui-professional .quick-action-card small {
        font-size: 10px;
    }

    /* -----------------------------------------------------
       KASIR / PENJUALAN
    ----------------------------------------------------- */

    body.app-ui-professional .cashier-page-toolbar {
        min-height: 116px;
    }

    body.app-ui-professional .cashier-layout-refined {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(400px, .76fr);
        gap: 18px;
        align-items: start;
    }

    body.app-ui-professional .cashier-catalog-panel,
    body.app-ui-professional .cashier-cart-panel {
        padding: 22px;
        border-radius: 19px;
    }

    body.app-ui-professional .cashier-cart-panel {
        top: 104px;
        max-height:
            calc(100vh - 122px);
    }

    body.app-ui-professional .cashier-section-header,
    body.app-ui-professional .cashier-cart-header,
    body.app-ui-professional .cashier-payment-heading {
        margin-bottom: 16px;
    }

    body.app-ui-professional
    .cashier-buyer-header h3,
    body.app-ui-professional
    .cashier-cart-header h3 {
        font-size: 21px;
    }

    body.app-ui-professional .cashier-product-search {
        padding: 16px;
        border-color: var(--pc-border);
        border-radius: 15px;
        background: #f9fbfd;
    }

    body.app-ui-professional
    .cashier-search-input-wrap input {
        min-height: 52px;
        font-size: 15px;
    }

    body.app-ui-professional .cashier-search-submit {
        width: 52px;
        min-width: 52px;
        min-height: 52px;
        border-radius: 12px;
    }

    body.app-ui-professional .cashier-product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
        gap: 13px;
    }

    body.app-ui-professional .cashier-product-card {
        min-height: 282px;
        border-color: var(--pc-border);
        border-radius: 16px;
        box-shadow: var(--pc-shadow-sm);
    }

    body.app-ui-professional .cashier-product-card:hover {
        border-color: #84adff;
        box-shadow: var(--pc-shadow-hover);
        transform: translateY(-3px);
    }

    body.app-ui-professional .cashier-product-photo {
        height: 126px;
        background: #f7f9fc;
    }

    body.app-ui-professional .cashier-product-content {
        padding: 14px;
    }

    body.app-ui-professional .cashier-product-content h4 {
        min-height: 42px;
        font-size: 14px;
    }

    body.app-ui-professional .cashier-product-price {
        font-size: 17px;
    }

    body.app-ui-professional .cashier-add-product {
        width: 42px;
        height: 42px;
        border:
            3px solid
            #ffffff;
        box-shadow:
            0 8px 18px
            rgba(21, 94, 239, .26);
    }

    body.app-ui-professional .cashier-cart-list {
        max-height: min(40vh, 445px);
    }

    body.app-ui-professional .cashier-cart-item {
        padding: 15px 0;
    }

    body.app-ui-professional
    .cashier-cart-item-info strong {
        font-size: 14px;
    }

    body.app-ui-professional
    .cashier-cart-item-total {
        font-size: 15px;
    }

    body.app-ui-professional .cashier-total-box {
        margin-top: 15px;
        padding: 15px;
        border-radius: 14px;
    }

    body.app-ui-professional .cashier-grand-total strong {
        font-size: 23px;
    }

    body.app-ui-professional .cashier-submit-button {
        min-height: 52px;
        font-size: 14px;
    }

    /* -----------------------------------------------------
       DATA SPAREPART
    ----------------------------------------------------- */

    body.app-ui-professional
    .sparepart-management-panel {
        padding: 23px;
    }

    body.app-ui-professional
    .sparepart-toolbar-actions {
        gap: 8px;
    }

    body.app-ui-professional
    .sparepart-filter-bar {
        gap: 8px;
    }

    body.app-ui-professional
    .sparepart-desktop-table {
        border-radius: 15px;
    }

    body.app-ui-professional
    .sparepart-desktop-data-table thead th {
        height: 49px;
        font-size: 9px;
    }

    body.app-ui-professional .sparepart-row td {
        height: 96px;
        padding:
            13px
            12px;
    }

    body.app-ui-professional .product-list-photo {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
        border-radius: 12px;
    }

    body.app-ui-professional
    .sparepart-desktop-data-table
    .product-cell strong {
        font-size: 14px;
        line-height: 1.4;
    }

    body.app-ui-professional
    .sparepart-desktop-data-table
    .product-cell span {
        font-size: 10px;
    }

    body.app-ui-professional
    .sparepart-desktop-data-table
    .product-cell small {
        font-size: 9px;
    }

    body.app-ui-professional
    .sparepart-col-buy-cell .price-text,
    body.app-ui-professional
    .sparepart-col-general-price-cell .price-text,
    body.app-ui-professional
    .sparepart-col-customer-price-cell .price-text,
    body.app-ui-professional
    .sparepart-col-margin-cell .profit-text {
        font-size: 13px;
        font-weight: 900;
    }

    body.app-ui-professional
    .sparepart-icon-action {
        width: 40px;
        min-width: 40px !important;
        height: 40px;
        min-height: 40px !important;
    }

    /* -----------------------------------------------------
       PENJUALAN & TAGIHAN
    ----------------------------------------------------- */

    body.app-ui-professional .penjualan-list-panel,
    body.app-ui-professional .tagihan-list-panel {
        padding: 23px;
    }

    body.app-ui-professional
    .penjualan-table-row td,
    body.app-ui-professional
    .tagihan-data-table td {
        height: 80px;
    }

    body.app-ui-professional .penjualan-nota-number,
    body.app-ui-professional .tagihan-customer-cell a {
        font-size: 14px;
        font-weight: 900;
    }

    body.app-ui-professional
    .penjualan-customer-cell strong,
    body.app-ui-professional
    .penjualan-cashier-cell strong,
    body.app-ui-professional
    .tagihan-customer-cell strong {
        font-size: 14px;
    }

    body.app-ui-professional
    .penjualan-total-cell strong,
    body.app-ui-professional
    .tagihan-outstanding-value {
        font-size: 16px;
        font-weight: 900;
    }

    body.app-ui-professional
    .dashboard-open-sale,
    body.app-ui-professional
    .penjualan-dashboard-open,
    body.app-ui-professional
    .monthly-open-button {
        min-height: 40px;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 11px;
    }

    body.app-ui-professional .tagihan-filter-toolbar,
    body.app-ui-professional .penjualan-filter-toolbar {
        margin-bottom: 18px;
    }

    body.app-ui-professional
    .tagihan-filter-search input,
    body.app-ui-professional
    .penjualan-filter-search input {
        min-height: 54px;
    }

    body.app-ui-professional
    .tagihan-filter-field,
    body.app-ui-professional
    .penjualan-filter-field,
    body.app-ui-professional
    .penjualan-date-field {
        min-height: 54px;
        border-radius: 12px;
    }

    body.app-ui-professional
    .tagihan-filter-actions .button,
    body.app-ui-professional
    .penjualan-filter-actions .button {
        min-height: 54px !important;
    }

    /* -----------------------------------------------------
       DETAIL PENJUALAN & DETAIL TAGIHAN
    ----------------------------------------------------- */

    body.app-ui-professional .sale-detail-layout-desktop {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(355px, .66fr);
        gap: 18px;
        align-items: start;
    }

    body.app-ui-professional .sale-detail-main-column,
    body.app-ui-professional .detail-tagihan-main {
        gap: 17px;
    }

    body.app-ui-professional .sale-detail-summary,
    body.app-ui-professional .detail-tagihan-summary,
    body.app-ui-professional .sale-items-panel,
    body.app-ui-professional .tagihan-items-panel,
    body.app-ui-professional .tagihan-history-panel {
        padding: 20px;
        border-radius: 18px;
    }

    body.app-ui-professional .sale-detail-number {
        font-size: 24px;
    }

    body.app-ui-professional
    .sale-detail-info-grid,
    body.app-ui-professional
    .detail-tagihan-info-grid,
    body.app-ui-professional
    .detail-tagihan-money-grid {
        gap: 10px;
    }

    body.app-ui-professional
    .sale-detail-info-grid > div,
    body.app-ui-professional
    .detail-tagihan-info-grid > div,
    body.app-ui-professional
    .detail-tagihan-money-grid > div {
        min-height: 76px;
        padding: 13px;
        border-color: var(--pc-border);
        border-radius: 12px;
        background: #f9fbfd;
    }

    body.app-ui-professional .sale-items-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 11px;
    }

    body.app-ui-professional .sale-item-card {
        border-color: var(--pc-border);
        border-radius: 14px;
    }

    body.app-ui-professional .receipt-preview-print {
        top: 103px;
    }

    body.app-ui-professional .receipt-paper-desktop {
        box-shadow:
            0 18px 40px
            rgba(16, 24, 40, .12);
    }

    body.app-ui-professional .detail-tagihan-layout {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(340px, .55fr);
        gap: 18px;
    }

    body.app-ui-professional .detail-tagihan-side {
        top: 103px;
    }

    /* -----------------------------------------------------
       LAPORAN
    ----------------------------------------------------- */

    body.app-ui-professional .report-filter-panel {
        padding: 19px;
    }

    body.app-ui-professional .report-two-column {
        gap: 17px;
    }

    body.app-ui-professional .report-panel {
        padding: 21px;
        border-radius: 18px;
    }

    body.app-ui-professional .report-breakdown-item,
    body.app-ui-professional .report-product-item {
        min-height: 62px;
        padding: 13px 0;
    }

    body.app-ui-professional
    .report-transaction-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
        gap: 13px;
    }

    body.app-ui-professional .report-transaction-card {
        border-color: var(--pc-border);
        border-radius: 15px;
        box-shadow: var(--pc-shadow-sm);
    }

    body.app-ui-professional .owner-profit-report-item {
        border-color: var(--pc-border);
        border-radius: 14px;
        background: #fafcff;
    }

    /* -----------------------------------------------------
       PEMILIK BARANG & LAPORAN PEMILIK
    ----------------------------------------------------- */

    body.app-ui-professional
    .owner-management-layout {
        grid-template-columns:
            minmax(340px, .56fr)
            minmax(0, 1.44fr);
        gap: 18px;
    }

    body.app-ui-professional .owner-form-card,
    body.app-ui-professional .owner-list-card,
    body.app-ui-professional .owner-default-card {
        border-color: var(--pc-border);
        border-radius: 17px;
        box-shadow: var(--pc-shadow-sm);
    }

    body.app-ui-professional .owner-list-item {
        min-height: 92px;
        padding: 14px;
        border-color: var(--pc-border);
        border-radius: 13px;
    }

    body.app-ui-professional .owner-report-filter-panel {
        padding: 16px;
        border-radius: 16px;
    }

    body.app-ui-professional .owner-report-print-sheet {
        gap: 16px;
    }

    body.app-ui-professional
    .owner-report-print-header,
    body.app-ui-professional
    .owner-report-summary-section,
    body.app-ui-professional
    .owner-report-table-section {
        padding: 20px;
        border-radius: 18px;
    }

    body.app-ui-professional
    .owner-report-summary-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
        gap: 9px;
    }

    body.app-ui-professional
    .owner-report-summary-grid article {
        min-height: 98px;
        padding: 14px;
    }

    body.app-ui-professional
    .owner-report-summary-grid strong {
        font-size: 16px;
    }

    /* -----------------------------------------------------
       PENGATURAN
    ----------------------------------------------------- */

    body.app-ui-professional .settings-workspace {
        border-radius: 20px;
        overflow: hidden;
    }

    body.app-ui-professional .settings-subnav {
        gap: 8px;
        padding: 13px 16px;
        background: #f6f8fb;
    }

    body.app-ui-professional .settings-subnav-button {
        min-height: 44px;
        padding: 0 14px;
        border-radius: 11px;
        font-size: 12px;
    }

    body.app-ui-professional .settings-tab-panel {
        padding: 23px;
    }

    body.app-ui-professional .settings-panel-heading h3 {
        font-size: 21px;
    }

    body.app-ui-professional .settings-logo-layout {
        padding: 16px;
        border-color: var(--pc-border);
        border-radius: 15px;
    }

    body.app-ui-professional .paper-option-grid {
        gap: 12px;
    }

    body.app-ui-professional .paper-option-card {
        min-height: 195px;
        border-color: var(--pc-border);
        border-radius: 15px;
    }

    body.app-ui-professional .settings-save-bar {
        padding: 13px 23px;
    }

    /* -----------------------------------------------------
       SUBSETTING UCAPAN NOTA
    ----------------------------------------------------- */

    body.app-ui-professional .receipt-message-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 320px);
        gap: 17px;
    }

    body.app-ui-professional .receipt-message-preview {
        border-color: var(--pc-border);
        border-radius: 14px;
    }

    /* -----------------------------------------------------
       QUICK PROFESSIONAL FINISH
    ----------------------------------------------------- */

    body.app-ui-professional
    .calculated-field,
    body.app-ui-professional
    .owner-product-preview,
    body.app-ui-professional
    .owner-profit-simulation,
    body.app-ui-professional
    .settings-info-box,
    body.app-ui-professional
    .monthly-allocation-note,
    body.app-ui-professional
    .tagihan-payment-context {
        border-radius: 12px;
    }

    body.app-ui-professional
    .product-photo-form,
    body.app-ui-professional
    .product-photo-preview {
        border-color: var(--pc-border);
        border-radius: 15px;
    }
}



/* =========================================================
   PENYESUAIAN KHUSUS: TEKS PEMILIK BARANG DI SPAREPART MODE PC
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .sparepart-col-owner {
        width: 13%;
    }

    body.app-ui-professional .sparepart-col-owner-cell {
        min-width: 160px;
    }

    body.app-ui-professional .sparepart-owner-cell {
        display: grid;
        gap: 5px;
    }

    body.app-ui-professional .sparepart-owner-cell strong {
        color: var(--pc-text);
        font-size: 14px;
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: -.01em;
    }

    body.app-ui-professional .sparepart-owner-cell small {
        color: var(--pc-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
    }
}

@media screen and (min-width: 1600px) {
    body.app-ui-professional .sparepart-col-owner {
        width: 14%;
    }

    body.app-ui-professional .sparepart-owner-cell strong {
        font-size: 15px;
    }

    body.app-ui-professional .sparepart-owner-cell small {
        font-size: 11.5px;
    }
}


/* =========================================================
   LAPORAN.PHP & LAPORAN PEMILIK — MODE PC MUDAH DIBACA
========================================================= */

@media screen and (min-width: 1181px) {

    /* -----------------------------------------------------
       LAPORAN.PHP
    ----------------------------------------------------- */

    body.app-ui-professional.module-laporan
    .report-filter-panel > p {
        margin-top: 13px;
        color: var(--pc-muted);
        font-size: 13px;
        line-height: 1.55;
    }

    body.app-ui-professional.module-laporan
    .report-filter-form .form-group label {
        margin-bottom: 7px;
        font-size: 13px;
        font-weight: 800;
    }

    body.app-ui-professional.module-laporan
    .report-filter-form input,
    body.app-ui-professional.module-laporan
    .report-filter-form select {
        min-height: 52px;
        font-size: 15px;
        font-weight: 650;
    }

    body.app-ui-professional.module-laporan
    .report-filter-form .button {
        min-height: 52px;
        font-size: 13px;
    }

    body.app-ui-professional.module-laporan
    .report-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 13px;
    }

    body.app-ui-professional.module-laporan
    .report-summary-card {
        min-height: 130px;
        padding: 20px;
        border-radius: 17px;
    }

    body.app-ui-professional.module-laporan
    .report-summary-card span {
        color: #475467;
        font-size: 13px;
        font-weight: 780;
        line-height: 1.35;
    }

    body.app-ui-professional.module-laporan
    .report-summary-card strong {
        margin: 10px 0 6px;
        font-size: 27px;
        font-weight: 900;
        line-height: 1.18;
    }

    body.app-ui-professional.module-laporan
    .report-summary-card small {
        color: #667085;
        font-size: 12px;
        line-height: 1.45;
    }

    body.app-ui-professional.module-laporan
    .report-panel {
        padding: 24px;
    }

    body.app-ui-professional.module-laporan
    .report-panel-header {
        margin-bottom: 20px;
    }

    body.app-ui-professional.module-laporan
    .report-panel-header h3 {
        font-size: 25px;
        font-weight: 880;
    }

    body.app-ui-professional.module-laporan
    .report-panel-header p {
        font-size: 13px;
        line-height: 1.55;
    }

    body.app-ui-professional.module-laporan
    .report-unpaid-badge,
    body.app-ui-professional.module-laporan
    .owner-profit-total-badge {
        min-height: 34px;
        padding: 0 12px;
        font-size: 11px;
    }

    body.app-ui-professional.module-laporan
    .report-breakdown-item,
    body.app-ui-professional.module-laporan
    .report-product-item {
        min-height: 74px;
        gap: 14px;
        padding: 15px 0;
    }

    body.app-ui-professional.module-laporan
    .payment-method-icon,
    body.app-ui-professional.module-laporan
    .report-rank {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 13px;
        font-size: 14px;
    }

    body.app-ui-professional.module-laporan
    .report-breakdown-item strong,
    body.app-ui-professional.module-laporan
    .report-product-item strong {
        font-size: 15px;
        line-height: 1.4;
    }

    body.app-ui-professional.module-laporan
    .report-breakdown-item small,
    body.app-ui-professional.module-laporan
    .report-product-item small {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.45;
    }

    body.app-ui-professional.module-laporan
    .report-breakdown-item b,
    body.app-ui-professional.module-laporan
    .report-product-item b {
        font-size: 15px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-card {
        border-radius: 16px;
        box-shadow: var(--pc-shadow-sm);
    }

    body.app-ui-professional.module-laporan
    .report-transaction-head {
        min-height: 74px;
        padding: 16px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-head strong {
        font-size: 15px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-head small {
        margin-top: 5px;
        font-size: 12px;
    }

    body.app-ui-professional.module-laporan
    .report-status,
    body.app-ui-professional.module-laporan
    .report-card-status-stack
    .sale-transaction-status {
        min-height: 29px;
        padding: 0 9px;
        font-size: 10px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-meta {
        gap: 12px;
        padding: 16px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-meta span {
        font-size: 12px;
        font-weight: 750;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-meta strong {
        font-size: 13px;
        font-weight: 800;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-return {
        padding: 11px 16px;
        font-size: 12px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-return strong {
        font-size: 13px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-total {
        min-height: 58px;
        padding: 14px 16px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-total span {
        font-size: 13px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-total strong {
        font-size: 18px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-list {
        gap: 12px;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-item {
        grid-template-columns:
            minmax(290px, .8fr)
            minmax(480px, 1.35fr);
        gap: 17px;
        padding: 16px;
        border-radius: 15px;
    }

    body.app-ui-professional.module-laporan
    .report-owner-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 17px;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-name strong {
        font-size: 15px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-name small {
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.45;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-values {
        gap: 10px;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-values > div {
        min-height: 70px;
        padding: 12px;
        border-radius: 11px;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-values span {
        font-size: 10px;
        font-weight: 750;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-values strong {
        margin-top: 6px;
        font-size: 14px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .owner-profit-report-link {
        min-height: 41px;
        margin-top: 12px;
        padding: 0 13px;
        font-size: 11px;
    }

    body.app-ui-professional.module-laporan
    .report-note {
        padding: 16px 18px;
        font-size: 13px;
        line-height: 1.65;
    }

    /* -----------------------------------------------------
       LAPORAN_PEMILIK_BARANG.PHP
    ----------------------------------------------------- */

    body.app-ui-professional.module-laporan
    .owner-report-filter-panel {
        padding: 19px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-filter-field {
        min-height: 59px;
        padding: 7px 12px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-filter-field > span {
        margin-bottom: 3px;
        font-size: 10px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .owner-report-filter-field select,
    body.app-ui-professional.module-laporan
    .owner-report-filter-field input {
        min-height: 31px;
        font-size: 14px;
        font-weight: 750;
    }

    body.app-ui-professional.module-laporan
    .owner-report-search input,
    body.app-ui-professional.module-laporan
    .owner-report-filter > .button {
        min-height: 59px;
        font-size: 14px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-print-header,
    body.app-ui-professional.module-laporan
    .owner-report-summary-section,
    body.app-ui-professional.module-laporan
    .owner-report-table-section {
        padding: 24px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-store img {
        width: 90px;
        height: 80px;
        flex-basis: 90px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-store strong {
        font-size: 21px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-store span {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.5;
    }

    body.app-ui-professional.module-laporan
    .owner-report-title-block > span {
        font-size: 11px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-title-block h1 {
        font-size: 30px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .owner-report-title-block p {
        margin: 8px 0;
        font-size: 13px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-title-block strong {
        font-size: 13px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-section-heading {
        margin-bottom: 19px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-section-heading h3 {
        font-size: 25px;
        font-weight: 880;
    }

    body.app-ui-professional.module-laporan
    .owner-report-section-heading > span {
        min-height: 32px;
        padding: 0 11px;
        font-size: 11px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-summary-grid article {
        min-height: 122px;
        padding: 17px;
        border-radius: 14px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-summary-grid span {
        font-size: 11px;
        font-weight: 780;
        line-height: 1.35;
    }

    body.app-ui-professional.module-laporan
    .owner-report-summary-grid strong {
        margin-top: 9px;
        font-size: 22px;
        line-height: 1.2;
    }

    body.app-ui-professional.module-laporan
    .owner-report-summary-grid small {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.45;
    }

    body.app-ui-professional.module-laporan
    .owner-report-table-scroll {
        border-radius: 15px;
    }

    body.app-ui-professional.module-laporan
    .owner-inventory-table {
        min-width: 1580px;
    }

    body.app-ui-professional.module-laporan
    .owner-sales-table {
        min-width: 1460px;
    }

    body.app-ui-professional.module-laporan
    .owner-transaction-table {
        min-width: 1680px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-table-section
    .data-table thead th {
        height: 52px;
        padding: 0 14px;
        font-size: 11px;
        letter-spacing: .045em;
    }

    body.app-ui-professional.module-laporan
    .owner-report-table-section
    .data-table td {
        height: 82px;
        padding: 13px 14px;
        font-size: 13px;
        line-height: 1.45;
    }

    body.app-ui-professional.module-laporan
    .owner-report-product strong {
        font-size: 14px;
        font-weight: 900;
        line-height: 1.4;
    }

    body.app-ui-professional.module-laporan
    .owner-report-product span {
        margin-top: 5px;
        font-size: 11px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-product small {
        margin-top: 5px;
        font-size: 10px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-product.compact strong {
        font-size: 13px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-pill {
        min-height: 31px;
        padding: 0 10px;
        font-size: 10px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-stock {
        min-height: 34px;
        padding: 0 11px;
        font-size: 11px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-money {
        font-size: 13px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .owner-report-invoice-link {
        font-size: 13px;
        font-weight: 900;
    }

    body.app-ui-professional.module-laporan
    .owner-report-table-section
    .table-subtext {
        margin-top: 5px;
        font-size: 10px;
        line-height: 1.4;
    }

    body.app-ui-professional.module-laporan
    .owner-report-table-section
    .penjualan-payment-badge {
        min-height: 31px;
        padding: 0 10px;
        font-size: 10px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-note {
        padding: 17px 19px;
        font-size: 12px;
        line-height: 1.7;
    }

    body.app-ui-professional.module-laporan
    .owner-report-signatures span {
        font-size: 12px;
    }

    body.app-ui-professional.module-laporan
    .owner-report-signatures strong {
        font-size: 14px;
    }
}

@media screen and (min-width: 1500px) {
    body.app-ui-professional.module-laporan
    .report-summary-grid {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

    body.app-ui-professional.module-laporan
    .report-summary-card strong {
        font-size: 24px;
    }

    body.app-ui-professional.module-laporan
    .report-transaction-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    body.app-ui-professional.module-laporan
    .owner-report-summary-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

/* =========================================================
   LAPTOP / PC 1181–1399
   Lebih ringkas agar tidak sesak.
========================================================= */

@media screen and (min-width: 1181px) and (max-width: 1399px) {

    body.app-ui-professional {
        --app-desktop-sidebar: 258px;
    }

    body.app-ui-professional .sidebar-brand {
        padding-right: 16px;
        padding-left: 16px;
    }

    body.app-ui-professional .sidebar-menu {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.app-ui-professional .menu-link {
        min-height: 49px;
        padding: 0 12px;
        font-size: 13px;
    }

    body.app-ui-professional .content-wrapper {
        padding:
            24px
            24px
            40px;
    }

    body.app-ui-professional .page-toolbar,
    body.app-ui-professional .form-page-header {
        min-height: 106px;
        padding: 20px 22px;
    }

    body.app-ui-professional .page-toolbar h2,
    body.app-ui-professional .form-page-header h2 {
        font-size: 25px;
    }

    body.app-ui-professional .compact-summary-card,
    body.app-ui-professional .summary-mini-card,
    body.app-ui-professional .report-summary-card,
    body.app-ui-professional .metric-card {
        min-height: 104px;
        padding: 16px;
    }

    body.app-ui-professional
    .compact-summary-card strong,
    body.app-ui-professional
    .summary-mini-card strong,
    body.app-ui-professional
    .report-summary-card strong,
    body.app-ui-professional
    .metric-card strong {
        font-size: 22px;
    }

    body.app-ui-professional
    .dashboard-main-grid {
        grid-template-columns:
            minmax(0, 1.82fr)
            minmax(285px, .78fr);
    }

    body.app-ui-professional
    .quick-action-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    body.app-ui-professional
    .cashier-layout-refined {
        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(365px, .72fr);
    }

    body.app-ui-professional
    .cashier-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    body.app-ui-professional
    .owner-report-summary-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    body.app-ui-professional
    .report-transaction-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/* =========================================================
   MONITOR BESAR >= 1600
========================================================= */

@media screen and (min-width: 1600px) {

    body.app-ui-professional {
        --app-desktop-sidebar: 286px;
    }

    body.app-ui-professional .content-wrapper {
        padding-right: 38px;
        padding-left: 38px;
    }

    body.app-ui-professional .entity-card-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    body.app-ui-professional
    .customer-entity-grid,
    body.app-ui-professional
    .user-entity-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    body.app-ui-professional
    .cashier-product-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    body.app-ui-professional
    .report-transaction-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    body.app-ui-professional
    .quick-action-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );
    }
}

/* =========================================================
   LOGIN / SETUP MODE PC
========================================================= */

@media screen and (min-width: 1000px) {

    .login-body .login-wrapper {
        width:
            min(
                1240px,
                calc(100% - 70px)
            );
        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(390px, 455px);
        gap: clamp(55px, 6vw, 92px);
        padding: 38px 0;
    }

    .login-body .login-brand-panel h1 {
        margin-top: 25px;
        font-size:
            clamp(
                45px,
                4.3vw,
                66px
            );
        letter-spacing: -.055em;
    }

    .login-body .login-brand-panel > p {
        max-width: 600px;
        font-size: 17px;
        line-height: 1.7;
    }

    .login-body .login-card {
        padding: 35px;
        border-radius: 24px;
        box-shadow:
            0 30px 75px
            rgba(0, 0, 0, .24);
    }

    .login-body .login-heading h2 {
        margin-top: 9px;
        font-size: 29px;
        letter-spacing: -.035em;
    }

    .login-body .login-heading p {
        font-size: 14px;
    }

    .login-body .form-group input {
        min-height: 52px;
        font-size: 15px;
    }

    .setup-body .setup-card {
        padding: 34px;
        border-radius: 22px;
    }
}


/* =========================================================
   SIDEBAR MODE PC DAPAT DIKECILKAN HANYA ICON
========================================================= */

.sidebar-desktop-toggle {
    display: none;
}

@media screen and (min-width: 1181px) {

    body.app-ui-professional .sidebar-desktop-toggle {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: inline-grid;
        place-items: center;
        margin-left: auto;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 11px;
        background: rgba(255, 255, 255, .07);
        color: #d8e5f3;
        cursor: pointer;
        transition:
            background-color .18s ease,
            border-color .18s ease,
            color .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }

    body.app-ui-professional .sidebar-desktop-toggle:hover {
        border-color: rgba(255, 255, 255, .18);
        background: rgba(255, 255, 255, .12);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
    }

    body.app-ui-professional .sidebar-desktop-toggle .ui-icon {
        width: 18px;
        height: 18px;
        transition: transform .2s ease;
    }

    body.app-ui-professional.sidebar-collapsed {
        --app-desktop-sidebar: 94px;
    }

    body.app-ui-professional .sidebar,
    body.app-ui-professional .main-content,
    body.app-ui-professional .sidebar-brand,
    body.app-ui-professional .menu-link,
    body.app-ui-professional .sidebar-user,
    body.app-ui-professional .sidebar-user-text,
    body.app-ui-professional .sidebar-brand > div:last-child {
        transition:
            width .22s ease,
            min-width .22s ease,
            padding .22s ease,
            margin .22s ease,
            gap .22s ease,
            opacity .18s ease,
            transform .18s ease;
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-brand {
        position: relative;
        justify-content: center;
        gap: 0;
        padding-right: 14px;
        padding-left: 14px;
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-brand-logo {
        margin-right: 0;
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-brand > div:last-child {
        width: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateX(-6px);
        pointer-events: none;
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-desktop-toggle {
        position: absolute;
        top: 18px;
        right: 14px;
        margin-left: 0;
        background: rgba(21, 94, 239, .18);
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-desktop-toggle .ui-icon {
        transform: rotate(180deg);
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-menu {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.app-ui-professional.sidebar-collapsed .menu-link {
        justify-content: center;
        padding-right: 0;
        padding-left: 0;
        gap: 0;
    }

    body.app-ui-professional.sidebar-collapsed .menu-link::before {
        left: 5px;
    }

    body.app-ui-professional.sidebar-collapsed .menu-link > span:last-child {
        width: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateX(-6px);
        white-space: nowrap;
        pointer-events: none;
    }

    body.app-ui-professional.sidebar-collapsed .menu-icon {
        margin: 0 auto;
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-user {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding-top: 14px;
        padding-right: 12px;
        padding-bottom: 14px;
        padding-left: 12px;
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-user .avatar {
        margin-right: 0;
    }

    body.app-ui-professional.sidebar-collapsed .sidebar-user-text {
        width: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateX(-6px);
        pointer-events: none;
    }

    body.app-ui-professional.sidebar-collapsed .logout-mini {
        width: 34px;
        height: 34px;
    }

    body.app-ui-professional.sidebar-collapsed .content-wrapper {
        max-width: 100%;
    }
}


/* =========================================================
   BUGFIX SIDEBAR ICON PC — TANPA DELAY / TANPA SISA LOGO
========================================================= */

@media screen and (min-width: 1181px) {

    html.sidebar-collapsed-preload body.app-ui-professional,
    body.app-ui-professional.sidebar-collapsed {
        --app-desktop-sidebar: 82px;
    }

    html.sidebar-collapsed-preload body.app-ui-professional *,
    html.sidebar-collapsed-preload body.app-ui-professional *::before,
    html.sidebar-collapsed-preload body.app-ui-professional *::after {
        transition: none !important;
    }

    body.app-ui-professional .sidebar,
    body.app-ui-professional .main-content {
        transition:
            width .14s ease,
            margin-left .14s ease;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand,
    body.app-ui-professional.sidebar-collapsed .sidebar-brand {
        position: relative;
        min-height: 82px;
        justify-content: center;
        gap: 0;
        padding: 14px 10px;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand-logo,
    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand > div:last-child,
    body.app-ui-professional.sidebar-collapsed .sidebar-brand-logo,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-brand > div:last-child {
        display: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-desktop-toggle,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-desktop-toggle {
        position: static;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: inline-grid;
        place-items: center;
        margin: 0;
        border-color: rgba(255, 255, 255, .14);
        background: rgba(21, 94, 239, .22);
        color: #ffffff;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional
    .sidebar-desktop-toggle .ui-icon,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-desktop-toggle .ui-icon {
        transform: rotate(180deg);
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-menu,
    body.app-ui-professional.sidebar-collapsed .sidebar-menu {
        padding-right: 9px;
        padding-left: 9px;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-link,
    body.app-ui-professional.sidebar-collapsed .menu-link {
        min-height: 52px;
        justify-content: center;
        gap: 0;
        padding-right: 0;
        padding-left: 0;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-link > span:last-child,
    body.app-ui-professional.sidebar-collapsed
    .menu-link > span:last-child {
        display: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-icon,
    body.app-ui-professional.sidebar-collapsed .menu-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        margin: 0;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-link.active::before,
    body.app-ui-professional.sidebar-collapsed
    .menu-link.active::before {
        left: 2px;
        top: 8px;
        bottom: 8px;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-user,
    body.app-ui-professional.sidebar-collapsed .sidebar-user {
        min-height: 118px;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding: 13px 8px;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-user-text,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-user-text {
        display: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-user .avatar,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-user .avatar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        margin: 0;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .logout-mini,
    body.app-ui-professional.sidebar-collapsed .logout-mini {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        margin: 0;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .content-wrapper,
    body.app-ui-professional.sidebar-collapsed
    .content-wrapper {
        max-width: 100%;
    }
}


/* =========================================================
   PENYEMPURNAAN HEADER SIDEBAR COLLAPSED
   Saat mode icon aktif, area brand hanya menampilkan tombol.
========================================================= */

@media screen and (min-width: 1181px) {
    html.sidebar-collapsed-preload body.app-ui-professional .sidebar,
    body.app-ui-professional.sidebar-collapsed .sidebar {
        overflow: hidden;
    }

    html.sidebar-collapsed-preload body.app-ui-professional .sidebar-brand,
    body.app-ui-professional.sidebar-collapsed .sidebar-brand {
        overflow: hidden;
        justify-content: center !important;
        align-items: center;
    }

    html.sidebar-collapsed-preload body.app-ui-professional .sidebar-brand > *:not(.sidebar-desktop-toggle),
    body.app-ui-professional.sidebar-collapsed .sidebar-brand > *:not(.sidebar-desktop-toggle) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    html.sidebar-collapsed-preload body.app-ui-professional .sidebar-brand .sidebar-desktop-toggle,
    body.app-ui-professional.sidebar-collapsed .sidebar-brand .sidebar-desktop-toggle {
        position: static !important;
        display: inline-grid !important;
        margin: 0 auto !important;
    }
}


/* =========================================================
   SIDEBAR MODE ICON FINAL — RAPI DAN TANPA SISA TULISAN
========================================================= */

@media screen and (min-width: 1181px) {

    html.sidebar-collapsed-preload
    body.app-ui-professional,
    body.app-ui-professional.sidebar-collapsed {
        --app-desktop-sidebar: 82px !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar,
    body.app-ui-professional.sidebar-collapsed .sidebar {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        overflow: hidden !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .main-content,
    body.app-ui-professional.sidebar-collapsed
    .main-content {
        margin-left: 82px !important;
    }

    /*
    |--------------------------------------------------------------------------
    | BAGIAN ATAS SIDEBAR HANYA TOMBOL
    |--------------------------------------------------------------------------
    */

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-brand {
        position: relative !important;
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        min-height: 86px !important;
        display: grid !important;
        place-items: center !important;
        gap: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand-logo,
    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand-copy,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-brand-logo,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-brand-copy {
        position: absolute !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        display: none !important;
        visibility: hidden !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        transform: none !important;
        pointer-events: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional
    .sidebar-brand .sidebar-desktop-toggle,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-brand .sidebar-desktop-toggle {
        position: static !important;
        inset: auto !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        display: inline-grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border:
            1px solid
            rgba(255, 255, 255, .15) !important;
        border-radius: 13px !important;
        background:
            linear-gradient(
                135deg,
                rgba(45, 109, 246, .42),
                rgba(21, 94, 239, .30)
            ) !important;
        color: #ffffff !important;
        box-shadow:
            0 8px 18px
            rgba(0, 0, 0, .16) !important;
        transform: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional
    .sidebar-desktop-toggle .ui-icon,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-desktop-toggle .ui-icon {
        width: 19px !important;
        height: 19px !important;
        transform: rotate(180deg) !important;
    }

    /*
    |--------------------------------------------------------------------------
    | MENU ICON TEPAT DI TENGAH
    |--------------------------------------------------------------------------
    */

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-menu,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-menu {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        padding:
            16px
            9px
            20px !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-link,
    body.app-ui-professional.sidebar-collapsed
    .menu-link {
        position: relative !important;
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        min-height: 54px !important;
        display: grid !important;
        place-items: center !important;
        gap: 0 !important;
        margin:
            0
            0
            6px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        transform: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional
    .menu-link > span:not(.menu-icon),
    body.app-ui-professional.sidebar-collapsed
    .menu-link > span:not(.menu-icon) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-icon,
    body.app-ui-professional.sidebar-collapsed
    .menu-icon {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        border-radius: 11px !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-icon .ui-icon,
    body.app-ui-professional.sidebar-collapsed
    .menu-icon .ui-icon {
        width: 20px !important;
        height: 20px !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-link.active::before,
    body.app-ui-professional.sidebar-collapsed
    .menu-link.active::before {
        left: 3px !important;
        top: 9px !important;
        bottom: 9px !important;
        width: 3px !important;
    }

    /*
    |--------------------------------------------------------------------------
    | BAGIAN BAWAH SIDEBAR
    |--------------------------------------------------------------------------
    */

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-user,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-user {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        min-height: 124px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 11px !important;
        overflow: hidden !important;
        padding:
            13px
            0 !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-user-text,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-user-text {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-user .avatar,
    body.app-ui-professional.sidebar-collapsed
    .sidebar-user .avatar {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .logout-mini,
    body.app-ui-professional.sidebar-collapsed
    .logout-mini {
        position: static !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        margin: 0 !important;
    }
}


/* =========================================================
   SIDEBAR ZERO DELAY — ROOT STATE AUTHORITATIVE
========================================================= */

@media screen and (min-width: 1181px) {
    html.sidebar-state-instant *,
    html.sidebar-state-instant *::before,
    html.sidebar-state-instant *::after,
    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar,
    html.sidebar-collapsed-preload
    body.app-ui-professional .main-content,
    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand,
    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-menu,
    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-user,
    html.sidebar-collapsed-preload
    body.app-ui-professional .menu-link {
        transition: none !important;
        animation: none !important;
    }

    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand-logo,
    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-brand-copy,
    html.sidebar-collapsed-preload
    body.app-ui-professional
    .menu-link > span:not(.menu-icon),
    html.sidebar-collapsed-preload
    body.app-ui-professional .sidebar-user-text {
        display: none !important;
    }
}


/* =========================================================
   KASIR — TOOLBAR RINGKAS & PELANGGAN SEJAJAR
========================================================= */

.cashier-customer-block {
    min-width: 0;
    margin-bottom: 20px;
}

.cashier-customer-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.35;
}

.cashier-customer-block
.cashier-customer-row {
    margin-bottom: 0;
}

.cashier-customer-block
.cashier-select-shell,
.cashier-customer-block
.cashier-add-customer {
    min-height: 50px;
}

.cashier-customer-block
.cashier-select-shell select {
    height: 50px;
    min-height: 50px;
}

.cashier-customer-block
.cashier-add-customer {
    height: 50px;
    align-self: stretch;
}

/*
|--------------------------------------------------------------------------
| MODE PC
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1181px) {

    body.app-ui-professional
    .cashier-page-toolbar {
        min-height: 96px !important;
        padding:
            17px
            22px !important;
        border-radius: 18px !important;
    }

    body.app-ui-professional
    .cashier-toolbar-copy h2 {
        margin-top: 4px !important;
        font-size: 26px !important;
        line-height: 1.2;
    }

    body.app-ui-professional
    .cashier-toolbar-actions {
        gap: 9px;
    }

    body.app-ui-professional
    .cashier-today-summary {
        min-width: 150px;
        min-height: 64px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding:
            9px
            13px;
        border-radius: 13px;
    }

    body.app-ui-professional
    .cashier-today-summary span {
        font-size: 9px;
    }

    body.app-ui-professional
    .cashier-today-summary strong {
        margin-top: 3px;
        font-size: 12px;
    }

    body.app-ui-professional
    .cashier-today-summary small {
        margin-top: 3px;
        font-size: 11px;
    }

    body.app-ui-professional
    .cashier-history-button {
        min-height: 46px;
        padding:
            0
            14px;
    }

    body.app-ui-professional
    .cashier-customer-block {
        margin-bottom: 20px;
    }

    body.app-ui-professional
    .cashier-customer-label {
        margin-bottom: 8px;
        font-size: 13px;
    }

    body.app-ui-professional
    .cashier-customer-block
    .cashier-customer-row {
        grid-template-columns:
            minmax(0, 1fr)
            178px;
        gap: 10px;
        align-items: stretch;
    }

    body.app-ui-professional
    .cashier-customer-block
    .cashier-select-shell,
    body.app-ui-professional
    .cashier-customer-block
    .cashier-select-shell select,
    body.app-ui-professional
    .cashier-customer-block
    .cashier-add-customer {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        box-sizing: border-box;
    }

    body.app-ui-professional
    .cashier-customer-block
    .cashier-select-shell select {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 14px;
        line-height: 50px;
    }

    body.app-ui-professional
    .cashier-customer-block
    .cashier-add-customer {
        width: 178px;
        min-width: 178px;
        justify-content: center;
        padding:
            0
            14px;
        margin: 0;
        font-size: 13px;
        line-height: 1;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET DAN HP
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 920px) {

    .cashier-customer-block
    .cashier-customer-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .cashier-customer-block
    .cashier-add-customer {
        width: 100%;
    }
}

@media screen and (max-width: 699px) {

    .cashier-customer-label {
        font-size: 13px;
    }

    .cashier-customer-block
    .cashier-select-shell,
    .cashier-customer-block
    .cashier-select-shell select,
    .cashier-customer-block
    .cashier-add-customer {
        height: 50px;
        min-height: 50px;
    }

    .cashier-customer-block
    .cashier-select-shell select {
        font-size: 16px;
    }
}


/* =========================================================
   KASIR — PENYEMPURNAAN DESAIN PILIHAN PELANGGAN
========================================================= */

.cashier-customer-block {
    padding-top: 2px;
}

.cashier-customer-block .cashier-customer-row {
    align-items: stretch;
}

.cashier-customer-block .cashier-select-shell {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #cfd8e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.cashier-customer-block .cashier-select-shell:hover {
    border-color: #b8c6dd;
}

.cashier-customer-block .cashier-select-shell:focus-within {
    border-color: #2d6df6;
    box-shadow: 0 0 0 4px rgba(45, 109, 246, 0.12);
}

.cashier-customer-block .cashier-field-icon {
    left: 15px;
    color: #64748b;
}

.cashier-customer-block .cashier-select-shell select {
    width: 100%;
    border: 0 !important;
    outline: 0;
    background: transparent;
    border-radius: 14px;
    padding-right: 42px;
    padding-left: 44px;
    color: #0f172a;
    font-weight: 600;
}

.cashier-customer-block .cashier-add-customer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #cfd8e7;
    border-radius: 14px;
    background: #ffffff;
    color: #1e293b;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cashier-customer-block .cashier-add-customer:hover {
    border-color: #b8c6dd;
    background: #f8fbff;
    color: #155eef;
}

.cashier-customer-block .cashier-add-customer .ui-icon {
    width: 16px;
    height: 16px;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .cashier-customer-label {
        margin-bottom: 10px;
        color: #0f172a;
        font-size: 14px;
        font-weight: 800;
    }

    body.app-ui-professional .cashier-customer-block .cashier-customer-row {
        grid-template-columns: minmax(0, 1fr) 212px;
        gap: 12px;
    }

    body.app-ui-professional .cashier-customer-block .cashier-select-shell,
    body.app-ui-professional .cashier-customer-block .cashier-select-shell select,
    body.app-ui-professional .cashier-customer-block .cashier-add-customer {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }

    body.app-ui-professional .cashier-customer-block .cashier-select-shell select {
        font-size: 15px;
        line-height: 52px;
    }

    body.app-ui-professional .cashier-customer-block .cashier-add-customer {
        width: 212px;
        min-width: 212px;
        padding: 0 16px;
        font-size: 14px;
    }
}

@media screen and (max-width: 920px) {
    .cashier-customer-block .cashier-customer-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}


/* =========================================================
   KASIR — INPUT JUMLAH DIBAYAR DISEMPURNAKAN
========================================================= */

.cashier-paid-group {
    min-width: 0;
}

.cashier-paid-group > label {
    display: block;
    margin-bottom: 8px;
    color: #1d2939;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.cashier-paid-group .cashier-paid-input {
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #c7d0dd;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.cashier-paid-group .cashier-paid-input:hover {
    border-color: #98a2b3;
}

.cashier-paid-group .cashier-paid-input:focus-within {
    border-color: #2d6df6;
    box-shadow: 0 0 0 4px rgba(45, 109, 246, .12);
}

.cashier-paid-group .cashier-money-prefix {
    width: auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid #dce3ed;
    background: #f5f8ff;
    color: #1849a9;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .01em;
    user-select: none;
    pointer-events: none;
}

body.app-ui-professional
.cashier-paid-group
.cashier-paid-input
input,
.cashier-paid-group
.cashier-paid-input
input {
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #101828 !important;
    text-align: right !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 50px !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    caret-color: #155eef;
    -webkit-appearance: none;
    appearance: none;
}

body.app-ui-professional
.cashier-paid-group
.cashier-paid-input
input:hover,
body.app-ui-professional
.cashier-paid-group
.cashier-paid-input
input:focus,
.cashier-paid-group
.cashier-paid-input
input:hover,
.cashier-paid-group
.cashier-paid-input
input:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.cashier-paid-group .cashier-paid-input input::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.cashier-paid-group .cashier-paid-input input[readonly] {
    background: #f8fafc !important;
    color: #475467 !important;
    cursor: default;
}

@media screen and (max-width: 699px) {
    .cashier-paid-group .cashier-paid-input {
        height: 50px;
        min-height: 50px;
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .cashier-paid-group .cashier-money-prefix {
        font-size: 13px;
    }

    body.app-ui-professional
    .cashier-paid-group
    .cashier-paid-input
    input,
    .cashier-paid-group
    .cashier-paid-input
    input {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 14px !important;
        font-size: 16px !important;
        line-height: 48px !important;
    }
}


/* =========================================================
   KASIR — RINGKASAN SUBTOTAL, DISKON, DAN TOTAL
========================================================= */

.cashier-total-box {
    gap: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid #d8e1ed !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow:
        0 5px 16px
        rgba(15, 23, 42, .045);
}

.cashier-total-box > div {
    min-height: 58px;
    display: grid !important;
    grid-template-columns:
        minmax(100px, 1fr)
        minmax(0, auto);
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 16px;
}

.cashier-subtotal-row {
    border-bottom: 1px solid #e7edf5;
    background: #ffffff;
}

.cashier-total-box span,
.cashier-total-box label {
    margin: 0;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.cashier-subtotal-row strong {
    color: #101828;
    font-size: 16px !important;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cashier-discount-row {
    border-bottom: 1px solid #dce7f6;
    background: #fbfcfe;
}

.cashier-discount-input {
    width: 210px;
    min-width: 210px;
    height: 46px;
    min-height: 46px;
    grid-template-columns:
        54px
        minmax(0, 1fr) !important;
    border: 1px solid #c7d5e7 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow:
        0 1px 2px
        rgba(15, 23, 42, .04) !important;
}

.cashier-discount-input:hover {
    border-color: #9eb3cf !important;
}

.cashier-discount-input:focus-within {
    border-color: #2d6df6 !important;
    box-shadow:
        0 0 0 3px
        rgba(45, 109, 246, .12) !important;
}

.cashier-discount-input .cashier-money-prefix {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #dce3ed;
    background: #f5f8ff;
    color: #1849a9;
    font-size: 13px;
    font-weight: 900;
    user-select: none;
    pointer-events: none;
}

body.app-ui-professional
.cashier-discount-input input,
.cashier-discount-input input {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #101828 !important;
    text-align: right !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 44px !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    caret-color: #155eef;
}

body.app-ui-professional
.cashier-discount-input input:hover,
body.app-ui-professional
.cashier-discount-input input:focus,
.cashier-discount-input input:hover,
.cashier-discount-input input:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.cashier-grand-total {
    min-height: 72px !important;
    margin: 0 !important;
    padding: 15px 16px !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            135deg,
            #edf4ff 0%,
            #e6efff 100%
        ) !important;
}

.cashier-grand-total span {
    color: #1849a9 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.cashier-grand-total strong {
    color: #0b4db8 !important;
    font-size: 25px !important;
    font-weight: 950 !important;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .cashier-total-box {
        margin-top: 17px !important;
    }

    body.app-ui-professional
    .cashier-total-box > div {
        padding-right: 17px;
        padding-left: 17px;
    }
}

@media screen and (max-width: 699px) {
    .cashier-total-box > div {
        grid-template-columns:
            minmax(92px, 1fr)
            minmax(0, auto);
        min-height: 56px;
        padding: 11px 13px;
    }

    .cashier-discount-input {
        width: min(210px, 58vw);
        min-width: 155px;
        grid-template-columns:
            50px
            minmax(0, 1fr) !important;
    }

    .cashier-grand-total {
        min-height: 68px !important;
        padding: 14px 13px !important;
    }

    .cashier-grand-total strong {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 420px) {
    .cashier-discount-row {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .cashier-discount-input {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   KASIR — SCROLLBAR PANEL KERANJANG DISEMBUNYIKAN
   Panel tetap dapat digulir dengan mouse, touchpad, dan sentuhan.
========================================================= */

.cashier-cart-panel {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.cashier-cart-panel::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

.cashier-cart-panel::-webkit-scrollbar-track,
.cashier-cart-panel::-webkit-scrollbar-thumb,
.cashier-cart-panel::-webkit-scrollbar-corner {
    display: none !important;
    background: transparent !important;
}


/* =========================================================
   TAGIHAN — TOMBOL WHATSAPP ICON SAJA
========================================================= */

.tagihan-wa-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
}

.tagihan-wa-icon-only .ui-icon {
    width: 18px;
    height: 18px;
}

.action-button.tagihan-wa-icon-only {
    width: 46px;
    min-width: 46px;
    height: 40px;
}

.button.tagihan-wa-icon-only {
    width: 46px;
    min-width: 46px;
    height: 46px;
}


/* Penyempurnaan ikon WA agar lebih jelas */
.tagihan-wa-button {
    background: #25d366;
    border-color: #8ee0b3;
}

.tagihan-wa-button:hover {
    background: #1ebe5d;
    border-color: #7edba8;
}

.tagihan-wa-icon-only .ui-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.3;
}

.action-button.tagihan-wa-icon-only,
.button.tagihan-wa-icon-only {
    border-radius: 12px;
}


/* =========================================================
   TAGIHAN — SEMUA TOMBOL AKSI ICON SAJA
========================================================= */

.tagihan-action-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    text-indent: 0;
}

.tagihan-action-icon-only .ui-icon {
    width: 18px;
    height: 18px;
}

.action-button.tagihan-action-icon-only {
    width: 44px;
    min-width: 44px;
    height: 40px;
    border-radius: 12px;
}

.button.tagihan-action-icon-only {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
}

.tagihan-wa-icon-only {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
}

.tagihan-wa-icon-only:hover {
    background: #1fb959 !important;
    border-color: #1fb959 !important;
    color: #ffffff !important;
}

.tagihan-wa-icon-only .ui-icon {
    width: 20px;
    height: 20px;
}


/* =========================================================
   TAGIHAN — HOVER ICON DISERAGAMKAN
========================================================= */

.tagihan-table-actions .action-button,
.tagihan-table-actions .action-button-disabled,
.tagihan-mobile-actions .button,
.tagihan-mobile-actions form button {
    cursor: pointer;
}

.tagihan-action-icon-only {
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease;
}

.tagihan-action-icon-only:hover,
.tagihan-action-icon-only:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    outline: none;
}

.action-button.edit.tagihan-action-icon-only:hover,
.action-button.edit.tagihan-action-icon-only:focus-visible,
.button.button-outline.tagihan-action-icon-only:hover,
.button.button-outline.tagihan-action-icon-only:focus-visible {
    border-color: #9bb8fb;
    background: #e3eeff;
    color: #1849a9;
}

.action-button.monthly.tagihan-action-icon-only:hover,
.action-button.monthly.tagihan-action-icon-only:focus-visible,
.button.monthly.tagihan-action-icon-only:hover,
.button.monthly.tagihan-action-icon-only:focus-visible {
    border-color: #c7a3f8;
    background: #f4ebff;
    color: #6941c6;
}

.tagihan-pay-button.tagihan-action-icon-only:hover,
.tagihan-pay-button.tagihan-action-icon-only:focus-visible {
    border-color: #86e0ae;
    background: #ddf8e8;
    color: #067647;
}

.tagihan-wa-icon-only:hover,
.tagihan-wa-icon-only:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 183, 106, 0.28);
    outline: none;
}


/* =========================================================
   TAGIHAN — HOVER SEMUA ICON DIBUAT SEPERTI WA
========================================================= */

.tagihan-action-icon-only,
.tagihan-wa-icon-only {
    cursor: pointer !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease,
        opacity .16s ease;
}

.tagihan-action-icon-only:hover,
.tagihan-action-icon-only:focus-visible,
.tagihan-wa-icon-only:hover,
.tagihan-wa-icon-only:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.action-button.edit.tagihan-action-icon-only:hover,
.action-button.edit.tagihan-action-icon-only:focus-visible,
.button.button-outline.tagihan-action-icon-only:hover,
.button.button-outline.tagihan-action-icon-only:focus-visible {
    border-color: #7ea6fb;
    background: #dbeafe;
    color: #1849a9;
    box-shadow: 0 8px 18px rgba(24, 73, 169, 0.22);
}

.action-button.monthly.tagihan-action-icon-only:hover,
.action-button.monthly.tagihan-action-icon-only:focus-visible,
.button.monthly.tagihan-action-icon-only:hover,
.button.monthly.tagihan-action-icon-only:focus-visible {
    border-color: #b692f6;
    background: #f4ebff;
    color: #6941c6;
    box-shadow: 0 8px 18px rgba(105, 65, 198, 0.22);
}

.tagihan-pay-button.tagihan-action-icon-only:hover,
.tagihan-pay-button.tagihan-action-icon-only:focus-visible {
    border-color: #86e0ae;
    background: #dff7e8;
    color: #067647;
    box-shadow: 0 8px 18px rgba(6, 118, 71, 0.22);
}

.tagihan-wa-icon-only:hover,
.tagihan-wa-icon-only:focus-visible {
    background: #1fb959 !important;
    border-color: #1fb959 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(18, 183, 106, 0.28) !important;
}


/* =========================================================
   TAGIHAN — MODAL PEMBAYARAN MODE PC DISEMPURNAKAN
========================================================= */

.tagihan-payment-modal .app-modal-dialog {
    overflow: hidden;
}

.tagihan-payment-modal form {
    display: grid;
    gap: 0;
}

.tagihan-payment-modal .form-group {
    margin-bottom: 16px;
}

.tagihan-payment-modal .form-group:last-of-type {
    margin-bottom: 0;
}

.tagihan-payment-modal .app-modal-header {
    margin-bottom: 18px;
}

.tagihan-payment-modal .eyebrow {
    display: inline-block;
    margin-bottom: 8px;
}

.tagihan-payment-modal .tagihan-payment-context {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #d8e1ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
}

.tagihan-payment-modal .tagihan-payment-context span {
    font-size: 12px;
    letter-spacing: .01em;
}

.tagihan-payment-modal .tagihan-payment-context strong {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 800;
}

.tagihan-payment-modal .tagihan-payment-context p {
    margin-top: 8px;
    font-size: 12px;
}

.tagihan-payment-modal label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.tagihan-payment-modal label small {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 700;
}

.tagihan-payment-modal .tagihan-payment-money {
    min-width: 100%;
    grid-template-columns: 58px minmax(0, 1fr);
    border-radius: 15px;
}

.tagihan-payment-modal .tagihan-payment-money span {
    font-size: 15px;
    font-weight: 900;
}

.tagihan-payment-modal .tagihan-payment-money input {
    height: 52px;
    padding: 0 16px;
    font-size: 28px;
    font-weight: 900;
}

.tagihan-payment-modal select,
.tagihan-payment-modal textarea {
    border-radius: 14px;
    border-color: #cfd8e7;
    background: #ffffff;
}

.tagihan-payment-modal select {
    min-height: 50px;
    font-size: 15px;
    font-weight: 600;
}

.tagihan-payment-modal textarea {
    min-height: 98px;
    padding: 14px 15px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

.tagihan-payment-modal .modal-actions {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid #e4e7ec;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.tagihan-payment-modal .modal-actions .button {
    min-width: 150px;
    min-height: 46px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .tagihan-payment-modal {
        padding: 26px;
    }

    body.app-ui-professional .tagihan-payment-modal .app-modal-dialog.modal-small {
        width: min(560px, 100%);
        max-height: min(90vh, 920px);
        padding: 24px 24px 22px;
        border-radius: 22px;
    }

    body.app-ui-professional .tagihan-payment-modal .app-modal-header {
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    body.app-ui-professional .tagihan-payment-modal .app-modal-header h3 {
        margin-top: 0;
        font-size: 21px;
        line-height: 1.2;
    }

    body.app-ui-professional .tagihan-payment-modal .modal-close {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        background: #f8fafc;
    }

    body.app-ui-professional .tagihan-payment-modal .modal-close:hover {
        background: #eef4ff;
        color: #1849a9;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-context {
        padding: 17px 18px;
        border-radius: 15px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money input {
        font-size: 30px;
    }

    body.app-ui-professional .tagihan-payment-modal .modal-actions .button {
        min-width: 162px;
    }
}

@media screen and (max-width: 699px) {
    .tagihan-payment-modal .tagihan-payment-money input {
        font-size: 22px;
    }

    .tagihan-payment-modal .modal-actions {
        flex-direction: column-reverse;
    }

    .tagihan-payment-modal .modal-actions .button {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   TAGIHAN — MODAL PEMBAYARAN PC FINAL LEBIH PROFESIONAL
========================================================= */

.tagihan-payment-modal .app-modal-dialog {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.tagihan-payment-modal .app-modal-header {
    position: relative;
}

.tagihan-payment-modal .app-modal-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(21, 94, 239, 0.04), rgba(21, 94, 239, 0.14), rgba(21, 94, 239, 0.04));
}

.tagihan-payment-modal .tagihan-payment-context {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.tagihan-payment-modal .tagihan-payment-context b {
    color: #1849a9;
    font-weight: 900;
}

.tagihan-payment-modal .cashier-money-input,
.tagihan-payment-modal select,
.tagihan-payment-modal textarea {
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.tagihan-payment-modal select:focus,
.tagihan-payment-modal textarea:focus {
    border-color: #528bff;
    box-shadow: 0 0 0 4px rgba(21, 94, 239, .10);
    outline: none;
}

.tagihan-payment-modal .tagihan-payment-money {
    box-shadow: 0 2px 6px rgba(16, 24, 40, .04);
}

.tagihan-payment-modal .tagihan-payment-money input {
    padding-right: 20px;
    letter-spacing: -.02em;
}

.tagihan-payment-modal textarea::placeholder {
    color: #98a2b3;
}

.tagihan-payment-modal .modal-actions {
    align-items: center;
}

.tagihan-payment-modal .modal-actions .button-outline {
    background: #ffffff;
}

.tagihan-payment-modal .modal-actions .button-outline:hover {
    background: #f8fbff;
    border-color: #b9c8df;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .tagihan-payment-modal .app-modal-dialog.modal-small {
        width: min(600px, 100%);
        padding: 28px 24px 24px;
        border: 1px solid rgba(255,255,255,.78);
        box-shadow: 0 30px 80px rgba(16, 24, 40, .24);
    }

    body.app-ui-professional .tagihan-payment-modal .eyebrow {
        font-size: 12px;
        letter-spacing: .08em;
    }

    body.app-ui-professional .tagihan-payment-modal .app-modal-header h3 {
        font-size: 20px;
        font-weight: 850;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-context {
        margin-bottom: 20px;
        padding: 18px 18px 17px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-context span {
        font-size: 12px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-context strong {
        font-size: 16px;
    }

    body.app-ui-professional .tagihan-payment-modal label {
        font-size: 14px;
        margin-bottom: 9px;
    }

    body.app-ui-professional .tagihan-payment-modal .form-group {
        margin-bottom: 17px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money {
        grid-template-columns: 62px minmax(0,1fr);
        border-radius: 16px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money span {
        font-size: 16px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money input {
        height: 56px;
        font-size: 31px;
    }

    body.app-ui-professional .tagihan-payment-modal select {
        min-height: 52px;
        padding-left: 15px;
    }

    body.app-ui-professional .tagihan-payment-modal textarea {
        min-height: 104px;
    }

    body.app-ui-professional .tagihan-payment-modal .modal-actions {
        margin-top: 10px;
        padding-top: 20px;
        gap: 12px;
    }

    body.app-ui-professional .tagihan-payment-modal .modal-actions .button {
        min-width: 170px;
        min-height: 48px;
        border-radius: 15px;
    }
}


/* =========================================================
   TAGIHAN — JUMLAH PEMBAYARAN MODE PC FINAL
========================================================= */

.tagihan-payment-amount-group {
    padding: 16px;
    border: 1px solid #dce3ed;
    border-radius: 16px;
    background: #f8fafc;
}

.tagihan-payment-amount-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.tagihan-payment-amount-heading label {
    margin: 0 !important;
}

.tagihan-payment-full-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid #b2ccff;
    border-radius: 10px;
    background: #edf4ff;
    color: #1849a9;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    transition:
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.tagihan-payment-full-button:hover,
.tagihan-payment-full-button:focus-visible {
    border-color: #84adff;
    background: #dbeafe;
    color: #155eef;
    box-shadow: 0 7px 16px rgba(21, 94, 239, .14);
    transform: translateY(-1px);
    outline: none;
}

.tagihan-payment-full-button .ui-icon {
    width: 14px;
    height: 14px;
}

.tagihan-payment-modal .tagihan-payment-money {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 58px;
    overflow: hidden;
    border: 1px solid #c7d0dd;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(16, 24, 40, .045);
}

.tagihan-payment-modal .tagihan-payment-money:focus-within {
    border-color: #528bff;
    box-shadow: 0 0 0 4px rgba(21, 94, 239, .11);
}

.tagihan-payment-modal .tagihan-payment-money .tagihan-payment-currency {
    border-right: 1px solid #dce3ed;
    background: #f5f8ff;
    color: #1849a9;
    font-size: 16px;
    font-weight: 900;
}

.tagihan-payment-modal .tagihan-payment-money input {
    height: 58px;
    padding: 0 18px;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #101828;
    text-align: right;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.025em;
    box-shadow: none !important;
}

.tagihan-payment-amount-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    padding: 0 2px;
}

.tagihan-payment-amount-help span {
    color: #667085;
    font-size: 11px;
    font-weight: 650;
}

.tagihan-payment-amount-help strong {
    color: #1849a9;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional
    .tagihan-payment-amount-group {
        padding: 17px 18px 15px;
        border-radius: 17px;
    }

    body.app-ui-professional
    .tagihan-payment-amount-heading label {
        font-size: 14px;
    }

    body.app-ui-professional
    .tagihan-payment-full-button {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }

    body.app-ui-professional
    .tagihan-payment-modal
    .tagihan-payment-money {
        grid-template-columns: 66px minmax(0, 1fr);
        min-height: 60px;
    }

    body.app-ui-professional
    .tagihan-payment-modal
    .tagihan-payment-money input {
        height: 60px;
        font-size: 27px;
    }

    body.app-ui-professional
    .tagihan-payment-modal
    .tagihan-payment-money
    .tagihan-payment-currency {
        font-size: 16px;
    }
}

@media screen and (max-width: 699px) {
    .tagihan-payment-amount-group {
        padding: 13px;
    }

    .tagihan-payment-amount-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tagihan-payment-full-button {
        width: 100%;
    }

    .tagihan-payment-modal
    .tagihan-payment-money input {
        font-size: 22px;
    }
}


/* =========================================================
   DETAIL TAGIHAN — TOMBOL HEADER MODE PC DISEMPURNAKAN
========================================================= */

.detail-tagihan-toolbar-copy {
    min-width: 0;
}

.detail-tagihan-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.detail-tagihan-toolbar-actions form {
    margin: 0;
}

.detail-tagihan-action {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease;
}

.detail-tagihan-action .ui-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.detail-tagihan-action:hover,
.detail-tagihan-action:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.detail-tagihan-action-back {
    border-color: #cfd8e7;
    background: #ffffff;
    color: #344054;
}

.detail-tagihan-action-back:hover,
.detail-tagihan-action-back:focus-visible {
    border-color: #98a2b3;
    background: #f8fafc;
    color: #101828;
    box-shadow: 0 8px 18px rgba(16, 24, 40, .10);
}

.detail-tagihan-action-note {
    border-color: #b2ccff;
    background: #f5f8ff;
    color: #1849a9;
}

.detail-tagihan-action-note:hover,
.detail-tagihan-action-note:focus-visible {
    border-color: #84adff;
    background: #eaf2ff;
    color: #155eef;
    box-shadow: 0 8px 18px rgba(24, 73, 169, .16);
}

.detail-tagihan-action-monthly {
    border-color: #d6bbfb;
    background: #faf5ff;
    color: #6941c6;
}

.detail-tagihan-action-monthly:hover,
.detail-tagihan-action-monthly:focus-visible {
    border-color: #b692f6;
    background: #f4ebff;
    color: #5925dc;
    box-shadow: 0 8px 18px rgba(105, 65, 198, .16);
}

.detail-tagihan-action-whatsapp {
    border-color: #25d366 !important;
    background: #25d366 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(18, 183, 106, .18);
}

.detail-tagihan-action-whatsapp:hover,
.detail-tagihan-action-whatsapp:focus-visible {
    border-color: #1fb959 !important;
    background: #1fb959 !important;
    color: #ffffff !important;
    box-shadow: 0 9px 20px rgba(18, 183, 106, .28);
}

.detail-tagihan-action-whatsapp .ui-icon {
    width: 19px;
    height: 19px;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .detail-tagihan-toolbar {
        min-height: 118px;
        display: grid;
        grid-template-columns: minmax(300px, 1fr) auto;
        align-items: center;
        gap: 22px;
        padding: 20px 24px;
    }

    body.app-ui-professional .detail-tagihan-toolbar h2 {
        margin-top: 5px;
        font-size: 28px;
    }

    body.app-ui-professional .detail-tagihan-toolbar p {
        margin-top: 6px;
        font-size: 13px;
    }

    body.app-ui-professional .detail-tagihan-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(4, max-content);
        align-items: center;
        gap: 8px;
    }

    body.app-ui-professional .detail-tagihan-toolbar-actions .detail-tagihan-action,
    body.app-ui-professional .detail-tagihan-toolbar-actions form,
    body.app-ui-professional .detail-tagihan-toolbar-actions form .detail-tagihan-action {
        height: 46px;
        min-height: 46px;
        margin: 0;
    }

    body.app-ui-professional .detail-tagihan-wa-form {
        display: block;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1450px) {
    body.app-ui-professional .detail-tagihan-toolbar {
        grid-template-columns: minmax(280px, 1fr) minmax(420px, auto);
    }

    body.app-ui-professional .detail-tagihan-toolbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(470px, 100%);
    }

    body.app-ui-professional .detail-tagihan-toolbar-actions .detail-tagihan-action,
    body.app-ui-professional .detail-tagihan-toolbar-actions form,
    body.app-ui-professional .detail-tagihan-toolbar-actions form .detail-tagihan-action {
        width: 100%;
    }
}

@media screen and (max-width: 920px) {
    .detail-tagihan-toolbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-tagihan-toolbar-actions .detail-tagihan-action,
    .detail-tagihan-toolbar-actions form,
    .detail-tagihan-toolbar-actions form .detail-tagihan-action {
        width: 100%;
    }
}

@media screen and (max-width: 520px) {
    .detail-tagihan-toolbar-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   DETAIL TAGIHAN — MODE PC MUDAH DIBACA
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .detail-tagihan-toolbar-copy .eyebrow {
        font-size: 12px;
        letter-spacing: .08em;
    }

    body.app-ui-professional .detail-tagihan-toolbar-copy h2 {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -.02em;
    }

    body.app-ui-professional .detail-tagihan-toolbar-copy p {
        font-size: 15px;
        color: #475467;
    }

    body.app-ui-professional .detail-tagihan-summary,
    body.app-ui-professional .tagihan-items-panel,
    body.app-ui-professional .tagihan-history-panel,
    body.app-ui-professional .tagihan-action-card,
    body.app-ui-professional .tagihan-payment-history-card,
    body.app-ui-professional .tagihan-paid-card {
        padding: 22px;
        border-radius: 20px;
    }

    body.app-ui-professional .detail-tagihan-status-row {
        margin-bottom: 2px;
    }

    body.app-ui-professional .detail-tagihan-status-row .status-chip,
    body.app-ui-professional .detail-tagihan-status-row .pill,
    body.app-ui-professional .detail-tagihan-status-row .tagihan-status-chip {
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 800;
    }

    body.app-ui-professional .detail-tagihan-info-grid,
    body.app-ui-professional .detail-tagihan-money-grid {
        gap: 12px;
        margin-top: 16px;
    }

    body.app-ui-professional .detail-tagihan-info-grid > div,
    body.app-ui-professional .detail-tagihan-money-grid > div {
        min-height: 86px;
        padding: 15px 16px;
        border-radius: 14px;
        background: #fbfcfe;
    }

    body.app-ui-professional .detail-tagihan-info-grid span,
    body.app-ui-professional .detail-tagihan-money-grid span {
        font-size: 12px;
        font-weight: 800;
        color: #667085;
        letter-spacing: .01em;
    }

    body.app-ui-professional .detail-tagihan-info-grid strong,
    body.app-ui-professional .detail-tagihan-money-grid strong {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.35;
        font-weight: 850;
        color: #101828;
    }

    body.app-ui-professional .detail-tagihan-money-grid strong {
        font-size: 17px;
    }

    body.app-ui-professional .detail-tagihan-money-grid .outstanding strong {
        font-size: 18px;
    }

    body.app-ui-professional .detail-tagihan-note {
        margin-top: 14px;
        padding: 15px 16px;
        border-radius: 14px;
    }

    body.app-ui-professional .detail-tagihan-note span {
        font-size: 12px;
        font-weight: 850;
    }

    body.app-ui-professional .detail-tagihan-note p {
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.65;
    }

    body.app-ui-professional .tagihan-panel-heading {
        margin-bottom: 16px;
    }

    body.app-ui-professional .tagihan-panel-heading .eyebrow {
        font-size: 12px;
        letter-spacing: .08em;
    }

    body.app-ui-professional .tagihan-panel-heading h3 {
        font-size: 18px;
        line-height: 1.25;
    }

    body.app-ui-professional .tagihan-panel-heading > span {
        min-height: 32px;
        padding: 0 11px;
        font-size: 11px;
        font-weight: 800;
    }

    body.app-ui-professional .tagihan-item-list,
    body.app-ui-professional .tagihan-timeline,
    body.app-ui-professional .tagihan-payment-history-list {
        gap: 12px;
    }

    body.app-ui-professional .tagihan-item-row {
        min-height: 88px;
        padding: 16px 18px;
        border-radius: 14px;
    }

    body.app-ui-professional .tagihan-item-row > div:first-child span {
        font-size: 12px;
        font-weight: 800;
    }

    body.app-ui-professional .tagihan-item-row > div:first-child strong {
        margin-top: 6px;
        font-size: 15px;
        line-height: 1.4;
        font-weight: 850;
    }

    body.app-ui-professional .tagihan-item-row > div:first-child small {
        margin-top: 6px;
        font-size: 12px;
        font-weight: 700;
    }

    body.app-ui-professional .tagihan-item-calculation span {
        font-size: 12px;
        font-weight: 700;
    }

    body.app-ui-professional .tagihan-item-calculation strong {
        margin-top: 7px;
        font-size: 18px;
        font-weight: 900;
    }

    body.app-ui-professional .tagihan-timeline-item {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
        padding: 15px 16px;
        border-radius: 14px;
    }

    body.app-ui-professional .tagihan-timeline-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    body.app-ui-professional .tagihan-timeline-icon .ui-icon {
        width: 20px;
        height: 20px;
    }

    body.app-ui-professional .tagihan-timeline-item strong {
        font-size: 14px;
        font-weight: 850;
    }

    body.app-ui-professional .tagihan-timeline-item span {
        font-size: 12px;
        font-weight: 700;
    }

    body.app-ui-professional .tagihan-timeline-item p {
        margin: 7px 0;
        font-size: 13px;
        line-height: 1.65;
    }

    body.app-ui-professional .tagihan-timeline-item small {
        font-size: 11px;
        font-weight: 700;
    }
}


/* =========================================================
   KOLOM JUMLAH PEMBAYARAN — PERAPIHAN FINAL
========================================================= */

.tagihan-payment-modal .tagihan-payment-money {
    display: grid !important;
    align-items: stretch;
    gap: 0;
    padding: 0;
    grid-template-columns: 72px minmax(0, 1fr);
}

.tagihan-payment-modal .tagihan-payment-money .tagihan-payment-currency {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    height: 100%;
    margin: 0;
    padding: 0 12px;
    border-right: 1px solid #d9e2ef;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
    color: #1849a9;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.tagihan-payment-modal .tagihan-payment-money input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    height: 100%;
    margin: 0;
    padding: 0 18px 0 16px;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #101828;
    text-align: right;
    line-height: 1;
    appearance: textfield;
    -moz-appearance: textfield;
}

.tagihan-payment-modal .tagihan-payment-money input::-webkit-outer-spin-button,
.tagihan-payment-modal .tagihan-payment-money input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money {
        grid-template-columns: 74px minmax(0, 1fr);
        min-height: 62px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money .tagihan-payment-currency {
        min-height: 62px;
        font-size: 17px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money input {
        min-height: 62px;
        padding-right: 20px;
        font-size: 28px;
    }
}

@media screen and (max-width: 699px) {
    .tagihan-payment-modal .tagihan-payment-money {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .tagihan-payment-modal .tagihan-payment-money .tagihan-payment-currency {
        min-height: 54px;
        font-size: 16px;
    }

    .tagihan-payment-modal .tagihan-payment-money input {
        min-height: 54px;
        font-size: 22px;
    }
}


/* =========================================================
   KOLOM JUMLAH PEMBAYARAN — SEMPURNA & SERASI
========================================================= */

.tagihan-payment-amount-group {
    padding: 14px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.tagihan-payment-amount-heading {
    margin-bottom: 12px;
}

.tagihan-payment-amount-heading label {
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.tagihan-payment-modal .tagihan-payment-money {
    position: relative;
    overflow: hidden;
    border: 1px solid #cfd8e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.tagihan-payment-modal .tagihan-payment-money:hover {
    border-color: #b7c3d4;
}

.tagihan-payment-modal .tagihan-payment-money:focus-within {
    border-color: #528bff;
    box-shadow: 0 0 0 4px rgba(21,94,239,.10);
}

.tagihan-payment-modal .tagihan-payment-money .tagihan-payment-currency {
    min-height: 56px;
    background: #f8fbff;
    border-right: 1px solid #e3eaf5;
    color: #1849a9;
    font-size: 16px;
    font-weight: 900;
}

.tagihan-payment-modal .tagihan-payment-money input,
.tagihan-payment-modal .tagihan-payment-money input:hover,
.tagihan-payment-modal .tagihan-payment-money input:focus,
.tagihan-payment-modal .tagihan-payment-money input:focus-visible {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    height: 56px;
    margin: 0;
    padding: 0 18px 0 16px;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    color: #101828;
    text-align: right;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    caret-color: #155eef;
}

.tagihan-payment-modal .tagihan-payment-money input::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.tagihan-payment-amount-help {
    margin-top: 10px;
    padding: 0 2px;
}

.tagihan-payment-amount-help span {
    font-size: 12px;
    font-weight: 700;
}

.tagihan-payment-amount-help strong {
    font-size: 13px;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .tagihan-payment-amount-group {
        padding-top: 2px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money {
        grid-template-columns: 72px minmax(0, 1fr);
        min-height: 58px;
        border-radius: 15px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money .tagihan-payment-currency {
        min-height: 58px;
        font-size: 16px;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money input,
    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money input:hover,
    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money input:focus,
    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-money input:focus-visible {
        min-height: 58px;
        height: 58px;
        font-size: 25px;
    }
}

@media screen and (max-width: 699px) {
    .tagihan-payment-modal .tagihan-payment-money {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .tagihan-payment-modal .tagihan-payment-money .tagihan-payment-currency {
        min-height: 52px;
        font-size: 15px;
    }

    .tagihan-payment-modal .tagihan-payment-money input,
    .tagihan-payment-modal .tagihan-payment-money input:hover,
    .tagihan-payment-modal .tagihan-payment-money input:focus,
    .tagihan-payment-modal .tagihan-payment-money input:focus-visible {
        min-height: 52px;
        height: 52px;
        font-size: 22px;
    }
}


/* =========================================================
   DETAIL TAGIHAN — JUMLAH PEMBAYARAN SESUAI DESAIN
========================================================= */

.detail-tagihan-side .tagihan-action-card
.tagihan-payment-amount-group {
    display: grid;
    gap: 10px;
    margin: 18px 0 16px;
    padding: 14px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #f8fafc;
}

.detail-tagihan-side .tagihan-payment-amount-label {
    display: block;
    margin: 0;
    color: #344054;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.detail-tagihan-side .tagihan-payment-full-button {
    width: 100%;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #84adff;
    border-radius: 10px;
    background: #edf4ff;
    color: #1849a9;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: none;
}

.detail-tagihan-side .tagihan-payment-full-button:hover,
.detail-tagihan-side .tagihan-payment-full-button:focus-visible {
    border-color: #528bff;
    background: #dbeafe;
    color: #155eef;
    box-shadow: 0 6px 14px rgba(21,94,239,.14);
    outline: none;
    transform: translateY(-1px);
}

.detail-tagihan-side .tagihan-payment-full-button .ui-icon {
    width: 14px;
    height: 14px;
}

.detail-tagihan-side .tagihan-payment-money {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.detail-tagihan-side .tagihan-payment-money:hover {
    border-color: #b8c6dd;
}

.detail-tagihan-side .tagihan-payment-money:focus-within {
    border-color: #528bff;
    box-shadow: 0 0 0 4px rgba(21,94,239,.10);
}

.detail-tagihan-side .tagihan-payment-money
.tagihan-payment-currency {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    border-right: 1px solid #e1e8f2;
    background: #f8fafc;
    color: #344054;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

.detail-tagihan-side .tagihan-payment-money input,
.detail-tagihan-side .tagihan-payment-money input:hover,
.detail-tagihan-side .tagihan-payment-money input:focus,
.detail-tagihan-side .tagihan-payment-money input:focus-visible {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    height: 54px;
    margin: 0;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    background: #ffffff !important;
    color: #101828;
    text-align: right;
    font-size: 19px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.015em;
    box-shadow: none !important;
    caret-color: #155eef;
    appearance: none;
    -webkit-appearance: none;
}

.detail-tagihan-side .tagihan-payment-amount-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0 2px;
}

.detail-tagihan-side .tagihan-payment-amount-help span {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.detail-tagihan-side .tagihan-payment-amount-help strong {
    color: #1849a9;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .detail-tagihan-side
    .tagihan-payment-amount-group {
        padding: 14px;
        gap: 10px;
    }

    body.app-ui-professional .detail-tagihan-side
    .tagihan-payment-money {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        min-height: 54px;
    }

    body.app-ui-professional .detail-tagihan-side
    .tagihan-payment-money input,
    body.app-ui-professional .detail-tagihan-side
    .tagihan-payment-money input:hover,
    body.app-ui-professional .detail-tagihan-side
    .tagihan-payment-money input:focus,
    body.app-ui-professional .detail-tagihan-side
    .tagihan-payment-money input:focus-visible {
        min-height: 54px;
        height: 54px;
        font-size: 19px;
    }
}

@media screen and (max-width: 699px) {
    .detail-tagihan-side .tagihan-payment-amount-group {
        padding: 12px;
    }

    .detail-tagihan-side .tagihan-payment-full-button {
        min-height: 38px;
    }
}


/* =========================================================
   DETAIL TAGIHAN — RIWAYAT BAYAR MODE PC MUDAH DIBACA
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional
    .tagihan-payment-history-card {
        padding: 23px 22px;
    }

    body.app-ui-professional
    .tagihan-payment-history-card
    .tagihan-panel-heading.compact {
        margin-bottom: 18px;
    }

    body.app-ui-professional
    .tagihan-payment-history-card
    .tagihan-panel-heading .eyebrow {
        color: #155eef;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
    }

    body.app-ui-professional
    .tagihan-payment-history-card
    .tagihan-panel-heading h3 {
        margin-top: 7px;
        color: #101828;
        font-size: 21px;
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: -.025em;
    }

    body.app-ui-professional
    .tagihan-payment-history-card
    .tagihan-no-payment {
        min-height: 66px;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 15px 16px;
        border: 1px solid #e1e7f0;
        border-radius: 13px;
        background: #f8fafc;
        color: #475467;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.55;
    }

    body.app-ui-professional
    .tagihan-payment-history-list {
        gap: 0;
        overflow: hidden;
        border: 1px solid #e1e7f0;
        border-radius: 14px;
        background: #ffffff;
    }

    body.app-ui-professional
    .tagihan-payment-history-item {
        min-height: 76px;
        gap: 14px;
        padding: 14px 15px;
        border-bottom: 1px solid #e7ebf0;
        background: #ffffff;
    }

    body.app-ui-professional
    .tagihan-payment-history-item:hover {
        background: #f8fbff;
    }

    body.app-ui-professional
    .tagihan-payment-history-item > div {
        min-width: 0;
    }

    body.app-ui-professional
    .tagihan-payment-history-item strong {
        color: #067647;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.3;
        font-variant-numeric: tabular-nums;
    }

    body.app-ui-professional
    .tagihan-payment-history-item span {
        display: block;
        margin-top: 5px;
        color: #475467;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
    }

    body.app-ui-professional
    .tagihan-payment-history-item small {
        flex: 0 0 auto;
        color: #667085;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
        text-align: right;
        white-space: nowrap;
    }
}


/* =========================================================
   DETAIL TAGIHAN BULANAN — MODE PC MUDAH DIBACA
========================================================= */

@media screen and (min-width: 1181px) {

    /* Toolbar halaman */
    body.app-ui-professional .monthly-detail-toolbar {
        min-height: 112px;
        padding: 22px 24px;
    }

    body.app-ui-professional .monthly-detail-toolbar .eyebrow {
        font-size: 12px;
        letter-spacing: .08em;
    }

    body.app-ui-professional .monthly-detail-toolbar h2 {
        margin-top: 6px;
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: -.025em;
    }

    body.app-ui-professional .monthly-detail-toolbar p {
        margin-top: 7px;
        color: #475467;
        font-size: 14px;
        line-height: 1.5;
    }

    body.app-ui-professional .monthly-detail-actions {
        gap: 10px;
    }

    body.app-ui-professional .monthly-detail-actions .button {
        min-height: 46px;
        padding: 0 15px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 800;
    }

    /* Header dan identitas rekap */
    body.app-ui-professional .monthly-statement {
        gap: 18px;
    }

    body.app-ui-professional .monthly-statement-header,
    body.app-ui-professional .monthly-invoice-panel,
    body.app-ui-professional .monthly-activity-panel {
        padding: 23px 24px;
        border-radius: 20px;
    }

    body.app-ui-professional .monthly-statement-header .eyebrow,
    body.app-ui-professional .monthly-panel-heading .eyebrow {
        font-size: 12px;
        letter-spacing: .08em;
    }

    body.app-ui-professional .monthly-statement-header h1 {
        margin-top: 7px;
        font-size: 29px;
        font-weight: 880;
        line-height: 1.18;
        letter-spacing: -.03em;
    }

    body.app-ui-professional .monthly-statement-header p {
        margin-top: 9px;
        color: #475467;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
    }

    body.app-ui-professional .monthly-statement-status {
        min-height: 38px;
        padding: 0 14px;
        font-size: 11px;
        font-weight: 900;
    }

    /* Ringkasan angka */
    body.app-ui-professional .monthly-statement-summary {
        gap: 13px;
    }

    body.app-ui-professional .monthly-statement-summary > div {
        min-height: 110px;
        padding: 19px;
        border-radius: 16px;
        box-shadow: 0 3px 10px rgba(16, 24, 40, .035);
    }

    body.app-ui-professional .monthly-statement-summary span {
        color: #475467;
        font-size: 13px;
        font-weight: 800;
    }

    body.app-ui-professional .monthly-statement-summary strong {
        margin-top: 10px;
        font-size: 23px;
        line-height: 1.2;
    }

    body.app-ui-professional .monthly-statement-summary .outstanding strong {
        font-size: 24px;
    }

    /* Layout utama */
    body.app-ui-professional .monthly-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 430px);
        gap: 20px;
    }

    body.app-ui-professional .monthly-detail-main {
        gap: 20px;
    }

    body.app-ui-professional .monthly-detail-side {
        top: 104px;
    }

    /* Judul panel */
    body.app-ui-professional .monthly-panel-heading {
        margin-bottom: 18px;
    }

    body.app-ui-professional .monthly-panel-heading h3 {
        margin-top: 6px;
        font-size: 23px;
        font-weight: 860;
        line-height: 1.25;
        letter-spacing: -.02em;
    }

    body.app-ui-professional .monthly-panel-heading > span {
        min-height: 32px;
        padding: 0 11px;
        font-size: 11px;
        font-weight: 850;
    }

    /* Tabel nota */
    body.app-ui-professional .monthly-invoice-table-wrap {
        border-radius: 15px;
    }

    body.app-ui-professional .monthly-invoice-table {
        min-width: 1120px;
    }

    body.app-ui-professional .monthly-invoice-table thead th,
    body.app-ui-professional .monthly-invoice-table th {
        height: 50px;
        padding: 0 14px;
        color: #475467;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .04em;
    }

    body.app-ui-professional .monthly-invoice-table tbody td,
    body.app-ui-professional .monthly-invoice-table td {
        min-height: 80px;
        height: 80px;
        padding: 14px;
        color: #344054;
        font-size: 13px;
        line-height: 1.45;
    }

    body.app-ui-professional .monthly-note-number {
        font-size: 14px;
        font-weight: 900;
    }

    body.app-ui-professional .monthly-note-money,
    body.app-ui-professional .monthly-note-paid,
    body.app-ui-professional .monthly-note-outstanding {
        font-size: 15px;
        font-weight: 900;
    }

    body.app-ui-professional .monthly-invoice-table .table-subtext {
        margin-top: 7px;
        color: #667085;
        font-size: 11px;
        font-weight: 650;
        line-height: 1.4;
    }

    body.app-ui-professional .monthly-invoice-table .tagihan-due-badge,
    body.app-ui-professional .monthly-invoice-table .penjualan-payment-badge {
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
        font-weight: 900;
    }

    body.app-ui-professional .monthly-invoice-table .action-button {
        min-width: 68px;
        min-height: 40px;
        padding: 0 13px;
        font-size: 12px;
    }

    /* Riwayat aktivitas */
    body.app-ui-professional .monthly-activity-panel .tagihan-timeline {
        gap: 12px;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-item {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
        border-radius: 14px;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-icon {
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-icon .ui-icon {
        width: 21px;
        height: 21px;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-item strong {
        font-size: 14px;
        font-weight: 850;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-item span {
        font-size: 12px;
        font-weight: 700;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-item p {
        margin: 8px 0;
        color: #344054;
        font-size: 13px;
        line-height: 1.65;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-item small {
        color: #667085;
        font-size: 11px;
        font-weight: 700;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-history-empty strong {
        font-size: 16px;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-history-empty p {
        font-size: 13px;
        line-height: 1.6;
    }

    /* Panel pembayaran gabungan */
    body.app-ui-professional .monthly-payment-card {
        padding: 23px;
        border-radius: 19px;
    }

    body.app-ui-professional .monthly-payment-card .tagihan-action-card-heading h3 {
        margin-top: 5px;
        font-size: 21px;
        line-height: 1.25;
    }

    body.app-ui-professional .monthly-payment-card .tagihan-action-card-heading .eyebrow {
        font-size: 11px;
        letter-spacing: .075em;
    }

    body.app-ui-professional .monthly-allocation-note {
        margin-bottom: 17px;
        padding: 14px 15px;
        border-radius: 13px;
        font-size: 13px;
        line-height: 1.6;
    }

    body.app-ui-professional .monthly-payment-card .form-group {
        margin-bottom: 17px;
    }

    body.app-ui-professional .monthly-payment-card .form-group label {
        margin-bottom: 9px;
        font-size: 14px;
        font-weight: 800;
    }

    body.app-ui-professional .monthly-payment-card .tagihan-payment-money,
    body.app-ui-professional .monthly-payment-card select {
        min-height: 54px;
    }

    body.app-ui-professional .monthly-payment-card .tagihan-payment-money input {
        height: 54px;
        font-size: 22px;
        font-weight: 850;
    }

    body.app-ui-professional .monthly-payment-card .tagihan-payment-money span {
        font-size: 15px;
    }

    body.app-ui-professional .monthly-payment-card select {
        font-size: 15px;
        font-weight: 600;
    }

    body.app-ui-professional .monthly-payment-card textarea {
        min-height: 100px;
        padding: 14px 15px;
        font-size: 14px;
        line-height: 1.6;
    }

    body.app-ui-professional .monthly-payment-card .tagihan-full-action {
        min-height: 50px;
        font-size: 14px;
        font-weight: 850;
    }

    /* Kartu lunas */
    body.app-ui-professional .monthly-detail-side .tagihan-paid-card strong {
        font-size: 18px;
    }

    body.app-ui-professional .monthly-detail-side .tagihan-paid-card p {
        font-size: 13px;
        line-height: 1.6;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1399px) {
    body.app-ui-professional .monthly-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(350px, 390px);
        gap: 17px;
    }

    body.app-ui-professional .monthly-invoice-table {
        min-width: 1080px;
    }
}


/* =========================================================
   DETAIL TAGIHAN BULANAN — KOLOM UANG DISEMPURNAKAN
========================================================= */

.monthly-payment-amount-group {
    margin-bottom: 18px;
}

.monthly-payment-amount-group > label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.monthly-payment-fill-button {
    width: 100%;
    min-height: 42px;
    margin-bottom: 12px;
    border-color: #bcd0ff;
    background: #eef4ff;
    color: #1554d1;
    font-size: 14px;
    font-weight: 800;
}

.monthly-payment-fill-button:hover {
    border-color: #9db8ff;
    background: #e4eeff;
    color: #1849a9;
}

.monthly-payment-money-field {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: stretch;
    min-height: 52px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #cfd8e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.monthly-payment-money-field:hover {
    border-color: #b7c3d4;
}

.monthly-payment-money-field:focus-within {
    border-color: #528bff;
    box-shadow: 0 0 0 4px rgba(21,94,239,.10);
}

.monthly-payment-currency {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 10px;
    border-right: 1px solid #e3eaf5;
    background: #f8fbff;
    color: #1849a9;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.monthly-payment-money-field input,
.monthly-payment-money-field input:hover,
.monthly-payment-money-field input:focus,
.monthly-payment-money-field input:focus-visible {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #101828;
    text-align: right;
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.02em;
    appearance: none;
    -webkit-appearance: none;
    caret-color: #155eef;
}

.monthly-payment-money-field input::-webkit-outer-spin-button,
.monthly-payment-money-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.monthly-payment-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 0 2px;
}

.monthly-payment-help span {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.monthly-payment-help strong {
    color: #1554d1;
    font-size: 13px;
    font-weight: 900;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .monthly-payment-card .monthly-payment-amount-group > label {
        margin-bottom: 10px;
        font-size: 14px;
    }

    body.app-ui-professional .monthly-payment-fill-button {
        min-height: 44px;
        margin-bottom: 12px;
        border-radius: 13px;
    }

    body.app-ui-professional .monthly-payment-money-field {
        grid-template-columns: 58px minmax(0, 1fr);
        min-height: 54px;
        border-radius: 14px;
    }

    body.app-ui-professional .monthly-payment-currency {
        min-height: 54px;
        font-size: 15px;
    }

    body.app-ui-professional .monthly-payment-money-field input,
    body.app-ui-professional .monthly-payment-money-field input:hover,
    body.app-ui-professional .monthly-payment-money-field input:focus,
    body.app-ui-professional .monthly-payment-money-field input:focus-visible {
        min-height: 54px;
        height: 54px;
        font-size: 22px;
        padding-right: 18px;
    }
}


/* =========================================================
   DETAIL TAGIHAN BULANAN — ICON AKTIVITAS DISEMPURNAKAN
========================================================= */

.tagihan-timeline-item.is-created .tagihan-timeline-icon {
    background: linear-gradient(180deg, #eef4ff 0%, #e0ecff 100%);
    color: #1849a9;
    box-shadow: inset 0 0 0 1px rgba(24, 73, 169, 0.08);
}

.tagihan-timeline-item.is-payment .tagihan-timeline-icon {
    background: linear-gradient(180deg, #e8f8ee 0%, #d8f3e2 100%);
    color: #067647;
    box-shadow: inset 0 0 0 1px rgba(6, 118, 71, 0.08);
}

.tagihan-timeline-item.is-whatsapp .tagihan-timeline-icon {
    background: linear-gradient(180deg, #e7f9ef 0%, #d5f6e4 100%);
    color: #12b76a;
    box-shadow: inset 0 0 0 1px rgba(18, 183, 106, 0.10);
}

.tagihan-timeline-item.is-whatsapp .tagihan-timeline-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.tagihan-timeline-item.is-payment .tagihan-timeline-icon .ui-icon {
    width: 18px;
    height: 18px;
}

.tagihan-timeline-item.is-created .tagihan-timeline-icon .ui-icon {
    width: 18px;
    height: 18px;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-item.is-whatsapp .tagihan-timeline-icon .ui-icon {
        width: 22px;
        height: 22px;
    }

    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-item.is-payment .tagihan-timeline-icon .ui-icon,
    body.app-ui-professional .monthly-activity-panel .tagihan-timeline-item.is-created .tagihan-timeline-icon .ui-icon {
        width: 20px;
        height: 20px;
    }
}


/* =========================================================
   DETAIL TAGIHAN BULANAN — ICON WHATSAPP RESMI
========================================================= */

.monthly-activity-panel
.tagihan-timeline-item.is-whatsapp
.tagihan-timeline-icon {
    background: #25d366;
    color: #ffffff;
    box-shadow:
        0 7px 16px
        rgba(37, 211, 102, .24),
        inset 0 0 0 1px
        rgba(255, 255, 255, .20);
}

.monthly-activity-panel
.tagihan-timeline-item.is-whatsapp
.tagihan-timeline-icon .ui-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: none;
}

.monthly-activity-panel
.tagihan-timeline-item.is-whatsapp:hover
.tagihan-timeline-icon {
    background: #1fbd5b;
    box-shadow:
        0 9px 20px
        rgba(37, 211, 102, .30),
        inset 0 0 0 1px
        rgba(255, 255, 255, .22);
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional
    .monthly-activity-panel
    .tagihan-timeline-item.is-whatsapp
    .tagihan-timeline-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    body.app-ui-professional
    .monthly-activity-panel
    .tagihan-timeline-item.is-whatsapp
    .tagihan-timeline-icon .ui-icon {
        width: 24px;
        height: 24px;
    }
}


/* =========================================================
   DETAIL TAGIHAN BULANAN — TOMBOL WHATSAPP HEADER
========================================================= */

.monthly-detail-action-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    border-color: #25d366 !important;
    background: #25d366 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(18, 183, 106, 0.18);
}

.monthly-detail-action-whatsapp:hover,
.monthly-detail-action-whatsapp:focus-visible {
    border-color: #1fb959 !important;
    background: #1fb959 !important;
    color: #ffffff !important;
    box-shadow: 0 9px 20px rgba(18, 183, 106, 0.28);
}

.monthly-detail-action-whatsapp .ui-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .monthly-detail-action-whatsapp .ui-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
}


/* =========================================================
   PRINT REKAP BULANAN — HAPUS JATUH TEMPO & DETAIL
========================================================= */

@media print {
    .monthly-invoice-table .monthly-print-hide {
        display: none !important;
    }

    .monthly-invoice-table {
        table-layout: fixed;
    }

    .monthly-invoice-table th:nth-child(1),
    .monthly-invoice-table td:nth-child(1) {
        width: 20%;
    }

    .monthly-invoice-table th:nth-child(2),
    .monthly-invoice-table td:nth-child(2) {
        width: 15%;
    }

    .monthly-invoice-table th:nth-child(4),
    .monthly-invoice-table td:nth-child(4),
    .monthly-invoice-table th:nth-child(5),
    .monthly-invoice-table td:nth-child(5),
    .monthly-invoice-table th:nth-child(6),
    .monthly-invoice-table td:nth-child(6) {
        width: 16%;
    }

    .monthly-invoice-table th:nth-child(7),
    .monthly-invoice-table td:nth-child(7) {
        width: 17%;
    }
}


/* =========================================================
   PRINT REKAP BULANAN — TANGGAL & STATUS LEBIH MUDAH DIBACA
========================================================= */

@media print {
    .monthly-invoice-table thead th,
    .monthly-invoice-table th {
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .03em !important;
        color: #344054 !important;
    }

    .monthly-invoice-table tbody td,
    .monthly-invoice-table td {
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #1f2937 !important;
        vertical-align: middle !important;
    }

    .monthly-invoice-table td:nth-child(2) {
        font-size: 12.5px !important;
        font-weight: 800 !important;
        color: #344054 !important;
        white-space: nowrap !important;
    }

    .monthly-invoice-table th:nth-child(2),
    .monthly-invoice-table th:nth-child(7),
    .monthly-invoice-table td:nth-child(2),
    .monthly-invoice-table td:nth-child(7) {
        text-align: center !important;
    }

    .monthly-invoice-table .penjualan-payment-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 28px !important;
        padding: 4px 12px !important;
        border-radius: 999px !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        letter-spacing: .02em !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .monthly-invoice-table .monthly-note-number {
        font-size: 12.5px !important;
        font-weight: 900 !important;
    }

    .monthly-invoice-table .monthly-note-money,
    .monthly-invoice-table .monthly-note-paid,
    .monthly-invoice-table .monthly-note-outstanding {
        font-size: 12.5px !important;
        font-weight: 900 !important;
    }
}


/* =========================================================
   SPAREPART — TEKS NAMA, KODE, MEREK, BARCODE LEBIH MUDAH DIBACA
========================================================= */

.product-cell-with-photo {
    align-items: center;
}

.sparepart-desktop-data-table .product-cell strong {
    color: #101828;
    text-wrap: balance;
}

.sparepart-desktop-data-table .product-cell span {
    display: block;
    margin-top: 2px;
    color: #344054;
    font-weight: 800;
    letter-spacing: .01em;
}

.sparepart-desktop-data-table .product-cell small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: #475467;
    font-weight: 750;
    letter-spacing: .01em;
}

.sparepart-desktop-data-table .product-cell small::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #98a2b3;
    flex: 0 0 6px;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        font-size: 19px;
        line-height: 1.42;
        letter-spacing: -.015em;
        -webkit-line-clamp: 2;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell span {
        font-size: 14px;
        line-height: 1.45;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell small {
        font-size: 12px;
        line-height: 1.45;
    }

    body.app-ui-professional .product-list-photo {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
        border-radius: 14px;
    }

    body.app-ui-professional .sparepart-row td {
        height: 116px;
    }
}

@media screen and (min-width: 1450px) {
    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        font-size: 20px;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell span {
        font-size: 15px;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell small {
        font-size: 12.5px;
    }
}


/* =========================================================
   SPAREPART — TULISAN BARCODE LEBIH MUDAH DIBACA
========================================================= */

.sparepart-desktop-data-table .product-cell .sparepart-barcode-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    color: #344054;
}

.sparepart-desktop-data-table .product-cell .sparepart-barcode-text::before {
    display: none;
}

.sparepart-barcode-text b {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: #eef4ff;
    color: #1849a9;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.sparepart-barcode-text code {
    color: #101828;
    background: transparent;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: .035em;
    word-break: break-all;
}

.mobile-barcode-row {
    border-color: #d9e3f2;
    background: #f8fbff;
}

.mobile-barcode-row span {
    color: #1849a9;
    font-size: 12px;
    font-weight: 900;
}

.mobile-barcode-row code {
    color: #101828;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .035em;
    word-break: break-all;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .sparepart-barcode-text b {
        min-height: 26px;
        padding: 0 9px;
        font-size: 12px;
    }

    body.app-ui-professional .sparepart-barcode-text code {
        font-size: 13px;
        font-weight: 900;
    }
}

@media screen and (min-width: 1450px) {
    body.app-ui-professional .sparepart-barcode-text b {
        font-size: 12.5px;
    }

    body.app-ui-professional .sparepart-barcode-text code {
        font-size: 13.5px;
    }
}


/* =========================================================
   SPAREPART — NAMA, KODE, DAN MEREK KEMBALI SEPERTI AWAL
   Penyempurnaan barcode tetap dipertahankan.
========================================================= */

.sparepart-desktop-data-table .product-cell strong {
    margin: 0 0 5px;
    overflow: hidden;
    color: #101828;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.38;
    letter-spacing: -.01em;
    text-wrap: initial;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sparepart-desktop-data-table .product-cell > span {
    display: block;
    margin-top: 0;
    overflow: hidden;
    color: #344054;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        font-size: 16px;
        line-height: 1.38;
        letter-spacing: -.01em;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell > span {
        font-size: 12px;
        line-height: 1.4;
    }
}

@media screen and (min-width: 1450px) {
    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        font-size: 17px;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell > span {
        font-size: 12px;
    }
}


/* =========================================================
   SPAREPART — NAMA, KODE, DAN MEREK DIPERKECIL SEPERTI AWAL
   Barcode tetap menggunakan ukuran yang sudah diperjelas.
========================================================= */

.sparepart-desktop-data-table .product-cell strong {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.sparepart-desktop-data-table .product-cell > span {
    margin-top: 0;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        font-size: 14px;
        line-height: 1.35;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell > span {
        font-size: 11px;
        line-height: 1.35;
    }
}

@media screen and (min-width: 1450px) {
    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        font-size: 15px;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell > span {
        font-size: 11px;
    }
}


/* =========================================================
   SPAREPART MODE PC — JUDUL KOLOM LEBIH MUDAH DIBACA
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .sparepart-desktop-data-table thead th {
        height: 56px;
        padding: 12px 10px;
        font-size: 11.5px;
        line-height: 1.25;
        font-weight: 900;
        letter-spacing: .035em;
        color: #475467;
        white-space: nowrap;
        vertical-align: middle;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th:nth-child(1) {
        min-width: 280px;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th:nth-child(8),
    body.app-ui-professional .sparepart-desktop-data-table thead th:nth-child(9),
    body.app-ui-professional .sparepart-desktop-data-table thead th:nth-child(10) {
        min-width: 118px;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th:last-child {
        min-width: 88px;
        text-align: center;
    }
}

@media screen and (min-width: 1450px) {
    body.app-ui-professional .sparepart-desktop-data-table thead th {
        font-size: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* =========================================================
   SPAREPART MODE PC — JUDUL KOLOM FINAL MUDAH DIBACA
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .sparepart-desktop-table {
        overflow-x: auto;
    }

    body.app-ui-professional .sparepart-desktop-data-table {
        min-width: 1580px;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th {
        height: 62px !important;
        min-height: 62px !important;
        padding: 12px 14px !important;
        background: #f8fafc !important;
        color: #344054 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.3 !important;
        letter-spacing: .02em !important;
        text-transform: uppercase;
        vertical-align: middle !important;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th:first-child {
        padding-left: 18px !important;
        text-align: left;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th:last-child {
        padding-right: 18px !important;
        text-align: center;
    }

    body.app-ui-professional .sparepart-col-product {
        width: 26%;
        min-width: 330px;
    }

    body.app-ui-professional .sparepart-col-category,
    body.app-ui-professional .sparepart-col-supplier,
    body.app-ui-professional .sparepart-col-owner,
    body.app-ui-professional .sparepart-col-stock,
    body.app-ui-professional .sparepart-col-rack {
        min-width: 120px;
    }

    body.app-ui-professional .sparepart-col-buy,
    body.app-ui-professional .sparepart-col-general-price,
    body.app-ui-professional .sparepart-col-customer-price,
    body.app-ui-professional .sparepart-col-margin {
        min-width: 145px;
    }

    body.app-ui-professional .sparepart-col-action {
        min-width: 100px;
    }
}

@media screen and (min-width: 1500px) {
    body.app-ui-professional .sparepart-desktop-data-table thead th {
        font-size: 13.5px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* =========================================================
   SPAREPART MODE PC — TIPOGRAFI PROFESIONAL DAN MUDAH DILIHAT
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .sparepart-desktop-data-table {
        min-width: 1460px;
    }

    body.app-ui-professional .sparepart-row td {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th {
        color: #344054;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .035em;
    }

    body.app-ui-professional .product-list-photo {
        width: 76px;
        height: 76px;
        border-radius: 16px;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        margin-bottom: 6px;
        color: #101828;
        font-size: 18px;
        font-weight: 850;
        line-height: 1.34;
        letter-spacing: -.012em;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell span {
        margin-top: 0;
        color: #344054;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.45;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell small {
        margin-top: 7px;
        color: #475467;
        font-size: 11.5px;
        font-weight: 750;
        line-height: 1.45;
    }

    body.app-ui-professional .sparepart-desktop-data-table .table-pill {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 850;
        line-height: 1.2;
    }

    body.app-ui-professional .sparepart-owner-cell {
        gap: 6px;
    }

    body.app-ui-professional .sparepart-owner-cell strong {
        color: #101828;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: -.01em;
    }

    body.app-ui-professional .sparepart-owner-cell small {
        color: #667085;
        font-size: 11.5px;
        font-weight: 750;
        line-height: 1.45;
    }

    body.app-ui-professional .sparepart-col-stock-cell .badge {
        min-width: 84px;
        min-height: 34px;
        padding: 7px 12px;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .02em;
    }

    body.app-ui-professional .sparepart-col-stock-cell .table-subtext,
    body.app-ui-professional .sparepart-col-margin-cell .table-subtext {
        margin-top: 8px;
        color: #667085;
        font-size: 11.5px;
        font-weight: 750;
        line-height: 1.45;
    }

    body.app-ui-professional .sparepart-col-buy-cell .price-text,
    body.app-ui-professional .sparepart-col-general-price-cell .price-text,
    body.app-ui-professional .sparepart-col-customer-price-cell .price-text,
    body.app-ui-professional .sparepart-col-margin-cell .profit-text {
        font-size: 17px;
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: -.01em;
        font-variant-numeric: tabular-nums;
    }

    body.app-ui-professional .sparepart-col-rack-cell .table-pill {
        min-width: 78px;
        justify-content: center;
    }

    body.app-ui-professional .sparepart-col-action-cell {
        text-align: center;
    }

    body.app-ui-professional .sparepart-col-action-cell .button-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    body.app-ui-professional .sparepart-col-action-cell .button-icon .ui-icon {
        width: 17px;
        height: 17px;
    }
}

@media screen and (min-width: 1450px) {
    body.app-ui-professional .sparepart-desktop-data-table thead th {
        font-size: 12.5px;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        font-size: 19px;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell span {
        font-size: 13.5px;
    }

    body.app-ui-professional .sparepart-owner-cell strong {
        font-size: 15.5px;
    }

    body.app-ui-professional .sparepart-col-buy-cell .price-text,
    body.app-ui-professional .sparepart-col-general-price-cell .price-text,
    body.app-ui-professional .sparepart-col-customer-price-cell .price-text,
    body.app-ui-professional .sparepart-col-margin-cell .profit-text {
        font-size: 18px;
    }
}


/* =========================================================
   SPAREPART.PHP — MODE PC PROFESIONAL FINAL
   Seluruh tipografi halaman dibuat seragam dan mudah dibaca.
========================================================= */

@media screen and (min-width: 1181px) {
    /* Toolbar halaman */
    body.app-ui-professional .sparepart-page-toolbar {
        min-height: 118px;
        padding: 24px 26px;
        border-radius: 20px;
    }

    body.app-ui-professional .sparepart-page-toolbar .eyebrow {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .075em;
    }

    body.app-ui-professional .sparepart-page-toolbar h2 {
        margin-top: 7px;
        font-size: 28px;
        font-weight: 880;
        line-height: 1.18;
        letter-spacing: -.025em;
    }

    body.app-ui-professional .sparepart-page-toolbar p {
        margin-top: 7px;
        color: #667085;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.55;
    }

    body.app-ui-professional .sparepart-toolbar-actions {
        gap: 10px;
    }

    body.app-ui-professional .sparepart-toolbar-actions .button {
        min-height: 46px;
        padding: 0 17px;
        border-radius: 13px;
        font-size: 13px;
        font-weight: 820;
    }

    /* Kartu ringkasan */
    body.app-ui-professional .sparepart-summary-cards {
        gap: 14px;
    }

    body.app-ui-professional .sparepart-summary-cards .summary-mini-card {
        min-height: 116px;
        padding: 19px 20px;
        border-radius: 18px;
    }

    body.app-ui-professional .sparepart-summary-cards .summary-mini-card > span {
        color: #667085;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.4;
    }

    body.app-ui-professional .sparepart-summary-cards .summary-mini-card > strong {
        margin-top: 8px;
        color: #101828;
        font-size: 27px;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: -.025em;
    }

    body.app-ui-professional .sparepart-summary-cards .summary-mini-card > strong.money-small {
        font-size: 24px !important;
    }

    body.app-ui-professional .sparepart-summary-cards .summary-mini-card > small {
        margin-top: 7px;
        color: #98a2b3;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.4;
    }

    /* Panel daftar */
    body.app-ui-professional .sparepart-management-panel {
        padding: 25px;
        border-radius: 21px;
    }

    body.app-ui-professional .sparepart-list-heading {
        margin-bottom: 18px;
    }

    body.app-ui-professional .sparepart-list-heading .eyebrow {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .075em;
    }

    body.app-ui-professional .sparepart-list-heading h3 {
        margin-top: 7px;
        color: #101828;
        font-size: 25px;
        font-weight: 880;
        line-height: 1.2;
        letter-spacing: -.025em;
    }

    body.app-ui-professional .sparepart-list-heading p {
        margin-top: 7px;
        color: #667085;
        font-size: 13px;
        font-weight: 650;
    }

    body.app-ui-professional .sparepart-list-heading .result-number {
        color: #101828;
        font-size: 14px;
        font-weight: 900;
    }

    body.app-ui-professional .active-filter-badge {
        min-height: 32px;
        padding: 0 12px;
        font-size: 11px;
        font-weight: 850;
    }

    /* Filter */
    body.app-ui-professional .sparepart-filter-bar {
        gap: 10px;
        margin-bottom: 20px;
    }

    body.app-ui-professional .sparepart-filter-bar input,
    body.app-ui-professional .sparepart-filter-bar select,
    body.app-ui-professional .sparepart-filter-bar .button {
        min-height: 48px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 650;
    }

    body.app-ui-professional .sparepart-filter-bar .button {
        padding: 0 18px;
        font-weight: 820;
    }

    body.app-ui-professional .sparepart-search-box input {
        padding-left: 43px;
    }

    body.app-ui-professional .sparepart-search-box .search-leading-icon {
        color: #667085;
    }

    /* Tabel */
    body.app-ui-professional .sparepart-desktop-table {
        border-color: #d9e2ef;
        border-radius: 16px;
    }

    body.app-ui-professional .sparepart-desktop-data-table {
        width: 100%;
        min-width: 1540px;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th {
        height: 58px !important;
        padding: 12px 13px !important;
        background: #f8fafc !important;
        color: #344054 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase;
        vertical-align: middle !important;
    }

    body.app-ui-professional .sparepart-row td {
        min-height: 112px;
        height: 112px;
        padding: 17px 13px;
        color: #344054;
        font-size: 13px;
        line-height: 1.45;
    }

    body.app-ui-professional .sparepart-row:hover td {
        background: #f8fbff;
    }

    /* Identitas barang */
    body.app-ui-professional .product-cell-with-photo {
        gap: 14px;
        align-items: center;
    }

    body.app-ui-professional .product-list-photo {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
        border-radius: 14px;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        margin: 0 0 5px;
        color: #101828;
        font-size: 16px;
        font-weight: 880;
        line-height: 1.38;
        letter-spacing: -.012em;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell > span {
        margin: 0;
        color: #344054;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.4;
    }

    body.app-ui-professional .sparepart-desktop-data-table .sparepart-barcode-text {
        margin-top: 7px;
        color: #344054;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.4;
    }

    body.app-ui-professional .sparepart-desktop-data-table .sparepart-barcode-text b {
        min-height: 25px;
        padding: 0 8px;
        border-radius: 8px;
        background: #eef4ff;
        color: #155eef;
        font-size: 11px;
        font-weight: 900;
    }

    body.app-ui-professional .sparepart-desktop-data-table .sparepart-barcode-text code {
        color: #101828;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .035em;
    }

    /* Kategori, supplier, pemilik */
    body.app-ui-professional .sparepart-desktop-data-table .table-pill {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 850;
        line-height: 1.25;
    }

    body.app-ui-professional .sparepart-owner-cell {
        gap: 5px;
    }

    body.app-ui-professional .sparepart-owner-cell strong {
        color: #101828;
        font-size: 14px;
        font-weight: 900;
        line-height: 1.35;
    }

    body.app-ui-professional .sparepart-owner-cell small {
        color: #667085;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
    }

    /* Stok */
    body.app-ui-professional .sparepart-col-stock-cell .badge {
        min-width: 78px;
        min-height: 34px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 900;
    }

    body.app-ui-professional .sparepart-col-stock-cell .table-subtext,
    body.app-ui-professional .sparepart-col-margin-cell .table-subtext {
        margin-top: 7px;
        color: #667085;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
    }

    /* Nominal */
    body.app-ui-professional .sparepart-col-buy-cell .price-text,
    body.app-ui-professional .sparepart-col-general-price-cell .price-text,
    body.app-ui-professional .sparepart-col-customer-price-cell .price-text,
    body.app-ui-professional .sparepart-col-margin-cell .profit-text {
        color: #101828;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: -.01em;
        font-variant-numeric: tabular-nums;
    }

    body.app-ui-professional .sparepart-col-general-price-cell .price-sale {
        color: #1849a9;
    }

    body.app-ui-professional .sparepart-col-customer-price-cell .price-customer {
        color: #6941c6;
    }

    body.app-ui-professional .sparepart-col-margin-cell .profit-text {
        color: #027a48;
    }

    /* Rak dan aksi */
    body.app-ui-professional .sparepart-col-rack-cell .table-pill {
        min-width: 76px;
        justify-content: center;
    }

    body.app-ui-professional .sparepart-action-buttons {
        gap: 8px;
        justify-content: center;
    }

    body.app-ui-professional .sparepart-icon-action {
        width: 42px;
        min-width: 42px !important;
        height: 42px;
        min-height: 42px !important;
        border-radius: 12px !important;
    }

    body.app-ui-professional .sparepart-icon-action .ui-icon {
        width: 18px;
        height: 18px;
    }
}

@media screen and (min-width: 1500px) {
    body.app-ui-professional .sparepart-desktop-data-table {
        min-width: 1600px;
    }

    body.app-ui-professional .sparepart-desktop-data-table thead th {
        font-size: 12.5px !important;
    }

    body.app-ui-professional .sparepart-desktop-data-table .product-cell strong {
        font-size: 17px;
    }

    body.app-ui-professional .sparepart-col-buy-cell .price-text,
    body.app-ui-professional .sparepart-col-general-price-cell .price-text,
    body.app-ui-professional .sparepart-col-customer-price-cell .price-text,
    body.app-ui-professional .sparepart-col-margin-cell .profit-text {
        font-size: 16px;
    }
}


/* =========================================================
   TAGIHAN.PHP — MODE PC PROFESIONAL FINAL
========================================================= */

@media screen and (min-width: 1181px) {
    /* Toolbar utama */
    body.app-ui-professional .tagihan-page-toolbar {
        min-height: 126px;
        padding: 25px 28px;
        border-radius: 21px;
    }

    body.app-ui-professional .tagihan-page-toolbar .eyebrow {
        margin-bottom: 7px;
        color: #155eef;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .085em;
    }

    body.app-ui-professional .tagihan-page-toolbar h2 {
        margin: 0;
        color: #101828;
        font-size: 29px;
        font-weight: 860;
        line-height: 1.18;
        letter-spacing: -.025em;
    }

    body.app-ui-professional .tagihan-page-toolbar p {
        margin-top: 8px;
        color: #667085;
        font-size: 14px;
        font-weight: 550;
        line-height: 1.55;
    }

    body.app-ui-professional .tagihan-toolbar-actions {
        gap: 11px;
    }

    body.app-ui-professional .tagihan-toolbar-actions .button {
        min-height: 48px;
        padding: 0 17px;
        border-radius: 13px;
        font-size: 13px;
        font-weight: 800;
    }

    body.app-ui-professional .tagihan-toolbar-actions .ui-icon {
        width: 17px;
        height: 17px;
    }

    /* Ringkasan */
    body.app-ui-professional .tagihan-summary-grid {
        gap: 14px;
    }

    body.app-ui-professional .tagihan-summary-grid .compact-summary-card {
        min-height: 126px;
        padding: 21px 22px;
        border-radius: 18px;
    }

    body.app-ui-professional .tagihan-summary-grid .compact-summary-card > span {
        color: #667085;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.35;
    }

    body.app-ui-professional .tagihan-summary-grid .compact-summary-card > strong {
        margin-top: 10px;
        color: #101828;
        font-size: 26px;
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: -.025em;
        font-variant-numeric: tabular-nums;
    }

    body.app-ui-professional .tagihan-summary-grid .compact-summary-card > strong.compact-money {
        font-size: 23px;
    }

    body.app-ui-professional .tagihan-summary-grid .compact-summary-card > small {
        margin-top: 9px;
        color: #98a2b3;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.4;
    }

    body.app-ui-professional .tagihan-summary-grid .tagihan-overdue-summary > strong {
        color: #b42318;
    }

    /* Panel daftar */
    body.app-ui-professional .tagihan-list-panel {
        padding: 28px;
        border-radius: 21px;
    }

    body.app-ui-professional .tagihan-list-header {
        margin-bottom: 20px;
    }

    body.app-ui-professional .tagihan-list-header .eyebrow {
        color: #155eef;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
    }

    body.app-ui-professional .tagihan-list-header h3 {
        margin-top: 7px;
        color: #101828;
        font-size: 26px;
        font-weight: 860;
        line-height: 1.2;
        letter-spacing: -.025em;
    }

    body.app-ui-professional .tagihan-list-header p {
        margin-top: 7px;
        color: #667085;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.45;
    }

    /* Filter */
    body.app-ui-professional .tagihan-filter-toolbar {
        grid-template-columns:
            minmax(360px, 1fr)
            minmax(190px, 230px)
            minmax(190px, 230px)
            auto;
        gap: 11px;
        margin-bottom: 22px;
    }

    body.app-ui-professional .tagihan-filter-search,
    body.app-ui-professional .tagihan-filter-field,
    body.app-ui-professional .tagihan-filter-actions .button {
        min-height: 52px;
        border-radius: 13px;
    }

    body.app-ui-professional .tagihan-filter-search input,
    body.app-ui-professional .tagihan-filter-field select {
        min-height: 52px;
        color: #101828;
        font-size: 14px;
        font-weight: 650;
    }

    body.app-ui-professional .tagihan-filter-search input::placeholder {
        color: #98a2b3;
        font-weight: 550;
    }

    body.app-ui-professional .tagihan-filter-field > span {
        color: #667085;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .04em;
    }

    body.app-ui-professional .tagihan-filter-actions {
        gap: 9px;
    }

    body.app-ui-professional .tagihan-filter-actions .button {
        padding: 0 17px;
        font-size: 13px;
        font-weight: 850;
    }

    /* Tabel */
    body.app-ui-professional .tagihan-desktop-table {
        border-radius: 16px;
    }

    body.app-ui-professional .tagihan-data-table {
        min-width: 1260px;
        table-layout: fixed;
    }

    body.app-ui-professional .tagihan-data-table thead th {
        height: 56px;
        padding: 0 15px;
        color: #344054;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .045em;
        line-height: 1.25;
    }

    body.app-ui-professional .tagihan-data-table thead th:nth-child(1) {
        width: 24%;
    }

    body.app-ui-professional .tagihan-data-table thead th:nth-child(2) {
        width: 15%;
    }

    body.app-ui-professional .tagihan-data-table thead th:nth-child(3),
    body.app-ui-professional .tagihan-data-table thead th:nth-child(4),
    body.app-ui-professional .tagihan-data-table thead th:nth-child(5) {
        width: 13%;
    }

    body.app-ui-professional .tagihan-data-table thead th:nth-child(6) {
        width: 14%;
    }

    body.app-ui-professional .tagihan-data-table thead th:nth-child(7) {
        width: 15%;
    }

    body.app-ui-professional .tagihan-data-table tbody td {
        height: 108px;
        padding: 17px 15px;
        color: #344054;
        font-size: 14px;
        line-height: 1.5;
        vertical-align: middle;
    }

    body.app-ui-professional .tagihan-customer-cell {
        gap: 5px;
    }

    body.app-ui-professional .tagihan-customer-cell a {
        color: #155eef;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: -.01em;
    }

    body.app-ui-professional .tagihan-customer-cell strong {
        color: #101828;
        font-size: 15px;
        font-weight: 850;
        line-height: 1.4;
    }

    body.app-ui-professional .tagihan-customer-cell small {
        color: #667085;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.4;
    }

    body.app-ui-professional .tagihan-due-badge,
    body.app-ui-professional .tagihan-status-badge {
        min-height: 32px;
        padding: 0 11px;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .02em;
    }

    body.app-ui-professional .tagihan-data-table .table-subtext {
        display: block;
        margin-top: 8px;
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
    }

    body.app-ui-professional .tagihan-money,
    body.app-ui-professional .tagihan-paid-value,
    body.app-ui-professional .tagihan-outstanding-value {
        font-size: 17px;
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: -.012em;
        font-variant-numeric: tabular-nums;
    }

    body.app-ui-professional .tagihan-table-actions {
        gap: 8px;
    }

    body.app-ui-professional .tagihan-table-actions .tagihan-action-icon-only {
        width: 43px;
        min-width: 43px;
        height: 43px;
        min-height: 43px;
        border-radius: 12px;
    }

    body.app-ui-professional .tagihan-table-actions .tagihan-action-icon-only .ui-icon {
        width: 18px;
        height: 18px;
    }

    /* Empty state */
    body.app-ui-professional .tagihan-empty-state strong {
        color: #101828;
        font-size: 18px;
        font-weight: 850;
    }

    body.app-ui-professional .tagihan-empty-state p {
        margin-top: 7px;
        color: #667085;
        font-size: 14px;
        line-height: 1.55;
    }

    /* Modal pembayaran */
    body.app-ui-professional .tagihan-payment-modal .eyebrow {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
    }

    body.app-ui-professional .tagihan-payment-modal .app-modal-header h3 {
        color: #101828;
        font-size: 22px;
        font-weight: 860;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-context span {
        color: #155eef;
        font-size: 12px;
        font-weight: 850;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-context strong {
        color: #101828;
        font-size: 16px;
        font-weight: 900;
    }

    body.app-ui-professional .tagihan-payment-modal .tagihan-payment-context p {
        color: #667085;
        font-size: 13px;
        font-weight: 650;
    }

    body.app-ui-professional .tagihan-payment-modal label {
        color: #344054;
        font-size: 14px;
        font-weight: 850;
    }

    body.app-ui-professional .tagihan-payment-modal select,
    body.app-ui-professional .tagihan-payment-modal textarea {
        color: #101828;
        font-size: 14px;
        font-weight: 650;
    }

    body.app-ui-professional .tagihan-payment-modal .modal-actions .button {
        font-size: 14px;
        font-weight: 850;
    }
}

@media screen and (min-width: 1450px) {
    body.app-ui-professional .tagihan-data-table thead th {
        font-size: 12.5px;
    }

    body.app-ui-professional .tagihan-data-table tbody td {
        font-size: 14.5px;
    }

    body.app-ui-professional .tagihan-money,
    body.app-ui-professional .tagihan-paid-value,
    body.app-ui-professional .tagihan-outstanding-value {
        font-size: 18px;
    }
}


/* =========================================================
   KASIR MODE PC — SEMUA TULISAN PROFESIONAL
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .cashier-page-toolbar {
        min-height: 118px;
        padding: 22px 26px;
    }

    body.app-ui-professional .cashier-toolbar-copy .eyebrow,
    body.app-ui-professional .cashier-buyer-header .eyebrow,
    body.app-ui-professional .cashier-search-heading .eyebrow,
    body.app-ui-professional .cashier-cart-title .eyebrow,
    body.app-ui-professional .cashier-payment-heading .eyebrow {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .075em;
    }

    body.app-ui-professional .cashier-toolbar-copy h2 {
        margin-top: 6px;
        font-size: 28px;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: -.02em;
    }

    body.app-ui-professional .cashier-toolbar-copy p {
        margin-top: 6px;
        color: #667085;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.55;
    }

    body.app-ui-professional .cashier-today-summary span {
        color: #667085;
        font-size: 11px;
        font-weight: 800;
    }

    body.app-ui-professional .cashier-today-summary strong {
        font-size: 15px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-today-summary small {
        font-size: 13px;
        font-weight: 800;
    }

    body.app-ui-professional .cashier-history-button {
        min-height: 48px;
        font-size: 14px;
        font-weight: 800;
    }

    body.app-ui-professional .cashier-buyer-header h3,
    body.app-ui-professional .cashier-cart-header h3 {
        font-size: 24px;
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: -.02em;
    }

    body.app-ui-professional .cashier-buyer-header p {
        color: #667085;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.6;
    }

    body.app-ui-professional .cashier-price-mode,
    body.app-ui-professional .cashier-scanner-badge {
        font-size: 11px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-customer-row label,
    body.app-ui-professional .cashier-payment-form .form-group label {
        color: #344054;
        font-size: 14px;
        font-weight: 850;
    }

    body.app-ui-professional .cashier-select-shell select,
    body.app-ui-professional .cashier-add-customer,
    body.app-ui-professional .cashier-payment-form select,
    body.app-ui-professional .cashier-payment-form textarea,
    body.app-ui-professional .cashier-payment-form > .form-group > input {
        font-size: 15px;
        font-weight: 650;
    }

    body.app-ui-professional .cashier-search-heading label {
        color: #101828;
        font-size: 16px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-search-input-wrap input {
        min-height: 54px;
        color: #101828;
        font-size: 16px;
        font-weight: 650;
    }

    body.app-ui-professional .cashier-search-help small {
        color: #667085;
        font-size: 11.5px;
        font-weight: 650;
        line-height: 1.5;
    }

    body.app-ui-professional .cashier-product-feedback {
        font-size: 12px;
        font-weight: 750;
    }

    body.app-ui-professional .cashier-product-code {
        color: #667085;
        font-size: 11.5px;
        font-weight: 850;
        letter-spacing: .02em;
    }

    body.app-ui-professional .cashier-product-content h4 {
        margin: 8px 0 10px;
        color: #101828;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.42;
        letter-spacing: -.01em;
    }

    body.app-ui-professional .cashier-product-stock span {
        color: #667085;
        font-size: 10.5px;
        font-weight: 750;
    }

    body.app-ui-professional .cashier-product-stock strong {
        color: #344054;
        font-size: 12px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-product-price {
        color: #1554d1;
        font-size: 19px;
        font-weight: 900;
        letter-spacing: -.015em;
    }

    body.app-ui-professional .cashier-product-price-type {
        color: #667085;
        font-size: 10.5px;
        font-weight: 750;
    }

    body.app-ui-professional .cashier-cart-header h3 span {
        font-size: 12px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-clear-button {
        font-size: 12px;
        font-weight: 850;
    }

    body.app-ui-professional .cashier-cart-item-info span {
        color: #667085;
        font-size: 11px;
        font-weight: 800;
    }

    body.app-ui-professional .cashier-cart-item-info strong {
        color: #101828;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.4;
    }

    body.app-ui-professional .cashier-cart-item-info small {
        color: #667085;
        font-size: 11.5px;
        font-weight: 650;
        line-height: 1.45;
    }

    body.app-ui-professional .cashier-cart-item-total {
        color: #101828;
        font-size: 17px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-quantity-control input,
    body.app-ui-professional .cashier-quantity-control button {
        font-size: 14px;
        font-weight: 850;
    }

    body.app-ui-professional .cashier-subtotal-row span,
    body.app-ui-professional .cashier-discount-row label,
    body.app-ui-professional .cashier-grand-total span,
    body.app-ui-professional .cashier-change-box span {
        color: #344054;
        font-size: 13px;
        font-weight: 850;
    }

    body.app-ui-professional .cashier-subtotal-row strong {
        font-size: 18px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-grand-total strong {
        font-size: 27px;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    body.app-ui-professional .cashier-money-input .cashier-money-prefix,
    body.app-ui-professional .cashier-money-input input {
        font-size: 15px;
        font-weight: 850;
    }

    body.app-ui-professional .cashier-paid-input input {
        font-size: 20px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-payment-heading h4 {
        margin-top: 5px;
        font-size: 20px;
        font-weight: 900;
        line-height: 1.3;
    }

    body.app-ui-professional .cashier-change-box strong {
        font-size: 19px;
        font-weight: 900;
    }

    body.app-ui-professional .cashier-debt-due-group small,
    body.app-ui-professional .cashier-payment-form label small {
        color: #98a2b3;
        font-size: 11px;
        font-weight: 700;
    }

    body.app-ui-professional .cashier-submit-feedback {
        font-size: 12px;
        font-weight: 750;
    }

    body.app-ui-professional .cashier-submit-button {
        min-height: 52px;
        font-size: 15px;
        font-weight: 900;
    }
}

@media screen and (min-width: 1500px) {
    body.app-ui-professional .cashier-product-content h4 {
        font-size: 16.5px;
    }

    body.app-ui-professional .cashier-cart-item-info strong {
        font-size: 16.5px;
    }

    body.app-ui-professional .cashier-product-price {
        font-size: 20px;
    }
}


/* =========================================================
   KASIR MODE PC — HEADER DISEMPURNAKAN
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .cashier-page-toolbar {
        position: relative;
        min-height: 124px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 22px 26px;
        border: 1px solid #dbe3ef;
        border-radius: 22px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
        box-shadow: 0 14px 34px rgba(16, 24, 40, 0.05);
        overflow: hidden;
    }

    body.app-ui-professional .cashier-page-toolbar::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: linear-gradient(180deg, #2563eb 0%, #5b8cff 100%);
    }

    body.app-ui-professional .cashier-toolbar-copy {
        min-width: 0;
        flex: 1 1 auto;
        padding-left: 4px;
    }

    body.app-ui-professional .cashier-toolbar-copy .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #2563eb;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    body.app-ui-professional .cashier-toolbar-copy h2 {
        margin: 8px 0 0;
        color: #101828;
        font-size: 38px;
        font-weight: 900;
        line-height: 1.12;
        letter-spacing: -.03em;
    }

    body.app-ui-professional .cashier-toolbar-actions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    body.app-ui-professional .cashier-today-summary {
        min-width: 150px;
        min-height: 86px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 14px 16px;
        border: 1px solid #d9e2ef;
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    }

    body.app-ui-professional .cashier-today-summary span {
        color: #667085;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    body.app-ui-professional .cashier-today-summary strong {
        margin-top: 4px;
        color: #101828;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.35;
    }

    body.app-ui-professional .cashier-today-summary small {
        margin-top: 4px;
        color: #1849a9;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.35;
    }

    body.app-ui-professional .cashier-history-button {
        min-height: 52px;
        padding: 0 18px;
        border-radius: 15px;
        font-size: 15px;
        font-weight: 850;
        gap: 10px;
        white-space: nowrap;
    }

    body.app-ui-professional .cashier-history-button .ui-icon {
        width: 17px;
        height: 17px;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1440px) {
    body.app-ui-professional .cashier-page-toolbar {
        min-height: 116px;
        padding: 20px 22px;
    }

    body.app-ui-professional .cashier-toolbar-copy h2 {
        font-size: 34px;
    }
}


/* =========================================================
   LAPORAN PEMILIK MODE PC — OWNER REPORT FILTER PANEL DISEMPURNAKAN
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional.module-laporan .owner-report-filter-panel.no-print {
        position: relative;
        overflow: hidden;
        margin-bottom: 22px;
        padding: 18px;
        border: 1px solid #dbe4ef;
        border-radius: 22px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
        box-shadow: 0 14px 34px rgba(16, 24, 40, 0.045);
    }

    body.app-ui-professional.module-laporan .owner-report-filter-panel.no-print::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: linear-gradient(180deg, #2563eb 0%, #5b8cff 100%);
        opacity: .95;
    }

    body.app-ui-professional.module-laporan .owner-report-filter {
        grid-template-columns:
            minmax(290px, 1.1fr)
            minmax(175px, .55fr)
            minmax(175px, .55fr)
            minmax(320px, 1fr)
            130px
            130px;
        gap: 12px;
        align-items: end;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field {
        min-height: 64px;
        padding: 9px 14px;
        border: 1px solid #ccd6e2;
        border-radius: 15px;
        background: #ffffff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field > span {
        margin-bottom: 5px;
        color: #475467;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field select,
    body.app-ui-professional.module-laporan .owner-report-filter-field input {
        min-height: 34px;
        color: #101828;
        font-size: 14px;
        font-weight: 850;
        line-height: 1.4;
    }

    body.app-ui-professional.module-laporan .owner-report-search {
        min-height: 64px;
        border-radius: 15px;
        border: 1px solid #ccd6e2;
        background: #ffffff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    }

    body.app-ui-professional.module-laporan .owner-report-search .search-icon-slot {
        width: 48px;
        color: #667085;
    }

    body.app-ui-professional.module-laporan .owner-report-search input {
        min-height: 62px;
        padding-right: 16px;
        font-size: 14px;
        font-weight: 800;
        color: #101828;
    }

    body.app-ui-professional.module-laporan .owner-report-search input::placeholder {
        color: #98a2b3;
        font-weight: 700;
    }

    body.app-ui-professional.module-laporan .owner-report-filter > .button {
        min-height: 64px;
        border-radius: 15px;
        justify-content: center;
        padding: 0 18px;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: -.01em;
        box-shadow: none;
    }

    body.app-ui-professional.module-laporan .owner-report-filter > .button.button-outline {
        background: #ffffff;
        border-color: #ccd6e2;
        color: #344054;
    }

    body.app-ui-professional.module-laporan .owner-report-filter > .button.button-outline:hover {
        background: #eef4ff;
        border-color: #b7caeb;
        color: #1d4ed8;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1460px) {
    body.app-ui-professional.module-laporan .owner-report-filter {
        grid-template-columns:
            minmax(250px, 1fr)
            minmax(160px, .55fr)
            minmax(160px, .55fr)
            minmax(280px, 1fr)
            118px
            118px;
        gap: 10px;
    }
}


/* =========================================================
   LAPORAN PEMILIK MODE PC — OWNER REPORT FILTER PANEL FINAL
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional.module-laporan .owner-report-filter-panel.no-print {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        margin-bottom: 24px;
        padding: 20px 20px 18px 22px;
        border: 1px solid #d8e3f0;
        border-radius: 24px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 16px 36px rgba(16, 24, 40, 0.055);
    }

    body.app-ui-professional.module-laporan .owner-report-filter-panel.no-print::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: linear-gradient(180deg, #2563eb 0%, #5b8cff 100%);
        opacity: .98;
        z-index: 0;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-panel.no-print::after {
        content: '';
        position: absolute;
        top: -45%;
        right: -12%;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0) 72%);
        pointer-events: none;
        z-index: 0;
    }

    body.app-ui-professional.module-laporan .owner-report-filter {
        position: relative;
        z-index: 1;
        grid-template-columns:
            minmax(320px, 1.2fr)
            minmax(185px, .62fr)
            minmax(185px, .62fr)
            minmax(340px, 1.15fr)
            138px
            138px;
        gap: 14px;
        align-items: end;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field,
    body.app-ui-professional.module-laporan .owner-report-search,
    body.app-ui-professional.module-laporan .owner-report-filter > .button {
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field {
        min-height: 66px;
        padding: 10px 15px;
        border: 1px solid #ccd8e5;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field:hover,
    body.app-ui-professional.module-laporan .owner-report-search:hover {
        border-color: #b7c7df;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field:focus-within,
    body.app-ui-professional.module-laporan .owner-report-search:focus-within {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field > span {
        margin-bottom: 6px;
        color: #475467;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field select,
    body.app-ui-professional.module-laporan .owner-report-filter-field input {
        min-height: 34px;
        color: #101828;
        font-size: 15px;
        font-weight: 850;
        line-height: 1.45;
    }

    body.app-ui-professional.module-laporan .owner-filter-owner select {
        font-size: 15px;
        font-weight: 900;
        letter-spacing: -.01em;
    }

    body.app-ui-professional.module-laporan .owner-report-search {
        min-height: 66px;
        border-radius: 16px;
        border: 1px solid #ccd8e5;
        background: rgba(255,255,255,.98);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }

    body.app-ui-professional.module-laporan .owner-report-search .search-icon-slot {
        width: 50px;
        color: #667085;
    }

    body.app-ui-professional.module-laporan .owner-report-search .search-icon-slot::after {
        content: '';
        display: block;
        width: 1px;
        height: 28px;
        background: #e5e7eb;
        margin-left: auto;
    }

    body.app-ui-professional.module-laporan .owner-report-search input {
        min-height: 64px;
        padding-right: 16px;
        padding-left: 2px;
        font-size: 14px;
        font-weight: 800;
        color: #101828;
    }

    body.app-ui-professional.module-laporan .owner-report-search input::placeholder {
        color: #98a2b3;
        font-weight: 700;
    }

    body.app-ui-professional.module-laporan .owner-report-filter > .button {
        min-height: 66px;
        border-radius: 16px;
        justify-content: center;
        padding: 0 18px;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: -.01em;
        box-shadow: none;
        white-space: nowrap;
    }

    body.app-ui-professional.module-laporan .owner-report-filter > .button:hover {
        transform: translateY(-1px);
    }

    body.app-ui-professional.module-laporan .owner-report-filter > .button.button-outline {
        background: #ffffff;
        border-color: #ccd8e5;
        color: #344054;
    }

    body.app-ui-professional.module-laporan .owner-report-filter > .button.button-outline:hover {
        background: #eef4ff;
        border-color: #b7caeb;
        color: #1d4ed8;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1500px) {
    body.app-ui-professional.module-laporan .owner-report-filter {
        grid-template-columns:
            minmax(260px, 1fr)
            minmax(165px, .6fr)
            minmax(165px, .6fr)
            minmax(280px, 1fr)
            124px
            124px;
        gap: 12px;
    }
}


/* =========================================================
   LAPORAN PEMILIK MODE PC — OWNER REPORT FILTER PANEL CENTER
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional.module-laporan .owner-report-filter-panel.no-print {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 22px;
    }

    body.app-ui-professional.module-laporan .owner-report-filter {
        width: 100%;
        max-width: 1700px;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field > span {
        line-height: 1.2;
    }

    body.app-ui-professional.module-laporan .owner-report-filter-field select,
    body.app-ui-professional.module-laporan .owner-report-filter-field input {
        display: flex;
        align-items: center;
        line-height: 1.25;
    }

    body.app-ui-professional.module-laporan .owner-report-search {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.app-ui-professional.module-laporan .owner-report-search .search-icon-slot {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.app-ui-professional.module-laporan .owner-report-search input {
        display: flex;
        align-items: center;
        line-height: 1.25;
    }

    body.app-ui-professional.module-laporan .owner-report-filter > .button {
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* =========================================================
   LAPORAN PEMILIK MODE PC — KOLOM PENCARIAN FINAL
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional.module-laporan .owner-report-search {
        position: relative;
        display: block;
        min-height: 66px;
        overflow: hidden;
        border: 1px solid #ccd8e5;
        border-radius: 16px;
        background: #ffffff;
    }

    body.app-ui-professional.module-laporan .owner-report-search .search-icon-slot {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 17px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #667085;
        transform: translateY(-50%);
        pointer-events: none;
    }

    body.app-ui-professional.module-laporan .owner-report-search .search-icon-slot::after {
        display: none;
        content: none;
    }

    body.app-ui-professional.module-laporan .owner-report-search .search-icon-slot .ui-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    body.app-ui-professional.module-laporan .owner-report-search input {
        width: 100%;
        min-height: 64px;
        margin: 0;
        padding: 0 18px 0 52px;
        border: 0;
        border-radius: 15px;
        outline: 0;
        background: transparent;
        color: #101828;
        font-family: inherit;
        font-size: 14px;
        font-weight: 800;
        line-height: normal;
        box-shadow: none;
        appearance: none;
        -webkit-appearance: none;
    }

    body.app-ui-professional.module-laporan .owner-report-search input::placeholder {
        color: #98a2b3;
        font-size: 14px;
        font-weight: 700;
        opacity: 1;
    }

    body.app-ui-professional.module-laporan .owner-report-search input::-webkit-search-decoration,
    body.app-ui-professional.module-laporan .owner-report-search input::-webkit-search-cancel-button,
    body.app-ui-professional.module-laporan .owner-report-search input::-webkit-search-results-button,
    body.app-ui-professional.module-laporan .owner-report-search input::-webkit-search-results-decoration {
        -webkit-appearance: none;
    }
}

/* =========================================================
   PORTAL AKSES PEMILIK BARANG — HALAMAN ADMIN
========================================================= */

.owner-access-toolbar {
    align-items: center;
}

.owner-access-layout {
    display: grid;
    gap: 18px;
}

.owner-access-card {
    padding: 22px;
    border: 1px solid #dfe6ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .045);
}

.owner-access-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.owner-access-card-head > div {
    min-width: 0;
    flex: 1;
}

.owner-access-card-head h3 {
    margin: 5px 0 0;
    color: #101828;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.owner-access-card-head p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
}

.owner-access-icon {
    width: 50px;
    height: 50px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 50px;
    border-radius: 15px;
    background: #eef4ff;
    color: #1d4ed8;
}

.owner-access-icon.success {
    background: #ecfdf3;
    color: #027a48;
}

.owner-access-icon .ui-icon {
    width: 23px;
    height: 23px;
}

.owner-access-status {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.owner-access-status.active {
    background: #ecfdf3;
    color: #027a48;
}

.owner-access-status.inactive {
    background: #f2f4f7;
    color: #667085;
}

.owner-access-share-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.owner-access-share-grid > div {
    min-height: 84px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 14px 16px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #f8fafc;
}

.owner-access-share-grid span,
.owner-access-share-grid strong {
    display: block;
}

.owner-access-share-grid span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.owner-access-share-grid strong {
    margin-top: 5px;
    color: #101828;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.2;
}

.owner-access-share-grid .owner-access-date {
    font-size: 15px;
}

.owner-access-new-card {
    border-color: #a6f4c5;
    background: linear-gradient(180deg, #ffffff 0%, #f6fef9 100%);
}

.owner-access-code-box {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 16px;
    border: 1px dashed #75e0a7;
    border-radius: 16px;
    background: #ffffff;
}

.owner-access-code-box > span {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
}

.owner-access-code-box > strong {
    color: #027a48;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: .18em;
    text-align: center;
}

.owner-access-link-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    margin-top: 18px;
}

.owner-access-link-box input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid #cfd8e3;
    border-radius: 13px;
    background: #f8fafc;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.owner-access-whatsapp {
    width: max-content;
    margin-top: 12px;
    background: #16a34a;
}

.owner-access-empty {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 18px;
    padding: 24px;
    border: 1px dashed #cfd8e3;
    border-radius: 17px;
    background: #f8fafc;
    color: #667085;
    text-align: center;
}

.owner-access-empty .ui-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}

.owner-access-empty strong {
    color: #344054;
    font-size: 16px;
}

.owner-access-empty p {
    margin: 5px 0 0;
    font-size: 12px;
}

.owner-access-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.owner-access-actions form {
    margin: 0;
}

.owner-access-actions .button,
.owner-access-link-box .button,
.owner-access-code-box .button {
    min-height: 48px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 850;
}

.button-danger {
    border-color: #fecdca !important;
    background: #fef3f2 !important;
    color: #b42318 !important;
}

.owner-access-action {
    background: #eef4ff;
    color: #1d4ed8;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional.module-laporan .owner-access-toolbar {
        min-height: 118px;
        padding: 22px 26px;
        border-radius: 22px;
    }

    body.app-ui-professional.module-laporan .owner-access-toolbar h2 {
        font-size: 31px;
    }

    body.app-ui-professional.module-laporan .owner-access-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-ui-professional.module-laporan .owner-access-identity-card,
    body.app-ui-professional.module-laporan .owner-access-new-card {
        grid-column: span 2;
    }
}

@media screen and (max-width: 900px) {
    .owner-access-share-grid {
        grid-template-columns: 1fr;
    }

    .owner-access-link-box,
    .owner-access-code-box {
        grid-template-columns: 1fr;
    }

    .owner-access-code-box > strong {
        text-align: left;
    }

    .owner-access-whatsapp,
    .owner-access-actions .button,
    .owner-access-actions form {
        width: 100%;
    }
}

.owner-portal-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
}


/* =========================================================
   KASIR MODE PC — CASHIER TODAY SUMMARY MEMANJANG
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .cashier-toolbar-actions {
        gap: 14px;
    }

    body.app-ui-professional .cashier-today-summary {
        width: 240px;
        min-width: 240px;
        min-height: 84px;
        padding: 14px 18px;
        align-items: flex-start;
        border-radius: 18px;
    }

    body.app-ui-professional .cashier-today-summary strong,
    body.app-ui-professional .cashier-today-summary small {
        white-space: nowrap;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1440px) {
    body.app-ui-professional .cashier-today-summary {
        width: 220px;
        min-width: 220px;
    }
}


/* =========================================================
   KASIR MODE PC — CASHIER TODAY SUMMARY SATU BARIS
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .cashier-today-summary {
        width: auto;
        min-width: 340px;
        min-height: 58px;
        display: grid;
        grid-template-columns: auto auto auto;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 0 18px;
        border-radius: 16px;
    }

    body.app-ui-professional .cashier-today-summary span,
    body.app-ui-professional .cashier-today-summary strong,
    body.app-ui-professional .cashier-today-summary small {
        display: inline-flex;
        align-items: center;
        margin: 0;
        white-space: nowrap;
        line-height: 1.2;
    }

    body.app-ui-professional .cashier-today-summary span {
        padding-right: 14px;
        border-right: 1px solid #dfe5ec;
    }

    body.app-ui-professional .cashier-today-summary strong {
        padding-right: 14px;
        border-right: 1px solid #dfe5ec;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1440px) {
    body.app-ui-professional .cashier-today-summary {
        min-width: 320px;
        gap: 12px;
        padding: 0 16px;
    }
}


/* =========================================================
   KASIR MODE PC — FORMAT HARI INI | TRANSAKSI | OMZET
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional .cashier-today-summary {
        width: auto;
        min-width: 360px;
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0 20px;
        border-radius: 16px;
    }

    body.app-ui-professional .cashier-today-summary span,
    body.app-ui-professional .cashier-today-summary strong,
    body.app-ui-professional .cashier-today-summary small {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0 14px;
        border: 0;
        white-space: nowrap;
        line-height: 1.2;
    }

    body.app-ui-professional .cashier-today-summary span {
        padding-left: 0;
    }

    body.app-ui-professional .cashier-today-summary small {
        padding-right: 0;
    }

    body.app-ui-professional .cashier-today-summary span::after,
    body.app-ui-professional .cashier-today-summary strong::after {
        content: '|';
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        color: #98a2b3;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1440px) {
    body.app-ui-professional .cashier-today-summary {
        min-width: 340px;
        padding: 0 16px;
    }

    body.app-ui-professional .cashier-today-summary span,
    body.app-ui-professional .cashier-today-summary strong,
    body.app-ui-professional .cashier-today-summary small {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.app-ui-professional .cashier-today-summary span {
        padding-left: 0;
    }

    body.app-ui-professional .cashier-today-summary small {
        padding-right: 0;
    }
}


/* =========================================================
   KASIR — RINGKASAN HARI INI SATU BARIS (STRUKTUR FINAL)
========================================================= */

.cashier-today-summary.cashier-today-summary-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: auto !important;
    min-width: 360px !important;
    min-height: 58px !important;
    padding: 0 20px !important;
}

.cashier-today-summary-inline .cashier-summary-label,
.cashier-today-summary-inline .cashier-summary-separator,
.cashier-today-summary-inline .cashier-summary-transactions,
.cashier-today-summary-inline .cashier-summary-amount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.cashier-today-summary-inline .cashier-summary-label {
    color: #667085 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.cashier-today-summary-inline .cashier-summary-separator {
    color: #98a2b3 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.cashier-today-summary-inline .cashier-summary-transactions {
    color: #101828 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.cashier-today-summary-inline .cashier-summary-amount {
    color: #1849a9 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.cashier-today-summary-inline .cashier-summary-label::after,
.cashier-today-summary-inline .cashier-summary-transactions::after {
    content: none !important;
}

@media screen and (max-width: 699px) {
    .cashier-today-summary.cashier-today-summary-inline {
        min-width: 0 !important;
        width: 100% !important;
        gap: 8px !important;
        padding: 0 12px !important;
    }

    .cashier-today-summary-inline .cashier-summary-label,
    .cashier-today-summary-inline .cashier-summary-transactions,
    .cashier-today-summary-inline .cashier-summary-amount {
        font-size: 11px !important;
    }
}


/* =========================================================
   KASIR — GARIS PEMISAH RINGKASAN TANPA BAYANGAN
========================================================= */

.cashier-today-summary-inline .cashier-summary-separator {
    width: 1px !important;
    min-width: 1px !important;
    height: 22px !important;
    min-height: 22px !important;
    display: block !important;
    flex: 0 0 1px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #98a2b3 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}


/* =========================================================
   KASIR — RINGKASAN HARI INI SATU TEKS FINAL
========================================================= */

.cashier-today-summary.cashier-today-summary-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 380px !important;
    min-height: 58px !important;
    padding: 0 24px !important;
}

.cashier-today-summary.cashier-today-summary-inline
.cashier-summary-inline-text {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #101828 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

@media screen and (max-width: 699px) {
    .cashier-today-summary.cashier-today-summary-inline {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 12px !important;
    }

    .cashier-today-summary.cashier-today-summary-inline
    .cashier-summary-inline-text {
        font-size: 11px !important;
    }
}


/* =========================================================
   KASIR — HILANGKAN GARIS TAMBAHAN SETELAH RP 0
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional
    .cashier-today-summary.cashier-today-summary-inline
    .cashier-summary-inline-text::before,
    body.app-ui-professional
    .cashier-today-summary.cashier-today-summary-inline
    .cashier-summary-inline-text::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   PENGGUNA MODE PC — BADGE ADMIN TIDAK NEMPEL GARIS
========================================================= */

.user-role-row {
    display: flex;
    align-items: center;
    padding: 12px 17px 12px;
}

.role-badge-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media screen and (min-width: 1181px) {
    body.app-ui-professional .user-role-row {
        padding: 14px 18px 14px;
    }

    body.app-ui-professional .role-badge-large {
        min-height: 31px;
        padding: 0 12px;
        font-size: 10px;
        font-weight: 900;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    }

    body.app-ui-professional .entity-stat-grid {
        margin-top: 2px;
    }
}


/* =========================================================
   LAPORAN.PHP REPORT FILTER PANEL — CENTER & PROFESSIONAL PC
========================================================= */

@media screen and (min-width: 1181px) {
    body.app-ui-professional.module-laporan .report-filter-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 28px;
    }

    body.app-ui-professional.module-laporan .report-filter-form {
        width: 100%;
        max-width: 1680px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 220px 220px minmax(260px, 1fr) minmax(220px, .95fr);
        gap: 14px;
        align-items: end;
        justify-content: center;
    }

    body.app-ui-professional.module-laporan .report-filter-form .form-group {
        min-width: 0;
    }

    body.app-ui-professional.module-laporan .report-filter-form .form-group label {
        margin-bottom: 8px;
        font-size: 12.5px;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--pc-text-soft);
    }

    body.app-ui-professional.module-laporan .report-filter-form input,
    body.app-ui-professional.module-laporan .report-filter-form select,
    body.app-ui-professional.module-laporan .report-filter-form .button {
        width: 100%;
        min-height: 54px;
        border-radius: 14px;
    }

    body.app-ui-professional.module-laporan .report-filter-form .button {
        align-self: end;
        font-size: 14px;
        font-weight: 800;
    }

    body.app-ui-professional.module-laporan .report-filter-panel > p {
        width: 100%;
        max-width: 1680px;
        margin: 16px auto 0;
        text-align: left;
    }
}

@media screen and (min-width: 1181px) and (max-width: 1380px) {
    body.app-ui-professional.module-laporan .report-filter-form {
        grid-template-columns: 200px 200px minmax(220px, 1fr) minmax(190px, .9fr);
        gap: 12px;
    }
}