/* ── Design system ── */
:root {
  /* ── Bootstrap overrides (schema) ── */
  --bs-primary:          #3396D3;
  --bs-primary-rgb:      51, 150, 211;
  --bs-secondary:        #B8976A;
  --bs-secondary-rgb:    184, 151, 106;
  --bs-success:          #3A9E7E;
  --bs-success-rgb:      58, 158, 126;
  --bs-info:             #5EB0E5;
  --bs-info-rgb:         94, 176, 229;
  --bs-warning:          #EBCB90;
  --bs-warning-rgb:      235, 203, 144;
  --bs-danger:           #D64F3A;
  --bs-danger-rgb:       214, 79, 58;
  --bs-light:            #EEEEEE;
  --bs-light-rgb:        238, 238, 238;
  --bs-dark:             #1A2E3D;
  --bs-dark-rgb:         26, 46, 61;
  --bs-body-bg:          #FAFAFA;
  --bs-body-color:       #1A2E3D;
  --bs-heading-color:    #1A2E3D;
  --bs-link-color:       #3396D3;
  --bs-link-hover-color: #1A7DBF;
  --bs-gray:             #A8A8A8;

  /* ── BetterTeams design tokens ── */
  --bt-blue:           #3396D3;
  --bt-blue-dark:      #1A7DBF;
  --bt-blue-dim:       #EAF5FD;
  --bt-silver:         #EEEEEE;
  --bt-silver-mid:     #E4E4E4;
  --bt-dark:           #1A2E3D;
  --bt-muted:          #7A9BAD;
  --bt-bg:             #FAFAFA;
  --bt-white:          #FFFFFF;
  --bt-success:        #3A9E7E;
  --bt-success-dim:    #E6F5F0;
  --bt-danger:         #D64F3A;
  --bt-danger-dim:     #FDECEA;
  --bt-warning:        #EBCB90;
  --bt-warning-dim:    #FBF5EC;
  --bt-secondary:      #B8976A;
  --bt-secondary-dim:  #FBF5EC;
  --bt-info:           #5EB0E5;
  --bt-info-dim:       #EAF4FC;
  --bt-sh-sm: 0 1px 3px rgba(26,46,61,0.06), 0 1px 2px rgba(26,46,61,0.04);
  --bt-sh-md: 0 4px 14px rgba(26,46,61,0.08), 0 1px 4px rgba(26,46,61,0.05);
}

/* ── Page background + font ── */
body {
  background-color: var(--bt-bg) !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--bt-dark) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--bt-dark) !important;
  font-weight: 600 !important;
}

p, span, td, th, div, a, label, input, select, textarea {
  font-family: 'DM Sans', sans-serif !important;
}

/* ── Sidebar ── */
:root {
  --app-header-height: 60px;
}

.layout-menu {
  position: fixed;
  height: 100vh;
  background-color: var(--bt-white) !important;
  border-right: 1px solid var(--bt-silver) !important;
  box-shadow: none !important;
  z-index: 1100 !important;
}

/* Nav item text + icon colors */
.layout-menu .menu-link {
  color: var(--bt-muted) !important;
  border-radius: 8px;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.layout-menu .menu-link:hover {
  background-color: var(--bt-bg) !important;
  color: var(--bt-dark) !important;
}

.layout-menu .menu-item.active > .menu-link {
  background-color: var(--bt-blue-dim) !important;
  color: var(--bt-blue) !important;
  font-weight: 500 !important;
}

.layout-menu .menu-icon {
  color: var(--bt-muted) !important;
}

.layout-menu .menu-item.active > .menu-link .menu-icon {
  color: var(--bt-blue) !important;
}

/* Section headers */
.layout-menu .menu-header-text {
  color: #9ca3af !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Team member rows */
.sidebar-member-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.sidebar-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
}

.sidebar-member-name {
  flex: 1;
  font-size: 0.875rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sidebar-status-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* App brand — exact same height as header so borders connect */
.layout-menu .app-brand.demo {
  border-bottom: 1px solid var(--bt-silver);
  height: var(--app-header-height);
  min-height: var(--app-header-height);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* ── Header: flush, connected to sidebar via border lines ── */
.layout-navbar.navbar-detached {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--bt-silver) !important;
  padding-inline: 1.5rem !important;
  background-color: var(--bt-white) !important;
  height: var(--app-header-height) !important;
  min-height: var(--app-header-height) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

@media (min-width: 1200px) {
  .layout-menu {
    width: 260px;
    transition: width 0.3s ease;
    overflow-x: visible;
  }

  .layout-page {
    margin-left: 260px;
    transition: margin-left 0.3s ease;
  }

  html.desktop-sidebar-collapsed .layout-menu {
    width: 82px;
    overflow: visible;
  }

  html.desktop-sidebar-collapsed .layout-page {
    margin-left: 82px;
  }

  .layout-menu .app-brand {
    position: relative;
    padding-right: 1rem;
  }

  .layout-menu .layout-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(1rem + 30px);
    right: -1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    padding: 0;
    background: #696cff;
    color: #fff !important;
    box-shadow: 0 0 0 0.28rem rgba(105, 108, 255, 0.12);
    z-index: 5;
  }

  html.desktop-sidebar-collapsed .layout-menu .layout-menu-toggle {
    right: -0.8rem;
    opacity: 1 !important;
    inset-inline-start: auto !important;
  }

  .layout-menu .layout-menu-toggle i {
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.5s ease;
  }

  html.desktop-sidebar-collapsed .layout-menu .layout-menu-toggle i {
    transform: rotate(180deg);
  }

  html.desktop-sidebar-collapsed .layout-menu .app-brand-link {
    justify-content: center;
  }

  html.desktop-sidebar-collapsed .layout-menu .app-brand-text,
  html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item > .menu-link > div,
  html.desktop-sidebar-collapsed .layout-menu .menu-header .menu-header-text {
    display: none !important;
  }

  html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item > .menu-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item > .menu-link .menu-icon {
    margin-right: 0;
    font-size: 1.2rem !important;
    width: 1.2rem;
    height: 1.2rem;
  }

  html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item {
    display: flex;
    justify-content: center;
  }

  html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item > .menu-link {
    width: 48px;
    min-height: 48px;
    border-radius: 14px;
  }

  html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-header {
    min-height: 2rem;
  }

  html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-header::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 0.125rem;
    margin: 0.75rem auto 0;
    background: #c7cdd6;
    border-radius: 999px;
  }

  html.desktop-sidebar-collapsed .layout-menu .badge {
    display: none !important;
  }

  html.desktop-sidebar-collapsed .layout-menu .app-brand,
  html.desktop-sidebar-collapsed .layout-menu .app-brand-link {
    overflow: visible !important;
  }

  /* Collapsed: hide team member names and status dots, center avatar */
  html.desktop-sidebar-collapsed .layout-menu .sidebar-member-name,
  html.desktop-sidebar-collapsed .layout-menu .sidebar-status-dot {
    display: none !important;
  }

  html.desktop-sidebar-collapsed .layout-menu .sidebar-member-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 1199.98px) {
  .layout-page {
    margin-left: 0;
  }
}

/* ── Collapsed sidebar tooltips ── */

html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item[data-tooltip] {
  position: relative;
}

html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background-color: #1f2937;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html.desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #1f2937;
  z-index: 9999;
  pointer-events: none;
}

/* ── Card redesign ── */
.card {
  border: 1px solid var(--bt-silver) !important;
  border-radius: 18px !important;
  box-shadow: var(--bt-sh-sm) !important;
  background-color: var(--bt-white) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--bt-sh-md) !important;
}

.card-header {
  background-color: var(--bt-white) !important;
  border-bottom: 1px solid var(--bt-silver) !important;
  padding: 14px 18px !important;
  border-radius: 18px 18px 0 0 !important;
}

.card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--bt-dark) !important;
  margin: 0 !important;
}

.card-body {
  padding: 16px 18px !important;
}

.card-footer {
  background-color: var(--bt-white) !important;
  border-top: 1px solid var(--bt-silver) !important;
  border-radius: 0 0 18px 18px !important;
  padding: 12px 18px !important;
}

/* Table rows inside cards */
.card .table th {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--bt-muted) !important;
  border-bottom: 1px solid var(--bt-silver) !important;
  padding: 10px 18px !important;
  background: var(--bt-bg) !important;
}

.card .table td {
  font-size: 13px !important;
  color: var(--bt-dark) !important;
  border-bottom: 1px solid var(--bt-silver) !important;
  padding: 12px 18px !important;
  vertical-align: middle !important;
}

.card .table tr:last-child td {
  border-bottom: none !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--bt-blue) !important;
  border-color: var(--bt-blue) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(51,150,211,0.3) !important;
  transition: all 0.15s !important;
}

.btn-primary:hover {
  background-color: var(--bt-blue-dark) !important;
  border-color: var(--bt-blue-dark) !important;
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--bt-blue) !important;
  border-color: var(--bt-silver-mid) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-radius: 8px !important;
  background: var(--bt-white) !important;
}

.btn-outline-primary:hover {
  background-color: var(--bt-blue-dim) !important;
  border-color: var(--bt-blue) !important;
  color: var(--bt-blue) !important;
}

.btn-sm {
  font-size: 12px !important;
  padding: 5px 12px !important;
}

/* Page headings */
.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

/* Badges */
.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
}

.badge-notifications-custom {
  font-size: 0.6rem;
  padding: 3px 5px;
  margin-left: -10px;
  margin-top: 8px;
}

/* ── Dark mode ── */
html[data-theme="dark"] {
  /* BetterTeams tokens — dark variants */
  --bt-blue:           #5EB0E5;
  --bt-blue-dark:      #3396D3;
  --bt-blue-dim:       #0C2234;
  --bt-silver:         #1C3045;
  --bt-silver-mid:     #243B52;
  --bt-dark:           #D6E8F2;
  --bt-muted:          #5A7F96;
  --bt-bg:             #0C1B28;
  --bt-white:          #132030;
  --bt-success:        #3FBA90;
  --bt-success-dim:    #082519;
  --bt-danger:         #E07060;
  --bt-danger-dim:     #2A0F0A;
  --bt-warning:        #EBCB90;
  --bt-warning-dim:    #241A06;
  --bt-secondary:      #D4B48A;
  --bt-secondary-dim:  #1E140A;
  --bt-info:           #5EB0E5;
  --bt-info-dim:       #0C2234;
  --bt-sh-sm:          0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --bt-sh-md:          0 4px 14px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);

  /* Bootstrap base tokens */
  --bs-body-bg:           #0C1B28;
  --bs-body-color:        #D6E8F2;
  --bs-heading-color:     #D6E8F2;
  --bs-secondary-color:   #5A7F96;
  --bs-border-color:      #1C3045;
  --bs-tertiary-bg:       #132030;
  --bs-secondary-bg:      #132030;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background-color: var(--bt-bg) !important;
  color: var(--bt-dark) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--bt-dark) !important;
}

/* Layout chrome */
html[data-theme="dark"] .layout-menu {
  background-color: var(--bt-white) !important;
  border-right-color: var(--bt-silver) !important;
}

html[data-theme="dark"] .layout-navbar.navbar-detached {
  background-color: var(--bt-white) !important;
  border-bottom-color: var(--bt-silver) !important;
}

html[data-theme="dark"] .layout-footer,
html[data-theme="dark"] footer {
  background-color: var(--bt-white) !important;
  border-top: 1px solid var(--bt-silver) !important;
}

html[data-theme="dark"] .content-backdrop {
  background-color: rgba(0,0,0,0.5) !important;
}

/* Cards */
html[data-theme="dark"] .card {
  background-color: var(--bt-white) !important;
  border-color: var(--bt-silver) !important;
}

html[data-theme="dark"] .card-header {
  background-color: var(--bt-white) !important;
  border-bottom-color: var(--bt-silver) !important;
}

html[data-theme="dark"] .card-footer {
  background-color: var(--bt-white) !important;
  border-top-color: var(--bt-silver) !important;
}

/* Tables */
html[data-theme="dark"] .card .table th {
  background: var(--bt-bg) !important;
  border-bottom-color: var(--bt-silver) !important;
  color: var(--bt-muted) !important;
}

html[data-theme="dark"] .card .table td {
  color: var(--bt-dark) !important;
  border-bottom-color: var(--bt-silver) !important;
}

/* List groups (used in settings) */
html[data-theme="dark"] .list-group-item {
  background-color: var(--bt-white) !important;
  border-color: var(--bt-silver) !important;
  color: var(--bt-dark) !important;
}

/* Form controls */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--bt-bg) !important;
  border-color: var(--bt-silver-mid) !important;
  color: var(--bt-dark) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--bt-muted) !important;
}

html[data-theme="dark"] .form-check-input {
  background-color: var(--bt-bg) !important;
  border-color: var(--bt-silver-mid) !important;
}

html[data-theme="dark"] .form-check-input:checked {
  background-color: var(--bt-blue) !important;
  border-color: var(--bt-blue) !important;
}

/* Sidebar nav */
html[data-theme="dark"] .layout-menu .menu-link {
  color: var(--bt-muted) !important;
}

html[data-theme="dark"] .layout-menu .menu-link:hover {
  background-color: var(--bt-bg) !important;
  color: var(--bt-dark) !important;
}

html[data-theme="dark"] .layout-menu .menu-item.active > .menu-link {
  background-color: var(--bt-blue-dim) !important;
  color: var(--bt-blue) !important;
}

html[data-theme="dark"] .layout-menu .menu-header-text {
  color: var(--bt-muted) !important;
}

html[data-theme="dark"] .sidebar-member-name {
  color: var(--bt-dark) !important;
}

/* Buttons */
html[data-theme="dark"] .btn-outline-secondary {
  color: var(--bt-muted) !important;
  border-color: var(--bt-silver-mid) !important;
  background: transparent !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--bt-bg) !important;
  color: var(--bt-dark) !important;
}

html[data-theme="dark"] .btn-outline-primary {
  background: var(--bt-white) !important;
  border-color: var(--bt-silver-mid) !important;
}

/* Dropdowns */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--bt-white) !important;
  border-color: var(--bt-silver) !important;
}

html[data-theme="dark"] .dropdown-item {
  color: var(--bt-dark) !important;
}

html[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--bt-bg) !important;
}

html[data-theme="dark"] .dropdown-divider {
  border-color: var(--bt-silver) !important;
}

/* Modals */
html[data-theme="dark"] .modal-content {
  background-color: var(--bt-white) !important;
  border-color: var(--bt-silver) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--bt-silver) !important;
}

/* Misc text helpers */
html[data-theme="dark"] .text-muted {
  color: var(--bt-muted) !important;
}

/* Collapsed sidebar tooltips */
html[data-theme="dark"].desktop-sidebar-collapsed .layout-menu .menu-inner > .menu-item[data-tooltip]:hover::after {
  background-color: var(--bt-white);
  color: var(--bt-dark);
}