/**
 * 3task Calendar - Mini Calendar (1.3.0)
 *
 * Same design variables as the main calendar: --tc-accent per calendar,
 * --tc-ev per event color.
 */

.threecal-mini-wrapper {
    --tc-accent: #4f46e5;
    --tc-accent-ink: #ffffff;
    --tc-surface: #ffffff;
    --tc-surface-2: #f5f6fa;
    --tc-text: #141824;
    --tc-muted: #646b7d;
    --tc-border: #e6e8ef;
    position: relative;
    max-width: 340px;
    padding: 16px;
    border: 1px solid var(--tc-border);
    border-radius: 16px;
    background: var(--tc-surface);
    color: var(--tc-text);
    font-family: inherit;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

.threecal-mini-wrapper * {
    box-sizing: border-box;
}

.threecal-mini-wrapper .threecal-icon {
    display: block;
}

.threecal-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.threecal-mini-title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 750;
    text-align: center;
}

.threecal-mini-wrapper .threecal-mini-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tc-surface-2);
    color: var(--tc-text);
    text-decoration: none;
}

.threecal-mini-wrapper .threecal-mini-nav:hover {
    background: var(--tc-accent);
    color: var(--tc-accent-ink);
}

.threecal-mini-wrapper .threecal-mini-grid {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    border: 0;
    border-collapse: separate;
    border-spacing: 2px;
}

.threecal-mini-wrapper .threecal-mini-grid th {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--tc-muted);
    font-size: 11px;
    font-weight: 650;
    text-align: center;
    text-transform: uppercase;
}

.threecal-mini-wrapper .threecal-mini-day {
    position: relative;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    vertical-align: middle;
}

.threecal-mini-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.threecal-mini-today .threecal-mini-number {
    background: var(--tc-accent);
    color: var(--tc-accent-ink);
    font-weight: 700;
}

.threecal-mini-has-events {
    cursor: pointer;
    font-weight: 700;
}

.threecal-mini-has-events:hover,
.threecal-mini-has-events:focus-visible {
    background: var(--tc-surface-2);
    outline: none;
}

.threecal-mini-has-events:focus-visible {
    box-shadow: inset 0 0 0 2px var(--tc-accent);
}

.threecal-mini-dot {
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--tc-ev, var(--tc-accent));
}

/* On today the dot sits on the edge of the circle; a ring keeps it visible */
.threecal-mini-today .threecal-mini-dot {
    bottom: 1px;
    z-index: 1;
    box-shadow: 0 0 0 2px var(--tc-surface);
}

.threecal-mini-footer {
    margin-top: 8px;
    text-align: center;
}

.threecal-mini-wrapper .threecal-mini-today-link {
    color: var(--tc-accent);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

/* Popup */
.threecal-mini-popup {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 20;
    padding: 12px;
    border: 1px solid var(--tc-border);
    border-radius: 14px;
    background: var(--tc-surface);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.18);
}

.threecal-mini-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.threecal-mini-popup-date {
    font-size: 13px;
    font-weight: 750;
}

.threecal-mini-wrapper .threecal-mini-popup-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tc-surface-2);
    color: var(--tc-text);
    cursor: pointer;
}

.threecal-mini-popup-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.threecal-mini-wrapper .threecal-mini-popup-event {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--tc-text);
    text-decoration: none;
}

.threecal-mini-wrapper a.threecal-mini-popup-event:hover {
    background: var(--tc-surface-2);
}

.threecal-mini-popup-event-color {
    flex: 0 0 4px;
    border-radius: 4px;
    background: var(--tc-ev, var(--tc-accent));
}

.threecal-mini-popup-event-title {
    font-size: 13px;
    font-weight: 650;
}

.threecal-mini-popup-event-time {
    color: var(--tc-muted);
    font-size: 12px;
}

/* Design: Accent */
.threecal-mini-wrapper.threecal-theme-accent {
    padding: 0 0 12px;
    overflow: hidden;
    border: 0;
}

.threecal-theme-accent .threecal-mini-header {
    margin: 0 0 8px;
    padding: 14px 12px;
    background: linear-gradient(135deg, var(--tc-accent) 0%, color-mix(in srgb, var(--tc-accent) 55%, #0ea5e9) 100%);
    color: var(--tc-accent-ink);
}

.threecal-mini-wrapper.threecal-theme-accent .threecal-mini-nav {
    background: rgba(255, 255, 255, 0.18);
    color: var(--tc-accent-ink);
}

.threecal-theme-accent .threecal-mini-grid {
    padding: 0 10px;
}

.threecal-theme-accent .threecal-mini-has-events {
    background: color-mix(in srgb, var(--tc-accent) 10%, transparent);
}

/* Design: Night */
.threecal-mini-wrapper.threecal-theme-dark {
    --tc-surface: #0d1424;
    --tc-surface-2: #182339;
    --tc-text: #e7ebf5;
    --tc-muted: #93a0bb;
    --tc-border: #222e4a;
    --tc-accent-ink: #06121f;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
}

.threecal-theme-dark .threecal-mini-today .threecal-mini-number {
    box-shadow: 0 0 14px color-mix(in srgb, var(--tc-accent) 60%, transparent);
}

.threecal-theme-dark .threecal-mini-dot {
    box-shadow: 0 0 6px var(--tc-ev, var(--tc-accent));
}