:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0f172a; color: #e2e8f0; }
body { margin: 0; }
header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 2rem; background: linear-gradient(135deg, #1e293b, #111827); border-bottom: 1px solid #334155; }
h1 { margin: 0 0 .25rem; font-size: 2rem; }
p { color: #94a3b8; }
button { background: #38bdf8; color: #082f49; border: 0; border-radius: .75rem; padding: .75rem 1rem; font-weight: 700; cursor: pointer; }
button:hover { background: #7dd3fc; }
button.secondary { background: #1e293b; color: #bae6fd; border: 1px solid #334155; }
button.secondary:hover { background: #334155; }
a { color: #bae6fd; font-weight: 700; text-decoration: none; }
.actions { display: flex; align-items: center; gap: .75rem; }
.user { margin: .25rem 0 0; color: #bae6fd; }
main { display: grid; grid-template-columns: 360px 1fr; gap: 1rem; padding: 1rem; }
.panel { background: #111827; border: 1px solid #334155; border-radius: 1rem; padding: 1rem; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.panel-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .75rem; }
.panel-heading h2 { margin: 0; }
.wide { min-width: 0; }
form { display: grid; gap: .75rem; }
label { display: grid; gap: .3rem; color: #cbd5e1; font-weight: 600; }
label span { color: #64748b; font-weight: 400; }
hr { border: 0; border-top: 1px solid #334155; margin: 1.25rem 0; }
input, select { background: #020617; color: #e2e8f0; border: 1px solid #334155; border-radius: .6rem; padding: .7rem; }
.check { display: flex; align-items: center; gap: .5rem; }
.message { min-height: 1.2rem; color: #86efac; }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.group { background: #020617; border: 1px solid #1e293b; border-radius: .8rem; padding: .75rem; }
.group h3 { margin: 0 0 .75rem; color: #f8fafc; }
.card { border-left: 4px solid #38bdf8; background: #0f172a; margin: .5rem 0; padding: .7rem; border-radius: .5rem; }
.card.status-in_office { border-left-color: #22c55e; }
.card.status-working_from_home { border-left-color: #38bdf8; }
.card.status-at_client { border-left-color: #a78bfa; }
.card.status-at_lunch { border-left-color: #f59e0b; }
.card.status-back_from_lunch { border-left-color: #84cc16; }
.card.status-pto { border-left-color: #f472b6; }
.card.status-idle { border-left-color: #f97316; background: #27140a; }
.card.status-offline { border-left-color: #64748b; opacity: .82; }
.card strong { display: block; }
.card small { color: #94a3b8; }
.ticket-status { color: #f8fafc; display: inline-block; font-weight: 700; margin-top: .35rem; }
.ticket-status.muted { color: #94a3b8; font-weight: 600; }
.ticket { margin-top: .5rem; color: #bae6fd; background: transparent; padding: 0; font-weight: 600; }
.calendar-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.calendar-toolbar button { padding: .45rem .75rem; }
.calendar-toolbar button.active { background: #f8fafc; color: #0f172a; }
.calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.calendar.expanded { grid-template-columns: repeat(7, minmax(140px, 1fr)); align-items: stretch; }
.large-calendar { grid-column: 1 / -1; min-height: 70vh; }
.calendar-range { grid-column: 1 / -1; color: #93c5fd; font-weight: 700; }
.calendar-day { min-height: 9rem; background: #020617; border: 1px solid #1e293b; border-radius: .75rem; padding: .65rem; display: grid; align-content: start; gap: .45rem; }
.calendar-day.has-pto { border-color: #475569; box-shadow: inset 0 0 0 1px rgba(244,114,182,.28); }
.calendar-day-header { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; border-bottom: 1px solid #1e293b; padding-bottom: .4rem; }
.calendar-day-header strong { color: #f8fafc; }
.calendar-day-header span { color: #64748b; font-size: .8rem; }
.calendar-day p { color: #475569; margin: .2rem 0 0; font-size: .9rem; }
.calendar-item { background: #020617; border: 1px solid #334155; border-left: 4px solid #f472b6; border-radius: .6rem; padding: .65rem; display: grid; gap: .2rem; }
.calendar-item.compact { background: #0f172a; padding: .5rem; }
.calendar-item span { color: #cbd5e1; }
.calendar-item small { color: #94a3b8; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem; border-bottom: 1px solid #1e293b; text-align: left; vertical-align: top; }
th { color: #93c5fd; }
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  header { align-items: flex-start; flex-direction: column; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .calendar.expanded { grid-template-columns: 1fr; }
}