/* ------------------------------------------------------------------------------------------
   refleks-theme.css
   The app's shared visual layer, on top of MudBlazor's component CSS.

   Every value here comes from a theme variable — MudBlazor's --mud-palette-* / --mud-typography-*
   or the --rf-* tokens RefleksThemeStyles publishes per theme (accent families, chart slots,
   radius scale, shadows). Nothing is hardcoded, so all of it re-skins when the user switches
   theme or color mode. Loaded after site.css / refleks-utilities.css.
   ------------------------------------------------------------------------------------------ */

/* ---------- Foundations ---------- */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

/* A single visible focus treatment for keyboard users across Mud components and plain markup.
   :focus-visible only — mouse clicks stay quiet. */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--rf-radius-sm, 4px);
}

/* Slim, themed scrollbars: the default chrome-gray ones fight every dark palette. */
* {
    scrollbar-color: var(--mud-palette-lines-inputs) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-inputs);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-action-default);
    background-clip: content-box;
}

/* ---------- Card / panel system ---------- */
/* One panel style for the whole app: charts, lists, KPI tiles and report blocks. */

.rf-card {
    border-radius: var(--rf-radius-lg, 12px);
    border-color: var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    transition: box-shadow .18s ease, border-color .18s ease;
}

.rf-card-fill {
    height: 100%;
}

.rf-card:hover {
    box-shadow: var(--rf-shadow-md);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 24%, var(--mud-palette-lines-default));
}

.rf-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem .35rem;
}

.rf-card-heading {
    min-width: 0;
}

.rf-card-title {
    display: block;
    font-weight: 600;
    letter-spacing: -.005em;
}

.rf-card-caption {
    display: block;
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
}

.rf-card-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.rf-card-body {
    padding: .65rem 1.15rem 1.15rem;
}

/* A card whose body is a data grid or table: let the rows meet the card edge. */
.rf-card-body > .mud-table,
.rf-card-body > .mud-simple-table {
    margin: 0 -1.15rem -1.15rem;
    width: calc(100% + 2.3rem);
}

/* KPI stat tile. These rules live here rather than in StatTile.razor.css because the classes
   sit on a MudPaper: Blazor's CSS isolation stamps its scope attribute only on a component's
   own HTML elements, so a scoped rule for a child component's root never matches. */
.rf-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rf-stat-body {
    min-width: 0;
}

.rf-stat-label {
    display: block;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rf-stat-value {
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    /* Tabular figures keep KPI digits from shifting width as values update. */
    font-variant-numeric: tabular-nums;
}

.rf-stat-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rf-radius, 10px);
    color: var(--rf-accent, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--rf-accent, var(--mud-palette-primary)) 14%, transparent);
}

/* ---------- Page scaffolding ---------- */

.rf-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .25rem 0 1rem;
}

/* The dashboard runs edge to edge under its own layout, so its header supplies the gutter
   that lines up with the MudGrid below it. */
.rf-dashboard .rf-page-head {
    padding: 1rem 2rem .5rem;
}

.rf-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.rf-loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.rf-signed-list {
    display: flex;
    flex-direction: column;
}

.rf-signed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rf-signed-row:last-child {
    border-bottom: 0;
}

/* ---------- App bar & shell ---------- */
/* Same reason as .rf-stat above: these classes are set on MudBlazor components, so they are
   styled globally rather than from MainLayout's scoped stylesheet. */

.rf-main-content {
    background-color: var(--mud-palette-background);
    min-height: 100vh;
}

.mud-appbar.rf-appbar {
    background-color: color-mix(in srgb, var(--mud-palette-appbar-background) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rf-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    margin-left: 4px;
}

.rf-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--rf-radius, 8px);
    background: var(--rf-brand-gradient, var(--mud-palette-primary));
    color: #fff;
}

.rf-header-brand {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.rf-brand-dot {
    color: var(--mud-palette-primary);
}

.rf-butce-chip {
    border-radius: 999px;
    font-weight: 600;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.rf-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ---------- Drawer & navigation ---------- */

.rf-drawer .mud-navmenu {
    padding: .5rem;
}

.rf-drawer .mud-nav-link {
    border-radius: var(--rf-radius, 8px);
    margin: 1px 0;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.rf-drawer .mud-nav-link:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* Active route: tinted pill + primary text, instead of MudBlazor's flat gray highlight. */
.rf-drawer .mud-nav-link.active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.rf-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary);
}

.rf-drawer .mud-nav-group > .mud-nav-link {
    font-weight: 600;
}

/* Nested links sit on a hairline rail so group membership reads at a glance. */
.rf-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 2.4rem;
    font-weight: 400;
    border-left: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 var(--rf-radius, 8px) var(--rf-radius, 8px) 0;
    margin-left: 1.15rem;
}

.rf-drawer .mud-nav-group .mud-collapse-container .mud-nav-link.active {
    border-left-color: var(--mud-palette-primary);
}

/* ---------- Data grids ---------- */

.mud-table.mud-data-grid {
    border-radius: var(--rf-radius-lg, 12px);
}

/* Grid toolbar: title (and subtitle) on the left, actions on the right. The actions stay on one
   line and centered against the title however tall the toolbar gets. */
.mud-table-toolbar .rf-grid-tools {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
}

.mud-table-toolbar .rf-grid-tools > .navlink {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* A detail table is subordinate to the master row it opens under, so it reads one step smaller
   throughout — cells, headers and pager. Its table also shrinks to its columns instead of
   stretching across the row: twelve month columns spread over the full width were mostly gap.
   .detail-view is a GenericSingleGrid opened by "Detayları Göster" (KucukBaslik); same look. */
.detail-grid .mud-table-body .mud-table-cell,
.detail-view .mud-table-body .mud-table-cell {
    font-size: .78rem;
}

.detail-grid .mud-table-head .mud-table-cell,
.detail-view .mud-table-head .mud-table-cell {
    font-size: .68rem;
}

/* .mud-table prefix: MudBlazor's dense rule (.mud-table-dense * .mud-table-row .mud-table-cell)
   otherwise wins and keeps its 16px/24px header padding. */
/* Row edit/delete icons, one step below rf-icon-sm (1.1rem), matching the smaller text. */
.detail-grid .rf-cmd-cell .rf-icon-sm {
    font-size: .9rem;
}

.mud-table.detail-grid .mud-table-row .mud-table-cell,
.mud-table.detail-view .mud-table-row .mud-table-cell {
    padding-inline: .5rem;
}

.detail-grid .mud-table-pagination,
.detail-grid .mud-table-pagination .mud-select-input .mud-input-root,
.detail-grid .mud-table-toolbar,
.detail-view .mud-table-pagination,
.detail-view .mud-table-pagination .mud-select-input .mud-input-root,
.detail-view .mud-table-toolbar {
    font-size: .78rem;
}

/* The header's sort/filter/menu buttons, not the numbers, set a month column's width (~90px of
   icons over a 4-character label). Shrink them and drop the empty sort-index slot. */
.detail-grid .column-options .mud-icon-button,
.detail-view .column-options .mud-icon-button {
    padding: 1px;
}

.detail-grid .column-options .mud-icon-root,
.detail-view .column-options .mud-icon-root {
    font-size: 1rem;
}

.detail-grid .column-options .mud-sort-index.invisible,
.detail-view .column-options .mud-sort-index.invisible {
    display: none;
}

.detail-grid table,
.detail-view table {
    width: auto;
}

.detail-grid > .mud-table-container {
    margin-inline: 0;
}

.mud-table-toolbar .rf-grid-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Shrink the whole grid card to its table and center it. A table wider than the page caps the
   card at 100% and the card scrolls. Grids in an RfCard stay edge to edge (.rf-card-body rule). */
.mud-data-grid:not(.rf-card-body > .mud-data-grid) {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

/* MudDataGrid gives .mud-table-container width:max-content when HorizontalScrollbar or
   ResizeMode.Container is on. The pager can be wider than a narrow table, so center the table
   in the card too; a wider table resolves the auto margins to 0. */
.mud-data-grid > .mud-table-container {
    margin-inline: auto;
}

/* "No records" spans the whole table, so on a wide empty grid it is centered off screen. Pin it
   to the visible width: sticky against the grid, which is what scrolls here. The max-content
   container never scrolls, but its overflow:auto would still capture the sticky, so drop it.
   The size container is the grid's parent: a fit-content grid would collapse under inline-size
   containment, and at its 100% cap the grid is as wide as that parent anyway. */
.mud-data-grid > .mud-table-container[style*="max-content"] {
    overflow: visible;
}

:has(> .mud-data-grid:not(.mud-data-grid .mud-data-grid)) {
    container-type: inline-size;
}

/* A size container has no intrinsic width, so inside the fit-content .rf-detail-view it would
   shrink the view to its tab strip. Contain the view's full-width parent instead: the grid is
   only capped when it reaches that width, so 100cqw still matches it. */
.rf-detail-view :has(> .mud-data-grid.mud-table) {
    container-type: normal;
}

:has(> .rf-detail-view) {
    container-type: inline-size;
}

.mud-table-empty-row > div {
    position: sticky;
    left: 0;
    width: min(100%, 100cqw);
}

.mud-data-grid .mud-table-head .mud-table-cell {
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}

.mud-data-grid .mud-table-body .mud-table-row:hover > .mud-table-cell {
    background-color: var(--mud-palette-table-hover);
}

.mud-data-grid .mud-table-cell {
    border-bottom-color: var(--mud-palette-table-lines);
}

/* Numeric columns line up on the decimal and keep constant digit width. */
.rf-num-cell,
.mud-table-cell.rf-num-cell {
    font-variant-numeric: tabular-nums;
}

/* ----- Column resizing (MudDataGrid ColumnResizeMode) -----

   The grids run table-layout:auto, so a width set by the resizer is only a suggestion: a cell
   refuses to shrink past its own content. Without truncation, dragging a column narrower does
   nothing. These two rules are what make the drag actually move the edge.

   The truncation goes on the header's inner text span, never on the th — the resize handle is an
   absolutely-positioned sibling inside that th, and overflow:hidden there would clip it away.
   .column-header is a flexbox, so min-width:0 is needed before its child is allowed to shrink;
   white-space:nowrap is already inherited from the header rule above. */
.mud-data-grid .mud-table-head .mud-table-cell .column-header {
    min-width: 0;
}

.mud-data-grid .mud-table-head .mud-table-cell .sortable-column-header {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body cells truncate only in the grids whose cells hold short, structured values. The free-text
   grids (Loglar, HataComp, KontrolOzetComp, ProgramCalismalari) are deliberately left out so their
   message columns keep wrapping — they still resize, their columns just won't shrink below the
   text. This selector list is the knob if truncation turns out to be unwanted somewhere. */
.single-grid .mud-table-body .mud-table-cell,
.master-grid .mud-table-body .mud-table-cell,
.detail-grid .mud-table-body .mud-table-cell,
.rapor-grid .mud-table-body .mud-table-cell,
.sap-grid .mud-table-body .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Simple tables (module runs, audit log) ---------- */

/* MudBlazor styles these cells through `.mud-simple-table table * tr>th`, so the header
   treatment has to match that specificity to win. */
.mud-simple-table.rf-runs-table table thead tr > th {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}

.mud-simple-table.rf-runs-table table tbody tr > td {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

/* ---------- Tabs ---------- */

/* Shrink the tab strip to its tabs and keep it against the left edge — full-width tabs left a
   page-wide rule floating over a narrow grid. MudBlazor 9 calls this element .mud-tabs-tabbar;
   the old .mud-tabs-toolbar selector matched nothing. */
.mud-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    width: fit-content;
    max-width: 100%;
    margin-inline: 0 auto;
}

/* "Detay Tablolar" view (DetayGorunumu): the wrapper shrinks to its grid and centers, so the
   left-aligned tab strip starts at the grid's left edge. Title and back icon are in the grid's toolbar. */
.rf-detail-view {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

/* The grid's p-1 wrapper would inset it 4px from the tabs. */
.rf-detail-view .p-1 {
    padding-inline: 0 !important;
}

.mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    min-width: 0;
}

.mud-tabs .mud-tab.mud-tab-active {
    font-weight: 600;
}

/* ---------- Grid pager (RfGridPager) ---------- */
/* Page size on the left, "1–12 / 36" and numbered page buttons on the right, sitting on a
   hairline under the last row. The page buttons are small rounded pills; the current one is
   a tinted primary pill rather than MudBlazor's solid fill. */

.rf-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.rf-pager-size {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.rf-pager-select {
    width: 4.75rem;
    flex: none;
}

.rf-pager-select .mud-input.mud-input-outlined {
    font-size: .8125rem;
}

.rf-pager-select .mud-input-slot {
    padding-block: 4px;
}

.rf-pager-info {
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rf-pager-pages .mud-pagination-item > .mud-button-root {
    min-width: 28px;
    height: 28px;
    border-radius: var(--rf-radius, 8px);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.rf-pager-pages .mud-pagination-item-selected > .mud-button-root {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: none;
}

.detail-view .rf-pager {
    font-size: .75rem;
}

/* ---------- Buttons, chips, inputs ---------- */

.mud-button-root {
    border-radius: var(--rf-radius, 8px);
}

.mud-chip {
    font-weight: 500;
}

.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--rf-radius, 8px);
}

/* ---------- Surfaces: dialogs, popovers, menus ---------- */

.mud-dialog,
.mud-popover,
.mud-menu-popover .mud-list {
    border-radius: var(--rf-radius-lg, 12px);
    box-shadow: var(--rf-shadow-lg);
}

.mud-dialog-title {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-dialog-actions {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ---------- Popup dialog shell ---------- */
/* The budget/company dialogs are RfPopup bodies, not MudDialogs, so the padding, the titled
   header and the action row that MudDialog supplies through its own slots are these classes
   instead. Everything is theme-token driven, like the rest of this file. */

.rf-dialog {
    padding: 1.35rem 1.5rem 1.25rem;
}

.rf-dialog-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Icon tile, same treatment as the dashboard's KPI tiles. */
.rf-dialog-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--rf-radius, 10px);
    color: var(--rf-dialog-accent, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--rf-dialog-accent, var(--mud-palette-primary)) 14%, transparent);
}

/* Outcome dialogs re-point the accent once; the tile and its tint follow. */
.rf-dialog-danger {
    --rf-dialog-accent: var(--mud-palette-error);
}

.rf-dialog-warning {
    --rf-dialog-accent: var(--mud-palette-warning);
}

.rf-dialog-success {
    --rf-dialog-accent: var(--mud-palette-success);
}

.rf-dialog-heading {
    min-width: 0;
}

.rf-dialog-title {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.rf-dialog-caption {
    color: var(--mud-palette-text-secondary);
}

.rf-dialog-body {
    padding-top: 1.25rem;
}

/* Action row at the foot of a popup body (RfPopup has no dedicated actions slot).
   .rf-import-actions is the same row inside the Excel import popup. */
.rf-dialog-actions,
.rf-import-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Grouped boolean options, inset from the fields above them. One switch per row: the labels
   are long enough that a two-column layout wraps them, which leaves the switch floating
   beside a two-line label. */
.rf-dialog-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .5rem .85rem .6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rf-radius, 8px);
    background-color: var(--mud-palette-background);
}

/* A month number that belongs to the switch beside it, not a field in its own right. */
.rf-dialog-month {
    max-width: 5.5rem;
}

/* ---------- Charts ---------- */
/* MudBlazor renders charts as inline SVG; these rules keep the axis, grid and legend on the
   theme's own neutrals instead of the library's fixed grays. */

.mud-chart .mud-charts-xaxis,
.mud-chart .mud-charts-yaxis {
    fill: var(--rf-chart-axis-text, var(--mud-palette-text-secondary));
    font-size: .72rem;
}

.mud-chart .mud-chart-axis-label {
    fill: var(--rf-chart-axis-text, var(--mud-palette-text-secondary));
    font-size: .72rem;
}

/* Grid lines live in <g class="mud-charts-grid"> and carry a hardcoded light-gray stroke
   attribute, which disappears on dark backgrounds; repaint them from the theme's rule color.
   Series paths sit in their own group, so their palette colors are untouched. */
.mud-chart .mud-charts-grid path,
.mud-chart .mud-charts-grid line {
    stroke: var(--rf-chart-grid, var(--mud-palette-lines-default));
}

.mud-chart .mud-chart-legend-text {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}

.mud-chart .mud-chart-legend-marker {
    border-radius: 3px;
}

/* Donut center label inherits the heading font so radial charts match the cards. */
.mud-chart-donut text {
    font-family: var(--mud-typography-h6-family, inherit);
}

/* ---------- Theme picker ---------- */

.rf-theme-menu .mud-list {
    min-width: 290px;
    padding: .35rem;
}

.rf-theme-menu-head {
    padding: .4rem .6rem .1rem;
}

/* Only the catalog scrolls; the heading and the mode switch stay anchored. */
.rf-theme-list {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rf-theme-menu-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.rf-theme-option {
    display: block;
    padding: .5rem .6rem;
    border-radius: var(--rf-radius, 8px);
    cursor: pointer;
    transition: background-color .15s ease;
}

.rf-theme-option:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.rf-theme-option-active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.rf-theme-option-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.rf-theme-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.rf-theme-swatches {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

.rf-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* The three accent families, each shown as its five steps (lighter → darker). */
.rf-theme-accents {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.rf-accent-bar {
    display: inline-flex;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.rf-accent-bar > span {
    flex: 1;
}

/* Reserve the check's width on every row so the swatches don't shift when the active
   theme changes. */
.rf-theme-check {
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}

.rf-theme-option:not(.rf-theme-option-active) .rf-theme-option-main::after {
    content: "";
    width: 20px;
    flex-shrink: 0;
}

.rf-theme-mode {
    padding: .4rem .6rem .5rem;
}

.rf-mode-toggle {
    margin-top: .4rem;
    width: 100%;
}

/* ---------- Accent utilities ---------- */
/* For markup that wants an accent family directly (badges, section markers, legends). */

.rf-accent-1-text { color: var(--rf-accent-1) !important; }
.rf-accent-2-text { color: var(--rf-accent-2) !important; }
.rf-accent-3-text { color: var(--rf-accent-3) !important; }

.rf-accent-1-bg { background-color: var(--rf-accent-1); color: var(--rf-accent-1-contrast); }
.rf-accent-2-bg { background-color: var(--rf-accent-2); color: var(--rf-accent-2-contrast); }
.rf-accent-3-bg { background-color: var(--rf-accent-3); color: var(--rf-accent-3-contrast); }

.rf-accent-1-soft { background-color: color-mix(in srgb, var(--rf-accent-1) 14%, transparent); color: var(--rf-accent-1-dark); }
.rf-accent-2-soft { background-color: color-mix(in srgb, var(--rf-accent-2) 14%, transparent); color: var(--rf-accent-2-dark); }
.rf-accent-3-soft { background-color: color-mix(in srgb, var(--rf-accent-3) 14%, transparent); color: var(--rf-accent-3-dark); }

/* ---------- Legacy report pages ---------- */
/* The pre-MudBlazor pages still render plain <h3 class="card-title"> and Bootstrap tables;
   pull them onto the theme's display font and rules so they don't read as a different app. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rf-font-heading, inherit);
}

/* Bootstrap used to supply the absolute heading scale this markup was written against; without
   it a bare heading falls back to the browser's em-based defaults, which are relative to
   MudBlazor's 14px body — so <h4> came out at 14px and <h6> at 9px, smaller than body text.
   This restores Bootstrap 5's scale (fluid below 1200px, same ceiling above it).
   MudText renders its headings with .mud-typography, and those keep the theme's own scale:
   the guard matters most for margin-bottom, which .mud-typography does not set itself. */
h1:not(.mud-typography),
h2:not(.mud-typography),
h3:not(.mud-typography),
h4:not(.mud-typography),
h5:not(.mud-typography),
h6:not(.mud-typography) {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1:not(.mud-typography) { font-size: clamp(1.375rem, 1.375rem + 1.5vw, 2.5rem); }
h2:not(.mud-typography) { font-size: clamp(1.325rem, 1.325rem + 0.9vw, 2rem); }
h3:not(.mud-typography) { font-size: clamp(1.3rem, 1.3rem + 0.6vw, 1.75rem); }
h4:not(.mud-typography) { font-size: clamp(1.275rem, 1.275rem + 0.3vw, 1.5rem); }
h5:not(.mud-typography) { font-size: 1.25rem; }
h6:not(.mud-typography) { font-size: 1rem; }

.card-title {
    font-weight: 600;
    letter-spacing: -.01em;
}

.rf-pivot thead th {
    font-weight: 600;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
}

/* ---------- Spreadsheet editor (SpreadsheetEditor.razor) ---------- */

/* Everything here styles itself from the theme variables, so the sheet follows the active
   palette and dark/light mode without knowing which theme is on. */

.rf-sheet-wrap {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    position: relative;
}

.rf-sheet-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.rf-sheet-address {
    min-width: 4.5rem;
    padding: .25rem .5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rf-radius-sm, 5px);
    background-color: var(--mud-palette-background);
}

.rf-sheet-formula {
    flex: 1 1 12rem;
    min-width: 0;
    padding: .25rem .5rem;
    font-family: inherit;
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rf-radius-sm, 5px);
}

.rf-sheet-formula:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.rf-sheet-formula[readonly] {
    color: var(--mud-palette-text-disabled);
    background-color: var(--mud-palette-background-gray);
}

/* The table scrolls inside its own box so the sticky headers have something to stick to and the
   page itself never scrolls sideways. */
.rf-sheet-scroll {
    position: relative;
    overflow: auto;
    max-height: 62vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rf-radius, 8px);
    background-color: var(--mud-palette-surface);
}

table.rf-sheet {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8125rem;
    white-space: nowrap;
}

table.rf-sheet th,
table.rf-sheet td {
    border-right: 1px solid var(--mud-palette-table-lines);
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding: .175rem .4rem;
}

table.rf-sheet thead th {
    position: sticky;
    z-index: 2;
    font-weight: 600;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
}

table.rf-sheet thead tr.rf-sheet-letters th { top: 0; }
table.rf-sheet thead tr.rf-sheet-captions th { top: 1.35rem; }

table.rf-sheet tr.rf-sheet-letters th {
    text-align: center;
    letter-spacing: .04em;
}

/* Row numbers and the header corner stay put while the sheet scrolls sideways. */
table.rf-sheet .rf-sheet-gutter,
table.rf-sheet .rf-sheet-corner {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 2.75rem;
    text-align: center;
    font-weight: 600;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
    user-select: none;
}

table.rf-sheet .rf-sheet-corner { z-index: 4; }

table.rf-sheet .rf-sheet-head-active {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

table.rf-sheet td {
    position: relative;
    min-width: 5rem;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: cell;
}

table.rf-sheet td.rf-sheet-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Read-only cells (keys, years, lookups) are dimmed so it is obvious what can be typed into. */
table.rf-sheet td.rf-sheet-ro {
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
    cursor: default;
}

/* The :not()s are load-bearing, not decoration: this selector is more specific than the selection
   rules below it, so without them the striping repaints every selected cell on an even row and a
   drag across the sheet looks like it selected nothing. */
table.rf-sheet tbody tr:nth-child(even) > td:not(.rf-sheet-ro):not(.rf-sheet-scratch):not(.rf-sheet-selected):not(.rf-sheet-active) {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}

table.rf-sheet td.rf-sheet-selected {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

table.rf-sheet td.rf-sheet-active {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    background-color: var(--mud-palette-surface);
}

table.rf-sheet td.rf-sheet-error {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* A lookup value the option list refused. It keeps showing the text the user supplied, tinted rather
   than merely coloured, because a wrong Kanal name reads as ordinary content otherwise — and unlike a
   formula error it can sit in a block of hundreds of pasted rows. */
table.rf-sheet td.rf-sheet-invalid {
    color: var(--mud-palette-error);
    background-color: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    text-decoration: underline wavy var(--mud-palette-error);
    text-underline-offset: 2px;
}

/* The scratch area: free cells that belong to no column and are never saved. Tinted rather than
   merely outlined, so it is obvious at a glance where the table stops and the workings begin. */
table.rf-sheet td.rf-sheet-scratch {
    background-color: color-mix(in srgb, var(--mud-palette-info) 6%, transparent);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.rf-sheet .rf-sheet-band-start {
    border-top: 2px dashed var(--mud-palette-info);
}

table.rf-sheet .rf-sheet-band-left {
    border-left: 2px dashed var(--mud-palette-info);
}

table.rf-sheet td.rf-sheet-formula-cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-width: .3rem .3rem 0 0;
    border-style: solid;
    border-color: var(--mud-palette-info) transparent transparent transparent;
}

/* The fill handle: the small square at the bottom-right corner of the selection.
   It lives in the overlay rather than inside a <td>, because the cells clip their overflow to
   ellipsize long values — which cut the handle in half and left the remainder hidden behind the
   active cell's outline, in the same colour. A single element also beats one span per cell.
   The outer box is a deliberately generous, transparent grab target; only the inner square shows. */
.rf-sheet-fill {
    display: none;
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;   /* so JS can position it by the corner point itself */
    z-index: 6;
    pointer-events: auto;
    cursor: crosshair;
}

.rf-sheet-fill > i {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    background-color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-surface);
}

/* Grabbing it is the one interaction with no keyboard equivalent, so make it findable. */
.rf-sheet-fill:hover > i {
    left: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
}

/* Blazor renders this empty and never touches it, so the JS-owned cell editor can live here
   without the two fighting over the DOM. */
.rf-sheet-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rf-sheet-overlay .rf-sheet-cell-input {
    position: absolute;
    z-index: 10;
    pointer-events: auto;
    box-sizing: border-box;
    padding: .175rem .4rem;
    font-family: inherit;
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-primary);
    border-radius: 0;
    outline: none;
}

/* A lookup cell's option list (app.js _dropdown), hung under the cell editor. */
.rf-sheet-overlay .rf-sheet-dropdown {
    position: absolute;
    z-index: 11;
    pointer-events: auto;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rf-radius-sm, 5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.rf-sheet-dropdown li {
    padding: .25rem .75rem;
    white-space: nowrap;
    cursor: pointer;
}

.rf-sheet-dropdown li:hover,
.rf-sheet-dropdown li.rf-aktif {
    background-color: rgba(var(--mud-palette-primary-rgb), .12);
}

.rf-sheet-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.rf-sheet-status .rf-sheet-dirty { color: var(--mud-palette-warning); font-weight: 600; }
.rf-sheet-status .rf-sheet-bad { color: var(--mud-palette-error); font-weight: 600; }

/* ---------- Excel import panel (ImportComp.razor) ----------
   Global rather than scoped: these rules land on MudSimpleTable's own root and cells, which
   CSS isolation cannot reach from the component. */

.rf-import-scroll {
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rf-radius-sm);
}

.rf-import-scroll table {
    margin-bottom: 0;
}

.rf-import-scroll th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-background-gray);
    font-weight: 600;
    white-space: nowrap;
}

/* A header the importer will not recognise — it is carried through the preview so the user can
   see exactly which column is going to be ignored. */
.rf-import-scroll th.rf-import-col-bad {
    color: var(--mud-palette-warning-darken);
    text-decoration: underline dotted;
}

/* Drop zone: the real <input type=file> is laid transparently over the paper so a drop anywhere
   on it registers, while the visible label stays ours (and therefore localized). */
.mud-file-upload-custom-content {
    position: relative;
}

.rf-import-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.rf-import-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.75rem 1rem;
    border-style: dashed !important;
    border-width: 2px !important;
    border-radius: var(--rf-radius);
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
    text-align: center;
}

/* The import popup's action row is styled with .rf-dialog-actions, in the popup dialog
   shell section above. */

/* Value-list column filter (DegerFiltresi), rendered inside MudBlazor's column filter popover. */
.rf-deger-filtre {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem;
    min-width: 260px;
}

.rf-deger-filtre .rf-deger-filtre-liste {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: .25rem 0;
}

.rf-deger-filtre .rf-deger-filtre-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .25rem;
}

/* ---------- Ana Sayfa: tables scroll instead of growing ---------- */

/* These cards have no pager on purpose - the row count grows with usage, so cap the height and
   let the body scroll. The header stays put; it already carries a solid background. */
.mud-simple-table.rf-runs-table {
    max-height: 22rem;
    overflow-y: auto;
}

.mud-simple-table.rf-runs-table table thead tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.mud-data-grid.rf-scroll-grid {
    max-height: 26rem;
    overflow-y: auto;
}

/* ----- Finansal tablolar (FinansTablolari, ButceKarsilastirmaTablosu) ----- */
.fin-arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.fin-arac .fin-butceler { min-width: 260px; max-width: 420px; flex: 0 1 auto; }
.fin-arac .fin-yil { max-width: 110px; flex: 0 0 auto; }
.fin-arac .fin-ikonlar { display: flex; margin-left: auto; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body:has(.fin-sayfa) .mud-appbar,
    body:has(.fin-sayfa) .mud-drawer,
    body:has(.fin-sayfa) .mud-tabs-tabbar,
    .fin-sayfa .no-print { display: none !important; }
    body:has(.fin-sayfa) .mud-main-content { padding: 0 !important; margin: 0 !important; }
    .fin-sayfa * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}