:root {
  --primary: #F07C00;
  --secondary: #f7f7f7;
  --grill: #f6ad66;
  --grill-dot: #b6630a;
  --grill-light: #f6ae66d8;
  --back: #F5DEB3;
  --back-light: #f5deb3d0;
  --text: #222;
  --blue: #0078d4;

  --ico-google: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid' viewBox='0 0 256 256'%3E%3Cpath fill='%23FFF' d='M195.368421 60.6315789H60.6315789V195.368421H195.368421z'/%3E%3Cpath fill='%23EA4335' d='M195.368421 256 256 195.368421l-30.315789-5.172416-30.31579 5.172416-5.533259 27.729581z'/%3E%3Cpath fill='%23188038' d='M0 195.368421v40.421053C0 246.955789 9.04421053 256 20.2105263 256h40.4210526l6.2252856-30.315789-6.2252856-30.31579-33.0323915-5.172416L0 195.368421Z'/%3E%3Cpath fill='%231967D2' d='M256 60.6315789V20.2105263C256 9.04421053 246.955789 0 235.789474 0h-40.421053c-3.688839 15.0358547-5.533259 26.1010948-5.533259 33.1957202 0 7.0946254 1.84442 16.2399117 5.533259 27.4358587 13.409565 3.8399077 23.514828 5.7598615 30.31579 5.7598615 6.800961 0 16.906224-1.9199538 30.315789-5.7598615Z'/%3E%3Cpath fill='%23FBBC04' d='M256 60.6315789h-60.631579V195.368421H256z'/%3E%3Cpath fill='%2334A853' d='M195.368421 195.368421H60.6315789V256H195.368421z'/%3E%3Cpath fill='%234285F4' d='M195.368421 0H20.2105263C9.04421053 0 0 9.04421053 0 20.2105263V195.368421h60.6315789V60.6315789H195.368421V0Z'/%3E%3Cpath fill='%234285F4' d='M88.2694737 165.153684c-5.0357895-3.402105-8.5221053-8.370526-10.4252632-14.938947l11.6884211-4.816842c1.0610526 4.042105 2.9136842 7.174737 5.5578947 9.397894 2.6273684 2.223158 5.8273687 3.317895 9.5663157 3.317895 3.823158 0 7.107369-1.162105 9.852632-3.486316 2.745263-2.32421 4.126315-5.288421 4.126315-8.875789 0-3.671579-1.448421-6.669474-4.345263-8.993684-2.896842-2.324211-6.534737-3.486316-10.88-3.486316h-6.7536839v-11.570526H102.72c3.738947 0 6.888421-1.010527 9.448421-3.031579 2.56-2.021053 3.84-4.783158 3.84-8.303158 0-3.132632-1.145263-5.625263-3.435789-7.494737-2.290527-1.869474-5.187369-2.812632-8.707369-2.812632-3.435789 0-6.1642104.909474-8.185263 2.745264-2.0197181 1.840674-3.5381792 4.164731-4.4126316 6.753684l-11.5705263-4.816842c1.5326316-4.345264 4.3452632-8.1852635 8.471579-11.5031583 4.1263157-3.3178947 9.3978947-4.9852631 15.7978949-4.9852631 4.732631 0 8.993684.9094737 12.766316 2.7452631 3.772631 1.8357895 6.736842 4.3789474 8.875789 7.6126316 2.138947 3.2505267 3.2 6.8884207 3.2 10.9305267 0 4.126315-.993684 7.612631-2.981053 10.475789-1.987368 2.863158-4.429473 5.052632-7.326315 6.585263v.690527c3.740515 1.542157 6.989694 4.07512 9.397894 7.326315 2.442106 3.284211 3.671579 7.208421 3.671579 11.789474s-1.162105 8.673684-3.486315 12.261053c-2.324211 3.587368-5.541053 6.416842-9.616843 8.471579-4.092631 2.054736-8.690526 3.099071-13.793684 3.099071-5.9115787.016718-11.3684208-1.684335-16.4042103-5.08644Zm71.7978943-58.00421-12.833684 9.28-6.416842-9.734737L163.84 90.0884211h8.825263v78.3326319h-12.597895v-61.271579Z'/%3E%3C/svg%3E");
  --ico-office: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2075 2499.8'%3E%3Cpath fill='%23eb3c00' d='M0 2016.6V496.8L1344.4 0 2075 233.7v2045.9l-730.6 220.3L0 2016.6l1344.4 161.8V409.2L467.6 613.8v1198.3z'/%3E%3C/svg%3E");
  --ico-outlook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%230072c6' d='M19.484 7.937v5.477l1.916 1.205a.489.489 0 0 0 .21 0l8.238-5.554a1.174 1.174 0 0 0-.959-1.128Z'/%3E%3Cpath fill='%230072c6' d='m19.484 15.457 1.747 1.2a.522.522 0 0 0 .543 0c-.3.181 8.073-5.378 8.073-5.378v10.066a1.408 1.408 0 0 1-1.49 1.555h-8.874v-7.443ZM10.44 12.932a1.609 1.609 0 0 0-1.42.838 4.131 4.131 0 0 0-.526 2.218A4.05 4.05 0 0 0 9.02 18.2a1.6 1.6 0 0 0 2.771.022 4.014 4.014 0 0 0 .515-2.2 4.369 4.369 0 0 0-.5-2.281 1.536 1.536 0 0 0-1.366-.809Z'/%3E%3Cpath fill='%230072c6' d='M2.153 5.155v21.427L18.453 30V2Zm10.908 14.336a3.231 3.231 0 0 1-2.7 1.361 3.19 3.19 0 0 1-2.64-1.318A5.459 5.459 0 0 1 6.706 16.1a5.868 5.868 0 0 1 1.036-3.616 3.267 3.267 0 0 1 2.744-1.384 3.116 3.116 0 0 1 2.61 1.321 5.639 5.639 0 0 1 1 3.484 5.763 5.763 0 0 1-1.035 3.586Z'/%3E%3C/svg%3E");
  --ico-apple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 52.226 52.226'%3E%3Cpath d='M36.802 1.055 36.747 0l-1.05.113c-.103.011-10.252 1.234-10.948 12.581l-.07 1.136 1.136-.077c.116-.008 11.611-.925 10.987-12.698zm-1.981 1.267c-.191 6.838-5.511 8.74-7.953 9.253.93-6.645 5.749-8.67 7.953-9.253z'/%3E%3Cpath d='m46.584 37.517-.639-.207c-3.867-1.25-6.464-4.792-6.464-8.814 0-3.578 2.023-6.778 5.281-8.352l.972-.469-.542-.933c-.232-.4-2.401-3.943-6.983-5.116-3.634-.93-7.72-.107-12.149 2.447-1.875-1.138-8.103-4.418-13.058-1.13-.97.536-11.251 6.695-5.9 23.313.157.372 3.888 9.113 8.303 12.387 1.191 1.138 4.237 2.56 7.718.187.603-.249 4.638-1.802 7.198.017.945.647 2.595 1.38 4.338 1.38 1.322 0 2.697-.421 3.859-1.621.542-.469 5.493-4.888 8.066-11.888l.075-.204-.075-.997zm-9.402 11.598-.077.073c-2.193 2.303-5.518.1-5.641.018-1.308-.93-2.823-1.233-4.244-1.233-2.579 0-4.847.999-4.992 1.064l-.163.092c-3.019 2.107-5.086.253-5.305.042l-.118-.101c-3.993-2.912-7.663-11.507-7.668-11.51-5.008-15.568 4.586-20.66 4.994-20.867l.11-.065c4.647-3.12 11.327 1.396 11.393 1.441l.533.366.552-.333c4.16-2.515 7.914-3.37 11.157-2.539 2.642.676 4.326 2.327 5.15 3.342-3.347 2.051-5.381 5.63-5.381 9.591 0 4.556 2.735 8.604 6.902 10.365-2.565 6.261-7.153 10.213-7.202 10.254z'/%3E%3C/svg%3E");
  --ico-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.147-3.146a.5.5 0 1 1 .707.707l-4 4a.5.5 0 0 1-.707 0l-4-4a.5.5 0 0 1 .707-.707L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");

}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: var(--secondary);
  color: var(--text);
}

header {
  background: var(--primary);
  color: rgb(0, 0, 0);
  padding: 1rem;
  text-align: center;
}

.view-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.view-controls button {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 5px;
  background: white;
  color: var(--primary);
  font-weight: bold;
  cursor: pointer;
}

#current-view {
  font-weight: 600;
  font-size: 20px;
  padding: 0.3rem 0.5rem;
  color: white;
}

.weekday-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fff;
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  padding: 0.4rem;
  border-bottom: 1px solid #ddd;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  overflow-x: auto;
  background: white;
  gap: 1px;
}

.day {
  padding: 0.5rem;
  min-height: 130px;
  background: white;
  border: 1px solid #eee;
  box-sizing: border-box;
}

.date {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 0.25rem;
}

.date.today {
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  display: inline-block;
}


.card {
  border-radius: 6px;
  padding: 4px 6px;
  margin-top: 4px;
  font-size: 25px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.card.grillhendl {
  background: var(--grill-light);
}

.card.backhendl {
  background: var(--back-light);
}

.entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 2px 0;
  margin-top: 10px;
  margin-bottom: 10px;
  white-space: nowrap;
}

.entry-location {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-time {
  flex-shrink: 0;
  font-weight: 500;
  margin-left: 12px;
}

.entry-divider {
  border-bottom: 1px solid #00000040;
  padding-bottom: 4px;
  margin-bottom: 4px;
}


.hidden {
  display: none !important;
}

/*  Mobile Week Strip  */
.mobile-week-nav {
  display: flex;
  overflow-x: auto;
  padding: 6px;
  background: #fff;
  gap: 4px;
  scroll-behavior: smooth;
}

.day-selector {
  flex: 0 0 auto;
  text-align: center;
  font-size: 20px;
  min-width: 40px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #eee;
  position: relative;
  cursor:pointer;
}

.day-selector.active {
  background: var(--primary);
  color: white;
}

.dot-group {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot.grill {
  background: var(--grill-dot);
}

.dot.back {
  background: var(--back);
}

#mobile-day-events {
  padding: 0.5rem;
}

.mobile-card {
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 10px;
  font-size: 25px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.mobile-card:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.mobile-card.grillhendl {
  background: var(--grill-light);
}

.mobile-card.backhendl {
  background: var(--back-light);
}

/* Popup Styles */
.card-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-popup {
  background: white;
  padding: 1rem;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  animation: fadeIn 0.2s ease-in-out;
}

.card-popup h2 {
  margin-top: 0;
}

.card-popup .close-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  float: right;
  cursor: pointer;
  color: #888;
}

.popup-btn {
  display: inline-block;
  padding: 10px;
  font-size: 13px;
  border-radius: 4px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  border: none;
}

.popup-btn:hover {
  background: #d86c00;
}

.popup-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.popup-entry:last-child {
  border-bottom: none;
}

.popup-entry-info {
  flex: 1;
}

.popup-time {
  font-size: 14px;
  margin-bottom: 4px;
}

.popup-location {
  font-size: 14px;
  font-weight: 500;
}

.popup-address {
  font-size: 12px;
  color: #666;
}

.popup-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 60px;
}

.calendar-dropdown {
  position: relative;
  display: inline-block;
}

.calendar-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  min-width: 200px;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.calendar-dropdown.dropdown-open .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 10px center;
  padding-left: 36px;
}

.dropdown-menu a.google    { background-image: var(--ico-google); }
.dropdown-menu a.apple     { background-image: var(--ico-apple); }
.dropdown-menu a.office365 { background-image: var(--ico-office); }
.dropdown-menu a.outlook   { background-image: var(--ico-outlook); }
.dropdown-menu a.download   { background-image: var(--ico-download); }

.dropdown-menu a:hover {
  background-color: #f07c00;
  color: white;
}

#toggle-view {
  font-size: 25px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1050px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 1051px) {
  .mobile-only {
    display: none !important;
  }
}