/*
  Kombit Tech System — UI polish (Bootstrap-friendly)
  ------------------------------------------------
  Goals:
  - keep your existing structure/routes intact
  - make pages feel modern, clean, and mobile-friendly
  - avoid heavy JS or template logic changes
*/

:root{
  --kl-primary:#0b1222;     /* official KLM navy */
  --kl-primary-2:#132f7a;   /* official KLM deep blue */
  --kl-accent:#ffdd57;      /* warm accent */
  --kl-ink:#0f172a;         /* slate-900 */
  --kl-muted:#64748b;       /* slate-500 */
  --kl-bg:#f6f7fb;          /* light canvas */
  --kl-card:#ffffff;
  --kl-border:rgba(15,23,42,.10);
  --kl-shadow:0 10px 30px rgba(2,6,23,.08);
}

/* Base */
.kl-body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(31,58,147,.16), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(255,221,87,.18), transparent 55%),
              var(--kl-bg);
  color: var(--kl-ink);
}

a{ text-decoration:none; }
a:hover{ text-decoration:none; }

/* Navbar */
.kl-navbar{
  background: linear-gradient(90deg, #0b1222 0%, #101a34 45%, #132f7a 100%);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.kl-navbar .navbar-brand{
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
}
.kl-navbar .navbar-brand i{ color: var(--kl-accent); }
.kl-navbar .nav-link{ color: rgba(255,255,255,.92) !important; font-weight: 500; }
.kl-navbar .nav-link:hover{ color:#fff !important; }
.kl-navbar .dropdown-menu{ border: 1px solid var(--kl-border); box-shadow: var(--kl-shadow); border-radius: 14px; }

/* Page wrapper */
.kl-page{
  padding-top: 1rem;
}

/* Cards */
.card{
  border: 1px solid var(--kl-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
.card .card-header{
  background: rgba(2,6,23,.02);
  border-bottom: 1px solid var(--kl-border);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.kl-card-hover{
  transition: transform .12s ease, box-shadow .12s ease;
}
.kl-card-hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--kl-shadow);
}

/* Buttons */
.btn{
  border-radius: 12px;
}
.btn-primary{
  background-color: var(--kl-primary);
  border-color: var(--kl-primary);
}
.btn-primary:hover{
  background-color: #17307a;
  border-color: #17307a;
}
.btn-outline-primary{
  color: var(--kl-primary);
  border-color: rgba(31,58,147,.35);
}
.btn-outline-primary:hover{
  background: rgba(31,58,147,.10);
  border-color: rgba(31,58,147,.55);
  color: var(--kl-primary);
}

/* Badges */
.badge{
  border-radius: 999px;
  padding: .4em .65em;
  font-weight: 600;
}

/* Alerts */
.alert{
  border-radius: 14px;
  border: 1px solid var(--kl-border);
}

/* Lists & tables */
.list-group-item{
  border-color: var(--kl-border);
}
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  font-size: .85rem;
  color: var(--kl-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Hero */
.kl-hero{
  background: linear-gradient(135deg, rgba(31,58,147,.10), rgba(255,221,87,.12));
  border: 1px solid var(--kl-border);
  border-radius: 20px;
  padding: 1.25rem;
}
.kl-hero h1, .kl-hero h2{ font-weight: 800; letter-spacing: -.02em; }
.kl-hero p{ color: var(--kl-muted); }

/* Search input */
.kl-search{
  border-radius: 14px;
  border: 1px solid var(--kl-border);
  padding: .75rem .9rem;
}
.kl-search:focus{
  border-color: rgba(31,58,147,.45);
  box-shadow: 0 0 0 .2rem rgba(31,58,147,.12);
}

/* Footer */
.kl-footer{
  background: linear-gradient(90deg, var(--kl-primary), var(--kl-primary-2));
  border-top: 1px solid rgba(255,255,255,.10);
}
.kl-footer h5{ font-weight: 700; }
.kl-footer p{ color: rgba(255,255,255,.88); }

/* Small helpers */
.text-muted{ color: var(--kl-muted) !important; }
.kl-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .65rem;
  border:1px solid var(--kl-border);
  border-radius:999px;
  background: rgba(255,255,255,.7);
  color: var(--kl-muted);
  font-size: .85rem;
}

@media (max-width: 576px){
  .kl-hero{ padding: 1rem; }
}

/* Auth pages (crispy forms) */
.content-section{
  max-width: 560px;
  margin: 1.5rem auto;
  background: var(--kl-card);
  border: 1px solid var(--kl-border);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.content-section legend{
  font-weight: 800;
  letter-spacing: -.02em;
}


/* --- Extra polish (v3) --- */
.kl-hero-card{
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(13,110,253,.28), rgba(96,165,250,.12));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 45px rgba(2,6,23,.18);
  color: #0f172a;
}

/* Light hero variant (used for Parent Dashboard): white background + dark text */
.kl-hero-card.kl-hero-card--light{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
}

/* --- Kombit Lakay: light hero + dark text (Option C) --- */
.kl-hero-card .kl-crumbs { color: rgba(15, 23, 42, .70) !important; }
.kl-hero-card h1, .kl-hero-card h2, .kl-hero-card h3 { color: #0f172a !important; }
.kl-hero-card .text-muted { color: rgba(15, 23, 42, .68) !important; }

/* Buttons inside hero: keep "Back" visible on light backgrounds */
.kl-hero-card .btn-outline-light{
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, .30) !important;
}
.kl-hero-card .btn-outline-light:hover{
  background: rgba(15, 23, 42, .06) !important;
  border-color: rgba(15, 23, 42, .40) !important;
}

/* If you ever need a dark hero with white text, add `.kl-hero-card--dark` */
.kl-hero-card.kl-hero-card--dark h1,
.kl-hero-card.kl-hero-card--dark h2,
.kl-hero-card.kl-hero-card--dark h3{ color: #fff !important; }
.kl-hero-card.kl-hero-card--dark .text-muted{ color: rgba(255,255,255,.82) !important; }

.kl-crumbs{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(15, 23, 42, .70);
}
.kl-crumbs::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .55);
}

.kl-card{
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
}

.table{
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th{
  font-weight: 800;
  letter-spacing: -.01em;
  color: rgba(15,23,42,.92);
  background: rgba(15,23,42,.03);
}
.table td, .table th{ vertical-align: middle; }

.btn:focus, .btn:focus-visible, a:focus, a:focus-visible, input:focus, select:focus, textarea:focus{
  outline: 3px solid rgba(59,130,246,.35) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}


/* --- Account / Notifications polish --- */
.kl-unread{
  background: rgba(59,130,246,.06);
  border-left: 4px solid rgba(59,130,246,.65);
}

.kl-avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #0b1220;
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
}

.kl-form-card input[type="text"],
.kl-form-card input[type="email"],
.kl-form-card input[type="tel"],
.kl-form-card input[type="date"],
.kl-form-card input[type="number"],
.kl-form-card input[type="password"],
.kl-form-card select,
.kl-form-card textarea{
  width: 100%;
  padding: .6rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.92);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.kl-form-card input:focus,
.kl-form-card select:focus,
.kl-form-card textarea:focus{
  border-color: rgba(59,130,246,.65);
  box-shadow: 0 0 0 .22rem rgba(59,130,246,.16);
}

.kl-form-card input[type="checkbox"]{
  transform: translateY(1px);
}