/* ==========================================================================
   MPO Dashboard - custom styles
   Tailwind (via CDN) handles utilities; this file defines the colour tokens
   (light + dark) and the reusable component classes. Everything is prefixed
   with "mpo-" / "mpo_" to match the project convention. Plain CSS is used here
   because the Tailwind Play CDN does not process @apply in external files.
   ========================================================================== */

:root {
    --mpo-canvas:  #f5f5f7;
    --mpo-surface: #ffffff;
    --mpo-line:    #e5e5ea;
    --mpo-ink:     #1d1d1f;
    --mpo-sub:     #6e6e73;
    /* --mpo-primary is injected inline from settings in the layout <style>. */
    --mpo-primary: #0071e3;
    --mpo-primary-contrast: #ffffff;
}

.dark {
    --mpo-canvas:  #0b0b0c;
    --mpo-surface: #1c1c1e;
    --mpo-line:    #2c2c2e;
    --mpo-ink:     #f5f5f7;
    --mpo-sub:     #98989d;
}

html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

/* ----------------------------- Cards -------------------------------- */
.mpo-card {
    background: var(--mpo-surface);
    border: 1px solid var(--mpo-line);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
}
.dark .mpo-card { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* --------------------------- Buttons -------------------------------- */
.mpo-btn,
.mpo-btn-primary,
.mpo-btn-ghost,
.mpo-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    padding: .7rem 1.15rem;
    border-radius: .85rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .08s ease, opacity .15s ease, background .15s ease, box-shadow .15s ease;
    min-height: 44px;            /* touch-friendly target */
    text-decoration: none;
    white-space: nowrap;
}
.mpo-btn:active,
.mpo-btn-primary:active,
.mpo-btn-ghost:active,
.mpo-btn-danger:active { transform: scale(.97); }

.mpo-btn-primary { background: var(--mpo-primary); color: var(--mpo-primary-contrast); }
.mpo-btn-primary:hover { filter: brightness(.94); }

.mpo-btn-ghost { background: transparent; color: var(--mpo-ink); border-color: var(--mpo-line); }
.mpo-btn-ghost:hover { background: var(--mpo-canvas); }

.mpo-btn-danger { background: #ff3b30; color: #fff; }
.mpo-btn-danger:hover { filter: brightness(.94); }

.mpo-btn { background: var(--mpo-canvas); color: var(--mpo-ink); border-color: var(--mpo-line); }

.mpo-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    color: var(--mpo-ink);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s ease;
}
.mpo-btn-icon:hover { background: var(--mpo-canvas); }

/* --------------------------- Forms ---------------------------------- */
.mpo-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--mpo-ink);
}
.mpo-input,
.mpo-select,
.mpo-textarea {
    width: 100%;
    background: var(--mpo-surface);
    color: var(--mpo-ink);
    border: 1px solid var(--mpo-line);
    border-radius: .85rem;
    padding: .8rem 1rem;
    font-size: 1rem;            /* >=16px stops iOS zoom-on-focus */
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 48px;
}
.mpo-textarea { min-height: 110px; resize: vertical; }
.mpo-input:focus,
.mpo-select:focus,
.mpo-textarea:focus {
    outline: none;
    border-color: var(--mpo-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mpo-primary) 18%, transparent);
}
.mpo-hint { font-size: .8rem; color: var(--mpo-sub); margin-top: .35rem; }

/* --------------------------- Badges --------------------------------- */
.mpo-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--mpo-line);
    color: var(--mpo-sub);
    background: var(--mpo-canvas);
}
.mpo-badge-success { color: #1c7c3c; background: rgba(48,209,88,.14); border-color: transparent; }
.mpo-badge-muted   { color: var(--mpo-sub); }
.mpo-badge-danger  { color: #c0271d; background: rgba(255,59,48,.14); border-color: transparent; }
.dark .mpo-badge-success { color: #4ade80; }
.dark .mpo-badge-danger  { color: #ff6b61; }

/* ------------------------- Sidebar nav ------------------------------ */
.mpo-nav-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .9rem;
    border-radius: .85rem;
    color: var(--mpo-sub);
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.mpo-nav-link:hover { background: var(--mpo-canvas); color: var(--mpo-ink); }
.mpo-nav-link.is-active {
    background: color-mix(in srgb, var(--mpo-primary) 12%, transparent);
    color: var(--mpo-primary);
}

/* --------------------------- Toggle switch -------------------------- */
.mpo-switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: none; }
.mpo-switch input { opacity: 0; width: 0; height: 0; }
.mpo-switch .mpo-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--mpo-line); border-radius: 999px; transition: background .2s ease;
}
.mpo-switch .mpo-slider::before {
    content: ""; position: absolute; height: 26px; width: 26px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.mpo-switch input:checked + .mpo-slider { background: var(--mpo-primary); }
.mpo-switch input:checked + .mpo-slider::before { transform: translateX(20px); }

/* -------------------- Responsive data tables ------------------------ */
/* On phones the .mpo-table rows collapse into stacked cards using the
   data-label attribute rendered in the views. */
@media (max-width: 767px) {
    .mpo-table thead { display: none; }
    .mpo-table, .mpo-table tbody, .mpo-table tr, .mpo-table td { display: block; width: 100%; }
    .mpo-table tr {
        background: var(--mpo-surface);
        border: 1px solid var(--mpo-line);
        border-radius: 1rem;
        padding: .4rem .25rem;
        margin-bottom: .85rem;
    }
    .mpo-table td {
        display: flex; justify-content: space-between; gap: 1rem;
        padding: .6rem .9rem; text-align: right; border: none;
    }
    .mpo-table td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--mpo-sub); text-align: left;
    }
    .mpo-table td[data-label=""]::before { content: ""; }
}

/* Drag & drop reordering (generic, used by [data-mpo-sortable] lists). */
[data-mpo-sortable] [data-id] { cursor: default; }
[data-mpo-sortable] [data-id].mpo-dragging { opacity: .5; }
.mpo-drag-handle { cursor: grab; touch-action: none; color: var(--mpo-sub); }
.mpo-drag-handle:active { cursor: grabbing; }

/* ==========================================================================
   Booking module — smartphone refinements (admin backend).
   The list tables carry .mpo-booking-table and collapse to cards < 768px.
   ========================================================================== */
@media (max-width: 767px) {
    /* Drag & drop is desktop-only (no touch DnD): hide the handle cell so it
       doesn't add a lone icon row to every card. */
    .mpo-booking-table td[data-label=""] { display: none; }

    /* Tighter, app-like cards with clearer separation. */
    .mpo-booking-table tr { padding: .15rem .15rem .35rem; border-radius: 1.1rem; }
    .mpo-booking-table td { padding: .55rem .9rem; align-items: center; }

    /* Make the first data cell (name/customer) read like a card title:
       full width, left aligned, no inline label. */
    .mpo-booking-table td.mpo-booking-title { display: block; text-align: left; padding-top: .8rem; }
    .mpo-booking-table td.mpo-booking-title::before { display: none; }
    .mpo-booking-table td.mpo-booking-title > div { justify-content: flex-start; }

    /* Action cell: stack the buttons and give them comfortable tap targets. */
    .mpo-booking-table td.mpo-booking-actions { display: block; text-align: left; }
    .mpo-booking-table td.mpo-booking-actions::before { display: block; margin-bottom: .45rem; }
    .mpo-booking-table td.mpo-booking-actions > div { justify-content: flex-start; gap: .5rem; }
    .mpo-booking-table td.mpo-booking-actions .mpo-btn-icon { width: 48px; height: 48px; }

    /* Status summary tiles: a touch more height for easy tapping. */
    .mpo-booking-summary a { padding: 1rem .75rem; }
}

/* ==========================================================================
   Booking module — calendar (admin overview, Booksy-style week/day grid).
   The grid template columns and the per-event top/height/left/width are set
   inline from PHP; everything else lives here. --mpo-cal-hour (px per hour) and
   --mpo-cal-h (total grid height) are provided inline on .mpo-cal.
   ========================================================================== */
.mpo-cal { --mpo-cal-hour: 120px; --mpo-cal-h: 1320px; }

.mpo-cal-grid {
    display: grid;
    position: relative;
    width: 100%;
}

/* Header row */
.mpo-cal-corner { border-bottom: 1px solid var(--mpo-line); }
.mpo-cal-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    padding: .6rem .25rem;
    border-bottom: 1px solid var(--mpo-line);
    border-left: 1px solid var(--mpo-line);
    text-align: center;
}
.mpo-cal-head-wd  { font-size: .75rem; font-weight: 600; color: var(--mpo-sub); text-transform: uppercase; letter-spacing: .03em; }
.mpo-cal-head-day { font-size: 1.05rem; font-weight: 700; color: var(--mpo-ink); line-height: 1.1; }
.mpo-cal-head.is-today { background: color-mix(in srgb, var(--mpo-primary) 8%, transparent); }
.mpo-cal-head.is-today .mpo-cal-head-wd,
.mpo-cal-head.is-today .mpo-cal-head-day { color: var(--mpo-primary); }

/* Time axis (left gutter) */
.mpo-cal-axis {
    position: relative;
    height: var(--mpo-cal-h);
}
.mpo-cal-axis-label {
    position: absolute;
    right: .5rem;
    transform: translateY(-50%);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mpo-sub);
    white-space: nowrap;
}
/* The first/last labels would otherwise sit centred on the header divider and
   the bottom line; anchor them just inside the grid so they read cleanly. */
.mpo-cal-axis-label:first-child { transform: translateY(2px); }
.mpo-cal-axis-label:last-child  { transform: translateY(calc(-100% - 2px)); }

/* Day columns: relative box with hourly grid lines drawn as a background. */
.mpo-cal-body {
    position: relative;
    height: var(--mpo-cal-h);
    border-left: 1px solid var(--mpo-line);
    background-image:
        repeating-linear-gradient(
            to bottom,
            var(--mpo-line) 0, var(--mpo-line) 1px,
            transparent 1px, transparent var(--mpo-cal-hour)
        ),
        repeating-linear-gradient(
            to bottom,
            color-mix(in srgb, var(--mpo-line) 45%, transparent) 0,
            color-mix(in srgb, var(--mpo-line) 45%, transparent) 1px,
            transparent 1px, transparent calc(var(--mpo-cal-hour) / 2)
        );
}
.mpo-cal-body.is-today { background-color: color-mix(in srgb, var(--mpo-primary) 5%, transparent); }

/* Holiday columns: greyed out + faint diagonal hatching so they read as closed. */
.mpo-cal-head.is-holiday .mpo-cal-head-wd,
.mpo-cal-head.is-holiday .mpo-cal-head-day { color: var(--mpo-sub); }
.mpo-cal-head-tag {
    margin-top: .1rem;
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mpo-sub);
}
/* Grey tint via background-COLOR only, so the gridline background-IMAGE on
   .mpo-cal-body is preserved (same approach as .is-today). */
.mpo-cal-body.is-holiday { background-color: color-mix(in srgb, var(--mpo-sub) 14%, transparent); }
.mpo-cal-head.is-holiday { background-color: color-mix(in srgb, var(--mpo-sub) 10%, transparent); }

/* Events: absolutely positioned colour blocks (placement set inline). */
.mpo-cal-event {
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: .3rem .45rem;
    border-radius: .55rem;
    border-left: 3px solid var(--ev-accent, var(--mpo-primary));
    background: var(--ev-bg, var(--mpo-canvas));
    color: var(--ev-ink, var(--mpo-ink));
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: box-shadow .15s ease, filter .15s ease;
    z-index: 2;
    min-height: 44px;
}
.mpo-cal-event:hover { box-shadow: 0 4px 14px rgba(0,0,0,.14); filter: brightness(.99); z-index: 4; }

/* Drag & drop (only when the user may edit). touch-action:none lets a touch
   drag the event instead of scrolling the page. */
.mpo-cal[data-can-edit="1"] .mpo-cal-event { cursor: grab; touch-action: none; }
.mpo-cal-event--dragging {
    cursor: grabbing;
    user-select: none;
    opacity: .95;
    box-shadow: 0 12px 30px rgba(0,0,0,.25) !important;
    transform: scale(1.02);
}
.mpo-cal-col--target { background-color: color-mix(in srgb, var(--mpo-primary) 12%, transparent); }
.mpo-cal-event--saved { outline: 2px solid #22c55e; outline-offset: -1px; }
.mpo-cal-event-time  { font-size: .68rem; font-weight: 700; line-height: 1.15; color: var(--ev-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpo-cal-event-title { font-size: .8rem;  font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpo-cal-event-sub   { font-size: .72rem; line-height: 1.2; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpo-cal-event.is-cancelled .mpo-cal-event-title,
.mpo-cal-event.is-rejected  .mpo-cal-event-title { text-decoration: line-through; }

/* "Now" indicator line (added by the view's script on today's column). */
.mpo-cal-now {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 2px solid #ff3b30;
    z-index: 3;
    pointer-events: none;
}
.mpo-cal-now::before {
    content: "";
    position: absolute;
    left: -1px; top: -4px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ff3b30;
}

/* Status colour key + agenda rows share the same palette tokens. */
.mpo-cal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ev-accent); flex: none; }

.mpo-cal-agenda-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .8rem;
    border-radius: .85rem;
    border-left: 3px solid var(--ev-accent, var(--mpo-primary));
    background: var(--ev-bg, var(--mpo-canvas));
    color: var(--ev-ink, var(--mpo-ink));
    text-decoration: none;
    transition: filter .15s ease;
}
.mpo-cal-agenda-row:hover { filter: brightness(.97); }
.mpo-cal-agenda-time { width: 48px; flex: none; font-weight: 700; font-size: .8rem; line-height: 1.2; color: var(--ev-accent); }

/* Employee filter chips (horizontally scrollable, hidden scrollbar). */
.mpo-cal-staff { scrollbar-width: none; -ms-overflow-style: none; }
.mpo-cal-staff::-webkit-scrollbar { display: none; }
.mpo-staff-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    padding: .3rem .8rem .3rem .35rem;
    border-radius: 999px;
    border: 1px solid var(--mpo-line);
    background: var(--mpo-surface);
    color: var(--mpo-ink);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mpo-staff-chip--all { padding-left: .9rem; }
.mpo-staff-chip:hover { background: var(--mpo-canvas); }
.mpo-staff-chip.is-active { background: var(--mpo-primary); color: var(--mpo-primary-contrast); border-color: transparent; }
.mpo-staff-ini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--mpo-canvas);
    color: var(--mpo-sub);
    font-size: .68rem;
    font-weight: 700;
}
.mpo-staff-chip.is-active .mpo-staff-ini { background: rgba(255,255,255,.25); color: #fff; }

/* Desktop slide-over panel for in-place booking edit.
   Uses visibility (not display) so the slide/fade transitions actually run —
   an element can't transition out of display:none. While closed it stays
   visibility:hidden, which is non-interactive and lets clicks pass through. */
.mpo-booking-panel {
    position: fixed; inset: 0; z-index: 60;
    visibility: hidden;
    transition: visibility 0s linear .34s;   /* defer hide until slide-out ends */
}
.mpo-booking-panel.is-open { visibility: visible; transition: visibility 0s; }
.mpo-booking-panel-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .3s ease;
}
.mpo-booking-panel.is-open .mpo-booking-panel-backdrop { opacity: 1; }
.mpo-booking-panel-sheet {
    position: absolute; top: 0; right: 0; height: 100%;
    width: min(580px, 100%);
    background: var(--mpo-canvas);
    border-left: 1px solid var(--mpo-line);
    box-shadow: -12px 0 40px rgba(0,0,0,.20);
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.32,.72,0,1);
    will-change: transform;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mpo-booking-panel.is-open .mpo-booking-panel-sheet { transform: translateX(0); }
.mpo-booking-panel-body { padding: 1rem 1rem 1.25rem; }

/* Compact everything inside the panel so the whole booking fits without
   scrolling. Desktop-only, so smaller controls / 0.85rem text are fine here. */
.mpo-booking-panel-body .mpo-card { padding: .8rem .9rem; border-radius: 1rem; }
.mpo-booking-panel-body .mpo-space-y-3 > * + * { margin-top: .6rem; }
.mpo-booking-panel-body .mpo-space-y-4 > * + * { margin-top: .55rem; }
.mpo-booking-panel-body h2 { font-size: 1.05rem; }
.mpo-booking-panel-body h3 { font-size: .82rem; margin-bottom: .1rem; }
.mpo-booking-panel-body .mpo-label { font-size: .7rem; margin-bottom: .15rem; }
.mpo-booking-panel-body .mpo-hint { font-size: .66rem; margin-top: .1rem; }
.mpo-booking-panel-body .mpo-input,
.mpo-booking-panel-body .mpo-select,
.mpo-booking-panel-body .mpo-textarea {
    min-height: 34px;
    padding: .35rem .55rem;
    font-size: .82rem;
    border-radius: .55rem;
}
.mpo-booking-panel-body .mpo-textarea { min-height: 42px; }
/* Action buttons: side by side instead of stacked, to save vertical space. */
.mpo-booking-panel-body .mpo-card.mpo-flex { flex-direction: row; gap: .6rem; }
.mpo-booking-panel-body .mpo-card.mpo-flex > * { flex: 1; width: auto; }
.mpo-booking-panel-body .mpo-btn-primary,
.mpo-booking-panel-body .mpo-btn-ghost {
    min-height: 38px; padding: .5rem .75rem; font-size: .85rem;
}

/* Honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .mpo-booking-panel,
    .mpo-booking-panel-backdrop,
    .mpo-booking-panel-sheet { transition: none; }
}

/* Status palette (light). --ev-accent is the saturated key colour. */
.is-new       { --ev-accent: #f59e0b; --ev-bg: #fff6e6; --ev-ink: #92400e; }
.is-confirmed { --ev-accent: #22c55e; --ev-bg: #e8f8ee; --ev-ink: #166534; }
.is-completed { --ev-accent: #3b82f6; --ev-bg: #e9f1ff; --ev-ink: #1e40af; }
.is-rejected  { --ev-accent: #ef4444; --ev-bg: #fdebeb; --ev-ink: #991b1b; }
.is-cancelled { --ev-accent: #9ca3af; --ev-bg: #f1f1f3; --ev-ink: #4b5563; }

/* Dark mode: translucent fills over the dark surface, lighter ink. */
.dark .is-new       { --ev-bg: rgba(245,158,11,.16); --ev-ink: #fcd34d; }
.dark .is-confirmed { --ev-bg: rgba(34,197,94,.16);  --ev-ink: #86efac; }
.dark .is-completed { --ev-bg: rgba(59,130,246,.16); --ev-ink: #93c5fd; }
.dark .is-rejected  { --ev-bg: rgba(239,68,68,.16);  --ev-ink: #fca5a5; }
.dark .is-cancelled { --ev-bg: rgba(156,163,175,.16);--ev-ink: #cbd5e1; }

/* Status <select> with a colour dot reflecting the chosen status. The dot sits
   inside the field on the left; the select gets matching left padding. */
.mpo-status-field { position: relative; }
.mpo-status-field [data-mpo-status-dot] {
    position: absolute;
    left: .7rem; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}
.mpo-status-field .mpo-status-select { padding-left: 1.6rem; }
.mpo-booking-panel-body .mpo-status-field .mpo-status-select { padding-left: 1.4rem; }