/* ============================================================
   Calendar — Time Grid Component
   ============================================================ */

/* --- Event Category Colors --- */
.event-category-internal-meeting  { --event-color: var(--primary); }
.event-category-external-meeting  { --event-color: var(--info); }
.event-category-court-hearing     { --event-color: var(--danger); }
.event-category-deadline          { --event-color: var(--warning); }
.event-category-consultation      { --event-color: var(--success); }
.event-category-critical          { --event-color: var(--danger); }
.event-category-personal          { --event-color: var(--accent, var(--primary)); }
.event-category-other             { --event-color: var(--text-secondary); }

/* --- Task Priority Colors (/tasks calendar view) ---
 *
 * One class per BADGE PALETTE TOKEN, not per priority value. Which priority
 * carries which token is data (lookup_data.extra_01, aliased 'color' — office
 * V28), so recolouring عاجل is an UPDATE, not a deploy, and a tenant-added
 * priority is coloured the moment it gets a token.
 *
 * The class is picked through the SAME hasOwnProperty whitelist the badges
 * use. A colour from data is never written into a style attribute: extra_01
 * is tenant-editable text, and a raw value there would be attacker-controlled
 * CSS. An unrecognised token yields no class at all, so --event-color falls
 * back to the neutral default below.
 */
/* The neutral default, and it must be declared HERE, above the token classes:
   the card carries .agenda-cat-* / .task-priority-* on the SAME element, so
   equal specificity makes source order the tie-break. */
.calendar-month-event,
.agenda-event-card      { --event-color: var(--text-secondary); }
.task-priority-danger    { --event-color: var(--danger); }
.task-priority-warning   { --event-color: var(--warning); }
.task-priority-info      { --event-color: var(--info); }
.task-priority-success   { --event-color: var(--success); }
.task-priority-primary   { --event-color: var(--primary); }
.task-priority-secondary { --event-color: var(--text-secondary); }

/* --- Agenda Category Colors (/agenda) ---
 *
 * One class per REGISTER, unlike the priority block above. That is the whole
 * difference: a priority is a lookup VALUE, so its colour is data
 * (lookup_data.extra_01) and a hardcoded map would be the banned status→CSS
 * kind. A category here is a code-level concept — the five diary registers,
 * fixed by the modules that exist — no more data-driven than a tab label, so it
 * belongs in CSS like the .event-category-* block it sits under.
 *
 * Project tokens, never the demo's raw hexes (#7a1f2b …): a literal colour does
 * not follow data-theme, and every one of these five is defined in both themes
 * in _variables.css. The chip itself is .calendar-month-event, which reads
 * --event-color for its start-edge bar and its 12% tint — so these classes set
 * one variable and nothing else, and the same class colours the legend dot and
 * the list-view dot too.
 */
.agenda-cat-sessions      { --event-color: var(--danger); }
.agenda-cat-tasks         { --event-color: var(--warning); }
.agenda-cat-meetings      { --event-color: var(--primary); }
.agenda-cat-consultations { --event-color: var(--success); }
.agenda-cat-adminWorks    { --event-color: var(--info); }

/* --- Event Block --- */
.calendar-event {
    position: absolute;
    border-left: 3px solid var(--event-color);
    background: color-mix(in srgb, var(--event-color) 12%, transparent);
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    overflow: hidden;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text);
    transition: box-shadow var(--transition-fast);
    z-index: 1;
    box-sizing: border-box;
}

.calendar-event:hover,
.calendar-event:focus {
    box-shadow: var(--shadow-sm);
    z-index: 2;
    outline: 2px solid var(--event-color);
    outline-offset: 1px;
}

/* Short events (< 30 min): inline layout */
.calendar-event.event-short {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event.event-short .event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.calendar-event.event-short .event-time {
    display: none;
}

/* Normal events (>= 30 min): stacked layout */
.calendar-event.event-normal .event-title {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.calendar-event.event-normal .event-time {
    display: block;
    color: var(--text-secondary);
    font-size: 0.7rem;
}

/* Dark mode — slightly higher opacity */
[data-theme="dark"] .calendar-event {
    background: color-mix(in srgb, var(--event-color) 18%, transparent);
}

/* --- Calendar Layout --- */
.calendar-wrapper {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;        /* keeps border-radius clipping */
    width: 100%;
    box-sizing: border-box;
}

/* Action bar */
.calendar-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.calendar-date-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

/* Grid header (days) */
.calendar-grid-header {
    display: grid;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 57px; /* action bar height approx */
    z-index: 9;
}

.calendar-day-header {
    text-align: center;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    border-right: 1px solid var(--border);
}

.calendar-day-header:last-child {
    border-right: none;
}

.calendar-day-header.is-today {
    color: var(--primary);
    font-weight: 700;
    background: var(--bg-secondary);
}

.calendar-day-header .day-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Timezone indicator */
.calendar-timezone {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
}

/* Scrollable grid area */
.calendar-grid-body {
    display: grid;
    overflow-y: auto;
    position: relative;
    max-height: calc(100vh - 200px);
    scrollbar-gutter: stable; /* reserves scrollbar width always so columns align with header */
}

/* Keep header right-padding in sync with the reserved scrollbar gutter */
.calendar-grid-header {
    padding-right: var(--scrollbar-gutter, 0px); /* overridden by JS when needed */
}

/* Time gutter (Y-axis) */
.calendar-time-gutter {
    width: 60px;
    min-width: 60px;
}

.calendar-time-label {
    height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    transform: translateY(-0.5em);
    user-select: none;
}

/* Day column */
.calendar-day-column {
    position: relative;
    border-right: 1px solid var(--border);
    min-height: calc(60px * 24);
}

.calendar-day-column:last-child {
    border-right: none;
}

.calendar-day-column.is-today {
    background: color-mix(in srgb, var(--primary) 3%, transparent);
}

/* Hour grid lines */
.calendar-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border);
    height: 60px;
    pointer-events: none;
}

/* Half-hour lines */
.calendar-half-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--border);
    opacity: 0.4;
    pointer-events: none;
}

/* "Now" line */
.calendar-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--danger);
    z-index: 3;
    pointer-events: none;
}

.calendar-now-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
}

/* View switcher */
.calendar-view-switcher {
    display: flex;
    gap: 2px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 2px;
}

.calendar-view-btn {
    padding: 0.25rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.calendar-view-btn.active,
.calendar-view-btn[aria-pressed="true"] {
    background: var(--primary);
    color: var(--on-primary);
}

/* "+N more" overflow indicator */
.calendar-more-events {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.7rem;
    color: var(--primary);
    cursor: pointer;
    padding: 2px;
    background: var(--bg);
    border-radius: var(--radius-xs, 2px);
    z-index: 2;
}

.calendar-more-events:hover {
    text-decoration: underline;
}

/* --- UI States --- */

.calendar-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    color: var(--text-muted);
    flex-direction: column;
    gap: 1rem;
}

.calendar-error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    gap: 1rem;
    padding: 2rem;
}

/* Month view mini card */
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--border);
}

.calendar-month-day {
    min-height: 100px;
    padding: 4px;
    /* LOGICAL, not border-right. Under RTL the 7th cell of a row is visually
       LEFTMOST, so a physical border-right + :nth-child(7n) { border-right:
       none } strips the wrong edge and leaves a double border on the other —
       the grid's outer edge gains a line and its inner seam loses one. */
    border-inline-end: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;       /* prevent event pills from bleeding into adjacent cells */
    min-width: 0;
}

.calendar-month-day:nth-child(7n) {
    border-inline-end: none;
}

.calendar-month-day-number {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 2px;
}

.calendar-month-day.is-today .calendar-month-day-number {
    color: var(--primary);
    font-weight: 700;
}

.calendar-month-day.other-month {
    opacity: 0.4;
}

.calendar-month-event {
    display: block;
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: var(--radius-xs, 2px);
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Logical: the accent stripe belongs on the chip's START edge, which is
       the right in Arabic and the left in English. */
    border-inline-start: 2px solid var(--event-color);
    background: color-mix(in srgb, var(--event-color) 12%, transparent);
    cursor: pointer;
    color: var(--text);
    max-width: 100%;
    box-sizing: border-box;
}

/* Navigation buttons */
.calendar-nav-btn {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    transition: background var(--transition-fast);
    font-size: 0.85rem;
}

.calendar-nav-btn:hover {
    background: var(--bg-secondary);
}

.calendar-today-btn {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background var(--transition-fast);
}

.calendar-today-btn:hover {
    background: var(--bg-secondary);
}

/* Create event button */
.calendar-create-btn {
    font-size: 0.85rem;
}

.calendar-create-btn.permission-gated:disabled {
    cursor: not-allowed !important;
    pointer-events: auto !important;
    opacity: 0.65;
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

/* Modal detail row */
.event-detail-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--text);
}

.event-detail-row i {
    color: var(--text-muted);
    width: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================================
   الأجندة العامة (/agenda) — legend, overflow line, list view

   Everything else on that page reuses the classes above: the grid is
   .calendar-month-grid / .calendar-month-day, a chip is
   .calendar-month-event + .agenda-cat-*, the nav is .calendar-nav-btn /
   .calendar-today-btn / .calendar-view-switcher. Only these four are new.
   ============================================================ */

/* The legend IS the category filter — each entry is a real toggle button, so
   it needs a button's affordances rather than the demo's static swatch row. */
.agenda-legend-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius-pill, 999px);
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.agenda-legend-btn:hover {
    background: var(--bg-secondary);
}

/* An OFF category has to read as off in both themes, and opacity alone is too
   quiet on the dark card — the dot loses its fill too, so the colour that names
   the category is visibly withdrawn rather than merely dimmed. */
.agenda-legend-btn[aria-pressed="false"] {
    opacity: 0.5;
    color: var(--text-muted);
}

.agenda-legend-btn[aria-pressed="false"] .agenda-legend-dot {
    background: transparent;
    border-color: var(--text-muted);
}

/* Fed by the same .agenda-cat-* class the chips use, so the legend can never
   disagree with the calendar about what colour a category is. */
.agenda-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--event-color, var(--text-secondary));
    border: 1px solid var(--event-color, var(--text-secondary));
    flex-shrink: 0;
}

/* /agenda's two server-side filters. Wide enough that an employee's full name
   does not truncate at the default form-select-sm width, which is what the
   inline style they replaced was for. */
.agenda-filter-select {
    min-width: 12rem;
}

/* "+N أخرى". Deliberately NOT .calendar-more-events: that one is
   position:absolute, sized for the orphaned time grid, and would float over
   the day number instead of following the chips. */
.agenda-more {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 0.7rem;
    text-align: start;
    padding: 1px 4px;
    cursor: pointer;
}

.agenda-more:hover {
    text-decoration: underline;
}

/* --- الأجندة (list) view, grouped by day ---------------------------------
   ONE list design, drawn by BOTH calendars: /agenda + /lawyer-portal through
   agenda-calendar.js, and /tasks through tasks.js renderCalendarList. It
   replaced the flat row (a dot, a title and a repeated stamp) that used to live
   here, which left the reader to spot where one day ended and the next began.

   A diary is read day by day, so the day is a HEADING and its items are cards
   under it.

   WHY THE RAIL IS NOT COLOURED PER DAY: colour on these pages already means one
   thing — the CATEGORY on the agenda, the PRIORITY on /tasks — and the legend
   says so. A per-day accent would put a second, contradictory meaning on that
   one channel. So the rail is --border (structure), the card's inline-start
   edge is --event-color (identity, whichever of the two it carries), and only
   TODAY's rail turns --primary, which names neither. */

.agenda-day-group {
    /* -start, not -left: the rail sits on the reading edge in both directions. */
    border-inline-start: 2px solid var(--border);
    padding-inline-start: 0.85rem;
}

.agenda-day-group + .agenda-day-group {
    margin-top: 1.1rem;
}

.agenda-day-group.is-today {
    border-inline-start-color: var(--primary);
}

.agenda-day-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.agenda-day-group.is-today .agenda-day-header {
    color: var(--primary);
}

.agenda-day-sep {
    color: var(--text-muted);
}

/* "اليوم" — the one badge, on the group the reader is most likely looking for. */
.agenda-day-today {
    padding: 0.05rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
}

.agenda-day-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* A real <button>: the card opens its register's edit modal, exactly as the
   flat row it replaces did. */
.agenda-event-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    text-align: start;
    background: var(--card);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--event-color);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.agenda-event-card:hover {
    background: var(--bg-secondary);
    border-color: var(--border-strong, var(--border));
    /* The identity edge must survive the hover shorthand above. */
    border-inline-start-color: var(--event-color);
}

/* WRAPS, unlike the flat row's ellipsis: a card has the width to show a whole
   سبب الجلسة, and truncating was only ever forced by the stamp sharing that
   line. A long unbroken token still cannot widen the card. */
.agenda-event-title {
    max-width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.agenda-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.85rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.agenda-event-cat,
.agenda-event-edge,
.agenda-event-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.agenda-event-edge i,
.agenda-event-time i {
    font-size: 0.7rem;
}

/* ============================================================
   Calendar — Mobile Responsive Fixes
   Breakpoint: ≤ 767px (phones)
   ============================================================ */
@media (max-width: 767px) {

    /* --- الأجندة list: give the cards back the rail's indent --- */
    .agenda-day-group {
        padding-inline-start: 0.6rem;
    }

    .agenda-event-card {
        padding: 0.55rem 0.65rem;
    }

    /* --- Action bar: stack into two rows on narrow screens --- */
    .calendar-action-bar {
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.5rem 0.75rem;
    }

    /* First row: prev / today / next take left; label centered */
    .calendar-nav-left {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex: 1 1 auto;
    }

    /* Date label shrinks font */
    .calendar-date-label {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    /* Second row: view switcher + create btn go full-width */
    .calendar-nav-right {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex: 1 1 100%;
        justify-content: space-between;
    }

    /* View switcher fills available space */
    .calendar-view-switcher {
        flex: 1;
        justify-content: center;
    }

    .calendar-view-btn {
        flex: 1;
        text-align: center;
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }

    /* "New Event" button compact */
    .calendar-create-btn {
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 0.25rem 0.5rem;
    }

    /* -------------------------------------------------------
       WEEK / DAY VIEW — columns always stretch to fill screen
       Using 1fr columns in JS means no horizontal overflow.
       ------------------------------------------------------- */
    .calendar-grid-header,
    .calendar-grid-body {
        /* Fill the wrapper width exactly — no overflow, no scroll */
        width: 100%;
        box-sizing: border-box;
    }

    .calendar-wrapper {
        /* No horizontal scroll needed; columns fill the width */
        overflow-x: hidden;
    }

    /* Shrink the time gutter to save horizontal space */
    .calendar-time-gutter {
        width: 40px;
        min-width: 40px;
    }

    .calendar-time-label {
        padding-right: 4px;
        font-size: 0.65rem;
    }

    /* Day headers — show only day number, hide day name on week view */
    .calendar-day-header .day-name {
        display: none;
    }

    .calendar-day-header .day-number {
        font-size: 0.95rem;
    }

    .calendar-day-header {
        padding: 0.3rem 0;
        font-size: 0.7rem;
    }

    /* -------------------------------------------------------
       MONTH VIEW — compact cells
       ------------------------------------------------------- */
    .calendar-month-grid {
        overflow-x: hidden; /* month is always 7 cols, no scroll */
    }

    .calendar-month-day {
        min-height: 60px; /* was 100px — halve it for phones */
        padding: 2px;
        overflow: hidden;
        min-width: 0;
    }

    .calendar-month-day-number {
        font-size: 0.7rem;
    }

    .calendar-month-event {
        font-size: 0.6rem;
        padding: 1px 2px;
    }

    /* Month header day labels: use 2-letter abbreviations via
       content override (Sun→Su etc.) */
    .calendar-month-grid > .calendar-day-header {
        font-size: 0.65rem;
        padding: 0.25rem 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: clip;
        /* Show only first 2 chars (Su, Mo, Tu …) */
        max-width: 100%;
    }

    /* "+N more" link */
    .calendar-more-events {
        font-size: 0.6rem;
        padding: 1px;
    }

    /* Reduce scroll area height so the full calendar fits on screen */
    .calendar-grid-body {
        max-height: calc(100vh - 280px);
    }

    /* Event blocks — smaller text on narrow columns */
    .calendar-event {
        font-size: 0.65rem;
        padding: 1px 2px;
    }
}

/* Breakpoint: ≤ 480px (very small phones) */
@media (max-width: 480px) {
    .calendar-month-day {
        min-height: 48px;
        padding: 1px;
    }

    .calendar-month-event {
        font-size: 0.55rem;
    }

    .calendar-date-label {
        max-width: 110px;
        font-size: 0.82rem;
    }
}