@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Additional styles for page-penjualan will be added below */
html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
}

/* Penjualan page: make the three columns fit viewport height and scroll internally */
.page-penjualan {
    /* variables to tune spacing: header + bottom fixed bar heights */
    --penjualan-header-height: 64px; /* approximate sticky header height (adjust if needed) */
    --penjualan-bottom-bar-height: 140px; /* approximate bottom fixed info bar */
}

/* Ensure page content sits below the fixed header. This uses the header height
   variable defined above so it's easier to adjust in one place. */
.page-penjualan {
    /* keep content directly below header; adjust --penjualan-header-height if header size changes */
    padding-top: calc(var(--penjualan-header-height) + 10px) !important;
}

.page-penjualan .three-col-row {
    /* Available height for the three-column area */
    max-height: calc(100vh - var(--penjualan-header-height) - var(--penjualan-bottom-bar-height));
}

.page-penjualan .card.h-100 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Make the card-body scrollable and keep some bottom padding so
   the fixed bottom bar doesn't cover the last lines of content. */
.page-penjualan .card.h-100 .card-body.d-flex.flex-column {
    overflow: auto;
    padding-bottom: calc(var(--penjualan-bottom-bar-height) / 2);
}

.page-penjualan .table-responsive.flex-grow-1 {
    /* middle column main scroll area */
    overflow: auto;
}

.page-penjualan .sidebar-panel .display-area {
    overflow: auto;
}

/* For sticky right column, keep top offset consistent with header height */
.page-penjualan .sticky-top.h-100 {
    position: sticky;
    top: calc(0.5rem + 0px); /* let the page header handle spacing; adjust if needed */
}

@media (max-width: 992px) {
    .page-penjualan {
        --penjualan-header-height: 120px;
        --penjualan-bottom-bar-height: 180px;
    }
    .page-penjualan .three-col-row {
        max-height: calc(100vh - var(--penjualan-header-height) - var(--penjualan-bottom-bar-height));
    }
}

/* Responsive adjustments for fixed header / bottom on small screens
   Make the fixed bottom bar narrower, closer to screen edges and reduce height
   so it doesn't create a large floating pill that overlaps UI. */
@media (max-width: 768px) {
    :root {
        --penjualan-header-height: 96px;
        --penjualan-bottom-height: 96px;
        --penjualan-bottom-bar-height: 96px;
    }

    /* Fixed page header: reduce side offsets so it fits smaller screens */
    .page-penjualan .fixed-page-header {
        top: 0.75rem;
        left: 0.5rem;
        right: 0.5rem;
        width: calc(100% - 1rem) !important;
        max-height: 96px;
    }

    /* Fixed bottom bar: full-width with small side margins and reduced height */
    .page-penjualan .fixed-bottom-bar {
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: 0.75rem !important;
        width: calc(100% - 1rem) !important;
        max-height: 96px !important;
        border-radius: 12px !important;
        padding: 0.35rem !important;
    }

    /* Reduce internal spacing of the keyboard pills inside bottom bar */
    .page-penjualan .fixed-bottom-bar .kbd-badge {
        padding: 0.12rem 0.4rem;
        font-size: 0.66rem;
    }

    /* Make sure the main content gives room for the smaller bottom bar */
    .page-penjualan { padding-bottom: calc(var(--penjualan-bottom-height) + 0.5rem) !important; }

    /* Reduce gap between columns on small screens */
    .three-col-row { gap: 0.5rem !important; }

    /* Ensure cards inside columns don't overflow unnecessarily */
    .three-col-row .card { margin-bottom: 0.5rem; }

    /* Tighter fixed-bottom-bar controls: reduce visual weight and height */
    .page-penjualan .fixed-bottom-bar {
        border-inline-start: 0 !important; /* remove left accent */
        border-radius: 10px !important;
        max-height: 56px !important;
        height: auto !important;
        padding: 0 !important;
        box-shadow: 0 6px 18px rgba(16,24,40,0.06);
        overflow: hidden;
    }

    .page-penjualan .fixed-bottom-bar .card-body {
        padding: 0.35rem 0.6rem !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce size of pills inside the bottom bar and prevent them expanding the bar */
    .page-penjualan .fixed-bottom-bar .info-badge,
    .page-penjualan .fixed-bottom-bar .kbd-badge {
        padding: 0.12rem 0.4rem !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        margin-right: 0.35rem !important;
    }

    /* Hide less important items on very small screens to save space */
    @media (max-width: 420px) {
        .page-penjualan .fixed-bottom-bar .info-neutral:nth-child(3) { display: none; }
        .page-penjualan .fixed-bottom-bar .info-badge.info-lokasi .fw-bold { display: inline-block; }
    }
}


/* Sidebar mini-panel used on Penjualan page (Pulsa/Data, utilitas) */
.sidebar-panel .top-buttons .btn {
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    font-weight: 600;
}

.sidebar-panel .service-grid .btn {
    min-width: 100px;
    border: 2px solid #1b8f5a; /* green outline to match design */
    color: #1d1b20;
    background-color: rgba(27,143,90,0.05);
    border-radius: 8px;
}

.sidebar-panel .service-grid .btn:hover {
    background-color: rgba(27,143,90,0.12);
}

.sidebar-panel .form-select,
.sidebar-panel .form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 0.45rem 0.6rem;
}

.sidebar-panel .card-body {
    /* allow children to shrink in flex column layout */
    min-height: 0;
}

.sidebar-panel .display-area {
    /* fill remaining vertical space in the sidebar column and shrink when parent shrinks */
    flex: 1 1 auto;
    min-height: 0; /* allow flex child to shrink below content size */
    height: auto;
    border-radius: 8px;
    background: #000;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(0,0,0,0.6);
}
.sidebar-panel .display-area .display-inner {
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.9));
}
.sidebar-panel .display-area .display-timestamp {
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
}

.sidebar-panel .footer-row .form-control {
    border-radius: 8px;
}
.sidebar-panel .footer-row .btn {
    border-radius: 8px;
    border: 2px solid #1b8f5a;
    background: rgba(27,143,90,0.05);
}

@media (max-width: 992px) {
    .sidebar-panel .display-area { height: 180px; }
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.input-group .form-control:focus {
  outline: none;
  /* Use a single subtle focus ring that follows the element's border-radius
     to avoid doubled inner/outer lines when controls receive focus. */
  border-color: #6750a4 !important;
  box-shadow: 0 0 0 0.15rem rgba(103, 80, 164, 0.18) !important;
  /* ensure focus ring keeps rounded corners consistently */
  border-radius: var(--control-radius) !important;
}

.content {
    padding-top: 1.1rem;
}

/* Shared Menu Card Styles */
.menu-card {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: var(--control-radius);
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

.menu-card:hover {
    transform: translateY(-3px);
    background-color: #f8f9fa;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.icon-container {
    background-color: rgba(0,0,0,0.05);
    padding: 8px;
    border-radius: var(--control-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.card-title-text {
    font-size: 0.95rem;
    color: #495057;
    font-weight: bold;
}

.text-description {
    color: #6c757d;
    font-size: 0.8rem;
    line-height: 1.2;
}

.badge-custom {
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.badge-dark { background-color: #e9ecef; color: #495057; }
.badge-highlight { background-color: #fff3cd; color: #856404; }
.badge-accent { background-color: #d1ecf1; color: #0c5460; }


h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA6NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    /* Sembunyikan placeholder pada form-floating (teks kanan) */
    color: transparent !important;
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.naper-highlight {
    font-size: 1.5rem;
    font-weight: bold;
    color: #006bb7; /* warna navigation dari app.css */
}

/* Material 3 DataGrid/Table Design */
.table-material {
    --m3-surface: #ffffff;
    --m3-on-surface: #1d1b20;
    --m3-surface-container: #f7f2fa;
    --m3-primary: #6750a4;
    --m3-on-primary: #ffffff;
    --m3-secondary-container: #e8def8;
    --m3-on-secondary-container: #1d192b;
    --m3-outline-variant: #e1e1e1;
    --m3-hover-state: rgba(103, 80, 164, 0.08);
    
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--m3-on-surface);
    background-color: var(--m3-surface);
}

.table-material thead th {
    background-color: var(--m3-surface-container);
    color: #49454f;
    font-weight: 600;
    padding: 16px;
    border-bottom: 2px solid var(--m3-outline-variant);
    text-align: left;
    white-space: nowrap;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.table-material tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--m3-outline-variant);
    font-size: 0.9rem;
    vertical-align: middle;
    color: #49454f;
}

.table-material tbody tr:last-child td {
    border-bottom: none;
}

.table-material tbody tr {
    transition: all 0.2s ease;
}

.table-material.table-hover tbody tr:hover {
    background-color: var(--m3-hover-state);
    color: var(--m3-primary);
    cursor: pointer;
}

.table-material.table-hover tbody tr:active {
    background-color: var(--m3-secondary-container);
}

/* Material 3 Action Buttons in Table */
.btn-m3-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--m3-on-surface);
    transition: background-color 0.2s;
}

/* Text Alignment Utility for Numbers */
.text-numeric {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* Material 3 Numeric Input Alignment */
input[type="number"].form-control {
    text-align: right;
}

.table-material thead th.text-end {
    text-align: right;
}

.table-material tbody td.text-end {
    text-align: right;
}

.btn-m3-icon:hover {
    background-color: rgba(103, 80, 164, 0.08);
    color: var(--m3-primary);
}

/* Rounded container for the table to match M3 Card style */
.table-container-m3 {
    background-color: var(--m3-surface);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--m3-outline-variant);
}

/* Material 3 Form Styling */
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: var(--control-radius);
    border: 1px solid #79747e;
    padding: 1rem 0.75rem;
    transition: border 0.2s, box-shadow 0.2s;
    font-size: 0.85rem;
}

/* Specific fix for Form Floating Select text overlapping label */
.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating > label {
    font-size: 0.85rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: #6750a4; /* --m3-primary */
    /* match global focus ring and follow the control's own border-radius */
    box-shadow: 0 0 0 0.15rem rgba(103, 80, 164, 0.18) !important;
    outline: none;
    /* ensure consistent rounded corners on focus */
    border-radius: var(--control-radius) !important;
}

/* Prevent focus ring clipping on common parent containers used in layout */
.position-relative.shadow-sm.border.rounded-3,
.position-relative.shadow-sm.border.rounded-4 {
    overflow: visible !important; /* allow focus ring to show outside child bounds */
    border-radius: var(--control-radius) !important;
}

/* Material 3 Styled Select Dropdown Appearance */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2349454f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-size: 12px 10px;
    border-radius: var(--control-radius);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
}

.form-select:hover:not(:focus) {
    background-color: #f7f2fa;
    border-color: #6750a4;
}

.form-select:focus {
    border-color: #6750a4 !important;
    background-color: #fff;
}

/* Styling for the dropdown list options - Browser dependent */
.form-select option {
    padding: 12px;
    background-color: #fff;
    color: #1d1b20; font-size: 0.9rem;
}

/* Material 3 Buttons */
.btn-primary {
    background-color: #6750a4; /* --m3-primary */
    border-color: #6750a4;
    color: #ffffff;
    border-radius: var(--control-radius) !important;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: #553f8a;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: #6750a4;
    border-color: #79747e;
    border-radius: var(--control-radius) !important;
    padding: 0.6rem 1.5rem;
}

.btn-outline-secondary, .btn-outline-info, .btn-info {
    border-radius: 100px !important;
    padding: 0.6rem 1.5rem;
}

.btn-danger {
    border-radius: 100px !important;
    padding: 0.6rem 1.5rem;
}

/* Form Check / Switch M3 */
.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #6750a4;
    border-color: #6750a4;
}

/* Global switch sizing and helper alignment used by Settings and other pages */
.form-switch .form-check-input
{
    /* consistent switch visual size used across the app */
    width: 3em;
    height: 1.5em;
    flex: 0 0 auto;
    padding: 0 !important;
}

/* Utility container for setting rows that have a switch + helper text */
.setting-switch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 56px; /* provides comfortable vertical spacing */
}

.setting-switch .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.setting-switch .form-check-label {
    margin-left: 0px; /* remove extra label margins so helper alignment is consistent */
}

/* helper text: indent so it visually aligns under the label, leaving room for the switch
   Calculation uses the switch width (3em) plus the gap between input and label (0.5rem)
   On very small screens the indent is removed to avoid overflow. */
.setting-switch .helper {
    margin-top: .25rem;
    margin-left: calc(3em + 1.5rem);
    color: var(--bs-secondary-text, #6c757d);
    font-size: 0.875rem;
}

@media (max-width: 576px) {
    .setting-switch { min-height: 48px; }
    .setting-switch .helper {
        margin-left: 0; /* allow helper to flow full width on small screens */
        padding-left: calc(3em + .5rem); /* visually keep indent without forcing layout overflow */
        padding-right: 0.5rem;
    }
}

/* Toast / Toast styling (Material3-like) */
.Toast-container {
    position: fixed;
    bottom: 1rem; /* pindah ke bawah */
    right: 1rem; 
    transform: none;
    top: auto;
    left: auto;
    z-index: 2000;
    pointer-events: none;
}
.Toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    min-width: 280px;
    max-width: 560px;
    margin: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--control-radius);
    color: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
    font-weight: 500;
}
.Toast .Toast-content {
    flex: 1 1 auto;
}
.Toast .btn-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    padding: 0 0.4rem;
}
.Toast-success { background: linear-gradient(90deg, #1b8f5a, #20b06a); }
.Toast-error { background: linear-gradient(90deg, #d94b4b, #f06a6a); }
.Toast-info { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.Toast-warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* Icon area inside Toast */
.Toast .toast-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    border-radius: 10px;
    font-size: 1.1rem;
    opacity: 0.98;
}

.Toast .small { opacity: 0.95; }

/* Pastikan emoji menggunakan font warna sistem sehingga tidak tampil sebagai tanda tanya */
.Toast .toast-icon,
.Toast .toast-icon span {
    /* fallback font untuk emoji di berbagai platform */
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
    line-height: 1;
    font-size: 1.15rem;
}


/* Layout variables and containers */
:root {
    --report-max-width: 500px; /* container max width for laporan page */
    --md-sys-shape-corner-large: 16px;
    --control-radius: 12px; /* unified radius for inputs, selects, buttons, modals, etc. (cards excluded) */
    /* Card accent / border-start defaults */
    --card-accent-color: #6750a4; /* default accent (m3 primary) */
    --card-accent-width: 4px;
}

/* Apply a subtle left accent (border-start) to card-like components */
.card,
.menu-card,
.table-container-m3,
.page-heading,
.section-header {
    border-inline-start: var(--card-accent-width) solid var(--card-accent-color);
}

/* Variant classes to quickly change accent color per card */
.card-accent-primary { --card-accent-color: #6750a4; }
.card-accent-success { --card-accent-color: #1b8f5a; }
.card-accent-warning { --card-accent-color: #f59e0b; }
.card-accent-info { --card-accent-color: #3b82f6; }

/* Utilities for start-border (left border) - support combination similar to
   "border-start border-4 border-primary" by providing a combined selector.
   Individual classes act as markers; the combined selector applies the final
   left border so existing borders on other sides are not unintentionally
   changed. */
.border-start { border-inline-start-style: solid; }
.border-4 { }
.border-primary { }

/* When used together, apply a 4px left border with primary/accent color */
.border-start.border-4.border-primary,
.menu-card.border-start.border-4.border-primary,
.card.border-start.border-4.border-primary {
    border-inline-start: 4px solid var(--card-accent-color);
}

/* Make sure the accent doesn't break rounded corners on small-radius cards */
.card,
.menu-card,
.table-container-m3 { overflow: visible; }

.report-container {
    max-width: var(--report-max-width);
    margin-left: 0px;
    margin-right: auto;
    padding-left: 0; /* sejajarkan dengan card Dashboard */
    padding-right: 1rem;
}

/* Heading / Page title styling for laporan */
.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--md-sys-shape-corner-large);
    background-color: #fff; /* surface */
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    margin-bottom: 1rem;
}
.page-heading .title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d1b20; /* on-surface */
}
.page-heading .subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.15rem;
}
.page-heading .icon-container {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(103,80,164,0.08);
}
.page-heading .actions > .btn {
    border-radius: 100px;
    padding: 0.45rem 0.9rem;
}

@media (max-width: 576px) {
    .page-heading { flex-direction: column; align-items: flex-start; }
    .page-heading .actions { width: 100%; display:flex; gap:0.5rem; }
}

/* Section card header styling to match Dashboard card */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.section-header .icon-container {
    width: 44px;
    height: 44px;
    border-radius: var(--control-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.03);
}
.section-header .card-title-text { font-size: 1rem; margin: 0; }
.section-header .small { margin: 0; font-size: 0.8rem; }
.card-header[role="button"] { cursor: pointer; }

/* small badge near section title */
.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.75rem;
    border-radius: 999px;
    background-color: #e8def8; /* m3 secondary container */
    color: #1d192b; /* on-secondary-container */
    margin-left: 0.5rem;
    font-weight: 600;
}

/* Info badges (header) - pill style (tiruan tampilan) */
.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    margin-right: 0.4rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.06);
}
.info-badge .fw-bold { font-weight: 700; }

/* Dark neutral pill like contoh */
.info-version {
    background: #222428; /* hampir hitam */
    color: #e9ecef;
}

/* Green online pill */
.info-online {
    background: linear-gradient(90deg,#1ea34a,#3ad38a);
    color: #ffffff;
}

/* Blue active pill */
.info-active {
    background: linear-gradient(90deg,#0b67d1,#66a8ff);
    color: #fff;
}

/* Grey location pill */
.info-lokasi {
    background: #495057;
    color: #fff;
}

/* Small light neutral pills for transactional info */
.info-neutral {
    background: rgba(255,255,255,0.95);
    color: #1d1b20;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .info-badge { font-size: 0.68rem; padding: 0.15rem 0.45rem; margin-right: 0.3rem; }
}

/* Keyboard shortcut pills (warna-warni) */
.kbd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.kbd-badge kbd {
    display: inline-block;
    background: rgba(0,0,0,0.12);
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.78rem;
}

.kbd-f1 { background: linear-gradient(90deg,#2233ff,#6b8cff); }
.kbd-f2 { background: linear-gradient(90deg,#ff3b30,#ff7b6b); }
.kbd-f4 { background: linear-gradient(90deg,#7c3aed,#b78bff); }
.kbd-f5 { background: linear-gradient(90deg,#06b6d4,#5eead4); color:#042b2b; }
.kbd-f12 { background: linear-gradient(90deg,#4f46e5,#818cf8); }

@media (max-width: 768px) {
    .kbd-badge { font-size: 0.66rem; padding: 0.12rem 0.45rem; }
    .kbd-badge kbd { padding: 1px 5px; font-size: 0.72rem; }
}

/* Specific fixed header style for Penjualan page to avoid being overridden
   Put high specificity here and use !important on width to ensure Bootstrap or
   other global rules don't change the layout. Adjust left/right values if needed. */
.page-penjualan .fixed-page-header {
    position: fixed;
    top: 1rem;
    left: 2rem;
    right: 2rem;
    z-index: 1030;
    max-height: 120px;
    overflow: auto;
    /* ensure width honors left/right even if other rules set width */
    width: calc(100% - 4rem) !important;
}

/* Make fixed bottom bar compact on all viewports by default and
   ensure its contents scroll horizontally instead of expanding height */
.page-penjualan .fixed-bottom-bar {
    left: 2rem !important;
    right: 2rem !important;
    bottom: 1rem !important;
    width: auto !important;
    max-width: calc(100% - 4rem) !important;
    height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(16,24,40,0.06);
    overflow: hidden;
    z-index: 1050;
}

.page-penjualan .fixed-bottom-bar .card-body {
    padding: 0.35rem 0.6rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* make pills compact inside bottom bar so they don't increase bar height */
.page-penjualan .fixed-bottom-bar .info-badge,
.page-penjualan .fixed-bottom-bar .kbd-badge {
    padding: 0.12rem 0.45rem !important;
    font-size: 0.68rem !important;
    margin-right: 0.35rem !important;
}

/* Extra-strong compact rules to enforce a single-line bottom bar */
.page-penjualan .fixed-bottom-bar {
    box-sizing: border-box !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-inline-start: 0 !important;
    border-left: 0 !important;
    overflow: hidden !important;
}

.page-penjualan .fixed-bottom-bar .bottom-bar-body,
.page-penjualan .fixed-bottom-bar .bottom-bar-inner {
    box-sizing: border-box !important;
    height: 48px !important;
    padding: 0 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

/* Make pills visually smaller and fixed-height so they don't expand the bar */
.page-penjualan .fixed-bottom-bar .info-badge,
.page-penjualan .fixed-bottom-bar .kbd-badge {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 0.5rem !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    border-width: 1px !important;
}

.page-penjualan .fixed-bottom-bar .kbd-badge kbd {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
    margin-right: 0.35rem !important;
}

/* Ensure child elements do not add extra top/bottom margin */
.page-penjualan .fixed-bottom-bar .bottom-bar-inner > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Fallback hide long labels if still overflowing */
@media (max-width: 900px) {
    .page-penjualan .fixed-bottom-bar .kbd-badge { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }
}

/* Styles for header-embedded info we moved from bottom bar */
.page-penjualan .header-bottom-info {
    width: 100%;
    box-sizing: border-box;
}
.page-penjualan .header-bottom-info .info-badge,
.page-penjualan .header-bottom-info .kbd-badge {
    padding: 0.12rem 0.45rem !important;
    font-size: 0.72rem !important;
}
.page-penjualan .header-bottom-info .kbd-badge kbd { padding: 2px 6px !important; font-size: 0.72rem !important; }
.page-penjualan .header-bottom-info .d-flex { gap: 0.5rem; }

@media (max-width: 768px) {
    .page-penjualan .header-bottom-info .info-badge,
    .page-penjualan .header-bottom-info .kbd-badge {
        font-size: 0.66rem !important;
        padding: 0.08rem 0.35rem !important;
    }
    .page-penjualan .header-bottom-info .d-flex { flex-wrap: wrap; }
}


/* Stronger overrides in case other rules or inline classes still increase height */
.page-penjualan > .fixed-bottom-bar {
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-inline-start: 0 !important;
}
.page-penjualan > .fixed-bottom-bar .card-body {
    padding: 0 0.5rem !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
}
.page-penjualan > .fixed-bottom-bar .card-body > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.page-penjualan .fixed-bottom-bar .info-badge .fw-bold,
.page-penjualan .fixed-bottom-bar .info-neutral,
.page-penjualan .fixed-bottom-bar .kbd-badge {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}


/* --------------------------------------------------------------------- */
/* Penjualan styles (moved from component-scoped `Penjualan.razor.css`)    */
/* Placed here so variables are global and not affected by Blazor CSS scoping */
/* --------------------------------------------------------------------- */

/* Provide both variable names used in this project so other rules keep working */
:root {
    --penjualan-header-height: 120px; /* fallback header height */
    --penjualan-bottom-height: 120px; /* fallback bottom bar height */
    --penjualan-bottom-bar-height: 120px; /* alternate name used elsewhere */
}

.page-penjualan {
  min-height: 100vh;
  /* keep space for header and bottom bar so inner content can size correctly */
  padding-top: var(--penjualan-header-height);
  padding-bottom: var(--penjualan-bottom-height);
}

/* Make the three-col-row fill remaining viewport height */
.three-col-row {
  min-height: calc(100vh - var(--penjualan-header-height) - var(--penjualan-bottom-height));
  max-height: calc(100vh - var(--penjualan-header-height) - var(--penjualan-bottom-height));
}

/* Ensure the center column's table scrolls if content overflows */
.page-penjualan .three-col-row .col-lg-6 .card-body .table-responsive.flex-grow-1 {
  max-height: calc(100vh - var(--penjualan-header-height) - var(--penjualan-bottom-height)) !important;
  overflow: auto;
}

/* Keep the right summary visible under the fixed header */
.page-penjualan .three-col-row .sticky-top {
  position: sticky;
  top: calc(var(--penjualan-header-height) + 16px);
}

@media (max-width: 992px) {
  .three-col-row {
    min-height: auto;
  }
}

/* End moved Penjualan styles */