/* ==========================================================================
   Guliverio CRM — profesionalus lead'ų dashboard
   Paletė: brand mėlyna (#1B87C9), navy sidebar, rezervuota būsenų paletė
   ========================================================================== */
:root {
  --blue:#1B87C9; --blue-dk:#0f6ba6; --blue-050:#eaf5fc;
  --ink:#0f2c42; --ink-2:#1a4a6b;
  --bg:#f4f6f9; --card:#ffffff;
  --line:#e6ebf1; --line-2:#eef2f6;
  --tx:#16324a; --tx-2:#5a6b7b; --tx-3:#93a1b0;
  /* Būsenų paletė (rezervuota — kiekviena reiškia būseną, ne seriją) */
  --s-new:#1B87C9;   --s-new-bg:#e8f4fc;
  --s-called:#64748b;--s-called-bg:#eef1f5;
  --s-noans:#d98a12; --s-noans-bg:#fdf1dd;
  --s-callb:#E4572E; --s-callb-bg:#fdece6;
  --s-book:#2f8f5b;  --s-book-bg:#e7f6ee;
  --s-decl:#8593a2;  --s-decl-bg:#eef1f4;
  --s-bad:#c0433a;   --s-bad-bg:#fbe9e7;
  --shadow:0 1px 2px rgba(16,44,66,.05), 0 8px 24px -12px rgba(16,44,66,.18);
  --shadow-lg:0 24px 60px -20px rgba(16,44,66,.4);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r:14px;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--sans); background:var(--bg); color:var(--tx);
  -webkit-font-smoothing:antialiased; font-size:14px; }
h1,h2 { margin:0; }
a { color:inherit; }

/* ---------- LOGIN ---------- */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 30% -10%, #1b6fa8, #0f2c42); padding:20px; }
.login-card { background:#fff; border-radius:20px; padding:44px 36px; width:100%; max-width:380px;
  text-align:center; box-shadow:var(--shadow-lg); }
.login-logo { font-weight:800; color:var(--blue); letter-spacing:.02em; }
.login-title { font-size:1.6rem; margin:8px 0 4px; font-weight:700; }
.login-sub { color:var(--tx-2); margin:0 0 26px; }
.login-error { background:#fbe9e7; color:#b3261e; padding:10px 14px; border-radius:10px; font-size:.9rem; }
.login-note { color:var(--tx-3); font-size:.82rem; margin-top:14px; }
.gbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:13px 18px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  color:var(--tx); font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer; }
.gbtn:hover { border-color:var(--blue); background:var(--blue-050); }
.gbtn--dev { border-style:dashed; color:var(--tx-2); }

/* ---------- APP LAYOUT ---------- */
.app { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }

/* ---------- SIDEBAR ---------- */
.sidebar { background:linear-gradient(180deg,#123a56,#0d2c42); color:#dce6ef;
  display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:11px; padding:6px 8px 20px; }
.brand__mark { width:34px; height:34px; border-radius:9px; background:var(--blue);
  color:#fff; font-weight:800; display:grid; place-items:center; font-size:1.1rem; }
.brand__name { font-weight:700; color:#fff; line-height:1; display:flex; flex-direction:column; }
.brand__name small { font-weight:600; color:#7fb4d6; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; margin-top:3px; }
.nav { display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.nav__item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:#c2d2e0; text-decoration:none; font-weight:500; font-size:.92rem; transition:background .15s,color .15s; }
.nav__item:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav__item.is-active { background:var(--blue); color:#fff; box-shadow:0 6px 16px -8px rgba(27,135,201,.8); }
.nav__ico { width:18px; text-align:center; opacity:.9; }
.nav__count { margin-left:auto; background:rgba(255,255,255,.12); color:#e6eef5;
  font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:100px; min-width:22px; text-align:center; }
.nav__item.is-active .nav__count { background:rgba(255,255,255,.25); color:#fff; }
.nav__count--alert { background:#E4572E; color:#fff; }
.nav__count--new { background:#2f8f5b; color:#fff; }
.sidebar__foot { margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.userchip { display:flex; align-items:center; gap:10px; padding:6px 6px 10px; }
.userchip__av { width:34px; height:34px; border-radius:50%; background:#2b6f9c; color:#fff;
  display:grid; place-items:center; font-weight:700; }
.userchip__meta { display:flex; flex-direction:column; line-height:1.2; overflow:hidden; }
.userchip__meta b { color:#fff; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.userchip__meta small { color:#8ba7bd; font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logout { display:block; text-align:center; padding:9px; border-radius:9px; font-size:.85rem;
  font-weight:600; color:#c2d2e0; text-decoration:none; border:1px solid rgba(255,255,255,.14); }
.logout:hover { background:rgba(255,255,255,.08); color:#fff; }

/* ---------- MAIN ---------- */
.main { padding:24px 30px 60px; min-width:0; }
.head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.head__title { font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }
.head__sub { color:var(--tx-3); margin:3px 0 0; font-size:.86rem; }
.search { position:relative; }
.search__ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--tx-3); font-size:1rem; }
.search input { width:300px; max-width:44vw; padding:10px 14px 10px 34px; border:1px solid var(--line);
  border-radius:11px; background:#fff; font-family:var(--sans); font-size:.9rem; color:var(--tx); }
.search input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }

/* ---------- KPI ---------- */
.kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow);
  border-top:3px solid var(--line); }
.kpi__label { font-size:.76rem; color:var(--tx-2); font-weight:600; letter-spacing:.01em; }
.kpi__num { font-size:1.9rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi__foot { font-size:.74rem; color:var(--tx-3); }
.kpi--accent { border-top-color:var(--blue); }
.kpi--accent .kpi__num { color:var(--blue); }
.kpi--alert { border-top-color:var(--s-callb); }
.kpi--alert .kpi__num { color:var(--s-callb); }
.kpi--good { border-top-color:var(--s-book); }
.kpi--good .kpi__num { color:var(--s-book); }

/* ---------- FILTER PILLS ---------- */
.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.pill { display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--tx-2);
  background:#fff; border:1px solid var(--line); padding:7px 13px; border-radius:100px;
  font-size:.84rem; font-weight:600; transition:border-color .15s, background .15s; }
.pill:hover { border-color:var(--blue); color:var(--tx); }
.pill b { color:var(--tx-3); }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--tx-3); }
.pill.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }
.pill.is-active b { color:rgba(255,255,255,.7); }
.pill--new .dot{background:var(--s-new)} .pill--called .dot{background:var(--s-called)}
.pill--no_answer .dot{background:var(--s-noans)} .pill--callback .dot{background:var(--s-callb)}
.pill--booked .dot{background:var(--s-book)} .pill--declined .dot{background:var(--s-decl)}
.pill--bad .dot{background:var(--s-bad)}

/* ---------- TABLE ---------- */
.tablecard { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; }
.tbl { width:100%; border-collapse:collapse; }
.tbl thead th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tx-3); font-weight:700; padding:13px 16px; background:#fafbfc; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl tbody td { padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.row { cursor:pointer; transition:background .12s; }
.row:hover { background:var(--blue-050); }
.cust { display:flex; align-items:center; gap:11px; }
.cust__av { width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; color:#fff; font-size:.9rem; flex:none; }
.cust__meta { display:flex; flex-direction:column; line-height:1.25; }
.cust__meta b { font-weight:600; }
.cust__phone { color:var(--blue); text-decoration:none; font-size:.82rem; font-weight:600; }
.cust__phone:hover { text-decoration:underline; }
.ct-trip { max-width:230px; }
.muted { color:var(--tx-3); }
.small { font-size:.83rem; }
.nowrap { white-space:nowrap; }
.due { color:var(--s-callb); font-weight:700; }
.av-0{background:#1B87C9} .av-1{background:#2f8f5b} .av-2{background:#E4572E}
.av-3{background:#7c5cbf} .av-4{background:#d98a12} .av-5{background:#2b6f9c}

/* Statuso žymė */
.tag { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px;
  font-size:.78rem; font-weight:600; white-space:nowrap; }
.tag .dot { width:7px; height:7px; border-radius:50%; }
.tag--new{background:var(--s-new-bg);color:#12688f} .tag--new .dot{background:var(--s-new)}
.tag--called{background:var(--s-called-bg);color:#4a5867} .tag--called .dot{background:var(--s-called)}
.tag--no_answer{background:var(--s-noans-bg);color:#9a6410} .tag--no_answer .dot{background:var(--s-noans)}
.tag--callback{background:var(--s-callb-bg);color:#b7401f} .tag--callback .dot{background:var(--s-callb)}
.tag--booked{background:var(--s-book-bg);color:#1f7047} .tag--booked .dot{background:var(--s-book)}
.tag--declined{background:var(--s-decl-bg);color:#5e6b78} .tag--declined .dot{background:var(--s-decl)}
.tag--bad{background:var(--s-bad-bg);color:#a1352d} .tag--bad .dot{background:var(--s-bad)}

.empty { text-align:center; padding:70px 20px; color:var(--tx-3); }
.empty__ico { font-size:2rem; display:block; margin-bottom:10px; color:var(--line); }

/* ---------- DRAWER ---------- */
.drawer-ov { position:fixed; inset:0; background:rgba(15,44,66,.4); opacity:0; visibility:hidden;
  transition:opacity .2s; z-index:40; }
.drawer-ov.show { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:430px; max-width:92vw; background:#fff;
  box-shadow:var(--shadow-lg); z-index:50; transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.drawer__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:22px 22px 18px; border-bottom:1px solid var(--line); }
.drawer__ident { display:flex; align-items:center; gap:12px; }
.drawer__av { width:46px; height:46px; border-radius:50%; background:var(--blue); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:1.2rem; }
.drawer__head h2 { font-size:1.15rem; font-weight:700; }
.drawer__phone { color:var(--blue); text-decoration:none; font-weight:600; font-size:.9rem; }
.drawer__close { background:#f1f4f7; border:none; width:32px; height:32px; border-radius:8px;
  cursor:pointer; color:var(--tx-2); font-size:1rem; }
.drawer__close:hover { background:#e6ebf1; }
.drawer__body { padding:18px 22px; overflow-y:auto; flex:1; }
.frow { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.frow--col { flex-direction:column; gap:5px; }
.flabel { color:var(--tx-3); font-size:.8rem; font-weight:600; flex:none; }
.fval { text-align:right; font-weight:500; }
.fval--utm { font-size:.8rem; color:var(--tx-2); }
.fmsg { margin:0; background:var(--bg); border-radius:10px; padding:11px 13px; font-size:.9rem; line-height:1.5; color:var(--tx); }
.drawer__sep { border:none; border-top:1px solid var(--line); margin:16px 0; }
.fld { display:block; margin-bottom:16px; }
.fld__label { display:block; font-size:.82rem; font-weight:700; margin-bottom:8px; color:var(--tx); }
.fld__input { width:100%; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px;
  font-family:var(--sans); font-size:.9rem; color:var(--tx); background:#fff; }
.fld__input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }
.fld__hint { display:block; font-size:.76rem; color:var(--tx-3); margin-top:5px; }
.statusgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sbtn { border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:9px 10px;
  font-family:var(--sans); font-size:.83rem; font-weight:600; color:var(--tx-2); cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:8px; transition:border-color .12s, background .12s; }
.sbtn::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--tx-3); flex:none; }
.sbtn:hover { border-color:var(--tx-3); }
.sbtn--new::before{background:var(--s-new)} .sbtn--called::before{background:var(--s-called)}
.sbtn--no_answer::before{background:var(--s-noans)} .sbtn--callback::before{background:var(--s-callb)}
.sbtn--booked::before{background:var(--s-book)} .sbtn--declined::before{background:var(--s-decl)}
.sbtn--bad::before{background:var(--s-bad)}
.sbtn.is-on { border-color:var(--ink); background:var(--ink); color:#fff; }
.drawer__foot { display:flex; gap:10px; padding:16px 22px; border-top:1px solid var(--line); }
.btn-ghost { flex:none; padding:11px 18px; border:1.5px solid var(--line); background:#fff; border-radius:10px;
  font-weight:600; cursor:pointer; font-family:var(--sans); color:var(--tx-2); }
.btn-ghost:hover { border-color:var(--tx-3); }
.btn-save { flex:1; padding:11px 18px; border:none; background:var(--blue); color:#fff; border-radius:10px;
  font-weight:700; cursor:pointer; font-family:var(--sans); }
.btn-save:hover { background:var(--blue-dk); }
.btn-save:disabled { opacity:.7; }

/* ---------- TOGGLE (auto-paskirstymas) ---------- */
.toggle { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.toggle input { position:absolute; opacity:0; width:0; height:0; }
.toggle__track { width:38px; height:22px; border-radius:100px; background:#cdd7e0; position:relative; transition:background .18s; flex:none; }
.toggle__knob { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s; }
.toggle input:checked + .toggle__track { background:var(--s-book); }
.toggle input:checked + .toggle__track .toggle__knob { transform:translateX(16px); }
.toggle input:focus-visible + .toggle__track { box-shadow:0 0 0 3px var(--blue-050); }
.toggle__label { font-size:.85rem; font-weight:600; color:var(--tx-2); white-space:nowrap; }

/* ---------- ASSIGNEE ---------- */
.assignee { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:500; }
.assignee__av { width:26px; height:26px; border-radius:50%; background:var(--ink-2); color:#fff;
  display:grid; place-items:center; font-size:.75rem; font-weight:700; flex:none; }
.claim { background:var(--blue-050); color:var(--blue); border:1px dashed #a9d3ec; border-radius:8px;
  padding:6px 11px; font-size:.8rem; font-weight:600; font-family:var(--sans); cursor:pointer; }
.claim:hover { background:#dceffa; border-style:solid; }
.claim--take { background:#fff; color:var(--tx-3); border:1px solid var(--line); border-style:solid; margin-left:8px;
  font-size:.76rem; padding:5px 10px; }
.claim--take:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-050); }
.assignee--me b { color:var(--s-book); font-weight:700; }
.assign-row { display:flex; gap:8px; }
.assign-row .fld__input { flex:1; }
.btn-claim { flex:none; border:1.5px solid var(--blue); background:var(--blue-050); color:var(--blue);
  border-radius:10px; padding:0 14px; font-weight:700; font-family:var(--sans); cursor:pointer; font-size:.85rem; }
.btn-claim:hover { background:var(--blue); color:#fff; }

/* ---------- NOTICE / TEAM ---------- */
.notice { background:#fff; border:1px solid var(--line); border-left:4px solid var(--tx-3);
  border-radius:12px; padding:14px 18px; margin-bottom:16px; font-size:.9rem; color:var(--tx-2); }
.notice b { color:var(--tx); }
.notice a { color:var(--blue); font-weight:600; }
.notice--info { border-left-color:var(--blue); background:var(--blue-050); }
.notice--warn { border-left-color:var(--s-noans); background:var(--s-noans-bg); }
.link-status { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--tx-3); margin-top:6px; }
.link-status .dot { width:8px; height:8px; border-radius:50%; background:var(--tx-3); }
.link-status .dot--ok { background:var(--s-book); }
.f-link { max-width:340px; }
/* maži jungikliai lentelėje */
.mini-toggle { display:inline-flex; cursor:pointer; }
.mini-toggle input { position:absolute; opacity:0; }
.mini-toggle span { width:36px; height:20px; border-radius:100px; background:#cdd7e0; position:relative; transition:background .16s; }
.mini-toggle span::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .16s; }
.mini-toggle input:checked + span { background:var(--s-book); }
.mini-toggle input:checked + span::after { transform:translateX(16px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px) { .kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; }
  .nav { flex-direction:row; flex-wrap:wrap; margin:0; }
  .sidebar__foot { margin:0 0 0 auto; border:none; padding:0; display:flex; gap:10px; align-items:center; }
  .userchip { padding:0; }
  .main { padding:18px; }
  .kpis { grid-template-columns:repeat(2,1fr); }
  .search input { width:180px; }
  .ct-trip { max-width:140px; }
}