/* ChaSK App — Design System v0.8.5 (mobile-first) */
@import url('/shared/css/brand.css?v=4');

:root {
  --navy: #0b1e5e;
  --sky: #5cc8f0;
  --sky-light: #e8f6fd;
  --dark: #1a1e2e;
  --text: #2d3436;
  --text-light: #636e72;
  --border: #dfe6e9;
  --bg: #f5f7fa;
  --white: #ffffff;
  --green: #00b894;
  --red: #d63031;
  --orange: #f39c12;
  --radius: 6px;
}

/* ===== Dark Theme =====
   --navy se u dark koristi kao TEKSTNI akcent (heading-i, KPI brojevi,
   aktivni tab, back-arrow, vehicle name). Mora ostati čitljiv na #0d1117 pozadini.
   Pozadinske upotrebe (.app-header, .btn-primary, .send-btn, avatar, sent bubble)
   imaju eksplicitan tamni override ispod. */
.theme-dark {
  --navy: #7aa3e0;        /* svjetla plava kao tekst — kontrast 8:1 na #0d1117 */
  --navy-bg: #1a2744;     /* tamni navy za chrome/buttons/avatare/bubbles */
  --sky: #4db8d9;
  --sky-light: #1c2d3f;
  --dark: #0d1117;
  --text: #e6edf3;
  --text-light: #8b949e;
  --border: #30363d;
  --bg: #0d1117;
  --white: #161b22;
  --green: #3fb950;
  --red: #f85149;
  --orange: #d29922;
}

/* Pozadine s bijelim tekstom moraju ostati TAMNE (svijetli --navy bi dao
   bijeli tekst na svijetloj plavoj — granična čitljivost). Override na navy-bg. */
.theme-dark .btn-primary,
.theme-dark .chat-input .send-btn,
.theme-dark .list-item .avatar { background: var(--navy-bg); }
.theme-dark .btn-primary:hover { background:#0f1d36; }

/* Light tema — fallback da var(--navy-bg) ne pukne ako negdje koristi */
:root { --navy-bg: var(--navy); }

.theme-dark .app-header { background: #0d1117; border-bottom: 1px solid var(--border); }
.theme-dark .tab-bar { background: var(--white); border-top-color: var(--border); }
.theme-dark .msg-row.sent .msg-bubble { background: #1a3a5c; }
.theme-dark .msg-row.received .msg-bubble { background: #21262d; border-color: var(--border); color: var(--text); }
.theme-dark .msg-sender { color: var(--sky); }
.theme-dark .msg-time { color: var(--text-light); }
.theme-dark .msg-row.sent .msg-time { color: rgba(255,255,255,0.4); }
.theme-dark input, .theme-dark select, .theme-dark textarea { background: var(--white); color: var(--text); border-color: var(--border); }
.theme-dark .login-page { background: linear-gradient(135deg, rgba(13,17,23,0.78), rgba(13,17,23,0.62)), url('/shared/img/grok2.jpg') center/cover no-repeat; }
.theme-dark .login-box { background: #161b22; color: var(--text); }
.theme-dark .login-brand { color: var(--sky); }
/* Badge overrides — bright pastel bg iz light teme ne radi na tamnoj podlozi,
   zamjenjujemo s tamnim bg + svijetli tekst (inverse pattern). */
.theme-dark .badge-driver,
.theme-dark .badge-open        { background:#1e3a5f; color:#7bb8e8; }
.theme-dark .badge-supervisor  { background:#3d1f4a; color:#c49fd8; }
.theme-dark .badge-manager,
.theme-dark .badge-progress    { background:#4a2c10; color:#f0b070; }
.theme-dark .badge-admin,
.theme-dark .badge-rejected    { background:#4a1d24; color:#e8a0a8; }
.theme-dark .badge-received    { background:#262c5a; color:#9ba0e8; }
.theme-dark .badge-completed,
.theme-dark .badge-active      { background:#1d3a20; color:#80d088; }
/* Scrollbar u dark modu — default WebKit bijeli trenutak, treba tamni. */
.theme-dark ::-webkit-scrollbar { width:8px; height:8px; }
.theme-dark ::-webkit-scrollbar-track { background:#161b22; }
.theme-dark ::-webkit-scrollbar-thumb { background:#30363d; border-radius:4px; }
.theme-dark ::-webkit-scrollbar-thumb:hover { background:#484f58; }
/* Card shadow — default light rgba(0,0,0,0.06) nevidljiv na #0d1117, invertiramo. */
.theme-dark .card { box-shadow:0 1px 3px rgba(0,0,0,0.4); }

@media (min-width: 768px) {
  .theme-dark .tab-bar { background: #0d1117; }
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:14px; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--sky); text-decoration:none; }
img { max-width:100%; }

/* Busy indicator — AppAPI._busyCount > 0 postavlja body.busy za vizualni feedback. */
body.busy, body.busy * { cursor: progress !important; }

/* ===== App Layout ===== */
.app-layout {
  display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;
}

.app-header {
  background:var(--navy); color:#fff; padding:0 16px; height:52px; display:flex; align-items:center; gap:12px; flex-shrink:0; z-index:100;
}
.app-header .header-logo { height:28px; }
.app-header .header-title { font-size:16px; font-weight:700; flex:1; }
/* Tenant brand logo (env CHASK_LOGIN_LOGO, default Artronic) u headeru — desno. */
.app-header .header-brand { height:30px; width:auto; max-width:38vw; opacity:0.92; flex-shrink:0; }
.app-header .header-user { font-size:12px; opacity:0.8; }
.app-header .header-bell { position:relative; cursor:pointer; padding:4px; }
.app-header .header-bell svg { width:20px; height:20px; fill:#fff; }
.app-header .badge-count {
  position:absolute; top:-2px; right:-4px; background:var(--red); color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; line-height:16px;
  text-align:center; border-radius:8px; padding:0 4px;
}

/* ===== View Container ===== */
.app-view {
  flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}

/* ===== Tab Bar (bottom, mobile) ===== */
.tab-bar {
  display:flex; background:var(--white); border-top:1px solid var(--border); flex-shrink:0; z-index:100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 0 4px; cursor:pointer; color:var(--text-light); transition:color 0.15s; text-decoration:none;
  position:relative; -webkit-tap-highlight-color:transparent;
}
.tab-item svg { width:22px; height:22px; fill:currentColor; margin-bottom:2px; }
.tab-item span { font-size:10px; font-weight:600; }
.tab-item.active { color:var(--navy); }
.tab-item .tab-badge {
  position:absolute; top:2px; right:calc(50% - 18px); background:var(--red); color:#fff;
  font-size:9px; font-weight:700; min-width:14px; height:14px; line-height:14px;
  text-align:center; border-radius:7px; padding:0 3px;
}
/* Boja badge-a po značenju (red = urgent/rejected, green = normal/completed). */
.tab-item .tab-badge.badge-green { background:#22c55e; }
.tab-item .tab-badge.badge-red   { background:var(--red); }

/* ===== Embed mode ===== */
.embed .app-header,
.embed .tab-bar { display:none; }
.embed .app-view { height:100vh; }

/* ===== Cards ===== */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.card + .card { margin-top:12px; }

/* ===== KPI Cards ===== */
.kpi-row { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; padding:16px; }
.kpi-card {
  background:var(--white); border-radius:var(--radius); padding:14px; border-left:3px solid var(--sky);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.kpi-card .kpi-value { font-size:24px; font-weight:700; color:var(--navy); }
.kpi-card .kpi-label { font-size:11px; color:var(--text-light); text-transform:uppercase; margin-top:2px; }
.kpi-card.green { border-left-color:var(--green); }
.kpi-card.orange { border-left-color:var(--orange); }
.kpi-card.red { border-left-color:var(--red); }

/* ===== Panels ===== */
.panel { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); margin:12px 16px; }
.panel-header { padding:12px 16px; border-bottom:1px solid var(--border); font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px; }
.panel-body { padding:12px 16px; }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:none; border-radius:var(--radius);
  font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; text-decoration:none;
}
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:#0d2570; }
.btn-sky { background:var(--sky); color:#fff; }
.btn-green { background:var(--green); color:#fff; }
.btn-red { background:var(--red); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ===== Badges ===== */
.badge {
  display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600;
}
.badge-driver { background:#e3f2fd; color:#1565c0; }
.badge-supervisor { background:#f3e5f5; color:#7b1fa2; }
.badge-manager { background:#fff3e0; color:#e65100; }
.badge-admin { background:#fce4ec; color:#c62828; }
.badge-open { background:#e3f2fd; color:#1565c0; }
.badge-received { background:#e8eaf6; color:#283593; }
.badge-progress { background:#fff3e0; color:#e65100; }
.badge-completed { background:#e8f5e9; color:#2e7d32; }
.badge-rejected { background:#fce4ec; color:#c62828; }
.badge-active { background:#e8f5e9; color:#2e7d32; }
.badge-urgent { background:var(--red); color:#fff; }

/* ===== List Items ===== */
.list-item {
  display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background 0.1s; -webkit-tap-highlight-color:transparent;
}
.list-item:hover { background:var(--sky-light); }
.list-item:last-child { border-bottom:none; }
.list-item .avatar {
  width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0;
}
.list-item .item-body { flex:1; min-width:0; }
.list-item .item-title { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item .item-sub { font-size:12px; color:var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item .item-meta { text-align:right; flex-shrink:0; }
.list-item .item-time { font-size:11px; color:var(--text-light); }
.list-item .item-badge { margin-top:4px; }

/* ===== Chat Bubbles ===== */
.chat-container { display:flex; flex-direction:column; height:100%; }
.chat-messages { flex:1; overflow-y:auto; padding:12px 16px; }
.msg-row { display:flex; margin-bottom:8px; }
.msg-row.sent { justify-content:flex-end; }
.msg-bubble {
  max-width:75%; padding:8px 12px; border-radius:12px; font-size:14px; line-height:1.4;
  position:relative; word-wrap:break-word;
}
.msg-row.received .msg-bubble { background:var(--white); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg-row.sent .msg-bubble { background:var(--navy); color:#fff; border-bottom-right-radius:4px; }
.msg-time { font-size:10px; color:var(--text-light); margin-top:2px; }
.msg-row.sent .msg-time { color:rgba(255,255,255,0.6); text-align:right; }
.msg-sender { font-size:11px; font-weight:600; color:var(--sky); margin-bottom:2px; }
.msg-urgent { border-left:3px solid var(--red); }
.msg-warning { border-left:3px solid var(--orange); }

/* Chat action buttons */
.chat-action-btn {
  background:none; border:none; cursor:pointer; padding:4px; border-radius:4px; display:flex; align-items:center;
  transition: background 0.15s;
}
.chat-action-btn:hover { background:var(--sky-light); }

/* Mini map in chat */
.chat-minimap { width:200px; height:120px; border-radius:6px; margin-bottom:4px; background:var(--bg); }
.chat-minimap-addr { margin-bottom:2px; }

/* ===== Chat Input ===== */
.chat-input {
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--border);
  background:var(--white); flex-shrink:0;
}
.chat-input input {
  flex:1; padding:10px 14px; border:1px solid var(--border); border-radius:20px; font-size:14px; outline:none;
}
.chat-input input:focus { border-color:var(--sky); }
.chat-input .send-btn {
  width:40px; height:40px; border-radius:50%; background:var(--navy); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.chat-input .send-btn svg { width:18px; height:18px; fill:#fff; }

/* ===== Task Cards ===== */
.task-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin:8px 16px;
  cursor:pointer; transition:box-shadow 0.15s;
}
.task-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.task-card .task-title { font-weight:600; font-size:14px; margin-bottom:4px; }
.task-card .task-meta { font-size:12px; color:var(--text-light); display:flex; gap:12px; flex-wrap:wrap; }
/* Deadline urgency tints (paritet s Flutter task_helpers.dart):
   overdue = now > deadline_end, approaching = (deadline_end - now) <= 10 min.
   COMPLETED/REJECTED se ne boji (gotov posao). */
.task-card.task-overdue     { background: rgba(214, 48, 49, 0.12); border-color: rgba(214, 48, 49, 0.35); }
.task-card.task-approaching { background: rgba(243, 156, 18, 0.12); border-color: rgba(243, 156, 18, 0.35); }
.theme-dark .task-card.task-overdue     { background: rgba(248, 81, 73, 0.18); border-color: rgba(248, 81, 73, 0.45); }
.theme-dark .task-card.task-approaching { background: rgba(210, 153, 34, 0.18); border-color: rgba(210, 153, 34, 0.45); }
/* Isto za subtask redove unutar detalja zadatka */
.list-item.task-overdue     { background: rgba(214, 48, 49, 0.10); }
.list-item.task-approaching { background: rgba(243, 156, 18, 0.10); }
.theme-dark .list-item.task-overdue     { background: rgba(248, 81, 73, 0.14); }
.theme-dark .list-item.task-approaching { background: rgba(210, 153, 34, 0.14); }

/* ===== Toolbar / Filters ===== */
.toolbar {
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border);
  background:var(--white); flex-wrap:wrap; flex-shrink:0;
}
.toolbar select, .toolbar input {
  padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; outline:none;
}

/* ===== Forms ===== */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
.form-control {
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; outline:none;
}
.form-control:focus { border-color:var(--sky); box-shadow:0 0 0 3px rgba(92,200,240,0.15); }

/* ===== Modal ===== */
.modal-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);
  display:none; align-items:center; justify-content:center; z-index:500;
}
.modal-overlay.active { display:flex; }
.modal { background:var(--white); border-radius:10px; width:90vw; max-width:440px; max-height:85vh; overflow-y:auto; }
.modal-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; }
.modal-header h3 { flex:1; margin:0; font-size:16px; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-light); padding:0 4px; }
.modal-body { padding:16px; }
.modal-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* ===== Toast ===== */
.toast-container { position:fixed; top:60px; right:16px; z-index:600; display:flex; flex-direction:column; gap:8px; }
.toast {
  padding:10px 16px; border-radius:var(--radius); color:#fff; font-size:13px; font-weight:500;
  box-shadow:0 4px 12px rgba(0,0,0,0.15); animation:toast-in 0.3s ease;
}
.toast-success { background:var(--green); }
.toast-error { background:var(--red); }
.toast-info { background:var(--sky); }
@keyframes toast-in { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }

/* ===== Spinner ===== */
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--sky); border-radius:50%; animation:spin 0.6s linear infinite; margin:20px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== Empty State ===== */
.empty-state { text-align:center; padding:40px 20px; color:var(--text-light); }
.empty-state svg { width:48px; height:48px; fill:var(--border); margin-bottom:12px; }
.empty-state p { font-size:14px; margin:4px 0; }

/* ===== Online indicator ===== */
.online-dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
.offline-dot { width:8px; height:8px; border-radius:50%; background:var(--border); display:inline-block; }

/* ===== ECO tabs ===== */
.eco-tab {
  flex:1; text-align:center; padding:10px; cursor:pointer; font-weight:600;
  color:var(--text-light); border-bottom:2px solid transparent; transition:all 0.15s;
}
.eco-tab:hover { color:var(--navy); }
.eco-tab.active { color:var(--navy); border-bottom-color:var(--sky); }

/* ===== Company Info / info ekran (#32) ===== */
.info-screen { max-width:560px; margin:0 auto; }
/* Brand traka uvijek tamno-navy (#0b1e5e) — login-logo je bijela/glow varijanta
   pa mora sjediti na tamnoj podlozi (paritet i u light i u dark temi). */
.info-brand { background:#0b1e5e; color:#fff; padding:28px 16px 24px; text-align:center; }
.info-brand .info-logo { max-height:72px; max-width:70%; width:auto; object-fit:contain; }
.info-brand-name { margin-top:12px; font-size:20px; font-weight:700; letter-spacing:0.5px; }
.info-legal-name { text-align:center; color:var(--text-light); font-size:13px; margin:12px 0 0; }
.info-section-title { font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-light); margin-bottom:4px; font-weight:600; }
.info-row { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); }
.info-row:last-child { border-bottom:none; }
.info-row-ico { width:22px; text-align:center; flex-shrink:0; }
.info-row-label { color:var(--text-light); font-size:13px; flex:1; }
.info-row-val { font-weight:600; font-size:14px; text-align:right; word-break:break-word; max-width:62%; }
.info-row-arrow { color:var(--text-light); font-size:18px; flex-shrink:0; }
.info-footer { text-align:center; color:var(--text-light); font-size:11px; padding:22px 16px 30px; line-height:1.6; }
.info-footer a { color:var(--text-light); text-decoration:underline; }

/* ===== Utility ===== */
.text-muted { color:var(--text-light); }
.text-small { font-size:12px; }
.text-center { text-align:center; }
.p-16 { padding:16px; }
.mt-8 { margin-top:8px; }
.mt-16 { margin-top:16px; }
.gap-8 { gap:8px; }
.hidden { display:none !important; }

/* ===== Desktop (sidebar instead of bottom tabs) ===== */
@media (min-width: 768px) {
  .app-layout { flex-direction:row; }
  .app-header { display:none; }

  .tab-bar {
    flex-direction:column; width:220px; border-top:none; border-right:1px solid var(--border);
    background:var(--navy); padding:0; padding-bottom:0;
  }
  .tab-bar::before {
    content:'Chask::Chat\26 Task'; display:block; padding:18px 16px 14px; font-size:18px; font-weight:700; color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .tab-item {
    flex-direction:row; justify-content:flex-start; padding:12px 16px; gap:10px; color:rgba(255,255,255,0.7);
  }
  .tab-item span { font-size:13px; }
  .tab-item svg { width:18px; height:18px; }
  .tab-item.active { color:#fff; background:rgba(255,255,255,0.1); }
  .tab-item:hover { color:#fff; }
  .tab-item .tab-badge { position:static; margin-left:auto; }

  .app-view { flex:1; }

  .kpi-row { grid-template-columns:repeat(4, 1fr); }

  /* Tenant brand logo (env CHASK_LOGIN_LOGO, default Artronic) — dno desktop side-nava */
  .tab-bar::after {
    content:""; display:block; margin-top:auto; height:44px; margin-bottom:16px; opacity:0.9;
    background:url('/api/v1/login-logo?v=2') center/contain no-repeat;
  }
}