/* ------------------------------------------------------------------ */
/* Theme: Nature-inspired, light, modern (Cursor / Bitbucket / DDG)   */
/* ------------------------------------------------------------------ */
:root {
  /* Nature palette */
  --color-forest: #1a9f4d;
  --color-sage: #2d8a5e;
  --color-sky: #0284c7;
  --color-ocean: #0ea5e9;
  --color-amber: #ea580c;
  --color-sunset: #f59e0b;

  /* Neutrals - light & warm */
  --color-bg: #f6f8f6;
  --color-surface: #ffffff;
  --color-border: #e5e8e5;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;

  /* Override Bootstrap */
  --bs-primary: var(--color-forest);
  --bs-primary-rgb: 26, 159, 77;
  --bs-link-color: var(--color-sky);
  --bs-link-hover-color: var(--color-ocean);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-secondary: var(--color-text-muted);
  --bs-success: var(--color-sage);
  --bs-info: var(--color-sky);
  --bs-warning: var(--color-sunset);
  --bs-danger: #dc3545;
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ------------------------------------------------------------------ */
/* Global                                                             */
/* ------------------------------------------------------------------ */
body {
  background-color: var(--color-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--color-text);
}

/* ------------------------------------------------------------------ */
/* Navbar - Light, modern                                             */
/* ------------------------------------------------------------------ */
.app-navbar {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.app-navbar .navbar-brand {
  color: var(--color-text) !important;
  background: transparent !important;
}
.app-navbar .navbar-brand:hover {
  color: var(--color-forest) !important;
  background: transparent !important;
}

.app-navbar .container-fluid {
  position: relative;
}

/* ------------------------------------------------------------------ */
/* Tabs - Clean underline style                                       */
/* ------------------------------------------------------------------ */
#mainTabs {
  border-bottom: 1px solid var(--color-border);
}
#mainTabs .nav-link {
  color: var(--color-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  margin-bottom: -1px;
  border-radius: 0;
}
#mainTabs .nav-link:hover {
  color: var(--color-text);
}
#mainTabs .nav-link.active {
  color: var(--color-forest);
  background: transparent;
  border-bottom-color: var(--color-forest);
}

.app-navbar #mainTabs {
  border-bottom: none;
  margin-bottom: 0;
}

.app-navbar #mainTabs.app-header-tabs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.app-navbar #mainTabs .nav-link {
  padding: 1rem 0.9rem 0.9rem;
}

@media (max-width: 991.98px) {
  .app-navbar #mainTabs.app-header-tabs,
  .app-navbar .d-flex.ms-auto {
    display: none !important;
  }
}

/* Offcanvas nav (mobile) – vertical tabs, same colors as desktop */
.nav-offcanvas-tabs .nav-link {
  color: var(--color-text-muted);
  border: none;
  border-radius: var(--bs-border-radius-sm);
  padding: 0.75rem 1rem;
  font-weight: 500;
  text-align: left;
}
.nav-offcanvas-tabs .nav-link:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}
.nav-offcanvas-tabs .nav-link.active {
  color: var(--color-forest);
  background: rgba(26, 159, 77, 0.12);
}

/* ------------------------------------------------------------------ */
/* Cards - Minimal shadow, rounded                                    */
/* ------------------------------------------------------------------ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
}

/* ------------------------------------------------------------------ */
/* Log Time – mobile toolbar (timer + symbol buttons)                   */
/* ------------------------------------------------------------------ */
.entry-mobile-toolbar {
  padding: 0.5rem 0;
}
.entry-mobile-toolbar .entry-timer-status {
  font-size: 0.9rem;
  padding: 0.35em 0.65em;
}
.entry-mobile-toolbar .btn {
  min-height: 2.25rem;
  min-width: 2.5rem;
}
.entry-mobile-toolbar .entry-insert-symbol {
  font-weight: 600;
  min-width: 2.5rem;
}

/* ------------------------------------------------------------------ */
/* Log Time – optional details (date)                                  */
/* ------------------------------------------------------------------ */
.entry-details-toggle:hover {
  color: var(--color-sky) !important;
}
.entry-details-collapse.collapse.show {
  padding-top: 0.25rem;
}
.entry-details-collapse .form-label {
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Form controls - Modern, light                                       */
/* ------------------------------------------------------------------ */
.form-control,
.form-select {
  border-color: var(--color-border);
  border-radius: var(--bs-border-radius-sm);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-sky);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn-primary {
  background-color: var(--color-forest);
  border-color: var(--color-forest);
}
.btn-primary:hover {
  background-color: var(--color-sage);
  border-color: var(--color-sage);
}
.btn-outline-secondary {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.btn-outline-secondary:hover {
  background-color: var(--color-bg);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */
.table {
  --bs-table-hover-bg: rgba(26, 159, 77, 0.04);
}
#entries-list tr.entry-row {
  cursor: pointer;
}
.table th {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
}
.table td {
  padding: 0.75rem 1rem;
}

/* ------------------------------------------------------------------ */
/* Mention styling - Nature accents                                    */
/* ------------------------------------------------------------------ */
.mention {
  font-weight: 600;
  border-radius: 4px;
  padding: 0 3px;
}
.mention-person {
  color: var(--color-sky);
}
.mention-project {
  color: var(--color-forest);
}
.mention-tag {
  color: var(--color-amber);
}
.mention-hours {
  color: var(--color-ocean);
}

/* ------------------------------------------------------------------ */
/* Mention autocomplete dropdown                                      */
/* ------------------------------------------------------------------ */
.mention-wrapper {
  position: relative;
}
.mention-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1050;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--bs-border-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.mention-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}
.mention-item:hover,
.mention-item.active {
  background-color: rgba(26, 159, 77, 0.08);
}

/* ------------------------------------------------------------------ */
/* Logo                                                                */
/* ------------------------------------------------------------------ */
.app-logo-nav {
  display: block;
  background: transparent !important;
}
.auth-logo {
  height: 64px;
  width: auto;
}

/* ------------------------------------------------------------------ */
/* Navbar tweaks                                                      */
/* ------------------------------------------------------------------ */
.navbar-brand {
  font-weight: 600;
}
.navbar-brand img {
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Auth pages (login, signup)                                          */
/* ------------------------------------------------------------------ */
body.bg-light {
  background-color: var(--color-bg) !important;
}
body.bg-light .card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
body.bg-light .form-control {
  border-color: var(--color-border);
}
body.bg-light a {
  color: var(--color-sky);
}
body.bg-light a:hover {
  color: var(--color-ocean);
}

/* ------------------------------------------------------------------ */
/* Ref count badge (projects, people, tags)                            */
/* ------------------------------------------------------------------ */
.ref-count-badge {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
.ref-count-badge:hover {
  color: var(--color-sky);
  border-color: var(--color-sky);
  background: rgba(2, 132, 199, 0.06);
}

/* ------------------------------------------------------------------ */
/* Badges (People type)                                                */
/* ------------------------------------------------------------------ */
.badge.bg-primary {
  background-color: var(--color-sky) !important;
}
.badge.bg-secondary {
  background-color: var(--color-text-muted) !important;
}

/* ------------------------------------------------------------------ */
/* Alerts                                                              */
/* ------------------------------------------------------------------ */
.alert-danger {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.alert-success {
  background-color: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}

/* ------------------------------------------------------------------ */
/* Modals                                                              */
/* ------------------------------------------------------------------ */
.modal-content {
  border: 1px solid var(--color-border);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------------------ */
/* Tab content breathing room                                         */
/* ------------------------------------------------------------------ */
.tab-content {
  padding-bottom: 2rem;
}

/* ------------------------------------------------------------------ */
/* Reporting: left rail and selected state                              */
/* ------------------------------------------------------------------ */
#report-views-list .report-view-item.active {
  background-color: rgba(26, 159, 77, 0.12);
  color: var(--color-forest);
  font-weight: 500;
}
#report-views-list .report-view-item:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.04);
}

/* ------------------------------------------------------------------ */
/* Reporting placeholder                                               */
/* ------------------------------------------------------------------ */
#reporting-panel .display-1 {
  color: var(--color-border) !important;
}