@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/vazirmatn/vazirmatn-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/vazirmatn/vazirmatn-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/vazirmatn/vazirmatn-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --arta-space-1: .25rem;
    --arta-space-2: .5rem;
    --arta-space-3: .75rem;
    --arta-space-4: 1rem;
    --arta-space-6: 1.5rem;
    --arta-space-8: 2rem;
    --arta-radius-sm: 8px;
    --arta-radius-md: 12px;
    --arta-radius-lg: 18px;
    --arta-shadow-soft: 0 12px 32px rgba(21, 55, 51, .06);
}

* { box-sizing: border-box; }
html, body {
    min-height: 100%;
    margin: 0;
    direction: rtl;
    font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
    background: var(--mud-palette-background);
}
body, input:not(.mud-input-root):not(.mud-checkbox-input), button:not(.mud-button-root):not(.mud-picker *), textarea, select { font-family: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    outline-offset: 2px;
}

.arta-shell { min-height: 100vh; }
.arta-appbar {
    padding-inline: 1.25rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent) !important;
    backdrop-filter: blur(12px);
}
.arta-appbar .mud-toolbar {
    width: 100%;
    min-width: 0;
    padding-inline: 0;
}
.arta-brand-image { display: block; width: 32px; height: 32px; flex: 0 0 auto; object-fit: contain; }
.arta-brand-image--drawer { width: 48px; height: 48px; }
.arta-brand-image--auth { width: 64px; height: 64px; }
.arta-logout-form { display: block; width: 100%; margin: 0; }
/* `Color.Secondary` is used throughout the product for muted supporting text, but in MudBlazor it
   resolves to the gold brand accent, which measures 2.76:1 on our surfaces and fails WCAG AA. Muted
   text now uses the theme's text-secondary token; the gold accent stays available for non-text
   emphasis such as chips and avatars. */
.mud-secondary-text,
.mud-typography.mud-secondary-text { color: var(--mud-palette-text-secondary) !important; }

/* MudBlazor marks the current navigation item with `Color.Primary`, a dark green chosen to sit on light
   surfaces. Inside the drawer it lands on the drawer's own dark green and measured 1.45:1 — the one item
   a user needs to find was the least readable thing in the menu. The drawer states "you are here" with
   its brightest text and a heavier weight instead, which also means the state is not carried by colour
   alone. */
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link.active .mud-nav-link-text,
.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: #FFFFFF !important;
    font-weight: 700;
}

/* Jalali dates read left-to-right inside the RTL layout, like the money values already do. */
.app-date { font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; }
.app-date-field { width: 100%; position: relative; }
/* The calendar hangs off the field rather than replacing it, so the typed value stays visible while a
   date is being picked. It outranks the click-outside overlay beneath it. */
.app-date-field__calendar {
    position: absolute;
    z-index: 1401;
    inset-inline-start: 0;
    margin-block-start: 0.25rem;
    overflow: hidden;
    border-radius: var(--mud-default-borderradius);
}
.arta-drawer {
    border: 0 !important;
    box-shadow: -8px 0 28px rgba(9, 47, 43, .12) !important;
}
.arta-main {
    min-height: 100vh;
    background: var(--mud-palette-background);
}
.arta-content { padding-block: 1.75rem 3rem; }
.arta-workspace-dock { width: 100%; max-width: 2560px; margin-inline: auto; padding: 1.25rem 1.5rem 0; }

/* The public home has its own navigation and full-width sections. Keep the signed-in shell intact. */
.arta-shell:has(.marketing-page) .arta-appbar--anonymous { display: none; }
.arta-shell:has(.marketing-page) .arta-main { margin-top: 0 !important; padding-top: 0 !important; }
.arta-shell:has(.marketing-page) .arta-content {
    width: 100%;
    max-width: none;
    padding: 0;
}

.management-dashboard { width: 100%; direction: rtl; }
.dashboard-masthead {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--arta-space-4);
    padding: 1.35rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-divider));
    border-radius: var(--arta-radius-lg);
    background:
        radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--mud-palette-secondary) 13%, transparent), transparent 24rem),
        linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)), var(--mud-palette-surface));
    box-shadow: var(--arta-shadow-soft);
}
.dashboard-masthead::after {
    content: "";
    position: absolute;
    inset-inline-end: -5rem;
    top: -8rem;
    width: 18rem;
    height: 18rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border-radius: 50%;
}
.dashboard-masthead__content { position: relative; z-index: 1; }
.dashboard-masthead__icon { box-shadow: 0 10px 24px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
.workspace-home { width: 100%; display: grid; gap: var(--arta-space-4); }
.workspace-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-divider));
    border-radius: var(--arta-radius-lg);
    background:
        radial-gradient(circle at 5% 50%, color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent), transparent 24rem),
        linear-gradient(145deg, color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)), var(--mud-palette-surface));
    box-shadow: var(--arta-shadow-soft);
}
.workspace-hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -4rem;
    bottom: -9rem;
    width: 22rem;
    height: 22rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    border-radius: 50%;
}
.workspace-hero > * { position: relative; z-index: 1; }
.workspace-hero__grid { align-items: center; }
.workspace-hero__description { max-width: 48rem; }
.workspace-action-card {
    min-height: 112px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-md);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.workspace-action-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-divider));
    box-shadow: var(--arta-shadow-soft);
    transform: translateY(-2px);
}
.workspace-action-card__text { flex: 1; min-width: 0; }
.workspace-module-card {
    height: 100%;
    min-height: 200px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
}
.app-page-header { margin-bottom: var(--arta-space-6); }
.app-page-header .mud-typography-h1 { letter-spacing: -.035em; }
.dashboard-filter-card {
    margin-bottom: var(--arta-space-4);
    padding: 1rem 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--arta-shadow-soft);
}
.dashboard-tabs {
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--arta-shadow-soft);
}
.dashboard-tab-panel { padding: 1.5rem; }
.dashboard-overview { display: grid; gap: var(--arta-space-4); }
.dashboard-primary-kpis { margin-bottom: .25rem; }
.dashboard-primary-kpis .app-kpi-card {
    min-height: 132px;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-divider));
}

.app-kpi-card {
    height: 100%;
    min-height: 118px;
    padding: 1.1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-md);
    box-shadow: var(--arta-shadow-soft);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.app-kpi-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-divider));
    box-shadow: 0 14px 34px rgba(21, 55, 51, .1);
    transform: translateY(-2px);
}
.app-kpi-warning {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, var(--mud-palette-surface));
}
.app-kpi-value {
    overflow-wrap: anywhere;
    margin-top: .15rem !important;
    direction: ltr;
    text-align: right;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
}
.app-kpi-card > .mud-stack > .mud-stack { min-width:0; flex:1; }
.app-import-columns { display:block; max-width:100%; overflow-wrap:anywhere; direction:ltr; text-align:left; }
.app-negative-value { color: var(--mud-palette-error) !important; }
.app-money { display: inline-flex; gap: .35rem; font-variant-numeric: tabular-nums; }
.app-money small { color: var(--mud-palette-text-secondary); }

.app-section-card {
    margin-top: var(--arta-space-4);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-lg);
    box-shadow: var(--arta-shadow-soft);
}
.app-section-card__header {
    padding: var(--arta-space-4) var(--arta-space-6);
    border-bottom: 1px solid var(--mud-palette-divider);
}
/* A card header carries whatever it is given, and some of that is unbreakable: an email address, an
   account code, a document number. One of those wider than a phone pushes the whole page sideways, so
   the header is allowed to break inside a word and the text block is kept from claiming its full
   intrinsic width. */
.app-section-card__header > .mud-stack { min-width: 0; }
.app-section-card__header .mud-typography { overflow-wrap: anywhere; }
.app-section-card__content { padding: 1.25rem; }
.dashboard-overview .app-section-card { margin-top: 0; }
.app-data-table .mud-table-head { background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)); }
.app-data-table .mud-table-cell { text-align: right; font-variant-numeric: tabular-nums; }
.company-role-permission-list,
.company-role-permission-list .mud-checkbox,
.company-role-permission-list .mud-typography {
    min-width: 0;
    max-width: 100%;
}
.company-role-permission-list .mud-checkbox { width: 100%; }
.company-role-permission-list .mud-typography {
    overflow-wrap: anywhere;
    white-space: normal;
}
[data-testid="company-members-table"] .mud-table-cell {
    min-width: 0;
    overflow-wrap: anywhere;
}
.journal-lines-table .mud-table-root {
    width: 100%;
    min-width: 0;
}
.journal-lines-table .mud-table-cell {
    vertical-align: middle;
    white-space: normal;
}
.journal-lines-table .journal-money-cell {
    min-width: 7rem;
    text-align: left;
    direction: ltr;
    white-space: nowrap;
}
.app-state { min-height: 260px; padding: var(--arta-space-8); text-align: center; }
.app-state--compact { min-height: 150px; padding: var(--arta-space-4); }
.app-state-alert { margin-block: var(--arta-space-4); border-radius: var(--arta-radius-md); }
.app-loading-state { padding-block: var(--arta-space-4); }

.arta-company-select .mud-input-control { margin: 0; }
.mud-input, .mud-select, .mud-picker { text-align: right; }
.mud-table-cell { text-align: right; }
.mud-button-root { border-radius: var(--arta-radius-sm); }
.mud-input-outlined-border { border-radius: var(--arta-radius-sm) !important; }

.auth-shell { min-height: calc(100vh - 8rem); display: grid; align-items: center; }
.auth-surface {
    padding: clamp(1.5rem, 5vw, 2.5rem);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-lg);
    box-shadow: var(--arta-shadow-soft);
}
.login-shell { padding-block: clamp(1.25rem, 4vh, 3rem); }
.login-layout {
    width: min(100%, 54rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(17rem, 19rem);
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
.login-surface {
    width: 100%;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%),
        var(--mud-palette-surface));
}
.login-visual {
    position: relative;
    width: min(100%, 18.5rem);
    aspect-ratio: 472 / 1024;
    justify-self: center;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    border-radius: clamp(1.4rem, 3vw, 2.25rem);
    background: #eaf4f8;
    box-shadow: 0 28px 64px rgb(3 43 62 / 18%);
}
.login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 28%, rgb(255 255 255 / 18%) 48%, transparent 68%);
    transform: translateX(-120%);
    animation: login-visual-glint 8s ease-in-out infinite;
}
.login-visual__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 45%;
    will-change: transform;
    animation: login-visual-drift 10s ease-in-out infinite alternate;
}
@keyframes login-visual-drift {
    from { transform: scale(1.006) translate3d(0, -.2%, 0); }
    to { transform: scale(1.025) translate3d(0, .45%, 0); }
}
@keyframes login-visual-glint {
    0%, 38% { transform: translateX(-120%); opacity: 0; }
    48% { opacity: .75; }
    60%, 100% { transform: translateX(120%); opacity: 0; }
}
.auth-form { display: grid; gap: var(--arta-space-2); }
.auth-form label:not(.mud-input-label):not(.mud-checkbox) { margin-top: var(--arta-space-3); font-weight: 600; }
.auth-native-field {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: var(--arta-space-2);
    padding-inline: var(--arta-space-3);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--arta-radius-sm);
}
.auth-native-field:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}
.auth-native-field input:not(.mud-input-root):not(.mud-checkbox-input) {
    width: 100%;
    min-height: 44px;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 0;
    outline: 0;
}
.auth-submit { margin-top: var(--arta-space-6); }
.journal-filter { margin-bottom: var(--arta-space-4); }
.journal-search { flex: 1; }
.journal-totals { margin-top: var(--arta-space-4); }
.journal-readiness-panel { display: grid; gap: var(--arta-space-3); }
.journal-readiness-list { border: 1px solid var(--mud-palette-divider); border-radius: var(--arta-radius-sm); }
.journal-readiness-item {
    width: 100%;
    min-width: 0;
    gap: var(--arta-space-3);
}
.journal-readiness-item .mud-button-root { flex: 0 0 auto; }
.journal-setup-summary {
    width: 100%;
    min-width: 0;
    gap: var(--arta-space-3);
}
.journal-amount-field input:not(.mud-input-root):not(.mud-checkbox-input) {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.master-data-search { max-width: 32rem; margin-bottom: var(--arta-space-4); }
/* UI-06B: shared company/branch/fiscal-year lists, using the approved product palette. */
.arta-master-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}
.arta-master-summary > div {
    min-width: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-md);
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)), var(--mud-palette-surface));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}
.arta-master-summary dt { color: var(--mud-palette-text-secondary); font-size: .82rem; }
.arta-master-summary dd {
    margin: .5rem 0 0;
    color: var(--mud-palette-text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.arta-master-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .875rem;
    padding: 1rem;
    margin-block: 0 1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--arta-radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
}
.arta-master-toolbar .arta-field { display: grid; gap: .4rem; min-width: 0; font-size: .85rem; font-weight: 600; }
.arta-master-toolbar .arta-master-search { flex: 1 1 16rem; }
.arta-master-toolbar :is(input:not(.mud-input-root):not(.mud-checkbox-input), select, button:not(.mud-button-root):not(.mud-picker *)):not(.mud-input-root):not(.mud-button-root):not(.mud-input-control *) {
    box-sizing: border-box;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--arta-radius-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}
.arta-master-toolbar input:not(.mud-input-root):not(.mud-checkbox-input) { width: 100%; }
.arta-master-toolbar button:not(.mud-button-root):not(.mud-picker *) { font-weight: 600; cursor: pointer; }
.arta-master-toolbar button:not(.mud-button-root):not(.mud-picker *)[type="submit"]:not(.mud-button-root) {
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}
.arta-master-toolbar :is(input:not(.mud-input-root):not(.mud-checkbox-input), select, button:not(.mud-button-root):not(.mud-picker *)):not(.mud-input-control *):focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}
.arta-master-toolbar :disabled { opacity: .6; cursor: default; }
.arta-master-count { margin-block: .75rem; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.arta-master-table { border: 1px solid var(--mud-palette-divider); border-radius: var(--arta-radius-md); overflow: hidden; }
.arta-master-table .mud-table-head { background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)); }
.arta-master-table .mud-table-cell { vertical-align: middle; overflow-wrap: anywhere; }
.arta-master-table .mud-table-head .mud-table-cell { color: var(--mud-palette-text-primary); font-weight: 700; }
.arta-master-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.arta-master-actions .mud-button-root { min-height: 40px; }
.arta-master-code { display: inline-block; padding: .25rem .5rem; border-radius: .4rem; background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)); }
@media (max-width: 599.98px) {
    .arta-master-summary { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .arta-master-summary > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; }
    .arta-master-summary dd { margin: 0; font-size: 1rem; }
    .arta-master-toolbar { align-items: stretch; padding: .875rem; }
    .arta-master-toolbar .arta-field { flex: 1 1 100%; width: 100%; }
    .arta-master-toolbar button:not(.mud-button-root):not(.mud-picker *) { flex: 1 1 auto; }
    .arta-master-table .mud-table-cell { min-width: 0; }
    .arta-master-actions .mud-button-root { min-height: 44px; }
}
.master-code {
    font-family: Consolas, "Segoe UI", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}
.account-tree-level-0 { padding-inline-start: 0; }
.account-tree-level-1 { padding-inline-start: var(--arta-space-6); }
.account-tree-level-2 { padding-inline-start: calc(var(--arta-space-6) * 2); }
.arta-account-path { display: block; margin-block-start: .3rem; color: var(--mud-palette-text-secondary); font-size: .78rem; overflow-wrap: anywhere; }
.arta-dialog__checkbox { display: flex; align-items: center; gap: .65rem; min-height: 44px; margin-block: 1rem; cursor: pointer; }
.arta-dialog__checkbox input:not(.mud-input-root):not(.mud-checkbox-input)[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--mud-palette-primary); flex-shrink: 0; }
.arta-chart-template-preview { padding: .8rem 1rem; margin-block: 1rem; border: 1px solid var(--mud-palette-divider); border-radius: var(--arta-radius-md); background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)); }
.arta-chart-template-preview p { margin: .3rem 0; }

@media (max-width: 959.98px) {
    .dashboard-tab-panel { padding: var(--arta-space-4); }
    .app-page-header { align-items: flex-start !important; }
}
@media (max-width: 799.98px) {
    .login-layout { grid-template-columns: minmax(0, 32rem); }
    .login-visual {
        width: 100%;
        height: clamp(15rem, 70vw, 22rem);
        aspect-ratio: auto;
    }
    .login-visual__image { object-position: center 27%; }
}
@media (max-width: 599.98px) {
    .arta-appbar { padding-inline: .5rem; }
    .arta-workspace-dock { padding: .75rem .75rem 0; }
    .arta-content { padding: 1rem .75rem 2rem; }
    .dashboard-masthead { padding: 1rem; }
    .dashboard-masthead__content {
        align-items: flex-start !important;
        flex-direction: column;
    }
    .workspace-hero__actions { justify-content: flex-start !important; }
    .app-page-header { flex-direction: column; }
    /* A header that grew a second action is a header wider than a phone. The actions wrap rather than
       pushing the whole page sideways; found by a test measuring the header's own scroll width. */
    .app-page-header { flex-wrap: wrap; }
    .app-page-header .flex-row { flex-wrap: wrap; }
    .app-page-header .mud-button-root { flex: 0 1 auto; }
    .app-section-card__header { padding: var(--arta-space-4); }
    .journal-filter { align-items: stretch !important; flex-direction: column; }
    .journal-filter .mud-button-root { width: 100%; }
    .journal-readiness-item,
    .journal-setup-summary {
        align-items: stretch !important;
        flex-direction: column !important;
    }
    .journal-readiness-item .mud-button-root,
    .journal-setup-summary .mud-button-root { width: 100%; }
    .journal-reverse-dialog { padding: var(--arta-space-4); }
    .login-shell { padding-block: 1rem 2rem; }
    .login-surface { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Two views of one section, presented as tabs. They are links rather than panels, so the current one is
   marked with aria-current and given a weight and an underline as well as a colour — a tab that was only
   a different colour would say nothing to a screen reader or in a monochrome print. */
.app-admin-tabs {
    display: flex;
    gap: var(--arta-space-2);
    flex-wrap: wrap;
    margin-block: var(--arta-space-3);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.app-admin-tab {
    padding: var(--arta-space-2) var(--arta-space-4);
    border-bottom: 3px solid transparent;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-weight: 500;
}
.app-admin-tab:hover { color: var(--mud-palette-text-primary); }
.app-admin-tab--current {
    color: var(--mud-palette-primary-text-hover, var(--mud-palette-text-primary));
    border-bottom-color: var(--mud-palette-primary);
    font-weight: 700;
}
.app-admin-tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--arta-radius-sm, 4px);
}

/* An address or an invitation link is one long unbroken token. Left alone it pushes a card wider than
   the viewport on a phone, which is the overflow the previous step had to go and find. */
.app-wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.app-invitation-link {
    overflow-wrap: anywhere;
    word-break: break-all;
    padding: var(--arta-space-3);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--arta-radius-sm, 4px);
    background: var(--mud-palette-background-gray);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    direction: ltr;
    text-align: left;
}

/* Product composition uses the application's MudTheme for controls and modal surfaces. */
.app-page-header__actions { flex-wrap: wrap; justify-content: flex-end; }
.app-page-header > .mud-stack:first-child, .app-section-card__header > .mud-stack { min-width: 0; }
.app-master-select { min-width: 9rem; }
.arta-master-toolbar .mud-input-control { margin: 0; }
.arta-master-toolbar .mud-input-control input:not(.mud-input-root):not(.mud-checkbox-input) { padding: 10px 12px; }
.app-file-upload { flex-wrap: wrap; gap: .75rem; margin-block: .75rem; }
.app-file-upload__name { overflow-wrap: anywhere; }
.app-editor-dialog {
    border-radius: var(--arta-radius-lg); overflow: hidden;
}
/* MudDialog inserts focus-trap wrappers, so content is not a direct child of the dialog.
   Keep every outer layer within the same height; only the form body owns scrolling. */
.app-editor-dialog .mud-dialog-content {
    padding: 0; overflow: hidden; min-height: 0;
    max-height: var(--app-dialog-max-height);
}
.app-editor-dialog .arta-dialog.app-editor-dialog__frame {
    --arta-surface: var(--mud-palette-surface); --arta-ink: var(--mud-palette-text-primary);
    --arta-muted: var(--mud-palette-text-secondary); --arta-line: var(--mud-palette-lines-default);
    --arta-border: var(--mud-palette-lines-inputs); --arta-brand: var(--mud-palette-primary);
    --arta-on-brand: var(--mud-palette-primary-text); --arta-danger: var(--mud-palette-error);
    --arta-subtle: var(--mud-palette-background-gray); --arta-focus: var(--mud-palette-primary);
    --arta-danger-soft: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
    --arta-glow: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--arta-ink); background: var(--arta-surface);
}
.app-editor-dialog__frame form {
    display: flex; flex-direction: column; margin: 0; min-height: 0;
    max-height: var(--app-dialog-max-height); overflow: hidden;
}
.app-editor-dialog__frame .arta-dialog__header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; }
.app-editor-dialog__frame .arta-dialog__header h2 { font: inherit; font-size: 1.2rem; font-weight: 700; }
.app-editor-dialog__frame .arta-dialog__body { flex: 1 1 auto; padding: 1.25rem 1.5rem; }
.app-editor-dialog__frame .arta-dialog__footer { padding: 1rem 1.5rem; justify-content: flex-end; }
@media (max-width: 600px) {
    .app-page-header__actions { width: 100%; justify-content: flex-start; }
    .app-editor-dialog__frame .arta-dialog__header, .app-editor-dialog__frame .arta-dialog__body,
    .app-editor-dialog__frame .arta-dialog__footer { padding: 1rem; }
}