/* =============================================================================
   DriverGuard — ό,τι δεν καλύπτει το θέμα του MudBlazor
   =============================================================================
   Τα χρώματα δεν ορίζονται εδώ. Έρχονται από τις μεταβλητές --mud-palette-*, που τις
   παράγει το DriverGuardTheme μέσω του MudThemeProvider. Έτσι η εναλλαγή φωτεινού/
   σκοτεινού θέματος αλλάζει *ένα* πράγμα, και δεν υπάρχει δεύτερη παλέτα να ξεχαστεί
   εκτός συγχρονισμού. Εξαίρεση: η οθόνη φόρτωσης και η οθόνη σύνδεσης, που ζωγραφίζονται
   πριν (ή έξω από) το θέμα.
   ========================================================================== */

/* Οι χρόνοι στοιχίζονται κάθετα μόνο με tabular figures — αλλιώς οι στήλες «χορεύουν». */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ta-right { text-align: right; }
.ta-left  { text-align: left; }
.muted    { color: var(--mud-palette-text-secondary); }

/* ── Σήμα ───────────────────────────────────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: inherit;
  text-decoration: none;
}

.brand-mark { display: block; flex: none; }
.brand-name { font-weight: 650; letter-spacing: -.02em; font-size: 1.05rem; line-height: 1.2; }
.brand-by   { font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* Η μπάρα και το συρτάρι είναι δύο επιφάνειες που ακουμπούν: χωρίς γραμμή μεταξύ τους
   το περιεχόμενο μοιάζει να κρέμεται. */
.dm-appbar { border-bottom: 1px solid var(--mud-palette-divider); }
.appbar-brand { margin-right: 1.25rem; }

.dm-drawer { border-right: 1px solid var(--mud-palette-divider); }

/* ── Συρτάρι ────────────────────────────────────────────────────────────── */

/* Το υποσέλιδο του συρταριού πέφτει στον πάτο μόνο αν το περιεχόμενο είναι στήλη. */
.mud-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dm-nav { padding: .5rem .5rem 0; }

.nav-section {
  display: block;
  color: var(--mud-palette-text-secondary);
  padding: .875rem .75rem .25rem;
}

.dm-nav .mud-nav-link { border-radius: 8px; margin-bottom: 2px; }
.dm-nav .mud-nav-link.active { font-weight: 600; }

.sidebar-foot {
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--mud-palette-divider);
  font-size: .75rem;
  line-height: 1.45;
  color: var(--mud-palette-text-secondary);
}

.sidebar-foot p { margin: 0; }

.sidebar-foot .sidebar-build {
  margin-top: .625rem;
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

.build-brand { font-weight: 600; letter-spacing: .01em; }

/* ── Επικεφαλίδα οθόνης ─────────────────────────────────────────────────── */

.content { padding-top: 1.5rem; padding-bottom: 3rem; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.page-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.02em;
}

/* Ο router εστιάζει τον h1 μετά από κάθε πλοήγηση για τους αναγνώστες οθόνης.
   Χρήσιμο· δεν χρειάζεται όμως να φαίνεται ως πλαίσιο εστίασης. */
.page-head h1:focus { outline: none; }

.page-sub {
  font-size: .8125rem;
  color: var(--mud-palette-text-secondary);
  margin-top: .125rem;
}

.crumbs { padding: 0 0 .5rem; font-size: .8125rem; }

/* Τα φίλτρα δεξιά στην επικεφαλίδα, στοιχισμένα στη γραμμή βάσης· τυλίγονται σε στενή
   οθόνη. Χωρίς κάτω περιθώριο από το MudBlazor, που εδώ θα ξεχείλωνε την επικεφαλίδα. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.filters .filter .mud-input-control { margin: 0; }
.filter--driver { min-width: 14rem; }
.filter--date   { width: 10.5rem; }

/* ── Κάρτες ─────────────────────────────────────────────────────────────── */

.card, .kpi { padding: 1.125rem 1.25rem; }

/* Πίνακας μέσα σε κάρτα: ο ίδιος ο πίνακας ακουμπά τα άκρα, η κεφαλίδα κρατά το padding. */
.card--table { padding: 0; overflow: hidden; }
.card--table .card-head { padding: 1.125rem 1.25rem 0; }
.card-pad { padding: 1.125rem 1.25rem; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card-head .mud-button-root { white-space: nowrap; flex-shrink: 0; }

.grid { display: grid; gap: 1rem; margin-bottom: 1rem; }

/* Το min(100%, …) δεν είναι διακοσμητικό: ένα σκέτο minmax(215px, 1fr) υπόσχεται
   στήλη 215px και σε κινητό η σελίδα αποκτά οριζόντια κύλιση. */
.grid-kpi    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.grid-halves { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

.kpi-label { display: block; color: var(--mud-palette-text-secondary); font-size: .8125rem; }

.kpi-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -.02em;
  margin: .25rem 0;
  line-height: 1.2;
}

.kpi-value.accent { color: var(--mud-palette-primary); }
.kpi-value.warn   { color: var(--mud-palette-warning); }

.kpi-foot {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  flex-wrap: wrap;
}

.note { margin-bottom: 1rem; }

/* ── Πίνακες ────────────────────────────────────────────────────────────── */

.entity-name { font-weight: 550; }

.dm-table .mud-table-cell,
.dm-table th,
.dm-table td { border-bottom-color: var(--mud-palette-table-lines); }

.dm-table th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

.dm-table.mud-table .mud-table-head .mud-table-cell { font-weight: 600; font-size: .75rem; letter-spacing: .02em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }

.row-link { cursor: pointer; }

/* Το τελευταίο διαχωριστικό συμπίπτει με το περίγραμμα της κάρτας. */
.card--table tbody tr:last-child td,
.card--table .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none; }

/* ── Χάρτης ─────────────────────────────────────────────────────────────── */

.card--map { padding: 0; overflow: hidden; margin-bottom: 1rem; position: relative; }
.map { height: 380px; width: 100%; background: var(--mud-palette-background-gray); }

.map-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: .875rem;
}

/* Το κουμπί της μεγέθυνσης κάθεται πάνω στον χάρτη, δεξιά — τα χειριστήρια του ζουμ του
   Leaflet είναι αριστερά. Το z-index είναι πάνω από τα panes του χάρτη (400-700). */
.map-expand {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 800;
  background: var(--mud-palette-surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
}
.map-expand:hover { background: var(--mud-palette-action-default-hover); }

/* Πλήρης οθόνη χωρίς το Fullscreen API: η κάρτα γίνεται fixed πάνω σε όλο το παράθυρο.
   Το 1200 περνάει πάνω από το μενού (1100) και κάτω από τους διαλόγους (1400) του MudBlazor,
   ώστε ένα μήνυμα να μη κρυφτεί πίσω από τον χάρτη. */
.card--map-full {
  position: fixed;
  inset: 0;
  z-index: 1200;
  margin: 0;
  border-radius: 0;
  border: none;
}
.card--map-full .map { height: 100%; }

/* Οι πλακίδες του OpenStreetMap είναι φωτεινές: στο σκοτεινό θέμα χαμηλώνουμε τον τόνο
   ώστε να μη φωτίζουν ολόκληρη τη σελίδα. */
.dark-map .leaflet-tile { filter: brightness(.7) saturate(.6) contrast(1.05); }

/* ── Λίστες ─────────────────────────────────────────────────────────────── */

.alert-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.alerts .mud-list-item { border-radius: 8px; }

/* ── Κενή κατάσταση ─────────────────────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  gap: .25rem;
}

.empty-icon { font-size: 2.25rem; color: var(--mud-palette-text-disabled); margin-bottom: .25rem; }
.empty-text { max-width: 28rem; }

/* ── Μενού λογαριασμού ──────────────────────────────────────────────────── */

.account-head { padding: .625rem 1rem; }
.account-name { font-weight: 600; font-size: .875rem; }
.account-email { font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* ── Χρώμα έμφασης (επιλογέας στο μενού λογαριασμού) ───────────────────── */

.theme-field { padding: .625rem 1rem; }

.theme-field-label {
  font-size: .75rem;
  color: var(--mud-palette-text-secondary);
  margin-bottom: .375rem;
}

.theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: 11.5rem;
}

/* Το δείγμα είναι κουμπί και όχι κουτάκι επιλογής: το χρώμα *είναι* η ετικέτα του. Το
   περίγραμμα εστίασης μένει — είναι ο μόνος τρόπος να το βρει κανείς με πληκτρολόγιο. */
.theme-swatch {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}

.theme-swatch:hover { transform: scale(1.08); }

.theme-swatch.is-chosen {
  border-color: var(--mud-palette-surface);
  box-shadow: 0 0 0 2px var(--swatch);
}

/* ── Οθόνη φόρτωσης ─────────────────────────────────────────────────────── */

.loading-splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: #0e1116;
  color: #8b949e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .875rem;
}

@media (prefers-color-scheme: light) {
  .loading-splash { background: #f6f8fa; color: #636c76; }
}

/* ── Προσβασιμότητα ─────────────────────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 3000; /* πάνω από τη μπάρα και το συρτάρι του MudBlazor */
  padding: .6rem 1rem;
  border-radius: 6px;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

#main:focus { outline: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ── Οθόνη σύνδεσης ─────────────────────────────────────────────────────── */
/* Στέκεται μόνη της, έξω από μπάρα και συρτάρι. Η κάρτα επιπλέει πάνω σε ένα διακριτικό
   πλέγμα με φωτεινή αχλή στο χρώμα της εφαρμογής. */

.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  position: relative;
  overflow-x: hidden;
  background-color: var(--mud-palette-background);
  transition: background-color .3s ease;
}

.auth-shell--dark { background-color: #0c121e !important; }

.auth-theme {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  border-radius: 9999px !important;
}

.auth-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.auth-shell--dark .auth-bg-glow {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) 0%, color-mix(in srgb, var(--mud-palette-primary) 5%, transparent) 55%, transparent 75%),
    radial-gradient(ellipse 60% 50% at 90% 85%, color-mix(in srgb, var(--mud-palette-primary) 16%, transparent) 0%, color-mix(in srgb, var(--mud-palette-primary) 4%, transparent) 50%, transparent 75%),
    radial-gradient(ellipse 50% 45% at 10% 80%, color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) 0%, color-mix(in srgb, var(--mud-palette-primary) 3%, transparent) 45%, transparent 70%),
    radial-gradient(circle 420px at 50% 50%, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) 0%, transparent 70%);
}

.auth-shell--light .auth-bg-glow {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 90% 85%, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 0%, transparent 60%),
    radial-gradient(circle 380px at 50% 50%, color-mix(in srgb, var(--mud-palette-primary) 5%, transparent) 0%, transparent 70%);
}

.auth-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 20%, transparent 85%);
}

.auth-shell--dark .auth-bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 40px 40px;
  background-position: center center;
  opacity: .9;
}

.auth-shell--light .auth-bg-grid {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 40px 40px;
  background-position: center center;
  opacity: .8;
}

.auth-card {
  width: 100%;
  max-width: 25.5rem;
  padding: 1.75rem 1.625rem;
  border-radius: 1rem !important;
  position: relative;
  z-index: 1;
  transition: box-shadow .25s ease, border-color .25s ease;
}

.auth-shell--dark .auth-card {
  background: rgba(22, 27, 34, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 60px -15px rgba(0, 0, 0, 0.75),
    0 0 45px -10px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
}

.auth-shell--light .auth-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 40%, transparent) !important;
  box-shadow:
    0 20px 45px -15px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

@media (max-width: 480px) {
  .auth-shell { padding: 3.5rem 1rem 1.5rem; }
  .auth-card  { padding: 1.5rem 1.25rem; }
  .auth-theme { top: .75rem; right: .75rem; }
}

.auth-brand { margin-bottom: 1.25rem; width: fit-content; }

.auth-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -.02em;
}

.auth-title:focus { outline: none; }

.auth-sub {
  margin: .375rem 0 1.25rem;
  font-size: .8125rem;
  color: var(--mud-palette-text-secondary);
}

.auth-foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mud-palette-divider);
  font-size: .8125rem;
  color: var(--mud-palette-text-secondary);
  text-align: center;
}

.auth-foot a { color: inherit; }

/* Το «έλεγχος συνεδρίας…» του router, όσο ρωτάμε το API ποιος είναι. */
.auth-waiting {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 4rem auto;
  border: none;
  font-size: .875rem;
  color: var(--mud-palette-text-secondary);
}

/* ── Σφάλμα Blazor ──────────────────────────────────────────────────────── */

#blazor-error-ui {
  color-scheme: light only;
  background: #fff3cd;
  color: #1f2328;
  bottom: 0;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: .6rem 1.25rem .7rem;
  position: fixed;
  width: 100%;
  z-index: 4000;
  font-size: .875rem;
}

#blazor-error-ui .reload { margin-left: .5rem; }

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: .75rem;
  top: .5rem;
}

/* Σύντομες στάσεις κάτω από τον πίνακα περιόδων της βάρδιας. */
.card--table .stops-head { padding-top: 1.25rem; border-top: 1px solid var(--mud-palette-lines-default); margin-top: .25rem; }
.stops-note { margin: .75rem 0 1rem; }

/* «Υπάρχει νέα έκδοση» (Layout/UpdateHint.razor): πάνω από το περιεχόμενο, σε όλο το πλάτος. */
.update-hint { margin: 0; }
.update-hint .mud-alert-message { display: flex; align-items: center; flex-wrap: wrap; }