/*
 * MediAddict theme layer.
 *
 * Loaded after app.min.css (the Adminto build) so it can refine the template without rebuilding
 * the SCSS: softer surfaces, rounder corners, layered shadows, smoother hover states and a few
 * MediAddict-specific components (poster cards, compact filter bars). Everything here goes through
 * the template's --ct-* custom properties where one exists, so the light/dark toggle and the
 * Theme Settings panel keep working unchanged.
 */

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */

:root,
[data-bs-theme=light] {
  --ma-radius-sm: 0.5rem;
  --ma-radius: 0.75rem;
  --ma-radius-lg: 1rem;
  --ma-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ma-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --ma-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px -4px rgba(16, 24, 40, 0.08);
  --ma-shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 40px -12px rgba(16, 24, 40, 0.22);
  --ma-card-border: rgba(16, 24, 40, 0.06);
  --ma-topbar-glass: rgba(244, 246, 251, 0.78);
  --ma-accent-gradient: linear-gradient(135deg, #188ae2 0%, #5b6cf0 100%);

  --ct-body-bg: #f4f6fb;
  --ct-body-bg-rgb: 244, 246, 251;
  --ct-tertiary-bg: #f5f7fb;
  --ct-border-color: #e6e9f0;
  --ct-border-radius: var(--ma-radius-sm);
  --ct-border-radius-sm: 0.4rem;
  --ct-border-radius-lg: var(--ma-radius);
  --ct-box-shadow: var(--ma-shadow);
}

:root[data-bs-theme=dark] {
  --ma-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ma-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -6px rgba(0, 0, 0, 0.45);
  --ma-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 22px 44px -12px rgba(0, 0, 0, 0.7);
  --ma-card-border: rgba(255, 255, 255, 0.06);
  --ma-topbar-glass: rgba(19, 20, 28, 0.78);

  --ct-body-bg: #13141c;
  --ct-body-bg-rgb: 19, 20, 28;
  --ct-secondary-bg: #1c1d27;
  --ct-secondary-bg-rgb: 28, 29, 39;
  --ct-tertiary-bg: #252633;
  --ct-border-color: #2c2e3c;
  --ct-box-shadow: var(--ma-shadow);
}

/* The sidebar used to stay white in dark mode when its colour was left on "light" (the default). */
:root[data-bs-theme=dark][data-menu-color=light] {
  --ct-menu-bg: #181922;
  --ct-menu-item-color: #9aa6ba;
  --ct-menu-item-hover-color: #ffffff;
  --ct-menu-item-hover-bg: rgba(255, 255, 255, 0.05);
  --ct-menu-item-active-color: #ffffff;
  --ct-menu-item-active-bg: rgba(var(--ct-primary-rgb), 0.18);
  --ct-sidenav-user-bg: #181922;
}
html[data-bs-theme=dark][data-menu-color=light] .sidenav-menu .logo .logo-light { display: block; }
html[data-bs-theme=dark][data-menu-color=light] .sidenav-menu .logo .logo-dark { display: none; }

:root[data-bs-theme=dark][data-topbar-color=light] {
  --ct-topbar-search-bg: #22232f;
}

:root[data-menu-color=light] {
  --ct-menu-item-active-bg: rgba(var(--ct-primary-rgb), 0.1);
  --ct-menu-item-hover-bg: rgba(var(--ct-primary-rgb), 0.06);
}

::selection {
  background: rgba(var(--ct-primary-rgb), 0.22);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.header-title {
  letter-spacing: -0.01em;
}

.header-title {
  font-size: 1.05rem;
  font-weight: 600;
}

a,
.btn,
.form-control,
.form-select,
.side-nav-link,
.dropdown-item,
.badge {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.2s ease, transform 0.2s var(--ma-ease);
}

/* Thin, unobtrusive scrollbars that follow the theme. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ct-body-color-rgb), 0.2) transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* Layout: topbar, sidebar, footer                                     */
/* ------------------------------------------------------------------ */

.app-topbar {
  background: var(--ma-topbar-glass);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
html[data-topbar-color=dark] .app-topbar,
html[data-topbar-color=brand] .app-topbar {
  background: var(--ct-topbar-bg);
}

.app-topbar .topbar-search {
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}
.app-topbar .topbar-search:hover {
  border-color: rgba(var(--ct-primary-rgb), 0.3);
  color: var(--ct-body-color) !important;
}
.app-topbar .topbar-search .form-control,
.app-topbar .app-search .form-control {
  border-radius: 999px;
}

.sidenav-menu {
  box-shadow: none;
  border-right: 1px solid var(--ct-border-color);
}
html[data-menu-color=brand] .sidenav-menu,
html[data-menu-color=dark] .sidenav-menu {
  border-right-color: transparent;
}

.side-nav > .side-nav-item {
  padding: 0 12px;
}
.side-nav .side-nav-item .side-nav-link {
  border-radius: 0.6rem;
  position: relative;
}
.side-nav .side-nav-item .side-nav-link:hover {
  background: var(--ct-menu-item-hover-bg);
}
.side-nav > .side-nav-item.active > .side-nav-link,
.side-nav > .side-nav-item > .side-nav-link.active {
  color: var(--ct-menu-item-active-color);
  background: var(--ct-menu-item-active-bg);
  font-weight: 600;
}
.side-nav > .side-nav-item.active > .side-nav-link::before,
.side-nav > .side-nav-item > .side-nav-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ct-menu-item-active-color);
}
.side-nav .side-nav-title {
  margin-top: 0.75rem !important;
  opacity: 0.6;
}

.sidenav-user img.rounded-circle {
  box-shadow: 0 0 0 3px var(--ct-menu-bg), 0 0 0 5px rgba(var(--ct-primary-rgb), 0.35);
}

.footer {
  border-top-color: var(--ct-border-color);
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

.card {
  --ct-card-border-width: 1px;
  --ct-card-border-color: var(--ma-card-border);
  --ct-card-border-radius: var(--ma-radius-lg);
  --ct-card-inner-border-radius: calc(var(--ma-radius-lg) - 1px);
  --ct-card-box-shadow: var(--ma-shadow-sm);
  box-shadow: var(--ma-shadow-sm);
}
.card .card {
  --ct-card-border-radius: var(--ma-radius);
  --ct-card-inner-border-radius: calc(var(--ma-radius) - 1px);
}

.card-header {
  border-bottom: 1px solid var(--ma-card-border);
}
.card-header + .card-body {
  padding-top: 1.25rem;
}
.card-footer {
  border-top: 1px solid var(--ma-card-border);
}

/* Inner panels that use plain borders (detail blocks, dashboard tiles). */
.border.rounded,
.border.rounded-2,
.border.rounded-3 {
  border-color: var(--ma-card-border) !important;
  border-radius: var(--ma-radius) !important;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
  --ct-btn-border-radius: 0.6rem;
  --ct-btn-font-weight: 500;
  --ct-btn-padding-y: 0.5rem;
  --ct-btn-padding-x: 1rem;
}
.btn-sm {
  --ct-btn-border-radius: 0.5rem;
  --ct-btn-padding-y: 0.3rem;
  --ct-btn-padding-x: 0.6rem;
}
.btn-lg {
  --ct-btn-border-radius: 0.75rem;
}

.btn-primary {
  background-image: var(--ma-accent-gradient);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(24, 138, 226, 0.25), 0 4px 12px -2px rgba(24, 138, 226, 0.35);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(24, 138, 226, 0.3), 0 8px 20px -4px rgba(24, 138, 226, 0.45);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-light {
  --ct-btn-border-color: var(--ct-border-color);
  background-color: var(--ct-secondary-bg);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-dark:hover {
  transform: translateY(-1px);
}
.btn-outline-secondary {
  --ct-btn-color: var(--ct-body-color);
  --ct-btn-hover-color: var(--ct-emphasis-color);
  --ct-btn-hover-bg: var(--ct-tertiary-bg);
  --ct-btn-hover-border-color: var(--ct-border-color);
  --ct-btn-active-color: var(--ct-emphasis-color);
  --ct-btn-active-bg: var(--ct-tertiary-bg);
}

.btn-link.text-danger {
  border-radius: 0.5rem;
}
.btn-link.text-danger:hover {
  background: rgba(var(--ct-danger-rgb), 0.1);
}

.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--ct-primary-rgb), 0.3);
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.form-control,
.form-select {
  border-radius: 0.6rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  background-color: var(--ct-secondary-bg);
}
.form-control-sm,
.form-select-sm {
  border-radius: 0.5rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
  background-color: var(--ct-tertiary-bg);
  border-color: transparent;
}
.form-control:hover,
.form-select:hover {
  border-color: rgba(var(--ct-primary-rgb), 0.35);
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--ct-primary-rgb), 0.7);
  box-shadow: 0 0 0 0.2rem rgba(var(--ct-primary-rgb), 0.15);
}
.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ct-secondary-color);
  margin-bottom: 0.35rem;
}
.input-group > .form-control,
.input-group > .form-select {
  border-radius: 0.6rem;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.form-check-input {
  cursor: pointer;
}

/* Filter bars at the top of every collection page. */
.media-filters {
  background: var(--ct-tertiary-bg);
  border-radius: var(--ma-radius);
  padding: 0.75rem 0.75rem 0.9rem;
  margin-left: 0;
  margin-right: 0;
}
.media-filters .form-control,
.media-filters .form-select {
  background-color: var(--ct-secondary-bg);
  border-color: transparent;
  box-shadow: var(--ma-shadow-sm);
}
.media-filters .form-control:focus,
.media-filters .form-select:focus {
  border-color: rgba(var(--ct-primary-rgb), 0.7);
  box-shadow: 0 0 0 0.2rem rgba(var(--ct-primary-rgb), 0.15);
}

@media (max-width: 767.98px) {
  /* Two filters per row on phones instead of one tall column; the free-text search keeps the full width. */
  .media-filters > [class*="col-md-"]:not(:first-child):not(.col-md-12) {
    flex: 0 0 auto;
    width: 50%;
  }
  /* A filter left alone on the last row of pairs spans the whole row. */
  .media-filters > [class*="col-md-"]:nth-child(even):nth-last-child(2):not(.col-md-12) {
    width: 100%;
  }
  .media-filters > .col-md-12 {
    display: flex;
    gap: 0.5rem;
  }
  .media-filters > .col-md-12 > .btn {
    flex: 1 1 0;
  }
}

@media (max-width: 575.98px) {
  /* Phones: give content the width back instead of nesting padded boxes. */
  .page-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .card > .card-body,
  .card > .card-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Header actions drop under the title instead of squeezing it. */
  .card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .card-header.d-flex > div:first-child {
    flex: 1 1 auto;
  }
}

/* ------------------------------------------------------------------ */
/* Badges, alerts, tables, dropdowns, modals                           */
/* ------------------------------------------------------------------ */

.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.35em 0.65em;
}

.alert {
  border-radius: var(--ma-radius);
  border-width: 0;
  border-left: 3px solid currentColor;
}

.dropdown-menu {
  border-radius: var(--ma-radius);
  border: 1px solid var(--ma-card-border);
  box-shadow: var(--ma-shadow-lg);
  padding: 0.4rem;
}
.dropdown-item {
  border-radius: 0.5rem;
}

.modal-content:not(.bg-transparent) {
  border-radius: var(--ma-radius-lg);
  border: 1px solid var(--ma-card-border);
  box-shadow: var(--ma-shadow-lg);
}
.modal-backdrop.show {
  opacity: 0.6;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--ma-card-border);
}
.table-hover > tbody > tr {
  transition: background-color 0.15s ease;
}

.progress {
  border-radius: 999px;
  background-color: rgba(var(--ct-body-color-rgb), 0.08);
}
.progress-bar {
  border-radius: 999px;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  border-radius: 0.6rem;
}

.offcanvas {
  border-color: var(--ma-card-border) !important;
}

.tooltip-inner {
  border-radius: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Poster cards (Films, Séries, Animés, Mangas, Livres, Amis)          */
/* ------------------------------------------------------------------ */

.media-card {
  border-radius: var(--ma-radius);
  --ct-card-border-radius: var(--ma-radius);
  box-shadow: var(--ma-shadow-sm);
  transition: transform 0.25s var(--ma-ease), box-shadow 0.25s var(--ma-ease), border-color 0.25s ease;
}
.media-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ma-shadow-lg);
  border-color: rgba(var(--ct-primary-rgb), 0.25);
}

/* The poster block is always the card's first child. */
.media-card > :first-child {
  overflow: hidden;
  background: var(--ct-tertiary-bg);
}
.media-card > :first-child > img {
  transition: transform 0.5s var(--ma-ease), filter 0.3s ease;
}
.media-card:hover > :first-child > img {
  transform: scale(1.05);
}
/* A soft shade at the poster's foot so it melts into the card body. */
.media-card > :first-child::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.media-card:hover > :first-child::after {
  opacity: 1;
}

/* Status badges float over artwork: give them a frosted backdrop so they stay readable. */
.media-card > :first-child .badge {
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.media-card h5,
.media-card .h5 {
  font-size: 0.92rem;
  font-weight: 600;
}
.media-card h5 a:hover {
  color: var(--ct-primary) !important;
}
.media-card > .p-2 {
  padding: 0.75rem !important;
}

/* Cover art on detail pages. */
img.rounded.shadow,
img.rounded.shadow-sm,
img.img-thumbnail {
  border-radius: var(--ma-radius) !important;
  box-shadow: var(--ma-shadow-lg) !important;
}

/* ------------------------------------------------------------------ */
/* Authentication pages                                                */
/* ------------------------------------------------------------------ */

.auth-bg {
  background-image:
    radial-gradient(60rem 40rem at 10% -10%, rgba(24, 138, 226, 0.22), transparent 60%),
    radial-gradient(50rem 35rem at 110% 10%, rgba(91, 108, 240, 0.2), transparent 60%),
    radial-gradient(40rem 30rem at 50% 120%, rgba(16, 196, 105, 0.12), transparent 60%);
  background-color: var(--ct-body-bg);
  align-items: center;
}
.auth-bg .card {
  border-radius: 1.25rem;
  box-shadow: var(--ma-shadow-lg);
  background-color: rgba(var(--ct-secondary-bg-rgb), 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.auth-bg .auth-brand {
  margin-bottom: 1.25rem !important;
}

/* ------------------------------------------------------------------ */
/* Entrance animation for page content                                 */
/* ------------------------------------------------------------------ */

@keyframes ma-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.page-content > .page-container {
  animation: ma-fade-up 0.35s var(--ma-ease) both;
}

/* ------------------------------------------------------------------ */
/* Meal planner (Cuisine > Planificateur)                              */
/* ------------------------------------------------------------------ */

:root {
  --ma-planner-out-rgb: 132, 79, 204;
}
:root[data-bs-theme=dark] {
  --ma-planner-out-rgb: 178, 140, 240;
}

.planner-stat {
  background-color: var(--ct-tertiary-bg);
  border-radius: var(--ma-radius-sm);
  padding: 0.6rem 0.75rem;
  text-align: center;
}
.planner-stat-value {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}
.planner-stat-label {
  font-size: 0.75rem;
  color: var(--ct-secondary-color);
}

.planner-recipe {
  transition: border-color 0.2s var(--ma-ease), box-shadow 0.2s var(--ma-ease);
}
.planner-recipe.is-active {
  border-color: rgba(var(--ct-primary-rgb), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--ct-primary-rgb), 0.25), var(--ma-shadow-sm);
}
.planner-portion-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.planner-ingredients li + li {
  border-top: 1px solid var(--ct-border-color);
  padding-top: 0.15rem;
  margin-top: 0.15rem;
}

.planner-week {
  table-layout: fixed;
  min-width: 860px;
}
.planner-week .planner-slot-head {
  width: 64px;
  vertical-align: middle;
  background-color: var(--ct-tertiary-bg);
}
.planner-week thead th {
  background-color: var(--ct-tertiary-bg);
}
.planner-week .planner-today {
  background-color: rgba(var(--ct-primary-rgb), 0.06);
}
.planner-week thead th.planner-today {
  color: var(--ct-primary);
}
.planner-cell {
  height: 92px;
  padding: 0.35rem !important;
  cursor: pointer;
  transition: background-color 0.15s var(--ma-ease);
}
.planner-cell:hover,
.planner-cell:focus-visible {
  background-color: rgba(var(--ct-primary-rgb), 0.08);
  outline: none;
}
.planner-cell-add {
  text-align: center;
  color: var(--ct-secondary-color);
  opacity: 0.45;
  font-size: 0.9rem;
}
.planner-cell:hover .planner-cell-add {
  opacity: 1;
}
.planner-meal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 0.4rem;
  padding: 0.2rem 0.25rem 0.2rem 0.45rem;
  margin-bottom: 0.25rem;
  min-width: 0;
}
.planner-meal-midi { background-color: rgba(var(--ct-info-rgb), 0.14); color: var(--ct-info-text-emphasis, var(--ct-info)); }
.planner-meal-soir { background-color: rgba(var(--ct-success-rgb), 0.14); color: var(--ct-success-text-emphasis, var(--ct-success)); }
.planner-meal-absent { background-color: rgba(var(--ct-danger-rgb), 0.12); color: var(--ct-danger); }
.planner-meal-out { background-color: rgba(var(--ma-planner-out-rgb), 0.14); color: rgb(var(--ma-planner-out-rgb)); }
.planner-meal-absent-text { color: var(--ct-danger); }
.planner-meal-out-text { color: rgb(var(--ma-planner-out-rgb)); }
.planner-meal-remove {
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.55;
  padding: 0 0.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.planner-meal-remove:hover {
  opacity: 1;
}

.planner-shopping-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--ct-border-color);
}
.planner-shopping-item:last-child {
  border-bottom: 0;
}
.planner-shopping-item.is-checked .planner-shopping-name,
.planner-shopping-item.is-checked .planner-shopping-qty {
  text-decoration: line-through;
  opacity: 0.45;
}

/* Long catalog texts (RAWG game descriptions) cut to four lines on the "add" form. */
.text-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}