/* Custom app styles to tie Soft UI + Drawer + mobile behavior */
:root{
  --nj-dock-bg: #ffffff;
  --nj-dock-active: #0d6efd;
  --nj-dock-inactive: #6c757d;
  --nj-accent-600: #0b5ed7;
  --nj-accent-400: #3b82f6;
  --nj-dark-bg: #0b1220;
  --nj-dark-surface: #0f1724;
}

html,body{height:100%;overflow-x:hidden}
*::-webkit-scrollbar {
  display:none;
}

.wrapper0{min-height:100vh;overflow-x:hidden;position:relative}

/* make main content scrollable without causing body overflow */
.wrapper0 .main-content{overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}
/* ensure there's room for mobile dock */
.wrapper0 .main-content{padding-bottom:76px}

body.dark-mode{
  background: var(--nj-dark-bg) !important;
  color: #e6eef8;
}
.overflow-y-scroll{
    overflow-y:scroll !important;
    -webkit-overflow-scrolling:touch
}
/* Mobile sidebar slide behavior */
.sidenav{
  transition: left .32s ease, transform .32s ease;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  border-right: 1px solid rgba(15,23,36,0.06);
  z-index: 5000 !important;
}
main {
  width: 100vw;
}
.dockButtons .active {
  color: var(--nj-dock-active) !important;
}
#navbarBlur {
  margin-top: 1em;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  background: linear-gradient(180deg,#ffffff,#f8fafc)
}
@media (min-width:992px) {
  body {
    display: flex;
  }
  aside.sidenav {
    position: relative !important;
  }
}
@media (max-width: 991px){
  #navbarBlur{ 
    margin-top:0px !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow:none;
    background:unset;
  }
  .sidenav{
    position: fixed;
    left: -260px;
    top: 0;
    bottom: 0;
    width: 260px;
    z-index: 2000 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }
  .wrapper.sidenav-open .sidenav{
    left: 0;
  }
  .wrapper .main-content{
    transition: transform .32s ease;
  }
  .wrapper.sidenav-open .main-content{
    transform: translateX(260px);
  }
  /* slide mobile topbar with content when sidenav opens */
  .wrapper.sidenav-open .mobile-topbar{ transform: translateX(260px); }
  .mobile-topbar{ transition: transform .32s ease; }
  /* overlay when sidenav open */
  .wrapper.sidenav-open::after{
    content: '';
    position: fixed;
    inset: 0 0 0 0;
    background: rgba(0,0,0,0.32);
    z-index: 1040;
  }
}

/* Mobile topbar */
.mobile-topbar{height:56px}
.mobile-topbar{position:fixed;top:0;left:0;right:0;z-index:1035}

/* App topbar visible across sizes */
.app-topbar{height:56px;position:fixed;top:0;left:0;right:0;z-index:1035;background:linear-gradient(180deg,#ffffff,#fbfdff);border-bottom:1px solid rgba(15,23,36,0.04)}
.app-topbar .fw-bold{font-weight:700}

/* ensure main content doesn't hide under topbar */
.wrapper .main-content{padding-top:56px}
@media (min-width:992px){
  /* shift topbar right of the sidebar on large screens */
  .app-topbar{left:260px}
}

/* Mobile dock */
.mobile-dock{background:var(--nj-dock-bg);box-shadow:0 -6px 20px rgba(15,23,36,0.06);padding-bottom:6px}
.mobile-dock{height:64px}
.mobile-dock .dock-item{padding:.5rem .6rem;color:var(--nj-dock-inactive);display:flex;flex-direction:column;align-items:center;font-size:.75rem;flex:1;text-decoration:none}
.mobile-dock .dock-item i{display:block;margin-bottom:2px}
.mobile-dock .dock-item.active{color:var(--nj-dock-active);position:relative}
.mobile-dock .dock-item.active::after{content:'';position:absolute;top:-8px;left:35%;width:30%;height:3px;background:var(--nj-dock-active);border-radius:3px}

/* Drawer integration */
.drawer-open .main-content{filter: none}

/* Small cosmetic tweaks */
.navbar-main .mobile-toggler{display:none}
@media (max-width:991px){.navbar-main .mobile-toggler{display:inline-block}}

/* Dark-mode friendly drawer */
body.dark-mode .drawer-content{background:var(--nj-dark-surface);color:#e6eef8}

/* Sidebar link tweaks */
.sidenav .nav-link{padding:.9rem 1rem;border-radius:8px;margin:.15rem 8px;color:#0f1724}
.sidenav .nav-link .icon{width:42px;height:42px}
.sidenav .nav-link.active{background:linear-gradient(90deg,#eef2ff,#fff);box-shadow:0 6px 18px rgba(13,110,253,0.06)}

/* make menu items more spaced */
.sidenav .navbar-nav .nav-item{margin-bottom:6px}

/* Buttons / accents */
.btn-primary{
  background: linear-gradient(90deg,var(--nj-accent-600),var(--nj-accent-400));
  border: none;
}
.btn-primary:focus,.btn-primary:active{box-shadow:0 6px 18px rgba(59,130,246,0.18)}

/* Card accent */
.card .mask.bg-primary{background:linear-gradient(90deg,var(--nj-accent-600),var(--nj-accent-400)) !important}

/* Larger icon helper */
.text-large{font-size:1.35rem !important}



/* Drawer header visual style */
.nj-drawer-header{background:linear-gradient(90deg,var(--nj-accent-600),var(--nj-accent-400));color:#fff;padding:18px;border-radius:12px 12px 0 0;position:relative}
.nj-drawer-header::after{content:'';position:absolute;right:12px;top:8px;width:64px;height:40px;background:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.04), transparent 30%);border-radius:6px;opacity:0.4}

/* Drawer body background to complement header */
.drawer-body{background:linear-gradient(180deg,#fff,#fbfdff)}

/* Notification list styling */
.nj-notification-list{display:flex;flex-direction:column;gap:.5rem}
.nj-not-item{border-radius:8px}
.nj-not-item .ph{font-size:1.15rem}
.nj-not-unread{background:#e8f7ff;border-left:4px solid #bfe7ff}
.nj-not-ellipsis{color:var(--nj-dock-inactive);font-size:1rem}
.nj-not-ellipsis:hover{color:var(--nj-accent-600)}

/* ensure drawer contents don't overflow horizontally */
.drawer-body, .nj-drawer-header{overflow-x:hidden}


/* =========================================
   GLOBAL SLATE DARK MODE
   Trigger: <body class="dark-mode">
   Palette:
     Page bg:   #0f172a  (dark slate)
     Card bg:   #111827  (slightly lighter)
     Input bg:  #020617  (subtle depth)
     Text:      #e5e7eb  (light gray)
     Muted:     #9ca3af
     Accent:    #0ea5e9  (cyan/soft-ui-ish)
   ========================================= */

body.dark-mode {
  background-color: #0f172a !important;
  color: #e5e7eb !important;
}

/* Layout containers */
body.dark-mode .main-content,
body.dark-mode .container,
body.dark-mode .container-fluid {
  background-color: transparent !important;
}

/* ---------- Cards & surfaces ---------- */

body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .dropdown-menu,
body.dark-mode .modal-content,
body.dark-mode .footer {
  background-color: #111827 !important;
  color: #e5e7eb !important;
  border-color: rgba(15, 23, 42, 0.8) !important;
  box-shadow: 0 20px 27px rgba(15, 23, 42, 0.75) !important;
}

/* Transparent / ghost cards */
body.dark-mode .card.bg-transparent {
  background-color: #111827 !important;
}

/* ---------- Sidebar ---------- */

body.dark-mode .sidenav {
  background: #020617 !important;
  border-right: 1px solid rgba(15, 23, 42, 0.9) !important;
  box-shadow: 0 20px 27px rgba(15, 23, 42, 0.85) !important;
}

body.dark-mode .sidenav .nav-link,
body.dark-mode .sidenav .nav-item .nav-link {
  color: #cbd5f5 !important;
}

body.dark-mode .sidenav .nav-link .icon,
body.dark-mode .sidenav .nav-item .nav-link .icon {
  color: #9ca3af !important;
}

body.dark-mode .sidenav .nav-link.active,
body.dark-mode .sidenav .nav-link:hover {
  color: #e5e7eb !important;
}

body.dark-mode .sidenav .nav-link.active .icon,
body.dark-mode .sidenav .nav-link:hover .icon {
  color: #0ea5e9 !important;
}

/* ---------- Top navbar ---------- */

body.dark-mode .navbar-main,
body.dark-mode .navbar.navbar-main {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 27px rgba(15, 23, 42, 0.85) !important;
}

body.dark-mode .navbar-main .nav-link,
body.dark-mode .navbar-main .navbar-brand {
  color: #e5e7eb !important;
}

body.dark-mode .navbar-main .nav-link:hover {
  color: #ffffff !important;
}

/* ---------- Typography ---------- */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .title {
  color: #f9fafb !important;
}

body.dark-mode .text-muted,
body.dark-mode .subtitle,
body.dark-mode small {
  color: #9ca3af !important;
}

/* ---------- Inputs & forms ---------- */

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text,
body.dark-mode textarea.form-control {
  background-color: #020617 !important;
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder,
body.dark-mode textarea.form-control::placeholder {
  color: #6b7280 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 0.1rem rgba(14, 165, 233, 0.45) !important;
}

/* ---------- Tables ---------- */

body.dark-mode .table {
  color: #e5e7eb !important;
  background-color: transparent !important;
}

body.dark-mode .table thead th {
  background-color: #020617 !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

body.dark-mode .table tbody tr {
  background-color: #020617 !important;
}

body.dark-mode .table tbody tr:nth-child(even) {
  background-color: #020617 !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
  border-color: rgba(51, 65, 85, 0.8) !important;
}

/* ---------- Badges / neutral bg helpers ---------- */

body.dark-mode .badge.bg-light,
body.dark-mode .badge.badge-light,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-light {
  background-color: #020617 !important;
  color: #e5e7eb !important;
}

/* Optional scrollbars */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.dark-mode ::-webkit-scrollbar-track {
  background: #020617;
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: #334155;
  border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: #475569;
}

/* =========================================
   DRAWER – SLATE DARK MODE
   ========================================= */

body.dark-mode .drawer-container {
  background: rgba(15, 23, 42, 0.65);
}

/* main drawer surface */
body.dark-mode .drawer-content {
  background-color: #111827;
  box-shadow: 0 20px 27px rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(30, 64, 175, 0.45);
}

/* side drawer variant */
body.dark-mode .drawer-content.side-pull {
  background-color: #111827;
}

/* header / body */
body.dark-mode .drawer-header {
  background-color: #111827;
  border-bottom: 1px solid rgba(30, 64, 175, 0.45);
  color: #e5e7eb;
}

body.dark-mode .drawer-body,
body.dark-mode .drawer-body-full {
  background-color: #111827;
  color: #e5e7eb;
}

/* title + subtitle */
body.dark-mode .drawer-content .title {
  color: #f9fafb;
}
body.dark-mode .drawer-content .subtitle {
  color: #9ca3af;
}

/* handle */
body.dark-mode .drawer-handle {
  background-color: #4b5563;
}

/* internal tabs */
body.dark-mode .qdvTabs {
  background-color: #020617;
  border-bottom: 1px solid rgba(30, 64, 175, 0.45);
}

/* success state text */
body.dark-mode .successDrawerTitle,
body.dark-mode .successDrawerSub {
  color: #22c55e;
}

/* cancel icon */
body.dark-mode #drawer-cancel-button > i {
  color: #9ca3af;
}

/* footer */
body.dark-mode .drawer-footer {
  background-color: #111827;
  border-top: 1px solid rgba(30, 64, 175, 0.45);
}

/* =========================================
   CAMERA / CAPTURE INSIDE DRAWER
   ========================================= */

body.dark-mode .camera-container {
  background: #020617;
}

body.dark-mode .capture-overlay {
  background-color: rgba(15, 23, 42, 0.75);
}

body.dark-mode .capture-area {
  border-color: #f9fafb;
}

body.dark-mode .capture-button {
  outline-color: #22c55e;
}

/* flash overlay */
body.dark-mode .flashable::after {
  background: #f9fafb;
}