/*
 * Frex Core brand + readability layer.
 *
 * Loaded after Filament's stylesheet, so everything here is a deliberate
 * override. Two jobs: put the frex.digital identity on the panel, and keep it
 * legible through a long billing session — figures that line up, rows you can
 * track across, and Persian text in a real Persian face.
 *
 * Brand colours sampled from the master logo artwork:
 *   orange #FC9700   red #CA0000
 */

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-BookOblique.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Heavy.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Secondary/accent face from the brand guide. Used sparingly — document
   titles on printed output, never for UI chrome. */
@font-face {
    font-family: 'Frex Accent';
    src: url('/fonts/georgia/Georgia-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --frex-orange: #fc9700;
    --frex-red: #ca0000;

    /* Avenir carries no Arabic script, so Persian falls through to a face
       that does. Keeping both in one stack means mixed EN/FA strings render
       correctly without per-element overrides. */
    --font-family: 'Avenir', 'Segoe UI', 'Tahoma', sans-serif;
}

/* ---------------------------------------------------------------- typography */

body {
    font-family: var(--font-family);
}

/* Persian needs the taller line and no Avenir metrics fighting the script. */
html[dir='rtl'] {
    --font-family: 'Segoe UI', 'Tahoma', 'Avenir', sans-serif;
}

html[dir='rtl'] .fi-ta-text,
html[dir='rtl'] .fi-in-text {
    line-height: 1.7;
}

/* Avenir's lowercase runs slightly small next to Inter; nudge it back up. */
html[dir='ltr'] body {
    font-size: 1.005rem;
}

/* ------------------------------------------------------------------- figures */

/*
 * Every number in the panel is tabular: money columns, counts, stats.
 * Proportional digits make a column of amounts unscannable — this is the
 * single highest-value readability rule in the file.
 */
.fi-ta-table td,
.fi-ta-text,
.fi-wi-stats-overview-stat-value,
.fi-in-text,
input[type='number'],
.fi-input {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.fi-ta-table td.fi-align-end .fi-ta-text-item-label,
.fi-ta-table th.fi-align-end {
    white-space: nowrap;
}

.fi-ta-table td.fi-align-end .fi-ta-text-item-label {
    font-weight: 500;
}

/* -------------------------------------------------------------------- brand */

/* The logo replaces the brand name, so give it room to breathe and cap its
   height in both sidebar states. */
.fi-logo {
    height: 2.1rem;
    width: auto;
}

.fi-sidebar-header {
    padding-block: 0.9rem;
}

/* A thin brand rule under the topbar ties the panel to the identity without
   colouring large surfaces orange (which would hurt contrast everywhere). */
.fi-topbar > nav {
    border-bottom: 2px solid var(--frex-orange);
}

/* Login card: brand mark sits above the form, so keep it generous. */
.fi-simple-main .fi-logo {
    height: 3.25rem;
    margin-inline: auto;
}

/* -------------------------------------------------------------------- tables */

.fi-ta-row > td,
.fi-ta-header-cell {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.fi-ta-header-cell-label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.75;
}

/* A visible hover row makes it far easier to follow one client across a wide
   table — the aging and invoice lists benefit most. */
.fi-ta-row:hover {
    background-color: color-mix(in oklab, var(--frex-orange) 7%, transparent);
}

.fi-ta-text-item-description {
    font-size: 0.78rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.fi-ta-placeholder {
    opacity: 0.35;
}

/* --------------------------------------------------------------------- badges */

.fi-badge {
    font-weight: 700;
    letter-spacing: 0.01em;
    padding-inline: 0.55rem;
    padding-block: 0.2rem;
}

/* ------------------------------------------------------------------- sidebar */

.fi-sidebar-group-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 900;
    opacity: 0.6;
}

.fi-sidebar-item-label {
    font-size: 0.9rem;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    font-weight: 700;
}

/* Active item gets a brand-orange edge — the one place the orange reads as
   navigation rather than decoration. */
.fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 3px;
    border-radius: 3px;
    background: var(--frex-orange);
}

.fi-sidebar-item-button {
    position: relative;
}

.fi-sidebar-item-badge {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- forms */

.fi-fo-field-wrp-label {
    font-weight: 700;
}

/* Helper text carries the real rules in this app (TRN format, VAT switch,
   pro-rata behaviour). It was too faint to read. */
.fi-fo-field-wrp-helper-text {
    opacity: 0.8;
    line-height: 1.6;
}

.fi-sc-section .fi-sc-section-header-heading {
    font-weight: 700;
}

.fi-fo-repeater-item {
    margin-bottom: 0.4rem;
}

/* ------------------------------------------------ copy-paste and long text */

/*
 * Reminder messages, portal links and notification bodies are meant to be read
 * and copied verbatim. Monospace beats a proportional wall of text.
 */
.fi-modal textarea[readonly],
.fi-modal textarea:disabled,
textarea[name$='.text'],
textarea[name$='.body'],
textarea[name$='.link'] {
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.65;
}

/* ------------------------------------------------------------------ widgets */

.fi-wi-stats-overview-stat-value {
    font-weight: 900;
    letter-spacing: -0.01em;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.72;
    font-weight: 500;
}

/* ------------------------------------------------------------------- tabs */

.fi-tabs-item-label {
    font-weight: 500;
}

.fi-tabs-item-active .fi-tabs-item-label {
    font-weight: 700;
}

/* -------------------------------------------------------- dark-mode contrast */

.dark .fi-ta-row:hover {
    background-color: color-mix(in oklab, var(--frex-orange) 10%, transparent);
}

.dark .fi-ta-text-item-description,
.dark .fi-fo-field-wrp-helper-text {
    opacity: 0.72;
}

/* ------------------------------------------------------------------- print */

@media print {
    .fi-sidebar,
    .fi-topbar,
    .fi-ta-header-toolbar,
    .fi-ta-actions {
        display: none !important;
    }
}