:root{
  /* Brand-aligned lilac/purple theme */
  --accent-color:#c85aa8; /* lighter than #a833a7 */
  --accent-color-2:#ff6c9c; /* lighter than #db3774 */
  --primary-dark:#2a0b30; /* slightly softer */
  --secondary-purple:#f7c2dd; /* lighter */
  --contrast-color:#ffffff;
  --bg-color:#d1b9df; /* very light lilac/purple background */
  --text-color:#f5f7fb; /* brighter for readability on dark */
  --muted-text:#cfc9d6;
  --card-bg:rgba(255,255,255,0.06);
  --border-color:rgba(255,255,255,0.12);
  --card-radius:22px;
  --card-shadow:0 16px 36px rgba(0,0,0,0.28);
  --glass-bg:rgba(26,15,36,0.7);
  --glass-border:rgba(255,255,255,0.14);
  --sunset-gradient:linear-gradient(135deg,#ff6c9c 25%,#ff9fb3 75%);
  --spinning-conic:conic-gradient(from 0deg at 50% 50%,hsl(278,85%,44%) 0deg,hsl(306,80%,48%) 120deg,hsl(330,82%,72%) 240deg,hsl(324,74%,78%) 360deg);
  /* Global glass variables for .bg-white override */
  --glass-white:rgba(255,255,255,0.20);
  --glass-white-border:rgba(255,255,255,0.4);
  --glass-blur:14px;
}

/* Generic responsive helpers */
.container{max-width:1200px;margin:0 auto;padding:0 16px;width:100%;}
img{max-width:100%;height:auto;}
.page-bg, body{background:var(--bg-color)!important;color:var(--text-color);} 
body{margin:0;}
.hidden-sm{display:none;}
@media(min-width:640px){.hidden-sm{display:initial;}}

/* Shared header styles */
.header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;height:64px;backdrop-filter:blur(16px);background:linear-gradient(90deg,rgba(26,15,36,0.9),rgba(44,22,58,0.9));border-bottom:1px solid var(--glass-border);transition:all .3s ease;}
.header.scrolled{background:linear-gradient(90deg,rgba(26,15,36,0.95),rgba(44,22,58,0.95));box-shadow:0 8px 32px rgba(0,0,0,0.3);} 
.header .inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;}
.nav-links{display:none;gap:2rem;flex:1;}
.nav-links a{color:var(--contrast-color);font-weight:500;transition:color .3s;}
.nav-links a:hover{color:var(--secondary-purple);} 
.dropdown{position:relative;display:inline-block;}
.dropdown-menu{display:none;position:absolute;background:rgba(15,7,21,0.95);backdrop-filter:blur(20px);min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,0.3);border-radius:10px;z-index:1001;top:100%;left:0;border:1px solid rgba(249,208,226,0.2);} 
.dropdown-menu a{color:#e8c5d8;padding:12px 16px;text-decoration:none;display:block;transition:background-color .3s ease;}
.dropdown-menu a:hover{background:rgba(249,208,226,0.1);color:#fff;}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block;}
.mobile-toggle{display:block;font-size:1.5rem;color:var(--contrast-color);background:none;border:none;cursor:pointer;padding:.5rem;margin:0;flex-shrink:0;z-index:100;order:2;}
.btn-primary-custom{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0.9rem 1.6rem;border-radius:9999px;overflow:hidden;background:var(--sunset-gradient);color:var(--contrast-color);transition:color .3s;font-size:1rem;font-weight:600;text-align:center;min-width:120px;flex-shrink:0;order:3;}
.btn-primary-custom span{position:relative;z-index:1;}
.btn-primary-custom::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#FF8A9D 0%,#db3774 50%,#F7B2F9 100%);transform:scale(0);transition:transform .3s ease;border-radius:inherit;}
.btn-primary-custom:hover::before{transform:scale(1);} 
.btn-primary-custom:hover{color:var(--contrast-color);} 
#mobile-menu{position:absolute;top:64px;left:0;right:0;background:rgba(15,7,21,0.95);border-top:1px solid var(--glass-border);backdrop-filter:blur(16px);transform:translateY(-100%);opacity:0;transition:transform .3s ease,opacity .3s ease;}
#mobile-menu.mobile-menu-open{transform:translateY(0);opacity:1;}
#mobile-menu nav{display:flex;flex-direction:column;padding:1.5rem;gap:1rem;}
#mobile-menu nav a{color:var(--contrast-color);font-weight:500;}
#mobile-menu nav a:hover{color:var(--secondary-purple);} 
@media(min-width:1024px){.nav-links{display:flex;}.mobile-toggle{display:none;}#mobile-menu{display:none;}}

/* Main content spacing for fixed header */
main{padding-top:72px;}

/* Header user block: prevent overflow on small screens */
#header .user-profile{max-width:40vw;overflow:hidden;white-space:nowrap;}
#header .user-info{min-width:0;}
#header .user-name,#header .user-company{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw;color:var(--contrast-color);} 
#header .logout-btn{border-color:rgba(255,255,255,.35)!important;color:#fff!important;}

/* Ensure bootstrap icons visible on dark header bg */
.header .bi,#mobile-menu .bi,#menuToggle .bi{color:#fff;}
/* Sidebar toggle button in header */
.sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:.75rem;margin-right:auto;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:.35rem .5rem;transition:background .2s,border-color .2s;}
.sidebar-toggle:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);} 
.sidebar-toggle .bi{font-size:1.1rem;color:#fff;}
/* Hide toggle on large screens where sidebar is visible */
@media(min-width:1024px){.sidebar-toggle{display:none;}}

/* Sidebar mobile-open behavior shared */
#sidebar-container.mobile-open,.sidebar-wrapper.mobile-open{transform:translateX(0)!important;}
#sidebar-container{transition:transform .3s ease;}

/* Card/base surfaces */
.glass-card{position:relative;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--card-radius);backdrop-filter:blur(10px);box-shadow:var(--card-shadow);}

/* Light cards on dark background helpers */
/* Keep explicit white cards solid if used */
.card-white, .white-card{color:#111827;background-color:#ffffff;}
/* Turn every Tailwind-like bg-white surface into translucent glass */
.bg-white{
  color:#111827;
  background-color:var(--glass-white) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-white-border) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.bg-white h1,.bg-white h2,.bg-white h3,.bg-white h4,.bg-white h5,.bg-white h6{color:#111827;}
.bg-white p,.bg-white label,.bg-white span,.bg-white li{color:#374151;}
.text-muted{color:var(--muted-text);}

/* Links on dark */
a{color:#eec7e8;}
a:hover{color:#ffd0e2;}

/* Mobile action bar: stack buttons and prevent overflow */
.action-bar{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end;}
.action-bar>button{width:100%;}
@media(min-width:640px){.action-bar>button{width:auto;}}

/* Tighter horizontal padding on small screens for main layouts */
@media(max-width:640px){
  main{padding-left:.5rem !important;padding-right:.5rem !important;}
  .main-content{padding-left:.5rem !important;padding-right:.5rem !important;}
  .container{padding-left:.5rem;padding-right:.5rem;}
}
/* Normalize base text sizing on large screens to avoid oversized UI */
@media(min-width:1024px){
  html{font-size:16px;}
  body{font-size:1rem;}
}
@media(max-width:380px){
  main{padding-left:.375rem !important;padding-right:.375rem !important;}
  .main-content{padding-left:.375rem !important;padding-right:.375rem !important;}
}