/* «تاریخچه تغییرات اطلاعات» (تسک ۱۴۰۵/۰۶/۱۳/۰۱).

   Three things are drawn here and nowhere else: the line under every field of
   the panel, the button at the top of every management, and the employee's face
   in a history row. All three are panel-wide by requirement (بند ۴۷) — the line
   is drawn by Filament's own field wrapper on every form there is — so this
   stylesheet is loaded unscoped and is inert on a page with none of them on it.

   This panel is Filament v3, where a palette token is a channel triplet: the
   value of `--danger-600` is the string «220 38 38», so `color: var(--danger-600)`
   is thrown away by the browser, declaration and all. Every token below is
   wrapped back into `rgb()` with the stock value as a fallback, exactly as
   `panel-identity.css` and `technical-docs.css` already do. */

/* ── The history icon of a field (تسک ۱۴۰۵/۰۷/۳۰/۰۱، بند ۴ تا ۷) ──────────

   One icon, in one place: Lucide's «History» (a clock with a turning-back
   arrow), right before the field's label — in this right-to-left panel, to its
   right — on the label's line, with a small fixed gap. Red without a recorded
   change, green with one, grey when the counts could not be read; its shape,
   size and place are the same in all three and only the colour moves.

   The icon and the label sit together in one group at the start of the label
   row, so the row's `justify-between` still sends a field's hint to the far
   end, and neither the required star nor the «ⓘ» help mark is crowded. */

.fi-information-history-label-group {
    display: inline-flex;
    align-items: center;
    column-gap: 0.375rem;
    min-width: 0;
}

/* A long label wraps beside the icon; the icon stays by its first line. */
.fi-information-history-label-group:has(.fi-information-history-icon) {
    align-items: flex-start;
}

.fi-information-history-label-group > .fi-information-history-icon {
    /* the label's line is 1.5rem tall (leading-6); centre a 1rem icon on it */
    margin-top: 0.25rem;
}

.fi-information-history-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: none;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: transform 75ms ease;
}

.fi-information-history-icon-svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fi-information-history-icon:hover {
    transform: scale(1.15);
}

.fi-information-history-icon:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Under a control whose label is hidden (a match's score box). */
.fi-information-history-below {
    display: flex;
    justify-content: flex-start;
    line-height: 1;
}

/* On a tab's own label, beside the team's name. */
.fi-information-history-icon-inline {
    margin-inline-start: 0.375rem;
}

/* Red: nothing recorded. Not an error, and nothing about validation. */
.fi-information-history-icon-absent {
    color: rgb(var(--danger-600, 220 38 38));
}

:where(.dark) .fi-information-history-icon-absent {
    color: rgb(var(--danger-400, 248 113 113));
}

/* Green: at least one real change of this field of this record. */
.fi-information-history-icon-present {
    color: rgb(var(--success-600, 22 163 74));
}

:where(.dark) .fi-information-history-icon-present {
    color: rgb(var(--success-400, 74 222 128));
}

/* Grey: the counts could not be read — neither «none» nor «some». */
.fi-information-history-icon-error {
    color: rgb(var(--gray-400, 156 163 175));
}

/* ── «تاریخچه تغییرات اطلاعات» at the top of a management (بند ۲۴) ───────────

   The same shape as «مستندات فنی» beside it, because بند ۲۴ asks for the two to
   sit together in one header and two buttons of different shapes in one row read
   as an accident. */

.fi-information-history-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: rgb(var(--gray-700, 55 65 81));
    box-shadow: inset 0 0 0 1px rgb(var(--gray-300, 209 213 219));
    transition: background-color 75ms ease;
}

.fi-information-history-button:hover {
    background-color: rgb(var(--gray-50, 249 250 251));
}

:where(.dark) .fi-information-history-button {
    color: rgb(var(--gray-200, 229 231 235));
    box-shadow: inset 0 0 0 1px rgb(var(--gray-600, 75 85 99));
}

:where(.dark) .fi-information-history-button:hover {
    background-color: rgb(var(--gray-800, 31 41 55));
}

.fi-information-history-button .fi-icon,
.fi-information-history-button svg {
    height: 1.25rem;
    width: 1.25rem;
}

/* ── The employee in a history row (بند ۱۸ و ۱۹) ────────────────────────────

   One size, stated once, for every history table in the panel: the window under
   a field and the central page of every management draw the same cell from the
   same view, so a management cannot draw the avatar bigger than the management
   next door. */

/* تسک ۱۴۰۵/۰۶/۱۳/۰۴ (تاریخچه ـ تکمیلی ـ آواتار ـ ۰۰۱) made the size a token
   rather than a number written twice: the picture, the default employee mark and
   the system's own mark all read it, so there is one value to change and no way
   for two of the three to disagree. Measured at 28px in the window and on the
   central page of three managements, and asserted there by
   `tests/e2e/information-history-columns-and-avatar.spec.js`. */
:root {
    --information-history-avatar-size: 1.75rem;
    --information-history-avatar-gap: 0.5rem;
}

.fi-information-history-employee {
    display: inline-flex;
    align-items: center;
    gap: var(--information-history-avatar-gap);
    width: 100%;
}

.fi-information-history-employee-avatar {
    flex: none;
    height: var(--information-history-avatar-size);
    width: var(--information-history-avatar-size);
    /* A narrow column is a flex row too, and without these a long employee name
       squeezes the picture into an ellipse. */
    min-height: var(--information-history-avatar-size);
    min-width: var(--information-history-avatar-size);
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    object-fit: cover;
    background-color: rgb(var(--gray-100, 243 244 246));
}

:where(.dark) .fi-information-history-employee-avatar {
    background-color: rgb(var(--gray-700, 55 65 81));
}

/* بند ۳۷: a change nobody made reads «سیستم», with the system's own mark rather
   than a person's face. */
.fi-information-history-employee-system {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--gray-500, 107 114 128));
}

.fi-information-history-employee-system .fi-icon,
.fi-information-history-employee-system svg {
    height: calc(var(--information-history-avatar-size) * 0.64);
    width: calc(var(--information-history-avatar-size) * 0.64);
}

.fi-information-history-employee-name {
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* «ترتیب ستون‌ها» inside the window (تاریخچه ـ تکمیلی ـ ستون ـ ۰۰۱): at the end
   of a row of its own, above the table and beside where the table's own column
   control sits. */
.fi-information-history-modal-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* ── The window (بند ۱۵ و ۲۰) ───────────────────────────────────────────────

   The table inside a modal is Filament's own, striping included; this only stops
   the modal's padding being added to the table's, which would leave the columns
   floating in the middle of the window. */

.fi-information-history-modal-table .fi-ta {
    box-shadow: none;
    background: transparent;
}

.fi-information-history-modal-table .fi-ta-ctn {
    border-radius: 0.5rem;
}

/* ── The window's contents (تسک ۱۴۰۵/۰۷/۳۰/۰۱، بند ۱۱ و ۱۲) ────────────────

   Vazirmatn throughout. The colours are on the values, never on the column
   titles: an old value red, a new value green, the date in the panel's
   standard yellow; «—» and «محتوا ثبت نمی‌شود» stay neutral. */

.fi-information-history-modal-table,
.fi-information-history-modal-table * {
    font-family: 'Vazirmatn', var(--font-family, sans-serif);
}

/* The colours themselves are Filament's own `danger`, `success` and `warning`
   on the cell; this only keeps a panel-wide date rule from repainting the date. */
.fi-information-history-date .fi-ta-text-item-label {
    color: rgb(var(--warning-600, 217 119 6)) !important;
}

:where(.dark) .fi-information-history-date .fi-ta-text-item-label {
    color: rgb(var(--warning-400, 251 191 36)) !important;
}

/* A long value, an image name or a long list never widens the window past the
   screen: the table scrolls inside it. */
.fi-modal-window:has(.fi-information-history-modal-table) {
    min-width: 0;
    max-width: calc(100vw - 1rem);
}

.fi-information-history-modal-table {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.fi-information-history-modal-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.fi-information-history-modal-state-error {
    color: rgb(var(--danger-600, 220 38 38));
}

.fi-information-history-modal-count {
    font-weight: 700;
}