/* static/v2/css/site.css */

/* ================================
   Theme variables
   ================================ */
:root {
  --page-bg: #ffffff;
  --brand-bg: #f7f7f7;
  --brand-fg: #1b1f23;

  --sidebar-bg: #ffffff;
  --sidebar-border: #e6e6e6;
  --sidebar-w: 260px;           /* expanded width */
  --sidebar-w-collapsed: 200px; /* (unused visually in desktop hide mode) */

  --surface: #fafafa;
  --link: #0d6efd;

  --topbar-h: 56px;

  --font-size-base: 1rem;
  --font-size-xs: 0.875rem;

  --currency-bg: #f3e8ff;
  --currency-active-bg: #c6affa;
  --currency-active-fg: #ffffff;
  --currency-balance-color: #058533;

  --brand-rotator-h: 220px;
  --brand-rotator-w: 520px;
}

/* ================================
   Base
   ================================ */
.v2-body {
  background: var(--page-bg);
  min-height: 100vh;
  font-size: var(--font-size-base);
}

/* ================================
   Topbar
   ================================ */
.topbar {
  background: var(--brand-bg);
  color: var(--brand-fg);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}
.topbar .btn { height: 36px; }

/* ================================
   Layout (CSS Grid)
   ================================ */
.layout {
  display: grid;
  grid-template-areas: "sidebar content";
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--topbar-h));
}
.sidebar { grid-area: sidebar; }
.content { grid-area: content; min-width: 0; background: var(--page-bg); }

.sidebar .text-warning {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Desktop: fully hide sidebar when collapsed */
@media (min-width: 992px) {
  body.sidebar-collapsed .layout {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  body.sidebar-collapsed .sidebar {
    width: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
}

/* ================================
   Sidebar
   ================================ */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: .5rem .25rem;
  overflow-y: auto;
}

.sidebar .nav-link {
  color: #333;
  padding: .5rem .75rem;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.25rem;
}
.sidebar .nav-link:hover { background: rgba(0,0,0,0.04); }
.sidebar .nav-link.disabled { opacity: .5; pointer-events: none; }

.sidebar .nav-link i {
  flex: 0 0 1.25rem;
  text-align: center;
  font-size: 1rem;
}

.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"] {
  background: rgba(0,0,0,0.04);
  font-weight: 600;
}

/* Optional: also highlight the open section title */
.sidebar .btn-toggle[aria-expanded="true"] {
  background: rgba(0,0,0,0.04);
  font-weight: 600;
}

/* Group toggles */
.sidebar .btn-toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #333;
  padding: .5rem .75rem;
  border-radius: .5rem;
}
.sidebar .btn-toggle:hover { background: rgba(0,0,0,0.04); }
.sidebar .nav-sep { height: 8px; }

/* ================================
   Content overlay (popup look)
   ================================ */
/* Make <main> the positioning context */
.content { position: relative; }

/* The overlay spans the whole main area and centers its child */
.v2-overlay-wrapper {
  position: absolute;     /* sits over main content area */
  inset: 0;               /* top/right/bottom/left: 0 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;   /* page breathing room */
  box-sizing: border-box;
  z-index: 10;            /* above normal elements in main */
  pointer-events: none;   /* wrapper doesn't block clicks */
}

/* The card is interactive and can be full-width of .content */
.v2-overlay-card {
  pointer-events: auto;
  width: 100%;
  max-width: none;        /* allow full width of .content */
  max-height: 90vh;
  overflow: auto;

  /* Optional visual style: comment these 3 lines if you want your
     inner template to fully control look (no extra card chrome) */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);

  padding: 1.5rem;
  animation: v2PopupFadeIn 0.25s ease-out;
}

/* If child templates use Bootstrap containers, remove their max-width cap inside the overlay */
.v2-overlay-card .container,
.v2-overlay-card .container-sm,
.v2-overlay-card .container-md,
.v2-overlay-card .container-lg,
.v2-overlay-card .container-xl,
.v2-overlay-card .container-xxl {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

@keyframes v2PopupFadeIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ================================
   Welcome banner
   ================================ */
.v2-page-header{
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.v2-page-header .welcome-text{ white-space: normal; }
.v2-page-header .welcome-text a {
  text-decoration: none;
  color: var(--link);
  font-weight: 500;
}
.v2-page-header .welcome-text a:hover { text-decoration: underline; }

/* ================================
   Links
   ================================ */
a { color: var(--link); }
a:hover { color: #0b5ed7; }

/* ================================
   Mobile (≤ 991.98px) – off-canvas sidebar
   ================================ */
/* Prevent flash of open submenus before JS applies the correct state */
html[data-js-ready="0"] #sidebar .collapse { visibility: hidden; }
html[data-js-ready="1"] #sidebar .collapse { visibility: visible; }

@media (max-width: 991.98px) {
  .layout {
    grid-template-columns: 0 minmax(0, 1fr);
    grid-template-areas: "sidebar content";
  }

  .sidebar {
    position: fixed;
    z-index: 1040;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
    box-shadow: 0 0 30px rgba(0,0,0,0.08);
    border-right: 1px solid var(--sidebar-border);
    font-size: var(--font-size-xs);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open { overflow: hidden; }

  .topbar { height: 48px; }
  .topbar .btn { height: 32px; font-size: var(--font-size-xs); }

  /* When in mobile, desktop collapse is irrelevant */
  body.sidebar-collapsed .layout {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }
}

/* ================================
   Currency strip (below welcome)
   ================================ */
.v2-welcome-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.v2-currency-card-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.v2-currency-card {
  background: var(--currency-bg, #f3e8ff);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 1rem;
  padding: 0.8rem 1.2rem;
  min-width: 110px;
  text-align: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: #222;
}
.v2-currency-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.v2-currency-card.is-active {
  background: var(--currency-active-bg, #8b5cf6);
  color: var(--currency-active-fg, #fff);
}
.v2-currency-code { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; }
.v2-currency-balance {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--currency-balance-color, #058533);
}
.v2-currency-card.is-active .v2-currency-balance {
  color: var(--currency-balance-color, #058533);
}

/* Put code + flag on one line */
.v2-currency-card .v2-currency-code {
  display: inline-flex !important;
  align-items: center;
  justify-content: center; /* keeps "LBP" centered with the flag */
  gap: .4em;
  line-height: 1.1;
}

/* Keep code + flag on one line, centered */
.v2-currency-card .v2-currency-code{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.4em !important;
  line-height:1.1;
}

/* Neutralize any global img rules within currency cards */
.v2-currency-card img{
  max-width:none !important;
  width:auto !important;
  height:auto !important;
  display:inline-block !important;
}

/* Final size for the flag: same as text height */
.v2-currency-card img.v2-flag-currency{
  height:1em !important;
  width:auto !important;
  vertical-align:-0.1em;
}

/* ================================
   Search row
   ================================ */
.v2-search-row { display: flex; justify-content: center; margin: 0.5rem 0 1rem; }
.v2-search-form { display: flex; gap: .5rem; width: min(520px, 100%); }
.v2-search-input { flex: 1 1 auto; padding: .5rem .75rem; border: 1px solid #dcdcdc; border-radius: .6rem; }
.v2-search-btn { padding: .5rem .9rem; border-radius: .6rem; }

/* ================================
   Brand rotator (3D flip)
   ================================ */
.v2-brand-rotator {
  position: relative;
  height: var(--brand-rotator-h);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 1rem auto;
  width: 100%;
  perspective: 1000px; /* 3D depth */
}

.v2-rotator-stage {
  position: relative;
  width: var(--brand-rotator-w);
  height: var(--brand-rotator-h);
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(.2,.7,.2,1);
  transform: translateZ(0); /* rendering hint to avoid showing both faces */
}

/* Flip state */
.v2-brand-rotator.is-flipped .v2-rotator-stage {
  transform: translateZ(0) rotateY(180deg);
}

/* Faces */
.v2-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 1;           /* both faces are rendered; visibility controlled below */
}

/* Only show one face at a time (prevents seeing both) */
.v2-brand-rotator:not(.is-flipped) .v2-front { opacity: 1; }
.v2-brand-rotator:not(.is-flipped) .v2-back  { opacity: 0; }

.v2-brand-rotator.is-flipped .v2-front { opacity: 0; }
.v2-brand-rotator.is-flipped .v2-back  { opacity: 1; }

/* Back face rotated 180° so it’s hidden until flip */
.v2-back { transform: rotateY(180deg); }

/* Images inside faces */
.v2-face img.v2-brand-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.08));
  opacity: 1 !important; /* neutralize old fade rules */
  position: relative;
}

/* If any old rules target .v2-brand-img with opacity:0, neutralize within stage */
.v2-rotator-stage .v2-brand-img { opacity: 1 !important; }

/* Subtle pop while flipping */
.v2-brand-rotator.is-animating .v2-rotator-stage { will-change: transform; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v2-rotator-stage { transition: none; }
}

/* Mobile sizes */
@media (max-width: 768px) {
  :root { --brand-rotator-h: 120px; --brand-rotator-w: 280px; }
}

/* ================================
   Topbar notifications (bell + panel)
   ================================ */
.v2-topbar-icons { position: relative; display: flex; align-items: center; gap: .5rem; }
#v2-bell { line-height: 1; color: var(--brand-fg); }
#v2-bell:hover { color: var(--link); }
#v2-bell-badge { font-size: 0.65rem; padding: .25rem .35rem; }

/* 🔧 Use ONLY the ID rule for the panel to avoid specificity conflicts */
#v2-notify-panel {
  position: absolute;
  right: 0;
  top: calc(var(--topbar-h) + 6px);      /* below the topbar */
  width: min(380px, 92vw);               /* fit small screens */
  max-height: 70vh;                      /* never overflow vertically */
  overflow: auto;                        /* scroll inside */
  z-index: 1100;                         /* above the topbar */
  border-radius: 12px;
}

.v2-notify-item { cursor: pointer; }
.v2-notify-item.unread { background: #fff7e6; border-left: 3px solid #ffa500; }
.v2-notify-item.unread:hover { background: #fffaee; }
.v2-notify-empty { padding: .5rem .75rem; color: #666; }

/* 🔧 Badge offset (works with Bootstrap's translate-middle) */
.v2-topbar-icons { margin-right: .5rem; }
#v2-bell-badge { transform: translate(-60%, -50%); }

/* Mobile: show panel full-width inside the viewport */
@media (max-width: 991.98px) {
  :root { --topbar-h: 48px; }
  #v2-notify-panel {
    position: fixed;           /* <- was absolute; now fixed to viewport */
    top: calc(var(--topbar-h) + 6px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 70vh;
    overflow: auto;
    z-index: 1100;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
}

/* Notification delete button */
.v2-del-btn {
  color: #dc3545 !important;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.v2-del-btn:hover {
  opacity: 1;
  text-decoration: none;
}
.v2-del-btn i {
  pointer-events: none; /* let button handle click */
}

/* =========================================
   V2 TABLE PAGINATION for Django-Tables2
   (styles default Bootstrap pagination)
   ========================================= */
.v2-grid-shell nav[aria-label="Table navigation"] .pagination .page-link {
  color: #444 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 999px !important;
}
.v2-grid-shell nav[aria-label="Table navigation"] .pagination .page-link:hover {
  color: #222 !important;
  background: #f8f9fa !important;
  border-color: #ccc !important;
}

/* Active (lighter green) */
.v2-grid-shell nav[aria-label="Table navigation"] .pagination .page-item.active .page-link {
  background: #d1e7dd !important;   /* light green */
  border-color: #badbcc !important;  /* soft border */
  color: #0f5132 !important;         /* dark green text */
  font-weight: 600;
}

/* Disabled */
.v2-grid-shell nav[aria-label="Table navigation"] .pagination .page-item.disabled .page-link {
  color: #777 !important;
  background: #f8f9fa !important;
  opacity: .6;
  pointer-events: none;
}

/* Prev/Next as green arrows (replace text) */
.v2-grid-shell nav[aria-label="Table navigation"] .pagination .page-item:first-child .page-link,
.v2-grid-shell nav[aria-label="Table navigation"] .pagination .page-item:last-child .page-link {
  font-size: 0 !important; /* hide “previous/next” text */
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v2-grid-shell nav[aria-label="Table navigation"] .pagination .page-item:first-child .page-link::before {
  content: "←";
  font-size: .875rem;
  color: #198754;
  font-weight: 600;
}
.v2-grid-shell nav[aria-label="Table navigation"] .pagination .page-item:last-child .page-link::before {
  content: "→";
  font-size: .875rem;
  color: #198754;
  font-weight: 600;
}