.sync-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-size:17px;line-height:1;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.sync-trigger>i{display:block;font-size:17px;line-height:1}
.app-header .sync-trigger:hover{border-color:#E47B18;background:#faf5ec;color:#A9510A}
.app-header .sync-trigger[data-state=synced]{color:var(--green)}
.app-header .sync-trigger[data-state=waiting]{color:var(--orange-deep)}
.app-header .sync-trigger[data-state=recovery]{color:var(--danger)}
.sync-trigger>[data-sync-badge]{position:absolute;right:-5px;top:-6px;border:2px solid var(--card);border-radius:20px;padding:0 4px;min-width:17px;font-size:10px;line-height:15px;background:var(--orange-deep);color:#fff}
.app-header .sync-trigger[data-state]:after{content:'';position:absolute;right:3px;bottom:3px;width:7px;height:7px;border:2px solid var(--card);border-radius:50%;background:var(--muted)}
.app-header .sync-trigger[data-state=synced]:after{background:var(--green)}
.app-header .sync-trigger[data-state=waiting]:after{background:var(--orange)}
.app-header .sync-trigger[data-state=recovery]:after{background:var(--danger)}
@keyframes sync-icon-spin{to{transform:rotate(360deg)}}
/* Sync status shares the floating profile/settings modal presentation. */
.sync-status-modal{--bs-modal-width:480px;--offline-sync-accent:#e47b18}
.sync-status-modal .modal-dialog{max-width:min(480px,calc(100vw - 24px))}
.sync-status-modal .modal-body{padding:0;overflow-wrap:anywhere}
.sync-status-modal .profile-edit-heading>p{margin-bottom:18px}
.sync-status-modal .sync-popup-status{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 16px;margin:0 0 16px;border:1px solid var(--dialog-border);border-radius:12px;background:var(--dialog-soft);color:var(--dialog-ink);font-size:16px;font-weight:650;line-height:1.5;text-align:center}
.sync-status-modal .sync-status-icon{display:inline-grid;place-items:center;flex:0 0 auto;font-size:18px;line-height:1}
.sync-status-modal[data-state=synced] .sync-popup-status{color:var(--green);border-color:color-mix(in srgb,var(--green) 25%,var(--dialog-border));background:color-mix(in srgb,var(--green) 10%,var(--dialog-bg))}
.sync-status-modal[data-state=recovery] .sync-popup-status{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--dialog-bg))}
.sync-status-details{margin:0}
.sync-status-details>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:16px;padding:13px 0;border-bottom:1px solid var(--dialog-border)}
.sync-status-details dt{font-size:13px;line-height:1.5;font-weight:400;color:var(--dialog-muted)}
.sync-status-details dd{margin:0;font-size:13px;line-height:1.5;font-weight:500;text-align:right;color:var(--dialog-ink);overflow-wrap:anywhere}
.sync-status-modal .sync-popup-note{width:100%;font-size:13px;line-height:1.6;color:var(--dialog-muted);margin:2px 0 0;text-align:center}
.sync-status-modal .modal-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:20px 0 0;border:0}
.sync-status-modal .modal-footer>.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:0;padding:11px 16px;border-radius:10px;font-size:13px;line-height:1.5}
.sync-trigger:focus-visible,.sync-status-modal button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
html[data-theme=dark] .sync-trigger{background:var(--card);border-color:var(--line)}
html[data-theme=dark] .app-header .sync-trigger:hover{background:var(--cream-2);border-color:#E47B18;color:#E47B18}
@media(max-width:560px){.sync-status-modal .modal-dialog{padding:0;margin:12px auto}.sync-status-details>div{gap:12px}.sync-status-modal .modal-footer{padding-top:16px}}
@media print{.sync-trigger,.sync-status-modal{display:none!important}}

/* Use the same 12px viewport inset at every Bootstrap breakpoint. */
html .sync-status-modal .modal-dialog{width:min(480px,calc(100vw - 24px));max-width:min(480px,calc(100vw - 24px));height:calc(100dvh - 24px);min-height:calc(100dvh - 24px);margin:12px auto;padding:0}

.connectivity-banner{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:16px;margin:0 0 12px;padding:14px 18px;border:1px solid #f4cbaa;border-radius:9px;background:#fff5ec;color:#3b2b21}
.connectivity-banner[hidden]{display:none}
.connectivity-banner-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:#ffe4cc;color:#ed7412;font-size:27px}
.connectivity-banner-copy{display:grid;gap:3px;min-width:0;font-size:12px;line-height:1.45}
.connectivity-banner-copy>strong{font-size:17px;font-weight:700;line-height:1.3}
.connectivity-banner-links{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:3px}
.connectivity-banner-links a{color:#8f4b1d;font-size:11px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.connectivity-banner[data-state=authentication],.connectivity-banner[data-state=authorization],.connectivity-banner[data-state=backend],.connectivity-banner[data-state=database]{border-color:#edc39e;background:#fff8f1}
.local-summary-banner{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:12px 16px;border:1px solid #a7e3f3;border-radius:9px;background:#e6f8fd;color:#213b43;font-size:12px;line-height:1.45}
.local-summary-banner[hidden]{display:none}
.local-summary-banner>i{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-right:1px solid #8bd5e8;padding-right:12px;box-sizing:content-box;color:#08799a;font-size:20px}
.local-summary-banner>span{min-width:0}

.sync-status-modal .modal-content{position:relative;max-height:100%;overflow:hidden;border:1px solid rgba(90,59,39,.1);border-radius:24px;background:#fffdf9;color:#442b1d;box-shadow:0 18px 54px rgba(35,21,12,.24)}
.sync-status-modal .sync-status-close{position:absolute;z-index:2;top:15px;right:16px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:#77543e}
.sync-status-modal .sync-status-close:hover{background:#f6eee6}
.sync-status-heading{display:grid;justify-items:center;padding:22px 30px 6px;text-align:center}
.sync-status-emblem{display:grid;place-items:center;width:58px;height:58px;margin:0 0 10px;border:1px solid color-mix(in srgb,var(--offline-sync-accent) 38%,var(--dialog-border));border-radius:50%;color:var(--offline-sync-accent);font-size:27px}
.sync-status-heading h2{margin:0 0 4px;color:#442b1d;font-size:24px;font-weight:750;line-height:1.25}
.sync-status-heading p{max-width:390px;margin:0;color:#74543f;font-size:13px;line-height:1.45}
.sync-status-modal .modal-body{min-height:0;padding:12px 22px 0;overflow-y:auto;overflow-wrap:anywhere}
.sync-connection-panel{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);align-items:stretch;gap:10px;min-height:54px;margin:0 0 12px;padding:0;border:0;border-radius:0;background:transparent;color:inherit}
.sync-status-modal .sync-connection-region .sync-popup-status{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:12px;line-height:1.35;text-align:left}
.sync-status-region{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:10px 12px;border:1px solid;border-radius:12px;font-size:12px;line-height:1.35}
.sync-status-label{min-width:0;font-size:12px;font-weight:700;overflow-wrap:anywhere}
.sync-status-icon{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;font-size:16px;line-height:1}
.sync-connection-region[data-connection=online]{border-color:var(--status-success-border);background:var(--status-success-soft);color:var(--status-success)}
.sync-connection-region[data-connection=checking]{border-color:var(--line);background:var(--cream);color:var(--muted)}
.sync-connection-region:is([data-connection=offline],[data-connection=device-network],[data-connection=server],[data-connection=database],[data-connection=backend],[data-connection=authentication],[data-connection=authorization]){border-color:var(--status-warning-border);background:var(--status-warning-soft);color:var(--status-warning)}
.sync-authorization-region[data-sync-state=synced]{border-color:var(--status-success-border);background:var(--status-success-soft);color:var(--status-success)}
.sync-authorization-region[data-sync-state=waiting]{border-color:var(--status-warning-border);background:var(--status-warning-soft);color:var(--status-warning)}
.sync-authorization-region[data-sync-state=recovery]{border-color:var(--status-warning-border);background:var(--status-warning-soft);color:var(--status-warning)}
.sync-connection-divider{align-self:center;width:1px;height:28px;background:var(--line)}
.sync-status-details{margin:0;border:1px solid #efe4d9;border-radius:14px;background:#fffdfa;overflow:hidden}
.sync-status-details>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:14px;min-height:42px;padding:9px 14px;border-bottom:1px solid #efe4d9}
.sync-status-details>div:last-child{border-bottom:0}
.sync-status-details dt{display:flex;align-items:center;gap:10px;color:#694a35;font-size:13px;line-height:1.4;font-weight:400}
.sync-status-details dt i{flex:0 0 18px;color:#946541;font-size:16px}
.sync-status-details dd{margin:0;color:#4d3323;font-size:13px;line-height:1.4;font-weight:650;text-align:right;overflow-wrap:anywhere}
.sync-owner-warning{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:13px;border-radius:14px;background:#fbf0df;color:#654324}
.sync-owner-warning[hidden]{display:none}
.sync-owner-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-right:1px solid #ead2b1;padding-right:10px;box-sizing:content-box;color:#795331;font-size:21px}
.sync-owner-warning>div{min-width:0}
.sync-owner-warning strong{display:block;margin-bottom:3px;font-size:13px;font-weight:700}
.sync-owner-warning p{margin:0;color:#705940;font-size:11px;line-height:1.45}
.sync-popup-guidance{display:grid;gap:7px;margin:12px 2px 0}
.sync-popup-guidance p{display:flex;align-items:flex-start;gap:9px;margin:0;color:#68615a;font-size:11px;line-height:1.45}
.sync-popup-guidance p i{flex:0 0 16px;color:#8b6445;font-size:14px}
.sync-status-modal .modal-footer{gap:10px;padding:12px 22px 18px}
.sync-status-modal .modal-footer>[data-sync-action]{width:100%;max-width:100%;justify-self:stretch;min-height:44px}
.sync-status-modal .modal-footer>.btn{min-height:44px;border-radius:12px;background:#ee8419;color:#fff;font-size:14px;font-weight:700}
.sync-status-modal .modal-footer>.btn:hover{background:#d9720f}
.sync-status-modal .sync-popup-note{box-sizing:border-box;width:min(100%,440px);max-width:100%;margin:0 auto;padding:0 8px;color:var(--dialog-muted);font-size:12px;line-height:1.55;text-align:center;overflow-wrap:anywhere}
.sync-status-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:5px;padding-top:10px;border-top:1px solid #efe4d9}
.sync-status-footer>span{display:flex;align-items:center;gap:7px;color:#805b3c;font-size:11px}
.sync-status-footer>[hidden]{display:none}
.sync-status-footer>button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 0;border:0;background:transparent;color:#60412d;font-size:11px;font-weight:650}
.sync-status-footer>button:hover{text-decoration:underline;text-underline-offset:3px}
.sync-status-modal button:focus-visible{outline:2px solid #ee8419;outline-offset:3px}
html[data-theme=dark] .connectivity-banner{border-color:#704729;background:#382b22;color:#f6e5d7}
html[data-theme=dark] .connectivity-banner-icon{background:#4b3324;color:#ffad5c}
html[data-theme=dark] .connectivity-banner-links a{color:#ffbf7e}
html[data-theme=dark] .local-summary-banner{border-color:#1b6173;background:#1a3b45;color:#d9f4fa}
html[data-theme=dark] .local-summary-banner>i{border-color:#30788a;color:#70cde2}
html[data-theme=dark] .sync-status-modal .modal-content{border-color:#604a3b;background:#2c2520;color:#f6e9df}
html[data-theme=dark] .sync-status-heading h2{color:#f6e9df}
html[data-theme=dark] .sync-status-heading p,html[data-theme=dark] .sync-owner-warning p{color:#d1bba8}
html[data-theme=dark] .sync-status-modal .sync-status-close{color:#dcc6b4}
html[data-theme=dark] .sync-status-details{border-color:#514137;background:#302822}
html[data-theme=dark] .sync-status-details>div,html[data-theme=dark] .sync-status-footer{border-color:#514137}
html[data-theme=dark] .sync-status-details dt,html[data-theme=dark] .sync-status-details dd,html[data-theme=dark] .sync-status-footer>button{color:#efdfd2}
html[data-theme=dark] .sync-connection-region[data-connection=online],html[data-theme=dark] .sync-authorization-region[data-sync-state=synced]{border-color:var(--status-success-border);background:var(--status-success-soft);color:var(--status-success)}
html[data-theme=dark] .sync-connection-region:is([data-connection=offline],[data-connection=device-network],[data-connection=server],[data-connection=database],[data-connection=backend],[data-connection=authentication],[data-connection=authorization]),html[data-theme=dark] .sync-authorization-region:is([data-sync-state=waiting],[data-sync-state=recovery]){border-color:var(--status-warning-border);background:var(--status-warning-soft);color:var(--status-warning)}
html[data-theme=dark] .sync-owner-warning{background:#403326;color:#f0d1a5}
html[data-theme=dark] .sync-owner-icon{border-color:#69563f;color:#e4bd8c}
html[data-theme=dark] .sync-popup-guidance p,html[data-theme=dark] .sync-status-footer>span{color:#d4c3b4}
@media(max-width:560px){
  .connectivity-banner{grid-template-columns:44px minmax(0,1fr);gap:11px;padding:12px}
  .connectivity-banner-icon{width:44px;height:44px;font-size:23px}
  .connectivity-banner-copy>strong{font-size:15px}
  .sync-status-heading{padding:18px 22px 5px}
  .sync-status-heading h2{font-size:22px}
  .sync-status-modal .modal-body{padding:10px 16px 0}
  .sync-status-modal .modal-footer{padding:10px 16px 14px}
  .sync-connection-panel{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:7px}
  .sync-status-region{gap:6px;padding:9px 7px}
  .sync-status-label{font-size:11px}
}

@media(max-width:380px){
  .sync-connection-panel{grid-template-columns:minmax(0,1fr);gap:6px}
  .sync-connection-divider{display:none}
  .sync-status-region{justify-content:flex-start;min-height:42px;padding:8px 12px}
}
.sync-status-details>div{gap:8px;padding:9px 10px}