:root {
  --ink: #14211b;
  --muted: #708077;
  --line: #dfe8e2;
  --paper: #f7faf7;
  --green: #1f7652;
  --green-dark: #165c40;
  --green-soft: #e2f2e9;
  --purple: #7151a8;
  --purple-soft: #efe8fa;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 82% 4%, #e8f5ec 0, transparent 25rem), var(--paper); }
.topbar { height: 72px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(31,118,82,.12); background: rgba(255,255,255,.86); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 30; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #2d8964, #15593e); box-shadow: 0 8px 20px rgba(31,118,82,.2); }
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: .01em; }
.brand-subtitle { color: var(--muted); font-size: 11px; margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; position: relative; }
.live-chip { display: flex; align-items: center; gap: 7px; border: 1px solid #d8e8df; padding: 7px 10px; border-radius: 999px; color: #4a6557; font-size: 12px; background: #fbfefc; }
.live-chip span { width: 7px; height: 7px; border-radius: 50%; background: #39a46f; box-shadow: 0 0 0 4px #e4f5eb; }
.avatar-button { width: 38px; height: 38px; border: 0; cursor: pointer; border-radius: 12px; background: #253c32; color: white; font-size: 12px; font-weight: 800; }
.account-menu { position: absolute; right: 0; top: 49px; width: 230px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 18px 50px rgba(26,48,37,.14); display: flex; flex-direction: column; z-index: 50; }
.account-menu strong { font-size: 14px; }
.account-menu > span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; margin: 4px 0 12px; }
.account-menu a { text-decoration: none; display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid #edf1ee; color: #53665c; font-size: 13px; }

.workspace { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 230px minmax(0,1fr); }
.sidebar { padding: 25px 18px; border-right: 1px solid var(--line); background: rgba(251,253,251,.75); }
.primary-action { width: 100%; border: 0; border-radius: 12px; padding: 12px 16px; color: white; background: var(--green); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; cursor: pointer; box-shadow: 0 7px 16px rgba(31,118,82,.16); transition: .2s ease; }
.primary-action:hover { background: var(--green-dark); transform: translateY(-1px); }
.batch-action { width: 100%; margin-top: 8px; padding: 10px; display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid #cfdfd5; border-radius: 10px; background: white; color: var(--green); font-size: 12px; font-weight: 700; cursor: pointer; }
.success-banner { max-width: 1500px; margin: 0 auto 12px; padding: 11px 14px; border-radius: 10px; background: #e1f2e8; color: #205d40; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.success-banner button { border: 0; background: transparent; cursor: pointer; }
.entry-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.entry-fields:disabled { opacity: .65; }
.date-mode { display: flex; gap: 8px; margin-bottom: 12px; }
.date-mode button { flex: 1; padding: 9px 5px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #65776c; font-size: 12px; cursor: pointer; }
.date-mode button[aria-pressed="true"] { background: #e4f2e9; border-color: #74ac8c; color: var(--green); font-weight: 700; }
.multi-date-picker { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.picker-heading button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: white; display: grid; place-items: center; cursor: pointer; }
.picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.picker-weekday { text-align: center; font-size: 10px; color: var(--muted); padding: 4px; }
.picker-grid button { height: 32px; border: 1px solid transparent; border-radius: 8px; background: #f6f9f7; color: #344f40; cursor: pointer; font-size: 12px; }
.picker-grid .picker-outside { color: #a1ada5; background: #fcfdfc; }
.picker-grid button[aria-pressed="true"] { background: var(--green); color: white; border-color: var(--green-dark); font-weight: 800; }
.picker-grid button:focus-visible { outline: 2px solid #86b99b; outline-offset: 1px; }
.selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 12px 0 8px; color: #5f7769; font-size: 11px; }
.selection-heading button { border: 0; background: transparent; color: var(--green); font-size: 11px; cursor: pointer; }
.selected-dates { display: flex; flex-wrap: wrap; gap: 5px; max-height: 100px; overflow-y: auto; }
.selected-dates button { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #cce3d5; border-radius: 6px; background: #f0f8f3; font-size: 10px; color: #286449; cursor: pointer; }
.selected-dates p { margin: 0; font-size: 11px; color: var(--muted); }
.side-section { margin-top: 27px; }
.side-section h2 { margin: 0 8px 9px; color: #87948d; display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.side-item, .legend-item { border: 0; width: 100%; border-radius: 9px; padding: 8px 9px; display: flex; align-items: center; gap: 9px; text-align: left; background: transparent; color: #58685f; font-size: 13px; cursor: pointer; margin: 2px 0; }
.side-item:hover, .legend-item:hover { background: #eef4f0; }
.side-item.active, .legend-item.selected { background: #e6f1ea; color: #1d6648; font-weight: 700; }
.side-item > span:last-child:not(.member-name) { margin-left: auto; color: #8b9991; font-size: 11px; }
.member-dot { width: 23px; height: 23px; flex: 0 0 23px; border-radius: 7px; display: grid; place-items: center; background: #dce9e1; color: #306449; font-size: 10px; font-style: normal; font-weight: 800; }
.member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-item i { width: 10px; height: 10px; border-radius: 3px; }
.legend-all { background: linear-gradient(135deg, var(--green) 50%, var(--purple) 50%); }
.legend-shift { background: var(--green); }
.legend-leave { background: var(--purple); }
.sync-note { margin-top: 30px; padding: 13px; border-radius: 12px; border: 1px solid #d9e9df; display: flex; align-items: flex-start; gap: 9px; color: #397054; background: #f3faf6; }
.sync-note svg { flex: 0 0 auto; margin-top: 2px; }
.sync-note p { margin: 0; font-size: 11px; line-height: 1.55; color: #6a7e72; }
.sync-note strong { color: #2a6648; font-size: 12px; }

.content { padding: 34px 38px 50px; min-width: 0; }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; max-width: 1500px; margin: 0 auto 20px; }
.eyebrow { margin: 0 0 5px !important; color: #68907a !important; font-weight: 800; font-size: 10px !important; letter-spacing: .15em; }
.page-heading h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; font-weight: 800; }
.page-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.summary-strip { display: flex; align-items: center; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 14px; padding: 5px; }
.summary-strip > div { min-width: 106px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; border-right: 1px solid #e7ede9; color: #789087; }
.summary-strip > div:last-child { border-right: 0; }
.summary-strip span { display: flex; flex-direction: column; color: #7a8981; font-size: 10px; }
.summary-strip strong { color: var(--ink); font-size: 17px; line-height: 1.05; }

.calendar-card { max-width: 1500px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 17px; border: 1px solid #d9e4dd; background: rgba(255,255,255,.92); box-shadow: 0 18px 60px rgba(47,78,61,.07); }
.calendar-toolbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--line); }
.month-controls { display: flex; align-items: center; gap: 5px; }
.month-controls button, .refresh-button { border: 1px solid #dce5df; height: 32px; border-radius: 9px; background: white; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; cursor: pointer; color: #52645a; font-size: 12px; }
.month-controls button:not(.today-button) { width: 32px; padding: 0; }
.month-controls button:hover, .refresh-button:hover { background: #f1f7f3; }
.today-button { font-weight: 700; }
.refresh-button:disabled { opacity: .65; cursor: default; }
.weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.weekday-row { border-bottom: 1px solid var(--line); background: #fbfcfb; }
.weekday-row > div { height: 35px; display: flex; align-items: center; justify-content: center; color: #7b8880; font-size: 11px; font-weight: 700; }
.weekday-row .weekend { color: #9b745b; }
.calendar-grid { grid-template-rows: repeat(6, minmax(88px, 1fr)); min-height: min(69vh, 720px); }
.day-cell { min-width: 0; padding: 7px; border-right: 1px solid #e4ebe6; border-bottom: 1px solid #e4ebe6; background: white; transition: background .15s; }
.day-cell:nth-child(7n) { border-right: 0; }
.day-cell:nth-last-child(-n+7) { border-bottom: 0; }
.day-cell:hover { background: #fbfdfb; }
.day-cell.outside { background: #fafbfa; }
.day-cell.outside .day-number { color: #b6c0ba; }
.day-cell.today { background: #f5fbf7; box-shadow: inset 0 0 0 1px #8fc5a5; }
.day-number-row { height: 24px; display: flex; align-items: center; justify-content: space-between; }
.day-number { width: 25px; height: 25px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: transparent; color: #56645c; font-size: 11px; }
.day-number:hover { background: #e2f1e8; color: var(--green); }
.today .day-number { color: white; background: var(--green); font-weight: 800; }
.day-number-row > span { color: var(--green); font-size: 9px; font-weight: 800; }
.events-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.event-pill { border: 0; min-width: 0; height: 24px; padding: 0 5px; border-radius: 6px; display: flex; align-items: center; gap: 4px; cursor: pointer; text-align: left; font-size: 10px; transition: .15s; }
.event-pill:hover { filter: brightness(.97); transform: translateY(-1px); }
.event-pill i { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 5px; }
.event-pill.shift { color: #255c43; background: var(--green-soft); }
.event-pill.shift i { background: var(--green); }
.event-pill.leave { color: #61418d; background: var(--purple-soft); }
.event-pill.leave i { background: var(--purple); }
.event-pill[data-color="green"], .color-choice[data-color="green"] { --event-bg: #e2f2e9; --event-text: #255c43; --event-dot: #1f7652; }
.event-pill[data-color="blue"], .color-choice[data-color="blue"] { --event-bg: #e5efff; --event-text: #244d87; --event-dot: #3269b2; }
.event-pill[data-color="purple"], .color-choice[data-color="purple"] { --event-bg: #efe8fa; --event-text: #61418d; --event-dot: #7151a8; }
.event-pill[data-color="amber"], .color-choice[data-color="amber"] { --event-bg: #fff0dc; --event-text: #7c4a15; --event-dot: #a86a20; }
.event-pill[data-color="rose"], .color-choice[data-color="rose"] { --event-bg: #fce6ed; --event-text: #86374f; --event-dot: #b24467; }
.event-pill[data-color="slate"], .color-choice[data-color="slate"] { --event-bg: #e8edf2; --event-text: #415364; --event-dot: #5f7387; }
.event-pill[data-color]:not([data-color="auto"]) { background: var(--event-bg); color: var(--event-text); }
.event-pill[data-color]:not([data-color="auto"]) i { background: var(--event-dot); }
.event-color-field { margin-bottom: 17px; }
.color-field-label { display: block; font-size: 12px; color: #53655b; font-weight: 700; margin-bottom: 8px; }
.color-options { display: flex; flex-wrap: wrap; gap: 6px; }
.color-choice { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #dce5df; border-radius: 8px; background: white; color: #53655b; font-size: 11px; cursor: pointer; }
.color-choice[aria-pressed="true"] { border-color: var(--event-dot, #456c59); background: var(--event-bg, #edf4ef); box-shadow: 0 0 0 1px var(--event-dot, #456c59); }
.color-swatch { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--event-dot, linear-gradient(135deg, #1f7652 50%, #7151a8 50%)); color: white; flex-shrink: 0; }
.color-preview { margin-top: 9px; display: flex; align-items: center; gap: 9px; color: #7b8c82; font-size: 11px; }
.color-preview .event-pill { min-width: 145px; height: 28px; cursor: default; }
.color-preview .event-title { display: inline; }
.event-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-title { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-pill time { margin-left: auto; opacity: .7; font-size: 9px; }
.more-events { border: 0; padding: 2px 5px; background: transparent; color: #77877e; font-size: 9px; text-align: left; }
.loading-layer { position: absolute; inset: 56px 0 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 9px; background: rgba(255,255,255,.72); color: #547263; font-size: 13px; backdrop-filter: blur(2px); }
.empty-hint { position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #87958d; font-size: 12px; pointer-events: none; }
.empty-hint svg { color: #aac2b5; }
.empty-hint button { border: 0; color: var(--green); background: transparent; font-weight: 700; cursor: pointer; pointer-events: auto; }
.error-banner { margin: 10px 12px 0; padding: 9px 11px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; color: #8b3d32; background: #fff0ed; font-size: 12px; }
.error-banner button { border: 0; background: transparent; cursor: pointer; }
.spinning { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 22px; display: grid; place-items: center; background: rgba(13,31,22,.46); backdrop-filter: blur(5px); }
.modal { width: min(560px,100%); max-height: calc(100vh - 44px); overflow-y: auto; border-radius: 20px; border: 1px solid rgba(255,255,255,.7); background: #fff; box-shadow: 0 30px 80px rgba(13,36,24,.28); }
.modal-header { padding: 22px 23px 16px; display: flex; align-items: flex-start; justify-content: space-between; }
.modal-header p { margin: 0 0 4px; color: #7c8b83; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.modal-header h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.icon-button { width: 34px; height: 34px; border: 1px solid #e2e8e4; border-radius: 9px; background: #fafcfa; cursor: pointer; display: grid; place-items: center; }
.edit-context { margin: 0 23px 12px; padding: 8px 10px; border-radius: 8px; color: #697b71; background: #f5f8f6; font-size: 11px; }
.edit-context span { padding: 2px 6px; border-radius: 999px; margin-right: 6px; font-weight: 700; }
.edit-context .shift { color: var(--green); background: var(--green-soft); }
.edit-context .leave { color: var(--purple); background: var(--purple-soft); }
.modal form { padding: 0 23px 23px; }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; border-radius: 12px; background: #f2f5f3; margin-bottom: 17px; }
.type-switch button { height: 39px; border: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; background: transparent; color: #738179; cursor: pointer; }
.type-switch button.active { color: #1f694a; background: #fff; box-shadow: 0 3px 10px rgba(45,75,58,.08); font-weight: 800; }
.type-switch button.active.leave { color: var(--purple); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { color: #53655b; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.field input, .field textarea { width: 100%; border: 1px solid #dce5df; border-radius: 10px; background: #fcfdfc; padding: 10px 11px; outline: none; color: #263d32; font-size: 13px; transition: .15s; }
.field input { height: 42px; }
.field textarea { resize: vertical; min-height: 74px; }
.field input:focus, .field textarea:focus { border-color: #62a580; box-shadow: 0 0 0 3px #e7f3ec; background: white; }
.modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; padding-top: 17px; border-top: 1px solid #e9eeeb; }
.modal-actions > div { display: flex; gap: 8px; }
.cancel-button, .save-button, .delete-button { height: 39px; border-radius: 10px; padding: 0 15px; cursor: pointer; font-size: 12px; font-weight: 700; }
.cancel-button { border: 1px solid #dce4df; background: white; color: #617168; }
.save-button { border: 0; background: var(--green); color: white; min-width: 100px; }
.delete-button { border: 1px solid #f0d5d0; background: #fff7f5; color: #a8493e; display: flex; align-items: center; gap: 6px; }
.save-button:disabled, .delete-button:disabled { opacity: .55; cursor: default; }

@media (max-width: 1020px) {
  .workspace { grid-template-columns: 188px minmax(0,1fr); }
  .content { padding: 28px 20px 40px; }
  .summary-strip > div { min-width: 90px; padding: 8px; }
  .event-title, .event-pill time { display: none; }
}

@media (max-width: 760px) {
  .topbar { padding: 0 16px; }
  .live-chip { display: none; }
  .workspace { display: block; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 13px 16px; display: flex; gap: 8px; overflow-x: auto; }
  .primary-action { width: auto; flex: 0 0 auto; padding-inline: 14px; }
  .batch-action { width: auto; flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
  .side-section { margin: 0; display: flex; gap: 5px; }
  .side-section h2, .member-dot, .sync-note { display: none; }
  .side-item, .legend-item { width: auto; white-space: nowrap; margin: 0; border: 1px solid #e0e8e3; background: white; }
  .side-item:not(:first-of-type) { display: none; }
  .content { padding: 23px 12px 36px; }
  .page-heading { align-items: flex-start; }
  .page-heading > div:first-child p:last-child { display: none; }
  .summary-strip { display: none; }
  .calendar-card { border-radius: 13px; overflow-x: auto; }
  .calendar-toolbar, .weekday-row, .calendar-grid { min-width: 740px; }
  .calendar-grid { min-height: 640px; }
  .modal-backdrop { padding: 10px; align-items: end; }
  .modal { max-height: calc(100vh - 20px); border-radius: 18px 18px 12px 12px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
}

/* This calendar lives inside the dashboard's own navigation and header. */
.app-shell { min-height:0; }
.app-shell > .topbar { display:none; }
.workspace { min-height:0; grid-template-columns:200px minmax(0,1fr); }
.content { padding:22px 20px 30px; }
.page-heading h1 { font-size:30px; }
.calendar-grid { min-height:620px; }
.more-events { cursor:pointer; font-weight:700; color:#226c4a; }
.more-events:hover { text-decoration:underline; }
.calendar-grid .event-pill { height:auto; min-height:37px; flex-wrap:wrap; align-content:center; padding:3px 5px; gap:1px 4px; }
.calendar-grid .event-pill .event-name { max-width:calc(100% - 12px); }
.calendar-grid .event-pill .event-title { display:block; width:100%; padding-left:9px; font-size:9px; }
.calendar-grid .event-pill time { display:block; margin:0 0 0 9px; width:100%; }
@media (max-width:760px) {
  .workspace { display:block; }
  .sidebar { display:flex; flex-wrap:wrap; overflow:visible; gap:8px; }
  .side-section { width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
  .side-section h2 { display:flex; width:100%; margin:7px 2px 2px; }
  .side-item:not(:first-of-type) { display:flex; }
  .summary-strip { display:flex; flex-wrap:wrap; }
  .summary-strip > div { min-width:76px; }
  .page-heading { flex-wrap:wrap; }
  .content { padding:16px 10px 28px; }
}