﻿/* Shared shell. Loaded last to keep header, sidebar and content in one layout. */
:root{--account-height:65px;--app-height:76px;--shell-height:calc(var(--account-height) + var(--app-height));--sidebar-width:244px;--shell-border:#e3e8f0;--shell-ink:#29364c}
html{scroll-padding-top:calc(var(--shell-height) + 20px)}
body:is(.authenticated,.panel-ready){background:#f4f6fa;color:var(--shell-ink)}
#accountMenu{position:sticky;top:0;z-index:40;min-height:52px;padding:8px 28px;gap:10px;background:#fff;border-bottom:1px solid var(--shell-border);font-size:12px;flex-wrap:wrap}
#accountMenu button{min-height:36px;padding:8px 12px;font-size:12px;border-radius:9px}
#accountName{min-width:0;overflow-wrap:anywhere;margin-right:auto;font-weight:600;color:#58657b}
body:is(.authenticated,.panel-ready) > header.app-header{position:sticky;top:var(--account-height);z-index:39;height:76px;padding:0 28px;gap:18px;background:#fff;border-bottom:1px solid var(--shell-border);box-shadow:0 4px 16px #24344f04}
:is(.authenticated,.panel-ready) .header-product{color:#35415a;font-weight:600;letter-spacing:0}
:is(.authenticated,.panel-ready) .header-session{max-width:35%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#69758a}
:is(.authenticated,.panel-ready) .brand-home{width:74px;flex-shrink:0}
:is(.authenticated,.panel-ready) #sidebar{position:fixed;top:var(--shell-height);bottom:0;left:0;width:var(--sidebar-width);padding:26px 16px 16px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:4px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d5dbe5 transparent;border-right:1px solid var(--shell-border);z-index:30;background:#fff}
#sidebar .sidebar-label{display:block;margin:0 12px 14px;color:#8893a6;font-size:10px;letter-spacing:1.4px}
:is(.authenticated,.panel-ready) #sidebar > button{width:100%;min-height:46px;flex-shrink:0;margin:0;padding:12px;border-radius:10px;font-size:12px;color:#66738a;transition:background .16s,color .16s}
:is(.authenticated,.panel-ready) #sidebar > button.sidebar-active{background:#fcecef;color:#bc293b;font-weight:650;box-shadow:inset 3px 0 #cf3042}
#sidebar .sidebar-bottom{display:block;margin-top:auto;padding:18px 12px 4px;color:#47725e;font-size:11px;flex-shrink:0}
#sidebar .photo-filter{display:flex;flex-direction:column;flex-basis:auto;align-items:stretch;margin:18px 0;padding:20px 8px 14px;gap:12px;border-top:1px solid var(--shell-border)}
#sidebar .photo-filter label{font-size:12px;font-weight:600;color:#49566d}
#sidebar .photo-filter select{min-height:44px;padding:10px;font-size:12px;border-radius:10px;background:#f7f9fc}
#sidebar .photo-filter p{font-size:12px;color:#6c7890;line-height:1.65}
:is(.authenticated,.panel-ready) main{width:auto;min-width:0;max-width:none;margin:0 0 0 var(--sidebar-width);padding:26px clamp(18px,2.5vw,44px) 24px}
:is(.authenticated,.panel-ready) #dashboardHeading{margin-top:8px;gap:16px}
:is(.authenticated,.panel-ready) h1{font-size:clamp(25px,2.4vw,34px);line-height:1.2}
:is(.authenticated,.panel-ready) #status{font-size:12px;background:#eaf0f7;color:#55657d;border:1px solid #e1e8f1;padding:12px 16px}
#dashboardSummary{gap:16px}
#dashboardSummary article{border-radius:14px;padding:20px;box-shadow:0 3px 10px #23395503}
#dashboardSummary article>span{color:#66738a;font-size:12px}
#dashboardSummary small{color:#7d899e;font-size:11px}
#catalog .product-info>b{font-size:13px;color:#2b3950}
#catalog .product-state .item-status{color:#748098;font-size:11px;overflow-wrap:anywhere}
#catalog .product-actions button{min-height:38px;font-size:11px}
.product-meta{color:#647188;font-size:11px}
#tenant,#status,#previewDetails,#pageInfo,#progress{overflow-wrap:anywhere}
#catalog .segment-control label{color:#58657b;font-size:12px}
#catalog .segment-control p,.results-heading p{color:#768298;font-size:12px}
#catalog .batch-toolbar button{height:auto;min-height:40px;white-space:normal}
#catalog .pagination-toolbar{row-gap:12px}
#sidebarToggle{display:none}
#sidebarBackdrop{position:fixed;inset:var(--shell-height) 0 0;z-index:31;background:#1b294366;border:0;border-radius:0;cursor:pointer}
body.busy #sidebarToggle,body.busy #sidebarBackdrop{pointer-events:auto;opacity:1}
body.sidebar-open{overflow:hidden}
#usersDialog,#previewDialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overscroll-behavior:contain;scrollbar-width:thin}
#previewDialog .inline input,.admin-search input,.admin-search select{min-width:0}
@media(min-width:1600px){:is(.authenticated,.panel-ready) main{padding-left:40px;padding-right:40px}}
@media(min-width:901px) and (max-width:1200px){:root{--sidebar-width:218px}#catalog .product{grid-template-columns:minmax(0,1fr) 186px;gap:12px}:is(.authenticated,.panel-ready) main{padding:22px}#catalog .product-actions button{font-size:10px}}
@media(max-width:900px){
 :root{--app-height:70px;--sidebar-width:272px}
 #accountMenu{padding:8px 16px;gap:8px}
 body:is(.authenticated,.panel-ready) > header.app-header{height:70px;padding:0 16px;gap:12px}
 :is(.authenticated,.panel-ready) .brand-home{width:66px}
 :is(.authenticated,.panel-ready) .header-product{display:none}
 :is(.authenticated,.panel-ready) .header-divider{display:none}
 :is(.authenticated,.panel-ready) .header-session{display:block;margin-left:auto;max-width:32%;font-size:11px}
 :is(.authenticated,.panel-ready) .app-header #logout{margin-left:0;padding:9px 11px;min-height:38px;white-space:nowrap}
 #sidebarToggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 12px;margin:0;font-size:12px;background:#f7f8fc;color:#41516b;border-color:#dfe5ef;border-radius:9px}
 :is(.authenticated,.panel-ready) #sidebar{width:min(var(--sidebar-width),calc(100vw - 40px));top:var(--shell-height);z-index:32;transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s;box-shadow:12px 0 35px #1d2e4214;overflow-y:auto}
 :is(.authenticated,.panel-ready).sidebar-open #sidebar{transform:translateX(0);visibility:visible}
 :is(.authenticated,.panel-ready) main{margin:0;padding:22px 18px;width:100%}
 .dashboard-badge{display:none}
 #catalog .product{grid-template-columns:minmax(0,1fr) 205px}
 #catalog .product-actions{grid-column:2;grid-row:1/span 2;grid-template-columns:1fr 1fr}
 .product-state{grid-column:1;grid-row:auto}
 #catalog .results-columns{display:none}
 #dashboardSummary{gap:12px}
}
@media(max-width:600px){
 #accountMenu{padding:8px 12px;gap:6px}
 #accountMenu button{font-size:11px;padding:8px;min-height:36px}
 #accountName{font-size:11px}
 body:is(.authenticated,.panel-ready) > header.app-header{padding:0 12px;gap:10px}
 :is(.authenticated,.panel-ready) .header-session{display:none}
 :is(.authenticated,.panel-ready) .app-header #logout{margin-left:auto;font-size:11px}
 #sidebarToggle{padding:9px 10px;font-size:11px}
 :is(.authenticated,.panel-ready) main{padding:18px 12px}
 :is(.authenticated,.panel-ready) #dashboardHeading{margin-bottom:18px}
 #dashboardSummary{gap:8px;margin-bottom:20px}
 #dashboardSummary article{padding:13px 10px;gap:8px;min-width:0}
 #dashboardSummary article>span{font-size:11px;min-height:30px;line-height:1.4}
 #dashboardSummary strong{font-size:26px}
 #dashboardSummary small{font-size:10px;line-height:1.5;overflow-wrap:anywhere}
 #catalog .product{grid-template-columns:minmax(0,1fr);padding:18px 16px}
 #catalog .product-actions{grid-column:1;grid-row:auto;grid-template-columns:1fr 1fr;margin-top:6px}
 #catalog .product-actions button{min-height:42px;font-size:12px}
 #catalog .product-state{margin-left:76px;flex-wrap:wrap}
 #catalog .product-state .item-status{display:block}
 #catalog #search{display:grid;grid-template-columns:1fr 1fr;margin-left:16px;margin-right:16px}
 #catalog #search input{grid-column:1/-1}
 #catalog #search button{padding:11px 8px}
 #catalog .segment-control{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-left:16px;margin-right:16px}
 #catalog .segment-control label,#catalog .segment-control select{min-width:0}
 #catalog .segment-control p{margin:0}
 #catalog .batch-toolbar{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 #catalog .batch-toolbar #sendAll{margin-left:0}
 #catalog .batch-toolbar #stop{grid-column:1/-1}
 #catalog .pagination-toolbar{padding:14px 12px;gap:8px;justify-content:center}
 #catalog .pagination-toolbar .jump{margin-left:0}
 #pageInfo{max-width:100%;text-align:center}
 #usersDialog,#previewDialog{padding:16px;border-radius:16px}
 .admin-metrics strong{font-size:24px}
 .admin-tabs{flex-wrap:wrap}
 #previewTitle{font-size:20px;padding-right:80px}
 #closePreview,#closeUsers{padding:9px 11px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){:is(.authenticated,.panel-ready) #sidebar,:is(.authenticated,.panel-ready) #sidebar > button{transition:none}}

/* Keep navigation readable while work controls stay disabled. */
body.busy #sidebar > button,body.busy #accountMenu button,body.busy .app-header button{opacity:.75}
body.busy #sidebarToggle{opacity:1}

@media(min-width:901px) and (max-width:1200px){
 #catalog .product-state{grid-column:1;flex-direction:row;flex-wrap:wrap;align-items:center;margin-left:76px}
 #catalog .product-actions{grid-column:2;grid-row:1/span 2}
 #catalog .results-columns{grid-template-columns:minmax(0,1fr) 186px}
 #catalog .results-columns>span:nth-child(2){display:none}
}

body.panel-ready > header.app-header{display:flex}#sidebar #accountMenu{position:static;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:18px 0 10px;margin-top:12px;border:0;border-top:1px solid var(--shell-border);background:transparent;min-height:0;flex-shrink:0}#sidebar #accountMenu[hidden]{display:none!important}#sidebar #accountName{padding:6px 12px;margin:0;font-size:12px}#sidebar #accountMenu button{text-align:left;width:100%;margin:0;padding:11px 12px;border-radius:9px;font-size:12px;min-height:42px}#sidebar #accountLogout{color:#b42b3c}body.panel-ready:not(.authenticated) #navCatalog,body.panel-ready:not(.authenticated) #navSelected,body.panel-ready:not(.authenticated) #sidebar>.sidebar-label,body.panel-ready:not(.authenticated) #sidebar>.photo-filter,body.panel-ready:not(.authenticated) #sidebar>.sidebar-bottom{display:none}body.panel-ready:not(.authenticated) .login-layout{margin:20px auto}body.panel-ready:not(.authenticated) main{min-width:0}@media(max-width:900px){body.panel-ready:not(.authenticated) .login-layout{grid-template-columns:1fr}body.panel-ready:not(.authenticated) .login-brand-panel{display:none}}

.image-search-mode{display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:8px 18px;margin:16px 0;font-size:12px}.image-search-mode select{grid-column:1;min-width:0}.image-search-mode small{grid-column:2;grid-row:2;align-self:center;color:#79869b;font-weight:400}@media(max-width:600px){.image-search-mode{grid-template-columns:1fr}.image-search-mode small{grid-column:1;grid-row:auto}}

/* Sidebar: navigation, filters and account form clear groups. */
#sidebar .sidebar-intro{padding:0 12px 22px;display:grid;gap:7px;flex-shrink:0}#sidebar .sidebar-intro>span{font-size:9px;letter-spacing:2.5px;color:#c13c50;font-weight:700}#sidebar .sidebar-intro strong{font-size:13px;color:#35435b;font-weight:600}#sidebar .sidebar-label{font-size:9px;letter-spacing:1.8px;margin-bottom:8px}#sidebar button .side-icon{width:18px;height:18px;flex:0 0 18px}#sidebar button .side-label{font:inherit;margin:0;line-height:1.45;flex:1}#sidebar>button,#sidebar #accountMenu>button{display:flex;align-items:center;gap:11px;text-align:left;transition:background .16s,color .16s,box-shadow .16s}#sidebar>button:hover,#sidebar #accountMenu>button:hover{background:#f0f3f8;color:#354764;box-shadow:inset 3px 0 #c4cedd}#sidebar>button.sidebar-active,#sidebar #accountMenu>button.sidebar-active{color:#b3253d;background:#fcebef;box-shadow:inset 3px 0 #d1354d}#sidebar .side-count{margin:0;border-radius:7px;font-size:10px;min-width:23px;padding:3px 6px;text-align:center;background:#e9d9de;color:#a02f43;font-variant-numeric:tabular-nums}.sidebar-filter-group{margin:20px 0 4px;border:1px solid #e6eaf1;border-radius:12px;flex-shrink:0;background:#f8fafc}.sidebar-filter-group summary{padding:13px 12px;display:flex;justify-content:space-between;align-items:center;color:#53627b;font-size:12px;font-weight:600;list-style:none;cursor:pointer}.sidebar-filter-group summary::-webkit-details-marker{display:none}.filter-chevron{transition:transform .18s}.sidebar-filter-group[open] .filter-chevron{transform:rotate(180deg)}#sidebar .sidebar-filter-group .photo-filter{margin:0;padding:4px 12px 14px;border:0;gap:10px}#sidebar .sidebar-filter-group .photo-filter label{font-size:11px}#sidebar .sidebar-filter-group .photo-filter select{background:white}#sidebar .sidebar-filter-group .photo-filter p{font-size:11px}#sidebar #accountMenu{margin-top:22px;padding-top:16px}.side-account{display:flex;align-items:center;gap:10px;margin:0 8px 18px;min-width:0}.side-account>div{display:grid;gap:4px;min-width:0}#sidebar #accountAvatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:12px;background:linear-gradient(135deg,#fbe7ed,#f1ebf9);color:#b5334b;font-size:12px;font-weight:700}#sidebar #accountName{padding:0;font-size:13px;overflow-wrap:anywhere}#accountRole{font-size:10px;color:#8b97a9}.side-section-label{font-size:9px;color:#98a2b2;letter-spacing:1.6px;margin:0 12px 8px}#sidebar #accountMenu #accountLogout{order:5;margin-top:5px;color:#b03a4c}#sidebar #accountMenu #accountLogout:hover{background:#fff0f2;box-shadow:inset 3px 0 #d1354d}#sidebar .sidebar-bottom{border-top:1px solid #eef0f5;padding-top:16px;margin-top:20px}#sidebar .sidebar-bottom p{overflow-wrap:anywhere;margin:8px 0 0;line-height:1.5}body.panel-ready:not(.authenticated) #sidebar>.sidebar-filter-group{display:none}#sidebar summary:focus-visible{outline:2px solid #d1354d;outline-offset:2px;border-radius:10px}@media(prefers-reduced-motion:reduce){#sidebar button,.filter-chevron{transition:none}}

.header-account{display:flex;align-items:center;gap:10px;margin:0;padding-left:18px;border-left:1px solid #e6eaf1;flex-shrink:0;max-width:220px}.header-account>div{display:grid;gap:3px;min-width:0}.header-account #accountAvatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:12px;background:linear-gradient(135deg,#fbe7ed,#f1ebf9);color:#b5334b;font-size:12px;font-weight:700}.header-account #accountName{font-size:12px;color:#53627b;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-account #accountRole{font-size:10px;color:#8b97a9}body:is(.authenticated,.panel-ready) .header-session{margin-left:auto}@media(max-width:600px){.header-account{gap:6px;padding-left:8px;max-width:120px}.header-account #accountAvatar{width:30px;height:30px;flex-basis:30px;font-size:10px}.header-account #accountName{font-size:11px}.header-account #accountRole{font-size:8px}body:is(.authenticated,.panel-ready) .header-session{max-width:22%;font-size:10px}body:is(.authenticated,.panel-ready)>header.app-header{gap:8px;padding-left:10px;padding-right:10px}}
