/* =====================================================================
         Importação de planilha do Monday — tela "Importar Monday".
         Fluxo em 3 passos dentro da mesma <section>: upload -> revisão ->
         preview de calendário + confirmação. Reaproveita variáveis de
         superfície/cor já definidas em :root (--surf-*, --c-*-text, --ok,
         --warn, --bad) para não introduzir paleta nova.
      ===================================================================== */
      .importSteps {
        display: flex;
        gap: 8px;
        margin-bottom: 18px;
        flex-wrap: wrap;
      }
      .importStep {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--surf-2);
        border: 1px solid var(--line-soft);
        color: var(--mut);
        font-size: 13px;
        font-weight: 600;
      }
      .importStep.active {
        background: rgba(var(--accent-rgb), 0.16);
        border-color: var(--blue);
        color: var(--txt-strong);
      }
      .importStep.done {
        color: var(--c-ok-text);
        border-color: var(--ok);
      }
      .importStep b {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--surf-3);
        font-size: 11px;
      }
      .importDropzone {
        border: 2px dashed var(--line);
        border-radius: var(--radius);
        background: var(--surf-1);
        padding: 48px 24px;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease;
      }
      .importDropzone:hover,
      .importDropzone.dragOver {
        border-color: var(--blue);
        background: var(--surf-3);
      }
      .importDropzone i {
        font-size: 38px;
        color: var(--mut);
        display: block;
        margin-bottom: 12px;
      }
      .importDropzone b {
        color: var(--txt-strong);
      }
      .importDropzone small {
        display: block;
        margin-top: 6px;
        color: var(--mut);
      }
      .importSummaryCards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin: 18px 0;
      }
      .importTable {
        width: 100%;
        border-collapse: collapse;
        background: var(--surf-1);
        border: 1px solid var(--line-soft);
        border-radius: var(--radius);
        overflow: hidden;
        font-size: 13px;
      }
      .importTable th {
        background: var(--surf-3);
        text-align: left;
        padding: 10px 12px;
        font-size: 12px;
        color: var(--mut);
        font-weight: 700;
        border-bottom: 1px solid var(--line-soft);
        white-space: nowrap;
      }
      .importTable td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--line-soft);
        vertical-align: top;
      }
      .importTable tr:last-child td {
        border-bottom: none;
      }
      .importTable select,
      .importTable .input {
        width: 100%;
        min-width: 150px;
      }
      .importTaskName {
        font-weight: 600;
        color: var(--txt-strong);
      }
      .importTaskMeta {
        color: var(--mut);
        font-size: 12px;
        margin-top: 2px;
      }
      .importRow.hasConflict {
        background: rgba(251, 113, 133, 0.08);
      }
      .importRow.hasOverflow td:first-child {
        box-shadow: inset 3px 0 0 var(--warn);
      }
      .importRow.hasConflict td:first-child {
        box-shadow: inset 3px 0 0 var(--bad);
      }
      .importBadge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
      }
      .importBadge.ok {
        background: rgba(34, 197, 94, 0.14);
        color: var(--c-ok-text);
      }
      .importBadge.warn {
        background: rgba(250, 204, 21, 0.16);
        color: var(--c-warn-text);
      }
      .importBadge.bad {
        background: rgba(251, 113, 133, 0.16);
        color: var(--c-bad-text);
      }
      .importCalWrap {
        overflow-x: auto;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius);
        background: var(--surf-1);
      }
      .importCalTable {
        border-collapse: collapse;
        width: 100%;
        font-size: 12px;
      }
      .importCalTable th,
      .importCalTable td {
        border: 1px solid var(--line-soft);
        padding: 6px 8px;
        text-align: center;
        white-space: nowrap;
      }
      .importCalTable th {
        background: var(--surf-3);
        color: var(--mut);
        position: sticky;
        top: 0;
      }
      .importCalTable td:first-child,
      .importCalTable th:first-child {
        text-align: left;
        position: sticky;
        left: 0;
        background: var(--surf-5);
        z-index: 1;
        min-width: 160px;
      }
      .importCell {
        border-radius: 6px;
        padding: 3px 4px;
        font-weight: 700;
        font-size: 11px;
      }
      .importCell.ok {
        background: rgba(34, 197, 94, 0.18);
        color: var(--c-ok-text);
      }
      .importCell.conflict {
        background: rgba(251, 113, 133, 0.22);
        color: var(--c-bad-text);
      }
      .importCell.weekendCell {
        background: var(--surf-3);
        color: var(--mut);
      }
      .importLegend {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin: 12px 0;
        font-size: 12px;
        color: var(--mut);
      }
      .importLegend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .importLegend i.dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 3px;
      }
      .importActionsBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 18px;
        gap: 12px;
        flex-wrap: wrap;
      }
      .importOverflowList {
        list-style: none;
        margin: 8px 0 0;
        padding: 0;
        font-size: 12px;
        color: var(--c-warn-text);
      }
      .importOverflowList li {
        padding: 4px 0;
      }
      /* Sub-grade de distribuição manual de horas por dia */
      .importDayGrid {
        display: none;
      }
      .importDayGrid.open {
        display: table-row;
      }
      /* Wrapper com borda azul à esquerda + fundo distinto + separadores
         visuais claros para não se confundir com as linhas de tarefa */
      .importDayGridInner {
        padding: 0;
        border-left: 4px solid var(--blue);
        background: var(--surf-3);
        box-shadow: inset 0 2px 0 rgba(var(--accent-rgb), 0.18),
                    inset 0 -2px 0 rgba(var(--accent-rgb), 0.1);
      }
      .importDayGridBanner {
        background: rgba(var(--accent-rgb), 0.1);
        border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
        padding: 10px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
      }
      .importDayGridBanner h5 {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--blue);
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .importDayGridHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: 8px;
      }
      .importDayGridHeader h5 {
        margin: 0;
        font-size: 13px;
        color: var(--txt-strong);
      }
      .importDayTotals {
        font-size: 12px;
        color: var(--mut);
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .importDayTotals b {
        color: var(--txt-strong);
      }
      .importDayTotals .underflow {
        color: var(--c-warn-text);
        font-weight: 700;
      }
      .importDayGridBody {
        padding: 14px 18px 16px;
      }
      .importDayRows {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
        gap: 8px;
      }
      .importDayRow {
        background: var(--surf-1);
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .importDayRow.vacation {
        opacity: 0.45;
        border-style: dashed;
        pointer-events: none;
      }
      .importDayRow.weekend {
        background: var(--surf-3);
        border-style: dashed;
      }
      .importDayLabel {
        flex: 1;
        font-size: 12px;
      }
      .importDayLabel b {
        display: block;
        color: var(--txt-strong);
      }
      .importDayLabel small {
        color: var(--mut);
      }
      /* Horas estimadas da tarefa (Passo 2 da importação) — editável para
         corrigir valores errados da planilha ou redistribuições manuais
         entre tarefas. */
      .importEffortInput {
        width: 52px;
        text-align: center;
        padding: 2px 4px;
        font-size: 12px;
        font-weight: 700;
        background: var(--surf-5);
        border: 1px solid var(--line-soft);
        border-radius: 6px;
        color: var(--txt-strong);
        margin: 0 3px;
      }
      .importEffortInput:focus {
        outline: 2px solid var(--blue);
        outline-offset: 1px;
        border-color: var(--blue);
      }
      .importDayInput {
        width: 56px;
        text-align: center;
        padding: 4px 6px;
        font-size: 13px;
        font-weight: 700;
        background: var(--surf-5);
        border: 1px solid var(--blue);
        border-radius: 8px;
        color: var(--txt-strong);
      }
      .importDayInput:focus {
        outline: 2px solid var(--blue);
        outline-offset: 1px;
      }
      .importDayInput:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        border-color: var(--line);
      }
      .importDayAddRow {
        display: flex;
        gap: 8px;
        margin-top: 14px;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 12px;
        border-top: 1px dashed var(--line-soft);
      }
      .importExpandBtn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 999px;
        background: rgba(var(--accent-rgb), 0.14);
        border: 1px solid var(--blue);
        color: var(--blue);
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.12s, box-shadow 0.12s;
      }
      .importExpandBtn:hover {
        background: rgba(var(--accent-rgb), 0.24);
        color: var(--txt-strong);
        box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
      }
      .importExpandBtn.active {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
        font-weight: 700;
      }
      /* Botões de ação por linha da importação (adicionar consultor /
         remover tarefa) — separados com espaçamento e cores distintas para
         não parecerem um único bloco colado. */
      .importRowActions {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
      }
      /* Linha de tarefa com a sub-grade aberta fica levemente destacada */
      .importRow.expanded {
        background: rgba(var(--accent-rgb), 0.06);
        box-shadow: inset 4px 0 0 var(--blue);
      }
      .importConflictPanel {
        background: rgba(251, 113, 133, 0.08);
        border: 1px solid var(--bad);
        border-radius: var(--radius);
        padding: 16px 18px;
        margin: 8px 0 18px;
      }
      .importConflictPanel h4 {
        margin: 0 0 10px;
        color: var(--c-bad-text);
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .importConflictList {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 8px;
      }
      .importConflictItem {
        background: var(--surf-1);
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 12.5px;
      }
      .importConflictItem b {
        color: var(--txt-strong);
        display: block;
        margin-bottom: 2px;
      }
      .importConflictItem .importConflictReason {
        color: var(--c-bad-text);
        font-weight: 600;
      }
      .importConflictItem .importConflictDetail {
        color: var(--mut);
        margin-top: 2px;
      }
      /* Histórico de lotes de importação */
      .importBatchList {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
      }
      .importBatchItem {
        background: var(--surf-1);
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        padding: 14px 16px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
      }
      .importBatchItem.reverted {
        opacity: 0.55;
        border-style: dashed;
      }
      .importBatchMeta {
        font-size: 13px;
      }
      .importBatchMeta b {
        color: var(--txt-strong);
        display: block;
        margin-bottom: 3px;
      }
      .importBatchMeta small {
        color: var(--mut);
      }
      .importBatchTags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 6px;
      }
      /* ── Contexto de vertical no sidebar (substitui a barra do header) ── */
      .verticalContext {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(var(--accent-rgb), 0.14);
        border: 1px solid rgba(var(--accent-rgb), 0.3);
        color: var(--blue);
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background 0.15s;
      }
      .verticalContext.clickable {
        cursor: pointer;
      }
      .verticalContext.clickable:hover {
        background: rgba(var(--accent-rgb), 0.24);
      }
      .verticalContext #verticalContextLabel {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /* ── Picker de troca de vertical (mini modal no sidebar) ── */
      .verticalPicker {
        position: fixed;
        bottom: 180px;
        left: 12px;
        width: 220px;
        background: var(--surf-2);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 8px 32px var(--shadow-soft);
        z-index: 50;
        padding: 8px 0;
      }
      .verticalPickerHeader {
        font-size: 11px;
        font-weight: 700;
        color: var(--mut);
        padding: 6px 14px 4px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .verticalPickerItem {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        font-size: 13px;
        cursor: pointer;
        color: var(--txt);
        transition: background 0.1s;
      }
      .verticalPickerItem:hover {
        background: var(--surf-3);
      }
      .verticalPickerItem.active {
        color: var(--blue);
        font-weight: 700;
      }
      .verticalPickerItem.active::after {
        content: "✓";
        margin-left: auto;
        font-size: 12px;
      }
      /* ── Dropdown de perfil no topo direito ── */
      .userDropdownWrap {
        position: relative;
      }
      .userDropdownTrigger {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px 4px 4px;
        border-radius: 10px;
        background: var(--surf-2);
        border: 1px solid var(--line-soft);
        cursor: pointer;
        color: var(--txt-strong);
        font-size: 12px;
        font-weight: 600;
        transition: background 0.15s;
        white-space: nowrap;
      }
      .userDropdownTrigger:hover {
        background: var(--surf-3);
      }
      .userDropdownAvatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--blue), #6366f1);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .userDropdownName {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .userDropdownMenu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 260px;
        background: var(--surf-1);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 12px 40px var(--shadow-soft);
        z-index: 200;
        overflow: hidden;
        animation: dropdownIn 0.15s ease;
      }
      @keyframes dropdownIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .userDropdownHeader {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
      }
      .userDropdownAvatarLg {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--blue), #6366f1);
        color: #fff;
        font-size: 17px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .userDropdownHeader b {
        display: block;
        color: var(--txt-strong);
        font-size: 14px;
      }
      .userDropdownRole {
        color: var(--mut);
        font-size: 12px;
        margin-top: 2px;
        display: block;
      }
      .userDropdownDivider {
        height: 1px;
        background: var(--line-soft);
        margin: 0;
      }
      .userDropdownSectionLabel {
        padding: 10px 16px 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--mut);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .userDropdownVerticalItem {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px;
        font-size: 13px;
        cursor: pointer;
        color: var(--txt);
        transition: background 0.1s;
      }
      .userDropdownVerticalItem:hover {
        background: var(--surf-3);
      }
      .userDropdownVerticalItem.active {
        color: var(--blue);
        font-weight: 700;
      }
      .userDropdownVerticalItem.active .vCheck {
        visibility: visible;
      }
      .vCheck {
        margin-left: auto;
        font-size: 13px;
        color: var(--blue);
        visibility: hidden;
      }
      .userDropdownAction {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        background: none;
        border: none;
        color: var(--txt);
        width: 100%;
        text-align: left;
        transition: background 0.1s;
      }
      .userDropdownAction:hover {
        background: var(--surf-3);
      }
      .userDropdownAction.danger {
        color: var(--c-bad-text);
      }
      /* Botão "Atualizar" (recarga manual dos dados) no topo. */
      .syncStatus {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--surf-2);
        color: var(--mut);
        font-size: 12px;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        transition:
          background 0.15s,
          color 0.15s,
          border-color 0.15s;
      }
      .syncStatus:hover {
        background: var(--surf-3);
        color: var(--txt);
        border-color: var(--pri);
      }
      .syncStatus i {
        font-size: 14px;
        color: var(--pri2);
        display: inline-block;
      }