/* Base sidebar styles - darker blue glossy gradient as default */
.sidebar {
  width: var(--sidebar-width);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 20%, rgba(0,0,0,0.08) 100%),
    linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 55%, #1e40af 100%) !important;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  box-shadow: none;
  border-right: none !important;
  z-index: 100;
  height: 100vh; /* NORMAL height for web browser */
  overflow: hidden;
  position: fixed;
  top: 0; /* NORMAL position for web browser */
  left: 0;
}

/* Windows PWA specific fix - ONLY APPLIES TO PWA NOT WEB */
@media (display-mode: standalone) {
  .sidebar {
    top: -32px !important; /* ONLY PWA: Force sidebar to start 32px higher */
    height: calc(100vh + 32px) !important; /* ONLY PWA: Extend to cover the gap */
    padding-top: 48px !important; /* ONLY PWA: Push content down below title bar */
  }
}

/* Ensure all text in sidebar is white */
.sidebar *,
.sidebar a,
.sidebar .nav-item {
  color: #ffffff !important;
}

/* Style for sidebar navigation items */
.sidebar .nav-item {
  color: #ffffff !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin: 2px 8px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  font-weight: 500;
}

.sidebar .nav-item i {
  color: inherit !important;
  margin-right: 10px !important;
  width: 20px !important;
  text-align: center !important;
}

.sidebar .nav-item .nav-text {
  color: inherit !important;
}

.sidebar .nav-item:hover {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

.sidebar .nav-item.active {
  background: rgba(255,255,255,0.28) !important;
  border-left: 0 !important;
  color: #ffffff !important;
}

.sidebar .nav-item.active i {
  color: #ffffff !important;
  opacity: 0.9;
}

/* Ensure all links in sidebar are visible */
.sidebar a,
.sidebar a:visited,
.sidebar a:active {
  color: #e2e8f0 !important;
  text-decoration: none !important;
}

.sidebar a:hover {
  color: #ffffff !important;
}
/* Sidebar header styles */
.sidebar-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.25) !important;
  margin-bottom: 12px;
  background: transparent !important;
}

.sidebar-header h1 {
  font-size: var(--title-font-size);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff !important;
  margin: 0;
}

/* Sidebar footer styles */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.25) !important;
  margin-top: auto;
  background: transparent !important;
}

/* Subscription status widget styles */
.subscription-status {
  margin: 8px 0;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.subscription-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.subscription-indicator:hover {
  background: rgba(255,255,255,0.1);
}

.subscription-indicator i {
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.subscription-text {
  flex: 1;
  font-weight: 500;
}

.subscription-details {
  margin-top: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  font-size: 11px;
}

.trial-countdown {
  color: #fbbf24;
  margin-bottom: 6px;
  font-weight: 500;
}

.btn-small {
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
  border-radius: 3px;
}

/* Subscription status badges */
.status-trial {
  color: #10b981;
}

.status-active {
  color: #22c55e;
}

.status-expired {
  color: #ef4444;
}

.status-suspended {
  color: #f59e0b;
}

.subscription-status .badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 4px;
}

.subscription-status .badge.trial {
  background: #10b981;
  color: white;
}

.subscription-status .badge.active {
  background: #22c55e;
  color: white;
}

.subscription-status .badge.expired {
  background: #ef4444;
  color: white;
}

.subscription-status .badge.suspended {
  background: #f59e0b;
  color: white;
}

.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
border:none !important;
border-top:none !important;
border-bottom:none !important;
}
.section-title{
font-size:var(--title-font-size);
color:var(--text-color);
font-weight:600;
text-decoration:none !important;
border:none !important;
border-bottom:none !important;
}
.multi-field-container{
border:1px solid var(--border-color);
border-radius:8px;
padding:15px;
margin-bottom:15px;
background:var(--secondary-bg);
}
.results-container{
background:transparent !important;
border:none !important;
border-radius:10px;
overflow:visible;
box-shadow:none !important;
}

/* ONLY style the User Management results container */
#users .results-container {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
padding: 20px !important;
min-height: 300px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
box-shadow: none !important;
}

#users .form-container {
background: #f7fafc !important;
border: 1px solid #cbd5e1 !important;
padding: 16px !important;
margin-bottom: 16px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

#users .list-entry {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
padding: 12px !important;
margin: 8px 0 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}

#users h4,
#users label,
#users .title,
#users .meta {
color: #1a202c !important;
visibility: visible !important;
opacity: 1 !important;
}

#users input,
#users select,
#users button {
visibility: visible !important;
opacity: 1 !important;
}

#users .btn {
background: #4299e1 !important;
color: white !important;
border: 1px solid #3182ce !important;
padding: 8px 16px !important;
}

#users .btn-secondary {
background: #718096 !important;
color: white !important;
border: 1px solid #4a5568 !important;
}
.free-text-section{
background:var(--secondary-bg);
border:1px solid var(--border-color);
border-radius:8px;
overflow:hidden;
min-height:320px;
display:flex;
flex-direction:column;
}

/* Base card container used in many sections */
.form-container{
background: var(--secondary-bg);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 12px;
}
.form-container h4{
color: var(--text-color);
}

/* Generic list entry styling so items are visible */
.list-entry{
display:block;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 8px;
padding: 10px 12px;
margin: 8px 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.list-entry .title{
color: var(--text-color);
font-weight: 600;
}
.list-entry .meta{
color: var(--secondary);
font-size: 12px;
}

/* Semi-transparent background for search results container */
.search-results-count {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Sort container with semi-transparent background */
.sort-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Results container wrapper */
#candidatesResultsContainer,
#clientsResultsContainer,
#companiesResultsContainer,
#placementsResultsContainer,
#invoicesResultsContainer,
#groupPlacementsResultsContainer {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 12px;
padding: 16px;
margin-top: 10px;
}

/* Save search button area */
.save-search-container,
.search-toolbar {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 12px;
border-radius: 8px;
margin-bottom: 10px;
box-shadow: none !important;
}
.free-text-header{
background:var(--primary-bg);
padding:12px 16px;
border-bottom:1px solid var(--border-color);
display:flex;
justify-content:space-between;
align-items:center;
}
.free-text-header h3,.notes-section-header h3{
margin:0;
font-size:var(--small-font-size);
font-weight:600;
color:var(--text-color);
text-transform:uppercase;
letter-spacing:0.5px;
}
.info-section:nth-child(even){
background:var(--secondary-bg);
}
.notes-section-header i,
.free-text-section-header i{
color:var(--primary-accent);
}
.notes-list-container{
max-height:400px;
overflow-y:auto;
padding:16px 0;
}
.note-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}
.add-note-section{
padding:24px;
border-top:1px solid var(--border-color);
background:var(--primary-bg);
}
.free-text-content{
padding:24px;
min-height:120px;
}
#profileFreeTextSection .free-text-header{
display:flex;
align-items:center;
justify-content:space-between;
}
#profileFreeTextSection .free-text-content{
min-height:560px;
max-height:none;
overflow-y:auto;
transition:max-height 0.25s ease;
}
.notes-section-header{
background:var(--primary-bg);
padding:12px 20px;
border-bottom:1px solid var(--border-color);
display:flex;
justify-content:space-between;
align-items:center;
}
.notes-list-container{
padding:16px 20px;
}
#profileNotesSection{
width:100%;
padding:0 20px 20px;
box-sizing:border-box;
}
#profileNotesSection .notes-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;

padding:0 20px;
}
#profileNotesSection .notes-count{font-weight:600;color:var(--secondary);margin-left:6px;}
#profileNotesSection .notes-list{
display:flex;
flex-direction:column;
gap:10px;
}
#profileNotesSection .notes-hint{color:var(--secondary);font-size:12px;margin:4px 0 8px;}
#profileNotesSection .note-item{
border:1px solid var(--border-color);
border-radius:6px;
padding:10px 12px;
background:var(--secondary-bg);
}
#profileNotesSection .note-meta{
font-size:12px;
color:var(--secondary);
margin-bottom:6px;
}
#profileNotesSection .note-content{
white-space:pre-wrap;
word-break:break-word;
overflow-wrap:anywhere;
}

/* ═══════════════════════════════════════════════════════════════════
   ABSORBED FROM utilities.css — global resets + structural helpers
   ═══════════════════════════════════════════════════════════════════ */
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 font-family:'Inter',sans-serif;
 font-size:var(--base-font-size);
}
@media (min-width:1025px) and (display-mode:standalone){
  #mainAppContainer{padding-top:0;}
  .main-content{padding-top:0;}
  .sidebar{top:0;height:100vh;}
}
body{
 color:#333;
 display:flex;
 min-height:100vh;
 overflow:visible;
}
html{
 overflow-x:hidden;
 overflow-y:auto;
 height:auto;
 scrollbar-width:thin;
 scrollbar-color:rgba(0,0,0,0.2) transparent;
}
.nav-links{
 flex:1;
 overflow:auto;
 scrollbar-width:thin;
 scrollbar-color:rgba(255,255,255,0.3) transparent;
}
.nav-links::-webkit-scrollbar{width:5px;}
.nav-links::-webkit-scrollbar-track{background:transparent;}
.nav-links::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:3px;}
.nav-links::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}
.nav-item{
 padding:10px 16px;
 display:flex;
 align-items:center;
 gap:12px;
 color:rgba(255,255,255,0.7);
 text-decoration:none;
 transition:all 0.2s;
 font-weight:500;
 border-left:3px solid transparent;
}
.nav-item:hover,.nav-item.active{
 background:rgba(255,255,255,0.05);
 color:white;
 border-left:3px solid var(--primary);
}
.nav-item i{width:24px;text-align:center;}
.current-user{display:flex;align-items:center;gap:10px;margin-bottom:15px;}
.user-info .name{font-weight:500;}
.user-info .role{font-size:0.8rem;opacity:0.8;}
#mainAppContainer{
 width:100%;
 flex:1;
 min-width:0;
 display:flex;
}
.main-content{
 flex:1;
 display:flex;
 flex-direction:column;
 overflow:hidden;
 margin-left:var(--sidebar-width);
 width:calc(100% - var(--sidebar-width));
 height:100vh;
 padding-top:0;
}
.top-bar{
 background:white;
 padding:15px 30px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 box-shadow:0 2px 4px rgba(0,0,0,0.05);
 z-index:10;
 position:sticky;
 top:0;
}
.content-area{
 flex:1;
 min-height:0;
 overflow-y:auto;
 overflow-x:hidden;
 display:flex;
 flex-direction:column;
 padding:30px 0 30px 30px;
}
.content-area > .section{padding-right:30px;}
.dashboard-stats{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:24px;
 margin-bottom:40px;
 padding:4px 0;
}
.multi-field-item{display:flex;gap:10px;margin-bottom:10px;align-items:center;position:relative;}
.tcol-sticky{position:sticky;left:0;background:#fff;z-index:3;min-width:180px;}
.tcol-sticky-1{left:0;min-width:160px;max-width:220px;}
.tcol-sticky-2{left:160px;min-width:220px;max-width:320px;}
.tcol-amt{text-align:right;min-width:120px;}
.tcol-month{text-align:center;font-weight:600;color:#fff;background:var(--dark);border-left:1px solid rgba(255,255,255,0.1);}
.overdue{color:#c0392b;font-weight:600;}
.empty-msg{padding:8px 0;color:var(--secondary);}
.quick-action-icon:hover{background:#f8f9fa;border-color:#adb5bd;transform:translateY(-1px);}
.events-list{max-height:300px;overflow-y:auto;}
.event-item{padding:12px 16px;border-bottom:1px solid #f8f9fa;display:flex;align-items:center;gap:12px;}
.event-item.urgent{background:#fff5f5;border-left:3px solid var(--danger);}
.event-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--small-font-size);}
.event-title{font-size:var(--base-font-size);font-weight:500;color:var(--dark);margin-bottom:2px;}
.no-events{padding:20px 16px;text-align:center;color:var(--secondary);font-size:var(--base-font-size);font-style:italic;}
.login-box{background:white;padding:30px;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.3);width:100%;max-width:400px;}
.login-box h2{text-align:center;margin-bottom:20px;color:var(--dark);}
.free-text-content{flex:1;padding:16px;display:flex;flex-direction:column;}
.free-text-editor{flex:1;width:100%;border:1px solid #dee2e6;border-radius:4px;padding:12px;font-size:var(--base-font-size);font-family:inherit;resize:none;outline:none;}
.info-row .value{font-size:0.95rem;color:#1e293b;font-weight:500;line-height:1.4;}
.info-row .value.clickable{color:#3b82f6;cursor:pointer;transition:color 0.2s ease;}
.info-row .value.clickable:hover{color:#1d4ed8;text-decoration:underline;}
.info-row.address-row .value{line-height:1.5;}
.note-author{display:flex;align-items:center;gap:12px;}
.note-time{font-size:0.75rem;color:#64748b;}
.free-text-display{flex:1;font-size:0.9rem;color:#475569;line-height:1.6;white-space:pre-wrap;}
.compliance-document:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.notes-count{background:rgba(59,130,246,0.1);padding:4px 10px;border-radius:12px;font-size:var(--small-font-size);color:var(--secondary);font-weight:normal;}
.notes-list{display:flex;flex-direction:column;gap:16px;}
.note-item{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:12px;transition:background-color 0.2s ease;}
.author-name{font-size:var(--base-font-size);font-weight:500;color:var(--dark);}
.note-content{font-size:var(--base-font-size);color:var(--dark);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.no-notes{padding:40px 20px;text-align:center;color:var(--secondary);font-style:italic;font-size:var(--base-font-size);}
.comment-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
@media (max-width:1024px){
 .profile-layout-modern{flex-direction:column;}
 .profile-sidebar-area{width:100%;order:-1;}
 .profile-body{flex-direction:column;}
 #profileFreeTextSection .free-text-content{min-height:320px;}
}