/* calendar.css — appointment calendar UI for Дентален Асистент.
   Tokens come from style.css :root + theme overrides; works in all 6 themes. */

/* style.css bumps the global root to 20px for the chair-side main app, but the
   calendar was authored against a 16px base — every `rem` value here scales up
   if we inherit 20px. Reset back to 16px on calendar pages only. */
html { font-size: 16px; }

.cal-body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Sidebar width — make this larger to give the mini-month + doctor list more
   room, smaller to give the calendar more room. Default 19rem fits a slightly
   bigger mini-month than the original 16rem. */
.cal-shell {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 19rem 1fr;
    min-height: 0;
    overflow: hidden;
}

/* ── SIDEBAR ─────────────────────────────────────────── */

.cal-sidebar {
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cal-sidebar-section { display: flex; flex-direction: column; gap: 0.5rem; }
.cal-sidebar-title {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-top: 0.25rem;
}

.cal-mini-month {
    user-select: none;
}
.cal-mini-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    padding: 0 0.1rem;
}
.cal-mini-month-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}
.cal-mini-month-nav {
    display: flex;
    gap: 0.15rem;
}
.cal-mini-month-nav button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.cal-mini-month-nav .cal-icon { width: 0.95em; height: 0.95em; }
.cal-mini-month-nav button:hover { background: var(--primary-50); color: var(--primary); }
/* Mini-month sizing — bump font-size + cell padding to make it bigger,
   reduce them to make it smaller. Sidebar width is set on .cal-shell above. */
.cal-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: 0.82rem;
}
.cal-mini-day-name {
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.3rem 0;
    font-size: 0.72rem;
}
.cal-mini-day {
    text-align: center;
    padding: 0.45rem 0;
    cursor: pointer;
    border-radius: 50%;
    color: var(--text);
    line-height: 1;
}
.cal-mini-day:hover { background: var(--primary-50); }
.cal-mini-day.other-month { color: var(--text-muted); opacity: 0.5; }
.cal-mini-day.today { color: #fff; background: var(--primary); font-weight: 700; }
.cal-mini-day.in-view { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.cal-mini-day.today.in-view { background: var(--primary); color: #fff; }

.cal-doctor-checks { display: flex; flex-direction: column; gap: 0.2rem; }
.cal-doctor-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    color: var(--text);
}
.cal-doctor-check:hover { background: var(--primary-50); }
.cal-doctor-check input { display: none; }
.cal-doctor-check-box {
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid var(--doctor-color, var(--primary));
    border-radius: 0.25rem;
    flex-shrink: 0;
    background: transparent;
    transition: background 0.15s;
    position: relative;
}
.cal-doctor-check input:checked + .cal-doctor-check-box {
    background: var(--doctor-color, var(--primary));
}
.cal-doctor-check input:checked + .cal-doctor-check-box::after {
    content: '✓';
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.05rem;
    text-align: center;
    font-weight: 700;
}
.cal-doctor-check-name { flex: 1; }
.cal-doctor-check-name.is-admin::after { content: ' ★'; color: var(--accent); font-size: 0.75rem; }

/* ── TOOLBAR ─────────────────────────────────────────── */

.cal-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.cal-back {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius);
    line-height: 1;
}
.cal-back:hover { background: var(--primary-50); color: var(--primary); }

.cal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.cal-nav { display: flex; align-items: center; gap: 0.4rem; }
.cal-range { font-weight: 600; color: var(--text); font-size: 0.95rem; padding: 0 0.5rem; }

.cal-views { display: flex; gap: 0.25rem; background: var(--bg-subtle, var(--bg)); padding: 0.2rem; border-radius: var(--radius); }
.cal-view-btn {
    background: transparent;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: calc(var(--radius) - 2px);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
}
.cal-view-btn.active { background: var(--bg-card); color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.cal-view-btn:hover:not(.active) { color: var(--text); }

.cal-tools { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.cal-mine-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.cal-select {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.35rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ── CUSTOM DROPDOWN ─────────────────────────────────── */
/* .cal-dropdown styles moved to style.css so both calendar and index.html
   inherit them — see makeDropdown helper at /js/dropdown.js. */

.cal-btn {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 2.25rem;
    font-weight: 500;
}
.cal-btn:hover { background: var(--primary-50); border-color: var(--primary); color: var(--primary-dark); }
.cal-btn-today { font-weight: 600; }
.cal-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-btn-primary:hover { background: var(--primary-hover); color: #fff; }
.cal-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.cal-btn-danger:hover { background: var(--danger-bg); color: var(--danger-hover); }
.cal-btn-block { display: block; width: 100%; margin-bottom: 0.5rem; text-align: left; padding: 0.7rem 1rem; }

/* Past-day lock toggle. Closed (default) = neutral outline so it doesn't
   shout in red — it's a filter, not a destructive action. Open = warning
   amber so the doctor sees "edit mode is hot". */
.cal-btn-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-color: var(--border);
    color: var(--text-muted);
    background: transparent;
}
.cal-btn-lock:hover { background: var(--bg); color: var(--text); border-color: var(--text-muted); }
.cal-btn-lock-open {
    border-color: var(--warning);
    color: var(--warning);
    background: var(--warning-bg, transparent);
}
.cal-btn-lock-open:hover {
    background: var(--warning-bg, var(--primary-50));
    color: var(--warning);
    border-color: var(--warning);
}
.cal-lock-label { font-size: 0.85rem; }

/* Lucide icon sizing — inherits currentColor so it tints with the button text. */
.cal-icon { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.cal-btn-icon { padding: 0.4rem 0.55rem; min-width: 2.25rem; }
.cal-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
/* The HTML `hidden` attribute must beat .cal-btn's display:inline-flex,
   otherwise toggling delete-button visibility via .hidden = true/false
   silently no-ops. */
.cal-btn[hidden], [hidden] { display: none !important; }
.is-hidden { display: none !important; }

/* Lock button — show/hide the right SVG based on state. Default = locked icon
   visible. With .cal-btn-lock-open = unlocked icon visible. */
.cal-btn-lock .cal-lock-icon-open    { display: none; }
.cal-btn-lock .cal-lock-icon-locked  { display: inline-block; }
.cal-btn-lock-open .cal-lock-icon-locked { display: none; }
.cal-btn-lock-open .cal-lock-icon-open   { display: inline-block; }

/* ── MAIN GRID ───────────────────────────────────────── */

.cal-main {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0;
    position: relative;
}

.cal-loading { padding: 3rem; text-align: center; color: var(--text-muted); }

/* ── WEEK VIEW ───────────────────────────────────────── */
/* Standard layout: time on left rail (vertical hours), 7 day columns
   filling the viewport width. Scrolling lives on .cal-main so the rail and
   the grid scroll together. Inner height is exactly the calendar's natural
   height — no empty space below the last visible hour. */

.cal-main {
    overflow-y: auto;
    overflow-x: hidden;
}

.cal-week {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
}

.cal-week-time-rail {
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    position: relative;
}
/* Hour labels sit just below the gridline they belong to (Google Calendar style:
   "08" appears slightly under the 08:00 line, not centered on it). top is the
   line position; we add a tiny offset so the text doesn't touch the line.
   The whole rail + grid get a top padding so the very first label (workStart)
   isn't clipped above the canvas. */
.cal-week-time-label {
    position: absolute;
    left: 0;
    right: 0.5rem;
    padding-right: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    font-weight: 500;
    line-height: 1;
}
.cal-week-time-label.hour-major { color: var(--text-secondary); font-weight: 600; }

.cal-week-grid-wrap {
    /* No internal scroll — .cal-main owns it so the rail scrolls in lock-step. */
}
.cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
}

/* Day header — Google-style left-aligned: day name on top in muted color,
   big day number below. Today's number wears a primary-color circle. */
.cal-week-day-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: left;
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    height: var(--cal-day-header-h, 3.5rem);
    box-sizing: border-box;
}
.cal-week-day-header.today { color: var(--primary); }
.cal-week-day-header-name {
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.cal-week-day-header.today .cal-week-day-header-name { color: var(--primary); }
.cal-week-day-header-num {
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.1;
}
.cal-week-day-header.today .cal-week-day-header-num {
    color: #fff;
    background: var(--primary);
    width: 1.9rem;
    height: 1.9rem;
    line-height: 1.9rem;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    font-weight: 600;
}

.cal-week-day-col {
    position: relative;
    background: var(--bg);
    border-right: 1px solid var(--border);
    cursor: pointer;
    background-image:
        linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px);
    background-size: 100% var(--cal-hour-height, 60px);
    background-repeat: repeat-y;
    min-height: 100%;
}
.cal-week-day-col.today { background-color: var(--primary-50); }
/* Past days — slightly dimmed, muted background overlay to read as "history". */
.cal-week-day-col.is-past {
    background-color: var(--bg-subtle, var(--bg));
    background-image:
        linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px),
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 6px,
            rgba(0,0,0,0.025) 6px,
            rgba(0,0,0,0.025) 7px
        );
    background-size: 100% var(--cal-hour-height, 60px), auto;
}
.cal-week-day-col.is-past.today { background-color: var(--primary-50); } /* shouldn't happen but be safe */
.cal-week-day-col.is-locked { cursor: not-allowed; }
.cal-week-day-col.is-locked:hover { background-color: var(--bg-subtle, var(--bg)); }

/* Past appointments fade slightly so they read as "history". Locked variant
   gets a not-allowed cursor and no drag affordance. */
.cal-appt.is-past-appt { opacity: 0.78; filter: saturate(0.85); }
.cal-appt.is-locked { cursor: not-allowed; }
.cal-appt.is-locked .cal-appt-resize-handle { display: none; }
/* No column-wide hover — Google Calendar doesn't light up the whole day,
   it only shows the create-event ghost where the cursor actually is. */

/* Time rail in week — same layout as day-col but for the labels */
.cal-week-time-rail-inner {
    position: relative;
    height: 100%;
}

/* Keyboard hints in view buttons (D / W / M) */
.cal-view-btn kbd {
    background: rgba(0,0,0,0.08);
    color: inherit;
    border-radius: 0.2rem;
    padding: 0.05rem 0.3rem;
    font-size: 0.65rem;
    font-family: ui-monospace, monospace;
    margin-left: 0.35rem;
    opacity: 0.7;
}
.cal-view-btn.active kbd { background: var(--primary-light); color: var(--primary-dark); }

/* Now-line — thin red horizontal line at the current time on today's column.
   Placed inside the day column with style.top set in JS. */
.cal-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--danger);
    z-index: 6;
    pointer-events: none;
}
.cal-now-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
}

/* ── APPOINTMENT CHIP ─────────────────────────────────── */

.cal-appt {
    position: absolute;
    border-radius: var(--radius);
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    color: #fff;
    background: var(--primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    line-height: 1.2;
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.1s, box-shadow 0.1s;
}
.cal-appt:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); z-index: 4; }
.cal-appt.cancelled { opacity: 0.4; text-decoration: line-through; }
.cal-appt-recurring-mark {
    position: absolute;
    top: 0.2rem;
    right: 0.3rem;
    width: 0.85em;
    height: 0.85em;
    opacity: 0.85;
    pointer-events: none;
}

.cal-appt-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-appt-time { font-size: 0.7rem; opacity: 0.85; }
.cal-appt-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.25));
    opacity: 0;
    transition: opacity 0.15s;
}
.cal-appt:hover .cal-appt-resize-handle { opacity: 1; }

/* ── DAY VIEW ─────────────────────────────────────────── */

.cal-day {
    display: grid;
    grid-template-columns: 5rem 1fr;
    min-height: 100%;
}
.cal-day-time-rail {
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    position: relative;
}
.cal-day-time-label {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
    transform: translateY(-0.5em);
}
.cal-day-canvas {
    position: relative;
    background: var(--bg);
    background-image:
        linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px);
    background-size: 100% var(--cal-slot-height);
    background-repeat: repeat-y;
    cursor: pointer;
}

/* ── MONTH VIEW ───────────────────────────────────────── */

.cal-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(7rem, 1fr);
    height: 100%;
}
.cal-month-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.cal-month-header-day {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-right: 1px solid var(--border);
}
.cal-month-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0.4rem;
    overflow: hidden;
    background: var(--bg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cal-month-cell:hover { background: var(--primary-50); }
.cal-month-cell.other-month { opacity: 0.45; background: var(--bg-subtle, var(--bg)); }
.cal-month-cell.today { background: var(--primary-50); }
.cal-month-cell.is-past { background-color: var(--bg-subtle, var(--bg)); }
.cal-month-cell.is-past.today { background-color: var(--primary-50); }
.cal-month-cell.is-past .cal-month-day-num { color: var(--text-muted); }
.cal-month-cell.is-past .cal-month-chip { opacity: 0.78; filter: saturate(0.85); }
.cal-month-cell.is-locked { cursor: not-allowed; }
.cal-month-day-num { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.cal-month-cell.today .cal-month-day-num { color: var(--primary); }
.cal-month-chip {
    font-size: 0.68rem;
    background: var(--primary);
    color: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── MODAL ─────────────────────────────────────────────── */

.cal-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 99999;
}
.cal-modal-overlay.visible { display: flex; }
.cal-modal-box {
    background: var(--bg-card);
    color: var(--text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
.cal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.cal-modal-header h3 { margin: 0; font-size: 1.05rem; color: var(--primary-dark); }
.cal-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
}
.cal-modal-close:hover { color: var(--danger); }
.cal-modal-body { padding: 1rem 1.25rem; overflow-y: auto; }
.cal-modal-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cal-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
}
.cal-form-row label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cal-form-row input,
.cal-form-row select,
.cal-form-row textarea {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    font-family: inherit;
    font-size: 0.95rem;
    min-height: 2.5rem;
}
.cal-form-row input:focus,
.cal-form-row select:focus,
.cal-form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(168,98,58,0.25));
}
.cal-form-row-split { flex-direction: row; gap: 0.75rem; }
.cal-form-row-split > div { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.cal-form-error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; }

/* Patient autocomplete dropdown — same theme tokens as the custom dropdown,
   rendered absolute below the input field. */
.cal-patient-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: 0.25rem;
}
.cal-patient-result {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: var(--text);
}
.cal-patient-result:last-child { border-bottom: none; }
.cal-patient-result:hover, .cal-patient-result.active {
    background: var(--primary-50);
    color: var(--primary-dark);
}
.cal-patient-result-name { font-weight: 600; font-size: 0.9rem; }
.cal-patient-result-meta { font-size: 0.75rem; color: var(--text-muted); }

/* Pinned-patient pill that appears below the input once a patient is selected. */
.cal-patient-pinned {
    margin-top: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: var(--radius);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.cal-patient-pinned-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    padding: 0 0.25rem;
    line-height: 1;
}
.cal-patient-pinned-clear:hover { color: var(--danger); }