/* ─── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg: #f5f6fa;
  --color-surface: #ffffff;
  --color-border: #e2e6ea;
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --radius: 10px;
  --shadow: 0 1px 4px rgba(0,0,0,.08);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  padding-bottom: 2rem;
}

/* ─── Layout ───────────────────────────────────────────────────────────────── */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem;
}

header {
  background: var(--color-primary);
  color: #fff;
  padding: .9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
header h1 { font-size: 1.1rem; font-weight: 700; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}
.card-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* ─── Status card ──────────────────────────────────────────────────────────── */
.status-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
}
.status-badge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge.active {
  background: #d1fae5;
  color: var(--color-success);
}
.status-badge.inactive {
  background: #f1f5f9;
  color: var(--color-muted);
}
#status-detail {
  font-size: .9rem;
  color: var(--color-muted);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
#status-detail strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.elapsed-wrap { font-weight: 500; }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.btn-group {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
}
.btn {
  flex: 1;
  padding: .85rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, opacity .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-checkin { background: var(--color-primary); color: #fff; }
.btn-checkin:not(:disabled):hover { background: var(--color-primary-hover); }
.btn-checkout { background: var(--color-warning); color: #fff; }
.btn-checkout:not(:disabled):hover { background: #d97706; }

/* ─── Summary ──────────────────────────────────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .75rem;
}
.summary-item {
  background: var(--color-bg);
  border-radius: 8px;
  padding: .75rem 1rem;
  text-align: center;
}
.summary-item .label {
  font-size: .72rem;
  color: var(--color-muted);
  margin-bottom: .25rem;
}
.summary-item .value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.summary-item .sub {
  font-size: .75rem;
  color: var(--color-muted);
  margin-top: .1rem;
}

/* ─── Month selector ───────────────────────────────────────────────────────── */
.month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.month-row select {
  padding: .4rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: .9rem;
  background: #fff;
  cursor: pointer;
}
.btn-csv {
  padding: .45rem 1rem;
  background: var(--color-success);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-csv:hover { background: #059669; }

/* ─── Log table ────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td {
  padding: .65rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
th {
  background: var(--color-bg);
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
tr.in-progress td { background: #fffbeb; }
tr.editing td { background: #f0f9ff; vertical-align: middle; }
tr:hover:not(.editing) td { background: #f8fafc; }
.duration { font-variant-numeric: tabular-nums; font-weight: 600; }
.memo-cell { color: var(--color-muted); font-size: .85rem; max-width: 200px; word-break: break-all; }
.empty-row { text-align: center; color: var(--color-muted); padding: 2rem; }

/* ─── Edit inputs ──────────────────────────────────────────────────────────── */
td input[type="date"],
td input[type="time"],
td input[type="text"] {
  width: 100%;
  padding: .3rem .5rem;
  border: 1px solid var(--color-primary);
  border-radius: 5px;
  font-size: .85rem;
  outline: none;
}
td input:focus { box-shadow: 0 0 0 2px rgba(79,70,229,.25); }

/* ─── Small action buttons ─────────────────────────────────────────────────── */
.actions { white-space: nowrap; }
.btn-sm {
  padding: .25rem .6rem;
  border: none;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
  margin-right: .3rem;
}
.btn-edit   { background: #e0e7ff; color: var(--color-primary); }
.btn-edit:hover   { background: #c7d2fe; }
.btn-delete { background: #fee2e2; color: var(--color-danger); }
.btn-delete:hover { background: #fecaca; }
.btn-save   { background: #d1fae5; color: #065f46; }
.btn-save:hover   { background: #a7f3d0; }
.btn-cancel { background: #f1f5f9; color: var(--color-muted); }
.btn-cancel:hover { background: #e2e8f0; }

/* ─── Add log form ─────────────────────────────────────────────────────────── */
.add-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  align-items: end;
}
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .78rem; font-weight: 600; color: var(--color-muted); }
.form-group input {
  padding: .5rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: .9rem;
  transition: border-color .15s;
}
.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(79,70,229,.2);
}
.btn-add {
  padding: .5rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  align-self: end;
  height: 38px;
  transition: background .15s;
}
.btn-add:hover { background: var(--color-primary-hover); }
.form-error {
  color: var(--color-danger);
  font-size: .82rem;
  margin-top: .5rem;
}

/* ─── Company switcher ─────────────────────────────────────────────────────── */
.company-card { padding: 1rem 1.5rem; }
.company-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.company-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.company-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.company-pill:hover { background: #e8eaf6; transform: translateY(-1px); }
.company-pill.selected {
  border-color: var(--co-color, var(--color-primary));
  background: color-mix(in srgb, var(--co-color, var(--color-primary)) 12%, white);
}
.co-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--co-color, var(--color-primary));
  flex-shrink: 0;
}
.co-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-add-pill {
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 2px dashed var(--color-border);
  background: transparent;
  color: var(--color-muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.company-add-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Company edit/add panel */
#company-panel { margin-top: .75rem; }
.co-panel-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  background: var(--color-bg);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
#co-name-input {
  padding: .4rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: .9rem;
  width: 160px;
  transition: border-color .15s;
}
#co-name-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(79,70,229,.2);
}
.co-color-swatches { display: flex; gap: .35rem; flex-wrap: wrap; }
.co-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.co-swatch:hover { transform: scale(1.15); }
.co-swatch.active { border-color: var(--color-text); transform: scale(1.15); }
.co-panel-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Status session company label */
.session-co {
  font-weight: 700;
  font-size: .85rem;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  header { padding: .75rem 1rem; }
  .card { padding: 1rem; }
  .btn { font-size: .95rem; padding: .75rem 1rem; }

  /* Stack table as cards */
  table, thead, tbody, th, td, tr { display: block; }
  thead tr { display: none; }
  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .75rem;
    border-bottom: none;
  }
  td::before {
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    margin-right: .75rem;
  }
  tr { border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: .6rem; }
  tr.in-progress { border-color: var(--color-warning); }
  tr.editing td input { max-width: 140px; }
  .memo-cell { max-width: none; }
  .empty-row::before { display: none; }
  .empty-row { justify-content: center; }
}