/* Shared interaction layer. Existing brand and printable layouts stay in app.css. */
.app-shell > main { min-width: 0; }
.content > *, .count-cards > article, .count-product { min-width: 0; }
.operational-note, .notification, .count-product, .review-box, .receipt-party, .field-error { overflow-wrap: anywhere; }
.report-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; align-items: start; }
.report-filter > .button { margin-top: 23px; }
.errorlist { color: var(--danger); padding-left: 18px; font-size: 12px; overflow-wrap: anywhere; }
.password-control { position: relative; display: flex; align-items: center; width: 100%; }
.password-control input { min-width: 0; padding-right: 83px !important; }
.password-toggle { position: absolute; right: 5px; border: 0; border-radius: 6px; padding: 10px; background: #eef1f6; color: var(--navy); font-weight: 700; cursor: pointer; }
@media (max-width: 700px) { .report-filter { grid-template-columns: 1fr; } .report-filter > .button { margin-top: 0; text-align: center; } }
.content { width: 100%; }
.content:focus { outline: none; }
button, input, select, textarea { font-family: inherit; }
.field input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .field select, .field textarea, .import-form input[type=text], .import-form select {
  width: 100%; min-width: 0; padding: 12px; border: 1px solid #cbd5e1;
  border-radius: 9px; background: #fff; font: inherit; color: var(--text);
}
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #a699db; outline-offset: 3px; }
.button { min-height: 40px; transition: background-color .15s ease, box-shadow .15s ease; }
.button:not(:disabled):hover { box-shadow: 0 3px 10px #102b521a; }
.button[aria-disabled=true] { opacity: .6; cursor: wait; }
.sidebar nav a.active { box-shadow: inset 3px 0 #c6bcf4; }
.notification { display: flex; align-items: start; gap: 16px; border-left-width: 4px; }
.notification > span { flex: 1; }
.notification button { border: 0; background: transparent; font-size: 21px; color: inherit; cursor: pointer; }
.notification-success { background: #edf9f1; border-color: #badfc6; color: #1c633b; }
.notification-error { background: #fff1f1; border-color: #ebbbbb; color: #9c2626; }
.connection-notice, .checkout-errors { background: #fff1ed; border: 1px solid #edc3b4; color: #923f21; padding: 15px; border-radius: 10px; margin-bottom: 12px; }
.checkout-errors ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.field [aria-invalid=true] { border-color: #c92727 !important; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 100; padding: 12px; background: white; }
.skip-link:focus { top: 8px; }
.nav-toggle, .nav-close, .nav-backdrop { display: none; }
.credit-preview { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #e2d8bb; padding-top: 12px; font-size: 13px; }
.credit-preview strong { color: var(--navy); font-variant-numeric: tabular-nums; }
.checkout-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 5px 0 0; }
.cart-line-error[hidden], .connection-notice[hidden] { display: none; }
.cart-line { max-height: none; overflow: visible; transition: background-color .15s ease, opacity .15s ease; }
.cart-line.is-removing { overflow: hidden; }
.cart-line.is-confirmed { animation: none; background: #edf9f1; }
.selected-customer-identity .selected-customer-check { display: grid; color: #fff; }
.cart-panel { top: 18px; }
.cart-lines { max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cart-line-total, .cart-total strong { font-variant-numeric: tabular-nums; }
.credit-summary { display: grid; gap: 8px; }
.list-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.list-toolbar .field { flex: 1 1 180px; }
.list-toolbar .field.search-field { flex-grow: 2; }
.list-toolbar select { width: 100%; padding: 12px; border-radius: 9px; border: 1px solid #cbd5e1; font: inherit; background: white; }
.list-meta { padding: 0 18px 12px; color: var(--muted); font-size: 12px; }
.sales-table tbody tr:hover { background: #f7f9fd; }
.sales-table td.customer-cell { white-space: normal; min-width: 180px; max-width: 270px; }
.sales-table .status { white-space: nowrap; }
.dashboard-grid > *, .import-grid > *, .report-grid > *, .field { min-width: 0; }
.formset-table input[type=checkbox] { min-width: 18px; width: 18px; height: 18px; }
.panel-heading { gap: 12px; }
.panel-heading > a, .launch-checklist .panel-heading > strong { flex-shrink: 0; }
.table-wrap:focus-visible { outline: 3px solid #a699db; outline-offset: -3px; }
.table-scroll-hint { padding: 7px 16px; margin: 0; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.master-data-dialog[aria-busy=true] { cursor: progress; }
.master-data-dialog { color: var(--navy); }
.field .helptext, .field a { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .page-heading { flex-wrap: wrap; }
  .page-heading > div:first-child { flex: 1 1 200px; }
  .quick-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .panel-heading { flex-wrap: wrap; }
  .sunat-summary { gap: 12px; }
}
@media (min-width: 901px) {
  .sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; scrollbar-width: thin; }
  .logout-form { padding-top: 22px; }
}
@media (max-width: 1100px) {
  .pos-layout > [data-cart-panel] { grid-row: 1; }
  .cart-lines { max-height: 280px; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; flex: none; border: 1px solid var(--line); border-radius: 9px; background: #f3f5f9; color: var(--navy); padding: 8px 12px; font-size: 20px; }
  .topbar { gap: 10px; min-height: 70px; height: auto; padding: 12px 16px; }
  .topbar > div:first-of-type { flex: 1; min-width: 0; }
  .topbar strong { overflow-wrap: anywhere; }
  .app-shell > .sidebar { display: none; }
  body.nav-open { overflow: hidden; }
  body.nav-open .sidebar { display: flex; position: fixed; inset: 0 auto 0 0; z-index: 81; width: min(310px, 87vw); height: 100dvh; padding: 55px 16px 20px; overflow-y: auto; }
  body.nav-open .sidebar nav { display: grid; overflow: visible; }
  body.nav-open .sidebar .brand { display: block; text-align: center; }
  body.nav-open .brand img { width: 150px; height: 70px; margin: 0 auto 10px; }
  body.nav-open .logout-form { display: block; margin-top: 18px; }
  .nav-close { display: block; position: absolute; top: 10px; right: 15px; background: transparent; border: none; color: white; font-size: 30px; cursor: pointer; }
  .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: #081c3cb3; border: 0; z-index: 80; }
  .user-actions { flex: none; }
}
@media (max-width: 560px) {
  .page-heading h1 { font-size: 24px; }
  .page-heading p { font-size: 13px; line-height: 1.5; }
  .user-actions .mobile-logout { display: none; }
  .receipt { padding: 16px; }
  .receipt-header, .receipt-actions { flex-wrap: wrap; gap: 12px; }
  .list-toolbar { padding: 14px; }
  .list-toolbar .button { flex: 1; text-align: center; }
  .product-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-card-actions { flex-wrap: wrap; }
  .product-card-actions form, .product-card-actions .button { width: 100%; }
  .product-card-code span { display: none; }
  .product-image-placeholder { width: 45px; height: 45px; font-size: 23px !important; }
  .product-card-body h3 { font-size: 12px; overflow-wrap: anywhere; }
  .product-readiness { max-width: 100%; font-size: 9px !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media print { .nav-toggle, .nav-backdrop, .skip-link, .notification, .connection-notice, .table-scroll-hint { display: none !important; } .cart-lines { max-height: none; } }