/* ================================
   BASE & GLOBAL
================================ */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* General body base */
body { width:100%; height:100%; }

/* Scrollbar — PUBLIC ONLY */
body:not(.app) * {
    scrollbar-color:#d1d5db #ffffff !important;
    scrollbar-width:thin !important;
}
body *::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:10px; }
body *::-webkit-scrollbar { width:6px; height:6px; }


/* ================================
   PUBLIC SITE (Homepage & Tools)
================================ */

body:not(.app) {
    background:linear-gradient(135deg,#131720 0%,#0b0e14 100%) !important;
}

/* Text on dark */
body:not(.app) h1,
body:not(.app) h2,
body:not(.app) h3,
body:not(.app) p,
body:not(.app) span,
body:not(.app) small,
body:not(.app) li {
    color:#ffffff !important;
}

/* Muted text */
body:not(.app) .text-muted,
body:not(.app) .small {
    color:#cbd5e1 !important;
}

/* Keep cards light */
body:not(.app) .card,
body:not(.app) .card * {
    color:#111 !important;
}

/* Sky-blue cards */
body:not(.app) .card,
body:not(.app) .card-body,
body:not(.app) .card.border-0.shadow-sm {
    background:#E4F1FF !important;
    border-radius:14px !important;
    border:1px solid rgba(0,80,180,.18);
}
body:not(.app) .card:hover {
    background:#D4E9FF !important;
    transform:translateY(-2px);
    transition:.2s ease;
}

body:not(.app) .card-body { padding:14px !important; }
body:not(.app) .mt-5 { margin-top:22px !important; }
body:not(.app) .mb-5 { margin-bottom:22px !important; }

/* Primary buttons (PUBLIC ONLY) */
body:not(.app) .btn-primary {
    font-size:16px !important;
    padding:12px 18px !important;
    font-weight:700;
    border-radius:10px;
    background:#0d6efd !important;
    border-color:#0d6efd !important;
    color:#ffffff !important;
}
body:not(.app) .btn-primary:hover,
body:not(.app) .btn-primary:focus {
    background:#0b5ed7 !important;
    border-color:#0b5ed7 !important;
    color:#ffffff !important;
}

/* Text sizing */
body:not(.app) .card-body small,
body:not(.app) .card-body .small {
    font-size:14px !important;
}

body:not(.app) h1,
body:not(.app) h2,
body:not(.app) h3 {
    margin-bottom:10px !important;
}


/* ================================
   LOGGED-IN DASHBOARD (SAFE / DEFAULT)
================================ */

body.app {
    background:#f7f9fc !important;
}

/* Dashboard cards (clean, neutral) */
body.app .card {
    background:#ffffff !important;
    border-radius:12px !important;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* REAL BOOTSTRAP BUTTON COLORS */
body.app .btn-primary {
    background:#0d6efd !important;
    border-color:#0d6efd !important;
    color:#ffffff !important;
}
body.app .btn-primary:hover,
body.app .btn-primary:focus {
    background:#0b5ed7 !important;
    border-color:#0b5ed7 !important;
}

/* Breadcrumb color */
body.app .breadcrumb,
body.app .breadcrumb * {
    color:#333 !important;
}


/* ================================
   QR TOOL LEFT PANEL (PUBLIC ONLY)
================================ */

body:not(.app) .qr-form-card {
    border-radius:18px !important;
    background:linear-gradient(145deg,#edf4ff,#dfeaff) !important;
    border:1px solid rgba(40,100,200,.25);
    box-shadow:0 18px 40px rgba(20,40,90,.18);
}
body:not(.app) .qr-form-card .card-body {
    padding:16px !important;
}

/* Accordion */
body:not(.app) .qr-accordion-block {
    width:100%;
    background:#eef2ff;
    border-radius:14px;
    padding:10px 14px;
    font-weight:600;
    border:1px solid rgba(120,120,180,.25);
    display:flex;
    align-items:center;
    gap:6px;
}
body:not(.app) .qr-accordion-block:hover {
    background:#e0e7ff;
}

/* Signup CTA */
body:not(.app) .signup-save-bar {
    display:block;
    text-align:center;
    padding:10px;
    border-radius:12px;
    border:2px dashed #2563eb;
    color:#2563eb;
    font-weight:700;
}
body:not(.app) .signup-save-hint {
    display:block;
    text-align:center;
    margin-top:6px;
    opacity:.8;
}

/* Textarea (public tools only) */
body:not(.app) textarea.form-control {
    background:#ffffff;
    border:2px solid #111;
    border-radius:12px;
    transition:.2s ease;
}
body:not(.app) textarea.form-control:hover {
    border-color:#222;
}
body:not(.app) textarea.form-control:focus {
    border-color:#000;
}






/* ============================
   DASHBOARD SAFETY RESET
   (Only affects logged-in area)
============================ */

body.app {
    background: #ffffff !important;
    color: #111 !important;
}

/* Restore sidebar layout */
body.app .app-sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px !important;
    background: #0b2644 !important;
    overflow-y: auto !important;
}

/* Sidebar links */
body.app .app-sidebar a,
body.app .app-sidebar li,
body.app .app-sidebar * {
    color: #ffffff !important;
}

/* Content area shift */
body.app .app-content {
    margin-left: 280px !important;
}

/* Reset buttons in dashboard */
body.app .btn-primary {
    background:#0d6efd !important;
    border-color:#0d6efd !important;
    color:#ffffff !important;
}

body.app .btn-primary:hover {
    background:#0b5ed7 !important;
}





/* — PREMIUM SIDEBAR STYLE — */
body.app .app-sidebar {
    background: linear-gradient(180deg,#07223c,#0e2f55) !important;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 10px 0 35px rgba(0,0,0,.35);
}

/* Sidebar groups */
body.app .app-sidebar-links li {
    margin-bottom: 4px;
}

/* Sidebar links */
body.app .app-sidebar a {
    color:#dbeafe !important;
    font-weight:600;
    border-radius:12px;
    padding:9px 12px;
    display:flex;
    align-items:center;
    gap:8px;
}

/* Icon tone */
body.app .app-sidebar i {
    color:#9cc9ff !important;
    opacity:.9;
}

/* Hover */
body.app .app-sidebar a:hover {
    background:rgba(255,255,255,.14);
    color:#fff !important;
    transform:translateX(3px);
    transition:.18s ease;
}

/* Active item */
body.app .app-sidebar .active > a,
body.app .app-sidebar li.active {
    background:linear-gradient(135deg,#3b82f6,#2563eb) !important;
    color:#fff !important;
    box-shadow:0 6px 18px rgba(37,99,235,.45);
}




/* USER DROPDOWN — CLEAN MATERIAL LOOK */
body.app .dropdown-menu {
    background:#ffffff !important;
    border-radius:14px;
    border:1px solid #e5e7eb;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}

body.app .dropdown-menu a {
    color:#111 !important;
    font-weight:600;
    padding:10px 14px;
    border-radius:10px;
}

/* Icons in dropdown */
body.app .dropdown-menu i {
    color:#2563eb !important;
}

/* Hover / focus */
body.app .dropdown-menu a:hover {
    background:#f3f4f6 !important;
    color:#000 !important;
}




body.app .app-sidebar-title {
    opacity:.85;
    letter-spacing:.35px;
    font-weight:700;
}

body.app .app-sidebar-footer {
    margin-top:10px;
}





/* Premium sidebar glass effect */
body.app .app-sidebar {
    background: radial-gradient(120% 140% at top,#0d315d,#061a2f);
    border-right: 1px solid rgba(255,255,255,.12);
    box-shadow: 18px 0 40px rgba(0,0,0,.28);
}

/* Subtle inner glow */
body.app .app-sidebar::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow: inset 0 0 35px rgba(255,255,255,.04);
}




/* Sidebar link default */
body.app .app-sidebar a {
    color:#dbeafe !important;
    font-weight:600;
    border-radius:12px;
    padding:9px 12px;
    letter-spacing:.2px;
    transition:.18s ease;
}

/* Hover animation */
body.app .app-sidebar a:hover {
    background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
    transform:translateX(4px);
}

/* Active item highlight */
body.app .app-sidebar .active > a {
    background:linear-gradient(135deg,#4f8bff,#2563eb);
    color:#ffffff !important;
    box-shadow:0 10px 22px rgba(37,99,235,.45);
}




body.app .app-sidebar i {
    color:#a8c7ff !important;
    opacity:.9;
    font-size:14px;
}

/* Brighter icon on active */
body.app .active i {
    color:#ffffff !important;
}




/* Dropdown container */
body.app .dropdown-menu {
    border-radius:18px !important;
    padding:6px;
}

/* Spacing between items */
body.app .dropdown-menu a {
    border-radius:12px;
    margin-bottom:4px;
}

/* Divider */
body.app .dropdown-menu .dropdown-divider {
    margin:6px 0;
    opacity:.2;
}



body.app .app-sidebar-footer {
    margin-top:12px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.12);
}



body.app .app-sidebar a {
    color:#cfe2ff !important;
}




/* 🔥 TRUE BLACK TEXT — SIDEBAR DROPDOWN ONLY */
.app-sidebar .dropdown-menu,
.app-sidebar .dropdown-item,
.app-sidebar .dropdown-item *,
.app-sidebar .dropdown-menu * {
    color:#000 !important;
    -webkit-text-fill-color:#000 !important; /* fixes tinted text */
    opacity:1 !important;
    filter:none !important;
}

/* Remove pastel/tint overlay */
.app-sidebar .dropdown-menu {
    background:#ffffff !important;
    backdrop-filter:none !important;
}

/* Disabled links should ALSO be black */
.app-sidebar .dropdown-item.disabled,
.app-sidebar .dropdown-item:disabled {
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    opacity:1 !important;
}

/* Icons black */
.app-sidebar .dropdown-item i {
    color:#000 !important;
}

/* Hover — keep your nice blue pill */
.app-sidebar .dropdown-item:hover {
    background:linear-gradient(135deg,#2563eb,#3b82f6) !important;
    color:#fff !important;
}
.app-sidebar .dropdown-item:hover i,
.app-sidebar .dropdown-item:hover * {
    color:#fff !important;
}






/* Make outline button white */
.btn-outline-secondary {
    border: 1.8px solid #ffffff !important;
    color: #ffffff !important;
}

.btn-outline-secondary i {
    color: #ffffff !important;
}

/* Hover – keep white, add soft glow */
.btn-outline-secondary:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.btn-outline-secondary:hover i {
    color: #ffffff !important;
}






/* Force breadcrumbs in one line */
.custom-breadcrumbs,
.custom-breadcrumbs li {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap !important;
}

/* Remove line breaks & spacing */
.custom-breadcrumbs {
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

/* Hide numbering if any */
.custom-breadcrumbs li::marker {
    display: none !important;
}

/* Arrow spacing fix */
.custom-breadcrumbs > li > svg {
    margin-left: 4px !important;
}

.breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}



/* Make breadcrumbs white */
.breadcrumb,
.breadcrumb * {
    color: #ffffff !important;
}

/* Breadcrumb arrows ( › symbol ) */
.breadcrumb-item + .breadcrumb-item::before {
    color: #ffffff !important;
}

/* Active breadcrumb text */
.breadcrumb-item.active {
    color: #ffffff !important;
}



/* Breadcrumb — force white color */
.breadcrumb,
.breadcrumb * {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* Arrow / divider */
.breadcrumb-item + .breadcrumb-item::before {
    color:#ffffff !important;
}

/* Active page */
.breadcrumb-item.active {
    color:#ffffff !important;
}

/* █████  GLOBAL BREADCRUMBS — ALWAYS WHITE  █████ */

.breadcrumb,
.breadcrumb * {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important; /* fixes tinted text */
}

/* Arrow / divider */
.breadcrumb-item + .breadcrumb-item::before {
    color:#ffffff !important;
}

/* Active breadcrumb */
.breadcrumb-item.active {
    color:#ffffff !important;
}

/* 🔥 FORCE BREADCRUMBS WHITE — ALL PAGES, ALL THEMES */

nav[aria-label="breadcrumb"],
nav[aria-label="breadcrumb"] *,
nav[aria-label="breadcrumb"] a,
nav[aria-label="breadcrumb"] span,
nav[aria-label="breadcrumb"] li,
nav[aria-label="breadcrumb"] .breadcrumb-item {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
}

/* Divider / Arrow */
nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
    color:#ffffff !important;
}

/* Active breadcrumb */
nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    color:#ffffff !important;
}

/* Reset weird tint from theme */
nav[aria-label="breadcrumb"] a,
nav[aria-label="breadcrumb"] span {
    filter:none !important;
}



.dropdown-menu *,
.dropdown-item {
    color:#000 !important;
}


/* 🔥 FIX DASHBOARD OPTION BUTTONS — MAKE THEM WHITE BLOCKS */

body.app .btn,
body.app .btn-block,
body.app .btn-custom,
body.app .btn-outline-secondary {
    background:#ffffff !important;
    color:#111 !important;
    border:2px solid #e5e7eb !important;
    border-radius:12px !important;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
}

/* Icons inside buttons */
body.app .btn i {
    color:#111 !important;
    opacity:1 !important;
}

/* Hover effect */
body.app .btn:hover,
body.app .btn:focus {
    background:#f8fafc !important;
    border-color:#cbd5e1 !important;
    color:#000 !important;
    transform:translateY(-1px);
}

/* Disabled buttons — keep visible */
body.app .btn:disabled,
body.app .btn.disabled {
    background:#ffffff !important;
    color:#666 !important;
    opacity:1 !important;
}


/* 🔳 QR FORM BUTTONS — WHITE CARDS / BLACK BORDER */

.qr-accordion-block,
.qr-accordion-block button,
.qr-accordion-block .btn,
.qr-accordion-block .btn-light {
    background:#ffffff !important;
    color:#111 !important;
    border:2px solid #000000 !important;
    border-radius:12px !important;
    width:100%;
    text-align:center !important;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px !important;
}

/* Icon */
.qr-accordion-block i {
    color:#000 !important;
    opacity:1 !important;
}

/* Hover */
.qr-accordion-block:hover,
.qr-accordion-block button:hover {
    background:#f7f7f7 !important;
    border-color:#000 !important;
    transform:translateY(-1px);
    transition:.15s ease;
}

/* Active / expanded section */
.qr-accordion-block.active,
.qr-accordion-block[aria-expanded="true"] {
    background:#ffffff !important;
    border-color:#000 !important;
}



/* 🔳 QR FORM ACCORDION BUTTON — UNIFORM WHITE STYLE */

button.btn-gray-200,
a.btn-gray-200,
.btn.btn-gray-200 {
    background:#ffffff !important;
    border:2px solid #000000 !important;
    border-radius:12px !important;
    color:#000000 !important;
    font-weight:600 !important;
    text-align:center !important;
    width:100% !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 14px !important;
    box-shadow:none !important;
}

/* Icon color */
button.btn-gray-200 i,
a.btn-gray-200 i,
.btn.btn-gray-200 i {
    color:#000 !important;
}

/* Hover */
button.btn-gray-200:hover,
a.btn-gray-200:hover,
.btn.btn-gray-200:hover {
    background:#f7f7f7 !important;
    border-color:#000 !important;
    transform:translateY(-1px);
}

/* Expanded / active state */
button.btn-gray-200:not(.collapsed) {
    background:#ffffff !important;
    color:#000 !important;
    box-shadow:none !important;
}

/* Make Create QR button visible */
button[name="submit"],
.btn-primary[name="submit"] {
    display:block !important;
    opacity:1 !important;
    color:#ffffff !important;
    background:#2563eb !important;
    border:2px solid #2563eb !important;
    font-weight:700 !important;
    border-radius:12px !important;
    padding:12px 16px !important;
}

/* Hover */
button[name="submit"]:hover {
    background:#1d4ed8 !important;
    border-color:#1d4ed8 !important;
}



/* =========================================
   PERFORMANCE — MINIFY LAYOUT & RENDER CSS
========================================= */

/* Prevent layout shift on images */
img {
    width: 100%;
    height: auto;
    display: block;
}

/* Avoid fonts blocking rendering */
html {
    font-display: swap;
}

/* Reduce animation cost */
* {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Prevent oversized images */
img, video {
    max-width: 100%;
    height: auto;
}

/* Improve card rendering smoothness */
.card, .btn, .qr-form-card {
    will-change: auto;
}