/* ============================================================
   Angani Media CMS — Custom Overrides
   Loaded last so these take precedence over the template CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* 1. Brand accent: red replaces the template's default yellow.
      Every --primary-* variable in styles.css derives from this,
      so the active sidebar indicator, primary buttons, badges,
      and focus rings all update automatically. */
:root {
  --primary-rgb: 229, 9, 20;
  --plyr-color-main: #ffffff;
  --default-font-family: "Inter", sans-serif;
}

body, * {
  font-family: "Inter", sans-serif !important;
}

/* 2. Light cool-gray canvas — barely off-white so subtle card shadows read clearly. */
body {
  background-color: #f3f4fd !important;
}

/* 2b. Remove the page-container's card shell so individual cards sit
       directly on the gray canvas instead of floating inside a white box. */
.app-content .main-body-container {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 3. Cards: pure white, large radius, clearly floating shadow matching reference. */
.card.custom-card {
  border-radius: 1.25rem !important;
  background: #fafafe !important;
  border: none !important;
  box-shadow:
    0 4px 16px rgba(110, 108, 170, 0.08),
    0 20px 60px rgba(110, 108, 170, 0.13) !important;
}

/* 3a. Dashboard Overview/Metrics tab panes: template gives every .tab-pane a boxed
   border by default; strip it here so the dashboard body sits flush on the canvas. */
#dashboard-tabContent .tab-pane {
  border: none !important;
  padding: 0 !important;
}

/* 3b. KPI card left accent: a wider colored panel instead of the template's thin 3px
   line. Clip via the card's own overflow so the strip's corners are guaranteed to
   follow the card's exact curve (a border-radius this large can't render correctly
   on a strip only a few px wide, so we clip to the parent's shape instead). */
.card.custom-card.dashboard-main-card {
  overflow: hidden !important;
}
.card.custom-card.dashboard-main-card::before {
  width: 5px !important;
}

/* 4. Video preview modal: dark themed with red accent.
   --primary-color scoped to white so every Plyr element that uses var(--primary-color) gets white
   controls without needing per-element overrides. */
.angani-preview-modal {
  --primary-color: #ffffff;
  background-color: #0f0f0f !important;
  border: 1px solid rgba(229, 9, 20, 0.4) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 40px rgba(229, 9, 20, 0.2) !important;
}
.angani-preview-modal .modal-body {
  padding: 1rem !important;
}
.angani-preview-modal video {
  width: 100%;
  border-radius: 0.5rem;
}
/* Plyr player: white accent inside the preview modal.
   We bypass the currentColor / var(--primary-color) chain entirely by hardcoding the
   track gradient and icon colours directly on the pseudo-elements. */
.angani-preview-modal .plyr {
  border-radius: 0.5rem;
}

/* Force range inputs to inherit a white currentColor */
.angani-preview-modal input[type=range] {
  color: #ffffff !important;
}

/* Override webkit track: hardcode white fill, ignore currentColor */
.angani-preview-modal input[type=range]::-webkit-slider-runnable-track {
  background-image: linear-gradient(
    to right,
    #ffffff var(--value, 0%),
    rgba(255, 255, 255, 0.25) var(--value, 0%)
  ) !important;
}

/* Firefox track fill */
.angani-preview-modal input[type=range]::-moz-range-progress {
  background: #ffffff !important;
}
.angani-preview-modal input[type=range]::-moz-range-track {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Thumb: white dot */
.angani-preview-modal input[type=range]::-webkit-slider-thumb {
  background: #ffffff !important;
}
.angani-preview-modal input[type=range]::-moz-range-thumb {
  background: #ffffff !important;
}

/* Center overlay play button: red background, white icon */
.angani-preview-modal .plyr__control--overlaid {
  background: rgb(229, 9, 20) !important;
  border: none !important;
}
.angani-preview-modal .plyr__control--overlaid svg {
  fill: #ffffff !important;
}

/* All control icons: white */
.angani-preview-modal .plyr__controls .plyr__control svg {
  fill: #ffffff !important;
}
.angani-preview-modal .plyr__controls {
  color: #ffffff !important;
}
.angani-preview-modal .plyr__controls .plyr__control {
  color: #ffffff !important;
}

/* Hover states */
.angani-preview-modal .plyr--video .plyr__control:focus-visible,
.angani-preview-modal .plyr--video .plyr__control:hover,
.angani-preview-modal .plyr--video .plyr__control[aria-expanded=true] {
  background: rgba(255, 255, 255, 0.15) !important;
}
.angani-preview-modal .btn-secondary {
  background-color: rgb(229, 9, 20) !important;
  border-color: rgb(229, 9, 20) !important;
  color: #fff !important;
}

/* 4. Floating action button — quick shortcut to create a new movie. */
.angani-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgb(229, 9, 20);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.45);
  text-decoration: none;
  z-index: 1050;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.angani-fab:hover,
.angani-fab:focus {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(229, 9, 20, 0.55);
  color: #ffffff;
  text-decoration: none;
}

/* 5. Login form card: rounded corners and soft diffused shadow matching reference. */
.authentication-cover-main .card.custom-card {
  border-radius: 1.25rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

/* 6. Login page brand panel: original template gray, logo forced visible and larger. */
.authentication-cover-main .authentication-cover {
  background: radial-gradient(ellipse at bottom left, #eeedf7 0%, #fafafe 65%);
}
.authentication-cover-main .authentication-cover-logo img {
  display: block !important;
  height: 4rem !important;
}

/* 6. Dark icon strip: override to white — all sections. */
[data-vertical-style=doublemenu] .app-sidebar .main-sidebar,
[data-vertical-style=doublemenu] .app-sidebar .main-sidebar-header,
[data-vertical-style=doublemenu] .app-sidebar .doublemenu_bottom-menu,
[data-vertical-style=doublemenu] .app-sidebar {
  background-color: #ffffff !important;
}

/* 6. Doublemenu panel: match body background, stretch full height, right border. */
[data-vertical-style=doublemenu] .slide.has-sub .slide-menu,
[data-vertical-style=doublemenu] .slide-menu.double-menu-active {
  height: 100% !important;
  background-color: #f3f4fd !important;
  border-inline-end: 1px solid #d1d5db !important;
}

/* Section titles: align left edge with items. */
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 .slide__category {
  padding-inline-start: 1.3rem !important;
}
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 .slide.side-menu__label1 {
  display: flex !important;
  align-items: flex-end !important;
  padding-inline-start: 1.3rem !important;
  padding-block-start: 0 !important;
  padding-block-end: 0.6rem !important;
}
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 .slide.side-menu__label1 a {
  padding-inline-start: 0 !important;
}

/* 6b. Sidebar: Netflix-style active indicator.
        Move padding from .slide to .side-menu__item so ::before at inset-inline-start:0
        sits at the panel edge without being clipped by overflow:hidden on the panel. */
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 > .slide {
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 .side-menu__item {
  padding-inline-start: 1.3rem !important;
}

/* Active item: no green background, dark bold text. */
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 .side-menu__item.active,
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 > .slide.active > .side-menu__item.active {
  background-color: transparent !important;
  color: #111827 !important;
  font-weight: 600 !important;
}

/* Left red bar: centered, shorter than item height, rounded right side. */
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 .side-menu__item.active::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 55% !important;
  width: 4px !important;
  background-color: rgb(229, 9, 20) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* Active icon: filled red, no background. */
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 .side-menu__item.active .side-menu-doublemenu__icon {
  color: rgb(229, 9, 20) !important;
  fill: rgb(229, 9, 20) !important;
  background-color: transparent !important;
}

/* Inactive icons: muted gray. */
[data-vertical-style=doublemenu] .app-sidebar .slide-menu.child1 .side-menu__item:not(.active) .side-menu-doublemenu__icon {
  color: #9ca3af !important;
  fill: #9ca3af !important;
}

/* 6. Blog card thumbnails: image covers full card width, square bottom edge.
      overflow:hidden on the wrapper clips whatever Bootstrap sets on the img. */
.blog-card:not(.overlay-card) .card-body {
  padding: 0 0.85rem 0.9rem !important;
}

.blog-card:not(.overlay-card) .card-body .blog-image {
  margin-left: -0.85rem !important;
  margin-right: -0.85rem !important;
  border-radius: 1.25rem 1.25rem 0 0;
  overflow: hidden;
  margin-bottom: 0.75rem !important;
}

.blog-card:not(.overlay-card) .blog-image img {
  width: 100%;
  display: block;
  border-radius: 0 !important;
}

/* 7. Blog card content: title prominent, genre as small muted label below. */
.blog-card:not(.overlay-card) .blog-title {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
  margin-bottom: 0.2rem !important;
}

.blog-card:not(.overlay-card) .blog-category {
  font-size: 0.72rem !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 0.15rem !important;
}

/* Table action buttons: neutral gray, darker than btn-light. */
.btn-gray {
  background-color: #e9eaec !important;
  border-color: #e9eaec !important;
  color: #374151 !important;
}
.btn-gray:hover,
.btn-gray:focus {
  background-color: #d1d5db !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
}

/* 8. Header: flush with body background, no bottom border. */
.app-header {
  background: #f3f4fd !important;
  border-block-end: none !important;
}

/* 9. Header right icons: no backgrounds, no hover backgrounds. */
.header-content-right .header-element .header-link,
.header-content-right .header-element .header-link:hover,
.header-content-right .header-element .header-link:focus,
.app-header .header-link,
.app-header .header-link:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Notification pulse dot: red theme color. */
.header-icon-pulse {
  background-color: rgb(229, 9, 20) !important;
}

/* Profile dropdown link: flex row with avatar + text. */
.header-element.dropdown .header-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

/* Avatar: half-arc red border (top + sides, no bottom). */
.header-element.dropdown .header-link img.header-link-icon {
  width: 2.1rem !important;
  height: 2.1rem !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border-top: 1.9px solid rgb(229, 9, 20) !important;
  border-left: 1.9px solid rgb(229, 9, 20) !important;
  border-right: 1.5px solid transparent !important;
  border-bottom: 1.5px solid transparent !important;
  padding: 3px !important;
}

/* Name and designation next to avatar. */
.header-profile-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.header-profile-info .profile-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #111827;
}
.header-profile-info .profile-role {
  font-size: 0.7rem;
  color: #9ca3af;
}

/* 10. Scroll-to-top button: match the FAB in size, shape, and position.
      Sits directly above the FAB with a 1rem gap. */
.scrollToTop {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  bottom: calc(2rem + 52px + 1rem) !important;
  inset-inline-end: 2rem !important;
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.35) !important;
  border: none !important;
}

/* 11. SweetAlert2 toast: reuses this app's own alert icon markup (the same
       success/warning SVGs and svg-success/svg-warning color classes used
       in the inline alert boxes elsewhere) via html+didOpen instead of
       SweetAlert2's built-in icon, which has a broken checkmark/triangle
       render in this library version. Only cosmetic popup properties are
       overridden — the library still owns positioning/show/hide/timer. */
.angani-swal-toast {
  border-radius: 0.75rem !important;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12) !important;
  min-width: 22rem !important;
  /* The library's default toast padding is "0 0 32px" — it reserves grid
     rows for the (unused) actions/footer areas, which pushes the icon/text
     to the top with a large empty gap below. Replace with even padding. */
  padding: 0.875rem 1rem !important;
}
.angani-swal-toast .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
}
.angani-swal-text {
  font-family: "Inter", sans-serif !important;
  color: #111827 !important;
}

/* 12. Tooltips: brand red instead of Bootstrap's default dark, so hover
       hints (e.g. the icon-only sidebar) read as part of the app's theme.
       The arrow inherits its color from --bs-tooltip-bg automatically. */
.tooltip {
  --bs-tooltip-bg: rgb(var(--primary-rgb));
  --bs-tooltip-color: #fff;
  --bs-tooltip-opacity: 1;
}

/* 13. Video preview modal: resizable and draggable like a native window.
       The inline script in movies-list.ejs pins the dialog to a fixed rect
       on open; its edges/corners then resize via the handles below, and the
       top drag-handle bar moves it (both without touching width/height). */
.angani-preview-modal.angani-resizable {
  position: fixed !important;
  margin: 0 !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
}
.angani-preview-modal.angani-resizable .angani-drag-handle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  color: rgba(255, 255, 255, 0.45);
  cursor: move;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.angani-preview-modal.angani-resizable .angani-drag-handle:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}
/* Only present (and only takes flex-layout space) once resizable; the
   handle would otherwise show up as a stray bar above the static modal. */
.angani-drag-handle {
  display: none;
}
.angani-preview-modal.angani-resizable .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
/* The video (and the Plyr UI Plyr wraps it in) fill whatever space the
   resizable box currently has, instead of staying at their intrinsic size. */
.angani-preview-modal.angani-resizable .modal-body video,
.angani-preview-modal.angani-resizable .modal-body .plyr {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.angani-preview-modal.angani-resizable .modal-body .plyr video {
  height: 100%;
  object-fit: contain;
}
.angani-preview-modal.angani-resizable .modal-body .d-flex.justify-content-end {
  flex: 0 0 auto;
}
.angani-resize-handle {
  position: absolute;
  z-index: 5;
}
.angani-resize-handle.n {
  top: 0;
  left: 12px;
  right: 12px;
  height: 10px;
  cursor: ns-resize;
}
.angani-resize-handle.s {
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 10px;
  cursor: ns-resize;
}
.angani-resize-handle.e {
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 10px;
  cursor: ew-resize;
}
.angani-resize-handle.w {
  top: 12px;
  left: 0;
  bottom: 12px;
  width: 10px;
  cursor: ew-resize;
}
.angani-resize-handle.ne {
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nesw-resize;
}
.angani-resize-handle.nw {
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
}
.angani-resize-handle.se {
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
}
.angani-resize-handle.sw {
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: nesw-resize;
}

/* 14. Dashboard Overview tab: slightly tighter card corners than the
       template default across the hero, sidebar widgets, and the mixed
       content cards, for a crisper look on this data-dense page. */
#dashboard-overview-tab-pane .card.custom-card {
  border-radius: 0.125rem;
}