:root {
  --bg: #f1f6fc; --panel: #ffffff; --line: #dce8f5; --text: #22364d; --muted: #6f84a0;
  --accent: #3f78ad; --accent-soft: #e3eefa; --accent-ink: #ffffff;
  --ok: #4aa987; --warn: #d9a441; --bad: #cf6679;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131b26; --panel: #1b2533; --line: #2a3a4f; --text: #e6eef8; --muted: #8fa4bf;
    --accent: #6ea6dc; --accent-soft: #223249; --accent-ink: #0f1a28;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
button { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.danger { color: var(--bad); }
button.sm { padding: 2px 9px; font-size: 12px; }
.err { color: var(--bad); min-height: 1.2em; }
.muted { color: var(--muted); }
h2 { margin: 0 0 12px; } h3 { margin: 18px 0 8px; }

/* prijava */
.login { display: grid; place-items: center; min-height: var(--vh100, 100vh); background: linear-gradient(160deg, var(--accent-soft), var(--bg)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px; width: 340px; display: grid; gap: 10px; box-shadow: 0 8px 30px rgba(63, 120, 173, .12); }
.card img { width: 100%; max-width: 260px; margin: 0 auto 6px; }

/* okvir */
.app { display: grid; grid-template-rows: 56px 1fr; height: var(--vh100, 100vh); }
header { display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
header .brand img { height: 34px; display: block; }
.spacer { flex: 1; }
nav { display: flex; gap: 2px; }
nav button { border: 0; background: none; border-radius: 8px; }
nav button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.body { display: grid; grid-template-columns: var(--side-w, 300px) 1fr; min-height: 0; position: relative; }
/* razdvojna linija: povuci mišem da proširiš ili skupiš spisak projekata; dvoklik vraća početnu širinu */
#splitter { position: absolute; top: 0; bottom: 0; left: calc(var(--side-w, 300px) - 4px); width: 9px; cursor: col-resize; z-index: 6; touch-action: none; }
#splitter::before { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--line); }
#splitter:hover::before, #splitter.drag::before { width: 3px; left: 3px; background: var(--accent); }
#sideToggle { position: absolute; top: 10px; left: -4px; width: 17px; height: 28px; padding: 0; border-radius: 8px; font-size: 10px; line-height: 1; background: var(--panel); cursor: pointer; }
aside.collapsed { padding: 0; overflow: hidden; border-right: 0; }
@media (max-width: 800px) { #splitter { display: none !important; } }
aside { overflow: auto; padding: 12px 8px; background: var(--panel); border-right: 1px solid var(--line); }
main { overflow: auto; padding: 20px 26px; }
/* Raspored se prilagođava širini prozora */
header { min-width: 0; flex-wrap: wrap; height: auto; min-height: 56px; padding-top: 6px; padding-bottom: 6px; row-gap: 4px; }
.app { grid-template-rows: auto minmax(0, 1fr); }
main { min-width: 0; }
nav { min-width: 0; flex-wrap: wrap; } nav button { white-space: nowrap; }
#timerBar { flex-wrap: nowrap; white-space: nowrap; }
.tw { overflow-x: auto; max-width: 100%; border-radius: 10px; }
.kanban { overflow-x: auto; }
@media (max-width: 1200px) { #who { display: none; } #timerBar .tt { max-width: 110px; } header { gap: 8px; padding-left: 10px; padding-right: 10px; } }
@media (max-width: 1000px) {
  header nav { order: 10; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  header .spacer { display: none; } header .brand { margin-right: auto; }
  main { padding: 14px 12px; }
  .form { max-width: 100%; }
}
@media (max-width: 800px) {
  .body { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr); }
  aside { max-height: calc(var(--vh100, 100vh) * 0.32); border-right: 0; border-bottom: 1px solid var(--line); }
  .row2 { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
}
/* tabela korisnika (9 kolona) postaje spisak kartica već na srednjim širinama, da se ne pomera levo-desno */
@media (max-width: 1280px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr:first-child { display: none; }
  table.stack tr { border-bottom: 2px solid var(--line); padding: 6px 0; }
  table.stack td { border: 0; display: flex; gap: 8px; align-items: center; padding: 3px 10px; }
  table.stack td::before { content: attr(data-label); min-width: 108px; color: var(--muted); font-size: 12px; flex: none; }
  table.stack td.oc { box-shadow: none; border-left: 6px solid var(--oc, transparent); font-weight: 600; }
  table.stack td select, table.stack td input:not([type=checkbox]) { flex: 1; max-width: none; }
}

/* tajmer */
#timerBar { display: flex; align-items: center; gap: 8px; background: var(--accent-soft); border-radius: 10px; padding: 3px 10px; }
#timerBar .t { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }
#timerBar .tt { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell { position: relative; }
.bell b { position: absolute; top: -6px; right: -6px; background: var(--bad); color: #fff; border-radius: 10px; padding: 0 5px; font-size: 11px; }
#notifs { position: absolute; right: 12px; top: 54px; width: 340px; max-height: calc(var(--vh100, 100vh) * 0.6); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); z-index: 20; }
#notifs div { padding: 8px 12px; border-bottom: 1px solid var(--line); }
#notifs .new { background: var(--accent-soft); }
#notifs .seen { background: #f1f3f7; color: #8a94a8; }
#notifs .seen .muted { color: #a3abbb; }
#notifs div.nall { position: sticky; bottom: 0; background: var(--panel); text-align: center; padding: 8px; border-top: 1px solid var(--line); }
#viewAsBar { position: sticky; top: 0; z-index: 50; background: #fff3c4; color: #5a4300; border-bottom: 2px solid #e6b800; padding: 7px 14px; font-size: 14px; text-align: center; }
.flcard { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 10px; padding: 9px 12px; margin: 8px 0; }
.flhead { margin-bottom: 6px; }
.fltrack { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.fl-arrow { align-self: center; color: var(--muted); }
.fl-step { display: flex; flex-direction: column; background: color-mix(in srgb, var(--c) 35%, #fff); border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.fl-step small { color: #5b6b86; font-size: 11px; }
.flact { margin-top: 8px; }
#notifs .ni { border-left: 6px solid var(--nc); }
#notifs .ni.seen { border-left-color: color-mix(in srgb, var(--nc) 45%, #f1f3f7); }
#notifs div.nh { position: sticky; top: 0; background: color-mix(in srgb, var(--nc) 55%, #fff); border-left: 6px solid var(--nc); color: #1f2a44; font-weight: 700; font-size: 13px; padding: 6px 12px; z-index: 1; }
#notifs .nbadge { background: #4f6bd8; color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 8px; margin-left: 6px; }

/* stablo: dubina odredjuje velicinu, boja daje identitet */
.node { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; cursor: pointer; border-left: 4px solid var(--c); }
.node:hover { background: var(--bg); }
.node.sel { background: color-mix(in srgb, var(--c) 22%, transparent); }
.node .tw { width: 16px; text-align: center; color: var(--muted); }
.node .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .hh { font-size: 11px; color: var(--muted); }
.node.d0 { font-size: 16px; font-weight: 700; padding: 9px 8px; margin-top: 8px; border-left-width: 8px; background: color-mix(in srgb, var(--c) 38%, var(--panel)); }
.node.d0:hover { background: color-mix(in srgb, var(--c) 48%, var(--panel)); }
.node.d0.sel { background: color-mix(in srgb, var(--c) 60%, var(--panel)); box-shadow: 0 0 0 2px var(--c); }
.node.d0 .cd { color: var(--text); opacity: .7; }
.kids { border-left: 2px solid color-mix(in srgb, var(--pc, transparent) 55%, transparent); }
.node.d1 { font-size: 14.5px; font-weight: 600; }
.node.d2 { font-size: 13.5px; }
.node.d3, .node.d4, .node.d5 { font-size: 12.5px; color: var(--muted); }
.kids { margin-left: 14px; }

/* ugnjezdene kutije */
.box { border: 2px solid var(--c); border-radius: 12px; padding: 8px 10px 10px; margin: 8px 0; background: color-mix(in srgb, var(--c) calc(8% - var(--lvl) * 1%), var(--panel)); cursor: pointer; }
.box:hover { box-shadow: 0 2px 10px rgba(63, 120, 173, .18); }
.box > .bh { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: calc(16px - var(--lvl) * 1px); }
.box > .bh small { font-weight: 400; color: var(--muted); }
.box { min-width: 0; }
.box .inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 0 10px; }
.box > .bh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar2 { height: 5px; background: var(--line); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.bar2 i { display: block; height: 100%; background: var(--c); }

/* spisak projekata: cijelo polje je obojeno bojom foldera; viši nivo jači ton, dublji svjetliji */
aside .node { margin: 4px 0; padding: 7px 8px; border-radius: 8px; border-left: 8px solid var(--c); color: var(--text);
  background: color-mix(in srgb, var(--c) 30%, var(--panel)); }
aside .node.d0 { background: color-mix(in srgb, var(--c) 52%, var(--panel)); margin-top: 10px; }
aside .node.d1 { background: color-mix(in srgb, var(--c) 40%, var(--panel)); }
aside .node.d2 { background: color-mix(in srgb, var(--c) 30%, var(--panel)); }
aside .node.d3, aside .node.d4, aside .node.d5 { background: color-mix(in srgb, var(--c) 20%, var(--panel)); color: var(--text); }
aside .node:hover { background: color-mix(in srgb, var(--c) 62%, var(--panel)); }
/* izabrani red: pun ton boje, tamni okvir, senka i pomak udesno — jasno se vidi šta je izabrano */
aside .node.node.node.sel { background: var(--c); color: #12202f; font-weight: 800; border-left-width: 12px;
  box-shadow: 0 0 0 3px var(--text), 0 6px 14px rgba(18, 32, 47, .28); position: relative; z-index: 1; transform: translateX(4px); }
aside .node.sel .cd, aside .node.sel .hh { color: #12202f; opacity: .85; }
aside .node.sel .tw { color: #12202f; }
.tdel { margin-left: auto; padding: 1px 6px; font-size: 13px; line-height: 1.2; border-radius: 6px; background: #fff; border: 1px solid #c0392b; color: #c0392b; cursor: pointer; }
.tdel:hover { background: #c0392b; color: #fff; }
aside .node .cd, aside .node .hh { color: var(--text); opacity: .65; }
aside .kids { margin-left: 12px; padding-left: 6px; border-left: 2px solid color-mix(in srgb, var(--pc, var(--line)) 60%, transparent); }
/* kutije strukture: cio naziv se vidi (lomi se u 2–3 reda), šifra i sati idu ispod naziva */
.box .inner { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.box > .bh { flex-direction: column; align-items: stretch; gap: 2px; }
.box > .bh .bn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; }
.box > .bh .bn > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
.box > .bh small { white-space: normal; }
.crumbs { color: var(--muted); margin-bottom: 4px; }
/* naslov projekta / foldera: uokviren, boja foldera, podebljan */
.phead { border: 2px solid var(--c); border-radius: 12px; padding: 10px 16px 12px; margin-bottom: 14px; background: color-mix(in srgb, var(--c) 14%, var(--panel)); }
.phead .crumbs { font-weight: 600; font-size: 12px; margin-bottom: 2px; }
/* namena projekta: iznad naslova, boji se bojom namene */
.ptop { margin-bottom: 6px; min-height: 4px; }
.pchip { display: inline-block; padding: 2px 12px; border-radius: 14px; font-size: 13px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--p) 55%, var(--panel)); border: 2px solid var(--p); }
select.pchip { cursor: pointer; padding-right: 6px; }
.lvlchip { display: inline-block; padding: 0 8px; margin-right: 6px; border-radius: 8px; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; font-weight: 700; background: var(--c); color: #1d2b3a; }
.legend { margin-bottom: 10px; padding: 6px 12px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--line); } .legend div { margin: 4px 0; }
.sec { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.box { border-left-width: 10px; }
.box .bn { display: inline-flex; align-items: center; min-width: 0; }
.lvl { font-style: normal; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; background: var(--c); color: #1d2b3a; padding: 1px 8px; border-radius: 8px; margin-right: 8px; font-weight: 700; white-space: nowrap; display: inline-block; }
.box[data-d="1"] { border-width: 3px 3px 3px 12px; background: color-mix(in srgb, var(--c) 16%, var(--panel)); }
.box[data-d="2"] { border-width: 2px 2px 2px 10px; background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.box[data-d="3"], .box[data-d="4"], .box[data-d="5"] { border-style: dashed; border-width: 2px 2px 2px 6px; background: var(--panel); }
.cd { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.node.d0 .cd { font-weight: 600; }
.codechip { display: inline-block; padding: 0 8px; margin-right: 6px; border-radius: 8px; background: var(--panel); border: 1px solid var(--c); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.codechip.edit { cursor: pointer; } .codechip.edit:hover { background: var(--accent-soft); }
.pdesc { margin: -4px 0 14px; padding: 8px 14px; border-radius: 10px; background: var(--panel); border: 1px dashed var(--line); white-space: pre-wrap; }
.pdesc.edit { cursor: pointer; } .pdesc.edit:hover { border-color: var(--accent); }
.phead h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: .2px; }
.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: color-mix(in srgb, var(--accent-soft) 50%, var(--panel)); cursor: default; }
th.s { cursor: pointer; }
tr.task { cursor: pointer; } tr.task:hover td { background: var(--bg); }
.pill { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; background: var(--line); white-space: nowrap; }
.pill.in_progress { background: #fbefd2; color: #7a5a14; } .pill.review { background: #e7defa; color: #54407e; } .pill.done { background: #d9f0e6; color: #2c6b52; }
.pill.urgent { background: #f9dde2; color: #8a3043; } .pill.high { background: #fbe6d4; color: #8a4f1f; } .pill.low { background: var(--line); }
.pill.pending { background: #fbefd2; color: #7a5a14; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.tile.live { border-color: var(--ok); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line); margin-right: 6px; }
.live .dot { background: var(--ok); }
.form { display: grid; gap: 8px; max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* kanban */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.col { background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg)); border-radius: 12px; padding: 8px; min-height: 120px; }
.col h4 { margin: 4px 6px 8px; font-size: 13px; color: var(--muted); }
.col.over { outline: 2px dashed var(--accent); }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; cursor: grab; }
.kcard small { color: var(--muted); display: block; }

/* detalji taska */
#drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(0,0,0,.12); overflow: auto; padding: 18px; z-index: 30; }
.ttitle[style*="--th"] { background: hsl(var(--th) 70% 88%); border-radius: 6px; padding: 2px 8px; box-shadow: inset 0 0 0 1px hsl(var(--th) 55% 75%); }
.req { color: #e5484d; font-weight: 700; margin-left: 4px; }
.dlgerr { color: #c93a3f; background: #fdecec; border: 1px solid #f3b4b6; border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-weight: 600; }
input.bad, textarea.bad { border-color: #e5484d !important; background: #fff5f5; box-shadow: 0 0 0 2px rgba(229,72,77,.25); }
.wkwrap { position: relative; display: grid; gap: 4px; }
.wkbtn { text-align: left; padding: 9px 12px; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.wkpop { position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 4px; width: 330px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px; }
.wkpop.hidden { display: none; }
.wkhead { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 6px; }
.wkhead button, .wkfoot button { padding: 4px 10px; }
.wkpop table { width: 100%; border-collapse: separate; border-spacing: 0 2px; text-align: center; }
.wkpop th { font-size: 11px; color: var(--muted); font-weight: 600; padding: 2px 0; background: none; }
.wkpop td { padding: 6px 0; font-size: 13px; cursor: pointer; }
.wkpop td:first-child { border-radius: 8px 0 0 8px; } .wkpop td:last-child { border-radius: 0 8px 8px 0; }
.wkpop td.wn { color: var(--muted); font-size: 11px; font-weight: 700; }
.wkpop td.off { color: #b7bfc9; }
.wkpop td:nth-child(7), .wkpop td:nth-child(8), .wkpop th:nth-child(7), .wkpop th:nth-child(8) { color: #9aa3ae; background: #eef0f3; }   /* subota i nedelja: sivo */
.wkpop td.today { font-weight: 800; text-decoration: underline; }
.wkpop tr[data-w]:hover td { background: #bcd3f7 !important; color: #1d2f57 !important; }   /* pregled: ceo red pod mišem */
.wkpop tr.on td { background: #6b82b8 !important; color: #fff !important; font-weight: 700; }   /* izabrana nedelja: ceo red */
.wkfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wkpop tr.cur:not(.on) td.wn { color: #3f5aa3; }
.wkfoot { text-align: right; margin-top: 6px; }
/* forma za izvoz izveštaja: svako polje ima naziv iznad sebe, sva polja iste širine i u istoj liniji */
#rf { display: grid; gap: 12px; }
#rf .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
#rf label, #rf .wkwrap { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
#rf select, #rf .wkbtn { width: 100%; min-width: 0; font-size: 14px; color: var(--text); }
#rf > label { max-width: calc(50% - 6px); }
@media (max-width: 700px) { #rf .row2 { grid-template-columns: 1fr; } #rf > label { max-width: none; } }
/* odmori i grupni kalendar */
.vchip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--c) 70%, #fff); color: #1d2a3f; white-space: nowrap; }
.vchip.pend { background: repeating-linear-gradient(135deg, #e6eaf1 0 5px, #f6f8fb 5px 10px); }
.calbar { align-items: center; flex-wrap: wrap; gap: 6px; }
.calbar .spacer { flex: 1; }
.caltitle { min-width: 190px; text-align: center; }
.calnow { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.calwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
table.cal { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12px; }
table.cal th, table.cal td { border-bottom: 1px solid var(--line); border-right: 1px solid #eef1f6; padding: 0; text-align: center; height: 28px; }
table.cal .calname { position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left; padding: 0 10px; min-width: 190px; white-space: nowrap; }
table.cal .calp { box-shadow: inset 5px 0 0 var(--oc); padding-left: 14px; }
table.cal .calday { min-width: 28px; font-weight: 600; background: #f4f7fb; }
table.cal .calday small { display: block; font-size: 9px; color: var(--muted); font-weight: 500; }
table.cal .calday.today { background: #cfe0fb; }
table.cal .we { background: #eef0f3; color: #9aa3ae; }
table.cal .calc { min-width: 28px; }
.weekv table.cal .calc { min-width: 110px; }
table.cal .calc.vac { background: var(--c); font-weight: 700; color: #1d2a3f; font-size: 11px; }
table.cal .calc.vac.pend { background: repeating-linear-gradient(135deg, var(--c) 0 5px, #fff 5px 10px); }
table.cal .calc.vac small { display: block; font-size: 9px; font-weight: 500; }
.calzoom { display: inline-flex; align-items: center; gap: 4px; background: #e6e9ef; border: 1px solid #cfd5e0; border-radius: 8px; padding: 2px 6px; }
.calzoom button { border: 0; background: #fff; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-weight: 700; }
.calzoom b { min-width: 40px; text-align: center; font-size: 12px; }
.orientrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.orientrow button { background: #e6e9ef; border: 1px solid #cfd5e0; color: #3b4659; border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.orientrow button.on { background: #b9c0cd; border-color: #9aa3b5; color: #1d2a3f; font-weight: 700; }
.offtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.offtabs button { border: 2px solid var(--c, #c8d3e6); background: color-mix(in srgb, var(--c, #c8d3e6) 25%, #fff); color: #1d2a3f; border-radius: 999px; padding: 4px 14px; font-weight: 600; cursor: pointer; }
.offtabs button.on { background: var(--c, #c8d3e6); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
/* današnji dan je uvek obojen: kolona (ljudi po redovima) ili red (dani po redovima) */
table.cal .todaycol { box-shadow: inset 0 0 0 999px rgba(79, 107, 216, .14), inset 2px 0 0 #4f6bd8, inset -2px 0 0 #4f6bd8; }
table.cal tr.todayrow > * { box-shadow: inset 0 0 0 999px rgba(79, 107, 216, .16), inset 0 2px 0 #4f6bd8, inset 0 -2px 0 #4f6bd8; font-weight: 700; }
/* dani po redovima (kao tabela odmora): datumi levo, ljudi u kolonama, projekti iznad imena */
.calwrap.daysv { width: fit-content; max-width: 100%; max-height: calc(var(--vh100, 100vh) * 0.72); overflow: auto; }
/* polje kalendara može da se širi i sužava: povuci donji desni ugao */
.calwrap { resize: horizontal; min-width: 320px; }
.calwrap.daysv { resize: both; }
.calwrap.daysv table.cal { min-width: 0; width: 100%; }
.daysv table.cal .calc { min-width: 56px; height: 24px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daysv table.cal th.rowday { position: sticky; left: 0; z-index: 3; min-width: 92px; width: 92px; max-width: 92px; text-align: left; padding: 0 8px; white-space: nowrap; background: #f4f7fb; font-size: 12px; }
.daysv table.cal th.rowday.we { background: #e9edf3; color: #8a94a8; }
.daysv table.cal th.rowday.rl { background: color-mix(in srgb, var(--c) 70%, #fff); }
.daysv table.cal thead { position: sticky; top: 0; z-index: 4; }
.daysv table.cal th.dgrp { top: 0; background: color-mix(in srgb, var(--c) 55%, #fff); text-align: left; padding: 3px 8px; font-size: 12px; }
.daysv table.cal th.dproj { background: #f4f7fb; color: #6b7893; font-size: 10px; font-weight: 600; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 4px; }
.daysv table.cal th.dname { background: #f4f7fb; font-size: 11px; padding: 4px; white-space: normal; box-shadow: inset 0 -3px 0 var(--oc); line-height: 1.15; }
.daysv table.cal th.dlabel { z-index: 5; }
/* mesec: tabela je tačno onoliko široka koliko treba (ime + dani), bez razvlačenja preko cele strane */
.calwrap:not(.weekv) { width: fit-content; max-width: 100%; }
.calwrap:not(.weekv) table.cal { min-width: 0; width: 100%; }
.calwrap:not(.weekv) table.cal .calname { min-width: 165px; max-width: 165px; width: 165px; overflow: hidden; text-overflow: ellipsis; }
/* sve kolone dana su iste širine, a svi redovi iste visine */
.calwrap:not(.weekv) table.cal .calday, .calwrap:not(.weekv) table.cal .calc { min-width: 22px; }
table.cal td { height: 28px; }
.calbar .caltitle { font-size: 17px; color: #1f3a6b; background: linear-gradient(180deg, #dbe7fb, #c4d7f6); border: 1px solid #9db9ea; border-radius: 8px; padding: 3px 16px; min-width: 170px; text-align: center; letter-spacing: .02em; box-shadow: 0 1px 4px rgba(79, 107, 216, .18); }
table.cal .calc.rule { background: var(--c); font-weight: 700; color: #1d2a3f; font-size: 11px; }
table.cal .calday.rl { background: color-mix(in srgb, var(--c) 70%, #fff); }
.rulesbox { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0; background: var(--panel); }
table.cal .calpick { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--pc) 60%, transparent); outline: 2px solid var(--pc); outline-offset: -2px; }
table.matrix tr.pgrp th { text-align: left; background: #e8eef9; color: #1f3a6b; font-size: 13px; letter-spacing: .02em; padding: 7px 10px; border-top: 2px solid #c9dbf5; }
.slgrp { border-top: 1px solid #eef1f6; padding: 4px 0; }
.slgrp > summary { cursor: pointer; padding: 3px 0; }
table.slt { margin: 6px 0 8px 14px; font-size: 13px; }
.ovbar { height: 6px; border-radius: 4px; background: #e8edf5; margin-top: 3px; min-width: 90px; overflow: hidden; }
.ovbar > i { display: block; height: 100%; }
.rulesbox > summary { cursor: pointer; font-weight: 700; }
.rulesbox .rrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #eef1f6; }
.rulesbox .rform { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 8px 0; }
.rulesbox .rform label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
table.cal .calc.hrs { color: #1f6b34; background: #d3f0d6; font-weight: 600; font-size: 11px; }
table.cal .calc.miss, .calmiss { color: #d9822b; font-weight: 800; }
table.cal .calc.miss { background: #fff3e6; }
table.cal tr.calgrp td { background: color-mix(in srgb, var(--c) 45%, #fff); font-weight: 700; }
table.cal tr.calgrp .calname { background: color-mix(in srgb, var(--c) 45%, #fff); }
.callegend { margin-top: 8px; font-size: 12px; }
.daygrp { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.dayhead { padding: 8px 12px; background: color-mix(in srgb, var(--c) 45%, #fff); }
.dayrow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px 7px 14px; border-top: 1px solid #eef1f6; box-shadow: inset 5px 0 0 var(--oc); }
.dayrow.abs { background: #fbfcfe; }
.hrsb { font-weight: 700; color: #4a6a54; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 5px 12px; background: var(--panel); }
.seg button.on { background: #6b82b8; color: #fff; }
.subtabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.subtabs button { padding: 7px 16px; border-radius: 999px; }
.subtabs button.on { background: #6b82b8; color: #fff; border-color: #6b82b8; }
.subtabs b { background: #e5484d; color: #fff; border-radius: 999px; padding: 0 7px; margin-left: 6px; font-size: 11px; }
@media (max-width: 700px) { table.cal .calname { min-width: 120px; } .caltitle { min-width: 0; } }
#drawer h3 { margin-top: 16px; }
#drawer #close { position: sticky; top: 0; float: right; z-index: 5; margin: 0 0 6px 8px; padding: 6px 14px; background: #e5484d; border-color: #e5484d; color: #fff; font-weight: 600; }
#drawer #close:hover { background: #c93a3f; border-color: #c93a3f; }
.chk { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.cm { padding: 6px 0; border-bottom: 1px solid var(--line); }
.act { font-size: 12px; color: var(--muted); padding: 2px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px 1px 10px; border-radius: 12px; font-size: 12px; background: color-mix(in srgb, var(--c) 40%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 70%, var(--panel)); }
.chip input[type=color] { width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
span.chip { padding: 1px 10px; }
td.oc { box-shadow: inset 6px 0 0 var(--oc, transparent); }
.overlay { position: fixed; inset: 0; background: rgba(34, 54, 77, .45); display: grid; place-items: center; z-index: 60; }
.toast { position: fixed; bottom: 18px; right: 18px; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; z-index: 50; }
.matrix td, .matrix th { text-align: center; } .matrix td:first-child, .matrix th:first-child { text-align: left; }

/* ===== Statusi taskova: ista boja svuda (pilule, Kanban, redovi, filter, detalji) ===== */
:root { --st-todo: #b9c6d8; --st-in_progress: #f2c97d; --st-review: #b7a6e8; --st-done: #8fd0c0; }
.pill.todo        { background: color-mix(in srgb, var(--st-todo) 60%, var(--panel)); border: 1px solid var(--st-todo); color: var(--text); }
.pill.in_progress { background: color-mix(in srgb, var(--st-in_progress) 60%, var(--panel)); border: 1px solid var(--st-in_progress); color: var(--text); }
.pill.review      { background: color-mix(in srgb, var(--st-review) 60%, var(--panel)); border: 1px solid var(--st-review); color: var(--text); }
.pill.done        { background: color-mix(in srgb, var(--st-done) 60%, var(--panel)); border: 1px solid var(--st-done); color: var(--text); }
.pill.todo, .pill.in_progress, .pill.review, .pill.done { font-weight: 600; }

/* Kanban: kolona i kartice u boji statusa */
.col { --st: var(--st-todo); border-top: 6px solid var(--st); background: color-mix(in srgb, var(--st) 20%, var(--panel)); }
.col[data-col="todo"] { --st: var(--st-todo); } .col[data-col="in_progress"] { --st: var(--st-in_progress); }
.col[data-col="review"] { --st: var(--st-review); } .col[data-col="done"] { --st: var(--st-done); }
.col h4 { color: var(--text); font-weight: 800; background: color-mix(in srgb, var(--st) 55%, var(--panel)); padding: 4px 10px; border-radius: 8px; margin: 2px 0 10px; }
.kcard { border-left: 8px solid var(--st); }
.col.over { outline: 3px dashed var(--st); }

/* redovi u listama: traka statusa sa leve strane */
tr.task[data-st] td:first-child { box-shadow: inset 7px 0 0 var(--st, transparent); padding-left: 14px; }
tr.task[data-st="todo"] { --st: var(--st-todo); } tr.task[data-st="in_progress"] { --st: var(--st-in_progress); }
tr.task[data-st="review"] { --st: var(--st-review); } tr.task[data-st="done"] { --st: var(--st-done); }

/* izbor statusa (filter, detalji taska): obojen izabranom bojom, i opcije u spisku */
select.stsel[data-stval="todo"] { background: color-mix(in srgb, var(--st-todo) 55%, var(--panel)); }
select.stsel[data-stval="in_progress"] { background: color-mix(in srgb, var(--st-in_progress) 55%, var(--panel)); }
select.stsel[data-stval="review"] { background: color-mix(in srgb, var(--st-review) 55%, var(--panel)); }
select.stsel[data-stval="done"] { background: color-mix(in srgb, var(--st-done) 55%, var(--panel)); }
.stsel option[value="todo"] { background: color-mix(in srgb, var(--st-todo) 55%, var(--panel)); color: var(--text); }
.stsel option[value="in_progress"] { background: color-mix(in srgb, var(--st-in_progress) 55%, var(--panel)); color: var(--text); }
.stsel option[value="review"] { background: color-mix(in srgb, var(--st-review) 55%, var(--panel)); color: var(--text); }
.stsel option[value="done"] { background: color-mix(in srgb, var(--st-done) 55%, var(--panel)); color: var(--text); }

/* forma za novi task ispod naslova spiska; bočni panel ne smije da izlazi iz prozora */
.ntform { max-width: none; border: 2px solid var(--accent); }
.ntform .row2 > *, #drawer .row2 > * { min-width: 0; }
.ntform label, #drawer label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.ntform input, .ntform select, .ntform textarea, #drawer input, #drawer select, #drawer textarea { min-width: 0; max-width: 100%; color: var(--text); font-size: 14px; }
#drawer { overflow-x: hidden; }
#drawer .form { max-width: 100%; }

/* prozor za potvrdu brisanja */
button.danger.solid { background: #c0392b; border-color: #c0392b; color: #fff; font-weight: 700; }
button.danger.solid:hover { background: #a93226; }
.overlay .card h3 { color: var(--text); }

/* dublji nivoi (podfolderi): pun ton pozadine umjesto isprekidane linije; dublje = nešto jači ton */
.box[data-d="3"], .box[data-d="4"], .box[data-d="5"] { border-style: solid; border-width: 2px 2px 2px 8px; }
.box[data-d="3"] { background: color-mix(in srgb, var(--c) 26%, var(--panel)); }
.box[data-d="4"] { background: color-mix(in srgb, var(--c) 36%, var(--panel)); }
.box[data-d="5"] { background: color-mix(in srgb, var(--c) 46%, var(--panel)); }

/* opis je dio zaglavlja (u okviru), odmah ispod naziva */
.phead .pdesc { margin: 10px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 0; background: none; font-size: 14px; line-height: 1.5; color: var(--text); }
.phead .pdesc.edit:hover { background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 6px; }

/* ukupno sati i dugmad su u zaglavlju (okviru), ispod opisa */
.phead .pbar { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.phead .pbar .bar { margin-bottom: 8px; }
.phead .pbar button:not(.primary):not(.danger) { background: var(--panel); }

/* sitnija traka za prikaz i filtere; objašnjenje nivoa odmah ispod kartice projekta */
.tbar { gap: 6px; margin-bottom: 8px; }
.tbar button, .tbar select, .tbar input { font-size: 12px; padding: 3px 8px; height: 26px; border-radius: 6px; }
.tbar .seg button { padding: 3px 10px; }
.tbar input { width: 150px; }
.legend { margin: -4px 0 12px; padding: 4px 12px; font-size: 12px; color: var(--muted); }
.legend summary { cursor: pointer; }

/* objašnjenje nivoa je skroz gore, iznad kartice projekta */
.legend { margin: 0 0 8px; padding: 3px 10px; }

/* Lista: spisak foldera uvucen po nivoima, svaki u boji svog foldera */
.ftable { margin-bottom: 6px; }
.ftable tr.frow { cursor: pointer; background: color-mix(in srgb, var(--c) 14%, var(--panel)); }
.ftable tr.frow:hover { background: color-mix(in srgb, var(--c) 30%, var(--panel)); }
.ftable td.fn { font-weight: 600; box-shadow: inset 6px 0 0 var(--c); }
.ftable .fdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 8px; }
.ftable td, .ftable th { padding: 5px 10px; }

/* spisak projekata: naziv se lomi u više redova i vidi se cio; u uskom panelu šifra ide u poseban red iznad naziva */
aside { container-type: inline-size; }
aside .node { align-items: flex-start; }
aside .node .nm { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; min-width: 0; }
aside .node .tw, aside .node .cd, aside .node .hh, aside .node .tdel { flex: none; }
aside .node .cd { padding-top: 2px; }
@container (max-width: 320px) {
  aside .node { flex-wrap: wrap; row-gap: 0; }
  aside .node .cd { flex: 1 1 auto; }
  aside .node .nm { order: 5; flex: 1 0 100%; padding-left: 22px; }
}

/* gornji red kartice: namena lijevo, ukupno sati i dugmad desno (sitnija) */
.phead .ptop { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 14px; flex-wrap: wrap; }
.phead .pacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.phead .pacts button { font-size: 12px; padding: 3px 9px; height: 26px; background: var(--panel); border-radius: 6px; }
.phead .pacts button.danger { color: var(--bad); }
.phead .pacts input[type=color] { width: 26px; height: 26px; padding: 1px; border-radius: 6px; }
.phead .ptotal { font-size: 12.5px; margin-right: 4px; white-space: nowrap; }
.phead .pusers { margin-top: 8px; font-size: 12px; }

/* izabrani folder u spisku (Lista) ostaje vidljiv i jasno istaknut */
.ftable tr.frow.fsel { background: var(--c); }
.ftable tr.frow.fsel td { font-weight: 800; color: #12202f; border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); }
.ftable tr.frow.fsel td.cd { color: #12202f; }

/* strelica za otvaranje/zatvaranje u listi foldera */
.ftable .ftw { display: inline-block; width: 18px; text-align: center; cursor: pointer; color: var(--text); user-select: none; font-size: 13px; }
.ftable .ftw:hover { color: var(--accent); transform: scale(1.25); }

/* putanja taska: svaki folder je oznaka u svojoj boji */
.tpath { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 2px; margin-bottom: 3px; }
.pchip2 { display: inline-block; padding: 0 8px; border-radius: 9px; font-size: 11.5px; line-height: 1.6; color: var(--text); font-weight: 600;
  background: color-mix(in srgb, var(--c) 45%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 80%, var(--panel)); }
.psep { color: var(--muted); font-size: 11px; padding: 0 1px; }
.ntform .tpath { display: inline-flex; vertical-align: middle; margin: 0 0 0 4px; }
.crumbs.tpath { margin-bottom: 6px; }

/* ===== Prozor za task: u sredini ekrana, zatamnjena pozadina; „Sačuvaj“ ga zatvara ===== */
#drawer { position: fixed; inset: 0; margin: auto; width: min(780px, 94vw); height: fit-content; max-height: calc(var(--vh100, 100vh) * 0.9); overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; z-index: 40; background: var(--panel);
  /* zatamnjena pozadina je veliki spoljašnji „spread“ senke, pa ne prekriva sam prozor */
  box-shadow: 0 0 0 100vmax rgba(34, 54, 77, .5), 0 24px 70px rgba(18, 32, 47, .45); }
#drawer h2 { margin-top: 6px; }
#tf { grid-template-columns: 1fr 1fr; }
#tf > .row2, #tf > .ppwrap, #tf > label:has(textarea), #tf > label:has([name=report_text]), #tf > button, #tf > div { grid-column: 1 / -1; }
@media (max-width: 640px) { #tf { grid-template-columns: 1fr; } }

/* ===== Prioriteti: ista boja svuda (oznake, izbor, filter) — hitan crveno, visok narandžasto, srednji limun, nizak plavo ===== */
:root { --pr-low: #9ad1e8; --pr-medium: #c4d97d; --pr-high: #f0b48a; --pr-urgent: #e86a7a; }
.pill.low    { background: color-mix(in srgb, var(--pr-low) 60%, var(--panel));    border: 1px solid var(--pr-low);    color: var(--text); }
.pill.medium { background: color-mix(in srgb, var(--pr-medium) 60%, var(--panel)); border: 1px solid var(--pr-medium); color: var(--text); }
.pill.high   { background: color-mix(in srgb, var(--pr-high) 65%, var(--panel));   border: 1px solid var(--pr-high);   color: var(--text); }
.pill.urgent { background: color-mix(in srgb, var(--pr-urgent) 70%, var(--panel)); border: 1px solid var(--pr-urgent); color: var(--text); }
.pill.low, .pill.medium, .pill.high, .pill.urgent { font-weight: 600; }
.pill.urgent { font-weight: 800; }
select.prsel[data-prval="low"]    { background: color-mix(in srgb, var(--pr-low) 50%, var(--panel)); }
select.prsel[data-prval="medium"] { background: color-mix(in srgb, var(--pr-medium) 50%, var(--panel)); }
select.prsel[data-prval="high"]   { background: color-mix(in srgb, var(--pr-high) 55%, var(--panel)); }
select.prsel[data-prval="urgent"] { background: color-mix(in srgb, var(--pr-urgent) 60%, var(--panel)); font-weight: 700; }
.prsel option[value="low"]    { background: color-mix(in srgb, var(--pr-low) 50%, var(--panel));    color: var(--text); }
.prsel option[value="medium"] { background: color-mix(in srgb, var(--pr-medium) 50%, var(--panel)); color: var(--text); }
.prsel option[value="high"]   { background: color-mix(in srgb, var(--pr-high) 55%, var(--panel));   color: var(--text); }
.prsel option[value="urgent"] { background: color-mix(in srgb, var(--pr-urgent) 60%, var(--panel)); color: var(--text); font-weight: 700; }

/* ===== Izbor osoba (izvršilac / učesnici) ===== */
.ppwrap { display: grid; gap: 4px; }
.pplabel { font-size: 12px; color: var(--muted); }
.pp { position: relative; }
.ppbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ppchips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; align-items: center; }
.ppchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 16px; font-size: 13px; color: var(--text);
  background: color-mix(in srgb, var(--c) 28%, var(--panel)); border: 2px solid var(--c); }
.ppchip .chip { font-size: 11px; padding: 0 8px; }
.ppchip i { font-style: normal; cursor: pointer; font-size: 11px; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: color-mix(in srgb, var(--text) 12%, transparent); }
.ppchip i:hover { background: var(--bad); color: #fff; }
.ppadd { margin-left: auto; font-size: 12px; padding: 4px 10px; border-radius: 16px; background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; white-space: nowrap; }
.pppanel { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px rgba(18, 32, 47, .18); }
.ppq { display: block; width: calc(100% - 16px); margin: 8px; }
.pplist { max-height: 300px; overflow-y: auto; padding: 0 8px 8px; }
.pphead { position: sticky; top: 0; z-index: 1; margin: 8px 0 4px; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #12202f; background: color-mix(in srgb, var(--c) 75%, var(--panel)); }
.pprow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 2px 0; border-radius: 8px; cursor: pointer; border-left: 6px solid var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--panel)); }
.pprow:hover { background: color-mix(in srgb, var(--c) 32%, var(--panel)); }
.pprow.on { background: color-mix(in srgb, var(--c) 48%, var(--panel)); box-shadow: inset 0 0 0 2px var(--c); }
.pprow .ppck { width: 18px; font-size: 16px; line-height: 1; flex: none; }
.pprow b { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.pprow.on b { font-weight: 800; }
.pprow .chip { flex: none; font-size: 11px; padding: 0 8px; }

/* članovi projekta: red po ulozi, u boji uloge */
.mrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 10px; margin: 3px 0; border-radius: 8px; border-left: 8px solid var(--c);
  background: color-mix(in srgb, var(--c) 22%, var(--panel)); }
.mrow b { min-width: 150px; }
.mrow .lvl { margin-right: 0; }
.mrow button { margin-left: auto; }

/* taskovi u listi foldera: odmah ispod svog foldera, sa oznakom TASK */
.ftable tr.ftask td { background: var(--panel); font-size: 13px; }
.ftable tr.ftask:hover td { background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--panel)); cursor: pointer; }
.ftable tr.ftask td.fn { box-shadow: inset 6px 0 0 var(--st, transparent), inset 12px 0 0 var(--panel); font-weight: 500; }
.tbadge { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; color: #12202f;
  background: color-mix(in srgb, var(--c, var(--line)) 70%, var(--panel)); border: 1px solid var(--c, var(--line)); }

/* levi spisak, dublji nivoi (disciplina i niže): šifra je u prvom redu, a naziv u drugom redu na celoj širini */
aside .node:is(.d2, .d3, .d4, .d5) { flex-wrap: wrap; row-gap: 1px; }
aside .node:is(.d2, .d3, .d4, .d5) .cd { flex: 1 1 auto; font-size: 11px; }
aside .node:is(.d2, .d3, .d4, .d5) .nm { order: 5; flex: 1 0 100%; padding-left: 22px; font-weight: 600; }

/* manje uvlačenje na dubljim nivoima, da naziv ne ostane preuzak */
aside .kids .kids .kids { margin-left: 6px; padding-left: 3px; }
aside .kids .kids .kids .kids .kids { margin-left: 3px; padding-left: 2px; }
aside .node:is(.d3, .d4, .d5) .nm { padding-left: 14px; }
aside .node:is(.d3, .d4, .d5) { padding-left: 4px; padding-right: 4px; }

/* naziv taska u prvom planu; putanja sitna ispod njega */
.ttitle { font-size: 15px; font-weight: 800; letter-spacing: .1px; color: var(--text); }
.tpath.small { margin-top: 3px; margin-bottom: 0; gap: 2px 1px; }
.tpath.small .pchip2 { font-size: 10px; line-height: 1.35; padding: 0 6px; font-weight: 500; opacity: .8; border-width: 1px; }
.tpath.small .psep { font-size: 9px; opacity: .6; padding: 0; }

/* peščani sat koji se vrti dok neko radi na tasku */
.hg { display: inline-block; margin-right: 5px; font-size: 1.05em; line-height: 1; animation: hgspin 2s linear infinite; transform-origin: 50% 55%; }
@keyframes hgspin { to { transform: rotate(360deg); } }
.kcard .hg { float: right; margin: 0 0 0 6px; }
@media (prefers-reduced-motion: reduce) { .hg { animation: none; } }

i.hg { font-style: normal; }
/* naziv u levom spisku ne može da se skupi na jedno slovo (okomit tekst): lomi se samo po rečima i ima najmanju širinu; šifra se skraćuje pre naziva */
aside .node .nm { overflow-wrap: break-word; word-break: normal; min-width: 9ch; hyphens: manual; }
aside .node .cd { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
aside .node.sel .nm { min-width: 9ch; }

/* naziv taska: veći tekst, ali ne podebljan */
.ttitle { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.ftable tr.ftask td.fn b { font-weight: 400; font-size: 14px; }

/* status po osobi: obojena oznaka za svakog zaposlenog na tasku */
.ppl { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; }
.pill.pps { font-size: 11.5px; padding: 0 8px; white-space: nowrap; }
.pill.pps .hg { margin-right: 3px; }
.nowrap { white-space: nowrap; }

/* ===== Mali prozor za zaposlene (desktop, ?compact=1) ===== */
body.compact header, body.compact aside, body.compact #splitter { display: none !important; }
body.compact .app { display: block; height: auto; min-height: var(--vh100, 100vh); }
body.compact .body { display: block; }
body.compact main { padding: 0; overflow: visible; background: var(--bg); }
.cmp { max-width: 520px; margin: 0 auto; padding-bottom: 20px; }
.cmp-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #3b6db3; color: #fff; position: sticky; top: 0; z-index: 5; }
.cmp-head img { height: 26px; background: #fff; border-radius: 6px; padding: 2px 6px; }
.cmp-btns { display: flex; gap: 6px; }
.cmp-btns button { background: transparent; border: 0; color: #fff; font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 8px; cursor: pointer; }
.cmp-btns button:hover { background: rgba(255, 255, 255, .22); }
.cmp-now { background: #3b6db3; padding: 4px 12px 12px; display: grid; gap: 8px; position: sticky; top: 42px; z-index: 5; }
.cmp-row { display: flex; gap: 8px; align-items: center; }
.cmp-row select, .cmp-row input { flex: 1; min-width: 0; border-radius: 18px; border: 0; padding: 7px 14px; background: #fff; color: #22364d; }
.cmp-clock { min-width: 96px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; background: #fff; color: #22364d; border-radius: 18px; padding: 6px 10px; }
.cmp-clock.live { color: #1c7c58; }
.cmp-week { background: #8bd9a9; color: #12202f; font-weight: 700; border-radius: 18px; padding: 6px 12px; white-space: nowrap; font-size: 13px; }
.cmp-round { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; background: transparent; color: #fff; font-size: 16px; cursor: pointer; padding: 0; flex: none; }
.cmp-round:hover:not(:disabled) { background: rgba(255, 255, 255, .25); } .cmp-round:disabled { opacity: .45; cursor: default; }
.cmp-section { display: flex; justify-content: space-between; margin: 12px 14px 6px; padding-bottom: 3px; border-bottom: 2px solid var(--line); font-weight: 800; }
.cmp-card, .cmp-entry { display: flex; align-items: center; gap: 10px; margin: 8px 12px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); }
.cmp-card.live { border-color: #1c7c58; background: color-mix(in srgb, #8bd9a9 20%, var(--panel)); }
.cmp-main { flex: 1; min-width: 0; }
.cmp-title { font-size: 15px; font-weight: 600; margin: 2px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-note { font-size: 12px; font-style: italic; margin-top: 2px; }
.cmp-play { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent); background: var(--panel); color: var(--accent); font-size: 16px; cursor: pointer; flex: none; padding: 0; }
.cmp-play.small { width: 30px; height: 30px; font-size: 12px; } .cmp-play:hover { background: var(--accent-soft); } .cmp-play.live { background: #1c7c58; border-color: #1c7c58; color: #fff; }
.cmp-day { display: flex; justify-content: space-between; margin: 12px 14px 0; font-weight: 700; font-size: 13px; }
.cmp-entry { padding: 6px 10px; font-size: 13px; } .cmp-entry.wait { opacity: .75; border-style: dashed; }
.cmp-dur { font-variant-numeric: tabular-nums; font-weight: 700; }
.dot-st { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--st-todo); flex: none; }
.dot-st.in_progress { background: var(--st-in_progress); } .dot-st.done { background: var(--st-done); } .dot-st.todo { background: var(--st-todo); }
.linkbtn { border: 0; background: none; padding: 0 4px; color: var(--accent); cursor: pointer; font-size: 12px; text-decoration: underline; }

.fpick { width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: -2px; cursor: pointer; }
#bPickDel[hidden] { display: none; }

/* razlika po nivoima u listi foldera: projekat najveći, faza srednja, disciplina manja */
.ftable tr.frow.d0 td { font-size: 17px; padding-top: 9px; padding-bottom: 9px; }
.ftable tr.frow.d0 td.fn { font-weight: 800; }
.ftable tr.frow.d1 td { font-size: 15px; padding-top: 7px; padding-bottom: 7px; }
.ftable tr.frow.d1 td.fn { font-weight: 700; }
.ftable tr.frow.d2 td { font-size: 13.5px; }
.ftable tr.frow.d2 td.fn { font-weight: 600; }
.ftable tr.frow.d3 td { font-size: 12.5px; }
.ftable tr.frow.d3 td.fn { font-weight: 500; }
.ftable tr.frow.d0 .fdot { width: 13px; height: 13px; }
.ftable tr.frow.d1 .fdot { width: 11px; height: 11px; }

/* levi panel: svaki sledeci nivo je malo manji (projekat > faza > disciplina > dublje) */
aside .node.d0 { font-size: 15.5px; }
aside .node.d1 { font-size: 13.5px; }
aside .node.d2 { font-size: 12.5px; }
aside .node.d3 { font-size: 11.5px; }
aside .node.d4 { font-size: 10.5px; }
aside .node.d5 { font-size: 10px; }
aside .node.d3 .cd, aside .node.d4 .cd, aside .node.d5 .cd { font-size: 9.5px; }
aside .node.d1 .cd, aside .node.d2 .cd { font-size: 10.5px; }
aside .node.d4, aside .node.d5 { padding-top: 4px; padding-bottom: 4px; }
aside .node.node.node.sel.d2 { font-size: 12.5px; }
aside .node.node.node.sel.d3 { font-size: 11.5px; }
aside .node.node.node.sel.d4 { font-size: 10.5px; }
aside .node.node.node.sel.d5 { font-size: 10px; }
.lockchip { background: #f3e3b3; color: #5b4300; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }

/* peščani sat u plavoj boji (umesto žutog emoji-ja): tekst se krije, crtež dolazi iz SVG-a */
.hg { font-size: 0 !important; width: 1.05rem; height: 1.05rem; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b7dd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12M6 22h12M7 2c0 5 3 7 5 10-2 3-5 5-5 10M17 2c0 5-3 7-5 10 2 3 5 5 5 10'/%3E%3Cpath d='M9 20c1-2 2-3 3-3s2 1 3 3z' fill='%236aa6ee' stroke='none'/%3E%3Cpath d='M9 5.5c1 1 2 1.6 3 1.6s2-.6 3-1.6z' fill='%236aa6ee' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; }
.kcard .hg { width: 1rem; height: 1rem; }

.dur { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.dur input { width: 64px; text-align: center; font-size: 18px; font-weight: 700; }
.dur b { font-weight: 600; color: var(--muted); }

.seg button[data-mode] { white-space: normal; text-align: left; line-height: 1.25; }

/* kompaktna traka kalendara: kontrole nisu veće od same tabele */
#calBox .calbar { gap: 5px; margin: 4px 0; }
#calBox .calbar button, #calBox .calbar select, #calBox .calbar .seg button { font-size: 12px; padding: 2px 9px; height: 26px; line-height: 1.2; }
#calBox .calbar .seg button { padding: 2px 11px; }
#calBox .calbar .caltitle { font-size: 14px; padding: 2px 12px; min-width: 130px; border-radius: 6px; }
#calBox .calbar .inl { font-size: 12px; }
#calBox .calzoom { padding: 1px 4px; }
#calBox .calzoom button { width: 22px; height: 22px; padding: 0; font-size: 13px; }
#calBox .calzoom b { font-size: 11px; min-width: 36px; }
#calBox .orientrow { margin: 2px 0 0; gap: 4px; font-size: 12px; }
#calBox .orientrow button { font-size: 11px; padding: 2px 9px; border-radius: 5px; }
#calBox .offtabs { margin: 4px 0 6px; gap: 4px; }
#calBox .offtabs button { font-size: 12px; padding: 2px 11px; border-width: 1px; }
#calBox .calnow { font-size: 12px; margin: 3px 0; }
#calBox .callegend { font-size: 11px; }
#calBox .calsub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 2px 0 4px; }
#calBox .calsub .orientrow, #calBox .calsub .offtabs { margin: 0; }
#calBox .calwrap.daysv { max-height: calc(var(--vh100, 100vh) * 0.82); }
#calBox .calwrap { margin-top: 2px; }

/* tabele dozvola i kartica: uže, kolone uloga kompaktne umesto razvučene preko cele strane */
table.matrix { width: auto; min-width: 0; table-layout: auto; }
table.matrix td, table.matrix th { padding: 4px 10px; font-size: 13px; }
table.matrix th:not(:first-child), table.matrix td:not(:first-child) { width: 92px; min-width: 92px; max-width: 92px; }
table.matrix td:first-child, table.matrix th:first-child { min-width: 280px; max-width: 360px; }
table.matrix tr.pgrp th { padding: 5px 10px; }
table.matrix input[type=checkbox] { margin: 0; }

/* manje kartice (pločice) svuda: Odmori, Pregled firme, Dashboard */
.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tile { padding: 7px 10px; border-radius: 9px; font-size: 13px; line-height: 1.3; }
.tile .muted { font-size: 12px; }
.tile div[style*="font-size:22px"], .tile div[style*="font-size:20px"] { font-size: 17px !important; }
.kcard { padding: 6px 8px; font-size: 13px; }

.chip .chipx { border: 0; background: transparent; color: #6b7893; cursor: pointer; padding: 0 2px 0 4px; font-size: 11px; line-height: 1; }
.chip .chipx:hover { color: #d9534f; }
.chip [data-rn] { cursor: text; }

.bar .chip .chipx, .chip .chipx { all: unset; cursor: pointer; color: #6b7893; font-size: 11px; line-height: 1; padding: 0 2px 0 6px; }
.bar .chip .chipx:hover, .chip .chipx:hover { color: #d9534f; }
.chip[data-ro] { cursor: grab; }

/* discipline u Zaposleni: jedna ispod druge, odozgo nadole */
.bar.vlist { flex-direction: column; align-items: flex-start; gap: 5px; }
.bar.vlist .chip { width: fit-content; max-width: 100%; }

.bar.vlist .addrow { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }

.bar.vlist .addrow { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }

details.coll { margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 4px 10px; }
details.coll > summary { cursor: pointer; font-weight: 700; font-size: 15px; padding: 5px 0; }
details.coll[open] > summary { border-bottom: 1px solid #eef1f6; margin-bottom: 8px; }

/* tabela zaposlenih: padajući izbori ne razvlače tabelu (dugi nazivi disciplina se skraćuju) */
table.stack select[data-disc] { width: 190px; max-width: 190px; text-overflow: ellipsis; }
table.stack select[data-role], table.stack select[data-off] { max-width: 150px; text-overflow: ellipsis; }

/* tabela zaposlenih: sve staje u ekran, bez razvlačenja i bez klizača (samo širi ekrani) */
@media (min-width: 900px) {
  #main table.stack { table-layout: fixed; width: 100%; font-size: 12.5px; }
  #main table.stack th, #main table.stack td { padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; }
  #main table.stack th:nth-child(1) { width: 11%; } #main table.stack th:nth-child(2) { width: 16%; } #main table.stack th:nth-child(3) { width: 11%; }
  #main table.stack th:nth-child(4) { width: 10%; } #main table.stack th:nth-child(5) { width: 15%; } #main table.stack th:nth-child(6) { width: 6%; }
  #main table.stack th:nth-child(7) { width: 15%; } #main table.stack th:nth-child(8) { width: 5%; } #main table.stack th:nth-child(9) { width: 11%; }
  #main table.stack td select { width: 100%; max-width: 100%; min-width: 0; font-size: 12px; padding: 3px 4px; text-overflow: ellipsis; }
  #main table.stack td input[type=number] { width: 100% !important; min-width: 0; padding: 3px 4px; }
  #main table.stack td:last-child { white-space: normal; }
  #main table.stack td:last-child button { font-size: 11px; padding: 3px 7px; margin: 1px 1px 1px 0; }
}

/* još uže: tabela zaposlenih ima fiksne uske kolone (u pikselima) i ne razvlači se preko cele strane */
@media (min-width: 900px) {
  #main table.stack { width: 1090px; max-width: 100%; table-layout: fixed; font-size: 12px; }
  #main table.stack th, #main table.stack td { padding: 3px 5px; line-height: 1.25; }
  #main table.stack th:nth-child(1) { width: 120px; } #main table.stack th:nth-child(2) { width: 175px; } #main table.stack th:nth-child(3) { width: 125px; }
  #main table.stack th:nth-child(4) { width: 105px; } #main table.stack th:nth-child(5) { width: 150px; } #main table.stack th:nth-child(6) { width: 52px; }
  #main table.stack th:nth-child(7) { width: 140px; } #main table.stack th:nth-child(8) { width: 46px; } #main table.stack th:nth-child(9) { width: 177px; }
  #main table.stack td select { font-size: 11.5px; padding: 2px 3px; height: 26px; }
  #main table.stack td input[type=number] { height: 26px; font-size: 12px; }
  #main table.stack td:last-child button { padding: 2px 6px; }
  #uOff, #uDisc { max-width: 190px; }
}

/* kolona je široka koliko najduži tekst u njoj, pa počinje sledeća (bez praznih razmaka); dugi izbori se skraćuju */
@media (min-width: 900px) {
  #main table.stack { table-layout: auto; width: max-content; max-width: none; }
  #main table.stack th, #main table.stack td { width: auto !important; white-space: nowrap; overflow: visible; }
  #main table.stack th:nth-child(1), #main table.stack th:nth-child(2), #main table.stack th:nth-child(3), #main table.stack th:nth-child(4), #main table.stack th:nth-child(5),
  #main table.stack th:nth-child(6), #main table.stack th:nth-child(7), #main table.stack th:nth-child(8), #main table.stack th:nth-child(9) { width: auto; }
  #main table.stack td select { width: auto; max-width: 190px; }
  #main table.stack td select[data-slpick] { max-width: 170px; }
  #main table.stack td input[type=number] { width: 52px !important; }
  #main table.stack td:last-child { white-space: normal; min-width: 120px; }
}

/* panel tabele zaposlenih može da se širi i skuplja: povuci donji desni ugao */
.tw:has(> table.stack) { resize: horizontal; overflow: auto; width: fit-content; max-width: 100%; min-width: 360px; border: 1px solid var(--line); border-radius: 8px; padding-bottom: 6px; }
@media (min-width: 900px) { .tw:has(> table.stack) > table.stack { min-width: 100%; } }

.tw:has(> table.stack) { width: 100%; }   /* po početku prati širinu prozora */

/* Postavke: tabele u prozorima koji se otvaraju i zatvaraju, i kompaktnije */
#main details.coll table { font-size: 12.5px; }
#main details.coll td, #main details.coll th { padding: 3px 8px; }
#main details.coll > summary { font-size: 15px; }

/* birač boje: ceo kvadrat je u boji (ne tanka linija) */
input[type=color] { -webkit-appearance: none; appearance: none; width: 36px; height: 28px; min-width: 36px; padding: 0 !important; border: 1px solid #b9c2d3; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; vertical-align: middle; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 5px; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 5px; }
/* kvadratić boje u čipovima (kancelarije / discipline / namene) ostaje mali */
.chip input[type=color] { width: 18px; height: 14px; min-width: 18px; border-radius: 3px; }

/* Postavke: tabele u prozorima su guste, kolone uz same (bez velikih razmaka) */
#main details.coll > table, #main details.coll > .tw { width: auto; max-width: 100%; }
#main details.coll table td, #main details.coll table th { padding: 2px 6px; white-space: nowrap; }
#main details.coll table input:not([type=color]):not([type=checkbox]) { padding: 3px 6px; height: 26px; font-size: 12.5px; }
#main details.coll table input[type=color] { width: 30px; height: 24px; min-width: 30px; }
#main details.coll table tr { height: 30px; }

/* Pregled firme: gušće tabele, kolone uz same i niži redovi */
table.ovt { width: auto; min-width: 560px; }
table.ovt th, table.ovt td { padding: 3px 14px 3px 8px; white-space: nowrap; }
table.ovt td:first-child, table.ovt th:first-child { min-width: 230px; }
table.ovt tr { height: 30px; }
table.ovt .ovbar { min-width: 120px; margin-top: 2px; height: 5px; }
.tw:has(> table.ovt) { width: fit-content; max-width: 100%; }

/* cela aplikacija: tabele su guste i široke koliko im sadržaj treba (bez velikih razmaka između kolona) */
#main table:not(.cal):not(.matrix):not(.stack) { width: auto; max-width: 100%; min-width: 0; font-size: 13px; }
#main table:not(.cal):not(.matrix):not(.stack) th, #main table:not(.cal):not(.matrix):not(.stack) td { padding: 5px 12px 5px 8px; overflow-wrap: anywhere; }
#main table:not(.cal):not(.matrix):not(.stack) td { max-width: 520px; }
#main table:not(.cal):not(.matrix):not(.stack) tr.task td { padding-top: 6px; padding-bottom: 6px; }
.tw:not(:has(> table.cal)):not(:has(> table.stack)) { width: fit-content; max-width: 100%; }
#drawer table, #drawer table th, #drawer table td { font-size: 12.5px; }
#drawer table { width: auto; max-width: 100%; }
#drawer th, #drawer td { padding: 5px 12px 5px 8px; }

/* trake napredovanja (plan / stvarno sati) ne idu do kraja ekrana */
#main .bar2 { max-width: 520px; }
#main .bar2 + small { display: block; }

/* kalendar odmora zauzima celu širinu aplikacije (i dalje može da se sužava povlačenjem donjeg desnog ugla) */
#calBox .calwrap, #calBox .calwrap:not(.weekv), #calBox .calwrap.daysv { width: 100%; max-width: 100%; }
#calBox .calwrap table.cal, #calBox .calwrap:not(.weekv) table.cal, #calBox .calwrap.daysv table.cal { width: 100%; min-width: 100%; }

/* kad se prozor sužava, kalendar se sabija zajedno sa njim (kolone dana / osoba se ravnomerno smanjuju) */
#calBox .calwrap:not(.weekv) table.cal { table-layout: fixed; }
#calBox .calwrap:not(.weekv) table.cal .calday, #calBox .calwrap:not(.weekv) table.cal .calc { min-width: 0 !important; width: auto; max-width: none; overflow: hidden; text-overflow: clip; padding: 0 1px; }
#calBox .calwrap:not(.weekv):not(.daysv) table.cal .calname { width: 165px; min-width: 120px; max-width: 165px; }
#calBox .calwrap.daysv table.cal th.rowday { width: 92px; min-width: 70px; max-width: 92px; }
#calBox .calwrap.daysv table.cal th.dname, #calBox .calwrap.daysv table.cal th.dproj { overflow: hidden; text-overflow: ellipsis; }

#main table.stack td input[data-uphone] { width: 130px; height: 26px; font-size: 12px; padding: 3px 6px; }

/* trake sa prekidačima i filterima (prikaz Struktura / Lista / Kanban, pretraga, filteri): sitnije, tanje linije, sivo (samo prikaz) */
#main .bar:not(.calbar) .seg { border: 1px solid #d3d8e1; border-radius: 6px; background: #eceef2; padding: 1px; gap: 1px; }
#main .bar:not(.calbar) .seg button { background: transparent; color: #4a5568; border: 0; border-radius: 5px; padding: 2px 10px; font-size: 12px; height: 24px; line-height: 1.2; box-shadow: none; }
#main .bar:not(.calbar) .seg button.on { background: #b9c0cd; color: #1d2a3f; font-weight: 700; }
#main .tbar input, #main .tbar select, #main .bar:not(.calbar) > select { height: 26px; font-size: 12px; padding: 2px 8px; background-color: #f1f3f7; border: 1px solid #d3d8e1; border-radius: 6px; box-shadow: none; }
#main .tbar { gap: 6px; margin: 6px 0; }
#main .bar h3 { font-size: 15px; }
#main .bar > button.primary:not(.sm) { height: 28px; padding: 2px 12px; font-size: 13px; }

/* lista foldera i taskova: tanji redovi i sitniji tekst; brojevi i sati ne prelamaju */
table.ftable td, table.ftable th { padding: 3px 8px; font-size: 12.5px; line-height: 1.25; }
table.ftable tr.frow.d0 td { font-size: 14px; font-weight: 700; }
table.ftable tr.frow.d1 td { font-size: 13px; font-weight: 600; }
table.ftable td:nth-last-child(-n+3) { white-space: nowrap; }
table.ftable tr.ftask td { padding-top: 2px; padding-bottom: 2px; }

/* + Podfolder: ispod zaglavlja foldera, kao grana koja se račva iz foldera; malo deblje dugme */
.branchrow { display: flex; align-items: flex-end; margin: 6px 0 0 18px; }
.branchline { width: 22px; height: 22px; border-left: 3px solid var(--c, #b9c2d3); border-bottom: 3px solid var(--c, #b9c2d3); border-bottom-left-radius: 10px; margin-right: 4px; margin-bottom: 16px; }
.branchbtn { border: 2px solid var(--c, #9db9ea); background: color-mix(in srgb, var(--c, #9db9ea) 25%, #fff); color: #1d2a3f; font-weight: 700; font-size: 14px; padding: 6px 18px; border-radius: 10px; cursor: pointer; }
.branchbtn:hover { background: color-mix(in srgb, var(--c, #9db9ea) 45%, #fff); }

.branchbtn { font-weight: 800 !important; }

.branchrow { flex-wrap: wrap; }
.branchhint { flex-basis: 100%; margin: 3px 0 0 52px; font-size: 12px; color: var(--muted); }

/* opis uz dugme stoji desno od njega, u istom redu (ne ispod) */
.branchrow { flex-wrap: nowrap; align-items: flex-end; }
.branchhint { flex-basis: auto; margin: 0 0 0 14px; align-self: center; line-height: 1.3; max-width: 560px; }
@media (max-width: 800px) { .branchrow { flex-wrap: wrap; } .branchhint { flex-basis: 100%; margin: 3px 0 0 40px; } }

/* opis je uvek u istom redu odmah posle dugmeta (nastavak linije), bez prelamanja */
.branchrow, .branchrow:has(.branchhint) { flex-wrap: nowrap !important; }
.branchhint { flex-basis: auto !important; margin: 0 0 0 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; align-self: center; }

.branchhint { margin-left: 6px !important; transform: translateY(4px); }

/* opis uz dugme: sivo i kurziv, kao objašnjenje */
.branchhint { color: #8a94a8 !important; font-style: italic; font-size: 12px; }

/* objašnjenja u zagradi su sivi kurziv u celoj aplikaciji */
h2 > .muted.small, h3 > .muted.small, summary > .muted.small, .branchhint, .hint, p.muted.small { font-style: italic; color: #8a94a8; }

/* grana + dugme: malo manji */
.branchrow { margin: 4px 0 0 14px; }
.branchline { width: 16px; height: 16px; margin-bottom: 12px; border-width: 2px; border-bottom-left-radius: 8px; }
.branchbtn { padding: 3px 12px !important; font-size: 13px !important; border-radius: 8px; border-width: 1.5px; }

/* Članovi projekta: uočljiv okvir i naslov, pregled članova i kad je zatvoren */
details#mdet { border: 2px solid #9db9ea; border-radius: 12px; background: #f3f7ff; padding: 6px 12px; }
details#mdet > summary.msum { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 16px; color: #1f3a6b; padding: 4px 0; }
details#mdet .mprev { display: inline-flex; flex-wrap: wrap; gap: 4px; font-size: 12px; font-weight: 400; }
details#mdet[open] .mprev { display: none; }

/* članovi projekta: kolone (ime | uloga | kancelarija | disciplina | dugme), da sve stoji ravno jedno ispod drugog */
.mrow { display: grid !important; grid-template-columns: minmax(150px, 1.4fr) 150px 130px minmax(180px, 1.6fr) auto; align-items: center; gap: 6px 14px; }
.mrow .lvl { justify-self: start; white-space: nowrap; }
.mrow .mcell { min-width: 0; }
.mrow .mcell .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
@media (max-width: 800px) { .mrow { grid-template-columns: 1fr 1fr; } }

/* kad je izabran projekat, ostali projekti u levom spisku su posivljeni (i dalje se mogu otvoriti klikom) */
#side .node.dim { opacity: .42; filter: grayscale(.85); transition: opacity .15s, filter .15s; }
#side .node.dim:hover { opacity: .85; filter: grayscale(.2); }

/* članovi projekta: kompaktno, da ne zauzima pola ekrana */
details#mdet { padding: 3px 10px 6px; border-width: 1.5px; }
details#mdet > summary.msum { font-size: 14px; padding: 2px 0; }
details#mdet .bar { margin: 4px 0 6px; gap: 6px; }
details#mdet .bar select, details#mdet .bar button { height: 26px; font-size: 12px; padding: 2px 8px; }
.mrow { padding: 2px 10px !important; font-size: 12.5px; min-height: 0 !important; margin: 3px 0 !important; border-radius: 8px; gap: 4px 12px !important; }
.mrow b { font-size: 13px; }
.mrow .lvl { font-size: 10.5px; padding: 1px 8px; }
.mrow .chip { font-size: 11px; padding: 0 8px; }
.mrow button.sm { padding: 1px 8px; font-size: 11px; }

/* + Task: naslov (Taskovi … (7)) desno od dugmeta, a objašnjenje ispod njega */
.branchtxt { display: flex; flex-direction: column; justify-content: center; margin-left: 12px; align-self: center; min-width: 0; }
.branchtxt h3 { margin: 0; font-weight: 800; font-size: 15px; }
.branchtxt .branchhint { margin: 1px 0 0 0 !important; transform: none !important; }

/* naslov i objašnjenje uz + Task u jednoj liniji, bez izlaska iz okvira */
.taskbar, .taskbar .branchrow { max-width: 100%; overflow: hidden; }
.taskbar .branchtxt { flex-direction: row; align-items: baseline; gap: 10px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.taskbar .branchtxt h3 { white-space: nowrap; flex: 0 0 auto; }
.taskbar .branchtxt .branchhint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }

.taskbar .branchtxt { justify-content: flex-start !important; margin-left: 10px; flex: 0 1 auto; }

.cend { font-size: 11px; color: #6b7893; font-weight: 400; }
.cend.soon { color: #b45f06; font-weight: 700; }
.cend.exp { color: #c0392b; font-weight: 700; }

/* tabele dozvola i kartica: zaglavlja uloga se prelamaju u više redova (ne preklapaju se) */
#main details.coll table.matrix th, table.matrix th { white-space: normal !important; overflow-wrap: break-word; line-height: 1.15; font-size: 11.5px; padding: 4px 4px !important; vertical-align: bottom; }
table.matrix th:not(:first-child), table.matrix td:not(:first-child) { width: 96px; min-width: 96px; max-width: 96px; }
table.matrix th:not(:first-child) { text-align: center; }

/* forma za novi task: uža polja, ne protežu se preko cele strane */
.ntform { max-width: 820px; padding: 10px 14px; }
.ntform .row2 { grid-template-columns: repeat(2, minmax(0, 260px)); gap: 8px 14px; }
.ntform input:not([type=checkbox]), .ntform select, .ntform textarea { font-size: 13px; padding: 5px 8px; }
.ntform input[name=title], .ntform textarea, .ntform input[name=tags] { max-width: 640px; }
.ntform input[type=date], .ntform input[type=number], .ntform select { max-width: 260px; }
.ntform label { gap: 2px; }
.ntform textarea { min-height: 54px; }

#drawer details.coll { margin: 10px 0; padding: 3px 10px; }
#drawer details.coll > summary { font-size: 14px; }
#drawer details.coll .act { padding: 2px 0; }

.pill.ed { cursor: pointer; }
.pill.ed:hover { filter: brightness(.95); box-shadow: 0 0 0 2px rgba(79,107,216,.25); }
select.edsel { height: 26px; font-size: 12px; padding: 1px 6px; border-radius: 8px; }

/* dnevni prikaz kalendara odmora: uzak, da se ime i status ne razvlače preko celog ekrana */
#calBox .daygrp { max-width: 520px; }
#calBox .dayrow { gap: 16px; }

/* Dan / Nedelja / Mesec: samo prikaz, sivo i sitnije kao izbor rasporeda */
#calBox .calbar .seg { background: #e6e9ef; border: 1px solid #cfd5e0; border-radius: 6px; padding: 1px; gap: 1px; }
#calBox .calbar .seg button { background: transparent; color: #3b4659; border-radius: 5px; font-size: 11px; height: 22px; padding: 1px 9px; }
#calBox .calbar .seg button.on { background: #b9c0cd; color: #1d2a3f; font-weight: 700; }

/* izabrana kancelarija / Sve kancelarije: jasno zatamnjeno polje */
#calBox .offtabs button { opacity: .75; }
#calBox .offtabs button.on { opacity: 1; background: color-mix(in srgb, var(--c, #c8d3e6) 55%, #1d2a3f); border-color: color-mix(in srgb, var(--c, #c8d3e6) 35%, #1d2a3f); color: #fff; font-weight: 700; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }

/* Odobravanja: kartice i panel u bojama obaveštenja (taskovi plava, odmori zelena) */
.apsubs button { background: color-mix(in srgb, var(--c) 22%, #fff); border: 2px solid var(--c); color: #1d2a3f; font-weight: 600; opacity: .8; }
.apsubs button.on { opacity: 1; background: color-mix(in srgb, var(--c) 60%, #1d2a3f); border-color: color-mix(in srgb, var(--c) 40%, #1d2a3f); color: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.apanel { background: color-mix(in srgb, var(--c) 14%, #fff); border: 2px solid var(--c); border-radius: 12px; padding: 0 14px 12px; margin-top: 4px; }
.apanel .aphead { margin: 0 -14px 6px; padding: 8px 14px; background: color-mix(in srgb, var(--c) 55%, #fff); border-radius: 10px 10px 0 0; font-weight: 800; font-size: 15px; color: #1f2a44; }
.apanel > h3:first-of-type { margin-top: 6px; }

/* putanja ispod naziva taska: sitnija i sivkasta */
.tpath.small .pchip2 { font-size: 9px; padding: 0 5px; opacity: .65; filter: grayscale(.45); color: #6b7585; }
.tpath.small .psep { font-size: 8px; opacity: .45; }

/* naziv taska svuda: podebljan, pun pastelni pravougaonik u boji po nazivu (iste boje za isti naziv) */
.ttitle[style*="--th"] { display: inline-block; font-weight: 700; background: hsl(var(--th) 72% 85%); border: 0; border-left: 5px solid hsl(var(--th) 55% 62%); border-radius: 6px; padding: 3px 10px; box-shadow: none; color: #1f2a44; line-height: 1.3; }
.kcard .ttitle { display: block; margin: 2px 0; }

/* putanja ispod naziva taska: jos sitnija, sivkasta slova */
.tpath.small .pchip2 { font-size: 8.5px; line-height: 1.3; padding: 0 5px; color: #7b8494 !important; opacity: .7; filter: grayscale(.6); font-weight: 500; }
.tpath.small .psep { font-size: 8px; color: #a3abbb; opacity: .6; }

/* putanja: čitljiva, ali u drugom planu */
.tpath.small .pchip2 { font-size: 9.5px; color: #5f6878 !important; opacity: .85; filter: grayscale(.35); }
.tpath.small .psep { font-size: 9px; opacity: .7; }

/* naziv taska: uvek bold i pun obojen pravougaonik (jači od starijih pravila) */
b.ttitle[style*="--th"] { font-weight: 800 !important; background: hsl(var(--th) 72% 85%) !important; border-left: 5px solid hsl(var(--th) 55% 60%) !important; box-shadow: none !important; padding: 3px 10px !important; }
.tpath.small { margin-top: 4px; }
.tpath.small .pchip2 { font-size: 9px !important; font-weight: 400 !important; color: #6b7585 !important; filter: grayscale(.5); opacity: .8; }
.tpath.small .psep { color: #b4bcc9; opacity: .6; }


/* u putanji ispod taska samo projekat (prvi čip) je podebljan, sa debljim okvirom */
.tpath.small .pchip2:first-child { font-weight: 700 !important; border-width: 2px !important; color: #3f4756 !important; opacity: .95; }

/* putanja svuda (liste, kanban, dashboard, odobravanja…): isti sitan sivkast stil, samo projekat podebljan */
.tpath .pchip2 { font-size: 9px !important; font-weight: 400 !important; color: #6b7585 !important; filter: grayscale(.5); opacity: .8; line-height: 1.35; padding: 0 5px; }
.tpath .psep { color: #b4bcc9; opacity: .6; font-size: 8px; }
.tpath .pchip2.pj { font-weight: 700 !important; border-width: 2px !important; color: #3f4756 !important; opacity: .95; }
.tpath.small .pchip2:first-child { font-weight: 400 !important; border-width: 1px !important; color: #6b7585 !important; opacity: .8; }
.tpath.small .pchip2.pj:first-child { font-weight: 700 !important; border-width: 2px !important; color: #3f4756 !important; opacity: .95; }

/* Tok i istorija odobravanja: šire, a niže stavke; koraci u jednom redu (naziv · osoba · datum) */
.flcard { padding: 8px 16px; margin: 6px 0; }
.flhead { margin-bottom: 5px; font-size: 14px; }
.fltrack { align-items: center; gap: 10px; }
.fl-step { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 330px; padding: 5px 16px; font-size: 13px; }
.fl-step small { margin-left: auto; padding-left: 12px; white-space: nowrap; }
.fl-arrow { font-size: 16px; }

/* filter statusa u toku odobravanja: Čeka žuto, Odobreno zeleno, Odbijeno crveno */
#main .flseg { gap: 4px; background: transparent; border: 0; padding: 0; }
#main .flseg button { background: color-mix(in srgb, var(--c) 25%, #fff); border: 2px solid var(--c); color: #1d2a3f; border-radius: 8px; padding: 3px 12px; height: auto; opacity: .85; }
#main .flseg button.on { opacity: 1; font-weight: 800; background: color-mix(in srgb, var(--c) 70%, #1d2a3f); border-color: color-mix(in srgb, var(--c) 45%, #1d2a3f); color: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }

/* trajanje (h : min): oznaka u svom redu, polja ispod, da se tekst ne preklapa */
.card span.small.muted:has(+ .dur) { display: block; margin-bottom: 2px; white-space: nowrap; }
.card .dur { display: flex; margin-top: 2px; }

/* Zaposleni: podkartice umesto liste ispod liste */
.stabs { flex-wrap: wrap; margin-bottom: 10px; }
.stabs button { background: #e6e9ef; border: 1px solid #cfd5e0; color: #3b4659; border-radius: 8px; padding: 5px 14px; font-size: 13px; }
.stabs button.on { background: #b9c0cd; border-color: #9aa3b5; color: #1d2a3f; font-weight: 700; }
.stsec[hidden] { display: none !important; }

/* Odmori: dugme za zahtev je odmah uz naslov, vidljivo i bold */
.vtop { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 4px 0 12px; }
.vreq { font-weight: 800; font-size: 14px; padding: 8px 18px; border-radius: 8px; box-shadow: 0 2px 6px rgba(79, 107, 216, .3); }

/* Odmori: podkartice (kalendar / moji zahtevi / praznici / za odobravanje), isti stil kao u Zaposlenima */
.vtabs { flex-wrap: wrap; margin: 6px 0 10px; }
.vtabs button { background: #e6e9ef; border: 1px solid #cfd5e0; color: #3b4659; border-radius: 8px; padding: 5px 14px; font-size: 13px; }
.vtabs button.on { background: #b9c0cd; border-color: #9aa3b5; color: #1d2a3f; font-weight: 700; }
.vsec[hidden] { display: none !important; }
/* Dodaj osobu je levo, pa izabrane osobe */
.ppadd { margin-left: 0 !important; margin-right: 8px; }
.ppbox { justify-content: flex-start; }

/* Poređenje istog taska: lista postojećih taskova ispod polja */
.cmpwrap { position: relative; display: inline-block; }
.cmpwrap input { width: 420px; max-width: 80vw; }
.cmpsug { position: absolute; left: 0; top: 100%; margin-top: 2px; z-index: 30; width: 100%; max-height: 280px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(30, 50, 90, .18); }
.cmpsug.hidden { display: none; }
.cmpopt { padding: 7px 12px; cursor: pointer; border-bottom: 1px solid #eef1f6; }
.cmpopt:hover { background: var(--accent-soft); }

/* sitan kurziv ispod dugmeta (npr. Gotovo: finalno završeno) */
.abtn { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; }
.ahint { font-size: 9.5px; font-style: italic; color: #8a94a8; margin-top: 2px; white-space: nowrap; }

/* task u listi: cela ćelija (naziv + putanja) je u pastelnoj boji naziva, naziv je manji */
td.tcell { background: hsl(var(--th) 70% 93%) !important; box-shadow: inset 6px 0 0 hsl(var(--th) 55% 62%); padding-left: 16px !important; }
td.tcell .ttitle[style*="--th"], td.tcell b.ttitle[style*="--th"] { background: transparent !important; border: 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 800 !important; }
td.tcell .tpath.small .pchip2 { background-color: color-mix(in srgb, var(--c) 35%, #fff); }

/* putanja unutar obojene ćelije taska: bez boje (providno, sivi okvir i slova) */
td.tcell .tpath .pchip2 { background: transparent !important; background-color: transparent !important; border-color: #cfd5df !important; color: #7b8494 !important; filter: none; opacity: 1; }
td.tcell .tpath .pchip2.pj { color: #4a5465 !important; border-color: #aab2c0 !important; }
td.tcell .tpath .psep { color: #aab2c0; }

/* završni dugmići (Gotovo za sve, Potvrdi završetak): zeleno, da se ne mešaju sa Start (plavo, izgleda kao izabrano) */
button.donebtn { background: #d3f0d6; border: 1px solid #8fd0a0; color: #1f6b34; font-weight: 700; }
button.donebtn:hover { background: #bfe8c5; }

/* prioritet: pravougaonik oštrih ivica i tekst u boji prioriteta (razlikuje se od statusa koji je zaobljen) */
.pill.low, .pill.medium, .pill.high, .pill.urgent { border-radius: 2px !important; border-width: 2px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; padding: 1px 8px; }
.pill.low { color: #2f6f93 !important; border-color: #5fa7cc !important; }
.pill.medium { color: #4f7a2a !important; border-color: #8fbf5a !important; }
.pill.high { color: #b0560f !important; border-color: #e98a3a !important; }
.pill.urgent { color: #b3262f !important; border-color: #e5484d !important; }

/* task u hijerarhiji (Struktura / Lista foldera): sitnije i lakše slovo */
td.fn b.ttitle[style*="--th"] { font-size: 12.5px !important; font-weight: 600 !important; padding: 1px 8px !important; border-left-width: 4px !important; }

/* status taska: veća polja, jača boja i tekst druge (tamnije) boje po statusu */
.pill.todo, .pill.in_progress, .pill.review, .pill.done { font-size: 13px !important; font-weight: 800 !important; padding: 4px 14px !important; border-width: 2px !important; border-radius: 999px; }
.pill.todo { background: #dde3ee !important; border-color: #aab5cc !important; color: #3a4a68 !important; }
.pill.in_progress { background: #fbdca0 !important; border-color: #e8b04a !important; color: #8a4b00 !important; }
.pill.review { background: #e3d6f7 !important; border-color: #b79be3 !important; color: #55349a !important; }
.pill.done { background: #bfe8c5 !important; border-color: #6fc283 !important; color: #17632f !important; }

/* osobe na tasku: jedna ispod druge */
.ppl { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 3px; }

/* osobe na tasku: male oznake (veća polja važe samo za status taska) */
.pill.pps { font-size: 11px !important; font-weight: 600 !important; padding: 0 7px !important; border-width: 1px !important; line-height: 1.5; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pill.pps .hg { font-size: 10px; margin: 0; display: inline-block; }

/* simbol uz prioritet */
.pill.urgent::before { content: "❗ "; }
.pill.high::before { content: "▲ "; font-size: 9px; }
.pill.medium::before { content: "● "; font-size: 8px; vertical-align: 1px; }
.pill.low::before { content: "▼ "; font-size: 9px; }

/* peščanik: u redu taska desno od naziva; u kontrolama tajmera ispred dugmadi */
.tline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tline .hg { margin: 0; line-height: 1; }
.runctl { display: inline-flex; align-items: flex-start; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.runctl .hg { align-self: center; margin: 0; }

/* peščanik uz naziv foldera: u istom redu, iste veličine kao tekst */
.nwn { white-space: nowrap; }
.nwn .hg { margin: 0 0 0 8px; width: 1em; height: 1em; vertical-align: -0.15em; }

/* simboli samo za hitan i visok; nizak i srednji bez simbola */
.pill.low::before, .pill.medium::before { content: none !important; }

/* lista foldera i taskova: zbijeniji redovi (manji razmak) */
.ftable td, .ftable th { padding-top: 2px !important; padding-bottom: 2px !important; }
.ftable tr.frow td { height: 26px; }
.ftable tr.ftask td { height: 28px; }
.ftable .pill.todo, .ftable .pill.in_progress, .ftable .pill.review, .ftable .pill.done { font-size: 11.5px !important; padding: 1px 10px !important; border-width: 1px !important; }
.ftable .pill.low, .ftable .pill.medium, .ftable .pill.high, .ftable .pill.urgent { font-size: 10px; padding: 0 7px; border-width: 1px !important; }
.ftable .pill.pps { padding: 0 6px !important; }
.ftable .ppl { gap: 1px; }
.ftable td.fn b.ttitle[style*="--th"] { padding: 0 8px !important; }

/* status taska ima svoju paletu, različitu od oznaka osoba (osobe zadržavaju žuto / zeleno / sivo) */
.pill.todo:not(.pps) { background: #ffffff !important; border: 2px dashed #9aa6bb !important; color: #55617a !important; }
.pill.in_progress:not(.pps) { background: #cfe8ff !important; border-color: #6bb0f0 !important; color: #0b4f94 !important; }
.pill.review:not(.pps) { background: #e3d6f7 !important; border-color: #b79be3 !important; color: #55349a !important; }
.pill.done:not(.pps) { background: #c6f0e2 !important; border-color: #4fc3a1 !important; color: #0f6b53 !important; }

/* članovi projekta: zbijeniji, kolone ne bežе preko celog ekrana */
.mrow { grid-template-columns: 170px 130px 100px 170px auto !important; justify-content: start; gap: 2px 10px !important; margin: 1px 0 !important; padding: 1px 10px !important; }
.mrow button { margin-left: 0; }

/* lista foldera: još manja da taskovi ispod dominiraju */
.ftable { font-size: 11.5px !important; }
.ftable td, .ftable th { padding-top: 1px !important; padding-bottom: 1px !important; font-size: 11.5px; }
.ftable tr.frow td { height: 21px; }
.ftable tr.ftask td { height: 23px; }
.ftable tr.frow.d0 td.fn, .ftable tr.frow.d1 td.fn, .ftable tr.frow.d2 td.fn, .ftable tr.frow.d3 td.fn { font-size: 12px; }
.ftable .fdot { width: 8px !important; height: 8px !important; margin-right: 6px; }
.ftable tr.frow.d0 .fdot, .ftable tr.frow.d1 .fdot { width: 9px !important; height: 9px !important; }
.ftable input[type=checkbox] { width: 13px; height: 13px; }
.ftable td.fn b.ttitle[style*="--th"] { font-size: 11px !important; font-weight: 600 !important; padding: 0 7px !important; }
.ftable .pill.todo, .ftable .pill.in_progress, .ftable .pill.review, .ftable .pill.done { font-size: 10.5px !important; padding: 0 8px !important; }
.ftable .pill.low, .ftable .pill.medium, .ftable .pill.high, .ftable .pill.urgent { font-size: 9px !important; padding: 0 6px !important; }
.ftable .pill.pps { font-size: 10px !important; }
.ftable .chip { font-size: 10px; padding: 0 6px; }

/* kanban kartica: prioritet desno gore, peščanik levo od njega */
.kcard { position: relative; }
.kcard > .pill.low, .kcard > .pill.medium, .kcard > .pill.high, .kcard > .pill.urgent { position: absolute; top: 6px; right: 8px; margin: 0; }
.kcard .tpath { padding-right: 92px; }
.kcard .hg { position: absolute; top: 8px; right: 98px; float: none; margin: 0; }

/* nazivi foldera (grane) u listi: bold na svim nivoima */
.ftable tr.frow td.fn { font-weight: 700 !important; }
.ftable tr.frow.d0 td.fn { font-weight: 800 !important; }

/* redovi taskova: sve u koloni poravnato po sredini (vertikalno) */
tr.task > td, tr.task > th, .ftable tr.ftask > td { vertical-align: middle !important; }

/* sve tabele u svim karticama: sadržaj poravnat po sredini reda (osim kalendara) */
#main table:not(.cal) td, #main table:not(.cal) th { vertical-align: middle !important; }

/* u listi foldera nazivi taskova nisu bold (bold su samo grane / folderi) */
.ftable td.fn b.ttitle[style*="--th"], td.fn b.ttitle[style*="--th"] { font-weight: 400 !important; }

/* kanban: prioritet u istoj liniji sa putanjom, ne zalazi u naziv */
.kcard > .pill.low, .kcard > .pill.medium, .kcard > .pill.high, .kcard > .pill.urgent { top: 6px !important; height: 18px; line-height: 14px !important; padding: 0 8px !important; box-sizing: border-box; display: inline-flex; align-items: center; font-size: 10px !important; }
.kcard .tpath { min-height: 20px; margin-bottom: 4px; align-items: center; }
.kcard .ttitle { margin-top: 0; }

/* Statistika: manje tabele (naziv taska, status, razmaci) */
#hrs table td, #hrs table th, #board table td, #board table th, #cmp table td { padding-top: 3px !important; padding-bottom: 3px !important; }
#hrs b.ttitle[style*="--th"], #board b.ttitle[style*="--th"], #cmp b.ttitle[style*="--th"] { font-size: 12.5px !important; padding: 1px 8px !important; }
#hrs .pill.todo, #hrs .pill.in_progress, #hrs .pill.review, #hrs .pill.done, #board .pill.todo:not(.pps), #board .pill.in_progress:not(.pps), #board .pill.review:not(.pps), #board .pill.done:not(.pps) { font-size: 11px !important; padding: 1px 10px !important; border-width: 1px !important; }
#hrs .tpath.small .pchip2, #board .tpath.small .pchip2 { font-size: 9px !important; }
#hrs td.oc b { font-size: 13px; }

/* naslovi sekcija u Odmorima (praznici, kolektivni, neradni, državni, spisak slava): jači, uokvireni, siva prozirna traka */
#rulesBox h4, #slaveBox h3, #slaveBox h4, #rulesBox details.rulesbox > summary { background: rgba(110, 124, 150, .16); border: 1px solid rgba(110, 124, 150, .4); border-radius: 6px; padding: 6px 12px; font-size: 14px; font-weight: 800; color: #1f2a44; margin: 14px 0 6px; }
#rulesBox details.rulesbox > summary { margin: 0 0 8px; font-size: 15px; }
#rulesBox h4 { display: block; }

/* kalendar odmora: kancelarije su primarna podela (prvi red, krupnije), ispod njih navigacija i prikaz, pa raspored */
.calprimary { margin: 2px 0 6px; }
.calprimary .offtabs { margin: 0; gap: 6px; }
#calBox .calprimary .offtabs button { font-size: 13px; font-weight: 700; padding: 4px 16px; border-width: 2px; }
#calBox .calsub { margin-top: 2px; }

/* Izveštaji: naslovi sekcija isto kao u Odmorima: bold na sivoj prozirnoj traci sa okvirom */
#main:has(#rf) h3, #rf > b:first-child { display: block; background: rgba(110, 124, 150, .16); border: 1px solid rgba(110, 124, 150, .4); border-radius: 6px; padding: 6px 12px; font-size: 14px; font-weight: 800; color: #1f2a44; margin: 14px 0 6px; }
#rf > b:first-child { margin: 0 0 6px; }

/* Raspored (dani / ljudi po redovima) u gornjoj traci, odvojen razmakom i tankom linijom */
#calBox .calbar .orientin { margin: 0 0 0 18px; padding-left: 18px; border-left: 2px solid #cfd5e0; gap: 4px; align-items: center; }

/* naslov perioda (Oktobar 2026.) dominantniji */
#calBox .calbar .caltitle { font-size: 20px !important; font-weight: 800; padding: 5px 26px !important; min-width: 230px !important; border-width: 2px; border-radius: 10px; box-shadow: 0 2px 8px rgba(79, 107, 216, .28); }
#calBox .calbar button[data-cm="-1"], #calBox .calbar button[data-cm="1"] { font-size: 16px; padding: 3px 12px; font-weight: 800; }

/* kartice stanja odmora: krupan broj levo, objašnjenje desno od njega */
.vcards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.vcard { display: flex; align-items: center; gap: 16px; flex: 1 1 380px; max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 10px; padding: 10px 16px; }
.vcard .vnum { display: flex; flex-direction: column; align-items: center; min-width: 96px; text-align: center; }
.vcard .vnum b { font-size: 34px; line-height: 1.05; font-weight: 800; color: #1f2a44; }
.vcard .vnum span { font-size: 11px; color: var(--muted); }
.vcard .vtxt { font-size: 12.5px; display: grid; gap: 4px; }

/* kancelarije i naslov perioda: malo manji */
#calBox .calprimary .offtabs button { font-size: 12px !important; padding: 2px 13px !important; border-width: 2px; }
#calBox .calbar .caltitle { font-size: 16px !important; padding: 3px 18px !important; min-width: 170px !important; border-radius: 8px; box-shadow: 0 1px 5px rgba(79, 107, 216, .22); }
#calBox .calbar button[data-cm="-1"], #calBox .calbar button[data-cm="1"] { font-size: 14px; padding: 2px 10px; }

/* Odmori: svaka kartica je samostalna u gornjem meniju, pa se unutrašnji red podkartica ne prikazuje */
.vtabs { display: none !important; }

/* Zaposleni: naslov i dugme Novi korisnik u istom redu, dugme upečatljivo */
.hrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 6px; }
.hrow h3 { margin: 0; }
.newbtn { font-weight: 800; font-size: 14px; padding: 7px 18px; border-radius: 8px; box-shadow: 0 2px 6px rgba(79, 107, 216, .3); }
.newbox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 12px; margin: 6px 0 12px; }

/* Odmori: sve je u jednoj kartici, podkartice su vidljive */
.vtabs { display: flex !important; }

/* kartice u meniju: boja po grupi (taskovi plava, pregledi / odobravanja / izveštaji ljubičasta, odmori i zaposleni zelena, podešavanja siva) */
#tabs button[data-g="1"] { background: #dbe9fb; color: #1f4f99; }
#tabs button[data-g="2"] { background: #e8e0f7; color: #4a2f94; }
#tabs button[data-g="3"] { background: #d9f0de; color: #1f6b34; }
#tabs button[data-g="4"] { background: #e3e6ec; color: #4a5568; }
#tabs button[data-g] { border-radius: 8px; font-weight: 600; }
#tabs button[data-g="1"].on { background: #7fb2e5; color: #fff; }
#tabs button[data-g="2"].on { background: #a58ad8; color: #fff; }
#tabs button[data-g="3"].on { background: #6fbf84; color: #fff; }
#tabs button[data-g="4"].on { background: #8a94a8; color: #fff; }
#tabs button[data-g]:hover { filter: brightness(.96); }

#tabs button[data-g="5"] { background: #fbe3cf; color: #9a4b0a; }
#tabs button[data-g="5"].on { background: #eb9a52; color: #fff; }

/* Projekti: traka za vrstu prikaza i filtere je sitnija (to je samo prikaz) */
#main .bar.tbar, #main .bar:has(> h3 + .seg) { gap: 6px; margin: 4px 0 !important; }
#main .bar.tbar .seg button, #main .bar:has(> h3 + .seg) .seg button { font-size: 11px !important; height: 22px !important; padding: 0 9px !important; line-height: 1 !important; }
#main .bar.tbar select, #main .bar.tbar input, #main .bar.tbar > button { font-size: 11px !important; height: 24px !important; padding: 0 8px !important; min-height: 0; }
#main .bar:has(> h3 + .seg) h3 { font-size: 13px; }
#main .bar:has(> h3 + .seg) > button { font-size: 11px; height: 22px; padding: 0 9px; }

/* kartice sa danima i satima su samo u prvoj podkartici (Odmori) */
.vcards[hidden], .vtop[hidden] { display: none !important; }

/* spisak slava: jedna kompaktna tabela sa bojama (kancelarija, departman) */
table.slflat { width: auto; }
table.slflat td, table.slflat th { padding: 2px 12px 2px 8px !important; font-size: 12px; }
table.slflat td.oc { box-shadow: inset 6px 0 0 var(--oc); }
table.slflat .vchip { font-size: 11px; padding: 0 8px; }

/* kalendar odmora: prvi red kancelarije, drugi navigacija + ko je danas odsutan (desno), treći sitni izbori prikaza */
#calBox .calnav { align-items: center; }
#calBox .calnav .calabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; margin-left: auto; justify-content: flex-end; }
#calBox .caldisp { margin: 2px 0 6px; padding: 3px 8px; background: rgba(110, 124, 150, .08); border: 1px solid rgba(110, 124, 150, .22); border-radius: 8px; gap: 8px; }
#calBox .caldisp .seg button, #calBox .caldisp .orientrow button, #calBox .caldisp select, #calBox .caldisp .calzoom button { font-size: 10.5px !important; height: 20px !important; padding: 0 7px !important; line-height: 1 !important; }
#calBox .caldisp .calzoom b, #calBox .caldisp .orientrow span, #calBox .caldisp label { font-size: 10.5px; }

/* Praznici i kolektivni odmori: uvek otvoreno, bez padajućeg menija */
#rulesBox details.rulesbox > summary { pointer-events: none; cursor: default; list-style: none; }
#rulesBox details.rulesbox > summary::-webkit-details-marker { display: none; }
#rulesBox details.rulesbox > summary::marker { content: ''; }

/* Grupni kalendar: naslov u sivom okviru, pa kancelarije, pa razmak, pa mesec */
.vsec[data-vs="cal"] > h3, .vsec[data-vs="mine"] > h3 { display: block; background: rgba(110, 124, 150, .16); border: 1px solid rgba(110, 124, 150, .4); border-radius: 6px; padding: 6px 12px; font-size: 14px; font-weight: 800; color: #1f2a44; margin: 4px 0 8px; }
#calBox .calprimary { margin: 2px 0 16px; }

/* izbor meseca / godine klikom na naslov kalendara */
#calBox .caltitle { cursor: pointer; }
.mpop { position: absolute; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(30, 50, 90, .22); padding: 8px 10px; width: 250px; }
.mpop .mphead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mpop .mphead b { font-size: 15px; }
.mpop .mphead button { padding: 0 10px; font-weight: 800; }
.mpop .mpgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mpop .mpgrid button { padding: 5px 4px; font-size: 12px; background: #eef1f7; border: 1px solid #d7ddea; border-radius: 6px; }
.mpop .mpgrid button.on { background: #6b82b8; color: #fff; border-color: #6b82b8; font-weight: 700; }
.mpop .mpgrid button:hover { background: #dbe6fb; }
/* slava na vikend: izbor slobodnog dana */
.slcard { background: #fff8e6; border: 1px solid #f2d58a; border-left: 6px solid #f2c97d; border-radius: 10px; padding: 8px 14px; margin: 8px 0; font-size: 13px; }
.slopt { margin: 0 4px; padding: 3px 12px; border-radius: 8px; font-weight: 600; }
.slopt.on { background: #d3f0d6; border-color: #6fc283; color: #17632f; font-weight: 800; }

/* Dani po redovima: zaglavlje kalendara (grupe, projekti, zaposleni) ostaje zakačeno pri skrolovanju */
#calBox .calwrap.daysv { max-height: none; overflow: auto; }
#calBox .calwrap.daysv table.cal thead { position: sticky; top: 0; z-index: 6; }
#calBox .calwrap.daysv table.cal thead th { background-clip: padding-box; }
#calBox .calwrap.daysv table.cal thead tr:nth-child(2) th { top: 0; }

/* Ljudi po redovima: red sa datumima ostaje gore, a imena zaposlenih levo dok se skroluje */
#calBox .calwrap { max-height: none; overflow: auto; }
#calBox .calwrap:not(.daysv) table.cal > tbody > tr:first-child > th, #calBox .calwrap:not(.daysv) table.cal > tr:first-child > th { position: sticky; top: 0; z-index: 5; background: #f4f7fb; }
#calBox .calwrap:not(.daysv) table.cal th.calname { left: 0; z-index: 7; }
#calBox .calwrap:not(.daysv) table.cal td.calname, #calBox .calwrap:not(.daysv) table.cal tr.calgrp td.calname { position: sticky; left: 0; z-index: 3; }

/* kartice u meniju: nijanse plave umesto različitih boja (grupe ostaju: taskovi / pregledi / odobravanja i izveštaji / odmori i zaposleni) */
#tabs button[data-g="1"] { background: #cddff7; color: #1d4e91; }
#tabs button[data-g="2"] { background: #b8d9f0; color: #14567a; }
#tabs button[data-g="5"] { background: #c4cdf2; color: #2c3a8c; }
#tabs button[data-g="3"] { background: #a8cdea; color: #0f4c75; }
#tabs button[data-g="1"].on { background: #5b8fd6; color: #fff; }
#tabs button[data-g="2"].on { background: #4a9fcf; color: #fff; }
#tabs button[data-g="5"].on { background: #6b7bd6; color: #fff; }
#tabs button[data-g="3"].on { background: #3f86c0; color: #fff; }

/* kartice: samo plava istog tona, od svetlije (ka beloj) ka tamnijoj; bez ljubičaste */
#tabs button[data-g="1"] { background: #e6f0fc; color: #1d4e91; }
#tabs button[data-g="2"] { background: #d3e5f8; color: #1d4e91; }
#tabs button[data-g="5"] { background: #bed7f4; color: #1a4684; }
#tabs button[data-g="3"] { background: #a8c7ee; color: #173f78; }
#tabs button[data-g="1"].on, #tabs button[data-g="2"].on, #tabs button[data-g="5"].on, #tabs button[data-g="3"].on { background: #4f86cc; color: #fff; }

/* podnaslovi sekcija svuda: bold u okviru, siva prozirna traka */
h2.sect, #main h3:not(.bar h3):not(.hrow h3):not(.apanel h3) { display: block; background: rgba(110, 124, 150, .16); border: 1px solid rgba(110, 124, 150, .4); border-radius: 6px; padding: 6px 12px; font-size: 14px; font-weight: 800; color: #1f2a44; margin: 14px 0 6px; }
h2.sect { font-size: 15px; }
.apanel h3 { font-weight: 800; }

/* isti stil i za h4 podnaslove u svim karticama (osim naslova kolona u kanbanu) */
#main h4:not(.col h4):not(.bar h4) { display: block; background: rgba(110, 124, 150, .16); border: 1px solid rgba(110, 124, 150, .4); border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 800; color: #1f2a44; margin: 12px 0 6px; }

/* svi ostali naslovi sekcija (panel taska, Sati / Istorija, Članovi projekta, objašnjenja): isti sivi okvir */
#drawer h3, #drawer h4, details.coll > summary, details.legend > summary, #mdet > summary.msum { background: rgba(110, 124, 150, .16) !important; border: 1px solid rgba(110, 124, 150, .4) !important; border-radius: 6px; padding: 6px 12px !important; font-size: 13.5px; font-weight: 800; color: #1f2a44; }
#drawer h3, #drawer h4 { display: block; margin: 12px 0 6px; }
details.coll > summary .muted, details.legend > summary { font-weight: 700; }
details.coll > summary .muted { font-weight: 500; }

/* kompaktni prikaz (desktop): manji nazivi taskova */
.cmp-title b.ttitle[style*="--th"], .cmp-main b.ttitle[style*="--th"] { font-size: 12.5px !important; font-weight: 700 !important; padding: 1px 8px !important; border-left-width: 4px !important; }

/* kompaktni prikaz: tekst se prelama umesto da se seče; naziv taska u select-u i komentar su čitljivi */
.cmp-title { white-space: normal; overflow-wrap: anywhere; }
.cmp-main, .cmp-meta { min-width: 0; overflow-wrap: anywhere; }
#cmpNote { text-overflow: ellipsis; min-width: 0; }

/* kompaktni prikaz: istorija (sve što je staro) je sivkasta, da aktivni taskovi dominiraju */
.cmp-entry { filter: grayscale(.8); opacity: .8; }
.cmp-entry:hover { filter: grayscale(.4); opacity: 1; }
.cmp-entry b.ttitle[style*="--th"] { font-size: 12px !important; font-weight: 600 !important; }

/* glavni naslovi kartica (Pregled firme, Izveštaji…): isto siva traka u okviru */
#main h2 { display: block; background: rgba(110, 124, 150, .2); border: 1px solid rgba(110, 124, 150, .45); border-radius: 8px; padding: 7px 14px; font-size: 18px; font-weight: 800; color: #1f2a44; }
#main .vtop h2 { display: inline-block; margin: 0; }

/* boje taskova: malo tamnije, ali i dalje pastelne */
td.tcell { background: hsl(var(--th) 52% 86%) !important; box-shadow: inset 6px 0 0 hsl(var(--th) 48% 52%); }
b.ttitle[style*="--th"] { background: hsl(var(--th) 52% 79%) !important; border-left-color: hsl(var(--th) 48% 50%) !important; }
td.tcell b.ttitle[style*="--th"], td.tcell .ttitle[style*="--th"] { background: transparent !important; }

/* boje taskova: svetlije i sivkaste (manje zasićene), bez zelenih i roze tonova */
td.tcell { background: hsl(var(--th) 30% 90%) !important; box-shadow: inset 6px 0 0 hsl(var(--th) 32% 62%); }
b.ttitle[style*="--th"] { background: hsl(var(--th) 32% 84%) !important; border-left-color: hsl(var(--th) 34% 56%) !important; }
td.tcell b.ttitle[style*="--th"], td.tcell .ttitle[style*="--th"] { background: transparent !important; }

/* boje taskova: manje sivo, malo plavkasto */
td.tcell { background: hsl(var(--th) 42% 90%) !important; box-shadow: inset 6px 0 0 hsl(var(--th) 44% 60%); }
b.ttitle[style*="--th"] { background: hsl(var(--th) 44% 83%) !important; border-left-color: hsl(var(--th) 46% 54%) !important; }
td.tcell b.ttitle[style*="--th"], td.tcell .ttitle[style*="--th"] { background: transparent !important; }

/* trake naslova: manje sivo, belićasto-plavkasto */
#rulesBox h4, #slaveBox h3, #slaveBox h4, #rulesBox details.rulesbox > summary, .vsec[data-vs="cal"] > h3, .vsec[data-vs="mine"] > h3, #main:has(#rf) h3, #rf > b:first-child, h2.sect, #main h3:not(.bar h3):not(.hrow h3):not(.apanel h3), #main h4:not(.col h4):not(.bar h4), #drawer h3, #drawer h4, details.coll > summary, details.legend > summary, #mdet > summary.msum, #main h2 { background: linear-gradient(180deg, #f6f9fe, #e6eefb) !important; border: 1px solid rgba(110, 145, 205, .42) !important; color: #1d3a6b !important; }
#calBox .caldisp { background: #f2f6fd; border-color: rgba(110, 145, 205, .3); }

/* naziv projekta / foldera u zaglavlju: boja izabranog foldera umesto sive trake */
#main .phead h2 { background: color-mix(in srgb, var(--c) 45%, #fff) !important; border: 1px solid color-mix(in srgb, var(--c) 70%, #fff) !important; border-left: 8px solid var(--c) !important; color: #1b2a44 !important; }

/* taskovi: znatno svetliji, plavkasto-belićasti (bez sive), mala razlika nijanse po nazivu */
td.tcell { background: hsl(var(--th) 78% 95.5%) !important; box-shadow: inset 6px 0 0 hsl(var(--th) 58% 70%); }
b.ttitle[style*="--th"] { background: hsl(var(--th) 72% 91%) !important; border-left-color: hsl(var(--th) 58% 64%) !important; }
td.tcell b.ttitle[style*="--th"], td.tcell .ttitle[style*="--th"] { background: transparent !important; }

/* leva linija ćelije taska: boja foldera u kome je task (npr. 1_OSNOVE, 2_PRESECI) */
td.tcell { box-shadow: inset 8px 0 0 var(--fc, hsl(var(--th) 58% 70%)) !important; padding-left: 18px !important; }

/* putanja: bold samo folder u kome je task (poslednji čip), projekat je običan */
.tpath .pchip2.pj { font-weight: 400 !important; border-width: 1px !important; color: #7b8494 !important; opacity: .8 !important; }
.tpath .pchip2.pl, .tpath.small .pchip2.pl:first-child { font-weight: 800 !important; color: #2b3a55 !important; opacity: 1 !important; }
td.tcell .tpath .pchip2.pl { color: #2b3a55 !important; }

/* putanja taska u jednoj liniji; prelama se tek kad se prozor smanji */
#main table:not(.cal):not(.matrix):not(.stack) td.tcell { max-width: none !important; width: 1%; white-space: nowrap; }
td.tcell .tpath { flex-wrap: wrap; }
td.tcell .tline { flex-wrap: nowrap; }

#main table:not(.cal):not(.matrix):not(.stack) td.tcell { width: auto; white-space: normal; }

/* naslov uz dugme + Task / + Podfolder: običan tekst, bez trake, vertikalno u liniji sa dugmetom */
#main .branchrow h3, .taskbar .branchtxt h3 { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; font-weight: 600 !important; font-size: 14px !important; display: inline !important; color: #1f2a44 !important; }
.taskbar .branchrow, .taskbar .branchtxt { display: flex; align-items: center; }
.taskbar .branchtxt { gap: 10px; }

/* mali prozor: cela putanja, prelama se u više redova */
.cmp-main .tpath { flex-wrap: wrap; row-gap: 2px; }
.cmp-main .tpath .pchip2 { white-space: nowrap; }

/* mali prozor: gornji deo (logo, izbor taska, tajmer, komentar) je manji */
.cmp-head { padding: 4px 10px; }
.cmp-head img { height: 20px; padding: 1px 5px; }
.cmp-btns button { font-size: 16px; padding: 1px 5px; }
.cmp-now { padding: 2px 10px 8px; gap: 5px; top: 30px; }
.cmp-row { gap: 6px; }
.cmp-row select, .cmp-row input { padding: 4px 11px; font-size: 12px; border-radius: 14px; }
.cmp-clock { min-width: 74px; padding: 3px 8px; font-size: 12px; border-radius: 14px; }
.cmp-week { padding: 3px 9px; font-size: 11px; border-radius: 14px; }
.cmp-round { width: 28px; height: 28px; font-size: 12px; border-width: 2px; }

.xlsbtn { font-weight: 700; padding: 6px 14px; border-radius: 8px; background: #fff; border: 2px solid #6fbf84; color: #1f6b34; }
.xlsbtn:hover { background: #e3f5e8; }

/* izabrana podkartica je jasnije podebljana i tamnija */
.stabs button.on, .vtabs button.on { font-weight: 800 !important; background: #9fb0cc !important; border-color: #6f84ad !important; color: #11203a !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.stabs button.on .muted, .vtabs button.on .muted { color: #11203a !important; font-weight: 800; }

/* ---------- tamni prikaz (cela aplikacija): invertovanje + vraćanje boja oznaka ---------- */
.themebtn { font-size: 16px; padding: 3px 9px; border-radius: 8px; line-height: 1; }
html.dark { filter: invert(.92) hue-rotate(180deg); background: #fff; }
html.dark img, html.dark .vchip, html.dark .chip, html.dark .pchip2, html.dark .pill, html.dark .lvl, html.dark .lvlchip, html.dark .fdot, html.dark .dot-st, html.dark input[type=color], html.dark .ttitle[style*="--th"], html.dark .codechip, html.dark .vcard, html.dark .tile .chip, html.dark .pchip { filter: invert(1) hue-rotate(180deg); }
html.dark td.tcell .ttitle[style*="--th"] { filter: none; }
html.dark .overlay { background: rgba(255, 255, 255, .55); }
@media print { html.dark { filter: none; } }

/* naslov uz + Task / + Podfolder: nikad okvir ni traka (jača specifičnost od opštih pravila za naslove) */
html body #main .taskbar .branchrow .branchtxt h3:not(.x):not(.y):not(.z), html body #main .branchrow .branchtxt h3:not(.x):not(.y):not(.z) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; font-weight: 600 !important; font-size: 14px !important; color: #1f2a44 !important; display: inline !important; }

/* tamni prikaz: iste boje oznaka, ali jarkije (zasićenije) */
html.dark img, html.dark .vchip, html.dark .chip, html.dark .pchip2, html.dark .pill, html.dark .lvl, html.dark .lvlchip, html.dark .fdot, html.dark .dot-st, html.dark input[type=color], html.dark .ttitle[style*="--th"], html.dark .codechip, html.dark .vcard, html.dark .tile .chip, html.dark .pchip { filter: invert(1) hue-rotate(180deg) saturate(1.9) brightness(.97) contrast(1.05); }
html.dark img { filter: invert(1) hue-rotate(180deg); }
html.dark td.tcell .ttitle[style*="--th"] { filter: none; }

/* tamni prikaz: skoro fluorescentne boje oznaka */
html.dark img, html.dark .vchip, html.dark .chip, html.dark .pchip2, html.dark .pill, html.dark .lvl, html.dark .lvlchip, html.dark .fdot, html.dark .dot-st, html.dark input[type=color], html.dark .ttitle[style*="--th"], html.dark .codechip, html.dark .vcard, html.dark .tile .chip, html.dark .pchip { filter: invert(1) hue-rotate(180deg) saturate(3.4) brightness(1.04) contrast(1.15); }
html.dark img { filter: invert(1) hue-rotate(180deg); }
html.dark td.tcell .ttitle[style*="--th"] { filter: none; }

/* tamni prikaz: jače i pozadinske boje (kartice foldera, redovi) - zasićenje celog prikaza, a oznake se vraćaju na prethodnu jačinu */
html.dark { filter: invert(.92) hue-rotate(180deg) saturate(1.8) brightness(1.06); }
html.dark img, html.dark .vchip, html.dark .chip, html.dark .pchip2, html.dark .pill, html.dark .lvl, html.dark .lvlchip, html.dark .fdot, html.dark .dot-st, html.dark input[type=color], html.dark .ttitle[style*="--th"], html.dark .codechip, html.dark .vcard, html.dark .tile .chip, html.dark .pchip { filter: invert(1) hue-rotate(180deg) saturate(1.9) brightness(.96); }
html.dark img { filter: invert(1) hue-rotate(180deg) saturate(.56); }
html.dark td.tcell .ttitle[style*="--th"] { filter: none; }

/* Dani po redovima: kolone zaposlenih su uske i iste širine (ne razvlače se preko celog ekrana) */
#calBox .calwrap.daysv table.cal { table-layout: auto !important; width: max-content !important; min-width: 0 !important; }
#calBox .calwrap.daysv table.cal td.calc, #calBox .calwrap.daysv table.cal th.dname { width: 108px !important; min-width: 108px !important; max-width: 108px !important; }
#calBox .calwrap.daysv table.cal th.dproj { max-width: 108px; }
#calBox .calwrap.daysv table.cal th.dname { font-size: 11px; }

/* datumi: dan.mesec.godina (prikaz preko ugrađenog polja koje ostaje za kalendar) */
.dwrap { position: relative; display: inline-block; max-width: 100%; }
.dwrap > input[type=date] { color: transparent; }
.dwrap > input[type=date]::-webkit-datetime-edit { color: transparent; }
.dwrap > input[type=date]::-webkit-datetime-edit-fields-wrapper { color: transparent; }
.dwrap > input[type=date]:focus::-webkit-datetime-edit { color: transparent; }
.dwrap > .dlbl { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text); font-size: inherit; white-space: nowrap; }
.dwrap > .dlbl.empty { color: var(--muted); }
.dwrap > input[type=date] { padding-right: 8px; min-width: 150px; }

/* Odobri / Odbij: u Istoriji odluka (desno od koraka) i u obaveštenjima */
.flbtns { display: inline-flex; gap: 6px; align-items: center; margin-left: 10px; }
.nbtns { display: flex; gap: 6px; margin-top: 6px; }

/* tamni prikaz, kanban: naziv taska prigušeniji, a kartica iza njega obojena */
html.dark .kcard .ttitle[style*="--th"] { filter: invert(1) hue-rotate(180deg) saturate(1.15) brightness(.78) !important; }
html.dark .kcard { background: #c9dcf7 !important; }
html.dark .kcard .tpath .pchip2 { filter: invert(1) hue-rotate(180deg) saturate(1.2) brightness(.85); }

/* kalendar odmora: tekuća osoba (svako na svom profilu) je obojena */
table.cal tr.merow > td:not(.vac):not(.rule):not(.hrs):not(.miss):not(.we):not(.todaycol) { background: #e4edff; }
table.cal tr.merow > td.calname { background: #d3e2ff !important; font-weight: 800; color: #1d3a6b; box-shadow: inset 5px 0 0 #4f6bd8; }
table.cal td.mecol:not(.vac):not(.rule):not(.hrs):not(.miss):not(.we):not(.todaycol) { background: #e4edff; }
table.cal th.dname.mecol { background: #d3e2ff !important; font-weight: 800; color: #1d3a6b; box-shadow: inset 0 -4px 0 #4f6bd8; }

tr.arch td { opacity: .6; }

/* izbor foldera korak po korak (projekat → faza → disciplina → folder) */
.npcascade { display: grid; gap: 6px; padding: 8px 10px; background: rgba(110, 145, 205, .08); border: 1px solid rgba(110, 145, 205, .28); border-radius: 8px; }
.npc { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.npc select { width: 100%; }
.npc-path { margin-top: 2px; }

/* Kancelarije / Discipline / Namene: providna polja (blaga boja iza, jasan okvir u boji) */
.vlist .chip { background: color-mix(in srgb, var(--c) 14%, transparent) !important; border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent) !important; }
html.dark .vlist .chip { filter: none; background: color-mix(in srgb, var(--c) 18%, transparent) !important; }

/* kartice sa danima i satima odmora: providne, plavičaste */
.vcard { background: rgba(110, 145, 205, .12) !important; border: 1px solid rgba(110, 145, 205, .38); border-left: 6px solid var(--c); }
html.dark .vcard { filter: none !important; }
html.dark .vcard .vnum b { color: #1d3a6b; }

/* tamni prikaz: oznake malo blaže (manje fluorescentne) */
html.dark .vchip, html.dark .chip, html.dark .pchip2, html.dark .pill, html.dark .lvl, html.dark .lvlchip, html.dark .fdot, html.dark .dot-st, html.dark .codechip, html.dark .tile .chip, html.dark .pchip { filter: invert(1) hue-rotate(180deg) saturate(1.0) brightness(.92); }
html.dark .ttitle[style*="--th"] { filter: invert(1) hue-rotate(180deg) saturate(0.95) brightness(.86); }
html.dark td.tcell .ttitle[style*="--th"] { filter: none; }

.xlsbtn.sm { padding: 3px 10px; font-size: 12px; }

html.dark .kcard { background: rgba(201,220,247,.30) !important; }
html.dark .kcard b.ttitle[style*="--th"], html.dark .kcard .ttitle[style*="--th"] { filter: none !important; color: #0a0f1c !important; background: hsl(var(--th) 55% 55% / .28) !important; border-left-color: hsl(var(--th) 70% 65%) !important; }
html.dark .kcard .tpath .pchip2, html.dark .kcard .tpath .pchip2 * { color: #000 !important; opacity: 1 !important; }
html.dark .cmp-head, html.dark .cmp-now { background: #b4c0d6 !important; }
html.dark .cmp .tpath .pchip2 { filter: invert(1) hue-rotate(180deg) saturate(.25) brightness(.9) !important; }
html.dark .cmp .tpath .pchip2.pl, html.dark .cmp .tpath .pchip2.pj { filter: invert(1) hue-rotate(180deg) saturate(.4) brightness(1) !important; }
html.dark .cmp .tpath .pchip2 { background: #c3d3ee !important; background-color: #c3d3ee !important; border-color: #8fa8d4 !important; color: #23324f !important; filter: invert(1) hue-rotate(180deg) saturate(1) brightness(.82) !important; }
html.dark .cmp .tpath .pchip2.pl, html.dark .cmp .tpath .pchip2.pj { background: #a9c0e6 !important; background-color: #a9c0e6 !important; color: #14213b !important; filter: invert(1) hue-rotate(180deg) saturate(1) brightness(.9) !important; }
.chip .chipico { border: 0; background: transparent; padding: 0 3px; font-size: 14px; line-height: 1; cursor: pointer; }
html.dark .chip .chipico { filter: invert(1) hue-rotate(180deg); }
.pico { vertical-align: -3px; color: #5f7fb0; }
.chip .chipico { color: #5f7fb0; display: inline-flex; align-items: center; }
.icogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; margin-bottom: 12px; }
.icobtn { height: 46px; border-radius: 10px; background: #eef3fb; border: 1px solid #d3deef; color: #5f7fb0; display: flex; align-items: center; justify-content: center; padding: 0; }
.icobtn:hover { background: #dce8f8; border-color: #9fb6dc; }
.icobtn.on { background: #cfe0f6; border-color: #6f8fc0; }
.icobtn.none { color: #9aa6ba; }
html.dark .chip .chipico { filter: none; }
.node .nmico { display: inline-flex; align-items: center; margin: 0 6px 0 4px; flex: none; }
.node .nmico .pico { stroke-width: 1.7; color: #4f74ad; }
.node .nmico { margin: -4px 0 -4px 2px !important; height: 18px; }
#sideToggle { width: 26px; height: 46px; left: -9px; top: 12px; font-size: 16px; font-weight: 700; color: #fff; background: #4f74ad; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(40,70,120,.35); }
#sideToggle:hover { background: #3b6db3; }
details.legend { padding: 2px 8px !important; margin: 4px 0 !important; border-radius: 8px; }
details.legend > summary { font-size: 10.5px !important; font-weight: 600 !important; padding: 1px 0 !important; }
details.legend[open] { font-size: 11px; }
details.legend[open] * { font-size: 11px; }
.cmp-head { background: #fff !important; border-bottom: 1px solid #dbe3f0; }
.cmp-head img { background: transparent; padding: 0 2px; }
.cmp-btns button { color: #3b5b8f; }
.cmp-btns button:hover { background: #e6eefb; }
html.dark .cmp-head { background: #fff !important; }
html.dark .cmp-head img { filter: none; }
.cmp-btns button { color: #4a6fb0 !important; font-family: 'Segoe UI Symbol', 'Segoe UI', sans-serif; }
td > .pill.ed[data-ed^="status"] { font-size: 12px !important; padding: 5px 16px !important; border-width: 1.5px !important; }
td > .pill.ed[data-ed^="priority"] { font-size: 10px !important; padding: 1px 9px !important; }

/* ===== Chat (kao Slack) ===== */
main.chatmain { padding: 0 !important; overflow: hidden !important; }
.chat { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; height: 100%; min-height: 420px; background: var(--panel); }
.chside { overflow-y: auto; background: #dfe8f7; border-right: 1px solid var(--line); padding: 10px 0 16px; }
.chsearch { padding: 0 10px 8px; } .chsearch input { width: 100%; border-radius: 8px; font-size: 13px; }
.chsec { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px; font-size: 12px; font-weight: 800; color: #4a5f86; text-transform: uppercase; letter-spacing: .4px; }
.chplus { border: 0; background: transparent; font-size: 17px; color: #4a5f86; padding: 0 6px; cursor: pointer; border-radius: 6px; } .chplus:hover { background: #c9d8f1; }
.chitemw { position: relative; display: flex; align-items: center; }
.chitem { flex: 1; display: flex; align-items: center; gap: 7px; text-align: left; border: 0; background: transparent; color: #2b3a55; padding: 5px 12px; font-size: 14px; border-radius: 0; cursor: pointer; min-width: 0; }
.chitem:hover { background: #cddcf3; } .chitem.on { background: #3b6db3; color: #fff; font-weight: 700; } .chitem.unr { font-weight: 800; }
.chhash { opacity: .6; width: 14px; text-align: center; flex: none; }
.chbadge { margin-left: auto; background: #e05a6d; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 17px; }
.chfav { position: absolute; right: 38px; border: 0; background: transparent; font-size: 12px; opacity: 0; cursor: pointer; padding: 2px 4px; filter: grayscale(1); }
.chitemw:hover .chfav, .chfav.on { opacity: .85; } .chfav.on { filter: none; }
.chav { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; color: #2b3a55; flex: none; }
.chres2 { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 12px; font-size: 13px; cursor: pointer; border-radius: 0; } .chres2:hover { background: #cddcf3; }
.chmain { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.chmain.drop::after { content: 'Pusti fajl ovde da ga pošalješ'; position: absolute; inset: 8px; border: 3px dashed #6f8fc0; border-radius: 14px; background: rgba(205, 220, 243, .85); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #3b5b8f; z-index: 20; }
.chhdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chtitle { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .chtitle b { font-size: 17px; } .chtopic { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.chproj { font-size: 11px; background: #dbe7fa; color: #3b5b8f; padding: 1px 8px; border-radius: 9px; }
.chacts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.chbtn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 4px 10px; font-size: 13px; cursor: pointer; } .chbtn:hover { background: #e6eefb; }
.chlist { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
.chempty { text-align: center; color: var(--muted); padding: 40px 20px; } .chempty.small { padding: 20px 12px; font-size: 13px; }
.chday { text-align: center; margin: 14px 0 6px; position: relative; } .chday::before { content: ''; position: absolute; left: 16px; right: 16px; top: 50%; border-top: 1px solid var(--line); }
.chday span { position: relative; background: var(--panel); padding: 0 12px; font-size: 12px; font-weight: 700; color: #5a6b8c; border: 1px solid var(--line); border-radius: 12px; }
.chmsg { position: relative; display: flex; gap: 10px; padding: 4px 16px; } .chmsg:hover { background: #f1f5fc; } .chmsg.pinned { background: #fff8e6; } .chmsg.flash { background: #ffeeb0 !important; }
.chmsg.grp { padding-top: 0; } .chmsg.del { opacity: .7; }
.chgut { width: 36px; flex: none; text-align: right; } .chhover { visibility: hidden; color: var(--muted); font-size: 10.5px; line-height: 20px; } .chmsg:hover .chhover { visibility: visible; }
.chbody { min-width: 0; flex: 1; } .chhead { line-height: 1.3; } .chtext { line-height: 1.45; overflow-wrap: anywhere; }
.chmention { background: #dbe7fa; color: #2d5a9e; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.chpin { color: #b07a10; }
.chtools { display: none; position: absolute; right: 16px; top: -14px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 2px; box-shadow: 0 2px 8px rgba(40, 60, 100, .15); gap: 0; z-index: 3; }
.chmsg:hover .chtools { display: flex; } .chtools button { border: 0; background: transparent; padding: 3px 7px; font-size: 15px; border-radius: 6px; cursor: pointer; } .chtools button:hover { background: #e6eefb; }
.chres { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chre { border: 1px solid #c9d8f1; background: #eef3fb; border-radius: 12px; padding: 1px 8px; font-size: 13px; cursor: pointer; } .chre.mine { background: #cfe0f6; border-color: #6f8fc0; } .chre.add { opacity: .6; }
.chthr { border: 0; background: transparent; color: #2d5a9e; font-size: 12.5px; cursor: pointer; padding: 3px 0; font-weight: 600; } .chthr:hover { text-decoration: underline; }
.chfile { margin-top: 6px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; max-width: 460px; background: #f6f9ff; }
.chfile.img { display: block; padding: 6px; } .chfile img { max-width: 360px; max-height: 260px; border-radius: 8px; display: block; cursor: zoom-in; background: #e9eef8; min-height: 40px; }
.chfi { font-size: 24px; } .chfmeta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.chlink { border: 0; background: transparent; color: #2d5a9e; cursor: pointer; font-size: 12px; padding: 0 4px; } .chlink.danger { color: #c0394d; } .chmore { display: block; margin: 6px auto; }
.chcomp { padding: 8px 16px 14px; } .chcomp.small { padding: 8px 10px; border-top: 1px solid var(--line); }
.chbox { border: 1.5px solid #b9c9e6; border-radius: 12px; background: var(--panel); } .chbox:focus-within { border-color: #5f86c4; }
.chbox textarea, .chcomp.small textarea { width: 100%; border: 0; resize: none; padding: 10px 12px 4px; background: transparent; outline: 0; font: inherit; max-height: 180px; display: block; box-sizing: border-box; }
.chbar { display: flex; align-items: center; gap: 4px; padding: 4px 8px 6px; } .chbar .spacer { flex: 1; }
.chjoin { padding: 18px; text-align: center; border-top: 1px solid var(--line); background: #eef3fb; }
.chup { padding: 0 0 8px; } .chuprow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 3px 0; } .chbarp { flex: 1; height: 7px; background: #dbe5f5; border-radius: 4px; overflow: hidden; } .chbarp i { display: block; height: 100%; width: 0; background: #5f86c4; }
.chpanel { width: 340px; border-left: 1px solid var(--line); display: flex; flex-direction: column; background: var(--panel); min-height: 0; }
.chphdr { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.chplist { flex: 1; overflow-y: auto; } .chplist .chmsg { padding-left: 10px; padding-right: 10px; } .chplist .chtools { right: 8px; }
.chpinned { border-bottom: 1px solid var(--line); cursor: pointer; }
.chmem { display: flex; align-items: center; gap: 8px; padding: 6px 14px; } .chmem.add select { width: 100%; }
.chpop { position: fixed; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(40, 60, 100, .25); padding: 8px; max-width: 320px; }
.chemx { max-height: 260px; overflow-y: auto; width: 300px; } .chemh { font-size: 11px; font-weight: 800; color: #5a6b8c; margin: 6px 4px 2px; text-transform: uppercase; }
.chemg { display: flex; flex-wrap: wrap; } .chemg button { border: 0; background: transparent; font-size: 21px; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; padding: 0; } .chemg button:hover { background: #e6eefb; }
.chpu { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 5px 8px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 13px; } .chpu:hover { background: #e6eefb; }
.chpick { max-height: 150px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; } .chk { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.chlight { background: rgba(10, 18, 34, .88) !important; display: flex; align-items: center; justify-content: center; } .chlight img { max-width: 94vw; max-height: calc(var(--vh100, 100vh) * 0.92); border-radius: 10px; }
.chtabn { background: #e05a6d; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 4px; font-weight: 700; }

/* desktop aplikacija: leva traka sa ikonicama (kao Slack) */
body.rail #tabs { display: none; }
body.rail .app { grid-template-columns: 78px minmax(0, 1fr); }
body.rail .app > header, body.rail .app > .body, body.rail .app > #notifs { grid-column: 2; }
#rail { display: none; }
body.rail #rail { display: flex; flex-direction: column; align-items: center; gap: 4px; grid-column: 1; grid-row: 1 / span 3; padding: 12px 6px; background: #3b5b8f; overflow-y: auto; }
#rail button { position: relative; width: 62px; border: 0; background: transparent; color: #dce6f8; border-radius: 12px; padding: 8px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font-size: 10.5px; font-weight: 600; }
#rail button:hover { background: rgba(255, 255, 255, .14); } #rail button.on { background: #fff; color: #2d4a7a; }
#rail .railn { position: absolute; top: 2px; right: 6px; margin: 0; }
@media (max-width: 800px) { .chat { grid-template-columns: 190px minmax(0, 1fr); } .chpanel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 30; width: min(340px, 92vw); } }
/* Slack-like linijske ikonice u chatu */
.chico { display: block; }
.chtools button { color: #5a6b8c; display: flex; align-items: center; justify-content: center; padding: 5px 7px; font-size: 15px; }
.chtools button:hover { color: #2d4a7a; } .chtools button.on { color: #c78a10; } .chtools button.dng:hover { color: #c0394d; background: #fdeaed; }
.chbtn.ico { border: 0; background: transparent; color: #5a6b8c; padding: 5px 7px; display: inline-flex; align-items: center; border-radius: 8px; } .chbtn.ico:hover { background: #e6eefb; color: #2d4a7a; }
.chbtn { display: inline-flex; align-items: center; gap: 5px; color: #4a5f86; }
.chsendb { display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; border-radius: 8px; }
.chre.add { display: inline-flex; align-items: center; color: #5a6b8c; } .chthr { display: inline-flex; align-items: center; gap: 5px; }
.chfav { color: #7b8aa8; filter: none; } .chfav.on { color: #c78a10; }.chmsg.hasfile { padding-bottom: 14px; }
.chmsg.hasfile .chtools { top: auto; bottom: -2px; right: auto; left: 62px; }
.chplist .chmsg.hasfile .chtools { left: 56px; }
.chwrap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.chedit { display: none; position: absolute; top: -6px; right: -66px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 2px; box-shadow: 0 2px 8px rgba(40, 60, 100, .15); z-index: 3; }
.chmsg:hover .chedit { display: flex; } .chedit button { border: 0; background: transparent; color: #5a6b8c; padding: 5px 7px; border-radius: 6px; cursor: pointer; display: flex; } .chedit button:hover { background: #e6eefb; color: #2d4a7a; } .chedit button.dng:hover { color: #c0394d; background: #fdeaed; }
.chplist .chedit { right: 0; top: -22px; }
.chaddbox { margin: 10px 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #f6f9ff; } .chaddbox > b { font-size: 13px; display: block; margin-bottom: 6px; } .chaddbox input#chAddQ { width: 100%; margin-bottom: 6px; box-sizing: border-box; }
.chaddlist { max-height: 240px; overflow-y: auto; display: grid; gap: 1px; } .chaddlist label { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; } .chaddlist label:hover { background: #e6eefb; }
.chaddbar { display: flex; align-items: center; margin-top: 8px; } .chaddbar .spacer { flex: 1; }
.chmem { position: relative; } .chmemx { margin-left: auto; border: 0; background: transparent; color: #9aa6ba; cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; opacity: 0; } .chmem:hover .chmemx { opacity: 1; } .chmemx:hover { color: #c0394d; background: #fdeaed; }
.chtools { top: auto !important; bottom: -17px; right: auto !important; left: 62px; z-index: 6; }
.chmsg.hasfile .chtools { bottom: -2px; }
.chedit { top: -24px !important; right: 0 !important; z-index: 6; }
.chplist .chtools { left: 56px; } .chplist .chedit { right: 0; }
.chedit button.on { color: #c78a10; }
.chpwhere { font-size: 11px; font-weight: 800; color: #5a6b8c; padding: 6px 12px 0; text-transform: uppercase; letter-spacing: .3px; } .chpinned:hover { background: #f1f5fc; } .chpinned .chtools, .chpinned .chedit { display: none !important; }
.chplist .chitem { width: 100%; padding-left: 14px; }
.chsrch { width: 180px; font-size: 13px; padding: 4px 10px; border-radius: 8px; } .chpsearch { padding: 8px 12px; border-bottom: 1px solid var(--line); } .chpsearch input { width: 100%; box-sizing: border-box; font-size: 13px; } .chpinned mark { background: #ffe58a; border-radius: 3px; padding: 0 1px; }
.chpanel { width: var(--chpw, 340px); position: relative; } .chpanel::before { content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; } .chpanel:hover::before, .chpanel.drag::before { background: rgba(95, 134, 196, .35); }
.chphdr b { display: inline-flex; align-items: center; gap: 6px; }

/* teme chata */
.chside { background: var(--chs-bg, #dfe8f7); border-right-color: var(--chs-line, var(--line)); }
.chitem { color: var(--chs-fg, #2b3a55); } .chitem:hover { background: var(--chs-hover, #cddcf3); }
.chitem.on { background: var(--chs-on, #3b6db3); color: var(--chs-onfg, #fff); }
.chsec, .chplus { color: var(--chs-sec, #4a5f86); } .chplus:hover { background: var(--chs-hover, #c9d8f1); }
.chres2 { color: var(--chs-fg, #2b3a55); } .chres2:hover { background: var(--chs-hover, #cddcf3); } .chres2 .muted { color: inherit; opacity: .7; }
.chside .muted { color: var(--chs-fg, #2b3a55); opacity: .65; }
.chsearch { display: flex; gap: 6px; align-items: center; } .chsearch input { flex: 1; min-width: 0; }
.chsearch .chbtn.ico { color: var(--chs-fg, #4a5f86); } .chsearch .chbtn.ico:hover { background: var(--chs-hover, #cddcf3); }
.chsendb { background: var(--chs-on, #3b6db3); border-color: var(--chs-on, #3b6db3); color: var(--chs-onfg, #fff); }
.chthemes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 290px; }
.chtheme { border: 2px solid transparent; background: transparent; border-radius: 10px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; }
.chtheme span { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; width: 54px; height: 36px; border-radius: 8px; padding: 6px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .12); }
.chtheme span i { display: block; height: 6px; border-radius: 3px; } .chtheme span i:first-child { width: 100%; } .chtheme span i:last-child { width: 60%; }
.chtheme:hover { background: #eef3fb; } .chtheme.on { border-color: #3b6db3; }
.chthcustom { display: flex; align-items: center; justify-content: space-between; margin: 10px 4px 2px; font-size: 13px; }.chthcustom2 { margin: 10px 4px 2px; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 6px; } .chthcustom2 label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .chthcustom2 input[type=color] { width: 44px; height: 26px; padding: 0; border-radius: 6px; cursor: pointer; }

/* obaveštenja kao u Slacku */
#chToasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 500; width: 340px; max-width: calc(100vw - 36px); }
.chtoast { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #c9d8f1; border-left: 4px solid #3b6db3; border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 28px rgba(40, 60, 100, .28); cursor: pointer; animation: chtin .25s ease-out; transition: opacity .25s, transform .25s; }
.chtoast.out { opacity: 0; transform: translateX(30px); } .chtoast:hover { background: #f1f5fc; }
.chtbody { min-width: 0; flex: 1; font-size: 13px; } .chtbody b { display: block; margin-bottom: 1px; } .chtbody div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.chtx { border: 0; background: transparent; color: #8a97b0; cursor: pointer; font-size: 13px; padding: 0 2px; } .chtx:hover { color: #c0394d; }
@keyframes chtin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chprefs { display: grid; gap: 6px; margin: 0 4px 4px; font-size: 13px; } .chprefs label { display: flex; gap: 8px; align-items: center; cursor: pointer; }.chitemw .chdelx { right: 12px; } .chitemw:hover .chdelx { opacity: .85; } .chdelx:hover { color: #c0394d !important; }
.chitemw .chdelx { right: 12px; } .chitemw:hover .chdelx { opacity: .85; } .chdelx:hover { color: #c0394d !important; }
.cmp-btns button { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 3px 6px; } .cmp-btns .chtabn { position: absolute; top: -4px; right: -3px; margin: 0; font-size: 10px; padding: 0 5px; }
.chtitle { flex-wrap: nowrap; } .chtitle b { white-space: nowrap; } .chtopic { min-width: 0; } .chhdr { flex-wrap: wrap; row-gap: 6px; }
#layoutBtn { display: inline-flex; align-items: center; color: #4a6fb0; } #layoutBtn.hidden { display: none; }
body.compact .cmp-head img { display: none; } body.compact .cmp-head { justify-content: flex-end; }

/* gornji meni: iste boje i ikonice kao leva traka */
header #tabs button[data-k] { display: inline-flex; align-items: center; gap: 7px; background: #3b5b8f !important; color: #dce6f8 !important; border: 0 !important; border-radius: 10px; padding: 7px 13px; position: relative; font-weight: 600; }
header #tabs button[data-k]:hover { background: #4a6fa8 !important; }
header #tabs button[data-k].on { background: #fff !important; color: #2d4a7a !important; box-shadow: inset 0 0 0 2px #3b5b8f; }
header #tabs .chtabn { margin-left: 2px; }
header .spacer { flex: 0 0 0; width: 0; } header #timerBar { margin-left: auto; } header #undoBtn.hidden + .bell { }
.cmp-now { background: #3d7be0 !important; } .cmp-now select { background: #fff !important; color: #1f2a44; }
html.dark .cmp-now { background: #b4c0d6 !important; }
.cmp-now { background: #3b6db3 !important; } html.dark .cmp-now { background: #b4c0d6 !important; }
.chtones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 2px 24px; } .chtone { border: 1px solid #c9d8f1; background: #f3f7fd; border-radius: 9px; padding: 5px 8px; font-size: 12.5px; cursor: pointer; text-align: left; } .chtone:hover { background: #e3edfb; } .chtone.on { background: #cfe0f6; border-color: #3b6db3; font-weight: 700; }
.chfile.gone { opacity: .6; background: #f3f4f7; }

/* pozivi */
.callui { position: fixed; right: 18px; bottom: 18px; width: 440px; background: #1d2a44; color: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(10, 20, 45, .5); z-index: 400; overflow: hidden; display: flex; flex-direction: column; }
.callui.big { inset: 24px; width: auto; }
.callhead { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #16213a; } .callhead .muted { color: #9fb3d9; } .callhead .spacer { flex: 1; } .callhead .chbtn { color: #cfdcf5; border: 0; background: transparent; }
.callgrid { flex: 1; min-height: 230px; display: grid; gap: 6px; padding: 6px; grid-template-columns: 1fr; background: #0f1830; }
.callui.big .callgrid { min-height: 0; } .callgrid[data-n="2"], .callgrid[data-n="3"], .callgrid[data-n="4"] { grid-template-columns: 1fr 1fr; } .callgrid[data-n="5"], .callgrid[data-n="6"], .callgrid[data-n="7"], .callgrid[data-n="8"], .callgrid[data-n="9"] { grid-template-columns: repeat(3, 1fr); }
.calltile { position: relative; background: #263759; border-radius: 12px; overflow: hidden; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.calltile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b1226; } .calltile.self video { transform: scaleX(-1); }
.calltile.novid video { visibility: hidden; } .callav { position: relative; display: none; } .calltile.novid .callav { display: block; }
.callnm { position: absolute; left: 8px; bottom: 6px; font-size: 12px; background: rgba(10, 18, 40, .6); padding: 1px 8px; border-radius: 8px; }
.callbar { display: flex; justify-content: center; gap: 12px; padding: 10px; background: #16213a; }
.callb { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #34476f; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .callb:hover { background: #435a8a; }
.callb.off { background: #c0394d; } .callb.on { background: #3d7be0; } .callb.end { background: #d64560; } .callb.end:hover { background: #e25772; } .callb.acc { background: #2f9e6a; } .callb.acc:hover { background: #38b97c; }
.callring { position: fixed; right: 18px; top: 70px; z-index: 450; display: flex; align-items: center; gap: 12px; background: #1d2a44; color: #fff; padding: 12px 16px; border-radius: 14px; box-shadow: 0 10px 34px rgba(10, 20, 45, .5); animation: chtin .25s ease-out; } .callrt { min-width: 150px; font-size: 13px; } .callrt b { display: block; font-size: 15px; }
.chcalllive { color: #2f9e6a; font-weight: 700; font-size: 13px; align-self: center; } .chjoin2 { background: #e3f5e8; border-color: #6fbf84; color: #1f6b34; }
.endcall { background: #fdeaed; border-color: #e58a99; color: #a02a3d; margin-left: 6px; } .callui { max-height: calc(var(--vh100, 100vh) - 36px); }

/* alatke poruke: desno uz vrh poruke, da ne zaklanjaju odgovore i tekst susednih poruka */
.chwrap { position: static !important; }
.chmsg .chtools, .chmsg.hasfile .chtools { top: -15px !important; bottom: auto !important; left: auto !important; right: 16px !important; }
.chmsg .chedit { top: -15px !important; left: auto !important; right: 222px !important; }
.chplist .chmsg .chtools { right: 8px !important; } .chplist .chmsg .chedit { right: 206px !important; }
.chmsg.hasfile { padding-bottom: 4px; }

/* reakcije i odgovor: red ISPOD poruke (ne zaklanja ništa); izmena/brisanje/pin: mala traka gore desno */
.chmsg { flex-wrap: wrap; }
.chmsg .chtools, .chmsg.hasfile .chtools { position: static !important; display: none !important; flex: 0 0 100%; margin: 2px 0 6px 46px !important; width: max-content; background: #eef3fb !important; border: 1px solid #c9d8f1 !important; box-shadow: none !important; }
.chmsg:hover .chtools { display: flex !important; }
.chmsg .chedit { top: -15px !important; left: auto !important; right: 16px !important; }
.chplist .chmsg .chedit { right: 8px !important; }
.chmsg.hasfile { padding-bottom: 0; }

/* pin / izmeni / obriši: uvek vidljivi, desno u nastavku imena autora */
.chhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.chedit.inl { position: static !important; display: inline-flex !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-left: 6px; opacity: .5; transition: opacity .15s; }
.chmsg:hover .chedit.inl { opacity: 1; } .chedit.inl button { padding: 2px 5px; }
.chwrap { display: block !important; } .chthr { display: flex !important; margin-top: 4px; }
.chinl { margin: 6px 0 4px; padding-left: 12px; border-left: 3px solid #c9d8f1; } .chinl .chmsg { padding-left: 4px; padding-right: 4px; } .chinl .chmsg:hover { background: #e9f0fb; } .chinlc { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 4px; } .chinlc textarea { flex: 1; resize: none; border: 1.5px solid #b9c9e6; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13.5px; background: var(--panel); outline: 0; } .chinlc textarea:focus { border-color: #5f86c4; }
.chemx { max-height: 300px; width: 330px; } .chemtabs { display: flex; gap: 2px; padding: 0 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .chemtabs button { border: 0; background: transparent; font-size: 17px; padding: 3px 6px; border-radius: 8px; cursor: pointer; } .chemtabs button:hover { background: #e6eefb; }
.chinlh { font-size: 11.5px; color: #5a6b8c; margin: 8px 0 2px; } .chinlc { max-width: 460px; } .chinlc textarea { min-width: 0; max-width: 380px; } .chinl .chtools { margin-left: 46px !important; }
.chtools button.on { color: #c78a10; }

/* gušći prikaz poruka */
.chmsg { padding: 2px 14px !important; gap: 8px !important; }
.chmsg .chgut { width: 30px !important; } .chmsg .chgut .chav { width: 28px !important; height: 28px !important; font-size: 11px !important; border-radius: 7px; }
.chhead { font-size: 13px; line-height: 1.2; } .chtext { line-height: 1.35; font-size: 13.5px; }
.chmsg.grp { padding-top: 0 !important; }
.chday { margin: 8px 0 4px !important; }
.chres { margin-top: 2px !important; gap: 3px !important; } .chre { padding: 0 7px !important; font-size: 12px !important; line-height: 1.5; }
.chthr { margin-top: 1px !important; font-size: 12px !important; padding: 1px 0 !important; }
.chinl { margin: 3px 0 2px !important; padding-left: 10px !important; } .chinl .chgut { width: 24px !important; } .chinl .chgut .chav { width: 22px !important; height: 22px !important; font-size: 9px !important; }
.chinl .chmsg { padding: 1px 4px !important; }
.chinlh { margin: 4px 0 1px !important; font-size: 11px !important; } .chinlc { margin: 2px 0 2px !important; } .chinlc textarea { padding: 4px 9px !important; font-size: 13px !important; }
.chmsg .chtools { margin: 0 0 3px 38px !important; } .chmsg .chtools button { padding: 2px 6px !important; font-size: 13px !important; }
.chfile { margin-top: 3px !important; padding: 6px 10px !important; } .chfile img { max-width: 300px !important; max-height: 200px !important; }
.chcomp { padding: 4px 14px 8px !important; } .chbox textarea { padding: 7px 12px 2px !important; } .chbar { padding: 2px 8px 4px !important; }
.chthr.chside { margin: 0 0 0 8px !important; padding: 1px 8px !important; border-radius: 10px; background: #e3edfb; color: #2d5a9e; font-size: 12px; font-weight: 700; } .chthr.chside.open { background: #cfe0f6; } .chthr.chside:hover { text-decoration: none; background: #d3e3f8; }

/* formatiranje teksta, GIF-ovi, nalepnice */
.chfmt { display: flex; align-items: center; gap: 2px; padding: 4px 8px 0; flex-wrap: wrap; } .chfmt button { border: 0; background: transparent; color: #4a5f86; min-width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 13px; padding: 0 5px; } .chfmt button:hover { background: #e6eefb; } .chsep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.chtext b { font-weight: 800; } .chtext code { background: #eef1f6; border: 1px solid #dde3ee; border-radius: 4px; padding: 0 4px; font-size: 12.5px; } .chpre { background: #f4f6fa; border: 1px solid #dde3ee; border-radius: 8px; padding: 8px 10px; margin: 4px 0; overflow-x: auto; font-size: 12.5px; white-space: pre; }
.chq { border-left: 3px solid #b9c9e6; margin: 3px 0; padding: 1px 10px; color: #4a5f86; } .chl { margin: 3px 0 3px 4px; padding-left: 18px; }
.chgif { display: block; max-width: 300px; max-height: 240px; border-radius: 10px; margin-top: 3px; } .chgifsrc { font-size: 10px; color: var(--muted); margin: 1px 0 3px; }
.chpicktabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .chpicktabs button { border: 0; background: transparent; padding: 6px 12px; font-weight: 700; color: #5a6b8c; cursor: pointer; border-bottom: 2px solid transparent; } .chpicktabs button.on { color: #2d4a7a; border-bottom-color: #3b6db3; }
.chgifq { width: 100%; box-sizing: border-box; margin-bottom: 6px; } .chgifbox { width: 320px; max-height: 300px; overflow-y: auto; } .chgifg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .chgifg button { border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #eef1f6; } .chgifg img { display: block; width: 100%; height: 100px; object-fit: cover; }
.chgifkey { padding: 10px; display: grid; gap: 8px; width: 300px; }
.chpop #chPickBody .chemx, .chpop #chEmOnly .chemx { width: 320px; }

/* široki ekran: reakcije su desno od poruke u istom redu, a tekst ne ulazi pod njih */
@media (min-width: 900px) {
  .chmsg { flex-wrap: nowrap !important; }
  .chmsg > .chtools, .chmsg.hasfile > .chtools { position: absolute !important; right: 14px !important; top: 1px !important; left: auto !important; bottom: auto !important; margin: 0 !important; flex: none; width: auto !important; background: var(--panel) !important; box-shadow: 0 1px 6px rgba(40, 60, 100, .18) !important; }
  .chmsg:not(.grp) > .chbody .chwrap { max-width: calc(100% - 225px); }
  .chmsg.grp > .chbody .chwrap { max-width: calc(100% - 225px); }
  .chinl .chmsg > .chtools { right: 6px !important; }
}

/* uzak prozor: reakcije su takođe desno, malo iznad poruke (ne zaklanjaju tekst koji počinje levo) */
@media (max-width: 899px) {
  .chmsg { flex-wrap: nowrap !important; }
  .chmsg > .chtools, .chmsg.hasfile > .chtools { position: absolute !important; right: 8px !important; top: -15px !important; left: auto !important; bottom: auto !important; margin: 0 !important; flex: none; width: auto !important; background: var(--panel) !important; box-shadow: 0 1px 6px rgba(40, 60, 100, .22) !important; z-index: 6; }
}
.chmsg:hover { background: #e8effa; }

/* reakcije: odmah desno od kraja poruke, u istom redu */
.chwrap { display: flex !important; align-items: flex-start; gap: 10px; max-width: 100% !important; }
.chwrap > .chmain { min-width: 0; flex: 0 1 auto; }
.chwrap > .chtools { display: none !important; position: static !important; flex: none !important; margin: 0 !important; width: auto !important; align-self: flex-start; background: var(--panel) !important; border: 1px solid #c9d8f1 !important; box-shadow: none !important; }
.chmsg:hover .chwrap > .chtools { display: flex !important; }
.chwrap > .chedit:not(.inl) { position: static !important; align-self: flex-start; }
.chmsg > .chtools { display: none !important; }
.chmsg:not(.grp) > .chbody .chwrap, .chmsg.grp > .chbody .chwrap { max-width: 100% !important; }

.chcolA { font-weight: 800; border-bottom: 3px solid #d64560; line-height: 1; padding: 0 1px; }
.chsw { display: grid; grid-template-columns: repeat(4, 28px); gap: 6px; padding: 2px; } .chsw button { width: 28px; height: 28px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px #c9d8f1; cursor: pointer; padding: 0; } .chsw button:hover { box-shadow: 0 0 0 2px #3b6db3; }
.chsz { display: grid; gap: 2px; min-width: 150px; } .chsz button { border: 0; background: transparent; text-align: left; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; } .chsz button:hover { background: #e6eefb; }
.chbig { font-size: 1.25em; } .chsmall { font-size: .82em; } .chh1 { font-size: 1.45em; font-weight: 800; line-height: 1.25; margin: 2px 0; } .chh2 { font-size: 1.2em; font-weight: 800; line-height: 1.25; margin: 2px 0; } .chhl { border-radius: 3px; padding: 0 2px; color: inherit; }
.chgifbox { min-height: 120px; } .chpop { overflow-y: auto; }
.chbox textarea { max-height: calc(var(--vh100, 100vh) * 0.5) !important; overflow-y: auto; } .chgrip2 { height: 9px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; } .chgrip2::before { content: ''; width: 36px; height: 3px; border-radius: 2px; background: #c9d8f1; } .chgrip2:hover::before { background: #5f86c4; }

/* uređivač poruke (pravi WYSIWYG) */
.chin { min-height: 44px; max-height: calc(var(--vh100, 100vh) * 0.5); overflow-y: auto; padding: 8px 12px; outline: 0; line-height: 1.4; font-size: 14px; word-break: break-word; }
.chin:empty::before { content: attr(data-ph); color: #9aa6ba; pointer-events: none; }
.chin blockquote { border-left: 3px solid #b9c9e6; margin: 3px 0; padding: 1px 10px; color: #4a5f86; } .chin ul, .chin ol { margin: 3px 0 3px 4px; padding-left: 20px; }
.chin h1 { font-size: 1.45em; font-weight: 800; margin: 2px 0; line-height: 1.25; } .chin h2 { font-size: 1.2em; font-weight: 800; margin: 2px 0; line-height: 1.25; }
.chin .chbig { font-size: 1.25em; } .chin .chsmall { font-size: .82em; } .chin a { color: #2d5a9e; text-decoration: underline; }
.chsz button[data-sz=small] { font-size: 11.5px; } .chsz button[data-sz=big] { font-size: 17px; } .chsz button[data-sz=h2] { font-size: 19px; font-weight: 800; } .chsz button[data-sz=h1] { font-size: 24px; font-weight: 800; }

/* liste: pune crne tačke, brojevi */
.chin ul, .chtext ul.chl, .chl { list-style: disc; } .chin ol, .chtext ol.chl, ol.chl { list-style: decimal; }
.chin li::marker, .chl li::marker { color: #000; font-weight: 700; }
html.dark .chin li::marker, html.dark .chl li::marker { color: #000; }
.chmain { min-height: 0; overflow: hidden; } .chlist { min-height: 0; } .chcomp { flex: none; max-height: calc(var(--vh100, 100vh) * 0.6); }
.chat { grid-template-columns: var(--chsw, 190px) minmax(0, 1fr) auto !important; } .chside { position: relative; } .chside::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6px; cursor: col-resize; } .chside:hover::after, .chside.drag::after { background: rgba(95, 134, 196, .35); } .chitem { padding: 5px 8px !important; font-size: 13.5px; } .chsec { padding: 10px 8px 3px !important; } .chsearch { padding: 0 6px 6px !important; }
.calltile.self.sharing video { visibility: hidden; } .calltile.self.sharing::after { content: 'Deliš ekran. Drugi ga vide.'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cfdcf5; font-size: 14px; background: #263759; } .calltile.self.sharing .callav { display: none; }
body.sharingscreen::after { content: ''; position: fixed; inset: 0; border: 5px solid #e0243c; pointer-events: none; z-index: 9999; } .calltile.self.sharing::after { border: 3px solid #e0243c; box-sizing: border-box; }

/* nalepnice kancelarije */
.chstk { width: 330px; } .chstkbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .chstkg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 280px; overflow-y: auto; }
.chstkc { position: relative; } .chstkc > button:first-child { width: 100%; aspect-ratio: 1; border: 0; background: #eef1f6; border-radius: 10px; padding: 4px; cursor: pointer; } .chstkc > button:first-child:hover { background: #dfe9f9; } .chstkc img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chstkx { position: absolute; top: 2px; right: 2px; border: 0; background: rgba(255, 255, 255, .9); color: #c0394d; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; cursor: pointer; opacity: 0; } .chstkc:hover .chstkx { opacity: 1; }
.chsticker { display: block; max-width: 180px; max-height: 180px; margin-top: 3px; border-radius: 6px; }
.chstkg > .muted, .chstkg > div:not(.chstkc) { grid-column: 1 / -1; } .chstkbar .muted { white-space: nowrap; }
.chstkbar { justify-content: space-between; } .chstkg { grid-template-columns: repeat(4, 1fr); } .chstkc > button:first-child { background: transparent; } .chstkc > button:first-child:hover { background: #e3edfb; }
#scriptBtn { font-weight: 700; min-width: 40px; color: #3b5b8f; }
.cmp-btns .cmpscr { font-size: 12px !important; font-weight: 700; padding: 3px 7px !important; border: 1px solid #c9d8f1 !important; border-radius: 8px; margin-right: 2px; }
.chitemw { margin: 1px 8px !important; } .chitem { border-radius: 8px !important; padding: 5px 10px !important; } .chfav { right: 10px !important; } .chitemw .chfav + .chfav, .chitemw .chdelx { right: 32px !important; } .chitem .chbadge { margin-right: 2px; }

/* boja pozadine poruka (tema chata) */
.chat.hasmain .chmain, .chat.hasmain .chhdr, .chat.hasmain .chlist, .chat.hasmain .chcomp, .chat.hasmain .chpanel { background: var(--chm-bg) !important; color: var(--chm-fg) !important; }
.chat.hasmain .chhdr, .chat.hasmain .chpanel, .chat.hasmain .chphdr { border-color: var(--chm-line) !important; }
.chat.hasmain .chmsg:hover { background: var(--chm-hover) !important; }
.chat.hasmain .chbox { background: var(--chm-box) !important; border-color: var(--chm-line) !important; }
.chat.hasmain .chin, .chat.hasmain .chtext, .chat.hasmain .chhead b, .chat.hasmain .chtitle b { color: var(--chm-fg) !important; }
.chat.hasmain .chbtn { background: transparent !important; color: inherit !important; border-color: var(--chm-line) !important; }
.chat.hasmain .muted, .chat.hasmain .chhead small { color: var(--chm-fg) !important; opacity: .62; }
.chat.hasmain .chday span { background: var(--chm-bg) !important; color: var(--chm-fg) !important; border-color: var(--chm-line) !important; } .chat.hasmain .chday::before { border-color: var(--chm-line) !important; }
.chat.hasmain .chfile { background: var(--chm-box) !important; border-color: var(--chm-line) !important; } .chat.hasmain .chtools, .chat.hasmain .chwrap > .chtools { background: var(--chm-box) !important; border-color: var(--chm-line) !important; }
.chat.hasmain .chmsg.pinned { background: var(--chm-hover) !important; } .chat.hasmain .chfmt button, .chat.hasmain .chedit button, .chat.hasmain .chtools button { color: var(--chm-fg) !important; }
.chthcustom2 label span { display: inline-flex; gap: 6px; align-items: center; }

/* Pošta */
main.mailmain { padding: 0 !important; overflow: hidden !important; display: flex; flex-direction: column; }
.mailbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); } .mailbar .spacer { flex: 1; }
#mailView { flex: 1; width: 100%; min-height: 0; border: 0; }
.mailpick { max-width: 640px; margin: 36px auto; padding: 0 20px; } .mailprov { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 20px; }
.mailp { padding: 16px; border-radius: 12px; border: 1px solid #c9d8f1; background: #f3f7fd; font-size: 15px; font-weight: 700; cursor: pointer; color: #2d4a7a; } .mailp:hover { background: #e3edfb; border-color: #5f86c4; }
.mailtabs { flex-wrap: wrap; } .mailtab { border: 1px solid #c9d8f1; background: #f3f7fd; border-radius: 9px; padding: 5px 12px; font-weight: 700; color: #2d4a7a; cursor: pointer; } .mailtab.on { background: #3b6db3; border-color: #3b6db3; color: #fff; } .mailtab.add { background: transparent; border-style: dashed; font-weight: 600; } .mailwrap { flex: 1; min-height: 0; display: flex; } .mailview { flex: 1; width: 100%; min-height: 0; border: 0; }
main.mailmain { height: 100%; min-height: 0; } .mailwrap { position: relative; flex: 1 1 0; min-height: 0; } .mailview { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }

/* Dijalog 'Dodaj sate': trajanje (h : min) ne sme da izlazi iz prozora, datum zadržava ikonicu */
.row2:has(.dur) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.row2:has(.dur) input[type=date] { min-width: 0; width: 100%; }
.row2 .dur { flex-wrap: nowrap; }
.row2 .dur input { width: 54px; padding-left: 6px; padding-right: 6px; }

/* datumi: izvorni tekst polja uvek sakriven (različite verzije Chromea boje delove datuma posebno) */
.dwrap > input[type=date] { -webkit-text-fill-color: transparent; }
.dwrap > input[type=date]::-webkit-datetime-edit-text, .dwrap > input[type=date]::-webkit-datetime-edit-month-field, .dwrap > input[type=date]::-webkit-datetime-edit-day-field, .dwrap > input[type=date]::-webkit-datetime-edit-year-field { color: transparent !important; -webkit-text-fill-color: transparent !important; }
.dwrap > input[type=date]:focus::-webkit-datetime-edit-text, .dwrap > input[type=date]:focus::-webkit-datetime-edit-month-field, .dwrap > input[type=date]:focus::-webkit-datetime-edit-day-field, .dwrap > input[type=date]:focus::-webkit-datetime-edit-year-field { background: transparent !important; color: transparent !important; }

/* datum: ikonica kalendara uvek vidljiva i dovoljno velika */
.dwrap > input[type=date] { min-width: 150px; padding-right: 34px; }
.row2:has(.dur) .dwrap { display: block; }
.row2:has(.dur) .dwrap > input[type=date] { width: 100%; min-width: 140px; }
.dwrap > input[type=date]::-webkit-calendar-picker-indicator { opacity: .85; width: 18px; height: 18px; cursor: pointer; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; }

#verTag { position: fixed; left: 8px; bottom: 4px; font-size: 9px; color: #8a97ad; opacity: .8; pointer-events: none; z-index: 5; }
body.rail #verTag { left: 0; width: 64px; text-align: center; color: rgba(255,255,255,.7); }

/* reci se nikad ne lome slovo po slovo (npr. Ro / k): prelom samo izmedju reci; preduga reč se lomi tek kad stvarno ne staje */
#main table:not(.cal):not(.matrix):not(.stack) th { overflow-wrap: normal; word-break: normal; hyphens: manual; }
#main table:not(.cal):not(.matrix):not(.stack) td { overflow-wrap: break-word; word-break: normal; }
.box > .bh .bn > span, aside .node .nm, .cmp-title, .cmp-main, .cmp-meta, .chtext { overflow-wrap: break-word; word-break: normal; }
th, label, .chip, button, .subtabs button { word-break: normal; overflow-wrap: normal; }

/* mali prozor: ikona chata je crvena kad ima nepročitanih poruka */
#cmpChat.unread { color: #e0243c !important; }
#cmpChat.unread svg { stroke: #e0243c; }
#cmpChatN { background: #e0243c !important; color: #fff !important; font-weight: 700; }

/* poruke u boji osobe koja ih piše (boje iz tema, malo svetlije) */
.chmsg.chmc { background: color-mix(in srgb, var(--mc) 45%, #ffffff); border-radius: 8px; margin: 1px 8px; padding-left: 8px; padding-right: 8px; }
.chmsg.chmc:hover { background: color-mix(in srgb, var(--mc) 70%, #ffffff); }
.chmsg.chmc.pinned { background: #fff3cf; }
.chmsg.chmc.flash { background: #ffeeb0 !important; }
.chat.chdarkm .chmsg.chmc { background: color-mix(in srgb, var(--mc) 16%, var(--chm-bg, #1f2530)); color: var(--chm-fg); }
.chat.chdarkm .chmsg.chmc:hover { background: color-mix(in srgb, var(--mc) 26%, var(--chm-bg, #1f2530)); }

/* razgovor 1 na 1: moje poruke desno, tuđe levo; u kanalima sve levo jedno ispod drugog */
.chmsg.rt { flex-direction: row-reverse; }
.chmsg.rt .chbody { display: flex; flex-direction: column; align-items: flex-end; flex: 0 1 auto; max-width: 80%; }
.chmsg.rt .chhead { align-self: flex-end; }
.chmsg.rt .chwrap { max-width: 100%; }
.chmsg.rt .chmain { background: #d8e6fb; border-radius: 14px 14px 4px 14px; padding: 6px 12px; text-align: left; }
.chmsg.rt .chres { align-self: flex-end; }
.chmsg.rt .chgut { text-align: left; }
.chat.chdarkm .chmsg.rt .chmain { background: color-mix(in srgb, #4f7fd0 35%, var(--chm-bg, #1f2530)); }

/* dugme Pošalji odmah posle ikonica (spajalica, smajli, @), ne na desnom kraju */
.chcomp .chbar .spacer { display: none !important; }
.chcomp .chbar { justify-content: flex-start; gap: 4px; }
.chcomp .chbar .primary { margin-left: 8px; }

/* preuzimanje fajla: traka napretka u zaglavlju chata */
.chdl { display: inline-flex; align-items: center; margin-right: 10px; padding: 4px 12px; border-radius: 14px; font-size: 12px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; color: #2d4a7a; background: linear-gradient(90deg, #bcd3f3 var(--p, 0%), #e4eefc var(--p, 0%)); border: 1px solid #b9cdea; }
.chdl.ok { background: #dff3e6; border-color: #a9d8b8; color: #1f6a3a; }
.chdl.err { background: #fde4e4; border-color: #f0b4b4; color: #b02a37; }

.chdlh { max-height: 360px; overflow-y: auto; min-width: 380px; }
.chdlrow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #e3ebf7; }
.chdlm { min-width: 0; flex: 1; } .chdlm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* font cele aplikacije (bira se u temama chata) */
body, button, input, select, textarea { font-family: var(--appfont, system-ui, "Segoe UI", sans-serif); }
.cmp-btns button { font-family: "Segoe UI Symbol", "Segoe UI", sans-serif; }

/* niža gornja traka (logo, kartice, tajmer, odjava) */
header { min-height: 44px !important; padding-top: 3px !important; padding-bottom: 3px !important; row-gap: 3px !important; }
header .brand img { height: 28px !important; }
header #tabs button { padding: 5px 12px !important; line-height: 1.25 !important; }
header > button, header .bar button, header #timerBar, header #who { padding-top: 4px !important; padding-bottom: 4px !important; }
header button { min-height: 0 !important; }

/* samo moje poruke su obojene (iz boje teme, svetlo), tuđe su bele */
.chmsg.chmc { background: color-mix(in srgb, var(--mc, #3b6db3) 13%, #ffffff); }
.chmsg.chmc:hover { background: color-mix(in srgb, var(--mc, #3b6db3) 20%, #ffffff); }
.chmsg.chmc.pinned { background: #fff3cf; }

/* pinovana poruka u nizu (bez zaglavlja): ikonica pina stalno stoji u levom delu */
.chmsg.grp .chgut { position: relative; }
.chmsg .chgut .chpg { color: #c78a10; display: inline-flex; vertical-align: middle; }
.chmsg.grp.pinned .chgut .chpg + .chhover { display: none; }
.chmsg.grp.pinned:hover .chgut .chpg { display: none; }
.chmsg.grp.pinned:hover .chgut .chpg + .chhover { display: inline; }

/* pregled slike/fajla pre slanja */
.chstage { display: flex; flex-wrap: wrap; gap: 8px; max-height: 240px; overflow-y: auto; margin: 0 0 10px; }
.chstage img { max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid #cddcf2; object-fit: contain; }
.chstf { padding: 8px 12px; border: 1px solid #cddcf2; border-radius: 8px; background: #f4f8fe; }

/* traka sa slikom/fajlom iznad polja za pisanje (pre slanja) */
.chstagebar { padding: 8px 10px 4px; border-bottom: 1px solid #dbe6f6; }
.chstthumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chsti { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cddcf2; border-radius: 8px; background: #f4f8fe; padding: 4px; }
.chsti img { max-height: 90px; max-width: 160px; border-radius: 6px; display: block; }
.chsti.file { padding: 6px 28px 6px 10px; }
.chsti button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #b9cdea; background: #fff; color: #46536b; font-size: 11px; line-height: 1; padding: 0; cursor: pointer; }
.chsti.file button { top: 50%; transform: translateY(-50%); right: 4px; }
.chstopts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: #46536b; margin-bottom: 4px; }
.chstopts select { margin-left: 4px; padding: 2px 6px; font-size: 12px; }

.chsti { flex-direction: column; align-items: stretch; width: 170px; }
.chsti.file { flex-direction: row; align-items: center; width: auto; flex-wrap: wrap; }
.chsti .chcap { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 4px 6px; font-size: 12px; border: 1px solid #cddcf2; border-radius: 6px; }
.chsti.file .chcap { flex: 1 0 100%; }

.chsti .chcap:first-child { margin: 0 0 4px; } .chsti.file .chcap { flex: 1 0 100%; margin: 2px 0 0; }

/* slike i fajlovi unutar polja za pisanje (kao u Wordu) */
.chin .chinblk { position: relative; display: inline-block; vertical-align: top; margin: 4px 6px 4px 0; padding: 4px; border: 1px solid #cddcf2; border-radius: 8px; background: #f4f8fe; user-select: none; }
.chin .chinblk img { display: block; max-width: 260px; max-height: 170px; border-radius: 6px; }
.chin .chinblk.doc { padding: 6px 30px 6px 10px; }
.chin .chinx { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #b9cdea; background: #fff; color: #46536b; font-size: 11px; line-height: 1; padding: 0; cursor: pointer; }
.chstagebar { display: none !important; }

.chin .chinbadge { display: block; margin-top: 4px; width: 100%; border: 0; background: #e4eefc; color: #2d4a7a; font-size: 11px; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.chin .chinbadge:hover { background: #d3e3fa; }

/* status: tačka pored imena */
.stdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 5px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255,255,255,.9); }
.stdot.dnd { position: relative; } .stdot.dnd::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 1.5px; background: #fff; }
#who { cursor: pointer; } #who:hover { text-decoration: underline; } #whoDot { margin-left: 0; margin-right: 2px; }

/* tačka statusa uvek ispred imena */
.stdot { margin: 0 5px 0 0 !important; flex: none; }

/* crta „Nepročitano“ i dugme „klikni na dole“ */
.chunr { display: flex; align-items: center; gap: 10px; margin: 10px 16px 4px; color: #e0443c; font-size: 11px; font-weight: 700; }
.chunr::before, .chunr::after { content: ""; flex: 1; height: 1px; background: #e0443c; opacity: .45; }
.chjumpw { position: sticky; bottom: 8px; height: 0; text-align: center; pointer-events: none; z-index: 4; }
.chjumpw button { pointer-events: auto; position: relative; top: -36px; border: 1px solid #b9cdea; background: #fff; color: #2d4a7a; border-radius: 18px; padding: 6px 16px; font-size: 12.5px; font-weight: 600; box-shadow: 0 3px 12px rgba(40,70,120,.25); cursor: pointer; }
.chjumpw button.unr { background: #e0443c; border-color: #e0443c; color: #fff; }
.chjumpw button.hidden { display: none; }

/* sve što nije pročitano stoji u zasebnom polju, od mesta dokle si pročitala */
.chunrbox { margin: 6px 6px 6px 10px; padding-bottom: 4px; border-left: 3px solid #e0443c; border-radius: 4px 10px 10px 4px; background: rgba(224, 68, 60, .06); }
.chunrbox .chunr { margin-top: 2px; }

/* razgovor 1 na 1: moje poruke desno; trakica sa smajlijima / reakcijama izlazi ulevo, ne van prozora */
.chmsg.rt .chwrap { display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; }
.chmsg.rt .chtools, .chmsg.rt.hasfile .chtools { margin: 2px 0 6px 0 !important; flex: 0 0 auto !important; align-self: flex-end; }
.chmsg.rt .chedit { right: auto !important; left: 16px !important; }
.chmsg.rt .chres { justify-content: flex-end; }
.chmsg.rt .chfile, .chmsg.rt .chmain img { max-width: 100%; }
.chmsg.rt .chbody { min-width: 0; }

/* trakica sa smajlijima / reakcijama lebdi iznad poruke (ne zauzima mesto), pa se poruke ne pomeraju kad pređeš mišem */
.chmsg .chtools, .chmsg.hasfile .chtools { position: absolute !important; display: flex !important; visibility: hidden; top: -17px !important; bottom: auto !important; right: 16px !important; left: auto !important; margin: 0 !important; flex: none !important; width: max-content; z-index: 6; box-shadow: 0 2px 8px rgba(40,70,120,.18) !important; }
.chmsg:hover .chtools { visibility: visible; }
.chmsg.rt .chtools, .chmsg.rt.hasfile .chtools { right: auto !important; left: 16px !important; }
.chmsg .chedit { display: flex !important; visibility: hidden; }
.chmsg:hover .chedit { visibility: visible; }

.chmuteic { opacity: .6; font-size: 11px; margin-left: 4px; }
.chnlist { display: flex; flex-direction: column; gap: 2px; min-width: 260px; }
.chnopt { text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #2d3f63; }
.chnopt:hover { background: #e6eefb; } .chnopt.on { background: #d8e6fb; font-weight: 700; }

.chitemw .chmore2 { visibility: hidden; font-weight: 800; letter-spacing: 1px; } .chitemw:hover .chmore2 { visibility: visible; }

/* spisak kanala i ljudi: ikone (⋯, pin, kanta) se pojave tek kad pređeš mišem, uz ime koje se skraćuje; pinovano se uvek vidi */
.chitemw .chfav, .chitemw .chdelx, .chitemw .chmore2 { position: static !important; right: auto !important; flex: none; width: 0; padding: 0 !important; margin: 0; overflow: hidden; opacity: 0; visibility: visible !important; }
.chitemw:hover .chfav, .chitemw:hover .chdelx, .chitemw:hover .chmore2 { width: auto; padding: 2px 4px !important; opacity: .9; }
.chitemw .chfav.on { width: auto; padding: 2px 4px !important; opacity: .95; }
.chitemw .chitem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pozivi: sklopljeno dole u levoj koloni, otvara se nagore */
#chSide { display: flex; flex-direction: column; }
.chcalls { margin-top: auto; position: sticky; bottom: 0; background: var(--chs-bg, #dfe8f7); border-top: 1px solid var(--chs-line, #c3d2ea); padding: 0; z-index: 8; }
.chcallsbtn { width: 100%; text-align: left; border: 0; background: transparent; color: var(--chs-fg, #2b3a55); font-weight: 700; font-size: 12.5px; padding: 7px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.chcallsbtn:hover { background: var(--chs-hover, #cddcf3); } .chcallsarr { margin-left: auto; opacity: .6; }
.chcallspanel { position: absolute; left: 6px; right: 6px; bottom: 100%; max-height: calc(var(--vh100, 100vh) * 0.62); overflow-y: auto; background: #fff; color: #2d3f63; border: 1px solid #b9cdea; border-radius: 10px; box-shadow: 0 6px 22px rgba(40,70,120,.28); padding: 6px 8px; font-size: 12.5px; min-width: 250px; }
.chcsec { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #5b6f95; margin: 8px 2px 3px; display: flex; justify-content: space-between; align-items: center; }
.chcrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 2px; border-bottom: 1px solid #edf2fa; }
.chcrow > span:first-child { min-width: 0; } .chcnone { padding: 2px 2px 4px; } .chcmiss b, .chcmiss { color: #c0394d; }

/* Pozivi: sklopljeno dole u levoj koloni, otvara se nagore */
#chSide { display: flex; flex-direction: column; }
.chcalls { margin-top: auto; position: sticky; bottom: 0; background: var(--chs-bg, #dfe8f7); border-top: 1px solid var(--chs-line, #c3d2ea); padding: 0; z-index: 8; }
.chcallsbtn { width: 100%; text-align: left; border: 0; background: transparent; color: var(--chs-fg, #2b3a55); font-weight: 700; font-size: 12.5px; padding: 7px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.chcallsbtn:hover { background: var(--chs-hover, #cddcf3); } .chcallsarr { margin-left: auto; opacity: .6; }
.chcallspanel { position: absolute; left: 6px; right: 6px; bottom: 100%; max-height: calc(var(--vh100, 100vh) * 0.62); overflow-y: auto; background: #fff; color: #2d3f63; border: 1px solid #b9cdea; border-radius: 10px; box-shadow: 0 6px 22px rgba(40,70,120,.28); padding: 6px 8px; font-size: 12.5px; min-width: 250px; }
.chcsec { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #5b6f95; margin: 8px 2px 3px; display: flex; justify-content: space-between; align-items: center; }
.chcrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 2px; border-bottom: 1px solid #edf2fa; }
.chcrow > span:first-child { min-width: 0; } .chcnone { padding: 2px 2px 4px; } .chcmiss b, .chcmiss { color: #c0394d; }

/* poziv: dugme „ceo ekran“ za ceo poziv i za svaki prikaz (npr. tuđ ekran koji se deli) */
.calltile { position: relative; }
.calltfs { position: absolute; top: 6px; right: 6px; z-index: 3; border: 0; border-radius: 6px; background: rgba(20,30,50,.6); color: #fff; font-size: 15px; width: 28px; height: 26px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.calltile:hover .calltfs, .calltile:fullscreen .calltfs { opacity: 1; }
.calltile:fullscreen { background: #000; width: 100vw; height: var(--vh100, 100vh); }
.calltile:fullscreen video { width: 100%; height: 100%; object-fit: contain; }
.callui:fullscreen { inset: 0 !important; width: 100vw !important; height: var(--vh100, 100vh) !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; display: flex; flex-direction: column; }
.callui:fullscreen .callgrid { flex: 1; min-height: 0; }

.callb.end.all { width: auto; padding: 0 14px; font-size: 13px; font-weight: 700; border-radius: 22px; } .callb.end.all.armed { background: #7a0f1e; animation: none; }

/* dolazni poziv: veliki prozor na sredini ekrana */
.callring { position: fixed !important; inset: 0 !important; right: 0 !important; top: 0 !important; z-index: 100000 !important; display: flex !important; align-items: center; justify-content: center; background: rgba(12, 20, 40, .55) !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; gap: 0 !important; animation: none; }
.callringcard { background: #1d2a44; color: #fff; border-radius: 22px; padding: 28px 40px 26px; min-width: 340px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 14px 50px rgba(8,16,40,.6); animation: callpulse 1.4s ease-in-out infinite; }
@keyframes callpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,194,120,.55), 0 14px 50px rgba(8,16,40,.6); } 50% { box-shadow: 0 0 0 16px rgba(63,194,120,0), 0 14px 50px rgba(8,16,40,.6); } }
.callringcard .callrt b { font-size: 21px; } .callringcard .callrt div { opacity: .8; margin-top: 2px; }
.callringbtns { display: flex; gap: 22px; margin-top: 12px; }
.callb.big { width: auto; height: auto; border-radius: 30px; padding: 12px 26px; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.callb.acc.big { background: #2fb36a; } .callb.end.big { background: #e0443c; }

/* traka poziva u zaglavlju: uvek na istom mestu, u svakoj kartici */
.calltop { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px 4px 12px; border-radius: 22px; font-size: 13px; background: #1d2a44; color: #fff; margin: 0 6px; white-space: nowrap; }
.calltop.ring { background: #1d6b45; animation: callpulse2 1.2s ease-in-out infinite; }
@keyframes callpulse2 { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,194,120,.6); } 50% { box-shadow: 0 0 0 8px rgba(63,194,120,0); } }
.calltop .calltxt { max-width: 340px; overflow: hidden; text-overflow: ellipsis; } .calltop .chav { flex: none; }
.calldot { width: 9px; height: 9px; border-radius: 50%; background: #3fc278; animation: callpulse2 1.2s infinite; }
.calltb { border: 0; border-radius: 16px; padding: 5px 13px; font-size: 13px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; display: inline-flex; align-items: center; gap: 5px; }
.calltb.acc { background: #2fb36a; } .calltb.end { background: #e0443c; } .calltb:hover { filter: brightness(1.1); }
.callring { display: none !important; }

/* tamni prikaz: leva plava traka i chat zadržavaju svoje (izabrane) boje, bez invertovanja */
html.dark #rail, html.dark .chat { filter: brightness(.943) saturate(.556) hue-rotate(180deg) invert(1); }
html.dark #rail img, html.dark .chat img, html.dark .chat .chip, html.dark .chat .pchip, html.dark .chat .pchip2, html.dark .chat .pill, html.dark .chat .vchip, html.dark .chat input[type=color], html.dark #rail .chip { filter: none !important; }

html.dark .chat { background: #fff; }

/* tamni prikaz: samo leva traka i spisak razgovora (tema chata) zadržavaju boje; sve ostalo u chatu je tamno */
html.dark .chat { filter: none !important; background: transparent !important; }
html.dark .chside { filter: brightness(.943) saturate(.556) hue-rotate(180deg) invert(1); }
html.dark .chside img, html.dark .chside .chip, html.dark .chside .chav { filter: none !important; }

/* tamni prikaz: pinovane poruke i moje poruke u jarkijim bojama (pozadina se crta iza teksta, bez invertovanja) */
html.dark .chmsg { isolation: isolate; }
html.dark .chmsg.pinned, html.dark .chmsg.chmc, html.dark .chmsg.chmc:hover { background: transparent !important; }
html.dark .chmsg.pinned::before, html.dark .chmsg.chmc::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px; pointer-events: none; filter: brightness(.943) saturate(.556) hue-rotate(180deg) invert(1); }
html.dark .chmsg.chmc::before { background: color-mix(in srgb, var(--mc, #3b6db3) 62%, transparent); }
html.dark .chmsg.pinned::before { background: rgba(255, 190, 40, .38); }

/* pinovane poruke u tamnom: jasna ljubičasto-plava (ne braon), moje poruke malo jarkije */
html.dark .chmsg.pinned::before { background: rgba(130, 120, 255, .42); }
html.dark .chmsg.chmc::before { background: color-mix(in srgb, var(--mc, #3b6db3) 78%, transparent); }

/* pinovane poruke u tamnom: prava žuta pozadina sa tamnim tekstom */
html.dark .chmsg.pinned::before { background: rgba(244, 208, 63, .92); }
html.dark .chmsg.pinned .chtext, html.dark .chmsg.pinned .chtext *, html.dark .chmsg.pinned .chhead b, html.dark .chmsg.pinned .chhead small, html.dark .chmsg.pinned .chfmeta { color: #fff !important; }

/* tamni prikaz: pinovane i moje poruke prozirnije (svetao tekst na blago obojenoj pozadini) */
html.dark .chmsg.pinned::before { background: rgba(255, 214, 70, .20); }
html.dark .chmsg.chmc::before { background: color-mix(in srgb, var(--mc, #3b6db3) 30%, transparent); }
html.dark .chmsg.pinned .chtext, html.dark .chmsg.pinned .chtext *, html.dark .chmsg.pinned .chhead b, html.dark .chmsg.pinned .chhead small, html.dark .chmsg.pinned .chfmeta { color: #1f2a44 !important; }
html.dark .chmsg.pinned .chtext a { color: #0b3fae !important; }

/* tamni prikaz: fluorescentne, prozirne boje (pinovano = neon žuta, moje = neon plavo-zelena) sa svetlim tekstom */
html.dark .chmsg.pinned::before { background: rgba(235, 255, 40, .17); box-shadow: inset 3px 0 0 rgba(235, 255, 40, .95); }
html.dark .chmsg.chmc::before { background: rgba(40, 235, 255, .15); box-shadow: inset 3px 0 0 rgba(40, 235, 255, .9); }
html.dark .chmsg.pinned .chtext, html.dark .chmsg.pinned .chtext *, html.dark .chmsg.pinned .chhead b, html.dark .chmsg.pinned .chhead small, html.dark .chmsg.pinned .chfmeta { color: #1f2a44 !important; }
html.dark .chmsg.pinned .chtext a { color: #0b3fae !important; }

/* slike u chatu (koje šalje bilo ko, i GIF-ovi / nalepnice) se nikad ne invertuju: izgledaju tačno kao original */
html.dark .chat img, html.dark .chimg, html.dark img.chsticker, html.dark .chstage img, html.dark .chin img, html.dark .chinblk img { filter: brightness(.943) saturate(.556) hue-rotate(180deg) invert(1) !important; }
html.dark .chat .chip, html.dark .chat .chav img { filter: none; }

/* tamni prikaz: pinovano je uvek neon žuto, čak i kad je poruka moja (moje = neon plavo-zeleno); dva različita tona */
html.dark .chmsg.pinned.chmc::before, html.dark .chmsg.pinned::before { background: rgba(235, 255, 40, .17); box-shadow: inset 3px 0 0 rgba(235, 255, 40, .95); }
html.dark .chmsg.chmc:not(.pinned)::before { background: rgba(40, 235, 255, .15); box-shadow: inset 3px 0 0 rgba(40, 235, 255, .9); }

/* tamni prikaz: jasno različiti tonovi - pinovano = topla žuto-narandžasta, moje = hladna plava, tuđe = bez boje */
html.dark .chmsg.pinned.chmc::before, html.dark .chmsg.pinned::before { background: rgba(255, 190, 30, .30); box-shadow: inset 4px 0 0 rgba(255, 200, 40, 1); }
html.dark .chmsg.chmc:not(.pinned)::before { background: rgba(70, 140, 255, .24); box-shadow: inset 4px 0 0 rgba(90, 160, 255, 1); }


/* pinovano u tamnom: čisto žuto i providnije */
html.dark .chmsg.pinned.chmc::before, html.dark .chmsg.pinned::before { background: rgba(255, 236, 60, .15); box-shadow: inset 4px 0 0 rgba(255, 236, 60, 1); }

html.dark .chmsg.pinned.chmc::before, html.dark .chmsg.pinned::before { background: rgba(255, 233, 40, .24); box-shadow: inset 4px 0 0 #ffe928; }

html.dark .chmsg.pinned.chmc::before, html.dark .chmsg.pinned::before { background: rgba(255, 233, 40, .34); box-shadow: inset 4px 0 0 #ffe928; }

html.dark .chmsg.pinned.chmc::before, html.dark .chmsg.pinned::before { background: rgba(255, 233, 40, .40); box-shadow: inset 4px 0 0 #ffe928; }


/* tamni prikaz: samo traka sa logom (iznad spiska razgovora) je bela, nepromenjenih boja; ostatak zaglavlja je tamn */
html.dark header .brand { filter: brightness(1) saturate(.556) hue-rotate(180deg) invert(1); background: #fff; align-self: stretch; display: flex; align-items: center; margin: -3px 10px -3px -16px; padding: 0 20px 0 18px; min-width: 190px; box-sizing: border-box; }
html.dark header .brand img { filter: none !important; }

/* traka sa logom se poklapa sa spiskom razgovora ispod (boja teme chata); logo stoji na maloj beloj podlozi */
html.dark header .brand { background: var(--chs-bg-root, #fff); }
html.dark header .brand img { background: #fff; border-radius: 8px; padding: 3px 8px; box-sizing: content-box; }

/* traka sa logom je tačno široka kao spisak razgovora ispod (isti levi i desni rub) */
html.dark header .brand { width: var(--chsw-root, 190px); min-width: 0; margin-right: 12px; padding: 0 12px; justify-content: center; }

/* traka sa logom: bela pozadina, a desna granica prati rub spiska razgovora ispod */
html.dark header .brand { background: #fff; }
html.dark header .brand img { background: transparent; padding: 0; border-radius: 0; }

/* širina trake sa logom prati širinu spiska i kad je prikaz chata smanjen / povećan */
html.dark header .brand { width: calc(var(--chsw-root, 190px) * var(--chzoom, 1)); }

html.dark header .brand { justify-content: flex-start; padding: 0 12px 0 16px; }

/* ===== Pregled izveštaja u programu ===== */
.rp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 0; }
.rp-tab { border: 1px solid #c8d3e6; border-bottom: 3px solid #c8d3e6; border-radius: 8px 8px 0 0; padding: 4px 10px; background: #fff; cursor: pointer; font-size: 12px; }
.rp-tab.on { background: #dfe9fb; font-weight: 700; }
.rp-wrap { overflow: auto; max-height: calc(var(--vh100, 100vh) * 0.7); border: 1px solid #c8d3e6; border-radius: 0 8px 8px 8px; background: #fff; }
table.rp { border-collapse: collapse; table-layout: fixed; font-size: 12px; color: #1f2a44; }
table.rp td { border: 1px solid #b9c3d6; padding: 3px 6px; vertical-align: middle; white-space: pre-wrap; word-break: break-word; background: #fff; }
.rp-sort { cursor: pointer; user-select: none; }
.rp-sort:hover { filter: brightness(.94); }

/* Izveštaji: forma u jednom redu (uža) */
#rf { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; max-width: none !important; padding: 8px 12px; }
#rf > b { display: none; }
#rf .row2 { display: contents; }
#rf label, #rf .wkwrap { flex: 0 1 190px; min-width: 150px; margin: 0; font-size: 12px; }
#rf .wkbtn, #rf select { padding: 5px 8px; font-size: 13px; }
#rf .bar { flex: 0 0 auto; gap: 6px; }
#rf > p.muted { flex-basis: 100%; margin: 0; }
/* pregled izveštaja: naslovi kolona i imena ostaju vidljivi dok se lista; izbor prikaza uvek na vrhu */
.rp-wrap { max-height: calc(var(--vh100, 100vh) - 130px); }
tr.rp-hd td { position: sticky; top: 0; z-index: 3; }
table.rp td:first-child { position: sticky; left: 0; z-index: 1; }
tr.rp-hd td:first-child { z-index: 4; }
.rp-pick { position: sticky; top: 0; z-index: 5; background: var(--bg, #eef3fb); padding: 4px 0; }
/* pregled izveštaja: tabela se uklapa u širinu ekrana (bez vodoravnog skrolovanja), sitniji tekst */
table.rp { width: 100%; font-size: 11.5px; }
table.rp td { padding: 2px 4px; line-height: 1.25; }
.rp-wrap { overflow-x: auto; }
/* izbor nedelje: jedan red i podebljano */
#rf .wkwrap { flex: 0 1 270px; min-width: 250px; }
#wkBtn, .wkbtn { white-space: nowrap; font-weight: 700; width: 100%; }
table.rp { width: auto; max-width: none; }

/* naslovi kolona u pregledu izveštaja: ceo tekst se prelama u više redova i malo je manji */
table.rp td { white-space: normal !important; overflow-wrap: break-word; word-break: normal !important; }
tr.rp-hd td { font-size: 10.5px; line-height: 1.2; text-align: center; vertical-align: middle; overflow: visible; }
tr.rp-hd { height: auto !important; }
tr.rp-hd td { overflow-wrap: normal !important; word-break: keep-all !important; hyphens: none; }

table.rp td { overflow-wrap: normal !important; word-break: normal !important; hyphens: none; }

/* prekovremeni rad je istaknut */
tr.otrow td { background: rgba(255, 183, 77, .22); }
tr.otrow td:nth-child(4) { font-weight: 700; color: #b45f06; }
.cmp-entry:has([data-flex]) { background: rgba(255, 183, 77, .22); }

/* na odmoru: suncobran umesto tačke statusa */
.stleave { font-style: normal; font-size: 13px; line-height: 1; display: inline-block; width: 14px; text-align: center; vertical-align: middle; }
html.dark .stleave { filter: brightness(.943) saturate(.556) hue-rotate(180deg) invert(1); }
/* Interni poslovi: bez prioriteta taska */
.noprio .prcol, .noprio #fp { display: none !important; }

/* Pozivi: kompaktnija istorija (niži redovi, manji panel) */
.chcallspanel { max-height: calc(var(--vh100, 100vh) * 0.44); font-size: 12px; }
.chcrow { padding: 2px 2px; gap: 6px; line-height: 1.2; }
.chcrow button { padding: 1px 8px; font-size: 11.5px; line-height: 1.5; }
.chcrow small, .chcrow .muted { font-size: 10.5px; line-height: 1.15; display: block; }
/* slika / sličica profila */
.chav.chavimg { object-fit: cover; border-radius: 50%; padding: 0; }
.chav.chavemo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; }
html.dark .chav.chavimg { filter: brightness(.943) saturate(.556) hue-rotate(180deg) invert(1); }

/* gornji dugmad: isti stil ikonica (ćirilica, panel, tema, profil) */
header .themebtn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; }
header .themebtn svg { display: block; }

/* gornji dugmad (Ћир, raspored, tema, profil): ravne, minimalne ikonice bez ramova, zajedno u jednoj grupi */
header .themebtn { border: 0 !important; background: transparent !important; box-shadow: none !important; width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 8px; color: #52648a; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .12s; }
header .themebtn:hover { background: rgba(80, 110, 170, .15) !important; color: #1f3a6b; }
header #scriptBtn { width: auto; padding: 0 7px; letter-spacing: .2px; }
header #scriptBtn { margin-left: 4px; border-left: 1px solid rgba(110, 124, 150, .35) !important; border-radius: 0 8px 8px 0; }
header #logout { height: 30px; padding: 0 12px; border-radius: 8px; }
.chav.chavsvg { display: inline-block; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.chav.chavsvg svg { width: 100%; height: 100%; }
#pfGrid button:hover { border-color: #6b82b8 !important; }

/* Stil „Teams“ (proba, uključuje se dugmetom u chatu): tuđe poruke levo u sivom balončiću, moje desno u plavom */
html.chteams .chmsg:not(.rt):not(.del):not(.pinned) .chmain { background: #eceff5; border-radius: 4px 14px 14px 14px; padding: 6px 12px; display: inline-block; max-width: 78%; }
html.chteams .chmsg:not(.rt):not(.del) .chwrap { display: block; }
html.chteams .chmsg.rt .chmain { background: #dfe3ff; }
html.chteams .chmsg { padding-top: 5px; padding-bottom: 3px; }
html.chteams .chmsg:hover { background: transparent; }
html.chteams .chmsg.rt { padding-right: 18px; }
/* Teams stil: manji balončići i gušći razmaci */
html.chteams .chmsg { padding: 1px 14px 0; gap: 8px; }
html.chteams .chmsg:not(.grp) { padding-top: 6px; }
html.chteams .chmsg.hasfile { padding-bottom: 4px; }
html.chteams .chmsg .chmain, html.chteams .chmsg.rt .chmain { padding: 3px 10px !important; font-size: 13px; line-height: 1.35; border-radius: 12px !important; }
html.chteams .chmsg:not(.rt):not(.del):not(.pinned) .chmain { border-radius: 3px 12px 12px 12px !important; }
html.chteams .chmsg.rt .chmain { border-radius: 12px 12px 3px 12px !important; }
html.chteams .chmsg .chtext { margin: 0; }
html.chteams .chmsg .chtext p, html.chteams .chmsg .chmain > div { margin: 0; }
html.chteams .chmsg .chhead { margin-bottom: 1px; font-size: 12px; }
html.chteams .chmsg .chhead small { font-size: 10.5px; }
html.chteams .chmsg .chav { width: 26px !important; height: 26px !important; font-size: 10px !important; }
html.chteams .chmsg .chgut { width: 28px; }
html.chteams .chmsg .chres { margin-top: 2px; }
html.chteams .chmsg.rt { padding-right: 14px; }
html.chteams .chmsg.rt .chtools, html.chteams .chmsg.rt.hasfile .chtools { margin: 0 !important; }
/* alatke poruke (reakcije, niti, pin / izmena / brisanje) stoje uz samu poruku, a ne na desnoj ivici ekrana */
.chmsg .chwrap { position: relative; width: fit-content; max-width: 100%; min-width: 150px; }
.chmsg .chwrap .chtools, .chmsg.hasfile .chwrap .chtools { top: -17px !important; right: -6px !important; left: auto !important; bottom: auto !important; }
.chmsg .chwrap .chedit { top: -17px !important; right: 150px !important; left: auto !important; bottom: auto !important; }
.chmsg.rt .chwrap .chedit { right: auto !important; left: -6px !important; }
/* alatke poruke odmah uz poruku, sa suprotne strane: tuđe poruke (levo) → alatke desno od njih, moje (desno) → alatke levo */
.chmsg .chwrap { position: relative !important; display: flex !important; width: fit-content; max-width: calc(100% - 170px) !important; min-width: 60px; }
.chmsg .chwrap > .chtools, .chmsg.hasfile .chwrap > .chtools { position: absolute !important; display: none !important; top: -1px !important; bottom: auto !important; left: calc(100% + 6px) !important; right: auto !important; margin: 0 !important; z-index: 6; }
.chmsg:hover .chwrap > .chtools { display: flex !important; }
.chmsg.rt .chwrap > .chtools, .chmsg.rt.hasfile .chwrap > .chtools { left: auto !important; right: calc(100% + 6px) !important; }
.chmsg .chwrap > .chedit:not(.inl) { position: absolute !important; top: -26px !important; bottom: auto !important; left: auto !important; right: 0 !important; z-index: 6; }
.chmsg.rt .chwrap > .chedit:not(.inl) { right: auto !important; left: 0 !important; }.chmsg .chwrap > .chedit:not(.inl) { top: 30px !important; left: calc(100% + 6px) !important; right: auto !important; }
.chmsg.rt .chwrap > .chedit:not(.inl) { left: auto !important; right: calc(100% + 6px) !important; }
/* poruka ne sme da se lomi na pola reči: širina prati sadržaj, do ruba umanjenog za mesto za alatke */
.chmsg .chwrap { width: max-content !important; max-width: calc(100% - 170px) !important; }
html.chteams .chmsg .chmain, html.chteams .chmsg:not(.rt):not(.del):not(.pinned) .chmain, html.chteams .chmsg.rt .chmain { max-width: 100% !important; width: max-content !important; display: block !important; }
/* jedna alatka uz poruku: reakcije, niti, pin, izmena i brisanje zajedno; tuđe poruke → desno od poruke, moje → levo */
.chmsg .chbar { position: absolute; top: -1px; left: calc(100% + 6px); display: none; align-items: center; gap: 2px; background: var(--panel, #fff); border: 1px solid #c9d8f1; border-radius: 10px; padding: 1px 4px; z-index: 7; box-shadow: 0 2px 8px rgba(40, 70, 120, .12); }
.chmsg:hover .chbar { display: flex; }
.chmsg.rt .chbar { left: auto; right: calc(100% + 6px); }
.chmsg .chbar .chtools, .chmsg.hasfile .chbar .chtools, .chmsg .chwrap > .chbar > .chtools { position: static !important; display: flex !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; top: auto !important; right: auto !important; left: auto !important; }
.chmsg .chbar .chedit, .chmsg .chwrap > .chbar > .chedit:not(.inl) { position: static !important; display: flex !important; margin: 0 0 0 2px !important; padding: 0 0 0 4px !important; border: 0 !important; border-left: 1px solid #c9d8f1 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; top: auto !important; right: auto !important; left: auto !important; }
.chmsg .chwrap { max-width: calc(100% - 215px) !important; }
/* mesto za alatku uz poruku: široke poruke se lome ranije, da alatka uvek stane uz njih i ne prekriva tekst */
.chmsg .chbody { max-width: max(55%, calc(100% - 290px)) !important; }
.chmsg .chwrap { max-width: 100% !important; }
.chmsg .chbar { width: max-content; flex-wrap: nowrap; white-space: nowrap; }
.chmsg .chbar > * { flex: none; }

/* svi redovi poruka na istoj liniji (moje poruke više nisu pomerene udesno) i malo više vazduha između autora */
.chmsg:not(.chmc) { margin-left: 8px; margin-right: 8px; border-radius: 8px; }
.chmsg:not(.grp):not(.del) { padding-top: 8px; }
.chmsg { padding-bottom: 3px; }

/* alatka uz poruku se vezuje za ceo blok poruke (ime + tekst), u visini imena, da ne prekriva sledeću poruku; tekst ima vazduha ispod imena */
.chmsg .chbody { position: relative !important; width: fit-content; }
.chmsg:not(.rt) .chbody { flex: 0 1 auto !important; }
.chmsg .chwrap { position: static !important; }
.chmsg .chbar, .chmsg.rt .chbar { top: -2px; }
.chmsg .chbar { left: calc(100% + 8px); }
.chmsg.rt .chbar { left: auto; right: calc(100% + 8px); }
.chmsg .chbar .chtools button, .chmsg .chbar .chedit button { padding: 2px 6px; font-size: 14px; line-height: 1.2; }
.chmsg .chbar { padding: 0 4px; }
.chmsg .chhead { margin-bottom: 3px; }
.chmsg.grp .chwrap, .chmsg .chhead + .chwrap { margin-top: 2px; }
/* razmaci: autor, pa razmak, pa tekst, pa razmak, pa sledeći autor */
.chmsg:not(.grp):not(.del) { padding-top: 14px; }
.chmsg .chhead { margin-bottom: 5px; }
.chmsg { padding-bottom: 5px; }
.chmsg.grp { padding-top: 2px; }

/* boja poruke prati samo širinu teksta (balončić), ne ceo red; pinovane su žute, moje plavo-ljubičaste, tuđe svetlosive */
html.chteams .chmsg.chmc, html.chteams .chmsg.chmc:hover, html.chteams .chmsg.pinned, html.chteams .chmsg.chmc.pinned { background: transparent !important; }
html.chteams .chmsg::before { display: none !important; }
html.chteams .chmsg.pinned .chmain { background: #fff0c2 !important; }
html.chteams .chmsg.rt .chmain { background: color-mix(in srgb, var(--mc, #4f6bed) 22%, #fff); }
html.dark.chteams .chmsg .chmain, html.chteams.dark .chmsg .chmain { }
/* moje poruke u kanalima: levo kao i ostale, samo blago obojen balončić */
html.chteams .chmsg.chmc:not(.rt):not(.pinned):not(.del) .chmain { background: color-mix(in srgb, var(--mc, #4f6bed) 22%, #fff) !important; }

/* razgovor 1 na 1: uska kolona u sredini, da moje poruke (desno) nisu predaleko od tuđih */
.chlist.dm .chmsg, .chlist.dm .chday { width: 100% !important; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }

.chlist.dm .chmsg, .chlist.dm .chday { margin-left: 8px !important; margin-right: auto !important; }

/* moje poruke u razgovoru 1 na 1: avatar je uvek sa leve strane bloka (ime + poruka), a ceo blok ostaje desno */
.chmsg.rt { flex-direction: row !important; justify-content: flex-end; }
.chmsg.rt .chgut { text-align: left; }
.chmsg.rt .chbody { align-items: flex-start !important; }
.chmsg.rt .chhead { align-self: flex-start !important; }
.chmsg.rt .chwrap { align-items: flex-start !important; }

/* razgovor 1 na 1 prati širinu prozora: moje poruke uz desnu ivicu prozora, tuđe uz levu */
.chlist.dm .chmsg, .chlist.dm .chday { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* avatar tik uz ime i status */
.chmsg { gap: 6px !important; }
.chmsg .chgut { width: 28px !important; flex: none; }
.chmsg .chav { margin-right: 0; }

/* svi avatari su okrugli */
.chav, .chav.chavimg, .chav.chavsvg, .chav.chavemo { border-radius: 50% !important; overflow: hidden; }

/* zaglavlje uvek u dva reda (kartice, pa kontrole), bez obzira na širinu prozora; ikone nikad ne prelaze u novi red */
header { flex-wrap: wrap !important; }
header .brand { flex: none; }
header #tabs { flex: 1 1 0; min-width: 0; }
header .hctl { flex: 1 0 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
header .hctl > * { flex: none; }
header .hctl #who { display: inline !important; }
header .hctl #timerBar { margin-left: 0 !important; }

/* poruke iste osobe jedna za drugom: jedno polje (bez razmaka, ista širina, zaobljeni samo spoljni uglovi) */
.chmsg.mg .chmain { border-radius: 0 !important; }
.chmsg.mg.mgf .chmain { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
.chmsg.mg.mgl .chmain { border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; }
.chmsg.mg:not(.mgl) { padding-bottom: 0 !important; }
.chmsg.mg:not(.mgf) { padding-top: 0 !important; }
.chmsg.mg:not(.mgf) .chmain { padding-top: 1px !important; }
.chmsg.mg:not(.mgl) .chmain { padding-bottom: 1px !important; }
.chmsg.mg .chmain { margin: 0 !important; }
/* razmaci kao u Slacku: veći razmak između različitih autora, mali unutar istog bloka i ispod imena */
.chmsg:not(.grp):not(.del) { padding-top: 20px !important; }
.chmsg.grp { padding-top: 2px !important; }
.chmsg .chhead { margin-bottom: 2px !important; }
.chmsg { padding-bottom: 2px !important; }
.chmsg:not(.grp):first-child, .chday + .chmsg:not(.grp) { padding-top: 8px !important; }

/* avatari: zaobljeni kvadrat (kao u Slacku), ne krug */
.chav, .chav.chavimg, .chav.chavsvg, .chav.chavemo { border-radius: 22% !important; overflow: hidden; }

/* nežan prelaz (fade) boje odozgo nadole na levim panelima, kao u Slacku: leva traka sa modulima i spisak razgovora u chatu */
body.rail #rail { background: linear-gradient(180deg, #5c7db9 0%, #3b5b8f 45%, #2b4472 100%) !important; }
.chside { background: linear-gradient(180deg, color-mix(in srgb, var(--chs-bg, #dfe8f7) 88%, #fff) 0%, var(--chs-bg, #dfe8f7) 45%, color-mix(in srgb, var(--chs-bg, #dfe8f7) 86%, #5a6f9a) 100%) !important; }
/* status na uglu avatara */
.chavw { position: relative; display: inline-block; line-height: 0; }
.chavst { position: absolute; right: -3px; bottom: -3px; line-height: 0; background: #fff; border-radius: 50%; padding: 1.5px; }
.chavst .stdot { margin: 0 !important; width: 9px; height: 9px; display: block; }
.chavst .stleave { font-size: 11px; width: auto; }

/* spisak razgovora: status je krug u donjem uglu avatara (kao u Slacku) */
.chitem .chavw { margin-right: 2px; }
.chitem .chavst { right: -4px; bottom: -4px; padding: 1.5px; background: var(--chs-bg, #2d3550); }
.chitem .chavst .stdot { width: 8px; height: 8px; }

/* dugmići pored pretrage u chatu: boja je uvek suprotna od pozadine panela */
.chsearch .chbtn.ico, #chTheme, #chTeams { color: var(--chs-fg, #2b3a55) !important; background: transparent !important; border-color: color-mix(in srgb, var(--chs-fg, #2b3a55) 35%, transparent) !important; }
.chsearch .chbtn.ico svg { stroke: currentColor; }
.chsearch .chbtn.ico:hover { background: color-mix(in srgb, var(--chs-fg, #2b3a55) 14%, transparent) !important; }

.chsearch .chbtn.ico, #chTheme, #chTeams { color: var(--chs-ico, #2b3a55) !important; border-color: color-mix(in srgb, var(--chs-ico, #2b3a55) 40%, transparent) !important; }
.chsearch .chbtn.ico:hover { background: color-mix(in srgb, var(--chs-ico, #2b3a55) 16%, transparent) !important; }

/* zaključani (sivi) folderi i taskovi: vide se, ali se u njih ne ulazi ako nisi dodeljen */
.node.lockd { opacity: .5; filter: grayscale(.95); }
.node.lockd::after { content: '🔒'; font-size: 11px; margin-left: 4px; }
tr.task.tlock { opacity: .55; filter: grayscale(.9); cursor: not-allowed; }
tr.task.tlock button { pointer-events: none; }

/* zakazivanje taska: istaknut okvir */
.schedbox { border: 1px solid #9fb6e0; background: rgba(95, 134, 196, .08); border-radius: 10px; padding: 8px 12px 10px; margin: 8px 0; }
.schedbox > b { font-size: 14px; }

/* sastanci nemaju planirano vreme: atribut hidden mora da pobedi display polja */
.estwrap[hidden] { display: none !important; }

/* povlačenje čipova (discipline, kancelarije, namene): obeleži gde se spušta */
.chip.dropat { outline: 2px dashed #5b73b3; outline-offset: 2px; }
.chip[draggable=true] { cursor: grab; }

[data-sched][hidden] { display: none !important; }

/* datum: ikonica kalendara odmah uz polje (polje nije razvučeno preko cele širine) */
form input[type=date] { width: auto; min-width: 150px; max-width: 190px; }
/* kvačica ide levo, odmah ispred teksta */
form label.chk { display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
form label.chk input[type=checkbox] { width: auto; margin: 0; flex: none; }

#tf label.chk, #tf .schedbox label.chk { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px; text-align: left; }
#tf label.chk input[type=checkbox] { width: auto !important; margin: 0 !important; justify-self: start; flex: none; }

/* datum: ceo okvir (polje + ikonica kalendara) je uzak i uz levu ivicu, ikonica je odmah uz polje */
form .dwrap { justify-self: start; align-self: start; width: 190px; max-width: 190px; }
form .dwrap > input[type=date] { width: 100% !important; max-width: none; }

/* povlačenje foldera u stablu: obeleži gde se spušta */
#side .node.dropat { outline: 2px dashed #5b73b3; outline-offset: -2px; }
#side .node[draggable=true] { cursor: grab; }

/* stablo: unutrašnji folderi (nivo 3 i niže) imaju manje i gušće okvire */
aside .node.d3, aside .node.d4, aside .node.d5 { padding: 2px 6px; gap: 4px; border-radius: 6px; margin: 1px 0; border-left-width: 3px; line-height: 1.15; }
aside .node.d3 .cd, aside .node.d4 .cd, aside .node.d5 .cd { font-size: 9px; }
aside .node.d2 { padding: 3px 6px; margin: 2px 0; }
aside .node.d3 .nm, aside .node.d4 .nm, aside .node.d5 .nm { order: 0; flex: 1 1 0; padding-left: 0; }
aside .node.d3 .cd, aside .node.d4 .cd, aside .node.d5 .cd { flex: 0 1 auto; max-width: 48%; }

/* hijerarhija veličine: što je folder dublje, manji je okvir i slova */
aside .node.d3 { padding: 3px 6px; font-size: 12px; }
aside .node.d4 { padding: 2px 5px; font-size: 11px; }
aside .node.d5 { padding: 1px 4px; font-size: 10px; }
aside .node.d4 .cd, aside .node.d5 .cd { font-size: 8.5px; }

/* jasnija hijerarhija: disciplina je veća i podebljana, njeni folderi su uvučeni, manji i lakši, a svaki sledeći nivo još manji */
aside .kids { margin-left: 16px; }
aside .node.d2 { font-size: 13.5px; font-weight: 700; padding: 5px 7px; }
aside .node.d3 { font-size: 12px; font-weight: 500; padding: 3px 6px; background: color-mix(in srgb, var(--c) 14%, var(--panel)); }
aside .node.d4 { font-size: 11px; font-weight: 400; background: color-mix(in srgb, var(--c) 10%, var(--panel)); }
aside .node.d5 { font-size: 10px; font-weight: 400; background: color-mix(in srgb, var(--c) 7%, var(--panel)); }

/* veličina stabla: malo veće nego pre, hijerarhija ostaje (disciplina najveća, ispod sve sitnije) */
aside .node.d2 { font-size: 15.5px; padding: 7px 8px; }
aside .node.d3 { font-size: 14px; padding: 5px 7px; }
aside .node.d4 { font-size: 13px; padding: 4px 6px; }
aside .node.d5 { font-size: 12px; padding: 3px 5px; }
aside .node.d3 .cd { font-size: 11px; }
aside .node.d4 .cd { font-size: 10.5px; }
aside .node.d5 .cd { font-size: 10px; }

/* veličina po nivoima: projekat > faza > disciplina > podfolderi (i kad je folder izabran) */
aside .node.node.node.d0, aside .node.node.node.sel.d0 { font-size: 19px; }
aside .node.node.node.d1, aside .node.node.node.sel.d1 { font-size: 16.5px; }
aside .node.node.node.d2, aside .node.node.node.sel.d2 { font-size: 14.5px; }
aside .node.node.node.d3, aside .node.node.node.sel.d3 { font-size: 13px; }
aside .node.node.node.d4, aside .node.node.node.sel.d4 { font-size: 12px; }
aside .node.node.node.d5, aside .node.node.node.sel.d5 { font-size: 11px; }
aside .node.d0 { padding: 11px 8px; }
aside .node.d1 { padding: 8px 8px; }

/* uvlačenje: svaki nivo je uvučen udesno za isto, da se jasno vidi šta je u čemu */
aside .kids, aside .kids .kids, aside .kids .kids .kids, aside .kids .kids .kids .kids, aside .kids .kids .kids .kids .kids { margin-left: 14px; padding-left: 5px; }

/* šifra je iznad naziva na svim nivoima */
aside .node { flex-wrap: wrap; }
aside .node .cd { flex: 1 1 auto !important; max-width: none !important; }
aside .node .nm, aside .node.d3 .nm, aside .node.d4 .nm, aside .node.d5 .nm { order: 5; flex: 1 0 100%; padding-left: 22px; }

/* šifra i naziv ispod nje su poravnati na istu levu ivicu, na svim nivoima */
aside .node .nm, aside .node.d3 .nm, aside .node.d4 .nm, aside .node.d5 .nm { padding-left: 0 !important; }

/* niži okviri u stablu: manje praznog prostora gore i dole, slova ostaju ista */
aside .node.node.d0 { padding: 6px 8px; margin-top: 6px; }
aside .node.node.d1 { padding: 4px 8px; margin: 2px 0; }
aside .node.node.d2 { padding: 3px 7px; margin: 1px 0; }
aside .node.node.d3 { padding: 2px 6px; margin: 1px 0; }
aside .node.node.d4 { padding: 1px 5px; margin: 1px 0; }
aside .node.node.d5 { padding: 1px 4px; margin: 0; }
aside .node .cd { line-height: 1.05; padding-top: 0 !important; }
aside .node .nm { line-height: 1.12; }
aside .node.node.node.sel { padding-top: 3px; padding-bottom: 3px; }

/* atribut hidden mora da pobedi display polja (prioritet i kvačica za sastanak kod dokumentacije) */
label[hidden], .priwrap[hidden], form label.chk[hidden] { display: none !important; }

/* povlačenje taskova u listi */
tr.task[draggable=true] { cursor: grab; }
tr.task.dropat { outline: 2px dashed #5b73b3; outline-offset: -2px; }

/* oznake taska (Dokumentacija, Sastanak, Radni dan, vreme…) su uvek poravnate desno u istoj koloni, za sve taskove */
td.tcell .tline { width: 100%; }
td.tcell .tline > .ttitle { margin-right: auto; }

/* kvačica „imamo“ za dokumentaciju: u boji dok nemamo, zelena sa kvačicom kad imamo */
input.docchk { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0 8px 0 0; vertical-align: middle; border: 2px solid #e0a63a; border-radius: 7px; background: #fff3d6; cursor: pointer; position: relative; transition: background .15s, border-color .15s; }
input.docchk:hover { border-color: #c98a1a; background: #ffe9b8; }
input.docchk:checked { background: #3fae6a; border-color: #2e8f54; }
input.docchk:checked::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 17px; font-weight: 800; line-height: 20px; text-align: center; }

/* tabela foldera: sve ispod discipline (folderi i taskovi) ima malo tamniju pozadinu, da se vidi šta pripada disciplini */
.ftable tr.frow.d1 td, .ftable tr.frow.d2 td, .ftable tr.frow.d3 td { box-shadow: inset 0 0 0 999px rgba(30, 50, 90, .06); }
.ftable tr.ftask td { box-shadow: inset 0 0 0 999px rgba(30, 50, 90, .1); }

/* tabela foldera: bez sivkastog sloja; ispod discipline boja foldera je malo punija (živa), taskovi još malo punija */
.ftable tr.frow.d1 td, .ftable tr.frow.d2 td, .ftable tr.frow.d3 td, .ftable tr.ftask td { box-shadow: none !important; }
.ftable tr.frow.d1 td, .ftable tr.frow.d2 td, .ftable tr.frow.d3 td { background: color-mix(in srgb, var(--c) 24%, #ffffff) !important; }
.ftable tr.ftask td { background: color-mix(in srgb, var(--c) 32%, #ffffff) !important; }

/* tabela foldera: vodeće linije kroz stablo (osovina uvlačenja): uspravne linije po nivoima i kratka grana ka svakom redu */
.ftable td.fn { position: relative; }
.ftable td.fn::before { content: ''; position: absolute; left: 34px; top: 0; bottom: 0; width: calc(var(--d, 0) * 18px); pointer-events: none;
  background: repeating-linear-gradient(90deg, #8b97ad 0 1px, transparent 1px 18px); opacity: .55; }
.ftable td.fn::after { content: ''; position: absolute; left: calc(34px + (var(--d, 1) - 1) * 18px); top: 50%; width: 14px; border-top: 1px solid #8b97ad; opacity: .7; pointer-events: none; }
.ftable tr.frow.d0 td.fn::before, .ftable tr.frow.d0 td.fn::after { display: none; }

/* uvlačenje po nivoima 30 px; kvačica odmah uz tekst; vodeće linije prate novi razmak */
.ftable td.fn::before { left: 16px !important; width: calc(var(--d, 0) * 30px) !important; background: repeating-linear-gradient(90deg, #8b97ad 0 1px, transparent 1px 30px) !important; }
.ftable td.fn::after { left: calc(16px + (var(--d, 1) - 1) * 30px) !important; width: 18px !important; }
.ftable td.fn .fpick { margin: 0 4px 0 0; vertical-align: middle; }
.ftable td.fn .ftw { margin-right: 2px; }

/* prvi nivo ispod discipline (0_GLAVNA SVESKA, 1_PROJEKAT…) ima jaču boju pozadine */
.ftable tr.frow.d1 td { background: color-mix(in srgb, var(--c) 45%, #ffffff) !important; }

/* taskovi u tabeli foldera su bez pozadine */
.ftable tr.ftask td { background: transparent !important; box-shadow: none !important; }

/* prikaz „Struktura“: uži i kompaktniji okviri (manje praznog prostora, svaki okvir samo koliko mu treba) */
.box { padding: 4px 8px 6px !important; margin: 4px 0 !important; border-radius: 9px !important; border-width: 1.5px 1.5px 1.5px 6px !important; }
.box[data-d="1"] { border-width: 2px 2px 2px 7px !important; }
.box > .bh { font-size: calc(14px - var(--lvl) * .8px) !important; gap: 0 !important; line-height: 1.2; }
.box > .bh small { font-size: 11px; }
.box .inner { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 215px)) !important; gap: 0 6px !important; align-items: start !important; justify-content: start; }
.box .inner .box { margin: 3px 0 !important; }

/* Kanban: naziv taska nije podebljan, slova su manja, a boja blaža */
.kcard .ttitle, .kcard b.ttitle[style*="--th"], .kcard .ttitle[style*="--th"] { font-weight: 500 !important; font-size: 13px !important; line-height: 1.25; background: hsl(var(--th, 210) 55% 95%) !important; border-left: 3px solid hsl(var(--th, 210) 45% 72%) !important; padding: 2px 6px !important; }
.kcard { padding: 6px 8px; }

/* opis taska ispod naziva u listi: sklopljen na jedan red (▸), klik ga otvara ceo (▾) */
td.tcell .tdesc { font-size: 12px; font-weight: 400; color: #5d6b82; line-height: 1.3; margin-top: 2px; max-width: 560px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.tcell .tdesc::before { content: '▸ '; color: #8b97ad; }
td.tcell .tdesc.open { white-space: normal; overflow: visible; }
td.tcell .tdesc.open::before { content: '▾ '; }

/* opis: kad je otvoren, redovi (Enter) ostaju onako kako su upisani */
td.tcell .tdesc.open { white-space: pre-line !important; }

/* lista taskova: kolone su na istom mestu u svim redovima (Status, Prioritet, Izvršilac, Rok, Sati i dugmad), bez obzira na dužinu naziva */
table.tlist { table-layout: fixed; width: 100%; }
table.tlist th:nth-child(2), table.tlist td:nth-child(2) { width: 150px; }
table.tlist th:nth-child(3), table.tlist td:nth-child(3) { width: 120px; }
table.tlist th:nth-child(4), table.tlist td:nth-child(4) { width: 150px; }
table.tlist th:nth-child(5), table.tlist td:nth-child(5) { width: 70px; }
table.tlist th:nth-child(6), table.tlist td:nth-child(6) { width: 120px; }
table.tlist th:last-child, table.tlist td:last-child { width: 168px; }
#main table.tlist td.tcell { width: auto !important; white-space: normal !important; }
table.tlist td.tact { text-align: right; white-space: nowrap; }
table.tlist .docph { display: inline-block; width: 32px; }

/* kvačica „Sastanak ili celodnevni task“ u prozoru taska: cela širina, poravnata levo */
#tf > label.chk, #tf > .chk { grid-column: 1 / -1 !important; justify-self: start !important; align-self: center; }

/* bez šifre dublje od discipline: naziv ide u isti red sa strelicom */
aside .node.d3, aside .node.d4, aside .node.d5 { flex-wrap: nowrap !important; }
aside .node.d3 .nm, aside .node.d4 .nm, aside .node.d5 .nm { order: 0 !important; flex: 1 1 auto !important; }

/* redovi ispod discipline (bez šifre) su veći: čitljiviji naziv i više prostora */
aside .node.node.node.d3, aside .node.node.node.sel.d3 { font-size: 14.5px; padding: 6px 8px; margin: 2px 0; }
aside .node.node.node.d4, aside .node.node.node.sel.d4 { font-size: 14px; padding: 5px 8px; margin: 2px 0; }
aside .node.node.node.d5, aside .node.node.node.sel.d5 { font-size: 13.5px; padding: 5px 8px; margin: 2px 0; }
aside .node.node.d3 .nm, aside .node.node.d4 .nm, aside .node.node.d5 .nm { line-height: 1.25; }

/* bez dvostruke strelice (kursor „grab/move“ na redovima koji se povlače): običan kursor; strelica za otvaranje foldera je malo veća */
#side .node[draggable=true], tr.task[draggable=true], .chip[draggable=true] { cursor: pointer !important; }
aside .node .tw { font-size: 16px; width: 20px; line-height: 1; }

/* strelica za otvaranje foldera: bez klizne trake (opšte pravilo .tw je za tabele i dodavalo je dvostruku strelicu) */
aside .node .tw { overflow: visible !important; max-width: none; border-radius: 0; }

/* kolone se povlače za desnu ivicu naslova; table-layout fixed uzima širine iz naslova */
table.tlist th { position: relative; user-select: none; }
table.tlist th:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 2px; background: #c9d4e8; border-radius: 1px; }
table.tlist th:not(:last-child):hover::after { background: #5b73b3; }

/* ceo levi spisak (stablo) je za oko 8% manji */
#side { zoom: 0.92; }

/* glavni deo (desno od spiska) je celokupno za oko 8% manji */
#main { zoom: 0.92; }

/* ćelija taska sa opisom: klik bilo gde u praznom delu otvara / zatvara opis */
td.tcell:has(.tdesc) { cursor: pointer; }
td.tcell .ttitle, td.tcell a, td.tcell button { cursor: pointer; }

/* lista taskova: još malo manje (niži redovi, sitnija slova i dugmad) */
table.tlist { zoom: 0.93; }
table.tlist td { padding-top: 3px !important; padding-bottom: 3px !important; }
table.tlist td.tcell .ttitle[style*="--th"], td.tcell b.ttitle { font-size: 13px !important; }
table.tlist td.tcell .tdesc { font-size: 11.5px; margin-top: 1px; }

/* nazivi taskova u listi manje dominantni: tanji font i blaža boja slova */
td.tcell .ttitle[style*="--th"], td.tcell b.ttitle, td.tcell .ttitle { font-weight: 600 !important; color: #34445f !important; letter-spacing: 0; }

tr.task .pill.prcol { cursor: pointer; }

/* veći logo u zaglavlju */
header .brand img { height: 58px !important; max-width: 100%; width: auto; }
header { min-height: 64px !important; }

/* logo ispunjava celu visinu trake, bez praznog belog prostora ispod */
header .brand { align-self: stretch !important; display: flex !important; align-items: center; min-height: 92px; margin-top: -3px; margin-bottom: -3px; }
header .brand img { height: 86px !important; max-height: none !important; width: auto !important; max-width: 100% !important; object-fit: contain; object-position: left center; }

/* logo bez praznog belog polja ispod, malo manji */
header .brand, html.dark header .brand { align-self: flex-start !important; min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; height: auto !important; }
header .brand img { height: 72px !important; }

/* logo zauzima visinu oba reda zaglavlja (kartice + kontrole), pa se poklapa sa kontrolama desno */
header { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 3px !important; }
header .brand, html.dark header .brand { grid-column: 1; grid-row: 1 / span 2; align-self: stretch !important; display: flex !important; align-items: center; min-height: 0 !important; height: auto !important; margin: 0 !important; }
header .brand img { height: 60px !important; }
header #tabs { grid-column: 2; grid-row: 1; }
header .hctl { grid-column: 2; grid-row: 2; }
header .spacer { display: none !important; }

/* donja ivica logoa u liniji sa donjim redom kontrola */
header .brand, html.dark header .brand { align-self: end !important; align-items: flex-end !important; }
header .brand img { object-position: left bottom; }

/* Chat: ručka za širinu levog spiska razgovora */
.chat { position: relative; } .chat > #chSplit { position: absolute; top: 0; bottom: 0; left: calc(var(--chsw, 190px) - 5px); width: 10px; cursor: col-resize; z-index: 8; touch-action: none; } .chat > #chSplit::after { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: transparent; } .chat > #chSplit:hover::after, .chat > #chSplit.drag::after { background: rgba(95, 134, 196, .6); width: 3px; left: 3px; }
.chside::after { display: none !important; }

/* Statistika: naziv taska koji trenutno radi, manji */
.stt .ttitle, .stt .ttitle[style*="--th"] { font-size: 12px !important; font-weight: 600 !important; padding: 1px 7px !important; border-left-width: 3px !important; line-height: 1.3 !important; }
.stt { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; max-width: 100%; } .stt .hg { margin: 0 !important; flex: none; width: 1rem; height: 1rem; vertical-align: middle; }

/* mala slika uz ime: gore pored imena i u Statistici */
#who { display: inline-flex; align-items: center; gap: 6px; } #whoAv { display: inline-flex; } #whoAv .chav { box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.sav { display: inline-flex; vertical-align: middle; margin-right: 8px; } .sav .chav { box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.hctl #profileBtn { margin-left: -2px; }

/* gornji red: moja slika veća, status je na njoj (kao u časkanju) */
#whoDot { display: none !important; } #who { gap: 8px; } #whoAv .chav { font-size: 14px; }
#whoAv .chavw { display: inline-flex; }

/* Moje beleške (sticky notes) */
.notegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.note { background: var(--nc, #fff3a8); color: #2a2a2a; border-radius: 4px 4px 14px 4px; padding: 10px 12px 8px; box-shadow: 0 3px 8px rgba(0,0,0,.18); transform: rotate(-.6deg); } .note:nth-child(even) { transform: rotate(.7deg); }
.note textarea { width: 100%; box-sizing: border-box; background: transparent; border: 0; outline: 0; resize: vertical; min-height: 110px; font: inherit; font-size: 14px; color: #2a2a2a; }
.note .nfrom { font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 2px; }
.note .nrem { display: flex; align-items: center; gap: 4px; font-size: 12px; margin: 4px 0; } .note .nrem input { font-size: 12px; background: rgba(255,255,255,.55); border: 0; border-radius: 6px; padding: 2px 4px; color: #2a2a2a; }
.note .nbar { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.note .ncol { display: inline-flex; gap: 5px; } .note .ncol i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); cursor: pointer; } .note .ncol i.on { outline: 2px solid rgba(0,0,0,.5); outline-offset: 1px; }

/* beleške: folderi i prikaz kao lista */
.nfold { margin: 18px 0 8px; font-size: 15px; }
.notegrid.list { grid-template-columns: 1fr; gap: 8px; } .notegrid.list .note { transform: none !important; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.18); border-left: 8px solid rgba(0,0,0,.22); display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; gap: 4px 14px; align-items: center; padding: 6px 12px; }
.notegrid.list .note .nfrom { grid-column: 1 / -1; } .notegrid.list .note textarea { min-height: 40px; resize: vertical; } .notegrid.list .note .nrem, .notegrid.list .note .nbar { margin: 0; flex-direction: column; align-items: flex-start; gap: 4px; } .notegrid.list .note .nbar { grid-column: 4; }
@media (max-width: 800px) { .notegrid.list .note { grid-template-columns: 1fr; } .notegrid.list .note .nbar { grid-column: 1; flex-direction: row; } }

.note .nchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; } .note .nchips span { font-size: 11px; background: rgba(255,255,255,.55); border-radius: 8px; padding: 1px 7px; }
.note .nopt > summary { cursor: pointer; font-size: 12px; opacity: .75; list-style: none; padding: 2px 0; } .note .nopt > summary::-webkit-details-marker { display: none; } .note .nopt[open] > summary { opacity: 1; }
.notegrid.list .note .nopt { grid-column: 2 / 4; }

.nfold { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; } .nfold .nchev { font-size: 14px; opacity: .7; padding: 0 6px; } .nfold:hover { filter: brightness(.97); }

/* Rokovi projekta: timeline + ugao ekrana */
.dtl { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; } .dtr { display: grid; grid-template-columns: 22px minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid #7fb2e5; }
.dtr.soon { border-left-color: #f0a030; background: #fff7e8; } .dtr.late { border-left-color: #d9534f; background: #fdeeee; } .dtr.done { border-left-color: #6cc08b; opacity: .75; } .dtr.later { border-left-color: #7fb2e5; }
.dtdot { width: 18px; height: 18px; border-radius: 50%; background: currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; } .dtr.later .dtdot { background: #7fb2e5; } .dtr.soon .dtdot { background: #f0a030; } .dtr.late .dtdot { background: #d9534f; } .dtr.done .dtdot { background: #6cc08b; }
.dtwhen { text-align: right; line-height: 1.25; } .dtact { display: flex; gap: 4px; } .dtadd { margin-top: 8px; flex-wrap: wrap; gap: 6px; }
#dlBtn.dlalert { animation: dlpulse 1.6s ease-in-out infinite; } @keyframes dlpulse { 50% { box-shadow: 0 0 0 4px rgba(217,83,79,.25); } }
#dlPop { position: absolute; right: 60px; top: 54px; width: 360px; max-height: calc(var(--vh100, 100vh) * 0.6); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); z-index: 25; }
#dlPop .dlh { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); } #dlPop .dli { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; cursor: pointer; border-left: 5px solid #7fb2e5; border-bottom: 1px solid var(--line); } #dlPop .dli:hover { background: rgba(120,160,220,.12); } #dlPop .dli.soon { border-left-color: #f0a030; } #dlPop .dli.late { border-left-color: #d9534f; } #dlPop .dlw { text-align: right; }

.note { position: relative; } .note .nmore { position: absolute; top: 2px; right: 6px; border: 0; background: transparent; font-size: 26px; line-height: 1; font-weight: 700; color: rgba(0,0,0,.55); cursor: pointer; padding: 0 6px; border-radius: 6px; } .note .nmore:hover { background: rgba(0,0,0,.08); color: #000; }
.note .nmenu { position: absolute; top: 34px; right: 6px; z-index: 5; background: #fff; border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.28); padding: 8px 10px; min-width: 230px; } .note .nmenu[hidden] { display: none; } .note .nmenu .nrem { margin: 5px 0; } .note .nmenu select, .note .nmenu input { max-width: 190px; }
.note textarea { padding-right: 26px; }

.note textarea { resize: none !important; }
.note .nsend { position: absolute; top: 5px; right: 38px; border: 0; background: rgba(255,255,255,.6); border-radius: 8px; font-size: 12px; padding: 3px 8px; cursor: pointer; color: #2a2a2a; } .note .nsend:hover { background: rgba(255,255,255,.95); }
.note .nmore { right: 4px; } .note .nmenu { top: 36px; }
.note .ngrip { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 0 50%, rgba(0,0,0,.4) 50% 56%, transparent 56% 66%, rgba(0,0,0,.4) 66% 72%, transparent 72%); }
.note .nbar { padding-right: 18px; }

.note .ndel { position: absolute; top: 5px; right: 32px; border: 0; background: rgba(255,255,255,.6); border-radius: 8px; font-size: 14px; padding: 2px 7px; cursor: pointer; color: #d32f2f; filter: none; } .note .ndel:hover { background: #d32f2f; color: #fff; }
.note .nsend { right: 66px; }

/* beleške: uređivač sa formatiranjem, slike, širenje na sve strane */
.notegrid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .note { width: 260px; max-width: 100%; box-sizing: border-box; padding-top: 36px; }
.notegrid.list { display: grid; } .notegrid.list .note { width: auto; }
.note .ned { min-height: 110px; outline: 0; font-size: 14px; color: #2a2a2a; padding: 2px 4px 2px 0; overflow-wrap: anywhere; } .note .ned:empty::before { content: attr(data-ph); opacity: .5; }
.note .ned a { color: #1a55b0; } .note .ned ul, .note .ned ol { margin: 4px 0 4px 20px; padding: 0; } .note .ned blockquote { margin: 4px 0; padding-left: 8px; border-left: 3px solid rgba(0,0,0,.3); }
.note .nfmt { display: none; flex-wrap: wrap; align-items: center; gap: 2px; background: rgba(255,255,255,.7); border-radius: 8px; padding: 2px 4px; margin-bottom: 4px; } .note:focus-within .nfmt { display: flex; }
.note .nfmt button { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; color: #2a2a2a; } .note .nfmt button:hover { background: rgba(0,0,0,.1); } .note .nfmt .nsep { width: 1px; height: 16px; background: rgba(0,0,0,.2); margin: 0 3px; }
.note .nimgs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; } .note .nimg { position: relative; } .note .nimg img { display: block; max-width: 100%; max-height: 160px; border-radius: 6px; cursor: zoom-in; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .note .nimg .nix { position: absolute; top: 2px; right: 2px; border: 0; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 18px; height: 18px; line-height: 16px; font-size: 11px; cursor: pointer; display: none; } .note .nimg:hover .nix { display: block; }
.nlb { position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 400; display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .nlb img { max-width: 94vw; max-height: calc(var(--vh100, 100vh) * 0.92); border-radius: 6px; }

/* slike u tekstu beleške (kao u časkanju) */
.note .ned .chinblk { position: relative; display: block; width: fit-content; max-width: 100%; margin: 6px 0; } .note .ned .chinblk img { display: block; max-width: 100%; max-height: 220px; border-radius: 6px; cursor: zoom-in; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.note .ned .chinblk .nix { position: absolute; top: 3px; right: 3px; border: 0; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 18px; font-size: 11px; cursor: pointer; display: none; } .note .ned .chinblk:hover .nix { display: block; }

/* naslov beleške gore levo, u istom redu sa dugmadima */
.note .ntitle { position: absolute; top: 6px; left: 12px; right: 100px; width: auto; box-sizing: border-box; border: 0; border-bottom: 1px dashed rgba(0,0,0,.25); background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: #2a2a2a; outline: 0; padding: 2px 2px; } .note .ntitle:focus { border-bottom-color: rgba(0,0,0,.6); } .note .ntitle::placeholder { font-weight: 400; opacity: .45; }
.note .nsend { right: 64px; padding: 3px 7px; }

/* lista: boje gore desno, uz dugmad */
.notegrid.list .note .nbar { position: absolute; top: 9px; right: 104px; margin: 0; padding: 0; grid-column: auto; flex-direction: row; } .notegrid.list .note .ntitle { right: 250px; }
.notegrid.list .note { display: block; }

.notegrid.list .note { padding: 36px 14px 10px 14px !important; } .notegrid.list .note .ned { min-height: 44px; }
.notegrid.list .note .nbar { top: 8px; }

/* formatiranje je uvek vidljivo, gore levo */
.note .nfmt { display: flex !important; }

/* beleška: gore levo formatiranje, desno boje i dugmad; ispod naslov pa tekst */
.note, .notegrid.list .note { padding: 8px 12px 14px 12px !important; }
.note .ntop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.note .ntop .nfmt { margin: 0; flex: 0 1 auto; }
.note .nctl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.note .nctl .nsend, .note .nctl .ndel, .note .nctl .nmore { position: static; top: auto; right: auto; }
.note .nctl .ncol { margin-right: 4px; }
.note .ntitle { position: static; display: block; width: 100%; right: auto; top: auto; left: auto; margin: 0 0 4px; }
.note .nmenu { top: 44px; }

.note { width: 430px; } .notegrid.list .note { width: auto; }
.note .nfmt button { padding: 2px 5px; } .note .nfmt .nsep { margin: 0 1px; }

/* najmanja velicina beleške: da formatiranje i dugmad stanu u jedan red */
.note { width: 520px; min-width: 520px; } .notegrid.list .note { width: auto; min-width: 0; }
@media (max-width: 640px) { .note { min-width: 0; width: 100%; } }

/* gornji red beleške se nikad ne lomi u dva reda */
.note .ntop { flex-wrap: nowrap; } .note .ntop .nfmt { flex-wrap: nowrap; white-space: nowrap; } .note .nctl { flex: none; white-space: nowrap; } .note .nfmt button, .note .nctl button { flex: none; }
@media (max-width: 640px) { .note .ntop { overflow-x: auto; } }

/* beleške su ravne, bez nagiba */
.note, .note:nth-child(even), .notegrid .note { transform: none !important; }

/* teme i pozadine beleški */
.nthbtn { border: 0; background: rgba(255,255,255,.6); border-radius: 8px; padding: 2px 7px; cursor: pointer; font-size: 14px; } .nthbtn:hover { background: rgba(255,255,255,.95); }
.ncpick { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0,0,0,.3); background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); cursor: pointer; } .ncpick input { opacity: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; border: 0; }
.nthgrid { display: grid; grid-template-columns: repeat(2, 120px); gap: 8px; padding: 8px; } .nthm { height: 62px; border-radius: 8px; border: 1px solid rgba(0,0,0,.2); cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-start; padding: 4px 6px; font-size: 12px; font-weight: 700; color: #1f2a44; text-align: left; } .nthm span { background: rgba(255,255,255,.75); border-radius: 5px; padding: 0 5px; } .nthm:hover { outline: 2px solid #5f86c4; }
.nt-lines { background: repeating-linear-gradient(#fffdf2 0 27px, #cfe0f5 27px 28px) !important; }
.nt-grid { background: linear-gradient(#cfe0f5 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, #cfe0f5 1px, transparent 1px) 0 0 / 22px 22px, #fffefa !important; }
.nt-dots { background: radial-gradient(#b9c7de 1.4px, transparent 1.6px) 0 0 / 18px 18px, #fffefa !important; }
.nt-sunset { background: linear-gradient(165deg, #ffe3b8 0%, #ffc3c9 50%, #d9c9ff 100%) !important; }
.nt-lavender { background: linear-gradient(160deg, #f3ecff 0%, #dccaff 100%) !important; }
.nt-sea { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q50 15 100 40 T200 40 T300 40 T400 40 V80 H0Z' fill='%2388c8ea' fill-opacity='.55'/%3E%3Cpath d='M0 55 Q50 35 100 55 T200 55 T300 55 T400 55 V80 H0Z' fill='%236fb4de' fill-opacity='.6'/%3E%3C/svg%3E") bottom / 100% 70px no-repeat, linear-gradient(#e2f5ff, #bfe5f7) !important; }
.nt-forest { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L0 55 L25 20 L50 55 L50 90Z M40 90 L40 62 L70 14 L100 62 L100 90Z M90 90 L90 52 L120 22 L150 52 L150 90Z M140 90 L140 64 L172 18 L204 64 L204 90Z M195 90 L195 55 L225 24 L255 55 L255 90Z M245 90 L245 62 L278 16 L311 62 L311 90Z M300 90 L300 52 L330 22 L360 52 L360 90Z M350 90 L350 60 L378 26 L400 60 L400 90Z' fill='%2374b88a' fill-opacity='.65'/%3E%3C/svg%3E") bottom / 100% 80px no-repeat, linear-gradient(#eaf7e4, #cdeac4) !important; }
.nt-mountains { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L0 70 L70 20 L130 62 L190 10 L260 70 L320 30 L400 75 L400 100Z' fill='%238da4c8' fill-opacity='.6'/%3E%3Cpath d='M0 100 L0 85 L90 48 L160 85 L240 40 L320 88 L400 60 L400 100Z' fill='%236882ad' fill-opacity='.65'/%3E%3C/svg%3E") bottom / 100% 90px no-repeat, linear-gradient(#fdf2e0, #cfe4f7) !important; }
.nt-clouds { background: radial-gradient(ellipse 60px 22px at 22% 18%, #fff 0 96%, transparent), radial-gradient(ellipse 80px 26px at 70% 30%, #fff 0 96%, transparent), radial-gradient(ellipse 54px 18px at 40% 78%, #ffffffcc 0 96%, transparent), linear-gradient(#b7dcf7, #e6f3fd) !important; }
.nt-board { background: linear-gradient(#2f4a3f, #263d34) !important; color: #f2f5f0 !important; } .nt-board .ned, .nt-board .ntitle, .nt-board .ned a { color: #f2f5f0 !important; } .nt-board .ntitle { border-bottom-color: rgba(255,255,255,.35); } .nt-board .ntitle::placeholder, .nt-board .ned:empty::before { color: #f2f5f0; }

.nthpop { padding: 8px 10px; } .nthpop .nthh { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; opacity: .6; margin: 4px 2px; } .nthpop .ncolrow { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 2px 8px; align-items: center; max-width: 250px; } .nthpop .ncolrow i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); cursor: pointer; } .nthpop .ncolrow i.on { outline: 2px solid rgba(0,0,0,.55); outline-offset: 1px; } .nthpop .ncpick { width: 22px; height: 22px; } .nthpop .nthgrid { padding: 0; }
.note, .notegrid.list .note { min-width: 480px; } .note { width: 480px; } .notegrid.list .note { width: auto; min-width: 0; }
@media (max-width: 640px) { .note { min-width: 0; width: 100%; } }

/* beleške u pravilnoj mreži: iste veličine, poravnate u redove i kolone (bez kaskade) */
.notegrid:not(.list) { display: grid; grid-template-columns: repeat(auto-fill, var(--nw, 480px)); justify-content: start; align-items: stretch; gap: 16px; }
.notegrid:not(.list) .note { width: auto !important; min-width: 0; display: flex; flex-direction: column; } .notegrid:not(.list) .note .ned { flex: 1 1 auto; }
@media (max-width: 640px) { .notegrid:not(.list) { grid-template-columns: 1fr; } }

/* pregled rokova: lista, timeline, kalendar */
.dlchip { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, var(--c, #7fb2e5) 35%, #fff); border: 1px solid color-mix(in srgb, var(--c, #7fb2e5) 70%, #fff); color: #1f2a44; margin-left: 6px; }
.dlmon { margin: 14px 0 4px; font-size: 14px; opacity: .75; } #dlPop .dlall { padding: 10px 14px; font-weight: 700; color: #3b6db3; cursor: pointer; text-align: center; } #dlPop .dlall:hover { background: rgba(120,160,220,.12); }
.tlwrap { display: flex; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; } .tlnames { flex: none; width: 170px; padding-top: 28px; border-right: 1px solid var(--line); background: rgba(120,160,220,.06); } .tlname { height: 64px; padding: 8px 10px; font-weight: 700; font-size: 13px; overflow: hidden; display: flex; align-items: center; cursor: pointer; } .tlname:hover { text-decoration: underline; }
.tlscroll { flex: 1; overflow-x: auto; } .tlarea { position: relative; } .tlmon { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); } .tlmon span { position: absolute; top: 4px; left: 4px; font-size: 11px; font-weight: 700; opacity: .65; white-space: nowrap; }
.tlrow { position: absolute; left: 0; right: 0; height: 64px; border-top: 1px solid var(--line); } .tltoday { position: absolute; top: 0; bottom: 0; border-left: 2px solid #d9534f; z-index: 2; } .tltoday span { position: absolute; top: 4px; left: 4px; font-size: 11px; color: #d9534f; font-weight: 800; }
.tlmk { position: absolute; z-index: 3; cursor: pointer; transform: translateX(-7px); } .tlmk i { display: block; width: 14px; height: 14px; transform: rotate(45deg); background: #7fb2e5; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); margin: 2px 0 6px; } .tlmk span { font-size: 11px; line-height: 1.2; white-space: nowrap; background: rgba(255,255,255,.85); border-radius: 4px; padding: 0 4px; display: block; }
.tlmk.soon i { background: #f0a030; } .tlmk.late i { background: #d9534f; } .tlmk.done i { background: #6cc08b; } .tlmk.done span { opacity: .6; }
.dcnav { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .dcg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .dch { text-align: center; font-size: 12px; font-weight: 800; opacity: .6; padding: 2px; }
.dcc { min-height: 92px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 5px; font-size: 12px; } .dcc.off { background: transparent; border-color: transparent; } .dcc.today { outline: 2px solid #d9534f; } .dcc > b { opacity: .6; }
.dce { margin-top: 3px; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--c, #7fb2e5) 40%, #fff); border-left: 4px solid var(--c, #7fb2e5); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dce.late { outline: 1px solid #d9534f; } .dce.done { opacity: .55; text-decoration: line-through; }

/* alarm */
.nalarm { position: fixed; inset: 0; z-index: 500; background: rgba(15,25,45,.55); display: flex; align-items: center; justify-content: center; } .nabox { background: #fff7d6; color: #2a2a2a; border-radius: 16px; padding: 22px 30px; min-width: 300px; max-width: 460px; text-align: center; box-shadow: 0 14px 50px rgba(0,0,0,.45); animation: naring 0.7s ease-in-out infinite alternate; } .nabox h3 { margin: 6px 0; font-size: 20px; } .nabell { font-size: 44px; animation: nashake .5s ease-in-out infinite; } .natxt { margin: 6px 0; font-size: 14px; } .naact { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
@keyframes nashake { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } } @keyframes naring { to { box-shadow: 0 14px 50px rgba(0,0,0,.45), 0 0 0 8px rgba(240,160,48,.35); } }
.nqa { display: flex; flex-wrap: wrap; gap: 6px; }

.chsw button[data-sw="#ffffff"] { box-shadow: inset 0 0 0 1px #b9c2d3; }

/* timeline: danas ispod meseca, bez preklapanja */
.tltoday span { top: auto; bottom: 4px; background: #d9534f; color: #fff; padding: 0 5px; border-radius: 4px; } .tlname { height: auto; } .tlmk span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

/* rokovi u grupnom kalendaru + kalendarski prikaz sa odsutnima */
.dlcc { display: block; margin-top: 3px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--c, #7fb2e5) 40%, #fff); border-left: 4px solid var(--c, #7fb2e5); color: #1f2a44; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dlcc.soon { outline: 1px solid #f0a030; } .dlcc.late { outline: 1px solid #d9534f; } .dlcc.done { opacity: .55; text-decoration: line-through; } .dlcc.dlmini { display: inline-block; margin: 0; padding: 0 5px; text-align: center; }
.dlrow td { background: rgba(120,160,220,.08); } .dlcol { min-width: 150px; max-width: 220px; vertical-align: top; text-align: left; } .dlh { background: rgba(120,160,220,.15) !important; }
.gridcal .gcell { min-height: 100px; } .gridcal .gcell.we { background: rgba(0,0,0,.03); } .gridcal .dga { margin-top: 3px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--c, #bbb) 45%, #fff); color: #1f2a44; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gridcal .dga.pend { opacity: .6; border: 1px dashed rgba(0,0,0,.35); }

/* kalendar: sivi vikendi, uredno zaglavlje */
.dcc.we { background: #e4e7ee !important; } .dcc.we.off { background: transparent !important; } .dcc.we > b { opacity: .75; }
.dch { background: #dde5f3; color: #1f2a44; opacity: 1; border-radius: 8px; padding: 7px 4px; font-size: 13px; letter-spacing: .3px; } .dch.we { background: #cfd5e1; color: #4a5568; }
.dcbar { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; } .dcbar b { font-size: 18px; min-width: 190px; text-align: center; }
.gridcal .gcell.we { background: #e4e7ee; }
html.dark .dcc.we, html.dark .gridcal .gcell.we { background: #2b3342 !important; } html.dark .dch { background: #2b3550; color: #dfe6f5; } html.dark .dch.we { background: #262d3b; color: #aab4c8; } html.dark .dcbar { background: #1f2635; }

.dcbar b { font-size: 22px; font-weight: 800; min-width: 220px; } .dcbar .sm { font-size: 15px; padding: 4px 12px; }

/* vikend je uži: tad se ne radi */
.dcg { grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .42fr)) !important; } .dcc.we { min-height: 70px; } .dcc.we > b { font-size: 11px; } .dcc.we .dce, .dcc.we .dcc, .gridcal .gcell.we .dga, .gridcal .gcell.we .dlcc { font-size: 10px; padding: 0 3px; }

/* datumi i rokovi se ističu */
.dcc > b { font-size: 16px; font-weight: 800; opacity: 1; color: #1f2a44; } .dcc.we > b { font-size: 12px; color: #6b7589; } .dcc.today > b { color: #d9534f; }
.dcc:has(.dce), .dcc:has(.dlcc) { background: #fff8e8; border-color: #f0b44c; box-shadow: inset 0 0 0 1px #f0b44c; }
.dce { font-size: 13px; font-weight: 800; padding: 4px 8px; margin-top: 5px; background: color-mix(in srgb, var(--c, #7fb2e5) 70%, #fff); border-left-width: 6px; color: #14203a; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.dlcc { font-size: 12px; font-weight: 800; padding: 3px 7px; background: color-mix(in srgb, var(--c, #7fb2e5) 65%, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.gridcal .gcell > b { font-size: 16px; }
html.dark .dcc > b { color: #e7edf9; } html.dark .dcc:has(.dce), html.dark .dcc:has(.dlcc) { background: #3a3220; }

.gridcal .gcell { position: relative; } .gridcal .gcell .dgn { float: right; font-size: 11px; font-weight: 800; color: #3b6db3; background: #e3edfb; border-radius: 8px; padding: 0 6px; }

/* državni praznik / neradni dan / kolektivni odmor: cela kućica obojena */
.gridcal .gcell.hol { background: color-mix(in srgb, var(--rc, #e8a0a0) 45%, #fff) !important; box-shadow: inset 0 0 0 2px var(--rc, #e8a0a0); } .gridcal .gcell.hol > b { color: #7a1f1f; } .gridcal .gcell.hol .dga[style*="--c"]:first-of-type { font-weight: 800; }
html.dark .gridcal .gcell.hol { background: color-mix(in srgb, var(--rc, #e8a0a0) 35%, #1f2635) !important; }

.dce .dcp { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; opacity: .8; line-height: 1.2; } .dce { white-space: normal; }

/* Pregled firme: tabele bez unutrašnjeg skrola */
.tw:has(> table.ovt) { overflow: visible !important; width: auto; max-width: none; }
.tw:has(> table.ovt) > table.ovt { max-width: 100%; }

/* gornji meni izgleda isto kao levi (rail): obojena traka, ikonice sa sitnim nazivom, aktivna kartica bela */
body:not(.rail) #tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; padding: 5px 10px; border-radius: 14px; background: linear-gradient(90deg, #5c7db9 0%, #3b5b8f 55%, #2b4472 100%); flex: 1 1 auto; }
body:not(.rail) #tabs button[data-g] { position: relative; min-width: 68px; background: transparent !important; color: #dce6f8 !important; border: 0; border-radius: 12px; padding: 6px 10px 5px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; box-shadow: none; filter: none; }
body:not(.rail) #tabs button[data-g] svg { width: 22px; height: 22px; }
body:not(.rail) #tabs button[data-g]:hover { background: rgba(255,255,255,.16) !important; filter: none; }
body:not(.rail) #tabs button[data-g].on { background: #fff !important; color: #2d4a7a !important; }
body:not(.rail) #tabs .chtabn { position: absolute; top: 1px; right: 8px; margin: 0; }

/* gornji meni: cela traka preko celog ekrana, tanja */
body:not(.rail) header { padding-top: 0; row-gap: 2px; }
body:not(.rail) #tabs { order: -1; flex: 1 1 100%; margin: 0 -16px; padding: 2px 16px; border-radius: 0; gap: 2px; }
body:not(.rail) #tabs button[data-g] { min-width: 62px; padding: 3px 10px 2px; gap: 1px; font-size: 10px; border-radius: 10px; }
body:not(.rail) #tabs button[data-g] svg { width: 18px; height: 18px; }

/* traka kartica preko celog ekrana iznad logoa i kontrola */
body:not(.rail) header #tabs { grid-column: 1 / -1; grid-row: 1; margin: 0 -16px; }
body:not(.rail) header .brand, body:not(.rail) header .brand img { grid-row: 2; }
body:not(.rail) header .brand { grid-column: 1; }
body:not(.rail) header .hctl { grid-column: 2; grid-row: 2; }

/* veći logo ispod trake kartica */
body:not(.rail) header .brand img { height: 84px !important; } body:not(.rail) header .brand { align-self: center !important; align-items: center !important; }

/* kartice raspoređene po sredini cele trake, ikonice malo veće */
body:not(.rail) #tabs { justify-content: space-evenly; padding-top: 3px; padding-bottom: 3px; }
body:not(.rail) #tabs button[data-g] { min-width: 70px; padding: 4px 12px 3px; font-size: 11px; } body:not(.rail) #tabs button[data-g] svg { width: 23px; height: 23px; }

/* kartice skupljene u sredinu trake, sa malim razmacima */
body:not(.rail) #tabs { justify-content: center; gap: 4px; } body:not(.rail) #tabs button[data-g] { min-width: 0; padding: 4px 11px 3px; }

/* sve u jednoj liniji: logo | kartice (levo) | kontrole (desno), cela traka obojena */
body:not(.rail) header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; column-gap: 0 !important; row-gap: 0 !important; padding: 0 !important; min-height: 0 !important; align-items: stretch !important; background: linear-gradient(90deg, #5c7db9 0%, #3b5b8f 55%, #2b4472 100%) !important; border-bottom: 0 !important; }
body:not(.rail) header .brand { grid-column: 1 !important; grid-row: 1 !important; background: #fff; padding: 2px 16px !important; align-self: stretch !important; align-items: center !important; }
body:not(.rail) header .brand img { height: 60px !important; grid-row: auto; }
body:not(.rail) header #tabs { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; padding: 2px 8px !important; border-radius: 0 !important; background: none !important; justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; align-self: center; }
body:not(.rail) header #tabs::-webkit-scrollbar { display: none; }
body:not(.rail) header .hctl { grid-column: 3 !important; grid-row: 1 !important; flex: none !important; width: auto !important; padding: 0 12px 0 6px; color: #fff; overflow: visible !important; justify-content: flex-end; align-self: center; }
body:not(.rail) header .hctl #who, body:not(.rail) header .hctl #who * { color: #eef3fc; }
body:not(.rail) #notifs, body:not(.rail) #dlPop { top: 76px; }

body:not(.rail) header #tabs button[data-g] { flex: none; min-width: 0; padding: 3px 8px 2px; }
body:not(.rail) header #tabs { gap: 2px !important; }

/* kontrole u traci: svetle ikonice i tekst na tamnoj traci, bez belih okvira */
body:not(.rail) header .hctl button, body:not(.rail) header .hctl .themebtn, body:not(.rail) header #logout, body:not(.rail) header #undoMore, body:not(.rail) header #undoBtn { background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.38) !important; box-shadow: none !important; }
body:not(.rail) header .hctl button:hover { background: rgba(255,255,255,.26) !important; }
body:not(.rail) header .hctl button svg { stroke: currentColor; }
body:not(.rail) header .hctl #bellN, body:not(.rail) header .hctl #dlN { color: #fff; }
body:not(.rail) header .hctl { gap: 6px; }
body:not(.rail) header #tabs button[data-g] { padding: 3px 6px 2px; } body:not(.rail) header #tabs button[data-g] svg { width: 22px; height: 22px; }

/* manji avatar i ime da se sve kartice vide */
body:not(.rail) header #who { font-size: 12px; gap: 5px; white-space: nowrap; }
body:not(.rail) header #whoAv .chav, body:not(.rail) header #whoAv .chavimg, body:not(.rail) header #whoAv img { width: 24px !important; height: 24px !important; font-size: 10px !important; }
body:not(.rail) header .hctl { gap: 4px; padding-right: 8px; }
body:not(.rail) header .hctl button, body:not(.rail) header #logout { padding: 3px 8px !important; font-size: 12px; }
body:not(.rail) header #timerBar { font-size: 12px; }
body:not(.rail) header #timerBar > * { padding-left: 8px; padding-right: 8px; }

.dtr .dtact { margin-left: 8px; }

.dlmv { display: inline-block; font-size: 11px; font-weight: 700; color: #9a4b0a; background: #fbe3cf; border-radius: 8px; padding: 0 7px; margin-left: 6px; }

/* zvonce i kalendar rokova su važni: veći */
body:not(.rail) header #dlBtn, body:not(.rail) header #bell { font-size: 24px !important; line-height: 1; padding: 4px 12px !important; min-width: 50px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; } body:not(.rail) header #dlBtn b, body:not(.rail) header #bell b { font-size: 11px; }

body:not(.rail) header #dlBtn, body:not(.rail) header #bell { font-size: 19px !important; padding: 3px 9px !important; min-width: 40px; height: 34px; }

/* mali prozor (compact) nema gornju traku: novo zaglavlje ga ne sme prikazati */
body.compact:not(.rail) header, body.compact:not(.rail) header #tabs, body.compact:not(.rail) header .hctl { display: none !important; }

/* mali prozor: gornje polje sa ikonicama je plava linija kao i tajmer ispod */
body.compact .cmp-head, html.dark body.compact .cmp-head { background: linear-gradient(90deg, #5c7db9 0%, #3b5b8f 55%, #2b4472 100%) !important; border-bottom: 0; color: #fff; }
body.compact .cmp-head button { background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.38) !important; box-shadow: none !important; } body.compact .cmp-head button:hover { background: rgba(255,255,255,.26) !important; } body.compact .cmp-head svg { stroke: currentColor; }

/* kad se prozor smanji, kontrole se lome u novi red umesto da idu iza loga: ceo tekst je uvek vidljiv */
header { min-width: 0; } header .hctl { flex-wrap: wrap !important; overflow: visible !important; row-gap: 4px; min-width: 0; justify-content: flex-end; }
header .hctl #who { white-space: nowrap; }
@media (max-width: 1500px) { body:not(.rail) header .hctl { grid-column: 1 / -1 !important; grid-row: 2 !important; padding: 5px 12px; background: rgba(43,68,114,.0); } body:not(.rail) header { background: linear-gradient(90deg, #5c7db9 0%, #3b5b8f 55%, #2b4472 100%) !important; } }
@media (max-width: 1500px) { body.rail header { grid-template-columns: auto minmax(0, 1fr) !important; } body.rail header .hctl { grid-column: 1 / -1 !important; grid-row: 2 !important; } }

/* levi raspored: kontrole ostaju desno od loga (ne ispod njega), a na užem prozoru se sve smanjuje i lomi u red */
@media (max-width: 1500px) { body.rail header .hctl { grid-column: 2 !important; grid-row: 2 !important; } }
@media (max-width: 1400px) { header .hctl { gap: 3px !important; } header .hctl button, header #logout { padding: 2px 7px !important; font-size: 12px !important; } header #who { font-size: 12px !important; } header #timerBar { font-size: 12px; } header #timerBar > * { padding-left: 7px; padding-right: 7px; } }
@media (max-width: 1150px) { header .hctl button, header #logout { padding: 2px 5px !important; font-size: 11px !important; } header #who { font-size: 11px !important; } header #timerBar { font-size: 11px; } header #whoAv .chav, header #whoAv img { width: 20px !important; height: 20px !important; } header .brand img { height: 48px !important; } }

/* cela gornja traka kontrola je malo manja da uvek ima mesta */
header .hctl { gap: 4px !important; } header .hctl button, header #logout { padding: 3px 8px !important; font-size: 12px !important; } header #who { font-size: 12px !important; } header #whoAv .chav, header #whoAv img { width: 26px !important; height: 26px !important; } header #timerBar { font-size: 12px; } header #timerBar > * { padding-left: 8px; padding-right: 8px; }
header #dlBtn, header #bell { font-size: 17px !important; min-width: 36px !important; height: 32px !important; padding: 2px 7px !important; } header #profileBtn, header #layoutBtn, header #themeBtn, header #scriptBtn { padding: 3px 7px !important; }

/* ime pored slike je u liniji sa ostalim dugmićima */
header .hctl #who { display: inline-flex !important; align-items: center !important; gap: 6px; line-height: 1; } header .hctl #who #whoAv { display: inline-flex; align-items: center; }

header #whoAv .chav, header #whoAv img { width: 22px !important; height: 22px !important; } header #whoAv .chavst { right: -2px; bottom: -2px; padding: 1px; } header #whoAv .chavst .stdot { width: 7px; height: 7px; } header .hctl { align-items: center !important; }

/* kontrole su uvek u jednoj liniji; umesto lomljenja srazmerno se smanjuju (zoom računa skripta) */
header .hctl { flex-wrap: nowrap !important; } header .hctl > * { flex: none; }
@media (max-width: 1500px) { body:not(.rail) header .hctl { grid-column: 3 !important; grid-row: 1 !important; padding: 0 12px 0 6px; } }

/* sadržaj uvek popunjava celu visinu prozora (i posle smanjivanja prozora): jedan red mreže, bez praznog prostora ispod */
.body { grid-template-rows: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 0px); } .body > main, .body > aside { min-height: 0; }
main.chatmain .chat { height: 100%; min-height: 0; }

/* kalkulator */
#calcPop { position: fixed; right: 18px; top: 84px; width: 244px; z-index: 450; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(20,30,60,.35); outline: 0; user-select: none; overflow: hidden; color: #1f2a44; }
#calcPop .chead { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: linear-gradient(90deg, #5c7db9, #3b5b8f); color: #fff; cursor: move; } #calcPop .cx { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 14px; }
#calcPop .cscreen { padding: 8px 12px 6px; text-align: right; background: #f4f7fc; min-height: 62px; } #calcPop .cexp { font-size: 18px; word-break: break-all; opacity: .8; } #calcPop .cres { font-size: 28px; font-weight: 800; min-height: 36px; cursor: copy; }
#calcPop .ckeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; } #calcPop .ckeys button { height: 42px; font-size: 18px; border: 0; border-radius: 10px; background: #eef2f9; color: #1f2a44; cursor: pointer; } #calcPop .ckeys button:hover { background: #dfe7f5; }
#calcPop .ckeys .op { background: #dbe7fb; color: #2d4a7a; font-weight: 800; } #calcPop .ckeys .fn { background: #fde4e4; color: #b03030; } #calcPop .ckeys .eq { grid-column: 1 / -1; background: #3b5b8f; color: #fff; font-weight: 800; } #calcPop .ckeys .eq:hover { background: #2b4472; }

#calcPop .chead span { display: inline-flex; gap: 4px; } #calcPop .chb { background: transparent; border: 0; cursor: pointer; font-size: 14px; } #calcPop .cmem { font-size: 11px; opacity: .6; min-height: 14px; text-align: left; }
#calcPop .ckeys .mem { height: 30px; font-size: 13px; background: #e9eef7; color: #3b5b8f; font-weight: 700; } #calcPop .ckeys .fn2 { background: #e3ecfa; color: #2d4a7a; font-size: 16px; }
#calcPop .chist { max-height: 150px; overflow-y: auto; border-top: 1px solid var(--line); background: #fafcff; } #calcPop .ch { display: flex; justify-content: space-between; gap: 10px; padding: 5px 12px; cursor: pointer; font-size: 12px; } #calcPop .ch:hover { background: #e8f0fc; } #calcPop .ch span { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #calcPop .chclr { width: 100%; border: 0; background: transparent; color: #b03030; padding: 6px; cursor: pointer; font-size: 12px; }
#calcPop .ckeys .eq { grid-column: auto; }

/* kalkulator: nenametljivo dugme dole levo (na levoj traci / u uglu ekrana) */
#calcBtn { position: fixed; left: 24px; bottom: 12px; z-index: 60; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; opacity: .55; transition: opacity .15s; display: flex; align-items: center; justify-content: center; } #calcBtn:hover { opacity: 1; background: rgba(255,255,255,.3); }
body:not(.rail) #calcBtn { left: 12px; background: rgba(60,90,140,.18); border-color: rgba(60,90,140,.35); color: #2d4a7a; }
body.compact #calcBtn { display: none; }
#calcPop { right: auto; left: 96px; top: auto; bottom: 56px; } body:not(.rail) #calcPop { left: 24px; }

/* ikonica kalkulatora: vidljiva, ali neutralna (ne crvena) */
#calcBtn { width: 34px; height: 34px; opacity: .9; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.6); color: #fff; } #calcBtn:hover { background: rgba(255,255,255,.38); }
body:not(.rail) #calcBtn { background: #eef2f9; border-color: #c4d0e6; color: #3b5b8f; } body:not(.rail) #calcBtn:hover { background: #dfe8f6; }
#calcPop .ckeys .eq { grid-column: 1 / -1; background: #3b5b8f; color: #fff; font-weight: 800; } #calcPop .ckeys .eq:hover { background: #2b4472; }

#calcBtn { bottom: 40px; } #calcPop { bottom: 82px; }

/* alatić: kartice i polja */
#calcPop { width: 300px; } #calcPop .ctabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px 8px 0; background: #f4f7fc; } #calcPop .ctab { border: 0; background: #e3ebf8; color: #3b5b8f; border-radius: 8px 8px 0 0; padding: 4px 9px; font-size: 12px; font-weight: 700; cursor: pointer; } #calcPop .ctab.on { background: #fff; color: #1f2a44; box-shadow: 0 -2px 0 #3b5b8f inset; }
#calcPop .cpane { padding: 10px 12px 12px; max-height: 420px; overflow-y: auto; } #calcPop .tl { display: grid; gap: 8px; } #calcPop .tl label { display: grid; gap: 3px; font-size: 12px; opacity: .85; } #calcPop .tl input, #calcPop .tl select, #calcPop .tl textarea { width: 100%; box-sizing: border-box; border: 1px solid #cfd8e8; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; background: #fff; color: #1f2a44; }
#calcPop .trow { display: flex; gap: 6px; align-items: end; } #calcPop .trow > * { flex: 1; min-width: 0; } #calcPop .trow > span { flex: none; font-size: 12px; opacity: .7; padding-bottom: 8px; } #calcPop .th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; opacity: .55; margin-top: 4px; }
#calcPop .tr > div { display: flex; justify-content: space-between; padding: 3px 4px; font-size: 13px; } #calcPop .tr .big { background: #eaf1fc; border-radius: 8px; padding: 6px 8px; font-size: 15px; } #calcPop .tr b { font-size: inherit; } #calcPop .tnote { font-size: 11px; opacity: .6; }

#calcPop .fxswap { flex: none; width: 34px; height: 32px; border: 0; border-radius: 8px; background: #dbe7fb; color: #2d4a7a; font-size: 16px; cursor: pointer; margin-bottom: 0; } #calcPop .fxswap:hover { background: #c7d9f6; }

#calcPop { width: 336px; } #calcPop .ctab { padding: 4px 8px; }

/* misao dana: tihi red na Moji taskovi */
.dayq { margin: 2px 14px 10px; font-size: 13px; color: #5a6b86; font-style: italic; border-left: 3px solid #b8c8e6; padding: 2px 10px; } .dayq b { font-style: normal; font-weight: 600; opacity: .8; white-space: nowrap; }

#chSide { overflow-x: hidden; } .chcalls { overflow: visible; }
.chcallspanel { box-sizing: border-box; }

/* dolazni poziv: prozor na sredini ekrana iznad svega (kao poziv na telefonu); traka gore se ne prikazuje dok zvoni */
.callring { display: flex !important; position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; } .calltop.ring { display: none !important; }
.callringcard .callb.big { min-width: 150px; justify-content: center; font-size: 17px; padding: 12px 22px; }

/* Podešavanja → Napredno: svaki odeljak je sklopljen dok ga ne otvoriš */
.stsec.advcoll { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; margin: 8px 0; background: var(--panel); } .stsec.advcoll > :first-child { cursor: pointer; margin: 0; padding: 10px 0; display: flex; justify-content: space-between; } .stsec.advcoll > :first-child::after { content: '▸'; opacity: .6; } .stsec.advcoll.open > :first-child::after { content: '▾'; }
.stsec.advcoll:not(.open) > *:not(:first-child) { display: none; } .stsec.advcoll.open { padding-bottom: 12px; }

/* meni  u malom prozoru */
.cmpplus { display: grid; gap: 2px; padding: 6px; min-width: 250px; } .cmpplus button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: #1f2a44; display: grid; gap: 1px; } .cmpplus button:hover { background: #e8f0fc; } .cmpplus small { font-size: 11px; opacity: .6; }

/* rokovi projekta gore desno, u zaglavlju projekta */
.dlhead { position: relative; display: inline-block; margin-right: 8px; } .dlhead > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 10px; background: #fff7e6; border: 1px solid #f0c987; color: #7a4b00; font-size: 13px; white-space: nowrap; } .dlhead > summary::-webkit-details-marker { display: none; } .dlhead > summary:hover { background: #ffefcc; } .dlhead[open] > summary { background: #ffe3a8; }
.dlhead .dlhn { font-size: 12px; opacity: .85; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.dlhead .dlpanel { position: absolute; right: 0; top: calc(100% + 6px); width: min(520px, 92vw); max-height: calc(var(--vh100, 100vh) * 0.6); overflow-y: auto; z-index: 30; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(20,30,60,.28); padding: 10px 12px; }

/* misao dana: istaknuta u vrhu Moji taskovi */
.dayq { font-size: 15px; font-style: italic; color: #2d4a7a; background: #eef3fc; border: 1px solid #d6e2f6; border-left: 4px solid #5f86c4; border-radius: 10px; padding: 9px 14px; margin: 4px 0 10px; line-height: 1.45; } .dayq b { font-style: normal; color: #4a5f86; }

/* misao dana: dugme dole levo, pored kalkulatora */
#quoteBtn { position: fixed; left: 66px; bottom: 40px; z-index: 60; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.22); color: #fff; cursor: pointer; opacity: .9; display: flex; align-items: center; justify-content: center; } #quoteBtn:hover { background: rgba(255,255,255,.38); }
body:not(.rail) #quoteBtn { left: 54px; background: #eef2f9; border-color: #c4d0e6; color: #3b5b8f; } body.compact #quoteBtn { display: none; }
#quotePop { position: fixed; left: 24px; bottom: 82px; width: 320px; max-width: calc(100vw - 30px); z-index: 450; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(20,30,60,.3); padding: 10px 14px 12px; color: #1f2a44; } #quotePop .qh { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; opacity: .55; margin-bottom: 4px; } #quotePop .dayq { margin: 0; padding: 4px 10px; background: transparent; border: 0; border-left: 3px solid #5f86c4; }

/* mali prozor: kalkulator i misao dana su gore levo u plavoj traci (tamo gde je prazno) */
body.compact #calcBtn, body.compact #quoteBtn { display: flex !important; position: fixed; top: 7px; bottom: auto; z-index: 600; width: 30px; height: 30px; background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.5) !important; color: #fff !important; opacity: 1; }
body.compact #calcBtn { left: 8px; } body.compact #quoteBtn { left: 44px; }
body.compact #calcPop { left: 8px !important; top: 44px !important; bottom: auto !important; right: auto !important; width: min(300px, calc(100vw - 16px)); max-height: calc(var(--vh100, 100vh) - 52px); overflow-y: auto; }
body.compact #quotePop { left: 8px; top: 44px; bottom: auto; width: min(300px, calc(100vw - 16px)); }

/* misao dana je iznad kalkulatora, unutar leve trake (da se vidi) */
#quoteBtn { left: 24px; bottom: 82px; } body:not(.rail) #quoteBtn { left: 12px; bottom: 82px; } #quotePop { bottom: 124px; }
body.compact #quoteBtn { bottom: auto; }

/* mali prozor: traka je dovoljno visoka za dugmad kalkulator/misao, da se ne preklapa sa sadržajem */
body.compact .cmp-head { min-height: 44px; box-sizing: border-box; padding-left: 88px; }
body.compact #calcBtn, body.compact #quoteBtn { top: 7px; }
/* Misao dana: poseban prozor na sredini ekrana */
.quotewin { position: fixed; inset: 0; z-index: 2000; background: rgba(20,30,50,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.quotecard { position: relative; width: min(520px, 100%); background: #fff; border-radius: 16px; padding: 28px 30px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.quotecard .quoteh { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6b7a99; font-weight: 700; margin-bottom: 14px; }
.quotecard .dayq { margin: 0; } .quotecard .dayq span { display: block; font-size: 21px; line-height: 1.45; color: #1f2a44; font-family: Georgia, serif; }
.quotecard .dayq b { display: block; margin-top: 14px; font-size: 14px; color: #3b5b8f; }
.quotex { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: #6b7a99; }
html.dark .quotecard { background: #1e2536; } html.dark .quotecard .dayq span { color: #e6ebf7; }

body.compact #calcBtn { left: 8px !important; bottom: auto !important; } body.compact #quoteBtn { left: 46px !important; bottom: auto !important; }

.dayq, .dayq span, .dayq b, .quotecard .dayq span { font-style: normal !important; }

.quotecard .dayq span.long { font-size: 17px; line-height: 1.55; } .quotecard { max-height: calc(var(--vh100, 100vh) * 0.86); overflow-y: auto; }

/* razmak od leve plave trake: sadržaj nikad ne sme da naleže na nju */
body.rail main:not(.chatmain):not(.mailmain) { padding-left: 32px !important; padding-right: 22px !important; }
body.rail:not(.compact) header { padding-left: 24px; }

body.rail main:not(.chatmain):not(.mailmain) { padding-left: 48px !important; }
body.rail:not(.compact) header { padding-left: 40px; }

body.rail main:not(.chatmain):not(.mailmain) { padding-left: 18px !important; padding-right: 18px !important; }
body.rail:not(.compact) header { padding-left: 18px; }

.quotecard .dayq span, .dayq span { font-family: inherit !important; font-weight: 500; }

#notifs .ni { position: relative; padding-right: 30px; } #notifs .nx { position: absolute; top: 4px; right: 6px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #8a96ad; font-size: 14px; cursor: pointer; padding: 2px 6px; opacity: .55; } #notifs .ni:hover .nx { opacity: 1; } #notifs .nx:hover { color: #c0392b; }

.dmpick { margin: 6px 0 12px; } .dmsel { width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff; border: 1px solid #cfd8ea; border-radius: 10px; min-height: 36px; } .dmlist { max-height: 280px; overflow-y: auto; margin-top: 6px; border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; } .dmo { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; } .dmo:hover { background: #eef2f9; } .dmo.hd { cursor: default; background: #f1f4fa; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5a6a8a; padding: 4px 10px; position: sticky; top: 0; } .dmo.hd:hover { background: #f1f4fa; }

#calcPop .ckeys[hidden] { display: none; } #calcPop .csci { padding-bottom: 0; gap: 4px; } #calcPop .csci button { height: 32px; font-size: 14px; } #calcPop .csb { font-weight: 800; font-style: italic; } #calcPop .csb.on { background: #3b5b8f; color: #fff; border-radius: 6px; }

#calcPop .csb { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55); color: #fff; cursor: pointer; font-size: 13px; padding: 1px 8px; border-radius: 6px; } #calcPop .csb.on { background: #fff; color: #3b5b8f; } #calcPop .chb { color: #fff; }

#calcPop .chead .csb { background: rgba(255,255,255,.2) !important; border: 1px solid rgba(255,255,255,.7) !important; color: #fff !important; box-shadow: none !important; min-width: 30px; height: 24px; line-height: 1; } #calcPop .chead .csb.on { background: #fff !important; color: #3b5b8f !important; }

/* kalkulator i misao dana u gornjoj traci */
#tabs #calcBtn, #tabs #quoteBtn { position: relative !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; opacity: 1 !important; min-width: 68px; border-radius: 12px !important; }
#tabs #calcBtn svg, #tabs #quoteBtn svg { width: 22px !important; height: 22px !important; }
#tabs #quoteBtn { margin-left: auto !important; }   /* misao i kalkulator idu skroz desno u traci, uz tajmer */
body:not(.rail):not(.compact) #calcPop { top: 64px; bottom: auto; left: auto; right: 24px; }

#tabs #gameBtn { position: relative !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; opacity: 1 !important; min-width: 68px; border-radius: 12px !important; } #tabs #gameBtn svg { width: 22px !important; height: 22px !important; }

.chedta { width: 100%; min-height: 44px; resize: none; border: 2px solid #3b6db3; border-radius: 10px; padding: 8px 10px; font: inherit; box-sizing: border-box; background: #fff; color: inherit; } .chedbtns { display: flex; gap: 6px; align-items: center; margin-top: 6px; }

.chtext.bigemo { font-size: 54px; line-height: 1.15; } .chbigg { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px; max-height: 260px; overflow-y: auto; } .chbigg button { font-size: 30px; height: 46px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; } .chbigg button:hover { background: #e9eefb; }

body.compact #gameBtn { display: flex !important; position: fixed; top: 7px; bottom: auto !important; left: 84px !important; z-index: 600; width: 30px; height: 30px; background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.5) !important; color: #fff !important; opacity: 1; } body.compact .cmp-head { padding-left: 126px; }

/* Gotovo: blago zelenkasto i prazno polje dok niko nije kliknuo; jače zeleno sa kvačicom tek kad je gotovo */
.donebtn { background: #eef6f0 !important; color: #4f7d5b !important; border: 1px solid #cfe3d4 !important; font-weight: 600; } .donebtn:hover { background: #dcefe1 !important; }
.ahint { color: #8a9a8e; }
.donechip { display: inline-block; background: #cfeed7; color: #1f6b34; border: 1px solid #8fd1a1; border-radius: 8px; padding: 3px 10px; font-weight: 700; font-size: 12.5px; margin-right: 4px; }

.cmp-side { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; } .cmp-side .donebtn { padding: 5px 10px; border-radius: 8px; white-space: nowrap; }

.cmp-plus { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.65); background: rgba(255,255,255,.2); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; cursor: pointer; } .cmp-plus:hover { background: rgba(255,255,255,.35); } .cmp-plus svg { stroke: currentColor; }

.cmp-plus { background: linear-gradient(135deg, #ffd66b, #f29f3d) !important; border: 2px solid #fff !important; color: #2b3a67 !important; box-shadow: 0 2px 8px rgba(0,0,0,.28); font-weight: 800; } .cmp-plus:hover { filter: brightness(1.08); transform: scale(1.06); } .cmp-plus svg { stroke-width: 2.6; }

.cmp-ctl .cmp-week { margin-left: auto; text-align: center; } .cmp-ctl .cmp-clock { font-size: 15px; min-width: 92px; }

#cmpNote { margin-right: 40px; } /* komentar se završava u liniji sa listom taskova iznad (širina dugmeta + ) */

.cmp-ctl .cmp-week { text-align: left; padding: 5px 12px; border-radius: 14px; white-space: normal; line-height: 1.25; min-width: 150px; } .cmp-week .cwr { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; } .cmp-week .cwr span { font-weight: 500; color: #1d3a2a; } .cmp-week .cwr b { font-weight: 800; color: #0f2a1c; } .cmp-week .cwn { font-size: 10.5px; color: #2c5a41; margin-top: 2px; border-top: 1px solid rgba(0,0,0,.12); padding-top: 2px; }

/* mali prozor: leva kolona (task, komentar, sat sa dugmadima), desna kolona (+ gore, zbir sati ispod) */
.cmp-now { display: grid !important; grid-template-columns: minmax(0, 1fr) 156px; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 8px; align-items: center; }
.cmp-now > .cmp-row { display: contents; }
.cmp-now #cmpTask { grid-column: 1; grid-row: 1; width: 100%; }
.cmp-now #cmpManual { grid-column: 2; grid-row: 1; justify-self: end; }
.cmp-now #cmpNote { grid-column: 1; grid-row: 2; margin-right: 0 !important; width: 100%; box-sizing: border-box; }
.cmp-now .cmp-ctrls { grid-column: 1; grid-row: 3; display: flex; align-items: center; gap: 8px; }
.cmp-now .cmp-ctrls .cmp-clock { flex: 1; min-width: 0; }
.cmp-now .cmp-week { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin-left: 0 !important; min-width: 0 !important; }

/* mali prozor, drugi raspored: task i komentar kraći, + odmah pored taska, zbir sati skroz desno */
.cmp-now { grid-template-columns: minmax(0, 1fr) 34px 150px !important; }
.cmp-now #cmpManual { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; }
.cmp-now #cmpNote { grid-column: 1 !important; }
.cmp-now .cmp-ctrls { grid-column: 1 / span 2 !important; }
.cmp-now .cmp-week { grid-column: 3 !important; grid-row: 1 / span 3 !important; }

/* zbir sati u visini komentara i sata (ne iznad), + odmah uz listu taskova */
.cmp-now .cmp-week { grid-column: 3 !important; grid-row: 2 / span 2 !important; }
.cmp-now #cmpManual { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; }
.cmp-now #cmpTask { grid-column: 1 !important; }

/* zbir sati uži; sat i dugmad za start/pauzu/stop u istoj ravni sa njim */
.cmp-now { grid-template-columns: minmax(0, 1fr) 34px 118px !important; }
.cmp-now .cmp-week { grid-column: 3 !important; grid-row: 2 / span 2 !important; align-self: stretch !important; padding: 4px 9px !important; }
.cmp-week .cwr { gap: 6px !important; font-size: 12px !important; } .cmp-week .cwn { font-size: 10px !important; }
.cmp-now .cmp-ctrls { grid-column: 1 / span 2 !important; grid-row: 3 !important; }

/* zbir sati ide dole, u naslov liste taskova; plava traka ima samo task, komentar i sat sa dugmadima */
.cmp-now { grid-template-columns: minmax(0, 1fr) 34px !important; }
.cmp-now .cmp-ctrls { grid-column: 1 / span 2 !important; grid-row: 3 !important; }
.cmp-now #cmpNote { grid-column: 1 / span 2 !important; }
.cmp-section { flex-wrap: wrap; gap: 4px 10px; }
.cmp-tot { font-size: 12px; font-weight: 500; color: #3b5b8f; text-align: right; } .cmp-tot b { font-weight: 800; color: #1f2a44; } .cmp-tot i { opacity: .5; font-style: normal; } .cmp-tot small { display: block; font-size: 10.5px; color: #6b7a99; }

/* gore: task i komentar levo, a tekuće vreme sa dugmadima start/pauza/stop desno, u istoj ravni */
.cmp-now { grid-template-columns: minmax(0, 1fr) 34px 120px !important; grid-template-rows: auto auto !important; }
.cmp-now #cmpTask { grid-column: 1 !important; grid-row: 1 !important; }
.cmp-now #cmpManual { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; }
.cmp-now #cmpNote { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
.cmp-now .cmp-ctrls { grid-column: 3 !important; grid-row: 1 / span 2 !important; flex-wrap: wrap !important; justify-content: center !important; align-content: center; gap: 6px 8px !important; }
.cmp-now .cmp-ctrls .cmp-clock { flex: 1 1 100% !important; min-width: 0 !important; width: 100%; box-sizing: border-box; }

.cmp-section .cmp-tot { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* start/pauza/stop u ravni sa taskom (gore), tekući sat u ravni sa komentarom (ispod) */
.cmp-now { grid-template-columns: minmax(0, 1fr) 34px 46px 46px !important; grid-template-rows: auto auto !important; }
.cmp-now .cmp-ctrls { display: contents !important; }
.cmp-now #cmpTask { grid-column: 1 !important; grid-row: 1 !important; }
.cmp-now #cmpManual { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; }
.cmp-now #cmpGo { grid-column: 3 !important; grid-row: 1 !important; justify-self: center !important; }
.cmp-now #cmpStop { grid-column: 4 !important; grid-row: 1 !important; justify-self: center !important; }
.cmp-now #cmpNote { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
.cmp-now #cmpClock { grid-column: 3 / span 2 !important; grid-row: 2 !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box; flex: none !important; }

/* tri dugmeta (+, pauza, stop) lepo razmaknuta u istom redu sa taskom; task i komentar iste širine; sat ispod dugmadi */
.cmp-now { grid-template-columns: minmax(0, 1fr) 34px 34px 34px !important; column-gap: 8px !important; }
.cmp-now #cmpTask { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; box-sizing: border-box; }
.cmp-now #cmpNote { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; }
.cmp-now #cmpManual { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; }
.cmp-now #cmpGo { grid-column: 3 !important; grid-row: 1 !important; justify-self: center !important; }
.cmp-now #cmpStop { grid-column: 4 !important; grid-row: 1 !important; justify-self: center !important; }
.cmp-now #cmpClock { grid-column: 2 / span 3 !important; grid-row: 2 !important; }

.cmp-hist { margin: 0 12px 6px; } .cmp-hist > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #3b5b8f; padding: 4px 6px; list-style: none; user-select: none; } .cmp-hist > summary::-webkit-details-marker { display: none; } .cmp-hist > summary::before { content: '▸ '; } .cmp-hist[open] > summary::before { content: '▾ '; } .cmp-hist .cmp-entry { margin-left: 0; margin-right: 0; }

/* mali prozor: ikonice gore sitnije, a Chat istaknut */
body.compact .cmp-head .cmp-btns { gap: 5px; }
body.compact .cmp-head button { width: 28px; height: 28px; min-width: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
body.compact .cmp-head button svg { width: 16px; height: 16px; }
body.compact #calcBtn, body.compact #quoteBtn, body.compact #gameBtn { width: 28px !important; height: 28px !important; top: 8px !important; }
body.compact #calcBtn { left: 8px !important; } body.compact #quoteBtn { left: 41px !important; } body.compact #gameBtn { left: 74px !important; }
body.compact #calcBtn svg, body.compact #quoteBtn svg, body.compact #gameBtn svg { width: 15px; height: 15px; }
body.compact .cmp-head { padding-left: 110px; }
body.compact .cmp-head #cmpChat { width: auto; min-width: 64px; padding: 0 12px 0 9px; gap: 5px; background: linear-gradient(135deg, #38d98a, #1fa863) !important; border: 2px solid #fff !important; color: #fff !important; font-weight: 800; font-size: 12.5px; box-shadow: 0 2px 8px rgba(0,0,0,.3); position: relative; }
body.compact .cmp-head #cmpChat svg { width: 17px; height: 17px; }
body.compact .cmp-head #cmpChat::after { content: 'Chat'; }

/* dugme pauza/start u kartici taska: malo veće i istaknutije, krupniji znak */
.cmp-card .cmp-play { width: 48px; height: 48px; font-size: 24px; line-height: 1; border-width: 3px; box-shadow: 0 3px 10px rgba(30,60,110,.28); } .cmp-card .cmp-play.live { box-shadow: 0 3px 12px rgba(28,124,88,.5); } .cmp-card .cmp-play:hover { transform: scale(1.06); }

.tlist tr.subfolder td { background: #f4f1d6; border-bottom: 1px solid #e3dca6; padding: 8px 12px; cursor: pointer; } .tlist tr.subfolder:hover td { background: #ece6b4; } .tlist tr.subfolder .sfico { font-size: 16px; }

/* folderi u listi izgledaju kao u Windows Exploreru: žuta ikonica foldera i ime, bez obojene pozadine */
.tlist tr.subfolder td { background: transparent !important; border-bottom: 1px solid var(--line, #e4e9f2); padding: 7px 12px; } .tlist tr.subfolder:hover td { background: rgba(80,120,200,.10) !important; } .tlist tr.subfolder .sfico { display: inline-flex; vertical-align: middle; margin-right: 6px; } .tlist tr.subfolder .sfname { font-weight: 500; vertical-align: middle; }

/* folder u listi taskova: u stilu aplikacije (boja foldera sa leve strane), malo krupniji od taska */
.tlist tr.subfolder td { background: color-mix(in srgb, var(--fc, #8aa4cf) 16%, #fff) !important; border-left: 6px solid var(--fc, #8aa4cf); border-bottom: 1px solid color-mix(in srgb, var(--fc, #8aa4cf) 30%, #fff); padding: 13px 14px; font-size: 15px; } .tlist tr.subfolder:hover td { background: color-mix(in srgb, var(--fc, #8aa4cf) 28%, #fff) !important; } .tlist tr.subfolder .sfico { display: inline-flex; vertical-align: middle; margin-right: 8px; color: color-mix(in srgb, var(--fc, #8aa4cf) 65%, #1f2a44); } .tlist tr.subfolder .sfname { font-size: 16px; font-weight: 700; vertical-align: middle; color: #1f2a44; }

/* folder u listi: izdvojen od taskova, broj taskova desno; taskovi ispod blago uvučeni udesno */
.tlist tr.subfolder td { box-shadow: 0 3px 0 rgba(255,255,255,.9), 0 4px 6px rgba(30,50,90,.10); border-bottom: 2px solid color-mix(in srgb, var(--fc, #8aa4cf) 55%, #fff) !important; } .tlist tr.subfolder .sfrow { display: flex; align-items: center; gap: 4px; } .tlist tr.subfolder .sfcount { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #5a6a8a; background: rgba(255,255,255,.75); border-radius: 999px; padding: 2px 12px; }

/* folder u listi: ista veličina trake i reda kao kod taska, mali razmak ispod foldera */
.tlist tr.subfolder td { border-left: 0 !important; box-shadow: inset 8px 0 0 var(--fc, #8aa4cf) !important; padding: 9px 14px 9px 18px !important; font-size: 14px !important; border-bottom: 1px solid color-mix(in srgb, var(--fc, #8aa4cf) 35%, #fff) !important; } .tlist tr.subfolder .sfname { font-size: 14px !important; font-weight: 800 !important; } .tlist tr.subfolder .sfcount { font-size: 12px; padding: 1px 10px; } .tlist tr.subgap td { height: 8px; padding: 0 !important; background: transparent !important; border: 0 !important; }

.tlist tr.subfolder .sfico svg { width: 26px !important; height: 26px !important; stroke-width: 1.7; } .tlist tr.subfolder .sfico { margin-right: 10px; }

.navbtns { display: flex; gap: 6px; margin-bottom: 8px; } .navbtns button { border: 1px solid #c4d0e6; background: #fff; color: #2d4a7a; border-radius: 10px; padding: 5px 12px; font-weight: 700; font-size: 13px; cursor: pointer; } .navbtns button:hover:not(:disabled) { background: #e9f0fc; } .navbtns button:disabled { opacity: .4; cursor: default; }

.foldtree { margin: 8px 0 4px; } .foldtree > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #3b5b8f; padding: 6px 4px; list-style: none; user-select: none; } .foldtree > summary::-webkit-details-marker { display: none; } .foldtree > summary::before { content: '▸ '; } .foldtree[open] > summary::before { content: '▾ '; }

.navbtns button { font-size: 14px; padding: 7px 16px; } .crumbs a.crumb { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(60,80,120,.5); } .crumbs a.crumb:hover { color: #1f4f99; border-bottom-style: solid; }

/* Nazad / Napred / Gore: mnogo sitnije */
.navbtns { gap: 4px !important; margin-bottom: 4px !important; } .navbtns button { font-size: 11px !important; padding: 2px 8px !important; border-radius: 7px !important; font-weight: 600 !important; line-height: 1.3 !important; }

/* red sa filterima u prikazu foldera (Struktura/Lista/Kanban, pretraga, statusi…): sitniji */
#main .bar:has(#fp) { gap: 6px; margin: 6px 0; } #main .bar:has(#fp) select, #main .bar:has(#fp) input { font-size: 11px !important; padding: 3px 8px !important; height: 26px !important; border-radius: 8px !important; } #main .bar:has(#fp) button { font-size: 11px !important; padding: 3px 9px !important; height: 26px !important; }

/* cela kartica sa filterima i spiskom u prikazu foldera: manji okvir, razmaci i redovi */
#main :has(> .bar > #fp) { padding: 6px 10px 8px !important; border-radius: 10px !important; margin-top: 6px !important; }
#main :has(> .bar > #fp) .bar { margin: 4px 0 !important; } #main :has(> .bar > #fp) h3 { font-size: 13px !important; margin: 2px 0 !important; }
.foldtree > summary { padding: 3px 4px !important; font-size: 12px !important; } .foldtree { margin: 2px 0 !important; }
.tlist tr.subfolder td { padding: 5px 12px 5px 16px !important; font-size: 12.5px !important; } .tlist tr.subfolder .sfname { font-size: 13px !important; } .tlist tr.subfolder .sfico svg { width: 20px !important; height: 20px !important; } .tlist tr.subfolder .sfcount { font-size: 11px !important; padding: 0 9px !important; }
#main table.tlist th { font-size: 10.5px !important; padding: 4px 8px !important; }

/* zaglavlje liste taskova: sitnije, u jednom redu, jasne kolone koje se ne preklapaju */
table.tlist > tbody > tr:first-child > th, table.tlist > tr:first-child > th { font-size: 10px !important; padding: 3px 8px !important; white-space: nowrap !important; height: 22px; line-height: 1.2; border-left: 1px solid #d6deee; text-transform: none; letter-spacing: 0; } table.tlist > tbody > tr:first-child > th:first-child, table.tlist > tr:first-child > th:first-child { border-left: 0; }
table.tlist td { border-left: 1px solid rgba(180,195,225,.35); } table.tlist td.tcell, table.tlist tr.subfolder td { border-left: 0; }

/* dugme start/pauza u listama taskova: okruglo i krupno, isto kao u malom prozoru */
.tact .cmp-play, .runctl .cmp-play, td .cmp-play[data-start], td .cmp-play[data-pause] { width: 54px; height: 54px; font-size: 28px; line-height: 1; border-width: 3px; box-shadow: 0 3px 10px rgba(30,60,110,.28); vertical-align: middle; } .runctl { display: inline-flex; align-items: center; gap: 10px; } .runctl .cmp-play.live { box-shadow: 0 3px 12px rgba(28,124,88,.5); }

/* gornja traka tajmera: okruglo dugme pauze kao u malom prozoru */
#timerBar .tbround { width: 40px; height: 40px; font-size: 20px; line-height: 1; border-width: 3px; vertical-align: middle; box-shadow: 0 2px 8px rgba(28,124,88,.4); }

/* dugme pauze/start: isto veliko gore i u redu taska, sa krupnijim znakom; "Gotovo" u istoj liniji sa ostalim dugmadima */
#timerBar .tbround { width: 54px !important; height: 54px !important; font-size: 34px !important; border-width: 3px !important; }
.tact .cmp-play, .runctl .cmp-play, td .cmp-play[data-start], td .cmp-play[data-pause] { font-size: 34px !important; }
.abtn { position: relative !important; display: inline-block !important; vertical-align: middle !important; }
.abtn .ahint { position: absolute !important; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; margin-top: 1px; font-size: 10px; }
.tact { white-space: nowrap; } .tact > *, .runctl > * { vertical-align: middle; }

/* okrugla dugmad pauza/start/stop: znak je SVG, uvek centriran */
.cmp-play, .cmp-round { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; line-height: 1; } .cmp-play svg { width: 46%; height: 46%; display: block; } .cmp-round svg { width: 50%; height: 50%; display: block; }

/* aktivni task u sopstvenom redu ispod zaglavlja kad je prozor uzak */
#timerRow { display: none; } #timerRow.on { display: flex; justify-content: flex-end; align-items: center; padding: 4px 14px; background: #eaf0fb; border-bottom: 1px solid #d3dcef; position: relative; z-index: 4; } #timerRow #timerBar { zoom: 1 !important; font-size: 14px !important; margin: 0 !important; } #timerRow #timerBar > * { font-size: inherit; }

/* traka tajmera u svom redu: čitljiva slova (tamna na svetloj pozadini), bez prozirnosti */
#timerRow #timerBar { color: #1f2a44 !important; background: transparent !important; opacity: 1 !important; filter: none !important; } #timerRow #timerBar .tt, #timerRow #timerBar .t { color: #1f2a44 !important; opacity: 1 !important; } #timerRow #timerBar .tt.muted { color: #5a6a8a !important; } #timerRow #timerBar .donebtn { background: #eef6f0 !important; color: #4f7d5b !important; border: 1px solid #cfe3d4 !important; }

/* traka aktivnog taska: UVEK kontrastna slova (tamna na svetloj pozadini), bez obzira gde stoji (zaglavlje ili svoj red) */
#timerBar, header .hctl #timerBar, #timerRow #timerBar { background: #e6eefc !important; color: #14213d !important; opacity: 1 !important; filter: none !important; border: 1px solid #b9c9e8 !important; border-radius: 12px !important; }
#timerBar .tt, header .hctl #timerBar .tt, #timerRow #timerBar .tt { color: #14213d !important; font-weight: 700 !important; opacity: 1 !important; }
#timerBar .t, header .hctl #timerBar .t, #timerRow #timerBar .t { color: #0f3d91 !important; font-weight: 800 !important; opacity: 1 !important; }
#timerBar .tt.muted, header .hctl #timerBar .tt.muted { color: #3e4f73 !important; }
#timerBar .hg { color: #0f3d91 !important; opacity: 1 !important; }
body:not(.rail) header .hctl #timerBar button.donebtn, header .hctl #timerBar button.donebtn, #timerRow #timerBar button.donebtn, #timerBar button.donebtn { background: #d9f1df !important; color: #14502b !important; border: 1px solid #7fc596 !important; font-weight: 800 !important; opacity: 1 !important; }
body:not(.rail) header .hctl #timerBar button:not(.cmp-play):not(.donebtn), #timerBar button:not(.cmp-play):not(.donebtn) { background: #fff !important; color: #14213d !important; border: 1px solid #9fb2d8 !important; font-weight: 700 !important; }
body:not(.rail) header .hctl #timerBar button.cmp-play, #timerBar button.cmp-play { background: #1c7c58 !important; color: #fff !important; border: 3px solid #1c7c58 !important; opacity: 1 !important; }

/* traka tajmera: dugme pauze umereno, ne ogromno */
#timerBar .tbround, #timerBar button.cmp-play { width: 36px !important; height: 36px !important; border-width: 2px !important; } #timerBar .tbround svg, #timerBar button.cmp-play svg { width: 44% !important; height: 44% !important; } #timerBar { padding-top: 2px !important; padding-bottom: 2px !important; }
#timerRow.on { padding: 3px 14px !important; }

/* red aktivnog taska je deo zaglavlja (cela širina, ispod kartica), ne razvlači raspored stranice */
header #timerRow.on { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100%; box-sizing: border-box; height: auto !important; align-self: start; flex: none; min-height: 0; } header #timerRow { min-height: 0; }

/* red aktivnog taska: uvek razmak sa leve (i desne) strane */
header #timerRow.on, #timerRow.on { padding-left: 28px !important; padding-right: 20px !important; } #timerRow #timerBar { margin-left: 28px !important; max-width: calc(100% - 28px); }

/* razmak sadržaja od ivice prozora i u prikazu sa karticama gore (ne samo uz levi meni) */
body:not(.rail):not(.compact) main:not(.chatmain):not(.mailmain) { padding-left: 22px !important; padding-right: 22px !important; }

.bdchip { display: inline-block; background: #ffe3f0; color: #a3175d; border: 1px solid #f5b5d3; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 12px; } .bdlab { color: #a3175d; font-weight: 700; display: block; } .bdlab .bdpick { display: inline-flex; gap: 6px; margin-top: 4px; } .bdlab .bdpick select { border-color: #f5b5d3; background: #fff5fa; color: #6b1042; }

/* napomena o plaćenoj pauzi: skroz na dnu malog prozora, sitnije */
body.compact .cmp { display: flex; flex-direction: column; min-height: var(--vh100, 100vh); } body.compact .cmp-foot { margin-top: auto; padding: 14px 14px 8px; font-size: 10px; line-height: 1.35; color: #8a96ad; text-align: center; }

/* Chat je svuda iste (zelene) boje: levi meni, kartice gore i mali prozor */
#rail button[data-k="chat"], body:not(.rail) #tabs button[data-g][data-k="chat"], header #tabs button[data-k="chat"], body.compact .cmp-head #cmpChat { background: linear-gradient(135deg, #38d98a, #1fa863) !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.28) !important; font-weight: 800 !important; }
#rail button[data-k="chat"] svg, header #tabs button[data-k="chat"] svg { stroke: #fff !important; }
#rail button[data-k="chat"]:hover, header #tabs button[data-k="chat"]:hover { filter: brightness(1.08); background: linear-gradient(135deg, #38d98a, #1fa863) !important; }
#rail button[data-k="chat"].on, header #tabs button[data-k="chat"].on { background: linear-gradient(135deg, #2ee58f, #17a05c) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 2px 10px rgba(0,0,0,.3) !important; }

body:not(.rail) #tabs button[data-g][data-k="chat"].on, body.rail #rail button[data-k="chat"].on, body #rail button[data-k="chat"].on { background: linear-gradient(135deg, #2ee58f, #17a05c) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 2px 10px rgba(0,0,0,.3) !important; }
body.rail #rail button[data-k="chat"], body #rail button[data-k="chat"] { background: linear-gradient(135deg, #38d98a, #1fa863) !important; color: #fff !important; }
body:not(.rail) #tabs button[data-g][data-k="chat"] svg, body #rail button[data-k="chat"] svg { stroke: #fff !important; color: #fff !important; }

/* sve kartice i alatke (Misao, Igra, Kalkulator) su uvek vidljive: pri sužavanju prozora prelaze u novi red umesto da se sakriju */
body:not(.rail) header #tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 2px !important; align-content: center; } body:not(.rail) header { height: auto !important; min-height: 64px; } body:not(.rail) header #tabs button[data-g] { min-width: 56px !important; padding: 4px 8px 3px !important; }

/* uzak prozor: kartice u prvom redu (prelaze u novi red po potrebi), komande (ime, kalendar, zvonce…) u drugom redu; ništa se ne preklapa i ništa se ne skriva */
@media (max-width: 1700px) {
  body:not(.rail) header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-auto-rows: auto !important; }
  body:not(.rail) header .brand { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  body:not(.rail) header #tabs { grid-column: 2 !important; grid-row: 1 !important; flex-wrap: wrap !important; overflow: visible !important; justify-content: flex-start !important; }
  body:not(.rail) header .hctl { grid-column: 2 !important; grid-row: 2 !important; flex-wrap: wrap !important; overflow: visible !important; justify-content: flex-end !important; width: auto !important; padding: 2px 12px 4px 6px !important; zoom: 1 !important; }
  body:not(.rail) header #timerRow.on { grid-column: 1 / -1 !important; grid-row: 3 !important; }
}

/* alatke u traci (Misao, Igra, Kalkulator): uvek sitnije od običnih kartica */
#tabs #quoteBtn, #tabs #gameBtn, #tabs #calcBtn { min-width: 44px !important; padding: 2px 6px 2px !important; font-size: 9px !important; gap: 0 !important; border-radius: 9px !important; } #tabs #quoteBtn svg, #tabs #gameBtn svg, #tabs #calcBtn svg { width: 15px !important; height: 15px !important; }

#tabs #quoteBtn, #tabs #gameBtn, #tabs #calcBtn { min-width: 36px !important; padding: 1px 4px !important; font-size: 8.5px !important; border-radius: 8px !important; line-height: 1.1 !important; } #tabs #quoteBtn svg, #tabs #gameBtn svg, #tabs #calcBtn svg { width: 13px !important; height: 13px !important; }

/* Misao, Igra, Kalkulator: najsitnije dugme u svim prikazima (traka gore, levi meni dole, mali prozor) */
body.rail #calcBtn, body.rail #quoteBtn, body.rail #gameBtn { width: 26px !important; height: 26px !important; } body.rail #calcBtn svg, body.rail #quoteBtn svg, body.rail #gameBtn svg { width: 13px !important; height: 13px !important; }
body.rail #calcBtn { bottom: 28px !important; } body.rail #quoteBtn { bottom: 60px !important; } body.rail #gameBtn { bottom: 92px !important; }
body.compact #calcBtn, body.compact #quoteBtn, body.compact #gameBtn { width: 24px !important; height: 24px !important; top: 9px !important; } body.compact #calcBtn svg, body.compact #quoteBtn svg, body.compact #gameBtn svg { width: 12px !important; height: 12px !important; } body.compact #calcBtn { left: 8px !important; } body.compact #quoteBtn { left: 38px !important; } body.compact #gameBtn { left: 68px !important; }

/* aktivni task je u istom redu sa komandama (drugi red zaglavlja): task levo, komande desno */
@media (max-width: 1700px) { body:not(.rail) header .hctl #timerBar { margin-right: auto !important; margin-left: 4px !important; } body:not(.rail) header .hctl { justify-content: flex-end !important; } }
#timerRow { display: none !important; }

/* ZAGLAVLJE (prikaz sa karticama gore): 1. red = kartice levo + komande (ime, kalendar, zvonce, odjava) UVEK gore desno;
   2. red = aktivni task levo + Misao / Igra / Kalkulator desno */
body:not(.rail):not(.compact) header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-auto-rows: auto !important; align-items: center; }
body:not(.rail):not(.compact) header .brand { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
body:not(.rail):not(.compact) header #tabs { grid-column: 2 !important; grid-row: 1 !important; flex-wrap: wrap !important; overflow: visible !important; }
body:not(.rail):not(.compact) header .hctl { grid-column: 3 !important; grid-row: 1 !important; flex-wrap: wrap !important; justify-content: flex-end !important; overflow: visible !important; width: auto !important; max-width: 640px; padding: 0 12px 0 6px !important; }
body:not(.rail):not(.compact) header .hctl #timerBar { margin: 0 !important; }
#subRow { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; gap: 8px; padding: 2px 12px 4px 8px; min-width: 0; }
#subRow #timerBar { margin-right: auto !important; }
#subRow #quoteBtn, #subRow #gameBtn, #subRow #calcBtn { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; flex-direction: row !important; gap: 5px !important; padding: 3px 10px !important; min-width: 0 !important; font-size: 11px !important; font-weight: 700; border-radius: 10px !important; background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.4) !important; box-shadow: none !important; opacity: 1 !important; }
#subRow #quoteBtn:hover, #subRow #gameBtn:hover, #subRow #calcBtn:hover { background: rgba(255,255,255,.3) !important; }
#subRow #quoteBtn svg, #subRow #gameBtn svg, #subRow #calcBtn svg { width: 14px !important; height: 14px !important; stroke: currentColor; }

/* Misao, Igra, Kalkulator: ispod logoa (levo, drugi red zaglavlja); aktivni task u drugom redu pored njih */
body:not(.rail):not(.compact) header .brand { grid-row: 1 !important; }
#toolRow { grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px 5px; }
#subRow { grid-column: 2 / -1 !important; }
#toolRow #quoteBtn, #toolRow #gameBtn, #toolRow #calcBtn { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; flex-direction: row !important; gap: 4px !important; padding: 3px 8px !important; min-width: 0 !important; font-size: 10px !important; font-weight: 700; border-radius: 9px !important; background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.4) !important; box-shadow: none !important; opacity: 1 !important; }
#toolRow #quoteBtn:hover, #toolRow #gameBtn:hover, #toolRow #calcBtn:hover { background: rgba(255,255,255,.3) !important; }
#toolRow #quoteBtn svg, #toolRow #gameBtn svg, #toolRow #calcBtn svg { width: 13px !important; height: 13px !important; stroke: currentColor; }

#toolRow { justify-content: flex-start !important; padding: 0 4px 5px 8px !important; }

/* aktivni task: u prvom redu zaglavlja, između kartica i komandi; sitniji da stane */
body:not(.rail):not(.compact) header .hctl #timerBar { font-size: 11px !important; padding: 1px 6px !important; gap: 6px !important; border-radius: 10px !important; max-width: 330px; margin-right: 6px !important; }
body:not(.rail):not(.compact) header .hctl #timerBar .tt { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important; }
body:not(.rail):not(.compact) header .hctl #timerBar .t { font-size: 11px !important; }
body:not(.rail):not(.compact) header .hctl #timerBar .tbround, body:not(.rail):not(.compact) header .hctl #timerBar button.cmp-play { width: 26px !important; height: 26px !important; border-width: 2px !important; }
body:not(.rail):not(.compact) header .hctl #timerBar button.donebtn { padding: 2px 8px !important; font-size: 11px !important; }
body:not(.rail):not(.compact) header .hctl { flex-wrap: nowrap !important; max-width: none !important; }
#subRow { display: none !important; }

/* Misao, Igra, Kalkulator: još sitnije, uz sam logo, tanak red */
#toolRow { padding: 0 4px 2px 8px !important; gap: 3px !important; margin-top: -3px !important; line-height: 1 !important; } #toolRow #quoteBtn, #toolRow #gameBtn, #toolRow #calcBtn { font-size: 9px !important; padding: 1px 6px !important; gap: 3px !important; border-radius: 7px !important; line-height: 1.2 !important; } #toolRow #quoteBtn svg, #toolRow #gameBtn svg, #toolRow #calcBtn svg { width: 10px !important; height: 10px !important; }

#toolRow { padding: 0 4px 1px 8px !important; margin-top: -5px !important; gap: 2px !important; min-height: 0 !important; } #toolRow #quoteBtn, #toolRow #gameBtn, #toolRow #calcBtn { font-size: 8.5px !important; padding: 0 5px !important; line-height: 1.15 !important; border-radius: 6px !important; } #toolRow #quoteBtn svg, #toolRow #gameBtn svg, #toolRow #calcBtn svg { width: 9px !important; height: 9px !important; }

/* ================= ZAGLAVLJE (prikaz sa karticama gore) – KONAČNI RASPORED =================
   Glavne kartice su UVEK u prvom redu pored loga (u jednom redu, nikad ne preskaču). Sve ostalo (aktivni task, Misao/Igra/Kalkulator,
   komande) stoji desno u istom redu ako ima mesta, a ako nema, prelazi u drugi red, desno. Logo nikad ne prekriva ništa. */
body:not(.rail):not(.compact) header { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 2px 6px; height: auto !important; min-height: 0 !important; }
body:not(.rail):not(.compact) header .brand { flex: none !important; align-self: center; position: static !important; }
body:not(.rail):not(.compact) header #tabs { flex: 1 1 auto !important; min-width: min-content !important; flex-wrap: nowrap !important; overflow: visible !important; justify-content: flex-start !important; order: 1; }
body:not(.rail):not(.compact) header #tabs button[data-g] { min-width: 44px !important; flex: 0 1 auto; padding: 4px 6px 3px !important; font-size: 10px !important; }
body:not(.rail):not(.compact) header .hctl { flex: 0 1 auto !important; margin-left: auto !important; flex-wrap: wrap !important; justify-content: flex-end !important; overflow: visible !important; width: auto !important; max-width: 100% !important; padding: 0 12px 2px 6px !important; order: 2; row-gap: 3px; }
body:not(.rail):not(.compact) header .hctl #timerBar { margin: 0 6px 0 0 !important; }
body:not(.rail):not(.compact) header .hctl #quoteBtn, body:not(.rail):not(.compact) header .hctl #gameBtn, body:not(.rail):not(.compact) header .hctl #calcBtn { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; flex-direction: row !important; gap: 4px !important; padding: 3px 8px !important; min-width: 0 !important; font-size: 10px !important; font-weight: 700; border-radius: 9px !important; background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.4) !important; box-shadow: none !important; opacity: 1 !important; }
body:not(.rail):not(.compact) header .hctl #quoteBtn svg, body:not(.rail):not(.compact) header .hctl #gameBtn svg, body:not(.rail):not(.compact) header .hctl #calcBtn svg { width: 12px !important; height: 12px !important; stroke: currentColor; }
#toolRow, #subRow, #timerRow { display: none !important; }



/* komande desno (ime, jezik, kalendar, zvonce, odjava): uvek desno, u jednom redu; ako nema mesta, smanjuju se (zoom 90-80-70%…), ne prelaze u novi red */
body:not(.compact) header .hctl { flex-wrap: nowrap !important; zoom: revert-layer; }

/* ================= ZAGLAVLJE sa karticama gore: logo i kartice FIKSNI; crvena grupa (ikonice) uvek gore desno; plava grupa gde ima mesta, najviše 2 reda ================= */
body:not(.rail):not(.compact) header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; grid-auto-rows: auto !important; align-items: center !important; column-gap: 6px; }
body:not(.rail):not(.compact) header .brand { grid-column: 1 !important; grid-row: 1 !important; position: static !important; }
body:not(.rail):not(.compact) header #tabs { grid-column: 2 !important; grid-row: 1 !important; flex-wrap: nowrap !important; overflow: visible !important; justify-content: flex-start !important; min-width: 0 !important; margin: 0 !important; }
body:not(.rail):not(.compact) header .hctl { grid-column: 3 !important; grid-row: 1 !important; flex-wrap: wrap !important; max-width: none !important; margin: 0 !important; padding: 0 !important; justify-content: flex-end !important; overflow: visible !important; row-gap: 3px; width: auto !important; }
body:not(.rail):not(.compact) header #ctlFixed { grid-column: 4 !important; grid-row: 1 !important; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 4px; }
body:not(.rail):not(.compact) header.hdr-two .hctl { grid-column: 2 / -1 !important; grid-row: 2 !important; padding: 0 12px 4px 6px !important; }
body:not(.rail):not(.compact) header #ctlFixed button { background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.38) !important; box-shadow: none !important; padding: 3px 8px !important; font-size: 12px !important; }

/* drugi red zaglavlja je uvek JEDAN red (nikad treći): plava grupa se smanjuje da stane */
body:not(.rail):not(.compact) header.hdr-two .hctl { flex-wrap: nowrap !important; }

/* levo polje sa logoom je UVEK belo i kad zaglavlje ima dva reda (logo se pruža kroz oba reda) */
header .brand { background: #fff !important; } body:not(.rail):not(.compact) header.hdr-two .brand { grid-row: 1 / span 2 !important; align-self: stretch !important; display: flex !important; align-items: center !important; }

/* drugi red zaglavlja: nikad preko logoa. alatke bez natpisa (samo ikonice), ništa ne izlazi levo od logoa */
body:not(.rail):not(.compact) header.hdr-two .hctl { overflow: hidden !important; max-width: calc(100% - 12px) !important; min-width: 0 !important; justify-content: flex-end !important; } body:not(.rail):not(.compact) header.hdr-two .hctl #quoteBtn span, body:not(.rail):not(.compact) header.hdr-two .hctl #gameBtn span, body:not(.rail):not(.compact) header.hdr-two .hctl #calcBtn span { display: none; } body:not(.rail):not(.compact) header.hdr-two .hctl #timerBar .tt { max-width: 110px; }

/* znak u okruglom dugmetu start/pauza: krupniji (ispunjava dugme, ne lebdi sitno u sredini) */
.cmp-play svg { width: 58% !important; height: 58% !important; } .cmp-play[data-start] svg, .tact .cmp-play:not(.live) svg { width: 60% !important; height: 60% !important; margin-left: 2px; } .cmp-card .cmp-play svg { width: 56% !important; height: 56% !important; } #timerBar .tbround svg, #timerBar button.cmp-play svg { width: 54% !important; height: 54% !important; }

/* okrugli start/pauza u redovima lista taskova: manji krug (42 px) */
.tact .cmp-play, .runctl .cmp-play, td .cmp-play[data-start], td .cmp-play[data-pause] { width: 42px !important; height: 42px !important; border-width: 2px !important; }

/* zaglavlje foldera: dugmad Nazad/Napred/Gore levo i akcije (Rokovi, Vidljivost, Kopiraj/Premesti folder…) desno, u istom redu */
.phead .ptop { align-items: flex-start !important; } .phead .ptop > div:first-child { min-width: 0; } .phead .pacts { margin-top: 0 !important; align-self: flex-start; }

/* prevlačenje na folder: osvetli se odredišni folder */
.tlist tr.subfolder.dropat td { outline: 2px dashed #3b6db3; outline-offset: -3px; background: color-mix(in srgb, var(--fc, #8aa4cf) 40%, #fff) !important; } .tlist tr.subfolder[draggable="true"] { cursor: grab; }

.ftable tr.frow.dropat td { outline: 2px dashed #3b6db3; outline-offset: -3px; background: rgba(59,109,179,.18) !important; } .ftable tr.ftask[draggable="true"], .ftable tr.frow[draggable="true"] { cursor: grab; }

/* opis foldera: sitno i skupljeno na 2 reda, otvara se dugmetom */
.phead .pdesc { font-size: 11.5px !important; line-height: 1.35 !important; max-height: 2.8em; overflow: hidden; padding: 2px 4px !important; color: #4a5568; } .phead .pdesc.open { max-height: none; } .pdtoggle { border: 0; background: transparent; color: #3b5b8f; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0 4px 2px; }

/* prozori (dialozi): polje za tekst se širi samo na dole, nikad preko ivice prozora; dugmad ostaju uz prozor */
.overlay .card { box-sizing: border-box; max-width: 94vw; } .overlay .card textarea { resize: vertical !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; min-height: 90px; } .overlay .card input:not([type=checkbox]):not([type=radio]), .overlay .card select { max-width: 100%; box-sizing: border-box; }

/* polje za izmenu naziva u listi: tekst se može označavati i kopirati */
.ttitle input, tr.task input[type=text] { user-select: text !important; -webkit-user-select: text !important; cursor: text; }

#caseBar { position: fixed; z-index: 9999; display: none; gap: 2px; background: #1f2a44; border-radius: 8px; padding: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.3); } #caseBar button { border: 0; background: transparent; color: #fff; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer; } #caseBar button:hover { background: rgba(255,255,255,.2); }

/* red foldera u listi: ista visina i veličina slova kao red taska */
.tlist tr.subfolder td { height: 42px !important; padding: 10px 14px 10px 18px !important; font-size: 13px !important; box-sizing: border-box; } .tlist tr.subfolder .sfname { font-size: 13px !important; font-weight: 800 !important; } .tlist tr.subfolder .sfico svg { width: 22px !important; height: 22px !important; } .tlist tr.subfolder .sfcount { font-size: 11.5px !important; }

/* prevlačenje foldera u levom drvetu: crta pokazuje gde će folder stati (ispred / iza / unutar) */
#side .node.dropbefore { box-shadow: 0 -3px 0 0 #2f6bd8; } #side .node.dropafter { box-shadow: 0 3px 0 0 #2f6bd8; } #side .node.dropat { outline: 2px dashed #2f6bd8; outline-offset: -2px; }

#side .node.multi { outline: 3px solid #2f6bd8; outline-offset: -2px; background-image: linear-gradient(rgba(47,107,216,.18), rgba(47,107,216,.18)); }

#pickBar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 8px; background: #1f2a44; color: #fff; padding: 8px 12px; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.35); } #pickBar b { font-size: 13px; margin-right: 4px; } #pickBar button { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; border-radius: 9px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; } #pickBar button:hover { background: rgba(255,255,255,.26); } #pickBar button.danger { background: #c0392b; border-color: #c0392b; }

/* PRVA KOLONA (naziv foldera / podfoldera / taska) je uvek dovoljno široka za najduži tekst; sledeća kolona (Status…) počinje tek posle njega, bez preklapanja i bez lomljenja u više redova */
table.tlist td.tcell, table.tlist td.sfcell, #main table.tlist td.tcell { white-space: nowrap !important; width: 1% !important; min-width: 0; } table.tlist td.tcell .tline, table.tlist td.tcell .ttitle { white-space: nowrap !important; } table.tlist td.sfcell .sfrow { white-space: nowrap; } table.tlist td.sfcntcell { text-align: right; width: auto; } table.tlist tr.subfolder .sfrow { display: flex; align-items: center; gap: 4px; } table.tlist tr.subfolder .sfcount { margin-left: 0; display: inline-block; }

/* ručno podešena širina prve kolone (razdelnik u zaglavlju) */
html.c1custom table.tlist td.tcell, html.c1custom table.tlist td.sfcell, html.c1custom table.tlist th:first-child { width: var(--c1w) !important; max-width: var(--c1w) !important; min-width: var(--c1w) !important; } html.c1custom table.tlist td.tcell, html.c1custom table.tlist td.tcell .tline, html.c1custom table.tlist td.tcell .ttitle { white-space: normal !important; } table.tlist th:first-child { position: relative; } table.tlist th:first-child::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; }

.tcreator { font-size: 10.5px; color: #7b8aa3; margin-top: 1px; font-weight: 500; white-space: nowrap; }

.offtabs { display: flex; gap: 6px; margin: 10px 0 2px; flex-wrap: wrap; } .offtabs button { border: 1px solid #c4d0e6; background: #fff; color: #3b5b8f; border-radius: 12px 12px 0 0; padding: 7px 18px; font-weight: 700; font-size: 13px; cursor: pointer; } .offtabs button.on { background: #3b5b8f; color: #fff; border-color: #3b5b8f; } .offtabs button:last-child { margin-left: auto; border-style: dashed; }
.tloc { font-size: 10.5px; color: #3b5b8f; font-weight: 700; margin-top: 1px; white-space: nowrap; } .offrow select, .offrow input { width: 100%; }

.offtabs button:last-child { margin-left: 0 !important; }

.ppgrp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 4px; border-bottom: 1px solid #e3e9f5; } .ppgrp select { font-size: 12px; padding: 3px 6px; }

.offchk { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 0; } .offchk label.chk { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 600; }

body.compact .cmp-gaps { margin-top: auto; padding: 10px 14px 0; font-size: 11px; line-height: 1.35; color: #5d6b88; text-align: center; } body.compact .cmp-gaps + .cmp-foot { margin-top: 0; }

/* redni broj taska u listi */ table.tlist { counter-reset: tnum; } table.tlist tr.task { counter-increment: tnum; } table.tlist tr.task:not(.ftask) > td:first-child::before { content: counter(tnum) '.'; display: inline-block; min-width: 22px; margin-right: 4px; color: #8a96ad; font-size: 11px; font-weight: 700; text-align: right; vertical-align: middle; }

/* broj taska tik uz naziv, izmedju kvadratica i imena */ table.tlist tr.task:not(.ftask) > td:first-child::before { content: none !important; } table.tlist tr.task:not(.ftask) .ttitle::before { content: counter(tnum) '.'; display: inline-block; margin-right: 5px; color: #7a88a6; font-size: 11px; font-weight: 700; text-transform: none; }

.cmp-play.off, .cmp-play:disabled { background: #b9c0cc !important; color: #eef1f6 !important; box-shadow: none !important; cursor: not-allowed; opacity: .85; }

.seg button:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.offtabs button:last-child { border-style: solid !important; } .offtabs button:first-child { border-style: dashed; }

body.compact .cmp-days { padding: 0 14px 6px; } body.compact .cmp-day { margin: 6px 0; border: 1px solid var(--line, #dfe6f3); border-radius: 12px; background: var(--panel, #fff); } body.compact .cmp-day > summary { display: flex; justify-content: space-between; padding: 9px 12px; cursor: pointer; font-size: 14px; } body.compact .cmp-daysum { font-weight: 800; } body.compact .cmp-daytask { padding: 0 10px 8px; } body.compact .cmp-dtitle { display: flex; justify-content: space-between; font-weight: 700; font-size: 12.5px; padding: 6px 2px 2px; color: #3b5b8f; border-top: 1px solid #e8edf7; } body.compact .cmp-day .cmp-entry { margin: 3px 0; }

/* istorija po danima: gusto i pregledno */
body.compact .cmp-days { padding: 0 10px 4px; }
body.compact .cmp-day { margin: 4px 0; border-radius: 9px; }
body.compact .cmp-day > summary { padding: 5px 10px; font-size: 13px; background: #e9eefb; border-radius: 9px; text-transform: capitalize; }
body.compact .cmp-day[open] > summary { border-radius: 9px 9px 0 0; }
body.compact .cmp-daysum { font-size: 12.5px; color: #1f3a6b; }
body.compact .cmp-daytask { padding: 0 8px 3px; }
body.compact .cmp-dtitle { font-size: 11.5px; padding: 4px 0 1px; border-top: 0; }
body.compact .cmp-day .cmp-entry { margin: 1px 0; padding: 2px 6px; min-height: 0; gap: 4px; border-radius: 7px; box-shadow: none; }
body.compact .cmp-day .cmp-entry .cmp-meta { font-size: 10.5px; }
body.compact .cmp-day .cmp-entry .cmp-dur { font-size: 11.5px; }
body.compact .cmp-day .cmp-entry .cmp-play.small { width: 20px; height: 20px; min-width: 20px; font-size: 10px; padding: 0; }
body.compact .cmp-day .cmp-entry .cmp-play.small svg { width: 10px; height: 10px; }
body.compact .cmp-section { margin: 6px 0 2px; padding: 0 12px; font-size: 11.5px; }

/* istorija po danima, poslednja verzija: levo dan (naziv / zbir / datum u 3 reda, centrirano), desno taskovi; sve sklopljeno po zadatku */
body.compact .cmp-histall { margin: 6px 10px 4px; border: 1px solid #dfe6f3; border-radius: 10px; background: #f4f7fd; }
body.compact .cmp-histall > summary { padding: 6px 12px; font-size: 12px; font-weight: 800; color: #3b5b8f; cursor: pointer; }
body.compact .cmp-histall .cmp-days { padding: 0 8px 6px; }
body.compact .cmp-day { display: flex; align-items: stretch; margin: 3px 0; border: 1px solid #dfe6f3; border-radius: 9px; background: #fff; overflow: hidden; }
body.compact .cmp-dayhead { flex: 0 0 84px; width: 84px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; background: #e9eefb; border-right: 3px solid #7f9be0; cursor: pointer; text-align: center; line-height: 1.15; }
body.compact .cmp-dayhead b { font-size: 12px; text-transform: capitalize; color: #1f3a6b; }
body.compact .cmp-dayhead .cmp-daysum { font-size: 13px; font-weight: 800; color: #1f3a6b; }
body.compact .cmp-dayhead small { font-size: 10px; color: #6b7a99; }
body.compact .cmp-daybody { flex: 1; min-width: 0; padding: 3px 6px; }
body.compact .cmp-day[data-open="0"] .cmp-daybody { display: none; }
body.compact .cmp-day[data-open="0"] { opacity: .95; }
body.compact .cmp-daytask { padding: 0 0 2px; }
body.compact .cmp-dtitle { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 0 1px; font-size: 10.5px; }
body.compact .cmp-dtitle .ttitle { font-size: 10.5px !important; padding: 1px 6px !important; line-height: 1.25; max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
body.compact .cmp-dtitle > span { font-size: 11px; font-weight: 800; color: #3b5b8f; }
body.compact .cmp-day.today .cmp-dtitle .ttitle { font-size: 11.5px !important; }
body.compact .cmp-day .cmp-entry { margin: 1px 0; padding: 2px 6px; gap: 4px; }

/* dan levo u 3 reda: naziv / zbir / datum (jači selektori da ih nijedno drugo pravilo ne pregazi) */
body.compact .cmp-days .cmp-day > .cmp-dayhead { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; flex: 0 0 84px !important; width: 84px !important; min-width: 84px !important; text-align: center !important; gap: 2px !important; }
body.compact .cmp-days .cmp-day > .cmp-dayhead > b, body.compact .cmp-days .cmp-day > .cmp-dayhead > span, body.compact .cmp-days .cmp-day > .cmp-dayhead > small { display: block !important; width: 100% !important; text-align: center !important; margin: 0 !important; white-space: nowrap; }
body.compact .cmp-days .cmp-day > .cmp-dayhead > span { font-size: 13px !important; font-weight: 800 !important; }
body.compact .cmp-days .cmp-day > .cmp-dayhead > small { font-size: 10px !important; font-weight: 600; }


/* sklopljen dan i dalje pokazuje taskove sa zbirom vremena; pojedinačni unosi (od–do) se vide tek kad se dan raširi */
body.compact .cmp-day[data-open="0"] .cmp-daybody { display: block !important; }
body.compact .cmp-day[data-open="0"] .cmp-entry { display: none !important; }

/* kvačica uvek levo, a tekst odmah u istoj liniji (svuda u formama i dijalozima) */
label.chk { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; text-align: left !important; width: auto; max-width: 100%; }
label.chk > input[type=checkbox], label.chk > input[type=radio] { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; justify-self: auto !important; align-self: center; }

/* traka sa filterima u folderu se prelama u više redova, pa dugme Prilozi nikad ne ostane van vidokruga */
.tbar { flex-wrap: wrap !important; row-gap: 6px; } .tbar #docsBtn { margin-left: 8px !important; flex: 0 0 auto; }

#zoomSel { height: 28px; padding: 0 4px; font-size: 12px; border-radius: 8px; cursor: pointer; width: auto; min-width: 58px; }

/* podfolder sa rednim brojem se vodi kao task: broji se u istom nizu i ima isti broj ispred naziva */
table.tlist tr.frow.numbered { counter-increment: tnum; }
table.tlist tr.frow.numbered .sfname::before { content: counter(tnum) '.'; display: inline-block; margin-right: 6px; color: #7a88a6; font-size: 11px; font-weight: 700; }
tr.frow .sfcntcell [data-foldnum] { margin-left: 10px; }

a.lnk { display: inline-block; max-width: 100%; padding: 0 6px; border-radius: 8px; background: #eaf1ff; color: #2b5cb8; font-weight: 700; font-size: .92em; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } a.lnk:hover { background: #d8e5ff; text-decoration: underline; }

tr.attrow .clipico { color: #3b5b8f; display: inline-flex; align-items: center; } tr.attrow .sfname { text-decoration: none; color: inherit; cursor: pointer; } tr.attrow .sfname:hover { text-decoration: underline; } tr.attrow { background: #f4f8ff; }

/* prilozi na vrhu foldera */
.attstrip { margin: 0 0 8px; border: 1px solid #cfdcf4; border-radius: 12px; background: #f4f8ff; overflow: hidden; }
.attstrip .attrow2 { display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-top: 1px solid #e3ebfa; } .attstrip .attrow2:first-child { border-top: 0; }
.attstrip .clipico { color: #3b5b8f; display: inline-flex; flex: none; } .attstrip .clipico svg { width: 22px; height: 22px; }
.attstrip .attname { font-weight: 800; color: #1f3a6b; text-decoration: none; flex: 0 1 auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attstrip a.attname:hover { text-decoration: underline; }
.attstrip .attmeta { flex: 1; color: #6b7a99; font-size: 11.5px; text-align: right; }
table.tlist tr.dr-above > td { box-shadow: inset 0 3px 0 #3b78e7; } table.tlist tr.dr-below > td { box-shadow: inset 0 -3px 0 #3b78e7; }

/* traka priloga: manja (širina po sadržaju), a opis odmah uz naziv */
.attstrip { display: inline-flex !important; flex-direction: column; width: auto !important; max-width: min(100%, 560px); min-width: 260px; }
.attstrip .attrow2 { gap: 8px; }
.attstrip .attname { max-width: 260px; }
.attstrip .attmeta { flex: 0 0 auto !important; text-align: left !important; margin-left: 2px; }
.attstrip .attrow2 > .sm { margin-left: 6px; }

/* traka priloga: samo spajalica i naziv (ostalo u opisu na pokazivaču), tačno onoliko koliko treba */
.attstrip { min-width: 0 !important; max-width: min(100%, 420px) !important; }
.attstrip .attmeta { display: none !important; }
.attstrip .attname { max-width: 320px !important; }

.ctxmenu { position: fixed; z-index: 99999; min-width: 170px; background: #fff; border: 1px solid #c9d4ea; border-radius: 10px; box-shadow: 0 8px 24px rgba(20,40,90,.22); padding: 4px; } .ctxmenu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 12px; border-radius: 7px; font-size: 13px; cursor: pointer; color: #1f2a44; } .ctxmenu button:hover { background: #e9f0ff; } html.dark .ctxmenu { background: #232a3a; border-color: #3a4560; } html.dark .ctxmenu button { color: #e6ecf8; } html.dark .ctxmenu button:hover { background: #2e3850; }

/* broj i početak naziva uvek na istom mestu: task (kvadratić + broj + naziv) i folder (ikonica + broj + naziv) */
table.tlist tr.task:not(.ftask) .ttitle::before, table.tlist tr.frow.numbered .sfname::before { display: inline-block !important; min-width: 22px; text-align: right; margin-right: 5px !important; }
table.tlist tr.frow.numbered .sfrow { gap: 0 !important; }
table.tlist tr.frow.numbered .sfico { flex: 0 0 22px; width: 22px; margin-right: 5px; }

table.tlist tr.frow.numbered .sfico { margin-right: 9px !important; }

/* opis, "napravio/la" i lokacija počinju tačno ispod početka naziva taska (posle kvadratića i broja) */
table.tlist tr.task td.tcell:has(.fpick) .tdesc, table.tlist tr.task td.tcell:has(.fpick) .tcreator, table.tlist tr.task td.tcell:has(.fpick) .tloc { margin-left: 50px; }
table.tlist tr.task td.tcell:not(:has(.fpick)) .tdesc, table.tlist tr.task td.tcell:not(:has(.fpick)) .tcreator, table.tlist tr.task td.tcell:not(:has(.fpick)) .tloc { margin-left: 23px; }
table.tlist tr.task td.tcell:has(.fpick) .tdesc, table.tlist tr.task td.tcell:has(.fpick) .tcreator, table.tlist tr.task td.tcell:has(.fpick) .tloc { margin-left: 57px !important; }
table.tlist tr.task td.tcell:not(:has(.fpick)) .tdesc, table.tlist tr.task td.tcell:not(:has(.fpick)) .tcreator, table.tlist tr.task td.tcell:not(:has(.fpick)) .tloc { margin-left: 30px !important; }

/* naziv taska: i dalje podebljan, ali ne predebeo (poluboldiran, čitljiviji naročito kad je ceo naziv velikim slovima) */
td.tcell .ttitle[style*="--th"], td.tcell b.ttitle[style*="--th"], td.tcell .ttitle { font-weight: 600 !important; letter-spacing: .25px !important; }

td.tcell .ttitle[style*="--th"], td.tcell b.ttitle[style*="--th"], td.tcell .ttitle { font-weight: 700 !important; }

td.tcell .ttitle[style*="--th"], td.tcell b.ttitle[style*="--th"], td.tcell .ttitle { font-weight: 700 !important; -webkit-text-stroke: .35px currentColor; }

/* "napravio/la" ide desno, ispod oznake (npr. Dokumentacija), a ne ispod naziva */
table.tlist tr.task td.tcell .tcreator { margin-left: 0 !important; text-align: right !important; display: block; padding-right: 2px; }

/* lista taskova: kolone bliže levo (tabela ne razvlači prvu kolonu preko cele širine), kolona Sati dovoljno široka da brojevi stanu u jedan red */
table.tlist { width: auto !important; max-width: 100%; }
table.tlist td.tcell, table.tlist th:first-child { width: 560px; min-width: 420px; max-width: 640px; }
table.tlist tr > :nth-last-child(2) { white-space: nowrap; min-width: 92px; }
table.tlist tr > :last-child { white-space: nowrap; }
table.tlist.withfolders { width: auto !important; }

/* podfolder u listi izgleda kao task: ista visina, ista pozadina, isto slovo naziva; ikonica folderа na mestu kvadratića */
table.tlist tr.frow.subfolder > td { background: color-mix(in srgb, var(--fc, #8aa4cf) 9%, #fff) !important; padding-top: 8px !important; padding-bottom: 8px !important; vertical-align: middle; border-left: 0 !important; border-top: 1px solid #e3ebfa; }
table.tlist tr.frow.subfolder > td.sfcell { border-left: 5px solid var(--fc, #8aa4cf) !important; }
table.tlist tr.frow.subfolder .sfico svg { width: 17px !important; height: 17px !important; }
table.tlist tr.frow.subfolder .sfico { color: var(--fc, #8aa4cf); display: inline-flex; align-items: center; justify-content: center; }
table.tlist tr.frow.subfolder .sfname { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .25px; -webkit-text-stroke: .35px currentColor; color: var(--text, #1f2a44); }
table.tlist tr.frow.subfolder .sfcount { font-size: 11px; color: #6b7a99; background: transparent; }
table.tlist tr.frow.subfolder:hover > td { background: color-mix(in srgb, var(--fc, #8aa4cf) 16%, #fff) !important; }

/* podfolder: ista veličina slova i ista visina kao task */
table.tlist tr.frow.subfolder .sfname { font-size: 13px !important; }
table.tlist tr.frow.subfolder > td { height: 42px !important; box-sizing: border-box; }

table.tlist tr.frow.subfolder > td { padding-top: 11px !important; padding-bottom: 11px !important; }

/* podfolder u listi iste visine kao task (task ima dva reda: naziv + napravio/la) */
table.tlist tr.frow.subfolder > td { height: 49px !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* dugme Start / Pauza u listi taskova: manje, da ne bude preveliko */
table.tlist .cmp-play { width: 30px !important; height: 30px !important; min-width: 30px !important; }
table.tlist .cmp-play svg { width: 14px !important; height: 14px !important; }

/* podfolder: ikonica na mestu kvadratića, a ikonica, broj i naziv u prvom redu, isto kao task (ne vertikalno na sredini) */
table.tlist tr.frow.subfolder > td { vertical-align: top !important; padding-top: 9px !important; padding-bottom: 0 !important; }
table.tlist tr.frow.subfolder .sfrow { align-items: center; min-height: 20px; }
table.tlist tr.frow.subfolder .sfico { width: 22px !important; flex: 0 0 22px !important; }
table.tlist tr.frow.subfolder .sfico svg { width: 17px !important; height: 17px !important; }

html body table.tlist tr.frow.subfolder > td { padding-top: 3px !important; }

.todaysum { font-size: 11.5px; color: #2f7a4a; font-weight: 600; line-height: 1.3; } .todaysum b { font-weight: 800; } .todaytag { color: #2f7a4a; font-weight: 600; }

/* traka priloga sa zaglavljem koje skuplja / raširuje */
.attstrip .atthead { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; user-select: none; background: #e9f0ff; }
.attstrip .atthead .chev { width: 12px; color: #3b5b8f; font-size: 12px; }
.attstrip .atthead .clipico svg { width: 18px; height: 18px; }
.attstrip .atthead b { font-weight: 800; color: #1f3a6b; font-size: 13px; }
.attstrip.collapsed .attrow2 { display: none; }
.attstrip .attrow2 { border-top: 1px solid #e3ebfa; }

/* traka priloga: desno, sa većom strelicom za padajući meni */
.attstrip { display: flex !important; width: fit-content !important; margin-left: auto !important; margin-right: 0 !important; }
.attstrip .atthead .chev { width: 20px; font-size: 20px; line-height: 1; order: 3; margin-left: 6px; }
.attstrip .atthead { gap: 8px; padding: 6px 12px; }

/* Prilozi: padajući meni odmah pored „Dodaj prilog“ u traci sa filterima */
.tbar .attstrip { position: relative; display: inline-flex !important; width: auto !important; margin: 0 0 0 8px !important; border: 1px solid #c9d4ea; border-radius: 10px; background: #f4f8ff; overflow: visible; vertical-align: middle; }
.tbar .attstrip .atthead { padding: 4px 10px; border-radius: 10px; }
.tbar .attstrip .attlist { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 300px; max-width: 520px; background: #fff; border: 1px solid #c9d4ea; border-radius: 12px; box-shadow: 0 10px 28px rgba(20,40,90,.22); overflow: hidden; }
.tbar .attstrip.collapsed .attlist { display: none; }
.tbar .attstrip .attrow2 { display: flex !important; }

/* okvir za dodavanje priloga: moderna zona za prevlačenje */
#docsBox .card { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
.dz { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 2px dashed #b7c8ec; border-radius: 14px; background: linear-gradient(180deg, #f8fbff, #eef4ff); transition: border-color .15s, background .15s, transform .15s; max-width: 640px; }
.dz.over { border-color: #3b78e7; background: #e3eeff; transform: scale(1.01); }
.dz .dzicon { font-size: 26px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(40,80,160,.18); }
.dz .dztxt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.dz .dztxt b { font-size: 14px; color: #1f3a6b; } .dz .dztxt span { font-size: 11.5px; color: #6b7a99; }
.dz .dzbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.dz .dzbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; border: 1px solid #c3d1ee; background: #fff; color: #1f3a6b; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .12s, box-shadow .12s; }
.dz .dzbtn:hover { background: #eef4ff; box-shadow: 0 2px 8px rgba(40,80,160,.18); }
.dz .dzbtn.primary { background: #3b78e7; color: #fff; border-color: #3b78e7; } .dz .dzbtn.primary:hover { background: #2f68d0; }
#docsBox .card { width: 100% !important; max-width: none !important; }
.dz { width: min(100%, 640px); box-sizing: border-box; }

/* podešavanje balončića poruke (chat) */
.chbub .chbubrow { margin: 6px 4px 10px; } .chbub .chbubt { font-size: 12px; font-weight: 700; margin-bottom: 4px; opacity: .85; }
.chbub .chbubsw { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.chbub .chbsw { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); cursor: pointer; padding: 0; font-size: 13px; display: grid; place-items: center; background: #fff; color: #6b7a99; }
.chbub .chbsw.on { border-color: #3b78e7; box-shadow: 0 0 0 2px rgba(59,120,231,.3); }
.chbub .chbubc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; } .chbub .chbubc input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid #c3d1ee; border-radius: 6px; background: none; vertical-align: middle; } .chbub .chbubc select { width: auto; padding: 2px 4px; }


/* chat: poruka istaknuta kao obaveštenje (announcement) */
.chmsg.ann .chwrap > .chmain { background: linear-gradient(135deg, #fff4c7, #ffe3a3) !important; border: 1px solid #f0b44c !important; border-left: 5px solid #e98a00 !important; box-shadow: 0 2px 10px rgba(233,138,0,.22); color: #3a2a00 !important; }
.chmsg.ann .chwrap > .chmain .chtext { color: #3a2a00; }
.chann { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #e98a00; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; vertical-align: middle; }
.chedit button[data-chann].on { background: #ffe3a3; }

.chann { display: block !important; margin: 0 0 3px !important; padding: 0 !important; background: transparent !important; color: #b86800 !important; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; }
html .chmsg.ann .chwrap > .chmain { background-color: #ffeeb8 !important; background-image: linear-gradient(135deg, #fff4c7, #ffe3a3) !important; border-left: 5px solid #e98a00 !important; }

/* traka za pomeranje prozora podešavanja chata */
.chpopdrag { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -8px -8px 8px; padding: 7px 12px; background: #e9eefb; border-bottom: 1px solid #d3dcf2; border-radius: 12px 12px 0 0; font-size: 11.5px; font-weight: 700; color: #3b5b8f; cursor: grab; user-select: none; touch-action: none; }
.chpopdrag:active { cursor: grabbing; } .chpopdrag button { font-size: 14px; cursor: pointer; }

/* chat 1 na 1: tuđe poruke uvek levo, moje uvek desno (u oba stila, bez pomeranja); avatar odmah desno od mog balončića, balončići uz istu desnu ivicu */
html .chmsg.rt, html .chmsg.rt.grp { flex-direction: row-reverse !important; justify-content: flex-start !important; }
html .chmsg.rt .chgut { text-align: right; }
html .chmsg.rt .chbody, html .chmsg.rt.grp .chbody { align-items: flex-end !important; }
html .chmsg.rt .chhead { align-self: flex-end !important; }
html .chmsg.rt .chwrap, html .chmsg.rt.grp .chwrap { align-items: flex-end !important; }

/* chat: dva različita stila poruka (dugme sa oblačićem); u oba tuđe poruke levo, a moje desno */
/* 2) klasične trake: pravougaona traka preko većeg dela širine, ravne ivice, obojena linija sa strane, bez senke */
html:not(.chteams) .chmsg .chbody { width: min(76%, 720px) !important; max-width: min(76%, 720px) !important; flex: 0 1 auto !important; }
html:not(.chteams) .chmsg .chwrap > .chmain { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border-radius: 3px !important; border: 0 !important; border-left: 4px solid #8fa8dd !important; box-shadow: none !important; padding: 7px 12px !important; }
html:not(.chteams) .chmsg.rt .chwrap > .chmain, html:not(.chteams) .chmsg.chmc .chwrap > .chmain { border-left: 0 !important; border-right: 4px solid #6f8fe0 !important; text-align: left; }

/* prozor podešavanja chata: uvek iznad svega i nikad viši od prozora (ima sopstveno klizanje) */
#chPop { z-index: 2147483000 !important; max-height: calc(var(--vh100, 100vh) - 20px) !important; overflow-y: auto !important; }

/* 1) zaobljeni balončići (podrazumevano): ostaje postojeći izgled, samo malo mekši okvir */
html.chteams .chmsg .chwrap > .chmain { box-shadow: 0 1px 4px rgba(30,60,120,.12) !important; }
/* klasične trake: manji razmaci, da traka ne bude velika */
html:not(.chteams) .chmsg .chwrap > .chmain { padding: 4px 10px !important; font-size: 13px; line-height: 1.35; }

/* balončići niži */
html .chmsg .chwrap > .chmain { padding-top: 2px !important; padding-bottom: 2px !important; line-height: 1.3 !important; min-height: 0 !important; } html .chmsg .chwrap > .chmain .chtext { line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; }
html:not(.chteams) .chmsg .chwrap > .chmain { padding: 2px 10px !important; }

/* podešavanje balončića i pozadine: sve u istoj ravni (kontrole iste visine, poravnate po sredini) */
.chbub .chbubc { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 30px; }
.chbub .chbubc label { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; line-height: 28px; height: 28px; white-space: nowrap; }
.chbub .chbubc input[type=color] { width: 36px !important; height: 26px !important; margin: 0 !important; vertical-align: middle; }
.chbub .chbubc input[type=checkbox] { margin: 0 !important; width: auto !important; }
.chbub .chbubc select { height: 28px !important; margin: 0 !important; padding: 0 6px !important; }
.chbub .chbsw.chbimg { width: 44px; height: 30px; background-size: cover !important; background-position: center !important; }

/* ništa ne štrči van prozora podešavanja */
#chPop { overflow-x: hidden !important; } .chbub { max-width: 100%; box-sizing: border-box; } .chbub .chbubc { flex-wrap: wrap !important; gap: 6px 10px !important; max-width: 100%; } .chbub .chbubc select { max-width: 70px; } .chbub .chbubsw { max-width: 100%; }

/* izbor opsega podešavanja: sve razgovore / samo ovaj razgovor */
.chscope { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 4px 4px; font-size: 12px; font-weight: 700; }
.chscope button { border: 1px solid #c3d1ee; background: #fff; color: #1f3a6b; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.chscope button.on { background: #3b78e7; border-color: #3b78e7; color: #fff; } .chscope button:disabled { opacity: .45; cursor: not-allowed; }

/* naslovi i podnaslovi u chatu (polje za pisanje i poruke): obično podebljano slovo, bez okvira, pozadine i podvlačenja koje bi preuzeli iz opštih naslova aplikacije */
.chin h1, .chin h2, .chtext h1, .chtext h2, .chmain h1, .chmain h2, .chh1, .chh2 { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; color: inherit !important; display: block; }
.chin h1 *, .chin h2 *, .chtext h1 *, .chtext h2 * { text-decoration: none; }

/* naslovi u chatu: jači selektori (opšta pravila za naslove u #main su imala veću težinu) */
html:not(#z) #main .chin h1, html:not(#z) #main .chin h2, html:not(#z) #main .chtext h1, html:not(#z) #main .chtext h2, html:not(#z) #main .chmain h1, html:not(#z) #main .chmain h2 { background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; color: inherit !important; font-size: 1.2em !important; }
html:not(#z) #main .chin h1, html:not(#z) #main .chtext h1, html:not(#z) #main .chmain h1 { font-size: 1.45em !important; }

/* Moja nedelja: tabelica po danima */
.wkbox { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid #d3dcf2; border-radius: 12px; background: #f6f9ff; max-width: 760px; }
.wkbox .wkhd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .wkbox .wkhd b { font-size: 14px; color: #1f3a6b; }
.wkx { border-collapse: collapse; width: 100%; font-size: 12.5px; } .wkx th, .wkx td { padding: 4px 8px; text-align: center; border-bottom: 1px solid #e3ebfa; white-space: nowrap; }
.wkx th small { display: block; font-weight: 500; color: #7a88a6; font-size: 10.5px; } .wkx .wkl { text-align: left; font-weight: 700; color: #3b5b8f; } .wkx .wkt { background: #e3eeff; font-weight: 800; } .wkx .wkf { color: #b3bccf; }
.wkft { margin-top: 6px; font-weight: 700; } .wkft.minus { color: #b45f06; } .wkft.plus { color: #2f7a4a; } .wkft .muted { font-weight: 500; }

/* anketa u chatu */
.chpoll { margin: 4px 0 2px; min-width: 240px; max-width: 420px; } .chpoll .chpq { font-weight: 800; margin-bottom: 2px; } .chpoll .chpm { margin-bottom: 6px; }
.chpo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 3px 0; padding: 6px 10px; border: 1px solid rgba(60,90,150,.28); border-radius: 10px; background: rgba(255,255,255,.65); color: inherit !important; cursor: pointer; overflow: hidden; text-align: left; font: inherit; }
.chpo .chpbar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(59,120,231,.22); transition: width .25s; } .chpo.mine { border-color: #3b78e7; box-shadow: 0 0 0 1px #3b78e7 inset; } .chpo .chpt, .chpo .chpn { position: relative; } .chpo .chpn { font-size: 11.5px; font-weight: 700; white-space: nowrap; opacity: .8; }
.chpo:disabled { cursor: default; } .chpoll.closed { opacity: .85; } .chpoll .chpf { margin-top: 4px; } .chpoll .chpf a { color: inherit; text-decoration: underline; }

/* folder u listi: kucica na mestu ikonice (broj i naziv u liniji sa taskovima), ikonica iza naziva */ table.tlist tr.frow.numbered .sfpk { display: inline-flex !important; align-items: center; justify-content: center; } table.tlist tr.frow.numbered .sfico2 { flex: 0 0 auto !important; width: auto !important; }

/* ikonica foldera u listi: upadljivija */ html body table.tlist tr.frow.subfolder .sfico2 { color: color-mix(in srgb, var(--fc, #8aa4cf) 70%, #1f2a44) !important; } html body table.tlist tr.frow.subfolder .sfico2 svg { width: 24px !important; height: 24px !important; stroke-width: 2.2 !important; fill: color-mix(in srgb, var(--fc, #8aa4cf) 45%, #fff) !important; filter: drop-shadow(0 1px 1px rgba(30,50,90,.25)); }

/* naziv taska može u više redova (Alt+Enter) */ .ttitle { white-space: pre-line; } textarea[name=title] { font: inherit; }

/* podstavke taska */ .tcl { margin: 3px 0 2px; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; } .tcl .tclr { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 1px 4px; border-radius: 5px; max-width: 100%; } .tcl .tclr:hover { background: rgba(80,120,200,.10); } .tcl .tclr input { margin: 0; flex: none; } .tcl .tclr.dn span { text-decoration: line-through; color: #8a96ad; } .tcl .tclx { margin-left: 6px; color: #b44; font-style: normal; font-weight: 700; visibility: hidden; cursor: pointer; } .tcl .tclr:hover .tclx { visibility: visible; } .tcl .tcladd { font-size: 11.5px; color: #4a6fb0; text-decoration: none; padding: 1px 4px; } .tcl .tcladd:hover { text-decoration: underline; } .tcl .tclcnt { font-weight: 700; padding-left: 4px; }

/* cekirana podstavka: zelena */ .tcl .tclr.dn { background: #dff3e3 !important; } .tcl .tclr.dn span { color: #2f7d46 !important; } .tcl .tclr input { accent-color: #2f9d57; }

/* nazivi foldera i taskova mogu u vise redova (Alt+Enter) */ #side .node .nm, .sfname, .nwn, #content h2, .ttitle, .pchip2 { white-space: pre-line; }

/* podstavke kao grananje (kao ClickUp): vertikalna linija levo i kratka grana do svake stavke */ .tcl { position: relative; padding-left: 14px; margin-left: 6px; border-left: 2px solid #c3d0e6; gap: 3px; } .tcl .tclr, .tcl .tclnew { position: relative; } .tcl .tclr::before, .tcl .tclnew::before { content: ''; position: absolute; left: -14px; top: 50%; width: 12px; border-top: 2px solid #c3d0e6; } .tcl .tclnew input { font-size: 12.5px; padding: 2px 6px; min-width: 260px; border: 1px solid #9db4dc; border-radius: 6px; } .tcl .tcladd { position: relative; } .tcl .tcladd::before { content: ''; position: absolute; left: -14px; top: 50%; width: 12px; border-top: 2px dashed #c3d0e6; } .tcl .tclcnt { margin-left: -14px; }

/* novi red u nazivu (Alt+Enter) mora da se vidi i u listi: jaci selektori od ranijih pravila */ html body table.tlist td.tcell .ttitle, html body .ttitle[data-edit] { white-space: pre-line !important; } html body table.tlist td.sfcell .sfname, html body #side .node .nm, html body .sfrow .sfname { white-space: pre-line !important; }

.tcl .tclnew textarea { font: inherit; font-size: 12.5px; padding: 3px 6px; min-width: 260px; border: 1px solid #9db4dc; border-radius: 6px; resize: none; overflow: hidden; } .tcl .tclr span { white-space: pre-line; }

/* anketa u chatu: lepsa kartica */
html body .chpoll { margin: 6px 0 4px; min-width: 270px; max-width: 440px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.92); border: 1px solid rgba(59,120,231,.28); box-shadow: 0 3px 12px rgba(40,70,140,.14); color: #1d2a44 !important; }
html body .chpoll .chph { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: linear-gradient(135deg, #3b78e7, #7a5cf0); color: #fff; }
html body .chpoll .chpico { font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
html body .chpoll .chpq { font-weight: 800; font-size: 15px; margin: 0; color: #fff !important; background: none !important; padding: 0 !important; border: 0 !important; }
html body .chpoll .chpm { font-size: 11.5px; opacity: .88; margin: 1px 0 0; color: #fff !important; }
html body .chpoll .chpbody { padding: 10px 12px 4px; }
html body .chpo { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 7px; padding: 9px 12px; border: 1.5px solid #d3ddf0; border-radius: 12px; background: #f7f9fe; color: #1d2a44 !important; cursor: pointer; overflow: hidden; text-align: left; font: inherit; transition: border-color .15s, transform .1s; }
html body .chpo:hover:not(:disabled) { border-color: #3b78e7; transform: translateY(-1px); }
html body .chpo .chpbar { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(59,120,231,.20), rgba(122,92,240,.16)); transition: width .35s; }
html body .chpo.lead .chpbar { background: linear-gradient(90deg, rgba(46,170,90,.30), rgba(46,170,90,.14)); }
html body .chpo.mine { border-color: #3b78e7; background: #eaf1ff; box-shadow: none; }
html body .chpo .chpk { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #9fb2d8; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; }
html body .chpo .chpk.sq { border-radius: 6px; }
html body .chpo.mine .chpk { background: #3b78e7; border-color: #3b78e7; }
html body .chpo .chpt { position: relative; flex: 1; font-weight: 600; }
html body .chpo .chpn { position: relative; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; opacity: 1; }
html body .chpo .chpn b { font-size: 13px; } html body .chpo .chpn i { font-style: normal; font-size: 11px; color: #6a7a99; background: rgba(255,255,255,.8); border-radius: 999px; padding: 0 7px; }
html body .chpo:disabled { cursor: default; } html body .chpoll.closed { opacity: .9; filter: saturate(.7); }
html body .chpoll .chpf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 14px 11px; margin: 0; font-size: 11.5px; color: #5a6a8a; }
html body .chpoll .chpv { font-weight: 700; } html body .chpoll .chph2 { font-style: italic; }
html body .chpoll .chpcl { margin-left: auto; text-decoration: none; padding: 2px 10px; border: 1px solid #c3d0e6; border-radius: 999px; background: #fff; color: #3b5ea8 !important; font-weight: 600; } html body .chpoll .chpcl:hover { background: #eaf1ff; }

/* anketa: malo nize od imena, lepsa ikonica */
html body .chpoll { margin-top: 12px; }
html body .chpoll .chpico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.95); color: #5b4ae0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(20,20,80,.25); filter: none; }
html body .chpoll .chpico svg { width: 22px; height: 22px; stroke: url(#none); stroke: currentColor; }

/* podstavke: izmena i brisanje uvek vidljivi pored stavke */
.tcl .tclbt { display: inline-flex; gap: 4px; margin-left: 8px; flex: none; }
.tcl .tclbt i { font-style: normal; font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 6px; border: 1px solid #d3ddf0; background: #fff; cursor: pointer; visibility: visible !important; margin: 0 !important; opacity: .85; }
.tcl .tclbt .tcle { color: #3b5ea8; } .tcl .tclbt .tclx { color: #c0392b; font-weight: 400; }
.tcl .tclbt i:hover { opacity: 1; background: #eef3ff; } .tcl .tclbt .tclx:hover { background: #fdecea; }
.tcl .tcled { font: inherit; font-size: 12.5px; padding: 3px 6px; min-width: 260px; border: 1px solid #9db4dc; border-radius: 6px; resize: none; overflow: hidden; }

/* podstavke i u otvorenom tasku: kucica levo, pa tekst, pa izmeni / obrisi (opsta pravila za label ih lome) */
html body .tcl label.tclr { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: auto !important; max-width: 100%; margin: 0 !important; padding: 3px 6px !important; font-size: 13px !important; font-weight: 500 !important; color: #1d2a44 !important; line-height: 1.3; }
html body .tcl label.tclr input[type=checkbox] { width: 16px !important; height: 16px !important; min-width: 16px; margin: 0 !important; padding: 0 !important; flex: none !important; position: static !important; }
html body .tcl label.tclr > span:not(.tclbt) { flex: 0 1 auto !important; display: inline !important; margin: 0 !important; color: inherit !important; }
html body .tcl label.tclr.dn > span:not(.tclbt) { color: #2f7d46 !important; text-decoration: line-through; }
html body .tcl label.tclr .tclbt { margin-left: 8px !important; display: inline-flex !important; flex-direction: row !important; }
html body .tcl { align-items: flex-start !important; }

/* olovka (izmena naziva) pored naziva taska */
.tpen { font-style: normal; font-size: 12px; line-height: 1; padding: 3px 5px; margin-left: 6px; border-radius: 6px; border: 1px solid #d3ddf0; background: #fff; color: #3b5ea8; cursor: pointer; opacity: .75; flex: none; } .tpen:hover { opacity: 1; background: #eef3ff; }

/* prevlacenje podstavki */
.tcl .tclr[draggable=true] { cursor: grab; } .tcl .tclr.dr-above { box-shadow: 0 -3px 0 0 #3b78e7; } .tcl .tclr.dr-below { box-shadow: 0 3px 0 0 #3b78e7; }

/* podstavka: okrugla zelena kvacica (gotovo), da se razlikuje od kvadratne kucice za izbor taska */
html body .tcl label.tclr input[type=checkbox] { -webkit-appearance: none !important; appearance: none !important; width: 19px !important; height: 19px !important; min-width: 19px !important; border: 2px solid #4aa86b !important; border-radius: 50% !important; background: #fff !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; position: relative !important; box-shadow: none !important; }
html body .tcl label.tclr input[type=checkbox]:hover { background: #e3f6ea !important; }
html body .tcl label.tclr input[type=checkbox]:checked { background: #2f9d57 !important; border-color: #2f9d57 !important; }
html body .tcl label.tclr input[type=checkbox]:checked::after { content: '\2713'; color: #fff; font-size: 12px; font-weight: 900; line-height: 1; }

/* traka sa alatkama u listi taskova: manja */
.sec > .bar.tbar { gap: 6px; margin-bottom: 4px; }
.sec > .bar.tbar button, .sec > .bar.tbar select, .sec > .bar.tbar input { font-size: 12px !important; min-height: 0 !important; height: 28px !important; padding-top: 2px !important; padding-bottom: 2px !important; }
.sec > .bar.tbar .seg button { padding-left: 9px !important; padding-right: 9px !important; }
.sec > .bar.tbar #q { max-width: 150px; }

/* završeni termini sastanka ispod taska: svoja ikonica, bez kvačice */
.tocc{margin:6px 0 2px;padding-left:4px;border-left:2px solid var(--line,#d9dee7)}
.tocr{display:flex;align-items:center;gap:8px;padding:2px 6px;font-size:12.5px;line-height:1.35}
.tocr .occi{display:inline-flex;color:#2f7d6b}
.tocr .occd{font-weight:600;text-decoration:none;color:inherit}
.tocr .occd:hover{text-decoration:underline}
.tocr .occt{color:#555;font-variant-numeric:tabular-nums}
.tocr .occp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tocr .tpen{opacity:.55}
.tocr:hover .tpen{opacity:1}

.tocr{cursor:pointer;border-radius:6px}
.tocr:hover{background:rgba(47,125,107,.10)}

/* završeni termini: ugnježdeni „task u tasku“, naslagani ispod glavnog sastanka */
.tocc{margin:8px 0 2px 14px;padding-left:12px;border-left:2px solid #2f7d6b55}
.tocc .tocr{display:block;position:relative;margin:6px 0;padding:6px 10px;border:1px solid #2f7d6b40;border-radius:10px;background:rgba(255,255,255,.7);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tocc .tocr::before{content:"";position:absolute;left:-12px;top:18px;width:12px;border-top:2px solid #2f7d6b55}
.tocc .tocr .occh{display:flex;align-items:center;gap:8px}
.tocc .tocr .occd{font-weight:700}
.tocc .tocr .occs{font-size:11px;padding:1px 8px}
.tocc .tocr .tpen{margin-left:auto}
.tocc .tocr .occpp{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tocc .tocr .occchip{font-size:11.5px;padding:1px 8px;border-radius:999px;background:#eef1f6;border:1px solid #d5dbe6}

/* glavni red sastanka koji se ponavlja: sledeći termin i ko dolazi */
.tnext{margin:6px 0 4px;padding:6px 10px;border:1px dashed #2f7d6b66;border-radius:10px;background:rgba(47,125,107,.06)}
.tnext .tnp{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:4px}
.tnext .tnp .chk{font-size:12px;margin:0}

.tnext .tnset{margin-left:6px;padding:1px 8px;font-size:11.5px}

/* prethodni sastanci: skriveni dok se ne otvore */
.toccd{margin:6px 0 2px}
.toccd>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:#2f7d6b;list-style:revert}
.tnext [data-nnp]{margin-top:4px}

/* birač „ko dolazi“ u glavnom redu: gust, samo ime i ✕ */
[data-nnp] .ppbox{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
[data-nnp] .ppchips{display:flex;flex-wrap:wrap;gap:4px 6px}
[data-nnp] .ppchip{padding:1px 8px;font-size:12px;line-height:1.5;display:inline-flex;align-items:center;gap:5px}
[data-nnp] .ppchip > :not(b):not(i){display:none}
[data-nnp] .ppadd{padding:1px 8px;font-size:12px}

/* „ko dolazi“: ime + samo kancelarija (bez discipline), sitno i čitljivo */
[data-nnp] .ppchip{font-size:11.5px;padding:0 6px 0 8px;gap:4px;line-height:1.6}
[data-nnp] .ppchip > b{font-weight:600;font-size:11.5px}
[data-nnp] .ppchip > .chip{display:inline-block;font-size:10px;padding:0 5px;line-height:1.5;opacity:.85}
[data-nnp] .ppchip > .chip + .chip{display:none}
[data-nnp] .ppchip > i{font-size:11px}
/* prethodni sastanci: grana ispod sastanka, padajuća */
.toccd{margin:6px 0 2px 14px;padding-left:12px;border-left:2px solid #2f7d6b55;position:relative}
.toccd>summary::marker{color:#2f7d6b}
.toccd .tocc{margin-left:0;border-left:0;padding-left:0}
.toccd .tocc .tocr::before{display:none}

/* sledeći sastanak je deo taska (bez posebne kutije); Podešavanja gore desno */
.tnext{border:0;background:none;padding:0;margin:4px 0 2px}
td.tcell .tline .tnset{margin-left:auto;flex:none;padding:1px 8px;font-size:11.5px}

/* prethodni sastanci: jedan red po datumu, klik ulazi u sastanak */
.toccd .tocc .tocr{display:block;margin:3px 0;padding:4px 10px}
.toccd .tocc .tocr .occh{gap:10px}

/* kancelarija/lokacija sastanka je u istoj liniji kao naziv */
td.tcell .tline .tloc{margin:0 0 0 4px;white-space:nowrap;flex:none}

/* naziv + olovka (preimenovanje) uz naziv; desno: kancelarija pa ispod nje vrsta („Sastanak“) */
td.tcell .tline > .ttitle{margin-right:0}
td.tcell .tline .tright{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
td.tcell .tline .tright .tloc{margin:0}

td.tcell .tline .tnh{margin-left:12px;font-size:12.5px;white-space:nowrap;flex:none}
.tnext{margin-top:4px}

/* kolona Izvršilac: birač „ko dolazi“ gust, samo ime (kancelarija je već u liniji sa nazivom) */
td [data-nnp] .ppchip > .chip{display:none !important}
td [data-nnp] .ppchips{display:flex;flex-wrap:wrap;gap:3px 4px}
td [data-nnp] .ppchip{padding:0 6px 0 8px;font-size:11px;line-height:1.5;white-space:nowrap;width:auto;max-width:100%}
td [data-nnp] .ppchip > b{font-size:11px;font-weight:600;white-space:nowrap}
td [data-nnp] .ppbox{display:block}
td [data-nnp] .ppadd{margin-bottom:4px}

/* desno: „Sastanak“ gore, kancelarija ispod (u ravni sa levim tekstom) */
td.tcell .tline .tright{justify-content:center;gap:2px}

/* „Sastanak“ (vrsta taska) je u gornjem desnom uglu ćelije; kancelarija ostaje u ravni sa tekstom levo */
td.tcell .tline{position:relative}
td.tcell .tline:has(.tright .pill){padding-top:20px}
td.tcell .tline .tright{display:contents}
td.tcell .tline .tright .pill{position:absolute;top:0;right:0}
td.tcell .tline .tright .tloc{margin-left:auto;flex:none}

/* „napravio/la“ je dole desno u dnu reda taska */
td.tcell{position:relative}
td.tcell:has(.tcreator){padding-bottom:24px !important}
td.tcell .tcreator{position:absolute;right:10px;bottom:5px;margin:0 !important}

/* „Sastanak“ uvek u gornjem desnom uglu cele ćelije (ne u sredini visokog reda) */
td.tcell .tline{position:static}
td.tcell .tline:has(.tright .pill){padding-top:0}
td.tcell .tline .tright .pill{position:absolute;top:6px;right:10px}

/* kancelarija/lokacija uvek skroz desno: tekst „Sledeći sastanak“ upija slobodan prostor */
td.tcell .tline .tnh{flex:1 1 auto !important}
td.tcell .tline .tright .tloc{margin-left:0 !important}
/* lokacija odmah ispod „Sastanak“ (gore desno) */
td.tcell .tline:has(.tright .pill) .tright .tloc{position:absolute;top:30px;right:10px;margin:0 !important}
td.tcell .tline:has(.tright .pill) .tnh{padding-right:0}
/* levi meni: početak kućica ispod discipline je u boji faze (malo deblja traka); pozadina ostaje po disciplini */
aside .node:is(.d3, .d4, .d5)[style*="--pc"] { border-left: 11px solid var(--pc); }
/* jača gradacija u hijerarhiji: svaki nivo je vidljivo svetliji od nivoa iznad (pozadina kućica i u glavnoj strukturi i u levom drvetu) */
html body .box { background: color-mix(in srgb, var(--c) calc(88% - var(--lvl) * 12%), var(--panel)); }
html body aside .node.d3 { background: color-mix(in srgb, var(--c) 76%, var(--panel)); }
html body aside .node.d4 { background: color-mix(in srgb, var(--c) 60%, var(--panel)); }
html body aside .node.d5 { background: color-mix(in srgb, var(--c) 46%, var(--panel)); }
/* dve trake boja (spoljna = faza, unutrašnja = disciplina) i u listi foldera i na kanban karticama, kao kod taskova */
table.tlist tr.frow.subfolder[style*="--fd"] > td.sfcell { border-left: 0 !important; box-shadow: inset 13px 0 0 var(--fp), inset 20px 0 0 var(--fd) !important; padding-left: 30px !important; }
.kcard[style*="--fd"] { border-left: 0 !important; box-shadow: inset 13px 0 0 var(--fp), inset 20px 0 0 var(--fd) !important; padding-left: 30px !important; }
/* noćni režim: trake faze i discipline levo od taskova / foldera / kartica su IDENTIČNE bojama u levom drvetu (isti filter kao na drvetu), bez providnosti */
html.dark td.tcell[style*="--fd"], html.dark table.tlist tr.frow.subfolder[style*="--fd"] > td.sfcell, html.dark .kcard[style*="--fd"] { box-shadow: none !important; position: relative; }
html.dark td.tcell[style*="--fd"]::before, html.dark table.tlist tr.frow.subfolder[style*="--fd"] > td.sfcell::before, html.dark .kcard[style*="--fd"]::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, var(--fp) 0 13px, var(--fd) 13px 20px);
  filter: invert(1) hue-rotate(180deg) saturate(1) brightness(.92);
}
html.dark .kcard[style*="--fd"]::before { border-radius: 8px 0 0 8px; }
/* taskovi: dve linije levo, spoljna = faza, unutrašnja = disciplina */
td.tcell[style*="--fd"] { box-shadow: inset 13px 0 0 var(--fp), inset 20px 0 0 var(--fd) !important; padding-left: 30px !important; }
/* noćni režim: slike (profili, prilozi) su ORIGINALNE, kao u svetlom režimu: tačan inverz filtera cele stranice (invert .92 → hue 180 → saturate 1.8 → brightness 1.06) */
html.dark img[data-dk] { filter: none !important; }   /* slike su preračunate u skripti (app.js), pa se filter noćnog režima na njima samo poništava */
/* noćni režim: iza logoa nema bele podloge, ostaju samo plava slova i znak na tamnoj pozadini */
html.dark header .brand { background: transparent !important; }
html.dark header .brand img { background: transparent !important; }
/* noćni režim: folderi (levo drvo, kućice u strukturi, zaglavlje foldera) zadržavaju boje iz svetlog režima; filter noćnog režima se na njima poništava (samo na spoljnom elementu, da se ugnježdeni ne poništavaju dvaput) */
html.dark #side .node { filter: invert(1) hue-rotate(180deg) saturate(1) brightness(.92); }
/* izabrani folder u levom drvetu jasno se vidi i u noćnom režimu: bela debela ivica i svetli oreol (boje su zadate crno, jer ih filter na čvoru obrće u belo) */
/* noćni režim: pozadina redova u levom drvetu je ista kao u svetlom režimu (isti procenti boje), da boje budu identične */
/* tekst u drvetu je uvek tamno-plav (ili beo na tamnim bojama): jasan kontrast */
html.dark #side .node:not(.sel):not([style*="--tx"]) :is(.nm, .cd, .tw) { color: #14213b !important; text-shadow: none; }
html.dark #side .node:not(.sel):not([style*="--tx"]) .cd { opacity: .85; }
/* izabrani folder: jedini taman red u drvetu, beo podebljan tekst i bela ivica (filter na čvoru poništava filter stranice, pa su ovo stvarne boje) */
html.dark #side .node.sel { background: #14213b !important; outline: 3px solid #fff !important; outline-offset: -1px; box-shadow: 0 0 0 3px #14213b, 0 0 14px 3px rgba(255,255,255,.55) !important; position: relative; z-index: 2; }
html.dark #side .node.sel :is(.nm, .cd, .tw) { color: #fff !important; opacity: 1; }
html.dark #side .node.sel .nm { font-weight: 900 !important; }
/* veliki prozori desno (zaglavlje foldera i kućice strukture) u noćnom režimu: boje su IDENTIČNE onima u levom drvetu (filter noćnog režima se poništava, kao kod drveta), uz blagu providnost */
html.dark .box:not(.box .box), html.dark .phead { filter: invert(1) hue-rotate(180deg) saturate(1) brightness(.92); }
html.dark .phead :is(.pill, .lvlchip, .codechip, .chip, .pchip2, .pchip, .vchip, .fdot, img, input[type=color]) { filter: none; }
html.dark .box .box { filter: none; }
html.dark .box:not(.box .box) { background: color-mix(in srgb, var(--c) 84%, transparent) !important; }
html.dark .box .box { background: color-mix(in srgb, var(--c) calc(84% - var(--lvl) * 10%), transparent) !important; }
html.dark .phead { background: color-mix(in srgb, var(--c) 66%, transparent) !important; }
html.dark .phead h2 { background: color-mix(in srgb, var(--c) 70%, transparent) !important; }
html.dark .phead :is(.pdesc, .pdesc *, .crumbs, .crumbs *, .crumb, .branchhint, .muted, .pdtoggle, .ptotal, .ptotal *, .lockchip, .small, .psep, a:not(.btn)) { color: #05080f !important; opacity: 1 !important; text-shadow: none; }
html.dark .box:not(.box .box) :is(small, .bh small) { color: #3a4864 !important; }
/* svaki iskačući prozor (potvrde, izbori, forme) uvek je iznad svega ostalog; obaveštenje i traka AA/aa/Aa su još iznad njega */
.overlay { z-index: 2147483300 !important; }
.toast { z-index: 2147483500 !important; }
#caseBar { z-index: 2147483400 !important; }
.callring { z-index: 2147483450 !important; }   /* dolazni poziv je iznad svega, i iznad prozora */
.ctxmenu, #chPop { z-index: 2147483350 !important; }   /* meniji i izbori u prozorima ostaju vidljivi iznad prozora */
/* panel „Rokovi“: forma za novi rok je složena u redove, a dugme „Dodaj rok“ je uvek vidljivo (ranije je bilo belo na belom) */
.dlpanel .dtadd { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; align-items: stretch; }
.dlpanel .dtadd input { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
.dlpanel .dtadd [data-dlt] { grid-column: 1 / -1; }
.dlpanel .dtadd .dwrap { display: block; min-width: 0; }
.dlpanel .dtadd .dwrap > input[type=date] { width: 100% !important; min-width: 0 !important; }
.dlpanel .dtadd [data-dln] { grid-column: 1 / -1; }
.dlpanel .dtadd button[data-dladd], .dlpanel button.primary { grid-column: 1 / -1; background: #3f78ad !important; color: #fff !important; border: 1px solid #3f78ad !important; border-radius: 10px; padding: 9px 14px !important; font-size: 14px !important; font-weight: 700; cursor: pointer; opacity: 1 !important; text-shadow: none !important; }
.dlpanel .dtadd button[data-dladd]:hover { background: #2f6396 !important; }
.dlpanel .dtadd button[data-dladd] { min-height: 40px; line-height: 1.3 !important; height: auto !important; overflow: visible; }
/* polje za datum: ikonica kalendara je veća i jasna, cela površina polja je klikabilna */
.dwrap { cursor: pointer; }
.dwrap > input[type=date] { cursor: pointer; padding-right: 40px !important; }
.dwrap > input[type=date]::-webkit-calendar-picker-indicator { width: 22px !important; height: 22px !important; right: 12px !important; opacity: 1 !important; cursor: pointer; }
/* tamna boja foldera (npr. crna): tekst preko nje je beo, svuda (drvo, zaglavlje, kućice) */
aside .node[style*="--tx"], aside .node[style*="--tx"] :is(.nm, .cd, .tw, .hg) { color: var(--tx) !important; }
/* nazivi foldera u levom drvetu su crni (čitljivo na svim bojama); beli samo na vrlo tamnim bojama i na izabranom folderu */
html:not(.dark) #side .node:not(.sel):not([style*="--tx"]) .nm { color: #0a0f1a !important; }
.phead[style*="--tx"] .lvlchip { color: var(--tx) !important; }
#main .phead[style*="--tx"] h2 { background: var(--c) !important; color: var(--tx) !important; }
#main .phead[style*="--tx"] { background: color-mix(in srgb, var(--c) 12%, #fff) !important; }
.box[style*="--tx"] > .bh, .box[style*="--tx"] > .bh :is(span, small) { color: var(--tx) !important; }
/* isto i u glavnoj strukturi: leva traka kućica ispod discipline je u boji faze, deblja; okvir i pozadina ostaju po disciplini */
.box:is([data-d="3"], [data-d="4"], [data-d="5"])[style*="--pc"] { border-left: 9px solid var(--pc); }
/* putanja (folder) stoji odmah ispod naziva taska, pa tek onda podstavke; poravnata sa ostalim redom ispod naslova */
table.tlist tr.task td.tcell:has(.fpick) .tpath { margin-left: 57px; }
table.tlist tr.task td.tcell:not(:has(.fpick)) .tpath { margin-left: 30px; }
td.tcell .tpath.small { margin-top: 2px; margin-bottom: 3px; }
/* levi meni: kad je prozor nizak, ikonice i okrugla dugmad (kalkulator, misao, igra) se smanjuju zajedno sa prozorom i ne upadaju jedna u drugu */
body.rail:not(.compact) { --rb: clamp(22px, 4vh, 34px); --rgap: clamp(4px, .7vh, 8px); }
body.rail:not(.compact) #rail { padding-top: clamp(4px, 1.2vh, 12px); padding-bottom: calc(12px + 3 * (var(--rb) + var(--rgap)) + 6px); gap: clamp(1px, .5vh, 4px); }
body.rail:not(.compact) #rail button { padding: clamp(3px, .9vh, 8px) 2px clamp(2px, .7vh, 6px); font-size: clamp(8.5px, 1.35vh, 10.5px); gap: clamp(1px, .3vh, 3px); }
body.rail:not(.compact) #rail button svg { width: clamp(16px, 2.7vh, 24px); height: clamp(16px, 2.7vh, 24px); }
body.rail:not(.compact) #calcBtn, body.rail:not(.compact) #quoteBtn, body.rail:not(.compact) #gameBtn { width: var(--rb) !important; height: var(--rb) !important; left: calc((78px - var(--rb)) / 2) !important; }
body.rail:not(.compact) #calcBtn svg, body.rail:not(.compact) #quoteBtn svg, body.rail:not(.compact) #gameBtn svg { width: calc(var(--rb) * .5); height: calc(var(--rb) * .5); }
body.rail:not(.compact) #calcBtn { bottom: 12px !important; }
body.rail:not(.compact) #quoteBtn { bottom: calc(12px + var(--rb) + var(--rgap)) !important; }
body.rail:not(.compact) #gameBtn { bottom: calc(12px + 2 * (var(--rb) + var(--rgap))) !important; }
/* ko deli ekran: veliki natpis na prikazu (vidi se i preko celog ekrana) i traka gore kod onoga ko deli */
.callshare { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 7px 14px; border-radius: 10px; background: rgba(224,36,60,.92); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,.4); pointer-events: none; } .callshare.mine { background: rgba(31,42,68,.92); }
.sharetop { position: fixed; left: 50%; top: 0; transform: translateX(-50%); z-index: 100001; display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 16px; border-radius: 0 0 14px 14px; background: #e0243c; color: #fff; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.4); } .sharetop button { cursor: pointer; border: 0; border-radius: 12px; padding: 5px 12px; font-weight: 700; }
body.sharingscreen .ctlbanner { top: 48px; }
/* daljinsko upravljanje u pozivu */
.calltctl { position: absolute; left: 10px; bottom: 10px; z-index: 3; border: 0; border-radius: 18px; padding: 7px 14px; background: #2f7dd1; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .calltctl:disabled { background: #6b7a99; cursor: default; }
.calltctl.hidden { display: none; }
.calltile.ctling { outline: 3px solid #2f7dd1; outline-offset: -3px; cursor: crosshair; }
.ctlbar { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(31,42,68,.9); color: #fff; font-size: 13px; } .ctlbar span { flex: 1; } .ctlbar button { cursor: pointer; }
.ctlbanner { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 100000; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; border-radius: 22px; background: #e0243c; color: #fff; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.4); } .ctlbanner button { cursor: pointer; border: 0; border-radius: 14px; padding: 5px 12px; font-weight: 700; }
/* status uvek na sredini kolone (i po visini reda) */
table.tlist tr.task > td:nth-child(2){text-align:center;vertical-align:middle}

/* dugi nazivi u levom meniju (Rokovi i sastanci) idu u 2 reda */
#rail button, body:not(.rail) #tabs button[data-g] { text-align: center; line-height: 1.15; white-space: normal; }
#rail button[data-k="deadlines"] { padding-left: 1px; padding-right: 1px; }

#dlSec button { display: inline-flex; align-items: center; gap: 7px; }
#dlSec .dlico { width: 18px; height: 18px; flex: none; }

/* ikonica kalendara kod svih datuma uvek vidljiva (boja polja je providna zbog dd.mm.gggg. oznake) */
.dwrap > input[type=date]::-webkit-calendar-picker-indicator { color: #3b5b8f !important; -webkit-text-fill-color: #3b5b8f !important; opacity: .9 !important; }

/* izmena podstavke: polje zauzima širinu reda i raste uz tekst */
.tcl .tclr .tcled, .tcl .tclnew textarea { flex: 1 1 auto; width: min(100%, 760px) !important; box-sizing: border-box; min-height: 30px; overflow: hidden !important; resize: none; line-height: 1.35; }
html body .tcl label.tclr.editing { width: 100% !important; }
html body .tcl label.tclr.editing .tcled { width: 100% !important; max-width: 760px; }

.chgrpbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; } .chgrpb { cursor: pointer; }

.chgrpbar { gap: 8px; flex-wrap: wrap; } .chgrps { width: auto; max-width: 100%; min-width: 0; margin: 0; padding: 4px 8px; font-size: 12.5px; border-radius: 8px; }

.chgrpbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; } .chgrpbar .chgrpb { font-size: 13.5px; padding: 6px 12px; } .chgrpbar .chgrps { flex: 1 1 100%; width: 100%; font-size: 14px; padding: 7px 10px; } .chgrpbar .chgrps + .chgrps { margin-top: 0; }
.chpick label { font-size: 14px; }

.chgrpsel { align-items: flex-start; } .chdd { flex: 1 1 100%; border: 1px solid #cfd9ec; border-radius: 8px; background: #fff; } .chdd > summary { cursor: pointer; padding: 7px 10px; font-size: 14px; font-weight: 600; color: #2d4a7a; list-style: none; } .chdd > summary::after { content: '  ▾'; } .chdd[open] > summary { border-bottom: 1px solid #e3e9f5; } .chddl { max-height: 150px; overflow: auto; padding: 4px 8px; } .chddl label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 0; font-size: 14px; font-weight: 500; } .chddl input { width: auto; margin: 0; }

.chselcnt { display: inline-block; margin: 6px 0 4px; padding: 3px 10px; border-radius: 999px; background: #eef2fa; color: #5b6b8c; font-size: 13px; font-weight: 700; } .chselcnt.on { background: #dff3e3; color: #2f7d46; }
.chpickwrap .chpick { max-height: 200px; }
.overlay > form.card { max-height: 92vh; overflow-y: auto; }

.chmatch { font-weight: 800; color: #2f7d46; font-size: 14px; }

/* obaveštenje u chatu: oznaka počinje niže, ne naleže na ime pošiljaoca */
.chmsg.ann .chwrap > .chmain { margin-top: 8px; padding-top: 8px; }
.chmsg.ann .chann { margin: 2px 0 8px !important; line-height: 1.3; }

/* neko je u pozivu: plavi prsten oko tačke statusa */
.stdot.incall { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f7dd1; animation: incallp 1.6s infinite; } @keyframes incallp { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(47,125,209,.35); } }

/* mali prozor: kad dugmad ne stanu u zaglavlje, prelamaju se u drugi red i zaglavlje raste (ne preklapa red sa taskom) */
body.compact .cmp-head { height: auto; align-items: flex-start; }
body.compact .cmp-head .cmp-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; row-gap: 4px; }

/* grupe podstavki: naslov grupe i uvučene podstavke ispod njega */
.tcl .tclr.tclh { background: #e3ebfb !important; border-left: 4px solid #3b6db3; border-radius: 6px; margin-top: 8px; padding-left: 8px; }
.tcl .tclr.tclh span:not(.tclbt) { font-weight: 800 !important; color: #23407a !important; letter-spacing: .2px; }
.tcl .tclr.tclh::before, .tcl .tclr.tclh::after { display: none !important; }
.tcl .tclr.ingrp { margin-left: 14px; }

/* stablo foldera: mesto za strelicu je uvek iste širine (i kad folder nema podfoldere), pa strelica ide uvek levo, a tekst svih redova počinje na istom mestu */
html body aside .node .tw { width: 20px !important; min-width: 20px !important; flex: none !important; text-align: center; display: inline-block; }

/* sve liste taskova: leve dve linije (spoljna = faza, unutrašnja = disciplina), isto kao u projektima */
td.lns[style*="--fd"] { box-shadow: inset 13px 0 0 var(--fp), inset 20px 0 0 var(--fd) !important; padding-left: 30px !important; }

/* noćni režim: iste trake i u ostalim listama taskova (Statistika, Zahtevi), identične bojama u levom drvetu */
html.dark td.lns[style*="--fd"] { box-shadow: none !important; position: relative; }
html.dark td.lns[style*="--fd"]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; pointer-events: none; z-index: 1; background: linear-gradient(90deg, var(--fp) 0 13px, var(--fd) 13px 20px); filter: invert(1) hue-rotate(180deg) saturate(1) brightness(.92); }

.tocc .tocr .tpen.tpdel { margin-left: 6px; }


/* PRAVILO: tekstovi, simboli i ikonice se nikad ne preklapaju. Oznake gore desno („Sastanak“, kancelarija) rezervišu svoj prostor, a „Sledeći sastanak“ ide u novi red kad nema mesta */
td.tcell .tline:has(.tright .pill) { padding-right: 165px; flex-wrap: wrap; }
td.tcell .tline:has(.tright .pill) .tnh { flex: 1 1 100% !important; margin-left: 0 !important; white-space: normal !important; }

/* Statistika › lista taskova: status i prioritet uvek u sredini svoje kolone */
#board table th:nth-child(1), #board table td:nth-child(1), #board table th:nth-child(3), #board table td:nth-child(3) { text-align: center !important; }

/* Članovi projekta: vidljiva strelica za padajući meni */
details#mdet > summary.msum { list-style: none; }
details#mdet > summary.msum::-webkit-details-marker { display: none; }
details#mdet > summary.msum::before { content: '▸'; font-size: 17px; line-height: 1; color: #2f6bd8; margin-right: 2px; }
details#mdet[open] > summary.msum::before { content: '▾'; }
details#mdet select.mrole { font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 8px; border: 1px solid #c4d0e6; cursor: pointer; }

/* levi meni: okrugla dugmad (kalkulator, misao, igra) su manja i podignuta iznad oznake verzije, pa se ništa ne preklapa */
body.rail:not(.compact) { --rb: clamp(20px, 3.4vh, 28px); --rgap: clamp(4px, .6vh, 7px); }
body.rail:not(.compact) #rail { padding-bottom: calc(20px + 3 * (var(--rb) + var(--rgap)) + 6px); }
body.rail:not(.compact) #calcBtn { bottom: 22px !important; }
body.rail:not(.compact) #quoteBtn { bottom: calc(22px + var(--rb) + var(--rgap)) !important; }
body.rail:not(.compact) #gameBtn { bottom: calc(22px + 2 * (var(--rb) + var(--rgap))) !important; }
body.rail #verTag { bottom: 3px; line-height: 1; }

/* noćni režim: trake faze i discipline na taskovima crtaju se preko ::after, jer je ::before prve ćelije reda taska ugašen (broj taska) */
html.dark td.tcell[style*="--fd"]::after, html.dark td.lns[style*="--fd"]::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; pointer-events: none; z-index: 1; background: linear-gradient(90deg, var(--fp) 0 13px, var(--fd) 13px 20px); filter: invert(1) hue-rotate(180deg) saturate(1) brightness(.92); }

.cmp-now #cmpItemDone { grid-column: 2; grid-row: 2; justify-self: start; width: 30px; height: 30px; }


/* mali prozor: stavka (podstavka) taska ide odmah ispod izbora taska, a komentar ispod nje; dugme ✓ (stavka je gotova) desno od izbora stavke */
.cmp-now { grid-template-rows: auto auto auto auto !important; }
.cmp-now #cmpItem { grid-column: 1 !important; grid-row: 2 !important; width: 100%; border-radius: 18px; border: 0; padding: 7px 14px; background: #fff; color: #22364d; min-width: 0; }
.cmp-now #cmpItemDone { grid-column: 2 !important; grid-row: 2 !important; justify-self: start; width: 30px; height: 30px; }
.cmp-now #cmpNote { grid-row: 3 !important; }
.cmp-now .cmp-ctrls { grid-row: 4 !important; }
.cmp-now .cmp-week { grid-row: 3 / span 2 !important; }

/* dugme ✓ (stavka je gotova): zeleni krug sa belom kvačicom, jasno vidljiv */
.cmp-now #cmpItemDone { background: linear-gradient(135deg, #5cc489, #2f9e62) !important; border: 2px solid #fff !important; color: #fff !important; font-size: 17px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.cmp-now #cmpItemDone:hover { filter: brightness(1.08); }

/* mali prozor: stavka i dugme ✓ su u istom redu (flex), levo od sata, da se ne preklapaju sa satom */
.cmp-now > .cmp-row:has(#cmpItem) { display: flex !important; grid-column: 1 !important; grid-row: 2 !important; gap: 6px; align-items: center; min-width: 0; }
.cmp-now > .cmp-row:has(#cmpItem)[hidden] { display: none !important; }
.cmp-now #cmpItem { grid-column: auto !important; grid-row: auto !important; flex: 1 1 auto; width: auto !important; min-width: 0; }
.cmp-now #cmpItemDone { grid-column: auto !important; grid-row: auto !important; flex: none; justify-self: auto; }

/* mali prozor: ako task NEMA podstavke, komentar je u drugom redu (u ravni sa vremenom); treći red postoji samo kad task ima stavke */
.cmp-now:not(:has(> .cmp-row:not([hidden]) > #cmpItem)) { grid-template-rows: auto auto auto !important; }
.cmp-now:not(:has(> .cmp-row:not([hidden]) > #cmpItem)) #cmpNote { grid-row: 2 !important; }
.cmp-now:not(:has(> .cmp-row:not([hidden]) > #cmpItem)) .cmp-ctrls { grid-row: 3 !important; }
.cmp-now:not(:has(> .cmp-row:not([hidden]) > #cmpItem)) .cmp-week { grid-row: 2 / span 2 !important; }