@charset "UTF-8";

:root{
  --bg:#1f2937;
  --panel:rgba(255,255,255,.06);
  --panel2:#10161d;
  --line:#2a3541;
  --text:#e8eef6;
  --muted:#9fb0c2;

  --gold:#caa24a;
  --gold2:#a9873b;

  --green:#25a45a;
  --red:#b13a3a;
  --blue:#2f79ff;
  --amber:#d08a2e;

  --shadow:0 12px 30px rgba(0,0,0,.35);
  --radius:14px;
}


*{box-sizing:border-box}

body{
  margin:0;
  direction:rtl;
  text-align:right;
  font-family:Arial, sans-serif;
  color:#eaf6ff;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,140,255,.18), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 70% 80%, rgba(0,200,255,.14), rgba(0,0,0,0) 60%),
    #0b132b;
  will-change:auto;
}


table{direction:rtl}
input, select, textarea{text-align:right}

.bar{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  margin-top:10px;
  overflow:hidden;
}
.barFill{
  height:100%;
  width:0%;
  background:rgba(80,200,200,.55);
}

/* ===== Top bar ===== */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,27,34,.95), rgba(15,20,26,.95));
  position:sticky;
  top:0;
  z-index:5;
}

.topRight{
  display:flex;
  gap:12px;
  align-items:center;
}
.topLeftGroup{
  display:flex;
  align-items:center;
  gap:12px;
  direction:rtl;
}

/* ===== Professional system clock ===== */
.clock{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;

  min-width:215px;
  min-height:62px;
  padding:9px 16px;

  direction:ltr;
  overflow:hidden;

  border:1px solid rgba(102, 195, 235, .36);
  border-radius:17px;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(63, 161, 205, .16),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(20, 43, 58, .97),
      rgba(10, 27, 38, .97)
    );

  box-shadow:
    0 9px 24px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .07);

  color:#f2fbff;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* פס תאורה עדין בחלק העליון */
.clock::after{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(113, 211, 255, .75),
    transparent
  );
}

/* אייקון שעון ללא אימוג'י */
.clockIcon{
  position:relative;
  width:37px;
  height:37px;
  flex:0 0 37px;

  border:2px solid rgba(111, 207, 247, .9);
  border-radius:50%;

  background:rgba(72, 171, 216, .08);

  box-shadow:
    0 0 0 5px rgba(72, 171, 216, .05),
    0 0 15px rgba(72, 171, 216, .16);
}

/* מחוג אנכי */
.clockIcon::before{
  content:"";
  position:absolute;

  width:2px;
  height:9px;

  top:8px;
  left:50%;

  border-radius:999px;
  background:#dff6ff;

  transform:translateX(-50%);
  transform-origin:bottom center;
}

/* מחוג אופקי */
.clockIcon::after{
  content:"";
  position:absolute;

  width:8px;
  height:2px;

  top:17px;
  left:18px;

  border-radius:999px;
  background:#dff6ff;

  transform:rotate(25deg);
  transform-origin:left center;
}

.clockText{
  position:relative;
  z-index:1;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  min-width:135px;
}

/* השעה */
.clockTime{
  direction:ltr;

  color:#ffffff;
  font-family:"Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size:21px;
  font-weight:750;
  line-height:1;

  letter-spacing:1.2px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(109, 207, 247, .18);
}

/* יום ותאריך */
.clockDate{
  direction:rtl;

  margin-top:7px;

  color:#9ec5d9;
  font-family:"Segoe UI", Arial, sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1;

  letter-spacing:.15px;
  white-space:nowrap;
}

.clock:hover{
  transform:translateY(-1px);

  border-color:rgba(111, 207, 247, .62);

  box-shadow:
    0 11px 27px rgba(0, 0, 0, .32),
    0 0 0 3px rgba(67, 175, 224, .06),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sys{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
}
.sys.online{color:var(--muted)}
.sys.offline{color:#ffb3b3}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
}
.dot.online{background:var(--green)}
.dot.offline{background:var(--red)}

/* ===== Header / Brand ===== */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo{
  width:170px;
  height:60px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.brandText .title{
  font-size:30px;
  font-weight:900;
  letter-spacing:1px;
}
.brandText .title span{color:var(--gold)}

.brandText .subtitle{
  font-size:13px;
  color:var(--muted);
  opacity:.82;
  margin-top:2px;
}

.appLogo{
  display:block;
  width:160px;
  height:50px;
  margin:0;
  object-fit:contain;
}

.brand.logoOnly{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:260px;
}
.bigLogo{
  width:240px;
  max-width:240px;
  height:auto;
  max-height:90px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(80,160,255,.18));
}
.brand.logoOnly .logoWrap,
.brand.logoOnly .brandText,
.brand.logoOnly .logoFallback{
  display:none !important;
}

.logoImg{
  width:42px;
  height:42px;
  border-radius:12px;
  object-fit:contain;
  background:rgba(202,162,74,.10);
  border:1px solid rgba(202,162,74,.35);
  box-shadow:var(--shadow);
}

/* ===== Layout ===== */
.layout{
  display:grid;
  grid-template-columns:1fr;
  direction:rtl;
}
#appShell{
  isolation:isolate;
}


.panel{
  direction:rtl;
  background:#0f2230;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel.wide,
.panel.full{
  grid-column:1 / -1;
}

.panelHead{
  padding:12px 14px;
  font-weight:800;
  letter-spacing:.5px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  color:#eaf6ff;
}
.panelBody{padding:14px}

/* ===== Forms ===== */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}

.field label,
label,
.lbl,
.hint,
.muted{
  color:#cfe9f7;
}

.field label{
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
}

input,
select,
textarea{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid rgba(120,200,230,.35);
  background:#0b1a24;
  color:#eaf6ff;
  outline:none;
  font-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(47,121,255,.65);
  box-shadow:0 0 0 3px rgba(47,121,255,.12);
}

input::placeholder,
textarea::placeholder{
  color:#9fb0c2;
}

.field input,
.field select{
  font-size:17px;
  padding:15px 18px;
}

.remember{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  margin:8px 0 12px;
}

.checkboxField{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.checkboxField > label:first-child{
  display:block;
  min-height:20px;
  margin-bottom:6px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.inlineCheck{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(16,22,29,.9);
  color:var(--text);
  cursor:pointer;
  width:100%;
}
.inlineCheck input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
}
.inlineCheck span{
  line-height:1.35;
  text-align:right;
}

#safetyOverrideWrap{margin-bottom:10px}

.workPermitField{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.workPermitText{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#eaf4ff;
}
.workPermitField input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#d9a441;
  cursor:pointer;
}
.workPermitIcon{
  font-size:18px;
  line-height:1;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  cursor:pointer;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 18px;
  font-size:15px;
  font-weight:700;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .18s ease;
}

.btn:hover{
  filter:brightness(1.08);
}

.btn:active{
  transform:scale(.96);
}

/* 🔒 מצב נעול */
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.25);
  transform:none !important;
  pointer-events:none; /* 🔥 חשוב */
}

/* ביטול hover */
.btn:disabled:hover{
  filter:grayscale(.25);
}

/* אופציונלי – אפקט עדין */
.btn:disabled::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(0,0,0,.15);
}
.btn.small{
  padding:8px 10px;
  font-size:13px;
}
.btn.big{
  padding:14px;
  font-size:18px;
}
.btn.blue{
  background:linear-gradient(180deg, rgba(47,121,255,.85), rgba(33,86,190,.85));
  border-color:rgba(47,121,255,.55);
}
.btn.green{
  background:linear-gradient(180deg, rgba(37,164,90,.85), rgba(26,120,66,.85));
  border-color:rgba(37,164,90,.55);
}
.btn.red{
  background:linear-gradient(180deg, rgba(177,58,58,.85), rgba(130,35,35,.85));
  border-color:rgba(177,58,58,.55);
}
.btn.gold{
  background:linear-gradient(180deg, rgba(202,162,74,.95), rgba(169,135,59,.95));
  border-color:rgba(202,162,74,.55);
  color:#1a1206;
}
.btn.outline{
  background:transparent;
  color:#eaf6ff;
  border-color:rgba(120,200,230,.55);
}
.btn.info{
  background:#1d4ed8;
  color:#fff;
  border-color:#1d4ed8;
}
.btn.scan{
  width:64px;
  height:54px;
  border-radius:14px;
  font-size:20px;
}
.btnEdit{
  margin-inline-end:6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.btnEdit:hover{border-color:rgba(255,255,255,.28)}
.btnDup{
  white-space:nowrap;
  font-size:12px;
  padding:6px 10px;
}

/* ===== Generic sections ===== */
.grow{flex:1}
.actions{
  display:flex;
  gap:10px;
  margin:10px 0 12px;
  flex-wrap:wrap;
}
.searchRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.resultBox{
  padding:18px 20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  text-align:center;
  font-size:24px;
  font-weight:900;
  line-height:1.5;
  letter-spacing:.2px;
  font-family:"Arial","Segoe UI",sans-serif;
  color:#f3fbff;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}

/* ===== Stats / cards ===== */
.statsRow{
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  gap:12px;
  margin-top:12px;
}
.stat{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(47,121,255,.25);
  background:
    radial-gradient(400px 150px at 30% 0%, rgba(47,121,255,.18), transparent 60%),
    rgba(16,22,29,.85);
}
.statTitle{color:var(--muted); font-size:12px}
.statNum{font-size:40px; font-weight:900; margin:6px 0}
.statSub{color:var(--muted); font-size:12px}

.mini{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(37,164,90,.25);
  background:
    radial-gradient(400px 150px at 30% 0%, rgba(37,164,90,.18), transparent 60%),
    rgba(16,22,29,.85);
}
.mini.amber{
  border-color:rgba(208,138,46,.25);
  background:
    radial-gradient(400px 150px at 30% 0%, rgba(208,138,46,.18), transparent 60%),
    rgba(16,22,29,.85);
}
.miniTitle{color:var(--muted); font-size:12px}
.miniNum{font-size:34px; font-weight:900; margin-top:8px}

.dash{
  display:grid;
  grid-template-columns:repeat(4, minmax(180px,1fr));
  gap:14px;
  margin-top:14px;
}
.cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  gap:10px;
  font-size:12px;
}
.cardNum{
  font-size:48px;
  font-weight:900;
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.cardSub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  opacity:.8;
}
.cardHint{
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
}
.chip{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.15);
  color:var(--muted);
  font-size:12px;
  opacity:.9;
}
.chip.ok{border-color:rgba(120,255,180,.25)}
.chip.warn{border-color:rgba(208,138,46,.45); color:rgba(208,138,46,.95)}
.chip.bad{border-color:rgba(255,120,120,.25)}

.alertLine{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  color:var(--muted);
  font-size:13px;
}
.alertLine.ok{border-color:rgba(37,164,90,.35); color:rgba(232,238,246,.95)}
.alertLine.warn{border-color:rgba(208,138,46,.35); color:rgba(232,238,246,.95)}
.alertLine.bad{border-color:rgba(177,58,58,.35); color:rgba(232,238,246,.95)}

.alertArrow{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(232,238,246,.92);
  cursor:pointer;
  flex:0 0 auto;
}
.alertArrow:hover{border-color:rgba(255,255,255,.22)}

.dailyTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 10px;
}
.dailyMeta{
  color:var(--muted);
  font-size:12px;
}

.alerts{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:8px 0 2px;
}


.cardStat{
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
}
.cardStat.blue{
  border-color:rgba(47,121,255,.35);
  background:rgba(47,121,255,.10);
}
.cardStat.red{
  border-color:rgba(177,58,58,.35);
  background:rgba(177,58,58,.10);
}
.cardStat.clickable{
  cursor:pointer;
  transition:transform .06s ease, border-color .12s ease;
}
.cardStat.clickable:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
}

.miniRow{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.miniCard{
  text-align:right;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:rgba(18,24,30,.85);
  box-shadow:var(--shadow);
  cursor:pointer;
}
.miniCard:hover{transform:translateY(-1px)}
.miniTitle{color:var(--muted); font-weight:800}
.miniNum{font-size:34px; font-weight:1000; margin-top:6px}
.miniSub{color:var(--muted); margin-top:4px; font-size:12px}
.miniCard.blue{border-color:rgba(80,140,255,.35)}
.miniCard.teal{border-color:rgba(20,190,190,.35)}
.miniCard.red{border-color:rgba(255,80,80,.30)}

/* ===== Admin / tabs ===== */
.tabs{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.tab{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  cursor:pointer;
}
.tab.active{
  color:var(--text);
  border-color:rgba(202,162,74,.45);
  background:rgba(202,162,74,.12);
}
.spacer{flex:1}
.formGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px,1fr));
  gap:10px;
  margin-bottom:12px;
}

/* ===== Filters ===== */
.filterRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.10);
}
.filterItem{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
  flex:1 1 160px;
}
.filterItem label{
  font-size:12px;
  color:var(--muted);
}
.filterItem input,
.filterItem select{
  padding:10px 10px;
  border-radius:12px;
}



/* Row status colors */
tr.rowInside td{
  outline:1px solid rgba(37,164,90,.35);
  background:rgba(40,180,120,.26) !important;
}
tr.rowExpired td{
  background:rgba(210,60,60,.26) !important;
}
tr.rowExpToday td{
  background:rgba(235,190,60,.24) !important;
}
tr.rowInactive td{
  background:rgba(255,255,255,.04) !important;
  opacity:.70;
}
tr.rowInside td:first-child{border-right:6px solid rgba(40,180,120,.95)}
tr.rowExpired td:first-child{border-right:6px solid rgba(210,60,60,.95)}
tr.rowExpToday td:first-child{border-right:6px solid rgba(235,190,60,.95)}
tr.rowInactive td:first-child{border-right:6px solid rgba(170,170,170,.55)}
tr.rowOk td:first-child{border-right:4px solid rgba(235,190,60,.55)}

tr.expExpired td{background:rgba(210,60,60,.12)}
tr.expSoon td{background:rgba(235,190,60,.14)}

/* ===== Pills ===== */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:26px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.12);
  white-space:nowrap;
  letter-spacing:.2px;
  transition:all .16s ease;
}
.pill.ok{
  color:#25a45a;
  border-color:rgba(37,164,90,.35);
  background:rgba(37,164,90,.15);
}
.pill.warn{
  color:#3b82f6;
  border-color:rgba(59,130,246,.35);
  background:rgba(59,130,246,.15);
}
.pill.expToday{
  color:#ffd24d;
  border-color:rgba(255,193,7,.55);
  background:rgba(255,193,7,.15);
}
.pill.bad{
  color:#eab308;
  border-color:rgba(234,179,8,.35);
  background:rgba(234,179,8,.15);
}
.pill.info{
  color:#a6c8ff;
  border-color:rgba(47,121,255,.60);
  background:rgba(47,121,255,.12);
}
.pill.badge{
  background:rgba(18,59,82,.85);
  color:#9fd8ff;
  border:1px solid rgba(36,89,122,.6);
}
.pill.badge.muted{
  background:#2b3440;
  color:#c7d0da;
  border:1px solid #4a5663;
}
.statusGroup{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.vehicle-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:27px;
  padding:4px 11px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  color:#ffffff;
  border:1px solid rgba(255,120,120,.85);
  background:linear-gradient(180deg, rgba(214,76,76,.96), rgba(179,45,45,.94));
  box-shadow:
    0 0 0 1px rgba(255,160,160,.12),
    0 4px 10px rgba(0,0,0,.18);
}

.vehicle-pill-icon{
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-1px);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* ===== Modals ===== */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(0,0,0,.55);
  z-index:9998;
}
.modalCard{
  width:min(960px, 92vw);
  max-height:86vh;
  overflow:auto;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,20,24,.96);
  box-shadow:
    0 18px 60px rgba(0,0,0,.42),
    0 2px 10px rgba(0,0,0,.18);
  transform:translateZ(0);
}
.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;
  top:0;
  background:rgba(16,22,29,.95);
  z-index:2;
}
.modalBtns{
  display:flex;
  gap:8px;
}
.modalScroll{
  max-height:min(78vh, 900px);
  overflow:auto;
}

.alertPopup{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:9999;
}
.alertPopupBox{
  background:rgba(16,22,29,.95);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  min-width:320px;
  text-align:center;
  box-shadow:var(--shadow);
  font-size:18px;
}

.badgeModalText{
  margin-bottom:12px;
  line-height:1.5;
}
.badgeModalLabel{
  display:block;
  margin-bottom:6px;
  font-weight:700;
}
.badgeModalActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:16px;
}

/* ===== Login / splash ===== */
body.loggedOut header.top{display:none}
body.loggedOut main.layout{
  grid-template-columns:1fr !important;
  min-height:100vh;
  align-content:center;
  justify-items:center;
}
body.loggedOut main.layout > section.panel{
  width:min(520px, calc(100vw - 28px));
}
body.loggedOut main.layout > section.panel:not(.loginPanel){
  display:none !important;
}
body.loggedOut main.layout{justify-content:center}
body.loggedOut .loginPanel{
  max-width:420px;
  margin:80px auto;
}
body.loggedOut .topRight{display:none}
body.loggedOut #appShell{
  pointer-events:none;
  user-select:none;
}

.loginOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    linear-gradient(rgba(2,8,18,.72), rgba(2,8,18,.82)),
    url("logo.png") center center / 900px auto no-repeat;
  z-index:9999;
}
.loginOverlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(90,170,255,.10), transparent 42%);
  pointer-events:none;
}
.loginPanel{
  position:relative;
  z-index:1;
  width:min(420px, 92vw);
  background:rgba(7,16,28,.82);
  border:1px solid rgba(120,180,255,.16);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
}

#splashScreen{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(25,110,255,.18), transparent 35%),
    linear-gradient(180deg, #020816 0%, #061327 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  z-index:100000;
  transition:opacity .45s ease, visibility .45s ease;
}
#splashScreen.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.splashLogo{
  width:min(460px, 72vw);
  max-width:460px;
  object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(80,170,255,.35));
  animation:splashPulse 1.6s ease-in-out infinite;
}
.splashText{
  font-size:14px;
  letter-spacing:4px;
  color:rgba(210,230,255,.82);
}
@keyframes splashPulse{
  0%{transform:scale(1); opacity:.88}
  50%{transform:scale(1.03); opacity:1}
  100%{transform:scale(1); opacity:.88}
}

/* ===== Managers entry ===== */
.managersEntryPanel{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:18px 0 28px;
}
.managersEntryCard{
  width:min(680px, 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:28px 22px;
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  text-align:center;
}
.managersEntryTitle{
  font-size:28px;
  font-weight:900;
  margin-bottom:10px;
}
.managersEntrySub{
  opacity:.85;
  margin-bottom:18px;
  font-size:15px;
}
.managersEntryRow{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.managerEntryInput{
  width:min(360px, 100%);
  height:48px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:#fff;
  padding:0 14px;
  font-size:18px;
  text-align:center;
}
.managersEntryActions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.managersEntryActions .btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  filter:grayscale(.15);
}

/* ===== Alerts grid ===== */
#alertsLines{
  margin-top:12px;
  display:grid;
  gap:10px;
  grid-template-columns:1fr 1fr;
}

/* ===== Approval dashboard ===== */
.approvalDashboard{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:
    radial-gradient(circle at 18% 18%, rgba(47,121,255,.13), rgba(47,121,255,0) 34%),
    radial-gradient(circle at 84% 20%, rgba(208,138,46,.10), rgba(208,138,46,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.16));
  box-shadow:0 18px 42px rgba(0,0,0,.26);
  padding:16px;
  overflow:hidden;
}

.approvalDashHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.approvalDashTitle{
  font-size:19px;
  font-weight:1000;
  color:#f2fbff;
  letter-spacing:.2px;
}

.approvalDashSub{
  margin-top:4px;
  font-size:13px;
  color:rgba(207,233,247,.72);
}

.approvalLiveBadge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(37,164,90,.34);
  background:rgba(37,164,90,.09);
  color:rgba(220,255,235,.92);
  font-size:12px;
  font-weight:800;
  direction:ltr;
  white-space:nowrap;
}

.approvalLiveDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(37,164,90,.12);
}

.approvalLiveBadge.offline{
  border-color:rgba(177,58,58,.55) !important;
  background:rgba(177,58,58,.14) !important;
  color:rgba(255,225,225,.98) !important;
}

.approvalLiveBadge.offline .approvalLiveDot,
.approvalLiveDot.offline{
  background:var(--red) !important;
  box-shadow:0 0 0 4px rgba(177,58,58,.16) !important;
}

.approvalDashBody{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(280px, .8fr);
  gap:14px;
  align-items:stretch;
}

.approvalCardsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.approvalCard{
  position:relative;
  min-height:178px;
  width:100%;
  text-align:center;
  padding:18px 16px 17px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  color:#eaf6ff;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    filter .16s ease;
}

.approvalCard::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  pointer-events:none;
}

.approvalCard:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 18px 34px rgba(0,0,0,.30);
  filter:brightness(1.05);
}

.approvalCard:active{
  transform:translateY(-1px) scale(.99);
}

.approvalCardTop{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:rgba(234,246,255,.96);
  font-size:15px;
  font-weight:1000;
  width:100%;
}

.approvalCardTop span:first-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  line-height:1.15;
}

.approvalCardIcon{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  width:36px;
  height:36px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.20);
  color:rgba(255,255,255,.94);
  direction:ltr;
  font-size:18px;
  font-weight:900;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.approvalCard:hover .approvalCardIcon{
  transform:translateX(-2px) translateY(-2px) scale(1.04);
  border-color:rgba(255,255,255,.34);
  background:rgba(0,0,0,.28);
}

.approvalCardNum{
  position:relative;
  z-index:1;
  margin-top:2px;
  font-size:56px;
  line-height:1;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  letter-spacing:-1px;
}

.approvalCardSub{
  position:relative;
  z-index:1;
  margin-top:0;
  color:rgba(207,233,247,.82);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.approvalCardAction{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  padding:9px 16px;
  min-width:104px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:rgba(234,246,255,.96);
  font-size:13px;
  font-weight:1000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.approvalCard:hover .approvalCardAction{
  border-color:rgba(255,255,255,.30);
  background:rgba(0,0,0,.24);
  transform:translateY(-1px);
}

.approvalToday{
  border-color:rgba(37,164,90,.38);
  background:rgba(37,164,90,.11);
}

.approvalToday::before{
  background:linear-gradient(135deg, rgba(37,164,90,.88), rgba(37,164,90,0) 58%);
}

.approvalExpiring{
  border-color:rgba(208,138,46,.42);
  background:rgba(208,138,46,.11);
}

.approvalExpiring::before{
  background:linear-gradient(135deg, rgba(208,138,46,.90), rgba(208,138,46,0) 58%);
}

.approvalFuture{
  border-color:rgba(120,200,230,.34);
  background:rgba(120,200,230,.085);
}

.approvalFuture::before{
  background:linear-gradient(135deg, rgba(120,200,230,.72), rgba(120,200,230,0) 58%);
}

.approvalChartCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:220px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(0,0,0,.18);
  padding:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.approvalChartTitle{
  font-size:15px;
  font-weight:1000;
  color:#f2fbff;
}

.approvalChartSub{
  margin-top:4px;
  color:rgba(207,233,247,.68);
  font-size:12px;
}

.approvalDonutWrap{
  margin-top:12px;
  width:156px;
  height:156px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, filter .18s ease;
}

.approvalChartCard:hover .approvalDonutWrap{
  transform:scale(1.045);
  filter:brightness(1.06);
}

.approvalDonut{
  --todayDeg:120deg;
  --expiringDeg:40deg;
  --futureDeg:80deg;

  position:relative;
  width:148px;
  height:148px;
  border-radius:50%;
  background:
    conic-gradient(
    var(--green) 0deg var(--todayDeg),
      var(--amber) var(--todayDeg) calc(var(--todayDeg) + var(--expiringDeg)),
      rgba(120,200,230,.85) calc(var(--todayDeg) + var(--expiringDeg)) calc(var(--todayDeg) + var(--expiringDeg) + var(--futureDeg)),
      rgba(255,255,255,.07) calc(var(--todayDeg) + var(--expiringDeg) + var(--futureDeg)) 360deg
    );
  box-shadow:
    0 16px 30px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.10);
}

.approvalDonut::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  background:#0f2230;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.approvalDonutCenter{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.approvalDonutTotal{
  font-size:30px;
  font-weight:1000;
  line-height:1;
  color:#f2fbff;
  font-variant-numeric:tabular-nums;
}

.approvalDonutLabel{
  margin-top:5px;
  color:rgba(207,233,247,.68);
  font-size:12px;
  font-weight:800;
}

.approvalLegend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 12px;
  margin-top:12px;
}

.approvalLegendItem{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(207,233,247,.78);
  font-size:12px;
  font-weight:700;
}

.approvalLegendDot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
}

.approvalLegendDot.today{background:var(--green)}
.approvalLegendDot.expiring{background:var(--amber)}
.approvalLegendDot.future{background:rgba(120,200,230,.85)}

/* ===== Utility visibility ===== */
body.hideAllTime .miniSub,
body.hideAllTime .cardSub{
  display:none !important;
}

/* ===== Render stability ===== */
.top,
.tableWrap thead th,
th,
.modalHead,
.loginOverlay,
.modal,
.panel,
.modalCard{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.top,
.modal,
.modalCard{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* ===== Print ===== */
@media print{
  body.print-inside *{visibility:hidden !important}
  body.print-inside #insideModal,
  body.print-inside #insideModal *{visibility:visible !important}
  body.print-inside #insideModal{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    background:#fff !important;
    color:#000 !important;
  }
  body.print-inside .modalCard{
    box-shadow:none !important;
    border:none !important;
    background:#fff !important;
    color:#000 !important;
    width:100% !important;
    max-width:none !important;
  }
  body.print-inside .modalBtns,
  body.print-inside .btn{
    display:none !important;
  }
}
/* ===== TABLE (FINAL CLEAN) ===== */

.tableWrap{
  position:relative;
  margin-top:16px;
  overflow:auto;
  contain:paint;

  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;

  background:rgba(10,20,30,.88);

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);
}

/* table */
.tableWrap table{
  width:100%;
  border-collapse:collapse;
}

/* header */
.tableWrap thead th{
  position:sticky;
  top:0;
  z-index:5;

  background:rgba(30,45,60,1);
  color:#ffffff;

  font-weight:900;
  font-size:18px;
  text-align:center;
  vertical-align:middle;
  padding:16px 12px;

  border-bottom:3px solid rgba(202,162,74,.65);
  border-top:1px solid rgba(255,255,255,.08);
}



/* cells */
.tableWrap tbody td{
  padding:14px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);

  vertical-align:middle;
  text-align:center;

  font-size:15px;
  line-height:1.35;
}

/* vertical lines */
.tableWrap thead th,
.tableWrap tbody td{
  border-left:1px solid rgba(255,255,255,.05);
}

/* remove last column line */
.tableWrap thead th:last-child,
.tableWrap tbody td:last-child{
  border-left:none;
}

/* hover */
.tableWrap tbody tr td{
  transition:
    background-color .14s ease,
    border-color .14s ease;
}

.tableWrap tbody tr:hover td{
  background:rgba(255,255,255,.06);
}

/* last row */
.tableWrap tbody tr:last-child td{
  border-bottom:none;
}
/* Row operational action buttons */
.btn.small.outline.rowInBtn {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  font-weight: 800;
}

.btn.small.outline.rowInBtn:hover {
  background: #15803d;
  border-color: #15803d;
}

.btn.small.outline.rowOutBtn {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  font-weight: 800;
}

.btn.small.outline.rowOutBtn:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn.small.outline.rowExceptionBtn {
  background: #ffea00;
  border-color: #ffea00;
  color: #111111;
  font-weight: 900;
  box-shadow: 0 0 0 2px rgba(255, 234, 0, 0.25);
}

.btn.small.outline.rowExceptionBtn:hover {
  background: #ffd000;
  border-color: #ffd000;
}
.dateCell{
  direction:ltr;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.overHoursWrap{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  direction: rtl;
  overflow: visible;
  margin: 10px 0 14px;
}

.overHoursCard{
  direction: rtl;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 320px;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #e8f3ff;
  cursor: pointer;
  user-select: none;
  transition: .18s ease;
  overflow: hidden;
}

.overHoursCard:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}

.overHoursIcon{
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.07);
  font-size: 20px;
}

.overHoursText{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: right;
}

.overHoursLabel{
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

.overHoursSub{
  font-size: 12px;
  opacity: .72;
  white-space: nowrap;
}

.overHoursNumber{
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  background: rgba(255,255,255,.07);
}

.overHoursCard.warning{
  border-color: rgba(255,180,70,.75);
  background: rgba(255,140,0,.11);
  box-shadow: 0 0 0 1px rgba(255,180,70,.16);
}

.overHoursCard.warning .overHoursIcon,
.overHoursCard.warning .overHoursNumber{
  background: rgba(255,180,70,.16);
}

.overHoursCard.warning .overHoursNumber,
.overHoursCard.warning .overHoursLabel{
  color: #ffd08a;
}

.overHoursCard.danger{
  border-color: rgba(255,70,70,.85);
  background: rgba(255,60,60,.12);
  box-shadow: 0 0 0 1px rgba(255,70,70,.18);
}

.overHoursCard.danger .overHoursIcon,
.overHoursCard.danger .overHoursNumber{
  background: rgba(255,70,70,.17);
}

.overHoursCard.danger .overHoursNumber,
.overHoursCard.danger .overHoursLabel{
  color: #ff9b9b;
}

/* ===== Visitor vehicles ===== */
.visitorVehiclesPanel{
  margin:0 0 12px;
  padding:14px;
  border:1px solid rgba(120,200,230,.22);
  border-radius:16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(47,121,255,.13), transparent 42%),
    rgba(255,255,255,.035);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.visitorVehiclesHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

.visitorVehiclesTitle{
  font-size:16px;
  font-weight:900;
  color:#f2fbff;
}

.visitorVehiclesSub{
  margin-top:4px;
  font-size:12px;
  color:rgba(207,233,247,.72);
}

.visitorVehiclesList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 12px;
  min-height:32px;
}

.vehicleChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(120,200,230,.28);
  background:rgba(0,0,0,.18);
  color:#eaf6ff;
  font-size:14px;
  font-weight:800;
  direction:ltr;
}

.vehicleChipText{
  direction:ltr;
  unicode-bidi:plaintext;
}

.vehicleChipDelete{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(177,58,58,.22);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.vehicleChipDelete:hover{
  background:rgba(177,58,58,.45);
}

.visitorVehiclesEmpty{
  color:rgba(207,233,247,.72);
  font-size:13px;
  padding:8px 0;
}

.visitorVehiclesAddRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.visitorVehiclesAddRow input{
  flex:1 1 220px;
  min-width:180px;
}

.visitorVehiclesAddRow .btn{
  min-width:120px;
}
.insideVehiclePill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-inline-start:6px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.45);
  color:#bbf7d0;
  font-weight:900;
  white-space:nowrap;
}
.insideModalVehicle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.45);
  color:#bbf7d0;
  font-weight:900;
  direction:ltr;
  unicode-bidi:plaintext;
  white-space:nowrap;
}

.insideModalVehicle.empty{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:rgba(207,233,247,.65);
  direction:rtl;
}

@media print{
  .insideModalVehicle{
    color:#000 !important;
    border:1px solid #444 !important;
    background:#fff !important;
  }

  .insideModalVehicle.empty{
    color:#555 !important;
  }
}
.vehicle-pill.vehicle-pill-icon-only{
  width:32px;
  min-width:32px;
  height:28px;
  min-height:28px;
  padding:0;
  gap:0;
}

.vehicle-pill.vehicle-pill-icon-only .vehicle-pill-icon{
  font-size:17px;
  transform:none;
}

.insideVehiclePill{
  width:32px;
  min-width:32px;
  height:28px;
  min-height:28px;
  padding:0;
  justify-content:center;
  gap:0;
}

.insideModalVehicle.insideModalVehicleIconOnly{
  width:34px;
  min-width:34px;
  height:28px;
  min-height:28px;
  padding:0;
  justify-content:center;
  direction:rtl;
}
/* כפתור חיפוש מתקדם */
.filterToggleBtn{
  appearance:none;
  -webkit-appearance:none;

  min-width:185px;
  min-height:52px;
  padding:0 20px;

  border-radius:14px;
  border:1px solid rgba(83, 190, 230, .55);

  background:
    linear-gradient(
      180deg,
      rgba(31, 67, 88, .98),
      rgba(15, 42, 58, .98)
    );

  color:#f3fbff;
  font-size:16px;
  font-weight:800;
  white-space:nowrap;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

/* אייקון חיפוש */
.filterToggleBtn::before{
  content:"\1F50D";
  font-size:17px;
  line-height:1;
}

/* מעבר עכבר */
.filterToggleBtn:hover{
  transform:translateY(-2px);

  border-color:rgba(91, 210, 255, .9);

  background:
    linear-gradient(
      180deg,
      rgba(38, 82, 107, 1),
      rgba(18, 51, 70, 1)
    );

  box-shadow:
    0 11px 25px rgba(0, 0, 0, .34),
    0 0 0 3px rgba(47, 160, 210, .10),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* בזמן לחיצה */
.filterToggleBtn:active{
  transform:translateY(0) scale(.98);
}

/* ניווט עם מקלדת */
.filterToggleBtn:focus-visible{
  outline:none;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .28),
    0 0 0 3px rgba(71, 184, 230, .24);
}

/* מצב שבו החיפוש המתקדם פתוח */
.filterToggleBtn.isOpen{
  color:#171207;
  border-color:rgba(225, 184, 91, .9);

  background:
    linear-gradient(
      180deg,
      #d7b45c,
      #b58d35
    );

  box-shadow:
    0 9px 24px rgba(0, 0, 0, .32),
    0 0 0 3px rgba(202, 162, 74, .12);
}

.filterToggleBtn.isOpen::before{
  content:"\2715";
  font-size:16px;
}

/* ===== Top status cards / header upgrade ===== */

.userStatusCard,
.cloudStatusCard{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;

  min-height:56px;
  padding:9px 16px;

  border-radius:16px;
  border:1px solid rgba(87, 182, 222, .28);

  background:
    linear-gradient(145deg, rgba(17, 38, 53, .96), rgba(10, 25, 35, .96));

  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);

  color:#eefaff;
}

.userStatusCard::after,
.cloudStatusCard::after{
  content:"";
  position:absolute;
  top:0;
  left:16px;
  right:16px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(105, 205, 243, .55), transparent);
}

.userStatusInfo,
.cloudStatusInfo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  line-height:1.1;
}

.userStatusLabel,
.cloudStatusLabel{
  font-size:11px;
  font-weight:700;
  color:#8fb8cf;
  white-space:nowrap;
}

.userStatusValue,
.cloudStatusValue{
  font-size:17px;
  font-weight:800;
  color:#f6fbff;
  white-space:nowrap;
}

.userBadgeIcon,
.cloudBadgeIcon{
  position:relative;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== User connected card ===== */

.userBadgeIcon{
  border:1px solid rgba(104, 193, 232, .35);
  background:rgba(63, 155, 200, .10);
  box-shadow:0 0 0 5px rgba(63, 155, 200, .04);
}

.userBadgeIcon::before{
  content:"\1F6E1";
  font-size:20px;
  line-height:1;
  filter:saturate(.9);
}

.userStatusCard:hover{
  border-color:rgba(104, 193, 232, .5);
  box-shadow:
    0 12px 28px rgba(0,0,0,.25),
    0 0 0 3px rgba(63, 155, 200, .05),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* ===== Cloud card ===== */

.cloudBadgeIcon{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.cloudBadgeIcon::before{
  content:"\2601";
  font-size:22px;
  line-height:1;
}

.cloudStatusCard.online{
  border-color:rgba(70, 205, 132, .34);
}

.cloudStatusCard.online .cloudBadgeIcon{
  color:#46d784;
  background:rgba(70, 205, 132, .10);
  border-color:rgba(70, 205, 132, .32);
  box-shadow:
    0 0 0 5px rgba(70, 205, 132, .05),
    0 0 16px rgba(70, 205, 132, .14);
}

.cloudStatusCard.online .cloudStatusValue{
  color:#effff5;
}

.cloudStatusCard.offline{
  border-color:rgba(219, 92, 92, .30);
}

.cloudStatusCard.offline .cloudBadgeIcon{
  color:#ff8c8c;
  background:rgba(177, 58, 58, .12);
  border-color:rgba(219, 92, 92, .28);
  box-shadow:
    0 0 0 5px rgba(177, 58, 58, .05),
    0 0 16px rgba(177, 58, 58, .10);
}

.cloudStatusCard.offline .cloudBadgeIcon::after{
  content:"✕";
  position:absolute;
  bottom:-5px;
  left:-5px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#b13a3a;
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}

.cloudStatusCard.offline .cloudStatusValue{
  color:#ffd4d4;
}

/* ===== Header action buttons ===== */

.topActionBtn{
  min-height:50px;
  padding:0 18px;
  border-radius:15px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.1px;
  box-shadow:
    0 9px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    filter .16s ease;
}

.topActionBtn:hover{
  transform:translateY(-1px);
}

.topActionBtn:active{
  transform:translateY(0) scale(.98);
}

/* הגדרות - זהב ניהולי */
.topSettingsBtn{
  color:#1c1407;
  border:1px solid rgba(202,162,74,.55);
  background:
    linear-gradient(180deg, rgba(220,183,91,.98), rgba(176,138,54,.98));
}

.topSettingsBtn::before{
  content:"\2699";
  margin-left:8px;
  font-size:16px;
}

.topSettingsBtn:hover{
  box-shadow:
    0 12px 24px rgba(0,0,0,.24),
    0 0 0 3px rgba(202,162,74,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* התנתקות - אדום כהה מקצועי */
.topLogoutBtn{
  color:#fff;
  border:1px solid rgba(201,88,88,.38);
  background:
    linear-gradient(180deg, rgba(123,39,39,.97), rgba(74,20,20,.97));
}

.topLogoutBtn::before{
  content:"\21A9";
  margin-left:8px;
  font-size:15px;
  font-weight:900;
}

.topLogoutBtn:hover{
  box-shadow:
    0 12px 24px rgba(0,0,0,.24),
    0 0 0 3px rgba(177,58,58,.09),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* כפתור ההתראות של הקב"ט */
#alertsBellWrap.alertsBellButton {
  box-sizing: border-box;
  position: relative;

  width: 58px;
  height: 52px;
  flex: 0 0 58px;

  border: 1px solid rgba(70, 193, 255, 0.45);
  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(18, 49, 66, 0.98),
      rgba(8, 27, 39, 0.98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 20px rgba(0, 0, 0, 0.22);

  text-align: center;
  line-height: 50px;
  cursor: pointer;
  user-select: none;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

#alertsBellWrap.alertsBellButton:hover {
  transform: translateY(-2px);
  border-color: rgba(85, 210, 255, 0.85);

  background:
    linear-gradient(
      180deg,
      rgba(23, 64, 84, 1),
      rgba(10, 34, 48, 1)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 24px rgba(0, 0, 0, 0.3),
    0 0 14px rgba(52, 190, 255, 0.12);
}

#alertsBellWrap.alertsBellButton:active {
  transform: translateY(0) scale(0.96);
}

#alertsBellWrap .alertsBellIcon {
  display: inline-block;
  vertical-align: middle;

  font-size: 23px;
  line-height: 1;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* מספר ההתראות שלא נקראו */
#alertsBadge.alertsBadge {
  display: none;
  position: absolute;

  top: 4px;
  right: 4px;

  min-width: 19px;
  height: 19px;
  padding: 0 4px;

  border: 2px solid #0b1c28;
  border-radius: 999px;

  background: #e53935;
  color: #ffffff;

  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
/* מעטפת ברורה לשורת הכרטיסיות */
.counterRowShell{
  position:relative;
  margin-top:14px;
  padding:14px;

  border:1px solid rgba(82, 190, 238, .55);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(63,161,205,.15),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(17, 43, 59, .95),
      rgba(8, 25, 37, .95)
    );

  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    0 0 0 3px rgba(67,175,224,.05),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.counterRowShell::after{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(113,211,255,.85),
    transparent
  );
}

.counterRowShell .dash{
  margin-top:0;
}

/* פס תאורה עליון עדין - כמו תחושת העיצוב של השעון */
.counterRowShell::after{
  content:"";
  position:absolute;
  top:0;
  left:22px;
  right:22px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(113, 211, 255, .45),
    transparent
  );
}

/* שלא יהיה רווח כפול */
.counterRowShell .dash{
  margin-top:0;
}

/* ===== Responsive ===== */

/* מחשבים קטנים וטאבלטים */
@media (max-width:1100px){

  .layout{
    grid-template-columns:minmax(0, 1fr);
  }

  .panel.wide{
    grid-column:1 / -1;
  }

  .statsRow{
    grid-template-columns:1fr;
  }

  .formGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .dash{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .approvalDashBody{
    grid-template-columns:1fr;
  }

  .approvalCardsGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  /* מניעת הרחבת המסך בגלל הכותרת */
  .top{
    position:relative;
    flex-wrap:wrap;
    gap:12px;
  }

  .brand.logoOnly{
    flex:1 1 100%;
    min-width:0;
    justify-content:center;
  }

  .topLeftGroup{
    width:100%;
    min-width:0;
    flex-wrap:wrap;
    justify-content:center;
  }

  .topRight{
    min-width:0;
    flex-wrap:wrap;
    justify-content:center;
  }
}


/* טאבלטים ומסכים צרים */
@media (max-width:900px){

  .miniRow{
    grid-template-columns:1fr;
  }

  #alertsLines{
    grid-template-columns:1fr;
  }

  .approvalCardsGrid{
    grid-template-columns:1fr;
  }

  .approvalDashHead{
    align-items:stretch;
    flex-direction:column;
  }

  .approvalLiveBadge{
    width:max-content;
    max-width:100%;
  }
}


/* טלפונים */
@media (max-width:700px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  #appShell,
  .layout,
  .panel,
  .panelBody{
    min-width:0;
    max-width:100%;
  }

  #appShell,
  .layout,
  .panel{
    width:100%;
  }

  /* ===== כותרת עליונה ===== */

  .top{
    position:relative;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px;
  }

  .brand.logoOnly{
    width:100%;
    min-width:0;
    flex:0 0 auto;
    justify-content:center;
  }

  .bigLogo{
    width:170px;
    max-width:65vw;
    max-height:64px;
  }

  .topLeftGroup{
    width:100%;
    min-width:0;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .topRight{
    width:100%;
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }

  #alertsBellWrap.alertsBellButton{
    align-self:center;
  }

  /* ===== שעון ===== */

  .clock{
    width:100%;
    min-width:0;
    min-height:54px;
    flex:1 1 100%;
    justify-content:center;
    padding:8px 12px;
  }

  .clockText{
    min-width:0;
  }

  /* ===== מצב משתמש וענן ===== */

  .userStatusCard,
  .cloudStatusCard{
    min-width:0;
    flex:1 1 calc(50% - 4px);
    gap:8px;
    padding:8px 10px;
  }

  .userStatusInfo,
  .cloudStatusInfo{
    min-width:0;
  }

  .userBadgeIcon,
  .cloudBadgeIcon{
    width:32px;
    height:32px;
    flex:0 0 32px;
  }

  .userStatusLabel,
  .cloudStatusLabel{
    font-size:10px;
  }

  .userStatusValue,
  .cloudStatusValue{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:14px;
  }

  .topActionBtn{
    min-width:0;
    flex:1 1 calc(50% - 4px);
    padding:0 10px;
  }

  /* ===== תוכן המערכת ===== */

  .panelBody{
    padding:10px;
  }

  .checkRow{
    display:flex;
    align-items:flex-end;
    gap:8px;
  }

  .checkRow .field{
    min-width:0;
    flex:1;
    margin-bottom:0;
  }

  .btn.scan{
    width:54px;
    flex:0 0 54px;
  }

  .actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .actions .btn{
    width:100%;
    min-width:0;
    padding:11px 6px;
    font-size:14px;
  }

  .resultBox{
    padding:14px 10px;
    font-size:20px;
  }

  /* ===== כרטיסי נתונים ===== */

  .counterRowShell{
    padding:10px;
  }

  .dash{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .cardStat{
    min-width:0;
    padding:10px;
  }

  .cardNum{
    font-size:36px;
  }

  .cardTop{
    gap:6px;
    font-size:11px;
  }

  .statsRow,
  .miniRow,
  .approvalCardsGrid,
  #alertsLines{
    grid-template-columns:1fr;
  }

  .approvalDashboard{
    padding:10px;
  }

  .approvalDashBody{
    grid-template-columns:1fr;
  }

  /* חשוב: עוקף גם הגדרות grid שנמצאות ישירות ב־HTML */
  .formGrid{
    grid-template-columns:1fr !important;
  }

  /* ===== חלונות קופצים ===== */

  .modal{
    padding:8px;
  }

  .modalCard{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
  }

  .alertPopupBox{
    width:calc(100vw - 20px);
    min-width:0;
  }


  #alertsPanel{
    position:fixed !important;
    top:80px !important;
    right:10px !important;
    left:10px !important;
    width:auto !important;
    max-width:none !important;
  }

  .tableWrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }
}
/* ===== Live Security Notifications ===== */

#securityToastHost{
  position:fixed;
  top:92px;
  left:20px;

  z-index:99999;

  display:flex;
  flex-direction:column;
  gap:10px;

  width:min(420px, calc(100vw - 40px));

  direction:rtl;

  pointer-events:none;
}


.securityEventToast{
  display:flex;
  align-items:flex-start;
  gap:12px;

  width:100%;

  padding:15px 16px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:15px;

  background:#102332;

  box-shadow:
    0 14px 34px rgba(0,0,0,.42);

  opacity:0;

  transform:
    translateY(-10px)
    scale(.98);

  transition:
    opacity .22s ease,
    transform .22s ease;
}


.securityEventToast.show{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}


.securityEventToast.booking{
  border-color:rgba(47,121,255,.60);
}


.securityEventToast.denied{
  border-color:rgba(208,138,46,.85);
}


.securityEventToast.exception{
  border-color:rgba(255,90,90,.90);

  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 20px rgba(255,90,90,.12);
}


.securityEventToast.entry{
  border-color:rgba(37,164,90,.60);
}


.securityEventIcon{
  flex:0 0 auto;

  font-size:25px;
  line-height:1;
}


.securityEventContent{
  min-width:0;
  flex:1;
}


.securityEventTitle{
  font-size:16px;
  font-weight:900;

  color:#ffffff;
}


.securityEventPerson{
  margin-top:5px;

  font-size:14px;
  font-weight:700;

  color:#dff3ff;
}


.securityEventDetail{
  margin-top:5px;

  font-size:13px;

  color:#bdd4e2;
}


.securityEventBy{
  margin-top:7px;

  font-size:11px;

  color:#8faebe;
}