/* --- Page base --- */
body { background: #E8EFF5 !important; }

/* Utility */
.shadow-soft { box-shadow: 0 8px 22px rgba(26, 39, 68, 0.06); }
.round-16 { border-radius: 16px; }
.round-20 { border-radius: 20px; }
.round-24 { border-radius: 24px; }
.text-muted-700 { color: #5f6c7b; }

/* Top bar */
.topbar {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 12px; padding: 6px 8px; color: #2b3a4a;
}

/* Cards */
.card {
  border: 0; border-radius: 16px;
  box-shadow: 0 8px 22px rgba(26, 39, 68, 0.06);
  background: #ffffff;
}

/* Profile panel */
.profile-panel {
  padding: 18px; border-radius: 18px;
  background: linear-gradient(140deg, #d5dfe0 0%, #0E98D6 55%, #f2c94c 100%);
  color: #0f2935;
}
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2C8ACD; box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.profile-name { font-weight: 700; font-size: 1.05rem; color: #ffffff; margin-top: 10px; }
.btn-edit {
  border: 0; padding: 6px 12px; border-radius: 999px;
  background: #fff; color: #606060; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.btn-edit:hover { filter: brightness(0.97); }

/* Shortcuts */
.shortcuts .shortcut {
  background: #ffffff; width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(26, 39, 68, 0.08);
  margin-inline: auto;
}
.shortcuts .lbl {
  font-size: .85rem; margin-top: 8px; color: #2b3a4a; font-weight: 600; text-align: center;
}
.shortcut i { font-size: 1.2rem; }
.shortcut.users,.shortcut.orders,.shortcut.msgs,.shortcut.invoice,
.shortcut.services,.shortcut.addcar { background: #EBE8E8; color: #2C8ACD; }

/* Section head */
.section-head { display: flex; align-items: center; justify-content: space-between; }
.btn-pill {
  border: 0; padding: 6px 14px; border-radius: 999px; font-weight: 700;
  background: #2f6fec; color: #fff; box-shadow: 0 6px 14px rgba(47,111,236,.25);
}
.btn-pill:hover { filter: brightness(.97); }

/* Sales */
#salesChart { background: #ffffff; border-radius: 10px; }

/* List tiles (shared Orders / Users / etc.) */
.list-tile {
  background:#e9f0f7; border-radius:12px; padding:16px 18px; margin:16px auto;
  border:1px solid rgba(0,0,0,0.03); transition: all .15s ease;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.list-tile:hover { outline:2px solid #228be6; background:#edf4fb; }
.tile-view-btn { border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.05); }

/* Icon-only action buttons (row actions) */
.btn-icon{
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.btn-icon i { font-size: 1rem; line-height: 1; }

/* Edit / Delete / View colors */
.btn-edit-invoice {
  background:#1e40af; color:#fff; border:1px solid rgba(255,255,255,0.0);
}
.btn-edit-invoice:hover { filter:brightness(.97); color:#fff; }
.btn-delete-invoice {
  background:#dc2626; color:#fff; border:1px solid rgba(255,255,255,0.0);
}
.btn-delete-invoice:hover { filter:brightness(.97); color:#fff; }
.btn-view-invoice { color:#111827; }

/* Make list tiles neat on small screens; circular buttons on mobile only */
@media (max-width: 576px) {
  .list-tile { flex-direction:column; align-items:flex-start; gap:10px; }
  .btn-icon{
    width: 44px; height: 44px;
    border-radius: 999px; /* rounded on mobile only */
  }
  /* keep actions aligned right on small screens if they wrap */
  .list-tile > .d-flex:last-child { align-self: flex-end; }
}

/* Messages page (kept) */
.chat-shell { border-radius: 18px; border-left: 1px solid rgba(0,0,0,0.08); }
.btn-back { color:#6b7280; text-decoration:none; display:inline-flex; align-items:center; }
.sidebar { height: 70vh; overflow-y: auto; }
.sidebar.no-border { border-right: 1px solid rgba(0,0,0,0.08); }
.sidebar-header { padding: .25rem 0; }
.sidebar-tile { background:#f7f9fc; border-radius:12px; padding:.75rem .9rem; display:flex; align-items:center; justify-content:space-between; }
.sidebar-tile + .sidebar-tile { margin-top:.5rem; }
.sidebar-name{ font-weight:600; color:#374151; }
.sidebar-snippet{ font-size:.85rem; color:#6b7280; }
.sidebar-time{ font-size:.8rem; color:#9ca3af; }
.sidebar-badge{ background:#2f80ed; color:#fff; }
.sidebar-main{ min-width:0; } .sidebar-meta{ min-width:68px; }
.chat-user{ display:inline-flex; align-items:center; gap:.6rem; }
.chat-avatar{ width:34px; height:34px; border-radius:50%; background:#2f80ed; color:#fff; display:flex; align-items:center; justify-content:center; }
.chat-username{ color:#111827; }
.thread{ height: 70vh; overflow-y: auto; padding: 1rem .25rem; }
.msg-row{ margin:14px 0; display:flex; }
.msg-left{ justify-content:flex-start; } .msg-right{ justify-content:flex-end; }
.bubble{ max-width:68%; border-radius:999px; padding:6px 12px; line-height:1.2; display:inline-flex; align-items:center; gap:8px; word-break:break-word; white-space:pre-wrap; }
.bubble-left{ background:#e9f0f7; color:#374151; }
.bubble-right{ background:#2f80ed; color:#fff; }
.bubble-time{ font-size:.72rem; color:rgba(255,255,255,.85); margin-left:2px; }
.bubble-tick{ font-size:.8rem; color:rgba(255,255,255,.85); }
.bubble-tick.read{ color:#fff; }
.composer{ border-top:1px solid rgba(0,0,0,0.06); padding-top:.75rem; }
.composer .form-control{ border-radius:999px 0 0 999px; background:#f5f7fb; border:1px solid rgba(0,0,0,0.06); }
.composer .btn-send{ border-radius:0 999px 999px 0; }

/* Extras */
.custom-card { background-color: #E8EFF5; color: #000; }
.btn-active { background: #60a5fa !important; color: #fff !important; }
.create-buttn { background-color: #128a3a!important; color: #ffffff; border: solid 1px #888282; }

/* === Sticky pill navbar (public) ======================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1050;
  padding: 14px 0;
  background: transparent;
}

.site-nav{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: #1e88d6;
  color: #fff;
  border-radius: 999px;
  padding: 12px 50px;
  box-shadow: 0 10px 26px rgba(2, 33, 78, 0.12);


}

/* Logo */
.nav-logo{
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px; background: #fff;
  text-decoration: none;
}
.nav-logo img{ width: 38px; height: 38px; object-fit: contain; display: block; }

/* Desktop links (center) */
.nav-links{
  list-style: none; display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1vw, 34px); margin: 0; padding: 0;
}
.nav-links a{
  color: #fff; font-weight: 800; text-decoration: none; letter-spacing: .2px; white-space: nowrap;
}
.nav-links a:hover, .nav-links a:focus{
  text-decoration: underline; text-underline-offset: 3px;
}

/* Right login */
.nav-login{
  display: inline-flex; align-items: center; gap: 1px; color: #fff; text-decoration: none; font-weight: 800;
  
}
.login-ico{
  width: 36px; height: 36px; border-radius: 999px; background: #fff; color: #1e88d6;
  display: inline-grid; place-items: center; font-size: 18px;
}
.nav-login:hover{ opacity:.95; }

/* Mobile "Menu" trigger (center) – hidden on desktop by default */
.nav-menu-trigger{
  appearance:none; border:none; background:transparent; color:#fff; font-weight:800;
  display:none; align-items:center; gap:10px; justify-self:center;
}
.nav-menu-trigger .menu-text{ font-size:16px; }
.nav-menu-trigger .login-ico{
  width: 36px; height: 36px; border-radius: 999px; background:#fff; color:#1e88d6;
  display:inline-grid; place-items:center; font-size: 20px;
}

/* Offcanvas links */
.offcanvas .off-link{
  display:block; padding:10px 6px; border-radius:8px; color:#0f172a; text-decoration:none; font-weight:600; 
}
.offcanvas .off-link:hover{ background:#eef5ff; color:#0b4a8f; }

/* Responsiveness */
@media (max-width: 768px){
  .site-nav{ padding: 10px 12px; }
  .nav-logo{ width: 48px; height: 48px; }
  .nav-logo img{ width: 32px; height: 32px; }

  /* Hide desktop links, show Menu button */
  .nav-links{ display:none; }
  .nav-menu-trigger{ display:inline-flex; }

  /* Slightly smaller label next to icons */
  .nav-login .login-text, .nav-menu-trigger .menu-text{ font-size: 14px; }
}

/* Nice scroll anchoring when sticky header exists */
body{ scroll-padding-top: 70px; }

.off-canvas-zdenk{
  z-index: 9999 !important;
}