/*
 * Plugin-wide admin design system. Started as the Sprint Dashboard's own
 * styling (v2 master prompt, Part 15) and generalized here into the shared
 * system every plugin admin page uses - scoped entirely under .vw-admin-ui
 * so it can never bleed into wp-admin core or another plugin. Everything
 * here is a plain class selector, no element-level or ID overrides that
 * could escape the wrapper (Part 17 of the UI/UX redesign spec).
 *
 * All the original .vw-sm-* component classes (cards, panels, badges,
 * tables, progress bars, inline-editable controls) are unchanged - only the
 * outer wrapper was renamed from .vw-sprint-modern. New components added for
 * the wider redesign (page headers, form cards/grids, read-only fields,
 * time fields, filter bars, DataTables chrome) live below the original
 * block, using the same .vw-sm-*/.vw-* naming convention.
 */
.vw-admin-ui {
    max-width: 1300px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #2c3338;
}

.vw-admin-ui h1.vw-sm-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
}
.vw-admin-ui p.vw-sm-subtitle {
    color: #6b7280;
    margin: 0 0 24px;
}

/* ---------- Stat cards ---------- */
.vw-sm-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.vw-sm-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.vw-sm-card .vw-sm-card-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}
.vw-sm-card .vw-sm-card-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 4px;
}
.vw-sm-card.vw-sm-accent-blue .vw-sm-card-value { color: #2563eb; }
.vw-sm-card.vw-sm-accent-green .vw-sm-card-value { color: #16a34a; }
.vw-sm-card.vw-sm-accent-orange .vw-sm-card-value { color: #d97706; }
.vw-sm-card.vw-sm-accent-red .vw-sm-card-value { color: #dc2626; }
.vw-sm-card.vw-sm-accent-purple .vw-sm-card-value { color: #7c3aed; }
.vw-sm-card .vw-sm-badge { display: block; width: max-content; margin-top: 6px; }

/* ---------- Section panels ---------- */
.vw-sm-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.vw-sm-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.vw-sm-panel-header h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

/* ---------- Tables ---------- */
.vw-sm-table-wrap { overflow-x: auto; }
table.vw-sm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.vw-sm-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    padding: 8px 10px;
    border-bottom: 2px solid #eef0f2;
    white-space: nowrap;
}
table.vw-sm-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #f1f2f4;
    vertical-align: middle;
}
table.vw-sm-table tbody tr:hover { background: #fafbfc; }

/* ---------- Badges ---------- */
.vw-sm-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.vw-sm-badge-planning { background: #fef3c7; color: #92400e; }
.vw-sm-badge-active { background: #d1fae5; color: #065f46; }
.vw-sm-badge-closed { background: #e5e7eb; color: #374151; }

.vw-sm-badge-completed { background: #d1fae5; color: #065f46; }
.vw-sm-badge-inprogress, .vw-sm-badge-pending { background: #dbeafe; color: #1e40af; }
.vw-sm-badge-blocked { background: #fee2e2; color: #991b1b; }
.vw-sm-badge-carry-forward { background: #fef3c7; color: #92400e; }
.vw-sm-badge-cancelled { background: #f3f4f6; color: #6b7280; }

.vw-sm-badge-low { background: #f3f4f6; color: #4b5563; }
.vw-sm-badge-medium { background: #dbeafe; color: #1e40af; }
.vw-sm-badge-high { background: #ffedd5; color: #9a3412; }
.vw-sm-badge-critical { background: #fee2e2; color: #991b1b; }

/* ---------- Progress bar ---------- */
.vw-sm-progress {
    background: #eef0f2;
    border-radius: 999px;
    height: 8px;
    width: 100%;
    min-width: 80px;
    overflow: hidden;
}
.vw-sm-progress-bar {
    height: 100%;
    background: #2563eb;
    border-radius: 999px;
}
.vw-sm-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vw-sm-progress-row .vw-sm-progress { flex: 1; }
.vw-sm-progress-row .vw-sm-progress-pct { font-size: 12px; color: #6b7280; min-width: 34px; text-align: right; }

/* ---------- Shared label + progress-bar + value row (Task Status, AI
   category usage, Rework, Employee Workload, Planned vs Completed) - one
   class instead of the same grid-template-columns/gap repeated inline at
   every call site, so a long person/category name gets the same
   ellipsis-on-overflow treatment everywhere instead of silently wrapping or
   clipping wherever a particular render function forgot to handle it. */
.vw-sm-bar-row {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.vw-sm-bar-row > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .vw-sm-bar-row { grid-template-columns: 96px 1fr auto; }
}

/* ---------- Inline editable controls ---------- */
.vw-sm-inline-select {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
    background: #fff;
}
.vw-sm-inline-number {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
    width: 60px;
}

/* ---------- Tabs (Bootstrap nav-tabs already provide the mechanics; this
   just restyles them a little to match the rest of the dashboard) ---------- */
.vw-admin-ui .nav-tabs { border-bottom: 1px solid #e5e7eb; margin-bottom: 18px; }
.vw-admin-ui .nav-tabs .nav-link {
    color: #6b7280;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
}
.vw-admin-ui .nav-tabs .nav-link.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: transparent;
}

/* ---------- Empty state ---------- */
.vw-sm-empty {
    text-align: center;
    color: #9ca3af;
    padding: 40px 20px;
    font-size: 13px;
}

/* ---------- Toast ---------- */
#vw-sm-toast {
    position: fixed;
    top: 40px;
    right: 24px;
    z-index: 99999;
    background: #111827;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: none;
}
#vw-sm-toast.vw-sm-toast-error { background: #991b1b; }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
    /* .vw-sa-heatmap (Rework Root-Cause's Module x AI-Category grid) is
       excluded on purpose: stacking a real grid into one key/value row per
       cell turns a quick-scan heatmap into a long, repetitive list of
       "Category: N" lines per module - it stays a real table and scrolls
       horizontally instead, inside the .vw-sm-table-wrap it already sits in. */
    table.vw-sm-table:not(.vw-sa-heatmap) thead { display: none; }
    table.vw-sm-table:not(.vw-sa-heatmap),
    table.vw-sm-table:not(.vw-sa-heatmap) tbody,
    table.vw-sm-table:not(.vw-sa-heatmap) tr,
    table.vw-sm-table:not(.vw-sa-heatmap) td {
        display: block;
        width: 100%;
    }
    table.vw-sm-table:not(.vw-sa-heatmap) tr {
        border: 1px solid #eef0f2;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 6px 0;
    }
    table.vw-sm-table:not(.vw-sa-heatmap) td {
        border-bottom: none;
        padding: 4px 12px;
    }
    table.vw-sm-table:not(.vw-sa-heatmap) td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        color: #9ca3af;
        margin-bottom: 2px;
    }
    table.vw-sa-heatmap th, table.vw-sa-heatmap td { white-space: nowrap; }
}

/* =====================================================================
   Admin UI/UX redesign additions - page headers, form cards/grids,
   read-only fields, time fields, filter bars, DataTables chrome. Every
   selector below stays under .vw-admin-ui, same rule as everything above.
   ===================================================================== */

/* ---------- Page header ---------- */
.vw-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.vw-page-header-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 2px;
    color: #1f2328;
}
.vw-page-header-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    max-width: 640px;
}
.vw-page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ---------- Form card (semantic alias of .vw-sm-panel for form contexts) ---------- */
/* Padding/margins deliberately tight - Part 10 of the redesign brief
   ("reduce vertical scrolling") means every card's own chrome (padding,
   header, gap to the next card) has to earn its keep, not just the fields
   inside it. A section with only one short field visible (e.g. Progress
   when a task isn't Completed) should still read as compact, not stranded
   in a half-empty box. */
.vw-form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
}
.vw-form-card-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f2f4;
}
.vw-form-card-header h2, .vw-form-card-header h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px;
    color: #1f2328;
}
.vw-form-card-header p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

/* ---------- Form grid ---------- */
.vw-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}
.vw-form-grid-tight {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.vw-form-grid-full {
    grid-column: 1 / -1;
}

/* ---------- Form field ---------- */
.vw-form-field { display: flex; flex-direction: column; gap: 4px; }
.vw-form-field label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}
.vw-form-field-required label::after {
    content: " *";
    color: #dc2626;
}
.vw-admin-ui .vw-help-text {
    font-size: 11px;
    color: #9ca3af;
    margin: 2px 0 0;
}
.vw-admin-ui .vw-form-field input.form-control,
.vw-admin-ui .vw-form-field select.form-control,
.vw-admin-ui .vw-form-field textarea.form-control {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: none;
}
.vw-admin-ui .vw-form-field input.form-control:focus,
.vw-admin-ui .vw-form-field select.form-control:focus,
.vw-admin-ui .vw-form-field textarea.form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ---------- Modal (Sprint module consolidation: Create Sprint, Edit Sprint Task) ---------- */
.vw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
}
/* A SweetAlert confirm/toast triggered from inside a .vw-modal-overlay (e.g.
   "Add X to this team?") must sit above it - sweetalert.css's own z-indexes
   (10000/99999) are both lower, so it rendered behind the modal until the
   modal was removed. This file loads after sweetalert.css on every admin
   page, so these simply win. */
.sweet-overlay { z-index: 100001; }
.sweet-alert { z-index: 100002; }
.vw-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.25);
}
.vw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
}
.vw-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.vw-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}
.vw-modal-close:hover { color: #111827; }
.vw-modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vw-modal-body .vw-form-field { margin-bottom: 0; }
.vw-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e5e7eb;
}
.vw-modal-notice {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
}
.vw-modal-task-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
@media (max-width: 600px) {
    .vw-modal { max-width: 100%; }
}
/* Select2 suggestions inside a modal (Create Task "Assign Members"): the
   widget mounts its dropdown into #vw-create-task-overlay via dropdownParent,
   so keep the open dropdown above the modal card. */
.vw-modal-overlay .select2-container--open { z-index: 100001; }

/* ---------- Read-only field (contextual/computed values that must never
   look editable - Project name on Update Task, Actual Hours, etc.) ---------- */
.vw-readonly-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8f9fa;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 0px 12px;
    font-size: 13px;
    color: #4b5563;
    min-height: 34px;
}
.vw-readonly-field .vw-readonly-note {
    font-size: 11px;
    color: #9ca3af;
}

/* ---------- Form actions bar ---------- */
/* Sticky rather than fixed: on a form short enough to fit in the viewport
   this sits exactly where it always did (no visible change); on a long
   form (Update Task, Create Task, the EOD entry page) it docks to the
   bottom of the viewport once you'd otherwise have scrolled past it, so
   the primary action is always one click away instead of a scroll-then-
   click every time - the "clearly visible action section" the redesign
   brief asked for, without the "annoying floating UI" it also warned
   against (sticky only ever activates when it would otherwise leave view). */
.vw-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 4px;
    margin-top: 4px;
    border-top: 1px solid #f1f2f4;
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 5;
}
@media (max-width: 600px) {
    .vw-form-actions { flex-direction: column-reverse; align-items: stretch; }
    .vw-form-actions .btn { width: 100%; }
}

/* ---------- Time field (Estimated hh:mm compact pair) ---------- */
.vw-time-field {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vw-time-field input.form-control {
    width: 64px;
    text-align: center;
    flex: none;
}
.vw-time-field .vw-time-sep { color: #9ca3af; font-weight: 600; }

/* ---------- Filter bar ---------- */
.vw-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.vw-filter-bar .vw-form-field { min-width: 180px; }

/* ---------- DataTables chrome reskin (CSS-only, no JS/behavior change) ---------- */
.vw-admin-ui .dataTables_wrapper { font-size: 13px; }
.vw-admin-ui table.dataTable {
    border-collapse: collapse !important;
    border: 1px solid #e5e7eb;
}
.vw-admin-ui table.dataTable thead th {
    background: #f8f9fa;
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #eef0f2 !important;
    padding: 10px;
}
/* DataTables draws its own sort-direction indicator on a sortable header
   via :before/:after content (an up arrow AND a down arrow, one dimmed and
   one solid depending on state). A padding-only fix here previously assumed
   that indicator just needed more room; it didn't resolve the garbled/
   overlapping icon actually reported, so this instead fully replaces it:
   every one of DataTables' own :before/:after icon layers is killed
   outright, then exactly one small arrow is drawn per state (unsorted,
   ascending, descending) - explicitly positioned and sized, nothing left
   to DataTables' own bundled math for it. */
.vw-admin-ui table.dataTable thead th.sorting:before,
.vw-admin-ui table.dataTable thead th.sorting:after,
.vw-admin-ui table.dataTable thead th.sorting_asc:before,
.vw-admin-ui table.dataTable thead th.sorting_asc:after,
.vw-admin-ui table.dataTable thead th.sorting_desc:before,
.vw-admin-ui table.dataTable thead th.sorting_desc:after,
.vw-admin-ui table.dataTable thead th.sorting_asc_disabled:before,
.vw-admin-ui table.dataTable thead th.sorting_asc_disabled:after,
.vw-admin-ui table.dataTable thead th.sorting_desc_disabled:before,
.vw-admin-ui table.dataTable thead th.sorting_desc_disabled:after {
    content: none !important;
}
.vw-admin-ui table.dataTable thead th.sorting,
.vw-admin-ui table.dataTable thead th.sorting_asc,
.vw-admin-ui table.dataTable thead th.sorting_desc,
.vw-admin-ui table.dataTable thead th.sorting_asc_disabled,
.vw-admin-ui table.dataTable thead th.sorting_desc_disabled {
    /* Confirmed directly against the actual jquery.dataTables.css 1.10.25
       (fetched and inspected, rather than assumed): its sort indicator is a
       PNG sprite via background-image (sort_both.png/sort_asc.png/
       sort_desc.png), each declared with !important - NOT the pseudo-
       element unicode content the earlier attempt targeted, which is why
       that attempt changed nothing. !important here is required to beat
       DataTables' own !important on the .sorting_asc/.sorting_desc rules. */
    background-image: none !important;
    cursor: pointer;
    position: relative;
    padding-right: 22px !important;
}
.vw-admin-ui table.dataTable thead th.sorting:after,
.vw-admin-ui table.dataTable thead th.sorting_asc:after,
.vw-admin-ui table.dataTable thead th.sorting_desc:after {
    content: "\2195" !important;
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    /* Explicit plain system font, not inherited - a stray icon-font
       (Font Awesome/dashicons) somewhere in the cascade remapping this
       character was the leading suspect once the padding-only fix turned
       out not to be enough. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 11px;
    font-weight: normal;
    line-height: 1;
    opacity: 0.35;
    text-transform: none;
    letter-spacing: normal;
}
.vw-admin-ui table.dataTable thead th.sorting_asc:after {
    content: "\2191" !important;
    opacity: 1;
    color: #2563eb;
}
.vw-admin-ui table.dataTable thead th.sorting_desc:after {
    content: "\2193" !important;
    opacity: 1;
    color: #2563eb;
}
.vw-admin-ui table.dataTable tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid #f1f2f4;
    vertical-align: middle;
}
.vw-admin-ui table.dataTable.stripe tbody tr.odd,
.vw-admin-ui table.dataTable.display tbody tr.odd { background: #fafbfc; }
.vw-admin-ui .dataTables_wrapper .dataTables_length select,
.vw-admin-ui .dataTables_wrapper .dataTables_filter input {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
}
.vw-admin-ui .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    padding: 4px 10px !important;
    margin-left: 2px !important;
    border: 1px solid transparent !important;
}
.vw-admin-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
.vw-admin-ui .dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: #6b7280;
}
.vw-admin-ui .dt-buttons .btn {
    border-radius: 6px;
    font-size: 12px;
    padding: 5px 12px;
}

/* ---------- Misc emphasis helpers ---------- */
.vw-admin-ui .vw-title-input { font-size: 15px; font-weight: 600; }
.vw-admin-ui .vw-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;
}
.vw-admin-ui .vw-radio-inline { display: flex; gap: 16px; align-items: center; }
.vw-admin-ui .vw-radio-inline label { font-weight: normal; display: flex; align-items: center; gap: 5px; }

/* ---------- EOD entry page (vw_create_eodin.php) ---------- */
/* Column-header row above each project's task rows - was a plain bold
   label row + <hr>; now reads like the .vw-sm-table header it visually
   mirrors, without becoming an actual <table> (the JS's
   .closest('.addeodtaskdiv') / .parent() relationships depend on the
   existing div structure, so this stays div-based). */
.vw-admin-ui .vw-eod-header-row {
    border-bottom: 1px solid #eef0f2;
    padding-bottom: 8px;
    margin-bottom: 4px !important;
}
.vw-admin-ui .vw-eod-header-row label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    margin: 0;
}
.vw-admin-ui .vw-eod-header-row label strong { font-weight: 600; }

/* Task title + inline Project/Sprint tag, in the flattened single-list
   layout (no more per-project header repeated above every group of rows). */
.vw-admin-ui .vw-eod-task-title { font-weight: 600; }
.vw-admin-ui .vw-eod-task-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

/* One task's editable row within a project card. */
.vw-admin-ui .addeodtaskdiv {
    border: 1px solid #eef0f2 !important;
    border-radius: 8px;
    background: #fff;
}
.vw-admin-ui .addeodtaskdiv .form-group { margin-bottom: 0; }

/* The AI Used?/category/Result/Rework sub-panel, shown once a task's own
   "Mark as Complete" checkbox is ticked. */
.vw-admin-ui .vw_sprint_ai_fields {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 10px;
}
.vw-admin-ui .vw_sprint_ai_fields label { font-size: 12px; }
/* Estimated/Actual Hours are always readonly on this page - make that
   visually obvious rather than looking like a normal editable input. */
.vw-admin-ui .eod_estimated_hours,
.vw-admin-ui .eod_actual_hours {
    background: #f8f9fa !important;
    border-style: dashed !important;
    color: #4b5563;
}

/* ---------- Sprint module quick navigation (shared across every Sprint
   page - Teams, Sprints, Employee Summary, Sprint History, Team Dashboard,
   Sprint Dashboard, Sprint Detail - rendered by the single
   vw_render_sprint_nav() helper in classes/general_calls.php so the tab
   bar can never drift out of sync between pages). ---------- */
.vw-admin-ui .vw-sprint-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    overflow-x: auto;
}
.vw-admin-ui .vw-sprint-nav-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    flex-shrink: 0;
    padding-right: 12px;
    border-right: 1px solid #eef0f2;
    white-space: nowrap;
}
.vw-admin-ui .vw-sprint-nav-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.vw-admin-ui .vw-sprint-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.vw-admin-ui .vw-sprint-nav-tab:hover,
.vw-admin-ui .vw-sprint-nav-tab:focus {
    background: #f8f9fa;
    color: #1f2328;
    text-decoration: none;
}
.vw-admin-ui .vw-sprint-nav-tab-active,
.vw-admin-ui .vw-sprint-nav-tab-active:hover,
.vw-admin-ui .vw-sprint-nav-tab-active:focus {
    background: #eff6ff;
    color: #2563eb;
}
.vw-admin-ui .vw-sprint-nav-tab i { font-size: 11px; }

.vw-admin-ui .vw-sprint-breadcrumb {
    font-size: 12px;
    color: #9ca3af;
    margin: -8px 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.vw-admin-ui .vw-sprint-breadcrumb a { color: #6b7280; text-decoration: none; }
.vw-admin-ui .vw-sprint-breadcrumb a:hover { color: #2563eb; text-decoration: underline; }
.vw-admin-ui .vw-sprint-breadcrumb i { font-size: 9px; color: #d1d5db; }
.vw-admin-ui .vw-sprint-breadcrumb-current { color: #374151; font-weight: 600; }

/* ---------- AJAX-paginated table footer (shared: Sprints list, Sprint
   Dashboard admin table - anywhere a table is fetched a page at a time
   instead of rendering every row up front). ---------- */
.vw-admin-ui .vw-ajax-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f2f4;
    font-size: 12px;
    color: #6b7280;
}
.vw-admin-ui .vw-ajax-pagination-info { min-width: 90px; text-align: center; }
.vw-admin-ui .vw-ajax-pagination .btn[disabled] { opacity: 0.45; cursor: default; }
.vw-admin-ui .vw-ajax-loading { position: relative; min-height: 80px; }
.vw-admin-ui .vw-ajax-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
}

/* ---------- Responsive: new components ---------- */
@media (max-width: 782px) {
    .vw-form-grid { grid-template-columns: 1fr; }
    .vw-checkbox-grid { grid-template-columns: 1fr; }
    .vw-page-header { flex-direction: column; }
    .vw-page-actions { width: 100%; }
    .vw-page-actions .btn { flex: 1; }
    .vw-sprint-nav-label { display: none; }
}

/* =====================================================================
   Teams page (vw_teams.php) - card-based team/member management UI.
   Pure presentation: every form field name, action name and nonce in the
   template is unchanged, this only restyles the markup around them.
   ===================================================================== */

.vw-admin-ui.vw-teams-page .vw-page-header-title i { color: #2563eb; margin-right: 6px; }

/* ---------- Create Team hero ---------- */
.vw-teams-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 60%);
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.vw-teams-hero-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.vw-teams-hero-body { flex: 1; min-width: 260px; }
.vw-teams-hero-body h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1f2328;
}
.vw-teams-hero-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.vw-teams-hero-form .vw-form-field { min-width: 260px; }

/* ---------- Team cards grid ---------- */
.vw-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}
.vw-team-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease;
    overflow: hidden;
}
.vw-team-card:hover {
    border-color: #d7dbe0;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
}
.vw-team-card-header { padding: 16px 18px 14px; border-bottom: 1px solid #f1f2f4; }
.vw-team-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.vw-team-name {
    font-size: 16px;
    font-weight: 700;
    color: #1f2328;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vw-team-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Status badge */
.vw-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.vw-status-dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; display: inline-block; }
.vw-status-badge-active { background: #d1fae5; color: #065f46; }
.vw-status-badge-active .vw-status-dot { background: #10b981; }
.vw-status-badge-inactive { background: #f3f4f6; color: #6b7280; }
.vw-status-badge-inactive .vw-status-dot { background: #9ca3af; }

/* Team Leader summary line */
.vw-team-leader-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #4b5563;
    margin-top: 10px;
}
.vw-team-leader-line i { color: #d97706; font-size: 12px; }
.vw-team-no-leader { color: #9ca3af; font-style: italic; }

/* Inline rename form */
.vw-inline-rename-form { display: flex; align-items: center; gap: 6px; }
.vw-inline-rename-form input.vw-sm-inline-select { width: 120px; }

/* Icon buttons (rename save, activate/deactivate, leader toggle, remove) */
.vw-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vw-icon-btn:hover { background: #f8f9fa; border-color: #d1d5db; color: #1f2328; }
.vw-icon-btn-success { color: #16a34a; border-color: #bbf7d0; }
.vw-icon-btn-success:hover { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.vw-icon-btn-warning { color: #d97706; border-color: #fde68a; }
.vw-icon-btn-warning:hover { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
.vw-icon-btn-danger { color: #9ca3af; }
.vw-icon-btn-danger:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

/* ---------- Members list ---------- */
.vw-team-members { padding: 14px 18px; flex: 1; }
.vw-team-members-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 8px;
}
.vw-team-member-count {
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 11px;
    font-weight: 700;
}
.vw-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f7f8f9;
}
.vw-member-row:last-child { border-bottom: none; }
.vw-member-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vw-member-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vw-member-avatar-leader { background: #fef3c7; color: #92400e; }
.vw-member-name {
    font-size: 13px;
    color: #1f2328;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vw-member-leader-tag {
    font-size: 10px;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.vw-member-leader-tag i { font-size: 9px; }
.vw-member-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ---------- Add/move member footer ---------- */
.vw-team-card-footer {
    padding: 12px 18px;
    background: #f8f9fa;
    border-top: 1px solid #f1f2f4;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.vw-team-card-footer select.form-control { font-size: 12.5px; }
.vw-team-leader-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 7px 10px;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
}
.vw-team-leader-check i { font-size: 10px; }
.vw-team-card-footer .btn { flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
    .vw-teams-grid { grid-template-columns: 1fr; }
    .vw-teams-hero-form { width: 100%; }
    .vw-teams-hero-form .vw-form-field { width: 100%; }
    .vw-team-card-title-row { flex-direction: column; align-items: flex-start; }
    .vw-team-card-actions { width: 100%; justify-content: flex-start; }
    .vw-team-card-footer { flex-direction: column; align-items: stretch; }
    .vw-team-card-footer .btn { width: 100%; }
}

/* =====================================================================
   Sprints page (vw_sprints.php) - pure presentation on top of the
   existing Create/Edit/Close-Sprint form and table; every form field
   name, action name and nonce is unchanged.
   ===================================================================== */

.vw-admin-ui.vw-sprints-page .vw-page-header-title i { color: #2563eb; margin-right: 6px; }

.vw-sprint-form-card .vw-form-card-header p {
    margin-top: 2px;
}

/* ---------- Create/Edit Sprint form: single compact row ---------- */
.vw-sprint-form-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.vw-sprint-form-row .vw-form-field { margin-bottom: 0; }
.vw-sprint-form-row .vw-form-field input.form-control,
.vw-sprint-form-row .vw-form-field select.form-control,
.vw-sprint-form-row .vw-form-field .vw-readonly-field { width: 100%; }

.vw-sprint-field-project { flex: 1 1 180px; min-width: 160px; }
.vw-sprint-field-name { flex: 3 1 260px; min-width: 220px; }
.vw-sprint-field-no { flex: 0 0 68px; }
.vw-sprint-field-no input { text-align: center; }
.vw-sprint-field-date { flex: 1 1 155px; min-width: 145px; }
.vw-sprint-field-status { flex: 1 1 140px; min-width: 130px; }

.vw-sprint-form-goal-row { margin-bottom: 4px; }
.vw-sprint-field-goal { flex: 1 1 auto; min-width: 240px; }
.vw-sprint-field-goal textarea.form-control {
    resize: vertical;
    min-height: 34px;
}
.vw-sprint-goal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.vw-sprint-form-hint {
    margin: 2px 0 0;
}

/* ---------- "All Sprints" card header + project filter ---------- */
.vw-sprint-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 12px;
}
.vw-sprint-list-controls {
    display: flex;
    align-items: flex-end;
    gap: 10px 16px;
    flex-wrap: wrap;
}
.vw-sprint-project-filter { min-width: 220px; }
.vw-sprint-project-filter select { font-size: 12.5px; }
.vw-sprint-search { min-width: 200px; }

/* ---------- Sprint name cell (Project column removed - project now
   shown as a muted subtitle here, and used to drive the filter above) ---------- */
.vw-sprint-name-cell { font-weight: 600; color: #1f2328; }
.vw-sprint-project-sub {
    font-size: 11.5px;
    color: #9ca3af;
    margin-top: 2px;
}

.vw-sprint-actions { white-space: nowrap; }
.vw-sprint-actions .btn { margin-right: 4px; }
.vw-sprint-actions .btn:last-child { margin-right: 0; }
.vw-sprint-actions .btn i { margin-right: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
    .vw-sprint-list-header { flex-direction: column; align-items: stretch; }
    .vw-sprint-list-controls { flex-direction: column; align-items: stretch; width: 100%; }
    .vw-sprint-project-filter,
    .vw-sprint-search { width: 100%; min-width: 0; }
}
@media (max-width: 900px) {
    .vw-sprint-field-project,
    .vw-sprint-field-name,
    .vw-sprint-field-no,
    .vw-sprint-field-date,
    .vw-sprint-field-status { flex: 1 1 auto; }
}
@media (max-width: 600px) {
    .vw-sprint-field-project,
    .vw-sprint-field-name,
    .vw-sprint-field-no,
    .vw-sprint-field-date,
    .vw-sprint-field-status { flex: 1 1 100%; min-width: 0; }
    .vw-sprint-form-goal-row { flex-direction: column; align-items: stretch; }
    .vw-sprint-goal-actions { justify-content: flex-end; }
}

/* ---------- Auto-Compiled Sprint Retrospective (Sprint Detail's "Retrospective"
   tab): first print stylesheet in this plugin, so kept deliberately minimal
   and precisely scoped. The Print button (templates/vw_sprint_detail.php's
   own inline JS) adds body.vw-printing-retrospective right before
   window.print() and removes it on the browser's 'afterprint' event -
   nothing here fires unless that exact flow is in progress. */
body.vw-printing-retrospective #adminmenumain,
body.vw-printing-retrospective #wpadminbar,
body.vw-printing-retrospective #wpfooter,
body.vw-printing-retrospective .vw-sprint-nav,
body.vw-printing-retrospective .nav-tabs,
body.vw-printing-retrospective h1.vw-sm-title,
body.vw-printing-retrospective p.vw-sm-subtitle,
body.vw-printing-retrospective .tab-pane:not(#vw-sd-retrospective),
body.vw-printing-retrospective .vw-retrospective-panel .vw-page-actions {
    display: none !important;
}
body.vw-printing-retrospective #vw-sd-retrospective {
    display: block !important;
    opacity: 1 !important;
}
@media print {
    body.vw-printing-retrospective #wpcontent { margin-left: 0 !important; }
}

/* ---------- Reports: Historical Reports / Sprint Detail view toggle ----------
   The toggle chrome itself is shared page furniture (used regardless of
   which view is active), so it stays here; the Historical Reports view's
   own content design lives in assets/css/vw_sprint_reports_history.css
   (scoped under .vw-shr), ported from the approved mockup. */
.vw-sr-view-toggle {
    display: inline-flex;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 16px;
}
.vw-sr-view-toggle button {
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
}
.vw-sr-view-toggle button.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}
.vw-sr-view { display: none; }
.vw-sr-view.active { display: block; }