@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #090e14;
  --surface: #10171f;
  --line: #253039;
  --text: #e9f0f4;
  --muted: #8b9ba9;
  --mint: #80f6cf;
  --purple: #b99af4;
  font-family: Manrope, Arial, sans-serif;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% -20%, #15453b55, transparent 65%),
              radial-gradient(ellipse at 100% 100%, #25214933, transparent 50%);
  pointer-events: none;
}
.dashboard {
  position: relative;
  width: 100%;
  max-width: 1800px;
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding: clamp(10px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.2vw, 16px);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ffffff12;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: 2px; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 500; letter-spacing: 1px; }
.brand-mark { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 38px; border: 1px solid #80f6cf55; border-radius: 8px; color: var(--mint); background: #80f6cf09; font-size: 26px; letter-spacing: 0; }
.brand-mark span { position: absolute; top: 6px; right: 5px; width: 4px; height: 4px; background: var(--mint); border-radius: 50%; }
.clock-block { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px; flex-shrink: 0; color: #a7b2bc; font-size: 11px; white-space: nowrap; }
.live-dot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px #80f6cf80; }
.clock-block time { padding-left: 10px; border-left: 1px solid var(--line); color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.timezone { color: var(--muted); font-size: 9px; }
.heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.eyebrow > span { display: block; width: 16px; height: 1px; background: var(--mint); }
h1 { margin: 5px 0 0; font-size: clamp(24px, 2.7vw, 37px); font-weight: 500; letter-spacing: -1.3px; line-height: 1.15; }
h1 > span { color: var(--mint); }
.month { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; }
.month span:not(.month-icon) { color: var(--muted); font-weight: 400; }
.month small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.month-icon { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--mint); font-size: 18px; }
.schedule-panel { min-width: 0; min-height: 0; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(120deg, #121b23, #10151e); box-shadow: 0 15px 45px #0002; }
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 6px 13px; border-bottom: 1px solid var(--line); color: #aab9c4; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.small-dot { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border: 1px solid var(--mint); border-radius: 50%; }
.today-key { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font-size: 9px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.today-key i { width: 6px; height: 6px; border-radius: 2px; background: var(--mint); box-shadow: 0 0 8px #80f6cf66; }
.schedule, .desktop-table { min-width: 0; height: auto; }
.mobile-view { display: none; }
.schedule-table, .events-table { width: 100%; height: auto; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.person-col { width: clamp(164px, 14vw, 205px); }
.event-col { width: clamp(39px, 3.8vw, 56px); }
.schedule-table thead tr { height: 43px; }
.schedule-table tbody tr { height: 39px; }
.schedule-table th, .schedule-table td, .events-table th, .events-table td { border-bottom: 1px solid #253039a0; }
.schedule-table tbody tr:last-child > *, .events-table tbody tr:last-child > * { border-bottom: 0; }
.schedule-table thead th, .events-table thead th { font-weight: 600; }
.person-head { padding: 4px 8px 4px 12px; color: var(--muted); text-align: left; font-size: 9px; letter-spacing: .7px; white-space: nowrap; }
.person-head > span { margin-left: 4px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; font-size: 8px; letter-spacing: 0; }
.person { padding: 5px 6px 5px 12px; color: #dfe7ed; text-align: left; font-size: 11px; font-weight: 600; line-height: 1.2; }
.person-name, .person > span:nth-child(2) { display: inline-block; max-width: calc(100% - 38px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 7px; vertical-align: middle; border: 1px solid #ffffff09; border-radius: 7px; font-size: 9px; font-weight: 700; }
.amber { color: #dcbb79; background: #dcbb7912; }
.mint { color: var(--mint); background: #80f6cf12; }
.blue { color: #8ab4f0; background: #8ab4f012; }
.violet { color: #b49ae9; background: #b49ae912; }
.rose { color: #d88ba3; background: #d88ba312; }
.row-number { display: none; }
.day-head { padding: 2px 0; border-left: 1px solid #ffffff08; color: #bfccd5; text-align: center; font-size: 11px; line-height: 15px; }
.day-head small { display: block; margin-top: 2px; color: #7d8b98; font-size: 8px; line-height: 11px; }
.day-cell { padding: 2px 0; border-left: 1px solid #ffffff08; text-align: center; font-size: 11px; }
.empty { color: #40505f; font-size: 12px; }
.off { background: #a478f028; }
.day-head.off { background: #a478f03b; color: #e0c8ff; box-shadow: inset 0 2px #b481ff; }
.day-head.off small { color: #cdb0f1; }
.off .empty { color: #9271b7; }
.day-head.current { background: #80f6cf20; color: var(--mint); box-shadow: inset 0 2px var(--mint); }
.day-head.current small { color: var(--mint); }
.day-cell.current { background: #80f6cf0c; border-left-color: #80f6cf24; border-right: 1px solid #80f6cf24; }
.shift, .trip-cell { display: inline-grid; place-items: center; width: calc(100% - 2px); max-width: 27px; height: 25px; border: 1px solid #80f6cf24; border-radius: 5px; background: #80f6cf0c; color: #91e4c6; font-size: 11px; font-weight: 700; }
.off .shift { border-color: #c293ff66; background: #a478f033; color: #e5d2ff; }
.shift.active { border-color: var(--mint); background: var(--mint); color: #082c21; box-shadow: 0 0 10px #80f6cf55; animation: glow 3s ease-in-out infinite; }
.trip-cell { border-color: #f6ac6128; background: #f6ac6110; color: #ecac72; }
.schedule-table .on-duty > .person { background: #80f6cf0b; color: #b5ffe5; box-shadow: inset 0 0 0 1px #80f6cf80; }
.event-head { padding: 3px 2px; border-left: 1px solid #5978a433; background: #253650; color: #d7e5f6; text-align: center; font-size: 8px; line-height: 11px; overflow-wrap: anywhere; }
.event-head small { display: block; margin-top: 3px; color: #b3c6dc; font-size: 8px; font-weight: 400; }
.event-title-short { display: none; }
.event-count { padding: 2px 0; border-left: 1px solid #5978a433; background: #1a293e; color: #879bb7; text-align: center; font-size: 12px; }
.event-head.duty-count, .event-count.duty-count { border-left: 2px solid #86baff; }
.event-count.has-count { background: #20364b; color: var(--mint); font-weight: 700; }
.event-count.trip-count.has-count { color: #ecac72; background: #293345; }
.event-count.sick-count.has-count { color: #b6c8db; }
.event-count.vacation-count.has-count { color: #f2d47c; }
.event-count.unpaid-count.has-count { color: #d394b4; }
@media (hover: hover) and (pointer: fine) {
  .schedule-table tbody tr:hover > *, .events-table tbody tr:hover > * { background-image: linear-gradient(#ffffff0b, #ffffff0b); }
}
.panel-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; min-height: 28px; padding: 6px 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.muted { color: var(--muted); }
.bottom-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.today-panel, .legend-panel { position: relative; min-width: 0; overflow: hidden; padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; background: #10171fb3; }
.today-panel { border-color: #80f6cf30; background: linear-gradient(105deg, #80f6cf08, #10171f); }
.today-panel.has-duty { border-color: #80f6cf98; box-shadow: inset 0 0 15px #80f6cf09; }
.today-panel .eyebrow { color: #85baa7; font-size: 9px; }
.today-duty { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.duty-person { display: flex; align-items: center; gap: 6px; min-width: 0; }
.duty-person .avatar { width: 28px; height: 28px; margin-right: 2px; flex-shrink: 0; }
.duty-person strong, .no-duty strong { font-size: 13px; font-weight: 600; }
.duty-person small, .no-duty small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.duty-date { margin-left: auto; color: var(--mint); text-align: center; font-size: 23px; line-height: 1; }
.duty-date small { display: block; margin-top: 5px; font-size: 7px; letter-spacing: 1px; }
.orbit { position: absolute; top: -80px; right: -60px; width: 160px; height: 160px; border: 1px solid #80f6cf0b; border-radius: 50%; pointer-events: none; }
.legend-panel h2 { margin: 0 0 9px; color: #b2bec8; font-size: 11px; font-weight: 600; }
.legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 12px; }
.legend > span { display: flex; align-items: center; gap: 6px; min-width: 0; color: #aab8c4; font-size: 9px; }
.legend i { display: inline-grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; border: 1px solid; border-radius: 4px; font-size: 8px; font-style: normal; }
.legend .duty { color: var(--mint); border-color: #80f6cf30; background: #80f6cf0d; }
.legend .weekend { color: var(--purple); border-color: #a38aef30; background: #a38aef0d; }
.legend .trip { color: #ecac72; border-color: #ecac7230; background: #ecac720d; }
.legend .sick { color: #96a6b6; border-color: #96a6b630; background: #96a6b60d; }
.legend .vacation { color: #f2d47c; border-color: #f2d47c30; background: #f2d47c0d; }
.legend .unpaid { color: #d394b4; border-color: #d394b430; background: #d394b40d; }
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 12px; color: #718390; font-size: 9px; }
.footer .live-dot { width: 4px; height: 4px; margin-right: 5px; box-shadow: none; }
.separator { color: #52606d; margin: 0 6px; }
@keyframes glow { 50% { box-shadow: 0 0 14px #80f6cf7a; } }

/* Medium windows and browser zoom: show two complete, readable half-month tables. */
@media (max-width: 1180px) {
  .desktop-table { display: none; }
  .mobile-view.compact-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; padding: 10px; }
  .compact-period { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #10171f; }
  .compact-period > span { display: block; padding: 5px 9px; border-bottom: 1px solid var(--line); color: #b5c5d2; font-size: 10px; font-weight: 600; }
  .compact-tables .person-col { width: clamp(105px, 12vw, 140px); }
  .compact-tables .schedule-table thead tr { height: 32px; }
  .compact-tables .schedule-table tbody tr { height: 32px; }
  .compact-tables .person { padding: 3px 4px 3px 7px; font-size: 10px; }
  .compact-tables .person .avatar { display: none; }
  .compact-tables .person > .person-name { display: block; max-width: 100%; overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
  .compact-tables .person-head { padding-left: 7px; font-size: 8px; }
  .compact-tables .person-head > span { display: none; }
  .compact-tables .day-head { font-size: 9px; line-height: 12px; }
  .compact-tables .day-head small { font-size: 7px; line-height: 9px; margin-top: 1px; }
  .compact-tables .shift, .compact-tables .trip-cell { height: 22px; max-width: 23px; font-size: 10px; border-radius: 4px; }
  .compact-statistics { grid-column: 1 / -1; min-width: 0; overflow: hidden; border: 1px solid #5978a450; border-radius: 8px; background: #1a293e; }
  .compact-statistics h2 { margin: 0; padding: 6px 9px; border-bottom: 1px solid #5978a450; background: #253650; color: #dce8f7; font-size: 11px; font-weight: 600; }
  .compact-statistics h2 small { margin-left: 7px; color: #a2b7d3; font-size: 9px; font-weight: 400; }
  .compact-statistics .events-table thead tr { height: 29px; }
  .compact-statistics .events-table tbody tr { height: 29px; }
  .compact-statistics .person-col { width: clamp(135px, 20vw, 190px); }
  .compact-statistics .person { padding: 3px 5px 3px 9px; background: #1a293e; font-size: 10px; white-space: normal; }
  .compact-statistics .person-head { padding-left: 9px; background: #253650; }
  .compact-statistics .event-head { font-size: 9px; }
  .event-title-full { display: none; }
  .event-title-short { display: inline; }
  .event-head small { display: none; }
  .heading h1 { font-size: 27px; }
  .month { font-size: 14px; }
}

/* Small tablets and phones: stack periods so every column remains available. */
@media (max-width: 760px) {
  .dashboard { padding: 10px; gap: 10px; }
  .topbar { padding-bottom: 7px; }
  .brand { font-size: 15px; letter-spacing: 1px; gap: 7px; }
  .brand-mark { width: 28px; height: 31px; font-size: 21px; }
  .brand small { display: none; }
  .clock-block { font-size: 9px; gap: 6px; }
  .clock-block time { font-size: 12px; padding-left: 7px; }
  .timezone { display: none; }
  .heading { flex-wrap: nowrap; }
  .heading .eyebrow { display: none; }
  .heading h1 { margin: 0; font-size: 22px; letter-spacing: -.8px; }
  .month { gap: 5px; font-size: 12px; }
  .month small { font-size: 8px; }
  .month-icon { display: none; }
  .panel-bar { min-height: 30px; padding: 5px 9px; font-size: 8px; }
  .today-key { font-size: 8px; }
  .mobile-view.compact-tables { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; }
  .compact-tables .person-col { width: clamp(100px, 27vw, 160px); }
  .compact-tables .schedule-table thead tr { height: 30px; }
  .compact-tables .schedule-table tbody tr { height: 29px; }
  .compact-tables .person { font-size: 10px; line-height: 1.15; }
  .compact-tables .day-head { font-size: 9px; }
  .compact-tables .shift, .compact-tables .trip-cell { height: 21px; }
  .compact-statistics .person-col { width: clamp(110px, 27vw, 160px); }
  .compact-statistics .events-table tbody tr { height: 27px; }
  .compact-statistics .event-head { font-size: 9px; }
  .bottom-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .today-panel, .legend-panel { padding: 9px 12px; }
  .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .dashboard { padding: 7px; gap: 8px; }
  .brand { font-size: 14px; }
  .clock-block #date { display: none; }
  .clock-block time { border: 0; padding: 0; }
  .heading h1 { font-size: 20px; }
  .month { font-size: 11px; }
  .month small { font-size: 8px; }
  .mobile-view.compact-tables { gap: 7px; padding: 7px; }
  .compact-period > span { padding: 4px 7px; font-size: 9px; }
  .compact-tables .person-col { width: clamp(94px, 28vw, 114px); }
  .compact-tables .schedule-table tbody tr { height: 28px; }
  .compact-tables .person { padding: 2px 3px 2px 5px; font-size: 9px; }
  .compact-tables .person-head { padding-left: 5px; font-size: 7px; letter-spacing: 0; }
  .compact-tables .day-head { font-size: 8.5px; line-height: 11px; }
  .compact-tables .day-head small { font-size: 6.5px; line-height: 8px; }
  .compact-tables .day-cell { padding: 0; }
  .compact-tables .shift, .compact-tables .trip-cell { height: 19px; font-size: 9px; }
  .compact-statistics h2 { padding: 5px 7px; font-size: 10px; }
  .compact-statistics .person-col { width: clamp(105px, 29vw, 124px); }
  .compact-statistics .person { padding-left: 6px; font-size: 9px; }
  .compact-statistics .event-head { padding: 3px 0; font-size: 8px; }
  .compact-statistics .event-count { font-size: 11px; }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .legend > span { font-size: 9px; }
  .footer { font-size: 8px; }
}
@media (max-width: 340px) {
  .compact-tables .person-col { width: 87px; }
  .compact-tables .person { font-size: 8.5px; }
  .compact-tables .day-head { font-size: 8px; }
  .compact-tables .shift, .compact-tables .trip-cell { font-size: 8px; }
  .compact-statistics .person-col { width: 102px; }
  .compact-statistics .event-head { font-size: 7.5px; }
}
@media (max-width: 760px) and (orientation: landscape) and (min-width: 660px) {
  .mobile-view.compact-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-statistics { grid-column: 1 / -1; }
  .compact-tables .person-col { width: 97px; }
  .compact-tables .person { font-size: 9px; }
  .compact-tables .day-head { font-size: 8px; }
  .compact-tables .day-head small { font-size: 6px; }
  .compact-tables .shift, .compact-tables .trip-cell { height: 18px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}