/* ============================================
   style.css — つかしん窓口精算ツール
   Design System implementation (T6.2 / T6.3)
   Sourced from design-system.md (project root).
   Organization: tokens → reset → layout → components.
   ============================================ */


/* ============================================
   1. Design Tokens
   Three-tier architecture per design-system.md §3:
     Tier 1 primitives  (gray, teal, coral, semantic)
     Tier 2 semantic    (background, foreground, primary, ...)
     Tier 3 component   (header-bg, table-row-*, btn-*)
   ============================================ */
:root {
  /* Tier 1: Gray primitives (warm-neutral) */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Tier 1: Brand Teal */
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-200: #99F6E4;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;

  /* Tier 1: Accent Coral */
  --coral-50:  #FFF5F5;
  --coral-100: #FFE4E4;
  --coral-200: #FBBFBF;
  --coral-300: #F69292;
  --coral-400: #EF6461;
  --coral-500: #E5443F;
  --coral-600: #D42B27;
  --coral-700: #B52220;
  --coral-800: #951F1D;
  --coral-900: #7C1F1D;

  /* Tier 1: Semantic primitives */
  --success-light: #DCFCE7;
  --success:       #16A34A;
  --success-dark:  #15803D;
  --warning-light: #FEF9C3;
  --warning:       #EAB308;
  --warning-dark:  #A16207;
  --error-light:   #FEE2E2;
  --error:         #DC2626;
  --error-dark:    #B91C1C;
  --info-light:    #DBEAFE;
  --info:          #2563EB;
  --info-dark:     #1D4ED8;

  /* Tier 2: Semantic tokens */
  --background:              var(--gray-50);
  --foreground:              var(--gray-800);
  --foreground-secondary:    var(--gray-500);
  --foreground-placeholder:  var(--gray-400);
  --primary:                 var(--teal-600);
  --primary-foreground:      #FFFFFF;
  --primary-hover:           var(--teal-700);
  --primary-active:          var(--teal-800);
  --accent:                  var(--coral-500);
  --accent-foreground:       #FFFFFF;
  --accent-hover:            var(--coral-600);
  --accent-active:           var(--coral-700);
  --selected-row:            var(--teal-100);
  --selected-row-foreground: var(--gray-800);
  --surface:                 #FFFFFF;
  --border:                  var(--gray-200);
  --input-border:            var(--gray-500);
  --input-border-focus:      var(--teal-600);
  --ring:                    var(--teal-500);
  --disabled:                var(--gray-400);
  --disabled-bg:             var(--gray-100);

  /* Tier 3: Component tokens */
  --header-bg:               var(--primary);
  --header-fg:               var(--primary-foreground);
  --table-row-odd:           var(--background);
  --table-row-even:          var(--gray-100);
  --table-row-selected:      var(--selected-row);
  --table-row-selected-fg:   var(--selected-row-foreground);
  --btn-attended:            var(--success);
  --btn-received:            var(--info);

  /* Typography */
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-display:        24px;
  --text-h1:             20px;
  --text-h2:             18px;
  --text-body:           16px;
  --text-table:          15px;
  --text-table-header:   14px;
  --text-small:          14px;
  --text-caption:        12px;
  --text-amount:         18px;
  --text-total:          24px;
  --text-receipt-amount: 30px;

  /* Spacing (4px grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Layout */
  --layout-padding-x:  24px;
  --layout-padding-y:  16px;
  --header-height:     56px;
  --footer-height:     80px;
  --table-row-height:  48px;
  --input-height:      44px;
  --min-touch-target:  44px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 8px rgba(0, 0, 0, 0.10);

  /* Borders */
  --border-width:        1px;
  --border-focus-width:  2px;
  --border-focus-offset: 2px;

  /* Motion */
  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-normal:  200ms;
  --dur-slow:    300ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* Z-index scale */
  --z-sticky:   1;
  --z-popover:  10;
  --z-banner:   50;
  --z-dialog:   100;
}

/* Reduced motion: instant transitions everywhere */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-normal:  0ms;
    --dur-slow:    0ms;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration:  0ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================
   2. Reset & Base
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================
   3. Screen switching
   ============================================ */
.screen {
  display: none;
  min-height: 100vh;
  flex-direction: column;
}

.screen--active {
  display: flex;
  animation: screen-fade-in var(--dur-slow) var(--ease-out);
}

@keyframes screen-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================
   4. Screen 1 layout
   ============================================ */
.header-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--header-height);
  padding: 0 var(--layout-padding-x);
  background-color: var(--header-bg);
  color: var(--header-fg);
  flex-shrink: 0;
}

.header-bar__title {
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.header-bar__date {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.header-bar__date-input {
  font: var(--text-body);
  color: var(--foreground);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
  height: var(--min-touch-target);
  cursor: pointer;
}

.header-bar__date-input--past {
  border-color: var(--warning);
  background-color: rgba(245, 158, 11, 0.1);
}

.btn--today {
  font-size: var(--text-small);
  white-space: nowrap;
}

.header-bar__stats {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-left: auto;
}

.header-bar__label {
  font-size: var(--text-small);
  opacity: 0.9;
}

.header-bar__total {
  font-size: var(--text-total);
  font-weight: 700;
  font-feature-settings: "tnum";
}

.header-bar__actions {
  display: flex;
  gap: var(--sp-2);
}

.warning-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--layout-padding-x);
  background-color: var(--warning-light);
  border-left: 4px solid var(--warning);
  color: var(--warning-dark);
  font-size: var(--text-small);
  position: relative;
  z-index: var(--z-banner);
  animation: warning-appear var(--dur-normal) var(--ease-out);
}

@keyframes warning-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

.warning-banner__icon {
  font-size: var(--text-h2);
  line-height: 1;
}

.table-container {
  flex: 1;
  overflow: auto;
  padding: 0 var(--layout-padding-x);
}

.footer-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--layout-padding-x);
  background-color: var(--surface);
  border-top: 2px solid var(--border);
  flex-shrink: 0;
}

.footer-bar__search {
  position: relative;
}

.footer-bar__actions {
  display: flex;
  gap: var(--sp-2);
}


/* ============================================
   5. Screen 2 layout
   ============================================ */
.back-bar {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--layout-padding-x);
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.detail-section {
  padding: var(--sp-4) var(--layout-padding-x);
}

.detail-section + .detail-section {
  border-top: 1px solid var(--border);
}

.section-title {
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: -0.005em;
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--primary);
  margin-bottom: var(--sp-4);
}

/* Compact variant used inside dialogs */
.section-title--compact {
  font-size: var(--text-h2);
  margin-bottom: var(--sp-3);
}

.date-range {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.date-range label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--foreground-secondary);
  letter-spacing: 0.02em;
}

.member-info-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.member-info-block__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.member-info-block__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--foreground-secondary);
  letter-spacing: 0.02em;
}

.member-info-block__value {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--foreground);
}

.detail-section__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--foreground-secondary);
  margin-bottom: var(--sp-1);
}

.settlement-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-3);
}

.settlement-footer__total {
  font-size: var(--text-amount);
  font-feature-settings: "tnum";
}

.settlement-footer__total strong {
  font-size: var(--text-total);
  font-weight: 700;
  margin-left: var(--sp-1);
}

.settlement-footer__total small {
  font-size: var(--text-caption);
  color: var(--foreground-secondary);
  margin-left: var(--sp-1);
}

.product-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
}

.product-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.product-form__label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--foreground-secondary);
  letter-spacing: 0.02em;
}

.receipt-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.receipt-section__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1;
  min-width: 200px;
}

.receipt-section__label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--foreground-secondary);
  letter-spacing: 0.02em;
}


/* ============================================
   6. Button
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--min-touch-target);
  height: var(--input-height);
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1;
  color: var(--foreground);
  background-color: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-instant) var(--ease-out),
    border-color     var(--dur-instant) var(--ease-out),
    color            var(--dur-instant) var(--ease-out),
    transform        var(--dur-instant) var(--ease-out);
}

.btn:focus-visible {
  outline: var(--border-focus-width) solid var(--ring);
  outline-offset: var(--border-focus-offset);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--disabled-bg);
  color: var(--disabled);
  border-color: var(--border);
  cursor: not-allowed;
  pointer-events: none;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Primary */
.btn--primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

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

.btn--primary:active:not(:disabled) {
  background-color: var(--primary-active);
  border-color: var(--primary-active);
}

/* Accent */
.btn--accent {
  background-color: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--accent);
}

.btn--accent:hover:not(:disabled) {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--accent:active:not(:disabled) {
  background-color: var(--accent-active);
  border-color: var(--accent-active);
}

/* Outline */
.btn--outline {
  background-color: var(--surface);
  color: var(--foreground);
  border-color: var(--border);
}

.btn--outline:hover:not(:disabled) {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
}

.btn--outline:active:not(:disabled) {
  background-color: var(--gray-200);
}

/* Danger override (typically paired with --outline) */
.btn--danger {
  color: var(--error);
  border-color: var(--error);
}

.btn--danger:hover:not(:disabled) {
  background-color: var(--error-light);
  border-color: var(--error);
}

/* Header button (translucent on teal) */
.btn--header {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--header-fg);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn--header:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn--header:active:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.35);
}

/* Icon square button */
.btn--icon {
  width: var(--input-height);
  min-width: var(--input-height);
  padding: 0;
  font-size: var(--text-h2);
}

/* Small button (inline-table use) */
.btn--sm {
  height: 36px;
  min-width: 36px;
  padding: 0 var(--sp-3);
  font-size: var(--text-small);
}

.btn--sm.btn--icon {
  width: 36px;
  min-width: 36px;
  font-size: var(--text-h2);
}


/* ============================================
   7. Text Input / Select / Date / Textarea
   ============================================ */
.input {
  display: inline-flex;
  align-items: center;
  height: var(--input-height);
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--foreground);
  background-color: var(--surface);
  border: 2px solid var(--input-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-instant) var(--ease-out);
}

.input:hover:not(:disabled):not([readonly]) {
  border-color: var(--gray-600);
}

.input:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
  outline: none;
}

.input::placeholder {
  color: var(--foreground-placeholder);
}

.input:disabled {
  background-color: var(--disabled-bg);
  border-color: var(--border);
  color: var(--disabled);
  cursor: not-allowed;
}

.input[readonly] {
  background-color: var(--disabled-bg);
  border-color: var(--border);
  color: var(--foreground-secondary);
}

.input--textarea {
  height: auto;
  min-height: 60px;
  padding: var(--sp-3);
  resize: vertical;
  width: 100%;
  line-height: 1.5;
}

.input--search {
  width: 100%;
}

/* Inline variants (smaller) */
.input--inline-table {
  height: 32px;
  width: 100%;
  padding: 0 var(--sp-2);
  font-size: var(--text-small);
  border-width: 1px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

.input--inline-qty {
  width: 64px;
  height: 32px;
  padding: 0 var(--sp-2);
  font-size: var(--text-small);
  font-feature-settings: "tnum";
  text-align: right;
  border-width: 1px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

.input--inline-qty:focus,
.input--inline-table:focus {
  border-color: var(--input-border-focus);
  border-width: 2px;
  padding: 0 calc(var(--sp-2) - 1px);
}

/* Inline select (class/timeslot dropdowns in table cells) */
.inline-select {
  height: 36px;
  padding: 0 var(--sp-2);
  font-family: inherit;
  font-size: var(--text-table);
  color: var(--foreground);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-instant) var(--ease-out);
}

.inline-select:hover {
  border-color: var(--gray-400);
}

.inline-select:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
  outline: none;
}

/* Gray display when no override (showing member master default) */
.inline-select--default {
  color: var(--foreground-placeholder);
}

/* Zero amount display (gray) */
.amount--zero {
  color: var(--foreground-placeholder);
}


/* ============================================
   8. Data Table
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-table);
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.data-table th {
  background-color: var(--surface);
  color: var(--foreground-secondary);
  font-size: var(--text-table-header);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid var(--border);
}

.data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  min-height: var(--table-row-height);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background-color var(--dur-instant) var(--ease-out);
}

.data-table tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd);
}

.data-table tbody tr:nth-child(even) {
  background-color: var(--table-row-even);
}

.data-table tbody tr:hover:not(.row--selected) {
  background-color: var(--gray-200);
}

.data-table tbody tr.row--selected {
  background-color: var(--table-row-selected);
  color: var(--table-row-selected-fg);
}

/* Screen 1 column widths */
.col-id        { width: 80px;  }
.col-name      { width: 120px; }
.col-class     { width: 100px; }
.col-timeslot  { width: 80px;  }
.col-amount    { width: 100px; text-align: right; font-feature-settings: "tnum"; }
.col-breakdown { width: 180px; }
.col-add       { width: 48px;  text-align: center; }
.col-memo      { width: 140px; }
.col-attendance{ width: 56px;  text-align: center; }
.col-received  { width: 120px; text-align: center; }

.breakdown-line {
  font-size: var(--text-small);
  color: var(--foreground-secondary);
  line-height: 1.5;
}

/* Table cell utility alignments (used by Screen 2 settlement / product tables) */
.td-right {
  text-align: right;
  font-feature-settings: "tnum";
}

.td-center {
  text-align: center;
}

/* Empty table row (placeholder message) */
.empty-row td {
  text-align: center;
  color: var(--foreground-secondary);
  padding: var(--sp-4);
}


/* ============================================
   9. Toggle Button (attendance / received)
   Circle with triple-encoding: color + icon + text
   ============================================ */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  padding: 0;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1;
  color: var(--foreground-secondary);
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background-color var(--dur-instant) var(--ease-out),
    border-color     var(--dur-instant) var(--ease-out),
    color            var(--dur-instant) var(--ease-out);
}

.toggle-btn:hover:not(:disabled) {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
}

.toggle-btn:focus-visible {
  outline: var(--border-focus-width) solid var(--ring);
  outline-offset: var(--border-focus-offset);
}

/* Attendance ON: green */
.toggle-btn.toggle-attendance.toggle-btn--on {
  background-color: var(--btn-attended);
  border-color: var(--btn-attended);
  color: #FFFFFF;
}

.toggle-btn.toggle-attendance.toggle-btn--on:hover {
  background-color: var(--success-dark);
  border-color: var(--success-dark);
}

/* Received ON: blue */
.toggle-btn.toggle-received.toggle-btn--on {
  background-color: var(--btn-received);
  border-color: var(--btn-received);
  color: #FFFFFF;
}

.toggle-btn.toggle-received.toggle-btn--on:hover {
  background-color: var(--info-dark);
  border-color: var(--info-dark);
}

.toggle-btn:disabled {
  background-color: var(--disabled-bg);
  border-color: var(--border);
  color: var(--disabled);
  cursor: not-allowed;
}


/* ============================================
   10. Payment Method Selector (inline in received col)
   ============================================ */
.received-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.payment-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.payment-selector[hidden] {
  display: none;
}

.payment-method-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--sp-2);
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--foreground);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-instant) var(--ease-out),
    border-color     var(--dur-instant) var(--ease-out),
    color            var(--dur-instant) var(--ease-out);
}

.payment-method-btn:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
}

.payment-method-btn:focus-visible {
  outline: var(--border-focus-width) solid var(--ring);
  outline-offset: 1px;
}

.payment-method-btn.is-selected {
  background-color: var(--info-light);
  color: var(--info-dark);
  border-color: var(--info);
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--info-dark);
  background-color: var(--info-light);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}


/* ============================================
   11. Autocomplete Dropdown (search)
   ============================================ */
.autocomplete-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: var(--sp-1);
  max-height: 400px;
  overflow-y: auto;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-popover);
  animation: popover-enter var(--dur-normal) var(--ease-out);
}

.autocomplete-dropdown[hidden] {
  display: none;
}

@keyframes popover-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--table-row-height);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: background-color var(--dur-instant) var(--ease-out);
}

.autocomplete-item + .autocomplete-item {
  border-top: 1px solid var(--border);
}

.autocomplete-item:hover {
  background-color: var(--gray-100);
}

.autocomplete-item--focused {
  background-color: var(--teal-50);
}

.autocomplete-item__id {
  font-weight: 500;
  font-feature-settings: "tnum";
  min-width: 80px;
}

.autocomplete-item__name {
  flex: 1;
}

.autocomplete-item__phone {
  font-size: var(--text-small);
  color: var(--foreground-secondary);
  font-feature-settings: "tnum";
}

.autocomplete-item--walkin {
  font-style: italic;
  color: var(--foreground-secondary);
  border-top: 2px solid var(--border);
}

.autocomplete-item--walkin:hover,
.autocomplete-item--walkin.autocomplete-item--focused {
  background-color: var(--coral-50);
  color: var(--accent-active);
}


/* ============================================
   12. Inline Product Code Popover ([+] button)
   ============================================ */
.item-popover {
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  min-width: 260px;
  padding: var(--sp-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
  animation: popover-enter var(--dur-normal) var(--ease-out);
}

/* Screen 2 variant: same downward anchor with slightly larger gap */
.item-popover--detail {
  top: calc(100% + var(--sp-2));
}

.item-popover__input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.item-popover__input-row .input {
  width: 120px;
  height: 32px;
  padding: 0 var(--sp-2);
  font-size: var(--text-small);
}

.item-popover__result {
  flex: 1;
  font-size: var(--text-small);
  color: var(--foreground-secondary);
  transition: color var(--dur-instant) var(--ease-out);
}

.item-popover__result--found {
  color: var(--foreground);
  font-weight: 500;
}

.item-popover__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.item-popover__actions[hidden] {
  display: none;
}

.item-popover__actions .btn {
  height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--text-small);
  min-width: auto;
}

.item-popover__error {
  margin-top: var(--sp-1);
  font-size: var(--text-caption);
  color: var(--error);
}

.item-popover__error[hidden] {
  display: none;
}


/* ============================================
   13. Product Master — inline controls
   ============================================ */
.product-master-field {
  width: 100%;
}

.product-master-field--price {
  max-width: 100px;
  text-align: right;
  font-feature-settings: "tnum";
}

.product-status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  font-size: var(--text-caption);
  font-weight: 500;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

.product-status--active {
  background-color: var(--success-light);
  color: var(--success-dark);
}

.product-status--provisional {
  background-color: var(--warning-light);
  color: var(--warning-dark);
}

.product-status--inactive {
  background-color: var(--gray-100);
  color: var(--gray-500);
}

/* Inactive product row (dimmed) */
.product-row--inactive {
  opacity: 0.55;
}

/* Inline toggle button (product master enable/disable) — text-style */
.btn--inline-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-3);
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--foreground);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-instant) var(--ease-out),
    border-color     var(--dur-instant) var(--ease-out),
    color            var(--dur-instant) var(--ease-out);
}

.btn--inline-toggle:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
}

.btn--inline-toggle:focus-visible {
  outline: var(--border-focus-width) solid var(--ring);
  outline-offset: 1px;
}

/* Inline delete button (× icon for settlement line items) — icon-only borderless */
.btn--inline-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: var(--sp-2);
  padding: 0;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1;
  color: var(--error);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-instant) var(--ease-out),
    color            var(--dur-instant) var(--ease-out);
}

.btn--inline-delete:hover {
  background-color: var(--error-light);
  color: var(--error-dark);
}

.btn--inline-delete:focus-visible {
  outline: var(--border-focus-width) solid var(--ring);
  outline-offset: 1px;
}


/* ============================================
   14. Toast Notification
   ============================================ */
.toast-container {
  position: fixed;
  top: var(--layout-padding-x);
  right: var(--layout-padding-x);
  z-index: var(--z-dialog);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  min-width: 240px;
  max-width: 400px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-small);
  color: var(--foreground);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-in);
  animation: toast-enter var(--dur-normal) var(--ease-out);
}

.toast--leaving {
  opacity: 0;
}

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


/* ============================================
   15. Dialog (confirmation / data-mgmt / csv-export)
   ============================================ */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-dialog);
  animation: overlay-fade-in var(--dur-slow) var(--ease-out);
}

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

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialog {
  background-color: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow-md);
  animation: dialog-enter var(--dur-slow) var(--ease-out);
}

@keyframes dialog-enter {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.dialog__title {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  color: var(--foreground);
}


/* ============================================
   16. Data Management Dialog
   ============================================ */
.data-mgmt__description {
  font-size: var(--text-small);
  color: var(--foreground-secondary);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}

.data-mgmt__actions {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.data-mgmt__actions .btn {
  flex: 1;
}

/* API設定セクション（T6.12） */
.api-settings__title {
  margin-top: var(--sp-3);
  font-size: var(--text-h2);
}

.api-settings {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.api-settings__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.api-settings__label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--foreground-secondary);
  letter-spacing: 0.02em;
}

.api-settings__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-1);
}


/* ============================================
   20. Period history screen (T7.1)
   ============================================ */
.history-range {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--text-body);
}

.history-range__label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--foreground-secondary);
  letter-spacing: 0.02em;
}

.history-range__value {
  font-weight: 700;
  font-feature-settings: "tnum";
  color: var(--foreground);
}



/* ============================================
   21. Product master entry button (T7.2)
   ============================================ */
.product-master-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.product-master-link__note {
  font-size: var(--text-small);
  color: var(--foreground-secondary);
}


/* ============================================
   22. Receipt last-issued line (T7.3)
   ============================================ */
.receipt-last-issued {
  margin-top: var(--sp-3);
  font-size: var(--text-small);
  color: var(--foreground-secondary);
  font-feature-settings: "tnum";
}

.receipt-last-issued--has-history {
  color: var(--foreground);
}


/* ============================================
   17. CSV Export Dialog
   ============================================ */
.csv-export__fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}

.csv-export__legend {
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--foreground-secondary);
  letter-spacing: 0.02em;
  padding: 0 var(--sp-1);
}

.csv-export__fieldset label {
  display: block;
  padding: var(--sp-1) 0;
  font-size: var(--text-table);
  cursor: pointer;
}

.csv-export__fieldset input[type="radio"] {
  margin-right: var(--sp-2);
  accent-color: var(--primary);
}

.csv-export__custom {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-left: var(--sp-6);
}

.csv-export__custom[hidden] {
  display: none;
}

.csv-export__custom .input {
  height: 36px;
  font-size: var(--text-small);
}

.csv-export__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}


/* ============================================
   18. CSV intake explanation dialog (T6.8)
   ============================================ */
.sync-intro__lead {
  font-size: var(--text-body);
  color: var(--foreground);
  margin-bottom: var(--sp-2);
  line-height: 1.6;
}

.sync-intro__list {
  list-style: disc;
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.sync-intro__list li {
  font-size: var(--text-body);
  color: var(--foreground);
  line-height: 1.8;
}

.sync-intro__note {
  font-size: var(--text-small);
  color: var(--foreground-secondary);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}

.sync-intro__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}


/* ============================================
   19. Confirm dialog (T6.10)
   ============================================ */
.confirm-dialog__message {
  font-size: var(--text-body);
  color: var(--foreground);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
  white-space: pre-line;
}

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ==========================================================================
 * Section 20: Phase 14 — 予約CSV取り込み結果ダイアログ
 * ========================================================================== */

.sync-result__body {
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: var(--sp-4);
}

.sync-result__counts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}

.sync-result__count-line {
  display: flex;
  justify-content: space-between;
  font: var(--text-body);
  color: var(--foreground);
}

.sync-result__count-label {
  color: var(--foreground-secondary);
}

.sync-result__count-value {
  font-variant-numeric: tabular-nums;
}

.sync-result__section {
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.sync-result__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sync-result__section-title {
  font: var(--text-h2);
  color: var(--foreground);
  margin: 0 0 var(--sp-2) 0;
}

.sync-result__section-note {
  font: var(--text-small);
  color: var(--foreground-secondary);
  margin: 0 0 var(--sp-2) 0;
}

.sync-result__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.sync-result__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
}

.sync-result__item-name {
  font: var(--text-body);
  color: var(--foreground);
  flex: 0 0 auto;
}

.sync-result__item-id {
  font: var(--text-caption);
  color: var(--foreground-secondary);
  font-variant-numeric: tabular-nums;
}

.sync-result__item-reason {
  font: var(--text-small);
  color: var(--warning);
  margin-left: auto;
}

.sync-result__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* 売上明細CSV取り込みサマリで使う追加スタイル（Phase 18 T18.7）。
 * 同名衝突で全体中止になったときの警告バナーを目立たせる。 */
.sync-result__abort-banner {
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--surface-warning, #fef3c7);
  border: 1px solid var(--warning, #f59e0b);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: var(--text-body);
  line-height: var(--lh-normal);
}

.sync-result__abort-banner strong {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--warning);
}

.sync-result__item-code {
  font: var(--text-mono-small, var(--text-small));
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ==========================================================================
 * Section 21: Phase 15 — ストレージ使用量表示
 * ========================================================================== */

.storage-usage {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}

.storage-usage__text {
  font: var(--text-body);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.storage-usage__status {
  font: var(--text-caption);
  color: var(--foreground-secondary);
}

.storage-usage__status--ok {
  color: var(--success);
}