/* AI Budućnost CRM — tamno, iste boje kao sajt. Telefon je prvi: Sava zove sa telefona. */
:root {
  --bg: #08080a; --bg-2: #0f0f13; --bg-3: #16161c; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15);
  --text: #f2f2ee; --soft: #c9c9c2; --dim: #8d8d86;
  --acc: #FF7A3D; --acc-2: #E55A1F; --grad: linear-gradient(135deg, #FF7A3D, #E55A1F);
  --blue: #3B82F6; --blue-bg: rgba(59,130,246,.14); --blue-bd: rgba(59,130,246,.55);
  --red: #F05252; --red-bg: rgba(240,82,82,.12); --green: #22C55E;
  --f: -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--f); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acc); }
[hidden] { display: none !important; }
.gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.muted { color: var(--dim); }
.err { min-height: 18px; margin: 6px 0; color: var(--red); font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-3); cursor: pointer; text-decoration: none; color: var(--text); white-space: nowrap; }
.btn:hover { border-color: rgba(255,255,255,.3); }
.btn--fill { background: var(--grad); border-color: transparent; color: #fff; font-weight: 600; }
.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn--blue { background: var(--blue); border-color: transparent; color: #fff; font-weight: 600; }
.btn--wa { background: #1fa855; border-color: transparent; color: #fff; font-weight: 600; }
.btn--warn { border-color: rgba(240,82,82,.5); color: #ffb4b4; }
.btn:disabled { opacity: .5; cursor: default; }

.fld { display: block; margin-bottom: 10px; }
.fld > span { display: block; margin-bottom: 4px; font-size: 12px; color: var(--dim); }
.fld input, .fld select, .fld textarea, .search { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); outline: none; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .search:focus { border-color: var(--acc); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* prijava */
.gate { min-height: 100svh; display: grid; place-items: center; padding: 20px; background: radial-gradient(60% 60% at 50% 0%, rgba(229,90,31,.18), transparent 70%); }
.gate__box { width: min(100%, 380px); padding: 28px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--bg-2); }
.gate h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
.gate .btn { width: 100%; margin-top: 6px; padding: 12px; }

/* traka */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: rgba(8,8,10,.92); backdrop-filter: blur(12px); }
.bar__brand { font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 7px 12px; border-radius: 9px; color: var(--soft); text-decoration: none; font-weight: 500; white-space: nowrap; }
.tabs a[aria-current="page"] { background: var(--bg-3); color: #fff; }
.tabs i { font-style: normal; display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--acc-2); color: #fff; font-size: 11px; text-align: center; }
.tabs i:empty { display: none; }
.search { max-width: 280px; margin-left: auto; padding: 8px 12px; }
.bar__me { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-3); font-weight: 700; cursor: pointer; }
.filters { display: flex; align-items: center; gap: 6px; padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.filters button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 100px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); cursor: pointer; white-space: nowrap; font-size: 13px; }
.filters button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.filters__sp { flex: 1; }
.mine { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); font-size: 13px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--blue { background: var(--blue); } .dot--meta { background: #9ca3af; } .dot--manual { background: var(--acc); }
@media (max-width: 760px) {
  .bar { flex-wrap: wrap; gap: 8px; }
  .search { order: 5; max-width: none; flex-basis: 100%; margin: 0; }
  .bar [data-new] { margin-left: auto; padding: 7px 10px; }
  .bar__me { width: 32px; height: 32px; }
  .tabs a { padding: 7px 8px; }
  .bar__brand { font-size: 15px; }
}

/* kartice (zajedničko za tablu i Danas) */
.card { position: relative; display: block; width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); text-align: left; cursor: pointer; }
.card:hover { border-color: var(--line-2); }
.card--blue { background: var(--blue-bg); border-color: var(--blue-bd); }
.card--blue::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--blue); }
.card--meta { background: rgba(156,163,175,.06); }
.card--late { box-shadow: inset 0 0 0 1px var(--red); }
.card__top { display: flex; justify-content: space-between; gap: 8px; }
.card__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__age { flex: none; font-size: 11px; color: var(--dim); }
.card--late .card__age { color: var(--red); font-weight: 600; }
.card__sub { margin-top: 2px; color: var(--soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tag { padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.07); color: var(--soft); font-size: 11px; white-space: nowrap; }
.tag--blue { background: var(--blue); color: #fff; }
.tag--next { background: rgba(255,122,61,.15); color: #ffc9ad; }
.tag--late { background: var(--red-bg); color: #ffb4b4; }
.tag--owner { background: transparent; border: 1px solid var(--line-2); }

/* tabla */
.board { display: flex; gap: 12px; padding: 14px 16px 30px; overflow-x: auto; align-items: flex-start; min-height: calc(100svh - 120px); }
.col { flex: 0 0 272px; display: flex; flex-direction: column; max-height: calc(100svh - 150px); border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.col__h { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; font-weight: 650; border-bottom: 1px solid var(--line); }
.col__h span { color: var(--dim); font-weight: 500; font-size: 12px; }
.col__b { display: grid; gap: 8px; padding: 10px; overflow-y: auto; min-height: 60px; }
.col.is-over { border-color: var(--acc); background: rgba(255,122,61,.05); }
.card[draggable="true"] { cursor: grab; }
.card.is-drag { opacity: .4; }
@media (max-width: 760px) { .col { flex-basis: 84vw; max-height: none; } .board { scroll-snap-type: x mandatory; } .col { scroll-snap-align: start; } }

/* Danas */
.today { max-width: 760px; margin: 0 auto; padding: 16px; }
.today h2 { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 10px; font-size: 15px; }
.today h2:first-child { margin-top: 4px; }
.today h2 small { color: var(--dim); font-weight: 400; font-size: 12px; }
.today .list { display: grid; gap: 8px; }
.empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--dim); text-align: center; }

/* kartica leada (fioka) */
.drawer { position: fixed; z-index: 40; inset: 0; pointer-events: none; }
.drawer::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .2s; }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open::before { opacity: 1; }
.drawer__in { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 520px); overflow-y: auto; background: var(--bg-2); border-left: 1px solid var(--line-2); transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.7,.2,1); padding: 18px 18px 40px; padding-top: max(18px, env(safe-area-inset-top)); }
.drawer.is-open .drawer__in { transform: none; }
.d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.d-head h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.d-head .x { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; font-size: 18px; cursor: pointer; }
.d-src { margin: 6px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.d-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.d-actions .btn { padding: 11px 8px; }
.d-box { margin-top: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.d-box h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.d-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; margin: 0; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; word-break: break-word; }
.wa-list { display: grid; gap: 6px; margin-top: 8px; }
.wa-list button { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-3); cursor: pointer; }
.wa-list button b { display: block; font-size: 13px; }
.wa-list button span { color: var(--dim); font-size: 12px; }
.notes { display: grid; gap: 8px; margin-top: 10px; }
.note { padding: 9px 11px; border-radius: 10px; background: var(--bg-3); }
.note--system, .note--stage { background: transparent; border: 1px dashed var(--line); color: var(--soft); font-size: 13px; }
.note--call { border-left: 3px solid var(--acc); }
.note small { display: block; margin-bottom: 2px; color: var(--dim); font-size: 11px; }
.note p { margin: 0; white-space: pre-wrap; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.quick button { padding: 5px 10px; border-radius: 100px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); font-size: 12px; cursor: pointer; }

/* modal + toast */
.modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
.modal__box { width: min(100%, 560px); max-height: calc(100svh - 32px); overflow: auto; padding: 22px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--bg-2); }
.modal__box h2 { margin: 0 0 14px; font-size: 19px; }
@media (max-width: 560px) { .grid2, .d-row { grid-template-columns: 1fr; } .kv { grid-template-columns: 100px 1fr; } }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translate(-50%, 200px); opacity: 0; padding: 10px 16px; border-radius: 10px; background: #fff; color: #000; font-weight: 600; transition: transform .25s, opacity .25s; pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

.tgbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--blue-bd); background: var(--blue-bg); }
.tgbox span { color: var(--soft); font-size: 13px; flex: 1 1 220px; }

/* 26.10 — zadaci, šabloni, brojke (iz King Platforme) */
.trow { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; }
.trow:hover { border-color: var(--line-2); }
.trow--blue { border-color: var(--blue-bd); background: var(--blue-bg); }
.trow--late { box-shadow: inset 0 0 0 1px var(--red); }
.trow__when b { display: block; font-size: 15px; }
.trow--late .trow__when b { color: #ffb4b4; }
.trow__when span, .trow__what span { display: block; color: var(--dim); font-size: 12px; }
.trow__what { min-width: 0; }
.trow__what b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__what span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__act { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.trow__act button { padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--soft); font-size: 12px; cursor: pointer; white-space: nowrap; }
.trow__act button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.trow__act button[data-tdone] { border-color: rgba(34,197,94,.5); color: #b9f5cf; }
@media (max-width: 640px) { .trow { grid-template-columns: 58px 1fr; } .trow__act { grid-column: 1 / -1; justify-content: flex-start; } }
.dtask { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dtask:first-child { padding-top: 0; }
.dtask b { display: block; }
.dtask span { color: var(--dim); font-size: 12px; }
.dtask--late b { color: #ffb4b4; }
.addtask { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.seg { display: inline-flex; margin-bottom: 10px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.seg button { padding: 7px 12px; border: 0; background: transparent; color: var(--soft); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: #000; font-weight: 600; }
.quick__go { margin-left: auto; border-color: var(--acc) !important; color: #fff !important; background: rgba(255,122,61,.15) !important; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chips button { padding: 6px 11px; border-radius: 100px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); cursor: pointer; font-size: 13px; }
.chips button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.modal textarea { font-size: 14px; line-height: 1.5; }
.col__copy { margin: 0 10px 10px; padding: 8px; border-radius: 10px; border: 1px dashed var(--line-2); background: transparent; color: var(--soft); cursor: pointer; }
.col__copy:hover { color: #fff; border-color: var(--acc); }
.stats { max-width: 980px; margin: 0 auto; padding: 16px; }
.stats h2 { margin: 24px 0 10px; font-size: 15px; }
.stats h2 small { color: var(--dim); font-weight: 400; font-size: 12px; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; white-space: normal; }
.tbl th { color: var(--dim); font-weight: 500; font-size: 12px; }
.tbl tr:last-child td { border-bottom: 0; background: rgba(255,255,255,.03); }
.tbl small { color: var(--dim); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.bar-d { flex: 0 0 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar-d > i { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.18); overflow: hidden; }
.bar-d > i > i { display: block; width: 100%; background: var(--blue); }
.bar-d span { font-size: 10px; color: var(--dim); }
.small { font-size: 12px; }