html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  color: #111827;
}
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color: #111827;
  background-color: #ffffff;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: #ffffff;
  color: #111827;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 0;
  border: 1px solid #d0d5dd;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #f8fafc;
  color: #111827;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
button:hover {
  border-color: #2563eb;
  background-color: #e0e7ff;
}
button:focus,
button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}
.button__login{ background:transparent;  color:white; padding:6px 10px; border-radius:6px; cursor:pointer }
.button__logout{ background:transparent; color:white; padding:6px 10px; border-radius:6px; cursor:pointer }
.toolbar{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(90deg,#4777d6,#5064f8); color:#fff }
.toolbar h1{ margin:0; font-size:18px }
.toolbar label{ font-size:14px }

/* Dropdown menu for header hamburger */
.header-menu {
	position: absolute;
	right: 8px;
	top: 48px;
	background: var(--slist-bg, #fff);
	border: 1px solid rgba(16,24,40,0.06);
	box-shadow: 0 6px 18px rgba(16,24,40,0.06);
	border-radius: 8px;
	padding: 8px;
	z-index: 9999;
	min-width: 160px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.header-menu .menu-item{
	background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(247,249,252,0.2));
	border: 1px solid transparent;
	padding: 8px 10px;
	border-radius: 8px;
	color: #111827;
	cursor: pointer;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:8px;
	transition: all 160ms ease;
}

.header-menu .menu-item:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(16,24,40,0.06);
	border-color: rgba(80,100,248,0.12);
}

.hamburger-button {
	background: transparent;
	border: 1px solid transparent;
	padding: 6px 10px;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
}

.hamburger-button:hover{
	background: rgba(255,255,255,0.06);
}

/* expand animation */
@keyframes dropdown-expand {
	from { height: 0; opacity: 0 }
	to { height: 200px; opacity: 1 }
}

.header-menu {
	animation: dropdown-expand 180ms ease forwards;
	overflow-y: auto;
	max-height: calc(100vh - 80px); /* stop it from going offscreen */
}
#root {
  margin: 0; 
  --header-height: 64px;
  text-align: left;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.hidden {
  display: none !important;
}

.flex-col{
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
}
.active-flex{
  display: flex;    
}
.disabled{
  display: none;
}
.subApp {
  margin: 0px; 
  padding: 0%; 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  overflow: hidden;
}
.previewImage{
  width: auto;
  max-height: 75%;
  margin-top: 15px;
  
}
.previewImageSmall{
  max-height: 25vh !important;
}
.toolbar {
  color:white;
  display: flex; 
  width: 100%; 
  height: 55px; 
  background-color: #4777d6; 
  justify-content: center; 
  align-items: center;
  display:  flex;
  flex-direction: row;
}
.toolbarSpacer{
  flex-grow: 1;
}
.toolbar label {
  position: absolute;
  left: 10px;
}
.toolbar button {

  right:10px;
  border-radius: 2px;
  background-color: #4777d6; 
}
.toolbar button:hover{
  background-color: #d1d9e6;
}
.sub_toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  gap: 10px;
  background: #1f2937;
  justify-content: flex-start;
  align-items: center;
  color: #e2e8f0;
  margin: 0;
  border-bottom: 1px solid rgba(30, 41, 59, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.sub_toolbar h3,
.sub_toolbar label {
  color: inherit;
}
.sub_toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: linear-gradient(180deg, rgba(39, 52, 73, 0.96), rgba(33, 44, 62, 0.94));
  color: #f8fafc;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  min-height: 32px;
}
.sub_toolbar button:hover {
  background: linear-gradient(180deg, rgba(59, 104, 168, 0.96), rgba(48, 86, 150, 0.94));
  border-color: rgba(147, 197, 253, 0.5);
  color: #f8fafc;
  transform: none;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
}
.sub_toolbar button:focus-visible{
  outline: 2px solid rgba(56, 189, 248, 0.9);
  outline-offset: 2px;
}
.customFileUpload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  text-align: center;
  width: 100%;
}
input[type="file"] {
  display: none;
}
.file_preview{
  display: flex; flex-direction: column; align-items: center; overflow: auto;
}
.relative{
  position: relative;
}
.file_uploader {
  width: 100%;
}


/* S_list specific styles have been moved to src/components/sList/sList.css */:root{
  --slist-bg: #ffffff;
  --slist-contrast: #f7f9fb;
  --slist-accent: #5064f8;
  --slist-border: rgba(16,24,40,0.06);
  --slist-muted: #6b7280;
  --slist-radius: 12px;
  --slist-shadow: 0 6px 18px rgba(16,24,40,0.06);
}

.slist {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #111827;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* ensure this component can shrink inside flex containers and allow children to scroll */
  height: 100%;
  min-height: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  
}

.slist .sub_toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  background: #1f2937;
  border-radius: 0;
  border-bottom: 1px solid rgba(30, 41, 59, 0.55);
  border-left: 1px solid rgba(30, 41, 59, 0.32);
  border-right: 1px solid rgba(30, 41, 59, 0.32);
  color:#e2e8f0;
}

.slist .sub_toolbar button{
  background: linear-gradient(180deg, rgba(39, 52, 73, 0.96), rgba(33, 44, 62, 0.94));
  border: 1px solid rgba(148, 163, 184, 0.4);

  border-radius:8px;
  color:#f8fafc;
  font-weight:600;
  letter-spacing:0.01em;
  line-height:1.2;
  cursor:pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  box-shadow: none;
}

.slist .sub_toolbar button:hover{
  background: linear-gradient(180deg, rgba(59, 104, 168, 0.96), rgba(48, 86, 150, 0.94));
  border-color: rgba(147, 197, 253, 0.5);
  color: #ffffff;
  transform: none;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
}
.slist .sub_toolbar button:focus-visible{
  outline:2px solid rgba(56, 189, 248, 0.9);
  outline-offset:2px;
}
.slist .card_list{
  border: 1px solid var(--slist-border);
  border-radius: calc(var(--slist-radius) - 4px);
  box-shadow: var(--slist-shadow);
  /* width: 100%; */
  /* fill parent and allow internal scrolling */
  flex: 1 1 auto;
  min-height: 0;
  /* ensure vertical scrolling inside the card when content overflows */
  overflow-y: auto;
  overflow-x: hidden;
  /* do not force 100% height; let flexbox allocate remaining space so header stays visible */
  /* height intentionally unset to avoid overflow stacking beyond parent */
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  background: var(--slist-bg);
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

.slist .card_item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:10px;
  cursor:pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(247,249,252,0.2));
  border: 1px solid transparent;
}

.slist .card_item:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}

.slist .card_item .slist-option{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

.slist .card_item .slist-indicator{
  width:20px;
  height:20px;
  border-radius:6px;
  border:1px solid rgba(148,163,184,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:#ffffff;
  background: transparent;
  transition: all 140ms ease;
}

.slist .card_item .slist-indicator.selected{
  background: var(--slist-accent);
  border-color: rgba(80,100,248,0.9);
}

.slist .card_item .slist-label-text{
  font-weight:600;
  color:#0f172a;
  flex:1 1 auto;
  word-break:break-word;
}

.slist .card_item .meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.slist .card_item .name{
  font-weight:600;
  color:#0f172a;
}

.slist .card_item .muted{
  font-size:12px;
  color:var(--slist-muted);
}

.slist .selected_card{
  background: linear-gradient(90deg, rgba(80,100,248,0.06), rgba(80,100,248,0.02));
  border: 1px solid rgba(80,100,248,0.12);
}

/* Selected duplicate state: use orange accent instead of blue */
.slist .selected_card--duplicate{
  background: linear-gradient(180deg, rgba(251,146,60,0.06), rgba(251,146,60,0.02));
  border: 1px solid rgba(251,146,60,0.14);
}

.slist .selected_card--duplicate .slist-indicator.selected{
  background: #f59e0b; /* amber */
  border-color: rgba(245,158,11,0.9);
}

.slist .selected_card--duplicate .slist-label-text{
  color: #92400e; /* darker orange */
}
.calendar-picker{
  min-width: 200px;
  display:flex;
  flex-direction: column;
  height:100%;
  min-height:0;
  /* width: 100%; */

}
.calendar-picker h3{ margin: 8px 0; font-weight:700; color:#0b1120; letter-spacing:0.015em; }
.calendar-picker > .slist{ flex:1 1 auto; min-height:0; display:flex; }
.calendar-picker .card_list{ flex:1 1 auto; min-height:0 }
.calendar-picker .picker-loading{ padding:12px 0; color:#4b5563; font-size:14px }

/* Soft-select / card-item styling (scoped to calendar-picker)
   Mirrors the visual style used by the event picker / sList component
   but scoped under .calendar-picker to avoid global collisions. */
.calendar-picker .slist .card_list{
  border: 1px solid rgba(16,24,40,0.06);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  /* width: 100%; */
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  background: #ffffff;
}

.calendar-picker .slist .card_item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:10px;
  cursor:pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(247,249,252,0.2));
  border: 1px solid transparent;
}

.calendar-picker .slist .card_item:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}


.calendar-picker .slist .card_item .slist-option{
  cursor:pointer;
}

.calendar-picker .slist .card_item .slist-indicator{
  border-radius:50%;
}

.calendar-picker .slist .selected_card{
  background: linear-gradient(90deg, rgba(80,100,248,0.06), rgba(80,100,248,0.02));
  border: 1px solid rgba(80,100,248,0.12);
}
.events-widget {
  background: var(--card-bg, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 16px;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.events-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.events-widget-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.events-widget-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.events-widget-nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.events-widget-calendar-select {
  min-width: 180px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.85);
  color: #0f172a;
  font-size: 14px;
  line-height: 1.3;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.events-widget-calendar-select:focus {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}

.events-widget-calendar-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.events-widget-date {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}

.events-widget-nav-button {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.events-widget-nav-button:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #2563eb;
}

.events-widget-nav-button:disabled {
  opacity: 0.35;
  cursor: default;
  background: rgba(148, 163, 184, 0.05);
  border-color: rgba(148, 163, 184, 0.18);
}

.events-widget-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.events-widget-count {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent, #2563eb);
  line-height: 1;
}

.events-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow: auto;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.events-widget-item {
  position: relative;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  z-index: 0;
}

.events-widget-item:last-child {
  border-bottom: none;
}

.events-widget-item--new {
  border-bottom: none;
  background: linear-gradient(180deg, rgba(71, 119, 214, 0.05), rgba(80, 100, 248, 0.08));
  box-shadow: 0 0 0 1px rgba(80, 100, 248, 0.18), 0 6px 18px rgba(71, 119, 214, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 8px;
}

.events-widget-item--new::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(80, 100, 248, 0.18), 0 0 24px rgba(71, 119, 214, 0.16);
  opacity: 0.65;
  pointer-events: none;
  z-index: -1;
}

.events-widget-item--new:first-child {
  margin-top: 3px;
}

.events-widget-item--new:last-child {
  margin-bottom: 2px;
}

.events-widget-item--new + .events-widget-item:not(.events-widget-item--new) {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.events-widget-item--new .events-widget-item-title {
  color: #5064f8;
}

.events-widget-item--new .events-widget-item-time {
  color: rgba(80, 100, 248, 0.8);
}

/* Duplicate items highlighted in orange */
.events-widget-item--duplicate {
  border-bottom: none;
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.06), rgba(251, 146, 60, 0.10));
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.22), 0 6px 18px rgba(251, 146, 60, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 8px;
}

.events-widget-item--duplicate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(251, 146, 60, 0.18), 0 0 24px rgba(251, 146, 60, 0.16);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

.events-widget-item--duplicate:first-child {
  margin-top: 3px;
}

.events-widget-item--duplicate:last-child {
  margin-bottom: 2px;
}

.events-widget-item--duplicate + .events-widget-item:not(.events-widget-item--duplicate) {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.events-widget-item--duplicate .events-widget-item-title {
  color: #b45309; /* orange-700 */
}

.events-widget-item--duplicate .events-widget-item-time {
  color: rgba(245, 158, 11, 0.85); /* amber-500 */
}

/* Selected item visual (when user selects an event in the picker or preview) */
.events-widget-item--selected {
  border-bottom: none;
  background: linear-gradient(180deg, rgba(99,102,241,0.03), rgba(99,102,241,0.02));
  box-shadow: 0 0 0 1px rgba(99,102,241,0.04);
  border-radius: 6px;
  padding: 11px 13px;
  margin: 4px 6px;
}

.events-widget-item--selected .events-widget-item-title {
  color: #1f2937;
}

.events-widget-edit-btn{
  background: transparent;
  border: 1px solid rgba(15,23,42,0.06);
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.events-widget-edit-btn:hover{ background: rgba(15,23,42,0.03); }

.events-widget-item-title {
  font-weight: 600;
  color: #0f172a;
}

.events-widget-item-time {
  font-size: 12px;
  color: #64748b;
}

.events-widget-empty,
.events-widget-loading {
  font-size: 14px;
  color: #64748b;
}


.events-widget-error {
  padding: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 0.95rem;
}
.events-widget-list::-webkit-scrollbar {
  width: 6px;
}

.events-widget-list::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.4);
  border-radius: 999px;
}

@media (max-width: 640px) {
  .events-widget {
    padding: 14px;
  }

  .events-widget-count {
    font-size: 32px;
  }

  .events-widget-nav {
    justify-content: flex-start;
  }

  .events-widget-calendar-select {
    min-width: 100%;
  }
}
.event-picker{ flex:1; min-width:200px; width:100%; display: flex; flex-direction: column; height:100%; min-height:0 }
.event-picker h3{ margin: 8px 0; font-weight:700; color:#0b1120; letter-spacing:0.015em; }
.event-picker > .slist{ flex:1 1 auto; min-height:0; display:flex; }
.event-picker .card_list{ flex:1 1 auto; min-height:0 }
.event-color-swatch{ width:16px; height:16px; border-radius:999px; border:1px solid rgba(148,163,184,0.45); background:transparent; display:inline-block; flex-shrink:0; }
.event-color-swatch.none{ border-style:dashed; }

.edit-form{ display:flex; flex-direction:column; gap:14px; }
.edit-form .form-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; }
.edit-form .form-field input,
.edit-form .form-field textarea{ font-size:14px; padding:6px 8px; border:1px solid #cbd5f5; border-radius:6px; background:#fff; width:100%; box-sizing:border-box; }
.edit-form .form-field textarea{ resize:vertical; min-height:96px; }
.edit-form .field-label{ font-size:12px; font-weight:600; color:#0f172a; text-transform:none; }
.edit-form .date-time-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.edit-form .date-time-grid{ display:grid; gap:10px; flex:1 1 260px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.edit-form .reminder-toggle{ display:flex; align-items:center; gap:8px; font-size:12px; }

.color-picker-block{ display:flex; flex-direction:column; gap:8px; }
.color-picker-grid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.color-option{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; font-size:12px; cursor:pointer; transition:border-color 0.15s ease, box-shadow 0.15s ease; }
.color-option .color-swatch{ width:18px; height:18px; border-radius:999px; border:1px solid rgba(148,163,184,0.45); background:transparent; flex-shrink:0; }
.color-option.selected{ border-color:#4f46e5; box-shadow:0 0 0 1px rgba(79,70,229,0.35); }
.color-option.selected .color-swatch{ border-color:#4f46e5; }
.color-option:hover{ border-color:#6366f1; }
.color-option:focus-visible{ outline:2px solid #6366f1; outline-offset:2px; }
.color-label{ font-weight:500; color:#0f172a; }
:root{
  --modal-bg: #ffffff;
  --modal-overlay: rgba(2,6,23,0.55);
  --modal-border: rgba(16,24,40,0.06);
  --modal-radius: 12px;
}

.modal-overlay{
  position: fixed; inset: 0; z-index: 1000;
  background: var(--modal-overlay);
  display:flex; align-items: center; justify-content: center;
  padding: 10px;
}

.modal-shell{
  background: var(--modal-bg);
  width: min(680px, 100%);
  max-height: min(80vh, 100%);
  border-radius: var(--modal-radius);
  box-shadow: 0 16px 40px rgba(2,6,23,0.22);
  display:flex; flex-direction: column;
  overflow: hidden;
}

.modal-header{
  display:flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: linear-gradient(180deg, #f7f9fb, transparent);
  border-bottom: 1px solid var(--modal-border);
}
.modal-title{ margin: 0; font-size: 18px; color:#0f172a }
.modal-close{ background: transparent; border: 1px solid transparent; color:#475569; cursor: pointer; padding: 6px; border-radius: 8px }
.modal-close:hover{ background: rgba(80,100,248,0.08); color: #1e293b }

.modal-body{
  padding: 12px 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0;
}

.modal-footer{
  padding: 10px 16px; display:flex; gap:8px; justify-content: flex-end; align-items: center;
  border-top: 1px solid var(--modal-border);
}

/* mobile */
@media (max-width: 600px){
  .modal-shell{ width: 100%; height: auto; max-height: 86vh }
}
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    position: absolute;
    
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    margin-left: -24px;
    margin-top: -24px;;
    text-align: center;
  }
  .loader::before , .loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite ;
  }
  .loader::after{
    border-color: #400ec9;
    animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
    inset: 6px;
  }

  @keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
  }

  @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }.file_uploader{ padding:0; display:flex; flex-direction:column; height:100%; width:100%; box-sizing:border-box; overflow:hidden; position: relative; }
.file_uploader.full-height{ justify-content:flex-start; align-items:stretch }

.uploader-scroll-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 16px;
    /* Smooth scrolling for iOS */
    -webkit-overflow-scrolling: touch; 
}

.customFileUpload { 
    display: inline-flex; 
    gap: 8px; 
    align-items: center; 
    justify-content: center;
    padding: 12px 20px; 
    background: #f1f5f9; 
    color: #334155; 
    border: 1px solid #cbd5e1;
    border-radius: 10px; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 0.95rem; 
    transition: all 0.2s; 
    white-space: nowrap; 
    user-select: none; 
}

.customFileUpload:hover { 
    background: #e2e8f0; 
    border-color: #94a3b8;
    color: #0f172a;
}

.customFileUpload.add-btn { 
    align-self: stretch; 
    min-width: unset; 
    width: 100%;
    margin-bottom: 8px;
    background: #fff;
    border-style: dashed;
    border-width: 2px;
}

.customFileUpload.add-btn:hover {
    border-color: #6366f1;
    background: #eff6ff;
    color: #4338ca;
}

.customFileUpload.attention { 
    background: #fffbeb; 
    border: 1px solid #fcd34d; 
    color: #b45309; 
}
.customFileUpload.autoConvert {
    background: #4f46e5;
    color: white;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
}
.customFileUpload.autoConvert:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

/* Hide the actual input */
#file_upload { display: none; }

.file_preview_grid {
    display: grid;
    /* Use flexible columns with minimum acceptable width */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    width: 100%;
    min-height: 100px; /* reserve space */
}

@media (max-width: 480px) {
    .file_preview_grid {
        grid-template-columns: repeat(2, 1fr); /* Force 2 columns even on small mobile */
    }
}

.preview_item {
    position: relative;
    width: 100%;
    /* Let the aspect ratio adapt slightly or be fixed, 3/4 is good for portrait docs */
    aspect-ratio: 3/4;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.preview_item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.preview-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdf-preview-thumb {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none; /* Prevent interaction within the thumb */
}

.pdf-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    font-weight: bold;
}

.remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    z-index: 2;
}

.preview-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.preview-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    backdrop-filter: blur(2px);
}

.details-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px; /* Added padding */
    border-top: 1px solid #e2e8f0; /* Separator */
    background: #fff; /* Ensure generic background */
    flex-shrink: 0; /* Don't shrink */
}

.details-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem; /* Valid font size to prevent iOS zoom */
    box-sizing: border-box;
}

.autoConvert {
    width: 100%;
    height: 48px;
    font-size: 1.1rem;
    font-weight: 600;
    background: #4f46e5;
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
}
.autoConvert:hover { background: #4338ca; }
.autoConvert.attention { background: #f59e0b; color: white; border: none; }

/* Two-column responsive card layout for the calendar wizard page.
   Cards are resizable by changing flex-basis via a simple CSS variable.
   Layout will be two columns on wider screens and stack on narrow screens.
*/
.calendar-wizard.grid-layout {
  display: flex;
  flex-direction: column;
  padding: 0px;
  /* Use CSS variable for stable app height (set from JS) to avoid iOS 100vh issues */
  height: 100%;
  /* Allow main page to scroll if content forces it (e.g. upload form on mobile) */
  overflow: auto; 
}

.upload-toolbar {
  position: relative;
  flex: 0 0 auto;
  z-index: 20;
  border-bottom: 1px solid rgba(30, 41, 59, 0.55);
  box-shadow: none;
}
.upload-toolbar .sub_toolbar {
  align-items: center;
  gap: 10px;
}
.upload-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 280px;
  min-width: 160px;
}
.upload-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 220px;
}
.upload-title {
  font-size: 18px;
  color: #e2e8f0;
  letter-spacing: 0.01em;
}

/* Upload calendar dropdown styling to match toolbar aesthetics with improved readability */
.upload-calendar-select {
  appearance: none;
  background: linear-gradient(180deg, rgba(248,250,252,0.94), rgba(226,232,240,0.92));
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.55);
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.upload-calendar-select:focus {
  outline: 2px solid rgba(56, 189, 248, 0.9);
  outline-offset: 1px;
}
.restart-btn {
  background: linear-gradient(180deg, rgba(39, 52, 73, 0.96), rgba(33, 44, 62, 0.94));
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #f8fafc;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.restart-btn:hover {
  background: linear-gradient(180deg, rgba(59, 104, 168, 0.96), rgba(48, 86, 150, 0.94));
  border-color: rgba(147, 197, 253, 0.5);
  color: #fff;
  transform: none;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
}
.restart-btn:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.9);
  outline-offset: 2px;
}

/* Page-level subtoolbar sits below the app header and above content */
.page-subtoolbar {
  position: absolute;
  top: var(--header-height, 64px);
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0px;
  pointer-events: none; /* enable children to manage pointer-events when rendered */
  z-index: 60;
}
.page-subtoolbar .sub_toolbar { pointer-events: auto }

.wizard-card {
  background: var(--card-bg, #fff);
  border-radius: 0px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 0px;
  min-width: 250px;
  flex-grow: 1;
  flex-basis: 50%;
  /* layout improvements to support internal scroll areas */
  display: flex;
  flex-direction: column;
  min-height: 0; /* critical: allow children to shrink and scroll */
  /* uniform height: half the available view under header (uses app-height var for iOS stability) */
  height: calc((var(--app-height, 100vh) / 2) - (var(--header-height, 64px) / 2) - 24px);
  overflow-y: hidden; /* parent doesn't scroll; children manage their own scroll */
  overflow-x: hidden; /* prevent horizontal scrollbars */
}

/* Fullscreen upload wrapper: used when upload is the primary interaction */
.upload-full-wrapper {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  /* Use min-height to allow growth, or flex 1 */
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.upload-full { 
  width: 100%;
  height: 100%;
  /* height: calc(100vh - var(--header-height, 64px) - 16px); account for padding */
  padding: 0px;
  box-sizing: border-box;
}

/* specific grid placement */
.upload-card { grid-column: 1 / 2; grid-row: 1 / 2; }
.picker-card { grid-column: 2 / 3; grid-row: 1 / 2; }
.events-card { grid-column: 1 / 2; grid-row: 2 / 3; }
.viewer-card { grid-column: 2 / 3; grid-row: 2 / 3; }

/* @media (max-width: 1200px) {
  .calendar-wizard.grid-layout {
    display: flex;
    flex-direction: column;
  }
  .wizard-card { min-width: 0; height: auto }
} */

/* Selected full card styles */
.selected-full {
  grid-column: 1 / -1 !important; /* span full width */
  grid-row: 1 / 2 !important;
  z-index: 50;
  animation: slideUp 280ms ease forwards;
  transition: box-shadow 240ms ease;
  box-shadow: 0 8px 26px rgba(0,0,0,0.14);
}

/* keep remaining grid below the selected card */
.grid-remaining {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* shrink to up to 3 wide */
  gap: 12px;
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  align-items: start;
}

/* Post-upload grid: top row (calendars + events) and bottom (viewer) */
.post-upload-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.post-upload-grid > div:first-child {
  display: flex;
  gap: 12px;
  align-items: stretch;
  /* Removed min-height: 300px restriction that was forcing the destination bar to be huge */
}

.post-upload-grid .post-left,
.post-upload-grid .post-right {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.post-upload-grid .post-bottom {
  width: 100%;
  min-height: 300px;
}

/* Ensure all wizard-card children inside the post-upload grid have a consistent minimum height */
.post-upload-grid .wizard-card { min-height: 300px }

.post-upload-grid .calendar-area {
  flex: 1 1 auto;
  min-height: 320px;
  display: flex;
}

.post-upload-grid .calendar-area .wizard-card {
  flex: 1 1 auto;
}

.small-card { height: calc((var(--app-height, 100vh) / 2) - (var(--header-height, 64px) / 2) - 24px); }

/* Better touch scrolling on iOS */
.wizard-card {
  -webkit-overflow-scrolling: touch;
}

/* remove outer wrapper styling for components that are already card-like */
.no-wrapper { background: transparent; box-shadow: none; padding: 0 }
.no-wrapper > * { margin: 0 }

@keyframes slideUp {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

/* Center sub_toolbar header when card is full width */
.selected-full .sub_toolbar { display:flex; justify-content:center; align-items:center }
.selected-full .sub_toolbar h3 { margin: 0 }

/* soft theme for text, buttons */
/* .wizard-card, .wizard-card button, .sub_toolbar h3 { color: #333; }
.wizard-card button { background: rgba(107,0,255,0.06); border: 1px solid rgba(107,0,255,0.12); color: #4a148c; padding: 6px 10px; border-radius: 6px }
.wizard-card button:hover { background: rgba(107,0,255,0.10) } */

/* Transient bottom banner for upload success/error */
.cw-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 200; min-width: 320px; max-width: 720px; box-sizing: border-box; }
.cw-banner .inner { padding: 12px 16px; border-radius: 10px; color: white; box-shadow: 0 8px 24px rgba(2,6,23,0.18); transform: translateY(30px); opacity: 0; animation: cw-slide-in 360ms ease forwards; }
.cw-banner.success .inner { background: linear-gradient(90deg,#22c55e,#16a34a); }
.cw-banner.error .inner { background: linear-gradient(90deg,#ef4444,#dc2626); }

@keyframes cw-slide-in {
  from { transform: translateY(18px); opacity: 0 }
  to { transform: translateY(0); opacity: 1 }
}

@keyframes cw-fade-out {
  from { opacity: 1 }
  to { opacity: 0 }
}

/* Upload button disabled styling */
.upload-btn {
  padding: 7px 18px;
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.65);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.96), rgba(37, 99, 235, 0.96));
  color: #f8fafc;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.upload-btn:hover {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.98), rgba(29, 78, 216, 0.98));
  border-color: rgba(147, 197, 253, 0.55);
  transform: none;
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.24);
}
.upload-btn.disabled,
.upload-btn:disabled {
  background: rgba(15, 23, 42, 0.74);
  border-color: rgba(51, 65, 85, 0.55);
  color: #cbd5f5;
  cursor: not-allowed;
}
.upload-btn .disabled-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  opacity: 0.8;
}
.upload-btn .disabled-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Responsive: when viewport height is less than 800px, stack the wizard cards
   into a single column and give each card a minimum height of 400px so the
   three primary panes are rendered vertically. This is CSS-only and allows
   the page to scroll when the combined min-heights exceed the viewport. */
@media (max-height: 799px) {
  .calendar-wizard.grid-layout {
    flex-direction: column;
    /* allow vertical scrolling for stacked cards */
    overflow-y: auto;
  }

  /* Ensure any internal grid/remaining area stacks as column */
  .calendar-wizard.grid-layout .post-upload-grid,
  .calendar-wizard.grid-layout .grid-remaining {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  /* Make each wizard card full width and at least 400px tall */
  .calendar-wizard.grid-layout .wizard-card {
    width: 100%;
    flex-basis: auto;
    flex-grow: 0;
    height: 500px;
    box-sizing: border-box;
    overflow-y: auto; /* allow internal scrolling inside each card */
  }

  /* When upload full is active, keep it full height as before */
  .calendar-wizard.grid-layout .upload-full-wrapper { height: 100% }
}

/* Responsive: collapse post-upload top row into a single column at narrow widths */
@media (max-width: 900px) {
  /* Allow the parent container to flow naturally for stacked items */
  .post-upload-grid > div:first-child {
    flex-direction: column;
    /* Remove large min-height that forces gaps */
    min-height: 0;
  }

  /* The actual cards (EventPicker, EventsWidget) should stack */
  .col-events-list,
  .col-preview-pane {
    flex: 0 0 auto !important; /* Don't force flex-grow */
    width: 100% !important;   /* Full width */
    min-height: 400px;        /* Tall enough to be usable */
    max-height: 60vh;         /* Don't trap scroll on tiny phones */
  }

  /* The destination calendar bar should just be its natural height (auto) */
  .post-upload-grid > div:first-child > div:first-child {
     /* This targets the destination bar specifically if it's the first child, 
        but our structure has the bar separate. 
        Note: The destination bar is distinct in JSX invalidating this assumption.
        Instead, we target the wizard-main-row container below. */
  }

  /* Target the container of the two columns (Event List and Preview) */
  .wizard-main-row {
    flex-direction: column !important;
    height: auto !important; /* Allow growing */
    overflow: visible !important; /* Let body scroll handle overflow */
  }

  .calendar-wizard.grid-layout { 
    overflow-y: auto !important; 
    height: auto !important; /* Unbind from 100% height to allow body scroll */
  }
}

.banner-root{ position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 200; min-width: 320px; max-width: 720px; box-sizing: border-box; }
.banner-inner{ padding: 12px 16px; border-radius: 10px; color: white; box-shadow: 0 8px 24px rgba(2,6,23,0.18); transform: translateY(30px); opacity: 0; animation: banner-slide-in 360ms ease forwards; }
.banner-root.success .banner-inner{ background: linear-gradient(90deg,#22c55e,#16a34a); }
.banner-root.error .banner-inner{ background: linear-gradient(90deg,#ef4444,#dc2626); }
.banner-root.info .banner-inner{ background: linear-gradient(90deg,#2563eb,#1d4ed8); }

@keyframes banner-slide-in { from { transform: translateY(18px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.calendar-viewer-v2{width:100%;border:1px solid rgba(16,24,40,0.06);border-radius:8px;background:#fff;display:flex;flex-direction:column;min-height:0;}
.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;gap:12px;flex-wrap:wrap;}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.toolbar-left{flex:1 1 auto;}
.toolbar-right{justify-content:flex-end;flex:1 1 auto;}
.hour-range-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:8px;padding:6px 10px;border-radius:8px;background:rgba(148,163,184,0.12);}
.hour-range-controls input{appearance:none;-moz-appearance:textfield}
.canvas-toolbar button{padding:6px 10px;border-radius:6px;border:1px solid transparent;background:transparent;cursor:pointer;white-space:nowrap;transition:background-color 120ms ease,border-color 120ms ease;}
.canvas-toolbar button.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;padding:6px 10px;}
.canvas-toolbar button.icon-btn svg{width:16px;height:16px;display:block;}
.canvas-toolbar button.icon-btn .btn-label{font-size:12px;font-weight:600;color:#111827;}
.canvas-toolbar button:hover{background:rgba(80,100,248,0.08);border-color:rgba(80,100,248,0.16);}
.canvas-toolbar button.primary{color:#fff;background:#5064f8;border-color:#5064f8;}
.canvas-toolbar button.primary:hover{background:#4152d6;border-color:#4152d6;}
.canvas-toolbar button:disabled{opacity:0.4;cursor:not-allowed;}
.canvas-body{flex:1 1 auto;overflow:auto;padding:0 12px 12px;-webkit-overflow-scrolling:touch}
.calendar-viewer-v2 canvas{display:block;max-width:100%;}
.calendar-viewer-v2.fullscreen{height:100%;}
.canvas-status{padding:0 12px 12px;color:#6b7280;font-size:14px;}

.upcoming-footer{display:flex;flex-wrap:wrap;align-items:flex-start;border-top:1px solid #eef2ff;padding:8px 14px;gap:10px;background:#fbfdff}
.upcoming-left{flex:0 0 auto;padding:4px;font-weight:700;color:#374151}
.upcoming-row{display:flex;flex:1 1 auto;gap:10px;min-width:0;overflow-x:auto;padding-bottom:2px}
.upcoming-cell{flex:0 0 auto;min-width:140px;padding:4px 4px 2px;border-left:1px solid transparent}
.upcoming-pill{background:linear-gradient(90deg, rgba(80,100,248,0.08), rgba(80,100,248,0.02));padding:5px 7px;border-radius:6px;margin-bottom:4px;font-weight:600;font-size:11px}

.reminders-pane{border:1px solid #f3f4f6;border-radius:6px;min-height:140px;overflow:hidden;background:#fcfdff;padding:8px;margin-bottom:8px;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;color:#0f172a;-webkit-font-smoothing:antialiased;}
.reminders-row{display:flex;gap:4px;margin-left:82px;padding-right:55px;}
.reminders-header-row{border-bottom:1px solid rgba(16,24,40,0.04);padding-bottom:6px;margin-bottom:6px;flex:0 0 auto;}
.reminders-pane .reminders-row:last-child{flex:1 1 auto;overflow:auto;}
.reminders-header-cell{color:#111827;font-weight:700;padding:6px 4px;font-size:11px;display:flex;align-items:center}
.reminders-cell{flex:1;min-width:0;padding:4px;color:#0f172a;line-height:1.35;}
.toggle-btn{width:34px;height:20px;border-radius:999px;padding:2px;background:#e5e7eb;border:1px solid rgba(16,24,40,0.04);display:inline-flex;align-items:center;cursor:pointer;box-sizing:content-box}
.toggle-btn.on{background:linear-gradient(90deg,#4f46e5,#5b6ef8);border-color:rgba(80,100,248,0.12)}
.toggle-btn .toggle-knob{width:12px;height:12px;border-radius:50%;background:#fff;display:block;margin-left:2px;transition:transform 160ms cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 2px rgba(2,6,23,0.2)}
.toggle-btn.on .toggle-knob{transform:translateX(14px)}
.toggle-btn.off .toggle-knob{transform:translateX(0)}
.toolbar-label{font-size:12px;color:#6b7280;white-space:nowrap;}
.time-follow-toggle{display:flex;align-items:center;gap:8px;margin-left:12px;}

/* subtle highlight for day column in reminders area */
.reminders-pane .reminders-row.reminders-header-row + .reminders-row .reminders-cell.current-day,
.reminders-pane .reminders-row + .reminders-row .reminders-cell.current-day {
	background: rgba(243,244,246,0.6);
}
.all-day-pill{background:linear-gradient(90deg, rgba(80,100,248,0.08), rgba(80,100,248,0.02));padding:5px 7px;border-radius:6px;margin-bottom:4px;font-weight:600;font-size:11px;border:1px solid transparent;color:#1f2937;transition:background-color 120ms ease,border-color 120ms ease;white-space:normal;word-break:break-word;}
.canvas-wrap{position:relative}
.canvas-wrap{min-height:240px}
.time-column{position:absolute;left:12px;top:48px;width:80px}
.time-label{height:60px;padding-top:6px;color:#6b7280;font-size:12px}
.reminders-resizer{height:10px;cursor:row-resize;background:linear-gradient(180deg,#eef2ff,#eaeefb);border-radius:6px;margin:6px 0;border:1px solid #e5e7eb}
.hour-range-controls select{padding:6px 8px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;min-width:64px}
.hour-range-controls label{margin:0}
.canvas-tooltip{position:absolute;pointer-events:none;background:#111827;color:#fff;padding:8px 10px;border-radius:6px;font-size:12px;box-shadow:0 6px 18px rgba(2,6,23,0.2);transform:translate(0,0);z-index:40}
.canvas-tooltip .tooltip-title{font-weight:700;margin-bottom:4px}
.canvas-tooltip .tooltip-time{opacity:0.9;font-size:12px}

@media (max-width:900px){
	.canvas-toolbar{align-items:flex-start;}
	.toolbar-left,.toolbar-right{gap:6px;}
	.toolbar-right{justify-content:flex-start;}
	.hour-range-controls{margin-left:0;flex-basis:100%;justify-content:flex-start;}
	.time-follow-toggle{margin-left:0;}
	.upcoming-row{width:100%;}
	.calendar-viewer-v2 .canvas-body{min-height:360px;}
	.calendar-viewer-v2 .canvas-wrap{min-height:360px;}
	.calendar-viewer-v2 .reminders-pane{min-height:180px;}
}

@media (max-width:600px){
	.canvas-toolbar{padding:8px 12px;gap:8px;}
	.canvas-toolbar button.icon-btn{min-width:32px;padding:6px;}
	.canvas-toolbar button.icon-btn .btn-label{display:none;}
	.hour-range-controls{padding:4px 6px;gap:6px;}
	.hour-range-controls select{padding:4px 6px;}
	.upcoming-cell{min-width:132px;}
	.upcoming-pill{font-size:10.5px;}
	.reminders-header-cell{font-size:11px;}
	.all-day-pill{font-size:10.5px;}
	.calendar-viewer-v2 .reminders-pane{min-height:180px;}
}
.calendar-page { display:flex; flex-direction:column; gap:16px; padding:12px; height:100%; min-height:0 }
.top-row { display:flex; gap:12px; height:50%; align-items:stretch; min-height: 300px; }
.col-half { flex: 1 1 50%; min-width:0; display:flex; flex-direction:column; gap:12px; min-height:0; }
.calendar-area { flex: 1 1 auto; min-height:300px; display:flex; }

@media (max-width: 900px) {
  .top-row { flex-direction:column; min-height: 700px; }
  .col-half { width:100% }
  .calendar-page{ overflow:auto;  }
}
.agent-page {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f8fafc;
  display: flex;
  justify-content: center;
}

.agent-container {
  width: 100%;
  max-width: 800px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.agent-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
}

.agent-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.agent-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reset-btn {
  background: none;
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-btn:hover {
  background-color: #fee2e2;
  color: #ef4444;
  border-color: #ef4444;
}

.agent-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #1e293b;
}

.agent-status {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}

.chat-window {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #f8fafc;
}

.chat-bubble {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease;
}

.chat-bubble.user {
  align-self: flex-end;
}

.chat-bubble.assistant {
  align-self: flex-start;
}

.bubble-content {
  padding: 12px 16px;
  border-radius: 12px;
  line-height: 1.5;
  font-size: 0.95rem;
}

.chat-bubble.user .bubble-content {
  background-color: #4f46e5;
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-bubble.assistant .bubble-content {
  background-color: white;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.chat-bubble.assistant .bubble-content p {
  margin: 0 0 8px 0;
}
.chat-bubble.assistant .bubble-content p:last-child {
  margin: 0;
}

.agent-input-area {
  padding: 16px;
  background: white;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.agent-input-area .attach-btn {
  background: transparent;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.agent-input-area .attach-btn:hover:not(:disabled) {
  background: #f1f5f9;
  color: #4f46e5;
  border-color: #4f46e5;
}

.agent-input-area input {
  flex: 1;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.agent-input-area input:focus {
  border-color: #4f46e5;
}

.agent-input-area button {
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 8px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.agent-input-area button:hover:not(:disabled) {
  background: #4338ca;
}

.agent-input-area button:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

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

.typing .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #94a3b8;
  margin-right: 4px;
  animation: typing 1.4s infinite ease-in-out both;
}

.typing .dot:nth-child(1) { animation-delay: -0.32s; }
.typing .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Markdown Styles */
.markdown-body p {
  margin-bottom: 0.5em;
}
.markdown-body p:last-child {
  margin-bottom: 0;
}
.markdown-body ul, .markdown-body ol {
  padding-left: 20px;
  margin-bottom: 0.5em;
}
.markdown-body strong {
  font-weight: 600;
}
.home-wrap {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.home-heading {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: var(--text-color, #222);
}
.home-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.home-tile {
  width: 260px;
  height: 160px;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.home-tile:focus, .home-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.tile-icon {
  color: var(--accent, #2b7cff);
}
.tile-title {
  font-weight: 600;
  font-size: 16px;
}
.tile-desc {
  font-size: 13px;
  color: #666;
}

@media (max-width: 640px) {
  .home-tile { width: 48%; overflow: auto; }
}
@media (max-width: 900px){
 .home-grid { justify-content: center; overflow: auto; }
}
.home-widget-area { margin-top: 20px }
.adduser-wrap {
  padding: 24px;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-bg, #f8fafc);
}

.adduser-card {
  width: 100%;
  max-width: 560px;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 20px 20px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adduser-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adduser-header .material-symbols-outlined {
  color: var(--accent, #2b7cff);
  font-size: 28px;
}
.adduser-title {
  margin: 0;
  font-size: 22px;
}
.adduser-intro {
  margin: 0;
  color: #555;
  font-size: 14px;
}

.adduser-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-weight: 600;
  font-size: 13px;
}
.input-wrap {
  position: relative;
}
.input-wrap input[type="email"] {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  outline: none;
  background: #fff;
  font-size: 14px;
}
.input-wrap input[type="email"]:focus {
  border-color: var(--accent, #2b7cff);
  box-shadow: 0 0 0 3px rgba(43,124,255,0.12);
}
.input-wrap.has-error input[type="email"] {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10);
}
.valid-indicator {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #10b981;
}
.field-help {
  font-size: 12px;
  color: #6b7280;
}
.field-help.error {
  color: #ef4444;
}

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 100ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary {
  color: #fff;
  background: var(--accent, #2b7cff);
  border-color: var(--accent, #2b7cff);
}
.btn-primary:hover:enabled {
  box-shadow: 0 4px 14px rgba(43,124,255,0.28);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: #111827;
  border: 1px solid rgba(0,0,0,0.12);
}
.btn-ghost:hover {
  background: rgba(0,0,0,0.03);
}

.adduser-footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 12px;
}
.adduser-footnote .material-symbols-outlined {
  font-size: 16px;
}