/* MediaNet overlay for AdminLTE 4 — coral accent, dark sidebar, RTL, theme sync.
   Loaded LAST so it wins over Bootstrap/AdminLTE/app.css where needed. */

/* ---- Bootstrap primary → MediaNet coral (or the chosen accent) ---- */
:root { --bs-primary: var(--mn-primary); --bs-primary-rgb: 232, 80, 59; --bs-link-color: var(--mn-primary); --bs-link-hover-color: var(--mn-primary-600); }
html[data-accent] { --bs-primary: var(--petrol); }
.btn-primary, .bg-primary { background-color: var(--mn-primary) !important; border-color: var(--mn-primary) !important; }
.text-primary { color: var(--mn-primary) !important; }
a { color: var(--mn-primary); }

/* ---- Content area = MediaNet paper/theme background ---- */
body.app-body { background: var(--mn-bg) !important; }
.app-main, .app-content { background: var(--mn-bg); }
.app-content { padding-block: 1.25rem; }

/* ---- Navbar (top) ---- */
.app-header.navbar { background: var(--mn-surface) !important; border-block-end: 1px solid var(--mn-border); min-height: 56px; }
.app-header .navbar-nav .nav-link { color: var(--mn-text); }
.navbar-toggler-icon-svg { font-size: 20px; line-height: 1; }
.topbar-actions { gap: .5rem; }
.topbar-actions .nav-item { display: flex; align-items: center; }

/* ---- Sidebar (dark) ---- */
.app-sidebar { background: #26241f; --mn-sidebar-w: 250px; }
html[data-theme="dark"] .app-sidebar { background: #1b1a17; }
.app-sidebar .sidebar-brand { border-block-end: 1px solid rgba(255,255,255,.08); padding: 12px 14px; }
.sidebar-brand .brand-link { display: flex; align-items: center; gap: 10px; color: #fff; }
.sidebar-brand .logo-svg svg { height: 24px; fill: #fff; color: #fff; }
.sidebar-brand .brand-text { font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.72); }
.sidebar-brand .app-ver { opacity: .6; font-size: 10px; }

.app-sidebar .sidebar-menu .nav-link {
  color: rgba(255,255,255,.78); border-radius: 8px; margin: 2px 8px; padding: 9px 12px;
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500;
}
.app-sidebar .sidebar-menu .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-sidebar .sidebar-menu .nav-link.active {
  background: var(--mn-primary); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.app-sidebar .sidebar-menu .nav-icon.ic { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: inherit; }
.app-sidebar .sidebar-menu .nav-link p { margin: 0; }
.app-sidebar .nav-header { color: rgba(255,255,255,.4); text-transform: uppercase; font-size: 10.5px; letter-spacing: .08em; font-weight: 600; padding: 14px 18px 6px; }

/* theme switcher pinned to the bottom of the sidebar */
.app-sidebar .themebar { margin-top: auto; border-block-start: 1px solid rgba(255,255,255,.08); padding: 12px 14px; }
.app-sidebar .themebar h5 { color: rgba(255,255,255,.45); }
.app-sidebar .sidebar-wrapper { display: flex; flex-direction: column; min-height: calc(100% - 60px); }
.app-sidebar .sidebar-wrapper > nav { flex: 0 0 auto; }

/* ---- Footer ---- */
.app-footer { background: var(--mn-surface); border-block-start: 1px solid var(--mn-border); color: var(--mn-muted); font-size: 12.5px; }

/* ---- Keep content cards on the MediaNet look (over Bootstrap .card) ---- */
.app-content .card { background: var(--mn-surface); border: 1px solid var(--mn-border); border-radius: var(--mn-radius); box-shadow: var(--mn-shadow); padding: 1.1rem 1.25rem; }

/* ---- RTL: AdminLTE + Bootstrap RTL handle most; nudge the sidebar shadow side ---- */
[dir="rtl"] .app-sidebar { box-shadow: -2px 0 8px rgba(0,0,0,.06); }

/* ---- Overlay layering ----
   The app's custom overlays use their own classes; Bootstrap/AdminLTE add a
   conflicting .modal (display:none) and a high-z navbar/sidebar (~1000+), which
   hid the advertiser card modal and pushed the Bipi tour behind the shell.
   Force the app overlays visible and above the AdminLTE layer. */
.modal-backdrop { z-index: 1080 !important; }
.modal-backdrop .modal { display: block !important; }   /* beat Bootstrap .modal{display:none} */
.drawer-backdrop { z-index: 1080 !important; }
.drawer { z-index: 1085 !important; }
.bulkbar { z-index: 1075 !important; }
.search-results { z-index: 1090 !important; }
#notif-drop { z-index: 1090 !important; }
.toasts { z-index: 1200 !important; }

/* Bipi guided tour — lift above the AdminLTE navbar/sidebar */
.mnt-scrim { z-index: 1150 !important; }
.mnt-pulse { z-index: 1160 !important; }
.mnt-tip { z-index: 1170 !important; }
.mnt-fab { z-index: 1140 !important; }

/* ---- Auth / login page (AdminLTE login-box) ---- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; }
.login-page .login-box { width: 400px; max-width: 94vw; }
.login-page .auth-langs { position: fixed; inset-block-start: 16px; inset-inline-end: 16px; z-index: 10; }
.login-box .auth-logo { display: inline-block; }
.login-box .auth-logo .logo-svg svg { height: 30px; fill: var(--mn-text); color: var(--mn-text); }
.login-box .card-header .logo-sub { color: var(--mn-muted); font-size: 12px; letter-spacing: .04em; }
.login-box .card.card-primary.card-outline { border-top: 3px solid var(--mn-primary); }
.login-box .login-box-msg { color: var(--mn-muted); text-align: center; padding: .25rem 0 1rem; }
.login-box .input-group-text { background: var(--mn-surface-2); }
/* coral submit button on the login form */
.login-box .btn-primary { background: var(--mn-primary); border-color: var(--mn-primary); color: #fff; }
.login-box .btn-primary:hover { background: var(--mn-primary-600); border-color: var(--mn-primary-600); }