/* v4b/css/{jra,nar}_style.css: UI palette only, independent of Ext JS.
 * Body scope includes dialogs appended outside .app-viewport.
 * Horse numbers, bloodlines, rankings, race status and weekday colors stay fixed.
 */
body {
    --mode-primary:#0c6e48;
    --mode-deep:#0a5f3e;
    --mode-highlight:#308463;
    --mode-filter-bar:#0c6e48;
    --mode-detail-bar:#0a5f3e;
    --mode-tab:#459073;
    --mode-tab-hover:#599d82;
    --mode-selected:#aaccbf;
    --mode-hover:#e1ede9;
    --mode-property:#c2dbd1;
    --mode-input:#e9f2e6;
    --mode-border:#25664d;
    --mode-action:linear-gradient(to bottom,#459073,#308463 50%,#2e7d5e 51%,#308463);
    --mode-action-hover:linear-gradient(to bottom,#3d7c63,#286e52 50%,#26684e 51%,#286e52);
    --mode-action-pressed:linear-gradient(to bottom,#205741,#1e533e 50%,#205741 51%,#366854);
    --mode-action-hover-border:#1d503c;
    --mode-action-pressed-border:#15392b;
}
body[data-mode="nar"] {
    --mode-primary:#6e4637;
    --mode-deep:#5f3c2f;
    --mode-highlight:#846255;
    --mode-filter-bar:#6e4637;
    --mode-detail-bar:#5f3c2f;
    --mode-tab:#907266;
    --mode-tab-hover:#9d8177;
    --mode-selected:#ccbeb9;
    --mode-hover:#ede8e7;
    --mode-property:#dbd1cd;
    --mode-input:#f2e9e0;
    --mode-border:#6b5045;
    --mode-action:linear-gradient(to bottom,#907266,#846255 50%,#7d5d51 51%,#846255);
    --mode-action-hover:linear-gradient(to bottom,#80655b,#715449 50%,#6c5045 51%,#715449);
    --mode-action-pressed:linear-gradient(to bottom,#5f463d,#5a433a 50%,#5f463d 51%,#6f5950);
    --mode-action-hover-border:#594239;
    --mode-action-pressed-border:#46342d;
}
.app-header {
    background:linear-gradient(var(--mode-highlight),var(--mode-deep));
}
.app-port-dialog-header,
.s-highlight-label,
.s-bg-highlight {
    background:var(--mode-highlight);
}
.app-home-tabs {
    color:#ddd;
    background:var(--mode-deep);
}
.app-home-tab {
    color:#fff;
    border-color:var(--mode-border);
    background:var(--mode-tab);
}
.app-home-tab:not(.is-active):not(.is-disabled):hover {
    color:#fff;
    background:var(--mode-tab-hover);
}
.app-home-tab.is-active {
    color:var(--mode-primary);
    background:var(--mode-selected);
}
.app-home-tab.is-disabled {
    color:rgba(255,255,255,.48);
    background:color-mix(in srgb,var(--mode-tab) 58%,var(--mode-deep));
}
.app-home-tab:focus-visible {
    position:relative;
    z-index:1;
    outline:2px solid #fff;
    outline-offset:-3px;
}
.app-days-row:hover {
    color:#333;
    background:var(--mode-hover);
}
.app-days-row:active {
    background:var(--mode-selected);
}
.app-days-row:focus-visible {
    position:relative;
    z-index:3;
    outline:2px solid var(--mode-primary);
    outline-offset:-3px;
}
.app-payout-table thead th {
    background:var(--mode-highlight);
}
.app-payout-filter:focus-visible {
    outline-color:var(--mode-primary);
}
.app-race-menu-overlay .app-port-dialog {
    /* Inset outline preserves the accepted 12-race dialog dimensions. */
    outline:1px solid var(--mode-border);
    outline-offset:-1px;
}
/*
 * Bottom controls intentionally use three separate components by hierarchy:
 * .app-table-column-tabs, .app-insight-filterbar and .app-race-detail-tabs.
 * Do not merge their visual rules; only instances of the same component match.
 */
.app-race-detail-tabs,
.app-horse-tabs,
.app-horse-entity-tabs {
    background:var(--mode-deep);
    border-color:var(--mode-deep);
}
.app-race-detail-tabs {
    flex:0 0 32px;
    padding:0;
    align-items:stretch;
    overflow:hidden;
    border-top:0;
    background:var(--mode-detail-bar);
}
.app-race-detail-tabs button,
.app-horse-tabs button,
.app-horse-entity-tabs a {
    color:#fff;
    background:var(--mode-tab);
    border-color:var(--mode-highlight);
}
.app-race-detail-tabs button {
    width:48px;
    min-width:48px;
    height:100%;
    padding:3px 1px;
    flex-flow:row nowrap;
    border:1px solid var(--mode-border);
    font-family:inherit;
    font-size:11px;
    font-weight:bold;
    line-height:12px;
}
.app-race-detail-tabs button[data-race-tab="card"] {
    font-size:13px;
    line-height:14px;
}
.app-race-detail-tabs button[data-race-tab="bias"] {
    font-size:11px;
}
.app-race-tab-bias {
    display:block;
    transform:scaleX(.82);
}
.app-race-detail-tabs button:first-child {
    border-radius:4px 0 0 4px;
}
.app-race-detail-tabs button:last-child {
    margin-left:-1px;
    border-radius:0 4px 4px 0;
}
.app-race-detail-tabs button > span {
    white-space:nowrap;
}
.app-race-detail-tabs button:hover,
.app-horse-tabs button:hover,
.app-horse-entity-tabs a:not([aria-disabled="true"]):hover,
.s-toolbutton:not(.s-disabled):hover {
    background:var(--mode-tab-hover);
}
.app-race-detail-tabs button.is-active,
.app-horse-entity-tabs a.is-active {
    color:var(--mode-primary);
    background:var(--mode-selected);
}
.app-table-column-tabs {
    position:relative;
    z-index:2;
    overflow:visible;
}
.app-table-column-tabs > .s-segarea {
    align-items:flex-end;
    overflow:visible;
}
.app-table-column-tabs > .app-table-column-tablist {
    width:auto;
    min-width:0;
    height:calc(100% + 6px);
    min-height:calc(100% + 6px);
    max-height:none;
    margin-top:-6px;
    padding-top:6px;
    flex:1 1 auto;
    overflow-x:auto;
    overflow-y:hidden;
}
.app-table-column-tablist > .s-segbutton {
    flex:0 0 auto;
}
.app-table-column-tablist.has-leading-control {
    margin-left:8px;
}
.app-runner-tab-stacked {
    display:flex;
    width:100%;
    min-width:0;
    flex-flow:column nowrap;
    align-items:center;
    justify-content:center;
    line-height:1;
    white-space:nowrap;
}
.app-runner-tab-stacked > .s-scaleX-70 {
    display:block;
    flex:0 0 auto;
    transform:scaleX(.7);
}
.app-table-column-tabs .s-segbutton {
    position:relative;
    border:1px solid #aaa;
    color:#555;
    background:linear-gradient(#fafafa,#d9d9d9);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    text-shadow:0 1px 0 #fff;
    transition:background-color .08s ease,border-color .08s ease,box-shadow .08s ease,transform .08s ease;
}
.app-table-column-tabs .s-segbutton:not(.s-pressed):hover {
    color:var(--mode-deep);
    background:linear-gradient(#fff,var(--mode-hover));
    border-color:var(--mode-highlight);
    cursor:pointer;
}
.app-table-column-tabs .s-segbutton.s-pressed {
    z-index:2;
    color:var(--mode-deep);
    border-color:var(--mode-border);
    border-top:3px solid var(--mode-primary);
    background:linear-gradient(#fff,var(--mode-selected));
    box-shadow:0 -3px 6px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.85);
    text-shadow:none;
    transform:translateY(-2px);
}
.app-table-column-tabs .s-segbutton:focus-visible {
    z-index:3;
    outline:2px solid var(--mode-primary);
    outline-offset:1px;
}
.s-button:not(.s-disabled):hover,
.s-list-item:hover,
.app-recent-race:not(.is-empty):hover {
    background:var(--mode-selected);
}
.s-list-item.s-highlight {
    background:var(--mode-hover);
}
.tplgrid td:has(.app-horse-link:focus-visible),
.tplgrid td:has(.app-runner-link-menu-trigger:focus-visible) {
    outline:2px solid var(--mode-highlight);
    outline-offset:-2px;
}
.app-horse-screen > .app-horse-tabs {
    background:var(--mode-primary);
}
.app-horse-screen > .app-horse-tabs button {
    border-color:var(--mode-border);
    color:#fff;
    background:var(--mode-action);
}
.app-horse-screen > .app-horse-tabs button.is-active {
    color:#fff;
    border-color:var(--mode-action-pressed-border);
    background:var(--mode-action-pressed);
}
.app-horse-screen > .app-horse-entity-tabs {
    background:var(--mode-deep);
}
.app-horse-screen > .app-horse-entity-tabs a {
    border-color:var(--mode-highlight);
    background:var(--mode-tab);
}
.app-horse-screen > .app-horse-entity-tabs a.is-active {
    color:var(--mode-primary);
    background:var(--mode-selected);
}
.app-horse-runner-menu-list a.is-active {
    background:var(--mode-selected);
}
@media (hover:hover) and (pointer:fine) {
    .app-runner-link-menu-item:hover {
        background:var(--mode-hover);
    }
}
.app-horse-property-table th {
    color:var(--mode-deep);
    background:var(--mode-input);
}
.app-horse-property-table tr:first-child th,
table.app-horse-pedigree tr:first-child th {
    color:#fff;
    background:var(--mode-highlight);
}
table.tplgrid th[class*="sort"] {
    background-color:var(--mode-highlight);
}
table.tplgrid th:not([class*="sort"]):hover,
table.tplgrid .s-link:hover,
table.tplgrid .s-link:hover div {
    background-color:var(--mode-selected) !important;
}
/* v4b TplGrid highlights the whole link cell, including its inner blocks.
 * Only live menus participate: NAR's unlinked owner/producer cells stay plain. */
table.tplgrid .app-runner-multi-link:has(.app-runner-link-menu-trigger):hover,
table.tplgrid .app-runner-multi-link:has(.app-runner-link-menu-trigger):hover div {
    background-color:var(--mode-selected) !important;
}
table.tplgrid .app-runner-multi-link:has(.app-runner-link-menu-trigger):hover div::after {
    display:none;
}
table.tplgrid td.s-calc,
table.tplgrid .s-edit:hover {
    background-color:var(--mode-input);
}
table.tplgrid td.s-calc.editing,
table.tplgrid .s-calc:hover {
    background-color:var(--mode-property);
}