/* ===================================
   MY WORKSPACE — personal task list
   The table itself is the standard sheet table (.spreadsheet-table /
   .table-container / .row-actions — all styled in styles.css). Rules here
   only cover the My Workspace-specific additions: the drag grip, drag
   visuals, empty state and the top-bar button.
   =================================== */

/* Drag grip inside .row-actions — inherits the sheet's row-action-btn look
   and its hover-reveal. The ONLY touch-action:none zone so the page still
   scrolls when swiping elsewhere (iOS). */
.mw-row-drag {
    cursor: grab;
    touch-action: none;
}

.mw-row-drag:active {
    cursor: grabbing;
}

/* Touch devices have no hover — keep the actions (incl. grip) visible */
@media (hover: none) {
    .mw-table .row-actions {
        opacity: 0.6;
    }
}

/* Drag visuals */
.mw-drag-placeholder-row td {
    background: var(--accent-soft);
    border: 1.5px dashed var(--border-medium);
    border-radius: 10px;
}

body.mw-dragging {
    cursor: grabbing;
}

body.mw-dragging * {
    user-select: none;
    -webkit-user-select: none;
}

.mw-drag-preview td {
    border-bottom: none;
}

/* Empty state */
.mw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 20px;
    text-align: center;
    color: var(--text-muted);
}

.mw-empty i {
    font-size: 2rem;
    color: var(--text-light);
}

.mw-empty p {
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.mw-empty span {
    font-size: 0.85rem;
}

/* Sheet icon cell — leftmost column, click to jump to the task's sheet */
.mw-sheet-cell {
    width: 32px;
}

.mw-row-sheet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.mw-row-sheet-icon:hover {
    transform: scale(1.06);
}

.mw-row-sheet-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

/* This icon sits in the leftmost column, often right under the sticky
   thead — the default [data-tooltip] bubble opens upward and centered,
   which gets clipped by .table-container's overflow (top edge) and can
   spill past the left edge on this narrow column. Open it downward and
   left-anchored instead, with a z-index above the sticky thead (z-index:10)
   and the table container's own stacking, so it's never cut off. */
.mw-row-sheet-icon[data-tooltip]::after {
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    transform: translateY(-4px);
    z-index: 10001;
}

.mw-row-sheet-icon[data-tooltip]:hover::after {
    transform: translateY(0);
}

/* Top-bar button active state */
#myWorkspaceBtn.active {
    color: var(--accent);
    background: var(--accent-soft);
}

/* ===================================
   Teammate viewer — pick a teammate to see their workspace order
   =================================== */

/* Avatar shells: position:relative + overflow:hidden + accent background
   match every other avatar in the app (see the shared avatar selector list
   in styles.css) so avatarInnerHTML()'s photo/initials output renders correctly. */
.mw-viewer-avatar,
.mw-viewer-option-avatar {
    position: relative;
    overflow: hidden;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
}

.mw-viewer-avatar {
    width: 20px;
    height: 20px;
}

.mw-viewer-option-avatar {
    width: 22px;
    height: 22px;
}

/* Menu: anchored to the trigger's right edge and sized to its content so it
   grows leftward into the page, wide enough that each name stays on one row.
   The base component caps menus at 200px with an inner scroll; here the cap
   tracks the viewport (~220px covers top bar + section header above the
   trigger), so the full list is visible wherever there is room and the
   scroll only returns on short screens. */
.mw-viewer-dropdown .unified-dropdown-menu {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - 220px);
}

.mw-viewer-option {
    white-space: nowrap;
}

.mw-viewer-option span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================================
   Columns panel — the layout is personal, so this lives per user
   Rows reuse the sheet sidebar's .column-toggle-item / .column-toggle-switch /
   .column-drag-handle styling from styles.css, and adding or editing a column
   opens that same sidebar's modal; only the panel shell and the extras a
   dropdown needs (lock row, hidden divider, add button) are defined here.
   =================================== */

.mw-columns-dropdown .unified-dropdown-menu {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 260px;
    max-width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding: 8px;
}

.mw-columns-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.mw-columns-reset {
    border: none;
    background: none;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    text-transform: none;
    letter-spacing: 0;
}

.mw-columns-divider {
    padding: 10px 6px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
}

.mw-column-item {
    cursor: pointer;
    /* The handle is the only touch-action:none zone so the panel still scrolls */
    touch-action: pan-y;
}

.mw-column-handle {
    touch-action: none;
}

.mw-column-item.dragging {
    position: relative;
    z-index: 2;
    opacity: 0.9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.mw-column-item.locked {
    cursor: default;
    opacity: 0.75;
}

.mw-column-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    font-size: 0.7rem;
    color: var(--text-light);
}

.mw-column-note {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-light);
}

.mw-column-icon {
    width: 14px;
    margin-right: 6px;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* The sheet sidebar hides the cog until the row is hovered; in a compact
   dropdown that hides the only way to edit a personal column, so keep it
   live here (and reachable on touch). */
.mw-column-item .column-edit-btn {
    opacity: 0.55;
    pointer-events: auto;
}

.mw-column-item .column-edit-btn:hover {
    opacity: 1;
}

.mw-columns-add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px dashed var(--border-medium);
    border-radius: 10px;
    background: none;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.mw-columns-add:disabled {
    color: var(--text-light);
    cursor: not-allowed;
}

/* Column headers are draggable on your own workspace */
.mw-col-draggable {
    cursor: grab;
}

.mw-col-draggable:active {
    cursor: grabbing;
}

/* Read-only banner shown while viewing a teammate's workspace */
.mw-viewing-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--text-main);
    font-size: 0.85rem;
}

.mw-viewing-banner i {
    color: var(--accent);
}

.mw-viewing-banner span {
    flex: 1;
}

.mw-viewing-back-btn {
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}