/*
 * IPN — Imagerie Pub Global Agency · charte graphique
 * Loaded after argon.css on every page: re-skins the Argon/Bootstrap theme.
 *
 *  Indigo  #27224D  primary (logo letters) — text, buttons, headers
 *  Turquoise #74C2CA accent (logo dot)     — highlights, focus, indicators
 *  Turquoise on white is decorative only (contrast 2:1); text uses indigo.
 */
:root {
    --ipn-indigo: #27224D;
    --ipn-indigo-900: #15122B;
    --ipn-indigo-800: #1C1838;
    --ipn-indigo-700: #332D66;
    --ipn-indigo-500: #4A4390;
    --ipn-indigo-100: #EFEEF6;
    --ipn-turquoise: #74C2CA;
    --ipn-turquoise-600: #3E9FA9;   /* turquoise for text on white (AA large) */
    --ipn-turquoise-100: #E6F4F6;
    --ipn-ink: #1B1838;
    --ipn-muted: #6B6890;
    --ipn-surface: #FFFFFF;
    --ipn-bg: #F5F5FA;
    --ipn-radius: 14px;
    --ipn-font: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --ipn-gradient: linear-gradient(135deg, #27224D 0%, #332D66 55%, #3E3880 100%);
}

/* ── Typography ───────────────────────────────────────────────────────── */
body, .btn, .form-control, .dropdown-menu, .navbar, .tooltip, .popover {
    font-family: var(--ipn-font) !important;
}
body { color: var(--ipn-ink); background-color: var(--ipn-bg); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .heading, .heading-title {
    font-family: var(--ipn-font);
    color: var(--ipn-indigo);
    letter-spacing: -0.01em;
}
.bg-gradient-primary h1, .bg-gradient-primary h2, .bg-gradient-primary h3, .bg-gradient-primary h4,
.header h1, .header h2, .text-white h1, .text-white h2, .text-white h3,
.card.bg-gradient-default h5, .card[class*="bg-gradient"] h5, .card[class*="bg-gradient"] .h2 { color: #fff; }
.text-muted { color: var(--ipn-muted) !important; }
a { color: var(--ipn-indigo); }
a:hover { color: var(--ipn-indigo-500); }

/* ── Primary = indigo, info = turquoise ──────────────────────────────── */
.bg-primary { background-color: var(--ipn-indigo) !important; }
.text-primary { color: var(--ipn-indigo) !important; }
.border-primary { border-color: var(--ipn-indigo) !important; }
.bg-info { background-color: var(--ipn-turquoise) !important; }
.text-info { color: var(--ipn-turquoise-600) !important; }
.bg-default { background-color: var(--ipn-indigo-800) !important; }

.bg-gradient-primary, .bg-gradient-red, .bg-gradient-default {
    background: var(--ipn-gradient) !important;
}
.bg-gradient-info { background: linear-gradient(135deg, #74C2CA 0%, #4FA8B2 100%) !important; }

.btn-primary {
    background-color: var(--ipn-indigo); border-color: var(--ipn-indigo); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--ipn-indigo-700); border-color: var(--ipn-indigo-700); color: #fff;
}
.btn-outline-primary { color: var(--ipn-indigo); border-color: var(--ipn-indigo); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ipn-indigo); border-color: var(--ipn-indigo); color: #fff;
}
.btn-info { background-color: var(--ipn-turquoise); border-color: var(--ipn-turquoise); color: var(--ipn-indigo); }
.btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active {
    background-color: #5FB3BC; border-color: #5FB3BC; color: var(--ipn-indigo);
}
.btn-outline-info { color: var(--ipn-turquoise-600); border-color: var(--ipn-turquoise); }
.btn-outline-info:hover { background-color: var(--ipn-turquoise); color: var(--ipn-indigo); }
.btn-default { background-color: var(--ipn-indigo-800); border-color: var(--ipn-indigo-800); }
.btn-neutral { color: var(--ipn-indigo); }

.badge-primary { background-color: var(--ipn-indigo-100); color: var(--ipn-indigo); }
.badge-info { background-color: var(--ipn-turquoise-100); color: #1F6F78; }
.alert-primary { background-color: var(--ipn-indigo); border-color: var(--ipn-indigo); }
.alert-info { background-color: var(--ipn-turquoise-100); border-color: var(--ipn-turquoise); color: var(--ipn-indigo); }
.progress-bar, .progress-bar.bg-primary { background-color: var(--ipn-indigo); }
.progress-bar.bg-info { background-color: var(--ipn-turquoise); }

/* ── Forms & focus (visible, brand-coloured) ─────────────────────────── */
.form-control:focus, .custom-select:focus {
    border-color: var(--ipn-turquoise);
    box-shadow: 0 0 0 3px rgba(116, 194, 202, .35);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ipn-indigo); border-color: var(--ipn-indigo);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(116, 194, 202, .35); }
.btn:focus-visible, a:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
    outline: 3px solid var(--ipn-turquoise); outline-offset: 2px; box-shadow: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ipn-indigo); }

/* ── Navigation ───────────────────────────────────────────────────────── */
.navbar-vertical.navbar-light { background: #fff; border-right: 1px solid rgba(39, 34, 77, .08); }
.navbar-vertical .navbar-brand-img, .navbar-vertical .navbar-brand > img { max-height: 3.4rem; }
.navbar-vertical .navbar-nav .nav-link { color: var(--ipn-ink); font-weight: 600; border-radius: 10px; margin: 1px .5rem; }
.navbar-vertical .navbar-nav .nav-link:hover { color: var(--ipn-indigo); background: var(--ipn-indigo-100); }
.navbar-vertical .navbar-nav .nav-link.active, .navbar-vertical .navbar-nav .nav-item.active > .nav-link {
    color: var(--ipn-indigo); background: var(--ipn-indigo-100); box-shadow: inset 3px 0 0 var(--ipn-turquoise);
}
.navbar-vertical .navbar-nav .nav-link i { color: var(--ipn-indigo-500) !important; }
.navbar-top { background: transparent; }

.page-item.active .page-link { background-color: var(--ipn-indigo); border-color: var(--ipn-indigo); color: #fff; }
.page-link { color: var(--ipn-indigo); }
.dropdown-item:active { background-color: var(--ipn-indigo); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ipn-indigo); }

/* ── Cards, headers, tables ───────────────────────────────────────────── */
.card { border-radius: var(--ipn-radius); }
.header.bg-gradient-primary, .header.bg-gradient-red { position: relative; overflow: hidden; }
.header.bg-gradient-primary::after, .header.bg-gradient-red::after, .ipn-hero::after {
    /* the turquoise dot of the logo, as a quiet brand motif */
    content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
    right: -60px; top: -80px; background: radial-gradient(circle, rgba(116, 194, 202, .35), transparent 70%);
    pointer-events: none;
}
.thead-light th { background: var(--ipn-indigo-100) !important; color: var(--ipn-indigo) !important; border-color: transparent !important; }
.table-hover tbody tr:hover { background: rgba(116, 194, 202, .08); }

/* ── Brand elements ───────────────────────────────────────────────────── */
.ipn-logo { display: block; height: auto; max-width: 100%; }
.ipn-hero { background: var(--ipn-gradient); color: #fff; position: relative; overflow: hidden; }
.ipn-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--ipn-turquoise); vertical-align: .1em; }
.ipn-footer { color: var(--ipn-muted); font-size: .8rem; text-align: center; padding: 1.5rem 0; }
.ipn-footer strong { color: var(--ipn-indigo); }
.event-bar { border-left: 4px solid var(--ipn-turquoise) !important; }
.event-bar__name { color: var(--ipn-indigo) !important; }

::selection { background: rgba(116, 194, 202, .45); color: var(--ipn-indigo-900); }

/* Avatars with initials (no stock photos) */
.ipn-avatar-light { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--ipn-indigo); font-weight: 700; box-shadow: 0 0 0 2px var(--ipn-turquoise); }

/* ── Fixes from visual review ─────────────────────────────────────────── */
/* Sidebar: auto margins in Argon's flex column shrink the brand to 0 — give the logo a real size. */
@media (min-width: 768px) {
  .navbar-vertical .ipn-sidebar-brand { width: 100%; text-align: center; }
  .navbar-vertical .ipn-sidebar-brand .ipn-logo { width: 168px !important; max-width: 100%; max-height: none !important; display: inline-block; }
}

/* Headings inside white-text areas (heroes, gradient cards) keep the white text. */
[style*="color: #fff"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
[style*="color:#fff"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.text-white :is(h1, h2, h3, h4, h5, h6), .ipn-hero :is(h1, h2, h3, h4, h5, h6),
.header :is(h1, h2, h3, h4, h5, h6).text-white { color: #fff !important; }

/* Cards are opaque white (they sat semi-transparent on the indigo header and looked grey). */
.card { background-color: #fff !important; }
.card[class*="bg-gradient"], .card.bg-primary, .card.bg-default { background-color: transparent !important; }

/* Light badges on dark headers stay readable */
.header .badge-light, .dash-header .badge-light { background: rgba(255,255,255,.95); color: var(--ipn-indigo); }

/* Event bar sits inside the top navbar */
.navbar-top .event-bar { margin: 0; flex: 1 1 auto; max-width: calc(100% - 4rem); box-shadow: 0 6px 18px rgba(21,18,43,.18); }

/* Bootstrap 5 close buttons used in some views (theme is Bootstrap 4) */
.btn-close {
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: .6rem;
  background: transparent; color: var(--ipn-indigo); opacity: .6; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-close::before { content: "\00d7"; font-size: 1.6rem; line-height: 1; }
.btn-close:hover { opacity: 1; background: var(--ipn-indigo-100); }


/* ── Phones ─────────────────────────────────────────────────────────── */
.ipn-tabbar { display: none; }
@media (max-width: 767.98px) {
  /* Compact top bar: menu · logo · account on one row */
  #sidenav-main > .container-fluid { flex-wrap: nowrap; align-items: center; padding: .5rem .75rem; }
  #sidenav-main .ipn-sidebar-brand { flex: 1 1 auto; text-align: center; padding: 0; margin: 0; }
  #sidenav-main .ipn-sidebar-brand .ipn-logo { height: 34px !important; width: auto !important; max-height: 34px !important; }
  #sidenav-main .navbar-collapse.show,
  #sidenav-main .navbar-collapse.collapsing { position: fixed; inset: .5rem .5rem 4.75rem; overflow-y: auto; z-index: 1050; }

  /* Event bar: one compact line, details hidden */
  .event-bar.event-bar--mobile { margin: .75rem .75rem 0; padding: .5rem .75rem; flex-wrap: nowrap; font-size: .8rem; }
  .event-bar.event-bar--mobile .event-bar__info { flex-wrap: nowrap; overflow: hidden; }
  .event-bar--mobile .badge { display: none; }
  .btn-block { white-space: normal; }
  .event-bar--mobile .event-bar__label,
  .event-bar--mobile .event-bar__meta { display: none; }
  .event-bar--mobile .event-bar__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .event-bar--mobile .event-bar__switch { flex: 0 0 auto; }

  /* Page spacing */
  .main-content { padding-bottom: 5rem; }
  .main-content .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
  .main-content .header { padding-top: 1.5rem !important; }
  .card-body { padding: 1rem; }
  .card-header { padding: 1rem; }
  h1, .h1 { font-size: 1.6rem; }
  .display-4, .display-5, .display-6 { font-size: 1.8rem !important; }

  /* Comfortable touch targets */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .form-control, .custom-select { min-height: 44px; font-size: 16px; } /* 16px: no iOS zoom on focus */
  select.form-control, select { font-size: 16px; }

  /* Dashboard indicators: two per row */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .stat-grid .card-body { padding: .85rem; }
  .stat-grid .stat-value { font-size: 1.5rem; }
  .stat-grid .stat-icon { display: none !important; }

  /* Wide tables scroll inside their card instead of the page */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table td, .table th { white-space: nowrap; }

  .ipn-footer { padding-bottom: .5rem; }

  /* Bottom tab bar */
  .ipn-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
                background: #fff; border-top: 1px solid rgba(39,34,77,.1); box-shadow: 0 -6px 20px rgba(21,18,43,.08);
                padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); }
  .ipn-tabbar__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .15rem;
                      min-height: 52px; padding: .25rem 0; border: 0; background: none; color: var(--ipn-muted);
                      font-size: .68rem; font-weight: 600; text-decoration: none !important; }
  .ipn-tabbar__item i { font-size: 1.15rem; }
  .ipn-tabbar__item.is-active { color: var(--ipn-indigo); }
  .ipn-tabbar__item.is-active i { color: var(--ipn-turquoise-600); }
  .ipn-tabbar__scan-btn { width: 52px; height: 52px; margin-top: -1.4rem; border-radius: 50%; display: grid; place-items: center;
                          background: var(--ipn-indigo); color: #fff; box-shadow: 0 8px 18px rgba(39,34,77,.35); border: 3px solid #fff; }
  .ipn-tabbar__scan-btn i { color: var(--ipn-turquoise) !important; font-size: 1.3rem; }
  .ipn-tabbar__scan { color: var(--ipn-indigo); }
}