:root {
  --bg: #070710;
  --bg-card: #0e0e1a;
  --bg-hover: #14142a;
  --bg-input: #0a0a18;
  --border: #1a1a30;
  --border-light: #252545;
  --text: #f0f0fa;
  --text-sub: #9898b8;
  --text-dim: #6868a0;
  --accent: #4a90ff;
  --accent-hover: #5da0ff;
  --st-order: #e0a030;
  --st-pattern: #c88020;
  --st-material: #e04858;
  --st-cutting: #4a90ff;
  --st-sewing: #40b878;
  --st-naishoku: #b860a8;
  --st-finish: #4888c8;
  --st-shipped: #6b7890;
  --danger: #e04858;
  --warning: #e0a030;
  --success: #40b878;
  --sidebar-w: 220px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
}
.mono { font-family: 'IBM Plex Mono', monospace; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a50; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a60; }

.app { display: flex; height: 100vh; }
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: #09091a; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 16px 0; z-index: 100;
}
.sidebar-logo { padding: 0 20px; margin-bottom: 28px; display: flex; align-items: center; }
.sidebar-logo svg { height: 22px; width: auto; }
.sidebar-nav { flex:1; display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text-sub); cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all .15s; user-select: none;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-item .nav-icon { width: 18px; height: 18px; opacity: .7; flex-shrink: 0; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-badge {
  margin-left: auto; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 10px; min-width: 20px; text-align: center;
}

.main { flex:1; display: flex; flex-direction: column; overflow: hidden; }
.page { display: none; flex:1; overflow-y: auto; padding: 24px 28px; }
.page.active { display: flex; flex-direction: column; }

/* Counters */
.counters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.counter-card {
  flex: 1; min-width: 140px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .15s, border-color .15s;
}
.counter-card:hover { transform: translateY(-2px); border-color: var(--text-dim); }
.counter-card .label { font-size: 12px; color: var(--text-sub); font-weight: 500; }
.counter-card .value { font-size: 28px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.counter-card.danger .value { color: var(--danger); }
.counter-card.info .value { color: var(--accent); }
.counter-card.success .value { color: var(--success); }
.counter-card.warning .value { color: var(--warning); }

/* Status bar */
.status-bar-container { margin-bottom: 20px; }
.status-bar-container .sbc-label { font-size: 12px; color: var(--text-sub); margin-bottom: 6px; }
.status-bar {
  display: flex; height: 28px; border-radius: 6px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); cursor: pointer;
}
.status-bar .seg {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; transition: opacity .15s;
  min-width: 2px; position: relative;
}
.status-bar .seg:hover { opacity: .8; }
.status-bar .seg .seg-tip {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  background: #222; color: #fff; padding: 4px 8px; border-radius: 4px;
  font-size: 11px; white-space: nowrap; display: none; z-index: 10;
  pointer-events: none;
}
.status-bar .seg:hover .seg-tip { display: block; }

.section-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.section-title .dot { width: 8px; height: 8px; border-radius: 50%; }

/* Alert section */
.alert-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 20px; overflow: hidden;
}
.alert-section-inner { overflow-y: auto; padding: 16px; }
.alert-resize-handle {
  height: 8px; cursor: ns-resize; background: var(--border);
  display: flex; align-items: center; justify-content: center;
}
.alert-resize-handle::after {
  content: ''; width: 30px; height: 2px; background: var(--text-dim); border-radius: 1px;
}
.alert-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 6px; margin-bottom: 4px;
  border-left: 3px solid var(--danger); background: rgba(224,72,88,.05);
  font-size: 12px; cursor: pointer;
}
.alert-item:hover { background: rgba(224,72,88,.1); }
.alert-item .alert-reason {
  background: rgba(224,72,88,.15); color: var(--danger);
  padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.alert-item .alert-text { color: var(--text); flex: 1; }

/* Teams - 2x2 grid layout */
.teams-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-bottom: 20px; }
.team-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; min-height: 160px; overflow-y: auto; max-height: 500px;
}
.team-card-header {
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.team-card-header .team-dot { width: 8px; height: 8px; border-radius: 50%; }
.team-member-list { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.team-member-tag {
  display: inline-block; background: rgba(74,144,255,.1); color: var(--accent);
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; margin: 2px 2px;
}
.team-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.team-item:last-child { border-bottom: none; }
.team-item .ti-name { font-weight: 600; color: var(--text); }
.team-item .ti-client { color: var(--text-sub); }
.team-item .ti-meta { color: var(--text-dim); font-size: 11px; margin-top: 2px; }
.team-item .ti-staff { color: var(--accent); font-size: 11px; }
/* Member section within team card */
.member-section { margin-bottom: 12px; }
.member-section-header {
  display: flex; align-items: center; gap: 6px; padding: 6px 0 4px 0;
  border-bottom: 1px dashed var(--border); margin-bottom: 4px;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.member-section-header .ms-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(74,144,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--accent); flex-shrink:0;
}
.member-section-header .ms-count { font-size: 10px; color: var(--text-dim); font-weight: 400; margin-left: auto; }
.member-task { padding: 4px 0 4px 28px; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,.03); }
.member-task:last-child { border-bottom: none; }
.no-tasks { color: var(--text-dim); font-size: 11px; padding: 4px 0 4px 28px; }
/* Status legend */
.status-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.status-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-sub); }
.status-legend-item .sl-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
/* Performance page */
.perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perf-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; overflow-y: auto; max-height: 600px;
}
.perf-card.team-color-denim { background: #0a0e1e; border-color: rgba(74,144,255,.2); }
.perf-card.team-color-usumono { background: #081410; border-color: rgba(64,184,120,.2); }
.perf-card.team-color-naishoku { background: #120a18; border-color: rgba(184,96,168,.2); }
.perf-card.team-color-seisan { background: #141008; border-color: rgba(224,160,48,.2); }
.perf-member { margin-bottom: 16px; }
.perf-member-header {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.perf-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--accent); flex-shrink: 0;
}
.perf-name { font-size: 14px; font-weight: 600; }
.perf-stats { font-size: 11px; color: var(--text-sub); }
.perf-task-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 2px 0;
  border-radius: 4px; font-size: 12px;
}
.perf-task-row:hover { background: var(--bg-hover); }
.perf-task-done { opacity: .5; }
.perf-task-done .perf-task-name { text-decoration: line-through; }

/* Schedule */
.schedule-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; margin-bottom: 20px;
}
.schedule-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.schedule-day { padding: 6px; border-radius: 4px; min-height: 60px; font-size: 11px; }
.schedule-day.today { background: rgba(74,144,255,.15); border: 1px solid var(--accent); }
.schedule-day .sd-date { font-weight: 600; margin-bottom: 4px; font-family: 'IBM Plex Mono', monospace; }
.schedule-day .sd-item {
  background: rgba(255,255,255,.05); border-radius: 3px;
  padding: 2px 4px; margin-bottom: 2px; font-size: 10px; color: var(--text-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Spreadsheet toolbar */
.ss-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ss-toolbar input[type="text"] {
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); padding: 7px 12px; border-radius: 6px;
  font-size: 12px; outline: none; width: 200px;
  font-family: 'Noto Sans JP', sans-serif;
}
.ss-toolbar input[type="text"]:focus { border-color: var(--accent); }
.ss-toolbar select, .toolbar-select {
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); padding: 7px 10px; border-radius: 6px;
  font-size: 12px; outline: none; font-family: 'Noto Sans JP', sans-serif;
}
.btn {
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 12px;
  cursor: pointer; font-weight: 500; transition: all .15s;
  font-family: 'Noto Sans JP', sans-serif;
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-light); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Spreadsheet */
.spreadsheet-container { flex: 1; overflow: auto; position: relative; }
table.ss { width: max-content; border-collapse: collapse; font-size: 12px; }
table.ss th {
  background: #0c0c1e; color: var(--text-sub);
  font-weight: 600; font-size: 11px;
  padding: 8px 10px 8px 6px; text-align: left;
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  white-space: nowrap; user-select: none; cursor: pointer;
  overflow: hidden;
}
table.ss th:hover { color: var(--text); }
table.ss td {
  padding: 1px 2px; border-bottom: 1px solid var(--border);
  height: 30px; white-space: nowrap;
}
table.ss tr:hover td { background: rgba(74,144,255,.18) !important; }
table.ss tr.urgent td { background: rgba(224,72,88,.18) !important; }
table.ss tbody tr:nth-child(odd) td { background: #060612; }
table.ss tbody tr:nth-child(even) td { background: #161638; }
table.ss tbody tr:nth-child(odd):hover td { background: rgba(74,144,255,.18) !important; }
table.ss tbody tr:nth-child(even):hover td { background: rgba(74,144,255,.22) !important; }
/* 3 column sections */
table.ss td.sec-b { border-left: none; }
table.ss tbody tr:nth-child(odd) td.sec-b { background: #040f0a; }
table.ss tbody tr:nth-child(even) td.sec-b { background: #0e2218; }
table.ss tbody tr:nth-child(odd) td.sec-c { background: #120e04; }
table.ss tbody tr:nth-child(even) td.sec-c { background: #221c0a; }
table.ss thead th.sec-b { background: #0a2a1a; border-bottom-color: #1a5030; }
table.ss thead th.sec-c { background: #221a08; border-bottom-color: #4a3810; }
table.ss td.sec-start, table.ss th.sec-start { border-left: 3px solid rgba(255,255,255,.22) !important; }
/* Empty required field - bright red pulse */
.ss-cell.required-empty { background: rgba(224,72,88,.2) !important; border: 1px solid rgba(224,72,88,.3) !important; border-radius: 2px; }
.ss-cell.required-empty::placeholder { color: var(--danger); opacity: 1; font-weight: 500; }
.ss-select.required-empty { background: rgba(224,72,88,.2) !important; border: 1px solid rgba(224,72,88,.3) !important; border-radius: 2px; }
.ss-cell {
  width: 100%; height: 100%; background: transparent; border: none;
  color: var(--text); font-size: 12px; font-family: 'Noto Sans JP', sans-serif;
  outline: none; padding: 4px 2px;
}
.ss-cell:focus { background: rgba(74,144,255,.1); border-radius: 2px; }
input[type="date"].ss-cell { color: var(--text); cursor: pointer; }
input[type="date"].ss-cell::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
.th-label { cursor: pointer; display: inline; }
table.ss tr.completed-row td { opacity: .5; }
table.ss tr.completed-row:hover td { opacity: .7; }
.date-cell { cursor: pointer; }
.date-cell[value=""],.date-cell:placeholder-shown {
  background: rgba(224,72,88,.12) !important; color: var(--danger) !important;
}
.date-hidden { position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;pointer-events:auto; }
/* Countdown badge */
.countdown { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; }
.countdown.overdue { background: rgba(224,72,88,.2); color: #e04858; }
.countdown.urgent { background: rgba(224,160,48,.2); color: #e0a030; }
.countdown.ok { background: rgba(64,184,120,.1); color: #40b878; }
/* Progress bar */
.progress-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--border); margin-top: 2px; }
.progress-bar .pb-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.progress-cell { min-width: 60px; }
/* Chart */
.chart-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.chart-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.chart-bar-row .cbr-label { width: 120px; text-align: right; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-bar-row .cbr-bar { flex: 1; height: 22px; border-radius: 4px; position: relative; }
.chart-bar-row .cbr-bar .cbr-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 8px; font-size: 10px; font-weight: 600; color: #fff; }
.chart-bar-row .cbr-val { width: 70px; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
/* Photo attachment */
.attachment-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--accent); cursor: pointer; }
/* Responsive for smartphone */
@media (max-width: 768px) {
  .sidebar { width: 60px; min-width: 60px; }
  .sidebar-logo { display: none; }
  .sidebar-nav .nav-item { padding: 10px 8px; font-size: 0; justify-content: center; }
  .sidebar-nav .nav-item .nav-icon { width: 22px; height: 22px; }
  .sidebar-nav .nav-item .nav-badge { font-size: 9px; padding: 0 4px; margin-left: 0; position: absolute; top: 2px; right: 2px; }
  .page { padding: 12px 10px; }
  .teams-grid { grid-template-columns: 1fr; }
  .perf-grid { grid-template-columns: 1fr; }
  .counters { flex-wrap: wrap; }
  .counter-card { min-width: 80px; padding: 10px; }
  .counter-card .value { font-size: 20px; }
  .finance-grid { grid-template-columns: repeat(2, 1fr); }
  .schedule-grid { grid-template-columns: repeat(3, 1fr); }
  .cal-grid { gap: 1px; }
  .cal-cell { padding: 2px; font-size: 9px; }
  .cal-cell .cc-date { font-size: 11px; }
  .cal-cell .cc-item { font-size: 8px; padding: 1px 2px; }
  .ss-toolbar { flex-direction: column; align-items: flex-start; }
}
/* View-only mode */
body.view-mode .ss-cell, body.view-mode .ss-select, body.view-mode .date-hidden,
body.view-mode .btn-primary, body.view-mode .btn-danger,
body.view-mode textarea, body.view-mode .col-resize { pointer-events: none !important; opacity: .7; }
body.view-mode .btn-primary, body.view-mode .btn-danger { display: none; }
.mode-toggle {
  display: flex; align-items: center; gap: 6px; padding: 8px 20px;
  font-size: 11px; color: var(--text-dim); cursor: pointer; user-select: none;
}
.mode-toggle input { cursor: pointer; }
.ss-select {
  background: transparent; border: none; color: var(--text);
  font-size: 12px; font-family: 'Noto Sans JP', sans-serif;
  outline: none; width: 100%; cursor: pointer; -webkit-appearance: none;
  padding: 4px 2px;
}
.ss-select option { background: var(--bg-card); color: var(--text); }
.status-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.urgent-badge {
  background: var(--danger); color: #fff; font-size: 10px;
  padding: 1px 6px; border-radius: 3px; font-weight: 700; margin-left: 4px;
}

/* Info Registration (was Staff Management) */
.info-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.info-tab {
  padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-sub); transition: all .15s;
}
.info-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.staff-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px;
}
.staff-card .sc-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.staff-card .sc-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--accent);
  overflow: hidden; flex-shrink: 0;
}
.staff-card .sc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.staff-card .sc-name { font-weight: 600; font-size: 14px; }
.staff-card .sc-team { font-size: 11px; color: var(--text-sub); }
.staff-card .sc-count { font-size: 11px; color: var(--accent); margin-top: 6px; }
.staff-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.staff-tab {
  padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500;
  cursor: pointer; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-sub); transition: all .15s;
}
.staff-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Master data tags */
.master-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.master-tag {
  background: var(--bg-hover); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 4px; font-size: 11px;
  display: flex; align-items: center; gap: 4px;
}
.master-tag .remove-tag { cursor: pointer; color: var(--danger); font-weight: 700; font-size: 13px; }

/* Calendar */
.cal-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cal-header .cal-month { font-size: 20px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto; gap: 1px; flex: 1; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-sub); padding: 8px 0; background: var(--bg-base); }
.cal-dow.sun { color: var(--danger); }
.cal-dow.sat { color: #4a90ff; }
.cal-cell {
  background: var(--bg-card); padding: 4px 5px;
  font-size: 11px; overflow: hidden; min-height: 0;
}
.cal-cell.today { background: rgba(74,144,255,.12); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.today .cc-date { color: var(--accent); font-weight: 700; }
.cal-cell.other-month { opacity: .3; }
.cal-cell.holiday { background: rgba(224,72,88,.06); }
.cal-cell.saturday { background: rgba(74,144,255,.04); }
.cal-cell.sunday { background: rgba(224,72,88,.04); }
.cal-cell .cc-date { font-weight: 600; font-family: 'IBM Plex Mono', monospace; margin-bottom: 2px; font-size: 13px; }
.cal-cell .cc-date.sun { color: var(--danger); }
.cal-cell .cc-date.sat { color: #4a90ff; }
.cal-cell .cc-holiday { font-size: 8px; color: var(--danger); margin-bottom: 1px; }
.cal-cell .cc-item {
  padding: 1px 4px; border-radius: 3px; margin-bottom: 1px;
  font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Alert filters */
.alert-filter-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.alert-filter-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 11px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sub);
}
.alert-filter-btn.active { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Week view */
.week-view-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.week-view-table th {
  background: #0c0c1e; padding: 8px; text-align: left;
  font-weight: 600; color: var(--text-sub); border-bottom: 1px solid var(--border);
}
.week-view-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.cal-view-tabs { display: flex; gap: 4px; }
.cal-view-tab {
  padding: 5px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sub);
}
.cal-view-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Settings */
.settings-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px; margin-bottom: 16px;
}
.settings-section h3 {
  font-size: 14px; font-weight: 600; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; color: var(--text-sub); margin-bottom: 4px; }
.form-group input, .form-group textarea {
  width: 100%; max-width: 500px;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; border-radius: 6px;
  font-size: 13px; outline: none; font-family: 'Noto Sans JP', sans-serif;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent); }

/* Modal */
.modal-overlay {
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.6); z-index: 1000;
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px; max-width: 480px; width: 90%;
  max-height: 80vh; overflow-y: auto;
}
.modal h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }

/* Item Detail Modal */
.detail-overlay {
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:1001;
  display:none;align-items:center;justify-content:center;
}
.detail-overlay.show { display:flex; }
.detail-modal {
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  width:94%;max-width:560px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;
}
.dm-header {
  padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
}
.dm-header h3{margin:0;font-size:15px;font-weight:700;}
.dm-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:4px 8px;}
.dm-close:hover{color:var(--text);}
.dm-summary{padding:12px 20px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);}
.dm-summary-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.dm-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;}
.dm-tabs{display:flex;border-bottom:1px solid var(--border);}
.dm-tab{flex:1;padding:10px;text-align:center;font-size:12px;font-weight:600;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:.2s;}
.dm-tab.active{color:var(--text);border-bottom-color:var(--accent);}
.dm-tab.sec-a.active{border-bottom-color:#4a90ff;}
.dm-tab.sec-b.active{border-bottom-color:#40b878;}
.dm-tab.sec-c.active{border-bottom-color:#e0a030;}
.dm-body{padding:16px 20px;overflow-y:auto;flex:1;}
.dm-field{margin-bottom:14px;}
.dm-field label{display:block;font-size:10px;font-weight:600;color:var(--text-sub);letter-spacing:.05em;margin-bottom:4px;text-transform:uppercase;}
.dm-field input,.dm-field select,.dm-field textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  padding:10px 12px;border-radius:7px;font-size:14px;font-family:'Noto Sans JP',sans-serif;outline:none;transition:.2s;
}
.dm-field input:focus,.dm-field select:focus{border-color:var(--accent);}
.dm-field textarea{min-height:50px;resize:vertical;}
.dm-field.required input:not(:focus),.dm-field.required select:not(:focus){border-color:rgba(224,72,88,.4);}
.dm-field.required input:not(:placeholder-shown),.dm-field.required select option:checked:not([value=""]){border-color:var(--border);}
.dm-field.filled input,.dm-field.filled select{border-color:var(--border);}
.dm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dm-status-btns{display:flex;flex-wrap:wrap;gap:6px;}
.dm-status-btn{
  padding:7px 14px;border-radius:6px;border:1px solid var(--border);background:var(--bg);
  color:var(--text-sub);font-size:12px;font-weight:600;cursor:pointer;transition:.2s;
  font-family:'Noto Sans JP',sans-serif;
}
.dm-status-btn:hover{border-color:var(--text-dim);}
.dm-status-btn.active{color:#fff;}
.dm-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}
.dm-footer button{padding:10px 24px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:'Noto Sans JP',sans-serif;}
.dm-save{background:var(--accent);color:#fff;}
.dm-cancel{background:var(--bg);color:var(--text-sub);border:1px solid var(--border) !important;}

.formula-result { color: var(--success); font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
/* Financial summary */
.finance-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.finance-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px; text-align: center;
}
.finance-card .fc-label { font-size: 11px; color: var(--text-sub); margin-bottom: 4px; }
.finance-card .fc-value { font-size: 20px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.finance-card .fc-sub { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.finance-detail { margin-top: 12px; }
.finance-detail-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.finance-detail-row:last-child { border-bottom: none; }
.finance-detail-row .fd-name { flex: 1; }
.finance-detail-row .fd-val { font-family: 'IBM Plex Mono', monospace; font-size: 11px; min-width: 60px; text-align: right; }
/* Column resize */
table.ss th { position: sticky; top: 0; z-index: 10; user-select: none; }
table.ss th .col-resize {
  position: absolute; right: -3px; top: 0; bottom: 0; width: 10px;
  cursor: col-resize; z-index: 11; border-right: 2px solid transparent;
}
table.ss th .col-resize:hover, table.ss th .col-resize.active { border-right-color: var(--accent); background: rgba(74,144,255,.15); }
/* Announcement bar */
.announce-bar {
  background: rgba(224,72,88,.08);
  border: 1px solid rgba(224,72,88,.25); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 20px;
}
.announce-bar .ab-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.announce-bar .ab-title { font-size: 14px; font-weight: 700; color: var(--danger); }
.announce-bar .ab-content textarea {
  width: 100%; background: rgba(0,0,0,.2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 14px 16px;
  font-size: 15px; font-family: 'Noto Sans JP', sans-serif; resize: vertical;
  outline: none; min-height: 60px; line-height: 1.7;
}
.announce-bar .ab-content textarea:focus { border-color: var(--accent); }
.announce-bar .ab-content .ab-display {
  font-size: 15px; line-height: 1.8; color: var(--text); white-space: pre-wrap;
  padding: 14px 16px; background: rgba(0,0,0,.2); border-radius: 8px;
  border: 1px solid var(--border);
}
.announce-bar .ab-actions { display: flex; gap: 8px; margin-top: 10px; }
/* Team color accents */
.team-color-denim { border-left: 3px solid var(--accent); background: #0a0e1e !important; }
.team-color-usumono { border-left: 3px solid var(--st-sewing); background: #081410 !important; }
.team-color-naishoku { border-left: 3px solid var(--st-naishoku); background: #120a18 !important; }
.team-color-seisan { border-left: 3px solid var(--warning); background: #141008 !important; }
.tc-denim { color: var(--accent); }
.tc-usumono { color: var(--st-sewing); }
.tc-naishoku { color: var(--st-naishoku); }
.tc-seisan { color: var(--warning); }
/* Staff card draggable */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.staff-card { cursor: grab; transition: transform .15s, box-shadow .15s; }
.staff-card.dragging { opacity: .5; transform: scale(.97); }
.staff-card.drag-over { box-shadow: 0 0 0 2px var(--accent); }