:root {
  --bg: #0b1220;
  --bg-elev: #121a2b;
  --bg-card: #162033;
  --border: #243047;
  --text: #e8eef8;
  --muted: #93a4c3;
  --teal: #14b8a6;
  --teal-dark: #0f766e;
  --red: #ef4444;
  --green: #22c55e;
  --blue: #3b82f6;
  --yellow: #eab308;
  --gray: #64748b;
  --danger: #f87171;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --tap: 48px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); min-height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--teal); }

#app { min-height: 100dvh; display: flex; flex-direction: column; }
.boot { padding: 2rem; text-align: center; color: var(--muted); }

.shell { display: flex; flex-direction: column; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  background: rgba(11,18,32,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 700; letter-spacing: .2px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, var(--teal), var(--teal-dark));
  display: grid; place-items: center; color: white; font-size: .85rem;
}
.brand small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.topbar-spacer { flex: 1; }
.pill {
  font-size: .75rem; padding: .25rem .55rem; border-radius: 999px;
  background: #1e293b; color: var(--muted); border: 1px solid var(--border);
}

.nav {
  display: flex; gap: .35rem; overflow-x: auto; padding: .6rem .75rem;
  border-bottom: 1px solid var(--border); background: var(--bg-elev);
  -webkit-overflow-scrolling: touch;
}
.nav button {
  flex: 0 0 auto; min-height: 40px; padding: .45rem .85rem;
  border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--muted);
}
.nav button.active { background: #134e4a; color: #ccfbf1; border-color: #115e59; }
.nav button:disabled { opacity: .45; cursor: not-allowed; }

.main { flex: 1; padding: 1rem; max-width: 1100px; width: 100%; margin: 0 auto; }
.page-title { margin: 0 0 .25rem; font-size: 1.35rem; }
.page-sub { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }

.auth-wrap {
  min-height: 100dvh; display: grid; place-items: center; padding: 1.25rem;
  background:
    radial-gradient(ellipse at top, rgba(20,184,166,.18), transparent 50%),
    var(--bg);
}
.auth-card {
  width: min(420px, 100%); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 1.5rem; box-shadow: var(--shadow);
}
.auth-card h1 { margin: 0 0 .35rem; font-size: 1.5rem; }
.auth-card p { margin: 0 0 1.25rem; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.field label { font-size: .85rem; color: var(--muted); }
.field input, .field select, .field textarea {
  min-height: var(--tap); padding: .7rem .85rem;
  border-radius: 12px; border: 1px solid var(--border);
  background: #0d1524; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.2);
}

.btn {
  min-height: var(--tap); padding: .75rem 1rem; border-radius: 12px;
  border: 1px solid transparent; font-weight: 650; display: inline-flex;
  align-items: center; justify-content: center; gap: .4rem;
}
.btn-block { width: 100%; }
.btn-primary { background: linear-gradient(180deg, #14b8a6, #0f766e); color: white; }
.btn-primary:active { filter: brightness(.95); }
.btn-secondary { background: #1e293b; border-color: var(--border); color: var(--text); }
.btn-danger { background: #7f1d1d; border-color: #991b1b; color: #fecaca; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.summary {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-bottom: 1rem;
}
@media (min-width: 720px) {
  .summary { grid-template-columns: repeat(5, 1fr); }
}
.summary .stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem;
}
.summary .stat .n { font-size: 1.45rem; font-weight: 750; }
.summary .stat .l { color: var(--muted); font-size: .78rem; margin-top: .15rem; }

.filters {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center;
}
.filters .chip {
  min-height: 38px; padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid var(--border); background: #111827; color: var(--muted);
}
.filters .chip.active { background: #134e4a; color: #ccfbf1; border-color: #115e59; }
.filters input[type="date"] {
  min-height: 38px; padding: .35rem .65rem; border-radius: 999px;
  border: 1px solid var(--border); background: #111827;
}

.dept { margin-bottom: 1.25rem; }
.dept h2 {
  margin: 0 0 .65rem; font-size: .85rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.cards { display: grid; gap: .75rem; }
@media (min-width: 800px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; position: relative;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--gray);
}
.card.color-green::before { background: var(--green); }
.card.color-red::before { background: var(--red); }
.card.color-blue::before { background: var(--blue); }
.card.color-yellow::before { background: var(--yellow); }
.card.color-gray::before { background: var(--gray); }

.card-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.card-name { font-weight: 700; font-size: 1.05rem; }
.card-dept { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.status-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700; padding: .3rem .55rem;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.status-badge.green { background: rgba(34,197,94,.15); color: #86efac; border-color: rgba(34,197,94,.35); }
.status-badge.red { background: rgba(239,68,68,.15); color: #fca5a5; border-color: rgba(239,68,68,.35); }
.status-badge.blue { background: rgba(59,130,246,.15); color: #93c5fd; border-color: rgba(59,130,246,.35); }
.status-badge.yellow { background: rgba(234,179,8,.15); color: #fde047; border-color: rgba(234,179,8,.35); }
.status-badge.gray { background: rgba(100,116,139,.18); color: #cbd5e1; border-color: rgba(100,116,139,.35); }

.card-meta {
  margin-top: .85rem; display: grid; gap: .35rem; font-size: .88rem;
}
.card-meta .row { display: flex; gap: .5rem; }
.card-meta .k { color: var(--muted); min-width: 6.5rem; }
.card-meta .v { color: var(--text); }
.note { margin-top: .65rem; font-size: .8rem; color: #fde047; }

.myday-status {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem;
}
.myday-status .big { font-size: 1.35rem; font-weight: 750; margin: .35rem 0; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .btn-grid { grid-template-columns: repeat(3, 1fr); } }
.btn-status { min-height: 56px; }
.btn-status.active-working { outline: 2px solid var(--green); }
.btn-status.active-off { outline: 2px solid var(--red); }
.workday-actions { display: grid; gap: .65rem; margin-bottom: 1.25rem; }
.workday-actions .btn { min-height: 56px; font-size: 1.05rem; }

.table-list { display: grid; gap: .65rem; }
.emp-row {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1rem;
  display: flex; justify-content: space-between; gap: .75rem; align-items: center;
}
.emp-row .meta { color: var(--muted); font-size: .82rem; }
.inactive-tag { color: var(--danger); font-size: .75rem; font-weight: 700; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: grid; place-items: end center; z-index: 50; padding: 0;
}
@media (min-width: 720px) { .modal-backdrop { place-items: center; padding: 1rem; } }
.modal {
  width: min(560px, 100%); max-height: 92dvh; overflow: auto;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 18px 18px 0 0; padding: 1.1rem;
}
@media (min-width: 720px) { .modal { border-radius: 18px; } }
.modal h3 { margin: 0 0 1rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  background: #0f172a; border: 1px solid var(--border); color: var(--text);
  padding: .7rem 1rem; border-radius: 999px; z-index: 60; box-shadow: var(--shadow);
  max-width: calc(100% - 2rem);
}
.error-text { color: var(--danger); font-size: .88rem; margin: .5rem 0 0; }
.coming-soon {
  background: var(--bg-card); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 1.5rem; color: var(--muted); text-align: center;
}
.empty { color: var(--muted); padding: 1rem 0; }
.password-reveal {
  background: #052e2b; border: 1px solid #115e59; border-radius: 12px;
  padding: .85rem; margin: .75rem 0; word-break: break-all;
}
.settings-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem;
}
.settings-card dt { color: var(--muted); font-size: .8rem; margin-top: .65rem; }
.settings-card dd { margin: .15rem 0 0; font-weight: 600; }

/* ---------- Phase 2: Daily Schedule ---------- */
.card-visits { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .45rem; }
.card-visits li { display: flex; gap: .6rem; padding: .5rem .6rem; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; }
.cv-time { font-weight: 700; min-width: 4.6rem; color: #93c5fd; font-size: .85rem; }
.cv-body { font-size: .85rem; color: var(--muted); }
.cv-body strong { color: var(--text); }
.btn-big { min-height: 56px; font-size: 1.05rem; }
.sch-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.sch-emp { min-height: 44px; padding: 0 .6rem; border-radius: 10px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); font-size: 1rem; }
.sch-state { padding: .6rem .85rem; border-radius: 10px; font-weight: 600; margin-bottom: .75rem; font-size: .92rem; }
.sch-state.ok { background: rgba(34,197,94,.12); color: #86efac; border: 1px solid rgba(34,197,94,.3); }
.sch-state.warn { background: rgba(234,179,8,.12); color: #fde047; border: 1px solid rgba(234,179,8,.3); }
.visit-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.visit { display: flex; gap: .75rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; }
.visit.locked { opacity: .85; border-style: dashed; }
.visit-num { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: rgba(15,118,110,.25); color: #5eead4; font-weight: 700; flex: none; }
.visit-main { flex: 1; min-width: 0; }
.visit-time { font-weight: 700; color: #93c5fd; }
.visit-plant { font-weight: 700; font-size: 1.02rem; margin-top: .1rem; overflow-wrap: anywhere; }
.visit-sub { color: var(--muted); font-size: .85rem; }
.visit-actions { display: grid; grid-template-columns: repeat(2, 40px); gap: .35rem; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-size: 1rem; cursor: pointer; }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn.danger { color: #fca5a5; }
.new-tag { font-size: .7rem; color: #5eead4; font-weight: 700; text-transform: uppercase; }
.sch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sch-actions .btn-block { grid-column: 1 / -1; }
.sch-history { margin-top: 1.25rem; color: var(--muted); font-size: .85rem; }
.sch-history ul { padding-left: 1rem; }
.sch-history span { color: var(--text); }

/* ---------- Phase 3: Weekly Calendar ---------- */
.cal-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.75rem}
.cal-range{margin:0 .5rem;font-size:1.05rem}
.cal-grid{display:grid;grid-template-columns:minmax(150px,1.1fr) repeat(var(--cols),minmax(120px,1fr));gap:4px;background:#e5e7eb;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.cal-grid>*{background:#fff}
.cal-corner,.cal-dayhead{padding:.6rem;font-weight:600;font-size:.85rem;color:#475569;background:#f8fafc}
.cal-dayhead.today{color:#0f766e;box-shadow:inset 0 -3px 0 #0f766e}
.cal-emp{display:flex;gap:.5rem;align-items:center;padding:.6rem;border-left:5px solid var(--emp)}
.cal-emp small{display:block;color:#64748b;font-size:.75rem}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--emp);flex:none}
.cal-cell{all:unset;box-sizing:border-box;display:block;min-height:72px;padding:.45rem .5rem;cursor:pointer;border-top:4px solid var(--emp);font-size:.8rem;width:100%}
.cal-cell:hover,.cal-cell:focus-visible{background:#f1f5f9;outline:2px solid var(--emp)}
.cal-cell.is-leave{background:#fef2f2}
.cal-visits{list-style:none;margin:.25rem 0 0;padding:0}
.cal-visits li{padding:2px 0;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-visits li.done::before{content:"✓ ";color:#059669}
.cal-visits li.more{color:#64748b}
.cal-status{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:600}
.cal-status.leave{background:#fee2e2;color:#b91c1c}
.cal-status.warn{background:#fef9c3;color:#854d0e}
.cal-status.ok{background:#dcfce7;color:#166534}
.cal-status.muted{background:#f1f5f9;color:#64748b}
.cal-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;font-size:.8rem;color:#475569;align-items:center}
.cal-mobile{display:none}
.cal-mrow{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:.5rem;overflow:hidden}
.cal-mrow .cal-cell{min-height:56px;font-size:.9rem}
.cal-mtabs .chip{min-height:44px}
.cal-modal h3{display:flex;align-items:center;gap:.5rem}
.move-row{display:flex;gap:.5rem;align-items:center;margin-top:.4rem;font-size:.85rem}
.move-row select{min-height:40px;flex:1}
@media (max-width:760px){.cal-desktop{display:none}.cal-mobile{display:block}.cal-range{width:100%;margin:0}}
/* Phase 4: mobile-friendly location controls */
.sharing-panel { margin: 1rem 0; }
.sharing-panel p { line-height:1.5; }
.sharing-panel h2, .location-cards h2 { font-size:1.15rem; margin:0 0 .75rem; }
#location-map { height: min(55vh, 480px); min-height:260px; margin:1rem 0; border-radius:14px; background:#e2e8f0; z-index:0; }
.location-cards { margin:1rem 0; }
.cv-body [data-plant-action], .visit-main [data-plant-action] { display:block; margin-top:.65rem; min-height:48px; width:100%; }
.location-cards .card p { overflow-wrap:anywhere; }
@media(max-width:600px) { .sharing-panel .workday-actions {display:flex;flex-direction:column;} .sharing-panel .btn {width:100%;min-height:50px;} }

/* Phase 5 */
.form label { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .8rem; font-size: .85rem; color: var(--muted); }
.form input, .form select, .form textarea, #day-notes {
  min-height: var(--tap); padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--border);
  background: #0d1524; outline: none; color: var(--text, inherit); width: 100%; box-sizing: border-box;
}
.form input:focus, .form select:focus, .form textarea:focus, #day-notes:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.2); }
.day-notes { margin-top: .4rem; padding: .5rem .65rem; border-radius: 10px; background: rgba(148,163,184,.08); }
.day-notes .k { font-size: .8rem; color: var(--muted); }
.day-notes p { margin: .2rem 0 0; white-space: pre-wrap; }
.dept h2 .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--emp); }
/* Phase 6 */
.insight-panel { background:var(--surface,#fff);border:1px solid var(--border,#dce3eb);border-radius:14px;padding:1rem;margin:.75rem 0; }
.insight-panel summary {cursor:pointer;font-weight:700;padding:.4rem 0;min-height:44px;}
.insight-settings {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem;margin:1rem 0;}
.insight-settings label {display:flex;gap:.7rem;align-items:center;min-height:48px;}
.insight-settings input {width:22px;height:22px;accent-color:#0f766e;}
.alert-item.unread {border-left:5px solid #0f766e;}
.insight-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;}
.insight-tiles .insight-panel {display:flex;flex-direction:column;gap:.5rem;}
.insight-number {font-size:1.7rem;color:#0f766e;}
.insight-table {overflow-x:auto;margin:1rem 0;}
.insight-table table {width:100%;border-collapse:collapse;text-align:left;background:white;}
.insight-table th,.insight-table td {padding:.9rem;border-bottom:1px solid #e2e8f0;vertical-align:top;}
.insight-table th {background:#f1f5f9;font-size:.85rem;}
.history-change {max-width:440px;overflow-wrap:anywhere;white-space:pre-wrap;font-size:.85rem;}
.report-controls {display:flex;gap:.75rem;align-items:end;flex-wrap:wrap;margin:1rem 0;}
.report-controls label {display:flex;flex-direction:column;gap:.3rem;}
.report-controls input {min-height:46px;border:1px solid #cbd5e1;border-radius:8px;padding:.5rem;}
@media(max-width:640px){.insight-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.insight-number{font-size:1.4rem}.report-controls label{flex:1;min-width:135px}.report-controls .btn{flex:1}.topbar .pill{font-size:.72rem}#notification-bell{padding:.4rem;min-height:44px}}

.leave-filter {display:block;max-width:24rem;margin:1.25rem 0;font-weight:600}
.leave-filter select {display:block;width:100%;min-height:48px;margin-top:.4rem}
.leave-card {margin:.8rem 0}.leave-card h2{font-size:1.1rem;margin:0}
.leave-note{white-space:pre-wrap;overflow-wrap:anywhere}.leave-card .btn{min-height:48px}