/* PowerEdgeCRM — admin shell styles (stocktally_web-flavoured, Bootstrap underneath) */

/* Brand palette extracted from the PowerEdge POS logo (reference/poweredge-pos-new-logo.png):
   wordmark teal #1b8383 · "E" amber #e6bd34 · tagline red #e31e1e */
:root {
  --pe-primary: #1b8383;
  --pe-primary-dark: #0e5757;
  --pe-primary-hover: #146a6a;
  --pe-accent: #e6bd34;
  --pe-bg: #f2f7f6;
  --sidebar-width: 232px;
  --topbar-height: 56px;
}

body {
  background: var(--pe-bg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  font-size: .875rem; /* 14px — data-dense admin scale */
}

h5 { font-size: 1.1rem; }
h6 { font-size: .95rem; }
.badge { font-size: .68rem; font-weight: 600; }

/* ─── Bootstrap re-theme (primary → brand teal, warning → brand amber) ──── */
.btn-primary {
  --bs-btn-bg: var(--pe-primary);
  --bs-btn-border-color: var(--pe-primary);
  --bs-btn-hover-bg: var(--pe-primary-hover);
  --bs-btn-hover-border-color: var(--pe-primary-hover);
  --bs-btn-active-bg: var(--pe-primary-dark);
  --bs-btn-active-border-color: var(--pe-primary-dark);
  --bs-btn-disabled-bg: var(--pe-primary);
  --bs-btn-disabled-border-color: var(--pe-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--pe-primary);
  --bs-btn-border-color: var(--pe-primary);
  --bs-btn-hover-bg: var(--pe-primary);
  --bs-btn-hover-border-color: var(--pe-primary);
  --bs-btn-active-bg: var(--pe-primary-dark);
  --bs-btn-active-border-color: var(--pe-primary-dark);
}
.text-bg-primary { background-color: var(--pe-primary) !important; }
.text-bg-warning { background-color: var(--pe-accent) !important; }
a { color: var(--pe-primary); }
.form-check-input:checked { background-color: var(--pe-primary); border-color: var(--pe-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--pe-primary);
  box-shadow: 0 0 0 .25rem rgba(27, 131, 131, .18);
}
.btn-check:checked + .btn-outline-secondary {
  background: var(--pe-primary);
  border-color: var(--pe-primary);
  color: #fff;
}

/* ─── App shell ─────────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: linear-gradient(180deg, var(--pe-primary-dark) 0%, var(--pe-primary) 100%);
  padding: 1rem .75rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 1045;
}

.sidebar-brand {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: .55rem .7rem;
  margin: .25rem .25rem 1.25rem;
  text-align: center;
}
.sidebar-brand img { max-width: 100%; height: auto; max-height: 44px; }

.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  padding: .5rem .5rem .25rem;
}

.nav-item-pe {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 8px .6rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.nav-item-pe:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-item-pe.active { background: #fff; color: var(--pe-primary); font-weight: 600; }
.nav-item-pe .bi { font-size: 1rem; }

.sidebar-footer {
  margin-top: auto;
  padding: .75rem .5rem .25rem;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}
.sidebar-footer .user-name { color: #fff; font-weight: 600; font-size: 13px; }

/* ─── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}
.topbar .page-title { font-weight: 600; font-size: .92rem; margin: 0; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pe-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-body {
  padding: 1.25rem 1rem;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Mobile: sidebar becomes drawer ────────────────────────────────────── */
#sidebarToggle { display: none; }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1040;
}

@media (max-width: 991.98px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show { display: block; }
  #sidebarToggle { display: inline-flex; }
}

/* ─── KPI tiles ─────────────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.kpi {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: .65rem .85rem;
}
.kpi .n { font-size: 1.3rem; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; }
.kpi .l {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #6b7280;
}
.kpi.kpi-primary { background: var(--pe-primary); border-color: var(--pe-primary); color: #fff; }
.kpi.kpi-primary .l { color: rgba(255, 255, 255, .7); }

/* ─── Forms / cards ─────────────────────────────────────────────────────── */
/* Desktop: compact. Mobile (stall use): big touch targets + 16px inputs so iOS doesn't zoom. */
.btn { min-height: 36px; }
.btn-sm { min-height: 30px; font-size: .78rem; }
.form-control, .form-select { min-height: 38px; font-size: .875rem; }
textarea.form-control { min-height: 64px; }

@media (max-width: 767.98px) {
  .btn { min-height: 44px; }
  .form-control, .form-select { min-height: 46px; font-size: 1rem; }
}

.card { border: 1px solid #e5e7eb; border-radius: 10px; }
.card .table { margin-bottom: 0; }
.table { font-size: .84rem; }
.table > :not(caption) > * > * { padding: .5rem .75rem; }
.table > thead th {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7280;
}

/* ─── Notes / remarks ───────────────────────────────────────────────────── */
/* Interest-area remarks get a deliberate note treatment instead of a dangling
   italic line: amber-tinted chip, clamped to 2 lines, full text on hover. */
.note-text {
  display: inline-block;
  background: #fdf7e3;
  border-left: 2px solid var(--pe-accent);
  border-radius: 0 6px 6px 0;
  padding: .1rem .5rem;
  margin-top: .2rem;
  font-size: .76rem;
  color: #57534e;
  max-width: 320px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Login */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.login-card { width: 100%; max-width: 400px; border-radius: 14px; }

/* Visitor / event cards */
.item-card { margin-bottom: .75rem; }
.item-card .card-body { padding: .7rem .9rem; }
.meta-line { font-size: .78rem; color: #6b7280; }

/* WhatsApp badge */
.wa-sent { color: #16a34a; }