/* Theme tokens */
:root {
  --bg: #f0f0f0;
  --fg: #2e2e2e;

  --btn-start: #ff9997;
  --btn-end: #ff6962;

  --shadow-light: #ffffff; /* top-left */
  --shadow-dark: rgba(209, 202, 202, 0.9); /* bottom-right */

  --radius: 14px;
  --radius-sm: 10px;
  --transition: 0.22s ease;
  --focus-ring: rgba(255, 105, 98, 0.18);
}

/* ---- Base ---- */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* small layout helpers */
.container-sm {
  padding-left: 1rem;
  padding-right: 1rem;
}
.hidden {
  display: none !important;
}

/* ---- Cards (raised) ---- */
.card {
  background: var(--bg);
  border-radius: var(--radius);
  border: 0;
  padding: 1rem;
  box-shadow: 6px 6px 18px var(--shadow-dark),
    -6px -6px 18px var(--shadow-light);
  transition: box-shadow var(--transition), transform var(--transition);
  will-change: box-shadow, transform;
}
.card:hover {
  box-shadow: 4px 4px 14px var(--shadow-dark),
    -4px -4px 14px var(--shadow-light);
}

/* login layout tweak */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card {
  max-width: 420px;
  width: 100%;
}

/* app bar */
.app-bar {
  height: 120px;
  border-radius: var(--radius);
  background-image: url("hd_logo.png");
  background-size: cover;
  background-position: center;
  box-shadow: 8px 8px 22px var(--shadow-dark),
    -8px -8px 22px var(--shadow-light);
}

/* headings & labels */
h3 {
  margin: 0.25rem 0 1rem;
  text-align: center;
  font-weight: 600;
  color: #333;
}
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #444;
}
.small-muted,
.small,
.text-muted {
  color: rgba(46, 46, 46, 0.6);
}

/* ---- Inputs (recessed / inset) ---- */
.form-control,
.form-select,
textarea {
  background: var(--bg);
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--fg);
  min-height: 48px; /* >=48 for touch */
  box-shadow: inset 4px 4px 10px var(--shadow-dark),
    inset -4px -4px 10px var(--shadow-light);
  transition: box-shadow var(--transition), transform var(--transition);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  will-change: box-shadow;
}

/* input-group compatibility */
.input-group .form-control {
  border-radius: calc(var(--radius) - 4px);
}
textarea.form-control {
  min-height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.3;
  resize: vertical;
}

/* focus: inset + soft-red ring */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  outline: none;
  box-shadow: inset 3px 3px 8px var(--shadow-dark),
    inset -3px -3px 8px var(--shadow-light), 0 0 0 4px var(--focus-ring);
}

/* placeholder contrast */
::placeholder {
  color: rgba(46, 46, 46, 0.45);
}

/* ---- Buttons (FULL neumorphic soft-red gradient) ---- */
/* apply gradient to all bootstrap variants you use, plus IDs */
.btn,
.btn-primary,
.btn-outline-primary,
.btn-outline-light,
#loginBtn,
#logoutBtn,
#refreshBtn,
#captureBtn,
.map-btn,
.neo-btn {
  border-radius: calc(var(--radius) - 4px) !important;
  padding: 12px 16px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  border: none !important;
  background: linear-gradient(
    135deg,
    var(--btn-start),
    var(--btn-end)
  ) !important;
  color: #fff !important;
  box-shadow: 6px 6px 16px var(--shadow-dark),
    -6px -6px 16px var(--shadow-light);
  transition: box-shadow var(--transition), transform var(--transition);
}

/* small buttons (map, sm) */
.btn-sm,
.map-btn {
  padding: 6px 10px !important;
  border-radius: calc(var(--radius) - 6px) !important;
  min-height: 36px;
}

/* hover / active */
.btn:hover,
.btn:focus {
  box-shadow: 0 0 18px rgba(255, 105, 98, 0.45), 4px 4px 12px var(--shadow-dark),
    -4px -4px 12px var(--shadow-light);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 4px 4px 10px var(--shadow-dark),
    -4px -4px 10px var(--shadow-light);
}

/* ensure outline-light variant text is white (overrides bootstrap) */
.btn-outline-light {
  color: #fff !important;
}

/* ---- Photo preview (recessed frame + raised image) ---- */
#photoPreview {
  display: inline-block;
  border-radius: calc(var(--radius)-6px);
  padding: 8px;
  background: var(--bg);
  box-shadow: inset 4px 4px 10px var(--shadow-dark),
    inset -4px -4px 10px var(--shadow-light);
  margin-top: 6px;
  contain: layout style;
}
#photoPreview img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: calc(var(--radius)-8px);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.06),
    -4px -4px 12px rgba(255, 255, 255, 0.6);
  will-change: transform;
  aspect-ratio: 4/3;
  object-fit: cover;
  cursor: pointer;
}

/* ---- Hybrid Table: raised header + inset rows ---- */
.table-responsive {
  overflow: auto;
  max-height: 520px;
  content-visibility: auto;
  contain-intrinsic-size: 400px;
}

/* header: raised */
.table thead th {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 6px 6px 18px var(--shadow-dark),
    -6px -6px 18px var(--shadow-light);
  border-bottom: none;
  padding: 12px;
  font-weight: 600;
}

/* rows: inset */
.table tbody tr {
  background: var(--bg);
  box-shadow: inset 3px 3px 7px var(--shadow-dark),
    inset -3px -3px 7px var(--shadow-light);
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: inset 2px 2px 6px var(--shadow-dark),
    inset -2px -2px 6px var(--shadow-light), 0 6px 10px rgba(0, 0, 0, 0.03);
}
.table td,
.table th {
  vertical-align: middle;
  padding: 10px 12px;
}

/* thumb photo */
.thumb-photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.04),
    -4px -4px 10px rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

/* chart canvas container */
.card canvas {
  background: transparent;
  padding: 6px;
  border-radius: 8px;
  width: 100% !important;
  object-fit: contain;
}

/* Make chart cards equal height in a row */
.row.g-3 > .col-12.col-lg-6 {
  display: flex;
  flex-direction: column;
}

.row.g-3 > .col-12.col-lg-6 .card,
.row.g-3 > .col-12.col-lg-6 .card canvas {
  flex: 1 1 auto; /* stretch card and canvas */
  height: 100% !important;
}

.row.g-3 > .col-12 .card canvas {
  height: 220px !important; /* slightly taller for bottom chart */
}

/* Leaderboard small styles */
#execLeaderboard div {
  padding: 6px 0;
}
.card-stats {
  border-radius: 12px;
}

/* Make chart canvas friendly in cards */
.card canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* subtle badge colors for statuses */
.status-badge {
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
}
.status-Interested {
  background: linear-gradient(135deg, #ffecec, #ffd9d9);
  color: #b23;
}
.status-Not {
  background: linear-gradient(135deg, #f8e6e6, #f3d2d2);
  color: #a33;
}

/* toasts & status */
.toast-container {
  z-index: 11000;
}
#syncStatus {
  color: rgba(46, 46, 46, 0.65);
}

/* neutralize bootstrap helper shadows that break look */
.shadow,
.shadow-sm {
  box-shadow: none !important;
}
.rounded,
.rounded-1,
.rounded-2 {
  border-radius: inherit !important;
}

/* performance & mobile optimizations */
@media (max-width: 575px) {
  .app-bar {
    height: 100px;
  }
  .card {
    padding: 0.9rem;
    box-shadow: 3px 3px 10px var(--shadow-dark),
      -3px -3px 10px var(--shadow-light);
  }
  .form-control,
  .form-select,
  textarea {
    min-height: 52px;
    padding: 12px;
    box-shadow: inset 2px 2px 6px var(--shadow-dark),
      inset -2px -2px 6px var(--shadow-light);
  }
  .btn {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 0.98rem;
  }
  #photoPreview {
    padding: 6px;
  }
  #photoPreview img {
    aspect-ratio: 4/3;
  }
  .table thead th {
    box-shadow: 4px 4px 12px var(--shadow-dark),
      -4px -4px 12px var(--shadow-light);
  }
  .table tbody tr {
    box-shadow: inset 2px 2px 5px var(--shadow-dark),
      inset -2px -2px 5px var(--shadow-light);
  }
}

/* accessibility focus ring for keyboard users */
:focus {
  outline: none;
}
a:focus,
button:focus,
.form-control:focus {
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* micro-optimizations */
.card,
.form-control,
.form-select,
.btn {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Floating row-actions bubble */
.row-actions-float {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: none;
  gap: 6px;
  z-index: 50;
}

.table-hover tbody tr {
  position: relative;
}

.table-hover tbody tr:hover .row-actions-float {
  display: inline-flex;
}

tr:hover .row-actions {
  opacity: 1;
}

.table-responsive {
  position: relative;
  overflow-x: auto;
}

table td {
  position: relative;
}

/* Small helper styles for sticky columns + drawer */
/* sticky header (thead) already had class sticky-top; ensure z-index */
thead.sticky-top {
  z-index: 5;
}

/* sticky first two columns */
.table .sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background: inherit;
  z-index: 4;
}
.table .sticky-col.first {
  left: 0;
  min-width: 180px;
}
.table .sticky-col.second {
  left: 180px; /* must match width of first sticky col */
  min-width: 140px;
}

/* increase z-index for header cells that overlap sticky columns */
.table thead th {
  z-index: 6;
}

/* row action buttons */
.row-actions {
  display: none;
  gap: 6px;
}
tr:hover .row-actions {
  display: inline-flex;
}
/* overlay actions inside the last (map) cell */
.cell-with-actions {
  position: relative;
  display: inline-block;
  min-width: 64px;
}
.cell-with-actions .row-actions {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
tr:hover .cell-with-actions .row-actions {
  display: inline-flex;
}

/* thumbnail */
.thumb-photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}

/* detail drawer */
#detailDrawer {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 420px;
  max-width: 95vw;
  background: #fff;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 240ms ease;
  z-index: 1200;
  overflow-y: auto;
  padding: 20px;
}
#detailDrawer.open {
  transform: translateX(0);
}
#detailDrawer .drawer-close {
  position: absolute;
  left: 12px;
  top: 12px;
  background: transparent;
  border: none;
}

/* small helper for insight cards row */
.insights-row .card {
  cursor: default;
}

/* small responsive tweaks */
@media (max-width: 768px) {
  .table .sticky-col.second {
    left: 120px;
  }
  .table .sticky-col.first {
    min-width: 140px;
  }
}

/* Simple custom modal (lightweight) */
.modal-backdrop-custom {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}
.modal-backdrop-custom.open {
  display: flex;
}
.modal-card {
  background: #fff;
  border-radius: 8px;
  max-width: 520px;
  width: 94%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  padding: 18px;
}
.modal-card .modal-title {
  font-weight: 600;
  margin-bottom: 8px;
}
/* Toast notifications (bottom-right) */
.toast-container {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1400;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: #222;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  min-width: 180px;
  max-width: 320px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast.success {
  background: #198754;
}
.toast.error {
  background: #d63384;
}
.toast.info {
  background: #0d6efd;
}