/*
 * Table conventions the whole portal shares.
 *
 * Kept in CSS rather than repeated on every cell: the rules below were wrong in every data table
 * at once, and fixing them one screen at a time is how the next table gets built wrong too.
 * app.css is NOT linked from App.razor (see FacilityManagement/CLAUDE.md), so this file is linked
 * explicitly beside phone-input.css.
 */

/*
 * COLUMN ALIGNMENT. There are exactly two kinds of column in this portal:
 *
 *   (nothing)     text — reads from the left, like every other line of Turkish on the screen
 *   .nova-sayi    a number — reads from the right, so digits line up down the column
 *   .nova-islem   the buttons at the end of a row
 *
 * The class goes on the MudTh AND on every MudTd of that column, and it is the only thing that
 * decides alignment. This replaced inline `Style="text-align:right"`, which looked equivalent and
 * was not: a heading and the values under it are one column, but they are written a hundred lines
 * apart in the markup, so they could be — and repeatedly were — aligned to opposite edges. One
 * class named once per column is a thing that cannot half-happen.
 */
.nova-sayi {
    text-align: right;
    /*
     * A width, so an amount column cannot claim a quarter of the screen. Auto table layout hands
     * leftover width to the columns that did not ask for one, which means the text columns — and
     * a number is the same eleven characters wide whether the table is on a laptop or a 32".
     */
    width: 8rem;
}

/* Only the values: a two-word heading may wrap, and wrapping it keeps the column narrow. */
td.nova-sayi {
    white-space: nowrap;
}

/*
 * A number being TYPED still belongs under its heading.
 *
 * Two earlier attempts pushed the field itself to the right edge with margin-left:auto, and both
 * did nothing: a MudBlazor field is several nested elements, the width cap the call site passed
 * landed on an inner one, and the outer element being nudged was already full width. So the
 * alignment is taken where it cannot miss — inside the input, on the text. The call sites no
 * longer cap the width either, so the box fills its cell and the last digit typed lands under the
 * last letter of the heading, exactly like the printed figures in the rows around it.
 */
.nova-sayi .mud-input-control,
.nova-sayi .mud-input {
    max-width: 100%;
}

.nova-sayi .mud-input-root {
    text-align: right;
}

/*
 * The row's buttons. width:1% is the standard shrink-to-fit for a cell in an auto-layout table —
 * with nowrap it takes exactly the buttons' width and returns the rest to the data.
 */
.nova-islem {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/*
 * A table with two or three columns does not need the whole screen.
 *
 * Stretched to full width, a daire-number column and an amount column end up a hand's width apart
 * on a large monitor and the eye has to travel between them for every row — which is exactly the
 * journey somebody makes fifty times while typing an aidat table.
 */
.nova-dar-tablo {
    max-width: 720px;
}

/*
 * A table with a handful of numeric columns, capped so a heading and the input under it stay
 * within reading distance of each other. Wider than .nova-dar-tablo, which is for two or three
 * columns.
 */
.nova-orta-tablo {
    max-width: 1100px;
}

/*
 * A value meant to be copied whole — a phone number, an e-mail.
 *
 * Selection stops at word boundaries, and a Turkish mobile is displayed in groups
 * ("+90 537 520 12 87"), so a double-click to copy one lands on three digits. user-select:all
 * makes a single click take the entire value, which is what somebody clicking a phone number
 * always meant.
 */
.nova-tam-sec {
    user-select: all;
    -webkit-user-select: all;
}

/* ── "+3" beside a primary contact ────────────────────────────────────────────
   Marks that a person has more numbers or addresses than the one on the row. Deliberately quiet:
   it is a footnote on the value beside it, not a status of its own, and at MudChip's normal size
   it read as the more important half of the cell. */
.nova-ek-sayi {
    height: 1.1rem;
    font-size: .68rem;
    padding: 0 .35rem;
    opacity: .75;
}

/* ── Even row heights in lists that carry chips ───────────────────────────────
   A row whose person has no site chip came out visibly shorter than its neighbours, because the
   chip — not the text — was setting the height. The list then looked misaligned for a reason
   nothing on screen explained. Fixed here rather than by giving every row a chip: the chip is
   information, and a row without one is telling the truth. */
.mud-table-dense .mud-table-body .mud-table-row > .mud-table-cell {
    height: 2.5rem;
}

/* ── İl / İlçe / Mahalle ──────────────────────────────────────────────────────
   Place names are single words that must not break inside themselves. Auto table layout gave
   these three whatever was left after the name cell's chips had taken their share, and what was
   left rendered "İstanbul" as "İstanb / ul" and "KADIKÖY" as "KADIKÖ / Y" — which reads as
   corrupt data rather than as a narrow column. A minimum width plus nowrap makes the table give
   the room up somewhere it can afford to: the address, which is prose and wraps happily. */
.nova-yer {
    white-space: nowrap;
    min-width: 7rem;
}

/* ── The "N eksik" badge column ───────────────────────────────────────────────
   Narrow and fixed: it holds one small chip or nothing, and letting auto layout size it means it
   grows on the rows that have a badge and collapses on the ones that do not. */
.nova-eksik {
    width: 6rem;
    white-space: nowrap;
}

/* ── Autocomplete popovers show everything they return ────────────────────────
   MudAutocomplete returns `MaxItems` rows (default 10) into a popover whose default height fits
   about 8. The last two sat below the fold behind a scrollbar that had already stopped — so the
   scrollbar said "there is more" while the list said "there is not", and both were wrong.

   Fixed here rather than by putting MaxItems on each box: there are six autocompletes in the
   portal and the next one written will have the same default. A height that fits the default
   count is a thing that cannot half-happen; remembering an attribute is not.

   22.5rem ≈ ten dense rows. A box that deliberately returns more (Banka Eşleştirme sets
   MaxItems="null") still scrolls, and there the scrollbar is telling the truth. */
.mud-autocomplete .mud-popover .mud-list {
    max-height: 22.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * YÜZEY — the 2026-09-09 refresh.
 *
 * The palette was never the problem: NovaTheme.cs records why every tone is the tone it is, and
 * none of it changed. What made the portal read as an admin template was everything around the
 * colour — the typeface, the shadow on every box, and table headings that looked like more data.
 * All of it lives here rather than on the screens, for the reason the file already gives: a rule
 * applied per page is a rule missing from the next page somebody writes.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/*
 * The typeface, set through MudBlazor's own variables rather than through MudTheme.Typography.
 *
 * Not a shortcut: Typography holds fourteen separate typo objects (h1…h6, body1/2, subtitle1/2,
 * button, caption, overline, default), each with its own FontFamily, so setting the font in C#
 * means setting it fourteen times and missing one is invisible until a heading somewhere is still
 * Roboto. These are the variables those objects generate; overriding them is the same change in
 * one place. The palette stays in NovaTheme.cs, where it can be reasoned about as a whole.
 */
/*
 * html:root, not :root — one class-equivalent higher, so this beats MudThemeProvider's own
 * `:root { --mud-typography-*: ... }` block no matter which of the two the browser sees last.
 * The provider writes its block into the DOM at render time, i.e. AFTER this stylesheet, so at
 * equal specificity it would win and every font here would quietly stay Roboto.
 */
html:root {
    --nova-font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --mud-typography-default-family: var(--nova-font);
    --mud-typography-h1-family: var(--nova-font);
    --mud-typography-h2-family: var(--nova-font);
    --mud-typography-h3-family: var(--nova-font);
    --mud-typography-h4-family: var(--nova-font);
    --mud-typography-h5-family: var(--nova-font);
    --mud-typography-h6-family: var(--nova-font);
    --mud-typography-subtitle1-family: var(--nova-font);
    --mud-typography-subtitle2-family: var(--nova-font);
    --mud-typography-body1-family: var(--nova-font);
    --mud-typography-body2-family: var(--nova-font);
    --mud-typography-button-family: var(--nova-font);
    --mud-typography-caption-family: var(--nova-font);
    --mud-typography-overline-family: var(--nova-font);
}

/*
 * TABULAR FIGURES, on every table cell rather than only on .nova-sayi.
 *
 * Proportional digits are drawn to their own widths — a 1 is narrower than a 0 — so 1.480,00 and
 * 940,50 do not occupy the same space, and a column of amounts comes out visibly ragged even
 * though every value is right-aligned. Dates have the same problem and carry no class to hang a
 * rule on. Applying it to the whole cell costs nothing on text and fixes both.
 */
.mud-table-cell,
.nova-sayi .mud-input-root {
    font-variant-numeric: tabular-nums;
}

/*
 * A COLUMN HEADING IS A LABEL, NOT A ROW.
 *
 * MudBlazor renders the head cell at body size in body weight, so the first line of a table reads
 * as its first record. Small, spaced capitals separate the two without a rule or a fill — and
 * because <html lang="tr">, the browser upper-cases per Turkish rules, so "İşlem" keeps its dot
 * and "Rıza" does not gain one.
 *
 * word-break/overflow-wrap: a table cell is the one box a browser will break a word inside as a
 * last resort when the column cannot fit, which is how "Tarih" and "Kaynak" came out as "Tar/ih"
 * and "Kayn/ak" in the narrow Rıza panel. Stated here so the answer is "the column gets wider and
 * the container scrolls", which .mud-table-container already does.
 */
/*
 * The selector is THREE classes deep to match MudBlazor's own
 * `.mud-table-root .mud-table-head .mud-table-cell`, which sets font-size, weight, letter-spacing,
 * text-transform and colour from subtitle2. Written with two classes this rule shipped, loaded,
 * and silently lost every one of those properties — while its word-break half, which nothing else
 * declares, applied perfectly. A partly-winning rule is the worst kind: the page changes just
 * enough to look like the change worked.
 */
.mud-table-root .mud-table-head .mud-table-cell {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: normal;
}

/*
 * Headings that must not wrap at all — a four-column table inside a narrow card.
 *
 * The rule above stops a word breaking in half; it does not stop "Kaynak" wrapping under "Tarih"
 * in a column two characters wide. This does, and the table scrolls instead. It is a patch on a
 * layout problem (the panel is too wide for the column it sits in) and should disappear when that
 * panel moves, not become the house style.
 */
.nova-th-nowrap {
    white-space: nowrap;
}

/*
 * ONE HAIRLINE INSTEAD OF A SHADOW.
 *
 * Border, fill, radius and shadow each say "this is a separate object", and MudBlazor spends all
 * four on every MudCard and MudPaper at once. Stamped on eight boxes down a page, none of them
 * stands out — the screen becomes an even grid of rectangles and the eye has nowhere to land.
 *
 * Only the two low elevations, which are what cards and panels use. Menus, popovers, autocomplete
 * lists and dialogs sit ABOVE the page and their shadow is the thing saying so; flattening those
 * would be a different and worse mistake. The appbar is excluded for the same reason.
 */
.mud-paper.mud-elevation-1:not(.mud-appbar),
.mud-paper.mud-elevation-2:not(.mud-appbar) {
    box-shadow: none;
    border: 1px solid var(--mud-palette-lines-default);
}

/*
 * STATUS CHIPS INSIDE TABLES: tinted, not filled.
 *
 * A solid block of colour per row turns a list into bunting. The tint keeps the same signal — it
 * is still the Error red and the Success green, at the palette's own hue — while letting the row
 * read as a row.
 *
 * Deliberately scoped to table cells. Elsewhere a filled chip is often a CONTROL (a selected site
 * filter, a chosen audience), where the fill is what says "selected"; softening those everywhere
 * would take meaning away rather than noise.
 */
.mud-table-cell .mud-chip.mud-chip-filled {
    font-weight: 600;
}

.mud-table-cell .mud-chip-filled.mud-chip-color-success {
    background-color: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
}

.mud-table-cell .mud-chip-filled.mud-chip-color-error {
    background-color: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

.mud-table-cell .mud-chip-filled.mud-chip-color-warning {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--mud-palette-warning);
}

.mud-table-cell .mud-chip-filled.mud-chip-color-info {
    background-color: color-mix(in srgb, var(--mud-palette-info) 18%, transparent);
    color: var(--mud-palette-info);
}

.mud-table-cell .mud-chip-filled.mud-chip-color-primary {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.mud-table-cell .mud-chip-filled.mud-chip-color-tertiary {
    background-color: color-mix(in srgb, var(--mud-palette-tertiary) 14%, transparent);
    color: var(--mud-palette-tertiary);
}

/*
 * Color.Default has no palette entry of its own — MudBlazor paints it from the action colours.
 * "Sorulmadı", "Kapalı", "Birincil": the ones that mean "nothing has happened here", which is
 * exactly what should be quietest on the page.
 */
.mud-table-cell .mud-chip-filled.mud-chip-color-default {
    background-color: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/*
 * SECTION LABEL — the second half of "not everything is a card".
 *
 * When several blocks share one surface, each still needs naming, and a MudCardHeader per block is
 * what turned them into separate cards in the first place. This is the same treatment the table
 * headings get — small, spaced capitals in the secondary colour — so a section title and a column
 * title read as the same KIND of thing: a label on the content, not content.
 *
 * Turkish upper-casing again comes from <html lang="tr">: "İletişim" keeps its dot, "Rıza" gains
 * none.
 */
.nova-bolum {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

/*
 * The label and whatever acts on that section, on one line. Baseline-aligned rather than centred:
 * the label is text and the button is an object, and centring the two makes the label look like it
 * has drifted upward.
 */
.nova-bolum-baslik {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2rem;
    margin-bottom: .5rem;
}

/* The same label used directly on the page rather than inside a card. */
.nova-bolum-sayfa {
    margin-bottom: .75rem;
    padding-left: .25rem;
}

/*
 * A dot before a status chip.
 *
 * The tinted chip alone is quiet enough to be missed at a glance down a long column; the dot gives
 * the eye something to catch that is not a block of colour. Skipped where the chip already carries
 * an icon — two markers before one word is worse than none.
 */
.mud-table-cell .mud-chip.mud-chip-filled:not(:has(.mud-chip-icon))::before {
    content: "";
    display: inline-block;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: .35rem;
    flex: 0 0 auto;
    opacity: .85;
}

/*
 * THE DELETE BUTTON IS NOT AN ALERT.
 *
 * A red trash icon on every row means ninety-nine red marks down the Sitelerim list. Red is the
 * page's way of saying "look here"; spent on every row it says nothing, and it says it loudly.
 * The colour moves to hover and focus, where it is actually answering a question — "what will this
 * one do?" — asked by somebody already pointing at it.
 *
 * Scoped to the row-actions column. A destructive button that stands ALONE on a screen (a dialog's
 * Sil, a detail page's toolbar) is a different case: there it is the only thing being asked about,
 * and it should look like what it is.
 *
 * Deliberately not opacity: a faded icon reads as disabled, which is the one thing this must not
 * say about a button that works.
 */
/* Both class names: MudIconButton emits mud-error-text, and a text-variant MudButton emits
   mud-button-text-error. Matching one and not the other is how half a column stays red. */
.nova-islem .mud-icon-button.mud-error-text,
.nova-islem .mud-icon-button.mud-button-text-error {
    color: var(--mud-palette-text-secondary);
    transition: color .12s ease-in-out;
}

.nova-islem .mud-icon-button.mud-error-text:hover,
.nova-islem .mud-icon-button.mud-error-text:focus-visible,
.nova-islem .mud-icon-button.mud-button-text-error:hover,
.nova-islem .mud-icon-button.mud-button-text-error:focus-visible {
    color: var(--mud-palette-error);
}

/* ══ Bölüm sayfaları ══════════════════════════════════════════════════════════
 * Bir menü grubunun kendi sayfası: içindeki her ekran bir kart, kartın yüzünde de o ekrandan
 * son beş satır.
 *
 * Kartların yüksekliği eşitleniyor (align-items: stretch MudGrid'de zaten var, buradaki
 * height: 100%). Beş satırı olan bir kartla hiç satırı olmayan bir kart yan yana durduğunda
 * ikincisinin kısa kalması, bölümü "eksik" gibi gösteriyordu — oysa cevabı "burada kayıt yok".
 */
.nova-bolum-kart {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nova-bolum-kart-bas {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.nova-bolum-kart-ikon {
    color: var(--mud-palette-primary);
    flex: none;
}

/* Rayla aynı sayı, aynı biçim: bir kartta 3 yazıp menüde 3 yazmayan rozet, ikisini de
   okunmaz hale getirir. */
.nova-bolum-kart-rozet {
    margin-inline-start: auto;
    flex: none;
    min-width: 1.25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--mud-palette-warning);
    color: #1b1b1b;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Açıklama iki satırlık yer tutuyor. Tek satırlık bir açıklamayla üç satırlık olan yan yana
   durduğunda, altındaki düğme de iki farklı yükseklikte duruyordu. */
.nova-bolum-kart-aciklama {
    min-height: 2.8em;
    margin-bottom: .75rem;
}

/* Düğmeler hepsi aynı hizada, kartın ÜST tarafında.
   Önce dibe yaslanıyorlardı (margin-top: auto). Kartların yükseklikleri eşit olduğu için bu
   kağıt üzerinde doğru görünüyor ama değildi: altındaki listenin uzunluğu karttan karta
   değiştiği için düğme kimi kartta ortada, kimi kartta aşağıda kalıyordu — yani ızgarada gözün
   her seferinde aradığı bir nesne oluyordu. Liste artık düğmenin altında akıyor; kısa kartın
   dibinde boşluk kalması, düğmenin yerinin oynamasından iyi. */
.nova-bolum-kart-dugme {
    margin-top: 0;
}

.nova-bolum-kart-liste-bas {
    margin-top: 1rem;
}

.nova-bolum-kart-not {
    display: block;
    margin-top: 1rem;
}

.nova-bolum-kart-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nova-bolum-kart-liste li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .82rem;
}

.nova-bolum-kart-liste li:first-child {
    border-top: 0;
}

/* Tek satırda kalması şart: kart bir liste ekranı değil, bir bakış. Sarılan başlık kartların
   yüksekliğini de bozuyor. */
.nova-bolum-kart-liste li > a,
.nova-bolum-kart-liste li > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.nova-bolum-kart-liste li > a:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.nova-bolum-kart-liste li > em {
    flex: none;
    font-style: normal;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── İşlem Geçmişi ayrıntısı ──────────────────────────────────────────────────
 * Eskiden ham JSON'du. Artık etiket/değer çiftleri: etiket solda sabit genişlikte, değer sağda.
 * Sabit genişlik şart — üst üste on satırda etiketler hizalanmazsa göz her satırda değeri
 * yeniden aramak zorunda kalıyor.
 */
.nova-denetim-satir {
    display: flex;
    gap: .75rem;
    padding: .2rem 0;
    font-size: .82rem;
}

.nova-denetim-etiket {
    flex: 0 0 11rem;
    color: var(--mud-palette-text-secondary);
}

.nova-denetim-deger {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}