/* One palette for selectors and the existing inverted navigation finish. */
:root{--picker-bg:#050505;--picker-ink:#edf1f5;--picker-muted:#b8bec7;--picker-line:#ffffff24;--picker-shine:linear-gradient(115deg,#050505,#35414c,#10171e,#050505)}
:root[data-theme="dark"]{--picker-bg:#e9fbff;--picker-ink:#17191b;--picker-muted:#596168;--picker-line:#00000020;--picker-shine:linear-gradient(115deg,#e9fbff,#fff,#cddfe5,#e9fbff)}
.floating-navigation.app-body :is(select,.period-trigger,.seller-filter-trigger,input[type="date"],input[type="month"]){background:var(--picker-bg);color:var(--picker-ink);border-color:var(--picker-line);border-radius:12px;box-shadow:inset 2px 2px 5px #0003,inset -1px -1px 3px #ffffff16}
.floating-navigation.app-body :is(select,.period-trigger,.seller-filter-trigger,input[type="date"],input[type="month"]):is(:hover,:focus-visible){background:transparent;animation:none;outline-color:var(--yellow)}
.floating-navigation.app-body :is(.period-trigger,.seller-filter-trigger) svg{color:inherit}
/* Native select semantics, dynamic options, form validation and keyboard search remain intact. */
@supports (appearance:base-select){
 .floating-navigation.app-body select:not([multiple]):not([size]),.floating-navigation.app-body select:not([multiple]):not([size])::picker(select){appearance:base-select}
 .floating-navigation.app-body select::picker(select){background:var(--picker-bg);color:var(--picker-ink);border:1px solid var(--picker-line);border-radius:16px;padding:6px;box-shadow:inset 3px 3px 7px #0002,0 12px 28px #0003;max-height:min(420px,60dvh);overflow:auto}
 .floating-navigation.app-body select::picker-icon{color:var(--picker-muted);margin-left:auto}
 .floating-navigation.app-body option{border-radius:10px;padding:9px 12px;min-height:34px;white-space:normal;overflow-wrap:anywhere;color:var(--picker-ink);background:transparent}
 .floating-navigation.app-body option:is(:hover,:focus-visible){background:transparent;animation:none;outline:1px solid var(--picker-line)}
 .floating-navigation.app-body option:checked{background:#f5c400;color:#17191b}
 .floating-navigation.app-body option:disabled{opacity:.45}
}
.floating-navigation.app-body :is(.seller-picker,.period-picker,.user-popover,.panel-date-picker){background:var(--picker-bg);color:var(--picker-ink);border:1px solid var(--picker-line);border-radius:18px;box-shadow:inset 4px 4px 8px #0002,0 12px 28px #0003}
.floating-navigation.app-body :is(.seller-picker,.period-picker,.user-popover,.panel-date-picker) :is(button,label,a):not(.button-primary){color:var(--picker-ink);border-color:var(--picker-line)}
.floating-navigation.app-body :is(.seller-option,.calendar-day,.period-presets button,.user-popover a,.user-popover button,.panel-date-picker button):not(:disabled):is(:hover,:focus-visible){background:transparent;animation:none;color:var(--picker-ink)}
.floating-navigation.app-body :is(.calendar-panel,.calendar-grid,.calendar-heading){background:transparent;color:var(--picker-ink)}
.floating-navigation.app-body :is(.calendar-weekday,.calendar-day.is-outside){color:var(--picker-muted)}
.floating-navigation.app-body :is(.calendar-day.is-selected,.panel-date-picker [aria-selected="true"]){background:#f5c400;color:#17191b}
.floating-navigation.app-body input:is([type="date"],[type="month"])::-webkit-calendar-picker-indicator{opacity:.7;filter:invert(1)}
:root[data-theme="dark"] .floating-navigation.app-body input:is([type="date"],[type="month"])::-webkit-calendar-picker-indicator{filter:none}
.panel-date-picker{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:min(320px,calc(100vw - 24px));padding:12px;z-index:80}
.panel-date-picker header{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.panel-date-picker header select{min-width:0;flex:1;padding:6px;font-size:12px}
.floating-navigation.app-body .panel-date-picker button{border:0;border-radius:8px;background:transparent;min-width:32px;min-height:32px;box-shadow:none;font:inherit;cursor:pointer}
.panel-date-picker .date-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.panel-date-picker .date-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.panel-date-picker .date-weekday{text-align:center;font-size:11px;color:var(--picker-muted);padding:6px 0}
.panel-date-picker footer{display:flex;justify-content:space-between;border-top:1px solid var(--picker-line);margin-top:10px;padding-top:8px}
.panel-date-picker button:focus-visible{outline:2px solid #f5c400;outline-offset:1px}
.panel-date-picker button:disabled{opacity:.3;cursor:default}

/* Extend the approved recessed surfaces to the remaining modules; status colors stay semantic. */
.floating-navigation.app-body :is([data-view-panel="sales"],[data-view-panel="crm"],[data-view-panel="goals"],[data-view-panel="quality"],[data-view-panel="collection"],[data-view-panel="after_sales"],[data-view-panel="operational_loss"],[data-view-panel="rescue"],[data-view-panel="order_authorization"],[data-view-panel="marketing"],.admin-content,.admin-section,.admin-settings-grid) :is(.kpi,.chart-card,.table-section,.freshness-panel,.definition-panel,.settings-panel,.settings-form,.seller-goal-form,.rescue-seller-card,.rescue-row,.assistance-card,.collection-order-picker,.production-list-summary,.table-scroll,.table-wrap,.chart-frame){--well-level:1;--well-offset:calc(5px + var(--well-level)*1px);--well-blur:calc(11px + var(--well-level)*1px);background:color-mix(in srgb,var(--canvas),#9eacb8 calc(var(--well-level)*3%));box-shadow:inset var(--well-offset) var(--well-offset) var(--well-blur) #9ca9b745,inset calc(-1*var(--well-offset)) calc(-1*var(--well-offset)) var(--well-blur) #ffffffdc;border-color:transparent;border-radius:calc(24px - var(--well-level)*2px)}
.floating-navigation.app-body :is(.chart-card,.settings-panel,.settings-form,.table-section,.assistance-card,.rescue-seller-card) :is(.table-scroll,.table-wrap,.chart-frame,.collection-order-picker){--well-level:2}
.floating-navigation.app-body :is(.table-scroll,.table-wrap) :is(.chart-frame,.table-scroll,.table-wrap){--well-level:3}
:root[data-theme="dark"] .floating-navigation.app-body :is([data-view-panel="sales"],[data-view-panel="crm"],[data-view-panel="goals"],[data-view-panel="quality"],[data-view-panel="collection"],[data-view-panel="after_sales"],[data-view-panel="operational_loss"],[data-view-panel="rescue"],[data-view-panel="order_authorization"],[data-view-panel="marketing"],.admin-content,.admin-section,.admin-settings-grid) :is(.kpi,.chart-card,.table-section,.freshness-panel,.definition-panel,.settings-panel,.settings-form,.seller-goal-form,.rescue-seller-card,.rescue-row,.assistance-card,.collection-order-picker,.production-list-summary,.table-scroll,.table-wrap,.chart-frame){background:color-mix(in srgb,var(--canvas),#000 calc(var(--well-level)*8%));box-shadow:inset var(--well-offset) var(--well-offset) var(--well-blur) #0009,inset calc(-1*var(--well-offset)) calc(-1*var(--well-offset)) var(--well-blur) #ffffff0b}
.floating-navigation.app-body .topbar{position:relative;top:auto}
.floating-navigation.app-body :is(.kpi,.assistance-card,.settings-panel,.rescue-seller-card){min-width:0}
.floating-navigation.app-body :is([data-view-panel="sales"],[data-view-panel="crm"],[data-view-panel="goals"],[data-view-panel="quality"]) .kpi::before{inset:0;width:auto;background:none;border-left:3px solid var(--line-strong);border-radius:inherit;pointer-events:none}
@media(prefers-reduced-motion:reduce){.floating-navigation.app-body :is(select,option,input[type="date"],input[type="month"],.period-trigger,.seller-filter-trigger,.seller-option,.calendar-day,.period-presets button,.user-popover a,.user-popover button,.panel-date-picker button){animation:none!important}}
@media print{.panel-date-picker{display:none!important}}

.panel-date-picker header input[type="number"]{width:68px;min-width:0;padding:6px;background:transparent;color:var(--picker-ink);border:1px solid var(--picker-line);border-radius:8px}

.standalone-panel:not(.certificate-page) .dashboard-main>.admin-section{background:var(--canvas);border-radius:24px;border-color:transparent;box-shadow:inset 6px 6px 12px #9ca9b745,inset -6px -6px 12px #ffffffdc}
:root[data-theme="dark"] .standalone-panel:not(.certificate-page) .dashboard-main>.admin-section{box-shadow:inset 6px 6px 12px #0009,inset -6px -6px 12px #ffffff0b}
.floating-navigation.app-body .rescue-row.rescue-overdue{border-left-color:var(--red,#ff3333)}
.floating-navigation.app-body :is([data-view-panel="sales"],[data-view-panel="crm"],[data-view-panel="goals"],[data-view-panel="quality"]) .kpi-featured::before{border-left-color:var(--yellow)}
.floating-navigation.app-body :is([data-view-panel="sales"],[data-view-panel="crm"],[data-view-panel="goals"],[data-view-panel="quality"]) .kpi-danger::before{border-left-color:var(--red)}
.floating-navigation.app-body :is(.chart-card,.settings-panel,.table-section) :is(.table-scroll,.table-wrap,.chart-frame,.collection-order-picker) :is(.table-scroll,.table-wrap,.chart-frame){--well-level:3}
.floating-navigation.app-body :is(.chart-card,.settings-panel,.table-section) :is(.table-scroll,.table-wrap,.chart-frame,.collection-order-picker) :is(.table-scroll,.table-wrap,.chart-frame) :is(.table-scroll,.table-wrap,.chart-frame){--well-level:4}

.floating-navigation.app-body :is(.seller-picker,.period-picker,.user-popover,.panel-date-picker) :is(button,a):not(.button-primary){background:transparent;box-shadow:none;color:var(--picker-ink);border-color:var(--picker-line);border-radius:8px}
.floating-navigation.app-body .period-picker :is(.calendar-day.is-start,.calendar-day.is-end){background:#f5c400;color:#17191b}
.floating-navigation.app-body .period-picker .calendar-day.is-range:not(.is-start):not(.is-end){background:color-mix(in srgb,#f5c400 20%,var(--picker-bg));color:var(--picker-ink)}
.floating-navigation.app-body :is(.seller-picker,.period-picker,.user-popover) :is(button,a):not(.button-primary):is(:hover,:focus-visible){background:transparent;animation:none}
.floating-navigation.app-body :is(.seller-picker,.period-picker,.user-popover) :is(header,footer,.period-presets,.period-picker-header,.period-picker-actions,.calendar-panel){border-color:var(--picker-line)}
.floating-navigation.app-body :is(.seller-picker,.period-picker) .button-primary{background:#f5c400;color:#17191b}
@media(prefers-reduced-motion:reduce){.floating-navigation.app-body :is(.seller-picker,.period-picker,.user-popover) :is(button,a){animation:none!important}}

@media(max-width:820px){.floating-navigation.app-body .period-picker{max-height:calc(100dvh - 210px);overflow:auto}.floating-navigation.app-body .period-picker-actions{position:sticky;bottom:0;z-index:3;background:var(--picker-bg)}}
@media(max-width:560px){.floating-navigation.app-body .period-calendars{grid-template-columns:1fr}}

.floating-navigation.app-body .seller-picker .seller-option span{color:var(--picker-ink)}

/* Same sidebar brush, restricted to icon strokes and text; only the hovered item animates. */
.floating-navigation.app-body{--control-sheen:linear-gradient(115deg,transparent 0%,#18232c 20%,#5e6c78 34%,#fff 43%,#fff 53%,#dbe5ed 62%,#17222b 78%,transparent 100%)}
:root[data-theme="dark"] .floating-navigation.app-body{--control-sheen:linear-gradient(115deg,transparent,#111b24,#ffffff,transparent)}
.floating-navigation.app-body .sidebar :is(.nav-item,.theme-switch)::after{display:none!important;animation:none!important}
.floating-navigation.app-body .sidebar :is(.nav-item,.theme-switch):is(:hover,:focus-visible){box-shadow:none;transform:none;background:transparent}
.floating-navigation.app-body .sidebar .nav-item.is-active:is(:hover,:focus-visible){background:var(--yellow)}
.control-icon-shine{position:relative;display:inline-grid;place-items:center;flex:none;line-height:0;font-style:normal}
.control-icon-shine>svg{display:block!important;width:100%!important;height:100%!important;filter:none;overflow:hidden}
.control-icon-reflection{position:absolute;inset:0;pointer-events:none;opacity:0;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;background:var(--control-sheen) 0 0/300% 100%}
.control-text-shine{position:relative;display:inline-block;max-width:100%;font-style:normal;vertical-align:baseline;white-space:inherit}
.control-text-shine::after{content:attr(data-reflection) / "";position:absolute;inset:0;pointer-events:none;opacity:0;font:inherit;line-height:inherit;white-space:inherit;color:transparent;-webkit-text-fill-color:transparent;background:var(--control-sheen) 0 0/300% 100%;background-clip:text;-webkit-background-clip:text}
.floating-navigation.app-body :is(.nav-item,.theme-switch,.period-trigger,.seller-filter-trigger,.period-picker button,.panel-date-picker button,.seller-option,.user-popover a,.user-popover button):not(:disabled):hover .control-icon-reflection,.floating-navigation.app-body :is(.nav-item,.theme-switch,.period-trigger,.seller-filter-trigger,.period-picker button,.panel-date-picker button,.seller-option,.user-popover a,.user-popover button):not(:disabled):hover .control-text-shine::after,.floating-navigation.app-body select:not(:disabled):hover selectedcontent .control-text-shine::after,.floating-navigation.app-body option:not(:disabled):hover .control-text-shine::after{opacity:1;animation:penna-nav-emboss-shimmer 2.5s ease-in-out infinite alternate}
.floating-navigation.app-body :is(select,input[type="date"],input[type="month"],.period-trigger,.seller-filter-trigger):is(:hover,:focus-visible){background:var(--picker-bg);animation:none}
.floating-navigation.app-body :is(.period-picker,.panel-date-picker,.seller-picker,.user-popover) :is(button,a,label):is(:hover,:focus-visible),.floating-navigation.app-body option:is(:hover,:focus-visible){background:transparent;animation:none}
.floating-navigation.app-body option:checked{background:#f5c400;color:#17191b}
.floating-navigation.app-body select>.control-select-trigger{display:flex;align-items:center;justify-content:flex-start;gap:0;width:100%;min-width:0;min-height:0;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:inherit;box-shadow:none;transform:none}
.floating-navigation.app-body .period-picker .calendar-day:is(.is-start,.is-end){background:#f5c400;color:#17191b}
.floating-navigation.app-body .period-picker .calendar-day.is-range:not(.is-start):not(.is-end){background:color-mix(in srgb,#f5c400 20%,var(--picker-bg))}
@media(prefers-reduced-motion:reduce){.floating-navigation.app-body .control-icon-reflection,.floating-navigation.app-body .control-text-shine::after{opacity:0!important;animation:none!important}}



:root {
    --picker-glass: #f4fbffed;
    --picker-glass-ink: #10151a;
    --picker-glass-rim: #ffffffab;
}
:root[data-theme="dark"] {
    --picker-glass: #080b0fee;
    --picker-glass-ink: #f4fbff;
    --picker-glass-rim: #ffffff62;
}
.floating-navigation.app-body select option:not(:disabled):is(:hover,:focus-visible),
.floating-navigation.app-body :is(.seller-option,.calendar-day,.period-presets button,.user-popover a,.user-popover button,.panel-date-picker button):not(:disabled):is(:hover,:focus-visible) {
    color: var(--picker-glass-ink);
    background: linear-gradient(150deg,#ffffff24,transparent 42%),var(--picker-glass);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--picker-glass-rim), inset 0 2px 2px #ffffff2e, 0 2px 5px #0003;
    animation: penna-picker-glass-in 230ms cubic-bezier(.24,.62,.35,1);
}
@keyframes penna-picker-glass-in {
    from { background-color: transparent; box-shadow: inset 0 0 0 1px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .floating-navigation.app-body select option:is(:hover,:focus-visible),
    .floating-navigation.app-body :is(.seller-option,.calendar-day,.period-presets button,.user-popover a,.user-popover button,.panel-date-picker button):is(:hover,:focus-visible) {
        animation-duration: 0s !important;
    }
}

.floating-navigation.app-body select option:checked,.floating-navigation.app-body select option:checked:not(:disabled):is(:hover,:focus-visible),.floating-navigation.app-body :is(.seller-option:has(input:checked),.calendar-day.is-selected,.panel-date-picker [aria-selected="true"],.user-popover [aria-current="page"]){background:var(--yellow);color:#17191b;animation:none}
