:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-700: #374151;
    --gray-900: #111827;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

a { color: var(--primary); }

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: white;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-brand { font-weight: 700; font-size: 1.15rem; }
.nav-links { display: flex; gap: 1.25rem; }
.nav-link {
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 500;
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
}
.nav-link:hover { background: var(--gray-100); color: var(--primary); }

.content { padding: 1rem; max-width: 1500px; margin: 0 auto; }
.muted { color: var(--gray-400); }

/* ============== POS ============== */
.pos-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .pos-layout { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
    .pos-layout { grid-template-columns: 1.1fr 1fr 1fr; }
}

.pos-display, .pos-keypad, .pos-products {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.display-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 0;
}
.display-row.sub { border-top: 1px dashed var(--gray-200); }
.display-label { font-size: 1rem; color: var(--gray-700); font-weight: 500; }
.display-value {
    font-size: 2.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.display-value.sub { font-size: 1.85rem; color: var(--gray-700); }
.display-value.change { color: var(--success); }

.items-section {
    margin-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.75rem;
}
.items-header { font-weight: 600; font-size: 0.9rem; color: var(--gray-700); margin-bottom: 0.5rem; }
.items-list {
    max-height: 280px;
    overflow-y: auto;
}
.items-empty {
    text-align: center;
    color: var(--gray-400);
    padding: 1.5rem 0;
    font-size: 0.9rem;
}
.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
    gap: 0.5rem;
}
.item-row .item-name { flex: 1; font-size: 0.95rem; }
.item-row .item-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.item-row .item-remove {
    color: var(--danger);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    background: var(--gray-100);
    border-radius: 0.25rem;
    border: none;
    font-size: 0.875rem;
}

/* Keypad */
.quick-amounts {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.btn-mode {
    padding: 0.7rem;
    background: var(--gray-100);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--gray-700);
}
.btn-mode.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
}

.numpad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.btn {
    padding: 1.1rem 0.5rem;
    font-size: 1.4rem;
    border: none;
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;
    user-select: none;
    transition: transform 0.05s, background 0.15s;
    min-height: 56px;
    font-family: inherit;
    font-weight: 600;
}
.btn:active { transform: scale(0.96); }

.btn.num { background: var(--gray-100); color: var(--gray-900); }
.btn.num:hover { background: var(--gray-200); }
.btn.op {
    background: var(--gray-700);
    color: white;
    font-size: 1.1rem;
}
.btn.op:hover { background: var(--gray-900); }
.btn.op.confirm { background: var(--success); }
.btn.op.confirm:hover { background: #0d9d6f; }
.btn.quick {
    background: var(--primary);
    color: white;
    padding: 0.7rem 0.25rem;
    font-size: 0.95rem;
    min-height: 44px;
}
.btn.quick:hover { background: var(--primary-dark); }

.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.btn-pay {
    padding: 0.85rem;
    background: var(--gray-100);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--gray-700);
    font-family: inherit;
}
.btn-pay.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
}

/* Products */
.pos-products { overflow-y: auto; max-height: calc(100vh - 100px); }
.pos-products h3 { margin-bottom: 0.75rem; font-size: 1rem; }
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
}
.btn.product {
    background: var(--gray-100);
    color: var(--gray-900);
    padding: 0.85rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.btn.product:hover { background: var(--gray-200); }
.product-name { font-weight: 600; margin-bottom: 0.25rem; }
.product-price { color: var(--primary); font-weight: 700; font-size: 0.95rem; }
.product-cat { color: var(--gray-400); font-size: 0.7rem; margin-top: 0.15rem; }

/* ============== Reports / Products pages ============== */
.reports-layout, .products-layout { max-width: 1100px; margin: 0 auto; }
.reports-layout h1, .products-layout h1 { margin-bottom: 1rem; font-size: 1.5rem; }

.card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.card h2 { margin-bottom: 0.75rem; font-size: 1.15rem; }
.card h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}
.kpi {
    background: var(--gray-50);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
}
.kpi-label { font-size: 0.85rem; color: var(--gray-700); }
.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.form-row {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}
.form-row label {
    font-size: 0.85rem;
    color: var(--gray-700);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.form-row input {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.btn.primary {
    background: var(--primary);
    color: white;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    min-height: auto;
}
.btn.primary:hover { background: var(--primary-dark); }
.btn.danger {
    background: var(--danger);
    color: white;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    min-height: auto;
}

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left;
    padding: 0.625rem 0.5rem;
    background: var(--gray-50);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-700);
}
.table td {
    padding: 0.625rem 0.5rem;
    border-top: 1px solid var(--gray-100);
    font-size: 0.95rem;
}
.table td.num { font-variant-numeric: tabular-nums; }

/* Bars */
.method-bar, .hour-bar {
    display: flex;
    align-items: center;
    margin: 0.3rem 0;
    gap: 0.625rem;
    font-size: 0.875rem;
}
.method-bar .label { width: 100px; }
.method-bar .bar, .hour-bar .bar {
    flex: 1;
    height: 18px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}
.method-bar .fill { height: 100%; background: var(--primary); transition: width 0.3s; }
.hour-bar .fill { height: 100%; background: var(--success); transition: width 0.3s; }
.method-bar .value, .hour-bar .value {
    width: 110px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.hour-bar .label { width: 60px; }

/* Transaction list */
.txn-header, .txn-row {
    display: grid;
    grid-template-columns: 60px 130px 110px 90px 80px auto;
    gap: 0.5rem;
    padding: 0.55rem 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}
.txn-header {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
    border-radius: 0.375rem;
}
.txn-row { border-bottom: 1px solid var(--gray-100); }
.txn-row.cancelled { opacity: 0.5; text-decoration: line-through; }
.txn-row .amount { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Product form */
.product-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.7fr auto;
    gap: 0.5rem;
}
.product-form input {
    padding: 0.55rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.95rem;
}
@media (max-width: 700px) {
    .product-form { grid-template-columns: 1fr; }
}

/* ============== Navbar staff badge / logout ============== */
.nav-staff {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.staff-badge {
    background: var(--gray-100);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.staff-badge.manager { background: #fef3c7; color: #92400e; }
.btn-logout {
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}
.btn-logout:hover { background: var(--gray-100); }

/* ============== Login page ============== */
.login-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2rem;
}
.login-card {
    background: white;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    max-width: 480px;
    width: 100%;
}
.login-card h1 { margin-bottom: 0.25rem; font-size: 1.5rem; }
.login-hint { margin-bottom: 1.25rem; font-size: 0.9rem; }

.staff-select {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}
.staff-option {
    background: var(--gray-100);
    border: 2px solid transparent;
    padding: 1rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.15s;
}
.staff-option:hover { background: var(--gray-200); }
.staff-option.manager { background: #fef3c7; color: #92400e; }
.staff-option-name { font-size: 1rem; }

.login-selected {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.btn-link {
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    margin-left: auto;
    font-size: 0.85rem;
    font-family: inherit;
}

.pin-display {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
}
.pin-dot {
    width: 48px;
    height: 56px;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
}
.pin-dot.empty { color: var(--gray-200); }
.pin-dot.filled { background: var(--gray-100); border-color: var(--primary); }

.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 320px;
    margin: 0 auto;
}

.login-error {
    color: var(--danger);
    text-align: center;
    margin-top: 0.75rem;
    min-height: 1.25rem;
    font-size: 0.9rem;
}
.login-empty {
    margin-top: 1rem;
    padding: 1rem;
    background: #fef3c7;
    border-radius: 0.5rem;
    color: #92400e;
    font-size: 0.9rem;
}

/* ============== Closing page ============== */
.closing-layout { max-width: 700px; margin: 0 auto; }
.closing-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.preview-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.preview-row.big { font-size: 1.25rem; }
.preview-row.big strong {
    font-size: 2rem;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.preview-row strong { font-variant-numeric: tabular-nums; }

.diff-box {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    background: var(--gray-50);
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    margin: 0.75rem 0;
}
.diff-box strong {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}
.diff-box.positive strong { color: var(--success); }
.diff-box.negative strong { color: var(--danger); }
.diff-box.zero strong { color: var(--gray-700); }

label.full { width: 100%; }
label.full input { width: 100%; }
.muted.small { font-size: 0.8rem; }

.closing-row {
    display: grid;
    grid-template-columns: 110px 110px 110px 110px 1fr;
    padding: 0.55rem 0.5rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    align-items: center;
}
.closing-row.header {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
    border-radius: 0.375rem;
}
.closing-row .num { font-variant-numeric: tabular-nums; }
.closing-row .pos { color: var(--success); }
.closing-row .neg { color: var(--danger); }

/* ============== Staff page ============== */
.staff-layout { max-width: 1000px; margin: 0 auto; }
.btn.small {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    min-height: auto;
    background: var(--gray-100);
    color: var(--gray-700);
}
.btn.small:hover { background: var(--gray-200); }

.product-form select {
    padding: 0.55rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.backup-row {
    display: grid;
    grid-template-columns: 1fr 100px 180px;
    padding: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.backup-row.header { background: var(--gray-50); font-weight: 600; }

/* ============== Reports tabs ============== */
.reports-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.reports-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
    overflow-x: auto;
}
.rt-tab {
    background: transparent;
    border: none;
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--gray-700);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}
.rt-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.rt-pane { display: none; }
.rt-pane.active { display: block; }

/* ============== Tax filing page ============== */
.tax-filing-layout { max-width: 1100px; margin: 0 auto; }

.filing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.filing-meta {
    text-align: right;
    font-size: 0.875rem;
}
.filing-meta p { margin: 0.15rem 0; }

.filing-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}
.filing-table th, .filing-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.95rem;
}
.filing-table th {
    background: var(--gray-50);
    font-weight: 600;
}
.filing-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.filing-table .total-row {
    background: var(--gray-50);
    font-weight: 700;
}
.filing-table .total-row .num {
    color: var(--primary);
    font-size: 1.05rem;
}

.filing-count { margin-top: 0.5rem; }

.filing-monthly th, .filing-monthly td {
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
}

.filing-disclaimer {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    color: #92400e;
    font-size: 0.85rem;
}

@media print {
    .navbar, .no-print { display: none !important; }
    body { background: white; }
    .card { box-shadow: none; border: 1px solid #ddd; }
    .filing-header { page-break-after: avoid; }
}

/* ============== POS dine selector / tax breakdown ============== */
.dine-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.btn-dine {
    padding: 0.65rem;
    background: var(--gray-100);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--gray-700);
    font-family: inherit;
}
.btn-dine.active {
    background: var(--warning);
    color: white;
    border-color: #b45309;
}

.tax-row {
    border-top: 1px dashed var(--gray-200);
    padding-top: 0.4rem;
}
.tax-breakdown {
    color: var(--gray-700);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.reduced-tag {
    color: #d97706;
    font-weight: 700;
    font-size: 0.85rem;
    margin-left: 0.15rem;
}

.tax-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.tax-badge.reduced { background: #fef3c7; color: #92400e; }
.tax-badge.standard { background: #e0e7ff; color: #3730a3; }

/* Product images */
.product-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.375rem;
    background: var(--gray-100);
}
.product-thumb-placeholder {
    width: 60px;
    height: 60px;
    background: var(--gray-100);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--gray-400);
}
.product-thumb-placeholder.lg {
    width: 120px;
    height: 120px;
    font-size: 2.5rem;
}

.image-edit-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
}
.image-preview-box {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--gray-100);
    position: relative;
}
.image-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.modal-wide { max-width: 600px; }
.products-table textarea, .settings-form textarea {
    padding: 0.55rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.95rem;
    width: 100%;
    resize: vertical;
}
.product-name-cell { font-weight: 600; }

.availability-toggle {
    background: transparent;
    border: 2px solid var(--gray-200);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.availability-toggle.on {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}
.availability-toggle.off {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

/* POS product thumbnails */
.btn.product {
    position: relative;
}
.product-thumb-pos {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.375rem;
    margin: 0 auto 0.4rem;
    display: block;
}
.btn.product.sold-out {
    opacity: 0.4;
    cursor: not-allowed;
}
.btn.product.sold-out:active { transform: none; }
.product-soldout-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--danger);
    color: white;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.recommend-mini {
    display: inline-block;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-700);
    user-select: none;
}
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; }

/* ============== Settings page ============== */
.settings-layout { max-width: 700px; margin: 0 auto; }
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.settings-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--gray-700);
    font-weight: 600;
}
.settings-form input, .settings-form select {
    padding: 0.55rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: white;
}
.settings-form small.muted { font-weight: 400; }
.hw-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
}
.hw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.settings-form .checkbox-row {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.settings-form .checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
.hw-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}
.barcode-input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed #94a3b8;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    font-family: ui-monospace, "SF Mono", monospace;
}
.barcode-input:focus {
    border-style: solid;
    border-color: #2563eb;
    outline: 2px solid rgba(37, 99, 235, 0.15);
}
.recycler-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.recycler-badge.warn {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}
.info-list {
    list-style: none;
    padding: 0;
}
.info-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
}
.info-list li:last-child { border-bottom: none; }

/* Product form grid */
.product-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr 0.6fr auto;
    gap: 0.5rem;
}
.product-form-grid input, .product-form-grid select {
    padding: 0.55rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: white;
}
@media (max-width: 800px) {
    .product-form-grid { grid-template-columns: 1fr 1fr; }
}

/* ============== Orders dashboard ============== */
.orders-layout { max-width: 1100px; margin: 0 auto; }
.orders-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.orders-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.orders-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}
.orders-tabs .tab {
    background: white;
    border: 1px solid var(--gray-200);
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.orders-tabs .tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
}
.orders-tabs .tab .badge {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.orders-tabs .tab.active .badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.orders-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
}

.order-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border-left: 5px solid var(--gray-200);
}
.order-card.status-pending { border-left-color: var(--warning); }
.order-card.status-accepted { border-left-color: var(--primary); }
.order-card.status-completed { border-left-color: var(--success); }
.order-card.status-cancelled { border-left-color: var(--gray-400); opacity: 0.6; }

.order-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.85rem;
}
.order-id {
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.order-table { color: var(--gray-700); }
.order-time { margin-left: auto; color: var(--gray-700); font-size: 0.8rem; }

.order-card-body {
    padding: 0.625rem 0.875rem;
}
.order-item-line {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}
.order-item-line .num { font-variant-numeric: tabular-nums; }
.order-note {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    background: var(--gray-50);
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
    color: var(--gray-700);
}

.order-card-footer {
    padding: 0.625rem 0.875rem;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--gray-100);
    gap: 0.5rem;
}
.order-total {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}
.order-actions {
    margin-left: auto;
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.order-actions .btn { padding: 0.4rem 0.75rem; font-size: 0.85rem; min-height: auto; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
.modal-backdrop .modal { background: white; width: 100%; max-width: 500px; border-radius: 1rem 1rem 0 0; padding: 1.5rem; }
.modal-backdrop .modal h2 { margin-bottom: 1rem; }

/* Staff breakdown in reports */
.staff-bar {
    display: flex;
    align-items: center;
    margin: 0.3rem 0;
    gap: 0.625rem;
    font-size: 0.875rem;
}
.staff-bar .label { width: 110px; }
.staff-bar .bar { flex: 1; height: 18px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.staff-bar .fill { height: 100%; background: var(--warning); transition: width 0.3s; }
.staff-bar .value { width: 130px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Toast */
.toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    font-weight: 500;
    animation: toastIn 0.2s ease-out;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }

@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Coupons */
.coupons-layout { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.coupons-layout h1 { margin-bottom: 1rem; }
.coupon-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    align-items: end;
}
.coupon-form-grid label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--gray-700); gap: 0.25rem; }
.coupon-form-grid .span-full { grid-column: 1 / -1; }
.coupon-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.coupon-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.coupon-input-row input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.4rem;
    font-size: 1rem;
}
.coupon-applied {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}
.coupon-applied .clear-btn {
    background: transparent;
    border: none;
    color: #065f46;
    font-size: 1.1rem;
    cursor: pointer;
}
.coupon-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}
.discount-line {
    color: var(--danger);
    font-weight: 600;
}

/* 事前決済済バッジ */
.prepaid-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.order-prepaid-row {
    padding: 0.3rem 0.75rem 0;
}
.order-card.prepaid {
    border-left: 4px solid #10b981;
}

/* === 顧客分析ダッシュボード === */
.analytics-layout { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.analytics-layout h1 { margin-bottom: 0.3rem; }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.875rem;
    margin: 1.25rem 0;
}
.kpi-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.7rem;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.kpi-label {
    font-size: 0.85rem;
    color: var(--gray-700);
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.kpi-sub {
    font-size: 0.78rem;
    color: var(--gray-400);
    margin-top: 0.2rem;
}

/* セグメント */
.segment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.segment-card {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 0.7rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    font-family: inherit;
}
.segment-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.segment-card.seg-new { border-left: 5px solid #10b981; }
.segment-card.seg-regular { border-left: 5px solid #2563eb; }
.segment-card.seg-dormant { border-left: 5px solid #f59e0b; }
.segment-card.seg-lost { border-left: 5px solid #6b7280; }
.seg-label {
    font-size: 0.85rem;
    color: var(--gray-700);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.seg-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}
.seg-spend {
    font-size: 0.85rem;
    color: var(--gray-400);
    margin-top: 0.2rem;
}

/* バッジ（リスト内） */
.seg-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--gray-700);
    white-space: nowrap;
}
.seg-badge.seg-new { background: #ecfdf5; color: #065f46; }
.seg-badge.seg-regular { background: #dbeafe; color: #1e40af; }
.seg-badge.seg-dormant { background: #fef3c7; color: #92400e; }
.seg-badge.seg-lost { background: #f3f4f6; color: #4b5563; }

/* ヒストグラム */
.histogram { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.hist-row {
    display: grid;
    grid-template-columns: 90px 1fr 60px;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.9rem;
}
.hist-label { color: var(--gray-700); font-weight: 600; }
.hist-bar {
    height: 22px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}
.hist-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width 0.3s;
}
.hist-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--gray-700);
}

/* フィルタコントロール */
.list-controls {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

/* 月別推移 */
.monthly-controls, .cohort-controls, .ltv-controls {
    margin: 0.5rem 0 0.75rem;
}
.monthly-controls label, .cohort-controls label, .ltv-controls label {
    font-size: 0.85rem;
    color: var(--gray-700);
}
.monthly-controls select, .cohort-controls select, .ltv-controls select {
    margin-left: 0.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.35rem;
}
.mo-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}
.mo-sw {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 0.3rem;
    vertical-align: middle;
}
.mo-row {
    display: grid;
    grid-template-columns: 80px 1fr 70px;
    gap: 0.5rem;
    align-items: center;
    margin: 0.3rem 0;
    font-size: 0.9rem;
}
.mo-label { color: var(--gray-700); font-variant-numeric: tabular-nums; }
.mo-bar {
    display: flex;
    height: 18px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}
.mo-fill { height: 100%; transition: width 0.3s; }
.mo-fill.mo-new { background: #10b981; }
.mo-fill.mo-ret { background: #2563eb; }
.mo-total {
    text-align: right;
    color: var(--gray-700);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.monthly-table { margin-top: 1rem; }

/* コホート */
.cohort-table-wrap { overflow-x: auto; }
.cohort-table th, .cohort-table td {
    text-align: center;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
}
.cohort-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.cohort-empty { color: var(--gray-400); background: var(--gray-50); }

/* アラートカード */
.alerts-card {
    border-left: 5px solid #ef4444;
    background: #fef2f2;
}
.alert-item {
    background: white;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--gray-400);
    border-radius: 0.5rem;
    padding: 0.7rem 1rem;
    margin: 0.4rem 0;
}
.alert-item.alert-info { border-left-color: #3b82f6; }
.alert-item.alert-warning { border-left-color: #f59e0b; background: #fffbeb; }
.alert-item.alert-critical { border-left-color: #ef4444; background: #fef2f2; }
.alert-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.alert-sev {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
    background: var(--gray-100);
    color: var(--gray-700);
}
.alert-item.alert-warning .alert-sev { background: #fef3c7; color: #92400e; }
.alert-item.alert-critical .alert-sev { background: #fee2e2; color: #991b1b; }
.alert-item.alert-info .alert-sev { background: #dbeafe; color: #1e40af; }
.alert-head .btn-resolve {
    margin-left: auto;
    background: white;
    border: 1px solid var(--gray-200);
}
.alert-body { font-size: 0.95rem; color: var(--gray-700); }

/* ハブナビハイライト */
.nav-link.nav-dashboard {
    background: linear-gradient(90deg, #2563eb, #6366f1);
    color: white;
    font-weight: 700;
}
.nav-link.nav-dashboard:hover { opacity: 0.92; }

/* === 統合ダッシュボード === */
.dashboard-layout { padding: 1rem; max-width: 1400px; margin: 0 auto; }
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dash-meta { display: flex; align-items: center; gap: 0.6rem; }

.hub-card { padding: 1rem 1.25rem; }
.hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.hub-header h2 { margin: 0; font-size: 1.05rem; }
.hub-link {
    text-decoration: none;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
}
.hub-link:hover { text-decoration: underline; }

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.875rem;
}

.hub-mini-kpi {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}
.hub-mini-kpi > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hub-mini-kpi strong {
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-900);
}

/* セグメントミニ */
.seg-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.seg-mini {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    background: var(--gray-50);
    border-radius: 0.4rem;
    font-size: 0.85rem;
}
.seg-mini.seg-new { background: #ecfdf5; color: #065f46; }
.seg-mini.seg-regular { background: #dbeafe; color: #1e40af; }
.seg-mini.seg-dormant { background: #fef3c7; color: #92400e; }
.seg-mini.seg-lost { background: #f3f4f6; color: #4b5563; }

/* オペレーション */
.ops-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin: 0.6rem 0;
}
.ops-box {
    background: var(--gray-50);
    padding: 0.6rem 0.4rem;
    text-align: center;
    border-radius: 0.5rem;
}
.ops-num {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
}
.ops-label {
    font-size: 0.78rem;
    color: var(--gray-700);
    margin-top: 0.3rem;
}
.ops-pending { background: #fef3c7; }
.ops-pending .ops-num { color: #92400e; }
.ops-cooking { background: #fee2e2; }
.ops-cooking .ops-num { color: #991b1b; }
.ops-ready { background: #d1fae5; }
.ops-ready .ops-num { color: #065f46; }

/* 商品トップ */
.top-products {
    list-style: none;
    padding-left: 0;
    counter-reset: tp;
    margin: 0.4rem 0;
}
.top-products li {
    counter-increment: tp;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--gray-100);
}
.top-products li::before {
    content: counter(tp) ". ";
    font-weight: 700;
    color: var(--primary);
    margin-right: 0.3rem;
}
.top-products small { display: block; font-size: 0.75rem; }

/* トレンド */
.trend-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    gap: 0.5rem;
    align-items: center;
    margin: 0.3rem 0;
    font-size: 0.9rem;
}
.trend-label {
    color: var(--gray-700);
    font-variant-numeric: tabular-nums;
}
.trend-bar {
    height: 22px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}
.trend-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #10b981);
    transition: width 0.3s;
}
.trend-amount {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* === 仕入れ最適化 === */
.proc-row { cursor: default; }
.proc-detail-card {
    margin-bottom: 0.6rem;
    padding: 0.7rem 1rem;
}
.proc-detail-card .detail-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}
.proc-detail-card .detail-toggle {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    transition: transform 0.15s;
}
.proc-detail-card.open .detail-toggle { transform: rotate(180deg); }
.proc-detail-card .detail-body {
    display: none;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--gray-200);
}
.proc-detail-card.open .detail-body { display: block; }
.proc-detail-card h4 {
    font-size: 0.95rem;
    margin: 0.7rem 0 0.4rem;
    color: var(--gray-700);
}
.proc-calc {
    list-style: none;
    padding-left: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-700);
}
.proc-calc li { padding: 0.1rem 0; }

/* === 売上予測 === */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 0.6rem;
}
.comparison-block {
    background: var(--gray-50);
    border-radius: 0.6rem;
    padding: 0.9rem 1rem;
}
.comparison-block h3 {
    font-size: 0.95rem;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}
.comparison-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}
.comp-label { color: var(--gray-700); }
.comp-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.comparison-delta {
    margin-top: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
}
.delta-up { color: #10b981; }
.delta-down { color: #ef4444; }
.delta-neutral { color: var(--gray-400); }

.coef-table th, .coef-table td {
    text-align: center;
    padding: 0.4rem 0.5rem;
}

/* 翌7日予測バー */
.fc-row {
    display: grid;
    grid-template-columns: 140px 1fr 110px;
    gap: 0.5rem;
    align-items: center;
    margin: 0.3rem 0;
    font-size: 0.9rem;
}
.fc-label { color: var(--gray-700); font-variant-numeric: tabular-nums; }
.fc-bar {
    height: 20px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}
.fc-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    transition: width 0.3s;
}
.fc-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* 翌月日別予測 */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
}
.mo-day {
    background: var(--gray-50);
    border-radius: 0.4rem;
    padding: 0.4rem 0.2rem;
    text-align: center;
    font-size: 0.75rem;
}
.mo-day-num { font-weight: 700; font-size: 0.95rem; color: var(--gray-900); }
.mo-day-wd { color: var(--gray-400); margin-bottom: 0.2rem; }
.mo-day-bar {
    height: 36px;
    background: var(--gray-200);
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.mo-day-fill {
    width: 100%;
    background: linear-gradient(180deg, #a855f7, #6366f1);
}
.mo-day-amount {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--gray-700);
    font-variant-numeric: tabular-nums;
}

/* === 商品分析 === */
.period-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: end;
}
.period-controls label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--gray-700);
    gap: 0.25rem;
}
.period-controls input[type="date"] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.4rem;
    font-size: 0.95rem;
}
.heatmap-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0.5rem 0 0.8rem;
}
.heatmap-controls label {
    font-size: 0.85rem;
    color: var(--gray-700);
}
.heatmap-controls select {
    margin-left: 0.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.35rem;
}

/* ABCバッジ */
.abc-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 0.3rem;
    font-weight: 700;
    font-size: 0.85rem;
}
.abc-badge.abc-A { background: #ef4444; color: white; }
.abc-badge.abc-B { background: #f59e0b; color: white; }
.abc-badge.abc-C { background: #9ca3af; color: white; }
.abc-row-A td { background: rgba(239, 68, 68, 0.05); }
.abc-row-B td { background: rgba(245, 158, 11, 0.04); }
.kpi-card.abc-a { border-left: 5px solid #ef4444; }
.kpi-card.abc-b { border-left: 5px solid #f59e0b; }
.kpi-card.abc-c { border-left: 5px solid #9ca3af; }

/* ヒートマップ */
.heatmap-table {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
}
.heatmap-table th, .heatmap-table td {
    padding: 0.35rem 0.4rem;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 3px;
}
.heatmap-table thead th {
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 600;
}
.heatmap-table tfoot td, .heatmap-table tfoot th {
    background: var(--gray-50);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--gray-700);
}
.heatmap-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    cursor: default;
}
.product-row-th {
    text-align: left !important;
    font-size: 0.85rem;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0.6rem !important;
}

/* Broadcastフォーム */
.broadcast-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    align-items: end;
    margin-top: 0.5rem;
}
.broadcast-form-grid label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--gray-700);
    gap: 0.25rem;
}
.broadcast-form-grid .span-full { grid-column: 1 / -1; }
.broadcast-form-grid input,
.broadcast-form-grid select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.4rem;
    font-size: 0.95rem;
}

/* ============================================================
   モバイル最適化
   ============================================================ */

/* ハンバーガーボタン（デフォルト非表示） */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gray-900);
    border-radius: 1px;
    transition: 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-section-label {
    display: none;  /* デスクトップでは非表示 */
}

/* ボトムナビ（デフォルト非表示、モバイルのみ） */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 90;
    padding-bottom: env(safe-area-inset-bottom);
}
.bn-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: var(--gray-700);
    padding: 0.5rem 0.2rem;
    font-size: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    border-top: 3px solid transparent;
    min-height: 60px;
    justify-content: center;
}
.bn-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.bn-item.active {
    color: var(--primary);
    border-top-color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
}
.bn-item:active {
    background: var(--gray-100);
}

/* ボトムナビ表示時のメイン要素余白 */
@media (max-width: 768px) {
    body { padding-bottom: 70px; }
    body.customer { padding-bottom: 8rem; }
    .bottom-nav { display: flex; }
}

/* タッチ操作改善 */
@media (max-width: 768px) {
    .btn, .nav-link, .tab, button {
        min-height: 44px;
    }
    .btn.small, button.small {
        min-height: 36px;
    }
    .btn-logout {
        min-height: 36px;
        padding: 0.4rem 0.6rem;
    }
}

/* ナビゲーション折りたたみ */
@media (max-width: 900px) {
    .navbar {
        flex-wrap: wrap;
        padding: 0.6rem 0.875rem;
    }
    .nav-toggle { display: flex; order: 2; margin-left: auto; }
    .nav-staff { display: none; order: 3; }
    .nav-staff.open, .nav-links.open ~ .nav-staff,
    .nav-links.open + .nav-staff { display: flex; }
    .nav-links {
        display: none;
        order: 4;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-top: 0.5rem;
        max-height: 70vh;
        overflow-y: auto;
        padding-bottom: 0.5rem;
    }
    .nav-links.open { display: flex; }
    .nav-section-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--gray-400);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0.6rem 0.3rem 0.2rem;
    }
    .nav-link {
        padding: 0.75rem 0.6rem;
        border-radius: 0.5rem;
        font-size: 1rem;
    }
    .nav-link.active {
        background: rgba(37, 99, 235, 0.1);
        color: var(--primary);
        font-weight: 700;
    }
}

/* メニュー開閉時にstaff情報も表示 */
@media (max-width: 900px) {
    .nav-staff {
        order: 5;
        width: 100%;
        padding-top: 0.5rem;
        border-top: 1px solid var(--gray-100);
        margin-top: 0.5rem;
        justify-content: space-between;
    }
    /* メニュー閉じている時はstaff情報も非表示 */
    .nav-links:not(.open) ~ .nav-staff { display: none; }
}

/* テーブルのモバイル対応 */
@media (max-width: 768px) {
    .table {
        font-size: 0.85rem;
    }
    .table th, .table td {
        padding: 0.5rem 0.4rem;
    }
    /* 横スクロール強制 */
    .cohort-table-wrap, .heatmap-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* モーダルをボトムシート化 */
@media (max-width: 600px) {
    .modal-backdrop .modal {
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 1rem 1rem 0 0;
    }
    .modal-backdrop .modal.modal-wide {
        max-width: 100%;
    }
}

/* ダッシュボードのモバイル調整 */
@media (max-width: 768px) {
    .dashboard-layout { padding: 0.6rem; }
    .dash-header h1 { font-size: 1.2rem; }
    .hub-card { padding: 0.75rem; }
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .kpi-value { font-size: 1.4rem; }
    .kpi-card { padding: 0.75rem; }
    .hub-grid {
        grid-template-columns: 1fr;
    }
    .ops-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .ops-num { font-size: 1.4rem; }
}

/* POSのモバイル */
@media (max-width: 768px) {
    .pos-display, .pos-keypad, .pos-products { padding: 0.8rem; }
    .display-value { font-size: 2.1rem; }
    .display-value.sub { font-size: 1.4rem; }
    .quick-amounts {
        grid-template-columns: repeat(3, 1fr);
    }
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .numpad .btn {
        font-size: 1.1rem;
    }
}

/* 注文管理のカード幅 */
@media (max-width: 768px) {
    .order-card {
        padding: 0.6rem 0.75rem;
    }
    .order-actions {
        flex-wrap: wrap;
    }
    .order-actions .btn {
        flex: 1;
        min-width: 80px;
    }
}

/* KDS のモバイル */
@media (max-width: 768px) {
    .kds-main {
        grid-template-columns: 1fr !important;
    }
    .kds-card { font-size: 0.95rem; }
}

/* 分析ダッシュボードのコントロール */
@media (max-width: 768px) {
    .period-controls, .heatmap-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .period-controls label, .heatmap-controls label {
        width: 100%;
    }
    .period-controls input, .period-controls select,
    .heatmap-controls input, .heatmap-controls select {
        width: 100%;
    }
}

/* ボタンの最小サイズ強化 */
@media (max-width: 768px) {
    .btn, button.btn {
        font-size: 0.95rem;
    }
}

/* ========== 在庫管理ページ ========== */
.page-inventory .inv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.page-inventory .inv-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.page-inventory .kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.page-inventory .kpi-card.warn {
    background: #fffbeb;
    border-color: #fcd34d;
}
.page-inventory .kpi-card.danger {
    background: #fef2f2;
    border-color: #fca5a5;
}
.page-inventory .kpi-label {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 4px;
}
.page-inventory .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
}
.page-inventory .inv-table-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.inv-table {
    width: 100%;
    border-collapse: collapse;
}
.inv-table th, .inv-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
}
.inv-table th {
    background: #f9fafb;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
}
.inv-table td.num, .inv-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.st-ok { color: #16a34a; }
.st-low { color: #d97706; }
.st-out { color: #dc2626; }

.history-body {
    max-height: 60vh;
    overflow-y: auto;
}
.modal-content.wide {
    max-width: 720px;
}

@media (max-width: 768px) {
    .page-inventory .inv-kpis {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .page-inventory .kpi-value { font-size: 1.4rem; }
    .inv-table th, .inv-table td { padding: 8px 6px; font-size: 0.85rem; }
}

/* ========== 予約管理ページ ========== */
.page-reservations .res-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.page-reservations .res-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.page-reservations .res-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.page-reservations .kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.page-reservations .kpi-card.warn {
    background: #fffbeb;
    border-color: #fcd34d;
}
.page-reservations .kpi-label {
    font-size: 0.85rem;
    color: #6b7280;
}
.page-reservations .kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
}
.page-reservations .kpi-value.small { font-size: 1.1rem; }

.page-reservations .res-list-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}
.res-card {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}
.res-card:hover { background: #fafafa; }
.res-card.unconfirmed { background: #fffbeb; }
.res-card.res-cancelled { opacity: 0.5; background: #f3f4f6; }
.res-when {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}
.res-customer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.res-confirmed { font-size: 0.85rem; color: #16a34a; font-weight: 600; }
.res-card.unconfirmed .res-confirmed { color: #d97706; }
.res-card-total strong { font-size: 1.1rem; color: #1f2937; }
.res-card-actions { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 768px) {
    .page-reservations .res-summary {
        grid-template-columns: 1fr 1fr;
    }
    .page-reservations .kpi-value { font-size: 1.4rem; }
    .res-card {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .res-card-actions { flex-direction: row; }
}

/* 顧客モーダルの予約セクション */
.reservation-section {
    margin: 12px 0;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.reservation-section .res-toggle-label {
    font-weight: 600;
    color: #2563eb;
}
.reservation-section .form-row { margin-top: 8px; }

/* ========== 店舗比較ページ ========== */
.page-stores .stores-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.page-stores .stores-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.page-stores .stores-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.page-stores .kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.page-stores .kpi-label { font-size: 0.85rem; color: #6b7280; }
.page-stores .kpi-value { font-size: 1.6rem; font-weight: 700; color: #1f2937; }

.page-stores .stores-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.highlight-card {
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.highlight-card.top { border-left: 4px solid #16a34a; }
.highlight-card.bottom { border-left: 4px solid #d97706; }
.highlight-card h3 { margin: 0 0 8px; font-size: 1rem; }

.page-stores .stores-table-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}
.stores-table {
    width: 100%;
    border-collapse: collapse;
}
.stores-table th, .stores-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #f3f4f6;
}
.stores-table th {
    background: #f9fafb;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
    text-align: left;
}
.stores-table td.num, .stores-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.bar-cell {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 18px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
}
.bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width 0.3s;
}
.bar-cell span {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: #fff;
    padding: 0 6px;
    line-height: 18px;
    mix-blend-mode: difference;
}

.store-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin-right: 8px;
    background: #ecfeff;
    color: #0e7490;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.store-badge.clickable {
    cursor: pointer;
    border: 1px solid #06b6d4;
}
.store-badge.clickable:hover { background: #cffafe; }
.staff-badge.admin { background: #fef2f2; color: #b91c1c; }

@media (max-width: 768px) {
    .page-stores .stores-totals { grid-template-columns: 1fr 1fr; }
    .page-stores .stores-highlight { grid-template-columns: 1fr; }
    .stores-table th, .stores-table td { padding: 6px 4px; font-size: 0.8rem; }
    .bar-cell { width: 60px; }
}

/* ========== RFM/LTV ページ ========== */
.page-rfm .rfm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.page-rfm .rfm-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.page-rfm .rfm-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.page-rfm .rfm-overview .kpi-card {
    background: #fff;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-align: center;
}
.page-rfm .rfm-card {
    background: #fff;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 16px;
}
.rfm-segments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.seg-tile {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.seg-tile:hover { background: #f3f4f6; }
.seg-tile.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.seg-tile .seg-label { font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; }
.seg-tile .seg-count { font-size: 1.4rem; font-weight: 700; }
.seg-tile .seg-pct { font-size: 0.8rem; opacity: 0.7; }

.rfm-table {
    width: 100%;
    border-collapse: collapse;
}
.rfm-table th, .rfm-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
}
.rfm-table th { background: #f9fafb; font-size: 0.85rem; color: #6b7280; }
.rfm-table td.num, .rfm-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rfm-table td.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }

.score-badge {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
}
.score-badge.sc1 { background: #dc2626; }
.score-badge.sc2 { background: #ea580c; }
.score-badge.sc3 { background: #f59e0b; }
.score-badge.sc4 { background: #16a34a; }
.score-badge.sc5 { background: #047857; }

@media (max-width: 768px) {
    .page-rfm .rfm-overview { grid-template-columns: 1fr 1fr; }
    .rfm-table th, .rfm-table td { padding: 6px 4px; font-size: 0.8rem; }
}

/* ========== 定期ジョブページ ========== */
.page-jobs .jobs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.page-jobs .jobs-list-card,
.page-jobs .jobs-logs-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    margin-bottom: 16px;
}
.jobs-table, .logs-table {
    width: 100%;
    border-collapse: collapse;
}
.jobs-table th, .jobs-table td,
.logs-table th, .logs-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
}
.jobs-table th, .logs-table th {
    background: #f9fafb;
    font-size: 0.85rem;
    color: #6b7280;
}
.logs-table td.num, .logs-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.logs-table td.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.logs-filter { margin-bottom: 8px; }

/* AI サマリ Markdown表示 (v0.38) */
.markdown-body {
    background: #fafafa;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    line-height: 1.6;
}
.markdown-body h2, .markdown-body h3, .markdown-body h4 {
    margin-top: 14px; margin-bottom: 6px;
}
.markdown-body ul { padding-left: 20px; margin: 6px 0; }
.markdown-body p { margin: 6px 0; }

/* 監査ログ (v0.39) */
.audit-raw {
    background: #f3f4f6; padding: 8px; border-radius: 6px;
    font-size: 0.8rem; max-height: 280px; overflow: auto;
    white-space: pre-wrap; word-break: break-all;
}
.diff-table .diff-before {
    background: #fef2f2; color: #b91c1c;
    padding: 1px 4px; border-radius: 3px;
}
.diff-table .diff-after {
    background: #ecfdf5; color: #047857;
    padding: 1px 4px; border-radius: 3px;
}

/* エンゲージメント (v0.40) */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 12px 0;
}
.metric-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.metric-label {
    font-size: 0.85rem; color: #6b7280;
}
.metric-value {
    font-size: 1.8rem; font-weight: 700;
    color: #1e40af; margin: 4px 0;
}
.metric-sub {
    font-size: 0.8rem; color: #9ca3af;
}
.cat-row {
    display: grid;
    grid-template-columns: 200px 1fr 160px;
    gap: 10px; align-items: center;
    padding: 6px 0;
}
.cat-bar {
    background: #f3f4f6; border-radius: 999px;
    height: 14px; overflow: hidden;
}
.cat-bar-fill {
    background: linear-gradient(to right, #60a5fa, #2563eb);
    height: 100%;
}
.cat-value {
    font-size: 0.85rem; color: #6b7280; text-align: right;
}