/* --- Theme Variables --- */
/* The app's long-standing names, now read from the design tokens (tokens.css, loaded
   first). Tokens flip themselves under [data-theme="dark"], so these need no dark copy. */
:root {
    /* Render native form controls (date/time pickers, spinners, scrollbars) light */
    color-scheme: light;
    --bg: var(--pc-bg);
    --bg-disabled: var(--pc-disabled);
    --fg: var(--pc-text);
    --link: var(--pc-link);
    --link-hover: var(--pc-link-hover);
    --panel-bg: var(--pc-surface);
    --border-color: var(--pc-line);
    --bg-interactive-hover: var(--pc-hover);
    --text-color-1: var(--pc-text-muted);
    --text-color-2: var(--pc-text-2);
}

[data-theme="dark"] {
    /* Makes the browser draw its built-in date/time icons and pickers dark;
       these glyphs ignore currentColor, so a variable alone can't reach them. */
    color-scheme: dark;
}



/* --- General Styles --- */

body {

    background: var(--bg);

    color: var(--fg);

    min-width: 320px;

}



.border-color-default {
    border-color: var(--border-color) !important;
}

.text-color-1 {
    color: var(--text-color-1);
}

.text-color-2 {
    color: var(--text-color-2);
}

.bg-1 {
    background: var(--bg);
}

.bg-2 {
    background: var(--panel-bg);
}

.bg-disabled {
    background: var(--bg-disabled);
}



/* --- Design language: controls we build ourselves ---------------------------
   Syncfusion styles the calendar grid itself; everything AROUND it (our own
   buttons, modals, inputs) uses the classes below so one change updates every
   surface. Built on the theme variables above, so light/dark comes for free.

   Usage:
     .pc-btn .pc-btn-primary    the accent, for the main action in a view
     .pc-btn .pc-btn-secondary  neutral, for supporting actions
     .pc-btn .pc-btn-danger     destructive actions
     .pc-btn-sm                 size modifier for dense toolbars
     .pc-modal > .pc-modal-panel   overlay + centered card
     .pc-input, .pc-input-group    text fields, optionally with a prefix chip
--------------------------------------------------------------------------- */

.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--pc-radius-md);
    border: 1px solid transparent;
    font-family: var(--pc-font);
    font-size: var(--pc-fs-body);
    font-weight: var(--pc-fw-semibold);
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--pc-dur-fast) ease, border-color var(--pc-dur-fast) ease, color var(--pc-dur-fast) ease;
}

.pc-btn:disabled {
    background: var(--bg-disabled);
    color: var(--text-color-1);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Keyboard focus stays visible on every variant. */
.pc-btn:focus-visible,
.pc-input:focus-visible,
.pc-input-group:focus-within {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
}

.pc-btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 9999px;
}

.pc-btn-primary {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
}

.pc-btn-primary:not(:disabled):hover {
    background: var(--pc-accent-hover);
}

.pc-btn-secondary {
    background: var(--panel-bg);
    color: var(--text-color-2);
    border-color: var(--border-color);
}

.pc-btn-secondary:not(:disabled):hover {
    background: var(--bg-interactive-hover);
}

.pc-btn-danger {
    background: var(--pc-danger);
    color: var(--pc-bg);
}

.pc-btn-danger:not(:disabled):hover {
    background: color-mix(in srgb, var(--pc-danger) 85%, #000);
}

/* Modal: one overlay treatment and one panel treatment for every dialog. */
.pc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-scrim);
    padding: 1rem;
}

.pc-modal-panel {
    position: relative;
    width: 100%;
    max-width: 28rem;
    padding: 1.5rem;
    border-radius: var(--pc-radius-xl);
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border-color);
    box-shadow: var(--pc-shadow-xl);

    /* Never taller than the screen. A panel with enough content -- a busy day in
       Recent changes, a long list anywhere -- grew past the viewport with nothing
       to clip it, so the top and bottom were simply unreachable: the close button
       scrolled off and the page behind does not scroll because .pc-modal is fixed.
       The 2rem allows for .pc-modal's own 1rem padding on each edge. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;   /* don't chain the scroll to the page behind */
}

/* Keep the close button reachable once the panel scrolls.
   It is positioned absolute inside the panel, so in a scrolling panel it would
   ride away with the content and leave no way out but Escape -- worst exactly
   when the dialog is longest. Sticky pins it to the top of the scroll area; the
   zero-height row means it does not take space from the heading beside it. */
.pc-modal-panel > button[aria-label="Close"] {
    position: sticky;
    top: 0;
    float: right;
    margin-top: -0.5rem;
    margin-right: -0.5rem;
    z-index: 2;
}

/* Inputs */
.pc-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--pc-field);
    border-radius: var(--pc-radius-md);
    background: var(--bg);
    color: var(--pc-text);
    font-size: var(--pc-fs-body);
}

.pc-input:focus {
    outline: none;
    border-color: var(--pc-accent);
    box-shadow: var(--pc-focus-ring);
}

.pc-input::placeholder {
    color: var(--text-color-1);
}

/* Prefix-chip input (e.g. "pastecal.com/" + slug) */
.pc-input-group {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 2px solid var(--pc-accent);
    border-radius: var(--pc-radius-md);
    background: var(--bg);
}

.pc-input-group>.pc-input-prefix {
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 0.25rem 0 0.75rem;
    background: var(--panel-bg);
    border-right: 1px solid var(--border-color);
    color: var(--text-color-1);
    font-size: 0.875rem;
    font-weight: 500;
}

.pc-input-group>.pc-input {
    flex: 1;
    border: 0;
    border-radius: 0;
    font-weight: 500;
}

.pc-input-group>.pc-input:focus {
    outline: none;
}



select,
option,
input,
textarea {
    background: var(--bg);
}



body a {

    text-decoration: none;

    color: var(--link);

}

body a:hover {
    text-decoration: underline;
}



/* Details/Summary for FAQ */

details summary {
    cursor: pointer;
    user-select: none;
}

details summary:hover {
    opacity: 0.85;
}

details[open] summary {
    margin-bottom: 0.5rem;
}



/* --- Syncfusion Overrides --- */

div#Schedule {
    min-height: 80vh;
    /* can be short on agenda view */
}

.e-toolbar-item.e-today {
    display: none !important;
}



.e-schedule .e-vertical-view .e-time-cells-wrap table td,

.e-schedule .e-vertical-view .e-work-cells {
    height: 24px !important;
}



.e-schedule .e-month-view .e-work-cells {
    height: 100px !important;
}



td.e-header-cells.e-disable-dates::before {

    content: '12-4 AM';

    width: 100%;

    margin: 0px auto;

    margin-top: 40%;

    text-align: center;

    display: inline-block;

    color: #36b1f6;

    cursor: pointer;

}

td.e-header-cells.e-disable-dates:hover {
    background-color: #fafafa !important;
}



/* Event Colors */

span.e-menu-icon.e-color-1 {
    background: #3f51b5;
}

span.e-menu-icon.e-color-2 {
    background: #e3165b;
}

span.e-menu-icon.e-color-3 {
    background: #ff6652;
}

span.e-menu-icon.e-color-4 {
    background: #4caf50;
}

span.e-menu-icon.e-color-5 {
    background: #ff9800;
}

span.e-menu-icon.e-color-6 {
    background: #03a9f4;
}

span.e-menu-icon.e-color-7 {
    background: #9e9e9e;
}

span.e-menu-icon.e-color-8 {
    background: #27282f;
}



/* Syncfusion Form Styles */

.custom-field-row-color {
    position: absolute;
    top: 1rem;
    right: 25px;
}

.custom-field-row-color .e-caret {
    color: #eee;
}

.e-subject-container {
    margin-right: 50px;
}

.e-schedule-dialog .e-subject-container {
    width: 100%;
}

.e-location-container {
    display: none;
}



/* Fonts & Borders */

html,
div#Schedule,
.e-control,
.e-css,
.e-toolbar,
.e-tbar-btn,
.e-tbar-btn-text,

.e-control-wrapper,
.e-label,
textarea {

    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;

    font-weight: normal;

}



div#Schedule,
.e-appointment,
.e-draggable,
.e-btn {
    border-radius: 6px !important;
}

.e-dialog,
.e-popup,
.e-calendar {
    border-radius: 6px;
    overflow: hidden;
}



/* Better Colors */

.e-schedule .e-vertical-view .e-work-cells,

.e-schedule .e-vertical-view .e-date-header-wrap table tbody td {
    border-color: var(--border-color);
}



/* Fixes */

.e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
    overflow: visible;
}



.e-schedule-dialog.e-device .e-save-icon::before {

    content: 'SAVE';

    color: #e3165b;

    font-size: 16px;

}



.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-header-icon-wrapper .e-edit,

.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete {
    display: initial;
}



/* Desktop View Tweaks */

@media screen and (min-width: 768px) {

    .e-schedule .e-schedule-toolbar .e-toolbar-pop,

    .e-schedule .e-schedule-toolbar .e-hor-nav {
        display: none !important;
    }

    .e-schedule .e-schedule-toolbar .e-toolbar-items {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

}

/* Mobile toolbar overflow menu positioning */
@media screen and (max-width: 767px) {
    .e-schedule .e-schedule-toolbar .e-toolbar-items {
        display: flex !important;
        justify-content: space-between !important;
    }

    /* Push overflow menu to the right */
    .e-schedule .e-schedule-toolbar .e-toolbar-pop {
        margin-left: auto !important;
    }
}



.e-date-header.e-navigate.month-start {
    font-size: 18px;
}



/* --- Quick Add Styles --- */

.quick-add-overlay {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

}

.quick-add-dialog {

    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;

}

.quick-add-dialog textarea {
    width: 100%;
    margin-bottom: 10px;
}

.parsed-event {

    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;

}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}



@media screen and (max-width: 600px) {

    .mobile-hide {
        display: none;
    }

}



[v-cloak] {
    display: none !important;
}

/* Event popup: cap height to the viewport and let the body scroll instead of pushing
   long descriptions off-screen with no way to reach the rest of the content. */
.e-quick-popup-wrapper {
    max-height: calc(100vh - 20px) !important;
}

/* Widen the popup for long descriptions (see .pc-wide added in app.js's popupOpen).
   480px is a deliberately modest step up from the 365px default -- wide enough to read
   more comfortably (~50-55 chars/line), but narrow enough to rarely cover a neighboring
   day's event on a typical month view. A wider popup (700px was tried) covers enough of
   the grid that it routinely overlaps other events, and a click on what looks like that
   event actually lands on the popup instead -- Syncfusion never sees it as an event click,
   so the popup silently keeps showing the wrong content. Mirrors nativecal's EventPopover,
   which widens from w-80 (320px) to w-[480px] under the same threshold. Syncfusion's
   default popup is width: 365px AND max-width: 365px -- overriding width alone does
   nothing since max-width still clamps it back down. calc(100vw - 20px) keeps it from
   overflowing a narrow browser window. */
.e-quick-popup-wrapper.pc-wide {
    width: 480px !important;
    max-width: calc(100vw - 20px) !important;
}

/* Syncfusion computes `top` from the popup's natural, pre-clamp height, so a popup
   shrunk by max-height above can still end up positioned with its top or bottom outside
   the viewport (mirrors the bug already fixed in nativecal's EventPopover). Override with
   a pure CSS clamp -- a JS fix that rewrote style.top after the fact was tried and
   reverted: it broke the header icon buttons' icon-font glyph paint (rendered blank)
   despite identical DOM/computed styles, a paint bug from mutating position mid-transition.
   This class is added in app.js's popupOpen handler. !important is required to win over
   Syncfusion's inline style="top: ...". */
.e-quick-popup-wrapper.pc-clamp-top {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%);
}

/* Phones: centre the popup instead of anchoring it to the tapped event.
   Syncfusion's popup is 365px wide and never shrinks, so on a 390px screen it
   spans almost the entire width -- "next to the event" stops meaning anything,
   and the anchored `left` just pushes it sideways. At 320px it ran 11px past the
   right edge, putting the edit/delete/close buttons off-screen entirely.

   Both `left` and `top` here must beat Syncfusion's inline styles, hence
   !important. The width cap keeps a 10px gutter on each side at every phone
   width, and `right: auto` stops a stale inline right from fighting the centre.
   Scoped to a real max-width query rather than a JS branch so it re-evaluates on
   rotation without needing the popup to reopen. */
@media (max-width: 480px) {
    .e-quick-popup-wrapper {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        /* min-width beats max-width in CSS, always. Syncfusion's popup picks up
           the 320px min-width from body, so on a 320px phone the max-width above
           was ignored and the popup stayed full-bleed, running 4px past each
           edge. Without this the whole rule silently does nothing at the exact
           width where it matters most. */
        min-width: 0 !important;
    }

    /* When the popup is ALSO too tall, it needs both transforms at once --
       the vertical rule above would otherwise replace the horizontal one. */
    .e-quick-popup-wrapper.pc-clamp-top {
        transform: translate(-50%, -50%);
    }

    /* .pc-wide widens to 480px for long descriptions; on a phone that is wider
       than the screen, so the cap above has to win. */
    .e-quick-popup-wrapper.pc-wide {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }
}

.e-quick-popup-wrapper .e-event-popup {
    max-height: inherit;
    display: flex;
    flex-direction: column;
}

.e-quick-popup-wrapper .e-popup-content {
    overflow-y: auto;
}

/* Syncfusion sets user-select: none on the whole popup by default (presumably to guard
   drag/resize interactions elsewhere in the scheduler), which cascades down and makes the
   description -- plain read-only text with no drag affordance of its own -- impossible to
   select or copy. */
.e-quick-popup-wrapper .e-description-details {
    user-select: text;
}

/* Year view: prevent double scrollbar by letting only the page scroll */
.e-schedule .e-year-view .e-content-wrap {
    overflow: visible !important;
}
/* --- First-run welcome dock --- */

/* Anchored bottom-left over the calendar's quietest corner, so it never covers
   the toolbar, the URL pill, or today's date. Colors come from the theme
   variables rather than Tailwind's gray scale, which doesn't read them. */
.welcome-dock {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 45;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 14px 15px;
    border-radius: 10px;
    background: var(--panel-bg);
    box-shadow: 0 2px 4px rgba(22, 32, 43, .07), 0 16px 32px -14px rgba(22, 32, 43, .4);
    overflow: hidden;
    animation: welcome-dock-in .25s ease-out;
}

[data-theme="dark"] .welcome-dock {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 32px -14px rgba(0, 0, 0, .8);
}

.welcome-dock--leaving {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

/* Keeps the example URL from breaking across lines mid-domain. */
.welcome-dock__url {
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    padding: .1em .35em;
    border-radius: 3px;
}

/* Shows the auto-dismiss running down, so the card doesn't just vanish
   unexplained. Paused on hover/focus via inline animation-play-state. */
.welcome-dock__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--link);
    opacity: .25;
    animation-name: welcome-dock-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.welcome-dock:hover .welcome-dock__progress,
.welcome-dock:focus-within .welcome-dock__progress {
    animation-play-state: paused;
}

@keyframes welcome-dock-progress {
    to { width: 100%; }
}

@keyframes welcome-dock-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .welcome-dock {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-dock { animation: none; }
    .welcome-dock--leaving { transition: none; }
    .welcome-dock__progress { animation: none; width: 100%; }
}

/* Color filter dots.
   Tailwind's ring utilities resolve to a transparent shadow in this build, so a
   focus-visible:ring-* class produced no visible focus at all -- worse than the
   plain spans these replaced, which were never focusable. Use a real outline. */
.pc-filter-dot:focus {
    outline: none;
}
.pc-filter-dot:focus-visible {
    outline: 2px solid var(--link, #3b82f6);
    outline-offset: 2px;
}