:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #e4e4e7;
  --border-strong: #a1a1aa;
  --text: #18181b;
  --text-muted: #71717a;
  --primary: #18181b;
  --primary-hover: #3f3f46;
  --primary-text: #ffffff;
  --danger: #dc2626;
  --success: #16a34a;
  --radius: 8px;
  --radius-lg: 12px;
  --t5m-proj-fill: #e1f5ee; --t5m-proj-stroke: #0f6e56; --t5m-proj-text: #04342c;
  --t5m-cat-fill: #eeedfe; --t5m-cat-stroke: #534ab7; --t5m-cat-text: #26215c;
  --t5m-fut-stroke: #a1a1aa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #09090b;
    --border: #27272a;
    --border-strong: #52525b;
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --primary: #fafafa;
    --primary-hover: #e4e4e7;
    --primary-text: #18181b;
    --t5m-proj-fill: #0f3b30; --t5m-proj-stroke: #5dcaa5; --t5m-proj-text: #9fe1cb;
    --t5m-cat-fill: #2a2557; --t5m-cat-stroke: #afa9ec; --t5m-cat-text: #cecbf6;
    --t5m-fut-stroke: #52525b;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

a { color: inherit; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.wrap.wide { max-width: 900px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar h1 { font-size: 20px; font-weight: 500; margin: 0; }
.topbar .actions { display: flex; align-items: center; gap: 16px; }

.h2 { font-size: 18px; font-weight: 500; margin: 0; }

.muted { color: var(--text-muted); }
.link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}
.link:hover { color: var(--text); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.tile:hover { border-color: var(--border-strong); }
.tile .name { font-weight: 500; }
.tile .desc { font-size: 14px; color: var(--text-muted); }
.tile.disabled {
  border-style: dashed;
  opacity: .55;
  cursor: default;
}

/* Dashboard tool columns: Administrativ / Creativ */
.tools-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 720px) { .tools-cols { grid-template-columns: 1fr; gap: 22px; } }
.tools-col { display: flex; flex-direction: column; gap: 12px; }
.tools-col-head { display: flex; align-items: center; gap: 9px; padding: 0 2px 6px; }
.tools-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tools-col-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
.tools-col-count { font-size: 11px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; }
.tools-col-admin .tools-dot { background: #6366f1; }
.tools-col-creativ .tools-dot { background: #f97316; }

.tile2 {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tile2:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.09); }
.tile2-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 600;
}
.tools-col-admin .tile2-ico { background: rgba(99,102,241,.13); color: #6366f1; }
.tools-col-admin .tile2:hover { border-color: #6366f1; }
.tools-col-creativ .tile2-ico { background: rgba(249,115,22,.13); color: #f97316; }
.tools-col-creativ .tile2:hover { border-color: #f97316; }
.tile2-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile2-name { font-weight: 500; font-size: 15px; }
.tile2-desc { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.tile2-arrow { margin-left: auto; color: var(--text-muted); font-size: 18px; flex: none; opacity: 0; transition: transform .15s, opacity .15s; }
.tile2:hover .tile2-arrow { opacity: 1; transform: translateX(3px); }
.tile2.disabled { opacity: .5; cursor: default; border-style: dashed; }
.tile2.disabled .tile2-ico { background: var(--bg); color: var(--text-muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

label { font-size: 14px; font-weight: 500; }

textarea, input[type="password"], input[type="text"] {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font: inherit;
  outline: none;
  resize: vertical;
}
textarea:focus, input:focus { border-color: var(--border-strong); }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

button, .btn {
  font: inherit;
  font-weight: 500;
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--text); }
.btn-small { padding: 6px 12px; font-size: 13px; }
button:disabled, .btn:disabled { opacity: .4; cursor: default; }

.result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: pre-wrap;
}

#gsc-corrected { white-space: pre-wrap; margin: 0; }
#gsc-input { min-height: 200px; overflow: hidden; }

.error { color: var(--danger); font-size: 14px; }
.ok { color: var(--success); font-size: 14px; }

/* Web page text builder (Tool 2) */
.t2-toolbar { display: flex; gap: 8px; align-items: center; }
.t2-brief { font-size: 13px; color: var(--text-muted); margin: 0; }
.t2-thread { display: flex; flex-direction: column; gap: 8px; }
.t2-bubble-bot, .t2-bubble-me {
  max-width: 85%; border-radius: 10px; padding: 10px 12px; font-size: 14px;
  white-space: pre-wrap;
}
.t2-bubble-bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.t2-bubble-me { align-self: flex-end; background: var(--primary); color: var(--primary-text); }
.t2-list { display: flex; flex-direction: column; gap: 6px; }
.t2-sec { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: 14px; background: var(--surface); }
.t2-load-row {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px;
}
.t2-load-row:hover { border-color: var(--border-strong); }
#t2-sections { display: flex; flex-direction: column; gap: 16px; }
.t2-sec-card { gap: 10px; }
.t2-sechead { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.t2-sec-text { min-height: 90px; overflow: hidden; }
.t2-sec-controls { display: flex; gap: 6px; align-items: center; }
.t2-ctrl {
  font: inherit; font-size: 12px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2px 8px;
}
.t2-ctrl:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.t2-ctrl:disabled { opacity: .3; cursor: default; }

/* Asistent de ordine (Tool 5) */
.t5-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.t5-dash-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 22px;
  transition: border-color .15s, box-shadow .15s;
}
.t5-dash-card:hover { border-color: var(--primary); box-shadow: 0 3px 14px rgba(0,0,0,.07); }
.t5-dash-h { font-size: 17px; font-weight: 600; color: var(--text); }
.t5-dash-p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
#t5-side { display: block; }
.t5-side-group { margin: 0 0 26px; }
.t5-side-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 12px; }
.t5-side-list { display: flex; flex-direction: column; gap: 10px; }
.t5-side-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 18px; min-height: 78px; font-size: 15px; line-height: 1.35;
  transition: border-color .15s, box-shadow .15s;
}
.t5-side-item:hover { border-color: var(--border-strong); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.t5-side-item.active { border-color: var(--primary); }
.t5-side-item.dragging { opacity: .45; }
.t5-side-grip {
  color: var(--text-muted); cursor: grab; user-select: none; flex: none;
  font-size: 22px; letter-spacing: -5px; opacity: .5;
  align-self: stretch; display: flex; align-items: center;
  padding: 0 10px 0 2px; margin: -20px 0 -20px -6px;
}
.t5-side-grip:hover, .t5-side-item:hover .t5-side-grip { opacity: 1; }
.t5-item-name { font-weight: 500; font-size: 17px; flex: 1; min-width: 0; }
.t5-status { font-size: 11px; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-muted); }
.t5-status-in-lucru { background: rgba(83,97,255,.12); color: #3a46cc; border-color: transparent; }
.t5-status-blocat { background: rgba(220,60,60,.12); color: #c0392b; border-color: transparent; }
.t5-status-delegat { background: rgba(255,170,40,.15); color: #b8770a; border-color: transparent; }
.t5-status-gata { background: rgba(60,184,122,.15); color: #1f7a4d; border-color: transparent; }
.t5-status-de-pornit { background: var(--bg); }
.t5-cat-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.t5-cat-btn {
  font: inherit; cursor: pointer; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 13px 20px;
}
.t5-cat-btn:hover { border-style: solid; }
.t5-cat-count { display: inline-block; background: var(--bg); border-radius: 10px; padding: 1px 9px; font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.t5-main { flex: 1; min-width: 0; }
.t5-dochead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.t5-work { display: flex; gap: 16px; align-items: flex-start; }
.t5-fisa-col { flex: 1; min-width: 0; }
.t5-chat-col { flex: 0 0 380px; max-width: 42%; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 10px; }
@media (max-width: 900px) { .t5-chat-col { flex-basis: 320px; max-width: 50%; } }
.t5-fisa {
  border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px;
  background: var(--surface); overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.t5-fisa h1 { font-size: 20px; margin: 0 0 10px; }
.t5-fisa h2 { font-size: 16px; margin: 18px 0 8px; }
.t5-fisa h3 { font-size: 14px; margin: 14px 0 6px; }
.t5-fisa p { margin: 8px 0; }
.t5-fisa ul, .t5-fisa ol { margin: 8px 0; padding-left: 22px; }
.t5-fisa li { margin: 3px 0; }
.t5-fisa hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.t5-fisa table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 10px 0; }
.t5-fisa th, .t5-fisa td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; }
.t5-fisa th { background: var(--bg); }
.t5-fisa code { background: var(--bg); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.t5-raw { width: 100%; min-height: 440px; font-size: 12px; }
.t5-thread { display: flex; flex-direction: column; gap: 8px; min-height: 200px; max-height: 480px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--surface); }
.t5-bubble-me { align-self: flex-end; background: var(--primary); color: var(--primary-text); border-radius: 10px; padding: 8px 11px; font-size: 13px; max-width: 88%; white-space: pre-wrap; }
.t5-bubble-bot { align-self: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; font-size: 13px; max-width: 92%; white-space: pre-wrap; }
.t5-preview { max-height: 60vh; overflow-y: auto; }

/* --- Structured project view (livrabile + acțiuni trees + context) --- */
.t5-prio { font-size: 11px; padding: 2px 10px; border-radius: 20px; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.t5-progress { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 2px 10px; border-radius: 20px; background: var(--bg); }
.t5-progress-done { background: rgba(60,184,122,.15); color: #1f7a4d; }

.t5-settings-wrap { position: relative; display: inline-block; }
.t5-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 300px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 10px 34px rgba(0,0,0,.16);
}
.t5-pop.hidden { display: none; }
.t5-pop-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px; }
.t5-pop-lbl { display: block; font-size: 12px; color: var(--text-muted); margin: 8px 0 3px; }
.t5-pop input, .t5-pop select { width: 100%; }

/* Full-width stacked: livrabile, then plan de acțiune, then context — each on
   the full width, one under the other. */
.t5-proj { display: flex; flex-direction: column; gap: 16px; }
.t5-proj-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.t5-proj-side { min-width: 0; width: 100%; }
.t5-proj-side .t5-chat-col { position: static; flex: none; max-width: none; width: 100%; margin-top: 10px; }

/* Toolbar reads as a header band, separated from the content below it. */
.t5-headerbar { margin-top: 18px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.t5-dochead { padding-bottom: 12px; }

.t5-tree-sec {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface);
}
.t5-tree-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.t5-tree-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.t5-tree-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.t5-showdone-on { border-color: var(--primary); color: var(--primary); }
.t5-tree-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.t5-tree-empty { font-size: 13px; color: var(--text-muted); padding: 4px 2px; }

/* Context documents — sub-tabs styled like the main tabs (underline) */
.t5-docs-bar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; border-bottom: 1px solid var(--border); margin: 4px 0 14px; }
.t5-doc-tab { font: inherit; font-size: 14px; cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 14px; color: var(--text-muted); }
.t5-doc-tab:hover { color: var(--text); }
.t5-doc-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
.t5-doc-tab.editing { outline: none; box-shadow: 0 0 0 2px rgba(83,97,255,.3); border-radius: 4px; cursor: text; }
.t5-doc-add { font: inherit; font-size: 17px; line-height: 1; cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 7px 12px; color: var(--text-muted); }
.t5-doc-add:hover { color: var(--primary); }

.t5-icon-btn {
  width: 22px; height: 22px; flex: none; padding: 0; line-height: 1; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--text-muted); cursor: pointer;
}
.t5-icon-btn:hover { border-color: var(--primary); color: var(--primary); }

.t5-tree { display: flex; flex-direction: column; }
.t5-showdone-on { border-color: var(--primary) !important; color: var(--primary) !important; }

/* Color marker on main (rank-I) actions: pick a colour → bold coloured text. */
.t5-colorwrap { position: relative; display: inline-flex; align-items: center; flex: none; }
.t5-color { border: none; background: none; cursor: pointer; font-size: 12px; padding: 0 1px; line-height: 1; }
.t5-color:disabled { cursor: default; }
.t5-color-none { color: var(--text-muted); opacity: .5; }
.t5-color-red { color: #c0392b; }
.t5-color-orange { color: #d9791a; }
.t5-color-blue { color: #1e3a8a; }
.t5-node-text.t5-text-red { color: #c0392b; font-weight: 500; }
.t5-node-text.t5-text-orange { color: #d9791a; font-weight: 500; }
.t5-node-text.t5-text-blue { color: #1e3a8a; font-weight: 500; }
.t5-palette { position: absolute; top: 100%; left: 0; z-index: 30; display: flex; gap: 7px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 9px; box-shadow: 0 6px 20px rgba(0,0,0,.14); margin-top: 3px; }
.t5-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; padding: 0; position: relative; }
.t5-swatch-none { background: var(--surface); }
.t5-swatch-none::after { content: "×"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); }
.t5-swatch-red { background: #c0392b; }
.t5-swatch-orange { background: #d9791a; }
.t5-swatch-blue { background: #1e3a8a; }

/* Delegation view — parent chain for context, controls only on target tasks */
.t5-deleg-proj-block { margin-bottom: 18px; }
.t5-deleg-proj-block + .t5-deleg-proj-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.t5-deleg-proj-head { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.t5-deleg-line { display: flex; align-items: center; gap: 8px; padding: 4px 4px; }
.t5-deleg-node.target > .t5-deleg-line { background: var(--bg); border-radius: 7px; }
.t5-deleg-children { margin-left: 15px; padding-left: 12px; border-left: 2px solid var(--border); }
.t5-deleg-task { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.t5-deleg-ctxtask { flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted); }
.t5-deleg-assign { flex: none; cursor: default; }
.t5-deleg-date { flex: none; font-size: 11px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.t5-node { border-radius: 7px; }
.t5-node.dragging { opacity: .45; }
.t5-node-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 7px; }
.t5-node-row:hover { background: var(--bg); }
.t5-grip { color: transparent; cursor: grab; font-size: 12px; letter-spacing: -3px; user-select: none; width: 12px; margin-left: 10px; }
.t5-node-row:hover .t5-grip { color: var(--text-muted); }
.t5-cb { flex: none; }
.t5-node-text { flex: 1; min-width: 0; font-size: 14px; color: var(--text); padding: 2px 3px; border-radius: 4px; outline: none; }
.t5-node-text[contenteditable="true"]:focus { background: var(--bg); box-shadow: 0 0 0 2px rgba(83,97,255,.25); }
.t5-node.done > .t5-node-row > .t5-node-text { color: var(--text-muted); }
/* "Cine" selector on actions — pale colour per state, gray once done. */
.t5-assign { font-size: 11px; border: 1px solid transparent; border-radius: 20px; padding: 1px 5px; cursor: pointer; flex: none; max-width: 110px; }
.t5-assign:disabled { cursor: default; opacity: 1; }
.t5-assign-eu { background: rgba(178,92,58,.16); color: #8a3f22; }
.t5-assign-de-delegat { background: rgba(230,150,40,.22); color: #915607; }
.t5-assign-delegat { background: rgba(224,74,64,.20); color: #ad3128; }
.t5-node.done > .t5-node-row > .t5-assign { background: rgba(130,130,130,.16) !important; color: var(--text-muted) !important; }
.t5-del { border: none; color: transparent; font-size: 16px; }
.t5-node-row:hover .t5-del { color: var(--text-muted); }
.t5-del:hover { color: #c0392b !important; border: none; }
.t5-dup { border: none; color: transparent; font-size: 13px; }
.t5-node-row:hover .t5-dup { color: var(--text-muted); }
.t5-dup:hover { color: var(--primary) !important; border: none; }
/* Due date: compact weekday + date shown inline in the right-hand cluster */
.t5-date-inline { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.t5-date-inline.hidden { display: none; }
.t5-date-clear { border: none; background: none; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 1px; }
.t5-date-clear:hover { color: #c0392b; }
.t5-node.done > .t5-node-row > .t5-date-inline { color: var(--text-muted); }
/* Calendar picker button + visually hidden native date input */
.t5-date-wrap { position: relative; display: inline-flex; flex: none; }
.t5-date-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.t5-date-btn { border: none; opacity: .5; font-size: 13px; }
.t5-node-row:hover .t5-date-btn { opacity: 1; }
.t5-date-btn:hover { opacity: 1; border: none; }
.t5-children { margin-left: 16px; padding-left: 12px; border-left: 2px solid var(--border); }
.t5-children:empty { display: none; }

/* Tabs (Livrabile / Plan de acțiune / Context) */
.t5-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 4px 0 16px; }
.t5-tab { border: none; background: none; padding: 9px 16px; font-size: 14px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.t5-tab:hover { color: var(--text); }
.t5-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
.t5-tab.editing { outline: none; box-shadow: 0 0 0 2px rgba(83,97,255,.3); border-radius: 4px; cursor: text; }

.t5-extract-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.t5-extract-note { font-size: 13px; color: var(--text-muted); flex: 1; min-width: 220px; }
.t5-listhead { display: flex; align-items: center; gap: 10px; }
.t5-backbar { margin: 6px 0 12px; }
.t5-dic-tree { margin: 4px 0; padding-left: 20px; }
.t5-dic-tree li { margin: 3px 0; }
.t5-dic-preview { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.t5-ctx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.t5-ctx-head .t5-tree-title { margin-right: auto; }
.t5-context { min-height: 60px; }
.t5-context .muted { color: var(--text-muted); font-size: 13px; }

/* Shared blocking generation overlay */
.gen-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 18, 0.55);
}
.gen-overlay.hidden { display: none; }
.gen-overlay-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px 34px; max-width: 360px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.35);
}
.gen-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: gen-spin 0.8s linear infinite;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }
.gen-overlay-text { margin: 0; font-size: 15px; color: var(--text); }

/* Web page code builder (Tool 3) */
.t3-globalbar {
  flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5;
}
#t3-sections { display: flex; flex-direction: column; }
/* Each section renders full-width (looks like the real page); a thin compact
   control bar sits directly under it and doubles as the separator/gap. */
.t3-copybar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.t3-sec { display: block; }
.t3-sec-view { width: 100%; }
.t3-sec-view iframe { width: 100%; border: 0; display: block; background: #fff; }
.t3-sec-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  padding: 6px 10px; margin: 3px 0 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.t3-sec-num { font-size: 11px; white-space: nowrap; margin-right: 2px; }
.btn-tiny { font-size: 11px; padding: 2px 8px; line-height: 1.6; }
.t3-sec-instr {
  flex: 1; min-width: 80px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 3px 8px;
}
.t3-secedit-item { margin-bottom: 10px; }
.t3-secedit-title { width: 100%; font-weight: 600; margin-bottom: 4px; }
.t3-secedit-text { width: 100%; min-height: 60px; overflow: hidden; }

/* PDF designer (Tool 4) */
.p4-scheme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.p4-scheme { gap: 10px; }
.p4-swatches { display: flex; gap: 10px; }
.p4-variants { font-size: 12px; color: var(--text-muted); }
.p4-frame { width: 100%; height: 820px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-item {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px;
}
.doc-name { background: none; border: none; color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0; font: inherit; }
.doc-size { color: var(--text-muted); margin-left: 8px; }
.doc-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.doc-remove:hover { color: var(--danger); }

.divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Modal (document viewer/editor) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50;
}
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  width: 100%; max-width: 680px; max-height: 85vh; display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.modal-head .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-head .buttons { display: flex; gap: 8px; flex-shrink: 0; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; overflow-y: auto; }
.modal-body textarea { flex: 1; min-height: 45vh; }
/* Dictation modal: modest textarea + scrollable body so the action buttons
   stay reachable under the preview. */
.t5-dic-modal .modal-body textarea { flex: none; min-height: 120px; }
.icon-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 4px 8px; }
.icon-btn:hover { color: var(--text); }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 360px; }
.hidden { display: none; }

/* ---- Project map (Tool 5) ---- */
.t5-map-toolbar:not(.hidden) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.t5-map-toolbar .on { border-color: var(--primary); color: var(--primary); font-weight: 500; }

/* Step filter: one chip per importance step — pick what you see. */
.t5-map-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.t5-fchip { font: inherit; font-size: 12px; cursor: pointer; padding: 4px 11px; border-radius: 20px;
  border: 1.5px solid var(--cborder, var(--border-strong)); background: var(--cfill, var(--surface)); color: var(--ctext, var(--text)); }
.t5-fchip.off { background: transparent; border-color: var(--border); color: var(--text-muted); text-decoration: line-through; opacity: .7; }
.t5-fchip.off:hover { opacity: 1; }

/* Images pasted into project documents — never wider than the column. */
.t5-fisa img { max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: 8px; border: 1px solid var(--border); }

/* A hidden card that still carries visible children: title only, no box. */
.t5-mghost { color: var(--text-muted); font-size: 13px; padding: 3px 2px; }
.t5-gghost text { fill: var(--text-muted); }
.t5-map-graph { overflow-x: auto; padding: 6px 2px 16px; }

/* Importance scale (the colour IS the rank) — 1 motor · 2 important · 3 normal
   · 4 parcat. Soft pastel fills with dark borders/text: the border carries the
   identity, so the fill can stay calm. Each class defines the three custom props
   that both the HTML cards and the SVG graph read (children inherit them).
   The keys 'amber'/'purple' are legacy identifiers kept so existing data stays
   valid — the actual hues are brick and plum. The user only ever sees the step
   labels ("1 · Motor" …), never these names. */
.t5-mcolor-amber  { --cfill:#F5C4B3; --cborder:#993C1D; --ctext:#4A1B0C; }  /* cărămiziu */
.t5-mcolor-purple { --cfill:#EBD5EE; --cborder:#7D3E8C; --ctext:#3C1B44; }  /* prun */
.t5-mcolor-teal   { --cfill:#EAF8F3; --cborder:#0F6E56; --ctext:#04342C; }
.t5-mcolor-gray   { --cfill:#F5F4EF; --cborder:#B4B2A9; --ctext:#5F5E5A; }
@media (prefers-color-scheme: dark) {
  .t5-mcolor-amber  { --cfill:#5C2313; --cborder:#F0997B; --ctext:#F5C4B3; }
  .t5-mcolor-purple { --cfill:#3E1F47; --cborder:#C79BD2; --ctext:#EBD3F0; }
  .t5-mcolor-teal   { --cfill:#06392E; --cborder:#5DCAA5; --ctext:#9FE1CB; }
  .t5-mcolor-gray   { --cfill:#262624; --cborder:#5F5E5A; --ctext:#B4B2A9; }
}

/* Graph nodes read the same custom props (fallback = neutral surface). */
.t5-map-graph rect { fill: var(--cfill, var(--surface)); stroke: var(--cborder, var(--border-strong)); }
.t5-map-graph text { fill: var(--ctext, var(--text)); pointer-events: none; }
.t5-gclick { cursor: pointer; }
.t5-gclick:hover rect { stroke-width: 2.4; }

/* Editare: cards + one vertical spine per sibling group (drawn in JS) */
.t5-map-list { position: relative; padding: 4px 0 20px; }
.t5-map-list:not(.hidden) { display: flex; flex-direction: column; gap: 8px; }
.t5-mspine { position: absolute; width: 0; border-left: 2px solid var(--border-strong); pointer-events: none; }
.t5-mcard { display: block; width: fit-content; max-width: 100%; border: 1.5px solid var(--cborder, var(--border-strong)); background: var(--cfill, var(--surface)); color: var(--ctext, var(--text)); border-radius: 12px; }
.t5-mcard-head { display: flex; align-items: center; gap: 10px; }
.t5-mcard-toggle { background: none; border: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; margin-right: -4px; opacity: .7; flex: 0 0 auto; }
.t5-mcard-toggle:hover { opacity: 1; }
.t5-mcard-name { color: inherit; font-weight: 500; }
.t5-mcard-name.edit { cursor: text; }
.t5-mcard-name.edit:focus { outline: none; box-shadow: 0 0 0 2px var(--cborder, var(--border-strong)); border-radius: 4px; padding: 0 3px; }
.t5-mcard-open { background: none; border: 1px solid currentColor; color: inherit; opacity: .85; border-radius: 20px; font-size: 12px; padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.t5-mcard-open:hover { opacity: 1; }
.t5-msize-mare  { padding: 15px 20px; min-width: 250px; }
.t5-msize-mare  .t5-mcard-name { font-size: 20px; }
.t5-msize-mediu { padding: 10px 15px; min-width: 195px; }
.t5-msize-mediu .t5-mcard-name { font-size: 15px; }
.t5-msize-mic   { padding: 7px 12px; min-width: 155px; }
.t5-msize-mic   .t5-mcard-name { font-size: 13px; }
/* ---- "Ce am de făcut" dashboard overview ---- */
.t5-todo-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
/* Importance tabs: single-select, tinted with each step's colour (shared --c* vars). */
.t5-todo-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.t5-ttab { font: inherit; font-size: 13px; cursor: pointer; padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--cborder, var(--border-strong)); background: var(--cfill, var(--surface)); color: var(--ctext, var(--text));
  display: inline-flex; align-items: center; gap: 7px; }
.t5-ttab.off { background: transparent; border-color: var(--border); color: var(--text-muted); }
.t5-ttab.off:hover { border-color: var(--cborder, var(--border-strong)); color: var(--text); }
.t5-ttab-n { font-size: 12px; font-weight: 600; opacity: .8; }
.t5-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.t5-seg button { background: var(--surface); border: none; color: var(--text); font-size: 13px; padding: 6px 13px; cursor: pointer; }
.t5-seg button + button { border-left: 1px solid var(--border-strong); }
.t5-seg button.active { background: var(--text); color: var(--surface); }
.t5-todo-countlbl { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.t5-todo-list { display: flex; flex-direction: column; gap: 16px; }
.t5-todo-proj { border-left: 3px solid var(--cborder, var(--border-strong)); padding: 2px 0 2px 13px; }
.t5-todo-projname { display: block; background: none; border: none; padding: 0 0 6px; color: var(--text); font-weight: 600; font-size: 16px; cursor: pointer; text-align: left; }
.t5-todo-projname:hover { text-decoration: underline; }
.t5-todo-item { display: flex; align-items: flex-start; gap: 9px; padding: 3px 0; cursor: pointer; }
.t5-todo-item input { margin-top: 3px; }
.t5-todo-item input[disabled] { cursor: default; }
.t5-todo-text { line-height: 1.4; }
.t5-todo-more { font-size: 12.5px; color: var(--muted); padding: 3px 0 0 25px; }

/* Project one-liner under the title. Cards are width:fit-content, so it needs a
   ceiling of its own or a long note would stretch the card across the page. */
.t5-mcard-desc { margin-top: 4px; max-width: 46ch; opacity: .78; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.t5-msize-mare  .t5-mcard-desc { font-size: 14px; }
.t5-msize-mediu .t5-mcard-desc { font-size: 12.5px; }
.t5-msize-mic   .t5-mcard-desc { font-size: 11.5px; }
.t5-mcard-ctrls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 10px; opacity: 0; transition: opacity .12s; }
.t5-mcard:hover .t5-mcard-ctrls { opacity: 1; }
.t5-mcard-sel { font-size: 12px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.t5-mcard-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 6px; }
.t5-mcard-btn:hover { border-color: var(--primary); }
.t5-mcard-link.on { border-color: var(--success); color: var(--success); }
.t5-mcard-del:hover { border-color: var(--danger); color: var(--danger); }

.t5-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; }
.t5-pick-item { text-align: left; background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; color: var(--text); cursor: pointer; font-size: 14px; }
.t5-pick-item:hover { border-color: var(--primary); }
.t5-pick-item.cur { border-color: var(--success); }

/* Peek overlay: read-only view of a linked project's livrabile & acțiuni. */
.t5-peek-sec { margin-bottom: 14px; }
.t5-peek-h { font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.t5-peek-tree { list-style: none; margin: 0; padding-left: 18px; }
.t5-peek-tree .t5-peek-tree { padding-left: 20px; }
.t5-peek-tree li { margin: 3px 0; line-height: 1.4; }

/* A project's colour tints its card in the list (same palette as the map). */
.t5-side-item[class*="t5-mcolor-"] { background: var(--cfill); border-color: var(--cborder); color: var(--ctext); }
.t5-side-item.active { box-shadow: 0 0 0 2px var(--primary); }
.t5-backbar { display: flex; gap: 8px; align-items: center; }