/* ===============================
   Lenea theme
   Version: 1.0
   Primary brand color: #D8B2AA
   =============================== */

/* ===============================
   Design tokens
   =============================== */

:root {
  --lenea-primary: #D8B2AA;
  --lenea-primary-hover: #C99F98;
  --lenea-primary-light: #F7ECEA;

  --lenea-secondary: #F7ECEA;
  --lenea-accent: #A86F78;

  --lenea-success: #A9C3A3;
  --lenea-warning: #E6C191;
  --lenea-danger: #C26B6B;
  --lenea-error: #C26B6B;

  --lenea-info: #B4A0C8;
  --lenea-blue: #7C96B5;

  --lenea-bg: #FAF4F3;
  --lenea-surface: #FFFFFF;
  --lenea-card-bg: #FFFFFF;
  --lenea-divider: #E9D2CC;
  --lenea-border: #E9D2CC;

  --lenea-text: #2F2626;
  --lenea-text-muted: #7A6868;
  --lenea-link: #8C5F66;
  --lenea-link-hover: #7A4F57;

  --lenea-radius-sm: 0.5rem;
  --lenea-radius: 0.75rem;
  --lenea-radius-pill: 999px;

  --lenea-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  --lenea-focus-ring: 0 0 0 0.2rem rgba(216, 178, 170, 0.25);
}

/* ===============================
   Layout
   =============================== */

.main-content,
.content,
main {
  background-color: var(--lenea-bg) !important;
}

.lenea-dashboard {
  background-color: var(--lenea-bg);
  padding: 1.5rem;
}

/* ===============================
   Navbar + sidebar
   =============================== */

.navbar,
.navbar-top,
.navbar-vertical {
  background-color: var(--lenea-surface) !important;
}

.navbar-top {
  border-bottom: 1px solid var(--lenea-divider) !important;
}

.navbar-vertical {
  border-right: 1px solid var(--lenea-divider) !important;
}

.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-vertical .navbar-nav .nav-link:focus {
  background-color: rgba(216, 178, 170, 0.16) !important;
  color: var(--lenea-accent) !important;
}

/* ===============================
   Links
   =============================== */

a[href],
.lenea-dashboard a {
  color: var(--lenea-link);
  text-decoration: none;
}

a[href]:hover,
a[href]:focus,
.lenea-dashboard a:hover,
.lenea-dashboard a:focus {
  color: var(--lenea-link-hover);
}

.table a.text-body-emphasis {
  text-decoration: none;
}

.table a.text-body-emphasis:hover {
  text-decoration: underline;
}

/* ===============================
   Cards
   =============================== */

.card {
  background-color: var(--lenea-card-bg) !important;
  border: 1px solid var(--lenea-divider) !important;
  border-radius: var(--lenea-radius);
  box-shadow: var(--lenea-shadow);
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--lenea-divider) !important;
}

.card-body {
  padding: 1.5rem;
}

.lenea-dashboard .border.rounded-3.p-3.h-100 {
  background-color: var(--lenea-surface) !important;
  border-color: var(--lenea-divider) !important;
}

/* ===============================
   Buttons
   =============================== */

.btn {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.btn:hover,
.btn:focus {
  opacity: 0.96;
  box-shadow: none !important;
}

.btn:active {
  opacity: 0.93;
  box-shadow: none !important;
}

.btn-lenea,
.btn-primary {
  background-color: var(--lenea-primary) !important;
  border-color: var(--lenea-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--lenea-radius-sm);
  font-weight: 500;
}

.btn-lenea:hover,
.btn-lenea:focus,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lenea-primary-hover) !important;
  border-color: var(--lenea-primary-hover) !important;
  color: #FFFFFF !important;
}

.btn-outline-secondary {
  border-color: var(--lenea-divider) !important;
  color: var(--lenea-accent) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--lenea-secondary) !important;
  border-color: var(--lenea-primary) !important;
  color: var(--lenea-text) !important;
}

/* Danger buttons */

.btn-danger,
.btn-outline-danger,
.btn-phoenix-danger,
.btn-phoenix-outline-danger {
  border-radius: var(--lenea-radius-sm);
  font-weight: 500;
}

.btn-outline-danger,
.btn-phoenix-outline-danger {
  background-color: #FFFFFF !important;
  border-color: rgba(194, 107, 107, 0.35) !important;
  color: #B85C5C !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-phoenix-outline-danger:hover,
.btn-phoenix-outline-danger:focus {
  background-color: rgba(194, 107, 107, 0.10) !important;
  border-color: #B85C5C !important;
  color: #A24E4E !important;
}

.btn-danger,
.btn-phoenix-danger {
  background-color: var(--lenea-danger) !important;
  border-color: var(--lenea-danger) !important;
  color: #FFFFFF !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-phoenix-danger:hover,
.btn-phoenix-danger:focus {
  background-color: #B85C5C !important;
  border-color: #B85C5C !important;
  color: #FFFFFF !important;
}

/* ===============================
   Badges
   =============================== */

.badge,
.badge-phoenix {
  border-radius: var(--lenea-radius-pill);
  font-weight: 700 !important;
  padding: 0.25rem 0.55rem;
  letter-spacing: 0.02em;
  border-width: 2px;
  border-style: solid;
}

.badge.bg-danger,
.badge-phoenix-danger,
.badge-phoenix-soft-danger {
  background-color: rgba(194, 107, 107, 0.15) !important;
  color: #B85C5C !important;
  border-color: rgba(194, 107, 107, 0.50) !important;
}

.badge.bg-primary,
.badge-phoenix-primary,
.badge-phoenix-soft-primary {
  background-color: rgba(124, 150, 181, 0.16) !important;
  color: #5C7491 !important;
  border-color: rgba(124, 150, 181, 0.55) !important;
}

.badge.bg-success,
.badge-phoenix-success,
.badge-phoenix-soft-success {
  background-color: rgba(169, 195, 163, 0.22) !important;
  color: #58775E !important;
  border-color: rgba(169, 195, 163, 0.55) !important;
}

.badge.bg-warning,
.badge-phoenix-warning,
.badge-phoenix-soft-warning {
  background-color: rgba(230, 193, 145, 0.22) !important;
  color: #835F2D !important;
  border-color: rgba(230, 193, 145, 0.55) !important;
}

.badge.bg-info,
.badge-phoenix-info,
.badge-phoenix-soft-info {
  background-color: rgba(180, 160, 200, 0.15) !important;
  color: #9C8FB3 !important;
  border-color: rgba(180, 160, 200, 0.55) !important;
}

.badge.bg-secondary,
.badge-phoenix-secondary,
.badge-phoenix-soft-secondary {
  background-color: rgba(120, 110, 110, 0.12) !important;
  color: #6B5A5A !important;
  border-color: rgba(120, 110, 110, 0.28) !important;
}

/* ===============================
   Icon colors
   =============================== */

.text-primary {
  color: var(--lenea-blue) !important;
}

.text-success {
  color: #7FA788 !important;
}

.text-danger {
  color: #B85C5C !important;
}

.text-warning {
  color: #C9A46A !important;
}

.text-info {
  color: #9C8FB3 !important;
}

.bg-soft-primary {
  background-color: rgba(124, 150, 181, 0.15) !important;
}

.bg-soft-success {
  background-color: rgba(169, 195, 163, 0.20) !important;
}

.bg-soft-danger {
  background-color: rgba(194, 107, 107, 0.15) !important;
}

.bg-soft-warning {
  background-color: rgba(230, 193, 145, 0.20) !important;
}

.bg-soft-info {
  background-color: rgba(180, 160, 200, 0.15) !important;
}

/* ===============================
   Forms
   =============================== */

.phoenix-input,
.phoenix-select {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--lenea-radius-sm);
  background: var(--bs-body-bg);
}

.phoenix-input:focus,
.phoenix-select:focus {
  outline: 0;
  box-shadow: var(--lenea-focus-ring);
  border-color: var(--lenea-primary);
}

.form-select,
select.form-select {
  border: 1px solid var(--lenea-divider) !important;
  border-radius: var(--lenea-radius-sm) !important;
  background-color: #FFFFFF !important;
  color: var(--lenea-text) !important;
  min-height: 38px;
}

.form-select:focus,
select.form-select:focus {
  border-color: var(--lenea-primary) !important;
  box-shadow: var(--lenea-focus-ring) !important;
}

.form-check-input:checked {
  background-color: var(--lenea-primary) !important;
  border-color: var(--lenea-primary) !important;
}

.form-check-input:focus {
  border-color: var(--lenea-primary) !important;
  box-shadow: var(--lenea-focus-ring) !important;
}

/* ===============================
   Select2
   =============================== */

.select2-container {
  width: 100% !important;
}

.select2-container--open,
.select2-dropdown,
.modal .select2-container--open,
.modal .select2-dropdown {
  z-index: 2000 !important;
}

.select2-dropdown {
  border-radius: var(--lenea-radius);
  border: 1px solid var(--lenea-divider) !important;
  box-shadow: var(--lenea-shadow);
  overflow: hidden;
}

.select2-results__options {
  padding: 0.3rem;
}

.select2-results__option {
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  color: var(--lenea-text) !important;
}

.select2-container--default .select2-selection--multiple {
  min-height: 38px;
  padding: 2px 6px;
}

.select2-container--default .select2-selection__rendered {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.select2-container--default .select2-selection__choice {
  background-color: #EDF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.875rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="false"] {
  background-color: var(--lenea-secondary) !important;
  color: var(--lenea-text) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
  background-color: var(--lenea-accent) !important;
  color: #FFFFFF !important;
}

/* ===============================
   Alerts / messages
   =============================== */

.lenea-alert {
  border-width: 1px;
  border-radius: var(--lenea-radius);
  padding: 1rem 1.25rem;
  box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
}

/* ===============================
   Calendar
   =============================== */

.fc .text-purple {
  background-color: rgba(111, 66, 193, 0.15) !important;
  border: 1px solid rgba(111, 66, 193, 0.35) !important;
}

.fc .text-pink {
  background-color: rgba(216, 178, 170, 0.18) !important;
  border: 1px solid rgba(216, 178, 170, 0.40) !important;
}

/* FullCalendar loads after this stylesheet, so its own rules would
   otherwise win the cascade — !important keeps the brand palette. */

/* Grid lines: a soft, near-white neutral rather than the tan-pink
   --lenea-divider used elsewhere — keeps the structure light so color
   stays reserved for accents (today, events), not the whole grid. */
.fc.fc-theme-standard td,
.fc.fc-theme-standard th,
.fc .fc-scrollgrid {
  border-color: #F0EDEC !important;
}

/* Every day cell (not just weekends) otherwise gets Phoenix's cool
   blue-grey --phoenix-calendar-bg, which reads as a busy checkerboard
   against the rest of Lenea's warm, mostly-white surfaces. */
.fc {
  --phoenix-calendar-bg: var(--lenea-surface);
}

.fc .fc-col-header {
  background-color: var(--lenea-secondary) !important;
}

.fc .fc-col-header-cell-cushion {
  color: var(--lenea-text-muted) !important;
  font-weight: 600 !important;
}

.fc .fc-daygrid-day-number,
.fc .fc-timegrid-slot-label-cushion {
  color: var(--lenea-text) !important;
}

.fc .fc-day-today {
  background-color: var(--lenea-primary-light) !important;
}

.fc .fc-timegrid-col.fc-day-today {
  background-color: var(--lenea-primary-light) !important;
}

/* The all-day row is also a (mini) daygrid, so it inherits the generic
   .fc-day-today tint above via .fc-daygrid-day — cancel that back to
   white specifically within the time-grid views' all-day row. */
.fc-timeGridWeek-view .fc-daygrid-day.fc-day-today,
.fc-timeGridDay-view .fc-daygrid-day.fc-day-today {
  background-color: var(--lenea-surface) !important;
}

/* Desktop breakpoint (>=1200px): Phoenix draws today's column-header
   label as a small dot via a ::after pseudo-element border, in blue. */
@media (min-width: 1200px) {
  .fc .fc-timeGridWeek-view .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion::after {
    border-color: var(--lenea-accent) !important;
  }
}

/* Phoenix fills today's day-number circle with --phoenix-primary (blue). */
.fc .fc-day-today:not(.fc-popover) .fc-daygrid-day-number {
  background-color: var(--lenea-accent) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.fc .fc-day-today:not(.fc-popover) .fc-daygrid-day-number:hover,
.fc .fc-day-today:not(.fc-popover) .fc-daygrid-day-number:focus {
  background-color: var(--lenea-primary-hover) !important;
}

/* Week number: a small pill, clearly distinct from the plain day numbers.
   Month view uses .fc-daygrid-week-number; week/day views render it as an
   <a> inside the time-axis corner cell (the "all-day" label is a <span>
   with the same classes, so the element type is what distinguishes them). */
.fc .fc-daygrid-week-number,
.fc a.fc-timegrid-axis-cushion {
  background-color: var(--lenea-accent) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  border-radius: var(--lenea-radius-pill) !important;
  padding: 0.15rem 0.5rem !important;
  margin: 4px !important;
  line-height: 1.3 !important;
}

.fc-timegrid-now-indicator-line {
  border-color: var(--lenea-danger) !important;
}

.fc-timegrid-now-indicator-arrow {
  border-color: var(--lenea-danger) !important;
  color: var(--lenea-danger) !important;
}

.fc-timegrid-slot {
  border-color: var(--lenea-divider) !important;
}

/* ===============================
   Phoenix list pagination
   =============================== */

.pagination li.active .page,
.pagination li.active button.page {
  background-color: var(--lenea-primary) !important;
  border: 1px solid var(--lenea-primary) !important;
  color: #FFFFFF !important;
  font-weight: 500;
  border-radius: var(--lenea-radius-sm);
}

/* ===============================
   Contact list priority styling
   =============================== */

.contact-row {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contact-row--high {
  background-color: rgba(184, 92, 92, 0.05);
  box-shadow: inset 3px 0 0 #B85C5C;
}

.contact-row--medium {
  background-color: rgba(201, 164, 106, 0.06);
  box-shadow: inset 3px 0 0 #C9A46A;
}

.contact-row--vip {
  background-color: rgba(216, 178, 170, 0.10);
  box-shadow: inset 3px 0 0 var(--lenea-accent);
}

.contact-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--lenea-radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.contact-priority-badge--high {
  background-color: rgba(184, 92, 92, 0.12);
  color: #9F4C4C;
  border: 1px solid rgba(184, 92, 92, 0.22);
}

.contact-priority-badge--medium {
  background-color: rgba(201, 164, 106, 0.14);
  color: #9A7440;
  border: 1px solid rgba(201, 164, 106, 0.22);
}

.contact-priority-badge--vip {
  background-color: rgba(216, 178, 170, 0.16);
  color: var(--lenea-link);
  border: 1px solid rgba(168, 111, 120, 0.24);
}

/* ===============================
   Lenea status bar
   =============================== */

.lenea-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;

  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;

  color: var(--lenea-link);
  background-color: rgba(168, 111, 120, 0.10);
  border: 1px solid rgba(168, 111, 120, 0.22);
  border-radius: var(--lenea-radius-sm);
}

/* ===============================
   Lenea notice
   =============================== */

.lenea-notice {
  background-color: var(--lenea-secondary);
  border: 1px solid var(--lenea-divider);
  border-radius: var(--lenea-radius);
  color: var(--phoenix-body-color);
}

.lenea-notice-icon {
  color: var(--lenea-accent);
  opacity: 0.75;
}

.lenea-notice-text {
  color: var(--phoenix-secondary-color);
}

.lenea-notice-link {
  color: var(--lenea-accent);
  font-weight: 600;
  text-decoration: none;
}

.lenea-notice-link:hover {
  text-decoration: underline;
}

.product-picker .dropdown-menu {
  max-height: 320px;
  overflow-y: auto;
  z-index: 1050;
}

/* ===============================
   List filters / tabs
   =============================== */

.lenea-filter-nav {
  padding: 0;
  margin-bottom: -1px;

  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--lenea-divider);
  border-radius: 0;
  box-shadow: none;
}

.lenea-filter-nav .nav-item {
  margin-bottom: -1px;
}

.lenea-filter-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-height: 48px;
  padding: 0.75rem 1rem;

  color: var(--lenea-text-muted) !important;
  background-color: transparent !important;

  border: 1px solid transparent !important;
  border-bottom-color: var(--lenea-divider) !important;

  border-radius:
    var(--lenea-radius-sm)
    var(--lenea-radius-sm)
    0
    0 !important;

  font-weight: 500;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.lenea-filter-nav .nav-link:hover,
.lenea-filter-nav .nav-link:focus {
  color: var(--lenea-text) !important;
  background-color: rgba(216, 178, 170, 0.08) !important;
}


/* Färger för respektive flik */

.lenea-filter-nav .filter-open {
  --filter-text: #5C7491;
  --filter-border: rgba(124, 150, 181, 0.55);
}

.lenea-filter-nav .filter-today {
  --filter-text: #835F2D;
  --filter-border: rgba(230, 193, 145, 0.65);
}

.lenea-filter-nav .filter-overdue {
  --filter-text: #B85C5C;
  --filter-border: rgba(194, 107, 107, 0.55);
}

.lenea-filter-nav .filter-done {
  --filter-text: #58775E;
  --filter-border: rgba(169, 195, 163, 0.65);
}


/* Aktiv flik */

.nav.nav-pills.lenea-filter-nav .nav-link.active,
.nav.nav-pills.lenea-filter-nav .nav-link.active:hover,
.nav.nav-pills.lenea-filter-nav .nav-link.active:focus {
  color: var(--filter-text) !important;
  background-color: var(--lenea-surface) !important;

  border-color: var(--filter-border) !important;
  border-bottom-color: var(--lenea-surface) !important;

  box-shadow: inset 0 3px 0 var(--filter-border) !important;
}


/* Antal */

.lenea-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 1.65rem;
  padding: 0.15rem 0.45rem;

  color: inherit;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid currentColor;
  border-radius: var(--lenea-radius-pill);

  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ===============================
   Calendar: "Today" button + today's column header
   =============================== */

/* .btn-phoenix-primary (used for the "Idag"/Today button) is a Phoenix
   class lenea.css otherwise leaves alone, so it still shows Phoenix's
   blue. Restyle it as a soft rose pill instead, matching the same
   "soft" pattern used for badges/bg-soft-* elsewhere in this file. */
.btn-phoenix-primary {
  --phoenix-btn-color: var(--lenea-accent) !important;
  --phoenix-btn-bg: var(--lenea-primary-light) !important;
  --phoenix-btn-border-color: var(--lenea-primary-light) !important;
  --phoenix-btn-hover-color: #FFFFFF !important;
  --phoenix-btn-hover-bg: var(--lenea-primary) !important;
  --phoenix-btn-hover-border-color: var(--lenea-primary) !important;
  --phoenix-btn-active-color: #FFFFFF !important;
  --phoenix-btn-active-bg: var(--lenea-primary) !important;
  --phoenix-btn-active-border-color: var(--lenea-primary) !important;
}

/* Phoenix's own today-header rule (.fc-day-today .fc-col-header-cell-cushion)
   is more specific than the generic .fc-col-header-cell-cushion rule above,
   so it still wins on specificity even with !important on both — match its
   specificity here to actually override the blue. */
.fc .fc-timeGridWeek-view .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion,
.fc .fc-timeGridDay-view .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
  color: var(--lenea-accent) !important;
}

/* ===============================
   Filter pills: scroll instead of wrap
   =============================== */

/* Applied to list-page filter rows (.nav-links) that would otherwise wrap
   to several rows on narrow screens, pushing the actual list far down.
   Single row, horizontally scrollable; no visible change once everything
   already fits (desktop). */
.nav-links-scroll {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nav-links-scroll::-webkit-scrollbar {
  display: none;
}

.nav-links-scroll .nav-item {
  flex: 0 0 auto;
}