/* ==========================================================================
   ARKENSTONE REGISTRY — UI/UX ENHANCEMENTS
   Month picker, status dropdown, drag-to-reorder, shortcuts overlay,
   drawer date chips, task add row, print brief button.
   Loaded after phase3.css; uses the same design tokens.
   ========================================================================== */

/* ── MONTH PICKER POPUP ─────────────────────────────────────────────────── */
.mp-popup {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-rule);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    padding: 12px;
    min-width: 216px;
    user-select: none;
    animation: mp-appear 0.13s ease;
}
@keyframes mp-appear {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.mp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
}
.mp-year {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ink-primary);
    letter-spacing: -0.01em;
}
.mp-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 13px;
    transition: background 0.12s, color 0.12s;
}
.mp-nav:hover {
    background: var(--gold-faint);
    color: var(--gold);
}

.mp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}
.mp-month {
    padding: 8px 4px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-ink-primary);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    text-align: center;
    line-height: 1;
}
.mp-month:hover { background: var(--gold-faint); color: var(--gold); }
.mp-month.today { color: var(--gold); font-weight: 700; }
.mp-month.selected {
    background: var(--gold);
    color: #1a0f00;
    font-weight: 700;
}

.mp-footer {
    border-top: 0.5px solid var(--color-border-rule);
    padding-top: 7px;
    text-align: center;
}
.mp-tbd {
    background: none;
    border: none;
    color: var(--color-ink-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 6px;
    transition: background 0.1s, color 0.1s;
    font-family: var(--font-body);
}
.mp-tbd:hover {
    background: var(--color-canvas-secondary);
    color: var(--color-ink-primary);
}

/* ── Day grid (day-precision picker) ── */
.mp-days-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}
.mp-dow {
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
    padding: 2px 0;
}
.mp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 8px;
}
.mp-day {
    aspect-ratio: 1 / 1;
    min-width: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--color-ink-primary);
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-day:hover { background: var(--gold-faint); color: var(--gold); }
.mp-day.empty { background: none; cursor: default; pointer-events: none; }
.mp-day.today { color: var(--gold); font-weight: 700; }
.mp-day.selected { background: var(--gold); color: #1a0f00; font-weight: 700; }
.mp-back { background: none; border: none; color: var(--color-ink-muted); cursor: pointer; padding: 2px; display: inline-flex; }
.mp-back:hover { color: var(--gold); }
.mp-footer-2 { display: flex; gap: 6px; justify-content: space-between; }
.mp-wholemonth {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    transition: background 0.1s;
}
.mp-wholemonth:hover { background: var(--gold-faint); }

/* ── DRAWER DATE CHIPS ───────────────────────────────────────────────────── */
.drawer-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--color-border-rule);
    background: transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink-primary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1.4;
}
.drawer-date-chip:hover {
    background: var(--gold-faint);
    border-color: var(--gold);
    color: var(--gold);
}
.drawer-date-chip i {
    font-size: 11px;
    opacity: 0.6;
}

/* ── STATUS QUICK-PICKER (drawer) ───────────────────────────────────────── */
.status-drop {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-rule);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 168px;
    animation: mp-appear 0.12s ease;
}
.status-drop-item {
    display: block;
    width: 100%;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    transition: filter 0.1s, transform 0.1s;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}
.status-drop-item:hover  { filter: brightness(1.08); transform: translateX(2px); }
.status-drop-item.active { outline: 2px solid rgba(0,0,0,0.15); }

/* Clickable status badge in drawer */
#drawerStatus { cursor: pointer; }
#drawerStatus:hover { filter: brightness(1.1); }

/* ── TASK DRAG-TO-REORDER ───────────────────────────────────────────────── */
.task-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--color-ink-muted);
    font-size: 15px;
    padding: 2px 3px;
    margin-right: 2px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 3px;
}
.task-row:hover .task-drag-handle { opacity: 1; }
.task-drag-handle:active { cursor: grabbing; }

.task-row.task-dragging {
    opacity: 0.45;
    background: var(--gold-faint);
    border-radius: 8px;
}
.task-row.task-drag-over {
    border-top: 2px solid var(--gold) !important;
    padding-top: 2px;
}

/* Subtask drag handle + states (mirrors task drag) */
.subtask-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--color-ink-muted);
    font-size: 12px;
    padding: 0 2px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}
.subtask-row:hover .subtask-drag-handle { opacity: 0.7; }
.subtask-drag-handle:active { cursor: grabbing; }
.subtask-row.subtask-dragging { opacity: 0.45; background: var(--gold-faint); border-radius: 6px; }
.subtask-row.subtask-drag-over { border-top: 2px solid var(--gold) !important; }

/* Hide-completed toolbar */
.task-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 6px;
}
.task-hide-done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--color-border-rule);
    border-radius: 14px;
    padding: 3px 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.task-hide-done:hover { background: var(--gold-faint); color: var(--gold); border-color: var(--gold-pale); }
.task-hide-done.active { background: var(--gold-faint); color: var(--gold); border-color: var(--gold-pale); }
.task-hide-done i { font-size: 13px; }

/* ── WORKSTREAMS (cross-functional task lanes for all roles) ── */
.task-ws-filter, .mywork-ws-filter {
    border: 1px solid var(--color-border-rule);
    border-radius: 14px;
    background: var(--color-surface-card);
    color: var(--color-ink-muted);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 8px;
    cursor: pointer;
}
.task-workstream { color: var(--color-ink-muted); }
/* Workstream colour coding (selects show text colour; tags get tinted pills) */
.task-workstream.ws-design,    .mywork-ws.ws-design    { color: #9a6f08; }
.task-workstream.ws-sales,     .mywork-ws.ws-sales     { color: #1D5C38; }
.task-workstream.ws-marketing, .mywork-ws.ws-marketing { color: #7B4B94; }
.task-workstream.ws-editorial, .mywork-ws.ws-editorial { color: #2C5F8A; }
.task-workstream.ws-production,.mywork-ws.ws-production { color: #854020; }
.task-workstream.ws-finance,   .mywork-ws.ws-finance   { color: #0d7377; }
.task-workstream.ws-admin,     .mywork-ws.ws-admin     { color: var(--color-ink-muted); }
.task-workstream { font-weight: 600; }

.mywork-ws {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--color-canvas-secondary);
    letter-spacing: 0.02em;
}
.mywork-ws.ws-design    { background: var(--gold-faint); }
.mywork-ws.ws-sales     { background: rgba(29,92,56,0.10); }
.mywork-ws.ws-marketing { background: rgba(123,75,148,0.10); }
.mywork-ws.ws-editorial { background: rgba(44,95,138,0.10); }
.mywork-ws.ws-production{ background: rgba(133,64,32,0.10); }
.mywork-ws.ws-finance   { background: rgba(13,115,119,0.10); }

/* My Work header controls layout */
.mywork-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Dashboard "Add project task" shortcut button */
.qt-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: #1a0f00;
    border-radius: 16px;
    padding: 5px 14px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.12s, transform 0.12s;
}
.qt-open-btn i { font-size: 14px; }
.qt-open-btn:hover { filter: brightness(1.06); }
.qt-open-btn:active { transform: translateY(1px); }

/* ── QUICK ADD TASK MODAL ───────────────────────────────────────────────── */
.quick-task-modal { max-width: 560px; }
.qt-intro {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-ink-muted);
    margin: -8px 0 20px;
}
.qt-assignees { display: flex; flex-wrap: wrap; gap: 8px; }
.qt-assignees-empty { font-size: 12px; color: var(--color-ink-muted); }
.qt-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 5px;
    border: 1px solid var(--color-border-rule);
    background: transparent;
    color: var(--color-ink-muted);
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.qt-chip .member-avatar { flex-shrink: 0; }
.qt-chip:hover { border-color: var(--gold-pale, var(--gold)); }
.qt-chip.on {
    background: var(--gold-faint);
    border-color: var(--gold);
    color: var(--color-ink-primary);
}
/* Comfortable tap targets on touch devices */
@media (max-width: 1024px) {
    .qt-chip { padding: 7px 14px 7px 6px; font-size: 13px; }
    .qt-open-btn { padding: 7px 15px; font-size: 12.5px; }
}

/* ── TASK ADD ROW ENHANCEMENTS ──────────────────────────────────────────── */
.task-add-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.task-add-icon {
    color: var(--gold);
    font-size: 16px;
    flex-shrink: 0;
    opacity: 0.75;
}
.task-add-input { flex: 1; }
.task-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    border: none;
    border-radius: 8px;
    color: #1a0f00;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.1s;
}
.task-add-row:focus-within .task-add-btn { opacity: 1; }
.task-add-btn:hover { background: var(--gold-pale); }

/* ── PRINT BRIEF BUTTON ─────────────────────────────────────────────────── */
.drawer-actions-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-print-brief {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--color-border-rule);
    border-radius: 8px;
    color: var(--color-ink-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-print-brief:hover {
    background: var(--gold-faint);
    border-color: var(--gold);
    color: var(--gold);
}
.btn-print-brief i { font-size: 13px; }

/* ── KEYBOARD SHORTCUTS OVERLAY ─────────────────────────────────────────── */
.shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 7, 2, 0.6);
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}
.shortcuts-overlay.hidden { display: none; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.shortcuts-panel {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-rule);
    border-radius: 16px;
    padding: 28px;
    width: 560px;
    max-width: 94vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    animation: mp-appear 0.16s ease;
}
.shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.shortcuts-header h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: var(--color-ink-primary);
}
.shortcuts-section {
    margin-bottom: 18px;
}
.shortcuts-section-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-bottom: 8px;
}
.shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
}
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 0.5px solid var(--color-border-rule);
}
.shortcut-key {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    min-width: 68px;
    justify-content: flex-end;
}
.kbd {
    display: inline-block;
    padding: 2px 7px;
    background: var(--color-canvas-secondary);
    border: 1px solid var(--color-border-rule);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: 'DM Mono', 'Menlo', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink-primary);
    line-height: 1.5;
}
.shortcut-desc {
    color: var(--color-ink-muted);
    font-size: 12px;
    flex: 1;
}

/* ? help button in topbar */
.btn-shortcuts {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--color-border-rule);
    background: transparent;
    color: var(--color-ink-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    font-family: var(--font-body);
}
.btn-shortcuts:hover {
    background: var(--gold-faint);
    border-color: var(--gold);
    color: var(--gold);
}

/* ── TABLE DATE-PICKER CELLS ────────────────────────────────────────────── */
.date-picker-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-ink-primary);
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.date-cell-icon {
    font-size: 11px;
    color: var(--gold);
    opacity: 0.7;
    flex-shrink: 0;
}
/* clickable affordance only in edit mode */
.edit-mode .date-picker-cell {
    cursor: pointer;
}
.edit-mode .date-picker-cell:hover {
    background: var(--gold-faint);
    color: var(--gold);
}
.edit-mode .date-picker-cell:hover .date-cell-icon {
    opacity: 1;
}

/* ── TASK PRIORITY SELECT ───────────────────────────────────────────────── */
.task-priority {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid var(--color-border-rule);
    border-radius: 6px;
    background: var(--color-surface-card);
    color: var(--color-ink-muted);
    padding: 2px 5px;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: border-color 0.12s, color 0.12s;
}
.task-priority:hover { border-color: var(--gold); }
.task-priority.task-pri-p1 { color: #c0392b; border-color: rgba(192,57,43,0.35); }
.task-priority.task-pri-p2 { color: var(--gold); border-color: rgba(201,168,76,0.45); }
.task-priority.task-pri-p3 { color: #2C5F8A; border-color: rgba(44,95,138,0.35); }
.task-priority.task-pri-p4 { color: var(--color-ink-muted); }

/* Task row left-border member color — applied inline, set here as base */
.task-row { border-left: 3px solid transparent; transition: border-color 0.15s; }

/* Task author chip (created-by indicator) */
.task-author {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--color-ink-muted);
    font-size: 10px;
    opacity: 0.65;
    flex-shrink: 0;
}
.task-author i { font-size: 9px; }

/* ── TEAM OVERVIEW CARD (admin dashboard, full-width, 2-col grid) ─────── */

/* Outer card — full width, same surface as chart cards */
.tov-card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-rule);
    border-radius: var(--radius-card);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.tov-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.no-margin { margin: 0; }
.tov-admin-tag { font-weight: 400; color: var(--color-ink-muted); }

/* Filter tabs + sort row */
.tov-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tov-tabs { display: flex; gap: 4px; }
.tov-tab {
    background: none;
    border: 1px solid var(--color-border-rule);
    border-radius: 20px;
    padding: 4px 13px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-ink-muted);
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tov-tab:hover  { border-color: var(--gold); color: var(--gold); }
.tov-tab.active { background: var(--gold-faint); border-color: var(--gold); color: var(--gold); }
.tov-sort-sel {
    border: 1px solid var(--color-border-rule);
    border-radius: 8px;
    background: var(--color-surface-card);
    color: var(--color-ink-muted);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
    transition: border-color 0.12s;
}
.tov-sort-sel:hover { border-color: var(--gold); }

/* 2-column grid of member cards */
.tov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}
@media (max-width: 960px) { .tov-grid { grid-template-columns: 1fr; } }

/* Individual member card — top accent bar driven by member color (inline) */
.tov-member {
    border: 1px solid var(--color-border-rule);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--color-canvas-secondary);
    overflow: hidden;
}
.tov-member-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}
.tov-member-left { display: flex; align-items: center; gap: 9px; }
.tov-member-info { display: flex; flex-direction: column; gap: 1px; }
.tov-member-name { font-size: 13px; font-weight: 700; color: var(--color-ink-primary); line-height: 1.2; }
.tov-member-role { font-size: 10.5px; color: var(--color-ink-muted); }

.tov-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-rule);
    border-radius: 12px;
    padding: 2px 10px;
    color: var(--color-ink-muted);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.6;
}
.tov-count.overdue { color: #c0392b; border-color: rgba(192,57,43,0.3); }
.tov-overdue-badge { font-weight: 400; }

/* Task rows inside each member card */
.tov-task {
    padding: 6px 10px 6px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
    background: var(--color-surface-card);
}
.tov-task:last-of-type { margin-bottom: 0; }
.tov-task-title { font-size: 12px; color: var(--color-ink-primary); font-weight: 500; line-height: 1.3; }
.tov-task-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.tov-proj { font-size: 10.5px; color: var(--color-ink-muted); }
.tov-due { font-size: 10.5px; color: var(--color-ink-muted); }
.tov-due.overdue { color: #c0392b; font-weight: 700; }
.tov-more { font-size: 11px; color: var(--color-ink-muted); padding: 5px 4px 0; }

/* Priority badges */
.tov-pri {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.tov-pri-p1 { background: rgba(192,57,43,0.14); color: #c0392b; }
.tov-pri-p2 { background: var(--gold-faint); color: var(--gold); }
.tov-pri-p3 { background: rgba(44,95,138,0.12); color: #2C5F8A; }
.tov-pri-p4 { background: var(--color-canvas-secondary); color: var(--color-ink-muted); border: 1px solid var(--color-border-rule); }

/* Workstream pills inside team overview tasks */
.tov-ws {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--color-canvas-secondary);
    color: var(--color-ink-muted);
    letter-spacing: 0.03em;
    text-transform: capitalize;
    flex-shrink: 0;
}
.tov-ws.ws-design    { color: #9a6f08; background: var(--gold-faint); }
.tov-ws.ws-sales     { color: #1D5C38; background: rgba(29,92,56,0.10); }
.tov-ws.ws-marketing { color: #7B4B94; background: rgba(123,75,148,0.10); }
.tov-ws.ws-editorial { color: #2C5F8A; background: rgba(44,95,138,0.10); }
.tov-ws.ws-production{ color: #854020; background: rgba(133,64,32,0.10); }
.tov-ws.ws-finance   { color: #0d7377; background: rgba(13,115,119,0.10); }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .shortcuts-grid { grid-template-columns: 1fr; }
    .mp-popup { min-width: 190px; }
}