/* Kalendern i mockupens skal: ett vitt kort med rubrik, vy-segment och
   "Skapa möte", navigering under, legend som filter. Sidopanelens kort
   (Idag, Kommande, Uppmärksamhet) ligger som en rad moduler under. */
.calendar-planner-shell { --kal-ink: #17211a; --kal-muted: #6b7a70; --kal-line: #e3e8e2; --kal-line-2: #eef1ec; --kal-leaf: #3a8874; --kal-leaf-dark: #2f6f5c; max-width: 1180px; margin: 0 auto; }
.calendar-desktop-head { display: none; }
@media (min-width: 1024px) {
  .calendar-desktop-head { display: block; }
  .calendar-hero-copy p span:first-child { display: inline !important; font: inherit; font-size: 12.5px; font-style: normal; }
  .calendar-desktop-workspace { display: grid; gap: 0; background: #fff; border: 1px solid var(--kal-line); border-radius: 16px; box-shadow: 0 3px 12px rgba(40, 70, 40, 0.03); overflow: hidden; }
  .calendar-hero { flex-direction: row; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; }
  .calendar-hero .mod-icon { font-size: 20px; color: #72906e; margin-top: 2px; }
  .calendar-hero-copy { flex: 1; min-width: 0; }
  .calendar-hero-copy .kicker { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a9b83; }
  .calendar-hero-copy h1 { margin: 2px 0 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--kal-ink); }
  .calendar-hero-copy p { margin: 3px 0 0; font: inherit; font-size: 12.5px; font-style: normal; color: var(--kal-muted); display: flex; gap: 8px; flex-wrap: wrap; }
  .calendar-hero-copy p strong { color: #b7791f; font-weight: 500; }
  .calendar-hero-actions { display: flex; align-items: center; gap: 8px; }
  .calendar-view-switch { border-radius: 10px; padding: 3px; box-shadow: none; border-color: var(--kal-line); background: #fbfcfb; }
  .calendar-view-switch a { height: 30px; min-width: 0; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--kal-muted); }
  .calendar-view-switch a.is-active { background: #fff; color: var(--kal-ink); box-shadow: 0 1px 3px rgba(20, 40, 30, 0.12), inset 0 0 0 1px var(--kal-line); }
  .calendar-button { height: 36px; border-radius: 10px; font-size: 13px; font-weight: 500; }
  .calendar-button--secondary { width: 36px; padding: 0; justify-content: center; background: #eef3e9; border: 1px solid #cfe3d8; color: #35604f; }
  .calendar-button--primary { background: var(--kal-leaf-dark); color: #fff; }
  .calendar-filter-strip { padding: 0 18px 8px; gap: 6px; }
  .calendar-filter-chip { height: 26px; padding: 0 10px 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 400; background: transparent; border: 1px solid transparent; color: var(--kal-muted); box-shadow: none; }
  .calendar-filter-chip.is-active { background: var(--kal-line-2); color: var(--kal-ink); }
  .calendar-filter-chip-icon { font-size: 15px; }
  .calendar-filter-action, .calendar-filter-action--passive { font-size: 11.5px; color: var(--kal-muted); }
  .calendar-project-strip, .calendar-mobile-rail { display: none; }
  .calendar-page-grid { grid-template-columns: 1fr; gap: 0; }
  .calendar-content-column { gap: 0; }
  .calendar-command-bar { padding: 8px 18px 10px; border-top: 1px solid var(--kal-line-2); }
  .calendar-period-control { display: flex; align-items: center; gap: 8px; }
  .calendar-period-control h2 { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; color: var(--kal-ink); margin: 0 4px; }
  .calendar-period-arrows a { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--kal-line); background: #fff; display: inline-grid; place-items: center; color: var(--kal-ink); }
  .calendar-today-button { height: 30px; padding: 0 11px; border-radius: 8px; background: #eef3e9; border: 1px solid #cfe3d8; color: #35604f; font-size: 12px; font-weight: 500; }
  .calendar-count { margin-left: auto; font-size: 12px; color: var(--kal-muted); }
  .calendar-main-surface { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--kal-line-2); }
  .calendar-sidebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .calendar-side-card { background: #fff; border: 1px solid var(--kal-line); border-radius: 16px; box-shadow: 0 3px 12px rgba(40, 70, 40, 0.03); }
}


/* Årsvyn: tolv minimånader med prickar (arbete grön, offert blå, möte lila). */
.calendar-year { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 14px 18px 18px; }
.calendar-ymon { display: block; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kal-line-2); background: #fbfcfb; color: var(--kal-ink); text-decoration: none; }
.calendar-ymon:hover { border-color: #cfe3d8; background: #fff; }
.calendar-ymon h4 { margin: 0 0 8px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; }
.calendar-ymon h4 span { font-size: 11px; color: var(--kal-muted); font-weight: 400; }
.calendar-ydots { display: grid; grid-template-columns: repeat(7, 9px); gap: 4px; }
.calendar-ydots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #e3ebd8; }
.calendar-ydots i.out { background: transparent; }
.calendar-ydots i.work { background: var(--kal-leaf); }
.calendar-ydots i.quote { background: #3b6fb0; }
.calendar-ydots i.meeting { background: #8e6bb8; }
.calendar-ydots i.t { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--kal-ink); }
@media (max-width: 1100px) { .calendar-year { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .calendar-year { grid-template-columns: repeat(2, 1fr); } }