/* ============================================================
   app.css — PharmaCare POS main stylesheet
   Extracted from base.html <style> block
   ============================================================ */

:root {
  --bs-primary: #0d6efd;
  --sidebar-bg: #012970;
  --sidebar-width: 280px;
  --topbar-height: 60px;
}
* { box-sizing: border-box; }
body { font-family: 'Open Sans', sans-serif; background: #f6f9ff; color: #444; }

/* ── Sidebar ── */
#sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  z-index: 1000; overflow-y: auto;
  transition: left .3s;
}
#sidebar .logo {
  padding: 20px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
#sidebar .logo span {
  font-size: 1.2rem; font-weight: 700; color: #fff;
  font-family: 'Nunito', sans-serif;
}
#sidebar .logo small { display: block; color: #c0d3f0; font-size: .7rem; margin-top: 2px; }
.sidebar-nav { padding: 12px 0; }
.sidebar-nav .nav-heading {
  font-size: .65rem; font-weight: 700; color: #7fa3d0;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 10px 20px 6px;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; color: #c0d3f0; text-decoration: none;
  font-size: .875rem; border-left: 3px solid transparent;
  transition: all .2s;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
  color: #fff; background: rgba(255,255,255,.08);
  border-left-color: #4154f1;
}
.sidebar-nav a i { font-size: 1rem; min-width: 20px; }

/* ── Topbar ── */
#topbar {
  position: fixed; top: 0; left: var(--sidebar-width); right: 0;
  height: var(--topbar-height);
  background: #fff; border-bottom: 1px solid #e0e6ed;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; z-index: 999; gap: 16px;
}
#topbar .page-title { font-weight: 600; font-size: 1rem; color: #012970; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-right .badge-pill {
  font-size: .7rem; background: #dc3545; color: #fff;
  border-radius: 999px; padding: 2px 6px;
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #4154f1; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; cursor: pointer;
}

/* ── Main content ── */
#main {
  margin-left: var(--sidebar-width);
  margin-top: var(--topbar-height);
  padding: 24px;
  min-height: calc(100vh - var(--topbar-height));
}

/* ── Cards ── */
.card { border: none; border-radius: 12px; box-shadow: 0 2px 16px rgba(1,41,112,.08); }
.card-header { background: transparent; border-bottom: 1px solid #e0e6ed; font-weight: 600; }

/* ── Stat cards ── */
.stat-card { border-radius: 12px; padding: 20px 24px; color: #fff; }
.stat-card h3 { font-size: 1.8rem; font-weight: 700; margin: 0; }
.stat-card p  { margin: 0; font-size: .85rem; opacity: .85; }
.stat-card .icon { font-size: 2.5rem; opacity: .35; }

/* ── Alerts ── */
.alert-badge { background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 8px; padding: 12px 16px; }

/* ── Tables ── */
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: #7f8fa4; border-bottom: 2px solid #e0e6ed; }
.table td { vertical-align: middle; font-size: .875rem; }

/* ── Buttons ── */
.btn { border-radius: 8px; font-size: .875rem; }
.btn-sm { padding: .25rem .65rem; font-size: .78rem; }

/* ── Status badges ── */
.badge-retail   { background: #d1ecf1; color: #0c5460; }
.badge-wholesale { background: #d4edda; color: #155724; }

/* ── POS product card ── */
.pos-product-card {
  border: 1px solid #e0e6ed; border-radius: 10px; padding: 12px;
  cursor: pointer; transition: all .2s; background: #fff;
}
.pos-product-card:hover { border-color: #4154f1; box-shadow: 0 4px 12px rgba(65,84,241,.15); }

/* ── Responsive ── */
@media (max-width: 768px) {
  #sidebar { left: calc(-1 * var(--sidebar-width)); }
  #sidebar.show { left: 0; }
  #topbar, #main { left: 0; margin-left: 0; }
}

/* ── Page loader ── */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #012970;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  transition: opacity .35s ease, visibility .35s ease;
}
#page-loader.loaded { opacity: 0; visibility: hidden; }
#page-loader .loader-ring {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
#page-loader span { color: #c0d3f0; font-size: .8rem; letter-spacing: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast notifications ── */
#toast-container {
  position: fixed; top: 80px; right: 20px;
  z-index: 10000; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.pharma-toast {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border-left: 4px solid var(--toast-color, #0d6efd);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 280px; max-width: 360px;
  box-shadow: 0 8px 32px rgba(1,41,112,.15);
  pointer-events: all;
  transform: translateX(120%);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  opacity: 0;
}
.pharma-toast.show { transform: translateX(0); opacity: 1; }
.toast-icon { font-size: 1.25rem; color: var(--toast-color); flex-shrink: 0; }
.toast-msg { flex: 1; font-size: .875rem; color: #333; }
.toast-close {
  background: none; border: none; font-size: 1.1rem; color: #999;
  cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
}
.toast-close:hover { color: #333; }

/* ── Card entrance animation ── */
.card, .stat-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease, box-shadow .2s ease;
}
.card-visible, .stat-card.card-visible { opacity: 1; transform: translateY(0); }
.card:hover { box-shadow: 0 6px 28px rgba(1,41,112,.13) !important; }

/* ── Ripple effect ── */
.ripple-wave {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple .55s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(2.5); opacity: 0; } }

/* ── Live clock ── */
#live-clock {
  font-size: .78rem; color: #7f8fa4;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}

/* ── Scroll-to-top button ── */
#scroll-top-btn {
  position: fixed; bottom: 28px; right: 24px; z-index: 998;
  width: 40px; height: 40px; border-radius: 50%;
  background: #4154f1; color: #fff; border: none;
  box-shadow: 0 4px 14px rgba(65,84,241,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}
#scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#scroll-top-btn:hover { background: #2d3de0; }

/* ── Topbar meta strip ── */
.topbar-meta { display: flex; align-items: center; gap: 10px; }

/* ── Sidebar logo pulse dot ── */
.logo-dot {
  display: inline-block; width: 8px; height: 8px;
  background: #4cbb7e; border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,187,126,.5); }
  50%       { box-shadow: 0 0 0 6px rgba(76,187,126,0); }
}

/* ── Table row hover ── */
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: rgba(65,84,241,.04); }