/* Admin-only styling, shipped from this RCL and served at _content/TampaOasis.Admin/admin.css.
   Everything else comes from the shared MudTheme. */

.admin-appbar {
    border-bottom: 1px solid rgba(147, 168, 166, 0.25);
}

.admin-main {
    background-image: linear-gradient(180deg, rgba(53, 196, 181, 0.05), transparent 220px);
}

/* Money must align on the decimal or a column cannot be scanned. Tabular figures, always. */
.figure {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.figure--negative {
    color: var(--mud-palette-error);
}

.figure--total {
    font-weight: 600;
}

/* An eyebrow that says what you're looking at, in the interface's voice. */
.admin-eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.admin-table th {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary) !important;
}

.admin-table td.num,
.admin-table th.num {
    text-align: right;
}

/* Rows that are excluded from the operating view are shown, but visibly demoted — the exclusion is a
   fact the owner should be able to see, not something hidden. */
.admin-table tr.is-excluded td {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* A section heading inside a statement: "Income", "Operating expenses". It divides the table rather than
   labelling a column, so it gets the rule above it and none of the column-header weight. */
.admin-table tr.admin-table__section th {
    padding-top: 1.25rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    text-align: left;
}

.admin-table tr.admin-table__section:first-child th {
    padding-top: 0;
}

.admin-table tr.is-selected td {
    background-color: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

/* Wide enough for "September 2026" and for the longest property name, so the control doesn't resize as
   the selection changes. */
.admin-month-select {
    max-width: 12rem;
}

.admin-scope-select {
    max-width: 14rem;
}

/* The logout form inside the account menu should look like any other menu item. */
.admin-logout-form {
    margin: 0;
    width: 100%;
}

.admin-logout-button {
    all: unset;
    cursor: pointer;
    width: 100%;
    font: inherit;
}

.admin-logout-button:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}