/*
 * Mindfield ERP - brand theme
 * ---------------------------------------------------------------------------
 * All brand colours are declared once as named CSS variables under :root, then
 * mapped onto the Bootstrap 5 component variables the app uses. To re-brand,
 * change the values in the "Brand palette" block only.
 *
 * Loaded AFTER the Bootstrap CDN stylesheet so these overrides win.
 */

:root {
    /* ---- Brand palette (single source of truth) ---- */
    --mcc-primary-dark:  #1F1C38;
    --mcc-primary-light: #B4DED1;
    --mcc-magenta:       #D72A62;
    --mcc-purple:        #463C97;
    --mcc-yellow:        #F9A33C;
    --mcc-salmon:        #F76245;
    --mcc-blue:          #2D83BA;
    --mcc-teal:          #57C4C6;

    /* RGB triplets (for rgba() tints) */
    --mcc-primary-dark-rgb:  31, 28, 56;
    --mcc-primary-light-rgb: 180, 222, 209;
    --mcc-magenta-rgb:       215, 42, 98;
    --mcc-purple-rgb:        70, 60, 151;
    --mcc-yellow-rgb:        249, 163, 60;
    --mcc-salmon-rgb:        247, 98, 69;
    --mcc-blue-rgb:          45, 131, 186;
    --mcc-teal-rgb:          87, 196, 198;

    /* Derived shades */
    --mcc-primary-dark-hover:  #2e2a52;
    --mcc-primary-dark-active: #16142b;
    --mcc-blue-hover:          #226d9b;
    --mcc-page-bg:             #eef4f2; /* faint primary-light tint */

    /* ---- Map brand -> Bootstrap roles ---- */
    --bs-primary:        var(--mcc-primary-dark);
    --bs-primary-rgb:    var(--mcc-primary-dark-rgb);
    --bs-dark-rgb:       var(--mcc-primary-dark-rgb); /* navbar .bg-dark */

    --bs-link-color:        var(--mcc-blue);
    --bs-link-color-rgb:    var(--mcc-blue-rgb);
    --bs-link-hover-color:  var(--mcc-blue-hover);
}

/* ---- Page chrome ---- */
body.bg-light { background-color: var(--mcc-page-bg) !important; }

.card-header {
    background-color: rgba(var(--mcc-primary-light-rgb), .35);
}

/* Configuration landing tiles */
.config-card {
    color: var(--mcc-primary-dark);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    cursor: pointer;
}
.config-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(var(--mcc-primary-dark-rgb), .15);
    border-color: rgba(var(--mcc-primary-dark-rgb), .35);
}

/* ---- Primary buttons ---- */
.btn-primary {
    --bs-btn-bg:                  var(--mcc-primary-dark);
    --bs-btn-border-color:        var(--mcc-primary-dark);
    --bs-btn-hover-bg:            var(--mcc-primary-dark-hover);
    --bs-btn-hover-border-color:  var(--mcc-primary-dark-hover);
    --bs-btn-active-bg:           var(--mcc-primary-dark-active);
    --bs-btn-active-border-color: var(--mcc-primary-dark-active);
    --bs-btn-disabled-bg:         var(--mcc-primary-dark);
    --bs-btn-disabled-border-color: var(--mcc-primary-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color:               var(--mcc-primary-dark);
    --bs-btn-border-color:        var(--mcc-primary-dark);
    --bs-btn-hover-bg:            var(--mcc-primary-dark);
    --bs-btn-hover-border-color:  var(--mcc-primary-dark);
    --bs-btn-active-bg:           var(--mcc-primary-dark);
    --bs-btn-active-border-color: var(--mcc-primary-dark);
}

/* ---- Form focus ring in brand colour ---- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--mcc-primary-dark-rgb), .5);
    box-shadow: 0 0 0 .25rem rgba(var(--mcc-primary-dark-rgb), .2);
}
.form-check-input:checked {
    background-color: var(--mcc-primary-dark);
    border-color: var(--mcc-primary-dark);
}

/* ---- Badges (permission-group chips) ---- */
.badge.bg-primary { background-color: var(--mcc-primary-dark) !important; color: #fff; }

/* ---- Virtual Office floating panel (Part 5) ---- */
.vo-panel {
    position: fixed;
    z-index: 1040;
    background: #000;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
}
/* Restore / picture-in-picture size, bottom-right of the viewport. */
.vo-panel.pip {
    right: 1rem;
    bottom: 1rem;
    width: 360px;
    height: 232px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
}
/* Maximized: fill the payload area below the navbar. */
.vo-panel.maximized {
    top: var(--vo-top, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    border-radius: 0;
}
.vo-frame {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.vo-controls {
    position: absolute;
    top: .3rem;
    right: .3rem;
    display: flex;
    gap: .25rem;
    z-index: 2;
}
.vo-ctrl {
    border: 0;
    border-radius: .25rem;
    width: 26px;
    height: 26px;
    line-height: 1;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
}
.vo-ctrl:hover { background: rgba(0, 0, 0, .85); }
.vo-drag { cursor: move; touch-action: none; } /* touch-action:none lets pointer-drag work on touch */
.vo-panel.vo-dragging .vo-frame { pointer-events: none; } /* don't let the office iframe eat the drag */

/* Header map toggle — borderless icon, styled like the audio mute toggle. */
.vo-toggle {
    border: 0;
    background: transparent;
    color: #6c757d; /* muted grey when inactive (panel closed) */
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: .25rem .35rem;
}
.vo-toggle:hover { color: #fff; }
.vo-toggle.active { color: #fff; } /* white when the panel is open */

/* ---- Operations right slide-out tray (Part 7A) ---- */
.tray-right {
    position: fixed;
    top: var(--mcc-nav-h, 56px);
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 90vw;
    background: #fff;
    border-left: 1px solid rgba(var(--mcc-primary-dark-rgb), .12);
    box-shadow: -.25rem 0 1rem rgba(0, 0, 0, .12);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1035;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tray-right.tray-right-open { transform: translateX(0); }
.tray-right-handle {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1036;
    width: 26px;
    height: 52px;
    border: 0;
    background: rgba(var(--mcc-primary-dark-rgb), .6);
    color: #fff;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    transition: right .25s ease;
}
.tray-right-handle:hover { background: var(--mcc-primary-dark); }
.tray-right-handle.open { right: 360px; }
@media (max-width: 767.98px) {
    .tray-right { width: 90vw; }
    .tray-right-handle.open { right: 90vw; }
}

/* Navbar (user) dropdown must sit ABOVE the right slide-out tray (z 1035 / handle 1036). */
.navbar .dropdown-menu { z-index: 1050; }

/* ---- Operations timesheet (Part 7B) ---- */
.ts { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .6rem; }

/* Two-column layout: calendar / bar / keypad on the left (shared right edge = strong vertical
   line); action buttons (Copy From/To, Clear, Reset) stacked in a fixed-width right column. */
.ts-grid {
    display: grid;
    grid-template-columns: 1fr 92px;
    grid-template-areas: "cal copy" "bar clear" "keys reset";
    gap: .5rem;
    align-items: stretch;
}
.ts-cal { grid-area: cal; }
.ts-copy { grid-area: copy; display: flex; flex-direction: column; gap: .4rem; }
.ts-copy .btn { flex: 1 1 0; width: 100%; white-space: nowrap; }
.ts-clear { grid-area: clear; width: 100%; }
.ts-keypad { grid-area: keys; }
.ts-reset { grid-area: reset; width: 100%; }

/* Day selector (calendar) — compact */
.ts-cal { background: rgba(var(--mcc-primary-light-rgb), .25); border: 1px solid rgba(0, 0, 0, .06); border-radius: .5rem; padding: .35rem .4rem; }
.ts-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2rem; }
.ts-cal-title { font-weight: 600; font-size: .8rem; }
.ts-cal-nav { border: 0; background: transparent; font-size: 1.05rem; line-height: 1; padding: 0 .35rem; cursor: pointer; color: var(--mcc-primary-dark); border-radius: .25rem; }
.ts-cal-nav:hover { background: rgba(var(--mcc-primary-dark-rgb), .08); }
.ts-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.ts-cal-dow { font-size: .6rem; color: #6c757d; padding: .05rem 0; }
.ts-cal-day { border: 0; background: transparent; aspect-ratio: 1 / 1; border-radius: 50%; font-size: .7rem; cursor: pointer; color: var(--mcc-primary-dark); display: flex; align-items: center; justify-content: center; padding: 0; }
.ts-cal-day:hover:not(:disabled) { background: rgba(var(--mcc-primary-dark-rgb), .08); }
.ts-cal-other { color: #c3c9cf; cursor: default; }
.ts-cal-day:disabled { cursor: default; }
.ts-cal-today { font-weight: 700; }                                   /* current day: bold number */
.ts-cal-has-data:not(.ts-cal-sel):not(.ts-cal-anchor):not(.ts-cal-target) { box-shadow: inset 0 0 0 2px var(--mcc-purple); } /* day with recorded time */
.ts-cal-sel { background: var(--mcc-blue); color: #fff; }
.ts-cal-sel:hover { background: var(--mcc-blue-hover); }
.ts-cal-anchor { background: #e9ecef; color: #adb5bd; }               /* selected day, greyed during a copy */
.ts-cal-dim { opacity: .4; }                                          /* non-pickable day during a copy */
.ts-cal-target { background: var(--mcc-teal); color: #fff; }          /* Copy To: chosen target date(s) */

/* Recorded-hours bar (visual cap 8:00; label may exceed) */
.ts-bar { grid-area: bar; position: relative; min-width: 0; min-height: 34px; background: #e9ecef; border-radius: .4rem; overflow: hidden; }
.ts-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--mcc-primary-light); transition: width .2s ease, background-color .2s ease; }
.ts-bar.over .ts-bar-fill { background: var(--mcc-yellow); } /* > 8h recorded */
.ts-bar-label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .82rem; color: var(--mcc-primary-dark); }
.ts-copy-from.active, .ts-copy-to.active { background-color: var(--mcc-blue) !important; border-color: var(--mcc-blue) !important; color: #fff !important; } /* lit while active */

/* Time keypad — square, equal-size buttons; small gap between the hours and minutes groups */
.ts-keypad { display: flex; gap: .45rem; align-items: start; }
.ts-hours { flex: 5 1 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.ts-mins  { flex: 2 1 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.ts-h, .ts-m { aspect-ratio: 1 / 1; width: 100%; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--mcc-primary-dark-rgb), .25); background: #fff; border-radius: .3rem; font-size: .72rem; cursor: pointer; color: var(--mcc-primary-dark); }
.ts-h:hover, .ts-m:hover { border-color: var(--mcc-blue); }
.ts-h.sel, .ts-m.sel { background: var(--mcc-blue); border-color: var(--mcc-blue); color: #fff; }
.ts-h:disabled, .ts-m:disabled { opacity: .45; cursor: not-allowed; } /* locked while punched in */

/* Project buttons (active contracts) */
.ts-projects { display: flex; flex-direction: column; gap: .35rem; }
.ts-project { text-align: center; border: 1px solid rgba(0, 0, 0, .1); background: #f1f3f5; border-radius: .4rem; padding: .55rem .6rem; font-size: .72rem; line-height: 1.25; cursor: pointer; color: var(--mcc-primary-dark); width: 100%; }
.ts-project:hover { background: #e9ecef; }
.ts-project.active { background: var(--mcc-salmon); border-color: var(--mcc-salmon); color: #fff; }   /* punched in */
.ts-project.pending { box-shadow: inset 0 0 0 2px var(--mcc-teal); }                                    /* shift-distribute */
.ts-project:disabled { opacity: .5; cursor: not-allowed; }                                              /* during a copy */
.ts-tally { font-weight: 600; }

/* Inline-editable comment cell on the Time Entries list */
.te-comment { cursor: pointer; min-width: 14rem; }
.te-comment:hover { background: rgba(var(--mcc-primary-dark-rgb), .05); }
.te-comment.saved { background: rgba(var(--mcc-primary-light-rgb), .55); transition: background-color .2s ease; }
.te-comment textarea { min-width: 13rem; }

/* ---- Agenda "now" marker (Part 4.1) ---- */
/* In-progress event: its time + title shown in brand magenta. */
.agenda-now, .agenda-now * { color: var(--mcc-magenta) !important; font-weight: 600; }
/* Between/before events: a magenta divider line where "now" falls. */
.agenda-now-line { border-top: 2px solid var(--mcc-magenta); margin: 2px 0; }

/* ---- Audio (narration) mute indicator ---- */
.audio-indicator {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: .25rem .35rem;
    user-select: none;
}

/* ---- Meeting reminder tag (Part 4.1) ---- */
.meeting-reminder {
    border: 0;
    border-radius: .375rem;
    padding: .25rem .6rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
/* > 1:00 remaining: yellow with dark text */
.meeting-reminder.is-soon {
    background-color: var(--mcc-yellow);
    color: var(--mcc-primary-dark);
}
/* <= 1:00 (incl. in-progress): magenta with light text, flashing 0.5s on / 0.5s off */
.meeting-reminder.is-urgent {
    background-color: var(--mcc-magenta);
    color: #fff;
    animation: mcc-blink 1s steps(1, end) infinite;
}
@keyframes mcc-blink {
    0%, 49.999% { opacity: 1; }
    50%, 100%   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .meeting-reminder.is-urgent { animation: none; }
}

/* ---- Alerts: tinted brand backgrounds with readable text ---- */
.alert { --bs-alert-color: var(--mcc-primary-dark); --bs-alert-border-color: rgba(var(--mcc-primary-dark-rgb), .15); }

.alert-success {
    --bs-alert-bg: rgba(var(--mcc-primary-light-rgb), .55);
    --bs-alert-border-color: rgba(var(--mcc-teal-rgb), .45);
    --bs-alert-color: #14564a;
}
.alert-info {
    --bs-alert-bg: rgba(var(--mcc-teal-rgb), .16);
    --bs-alert-border-color: rgba(var(--mcc-teal-rgb), .45);
    --bs-alert-color: #1c5b5c;
}
.alert-warning {
    --bs-alert-bg: rgba(var(--mcc-yellow-rgb), .18);
    --bs-alert-border-color: rgba(var(--mcc-yellow-rgb), .55);
    --bs-alert-color: #8a4f06;
}
.alert-danger {
    --bs-alert-bg: rgba(var(--mcc-magenta-rgb), .12);
    --bs-alert-border-color: rgba(var(--mcc-magenta-rgb), .45);
    --bs-alert-color: #9e1f49;
}

/* ===== Dashboard pullout tray (Part 4) ===== */
/* Body becomes a column so the shell can fill the height under the navbar. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .navbar { flex: 0 0 auto; }
/* Desktop tray: pin to the viewport so the two panels split 50/50 and scroll
   internally (overridden on mobile below, where the page just stacks/scrolls). */
body.has-tray { height: 100vh; overflow: hidden; }

.app-shell { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
.app-main  { flex: 1 1 auto; min-width: 0; overflow: auto; }
/* Non-SSO users have no left tray (body lacks .has-tray): the shell wraps a single full-width
   column, so let the page scroll naturally instead of inside .app-main. */
body:not(.has-tray) .app-main { overflow: visible; }
/* #mcc-content is the app-shell swap target; it's focused after each swap for a11y continuity. */
#mcc-content:focus { outline: none; }
/* Make tooltip overlays click-to-dismiss (so a stranded tooltip can always be cleared). */
.tooltip { pointer-events: auto; cursor: pointer; }

.tray {
    flex: 0 0 33.333vw;
    width: 33.333vw;
    background: #fff;
    border-right: 1px solid rgba(var(--mcc-primary-dark-rgb), .12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex-basis .25s ease, width .25s ease;
}
.tray-closed .tray { flex-basis: 0; width: 0; border-right: none; }

.tray-panel { flex: 1 1 50%; display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.tray-panel:last-child { border-bottom: none; }
.tray-panel-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; background: rgba(var(--mcc-primary-light-rgb), .4); border-bottom: 1px solid rgba(0,0,0,.06); }
.tray-panel-body { flex: 1 1 auto; overflow-y: auto; padding: .5rem .75rem; }
/* ---- Tasks widget (streamlined; mockup styling in brand colours) ---- */
.tray-empty { padding: .75rem; }

/* Add a task */
.tray-addbar { margin-bottom: .15rem; }
.tray-add-trigger { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: 0;
    padding: .4rem .5rem; border-radius: 6px; color: var(--mcc-blue); font-weight: 600; cursor: pointer; text-align: left; }
.tray-add-trigger:hover { background: rgba(var(--mcc-blue-rgb), .08); }
.tray-addbar.open .tray-add-trigger { background: rgba(var(--mcc-blue-rgb), .12); }
.tray-add-card { background: rgba(var(--mcc-blue-rgb), .06); border: 1px solid rgba(var(--mcc-blue-rgb), .25);
    border-radius: 8px; padding: .5rem .6rem; margin: .1rem 0 .35rem; }
.tray-add-title, .tray-add-details { display: block; width: 100%; border: 0; background: transparent; padding: .15rem 0; outline: none; }
.tray-add-title { font-weight: 600; color: var(--mcc-primary-dark); }
.tray-add-details { font-size: .85em; color: #5f6368; border-top: 1px solid rgba(0,0,0,.08); margin-top: .1rem; }
.tray-add-pills { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; flex-wrap: wrap; }
.tray-add-date { border: 1px solid rgba(0,0,0,.15); border-radius: 999px; font-size: .78em; padding: .05rem .4rem; }

/* Pills (Today / Tomorrow / clock) */
.tray-pill { border: 1px solid rgba(var(--mcc-blue-rgb), .4); background: #fff; color: var(--mcc-blue);
    border-radius: 999px; padding: .1rem .6rem; font-size: .78em; line-height: 1.5; cursor: pointer; }
.tray-pill:hover { background: rgba(var(--mcc-blue-rgb), .08); }
.tray-pill.active { background: var(--mcc-blue); border-color: var(--mcc-blue); color: #fff; }

/* Task rows */
.tray-task-row { display: flex; align-items: flex-start; gap: .4rem; padding: .3rem .3rem .3rem .1rem; border-radius: 6px; }
.tray-task-row:hover { background: rgba(var(--mcc-primary-light-rgb), .4); }
.tray-check { margin-top: .2rem; flex: 0 0 auto; cursor: pointer; }
.tray-task-main { flex: 1 1 auto; min-width: 0; }
.tray-task-title { line-height: 1.3; cursor: text; word-break: break-word; }
.tray-task-notes { font-size: .82em; color: #5f6368; cursor: text; margin-top: .05rem; white-space: pre-wrap; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tray-link { color: var(--mcc-blue); text-decoration: underline; }
.tray-task-notes-empty { color: #9aa0a6; font-style: italic; display: none; }
.tray-task-row:hover .tray-task-notes-empty { display: block; }
.tray-editable:hover { background: rgba(var(--mcc-blue-rgb), .06); border-radius: 4px; }
.tray-inline { width: 100%; border: 1px solid rgba(var(--mcc-blue-rgb), .5); border-radius: 4px; padding: .1rem .3rem; font: inherit; outline: none; resize: vertical; }

/* Due pill on a task */
.tray-due-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }
/* Same fixed height for both pills so the icon-only clock matches the text pill (border-box: border included). */
.tray-due { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid; border-radius: 999px; padding: 0 .55rem; min-height: 1.4rem; font-size: .75em; line-height: 1; }
.tray-clock { display: none; align-items: center; padding: 0 .55rem; min-height: 1.4rem; font-size: .75em; line-height: 1; }  /* set-due pill: revealed on hover */
.tray-task-row:hover .tray-clock { display: inline-flex; }
.tray-due-over, .tray-due-due { color: var(--mcc-magenta); border-color: rgba(var(--mcc-magenta-rgb), .45); background: rgba(var(--mcc-magenta-rgb), .06); }
.tray-due-soon { color: #5f6368; border-color: rgba(0,0,0,.15); background: #fff; }

/* Hover-revealed drag handle + delete */
.tray-drag, .tray-del { opacity: 0; transition: opacity .12s; flex: 0 0 auto; }
.tray-task-row:hover .tray-drag, .tray-task-row:hover .tray-del { opacity: 1; }
.tray-drag { cursor: grab; color: #adb5bd; padding-top: .15rem; }
.tray-del { border: 0; background: none; color: #adb5bd; padding: 0 .15rem; line-height: 1; cursor: pointer; margin-top: .1rem; }
.tray-del:hover { color: var(--mcc-magenta); }

/* Drag-and-drop marks */
.tray-task.dragging { opacity: .45; }
.tray-drop-before { box-shadow: inset 0 2px 0 0 var(--mcc-blue); }
.tray-drop-after  { box-shadow: inset 0 -2px 0 0 var(--mcc-blue); }
.tray-drop-nest   { background: rgba(var(--mcc-primary-light-rgb), .55); border-radius: 4px; }

/* Toggle handle (desktop: rides the tray's right edge, vertically centred) */
.tray-handle {
    position: fixed;
    top: 50%;
    left: 33.333vw;
    transform: translateY(-50%);
    z-index: 1031;
    width: 26px;
    height: 52px;
    border: 0;
    background: rgba(var(--mcc-primary-dark-rgb), .6);
    color: #fff;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: left .25s ease;
}
.tray-handle:hover { background: var(--mcc-primary-dark); }
.tray-closed .tray-handle { left: 0; }
.tray-handle i { transition: transform .25s ease; }
.tray-closed .tray-handle i { transform: rotate(180deg); } /* points right (open) when closed */

/* Mobile: simple stacked layout — tray on top at natural height, content below,
   normal page scroll (no viewport pin, no 50/50, no internal panel scroll). */
@media (max-width: 767.98px) {
    body.has-tray { height: auto; overflow: visible; }
    .app-shell { flex-direction: column; }
    .app-main { overflow: visible; }
    .tray {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(var(--mcc-primary-dark-rgb), .12);
    }
    .tray-closed .tray { display: none; }
    .tray-panel { flex: 0 0 auto; }            /* natural height, stacked */
    .tray-panel-body { overflow: visible; }    /* show all, page scrolls */
    .tray-handle {
        top: auto; bottom: 16px; left: 50%;
        transform: translateX(-50%);
        width: 46px; height: 28px;
        border-radius: 8px;
        transition: none;
    }
    .tray-closed .tray-handle i { transform: rotate(-90deg); } /* down = open */
    .tray-open   .tray-handle i { transform: rotate(90deg);  } /* up = close */
}

/* ===== Freshservice "Unresolved" Ops card ===== */
/* Fixed height from the first paint so the card doesn't grow as tickets load (the loading,
   empty and loaded states all occupy the same scrollable area). */
#fs-unresolved { height: 18rem; overflow-y: auto; }
.fs-item {
    padding: .45rem .9rem;
    border-bottom: 1px solid rgba(var(--mcc-primary-dark-rgb), .08);
}
.fs-item:last-child { border-bottom: 0; }
/* Meta line: ticket number + requester email, small and muted (above the subject). */
.fs-meta { font-size: .75rem; line-height: 1.2; color: #6c757d; }
/* Subject link: block-level so long subjects wrap to the next row. */
.fs-subject {
    display: block;
    text-decoration: none;
    color: var(--mcc-primary-dark);
    overflow-wrap: anywhere;
}
.fs-subject:hover { text-decoration: underline; }
/* The current user's own tickets: pinned on top, bold + brand magenta. */
.fs-mine .fs-subject { color: var(--mcc-magenta); font-weight: 700; }

/* ===== Inline-editable holiday cells ===== */
#holiday-list .hol-edit { cursor: text; }
#holiday-list .hol-edit:hover { background: rgba(var(--mcc-primary-dark-rgb), .05); }

/* ===== Time-off month calendar ===== */
.to-cal { table-layout: fixed; }
.to-cal td.to-cal-day { height: 5.5rem; vertical-align: top; padding: .25rem; }
.to-cal td.to-cal-empty { background: rgba(var(--mcc-primary-dark-rgb), .03); }
.to-cal .to-cal-num { font-size: .8rem; color: #6c757d; }
.to-cal .to-cal-holiday { background: rgba(var(--mcc-primary-light-rgb), .35); }
.to-cal .to-cal-hol { font-size: .6rem; }
.to-cal .to-cal-entry {
    font-size: .72rem;
    line-height: 1.2;
    margin-top: .15rem;
    padding: .05rem .3rem;
    border-radius: .25rem;
    background: rgba(var(--mcc-purple-rgb), .14);
    color: var(--mcc-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- My Busy Times (Part 13) ---- */
.mbt-dot {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    flex: 0 0 auto;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, .12);
}
/* Slot palette (positional brand tokens) — used by both the dots and the busy blocks. */
.mbt-slot-0 { background: var(--mcc-primary-dark); }
.mbt-slot-1 { background: var(--mcc-primary-light); }
.mbt-slot-2 { background: var(--mcc-magenta); }
.mbt-slot-3 { background: var(--mcc-purple); }
.mbt-slot-4 { background: var(--mcc-yellow); }
.mbt-slot-5 { background: var(--mcc-salmon); }
.mbt-slot-6 { background: var(--mcc-blue); }
.mbt-slot-7 { background: var(--mcc-teal); }

.mbt-cal { user-select: none; }
.mbt-head { display: flex; }
.mbt-gutter-head { flex: 0 0 3rem; }
.mbt-day-head {
    flex: 1 1 0;
    text-align: center;
    font-weight: 600;
    font-size: .85rem;
    padding: .25rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.mbt-body { display: flex; }
.mbt-gutter { flex: 0 0 3rem; position: relative; }
.mbt-hour {
    font-size: .68rem;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
    text-align: right;
    padding-right: .35rem;
    box-sizing: border-box;
}
.mbt-day {
    flex: 1 1 0;
    position: relative;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    overflow: hidden;
}
.mbt-line { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(0, 0, 0, .06); }
.mbt-block {
    position: absolute;
    border-radius: 3px;
    opacity: .9;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    cursor: default;
}
/* Jump-to-date button on the My Busy Times grid (invisible date input over the calendar button). */
.mbt-datewrap { position: relative; display: inline-flex; }
.mbt-datepicker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; }
.mbt-datepicker::-webkit-calendar-picker-indicator { opacity: 0; }

.mbt-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mcc-primary-light-rgb, 180, 222, 209), .35);
    color: var(--mcc-primary-dark);
    z-index: 3;
}

/* ---- Team Availability (Ops dashboard) ---- */
.ta-scroll { overflow: auto; max-height: 60vh; }
.ta-inner { display: block; width: max-content; min-width: 100%; }
.ta-head, .ta-row { display: flex; align-items: stretch; }
.ta-head {
    position: sticky; z-index: 4; height: 28px;
    background: var(--bs-body-bg, #fff);
}
.ta-head-e { top: 0; }
.ta-head-p { top: 28px; box-shadow: 0 1px 0 var(--bs-border-color, #dee2e6); }
.ta-name {
    flex: 0 0 180px; width: 180px; box-sizing: border-box; padding: .25rem .75rem;
    display: flex; align-items: center; position: sticky; left: 0; z-index: 3;
    background: var(--bs-body-bg, #fff);
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ta-head .ta-name { z-index: 5; color: #6c757d; font-weight: 600; font-size: .8rem; }
.ta-track { position: relative; flex: 0 0 auto; box-sizing: border-box; }
.ta-hours { display: flex; align-items: center; }
.ta-hour {
    flex: 0 0 auto; box-sizing: border-box; padding: 0 .25rem;
    font-size: .78rem; color: #6c757d; line-height: 28px;
    border-left: 1px solid var(--bs-border-color, #eef0f2);
}
.ta-row { border-top: 1px dashed var(--bs-border-color, #e9ecef); }
.ta-lanes {
    height: 34px;
    background-image: repeating-linear-gradient(to right,
        transparent 0, transparent 63px,
        var(--bs-border-color, #eef0f2) 63px, var(--bs-border-color, #eef0f2) 64px);
}
.ta-bar { position: absolute; top: 9px; height: 16px; min-width: 3px; border-radius: 8px; }

/* Bars rotate through the 8 brand colours (see team-availability.js). */
.ta-color-0 { background-color: var(--mcc-primary-dark); }
.ta-color-1 { background-color: var(--mcc-primary-light); }
.ta-color-2 { background-color: var(--mcc-magenta); }
.ta-color-3 { background-color: var(--mcc-purple); }
.ta-color-4 { background-color: var(--mcc-yellow); }
.ta-color-5 { background-color: var(--mcc-salmon); }
.ta-color-6 { background-color: var(--mcc-blue); }
.ta-color-7 { background-color: var(--mcc-teal); }

/* Clickable date "button" that opens a native date picker (invisible input overlaid). */
.ta-datewrap {
    position: relative; display: inline-flex; align-items: center;
    padding: .15rem .55rem; border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .25rem; background: var(--bs-body-bg, #fff); cursor: pointer;
}
.ta-datewrap:hover { border-color: var(--mcc-primary-dark); }
.ta-datewrap #ta-date { cursor: pointer; color: var(--mcc-primary-dark); }
.ta-datepicker {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.ta-datepicker::-webkit-calendar-picker-indicator { opacity: 0; }

/* Filter toolbar + selectable name rows + saved-filter chips. */
.ta-toolbar { background: var(--bs-body-bg, #fff); }
.ta-editname { width: 150px; }
.ta-row .ta-name { cursor: pointer; user-select: none; }
.ta-row .ta-name:hover { background: rgba(var(--mcc-primary-dark-rgb, 31, 28, 56), .05); }
.ta-row.ta-selected .ta-name {
    background: rgba(var(--mcc-primary-dark-rgb, 31, 28, 56), .1); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--mcc-primary-dark);
}
.ta-chip {
    display: inline-flex; align-items: center; overflow: hidden;
    border: 1px solid var(--bs-border-color, #ced4da); border-radius: 1rem; font-size: .8rem;
}
.ta-chip-on { border-color: var(--mcc-primary-dark); background: rgba(var(--mcc-primary-dark-rgb, 31, 28, 56), .1); }
.ta-chip button { border: 0; background: transparent; padding: .1rem .5rem; line-height: 1.3; color: inherit; cursor: pointer; }
.ta-chip-name { font-weight: 500; }
.ta-chip-on .ta-chip-name { color: var(--mcc-primary-dark); }
.ta-chip-edit, .ta-chip-del { color: #6c757d; border-left: 1px solid var(--bs-border-color, #e9ecef) !important; }
.ta-chip-edit:hover { color: var(--mcc-primary-dark); }
.ta-chip-del:hover { color: var(--mcc-magenta); }