*{
box-sizing: border-box;
}

:root {
--primary: #159bc5;
--primary-dark: #0e86aa;
--primary-soft: #e8f7fc;

--navy: #102a43;

--green: #22c55e;
--green-soft: #dcfce7;

--warning: #f59e0b;
--warning-soft: #fef3c7;

--red: #ef4444;
--red-soft: #fee2e2;

--orange: #ea580c;

--bg: #f3f6f9;
--panel: #ffffff;

--text: #243447;
--muted: #64748b;
--border: #e5e7eb;

--workspace-width: 1450px;

--radius: 14px;


}

html {
scroll-behavior: smooth;
}

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

#manage-users-section {
scroll-margin-top: 20px;
}

body {
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif;

background: var(--bg);
color: var(--text);


}

/* =========================================================
PAGE LOADER
========================================================= */

.page-loader {
min-height: 100vh;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 14px;

background: var(--bg);

color: var(--muted);

font-size: 13px;
font-weight: 600;


}

.page-loader[hidden] {
display: none;
}

.page-loader .spinner {
width: 34px;
height: 34px;

border: 3px solid var(--border);
border-top-color: var(--primary);

border-radius: 50%;

animation: pos-spin 0.7s linear infinite;


}

@keyframes pos-spin {
to {
    transform: rotate(360deg);
}
}

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

.login-body {
min-height: 100vh;

display: grid;
place-items: center;

background: var(--bg);
padding: 20px;


}

.login-panel {
width: min(100%, 380px);

background: white;

padding: 34px;

border: 1px solid var(--border);

border-radius: 16px;

box-shadow:
    0 6px 24px rgba(15, 39, 71, 0.08);


}

.login-eyebrow {
display: block;

font-size: 10px;
font-weight: 800;

letter-spacing: 0.12em;

color: var(--primary);

text-transform: uppercase;

margin-bottom: 6px;


}

.login-panel h1 {
margin: 0 0 4px;

font-size: 22px;

color: var(--navy);


}

.login-subtitle {
margin: 0 0 24px;

color: var(--muted);

font-size: 13px;


}

.login-panel label {
display: block;

font-size: 12px;
font-weight: 700;

color: #475569;

margin: 14px 0 5px;


}

.login-panel input {
width: 100%;

padding: 11px 13px;

border: 1px solid var(--border);

border-radius: 8px;

font-size: 14px;

outline: none;


}

.login-panel input:focus {
border-color: var(--primary);

box-shadow:
    0 0 0 3px rgba(21, 155, 217, 0.14);


}

.login-panel button {
width: 100%;

margin-top: 22px;

padding: 12px;

border: 0;

border-radius: 8px;

background: var(--primary);

color: white;

font-size: 15px;
font-weight: 700;

cursor: pointer;


}

.login-panel button:hover {
background: var(--primary-dark);
}

.login-panel button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.login-panel button:disabled {
opacity: 0.75;
cursor: not-allowed;
}

.login-panel .btn-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: pos-spin 0.7s linear infinite;
}

.login-panel .btn-spinner[hidden] {
display: none;
}

@keyframes pos-spin {
to { transform: rotate(360deg); }
}

.field-error {
margin: 6px 0 0;
font-size: 12.5px;
line-height: 1.4;
color: #dc2626;
display: flex;
align-items: flex-start;
gap: 6px;
}

.field-error[hidden] {
display: none;
}

.field-error::before {
content: "!";
flex: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #dc2626;
color: white;
font-size: 11px;
font-weight: 800;
line-height: 15px;
text-align: center;
}

input.field-invalid {
border-color: #dc2626;
}

input.field-invalid:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.inventory-offline-banner {
display: flex;
align-items: center;
gap: 10px;
background: var(--warn-soft, #fdf1de);
border: 1px solid #f0c987;
color: #92651a;
border-radius: 8px;
padding: 10px 14px;
font-size: 13px;
margin-bottom: 14px;
}

.inventory-offline-banner[hidden] {
display: none;
}

.inventory-offline-banner .status-dot.offline {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d97706;
flex: none;
animation: pos-pulse 1.4s ease-in-out infinite;
}

@keyframes pos-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}

.inventory-offline-banner span:nth-child(2) {
flex: 1;
}

.account-summary-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
}

.account-summary-avatar {
flex: none;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 800;
}

.account-summary-info {
min-width: 0;
}

.account-summary-name {
font-size: 17px;
font-weight: 700;
color: var(--text);
}

.account-summary-email {
font-size: 13px;
color: var(--muted);
margin: 2px 0 8px;
overflow-wrap: anywhere;
}

.account-section {
margin-top: 20px;
}

.account-form-card {
padding: 20px;
}

.account-form + .account-form {
margin-top: 4px;
}

.account-form-row {
display: flex;
align-items: flex-end;
gap: 10px;
flex-wrap: wrap;
}

.account-form-row .account-field {
flex: 1;
min-width: 180px;
margin-bottom: 0;
}

.account-divider {
border: none;
border-top: 1px solid var(--border);
margin: 20px 0;
}

.account-field { margin-bottom: 14px; }
.account-field label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 13px;
color: #374151;
}
.account-field input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font: inherit;
}
.account-field.checkbox-field {
display: flex;
align-items: center;
gap: 8px;
}
.account-field.checkbox-field input {
width: auto;
}
.account-field.checkbox-field label {
margin-bottom: 0;
font-weight: normal;
}

.login-panel .info-box {
margin-bottom: 4px;
padding: 14px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 8px;
color: #1e40af;
font-size: 14px;
line-height: 1.5;
text-align: left;
}

/* =========================================================
HEADER
========================================================= */

.pos-header {
max-width: var(--workspace-width);

min-height: 64px;

margin: 22px auto 0;

display: flex;
align-items: center;
justify-content: space-between;

padding: 12px 20px;

background: #ffffff;
color: var(--text);

border: 1px solid var(--border);
border-radius: 16px;

z-index: 20;

box-shadow: 0 6px 24px rgba(15, 39, 71, 0.08);


}

.brand-area {
display: flex;
flex-direction: column;
gap: 2px;

min-width: 200px;


}

.header-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
color: var(--primary);
text-transform: uppercase;
}

.header-title {
font-size: 19px;
font-weight: 700;
color: var(--navy);
}

.header-center {
flex: 1;

display: flex;
justify-content: center;


}

.location-display {
display: flex;
align-items: center;
gap: 8px;

color: var(--muted);

font-size: 13px;
font-weight: 600;


}

.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
display: inline-block;
}

.header-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 8px;
gap: 14px;

min-width: 260px;
justify-content: flex-end;


}

.logged-in-badge {
font-size: 12px;
color: var(--muted);

background: #f8fafc;

padding: 8px 14px;

border-radius: 999px;


}

.logged-in-badge strong {
color: var(--navy);
}

.register-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: .02em;
padding: 7px 13px;
border-radius: 999px;
text-transform: uppercase;
}

.register-status::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}

.register-status.is-open {
color: #15803d;
background: #dcfce7;
}

.register-status.is-closed {
color: #b91c1c;
background: #fee2e2;
}

.header-btn[hidden] {
display: none;
}

.header-btn {
display: inline-block;

border: 1px solid var(--border);
background: #ffffff;

padding: 7px 15px;

border-radius: 999px;

cursor: pointer;

font-size: 12px;
font-weight: 700;

color: var(--text);

text-decoration: none;

transition: background-color .15s ease, border-color .15s ease, color .15s ease;


}

.header-btn:hover {
background: #f8fafc;
border-color: #d5d9df;
}

#manager-console-link {
color: var(--primary-dark);
border-color: var(--primary-soft);
background: var(--primary-soft);
}

#manager-console-link:hover {
background: #d9f0f8;
border-color: var(--primary);
}

.close-register-btn {
color: var(--red);
border-color: #fecaca;
}

.close-register-btn:hover {
background: var(--red-soft);
}

.logout-btn:hover {
background: var(--red-soft);
border-color: #fecaca;
color: var(--red);
}

/* =========================================================
STATS
========================================================= */

.stats-date-label {
max-width: var(--workspace-width);

margin: 18px auto 0;

padding: 0 24px;

font-size: 12px;
font-weight: 600;

color: var(--muted);


}

.stats-row {
max-width: var(--workspace-width);

margin: 20px auto 0;

padding: 0 24px;

display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap: 16px;


}

.stat-card {
background: white;

border: 1px solid var(--border);

border-radius: 12px;

padding: 16px 20px;

display: flex;
align-items: center;
gap: 14px;

box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.05);

transition: box-shadow .15s ease, transform .15s ease;


}

.stat-card:hover {
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}

.stat-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 800;
}

.stat-card-neutral .stat-icon {
background: #f1f5f9;
color: #475569;
}

.stat-card-primary .stat-icon {
background: var(--primary-soft);
color: var(--primary-dark);
}

.stat-card-danger .stat-icon {
background: var(--red-soft);
color: var(--red);
}

.stat-label {
font-size: 12px;
font-weight: 600;
color: var(--muted);

margin-bottom: 6px;


}

.stat-value {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);


}

.stat-primary {
color: var(--primary);
}

.stat-danger {
color: var(--red);
}

/* =========================================================
SESSION NOTICE (above products)
========================================================= */

.session-notice {
max-width: var(--workspace-width);

margin: 16px auto 0;

padding: 12px 20px;

border-radius: 12px;

font-size: 13px;
font-weight: 600;


}

.session-notice.notice-success {
background: var(--green-soft);
color: #15803d;
border: 1px solid #bbf7d0;
}

.session-notice.notice-warning {
background: var(--warning-soft);
color: #b45309;
border: 1px solid #fde68a;
}

.session-notice.notice-danger {
background: var(--red-soft);
color: var(--red);
border: 1px solid #fecaca;
}

/* =========================================================
SESSION SUMMARY (inside cart)
========================================================= */

.session-summary {
background: #f8fafc;

border: 1px solid var(--border);

border-radius: 10px;

padding: 10px 12px;

margin: 8px 0 4px;

font-size: 12px;


}

.session-summary-row {
display: flex;
justify-content: space-between;
padding: 2px 0;
}

.session-summary-row span:first-child {
color: var(--muted);
}

.session-summary-row span:last-child {
font-weight: 700;
color: var(--text);
}

.session-summary.variance-positive .variance-value {
color: var(--green);
}

.session-summary.variance-negative .variance-value {
color: var(--red);
}

/* =========================================================
MAIN WORKSPACE
========================================================= */

.pos-workspace {
max-width: var(--workspace-width);

margin: 0 auto;

display: grid;

grid-template-columns:
    minmax(0, 2fr)
    minmax(340px, 1fr);

gap: 22px;

padding: 24px;


}

/* =========================================================
CATALOG
========================================================= */

.catalog-section {
min-width: 0;

background: white;

border: 1px solid var(--border);

border-radius: 14px;

padding: 20px;

box-shadow:
    0 3px 12px rgba(15, 39, 71, 0.05);


}

.catalog-heading-row {
display: flex;
align-items: center;
justify-content: space-between;

margin-bottom: 14px;


}

.section-eyebrow {
font-size: 13px;

letter-spacing: 0.04em;

font-weight: 700;

color: var(--navy);

text-transform: uppercase;


}

.refresh-btn {
border: 1px solid var(--border);

background: white;

padding: 7px 12px;

border-radius: 8px;

cursor: pointer;

font-size: 12px;
font-weight: 700;

color: var(--muted);


}

.refresh-btn:hover {
background: #f8fafc;
color: var(--text);
}

/* =========================================================
SEARCH
========================================================= */

.product-search {
height: 50px;

display: flex;
align-items: center;

background: white;

border: 1px solid var(--border);

border-radius: 11px;

padding: 0 13px;

box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03);


}

.product-search:focus-within {
border-color: #93c5fd;

box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.08);


}

.search-icon {
color: #94a3b8;

font-size: 24px;

margin-right: 8px;


}

.category-filter-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}

.category-filter-row label {
font-size: 12px;
font-weight: 700;
color: var(--muted);
white-space: nowrap;
}

.category-filter-row select {
flex: 1;
max-width: 240px;
height: 38px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 9px;
background: white;
color: var(--text);
font-size: 13px;
}

.category-filter-row select:focus {
outline: none;
border-color: #93c5fd;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.empty-catalog {
grid-column: 1 / -1;
padding: 40px 20px;
text-align: center;
color: var(--muted);
font-size: 13px;
}

.products-pagination {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border);
}

.page-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
border: 1px solid var(--border);
background: white;
color: var(--text);
cursor: pointer;
transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.page-nav-btn:hover:not(:disabled) {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary-dark);
}

.page-nav-btn:active:not(:disabled) {
transform: scale(.94);
}

.page-nav-btn:disabled {
opacity: .35;
cursor: not-allowed;
}

.page-info {
display: flex;
align-items: baseline;
gap: 4px;
font-size: 14px;
font-weight: 700;
color: var(--text);
min-width: 46px;
justify-content: center;
}

.page-info-sep {
color: var(--muted);
font-weight: 500;
}

.page-count {
position: absolute;
right: 0;
font-size: 11px;
color: var(--muted);
}

@media (max-width: 720px) {
    .page-count {
        position: static;
        width: 100%;
        text-align: center;
        margin-top: 6px;
    }
}

.product-search input {
flex: 1;

height: 100%;

border: 0;
outline: 0;

font-size: 14px;

color: var(--text);

background: transparent;


}

.search-shortcut {
font-size: 9px;

font-weight: 800;

letter-spacing: 0.08em;

color: #94a3b8;

padding: 5px 7px;

background: #f8fafc;

border-radius: 5px;


}

.refresh-link {
border: 0;

background: none;

padding: 4px 6px;

color: var(--primary);

font-size: 12px;
font-weight: 700;

cursor: pointer;

white-space: nowrap;


}

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

/* =========================================================
PRODUCT GRID
========================================================= */

.products-grid {
display: grid;

grid-template-columns:
    repeat(auto-fill, minmax(205px, 1fr));

align-items: stretch;

gap: 13px;

margin-top: 18px;


}

.product-card {
background: white;

border: 1px solid var(--border);

border-radius: 12px;

padding: 12px;

display: flex;
flex-direction: column;
gap: 6px;

transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;

}

.product-card:hover {
box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
border-color: #d5d9df;
transform: translateY(-2px);
}

.product-card.out-of-stock {
opacity: 0.65;
}

.product-card.out-of-stock:hover {
transform: none;
box-shadow: none;
}

.product-image {
width: 100%;
height: 104px;
flex-shrink: 0;
box-sizing: border-box;
object-fit: contain;
object-position: center;
border-radius: 10px;
margin-bottom: 10px;
padding: 8px;
background: #f8fafc;
border: 1px solid var(--border);
}

.product-image-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: #b6bec9;
font-size: 11px;
font-weight: 600;
background: linear-gradient(135deg, #f8fafc, #eef1f5);
}

.product-image-placeholder::before {
content: '';
width: 26px;
height: 26px;
opacity: .55;
background-color: #b6bec9;
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'></rect><circle cx='9' cy='10' r='2'></circle><path d='M21 16l-5.2-5.2a2 2 0 0 0-2.8 0L4 20'></path></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'></rect><circle cx='9' cy='10' r='2'></circle><path d='M21 16l-5.2-5.2a2 2 0 0 0-2.8 0L4 20'></path></svg>");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}

.product-name-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
}

.product-name {
font-weight: 700;

font-size: 13px;

line-height: 1.35;


}

.product-sku {
font-size: 11px;

color: var(--muted);

margin-top: 3px;


}

.product-price {
font-size: 17px;

font-weight: 800;

margin-top: 10px;

color: var(--text);


}

.stock-badge {
flex-shrink: 0;

padding: 2px 8px;

border-radius: 999px;

background: var(--primary-soft);

color: var(--primary-dark);

font-size: 10px;
font-weight: 700;

white-space: nowrap;


}

.stock-badge.out {
background: var(--red-soft);
color: var(--red);
}

.product-card select {
width: 100%;

margin-top: 4px;

padding: 7px 8px;

border:
    1px solid var(--border);

border-radius: 7px;

background: #fafafa;

font-size: 11px;


}

.product-card button {
width: 100%;

padding: 9px;

border: 0;

border-radius: 7px;

background: var(--primary);

color: white;

font-size: 11px;

font-weight: 750;

cursor: pointer;


}

.product-card button:hover {
background: var(--primary-dark);
}

.product-card .add-btn {
margin-top: auto;
}

.product-card button:disabled {
background: #e2e8f0;

color: #94a3b8;

cursor: not-allowed;


}

button.other-locations-toggle {
width: auto;
align-self: flex-start;

background: none;

border: 0;

padding: 0;

margin-top: 0;

color: #7c3aed;

font-size: 10px;
font-weight: 700;

cursor: pointer;

text-align: left;
text-decoration: underline;


}

.other-locations-list {
margin-top: 5px;

padding: 7px;

border-radius: 7px;

background: #f8fafc;

color: #475569;

font-size: 10px;


}

.other-locations-list div {
display: flex;
justify-content: space-between;

padding: 2px 0;


}

/* =========================================================
SALE PANEL
========================================================= */

.sale-panel {
background: white;

border: 1px solid var(--border);

border-radius: 15px;

padding: 19px;

height: auto;

display: flex;
flex-direction: column;

box-shadow:
    0 5px 20px rgba(15, 39, 71, 0.07);


}

.sale-panel-header {
display: flex;

justify-content: space-between;

align-items: flex-start;

padding-bottom: 14px;

border-bottom: 1px solid var(--border);


}

.sale-panel-header h2 {
margin: 0;

color: var(--navy);

font-weight: 700;

font-size: 18px;


}

.cart-count {
color: var(--muted);

font-size: 11px;

font-weight: 700;


}

/* =========================================================
CART
========================================================= */

.cart-items {
flex: 1;

overflow-y: auto;

padding: 8px 0;

min-height: 0;


}

.cart-item {
display: flex;

gap: 9px;

padding: 11px 0;

border-bottom: 1px solid #f1f5f9;


}

.cart-item-info {
flex: 1;

min-width: 0;


}

.cart-item-name {
font-size: 12px;

font-weight: 700;

line-height: 1.35;


}

.cart-item-price {
font-size: 11px;

color: var(--muted);

margin-top: 3px;


}

.cart-item-qty-controls {
display: flex;

align-items: center;

gap: 5px;


}

.cart-item-qty-controls button {
width: 25px;
height: 25px;

border:
    1px solid var(--border);

background: white;

border-radius: 6px;

cursor: pointer;

font-weight: 700;


}

.cart-item-qty-controls button:hover {
background: #f8fafc;
}

.cart-item-qty-controls button:disabled {
opacity: .4;
cursor: not-allowed;
background: white;
}

.qty-input {
width: 44px;
height: 25px;
border: 1px solid var(--border);
border-radius: 6px;
text-align: center;
font-size: 12px;
font-weight: 700;
color: var(--text);
padding: 0 2px;
/* Hide the native up/down spinner — the -/+ buttons already do that job,
   a second control right next to them is redundant and cramped. */
-moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.qty-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.cart-item-remove {
border: 0;

background: none;

color: var(--red);

font-size: 10px;

cursor: pointer;


}

.empty-cart {
height: auto;

min-height: 110px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

color: var(--muted);


}

.empty-cart-icon {
width: 40px;
height: 40px;

display: grid;
place-items: center;

border-radius: 50%;

background: #f1f5f9;

color: #94a3b8;

font-size: 22px;

margin-bottom: 10px;


}

.empty-cart strong {
color: var(--text);

font-size: 12px;


}

.empty-cart p {
margin: 4px 0 0;

max-width: 190px;

font-size: 11px;

line-height: 1.5;


}

/* =========================================================
SUMMARY
========================================================= */

.sale-details {
border-top: 1px solid var(--border);

padding-top: 10px;


}

.summary-row {
display: flex;

align-items: center;

justify-content: space-between;

padding: 5px 0;

font-size: 12px;


}

.summary-row span {
color: var(--muted);
}

.summary-row strong {
color: var(--text);
}

.tax-row label {
margin: 0;

font-size: 12px;

color: var(--muted);


}

.tax-input-wrapper {
display: flex;

align-items: center;

gap: 4px;

color: var(--muted);


}

.tax-input-wrapper input {
width: 58px;

padding: 5px 6px;

text-align: right;

border:
    1px solid var(--border);

border-radius: 6px;

outline: none;


}

/* =========================================================
TOTAL
========================================================= */

.sale-total {
display: flex;

justify-content: space-between;

align-items: center;

margin-top: 8px;

padding: 14px 0;

border-top: 1px solid var(--border);


}

.sale-total span {
font-size: 13px;

font-weight: 750;


}

.sale-total strong {
font-size: 25px;

letter-spacing: -0.03em;

color: var(--primary);


}

/* =========================================================
CHECKOUT DETAILS
========================================================= */

.checkout-details {
display: grid;

gap: 4px;


}

.checkout-details label {
margin-top: 7px;

font-size: 10px;

font-weight: 800;

color: #64748b;

text-transform: uppercase;

letter-spacing: 0.04em;


}

.checkout-details input,
.checkout-details select {
width: 100%;

height: 38px;

padding: 0 10px;

border:
    1px solid var(--border);

border-radius: 7px;

background: #fff;

outline: none;

font-size: 12px;


}

.checkout-details input:focus,
.checkout-details select:focus {
border-color: #93c5fd;

box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.07);


}

.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.two-col label {
margin-top: 7px;
}

.gcash-qr-wrap[hidden] {
display: none;
}

.gcash-qr-wrap {
grid-column: 1 / -1;

display: flex;
flex-direction: column;
align-items: center;

background: #f8fafc;

border: 1px solid var(--border);

border-radius: 10px;

padding: 10px;

margin-top: 6px;


}

.gcash-qr-img {
width: 96px;
height: 96px;

border-radius: 8px;

background: white;

padding: 4px;

border: 1px solid var(--border);


}

.gcash-qr-hint {
margin: 8px 0 0;

font-size: 11px;
text-align: center;

color: var(--muted);


}

.change-row {
display: flex;

justify-content: space-between;

align-items: center;

padding: 8px 0 0;

font-size: 11px;

color: var(--muted);


}

.change-row strong {
color: var(--green);

font-size: 13px;


}

/* =========================================================
REGISTER ACTIONS (inline)
========================================================= */

.register-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;

margin-top: 12px;


}

.secondary-btn {
width: 100%;

padding: 11px;

border: 1px solid var(--border);

border-radius: 8px;

background: white;

color: var(--text);

font-size: 12px;
font-weight: 800;

cursor: pointer;


}

.secondary-btn:hover:not(:disabled) {
background: #f8fafc;
}

.secondary-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.secondary-btn.danger {
color: var(--red);
border-color: #fecaca;
}

.secondary-btn.danger:hover:not(:disabled) {
background: var(--red-soft);
}

.secondary-btn.warning {
color: #b45309;
border-color: #fde68a;
}

.secondary-btn.warning:hover:not(:disabled) {
background: var(--warning-soft);
}

/* =========================================================
CHECKOUT BUTTON
========================================================= */

.checkout-btn {
width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

margin-top: 15px;

padding: 13px 15px;

border: 0;

border-radius: 9px;

background: var(--primary);

color: white;

font-size: 13px;

font-weight: 800;

cursor: pointer;


}

.checkout-btn:hover:not(:disabled) {
background: var(--primary-dark);
}

.checkout-btn:disabled {
background: #cbd5e1;

color: #f8fafc;

cursor: not-allowed;


}

.checkout-arrow {
font-size: 17px;
}

/* =========================================================
ERROR
========================================================= */

.error-banner {
max-width: var(--workspace-width);
margin: 14px auto 0;

display: flex;
align-items: flex-start;
gap: 10px;

background: #dc2626;
color: white;

border-radius: 10px;
box-shadow: 0 6px 16px rgba(15, 23, 42, .12);

padding: 13px 15px;

font-size: 13px;
font-weight: 600;
line-height: 1.4;

animation: toast-in .22s ease;
}

/*
 * The `hidden` attribute and this rule's own `display: flex` tie in CSS
 * specificity — without this, our `display: flex` silently wins and
 * `hidden` becomes a no-op, so the banner never actually disappears no
 * matter what JS sets .hidden to. This rule is what makes hidden work.
 */
.error-banner[hidden] {
display: none;
}

.error-banner.success-banner {
background: #16a34a;
}

.error-banner.toast-hiding {
animation: toast-out .18s ease forwards;
}

.error-banner .toast-close {
margin-left: auto;
flex-shrink: 0;
background: transparent;
border: 0;
color: inherit;
opacity: .8;
cursor: pointer;
font-size: 15px;
line-height: 1;
padding: 0 0 0 6px;
}

.error-banner .toast-close:hover {
opacity: 1;
}

@keyframes toast-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-8px); }
}

/* Loading state — any button, not just product-card's Add to cart */

.is-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}

.is-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 15px;
height: 15px;
margin: -7.5px 0 0 -7.5px;
border: 2px solid rgba(255, 255, 255, .4);
border-top-color: #fff;
border-radius: 50%;
animation: btn-spin .6s linear infinite;
}

@keyframes btn-spin {
to { transform: rotate(360deg); }
}

/* Confirm modal (replaces window.confirm()/window.prompt()) */

.confirm-modal-box {
width: min(100%, 380px);
background: white;
border-radius: 17px;
padding: 26px;
box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25);
}

.confirm-modal-box h3 {
margin: 0 0 8px;
font-size: 17px;
color: var(--text);
}

.confirm-modal-box p {
margin: 0 0 18px;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}

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

.confirm-modal-box .form-group label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 700;
color: var(--muted);
}

.confirm-modal-box .form-group input {
width: 100%;
height: 38px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 9px;
font-size: 13px;
box-sizing: border-box;
}

.confirm-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}

.btn-secondary-modal,
.btn-danger-modal {
padding: 10px 16px;
border-radius: 9px;
border: 0;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}

.btn-secondary-modal {
background: #f1f5f9;
color: var(--text);
}

.btn-secondary-modal:hover {
background: #e2e8f0;
}

.btn-danger-modal {
background: #dc2626;
color: white;
}

.btn-danger-modal:hover {
background: #b91c1c;
}

/* =========================================================
REGISTER MODAL
========================================================= */

.modal-overlay {
position: fixed;

inset: 0;

display: grid;

place-items: center;

padding: 20px;

background:
    rgba(15, 23, 42, 0.58);

z-index: 100;


}

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

.register-modal {
width: min(100%, 400px);

background: white;

border-radius: 17px;

padding: 28px;

box-shadow:
    0 25px 70px rgba(15, 23, 42, 0.25);


}

.register-modal-icon {
width: 48px;
height: 48px;

display: grid;

place-items: center;

border-radius: 12px;

background: var(--primary-soft);

color: var(--primary);

font-size: 21px;

font-weight: 800;

margin-bottom: 18px;


}

.register-modal h2 {
margin: 0;

font-size: 22px;


}

.register-modal p {
margin: 7px 0 20px;

color: var(--muted);

font-size: 12px;

line-height: 1.6;


}

.register-modal label {
display: block;

margin-bottom: 6px;

font-size: 11px;

font-weight: 800;

color: #475569;

text-transform: uppercase;


}

.money-input {
height: 46px;

display: flex;

align-items: center;

gap: 9px;

padding: 0 12px;

border:
    1px solid var(--border);

border-radius: 9px;


}

.money-input span {
color: var(--muted);

font-weight: 700;


}

.money-input input {
flex: 1;

border: 0;

outline: 0;

font-size: 17px;

font-weight: 700;


}

.modal-primary-btn {
width: 100%;

margin-top: 16px;

padding: 12px;

border: 0;

border-radius: 9px;

background: var(--primary);

color: white;

font-weight: 800;

cursor: pointer;


}

.modal-primary-btn:hover {
background: var(--primary-dark);
}

.modal-error {
margin-top: 10px;

padding: 9px;

border-radius: 7px;

background: var(--red-soft);

color: var(--red);

font-size: 11px;


}

.modal-success {
margin-top: 10px;

padding: 9px;

border-radius: 7px;

background: #dcfce7;

color: #166534;

border: 1px solid #bbf7d0;

font-size: 11px;
}

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

@media (max-width: 1100px) {

.pos-workspace {
    grid-template-columns:
        minmax(0, 1fr)
        360px;
}

.header-center {
    display: none;
}


}

@media (max-width: 850px) {

.pos-header {
    height: auto;

    min-height: 72px;

    padding: 12px 16px;

    gap: 12px;

    flex-wrap: wrap;
}

.error-banner {
    top: 140px;
    right: 12px;
    left: 12px;
    max-width: none;
}

.header-actions {
    min-width: auto;

    margin-left: auto;
}

.cashier-display {
    display: none;
}

.pos-workspace {
    grid-template-columns: 1fr;

    padding: 16px;
}

.sale-panel {
    position: relative;

    top: auto;

    height: auto;

    min-height: 500px;
}


}

@media (max-width: 520px) {

.brand-text {
    display: none;
}

.stats-row {
    grid-template-columns: 1fr;
    padding: 0 16px;
    gap: 10px;
}

.stat-card {
    padding: 14px 16px;
}

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

    gap: 8px;
}

.product-card {
    padding: 11px;
}

.product-price {
    font-size: 16px;
}

.search-shortcut {
    display: none;
}


}

/* =========================================================
REPORTS / RECEIPTS SECTIONS
========================================================= */

.reports-section,
.receipts-section,
.breakdown-section {
max-width: var(--workspace-width);

margin: 26px auto 0;

padding: 0 24px;


}

.receipts-section {
margin-bottom: 30px;
}

.breakdown-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px;


}

.breakdown-grid.single-column {
grid-template-columns: 1fr;
}

.breakdown-grid .table-card .section-heading-row {
padding: 16px 16px 0;

margin-bottom: 8px;


}

@media (max-width: 850px) {

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

}

.section-heading-row {
margin-bottom: 12px;
}

.report-heading-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}

.report-date-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}

.report-date-filter input {
min-width: 0;
}

.report-date-filter label {
font-size: 11px;
font-weight: 700;
color: var(--muted);

text-transform: uppercase;


}

.report-date-filter input[type="date"] {
padding: 6px 10px;

border: 1px solid var(--border);

border-radius: 8px;

font-size: 12px;

color: var(--text);

background: white;


}

.table-card {
background: white;

border: 1px solid var(--border);

border-radius: 12px;

box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.05);

overflow: hidden;


}

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

.reports-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
}

.reports-table th {
text-align: left;

padding: 12px 16px;

background: #f8fafc;

color: var(--muted);

font-size: 11px;
font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.04em;

border-bottom: 1px solid var(--border);


}

.reports-table td {
padding: 12px 16px;

border-bottom: 1px solid var(--border);

font-size: 13px;

color: var(--text);

vertical-align: middle;

white-space: nowrap;


}

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

.reports-table tbody tr:hover {
background: #f8fafc;
}

.table-empty {
padding: 30px 16px;

text-align: center;

color: var(--muted);

font-size: 13px;


}

.txn-id {
font-weight: 700;
font-size: 12px;
}

.status-badge {
display: inline-block;

padding: 3px 10px;

border-radius: 999px;

font-size: 10px;
font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.04em;


}

.status-completed {
background: var(--green-soft);
color: #15803d;
}

.status-voided {
background: var(--red-soft);
color: #b91c1c;
}

.status-refunded {
background: var(--warning-soft);
color: #b45309;
}

.perf-badge {
display: inline-block;

padding: 3px 10px;

border-radius: 999px;

font-size: 10px;
font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.04em;


}

.perf-excellent {
background: var(--green-soft);
color: #15803d;
}

.perf-good {
background: var(--primary-soft);
color: var(--primary-dark);
}

.perf-fair {
background: var(--warning-soft);
color: #b45309;
}

.perf-bad {
background: var(--red-soft);
color: var(--red);
}

.perf-none {
background: #f1f5f9;
color: var(--muted);
}

/* =========================================================
PRODUCT ANALYTICS BAR LIST
========================================================= */

.analytics-bar-list {
padding: 16px;

display: flex;
flex-direction: column;
gap: 12px;


}

.analytics-bar-row {
display: flex;
flex-direction: column;
gap: 4px;
}

.analytics-bar-label {
display: flex;
justify-content: space-between;

font-size: 12px;

color: var(--text);


}

.analytics-bar-label strong {
font-weight: 700;
}

.analytics-bar-label span {
color: var(--muted);
font-size: 11px;
}

.analytics-bar-track {
height: 8px;

background: #f1f5f9;

border-radius: 999px;

overflow: hidden;


}

.analytics-bar-fill {
height: 100%;

background: var(--primary);

border-radius: 999px;


}

.analytics-bar-fill.slow {
background: var(--muted);
}

.period-toggle {
display: flex;

border: 1px solid var(--border);

border-radius: 999px;

padding: 2px;

background: #f8fafc;


}

.period-toggle-btn {
border: 0;
background: transparent;

padding: 5px 14px;

border-radius: 999px;

font-size: 11px;
font-weight: 700;

color: var(--muted);

cursor: pointer;


}

.period-toggle-btn.active {
background: white;
color: var(--primary-dark);

box-shadow:
    0 1px 3px rgba(15, 39, 71, 0.12);


}

.payment-tiles {
padding: 16px;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

gap: 12px;


}

.payment-tile {
background: #f8fafc;

border: 1px solid var(--border);

border-radius: 10px;

padding: 12px;


}

.payment-tile-method {
font-size: 11px;
font-weight: 800;

color: var(--muted);

letter-spacing: 0.04em;

margin-bottom: 4px;


}

.payment-tile-amount {
font-size: 19px;
font-weight: 800;

color: var(--navy);

margin-bottom: 4px;


}

.payment-tile-meta {
font-size: 11px;

color: var(--muted);

margin-bottom: 8px;


}

.analytics-zero-tag {
font-size: 10px;
font-weight: 800;

color: var(--red);

text-transform: uppercase;


}

.row-actions {
display: flex;
gap: 6px;
}

.row-action-btn {
border: 0;

background: #f1f5f9;
color: #334155;

padding: 6px 10px;

border-radius: 6px;

font-size: 12px;
font-weight: 700;

cursor: pointer;


}

.row-action-btn:hover {
filter: brightness(0.97);
}

.row-action-btn.view {
background: #eff6ff;
color: #1d4ed8;
}

.row-action-btn.danger {
background: var(--red-soft);
color: var(--red);
}

.row-action-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}

/* =========================================================
RECENT RECEIPTS LIST
========================================================= */

.add-user-row {
background: #f8fafc;
}

.add-user-row td {
padding: 10px 12px;
}

.add-user-row input,
.add-user-row select {
width: 100%;

min-width: 110px;

padding: 8px 10px;

border: 1px solid var(--border);

border-radius: 8px;

font-size: 12px;

background: white;


}

.add-user-row .secondary-btn {
width: auto;

white-space: nowrap;


}

.create-user-form {
display: flex;

flex-wrap: wrap;

gap: 12px;

align-items: end;

padding: 16px;

border-top: 1px solid var(--border);


}

.create-user-form > div {
flex: 1 1 160px;

min-width: 140px;


}

.create-user-form > button {
flex: 0 0 auto;

margin: 0;


}

.create-user-form label {
display: block;

font-size: 10px;
font-weight: 800;

color: var(--muted);

text-transform: uppercase;

margin-bottom: 5px;


}

.create-user-form input,
.create-user-form select {
width: 100%;

padding: 8px 10px;

border: 1px solid var(--border);

border-radius: 8px;

font-size: 13px;


}

.create-user-form button {
white-space: nowrap;
}

.role-badge {
display: inline-block;

padding: 3px 10px;

border-radius: 999px;

font-size: 10px;
font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.04em;


}

.role-cashier {
background: #eef2ff;
color: #4338ca;
}

.role-manager {
background: var(--primary-soft);
color: var(--primary-dark);
}

.role-admin {
background: var(--navy);
color: white;
}

@media (max-width: 850px) {

.create-user-form > div {
    flex-basis: 100%;
}

}

.receipts-list {
display: grid;

grid-template-columns:
    repeat(auto-fill, minmax(230px, 1fr));

gap: 12px;


}

.receipt-card {
background: white;

border: 1px solid var(--border);

border-radius: 12px;

padding: 15px;

box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.05);


}

.receipt-card-header {
display: flex;

justify-content: space-between;

align-items: center;

gap: 8px;

margin-bottom: 8px;


}

.receipt-card-header .status-badge {
flex-shrink: 0;
}

.receipt-card-id-block {
min-width: 0;
}

.receipt-card-id {
font-size: 13px;
font-weight: 800;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;


}

.receipt-card-time {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}

.receipt-card-total {
font-size: 19px;
font-weight: 800;
color: var(--primary);

margin: 8px 0 4px;


}

.receipt-card-method {
font-size: 11px;
color: var(--muted);

text-transform: uppercase;

letter-spacing: 0.03em;


}

.receipt-card-btn {
width: 100%;

margin-top: 10px;

padding: 9px;

border: 1px solid var(--border);

border-radius: 8px;

background: white;

color: var(--primary-dark);

font-size: 12px;
font-weight: 700;

cursor: pointer;


}

.receipt-card-btn:hover {
background: var(--primary-soft);
}

/* =========================================================
TRANSACTION / RECEIPT MODAL
========================================================= */

.receipt-modal {
width: min(100%, 480px);

max-height: 85vh;

overflow-y: auto;

background: white;

border-radius: 14px;

padding: 24px;

box-shadow:
    0 25px 70px rgba(15, 23, 42, 0.3);


}

.receipt-modal-header {
display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 14px;


}

.receipt-modal-header h2 {
margin: 0;
font-size: 18px;
}

.modal-close-btn {
border: 0;
background: none;

font-size: 14px;

color: var(--muted);

cursor: pointer;


}

.receipt-content {
font-size: 13px;
color: var(--text);


}

.modal-actions {
display: flex;

gap: 10px;

margin-top: 18px;


}

.modal-actions .secondary-btn {
flex: 1;
width: auto;
}

.receipt-content .receipt-store-header {
text-align: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed #cbd5e1;
font-size: 12px;
color: var(--muted);
line-height: 1.5;
}

.receipt-content .receipt-store-header strong {
display: block;
font-size: 15px;
color: #0f172a;
}

.receipt-content .receipt-store-logo {
max-height: 48px;
max-width: 160px;
display: block;
margin: 0 auto 6px;
}

.receipt-content .receipt-row {
display: flex;

justify-content: space-between;

padding: 5px 0;

border-bottom: 1px solid #f1f5f9;


}

.receipt-content .receipt-section-title {
margin: 14px 0 6px;

font-size: 11px;
font-weight: 800;

color: var(--muted);

text-transform: uppercase;

letter-spacing: 0.04em;


}

.receipt-content .receipt-item-row {
display: flex;

justify-content: space-between;

padding: 6px 0;

font-size: 12px;

border-bottom: 1px solid #f8fafc;


}

.receipt-content .receipt-total-row {
display: flex;

justify-content: space-between;

padding: 10px 0 0;

margin-top: 6px;

border-top: 1px solid var(--border);

font-size: 15px;
font-weight: 800;


}

@media (max-width: 850px) {

.reports-section,
.receipts-section {
    padding: 0 16px;
}

}