:root{
    --bg:#0F1720;
    --bg-elevated:#141E2A;
    --panel:#1B2734;
    --panel-2:#20303F;
    --border:#28394B;
    --accent:#4CD9B0;
    --accent-dim:#2E7C63;
    --accent-2:#FFB347;
    --danger:#FF6B6B;
    --text:#E8EDF2;
    --text-dim:#8CA0B3;
    --text-faint:#54697D;
    --radius:12px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    overflow:hidden;
  }
  ::selection{ background:var(--accent); color:#04231A; }
  button{ font-family:inherit; }
  input, select{ font-family:inherit; }

  /* ---------- Loading / Toast ---------- */
  #app-loading{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:var(--bg); z-index:9999; flex-direction:column; gap:14px;
  }
  .spinner{
    width:34px; height:34px; border-radius:50%;
    border:3px solid var(--panel-2); border-top-color:var(--accent);
    animation:spin .8s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  #toast-stack{
    position:fixed; top:16px; right:16px; z-index:5000;
    display:flex; flex-direction:column; gap:8px; max-width:340px;
  }
  .toast{
    background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--accent);
    padding:12px 14px; border-radius:10px; font-size:13px; color:var(--text);
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    animation:toast-in .25s ease;
  }
  .toast.error{ border-left-color:var(--danger); }
  .toast.success{ border-left-color:var(--accent); }
  @keyframes toast-in{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:translateX(0);} }

  /* ---------- Login ---------- */
  #login-screen{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(1200px 600px at 15% 10%, rgba(76,217,176,.08), transparent 60%),
      radial-gradient(900px 500px at 85% 90%, rgba(255,179,71,.06), transparent 60%),
      var(--bg);
    z-index:100;
  }
  .login-card{
    width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border);
    border-radius:var(--radius); padding:36px 32px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  }
  .brand{ display:flex; align-items:center; gap:10px; margin-bottom:28px; }
  .brand-mark{
    width:36px; height:36px; border-radius:9px; background:var(--accent);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 0 0 4px rgba(76,217,176,.12);
  }
  .brand-mark svg{ width:20px; height:20px; }
  .brand-text{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.2px; }
  .brand-sub{ font-size:11px; color:var(--text-dim); letter-spacing:.5px; text-transform:uppercase; margin-top:1px; }

  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; font-weight:500; }
  .username-wrap{ position:relative; }
  .field input{
    width:100%; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
    padding:11px 13px; border-radius:9px; font-size:14px; outline:none; transition:border-color .15s;
  }
  .username-wrap input{ padding-right:78px; }
  .username-suffix{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    font-size:12px; color:var(--text-faint); font-family:var(--font-mono); pointer-events:none;
  }
  .field input:focus{ border-color:var(--accent); }
  .btn{
    width:100%; padding:12px; border-radius:9px; border:none; cursor:pointer;
    font-weight:600; font-size:14px; transition:transform .1s, opacity .15s;
  }
  .btn:active{ transform:scale(.98); }
  .btn-primary{ background:var(--accent); color:#04231A; }
  .btn-primary:hover{ opacity:.92; }
  .btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
  .login-error{ color:var(--danger); font-size:12.5px; margin-top:10px; min-height:16px; }

  /* ---------- App shell ---------- */
  #app{ display:none; height:100vh; }
  #app.active{ display:flex; }

  #sidebar{
    width:300px; flex-shrink:0; background:var(--bg-elevated); border-right:1px solid var(--border);
    display:flex; flex-direction:column; height:100vh;
  }
  .sidebar-header{ padding:20px 18px 14px; border-bottom:1px solid var(--border); }
  .sidebar-user{ display:flex; align-items:center; gap:10px; margin-top:14px; }
  .avatar{
    width:34px; height:34px; border-radius:50%; background:var(--panel-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:13px;
  }
  .user-meta .name{ font-size:13px; font-weight:600; }
  .user-meta .role{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }

  .nav-tabs{ display:flex; gap:4px; padding:12px; border-bottom:1px solid var(--border); }
  .nav-tab{
    flex:1; text-align:center; padding:8px 6px; border-radius:8px; font-size:12.5px; font-weight:600;
    color:var(--text-dim); cursor:pointer; background:transparent; border:1px solid transparent;
  }
  .nav-tab.active{ background:var(--panel-2); color:var(--accent); border-color:var(--border); }

  .sidebar-body{ flex:1; overflow-y:auto; padding:14px; }
  .sidebar-section-title{
    font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint);
    margin:4px 4px 10px; font-weight:600;
  }

  .driver-card{
    display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px;
    border:1px solid var(--border); background:var(--panel); margin-bottom:8px; cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .driver-card:hover{ border-color:var(--accent-dim); background:var(--panel-2); }
  .pulse-dot{ position:relative; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .pulse-dot::after{
    content:''; position:absolute; inset:-6px; border-radius:50%; opacity:.5;
  }
  .pulse-dot.live{ background:var(--accent); }
  .pulse-dot.live::after{ background:var(--accent); animation:ping 1.8s ease-out infinite; }
  .pulse-dot.stale{ background:var(--accent-2); }
  .pulse-dot.offline{ background:var(--text-faint); }
  @keyframes ping{
    0%{ transform:scale(.6); opacity:.5; }
    100%{ transform:scale(2.2); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){ .pulse-dot.live::after{ animation:none; opacity:.25; } }

  .driver-info{ flex:1; min-width:0; }
  .driver-info .dname{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .driver-info .dwhen{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); }

  .own-status-card{
    border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:16px;
  }
  .own-status-card .row{ display:flex; justify-content:space-between; font-size:12.5px; padding:6px 0; border-bottom:1px dashed var(--border); }
  .own-status-card .row:last-child{ border-bottom:none; }
  .own-status-card .label{ color:var(--text-dim); }
  .own-status-card .val{ font-family:var(--font-mono); }

  .sidebar-footer{ padding:14px; border-top:1px solid var(--border); }
  .btn-ghost{
    width:100%; background:transparent; border:1px solid var(--border); color:var(--text-dim);
    padding:9px; border-radius:9px; font-size:12.5px; cursor:pointer;
  }
  .btn-ghost:hover{ color:var(--text); border-color:var(--text-faint); }

  /* ---------- Main / map ---------- */
  #main{ flex:1; position:relative; height:100vh; }
  #map{ position:absolute; inset:0; z-index:1; background:#0d1520; }
  .leaflet-container{ font-family:var(--font-body) !important; background:#0d1520 !important; }

  #topbar{
    position:absolute; top:16px; left:16px; right:16px; z-index:400;
    display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none;
  }
  .topbar-card{
    pointer-events:auto; background:rgba(27,39,52,.9); backdrop-filter:blur(6px);
    border:1px solid var(--border); border-radius:10px; padding:9px 14px; font-size:12.5px;
  }
  .topbar-title{ font-family:var(--font-display); font-weight:600; font-size:14px; }

  .marker-pin{
    width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
    border:2px solid #04231A; box-shadow:0 2px 8px rgba(0,0,0,.4);
  }
  .marker-pin.live{ background:var(--accent); }
  .marker-pin.stale{ background:var(--accent-2); }
  .marker-pin.offline{ background:var(--text-faint); }
  .leaflet-popup-content-wrapper{ background:var(--panel); color:var(--text); border-radius:9px; }
  .leaflet-popup-tip{ background:var(--panel); }
  .popup-name{ font-family:var(--font-display); font-weight:600; font-size:13px; margin-bottom:2px; }
  .popup-when{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); }

  /* ---------- Rótulo de nome no mapa ---------- */
  .driver-label{
    background:rgba(27,39,52,.92); border:1px solid var(--border); color:var(--text);
    font-family:var(--font-body); font-size:11px; font-weight:600; padding:2px 8px;
    border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.35); white-space:nowrap;
  }
  .driver-label::before{ display:none; } /* remove seta padrão do tooltip */
  .driver-label.status-live{ border-color:var(--accent); color:var(--accent); }
  .driver-label.status-stale{ border-color:var(--accent-2); color:var(--accent-2); }
  .driver-label.status-offline{ border-color:var(--text-faint); color:var(--text-dim); }

  /* ---------- Users panel (admin) ---------- */
  #users-view{
    position:absolute; inset:0; z-index:2; background:var(--bg); display:none;
    overflow-y:auto; padding:28px 32px;
  }
  #users-view.active{ display:block; }
  .users-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .users-header h2{ font-family:var(--font-display); font-size:20px; margin:0; }
  .users-header p{ color:var(--text-dim); font-size:13px; margin:4px 0 0; }
  .btn-accent{
    background:var(--accent); color:#04231A; border:none; padding:10px 16px; border-radius:9px;
    font-weight:600; font-size:13px; cursor:pointer;
  }
  .btn-accent:hover{ opacity:.9; }

  table.users-table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
  table.users-table th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim);
    padding:12px 16px; background:var(--panel-2); font-weight:600;
  }
  table.users-table td{ padding:12px 16px; font-size:13px; border-top:1px solid var(--border); }
  .role-badge{ font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600; }
  .role-badge.admin{ background:rgba(255,179,71,.15); color:var(--accent-2); }
  .role-badge.user{ background:rgba(76,217,176,.15); color:var(--accent); }
  .row-actions{ display:flex; gap:8px; }
  .icon-btn{
    background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim);
    width:28px; height:28px; border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover{ color:var(--text); border-color:var(--text-faint); }
  .icon-btn.danger:hover{ color:var(--danger); border-color:var(--danger); }

  /* ---------- Modal ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(6,10,15,.6); backdrop-filter:blur(2px);
    z-index:2000; display:none; align-items:center; justify-content:center;
  }
  .modal-backdrop.active{ display:flex; }
  .modal{
    width:100%; max-width:400px; background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:26px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .modal h3{ font-family:var(--font-display); margin:0 0 18px; font-size:17px; }
  .modal-actions{ display:flex; gap:10px; margin-top:20px; }
  .btn-secondary{ background:var(--panel-2); color:var(--text); border:1px solid var(--border); padding:10px; border-radius:9px; cursor:pointer; flex:1; font-size:13px; }
  .modal .btn-accent{ flex:1; }
  .hint{ font-size:11.5px; color:var(--text-faint); margin-top:4px; }

  /* ---------- Canhoto (driver) ---------- */
  .btn-camera{
    width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    padding:10px; border-radius:9px; font-size:13px; cursor:pointer; display:flex;
    align-items:center; justify-content:center; gap:6px; margin-bottom:10px;
    transition:background .15s, border-color .15s;
  }
  .btn-camera:hover{ background:var(--panel); border-color:var(--accent-dim); }
  .btn-camera:disabled{ opacity:.5; cursor:not-allowed; }

  .canhoto-thumbs{ display:flex; gap:6px; flex-wrap:wrap; }
  .canhoto-thumb{
    width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--border);
    cursor:pointer; transition:border-color .15s; flex-shrink:0;
  }
  .canhoto-thumb:hover{ border-color:var(--accent); }
  .canhoto-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ---------- Canhoto (admin) ---------- */
  #canhotos-view{
    position:absolute; inset:0; z-index:2; background:var(--bg); display:none;
    overflow-y:auto; padding:28px 32px;
  }
  #canhotos-view.active{ display:block; }
  .canhotos-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
  .canhotos-header h2{ font-family:var(--font-display); font-size:20px; margin:0; }
  .canhotos-filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .canhotos-filters select, .canhotos-filters input[type=date]{
    background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
    padding:9px 11px; border-radius:8px; font-size:13px; outline:none; font-family:var(--font-body);
  }
  .canhotos-filters select:focus, .canhotos-filters input[type=date]:focus{ border-color:var(--accent); }
  .canhotos-filters .btn-accent{ padding:9px 14px; font-size:12.5px; }

  .canhoto-grid{
    display:grid; gap:14px;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  }
  .canhoto-card{
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    overflow:hidden; cursor:pointer; transition:border-color .15s, transform .1s;
  }
  .canhoto-card:hover{ border-color:var(--accent); transform:translateY(-1px); }
  .canhoto-card img{ width:100%; height:160px; object-fit:cover; display:block; }
  .canhoto-card-info{
    padding:8px 10px; display:flex; flex-direction:column; gap:2px;
  }
  .canhoto-card-name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .canhoto-card-date{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); }

  /* ---------- Modal foto ---------- */
  .modal-photo{ max-width:560px; text-align:center; }
  .modal-photo img{ width:100%; max-height:65vh; object-fit:contain; border-radius:8px; background:#000; }
  .modal-photo-info{ font-size:13px; color:var(--text-dim); margin:10px 0; }
  .modal-photo .btn-secondary:only-child{ width:100%; }
  .modal-photo .modal-actions .btn-secondary,
  .modal-photo .modal-actions .btn-accent{ flex:1; }
  .btn-danger{ background:var(--danger); color:#fff; border:none; padding:10px; border-radius:9px; cursor:pointer; flex:1; font-size:13px; }
  .btn-danger:hover{ opacity:.85; }

  /* ---------- Modal câmera ---------- */
  .modal-camera{ max-width:560px; text-align:center; padding:0; overflow:hidden; background:#000; }
  .modal-camera video{ width:100%; max-height:70vh; display:block; object-fit:cover; }
  .modal-camera .modal-actions{ padding:16px; gap:12px; margin:0; background:var(--panel); }

  /* ---------- Table wrap (mobile) ---------- */
  .table-wrap{ overflow-x:auto; }

  /* ---------- Mobile ---------- */
  @media (max-width: 820px){
    #app.active{ flex-direction:column; }
    #sidebar{ width:100%; height:auto; max-height:42vh; border-right:none; border-bottom:1px solid var(--border); }
    #main{ height:58vh; flex:1; }
    #users-view{ padding:18px; }
    #canhotos-view{ padding:18px; }
    .canhoto-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
    .canhoto-card img{ height:120px; }
    .users-header{ flex-direction:column; align-items:flex-start; }
    .users-table{ font-size:12px; }
    .users-table th, .users-table td{ padding:10px 10px; }
    .nav-tabs{ overflow-x:auto; flex-wrap:nowrap; }
    .nav-tab{ flex:0 0 auto; padding:8px 12px; white-space:nowrap; }
  }

  @media (max-width: 480px){
    #sidebar{ max-height:38vh; }
    #main{ height:62vh; }
    .login-card{ padding:24px 18px; }
    .canhoto-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
    .canhoto-card img{ height:100px; }
    .canhotos-header{ flex-direction:column; align-items:stretch; }
    .canhotos-filters{ flex-direction:column; align-items:stretch; }
    .modal-photo{ margin:10px; }
  }