/* Fiber23 role identity layer — visual only, no operational selectors. */

/* Client portal: clearly distinct from the white operational admin console. */
.app-shell:not(.admin-mode):not(.checkout-guest){
  grid-template-columns:272px minmax(0,1fr);
  background:
    radial-gradient(circle at 100% 0,rgba(157,49,244,.09),transparent 27%),
    radial-gradient(circle at 0 100%,rgba(0,170,226,.10),transparent 30%),
    #f5f8fc;
}

/* Procedura guidata accesso data center */
.f23-visit-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 22px}.f23-visit-steps span{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #dbe4f0;border-radius:12px;background:#f8fafc;color:#778398}.f23-visit-steps span b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e7edf6;color:#516078}.f23-visit-steps span small{font-weight:800}.f23-visit-steps span.active{border-color:#7c3aed;background:#f5f0ff;color:#5722c8}.f23-visit-steps span.active b,.f23-visit-steps span.done b{background:linear-gradient(135deg,#2563eb,#a21caf);color:#fff}.f23-visit-steps span.done{color:#166534;background:#ecfdf5;border-color:#bbf7d0}.f23-visit-stage-head{margin-bottom:16px}.f23-visit-stage-head small{color:#6d28d9;font-weight:900;letter-spacing:.08em}.f23-visit-stage-head h3{margin:4px 0;font-size:21px}.f23-visit-stage-head p{margin:0;color:#64748b}.f23-visitor-list{display:grid;gap:9px;margin-bottom:10px}.f23-visitor-row{display:grid;grid-template-columns:30px 1fr 1fr 34px;gap:8px;align-items:center}.f23-visitor-row>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#ede9fe;color:#6d28d9;font-weight:900}.f23-visitor-row input{min-width:0}.f23-visitor-row button{border:0;border-radius:9px;background:#fff1f2;color:#be123c;height:34px;font-size:20px}.f23-add-visitor{margin:0 0 16px 38px}.f23-visit-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.f23-visit-summary span{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:#f4f7fb;border:1px solid #e2e8f0}.f23-visit-summary small{font-weight:800;color:#7b8799}.f23-visit-summary b{color:#14213a}@media(max-width:620px){.f23-visit-steps span{padding:8px}.f23-visit-steps span small{display:none}.f23-visitor-row{grid-template-columns:28px 1fr 34px}.f23-visitor-row input[name="visitorCompany"]{grid-column:2/3}.f23-visit-summary{grid-template-columns:1fr}}
.app-shell:not(.admin-mode):not(.checkout-guest) .sidebar{
  isolation:isolate;
  overflow:hidden;
  padding:20px 16px 16px;
  border-right:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 15% 8%,rgba(24,157,222,.22),transparent 26%),
    radial-gradient(circle at 105% 72%,rgba(140,38,239,.30),transparent 33%),
    linear-gradient(165deg,#071d34 0%,#0c2746 54%,#171846 100%);
  background-size:34px 34px,34px 34px,auto,auto,auto;
  box-shadow:18px 0 55px rgba(9,35,64,.14);
  color:#fff;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .sidebar:after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-115px;
  bottom:150px;
  width:250px;
  height:250px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 84px rgba(255,255,255,.018);
  pointer-events:none;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .logo{
  min-height:64px;
  margin:0 7px 14px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.95);
  box-shadow:0 12px 28px rgba(2,13,30,.18);
}
.app-shell:not(.admin-mode):not(.checkout-guest) .logo img{width:176px;max-height:46px}
.app-shell:not(.admin-mode):not(.checkout-guest) .main-nav{
  position:relative;
  scrollbar-color:rgba(141,214,255,.35) transparent;
  scrollbar-width:thin;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .main-nav p{
  margin:19px 12px 8px;
  color:#67d7ea;
  font-size:10px;
  letter-spacing:.17em;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item{
  min-height:47px;
  margin:4px 0;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:13px;
  color:#c8d9e9;
  font-size:13.5px;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item>span:first-child{
  display:grid;
  width:31px;
  height:31px;
  flex:0 0 31px;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.07);
  color:#71d8ee;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item>span:first-child svg{width:16px;height:16px}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item:hover{
  border-color:rgba(130,218,244,.17);
  background:rgba(255,255,255,.075);
  color:#fff;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item.active{
  border-color:rgba(255,255,255,.20);
  background:linear-gradient(105deg,#087bb3 0%,#315bc7 48%,#6c2bd1 100%);
  color:#fff;
  box-shadow:0 12px 25px rgba(3,14,34,.23);
}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item.active:before{display:none}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item.active>span:first-child{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.14);
  color:#fff;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item[data-page="invoices"]>span:first-child,
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item[data-page="payment-plans"]>span:first-child{color:#ffb7eb;background:rgba(236,54,187,.10)}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item[data-page="tickets"]>span:first-child,
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item[data-page="client-loa"]>span:first-child{color:#ffca75;background:rgba(240,160,37,.10)}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-item[data-page="new-service"]>span:first-child{color:#75f1c8;background:rgba(35,210,157,.10)}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-count,
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-alert,
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-live{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.09);
  color:#d9ebf7;
}
.app-shell:not(.admin-mode):not(.checkout-guest) .nav-alert{background:rgba(244,74,112,.18);color:#ffc0ce}
.app-shell:not(.admin-mode):not(.checkout-guest) .sidebar-bottom{position:relative;padding-top:7px}
.app-shell:not(.admin-mode):not(.checkout-guest) .help-card{
  margin:11px 1px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(140deg,rgba(9,145,177,.30),rgba(113,35,184,.36));
  box-shadow:0 13px 28px rgba(1,13,32,.16);
}
.app-shell:not(.admin-mode):not(.checkout-guest) .help-card small{color:#bdd3e2}
.app-shell:not(.admin-mode):not(.checkout-guest) .profile-mini{color:#fff;background:rgba(255,255,255,.065)}
.app-shell:not(.admin-mode):not(.checkout-guest) .profile-mini:hover{background:rgba(255,255,255,.11)}
.app-shell:not(.admin-mode):not(.checkout-guest) .profile-mini small{color:#a9c0d2}
.app-shell:not(.admin-mode):not(.checkout-guest) .topbar{
  height:78px;
  border-bottom:1px solid #d7e5f1;
  background:rgba(249,252,255,.90);
  box-shadow:0 8px 28px rgba(24,59,94,.045);
}
.app-shell:not(.admin-mode):not(.checkout-guest) .topbar-title span{color:#087f9b}
.app-shell:not(.admin-mode):not(.checkout-guest) .topbar-title strong{color:#133753}
.app-shell:not(.admin-mode):not(.checkout-guest) .icon-pill,
.app-shell:not(.admin-mode):not(.checkout-guest) .account-pill,
.app-shell:not(.admin-mode):not(.checkout-guest) .site-return{border-color:#d4e1ed;box-shadow:0 5px 14px rgba(22,54,88,.035)}

/* Admin remains an operational white console and is intentionally denser. */
.app-shell.admin-mode{background:#f4f6fb}
.app-shell.admin-mode .sidebar{border-right-color:#dfe5ee;box-shadow:8px 0 24px rgba(24,42,72,.035)}
.app-shell.admin-mode .topbar{background:rgba(246,247,251,.94)}

/* Compact notification centre in both roles, including the admin modal layer. */
#modal-backdrop.notifications-open .modal,
#modal-backdrop.notifications-open.admin-modal-open .modal{
  width:min(700px,calc(100vw - 28px))!important;
  max-width:700px!important;
  max-height:min(820px,calc(100vh - 28px))!important;
  overflow:auto!important;
  padding:0!important;
  border-radius:24px!important;
}
#modal-backdrop.notifications-open #modal-body{padding:27px!important}
#modal-backdrop.notifications-open .modal-icon{
  display:grid!important;
  width:46px!important;
  height:46px!important;
  margin-bottom:16px!important;
  place-items:center!important;
  border-radius:14px!important;
}
#modal-backdrop.notifications-open .modal-icon svg,
#modal-backdrop.notifications-open .f23-notification-panel svg,
#modal-backdrop.notifications-open.admin-modal-open .modal-icon svg,
#modal-backdrop.notifications-open.admin-modal-open .f23-notification-panel svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  max-width:18px!important;
  max-height:18px!important;
  flex:0 0 18px!important;
}
#modal-backdrop.notifications-open .f23-notification-panel{
  display:grid!important;
  gap:11px!important;
  max-height:min(58vh,540px)!important;
  margin-top:18px!important;
  overflow:auto!important;
}
#modal-backdrop.notifications-open .f23-notification-panel>section{overflow:hidden;border-radius:16px}
#modal-backdrop.notifications-open .f23-notification-panel>section>header{min-height:58px}
#modal-backdrop.notifications-open .f23-notification-panel>section>header>span{
  display:grid!important;
  width:35px!important;
  height:35px!important;
  place-items:center!important;
}
#modal-backdrop.notifications-open .f23-notification-row{min-height:61px!important}

@media(max-width:820px){
  .app-shell:not(.admin-mode):not(.checkout-guest){display:block}
  .app-shell:not(.admin-mode):not(.checkout-guest) .sidebar{left:-290px;width:272px}
  .app-shell:not(.admin-mode):not(.checkout-guest) .sidebar.open{left:0}
  #modal-backdrop.notifications-open #modal-body{padding:21px 17px!important}
}