/*
|--------------------------------------------------------------------------
| Resources — depth, colour and edges for list, form and detail screens
|--------------------------------------------------------------------------
|
| The admin, agent, subagent and provider panels are table-and-form panels.
| Left to Filament's defaults they are a white page of grey rules, so this
| gives them what tokens.css/surfaces.css already describe: a surface lifted
| off the canvas by a shadow, an edge in the brand colour, and icons that
| carry the brand colour instead of grey.
|
| Scoped to those panels only: the client panel keeps its own look
| (client.css). Colours come from the deployment's Settings via
| --sindibad-primary / --sindibad-secondary, so nothing here is hard-coded
| to one brand.
*/

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) {
    --res-primary: var(--sindibad-primary, #143588);
    --res-gold: var(--sindibad-secondary, #c9a45c);
    --res-tint: color-mix(in srgb, var(--res-primary) 5%, transparent);
    --res-tint-strong: color-mix(in srgb, var(--res-primary) 10%, transparent);
    --res-gold-line: color-mix(in srgb, var(--res-gold) 70%, transparent);
}

/* Page heading: a short gold rule under the title anchors the page. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-header-heading {
    position: relative;
    padding-bottom: 0.55rem;
    color: var(--res-primary);
}

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-header-heading::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 2.75rem;
    height: 3px;
    border-radius: 999px;
    background: var(--res-gold);
}

.dark :is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-header-heading {
    color: inherit;
}

/* Tables: a card with a gold top edge and a tinted header row. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-ta-ctn {
    border-top: 3px solid var(--res-gold) !important;
    overflow: hidden;
}

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-ta-header-cell {
    background: var(--res-tint);
    color: var(--res-primary);
    border-bottom: 2px solid var(--res-gold-line);
    font-weight: 600;
}

.dark :is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-ta-header-cell {
    color: inherit;
}

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-ta-row {
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-ta-row:hover {
    background: var(--res-tint);
    box-shadow: inset 3px 0 0 var(--res-primary);
}

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-ta-row:hover td:first-child {
    box-shadow: none;
}

/* Icons that sit in a cell take the brand colour. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-ta-text-item .fi-icon:not(.fi-badge .fi-icon) {
    color: var(--res-primary);
    opacity: 0.85;
}

/* Sections: an edge in the brand colour on the reading side. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-section:not(.fi-section-not-contained) {
    border-inline-start: 4px solid var(--res-primary) !important;
}

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-section-header .fi-icon {
    color: var(--res-gold);
    padding: 0.3rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--res-tint-strong);
    color: var(--res-primary);
}

/* Stat tiles: a gold edge, so a row of them reads as a row of cards. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-wi-stats-overview-stat {
    border-inline-start: 4px solid var(--res-gold) !important;
}

/* Sidebar: group labels in the brand colour, the open group separated. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-sidebar-group-label {
    color: var(--res-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.dark :is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-sidebar-group-label {
    color: var(--res-gold);
}

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-sidebar-item.fi-active .fi-icon {
    color: var(--res-primary);
}

/* Modals and dropdowns float above the page: give them the same depth. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-modal-window {
    border-top: 3px solid var(--res-gold);
    box-shadow: var(--portal-shadow-hover);
    border-radius: var(--portal-radius);
}

/* Form inputs: a visible brand-coloured focus ring. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-input-wrp {
    box-shadow: 0 1px 2px color-mix(in srgb, #0f172a 6%, transparent);
}

:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px var(--res-gold-line);
}

/* Record images (domain, logo, cover) read as thumbnails, not bare files. */
:is(.fi-panel-admin, .fi-panel-agent, .fi-panel-subagent, .fi-panel-provider) .fi-ta-image img {
    box-shadow: 0 1px 3px color-mix(in srgb, #0f172a 25%, transparent);
    border: 2px solid var(--portal-surface-raised);
    outline: 1px solid var(--res-gold-line);
}