/* Presentation only: the existing navigation, grids, and button orientation stay intact. */
body.kupak-glassy{background:var(--page-color,#cbb79f)!important;background-image:radial-gradient(ellipse at 10% 15%,#fff5,transparent 55%),linear-gradient(115deg,#fff1,#57432422),var(--page-image,none)!important;background-position:var(--page-position,center)!important;background-size:cover!important;background-attachment:fixed!important;color:#28251f!important;min-height:100vh}
body.kupak-glassy #app{background:transparent!important}
body.kupak-glassy :is(header,.sidebar,main,.panel,.card,fieldset,.preview-card){background:rgba(255,250,239,.42)!important;color:#28251f!important;border-color:rgba(255,255,255,.72)!important;border-radius:20px;box-shadow:0 10px 34px #40311f1c,inset 0 1px 0 #fff9;backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}
body.kupak-glassy main{padding:clamp(16px,3vw,32px);box-sizing:border-box}
body.kupak-glassy :is(h1,h2,h3,label,legend,p){color:inherit}
body.kupak-glassy :is(input,textarea,select){background:#fffaf0ed!important;color:#28251f!important;border:1px solid #a79069!important}
body.kupak-glassy :is(.muted,.hint){color:#5b5143!important}
body.kupak-glassy :is(.btn,.sidebar button){color:#28251f}
body.kupak-glassy :is(.btn.primary,.btn.active,button.selected){background:#292820!important;color:#fff!important}
body.kupak-glassy .appearance-dialog{background:#fbf6ecef!important;color:#28251f!important}
.appearance-open{display:inline-flex;align-items:center;gap:8px;width:auto;flex:0 0 auto;margin:6px 0;font-size:14px}
.appearance-dialog{width:min(540px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;box-sizing:border-box;padding:22px;border:1px solid #c2ae89;border-radius:22px;background:#fbf6ec;color:#28251f;box-shadow:0 24px 80px #0005}
.appearance-dialog::backdrop{background:#241e1445;backdrop-filter:blur(3px)}
.appearance-form{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;min-width:0;margin:0;max-height:calc(100dvh - 80px);overflow:hidden}
.appearance-body{display:grid;gap:14px;overflow-y:auto;min-height:0;padding:4px 2px}
.appearance-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}
.appearance-heading h2{font-size:24px;margin:0}
.appearance-form label{display:grid;gap:6px;font-size:16px;font-weight:600;min-width:0}
.appearance-form :is(input,select){box-sizing:border-box;min-width:0;max-width:100%;font:inherit}
.appearance-form input[type=file]{width:100%;padding:10px;border-radius:10px}
.appearance-form input[type=color]{width:90px;height:48px;padding:4px;border-radius:10px}
.appearance-form select{padding:12px 38px 12px 16px;background:#eee7d8;border:1px solid #b59755;border-radius:24px;box-shadow:0 3px 1px #0002}
.appearance-form .appearance-switch{display:flex;align-items:center;gap:10px;position:relative;cursor:pointer}
.appearance-switch input{position:absolute;opacity:0;width:48px;height:28px;margin:0}
.appearance-switch span{display:block;width:48px;height:28px;flex:none;background:#737373;border-radius:18px;padding:3px;box-sizing:border-box}
.appearance-switch span::after{content:'';display:block;background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .15s}
.appearance-switch input:checked+span{background:#008a53}
.appearance-switch input:checked+span::after{transform:translateX(20px)}
.appearance-switch input:focus-visible+span{outline:3px solid #66501f;outline-offset:3px}
.appearance-hint{font-size:14px!important;line-height:1.5;margin:0;color:#5b5143!important}
.appearance-form [data-status]{min-height:22px;margin:0;font-size:14px}
.appearance-actions,.appearance-image-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.appearance-form button{width:auto!important;font-size:15px;padding:12px 18px}
.appearance-form [data-thumbnail]{width:100px;height:64px;border-radius:8px;object-fit:cover}
.appearance-dialog [hidden]{display:none!important}
@media(prefers-reduced-transparency:reduce){body.kupak-glassy :is(header,.sidebar,main,.panel,.card,fieldset){background:#f6f1e8!important;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.appearance-switch span::after{transition:none}}
@media screen{
  :root[data-kupak-theme=dark] body.kupak-glassy{background-color:var(--page-color)!important;background-image:linear-gradient(#0008,#0008),var(--page-image,none)!important;color:#f3ead4!important}
  :root[data-kupak-theme=dark] body.kupak-glassy #app{background:transparent!important}
  :root[data-kupak-theme=dark] body.kupak-glassy :is(header,.sidebar,main,.panel,.card,fieldset,.preview-card),:root[data-kupak-theme=dark] body.kupak-glassy #app :is(header,.sidebar,main,.panel,.card,fieldset){background:rgba(20,28,19,.55)!important;color:#f3ead4!important;border-color:#776337!important}
  :root[data-kupak-theme=dark] body.kupak-glassy .appearance-dialog{background:#24231ff5!important;color:#f3ead4!important}
  :root[data-kupak-theme=dark] body.kupak-glassy :is(.appearance-hint,.muted,.hint){color:#d3c3a1!important}
}
@media print{body.kupak-glassy{background:white!important;color:black!important}body.kupak-glassy :is(header,.sidebar,main,.panel,.card,fieldset){background:white!important;box-shadow:none!important;backdrop-filter:none!important}.appearance-dialog,.appearance-open{display:none!important}}

/* Reference: translucent individual panels over one continuous background. */
body.kupak-glassy main{background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.appearance-open{width:44px!important;height:44px;padding:10px!important;justify-content:center;border-radius:50%!important;box-sizing:border-box}
body.kupak-glassy .preview-card{border:1px solid #fff6;box-shadow:0 8px 26px #30231018,inset 0 1px 0 #fffa}

/* Admin visual editor: per-page tokens, separate phone typography/layout. */
body.kupak-glassy{background-image:var(--page-image,none),linear-gradient(135deg,var(--page-color),var(--page-color2,var(--page-color)))!important}
:root[data-kupak-theme=dark] body.kupak-glassy{background-image:linear-gradient(#0007,#0007),var(--page-image,none),linear-gradient(135deg,var(--page-color),var(--page-color2,var(--page-color)))!important}
body.kupak-glassy #app :is(.panel,.card,header){backdrop-filter:blur(var(--glass-blur,16px)) saturate(125%);background:color-mix(in srgb,#fffaf0 var(--glass-alpha,55%),transparent)!important}
body.kupak-glassy #app .sidebar{background:color-mix(in srgb,var(--sidebar-color,#cbb79f) var(--glass-alpha,55%),transparent)!important;backdrop-filter:blur(var(--glass-blur,16px))}
body.signed-in.kupak-glassy #app :is(button,.btn,.card):not(.kupak-bare-icon){background:linear-gradient(135deg,color-mix(in srgb,var(--button-color,#cbb79f) 65%,transparent),#ffffff30)!important;backdrop-filter:blur(var(--glass-blur,16px));box-shadow:inset 0 1px 0 #fff7,0 4px 14px #0002!important;font-size:var(--button-size,16px)}
body.signed-in #app .kupak-bare-icon,body.signed-in #app .kupak-bare-icon:hover,body.signed-in #app .kupak-bare-icon:active{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;min-width:44px;min-height:44px;padding:6px!important;display:inline-flex!important;align-items:center;justify-content:center}
.kupak-bare-icon:focus-visible{outline:2px solid currentColor;outline-offset:2px}
body.signed-in #app header [data-theme-label]{display:none!important}
body.signed-in #app header.kupak-responsive-header{display:flex!important;flex-wrap:wrap!important;gap:6px!important;height:auto!important;overflow:visible!important;align-items:center}
body.signed-in #app header .overview-favorites{width:44px!important;position:relative;margin:0}
body.signed-in #app header .overview-favorites-menu{position:absolute;top:100%;right:0;width:min(280px,85vw);z-index:100;background:#f5efdf;padding:12px;border-radius:14px}
body.signed-in #app .kupak-overview-grid{display:grid!important;grid-template-columns:repeat(var(--overview-columns,2),minmax(0,1fr))!important;gap:16px;align-items:start}
body.signed-in #app .kupak-overview-grid>.panel{min-width:0;margin:0!important}
.kupak-group-collapse>summary{cursor:pointer;display:list-item;list-style-position:inside;padding:8px 0}
.kupak-group-collapse>summary h2{display:inline;font-size:clamp(20px,2.5vw,30px)}
.kupak-group-collapse>summary:focus-visible{outline:2px solid currentColor}
.appearance-colors{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.signed-in #app main .overview-attention{margin-bottom:24px!important}
body.signed-in #app header .header-fruitsys-button{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
body.signed-in #app header .header-profile-button .header-profile-fallback{display:block!important;width:26px;height:26px}
body.signed-in #app header .header-profile-button .repohar-header-avatar{display:none!important}
body.signed-in #app header .header-policy-hidden{display:none!important}
body.signed-in.kupak-glassy #app .overview-attention-row .btn{background:linear-gradient(135deg,color-mix(in srgb,var(--button-color,#cbb79f) 65%,transparent),#ffffff30)!important}
.kupak-menu-drawer{position:fixed;top:0;bottom:0;margin:0;max-height:100dvh;height:100dvh;width:min(320px,86vw);max-width:86vw;box-sizing:border-box;overflow-y:auto;padding:20px;border:1px solid #ffffff60;background:color-mix(in srgb,var(--sidebar-color,#e8e1d2) 85%,transparent);color:#24231f;backdrop-filter:blur(18px)}
.kupak-menu-drawer.left{left:0;right:auto}.kupak-menu-drawer.right{right:0;left:auto}
.kupak-menu-drawer::backdrop{background:#0006}
.kupak-menu-drawer>.btn{display:block;width:100%;margin:10px 0;white-space:normal;text-align:left;background:color-mix(in srgb,var(--button-color,#cbb79f) 60%,transparent);backdrop-filter:blur(12px)}
.appearance-dialog [data-rules] fieldset{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.appearance-dialog [data-rules] label{display:flex;align-items:center;gap:6px}
@media(max-width:760px){body.signed-in #app .overview-attention-row{flex-wrap:wrap;gap:10px}body.signed-in #app .overview-attention-row>span{flex:1 1 180px}}
.appearance-group-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0}.appearance-group-row>span{flex:1 1 150px}.appearance-group-row label{display:flex;align-items:center;font-size:13px}
body.signed-in #app main{min-width:0;max-width:100%;box-sizing:border-box}
body.signed-in #app main :is(img,video,iframe){max-width:100%}
@media(max-width:760px){
 body.signed-in #app header.kupak-responsive-header{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;padding:8px!important;gap:2px!important}
 body.signed-in #app header.kupak-responsive-header>.brand{display:none!important}
 body.signed-in #app header.kupak-responsive-header>:is(button,a,nav){display:inline-flex!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;order:0!important;height:44px!important;justify-content:center;font-size:0}
 body.signed-in #app .kupak-overview-grid{grid-template-columns:repeat(var(--mobile-columns,1),minmax(0,1fr))!important}
 body.signed-in.kupak-glassy #app :is(button,.btn,.card):not(.kupak-bare-icon){font-size:var(--mobile-button-size,15px);max-width:100%;white-space:normal;overflow-wrap:anywhere}
 .appearance-dialog{padding:12px}
}
body.signed-in #app header.kupak-responsive-header>.header-policy-hidden{display:none!important}

/* All overview groups use the same heading and right-hand disclosure marker. */
body.signed-in #app :is(details.overview-category,details.kupak-group-collapse)>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;padding:8px 0;cursor:pointer}
body.signed-in #app :is(details.overview-category,details.kupak-group-collapse)>summary::-webkit-details-marker{display:none}
body.signed-in #app :is(details.overview-category,details.kupak-group-collapse)>summary::marker{content:''}
body.signed-in #app :is(details.overview-category,details.kupak-group-collapse)>summary::after{content:'⌄';font-family:Arial,sans-serif;font-size:24px;color:#88703e;flex:none}
body.signed-in #app :is(details.overview-category,details.kupak-group-collapse)[open]>summary::after{transform:rotate(180deg)}
body.signed-in #app :is(details.overview-category,details.kupak-group-collapse)>summary h2{font-family:inherit!important;font-size:clamp(20px,2.5vw,30px)!important;font-weight:700;line-height:1.3;margin:0!important}
body.signed-in #app .kupak-group-collapse>summary .overview-category-heading{margin:0}

@media(min-width:761px){body.signed-in #app header.kupak-responsive-header>.header-fruitsys-button{margin-left:auto!important}}
body.signed-in #app header.kupak-responsive-header>:is(button,a,nav){order:0!important}

body.signed-in #app header .brand .kupak-wordmark{display:block;width:160px;height:auto;max-height:56px;object-fit:contain;background:transparent;border:0;box-shadow:none}

body.signed-in #app header .brand .kupak-wordmark{filter:brightness(0)}

body.signed-in #app .overview-attention-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin-top:16px}
body.signed-in #app .overview-attention-tiles>.overview-attention-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;width:100%!important;min-width:0;box-sizing:border-box;white-space:normal;text-align:left;padding:18px!important;border-radius:18px}
.overview-attention-tile strong{font-family:inherit;font-size:18px;line-height:1.3}.overview-attention-tile .attention-count{font-size:13px;opacity:.8}.overview-attention-tile ul{padding-left:18px;margin:0;font-size:14px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}

/* Form controls share the page palette; semantic toggles and color swatches retain their meaning. */
@media screen {
 body.signed-in.kupak-glassy {--form-ink:#28251f;--form-tint:#ffffff;--form-placeholder:#514b43}
 :root[data-kupak-theme=dark] body.signed-in.kupak-glassy {--form-ink:#f5f3ed;--form-tint:#101510;--form-placeholder:#d1cfc9;color-scheme:dark}
 body.signed-in.kupak-glassy #app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select) {
  background:linear-gradient(135deg,color-mix(in srgb,var(--page-color,#cbb79f) 45%,var(--form-tint)),color-mix(in srgb,var(--page-color2,#cbb79f) 45%,var(--form-tint)))!important;
  color:var(--form-ink)!important;border-color:color-mix(in srgb,var(--page-color,#cbb79f) 70%,var(--form-ink))!important;
  box-shadow:inset 0 1px 0 #ffffff55,0 3px 10px #0001!important;backdrop-filter:blur(var(--glass-blur,16px));
 }
 body.signed-in.kupak-glassy #app :is(input,textarea)::placeholder {color:var(--form-placeholder)!important;opacity:1}
 body.signed-in.kupak-glassy #app select option {background:color-mix(in srgb,var(--page-color,#cbb79f) 45%,var(--form-tint));color:var(--form-ink)}
 body.signed-in.kupak-glassy #app input[type=file]::file-selector-button {
  background:color-mix(in srgb,var(--button-color,#cbb79f) 60%,var(--form-tint));color:var(--form-ink);border:0;border-radius:8px;padding:8px 12px;margin-right:12px;cursor:pointer;
 }
 body.signed-in.kupak-glassy #app :is(input,textarea,select):focus-visible {outline:2px solid var(--form-ink);outline-offset:2px}
 body.signed-in.kupak-glassy #app :is(input,textarea,select):disabled {opacity:.65;cursor:not-allowed}
}

/* Editor chrome stays reachable even when the selected application element is hidden. */
@media screen and (max-width:760px){
 body main .pagehead,body main .toolbar,body main .settlement-row{flex-wrap:wrap!important;min-width:0!important;max-width:100%!important}
 body main .pagehead>*,body main .toolbar>*,body main .settlement-row>*{min-width:0!important;max-width:100%!important;box-sizing:border-box}
 body main .tablewrap,body main .attendance-scroll{min-width:0!important;width:100%!important;max-width:100%!important;overflow:visible!important;box-sizing:border-box}
 body .kupak-mobile-table,body .kupak-mobile-table tbody,body .kupak-mobile-table tfoot{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
 body .kupak-mobile-table thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)}
 body .kupak-mobile-table tr{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;margin:12px 0;padding:12px;box-sizing:border-box;border:1px solid currentColor;border-radius:14px}
 body .kupak-mobile-table :is(td,tbody th,tfoot th){display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;box-sizing:border-box;white-space:normal!important;overflow-wrap:anywhere;text-align:left!important;padding:8px 0!important;border:0!important}
 body .kupak-mobile-table [data-mobile-label]:not([data-mobile-label=""])::before{content:attr(data-mobile-label);display:block;font-weight:700;font-size:.85em;margin-bottom:6px;opacity:.8}
 body .kupak-mobile-table :is(button,a,input,select,label,div){min-width:0!important;max-width:100%!important;box-sizing:border-box;white-space:normal!important;overflow-wrap:anywhere}
 body .kupak-mobile-table :is(button,.btn){margin:4px;}
 body main .employee-probation-check{display:flex;flex-wrap:wrap;margin-left:0;white-space:normal}
 body main :is(img,video,canvas,iframe){max-width:100%}
}
body #profile-reminders.profile-reminder-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;min-width:48px;height:48px;padding:10px;border:0!important;box-shadow:none!important;background:transparent!important}
body #profile-reminders[hidden]{display:none}
@media(max-width:760px){
 main,main .panel,main section,main form,main .field,main .formgrid,main .toolbar,main .profile-photo-row,main .profile-photo-row>div{min-width:0;max-width:100%;box-sizing:border-box}
 main .toolbar,main .profile-install-buttons,main .profile-photo-row{flex-wrap:wrap!important}
 main .toolbar>*{min-width:0;max-width:100%;box-sizing:border-box}
 main .btn{white-space:normal;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box}
 main input,main select,main textarea{min-width:0;max-width:100%;box-sizing:border-box}
 main .formgrid{grid-template-columns:minmax(0,1fr)!important}
 main .formgrid .wide{grid-column:1/-1}
 main h1,main h2,main h3,main p,main label{overflow-wrap:anywhere}
 .modal-shade>.panel,dialog{box-sizing:border-box;max-width:calc(100vw - 24px);min-width:0}
 .modal-shade .toolbar{flex-wrap:wrap}
}
#kupak-visual-editor {position:fixed;inset:12px 12px auto auto;width:min(350px,calc(100vw - 24px));max-height:85dvh;overflow:auto;box-sizing:border-box;padding:16px;border:1px solid #91866b;border-radius:16px;background:#f7f4ec;color:#222;box-shadow:0 12px 50px #0006;font:14px Arial;z-index:2147483647}
#kupak-visual-editor h2{font:bold 20px Arial;margin:0 0 10px}#kupak-visual-editor p{font:13px/1.4 Arial;color:#333}
#kupak-visual-editor label{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 0;font:14px Arial;color:#222}
#kupak-visual-editor input,#kupak-visual-editor select{max-width:100%;width:100%;box-sizing:border-box;background:#fff!important;color:#222!important;padding:6px;border:1px solid #888!important;font:14px Arial}
#kupak-visual-editor input[type=color]{height:32px}#kupak-visual-editor button{font:14px Arial;background:#e2e9df;color:#222;padding:8px;border:1px solid #777;border-radius:7px;cursor:pointer}
#kupak-visual-editor .kv-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}#kupak-visual-editor small{display:block;overflow-wrap:anywhere;margin:10px 0}
body [data-kv-selected]{outline:3px dashed #e14bb7!important;outline-offset:3px}
@media print{#kupak-visual-editor{display:none!important}}
#kupak-visual-editor.kv-picking > :not(h2):not(.kv-actions){display:none!important}
#kupak-visual-editor.kv-picking .kv-actions:last-child{display:none!important}
@media(max-width:760px){#kupak-visual-editor{max-height:60dvh;inset:auto 12px 12px auto}}
#kupak-visual-editor [data-control-sample]{display:flex;flex-direction:column;gap:8px;margin:8px 0;max-width:100%}
#kupak-visual-editor [data-control-sample] :is(input,select,label){max-width:100%;min-width:0}
#kupak-visual-editor [data-status]{height:48px;overflow:auto;margin:8px 0}
#kupak-visual-editor>.kv-actions:last-child{position:sticky;bottom:-16px;background:#f7f4ec;padding:10px 0;margin-bottom:0}

/* 2026-10-28: transparent header, uniform icons, outline favourites. */
:root body.signed-in #app#app header.kupak-responsive-header{
 background:transparent!important;background-image:none!important;border:0!important;
 border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;outline:0;
}
:root body.signed-in #app header.kupak-responsive-header :is(button,a):not(.overview-favorite-pill){
 box-sizing:border-box;min-height:44px!important;height:44px!important;
 font-size:26px!important;line-height:1!important;
}
:root body.signed-in #app header.kupak-responsive-header :is(button,a):not(.overview-favorite-pill) :is(svg,img){
 width:26px!important;height:26px!important;min-width:26px!important;
 max-width:26px!important;max-height:26px!important;object-fit:contain;flex-shrink:0;
}
:root body.signed-in #app header.kupak-responsive-header .overview-favorites-toggle{
 color:#000!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
:root body.signed-in #app header.kupak-responsive-header .overview-favorites-toggle :is(svg,path){
 fill:none!important;stroke:#000!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* Admin-selected header icon colour, including monochrome image logos. */
:root body.signed-in #app#app header.kupak-responsive-header :is(button,a):not(.overview-favorite-pill){color:var(--header-icon-color,#000)!important}
:root body.signed-in #app#app header.kupak-responsive-header :is(button,a):not(.overview-favorite-pill) :is(svg,img){filter:url(#kupak-header-tint)!important}
:root body.signed-in #app#app header.kupak-responsive-header .overview-favorites-toggle :is(svg,path){stroke:var(--header-icon-color,#000)!important;fill:none!important}