@timelinekit/core 1.0.0 → 1.0.5

package/styles/ec.scss

@@ -0,0 +1,1225 @@
+.ec-host {
+    display: block;
+    height: 100%;
+    overflow: hidden;
+
+    *, *::before, *::after {
+        box-sizing: border-box;
+    }
+}
+
+.ec-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    color: var(--ec-content-text, #333333);
+    background: var(--ec-content-bg, #ffffff);
+    outline: none;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: var(--ec-scrollbar-thumb, #c1c1c1);
+        border-radius: 4px;
+    }
+    &::-webkit-scrollbar-track {
+        background: var(--ec-scrollbar-track, #f1f1f1);
+    }
+}
+
+// ─── Sidebar ───────────────────────────────────
+
+.ec-sidebar {
+    width: var(--ec-sidebar-width, 256px);
+    flex-shrink: 0;
+    border-right: 1px solid var(--ec-sidebar-border, #e0e0e0);
+    background: var(--ec-sidebar-bg, #ffffff);
+    color: var(--ec-sidebar-text, #333333);
+    overflow-y: auto;
+}
+
+// ─── Main area ─────────────────────────────────
+
+.ec-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+}
+
+// ─── Toolbar ───────────────────────────────────
+
+.ec-toolbar {
+    display: flex;
+    align-items: center;
+    height: var(--ec-toolbar-height, 48px);
+    padding: 0 12px;
+    background: var(--ec-toolbar-bg, #ffffff);
+    border-bottom: 1px solid var(--ec-toolbar-border, #e0e0e0);
+    flex-shrink: 0;
+    gap: 8px;
+    user-select: none;
+}
+
+.ec-toolbar-nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-right: auto;
+}
+
+.ec-toolbar-btn {
+    border: none;
+    background: transparent;
+    color: var(--ec-toolbar-btn-color, #555555);
+    cursor: pointer;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+
+    &:hover {
+        background: var(--ec-toolbar-btn-hover-bg, #f0f0f0);
+    }
+}
+
+.ec-toolbar-nav-btn {
+    font-size: 22px;
+    line-height: 1;
+    width: 32px;
+    height: 32px;
+}
+
+.ec-toolbar-today {
+    font-weight: 500;
+}
+
+.ec-toolbar-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--ec-toolbar-text, #333333);
+    padding: 0 8px;
+    white-space: nowrap;
+}
+
+.ec-toolbar-views {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.ec-toolbar-view-btn {
+    &.ec-active {
+        background: var(--ec-toolbar-active-bg, #e8f0fe);
+        color: var(--ec-toolbar-active-text, #1a73e8);
+    }
+}
+
+// ─── View container ────────────────────────────
+
+.ec-view-container {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+// ─── Month view ────────────────────────────────
+
+.ec-month-view {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.ec-month-header {
+    display: flex;
+    background: var(--ec-header-bg, #ffffff);
+    border-bottom: 1px solid var(--ec-header-border, #e0e0e0);
+    flex-shrink: 0;
+}
+
+.ec-month-header-cell {
+    flex: 1;
+    text-align: center;
+    padding: 6px 0;
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+    color: var(--ec-header-text, #555555);
+}
+
+.ec-month-grid {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.ec-month-week {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    position: relative;
+}
+
+.ec-month-day {
+    flex: 1;
+    border-right: 1px solid var(--ec-grid-line, #e0e0e0);
+    border-bottom: 1px solid var(--ec-grid-line, #e0e0e0);
+    overflow: hidden;
+    min-width: 0;
+    cursor: default;
+
+    &:last-child {
+        border-right: none;
+    }
+
+    &:hover {
+        background: var(--ec-hover-bg, rgba(0, 0, 0, 0.04));
+    }
+
+    &.ec-today {
+        background: var(--ec-today-bg, #e8f0fe);
+    }
+
+    &.ec-month-day-drag {
+        background: var(--ec-drag-highlight, rgba(3, 155, 229, 0.15));
+    }
+
+    &.ec-other-month {
+        background: var(--ec-other-month-bg, #fafafa);
+
+        .ec-month-day-header {
+            color: var(--ec-other-month-text, #b0b0b0);
+        }
+    }
+}
+
+.ec-month-day-header {
+    padding: 4px 6px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--ec-content-text, #333333);
+    height: var(--ec-day-header-height, 24px);
+    line-height: calc(var(--ec-day-header-height, 24px) - 8px);
+}
+
+.ec-month-day-entries {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ec-entry-gap, 2px);
+    padding: 0 2px;
+    overflow: hidden;
+}
+
+// ─── Entry elements ────────────────────────────
+
+.ec-entry {
+    height: var(--ec-entry-height, 22px);
+    line-height: var(--ec-entry-height, 22px);
+    border-radius: var(--ec-entry-radius, 4px);
+    padding: 0 4px;
+    font-size: 11px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    flex-shrink: 0;
+    user-select: none;
+
+    &:hover {
+        opacity: 0.85;
+    }
+}
+
+.ec-entry-multiday {
+    background: var(--ec-entry-chip-bg, #d3e3fd);
+    color: var(--ec-entry-chip-text, #1b4fa3);
+}
+
+.ec-entry-single {
+    background: var(--ec-entry-chip-bg, #d3e3fd);
+    color: var(--ec-entry-chip-text, #1b4fa3);
+}
+
+// ─── Response status modifiers ────────────────
+
+// Tentative: diagonal stripes over transparent background
+.ec-entry-tentative {
+    background: repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 2px,
+        var(--ec-entry-stripe-color, #d3e3fd) 2px,
+        var(--ec-entry-stripe-color, #d3e3fd) 4px
+    ) !important;
+}
+
+// Needs action: outline only, dashed border
+.ec-entry-needs-action {
+    background: var(--ec-content-bg, #ffffff) !important;
+    border: 1px dashed var(--ec-entry-status-color, #999999);
+    border-left: var(--ec-entry-accent-width, 3px) dashed var(--ec-entry-status-color, #999999);
+}
+
+// Declined: outline only, muted text, strikethrough
+.ec-entry-declined {
+    background: var(--ec-content-bg, #ffffff) !important;
+    opacity: var(--ec-declined-opacity, 0.55);
+
+    .ec-tg-entry-title,
+    & {
+        text-decoration: line-through;
+    }
+}
+
+// ─── Entry icons ──────────────────────────────────
+
+.ec-entry-icon {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: text-bottom;
+    flex-shrink: 0;
+    margin-right: 3px;
+
+    svg {
+        width: 14px;
+        height: 14px;
+    }
+}
+
+.ec-entry-multiday .ec-entry-icon svg,
+.ec-entry-single .ec-entry-icon svg {
+    width: 12px;
+    height: 12px;
+}
+
+.ec-month-day-more {
+    padding: 0 6px;
+    font-size: 11px;
+    color: var(--ec-more-text, #555555);
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+// ─── Mini calendar (sidebar) ───────────────────
+
+.ec-mini-calendar {
+    padding: 12px;
+    user-select: none;
+}
+
+.ec-mini-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.ec-mini-nav-btn {
+    border: none;
+    background: transparent;
+    color: var(--ec-sidebar-text, #333333);
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    font-size: 16px;
+    line-height: 28px;
+    text-align: center;
+    padding: 0;
+
+    &:hover {
+        background: var(--ec-mini-hover-bg, #f0f0f0);
+    }
+}
+
+.ec-mini-title {
+    flex: 1;
+    border: none;
+    background: transparent;
+    color: var(--ec-sidebar-text, #333333);
+    cursor: pointer;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    text-align: center;
+    padding: 4px 0;
+    border-radius: 4px;
+
+    &:hover {
+        background: var(--ec-mini-hover-bg, #f0f0f0);
+    }
+}
+
+.ec-mini-daynames {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: 2px;
+}
+
+.ec-mini-dayname {
+    text-align: center;
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--ec-sidebar-text, #333333);
+    line-height: 24px;
+
+    &.ec-mini-weekend {
+        color: var(--ec-mini-weekend-text, #777777);
+    }
+}
+
+.ec-mini-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.ec-mini-row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    border: 1px solid transparent;
+    border-radius: 14px;
+
+    &.ec-mini-week-selected {
+        border-color: var(--ec-mini-selected-text, #1a73e8);
+    }
+}
+
+// ─── Day cells ─────────────────────────────────
+
+.ec-mini-day {
+    border: none;
+    background: transparent;
+    color: var(--ec-sidebar-text, #333333);
+    cursor: pointer;
+    font: inherit;
+    font-size: 11px;
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    padding: 0;
+    border-radius: 50%;
+    position: relative;
+    justify-self: center;
+
+    &:hover {
+        background: var(--ec-mini-hover-bg, #f0f0f0);
+    }
+
+    &.ec-mini-other-month {
+        color: var(--ec-mini-other-month-text, #b0b0b0);
+    }
+
+    &.ec-mini-weekend {
+        color: var(--ec-mini-weekend-text, #777777);
+    }
+
+    // Today: filled circle
+    &.ec-mini-today {
+        background: var(--ec-mini-today-bg, #1a73e8);
+        color: var(--ec-mini-today-text, #ffffff);
+        font-weight: 600;
+
+        &:hover {
+            opacity: 0.85;
+        }
+    }
+
+    // Selected day (viewMode = day)
+    &.ec-mini-selected:not(.ec-mini-today) {
+        background: var(--ec-mini-selected-bg, #e8f0fe);
+        color: var(--ec-mini-selected-text, #1a73e8);
+        font-weight: 600;
+    }
+
+
+    // Event dot indicator
+    &.ec-mini-has-events::after {
+        content: '';
+        position: absolute;
+        bottom: 2px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: var(--ec-mini-dot-color, #1a73e8);
+    }
+
+    &.ec-mini-today.ec-mini-has-events::after {
+        background: var(--ec-mini-today-dot, #ffffff);
+    }
+}
+
+// ─── Month picker mode ─────────────────────────
+
+.ec-mini-grid-months {
+    .ec-mini-row {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.ec-mini-month {
+    border: none;
+    background: transparent;
+    color: var(--ec-sidebar-text, #333333);
+    cursor: pointer;
+    font: inherit;
+    font-size: 12px;
+    padding: 10px 0;
+    border-radius: 16px;
+    text-align: center;
+
+    &:hover {
+        background: var(--ec-mini-hover-bg, #f0f0f0);
+    }
+
+    &.ec-mini-selected {
+        background: var(--ec-mini-selected-bg, #e8f0fe);
+        color: var(--ec-mini-selected-text, #1a73e8);
+        font-weight: 600;
+    }
+}
+
+// ─── Calendar list (sidebar) ──────────────────
+
+.ec-calendar-list {
+    padding: 12px;
+    border-top: 1px solid var(--ec-sidebar-border, #e0e0e0);
+}
+
+.ec-calendar-list-header {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--ec-cal-list-header-text, #555555);
+    margin-bottom: 8px;
+    letter-spacing: 0.5px;
+}
+
+.ec-calendar-list-items {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.ec-calendar-list-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 4px;
+    border-radius: 4px;
+    cursor: default;
+
+    &:hover {
+        background: var(--ec-mini-hover-bg, #f0f0f0);
+
+        .ec-calendar-list-remove {
+            opacity: 1;
+        }
+    }
+}
+
+.ec-calendar-list-checkbox {
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    border: 2px solid;
+    flex-shrink: 0;
+    cursor: pointer;
+    padding: 0;
+    position: relative;
+
+    &.ec-checked::after {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 0px;
+        width: 5px;
+        height: 9px;
+        border: solid #ffffff;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+    }
+}
+
+.ec-calendar-list-name {
+    flex: 1;
+    font-size: 13px;
+    color: var(--ec-sidebar-text, #333333);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+}
+
+.ec-calendar-list-remove {
+    border: none;
+    background: transparent;
+    color: var(--ec-sidebar-text, #333333);
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    padding: 0 2px;
+    opacity: 0;
+    flex-shrink: 0;
+    border-radius: 3px;
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.1);
+    }
+}
+
+.ec-calendar-list-add {
+    border: none;
+    background: transparent;
+    color: var(--ec-sidebar-text, #333333);
+    cursor: pointer;
+    font: inherit;
+    font-size: 13px;
+    padding: 6px 4px;
+    margin-top: 4px;
+    border-radius: 4px;
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+        background: var(--ec-mini-hover-bg, #f0f0f0);
+    }
+}
+
+// ─── Agenda view ──────────────────────────────
+
+.ec-agenda-view {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.ec-agenda-scroll {
+    flex: 1;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: var(--ec-scrollbar-thumb, #c1c1c1);
+        border-radius: 4px;
+    }
+    &::-webkit-scrollbar-track {
+        background: var(--ec-scrollbar-track, #f1f1f1);
+    }
+}
+
+.ec-agenda-day {
+    &:not(:first-child) {
+        border-top: 1px solid var(--ec-grid-line, #e0e0e0);
+    }
+}
+
+.ec-agenda-day-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: var(--ec-agenda-day-header-bg, #f8f9fa);
+    border-bottom: 1px solid var(--ec-grid-line, #e0e0e0);
+}
+
+.ec-agenda-day-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--ec-agenda-day-header-text, #333333);
+}
+
+.ec-agenda-day-date {
+    font-size: 14px;
+    color: var(--ec-agenda-day-header-text, #333333);
+    opacity: 0.6;
+}
+
+.ec-agenda-today-badge {
+    background: var(--ec-tg-today-circle, #1a73e8);
+    color: var(--ec-tg-today-circle-text, #ffffff);
+    font-size: 10px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.ec-agenda-entries {
+    display: flex;
+    flex-direction: column;
+}
+
+.ec-agenda-entry {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: var(--ec-agenda-entry-height, 48px);
+    padding: 0 14px;
+    cursor: pointer;
+    user-select: none;
+    border-bottom: 1px solid var(--ec-grid-line, #e0e0e0);
+    position: relative;
+
+    // Override generic .ec-entry styles
+    font-size: 13px;
+    white-space: normal;
+    text-overflow: unset;
+    border-radius: 0;
+    line-height: 1.4;
+    overflow: visible;
+    // Suppress inline outline from JS — use ::after pseudo-element instead
+    outline: none !important;
+
+    &:hover {
+        background: var(--ec-agenda-entry-hover-bg, rgba(0, 0, 0, 0.04));
+        opacity: 1;
+    }
+
+    // Selection / keyboard-focus ring via pseudo-element
+    // — only :focus-visible (no flash on mousedown)
+    // — full height, small side inset
+    &[aria-selected="true"],
+    &:focus-visible {
+        z-index: 1;
+        box-shadow: inset 0 0 0 2px var(--ec-selected-outline, #1a73e8);
+    }
+
+    // Needs-action: uniform 2px dashed border for larger agenda rows
+    &.ec-entry-needs-action {
+        border: 1px dashed var(--ec-entry-status-color, #999999);
+    }
+}
+
+.ec-agenda-entry-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.ec-agenda-entry-time {
+    min-width: 120px;
+    font-size: 12px;
+    color: var(--ec-tg-gutter-text, #888888);
+    flex-shrink: 0;
+}
+
+.ec-agenda-entry-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--ec-content-text, #333333);
+}
+
+.ec-agenda-entry-location {
+    font-size: 12px;
+    color: var(--ec-tg-gutter-text, #888888);
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.ec-agenda-empty {
+    padding: 48px 14px;
+    text-align: center;
+    color: var(--ec-agenda-empty-text, #999999);
+    font-size: 14px;
+}
+
+// ─── Time grid (shared by week + day view) ─────
+
+.ec-week-view,
+.ec-day-view {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+// Scroll container — wraps header, allday, and body
+.ec-tg-scroll {
+    flex: 1;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: var(--ec-scrollbar-thumb, #c1c1c1);
+        border-radius: 4px;
+    }
+    &::-webkit-scrollbar-track {
+        background: var(--ec-scrollbar-track, #f1f1f1);
+    }
+}
+
+// Header row (day names + numbers) — sticky inside scroll container
+.ec-tg-header {
+    display: flex;
+    border-bottom: 1px solid var(--ec-header-border, #e0e0e0);
+    background: var(--ec-header-bg, #ffffff);
+    position: sticky;
+    top: 0;
+    z-index: 4;
+}
+
+.ec-tg-gutter-corner {
+    width: var(--ec-tg-gutter-width, 60px);
+    flex-shrink: 0;
+}
+
+.ec-tg-day-header {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 0;
+    min-width: 0;
+    border-left: 1px solid var(--ec-grid-line, #e0e0e0);
+
+    &.ec-tg-today {
+        color: var(--ec-tg-today-text, #1a73e8);
+    }
+}
+
+.ec-tg-day-name {
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+    color: inherit;
+}
+
+.ec-tg-day-number {
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: inherit;
+}
+
+.ec-tg-today-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--ec-tg-today-circle, #1a73e8);
+    color: var(--ec-tg-today-circle-text, #ffffff);
+}
+
+// All-day section — always visible, sticky below header
+.ec-tg-allday {
+    display: flex;
+    border-bottom: 1px solid var(--ec-header-border, #e0e0e0);
+    background: var(--ec-header-bg, #ffffff);
+    position: sticky;
+    z-index: 3;
+    min-height: var(--ec-tg-allday-min-height, 28px);
+    max-height: var(--ec-tg-allday-max-height, 120px);
+}
+
+.ec-tg-allday-row {
+    flex: 1;
+    display: flex;
+    min-width: 0;
+    overflow-y: auto;
+}
+
+.ec-tg-allday-cell {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 2px;
+    min-width: 0;
+    border-left: 1px solid var(--ec-grid-line, #e0e0e0);
+
+    &.ec-tg-allday-drag {
+        background: var(--ec-drag-highlight, rgba(3, 155, 229, 0.15));
+    }
+}
+
+// Body (gutter + content, no own scroll)
+// margin-top: -1px overlaps first slot border with allday border-bottom,
+// so the sticky allday (higher z-index) hides the duplicate border
+.ec-tg-body {
+    display: flex;
+    margin-top: -1px;
+}
+
+// Time gutter
+.ec-tg-gutter {
+    width: var(--ec-tg-gutter-width, 60px);
+    flex-shrink: 0;
+}
+
+.ec-tg-gutter-slot {
+    // Same border-top as content slots so horizontal lines span full width
+    border-top: 1px dashed var(--ec-tg-slot-border, #e0e0e0);
+
+    &.ec-tg-gutter-hour {
+        border-top: 1px solid var(--ec-tg-slot-hour-border, #e0e0e0);
+    }
+}
+
+.ec-tg-gutter-label {
+    padding: 2px 8px 0 4px;
+    font-size: 11px;
+    color: var(--ec-tg-gutter-text, #888888);
+    line-height: 1;
+    white-space: nowrap;
+}
+
+// Content area (columns)
+.ec-tg-content {
+    flex: 1;
+    display: flex;
+    min-width: 0;
+}
+
+.ec-tg-column {
+    flex: 1;
+    position: relative;
+    min-width: 0;
+    border-left: 1px solid var(--ec-grid-line, #e0e0e0);
+
+    &.ec-tg-today {
+        background: var(--ec-tg-today-bg, rgba(26, 115, 232, 0.04));
+    }
+}
+
+// Slot grid lines — horizontal: hour=solid, sub-hour=dashed
+.ec-tg-slot {
+    border-top: 1px dashed var(--ec-tg-slot-border, #e0e0e0);
+
+    &.ec-tg-slot-hour {
+        border-top: 1px solid var(--ec-tg-slot-hour-border, #e0e0e0);
+    }
+}
+
+// Timed entries (absolute positioned within column)
+.ec-tg-entry {
+    position: absolute;
+    left: 0;
+    right: 0;
+    border-radius: var(--ec-entry-radius, 4px);
+    padding: 2px 4px;
+    font-size: 11px;
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    background: var(--ec-entry-chip-bg, #d3e3fd);
+    color: var(--ec-entry-chip-text, #1b4fa3);
+    border-left: var(--ec-entry-accent-width, 3px) solid var(--ec-tg-entry-accent, #1b66c9);
+    z-index: 1;
+
+    &:hover {
+        opacity: 0.9;
+        z-index: 2;
+    }
+}
+
+.ec-tg-entry-title {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ec-tg-entry-time {
+    font-size: 10px;
+    opacity: 0.85;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// Resize handles on timed entries
+.ec-tg-entry-resize-handle {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 6px;
+    z-index: 2;
+
+    // Enlarged invisible hit area for easier grabbing (touch + mouse)
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    &.ec-tg-entry-resize-handle-top {
+        top: 0;
+        cursor: n-resize;
+    }
+
+    &.ec-tg-entry-resize-handle-bottom {
+        bottom: 0;
+        cursor: s-resize;
+    }
+}
+
+// Entry dragging state (dimmed original)
+.ec-entry-dragging {
+    opacity: 0.4;
+}
+
+// Drag preview (cloned entry shown at target position)
+.ec-entry-drag-preview {
+    opacity: 0.7;
+    pointer-events: none;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+}
+
+// Suppress hover effects during drag
+body.ec-dragging {
+    .ec-month-day,
+    .ec-tg-allday-cell,
+    .ec-tg-column,
+    .ec-entry {
+        pointer-events: none;
+    }
+}
+
+// Swipe navigation snap-back animation
+.ec-view-container.ec-swipe-transition {
+    transition: transform 0.2s ease-out;
+}
+
+// Drag-to-create preview
+.ec-tg-drag-preview {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background: var(--ec-drag-highlight, rgba(3, 155, 229, 0.15));
+    border-radius: var(--ec-entry-radius, 4px);
+    border-left: var(--ec-entry-accent-width, 3px) solid var(--ec-tg-entry-accent, #1b66c9);
+    z-index: 5;
+    pointer-events: none;
+    font-size: 11px;
+    color: var(--ec-content-text, #333333);
+    padding: 2px 4px;
+    font-weight: 500;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+// Sidebar toggle button (hidden on desktop, shown on mobile via .ec-mobile)
+.ec-toolbar-sidebar-toggle {
+    display: none;
+}
+
+// Sidebar backdrop overlay (mobile only)
+.ec-sidebar-backdrop {
+    display: none;
+}
+
+// ─── Mobile layout ───────────────────────────────
+// Applied via .ec-mobile class on wrapper (detected by ResizeObserver)
+
+.ec-mobile {
+    position: relative;
+
+    // Sidebar: slide-in overlay instead of inline
+    .ec-sidebar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        z-index: 20;
+        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+        transform: translateX(-100%);
+        transition: transform 0.25s ease;
+
+        &.ec-sidebar-open {
+            transform: translateX(0);
+        }
+    }
+
+    // Backdrop behind sidebar
+    .ec-sidebar-backdrop {
+        display: block;
+        position: absolute;
+        inset: 0;
+        z-index: 19;
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    // Toolbar: taller with larger touch targets
+    .ec-toolbar {
+        height: 56px;
+        padding: 0 8px;
+    }
+
+    .ec-toolbar-sidebar-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        font-size: 20px;
+        flex-shrink: 0;
+    }
+
+    .ec-toolbar-nav-btn {
+        width: 44px;
+        height: 44px;
+        font-size: 24px;
+        line-height: 44px;
+    }
+
+    .ec-toolbar-btn {
+        min-height: 44px;
+    }
+
+    .ec-toolbar-today {
+        padding: 8px 12px;
+    }
+
+    .ec-toolbar-title {
+        font-size: 16px;
+        padding: 0 4px;
+    }
+
+    // Mini calendar: larger day cells for touch
+    .ec-mini-day {
+        width: 36px;
+        height: 36px;
+        line-height: 36px;
+        font-size: 13px;
+    }
+
+    .ec-mini-nav-btn {
+        width: 36px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+    .ec-mini-row {
+        border-radius: 18px;
+    }
+
+    // Week view is too cramped on mobile — hide the button
+    .ec-toolbar-view-btn[data-view-mode="week"] {
+        display: none;
+    }
+
+    // Month view entries: taller for touch
+    .ec-entry {
+        height: 28px;
+        line-height: 28px;
+        font-size: 12px;
+    }
+
+    // Agenda view: larger touch targets
+    .ec-agenda-entry {
+        height: 56px;
+        padding: 0 12px;
+    }
+
+    .ec-agenda-day-header {
+        padding: 12px;
+    }
+
+    // Calendar list checkbox: larger
+    .ec-calendar-list-checkbox {
+        width: 20px;
+        height: 20px;
+    }
+
+    .ec-calendar-list-item {
+        padding: 6px 4px;
+    }
+
+    .ec-calendar-list-remove {
+        opacity: 1;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+// ─── Tooltip ──────────────────────────────────────
+
+.ec-tooltip {
+    position: absolute;
+    z-index: 15;
+    background: var(--ec-tooltip-bg, var(--ec-content-bg, #ffffff));
+    color: var(--ec-tooltip-text, var(--ec-content-text, #333333));
+    border: 1px solid var(--ec-tooltip-border, var(--ec-grid-line, #e0e0e0));
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 8px 12px;
+    max-width: 300px;
+    pointer-events: none;
+    font-size: 12px;
+    line-height: 1.4;
+}
+
+.ec-tooltip-title {
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 4px;
+}
+
+.ec-tooltip-row {
+    display: flex;
+    gap: 6px;
+}
+
+.ec-tooltip-label {
+    color: var(--ec-tooltip-label, #888888);
+    flex-shrink: 0;
+}
+
+.ec-tooltip-value {
+    color: var(--ec-tooltip-text, var(--ec-content-text, #333333));
+}
+
+// Now line (current time indicator)
+.ec-tg-now-line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: var(--ec-tg-now-line-height, 2px);
+    background: var(--ec-tg-now-line, #ea4335);
+    z-index: 3;
+    pointer-events: none;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: -5px;
+        top: calc(var(--ec-tg-now-line-height, 2px) / 2 - 5px);
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--ec-tg-now-line, #ea4335);
+    }
+}