:root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background:#f7f7fb; }
/* Main container centered with a comfortable max width */
.wrap { max-width: 1000px; margin: 32px auto; padding: 16px; }
/* Cards stay centered and never expand edge-to-edge */
.card { background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.08); padding: 24px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0 0 16px; }
label { display:block; font-size: 14px; margin: 12px 0 6px; }
input, textarea { width: 100%; padding: 10px 12px; border:1px solid #ddd; border-radius: 10px; font-size: 14px; }
textarea { min-height: 96px; resize: vertical; }
.row { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:16px; }
/* right-aligned button group for actions */
.actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:16px; }
#rememberRow { flex-wrap: nowrap; }
#rememberRow label { white-space: nowrap; }
/* removed password eye icon styles */
button { cursor:pointer; border:0; border-radius: 999px; padding: 10px 16px; font-weight: 600; }
.btn { background:#2563eb; color:#fff; }
.btn.secondary { background:#eee; color:#333; }
.btn.danger { background:#111; color:#fff; }
.hint { font-size:12px; color:#666; margin-top:8px; }
.error { color:#b91c1c; font-size: 13px; margin-top: 8px; }
.ok { color:#065f46; font-size: 13px; margin-top: 8px; }
.hidden { display:none; }
.header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.muted { color:#666; font-size: 14px; }

/* Admin/User menu grid (left-top aligned, fixed tile width) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
  gap: 24px;
  justify-content: start; /* leftover space stays on the right */
  align-content: start;
}
.tile { display:flex; align-items:center; justify-content:center; flex-direction:column; 
  background:#fff; border-radius:16px; box-shadow: 0 2px 6px rgba(0,0,0,.08);
  text-decoration:none; color:#111; padding:16px; aspect-ratio:1 / 1;
  width: 200px; /* keep tiles consistent and centered */
  transition: box-shadow .2s ease, transform .12s ease; }
.tile:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); transform: translateY(-1px); }
.tile:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.tile .icon { font-size: 40px; line-height:1; }
.tile .label { margin-top: 10px; font-weight: 600; font-size: 14px; text-align:center; }
/* Vertical flow container to avoid unintended horizontal flex layouts */
.flow { display:flex; flex-direction: column; gap: 12px; }

.tab-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:8px;
}
.tab-links a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  background:#f5f5f7;
  color:#333;
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.tab-links a:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

/* Top actions (menu back, logout) */
.top-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap: wrap; }
.header h1 { margin-right: auto; }
.card.flow { display:grid; grid-auto-flow: row; gap:16px; align-content:start; }
.card.flow > * { width:100%; }
.card.flow .card { width:100%; display:block; }
/* Rejected request appearance (light gray background) */
.card.req-rejected { background: #f3f4f6; }
.card.req-approved { background: #eff6ff; }
/* Request cards layout */
.req-entry { display:flex; flex-direction:column; gap:12px; }
.req-lines { display:flex; flex-direction:column; gap:6px; }
.req-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.req-second { gap:16px; }
.req-second .req-title { flex:1 1 auto; min-width:200px; }
.req-amount-line { justify-content:flex-start; }
.req-amount-line .req-amount { font-weight:700; text-align:left; }
.req-entry .seg-actions { align-self:flex-end; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-user { font-weight: 600; color:#111; }
.req-title { font-weight: 700; color:#111; }
.req-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight:700; min-width: 120px; }
.status-badge { padding: 4px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.status-approved { background:#dbeafe; color:#1e3a8a; }
.status-rejected { background:#e5e7eb; color:#374151; }
.status-pending { background:#e5e7eb; color:#374151; }

/* Segmented actions (承認/却下/削除) */
.seg-actions { display:flex; gap:8px; justify-content:flex-end; }
.seg-btn {
  display:flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px; border:1px solid #d0d7de;
  background:#fff; color:#333; font-weight:600; cursor:pointer; min-width:68px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.seg-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.seg-btn.approve:hover { background:#2563eb; color:#fff; border-color:#2563eb; box-shadow: 0 4px 12px rgba(37,99,235,.25); }
.seg-btn.reject:hover { background:#e5e7eb; color:#111; border-color:#d1d5db; }
.seg-btn.danger:hover { background:#fecaca; color:#7f1d1d; border-color:#fca5a5; box-shadow: 0 4px 12px rgba(239,68,68,.25); }
.seg-btn.active { background:#2563eb; color:#fff; border-color:#2563eb; box-shadow: 0 4px 12px rgba(37,99,235,.25); }
.seg-btn.danger { background:#fff; color:#333; border-color:#d0d7de; }

/* Align last cell (actions) to the right */
.nav-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:#f5f5f7; color:#333; border:0; border-radius:999px;
  padding:8px 12px; font-weight:600; text-decoration:none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.nav-btn:hover { box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.nav-btn .icon { font-size:16px; line-height:1; }

/* Segmented control for role selection */
.seg { display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; margin: 8px 0 4px; }
.seg input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
.seg-option {
  display:flex; align-items:center; justify-content:center;
  padding:12px; border-radius:12px; border:1px solid #d0d7de;
  background:#fff; color:#333; cursor:pointer; font-weight:600;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.seg input[type="radio"]:checked + .seg-option {
  background:#2563eb; color:#fff; border-color:#2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}

/* Account dropdown (top-right) */
.account-menu { position: relative; }
.menu { position: absolute; top: 100%; right: 0; margin-top: 8px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding:8px; min-width: 160px; z-index: 10; }
.menu.hidden { display:none; }
.menu-item { display:block; width:100%; background:transparent; border:0; text-align:left; padding:10px 12px; border-radius:8px; cursor:pointer; font-weight:600; }
.menu-item:hover { background:#f5f5f7; }

/* Role badge for user list */
.role { width:14px; height:14px; border-radius:4px; background:#eef2f7; border:1px solid #d0d7de; display:inline-block; }
.role.admin { background:#2563eb; border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15) inset; }