:root {
  --tp-navy-dark: #071c2e;
  --tp-navy: #0b2239;
  --tp-teal: #0a7695;
  --tp-teal-dark: #075f78;
  --tp-orange: #f36b0a;
  --tp-white: #ffffff;
  --tp-bg: #f5f7fa;
  --tp-border: #e4e9ee;
  --tp-text: #203246;
  --tp-muted: #667789;
  --tp-danger: #dc3545;
  --tp-danger-soft: #fff0f1;
  --tp-surface: #ffffff;
  --tp-surface-alt: #f8fafc;
  --tp-sidebar: #12304b;
  --tp-sidebar-text: #d3dde6;
  --tp-action-soft: #eaf6f8;
  --tp-action-soft-hover: #d7eef2;
  --tp-export: #176f92;
  --tp-export-soft: #eaf4f8;
  --tp-view: #147fa3;
  --tp-view-soft: #e8f7fb;
  --tp-edit: #c95506;
  --tp-edit-soft: #fff2e8;
  --tp-copy: #6554c0;
  --tp-copy-soft: #f0edff;
  --tp-details: #08708c;
  --tp-details-soft: #e7f5f7;
  --tp-shadow: rgba(7,28,46,.06);
}

[data-theme="dark"] {
  --tp-bg: #071522;
  --tp-surface: #0e2335;
  --tp-surface-alt: #112a3e;
  --tp-border: #284156;
  --tp-text: #dce6ee;
  --tp-muted: #9eb0bf;
  --tp-navy: #eef5f8;
  --tp-sidebar: #061522;
  --tp-sidebar-text: #c8d6e1;
  --tp-action-soft: #12384a;
  --tp-action-soft-hover: #17495e;
  --tp-export-soft: #143547;
  --tp-view: #66c8e5;
  --tp-view-soft: #123746;
  --tp-edit: #ff9a52;
  --tp-edit-soft: #432b1e;
  --tp-copy: #b7a9ff;
  --tp-copy-soft: #2d2850;
  --tp-details: #70cfdf;
  --tp-details-soft: #123b43;
  --tp-danger-soft: #40202a;
  --tp-shadow: rgba(0,0,0,.24);
}

body { background: var(--tp-bg); color: var(--tp-text); transition: background-color .2s ease, color .2s ease; }
a { color: var(--tp-teal); }
a:hover { color: var(--tp-teal-dark); }
.content-wrapper { background: var(--tp-bg); }
.content-header h1, .card-title, h1, h2, h3, h4, h5 { color: var(--tp-navy); }

.main-sidebar { background: var(--tp-sidebar) !important; box-shadow: 3px 0 14px var(--tp-shadow) !important; }
.brand-link { border-bottom: 1px solid rgba(255,255,255,.12) !important; min-height: 64px; display: flex; align-items: center; }
.tp-brand-full { display: block; width: 196px; height: 52px; margin: 0 auto; object-fit: contain; }
[data-theme="dark"] .tp-theme-brand-logo {
  content: url('/dist/img/trekpatrol-advanced-logo-dark.png');
}
.tp-brand-compact { display: none; width: 42px; height: 42px; margin: 0 auto; object-fit: contain; }
.sidebar-collapse .tp-brand-full { display: none; }
.sidebar-collapse .tp-brand-compact { display: block; }
.user-panel { border-bottom-color: rgba(255,255,255,.12) !important; }
.user-panel img { background: var(--tp-white); object-fit: cover; }
.nav-sidebar .nav-link { color: var(--tp-sidebar-text) !important; border-radius: 6px; margin: 2px 6px; }
.nav-sidebar .nav-link:hover { background: rgba(10,118,149,.24) !important; color: var(--tp-white) !important; }
.nav-sidebar .nav-link.active,
.nav-sidebar .menu-open > .nav-link,
.nav-sidebar .nav-link[style*="background-color"] { background: rgba(10,118,149,.72) !important; color: var(--tp-white) !important; box-shadow: none !important; }
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active { background: rgba(10,118,149,.3) !important; border-left: 3px solid var(--tp-orange); }

.main-header { background: var(--tp-surface) !important; border-bottom: 1px solid var(--tp-border); box-shadow: 0 2px 8px var(--tp-shadow); }
.main-header.navbar { min-height: 64px; flex-wrap: nowrap; }
.main-header > .navbar-nav { align-items: center; flex-wrap: nowrap; }
.tp-notification-dropdown { display: flex; align-items: center; }
.main-header .nav-link { color: var(--tp-navy) !important; }
.notification-btn {
  color: var(--tp-navy);
  border-radius: 6px;
}
.notification-btn:focus,
.notification-btn:focus-visible,
.notification-btn:active {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.card { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 8px; box-shadow: 0 2px 8px var(--tp-shadow); }
.card-header { background: var(--tp-surface); border-bottom-color: var(--tp-border); }
.modal-content, .dropdown-menu { background: var(--tp-surface); color: var(--tp-text); border-color: var(--tp-border); }
.modal-content { border-radius: 8px; box-shadow: 0 18px 55px rgba(0,0,0,.2); }
.modal-header { border-bottom-color: var(--tp-border); }
.modal-footer { border-top-color: var(--tp-border); }

.btn { border-radius: 6px; font-weight: 600; }
.btn-primary, .btn-success, .bg-primary, .bg-success { background-color: var(--tp-teal) !important; border-color: var(--tp-teal) !important; }
.btn-primary:hover, .btn-success:hover { background-color: var(--tp-teal-dark) !important; border-color: var(--tp-teal-dark) !important; }
.btn-secondary, .btn-info { background-color: var(--tp-action-soft) !important; border-color: rgba(10,118,149,.35) !important; color: var(--tp-teal-dark) !important; }
.btn-outline-primary { color: var(--tp-teal); border-color: var(--tp-teal); }
.btn-outline-primary:hover { background: var(--tp-teal); color: var(--tp-white); }
.btn-warning, .bg-warning { background-color: var(--tp-orange) !important; border-color: var(--tp-orange) !important; color: var(--tp-white) !important; }
.btn-danger, .bg-danger { background-color: var(--tp-danger) !important; border-color: var(--tp-danger) !important; }

.form-control, .custom-select, .select2-selection { background: var(--tp-surface); color: var(--tp-text); border-color: var(--tp-border) !important; border-radius: 6px !important; }
.form-control:focus, .custom-select:focus, .select2-container--focus .select2-selection { border-color: var(--tp-teal) !important; box-shadow: 0 0 0 .2rem rgba(10,118,149,.14) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--tp-teal); border-color: var(--tp-teal); }

.table { color: var(--tp-text); }
.table thead th { background: var(--tp-surface-alt); color: var(--tp-navy); border-bottom: 2px solid var(--tp-border); white-space: nowrap; }
.table tbody tr:nth-of-type(even) { background: var(--tp-surface-alt); }
.table tbody tr:hover { background: var(--tp-action-soft); }
.table td, .table th { border-color: var(--tp-border); vertical-align: middle; }
.table-responsive { border-radius: 6px; }
.badge-primary, .badge-success, .badge-info { background: var(--tp-teal); }
.badge-warning { background: var(--tp-orange); color: var(--tp-white); }
.page-item.active .page-link { background: var(--tp-teal); border-color: var(--tp-teal); }
.page-link { color: var(--tp-teal); }
.nav-tabs .nav-link.active { color: var(--tp-teal); border-top: 3px solid var(--tp-teal); }
.breadcrumb { background: transparent; }

.role-permission-modal .modal-body { background: var(--tp-bg); }
.role-permission-modal .role-option-container { background: var(--tp-surface); border: 1px solid var(--tp-border) !important; border-radius: 8px; padding: 1rem; margin-bottom: .75rem; }
.role-permission-modal .role-option-container h5 { border-bottom: 1px solid var(--tp-border); padding-bottom: .6rem; }

.tp-login-page { min-height: 100vh; background: #f6f8fb; }
.tp-login-shell { width: min(940px, calc(100% - 32px)); display: grid; grid-template-columns: 1fr 1fr; background: var(--tp-white); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 70px rgba(7,28,46,.28); }
.tp-login-brand { background: #f9fbfc; border-right: 1px solid var(--tp-border); padding: 46px; display: flex; flex-direction: column; justify-content: center; color: var(--tp-muted); }
.tp-login-brand img { width: 100%; max-width: 390px; height: auto; object-fit: contain; }
.tp-login-brand p { max-width: 350px; margin: 24px 0 0; line-height: 1.65; }
.tp-login-form { padding: 54px; }
.tp-login-form h1 { font-size: 1.75rem; font-weight: 700; }
.tp-login-form .tp-accent { width: 46px; height: 4px; background: var(--tp-orange); border-radius: 4px; margin: 14px 0 28px; }

.tp-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  margin: 0 .45rem;
  padding: .45rem .7rem;
  color: var(--tp-text);
  background: var(--tp-surface-alt);
  border: 1px solid var(--tp-border);
  border-radius: 7px;
  font-weight: 600;
}
.tp-theme-toggle:hover { color: var(--tp-teal); background: var(--tp-action-soft); }
.tp-theme-toggle:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(10,118,149,.18); }
.tp-login-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 2; }

.tp-action-primary { background: var(--tp-teal) !important; border-color: var(--tp-teal) !important; color: #fff !important; }
.tp-action-view { background: var(--tp-view-soft) !important; border-color: color-mix(in srgb, var(--tp-view) 38%, transparent) !important; color: var(--tp-view) !important; }
.tp-action-edit { background: var(--tp-edit-soft) !important; border-color: color-mix(in srgb, var(--tp-edit) 38%, transparent) !important; color: var(--tp-edit) !important; }
.tp-action-copy { background: var(--tp-copy-soft) !important; border-color: color-mix(in srgb, var(--tp-copy) 38%, transparent) !important; color: var(--tp-copy) !important; }
.tp-action-details { background: var(--tp-details-soft) !important; border-color: color-mix(in srgb, var(--tp-details) 38%, transparent) !important; color: var(--tp-details) !important; }
.tp-action-view:hover { border-color: var(--tp-view) !important; color: var(--tp-view) !important; filter: brightness(.96); }
.tp-action-edit:hover { border-color: var(--tp-edit) !important; color: var(--tp-edit) !important; filter: brightness(.96); }
.tp-action-copy:hover { border-color: var(--tp-copy) !important; color: var(--tp-copy) !important; filter: brightness(.96); }
.tp-action-details:hover { border-color: var(--tp-details) !important; color: var(--tp-details) !important; filter: brightness(.96); }
.tp-action-export { background: var(--tp-export-soft) !important; border-color: rgba(23,111,146,.38) !important; color: var(--tp-export) !important; }
.tp-action-export:hover { background: var(--tp-action-soft-hover) !important; border-color: var(--tp-export) !important; color: var(--tp-export) !important; }
.tp-action-warning { background: var(--tp-orange) !important; border-color: var(--tp-orange) !important; color: #fff !important; }
.tp-action-danger { background: var(--tp-danger-soft) !important; border-color: rgba(220,53,69,.4) !important; color: var(--tp-danger) !important; }
.tp-action-danger:hover { background: var(--tp-danger) !important; border-color: var(--tp-danger) !important; color: #fff !important; }
.btn:disabled, .btn.disabled, button:disabled { opacity: .5; cursor: not-allowed; }
.tp-action-label { margin-left: .35rem; }

[data-theme="dark"] .main-header .nav-link,
[data-theme="dark"] .notification-btn { color: var(--tp-text) !important; }
[data-theme="dark"] .dropdown-item { color: var(--tp-text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--tp-action-soft); color: #fff; }
[data-theme="dark"] .close { color: var(--tp-text); text-shadow: none; }
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .custom-file-label,
[data-theme="dark"] .select2-dropdown { background: var(--tp-surface-alt); color: var(--tp-text); border-color: var(--tp-border); }
[data-theme="dark"] .tp-action-view { color: var(--tp-view) !important; }
[data-theme="dark"] .tp-action-edit { color: var(--tp-edit) !important; }
[data-theme="dark"] .tp-action-copy { color: var(--tp-copy) !important; }
[data-theme="dark"] .tp-action-details { color: var(--tp-details) !important; }
[data-theme="dark"] .tp-action-export { color: #83cbe5 !important; }
[data-theme="dark"] .text-dark { color: var(--tp-text) !important; }
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light { background: var(--tp-surface) !important; }
[data-theme="dark"] .pagination .page-link { background: var(--tp-surface); border-color: var(--tp-border); }
[data-theme="dark"] .tp-login-page { background: var(--tp-bg); }
[data-theme="dark"] .tp-login-shell,
[data-theme="dark"] .tp-login-brand { background: var(--tp-surface); }

/* Dashboard surfaces inherit the active theme instead of the legacy fixed whites. */
.dashboard-info-card,
.right-bottom-card,
.map-data-container,
.dashboard-main-content .card,
.dashboard-main-content .card-content-wrap { background: var(--tp-surface) !important; color: var(--tp-text); border: 1px solid var(--tp-border); }
.dashboard-info-card,
.right-bottom-card,
.map-container { border-radius: 8px; }
.dashboard-info-card { box-shadow: 0 2px 8px var(--tp-shadow); }
.dashboard-main-content .info-title-wrap,
.dashboard-main-content .info-cat,
.dashboard-main-content .guard-detail-wrap,
.dashboard-main-content .user-list,
.dashboard-main-content .check-in-filter-btn,
.dashboard-main-content .map-data-container input { color: var(--tp-text); }
.dashboard-main-content .card-heading-wrap,
.dashboard-main-content .user-list:not(:last-child) { border-color: var(--tp-border); }
.dashboard-main-content .chek-in-filter-toggle,
.dashboard-main-content .map-filters { background: var(--tp-surface-alt) !important; color: var(--tp-text); border: 1px solid var(--tp-border); }
.dashboard-main-content .map-data-container input { background: var(--tp-surface-alt); border-color: var(--tp-border); }
.dashboard-main-content .select2-container--default .select2-selection--single,
.dashboard-main-content .input-group-text { background: var(--tp-surface); color: var(--tp-text); border-color: var(--tp-border); }
.dashboard-main-content .breadcrumb-item.active,
.dashboard-main-content .text-muted { color: var(--tp-muted) !important; }
.dashboard-main-content .preloader,
.preloader { background: var(--tp-bg) !important; }
[data-theme="dark"] .dashboard-main-content .leaflet-control,
[data-theme="dark"] .dashboard-main-content .leaflet-popup-content-wrapper,
[data-theme="dark"] .dashboard-main-content .leaflet-popup-tip { background: var(--tp-surface); color: var(--tp-text); }
[data-theme="dark"] .dashboard-main-content .map-data-toggle-btn { background: var(--tp-teal); border-color: var(--tp-teal); }

@media (max-width: 767px) {
  .table .tp-action-label { display: none; }
  .table [class*="tp-action-"] { min-width: 34px; }
  .tp-login-theme-toggle { position: absolute; top: 10px; right: 10px; }
  .tp-login-page { background: var(--tp-bg); align-items: center; justify-content: flex-start; padding: 20px 0; }
  .tp-login-shell { grid-template-columns: 1fr; }
  .tp-login-brand { padding: 24px 30px; border-right: 0; border-bottom: 1px solid var(--tp-border); }
  .tp-login-brand p { display: none; }
  .tp-login-brand img { max-width: 260px; }
  .tp-login-form { padding: 32px 26px; }
  .content-header h1 { font-size: 1.55rem; }
  .card-body { padding: 1rem; }
}

/* TrekPatrol-owned language selector. It appears automatically when more than
   one locale is enabled in config/i18n.json. */
.tp-language-picker { min-width: 145px; max-width: 190px; }
.tp-language-picker .input-group-text,
.tp-language-picker .custom-select { background: var(--tp-surface); border-color: var(--tp-border); color: var(--tp-text); }
.tp-language-picker .input-group-text { color: var(--tp-teal); }
[data-theme="dark"] .tp-language-picker .input-group-text,
[data-theme="dark"] .tp-language-picker .custom-select { background: var(--tp-surface-alt); color: var(--tp-text); }
.tp-login-language { position: fixed; top: 18px; left: 18px; z-index: 1050; }
@media (max-width: 767px) { .tp-login-language { top: 10px; left: 10px; max-width: 130px; } }

/* Capacity-reached actions: visually disabled, still focusable/clickable to
   explain why creation/import is unavailable. Do not use the native disabled
   attribute because disabled controls cannot reliably emit click/hover help. */
.tp-capacity-blocked,
.tp-capacity-blocked:hover,
.tp-capacity-blocked:focus,
.tp-capacity-blocked:active {
  background: #e9ecef !important;
  border-color: #ced4da !important;
  color: #6c757d !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
[data-theme="dark"] .tp-capacity-blocked,
[data-theme="dark"] .tp-capacity-blocked:hover,
[data-theme="dark"] .tp-capacity-blocked:focus,
[data-theme="dark"] .tp-capacity-blocked:active {
  background: #313a43 !important;
  border-color: #4a5560 !important;
  color: #aeb8c2 !important;
}


/* TrekPatrol native language selector */
.tp-language-picker { display: flex; align-items: center; }
.tp-language-control {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: 0 .55rem;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  color: var(--tp-text);
}
.tp-language-control > i { color: var(--tp-teal); }
.tp-language-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 105px;
  max-width: 165px;
  border: 0;
  outline: 0;
  padding: .2rem 1.15rem .2rem .15rem;
  background: transparent;
  color: var(--tp-text);
  font-weight: 600;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tp-muted) 50%), linear-gradient(135deg, var(--tp-muted) 50%, transparent 50%);
  background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.tp-language-select:disabled { opacity: .65; cursor: wait; }
.tp-login-controls {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.tp-login-controls .tp-theme-toggle { position: static !important; }
@media (max-width: 575.98px) {
  .tp-language-control { padding: 0 .42rem; }
  .tp-language-select { min-width: 78px; max-width: 100px; font-size: .85rem; }
  .tp-login-controls { top: 10px; right: 10px; left: 10px; justify-content: flex-end; }
}

/* Native language selector on standalone error/auth pages. */
.tp-standalone-language-picker {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 1100;
}
@media (max-width: 575.98px) {
  .tp-standalone-language-picker { top: 10px; right: 10px; }
}


/* User-management primary actions must remain readable after translation. */
.tp-user-action-button {
  width: auto !important;
  min-width: 108px;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 575.98px) {
  .tp-user-action-button { min-width: 96px; }
}