/* =========================================================
   KALCETO BOOKING — APP THEME (Dark Blue, High Contrast)
   Qëllimi: gjithçka të jetë e dukshme + profesionale
   Vendose si app.css (file komplet) dhe bëj Ctrl+F5
   ========================================================= */

/* -------------------------
   1) Theme tokens
   ------------------------- */
   :root{
    /* Background + surfaces */
    --kb-bg: #0b1220;
    --kb-bg-2: #0a1022;
    --kb-surface: rgba(255,255,255,.06);
    --kb-surface-2: rgba(255,255,255,.09);
    --kb-border: rgba(255,255,255,.14);
    --kb-border-strong: rgba(255,255,255,.22);
  
    /* Text */
    --kb-text: rgba(255,255,255,.94);
    --kb-muted: rgba(255,255,255,.72);
    --kb-muted-2: rgba(255,255,255,.58);
  
    /* Accents */
    --kb-primary: #2f79ff;
    --kb-primary-hover: #1d5fe0;
    --kb-success: #22c55e;
    --kb-danger: #ef4444;
    --kb-warning: #f59e0b;
    --kb-info: #38bdf8;
  
    /* Shadows & radius */
    --kb-radius: 18px;
    --kb-radius-sm: 14px;
    --kb-shadow: 0 14px 46px rgba(0,0,0,.40);
    --kb-shadow-sm: 0 10px 26px rgba(0,0,0,.28);
  }
  
  /* -------------------------
     2) Global base
     ------------------------- */
  html, body{
    height: 100%;
  }
  
  body{
    background:
      radial-gradient(1100px 520px at 12% 0%, rgba(47,121,255,.20), transparent 62%),
      radial-gradient(900px 520px at 92% 18%, rgba(245,158,11,.10), transparent 58%),
      radial-gradient(900px 520px at 70% 120%, rgba(34,197,94,.10), transparent 55%),
      linear-gradient(180deg, var(--kb-bg), var(--kb-bg-2));
    color: var(--kb-text);
  }
  
  /* Typography polish */
  h1,h2,h3,h4,h5,h6{
    color: var(--kb-text);
    letter-spacing: .2px;
  }
  p, li, label, small{
    color: var(--kb-muted);
  }
  
  /* Links */
  a{
    color: rgba(138,180,255,.95);
    text-decoration: none;
  }
  a:hover{
    color: #d7e6ff;
    text-decoration: none;
  }
  
  /* Selection */
  ::selection{
    background: rgba(47,121,255,.35);
  }
  
  /* Horizontal line */
  hr{
    border-color: rgba(255,255,255,.12) !important;
    opacity: 1;
  }
  
  /* -------------------------
     3) Layout helpers
     ------------------------- */
  .container, .container-fluid{
    padding-bottom: 28px;
  }
  
  /* -------------------------
     4) Cards / surfaces
     ------------------------- */
  .card{
    border-radius: var(--kb-radius);
  }
  
  .card.kb{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    border: 1px solid var(--kb-border) !important;
    box-shadow: var(--kb-shadow);
    backdrop-filter: blur(10px);
  }
  
  .card.kb .card-body{
    color: var(--kb-text);
  }
  
  /* Hero */
  .kb-hero{
    border-radius: calc(var(--kb-radius) + 2px);
    border: 1px solid var(--kb-border);
    padding: 28px;
    background:
      radial-gradient(600px 260px at 10% 0%, rgba(47,121,255,.18), transparent 55%),
      linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: var(--kb-shadow-sm);
  }
  
  /* -------------------------
     5) Text utilities (override)
     ------------------------- */
  .text-white{ color: #fff !important; }
  .text-white-50{ color: var(--kb-muted) !important; }
  .text-muted{ color: var(--kb-muted-2) !important; }
  .fw-semibold{ font-weight: 700 !important; } /* më e dukshme */
  
  /* -------------------------
     6) Forms (Bootstrap override)
     ------------------------- */
  .form-label{
    color: rgba(255,255,255,.80) !important;
    font-weight: 600;
  }
  
  .form-control, .form-select, textarea{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: var(--kb-text) !important;
    border-radius: var(--kb-radius-sm) !important;
  }
  
  /* FIX: Hiq dropdown "white box" në disa shfletues (sidomos Chrome/Windows) */
  .form-select{
    background-color: rgba(255,255,255,.08) !important;         /* fallback */
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06)) !important; /* i jep ton blu të lehtë */
    border-color: rgba(255,255,255,.18) !important;
    color: var(--kb-text) !important;
  }
  
  /* FIX: Options të mos dalin me white background agresiv (varet nga browser, por e zbutim) */
  .form-select option{
    background-color: rgba(11,18,32,.98) !important; /* blu e errët */
    color: rgba(255,255,255,.92) !important;
  }
  
  /* FIX: Datalist/autofill që shpesh del me të bardhë */
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill{
    -webkit-text-fill-color: var(--kb-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.08) inset !important;
    box-shadow: 0 0 0px 1000px rgba(255,255,255,.08) inset !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    transition: background-color 9999s ease-in-out 0s;
  }
  
  .form-control::placeholder{
    color: rgba(255,255,255,.55) !important;
  }
  
  .form-control:focus, .form-select:focus, textarea:focus{
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(47,121,255,.60) !important;
    box-shadow: 0 0 0 .22rem rgba(47,121,255,.18) !important;
    color: var(--kb-text) !important;
  }
  
  /* Checkbox/radio (nëse përdor) */
  .form-check-label{ color: var(--kb-muted) !important; }
  .form-check-input{
    background-color: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
  }
  .form-check-input:checked{
    background-color: var(--kb-primary);
    border-color: var(--kb-primary);
  }
  
  /* -------------------------
     7) Buttons (Bootstrap override)
     ------------------------- */
  .btn{
    border-radius: var(--kb-radius-sm) !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    padding: .58rem .9rem;
  }
  
  /* Primary */
  .btn-primary{
    background: linear-gradient(180deg, rgba(47,121,255,1), rgba(29,95,224,1)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(47,121,255,.25);
  }
  .btn-primary:hover{
    background: linear-gradient(180deg, rgba(29,95,224,1), rgba(24,78,188,1)) !important;
  }
  .btn-primary:focus{
    box-shadow: 0 0 0 .22rem rgba(47,121,255,.20) !important;
  }
  
  /* Outline light */
  .btn-outline-light{
    color: rgba(255,255,255,.92) !important;
    border-color: rgba(255,255,255,.24) !important;
    background: rgba(255,255,255,.05) !important;
  }
  .btn-outline-light:hover{
    color: #fff !important;
    border-color: rgba(255,255,255,.36) !important;
    background: rgba(255,255,255,.10) !important;
  }
  
  /* Secondary (nëse shfaqet) */
  .btn-secondary{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: rgba(255,255,255,.92) !important;
  }
  .btn-secondary:hover{
    background: rgba(255,255,255,.12) !important;
  }
  
  /* Disabled */
  .btn:disabled, .btn.disabled{
    opacity: .55 !important;
  }
  
  /* -------------------------
     8) Badges
     ------------------------- */
  .badge{
    border-radius: 999px !important;
    padding: .45rem .7rem !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
  }
  
  /* Default soft badge used in your UI */
  .badge-soft{
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: rgba(255,255,255,.94) !important;
  }
  
  /* Optional semantic badges (if you use later) */
  .badge-success-soft{
    background: rgba(34,197,94,.16) !important;
    border: 1px solid rgba(34,197,94,.30) !important;
    color: rgba(255,255,255,.95) !important;
  }
  .badge-danger-soft{
    background: rgba(239,68,68,.16) !important;
    border: 1px solid rgba(239,68,68,.30) !important;
    color: rgba(255,255,255,.95) !important;
  }
  .badge-warning-soft{
    background: rgba(245,158,11,.16) !important;
    border: 1px solid rgba(245,158,11,.30) !important;
    color: rgba(255,255,255,.95) !important;
  }
  
  /* -------------------------
     9) Tables
     ------------------------- */
  .table{
    color: var(--kb-text) !important;
  }
  
  .table thead th{
    color: rgba(255,255,255,.78) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }
  
  .table tbody td{
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
  
  /* Table responsive polish */
  .table-responsive{
    border-radius: var(--kb-radius);
  }
  
  /* -------------------------
     10) Alerts (Bootstrap override)
     ------------------------- */
  .alert{
    border-radius: var(--kb-radius);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.93);
  }
  
  .alert-danger{
    border-color: rgba(239,68,68,.35);
    background: rgba(239,68,68,.12);
  }
  
  .alert-success{
    border-color: rgba(34,197,94,.35);
    background: rgba(34,197,94,.12);
  }
  
  .alert-warning{
    border-color: rgba(245,158,11,.35);
    background: rgba(245,158,11,.12);
  }
  
  /* -------------------------
     11) Modal (Bootstrap override)
     ------------------------- */
  .modal-content{
    border-radius: var(--kb-radius);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(15,20,35,.96) !important;
    color: rgba(255,255,255,.94);
    box-shadow: var(--kb-shadow);
  }
  
  .modal-header, .modal-footer{
    border-color: rgba(255,255,255,.10) !important;
  }
  
  .btn-close{
    filter: invert(1);
    opacity: .9;
  }
  
  /* -------------------------
     12) Navbar / top sections (nëse ke)
     ------------------------- */
  .navbar, .kb-nav{
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
  }
  
  /* -------------------------
     13) Small UI details
     ------------------------- */
  .rounded-3{
    border-radius: 14px !important;
  }
  
  /* Make focus visible */
  :focus-visible{
    outline: 2px solid rgba(47,121,255,.55);
    outline-offset: 2px;
    border-radius: 10px;
  }
  
  /* -------------------------
     14) Mobile friendliness
     ------------------------- */
  @media (max-width: 576px){
    .btn{ width: 100%; }
    .kb-hero{ padding: 18px; }
    .card.kb{ border-radius: 16px; }
    .table-responsive{ border-radius: 16px; }
  }
  
  /* -------------------------
     15) Safety override: ensure text never becomes dark accidentally
     ------------------------- */
  .card, .card *{
    color: inherit;
  }
  
  /* =========================================================
     16) WHITE BACKGROUND KILL SWITCH (AGGRESSIVE)
     Qëllimi: TABELA / LISTA / KALENDARI të mos dalin KURRË të bardha
     Vendosur NË FUND që të fitojë mbi Bootstrap/Plugin CSS
     ========================================================= */
  
  /* Bootstrap 5 table background (qelizat) */
  .table{
    background-color: transparent !important;
    --bs-table-bg: rgba(255,255,255,.06) !important;         /* blu e lehtë, jo e bardhë */
    --bs-table-striped-bg: rgba(255,255,255,.04) !important; /* zebra blu */
    --bs-table-active-bg: rgba(255,255,255,.06) !important;
    --bs-table-hover-bg: rgba(255,255,255,.07) !important;
  }
  
  /* Bootstrap e vendos background te qelizat: e kontrollojmë këtu */
  .table > :not(caption) > * > *{
    background-color: var(--bs-table-bg) !important;
    color: var(--kb-text) !important;
  }
  
  /* thead gjithmonë pak më i fortë */
  .table thead > tr > th{
    background-color: rgba(255,255,255,.06) !important;
  }
  
  /* Nëse dikush ka vendosur këto klasa */
  .table-light,
  .table-white,
  .bg-white,
  .bg-light{
    background-color: rgba(255,255,255,.06) !important;
  }
  
  /* Table wrappers */
  .table-responsive{
    background: transparent !important;
  }
  
  /* List-group (lista fushave/rezervimeve shpesh është list-group) */
  .list-group{
    background: transparent !important;
  }
  .list-group-item{
    background-color: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: var(--kb-text) !important;
  }
  .list-group-item:hover{
    background-color: rgba(255,255,255,.08) !important;
  }
  
  /* Cards brenda listave/tabelave: mos lejo white */
  .card.bg-white, .card.bg-light{
    background: rgba(255,255,255,.06) !important;
  }
  
  /* FullCalendar (nëse e përdor) */
  .fc, .fc *{
    color: var(--kb-text) !important;
  }
  
  .fc .fc-scrollgrid,
  .fc .fc-scrollgrid-section > td,
  .fc .fc-scrollgrid-section > th,
  .fc .fc-col-header,
  .fc .fc-col-header-cell,
  .fc .fc-daygrid-body,
  .fc .fc-daygrid-day,
  .fc .fc-timegrid-body,
  .fc .fc-timegrid-slot,
  .fc .fc-timegrid-axis,
  .fc .fc-timegrid-col,
  .fc .fc-timegrid-col-frame,
  .fc .fc-daygrid-day-frame{
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.12) !important;
  }
  
  .fc .fc-daygrid-day.fc-day-today,
  .fc .fc-timegrid-col.fc-day-today{
    background: rgba(47,121,255,.10) !important;
  }
  
  .fc .fc-event{
    background: rgba(47,121,255,.22) !important;
    border: 1px solid rgba(47,121,255,.35) !important;
    color: rgba(255,255,255,.95) !important;
  }
  
  .fc .fc-button{
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: var(--kb-text) !important;
  }
  .fc .fc-button:hover{
    background: rgba(255,255,255,.10) !important;
  }
  
  /* Inline styles që vendosin white (më rrallë, por i vrasim) */
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background-color:#fff"],
  [style*="background-color: #fff"],
  [style*="background:rgb(255,255,255"],
  [style*="background-color:rgb(255,255,255"]{
    background-color: rgba(255,255,255,.06) !important;
  }
  /* =========================================================
   17) GLOBAL MODAL CLICK FIX (Bootstrap)
   Vendose NË FUND të app.css — pa ndryshuar asgjë tjetër
   Qëllimi: modali të jetë gjithmonë sipër dhe klikueshëm
   ========================================================= */

.modal,
.modal-backdrop{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;       /* mbi çdo card/sidebar/etc */
  pointer-events: none !important; /* modal vetë nuk kap klikime */
}

.modal.show{
  display: block !important;
}

.modal-dialog,
.modal-content{
  pointer-events: auto !important; /* vetëm dialogu kap klikime */
}

.modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;       /* 1 poshtë modalit */
  opacity: .6;                     /* normale, mund ta heqësh po deshe */
}

.modal *{
  pointer-events: auto !important;
}

/* Siguri: nëse ndonjë wrapper ka transform/filter që prish stacking */
body.modal-open{
  overflow: hidden !important;
}