/* ═══════════════════════════════════
   shared.css — global additions
═══════════════════════════════════ */

/* ── CLOCK ── */
#liveClock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  color: rgba(255,255,255,.92);
}
.clock-time {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.clock-date {
  font-size: 10.5px;
  font-weight: 700;
  opacity: .8;
}
.clean-mode #liveClock { display: none !important; }

/* ── DARK TOGGLE BTN ── */
#darkToggle {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 6px;
  width: 30px; height: 30px;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s;
  flex-shrink: 0;
}
#darkToggle:hover { background: rgba(255,255,255,.24); }
.clean-mode #darkToggle { display: none !important; }

/* ── SHIFT BAR ── */
#shiftBar {
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 5px 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Assistant', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  flex-wrap: wrap;
}
.sb-item strong { color: #fff; }
.sb-sep { opacity: .4; }
.clean-mode #shiftBar { display: none !important; }

/* ── +/- COUNTER BUTTONS ── */
.mb-counter {
  display: flex;
  align-items: center;
  gap: 0;
}
.mb-counter input {
  text-align: center;
  border-radius: 0 !important;
  min-width: 0;
  flex: 1;
}
.cnt-btn {
  width: 28px; height: 100%;
  min-height: 34px;
  background: #2c7cb8;
  color: #fff;
  border: none;
  font-size: 17px; font-weight: 900;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: background .12s, transform .1s;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Assistant', Arial, sans-serif;
}
.cnt-btn:first-child { border-radius: 5px 0 0 5px; }
.cnt-btn:last-child  { border-radius: 0 5px 5px 0; }
.cnt-btn:hover { background: #1a5c8a; }
.cnt-btn:active { transform: scale(.93); }
.clean-mode .cnt-btn { display: none !important; }

/* ── DARK MODE ── */
/* ══ DARK MODE — only UI shell, NOT reports ══ */
html.dark body {
  background: #0d1f2e !important;
  color: #c8dff0 !important;
}

/* home page elements */
html.dark .tabs-shell {
  background: #162840 !important;
  border-color: #1e3a55 !important;
}
html.dark .tab-button {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.dark .tab-button.active {
  background: #2c7cb8 !important;
  border-color: #2c7cb8 !important;
}
html.dark .tab-button .tab-title { color: #c8dff0 !important; }
html.dark .tab-button .tab-desc  { color: #607080 !important; }
html.dark .tab-panel {
  background: #162840 !important;
  border-color: #1e3a55 !important;
}
html.dark .panel-head { border-color: #1e3a55 !important; }
html.dark .panel-head h3 { color: #7fb8e0 !important; }
html.dark .panel-head span { color: #607080 !important; }
html.dark .action-card {
  background: #162840 !important;
  border-color: #1e3a55 !important;
}
html.dark .action-card:hover {
  border-color: #2c7cb8 !important;
  background: #1a3350 !important;
}
html.dark .action-title { color: #7fb8e0 !important; }
html.dark .action-desc  { color: #607080 !important; }
html.dark .action-label { color: #607080 !important; }
html.dark .hero-card {
  background: linear-gradient(135deg,#0d2a3d 0%,#1a5c8a 100%) !important;
}
html.dark .hero-meta {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}
html.dark .hero-tag {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.65) !important;
}

/* status bar */
html.dark .status-panel {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.1) !important;
}
html.dark .status-label,
html.dark .status-time,
html.dark .status-empty { color: #607080 !important; }
html.dark .status-item  { color: #c8dff0 !important; }

/* profile / bonus / admin pages — non-report */
html.dark .wrap > .content,
html.dark .profile-section,
html.dark .bonus-card,
html.dark .admin-section,
html.dark .table-card {
  background: #162840 !important;
  border-color: #1e3a55 !important;
}
html.dark .admin-tab {
  background: rgba(255,255,255,.06) !important;
  color: #c8dff0 !important;
  border-color: #1e3a55 !important;
}
html.dark .admin-tab.active {
  background: #fff !important;
  color: #1a2a3a !important;
}

/* index / login page */
html.dark .login-card {
  background: #162840 !important;
  border-color: #1e3a55 !important;
}
html.dark .login-card label { color: #c8dff0 !important; }
html.dark .login-card input {
  background: #1a3350 !important;
  border-color: #2a4f78 !important;
  color: #c8dff0 !important;
}

/* footer */
html.dark .footer-note { color: #607080 !important; }

/* !! REPORTS ARE INTENTIONALLY EXCLUDED FROM DARK MODE !! */
/* .card, .mb, .sec, .dh, .dcat, .mg — not overridden */



/* ═══════════════════════════════════════════
   VISUAL UPGRADES — micro-animations, skeleton, offline
   ═══════════════════════════════════════════ */

/* ── PAGE ENTER ANIMATION ── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-wrap, .main, .wrap {
  animation: pageEnter .24s ease forwards;
}

/* ── MICRO-ANIMATIONS on buttons ── */
.btn, .nb-btn, .nb-user, .nb-hamburger, .nb-icon-btn,
.action-card, .tab-button, .sum-tab {
  transition: transform .12s ease, box-shadow .12s ease, background .14s, border-color .14s, opacity .13s !important;
}
.btn:active, .nb-btn:active, .action-card:active {
  transform: scale(.97) !important;
}

/* ── SKELETON LOADING ── */
.skeleton {
  background: linear-gradient(90deg, #e0ecf4 25%, #cde3f0 50%, #e0ecf4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
  display: inline-block;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line { height: 14px; width: 100%; margin-bottom: 8px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }

/* ── OFFLINE BANNER ── */
#offlineBanner {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a2a3a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  z-index: 5000;
  align-items: center;
  gap: 8px;
  font-family: 'Assistant', Arial, sans-serif;
  white-space: nowrap;
}
#offlineBanner.show { display: flex; }

/* ── TOOLTIP ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2a3a;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  font-family: 'Assistant', Arial, sans-serif;
  z-index: 9999;
}
[data-tip]:hover::after { opacity: 1; }

/* ── FOCUS STATES ── */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: #2c7cb8 !important;
  box-shadow: 0 0 0 3px rgba(44,124,184,.15) !important;
}

/* ── SCROLLBAR STYLING ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #9bcbe3; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #2c7cb8; }

/* ── CARD HOVER ACCENT LINE ── */
.action-card {
  border-top: 3px solid transparent !important;
  transition: border-top-color .15s, transform .15s, box-shadow .15s, border-color .15s !important;
}
.action-card[data-type="report"]:hover { border-top-color: #2c7cb8 !important; }
.action-card[data-type="drive"]:hover  { border-top-color: #16a34a !important; }
.action-card[data-type="guide"]:hover  { border-top-color: #0e9488 !important; }

/* ── SMOOTH SCROLL ── */
html { scroll-behavior: smooth; }


/* ═══════════════════════════════════════════════════
   NAVBAR — סרגל כלים אחיד — כל הדפים
   ═══════════════════════════════════════════════════ */

#mainNavbar {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, #1a5c8a 0%, #2e8bc0 60%, #4a9fd4 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 2px 14px rgba(0,20,60,.28);
  gap: 10px;
  direction: rtl;
}

/* ── צד ימין: פרופיל + המבורגר ── */
.nb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  order: 1;
}

.nb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  color: #fff;
  font-family: 'Assistant', Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  transition: background .14s, transform .12s;
  white-space: nowrap;
  text-decoration: none;
}
.nb-user:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); }

.nb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e31837 0%, #2c7cb8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.3);
}

.nb-hamburger {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .14s, transform .12s;
  flex-shrink: 0;
}
.nb-hamburger:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.nb-hamburger span {
  display: block;
  width: 17px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}

/* ── מרכז: לוגו ── */
.nb-center {
  display: flex;
  align-items: center;
  gap: 9px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  order: 2;
}
.nb-logo {
  height: 28px;
  width: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.nb-brand {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .1px;
  white-space: nowrap;
}

/* ── צד שמאל: שעון + כפתורים ── */
.nb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  order: 3;
  direction: ltr;
}

.nb-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.nb-clock .clock-time {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .4px;
}
.nb-clock .clock-date {
  font-size: 10px;
  font-weight: 700;
  opacity: .75;
  white-space: nowrap;
}

.nb-btn {
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 5px 11px;
  transition: background .14s, transform .12s;
  white-space: nowrap;
  font-family: 'Assistant', Arial, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.nb-btn:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.nb-btn-active { background: rgba(255,255,255,.22); }

/* כפתור מצב לילה — טקסט ולא אמוג'י */
#nbDarkBtn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: 6px;
  padding: 5px 11px;
  font-family: 'Assistant', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s, transform .12s;
  white-space: nowrap;
}
#nbDarkBtn:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }

.nb-logout-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: 6px;
  padding: 5px 11px;
  font-family: 'Assistant', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s, transform .12s;
  white-space: nowrap;
}
.nb-logout-btn:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }

/* ── כפתור חזרה (מתחת לnavbar) ── */
.nb-back-bar {
  background: rgba(26,92,138,.08);
  border-bottom: 1px solid rgba(26,92,138,.1);
  padding: 6px 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a5c8a;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: color .14s, transform .12s;
}
.nb-back-link:hover { color: #2c7cb8; transform: translateX(2px); }
.nb-back-link svg { flex-shrink: 0; }

/* ── תפריט המבורגר (Drawer) ── */
.nb-drawer {
  position: fixed;
  top: 0;
  right: -310px;
  width: 290px;
  height: 100vh;
  background: #fff;
  box-shadow: -6px 0 28px rgba(0,20,60,.2);
  z-index: 10000;
  transition: right .26s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  direction: rtl;
}
.nb-drawer.open { right: 0; }

.nb-drawer-header {
  background: linear-gradient(135deg, #1a5c8a 0%, #4a9fd4 100%);
  padding: 22px 18px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nb-drawer-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 900;
  flex-shrink: 0;
}
.nb-drawer-name {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}
.nb-drawer-role {
  color: rgba(255,255,255,.7);
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 2px;
}
.nb-drawer-close {
  margin-right: auto;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: background .14s;
}
.nb-drawer-close:hover { background: rgba(255,255,255,.28); }

.nb-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
}

.nb-drawer-section {
  padding: 14px 18px 5px;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.nb-drawer-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  color: #1a2a3a;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .12s, color .12s, border-right-color .12s;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: right;
  font-family: 'Assistant', Arial, sans-serif;
  border-right: 3px solid transparent;
}
.nb-drawer-item:hover { background: #f0f8ff; color: #1a5c8a; border-right-color: #cce4f5; }
.nb-drawer-item.active { background: #e8f4fb; color: #1a5c8a; font-weight: 800; border-right-color: #2c7cb8; }
.nb-drawer-item .nb-di-icon { color: #85b8d8; flex-shrink: 0; transition: color .12s; }
.nb-drawer-item:hover .nb-di-icon,
.nb-drawer-item.active .nb-di-icon { color: #2c7cb8; }

.nb-drawer-divider {
  height: 1px;
  background: #e8f0f7;
  margin: 8px 18px;
}

.nb-drawer-item.danger { color: #c0392b; }
.nb-drawer-item.danger .nb-di-icon { color: #e0a0a0; }
.nb-drawer-item.danger:hover { background: #fff5f5; color: #c0392b; border-right-color: #fca5a5; }

/* ── Overlay ── */
.nb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s;
}
.nb-overlay.open { opacity: 1; pointer-events: all; }

/* ── Install Modal ── */
.nb-install-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
}
.nb-install-modal.open { display: flex; }
.nb-install-box {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  text-align: center;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,20,60,.22);
  direction: rtl;
}
.nb-install-close {
  position: absolute;
  top: 12px;
  left: 14px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #94a3b8;
  padding: 4px;
  line-height: 1;
  transition: color .14s;
}
.nb-install-close:hover { color: #1a2a3a; }
.nb-install-box h3 { font-size: 17px; font-weight: 900; color: #1a2a3a; margin-bottom: 6px; }
.nb-install-box p  { font-size: 13px; color: #607080; margin-bottom: 20px; line-height: 1.5; }
.nb-install-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.nb-install-option {
  border: 1.5px solid #c0d8ec;
  border-radius: 10px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.nb-install-option:hover { border-color: #2c7cb8; background: #f0f8ff; }
.nb-install-option span { font-size: 12.5px; font-weight: 800; color: #1a2a3a; }
.nb-install-option small { font-size: 10px; color: #94a3b8; text-align: center; line-height: 1.3; }

/* ── DARK MODE — navbar/shell only ── */
html.dark #mainNavbar {
  background: linear-gradient(135deg, #0d2a3d 0%, #1a5c8a 100%) !important;
}
html.dark .nb-drawer { background: #1a2a3a; }
html.dark .nb-drawer-body .nb-drawer-section { color: #607080; }
html.dark .nb-drawer-item { color: #c8dff0; }
html.dark .nb-drawer-item:hover { background: #243447; color: #7fb8e0; }
html.dark .nb-drawer-item.active { background: #1e3a55; color: #7fb8e0; }
html.dark .nb-drawer-divider { background: #243447; }
html.dark .nb-back-bar { background: rgba(0,0,0,.15); border-color: rgba(0,0,0,.2); }
html.dark .nb-back-link { color: #7fb8e0; }
html.dark .nb-install-box { background: #1a2a3a; }
html.dark .nb-install-box h3 { color: #c8dff0; }
html.dark .nb-install-box p  { color: #607080; }
html.dark .nb-install-option { border-color: #2a4f78; }
html.dark .nb-install-option:hover { background: #1e3a55; }
html.dark .nb-install-option span { color: #c8dff0; }

/* ── MOBILE ≤640px ── */
@media (max-width: 640px) {
  #mainNavbar { padding: 0 12px; height: 50px; }
  .nb-center { display: none; }
  .nb-name { display: none; }
  .nb-btn { display: none; }
  #nbDarkBtn { display: none; }
  .nb-logout-btn { display: none; }
  .nb-clock .clock-date { display: none; }
  .nb-clock .clock-time { font-size: 13px; }
  .nb-drawer { width: 280px; }
  .nb-back-bar { padding: 5px 12px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .nb-center { display: none; }
  .nb-clock .clock-date { display: none; }
}