/* ===========================
   Marco UI — Clean Light & Dark
   =========================== */

/* ---------- PALETTE ---------- */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e6ecf4;

  /* brand */
  --primary:#16a34a;
  --primary-contrast:#fff;

  /* danger */
  --danger:#ef4444;
  --danger-contrast:#fff;

  /* surfaces */
  --shadow:0 1px 2px rgba(2,6,23,.06);
  --shadow-lg:0 20px 50px rgba(2,6,23,.25);
  --radius:14px;

  /* calendar */
  --cal-header:#fbfdff;
  --cal-cell:#fff;

  /* status (light) */
  --st-todo-bg:#fffbeb;
  --st-todo-bd:#facc15;
  --st-todo-dot:#facc15;

  --st-ongo-bg:#ecfdf5;
  --st-ongo-bd:#22c55e;
  --st-ongo-dot:#22c55e;

  --st-done-bg:#eff6ff;
  --st-done-bd:#3b82f6;
  --st-done-dot:#3b82f6;
}

/* -------- DARK THEME ---------- */
html[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border:#1f2a44;

  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);

  --cal-header:rgba(148,163,184,.06);
  --cal-cell:var(--card);

  /* status (dark) — suaves, legíveis */
  --st-todo-bg:rgba(250,204,21,.12);
  --st-todo-bd:rgba(250,204,21,.55);
  --st-todo-dot:#facc15;

  --st-ongo-bg:rgba(34,197,94,.12);
  --st-ongo-bd:rgba(34,197,94,.55);
  --st-ongo-dot:#22c55e;

  --st-done-bg:rgba(59,130,246,.12);
  --st-done-bd:rgba(59,130,246,.55);
  --st-done-dot:#3b82f6;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:var(--bg);
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  background:var(--card);
  border-bottom:1px solid var(--border);
}
.title{font-size:22px;font-weight:700}
.subtitle{font-size:13px;color:var(--muted);margin-top:4px}
.topbar-left{display:flex;flex-direction:column}
.topbar-right{display:flex;gap:10px;align-items:center}

/* ---------- layout ---------- */
.container{padding:18px; max-width:1200px; margin:0 auto;}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--border);
  background:transparent;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  color:var(--text);
  transition:background .13s, color .13s, border-color .13s;
}
.btn:hover{ background:rgba(148,163,184,.10); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--primary-contrast);
}
.btn.primary:hover{ filter:brightness(0.98); background:var(--primary); }
.btn.danger{
  background:var(--danger);
  border-color:var(--danger);
  color:var(--danger-contrast);
}
.btn.danger:hover{ filter:brightness(0.98); background:var(--danger);}
.btn.ghost{background:transparent;}

.icon-btn{
  border:1px solid var(--border);
  background:transparent;
  border-radius:10px;
  width:38px; height:38px;
  cursor:pointer; font-size:18px;
  display:grid; place-items:center;
  color:var(--text);
}
.icon-btn:hover{ background:rgba(148,163,184,.10); }

/* ---------- workActions (buttons linha 3x) ---------- */
#workActions {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}
#workActions > button {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 0;
  font-size: 16px;
}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.card-header{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border);}
.card-title{font-weight:700;color:var(--text)}

/* ---------- calendar ---------- */
.calendar-wrap{overflow:auto;}
.calendar{min-width:900px;display:grid;grid-template-columns: 220px repeat(7, 1fr);}
.cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px;min-height:82px;background:var(--cal-cell);}
.cell.header{min-height:auto;
  background:var(--cal-header);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.cell.header .daynum{display:block;color:var(--text);font-size:18px;letter-spacing:0;text-transform:none;margin-top:4px;}
.cell.team{display:flex;align-items:center;gap:10px;font-weight:700;}
.dot{ width:10px;height:10px;border-radius:999px; }
.addlink{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-weight:700;cursor:pointer;user-select:none;}

/* ---------- stats ---------- */
.stats{margin-top:14px;display:grid;gap:12px;grid-template-columns: repeat(4, minmax(0, 1fr));}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;}
.stat-label{color:var(--muted);font-size:13px;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:800}
.stat-value.ok{color:var(--primary)}

/* ---------- modals ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.35);
  display:flex; align-items:center; justify-content:center; padding:18px; z-index:50;
}
.hidden{display:none}
.modal{
  width:min(520px, 100%);
  background:#18181b !important;
  color:#fff !important;
  border:1.5px solid #27272a;
  border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #27272a;
  color:#fff !important;
}
.modal-title{font-weight:800; color:#fff !important;}
.modal-header-actions{display:flex;gap:10px;align-items:center}
.modal-body{ padding:16px; }
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid #232329;}
.modal label,
.modal .label { color: #e5e7eb !important; }
.modal .form,
.modal .actions { color: #fff !important; }
.modal input,
.modal textarea,
.modal select{
  color:#fff !important;
  background:#232329 !important;
  border:1px solid #444 !important;
}
/* ---------- dropdown & select clean in both themes ---------- */
select, .dropdown-menu {
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.04);
  padding: 8px 11px;
  min-height: 40px;
}
html[data-theme="dark"] select,
html[data-theme="dark"] .dropdown-menu {
  color: #fff;
  background: #18181b;
  border: 1.5px solid #27272a;
}
select:focus, .dropdown-menu:focus { outline: 2px solid var(--primary); }

/* ---------- forms ---------- */
.form{padding:16px}
.label{display:block;font-size:13px;color:var(--muted);font-weight:700;margin:12px 0 8px;}
.input{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:14px;background:transparent;color:var(--text);}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.row{margin-top:12px}
.checkbox{display:flex;gap:10px;align-items:center;color:var(--text);font-weight:600}

/* ---------- lists ---------- */
.list{padding:10px 12px;display:flex;flex-direction:column;gap:12px}
.item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;}
.item-left{display:flex;gap:12px;align-items:flex-start}
.item-title{font-weight:800}
.item-sub{font-size:13px;color:var(--muted);margin-top:4px}
.item-actions{display:flex;gap:8px;align-items:center}

.small-btn{border:1px solid var(--border);background:transparent;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:700;color:var(--text);}
.small-btn:hover{ background:rgba(148,163,184,.10); }
.small-btn.danger{border-color:rgba(239,68,68,.55);color:var(--danger);}
.small-btn.danger:hover{background:rgba(239,68,68,.10);}

/* ---------- calendar work chips (CLEAN) ---------- */
.badge{display:block;width:100%;border:0;background:transparent;padding:0;margin:0 0 8px 0;}
.work-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(148,163,184,.08);max-width:100%;}
.work-dot{width:10px;height:10px;min-width:10px;min-height:10px;border-radius:999px;background:var(--muted);}
.work-text{font-weight:700;font-size:14px;line-height:1.1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.work-chip.status-todo{background:var(--st-todo-bg);border-color:var(--st-todo-bd);}
.work-chip.status-todo .work-dot{ background:var(--st-todo-dot);}
.work-chip.status-ongoing{background:var(--st-ongo-bg);border-color:var(--st-ongo-bd);}
.work-chip.status-ongoing .work-dot{ background:var(--st-ongo-dot);}
.work-chip.status-done{background:var(--st-done-bg);border-color:var(--st-done-bd);}
.work-chip.status-done .work-dot{ background:var(--st-done-dot);}
.badge:hover .work-chip{filter:brightness(0.98);}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .topbar{padding:14px 14px}
  .container{padding:14px}
  .stats{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .calendar{min-width:820px;}
  .btn{padding:10px 12px}
}
@media (max-width: 640px){
  .item{ flex-wrap:wrap; align-items:flex-start; }
  .item-left{ width:100%; min-width:0; }
  .item-actions{
    width:100%;
    justify-content:flex-start;
    gap:10px;
    margin-top:10px;
  }
  .item-actions .small-btn{ flex:1; }
  audio{ width:100% !important; max-width:100% !important; display:block; }
}

/* ---------- MODALS ---------- */
.modal .list,
.modal-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.modal .item,
.modal-list-wrap .item {
  background: #222331 !important;
  color: #fff !important;
  border-color: #232329 !important;
  border-radius: 14px;
}
html:not([data-theme="dark"]) .modal .item,
html:not([data-theme="dark"]) .modal-list-wrap .item {
  background: #fff !important;
  color: #222 !important;
  border-color: #e6ecf4 !important;
}
/* ---------- DROPDOWN/MENU ---------- */
.dropdown-menu, .menu-list, .suggestion-list {
  background: #18181b;
  color: #e5e7eb;
  border: 1.5px solid #27272a;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 340px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}
.suggestion-list li, .dropdown-menu li, .menu-list li {
  list-style: none;
  padding: 13px 16px;
  cursor: pointer;
  color: #e5e7eb;
  background: transparent;
  transition: background .14s, color .14s;
}
.suggestion-list li[aria-selected="true"], .suggestion-list li:hover,
.dropdown-menu li:hover, .menu-list li:hover {
  background: #23232a !important;
  color: #16a34a !important;
}
html:not([data-theme="dark"]) .dropdown-menu,
html:not([data-theme="dark"]) .menu-list,
html:not([data-theme="dark"]) .suggestion-list {
  background: #fff;
  color: #222;
  border: 1.5px solid #e6ecf4;
}
html:not([data-theme="dark"]) .dropdown-menu li,
html:not([data-theme="dark"]) .menu-list li,
html:not([data-theme="dark"]) .suggestion-list li {
  color: #222;
}
html:not([data-theme="dark"]) .dropdown-menu li:hover,
html:not([data-theme="dark"]) .menu-list li:hover,
html:not([data-theme="dark"]) .suggestion-list li[aria-selected="true"] {
  background: #f1f5f9 !important;
  color: #16a34a !important;
}

/* ---------- WORK-TYPE-LINE ---------- */
.work-type-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.work-type-line input {
  flex: 1 1 0;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid #222331;
  background: #232329;
  color: #fff;
}
html:not([data-theme="dark"]) .work-type-line input {
  background: #fff;
  color: #222;
  border-color: #e6ecf4;
}
.work-type-line button {
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid #444;
  background: #232329;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}
html:not([data-theme="dark"]) .work-type-line button {
  background: #fff;
  color: #222;
  border-color: #e6ecf4;
}

/* ---------- Botão ADD tipo estiloso ---------- */
.add-type-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 700;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(22,163,74,.10);
  transition: background .13s;
}
.add-type-btn:hover { background: #15803d; }
.add-type-btn .icon-plus { font-size: 19px; margin-right: 7px; }

/* ---------- TRABALHOS FEITOS — TOGGLE ---------- */

.modal-list-wrap {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* SCROLL CLEAN UNIVERSAL */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background: transparent;
}

::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.5);
  border-radius:6px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
}

.item-left > .icon,
.item-left > .badge,
.item-left > .team-chip-badge {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: #18181b;  /* para dark */
  display: grid; place-items: center;
  font-size: 18px;
  color: #fff;
  border: 1.5px solid #232329; /* contorno leve p/destacar */

}
html:not([data-theme="dark"]) .item-left > .icon,
html:not([data-theme="dark"]) .item-left > .badge,
html:not([data-theme="dark"]) .item-left > .team-chip-badge {
  background: #eef2ff;
  color: #16a34a;
  border: 1.5px solid #e6ecf4;
}

.suggestion-list, .dropdown-menu, .menu-list {
  background: #18181b;
  color: #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border: 1.5px solid #27272a;
  max-height: 340px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}
.suggestion-list li, .dropdown-menu li, .menu-list li {
  list-style: none;
  padding: 13px 16px;
  cursor: pointer;
  color: #e5e7eb;
  background: transparent;
  transition: background .14s, color .14s;
}
.suggestion-list li[aria-selected="true"], .dropdown-menu li:hover, .menu-list li:hover {
  background: #232ae1;
  background: #232329;
  color: #16a34a;
}
html:not([data-theme="dark"]) .suggestion-list li[aria-selected="true"], html:not([data-theme="dark"]) .dropdown-menu li:hover, html:not([data-theme="dark"]) .menu-list li:hover {
  background: #f1f5f9;
  color: #16a34a;
}

.suggestion-option {
  background: transparent;
  color: inherit;
  transition: background .13s, color .13s;
}

.suggestion-option.hovered,
.suggestion-option:focus {
  /* Dark mode: escuro. Light mode: cinza claro */
  background: #232329 !important;
  color: #16a34a !important;
}
html:not([data-theme="dark"]) .suggestion-option.hovered,
html:not([data-theme="dark"]) .suggestion-option:focus {
  background: #f1f5f9 !important;
  color: #16a34a !important;
}

.modal .work-toggle-btn {
  min-width: 140px;
  margin-bottom: 12px;
  border-radius: 10px;
  font-size: 17px;
  display: block;
  text-align: center;
  background: #232329;
  color: #b5b5bd;
  border: 1.5px solid #353542;
  transition: background .12s, color .12s, border-color .12s;
}
.modal .work-toggle-btn.selected {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}
html:not([data-theme="dark"]) .modal .work-toggle-btn {
  background: #f1f5f9;
  color: #222;
  border: 1.5px solid #e6ecf4;
}
html:not([data-theme="dark"]) .modal .work-toggle-btn.selected {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}

/* Garante contraste do "X" (icon-btn) no modal header em todos os themes */
.icon-btn,
.modal-header .icon-btn,
.modal-header button.icon-btn {
  color: #16a34a;
  border: 1.5px solid #e6ecf4;
  background: transparent;
  font-weight: bold;
  font-size: 21px;
  line-height: 1;
  transition: background .13s, color .13s, border-color .13s;
}
.icon-btn:hover,
.modal-header .icon-btn:hover {
  background: #f3f4f6;
  color: #16a34a;
  border-color: #16a34a;
}
/* Light mode: icon X sempre escuro! */
html:not([data-theme="dark"]) .icon-btn,
html:not([data-theme="dark"]) .modal-header .icon-btn,
html:not([data-theme="dark"]) .modal-header button.icon-btn {
  color: #16a34a;
  border: 1.5px solid #e6ecf4;
  background: transparent;
}
/* Quando hover no light mode */
html:not([data-theme="dark"]) .icon-btn:hover,
html:not([data-theme="dark"]) .modal-header .icon-btn:hover {
  background: #f3f4f6;
  color: #16a34a;
  border-color: #16a34a;
  }

  /* Alinhamento igual a campos .form para blocos de trabalhos feitos */
.form #editTeamWorkTypes,
.form #editTeamWorkTypesLabel {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

.form .work-type-line,
.form .add-type-btn {
  width: 100%;
  max-width: 100%;
}

#editTeamWorkTypes .work-type-line {
  /* Remove centralização extra */
  margin-left: 0;
}

#editTeamWorkTypes .add-type-btn {
  margin-left: 0;
}

/* =========================================================
   PATCH — modais/light-dark/botões/editar equipa
   Colar no FIM do styles.css
   ========================================================= */

/* ---------- tokens extra para superfícies ---------- */
:root{
  --modal-bg: var(--card);
  --modal-text: var(--text);
  --modal-border: var(--border);
  --modal-sep: var(--border);

  --field-bg: #ffffff;
  --field-text: var(--text);
  --field-border: #dbe3ee;

  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: var(--text);
  --btn-secondary-border: #dbe3ee;
  --btn-secondary-hover: #f8fafc;

  --modal-item-bg: #ffffff;
  --modal-item-text: var(--text);
  --modal-item-border: var(--border);

  --close-btn-text: #dc2626;
  --close-btn-border: rgba(220,38,38,.28);
  --close-btn-hover-bg: rgba(220,38,38,.08);
  --close-btn-hover-border: rgba(220,38,38,.45);
}

html[data-theme="dark"]{
  --modal-bg: #111827;
  --modal-text: #f8fafc;
  --modal-border: #1f2937;
  --modal-sep: #1f2937;

  --field-bg: #111827;
  --field-text: #f8fafc;
  --field-border: #334155;

  --btn-secondary-bg: #111827;
  --btn-secondary-text: #f8fafc;
  --btn-secondary-border: #334155;
  --btn-secondary-hover: #172033;

  --modal-item-bg: #182132;
  --modal-item-text: #f8fafc;
  --modal-item-border: #253247;

  --close-btn-text: #ef4444;
  --close-btn-border: rgba(239,68,68,.30);
  --close-btn-hover-bg: rgba(239,68,68,.10);
  --close-btn-hover-border: rgba(239,68,68,.50);
}

/* ---------- modais respeitam o tema ---------- */
.modal{
  background: var(--modal-bg) !important;
  color: var(--modal-text) !important;
  border: 1px solid var(--modal-border) !important;
}

.modal-header{
  color: var(--modal-text) !important;
  border-bottom: 1px solid var(--modal-sep) !important;
}

.modal-title{
  color: var(--modal-text) !important;
}

.modal-footer{
  border-top: 1px solid var(--modal-sep) !important;
}

.modal label,
.modal .label,
.modal .form,
.modal .actions{
  color: var(--modal-text) !important;
}

.modal input,
.modal textarea,
.modal select,
.modal .input{
  color: var(--field-text) !important;
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
}

/* ---------- botão X: só nos headers dos modais ---------- */
.modal-header .icon-btn,
.modal-header button.icon-btn{
  color: var(--close-btn-text) !important;
  border: 1px solid var(--close-btn-border) !important;
  background: transparent !important;
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  transition: background .13s, color .13s, border-color .13s;
}

.modal-header .icon-btn:hover,
.modal-header button.icon-btn:hover{
  background: var(--close-btn-hover-bg) !important;
  color: var(--close-btn-text) !important;
  border-color: var(--close-btn-hover-border) !important;
}

/* calendário e outros icon-btn continuam neutros */
.card-header .icon-btn,
.topbar .icon-btn,
.icon-btn:not(.modal-header .icon-btn){
  color: var(--text);
  border: 1px solid var(--border);
  background: transparent;
  font-weight: 600;
  font-size: 18px;
}

.card-header .icon-btn:hover,
.topbar .icon-btn:hover{
  background: rgba(148,163,184,.10);
  color: var(--text);
  border-color: var(--border);
}

/* ---------- botão cancelar / secondary ---------- */
.modal-footer .btn:not(.primary):not(.danger),
.actions .btn:not(.primary):not(.danger){
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-secondary-border) !important;
}

.modal-footer .btn:not(.primary):not(.danger):hover,
.actions .btn:not(.primary):not(.danger):hover{
  background: var(--btn-secondary-hover) !important;
}

/* ---------- items dentro de modal coerentes ---------- */
.modal .item,
.modal-list-wrap .item{
  background: var(--modal-item-bg) !important;
  color: var(--modal-item-text) !important;
  border-color: var(--modal-item-border) !important;
}

/* ---------- Trabalhos Feitos no editar equipa ---------- */
#editTeamWorkTypesLabel{
  display: block;
  margin: 0 16px 8px 16px !important;
}

#editTeamWorkTypes{
  margin: 0 16px 12px 16px !important;
}

#editTeamWorkTypes .work-type-line{
  width: 100%;
  margin: 0 0 8px 0 !important;
}

#editTeamWorkTypes .add-type-btn{
  width: 100%;
  margin: 8px 0 0 0 !important;
}

/* ---------- inputs/botões dos work types seguem o tema ---------- */
.work-type-line input{
  border: 1px solid var(--field-border) !important;
  background: var(--field-bg) !important;
  color: var(--field-text) !important;
}

.work-type-line button{
  border: 1px solid var(--btn-secondary-border) !important;
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
}

/* ---------- mantém dropdowns estáveis ---------- */
.dropdown-menu,
.menu-list,
.suggestion-list{
  color: var(--text);
}

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .menu-list,
html[data-theme="dark"] .suggestion-list{
  color: #e5e7eb;
}

/* Espaçamento + layout base do modal Trabalhos Feitos */
#workTypesModalContent{
  padding: 12px 16px 4px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
}

/* Botões dentro */
#workTypesModalContent .work-toggle-btn{
  width: 100%;
}

#teamsList{
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 6px;
}

.modal .list{
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 6px;
}

/* =========================================================
   PATCH — Editar Equipa / Trabalhos Feitos
   ========================================================= */

/* mais espaço acima do título */
#editTeamWorkTypesLabel{
  display:block;
  margin: 18px 16px 10px 16px !important;
  padding: 0 !important;
}

/* container da lista com scroll próprio */
#editTeamWorkTypes{
  margin: 0 16px 12px 16px !important;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
  box-sizing: border-box;
}

/* cada linha continua alinhada, mas sem empurrar o modal */
#editTeamWorkTypes .work-type-line{
  width: 100%;
  margin: 0 0 8px 0 !important;
}

/* botão ADD fica dentro da zona e com respiro */
#editTeamWorkTypes .add-type-btn{
  width: 100%;
  margin: 10px 0 0 0 !important;
  position: sticky;
  bottom: 0;
}

.topbar-right a.btn.ghost,
.topbar-right a.btn.ghost:hover{
  text-decoration: none;
}