/* =========================================================
   EUROMAR FLOW V18 — CORPORATE LIGHT / VIA DESIGN LANGUAGE
   Visual override only. Business logic remains in app.js.
   ========================================================= */
:root,
html[data-theme],
body[data-theme] {
  --v18-bg: #f3f5f7;
  --v18-panel: #ffffff;
  --v18-panel-soft: #f8fafb;
  --v18-border: #dfe4ea;
  --v18-border-strong: #cbd3dc;
  --v18-text: #18202a;
  --v18-muted: #697481;
  --v18-muted-2: #8a95a2;
  --v18-sidebar: #151a20;
  --v18-sidebar-2: #1d242c;
  --v18-accent: #b70005;
  --v18-accent-dark: #8f0004;
  --v18-success: #1f7a48;
  --v18-warning: #9a6700;
  --v18-danger: #a3262a;
  --v18-info: #315a91;
  --v18-shadow-sm: 0 1px 2px rgba(19,27,38,.04);
  --v18-shadow-md: 0 10px 28px rgba(19,27,38,.07);
  --bg: var(--v18-bg) !important;
  --surface: var(--v18-panel) !important;
  --surface-2: var(--v18-panel-soft) !important;
  --panel: var(--v18-panel) !important;
  --text: var(--v18-text) !important;
  --muted: var(--v18-muted) !important;
  --border: var(--v18-border) !important;
  --accent: var(--v18-accent) !important;
}

html, body { background: var(--v18-bg) !important; color: var(--v18-text) !important; }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
::selection { background: rgba(183,0,5,.15); }

/* Shell */
.app-shell { background: var(--v18-bg) !important; }
.sidebar {
  width: 238px !important;
  background: linear-gradient(180deg, #151a20 0%, #11161b 100%) !important;
  border-right: 1px solid #242b33 !important;
  box-shadow: none !important;
}
.side-brand {
  min-height: 70px !important;
  padding: 16px 14px !important;
  border-bottom: 1px solid #262d35 !important;
  background: transparent !important;
}
.euromar-logo-shell { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
.side-brand strong { color: #fff !important; font-size: 14px !important; letter-spacing: -.02em; }
.side-brand span, .side-brand strong + span { color: #89939f !important; font-size: 9px !important; }
.version-badge { color: #b7c0ca !important; background: #252d36 !important; border: 1px solid #35404c !important; font-size: 8px !important; }
.nav { padding: 12px 9px 16px !important; gap: 2px !important; }
.nav-section-label {
  padding: 10px 10px 5px !important;
  color: #6f7a86 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
}
.nav-item {
  position: relative;
  min-height: 38px !important;
  padding: 8px 10px !important;
  gap: 9px !important;
  border-radius: 8px !important;
  color: #cbd2da !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.nav-item:hover { color: #fff !important; background: #20272f !important; transform: none !important; }
.nav-item.active { color: #fff !important; background: #272f38 !important; font-weight: 750 !important; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 999px; background: var(--v18-accent);
}
.nav-icon { width: 18px !important; height: 18px !important; color: currentColor !important; }
.profile-box { border-top: 1px solid #262d35 !important; background: transparent !important; padding: 12px !important; }
.profile-text strong { color: #fff !important; font-size: 11px !important; }
.profile-text span { color: #89939f !important; font-size: 9px !important; }
.profile-box .icon-btn { color: #dce2e8 !important; background: #1b222a !important; border: 1px solid #39434e !important; }

.main { background: var(--v18-bg) !important; margin-left: 238px !important; }
.topbar {
  min-height: 58px !important; height: auto !important; padding: 8px 22px !important;
  background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--v18-border) !important;
  box-shadow: none !important; backdrop-filter: blur(10px);
}
.topbar h1 { color: var(--v18-text) !important; font-size: 18px !important; letter-spacing: -.025em !important; }
.breadcrumb { color: var(--v18-muted-2) !important; font-size: 9px !important; text-transform: uppercase; letter-spacing: .07em; }
.global-search-wrap input { min-height: 34px !important; background: #fff !important; border: 1px solid var(--v18-border) !important; border-radius: 8px !important; box-shadow: none !important; }
.sync-pill, .bell-btn { min-height: 34px !important; border-radius: 8px !important; background: #fff !important; border: 1px solid var(--v18-border) !important; box-shadow: none !important; }
.page { max-width: 1480px !important; padding: 22px 24px 40px !important; }

/* Base components */
.panel, .metric-card, .task-section, .work-panel, .team-hero, .dashboard-hero, .calendar-head,
.report-filters, .notification-panel, .modal-card, .account-grid > *, .v12-team-comparison {
  background: var(--v18-panel) !important; border: 1px solid var(--v18-border) !important;
  box-shadow: var(--v18-shadow-sm) !important; border-radius: 10px !important;
}
.panel { padding: 15px !important; }
.eyebrow { color: var(--v18-muted-2) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: .11em !important; }
h1,h2,h3,h4 { color: var(--v18-text) !important; }
p,.helper,small { color: var(--v18-muted) !important; }
.btn { min-height: 34px !important; padding: 7px 11px !important; border-radius: 8px !important; box-shadow: none !important; font-size: 11px !important; font-weight: 750 !important; }
.btn.primary { background: #1b2229 !important; border-color: #1b2229 !important; color: #fff !important; }
.btn.primary:hover { background: #2a333c !important; }
.btn.soft,.btn.ghost { background: #fff !important; border: 1px solid var(--v18-border) !important; color: #344150 !important; }
.btn.danger { background: var(--v18-danger) !important; border-color: var(--v18-danger) !important; color: #fff !important; }
input,select,textarea {
  min-height: 36px; background: #fff !important; color: var(--v18-text) !important;
  border: 1px solid var(--v18-border) !important; border-radius: 8px !important; box-shadow: none !important;
}
input:focus,select:focus,textarea:focus { border-color: #8e9baa !important; box-shadow: 0 0 0 3px rgba(87,105,124,.10) !important; }
.status-badge,.priority,.recurrence-badge,.tag-badge,.load-pill { border-radius: 999px !important; font-size: 9px !important; font-weight: 800 !important; }
.table-wrap { border: 1px solid var(--v18-border) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; }
table { background: #fff !important; }
th { background: var(--v18-panel-soft) !important; color: #6f7a86 !important; font-size: 9px !important; letter-spacing: .06em !important; border-bottom: 1px solid var(--v18-border) !important; }
td { color: var(--v18-text) !important; border-bottom: 1px solid #edf0f2 !important; font-size: 11px !important; }
tbody tr:hover { background: #fbfcfd !important; }

/* Hide legacy appearance/theme picker and duplicate subtasks concept in V18 */
.appearance-card, #taskSubtasksBlock { display: none !important; }

/* Dashboard V18 */
.v18-page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:16px; }
.v18-page-head h2 { margin: 2px 0 4px; font-size: 25px; line-height: 1.1; letter-spacing: -.035em; }
.v18-page-head p { margin:0; font-size:12px; }
.v18-scope { min-width: 190px; }
.v18-scope label { display:grid; gap:5px; color:var(--v18-muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.v18-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.v18-kpi {
  position:relative; overflow:hidden; text-align:left; padding:14px 15px; min-height:84px;
  background:#fff; border:1px solid var(--v18-border); border-radius:10px; box-shadow:var(--v18-shadow-sm); cursor:pointer;
}
.v18-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#cfd5dc; }
.v18-kpi.bad::before { background:var(--v18-danger); }
.v18-kpi.warn::before { background:#d39a20; }
.v18-kpi.good::before { background:var(--v18-success); }
.v18-kpi.info::before { background:var(--v18-info); }
.v18-kpi span { display:block; color:var(--v18-muted); font-size:10px; font-weight:750; }
.v18-kpi strong { display:block; margin-top:7px; color:#151b22; font-size:25px; line-height:1; letter-spacing:-.04em; }
.v18-home-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:14px; }
.v18-home-grid .v18-attention { grid-column:1/-1; }
.v18-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.v18-section-head h3 { margin:1px 0 0; font-size:15px; }
.v18-attention-list { display:grid; }
.v18-attention-row { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 0; border:0; border-top:1px solid #eef1f3; background:transparent; text-align:left; cursor:pointer; }
.v18-attention-row:first-child { border-top:0; }
.v18-rank { width:26px; height:26px; display:grid; place-items:center; background:#edf1f4; color:#576372; border-radius:7px; font-size:10px; font-weight:900; }
.v18-attention-copy { min-width:0; }
.v18-attention-copy strong,.v18-attention-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v18-attention-copy strong { font-size:11px; }
.v18-attention-copy span { margin-top:3px; color:var(--v18-muted); font-size:9px; }
.v18-attention-meta { display:flex; gap:6px; align-items:center; }
.v18-team-today { width:100%; border-collapse:collapse; }
.v18-team-today td,.v18-team-today th { padding:9px 10px !important; }
.v18-progress { display:flex; align-items:center; gap:8px; min-width:120px; }
.v18-progress-track { flex:1; height:6px; border-radius:99px; background:#edf1f4; overflow:hidden; }
.v18-progress-track i { display:block; height:100%; background:#657381; border-radius:99px; }
.v18-week-bars { height:180px; display:flex; align-items:flex-end; gap:9px; padding-top:10px; }
.v18-week-day { flex:1; height:100%; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.v18-week-day b { font-size:10px; color:var(--v18-text); }
.v18-week-day span { font-size:8px; color:var(--v18-muted); }
.v18-week-bar { width:min(28px,70%); min-height:3px; border-radius:6px 6px 2px 2px; background:#657381; }

/* Meu Trabalho V18 */
.v18-work-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:14px; }
.v18-work-head h2 { margin:2px 0 4px; font-size:24px; letter-spacing:-.035em; }
.v18-work-filters { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 12px; }
.v18-work-filters button { min-height:32px; padding:6px 10px; border:1px solid var(--v18-border); background:#fff; color:#506070; border-radius:8px; font-size:10px; font-weight:800; cursor:pointer; }
.v18-work-filters button.active { background:#272f38; border-color:#272f38; color:#fff; }
.v18-work-list { background:#fff; border:1px solid var(--v18-border); border-radius:10px; overflow:hidden; }
.v18-work-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:11px 13px; border-top:1px solid #edf0f2; }
.v18-work-row:first-child { border-top:0; }
.v18-work-main { min-width:0; }
.v18-work-main > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.v18-work-sub { margin-top:4px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; color:var(--v18-muted); font-size:9px; }
.v18-work-status { display:grid; justify-items:end; gap:4px; }
.v18-work-actions { display:flex; gap:5px; }
.v18-mini-btn { min-height:30px; padding:5px 8px; border:1px solid var(--v18-border); background:#fff; color:#42505e; border-radius:7px; font-size:9px; font-weight:800; cursor:pointer; }
.v18-mini-btn.primary { background:#20272f; border-color:#20272f; color:#fff; }
.v18-mini-btn.done { color:var(--v18-success); border-color:#bdd7c7; background:#f7fbf8; }

/* Tasks */
.tasks-toolbar { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin-bottom:12px !important; }
.views .view-btn { min-height:32px !important; border-radius:7px !important; font-size:10px !important; }
.task-table .task-title-line b { font-size:11px !important; }
.task-table .task-code-line { color:var(--v18-muted-2) !important; font-size:8px !important; }
.task-table .row-tags { margin-top:4px !important; }
.kanban { gap:10px !important; }
.kanban-col { border:1px solid var(--v18-border) !important; background:#f7f9fb !important; border-radius:10px !important; box-shadow:none !important; }
.kanban-card { border:1px solid var(--v18-border) !important; border-radius:8px !important; box-shadow:none !important; }

/* Drawer/modal */
.modal { background:rgba(14,20,27,.42) !important; backdrop-filter:blur(2px); }
.modal-card.large { width:min(1040px,96vw) !important; }
.modal-head { min-height:58px !important; border-bottom:1px solid var(--v18-border) !important; }
.v14-task-tabs { padding:8px 14px !important; gap:4px !important; background:#f8fafb !important; border-bottom:1px solid var(--v18-border) !important; }
.v14-task-tab { min-height:32px !important; padding:6px 10px !important; border-radius:7px !important; font-size:10px !important; }
.v14-task-tab.active { color:#fff !important; background:#272f38 !important; border-color:#272f38 !important; }
.execution-block,.recurrence-block,.workflow-block,.assignment-receipt { border:1px solid var(--v18-border) !important; background:#fff !important; border-radius:9px !important; box-shadow:none !important; }
.modal-footer { border-top:1px solid var(--v18-border) !important; }

/* Admin V18 */
.v18-admin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.v18-admin-card { text-align:left; min-height:120px; padding:15px; background:#fff; border:1px solid var(--v18-border); border-radius:10px; cursor:pointer; box-shadow:var(--v18-shadow-sm); }
.v18-admin-card:hover { border-color:#bbc5cf; box-shadow:var(--v18-shadow-md); }
.v18-admin-card span { display:block; color:var(--v18-muted-2); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.v18-admin-card strong { display:block; margin-top:7px; color:var(--v18-text); font-size:14px; }
.v18-admin-card small { display:block; margin-top:6px; font-size:10px; line-height:1.45; }
.v18-admin-back { margin-bottom:10px; }

/* Trash V17 / V18 UI */
.v18-trash-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:10px; align-items:center; margin-bottom:12px; }
.v18-trash-search { position:relative; }
.v18-trash-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.v18-trash-summary { display:flex; gap:10px; align-items:center; color:var(--v18-muted); font-size:10px; margin-bottom:8px; }
.v18-trash-table td { vertical-align:middle !important; }
.v18-trash-task { min-width:0; }
.v18-trash-task strong,.v18-trash-task span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v18-trash-task strong { font-size:11px; }
.v18-trash-task span { margin-top:3px; color:var(--v18-muted); font-size:9px; }
.v18-trash-pagination { display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; }
.v18-trash-pagination span { color:var(--v18-muted); font-size:10px; }
.v18-check { width:16px; height:16px; min-height:auto; }
.v18-trash-loading { padding:30px; text-align:center; color:var(--v18-muted); }

/* Lighter legacy pages */
.team-hero, .dashboard-hero { background:#fff !important; color:var(--v18-text) !important; min-height:auto !important; }
.team-hero::before,.dashboard-hero::before,.team-hero::after,.dashboard-hero::after { display:none !important; }
.v15-work-hero,.v1510-hero-bg,.v14-my-attention,.v14-attention-strip { display:none !important; }
.users-head { margin-bottom:12px !important; }
.account-grid { gap:12px !important; }

/* Mobile */
@media (max-width:1100px){
  .sidebar{width:214px !important}.main{margin-left:214px !important}
  .v18-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v18-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .main{margin-left:0 !important}.topbar{padding:8px 12px !important}.page{padding:15px 12px 86px !important}
  .sidebar{width:min(310px,88vw) !important}
  .v18-page-head,.v18-work-head{display:grid}.v18-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v18-home-grid{grid-template-columns:1fr}.v18-home-grid .v18-attention{grid-column:auto}
  .v18-work-row{grid-template-columns:minmax(0,1fr) auto}.v18-work-actions{grid-column:1/-1;justify-content:flex-end}
  .v18-trash-toolbar{grid-template-columns:1fr}.v18-trash-actions{justify-content:flex-start}.v18-admin-grid{grid-template-columns:1fr}
  .global-search-wrap{display:none !important}
}
@media (max-width:520px){
  .v18-kpis{grid-template-columns:1fr 1fr}.v18-kpi{min-height:76px;padding:12px}
  .v18-page-head h2,.v18-work-head h2{font-size:21px}.v18-week-bars{height:150px}
  .v18-attention-row{grid-template-columns:auto minmax(0,1fr)}.v18-attention-meta{grid-column:2;justify-content:flex-start}
}

/* =========================================================
   EUROMAR FLOW V18.1 — HARMONIZAÇÃO VISUAL / ADMIN / TEMAS
   ========================================================= */

/* Light mode: neutral surfaces, dark shell, red only as institutional accent. */
html[data-theme="cloud_light"],
body[data-theme="cloud_light"] {
  --v18-bg: #f4f6f8;
  --v18-panel: #ffffff;
  --v18-panel-soft: #f7f9fb;
  --v18-border: #d9e0e7;
  --v18-border-strong: #c7d0d9;
  --v18-text: #17202a;
  --v18-muted: #667382;
  --v18-muted-2: #8a96a3;
  --v18-sidebar: #151a20;
  --v18-sidebar-2: #1d242c;
  --v18-accent: #b70005;
  --v18-accent-dark: #8f0004;
  --v18-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --v18-shadow-md: 0 12px 28px rgba(15,23,42,.07);
  --bg: var(--v18-bg) !important;
  --surface: var(--v18-panel) !important;
  --surface-2: var(--v18-panel-soft) !important;
  --panel: var(--v18-panel) !important;
  --text: var(--v18-text) !important;
  --muted: var(--v18-muted) !important;
  --border: var(--v18-border) !important;
  --accent: var(--v18-accent) !important;
}

/* Dark mode uses the same corporate structure, not a different visual identity. */
html[data-theme="midnight_dark"],
body[data-theme="midnight_dark"] {
  --v18-bg: #0f141a;
  --v18-panel: #171d24;
  --v18-panel-soft: #1c232b;
  --v18-border: #2c3641;
  --v18-border-strong: #3a4653;
  --v18-text: #e8edf2;
  --v18-muted: #9ca8b5;
  --v18-muted-2: #7e8a97;
  --v18-sidebar: #0d1217;
  --v18-sidebar-2: #151b22;
  --v18-accent: #d62a31;
  --v18-accent-dark: #b70005;
  --v18-success: #49a875;
  --v18-warning: #d4a13b;
  --v18-danger: #d25b5f;
  --v18-info: #6f9bd0;
  --v18-shadow-sm: 0 1px 2px rgba(0,0,0,.18);
  --v18-shadow-md: 0 12px 30px rgba(0,0,0,.24);
  --bg: var(--v18-bg) !important;
  --surface: var(--v18-panel) !important;
  --surface-2: var(--v18-panel-soft) !important;
  --panel: var(--v18-panel) !important;
  --text: var(--v18-text) !important;
  --muted: var(--v18-muted) !important;
  --border: var(--v18-border) !important;
  --accent: var(--v18-accent) !important;
  color-scheme: dark;
}

/* Sidebar color discipline: avoid legacy red labels everywhere. */
.sidebar .nav-item .nav-label { color: inherit !important; }
.sidebar .nav-item .nav-icon { color: #9aa6b2 !important; }
.sidebar .nav-item:hover .nav-icon,
.sidebar .nav-item.active .nav-icon { color: #ffffff !important; }
.sidebar .nav-item.active { background: #26303a !important; color: #ffffff !important; }
.sidebar .nav-item.active::before { background: var(--v18-accent) !important; }

/* More legible top bar and form controls in light mode. */
html[data-theme="cloud_light"] .topbar,
body[data-theme="cloud_light"] .topbar { background: rgba(255,255,255,.97) !important; }
html[data-theme="cloud_light"] .global-search-wrap input,
html[data-theme="cloud_light"] #accountPage input,
html[data-theme="cloud_light"] #accountPage select,
html[data-theme="cloud_light"] #accountPage textarea,
html[data-theme="cloud_light"] #usersPage input,
html[data-theme="cloud_light"] #usersPage select,
html[data-theme="cloud_light"] .modal input,
html[data-theme="cloud_light"] .modal select,
html[data-theme="cloud_light"] .modal textarea {
  background: #ffffff !important;
  color: #17202a !important;
  border-color: #d6dee6 !important;
}
html[data-theme="cloud_light"] input::placeholder,
html[data-theme="cloud_light"] textarea::placeholder { color: #9aa5b1 !important; opacity: 1; }

/* Existing account page: stop the password card stretching to the height of profile. */
.account-grid {
  grid-template-columns: minmax(300px,.68fr) minmax(0,1.32fr) !important;
  align-items: start !important;
  gap: 14px !important;
}
.account-grid > * { align-self: start !important; }
#ownPasswordForm { height: auto !important; min-height: 0 !important; }
#accountInfo { display: grid; gap: 14px; }
#accountInfo > * { margin: 0 !important; }
.account-profile-head {
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--v18-border);
}
.profile-edit-form {
  padding-top: 2px;
}
.profile-edit-form .btn.primary { width: auto !important; min-width: 150px; justify-self: start; }

/* Theme selector is intentionally visible again in V18.1. */
#accountPage .appearance-card.v181-appearance-card {
  display: block !important;
  padding: 16px !important;
  border: 1px solid var(--v18-border) !important;
  border-radius: 10px !important;
  background: var(--v18-panel-soft) !important;
  box-shadow: none !important;
}
.v181-appearance-card .appearance-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.v181-appearance-card .appearance-head h3 { margin: 2px 0 4px; font-size: 15px; }
.v181-appearance-card .appearance-head p { margin: 0; font-size: 10px; line-height: 1.45; }
.appearance-current {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--v18-border);
  background: var(--v18-panel);
  color: var(--v18-muted);
  font-size: 9px;
  font-weight: 800;
}
.v181-theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.v181-theme-card {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 20px;
  align-items: center;
  gap: 9px;
  min-height: 76px;
  padding: 10px;
  text-align: left;
  border: 1px solid var(--v18-border);
  border-radius: 9px;
  background: var(--v18-panel);
  color: var(--v18-text);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.v181-theme-card:hover { border-color: var(--v18-border-strong); box-shadow: var(--v18-shadow-sm); transform: translateY(-1px); }
.v181-theme-card.selected { border-color: var(--v18-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v18-accent) 10%, transparent); }
.v181-theme-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; background: var(--v18-panel-soft); border: 1px solid var(--v18-border);
  font-weight: 900; font-size: 15px;
}
.v181-theme-copy b,.v181-theme-copy small { display: block; }
.v181-theme-copy b { font-size: 11px; color: var(--v18-text); }
.v181-theme-copy small { margin-top: 3px; font-size: 8.5px; line-height: 1.35; color: var(--v18-muted); }
.v181-theme-check { color: var(--v18-accent); font-weight: 900; text-align: center; }

/* Light account cards: remove the large navy blocks from the light theme. */
html[data-theme="cloud_light"] #accountPage .pwa-install-card,
html[data-theme="cloud_light"] #accountPage .push-mobile-card,
html[data-theme="cloud_light"] #accountPage .current-device-summary,
html[data-theme="cloud_light"] #accountPage .push-device-row,
html[data-theme="cloud_light"] #accountPage .push-devices-list > * {
  background: #f7f9fb !important;
  color: #17202a !important;
  border-color: #d9e0e7 !important;
}
html[data-theme="cloud_light"] #accountPage .pwa-install-card h3,
html[data-theme="cloud_light"] #accountPage .push-mobile-card h3,
html[data-theme="cloud_light"] #accountPage .current-device-summary b,
html[data-theme="cloud_light"] #accountPage .push-device-row b { color: #17202a !important; }
html[data-theme="cloud_light"] #accountPage .pwa-install-card p,
html[data-theme="cloud_light"] #accountPage .push-mobile-card p,
html[data-theme="cloud_light"] #accountPage .current-device-summary span,
html[data-theme="cloud_light"] #accountPage .push-device-row span { color: #667382 !important; }
html[data-theme="cloud_light"] #accountPage .push-enable-btn.enabled {
  background: #eef8f2 !important; color: #1f7a48 !important; border: 1px solid #bfdcc9 !important;
}

/* Administration hub: clearer entry point for users and permissions. */
.v181-admin-head { align-items: center; }
.v181-admin-highlight {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 12px; padding: 15px 16px;
  border: 1px solid #ead1d2; border-left: 3px solid var(--v18-accent);
  border-radius: 10px; background: #fffafa;
}
.v181-admin-highlight strong { display: block; margin: 2px 0 4px; font-size: 14px; color: var(--v18-text); }
.v181-admin-highlight p { margin: 0; font-size: 10px; }
.v181-admin-grid .v181-admin-card { position: relative; overflow: hidden; min-height: 138px; }
.v181-admin-card.primary-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--v18-accent);
}
.v181-admin-card em {
  display: inline-block; margin-top: 12px; padding-top: 9px; width: 100%;
  border-top: 1px solid var(--v18-border); color: var(--v18-muted); font-size: 9px; font-style: normal; font-weight: 750;
}

/* Users & permissions page. */
.v181-users-head { align-items: center !important; }
.v181-role-guide {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px;
  margin-bottom: 10px;
}
.v181-role-guide > div {
  padding: 10px 11px; border: 1px solid var(--v18-border); border-radius: 9px; background: var(--v18-panel-soft);
}
.v181-role-guide b,.v181-role-guide span { display: block; }
.v181-role-guide b { color: var(--v18-text); font-size: 10px; }
.v181-role-guide span { margin-top: 3px; color: var(--v18-muted); font-size: 8.5px; line-height: 1.35; }
.v181-user-help {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 12px; border: 1px solid var(--v18-border); border-radius: 9px; background: var(--v18-panel);
}
.v181-user-help strong,.v181-user-help span { display: block; }
.v181-user-help strong { font-size: 10px; color: var(--v18-text); }
.v181-user-help span { margin-top: 2px; font-size: 9px; color: var(--v18-muted); }
.v181-user-cards { gap: 9px !important; }
.v181-user-card { border: 1px solid var(--v18-border) !important; box-shadow: var(--v18-shadow-sm) !important; }
.v181-user-access { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.v181-user-access > span:not(.status-badge) {
  padding: 4px 6px; background: var(--v18-panel-soft); border: 1px solid var(--v18-border); border-radius: 6px; color: var(--v18-muted); font-size: 8.5px; font-weight: 700;
}

/* Permission modal: make the hierarchy obvious and lighter. */
#userModal .modal-card { width: min(900px,96vw) !important; }
#userModal .permissions-box {
  border: 1px solid var(--v18-border) !important;
  background: var(--v18-panel-soft) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
#userModal .permissions-box legend { color: var(--v18-text) !important; font-size: 11px !important; font-weight: 850 !important; }
#userModal .v161-perm-group {
  background: var(--v18-panel) !important;
  border: 1px solid var(--v18-border) !important;
  border-radius: 9px !important;
}
#userModal .check-perm { color: var(--v18-text) !important; }
#userModal .v161-perm-danger { color: var(--v18-danger) !important; }

/* Dark mode: replace remaining hard-coded light surfaces. */
html[data-theme="midnight_dark"] body,
html[data-theme="midnight_dark"] .app-shell,
html[data-theme="midnight_dark"] .main { background: var(--v18-bg) !important; color: var(--v18-text) !important; }
html[data-theme="midnight_dark"] .topbar { background: rgba(23,29,36,.97) !important; border-color: var(--v18-border) !important; }
html[data-theme="midnight_dark"] .panel,
html[data-theme="midnight_dark"] .metric-card,
html[data-theme="midnight_dark"] .task-section,
html[data-theme="midnight_dark"] .work-panel,
html[data-theme="midnight_dark"] .account-grid > *,
html[data-theme="midnight_dark"] .modal-card,
html[data-theme="midnight_dark"] .v18-kpi,
html[data-theme="midnight_dark"] .v18-work-list,
html[data-theme="midnight_dark"] .v18-admin-card,
html[data-theme="midnight_dark"] .v181-user-help,
html[data-theme="midnight_dark"] .v181-role-guide > div,
html[data-theme="midnight_dark"] .v181-user-card,
html[data-theme="midnight_dark"] .table-wrap,
html[data-theme="midnight_dark"] table {
  background: var(--v18-panel) !important; color: var(--v18-text) !important; border-color: var(--v18-border) !important;
}
html[data-theme="midnight_dark"] th { background: var(--v18-panel-soft) !important; color: var(--v18-muted) !important; border-color: var(--v18-border) !important; }
html[data-theme="midnight_dark"] td { color: var(--v18-text) !important; border-color: var(--v18-border) !important; }
html[data-theme="midnight_dark"] tbody tr:hover { background: #1c232b !important; }
html[data-theme="midnight_dark"] input,
html[data-theme="midnight_dark"] select,
html[data-theme="midnight_dark"] textarea,
html[data-theme="midnight_dark"] .global-search-wrap input {
  background: #11171d !important; color: var(--v18-text) !important; border-color: var(--v18-border) !important;
}
html[data-theme="midnight_dark"] input::placeholder,
html[data-theme="midnight_dark"] textarea::placeholder { color: #71808f !important; opacity: 1; }
html[data-theme="midnight_dark"] .btn.soft,
html[data-theme="midnight_dark"] .btn.ghost,
html[data-theme="midnight_dark"] .sync-pill,
html[data-theme="midnight_dark"] .bell-btn,
html[data-theme="midnight_dark"] .v18-work-filters button,
html[data-theme="midnight_dark"] .v18-mini-btn {
  background: #1b222a !important; color: #d8e0e7 !important; border-color: #34404b !important;
}
html[data-theme="midnight_dark"] .btn.primary,
html[data-theme="midnight_dark"] .v18-work-filters button.active,
html[data-theme="midnight_dark"] .v18-mini-btn.primary { background: #29333d !important; border-color: #3a4652 !important; color: #fff !important; }
html[data-theme="midnight_dark"] .v18-kpi strong,
html[data-theme="midnight_dark"] .v181-admin-highlight strong,
html[data-theme="midnight_dark"] .v181-theme-copy b,
html[data-theme="midnight_dark"] h1,
html[data-theme="midnight_dark"] h2,
html[data-theme="midnight_dark"] h3,
html[data-theme="midnight_dark"] h4 { color: var(--v18-text) !important; }
html[data-theme="midnight_dark"] .v181-admin-highlight { background: #1b1b1d !important; border-color: #4b3032 !important; border-left-color: var(--v18-accent) !important; }
html[data-theme="midnight_dark"] #accountPage .pwa-install-card,
html[data-theme="midnight_dark"] #accountPage .push-mobile-card,
html[data-theme="midnight_dark"] #accountPage .current-device-summary,
html[data-theme="midnight_dark"] #accountPage .push-device-row,
html[data-theme="midnight_dark"] #accountPage .push-devices-list > * {
  background: #141b22 !important; color: var(--v18-text) !important; border-color: var(--v18-border) !important;
}
html[data-theme="midnight_dark"] .v181-theme-card,
html[data-theme="midnight_dark"] .appearance-current { background: var(--v18-panel) !important; color: var(--v18-text) !important; border-color: var(--v18-border) !important; }
html[data-theme="midnight_dark"] .v181-theme-icon { background: #11171d !important; border-color: var(--v18-border) !important; }
html[data-theme="midnight_dark"] .v181-theme-card.selected { border-color: var(--v18-accent) !important; }

@media (max-width: 1100px) {
  .account-grid { grid-template-columns: 1fr !important; }
  .v181-role-guide { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .v181-theme-grid { grid-template-columns: 1fr; }
  .v181-role-guide { grid-template-columns: 1fr; }
  .v181-admin-highlight,.v181-user-help { align-items: flex-start; flex-direction: column; }
}


/* =========================================================
   EUROMAR FLOW V18.2 — TASK EXPERIENCE / VISUAL POLISH
   Direction: calm, consistent work surface inspired by modern
   task panels (ClickUp / Asana / Linear), without copying UI.
   ========================================================= */

/* Task drawer is a focused work surface, not a stack of cards. */
#taskModal.modal{
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  padding:0 !important;
  background:rgba(8,13,19,.56) !important;
  backdrop-filter:blur(5px) saturate(.9) !important;
}
#taskModal.modal.hidden{display:none !important;}
#taskModal .modal-card.large{
  width:min(1120px,calc(100vw - 270px)) !important;
  max-width:1120px !important;
  min-width:760px;
  height:100dvh !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  border-radius:16px 0 0 16px !important;
  border:0 !important;
  border-left:1px solid var(--v18-border) !important;
  background:var(--v18-panel) !important;
  color:var(--v18-text) !important;
  box-shadow:-28px 0 80px rgba(8,15,24,.30) !important;
}

/* Header: one calm hierarchy, task title is the focal point. */
#taskModal .modal-head{
  flex:0 0 auto;
  min-height:72px !important;
  margin:0 !important;
  padding:16px 22px 13px !important;
  align-items:center !important;
  background:var(--v18-panel) !important;
  border-bottom:1px solid var(--v18-border) !important;
}
#taskModal .modal-head .eyebrow{
  display:block;
  margin-bottom:3px;
  color:var(--v18-muted-2) !important;
  font-size:8px !important;
  letter-spacing:.14em !important;
}
#taskModal .modal-head h2{
  margin:0 !important;
  max-width:900px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--v18-text) !important;
  font-size:18px !important;
  line-height:1.25;
  font-weight:760 !important;
  letter-spacing:-.025em;
}
#taskModal .modal-head .icon-btn{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:9px !important;
  border:1px solid var(--v18-border) !important;
  background:var(--v18-panel-soft) !important;
  color:var(--v18-muted) !important;
  font-size:20px !important;
  line-height:1 !important;
  box-shadow:none !important;
}
#taskModal .modal-head .icon-btn:hover{
  background:var(--v18-panel) !important;
  color:var(--v18-text) !important;
  border-color:var(--v18-border-strong) !important;
}

/* Tabs follow the Asana/Linear principle: navigation, not buttons. */
#taskModal .v14-task-tabs{
  flex:0 0 auto;
  min-height:44px !important;
  margin:0 !important;
  padding:0 22px !important;
  display:flex !important;
  align-items:stretch !important;
  gap:22px !important;
  overflow-x:auto;
  background:var(--v18-panel) !important;
  border-bottom:1px solid var(--v18-border) !important;
  scrollbar-width:none;
}
#taskModal .v14-task-tabs::-webkit-scrollbar{display:none;}
#taskModal .v14-task-tab{
  position:relative;
  min-height:43px !important;
  padding:0 1px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--v18-muted) !important;
  font-size:10px !important;
  font-weight:720 !important;
  box-shadow:none !important;
  white-space:nowrap;
}
#taskModal .v14-task-tab:hover{color:var(--v18-text) !important;}
#taskModal .v14-task-tab.active{
  background:transparent !important;
  color:var(--v18-text) !important;
  border:0 !important;
}
#taskModal .v14-task-tab.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--v18-accent);
}

/* The form is the only scroll container. */
#taskModal #taskForm{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:22px 24px 0 !important;
  background:var(--v18-panel) !important;
  scrollbar-gutter:stable;
}
#taskModal #taskForm::-webkit-scrollbar{width:10px;}
#taskModal #taskForm::-webkit-scrollbar-track{background:transparent;}
#taskModal #taskForm::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--v18-muted) 32%,transparent);
  border:3px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}

/* Property grid: consistent rhythm and strong labels. */
#taskModal .form-grid[data-v14-panel="summary"]{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  column-gap:16px !important;
  row-gap:14px !important;
  padding:0 !important;
  margin:0 !important;
}
#taskModal .form-grid label,
#taskModal .form-stack label{
  display:grid;
  gap:6px;
  color:var(--v18-muted) !important;
  font-size:10px !important;
  font-weight:680 !important;
  line-height:1.25;
}
#taskModal input,
#taskModal select,
#taskModal textarea{
  width:100%;
  min-height:40px !important;
  padding:9px 11px !important;
  border:1px solid var(--v18-border) !important;
  border-radius:8px !important;
  background:var(--v18-panel-soft) !important;
  color:var(--v18-text) !important;
  font:inherit;
  font-size:12px !important;
  box-shadow:none !important;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
#taskModal textarea{min-height:92px !important;resize:vertical;line-height:1.45;}
#taskModal #taskTitle{
  min-height:44px !important;
  background:var(--v18-panel) !important;
  color:var(--v18-text) !important;
  font-size:14px !important;
  font-weight:700 !important;
}
#taskModal #taskDescription{background:var(--v18-panel) !important;}
#taskModal input:hover,
#taskModal select:hover,
#taskModal textarea:hover{border-color:var(--v18-border-strong) !important;}
#taskModal input:focus,
#taskModal select:focus,
#taskModal textarea:focus{
  outline:0 !important;
  background:var(--v18-panel) !important;
  border-color:#7f8b98 !important;
  box-shadow:0 0 0 3px rgba(100,116,139,.10) !important;
}
#taskModal input::placeholder,
#taskModal textarea::placeholder{color:var(--v18-muted-2) !important;opacity:1;}

/* Sections use dividers and whitespace rather than nested white cards. */
#taskModal .recurrence-block,
#taskModal .execution-block,
#taskModal .workflow-block,
#taskModal .assignment-receipt{
  margin:20px 0 0 !important;
  padding:20px 0 0 !important;
  border:0 !important;
  border-top:1px solid var(--v18-border) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--v18-text) !important;
  box-shadow:none !important;
}
#taskModal .section-row{
  margin:0 0 12px !important;
  align-items:center !important;
  gap:16px !important;
}
#taskModal .section-row h3{
  margin:2px 0 0 !important;
  color:var(--v18-text) !important;
  font-size:13px !important;
  line-height:1.25;
  font-weight:760 !important;
}
#taskModal .section-row .helper,
#taskModal .helper{
  color:var(--v18-muted) !important;
  font-size:9px !important;
  line-height:1.4;
}

/* New-task deadline hint: compact callout, not a giant card. */
#taskModal #assignmentReceipt.v1513-deadlines-panel{
  padding-top:16px !important;
}
#taskModal .v1513-deadlines-empty{
  margin:0 !important;
  padding:12px 13px !important;
  min-height:0 !important;
  gap:11px !important;
  border:1px solid var(--v18-border) !important;
  border-radius:9px !important;
  background:var(--v18-panel-soft) !important;
}
#taskModal .v1513-deadline-empty-icon{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px;
  border-radius:8px !important;
  background:var(--v18-panel) !important;
  border:1px solid var(--v18-border) !important;
  color:var(--v18-info) !important;
  font-size:16px !important;
}
#taskModal .v1513-deadlines-empty h3{
  margin:1px 0 2px !important;
  color:var(--v18-text) !important;
  font-size:11px !important;
}
#taskModal .v1513-deadlines-empty p{
  margin:0 !important;
  color:var(--v18-muted) !important;
  font-size:9px !important;
  line-height:1.4;
}

/* Existing-task deadline control gets the same visual system. */
#taskModal .v1513-deadlines-shell{
  margin:0 !important;
  padding:16px !important;
  border:1px solid var(--v18-border) !important;
  border-radius:10px !important;
  background:var(--v18-panel-soft) !important;
  box-shadow:none !important;
}
#taskModal .v1513-deadlines-head h3,
#taskModal .v1513-date-card strong,
#taskModal .v1513-delivery-info strong{color:var(--v18-text) !important;}
#taskModal .v1513-deadlines-head p,
#taskModal .v1513-date-card small,
#taskModal .v1513-date-card em,
#taskModal .v1513-delivery-info span,
#taskModal .v1513-delivery-info small{color:var(--v18-muted) !important;}
#taskModal .v1513-date-card,
#taskModal .v1513-delivery-strip,
#taskModal .v1513-deadlines-code{
  background:var(--v18-panel) !important;
  border-color:var(--v18-border) !important;
  color:var(--v18-text) !important;
  box-shadow:none !important;
}

/* Checklist is a dense list, as in professional work trackers. */
#taskModal .checklist{gap:6px !important;margin-bottom:12px !important;}
#taskModal .check-item{
  min-height:38px;
  padding:6px 9px !important;
  border:1px solid var(--v18-border) !important;
  border-radius:8px !important;
  background:var(--v18-panel-soft) !important;
  color:var(--v18-text) !important;
}
#taskModal .check-item input[type="text"]{
  min-height:30px !important;
  padding:4px 6px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#taskModal #addCheckBtn{min-height:30px !important;padding:5px 9px !important;}

/* Workflow/chat/files/history follow the same surface system. */
#taskModal .workflow-step-row,
#taskModal .workflow-step-card,
#taskModal .comment-item,
#taskModal .attachment-row,
#taskModal .timeline-item,
#taskModal .dependency-row,
#taskModal .subtask-row,
#taskModal .file-dropzone,
#taskModal .people-picker{
  background:var(--v18-panel-soft) !important;
  color:var(--v18-text) !important;
  border-color:var(--v18-border) !important;
  box-shadow:none !important;
}
#taskModal .workflow-step-card.active{
  background:color-mix(in srgb,var(--v18-info) 7%,var(--v18-panel)) !important;
  border-color:color-mix(in srgb,var(--v18-info) 28%,var(--v18-border)) !important;
}
#taskModal .workflow-step-card.completed{
  background:color-mix(in srgb,var(--v18-success) 7%,var(--v18-panel)) !important;
  border-color:color-mix(in srgb,var(--v18-success) 24%,var(--v18-border)) !important;
}

/* Sticky action bar: predictable and always available. */
#taskModal .modal-footer{
  position:sticky !important;
  z-index:5;
  bottom:0;
  min-height:62px;
  margin:24px -24px 0 !important;
  padding:12px 24px !important;
  background:color-mix(in srgb,var(--v18-panel) 96%,transparent) !important;
  border-top:1px solid var(--v18-border) !important;
  box-shadow:0 -10px 24px rgba(15,23,42,.035) !important;
  backdrop-filter:blur(10px);
}
#taskModal .modal-footer .btn{min-height:36px !important;padding:7px 13px !important;}
#taskModal #saveTaskBtn{
  min-width:88px;
  background:var(--v18-accent) !important;
  border-color:var(--v18-accent) !important;
  color:#fff !important;
}
#taskModal #saveTaskBtn:hover{
  background:var(--v18-accent-dark) !important;
  border-color:var(--v18-accent-dark) !important;
}
#taskModal #deleteTaskBtn{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--v18-danger) !important;
}
#taskModal #deleteTaskBtn:hover{
  background:color-mix(in srgb,var(--v18-danger) 8%,transparent) !important;
  border-color:color-mix(in srgb,var(--v18-danger) 18%,transparent) !important;
}

/* Dark theme: every task surface must belong to the same visual family. */
html[data-theme="midnight_dark"] #taskModal .modal-card.large,
html[data-theme="midnight_dark"] #taskModal .modal-head,
html[data-theme="midnight_dark"] #taskModal .v14-task-tabs,
html[data-theme="midnight_dark"] #taskModal #taskForm{
  background:#171d24 !important;
  color:#e8edf2 !important;
  border-color:#2c3641 !important;
}
html[data-theme="midnight_dark"] #taskModal input,
html[data-theme="midnight_dark"] #taskModal select,
html[data-theme="midnight_dark"] #taskModal textarea{
  background:#11171d !important;
  color:#e8edf2 !important;
  border-color:#303b47 !important;
}
html[data-theme="midnight_dark"] #taskModal #taskTitle,
html[data-theme="midnight_dark"] #taskModal #taskDescription,
html[data-theme="midnight_dark"] #taskModal input:focus,
html[data-theme="midnight_dark"] #taskModal select:focus,
html[data-theme="midnight_dark"] #taskModal textarea:focus{
  background:#141b22 !important;
}
html[data-theme="midnight_dark"] #taskModal .recurrence-block,
html[data-theme="midnight_dark"] #taskModal .execution-block,
html[data-theme="midnight_dark"] #taskModal .workflow-block,
html[data-theme="midnight_dark"] #taskModal .assignment-receipt{
  background:transparent !important;
  border-color:#2c3641 !important;
}
html[data-theme="midnight_dark"] #taskModal .v1513-deadlines-empty,
html[data-theme="midnight_dark"] #taskModal .v1513-deadlines-shell,
html[data-theme="midnight_dark"] #taskModal .check-item,
html[data-theme="midnight_dark"] #taskModal .workflow-step-row,
html[data-theme="midnight_dark"] #taskModal .workflow-step-card,
html[data-theme="midnight_dark"] #taskModal .comment-item,
html[data-theme="midnight_dark"] #taskModal .attachment-row,
html[data-theme="midnight_dark"] #taskModal .timeline-item,
html[data-theme="midnight_dark"] #taskModal .dependency-row,
html[data-theme="midnight_dark"] #taskModal .subtask-row,
html[data-theme="midnight_dark"] #taskModal .file-dropzone,
html[data-theme="midnight_dark"] #taskModal .people-picker{
  background:#1b222a !important;
  color:#e8edf2 !important;
  border-color:#303b47 !important;
}
html[data-theme="midnight_dark"] #taskModal .v1513-date-card,
html[data-theme="midnight_dark"] #taskModal .v1513-delivery-strip,
html[data-theme="midnight_dark"] #taskModal .v1513-deadlines-code,
html[data-theme="midnight_dark"] #taskModal .v1513-deadline-empty-icon{
  background:#141b22 !important;
  color:#e8edf2 !important;
  border-color:#303b47 !important;
}
html[data-theme="midnight_dark"] #taskModal .modal-footer{
  background:rgba(23,29,36,.96) !important;
  border-color:#2c3641 !important;
  box-shadow:0 -10px 24px rgba(0,0,0,.14) !important;
}
html[data-theme="midnight_dark"] #taskModal .v14-task-tab{color:#8f9ba8 !important;}
html[data-theme="midnight_dark"] #taskModal .v14-task-tab:hover,
html[data-theme="midnight_dark"] #taskModal .v14-task-tab.active{color:#f4f7fa !important;}
html[data-theme="midnight_dark"] #taskModal .section-row h3,
html[data-theme="midnight_dark"] #taskModal .v1513-deadlines-empty h3,
html[data-theme="midnight_dark"] #taskModal .modal-head h2{color:#f4f7fa !important;}

/* Responsive: tablet becomes nearly full-width; phone becomes full-screen. */
@media(max-width:1200px){
  #taskModal .modal-card.large{
    width:min(1000px,calc(100vw - 96px)) !important;
    min-width:0;
  }
}
@media(max-width:820px){
  #taskModal .modal-card.large{
    width:100vw !important;
    max-width:none !important;
    min-width:0;
    border-radius:0 !important;
    border-left:0 !important;
  }
  #taskModal .modal-head{padding:14px 16px 12px !important;}
  #taskModal .v14-task-tabs{padding:0 16px !important;gap:18px !important;}
  #taskModal #taskForm{padding:18px 16px 0 !important;}
  #taskModal .modal-footer{margin:22px -16px 0 !important;padding:10px 16px !important;}
}
@media(max-width:620px){
  #taskModal .form-grid[data-v14-panel="summary"]{grid-template-columns:1fr !important;}
  #taskModal .form-grid[data-v14-panel="summary"] .span-2{grid-column:auto !important;}
  #taskModal .section-row{align-items:flex-start !important;flex-direction:column !important;}
  #taskModal .modal-footer{flex-wrap:wrap;}
  #taskModal .modal-footer .spacer{display:none;}
  #taskModal #archiveTaskBtn,#taskModal #deleteTaskBtn{order:2;}
  #taskModal .modal-footer [data-close="taskModal"],#taskModal #saveTaskBtn{order:1;}
}

/* Optional properties: quick-create stays light; editing can expose all. */
#taskModal .v182-advanced-properties{
  margin:2px 0 0;
  border-top:1px solid var(--v18-border);
  padding-top:12px;
}
#taskModal .v182-advanced-properties > summary{
  list-style:none;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:var(--v18-text);
  font-size:10px;
  font-weight:760;
  user-select:none;
}
#taskModal .v182-advanced-properties > summary::-webkit-details-marker{display:none;}
#taskModal .v182-advanced-properties > summary::before{
  content:"›";
  width:22px;height:22px;
  display:grid;place-items:center;
  border:1px solid var(--v18-border);
  border-radius:6px;
  color:var(--v18-muted);
  background:var(--v18-panel-soft);
  font-size:16px;
  line-height:1;
  transition:transform .14s ease;
}
#taskModal .v182-advanced-properties[open] > summary::before{transform:rotate(90deg);}
#taskModal .v182-advanced-properties > summary small{
  margin-left:auto;
  color:var(--v18-muted-2) !important;
  font-size:9px !important;
  font-weight:560 !important;
}
#taskModal .v182-advanced-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 16px;
  padding-top:12px;
}
html[data-theme="midnight_dark"] #taskModal .v182-advanced-properties > summary::before{
  background:#1b222a;
  border-color:#303b47;
  color:#9aa6b3;
}
@media(max-width:620px){
  #taskModal .v182-advanced-properties > summary small{display:none;}
  #taskModal .v182-advanced-grid{grid-template-columns:1fr;}
}