:root {
    --brand: #38bdf8;
    --brand-dark: #0876a8;
    --brand-soft: #e4f5ff;
    --ink: #20262d;
    --muted: #7a858f;
    --line: #e8ecef;
    --surface: #fff;
    --bg: #f5f7f8;
    --danger: #e5484d;
    --shadow: 0 8px 26px rgba(22, 31, 40, 0.055);
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        'Segoe UI',
        Roboto,
        Arial,
        sans-serif;
    font-size: 14px;
}
a {
    color: inherit;
}
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 245px;
    background: #fff;
    border-right: 1px solid var(--line);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 9px 20px;
}
.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #49bff5, #d4b35f);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 19px;
    box-shadow: 0 7px 16px rgba(56, 189, 248, 0.22);
}
.brand b {
    display: block;
    font-size: 17px;
    line-height: 1.1;
}
.brand small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sidebar-nav {
    overflow: auto;
    flex: 1;
    flex-wrap: nowrap;
    min-height: 0;
}
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #59636c;
    border-radius: 12px;
    padding: 10px 11px;
    margin: 2px 0;
    font-weight: 600;
    font-size: 13px;
}
.sidebar .nav-link i {
    width: 19px;
    font-size: 17px;
}
.sidebar .nav-link:hover {
    background: #f5f9fc;
    color: #222;
}
.sidebar .nav-link.active {
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.nav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a3abb2;
    padding: 19px 11px 7px;
    font-weight: 700;
}
.sidebar-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    border-top: 1px solid var(--line);
    padding: 14px 7px 0;
    font-size: 12px;
}
.sidebar-foot small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}
.session-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c9d0d5;
}
.session-dot.on {
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}
.content {
    margin-left: 245px;
    min-height: 100vh;
}
.topbar {
    height: 68px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.top-title {
    flex: 1;
}
.top-title h1 {
    font-size: 18px;
    margin: 0;
    font-weight: 750;
}
.top-title p {
    font-size: 11px;
    color: var(--muted);
    margin: 2px 0 0;
}
.top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.clock {
    font-size: 12px;
    color: var(--muted);
}
.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
}
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1498d1;
    color: white;
    display: grid;
    place-items: center;
    font-weight: 700;
}
.page-wrap {
    padding: 22px;
}
.btn {
    border-radius: 10px;
    font-weight: 600;
}
.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-brand:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.btn-soft {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border: 1px solid #d5ecfa;
}
.form-control,
.form-select,
.input-group-text {
    border-color: #dfe4e7;
    border-radius: 10px;
    min-height: 40px;
    font-size: 13px;
}
.form-control:focus,
.form-select:focus {
    border-color: #79c9f0;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.11);
}
.form-label {
    font-size: 11px;
    color: #65707a;
    font-weight: 700;
    margin-bottom: 5px;
}
.panel,
.toolbar-card,
.kpi-card {
    background: #fff;
    border: 1px solid #edf0f2;
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.panel {
    padding: 18px;
}
.toolbar-card {
    padding: 14px 16px;
}
.sticky-panel {
    position: sticky;
    top: 88px;
}
.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.panel-head h5 {
    font-size: 15px;
    margin: 0;
    font-weight: 750;
}
.panel-head p {
    font-size: 11px;
    color: var(--muted);
    margin: 3px 0 0;
}
.kpi-card {
    height: 100%;
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 17px;
}
.kpi-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    display: grid;
    place-items: center;
    font-size: 19px;
}
.kpi-card span,
.kpi-card small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}
.kpi-card strong {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    margin: 2px 0;
}
.table-clean {
    margin: 0;
}
.table-clean > :not(caption) > * > * {
    padding: 12px 10px;
    border-color: #eef1f3;
    vertical-align: middle;
}
.table-clean thead th {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8c969e;
    font-weight: 750;
    white-space: nowrap;
}
.table-clean tbody td {
    font-size: 12px;
}
.table-clean tbody tr:last-child td {
    border-bottom: 0;
}
.empty-cell {
    text-align: center !important;
    color: #9aa2a9 !important;
    padding: 35px !important;
}
.product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-cell small {
    display: block;
    color: var(--muted);
}
.mini-photo {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f1f6fa;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #9ca5ac;
}
.mini-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rank-row,
.simple-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2f3;
}
.rank-row:last-child,
.simple-row:last-child {
    border-bottom: 0;
}
.rank-num {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #f1f6fa;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}
.rank-row small,
.simple-row small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 2px;
}
.rank-row strong,
.simple-row strong {
    font-size: 12px;
}
.searchbox {
    height: 42px;
    border: 1px solid #dfe4e7;
    background: #fff;
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
}
.searchbox i {
    color: #929ba3;
}
.searchbox input {
    border: 0;
    outline: 0;
    width: 100%;
    background: transparent;
    font-size: 13px;
}
.small-search {
    height: 40px;
}
.subnav {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.subnav a {
    text-decoration: none;
    padding: 8px 13px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 650;
    font-size: 12px;
    color: #68727a;
}
.subnav a.active {
    background: var(--brand-soft);
    border-color: #cde8f8;
    color: var(--brand-dark);
}
.summary-box > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 0;
    font-size: 12px;
}
.summary-box span {
    color: #707b84;
}
.summary-box .total {
    border-top: 1px solid var(--line);
    margin-top: 5px;
    padding-top: 12px;
}
.summary-box .total strong {
    font-size: 18px;
}
.security-note {
    display: flex;
    gap: 12px;
    background: #eff8fd;
    border: 1px solid #d8edfa;
    border-radius: 12px;
    padding: 13px;
    color: #2e7193;
}
.security-note i {
    font-size: 22px;
}
.security-note span {
    display: block;
    font-size: 11px;
    color: #6b8492;
    margin-top: 3px;
}
.purchase-lines {
    margin-top: 10px;
}
.purchase-lines > div {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 9px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed #e2e6e8;
}
.purchase-lines small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}
.purchase-lines button {
    border: 0;
    background: transparent;
    color: #b4bbc0;
}
.purchase-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f9fc;
    border-radius: 12px;
    padding: 12px;
}
.purchase-total strong {
    font-size: 17px;
}
.shift-warning {
    font-size: 10px;
    color: #7a6a32;
    background: #fff9df;
    border: 1px solid #f5ebbb;
    border-radius: 9px;
    padding: 8px 10px;
    margin-top: 9px;
}
.print-only {
    display: none;
}
/* POS */
.pos-shell {
    display: grid;
    grid-template-columns: minmax(330px, 390px) 1fr;
    gap: 0;
    margin: -22px;
    min-height: calc(100vh - 68px);
}
.pos-order {
    background: #fff;
    border-right: 1px solid var(--line);
    height: calc(100vh - 68px);
    position: sticky;
    top: 68px;
    display: flex;
    flex-direction: column;
}
.pos-order form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.pos-order-top {
    padding: 16px 18px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.eyebrow {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.11em;
    color: var(--muted);
    font-weight: 700;
}
.pos-order-top h4 {
    font-size: 16px;
    margin: 2px 0 0;
}
.order-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 18px 10px;
}
.order-fields label {
    display: block;
    font-size: 9px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 3px;
}

.order-filter {
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(210px, 1fr) minmax(210px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.order-batch-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.order-table .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
}
.cart-list {
    padding: 0 18px;
    overflow: auto;
    flex: 1;
    min-height: 150px;
}
.cart-empty {
    height: 100%;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #9aa3aa;
}
.cart-empty i {
    font-size: 30px;
    margin-bottom: 8px;
}
.cart-empty b {
    color: #67717a;
    font-size: 12px;
}
.cart-empty span {
    font-size: 10px;
    max-width: 210px;
    margin-top: 3px;
}
.cart-item {
    padding: 12px 0;
    border-bottom: 1px dashed #dfe4e7;
}
.cart-item-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.cart-item-head b {
    font-size: 12px;
}
.cart-item-head small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 2px;
}
.cart-item-head strong {
    font-size: 12px;
}
.cart-controls {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
}
.cart-controls button {
    width: 29px;
    height: 27px;
    border: 1px solid #e1e5e7;
    background: #fff;
    color: var(--brand-dark);
}
.cart-controls button:first-child {
    border-radius: 8px 0 0 8px;
}
.cart-controls button:nth-child(3) {
    border-radius: 0 8px 8px 0;
}
.cart-controls span {
    width: 34px;
    height: 27px;
    border-top: 1px solid #e1e5e7;
    border-bottom: 1px solid #e1e5e7;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}
.cart-controls .remove {
    border: 0;
    margin-left: auto;
    color: #c5cacf;
}
.checkout {
    border-top: 1px solid var(--line);
    padding: 12px 18px 15px;
}
.discount-row {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 7px;
    margin-bottom: 7px;
}
.sum-row,
.change-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 3px 0;
}
.grand-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding: 9px 0 6px;
    margin-top: 4px;
}
.grand-row strong {
    font-size: 19px;
}
.payment-methods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin: 4px 0 8px;
}
.payment-methods input {
    display: none;
}
.payment-methods span {
    height: 37px;
    border: 1px solid #e0e5e7;
    border-radius: 9px;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
}
.payment-methods input:checked + span {
    background: var(--brand-soft);
    border-color: #8bcdeb;
    color: var(--brand-dark);
    font-weight: 700;
}
.quick-cash {
    display: flex;
    gap: 5px;
    overflow: auto;
    margin: 6px 0;
}
.quick-cash button {
    border: 1px solid #e0e4e6;
    border-radius: 8px;
    background: #fff;
    font-size: 10px;
    padding: 5px 8px;
    white-space: nowrap;
}
.pos-catalog {
    padding: 18px;
    background: #f5f7f8;
    overflow: auto;
    height: calc(100vh - 68px);
}
.catalog-toolbar {
    display: flex;
    gap: 9px;
}
.catalog-toolbar .searchbox {
    flex: 1;
    border-radius: 20px;
}
.category-tabs {
    display: flex;
    gap: 7px;
    overflow: auto;
    padding: 12px 0;
}
.category-tabs button {
    border: 1px solid #dfe4e6;
    background: #fff;
    color: #69737c;
    border-radius: 10px;
    padding: 7px 11px;
    font-size: 10px;
    white-space: nowrap;
}
.category-tabs button span {
    color: #a0a8ae;
}
.category-tabs button.active {
    border-color: #8bcdeb;
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(135px, 1fr));
    gap: 12px;
}
.product-card {
    border: 1px solid #edf0f1;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    text-align: left;
    box-shadow: 0 3px 12px rgba(20, 30, 40, 0.025);
    transition: 0.15s;
    position: relative;
    min-height: 180px;
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(20, 30, 40, 0.07);
    border-color: #d8e8f2;
}
.product-photo {
    height: 102px;
    background: #f0f7fc;
    border-radius: 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
    margin-bottom: 9px;
    color: #82bfe0;
    font-size: 38px;
}
.product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.soldout {
    position: absolute;
    inset: auto 6px 6px auto;
    background: #1f2429;
    color: #fff;
    border-radius: 7px;
    padding: 3px 6px;
    font-size: 9px;
}
.product-card > b {
    display: block;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-card > span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
}
.product-card > small {
    display: block;
    color: var(--muted);
    font-size: 9px;
    margin-top: 2px;
}
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top left, #edf8ff 0, #f5f9fc 45%, #edf1f3 100%);
}
.login-box {
    width: min(420px, 92vw);
    background: #fff;
    border: 1px solid #ebefef;
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 20px 55px rgba(26, 37, 46, 0.09);
}
.login-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
}
.login-box h2 {
    font-size: 22px;
    margin: 15px 0 4px;
}
.login-box > p {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 24px;
}
.sidebar-backdrop {
    display: none;
}
@media (max-width: 1300px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}
@media (max-width: 1050px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
    .pos-shell {
        grid-template-columns: 340px 1fr;
    }
}
@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        transition: 0.2s;
    }
    .sidebar.show {
        transform: none;
    }
    .content {
        margin-left: 0;
    }
    .sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.25);
        z-index: 1030;
    }
    .pos-shell {
        margin: -22px;
        grid-template-columns: 330px 1fr;
    }
}
@media (max-width: 760px) {
    .page-wrap {
        padding: 14px;
    }
    .topbar {
        padding: 0 14px;
    }
    .pos-shell {
        margin: -14px;
        display: block;
    }
    .pos-order {
        position: relative;
        top: auto;
        height: auto;
        min-height: 520px;
    }
    .pos-catalog {
        height: auto;
    }
    .product-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
    .sticky-panel {
        position: static;
    }
    .order-fields {
        grid-template-columns: 1fr;
    }
    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }
}
.subnav {
    max-width: 100%;
    overflow-x: auto;
}
.subnav a {
    flex-shrink: 0;
}
.toolbar-card form.d-flex,
.toolbar-card .ms-auto.d-flex {
    flex-wrap: wrap;
}
.panel,
.top-title {
    min-width: 0;
}
.panel:has(> table) {
    overflow-x: auto;
}
@media print {
    .sidebar,
    .topbar,
    .no-print,
    .btn {
        display: none !important;
    }
    .content {
        margin: 0;
    }
    .page-wrap {
        padding: 0;
    }
    .panel,
    .kpi-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    .print-only {
        display: block;
    }
    .report-title {
        margin-bottom: 15px;
    }
}
/* Editable stock and material tables keep columns stable on narrow screens. */
.grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}
.grid-scroll{max-height:65vh;border:1px solid #d8e5ec;border-radius:6px}
.grid-table{min-width:850px;table-layout:fixed}
.grid-table th,.grid-table td{vertical-align:middle;white-space:nowrap;padding:.35rem!important}
.grid-table thead th{position:sticky;top:0;z-index:2;background:#eaf7fc;color:#25445a}
.grid-table th:first-child{width:105px}
.grid-table td{min-width:100px}
.grid-table td:has(input[name*="[name]"]){min-width:180px}
.grid-input{min-width:85px;border-color:transparent;background:transparent;border-radius:3px}
.grid-input:focus,.grid-input.grid-changed{background:#fff;border-color:#d4a72c;box-shadow:0 0 0 .12rem rgba(212,167,44,.14)}
.grid-new-row{background:#f5fbfd}
@media (max-width:767px){
  .consignment-page table,.consignment-page tbody,.consignment-page tr,.consignment-page td{display:block;width:100%}
  .consignment-page thead{display:none}
  .consignment-page tr{padding:.6rem 0;border-bottom:1px solid #d8e5ec}
  .consignment-page tbody tr:last-child{border-bottom:0}
  .consignment-page td{border:0;padding:.3rem .45rem!important;text-align:left!important;white-space:normal}
  .consignment-page td:not([colspan])::before{display:inline-block;min-width:8.5rem;margin-right:.35rem;color:#607789;font-size:.75rem;font-weight:600;vertical-align:top}
  .consignment-page .panel:first-child td:not([colspan]):nth-child(2)::before{content:'Laku'}
  .consignment-page .panel:first-child td:not([colspan]):nth-child(3)::before{content:'Penjualan bersih'}
  .consignment-page .panel:first-child td:not([colspan]):nth-child(4)::before{content:'Keuntungan awal'}
  .consignment-page .panel:first-child td:not([colspan]):nth-child(5)::before{content:'Pencatatan';display:block;margin-bottom:.35rem}
  .consignment-page .panel:not(:first-child) td:not([colspan]):nth-child(1)::before{content:'Tanggal'}
  .consignment-page .panel:not(:first-child) td:not([colspan]):nth-child(3)::before{content:'Laku'}
  .consignment-page .panel:not(:first-child) td:not([colspan]):nth-child(4)::before{content:'Penjualan'}
  .consignment-page .panel:not(:first-child) td:not([colspan]):nth-child(5)::before{content:'Keuntungan toko'}
  .consignment-page .panel:not(:first-child) td:not([colspan]):nth-child(6)::before{content:'Hak penitip'}
  .consignment-page .panel:not(:first-child) td:not([colspan]):nth-child(7)::before{content:'Status / catatan';display:block}
  .consignment-page .panel:first-child td form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
  .consignment-page .panel:first-child td form .form-control{min-width:0}
  .consignment-page .panel:first-child td form button{grid-column:1/-1}
}

@media (max-width: 900px) {
  .order-filter { grid-template-columns: 1fr; }
  .order-batch-toolbar { align-items: stretch; flex-direction: column; }
  .order-batch-toolbar > .d-flex { display: grid !important; grid-template-columns: 1fr 1fr; }
  .order-table thead { display: none; }
  .order-table, .order-table tbody, .order-table tr, .order-table td { display: block; width: 100%; }
  .order-table tr { border-bottom: 2px solid #d8e5ec; padding: 10px 0; }
  .order-table td { border: 0; padding: 5px 8px !important; text-align: right !important; }
  .order-table td::before { content: attr(data-label); float: left; color: var(--muted); font-size: 12px; font-weight: 700; }
  .order-table td:last-child { text-align: right !important; }
}