/* ==========================================================================
   JadeDrive Unified Production Stylesheet Bundle (Tier 3 Optimization)
   Generated: 2026-09-23 Release v353
   ========================================================================== */

/* --- Begin: assets/features.css --- */
/* ============================================================================
   Job System — feature layer styles
   ----------------------------------------------------------------------------
   Built on a semantic token layer rather than more hard-coded hex. The audit
   found 83 unique hex colours across 308 occurrences with no token system at
   all — the settings menu alone cycled through eight unrelated accent colours
   in eight consecutive rows, so icon colour carried no meaning.

   These tokens are deliberately few and named by role, not by hue, so a future
   rebrand is one block of edits rather than a find-and-replace across 30,000
   lines.
   ========================================================================== */
:root {
    --jsf-accent:        #2563eb;
    --jsf-accent-ink:    #ffffff;
    --jsf-danger:        #b91c1c;
    --jsf-success:       #15803d;
    --jsf-warning:       #b45309;

    --jsf-surface-1:     #ffffff;   /* panels, dialogs */
    --jsf-surface-2:     #f6f7f9;   /* recessed rows */
    --jsf-surface-3:     #eceef2;   /* hover */
    --jsf-ink-1:         #14171c;   /* primary text */
    --jsf-ink-2:         #4a5058;   /* secondary text */
    --jsf-ink-3:         #767d87;   /* muted / meta */
    --jsf-line:          #dfe2e8;

    --jsf-radius:        10px;
    --jsf-radius-sm:     7px;
    --jsf-shadow:        0 24px 60px rgba(12, 16, 24, .22);
    --jsf-z:             2147483200;
}

.dark {
    --jsf-accent:        #5b9bf8;
    --jsf-accent-ink:    #08111f;
    --jsf-danger:        #f0847a;
    --jsf-success:       #6ec79a;
    --jsf-warning:       #e0a95f;

    --jsf-surface-1:     #15181d;
    --jsf-surface-2:     #1c2027;
    --jsf-surface-3:     #262b33;
    --jsf-ink-1:         #eef0f3;
    --jsf-ink-2:         #b3b9c2;
    --jsf-ink-3:         #838a95;
    --jsf-line:          #2e343d;
}

/* ---------------------------------------------------------------- buttons */
.jsf-btn {
    font: 500 13.5px/1 ui-sans-serif, system-ui, sans-serif;
    padding: 9px 14px;
    min-height: 38px;
    border-radius: var(--jsf-radius-sm);
    border: 1px solid var(--jsf-line);
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-1);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.jsf-btn:hover { background: var(--jsf-surface-3); }
.jsf-btn-primary { background: var(--jsf-accent); border-color: var(--jsf-accent); color: var(--jsf-accent-ink); }
.jsf-btn-primary:hover { filter: brightness(1.08); background: var(--jsf-accent); }
.jsf-btn-danger { background: var(--jsf-danger); border-color: var(--jsf-danger); color: #fff; }
.jsf-icon-btn {
    background: none; border: 0; cursor: pointer; color: var(--jsf-ink-3);
    width: 32px; height: 32px; border-radius: var(--jsf-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
}
.jsf-icon-btn:hover { background: var(--jsf-surface-3); color: var(--jsf-ink-1); }

/* ---------------------------------------------------------------- dialogs */
.jsf-backdrop {
    position: fixed; inset: 0; z-index: var(--jsf-z);
    background: rgba(8, 11, 16, .5);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.jsf-dialog {
    width: min(460px, 100%);
    background: var(--jsf-surface-1); color: var(--jsf-ink-1);
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius);
    box-shadow: var(--jsf-shadow); padding: 22px;
    font: 14.5px/1.6 ui-sans-serif, system-ui, sans-serif;
}
.jsf-dialog h3 { margin: 0 0 10px; font-size: 16.5px; font-weight: 650; }
.jsf-dialog-body { color: var(--jsf-ink-2); }
.jsf-dialog-body p { margin: 0 0 10px; }
.jsf-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.jsf-input {
    width: 100%; margin-top: 10px; padding: 10px 12px; font-size: 16px;
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm);
    background: var(--jsf-surface-2); color: var(--jsf-ink-1);
}

/* ------------------------------------------------------------- undo toast */
.jsf-undo {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    z-index: var(--jsf-z);
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px 12px 18px;
    background: var(--jsf-ink-1); color: var(--jsf-surface-1);
    border-radius: 999px; box-shadow: var(--jsf-shadow);
    font: 14px/1 ui-sans-serif, system-ui, sans-serif;
    animation: jsf-rise .22s ease;
}
.jsf-undo button {
    background: none; border: 0; cursor: pointer; padding: 6px 10px;
    color: var(--jsf-accent); font: 650 14px/1 ui-sans-serif, system-ui, sans-serif;
    border-radius: var(--jsf-radius-sm);
}
.jsf-undo button:hover { background: rgba(255, 255, 255, .12); }
.jsf-undo-out { opacity: 0; transition: opacity .3s ease; }
@keyframes jsf-rise { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ------------------------------------------------------ side / full panel */
.jsf-panel-backdrop {
    position: fixed; inset: 0; z-index: var(--jsf-z, 9999);
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.jsf-panel {
    width: min(720px, 92vw); max-height: 88vh;
    background: #ffffff; color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex; flex-direction: column;
    overflow: hidden;
    font-family: inherit !important;
    animation: jsf-scale .18s ease-out;
}
.dark .jsf-panel {
    background: #1f2937 !important; color: #f9fafb !important;
    border-color: #374151 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.jsf-panel-wide { width: min(840px, 95vw); }

@keyframes jsf-scale {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.jsf-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 24px 16px; border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}
.dark .jsf-panel-head {
    border-bottom-color: #374151 !important;
    background: #1f2937 !important;
}
.jsf-panel-head h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: #111827; line-height: 1.3; }
.dark .jsf-panel-head h3 { color: #f9fafb !important; }
.jsf-panel-sub { margin: 4px 0 0; color: #6b7280; font-size: 0.875rem; text-transform: capitalize; }
.dark .jsf-panel-sub { color: #9ca3af !important; }

.jsf-panel-body { overflow-y: auto; padding: 24px; flex: 1; -webkit-overflow-scrolling: touch; background: #ffffff; }
.dark .jsf-panel-body { background: #1f2937 !important; }

.jsf-panel-body section { margin-bottom: 24px; }
.jsf-panel-body h4 {
    margin: 0 0 12px; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;
    display: flex; align-items: center; gap: 8px;
}
.dark .jsf-panel-body h4 { color: #9ca3af !important; }
.jsf-muted { color: #6b7280; font-size: 0.875rem; margin: 4px 0; }
.dark .jsf-muted { color: #9ca3af !important; }
.jsf-progress { font-weight: 600; color: #374151; letter-spacing: 0; text-transform: none; }
.dark .jsf-progress { color: #d1d5db !important; }

/* Close Icon Button */
.jsf-icon-btn {
    background: transparent; border: none; color: #9ca3af;
    padding: 6px; border-radius: 6px; cursor: pointer;
    font-size: 1.125rem; transition: color 0.15s, background-color 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.jsf-icon-btn:hover { color: #4b5563; background: #f3f4f6; }
.dark .jsf-icon-btn:hover { color: #e5e7eb; background: #374151; }

/* Labels */
.jsf-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.jsf-chip {
    --chip: var(--jsf-accent);
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font: 600 12px/1.5 ui-sans-serif, system-ui, sans-serif;
    background: color-mix(in srgb, var(--chip) 16%, transparent);
    color: color-mix(in srgb, var(--chip) 72%, var(--jsf-ink-1));
    border: 1px solid color-mix(in srgb, var(--chip) 34%, transparent);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jsf-chip-btn { cursor: pointer; opacity: .7; min-height: 28px; }
.jsf-chip-btn.is-on { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip) 40%, transparent); }
.jsf-chip-new {
    cursor: pointer; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db;
    border-radius: 6px; font-weight: 500; font-size: 12px; padding: 4px 10px; transition: all 0.15s;
}
.dark .jsf-chip-new {
    background: #374151 !important; color: #e5e7eb !important; border-color: #4b5563 !important;
}
.jsf-chip-new:hover { background: #e5e7eb; }
.dark .jsf-chip-new:hover { background: #4b5563 !important; }

/* Checklists */
.jsf-check-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    transition: background-color 0.15s;
}
.jsf-check-row:hover { background: #f9fafb; }
.dark .jsf-check-row:hover { background: rgba(55, 65, 81, 0.4); }
.jsf-check-row input[type="checkbox"] {
    margin-top: 3px; width: 16px; height: 16px; accent-color: #4f46e5; flex: 0 0 auto; border-radius: 4px;
}
.jsf-check-row span { flex: 1; font-size: 0.875rem; color: #111827; }
.dark .jsf-check-row span { color: #f3f4f6 !important; }
.jsf-check-row.is-done span { text-decoration: line-through; color: #9ca3af !important; }

/* Add Row forms (Checklist item & Comments) */
.jsf-add-row { display: flex; gap: 10px; margin-top: 12px; align-items: flex-start; }
.jsf-add-row input[type="text"], .jsf-add-row textarea {
    flex: 1; padding: 8px 12px; font-size: 0.875rem; font-family: inherit !important;
    border: 1px solid #d1d5db; border-radius: 6px;
    background: #ffffff; color: #111827; resize: vertical; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dark .jsf-add-row input[type="text"], .dark .jsf-add-row textarea {
    background: #374151 !important; border-color: #4b5563 !important; color: #f9fafb !important;
}
.jsf-add-row input[type="text"]:focus, .jsf-add-row textarea:focus {
    border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}
.jsf-add-row button.jsf-btn-primary {
    background: #4f46e5; border: none; color: #ffffff;
    font-weight: 500; font-size: 0.875rem; padding: 8px 16px;
    border-radius: 6px; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease; align-self: flex-start;
}
.jsf-add-row button.jsf-btn-primary:hover { background: #4338ca; }

/* Comments */
.jsf-comment {
    padding: 12px 14px; margin-bottom: 10px;
    background: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb;
}
.dark .jsf-comment {
    background: rgba(55, 65, 81, 0.5) !important; border-color: #4b5563 !important; color: #f9fafb !important;
}
.jsf-comment header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.jsf-comment header b { font-size: 13px; color: #111827; }
.dark .jsf-comment header b { color: #f9fafb !important; }
.jsf-comment header time { color: #9ca3af; font-size: 11.5px; margin-right: auto; }
.jsf-comment p { margin: 0; font-size: 0.875rem; color: #374151; white-space: pre-wrap; word-break: break-word; }
.dark .jsf-comment p { color: #e5e7eb !important; }

/* Activity */
.jsf-activity { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.jsf-activity li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; color: #4b5563; }
.dark .jsf-activity li { border-bottom-color: #374151 !important; color: #d1d5db !important; }
.jsf-activity li b { color: #111827; }
.dark .jsf-activity li b { color: #f9fafb !important; }
.jsf-activity li:last-child { border-bottom: 0; }
.jsf-activity time { color: #9ca3af; font-size: 11.5px; margin-left: 4px; }

/* --------------------------------------------------------- card overlays */
.jsf-card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    padding: 0 10px 9px;
}
.jsf-check {
    display: inline-flex; align-items: center; gap: 4px;
    font: 600 11px/1.5 ui-sans-serif, system-ui, sans-serif;
    color: var(--jsf-ink-3); padding: 2px 7px; border-radius: 999px;
    background: var(--jsf-surface-2); border: 1px solid var(--jsf-line);
}
.jsf-check-done { color: var(--jsf-success); border-color: color-mix(in srgb, var(--jsf-success) 35%, transparent); }
.jsf-details-btn { right: 44px !important; }
.card-item.jsf-selected {
    outline: 2px solid var(--jsf-accent); outline-offset: -2px;
    background: color-mix(in srgb, var(--jsf-accent) 8%, transparent) !important;
}

/* ------------------------------------------------------------- bulk bar */
.jsf-bulk {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: var(--jsf-z);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    justify-content: center;
    padding: 10px 14px; max-width: calc(100vw - 24px);
    background: var(--jsf-surface-1); border: 1px solid var(--jsf-line);
    border-radius: 999px; box-shadow: var(--jsf-shadow);
    animation: jsf-rise .2s ease;
}
.jsf-bulk-count { font: 650 13px/1 ui-sans-serif, system-ui, sans-serif; color: var(--jsf-ink-2); padding: 0 4px; }
.jsf-bulk select {
    font: 500 13px/1 ui-sans-serif, system-ui, sans-serif; padding: 9px 10px; min-height: 38px;
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm);
    background: var(--jsf-surface-1); color: var(--jsf-ink-1);
}
@media (max-width: 640px) { .jsf-bulk { border-radius: var(--jsf-radius); bottom: 12px; } }

/* --------------------------------------------------------------- toolbar */
.jsf-toolbar { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle; }
.jsf-tool {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 38px; padding: 8px 11px;
    font: 500 13px/1 inherit;
    font-family: inherit !important;
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm);
    background: var(--jsf-surface-1); color: var(--jsf-ink-2); cursor: pointer;
}
.jsf-tool:hover { background: var(--jsf-surface-3); color: var(--jsf-ink-1); }
@media (max-width: 900px) { .jsf-tool span { display: none; } }

/* --------------------------------------------------- my tasks / archive */
.jsf-group { margin-bottom: 22px; }
.jsf-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--jsf-surface-3); color: var(--jsf-ink-2);
    font: 650 11px/1 inherit;
    font-family: inherit !important;
}
.jsf-group-overdue h4 { color: var(--jsf-danger); }
.jsf-group-overdue .jsf-badge { background: color-mix(in srgb, var(--jsf-danger) 16%, transparent); color: var(--jsf-danger); }
.jsf-group-today h4 { color: var(--jsf-warning); }

.jsf-tasklist { list-style: none; margin: 0; padding: 0; }
.jsf-tasklist li {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 0; border-bottom: 1px solid var(--jsf-line);
}
.jsf-tasklist li:last-child { border-bottom: 0; }
.jsf-tasklist li > button:first-child {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: none; border: 0; cursor: pointer; text-align: left;
    padding: 9px 8px; border-radius: var(--jsf-radius-sm); color: inherit; min-height: 44px;
}
.jsf-tasklist li > button:first-child:hover { background: var(--jsf-surface-2); }
.jsf-task-title { font-weight: 500; color: var(--jsf-ink-1); }
.jsf-task-meta { font-size: 12px; color: var(--jsf-ink-3); }

/* ------------------------------------------------------ command palette */
.jsf-palette-backdrop {
    position: fixed; inset: 0; z-index: calc(var(--jsf-z) + 10);
    background: rgba(8, 11, 16, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 16px 16px;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.jsf-palette {
    width: min(600px, 100%);
    background: var(--jsf-surface-1); color: var(--jsf-ink-1);
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius);
    box-shadow: var(--jsf-shadow); overflow: hidden;
    display: flex; flex-direction: column; max-height: 70vh;
    animation: jsf-rise .16s ease;
}
.jsf-palette-input {
    border: 0; border-bottom: 1px solid var(--jsf-line);
    padding: 16px 18px; font: 16px/1.4 ui-sans-serif, system-ui, sans-serif;
    background: transparent; color: var(--jsf-ink-1); outline: none;
}
.jsf-palette-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.jsf-palette-list li {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: var(--jsf-radius-sm); cursor: pointer;
    font-size: 14px;
}
.jsf-palette-list li.is-active { background: color-mix(in srgb, var(--jsf-accent) 14%, transparent); }
.jsf-palette-list li i { width: 16px; text-align: center; color: var(--jsf-ink-3); flex: 0 0 auto; }
.jsf-cmd-title { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsf-cmd-desc { margin-left: auto; color: var(--jsf-ink-3); font-size: 12px; white-space: nowrap; padding-left: 12px; }
.jsf-palette-foot {
    padding: 9px 14px; border-top: 1px solid var(--jsf-line);
    color: var(--jsf-ink-3); font-size: 11.5px;
}
@media (max-width: 640px) { .jsf-cmd-desc { display: none; } .jsf-palette-backdrop { padding-top: 6vh; } }

@media (prefers-reduced-motion: reduce) {
    .jsf-panel, .jsf-palette, .jsf-bulk, .jsf-undo { animation: none; }
}

/* --- End: assets/features.css --- */

/* --- Begin: assets/features2.css --- */
/* ============================================================================
   Job System — feature layer, phase 2 styles
   ----------------------------------------------------------------------------
   Reuses the semantic --jsf-* token layer from features.css (loaded first).
   Adds: notification bell + panel, security/2FA modal, filter & view toolbar,
   list/table view, card priority flags & due pills, WIP limit headers.
   ========================================================================== */

/* -------------------------------------------------- notification bell */
.jsf-bell {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: 4px;
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm);
    background: var(--jsf-surface-1); color: var(--jsf-ink-2); cursor: pointer;
}
.jsf-bell:hover { background: var(--jsf-surface-3); color: var(--jsf-ink-1); }
.jsf-bell-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: var(--jsf-danger); color: #fff;
    border-radius: 999px; font: 700 11px/18px ui-sans-serif, system-ui, sans-serif;
    text-align: center; box-shadow: 0 0 0 2px var(--jsf-surface-1);
}
.jsf-notif-panel {
    position: fixed; z-index: calc(var(--jsf-z) + 5);
    width: min(380px, calc(100vw - 20px)); max-height: 70vh;
    display: flex; flex-direction: column;
    background: #ffffff; color: #1f2937;
    border: 1px solid #e5e7eb; border-radius: var(--button-radius, 8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    font-size: 14px; line-height: 1.5; font-family: inherit;
    animation: jsf-rise .15s ease;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dark .jsf-notif-panel {
    background: #1f2937; color: #f3f4f6;
    border-color: #374151;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.jsf-notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #f3f4f6;
    background: rgba(249, 250, 251, 0.8);
}
.dark .jsf-notif-head {
    border-bottom-color: #374151;
    background: rgba(31, 41, 55, 0.8);
}
.jsf-notif-head h4 {
    margin: 0; font-size: 14px; font-weight: 700; color: #111827;
    display: flex; align-items: center; gap: 8px;
}
.dark .jsf-notif-head h4 { color: #f9fafb; }
.jsf-notif-head button {
    background: none; border: 0; cursor: pointer; color: #4f46e5;
    font-size: 12px; font-weight: 600; transition: color 0.15s ease;
}
.jsf-notif-head button:hover { color: #4338ca; text-decoration: underline; }
.dark .jsf-notif-head button { color: #818cf8; }
.dark .jsf-notif-head button:hover { color: #a5b4fc; }
.jsf-notif-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.jsf-notif-item {
    display: flex; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6; cursor: pointer;
    transition: background-color 0.15s ease;
}
.dark .jsf-notif-item { border-bottom-color: rgba(55, 65, 81, 0.6); }
.jsf-notif-item:hover { background: #f9fafb; }
.dark .jsf-notif-item:hover { background: rgba(55, 65, 81, 0.5); }
.jsf-notif-item.is-unread { background: rgba(238, 242, 255, 0.6); }
.dark .jsf-notif-item.is-unread { background: rgba(49, 46, 129, 0.25); }
.jsf-notif-item.is-unread:hover { background: rgba(224, 231, 255, 0.8); }
.dark .jsf-notif-item.is-unread:hover { background: rgba(49, 46, 129, 0.4); }
.jsf-notif-item .jsf-ni-icon {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.jsf-ni-overdue { background: #fef2f2; color: #ef4444; }
.dark .jsf-ni-overdue { background: rgba(127, 29, 29, 0.3); color: #f87171; }
.jsf-ni-due_soon { background: #fffbe6; color: #d97706; }
.dark .jsf-ni-due_soon { background: rgba(120, 53, 15, 0.3); color: #fbbf24; }
.jsf-ni-system { background: #f3f4f6; color: #4b5563; }
.dark .jsf-ni-system { background: #374151; color: #9ca3af; }
.jsf-notif-item .jsf-ni-body { flex: 1; min-width: 0; }
.jsf-ni-title { font-weight: 600; color: #111827; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.dark .jsf-ni-title { color: #f9fafb; }
.jsf-ni-sub { font-size: 12px; color: #6b7280; margin-left: 0; display: block; margin-top: 2px; }
.dark .jsf-ni-sub { color: #9ca3af; }
.jsf-notif-empty { padding: 32px 16px; text-align: center; color: #6b7280; }
.dark .jsf-notif-empty { color: #9ca3af; }
.jsf-notif-empty i { font-size: 24px; opacity: 0.6; display: block; margin-bottom: 8px; color: #6366f1; }
.dark .jsf-notif-empty i { color: #818cf8; }

/* -------------------------------------------------- filter / view toolbar */
.jsf-viewbar, #jsfViewbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 6px 10px; border-bottom: 1px solid var(--jsf-line);
    background: var(--jsf-surface-1);
    font-family: inherit !important;
}
.jsf-viewbar *, #jsfViewbar * {
    font-family: inherit !important;
}
.jsf-seg { display: inline-flex; border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm); overflow: hidden; }
.jsf-seg button {
    padding: 7px 12px; min-height: 34px; border: 0; background: var(--jsf-surface-1);
    color: var(--jsf-ink-2); cursor: pointer; font-size: 13px; line-height: 1; font-weight: 500; font-family: inherit !important;
    display: inline-flex; align-items: center; gap: 6px;
}
.jsf-seg button + button { border-left: 1px solid var(--jsf-line); }
.jsf-seg button.is-active { background: var(--jsf-accent); color: var(--jsf-accent-ink); }
.jsf-viewbar select, .jsf-chip-filter, #jsfViewbar select, #jsfViewbar .jsf-chip-filter, #jsfViewbar button,
.jsf-viewbar select option, #jsfViewbar select option, .jsf-chip-filter option, select option, option {
    font-family: inherit !important;
}
.jsf-viewbar select, .jsf-chip-filter, #jsfViewbar select, #jsfViewbar .jsf-chip-filter, #jsfViewbar button {
    min-height: 34px; padding: 6px 10px; font-size: 13px; line-height: 1; font-weight: 500; font-family: inherit !important;
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm);
    background: var(--jsf-surface-1); color: var(--jsf-ink-1); cursor: pointer;
}
.jsf-chip-filter { display: inline-flex; align-items: center; gap: 6px; }
.jsf-chip-filter.is-active { border-color: var(--jsf-accent); color: var(--jsf-accent); background: color-mix(in srgb, var(--jsf-accent) 10%, transparent); }
.jsf-viewbar-spacer { flex: 1; }
.jsf-viewbar .jsf-muted { margin: 0; }
.jsf-viewbar-dropdown-popover {
    position: fixed;
    z-index: 99999;
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: var(--button-radius, 8px);
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    font-size: 14px; line-height: 1.5; font-family: inherit !important;
    animation: jsf-rise .15s ease;
    white-space: nowrap;
}
.dark .jsf-viewbar-dropdown-popover {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.jsf-viewbar-dropdown-popover button.jsf-vbd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit !important;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dark .jsf-viewbar-dropdown-popover button.jsf-vbd-item {
    color: #d1d5db;
}
.jsf-viewbar-dropdown-popover button.jsf-vbd-item:hover,
.jsf-viewbar-dropdown-popover button.jsf-vbd-item:focus-visible {
    background: #f3f4f6;
    color: #111827;
    outline: none;
}
.dark .jsf-viewbar-dropdown-popover button.jsf-vbd-item:hover,
.dark .jsf-viewbar-dropdown-popover button.jsf-vbd-item:focus-visible {
    background: #374151;
    color: #ffffff;
}
.jsf-viewbar-dropdown-popover button.jsf-vbd-item.is-selected {
    font-weight: 600;
    color: #4f46e5;
    background: rgba(238, 242, 255, 0.6);
}
.dark .jsf-viewbar-dropdown-popover button.jsf-vbd-item.is-selected {
    color: #818cf8;
    background: rgba(49, 46, 129, 0.3);
}
@media (max-width: 640px) {
    .jsf-viewbar { gap: 6px; padding: 8px 10px; }
    .jsf-viewbar .jsf-hide-sm { display: none; }
}

/* -------------------------------------------------- list / table view */
.jsf-listwrap, #jsfListView {
    position: relative;
    z-index: 10;
    padding: 16px 20px 40px;
    max-width: 80rem;
    margin: 16px auto 24px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    background: var(--jsf-surface-1, #ffffff);
    border: 1px solid var(--jsf-line, #e5e7eb);
    border-radius: var(--card-radius, 12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.dark .jsf-listwrap, .dark #jsfListView {
    background: var(--jsf-surface-1, #1f2937);
    border-color: var(--jsf-line, #374151);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.jsf-table { width: 100%; border-collapse: collapse; font: 14px/1.5 ui-sans-serif, system-ui, sans-serif; }
.jsf-table th {
    text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--jsf-line);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--jsf-ink-3);
    cursor: pointer; white-space: nowrap; user-select: none;
}
.jsf-table th:hover { color: var(--jsf-ink-1); }
.jsf-table th .jsf-sortcaret { opacity: .5; font-size: 10px; margin-left: 3px; }
.jsf-table td { padding: 10px 12px; border-bottom: 1px solid var(--jsf-line); vertical-align: middle; }
.jsf-table tbody tr { cursor: pointer; }
.jsf-table tbody tr:hover { background: var(--jsf-surface-2); }
.jsf-table .jsf-td-title { font-weight: 500; color: var(--jsf-ink-1); max-width: 460px; }
.jsf-table .jsf-td-status {
    display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
    background: var(--jsf-surface-3); color: var(--jsf-ink-2);
}
.jsf-cat-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 600;
    color: #ffffff !important;
    line-height: 1.4;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.jsf-table-labels { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* -------------------------------------------------- priority */
.jsf-prio {
    display: inline-flex; align-items: center; gap: 5px;
    font: 600 11px/1.4 ui-sans-serif, system-ui, sans-serif;
}
.jsf-prio i { font-size: 12px; }
.jsf-prio-4 { color: #dc2626; }   /* urgent */
.jsf-prio-3 { color: #ea580c; }   /* high   */
.jsf-prio-2 { color: #2563eb; }   /* normal */
.jsf-prio-1 { color: #6b7280; }   /* low    */
.jsf-prio-0 { color: var(--jsf-ink-3); }
.dark .jsf-prio-4 { color: #f0847a; }
.dark .jsf-prio-3 { color: #f0ad67; }
.dark .jsf-prio-2 { color: #7fb0e6; }

/* priority flag overlay on a board card */
.jsf-card-flags { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; flex-wrap: wrap; }
.jsf-due-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font: 600 11px/1.5 ui-sans-serif, system-ui, sans-serif;
    background: var(--jsf-surface-2); color: var(--jsf-ink-3); border: 1px solid var(--jsf-line);
}
.jsf-due-overdue { background: rgba(239, 68, 68, 0.25) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.5) !important; font-weight: 700 !important; }
.dark .jsf-due-overdue { background: #450a0a !important; color: #fca5a5 !important; border: 1px solid #7f1d1d !important; font-weight: 700 !important; }
.jsf-due-today { background: color-mix(in srgb, var(--jsf-warning) 16%, transparent); color: var(--jsf-warning); border-color: transparent; }

/* -------------------------------------------------- priority / date editor in details panel */
.jsf-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jsf-field label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--jsf-ink-3); margin-bottom: 5px; }
.jsf-field select, .jsf-field input[type=date] {
    width: 100%; padding: 9px 10px; font-size: 16px;
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm);
    background: var(--jsf-surface-2); color: var(--jsf-ink-1);
}
.jsf-field-full { grid-column: 1 / -1; }

/* -------------------------------------------------- WIP limit column header */
.jsf-wip {
    display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
    padding: 1px 8px; border-radius: 999px;
    font: 700 11px/1.6 ui-sans-serif, system-ui, sans-serif;
    background: var(--jsf-surface-3); color: var(--jsf-ink-2); cursor: pointer;
}
.jsf-wip.is-over { background: color-mix(in srgb, var(--jsf-danger) 18%, transparent); color: var(--jsf-danger); }
.jsf-wip.is-full { background: color-mix(in srgb, var(--jsf-warning) 18%, transparent); color: var(--jsf-warning); }

/* -------------------------------------------------- 2FA / security modal */
.jsf-2fa-qr {
    display: flex; align-items: center; justify-content: center;
    width: 200px; height: 200px; margin: 12px auto;
    background: #fff; border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm);
    padding: 8px;
}
.jsf-2fa-qr img, .jsf-2fa-qr canvas { max-width: 100%; height: auto; }
.jsf-2fa-secret {
    font: 600 15px/1.5 ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 2px; text-align: center; word-break: break-all;
    padding: 10px; background: var(--jsf-surface-2); border-radius: var(--jsf-radius-sm);
    color: var(--jsf-ink-1); user-select: all;
}
.jsf-code-input {
    width: 100%; text-align: center; letter-spacing: 8px;
    font: 600 22px/1.4 ui-monospace, Menlo, Consolas, monospace;
    padding: 12px; margin-top: 12px;
    border: 1px solid var(--jsf-line); border-radius: var(--jsf-radius-sm);
    background: var(--jsf-surface-2); color: var(--jsf-ink-1);
}
.jsf-recovery-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0;
}
.jsf-recovery-grid span {
    font: 600 14px/1.5 ui-monospace, Menlo, Consolas, monospace;
    padding: 8px 10px; background: var(--jsf-surface-2); border-radius: 6px;
    text-align: center; color: var(--jsf-ink-1); user-select: all;
}
.jsf-2fa-status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px; font: 600 12.5px/1.6 ui-sans-serif, system-ui, sans-serif;
}
.jsf-2fa-on { background: color-mix(in srgb, var(--jsf-success) 16%, transparent); color: var(--jsf-success); }
.jsf-2fa-off { background: var(--jsf-surface-3); color: var(--jsf-ink-2); }
.jsf-callout {
    padding: 11px 13px; border-radius: var(--jsf-radius-sm); font-size: 13px;
    background: color-mix(in srgb, var(--jsf-warning) 12%, transparent);
    color: var(--jsf-ink-1); border: 1px solid color-mix(in srgb, var(--jsf-warning) 30%, transparent);
    margin: 10px 0;
}

/* login-screen TOTP step reuses the app's own styling; this only positions our
   injected container if the app has no slot for it. */
#jsfTotpStep { margin-top: 14px; }

/* --- End: assets/features2.css --- */

/* --- Begin: assets/features3.css --- */
/* ============================================================================
   Job System — feature layer, phase 3 styling
   ----------------------------------------------------------------------------
   Builds on the --jsf-* semantic token layer introduced in features.css, so
   light/dark and the existing theme come for free. Nothing here hard-codes a
   colour that has a token.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Global search
   ------------------------------------------------------------------------ */
.jsf-search-back {
    align-items: flex-start;
    padding-top: clamp(24px, 8vh, 96px);
}
.jsf-search {
    width: min(760px, 94vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-1);
    border: 1px solid var(--jsf-line);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.jsf-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--jsf-line);
}
.jsf-search-bar > i { color: var(--jsf-ink-3); flex: 0 0 auto; }
.jsf-search-bar input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 1.05rem;
    padding: 4px 0;
}
.jsf-search-bar input::-webkit-search-cancel-button { cursor: pointer; }
.jsf-search-bar kbd {
    flex: 0 0 auto;
    font: inherit;
    font-size: .72rem;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid var(--jsf-line);
    color: var(--jsf-ink-3);
}

.jsf-search-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--jsf-line);
    background: var(--jsf-surface-2);
}
.jsf-op {
    font: inherit;
    font-size: .74rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--jsf-line);
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.jsf-op:hover,
.jsf-op:focus-visible {
    background: var(--jsf-accent);
    border-color: var(--jsf-accent);
    color: var(--jsf-accent-ink);
}

.jsf-search-results { overflow-y: auto; padding: 6px; -webkit-overflow-scrolling: touch; }
.jsf-search-empty,
.jsf-search-count { padding: 14px 12px; margin: 0; color: var(--jsf-ink-3); font-size: .85rem; }
.jsf-search-count { padding-bottom: 4px; }

.jsf-hit {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    background: transparent;
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    cursor: pointer;
    color: inherit;
}
.jsf-hit:hover,
.jsf-hit:focus-visible { background: var(--jsf-surface-3); outline: none; }
.jsf-hit:focus-visible { box-shadow: inset 0 0 0 2px var(--jsf-accent); }
.jsf-hit-title { display: block; font-weight: 600; line-height: 1.35; }
.jsf-hit-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jsf-hit-meta > span {
    font-size: .7rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--jsf-surface-3);
    color: var(--jsf-ink-3);
    border: 1px solid var(--jsf-line);
}
/* Semantic tints. The token carries the hue; the alpha tint sits legibly on
   both surface colours, so these need no .dark twin. */
.jsf-hit-pri-3 { color: var(--jsf-warning); border-color: currentColor; background: rgba(180, 83, 9, .12); }
.jsf-hit-pri-4 { color: var(--jsf-danger);  border-color: currentColor; background: rgba(185, 28, 28, .12); }
.dark .jsf-hit-pri-3 { background: rgba(224, 169, 95, .16); }
.dark .jsf-hit-pri-4 { background: rgba(240, 132, 122, .16); }
.jsf-hit-arch { opacity: .7; font-style: italic; }
.jsf-hit-snip {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
    color: var(--jsf-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flash a card we jumped to, so the eye finds it after the scroll. */
@keyframes jsf-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    30%      { box-shadow: 0 0 0 4px rgba(37, 99, 235, .45); }
}
.jsf-flash { animation: jsf-flash 1.3s ease-out; border-radius: 30px; }

/* ---------------------------------------------------------------------------
   Keyboard cheatsheet
   ------------------------------------------------------------------------ */
.jsf-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 20px; }
.jsf-key-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.jsf-key-row kbd {
    flex: 0 0 auto;
    min-width: 46px;
    text-align: center;
    font: inherit;
    font-size: .74rem;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--jsf-line);
    border-bottom-width: 2px;
    background: var(--jsf-surface-2);
    color: var(--jsf-ink-1);
}
.jsf-key-row span { font-size: .86rem; color: var(--jsf-ink-2); }

/* ---------------------------------------------------------------------------
   Swimlanes
   ------------------------------------------------------------------------ */
.jsf-lanes { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 24px; }
.jsf-lane {
    border: 1px solid var(--jsf-line);
    border-radius: 12px;
    background: var(--jsf-surface-1);
    overflow: hidden;
}
.jsf-lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 9px 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--jsf-ink-3);
    background: var(--jsf-surface-2);
    border-bottom: 1px solid var(--jsf-line);
    position: sticky;
    top: 0;
    z-index: 1;
}
.jsf-lane-n {
    font-size: .74rem;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--jsf-surface-1);
    border: 1px solid var(--jsf-line);
}
.jsf-lane-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; padding: 10px; }
.jsf-lane-card {
    position: relative;
    display: block;
    text-align: left;
    font: inherit;
    width: 100%;
    padding: 9px 11px 9px 14px;
    border: 1px solid var(--jsf-line);
    border-radius: 9px;
    background: var(--jsf-surface-1);
    color: inherit;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}
.jsf-lane-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .09); }
.jsf-lane-card:focus-visible { outline: 2px solid var(--jsf-accent); outline-offset: 1px; }
.jsf-lane-pri { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 9px 0 0 9px; }
/* Same hues as .jsf-prio-* in features2.css, so a card reads identically on
   the board and in a swimlane. */
.jsf-lane-pri.jsf-prio-1 { background: #6b7280; }
.jsf-lane-pri.jsf-prio-2 { background: #2563eb; }
.jsf-lane-pri.jsf-prio-3 { background: #ea580c; }
.jsf-lane-pri.jsf-prio-4 { background: #dc2626; }
.dark .jsf-lane-pri.jsf-prio-2 { background: #7fb0e6; }
.dark .jsf-lane-pri.jsf-prio-3 { background: #f0ad67; }
.dark .jsf-lane-pri.jsf-prio-4 { background: #f0847a; }
.jsf-lane-title { display: block; font-weight: 600; line-height: 1.35; }
.jsf-lane-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.jsf-lane-meta > span {
    font-size: .68rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--jsf-surface-3);
    color: var(--jsf-ink-3);
}
.jsf-lane-empty { padding: 24px; text-align: center; color: var(--jsf-ink-3); }

/* ---------------------------------------------------------------------------
   Blocked badge
   ------------------------------------------------------------------------ */
.jsf-blocked-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(185, 28, 28, .12);
    color: var(--jsf-danger);
    border: 1px solid currentColor;
}
.dark .jsf-blocked-badge { background: rgba(240, 132, 122, .18); }
.jsf-is-blocked { position: relative; }

/* ---------------------------------------------------------------------------
   Card panel: planning + dependencies
   ------------------------------------------------------------------------ */
#jsfPlanning .jsf-field-check { grid-column: 1 / -1; }
#jsfPlanning .jsf-field-check label { display: flex; align-items: center; gap: 7px; font-weight: 400; cursor: pointer; }
.jsf-complete-btn { margin-top: 10px; width: 100%; justify-content: center; }

.jsf-rel-list { display: flex; flex-direction: column; gap: 10px; }
.jsf-rel-group h5 {
    margin: 0 0 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jsf-ink-3);
}
.jsf-rel-item { display: flex; align-items: center; gap: 4px; }
.jsf-rel-open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    font: inherit;
    font-size: .86rem;
    padding: 5px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.jsf-rel-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsf-rel-open:hover { background: var(--jsf-surface-3); }
.jsf-rel-item.is-done .jsf-rel-open { color: var(--jsf-ink-3); text-decoration: line-through; }
.jsf-rel-del {
    flex: 0 0 auto;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--jsf-ink-3);
    cursor: pointer;
}
.jsf-rel-del:hover { background: rgba(185, 28, 28, .12); color: var(--jsf-danger); }
.jsf-rel-add { display: flex; gap: 6px; margin-top: 10px; }
.jsf-rel-add select { flex: 0 0 auto; }
.jsf-rel-add input { flex: 1 1 auto; min-width: 0; }
.jsf-rel-picks { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.jsf-pick {
    text-align: left;
    font: inherit;
    font-size: .84rem;
    padding: 6px 9px;
    border: 1px solid var(--jsf-line);
    border-radius: 7px;
    background: var(--jsf-surface-1);
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jsf-pick:hover { border-color: var(--jsf-accent); }
.jsf-muted { color: var(--jsf-ink-3); font-size: .85rem; margin: 0; }

/* ---------------------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------------------ */
.jsf-dash { width: min(880px, 94vw); }
.jsf-dash .jsf-dialog-body { max-height: 70vh; overflow-y: auto; }
.jsf-dash-scope { margin-right: auto; display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--jsf-ink-3); }

.jsf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-bottom: 18px; }
.jsf-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 10px 12px;
    border: 1px solid var(--jsf-line);
    border-radius: 10px;
    background: var(--jsf-surface-2);
}
.jsf-kpi i { font-size: .8rem; color: var(--jsf-ink-3); margin-bottom: 3px; }
.jsf-kpi strong { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jsf-kpi span { font-size: .7rem; color: var(--jsf-ink-3); }
.jsf-kpi.is-bad:not(.is-zero) { border-color: var(--jsf-danger); background: rgba(185, 28, 28, .1); }
.jsf-kpi.is-bad:not(.is-zero) strong,
.jsf-kpi.is-bad:not(.is-zero) i { color: var(--jsf-danger); }
.jsf-kpi.is-good:not(.is-zero) { border-color: var(--jsf-success); background: rgba(21, 128, 61, .1); }
.jsf-kpi.is-good:not(.is-zero) strong,
.jsf-kpi.is-good:not(.is-zero) i { color: var(--jsf-success); }
.dark .jsf-kpi.is-bad:not(.is-zero)  { background: rgba(240, 132, 122, .14); }
.dark .jsf-kpi.is-good:not(.is-zero) { background: rgba(110, 199, 154, .14); }

.jsf-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.jsf-dash-grid h4 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--jsf-ink-3); }
.jsf-bars { display: flex; flex-direction: column; gap: 5px; }
.jsf-bar-row { display: grid; grid-template-columns: minmax(72px, 34%) 1fr auto; align-items: center; gap: 8px; font-size: .8rem; }
.jsf-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jsf-ink-2); text-transform: capitalize; }
.jsf-bar-track { height: 8px; border-radius: 999px; background: var(--jsf-surface-3); overflow: hidden; }
.jsf-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--jsf-accent); }
.jsf-bar-val { font-variant-numeric: tabular-nums; color: var(--jsf-ink-3); min-width: 2ch; text-align: right; }

.jsf-spark { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.jsf-spark-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 3px;
}
.jsf-spark-n { font-size: .66rem; color: var(--jsf-ink-3); font-variant-numeric: tabular-nums; }
.jsf-spark-bar {
    display: block;
    width: 100%;
    max-width: 30px;
    border-radius: 3px 3px 0 0;
    background: var(--jsf-accent);
    min-height: 2px;
}
.jsf-spark-wk { font-size: .6rem; color: var(--jsf-ink-3); white-space: nowrap; }
.jsf-spark-sum { margin-top: 6px; font-size: .74rem; }

/* ---------------------------------------------------------------------------
   Export & calendar
   ------------------------------------------------------------------------ */
.jsf-export h4 { margin: 18px 0 4px; font-size: .82rem; }
.jsf-export-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jsf-export-row .jsf-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.jsf-ical { display: flex; gap: 6px; margin-top: 8px; }
.jsf-ical input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
    padding: 7px 9px;
    border: 1px solid var(--jsf-line);
    border-radius: 7px;
    background: var(--jsf-surface-2);
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    /* .jsf-backdrop carries padding:20px and the panel is a flex item, so a bare
       width:100vw would still be shrunk to fit inside that padding. Zero the
       padding and opt the panel out of flex shrinking. */
    .jsf-search-back { padding: 0; align-items: stretch; }
    .jsf-search {
        width: 100vw;
        max-width: none;
        flex: 1 0 auto;
        max-height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }
    .jsf-search-ops { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .jsf-search-ops::-webkit-scrollbar { display: none; }
    .jsf-op { white-space: nowrap; }
    .jsf-lane-cards { grid-template-columns: 1fr; }
    .jsf-kpis { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
    .jsf-rel-add { flex-wrap: wrap; }
    .jsf-ical { flex-wrap: wrap; }
    .jsf-ical input { flex-basis: 100%; }
}

/* Honour the OS "reduce motion" setting — the flash and lift are decorative. */
@media (prefers-reduced-motion: reduce) {
    .jsf-flash { animation: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .45); }
    .jsf-lane-card { transition: none; }
    .jsf-lane-card:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
   Toolbar overflow menu
   ------------------------------------------------------------------------ */
.jsf-more { position: relative; display: inline-flex; }
.jsf-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 232px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05); /* ring-black ring-opacity-5 */
    border-radius: var(--menu-radius) !important;
    background: #ffffff; /* bg-white */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: background-color 0.2s, border-color 0.2s;
}

.dark .jsf-more-menu {
    background: #1f2937 !important; /* dark:bg-gray-800 */
    border-color: #374151 !important; /* dark:ring-gray-700 */
}

.jsf-more-menu[hidden] { display: none; }

.jsf-more-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: .86rem;
    padding: 8px 16px; /* px-4 py-2 */
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #374151; /* text-gray-700 */
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.jsf-more-menu button:hover,
.jsf-more-menu button:focus-visible {
    background: #f3f4f6 !important; /* hover:bg-gray-100 */
    color: #111827 !important; /* hover:text-gray-900 */
    outline: none;
}

.dark .jsf-more-menu button {
    color: #d1d5db !important; /* dark:text-gray-300 */
}

.dark .jsf-more-menu button:hover,
.dark .jsf-more-menu button:focus-visible {
    background: #374151 !important; /* dark:hover:bg-gray-700 */
    color: #ffffff !important; /* dark:hover:text-white */
}

.jsf-more-menu button > span { flex: 1 1 auto; }

.jsf-more-menu button > i {
    width: 16px;
    text-align: center;
    color: #6366f1 !important; /* indigo-500 */
    transition: color 0.15s;
}

.jsf-more-menu button:hover > i {
    color: #4f46e5 !important; /* indigo-600 */
}

.dark .jsf-more-menu button > i {
    color: #818cf8 !important; /* indigo-400 */
}

.dark .jsf-more-menu button:hover > i {
    color: #a5b4fc !important; /* indigo-300 */
}

.jsf-more-menu kbd {
    font: inherit;
    font-size: .7rem;
    min-width: 20px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    color: #9ca3af; /* text-gray-400 */
    background: #f9fafb; /* bg-gray-50 */
    margin-left: auto;
}

.dark .jsf-more-menu kbd {
    border-color: #4b5563; /* dark:border-gray-600 */
    color: #9ca3af; /* dark:text-gray-400 */
    background: #374151; /* dark:bg-gray-700 */
}

/* Custom separator styles inside more-menu */
.jsf-more-menu .jsf9-sep {
    background: #e5e7eb !important;
}

.dark .jsf-more-menu .jsf9-sep {
    background: #374151 !important;
}

/* The badge now lives inside the phase-2 flags row, so it inherits that
   row's inline layout and needs no positioning of its own. */
.jsf-card-flags .jsf-blocked-badge { order: -1; }

@media (max-width: 640px) {
    .jsf-more-menu { right: auto; left: 0; min-width: 208px; }
}

/* ---------------------------------------------------------------------------
   PRINT
   ----------------------------------------------------------------------------
   The board was unprintable: fixed-height scrolling columns clipped to one
   screenful, and the chrome consumed most of the page. Printing now lays the
   columns out as flowing blocks and drops everything that is not content.
   ------------------------------------------------------------------------ */
@media print {
    /* Chrome, overlays, and anything interactive. */
    .jsf-toolbar, .jsf-viewbar, .jsf-backdrop, .jsf-bell, #jsfBell, .jsf-more, .jsf-more-menu,
    .jsf-bulk-bar, .jsf-skeleton, .jsf-panel, nav, aside, header button, footer,
    #sidebar, .sidebar, #worksheetSidebar, .no-print,
    button, input, select, textarea, .fa-ellipsis, .card-actions, .column-actions {
        display: none !important;
    }

    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 10.5pt;
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    main, .main, #mainContent, .content-area { margin: 0 !important; padding: 0 !important; width: auto !important; }

    /* Columns become flowing blocks instead of fixed-height scroll panes. */
    #cardBoard {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    #cardBoard > * {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        break-inside: auto;
        page-break-inside: auto;
        margin: 0 0 10pt;
    }

    .card-item, .jsf-lane-card, .jsf-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #bbb !important;
        border-radius: 4pt;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
        margin: 0 0 4pt;
        padding: 5pt 7pt;
    }

    /* Column headings repeat context on every page. */
    .column-header, .jsf-lane-head {
        break-after: avoid;
        page-break-after: avoid;
        border-bottom: 1.5pt solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
        padding: 0 0 2pt;
        margin: 8pt 0 5pt;
    }

    .jsf-lanes { display: block !important; }
    .jsf-lane { border: 0 !important; break-inside: auto; }
    .jsf-lane-cards { display: block !important; padding: 0 !important; }

    /* Tables print with a repeating header row. */
    .jsf-table { width: 100% !important; border-collapse: collapse !important; }
    .jsf-table thead { display: table-header-group; }
    .jsf-table th, .jsf-table td { border: 1px solid #bbb !important; padding: 3pt 5pt !important; font-size: 9pt; }
    #jsfListView { display: block !important; }

    /* Keep the semantic colour cues that survive greyscale. */
    .jsf-prio-4, .jsf-due-overdue, .jsf-blocked-badge {
        font-weight: 700;
        background: none !important;
        color: #000 !important;
        border-color: #000 !important;
    }
    .jsf-blocked-badge::after { content: ' blocked'; }

    /* Show link targets so a printed page is still actionable. */
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }

    @page { margin: 14mm 12mm; }
}

/* --- End: assets/features3.css --- */

/* --- Begin: assets/features4.css --- */
/* ============================================================================
   Job System — feature layer, phase 4 styling
   ----------------------------------------------------------------------------
   Uses the --jsf-* token vocabulary from features.css (surface-1/2/3,
   ink-1/2/3, line, accent, danger, success, warning) so light/dark theming
   comes for free. No invented token names.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Timer chip
   ------------------------------------------------------------------------ */
.jsf-timer-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: .78rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--jsf-accent);
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-1);
    cursor: pointer;
}
.jsf-timer-chip[hidden] { display: none; }
.jsf-timer-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--jsf-danger);
    animation: jsf-timer-pulse 1.6s ease-in-out infinite;
}
@keyframes jsf-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.jsf-timer-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsf-timer-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--jsf-accent); }
@media (prefers-reduced-motion: reduce) { .jsf-timer-dot { animation: none; } }

/* ---------------------------------------------------------------------------
   Card panel — Time section
   ------------------------------------------------------------------------ */
.jsf-time-summary { margin-bottom: 8px; }
.jsf-time-total { font-size: .9rem; }
.jsf-time-total strong { font-variant-numeric: tabular-nums; }
.jsf-time-bar {
    height: 7px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--jsf-surface-3);
    overflow: hidden;
}
.jsf-time-bar span { display: block; height: 100%; border-radius: 999px; background: var(--jsf-success); }
.jsf-time-bar.is-over span { background: var(--jsf-danger); }
.jsf-time-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.jsf-time-actions input { flex: 1 1 120px; min-width: 0; }
.jsf-time-entries { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.jsf-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    padding: 3px 4px;
    border-radius: 6px;
    color: var(--jsf-ink-2);
}
.jsf-time-row:hover { background: var(--jsf-surface-2); }
.jsf-time-row.is-running { color: var(--jsf-accent); font-weight: 600; }
.jsf-time-when { font-variant-numeric: tabular-nums; }
.jsf-time-len { min-width: 52px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--jsf-ink-1); }
.jsf-time-row.is-running .jsf-time-len { color: inherit; }
.jsf-time-note { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jsf-ink-3); }

/* ---------------------------------------------------------------------------
   Custom fields
   ------------------------------------------------------------------------ */
.jsf-linklike {
    font: inherit;
    font-size: .74rem;
    border: 0;
    background: none;
    color: var(--jsf-accent);
    cursor: pointer;
    padding: 0 2px;
}
.jsf-linklike:hover { text-decoration: underline; }

.jsf-field-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; }
.jsf-field-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .66rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--jsf-surface-2);
    border: 1px solid var(--jsf-line);
    color: var(--jsf-ink-2);
    max-width: 100%;
}
.jsf-field-chip b {
    font-weight: 700;
    color: var(--jsf-ink-3);
    text-transform: uppercase;
    font-size: .58rem;
    letter-spacing: .03em;
}

.jsf-fieldman { display: flex; flex-direction: column; gap: 6px; }
.jsf-fieldman-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--jsf-line);
    border-radius: 30px;
    background: var(--jsf-surface-2);
}
.jsf-fieldman-name { font-weight: 600; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.jsf-fieldman-type {
    font-size: .68rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--jsf-surface-1);
    border: 1px solid var(--jsf-line);
    color: var(--jsf-ink-3);
}
.jsf-fieldman-front { font-size: .76rem; display: flex; align-items: center; gap: 5px; color: var(--jsf-ink-2); white-space: nowrap; }
.jsf-fieldman-add { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.jsf-fieldman-add input[type=text] { flex: 1 1 140px; min-width: 0; }

/* ---------------------------------------------------------------------------
   Automation manager
   ------------------------------------------------------------------------ */
.jsf-auto { display: flex; flex-direction: column; gap: 10px; }
.jsf-auto h4 { margin: 10px 0 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--jsf-ink-3); }
.jsf-auto-rules { display: flex; flex-direction: column; gap: 6px; }
.jsf-auto-rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--jsf-line);
    border-radius: 9px;
    background: var(--jsf-surface-2);
}
.jsf-auto-rule.is-off { opacity: .55; }
.jsf-auto-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jsf-auto-text strong { font-size: .86rem; }
.jsf-auto-text span { font-size: .76rem; color: var(--jsf-ink-2); }
.jsf-auto-text .jsf-auto-meta { font-size: .68rem; color: var(--jsf-ink-3); }
.jsf-auto-toggle { position: relative; display: inline-block; width: 34px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.jsf-auto-toggle input { opacity: 0; width: 0; height: 0; }
.jsf-auto-toggle span {
    position: absolute; inset: 0;
    border-radius: 999px;
    background: var(--jsf-surface-3);
    border: 1px solid var(--jsf-line);
    transition: background .15s;
    cursor: pointer;
}
.jsf-auto-toggle span::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--jsf-surface-1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .15s;
}
.jsf-auto-toggle input:checked + span { background: var(--jsf-accent); border-color: var(--jsf-accent); }
.jsf-auto-toggle input:checked + span::after { transform: translateX(14px); }
.jsf-auto-toggle input:focus-visible + span { outline: 2px solid var(--jsf-accent); outline-offset: 1px; }

.jsf-auto-recipes { display: flex; flex-wrap: wrap; gap: 6px; }
.jsf-recipe {
    font: inherit;
    font-size: .76rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px dashed var(--jsf-line);
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-2);
    cursor: pointer;
    text-align: left;
}
.jsf-recipe:hover { border-color: var(--jsf-accent); color: var(--jsf-accent); border-style: solid; }

.jsf-auto-build { display: flex; flex-direction: column; gap: 6px; }
.jsf-auto-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jsf-auto-row > span { font-size: .82rem; font-weight: 600; min-width: 42px; }
.jsf-auto-row select { flex: 1 1 auto; min-width: 0; }
.jsf-auto-row input[type=text] { flex: 1 1 90px; min-width: 0; }
.jsf-auto-row label { display: flex; align-items: center; gap: 6px; font-size: .8rem; margin-right: auto; }

/* ---------------------------------------------------------------------------
   Calendar view
   ------------------------------------------------------------------------ */
.jsf-cal {
    position: relative !important;
    z-index: 10 !important;
    padding: 16px 20px 24px !important;
    max-width: 80rem !important;
    margin: 16px auto 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--jsf-surface-1, #ffffff);
    border: 1px solid var(--jsf-line, #e5e7eb);
    border-radius: var(--card-radius, 12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.dark .jsf-cal {
    background: var(--jsf-surface-1, #1f2937);
    border-color: var(--jsf-line, #374151);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.jsf-cal-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.jsf-cal-head h3 { margin: 0; font-size: 1.1rem; }
.jsf-cal-nav { display: flex; gap: 4px; }
.jsf-cal-hint { margin-left: auto; font-size: .76rem; }

.jsf-cal-main { display: grid; grid-template-columns: 1fr 230px; gap: 12px; align-items: start; }
.jsf-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--jsf-line);
    border: 1px solid var(--jsf-line);
    border-radius: 10px;
    overflow: hidden;
}
.jsf-cal-dow {
    padding: 6px 8px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--jsf-ink-3);
    background: var(--jsf-surface-2);
    text-align: center;
}
.jsf-cal-day {
    min-height: 92px;
    padding: 6px;
    background: var(--jsf-surface-1);
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
}
.jsf-cal-day.is-out { background: var(--jsf-surface-2); }
.jsf-cal-day.is-out .jsf-cal-num { opacity: .45; }
.jsf-cal-day.is-today .jsf-cal-num {
    background: var(--jsf-accent);
    color: var(--jsf-accent-ink);
    border-radius: 999px;
}
.jsf-cal-day.is-dropping, .jsf-cal-tray.is-dropping { outline: 2px dashed var(--jsf-accent); outline-offset: -3px; }
.jsf-cal-num {
    align-self: flex-end;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--jsf-ink-3);
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.jsf-cal-chip {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: .73rem;
    line-height: 1.35;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--jsf-line);
    border-left-width: 3px;
    background: var(--jsf-surface-2);
    color: var(--jsf-ink-1);
    cursor: grab;
    cursor: -webkit-grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: element;
    touch-action: none;
    overflow: hidden;
}
.jsf-cal-chip:active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}
.jsf-cal-chip-title {
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jsf-cal-chip-desc {
    font-size: .68rem;
    line-height: 1.4;
    opacity: .85;
    margin-top: 5px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.jsf-cal-chip:hover { border-color: var(--jsf-accent); }
.jsf-cal-chip.is-over { border-left-color: var(--jsf-danger); color: var(--jsf-danger); }
.jsf-cal-chip.is-done { opacity: .55; text-decoration: line-through; }
.jsf-cal-chip.jsf-calp-3 { border-left-color: #ea580c; }
.jsf-cal-chip.jsf-calp-4 { border-left-color: #dc2626; }
.dark .jsf-cal-chip.jsf-calp-3 { border-left-color: #f0ad67; }
.dark .jsf-cal-chip.jsf-calp-4 { border-left-color: #f0847a; }

.jsf-cal-tray {
    border: 1px solid var(--jsf-line);
    border-radius: 10px;
    background: var(--jsf-surface-2);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 70vh;
    overflow-y: auto;
}
.jsf-cal-tray h4 {
    margin: 0 0 4px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--jsf-ink-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 820px) {
    .jsf-cal-main { grid-template-columns: 1fr; }
    .jsf-cal-day { min-height: 64px; }
    .jsf-cal-tray { max-height: 32vh; }
}

/* ---------------------------------------------------------------------------
   Card aging — untouched cards fade in three steps (any activity resets)
   ------------------------------------------------------------------------ */
.card-item[data-age="1"] { opacity: .85; }
.card-item[data-age="2"] { opacity: .68; filter: saturate(.75); }
.card-item[data-age="3"] { opacity: .5; filter: saturate(.4); }
.card-item[data-age]:hover,
.card-item[data-age]:focus-within,
.card-item.overdue-flash,
.card-item.overdue-flash[data-age],
.card-item:has(.overdue-pill),
.card-item:has(.overdue-pill)[data-age] { opacity: 1 !important; filter: none !important; }

/* ---------------------------------------------------------------------------
   Print — calendar prints as a clean grid; interactive chrome vanishes
   ------------------------------------------------------------------------ */
@media print {
    .jsf-timer-chip, .jsf-cal-tray, .jsf-cal-nav, .jsf-cal-hint { display: none !important; }
    .jsf-cal-grid { border-color: #bbb !important; background: #bbb !important; }
    .jsf-cal-day { background: #fff !important; min-height: 70pt; }
    .jsf-cal-chip { border-color: #bbb !important; background: #fff !important; color: #000 !important; }
    .card-item[data-age] { opacity: 1 !important; filter: none !important; }
}

/* --- End: assets/features4.css --- */

/* --- Begin: assets/features5.css --- */
/* ============================================================================
   Job System — responsive layer (phones, tablets, desktop web)
   ----------------------------------------------------------------------------
   Loaded last. Reshapes the existing layout per device class without touching
   the markup the app renders:

     PHONE  (≤640px)   compact header, horizontally-swipeable board columns
                       with scroll-snap and a dots pager, one-row filter bar,
                       bottom navigation with a "more" sheet, the floating
                       calendar dock hidden (it covered 82% of the screen)
     TABLET (641–1023) comfortable 340px columns with horizontal scroll-snap
                       instead of three squeezed 230px columns
     WEB    (≥641px)   sticky filter bar, tidy thin scrollbars

   Uses the --jsf-* token vocabulary from features.css throughout.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Shared: touch ergonomics
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {
    .jsf-tool, .jsf-btn, .jsf-chip-filter, .jsf-seg button,
    #jsfViewbar select, .jsf-op, .jsf-cal-chip, .jsf-recipe {
        min-height: 40px;
    }
    .jsf-rel-del, .jsf-icon-btn { min-width: 40px; min-height: 40px; }
    .jsf-hit { padding-top: 12px; padding-bottom: 12px; }
    * { -webkit-tap-highlight-color: transparent; }
}

/* Thin, unobtrusive scrollbars for the horizontal scrollers this layer adds */
.jsf-hscroll { scrollbar-width: thin; }
.jsf-hscroll::-webkit-scrollbar { height: 6px; }
.jsf-hscroll::-webkit-scrollbar-thumb { background: var(--jsf-line); border-radius: 999px; }
.jsf-hscroll::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------------
   WEB / TABLET (≥641px): sticky filter bar — filters, view toggle and search
   stay reachable however far the board scrolls.
   ------------------------------------------------------------------------ */
@media (min-width: 641px) {
    #jsfViewbar {
        position: sticky;
        top: 0;
        z-index: 25;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }
}

/* ---------------------------------------------------------------------------
   TABLET (641–1023px): the Tailwind grid squeezes three columns into ~230px
   each at 768px. Swap to fixed-width columns with horizontal scroll-snap —
   two comfortable columns visible, the third a swipe away.
   ------------------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 1023px) {
    #boardColumnsContainer {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        gap: 16px;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    #boardColumnsContainer > .board-column {
        flex: 0 0 340px !important;
        width: 340px !important;
        max-width: none !important;
        scroll-snap-align: start;
    }
    header .container { padding-top: 10px; padding-bottom: 6px; }
}

/* ---------------------------------------------------------------------------
   PHONE (≤640px)
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {

    /* --- header: from ~460px of chrome down to two tight rows ------------- */
    header .container { padding-top: 8px; padding-bottom: 2px; }
    #userInfo { display: none; }

    /* The feature toolbar collapses extraneous tools */
    #jsfToolbar > .jsf-tool:not(.jsf-more) { display: none !important; }

    /* --- worksheet tabs: one scrollable row, never a wrap ----------------- */
    #worksheetsTabBar { overflow: hidden; }
    #worksheetsList {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    #worksheetsList::-webkit-scrollbar { display: none; }
    #worksheetsList > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

    /* --- filter bar: one scrollable row instead of three wrapped ones ----- */
    #jsfViewbar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: sticky;
        top: 0;
        z-index: 40;
    }
    #jsfViewbar::-webkit-scrollbar { display: none; }
    #jsfViewbar > * { flex: 0 0 auto; }

    /* --- the board: swipeable columns, Trello-style ----------------------- */
    #cardBoard { padding-left: 8px !important; padding-right: 8px !important; padding-top: 12px !important; }
    #boardColumnsContainer {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 0 4px 8px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    #boardColumnsContainer::-webkit-scrollbar { display: none; }
    #boardColumnsContainer > .board-column {
        flex: 0 0 86% !important;
        width: 86% !important;
        max-width: none !important;
        scroll-snap-align: center;
    }

    /* The header's New Card button duplicates the nav's big ＋ — reclaim the row */
    header button[onclick^="showCardModal"] { display: none !important; }

    /* --- column dots pager: pinned just above the bottom nav ---------------- */
    .jsf-dots {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(62px + env(safe-area-inset-bottom, 0px));
        z-index: 2147482900;
        display: flex;
        justify-content: center;
        gap: 7px;
        padding: 4px 0;
        pointer-events: none;
    }
    /* The app styles bare <button> globally, so every dimension here must win
       explicitly or the dots render as full-size buttons. */
    .jsf-dots button {
        pointer-events: auto;
        box-sizing: border-box;
        width: 9px !important;
        height: 9px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--jsf-ink-3);
        opacity: .55;
        cursor: pointer;
        transition: transform .15s, background .15s, opacity .15s;
    }
    .jsf-dots button.is-active {
        background: var(--jsf-accent);
        opacity: 1;
        transform: scale(1.4);
    }

    /* --- the floating calendar dock covered 82% of the width -------------- */
    #calendarModal.bottom-bar-mode { display: none !important; }

    /* --- room for the bottom navigation (plus iOS safe area) --------------- */
    body.jsf-has-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    body.jsf-has-nav .jsf-panel { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    /* --- bottom navigation -------------------------------------------------- */
    .jsf-nav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 2147483000;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--jsf-surface-1);
        border-top: 1px solid var(--jsf-line);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    }
    .jsf-nav button {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: none;
        font: inherit;
        font-size: .62rem;
        color: var(--jsf-ink-3);
        cursor: pointer;
    }
    .jsf-nav button i { font-size: 1.05rem; }
    .jsf-nav button.is-active { color: var(--jsf-accent); }
    .jsf-nav .jsf-nav-new {
        flex: 0 0 64px;
        position: relative;
    }
    .jsf-nav .jsf-nav-new > span.jsf-nav-plus {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-top: -18px;
        border-radius: 50%;
        background: var(--jsf-accent);
        color: var(--jsf-accent-ink);
        font-size: 1.25rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    }

    /* --- "more" bottom sheet ------------------------------------------------ */
    .jsf-sheet-back {
        position: fixed;
        inset: 0;
        z-index: 2147483100;
        background: rgba(8, 11, 16, .5);
        display: flex;
        align-items: flex-end;
    }
    .jsf-sheet {
        width: 100%;
        max-height: 72vh;
        overflow-y: auto;
        background: var(--jsf-surface-1);
        color: var(--jsf-ink-1);
        border-radius: 16px 16px 0 0;
        padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
        animation: jsf-sheet-up .18s ease-out;
    }
    @keyframes jsf-sheet-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .jsf-sheet { animation: none; } }
    .jsf-sheet::before {
        content: '';
        display: block;
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: var(--jsf-line);
        margin: 2px auto 10px;
    }
    .jsf-sheet button {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        text-align: left;
        font: inherit;
        font-size: .92rem;
        padding: 12px 10px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: inherit;
        cursor: pointer;
    }
    .jsf-sheet button:active { background: var(--jsf-surface-3); }
    .jsf-sheet button i { width: 22px; text-align: center; color: var(--jsf-ink-3); }
    .jsf-sheet button.jsf-sheet-danger { color: var(--jsf-danger); }
    .jsf-sheet button.jsf-sheet-danger i { color: inherit; }
    .jsf-sheet hr { border: 0; border-top: 1px solid var(--jsf-line); margin: 6px 0; }

    /* --- misc phone tidy-ups ------------------------------------------------ */
    .jsf-timer-chip .jsf-timer-name { max-width: 72px; }
    /* 100% not 100vw — see the note in features12.css: 100vw includes the
       scrollbar width and overflows the visible area. */
    .jsf-panel { width: 100% !important; max-width: 100% !important; }
    /* Dialogs sit above the bottom nav, not behind it */
    .jsf-backdrop { z-index: 2147483200; }
}

/* Print: the responsive chrome must never appear on paper */
@media print {
    .jsf-nav, .jsf-dots, .jsf-sheet-back { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Global modal: tighten the gap between the title row and the first field.
   All modal containers use p-6 (24px all round); reducing just the top padding
   removes the excessive whitespace above the title without affecting the side /
   bottom breathing room.  The mb-4 on the title flex row is also trimmed so
   there is no double-gap between the heading and the first input.
   --------------------------------------------------------------------------- */
[id$="Modal"] > div,
[id$="ModalContainer"],
#cardModalContainer {
    padding-top: 14px !important;
}

/* Title / action-button row inside every modal */
[id$="Modal"] > div > .flex.items-center.justify-between:first-child,
[id$="ModalContainer"] > .flex.items-center.justify-between:first-child,
#cardModalContainer > .flex.items-center.justify-between {
    margin-bottom: 10px !important;
}

/* ---------------------------------------------------------------------------
   Music player bottom clearance.
   When the docked player bar is visible, guarantee #cardBoard always scrolls
   clear of it.  pb-28 (112 px) set by the JS may be insufficient once the
   seek-bar row is rendered.  Using :has() here means zero JS timing risk —
   the rule is always active whenever the conditions are met.
   player-fullscreen covers the whole viewport so no padding is needed there.
   player-floating is anchored to the corner — also no padding needed.
   --------------------------------------------------------------------------- */
body:has(#musicPlayerBar:not(.hidden):not(.player-floating):not(.player-fullscreen)) #cardBoard {
    padding-bottom: 140px !important;
}

/* ---------------------------------------------------------------------------
   Supreme Site Appearance Enforcement Engine
   Guarantees card border radius (--card-radius) and input field radius (--input-radius)
   are strictly applied to all worksheet cards, board cards, swimlane cards,
   search inputs, card tables, and form fields regardless of CSS load order.
   --------------------------------------------------------------------------- */
.card-item,
.board-card,
.jsf-lane-card,
.collection-card,
.media-card,
div[id^="card-"],
.card-item > div,
.card-item img,
.card-item iframe,
.batch-creator-table,
.column-upload-box,
#emptyColumnTable,
.empty-column-table,
#emptyColumnContainer,
.jsf-listwrap,
#jsfListView,
#cardsTableContainer,
.table-container {
    border-radius: var(--card-radius, 30px) !important;
}

/* Card image / cover clipping header */
.card-item .card-cover,
.card-item .card-header-img,
.card-item [style*="background-image"] {
    border-top-left-radius: var(--card-radius, 30px) !important;
    border-top-right-radius: var(--card-radius, 30px) !important;
}

/* Search cards input & all text inputs */
#cardSearch,
#burgerSearchInput,
#jsfSearchInput,
.jsf-search-input,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
select,
textarea {
    border-radius: var(--input-radius, 6px) !important;
}



/* --- End: assets/features5.css --- */

/* --- Begin: assets/features6.css --- */
/* ============================================================================
   Job System — feature layer, phase 6 styling
   ----------------------------------------------------------------------------
   Timeline (Gantt), quick add, cover colours, checklist conversion.
   Uses the --jsf-* token vocabulary from features.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Cover colours
   ------------------------------------------------------------------------ */
.jsf-cover-stripe {
    height: 7px;
    border-radius: 30px 30px 0 0;
    margin: -1px -1px 6px;
}
.jsf-cover-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.jsf-cover-row > label { font-size: .74rem; font-weight: 700; text-transform: uppercase;
                         letter-spacing: .04em; color: var(--jsf-ink-3); }
.jsf-cover-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.jsf-cover-swatches button {
    box-sizing: border-box;
    width: 26px !important;
    height: 26px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 7px !important;
    cursor: pointer;
}
.jsf-cover-swatches button.is-on { border-color: var(--jsf-ink-1) !important; }
.jsf-cover-swatches .jsf-cover-none {
    background: var(--jsf-surface-2);
    color: var(--jsf-ink-3);
    border: 1px dashed var(--jsf-line) !important;
    font-size: .9rem;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   Checklist item → card
   ------------------------------------------------------------------------ */
.jsf-item-convert { opacity: .35; }
.jsf-check-row:hover .jsf-item-convert,
.jsf-item-convert:focus-visible { opacity: 1; }
@media (pointer: coarse) { .jsf-item-convert { opacity: .7; } }

/* ---------------------------------------------------------------------------
   Quick add
   ------------------------------------------------------------------------ */
.jsf-quick-back { align-items: flex-start; padding-top: clamp(24px, 14vh, 160px); }
.jsf-quick {
    width: min(640px, 94vw);
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-1);
    border: 1px solid var(--jsf-line);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.jsf-quick-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.jsf-quick-bar > i { color: var(--jsf-warning); }
.jsf-quick-bar input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 1.02rem;
}
.jsf-quick-bar kbd {
    font: inherit; font-size: .72rem; padding: 2px 7px; border-radius: 5px;
    border: 1px solid var(--jsf-line); color: var(--jsf-ink-3);
}
.jsf-quick-chips {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--jsf-line);
    background: var(--jsf-surface-2);
    min-height: 42px;
    font-size: .8rem;
}
.jsf-quick-title { font-weight: 700; margin-right: 4px; }
.jsf-qchip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--jsf-line);
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-2);
}
.jsf-qchip i { font-size: .62rem; color: var(--jsf-ink-3); }
.jsf-qchip-p3 { color: var(--jsf-warning); border-color: currentColor; }
.jsf-qchip-p4 { color: var(--jsf-danger); border-color: currentColor; }

/* ---------------------------------------------------------------------------
   Timeline (Gantt)
   ------------------------------------------------------------------------ */
.jsf-gantt { padding: 4px 2px 24px; }
.jsf-gantt-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.jsf-gantt-head h3 { margin: 0; font-size: 1.1rem; }
.jsf-gantt-head .jsf-btn { margin-left: auto; }

.jsf-gantt-main {
    display: grid;
    grid-template-columns: 200px 1fr;
    border: 1px solid var(--jsf-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--jsf-surface-1);
}
.jsf-g-names { display: flex; flex-direction: column; padding-top: 44px; border-right: 1px solid var(--jsf-line); }
.jsf-g-name {
    height: 36px;
    display: flex; align-items: center;
    text-align: left;
    font: inherit; font-size: .78rem;
    padding: 0 10px;
    border: 0; background: none;
    color: var(--jsf-ink-1);
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-bottom: 1px dashed var(--jsf-line);
}
.jsf-g-name:hover { background: var(--jsf-surface-2); color: var(--jsf-accent); }
.jsf-g-name.is-done { color: var(--jsf-ink-3); text-decoration: line-through; }

.jsf-g-scroll { overflow-x: auto; scrollbar-width: thin; }
.jsf-g-canvas { position: relative; background: var(--jsf-surface-1); }
.jsf-g-shade { position: absolute; top: 0; bottom: 0; background: var(--jsf-surface-2); }
.jsf-g-axis1 { position: absolute; top: 0; left: 0; right: 0; height: 20px; }
.jsf-g-month {
    position: absolute; top: 2px;
    font-size: .68rem; font-weight: 700;
    color: var(--jsf-ink-2);
    padding-left: 4px;
    border-left: 1px solid var(--jsf-line);
    white-space: nowrap;
}
.jsf-g-axis2 { position: absolute; top: 20px; left: 0; right: 0; height: 22px; border-bottom: 1px solid var(--jsf-line); }
.jsf-g-day {
    position: absolute; top: 0; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem;
    color: var(--jsf-ink-3);
}
.jsf-g-day.is-we { color: var(--jsf-ink-3); opacity: .55; }
.jsf-g-today {
    position: absolute; top: 20px; bottom: 0;
    width: 2px;
    background: var(--jsf-danger);
    opacity: .8;
    z-index: 2;
}
.jsf-g-arrows {
    position: absolute; inset: 0;
    pointer-events: none;
    color: var(--jsf-ink-3);
    z-index: 3;
}

.jsf-g-bar {
    position: absolute;
    height: 24px;
    border-radius: 6px;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: grab;
    z-index: 4;
    touch-action: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    user-select: none;
}
.jsf-g-bar.is-drag { cursor: grabbing; opacity: .85; z-index: 6; }
.jsf-g-bar.is-done { opacity: .45; }
/* Pinned to the window edge because its real dates fall outside the axis —
   shown dashed, and not draggable (a pixel of drag would rewrite old dates). */
.jsf-g-bar.is-clipped { opacity: .6; border: 1px dashed rgba(255, 255, 255, .7); cursor: pointer; }
.jsf-g-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .68rem;
    font-weight: 600;
    padding: 0 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.jsf-g-h {
    flex: 0 0 8px;
    align-self: stretch;
    cursor: ew-resize;
    border-radius: 6px 0 0 6px;
}
.jsf-g-hr { border-radius: 0 6px 6px 0; }
.jsf-g-h:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 640px) {
    .jsf-gantt-main { grid-template-columns: 130px 1fr; }
    .jsf-g-name { font-size: .68rem; padding: 0 6px; }
    .jsf-quick-back { padding-top: 8vh; }
}

@media print {
    .jsf-gantt-head .jsf-btn, .jsf-quick-back { display: none !important; }
    .jsf-gantt-main { border-color: #bbb !important; }
    .jsf-g-bar { box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- End: assets/features6.css --- */

/* --- Begin: assets/features7.css --- */
/* ============================================================================
   Job System — feature layer, phase 7 styling
   ----------------------------------------------------------------------------
   Board accents, snooze, activity feed, Trello import, rule-builder v2 rows.
   Uses the --jsf-* token vocabulary from features.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Board accent line
   ------------------------------------------------------------------------ */
.jsf-accent-line { height: 4px; border-radius: 999px; margin: 4px 12px 0; opacity: .85; }

/* ---------------------------------------------------------------------------
   Snooze
   ------------------------------------------------------------------------ */
.jsf-snooze-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.jsf-snooze-row > label {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--jsf-ink-3);
}
.jsf-snooze-chip[hidden] { display: none; }
.jsf-snooze-chip { color: var(--jsf-ink-2); }
.jsf-snooze-chip.is-active { color: var(--jsf-accent); border-color: var(--jsf-accent); }
/* While peeking, sleeping cards are visibly asleep. */
.card-item.jsf-is-snoozed { opacity: .55; filter: grayscale(.4); }
.card-item.jsf-is-snoozed:hover { opacity: 1; filter: none; }

/* ---------------------------------------------------------------------------
   Activity feed
   ------------------------------------------------------------------------ */
.jsf-feed-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.jsf-feed-filters .jsf-op.is-active {
    background: var(--jsf-accent);
    border-color: var(--jsf-accent);
    color: var(--jsf-accent-ink);
}
.jsf-feed-scope { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--jsf-ink-3); }
.jsf-feed { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; margin-bottom: 10px; }
.jsf-feed-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 30px;
    font-size: .82rem;
}
.jsf-feed-row[data-open] { cursor: pointer; }
.jsf-feed-row:hover { background: var(--jsf-surface-2); }
.jsf-feed-row > i { width: 18px; text-align: center; color: var(--jsf-ink-3); margin-top: 2px; }
.jsf-feed-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jsf-feed-text strong { text-transform: capitalize; }
.jsf-feed-detail { font-size: .74rem; color: var(--jsf-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsf-feed-row time { flex: 0 0 auto; font-size: .7rem; color: var(--jsf-ink-3); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Trello import
   ------------------------------------------------------------------------ */
.jsf-import { display: flex; flex-direction: column; gap: 10px; }
.jsf-import p { margin: 0; font-size: .84rem; color: var(--jsf-ink-2); }
.jsf-import textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    padding: 8px 10px;
    border: 1px solid var(--jsf-line);
    border-radius: 30px;
    background: var(--jsf-surface-2);
    color: var(--jsf-ink-1);
    resize: vertical;
}
.jsf-import-row { display: flex; align-items: center; gap: 10px; }

/* ---------------------------------------------------------------------------
   Rule builder v2 rows
   ------------------------------------------------------------------------ */
.jsf-auto-addrow { gap: 12px; }
.jsf-auto-addrow select { flex: 0 1 auto; font-size: .78rem; }
.jsf-auto-cond > span, .jsf-auto-act > span { min-width: 52px; font-size: .8rem; font-weight: 600; }
.jsf-auto-cond .jsf-rel-del, .jsf-auto-act .jsf-rel-del { flex: 0 0 auto; }

/* --- End: assets/features7.css --- */

/* --- Begin: assets/features8.css --- */
/* ============================================================================
   Job System — feature layer, phase 8 styling
   ----------------------------------------------------------------------------
   Today view, swipe actions, pull-to-refresh, compact density, column counts,
   keyboard focus. Uses the --jsf-* token vocabulary from features.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Today view
   ------------------------------------------------------------------------ */
.jsf-today-back { align-items: flex-start; padding-top: clamp(20px, 8vh, 90px); }
.jsf-today {
    width: min(560px, 94vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-1);
    border: 1px solid var(--jsf-line);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.jsf-today-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--jsf-line);
}
.jsf-today-head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.jsf-today-head h3 i { color: var(--jsf-warning); }
.jsf-today-head kbd {
    margin-left: auto;
    font: inherit; font-size: .72rem; padding: 2px 7px; border-radius: 5px;
    border: 1px solid var(--jsf-line); color: var(--jsf-ink-3);
}
.jsf-today-body { overflow-y: auto; padding: 10px 12px 16px; }
.jsf-today-sec h4 {
    margin: 12px 4px 6px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--jsf-ink-3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.jsf-today-sec.is-over h4 { color: var(--jsf-danger); }
.jsf-today-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 9px;
    cursor: pointer;
}
.jsf-today-row:hover { background: var(--jsf-surface-2); }
.jsf-today-done {
    flex: 0 0 auto;
    font: inherit;
    font-size: 1.05rem;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--jsf-ink-3);
    cursor: pointer;
}
.jsf-today-done:hover { color: var(--jsf-success); }
.jsf-today-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jsf-today-text span { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsf-today-text small { font-size: .7rem; color: var(--jsf-ink-3); }
.jsf-today-pri {
    flex: 0 0 auto;
    font-size: .66rem; font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.jsf-today-pri.p3 { color: var(--jsf-warning); }
.jsf-today-pri.p4 { color: var(--jsf-danger); }

/* ---------------------------------------------------------------------------
   Swipe actions — the card itself slides; a hint glows behind it
   ------------------------------------------------------------------------ */
.card-item.jsf-swiping { transition: none; position: relative; z-index: 5; }
.card-item.jsf-swipe-right { box-shadow: -6px 0 18px -6px var(--jsf-success) inset; }
.card-item.jsf-swipe-left { box-shadow: 6px 0 18px -6px var(--jsf-accent) inset; }
.card-item:not(.jsf-swiping) { transition: transform .18s ease-out; }

/* ---------------------------------------------------------------------------
   Pull-to-refresh bubble
   ------------------------------------------------------------------------ */
.jsf-ptr {
    position: fixed;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483100;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--jsf-surface-1);
    color: var(--jsf-ink-2);
    border: 1px solid var(--jsf-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.jsf-ptr.is-ready { color: var(--jsf-accent); border-color: var(--jsf-accent); }
.jsf-ptr.is-spin i { animation: jsf-ptr-spin .7s linear infinite; }
@keyframes jsf-ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jsf-ptr.is-spin i { animation: none; } }

/* ---------------------------------------------------------------------------
   Compact density (desktop / tablet)
   ------------------------------------------------------------------------ */
/* The card's padding lives on its inner .p-4 wrapper, not the shell —
   shrinking the shell would ADD padding where there was none. */
body.jsf-compact .card-item { margin-bottom: 6px !important; font-size: .86em; }
body.jsf-compact .card-item > .p-4 { padding: 7px 10px !important; }
body.jsf-compact .card-item h3,
body.jsf-compact .card-item .card-title { font-size: .92em !important; margin-bottom: 2px !important; }
body.jsf-compact .jsf-card-flags { padding: 0 6px 4px; gap: 4px; }
body.jsf-compact .jsf-field-chips { padding: 0 6px 4px; }
body.jsf-compact .board-column { padding: 10px !important; }
body.jsf-compact .jsf-cover-stripe { height: 4px; margin-bottom: 4px; }

/* ---------------------------------------------------------------------------
   Column count badges
   ------------------------------------------------------------------------ */
.jsf-colcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    background: var(--jsf-surface-2);
    border: 1px solid var(--jsf-line);
    color: var(--jsf-ink-2);
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Keyboard focus ring (j / k)
   ------------------------------------------------------------------------ */
.card-item.jsf-kbd-focus {
    outline: 2px solid var(--jsf-accent);
    outline-offset: 2px;
    border-radius: 30px;
}

@media print {
    .jsf-today-back, .jsf-ptr { display: none !important; }
    .jsf-colcount { border-color: #bbb !important; color: #000 !important; background: none !important; }
}

/* --- End: assets/features8.css --- */

/* --- Begin: assets/features9.css --- */
/* ============================================================================
   Job System — feature layer, phase 9: the visual reset
   ----------------------------------------------------------------------------
   One coherent chrome across phone / tablet / desktop, following the design
   language the leading task managers converged on (Trello 2025, Linear,
   Asana, Notion):

     · one slim non-wrapping app bar (was 187px of wrapping buttons)
     · ghost-neutral chrome — accent colour appears ONLY on the primary
       action, active tab, links and focus (was yellow/indigo/red/green)
     · three-layer neutral surfaces: canvas → column → card
     · 8px-radius cards with hairline borders inside 12px-radius quiet columns
     · a 4px spacing grid; two control sizes (32px pointer / 44px touch)
     · calm state signalling — no infinite flashing, no bouncing chrome

   Loads AFTER features8.css. Uses only the --jsf-* token vocabulary.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · App bar — one row, 4px grid, no wrap
   ------------------------------------------------------------------------ */
header .container { padding-top: 10px !important; padding-bottom: 0 !important; }
header .container > div.flex:first-child {
    margin-bottom: 6px !important;
    row-gap: 4px;
}
header h1 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
#headerLogo { height: 22px !important; }
/* a broken/missing logo file must never show the alt-text ghost */
#headerLogo.jsf9-noimg, #loginLogo.jsf9-noimg, #twoFactorLogo.jsf9-noimg { display: none !important; }

/* the welcome line duplicates the avatar/settings identity — retire it */
#userInfo { display: none !important; }
header .container .h-6.w-px { display: none !important; }

/* keep the action cluster on ONE line; overflow lives in menus now */
header .container > div.flex:first-child > div.flex.flex-wrap {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

/* --- unified control tone: ghost buttons except the primary action ------- */
#settingsBtn,
#jsfMoreBtn,
header button[onclick="logout()"],
#burgerMenuBtn {
    background: transparent !important;
    color: var(--jsf-ink-2) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 30px !important;
    padding: 6px 10px !important;
    min-height: 32px;
    font-size: 13px !important;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
#settingsBtn:hover, #jsfMoreBtn:hover, #burgerMenuBtn:hover {
    background: var(--jsf-surface-3) !important;
    color: var(--jsf-ink-1) !important;
}
header button[onclick="logout()"]:hover {
    background: var(--jsf-surface-3) !important;
    color: var(--jsf-danger) !important;
}

/* --- Admin button: distinctive indigo style --- */
#adminContainer:not(.hidden) {
    display: inline-block !important;
}
#adminContainer.hidden {
    display: none !important;
}
#adminBtn {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    box-shadow: none !important;
    border-radius: 30px !important;
    padding: 6px 10px !important;
    min-height: 32px;
    font-size: 13px !important;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#adminBtn:hover {
    background: rgba(99, 102, 241, 0.25) !important;
    color: #3730a3 !important;
}

/* Dark mode: Deep, dark purple theme */
.dark #adminBtn,
html.dark #adminBtn {
    background: rgba(35, 10, 75, 0.85) !important;
    color: #d8b4fe !important;
    border: 1px solid rgba(109, 40, 217, 0.5) !important;
}
.dark #adminBtn:hover,
html.dark #adminBtn:hover {
    background: rgba(58, 12, 110, 0.95) !important;
    color: #f3e8ff !important;
    border-color: rgba(147, 51, 234, 0.75) !important;
}

/* the single filled/primary action — green with hover shade */
.new-card-btn {
    background-color: #16a34a !important;
    background: #16a34a !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 6px 14px !important;
    min-height: 32px;
    font-size: 13px !important;
    font-weight: 600;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: background-color 0.15s ease, filter 0.15s ease !important;
}
.new-card-btn:hover {
    background-color: #15803d !important;
    background: #15803d !important;
    color: #ffffff !important;
    filter: brightness(1.05);
}
.new-card-btn:active {
    background-color: #166534 !important;
    background: #166534 !important;
}

/* header search input matches control height */
#cardSearch {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 32px;
    border-radius: 30px !important;
    font-size: 13px !important;
}

/* toolbar buttons (Search / More / bell) as quiet ghosts */
.jsf-toolbar { gap: 2px !important; margin-left: 2px !important; }
#jsfToolbar > .jsf-tool, #jsfToolbar .jsf-more > .jsf-tool {
    min-height: 32px;
    border-radius: 30px;
}

/* toolbar buttons that phase 9 relocated into the More menu: when they sit
   inside the menu they render as full-width rows (features3.css supplies the
   row look; this neutralises the pill look) */
#jsfMoreMenu .jsf-tool {
    width: 100%;
    justify-content: flex-start;
    background: transparent;
    border: 0;
    min-height: 0;
}
#jsfMoreMenu .jsf-tool span { display: inline !important; flex: 1 1 auto; text-align: left; }
#jsfMoreMenu .jsf9-sep {
    height: 1px;
    margin: 5px 4px;
    background: var(--jsf-line);
}

/* identity row in the Settings dropdown */
.jsf9-whoami {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    color: var(--jsf-ink-3) !important;
    border-bottom: 1px solid var(--jsf-line) !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    transition: background-color 0.15s ease !important;
    user-select: none !important;
}
.jsf9-whoami:hover {
    background-color: rgba(99, 102, 241, 0.1) !important;
}
.dark .jsf9-whoami:hover,
html.dark .jsf9-whoami:hover,
[data-theme="dark"] .jsf9-whoami:hover {
    background-color: rgba(99, 102, 241, 0.22) !important;
}
.jsf9-whoami:active {
    background-color: rgba(99, 102, 241, 0.18) !important;
}
.dark .jsf9-whoami:active,
html.dark .jsf9-whoami:active,
[data-theme="dark"] .jsf9-whoami:active {
    background-color: rgba(99, 102, 241, 0.32) !important;
}
.jsf9-whoami:focus-visible {
    outline: 2px solid #6366f1 !important;
    outline-offset: -2px !important;
}
.jsf9-whoami-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(99, 102, 241, 0.45) !important;
    background-color: #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.dark .jsf9-whoami-avatar,
html.dark .jsf9-whoami-avatar,
[data-theme="dark"] .jsf9-whoami-avatar {
    background-color: #1e293b !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
.jsf9-whoami-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
}
.jsf9-whoami-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.jsf9-whoami-text .whoami-label {
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    color: #64748b !important;
    display: block !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}
.dark .jsf9-whoami-text .whoami-label,
html.dark .jsf9-whoami-text .whoami-label,
[data-theme="dark"] .jsf9-whoami-text .whoami-label {
    color: #94a3b8 !important;
}
.jsf9-whoami-text b {
    color: var(--jsf-ink-1) !important;
    font-weight: 700 !important;
    display: block !important;
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

/* ---------------------------------------------------------------------------
   2 · Board-tab strip — one height, one baseline
   ------------------------------------------------------------------------ */
#worksheetsTabBar {
    padding-bottom: 0 !important;
    min-height: 40px;
    align-items: center !important;
}
#worksheetsList { align-items: center; }
#worksheetsList > .group,
#worksheetsList .folder-group > .group {
    height: 35px;
    padding: 0 12px !important;
    font-size: 13px;
    border-radius: 30px 30px 0 0;
    align-items: center;
}
#worksheetsList .folder-group { margin-bottom: 0 !important; }
#worksheetsTabBar #addWorksheetBtn {
    height: 28px;
    padding: 0 10px !important;
    border-radius: 30px;
    background: transparent !important;
    border-color: transparent !important;
}
#worksheetsTabBar #addWorksheetBtn:hover { background: var(--jsf-surface-3) !important; }

/* ---------------------------------------------------------------------------
   3 · View bar — one compact 4px-grid row
   ------------------------------------------------------------------------ */
#jsfViewbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
    min-height: 44px;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    overflow: hidden !important;
}
.dark #jsfViewbar, html.dark #jsfViewbar {
    background-color: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
#jsfViewbar select.jsf-chip-filter-hidden,
#jsfViewbar > select.jsf-chip-filter-hidden,
select.jsf-chip-filter-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
#jsfViewbar select:not(.jsf-chip-filter-hidden) {
    display: inline-block !important;
    vertical-align: middle !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px 14px !important;
    padding-right: 28px !important;
    padding-left: 12px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 32px !important;
    border-radius: 30px !important;
    font-size: 12.5px !important;
    background-color: var(--jsf-surface-2, #1f2937) !important;
    color: var(--jsf-ink-1, #f3f4f6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
}
#jsfViewbar select option {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}
#jsfViewbar .jsf-chip-filter:not(select), #jsfViewbar button {
    min-height: 32px;
    padding: 4px 12px !important;
    border-radius: 30px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   4 · Board — canvas → column → card layering, tighter rhythm
   ------------------------------------------------------------------------ */
#cardBoard, #jsfListView, .jsf-cal {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#boardColumnsContainer { gap: 16px !important; }

.board-column {
    background: var(--jsf-surface-2) !important;
    border: 0 !important;
    border-radius: 30px !important;
    box-shadow: none !important;
    padding: 10px !important;
}
.board-column > h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    padding: 4px 6px !important;
    display: flex;
    align-items: center;
}
.board-column > h2 i { font-size: 12px; }

/* cards: raised surface, hairline border, whisper shadow, hover lift */
.card-item {
    background: var(--jsf-surface-1) !important;
    border: 1px solid var(--jsf-line) !important;
    border-radius: var(--card-radius, 30px) !important;
    box-shadow: 0 1px 2px rgba(12, 16, 24, .05);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.card-item:hover {
    box-shadow: 0 4px 10px rgba(12, 16, 24, .09);
    transform: translateY(-1px);
}
.card-item h3 {
    font-size: .9rem !important;
    font-weight: 500 !important;
    line-height: 1.4;
}
.column.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 8px !important; }

/* overdue: bold danger highlight and pulsing animation */
.overdue-flash {
    animation: flashRed 2s infinite !important;
}
.dark .overdue-flash {
    animation: flashRedDark 2s infinite !important;
}
.card-item.overdue-flash,
.card-item.overdue-flash[data-age],
.card-item:has(.overdue-pill),
.card-item:has(.overdue-pill)[data-age] {
    border-left: 4px solid #ef4444 !important;
    opacity: 1 !important;
    filter: none !important;
}
.dark .card-item.overdue-flash,
.dark .card-item.overdue-flash[data-age],
.dark .card-item:has(.overdue-pill),
.dark .card-item:has(.overdue-pill)[data-age] {
    border-left: 4px solid #3b0707 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* ---------------------------------------------------------------------------
   5 · Column drop zones — slim rows until a file is actually dragged
   ------------------------------------------------------------------------ */
.batch-creator-table, .column-upload-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px;
    padding: 12px 12px !important;
    margin-top: 8px !important;
    border-width: 1px !important;
    border-radius: var(--card-radius, 30px) !important;
    min-height: 52px;
}
.batch-creator-table > div, .column-upload-box > div {
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
}
.batch-creator-table > div:not(.column-upload-limit-text):not(.column-upload-types-text),
.column-upload-box > div:not(.column-upload-limit-text):not(.column-upload-types-text) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}
.batch-creator-table i, .column-upload-box i {
    font-size: 20px !important;
    display: block !important;
    margin: 0 auto 4px auto !important;
    opacity: 0.6;
}
.batch-creator-table .text-sm, .column-upload-box .text-sm,
.batch-creator-table div, .column-upload-box div {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--jsf-ink-3) !important;
    text-align: center !important;
    width: 100% !important;
}
.column-upload-box > div.column-upload-limit-text,
.column-upload-box > div.column-upload-types-text,
.column-upload-limit-text,
.column-upload-types-text,
#dropZone #maxFileSizeLimitText {
    display: none !important;
}

.column-upload-box:hover > div.column-upload-limit-text,
body.jsf9-dragfile .column-upload-box > div.column-upload-limit-text,
.column-upload-box:hover .column-upload-limit-text,
body.jsf9-dragfile .column-upload-limit-text,
#dropZone:hover #maxFileSizeLimitText {
    display: block !important;
}

.column-upload-box:hover > div.column-upload-types-text,
body.jsf9-dragfile .column-upload-box > div.column-upload-types-text,
.column-upload-box:hover .column-upload-types-text,
body.jsf9-dragfile .column-upload-types-text {
    display: flex !important;
}

/* ---------------------------------------------------------------------------
   6 · Floating date strip — present, not on top of your work
   ------------------------------------------------------------------------ */
#calendarModal .animate-bounce { animation: none !important; }
#calendarModal.calendar-floating {
    opacity: .92;
    transition: opacity .15s ease;
}
#calendarModal.calendar-floating:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   7 · Phone (≤640px) — compact single-row header, no dead space
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    header .container { padding: 6px 12px 0 !important; }
    header .container > div.flex:first-child {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 4px !important;
    }
    header .container > div.flex:first-child > * + * { margin-top: 0 !important; }
    header h1 { font-size: 1rem !important; }
    #worksheetsTabBar { min-height: 36px; }
    #worksheetsList > .group,
    #worksheetsList .folder-group > .group { height: 30px; padding: 0 10px !important; }
    #cardBoard { padding-top: 10px !important; }
    #jsfViewbar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    #jsfViewbar::-webkit-scrollbar { display: none; }
    /* every child shares one 40px row → one baseline AND ≥40px touch targets
       (the > .jsf-chip-filter selector out-ranks the base 30px rule above) */
    #jsfViewbar > .jsf-chip-filter:not(select),
    #jsfViewbar > button {
        flex: 0 0 auto;
        height: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
    #jsfViewbar > select:not(.jsf-chip-filter-hidden) {
        flex: 0 0 auto;
        display: inline-block !important;
        height: 40px !important;
        min-height: 40px !important;
    }
    #jsfViewbar .jsf-seg { height: 40px; }
    #jsfViewbar .jsf-seg button { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
}

/* ---------------------------------------------------------------------------
   8 · Tablet (641–1023px)
   ------------------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 1023px) {
    header .container > div.flex:first-child {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    header .container > div.flex:first-child > * + * { margin-top: 0 !important; }
    #boardColumnsContainer { gap: 12px !important; }
    /* the view bar stays one row here too — overflow scrolls */
    #jsfViewbar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    #jsfViewbar::-webkit-scrollbar { display: none; }
    #jsfViewbar > * { flex: 0 0 auto; }
}

/* ============================================================================
   Table Auto-Adjust Hover Elevation & Smooth View Focus
   ========================================================================== */
table, .table-container, .table-wrapper, .jsf-table, .batch-creator-table, .column-upload-box, #cardsTableContainer, #dropZone {
    scroll-margin-top: 85px;
    scroll-margin-bottom: 35px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.table-container:hover, .table-wrapper:hover, .batch-creator-table:hover, .column-upload-box:hover, #dropZone:hover {
    box-shadow: 0 6px 20px -3px rgba(0, 0, 0, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   Dashboard Modal — Dark Mode Theme Alignment (Matches My Profile Modal)
   ========================================================================== */
.dark #statsModal > div,
.dark #jsfDash,
.dark .jsf-dash {
    background-color: #1f2937 !important; /* bg-gray-800 matching #myProfileModal */
    color: #f3f4f6 !important;
    border-color: #374151 !important; /* border-gray-700 matching #myProfileModal */
}

.dark #statsModal > div .border-b,
.dark #statsModal > div .border-t,
.dark #jsfDash .jsf-dash-head {
    border-color: #374151 !important;
}

/* ---------------------------------------------------------------------------
   9 · Touch: the always-visible card action buttons must not sit on the title
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {
    .card-item h3 { padding-right: 76px; }
    .js-move-btn { opacity: .8; }
}

@media print {
    .batch-creator-table, .column-upload-box { display: none !important; }
}

/* --- End: assets/features9.css --- */

/* --- Begin: assets/features10.css --- */
/* ============================================================================
   Job System — feature layer, phase 10 styling
   ----------------------------------------------------------------------------
   Undo toast, board colour wash. Token vocabulary from features.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Undo toast — bottom centre, above the phone nav bar
   ------------------------------------------------------------------------ */
.jsf10-undo {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2147483150;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 10px 12px 10px 16px;
    border-radius: 10px;
    background: var(--jsf-ink-1);
    color: var(--jsf-surface-1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    font-size: 13.5px;
    animation: jsf10-rise .18s ease-out;
}
.jsf10-undo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jsf10-undo button {
    flex: 0 0 auto;
    font: 600 13px/1 inherit;
    font-family: inherit;
    padding: 7px 14px;
    min-height: 30px;
    border: 0;
    border-radius: 7px;
    background: var(--jsf-accent);
    color: var(--jsf-accent-ink);
    cursor: pointer;
}
.jsf10-undo button:hover { filter: brightness(1.1); }
@keyframes jsf10-rise { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .jsf10-undo { animation: none; } }
@media (max-width: 640px) {
    .jsf10-undo { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}



@media print {
    .jsf10-undo { display: none !important; }
}

/* --- End: assets/features10.css --- */

/* --- Begin: assets/features12.css --- */
/* ============================================================================
   Job System — feature layer, phase 12: the responsive rework
   ----------------------------------------------------------------------------
   Makes the 57 desktop-era modals, their forms and their tables work on a
   phone and a tablet, and stops the fixed chrome (bottom nav, calendar dock)
   sitting on top of content.

   Breakpoints, following the convergent model (Material window classes /
   Atlassian / Carbon):

       ≤ 640px   full-screen sheet, single column, 48px touch targets
     641–1023px  large centred sheet: min(92vw, 720px), 90dvh
       ≥1024px   the designed centred dialog, unchanged

   Sizes come from the WCAG 2.2 / Apple / Material numbers: 24px is the legal
   minimum target (SC 2.5.8), 44pt is Apple's, 48dp is Material's — this file
   uses 44px as the floor and 48px where there is room. Inputs are 16px on
   touch because anything smaller makes iOS Safari zoom on focus and never
   zoom back out.

   Loads after features11.css. Token vocabulary from features.css.
   ========================================================================== */

:root {
    --jsf12-nav-h: 0px;
    --jsf12-safe-b: env(safe-area-inset-bottom, 0px);
    --jsf12-head-h: 56px;
}
@media (max-width: 640px) { :root { --jsf12-nav-h: 60px; } }

/* ---------------------------------------------------------------------------
   0 · The overflow guard.
   Flex and grid children default to min-width:auto and refuse to shrink below
   their content — that single rule is what pushed inputs, selects and button
   rows off the right edge of every narrow screen. Scoped to dialogs so the
   board layout is untouched.
   ------------------------------------------------------------------------ */
.jsf12-panel *,
.jsf-dialog *,
.jsf-panel * { min-width: 0; }

.jsf12-panel input,
.jsf12-panel select,
.jsf12-panel textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   1 · Modal shell — the same structure at every size, different geometry
   ------------------------------------------------------------------------ */
.jsf12-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;                 /* the shell never scrolls; the body does */
    overscroll-behavior: contain;
}
.jsf12-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--jsf12-head-h);
    background: inherit;
    z-index: 2;
}
.jsf12-head > :first-child { flex: 1 1 auto; min-width: 0; }
/* the trailing control cluster (maximize / refresh / close) must be able to
   shrink instead of pushing itself off the right edge of a narrow screen */
.jsf12-head > * { min-width: 0; }
/* :not(:first-child) matters — the TITLE is often a flex element too, and
   right-aligning it threw the heading to the far edge of the bar. */
.jsf12-head > .flex:not(:first-child) { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
/* NB: no min-width:0 here — at (0,3,1) it outranks the touch-target rule
   further down and squeezed the maximize buttons to 12px. The generic
   `.jsf12-panel *` rule already allows these to shrink. */
.jsf12-head > .flex:not(:first-child) > * { flex: 0 1 auto; }
.jsf12-head > :first-child { justify-content: flex-start; text-align: left; }
/* a long title must never push the close button off the screen */
.jsf12-head h1, .jsf12-head h2, .jsf12-head h3, .jsf12-head h4 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* the sheet moves focus to the title on open so the mobile keyboard does not
   cover the form — that must not draw a focus ring around the heading */
.jsf12-head h1, .jsf12-head h2, .jsf12-head h3, .jsf12-head h4 { outline: none !important; }
.jsf12-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
}
.jsf12-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* focus must never land under the sticky head or the nav (WCAG 2.4.11) */
    scroll-padding-top: 8px;
    scroll-padding-bottom: 96px;
}

/* ---------------------------------------------------------------------------
   2 · Tables: a labelled, keyboard-reachable horizontal scroller.
   Columns used to be lost off the right edge entirely — this keeps the grid
   and makes the overflow reachable, which is also what WCAG 1.4.10 asks for.
   ------------------------------------------------------------------------ */
.jsf12-tw {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.jsf12-tw:focus-visible {
    outline: 2px solid var(--jsf-accent);
    outline-offset: -2px;
}
.jsf12-tw > table { min-width: max-content; }
/* a scroll shadow that appears only when there is more to see — no JS */
.jsf12-tw {
    background:
        linear-gradient(to right, var(--jsf-surface-1) 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
        linear-gradient(to left,  var(--jsf-surface-1) 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) right center / 12px 100% no-repeat scroll;
}

/* ---------------------------------------------------------------------------
   3 · PHONE (≤640px) — full-screen sheet
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    [id$="Modal"]:not(#calendarModal):not(.hidden) {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    [id$="Modal"] > .jsf12-panel.jsf12-panel {
        /* NOT 100vw: that unit includes the scrollbar, so on any platform
           with classic scrollbars the sheet was ~17px wider than the visible
           area and pushed itself off the right edge. 100% of a fixed,
           inset-0 parent is exactly the visible width. */
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh;
        height: 100dvh;                /* tracks the URL bar; vh over-measures */
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    /* The admin "Modal Border Radius" setting writes
       div[id$="Modal"]... > div { border-radius: var(--modal-radius) !important }
       which outranks a class selector. A sheet that meets the screen edges must
       be square, whatever that setting says — so match its specificity. */
    div[id$="Modal"]:not(#loginModal):not(#twoFactorModal) > .jsf12-panel,
    div[id$="Modal"]:not(#loginModal):not(#twoFactorModal) > form.jsf12-panel {
        border-radius: 0 !important;
    }
    .jsf12-head {
        position: sticky;
        top: 0;
        padding: 8px 8px 8px 16px !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--jsf-line);
        background: var(--jsf-surface-1);
    }
    .dark .jsf12-head { background: var(--jsf-surface-1); }
    .jsf12-head h1, .jsf12-head h2, .jsf12-head h3, .jsf12-head h4 {
        font-size: 1.05rem !important;
        margin: 0 !important;
    }
    .jsf12-body {
        padding: 16px 16px calc(28px + var(--jsf12-safe-b)) 16px;
    }
    /* inner scrollers become part of the one sheet scroll */
    .jsf12-body .overflow-y-auto,
    .jsf12-body .modal-scroll {
        max-height: none !important;
        overflow-y: visible !important;
    }
    /* every fixed/percentage width inside a sheet collapses to full width */
    .jsf12-body [class*="max-w-"],
    .jsf12-body [class*="w-["] { max-width: 100% !important; width: 100% !important; }

    /* single column: paired fields stack below 640 (Baymard/GOV.UK) */
    .jsf12-body .grid-cols-2,
    .jsf12-body .grid-cols-3,
    .jsf12-body .grid-cols-4 { grid-template-columns: 1fr !important; }

    /* label+control rows that were laid out side by side must stack */
    .jsf12-body .flex.items-center > label,
    .jsf12-body .flex.items-center > .flex-shrink-0 { min-width: 0; }
    .jsf12-body .flex:not(.jsf12-keep-row):not(.jsf-dialog-actions) {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* controls: full width, 16px so iOS does not zoom, 44px tall */
    .jsf12-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    .jsf12-body select,
    .jsf12-body textarea {
        width: 100% !important;
        font-size: 16px !important;
        min-height: 44px;
    }
    .jsf12-body textarea { min-height: 96px; }
    .jsf12-body button:not(.jsf12-close):not([class*="absolute"]) { min-height: 44px; }

    /* the sheet's own action row sits at the end of the scroll, full width */
    /* Direct children only: the negative margins below cancel the body's own
       16px padding. Applied to a row nested inside another scroller they made
       it 32px wider than its container, which then clipped it. */
    .jsf12-body > .flex.justify-end,
    .jsf12-body > form > .flex.justify-end,
    .jsf12-body > .jsf-dialog-actions {
        position: sticky;
        bottom: 0;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 16px -16px calc(-28px - var(--jsf12-safe-b));
        padding: 12px 16px calc(12px + var(--jsf12-safe-b));
        background: var(--jsf-surface-1);
        border-top: 1px solid var(--jsf-line);
    }
    .jsf12-body > .flex.justify-end > button,
    .jsf12-body > form > .flex.justify-end > button,
    .jsf12-body > .jsf-dialog-actions > button { flex: 1 1 0; }
    /* any other action row simply fits and wraps */
    .jsf12-body .flex.justify-end { flex-wrap: wrap; max-width: 100%; }

    /* the header's action cluster wraps to a second line rather than
       overflowing (error logs and the email queue both did this) */
    .jsf12-head { flex-wrap: wrap; padding-right: 8px !important; }
    .jsf12-head > .flex { max-width: 100%; }
    .jsf12-head > .flex > button { font-size: 12px; }

    /* tables inside a sheet keep their own scroller and stay readable */
    .jsf12-body .jsf12-tw > table { font-size: 13px; }
    .jsf12-body .jsf12-tw th,
    .jsf12-body .jsf12-tw td { padding: 10px 12px !important; white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   4 · TABLET (641–1023px) — a large centred sheet, not full-screen
       (a 768px tablet keeps its context; a 480px desktop dialog looks lost)
   ------------------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 1023px) {
    [id$="Modal"]:not(#calendarModal):not(.hidden) { padding: 16px !important; }
    [id$="Modal"] > .jsf12-panel.jsf12-panel {
        width: min(92vw, 720px) !important;
        max-width: min(92vw, 720px) !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        padding: 0 !important;
        border-radius: 16px !important;
    }
    .jsf12-head {
        padding: 12px 12px 12px 24px !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--jsf-line);
    }
    .jsf12-body { padding: 20px 24px 24px; }
    .jsf12-body .overflow-y-auto,
    .jsf12-body .modal-scroll { max-height: none !important; overflow-y: visible !important; }
    .jsf12-body [class*="max-w-"] { max-width: 100% !important; }
    .jsf12-body .grid-cols-3,
    .jsf12-body .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .jsf12-body > .flex.justify-end,
    .jsf12-body > form > .flex.justify-end,
    .jsf12-body > .jsf-dialog-actions {
        position: sticky;
        bottom: 0;
        margin: 20px -24px -24px;
        padding: 12px 24px;
        background: var(--jsf-surface-1);
        border-top: 1px solid var(--jsf-line);
    }
    .jsf12-body .flex.justify-end { flex-wrap: wrap; max-width: 100%; }
}

/* short windows (phone in landscape, tablet with the keyboard up) */
@media (max-height: 500px) and (max-width: 1023px) {
    .jsf12-panel { max-height: 100dvh; height: 100dvh; border-radius: 0 !important; }
}

/* ---------------------------------------------------------------------------
   5 · Desktop keeps its geometry, but gains the scroll structure so a long
       modal can never put its buttons out of reach.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
    [id$="Modal"] > .jsf12-panel.jsf12-panel { max-height: 88vh; max-height: 88dvh; }
    .jsf12-panel > .jsf12-head { padding-bottom: 12px; }
    .jsf12-body { padding-right: 2px; }
}

/* ---------------------------------------------------------------------------
   6 · Touch targets. WCAG 2.2 SC 2.5.8 sets 24px as the minimum; Apple asks
       for 44 and Material for 48. The technique below grows the TARGET without
       changing the visual size, so nothing in the design moves.
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {
    .jsf12-body input[type="checkbox"]:not(.sr-only):not([class*="sr-only"]),
    .jsf12-body input[type="radio"]:not(.sr-only):not([class*="sr-only"]) {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }
    /* the whole row becomes the target; the visible control is unchanged */
    .jsf12-body label:has(> input[type="checkbox"]),
    .jsf12-body label:has(> input[type="radio"]),
    .jsf12-body .flex.items-center:has(> input[type="checkbox"]),
    .jsf12-body .flex.items-center:has(> input[type="radio"]) {
        min-height: 44px;
        align-items: center;
    }
    /* inline actions rendered as links were 28px tall — give them a real
       target without changing where they sit */
    .jsf12-body a:not([class*="block"]),
    .jsf12-head a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .jsf12-body select { min-height: 44px; }
    .jsf12-body input[type="range"] { height: 36px; }
    /* small text buttons inside dense admin rows */
    .jsf12-body button.text-xs,
    .jsf12-body button[class*="p-1"] { min-height: 44px; min-width: 44px; }
}

/* ---------------------------------------------------------------------------
   7 · Fixed chrome must never sit on top of content.
   ------------------------------------------------------------------------ */
/* A dialog owns the screen: the phone nav (z-index 2147483000) used to cover
   the modal it was supposed to sit behind. */
body.jsf12-modal-open .jsf-nav,
body.jsf12-modal-open #jsfDots,
body.jsf12-modal-open .jsf-dots { display: none !important; }
body.jsf12-modal-open { overflow: hidden; }

/* The last card on a phone board sat underneath the navigation bar. */
@media (max-width: 640px) {
    #cardBoard { padding-bottom: calc(var(--jsf12-nav-h) + 34px + var(--jsf12-safe-b)) !important; }
    .board-column { padding-bottom: 12px !important; }
}

/* The floating calendar dock covered cards and their action buttons on tablet
   and desktop — 356 collisions measured. Reserve the space it occupies so the
   board can always be scrolled clear of it. */
/* The dock takes two shapes: a full-width bar pinned to the bottom
   (bottom-bar-mode, which is what tablets get) and a floating card
   (calendar-floating, desktop). Both were sitting on top of the board's last
   cards and their action buttons. Reserve the height each one occupies. */
@media (min-width: 641px) {
    .calendar-bottom-bar-wrapper.calendar-floating:not(.hidden) { bottom: 16px !important; right: 16px !important; }
}

/* ---------------------------------------------------------------------------
   8 · Small odds and ends the audit turned up
   ------------------------------------------------------------------------ */
/* the read-only calendar-feed URL was clipped with no way to see the end */
#jsfIcalUrl { font-size: 12px; text-overflow: ellipsis; }
/* long single-line values inside sheets wrap rather than escaping the box */
.jsf12-body pre, .jsf12-body code { white-space: pre-wrap; word-break: break-word; }
/* nothing inside a sheet may set its own horizontal scrollbar except a table */
.jsf12-body > *:not(.jsf12-tw) { max-width: 100%; }

@media print {
    .jsf12-panel { max-height: none; overflow: visible; }
    .jsf12-body { overflow: visible; }
}

/* ---------------------------------------------------------------------------
   9 · The board pager dots were 9–13px — below the WCAG 2.2 minimum of 24px.
   Grow the TARGET with a pseudo-element so the dots stay visually small.
   ------------------------------------------------------------------------ */
/* An earlier attempt gave each dot a 44px invisible hit area; at a 7px gap
   those areas overlapped each other, so a tap meant for one dot landed on its
   neighbour. Section 11 instead makes the BUTTON 24px — the WCAG 2.2 AA
   minimum — which cannot collide, and keeps the dot itself 9px. */

/* ---------------------------------------------------------------------------
   10 · Touch sizing that applies at every width, not just on the phone sheet.
   A 768px tablet is a touch device: the tag inputs in Upload Settings were
   24px tall there, and the calendar dock's close button was 16px wide.
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {
    .jsf12-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    .jsf12-body select,
    .jsf12-body button:not(.jsf12-close):not([class*="absolute"]) { min-height: 44px; }
    .jsf12-body input[type="text"],
    .jsf12-body input[type="email"],
    .jsf12-body input[type="password"],
    .jsf12-body input[type="number"],
    .jsf12-body input[type="search"] { font-size: 16px; }

    #calendarCloseBtn, #calendarRestoreBtn,
    .calendar-bottom-bar-content button { min-width: 44px; min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   11 · Final pass, from the fourth audit run
   ------------------------------------------------------------------------ */

/* The dock is a fixed 146px bar whether or not it is "collapsed" — collapsing
   only hides its header row. So reserve its real height, unconditionally,
   whenever it is on screen. This is what actually stops it covering the last
   cards and their action buttons: the board can now always be scrolled clear
   of it. */
@media (min-width: 641px) {
    body:has(#calendarModal:not(.hidden)) #cardBoard { padding-bottom: 172px !important; }
    body:has(#calendarModal.hidden) #cardBoard { padding-bottom: 20px !important; }
}

/* Toggle switches hide their real <input> with .sr-only and draw the track
   beside it. Sizing that input would drag it back into view — leave it alone
   and make its wrapper the target instead. */
.jsf12-body input.sr-only,
.jsf12-body input[class*="sr-only"] { width: 1px !important; height: 1px !important; }
@media (pointer: coarse) {
    .jsf12-body label:has(input[type="checkbox"]),
    .jsf12-body label:has(input[type="radio"]),
    .jsf12-body .relative:has(> input[type="checkbox"].sr-only),
    .jsf12-body .inline-flex:has(> input[type="checkbox"].sr-only) {
        min-height: 44px;
    }
    /* header actions must keep a real target rather than being squeezed thin */
    .jsf12-head button,
    .jsf12-head > .flex > button { flex: 0 0 auto; min-width: 44px; }
    /* the feature-layer dialogs (quick add, search, automation) get the same
       control sizing as the app's own modals */
    .jsf-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .jsf-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .jsf-dialog select, .jsf-panel select { min-height: 44px; font-size: 16px; }
}

/* The board pager dots measured 9–13px. Keep the dot exactly as designed and
   make the BUTTON the compliant target around it. */
#jsfDots button, .jsf-dots button {
    width: 24px !important;
    height: 24px !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
#jsfDots button::before, .jsf-dots button::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--jsf-ink-3);
    transition: background .15s ease, transform .15s ease;
}
#jsfDots button.is-active, .jsf-dots button.is-active {
    transform: none !important;      /* scaling the 24px target would overlap */
}
#jsfDots button.is-active::before, .jsf-dots button.is-active::before {
    background: var(--jsf-accent);
    transform: scale(1.35);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   12 · Remaining touch targets, from the final audit run.
   WCAG 2.2 SC 2.5.8 (AA) is 24×24 CSS px; Apple asks 44 and Material 48. Where
   a control has an associated label the whole label is the target and gets 44;
   where it stands alone the control itself is taken to 24 minimum.
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {
    .jsf12-body input[type="checkbox"]:not(.sr-only):not([class*="sr-only"]),
    .jsf12-body input[type="radio"]:not(.sr-only):not([class*="sr-only"]) {
        width: 24px;
        height: 24px;
    }
    /* toggle switches: the drawn track is the target, so give the wrapper a
       real height and let the row centre on it */
    .jsf12-body .relative:has(> input[type="checkbox"].sr-only),
    .jsf12-body .inline-flex:has(> input[type="checkbox"].sr-only),
    .jsf12-body label:has(input[type="checkbox"].sr-only) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* the quick-add overlay is not one of the app's modals but takes typing */
    #jsfQuickInput { min-height: 44px !important; font-size: 16px !important; }
}

/* the pager dots sit just above the nav; give the board room for both so a
   card is never behind them */
@media (max-width: 640px) {
    #cardBoard { padding-bottom: calc(var(--jsf12-nav-h) + 64px + var(--jsf12-safe-b)) !important; }
}

/* Toggle switches appear outside the modal body too (settings rows, admin
   panels). Apply the target sizing wherever the pattern occurs. */
@media (pointer: coarse) {
    .relative:has(> input[type="checkbox"].sr-only),
    .inline-flex:has(> input[type="checkbox"].sr-only),
    label:has(input[type="checkbox"].sr-only) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Icon buttons in a header cluster were squeezed to 12px wide by the shrink
   rules above (the error-log and email-queue maximize controls). On touch they
   keep a real width. */
@media (pointer: coarse) {
    .jsf12-body button:not(.jsf12-close):not([class*="absolute"]),
    .jsf12-head button:not(.jsf12-close) { min-width: 44px; }
}

/* --- End: assets/features12.css --- */

/* --- Begin: assets/features13.css --- */
/* ============================================================================
   Job System — feature layer, phase 13: the fit pass
   ----------------------------------------------------------------------------
   Phase 12 made the panels behave like sheets. This pass makes their CONTENT
   fit the device — measured with a detector that looks for content clipped by a
   non-scrolling ancestor, rather than for scrollbars, because our own
   `overflow-x: hidden` hides the evidence while the user still sees things cut
   off at the edge.

   The causes it found, and the rules that fix them for good:

     1. `100vw` includes the scrollbar. On any platform with classic scrollbars
        that is ~17px wider than the visible area, so every element sized that
        way hung off the right edge. Fixed at source (features5/12) — use 100%.

     2. `w-full` next to a horizontal margin (`mx-4`) overflows by the margin:
        width:100% is measured before the margin is added. The login card and
        several dialogs did exactly this.

     3. A flex container that centres its content pushes an oversized child off
        BOTH edges, so the left of the card becomes unreachable — there is no
        scrolling back to it. `justify-content: safe center` keeps the start
        edge visible instead.

     4. Fixed pixel widths in utility classes (`w-[422px]`, `max-w-[1210px]`)
        are wider than a 320–390px screen.

     5. Long unbroken strings (URLs, tokens, file paths) with nothing allowed to
        wrap push their container wider than the screen.

   Everything here is defensive and width-driven; nothing changes on a screen
   that already had room.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · Overflow-safe centring.
   Applies at every width: an oversized child should overflow towards the END,
   never past the start edge where it cannot be reached.
   ------------------------------------------------------------------------ */
[id$="Modal"],
.jsf-backdrop,
.jsf-panel-backdrop,
.jsf-today-back {
    justify-content: safe center;
    align-items: safe center;
}

/* ---------------------------------------------------------------------------
   2 · Nothing inside an overlay may be wider than the overlay.
   `max-width: 100%` alone is not enough when the element also carries a
   horizontal margin, so the margins go too at small sizes and the overlay
   supplies the breathing room instead.
   ------------------------------------------------------------------------ */
/* Every descendant, not just direct children: a fixed width, a `w-full` beside
   a margin, or a long word anywhere in the tree widens its ancestors all the
   way up and pushes the panel off the screen. Capping the whole subtree is the
   only rule that holds regardless of how deeply the offender is nested.
   Tables opt back out below — they scroll inside their own frame.

   It stops at 1023px, and that boundary is deliberate. `[id$="Modal"] *` has
   the same specificity as a `.max-w-4xl` utility and loads after it, so at
   desktop widths the cap would silently replace every dialog's designed
   maximum with 100% and stretch it edge to edge. Below 1024px there is no
   designed width worth keeping — the panel is a sheet sized from the screen —
   so the cap is free to win. Above it, section 8's padding rule and the
   overflow-safe centring above are enough on their own; the audit finds
   nothing at 1024 or 1440 without the cap. */
@media (max-width: 1023px) {
    [id$="Modal"] > *,
    .jsf-backdrop > *,
    .jsf-panel-backdrop > * {
        max-width: 100%;
    }
    [id$="Modal"] *,
    .jsf-backdrop *,
    .jsf-panel-backdrop * {
        max-width: 100%;
    }
}
.jsf12-tw { max-width: 100%; }
.jsf12-tw > table { max-width: none !important; min-width: max-content; }

/* The two auth screens are full-bleed splashes rather than dialogs (phase 12
   deliberately leaves them alone). They centre a card over an animated
   background, and that card was sized `w-full` beside a margin — so it hung
   off the edge. Size it from the screen instead, at every width. */
#loginModal, #twoFactorModal { padding: 16px !important; }
#loginModal .glass-card,
#twoFactorModal .glass-card {
    width: auto !important;
    max-width: min(440px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 400px) {
    #loginModal .glass-card,
    #twoFactorModal .glass-card { padding: 20px !important; }
}

@media (max-width: 640px) {

    /* the same margin-plus-full-width trap anywhere else in an overlay */
    [id$="Modal"] > [class*="mx-"],
    [id$="Modal"] > div > [class*="mx-"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* utility classes that hard-code a pixel width wider than a phone */
    [id$="Modal"] [class*="w-["],
    [id$="Modal"] [class*="max-w-["],
    [id$="Modal"] [style*="width:"][style*="px"] {
        max-width: 100% !important;
    }
}

/* ---------------------------------------------------------------------------
   3 · Absolutely-positioned corner controls must stay on screen.
   The login theme picker is pinned to the top-right and its popover is wider
   than a phone, so it hung off the left edge with no way to reach it.
   ------------------------------------------------------------------------ */
/* Only the corner CLUSTER is constrained — an earlier version matched every
   absolutely-positioned descendant, which capped the popover against its own
   tiny wrapper and sliced the theme buttons in half. The wrapper must also not
   clip, or the popover it opens is cut off by it. */
#loginModal > .absolute,
#twoFactorModal > .absolute {
    max-width: calc(100% - 24px);
    overflow: visible !important;
}
#loginThemePopover,
#loginModal [id*="Popover"],
#twoFactorModal [id*="Popover"] {
    max-width: min(575px, calc(100vw - 24px));
    max-width: min(575px, calc(100dvw - 24px));
    right: 0;
    left: auto;
}
/* its swatch labels wrap rather than being sliced */
#loginThemePopover label,
#loginThemePopover span { white-space: normal; overflow: visible; }

/* ---------------------------------------------------------------------------
   4 · Long unbroken strings — tokens, URLs, paths, filenames — must wrap
   rather than widening their container.
   ------------------------------------------------------------------------ */
.jsf12-body,
.jsf12-body p,
.jsf12-body span,
.jsf12-body div,
.jsf12-body li,
.jsf-dialog,
.jsf-panel-body {
    overflow-wrap: anywhere;
    word-break: normal;
}
/* …but never break a table cell or a control's own text */
.jsf12-tw td, .jsf12-tw th,
.jsf12-body input, .jsf12-body select, .jsf12-body button { overflow-wrap: normal; }

/* single-line names that should tail off rather than be sliced */
.jsf-task-title,
.jsf-notif-title,
.jsf-res-title,
.jsf-today-text span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   5 · The search operator chips.
   Two separate faults. First, the chips are flex children with no basis, so
   they shrank to a share of the rail and every one of them was sliced mid-word
   — "is:open" rendered as "is:ope". `flex: 0 0 auto` makes each chip exactly as
   wide as its own text. Second, phase 3 turned the rail into a horizontal
   scroller on phones with the scrollbar hidden, so the last chip was cut at the
   screen edge with nothing to say it could be scrolled. There are ten chips;
   two or three wrapped rows cost less than a hidden gesture, and nothing is
   left off the edge.
   ------------------------------------------------------------------------ */
.jsf-op {
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
    flex: 0 0 auto;
}
@media (max-width: 640px) {
    .jsf-search-ops,
    .jsf-feed-filters {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }
}

/* ---------------------------------------------------------------------------
   6 · A last-resort guard: the document itself must never scroll sideways.
   This is a safety net, not the fix — every rule above exists so that content
   fits rather than relying on this.
   ------------------------------------------------------------------------ */
html { overflow-x: hidden; overflow-y: auto; }
@supports (overflow: clip) { html { overflow-x: clip; overflow-y: auto; } }

/* ---------------------------------------------------------------------------
   7 · While a dialog is open the page behind it must not scroll — and, just as
   importantly, must not keep its scrollbar. A classic scrollbar is ~17px, and
   a fixed, inset-0 overlay is laid out against the full viewport including
   that strip: the panel then sat 17px past the visible edge on every desktop
   browser and every tablet with classic scrollbars. Removing the scrollbar
   while a dialog is open fixes the geometry and stops the background scrolling
   under the sheet, which is what a modal is supposed to do.
   ------------------------------------------------------------------------ */
html:has(body.jsf12-modal-open) { overflow: hidden; }
body.jsf12-modal-open { overflow: hidden; }
/* NB: `scrollbar-gutter: stable` was tried here and removed. It permanently
   narrows the document's client box while a fixed, inset-0 overlay is still
   laid out against the full viewport, which recreates the very 17px mismatch
   this section exists to remove. */

/* keep the corner cluster itself inside the screen */
#loginModal > .absolute,
#twoFactorModal > .absolute { right: 12px !important; left: auto !important; }

/* ---------------------------------------------------------------------------
   8 · The login theme picker, finished properly.
   The popover is a fixed 320px panel anchored to a corner button. On a narrow
   phone that is wider than the screen minus the corner inset, so its left edge
   fell outside the viewport where it could not be reached. Below 460px it
   spans the screen between two gutters instead of hanging off a corner.
   ------------------------------------------------------------------------ */
@media (max-width: 460px) {
    /* The corner cluster shrinks to just its bubble button… */
    #loginModal > .absolute,
    #twoFactorModal > .absolute {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        max-width: 56px !important;
        overflow: visible !important;
    }
    /* …and the panel it opens becomes a bottom sheet spanning the screen.
       `position: fixed` resolves against the viewport, so it escapes the
       corner wrapper's clipping entirely rather than being sliced by it. */
    #loginThemePopover,
    #loginModal [id*="Popover"],
    #twoFactorModal [id*="Popover"] {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 70dvh;
        overflow-y: auto;
    }
}

/* its swatch labels size to their own text rather than being sliced */
#loginThemePopover label,
#loginThemePopover .block {
    width: auto !important;
    min-width: max-content;
    overflow: visible !important;
    text-overflow: clip;
}

/* The preset swatches are a three-column grid of `truncate` buttons. Three
   columns inside a 320px screen leaves about 85px a column, so "Cyberpunk",
   "Sanguinello" and "Tropical Oasis" were all shown as "Cyberp…". Two columns
   with the name allowed to wrap shows every preset in full. */
@media (max-width: 420px) {
    #loginThemePopover .grid.grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #loginThemePopover .grid button {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }
}

/* ---------------------------------------------------------------------------
   9 · The phone chrome has no business on the sign-in screen.
   The bottom navigation is drawn as soon as the page loads, so it sat across
   the foot of the login and two-factor splashes — over the theme sheet's last
   row, and offering Board / Calendar / Search to someone who is not signed in
   yet. It belongs to the board, so it appears when the board does.
   ------------------------------------------------------------------------ */
body:has(#loginModal:not(.hidden)) .jsf-nav,
body:has(#loginModal:not(.hidden)) .jsf-dots,
body:has(#twoFactorModal:not(.hidden)) .jsf-nav,
body:has(#twoFactorModal:not(.hidden)) .jsf-dots { display: none !important; }

/* a couple of dialogs use a negative horizontal margin (-mx-1) on their inner
   scroller as a design flourish; give the body enough padding to absorb it */
@media (min-width: 1024px) {
    .jsf12-body { padding-left: 6px; padding-right: 6px; }
}

/* ---------------------------------------------------------------------------
   10 · Site Appearance Master Override Engine
   Loaded last in document order to guarantee that --card-radius, --input-radius,
   --button-radius, --column-radius, --modal-radius, and --menu-radius overrides
   apply to ALL cards, card tables, search boxes, inputs, buttons, and modals.
   ------------------------------------------------------------------------ */

/* 1. CARDS & CARD TABLES (--card-radius) */
.card-item,
.jsf-lane-card,
.jsf-lane,
.jsf-search,
.jsf-bulk,
div[id^="card_"],
div[id^="card-"],
.media-card,
.collection-card,
.js-empty-state,
.js-skeleton,
.jsf-lane-empty,
.jsf-search-empty {
    border-radius: var(--card-radius) !important;
}

/* Card images / covers clip correctly to card radius */
.card-item > div:first-child,
.card-item img:first-child,
div[id^="card_"] > div:first-child {
    border-top-left-radius: calc(var(--card-radius) - 1px) !important;
    border-top-right-radius: calc(var(--card-radius) - 1px) !important;
}

/* Card Table & List View containers */
.table-container,
.jsf-listwrap,
#jsfListView,
.jsf-table-container,
.batch-creator-table,
#cardsTableContainer {
    border-radius: var(--card-radius) !important;
    overflow: hidden !important;
}

/* Card Table element border-radius styling */
.jsf-table,
table.w-full {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--card-radius) !important;
}

.jsf-table thead tr:first-child th:first-child,
.jsf-table tbody tr:first-child td:first-child,
table.w-full thead tr:first-child th:first-child {
    border-top-left-radius: var(--card-radius) !important;
}

.jsf-table thead tr:first-child th:last-child,
.jsf-table tbody tr:first-child td:last-child,
table.w-full thead tr:first-child th:last-child {
    border-top-right-radius: var(--card-radius) !important;
}

.jsf-table tbody tr:last-child td:first-child,
table.w-full tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--card-radius) !important;
}

.jsf-table tbody tr:last-child td:last-child,
table.w-full tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--card-radius) !important;
}

/* 2. SEARCH CARDS BOX & INPUT FIELDS (--input-radius) */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="tel"],
select,
textarea,
#cardSearch,
#burgerSearchInput,
#jsfSearchInput,
#jsfRelSearch,
#readerSearchInput,
.search-input,
.jsf-search-bar,
.jsf-search-bar input,
.jsf-chip-filter,
.tag-input-container,
.input-radius-box,
#loginError {
    border-radius: var(--input-radius) !important;
}

/* Search result hit rows */
.jsf-hit {
    border-radius: var(--input-radius) !important;
}

/* 3. BUTTONS (--button-radius) */
button:not(.rounded-full):not([class*="rounded-full"]),
.btn:not(.rounded-full):not([class*="rounded-full"]),
a.btn:not(.rounded-full):not([class*="rounded-full"]),
input[type="button"]:not(.rounded-full),
input[type="submit"]:not(.rounded-full),
[role="button"]:not(.rounded-full),
.new-card-btn,
.jsf-tool,
.jsf-btn,
.btn-radius-box,
.column-upload-box {
    border-radius: var(--button-radius) !important;
}

/* 4. MODALS (--modal-radius) */
div[id$="Modal"]:not(#loginModal):not(#twoFactorModal) > div,
div[id$="Modal"]:not(#loginModal):not(#twoFactorModal) form,
#cardModalContainer,
#closeCardPromptContainer,
[id$="ModalContainer"],
.jsf-backdrop > div {
    border-radius: var(--modal-radius) !important;
}

/* 5. BOARD COLUMNS (--column-radius) */
.board-column {
    border-radius: var(--column-radius) !important;
}

/* 6. DROPDOWNS & MENUS (--menu-radius) */
#settingsDropdown,
#adminDropdown,
#burgerDropdown,
.folder-children,
[role="menu"],
.dropdown-menu,
.context-menu,
.jsf-menu,
.jsf-popover,
.jsf-more-menu,
#jsfMoreMenu,
.card-options-menu,
#filesSection,
#dropZone,
#filesList > div,
#pendingUploadsList > div,
.jsf-rel-popover {
    border-radius: var(--menu-radius) !important;
}

/* ---------------------------------------------------------------------------
   11 · System Error Logs Full Screen Table Layout
   Adjusts table container and table height to fill 100% of the screen when
   the user selects full screen (modal-maximized) on the System Error Logs modal.
   ------------------------------------------------------------------------ */
#errorLogsModal:has(.modal-maximized) {
    padding: 0 !important;
    overflow: hidden !important;
}

#errorLogsModalContainer.modal-maximized {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 99999 !important;
}

#errorLogsModalContainer.modal-maximized > .jsf12-body {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#errorLogsModalContainer.modal-maximized > .jsf12-body > .flex-1 {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#errorLogsModalContainer.modal-maximized > .jsf12-body > .flex-1 > .jsf12-tw {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: auto !important;
}

#errorLogsModalContainer.modal-maximized > .jsf12-body > .flex-1 > .jsf12-tw > table {
    width: 100% !important;
    min-height: 100% !important;
    flex: 1 1 auto !important;
}

#errorLogsModalContainer.modal-maximized #errorLogsTableBody {
    height: auto !important;
}



/* --- End: assets/features13.css --- */

/* --- Begin: assets/compat.css --- */
/* ============================================================================
   Job System — cross-device, accessibility and UI compatibility layer
   ----------------------------------------------------------------------------
   Loaded after the inline styles so these rules win without editing 30,000
   lines. Every block states the problem it solves.

   Served as a separate file deliberately: index.html is 1.7 MB and sent with
   Cache-Control: no-store, so anything inline is re-downloaded on every visit.
   This file caches normally.
   ========================================================================== */

/* Music collection card cover play button hover overlay */
.music-cover-play-overlay {
    opacity: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.group\/cover:hover .music-cover-play-overlay,
div[class*="group/cover"]:hover .music-cover-play-overlay,
div[class*="relative"]:hover > .music-cover-play-overlay {
    opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   1. iOS Safari: dynamic viewport height.
   The app used 100vh in ten places. On iOS, 100vh is the height with the
   toolbar HIDDEN, so fixed full-height panels are clipped by ~60-110px behind
   the address bar and the bottom of login / modals becomes unreachable.
   --------------------------------------------------------------------------- */
@supports (height: 100dvh) {
    #loginModal,
    #twoFactorModal,
    .h-screen,
    .min-h-screen {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
    .max-h-screen { max-height: 100dvh !important; }
}

/* iPhone notch / home indicator. Pairs with viewport-fit=cover. */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    #musicPlayerBar,
    .fixed.bottom-0 {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* ---------------------------------------------------------------------------
   2. iOS Safari: forced zoom on input focus.
   Safari zooms the page whenever a focused form control has a computed
   font-size below 16px — and never zooms back out. ~30 inputs used text-sm
   (14px), including both search boxes, so tapping search left the layout
   permanently magnified. 16px only on touch/small screens, so the desktop
   density is unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------------------------
   3. Responsive: modals were fixed-width and overflowed small screens.
   The card modal was w-[71.4vw] with no override (268px of usable width on a
   375px phone), and #languageModal was a hard w-[422px], which overflows every
   phone narrower than that.
   --------------------------------------------------------------------------- */
/* [PHASE 12] This block was written when "mobile" meant everything up to
   768px. The responsive rework splits that: ≤640px is a full-screen sheet,
   641–1023px is a large centred sheet. Leaving the boundary at 768 forced
   tablets into a full-bleed dialog and fought features12.css, so it now ends
   where the sheet model begins. */
@media (max-width: 640px) {
    #cardModal > div,
    #cardModal .modal-panel,
    [id$="Modal"] > div:not(.contents) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100dvh !important;
    }

    #languageModal > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Full-bleed sheet presentation reads better than a squeezed dialog. */
    [id$="Modal"].fixed.inset-0 {
        align-items: stretch !important;
        padding: 0 !important;
    }

    /* Anything still using a viewport-width utility. */
    [class*="w-["][class*="vw]"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Windows/Linux render a ~17px scrollbar that 100vw does not account for,
   producing a permanent horizontal scrollbar. */
html, body { overflow-x: hidden; max-width: 100%; }
html { overflow-y: auto; }
body { overflow-y: visible; min-height: 100vh; }
.w-screen { width: 100% !important; }

/* ---------------------------------------------------------------------------
   4. Board layout on small screens.
   Columns are a CSS grid that collapses to one column, so five columns became
   2,500px of vertical scrolling with no way to skip ahead. Make each column a
   compact, sticky-headed section and cap its height so the board stays
   scannable with a thumb.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .column {
        min-height: 0 !important;
        max-height: 62vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .board-column { margin-bottom: 0.75rem; }
    .board-column h2,
    .board-column .column-header {
        position: sticky;
        top: 0;
        z-index: 5;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* ---------------------------------------------------------------------------
   5. Touch targets.
   ~55 buttons were 24-32px tall; WCAG 2.5.5 and the Apple HIG both want 44px.
   Grow the hit area with padding rather than visual size, so nothing shifts.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
    button, [role="button"], a.btn, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    button.inline-flex, button.p-1, button.p-0\.5 {
        position: relative;
    }
    button.p-1::after, button.p-0\.5::after {
        content: "";
        position: absolute;
        inset: -10px;
    }

    /* Hover-only controls have no touch equivalent, so the worksheet delete
       button was permanently invisible yet still tappable — an accidental
       deletion trap. Make hover-revealed controls persistently visible on
       touch devices. */
    .group-hover\:opacity-100 { opacity: 1 !important; }
}

/* Keyboard users need the same reveal that mouse users get on hover. */
.group:focus-within .group-hover\:opacity-100 { opacity: 1 !important; }

/* ---------------------------------------------------------------------------
   6. Focus visibility.
   182 elements used focus:outline-none and only some of them added a ring
   back, leaving ~180 controls with no focus indicator at all.
   --------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
.dark :focus-visible { outline-color: #60a5fa !important; }
:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------------------
   7. Reduced motion.
   473 transitions and animations, several of them infinite — including a 2s
   red flash on every overdue card and a 1,000-star animated background. None
   were gated, which is a WCAG 2.3.3 problem and a photosensitivity concern.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    #starfield, .stars, .stars2, .stars3 { display: none !important; }
}

/* ---------------------------------------------------------------------------
   8. Contrast.
   text-gray-400 on white is ~2.85:1 and text-gray-300 is ~1.9:1 — both fail
   WCAG AA (4.5:1), and they were used 398 and 284 times respectively, often at
   12px or smaller. Nudge the informational greys up to passing values.
   --------------------------------------------------------------------------- */
.text-gray-400:not(.text-gray-400--decorative) { color: #6b7280; }
.text-gray-300:not(.text-gray-300--decorative) { color: #6b7280; }
.dark .text-gray-400:not(.text-gray-400--decorative),
.dark .dark\:text-gray-500 { color: #9ca3af; }
.dark .text-gray-300:not(.text-gray-300--decorative) { color: #b6bcc6; }

/* Nothing informational should render below 11px. */
[class*="text-[8px]"], [class*="text-[9px]"], [class*="text-[10px]"] {
    font-size: 11px !important;
}

/* ---------------------------------------------------------------------------
   9. Card readability.
   In "show full description" mode a card rendered its entire markdown body
   inline, so one card could be taller than the viewport and the board stopped
   being scannable. Cap it and let the user expand.
   --------------------------------------------------------------------------- */
.card-item .card-description:not(.is-expanded) {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-item { max-width: 100%; }
.card-item img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   10. Touch drag-and-drop presentation (see enhance.js).
   --------------------------------------------------------------------------- */
.js-drag-ghost {
    position: fixed;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.03);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    border-radius: 30px;
    transition: none;
    will-change: transform;
}
.js-drag-source { opacity: 0.35 !important; }
.js-drop-target {
    outline: 2px dashed #2563eb;
    outline-offset: -4px;
    background-color: rgba(37, 99, 235, 0.06);
}
.js-dragging-active, .js-dragging-active * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.js-dragging-active .column { touch-action: none; }

/* The "move card" affordance added by enhance.js. */
.js-move-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 6;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.86);
    color: #374151;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.dark .js-move-btn {
    background: rgba(31, 41, 55, 0.9);
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.12);
}
.card-item:hover .js-move-btn,
.card-item:focus-within .js-move-btn { opacity: 1; }
@media (pointer: coarse) { .js-move-btn { opacity: 1; } }

/* Extra line footer for speech and 3-dots icons on card hover (Bottom Right) */
.card-hover-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out, margin-top 0.2s ease-in-out !important;
}
.card-item:hover .card-hover-bar,
.card-item:focus-within .card-hover-bar {
    height: 32px !important;
    opacity: 1 !important;
    margin-top: 6px !important;
}
.card-hover-bar .js-move-btn,
.card-hover-bar .jsf-details-btn,
.card-item .card-hover-bar button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 28px !important;
    height: 28px !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
}

/* Music Collection Card Action Cluster (Speech Bubble & Play Button Side-by-Side) */
.card-action-cluster {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 10 !important;
}

.card-action-cluster .card-details-btn,
.card-action-cluster .card-play-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.card-action-cluster .card-details-btn:hover,
.card-action-cluster .card-play-btn:hover {
    background-color: #2563eb !important;
    transform: scale(1.05) !important;
}

.card-action-cluster .card-details-btn:active,
.card-action-cluster .card-play-btn:active {
    transform: scale(0.95) !important;
}

/* Card Cover Action Overlay Button (Music, Audio Books, Video, TV Shows, Books, Games) — Matches Game Shelf Navigation Arrows */
.music-cover-play-overlay .card-play-btn,
.cover-action-overlay .card-play-btn,
.cover-action-overlay .card-game-btn,
.cover-action-overlay .card-video-btn,
.cover-action-overlay .card-book-btn {
    width: 68px !important;
    height: 68px !important;
    border-radius: 9999px !important;
    opacity: 1 !important;
    /* Light mode: 50% transparent white background matching shelf arrows */
    background: rgba(255, 255, 255, 0.5) !important;
    color: #111827 !important;
    border: 2px solid rgba(209, 213, 219, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: all 0.2s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.music-cover-play-overlay .card-play-btn:hover,
.cover-action-overlay .card-play-btn:hover,
.cover-action-overlay .card-game-btn:hover,
.cover-action-overlay .card-video-btn:hover,
.cover-action-overlay .card-book-btn:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #000000 !important;
    border-color: rgba(156, 163, 175, 0.9) !important;
    transform: scale(1.1) !important;
}

.music-cover-play-overlay .card-play-btn:active,
.cover-action-overlay .card-play-btn:active,
.cover-action-overlay .card-game-btn:active,
.cover-action-overlay .card-video-btn:active,
.cover-action-overlay .card-book-btn:active {
    transform: scale(0.95) !important;
}

/* Light mode icon color */
.music-cover-play-overlay .card-play-btn svg,
.music-cover-play-overlay .card-play-btn svg path,
.music-cover-play-overlay .card-play-btn i,
.music-cover-play-overlay .card-play-btn .fas,
.cover-action-overlay .card-play-btn i,
.cover-action-overlay .card-game-btn i,
.cover-action-overlay .card-video-btn i,
.cover-action-overlay .card-book-btn i {
    opacity: 1 !important;
    color: #111827 !important;
    fill: #111827 !important;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15)) !important;
}

.music-cover-play-overlay .card-play-btn:hover i,
.music-cover-play-overlay .card-play-btn:hover svg,
.cover-action-overlay .card-play-btn:hover i,
.cover-action-overlay .card-game-btn:hover i,
.cover-action-overlay .card-video-btn:hover i,
.cover-action-overlay .card-book-btn:hover i {
    color: #000000 !important;
    fill: #000000 !important;
}

/* Dark mode: 50% transparent dark slate matching shelf arrows */
.dark .music-cover-play-overlay .card-play-btn,
.dark .cover-action-overlay .card-play-btn,
.dark .cover-action-overlay .card-game-btn,
.dark .cover-action-overlay .card-video-btn,
.dark .cover-action-overlay .card-book-btn,
html.dark .music-cover-play-overlay .card-play-btn,
html.dark .cover-action-overlay .card-play-btn,
html.dark .cover-action-overlay .card-game-btn,
html.dark .cover-action-overlay .card-video-btn,
html.dark .cover-action-overlay .card-book-btn,
body.dark .music-cover-play-overlay .card-play-btn,
body.dark .cover-action-overlay .card-play-btn,
body.dark .cover-action-overlay .card-game-btn,
body.dark .cover-action-overlay .card-video-btn,
body.dark .cover-action-overlay .card-book-btn {
    background: rgba(15, 23, 42, 0.5) !important;
    color: #f9fafb !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
}

.dark .music-cover-play-overlay .card-play-btn:hover,
.dark .cover-action-overlay .card-play-btn:hover,
.dark .cover-action-overlay .card-game-btn:hover,
.dark .cover-action-overlay .card-video-btn:hover,
.dark .cover-action-overlay .card-book-btn:hover,
html.dark .music-cover-play-overlay .card-play-btn:hover,
html.dark .cover-action-overlay .card-play-btn:hover,
html.dark .cover-action-overlay .card-game-btn:hover,
html.dark .cover-action-overlay .card-video-btn:hover,
html.dark .cover-action-overlay .card-book-btn:hover,
body.dark .music-cover-play-overlay .card-play-btn:hover,
body.dark .cover-action-overlay .card-play-btn:hover,
body.dark .cover-action-overlay .card-game-btn:hover,
body.dark .cover-action-overlay .card-video-btn:hover,
body.dark .cover-action-overlay .card-book-btn:hover {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.1) !important;
}

/* Dark mode icon color */
.dark .music-cover-play-overlay .card-play-btn svg,
.dark .music-cover-play-overlay .card-play-btn svg path,
.dark .music-cover-play-overlay .card-play-btn i,
.dark .music-cover-play-overlay .card-play-btn .fas,
.dark .cover-action-overlay .card-play-btn i,
.dark .cover-action-overlay .card-game-btn i,
.dark .cover-action-overlay .card-video-btn i,
.dark .cover-action-overlay .card-book-btn i,
html.dark .music-cover-play-overlay .card-play-btn svg,
html.dark .music-cover-play-overlay .card-play-btn svg path,
html.dark .music-cover-play-overlay .card-play-btn i,
html.dark .music-cover-play-overlay .card-play-btn .fas,
html.dark .cover-action-overlay .card-play-btn i,
html.dark .cover-action-overlay .card-game-btn i,
html.dark .cover-action-overlay .card-video-btn i,
html.dark .cover-action-overlay .card-book-btn i {
    opacity: 1 !important;
    color: #f9fafb !important;
    fill: #f9fafb !important;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.6)) !important;
}

.dark .music-cover-play-overlay .card-play-btn:hover i,
.dark .cover-action-overlay .card-play-btn:hover i,
.dark .cover-action-overlay .card-game-btn:hover i,
.dark .cover-action-overlay .card-video-btn:hover i,
.dark .cover-action-overlay .card-book-btn:hover i,
html.dark .music-cover-play-overlay .card-play-btn:hover i,
html.dark .cover-action-overlay .card-play-btn:hover i,
html.dark .cover-action-overlay .card-game-btn:hover i,
html.dark .cover-action-overlay .card-video-btn:hover i,
html.dark .cover-action-overlay .card-book-btn:hover i {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.music-cover-play-overlay .card-play-btn.is-playing,
.cover-action-overlay .card-play-btn.is-playing {
    background: rgba(219, 39, 119, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.music-cover-play-overlay .card-play-btn.is-playing:hover,
.cover-action-overlay .card-play-btn.is-playing:hover {
    background: rgba(219, 39, 119, 0.8) !important;
    color: #ffffff !important;
}

/* 2FA QR Code Transparent Background & Dark Mode White QR Code */
#jsf2faQr,
#jsf2faQr canvas,
#jsf2faQr img {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-bottom: 5px !important;
}

html.dark #jsf2faQr canvas,
html.dark #jsf2faQr img {
    filter: invert(1) !important;
}

.js-move-menu {
    position: fixed;
    z-index: 2147483100;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    background: #fff;
    color: #111827;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    padding: 6px;
    font-size: 14px;
}
.dark .js-move-menu {
    background: #111827;
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.12);
}
.js-move-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 7px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}
.js-move-menu button:hover:not(:disabled),
.js-move-menu button:focus-visible { background: rgba(37, 99, 235, 0.12); }
.js-move-menu button:disabled { opacity: 0.45; cursor: default; }
.js-move-menu .js-move-menu-title {
    padding: 6px 12px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
}
.js-move-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}
.js-move-icon {
    width: 16px;
    height: 16px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 16px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   11. Empty states — the board had none at all, so a new user saw three empty
   boxes with no explanation of what to do.
   --------------------------------------------------------------------------- */
.js-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    text-align: center;
    color: #6b7280;
    border: 1px dashed rgba(107, 114, 128, 0.35);
    border-radius: var(--card-radius, 10px) !important;
    font-size: 13px;
}
.dark .js-empty-state { color: #9ca3af; border-color: rgba(156, 163, 175, 0.28); }
.js-empty-state i { font-size: 20px; opacity: 0.55; }

/* ---------------------------------------------------------------------------
   12. Loading skeletons — the board previously showed stale cards and then
   jumped, with no loading state whatsoever.
   --------------------------------------------------------------------------- */
.js-skeleton {
    height: 76px;
    border-radius: var(--card-radius, 8px) !important;
    margin-bottom: 12px;
    background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.14) 25%,
        rgba(148, 163, 184, 0.26) 37%,
        rgba(148, 163, 184, 0.14) 63%);
    background-size: 400% 100%;
    animation: js-skeleton-shimmer 1.3s ease-in-out infinite;
}
@keyframes js-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .js-skeleton { animation: none; }
}

/* ---------------------------------------------------------------------------
   13. Print: min-height:100vh on a print page forces blank trailing pages.
   --------------------------------------------------------------------------- */
@media print {
    .print-page { min-height: 0 !important; }
    .js-move-btn, .js-move-menu, #toast-container { display: none !important; }
}

/* ---------------------------------------------------------------------------
   14. Light Mode Form Controls, Checkboxes, Spin Buttons & Scrollbars
   Ensures text boxes, inputs, selects, textareas, checkboxes, number steppers,
   and scrollbars render with clean light backgrounds in Light Mode.
   --------------------------------------------------------------------------- */
html:not(.dark) {
    color-scheme: light !important;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

html.dark {
    color-scheme: dark !important;
    scrollbar-color: #475569 #0f172a;
}

/* Light mode text boxes & inputs */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.bg-transparent):not([class*="bg-transparent"]),
html:not(.dark) select:not(.bg-transparent):not([class*="bg-transparent"]),
html:not(.dark) textarea:not(.bg-transparent):not([class*="bg-transparent"]),
html:not(.dark) .tag-input-container {
    background-color: #ffffff !important;
    color: #111827 !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #6b7280 !important;
}

/* Light mode checkboxes / tick boxes */
html:not(.dark) input[type="checkbox"]:not(.sr-only):not([class*="sr-only"]) {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    accent-color: #2563eb !important;
    color-scheme: light !important;
}

html:not(.dark) input[type="checkbox"]:not(.sr-only):not([class*="sr-only"]):checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

html.dark input[type="checkbox"]:not(.sr-only):not([class*="sr-only"]) {
    color-scheme: dark !important;
    accent-color: #3b82f6 !important;
}

/* Light mode number input spin buttons (steppers) */
html:not(.dark) input[type="number"]::-webkit-inner-spin-button,
html:not(.dark) input[type="number"]::-webkit-outer-spin-button {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border-radius: 3px;
    opacity: 0.85;
}

/* WebKit Scrollbar Styling — Light Mode */
html:not(.dark)::-webkit-scrollbar,
html:not(.dark) ::-webkit-scrollbar,
body:not(.dark)::-webkit-scrollbar,
body:not(.dark) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html:not(.dark)::-webkit-scrollbar-track,
html:not(.dark) ::-webkit-scrollbar-track,
body:not(.dark)::-webkit-scrollbar-track,
body:not(.dark) ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 6px;
}

html:not(.dark)::-webkit-scrollbar-thumb,
html:not(.dark) ::-webkit-scrollbar-thumb,
body:not(.dark)::-webkit-scrollbar-thumb,
body:not(.dark) ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 6px;
    border: 2px solid #f1f5f9 !important;
}

html:not(.dark)::-webkit-scrollbar-thumb:hover,
html:not(.dark) ::-webkit-scrollbar-thumb:hover,
body:not(.dark)::-webkit-scrollbar-thumb:hover,
body:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* WebKit Scrollbar Styling — Dark Mode */
html.dark::-webkit-scrollbar,
html.dark ::-webkit-scrollbar,
html.dark body::-webkit-scrollbar,
body.dark::-webkit-scrollbar,
body.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark::-webkit-scrollbar-track,
html.dark ::-webkit-scrollbar-track,
html.dark body::-webkit-scrollbar-track,
body.dark::-webkit-scrollbar-track,
body.dark ::-webkit-scrollbar-track {
    background: #1e293b !important;
    border-radius: 6px;
}

html.dark::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb,
html.dark body::-webkit-scrollbar-thumb,
body.dark::-webkit-scrollbar-thumb,
body.dark ::-webkit-scrollbar-thumb {
    background: #475569 !important;
    border-radius: 6px;
    border: 2px solid #1e293b !important;
}

html.dark::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover,
html.dark body::-webkit-scrollbar-thumb:hover,
body.dark::-webkit-scrollbar-thumb:hover,
body.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}

/* ---------------------------------------------------------------------------
   15. System Error Logs & Modal Tables Edge-to-Edge Bleed Area Fix
   Tables inside modal scroll containers must stay strictly within bounds
   with full overflow isolation, no gradient pseudo-shadow overlay stains,
   and clean border containment.
   --------------------------------------------------------------------------- */
.jsf12-tw {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    border-radius: inherit !important;
}

#errorLogsTableContainer,
#errorLogsModalContainer .table-container,
div[id$="Modal"] div.table-container,
div[id$="Modal"] div.jsf12-tw,
.table-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0.5rem !important;
    isolation: isolate !important;
    contain: paint !important;
    position: relative !important;
}

#errorLogsModal table,
#errorLogsModalContainer table,
#errorDetailModal table,
div[id$="Modal"] table,
div[id$="Modal"] .overflow-y-auto > table,
div[id$="Modal"] .overflow-x-auto > table,
div[id$="Modal"] .overflow-auto > table,
div[id$="Modal"] .jsf12-tw > table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#errorLogsModal table th,
#errorLogsModal table td,
#errorLogsModal table tr,
#errorLogsModalContainer table th,
#errorLogsModalContainer table td,
#errorLogsModalContainer table tr,
#errorLogsModal #errorLogsTableBody td,
#errorLogsModal #errorLogsTableBody tr,
div[id$="Modal"] table th,
div[id$="Modal"] table td,
div[id$="Modal"] table tr {
    box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------------
   16. Mini Music Player Floating Widget Corner & Border Bleed Fix
   Strictly clips background blur layers, absolute child elements, and box
   shadows to the 1rem rounded widget corners in floating player mode.
   --------------------------------------------------------------------------- */
#musicPlayerBar.player-floating {
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 1rem !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: rgba(229, 231, 235, 0.8) !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35) !important;
}

html.dark #musicPlayerBar.player-floating,
.dark #musicPlayerBar.player-floating {
    border-color: rgba(75, 85, 99, 0.6) !important;
}

/* ---------------------------------------------------------------------------
   17. Overdue Pill Badge Styling
   Enforces a high-contrast rounded red pill in Light Mode and a deep, dark
   rich crimson red background (#3b0707) in Dark Mode with a pulsating effect.
   --------------------------------------------------------------------------- */
.overdue-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 10px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    white-space: nowrap !important;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

html.dark .overdue-pill,
.dark .overdue-pill,
[data-theme="dark"] .overdue-pill {
    background-color: #3b0707 !important;
    color: #fca5a5 !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important;
}

.card-item.overdue-flash,
.card-item.overdue-flash[data-age],
.card-item:has(.overdue-pill),
.card-item:has(.overdue-pill)[data-age] {
    opacity: 1 !important;
    filter: none !important;
}

html.dark .card-item.overdue-flash,
.dark .card-item.overdue-flash,
[data-theme="dark"] .card-item.overdue-flash,
html.dark .card-item.overdue-flash[data-age],
.dark .card-item.overdue-flash[data-age],
[data-theme="dark"] .card-item.overdue-flash[data-age],
html.dark .card-item:has(.overdue-pill),
.dark .card-item:has(.overdue-pill),
[data-theme="dark"] .card-item:has(.overdue-pill) {
    border-left: 4px solid #3b0707 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* ---------------------------------------------------------------------------
   18. System Error Logs - Email Alert Status Badge & Action Buttons
   --------------------------------------------------------------------------- */
.btn-email-alerts,
#errorLogsAlertToggleBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    transition: all 0.15s ease-in-out !important;
    color: #4f46e5 !important;
    background-color: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
}
.btn-email-alerts:hover,
#errorLogsAlertToggleBtn:hover {
    background-color: #e0e7ff !important;
}
html.dark .btn-email-alerts,
.dark .btn-email-alerts,
[data-theme="dark"] .btn-email-alerts,
html.dark #errorLogsAlertToggleBtn,
.dark #errorLogsAlertToggleBtn,
[data-theme="dark"] #errorLogsAlertToggleBtn {
    color: #818cf8 !important;
    border: 1px solid #3730a3 !important;
    background-color: rgba(30, 27, 75, 0.6) !important;
}
html.dark .btn-email-alerts:hover,
.dark .btn-email-alerts:hover,
[data-theme="dark"] .btn-email-alerts:hover,
html.dark #errorLogsAlertToggleBtn:hover,
.dark #errorLogsAlertToggleBtn:hover,
[data-theme="dark"] #errorLogsAlertToggleBtn:hover {
    background-color: rgba(49, 46, 129, 0.8) !important;
}

#errorLogsTableContainer {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
#errorLogsModal table,
#errorLogsModalContainer table {
    width: 100% !important;
    min-width: 920px !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}

#errorLogsModal table th,
#errorLogsModal table td {
    vertical-align: middle !important;
}

/* User Profile Avatar Section & Dark Mode Theme Alignment */
#profileAvatarSection {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 14px !important;
}

html.dark #profileAvatarSection,
.dark #profileAvatarSection,
[data-theme="dark"] #profileAvatarSection {
    background-color: #0b0f19 !important; /* Darkened by an additional 5% */
    border: 1px solid #1e2533 !important;
}

#profileAvatarBg {
    filter: blur(16px) !important;
    -webkit-filter: blur(16px) !important;
    object-fit: cover !important;
    opacity: 0.15 !important;
}

/* Info Icon & Tooltip */
.profile-photo-info-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}
.profile-photo-tooltip {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: 250px !important;
    max-width: 85vw !important;
    padding: 10px 14px !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7) !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-align: left !important;
}
.profile-photo-info-wrap:hover .profile-photo-tooltip,
.profile-photo-info-wrap:focus-within .profile-photo-tooltip {
    display: block !important;
}

#profileAvatarContainer {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background-color: #e2e8f0 !important;
    border: 2px solid rgba(99, 102, 241, 0.4) !important;
}

html.dark #profileAvatarContainer,
.dark #profileAvatarContainer,
[data-theme="dark"] #profileAvatarContainer {
    background-color: #0f172a !important; /* bg-slate-900 */
    border: 2px solid rgba(129, 140, 248, 0.4) !important;
}

#profileAvatarImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
}

#uploadAvatarBtn {
    background-color: #eef2ff !important;
    color: #4f46e5 !important;
    border: 1px solid #c7d2fe !important;
}
#uploadAvatarBtn:hover {
    background-color: #e0e7ff !important;
}

html.dark #uploadAvatarBtn,
.dark #uploadAvatarBtn,
[data-theme="dark"] #uploadAvatarBtn {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
}
html.dark #uploadAvatarBtn:hover,
.dark #uploadAvatarBtn:hover,
[data-theme="dark"] #uploadAvatarBtn:hover {
    background-color: rgba(99, 102, 241, 0.35) !important;
    color: #ffffff !important;
}

#removeAvatarBtn {
    background-color: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}
#removeAvatarBtn:hover {
    background-color: #ffe4e6 !important;
}

html.dark #removeAvatarBtn,
.dark #removeAvatarBtn,
[data-theme="dark"] #removeAvatarBtn {
    background-color: rgba(225, 29, 72, 0.2) !important;
    color: #fda4af !important;
    border: 1px solid rgba(225, 29, 72, 0.4) !important;
}
html.dark #removeAvatarBtn:hover,
.dark #removeAvatarBtn:hover,
[data-theme="dark"] #removeAvatarBtn:hover {
    background-color: rgba(225, 29, 72, 0.35) !important;
    color: #ffffff !important;
}

#profileAvatarLimitsBadge {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}
#profileAvatarLimitsBadge .badge-heading {
    color: #334155 !important;
}

html.dark #profileAvatarLimitsBadge,
.dark #profileAvatarLimitsBadge,
[data-theme="dark"] #profileAvatarLimitsBadge {
    background-color: #0f172a !important; /* bg-slate-900 */
    border: 1px solid #334155 !important; /* border-slate-700 */
    color: #94a3b8 !important;
}
html.dark #profileAvatarLimitsBadge .badge-heading,
.dark #profileAvatarLimitsBadge .badge-heading,
[data-theme="dark"] #profileAvatarLimitsBadge .badge-heading {
    color: #cbd5e1 !important;
}

.error-alert-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 9999px !important;
    line-height: 1.2 !important;
}
.error-alert-status-badge.status-active {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}
html.dark .error-alert-status-badge.status-active,
.dark .error-alert-status-badge.status-active,
[data-theme="dark"] .error-alert-status-badge.status-active {
    background-color: rgba(6, 78, 59, 0.4) !important;
    color: #4ade80 !important;
    border: 1px solid #059669 !important;
}
.error-alert-status-badge.status-disabled {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}
html.dark .error-alert-status-badge.status-disabled,
.dark .error-alert-status-badge.status-disabled,
[data-theme="dark"] .error-alert-status-badge.status-disabled {
    background-color: rgba(30, 41, 59, 0.5) !important;
    color: #94a3b8 !important;
    border: 1px solid #475569 !important;
}

.btn-export-csv {
    display: inline-flex;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    transition: all 0.15s ease-in-out !important;
    color: #059669 !important;
    background-color: transparent !important;
    border: 1px solid #a7f3d0 !important;
}
#errorLogsClearBtn {
    border-radius: 9999px !important;
}
.btn-export-csv.hidden,
#errorLogsExportCsvBtn.hidden,
#errorLogsClearBtn.hidden,
#errorLogsSearchContainer.hidden,
#errorLogsLimitContainer.hidden,
#errorLogsPaginationFooter.hidden {
    display: none !important;
}
.btn-export-csv:hover {
    background-color: #ecfdf5 !important;
}
html.dark .btn-export-csv,
.dark .btn-export-csv,
[data-theme="dark"] .btn-export-csv {
    color: #34d399 !important;
    border: 1px solid #065f46 !important;
    background-color: transparent !important;
}
html.dark .btn-export-csv:hover,
.dark .btn-export-csv:hover,
[data-theme="dark"] .btn-export-csv:hover {
    background-color: rgba(6, 78, 59, 0.4) !important;
}

/* ==========================================================================
   19. Auth & Verification Page Layout, Logos & Theme Controls
   ========================================================================== */
#loginLogo,
#twoFactorLogo {
    max-height: 100px !important;
    height: auto !important;
    max-width: 260px !important;
    width: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    aspect-ratio: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
}

#loginThemeBubbleContainer {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 60 !important;
}

#loginThemePopover {
    max-width: calc(100vw - 32px) !important;
}

@media (max-height: 700px) {
    #loginLogo,
    #twoFactorLogo {
        max-height: 70px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-height: 560px) {
    #loginLogo,
    #twoFactorLogo {
        max-height: 52px !important;
        margin-bottom: 8px !important;
    }
}

/* ==========================================================================
   20. Radio & Checkbox Flex Sizing & Shrink Protection
   ========================================================================== */
input[type="radio"],
input[type="checkbox"],
#backupModal input[type="radio"],
#backupModal input[type="checkbox"] {
    flex-shrink: 0 !important;
    min-width: 1rem !important;
    min-height: 1rem !important;
}

/* ==========================================================================
   21. FAQ Knowledge Base & FAQ Manager Modals
   ========================================================================== */
.faq-accordion-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-accordion-item:hover {
    border-color: #cbd5e1;
}
html.dark .faq-accordion-item:hover,
.dark .faq-accordion-item:hover,
[data-theme="dark"] .faq-accordion-item:hover {
    border-color: #475569;
}

.faq-accordion-header {
    user-select: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.faq-accordion-item.active .faq-accordion-header {
    background-color: rgba(241, 245, 249, 0.6);
}
html.dark .faq-accordion-item.active .faq-accordion-header,
.dark .faq-accordion-item.active .faq-accordion-header,
[data-theme="dark"] .faq-accordion-item.active .faq-accordion-header {
    background-color: rgba(30, 41, 59, 0.4);
}

.faq-accordion-icon {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-accordion-item.active .faq-accordion-icon {
    transform: rotate(180deg);
}

.faq-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-in-out;
    opacity: 0;
}
.faq-accordion-item.active .faq-accordion-body {
    max-height: 1000px;
    opacity: 1;
}

.faq-category-pill {
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.faq-category-pill.active {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3) !important;
}
html.dark .faq-category-pill.active,
.dark .faq-category-pill.active,
[data-theme="dark"] .faq-category-pill.active {
    background-color: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.4) !important;
}

.faq-star-btn {
    transition: transform 0.1s ease, color 0.15s ease;
}
.faq-star-btn:hover {
    transform: scale(1.2);
}

.faq-author-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
html.dark .faq-author-badge,
.dark .faq-author-badge,
[data-theme="dark"] .faq-author-badge {
    background-color: rgba(120, 53, 15, 0.3);
    color: #fcd34d;
    border: 1px solid #78350f;
}

/* ==========================================================================
   Video Player Modal Responsive Bounds & Scaling (No Scrollbars)
   ========================================================================== */
#videoPlayerModal {
    overflow: hidden !important;
}

#videoPlayerModal #videoPlayerModalContainer {
    width: 86vw !important;
    max-width: 1060px !important;
    height: 80vh !important;
    max-height: 80vh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#videoPlayerModal #videoPlayerWorkspace {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

#videoPlayerModal #videoElement {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 768px) {
    #videoPlayerModal #videoPlayerModalContainer {
        width: 96vw !important;
        max-width: 96vw !important;
        height: 85vh !important;
        max-height: 85vh !important;
    }
}

/* Ensure .hidden always hides elements with highest priority across all buttons and containers */
.hidden,
.modal-header-btn.hidden,
button.modal-header-btn.hidden,
#modalMinimizeBtn.hidden,
#modalMaximizeBtn.hidden,
#modalCloseBtn.hidden,
#modalExportPdfBtn.hidden,
#modalAddCoverBtn.hidden,
#modalDeleteBtn.hidden,
#modalHeaderActionsDivider.hidden,
[id^="modal"].hidden {
    display: none !important;
}

/* ==========================================================================
   Universal Modal Top-Right Header Action & Close Button Standardization
   ========================================================================== */
.modal-header-btn:not(.hidden),
button.modal-header-btn:not(.hidden),
#modalMinimizeBtn:not(.hidden),
#modalMaximizeBtn:not(.hidden),
#modalCloseBtn:not(.hidden),
#modalExportPdfBtn:not(.hidden),
#modalAddCoverBtn:not(.hidden),
#modalDeleteBtn:not(.hidden),
#errorLogsMaximizeBtn:not(.hidden),
#faqMaximizeBtn:not(.hidden),
#faqManagerMaximizeBtn:not(.hidden),
#emailQueueMaximizeBtn:not(.hidden),
#calendarCloseBtn:not(.hidden),
#copyNerdStatsBtn:not(.hidden),
#copyErrorDetailBtn:not(.hidden) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

/* Strict icon horizontal and vertical centering inside the circle */
.modal-header-btn i,
.modal-header-btn svg,
#modalMinimizeBtn i,
#modalMaximizeBtn i,
#modalCloseBtn i,
#modalExportPdfBtn i,
#modalAddCoverBtn i,
#modalDeleteBtn i,
#errorLogsMaximizeBtn i,
#faqMaximizeBtn i,
#faqManagerMaximizeBtn i,
#emailQueueMaximizeBtn i,
#calendarCloseBtn i,
#copyNerdStatsBtn i,
#copyErrorDetailBtn i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: middle !important;
}

/* Universal hover circle background */
.modal-header-btn:hover,
#modalMinimizeBtn:hover,
#modalMaximizeBtn:hover,
#modalCloseBtn:hover,
#modalExportPdfBtn:hover,
#modalAddCoverBtn:hover,
#modalDeleteBtn:hover,
#errorLogsMaximizeBtn:hover,
#faqMaximizeBtn:hover,
#faqManagerMaximizeBtn:hover,
#emailQueueMaximizeBtn:hover,
#calendarCloseBtn:hover,
#copyNerdStatsBtn:hover,
#copyErrorDetailBtn:hover {
    background-color: rgba(156, 163, 175, 0.2) !important;
}

html.dark .modal-header-btn:hover,
.dark .modal-header-btn:hover,
[data-theme="dark"] .modal-header-btn:hover,
html.dark #modalMinimizeBtn:hover,
html.dark #modalMaximizeBtn:hover,
html.dark #modalCloseBtn:hover,
html.dark #modalExportPdfBtn:hover,
html.dark #modalAddCoverBtn:hover,
html.dark #modalDeleteBtn:hover,
html.dark #errorLogsMaximizeBtn:hover,
html.dark #faqMaximizeBtn:hover,
html.dark #faqManagerMaximizeBtn:hover,
html.dark #emailQueueMaximizeBtn:hover,
html.dark #calendarCloseBtn:hover,
html.dark #copyNerdStatsBtn:hover,
html.dark #copyErrorDetailBtn:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================================
   Limit Settings Modal — 616px Width (40% Expansion) & Zoom-Proof Pinned Footer
   ========================================================================== */
#limitSettingsModal > div {
    width: 100% !important;
    max-width: 616px !important;
    max-height: min(88vh, calc(100vh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#limitSettingsModal form#limitSettingsForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#limitSettingsModal #limitSettingsScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#limitSettingsModal #limitSettingsFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   My Disk Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#myDiskModal > div {
    width: 100% !important;
    max-width: 605px !important;
    max-height: min(88vh, calc(100vh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#myDiskModal #myDiskScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#myDiskModal #myDiskFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   My Disk Modal & Legend — Dark Mode Custom Styles & Text Visibility
   ========================================================================== */
html.dark #myDiskModal > div,
.dark #myDiskModal > div {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark #myDiskModal h3,
.dark #myDiskModal h3 {
    color: #f8fafc !important;
}

html.dark #myDiskModal .border-b,
html.dark #myDiskModal .border-t,
.dark #myDiskModal .border-b,
.dark #myDiskModal .border-t {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #myDiskModal .bg-gray-50,
.dark #myDiskModal .bg-gray-50 {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #myDiskModal h4,
.dark #myDiskModal h4 {
    color: #94a3b8 !important;
}

html.dark #myDiskModal span.text-sm.font-bold,
.dark #myDiskModal span.text-sm.font-bold {
    color: #f1f5f9 !important;
}

html.dark #diskPercentText,
html.dark #bandwidthPercentText,
.dark #diskPercentText,
.dark #bandwidthPercentText {
    color: #f8fafc !important;
}

html.dark #diskSpaceLimitTotal,
.dark #diskSpaceLimitTotal {
    color: #cbd5e1 !important;
}

html.dark #diskTotalCards,
html.dark #diskTotalSize,
html.dark #diskTotalFiles,
.dark #diskTotalCards,
.dark #diskTotalSize,
.dark #diskTotalFiles {
    color: #f8fafc !important;
}

html.dark #myDiskModal span.text-gray-600,
.dark #myDiskModal span.text-gray-600 {
    color: #cbd5e1 !important;
}

/* My Disc Breakdown List Text in Dark Mode (High-contrast, clearly visible) */
html.dark #diskStatsLegend,
.dark #diskStatsLegend {
    color: #f1f5f9 !important;
}

html.dark #diskStatsLegend .disk-stat-type,
html.dark #diskStatsLegend span.font-semibold,
.dark #diskStatsLegend .disk-stat-type,
.dark #diskStatsLegend span.font-semibold {
    color: #f8fafc !important;
}

html.dark #diskStatsLegend .disk-stat-count,
html.dark #diskStatsLegend span.text-gray-400,
.dark #diskStatsLegend .disk-stat-count,
.dark #diskStatsLegend span.text-gray-400 {
    color: #94a3b8 !important;
}

html.dark #diskStatsLegend .disk-stat-mb,
html.dark #diskStatsLegend span.font-bold,
.dark #diskStatsLegend .disk-stat-mb,
.dark #diskStatsLegend span.font-bold {
    color: #ffffff !important;
}

html.dark #diskStatsLegend .disk-stat-pct,
.dark #diskStatsLegend .disk-stat-pct {
    color: #60a5fa !important;
}

html.dark #diskStatsLegend div.text-gray-800,
.dark #diskStatsLegend div.text-gray-800,
html.dark #diskStatsLegend .disk-stat-size,
.dark #diskStatsLegend .disk-stat-size {
    color: #f8fafc !important;
}

html.dark #diskStatsLegend > div:hover,
.dark #diskStatsLegend > div:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px;
}

/* Interactive Pie Chart Hover Tooltip in dark mode */
html.dark #diskStatsTooltip,
.dark #diskStatsTooltip {
    background: rgba(15, 23, 42, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6) !important;
}

html.dark #diskStatsTooltip .disk-tooltip-type,
.dark #diskStatsTooltip .disk-tooltip-type,
html.dark #diskStatsTooltip span.text-gray-800,
.dark #diskStatsTooltip span.text-gray-800 {
    color: #f8fafc !important;
}

html.dark #diskStatsTooltip .disk-tooltip-pct,
.dark #diskStatsTooltip .disk-tooltip-pct {
    color: #60a5fa !important;
}

html.dark #diskStatsTooltip .disk-tooltip-mb,
.dark #diskStatsTooltip .disk-tooltip-mb,
html.dark #diskStatsTooltip span.text-gray-400,
.dark #diskStatsTooltip span.text-gray-400 {
    color: #94a3b8 !important;
}

/* Modal Footer Buttons in dark mode */
html.dark #myDiskFooter button:last-child,
.dark #myDiskFooter button:last-child {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark #myDiskFooter button:last-child:hover,
.dark #myDiskFooter button:last-child:hover {
    background-color: #475569 !important;
}

html.dark #myDiskFooter button:first-child,
.dark #myDiskFooter button:first-child {
    background-color: rgba(30, 58, 138, 0.4) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(96, 165, 250, 0.25) !important;
}

html.dark #myDiskFooter button:first-child:hover,
.dark #myDiskFooter button:first-child:hover {
    background-color: rgba(30, 58, 138, 0.6) !important;
}

/* Disk Help Modal in dark mode */
html.dark #diskHelpModal > div,
.dark #diskHelpModal > div {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html.dark #diskHelpModal h3,
html.dark #diskHelpModal h4,
.dark #diskHelpModal h3,
.dark #diskHelpModal h4 {
    color: #f8fafc !important;
}

html.dark #diskHelpModal p,
.dark #diskHelpModal p {
    color: #cbd5e1 !important;
}

html.dark #diskHelpModal #diskHelpResetDays,
html.dark #diskHelpModal #diskHelpNextResetDate,
.dark #diskHelpModal #diskHelpResetDays,
.dark #diskHelpModal #diskHelpNextResetDate {
    color: #60a5fa !important;
    font-weight: 700 !important;
}

html.dark #diskHelpModal button,
.dark #diskHelpModal button {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* ==========================================================================
   My Profile Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#myProfileModal > div {
    width: 100% !important;
    max-width: 480px !important;
    max-height: min(88vh, calc(100vh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#myProfileModal form#myProfileForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#myProfileModal #myProfileScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#myProfileModal #myProfileFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   Change Password Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#changePasswordModal > div {
    width: 100% !important;
    max-width: 440px !important;
    max-height: min(88vh, calc(100vh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#changePasswordModal form#changePasswordForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#changePasswordModal #changePasswordScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#changePasswordModal #changePasswordFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   Site Settings Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#siteSettingsModal > div {
    width: 100% !important;
    max-width: 448px !important;
    max-height: min(88vh, calc(100vh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#siteSettingsModal form#siteSettingsForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#siteSettingsModal #siteSettingsScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#siteSettingsModal #siteSettingsFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   Manage Languages Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#manageLanguagesModal > div {
    width: 100% !important;
    max-width: 1024px !important;
    max-height: min(88vh, calc(100vh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#manageLanguagesModal #manageLanguagesScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 56vh !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#manageLanguagesModal #manageLanguagesFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   Sys Messages Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#sysMessagesModal > div {
    width: 100% !important;
    max-width: 672px !important;
    max-height: min(88vh, calc(100vh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#sysMessagesModal form#sysMessagesForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#sysMessagesModal #sysMessagesScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#sysMessagesModal #sysMessagesFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   API Settings Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#apiSettingsModal > div {
    width: 100% !important;
    max-width: 448px !important;
    max-height: min(88vh, calc(100vh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#apiSettingsModal form#apiSettingsForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#apiSettingsModal #apiSettingsScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#apiSettingsModal #apiSettingsFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   Email Setup & Configuration Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#emailSettingsModal > div {
    width: 100% !important;
    max-width: 760px !important;
    max-height: min(88vh, calc(100vh - 2.5rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 24px 24px 20px 24px !important;
}

#emailSettingsModal form#emailSettingsForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#emailSettingsModal #emailSettingsScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: min(52vh, calc(88vh - 200px)) !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#emailSettingsModal #emailSettingsFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    min-height: 68px !important;
    box-sizing: border-box !important;
}

#emailSettingsModal #emailSettingsFooter button {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ==========================================================================
   Email Template Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#emailTemplateModal > div {
    width: 100% !important;
    max-width: 580px !important;
    max-height: min(88vh, calc(100vh - 2.5rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 24px 24px 20px 24px !important;
}

#emailTemplateModal form#emailTemplateForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#emailTemplateModal #emailTemplateScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: min(52vh, calc(88vh - 200px)) !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#emailTemplateModal #emailTemplateFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    min-height: 68px !important;
    box-sizing: border-box !important;
}

#emailTemplateModal #emailTemplateFooter button {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ==========================================================================
   System Backup Modal — Zoom-Proof Pinned Footer & Scroll Constraints
   ========================================================================== */
#backupModal > div {
    width: 100% !important;
    max-width: 560px !important;
    max-height: min(88vh, calc(100vh - 2.5rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 24px 24px 20px 24px !important;
}

#backupModal form#backupForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#backupModal #backupScrollBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: min(52vh, calc(88vh - 200px)) !important;
    overflow-y: auto !important;
    padding: 10px 8px 12px 6px !important;
    scroll-padding-top: 10px !important;
    scroll-padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

#backupModal #backupActions,
#backupModal #backupFooter {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    min-height: 68px !important;
    box-sizing: border-box !important;
}

#backupModal #backupActions button {
    min-height: 44px !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   More Button Styling & Position (Matches Settings Button)
   ========================================================================== */
#jsfToolbar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    vertical-align: middle !important;
    margin-left: 0 !important;
}

#jsfToolbar .jsf-more {
    display: inline-block !important;
    position: relative !important;
}

#jsfMoreBtn {
    background: transparent !important;
    color: var(--jsf-ink-2) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 30px !important;
    padding: 6px 10px !important;
    min-height: 32px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background .15s ease, color .15s ease !important;
    cursor: pointer !important;
}

#jsfMoreBtn:hover {
    background: var(--jsf-surface-3) !important;
    color: var(--jsf-ink-1) !important;
}

#jsfMoreMenu,
.jsf-more-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    z-index: 99999 !important;
    min-width: 250px !important;
    max-width: 320px !important;
    width: max-content !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--menu-radius, 30px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-height: calc(100vh - 80px) !important;
}

#jsfMoreMenu[hidden],
#jsfMoreMenu.hidden,
.jsf-more-menu[hidden],
.jsf-more-menu.hidden {
    display: none !important;
}

.dark #jsfMoreMenu,
.dark .jsf-more-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
    border-radius: var(--menu-radius, 30px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
}

#jsfMoreMenu button,
.jsf-more-menu button,
#settingsDropdown button,
#settingsDropdown a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--button-radius, 8px) !important;
    background: transparent !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease, color 0.15s ease, border-radius 0.15s ease !important;
    text-decoration: none !important;
}

.dark #jsfMoreMenu button,
.dark .jsf-more-menu button,
.dark #settingsDropdown button,
.dark #settingsDropdown a {
    color: #d1d5db !important;
}

#jsfMoreMenu button:hover,
#jsfMoreMenu button:focus-visible,
.jsf-more-menu button:hover,
.jsf-more-menu button:focus-visible,
#settingsDropdown button:hover,
#settingsDropdown a:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
    outline: none !important;
}

.dark #jsfMoreMenu button:hover,
.dark #jsfMoreMenu button:focus-visible,
.dark .jsf-more-menu button:hover,
.dark .jsf-more-menu button:focus-visible,
.dark #settingsDropdown button:hover,
.dark #settingsDropdown a:hover {
    background: #374151 !important;
    color: #ffffff !important;
}

#jsfMoreMenu button > i,
.jsf-more-menu button > i {
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    margin-right: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#jsfMoreMenu button > span,
.jsf-more-menu button > span {
    flex: 1 1 auto !important;
    text-align: left !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#jsfMoreMenu kbd,
.jsf-more-menu kbd {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding: 2px 6px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-family: inherit !important;
    color: #6b7280 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    min-width: 18px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.dark #jsfMoreMenu kbd,
.dark .jsf-more-menu kbd {
    color: #9ca3af !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#jsfMoreMenu .jsf9-sep,
.jsf-more-menu .jsf9-sep {
    height: 1px !important;
    margin: 4px 6px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border: 0 !important;
}

.dark #jsfMoreMenu .jsf9-sep,
.dark .jsf-more-menu .jsf9-sep {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Compact Cards Density Styling
   ========================================================================== */
body.jsf-compact .card-item {
    margin-bottom: 6px !important;
    font-size: 0.85em !important;
}
body.jsf-compact .card-item .p-4,
body.jsf-compact .card-item > div.p-4,
body.jsf-compact .card-item > .p-4 {
    padding: 6px 10px !important;
}
body.jsf-compact .card-item h3,
body.jsf-compact .card-item .card-title {
    font-size: 0.88rem !important;
    margin-bottom: 2px !important;
    line-height: 1.25 !important;
}
body.jsf-compact .card-item .card-desc-text,
body.jsf-compact .card-item .card-desc-excerpt {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
}
body.jsf-compact .board-column {
    padding: 8px !important;
}
body.jsf-compact .jsf-card-flags {
    padding: 0 4px 2px !important;
    gap: 3px !important;
}
body.jsf-compact .jsf-field-chips {
    padding: 0 4px 2px !important;
}
body.jsf-compact .jsf-cover-stripe {
    height: 4px !important;
    margin-bottom: 3px !important;
}

/* ==========================================================================
   Dashboard Dialog & Backdrop Full Theme Support
   ========================================================================== */
.jsf-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483200 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.jsf-dialog {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

.dark .jsf-dialog {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.dark .jsf-kpi {
    background: #111827 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

.dark .jsf-bar-track {
    background: #374151 !important;
}

/* ==========================================================================
   Animated Starfield Theme Glassmorphism & High-Contrast Overlay
   ========================================================================== */
body.has-animated-bg #jsfListView,
body.has-animated-bg .jsf-listwrap {
    position: relative !important;
    z-index: 10 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--card-radius, 12px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    color: #f9fafb !important;
    padding: 20px !important;
    margin: 16px auto 24px !important;
    max-width: 80rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.dark body.has-animated-bg #jsfListView,
.dark body.has-animated-bg .jsf-listwrap {
    background-color: rgba(13, 13, 13, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.has-animated-bg #jsfListView .jsf-table {
    color: #f9fafb !important;
}
body.has-animated-bg #jsfListView .jsf-table th {
    color: #f3f4f6 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25) !important;
}
body.has-animated-bg #jsfListView .jsf-table td {
    color: #f9fafb !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.has-animated-bg #jsfListView .jsf-table .jsf-td-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}
body.has-animated-bg #jsfListView .jsf-table .jsf-td-status {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
body.has-animated-bg #jsfListView .jsf-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}
body.has-animated-bg #jsfListView .jsf-muted {
    color: #d1d5db !important;
}

body.has-animated-bg .jsf-cal {
    position: relative !important;
    z-index: 10 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--card-radius, 12px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    color: #f9fafb !important;
    padding: 20px !important;
    margin: 16px auto 24px !important;
    max-width: 80rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.dark body.has-animated-bg .jsf-cal {
    background-color: rgba(13, 13, 13, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.has-animated-bg .jsf-cal-head h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
}
body.has-animated-bg .jsf-cal-hint {
    color: #e5e7eb !important;
}
body.has-animated-bg .jsf-cal-nav .jsf-btn,
body.has-animated-bg .jsf-cal-head .jsf-btn {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px) !important;
}
body.has-animated-bg .jsf-cal-nav .jsf-btn:hover,
body.has-animated-bg .jsf-cal-head .jsf-btn:hover {
    background-color: rgba(255, 255, 255, 0.35) !important;
}
body.has-animated-bg .jsf-cal-grid {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
body.has-animated-bg .jsf-cal-dow {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.dark body.has-animated-bg .jsf-cal-dow {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #f3f4f6 !important;
}
body.has-animated-bg .jsf-cal-day {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.dark body.has-animated-bg .jsf-cal-day {
    background: rgba(17, 24, 39, 0.3) !important;
}
body.has-animated-bg .jsf-cal-day.is-out {
    background: rgba(255, 255, 255, 0.05) !important;
    opacity: 0.55;
}
.dark body.has-animated-bg .jsf-cal-day.is-out {
    background: rgba(0, 0, 0, 0.2) !important;
}
body.has-animated-bg .jsf-cal-num {
    color: #f3f4f6 !important;
    font-weight: 600 !important;
}
body.has-animated-bg .jsf-cal-day.is-today .jsf-cal-num {
    background: #3b82f6 !important;
    color: #ffffff !important;
}
body.has-animated-bg .jsf-cal-chip {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.dark body.has-animated-bg .jsf-cal-chip {
    background: rgba(30, 58, 138, 0.35) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    color: #f9fafb !important;
}
body.has-animated-bg .jsf-cal-tray {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.dark body.has-animated-bg .jsf-cal-tray {
    background: rgba(13, 13, 13, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body.has-animated-bg .jsf-cal-tray h4 {
    color: #f3f4f6 !important;
}

body.has-animated-bg #jsfViewbar {
    background-color: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    z-index: 10 !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.dark body.has-animated-bg #jsfViewbar {
    background-color: rgba(13, 13, 13, 0.3) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
/* Remove background & border on jsf View Select Button */
#jsfViewSelectBtn,
#jsfViewbar .jsf-custom-select-btn,
#jsfViewbar button.jsf-chip-filter {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.has-animated-bg #jsfViewSelectBtn,
body.has-animated-bg .jsf-custom-select-btn {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.has-animated-bg #jsfViewSelectBtn:hover,
body.has-animated-bg .jsf-custom-select-btn:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}


/* ============================================================================
   Worksheet Settings & My Profile Modals — mirrors My Disk modal pattern:
   scroll body has max-height + overflow, footer sits naturally below it.
   ========================================================================== */
#worksheetSettingsModal.hidden,
#myProfileModal.hidden {
    display: none !important;
}
#worksheetSettingsScrollBody,
#myProfileScrollBody {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Ensure animated starfield background is strictly visible only in dark mode */
html:not(.dark) #appBackground,
html:not(.dark) body.has-animated-bg #appBackground {
    display: none !important;
}
html:not(.dark) body.has-animated-bg {
    background-color: transparent !important;
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}

/* ============================================================================
   New Card Button — Green with smooth shade transition on hover
   ========================================================================== */
.new-card-btn,
button.new-card-btn,
#newCardBtn {
    background-color: #16a34a !important;
    background: #16a34a !important;
    color: #ffffff !important;
    transition: background-color 0.15s ease, filter 0.15s ease !important;
}
.new-card-btn:hover,
button.new-card-btn:hover,
#newCardBtn:hover {
    background-color: #15803d !important;
    background: #15803d !important;
    color: #ffffff !important;
    filter: brightness(1.05);
}
.new-card-btn:active,
button.new-card-btn:active,
/* ==========================================================================
   Admin Dropdown & Drawer — Matching Category Hover Colors
   ========================================================================== */

/* 1. Purple: Users & Packages */
.admin-cat-purple > button:hover,
.admin-cat-purple .admin-submenu button:hover,
.admin-cat-purple .admin-submenu a:hover,
.burger-admin-purple:hover {
    background-color: #faf5ff !important;
    color: #7e22ce !important;
}
html.dark .admin-cat-purple > button:hover,
html.dark .admin-cat-purple .admin-submenu button:hover,
html.dark .admin-cat-purple .admin-submenu a:hover,
html.dark .burger-admin-purple:hover {
    background-color: rgba(147, 51, 234, 0.25) !important;
    color: #f3e8ff !important;
}

/* 2. Blue: Site Configuration */
.admin-cat-blue > button:hover,
.admin-cat-blue .admin-submenu button:hover,
.admin-cat-blue .admin-submenu a:hover,
.burger-admin-blue:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}
html.dark .admin-cat-blue > button:hover,
html.dark .admin-cat-blue .admin-submenu button:hover,
html.dark .admin-cat-blue .admin-submenu a:hover,
html.dark .burger-admin-blue:hover {
    background-color: rgba(37, 99, 235, 0.25) !important;
    color: #dbeafe !important;
}

/* 3. Amber: Services & Mail */
.admin-cat-amber > button:hover,
.admin-cat-amber .admin-submenu button:hover,
.admin-cat-amber .admin-submenu a:hover,
.burger-admin-amber:hover {
    background-color: #fffbeb !important;
    color: #b45309 !important;
}
html.dark .admin-cat-amber > button:hover,
html.dark .admin-cat-amber .admin-submenu button:hover,
html.dark .admin-cat-amber .admin-submenu a:hover,
html.dark .burger-admin-amber:hover {
    background-color: rgba(217, 119, 6, 0.25) !important;
    color: #fef3c7 !important;
}

/* 4. Rose: Maintenance & Logs */
.admin-cat-rose > button:hover,
.admin-cat-rose .admin-submenu button:hover,
.admin-cat-rose .admin-submenu a:hover,
.burger-admin-rose:hover {
    background-color: #fff1f2 !important;
    color: #be123c !important;
}
html.dark .admin-cat-rose > button:hover,
html.dark .admin-cat-rose .admin-submenu button:hover,
html.dark .admin-cat-rose .admin-submenu a:hover,
html.dark .burger-admin-rose:hover {
    background-color: rgba(225, 29, 72, 0.25) !important;
    color: #ffe4e6 !important;
}

/* 5. Emerald: Support & Documentation */
.admin-cat-emerald > button:hover,
.admin-cat-emerald .admin-submenu button:hover,
.admin-cat-emerald .admin-submenu a:hover,
.burger-admin-emerald:hover {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
}
html.dark .admin-cat-emerald > button:hover,
html.dark .admin-cat-emerald .admin-submenu button:hover,
html.dark .admin-cat-emerald .admin-submenu a:hover,
html.dark .burger-admin-emerald:hover {
    background-color: rgba(5, 150, 105, 0.25) !important;
    color: #d1fae5 !important;
}

/* ============================================================================
   Category Tabs (New Item Modal & Upload Settings Modal)
   ========================================================================== */
.ws-cat-tab,
.upload-settings-tab-btn {
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    border: 1.5px solid transparent;
    box-sizing: border-box;
    margin: 1px;
}

/* Inactive State - Light Mode */
.ws-cat-tab,
.upload-settings-tab-btn {
    background-color: #f3f4f6;
    color: #4b5563;
}
.ws-cat-tab:hover,
.upload-settings-tab-btn:hover {
    background-color: #e5e7eb;
    color: #111827;
}

/* Inactive State - Dark Mode */
html.dark .ws-cat-tab,
.dark .ws-cat-tab,
[data-theme="dark"] .ws-cat-tab,
html.dark .upload-settings-tab-btn,
.dark .upload-settings-tab-btn,
[data-theme="dark"] .upload-settings-tab-btn {
    background-color: #374151 !important;
    color: #d1d5db !important;
    border-color: #4b5563 !important;
}
html.dark .ws-cat-tab:hover,
.dark .ws-cat-tab:hover,
[data-theme="dark"] .ws-cat-tab:hover,
html.dark .upload-settings-tab-btn:hover,
.dark .upload-settings-tab-btn:hover,
[data-theme="dark"] .upload-settings-tab-btn:hover {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

/* Active / Selected State - Light Mode */
.ws-cat-tab.active,
.upload-settings-tab-btn.active {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4338ca !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.35) !important;
}
.ws-cat-tab.active:hover,
.upload-settings-tab-btn.active:hover {
    background-color: #4338ca !important;
    color: #ffffff !important;
}

/* Active / Selected State - Dark Mode ("dark the selected button") */
html.dark .ws-cat-tab.active,
.dark .ws-cat-tab.active,
[data-theme="dark"] .ws-cat-tab.active,
html.dark .upload-settings-tab-btn.active,
.dark .upload-settings-tab-btn.active,
[data-theme="dark"] .upload-settings-tab-btn.active {
    background-color: #1e1b4b !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 1px #6366f1, 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
html.dark .ws-cat-tab.active:hover,
.dark .ws-cat-tab.active:hover,
[data-theme="dark"] .ws-cat-tab.active:hover,
html.dark .upload-settings-tab-btn.active:hover,
.dark .upload-settings-tab-btn.active:hover,
[data-theme="dark"] .upload-settings-tab-btn.active:hover {
    background-color: #272262 !important;
    color: #ffffff !important;
    border-color: #818cf8 !important;
}

/* ---------------------------------------------------------------------------
   EmulatorJS Fullscreen Mode: Edge-to-edge canvas with autohiding overlay header
   after 5 seconds of mouse inactivity.
   --------------------------------------------------------------------------- */
#emulatorPlayerModalContainer:fullscreen,
#emulatorPlayerModalContainer:-webkit-full-screen,
#emulatorPlayerModalContainer:-moz-full-screen,
#emulatorPlayerModalContainer:-ms-fullscreen,
#emulatorPlayerModalContainer.is-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    border: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
    outline: none !important;
    position: fixed !important;
    inset: 0 !important;
}

#emulatorPlayerModalContainer:fullscreen #emulatorPlayerIframeWrapper,
#emulatorPlayerModalContainer:-webkit-full-screen #emulatorPlayerIframeWrapper,
#emulatorPlayerModalContainer:-moz-full-screen #emulatorPlayerIframeWrapper,
#emulatorPlayerModalContainer:-ms-fullscreen #emulatorPlayerIframeWrapper,
#emulatorPlayerModalContainer.is-fullscreen #emulatorPlayerIframeWrapper,
#emulatorPlayerModalContainer:fullscreen #emulatorPlayerIframe,
#emulatorPlayerModalContainer:-webkit-full-screen #emulatorPlayerIframe,
#emulatorPlayerModalContainer:-moz-full-screen #emulatorPlayerIframe,
#emulatorPlayerModalContainer:-ms-fullscreen #emulatorPlayerIframe,
#emulatorPlayerModalContainer.is-fullscreen #emulatorPlayerIframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    z-index: 10;
}

/* Floating overlay header in fullscreen */
#emulatorPlayerModalContainer:fullscreen #emulatorPlayerModalHeader,
#emulatorPlayerModalContainer:-webkit-full-screen #emulatorPlayerModalHeader,
#emulatorPlayerModalContainer:-moz-full-screen #emulatorPlayerModalHeader,
#emulatorPlayerModalContainer:-ms-fullscreen #emulatorPlayerModalHeader,
#emulatorPlayerModalContainer.is-fullscreen #emulatorPlayerModalHeader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.94) 0%, rgba(10, 10, 15, 0.75) 75%, rgba(10, 10, 15, 0) 100%) !important;
    border-bottom: none !important;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hidden state after 5 seconds of inactivity */
#emulatorPlayerModalContainer:fullscreen #emulatorPlayerModalHeader.header-inactive,
#emulatorPlayerModalContainer:-webkit-full-screen #emulatorPlayerModalHeader.header-inactive,
#emulatorPlayerModalContainer:-moz-full-screen #emulatorPlayerModalHeader.header-inactive,
#emulatorPlayerModalContainer:-ms-fullscreen #emulatorPlayerModalHeader.header-inactive,
#emulatorPlayerModalContainer.is-fullscreen #emulatorPlayerModalHeader.header-inactive {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------------------------
   File Upload Settings Modal — Width Expansion & Console Table Badges
   --------------------------------------------------------------------------- */
#uploadSettingsModal .max-w-md,
#uploadSettingsModal > div {
    max-width: 740px !important;
    width: 100% !important;
}

/* Ensure console labels and core descriptions are centered cleanly */
.console-upload-item label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.console-upload-item label > span:first-child {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
}

.console-upload-item p {
    text-align: center !important;
}

/* Game Consoles tab container and search bar */
html.dark #uploadTabContent-consoles > div:first-child,
.dark #uploadTabContent-consoles > div:first-child {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-color: #334155 !important;
}

html.dark #consoleSettingsSearchInput,
.dark #consoleSettingsSearchInput {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

/* Game Consoles grid items & table background */
html.dark .console-upload-item,
.dark .console-upload-item {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-color: #334155 !important;
}

html.dark .console-upload-item label,
.dark .console-upload-item label,
html.dark .console-upload-item span:not([style*="background-color"]),
.dark .console-upload-item span:not([style*="background-color"]) {
    color: #f1f5f9;
}

html.dark .console-upload-item p,
.dark .console-upload-item p {
    color: #94a3b8 !important;
}

html.dark .console-upload-item code,
.dark .console-upload-item code {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}

html.dark .console-upload-item .tag-input-container,
.dark .console-upload-item .tag-input-container {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

html.dark .console-upload-item .tag-input-container input,
.dark .console-upload-item .tag-input-container input {
    color: #f8fafc !important;
}

/* Light mode styling for console upload items */
html:not(.dark) .console-upload-item {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html:not(.dark) .console-upload-item label {
    color: #1e293b !important;
}

html:not(.dark) .console-upload-item p {
    color: #64748b !important;
}

html:not(.dark) .console-upload-item code {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

/* Ensure tag input placeholder 'Type & Enter' never clips or bleeds — clean inner input and container padding */
.tag-input-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    min-height: 40px !important;
}

.tag-input-container input,
.tag-input-container input:focus,
.tag-input-container input:focus-visible,
.tag-input-container input:active {
    min-width: 95px !important;
    flex: 1 1 95px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 3px 4px !important;
    margin: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
}





/* ---------------------------------------------------------------------------
   EmulatorJS Settings Modal Styling & Dark Mode Fixes
   --------------------------------------------------------------------------- */
#emulatorSettingsModal .modal-scroll::-webkit-scrollbar {
    width: 6px;
}
#emulatorSettingsModal .modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 4px;
}
#emulatorSettingsModal .modal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.7);
}

.dark #emulatorSettingsModal .emul-force-checkbox-label,
.dark #emulatorSettingsModal label:has(#emulForceCore),
.dark #emulatorSettingsModal label:has(#emulForceShader),
.dark #emulatorSettingsModal label:has(#emulForceVsync),
.dark #emulatorSettingsModal label:has(#emulForceWebgl2),
.dark #emulatorSettingsModal label:has(#emulForceFps),
.dark #emulatorSettingsModal label:has(#emulForceRotation) {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

.dark #emulatorSettingsModal .emul-force-checkbox-label:hover,
.dark #emulatorSettingsModal label:has(#emulForceCore):hover,
.dark #emulatorSettingsModal label:has(#emulForceShader):hover,
.dark #emulatorSettingsModal label:has(#emulForceVsync):hover,
.dark #emulatorSettingsModal label:has(#emulForceWebgl2):hover,
.dark #emulatorSettingsModal label:has(#emulForceFps):hover,
.dark #emulatorSettingsModal label:has(#emulForceRotation):hover {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* ---------------------------------------------------------------------------
   System Error Logs Modal — Dark Mode CORE Pill & Emulation Section
   --------------------------------------------------------------------------- */
#errorDetailEmulatorBadge {
    display: inline-flex !important;
    align-items: center !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

.dark #errorDetailEmulatorBadge,
html.dark #errorDetailEmulatorBadge,
body.dark #errorDetailEmulatorBadge,
.dark #errorDetailModal #errorDetailEmulatorBadge {
    background-color: #1e293b !important;
    color: #93c5fd !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.dark #errorDetailEmulatorSection,
html.dark #errorDetailEmulatorSection,
body.dark #errorDetailEmulatorSection {
    background-color: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(30, 58, 138, 0.6) !important;
}

.dark #errorDetailAttemptedCore,
html.dark #errorDetailAttemptedCore,
body.dark #errorDetailAttemptedCore {
    color: #818cf8 !important;
    font-weight: 700 !important;
}

.dark #errorDetailEjsSettingsList,
html.dark #errorDetailEjsSettingsList,
body.dark #errorDetailEjsSettingsList {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}


/* --- End: assets/compat.css --- */

/* ==========================================================================
   Game Worksheet Row Presentation & Shelves System
   ========================================================================== */

#gameRowsContainer {
    width: 100%;
}

.game-row-container {
    position: relative;
}

.game-shelf-wrapper {
    position: relative;
}

.game-shelf-arrow {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    /* Light mode: 50% transparent white background */
    background: rgba(255, 255, 255, 0.5) !important;
    color: #111827 !important;
    border: 2px solid rgba(209, 213, 219, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    padding: 0 !important;
}

@media (min-width: 640px) {
    .game-shelf-arrow {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }
}

.game-shelf-arrow:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #000000 !important;
    border-color: rgba(156, 163, 175, 0.9) !important;
    transform: translateY(-50%) scale(1.08);
}

.game-shelf-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

/* Dark mode: 50% transparent dark slate/black background */
.dark .game-shelf-arrow,
html.dark .game-shelf-arrow,
body.dark .game-shelf-arrow {
    background: rgba(15, 23, 42, 0.5) !important;
    color: #f9fafb !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

.dark .game-shelf-arrow:hover,
html.dark .game-shelf-arrow:hover,
body.dark .game-shelf-arrow:hover {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-50%) scale(1.08);
}

/* Make arrows visible when hovering anywhere over the shelf row, wrapper, scroll area or buttons */
.game-row-container:hover .game-shelf-arrow,
.game-shelf-wrapper:hover .game-shelf-arrow,
.game-shelf-scroll:hover ~ .game-shelf-arrow,
.game-shelf-arrow:hover,
.game-shelf-arrow:focus,
.game-shelf-arrow:active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.game-shelf-scroll {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 0.5rem 0.25rem 0.75rem 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

/* Hide horizontal scrollbar across all browser engines */
.game-shelf-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Maintain identical card styling & fixed width in horizontal shelf */
.game-shelf-scroll > .card-item {
    min-width: 270px;
    max-width: 290px;
    width: 280px;
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

/* Quick action bar for game worksheets */
.game-upload-bar {
    transition: all 0.2s ease;
}

.game-upload-bar.drag-over {
    border-color: #6366f1 !important;
    background-color: rgba(99, 102, 241, 0.08) !important;
}

/* Suppress redundant columns section at the bottom of the page on Game worksheets */
body.is-game-worksheet #boardColumnsContainer,
body.is-game-worksheet .board-column,
#cardBoard.is-game-board #boardColumnsContainer,
#cardBoard.is-game-board .board-column {
    display: none !important;
}

/* Redundant Move card button removal */
.js-move-btn,
.card-hover-bar .js-move-btn {
    display: none !important;
}

/* Remove Category and Calendar deadline fields in Game worksheets */
body.is-game-worksheet #cardModal #cardCategoryContainer,
body.is-game-worksheet #cardModal #cardDeadlineContainer {
    display: none !important;
}

/* Hide Number of columns and Column Names in worksheet settings modal for Game worksheets */
body.is-game-worksheet #worksheetSettingsModal #worksheetSettingsColCountContainer,
body.is-game-worksheet #worksheetSettingsModal #worksheetSettingsColsContainer,
#worksheetSettingsModal.is-game-ws-settings #worksheetSettingsColCountContainer,
#worksheetSettingsModal.is-game-ws-settings #worksheetSettingsColsContainer {
    display: none !important;
}

body.is-game-worksheet #worksheetSettingsModal #worksheetSettingsCoverHeightContainer,
#worksheetSettingsModal.is-game-ws-settings #worksheetSettingsCoverHeightContainer {
    grid-column: 1 / -1 !important;
}

/* Roll another random button styling for light and dark modes */
.game-shelf-roll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    background: rgba(243, 244, 246, 0.9);
    color: #4b5563;
    border: 1px solid rgba(209, 213, 219, 0.85);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
}

.game-shelf-roll-btn:hover {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;
    transform: rotate(18deg) scale(1.12);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.2);
}

.game-shelf-roll-btn:active {
    transform: rotate(0deg) scale(0.94);
}

/* Dark mode styling for roll button */
.dark .game-shelf-roll-btn,
html.dark .game-shelf-roll-btn,
body.dark .game-shelf-roll-btn {
    background: rgba(30, 41, 59, 0.85);
    color: #94a3b8;
    border: 1px solid rgba(51, 65, 85, 0.85);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .game-shelf-roll-btn:hover,
html.dark .game-shelf-roll-btn:hover,
body.dark .game-shelf-roll-btn:hover {
    background: rgba(49, 46, 129, 0.65);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.5);
    transform: rotate(18deg) scale(1.12);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.dark .game-shelf-roll-btn:active,
html.dark .game-shelf-roll-btn:active,
body.dark .game-shelf-roll-btn:active {
    transform: rotate(0deg) scale(0.94);
}

/* Floating Action Buttons for Game Worksheets (Bottom Right) */
#gameFloatingActionsContainer {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 40 !important;
    transition: bottom 0.3s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

@media (max-width: 640px) {
    #gameFloatingActionsContainer {
        bottom: 16px !important;
        right: 16px !important;
    }
}

body:has(#musicPlayerBar.player-floating:not(.hidden)) #gameFloatingActionsContainer {
    bottom: 190px !important;
}

body:has(#musicPlayerBar:not(.hidden):not(.player-floating):not(.player-fullscreen)) #gameFloatingActionsContainer {
    bottom: 112px !important;
}

body:has(#gameFloatingActionsContainer:not(.hidden)) #toast-container {
    bottom: 84px !important;
    right: 24px !important;
    transition: bottom 0.3s ease-in-out, right 0.3s ease-in-out;
}

/* Game Modal Dropzone */
.game-modal-dropzone {
    transition: all 0.2s ease-in-out;
}

.game-modal-dropzone.drag-over {
    border-color: #6366f1 !important;
    background-color: rgba(99, 102, 241, 0.14) !important;
    transform: scale(1.015);
}

/* Game Modal Allowed Types Pill Badge */
#gameModalAllowedTypesBadge,
.game-modal-types-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #4b5563;
    border: 1px solid rgba(199, 210, 254, 0.85);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

#gameModalAllowedTypesBadge i,
.game-modal-types-badge i {
    color: #6366f1;
}

#gameModalAllowedTypesBadge #gameModalAllowedTypesText,
.game-modal-types-badge span {
    color: #4b5563;
}

/* Dark mode: Game Modal Allowed Types Pill Badge */
.dark #gameModalAllowedTypesBadge,
html.dark #gameModalAllowedTypesBadge,
.dark .game-modal-types-badge,
html.dark .game-modal-types-badge {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.dark #gameModalAllowedTypesBadge i,
html.dark #gameModalAllowedTypesBadge i,
.dark .game-modal-types-badge i,
html.dark .game-modal-types-badge i {
    color: #818cf8 !important;
}

.dark #gameModalAllowedTypesBadge #gameModalAllowedTypesText,
html.dark #gameModalAllowedTypesBadge #gameModalAllowedTypesText,
.dark .game-modal-types-badge span,
html.dark .game-modal-types-badge span {
    color: #cbd5e1 !important;
}

/* Arrange Modal & Game Modals Background Harmony */
#gameRowOrderModal .modal-content,
#gameRowOrderModal > div,
#gameUploadModal > div {
    background-color: #ffffff;
    color: #1f2937;
}

.dark #gameRowOrderModal .modal-content,
.dark #gameRowOrderModal > div,
.dark-mode #gameRowOrderModal .modal-content,
.dark-mode #gameRowOrderModal > div,
body.dark #gameRowOrderModal > div,
.dark #gameUploadModal > div,
.dark-mode #gameUploadModal > div,
body.dark #gameUploadModal > div {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

/* Circular Arrow Buttons for Game Arrange Modal */
.game-row-arrow-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    color: #4b5563 !important;
    padding: 0 !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer !important;
    outline: none !important;
}

.dark .game-row-arrow-btn,
.dark-mode .game-row-arrow-btn,
body.dark .game-row-arrow-btn {
    border-color: #4b5563 !important;
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.game-row-arrow-btn:hover:not(:disabled) {
    border-color: #6366f1 !important;
    color: #4f46e5 !important;
    background-color: #eef2ff !important;
    transform: scale(1.08);
}

.dark .game-row-arrow-btn:hover:not(:disabled),
.dark-mode .game-row-arrow-btn:hover:not(:disabled),
body.dark .game-row-arrow-btn:hover:not(:disabled) {
    border-color: #818cf8 !important;
    color: #c7d2fe !important;
    background-color: rgba(49, 46, 129, 0.6) !important;
    transform: scale(1.08);
}

.game-row-arrow-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.game-row-arrow-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    border-color: #e5e7eb !important;
    background-color: rgba(243, 244, 246, 0.6) !important;
    color: #9ca3af !important;
    transform: none !important;
    box-shadow: none !important;
}

.dark .game-row-arrow-btn:disabled,
.dark-mode .game-row-arrow-btn:disabled,
body.dark .game-row-arrow-btn:disabled {
    border-color: #374151 !important;
    background-color: rgba(31, 41, 55, 0.5) !important;
    color: #6b7280 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Administrative Rate Limits Target Scope Card Dark Mode & Light Mode Styling
   ========================================================================== */
.rate-limit-scope-box,
#rateLimitScopeBox {
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}

.dark .rate-limit-scope-box,
.dark-mode .rate-limit-scope-box,
body.dark .rate-limit-scope-box,
html.dark .rate-limit-scope-box,
.dark #rateLimitScopeBox,
.dark-mode #rateLimitScopeBox,
body.dark #rateLimitScopeBox,
html.dark #rateLimitScopeBox {
    background-color: rgba(17, 24, 39, 0.75) !important;
    border-color: #374151 !important;
}

.dark .rate-limit-scope-box label,
.dark-mode .rate-limit-scope-box label,
body.dark .rate-limit-scope-box label,
html.dark .rate-limit-scope-box label {
    color: #d1d5db !important;
}

.dark .rate-limit-scope-box select,
.dark-mode .rate-limit-scope-box select,
body.dark .rate-limit-scope-box select,
html.dark .rate-limit-scope-box select {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

.dark .rate-limit-scope-box #rateLimitScopeNotice,
.dark-mode .rate-limit-scope-box #rateLimitScopeNotice,
body.dark .rate-limit-scope-box #rateLimitScopeNotice,
html.dark .rate-limit-scope-box #rateLimitScopeNotice {
    color: #9ca3af !important;
}

.dark .rate-limit-scope-box #rateLimitScopeNotice strong,
.dark-mode .rate-limit-scope-box #rateLimitScopeNotice strong,
body.dark .rate-limit-scope-box #rateLimitScopeNotice strong,
html.dark .rate-limit-scope-box #rateLimitScopeNotice strong {
    color: #e5e7eb !important;
}