*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 font-family:'Inter',sans-serif;
 font-size:var(--base-font-size);
}

/* Desktop app (installed PWA) precise offset without touching mobile */
@media (min-width: 1025px) and (display-mode: standalone) {
  #mainAppContainer { padding-top: 0; } /* Remove padding */
  .main-content { padding-top: 0; }
  .sidebar { top: 0; height: 100vh; } /* Start at top, full height */
}
body{
 background-color:#f5f7fb;
 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 must fill the full viewport width regardless of its
 * children's intrinsic content size.  Without this, body { display:flex }
 * lets #mainAppContainer shrink-wrap its content — making Clients (0 results)
 * render narrow while Candidates (38 results with fr-unit grids) happens to
 * force width.  width:100% + flex:1 + min-width:0 break the circular
 * dependency and guarantee full-viewport layout at all times. */
#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; /* Remove titlebar padding */
}
.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;
}
/* Push content away from the viewport right edge */
.content-area > .section {
 padding-right:30px;
}
.dashboard-stats{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:26px !important;
 margin-bottom:40px;
 padding:4px 0 4px 0;
}
.multi-field-item{
 display:flex;
 gap:10px;
 margin-bottom:10px;
 align-items:center;
 position:relative;
}
.list-entry{
 padding:15px;
 border-bottom:1px solid var(--border);
 transition:all 0.2s ease;
 cursor:pointer;
}
.list-entry:hover{
 background:rgba(255, 255, 255, 1);
 transform: translateY(-1px);
 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.list-entry .title{font-weight:500;margin-bottom:5px;color:var(--dark);font-size:var(--base-font-size);}
.list-entry .meta{font-size:var(--small-font-size);color:var(--secondary);display:flex;gap:15px;flex-wrap:wrap;}
.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);}
.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;
}
.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;
}
@media (max-width:1024px){
 .profile-layout-modern{
 flex-direction:column;
}
 
 .profile-sidebar-area{
 width:100%;
 order:-1;
}
}
.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);
}
@media (max-width:1024px){
 .profile-body{
 flex-direction:column;
}
}

@media (max-width:1024px){
 #profileFreeTextSection .free-text-content{min-height:320px;}
}
.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;
}
.notes-expanded-mode{
 position:fixed !important;
 top:0 !important;
 left:0 !important;
 width:100% !important;
 height:100% !important;
 z-index:10000 !important;
 margin:0 !important;
 border-radius:0 !important;
 background:white !important;
}