.digital-clock{
    font-size: 10px !important;
}

#langDropdown{
    font-size: 10px;
}

.language-dropdown .dropdown-item{
    font-size: 10px;
}

.language-dropdown .dropdown-menu{
    min-width: 30px;
}



.language-dropdown #langDropdown img{
    margin-right: 5px;
}

.language-dropdown .lang-option img{
    margin-right: 5px;
}

.submit{
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.spinner{
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.35); /* gray ring */
  border-top-color:#fff;                   /* white arc */
  border-radius:50%;
  animation:spin .8s linear infinite;
  display:none; /* hidden until loading */
}
.submit.is-loading .spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

:root{
    --bg: #f6f9fc;
    --card-bg:#fff;
    --text:#0b1b3a;
    --muted:#6B7280;
    --heading:#0f172a;
    --border:#e2e8f0;
    --divider:#eef2f7;
    --input-bg:#fff;
    --nav-bg:#6B7280;
    --loader-bg: rgba(255, 255, 255, 0.85);
    --success:#22c55e;
    --warn:#facc15;
    --danger:#ef4444;
    --track:#e5e7eb;
    --radius:16px;
    --shadow: 0 8px 24px rgba(15,23,42,.08);
}
html,body{height:100%}
body{
margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
background: var(--bg); color: var(--text);
}

body.theme-dark{
    --bg:#0b1220;
    --card-bg:#111827;
    --text:#e5edf7;
    --muted:#9ca3af;
    --heading:#f8fafc;
    --border:#2f3a4a;
    --divider:#223044;
    --input-bg:#0f172a;
    --track:#253044;
    --nav-bg:#111827;
    --shadow: 0 12px 30px rgba(0,0,0,.32);
    --loader-bg: rgba(11, 18, 32, 0.9);
}
.wrap{ max-width: 1060px; margin: 24px auto; padding: 0 16px;}
.grid{
display: grid; gap: 18px;
grid-template-columns: 1fr;     /* mobile */
}
/* tablet & up => 2 columns (like your picture) */
@media (min-width: 768px){
.grid{ grid-template-columns: 1fr 1fr; }
}

.card{
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--border);
padding: 18px 18px 16px;
}
.title{
margin:0 0 14px; font-weight:800; letter-spacing:.2px;
color:var(--heading); font-size: clamp(18px, 2.1vw, 22px);
}
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.dot{ width:12px; height:12px; border-radius:50%; background:#22c55e; }
.muted{ color: var(--muted); font-size:14px; margin:4px 0 10px; }
.big{
font-size: clamp(22px, 3.6vw, 28px); font-weight:800; letter-spacing:.3px;
margin:2px 0 4px;
}

/* progress bar */
.bar{
height: 12px; background: var(--track); border-radius: 999px; overflow:hidden;
position: relative;
}
.bar .fill{
--pct: 50%;
width: var(--pct);
height: 100%;
background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 10px, rgba(255,255,255,.22) 10px 20px),
    var(--color, #22c55e);
transition: width .3s ease;
}
.mt8{ margin-top:8px } .mt10{ margin-top:10px } .mt12{ margin-top:12px }
.legend{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pill{ display:inline-flex; align-items:center; gap:8px; margin-right:16px; color:var(--heading); }
.sq{ width:18px; height:18px; border-radius:6px; background:#22c55e; }
.sq.warn{ background:#facc15; }
.sq.danger{ background:#ef4444; }

/* small helper labels */
.label{ color:var(--heading); font-weight:700; margin:10px 0 6px; }
.hint{ color: var(--muted); font-size:13px; }

/* service bar uses yellow */
.bar.service .fill{ --color: var(--warn); }

.driver-summary .row{
    margin: 0px;
}

.driver-summary .muted{
    margin-bottom: 0px;
}

.card.driver-summary .divider{
  margin: 12px 0; height:1px; background:var(--divider); border-radius:1px;
}

.card.driver-summary .meta{
  display:grid;
  gap:10px;
}

.card.driver-summary .meta-item{
  display:flex; align-items:flex-start; gap:10px;
}

.card.driver-summary .meta-ic{
  width:18px; height:18px; color:var(--muted); margin-top:2px; flex:0 0 auto;
}

.card.driver-summary .meta-label{
  color: var(--muted); font-size:12px; line-height:1.2;
}

.card.driver-summary .meta-value{
  color:var(--heading); font-weight:700; font-size:14px; line-height:1.35;
  word-break: break-word; /* long addresses wrap nicely */
}

/* keep dot + name + chip inline; let name wrap */
.card.driver-summary .row-head{
  display:flex;
  align-items:center;          /* inline look */
  gap:12px;
}

.card.driver-summary .dot{
  flex:0 0 12px;               /* fixed dot width so name has predictable space */
  width:12px; height:12px; border-radius:50%; background:#22c55e;
}

/* name takes remaining space, can wrap onto new lines */
.card.driver-summary .driver-name{
  flex:1 1 auto;
  min-width:0;                 /* critical for wrapping in flex */
  font-size:18px; font-weight:800; line-height:1.25;
  overflow-wrap:anywhere;      /* wrap even without spaces */
  word-break:break-word;
  hyphens:auto;
}



/* Driver Summary header: keep dot + name + chip on one line */
.card.driver-summary .row-head{
  display:flex !important;
  align-items:center !important;
  gap:12px;
  flex-wrap:nowrap !important;     /* override your global .row wrap */
}

.card.driver-summary .dot{
  flex:0 0 12px;
  width:12px; height:12px; border-radius:50%; background:#22c55e;
}

/* Name may wrap within its own flex item */
.card.driver-summary .driver-name{
  flex:1 1 auto;
  min-width:0;                     /* critical so text can wrap */
  line-height:1.25; font-weight:800; font-size:18px;
  overflow-wrap:anywhere;          /* wrap even without spaces */
  word-break:break-word;
  hyphens:auto;
}


/* make Counters items always one-under-another */
.card.counters .legend{
  display: grid;            /* or: flex */
  grid-template-columns: 1fr;  /* one column, always */
  gap: 10px;
}
.card.counters .pill{
  margin: 0;                /* remove right margin from earlier */
  width: 100%;              /* optional: make each row full width */
  justify-content: flex-start;
}

.current-activity-data{
    margin-top: 20px;
}

.current-activity-data .continous_driving_time{
    text-align: left;
    font-weight: 700;
}

body.theme-light{
    color-scheme: light;
}

body.theme-dark{
    color-scheme: dark;
}

body.theme-dark .device{
    background: var(--card-bg);
    border: 1px solid var(--border);
}

body.theme-light .device,
body.theme-light .device .header{
    background: #fff;
}

body.theme-light .device{
    border: 0;
}

body.theme-dark .brand,
body.theme-dark .big,
body.theme-dark .remember,
body.theme-dark .control input{
    color: var(--heading);
}

body.theme-dark .subtitle,
body.theme-dark label,
body.theme-dark .foot,
body.theme-dark .icon,
body.theme-dark .toggle{
    color: var(--muted);
}

body.theme-dark .control{
    background: var(--input-bg);
    border-color: var(--border);
}

body.theme-dark .control:focus-within{
    border-color:#60a5fa;
    box-shadow: 0 0 0 4px rgba(96,165,250,.18);
}

body.theme-dark .control input::placeholder{
    color:#64748b;
}

body.theme-dark .device .header img.logo{
    content: url("../img/login_logo_white.png");
    background: transparent;
    box-shadow: none;
    object-fit: contain;
}

body.theme-dark .navbar-brand img{
    content: url("../img/logo_white.png");
}

body.theme-dark .navbar.bg-grey,
body.theme-dark .bg-grey{
    background-color: var(--nav-bg) !important;
}

body.theme-light .navbar.bg-grey,
body.theme-light .bg-grey{
    background-color: #fff !important;
    border-bottom-color: #e5e7eb;
}

body.theme-light .digital-clock,
body.theme-light .gmt-label{
    color: #0f172a;
}

body.theme-dark .navbar{
    border-bottom-color: var(--border);
}

body.theme-dark #loader{
    background-color: var(--loader-bg);
}

body.theme-dark #langDropdown{
    color: var(--heading);
    border-color: var(--border);
}

body.theme-dark .dropdown-menu{
    background-color: var(--card-bg);
    border-color: var(--border);
}

body.theme-dark .dropdown-item{
    color: var(--heading);
}

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus{
    color: var(--heading);
    background-color: #1f2937;
}

body.theme-dark .progress{
    background-color: var(--track);
}