/* =========================================================
   PROXIMO LEGAL — Luxury Unified UI
   Single global stylesheet for all pages
   ========================================================= */
:root{
  --bg:#f4f8ff;
  --bg-soft:#f8fbff;
  --surface:#ffffff;
  --surface-2:#eef6ff;
  --ink:#102033;
  --muted:#617086;
  --line:rgba(24,76,137,.14);
  --gold:#1d6fd0;
  --gold-2:#7db8ff;
  --gold-soft:rgba(29,111,208,.11);
  --green:#0b4f8a;
  --green-2:#1976d2;
  --danger:#b42318;
  --danger-soft:#fff0ed;
  --success:#147a50;
  --warning:#a16207;
  --radius-sm:14px;
  --radius:22px;
  --radius-lg:32px;
  --shadow:0 22px 60px rgba(23,32,27,.10);
  --shadow-soft:0 12px 32px rgba(23,32,27,.07);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(125,184,255,.24),transparent 36%),linear-gradient(135deg,#f5f9ff 0%,#ffffff 46%,#eaf3ff 100%);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(29,111,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,111,208,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 70%);z-index:-1}
button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.hidden{display:none!important}.muted,.hint{color:var(--muted)}.section-eyebrow{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-bottom:12px;padding:8px 12px;border-radius:999px;background:var(--gold-soft);color:#0b4f8a;border:1px solid rgba(29,111,208,.18);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}.app-shell{width:min(1500px,calc(100% - 36px));margin:18px auto 50px}.topbar{position:sticky;top:14px;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;margin-bottom:24px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-soft);backdrop-filter:blur(18px)}.topbar-left,.topbar-actions,.card-header,.page-header,.form-row,.action-row,.folders-header-actions{display:flex;align-items:center;gap:14px}.topbar-left{min-width:0}.logo{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border-radius:18px;background:linear-gradient(135deg,var(--green),#0f211b);color:#f4d48d;font-weight:950;letter-spacing:-.04em;box-shadow:0 13px 30px rgba(23,61,50,.22)}.topbar h2{margin:0;font-size:16px;font-weight:900;letter-spacing:-.02em}.topbar p{margin:2px 0 0;color:var(--muted);font-size:12px;font-weight:750}.topbar-actions{justify-content:flex-end;flex-wrap:wrap}.avatar{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);font-weight:950;color:var(--green)}.page-header{align-items:flex-end;justify-content:space-between;padding:32px;margin-bottom:18px;border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(238,246,255,.82));border:1px solid var(--line);box-shadow:var(--shadow-soft)}.page-header h1{margin:0;font-size:38px;line-height:1.05;font-weight:950;letter-spacing:-.055em}.page-header p{max-width:740px;margin:10px 0 0;color:var(--muted);font-weight:650}.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.metric-card,.card{background:rgba(255,255,255,.86);border:1px solid var(--line);box-shadow:var(--shadow-soft);backdrop-filter:blur(14px)}.metric-card{padding:22px;border-radius:26px}.metric-card span{display:block;color:var(--muted);font-weight:850;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.metric-card strong{display:block;margin-top:8px;font-size:34px;line-height:1;font-weight:950;color:var(--green)}.card{border-radius:30px;overflow:hidden}.card-header{justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(238,246,255,.75),rgba(255,255,255,.70))}.card-header h3{margin:0;font-size:18px;font-weight:950;letter-spacing:-.025em}.grid,.folder-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:22px}.folder-list.list-view{display:flex;flex-direction:column}.folder-card,.operation-card,.model-card{position:relative;padding:20px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f7fbff);border-radius:24px;box-shadow:0 12px 28px rgba(23,32,27,.055);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.folder-card:hover,.operation-card:hover,.model-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(23,32,27,.10);border-color:rgba(29,111,208,.32)}.folder-title,.operation-title,.model-title{font-weight:950;font-size:17px;color:var(--ink);letter-spacing:-.02em}.folder-meta,.operation-meta,.model-meta{margin-top:8px;color:var(--muted);font-size:12px;font-weight:700}.badge,.status-badge,.role-badge,.permission-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:7px 10px;border-radius:999px;background:var(--gold-soft);border:1px solid rgba(29,111,208,.18);color:#0b4f8a;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.status-done,.badge-success{background:rgba(20,122,80,.11);color:var(--success);border-color:rgba(20,122,80,.18)}.status-progress,.badge-warning{background:rgba(161,98,7,.11);color:var(--warning);border-color:rgba(161,98,7,.18)}.status-archive,.badge-danger{background:var(--danger-soft);color:var(--danger);border-color:rgba(180,35,24,.14)}.btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:15px;border:1px solid transparent;background:#fff;color:var(--ink);font-weight:900;text-decoration:none;box-shadow:0 8px 20px rgba(23,32,27,.045);transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(23,32,27,.08)}.btn-primary{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;border-color:rgba(255,255,255,.1)}.btn-primary:hover{background:linear-gradient(135deg,#0f2e25,#1e4d3f)}.btn-light{background:rgba(255,255,255,.78);border-color:var(--line);color:var(--green)}.btn-danger{background:var(--danger-soft);border-color:rgba(180,35,24,.14);color:var(--danger)}.btn-small{min-height:34px;padding:7px 12px;border-radius:12px;font-size:12px}.form-group{margin-bottom:16px;width:100%}.form-row{align-items:flex-start}.form-row>.form-group{flex:1}label{display:block;margin:0 0 7px;color:#31413a;font-size:12px;font-weight:900;letter-spacing:.03em}.form-control,input[type="search"],textarea,select{width:100%;min-height:46px;border:1px solid rgba(24,76,137,.16);border-radius:16px;background:rgba(255,255,255,.88);color:var(--ink);outline:none;padding:11px 13px;font-weight:700;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}textarea{resize:vertical}.form-control:focus,input[type="search"]:focus,textarea:focus,select:focus{border-color:rgba(29,111,208,.62);box-shadow:0 0 0 4px rgba(29,111,208,.12);background:#fff}.search-box{min-width:280px}.view-toggle{display:flex;gap:8px;padding:5px;border-radius:16px;background:#eef6ff;border:1px solid var(--line)}.view-toggle button{width:36px;height:34px;border:0;border-radius:12px;background:transparent;font-weight:950;color:var(--muted)}.view-toggle button.active{background:#fff;color:var(--green);box-shadow:0 6px 16px rgba(23,32,27,.08)}.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.admin-tab-btn.active{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff}.admin-section-title{padding:24px 4px 14px}.admin-section-title h2{margin:0;font-size:26px;font-weight:950;letter-spacing:-.04em}.admin-section-title p{margin:6px 0 0;color:var(--muted);font-weight:650}.table-wrap{width:100%;overflow:auto}.admin-table,.journal-table,.procedure-fill-table{width:100%;border-collapse:separate;border-spacing:0}.admin-table th,.admin-table td,.journal-table th,.journal-table td,.procedure-fill-table th,.procedure-fill-table td{padding:14px 15px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.admin-table th,.journal-table th,.procedure-fill-table th{background:#eef6ff;color:#4d4437;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.admin-table tr:hover td,.journal-table tr:hover td{background:rgba(238,246,255,.7)}.admin-actions,.action-buttons{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;flex-wrap:nowrap!important}.action-icon-btn{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:14px!important}.modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(10,33,58,.48);backdrop-filter:blur(10px)}.modal-card{width:min(760px,96vw);max-height:92vh;overflow:auto;background:rgba(255,255,255,.96);border:1px solid rgba(125,184,255,.24);border-radius:30px;box-shadow:0 35px 100px rgba(0,0,0,.25)}.modele-modal-card,.procedure-modal-card{width:min(1180px,96vw)}.modal-header{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line);background:rgba(247,251,255,.94);backdrop-filter:blur(12px)}.modal-header h3{margin:0;font-size:22px;font-weight:950;letter-spacing:-.035em}.modal-body{padding:22px}.sticky-modal-footer{position:sticky;bottom:0;padding-top:16px;background:linear-gradient(180deg,rgba(255,255,255,.6),#fff)}.action-row{justify-content:flex-end;margin-top:16px}.assign-users-box{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:18px;background:#f7fbff}.empty-state{padding:24px;text-align:center;color:var(--muted);font-weight:800}.toast{position:fixed;right:22px;bottom:22px;z-index:300;max-width:360px;padding:14px 16px;border-radius:18px;background:var(--green);color:#fff;box-shadow:var(--shadow);font-weight:850;opacity:0;transform:translateY(14px);pointer-events:none;transition:.22s ease}.toast.show{opacity:1;transform:translateY(0)}.procedure-table-wrap{border:1px solid var(--line);border-radius:22px;overflow:auto;background:#fff}.procedure-detail-input{min-height:40px}.print-only{display:none!important}
@media(max-width:1100px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}.grid,.folder-list{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start;flex-direction:column}.topbar-actions{justify-content:flex-start}.page-header{align-items:flex-start;flex-direction:column}.search-box{min-width:0;width:100%}.folders-header-actions{width:100%;align-items:stretch;flex-direction:column}.form-row{flex-direction:column;gap:0}}
@media(max-width:720px){.app-shell{width:min(100% - 20px,1500px);margin-top:10px}.page-header{padding:22px;border-radius:24px}.page-header h1{font-size:30px}.dashboard-grid,.grid,.folder-list{grid-template-columns:1fr}.card-header{align-items:flex-start;flex-direction:column}.topbar-actions .btn{width:100%}.topbar-actions{width:100%}.modal-overlay{padding:10px}.modal-card{border-radius:24px}.admin-tabs .btn{flex:1 1 100%}}
@media print{body{background:#fff!important}.topbar,.page-header,.admin-tabs,.btn,.toast{display:none!important}.app-shell{width:100%;margin:0}.modal-overlay{position:static;background:#fff;padding:0}.modal-card{box-shadow:none;border:0;max-height:none;width:100%}.modal-header{display:none!important}.procedure-fill-table th,.procedure-fill-table td{padding:6px;font-size:10px}@page{size:A4 landscape;margin:7mm}}



body{overflow-x:hidden}.app-shell{padding-bottom:42px}.topbar{position:sticky;top:14px;z-index:60}.topbar-left{flex:1}.topbar-actions{margin-left:auto}.logo{font-size:0;background:#fff;border:1px solid rgba(29,111,208,.18);box-shadow:0 12px 30px rgba(23,32,27,.08)}.logo:before{content:"P";font-size:24px;font-weight:950;color:var(--green)}.logo:after{content:"";position:absolute;width:18px;height:18px;border-radius:999px;border:2px solid var(--gold);transform:translate(14px,-13px)}
.user-menu{position:relative;z-index:80}.user-menu-trigger{min-height:46px;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 7px;border:1px solid rgba(29,111,208,.18);border-radius:17px;background:rgba(255,255,255,.86);box-shadow:0 10px 24px rgba(23,32,27,.06);color:var(--ink);font-weight:900}.user-menu-trigger:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(23,32,27,.10)}.user-menu-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;font-weight:950;line-height:1}.user-menu-avatar.large{width:46px;height:46px;border-radius:16px}.user-menu-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}.user-menu-meta strong{font-size:13px}.user-menu-chevron{color:var(--gold);font-size:13px}.user-menu-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:286px;padding:10px;border:1px solid rgba(29,111,208,.18);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 28px 80px rgba(23,32,27,.16);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s ease}.user-menu.open .user-menu-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.user-menu-dropdown-head{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:linear-gradient(135deg,#eef6ff,#fff)}.user-menu-dropdown-meta{display:flex;min-width:0;flex-direction:column}.user-menu-dropdown-meta strong{font-weight:950;color:var(--ink)}.user-menu-dropdown-meta small{color:var(--muted);font-weight:750}.user-menu-item{width:100%;display:flex;align-items:center;gap:10px;margin-top:8px;padding:12px 13px;border:1px solid transparent;border-radius:16px;background:transparent;color:var(--green);font-weight:900;text-align:left}.user-menu-item:hover{background:#eef6ff;border-color:rgba(29,111,208,.18)}.user-menu-item.danger{color:var(--danger)}.password-modal-card{width:min(520px,94vw)}#avatar[style*="display: none"],#logoutBtn[style*="display: none"]{display:none!important}
@media(max-width:1100px){.topbar{top:10px}.topbar-actions{width:100%;justify-content:space-between}.user-menu{margin-left:auto}.user-menu-dropdown{right:0}}
@media(max-width:720px){.topbar-actions{gap:10px}.topbar-actions .btn{width:auto;flex:1}.user-menu{width:100%}.user-menu-trigger{width:100%;justify-content:space-between}.user-menu-dropdown{left:0;right:auto;width:100%}}


/* =========================================================
   PROXIMO logo final fix
   ========================================================= */
#appPage .topbar .topbar-left{
  flex:1 1 auto!important;
  min-width:0!important;
  gap:22px!important;
}
#appPage .topbar .logo{
  position:relative!important;
  width:168px!important;
  min-width:168px!important;
  max-width:168px!important;
  height:52px!important;
  flex:0 0 168px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
}
#appPage .topbar .logo::before,
#appPage .topbar .logo::after{
  content:none!important;
  display:none!important;
}
#appPage .topbar .logo img,
#appPage .topbar .logo .proximo-direct-top-logo,
#appPage .topbar .logo .topbar-brand-logo{
  display:block!important;
  width:160px!important;
  max-width:160px!important;
  height:auto!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
}
#appPage .topbar h2{
  white-space:normal!important;
  line-height:1.15!important;
}
@media(max-width:900px){
  #appPage .topbar{align-items:flex-start!important}
  #appPage .topbar .topbar-left{gap:12px!important}
  #appPage .topbar .logo{width:118px!important;min-width:118px!important;max-width:118px!important;flex-basis:118px!important;height:44px!important}
  #appPage .topbar .logo img,#appPage .topbar .logo .proximo-direct-top-logo,#appPage .topbar .logo .topbar-brand-logo{width:112px!important;max-width:112px!important;max-height:38px!important}
}

/* =========================================================
   PROXIMO — White & Blue final color restore
   ========================================================= */
:root{
  --bg:#f4f8ff!important;
  --bg-soft:#f8fbff!important;
  --surface:#ffffff!important;
  --surface-2:#eef6ff!important;
  --ink:#102033!important;
  --muted:#617086!important;
  --line:rgba(24,76,137,.14)!important;
  --gold:#1d6fd0!important;
  --gold-2:#7db8ff!important;
  --gold-soft:rgba(29,111,208,.11)!important;
  --green:#0b4f8a!important;
  --green-2:#1976d2!important;
}
body:before{
  background-image:linear-gradient(rgba(29,111,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,111,208,.05) 1px,transparent 1px)!important;
}
.card-header,.modal-header,.admin-table th,.journal-table th,.procedure-fill-table th,.view-toggle,.assign-users-box,.user-menu-dropdown-head,.user-menu-item:hover{
  background:#eef6ff!important;
}
.section-eyebrow,.badge,.status-badge,.role-badge,.permission-badge{
  background:rgba(29,111,208,.10)!important;
  border-color:rgba(29,111,208,.18)!important;
  color:#0b4f8a!important;
}
.form-control,input[type="search"],textarea,select{
  border-color:rgba(24,76,137,.16)!important;
  background:#ffffff!important;
}
.form-control:focus,input[type="search"]:focus,textarea:focus,select:focus{
  border-color:rgba(29,111,208,.62)!important;
  box-shadow:0 0 0 4px rgba(29,111,208,.12)!important;
}
.user-menu-trigger{
  border-color:rgba(29,111,208,.18)!important;
  background:#ffffff!important;
}
.user-menu-avatar,.avatar{
  background:linear-gradient(135deg,#0b4f8a,#1976d2)!important;
  color:#ffffff!important;
}


/* =========================================================
   PROXIMO — Header full width (not boxed)
   ========================================================= */
#appPage.app-shell{
  width:100%!important;
  max-width:none!important;
  margin:0 auto 50px!important;
  padding:0!important;
}
#appPage > section,
#appPage > .page-header,
#appPage > .dashboard-grid,
#appPage > .card,
#appPage > .admin-tabs,
#appPage > .admin-section-title{
  width:min(1500px,calc(100% - 36px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#appPage .topbar{
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 24px!important;
  padding:16px max(18px,calc((100vw - 1500px)/2 + 18px))!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 10px 32px rgba(11,79,138,.08)!important;
}
#appPage .topbar .topbar-left{
  max-width:760px!important;
}
#appPage .topbar .logo{
  width:168px!important;
  min-width:168px!important;
  max-width:168px!important;
  flex:0 0 168px!important;
}
#appPage .topbar .logo img{
  width:160px!important;
  max-width:160px!important;
  max-height:46px!important;
}
@media(max-width:1100px){
  #appPage .topbar{
    padding:14px 16px!important;
  }
}
@media(max-width:720px){
  #appPage > section,
  #appPage > .page-header,
  #appPage > .dashboard-grid,
  #appPage > .card,
  #appPage > .admin-tabs,
  #appPage > .admin-section-title{
    width:calc(100% - 20px)!important;
  }
  #appPage .topbar{
    margin-bottom:14px!important;
    border-radius:0!important;
  }
}


/* ===== LOGIN PAGE — PREMIUM DARK SPLASH LIKE REFERENCE ===== */
#loginPage.login-page{
  min-height:100vh!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:42px 22px!important;
  background:
    radial-gradient(circle at 8% 8%,rgba(94,128,174,.48),transparent 38%),
    radial-gradient(circle at 92% 92%,rgba(11,34,70,.48),transparent 34%),
    linear-gradient(135deg,#16283f 0%,#0a1526 100%)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  overflow:auto!important;
}
#loginPage.login-page.hidden{display:none!important}
#loginPage .login-card{
  width:min(1380px,94vw)!important;
  min-height:760px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#ffffff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.32)!important;
}
#loginPage .login-brand-panel{
  position:relative!important;
  min-height:760px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  padding:58px 58px 52px!important;
  color:#ffffff!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(2,14,32,.82) 0%,rgba(5,23,49,.66) 48%,rgba(5,25,57,.42) 100%),
    url("../img/legal-splash.svg") center/cover no-repeat!important;
}
#loginPage .login-brand-panel:before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(circle at 70% 38%,rgba(72,135,255,.18),transparent 28%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.24))!important;pointer-events:none!important}
#loginPage .login-brand-panel:after{content:""!important;position:absolute!important;inset:auto 0 0 0!important;height:240px!important;background:linear-gradient(0deg,rgba(0,0,0,.40),transparent)!important;pointer-events:none!important}
#loginPage .brand-top-logo,#loginPage .brand-copy,#loginPage .brand-features{position:relative!important;z-index:2!important}
#loginPage .brand-top-logo{width:215px!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important}
#loginPage .brand-top-logo img{display:block!important;width:100%!important;height:auto!important;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))!important}
#loginPage .brand-copy{margin-top:80px!important;max-width:430px!important}
#loginPage .brand-copy h1{margin:0!important;color:#ffffff!important;font-size:42px!important;line-height:1.18!important;font-weight:750!important;letter-spacing:-.045em!important}
#loginPage .brand-copy h1 span{color:#4b8dff!important;font-weight:950!important}
#loginPage .brand-line{width:58px!important;height:3px!important;border-radius:99px!important;background:#3a83ff!important;margin:30px 0 28px!important}
#loginPage .brand-copy p{margin:0!important;max-width:420px!important;color:rgba(255,255,255,.86)!important;font-size:16px!important;line-height:1.6!important;font-weight:500!important}
#loginPage .brand-features{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:24px!important;margin-top:60px!important;max-width:545px!important}
#loginPage .brand-features div{min-width:0!important;border-right:1px solid rgba(255,255,255,.10)!important;padding-right:18px!important}
#loginPage .brand-features div:last-child{border-right:0!important}
#loginPage .brand-features span{display:block!important;color:#2878ff!important;font-size:34px!important;line-height:1!important;margin-bottom:12px!important;font-weight:900!important}
#loginPage .brand-features strong{display:block!important;color:#fff!important;font-size:15px!important;font-weight:800!important;margin-bottom:6px!important}
#loginPage .brand-features small{display:block!important;color:rgba(255,255,255,.70)!important;font-size:13px!important;line-height:1.25!important;font-weight:500!important}
#loginPage .login-logo-box,#loginPage .login-kicker,#loginPage .login-mini-card{display:none!important}
#loginPage .login-form-wrap{min-height:760px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;padding:58px 100px!important;background:#ffffff!important}
#loginPage .login-main-logo{width:350px!important;margin:0 0 68px!important}
#loginPage .login-main-logo img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important}
#loginPage .login-welcome{display:block!important;margin:0 0 8px!important;color:#075bd8!important;font-size:17px!important;line-height:1!important;font-weight:700!important}
#loginPage .login-form-wrap h2{margin:0 0 10px!important;color:#07162e!important;font-size:42px!important;line-height:1.05!important;font-weight:850!important;letter-spacing:-.035em!important}
#loginPage .login-form-wrap .hint{max-width:370px!important;margin:0 0 40px!important;color:#5c6f8e!important;font-size:16px!important;line-height:1.55!important;font-weight:500!important}
#loginPage .login-form-wrap form{width:100%!important;max-width:420px!important;margin:0!important}
#loginPage .login-form-wrap .form-group{margin:0 0 22px!important;position:relative!important}
#loginPage .login-form-wrap label{display:block!important;margin:0 0 10px!important;color:#07162e!important;font-size:13px!important;line-height:1.1!important;font-weight:850!important}
#loginPage .login-input-wrap{position:relative!important;width:100%!important}
#loginPage .login-input-wrap:before{position:absolute!important;left:18px!important;top:50%!important;transform:translateY(-50%)!important;z-index:2!important;width:22px!important;text-align:center!important;color:#667b9f!important;font-size:22px!important;line-height:1!important;font-weight:400!important}
#loginPage .input-user .login-input-wrap:before{content:"♙"!important}
#loginPage .input-password .login-input-wrap:before{content:"▣"!important;font-size:16px!important}
#loginPage #username,#loginPage #password{width:100%!important;height:58px!important;min-height:58px!important;border-radius:10px!important;background:#ffffff!important;border:1px solid #d4dfef!important;padding:0 50px 0 52px!important;color:#07162e!important;font-size:15px!important;font-weight:500!important;outline:none!important;box-shadow:none!important;transition:border-color .18s ease,box-shadow .18s ease!important}
#loginPage #username::placeholder,#loginPage #password::placeholder{color:#6f7c91!important;font-weight:500!important}
#loginPage #username:focus,#loginPage #password:focus{background:#fff!important;border-color:#4b8dff!important;box-shadow:0 0 0 4px rgba(37,99,235,.10)!important}
#loginPage .login-eye{position:absolute!important;right:18px!important;top:50%!important;transform:translateY(-50%)!important;color:#667b9f!important;font-size:16px!important;line-height:1!important;pointer-events:none!important}
#loginPage .login-options{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin:0 0 26px!important;width:100%!important;color:#526784!important;font-size:13px!important;font-weight:650!important}
#loginPage .remember-line{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0!important;color:#526784!important;font-size:13px!important;font-weight:650!important;cursor:pointer!important}
#loginPage .remember-line input{width:14px!important;height:14px!important;margin:0!important;accent-color:#0b4fd0!important}
#loginPage .login-options a{display:none!important}
#loginPage .login-form-wrap .btn-primary{width:100%!important;height:58px!important;min-height:58px!important;margin:0!important;border:0!important;border-radius:9px!important;background:linear-gradient(135deg,#0f4cd0 0%,#082db0 100%)!important;color:#fff!important;box-shadow:0 16px 34px rgba(12,65,197,.25)!important;font-size:15px!important;font-weight:850!important;letter-spacing:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important}
#loginPage .login-form-wrap .btn-primary:hover{transform:translateY(-1px)!important;box-shadow:0 20px 42px rgba(12,65,197,.32)!important}
#loginPage .btn-lock{font-size:14px!important;line-height:1!important;color:#fff!important;opacity:.92!important}
#loginPage .login-note{width:100%!important;max-width:420px!important;margin-top:28px!important;min-height:54px!important;padding:14px 18px!important;border-radius:9px!important;background:#f2f6fc!important;border:0!important;color:#526784!important;text-align:center!important;font-size:14px!important;font-weight:650!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important}
#loginPage .login-note span{color:#526784!important;font-size:20px!important;line-height:1!important}
#loginPage .section-eyebrow{display:none!important}
@media(max-width:1050px){#loginPage.login-page{padding:18px 12px!important;align-items:flex-start!important;background:#f1f6ff!important}#loginPage .login-card{grid-template-columns:1fr!important;min-height:auto!important;border-radius:22px!important;width:min(560px,100%)!important}#loginPage .login-brand-panel{display:none!important}#loginPage .login-form-wrap{min-height:auto!important;padding:42px 26px 34px!important;align-items:stretch!important}#loginPage .login-main-logo{width:260px!important;margin:0 auto 38px!important}#loginPage .login-welcome,#loginPage .login-form-wrap h2,#loginPage .login-form-wrap .hint{text-align:center!important}#loginPage .login-form-wrap h2{font-size:34px!important}#loginPage .login-form-wrap .hint{margin-left:auto!important;margin-right:auto!important;margin-bottom:32px!important}#loginPage .login-form-wrap form,#loginPage .login-note{max-width:none!important}}
@media(max-width:520px){#loginPage.login-page{padding:12px!important}#loginPage .login-card{border-radius:20px!important}#loginPage .login-form-wrap{padding:34px 18px 24px!important}#loginPage .login-main-logo{width:220px!important;margin-bottom:30px!important}#loginPage .login-form-wrap h2{font-size:30px!important}#loginPage .login-form-wrap .hint{font-size:14px!important}#loginPage #username,#loginPage #password{height:54px!important;min-height:54px!important}#loginPage .login-options{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}}


/* ===== FINAL FIX — SPLASH EXACT REFERENCE IMAGE ===== */
#loginPage.login-page{
  background: radial-gradient(circle at 15% 15%, #6d84aa 0%, #15243b 42%, #071225 100%) !important;
}
#loginPage .login-card{
  width: min(1240px, 92vw) !important;
  min-height: 720px !important;
  grid-template-columns: 50% 50% !important;
  border-radius: 22px !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .34) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
#loginPage .login-brand-panel{
  padding: 0 !important;
  background: url("../img/splash-reference.webp") center top / cover no-repeat !important;
}
#loginPage .login-brand-panel::before,
#loginPage .login-brand-panel::after{
  display: none !important;
}
#loginPage .login-brand-panel > *{
  display: none !important;
}
#loginPage .login-form-wrap{
  min-height: 720px !important;
  padding: 70px 92px !important;
  background: #ffffff !important;
  align-items: center !important;
}
#loginPage .login-form-wrap > *{
  width: 100% !important;
  max-width: 420px !important;
}
#loginPage .login-main-logo{
  width: 320px !important;
  max-width: 320px !important;
  margin: 0 auto 62px !important;
}
#loginPage .login-welcome{
  color: #075bd8 !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  margin-bottom: 10px !important;
}
#loginPage .login-form-wrap h2{
  font-size: 40px !important;
  letter-spacing: -.04em !important;
  margin-bottom: 10px !important;
}
#loginPage .login-form-wrap .hint{
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin-bottom: 38px !important;
}
#loginPage #username,
#loginPage #password{
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 10px !important;
}
#loginPage .login-form-wrap .btn-primary{
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg,#123ed2 0%,#0628a9 100%) !important;
}
#loginPage .login-note{
  min-height: 52px !important;
  margin-top: 26px !important;
}
#loginPage .login-options a{display:none!important}
@media(max-width:1050px){
  #loginPage .login-card{grid-template-columns:1fr!important;width:min(560px,100%)!important;min-height:auto!important}
  #loginPage .login-brand-panel{display:none!important}
  #loginPage .login-form-wrap{min-height:auto!important;padding:44px 26px!important;align-items:stretch!important}
  #loginPage .login-form-wrap > *{max-width:none!important}
}


/* ===== FINAL REQUEST — remove right logo and splash paragraph text ===== */
#loginPage .login-main-logo{display:none!important;}
#loginPage .brand-copy p{display:none!important;}
#loginPage .login-form-wrap{justify-content:center!important;}
#loginPage .login-welcome{margin-top:0!important;}

/* ===== FINAL FIX — LOGIN FULL SCREEN WITHOUT SCROLL ===== */
html:has(#loginPage:not(.hidden)),
body:has(#loginPage:not(.hidden)){
  width:100%!important;
  height:100%!important;
  margin:0!important;
  overflow:hidden!important;
}

#loginPage.login-page:not(.hidden){
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  padding:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

#loginPage.login-page.hidden{
  display:none!important;
}

#loginPage .login-card{
  width:min(1260px, calc(100vw - 48px))!important;
  height:min(760px, calc(100vh - 48px))!important;
  min-height:0!important;
  max-height:calc(100vh - 48px)!important;
  display:grid!important;
  grid-template-columns:50% 50%!important;
  overflow:hidden!important;
}

#loginPage .login-brand-panel,
#loginPage .login-form-wrap{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}

#loginPage .login-form-wrap{
  padding:40px 86px!important;
  justify-content:center!important;
  align-items:center!important;
}

#loginPage .login-form-wrap > *,
#loginPage .login-form-wrap form{
  max-width:420px!important;
}

#loginPage .login-welcome{
  margin:0 0 8px!important;
}

#loginPage .login-form-wrap h2{
  font-size:38px!important;
  margin:0 0 8px!important;
}

#loginPage .login-form-wrap .hint{
  margin:0 0 28px!important;
  font-size:15px!important;
}

#loginPage .login-form-wrap .form-group{
  margin-bottom:18px!important;
}

#loginPage .login-form-wrap label{
  margin-bottom:9px!important;
}

#loginPage #username,
#loginPage #password{
  height:54px!important;
  min-height:54px!important;
}

#loginPage .login-options{
  margin:0 0 20px!important;
}

#loginPage .login-form-wrap .btn-primary{
  height:54px!important;
  min-height:54px!important;
}

#loginPage .login-note{
  min-height:50px!important;
  margin-top:22px!important;
}

@media(max-height:760px){
  #loginPage.login-page:not(.hidden){padding:16px!important;}
  #loginPage .login-card{height:calc(100vh - 32px)!important;width:min(1180px, calc(100vw - 32px))!important;}
  #loginPage .login-form-wrap{padding:26px 72px!important;}
  #loginPage .login-form-wrap h2{font-size:34px!important;}
  #loginPage .login-form-wrap .hint{margin-bottom:22px!important;}
  #loginPage .login-form-wrap .form-group{margin-bottom:15px!important;}
  #loginPage #username,#loginPage #password,#loginPage .login-form-wrap .btn-primary{height:50px!important;min-height:50px!important;}
  #loginPage .login-note{min-height:46px!important;margin-top:18px!important;}
}

@media(max-width:1050px){
  html:has(#loginPage:not(.hidden)),
  body:has(#loginPage:not(.hidden)){
    overflow:auto!important;
  }
  #loginPage.login-page:not(.hidden){
    position:relative!important;
    min-height:100vh!important;
    height:auto!important;
    overflow:auto!important;
    padding:16px!important;
  }
  #loginPage .login-card{
    width:min(560px,100%)!important;
    height:auto!important;
    min-height:auto!important;
    max-height:none!important;
    grid-template-columns:1fr!important;
  }
  #loginPage .login-form-wrap{
    height:auto!important;
    min-height:auto!important;
    overflow:visible!important;
    padding:40px 24px!important;
  }
}

/* ===== FINAL LOGIN — FULL SCREEN SPLIT, NO BOXED ===== */
html:has(#loginPage:not(.hidden)),
body:has(#loginPage:not(.hidden)){
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

#loginPage.login-page:not(.hidden){
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

#loginPage .login-card{
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  max-height:100vh!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:50vw 50vw!important;
  background:#ffffff!important;
}

#loginPage .login-brand-panel{
  grid-column:1!important;
  grid-row:1!important;
  width:50vw!important;
  height:100vh!important;
  min-height:100vh!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:url("../img/splash-reference.webp") center top / cover no-repeat!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 0 0 8vw!important;
}

#loginPage .login-brand-panel::before,
#loginPage .login-brand-panel::after{
  display:none!important;
  content:none!important;
}

#loginPage .login-form-wrap{
  grid-column:2!important;
  grid-row:1!important;
  width:50vw!important;
  height:100vh!important;
  min-height:100vh!important;
  max-height:100vh!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:#ffffff!important;
  padding:0 8vw!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
}

#loginPage .login-form-wrap > *,
#loginPage .login-form-wrap form,
#loginPage .login-note{
  width:100%!important;
  max-width:430px!important;
}

#loginPage .login-main-logo,
#loginPage .brand-top-logo,
#loginPage .brand-copy,
#loginPage .brand-features{
  display:none!important;
}

#loginPage .login-welcome{
  display:block!important;
  margin:0 0 10px!important;
  color:#0f56d9!important;
  font-size:17px!important;
  font-weight:800!important;
}

#loginPage .login-form-wrap h2{
  margin:0 0 12px!important;
  color:#07162e!important;
  font-size:42px!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
}

#loginPage .login-form-wrap .hint{
  margin:0 0 42px!important;
  color:#5d6f8c!important;
  font-size:16px!important;
  line-height:1.55!important;
  font-weight:550!important;
}

#loginPage .login-form-wrap .form-group{
  margin:0 0 24px!important;
}

#loginPage .login-form-wrap label{
  display:block!important;
  margin:0 0 10px!important;
  color:#07162e!important;
  font-size:13px!important;
  font-weight:900!important;
}

#loginPage #username,
#loginPage #password{
  height:58px!important;
  min-height:58px!important;
  border-radius:10px!important;
  border:1px solid #d6e0ef!important;
  background:#fff!important;
  padding:0 50px 0 52px!important;
  font-size:15px!important;
  box-shadow:none!important;
}

#loginPage #username:focus,
#loginPage #password:focus{
  border-color:#2f73e8!important;
  box-shadow:0 0 0 4px rgba(47,115,232,.12)!important;
}

#loginPage .login-options{
  display:flex!important;
  justify-content:flex-start!important;
  margin:0 0 26px!important;
}

#loginPage .login-options a{display:none!important;}

#loginPage .login-form-wrap .btn-primary{
  height:58px!important;
  min-height:58px!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,#1555d8 0%,#092fb6 100%)!important;
  box-shadow:0 18px 38px rgba(10,62,190,.28)!important;
}

#loginPage .login-note{
  margin-top:28px!important;
  min-height:54px!important;
  border-radius:10px!important;
  background:#f3f7fd!important;
}

@media(max-width:900px){
  html:has(#loginPage:not(.hidden)),
  body:has(#loginPage:not(.hidden)){
    overflow:auto!important;
  }
  #loginPage.login-page:not(.hidden){
    position:relative!important;
    height:auto!important;
    min-height:100vh!important;
    overflow:auto!important;
    background:#fff!important;
  }
  #loginPage .login-card{
    width:100%!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    grid-template-columns:1fr!important;
  }
  #loginPage .login-brand-panel{
    display:none!important;
  }
  #loginPage .login-form-wrap{
    grid-column:1!important;
    width:100%!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    padding:42px 24px!important;
    overflow:visible!important;
    align-items:stretch!important;
  }
  #loginPage .login-form-wrap > *,
  #loginPage .login-form-wrap form,
  #loginPage .login-note{
    max-width:none!important;
  }
}

/* ===== PROXIMO LOGIN FINAL — FULL SCREEN SPLIT / CLEAN SPLASH IMAGE ===== */
html, body{
  width:100% !important;
  min-height:100% !important;
}
body:has(#loginPage:not(.hidden)){
  margin:0 !important;
  overflow:hidden !important;
  background:#fff !important;
}
#loginPage.login-page{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#ffffff !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}
#loginPage .login-card{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  background:#ffffff !important;
  display:grid !important;
  grid-template-columns:50vw 50vw !important;
}
#loginPage .login-brand-panel{
  grid-column:1 !important;
  width:50vw !important;
  height:100vh !important;
  min-height:100vh !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:url("../img/splash-reference.webp") center center / cover no-repeat !important;
  display:block !important;
}
#loginPage .login-brand-panel::before,
#loginPage .login-brand-panel::after{
  display:none !important;
  content:none !important;
}
#loginPage .login-brand-panel > *,
#loginPage .brand-top-logo,
#loginPage .brand-copy,
#loginPage .brand-line,
#loginPage .brand-features{
  display:none !important;
}
#loginPage .login-form-wrap{
  grid-column:2 !important;
  width:50vw !important;
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  padding:0 8vw !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:#ffffff !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
}
#loginPage .login-form-wrap > *,
#loginPage .login-form-wrap form,
#loginPage .login-note{
  width:100% !important;
  max-width:430px !important;
}
#loginPage .login-main-logo{
  display:none !important;
}
#loginPage .login-welcome{
  display:block !important;
  margin:0 0 10px !important;
  color:#0f56d9 !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:800 !important;
}
#loginPage .login-form-wrap h2{
  margin:0 0 14px !important;
  color:#07162e !important;
  font-size:46px !important;
  line-height:1.02 !important;
  font-weight:900 !important;
  letter-spacing:-.045em !important;
}
#loginPage .login-form-wrap .hint{
  max-width:410px !important;
  margin:0 0 42px !important;
  color:#5b6e8d !important;
  font-size:17px !important;
  line-height:1.55 !important;
  font-weight:650 !important;
}
#loginPage .login-form-wrap .form-group{
  margin:0 0 24px !important;
}
#loginPage .login-form-wrap label{
  margin:0 0 10px !important;
  color:#07162e !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}
#loginPage #username,
#loginPage #password{
  height:58px !important;
  min-height:58px !important;
  border-radius:10px !important;
  border:1px solid #d3deef !important;
  background:#ffffff !important;
  padding:0 52px !important;
  color:#07162e !important;
  font-size:15px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
#loginPage #username::placeholder,
#loginPage #password::placeholder{
  color:#75849b !important;
  font-weight:600 !important;
}
#loginPage #username:focus,
#loginPage #password:focus{
  border-color:#2f75e8 !important;
  box-shadow:0 0 0 4px rgba(47,117,232,.12) !important;
  background:#ffffff !important;
}
#loginPage .login-options{
  margin:0 0 30px !important;
  font-size:13px !important;
  font-weight:750 !important;
}
#loginPage .login-options a{
  display:none !important;
}
#loginPage .login-form-wrap .btn-primary{
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:9px !important;
  background:linear-gradient(135deg,#1557e7 0%,#082db6 100%) !important;
  color:#ffffff !important;
  font-size:15px !important;
  font-weight:900 !important;
  box-shadow:0 16px 38px rgba(15,73,211,.26) !important;
}
#loginPage .login-note{
  min-height:54px !important;
  margin-top:30px !important;
  padding:14px 18px !important;
  border:0 !important;
  border-radius:9px !important;
  background:#f3f7fd !important;
  color:#526784 !important;
  font-size:14px !important;
  font-weight:750 !important;
}
@media(max-width:900px){
  body:has(#loginPage:not(.hidden)){
    overflow:auto !important;
  }
  #loginPage.login-page{
    height:auto !important;
    min-height:100vh !important;
    overflow:auto !important;
  }
  #loginPage .login-card{
    display:block !important;
    height:auto !important;
    min-height:100vh !important;
  }
  #loginPage .login-brand-panel{
    display:none !important;
  }
  #loginPage .login-form-wrap{
    width:100vw !important;
    min-height:100vh !important;
    height:auto !important;
    padding:42px 24px !important;
    align-items:stretch !important;
  }
  #loginPage .login-form-wrap > *,
  #loginPage .login-form-wrap form,
  #loginPage .login-note{
    max-width:100% !important;
  }
  #loginPage .login-welcome,
  #loginPage .login-form-wrap h2,
  #loginPage .login-form-wrap .hint{
    text-align:center !important;
  }
  #loginPage .login-form-wrap h2{
    font-size:36px !important;
  }
  #loginPage .login-form-wrap .hint{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* =========================================================
   PROXIMO - LOGIN SIMPLE SPLASH FINAL
   Only targets #loginPage. App/API logic untouched.
   ========================================================= */
body:has(#loginPage:not(.hidden)){
  margin:0 !important;
  overflow:hidden !important;
  background:#ffffff !important;
}
#loginPage.login-page{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  padding:0 !important;
  margin:0 !important;
  background:#ffffff !important;
  overflow:hidden !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
#loginPage *{box-sizing:border-box !important;}
#loginPage .login-card,
#loginPage .brand-copy,
#loginPage .brand-top-logo,
#loginPage .brand-features,
#loginPage .login-note,
#loginPage .login-options,
#loginPage .login-eye{display:none !important;}

#loginPage .login-shell{
  width:100vw !important;
  height:100vh !important;
  display:grid !important;
  grid-template-columns:50vw 50vw !important;
  background:#fff !important;
  overflow:hidden !important;
}

#loginPage .login-splash-panel{
  position:relative !important;
  width:50vw !important;
  height:100vh !important;
  min-height:100vh !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#061a38 !important;
}
#loginPage .splash-bg{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(135deg,rgba(3,16,38,.94),rgba(8,42,102,.88)),
    url("../img/splash-reference.webp") center center / cover no-repeat !important;
  transform:scale(1.02) !important;
}
#loginPage .login-splash-panel::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 38% 28%,rgba(55,125,255,.28),transparent 34%),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.30)) !important;
  pointer-events:none !important;
}
#loginPage .splash-mark{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  color:#fff !important;
  text-align:center !important;
  filter:drop-shadow(0 22px 42px rgba(0,0,0,.35)) !important;
}
#loginPage .proximo-icon{
  width:112px !important;
  height:112px !important;
  border-radius:32px !important;
  background:url("../img/proximo-icon.svg") center / contain no-repeat !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
}
#loginPage .proximo-word{
  color:#ffffff !important;
  font-size:54px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.03em !important;
}

#loginPage .login-form-panel{
  width:50vw !important;
  height:100vh !important;
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffffff !important;
  padding:48px 7vw !important;
  overflow:hidden !important;
}
#loginPage .login-form-card{
  width:100% !important;
  max-width:450px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
#loginPage .mobile-brand{display:none !important;}
#loginPage .login-welcome{
  display:block !important;
  margin:0 0 10px !important;
  color:#115fe2 !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:850 !important;
}
#loginPage .login-form-card h1{
  margin:0 0 14px !important;
  color:#07162e !important;
  font-size:48px !important;
  line-height:1.03 !important;
  font-weight:900 !important;
  letter-spacing:-.045em !important;
}
#loginPage .login-subtitle{
  margin:0 0 46px !important;
  max-width:410px !important;
  color:#5a6c87 !important;
  font-size:17px !important;
  line-height:1.55 !important;
  font-weight:650 !important;
}
#loginPage .simple-login-form,
#loginPage .form-group{
  width:100% !important;
  max-width:450px !important;
}
#loginPage .form-group{
  margin:0 0 24px !important;
  position:relative !important;
}
#loginPage .form-group label{
  display:block !important;
  margin:0 0 10px !important;
  color:#07162e !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}
#loginPage .login-input-wrap{
  position:relative !important;
  width:100% !important;
}
#loginPage .field-symbol{
  position:absolute !important;
  left:20px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  width:18px !important;
  height:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#5f7394 !important;
  font-size:17px !important;
  line-height:1 !important;
}
#loginPage #username,
#loginPage #password{
  width:100% !important;
  height:60px !important;
  min-height:60px !important;
  margin:0 !important;
  border-radius:12px !important;
  border:1px solid #d4dfef !important;
  background:#ffffff !important;
  padding:0 20px 0 56px !important;
  color:#07162e !important;
  font-size:15px !important;
  font-weight:650 !important;
  outline:none !important;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
#loginPage #username::placeholder,
#loginPage #password::placeholder{
  color:#75849b !important;
  font-weight:600 !important;
}
#loginPage #username:focus,
#loginPage #password:focus{
  border-color:#1e6cf0 !important;
  background:#ffffff !important;
  box-shadow:0 0 0 4px rgba(30,108,240,.11) !important;
}
#loginPage .simple-login-form .btn-primary,
#loginPage #loginForm button[type="submit"]{
  width:100% !important;
  height:60px !important;
  min-height:60px !important;
  margin:12px 0 0 !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#1559e9 0%,#092eb9 100%) !important;
  color:#ffffff !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  cursor:pointer !important;
  box-shadow:0 18px 42px rgba(14,70,210,.26) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
#loginPage .simple-login-form .btn-primary:hover,
#loginPage #loginForm button[type="submit"]:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 22px 50px rgba(14,70,210,.32) !important;
}

@media(max-width:900px){
  body:has(#loginPage:not(.hidden)){
    overflow:auto !important;
  }
  #loginPage.login-page{
    position:relative !important;
    min-height:100vh !important;
    height:auto !important;
    overflow:auto !important;
  }
  #loginPage .login-shell{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:100vh !important;
  }
  #loginPage .login-splash-panel{
    display:none !important;
  }
  #loginPage .login-form-panel{
    width:100% !important;
    min-height:100vh !important;
    height:auto !important;
    padding:42px 24px !important;
    align-items:center !important;
  }
  #loginPage .login-form-card{
    max-width:440px !important;
  }
  #loginPage .mobile-brand{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    margin:0 0 34px !important;
    color:#07162e !important;
    font-size:20px !important;
    letter-spacing:.02em !important;
  }
  #loginPage .mobile-brand .proximo-icon.small{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
  }
  #loginPage .login-welcome,
  #loginPage .login-form-card h1,
  #loginPage .login-subtitle{
    text-align:center !important;
  }
  #loginPage .login-form-card h1{
    font-size:38px !important;
  }
  #loginPage .login-subtitle{
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:36px !important;
    font-size:16px !important;
  }
}


/* =========================================================
   FINAL OVERRIDE - LOGIN WITHOUT SPLASH IMAGE
   Full screen split: left branding gradient, right login form.
   ========================================================= */
body:has(#loginPage:not(.hidden)){
  margin:0 !important;
  overflow:hidden !important;
  background:#fff !important;
}
#loginPage.login-page{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  padding:0 !important;
  margin:0 !important;
  background:#fff !important;
  overflow:hidden !important;
}
#loginPage .login-shell{
  width:100vw !important;
  height:100vh !important;
  display:grid !important;
  grid-template-columns:50vw 50vw !important;
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:hidden !important;
}
#loginPage .login-splash-panel{
  position:relative !important;
  width:50vw !important;
  height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(79,140,255,.34), transparent 30%),
    radial-gradient(circle at 80% 76%, rgba(15,78,190,.30), transparent 34%),
    linear-gradient(135deg,#06152f 0%,#0b2e73 52%,#04132c 100%) !important;
}
#loginPage .splash-bg{
  position:absolute !important;
  inset:0 !important;
  background:none !important;
  background-image:none !important;
  opacity:1 !important;
  transform:none !important;
}
#loginPage .splash-bg::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.08) 0 1px, transparent 1px 120px),
    linear-gradient(25deg, rgba(255,255,255,.045) 0 1px, transparent 1px 150px) !important;
  opacity:.55 !important;
}
#loginPage .login-splash-panel::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.22)) !important;
  pointer-events:none !important;
}
#loginPage .splash-mark{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:20px !important;
  text-align:center !important;
  color:#fff !important;
  filter:drop-shadow(0 22px 45px rgba(0,0,0,.28)) !important;
}
#loginPage .proximo-icon{
  width:118px !important;
  height:118px !important;
  border-radius:34px !important;
  background:url("../img/proximo-icon.svg") center/contain no-repeat !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
}
#loginPage .proximo-word{
  color:#fff !important;
  font-size:56px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
}
#loginPage .login-form-panel{
  width:50vw !important;
  height:100vh !important;
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  padding:48px 7vw !important;
  overflow:hidden !important;
}
#loginPage .login-form-card{
  width:100% !important;
  max-width:450px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
#loginPage .login-subtitle{display:none !important;}
#loginPage .login-welcome{
  display:block !important;
  margin:0 0 10px !important;
  color:#1559e9 !important;
  font-size:17px !important;
  font-weight:850 !important;
}
#loginPage .login-form-card h1{
  margin:0 0 42px !important;
  color:#07162e !important;
  font-size:48px !important;
  line-height:1.03 !important;
  font-weight:900 !important;
  letter-spacing:-.045em !important;
}
#loginPage .login-secure-note{
  margin-top:24px !important;
  width:100% !important;
  max-width:450px !important;
  min-height:54px !important;
  border-radius:12px !important;
  background:#f3f6fb !important;
  border:1px solid #e5ebf5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  color:#5f6f89 !important;
  font-size:15px !important;
  font-weight:750 !important;
}
#loginPage .login-secure-note .secure-icon{
  font-size:14px !important;
  opacity:.9 !important;
}
@media(max-width:900px){
  body:has(#loginPage:not(.hidden)){
    overflow:auto !important;
  }
  #loginPage.login-page{
    position:relative !important;
    height:auto !important;
    min-height:100vh !important;
    overflow:auto !important;
  }
  #loginPage .login-shell{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:100vh !important;
  }
  #loginPage .login-splash-panel{
    display:none !important;
  }
  #loginPage .login-form-panel{
    width:100% !important;
    min-height:100vh !important;
    height:auto !important;
    padding:42px 24px !important;
  }
  #loginPage .login-form-card h1{
    font-size:38px !important;
    text-align:center !important;
  }
  #loginPage .login-welcome{text-align:center !important;}
}


/* =========================================================
   FINAL OVERRIDE - CENTERED LOGIN ONLY
   Remove left splash + PROXIMO logo, keep clean centered form.
   ========================================================= */
body:has(#loginPage:not(.hidden)){
  margin:0 !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#f6f9ff 0%,#eef4ff 48%,#ffffff 100%) !important;
}
#loginPage.login-page{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  padding:0 !important;
  margin:0 !important;
  background:linear-gradient(135deg,#f6f9ff 0%,#eef4ff 48%,#ffffff 100%) !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#loginPage .login-shell{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
#loginPage .login-splash-panel,
#loginPage .splash-bg,
#loginPage .splash-mark,
#loginPage .proximo-word,
#loginPage .mobile-brand,
#loginPage .login-form-card > .proximo-icon,
#loginPage .login-form-card > img,
#loginPage .login-form-card > svg{
  display:none !important;
}
#loginPage .login-form-panel{
  width:100% !important;
  height:100vh !important;
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:32px 22px !important;
  background:transparent !important;
  overflow:hidden !important;
}
#loginPage .login-form-card{
  width:100% !important;
  max-width:430px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:left !important;
}
#loginPage .login-welcome{
  display:block !important;
  margin:0 0 8px !important;
  color:#1559e9 !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  text-align:left !important;
}
#loginPage .login-form-card h1{
  margin:0 0 36px !important;
  color:#07162e !important;
  font-size:46px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:-.045em !important;
  text-align:left !important;
}
#loginPage .simple-login-form,
#loginPage #loginForm{
  width:100% !important;
  max-width:430px !important;
}
#loginPage .form-group{
  margin-bottom:22px !important;
}
#loginPage .form-group label{
  display:block !important;
  margin:0 0 10px !important;
  color:#101f3a !important;
  font-size:15px !important;
  font-weight:800 !important;
}
#loginPage .login-input-wrap{
  position:relative !important;
  width:100% !important;
}
#loginPage .field-symbol{
  position:absolute !important;
  left:17px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  color:#6c7d98 !important;
  font-size:17px !important;
  z-index:2 !important;
}
#loginPage input.form-control{
  width:100% !important;
  height:58px !important;
  border-radius:12px !important;
  border:1px solid #d8e1ef !important;
  background:#fff !important;
  color:#07162e !important;
  font-size:15px !important;
  font-weight:600 !important;
  padding:0 18px 0 52px !important;
  outline:none !important;
  box-shadow:0 8px 22px rgba(13,38,76,.04) !important;
}
#loginPage input.form-control:focus{
  border-color:#1559e9 !important;
  box-shadow:0 0 0 4px rgba(21,89,233,.12),0 8px 22px rgba(13,38,76,.05) !important;
}
#loginPage button[type="submit"]{
  width:100% !important;
  height:58px !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#0b46d9 0%,#1559e9 100%) !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:850 !important;
  margin-top:12px !important;
  box-shadow:0 16px 34px rgba(21,89,233,.24) !important;
}
#loginPage .login-secure-note{
  margin-top:22px !important;
  width:100% !important;
  max-width:430px !important;
  min-height:52px !important;
  border-radius:12px !important;
  background:#f3f6fb !important;
  border:1px solid #e5ebf5 !important;
  color:#5f6f89 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-size:14px !important;
  font-weight:750 !important;
  text-align:center !important;
}
@media(max-width:700px){
  body:has(#loginPage:not(.hidden)){
    overflow:auto !important;
  }
  #loginPage.login-page{
    position:relative !important;
    height:auto !important;
    min-height:100vh !important;
    overflow:auto !important;
  }
  #loginPage .login-shell,
  #loginPage .login-form-panel{
    height:auto !important;
    min-height:100vh !important;
  }
  #loginPage .login-form-panel{
    padding:36px 20px !important;
  }
  #loginPage .login-form-card{
    max-width:100% !important;
  }
  #loginPage .login-form-card h1{
    font-size:38px !important;
  }
}


/* =========================================================
   FINAL OVERRIDE - CENTER LOGO + TITLES
   ========================================================= */
#loginPage .login-form-card{
  text-align:center !important;
}
#loginPage .login-top-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:430px !important;
  margin:0 auto 34px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#loginPage .login-top-logo img{
  display:block !important;
  width:min(290px, 78%) !important;
  max-width:290px !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#loginPage .login-welcome{
  text-align:center !important;
  width:100% !important;
  margin:0 0 8px !important;
}
#loginPage .login-form-card h1{
  text-align:center !important;
  width:100% !important;
  margin:0 0 36px !important;
}
#loginPage .simple-login-form,
#loginPage #loginForm,
#loginPage .login-secure-note{
  margin-left:auto !important;
  margin-right:auto !important;
}
@media(max-width:700px){
  #loginPage .login-top-logo{margin-bottom:28px !important;}
  #loginPage .login-top-logo img{width:min(250px, 82%) !important;}
}

/* =========================================================
   FINAL LOGIN PRO SAAS STYLE - CENTERED, NO SPLASH
   ========================================================= */
html:has(#loginPage:not(.hidden)),
body:has(#loginPage:not(.hidden)){
  width:100% !important;
  min-height:100% !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#eef5ff !important;
}

body:has(#loginPage:not(.hidden))::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  background:
    radial-gradient(circle at 20% 16%, rgba(21,89,233,.13), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(0,160,255,.10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(7,22,46,.08), transparent 34%),
    linear-gradient(135deg,#f8fbff 0%,#edf5ff 52%,#f9fbff 100%) !important;
}

body:has(#loginPage:not(.hidden))::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  opacity:.34 !important;
  background-image:
    linear-gradient(rgba(15,47,99,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,47,99,.045) 1px, transparent 1px) !important;
  background-size:52px 52px !important;
  mask-image:radial-gradient(circle at center, black 0%, transparent 76%) !important;
}

#loginPage.login-page{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  padding:24px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:transparent !important;
}

#loginPage .login-shell{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#loginPage .login-splash-panel,
#loginPage .splash-bg,
#loginPage .splash-mark,
#loginPage .mobile-brand{
  display:none !important;
}

#loginPage .login-form-panel{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  background:transparent !important;
  overflow:visible !important;
}

#loginPage .login-form-card{
  position:relative !important;
  width:min(100%, 520px) !important;
  max-width:520px !important;
  padding:46px 48px 38px !important;
  margin:0 auto !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(211,224,242,.88) !important;
  border-radius:28px !important;
  box-shadow:
    0 34px 90px rgba(7,22,46,.13),
    0 10px 30px rgba(21,89,233,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  text-align:center !important;
  overflow:hidden !important;
}

#loginPage .login-form-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:5px !important;
  background:linear-gradient(90deg,#0b46d9 0%,#2879ff 50%,#0b46d9 100%) !important;
}

#loginPage .login-form-card::after{
  content:"" !important;
  position:absolute !important;
  right:-120px !important;
  top:-120px !important;
  width:240px !important;
  height:240px !important;
  border-radius:999px !important;
  background:radial-gradient(circle, rgba(21,89,233,.12), transparent 70%) !important;
  pointer-events:none !important;
}

#loginPage .login-top-logo{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 auto 26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#loginPage .login-top-logo img{
  width:min(310px, 82%) !important;
  max-width:310px !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  filter:drop-shadow(0 10px 22px rgba(7,22,46,.08)) !important;
}

#loginPage .login-welcome{
  position:relative !important;
  z-index:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  margin:0 auto 10px !important;
  padding:7px 13px !important;
  border-radius:999px !important;
  background:#edf5ff !important;
  border:1px solid #d8e7ff !important;
  color:#0b5be7 !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:850 !important;
  text-align:center !important;
}

#loginPage .login-form-card h1{
  position:relative !important;
  z-index:1 !important;
  margin:0 0 34px !important;
  color:#07162e !important;
  font-size:44px !important;
  line-height:1.02 !important;
  font-weight:950 !important;
  letter-spacing:-.055em !important;
  text-align:center !important;
}

#loginPage .simple-login-form,
#loginPage #loginForm{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  max-width:420px !important;
  margin:0 auto !important;
}

#loginPage .form-group{
  margin:0 0 20px !important;
  text-align:left !important;
}

#loginPage .form-group label{
  display:block !important;
  margin:0 0 9px !important;
  color:#07162e !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
}

#loginPage .login-input-wrap{
  position:relative !important;
  width:100% !important;
}

#loginPage .field-symbol{
  position:absolute !important;
  left:17px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  color:#7586a3 !important;
  font-size:16px !important;
  line-height:1 !important;
}

#loginPage input.form-control{
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  border-radius:14px !important;
  border:1px solid #d5e1f1 !important;
  background:#ffffff !important;
  color:#07162e !important;
  font-size:15px !important;
  font-weight:650 !important;
  padding:0 18px 0 52px !important;
  outline:none !important;
  box-shadow:0 7px 22px rgba(7,22,46,.04) !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

#loginPage input.form-control::placeholder{
  color:#72819a !important;
  font-weight:600 !important;
}

#loginPage input.form-control:focus{
  background:#fff !important;
  border-color:#1d66f2 !important;
  box-shadow:0 0 0 4px rgba(29,102,242,.12),0 10px 26px rgba(7,22,46,.06) !important;
}

#loginPage button[type="submit"],
#loginPage .btn-primary{
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  margin:10px 0 0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,#0b47d9 0%,#1b63ef 55%,#0632b8 100%) !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  box-shadow:0 18px 38px rgba(14,78,222,.27) !important;
  cursor:pointer !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

#loginPage button[type="submit"]:hover,
#loginPage .btn-primary:hover{
  transform:translateY(-1px) !important;
  filter:saturate(1.05) !important;
  box-shadow:0 22px 48px rgba(14,78,222,.34) !important;
}

#loginPage .login-secure-note{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  max-width:420px !important;
  min-height:54px !important;
  margin:22px auto 0 !important;
  padding:13px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#f5f8fd 0%,#eef4fb 100%) !important;
  border:1px solid #e1e9f5 !important;
  color:#536783 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  text-align:center !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
}

#loginPage .login-secure-note .secure-icon{
  width:22px !important;
  height:22px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#1559e9 !important;
  background:#e7f0ff !important;
  font-size:13px !important;
  font-weight:900 !important;
}

@media(max-width:700px){
  html:has(#loginPage:not(.hidden)),
  body:has(#loginPage:not(.hidden)){
    overflow:auto !important;
  }
  #loginPage.login-page{
    position:relative !important;
    height:auto !important;
    min-height:100vh !important;
    padding:18px !important;
    overflow:auto !important;
  }
  #loginPage .login-form-card{
    width:100% !important;
    padding:34px 22px 28px !important;
    border-radius:24px !important;
  }
  #loginPage .login-top-logo{margin-bottom:22px !important;}
  #loginPage .login-top-logo img{width:min(260px, 84%) !important;}
  #loginPage .login-form-card h1{font-size:38px !important;margin-bottom:28px !important;}
  #loginPage input.form-control,
  #loginPage button[type="submit"],
  #loginPage .btn-primary{height:56px !important;min-height:56px !important;}
}


/* =========================================================
   FINAL TOUCH — DASHBOARD COLORS + PRODUCT TITLE
   ========================================================= */
body:has(#loginPage:not(.hidden))::before{
  background:
    radial-gradient(circle at 20% 16%, rgba(31,80,154,.14), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(15,76,129,.10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(8,20,36,.10), transparent 34%),
    linear-gradient(135deg,#f7fbff 0%,#edf4fb 52%,#f9fbff 100%) !important;
}

#loginPage .login-form-card{
  border-color:rgba(205,218,236,.92) !important;
  box-shadow:
    0 34px 95px rgba(8,20,36,.14),
    0 12px 34px rgba(31,80,154,.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

#loginPage .login-form-card::before{
  background:linear-gradient(90deg,#0b2d57 0%,#1f509a 48%,#2b75c9 100%) !important;
}

#loginPage .login-product-title{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  max-width:390px !important;
  margin:0 auto 14px !important;
  color:#0b2d57 !important;
  font-size:20px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  text-align:center !important;
}

#loginPage .login-welcome{
  background:#eef5ff !important;
  border-color:#d7e5f8 !important;
  color:#1f509a !important;
}

#loginPage .login-form-card h1{
  color:#081424 !important;
  margin-bottom:30px !important;
}

#loginPage .form-group label{
  color:#081424 !important;
}

#loginPage input.form-control{
  border-color:#d3deec !important;
  background:#fbfdff !important;
  box-shadow:0 7px 22px rgba(8,20,36,.04) !important;
}

#loginPage input.form-control:focus{
  border-color:#1f509a !important;
  box-shadow:0 0 0 4px rgba(31,80,154,.13),0 10px 26px rgba(8,20,36,.06) !important;
}

#loginPage .field-symbol{
  color:#61738e !important;
}

#loginPage button[type="submit"],
#loginPage .btn-primary{
  background:linear-gradient(135deg,#0b2d57 0%,#1f509a 52%,#2b75c9 100%) !important;
  box-shadow:0 18px 38px rgba(31,80,154,.28) !important;
}

#loginPage button[type="submit"]:hover,
#loginPage .btn-primary:hover{
  box-shadow:0 22px 48px rgba(31,80,154,.36) !important;
}

#loginPage .login-secure-note{
  background:linear-gradient(180deg,#f5f8fc 0%,#eef3f8 100%) !important;
  border-color:#e0e8f3 !important;
  color:#50627d !important;
}

#loginPage .login-secure-note .secure-icon{
  color:#1f509a !important;
  background:#e8f1fb !important;
}

@media(max-width:700px){
  #loginPage .login-product-title{
    font-size:18px !important;
    max-width:320px !important;
    margin-bottom:12px !important;
  }
}


/* =========================================================
   FINAL FIX — PRODUCT TITLE IN PLACE OF BIENVENUE
   ========================================================= */
#loginPage .login-product-title{
  display:none !important;
}

#loginPage .login-welcome{
  display:block !important;
  width:100% !important;
  max-width:420px !important;
  margin:0 auto 12px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:#0b2d57 !important;
  font-size:20px !important;
  line-height:1.28 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  text-align:center !important;
}

#loginPage .login-form-card h1{
  font-size:38px !important;
  line-height:1.05 !important;
  margin:0 0 28px !important;
  letter-spacing:-.045em !important;
}

#loginPage .login-top-logo{
  margin-bottom:22px !important;
}

#loginPage .login-top-logo img{
  width:min(300px, 82%) !important;
  max-width:300px !important;
}

@media(max-width:700px){
  #loginPage .login-welcome{
    font-size:17px !important;
    max-width:330px !important;
    margin-bottom:10px !important;
  }
  #loginPage .login-form-card h1{
    font-size:34px !important;
    margin-bottom:24px !important;
  }
}


/* =========================================================
   FINAL LOGIN STYLE — CLEAN SAAS CARD, NO CONNEXION TITLE
   ========================================================= */
#loginPage.login-page{
  min-height:100vh!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px!important;
  overflow:auto!important;
  background:
    radial-gradient(circle at 10% 10%, rgba(33,116,223,.10), transparent 28%),
    radial-gradient(circle at 90% 85%, rgba(0,58,130,.10), transparent 30%),
    linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

#loginPage .login-shell,
#loginPage .login-card,
#loginPage .login-form-panel{
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-width:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

#loginPage .login-splash-panel,
#loginPage .splash-bg,
#loginPage .splash-mark,
#loginPage .mobile-brand,
#loginPage .login-form-card h1{
  display:none!important;
}

#loginPage .login-form-card{
  position:relative!important;
  width:min(560px, calc(100vw - 32px))!important;
  min-height:auto!important;
  padding:46px 52px 42px!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(184,204,232,.75)!important;
  box-shadow:0 34px 90px rgba(7,22,46,.13),0 1px 0 rgba(255,255,255,.9) inset!important;
  backdrop-filter:blur(18px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:hidden!important;
}

#loginPage .login-form-card:before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:5px!important;
  background:linear-gradient(90deg,#0b2d57 0%,#1f509a 46%,#2c7be5 100%)!important;
}

#loginPage .login-form-card:after{
  content:""!important;
  position:absolute!important;
  width:270px!important;
  height:270px!important;
  border-radius:50%!important;
  right:-130px!important;
  top:-130px!important;
  background:radial-gradient(circle,rgba(44,123,229,.13),transparent 68%)!important;
  pointer-events:none!important;
}

#loginPage .login-top-logo{
  display:block!important;
  width:100%!important;
  margin:0 0 24px!important;
  text-align:center!important;
  position:relative!important;
  z-index:1!important;
}

#loginPage .login-top-logo img{
  display:block!important;
  width:min(310px,86%)!important;
  max-width:310px!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0 auto!important;
  filter:drop-shadow(0 10px 20px rgba(7,22,46,.08))!important;
}

#loginPage .login-welcome{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:455px!important;
  min-height:48px!important;
  margin:0 auto 30px!important;
  padding:11px 20px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#0b2d57 0%,#143f7d 55%,#1f509a 100%)!important;
  color:#ffffff!important;
  box-shadow:0 16px 35px rgba(11,45,87,.18)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:850!important;
  letter-spacing:-.025em!important;
  text-align:center!important;
}

#loginPage .simple-login-form{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  max-width:430px!important;
  margin:0 auto!important;
  display:block!important;
  text-align:left!important;
}

#loginPage .form-group{
  width:100%!important;
  margin:0 0 22px!important;
  position:relative!important;
}

#loginPage .form-group label{
  display:block!important;
  margin:0 0 10px!important;
  color:#07162e!important;
  font-size:15px!important;
  line-height:1.1!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
}

#loginPage .login-input-wrap{
  position:relative!important;
  width:100%!important;
}

#loginPage .field-symbol{
  position:absolute!important;
  left:20px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:2!important;
  width:18px!important;
  text-align:center!important;
  color:#0b4e99!important;
  font-size:17px!important;
  line-height:1!important;
  opacity:.82!important;
}

#loginPage #username,
#loginPage #password,
#loginPage input.form-control{
  width:100%!important;
  height:64px!important;
  min-height:64px!important;
  border-radius:13px!important;
  border:1.4px solid #d4dfef!important;
  background:#ffffff!important;
  color:#07162e!important;
  box-shadow:0 12px 28px rgba(7,22,46,.035)!important;
  padding:0 20px 0 58px!important;
  font-size:16px!important;
  font-weight:600!important;
  outline:none!important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease!important;
}

#loginPage #username::placeholder,
#loginPage #password::placeholder{
  color:#7887a1!important;
  font-weight:600!important;
}

#loginPage #username:focus,
#loginPage #password:focus,
#loginPage input.form-control:focus{
  border-color:#1f6fd1!important;
  box-shadow:0 0 0 4px rgba(31,111,209,.13),0 16px 34px rgba(7,22,46,.06)!important;
}

#loginPage button[type="submit"],
#loginPage .btn-primary{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  height:64px!important;
  min-height:64px!important;
  margin:4px 0 0!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#092e70 0%,#0b4fd0 58%,#2d7be8 100%)!important;
  color:#ffffff!important;
  box-shadow:0 18px 42px rgba(11,79,208,.26)!important;
  font-size:17px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  cursor:pointer!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}

#loginPage button[type="submit"]:hover,
#loginPage .btn-primary:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 24px 50px rgba(11,79,208,.34)!important;
}

#loginPage .login-secure-note{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  max-width:430px!important;
  min-height:58px!important;
  margin:26px auto 0!important;
  padding:13px 18px!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#f7faff 0%,#eef4fb 100%)!important;
  border:1px solid #e2eaf5!important;
  color:#40536f!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:11px!important;
  font-size:15px!important;
  font-weight:750!important;
  text-align:center!important;
}

#loginPage .login-secure-note .secure-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  border-radius:8px!important;
  background:#e8f1fb!important;
  color:#0b4e99!important;
  font-size:13px!important;
  line-height:1!important;
}

@media(max-width:700px){
  #loginPage.login-page{padding:16px!important;align-items:center!important;}
  #loginPage .login-form-card{width:100%!important;padding:36px 22px 28px!important;border-radius:22px!important;}
  #loginPage .login-top-logo img{width:min(250px,85%)!important;}
  #loginPage .login-welcome{font-size:15px!important;min-height:44px!important;margin-bottom:24px!important;padding:10px 14px!important;}
  #loginPage #username,#loginPage #password,#loginPage input.form-control{height:58px!important;min-height:58px!important;font-size:15px!important;}
  #loginPage button[type="submit"],#loginPage .btn-primary{height:58px!important;min-height:58px!important;}
}


/* =========================================================
   FINAL REQUEST — LOGIN SAME AS REFERENCE IMAGE
   Keep Connexion, SaaS typography, navy pill title
   ========================================================= */
#loginPage.login-page:not(.hidden){
  min-height:100vh!important;
  width:100%!important;
  padding:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 7% 82%, rgba(29,111,208,.10) 0 0, transparent 270px),
    radial-gradient(circle at 96% 5%, rgba(29,111,208,.08) 0 0, transparent 310px),
    linear-gradient(135deg,#fbfdff 0%,#f5f9ff 48%,#edf5ff 100%)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
#loginPage.login-page:not(.hidden)::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle, rgba(29,111,208,.55) 1.6px, transparent 2px) 18px 75px/24px 24px no-repeat,
    radial-gradient(circle, rgba(29,111,208,.45) 1.6px, transparent 2px) calc(100% - 165px) calc(100% - 90px)/24px 24px no-repeat,
    repeating-radial-gradient(circle at 100% 0, transparent 0 72px, rgba(29,111,208,.10) 73px 75px, transparent 76px 122px),
    repeating-radial-gradient(circle at 0 100%, transparent 0 82px, rgba(29,111,208,.09) 83px 85px, transparent 86px 132px)!important;
  opacity:.65!important;
}
#loginPage .login-shell,
#loginPage .login-card,
#loginPage .login-form-panel{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-width:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#loginPage .login-splash-panel,
#loginPage .splash-bg,
#loginPage .splash-mark,
#loginPage .mobile-brand{
  display:none!important;
}
#loginPage .login-form-card{
  position:relative!important;
  width:min(640px,calc(100vw - 40px))!important;
  min-height:auto!important;
  padding:58px 66px 52px!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(176,199,229,.72)!important;
  box-shadow:0 28px 90px rgba(15,43,82,.12),0 1px 0 rgba(255,255,255,.95) inset!important;
  backdrop-filter:blur(18px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:hidden!important;
}
#loginPage .login-form-card::before,
#loginPage .login-form-card::after{
  display:none!important;
}
#loginPage .login-top-logo{
  display:block!important;
  width:100%!important;
  margin:0 0 28px!important;
  text-align:center!important;
  position:relative!important;
  z-index:2!important;
}
#loginPage .login-top-logo img{
  display:block!important;
  width:min(410px,90%)!important;
  max-width:410px!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0 auto!important;
  filter:drop-shadow(0 10px 20px rgba(7,22,46,.06))!important;
}
#loginPage .login-welcome{
  position:relative!important;
  z-index:2!important;
  width:min(420px,100%)!important;
  min-height:44px!important;
  margin:0 auto 28px!important;
  padding:10px 18px!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,#06265a 0%,#083475 50%,#062b63 100%)!important;
  color:#ffffff!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 14px 34px rgba(6,38,90,.22)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:20px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
}
#loginPage .login-form-card h1{
  display:block!important;
  position:relative!important;
  z-index:2!important;
  margin:0 0 42px!important;
  padding:0!important;
  color:#071a36!important;
  font-size:44px!important;
  line-height:1.05!important;
  font-weight:850!important;
  letter-spacing:-.055em!important;
  text-align:center!important;
}
#loginPage .login-form-card h1::after{
  content:""!important;
  display:block!important;
  width:64px!important;
  height:4px!important;
  border-radius:999px!important;
  margin:20px auto 0!important;
  background:linear-gradient(90deg,#0b4fd0,#2d7be8)!important;
  box-shadow:0 6px 16px rgba(11,79,208,.22)!important;
}
#loginPage .simple-login-form{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:470px!important;
  margin:0 auto!important;
  text-align:left!important;
}
#loginPage .form-group{
  margin:0 0 24px!important;
}
#loginPage .form-group label{
  margin:0 0 12px!important;
  color:#071a36!important;
  font-size:18px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
}
#loginPage .login-input-wrap{
  position:relative!important;
  width:100%!important;
}
#loginPage .field-symbol{
  position:absolute!important;
  left:22px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:24px!important;
  height:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:3!important;
  color:#0b4e99!important;
  font-size:22px!important;
  line-height:1!important;
  opacity:1!important;
}
#loginPage #username,
#loginPage #password,
#loginPage input.form-control{
  width:100%!important;
  height:68px!important;
  min-height:68px!important;
  border-radius:13px!important;
  border:1.5px solid #d4dfef!important;
  background:#ffffff!important;
  color:#071a36!important;
  padding:0 22px 0 72px!important;
  box-shadow:none!important;
  outline:none!important;
  font-size:20px!important;
  font-weight:500!important;
  letter-spacing:-.02em!important;
  transition:border-color .18s ease,box-shadow .18s ease!important;
}
#loginPage #username::placeholder,
#loginPage #password::placeholder{
  color:#7a8aa5!important;
  font-weight:500!important;
}
#loginPage #username:focus,
#loginPage #password:focus,
#loginPage input.form-control:focus{
  border-color:#0b4fd0!important;
  box-shadow:0 0 0 4px rgba(11,79,208,.10)!important;
}
#loginPage button[type="submit"],
#loginPage .btn-primary{
  width:100%!important;
  height:70px!important;
  min-height:70px!important;
  margin:6px 0 0!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#062b63 0%,#083b8a 52%,#07449f 100%)!important;
  color:#ffffff!important;
  box-shadow:0 18px 38px rgba(6,43,99,.20)!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  cursor:pointer!important;
}
#loginPage button[type="submit"]::before,
#loginPage .btn-primary::before{
  content:"↪"!important;
  font-size:28px!important;
  line-height:1!important;
  font-weight:500!important;
}
#loginPage .login-secure-note{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:470px!important;
  min-height:66px!important;
  margin:30px auto 0!important;
  padding:14px 22px!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%)!important;
  border:0!important;
  box-shadow:none!important;
  color:#0b4e99!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:13px!important;
  font-size:20px!important;
  line-height:1.25!important;
  font-weight:500!important;
  text-align:center!important;
}
#loginPage .login-secure-note .secure-icon{
  display:inline-flex!important;
  width:26px!important;
  height:26px!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#0b4fd0!important;
  font-size:22px!important;
}
@media(max-width:760px){
  #loginPage.login-page:not(.hidden){padding:16px!important;overflow:auto!important;}
  #loginPage .login-form-card{width:100%!important;padding:36px 22px 30px!important;border-radius:22px!important;}
  #loginPage .login-top-logo img{width:min(300px,90%)!important;}
  #loginPage .login-welcome{font-size:16px!important;min-height:42px!important;margin-bottom:22px!important;}
  #loginPage .login-form-card h1{font-size:36px!important;margin-bottom:34px!important;}
  #loginPage .form-group label{font-size:15px!important;}
  #loginPage #username,#loginPage #password,#loginPage input.form-control{height:58px!important;min-height:58px!important;font-size:15px!important;padding-left:58px!important;}
  #loginPage .field-symbol{left:18px!important;font-size:18px!important;}
  #loginPage button[type="submit"],#loginPage .btn-primary{height:60px!important;min-height:60px!important;font-size:17px!important;}
  #loginPage .login-secure-note{min-height:58px!important;font-size:15px!important;}
}


/* ======================================================
   FINAL OVERRIDE — LOGIN COMPACT CARD LIKE REFERENCE
   ====================================================== */
html:has(#loginPage:not(.hidden)),
body:has(#loginPage:not(.hidden)){
  width:100%!important;
  height:100%!important;
  margin:0!important;
  overflow:hidden!important;
}

#loginPage.login-page:not(.hidden){
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.98) 0%, rgba(244,249,255,.96) 36%, transparent 58%),
    radial-gradient(circle at 82% 88%, rgba(231,241,255,.82) 0%, rgba(247,251,255,.92) 34%, transparent 56%),
    linear-gradient(135deg,#f8fbff 0%,#edf5ff 100%)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

#loginPage.login-page:not(.hidden)::before,
#loginPage.login-page:not(.hidden)::after{
  content:""!important;
  position:absolute!important;
  inset:-12%!important;
  pointer-events:none!important;
  background-image:
    radial-gradient(circle at 4px 4px, rgba(36,104,215,.35) 1.4px, transparent 1.5px),
    repeating-radial-gradient(ellipse at 12% 50%, transparent 0 74px, rgba(43,120,220,.095) 75px 77px, transparent 78px 150px),
    repeating-radial-gradient(ellipse at 92% 38%, transparent 0 74px, rgba(43,120,220,.085) 75px 77px, transparent 78px 150px)!important;
  background-size:30px 30px, 100% 100%, 100% 100%!important;
  opacity:.72!important;
}

#loginPage.login-page:not(.hidden)::after{
  filter:blur(.2px)!important;
  opacity:.42!important;
  transform:rotate(-6deg) scale(1.04)!important;
}

#loginPage .login-shell{
  position:relative!important;
  z-index:2!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-width:none!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  overflow:visible!important;
}

#loginPage .login-splash-panel,
#loginPage .splash-bg,
#loginPage .splash-mark,
#loginPage .mobile-brand{
  display:none!important;
}

#loginPage .login-form-panel{
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  background:transparent!important;
}

#loginPage .login-form-card{
  position:relative!important;
  z-index:2!important;
  width:500px!important;
  max-width:calc(100vw - 34px)!important;
  min-height:0!important;
  padding:36px 42px 34px!important;
  margin:0!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(177,202,235,.86)!important;
  box-shadow:0 24px 70px rgba(25,70,130,.13)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}

#loginPage .login-form-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:4px!important;
  background:linear-gradient(90deg,#082a5e 0%,#0c4ed0 58%,#2f7cf6 100%)!important;
}

#loginPage .login-form-card::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:radial-gradient(circle at 50% 0%,rgba(33,115,220,.08),transparent 42%)!important;
  pointer-events:none!important;
}

#loginPage .login-top-logo{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  justify-content:center!important;
  width:100%!important;
  margin:0 0 22px!important;
  padding:0!important;
}

#loginPage .login-top-logo img{
  display:block!important;
  width:310px!important;
  max-width:86%!important;
  height:auto!important;
  object-fit:contain!important;
}

#loginPage .login-welcome{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:380px!important;
  min-height:auto!important;
  margin:0 auto 24px!important;
  padding:10px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,#0b3575 0%,#061d45 100%)!important;
  box-shadow:0 12px 26px rgba(7,32,75,.18)!important;
  color:#ffffff!important;
  text-align:center!important;
  font-size:17px!important;
  line-height:1.18!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
}

#loginPage .login-form-card h1{
  position:relative!important;
  z-index:2!important;
  margin:0 0 36px!important;
  color:#071a39!important;
  font-size:38px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  text-align:center!important;
}

#loginPage .login-form-card h1::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:-17px!important;
  width:58px!important;
  height:4px!important;
  border-radius:999px!important;
  transform:translateX(-50%)!important;
  background:#0f63f4!important;
}

#loginPage .simple-login-form,
#loginPage .login-form-card form{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:380px!important;
  margin:0 auto!important;
  padding:0!important;
}

#loginPage .form-group{
  width:100%!important;
  margin:0 0 18px!important;
  padding:0!important;
  position:relative!important;
}

#loginPage .form-group label{
  display:block!important;
  margin:0 0 9px!important;
  color:#071a39!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:850!important;
  text-align:left!important;
}

#loginPage .login-input-wrap{
  position:relative!important;
  width:100%!important;
  display:block!important;
}

#loginPage .field-symbol{
  position:absolute!important;
  left:19px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:3!important;
  color:#0f4fa8!important;
  font-size:18px!important;
  line-height:1!important;
  opacity:.96!important;
}

#loginPage #username,
#loginPage #password,
#loginPage input.form-control{
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  border-radius:10px!important;
  border:1px solid #d5e0ef!important;
  background:#ffffff!important;
  color:#071a39!important;
  padding:0 18px 0 56px!important;
  font-size:15px!important;
  font-weight:650!important;
  outline:none!important;
  box-shadow:none!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}

#loginPage #username::placeholder,
#loginPage #password::placeholder,
#loginPage input.form-control::placeholder{
  color:#7587a3!important;
  font-weight:500!important;
}

#loginPage #username:focus,
#loginPage #password:focus,
#loginPage input.form-control:focus{
  border-color:#1f6ff2!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(31,111,242,.10)!important;
}

#loginPage button[type="submit"],
#loginPage .btn-primary{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:58px!important;
  min-height:58px!important;
  margin:8px 0 0!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#0e64f4 0%,#1029b8 100%)!important;
  box-shadow:0 16px 34px rgba(17,78,210,.22)!important;
  color:#ffffff!important;
  font-size:15px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  cursor:pointer!important;
}

#loginPage button[type="submit"]::before,
#loginPage .btn-primary::before{
  content:"↪"!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:600!important;
}

#loginPage .login-secure-note{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:380px!important;
  min-height:58px!important;
  margin:24px auto 0!important;
  padding:12px 16px!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#f7fbff 0%,#edf5ff 100%)!important;
  border:0!important;
  box-shadow:none!important;
  color:#0b4e99!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:750!important;
  text-align:center!important;
}

#loginPage .login-secure-note .secure-icon{
  color:#0b63f6!important;
  font-size:17px!important;
  line-height:1!important;
}

@media(max-width:760px){
  #loginPage.login-page:not(.hidden){padding:16px!important;overflow:auto!important;}
  #loginPage .login-form-card{width:100%!important;padding:30px 22px 28px!important;border-radius:18px!important;}
  #loginPage .login-top-logo img{width:min(280px,88%)!important;}
  #loginPage .login-welcome{font-size:15px!important;max-width:100%!important;margin-bottom:22px!important;}
  #loginPage .login-form-card h1{font-size:34px!important;margin-bottom:34px!important;}
  #loginPage .simple-login-form,#loginPage .login-form-card form,#loginPage .login-secure-note{max-width:100%!important;}
}


/* ======================================================
   FINAL OVERRIDE — CENTER LOGIN WITH TOP/BOTTOM SPACE
   ====================================================== */
#loginPage.login-page:not(.hidden){
  padding:42px 18px!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
}

#loginPage .login-shell,
#loginPage .login-form-panel{
  height:auto!important;
  min-height:0!important;
  max-height:calc(100vh - 84px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

#loginPage .login-form-card{
  width:500px!important;
  max-width:calc(100vw - 36px)!important;
  max-height:calc(100vh - 84px)!important;
  margin:auto!important;
  padding:32px 42px 30px!important;
  overflow:visible!important;
}

#loginPage .login-top-logo{margin-bottom:18px!important;}
#loginPage .login-top-logo img{width:300px!important;}
#loginPage .login-welcome{margin-bottom:20px!important;}
#loginPage .login-form-card h1{font-size:36px!important;margin-bottom:34px!important;}
#loginPage .form-group{margin-bottom:16px!important;}
#loginPage #username,
#loginPage #password,
#loginPage input.form-control{height:52px!important;min-height:52px!important;}
#loginPage button[type="submit"],
#loginPage .btn-primary{height:56px!important;min-height:56px!important;margin-top:6px!important;}
#loginPage .login-secure-note{min-height:54px!important;margin-top:22px!important;}

@media(max-height:760px){
  #loginPage.login-page:not(.hidden){padding:24px 14px!important;}
  #loginPage .login-shell,
  #loginPage .login-form-panel,
  #loginPage .login-form-card{max-height:calc(100vh - 48px)!important;}
  #loginPage .login-form-card{padding:24px 38px 22px!important;}
  #loginPage .login-top-logo{margin-bottom:14px!important;}
  #loginPage .login-top-logo img{width:270px!important;}
  #loginPage .login-welcome{margin-bottom:16px!important;padding:9px 16px!important;font-size:15px!important;}
  #loginPage .login-form-card h1{font-size:32px!important;margin-bottom:30px!important;}
  #loginPage .form-group{margin-bottom:13px!important;}
  #loginPage #username,
  #loginPage #password,
  #loginPage input.form-control{height:48px!important;min-height:48px!important;}
  #loginPage button[type="submit"],
  #loginPage .btn-primary{height:52px!important;min-height:52px!important;}
  #loginPage .login-secure-note{min-height:48px!important;margin-top:16px!important;font-size:14px!important;}
}

/* =========================================================
   FINAL OVERRIDE — DOSSIERS LIST / GRID TAILWIND-LIKE CLEAN
   ========================================================= */
#foldersView .folders-card{
  border-radius:30px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid #dbe7f6!important;
  box-shadow:0 18px 55px rgba(15,35,70,.08)!important;
}

#foldersView .folders-card .card-header{
  padding:20px 24px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border-bottom:1px solid #e3edf9!important;
}

#foldersView .folders-card .card-header h3{
  color:#0f172a!important;
  font-size:20px!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
}

#foldersView .search-box input{
  height:46px!important;
  min-height:46px!important;
  border-radius:16px!important;
  border:1px solid #d6e4f7!important;
  background:#f8fbff!important;
  color:#172033!important;
  font-size:14px!important;
  font-weight:750!important;
  padding:0 16px!important;
}

#foldersView .search-box input:focus{
  background:#fff!important;
  border-color:#2563eb!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
}

#foldersView .view-toggle{
  background:#eef5ff!important;
  border:1px solid #d9e8fb!important;
  border-radius:16px!important;
}

#foldersView .view-toggle button.active{
  background:#fff!important;
  color:#1d4ed8!important;
  box-shadow:0 8px 18px rgba(37,99,235,.10)!important;
}

#foldersGrid.dossiers-list-view,
#foldersGrid.folder-list{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  padding:22px!important;
}

#foldersGrid.dossiers-grid-view,
#foldersGrid.folder-grid,
#foldersGrid.grid.folder-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  padding:22px!important;
}

#foldersGrid .dossier-row-card{
  width:100%!important;
  min-width:0!important;
  border:1px solid #dbe7f6!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
  border-radius:24px!important;
  box-shadow:0 10px 26px rgba(15,35,70,.055)!important;
  color:#111827!important;
  cursor:pointer!important;
  text-align:left!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
}

#foldersGrid .dossier-row-card:hover{
  transform:translateY(-2px)!important;
  border-color:#9ec5ff!important;
  background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%)!important;
  box-shadow:0 22px 48px rgba(37,99,235,.12)!important;
}

#foldersGrid.dossiers-list-view .dossier-row-card,
#foldersGrid.folder-list .dossier-row-card{
  min-height:96px!important;
  padding:18px 24px!important;
  display:grid!important;
  grid-template-columns:76px minmax(250px,1.5fr) minmax(120px,.7fr) minmax(130px,.7fr) minmax(96px,.55fr) auto!important;
  align-items:center!important;
  gap:18px!important;
}

#foldersGrid .dossier-folder-icon{
  width:56px!important;
  height:56px!important;
  flex:0 0 56px!important;
  border-radius:18px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#eff6ff,#dbeafe)!important;
  border:1px solid #bfdbfe!important;
  color:#1d4ed8!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 22px rgba(37,99,235,.10)!important;
  position:relative!important;
  overflow:hidden!important;
}

#foldersGrid .dossier-folder-icon::before{
  content:"📁"!important;
  font-size:25px!important;
  line-height:1!important;
}

#foldersGrid .dossier-folder-icon span{
  display:none!important;
}

#foldersGrid .dossier-main{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}

#foldersGrid .dossier-name{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
    color:#111827!important;
  font-size:22px!important;
  line-height:1.15!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
}

#foldersGrid .dossier-subline{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
  color:#64748b!important;
  font-size:13px!important;
  font-weight:800!important;
}

#foldersGrid .dossier-chip{
  display:inline-flex!important;
  align-items:center!important;
  max-width:160px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#eef6ff!important;
  color:#1e40af!important;
  border:1px solid #dbeafe!important;
  font-size:11px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}

#foldersGrid .dossier-dot{
  width:5px!important;
  height:5px!important;
  border-radius:999px!important;
  background:#cbd5e1!important;
  flex:0 0 auto!important;
}

#foldersGrid .dossier-meta-block{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}

#foldersGrid .dossier-meta-block small{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1.1!important;
}

#foldersGrid .dossier-meta-block strong{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#0f172a!important;
  font-size:15px!important;
  font-weight:950!important;
  line-height:1.2!important;
}

#foldersGrid .dossier-ops-block strong{
  width:max-content!important;
  min-width:44px!important;
  height:34px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:12px!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  border:1px solid #bfdbfe!important;
}

#foldersGrid .dossier-status-pill{
  justify-self:end!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  max-width:145px!important;
  padding:7px 12px!important;
  border-radius:999px!important;
  background:#ecfdf5!important;
  color:#047857!important;
  border:1px solid #bbf7d0!important;
  font-size:12px!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#foldersGrid.dossiers-grid-view .dossier-row-card,
#foldersGrid.folder-grid .dossier-row-card,
#foldersGrid.grid.folder-grid .dossier-row-card{
  min-height:190px!important;
  padding:22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:14px!important;
}

#foldersGrid.dossiers-grid-view .dossier-folder-icon,
#foldersGrid.folder-grid .dossier-folder-icon{
  width:58px!important;
  height:58px!important;
}

#foldersGrid.dossiers-grid-view .dossier-name,
#foldersGrid.folder-grid .dossier-name{
  font-size:20px!important;
  white-space:normal!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}

#foldersGrid.dossiers-grid-view .dossier-type-block,
#foldersGrid.dossiers-grid-view .dossier-city-block,
#foldersGrid.dossiers-grid-view .dossier-ops-block,
#foldersGrid.folder-grid .dossier-type-block,
#foldersGrid.folder-grid .dossier-city-block,
#foldersGrid.folder-grid .dossier-ops-block{
  display:none!important;
}

#foldersGrid.dossiers-grid-view .dossier-status-pill,
#foldersGrid.folder-grid .dossier-status-pill{
  position:absolute!important;
  right:18px!important;
  top:18px!important;
}

#foldersGrid .dossiers-empty-state{
  border-radius:22px!important;
  background:#f8fbff!important;
  border:1px dashed #bfdbfe!important;
  padding:38px!important;
  color:#64748b!important;
}

@media(max-width:1280px){
  #foldersGrid.dossiers-list-view .dossier-row-card,
  #foldersGrid.folder-list .dossier-row-card{
    grid-template-columns:68px minmax(220px,1fr) minmax(110px,.6fr) minmax(110px,.6fr) auto!important;
  }
  #foldersGrid.dossiers-list-view .dossier-ops-block,
  #foldersGrid.folder-list .dossier-ops-block{display:flex!important;}
}

@media(max-width:980px){
  #foldersGrid.dossiers-grid-view,
  #foldersGrid.folder-grid,
  #foldersGrid.grid.folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #foldersGrid.dossiers-list-view .dossier-row-card,
  #foldersGrid.folder-list .dossier-row-card{
    grid-template-columns:62px minmax(0,1fr) auto!important;
    gap:14px!important;
  }
  #foldersGrid.dossiers-list-view .dossier-type-block,
  #foldersGrid.dossiers-list-view .dossier-city-block,
  #foldersGrid.folder-list .dossier-type-block,
  #foldersGrid.folder-list .dossier-city-block{display:none!important;}
  #foldersGrid .dossier-name{font-size:19px!important;}
}

@media(max-width:640px){
  #foldersGrid.dossiers-grid-view,
  #foldersGrid.folder-grid,
  #foldersGrid.grid.folder-grid{grid-template-columns:1fr!important;}
  #foldersGrid.dossiers-list-view,
  #foldersGrid.folder-list,
  #foldersGrid.dossiers-grid-view,
  #foldersGrid.folder-grid{padding:14px!important;gap:12px!important;}
  #foldersGrid.dossiers-list-view .dossier-row-card,
  #foldersGrid.folder-list .dossier-row-card{
    min-height:88px!important;
    padding:16px!important;
    border-radius:20px!important;
    grid-template-columns:54px minmax(0,1fr)!important;
  }
  #foldersGrid .dossier-folder-icon{width:48px!important;height:48px!important;border-radius:16px!important;}
  #foldersGrid .dossier-name{font-size:17px!important;}
  #foldersGrid .dossier-status-pill{display:none!important;}
}


/* =========================================================
   PROXIMO - DOSSIERS LIST FINAL OVERRIDE (Tailwind-like)
   Force single clean list view and stop old grid CSS conflicts
   ========================================================= */
#foldersView .card{
  border-radius:28px!important;
  border:1px solid #dbe7f6!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 18px 55px rgba(15,35,70,.08)!important;
  overflow:hidden!important;
}

#foldersView .card-header{
  padding:18px 22px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)!important;
  border-bottom:1px solid #e4edf8!important;
}

#foldersView .view-toggle,
#foldersView #cardsViewBtn{
  display:none!important;
}

#foldersGrid,
#foldersGrid.grid,
#foldersGrid.folder-grid,
#foldersGrid.folder-list,
#foldersGrid.dossiers-grid-view,
#foldersGrid.dossiers-list-view,
#foldersGrid.rc-dossier-list{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  width:100%!important;
  max-width:100%!important;
  gap:12px!important;
  padding:18px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  background:linear-gradient(180deg,#f8fbff 0%,#f3f7fc 100%)!important;
}

#foldersGrid .dossier-list-head{
  display:grid!important;
  grid-template-columns:70px minmax(260px,1fr) minmax(130px,.55fr) minmax(140px,.55fr) minmax(120px,.42fr) minmax(120px,.42fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:0 22px 2px!important;
  color:#6b7a90!important;
  font-size:11px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}

#foldersGrid .folder-card.dossier-row-card,
#foldersGrid .dossier-row-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:70px minmax(260px,1fr) minmax(130px,.55fr) minmax(140px,.55fr) minmax(120px,.42fr) minmax(120px,.42fr)!important;
  align-items:center!important;
  gap:18px!important;
  width:100%!important;
  max-width:100%!important;
  min-height:86px!important;
  padding:16px 22px!important;
  margin:0!important;
  border:1px solid #d9e6f5!important;
  border-radius:22px!important;
  background:#ffffff!important;
  box-shadow:0 8px 24px rgba(15,35,70,.045)!important;
  color:#111827!important;
  text-align:left!important;
  overflow:hidden!important;
  transform:none!important;
}

#foldersGrid .dossier-row-card:hover{
  transform:translateY(-2px)!important;
  border-color:#b9d6ff!important;
  box-shadow:0 18px 42px rgba(37,99,235,.12)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}

#foldersGrid .dossier-folder-icon{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#eff6ff,#dbeafe)!important;
  border:1px solid #c7ddff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 22px rgba(37,99,235,.10)!important;
}

#foldersGrid .dossier-folder-icon::before{
  content:"📁"!important;
  font-size:24px!important;
}

#foldersGrid .dossier-folder-icon span{display:none!important;}

#foldersGrid .dossier-main,
#foldersGrid .dossier-meta-block{
  min-width:0!important;
}

#foldersGrid .dossier-name{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:21px!important;
  line-height:1.1!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  color:#111827!important;
}

#foldersGrid .dossier-subline{
  margin-top:6px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:750!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

#foldersGrid .dossier-chip{
  max-width:140px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:#eef6ff!important;
  color:#1d4ed8!important;
  border:1px solid #dbeafe!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
}

#foldersGrid .dossier-meta-block small{
  display:block!important;
  margin-bottom:5px!important;
  color:#708197!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}

#foldersGrid .dossier-meta-block strong{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#111827!important;
  font-size:14px!important;
  font-weight:900!important;
}

#foldersGrid .dossier-ops-block strong{
  width:max-content!important;
  min-width:42px!important;
  height:32px!important;
  padding:0 11px!important;
  border-radius:12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  border:1px solid #bfdbfe!important;
}

#foldersGrid .dossier-status-pill{
  position:static!important;
  justify-self:end!important;
  min-height:32px!important;
  max-width:118px!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:#ecfdf5!important;
  color:#047857!important;
  border:1px solid #bbf7d0!important;
  font-size:11px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

@media(max-width:1180px){
  #foldersGrid .dossier-list-head,
  #foldersGrid .dossier-row-card{
    grid-template-columns:64px minmax(220px,1fr) minmax(110px,.45fr) minmax(110px,.45fr) minmax(92px,.35fr)!important;
  }
  #foldersGrid .dossier-list-head span:last-child,
  #foldersGrid .dossier-status-pill{display:none!important;}
}

@media(max-width:860px){
  #foldersGrid{padding:14px!important;}
  #foldersGrid .dossier-list-head{display:none!important;}
  #foldersGrid .dossier-row-card{
    grid-template-columns:58px minmax(0,1fr) auto!important;
    min-height:82px!important;
    padding:14px!important;
    border-radius:20px!important;
  }
  #foldersGrid .dossier-type-block,
  #foldersGrid .dossier-city-block,
  #foldersGrid .dossier-ops-block{display:none!important;}
  #foldersGrid .dossier-folder-icon{width:50px!important;height:50px!important;min-width:50px!important;}
  #foldersGrid .dossier-name{font-size:18px!important;}
}

@media(max-width:560px){
  #foldersGrid .dossier-row-card{grid-template-columns:52px minmax(0,1fr)!important;}
  #foldersGrid .dossier-status-pill{display:none!important;}
}

/* =========================================================
   Dossiers pagination - 10 par page
   ========================================================= */
#dossiersPagination,
.dossiers-pagination {
  width: 100% !important;
  margin: 22px 0 8px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

#dossiersPagination.hidden,
.dossiers-pagination.hidden {
  display: none !important;
}

#dossiersPagination .pg-info {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#dossiersPagination .pg-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#dossiersPagination .pg-btn {
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 13px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease !important;
}

#dossiersPagination .pg-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: #1d4ed8 !important;
  color: #1d4ed8 !important;
  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.12) !important;
}

#dossiersPagination .pg-btn.active {
  background: linear-gradient(135deg, #1d4ed8, #0f766e) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(29, 78, 216, 0.22) !important;
}

#dossiersPagination .pg-btn:disabled {
  cursor: not-allowed !important;
  opacity: .45 !important;
  background: #f8fafc !important;
}

#dossiersPagination .pg-dots {
  color: #94a3b8 !important;
  font-weight: 900 !important;
  padding: 0 2px !important;
}

@media (max-width: 780px) {
  #dossiersPagination,
  .dossiers-pagination {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px !important;
  }

  #dossiersPagination .pg-info {
    text-align: center !important;
  }

  #dossiersPagination .pg-actions {
    justify-content: center !important;
  }

  #dossiersPagination .pg-btn {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 11px !important;
  }
}


/* =========================================================
   PROXIMO - PAGINATION DOSSIERS VISIBLE FINAL
   ========================================================= */
#foldersView #dossiersPagination,
#foldersView .dossiers-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:16px 20px 20px!important;
  margin:0!important;
  border-top:1px solid #e3edf8!important;
  background:#ffffff!important;
  visibility:visible!important;
  opacity:1!important;
}
#foldersView #dossiersPagination.hidden,
#foldersView .dossiers-pagination.hidden{
  display:flex!important;
}
#foldersView #dossiersPagination .pg-info{
  color:#64748b!important;
  font-size:13px!important;
  font-weight:700!important;
}
#foldersView #dossiersPagination .pg-info span{color:#2563eb!important;}
#foldersView #dossiersPagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
#foldersView #dossiersPagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 13px!important;
  border-radius:12px!important;
  border:1px solid #dbe7f6!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:800!important;
  cursor:pointer!important;
  box-shadow:0 8px 20px rgba(15,35,70,.06)!important;
}
#foldersView #dossiersPagination .pg-btn.active,
#foldersView #dossiersPagination .pg-btn:hover:not(:disabled){
  background:#1d4ed8!important;
  border-color:#1d4ed8!important;
  color:#fff!important;
}
#foldersView #dossiersPagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}
#foldersView #dossiersPagination .pg-dots{
  color:#94a3b8!important;
  font-weight:900!important;
  padding:0 4px!important;
}
@media(max-width:700px){
  #foldersView #dossiersPagination,
  #foldersView .dossiers-pagination{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
}

/* compact login override */
#loginPage .login-card,
#loginPage .auth-card,
#loginPage .login-box{
max-width:480px!important;
min-height:auto!important;
padding:38px 34px!important;
border-radius:28px!important;
box-shadow:0 20px 60px rgba(15,23,42,.10)!important;
margin:40px auto!important;
background:rgba(255,255,255,.92)!important;
backdrop-filter:blur(12px)!important;
}
#loginPage{
background:linear-gradient(135deg,#f4f8ff 0%,#eef5ff 40%,#f8fbff 100%)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:60px 20px!important;
}

/* ================================
   PROXIMO - Liste dossiers premium v10
   ================================ */
#foldersGrid.dossiers-list-view,
#foldersGrid.folder-list{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  padding:20px!important;
}

#foldersGrid .dossier-list-head{
  display:grid!important;
  grid-template-columns:64px minmax(260px,1.7fr) minmax(110px,.7fr) minmax(130px,.8fr) minmax(110px,.6fr) minmax(130px,.7fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding:0 24px 8px!important;
  color:#718096!important;
  font-size:12px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}

#foldersGrid .dossier-row-card{
  width:100%!important;
  border:1px solid #dbe7f6!important;
  background:#fff!important;
  border-radius:22px!important;
  box-shadow:0 8px 22px rgba(15,35,70,.045)!important;
  color:#111827!important;
  cursor:pointer!important;
  text-align:left!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}

#foldersGrid .dossier-row-card:hover{
  transform:translateY(-2px)!important;
  border-color:#b8d5fb!important;
  box-shadow:0 18px 38px rgba(37,99,235,.10)!important;
}

#foldersGrid.dossiers-list-view .dossier-row-card,
#foldersGrid.folder-list .dossier-row-card{
  min-height:92px!important;
  padding:18px 24px!important;
  display:grid!important;
  grid-template-columns:64px minmax(260px,1.7fr) minmax(110px,.7fr) minmax(130px,.8fr) minmax(110px,.6fr) minmax(130px,.7fr)!important;
  align-items:center!important;
  gap:18px!important;
}

#foldersGrid .dossier-folder-icon{
  width:52px!important;
  height:52px!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,#f8fbff,#eaf3ff)!important;
  border:1px solid #cfe2ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(37,99,235,.09)!important;
}

#foldersGrid .dossier-folder-icon::before{
  content:"📁"!important;
  font-size:23px!important;
}

#foldersGrid .dossier-name{
  font-size:18px!important;
  line-height:1.15!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
  color:#0f172a!important;
  margin:0!important;
}

#foldersGrid .dossier-subline{
  margin-top:8px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  color:#718096!important;
  font-size:13px!important;
  font-weight:800!important;
}

#foldersGrid .dossier-chip{
  padding:5px 11px!important;
  border-radius:999px!important;
  background:#eef6ff!important;
  color:#2563eb!important;
  border:1px solid #d8e8ff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.06em!important;
}

#foldersGrid .dossier-meta-block{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
}

#foldersGrid .dossier-meta-block small{
  display:none!important;
}

#foldersGrid .dossier-meta-block strong{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#0f172a!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1.2!important;
}

#foldersGrid .dossier-ops-block strong{
  width:auto!important;
  min-width:46px!important;
  height:34px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:12px!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  border:1px solid #bfdbfe!important;
  font-size:14px!important;
}

#foldersGrid .dossier-status-pill{
  justify-self:start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  min-width:126px!important;
  padding:8px 16px!important;
  border-radius:999px!important;
  background:#ecfdf3!important;
  color:#047857!important;
  border:1px solid #bbf7d0!important;
  font-size:13px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

@media(max-width:980px){
  #foldersGrid .dossier-list-head{display:none!important;}
  #foldersGrid.dossiers-list-view .dossier-row-card,
  #foldersGrid.folder-list .dossier-row-card{
    grid-template-columns:54px 1fr!important;
    gap:14px!important;
    padding:18px!important;
  }
  #foldersGrid .dossier-folder-icon{width:50px!important;height:50px!important;}
  #foldersGrid .dossier-type-block,
  #foldersGrid .dossier-city-block,
  #foldersGrid .dossier-ops-block,
  #foldersGrid .dossier-status-pill{
    grid-column:2!important;
    justify-self:start!important;
    margin-top:4px!important;
  }
  #foldersGrid .dossier-meta-block::before{
    content:attr(data-label) ":";
    min-width:88px;
    color:#64748b;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
}


/* PROXIMO v11 - Liste dossiers propre */
#foldersGrid .dossier-list-head,
#foldersGrid.dossiers-list-view .dossier-row-card,
#foldersGrid.folder-list .dossier-row-card{
  grid-template-columns:64px minmax(320px,1.9fr) minmax(115px,.7fr) minmax(140px,.8fr) minmax(120px,.65fr) minmax(135px,.7fr)!important;
}
#foldersGrid .dossier-subline{
  display:none!important;
}
#foldersGrid .dossier-main{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
}
#foldersGrid .dossier-ops-block{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
#foldersGrid .dossier-ops-block strong{
  min-width:58px!important;
  height:38px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:#eef6ff!important;
  color:#1d4ed8!important;
  border:1px solid #bfdbfe!important;
  font-size:15px!important;
  font-weight:950!important;
}
#foldersGrid .dossier-status-pill{
  justify-self:start!important;
}
@media(max-width:980px){
  #foldersGrid .dossier-subline{display:none!important;}
  #foldersGrid .dossier-ops-block{display:flex!important;}
}


/* PROXIMO v13 - Ajustement liste dossiers + compteur opérations */
#foldersView .folders-card .card-header h3{
  font-size:16px!important;
  letter-spacing:-.015em!important;
}
#foldersGrid.dossiers-list-view,
#foldersGrid.folder-list{
  gap:10px!important;
  padding:16px!important;
}
#foldersGrid .dossier-list-head,
#foldersGrid.dossiers-list-view .dossier-row-card,
#foldersGrid.folder-list .dossier-row-card{
  grid-template-columns:52px minmax(260px,1.65fr) minmax(95px,.55fr) minmax(120px,.7fr) minmax(105px,.55fr) minmax(116px,.6fr)!important;
  gap:14px!important;
}
#foldersGrid.dossiers-list-view .dossier-row-card,
#foldersGrid.folder-list .dossier-row-card{
  min-height:76px!important;
  padding:14px 20px!important;
  border-radius:18px!important;
}
#foldersGrid .dossier-folder-icon{
  width:44px!important;
  height:44px!important;
  border-radius:14px!important;
}
#foldersGrid .dossier-folder-icon::before{
  font-size:20px!important;
}
#foldersGrid .dossier-name{
  font-size:15.5px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
#foldersGrid .dossier-meta-block strong{
  font-size:14px!important;
  font-weight:850!important;
}
#foldersGrid .dossier-ops-block strong{
  min-width:48px!important;
  height:32px!important;
  padding:0 12px!important;
  font-size:13px!important;
  border-radius:999px!important;
}
#foldersGrid .dossier-status-pill{
  min-width:104px!important;
  min-height:32px!important;
  padding:7px 13px!important;
  font-size:12px!important;
}
@media(max-width:980px){
  #foldersGrid .dossier-list-head{display:none!important;}
  #foldersGrid.dossiers-list-view .dossier-row-card,
  #foldersGrid.folder-list .dossier-row-card{
    grid-template-columns:44px 1fr!important;
    padding:14px!important;
  }
  #foldersGrid .dossier-name{font-size:15px!important;}
  #foldersGrid .dossier-type-block,
  #foldersGrid .dossier-city-block,
  #foldersGrid .dossier-ops-block,
  #foldersGrid .dossier-status-pill{grid-column:2!important;}
}


/* PROXIMO - Logo restored local v14 */
#appPage .topbar .logo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:168px!important;
  min-width:168px!important;
  max-width:168px!important;
  height:52px!important;
  flex:0 0 168px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#appPage .topbar .logo::before,
#appPage .topbar .logo::after{content:none!important;display:none!important;}
#appPage .topbar .logo img,
#appPage .topbar .logo .topbar-brand-logo{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:160px!important;
  max-width:160px!important;
  height:auto!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
#loginPage .login-top-logo img{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  max-width:190px!important;
  height:auto!important;
  object-fit:contain!important;
}
@media(max-width:720px){
  #appPage .topbar .logo{width:120px!important;min-width:120px!important;max-width:120px!important;flex-basis:120px!important;height:44px!important;}
  #appPage .topbar .logo img{width:116px!important;max-width:116px!important;max-height:38px!important;}
}


/* PROXIMO v17 - compteur opérations actives visible dans la liste dossiers */
#foldersGrid .dossier-list-head,
#foldersGrid.dossiers-list-view .dossier-row-card,
#foldersGrid.folder-list .dossier-row-card{
  grid-template-columns:52px minmax(230px,1.55fr) minmax(90px,.55fr) minmax(105px,.65fr) minmax(132px,.7fr) minmax(108px,.58fr)!important;
}
#foldersGrid.dossiers-list-view .dossier-ops-block,
#foldersGrid.folder-list .dossier-ops-block,
#foldersGrid .dossier-ops-block{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
#foldersGrid .dossier-ops-block strong{
  min-width:42px!important;
  height:30px!important;
  padding:0 11px!important;
  border-radius:999px!important;
  background:#eef6ff!important;
  color:#1d4ed8!important;
  border:1px solid #bfdbfe!important;
  font-size:13px!important;
  font-weight:950!important;
}
@media(max-width:980px){
  #foldersGrid .dossier-ops-block{display:flex!important;grid-column:2!important;}
  #foldersGrid .dossier-ops-block::before{content:attr(data-label) ":";min-width:118px;color:#64748b;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.05em;}
}

/* =====================================================
   PROXIMO v22 - Smaller dashboard title banner
   Banner closer to login style, smaller and aligned with navigation.
   ===================================================== */
#appPage .topbar{
  align-items:center!important;
  gap:16px!important;
  padding:10px 14px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(191,219,254,.65)!important;
  border-radius:24px!important;
  box-shadow:0 18px 45px rgba(15,23,42,.08)!important;
}

#appPage .topbar .topbar-left{
  flex:1 1 auto!important;
  min-width:0!important;
  align-items:center!important;
  gap:18px!important;
}

#appPage .topbar .topbar-left > div:not(.logo){
  flex:0 1 560px!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}

#appPage .topbar h2{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:46px!important;
  margin:0!important;
  padding:9px 20px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#123f7c 0%,#0a3168 48%,#072653 100%)!important;
  border:1px solid rgba(147,197,253,.45)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 8px 18px rgba(7,38,83,.16)!important;
  color:#fff!important;
  font-size:clamp(17px,1.35vw,22px)!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:-.03em!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 2px 6px rgba(0,0,0,.22)!important;
}

#appPage .topbar #breadcrumb{
  display:none!important;
}

#appPage .topbar .topbar-actions{
  align-self:center!important;
  padding-top:0!important;
  flex:0 0 auto!important;
}

@media(max-width:1100px){
  #appPage .topbar{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  #appPage .topbar .topbar-left{
    width:100%!important;
  }
  #appPage .topbar .topbar-left > div:not(.logo){
    flex:1 1 auto!important;
  }
  #appPage .topbar .topbar-actions{
    width:100%!important;
    justify-content:flex-start!important;
  }
}

@media(max-width:720px){
  #appPage .topbar{
    padding:12px!important;
    border-radius:20px!important;
  }
  #appPage .topbar .topbar-left{
    gap:10px!important;
  }
  #appPage .topbar h2{
    min-height:44px!important;
    padding:9px 12px!important;
    border-radius:11px!important;
    font-size:15px!important;
    white-space:normal!important;
  }
}


/* =====================================================
   PROXIMO v23 - Centered compact title + icon-only nav
   ===================================================== */
#appPage .topbar{
  position:sticky!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:82px!important;
  padding:12px 18px!important;
  gap:16px!important;
}

#appPage .topbar .topbar-left{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  gap:0!important;
}

#appPage .topbar .logo{
  margin-right:0!important;
  position:relative!important;
  z-index:3!important;
}

#appPage .topbar .topbar-left > div:not(.logo){
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(520px,42vw)!important;
  max-width:520px!important;
  min-width:360px!important;
  z-index:1!important;
  flex:none!important;
  display:block!important;
}

#appPage .topbar h2{
  width:100%!important;
  min-height:50px!important;
  padding:8px 24px!important;
  border-radius:13px!important;
  font-size:clamp(18px,1.45vw,24px)!important;
  line-height:1.12!important;
  white-space:normal!important;
}

#appPage .topbar .topbar-actions{
  position:relative!important;
  z-index:3!important;
  flex:0 0 auto!important;
  margin-left:auto!important;
  gap:12px!important;
}

#appPage .topbar .topbar-actions .topbar-icon-btn,
#appPage .topbar #homeBtn,
#appPage .topbar #adminBtn{
  width:58px!important;
  min-width:58px!important;
  height:58px!important;
  min-height:58px!important;
  padding:0!important;
  border-radius:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:24px!important;
  line-height:1!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

#appPage .topbar #homeBtn::after,
#appPage .topbar #adminBtn::after{
  content:none!important;
}

@media(max-width:1180px){
  #appPage .topbar .topbar-left > div:not(.logo){
    position:static!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:1 1 auto!important;
  }
  #appPage .topbar .topbar-left{
    flex:1 1 auto!important;
    gap:14px!important;
    width:auto!important;
  }
}

@media(max-width:720px){
  #appPage .topbar{
    min-height:auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  #appPage .topbar .topbar-left{
    width:100%!important;
  }
  #appPage .topbar h2{
    min-height:46px!important;
    font-size:16px!important;
    padding:8px 12px!important;
  }
  #appPage .topbar .topbar-actions{
    width:100%!important;
    justify-content:flex-start!important;
  }
  #appPage .topbar #homeBtn,
  #appPage .topbar #adminBtn{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
    flex:0 0 52px!important;
  }
}


/* =====================================================
   PROXIMO v25 - remove top banner title, use page title
   ===================================================== */
#appPage .topbar h2,
#appPage .topbar #breadcrumb,
#appPage .topbar .visually-hidden-breadcrumb{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
}

#appPage .topbar .topbar-left > div:not(.logo){
  display:none!important;
}

#appPage .topbar{
  min-height:72px!important;
  padding:12px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

#appPage .topbar .topbar-left{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  gap:0!important;
}

#appPage .topbar .topbar-actions{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
}

#appPage .folders-page-header h1{
  font-size:clamp(30px,3vw,46px)!important;
  line-height:1.05!important;
  letter-spacing:-.055em!important;
  font-weight:950!important;
}

#appPage .folders-page-header{
  margin-top:8px!important;
}

@media(max-width:720px){
  #appPage .topbar{
    min-height:auto!important;
    flex-direction:row!important;
    align-items:center!important;
  }
  #appPage .topbar .topbar-actions{
    width:auto!important;
    justify-content:flex-end!important;
  }
  #appPage .folders-page-header h1{
    font-size:28px!important;
  }
}


/* PROXIMO v27 - agrandir un peu le logo dans l'app et sur login */
#appPage .topbar .logo{
  width:208px!important;
  min-width:208px!important;
  max-width:208px!important;
  height:60px!important;
  flex:0 0 208px!important;
}
#appPage .topbar .logo img,
#appPage .topbar .logo .topbar-brand-logo{
  width:196px!important;
  max-width:196px!important;
  max-height:56px!important;
  height:auto!important;
}
#loginPage .login-top-logo img,
#loginPage .login-main-logo img,
#loginPage .brand-top-logo img{
  width:min(340px,92%)!important;
  max-width:340px!important;
  height:auto!important;
}
@media(max-width:720px){
  #appPage .topbar .logo{
    width:144px!important;
    min-width:144px!important;
    max-width:144px!important;
    flex-basis:144px!important;
    height:48px!important;
  }
  #appPage .topbar .logo img,
  #appPage .topbar .logo .topbar-brand-logo{
    width:136px!important;
    max-width:136px!important;
    max-height:42px!important;
  }
  #loginPage .login-top-logo img,
  #loginPage .login-main-logo img,
  #loginPage .brand-top-logo img{
    width:min(280px,90%)!important;
    max-width:280px!important;
  }
}


/* =========================================================
   PROCEDURE TABLE — Chat + grouped colors + detail sizing
   ========================================================= */
.procedure-modal-card{width:min(1360px,97vw)!important}
.procedure-chat-modal-card{width:min(760px,96vw)!important}
.procedure-table-wrap{margin-top:16px!important;border-radius:24px!important;overflow:auto!important}
.procedure-fill-table{table-layout:fixed!important;min-width:1120px!important}
.procedure-fill-table th:nth-child(1){width:31%!important}
.procedure-fill-table th:nth-child(2){width:27%!important}
.procedure-fill-table th:nth-child(3){width:9%!important;text-align:center!important}
.procedure-fill-table th:nth-child(4){width:33%!important}
.procedure-fill-table td{vertical-align:top!important}
.procedure-fill-table .situation-cell{text-align:center!important;vertical-align:middle!important}
.procedure-row:hover td{background:transparent!important}
.step-cell{padding:18px!important;background:#fff!important}
.procedure-step-merged{position:relative;display:flex;flex-direction:column;gap:10px;min-height:100%;padding:18px 18px 16px;border-radius:22px;border-left:6px solid transparent;background:#f8fbff}
.procedure-step-badge{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:6px 10px;border-radius:999px;background:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#0f172a;box-shadow:0 8px 20px rgba(15,23,42,.08)}
.procedure-step-name{font-size:18px;font-weight:900;line-height:1.3;color:#0f172a}
.procedure-step-count{font-size:12px;font-weight:800;color:#64748b}
.rubrique-cell{padding-top:20px!important;padding-bottom:20px!important;background:#fff!important}
.procedure-rubrique-pill{display:inline-flex;align-items:center;min-height:42px;padding:10px 14px;border-radius:16px;border:1px solid transparent;font-size:14px;font-weight:850;line-height:1.35}
.detail-cell{background:#fff!important}
.procedure-detail-box{padding:14px;border-radius:20px;border:1px solid rgba(148,163,184,.25);background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.04)}
.procedure-detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.procedure-chat-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:#fff;color:#0f172a;font-size:12px;font-weight:900;box-shadow:0 8px 18px rgba(15,23,42,.05)}
.procedure-chat-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#0f46d9;color:#fff;font-size:11px}
.procedure-size-switch{display:inline-flex;align-items:center;gap:6px;padding:4px;border-radius:14px;background:#f1f5f9;border:1px solid rgba(148,163,184,.24)}
.procedure-size-btn{width:34px;height:32px;border:0;border-radius:10px;background:transparent;color:#64748b;font-size:12px;font-weight:900}
.procedure-size-btn.active{background:#fff;color:#0f172a;box-shadow:0 6px 12px rgba(15,23,42,.08)}
.procedure-detail-input{width:100%!important;resize:vertical!important;line-height:1.5!important;font-size:14px!important;border-radius:16px!important}
.procedure-detail-input.is-small{min-height:72px!important}
.procedure-detail-input.is-medium{min-height:120px!important}
.procedure-detail-input.is-large{min-height:180px!important}
.procedure-check{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;border-radius:14px!important;border:1px solid rgba(148,163,184,.28)!important;background:#fff!important;box-shadow:0 8px 18px rgba(15,23,42,.04)!important}
.procedure-check span{font-size:18px!important;font-weight:950!important;color:#16a34a!important}
.procedure-check input{margin:0 8px 0 0!important}
.procedure-chat-body{display:flex;flex-direction:column;gap:16px}
.procedure-chat-list{max-height:420px;overflow:auto;padding:6px 4px;display:flex;flex-direction:column;gap:12px}
.procedure-chat-empty{padding:22px;border:1px dashed #cbd5e1;border-radius:18px;background:#f8fafc;color:#64748b;font-weight:700;text-align:center}
.procedure-chat-item{padding:14px 16px;border-radius:18px;background:#f8fbff;border:1px solid #dbeafe}
.procedure-chat-item-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:12px}
.procedure-chat-item-head strong{font-size:13px;color:#0f172a}
.procedure-chat-item-head span{color:#64748b;font-weight:700}
.procedure-chat-item-text{white-space:pre-wrap;color:#1e293b;font-weight:700;line-height:1.55}
.procedure-chat-compose{padding:16px;border-radius:20px;background:#fff;border:1px solid rgba(148,163,184,.22)}
.step-tone-1.procedure-row .rubrique-cell,.step-tone-1.procedure-row .detail-cell{background:rgba(239,246,255,.34)!important}
.step-tone-2.procedure-row .rubrique-cell,.step-tone-2.procedure-row .detail-cell{background:rgba(240,253,244,.36)!important}
.step-tone-3.procedure-row .rubrique-cell,.step-tone-3.procedure-row .detail-cell{background:rgba(255,247,237,.38)!important}
.step-tone-4.procedure-row .rubrique-cell,.step-tone-4.procedure-row .detail-cell{background:rgba(250,245,255,.42)!important}
.step-tone-5.procedure-row .rubrique-cell,.step-tone-5.procedure-row .detail-cell{background:rgba(254,242,242,.40)!important}
.step-tone-6.procedure-row .rubrique-cell,.step-tone-6.procedure-row .detail-cell{background:rgba(236,253,245,.40)!important}
.procedure-step-merged.step-tone-1,.procedure-rubrique-pill.step-tone-1,.procedure-detail-box.step-tone-1{border-color:#93c5fd!important}.procedure-step-merged.step-tone-1{background:linear-gradient(180deg,#eff6ff,#dbeafe)!important}.procedure-rubrique-pill.step-tone-1{background:#eff6ff!important;color:#1d4ed8!important}.procedure-detail-box.step-tone-1{box-shadow:inset 4px 0 0 #60a5fa,0 10px 24px rgba(15,23,42,.04)!important}
.procedure-step-merged.step-tone-2,.procedure-rubrique-pill.step-tone-2,.procedure-detail-box.step-tone-2{border-color:#86efac!important}.procedure-step-merged.step-tone-2{background:linear-gradient(180deg,#f0fdf4,#dcfce7)!important}.procedure-rubrique-pill.step-tone-2{background:#f0fdf4!important;color:#15803d!important}.procedure-detail-box.step-tone-2{box-shadow:inset 4px 0 0 #4ade80,0 10px 24px rgba(15,23,42,.04)!important}
.procedure-step-merged.step-tone-3,.procedure-rubrique-pill.step-tone-3,.procedure-detail-box.step-tone-3{border-color:#fdba74!important}.procedure-step-merged.step-tone-3{background:linear-gradient(180deg,#fff7ed,#ffedd5)!important}.procedure-rubrique-pill.step-tone-3{background:#fff7ed!important;color:#c2410c!important}.procedure-detail-box.step-tone-3{box-shadow:inset 4px 0 0 #fb923c,0 10px 24px rgba(15,23,42,.04)!important}
.procedure-step-merged.step-tone-4,.procedure-rubrique-pill.step-tone-4,.procedure-detail-box.step-tone-4{border-color:#d8b4fe!important}.procedure-step-merged.step-tone-4{background:linear-gradient(180deg,#faf5ff,#f3e8ff)!important}.procedure-rubrique-pill.step-tone-4{background:#faf5ff!important;color:#7e22ce!important}.procedure-detail-box.step-tone-4{box-shadow:inset 4px 0 0 #c084fc,0 10px 24px rgba(15,23,42,.04)!important}
.procedure-step-merged.step-tone-5,.procedure-rubrique-pill.step-tone-5,.procedure-detail-box.step-tone-5{border-color:#fca5a5!important}.procedure-step-merged.step-tone-5{background:linear-gradient(180deg,#fef2f2,#fee2e2)!important}.procedure-rubrique-pill.step-tone-5{background:#fef2f2!important;color:#dc2626!important}.procedure-detail-box.step-tone-5{box-shadow:inset 4px 0 0 #f87171,0 10px 24px rgba(15,23,42,.04)!important}
.procedure-step-merged.step-tone-6,.procedure-rubrique-pill.step-tone-6,.procedure-detail-box.step-tone-6{border-color:#6ee7b7!important}.procedure-step-merged.step-tone-6{background:linear-gradient(180deg,#ecfdf5,#d1fae5)!important}.procedure-rubrique-pill.step-tone-6{background:#ecfdf5!important;color:#047857!important}.procedure-detail-box.step-tone-6{box-shadow:inset 4px 0 0 #34d399,0 10px 24px rgba(15,23,42,.04)!important}
@media(max-width:980px){
  .procedure-modal-card{width:min(98vw,98vw)!important}
  .procedure-detail-toolbar{align-items:flex-start;flex-direction:column!important}
}
@media(max-width:760px){
  .procedure-chat-modal-card,.procedure-modal-card{width:min(98vw,98vw)!important}
  .procedure-chat-item-head{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   PROXIMO LEGAL — CHAT PRIVÉ SITE
   Ajouter à la fin de assets/css/luxury-app.css
   ========================================================= */
.private-chat-topbar-btn{position:relative!important;min-width:48px!important;padding:0 14px!important;background:#fff!important;border-color:#dbeafe!important;color:#153463!important}
.private-chat-badge{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;font-weight:950;display:none;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 8px 18px rgba(220,38,38,.24)}
.private-chat-badge.is-visible{display:flex}
.private-chat-overlay{position:fixed;inset:0;z-index:260;background:rgba(10,33,58,.35);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:flex-end;padding:22px}
.private-chat-window{width:min(980px,calc(100vw - 44px));height:min(720px,calc(100vh - 44px));background:rgba(255,255,255,.98);border:1px solid rgba(125,184,255,.30);border-radius:28px;box-shadow:0 35px 110px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column}
.private-chat-head{height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#eef6ff,#fff)}
.private-chat-head h3{margin:0;font-size:19px;font-weight:950;letter-spacing:-.025em;color:#172033}.private-chat-head p{margin:4px 0 0;color:#64748b;font-size:12px;font-weight:750}.private-chat-close{width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;border-radius:14px!important}
.private-chat-layout{min-height:0;flex:1;display:grid;grid-template-columns:310px 1fr;background:#fff}.private-chat-users{border-right:1px solid var(--line);background:#f8fbff;display:flex;flex-direction:column;min-width:0}.private-chat-search{padding:14px;border-bottom:1px solid var(--line)}.private-chat-search input{min-height:42px!important;border-radius:14px!important;font-size:13px!important}.private-chat-user-list{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.private-chat-user{width:100%;border:1px solid transparent;background:#fff;border-radius:18px;padding:12px;text-align:left;display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;box-shadow:0 10px 24px rgba(15,23,42,.045);transition:.18s ease}.private-chat-user:hover,.private-chat-user.active{border-color:#bfdbfe;background:#eff6ff;transform:translateY(-1px)}.private-chat-avatar{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,#153463,#2563eb);color:#fff;display:grid;place-items:center;font-weight:950}.private-chat-user-name{font-size:13px;font-weight:950;color:#172033;line-height:1.25}.private-chat-user-last{margin-top:3px;color:#64748b;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}.private-chat-user-unread{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#dc2626;color:#fff;display:none;align-items:center;justify-content:center;font-size:11px;font-weight:950}.private-chat-user-unread.is-visible{display:flex}.private-chat-conversation{min-width:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#f8fbff)}.private-chat-conv-head{height:64px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff}.private-chat-conv-title{font-size:15px;font-weight:950;color:#172033}.private-chat-conv-subtitle{font-size:12px;font-weight:750;color:#64748b}.private-chat-messages{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px}.private-chat-empty{margin:auto;text-align:center;color:#64748b;font-weight:800;padding:24px;border:1px dashed #cbd5e1;border-radius:20px;background:#fff}.private-chat-message{max-width:76%;display:flex;flex-direction:column;gap:5px}.private-chat-message.mine{align-self:flex-end;align-items:flex-end}.private-chat-message.their{align-self:flex-start;align-items:flex-start}.private-chat-bubble{padding:11px 13px;border-radius:18px;font-size:14px;line-height:1.55;font-weight:700;white-space:pre-wrap;word-break:break-word}.private-chat-message.mine .private-chat-bubble{background:linear-gradient(135deg,#153463,#2563eb);color:#fff;border-bottom-right-radius:6px}.private-chat-message.their .private-chat-bubble{background:#fff;color:#172033;border:1px solid #dbeafe;border-bottom-left-radius:6px}.private-chat-time{font-size:10px;color:#64748b;font-weight:750}.private-chat-compose{padding:14px 16px;border-top:1px solid var(--line);background:#fff;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.private-chat-compose textarea{min-height:48px!important;max-height:120px!important;border-radius:16px!important;resize:vertical!important;font-size:14px!important}.private-chat-send{min-height:48px!important;border-radius:16px!important}.private-chat-loading{padding:18px;text-align:center;color:#64748b;font-weight:850}.private-chat-hidden-mobile{display:none!important}
@media(max-width:760px){.private-chat-overlay{padding:0}.private-chat-window{width:100vw;height:100vh;border-radius:0}.private-chat-layout{grid-template-columns:1fr}.private-chat-users{display:flex}.private-chat-conversation{display:none}.private-chat-overlay.has-open-conversation .private-chat-users{display:none}.private-chat-overlay.has-open-conversation .private-chat-conversation{display:flex}.private-chat-back{display:inline-flex!important}.private-chat-message{max-width:88%}.private-chat-compose{grid-template-columns:1fr}.private-chat-send{width:100%}}

.procedure-rubrique-empty{display:block;min-height:42px;width:100%;}


/* =========================================================
   TABLEAU — remove row chat + single validation icon
   ========================================================= */
.procedure-detail-toolbar.no-row-chat{
  justify-content:flex-end!important;
}
.procedure-detail-toolbar.no-row-chat .procedure-size-switch{
  margin-left:auto!important;
}
.procedure-chat-btn,
.procedure-chat-count{
  display:none!important;
}
.procedure-valid-check{
  display:inline-grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
  border:1px solid rgba(148,163,184,.28)!important;
  background:#ffffff!important;
  box-shadow:0 10px 22px rgba(15,23,42,.06)!important;
  cursor:pointer!important;
  transition:all .18s ease!important;
}
.procedure-valid-check input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
}
.procedure-valid-check span{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border-radius:999px!important;
  background:#f1f5f9!important;
  color:#94a3b8!important;
  font-size:22px!important;
  font-weight:950!important;
  line-height:1!important;
  transition:all .18s ease!important;
}
.procedure-valid-check input:checked + span{
  background:#16a34a!important;
  color:#ffffff!important;
  box-shadow:0 8px 16px rgba(22,163,74,.28)!important;
}
.procedure-valid-check:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(22,163,74,.35)!important;
}
.procedure-valid-check:hover span{
  color:#16a34a!important;
}
.procedure-valid-check input:checked + span:hover,
.procedure-valid-check:hover input:checked + span{
  color:#ffffff!important;
}
.procedure-check{
  display:none!important;
}

/* Hide operation description under the title inside procedure modal */
#procedureDescription{display:none!important;}



/* =========================================================
   FINAL FIX — S / M / L visible, default S on open
   ========================================================= */
.procedure-detail-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}
.procedure-size-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: #f1f5f9 !important;
  border: 1px solid rgba(148, 163, 184, .35) !important;
  width: auto !important;
  min-width: 126px !important;
  max-width: none !important;
  overflow: visible !important;
}
.procedure-size-btn,
#procedureRowsTable .procedure-size-btn,
#procedureRowsTable .procedure-size-btn[data-size="s"],
#procedureRowsTable .procedure-size-btn[data-size="m"],
#procedureRowsTable .procedure-size-btn[data-size="l"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 34px !important;
  height: 32px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transform: none !important;
  position: relative !important;
  pointer-events: auto !important;
}
.procedure-size-btn.active,
#procedureRowsTable .procedure-size-btn.active {
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 6px 12px rgba(15, 23, 42, .10) !important;
}
.procedure-detail-input.is-small { min-height: 72px !important; }
.procedure-detail-input.is-medium { min-height: 120px !important; }
.procedure-detail-input.is-large { min-height: 180px !important; }
.procedure-rubrique-empty {
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
}


/* =========================================================
   PROCEDURE TABLE — keep étape visible with every rubrique
   ========================================================= */
#procedureRowsTable .step-cell{
  vertical-align:top!important;
}
#procedureRowsTable .procedure-step-merged{
  min-height:118px!important;
  height:100%!important;
  justify-content:center!important;
}
#procedureRowsTable .procedure-step-follow{
  opacity:.96!important;
}
#procedureRowsTable .procedure-row:hover .procedure-step-follow{
  opacity:1!important;
}


/* =========================================================
   STEP GROUP — one visible step card that follows while scrolling
   ========================================================= */
#procedureRowsTable .step-cell{
  vertical-align:top!important;
  position:relative!important;
  background:#fff!important;
  padding:18px!important;
}
#procedureRowsTable .procedure-step-sticky{
  position:sticky!important;
  top:18px!important;
  z-index:5!important;
  min-height:118px!important;
  justify-content:center!important;
}
#procedureRowsTable .procedure-step-follow{
  display:none!important;
}
.procedure-table-wrap{
  overflow:auto!important;
}


/* =========================================================
   FINAL FIX — STEP CARD STICKY INSIDE TABLE (NO HEADER OVERLAP)
   ========================================================= */
#procedureModal .modal-card.procedure-modal-card{
  position:relative!important;
}

#procedureModal .modal-header{
  z-index:50!important;
}

#procedureModal .procedure-table-wrap{
  position:relative!important;
  overflow:auto!important;
}

#procedureModal #procedureRowsTable .step-cell{
  position:relative!important;
  vertical-align:top!important;
  overflow:visible!important;
  z-index:2!important;
  background:#fff!important;
}

#procedureModal #procedureRowsTable .procedure-step-sticky{
  position:sticky!important;
  top:152px!important;
  z-index:3!important;
  max-width:100%!important;
  transform:none!important;
  margin:0!important;
  pointer-events:auto!important;
}

#procedureModal #procedureRowsTable .procedure-step-merged{
  min-height:118px!important;
  height:auto!important;
}

#procedureModal .procedure-fill-table th{
  position:sticky!important;
  top:113px!important;
  z-index:20!important;
}

@media(max-width:980px){
  #procedureModal #procedureRowsTable .procedure-step-sticky{
    top:138px!important;
  }
  #procedureModal .procedure-fill-table th{
    top:104px!important;
  }
}


/* =========================================================
   HARD RESET — FIX BROKEN STICKY TABLE LAYOUT
   Clean stable layout: step appears once per group, no overlap.
   ========================================================= */
#procedureModal .procedure-table-wrap{
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  margin-top: 16px !important;
}

#procedureModal .procedure-fill-table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  table-layout: fixed !important;
}

#procedureModal .procedure-fill-table thead,
#procedureModal .procedure-fill-table thead tr,
#procedureModal .procedure-fill-table th{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
  transform: none !important;
}

#procedureModal .procedure-fill-table th{
  background: #eef6ff !important;
  height: 52px !important;
  padding: 14px 16px !important;
}

#procedureModal #procedureRowsTable .step-cell{
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
  vertical-align: top !important;
  overflow: visible !important;
  background: #fff !important;
  padding: 18px !important;
}

#procedureModal #procedureRowsTable .procedure-step-sticky,
#procedureRowsTable .procedure-step-sticky{
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: 1 !important;
  transform: none !important;
  margin: 0 !important;
  max-width: 100% !important;
}

#procedureModal #procedureRowsTable .procedure-step-merged{
  position: relative !important;
  min-height: 118px !important;
  height: auto !important;
  justify-content: center !important;
}

#procedureModal .sticky-modal-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
}

#procedureModal .sticky-modal-footer{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 60 !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px) !important;
  padding-top: 12px !important;
}

/* =========================================================
   PROCEDURE TABLE - CLEAN FINAL HEADER STICKY FIX
   ========================================================= */

/* Modal body normal */
#procedureModal .modal-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 22px !important;
  overflow: visible !important;
}

/* Procedure table wrapper */
#procedureModal .procedure-table-wrap {
  margin-top: 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  overflow: auto !important;
  position: relative !important;
  max-height: 54vh !important;
}

/* Procedure table */
#procedureModal .procedure-fill-table {
  width: 100% !important;
  min-width: 1100px !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Sticky table header */
#procedureModal .procedure-fill-table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

#procedureModal .procedure-fill-table thead tr {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

#procedureModal .procedure-fill-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  background: #eef6ff !important;
  color: #4d4437 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  padding: 14px 15px !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 var(--line), 0 8px 14px rgba(15, 23, 42, .04) !important;
}

/* Table cells */
#procedureModal .procedure-fill-table td {
  padding: 14px 15px !important;
  border-bottom: 1px solid var(--line) !important;
  vertical-align: middle !important;
  background-clip: padding-box !important;
}

/* Column widths */
#procedureModal .procedure-fill-table th:nth-child(1),
#procedureModal .procedure-fill-table td:nth-child(1) {
  width: 31% !important;
}

#procedureModal .procedure-fill-table th:nth-child(2),
#procedureModal .procedure-fill-table td:nth-child(2) {
  width: 27% !important;
}

#procedureModal .procedure-fill-table th:nth-child(3),
#procedureModal .procedure-fill-table td:nth-child(3) {
  width: 10% !important;
  text-align: center !important;
}

#procedureModal .procedure-fill-table th:nth-child(4),
#procedureModal .procedure-fill-table td:nth-child(4) {
  width: 32% !important;
}

/* Step cell: no sticky, no overlap */
#procedureModal .step-cell {
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
  vertical-align: top !important;
  background: transparent !important;
}

/* Step card clean */
#procedureModal .procedure-step-merged {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  min-height: 118px !important;
  height: auto !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Remove any old sticky follow behavior */
#procedureModal .procedure-step-follow {
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
  opacity: 1 !important;
}

/* Rubrique cell */
#procedureModal .rubrique-cell {
  vertical-align: middle !important;
}

/* Situation cell */
#procedureModal .situation-cell {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Detail cell */
#procedureModal .detail-cell {
  vertical-align: middle !important;
}

/* Details box */
#procedureModal .procedure-detail-box {
  position: relative !important;
  z-index: 1 !important;
}

/* S / M / L buttons always visible */
#procedureModal .procedure-detail-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}

#procedureModal .procedure-size-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: #f1f5f9 !important;
  border: 1px solid rgba(148, 163, 184, .35) !important;
  width: auto !important;
  min-width: 126px !important;
  max-width: none !important;
  overflow: visible !important;
}

#procedureModal .procedure-size-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 34px !important;
  height: 32px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transform: none !important;
  position: relative !important;
}

#procedureModal .procedure-size-btn.active {
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 6px 12px rgba(15, 23, 42, .10) !important;
}

/* Detail textarea sizes */
#procedureModal .procedure-detail-input.is-small {
  min-height: 72px !important;
}

#procedureModal .procedure-detail-input.is-medium {
  min-height: 120px !important;
}

#procedureModal .procedure-detail-input.is-large {
  min-height: 180px !important;
}

/* Footer buttons */
#procedureModal .sticky-modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 70 !important;
  padding-top: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .65), #fff 35%) !important;
}

/* Avoid last row hidden behind footer */
#procedureModal .procedure-fill-table tbody tr:last-child td {
  border-bottom: 0 !important;
  padding-bottom: 92px !important;
}

/* Empty rubrique stays empty */
#procedureModal .procedure-rubrique-empty {
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
}

/* Mobile / tablet */
@media (max-width: 980px) {
  #procedureModal .procedure-table-wrap {
    max-height: 50vh !important;
  }

  #procedureModal .procedure-fill-table {
    min-width: 980px !important;
  }
}

@media (max-width: 680px) {
  #procedureModal .procedure-table-wrap {
    max-height: 48vh !important;
  }

  #procedureModal .procedure-fill-table {
    min-width: 920px !important;
  }
}

/* =========================================================
   PROCEDURE TABLE - STEP GROUP STICKY FINAL
   ========================================================= */

/* Modal body */
#procedureModal .modal-body{
  display:flex!important;
  flex-direction:column!important;
  gap:16px!important;
  padding:22px!important;
  overflow:visible!important;
}

/* Only table area scrolls */
#procedureModal .procedure-table-wrap{
  margin-top:16px!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  background:#fff!important;
  overflow:auto!important;
  position:relative!important;
  max-height:54vh!important;
}

/* Base table */
#procedureModal .procedure-fill-table{
  width:100%!important;
  min-width:1100px!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}

/* Header stays fixed while scrolling inside table area */
#procedureModal .procedure-fill-table thead,
#procedureModal .procedure-fill-table thead tr,
#procedureModal .procedure-fill-table thead th{
  position:sticky!important;
  top:0!important;
}

#procedureModal .procedure-fill-table thead{
  z-index:80!important;
}

#procedureModal .procedure-fill-table thead tr{
  z-index:80!important;
}

#procedureModal .procedure-fill-table thead th{
  z-index:90!important;
  background:#eef6ff!important;
  color:#4d4437!important;
  font-size:11px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  white-space:nowrap!important;
  padding:14px 15px!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 1px 0 var(--line),0 8px 14px rgba(15,23,42,.045)!important;
}

/* Column widths: header + body */
#procedureModal .procedure-fill-table th:nth-child(1),
#procedureModal .procedure-group-row > .step-cell{
  width:31%!important;
}

#procedureModal .procedure-fill-table th:nth-child(2){
  width:27%!important;
}

#procedureModal .procedure-fill-table th:nth-child(3){
  width:10%!important;
  text-align:center!important;
}

#procedureModal .procedure-fill-table th:nth-child(4){
  width:32%!important;
}

/* New body structure: one tr per step, lines inside the right cell */
#procedureModal .procedure-group-row > td{
  border-bottom:1px solid var(--line)!important;
  padding:0!important;
  vertical-align:top!important;
}

#procedureModal .procedure-group-row > .step-cell{
  position:relative!important;
  background:#fff!important;
  padding:14px 15px!important;
  vertical-align:top!important;
}

/* This is the important part:
   The step card stays visible under the sticky table header,
   but only inside its own step group. */
#procedureModal .procedure-step-sticky-box{
  position:sticky!important;
  top:54px!important; /* below table header */
  z-index:20!important;
  padding:0!important;
}

#procedureModal .procedure-step-merged{
  position:relative!important;
  top:auto!important;
  z-index:20!important;
  min-height:118px!important;
  height:auto!important;
  justify-content:center!important;
  margin:0!important;
}

/* Right side lines grid: Rubrique / Situation / Détails */
#procedureModal .procedure-group-content-cell{
  padding:0!important;
}

#procedureModal .procedure-group-lines{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
}

#procedureModal .procedure-line{
  display:grid!important;
  grid-template-columns:39.1304% 14.4928% 46.3768%!important;
  min-height:188px!important;
  border-bottom:1px solid var(--line)!important;
}

#procedureModal .procedure-line:last-child{
  border-bottom:0!important;
}

#procedureModal .procedure-line .rubrique-cell,
#procedureModal .procedure-line .situation-cell,
#procedureModal .procedure-line .detail-cell{
  padding:14px 15px!important;
  border-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
}

#procedureModal .procedure-line .rubrique-cell{
  justify-content:flex-start!important;
}

#procedureModal .procedure-line .situation-cell{
  justify-content:center!important;
  text-align:center!important;
}

#procedureModal .procedure-line .detail-cell{
  justify-content:stretch!important;
}

/* Match the colored row backgrounds */
#procedureModal .procedure-line.step-tone-1 .rubrique-cell,
#procedureModal .procedure-line.step-tone-1 .detail-cell{background:rgba(239,246,255,.34)!important}
#procedureModal .procedure-line.step-tone-2 .rubrique-cell,
#procedureModal .procedure-line.step-tone-2 .detail-cell{background:rgba(240,253,244,.36)!important}
#procedureModal .procedure-line.step-tone-3 .rubrique-cell,
#procedureModal .procedure-line.step-tone-3 .detail-cell{background:rgba(255,247,237,.38)!important}
#procedureModal .procedure-line.step-tone-4 .rubrique-cell,
#procedureModal .procedure-line.step-tone-4 .detail-cell{background:rgba(250,245,255,.42)!important}
#procedureModal .procedure-line.step-tone-5 .rubrique-cell,
#procedureModal .procedure-line.step-tone-5 .detail-cell{background:rgba(254,242,242,.40)!important}
#procedureModal .procedure-line.step-tone-6 .rubrique-cell,
#procedureModal .procedure-line.step-tone-6 .detail-cell{background:rgba(236,253,245,.40)!important}

/* Disable old sticky/follow behavior */
#procedureModal .procedure-step-follow{
  position:static!important;
  top:auto!important;
  z-index:1!important;
  opacity:1!important;
}

/* Detail box */
#procedureModal .procedure-detail-box{
  width:100%!important;
  position:relative!important;
  z-index:1!important;
}

#procedureModal .procedure-detail-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  width:100%!important;
  margin-bottom:10px!important;
}

#procedureModal .procedure-size-switch{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:4px!important;
  border-radius:14px!important;
  background:#f1f5f9!important;
  border:1px solid rgba(148,163,184,.35)!important;
  width:auto!important;
  min-width:126px!important;
  max-width:none!important;
  overflow:visible!important;
}

#procedureModal .procedure-size-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  visibility:visible!important;
  opacity:1!important;
  width:34px!important;
  height:32px!important;
  min-width:34px!important;
  max-width:34px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
  transform:none!important;
  position:relative!important;
}

#procedureModal .procedure-size-btn.active{
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:0 6px 12px rgba(15,23,42,.10)!important;
}

#procedureModal .procedure-detail-input.is-small{min-height:72px!important}
#procedureModal .procedure-detail-input.is-medium{min-height:120px!important}
#procedureModal .procedure-detail-input.is-large{min-height:180px!important}

#procedureModal .procedure-rubrique-empty{
  display:block!important;
  width:100%!important;
  min-height:42px!important;
}

/* Validation */
#procedureModal .procedure-check{
  margin:auto!important;
}

/* Footer buttons */
#procedureModal .sticky-modal-footer{
  position:sticky!important;
  bottom:0!important;
  z-index:100!important;
  padding-top:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.65),#fff 35%)!important;
}

/* Give last group room above footer */
#procedureModal .procedure-fill-table tbody tr:last-child .procedure-line:last-child .rubrique-cell,
#procedureModal .procedure-fill-table tbody tr:last-child .procedure-line:last-child .situation-cell,
#procedureModal .procedure-fill-table tbody tr:last-child .procedure-line:last-child .detail-cell{
  padding-bottom:92px!important;
}

@media(max-width:980px){
  #procedureModal .procedure-table-wrap{max-height:50vh!important}
  #procedureModal .procedure-fill-table{min-width:980px!important}
  #procedureModal .procedure-step-sticky-box{top:54px!important}
}

@media(max-width:680px){
  #procedureModal .procedure-table-wrap{max-height:48vh!important}
  #procedureModal .procedure-fill-table{min-width:920px!important}
}

/* =========================================================
   FIX SITUATION VALIDATION BUTTON - FINAL
   ========================================================= */

/* Situation column must keep the validation button visible */
#procedureModal .procedure-line .situation-cell,
#procedureModal .situation-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: #fff !important;
  min-width: 0 !important;
}

/* The validation control */
#procedureModal .procedure-check {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: inline-grid !important;
  place-items: center !important;
  position: relative !important;
  margin: auto !important;
  padding: 0 !important;
  border-radius: 17px !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

/* Hide native checkbox but keep it clickable */
#procedureModal .procedure-check input.procedure-done,
#procedureModal .procedure-check input[type="checkbox"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

/* Default unchecked icon */
#procedureModal .procedure-check span {
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Checked state */
#procedureModal .procedure-check:has(input.procedure-done:checked) {
  border-color: rgba(34, 197, 94, .35) !important;
  background: linear-gradient(180deg, #ffffff, #f0fdf4) !important;
}

#procedureModal .procedure-check:has(input.procedure-done:checked) span {
  background: #22a95a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(34, 169, 90, .25) !important;
}

/* Fallback for browsers without :has(), JS/class-free:
   keep unchecked button visible and checked checkbox still saves correctly. */
#procedureModal .procedure-check input.procedure-done:checked + span {
  background: #22a95a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(34, 169, 90, .25) !important;
}

/* Keep situation centered in grouped table */
#procedureModal .procedure-line {
  align-items: stretch !important;
}

#procedureModal .procedure-line .situation-cell {
  border-left: 1px solid rgba(226, 232, 240, .9) !important;
  border-right: 1px solid rgba(226, 232, 240, .9) !important;
}


/* =========================================================
   LEGAL PROXIMO CHAT — online/offline + groupe public
   ========================================================= */
.private-chat-user{
  position:relative;
}
.private-chat-status{
  margin-left:auto;
  min-width:58px;
  padding:5px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
}
.private-chat-status.online{
  color:#047857;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
}
.private-chat-status.offline{
  color:#64748b;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
}
.private-chat-group{
  background:linear-gradient(135deg,#092652,#1d4ed8)!important;
  color:#fff!important;
  border-color:#092652!important;
}
.private-chat-group .private-chat-user-name,
.private-chat-group .private-chat-user-last{
  color:#fff!important;
}
.private-chat-group .private-chat-user-last{
  opacity:.82;
}
.private-chat-group-avatar{
  background:#fff!important;
  color:#092652!important;
  font-size:12px!important;
}
.private-chat-sender{
  font-size:11px;
  font-weight:900;
  color:#64748b;
  margin:0 0 4px 4px;
}
.private-chat-message.mine .private-chat-sender{
  text-align:right;
  margin-right:4px;
  color:#1d4ed8;
}
@media(max-width:760px){
  .private-chat-status{
    min-width:auto;
    padding:4px 7px;
    font-size:9px;
  }
}


/* =========================================================
   LEGAL PROXIMO CHAT — corrections scroll + groupe + offline send
   ========================================================= */
.private-chat-layout{
  min-height:0!important;
}
.private-chat-users{
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
.private-chat-search{
  flex:0 0 auto!important;
}
.private-chat-user-list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:calc(80vh - 178px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:8px!important;
  scroll-behavior:smooth;
}
.private-chat-user-list::-webkit-scrollbar{
  width:8px;
}
.private-chat-user-list::-webkit-scrollbar-thumb{
  background:#c7d7ee;
  border-radius:999px;
}
.private-chat-user-list::-webkit-scrollbar-track{
  background:#eef4fb;
  border-radius:999px;
}
.private-chat-group{
  cursor:pointer!important;
}
.private-chat-group .private-chat-status{
  background:#ecfdf5!important;
  color:#047857!important;
  border-color:#a7f3d0!important;
}
.private-chat-compose textarea:not(:disabled),
.private-chat-compose button:not(:disabled){
  opacity:1!important;
  pointer-events:auto!important;
}
.private-chat-conversation{
  min-height:0!important;
}
.private-chat-messages{
  min-height:220px!important;
}
@media(max-width:760px){
  .private-chat-user-list{
    max-height:calc(100vh - 245px)!important;
  }
}


/* =========================================================
   LEGAL PROXIMO CHAT — clean single status display
   ========================================================= */
.private-chat-group .private-chat-status{
  display:none!important;
}
.private-chat-user-last:empty{
  display:none!important;
}
.private-chat-user .private-chat-status{
  flex:0 0 auto!important;
}


/* =========================================================
   LEGAL PROXIMO CHAT — real presence status colors
   ========================================================= */
.private-chat-status.online{
  background:#dcfce7!important;
  color:#047857!important;
  border-color:#86efac!important;
}
.private-chat-status.offline{
  background:#f1f5f9!important;
  color:#64748b!important;
  border-color:#dbe3ee!important;
}


/* =========================================================
   LEGAL PROXIMO CHAT — topbar icon only blue button
   ========================================================= */
.private-chat-topbar-btn{
  position:relative!important;
  min-width:58px!important;
  width:58px!important;
  height:44px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  border:2px solid #2563eb!important;
  background:#eff6ff!important;
  color:#2563eb!important;
  font-size:0!important;
  line-height:1!important;
}
.private-chat-topbar-btn:hover{
  background:#dbeafe!important;
  border-color:#1d4ed8!important;
  color:#1d4ed8!important;
}
.private-chat-topbar-btn .private-chat-topbar-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:20px!important;
  line-height:1!important;
  color:inherit!important;
}
.private-chat-topbar-btn .private-chat-badge{
  position:absolute!important;
  top:-6px!important;
  right:-6px!important;
}


/* =========================================================
   LEGAL PROXIMO CHAT — icon same size as topbar buttons
   ========================================================= */
.private-chat-topbar-btn{
  width:58px!important;
  min-width:58px!important;
  height:58px!important;
  min-height:58px!important;
  padding:0!important;
  border-radius:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#ffffff!important;
  border:1px solid #dbe7f6!important;
  color:#2563eb!important;
  box-shadow:0 10px 24px rgba(15, 23, 42, .06)!important;
  font-size:0!important;
}
.private-chat-topbar-btn:hover{
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}
.private-chat-topbar-btn .private-chat-topbar-icon{
  width:26px!important;
  height:26px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#2563eb!important;
}
.private-chat-topbar-btn .private-chat-topbar-icon svg{
  width:24px!important;
  height:24px!important;
  display:block!important;
}
.private-chat-topbar-btn .private-chat-badge{
  top:-6px!important;
  right:-6px!important;
}


/* =========================================================
   LEGAL PROXIMO CHAT — time format Morocco GMT+1
   ========================================================= */
.private-chat-time{
  font-size:10.5px!important;
  font-weight:800!important;
  opacity:.78!important;
  white-space:normal!important;
  line-height:1.35!important;
}
.private-chat-message.mine .private-chat-time{
  text-align:right!important;
}


/* =========================================================
   LEGAL PROXIMO CHAT — admin clear + online first
   ========================================================= */
.private-chat-clear{
  margin-left:auto!important;
  height:38px!important;
  padding:0 13px!important;
  border-radius:13px!important;
  font-size:12px!important;
  font-weight:950!important;
  color:#b91c1c!important;
  background:#fff1f2!important;
  border:1px solid #fecaca!important;
}
.private-chat-clear:hover{
  background:#ffe4e6!important;
  border-color:#fca5a5!important;
}
.private-chat-clear.hidden{
  display:none!important;
}
.private-chat-conv-head{
  gap:12px!important;
}
@media(max-width:760px){
  .private-chat-clear{
    height:34px!important;
    padding:0 10px!important;
    font-size:11px!important;
  }
}

/* =========================================================
   PROXIMO LEGAL — Notifications système
   ========================================================= */
.notifications-topbar-btn{position:relative!important;width:58px!important;min-width:58px!important;height:58px!important;min-height:58px!important;padding:0!important;border-radius:18px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;border:1px solid #dbe7f6!important;color:#2563eb!important;box-shadow:0 10px 24px rgba(15,23,42,.06)!important;font-size:0!important}
.notifications-topbar-btn:hover{background:#eff6ff!important;border-color:#2563eb!important;color:#1d4ed8!important}
.notifications-icon{width:26px!important;height:26px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#2563eb!important}
.notifications-icon svg{width:24px!important;height:24px!important;display:block!important}
.notifications-badge{position:absolute!important;top:-6px!important;right:-6px!important;min-width:20px!important;height:20px!important;padding:0 6px!important;border-radius:999px!important;display:none!important;align-items:center!important;justify-content:center!important;background:#ef4444!important;color:#fff!important;font-size:11px!important;font-weight:950!important;border:2px solid #fff!important}
.notifications-badge.is-visible{display:flex!important}
.notifications-panel{position:fixed!important;inset:0!important;z-index:9998!important;pointer-events:none!important}
.notifications-panel.hidden{display:none!important}
.notifications-card{position:absolute!important;top:76px!important;right:22px!important;width:min(420px,calc(100vw - 28px))!important;max-height:min(620px,calc(100vh - 100px))!important;display:flex!important;flex-direction:column!important;pointer-events:auto!important;border-radius:24px!important;overflow:hidden!important;background:#fff!important;border:1px solid #dbe7f6!important;box-shadow:0 30px 70px rgba(15,23,42,.22)!important}
.notifications-head{padding:18px 20px!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important;background:linear-gradient(180deg,#eef6ff,#fff)!important;border-bottom:1px solid #e5edf8!important}
.notifications-head h3{margin:0!important;font-size:19px!important;font-weight:950!important;color:#0f172a!important}
.notifications-head p{margin:5px 0 0!important;font-size:12px!important;font-weight:800!important;color:#64748b!important}
.notifications-close{width:38px!important;height:38px!important;padding:0!important;border-radius:14px!important;font-size:18px!important}
.notifications-actions{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:12px 16px!important;border-bottom:1px solid #eef2f7!important;background:#fbfdff!important}
.notifications-actions .btn{height:34px!important;padding:0 12px!important;border-radius:12px!important;font-size:12px!important;font-weight:900!important}
.notifications-list{overflow-y:auto!important;min-height:120px!important;max-height:475px!important;padding:10px!important;background:#f8fbff!important}
.notification-item{width:100%!important;border:1px solid #dbe7f6!important;background:#fff!important;border-radius:18px!important;padding:12px!important;display:flex!important;align-items:flex-start!important;gap:11px!important;text-align:left!important;cursor:pointer!important;margin-bottom:10px!important}
.notification-item.is-unread{border-color:#93c5fd!important;background:#eff6ff!important}
.notification-type{width:32px!important;height:32px!important;flex:0 0 32px!important;display:grid!important;place-items:center!important;border-radius:12px!important;background:#1d6fd0!important;color:#fff!important;font-weight:950!important;font-size:15px!important}
.notification-content{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:3px!important}
.notification-title{font-size:13.5px!important;font-weight:950!important;color:#0f172a!important;line-height:1.25!important}
.notification-message{font-size:12px!important;font-weight:750!important;color:#475569!important;line-height:1.35!important}
.notification-time{font-size:10.5px!important;font-weight:850!important;color:#64748b!important;margin-top:3px!important}
.notification-dot{width:10px!important;height:10px!important;border-radius:50%!important;background:#2563eb!important;margin-top:10px!important}
.notifications-empty,.notifications-error{padding:28px 16px!important;text-align:center!important;color:#64748b!important;font-weight:850!important}
.notifications-error{color:#b91c1c!important}
@media(max-width:760px){.notifications-card{top:70px!important;right:10px!important;left:10px!important;width:auto!important}.notifications-actions{flex-direction:column!important;align-items:stretch!important}}


/* =========================================================
   PROXIMO LEGAL — Header dossier icon blue like notification/chat
   ========================================================= */
#homeBtn{
  width:58px!important;
  min-width:58px!important;
  height:58px!important;
  min-height:58px!important;
  padding:0!important;
  border-radius:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#ffffff!important;
  border:1px solid #dbe7f6!important;
  color:#2563eb!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
  font-size:0!important;
}
#homeBtn:hover{
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}
#homeBtn .topbar-folder-icon-blue{
  width:26px!important;
  height:26px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#2563eb!important;
}
#homeBtn .topbar-folder-icon-blue svg{
  width:24px!important;
  height:24px!important;
  display:block!important;
}


/* =========================================================
   PROXIMO LEGAL — Header settings icon blue like notification/chat/dossier
   ========================================================= */
#adminBtn{
  width:58px!important;
  min-width:58px!important;
  height:58px!important;
  min-height:58px!important;
  padding:0!important;
  border-radius:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#ffffff!important;
  border:1px solid #dbe7f6!important;
  color:#2563eb!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
  font-size:0!important;
}
#adminBtn:hover{
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}
#adminBtn .topbar-settings-icon-blue{
  width:26px!important;
  height:26px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#2563eb!important;
}
#adminBtn .topbar-settings-icon-blue svg{
  width:24px!important;
  height:24px!important;
  display:block!important;
}


/* =========================================================
   PROXIMO LEGAL — Notifications clear button
   ========================================================= */
.notifications-clear-btn{
  color:#b91c1c!important;
  background:#fff1f2!important;
  border-color:#fecaca!important;
}
.notifications-clear-btn:hover{
  background:#ffe4e6!important;
  border-color:#fca5a5!important;
}


/* =========================================================
   PROXIMO LEGAL — Notifications pro panel like big apps
   ========================================================= */
.notifications-card{
  width:min(430px, calc(100vw - 28px))!important;
  max-height:min(640px, calc(100vh - 100px))!important;
}
.notifications-summary{
  padding:10px 16px!important;
  background:#fff!important;
  border-bottom:1px solid #eef2f7!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
}
.notifications-list{
  max-height:390px!important;
  padding:10px!important;
}
.notification-item{
  margin-bottom:8px!important;
  padding:10px 11px!important;
  border-radius:16px!important;
}
.notification-message{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.notifications-footer{
  padding:12px 16px!important;
  border-top:1px solid #eef2f7!important;
  background:#fff!important;
  display:flex!important;
  justify-content:center!important;
}
.notifications-footer.hidden{
  display:none!important;
}
#notificationsLoadMoreBtn{
  width:100%!important;
  height:38px!important;
  border-radius:14px!important;
  font-size:12px!important;
  font-weight:950!important;
}
@media(max-width:760px){
  .notifications-list{
    max-height:calc(100vh - 260px)!important;
  }
}


/* =========================================================
   DOSSIERS — Pagination 12 par page
   ========================================================= */
.dossiers-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:18px 0 4px!important;
  padding:14px 16px!important;
  border:1px solid #dbe7f6!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
  flex-wrap:wrap!important;
}
.dossiers-pagination.hidden{
  display:none!important;
}
.dossiers-pagination .pg-info{
  font-size:13px!important;
  font-weight:850!important;
  color:#64748b!important;
}
.dossiers-pagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
.dossiers-pagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  border:1px solid #dbe7f6!important;
  background:#fff!important;
  color:#153463!important;
  font-size:12px!important;
  font-weight:950!important;
  cursor:pointer!important;
}
.dossiers-pagination .pg-btn:hover:not(:disabled){
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}
.dossiers-pagination .pg-btn.active{
  background:#2563eb!important;
  color:#fff!important;
  border-color:#2563eb!important;
}
.dossiers-pagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}
.dossiers-pagination .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}
@media(max-width:760px){
  .dossiers-pagination{
    justify-content:center!important;
    text-align:center!important;
  }
  .dossiers-pagination .pg-actions{
    justify-content:center!important;
  }
}


/* =========================================================
   DOSSIERS — Pagination 12 par page vérifiée
   ========================================================= */
#dossiersPagination,
#adminDossiersPagination,
.dossiers-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:18px 0 4px!important;
  padding:14px 16px!important;
  border:1px solid #dbe7f6!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
  flex-wrap:wrap!important;
  position:relative!important;
  z-index:2!important;
}
#dossiersPagination.hidden,
#adminDossiersPagination.hidden,
.dossiers-pagination.hidden{
  display:none!important;
}
.dossiers-pagination .pg-info{
  font-size:13px!important;
  font-weight:850!important;
  color:#64748b!important;
}
.dossiers-pagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
.dossiers-pagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  border:1px solid #dbe7f6!important;
  background:#fff!important;
  color:#153463!important;
  font-size:12px!important;
  font-weight:950!important;
  cursor:pointer!important;
}
.dossiers-pagination .pg-btn:hover:not(:disabled){
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}
.dossiers-pagination .pg-btn.active{
  background:#2563eb!important;
  color:#fff!important;
  border-color:#2563eb!important;
}
.dossiers-pagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}
.dossiers-pagination .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}
@media(max-width:760px){
  .dossiers-pagination{
    justify-content:center!important;
    text-align:center!important;
  }
  .dossiers-pagination .pg-actions{
    justify-content:center!important;
  }
}

/* =========================================================
   DOSSIERS - Pagination 12 par page FORCE FINAL
   ========================================================= */
#dossiersPagination,#adminDossiersPagination,.dossiers-pagination{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;
  margin:18px 0 4px!important;padding:14px 16px!important;border:1px solid #dbe7f6!important;
  border-radius:18px!important;background:#fff!important;box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
  flex-wrap:wrap!important;position:relative!important;z-index:20!important;opacity:1!important;visibility:visible!important;
}
#dossiersPagination.hidden,#adminDossiersPagination.hidden,.dossiers-pagination.hidden{display:none!important}
.dossiers-pagination .pg-info{font-size:13px!important;font-weight:850!important;color:#64748b!important}
.dossiers-pagination .pg-actions{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important}
.dossiers-pagination .pg-btn{min-width:38px!important;height:38px!important;padding:0 12px!important;border-radius:13px!important;border:1px solid #dbe7f6!important;background:#fff!important;color:#153463!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important}
.dossiers-pagination .pg-btn:hover:not(:disabled){background:#eff6ff!important;border-color:#2563eb!important;color:#1d4ed8!important}
.dossiers-pagination .pg-btn.active{background:#2563eb!important;color:#fff!important;border-color:#2563eb!important}
.dossiers-pagination .pg-btn:disabled{opacity:.45!important;cursor:not-allowed!important}
.dossiers-pagination .pg-dots{color:#64748b!important;font-weight:950!important;padding:0 4px!important}
@media(max-width:760px){.dossiers-pagination{justify-content:center!important;text-align:center!important}.dossiers-pagination .pg-actions{justify-content:center!important}}

/* =========================================================
   HOME DOSSIERS PAGINATION HARD FIX
   ========================================================= */
#dossiersPagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:18px 0 4px!important;
  padding:14px 16px!important;
  border:1px solid #dbe7f6!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
  flex-wrap:wrap!important;
  opacity:1!important;
  visibility:visible!important;
  position:relative!important;
  z-index:50!important;
}
#dossiersPagination.hidden{display:none!important;}
#dossiersPagination .pg-info{font-size:13px!important;font-weight:850!important;color:#64748b!important;}
#dossiersPagination .pg-actions{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;}
#dossiersPagination .pg-btn{min-width:38px!important;height:38px!important;padding:0 12px!important;border-radius:13px!important;border:1px solid #dbe7f6!important;background:#fff!important;color:#153463!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important;}
#dossiersPagination .pg-btn:hover:not(:disabled){background:#eff6ff!important;border-color:#2563eb!important;color:#1d4ed8!important;}
#dossiersPagination .pg-btn.active{background:#2563eb!important;color:#fff!important;border-color:#2563eb!important;}
#dossiersPagination .pg-btn:disabled{opacity:.45!important;cursor:not-allowed!important;}
#dossiersPagination .pg-dots{color:#64748b!important;font-weight:950!important;padding:0 4px!important;}


/* =========================================================
   DOSSIERS PAGINATION VISIBLE FINAL
   ========================================================= */
#dossiersPagination,
#adminDossiersPagination,
.dossiers-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:14px 12px 18px!important;
  padding:14px 16px!important;
  border:1px solid #dbe7f6!important;
  border-radius:18px!important;
  background:#ffffff!important;
  box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
  flex-wrap:wrap!important;
  opacity:1!important;
  visibility:visible!important;
  position:relative!important;
  z-index:50!important;
}
#dossiersPagination.hidden,
#adminDossiersPagination.hidden,
.dossiers-pagination.hidden{
  display:flex!important;
}
.dossiers-pagination .pg-info{
  font-size:13px!important;
  font-weight:850!important;
  color:#64748b!important;
}
.dossiers-pagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
.dossiers-pagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  border:1px solid #dbe7f6!important;
  background:#fff!important;
  color:#153463!important;
  font-size:12px!important;
  font-weight:950!important;
  cursor:pointer!important;
}
.dossiers-pagination .pg-btn:hover:not(:disabled){
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}
.dossiers-pagination .pg-btn.active{
  background:#2563eb!important;
  color:#fff!important;
  border-color:#2563eb!important;
}
.dossiers-pagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}
.dossiers-pagination .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}


/* =========================================================
   FIX PAGINATION DOSSIERS VISIBILITY - FINAL
   ========================================================= */

/* Allow the pagination to appear outside the rows area if an older card style clips content */
#foldersView,
#foldersView .card,
#foldersView .folders-card,
#foldersView .dashboard-card,
#foldersView .dossiers-card,
#foldersView .dossiers-section,
#foldersView .folder-list,
#foldersView #foldersGrid,
#adminDossiers,
#adminDossiers .table-wrap,
#adminDossiers .card{
  overflow: visible !important;
}

/* Pagination container */
#dossiersPagination,
#adminDossiersPagination,
.dossiers-pagination{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;

  width:calc(100% - 24px) !important;

  margin:18px 12px 22px !important;
  padding:16px 18px !important;

  border:1px solid #dbe7f6 !important;
  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.04) !important;

  flex-wrap:wrap !important;

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

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

  clear:both !important;
}

/* Never hide pagination once created */
#dossiersPagination.hidden,
#adminDossiersPagination.hidden,
.dossiers-pagination.hidden{
  display:flex !important;
}

/* Info text */
.dossiers-pagination .pg-info{
  font-size:13px !important;
  font-weight:850 !important;
  color:#64748b !important;
}

/* Actions */
.dossiers-pagination .pg-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

/* Buttons */
.dossiers-pagination .pg-btn{
  min-width:40px !important;
  height:40px !important;

  padding:0 14px !important;

  border-radius:14px !important;

  border:1px solid #dbe7f6 !important;

  background:#ffffff !important;

  color:#153463 !important;

  font-size:12px !important;
  font-weight:900 !important;

  cursor:pointer !important;

  transition:all .2s ease !important;
}

.dossiers-pagination .pg-btn:hover:not(:disabled){
  background:#eff6ff !important;
  border-color:#2563eb !important;
  color:#1d4ed8 !important;
}

.dossiers-pagination .pg-btn.active{
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#ffffff !important;
}

.dossiers-pagination .pg-btn:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
}

/* Dots */
.dossiers-pagination .pg-dots{
  color:#64748b !important;
  font-weight:900 !important;
  padding:0 4px !important;
}

/* Give the list card enough breathing space below the last row */
#foldersGrid{
  margin-bottom:0 !important;
}

/* Mobile */
@media (max-width:760px){

  #dossiersPagination,
  #adminDossiersPagination,
  .dossiers-pagination{
    justify-content:center !important;
    text-align:center !important;
  }

  .dossiers-pagination .pg-actions{
    justify-content:center !important;
  }
}


/* =========================================================
   DOSSIERS PAGINATION INSIDE GRID FINAL
   ========================================================= */
#foldersGrid #dossiersPagination,
#adminDossiersPagination,
.dossiers-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

  width:auto!important;
  grid-column:1 / -1!important;

  margin:14px 12px 18px!important;
  padding:16px 18px!important;

  border:1px solid #dbe7f6!important;
  border-radius:18px!important;

  background:#ffffff!important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.04)!important;

  flex-wrap:wrap!important;

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

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

#foldersGrid #dossiersPagination.hidden,
#adminDossiersPagination.hidden,
.dossiers-pagination.hidden{
  display:flex!important;
}

.dossiers-pagination .pg-info{
  font-size:13px!important;
  font-weight:850!important;
  color:#64748b!important;
}

.dossiers-pagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

.dossiers-pagination .pg-btn{
  min-width:40px!important;
  height:40px!important;

  padding:0 14px!important;

  border-radius:14px!important;

  border:1px solid #dbe7f6!important;

  background:#ffffff!important;

  color:#153463!important;

  font-size:12px!important;
  font-weight:900!important;

  cursor:pointer!important;

  transition:all .2s ease!important;
}

.dossiers-pagination .pg-btn:hover:not(:disabled){
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}

.dossiers-pagination .pg-btn.active{
  background:#2563eb!important;
  border-color:#2563eb!important;
  color:#ffffff!important;
}

.dossiers-pagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

.dossiers-pagination .pg-dots{
  color:#64748b!important;
  font-weight:900!important;
  padding:0 4px!important;
}

#foldersView,
#foldersView .card,
#foldersView .folders-card,
#foldersView #foldersGrid{
  overflow:visible!important;
}


/* =========================================================
   HOME DOSSIERS PAGINATION CORE FIX FINAL
   ========================================================= */
#foldersGrid{
  overflow:visible!important;
}

#foldersGrid #dossiersPagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

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

  margin:14px 0 0!important;
  padding:16px 18px!important;

  border:1px solid #dbe7f6!important;
  border-radius:18px!important;

  background:#ffffff!important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.04)!important;

  flex-wrap:wrap!important;

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

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

#foldersGrid #dossiersPagination.hidden{
  display:flex!important;
}

#foldersGrid #dossiersPagination .pg-info{
  font-size:13px!important;
  font-weight:850!important;
  color:#64748b!important;
}

#foldersGrid #dossiersPagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

#foldersGrid #dossiersPagination .pg-btn{
  min-width:40px!important;
  height:40px!important;

  padding:0 14px!important;

  border-radius:14px!important;

  border:1px solid #dbe7f6!important;

  background:#ffffff!important;

  color:#153463!important;

  font-size:12px!important;
  font-weight:900!important;

  cursor:pointer!important;

  transition:all .2s ease!important;
}

#foldersGrid #dossiersPagination .pg-btn:hover:not(:disabled){
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}

#foldersGrid #dossiersPagination .pg-btn.active{
  background:#2563eb!important;
  border-color:#2563eb!important;
  color:#ffffff!important;
}

#foldersGrid #dossiersPagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

#foldersGrid #dossiersPagination .pg-dots{
  color:#64748b!important;
  font-weight:900!important;
  padding:0 4px!important;
}

#foldersView,
#foldersView .card,
#foldersView .folders-card{
  overflow:visible!important;
}


/* =========================================================
   DOSSIERS PAGINATION TOP VISIBLE FINAL
   ========================================================= */
.folders-card{
  overflow:visible!important;
}

#dossiersPagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

  width:auto!important;
  margin:0!important;
  padding:14px 18px!important;

  border-top:1px solid #e5edf8!important;
  border-bottom:1px solid #e5edf8!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;

  background:#ffffff!important;
  box-shadow:none!important;

  flex-wrap:wrap!important;
  position:relative!important;
  z-index:999!important;
  opacity:1!important;
  visibility:visible!important;
}

#dossiersPagination.hidden{
  display:flex!important;
}

#dossiersPagination .pg-info{
  font-size:13px!important;
  font-weight:850!important;
  color:#64748b!important;
}

#dossiersPagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

#dossiersPagination .pg-btn{
  min-width:40px!important;
  height:38px!important;
  padding:0 14px!important;

  border-radius:14px!important;
  border:1px solid #dbe7f6!important;
  background:#ffffff!important;

  color:#153463!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;

  transition:all .2s ease!important;
}

#dossiersPagination .pg-btn:hover:not(:disabled){
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}

#dossiersPagination .pg-btn.active{
  background:#2563eb!important;
  border-color:#2563eb!important;
  color:#ffffff!important;
}

#dossiersPagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

#dossiersPagination .pg-dots{
  color:#64748b!important;
  font-weight:900!important;
  padding:0 4px!important;
}

/* Keep the list directly under the pagination */
#foldersGrid{
  overflow:visible!important;
}


/* =========================================================
   DOSSIERS FLOATING PAGINATION FINAL
   Always visible, independent from the folders card.
   ========================================================= */
#dossiersFloatingPagination{
  position:fixed!important;
  left:50%!important;
  bottom:22px!important;
  transform:translateX(-50%)!important;

  width:min(760px, calc(100vw - 32px))!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

  padding:12px 14px!important;

  border:1px solid #dbe7f6!important;
  border-radius:20px!important;

  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;

  box-shadow:
    0 20px 55px rgba(15,23,42,.18),
    0 4px 12px rgba(15,23,42,.08)!important;

  z-index:99999!important;

  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#dossiersFloatingPagination.hidden{
  display:none!important;
}

#dossiersFloatingPagination .pg-info{
  font-size:13px!important;
  font-weight:900!important;
  color:#475569!important;
  white-space:nowrap!important;
}

#dossiersFloatingPagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}

#dossiersFloatingPagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;

  border-radius:13px!important;
  border:1px solid #dbe7f6!important;

  background:#ffffff!important;
  color:#153463!important;

  font-size:12px!important;
  font-weight:950!important;

  cursor:pointer!important;
}

#dossiersFloatingPagination .pg-btn:hover:not(:disabled){
  background:#eff6ff!important;
  border-color:#2563eb!important;
  color:#1d4ed8!important;
}

#dossiersFloatingPagination .pg-btn.active{
  background:#2563eb!important;
  border-color:#2563eb!important;
  color:#ffffff!important;
}

#dossiersFloatingPagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

#dossiersFloatingPagination .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 3px!important;
}

/* Keep bottom space so the floating pager does not cover the last dossier */
#foldersView{
  padding-bottom:96px!important;
}

@media(max-width:760px){
  #dossiersFloatingPagination{
    bottom:12px!important;
    width:calc(100vw - 20px)!important;
    flex-direction:column!important;
    align-items:stretch!important;
    text-align:center!important;
  }

  #dossiersFloatingPagination .pg-actions{
    justify-content:center!important;
  }

  #foldersView{
    padding-bottom:150px!important;
  }
}


/* =========================================================
   PROXIMO LEGAL — Pagination dossiers fixed bottom final
   ========================================================= */
#dossiersFloatingPagination,
#proximoIndexPager{
  position:fixed!important;
  left:50%!important;
  bottom:18px!important;
  top:auto!important;
  right:auto!important;
  transform:translateX(-50%)!important;

  width:min(780px, calc(100vw - 28px))!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

  padding:12px 14px!important;

  border:1px solid #dbe7f6!important;
  border-radius:20px!important;

  background:#ffffff!important;

  box-shadow:
    0 22px 60px rgba(15,23,42,.24),
    0 5px 18px rgba(15,23,42,.10)!important;

  z-index:2147483000!important;

  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;

  transition:none!important;
  animation:none!important;
  will-change:auto!important;
}

#dossiersFloatingPagination.hidden,
#proximoIndexPager.proximo-hidden{
  display:none!important;
}

#dossiersFloatingPagination .pg-info,
#proximoIndexPager .pg-info{
  font-size:13px!important;
  font-weight:900!important;
  color:#475569!important;
  white-space:nowrap!important;
}

#dossiersFloatingPagination .pg-actions,
#proximoIndexPager .pg-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

#dossiersFloatingPagination .pg-btn,
#proximoIndexPager .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;

  border-radius:13px!important;
  border:1px solid #dbe7f6!important;

  background:#ffffff!important;
  color:#153463!important;

  font-size:12px!important;
  font-weight:950!important;

  cursor:pointer!important;

  transition:none!important;
  animation:none!important;
}

#dossiersFloatingPagination .pg-btn:hover:not(:disabled),
#proximoIndexPager .pg-btn:hover:not(:disabled),
#dossiersFloatingPagination .pg-btn.active,
#proximoIndexPager .pg-btn.active{
  background:#2563eb!important;
  color:#ffffff!important;
  border-color:#2563eb!important;
}

#dossiersFloatingPagination .pg-btn:disabled,
#proximoIndexPager .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

#dossiersFloatingPagination .pg-dots,
#proximoIndexPager .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}

/* Space so fixed pagination never covers last dossier */
#foldersView{
  padding-bottom:120px!important;
}

@media(max-width:760px){
  #dossiersFloatingPagination,
  #proximoIndexPager{
    bottom:10px!important;
    width:calc(100vw - 18px)!important;
    flex-direction:column!important;
    text-align:center!important;
  }

  #dossiersFloatingPagination .pg-actions,
  #proximoIndexPager .pg-actions{
    justify-content:center!important;
  }

  #foldersView{
    padding-bottom:170px!important;
  }
}


/* =========================================================
   PROXIMO LEGAL — Pagination dossiers sticky bottom edge
   Final override: fixed at the very bottom, no movement.
   ========================================================= */
#dossiersFloatingPagination,
#proximoIndexPager{
  position:fixed!important;
  left:50%!important;
  bottom:0!important;
  top:auto!important;
  right:auto!important;
  transform:translateX(-50%)!important;

  width:min(780px, calc(100vw - 28px))!important;
  min-height:54px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;

  padding:10px 14px!important;

  border:1px solid #dbe7f6!important;
  border-bottom:0!important;
  border-radius:18px 18px 0 0!important;

  background:rgba(255,255,255,.98)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;

  box-shadow:
    0 -16px 42px rgba(15,23,42,.14),
    0 -4px 12px rgba(15,23,42,.06)!important;

  z-index:2147483000!important;

  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;

  transition:none!important;
  animation:none!important;
  will-change:auto!important;
}

#dossiersFloatingPagination.hidden,
#proximoIndexPager.proximo-hidden{
  display:none!important;
}

#dossiersFloatingPagination .pg-info,
#proximoIndexPager .pg-info{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:900!important;
  color:#475569!important;
  white-space:nowrap!important;
}

#dossiersFloatingPagination .pg-actions,
#proximoIndexPager .pg-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

#dossiersFloatingPagination .pg-btn,
#proximoIndexPager .pg-btn{
  min-width:38px!important;
  height:36px!important;
  padding:0 12px!important;

  border-radius:12px!important;
  border:1px solid #dbe7f6!important;

  background:#ffffff!important;
  color:#153463!important;

  font-size:12px!important;
  font-weight:950!important;

  cursor:pointer!important;

  transition:none!important;
  animation:none!important;
}

#dossiersFloatingPagination .pg-btn:hover:not(:disabled),
#proximoIndexPager .pg-btn:hover:not(:disabled),
#dossiersFloatingPagination .pg-btn.active,
#proximoIndexPager .pg-btn.active{
  background:#2563eb!important;
  color:#ffffff!important;
  border-color:#2563eb!important;
}

#dossiersFloatingPagination .pg-btn:disabled,
#proximoIndexPager .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

#dossiersFloatingPagination .pg-dots,
#proximoIndexPager .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}

/* Keep enough room so the fixed bottom pagination does not hide the last dossier */
#foldersView{
  padding-bottom:96px!important;
}

@media(max-width:760px){
  #dossiersFloatingPagination,
  #proximoIndexPager{
    bottom:0!important;
    width:calc(100vw - 18px)!important;
    flex-direction:column!important;
    text-align:center!important;
    padding:10px 12px!important;
  }

  #dossiersFloatingPagination .pg-actions,
  #proximoIndexPager .pg-actions{
    justify-content:center!important;
  }

  #foldersView{
    padding-bottom:145px!important;
  }
}


/* =========================================================
   PROXIMO LEGAL — Pagination after last dossier final
   Requested behavior:
   - Not fixed
   - Not floating
   - Visible only after scrolling to the end of the list
   ========================================================= */

/* Disable old floating/fixed behavior */
#dossiersFloatingPagination,
#proximoIndexPager,
#dossiersPagination{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;

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

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

  margin:18px 18px 22px!important;
  padding:16px 18px!important;

  border:1px solid #dbe7f6!important;
  border-radius:18px!important;

  background:#ffffff!important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.04)!important;

  z-index:1!important;

  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;

  transition:none!important;
  animation:none!important;
  will-change:auto!important;

  flex-wrap:wrap!important;
}

/* Hidden state remains hidden */
#dossiersFloatingPagination.hidden,
#proximoIndexPager.proximo-hidden,
#dossiersPagination.hidden{
  display:none!important;
}

/* Remove extra bottom space used by fixed pagination */
#foldersView{
  padding-bottom:0!important;
}

#dossiersFloatingPagination .pg-info,
#proximoIndexPager .pg-info,
#dossiersPagination .pg-info{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:900!important;
  color:#475569!important;
  white-space:nowrap!important;
}

#dossiersFloatingPagination .pg-actions,
#proximoIndexPager .pg-actions,
#dossiersPagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

#dossiersFloatingPagination .pg-btn,
#proximoIndexPager .pg-btn,
#dossiersPagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;

  border-radius:13px!important;
  border:1px solid #dbe7f6!important;

  background:#ffffff!important;
  color:#153463!important;

  font-size:12px!important;
  font-weight:950!important;

  cursor:pointer!important;
}

#dossiersFloatingPagination .pg-btn:hover:not(:disabled),
#proximoIndexPager .pg-btn:hover:not(:disabled),
#dossiersPagination .pg-btn:hover:not(:disabled),
#dossiersFloatingPagination .pg-btn.active,
#proximoIndexPager .pg-btn.active,
#dossiersPagination .pg-btn.active{
  background:#2563eb!important;
  color:#ffffff!important;
  border-color:#2563eb!important;
}

#dossiersFloatingPagination .pg-btn:disabled,
#proximoIndexPager .pg-btn:disabled,
#dossiersPagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

#dossiersFloatingPagination .pg-dots,
#proximoIndexPager .pg-dots,
#dossiersPagination .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}

@media(max-width:760px){
  #dossiersFloatingPagination,
  #proximoIndexPager,
  #dossiersPagination{
    margin:14px 12px 18px!important;
    flex-direction:column!important;
    text-align:center!important;
  }

  #dossiersFloatingPagination .pg-actions,
  #proximoIndexPager .pg-actions,
  #dossiersPagination .pg-actions{
    justify-content:center!important;
  }
}


/* =========================================================
   PROXIMO LEGAL — Pagination inline pour listes
   Applies to:
   - Dossiers actifs
   - Liste des opérations
   - Administration > Dossiers
   Behavior: not fixed, appears after the last visible row.
   ========================================================= */
.proximo-inline-pagination,
#dossiersFloatingPagination,
#dossiersPagination,
#operationDetailsPagination,
#adminDossiersPagination{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;

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

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

  margin:18px 18px 22px!important;
  padding:16px 18px!important;

  border:1px solid #dbe7f6!important;
  border-radius:18px!important;

  background:#ffffff!important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.04)!important;

  z-index:1!important;

  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;

  transition:none!important;
  animation:none!important;
  will-change:auto!important;

  flex-wrap:wrap!important;
}

/* Hidden stays hidden */
.proximo-inline-pagination.hidden,
#dossiersFloatingPagination.hidden,
#dossiersPagination.hidden,
#operationDetailsPagination.hidden,
#adminDossiersPagination.hidden{
  display:none!important;
}

.proximo-inline-pagination .pg-info,
#dossiersFloatingPagination .pg-info,
#dossiersPagination .pg-info,
#operationDetailsPagination .pg-info,
#adminDossiersPagination .pg-info{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:900!important;
  color:#475569!important;
  white-space:nowrap!important;
}

.proximo-inline-pagination .pg-actions,
#dossiersFloatingPagination .pg-actions,
#dossiersPagination .pg-actions,
#operationDetailsPagination .pg-actions,
#adminDossiersPagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

.proximo-inline-pagination .pg-btn,
#dossiersFloatingPagination .pg-btn,
#dossiersPagination .pg-btn,
#operationDetailsPagination .pg-btn,
#adminDossiersPagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;

  border-radius:13px!important;
  border:1px solid #dbe7f6!important;

  background:#ffffff!important;
  color:#153463!important;

  font-size:12px!important;
  font-weight:950!important;

  cursor:pointer!important;
}

.proximo-inline-pagination .pg-btn:hover:not(:disabled),
#dossiersFloatingPagination .pg-btn:hover:not(:disabled),
#dossiersPagination .pg-btn:hover:not(:disabled),
#operationDetailsPagination .pg-btn:hover:not(:disabled),
#adminDossiersPagination .pg-btn:hover:not(:disabled),
.proximo-inline-pagination .pg-btn.active,
#dossiersFloatingPagination .pg-btn.active,
#dossiersPagination .pg-btn.active,
#operationDetailsPagination .pg-btn.active,
#adminDossiersPagination .pg-btn.active{
  background:#2563eb!important;
  color:#ffffff!important;
  border-color:#2563eb!important;
}

.proximo-inline-pagination .pg-btn:disabled,
#dossiersFloatingPagination .pg-btn:disabled,
#dossiersPagination .pg-btn:disabled,
#operationDetailsPagination .pg-btn:disabled,
#adminDossiersPagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

.proximo-inline-pagination .pg-dots,
#dossiersFloatingPagination .pg-dots,
#dossiersPagination .pg-dots,
#operationDetailsPagination .pg-dots,
#adminDossiersPagination .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}

/* Remove old extra spacing from fixed pagination versions */
#foldersView{
  padding-bottom:0!important;
}

@media(max-width:760px){
  .proximo-inline-pagination,
  #dossiersFloatingPagination,
  #dossiersPagination,
  #operationDetailsPagination,
  #adminDossiersPagination{
    margin:14px 12px 18px!important;
    flex-direction:column!important;
    text-align:center!important;
  }

  .proximo-inline-pagination .pg-actions,
  #dossiersFloatingPagination .pg-actions,
  #dossiersPagination .pg-actions,
  #operationDetailsPagination .pg-actions,
  #adminDossiersPagination .pg-actions{
    justify-content:center!important;
  }
}


/* =========================================================
   PROXIMO LEGAL — Operation status list pagination fix
   ========================================================= */
#operationDetailsPagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  width:auto!important;

  margin:18px 0 0!important;
  padding:16px 18px!important;

  border:1px solid #dbe7f6!important;
  border-radius:18px!important;

  background:#ffffff!important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.04)!important;

  position:static!important;
  transform:none!important;
  z-index:1!important;
  opacity:1!important;
  visibility:visible!important;
  flex-wrap:wrap!important;
}

#operationDetailsPagination .pg-info{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:900!important;
  color:#475569!important;
  white-space:nowrap!important;
}

#operationDetailsPagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

#operationDetailsPagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  border:1px solid #dbe7f6!important;
  background:#ffffff!important;
  color:#153463!important;
  font-size:12px!important;
  font-weight:950!important;
  cursor:pointer!important;
}

#operationDetailsPagination .pg-btn:hover:not(:disabled),
#operationDetailsPagination .pg-btn.active{
  background:#2563eb!important;
  color:#ffffff!important;
  border-color:#2563eb!important;
}

#operationDetailsPagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

#operationDetailsPagination .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}

.operation-list-card,
.operation-list-wrap,
.operation-list-body{
  overflow:visible!important;
}


/* =========================================================
   PROXIMO LEGAL — Dashboard operations pagination final
   For: Opérations en cours / terminées / archivées
   ========================================================= */
#proximoOpPagination{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;

  width:auto!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

  margin:18px 0 0!important;
  padding:16px 18px!important;

  border:1px solid #dbe7f6!important;
  border-radius:18px!important;

  background:#ffffff!important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.04)!important;

  z-index:1!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  flex-wrap:wrap!important;
}

#proximoOpPagination .pg-info{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:900!important;
  color:#475569!important;
  white-space:nowrap!important;
}

#proximoOpPagination .pg-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

#proximoOpPagination .pg-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 12px!important;

  border-radius:13px!important;
  border:1px solid #dbe7f6!important;

  background:#ffffff!important;
  color:#153463!important;

  font-size:12px!important;
  font-weight:950!important;

  cursor:pointer!important;
}

#proximoOpPagination .pg-btn:hover:not(:disabled),
#proximoOpPagination .pg-btn.active{
  background:#2563eb!important;
  color:#ffffff!important;
  border-color:#2563eb!important;
}

#proximoOpPagination .pg-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

#proximoOpPagination .pg-dots{
  color:#64748b!important;
  font-weight:950!important;
  padding:0 4px!important;
}

.proximo-op-card,
.proximo-op-list-wrap,
.proximo-op-list-body{
  overflow:visible!important;
}


/* =========================================================
   PROXIMO LEGAL — MOBILE RESPONSIVE FINAL
   Objectif:
   - application adaptée mobile/tablette
   - supprimer scroll horizontal surtout page login
   - garder les tableaux scrollables uniquement à l'intérieur
   ========================================================= */

/* Global anti horizontal-scroll */
html,
body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
}

*,
*::before,
*::after{
  box-sizing:border-box!important;
}

img,
svg,
video,
canvas{
  max-width:100%!important;
}

/* Prevent any huge element from forcing page horizontal scroll */
#loginPage,
#appPage,
.app-shell,
.main-shell,
.page,
.container,
.content,
.card,
.page-header,
.dashboard-grid,
.metrics-grid,
.folder-list,
.admin-view,
.modal,
.modal-content{
  max-width:100%!important;
}

/* Tables/cards that need width can scroll internally, not body */
.table-wrap,
.admin-table-wrap,
.operation-table-wrap,
.proximo-table-wrap{
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

/* =========================
   LOGIN MOBILE
========================= */
@media (max-width: 760px){

  html,
  body{
    min-width:0!important;
    width:100%!important;
    overflow-x:hidden!important;
  }

  body{
    min-height:100svh!important;
  }

  #loginPage{
    width:100%!important;
    min-height:100svh!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:18px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  #loginPage::before,
  #loginPage::after{
    max-width:100vw!important;
    overflow:hidden!important;
  }

  .login-card,
  #loginPage .login-card,
  .auth-card,
  #loginPage .auth-card,
  .login-box,
  #loginPage .login-box{
    width:min(100%, 430px)!important;
    max-width:calc(100vw - 28px)!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:22px 18px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }

  .login-logo,
  #loginPage .login-logo,
  .login-card img,
  #loginPage img{
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }

  #loginPage h1,
  .login-card h1,
  .auth-card h1{
    font-size:clamp(28px, 9vw, 38px)!important;
    line-height:1.05!important;
    text-align:center!important;
    word-break:normal!important;
  }

  #loginPage input,
  #loginPage button,
  #loginPage .btn{
    width:100%!important;
    max-width:100%!important;
  }

  #loginPage .input-group,
  #loginPage .form-group,
  #loginPage form{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

/* Very small phones */
@media (max-width: 390px){
  #loginPage{
    padding:12px 10px!important;
  }

  .login-card,
  #loginPage .login-card,
  .auth-card,
  #loginPage .auth-card,
  .login-box,
  #loginPage .login-box{
    max-width:calc(100vw - 20px)!important;
    padding:18px 14px!important;
    border-radius:20px!important;
  }
}

/* =========================
   APPLICATION MOBILE HEADER
========================= */
@media (max-width: 860px){

  .app-header,
  .topbar,
  header{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .app-header-inner,
  .topbar-inner,
  .header-inner{
    width:100%!important;
    max-width:100%!important;
    padding:10px 12px!important;
    gap:8px!important;
  }

  .brand,
  .logo-wrap,
  .app-logo{
    min-width:0!important;
    flex:1 1 auto!important;
  }

  .brand img,
  .logo-wrap img,
  .app-logo img{
    max-width:150px!important;
    height:auto!important;
    object-fit:contain!important;
  }

  .header-actions,
  .topbar-actions,
  .nav-actions{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
  }

  .header-actions .btn,
  .topbar-actions .btn,
  .nav-actions .btn,
  #foldersBtn,
  #adminBtn,
  #notificationsBtn,
  #chatBtn{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:14px!important;
    padding:0!important;
  }

  .user-menu,
  .user-dropdown,
  #userMenuBtn{
    max-width:118px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:14px!important;
    padding:0 8px!important;
    overflow:hidden!important;
  }

  #userMenuBtn span:not(.avatar),
  .user-menu span:not(.avatar){
    max-width:70px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

/* =========================
   DASHBOARD MOBILE
========================= */
@media (max-width: 760px){

  #appPage{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .main-content,
  .app-main,
  main{
    width:100%!important;
    max-width:100%!important;
    padding:14px 12px!important;
    overflow-x:hidden!important;
  }

  .page-header{
    width:100%!important;
    border-radius:22px!important;
    padding:22px 18px!important;
    margin:0 0 16px!important;
  }

  .page-header h1{
    font-size:clamp(28px, 9vw, 42px)!important;
    line-height:1.05!important;
    letter-spacing:-.04em!important;
  }

  .page-header p{
    font-size:13px!important;
    line-height:1.45!important;
  }

  .metrics-grid,
  .dashboard-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
  }

  .metric-card{
    width:100%!important;
    min-width:0!important;
    border-radius:20px!important;
    padding:18px!important;
  }

  .folders-card,
  .card{
    width:100%!important;
    min-width:0!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }

  .card-header{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:16px!important;
  }

  .card-header h3{
    font-size:16px!important;
  }

  .card-header input,
  .card-header .search-input,
  #searchInput{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Dossiers list becomes mobile cards */
  .dossier-list-head{
    display:none!important;
  }

  .folder-list,
  #foldersGrid{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:12px!important;
  }

  .dossier-row-card,
  .folder-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:48px 1fr!important;
    gap:10px 12px!important;
    align-items:center!important;
    padding:14px!important;
    border-radius:18px!important;
  }

  .dossier-folder-icon{
    grid-row:1 / span 3!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
  }

  .dossier-main{
    min-width:0!important;
  }

  .dossier-name{
    font-size:14px!important;
    line-height:1.25!important;
    word-break:break-word!important;
  }

  .dossier-meta-block,
  .dossier-status-pill{
    grid-column:2!important;
    width:fit-content!important;
    max-width:100%!important;
    font-size:12px!important;
  }

  .dossier-meta-block::before{
    content:attr(data-label) " : ";
    color:#64748b!important;
    font-weight:850!important;
  }

  /* Inline pagination on mobile */
  .proximo-inline-pagination,
  #dossiersFloatingPagination,
  #dossiersPagination,
  #operationDetailsPagination,
  #adminDossiersPagination,
  #proximoOpPagination{
    width:auto!important;
    margin:14px 12px 18px!important;
    padding:14px!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    border-radius:18px!important;
  }

  .proximo-inline-pagination .pg-actions,
  #dossiersFloatingPagination .pg-actions,
  #dossiersPagination .pg-actions,
  #operationDetailsPagination .pg-actions,
  #adminDossiersPagination .pg-actions,
  #proximoOpPagination .pg-actions{
    justify-content:center!important;
  }
}

/* =========================
   OPERATION DETAILS MOBILE
========================= */
@media (max-width: 900px){

  #operationDetailsView,
  #operationDetailsView.proximo-v33-open{
    width:100%!important;
    max-width:100vw!important;
    margin:0!important;
    padding:14px 12px!important;
    overflow-x:hidden!important;
  }

  .proximo-op-header,
  .operation-dashboard-header{
    border-radius:22px!important;
    padding:22px 18px!important;
  }

  .proximo-op-header h1,
  .operation-dashboard-header h1{
    font-size:clamp(28px, 9vw, 42px)!important;
    line-height:1.05!important;
  }

  .proximo-op-card,
  .operation-list-card{
    width:100%!important;
    max-width:100%!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }

  .proximo-op-card-head,
  .operation-list-card .card-header{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:16px!important;
  }

  .proximo-op-tools,
  .operation-card-tools{
    width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }

  .proximo-op-search,
  .operation-search-box{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .proximo-op-search input,
  .operation-search-box input{
    width:100%!important;
    min-width:0!important;
  }

  .proximo-op-list-head,
  .operation-list-head{
    display:none!important;
  }

  .proximo-op-list-wrap,
  .operation-list-wrap{
    padding:12px!important;
  }

  .proximo-op-row,
  .operation-row-card{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:14px!important;
    border-radius:18px!important;
  }

  .proximo-op-dossier,
  .operation-dossier-cell{
    min-width:0!important;
  }

  .proximo-op-title,
  .operation-row-title{
    font-size:14px!important;
    word-break:break-word!important;
  }
}

/* =========================
   ADMIN MOBILE
========================= */
@media (max-width: 900px){

  #adminView{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .admin-tabs{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    display:flex!important;
    gap:8px!important;
    padding-bottom:6px!important;
  }

  .admin-tab-btn{
    white-space:nowrap!important;
    flex:0 0 auto!important;
  }

  .admin-table,
  table{
    min-width:760px!important;
  }

  #adminDossiersPagination{
    min-width:0!important;
  }
}

/* =========================
   MODALS / CHAT / NOTIFICATIONS MOBILE
========================= */
@media (max-width: 760px){

  .modal-content,
  .edit-table-modal,
  .chat-modal,
  .notifications-card{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100svh - 20px)!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }

  .chat-layout,
  .chat-modal-body{
    grid-template-columns:1fr!important;
  }

  .chat-sidebar{
    max-height:32svh!important;
    overflow-y:auto!important;
  }

  .chat-main{
    min-height:52svh!important;
  }

  .notifications-card{
    right:10px!important;
    left:10px!important;
    top:70px!important;
  }
}

/* =========================================================
   PROXIMO — MOBILE HEADER + DOSSIERS FINAL FIX
   Logo above, user menu below, icons below user, dossiers aligned
   ========================================================= */
@media (max-width: 760px){
  html,
  body,
  #appPage,
  .app-shell{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  body{background:#f3f8ff!important;}

  #appPage.app-shell{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto 34px!important;
    padding:10px 10px 28px!important;
  }

  /* Header mobile: logo top, user below, icons below */
  #appPage .topbar{
    position:relative!important;
    top:0!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0 0 14px!important;
    padding:16px 12px 14px!important;
    border-radius:0 0 24px 24px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    overflow:visible!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(191,219,254,.70)!important;
    box-shadow:0 16px 38px rgba(15,35,70,.08)!important;
    backdrop-filter:blur(16px)!important;
  }

  #appPage .topbar .topbar-left{
    order:1!important;
    width:100%!important;
    max-width:100%!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
  }

  #appPage .topbar .topbar-left > div:not(.logo),
  #appPage .topbar h2,
  #appPage .topbar #breadcrumb,
  #appPage .topbar .visually-hidden-breadcrumb{
    display:none!important;
  }

  #appPage .topbar .logo{
    width:245px!important;
    min-width:245px!important;
    max-width:245px!important;
    height:auto!important;
    min-height:0!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0 auto!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  #appPage .topbar .logo::before,
  #appPage .topbar .logo::after{
    content:none!important;
    display:none!important;
  }

  #appPage .topbar .logo img,
  #appPage .topbar .logo .topbar-brand-logo{
    display:block!important;
    width:240px!important;
    max-width:240px!important;
    height:auto!important;
    max-height:76px!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0 auto!important;
  }

  #appPage .topbar .topbar-actions{
    order:2!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    overflow:visible!important;
  }

  /* User / utilisateur row */
  #appPage .topbar .user-menu{
    order:0!important;
    width:100%!important;
    max-width:310px!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto 2px!important;
    padding:0!important;
    flex:0 0 100%!important;
    display:block!important;
    overflow:visible!important;
    z-index:80!important;
  }

  #appPage .topbar .user-menu-trigger{
    width:100%!important;
    min-height:48px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    padding:7px 14px!important;
    border-radius:17px!important;
    background:#ffffff!important;
    border:1px solid #dbe7f6!important;
    box-shadow:0 10px 24px rgba(15,35,70,.06)!important;
  }

  #appPage .topbar .user-menu-meta,
  #appPage .topbar .user-menu-meta-top{
    display:flex!important;
    min-width:0!important;
    max-width:190px!important;
    overflow:hidden!important;
  }

  #appPage .topbar .user-menu-meta strong{
    max-width:185px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:13px!important;
  }

  #appPage .topbar .user-menu-avatar{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:13px!important;
  }

  #appPage .topbar .user-menu-dropdown{
    left:50%!important;
    right:auto!important;
    top:calc(100% + 8px)!important;
    width:min(310px, calc(100vw - 36px))!important;
    transform:translate(-50%,-8px)!important;
  }

  #appPage .topbar .user-menu.open .user-menu-dropdown{
    transform:translate(-50%,0)!important;
  }

  /* Icon row */
  #appPage .topbar .topbar-actions > .btn,
  #appPage .topbar .topbar-actions > button,
  #appPage .topbar #homeBtn,
  #appPage .topbar #adminBtn,
  #appPage .topbar .private-chat-topbar-btn,
  #appPage .topbar .notifications-topbar-btn{
    order:2!important;
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:58px!important;
    min-height:58px!important;
    flex:0 0 58px!important;
    padding:0!important;
    margin:0!important;
    border-radius:20px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:0!important;
    background:#ffffff!important;
    color:#2563eb!important;
    border:1px solid #dbe7f6!important;
    box-shadow:0 10px 24px rgba(15,35,70,.06)!important;
    overflow:hidden!important;
  }

  #appPage .topbar #homeBtn{
    font-size:24px!important;
  }

  #appPage .topbar #adminBtn{
    font-size:24px!important;
  }

  #appPage .topbar .private-chat-topbar-btn svg,
  #appPage .topbar .notifications-topbar-btn svg,
  #appPage .topbar .topbar-icon-btn svg{
    width:25px!important;
    height:25px!important;
  }

  #appPage .topbar .private-chat-badge,
  #appPage .topbar .notifications-badge,
  #appPage .topbar .notification-badge{
    position:absolute!important;
    top:7px!important;
    right:7px!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 5px!important;
    border-radius:999px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:10px!important;
    line-height:1!important;
  }

  /* Dashboard cards */
  #appPage .folders-page-header,
  #appPage .page-header{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 14px!important;
    padding:24px 22px!important;
    border-radius:24px!important;
  }

  #appPage .folders-page-header h1,
  #appPage .page-header h1{
    font-size:clamp(31px, 9vw, 43px)!important;
    line-height:1.05!important;
    letter-spacing:-.055em!important;
  }

  #appPage .folders-page-header p,
  #appPage .page-header p{
    font-size:16px!important;
    line-height:1.45!important;
    font-weight:700!important;
  }

  #appPage .dashboard-grid{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:0 0 14px!important;
  }

  #appPage .metric-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:132px!important;
    padding:22px!important;
    border-radius:22px!important;
  }

  #appPage .metric-card span{
    font-size:13px!important;
    letter-spacing:.16em!important;
  }

  #appPage .metric-card strong{
    font-size:54px!important;
    line-height:1!important;
  }

  /* Dossiers card header */
  #foldersView .folders-card,
  #foldersView .card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border-radius:24px!important;
    overflow:hidden!important;
  }

  #foldersView .folders-card .card-header,
  #foldersView .card-header{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:16px!important;
  }

  #foldersView .folders-header-actions,
  #foldersView .search-box,
  #foldersView #searchInput{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Dossiers list aligned mobile */
  #foldersGrid,
  #foldersGrid.grid,
  #foldersGrid.folder-list,
  #foldersGrid.dossiers-list-view,
  #foldersGrid.rc-dossier-list{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    padding:12px!important;
    overflow:visible!important;
    background:#f8fbff!important;
  }

  #foldersGrid .dossier-list-head{
    display:none!important;
  }

  #foldersGrid .folder-card.dossier-row-card,
  #foldersGrid .dossier-row-card,
  #foldersGrid .folder-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
    align-items:start!important;
    gap:8px 12px!important;
    padding:14px!important;
    margin:0!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }

  #foldersGrid .dossier-folder-icon{
    grid-column:1!important;
    grid-row:1 / span 5!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    border-radius:16px!important;
    align-self:start!important;
  }

  #foldersGrid .dossier-folder-icon::before{
    font-size:22px!important;
  }

  #foldersGrid .dossier-main{
    grid-column:2!important;
    min-width:0!important;
    width:100%!important;
  }

  #foldersGrid .dossier-name{
    width:100%!important;
    max-width:100%!important;
    display:block!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    word-break:break-word!important;
    font-size:17px!important;
    line-height:1.2!important;
  }

  #foldersGrid .dossier-subline{
    width:100%!important;
    max-width:100%!important;
    flex-wrap:wrap!important;
    white-space:normal!important;
    overflow:visible!important;
    font-size:12px!important;
    line-height:1.3!important;
  }

  #foldersGrid .dossier-chip{
    max-width:100%!important;
  }

  #foldersGrid .dossier-meta-block,
  #foldersGrid .dossier-type-block,
  #foldersGrid .dossier-city-block,
  #foldersGrid .dossier-ops-block,
  #foldersGrid .dossier-status-pill{
    grid-column:2!important;
    position:static!important;
    justify-self:start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding:8px 10px!important;
    border-radius:14px!important;
    background:#f1f7ff!important;
    border:1px solid #e0ecfb!important;
  }

  #foldersGrid .dossier-meta-block small{
    margin:0!important;
    flex:0 0 auto!important;
    color:#64748b!important;
    font-size:10px!important;
    font-weight:950!important;
    text-transform:uppercase!important;
    letter-spacing:.06em!important;
  }

  #foldersGrid .dossier-meta-block strong{
    min-width:0!important;
    max-width:60%!important;
    text-align:right!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:13px!important;
  }

  #foldersGrid .dossier-ops-block strong{
    margin-left:auto!important;
  }

  #foldersGrid .dossier-status-pill{
    width:max-content!important;
    max-width:100%!important;
    min-height:30px!important;
    padding:7px 12px!important;
    justify-content:center!important;
  }

  #foldersView #dossiersPagination,
  #foldersView .dossiers-pagination{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:14px 12px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
  }

  #foldersView #dossiersPagination .pg-actions{
    width:100%!important;
    justify-content:center!important;
    gap:7px!important;
  }

  #foldersView #dossiersPagination .pg-btn{
    min-width:36px!important;
    height:36px!important;
    padding:0 10px!important;
  }
}

@media (max-width: 390px){
  #appPage .topbar .logo,
  #appPage .topbar .logo img,
  #appPage .topbar .logo .topbar-brand-logo{
    width:220px!important;
    max-width:220px!important;
    min-width:0!important;
  }

  #appPage .topbar .topbar-actions > .btn,
  #appPage .topbar .topbar-actions > button,
  #appPage .topbar #homeBtn,
  #appPage .topbar #adminBtn,
  #appPage .topbar .private-chat-topbar-btn,
  #appPage .topbar .notifications-topbar-btn{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:54px!important;
    min-height:54px!important;
    flex-basis:54px!important;
    border-radius:18px!important;
  }
}