*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f4f7fb;color:#1f2937}button,.button{background:#1687ff;border:0;color:#fff;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px}button:hover,.button:hover{filter:brightness(1.06)}button.secondary{background:#eef4fb;color:#24507b;border:1px solid #d5e0ec}button.danger{background:#e5484d}button.success{background:#198754}input,select{background:#fff;border:1px solid #d7dee8;color:#1f2937;border-radius:8px;padding:10px 12px;outline:none}input:focus,select:focus{border-color:#2684ff}.hidden{display:none!important}.login-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eef5ff 0%,#f8fafc 50%,#fff 100%)}.login-card{width:390px;background:#fff;border:1px solid #dfe5ed;border-radius:18px;padding:34px;box-shadow:0 20px 50px rgba(31,41,55,.12)}.login-card h1{font-size:25px;margin:8px 0}.login-card p{color:#98a2b3}.login-card input,.login-card button{width:100%;margin-top:12px}.login-card small{display:block;color:#727d8d;margin-top:16px}.brand,.side-brand{letter-spacing:2px;font-weight:800;color:#1769aa}.app{min-height:100vh;display:flex}.sidebar{width:230px;background:#fff;border-right:1px solid #dfe5ed;padding:18px;display:flex;flex-direction:column;gap:6px}.side-brand{padding:10px 8px 22px}.nav{background:transparent;text-align:left;color:#4b5563;justify-content:flex-start}.nav.active,.nav:hover{background:#eaf2ff;color:#1456a0}.side-bottom{margin-top:auto}.main{flex:1;min-width:0}.topbar{height:70px;border-bottom:1px solid #e5eaf1;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:20px;background:#fff}.topbar .muted{display:block;font-size:12px;color:#6b7280}.search{width:360px}.view{padding:28px}.hero{padding:28px;border-radius:16px;background:linear-gradient(120deg,#121b27,#0f1218);border:1px solid #dfe5ed;color:#fff}.hero h2{margin:0 0 6px}.hero p{color:#aab5c4}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}.card,.panel,.client-info{background:#fff;border:1px solid #dfe5ed;border-radius:14px}.card{padding:20px}.card span{display:block;color:#6b7280}.card b{display:block;font-size:28px;margin-top:8px}.panel{padding:18px}.panel-head{display:flex;justify-content:space-between}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}.file-list .row,.list-row{display:grid;grid-template-columns:minmax(220px,1fr) 120px 150px minmax(180px,220px);gap:12px;padding:13px 8px;border-bottom:1px solid #e5eaf1;align-items:center}.list-row{grid-template-columns:minmax(220px,1fr) 140px minmax(220px,1fr) auto}.row:hover,.list-row:hover{background:#f7faff}.muted{color:#6b7280}.breadcrumbs{color:#6b7280;margin-bottom:10px}.workspace-title{font-size:20px;font-weight:700}.client-info{padding:16px;margin-bottom:16px}.client-info div{display:flex;gap:28px;flex-wrap:wrap}.client-card{background:#fff;border:1px solid #dfe5ed;border-radius:12px;padding:16px;margin-bottom:12px}.client-main{display:flex;justify-content:space-between;gap:20px;align-items:center}.client-stats{display:flex;gap:24px;color:#6b7280}.client-actions{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #eef1f5}.folder-tree{display:flex;flex-direction:column;gap:12px}.fy-block{border:1px solid #e1e7ef;border-radius:10px;background:#f9fbfe;padding:12px}.fy-title{font-weight:700;margin-bottom:9px;color:#174b83}.folder-btn{display:block;width:100%;text-align:left;background:#fff;color:#374151;border:1px solid #e1e7ef;margin-top:7px}.folder-btn:hover{background:#edf5ff}.workspace-grid{display:grid;grid-template-columns:330px 1fr;gap:24px}.folder-current{padding:8px 0 12px;font-weight:600}.notice{background:#eef6ff;border:1px solid #cfe3ff;color:#28527a;border-radius:10px;padding:12px 14px;margin-bottom:16px}.user-table{width:100%;border-collapse:collapse}.user-table th,.user-table td{padding:11px 8px;border-bottom:1px solid #e6ebf1;text-align:left;vertical-align:middle}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#edf4ff;color:#24507b;font-size:12px;font-weight:700}.badge.off{background:#fff1f1;color:#a13b3b}.perm-yes{color:#16834b;font-weight:700}.perm-no{color:#9a3d3d;font-weight:700}.small-actions{display:flex;gap:6px;flex-wrap:wrap}.expiry{font-size:12px;color:#8a5b00}.upload-card{max-width:560px;margin:9vh auto;background:#fff;border:1px solid #dfe5ed;border-radius:18px;padding:35px}.upload-card h1{margin-bottom:5px}.upload-card p{color:#9ba5b5}.upload-card input:not([type=file]){width:100%;margin:12px 0}.drop{padding:35px;border:1px dashed #aab7c8;border-radius:12px;text-align:center;color:#6b7280;margin:14px 0}.drop input{display:block;margin:15px auto}.upload-card button{width:100%}#status{margin-top:15px;color:#198754}@media(max-width:1000px){.workspace-grid{grid-template-columns:1fr}}@media(max-width:850px){.sidebar{width:70px}.side-brand{font-size:0}.nav{font-size:0}.nav:before{content:"•";font-size:18px}.topbar{padding:0 15px}.search{width:180px}.cards{grid-template-columns:1fr}.view{padding:15px}.file-list .row,.list-row{grid-template-columns:1fr}.client-main{display:block}.client-stats{margin-top:10px}}
.workspace-file-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0 14px;border-bottom:1px solid #e5eaf1;margin-bottom:8px}.workspace-file-toolbar>div:first-child{display:flex;flex-direction:column;gap:3px}.toolbar-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.panel-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 14px;margin-bottom:10px;border-bottom:1px solid #e6ebf1}.success-badge{background:#e9f8ef;color:#18794e}.table-wrap{overflow:auto}.user-table{min-width:980px}.small-actions button{padding:8px 10px;font-size:12px}.workspace-file-toolbar .button{white-space:nowrap}.workspace-file-toolbar .muted{font-size:12px}@media(max-width:1000px){.workspace-file-toolbar{align-items:flex-start;flex-direction:column}.toolbar-inline{width:100%}}
.file-link{background:transparent;color:#1456a0;border:0;padding:0;font:inherit;font-weight:700;text-align:left;cursor:pointer}.file-link:hover{text-decoration:underline}.received-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:#dff7e8;color:#137a43;font-size:11px;font-weight:800}.document-received{border-left:5px solid #25a65a;background:#f1fbf5}.file-highlight{outline:3px solid #8bd3a9;background:#ecfff3!important;transition:all .2s}.work-notice{margin:0 0 18px;padding:14px 16px;border:1px solid #cfe8d8;border-radius:12px;background:#effaf3;color:#17633b}.dashboard-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}.hierarchy-chart{display:flex;flex-direction:column;gap:12px}.hierarchy-row{display:flex;flex-direction:column;gap:5px}.hierarchy-label{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#475569}.hierarchy-track{height:10px;background:#eaf0f5;border-radius:999px;overflow:hidden}.hierarchy-bar{height:100%;background:#1687ff;border-radius:999px}.work-card{border-color:#cfe8d8}@media(max-width:1000px){.dashboard-grid{grid-template-columns:1fr}}

/* Client work status + completion celebration */
.client-work-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #eef1f5}.work-status{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.2px}.status-pending{background:#ffe5e5;color:#c62828;border:1px solid #ffb8b8}.status-progress{background:#fff2cf;color:#9a6500;border:1px solid #ffd66b}.status-completed{background:#ddf7e8;color:#14733f;border:1px solid #a9e7c2}.status-none{background:#edf2f7;color:#64748b}.work-status-count{font-size:13px;color:#475569;font-weight:700}.client-card-pending{border-color:#ffb6b6;box-shadow:0 0 0 1px rgba(220,38,38,.05)}.client-card-completed{border-color:#b7e7c9}.client-status-blink{animation:clientPendingPulse 1.35s ease-in-out infinite}.folder-btn{display:flex;justify-content:space-between;align-items:center;gap:10px}.folder-pending{border-color:#ffb8b8!important;box-shadow:0 0 0 1px rgba(220,38,38,.08)}.folder-status-mini{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;white-space:nowrap}.mini-pending{background:#ffe4e4;color:#c62828}.mini-progress{background:#fff1c9;color:#9a6500}.mini-complete{background:#ddf7e8;color:#14733f}.mini-none{background:#edf2f7;color:#64748b}.folder-pending .folder-status-mini{animation:clientPendingPulse 1.35s ease-in-out infinite}.completion-overlay{position:fixed;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:9999;padding:20px}.completion-card{position:relative;width:min(720px,94vw);background:#fff;border:2px solid #b9e8c9;border-radius:24px;box-shadow:0 30px 80px rgba(15,23,42,.3);overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:22px;animation:completionPop .45s ease-out}.completion-card img{width:100%;max-height:390px;object-fit:cover;border-radius:18px;border:1px solid #e2e8f0}.completion-text{text-align:center;padding:20px 12px}.completion-text h2{font-size:38px;color:#16834b;margin:0 0 12px}.completion-text p{font-size:17px;line-height:1.5;color:#334155;margin:7px 0}.excellent-work{display:inline-block;margin-top:18px;padding:12px 20px;border-radius:999px;background:linear-gradient(90deg,#16834b,#22a35e);color:#fff;font-size:22px;font-weight:900;box-shadow:0 10px 25px rgba(22,131,75,.2)}.completion-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;padding:0;background:#fff;color:#334155;border:1px solid #d9e1ea;font-size:20px;z-index:2}.confetti-layer{position:absolute;inset:0;pointer-events:none;color:#f59e0b;font-size:28px;letter-spacing:32px;padding:12px;opacity:.7;animation:confettiFloat 2s ease-in-out infinite}.celebration-open{overflow:hidden}@keyframes clientPendingPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.58;transform:scale(1.025)}}@keyframes completionPop{0%{opacity:0;transform:scale(.86) translateY(15px)}100%{opacity:1;transform:scale(1) translateY(0)}}@keyframes confettiFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(8px) rotate(2deg)}}@media(max-width:760px){.completion-card{grid-template-columns:1fr;max-height:92vh;overflow:auto}.completion-card img{max-height:300px}.completion-text h2{font-size:30px}.folder-btn{align-items:flex-start;flex-direction:column}}

.voice-praise-btn{margin-top:12px;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:700;background:#0b5cff;color:#fff}.voice-note{display:block;margin-top:7px;opacity:.7}.completion-card{max-width:620px}
@media(max-width:800px){.sidebar{width:72px}.sidebar .nav span,.sidebar .brand-text{display:none}.main{margin-left:72px}.dashboard-grid,.stats-grid,.client-grid{grid-template-columns:1fr}.workspace-layout{grid-template-columns:1fr}.document-actions{display:flex;flex-wrap:wrap}.document-card{flex-direction:column}.completion-card{width:92vw}.completion-card img{max-width:75vw}}
.mini-cards{grid-template-columns:repeat(3,minmax(140px,1fr));margin:12px 0 18px}
.completed-card{border-color:#b7e5c4;background:#f1fff4}
.task-card{border:1px solid #e4e9f2;border-radius:14px;padding:16px;margin:12px 0;background:#fff;box-shadow:0 4px 16px rgba(30,50,80,.06)}
.task-pending{animation:taskPulse 1.8s ease-in-out infinite}
.task-head,.task-meta,.task-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.task-meta{margin:10px 0;color:#657084;font-size:13px}
.task-actions select{padding:9px 12px;border:1px solid #ccd5e2;border-radius:9px;background:#fff}
.task-comments{margin-top:12px;padding-top:10px;border-top:1px dashed #dce3ec;font-size:13px;color:#4d5b70}
.task-comments>div{padding:5px 0}
.priority-high{background:#ffe7e7!important;color:#b42318!important}
.live-popup{position:fixed;inset:0;background:rgba(8,20,45,.48);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.live-popup.hidden{display:none}
.live-popup-inner{position:relative;width:min(520px,100%);background:#fff;border-radius:24px;padding:34px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.25);animation:popupIn .35s ease-out}
.live-popup-icon{font-size:64px;margin-bottom:8px}
.live-popup-inner h2{margin:4px 0 10px}
.live-popup-inner p{font-size:18px;line-height:1.55;color:#435067}
.live-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:28px;cursor:pointer}
@keyframes taskPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.08)}50%{box-shadow:0 0 0 8px rgba(245,158,11,.12)}}
@keyframes popupIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:760px){.mini-cards{grid-template-columns:1fr 1fr}.sidebar{width:210px}.main{margin-left:210px}.live-popup-inner{padding:28px 20px}}


/* Admin Team Work Control */
.team-box-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}.team-person-box{display:block;text-align:left;background:#fff;color:#1f2937;border:1px solid #dfe5ed;border-radius:16px;padding:16px;box-shadow:0 5px 18px rgba(30,50,80,.06);transition:transform .15s,box-shadow .15s}.team-person-box:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,50,80,.10)}.team-person-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.team-person-name{font-size:18px;font-weight:800}.team-online{font-size:12px;color:#198754;margin:8px 0}.team-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.team-counts span{background:#f7f9fc;border:1px solid #e7ecf2;border-radius:9px;padding:8px 5px;text-align:center;font-size:11px;color:#687386}.team-counts b{display:block;font-size:17px;color:#1f2937;margin-top:3px}.team-new-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#ffe5e5;color:#b42318;font-size:11px;font-weight:900}.team-no-new{background:#edf4ff;color:#52647b}.team-message-preview{margin-top:9px;padding:9px;background:#fff8e8;border:1px solid #ffe2a8;border-radius:9px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.team-new-message{animation:teamBoxBlink 1.15s ease-in-out infinite;border-color:#ff8b8b;box-shadow:0 0 0 2px rgba(220,38,38,.08)}@keyframes teamBoxBlink{0%,100%{opacity:1}50%{opacity:.65;box-shadow:0 0 0 7px rgba(220,38,38,.10)}}.team-sheet-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}.team-sheet-table{width:100%;border-collapse:collapse;min-width:920px}.team-sheet-table th,.team-sheet-table td{padding:10px 9px;border-bottom:1px solid #e5eaf1;text-align:left;vertical-align:top;font-size:13px}.team-sheet-table th{background:#f6f9fd;position:sticky;top:0;z-index:1}.team-sheet-table tr:hover{background:#f9fbff}.sheet-message{display:inline-block;margin-top:5px;padding:4px 7px;border-radius:6px;background:#fff8e8;color:#7a5600}.progress-badge{background:#fff2cf;color:#9a6500}.team-sheet-table small{color:#667085}.side-brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.team-box-grid{grid-template-columns:1fr}.team-counts{grid-template-columns:repeat(3,1fr)}}


/* Compact desktop dashboard UI */
.view{padding:18px 22px}.topbar{height:58px;padding:0 20px}.hero{padding:18px 22px;border-radius:13px}.hero h2{font-size:22px}.hero p{margin:4px 0;font-size:13px}.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.card{padding:12px 14px;border-radius:11px}.card span{font-size:12px}.card b{font-size:21px;margin-top:3px}.dashboard-grid{grid-template-columns:1fr;gap:12px}.panel{border-radius:11px}.panel-head{padding:11px 14px}.panel-head h3{font-size:15px}.hierarchy-chart{gap:8px;padding:10px 14px 14px}.hierarchy-row{gap:3px}.hierarchy-label{font-size:12px}.hierarchy-track{height:7px}.work-notice{margin:8px 0;padding:9px 12px;font-size:12px}.list-row{display:grid;grid-template-columns:105px 125px 1fr;gap:12px;padding:8px 12px;border-bottom:1px solid #edf1f5;font-size:12px;line-height:1.35;align-items:start}.list-row:last-child{border-bottom:0}.team-box-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.team-person-box{border-radius:12px;padding:11px}.team-person-name{font-size:15px}.team-online{font-size:11px;margin:5px 0}.team-counts{margin:8px 0;gap:4px}.team-counts span{padding:6px 3px;font-size:10px}.team-counts b{font-size:15px}.team-message-preview{margin-top:6px;padding:7px;font-size:11px}.team-new-badge{padding:4px 7px;font-size:10px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.list-row{grid-template-columns:90px 110px 1fr}}
@media(max-width:760px){.view{padding:12px}.cards{grid-template-columns:1fr 1fr}.list-row{grid-template-columns:1fr;gap:3px}.list-row span:nth-child(2),.list-row span:nth-child(3){color:#667085}}


/* CADMS compact front-page layout patch */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  min-height: 100vh;
}
#app, .app, .page, .dashboard-page {
  box-sizing: border-box;
  max-height: 100vh;
}
.logout-btn {
  margin-left: 6px;
  white-space: nowrap;
}
.top-action-btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.1;
}
.main-content, .content, .dashboard-content {
  max-height: calc(100vh - 90px);
  overflow: hidden;
}
.recent-activities, .activity-list, #recentActivity {
  max-height: 30vh;
  overflow-y: auto;
}


/* Good Day devotional header */
.good-day-devotional {
  background: #F47A20;
  color: #fff;
  border-radius: 12px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  box-sizing: border-box;
}
.good-day-title {
  font-weight: 800;
  font-size: 20px;
  white-space: nowrap;
}
.devotional-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.devotional-image {
  width: 88px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: #fff3d6;
  border: 2px solid rgba(255,255,255,.9);
}
.devotional-select {
  height: 30px;
  border: 0;
  border-radius: 7px;
  padding: 0 8px;
  font-size: 12px;
  max-width: 170px;
}
@media (max-width: 800px) {
  .good-day-devotional { min-height: 52px; padding: 5px 8px; }
  .good-day-title { font-size: 17px; }
  .devotional-image { width: 48px; height: 36px; }
  .devotional-select { max-width: 125px; }
}

/* FINAL UI: full saffron Good Day box */
.good-day-devotional{
  background:#F47A20 !important;
  color:#fff !important;
  width:100%;
  min-height:150px;
  box-sizing:border-box;
  border-radius:16px;
  padding:18px 22px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.good-day-devotional .good-day-title,
.good-day-devotional p,
.good-day-devotional .devotional-select{
  color:#fff !important;
}
.good-day-devotional .good-day-title{font-weight:800;font-size:30px;}
.good-day-devotional .devotional-row{display:flex;align-items:center;gap:12px;}
.good-day-devotional .devotional-image{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.8);}
.good-day-devotional .devotional-select{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.75);}
.good-day-devotional .devotional-select option{color:#222;background:#fff;}
.good-day-devotional + p{color:#fff !important;font-weight:600;}
/* Keep the whole hero/card area saffron, including the description */
.hero{background:#F47A20 !important;color:#fff !important;border-radius:18px;padding:0 !important;overflow:hidden;}
.hero > div{width:100%;}
.hero h2{margin:0 !important;}
.hero p{margin:0;padding:0 22px 20px !important;background:#F47A20 !important;}
/* Staff/Manager/Admin logout at top right */
.topbar{position:relative;}
.topbar .top-logout{margin-left:12px;white-space:nowrap;}
.top-logout{background:#F47A20;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer;}
.top-logout:hover{filter:brightness(.95);}
.side-bottom .nav[onclick="logout()"]{display:none !important;}
@media(max-width:900px){
 .good-day-devotional{flex-direction:column;align-items:flex-start;}
 .topbar .top-logout{display:block;}
}


/* User-provided Radha-Krishna devotional photo */
.devotional-image{
  width:96px !important;
  height:76px !important;
  object-fit:cover !important;
  border-radius:10px !important;
  border:2px solid rgba(255,255,255,.95) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
@media(max-width:900px){
  .devotional-image{width:82px !important;height:66px !important;}
}

/* Role label and role-specific sidebar logout */
.side-brand{
  padding-bottom:4px;
  line-height:1.15;
}
.side-role{
  padding:0 8px 18px;
  color:#1769aa;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.staff-logout,.admin-logout{
  background:#F47A20 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.35);
  margin-top:2px;
}
.staff-logout:hover,.admin-logout:hover{
  filter:brightness(.95);
}
.topbar .top-logout,
.top-action-btn.logout-btn{
  display:none !important;
}

/* Remove bottom-left signed-in user detail from sidebar */
.side-bottom{
  display:none !important;
}

/* Sidebar navigation click fix */
.sidebar{
  position:relative;
  z-index:20;
}
.sidebar .nav{
  position:relative;
  z-index:21;
  pointer-events:auto !important;
}
.sidebar .nav.hidden{
  pointer-events:none !important;
}

/* Full-page Lord splash */
.lord-splash{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:opacity .45s ease, visibility .45s ease;
}
.lord-splash img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lord-splash-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding-bottom:7vh;
  background:linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.42));
}
.lord-splash-title{
  color:#fff;
  font-size:clamp(30px,5vw,64px);
  font-weight:900;
  letter-spacing:3px;
  text-shadow:0 3px 12px rgba(0,0,0,.7);
}
.lord-splash-subtitle{
  color:#fff;
  margin-top:6px;
  font-size:clamp(13px,1.6vw,20px);
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}
.lord-enter-btn{
  margin-top:22px;
  border:0;
  border-radius:12px;
  padding:12px 26px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  background:#F47A20;
  color:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.3);
}
.lord-enter-btn:hover{filter:brightness(.94);}
.lord-splash-hide{opacity:0;visibility:hidden;pointer-events:none;}

/* Responsive Lord splash: show the complete photo without cropping */
.lord-splash{
  background:#F47A20 !important;
}
.lord-splash img{
  width:100vw !important;
  height:100vh !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#F47A20 !important;
}

/* On narrow/tall mobile screens, keep the complete image centered. */
@media (max-aspect-ratio: 4/5){
  .lord-splash img{
    width:100vw !important;
    height:100vh !important;
    object-fit:contain !important;
  }
  .lord-splash-overlay{
    padding-bottom:5vh !important;
  }
}

/* =========================================================
   CA OFFICE – Raised Pastel Sidebar Buttons
   Applies to Admin, Manager and Staff portals
   ========================================================= */
.sidebar{
  padding:14px 15px 12px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  border-right:1px solid #e4eaf2 !important;
}

.sidebar .nav{
  width:100% !important;
  min-height:42px !important;
  margin:0 0 7px !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.95) !important;
  font-weight:700 !important;
  text-align:left !important;
  box-shadow:0 4px 10px rgba(31,55,80,.10),
             inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}

.sidebar .nav:hover{
  transform:translateY(-1px) !important;
  filter:brightness(.98) !important;
  box-shadow:0 7px 14px rgba(31,55,80,.15),
             inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.sidebar .nav:active{
  transform:translateY(1px) !important;
  box-shadow:0 2px 5px rgba(31,55,80,.12) !important;
}

.sidebar .nav.active{
  box-shadow:0 6px 14px rgba(31,55,80,.18),
             inset 0 2px 0 rgba(255,255,255,.9) !important;
  outline:2px solid rgba(23,105,170,.12);
}

/* Different light colours for each button */
.sidebar .nav:nth-of-type(1){
  background:#eaf2ff !important;
  color:#1769aa !important;
}
.sidebar .nav:nth-of-type(2){
  background:#e9f8ec !important;
  color:#147a3e !important;
}
.sidebar .nav:nth-of-type(3){
  background:#fff1dc !important;
  color:#a75b00 !important;
}
.sidebar .nav:nth-of-type(4){
  background:#f0e9ff !important;
  color:#6336a8 !important;
}
.sidebar .nav:nth-of-type(5){
  background:#ffe7ef !important;
  color:#c52b58 !important;
}
.sidebar .nav:nth-of-type(6){
  background:#e5f8f7 !important;
  color:#087d7a !important;
}
.sidebar .nav:nth-of-type(7){
  background:#fff4cf !important;
  color:#8a6500 !important;
}
.sidebar .nav:nth-of-type(8){
  background:#eee9ff !important;
  color:#4f3b9b !important;
}
.sidebar .nav:nth-of-type(9){
  background:#e4f6fb !important;
  color:#086783 !important;
}
.sidebar .nav:nth-of-type(10){
  background:#ffe2e2 !important;
  color:#d22b2b !important;
}

/* Logout stays orange and visually prominent */
.sidebar .staff-logout,
.sidebar .admin-logout{
  background:#F47A20 !important;
  color:#fff !important;
  border-color:#ffb46f !important;
  box-shadow:0 5px 12px rgba(244,122,32,.28),
             inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.sidebar .staff-logout:hover,
.sidebar .admin-logout:hover{
  background:#eb6f15 !important;
  filter:none !important;
}

/* Keep hidden role-specific controls from taking space */
.sidebar .nav.hidden{
  display:none !important;
}

/* Small, non-intrusive online-state indicator for the document root */
html[data-cadms-health="database-error"] .sidebar{
  box-shadow:inset -3px 0 0 #f0ad4e;
}
html[data-cadms-health="offline"] .sidebar{
  box-shadow:inset -3px 0 0 #dc3545;
}
/* CADMS MOBILE SIDEBAR FIX - 2026-10-06 */
@media (max-width: 850px) {
  .sidebar { width:205px !important; min-width:205px !important; padding:12px !important; gap:7px !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
  .side-brand { font-size:16px !important; padding:8px 8px 14px !important; white-space:nowrap !important; }
  .nav { font-size:13px !important; line-height:1.2 !important; width:100% !important; min-height:42px !important; padding:10px 12px !important; white-space:normal !important; }
  .nav:before { content:none !important; display:none !important; }
  .side-bottom { margin-top:10px !important; }
  .main { min-width:0 !important; width:calc(100vw - 205px) !important; }
  .topbar { height:auto !important; min-height:60px !important; padding:10px 12px !important; }
  .topbar .search { width:100% !important; max-width:180px !important; }
  .view { padding:12px !important; }
}
@media (max-width:430px) {
  .sidebar { width:175px !important; min-width:175px !important; }
  .main { width:calc(100vw - 175px) !important; }
  .nav { font-size:12px !important; padding:9px 10px !important; }
  .side-brand { font-size:14px !important; }
}

/* ===== CADMS SIDEBAR TEXT VISIBILITY FIX ===== */
.sidebar .nav,
.sidebar .nav a,
.sidebar .nav button,
.sidebar .nav span,
.sidebar .nav div {
  visibility: visible !important;
  opacity: 1 !important;
  color: #1456a0 !important;
  text-indent: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-transform: none !important;
}

.sidebar .nav a,
.sidebar .nav button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 9px 12px !important;
  gap: 8px !important;
  color: #1456a0 !important;
  background: transparent !important;
  text-indent: 0 !important;
}

.sidebar .nav a span,
.sidebar .nav button span {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #1456a0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  text-indent: 0 !important;
}

.sidebar .nav a::before,
.sidebar .nav a::after,
.sidebar .nav button::before,
.sidebar .nav button::after {
  text-indent: 0 !important;
}

.sidebar .nav a:hover,
.sidebar .nav button:hover,
.sidebar .nav a.active,
.sidebar .nav button.active {
  color: #1456a0 !important;
}

.sidebar .nav a *,
.sidebar .nav button * {
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
}


/* =========================================================
   CADMS MOBILE SIDEBAR - FORCE BUTTON TEXT VISIBLE
   ========================================================= */

@media (max-width: 850px) {

  .sidebar {
    width: 205px !important;
    min-width: 205px !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
  }

  .sidebar .nav {
    width: 100% !important;
    overflow: visible !important;
    display: block !important;
  }

  .sidebar .nav a,
  .sidebar .nav button {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;

    align-items: center !important;
    justify-content: flex-start !important;

    padding: 9px 12px !important;
    margin: 3px 0 !important;

    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;

    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;

    color: #1456a0 !important;
    -webkit-text-fill-color: #1456a0 !important;

    text-indent: 0 !important;
    letter-spacing: normal !important;
  }

  .sidebar .nav a span,
  .sidebar .nav button span,
  .sidebar .nav a div,
  .sidebar .nav button div {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;

    color: #1456a0 !important;
    -webkit-text-fill-color: #1456a0 !important;

    text-indent: 0 !important;
    font-size: 13px !important;
  }

  .sidebar .nav a *,
  .sidebar .nav button * {
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  .sidebar .nav a::before,
  .sidebar .nav a::after,
  .sidebar .nav button::before,
  .sidebar .nav button::after {
    visibility: visible !important;
  }

  .sidebar .nav a:not(.hidden),
  .sidebar .nav button:not(.hidden) {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .sidebar .nav span[hidden],
  .sidebar .nav a[hidden],
  .sidebar .nav button[hidden] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

}

@media (max-width: 430px) {

  .sidebar {
    width: 175px !important;
    min-width: 175px !important;
  }

  .sidebar .nav a,
  .sidebar .nav button {
    min-height: 38px !important;
    padding: 8px 9px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .sidebar .nav a span,
  .sidebar .nav button span,
  .sidebar .nav a div,
  .sidebar .nav button div {
    font-size: 12px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

}

/* Prevent mobile sidebar text from becoming invisible */
@media (max-width: 850px) {
  .sidebar .nav {
    color: #1456a0 !important;
    -webkit-text-fill-color: #1456a0 !important;
  }
}


/* ===== MOBILE SIDEBAR NAME VISIBILITY FINAL FIX ===== */
@media (max-width: 850px) {

  .sidebar .nav,
  .sidebar .nav a,
  .sidebar .nav button,
  .sidebar .nav div {
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #1456a0 !important;
    -webkit-text-fill-color: #1456a0 !important;
    text-indent: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .sidebar .nav a span,
  .sidebar .nav button span,
  .sidebar .nav a div,
  .sidebar .nav button div,
  .sidebar .nav span,
  .sidebar .nav label {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #1456a0 !important;
    -webkit-text-fill-color: #1456a0 !important;
    text-indent: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .sidebar .nav a::before,
  .sidebar .nav a::after,
  .sidebar .nav button::before,
  .sidebar .nav button::after {
    display: none !important;
  }

  .sidebar {
    width: 205px !important;
    min-width: 205px !important;
    overflow: visible !important;
  }

  .sidebar .nav a,
  .sidebar .nav button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    margin: 3px 0 !important;
  }
}

/* ===== END MOBILE SIDEBAR NAME VISIBILITY FINAL FIX ===== */

/* =========================================================
   CADMS MOBILE CONTENT OPEN FIX
   2026-10-06
   ========================================================= */

@media (max-width: 850px) {

  /* Main content area */
  .main {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: calc(100% - 205px) !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Every view must be capable of displaying */
  .view {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100px !important;
    overflow: visible !important;
  }

  /* Hidden views remain hidden */
  .view.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* The selected/active view must ALWAYS display */
  .view:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    height: auto !important;
    min-height: 100px !important;
    overflow: visible !important;
  }

  /* Prevent any parent from hiding the opened content */
  .main,
  .main > *,
  .view:not(.hidden) > * {
    visibility: visible !important;
  }

  /* Buttons/links stay clickable */
  .sidebar,
  .sidebar .nav,
  .sidebar .nav a,
  .sidebar .nav button {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
  }

  /* Content must not be covered by another layer */
  .view:not(.hidden) {
    pointer-events: auto !important;
  }

}

/* =========================================================
   END CADMS MOBILE CONTENT OPEN FIX
   ========================================================= */


/* =========================================================
   CADMS ONE-SHOT MOBILE WORKSPACE VISIBILITY HOTFIX
   ========================================================= */

#userBadge{
  display:none !important;
}

.workspace-grid,
#folderTree,
#workspaceFiles,
#workspaceFiles .file-list,
.folder-tree,
.client-list,
.client-card,
.client-main,
.client-stats,
.client-actions{
  min-width:0 !important;
  box-sizing:border-box !important;
}

.client-list,
#folderTree,
#workspaceFiles{
  color:#123f73 !important;
  opacity:1 !important;
  visibility:visible !important;
}

.client-card,
.folder-tree,
.folder-btn,
.workspace-file-card,
.file-card,
.document-card{
  color:#123f73 !important;
  opacity:1 !important;
  visibility:visible !important;
}

.client-card *:not(.muted),
.folder-tree *:not(.muted),
#workspaceFiles *:not(.muted){
  opacity:1 !important;
  visibility:visible !important;
}

@media (max-width:850px){

  .workspace-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
  }

  #folderTree,
  #workspaceFiles{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    min-height:40px !important;
  }

  .client-card{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-height:72px !important;
    overflow:visible !important;
  }

  .client-main,
  .client-stats,
  .client-actions{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  .client-main div,
  .client-main small,
  .client-main span,
  .client-stats span,
  .folder-btn,
  .folder-btn span{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:break-word !important;
  }

  .folder-tree > div,
  .folder-tree button,
  .folder-tree .folder-btn{
    display:block !important;
    visibility:visible !important;
  }

  .folder-tree .folder-btn{
    min-height:44px !important;
    height:auto !important;
    padding:10px 12px !important;
    text-align:left !important;
  }

  .workspace-file-toolbar{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
}

#folderTree ul,
#folderTree ol,
#workspaceFiles ul,
#workspaceFiles ol{
  list-style:none !important;
  padding-left:0 !important;
  margin-left:0 !important;
}

#folderTree li,
#workspaceFiles li{
  list-style:none !important;
}

.workspace-title,
#workspaceTitle,
#workspaceInfo,
#folderTree,
#workspaceFiles{
  font-size:14px !important;
  line-height:1.45 !important;
}


/* =========================================================
   CADMS MOBILE COMPLETE LAYOUT FIX
   ========================================================= */

html{
  min-height:100%;
}

body{
  min-height:100vh !important;
  height:auto !important;
  overflow:auto !important;
  overflow-x:hidden !important;
}

*{
  box-sizing:border-box;
}

@media (max-width:850px){

  html,
  body{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:100vh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /*
    Main application wrapper
  */
  .app,
  .app-shell,
  .layout,
  .shell,
  .container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
  }

  /*
    Sidebar
  */
  .sidebar{
    position:relative !important;
    top:auto !important;
    left:auto !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    max-height:none !important;

    overflow:visible !important;
    overflow-y:visible !important;

    display:flex !important;
    flex-direction:column !important;

    padding-bottom:20px !important;

    flex-shrink:0 !important;
  }

  /*
    Sidebar navigation
  */
  .sidebar nav{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:visible !important;
  }

  .sidebar nav a,
  .sidebar nav button{
    width:100% !important;
    min-height:54px !important;
    height:auto !important;

    display:flex !important;
    align-items:center !important;

    flex-shrink:0 !important;

    position:relative !important;
    z-index:5 !important;
  }

  /*
    Logout must never be clipped
  */
  .sidebar button,
  .sidebar a{
    overflow:visible !important;
  }

  /*
    Main content below sidebar
  */
  main,
  .main,
  .content,
  .app-main,
  .workspace,
  .view-container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:300px !important;

    overflow:visible !important;

    display:block !important;
  }

  /*
    Active application view
  */
  .view{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:300px !important;

    overflow:visible !important;

    box-sizing:border-box !important;
  }

  /*
    IMPORTANT:
    Only views explicitly hidden by application remain hidden.
    Active/current views stay visible.
  */
  .view.active,
  .view.current{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /*
    Workspace
  */
  .workspace-grid{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;
    height:auto !important;

    overflow:visible !important;
  }

  #folderTree,
  #workspaceFiles,
  .folder-tree,
  .file-list{
    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;

    height:auto !important;
    min-height:50px !important;

    overflow:visible !important;

    display:block !important;

    color:#123f73 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /*
    Client cards
  */
  .client-list{
    width:100% !important;
    max-width:100% !important;

    display:block !important;

    overflow:visible !important;
  }

  .client-card{
    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;
    min-height:70px !important;

    display:block !important;

    overflow:visible !important;

    color:#123f73 !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .client-main,
  .client-stats,
  .client-actions{
    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;

    overflow:visible !important;
  }

  /*
    Folder buttons
  */
  .folder-btn,
  .folder-tree button{
    width:100% !important;

    min-height:48px !important;
    height:auto !important;

    display:block !important;

    white-space:normal !important;
    word-break:break-word !important;

    overflow:visible !important;

    text-align:left !important;
  }

  /*
    Remove bullet points
  */
  .folder-tree ul,
  .folder-tree ol,
  #folderTree ul,
  #folderTree ol,
  .file-list ul,
  .file-list ol{
    list-style:none !important;

    padding-left:0 !important;
    margin-left:0 !important;
  }

  .folder-tree li,
  #folderTree li,
  .file-list li,
  #workspaceFiles li{
    list-style:none !important;
  }

  /*
    Information text
  */
  .client-card *,
  #folderTree *,
  #workspaceFiles *{
    visibility:visible;
  }

  .client-card .muted,
  #folderTree .muted,
  #workspaceFiles .muted{
    opacity:1 !important;
  }

  /*
    Tables / panels
  */
  .panel,
  .card,
  .table-wrap,
  .activity-list,
  .recent-activity{
    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;

    overflow-x:auto !important;
    overflow-y:visible !important;
  }

  /*
    Toolbar
  */
  .workspace-file-toolbar,
  .toolbar,
  .actions{
    width:100% !important;

    display:flex !important;
    flex-wrap:wrap !important;

    gap:6px !important;

    overflow:visible !important;
  }

  /*
    Ensure bottom controls remain visible
  */
  .sidebar .logout,
  .sidebar button[onclick*="logout"],
  .sidebar button[id*="logout"],
  .sidebar a[onclick*="logout"]{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    z-index:100 !important;

    margin-bottom:20px !important;
  }

}


/* ============================================================
   CADMS MASTER MOBILE CSS PATCH
   ============================================================ */

/* Always allow page scrolling */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Main application must not lock the viewport */
.app,
#app,
main,
.main,
.content,
.main-content,
.page-content {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Mobile-safe navigation */
@media (max-width: 900px) {

  html,
  body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .app,
  #app {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  main,
  .main,
  .content,
  .main-content,
  .page-content {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Sidebar should never clip its bottom buttons */
  aside,
  .sidebar,
  .side-bar,
  .nav,
  .navigation {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Every panel/content section can expand */
  .panel,
  .card,
  .section,
  .workspace,
  .workspace-panel,
  .page,
  .view {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Keep navigation buttons usable */
  button,
  .btn,
  .nav-btn,
  .sidebar button,
  .sidebar .btn {
    min-height: 46px;
    touch-action: manipulation;
  }

  /* Logout must remain visible */
  button[onclick*="logout"],
  button[onclick*="Logout"],
  .logout,
  .logout-btn,
  #logoutBtn,
  #logoutButton {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
    margin-bottom: 18px !important;
  }

  /* Avoid bottom clipping on mobile Safari */
  .sidebar {
    padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
  }

  body {
    padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
  }

  /* Workspace information must wrap instead of disappearing */
  .workspace-grid,
  .documents,
  .file-list,
  .client-list,
  .activity-list,
  .work-list,
  .folder-tree {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  /* Don't hide dynamically loaded content */
  [hidden] {
    display: none !important;
  }
}

/* ============================================================
   END MASTER MOBILE PATCH
   ============================================================ */


/* ============================================================
   CADMS MOBILE SINGLE SCREEN NAVIGATION
   ============================================================ */

@media (max-width: 900px) {

  /*
     Main mobile rule:
     selected application screen gets the complete content area.
  */

  body.cadms-mobile-single-screen {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  body.cadms-mobile-single-screen .app,
  body.cadms-mobile-single-screen #app {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  body.cadms-mobile-single-screen main,
  body.cadms-mobile-single-screen .main,
  body.cadms-mobile-single-screen .content,
  body.cadms-mobile-single-screen .main-content,
  body.cadms-mobile-single-screen .page-content {
    height: auto !important;
    min-height: calc(100vh - 20px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /*
     Hide mobile sidebar/menu after a section is selected.
     It can be opened again with the mobile menu button.
  */
  body.cadms-mobile-screen-open .sidebar,
  body.cadms-mobile-screen-open aside,
  body.cadms-mobile-screen-open .side-bar {
    display: none !important;
  }

  /*
     Selected content takes the complete mobile width.
  */
  body.cadms-mobile-screen-open .content,
  body.cadms-mobile-screen-open .main-content,
  body.cadms-mobile-screen-open .page-content,
  body.cadms-mobile-screen-open main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /*
     Do NOT clip selected information.
  */
  body.cadms-mobile-screen-open .panel,
  body.cadms-mobile-screen-open .card,
  body.cadms-mobile-screen-open .workspace,
  body.cadms-mobile-screen-open .section,
  body.cadms-mobile-screen-open .view {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /*
     Mobile top navigation
  */
  #cadmsMobileTopBar {
    position: sticky !important;
    top: 0 !important;
    z-index: 99990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    margin: 0 0 10px 0 !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 2px solid #e7b34b !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
  }

  #cadmsMobileTopBar button {
    min-height: 42px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    border: 1px solid #d9d9d9 !important;
    background: white !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
  }

  #cadmsMobileCurrentScreen {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 800 !important;
    color: #174f88 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #cadmsMobileLogout {
    background: #f4a340 !important;
    color: #fff !important;
    border-color: #e49327 !important;
  }

  /*
     Make selected application content scroll naturally.
  */
  #cadmsMobileActiveContent {
    display: block !important;
    width: 100% !important;
    min-height: calc(100vh - 80px) !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 40px !important;
  }
}

/* Desktop: mobile navigation remains invisible */
@media (min-width: 901px) {
  #cadmsMobileTopBar {
    display: none !important;
  }
}

/* ============================================================
   END CADMS MOBILE SINGLE SCREEN NAVIGATION
   ============================================================ */

/* =========================================================
   CADMS MOBILE FINAL RESPONSIVE LAYOUT FIX
   ========================================================= */

@media (max-width: 768px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    min-height: 100vh !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
    max-width: 100%;
  }

  /* Main application must always start from left edge */
  #app,
  #root,
  .app,
  .app-shell,
  .page,
  .container,
  .layout,
  .main-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  /* Remove desktop sidebar reservation on mobile */
  .sidebar,
  aside,
  .side-panel,
  .left-sidebar {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Main content takes complete mobile width */
  main,
  .main,
  .main-content,
  .content,
  .content-area,
  .dashboard,
  .workspace,
  #mainContent {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    transform: none !important;
  }

  /* Prevent old desktop grid/flex widths */
  .app-grid,
  .dashboard-grid,
  .content-grid,
  .workspace-grid,
  .cards-grid,
  .client-grid,
  .folder-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  /* All panels/cards fit viewport */
  .panel,
  .card,
  .client-card,
  .workspace-card,
  .document-card,
  .admin-panel,
  .activity-panel,
  .work-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* CA OFFICE menu */
  .sidebar-header,
  .menu-header,
  .ca-office-menu,
  [class*="menu-header"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Navigation buttons */
  nav,
  .nav,
  .sidebar nav,
  .menu,
  .sidebar-menu {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  nav button,
  .nav button,
  .sidebar button,
  .menu button,
  .sidebar-menu button,
  .sidebar a,
  .nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 14px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    flex-shrink: 1 !important;
  }

  /* Logout must never be clipped */
  button[onclick*="logout"],
  button[id*="logout" i],
  a[id*="logout" i],
  .logout,
  .logout-btn,
  .btn-logout {
    position: relative !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    z-index: 20 !important;
  }

  /* Buttons should show text, not only the bullet/icon */
  button,
  a {
    overflow-wrap: anywhere !important;
  }

  button span,
  a span {
    max-width: 100% !important;
  }

  /* Dashboard header */
  .dashboard-header,
  .page-header,
  .workspace-header,
  .topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Client cards */
  .client-card {
    overflow: visible !important;
    min-height: 0 !important;
  }

  .client-main,
  .client-actions,
  .client-stats,
  .client-status {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .client-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .client-actions button {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Workspace */
  #workspace,
  .workspace,
  .workspace-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  #workspaceInfo,
  .workspace-info,
  #folderTree,
  .folder-tree,
  #workspaceFiles,
  .file-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Folder buttons */
  .folder-btn,
  .folder-tree button,
  #folderTree button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
    text-align: left !important;
    overflow: visible !important;
  }

  /* Documents */
  .document-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    word-break: break-word !important;
  }

  .document-main,
  .document-title,
  .document-location,
  .document-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .document-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .document-actions button {
    flex: 1 1 auto !important;
    min-width: 110px !important;
  }

  /* Activity list */
  .activity-list,
  #activityList,
  .list,
  .list-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .list-row {
    display: block !important;
    padding: 10px !important;
    overflow-wrap: anywhere !important;
  }

  /* Tables: scroll only the table, never whole page */
  .table-wrap,
  .table-container,
  .admin-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    min-width: 650px !important;
    max-width: none !important;
  }

  /* Modal must fit mobile screen */
  .modal-overlay,
  .modal,
  .modal-card,
  .modal-content {
    max-width: 100vw !important;
  }

  .modal-overlay {
    padding: 10px !important;
    overflow-y: auto !important;
  }

  .modal-card,
  .modal-content {
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Inputs */
  input,
  select,
  textarea {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Hide accidental horizontal overflow created by old transforms */
  [style*="translateX"],
  [style*="left:"] {
    max-width: 100vw !important;
  }

  /* IMPORTANT: mobile page itself must scroll */
  body,
  #app {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Safe bottom spacing so Logout is reachable */
  .sidebar,
  .sidebar-menu,
  .main-content,
  main {
    padding-bottom: 20px !important;
  }
}

/* Very small phones */
@media (max-width: 430px) {

  body {
    font-size: 14px !important;
  }

  .main,
  .main-content,
  .content,
  main,
  #mainContent {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .panel,
  .card,
  .client-card,
  .document-card {
    border-radius: 12px !important;
  }

  nav button,
  .nav button,
  .sidebar button,
  .menu button,
  .sidebar a,
  .nav a {
    min-height: 46px !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   CADMS FINAL MOBILE NAVIGATION - CLEAN FIX
   ========================================================= */

@media (max-width: 850px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    display: block !important;
  }

  /* Hide the dynamically-created duplicate mobile menu */
  #cadmsMobileMenu {
    display: none !important;
  }

  /* ===== ORIGINAL SIDEBAR ===== */
  body .sidebar,
  body.cadms-mobile-view-open .sidebar {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    display: block !important;
    flex: none !important;

    margin: 0 !important;
    padding: 8px !important;

    transform: none !important;
  }

  /* Sidebar navigation */
  body .sidebar .nav {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Every navigation button */
  body .sidebar .nav button,
  body .sidebar .nav a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 44px !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    box-sizing: border-box !important;

    padding: 10px 14px !important;
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;

    color: #1456a0 !important;
    background: transparent !important;

    text-indent: 0 !important;
    white-space: normal !important;

    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;

    flex-shrink: 1 !important;
  }

  /* Force actual button text to remain visible */
  body .sidebar .nav button span,
  body .sidebar .nav button *,
  body .sidebar .nav a span,
  body .sidebar .nav a * {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    visibility: visible !important;
    opacity: 1 !important;

    color: inherit !important;
    text-indent: 0 !important;
    overflow: visible !important;
  }

  /* Remove pseudo-element tricks that can replace text */
  body .sidebar .nav button::before,
  body .sidebar .nav button::after,
  body .sidebar .nav a::before,
  body .sidebar .nav a::after {
    content: none !important;
    display: none !important;
  }

  /* ===== MAIN CONTENT ===== */
  body .main,
  body main.main,
  body.cadms-mobile-view-open .main {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 8px !important;

    box-sizing: border-box !important;

    transform: none !important;
    overflow: visible !important;
  }

  body .content,
  body .main-content,
  body .page-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* All visible screens use complete mobile width */
  body main section.view,
  body main section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  /* Cards/panels */
  body .panel,
  body .card,
  body .client-card,
  body .document-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  /* Prevent tables/grids from forcing page width */
  body .workspace-grid,
  body .dashboard-grid,
  body .grid,
  body .toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  /* Long text must wrap */
  body * {
    max-width: 100% !important;
  }

  body input,
  body select,
  body textarea,
  body button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Logout must remain visible */
  body .sidebar .staff-logout,
  body .sidebar .admin-logout,
  body .sidebar #staffLogoutNav,
  body .sidebar #adminLogoutNav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* No horizontal scrolling */
  body .sidebar,
  body .main,
  body .content,
  body .main-content,
  body .page-content {
    overflow-x: hidden !important;
  }
}

/* =========================================================
   CADMS - FINAL MOBILE CLEAN LAYOUT
   ========================================================= */

@media screen and (max-width: 850px) {

  html {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;
  }

  /* Hide old dynamically-created duplicate mobile menu */
  #cadmsMobileMenu {
    display: none !important;
    visibility: hidden !important;
  }

  /* ---------------------------------------------------------
     TOP BAR / HEADER
     --------------------------------------------------------- */

  .topbar,
  header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     SIDEBAR
     --------------------------------------------------------- */

  body > .sidebar,
  body .sidebar {
    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: block !important;

    margin: 0 !important;
    padding: 8px !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    flex: none !important;
    flex-basis: auto !important;

    transform: none !important;
  }

  /* Sidebar navigation itself */
  body .sidebar .nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }

  /* ---------------------------------------------------------
     NAVIGATION BUTTONS - FORCE REAL TEXT
     --------------------------------------------------------- */

  body .sidebar .nav button,
  body .sidebar .nav a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 11px 14px !important;

    box-sizing: border-box !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;

    color: #1456a0 !important;

    text-align: left !important;
    text-indent: 0 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow: visible !important;

    visibility: visible !important;
    opacity: 1 !important;

    flex: 0 1 auto !important;
  }

  /* Force children/text containers visible */
  body .sidebar .nav button *,
  body .sidebar .nav a * {
    font-size: inherit !important;
    line-height: inherit !important;

    color: inherit !important;

    text-indent: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    display: inline !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    overflow: visible !important;
  }

  /* Remove all pseudo text / bullets / icons generated by old CSS */
  body .sidebar .nav button::before,
  body .sidebar .nav button::after,
  body .sidebar .nav a::before,
  body .sidebar .nav a::after {
    content: none !important;
    display: none !important;
  }

  /* ---------------------------------------------------------
     MAIN CONTENT
     --------------------------------------------------------- */

  body > main.main,
  body main.main,
  body .main {
    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 8px !important;

    box-sizing: border-box !important;

    flex: none !important;
    flex-basis: auto !important;

    transform: none !important;

    overflow: visible !important;
  }

  body .content,
  body .main-content,
  body .page-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     ALL VIEWS / PANELS
     --------------------------------------------------------- */

  body main section,
  body main .view,
  body main .panel,
  body main .card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  body .dashboard-grid,
  body .workspace-grid,
  body .grid,
  body .list-row,
  body .toolbar,
  body .cards {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  /* Convert multi-column layouts to one column */
  body .dashboard-grid,
  body .cards {
    grid-template-columns: 1fr !important;
  }

  body .workspace-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---------------------------------------------------------
     TEXT / FORMS
     --------------------------------------------------------- */

  body h1,
  body h2,
  body h3,
  body h4,
  body p,
  body span,
  body div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body input,
  body select,
  body textarea,
  body button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     LOGOUT
     --------------------------------------------------------- */

  body .sidebar .staff-logout,
  body .sidebar .admin-logout,
  body .sidebar #staffLogoutNav,
  body .sidebar #adminLogoutNav {
    display: flex !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    visibility: visible !important;
    opacity: 1 !important;

    font-size: 14px !important;
    text-indent: 0 !important;
  }

  /* ---------------------------------------------------------
     NO HORIZONTAL PAGE SCROLL
     --------------------------------------------------------- */

  body .sidebar,
  body .main,
  body .content,
  body .main-content,
  body .page-content,
  body main {
    overflow-x: hidden !important;
  }

  /* Prevent fixed desktop columns from surviving */
  body > *,
  body > * > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   END FINAL MOBILE CLEAN LAYOUT
   ========================================================= */

/* =========================================================
   CADMS MOBILE - MENU HOME -> DETAIL SCREEN
   ========================================================= */

@media screen and (max-width:850px) {

  /* First screen = navigation menu */
  body.cadms-mobile-menu-home .sidebar,
  body:not(.cadms-mobile-detail-open) .sidebar {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    max-height:none !important;

    overflow:visible !important;

    padding:10px !important;
    margin:0 !important;

    position:relative !important;
    box-sizing:border-box !important;
  }

  /* Menu buttons */
  body.cadms-mobile-menu-home .sidebar .nav,
  body:not(.cadms-mobile-detail-open) .sidebar .nav {
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    gap:8px !important;

    padding:0 !important;
    margin:0 !important;
  }

  body.cadms-mobile-menu-home .sidebar .nav button,
  body:not(.cadms-mobile-detail-open) .sidebar .nav button {
    display:flex !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    min-height:48px !important;

    align-items:center !important;
    justify-content:flex-start !important;

    padding:12px 15px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:600 !important;

    text-indent:0 !important;
    white-space:normal !important;

    visibility:visible !important;
    opacity:1 !important;
  }

  /* Hide detail initially */
  body:not(.cadms-mobile-detail-open) main.main {
    display:none !important;
  }

  body.cadms-mobile-detail-open main.main {
    display:block !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:8px !important;

    box-sizing:border-box !important;
  }

  /* When detail is open, keep navigation available above detail */
  body.cadms-mobile-detail-open .sidebar {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    overflow:visible !important;
  }

  body.cadms-mobile-detail-open .sidebar .nav {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;

    width:100% !important;
    gap:5px !important;
  }

  body.cadms-mobile-detail-open .sidebar .nav button {
    width:auto !important;
    flex:1 1 calc(50% - 5px) !important;

    min-height:42px !important;

    padding:9px 10px !important;

    font-size:12px !important;
  }

  /* Remove unwanted pseudo bullets/icons */
  .sidebar .nav button::before,
  .sidebar .nav button::after,
  .sidebar .nav a::before,
  .sidebar .nav a::after {
    content:none !important;
    display:none !important;
  }

  /* Keep actual button text */
  .sidebar .nav button,
  .sidebar .nav button span,
  .sidebar .nav a {
    color:#1456a0 !important;
    text-indent:0 !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Detail content */
  body.cadms-mobile-detail-open main.main,
  body.cadms-mobile-detail-open main.main section,
  body.cadms-mobile-detail-open main.main .panel,
  body.cadms-mobile-detail-open main.main .card {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;
  }

  body.cadms-mobile-detail-open {
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
}

/* =========================================================
   CADMS MOBILE - FORCE SELECTED VIEW VISIBLE
   ========================================================= */

@media screen and (max-width:850px) {

  body.cadms-mobile-detail-open main.main {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.cadms-mobile-detail-open main.main .view {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Selected view must be visible */
  body.cadms-mobile-detail-open main.main .view.cadms-mobile-selected-view {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* Hide other views */
  body.cadms-mobile-detail-open main.main .view.cadms-mobile-hidden-view {
    display:none !important;
    visibility:hidden !important;
  }
}

/* =========================================================
   CADMS MOBILE - FINAL REAL VIEW DISPLAY
   ========================================================= */

@media screen and (max-width:850px){

  body.cadms-mobile-detail-open main.main{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.cadms-mobile-detail-open main.main > .view{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  body.cadms-mobile-detail-open main.main > .view.cadms-real-mobile-view{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    position:relative !important;
  }

  body.cadms-mobile-detail-open main.main > .view.cadms-real-mobile-hidden{
    display:none !important;
  }

  body.cadms-mobile-detail-open main.main > .view.cadms-real-mobile-view *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* =========================================================
   CADMS MOBILE - FINAL REAL VIEW DISPLAY
   ========================================================= */

@media screen and (max-width:850px){

  body.cadms-mobile-detail-open main.main{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.cadms-mobile-detail-open main.main > .view{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  body.cadms-mobile-detail-open main.main > .view.cadms-real-mobile-view{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    position:relative !important;
  }

  body.cadms-mobile-detail-open main.main > .view.cadms-real-mobile-hidden{
    display:none !important;
  }

  body.cadms-mobile-detail-open main.main > .view.cadms-real-mobile-view *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* =========================================================
   CADMS FINAL MOBILE VIEW - ORIGINAL SHOWVIEW SUPPORT
   ========================================================= */

@media screen and (max-width:850px){

  body main.main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body main.main .view{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /*
   * The currently selected application view.
   * Inline display from JS below has highest practical priority.
   */
  body main.main .view.cadms-final-active-view{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    position:relative !important;
  }

  body main.main .view.cadms-final-hidden-view{
    display:none !important;
    visibility:hidden !important;
  }

}

/* =========================================================
   CADMS FINAL MOBILE BUTTON TEXT VISIBILITY FIX
   ========================================================= */

@media (max-width: 900px) {

  body .sidebar .nav button,
  body .sidebar .nav a,
  body .sidebar button.nav,
  body .sidebar a.nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 10px 14px !important;
    margin: 4px 0 !important;

    box-sizing: border-box !important;

    font-size: 14px !important;
    line-height: 20px !important;
    font-family: inherit !important;
    font-weight: 600 !important;

    color: #243447 !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;

    text-align: left !important;
    white-space: nowrap !important;

    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;

    clip: auto !important;
    clip-path: none !important;

    flex-shrink: 0 !important;
  }

  /* Make actual button text visible */
  body .sidebar .nav button *,
  body .sidebar .nav a *,
  body .sidebar button.nav *,
  body .sidebar a.nav * {
    display: inline !important;

    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;

    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;

    white-space: nowrap !important;
  }

  /* Remove old pseudo-element dots/icons that were hiding the labels */
  body .sidebar .nav button::before,
  body .sidebar .nav button::after,
  body .sidebar .nav a::before,
  body .sidebar .nav a::after {
    content: none !important;
    display: none !important;
  }

  /* Logout remains clearly visible */
  body .sidebar .staff-logout,
  body .sidebar .admin-logout,
  body .sidebar #staffLogoutNav,
  body .sidebar #adminLogoutNav,
  body .sidebar #managerLogoutNav,
  body .sidebar #cadmsSingleLogout {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    font-size: 14px !important;
    color: #ffffff !important;
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

}


/* =========================================================
   CADMS FINAL NAV TEXT VISIBILITY FIX
   ========================================================= */

body .sidebar button.nav,
body .sidebar button.nav *,
body .sidebar .nav,
body .sidebar .nav *,
body .sidebar button[data-view],
body .sidebar button[onclick*="logout"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;

  box-sizing: border-box !important;
  padding: 10px 14px !important;
  margin: 0 0 6px 0 !important;

  font-size: 14px !important;
  line-height: 20px !important;
  font-family: inherit !important;
  font-weight: 600 !important;

  color: #243447 !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;

  white-space: nowrap !important;
  text-align: left !important;

  visibility: visible !important;
  opacity: 1 !important;

  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;

  text-transform: none !important;
}

/* Remove anything generating the dot/icon */
body .sidebar button.nav::before,
body .sidebar button.nav::after,
body .sidebar .nav::before,
body .sidebar .nav::after {
  content: none !important;
  display: none !important;
}

/* Make sure text itself is visible */
body .sidebar button.nav {
  -webkit-text-fill-color: #243447 !important;
}

/* Logout */
body .sidebar button[onclick*="logout"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #e67e22 !important;
}

/* Mobile */
@media (max-width: 768px) {
  body,
  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .app,
  body #app {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body .sidebar button.nav,
  body .sidebar button[data-view],
  body .sidebar button[onclick*="logout"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;

    font-size: 14px !important;
    line-height: 20px !important;
    padding: 10px 14px !important;

    text-indent: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================
   CADMS FINAL NAV TEXT VISIBILITY FIX
   ========================================================= */

body .sidebar button.nav,
body .sidebar button.nav *,
body .sidebar .nav,
body .sidebar .nav *,
body .sidebar button[data-view],
body .sidebar button[onclick*="logout"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;

  box-sizing: border-box !important;
  padding: 10px 14px !important;
  margin: 0 0 6px 0 !important;

  font-size: 14px !important;
  line-height: 20px !important;
  font-family: inherit !important;
  font-weight: 600 !important;

  color: #243447 !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;

  white-space: nowrap !important;
  text-align: left !important;

  visibility: visible !important;
  opacity: 1 !important;

  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;

  text-transform: none !important;
}

/* Remove anything generating the dot/icon */
body .sidebar button.nav::before,
body .sidebar button.nav::after,
body .sidebar .nav::before,
body .sidebar .nav::after {
  content: none !important;
  display: none !important;
}

/* Make sure text itself is visible */
body .sidebar button.nav {
  -webkit-text-fill-color: #243447 !important;
}

/* Logout */
body .sidebar button[onclick*="logout"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #e67e22 !important;
}

/* Mobile */
@media (max-width: 768px) {
  body,
  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .app,
  body #app {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body .sidebar button.nav,
  body .sidebar button[data-view],
  body .sidebar button[onclick*="logout"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;

    font-size: 14px !important;
    line-height: 20px !important;
    padding: 10px 14px !important;

    text-indent: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}