/* ═════════════════════════════════════════════════════════════════ */
/* DMD HUB — Locations section shared UI styles                       */
/* Used by list.php, add.php, edit.php                                */
/* ═════════════════════════════════════════════════════════════════ */

/* ─── Page Hero: title + description + primary actions ──────────── */
.loc-page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #1e222b 0%, #181b22 100%);
  border: 1px solid #2b3140;
  border-radius: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.loc-page-hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 280px;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 70%);
  pointer-events: none;
}
.loc-page-hero-text {
  flex: 1 1 320px;
  min-width: 280px;
}
.loc-page-title {
  color: #f3f4f6;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
}
.loc-page-sub {
  color: #9ca3af;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}
.loc-page-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ─── Hero buttons ──────────────────────────────────────────────── */
.loc-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 9px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 140ms, border-color 140ms, transform 80ms, box-shadow 140ms;
  cursor: pointer;
  white-space: nowrap;
}
.loc-hero-btn i { font-size: 18px; }
.loc-hero-btn:hover { transform: translateY(-1px); }
.loc-hero-btn:active { transform: translateY(0); }
.loc-hero-btn-primary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: #3b82f6;
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}
.loc-hero-btn-primary:hover {
  background: linear-gradient(180deg, #4f8df6 0%, #3069e0 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.45);
}
.loc-hero-btn-success {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.loc-hero-btn-success:hover {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
}
.loc-hero-btn-ghost {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.30);
  color: #cbd5e1;
}
.loc-hero-btn-ghost:hover {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.50);
  color: #f3f4f6;
}
.loc-hero-btn-danger-ghost {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.30);
  color: #fca5a5;
}
.loc-hero-btn-danger-ghost:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fff;
}

/* ─── Form sections: visually grouped panels with headers ────────── */
.loc-form-section {
  background: linear-gradient(180deg, #1e222b 0%, #181b22 100%);
  border: 1px solid #2b3140;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 18px;
  position: relative;
}
.loc-form-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #252c38;
}
.loc-form-section-header .loc-section-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border-radius: 9px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  font-size: 22px;
  flex-shrink: 0;
}
.loc-form-section-header .loc-section-title {
  color: #f3f4f6;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.loc-form-section-header .loc-section-sub {
  color: #9ca3af;
  font-size: 14px;
  font-weight: 400;
  margin: 3px 0 0 0;
  line-height: 1.45;
}
.loc-form-section-body {
  /* Lets inner Bootstrap rows flow normally */
}

/* ─── Form controls inside the dark sections ─────────────────────── */
.loc-form-section .form-label {
  color: #cbd5e1;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 7px;
}
.loc-form-section .form-label.fs-base {
  font-size: 15px;
}
.loc-form-section .form-label small,
.loc-form-section .form-text,
.loc-form-section small.text-muted {
  color: #8b95a7 !important;
  font-size: 13px;
  font-weight: 400;
}
.loc-form-section .form-control,
.loc-form-section .form-control-lg,
.loc-form-section .form-select,
.loc-form-section .form-select-lg {
  background: linear-gradient(180deg, #21252f 0%, #1a1d25 100%) !important;
  border: 1px solid #374151 !important;
  color: #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  padding: 11px 14px;
  transition: border-color 140ms, box-shadow 140ms;
}
.loc-form-section .form-control-lg,
.loc-form-section .form-select-lg {
  padding: 13px 15px;
  font-size: 15.5px !important;
}
.loc-form-section .form-control::placeholder {
  color: #6b7280;
}
.loc-form-section .form-control:focus,
.loc-form-section .form-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  background: linear-gradient(180deg, #252a36 0%, #1e222b 100%) !important;
}
.loc-form-section textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* ─── Custom switch styling inside form sections ─────────────────── */
.loc-form-section .form-switch .form-check-input {
  width: 42px;
  height: 22px;
  background-color: #374151;
  border-color: #4b5563;
  cursor: pointer;
}
.loc-form-section .form-switch .form-check-input:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
.loc-form-section .form-switch .form-check-label {
  color: #e5e7eb;
  font-size: 15px;
  font-weight: 500;
  padding-left: 6px;
}

/* ─── Checkbox group (category picker) ───────────────────────────── */
.loc-form-section .form-check:not(.form-switch) .form-check-input {
  background-color: transparent;
  border-color: #4b5563;
  cursor: pointer;
  width: 1.1em;
  height: 1.1em;
}
.loc-form-section .form-check:not(.form-switch) .form-check-input:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
.loc-form-section .form-check:not(.form-switch) .form-check-label {
  color: #cbd5e1;
  font-size: 14.5px;
  cursor: pointer;
}

/* ─── Invalid feedback styling ───────────────────────────────────── */
.loc-form-section .invalid-feedback {
  color: #fca5a5;
  font-size: 13px;
}
.loc-form-section .was-validated .form-control:invalid,
.loc-form-section .form-control.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* ─── Alerts inside form sections ────────────────────────────────── */
.loc-form-section .alert {
  border-radius: 8px;
  border-width: 1px;
  font-size: 13.5px;
}
.loc-form-section .alert-warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.loc-form-section .alert-info {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}
.loc-form-section .alert-danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

/* ─── Submit row at the bottom of add/edit forms ─────────────────── */
.loc-form-submit-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px;
  background: linear-gradient(180deg, #1e222b 0%, #181b22 100%);
  border: 1px solid #2b3140;
  border-radius: 12px;
  margin-top: 18px;
}
.loc-form-submit-row .loc-submit-hint {
  color: #8b95a7;
  font-size: 13.5px;
  margin-right: auto;
}

/* ─── Remove the default <br> spacing that the old form used ─────── */
.loc-form-section .col-sm-6 > br:first-child,
.loc-form-section .col-sm-12 > br:first-child {
  display: none;
}

/* ─── Danger variant for sections like "Delete Account" ──────────── */
.loc-form-section-danger {
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: linear-gradient(180deg, #2a1a1e 0%, #1f1418 100%) !important;
}
.loc-form-section-danger .loc-form-section-header {
  border-bottom-color: rgba(239, 68, 68, 0.2);
}
.loc-section-icon-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}
.loc-danger-list {
  padding-left: 20px;
  line-height: 1.7;
}
.loc-danger-list li {
  color: #9ca3af;
}

/* ─── Password toggle (show/hide eye) — match dark theme ─────────── */
.loc-form-section .password-toggle {
  position: relative;
}
.loc-form-section .password-toggle input.form-control {
  padding-right: 44px;
}
.loc-form-section .password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #9ca3af;
  z-index: 2;
}
.loc-form-section .password-toggle-btn input { display: none; }
.loc-form-section .password-toggle-indicator {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.loc-form-section .password-toggle-check:checked ~ .password-toggle-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f3f4f6'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E");
}
.loc-form-section .invalid-tooltip {
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* ─── Modal override ─────────────────────────────────────────── */
/* Theme applies .modal-content { padding: 0 1.5rem } AND */
/* .modal-body { margin: 0 -1.5rem } to make body span full width. */
/* Undo ALL of that so header/body/footer each own their own padding. */
.loc-modal .modal-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.loc-modal .modal-body {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 20px !important;
}
.loc-modal .modal-header {
  padding: 18px 20px !important;
}
.loc-modal .modal-footer {
  padding: 16px 20px !important;
}

/* ─── Modal body form controls — dark theme ──────────────────────── */
.loc-modal .password-toggle {
  position: relative;
}
.loc-modal .password-toggle input.form-control {
  padding-right: 44px;
}
.loc-modal .password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #9ca3af;
  z-index: 2;
}
.loc-modal .password-toggle-btn input { display: none; }
.loc-modal .password-toggle-indicator {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.loc-modal .password-toggle-check:checked ~ .password-toggle-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f3f4f6'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E");
}

/* ─── Social Content — segmented tab nav ────────────────────────── */
.sc-tab-nav {
  display: flex;
  gap: 4px;
  background: linear-gradient(180deg, #1e222b 0%, #181b22 100%);
  border: 1px solid #2b3140;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
}
.sc-tab-item {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  border-radius: 7px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.sc-tab-item i { font-size: 15px; vertical-align: -2px; }
.sc-tab-item:hover {
  color: #e5e7eb;
  background: rgba(255,255,255,0.06);
  text-decoration: none;
}
.sc-tab-item.active {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(59,130,246,0.35);
}

/* ─── Social Content — item cards ───────────────────────────────── */
.sc-item-card {
  background: linear-gradient(180deg, #1e222b 0%, #181b22 100%);
  border: 1px solid #2b3140;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sc-item-card:hover {
  border-color: rgba(59,130,246,0.4);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.sc-item-card-body {
  padding: 18px 20px;
}
.sc-item-card-meta {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}
.sc-item-card-title {
  color: #f3f4f6;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}
.sc-item-card-title a {
  color: inherit;
  text-decoration: none;
}
.sc-item-card-title a:hover { color: #3b82f6; }
.sc-item-card-desc {
  color: #9ca3af;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 12px 0;
}
.sc-item-card-badges { margin-bottom: 12px; }
.sc-item-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* News — horizontal image+content layout */
.sc-news-card-row {
  display: flex;
  flex-direction: row;
}
.sc-news-card-img {
  flex: 0 0 200px;
  min-height: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
@media (max-width: 576px) {
  .sc-news-card-row { flex-direction: column; }
  .sc-news-card-img { flex: 0 0 160px; min-height: 160px; }
}
/* Video/Service — cover image top */
.sc-item-card-cover {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
}
/* Events — horizontal with round avatar */
.sc-event-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}
.sc-event-avatar {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.1);
}
.sc-event-info { flex: 1 1 0; min-width: 0; }
.sc-event-info h6 {
  color: #f3f4f6;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px 0;
}
.sc-event-info .sc-event-dates {
  color: #6b7280;
  font-size: 12px;
  margin-bottom: 8px;
}
.sc-event-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .sc-event-card { flex-direction: column; align-items: flex-start; }
  .sc-event-actions { width: 100%; }
}
/* Tab note */
.sc-tab-note {
  color: #9ca3af;
  font-size: 13.5px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ─── Social Content — form submit row ──────────────────────────── */
.sc-form-submit-row {
  display: flex;
  gap: 12px;
  padding: 20px 0 8px 0;
  border-top: 1px solid #2b3140;
  margin-top: 8px;
}

/* ═════════════════════════════════════════════════════════════════ */
/* Locations Manager — search, tags, public toggle, context menu     */
/* ═════════════════════════════════════════════════════════════════ */

/* Client-side filter (search / tags) hides cards independently of server filters */
.loc-client-hidden { display: none !important; }

/* Wide filter field — spans 2 columns in the filter grid (used by Search) */
.loc-filter-grid .loc-filter-field-wide { grid-column: span 2; }

/* Divider inside the map Display Settings control */
.map-controls-box .control-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px 0 8px 0;
}

/* Search input in the filter bar — uses .loc-filter-select styling.
   Ensure search-specific UA styling is stripped. */
input.loc-filter-select[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input.loc-filter-select[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ─── Tags filter dropdown (multi-select) ───────────────────────── */
#tagsMenu .loc-empty-tags {
  color: #6b7280;
  font-size: 12.5px;
  font-style: italic;
  padding: 4px 2px;
}

/* ─── Public location pins (smaller + muted) ────────────────────── */
.public-pin-wrap {
  width: 24px;
  height: 24px;
  position: relative;
}
.public-pin-img {
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(147, 197, 253, 0.85);
  border-radius: 50%;
  background-color: #1e293b;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  opacity: 0.88;
}
.public-pin-img.fav {
  border-color: #ef4444;
}
.public-pin-fav-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border: 1.5px solid #fff;
  border-radius: 50%;
}

/* Public cluster badge — blue theme (to distinguish from user cluster green) */
.public-cluster {
  background: rgba(59, 130, 246, 0.92);
  border: 2px solid rgba(147, 197, 253, 0.7);
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.public-cluster div { line-height: 1; font-size: 12px; }

/* ─── Map context menu (right-click) ────────────────────────────── */
.loc-map-context-menu {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  width: max-content;
  max-width: 320px;
  background: linear-gradient(180deg, #1e222b 0%, #181b22 100%);
  border: 1px solid #2b3140;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  padding: 6px;
  display: none;
  font-size: 13.5px;
  color: #e5e7eb;
}
.loc-map-context-menu.open { display: block; }
.loc-map-context-header {
  padding: 8px 10px 6px 10px;
  font-size: 11.5px;
  color: #6b7280;
  border-bottom: 1px solid #2b3140;
  margin-bottom: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.loc-map-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: #e5e7eb;
  text-decoration: none;
  transition: background-color 140ms, color 140ms;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 13.5px;
}
.loc-map-context-item i { font-size: 18px; color: #3b82f6; }
.loc-map-context-item:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #fff;
  text-decoration: none;
}