/* Shared account and light/dark palette. */
.account-dropdown{position:relative}.account-toggle{display:flex;align-items:center;gap:8px}.account-toggle span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-menu{position:absolute;right:0;top:calc(100% + 8px);width:280px;max-width:calc(100vw - 24px);padding:16px;background:var(--gt-card);color:var(--gt-text);border:1px solid var(--gt-line);border-radius:8px;box-shadow:var(--gt-shadow-card);z-index:1050}.account-menu[hidden]{display:none}.account-menu>strong,.account-menu>small{display:block;overflow-wrap:anywhere}.account-menu>small{color:var(--gt-muted);margin-bottom:10px}.account-menu>a{display:block;padding:8px 0;color:var(--gt-text);text-decoration:none}.account-theme-label{display:block;margin:8px 0;color:var(--gt-muted);font-size:12px}.account-themes{display:flex;gap:5px;margin-bottom:14px}.account-themes button{flex:1;border:1px solid var(--gt-line);border-radius:5px;padding:7px 5px;background:var(--gt-page);color:var(--gt-text)}.account-themes button.active{background:var(--gt-primary);color:white}.profile-panel{max-width:680px}
:root[data-theme=dark]{color-scheme:dark;--gt-page:#111827;--gt-card:#1e293b;--gt-line:#425269;--gt-head:#253f43;--gt-text:#e5edf6;--gt-muted:#b0bdce;--gt-primary:#299c91;--gt-primary-soft:#21433f;--gt-sidebar:#172030;--gt-sidebar-strong:#101827;--bs-body-bg:#1e293b;--bs-body-color:#e5edf6;--bs-secondary-color:#b0bdce;--bs-border-color:#425269}
[data-theme=dark] body{background:var(--gt-page);color:var(--gt-text)}
[data-theme=dark] :is(.topbar,.panel,.metric-card,.card,.login-pane,.icon-btn,.tab-link,.search-line,.module-menu,.menu-head,.joker-card,.joker-device-row,.modal-content,.setting-card,.status-card,.menu-search,.joker-map,.joker-selected-state,.event-row){background:var(--gt-card);color:var(--gt-text);border-color:var(--gt-line)}
[data-theme=dark] :is(.panel-head,.card-header,.table thead th){background:var(--gt-head);color:var(--gt-text);border-color:var(--gt-line)}
[data-theme=dark] :is(h1,h2,h3,h4,h5,.menu-head h1,.topbar h2,.panel h3,.page-title){color:var(--gt-text)}
[data-theme=dark] :is(.form-control,.form-select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select){background-color:#172233;color:var(--gt-text);border-color:var(--gt-line)}
[data-theme=dark] :is(.table,table){color:var(--gt-text);--bs-table-bg:var(--gt-card);--bs-table-color:var(--gt-text);--bs-table-striped-bg:#243347;--bs-table-striped-color:var(--gt-text);--bs-table-hover-bg:#30445a;--bs-table-hover-color:var(--gt-text);border-color:var(--gt-line)}
[data-theme=dark] .text-secondary,[data-theme=dark] .text-muted{color:var(--gt-muted)!important}
[data-theme=dark] :is(.bg-white,.bg-light){background-color:var(--gt-card)!important;color:var(--gt-text)}
[data-theme=dark] .tab-link.active{background:var(--gt-primary-soft);color:#7ee4d6}
[data-theme=dark] :is(.block-link,.floor-switch button,.joker-device-row code){color:var(--gt-text)}
[data-theme=dark] :is(.floor-switch,.block-link.active,.block-link:hover){background:var(--gt-head)}
[data-theme=dark] .floor-switch button.active{background:var(--gt-card);color:var(--gt-text)}
@media(max-width:760px){.account-toggle span{max-width:110px}.account-themes button{min-height:44px}.account-menu>a{min-height:44px}.topbar{flex-wrap:wrap;padding-top:8px!important;padding-bottom:8px!important}}

[data-theme=dark] .btn-outline-secondary{--bs-btn-color:#c7d4e5;--bs-btn-border-color:#8293aa;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#425269;--bs-btn-hover-border-color:#a4b5ca}

/* Device controls and keyboard access use the same dark surfaces as the shell. */
html[data-theme=dark] .app-shell :is(.joker-control-row,.joker-keyboard-column,.joker-keyboard-tile,.joker-access-card,.joker-unplaced-device,.joker-placement-side,.joker-placement-editor,.joker-placement-map,.joker-button-panel-placeholder){background:var(--gt-card);color:var(--gt-text);border-color:var(--gt-line)}
html[data-theme=dark] .app-shell .joker-control-row.is-card-off{background:#243247;border-color:#53657e}
html[data-theme=dark] .app-shell :is(.joker-control-row.is-card-on,.joker-keyboard-link.active,.joker-keyboard-access-tile.active){background:#163d35;border-color:#408e78}
html[data-theme=dark] .app-shell .joker-control-row.is-card-dimmer.is-card-on{background:#203c60;border-color:#5486c1}
html[data-theme=dark] .app-shell :is(.joker-control-row:hover,.joker-control-row.active,.joker-access-card:hover,.joker-access-card.active,.joker-unplaced-device:hover){border-color:#80bfff;box-shadow:inset 0 0 0 1px #80bfff}
html[data-theme=dark] .app-shell :is(.joker-control-row small,.joker-keyboard-tile small,.joker-keyboard-tile label,.joker-keyboard-column h4,.joker-keyboard-floor h4,.joker-access-form label,.joker-placement-form label,.joker-table-filters label,.joker-command-feedback,.joker-window-empty){color:#bccbdd}
html[data-theme=dark] .app-shell :is(.joker-keyboard-tile strong,.joker-control-row strong,.joker-access-card strong,.joker-window-empty strong){color:#edf4ff}
html[data-theme=dark] .app-shell :is(.joker-keyboard-tile .tile-icon,.joker-control-row .metric-icon,.joker-unplaced-device i){background:#30445b;color:#d4e5ff}
html[data-theme=dark] .app-shell .joker-control-row.is-card-on .metric-icon{background:#24594b;color:#9ef0cc}
html[data-theme=dark] .app-shell :is(.joker-keyboard-empty,.joker-access-empty,.joker-table-filters,.joker-alarm-state span){background:#243247;color:var(--gt-text)}
html[data-theme=dark] .app-shell .status-pill{background:#34455b;color:#e5edf6}
html[data-theme=dark] .app-shell .status-pill.ok{background:#24594b;color:#9ef0cc}
html[data-theme=dark] .app-shell :is(.joker-control-dimmer-value,.joker-dimmer-value){color:#a7d3ff}

html[data-theme=dark] .app-shell :is(.renta1-calendar-body,.renta1-scheduler-host,.renta1-lists){background:var(--gt-card);color:var(--gt-text)}
html[data-theme=dark] .app-shell .renta1-list-title{color:var(--gt-text)}
html[data-theme=dark] .app-shell :is(.renta1-list-count,.renta1-list-empty){color:var(--gt-muted)}
html[data-theme=dark] #reservationModal :is(.modal-header,.modal-footer){background:var(--gt-head);color:var(--gt-text);border-color:var(--gt-line)}
html[data-theme=dark] #reservationModal .modal-title{color:var(--gt-text)}
html[data-theme=dark] .scheduler_default_main{border-color:var(--gt-line);color:var(--gt-text)}
html[data-theme=dark] :is(.scheduler_default_corner,.scheduler_default_corner_inner,.scheduler_default_rowheader,.scheduler_default_rowheader_inner,.scheduler_default_timeheadergroup,.scheduler_default_timeheadergroup_inner,.scheduler_default_timeheadercol,.scheduler_default_timeheadercol_inner){background:var(--gt-head);color:var(--gt-text);border-color:var(--gt-line)}
html[data-theme=dark] .scheduler_default_cell{background:#182335}
html[data-theme=dark] .scheduler_default_cell.scheduler_default_cell_business{background:#243247}
html[data-theme=dark] :is(.scheduler_default_divider,.scheduler_default_divider_horizontal,.scheduler_default_resourcedivider,.scheduler_default_matrix_vertical_line,.scheduler_default_matrix_horizontal_line){background:var(--gt-line)}

html[data-theme=dark] :is(.scheduler_default_timeheader_scroll,.scheduler_default_rowheader_scroll){background:var(--gt-head);color:var(--gt-text)}

/* Account menu aligned with ASL_UNIFI. */
.app-shell .account-toggle{display:flex;align-items:center;gap:10px;padding:3px 9px;min-height:34px;border:1px solid var(--gt-line);border-radius:6px;background:var(--gt-card);color:var(--gt-text);text-align:right;max-width:320px}
.app-shell .account-toggle>span:first-child{min-width:0}
.app-shell .account-toggle strong,.app-shell .account-toggle small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .account-toggle strong{font-size:12px}.app-shell .account-toggle small{font-size:10px;color:var(--gt-muted)}
.app-shell .account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:1080;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 80px);overflow:auto;border:1px solid var(--gt-line);border-radius:var(--gt-radius-card);background:var(--gt-card);color:var(--gt-text);box-shadow:0 16px 44px rgba(15,23,42,.22);text-align:left}
.app-shell .account-menu[hidden]{display:none}
.app-shell .account-menu-section{padding:10px 12px;border-bottom:1px solid var(--gt-line)}
.app-shell .account-menu-section h2{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--gt-muted);margin:0 0 7px}
.app-shell .account-menu-section p{margin:0 0 7px}
.app-shell .theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.app-shell .theme-option{min-height:32px;border:1px solid var(--gt-line);border-radius:5px;background:var(--gt-card);color:var(--gt-text);font-size:12px;font-weight:700}
.app-shell .theme-option.active{border-color:var(--gt-primary);background:var(--gt-primary-soft);color:var(--gt-primary)}
.app-shell .account-password-form{display:grid;gap:8px;padding:10px 12px}
.app-shell .account-password-form .btn{justify-self:end}
.app-shell .profile-card{max-width:620px}
@media(max-width:760px){.app-shell .account-toggle,.app-shell .theme-option{min-height:44px}.app-shell .account-dropdown{flex:1}.app-shell .account-menu{position:absolute;left:0;right:auto;top:calc(100% + 8px);width:calc(100vw - 24px);max-height:60dvh}}
.joker-account{display:flex;align-items:center;gap:8px}.app-shell .account-menu{padding:0}.app-shell .account-toggle>span{max-width:260px}.account-password-form label{display:grid;gap:4px;font-size:12px;color:var(--gt-muted)}.account-password-form small{font-size:10px;color:var(--gt-muted)}.account-password-form input{width:100%;min-width:0;border:1px solid var(--gt-line);border-radius:5px;padding:5px 8px;background:var(--gt-card);color:var(--gt-text)}.joker-account>form{margin:0}.joker-account>form .btn{display:grid;place-items:center;min-width:34px;min-height:34px;padding:5px}.joker-account .edit-gear-icon{width:16px;height:16px}.app-shell .account-menu-section .btn{font-size:12px}.app-shell .theme-option.active{color:var(--gt-text)}
@media(max-width:760px){.app-shell .account-menu{left:auto;right:0;width:min(380px,calc(100vw - 24px))}.app-shell .account-toggle>span{max-width:160px}}

/* Account header matching Serwis THKomp. */
.app-shell .joker-account{gap:4px;max-width:min(420px,100%);padding:4px;border:1px solid #c2d2e4;border-radius:8px;background:#edf4fb;box-shadow:0 8px 20px rgba(15,23,42,.075)}
.app-shell .joker-account .account-dropdown{min-width:0;flex:1 1 auto}
.app-shell .joker-account .account-toggle{width:100%;min-height:42px;padding:6px 12px;border:1px solid rgba(82,107,143,.16);background:#f8fbff;border-radius:6px;line-height:1.25;justify-content:flex-end}
.app-shell .joker-account .account-toggle strong{font-size:13px;color:var(--gt-text)}
.app-shell .joker-account .account-toggle small{font-size:12px;color:var(--gt-muted)}
.app-shell .joker-account .account-toggle:hover{background:#fff;border-color:#aebfd4}
.app-shell .joker-account>form .btn{width:42px;height:42px;min-height:42px;border:1px solid #8f1d1d;border-radius:6px;background:#9f1d1d;color:#fff;flex:0 0 42px}
.app-shell .joker-account>form .btn:hover{background:#7f1717;border-color:#6f1212}
.app-shell .joker-account .edit-gear-icon{width:20px;height:20px}
html[data-theme=dark] .app-shell .joker-account{background:#253646;border-color:#425269}
html[data-theme=dark] .app-shell .joker-account .account-toggle{background:#1e293b;border-color:#425269}
html[data-theme=dark] .app-shell .joker-account .account-toggle:hover{background:#30445a;border-color:#8293aa}

/* Occupancy uses the same frame and inner surface as the account header. */
.app-shell .joker-occupancy{padding:4px;gap:0;border:1px solid #c2d2e4;border-radius:8px;background:#edf4fb;color:var(--gt-text);box-shadow:0 8px 20px rgba(15,23,42,.075)}
.app-shell .joker-occupancy>i{padding:0 10px;color:var(--gt-muted);font-size:24px;line-height:1;flex-shrink:0}
.app-shell .joker-occupancy>div{padding:6px 12px;min-height:42px;box-sizing:border-box;border:1px solid rgba(82,107,143,.16);border-radius:6px;background:#f8fbff;line-height:1.25}
.app-shell .joker-occupancy .joker-occupancy-label{color:var(--gt-muted);opacity:1}
.app-shell .joker-occupancy .joker-occupancy-value{color:var(--gt-text);text-align:center}
html[data-theme=dark] .app-shell .joker-occupancy{background:#253646;border-color:#425269}
html[data-theme=dark] .app-shell .joker-occupancy>div{background:#1e293b;border-color:#425269}