/* CalDAV Suite - Roundcube Elastic Skin Styles */
/* Farben aus dem Elastic-Theme (colors.less / dark.less) uebernommen, da das Theme
   keine CSS-Custom-Properties (var(--color-*)) bereitstellt.
   Light: main=#37beff, border=#ddd, font=#22292c, black-shade-bg=#e9ebed
   Dark (html.dark-mode): main=#1c89c2, bg=#21292c, font=#c5d1d3, border=#4d6066, list-border=#2c373a
   Akzent = @color-main (#37beff) / dark @color-dark-main (#1c89c2). */

/* Screen reader only */
.voice { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Skip-Link: beim Tabben sichtbar, springt zum Kalender-Hauptinhalt. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: #37beff;
    color: #fff;
    padding: 0.6em 1em;
    border-radius: 0 0 4px 0;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Taskbar icons - matches Elastic's icon pattern */
#taskmenu .button-calendar::before { content: "\f073"; }
#taskmenu .button-tasks::before { content: "\f0ae"; }

/* Toolbar (respektiert Elastic-Layout; Titel liegt oben, Toolbar darunter) */
/* Toolbar: Outlook-Stil. 3-Spalten-Grid -> links (Heute+Pfeile), Mitte zentriert
   (Zeitraum-Titel), rechts (Ansicht). Keine Ueberlappung, auch bei schmalem Container. */
.caldav-nav { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5em; flex-wrap: nowrap !important; width: 100%; }
.caldav-nav-left { display: flex; align-items: center; gap: 0.25em; justify-self: start; }
.caldav-nav-right { display: flex; align-items: center; gap: 0.25em; justify-self: end; }
#btn-range { font-weight: 600; white-space: nowrap; text-align: center; justify-self: center; min-width: 6em; }
#btn-range:hover { background: rgba(55,190,255,0.12); }
.header .toolbar { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.header .toolbar select { width: auto; min-width: 0; display: inline-block; flex: 0 0 auto; }
.header .toolbar .spacer { width: 1em; }
.view-btn.active { font-weight: 700; background: rgba(55, 190, 255, 0.15); }

/* ---- Calendar Sidebar ---- */
/* Kalenderliste: native .listing fuer selected/Hover. Jeder Eintrag traegt einen
   farbigen Balken (border-left, inline gesetzt) + eine Checkbox (button, klickbar).
   Theme setzt auf li white-space:nowrap + overflow:hidden -> fuer das flex-Layout zuruecksetzen. */
.calendar-item { display: flex !important; align-items: center; gap: 0.6em; padding: 0.45em 0.6em 0.45em 0.9em !important; cursor: pointer; white-space: normal !important; overflow: visible !important; position: relative; }
.calendar-check { flex: 0 0 auto; width: 1.15em; height: 1.15em; box-sizing: border-box; border: 2px solid #888; border-radius: 3px; margin-right: 0.6em; padding: 0; background: transparent; cursor: pointer; }
.calendar-item.checked .calendar-check { background: #37beff; border-color: #37beff; }
.calendar-item.checked .calendar-check::after { content: '\2713'; color: #fff; display: block; text-align: center; font-size: 0.85em; line-height: 1.05em; }
.cal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Month View ---- */
.calendar-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar-month th { text-align: center; padding: 0.5em; font-weight: 600; border-bottom: 2px solid #ddd; }
.calendar-month td { border: 1px solid #ddd; vertical-align: top; min-height: 80px; height: 80px; padding: 2px; cursor: pointer; }
.calendar-month td:hover { background: rgba(0,0,0,0.03); }
.calendar-month .today { background: rgba(55,190,255,0.08); }
.calendar-month .today .day-num { font-weight: 700; color: #37beff; }
.calendar-month .other-month { opacity: 0.4; }
.day-num { display: block; font-size: 0.85em; padding: 2px 4px; }
.month-event { font-size: 0.75em; padding: 1px 4px; margin: 1px 0; border-radius: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.month-event.selected { outline: 2px solid #37beff; outline-offset: -1px; }
.month-event:hover { opacity: 0.8; }
.month-event:focus { outline: 2px solid #37beff; outline-offset: 1px; }
.event-time { color: #666; }

/* ---- Week View ---- */
.week-view { position: relative; }
.week-header { display: flex; border-bottom: 2px solid #ddd; }
.week-header .time-gutter { width: 3em; flex-shrink: 0; }
.week-day-header { flex: 1; min-width: 0; text-align: center; padding: 0.4em; font-weight: 600; }
.week-day-header.today { color: #37beff; }
.week-body { position: relative; overflow-y: auto; max-height: calc(100vh - 120px); }
.week-row { display: flex; border-bottom: 1px solid #eee; height: 40px; }
.week-row .time-gutter { width: 3em; flex-shrink: 0; font-size: 0.75em; text-align: right; padding-right: 4px; color: #888; }
.week-cell { flex: 1; border-left: 1px solid #eee; }
.week-allday { display: flex; border-bottom: 2px solid #ddd; max-height: 120px; overflow-y: auto; }
.week-allday .time-gutter { width: 3em; flex-shrink: 0; font-size: 0.7em; text-align: right; padding-right: 4px; color: #888; padding-top: 4px; }
.week-allday-cell { flex: 1; min-width: 0; border-left: 1px solid #eee; padding: 2px; display: flex; flex-direction: column; gap: 1px; }
.week-allday-event { font-size: 0.72em; padding: 1px 5px; border-radius: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.week-allday-event:focus { outline: 2px solid #37beff; }
.week-cell { flex: 1; min-width: 0; border-left: 1px solid #eee; position: relative; }
.week-event-inline { position: absolute; left: 0; right: 0; z-index: 2; font-size: 0.75em; padding: 2px 4px; overflow: hidden; border-radius: 2px; cursor: pointer; }
.week-event-inline.selected, .week-allday-event.selected { outline: 2px solid #37beff; outline-offset: -1px; }
.week-event-inline:focus { outline: 2px solid #37beff; z-index: 10; }
.week-travel-block { position: absolute; left: 0; right: 0; z-index: 1; font-size: 0.7em; padding: 2px 4px; overflow: hidden; border-radius: 2px; background: rgba(128,128,128,0.2); border-left: 3px solid rgba(128,128,128,0.5); color: #666; font-style: italic; }

/* ---- Day View ---- */
.day-view { position: relative; }
.day-allday { padding: 4px 0 4px 3.2em; border-bottom: 2px solid #ddd; }
.day-allday-event { font-size: 0.85em; padding: 3px 8px; margin: 2px 0; border-radius: 3px; cursor: pointer; }
.day-allday-event:focus { outline: 2px solid #37beff; }
.day-body { overflow-y: auto; max-height: calc(100vh - 160px); }
.day-row { display: flex; border-bottom: 1px solid #eee; height: 40px; }
.day-row .time-gutter { width: 3em; flex-shrink: 0; font-size: 0.75em; text-align: right; padding-right: 4px; color: #888; }
.day-cell { flex: 1; position: relative; }
.day-event-inline { position: absolute; left: 0; right: 0; z-index: 2; font-size: 0.85em; padding: 4px 8px; border-radius: 3px; cursor: pointer; overflow: hidden; }
.day-event-inline.selected, .day-allday-event.selected { outline: 2px solid #37beff; outline-offset: -1px; }
.day-event-inline:focus { outline: 2px solid #37beff; z-index: 10; }

/* ---- List/Agenda View ---- */
/* Auswahl + Aktionen statt sofortigem Edit. */
.list-actions { display: flex; gap: 0.4em; padding: 0.5em 1em; border-bottom: 1px solid #ddd; }
.list-actions .btn { margin: 0; }
.list-actions .btn:disabled { opacity: 0.4; }
.list-actions .btn:not(:disabled) { opacity: 1; }
.list-range { padding: 0.6em 1em; margin: 0; font-size: 1em; font-weight: 600; border-bottom: 2px solid #ddd; }
.list-date { font-size: 0.9em; font-weight: 600; margin: 1.5em 0 0.3em; padding-bottom: 0.3em; border-bottom: 1px solid #ddd; }
/* Tages-Header in der Listenansicht: navigierbares Item, optisch als Datumstrenner. */
.list-day { display: flex; align-items: center; padding: 0.45em 0.6em; font-weight: 600; background: rgba(0,0,0,0.03); border-bottom: 1px solid #ddd; cursor: default; }
.list-day.selected { outline: 2px solid #37beff; outline-offset: -1px; }
.list-event { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.6em; cursor: pointer; }
.list-event.selected { background: rgba(55,190,255,0.12); }
.event-edit { flex: 0 0 auto; margin-left: 0.4em; opacity: 0.4; cursor: pointer; }
.list-event.selected .event-edit { opacity: 1; }
.list-event.selected { background: rgba(55,190,255,0.12); }
#directorylist:focus li[aria-selected="true"] { outline: 2px solid #37beff; outline-offset: -2px; background: rgba(55,190,255,0.12); border-radius: 4px; }
#directorylist:focus li[aria-selected="true"] > a { background: transparent; }
.event-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.list-event .event-time { font-size: 0.85em; color: #666; min-width: 11em; margin-right: 0.5em; white-space: nowrap; flex-shrink: 0; }
.list-event .event-summary { font-weight: 500; flex: 1 1 auto; }
.list-event .event-location { font-size: 0.85em; color: #888; margin-left: 1em; }

/* ---- Tasks ---- */
.tasklist-item { display: flex !important; align-items: center; gap: 0.5em; padding: 0.45em 0.6em 0.45em 0.9em !important; cursor: pointer; white-space: normal !important; overflow: visible !important; }
.tasklist-name { flex: 1; }
.tasklist-check { flex-shrink: 0; width: 1.15em; height: 1.15em; box-sizing: border-box; border: 2px solid #888; border-radius: 3px; position: relative; padding: 0; background: transparent; cursor: pointer; }
.tasklist-item.checked .tasklist-check { background: #37beff; border-color: #37beff; }
.tasklist-item.checked .tasklist-check::after { content: '\2713'; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); font-size: 0.85em; line-height: 1; }
.task-list { list-style: none; padding: 0; margin: 0; }
/* Aufgabe: Kachel-artig, Summary-Zeile + ausklappbare Details bei Auswahl. */
.task-item { display: flex; align-items: flex-start; gap: 0.5em; padding: 0.6em 1em; border-bottom: 1px solid #eee; cursor: pointer; }
.task-item.selected { background: rgba(55,190,255,0.12); }
.task-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 0.15em; }
.task-title-row { display: flex; align-items: center; gap: 0.4em; min-width: 0; line-height: 1.1; }
.task-summary { flex: 0 1 auto; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-details { display: none; margin-top: 0.2em; }
.task-item.selected .task-details { display: block; }
.task-desc { font-size: 0.85em; color: #666; white-space: pre-wrap; word-break: break-word; }
.task-loc { font-size: 0.8em; color: #888; }
.task-item.completed .task-summary { text-decoration: line-through; opacity: 0.5; }
.task-check { flex-shrink: 0; width: 1.1em; height: 1.1em; margin-top: 0; box-sizing: border-box; cursor: pointer; border: 2px solid #888; border-radius: 3px; position: relative; }
.task-item.completed .task-check { background: #37beff; border-color: #37beff; }
.task-item.completed .task-check::after { content: '\2713'; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); font-size: 0.85em; line-height: 1; }
.task-edit { cursor: pointer; }
.task-summary { flex: 0 1 auto; cursor: pointer; }
/* Fälligkeits-Indikator: Kalender-Icon in der Liste, gruen (normal) / rot (ueberfaellig). */
.task-due-indicator { flex: 0 0 auto; color: #41b849; margin-left: 0.4em; font-family: Icons; font-size: 0.85em; }
.task-due-indicator::before { content: "\f133"; }
.task-due-indicator.overdue { color: #ff5552; }
.task-due-detail { font-size: 0.8em; color: #888; }
.task-due-detail.overdue { color: #ff5552; font-weight: 600; }
.task-priority { flex: 0 0 auto; font-size: 0.8em; padding: 2px 4px; border-radius: 2px; }
.task-priority.priority-high { color: #ff5552; }
.task-priority.priority-medium { color: #fb8c00; }
.task-priority.priority-low { color: #41b849; }
.task-edit { flex: 0 0 auto; opacity: 0.4; background: none; border: none; cursor: pointer; font-size: 1.1em; }
.task-item.selected .task-edit { opacity: 1; }
.task-item:hover .task-edit { opacity: 1; }

/* ---- Dialogs ---- */
.propform .prop { margin-bottom: 0.8em; }
.propform label { display: block; font-weight: 500; margin-bottom: 0.2em; }

/* ---- Travel Time Badge ---- */
.event-travel { font-size: 0.8em; padding: 2px 6px; border-radius: 3px; background: rgba(55,190,255,0.15); color: #1c89c2; white-space: nowrap; }

/* ---- Location Autocomplete ---- */
.location-wrap { position: relative; }
.location-results { list-style: none; padding: 0; margin: 0; position: absolute; z-index: 100; left: 0; right: 0; top: 100%; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ddd; border-radius: 0 0 4px 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); display: none; }
.location-results li { padding: 0.5em 0.8em; cursor: pointer; font-size: 0.9em; border-bottom: 1px solid #eee; }
.location-results li:hover, .location-results li.active { background: rgba(55,190,255,0.15); }
.location-results li:focus { outline: 2px solid #37beff; outline-offset: -2px; }
.location-results li.hint { color: #888; cursor: default; }

/* ---- Layout content scroller ---- */
#layout-content .scroller { overflow-y: auto; height: calc(100vh - 110px); position: relative; }
#calendar-grid { position: relative; min-height: 200px; }
#task-list-container { position: relative; min-height: 200px; }
#layout-sidebar .scroller { overflow-y: auto; }
.hint { color: #888; text-align: center; padding: 2em; }
.toggle { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.8em; cursor: pointer; }

/* ===== iMIP/iTIP Kalender-Einladung in der Mailansicht ===== */
.caldav-itip { border: 1px solid #ddd; border-left: 4px solid #37beff; border-radius: 4px; background: #f5fafc; padding: 12px 16px; margin: 0 0 16px 0; }
.caldav-itip-title { font-size: 1.1em; margin: 0 0 8px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.caldav-itip-badge { font-size: .75em; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; background: #37beff; color: #fff; padding: 2px 8px; border-radius: 10px; }
.caldav-itip-details { margin: 0 0 10px 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.caldav-itip-details dt { font-weight: 600; color: #22292c; }
.caldav-itip-details dd { margin: 0; }
.caldav-itip-calsel { margin: 0 0 10px 0; }
.caldav-itip-calsel select { max-width: 320px; }
.caldav-itip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.caldav-itip-actions .btn { cursor: pointer; }
.caldav-itip-actions .btn:disabled { opacity: .55; cursor: default; }
.caldav-itip-actions .btn:focus-visible, .caldav-itip-calsel select:focus-visible { outline: 3px solid #37beff; outline-offset: 2px; }
.caldav-itip-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Dark Mode (Elastic nutzt html.dark-mode, nicht prefers-color-scheme) ---- */
html.dark-mode .calendar-month th { border-color: #4d6066; }
html.dark-mode .calendar-month td { border-color: #2c373a; }
html.dark-mode .calendar-month td:hover { background: rgba(255,255,255,0.03); }
html.dark-mode .calendar-month .today { background: rgba(28,137,194,0.15); }
html.dark-mode .calendar-month .today .day-num { color: #1c89c2; }
html.dark-mode .week-row { border-color: #2c373a; }
html.dark-mode .week-cell { border-color: #2c373a; }
html.dark-mode .week-header, html.dark-mode .week-allday { border-color: #4d6066; }
html.dark-mode .week-day-header { border-color: #4d6066; }
html.dark-mode .list-date { border-color: #4d6066; }
html.dark-mode .list-event { border-color: #2c373a; }
html.dark-mode .list-event:hover { background: rgba(255,255,255,0.03); }
html.dark-mode .task-item { border-color: #2c373a; }
html.dark-mode .task-desc { color: #c5d1d3; }
html.dark-mode .task-loc { color: #8ba3a7; }
html.dark-mode .task-due-detail { color: #c5d1d3; }
html.dark-mode .view-btn.active { background: rgba(28,137,194,0.2); }
html.dark-mode .calendar-item:hover { background: rgba(255,255,255,0.05); }
html.dark-mode .event-time, html.dark-mode .list-event .event-time, html.dark-mode .list-event .event-location { color: #c5d1d3; }
html.dark-mode .month-event .event-time { color: #c5d1d3; }
html.dark-mode .location-results { background: #21292c; border-color: #4d6066; }
html.dark-mode .caldav-itip { background: #21292c; border-color: #4d6066; }
html.dark-mode .caldav-itip-details dt { color: #c5d1d3; }
html.dark-mode .caldav-itip-badge { background: #1c89c2; }
html.dark-mode .task-priority.priority-high { color: #ff8a88; }
html.dark-mode .task-priority.priority-medium { color: #ffb14d; }
html.dark-mode .task-priority.priority-low { color: #7fd985; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .calendar-month td { min-height: 50px; height: 50px; }
    .month-event .event-time { display: none; }
    .month-event .event-title { font-size: 0.7em; }
    .week-view { font-size: 0.85em; }
    .day-view { font-size: 0.9em; }
}

/* ---- Loading Overlay ---- */
.caldav-loading {
    position: absolute;
    inset: 0;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
}
.caldav-spinner {
    width: 2em;
    height: 2em;
    border: 3px solid rgba(55,190,255,0.3);
    border-top-color: #37beff;
    border-radius: 50%;
    animation: caldav-spin 0.8s linear infinite;
}
.caldav-loading-text { font-weight: 600; color: #22292c; }
@keyframes caldav-spin { to { transform: rotate(360deg); } }
html.dark-mode .caldav-loading { background: rgba(33,41,44,0.7); }
html.dark-mode .caldav-loading-text { color: #c5d1d3; }

/* Dialog: Inhalt scrollen statt abgeschnitten (bei schmalen Fenstern) */
.ui-dialog .ui-dialog-content { overflow-y: auto !important; }