/* =========================================================================
   DriverApp — warstwa motywu (UI/UX refresh)
   Czysty CSS nakładany PO Buefy/Bulma. Nie zmienia struktury ani komponentów
   — tylko wygląd (kolory, typografia, zaokrąglenia, cienie, odstępy).
   Wdrożenie: dołączyć ten plik <link>-iem po głównym CSS. Odwracalne (usuń link).
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --brand-600:#4f46e5;   /* indigo */
  --brand-500:#6366f1;
  --brand-700:#4338ca;
  --ink-900:#0f172a;     /* slate */
  --ink-700:#334155;
  --ink-500:#64748b;
  --line:#e2e8f0;
  --surface:#ffffff;
  --bg:#eef2f7;
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md:0 8px 24px rgba(15,23,42,.10);
  --shadow-lg:0 24px 60px rgba(2,6,23,.22);
}

/* ---- typografia / tło ---- */
html, body{ background:var(--bg) !important; }
body, button, input, select, textarea,
.title, .subtitle, .navbar, .button, .input, .label, .table{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.title{ color:var(--ink-900); font-weight:800; letter-spacing:-.02em; }
.subtitle{ color:var(--ink-500); }
strong{ color:var(--ink-900); }

/* ---- powierzchnie: box / card / modal ---- */
.box, .card{
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  border:1px solid var(--line);
}
.modal-card{ border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.modal-card-head, .modal-card-foot{ background:#f8fafc; border-color:var(--line); }
.modal-card-title{ color:var(--ink-900); font-weight:700; }

/* ---- navbar ---- */
.navbar.is-info{
  background:linear-gradient(90deg, var(--brand-700), var(--brand-600)) !important;
  box-shadow:var(--shadow-sm);
}
.navbar.is-info .navbar-item, .navbar.is-info .navbar-link{
  font-weight:500; color:#e8eaff !important; transition:background .15s ease, color .15s ease;
}
.navbar.is-info .navbar-item:hover, .navbar.is-info a.navbar-item:focus,
.navbar.is-info .navbar-item.is-active{
  background:rgba(255,255,255,.14) !important; color:#fff !important; border-radius:8px;
}
.navbar.is-info .navbar-brand img{ filter:brightness(0) invert(1); }

/* ---- przyciski ---- */
.button{
  border-radius:var(--radius-sm);
  font-weight:600;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.button:active{ transform:translateY(1px); }
.button.is-info{
  background:linear-gradient(180deg, var(--brand-500), var(--brand-600)) !important;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 2px 6px rgba(79,70,229,.35);
}
.button.is-info:hover{ box-shadow:0 6px 18px rgba(79,70,229,.45); filter:brightness(1.03); }
.button.is-primary{
  background:linear-gradient(180deg,#10b981,#059669) !important; border-color:transparent !important;
  box-shadow:0 2px 6px rgba(5,150,105,.30);
}
.button.is-danger{ box-shadow:0 2px 6px rgba(239,68,68,.25); }

/* ---- pola formularzy ---- */
.input, .textarea, .select select{
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  height:2.85em;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select select:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}
.control.has-icons-left .icon{ color:var(--ink-500); }
.label{ color:var(--ink-700); font-weight:600; }

/* ---- tabele ---- */
.table{ border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.table th{
  background:#f8fafc; color:var(--ink-700); font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; font-size:.72rem; border-color:var(--line);
}
.table td{ border-color:#f1f5f9; vertical-align:middle; color:var(--ink-700); }
.table.is-hoverable tbody tr:hover, .table tbody tr:hover{ background:#f5f7ff !important; }

/* ---- notyfikacje / tagi ---- */
.notification{ border-radius:var(--radius-sm); }
.tag{ border-radius:8px; font-weight:600; }

/* =========================================================================
   EKRAN LOGOWANIA (auth layout: .hero.has-background-info)
   ========================================================================= */
.hero.has-background-info{
  background:radial-gradient(1200px 600px at 70% -10%, #6366f1 0%, transparent 60%),
             linear-gradient(135deg, #4338ca 0%, #4f46e5 45%, #2563eb 100%) !important;
}
.hero.has-background-info .box{
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:2.75rem 2.5rem 2.25rem;
  border:0;
}
/* tytuł loginu: zamiast monospace -> czysty Inter */
.hero.has-background-info .box .title.is-family-monospace{
  font-family:'Inter', sans-serif !important;
  font-weight:800; color:var(--ink-900); margin-top:.4rem; margin-bottom:1.4rem; font-size:1.5rem;
}
/* logo w delikatnym kółku */
.hero.has-background-info .box img.center{
  width:96px !important; height:96px; padding:18px;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff);
  border-radius:50%; box-shadow:inset 0 0 0 1px #e0e7ff;
}
.hero.has-background-info .box .loginButton{
  width:100% !important; height:3em; font-size:1.05rem; margin-top:.4rem;
}