@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --ink:#2d3e50;
  --muted:#707777;
  --green:#007bb9;
  --line:#e0e8ee;
  --paper:#f5f8fb;
  --brand:#0090da;
  --navy:#2d3e50}
*{
  box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14px 'DM Sans',sans-serif}
button,input,select,textarea{
  font:inherit}
button{
  cursor:pointer;
  border:0;
  background:none;
  color:inherit}
button:disabled{
  opacity:.5;
  cursor:wait}
button:hover{
  filter:brightness(.95)}
input,select,textarea{
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  background:white;
  color:var(--ink);
  min-width:0}
input:focus,select:focus,textarea:focus{
  outline:2px solid #71c5e8}
aside{
  position:fixed;
  inset:0 auto 0 0;
  width:236px;
  background:#fff;
  border-right:1px solid var(--line);
  padding:35px 22px;
  display:flex;
  flex-direction:column}
.brand{
  display:flex;
  align-items:center;
  font:800 27px Manrope,sans-serif;
  gap:8px;
  letter-spacing:-.7px;
  color:var(--navy)}
.brand-mark{
  background:var(--brand);
  color:#fff;
  width:35px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:34px;
  flex-shrink:0}
.brand-small{
  font:600 10px 'DM Sans',sans-serif;
  align-self:flex-end;
  margin-bottom:7px;
  letter-spacing:1px;
  color:var(--muted)}
.nav-caption{
  font-size:10px;
  letter-spacing:1.5px;
  color:#8293a1;
  margin:52px 12px 17px}
nav{
  display:grid;
  gap:7px}
nav button{
  text-align:left;
  padding:13px 12px;
  border-radius:8px;
  display:flex;
  gap:12px;
  align-items:center;
  color:#637787}
nav button.active{
  background:#e3f3fc;
  color:#006ba1;
  font-weight:700}
nav button span{
  font-size:21px;
  width:23px}
nav b{
  margin-left:auto;
  font-size:10px;
  border-radius:5px;
  background:white;
  padding:4px}
.aside-note{
  margin-top:auto;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 12px;
  font-size:11px}
.aside-note p{
  color:var(--muted);
  line-height:1.7;
  margin-bottom:0}
.live-dot{
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--brand);
  border-radius:50%;
  margin-right:6px}
.profile{
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:22px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px}
.profile small{
  display:block;
  color:var(--muted);
  margin-top:4px}
.profile form{
  margin-left:auto}
.avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#e2f1fa;
  color:#006da5;
  font-weight:700}
.avatar.small{
  width:29px;
  height:29px}
main{
  margin-left:236px}
header{
  height:78px;
  background:#ffffffb0;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px;
  font-size:12px}
.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted)}
.content{
  padding:37px 42px;
  max-width:1600px;
  margin:auto}
.page-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:32px}
.eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  color:#007bb9;
  margin:0 0 12px}
h1{
  font:700 32px Manrope,sans-serif;
  letter-spacing:-1.2px;
  margin:0 0 10px}
h2{
  font:700 20px Manrope,sans-serif}
h3{
  font-size:16px}
.muted{
  color:var(--muted)}
.primary{
  background:var(--green);
  color:#fff;
  border-radius:8px;
  padding:12px 17px;
  font-weight:600;
  white-space:nowrap}
.primary kbd{
  border:1px solid #ffffff40;
  margin-left:16px;
  padding:2px 5px;
  border-radius:4px;
  font-size:10px}
.period-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:17px}
.section-label{
  font-weight:600}
.month-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted)}
.month-label input{
  padding:7px 10px}
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:28px}
.stat{
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px 23px}
.stat:last-child{
  background:#e6f5fc;
  border-color:#bee0ee}
.stat-label{
  color:#70818e;
  font-size:12px;
  display:flex;
  justify-content:space-between}
.stat-value{
  font:700 30px Manrope,sans-serif;
  letter-spacing:-1px;
  margin:12px 0 7px}
.stat small{
  color:#70818e;
  font-size:11px}
.toolbar{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  background:white;
  padding:18px 20px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:12px 12px 0 0}
.search{
  flex:1;
  min-width:180px;
  background:#f6f9fc}
.toolbar select{
  font-size:12px;
  max-width:180px}
.secondary{
  border:1px solid var(--line);
  border-radius:7px;
  padding:9px 13px;
  background:white;
  font-size:12px}
.table-wrap{
  overflow:auto;
  background:white;
  border:1px solid var(--line);
  border-radius:0 0 12px 12px}
table{
  border-collapse:collapse;
  width:100%;
  text-align:left;
  white-space:nowrap}
th{
  font-size:10px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:#70818e;
  background:#f7f9fc;
  font-weight:500;
  padding:15px 18px;
  border-block:1px solid var(--line)}
td{
  padding:18px;
  border-bottom:1px solid #eaf0f5;
  font-size:12px}
tr:last-child td{
  border-bottom:0}
td small{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:5px}
.subject{
  font-weight:600;
  display:block;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis}
.client-dot{
  display:inline-grid;
  place-items:center;
  background:#e6f3fa;
  width:29px;
  height:29px;
  border-radius:8px;
  margin-right:9px;
  color:#007bb9;
  font-weight:700}
.badge{
  font-size:10px;
  display:inline-block;
  padding:5px 9px;
  background:#e5f3fb;
  color:#006ba1;
  border-radius:5px}
.badge.orange{
  background:#fff3df;
  color:#b38939}
.badge.blue{
  background:#eaf2f7;
  color:#5c87a3}
.badge.gray{
  background:#f1f2f0;
  color:#8b948d}
.badge.red{
  background:#ffece9;
  color:#a15446}
.text-button{
  color:var(--green);
  font-weight:600;
  padding:5px}
.table-foot{
  display:flex;
  justify-content:space-between;
  padding:15px 20px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px}
.empty{
  padding:48px;
  text-align:center;
  color:var(--muted)}
footer{
  margin-top:32px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1px;
  color:#8193a0}
footer span{
  letter-spacing:0;
  font-size:11px}
dialog{
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 100px #15382b30;
  width:760px;
  max-width:94vw;
  padding:25px;
  color:var(--ink);
  max-height:90vh}
dialog::backdrop{
  background:#15382b66;
  backdrop-filter:blur(3px)}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between}
.modal-head h2{
  margin:0 0 20px}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px}
label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:12px;
  color:#637787}
label.full,.full{
  grid-column:1/-1}
textarea{
  resize:vertical;
  min-height:80px}
.form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line)}
.check{
  display:flex;
  flex-direction:row;
  align-items:center}
.error{
  color:#ae443b}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px}
.card{
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  line-height:1.8}
.card h3{
  margin-top:0}
.card p{
  margin:7px 0}
.card-actions{
  display:flex;
  gap:8px;
  margin-top:15px}
.agenda-day{
  display:grid;
  grid-template-columns:110px 1fr;
  border-bottom:1px solid var(--line);
  padding:20px;
  gap:15px;
  background:white}
.agenda-item{
  border-left:3px solid #0090da;
  background:#eef7fc;
  padding:12px 16px;
  border-radius:5px;
  margin:0 0 8px}
.agenda-item small{
  display:block;
  color:var(--muted);
  margin-top:6px}
.agenda-item.call-event{
  border-color:#70a6b8}
.panel{
  background:white;
  padding:25px;
  border:1px solid var(--line);
  border-radius:12px;
  line-height:1.8}
.login{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 20% 20%,#dceffc,transparent 65%),#f5f8fb}
.login-card{
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  padding:45px;
  width:430px;
  max-width:95vw;
  box-shadow:0 30px 100px #234b3210}
.login-card .brand{
  margin-bottom:40px}
.login-card label{
  margin-top:20px}
.login-card button{
  width:100%;
  margin-top:25px}
.login-card>small{
  display:block;
  text-align:center;
  margin-top:22px;
  color:var(--muted)}
#toast{
  position:fixed;
  right:30px;
  bottom:30px;
  background:var(--ink);
  color:white;
  padding:14px 22px;
  border-radius:9px;
  display:none;
  z-index:20}
#notice:not(:empty){
  padding:12px;
  background:#fff0e6;
  border-radius:8px;
  margin-bottom:16px}
.running{
  color:#ad7735;
  font-weight:700}
@media(min-width:1500px){
  .content{
    padding-top:50px}
  .stat{
    padding:25px}
}
@media(max-width:1100px){
  aside{
    width:195px;
    padding:30px 15px}
  main{
    margin-left:195px}
  .content{
    padding:28px 25px}
  header{
    padding:0 25px}
  .cards{
    grid-template-columns:repeat(2,1fr)}
  .stats{
    gap:10px}
  .stat{
    padding:17px}
  .stat-value{
    font-size:25px}
}
@media(max-width:760px){
  aside{
    position:static;
    width:100%;
    padding:15px}
  .brand{
    font-size:22px}
  .nav-caption,.aside-note,.profile{
    display:none}
  nav{
    display:flex;
    overflow:auto;
    margin-top:15px}
  nav button{
    white-space:nowrap;
    font-size:12px;
    padding:8px}
  nav b,nav button span{
    display:none}
  main{
    margin:0}
  header{
    height:50px;
    padding:0 20px}
  .header-right{
    display:none}
  .content{
    padding:25px 18px}
  .page-heading{
    align-items:flex-start;
    flex-direction:column}
  h1{
    font-size:28px}
  .stats{
    grid-template-columns:repeat(2,1fr)}
  .cards,.form-grid{
    grid-template-columns:1fr}
  .form-grid>*{
    grid-column:1}
  footer span{
    display:none}
  .agenda-day{
    grid-template-columns:1fr}
  .toolbar{
    padding:12px}
}
/* Siteland palette: official siteland.it CSS — azure #0090da, sky #71c5e8, navy #2d3e50. */
h1,h2,h3{
  color:#004b87}
.dashboard-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:22px 0 15px;
  gap:12px}
.dashboard-heading h2{
  margin:0}
.dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px}
.dashboard-grid .panel{
  padding:24px}
.panel h3{
  margin:0 0 20px}
.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between}
.metric-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--line);
  padding:13px 0}
.metric-row small{
  display:block;
  color:var(--muted);
  font-size:11px}
.metric-row strong{
  white-space:nowrap}
.bar-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
  margin:17px 0;
  font-size:12px}
.bar-row > span small{
  display:inline-block;
  margin-left:10px}
.bar-track{
  grid-column:1/-1;
  height:7px;
  border-radius:4px;
  background:#edf4f8;
  overflow:hidden}
.bar-track i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#0090da,#71c5e8);
  border-radius:4px}
.segmented{
  display:flex;
  background:#edf2f6;
  border:1px solid #e1e8ef;
  padding:3px;
  border-radius:8px;
  flex-shrink:0}
.segmented button{
  border-radius:5px;
  padding:8px 12px;
  font-size:12px;
  white-space:nowrap;
  color:#617586}
.segmented button.selected{
  background:#fff;
  color:#006ba1;
  box-shadow:0 1px 4px #263e5018;
  font-weight:700}
.calendar-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:17px;
  background:white;
  border:1px solid var(--line);
  border-radius:12px 12px 0 0}
.calendar-navigation{
  display:flex;
  align-items:center;
  gap:7px;
  flex:1}
.calendar-navigation h2{
  font-size:18px;
  margin:0 10px;
  text-transform:capitalize}
.calendar-filters{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:13px 17px;
  background:white;
  border:1px solid var(--line);
  border-top:0}
.calendar-filters select{
  font-size:12px;
  padding:8px;
  max-width:180px}
.calendar-filters>.muted{
  margin-left:auto;
  font-size:11px}
.legend-dot{
  width:8px;
  height:8px;
  border-radius:3px;
  display:inline-block}
.legend-dot.call{
  background:#0090da}
.legend-dot.event{
  background:#7659bd}
.calendar-scroll{
  overflow-x:auto;
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 12px 12px}
.month-calendar,.week-calendar{
  min-width:760px}
.weekday-head{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  background:#f7fafc}
.weekday-head>div{
  text-align:center;
  padding:12px;
  color:#748592;
  text-transform:uppercase;
  font-size:10px;
  font-weight:700;
  border-right:1px solid var(--line)}
.month-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr))}
.month-day{
  min-height:125px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:7px 5px}
.month-day.outside{
  background:#f8fafc}
.month-day.outside>.day-number{
  color:#a2b0b9}
.day-number{
  border-radius:50%;
  height:30px;
  width:30px;
  font-weight:600;
  font-size:13px;
  margin-bottom:4px}
.today>.day-number{
  background:#0090da;
  color:white}
.month-day.today{
  background:#f3faff}
.month-events{
  display:grid;
  gap:3px}
.calendar-event{
  background:linear-gradient(180deg,#e1f2fd,#f8fcff);
  color:#005f94;
  border-left:3px solid #0090da;
  border-radius:5px;
  display:block;
  text-align:left;
  padding:4px 6px;
  font-size:11px;
  overflow:hidden;
  line-height:1.35}
.calendar-event.event{
  background:linear-gradient(180deg,#f0eafb,#fcfaff);
  color:#5e438e;
  border-color:#8764c5}
.calendar-event[style*="--calendar-event-color"]{
  border-left-color:var(--calendar-event-color);
  background:color-mix(in srgb,var(--calendar-event-color) 6%,white)}
.calendar-event small{
  display:block;
  opacity:.85;
  font-size:10px}
.calendar-event b{
  font-size:10px}
.calendar-event.compact{
  width:100%;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
  min-height:23px}
.calendar-event:hover{
  filter:brightness(.96);
  box-shadow:0 2px 5px #21384c20}
.week-header{
  display:grid;
  grid-template-columns:54px repeat(7,minmax(0,1fr));
  padding-right:16px;
  border-bottom:1px solid var(--line)}
.day-calendar .week-header,
.day-calendar .week-grid{
  grid-template-columns:54px minmax(0,1fr)}
.resize-handle{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:7px;
  cursor:ns-resize}
.calendar-event{
  background:#eaf4fb}
.calendar-event.event{
  background:#f0eafb}
.calendar-event.event[style*="--calendar-event-color"]{
  background:color-mix(in srgb,var(--calendar-event-color) 6%,white);
  border-left-color:var(--calendar-event-color)}
.calendar-event.event.mine{
  border-left-color:var(--calendar-event-color,#0090da)!important;
  background:color-mix(in srgb,var(--calendar-event-color,#0090da) 6%,white)!important;
  color:var(--calendar-event-text,#005f94)}
.calendar-event.call.mine{
  border-left-color:var(--calendar-event-color,#009b8a)!important;
  background:color-mix(in srgb,var(--calendar-event-color,#009b8a) 6%,white)!important;
  color:var(--calendar-event-text,#087468)}
.calendar-event.event.team{
  border-left-color:var(--calendar-event-color,#8764c5)!important;
  background:color-mix(in srgb,var(--calendar-event-color,#8764c5) 6%,white)!important;
  color:var(--calendar-event-text,#5e438e)}
.calendar-event.call.team{
  border-left-color:var(--calendar-event-color,#d39437)!important;
  background:color-mix(in srgb,var(--calendar-event-color,#d39437) 6%,white)!important;
  color:var(--calendar-event-text,#8a5b12)}
.week-header>div{
  text-align:center;
  border-right:1px solid var(--line);
  padding:12px 0 6px}
.week-header span{
  display:block;
  text-transform:uppercase;
  font-size:10px;
  margin-bottom:5px;
  color:#7c8d99}
.week-header .day-number{
  font-size:21px;
  width:36px;
  height:36px}
.timezone-label{
  font-size:9px;
  color:#8b99a2;
  align-content:center}
.week-scroll{
  height:620px;
  overflow-y:scroll}
.week-grid{
  display:grid;
  grid-template-columns:54px repeat(7,minmax(0,1fr));
  height:1344px;
  position:relative}
.hour-labels{
  position:relative;
  border-right:1px solid var(--line)}
.hour-labels span{
  position:absolute;
  right:7px;
  font-size:9px;
  color:#7e909d}
.week-day{
  position:relative;
  border-right:1px solid var(--line);
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,#f0f4f7 27px,#f0f4f7 28px,transparent 28px,transparent 55px,#dfe8ef 55px,#dfe8ef 56px);
  touch-action:none;
  user-select:none}
.week-day.today{
  background-color:#f5fbff}
.week-day .calendar-event{
  position:absolute;
  z-index:1}
.calendar-help{
  font-size:11px;
  line-height:1.6}
.stats[hidden]{
  display:none}
.content:has(.calendar-scroll){
  max-width:1800px}
.content:has(.calendar-scroll) .page-heading{
  margin-bottom:20px}
.content:has(.calendar-scroll) .period-row{
  margin-bottom:12px}
@media(max-width:900px){
  .dashboard-grid{
    grid-template-columns:1fr}
  .calendar-navigation h2{
    font-size:15px}
  .calendar-filters{
    gap:10px}
  .calendar-toolbar{
    gap:10px}
  .week-scroll{
    height:530px}
}
.week-day .calendar-event>span{
  display:block;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden}
.content:has(.calendar-scroll){
  padding-top:24px}
.content:has(.calendar-scroll) .page-heading .eyebrow{
  display:none}
.content:has(.calendar-scroll) .page-heading h1{
  font-size:27px}
.content:has(.calendar-scroll) .page-heading{
  margin-bottom:12px}
.content:has(.calendar-scroll) .page-heading .muted{
  margin:6px 0}
.calendar-event:focus-visible,.day-number:focus-visible{
  outline:2px solid #004b87;
  outline-offset:2px}
.brand-name{
  font-size:19px;
  font-weight:800;
  white-space:nowrap}
.brand-name>span{
  color:#0090da}
aside{
  overflow-y:auto;
  padding-top:25px;
  padding-bottom:20px}
.nav-caption{
  margin-top:30px}
nav{
  gap:3px}
nav button{
  padding:9px 10px}
nav button span{
  font-size:18px}
.aside-note{
  margin-top:26px}
.profile{
  margin-top:18px}
.stat-link{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  padding:0;
  text-align:left}
.stat:has(.stat-link){
  border-color:#b7dcf1;
  transition:box-shadow .15s}
.stat:has(.stat-link):hover{
  box-shadow:0 4px 15px #0090da18}
.stat-link .stat-value:after{
  content:'›';
  position:absolute;
  right:0;
  top:50%;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid #b7dcf1;
  border-radius:50%;
  background:#f4fbff;
  color:#007bb9;
  font-size:25px;
  font-weight:400;
  line-height:1;
  transform:translateY(-50%);
  transition:transform .15s,background .15s}
.stat-link:hover .stat-value:after,
.stat-link:focus-visible .stat-value:after{
  transform:translate(3px,-50%);
  background:#e4f3fc}
.filter-notice{
  padding:12px 16px;
  background:#e4f3fc;
  border:1px solid #c9e4f4;
  border-radius:9px;
  margin-bottom:14px;
  color:#006ca5}
.kanban{
  display:grid;
  grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:14px;
  overflow-x:auto;
  padding:18px 0}
.kanban-column{
  background:#edf2f7;
  border:1px solid #dce5ed;
  border-radius:12px;
  padding:13px;
  min-height:320px;
  transition:background .15s}
.kanban-column.drag-over{
  background:#d6effd;
  outline:2px dashed #0090da}
.kanban-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 16px}
.kanban-heading h3{
  margin:0}
.kanban-items{
  display:grid;
  gap:12px}
.kanban-card{
  background:white;
  border:1px solid #e1e7ed;
  border-radius:9px;
  padding:14px;
  box-shadow:0 2px 5px #293f5010}
.kanban-card[draggable=true]{
  cursor:grab}
.kanban-card[draggable=true]:active{
  cursor:grabbing}
.card-top{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-bottom:9px}
.kanban-title{
  text-align:left;
  font-weight:700;
  padding:0;
  line-height:1.5}
.kanban-card p{
  font-size:12px;
  line-height:1.5;
  margin:8px 0}
.kanban-card small{
  font-size:11px;
  color:#7b8c98}
.kanban-card select{
  width:100%;
  font-size:11px;
  padding:7px;
  margin-top:12px}
.kanban-empty{
  text-align:center;
  padding:25px 0;
  color:#8b9ba7;
  font-size:12px}
.account-panel{
  max-width:900px}
.account-panel h2:not(:first-child){
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line)}
.contact-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  gap:15px}
.contact-row small{
  display:block;
  margin-top:4px;
  color:var(--muted)}
.contact-row p{
  font-size:12px;
  margin-bottom:0}
.absence-badge,.calendar-event.absence{
  background:#e2f4ec;
  color:#25684d;
  border-color:#409c73}
.legend-dot.absence{
  background:#409c73}
.all-day-row{
  display:grid;
  grid-template-columns:54px repeat(7,minmax(0,1fr));
  padding-right:16px;
  border-bottom:1px solid var(--line);
  min-height:35px}
.all-day-row>span{
  font-size:9px;
  color:#8b99a2;
  padding:10px 4px}
.all-day-row>div{
  border-right:1px solid var(--line);
  padding:3px;
  display:grid;
  gap:3px}
.compact-ui td{
  padding:10px 14px}
.compact-ui .stat{
  padding:14px 18px}
.compact-ui .card{
  padding:16px}
.compact-ui .content{
  padding-top:22px}
.compact-ui .kanban-card{
  padding:10px}
.period-row[hidden]{
  display:none}
@media(max-width:760px){
  aside{
    padding:15px}
  .nav-caption{
    display:none}
  nav{
    gap:5px}
  nav button{
    padding:8px}
  .kanban{
    grid-template-columns:repeat(4,250px)}
  .brand-name{
    font-size:21px}
}
.module-tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:24px}
.module-option{
  flex-direction:row;
  align-items:center;
  text-transform:capitalize;
  padding:13px;
  background:#f4f9fc;
  border:1px solid var(--line);
  border-radius:8px}
.module-cell{
  white-space:normal;
  min-width:180px;
  max-width:450px}
.module-cell .badge{
  margin:3px}
.report-note{
  padding:16px;
  background:#e8f4fc;
  border-radius:9px;
  color:#46677c;
  line-height:1.6;
  font-size:12px}
.calendar-selection{
  position:absolute;
  left:2px;
  right:2px;
  border:2px solid #0087cd;
  background:rgba(0,144,218,.25);
  color:#005b89;
  font-size:11px;
  font-weight:700;
  padding:3px;
  pointer-events:none;
  z-index:5;
  border-radius:5px;
  box-shadow:inset 0 0 0 1px #fff8;
  overflow:visible}
.mobile-agenda,.mobile-menu-button,.mobile-bottom-nav,.mobile-activity-list{
  display:none}
[hidden]{
  display:none!important}
#certificate-field{
  padding:15px;
  border:1px solid #cde3ef;
  border-radius:9px;
  background:#f4f9fc}
#certificate-field small{
  line-height:1.5}
.mobile-day .calendar-event{
  margin-bottom:8px;
  padding:10px;
  font-size:12px}
.mobile-day .calendar-event small{
  font-size:11px}
@media(max-width:760px){
  body{
    padding-bottom:68px}
  aside{
    height:65px;
    padding:15px 18px;
    position:sticky;
    top:0;
    z-index:15;
    border-bottom:1px solid var(--line)}
  aside nav{
    display:none;
    position:fixed;
    top:65px;
    bottom:65px;
    left:0;
    right:0;
    background:white;
    margin:0;
    padding:18px;
    overflow:auto;
    z-index:30;
    box-shadow:0 20px 60px #21374a30;
    flex-direction:column;
    gap:7px}
  .mobile-menu-open aside nav{
    display:flex}
  aside nav button{
    font-size:15px;
    padding:13px}
  .mobile-menu-open aside nav button span{
    display:inline}
  header{
    height:42px;
    padding:0 18px}
  .mobile-menu-button{
    display:block;
    font-weight:700;
    color:#007bb9;
    margin-left:auto;
    order:2}
  .page-heading h1{
    font-size:25px}
  .page-heading .muted{
    font-size:12px;
    line-height:1.6}
  .content{
    padding:20px 14px}
  .page-heading{
    gap:14px;
    margin-bottom:18px}
  .page-heading .primary{
    width:100%;
    padding:14px}
  input,select,textarea{
    font-size:16px;
    padding:12px}
  .toolbar select{
    font-size:14px;
    max-width:100%;
    flex:1}
  .toolbar .search{
    flex-basis:100%}
  .stats{
    gap:9px}
  .stat{
    padding:14px}
  .stat-value{
    font-size:25px}
  .stat small{
    font-size:10px}
  .calendar-scroll{
    display:none}
  .calendar-toolbar{
    padding:12px}
  .calendar-navigation{
    flex-wrap:wrap}
  .calendar-navigation h2{
    order:-1;
    flex-basis:100%;
    font-size:18px;
    margin:0 0 8px}
  .calendar-filters{
    padding:12px;
    gap:12px}
  .calendar-filters select{
    max-width:100%;
    font-size:14px}
  .mobile-agenda{
    display:block;
    border:1px solid var(--line);
    border-radius:0 0 10px 10px;
    background:white}
  .mobile-agenda-intro{
    padding:15px;
    background:#edf6fc;
    font-size:12px;
    color:#527085}
  .mobile-day{
    padding:14px;
    border-bottom:1px solid var(--line)}
  .mobile-day .dashboard-heading{
    margin:0 0 12px}
  .mobile-day>.muted{
    display:block;
    padding-bottom:8px}
  .calendar-help{
    display:none}
  .kanban{
    display:grid;
    grid-template-columns:1fr;
    overflow:visible}
  .kanban-column{
    min-height:100px}
  .kanban-title{
    font-size:15px}
  .kanban-card select{
    font-size:15px;
    padding:11px}
  .mobile-bottom-nav{
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:64px;
    background:white;
    border-top:1px solid var(--line);
    z-index:25;
    gap:0;
    margin:0;
    padding:5px;
    justify-content:space-around}
  .mobile-bottom-nav button{
    display:flex;
    flex-direction:column;
    gap:3px;
    align-items:center;
    font-size:10px;
    padding:5px 9px}
  .mobile-bottom-nav button span{
    display:block;
    font-size:20px;
    width:auto}
  .mobile-bottom-nav button.active{
    background:#e5f4fc;
    color:#007bb9}
  .mobile-activity-list{
    display:grid;
    gap:10px;
    margin-top:12px}
  .mobile-activity-card{
    background:white;
    padding:16px;
    border:1px solid var(--line);
    border-radius:10px}
  .mobile-activity-card h3{
    margin:10px 0;
    font-size:15px}
  .mobile-activity-card p{
    font-size:12px;
    color:var(--muted)}
  .mobile-activity-card .card-top{
    justify-content:space-between}
  .mobile-activity-card .card-actions{
    justify-content:space-between;
    align-items:center}
  body[data-view=calls] #view>.table-wrap{
    display:none}
  dialog{
    width:100%;
    max-width:100%;
    max-height:95dvh;
    border-radius:16px 16px 0 0;
    position:fixed;
    bottom:0;
    top:auto;
    margin:0;
    padding:20px}
  .form-actions{
    position:sticky;
    bottom:-20px;
    background:white;
    padding:15px 0;
    margin-bottom:0}
  .form-actions button{
    flex:1;
    white-space:normal}
  .brand-name{
    font-size:20px}
  .report-note{
    font-size:12px}
}
.selection-label{
  display:block;
  position:absolute;
  left:0;
  top:0;
  min-width:105px;
  background:#007dbd;
  color:white;
  border-radius:4px;
  padding:5px 7px;
  box-shadow:0 3px 8px #21465a25;
  line-height:1.4;
  white-space:nowrap}
.selection-status{
  position:fixed;
  bottom:22px;
  right:24px;
  padding:10px 16px;
  background:#dff2ff;
  border:1px solid #94d3f7;
  color:#005482;
  font-weight:700;
  font-size:13px;
  border-radius:9px;
  box-shadow:0 5px 22px #19496625;
  z-index:50}
.week-day:has(.calendar-selection){
  z-index:6}
/* Planning: 09:00 to 21:00 */
.week-grid,.week-day,.hour-labels{
  height:672px;
  min-height:672px}
.week-grid{
  margin-bottom:12px}
.choice-group{
  border:1px solid #dce6ed;
  border-radius:10px;
  padding:12px;
  display:flex;
  gap:12px;
  flex-wrap:wrap}
.choice-group legend{
  font-weight:600;
  color:#004b87}
.choice-group small{
  width:100%}
.choice-group input{
  width:auto}
.billing-tabs{
  margin-bottom:18px}
.clock-settings{
  margin-top:24px}
.clock-settings textarea{
  width:100%;
  min-height:80px}
.form-grid [hidden]{
  display:none!important}
.punch-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px}
.punch-panel h2{
  margin-top:0}
@media(max-width:760px){
  .punch-panel{
    display:block}
  .punch-panel .card-actions{
    display:flex;
    flex-wrap:wrap;
    margin-top:16px}
}
/* Full-height calendar: one document scrollbar, 08:00–20:00. */
body[data-view="calendar"] .content{
  max-width:none;
  padding:14px 20px}
body[data-view="calendar"] .page-heading,body[data-view="calendar"] .period-row,body[data-view="calendar"] footer{
  display:none}
body[data-view="calendar"] .calendar-scroll{
  overflow:visible}
body[data-view="calendar"] .week-scroll{
  height:auto!important;
  overflow:visible}
body[data-view="calendar"] .week-calendar,body[data-view="calendar"] .month-calendar{
  min-width:0}
body[data-view="calendar"] .week-grid{
  height:672px;
  min-height:672px}
.topic-disclosure summary{
  cursor:pointer;
  padding:16px 0;
  font-weight:600;
}
.topic-disclosure summary strong{
  display:inline-block;
  margin-left:16px;
  font-size:0.9em;
}
.topic-disclosure summary:focus-visible{
  outline:2px solid #0090da;
  outline-offset:4px;
}
.activity-details{
  border:1px solid #dce6ed;
  border-radius:10px;
  padding:14px;
  margin:0}
.activity-details summary{
  cursor:pointer;
  font-weight:600;
  color:#004b87}
.activity-details .form-grid{
  margin-top:4px}
.activity-details legend{
  padding:0 6px;
  font-weight:700;
  color:#004b87}
.duration-live{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  color:#004b87}
.timer-value{
  display:inline-block;
  width:9ch;
  min-width:9ch;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum"}
.supply-group{
  border-radius:10px;
  padding:16px;
  margin:15px 0}
.supply-software{
  background:#eee9fc!important;
  border-left:4px solid #8061ba!important}
.supply-web{
  background:#e2f3fc!important;
  border-left:4px solid #0090da!important}
.supply-hardware{
  background:#fff0dc!important;
  border-left:4px solid #d39437!important}
.choice-group .check{
  border-radius:6px;
  padding:8px}
.supply-item{
  padding:10px 0;
  border-top:1px solid #0001}
.supply-item small{
  display:block;
  margin-top:4px}
.calendar-event[draggable="true"]{
  cursor:grab}
.month-day.drag-over,.week-day.drag-over{
  outline:2px solid #0090da;
  background-color:#dff4ff}
.activity-details .full{
  grid-column:1/-1}
body[data-view="calendar"] .calendar-toolbar{
  position:sticky;
  top:0;
  z-index:10}
.week-header{
  padding-right:0}
body[data-view="calendar"] .calendar-help{
  margin-bottom:20px}
.week-day .calendar-event{
  align-content:start}
.supply-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px}
.supply-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px}
.supply-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px}
.supply-card-heading h3{
  margin:10px 0 18px}
.supply-list{
  border-top:1px solid var(--line)}
.supply-list-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #eaf0f5}
.supply-list-item:last-child{
  border-bottom:0}
.supply-list-item small{
  display:block;
  color:var(--muted);
  margin-top:4px}
.supply-list-item .text-button{
  font-size:12px}
@media(max-width:900px){
  .supply-cards{
    grid-template-columns:1fr}
}
@media(max-width:600px){
  .supply-list-item{
    grid-template-columns:1fr auto}
  .supply-list-item .text-button{
    grid-column:1/-1;
    text-align:left;
    padding-left:0}
}
.hardware-network-form{
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px}
.hardware-network-form legend{
  padding:0 6px;
  font-weight:700;
  color:#004b87}
.hardware-network{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:8px;
  color:var(--muted);
  font-size:11px}
.hardware-network span{
  white-space:nowrap}
.danger-button{
  border:1px solid #e7b8b2;
  border-radius:7px;
  padding:9px 13px;
  color:#a15446;
  background:#fff5f3;
  font-size:12px}
.delete-confirmation{
  text-align:center;
  padding:14px 8px 4px}
.delete-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin:0 auto 16px;
  border-radius:50%;
  background:#fff0ed;
  color:#b45649;
  font-size:30px;
  font-weight:300}
.delete-confirmation h3{
  margin:0 0 10px;
  color:var(--ink)}
.delete-confirmation p{
  max-width:480px;
  margin:0 auto 10px;
  color:var(--muted);
  line-height:1.6}
.delete-confirmation .error{
  margin-top:14px}
.delete-confirmation .form-actions{
  justify-content:center;
  margin-top:20px}