:root{
  --bg:#06110b;
  --panel:#0c1a12;
  --panel2:#0a1710;
  --stroke:rgba(255,255,255,0.12);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.68);
  --muted2:rgba(255,255,255,0.46);
  --green:#2bbf6a;
  --green2:#1f9c54;
  --red:#ef4444;
  --shadow:0 10px 26px rgba(0,0,0,0.35);
  --r:18px;
  --pad:18px;
  --focus:0 0 0 3px rgba(43,191,106,0.22);
  --ring:rgba(43,191,106,0.35);
  --ring2:rgba(0,0,0,0.0);
}

[data-theme="light"]{
  --bg:#f6f7f6;
  --panel:#ffffff;
  --panel2:#ffffff;
  --stroke:rgba(10,20,14,0.12);
  --text:rgba(0,0,0,0.90);
  --muted:rgba(0,0,0,0.62);
  --muted2:rgba(0,0,0,0.40);
  --shadow:0 10px 26px rgba(0,0,0,0.10);
  --focus:0 0 0 3px rgba(43,191,106,0.18);
  --ring:rgba(43,191,106,0.30);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

a{color:inherit}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background: var(--bg);
  border-bottom:1px solid var(--stroke);
}
.topbar-inner{
  max-width:1400px;
  margin:0 auto;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{display:flex; align-items:center; gap:12px; min-width:240px}
.brand-logo{
  width:46px; height:46px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: transparent;
  padding:7px;
}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-name{font-weight:820; letter-spacing:0.9px}
.brand-sub{font-size:12px; color:var(--muted)}

.topbar-right{display:flex; align-items:center; gap:10px}
.status-dot{
  width:10px;height:10px;border-radius:99px;
  background:rgba(255,255,255,0.16);
  border:1px solid var(--stroke);
}
[data-theme="light"] .status-dot{background:rgba(0,0,0,0.10)}
.status-dot.on{background:var(--green); border-color:rgba(43,191,106,0.55)}
.status-text{
  font-size:13px;
  color:var(--muted);
  max-width:420px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.wrap{max-width:1400px; margin:0 auto; padding:20px 18px 18px}
.center{min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
}

.card{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--pad);
}

.card-wide{grid-column:1/-1}

.card-h{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.card-title{font-size:19px; font-weight:820; letter-spacing:0.2px}
.card-sub{font-size:13px; color:var(--muted)}

.row{display:flex; gap:14px; align-items:end; flex-wrap:wrap}
.row-actions{margin-top:12px}

.field{display:flex; flex-direction:column; gap:8px; flex:1; min-width:220px}
.label{font-size:12px; color:var(--muted); letter-spacing:0.25px}

input, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,0.18);
  color:var(--text);
  outline:none;
  transition: box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
[data-theme="light"] input, [data-theme="light"] select{
  background: rgba(0,0,0,0.03);
  color: rgba(0,0,0,0.90);
}
input::placeholder{color:var(--muted2)}
input:focus, select:focus{
  box-shadow: var(--focus);
  border-color: var(--ring);
}

.btn{
  border-radius:14px;
  border:1px solid var(--stroke);
  background: transparent;
  color:var(--text);
  padding:10px 14px;
  cursor:pointer;
  font-weight:760;
  letter-spacing:0.2px;
  transition: transform .06s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:0.45; cursor:not-allowed; transform:none}

.btn.small{padding:7px 10px; border-radius:12px; font-weight:760}

.btn.primary{
  background: var(--green);
  border-color: rgba(43,191,106,0.55);
  color:#06140b;
}
.btn.primary:hover{filter:brightness(1.03)}
.btn.danger{
  background: var(--red);
  border-color: rgba(239,68,68,0.52);
  color:#160707;
}
.btn.outline{
  border-color: rgba(43,191,106,0.40);
  color: var(--text);
}
[data-theme="light"] .btn.outline{color: rgba(0,0,0,0.90)}
.btn.ghost{
  border-color: transparent;
  background: transparent;
}

.small{font-size:12px; color:var(--muted); margin-top:10px}
.hint{font-size:12px; color:var(--muted); margin-top:10px}

.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background: rgba(0,0,0,0.78);
  border:1px solid var(--stroke);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  box-shadow: var(--shadow);
  max-width: 92vw;
  z-index:99;
}
[data-theme="light"] .toast{
  background: rgba(255,255,255,0.98);
  color: rgba(0,0,0,0.88);
}

.footer{
  padding:18px 0 8px;
  text-align:center;
  color:var(--muted2);
  font-size:12px;
}

.card-login{max-width:720px; width:100%}

.cal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.cal-nav{display:flex; align-items:center; gap:10px}
.cal-title{font-weight:820; letter-spacing:0.4px}
.cal-actions{display:flex; gap:10px; align-items:center}

.cal-week{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
  margin:12px 0 10px;
  color:var(--muted);
  font-size:12px;
}
.cal-week > div{padding:0 6px}

.cal-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:10px;
}

.cal-cell{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:10px 10px 8px;
  min-height:78px;
  background: rgba(0,0,0,0.14);
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
[data-theme="light"] .cal-cell{background: rgba(0,0,0,0.03)}
.cal-cell:hover{
  transform: translateY(-1px);
  border-color: rgba(43,191,106,0.35);
}
.cal-cell:active{transform: translateY(0px)}
.cal-cell.muted{opacity:0.45}

.cal-cell .d{font-weight:820}
.cal-cell .m{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}

.badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(43,191,106,0.38);
  background: rgba(43,191,106,0.12);
  color: var(--text);
}
[data-theme="light"] .badge{color: rgba(0,0,0,0.88)}
.badge.off{
  border-color: rgba(239,68,68,0.38);
  background: rgba(239,68,68,0.10);
}

.lists3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  margin-top:14px;
}
@media (max-width: 980px){
  .lists3{grid-template-columns:1fr}
}

.listbox{
  border:1px solid var(--stroke);
  border-radius: var(--r);
  background: rgba(0,0,0,0.10);
  padding:14px;
  min-height:140px;
}
[data-theme="light"] .listbox{background: rgba(0,0,0,0.02)}
.list-title{font-weight:820; margin-bottom:6px}

.list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}

.item{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:10px 10px;
  background: rgba(0,0,0,0.12);
  display:flex;
  justify-content:space-between;
  gap:10px;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
[data-theme="light"] .item{background: rgba(0,0,0,0.02)}
.item:hover{border-color: rgba(43,191,106,0.28)}
.item .t{font-weight:820}
.item .s{font-size:12px; color:var(--muted); margin-top:4px}
.item .a{display:flex; align-items:center; gap:8px}

.icon-btn{
  border-radius:14px;
  border:1px solid var(--stroke);
  background: transparent;
  color:var(--text);
  padding:8px 12px;
  cursor:pointer;
  font-weight:820;
  transition: filter .12s ease, transform .06s ease, border-color .12s ease, background .12s ease;
}
.icon-btn:hover{filter:brightness(1.05)}
.icon-btn:active{transform: translateY(1px)}
.icon-btn.danger{
  border-color: rgba(239,68,68,0.42);
  background: rgba(239,68,68,0.10);
}

/* --- Lists (Dia selecionado / Futuros / Passados) refinamento visual --- */
.lists3{
  gap:14px;
  margin-top:16px;
}

.listbox{
  position:relative;
  overflow:hidden;
  padding:0;
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.listbox::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:3px;
  background: var(--green);
  opacity:0.9;
}

.list-title{
  padding:16px 16px 6px;
  font-weight:820;
  letter-spacing:0.2px;
  margin:0;
}

.listbox .small{
  padding:0 16px 12px;
  margin:0;
  color: var(--muted);
}

.list{
  margin:0;
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:240px;
  overflow:auto;
  border-top:1px solid var(--stroke);
}

.item{
  border-radius:14px;
  padding:12px 12px;
  background: rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.0);
}

[data-theme="light"] .item{
  background: rgba(0,0,0,0.02);
  border:1px solid rgba(10,20,14,0.08);
}

.item:hover{
  border-color: rgba(43,191,106,0.28);
  background: rgba(43,191,106,0.06);
}

.item .t{
  font-weight:820;
  letter-spacing:0.1px;
}

.item .s{
  margin-top:6px;
  color: var(--muted);
}

.item .a .icon-btn{
  border-radius:12px;
  padding:8px 10px;
}

[data-theme="light"] .listbox::before{
  opacity:0.85;
}

/* scrollbars mais limpos */
.list::-webkit-scrollbar{width:10px}
.list::-webkit-scrollbar-track{background:transparent}
.list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.14);
  border:1px solid var(--stroke);
  border-radius:999px;
}
[data-theme="light"] .list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.10);
}


input[type="datetime-local"]{min-height:44px}


@media (max-width: 720px){
  .topbar-inner{padding:12px 12px; flex-wrap:wrap}
  .brand{min-width:0}
  .status-text{max-width:none; white-space:normal}
  .wrap{padding:14px 12px 12px}
  .card{padding:16px}
  .row{gap:10px}
  .field{min-width:160px}
  .btn{width:auto}
}

@media (min-width: 1400px){
  .wrap{padding:26px 22px 18px}
}

.grid > .card:first-child{
  grid-column: 1 / -1;
}

@media (min-width: 1100px){
  .grid > .card:first-child{
    grid-column: 1 / -1;
  }
}

/* === Forçar tema claro (sem modo escuro) === */
:root{
  --bg:#f6f7f6 !important;
  --panel:#ffffff !important;
  --panel2:#ffffff !important;
  --stroke:rgba(10,20,14,0.12) !important;
  --text:rgba(0,0,0,0.90) !important;
  --muted:rgba(0,0,0,0.62) !important;
  --muted2:rgba(0,0,0,0.40) !important;
  --shadow:0 10px 26px rgba(0,0,0,0.10) !important;
  --focus:0 0 0 3px rgba(43,191,106,0.18) !important;
  --ring:rgba(43,191,106,0.30) !important;
}

html{ color-scheme: light; }
body{ background: var(--bg) !important; color: var(--text) !important; }

/* Esconder botao "Modo" e estado (dot + texto) no topo */
#btnTheme,
#authDot,
#authState{
  display:none !important;
}

.modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
}

.modal-card{
  position:relative;
  width:min(560px, 100%);
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:18px;
}

.modal-title{
  font-size:18px;
  font-weight:820;
  letter-spacing:0.2px;
}
/* CENICA_SPECIAL_POPUP_BEGIN */
.special-inline-form{display:none !important}

#specialPopupOverlay.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  display:none;
  align-items:center;
  justify-content:center;
  padding:12px;
  z-index:2000;
}
#specialPopupOverlay.modal-overlay.show{
  display:flex;
}

#specialPopupOverlay .modal.card{
  position:fixed !important;
  inset:auto !important;
  width:min(560px, calc(100vw - 24px)) !important;
  max-width:min(560px, calc(100vw - 24px)) !important;
  height:auto !important;
  min-height:0 !important;
  padding:16px !important;
  margin:0 !important;
  overflow:visible !important;
}
#specialPopupOverlay .card-h{
  margin:0 0 10px 0 !important;
}
#specialPopupOverlay .card-title{
  margin:0 0 4px 0 !important;
  font-size:18px !important;
}
#specialPopupOverlay .card-sub{
  margin:0 !important;
  font-size:12px !important;
}

#specialPopupOverlay .row{
  display:flex !important;
  gap:12px !important;
  align-items:end !important;
  margin:0 !important;
}
#specialPopupOverlay .field{
  min-width:0 !important;
  flex:1 !important;
}
#specialPopupOverlay input[type="time"]{
  min-height:44px;
}

#specialPopupOverlay .modal-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:12px !important;
}

#specialPopupOverlay .hint{
  margin-top:10px !important;
}

@media (max-width: 520px){
  #specialPopupOverlay .row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #specialPopupOverlay .modal-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #specialPopupOverlay .modal-actions .btn{
    width:100% !important;
  }
}
/* CENICA_SPECIAL_POPUP_END */
/* CENICA_MODAL_FIX_BEGIN */

/* esconder completamente qualquer form inline antigo */
.special-inline-form,
.card-wide > .row,
.card-wide input[type="datetime-local"]{
  display:none !important;
}

/* overlay a ocupar o ecrã todo */
.modal-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,0.35) !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  z-index:2000 !important;
}

.modal-overlay.show{
  display:flex !important;
}

/* modal centrado */
.modal{
  background:var(--panel) !important;
  border-radius:18px;
  max-width:420px !important;
  width:100% !important;
  margin:0 !important;
}

/* impedir efeito “sidebar” */
.modal.card{
  transform:none !important;
}

/* bloquear scroll do fundo */
body.modal-open{
  overflow:hidden;
}

/* CENICA_MODAL_FIX_END */
/* CENICA_POPOVER_BEGIN */

/* overlay só para escurecer e permitir clicar fora */
.modal-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,0.18) !important;
  display:none !important;
  z-index:2000 !important;
}
.modal-overlay.show{ display:block !important; }

/* popover compacto */
.modal{
  position:fixed !important;
  left:50% !important;
  top:160px !important;
  transform:translateX(-50%) !important;

  width:420px !important;
  max-width:calc(100vw - 24px) !important;

  background:var(--panel) !important;
  border:1px solid var(--stroke) !important;
  border-radius:18px !important;
  box-shadow: var(--shadow) !important;

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

  height:auto !important;
  min-height:0 !important;
  max-height:calc(100vh - 120px) !important;
  overflow:auto !important;
}

/* remover qualquer "bloco branco" interno que esteja a forçar altura */
.modal *{
  max-height:none !important;
}
.modal .card,
.modal .panel,
.modal .content{
  height:auto !important;
  min-height:0 !important;
}

/* seta opcional */
.modal::before{
  content:"";
  position:absolute;
  top:-7px;
  left:26px;
  width:12px;
  height:12px;
  background:var(--panel);
  border-left:1px solid var(--stroke);
  border-top:1px solid var(--stroke);
  transform:rotate(45deg);
}

/* organização do conteúdo dentro do modal */
.modal .card-h,
.modal .card-head{
  margin:0 0 12px 0 !important;
  display:block !important;
}
.modal .card-title{
  font-size:18px !important;
  font-weight:820 !important;
  margin:0 0 4px 0 !important;
}
.modal .card-sub{
  font-size:12px !important;
  color:var(--muted) !important;
  margin:0 !important;
}

/* garantir que “Agendamento especial” fica por cima */
.modal .card-title,
.modal h1,
.modal h2,
.modal h3{
  order:-1 !important;
}

/* campos em 2 colunas no desktop, 1 coluna no mobile */
.modal .row{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:12px !important;
  align-items:end !important;
}
.modal .field{
  min-width:0 !important;
}
.modal .row-actions{
  margin-top:14px !important;
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
}

/* mobile: centrado e em 1 coluna */
@media (max-width: 720px){
  .modal{
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:92vw !important;
    max-height:calc(100vh - 48px) !important;
  }
  .modal::before{ display:none !important; }
  .modal .row{
    grid-template-columns: 1fr !important;
  }
  .modal .row-actions{
    justify-content:space-between !important;
  }
}

/* CENICA_POPOVER_END */

/* ==== Popup Agendamento especial (compacto e centrado) ==== */

/* garante que o “popup” não fica com altura/largura absurdas mesmo que herde classes */
.modal, .dialog, .overlay-card, .popup{
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(520px, calc(100vh - 24px)) !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

/* se tiver “container branco gigante”, normalmente é um wrapper interno */
.modal * , .dialog * , .overlay-card * , .popup *{
  min-height: 0 !important;
}

/* layout interno: título em cima, depois campos, depois botões */
.modal .modal-title,
.dialog .modal-title,
.overlay-card .modal-title,
.popup .modal-title{
  font-size: 18px !important;
  font-weight: 820 !important;
  margin: 0 0 10px 0 !important;
}

.modal .modal-sub,
.dialog .modal-sub,
.overlay-card .modal-sub,
.popup .modal-sub{
  font-size: 12px !important;
  color: rgba(0,0,0,0.60) !important;
  margin: -6px 0 12px 0 !important;
}

/* grelha dos inputs Ligar/Desligar */
.modal .modal-form,
.dialog .modal-form,
.overlay-card .modal-form,
.popup .modal-form{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  align-items: end !important;
}

/* labels e inputs dentro do popup */
.modal label,
.dialog label,
.overlay-card label,
.popup label{
  font-size: 12px !important;
  color: rgba(0,0,0,0.62) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.modal input, .modal select,
.dialog input, .dialog select,
.overlay-card input, .overlay-card select,
.popup input, .popup select{
  background: rgba(0,0,0,0.03) !important;
  color: rgba(0,0,0,0.90) !important;
  border: 1px solid rgba(10,20,14,0.12) !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
}

/* botões em linha, alinhados à direita */
.modal .modal-actions,
.dialog .modal-actions,
.overlay-card .modal-actions,
.popup .modal-actions{
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

/* mobile: popup ocupa largura quase toda e 1 coluna */
@media (max-width: 520px){
  .modal, .dialog, .overlay-card, .popup{
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }
  .modal .modal-form,
  .dialog .modal-form,
  .overlay-card .modal-form,
  .popup .modal-form{
    grid-template-columns: 1fr !important;
  }
  .modal .modal-actions,
  .dialog .modal-actions,
  .overlay-card .modal-actions,
  .popup .modal-actions{
    justify-content: stretch !important;
  }
  .modal .modal-actions .btn,
  .dialog .modal-actions .btn,
  .overlay-card .modal-actions .btn,
  .popup .modal-actions .btn{
    width: 100% !important;
  }
}
/* FORCE FIX — cola no fim do styles.css */

/* garantir que o modal antigo (se existir) não aparece */
#specialModal{
  display:none !important;
}

/* overlay do popup novo */
#specialPopupOverlay.modal-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,0.35) !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px !important;
  z-index:9999 !important;
}
#specialPopupOverlay.modal-overlay.show{
  display:flex !important;
}

/* o “cartão” do popup: SEM altura fixa */
#specialPopupOverlay .modal.card{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;

  width:min(560px, calc(100vw - 24px)) !important;
  max-width:min(560px, calc(100vw - 24px)) !important;

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

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

  overflow:visible !important;
  display:block !important;
  background:var(--panel) !important;
  border:1px solid var(--stroke) !important;
  border-radius:18px !important;
  box-shadow:var(--shadow) !important;
}

/* garantir que nenhum filho força altura */
#specialPopupOverlay .modal.card *{
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
}

/* layout interno */
#specialPopupOverlay .row{
  display:flex !important;
  gap:12px !important;
  align-items:end !important;
  flex-wrap:nowrap !important;
}
#specialPopupOverlay .field{
  flex:1 !important;
  min-width:0 !important;
}
#specialPopupOverlay .modal-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:12px !important;
}

@media (max-width:520px){
  #specialPopupOverlay .row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #specialPopupOverlay .modal-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #specialPopupOverlay .modal-actions .btn{
    width:100% !important;
  }
}


/* CENICA_SPECIAL_POPUP_CARD2_FIX_BEGIN */
#specialPopupOverlay2{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px !important;
  background:rgba(0,0,0,0.18) !important;
  z-index:99999 !important;
}
#specialPopupOverlay2.show{ display:flex !important; }

#specialPopupCard2{
  position:fixed !important;
  inset:auto !important;
  width:min(560px, calc(100vw - 24px)) !important;
  max-width:min(560px, calc(100vw - 24px)) !important;

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

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

  overflow:visible !important;
  background:var(--panel) !important;
  border:1px solid var(--stroke) !important;
  border-radius:18px !important;
  box-shadow:var(--shadow) !important;

  transform:translateX(-50%) !important;
}

#specialPopupCard2 *{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

@media (max-width:720px){
  #specialPopupCard2{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}
/* CENICA_SPECIAL_POPUP_CARD2_FIX_END */


/* === CENICA_POPUP_TYPO_LAYOUT_FIX_BEGIN === */
#specialPopupOverlay .modal.card{
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#specialPopupOverlay .card-h{
  margin:0 0 10px 0 !important;
}

#specialPopupOverlay .card-title{
  font-size:18px !important;
  line-height:1.15 !important;
  font-weight:820 !important;
  margin:0 !important;
}

#specialPopupOverlay .card-sub{
  font-size:12px !important;
  line-height:1.15 !important;
  color:var(--muted) !important;
  margin-top:4px !important;
}

#specialPopupOverlay .row{
  display:flex !important;
  align-items:flex-end !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  width:100% !important;
}

#specialPopupOverlay .field{
  flex:1 1 220px !important;
  min-width:180px !important;
  max-width:100% !important;
}

#specialPopupOverlay .label{
  font-size:12px !important;
  line-height:1.1 !important;
  margin:0 0 6px 0 !important;
}

#specialPopupOverlay input[type="time"]{
  width:100% !important;
  max-width:100% !important;
  font-size:14px !important;
  line-height:1.2 !important;
  padding:12px 12px !important;
}

#specialPopupOverlay .modal-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:12px !important;
  width:100% !important;
  flex-wrap:wrap !important;
}

#specialPopupOverlay .modal-actions .btn{
  font-size:14px !important;
  line-height:1.1 !important;
  padding:10px 14px !important;
  white-space:nowrap !important;
  max-width:100% !important;
}

@media (max-width: 720px){
  #specialPopupOverlay .modal.card{
    width:calc(100vw - 24px) !important;
  }
  #specialPopupOverlay .field{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  #specialPopupOverlay .modal-actions{
    justify-content:stretch !important;
  }
  #specialPopupOverlay .modal-actions .btn{
    flex:1 1 100% !important;
    width:100% !important;
  }
}
/* === CENICA_POPUP_TYPO_LAYOUT_FIX_END === */