/* The `hidden` attribute only hides through the UA sheet's [hidden]{display:none}, whose
   specificity (0,1,0) loses to ANY class rule that sets display — and Blazor's scoped selectors
   (.foo[b-xxxxx]) are (0,2,0), so they always win. DocxFieldBinder hit this in six places:
   .qws-side and .qws-side__body both set display:grid, so "Belgeyi genişlet" left the side
   panels on screen while .is-expanded collapsed the grid to one column (sticky panels stacked
   on the document → the page jumped), and both left/right tab panels rendered at once.
   Restore the attribute's meaning globally rather than patching each call site. */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    background: var(--page-background, #F5F7FA);
    color: var(--ink, #1E293B);
    line-height: 1.45;
}

*, *::before, *::after {
    box-sizing: border-box;
}

::selection {
    background: rgba(22, 199, 252, 0.22);
}

h1:focus {
    outline: none;
}

a {
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
}

button {
    font-family: inherit;
}

/* ---- Auth pages (login / forgot / reset) ---- */
.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base, #00081C);
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    position: relative;
}

.auth-layout::before,
.auth-layout::after {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;
}

.auth-layout::before {
    z-index: -3;
    background:
        radial-gradient(circle at 18% 28%, rgba(10, 132, 241, 0.17), transparent 24%),
        radial-gradient(circle at 82% 72%, rgba(22, 199, 252, 0.12), transparent 26%);
    animation: auth-aurora 16s ease-in-out infinite alternate;
}

.auth-layout::after {
    z-index: -2;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(127, 208, 245, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 208, 245, 0.16) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, black, transparent 72%);
    transform: perspective(480px) rotateX(58deg) translateY(34%);
}

.auth-layout__panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(145deg, rgba(12, 30, 61, 0.94), rgba(3, 15, 38, 0.96));
    border: 1px solid rgba(127, 208, 245, 0.22);
    border-radius: 24px;
    padding: 30px 30px 32px;
    color: var(--text-on-dark, #F4F8FD);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(10, 132, 241, 0.08) inset,
        0 0 48px rgba(10, 132, 241, 0.12);
    backdrop-filter: blur(18px);
}

.auth-layout__panel::before {
    content: "";
    position: absolute;
    inset: 0 15% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    box-shadow: 0 0 16px var(--color-accent);
}

.auth-layout__scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.auth-network {
    width: 100%;
    height: 100%;
    opacity: 0.78;
}

.auth-network__globe {
    transform-origin: 930px 396px;
    animation: auth-globe-breathe 12s ease-in-out infinite alternate;
}

.auth-network__route {
    stroke: var(--color-accent);
    stroke-width: 1.5;
    stroke-opacity: 0.36;
    stroke-dasharray: 2 12;
    animation: auth-route-flow 24s linear infinite;
}

.auth-network__route--sea { stroke: #0a84f1; animation-duration: 30s; }
.auth-network__route--land { stroke: #7fd0f5; animation-duration: 34s; }
.auth-network__route--rail { stroke: #4fa8ff; animation-duration: 26s; }

.auth-network__node { fill: var(--color-accent); filter: url(#routeGlow); }
.auth-network__pulse {
    fill: none;
    stroke: var(--color-accent);
    animation: auth-node-pulse 3.2s ease-out infinite;
}
.auth-network__pulse--late { animation-delay: -1.6s; }
.auth-network__pulse--rail { animation-delay: -0.8s; }

.auth-transport {
    fill: var(--color-accent);
    stroke: #dff8ff;
    stroke-width: 0.7;
    opacity: 0.9;
}

.auth-transport--sea { fill: #0a84f1; }
.auth-transport--land { fill: #7fd0f5; }
.auth-transport--rail { fill: #4fa8ff; }

.auth-transport__engines {
    fill: #001534;
    stroke: rgba(223, 248, 255, 0.95);
    stroke-width: 1;
}

.auth-transport__detail {
    fill: none;
    stroke: rgba(223, 248, 255, 0.82);
    stroke-width: 1;
    stroke-linecap: round;
}

.auth-form__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: -8px auto 12px;
    overflow: hidden;
}

.auth-form__logo .brand-logo {
    display: block;
    width: 100%;
    max-width: 400px;
    height: 128px !important;
    object-fit: cover;
    object-position: center;
    filter:
        contrast(1.08)
        saturate(1.08)
        drop-shadow(0 0 14px rgba(22, 199, 252, 0.2));
}

.auth-form h1 {
    font-size: 1.4rem;
    text-align: center;
    margin: 0 0 4px;
    color: var(--text-on-dark, #F4F8FD);
}

.auth-form__subtitle {
    text-align: center;
    color: var(--muted-on-dark, #9FB0C9);
    margin: 0 0 24px;
    font-size: 0.9rem;
}

.auth-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted-on-dark, #9FB0C9);
    margin-bottom: 6px;
}

.auth-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--surface-2, #0C1E3D);
    border: 1px solid var(--border-dark, #1B2F52);
    border-radius: var(--radius-md, 10px);
    color: var(--text-on-dark, #F4F8FD);
    font-size: 0.95rem;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--color-accent, #16C7FC);
    box-shadow: 0 0 0 3px rgba(22, 199, 252, 0.25);
}

/* EditContext marks a field that failed validation with .invalid; without a rule for it the class
   landed on the input and changed nothing on screen, so a rejected submit looked like a dead
   button. Declared after :focus (equal specificity) so the field stays red while focused too. */
.auth-form input.invalid {
    border-color: var(--error, #EF4444);
}

.auth-form input.invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.auth-form__submit {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: var(--radius-md, 10px);
    background: var(--gradient-brand-strong, linear-gradient(90deg, #0A5CC0 0%, #0A74DA 100%));
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(10, 132, 241, 0.28);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.auth-form__submit:not(:disabled):hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 14px 32px rgba(10, 132, 241, 0.36);
}

.auth-form__submit:not(:disabled):active {
    transform: translateY(0);
}

.auth-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-form__password { position: relative; margin-bottom: 16px; }
.auth-form__password input { padding-inline-end: 44px; margin-bottom: 0; }
.auth-form__password-toggle { position: absolute; inset-inline-end: 8px; inset-block-start: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #0a84f1; cursor: pointer; padding: 7px; line-height: 0; border-radius: 6px; }
.auth-form__password-toggle:hover { color: #006fd6; background: rgba(10, 132, 241, 0.12); }
.auth-form__password-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.auth-form__password-toggle .bi { width: 19px; height: 19px; fill: currentColor; vertical-align: middle; animation: auth-eye-toggle-in 180ms ease-out; transform-origin: center; }
.auth-form label.auth-form__remember { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; cursor: pointer; color: var(--muted-on-dark, #9FB0C9); }
.auth-form label.auth-form__remember input[type="checkbox"] { appearance: auto; width: 16px; height: 16px; flex: 0 0 16px; margin: 0; padding: 0; border-radius: 3px; accent-color: var(--color-accent, #16C7FC); }
.auth-form__caps-warning { color: #fbbf24; font-size: .8rem; margin: -10px 0 12px; }

.auth-form__links {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 0.85rem;
}

.auth-form__error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--error, #EF4444);
    color: #FCA5A5;
    padding: 8px 12px;
    border-radius: var(--radius-md, 10px);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.auth-form__success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid var(--success, #22C55E);
    color: #86EFAC;
    padding: 8px 12px;
    border-radius: var(--radius-md, 10px);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.auth-form__culture {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.auth-form__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--muted-on-dark, #9FB0C9);
    opacity: .7;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.auth-form__divider::before,
.auth-form__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-dark, #1B2F52);
}

.auth-form__portal-link {
    width: 100%;
    box-sizing: border-box;
    padding: 11px;
    border-radius: var(--radius-md, 10px);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-dark, #1B2F52);
    color: var(--text-on-dark, #F4F8FD);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.auth-form__portal-link:hover { border-color: rgba(127, 208, 245, .4); background: rgba(255, 255, 255, .05); }
.auth-form__portal-link svg { width: 16px; height: 16px; color: var(--color-accent, #16C7FC); flex: 0 0 auto; }

.auth-form__footer { margin-top: 22px; text-align: center; }
.auth-form__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--success, #22C55E);
    font-size: .76rem;
}
.auth-form__trust svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ---- Login split layout (marketing scene + form, login page only) ---- */
.login-layout {
    min-height: 100vh;
    display: flex;
    background: var(--bg-base, #00081C);
    box-sizing: border-box;
}

.login-layout__frame {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    background: var(--bg-base, #00081C);
}

.login-layout__scene {
    position: relative;
    overflow: hidden;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-scene__top, .login-scene__mid, .login-scene__bottom { position: relative; z-index: 1; }

/* The wordmark ships with a transparent background, so the old plate treatment (radius + a 1px
   ring) would have outlined an empty box around it. drop-shadow follows the artwork's own alpha
   and keeps the same lift and cyan halo. */
.login-scene__top .brand-logo,
.login-layout__panel-brand .brand-logo {
    display: block;
    width: auto;
    filter:
        drop-shadow(0 10px 24px rgba(0, 7, 22, .55))
        drop-shadow(0 0 18px rgba(22, 199, 252, .18));
}

.login-scene__mid { margin-block: auto; max-width: 480px; }

.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent, #16C7FC);
    background: rgba(22, 199, 252, .1);
    border: 1px solid rgba(22, 199, 252, .28);
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 20px;
}
.login-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent, #16C7FC);
    box-shadow: 0 0 8px var(--color-accent, #16C7FC);
}

.login-headline {
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 0 0 16px;
    color: var(--text-on-dark, #F4F8FD);
    text-wrap: balance;
}
.login-headline em {
    font-style: normal;
    display: block;
    background: var(--gradient-brand, linear-gradient(90deg, #0A84F1 0%, #16C7FC 100%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-scene__sub { color: var(--muted-on-dark, #9FB0C9); font-size: .96rem; max-width: 400px; margin: 0 0 26px; }

.login-modes { display: flex; flex-wrap: wrap; gap: 10px; }
.login-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border-dark, #1B2F52);
    font-size: .82rem;
    color: var(--text-on-dark, #F4F8FD);
}
.login-mode-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent, #16C7FC);
    box-shadow: 0 0 6px var(--color-accent, #16C7FC);
    font-style: normal;
}

.login-scene__bottom {
    padding-top: 22px;
    border-top: 1px solid rgba(127, 208, 245, .14);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.login-feature { display: flex; align-items: flex-start; gap: 10px; }
.login-feature__icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(22, 199, 252, .1);
    border: 1px solid rgba(127, 208, 245, .22);
    display: grid;
    place-items: center;
    color: var(--color-accent, #16C7FC);
}
.login-feature__icon svg { width: 16px; height: 16px; }
.login-feature__title { font-size: .82rem; font-weight: 600; color: var(--text-on-dark, #F4F8FD); margin: 0 0 2px; }
.login-feature__sub { font-size: .74rem; color: var(--muted-on-dark, #9FB0C9); opacity: .8; margin: 0; }

.login-layout__panel {
    position: relative;
    z-index: 2;
    background: linear-gradient(165deg, rgba(12, 30, 61, .94), rgba(3, 15, 38, .96));
    border-inline-start: 1px solid rgba(127, 208, 245, .14);
    padding: 34px 42px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-layout__panel::before {
    content: "";
    position: absolute;
    inset: 0 12% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    box-shadow: 0 0 16px var(--color-accent);
}
.login-layout__panel .auth-form { max-width: 340px; width: 100%; margin: 0 auto; }

.login-layout__panel-brand { display: none; }

@media (max-width: 920px) {
    .login-layout__frame { grid-template-columns: 1fr; }
    .login-layout__scene { display: none; }
    .login-layout__panel { border-inline-start: none; }
    .login-layout__panel-brand { display: flex; justify-content: center; margin: 0 auto 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-headline em { background: none; -webkit-text-fill-color: currentColor; color: var(--color-accent, #16C7FC); }
}

/* ---- Post-login shell ---- */
.shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--page-background, #F5F7FA);
}

.shell__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shell__header {
    height: var(--header-height, 64px);
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    background: var(--header-background, rgba(255, 255, 255, 0.88));
    border-bottom: 1px solid var(--gray-200, #E8EDF3);
    color: var(--ink, #1E293B);
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 20;
}

.shell__context {
    display: grid;
    gap: 1px;
}

.shell__context-kicker {
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.shell__context-title {
    color: var(--ink-strong, #0F1F35);
    font-size: 0.92rem;
    font-weight: 700;
}

.shell__header-spacer {
    flex: 1;
}

.shell__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #15803d;
    font-size: 0.76rem;
    font-weight: 700;
}

.shell__live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success, #22C55E);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.shell-user-menu {
    position: relative;
    flex: none;
}

.shell-user-menu__trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--ink, #1E293B);
    cursor: pointer;
    list-style: none;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.shell-user-menu__trigger::-webkit-details-marker {
    display: none;
}

.shell-user-menu__trigger:hover,
.shell-user-menu[open] .shell-user-menu__trigger {
    background: var(--surface-light, #fff);
    border-color: var(--gray-200, #E8EDF3);
    box-shadow: 0 6px 18px rgba(15, 31, 53, 0.08);
}

.shell-user-menu__trigger:focus-visible {
    outline: 2px solid var(--color-accent, #16C7FC);
    outline-offset: 2px;
}

.shell-user-menu__avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary-dark, #023581), var(--color-primary-strong, #0A64C8));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 5px 14px rgba(10, 132, 241, 0.22);
}

.shell-user-menu__identity {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.shell-user-menu__identity strong {
    max-width: 180px;
    overflow: hidden;
    color: var(--ink-strong, #0F1F35);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-user-menu__identity small {
    margin-top: 3px;
    color: var(--slate, #64748B);
    font-size: 0.67rem;
}

.shell-user-menu__chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.shell-user-menu[open] .shell-user-menu__chevron {
    transform: rotate(180deg);
}

.shell-user-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    width: 286px;
    padding: 8px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 31, 53, 0.18);
}

.shell-user-menu__account {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 8px 9px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--gray-200, #E8EDF3);
}

.shell-user-menu__avatar--large {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
    font-size: 0.78rem;
}

.shell-user-menu__account > span:last-child {
    display: grid;
    min-width: 0;
}

.shell-user-menu__account strong,
.shell-user-menu__account small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-user-menu__account strong {
    color: var(--ink-strong, #0F1F35);
    font-size: 0.86rem;
}

.shell-user-menu__account small {
    margin-top: 3px;
    color: var(--slate, #64748B);
    font-size: 0.74rem;
}

/* Lisans özeti: başlık + durum rozeti, altında etiket/değer satırları. */
.shell-user-menu__license {
    display: grid;
    gap: 8px;
    padding: 4px 9px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--gray-200, #E8EDF3);
}

.shell-user-menu__license-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.shell-user-menu__license-head strong {
    color: var(--ink-strong, #0F1F35);
    font-size: 0.8rem;
}

.shell-user-menu__license-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.shell-user-menu__license-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.shell-user-menu__license-status--on {
    background: var(--success-soft, #ECFDF5);
    color: var(--success-soft-strong, #047857);
}

.shell-user-menu__license-status--off {
    background: var(--error-soft, #FEF2F2);
    color: var(--error-soft-strong, #B91C1C);
}

.shell-user-menu__license-facts {
    display: grid;
    gap: 6px;
    margin: 0;
}

.shell-user-menu__license-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.74rem;
}

.shell-user-menu__license-fact--stacked {
    display: grid;
    gap: 5px;
}

.shell-user-menu__license-fact dt {
    color: var(--slate, #64748B);
}

.shell-user-menu__license-fact dd {
    margin: 0;
    color: var(--ink, #1E293B);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.shell-user-menu__license-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.shell-user-menu__license-modules span {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--gray-100, #EEF3F8);
    color: var(--ink, #1E293B);
    font-size: 0.7rem;
    font-weight: 600;
}

.shell-user-menu__license-fact dd.shell-user-menu__license-expired {
    color: var(--error-soft-strong, #B91C1C);
}

.shell-user-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink, #1E293B);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.shell-user-menu__item:hover,
.shell-user-menu__item:focus-visible {
    background: rgba(10, 132, 241, 0.09);
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    outline: none;
}

.shell-user-menu__item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shell-user-menu__item--logout:hover,
.shell-user-menu__item--logout:focus-visible {
    background: rgba(239, 68, 68, 0.09);
    color: var(--error, #EF4444);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 4px 7px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: 999px;
    background: var(--surface-light, #fff);
    color: var(--slate, #64748B);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.theme-toggle:hover {
    border-color: rgba(10, 132, 241, 0.5);
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    box-shadow: 0 5px 16px rgba(10, 132, 241, 0.12);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--color-accent, #16C7FC);
    outline-offset: 2px;
}

.theme-toggle__icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle__track {
    width: 30px;
    height: 17px;
    padding: 2px;
    border-radius: 999px;
    background: var(--gray-200, #E8EDF3);
    transition: background 180ms ease;
}

.theme-toggle__thumb {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 31, 53, 0.28);
    transition: transform 180ms ease;
}

:root[data-theme="dark"] .theme-toggle {
    color: var(--color-cyan-light, #7FD0F5);
}

:root[data-theme="dark"] .theme-toggle__track {
    background: var(--color-primary, #0A84F1);
}

:root[data-theme="dark"] .theme-toggle__thumb {
    transform: translateX(13px);
}

:root[data-theme="dark"] .shell__live {
    color: #4ADE80;
}

.shell__content {
    flex: 1;
    overflow-y: auto;
    padding: 28px clamp(20px, 2.6vw, 44px) 48px;
    background:
        radial-gradient(circle at 96% 2%, rgba(22, 199, 252, 0.07), transparent 23rem),
        linear-gradient(180deg, var(--content-background-top, #F8FAFC) 0%, var(--page-background, #F5F7FA) 100%);
}

.culture-switcher {
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    padding: 4px 8px;
}

/* ---- Shared authenticated workspace language ---- */
/* Sayfalar mevcut genişliğin tamamını kullanır. Önceden 1680px'te sınırlanıp ortalanıyordu; geniş
   ekranlarda bu, sağ-sol boşluk bırakırken veri yoğun gridleri gereksiz yere yatay kaydırmaya
   zorluyordu (kullanıcı kararı 2026-09-03: tüm sayfalarda aynı düzen). Sınır yeniden istenirse
   burada max-width ile geri getirilebilir; --content-max-width jetonu bu yüzden kaldırıldı. */
.shell__content > * {
    width: 100%;
}

.shell__content h1 {
    color: var(--ink-strong, #0F1F35);
    letter-spacing: -0.025em;
}

.shell__content input,
.shell__content select,
.shell__content textarea {
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.shell__content textarea {
    resize: vertical;
}

.shell__content input:focus,
.shell__content select:focus,
.shell__content textarea:focus {
    outline: none;
    border-color: var(--color-primary, #0A84F1);
    box-shadow: 0 0 0 3px rgba(10, 132, 241, 0.12);
}

.shell__content button,
.shell__content .module-link {
    min-height: 38px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.shell__content button:not(:disabled):hover,
.shell__content .module-link:hover {
    border-color: rgba(10, 132, 241, 0.45);
    box-shadow: 0 7px 18px rgba(15, 31, 53, 0.08);
    transform: translateY(-1px);
}

.shell__content button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.shell__content button.primary,
.shell__content .primary,
.shell__content .entity-list__btn--primary,
.shell__content .crud-modal__btn--primary {
    background: linear-gradient(135deg, var(--color-primary-dark, #023581), var(--color-primary-strong, #0A64C8));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 9px 22px rgba(10, 132, 241, 0.20);
}

.module-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.module-heading h1 {
    margin: 3px 0 5px;
    font-size: clamp(1.55rem, 2.1vw, 2.05rem);
}

.module-heading p {
    margin: 0;
    color: var(--slate, #64748B);
    max-width: 720px;
}

.module-eyebrow {
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.module-panel {
    background: var(--surface-card, rgba(255, 255, 255, 0.96));
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm);
}

/* Shared form-row layout classes. Several pages (ChartOfAccounts, Invoices, Payments,
   PostingProfiles, Journals) reuse these class names; they must live here rather than in a
   page's own .razor.css, because Blazor CSS isolation scopes a page's rules to that page's own
   markup and never shares them with a sibling component. */
.record-line-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.record-line-form > button {
    flex: 0 0 auto;
    align-self: flex-end;
}

.record-line-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.record-line-row > button {
    flex: 0 0 auto;
}

/* .drawer-panel__body/.crud-modal stretch every text input/select to 100% width for the common
   case of one field per line; inside a form row that rule would force each field onto its own
   line again, so it is neutralized here for direct children of a form-row. */
.drawer-panel__body .record-line-form > input[type="text"],
.drawer-panel__body .record-line-form > input[type="email"],
.drawer-panel__body .record-line-form > select,
.drawer-panel__body .record-line-row > input[type="text"],
.drawer-panel__body .record-line-row > input[type="email"],
.drawer-panel__body .record-line-row > select,
.crud-modal .record-line-form > input[type="text"],
.crud-modal .record-line-form > input[type="email"],
.crud-modal .record-line-form > select,
.crud-modal .record-line-row > input[type="text"],
.crud-modal .record-line-row > input[type="email"],
.crud-modal .record-line-row > select {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.field-hint {
    color: var(--slate, #4A5A70);
    font-size: 0.78rem;
    line-height: 1.4;
}

.record-lines {
    table-layout: auto;
}

.record-lines th,
.record-lines td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.record-lines th {
    white-space: nowrap;
}

.record-lines td:last-child:has(button) {
    width: 1%;
    white-space: nowrap;
}

.record-lines td:last-child button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-inline: clamp(0.5rem, 1.2vw, 0.9rem);
    white-space: nowrap;
    overflow-wrap: normal;
}

.record-lines td:last-child button + button {
    margin-inline-start: 0.35rem;
}

/* GM-7 kapanış (B-16): geniş tablolar dar ekranda KENDİ İÇİNDE kayar; kenardaki gölge "devamı var" ipucudur (kaydırma ucuna varınca kaybolur).
   Zemin rengi kaplama katmanlarının rengidir: .module-panel / çekmece yüzeyiyle aynı değişkeni kullanır. */
.table-scroll {
    --table-scroll-bg: var(--surface-card, #fff);
    --table-scroll-shadow: rgba(15, 23, 42, .28);
    max-width: 100%;
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--table-scroll-bg) 30%, transparent) 0 0 / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--table-scroll-bg) 30%, transparent) 100% 0 / 2rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--table-scroll-shadow), transparent) 0 0 / .8rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--table-scroll-shadow), transparent) 100% 0 / .8rem 100% no-repeat scroll;
}

html[data-theme="dark"] .table-scroll { --table-scroll-shadow: rgba(147, 197, 253, .45); }
/* Panel, içindeki kaydırmalı tabloyu kabul edebilsin diye daralabilir olmalı (grid öğesi varsayılanı min-width:auto içeriği kadar şişirirdi). */
.module-panel:has(> .table-scroll) { min-width: 0; max-width: 100%; }
/* ADR-324 — örnek kalem eşlemesi uyarısı (eşleme + bilanço + gelir tablosu): module-panel kendi içinde dolgu vermez. */
.fs-example-note { padding: 0.75rem 1rem; }
.fs-example-note a { margin-left: 0.5rem; }
.fs-bulk { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; padding: 0.75rem 1rem; }
.fs-bulk__scope { display: grid; gap: 0.25rem; min-width: 12rem; }
.fs-bulk .field-error { flex-basis: 100%; margin: 0; }

/* Fiş detayı çekmecesi: etiket/değer çiftleri iki sütun, dar ekranda tek sütun. */
.record-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 1rem; }
.record-summary dt { color: var(--slate, #64748B); font-size: .74rem; font-weight: 700; }
.record-summary dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .record-summary { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .record-summary dd { margin-bottom: .45rem; }
}

/* GM-7 kapanış: fiş satırı ızgarası (çekmece dar olduğu için iki sütun; hesap, açıklama ve düğmeler tam genişlik). */
.journal-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .65rem; padding: .7rem 0; border-bottom: 1px solid var(--gray-200, #E8EDF3); }
.journal-line > .journal-line__wide { grid-column: 1 / -1; }
.journal-line__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.journal-line .record-line-row { margin-bottom: 0; }
/* Çekmece, etiketleri blok ve girdileri sabit genişlikte basar; ızgara hücresi etiketi üstte, girdiyi hücre genişliğinde ister. */
.journal-line > label.report-field { display: grid; }
.journal-line > label.report-field input { width: 100%; box-sizing: border-box; }

.status-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--gray-100, #EEF3F8);
    color: var(--slate, #64748B);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.status-pill--blue { background: #dbeafe; color: #1d4ed8; }
.status-pill--cyan { background: #cffafe; color: #0e7490; }
.status-pill--green { background: #dcfce7; color: #15803d; }
/* FAZ H0 — ölçülen kontrast 4,42:1 idi ve AA eşiğinin (4,5) hemen altında kalıyordu; rozet metinleri
   .7rem civarında olduğu için "büyük metin" istisnası da geçerli değil. #96590a ile 5,06:1.
   Koyu tema karşılığı (aşağıda, rgba zemin üzerinde 8,57:1) değişmedi. */
.status-pill--amber { background: #fef3c7; color: #96590a; }
.status-pill--red { background: #fee2e2; color: #b91c1c; }
.status-pill--slate { background: #e2e8f0; color: #475569; }

.empty-state {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 180px;
    padding: 28px;
    text-align: center;
    color: var(--slate, #64748B);
}

.empty-state strong {
    color: var(--ink, #1E293B);
    font-size: 1rem;
}

/* ---- Finance module (shared across /finance and all /finance/* sub-pages) ---- */
.finance-page { display: grid; gap: 16px; }
.finance-page h1, .finance-page h2 { margin: 0; }
.filters, .kpis, .charge-form, .report-grid { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.filters { display: grid; grid-template-columns: minmax(160px, .75fr) repeat(3, minmax(150px, 1fr)) auto; padding: 16px 18px; }
.filters > div h2 { margin: 2px 0; color: var(--ink-strong); font-size: 1rem; }
.filters label { display: grid; gap: .25rem; color: var(--slate); font-size: .76rem; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 12px; }
.kpis article { display: grid; gap: .35rem; padding: 16px 18px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.kpis span { color: var(--slate); font-size: .76rem; font-weight: 700; }
.kpis strong { color: var(--ink-strong); font-size: 1.35rem; }
.panel { overflow: auto; padding: 18px 20px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel h2 { margin-bottom: .75rem; color: var(--ink-strong); font-size: 1.02rem; }
.charge-form { margin: .75rem 0; }
.finance-page button.danger { background: #991b1b; color: #fff; }
.finance-page table { width: 100%; border-collapse: collapse; }
.finance-page th, .finance-page td { text-align: start; padding: .7rem .8rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.finance-page th { background: var(--gray-50); color: var(--slate); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.finance-page td { font-size: .8rem; }
.positive { color: #15803d !important; }
.negative { color: #b91c1c !important; }
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.report-grid p { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--gray-200); padding: .55rem 0; margin: 0; }
.report-grid b { font-size: .78rem; }
.report-grid span { color: var(--slate); font-size: .72rem; }
.message { padding: .75rem 1rem; border: 1px solid #bae6fd; border-radius: var(--radius-md); background: #e0f2fe; color: #075985; }

@media (max-width: 1100px) {
    .filters { grid-template-columns: 1fr 1fr; }
    .filters > div { grid-column: 1 / -1; }
    .kpis, .report-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .filters, .kpis, .report-grid { grid-template-columns: 1fr; }
    .filters > div { grid-column: auto; }
    .filters button { width: 100%; }
}

@media (max-width: 900px) {
    .shell__header { padding-inline: 18px; }
    .shell__context, .shell__live { display: none; }
    .shell__content { padding: 22px 18px 40px; }
}

@media (max-width: 640px) {
    .shell-user-menu__identity { display: none; }
    .shell__header { gap: 9px; }
    .module-heading { align-items: stretch; flex-direction: column; }
    .module-heading > button, .module-heading > a { width: 100%; }
}

@keyframes auth-aurora {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

@keyframes auth-globe-breathe {
    from { transform: scale(0.985); opacity: 0.82; }
    to { transform: scale(1.015); opacity: 1; }
}

@keyframes auth-route-flow {
    to { stroke-dashoffset: -140; }
}

@keyframes auth-node-pulse {
    from { r: 5px; opacity: 0.9; }
    to { r: 24px; opacity: 0; }
}

@keyframes auth-eye-toggle-in {
    from { opacity: 0; transform: scale(.72) rotate(-12deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@media (max-width: 640px) {
    .auth-layout { padding: 16px; }
    .auth-layout__panel { padding: 26px 22px 28px; border-radius: 20px; }
    .auth-network { opacity: 0.34; transform: translateX(-18%); width: 138%; }
    .auth-form__logo .brand-logo { height: 112px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-layout::before,
    .auth-network__globe,
    .auth-network__route,
    .auth-network__pulse { animation: none; }
    .auth-transport { display: none; }
    .auth-form__password-toggle .bi { animation: none; }
}

/* ---- Delayed application loading feedback ---- */
.app-loading {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    isolation: isolate;
}

.app-loading > * {
    position: relative;
    z-index: 2;
}

.app-loading::before,
.app-loading::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.app-loading--navigation {
    color: var(--text-on-dark, #F4F8FD);
    background:
        radial-gradient(circle at 50% 42%, rgba(10, 132, 241, .18), transparent 28rem),
        rgba(0, 8, 28, .97);
}

.app-loading--navigation::before {
    inset: -32%;
    background:
        radial-gradient(circle at 22% 35%, rgba(10, 132, 241, .23), transparent 22%),
        radial-gradient(circle at 78% 62%, rgba(22, 199, 252, .16), transparent 24%),
        radial-gradient(circle at 54% 18%, rgba(1, 42, 94, .5), transparent 27%);
    filter: blur(12px);
    animation: loading-aurora 9s ease-in-out infinite alternate;
}

.app-loading--navigation::after {
    inset: 28% -18% -46%;
    opacity: .28;
    background-image:
        linear-gradient(rgba(127, 208, 245, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 208, 245, .18) 1px, transparent 1px),
        radial-gradient(circle, rgba(22, 199, 252, .7) 1px, transparent 1.8px);
    background-size: 68px 68px, 68px 68px, 136px 136px;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 72%, transparent);
    transform: perspective(720px) rotateX(62deg) translateY(8%);
    transform-origin: center top;
    animation: loading-grid-drift 7s linear infinite;
}

.app-loading__navigation-card {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(92vw, 540px);
    min-height: 330px;
    padding: 28px 34px 32px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(127, 208, 245, .18);
    border-radius: 28px;
    background: rgba(3, 16, 42, .76);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .04);
}

.app-loading__navigation-card > strong {
    margin-top: -4px;
    font-size: 1rem;
    letter-spacing: .01em;
}

.app-loading__navigation-card > span {
    margin-top: 5px;
    color: var(--muted-on-dark, #9FB0C9);
    font-size: .82rem;
}

.app-loading__logo {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.app-loading__logo .brand-logo {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.app-loading__logo--large {
    width: min(100%, 400px);
    aspect-ratio: 3 / 1;
}

.app-loading__logo--large .brand-logo {
    height: 100% !important;
}

.app-loading__orbit {
    position: absolute;
    top: 48px;
    left: 50%;
    width: 230px;
    height: 150px;
    transform: translateX(-50%);
    border: 1px solid rgba(22, 199, 252, .12);
    border-radius: 50%;
    animation: loading-orbit 5s linear infinite;
}

.app-loading__orbit i {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent, #16C7FC);
    box-shadow: 0 0 14px var(--color-accent, #16C7FC);
}

.app-loading__orbit i:nth-child(1) { top: 6px; left: 58px; }
.app-loading__orbit i:nth-child(2) { right: 12px; bottom: 31px; }
.app-loading__orbit i:nth-child(3) { left: 13px; bottom: 32px; opacity: .55; }

.app-loading__route {
    width: min(100%, 320px);
    height: 2px;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(127, 208, 245, .14);
}

.app-loading__route i {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-brand, linear-gradient(90deg, #0A84F1, #16C7FC));
    box-shadow: 0 0 14px rgba(22, 199, 252, .75);
    animation: loading-route 1.15s ease-in-out infinite;
}

.app-loading--operation {
    background: rgba(241, 246, 252, .58);
    backdrop-filter: blur(3px) saturate(.86);
}

.app-loading--operation::before {
    inset: -24%;
    opacity: .72;
    background:
        radial-gradient(circle at 24% 42%, rgba(10, 132, 241, .15), transparent 21%),
        radial-gradient(circle at 78% 58%, rgba(22, 199, 252, .13), transparent 22%);
    animation: loading-operation-glow 4.2s ease-in-out infinite alternate;
}

.app-loading--operation::after {
    inset: 0;
    opacity: .6;
    background: linear-gradient(112deg, transparent 35%, rgba(255, 255, 255, .48) 48%, rgba(22, 199, 252, .08) 52%, transparent 65%);
    transform: translateX(-120%);
    animation: loading-soft-scan 3.8s ease-in-out infinite;
}

.app-loading__operation-card {
    display: flex;
    align-items: center;
    gap: 15px;
    width: min(92vw, 520px);
    min-height: 102px;
    padding: 16px 18px;
    border: 1px solid rgba(10, 132, 241, .22);
    border-radius: 20px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 22px 65px rgba(15, 31, 53, .18), inset 0 1px rgba(255, 255, 255, .8);
}

.app-loading__operation-card > div:nth-child(2) {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.app-loading__operation-card strong {
    color: var(--ink-strong, #0F1F35);
    font-size: .95rem;
}

.app-loading__operation-card span {
    color: var(--slate, #64748B);
    font-size: .78rem;
}

.app-loading__operation-mark {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 15px;
    background: linear-gradient(145deg, #023581, #0A84F1);
    box-shadow: 0 9px 24px rgba(10, 132, 241, .28);
}

.app-loading__operation-mark i {
    position: absolute;
    top: 21px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: loading-dot 1.1s ease-in-out infinite;
}

.app-loading__operation-mark i:nth-child(1) { left: 10px; }
.app-loading__operation-mark i:nth-child(2) { left: 21px; animation-delay: .14s; }
.app-loading__operation-mark i:nth-child(3) { left: 32px; animation-delay: .28s; }

.app-loading__logo--compact {
    width: 112px;
    aspect-ratio: 1000 / 197;
    flex: 0 0 112px;
    border-radius: 12px;
    background: #00081c;
}

.app-loading__logo--compact .brand-logo {
    height: 100% !important;
}

@keyframes loading-orbit { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes loading-route { from { transform: translateX(-105%); } to { transform: translateX(265%); } }
@keyframes loading-dot { 0%, 55%, 100% { transform: translateY(0); opacity: .48; } 28% { transform: translateY(-5px); opacity: 1; } }
@keyframes loading-aurora { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes loading-grid-drift { to { background-position: 68px 68px, 68px 68px, 136px 136px; } }
@keyframes loading-operation-glow { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, -1%, 0) scale(1.06); } }
@keyframes loading-soft-scan { 0%, 18% { transform: translateX(-120%); } 68%, 100% { transform: translateX(120%); } }

@media (max-width: 560px) {
    .app-loading__operation-card { align-items: flex-start; }
    .app-loading__logo--compact { display: none; }
    .app-loading__logo--large { width: min(100%, 330px); }
    .app-loading__navigation-card { min-height: 290px; padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading--navigation::before,
    .app-loading--navigation::after,
    .app-loading--operation::before,
    .app-loading--operation::after,
    .app-loading__orbit,
    .app-loading__route i,
    .app-loading__operation-mark i { animation: none; }
    .app-loading__route i { width: 70%; }
    .app-loading__operation-mark i { opacity: .8; }
}

/* ---- Framework hooks ---- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #B91C1C;
    padding: 1rem;
    color: white;
    border-radius: var(--radius-md, 10px);
}

.blazor-error-boundary::after {
    content: "Beklenmeyen bir hata oluştu.";
}

.validation-message {
    color: var(--error, #EF4444);
    font-size: 0.8rem;
}

/* ---- Settings / Organizations pages ---- */
.settings-section {
    background: var(--surface-light, #fff);
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-lg, 16px);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}

.settings-section h2 {
    font-size: 1rem;
    margin: 0;
    color: var(--ink-strong, #0F1F35);
}

.settings-page { display: grid; gap: 16px; }

/* ADR-132 -- ayar sayfalarinin ic menusu (SystemSettingsLayout) kaldirildi; sectionlari saran tek
   grid cocugu artik bu. min-width:0, grid cocugunun min-content genisligine sisip yatay tasma
   yapmasini engeller -- kaldirilan .system-settings-layout__content'in de tek isi buydu. Bolumler
   arasi bosluk .settings-section--spaced'in margin'inden gelir, o yuzden burada gap yok. */
.settings-stack { min-width: 0; }
.settings-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.settings-section__head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-200); }
.settings-section__head > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--surface-tinted, #EAF4FF); color: var(--color-primary-dark); font-size: .72rem; font-weight: 900; }
.settings-section__head p { margin: 2px 0 0; color: var(--slate); font-size: .72rem; }

.settings-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.settings-row label {
    width: auto;
    font-size: 0.85rem;
    color: var(--ink, #1E293B);
}

.settings-row input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
}

.settings-row input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--color-primary); }
.settings-secondary-action { width: 100%; margin-top: 6px; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; }
.settings-actions span { color: var(--slate); font-size: .78rem; }
.settings-actions button { min-width: 170px; }

.settings-banner {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-md, 10px);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.settings-banner--success {
    background: rgba(34, 197, 94, 0.12);
    color: #15803D;
}

.settings-banner--error {
    background: rgba(239, 68, 68, 0.12);
    color: #B91C1C;
}

.settings-banner--info {
    background: rgba(10, 132, 241, 0.1);
    color: var(--color-primary-dark, #023581);
}

.settings-banner--warning {
    background: #fef3c7;
    color: #a16207;
}

@media (max-width: 1000px) {
    .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .settings-row { grid-template-columns: 1fr; gap: 5px; }
    .settings-actions { align-items: stretch; flex-direction: column; }
    .settings-actions button { width: 100%; }
}

.org-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-light, #fff);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}

.org-table th, .org-table td {
    text-align: start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-200, #E8EDF3);
    font-size: 0.9rem;
}

.org-table th {
    color: var(--slate, #64748B);
    font-weight: 600;
    background: var(--gray-50, #F5F7FA);
}

/* ---- Master-data create/edit modal (Departments/Roles/Users) ---- */
.crud-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 28, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.crud-modal {
    background: var(--surface-light, #fff);
    border-radius: var(--radius-lg, 16px);
    padding: 24px 28px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

.crud-modal h2 {
    margin: 0 0 16px;
    font-size: 1.1rem;
    color: var(--ink, #1E293B);
}

.crud-modal label {
    display: block;
    font-size: 0.85rem;
    color: var(--slate, #64748B);
    margin: 12px 0 4px;
}

.crud-modal input[type="text"],
.crud-modal input[type="email"],
.crud-modal select,
.crud-modal textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    font-size: 0.9rem;
}

.crud-modal textarea {
    display: block;
    resize: vertical;
    min-height: 80px;
    font: inherit;
}

.crud-modal select[multiple] {
    min-height: 100px;
}

/* ADR-195: kilitli alanın nedenini söyleyen kısa açıklama (ör. hazır değerin kodu). */
.crud-modal__hint {
    display: block;
    color: var(--text-muted, #94A3B8);
    font-size: 0.8rem;
    margin-top: 4px;
}

.crud-modal__error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error, #EF4444);
    color: var(--error, #EF4444);
    padding: 8px 12px;
    border-radius: var(--radius-md, 10px);
    font-size: 0.85rem;
    margin-top: 12px;
}

.crud-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.crud-modal__btn {
    padding: 8px 16px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--gray-200, #E8EDF3);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    cursor: pointer;
    font-size: 0.9rem;
}

.crud-modal__btn--primary {
    background: var(--gradient-brand-strong, linear-gradient(90deg, #0A5CC0 0%, #0A74DA 100%));
    color: #fff;
    border: none;
    font-weight: 600;
}

/* FAZ 5 güvenlik düzeltmesi — sertifikasyon onayını iptal etme eylemi (Operations.razor) için. */
.crud-modal__btn--danger {
    background: #991b1b;
    color: #fff;
    border: none;
    font-weight: 600;
}

/* ---- Shared: slide-over drawer (Overlay/Drawer.razor) — same backdrop/action styling as crud-modal, panel slides in from the right instead of centering ---- */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 28, 0.45);
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
}

.drawer-panel {
    background: var(--surface-light, #fff);
    height: 100%;
    width: 100%;
    max-width: 480px;
    overflow-y: auto;
    padding: 24px 28px;
    box-shadow: -8px 0 24px rgba(0, 8, 28, 0.12);
}

.drawer-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.drawer-panel__header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink, #1E293B);
}

.drawer-panel__close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--slate, #64748B);
    line-height: 1;
    padding: 4px;
}

/* GM-6 — kural ızgarası (Postalama Profilleri çekmecesi) 480 px'e sığmaz; yalnız onu içeren panel genişler. */
.drawer-panel:has(.rule-grid) { max-width: 780px; }

.drawer-panel__body label {
    display: block;
    font-size: 0.85rem;
    color: var(--slate, #64748B);
    margin: 12px 0 4px;
}

.drawer-panel__body input[type="text"],
.drawer-panel__body input[type="email"],
.drawer-panel__body select,
.drawer-panel__body textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    font-size: 0.9rem;
}

.drawer-panel__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* ---- Shared: searchable dropdown (sorted a-z, filterable when >10 options) ---- */
.searchable-select {
    position: relative;
    width: 100%;
    flex: 1 1 160px;
    min-width: 0;
}

.searchable-select__control-wrap {
    position: relative;
}

.searchable-select__control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding-block: 8px;
    padding-inline: 12px 10px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font-size: 0.9rem;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.searchable-select__control:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.searchable-select__control--clearable {
    padding-inline-end: 68px;
}

.searchable-select--open .searchable-select__control {
    border-color: var(--color-primary, #0A84F1);
    box-shadow: 0 0 0 3px rgba(10, 132, 241, 0.14);
}

.searchable-select__value {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select__value--placeholder {
    color: var(--slate, #64748B);
}

.searchable-select__clear {
    position: absolute;
    top: 50%;
    inset-inline-end: 34px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    transform: translateY(-50%);
    padding: 0;
    border: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--slate, #64748B);
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}

.searchable-select__clear svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
}

.searchable-select__clear:hover {
    color: var(--error, #EF4444);
    background: rgba(239, 68, 68, 0.08) !important;
}

.shell__content .searchable-select__clear:not(:disabled):hover {
    transform: translateY(-50%);
    border-color: transparent;
    box-shadow: none;
}

.searchable-select__arrow {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--slate, #64748B);
    pointer-events: none;
}

.searchable-select__arrow svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.searchable-select__control--clearable .searchable-select__arrow {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
}

.searchable-select__control--clearable .searchable-select__arrow::before {
    content: "";
    position: absolute;
    inset-inline-start: -5px;
    width: 1px;
    height: 18px;
    background: var(--gray-200, #E8EDF3);
}

/* Konumu window.anchoredPopup koyar (top/left/width satır içi stil): panel fixed olduğu için
   overflow:auto olan bir modalın içindeyken kırpılmaz ve yer yoksa yukarı açılır. z-index 1100 =
   date-box takvimiyle aynı kat; modal 1000'in üstünde, onay diyaloğu 1500'ün altında. */
.searchable-select__panel {
    position: fixed;
    z-index: 1100;
    top: 0;
    left: 0;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    opacity: 0;
    background: var(--surface-light, #fff);
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-md, 0 16px 42px rgba(15, 31, 53, 0.10));
    padding: 6px;
    display: grid;
    gap: 6px;
}

.searchable-select__panel[data-positioned="true"] {
    opacity: 1;
}

.searchable-select__filter {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    font-size: 0.85rem;
}

/* grid-auto-rows: max-content şart — liste max-height'ı aşınca (çok kayıtlı ekranlar) tarayıcı
   auto satırları kalan 260px'e sığdırmak için büzüyordu: overflow:hidden olan seçenek satırının
   otomatik en küçük yüksekliği 0 sayıldığından her satır yalnız dolgudan ibaret kalıyor, metin
   2-3px'lik bir şerit olarak görünüyordu (Evrak ve İletişim > Kayıt listesi). max-content ile
   satır her zaman kendi içeriği kadar kalır, taşan kısım kaydırılır. */
.searchable-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 1px;
}

.searchable-select__option {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--ink, #1E293B);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-select__option:hover {
    background: var(--surface-hover, #F8FBFF);
}

.searchable-select__option--active {
    outline: 2px solid rgba(10, 132, 241, 0.28);
    outline-offset: -2px;
}

.searchable-select__option--selected {
    background: var(--surface-tinted, #EAF4FF);
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    font-weight: 600;
}

.searchable-select__empty {
    padding: 7px 10px;
    font-size: 0.82rem;
    color: var(--slate, #64748B);
}

.searchable-select__group-label {
    padding: 6px 10px 2px;
    font-size: 0.7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--slate, #64748B);
}

/* ---- Shared: date box (type + pick from a native calendar) ---- */
.date-box-wrap {
    position: relative;
    display: grid;
    align-items: stretch;
    width: 100%;
    flex: 1 1 160px;
    min-width: 0;
}

.date-box {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 34px 8px 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--ink, #1E293B);
    background: var(--surface-light, #fff);
}

.date-box--invalid {
    border-color: var(--error, #EF4444);
}

.date-box__pick {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 0.95rem;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 6px;
}

.date-box__pick:hover {
    background: var(--surface-hover, #F8FBFF);
}

.shell__content .date-box__pick:not(:disabled):hover {
    transform: translateY(-50%);
}

.date-box__native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    border: 0;
}

.date-box__error {
    margin-top: 3px;
    color: var(--error, #EF4444);
    font-size: 0.7rem;
    font-weight: 650;
}

/* ---- Shared: numeric inputs (Formatting/MoneyBox|WeightBox|MeasureBox.razor) — same input chrome as date-box, unit/currency suffix instead of a calendar button ---- */
.numeric-box-wrap {
    position: relative;
    display: grid;
    align-items: stretch;
    width: 100%;
    flex: 1 1 160px;
    min-width: 0;
}

.numeric-box {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-block: 8px;
    padding-inline: 12px 38px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--ink, #1E293B);
    text-align: end;
}

/* Modal input rules have greater specificity; retain the reserved suffix area. */
.shell__content input.numeric-box,
.crud-modal input.numeric-box {
    padding-block: 8px;
    padding-inline: 12px 38px;
    text-align: end;
}

.numeric-box--invalid {
    border-color: var(--error, #EF4444);
}

.numeric-box__suffix {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--slate, #64748B);
    pointer-events: none;
}

.numeric-box__error {
    margin-top: 3px;
    color: var(--error, #EF4444);
    font-size: 0.7rem;
    font-weight: 650;
}

/* ---- Shared: inline file preview (Formatting/FilePreview.razor) ---- */
.file-preview--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 1px dashed var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    color: var(--slate, #64748B);
    font-size: 0.85rem;
}

.file-preview__image {
    max-width: 100%;
    max-height: 360px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--gray-200, #E8EDF3);
}

.file-preview__pdf {
    width: 100%;
    height: 480px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
}

.date-box__calendar {
    position: fixed;
    z-index: 1100;
    top: 0;
    left: 0;
    width: min(300px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    box-shadow: 0 18px 42px rgba(15, 31, 53, 0.18);
    opacity: 0;
}

.date-box__calendar[data-positioned="true"] {
    opacity: 1;
}

.date-box__calendar-head {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    text-align: center;
}

.date-box__calendar-period {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 5px;
}

.date-box__calendar-period select {
    min-width: 0;
    width: 100%;
    padding: 5px 6px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: 7px;
    background: var(--surface-light, #fff);
    color: var(--ink-strong, #0F1F35);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: capitalize;
}

.date-box__calendar-head strong {
    color: var(--ink-strong, #0F1F35);
    font-size: 0.86rem;
    text-transform: capitalize;
}

.date-box__weekdays,
.date-box__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.date-box__weekdays {
    margin-bottom: 4px;
}

.date-box__weekdays span {
    color: var(--slate, #64748B);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.shell__content .date-box__calendar button {
    min-width: 0;
    min-height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    font-size: 0.78rem;
}

.shell__content .date-box__calendar button:not(:disabled):hover {
    border-color: rgba(10, 132, 241, 0.25);
    background: var(--surface-hover, #F8FBFF);
    box-shadow: none;
    transform: none;
}

.shell__content .date-box__calendar .date-box__day--today {
    border-color: rgba(10, 132, 241, 0.45);
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    font-weight: 750;
}

.shell__content .date-box__calendar .date-box__day--selected {
    border-color: var(--color-primary, #0A84F1);
    background: var(--color-primary-strong, #0A64C8);
    color: #fff;
    font-weight: 750;
}

.shell__content .date-box__calendar .date-box__day--outside {
    color: #a5afbd;
    font-weight: 500;
}

.date-box__calendar--datetime {
    width: min(340px, calc(100vw - 32px));
}

.date-box__time {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 0 !important;
    padding-top: 9px;
    border-top: 1px solid var(--gray-200, #E8EDF3);
    color: var(--ink-strong, #0F1F35) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.date-box__time input {
    width: 118px !important;
    padding: 6px 8px;
}

.date-box__calendar-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--gray-200, #E8EDF3);
}

.date-box__calendar-actions--datetime {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.shell__content .date-box__calendar-actions .date-box__apply {
    background: var(--color-primary-strong, #0A64C8);
    color: #fff;
}

.shell__content .date-box__calendar-actions button {
    min-height: 30px;
    padding: 0 9px;
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    font-weight: 700;
}

body.modal-open {
    overflow: hidden;
}

/* inset-inline-start, not left: the sidebar sits on the right under dir="rtl", so a physical
   `left` offset would leave a dead strip on the left and let the modal cover the menu. */
.operation-modal-backdrop,
.record-modal-backdrop {
    inset-inline-start: var(--sidebar-width-expanded, 244px) !important;
}

.shell--sidebar-collapsed .operation-modal-backdrop,
.shell--sidebar-collapsed .record-modal-backdrop {
    inset-inline-start: var(--sidebar-width-collapsed, 72px) !important;
}

@media (max-width: 900px) {
    .operation-modal-backdrop,
    .record-modal-backdrop {
        inset-inline-start: var(--sidebar-width-collapsed, 72px) !important;
    }
}

.operation-page td.date-overdue {
    color: #b91c1c;
    font-weight: 750;
}

.operation-page td.date-soon {
    color: #b45309;
    font-weight: 750;
}

.modal-readonly-banner,
.modal-success-banner {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: var(--radius-md, 10px);
    font-size: 0.78rem;
    font-weight: 700;
}

.modal-readonly-banner {
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.modal-success-banner {
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #166534;
}

.modal-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.modal-fieldset:disabled {
    opacity: 0.78;
}

.send-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.permission-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    padding: 12px;
}

.permission-matrix label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin: 0;
    color: var(--ink, #1E293B);
}

/* GM-4 B-8: onay kutusu + etiket tek satırda hizalı (".shell__content input" kutuya 40 px yükseklik veriyordu). Çekmece ve araç çubuğu etiketleri için. */
.check-field { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; color: var(--ink, #1E293B); font-size: 0.85rem; white-space: nowrap; }
.crud-modal label.check-field { display: flex; margin: 8px 0 0; }
.check-field input[type="checkbox"] { flex: 0 0 1rem; width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--color-primary); cursor: pointer; }
.check-field input[type="checkbox"]:disabled { cursor: not-allowed; }

.chart-template-preview { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.chart-template-preview th, .chart-template-preview td { padding: 6px 12px; text-align: start; border-bottom: 1px solid var(--gray-200, #E8EDF3); }
.chart-template-preview th { color: var(--slate, #64748B); font-size: 0.7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
}

.checkbox-row label {
    margin: 0;
}

.link-btn {
    background: none;
    border: none;
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}

.link-btn:hover {
    text-decoration: underline;
}

.link-btn--danger {
    color: var(--error, #EF4444);
}

/* ---- Dark theme compatibility for CSS-isolated feature surfaces ---- */
html[data-theme="dark"] .shell__content :is(
    .entity-list,
    .dashboard-action,
    .document-metrics article,
    .reservation-metrics article,
    .quote-metrics article,
    .operation-metrics article,
    .operation-views button,
    .finance-page .kpis article,
    .finance-page .panel,
    .summary span,
    .action-page section,
    .journey article,
    .help-panel,
    .help-heading__action,
    .menu-management__secondary,
    .menu-management__guide > div,
    .menu-node__row,
    /* ADR-124 FAZ 1 — şablon tasarımcısının izole yüzeyleri de bu listede olmalı,
       yoksa koyu temada beyaz kalırlar (paneller ve palet satırları #fff sabitli). */
    .designer-palette,
    .designer-canvas,
    .designer-preview,
    .designer-token,
    .designer-tokengroup__head
) {
    background: var(--surface-light, #101B2E);
    color: var(--ink, #DCE7F5);
}

html[data-theme="dark"] .shell__content :is(
    .entity-list__table tbody tr,
    .reservation-page tbody tr,
    .quote-table tbody tr,
    .operation-page tbody tr
):hover {
    background: var(--surface-hover, #16243A);
}

html[data-theme="dark"] .shell__content :is(
    .menu-management__guide span,
    .menu-node__depth
) {
    background: var(--surface-tinted, #102A47);
    color: var(--color-cyan-light, #7FD0F5);
}

html[data-theme="dark"] .shell__content :is(
    .dashboard-note,
    .finance-page .message,
    .menu-management__root-target,
    .menu-node__nest-hint
) {
    background: var(--info-soft, #0C2940);
    color: var(--info-soft-strong, #7DD3FC);
}

html[data-theme="dark"] .shell__content :is(
    .empty,
    .menu-management__banner--success
) {
    background: var(--success-soft, #0B2E25);
    color: var(--success-soft-strong, #6EE7B7);
}

html[data-theme="dark"] .shell__content :is(
    .doc-error,
    .reservation-error,
    .quote-error,
    .operation-error,
    .menu-management__banner--error
) {
    background: var(--error-soft, #35171D);
    color: var(--error-soft-strong, #FCA5A5);
}

html[data-theme="dark"] .shell__content :is(
    .action-page header p,
    .help-page header p,
    .journey p,
    .help-panel details p
) {
    color: var(--slate, #A1B1C7);
}

html[data-theme="dark"] .shell__content :is(
    .action-page a,
    .journey a,
    .menu-node__content code
) {
    color: var(--color-cyan-light, #7FD0F5);
}

html[data-theme="dark"] .shell__content .dashboard-mode {
    background: var(--surface-tinted, #102A47);
    color: var(--color-cyan-light, #7FD0F5);
}

html[data-theme="dark"] .shell__content .dashboard-mode[data-mode="AIR"] {
    background: rgba(22, 199, 252, .16);
    color: #7FD0F5;
}

html[data-theme="dark"] .shell__content .dashboard-mode[data-mode="ROAD"] {
    background: rgba(245, 165, 36, .18);
    color: #FCD34D;
}

html[data-theme="dark"] .shell__content :is(
    .dashboard-funnel__seg--navy,
    .dashboard-legend__dot--navy
) {
    background: #4C8DF6;
}

html[data-theme="dark"] .settings-section__head > span {
    color: var(--color-cyan-light, #7FD0F5);
}

html[data-theme="dark"] .app-loading--operation {
    background: rgba(2, 8, 18, .64);
}

html[data-theme="dark"] .app-loading__operation-card {
    background: var(--surface-card, rgba(16, 27, 46, .96));
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .status-pill--blue { background: rgba(59, 130, 246, .18); color: #93C5FD; }
html[data-theme="dark"] .status-pill--cyan { background: rgba(6, 182, 212, .18); color: #67E8F9; }
html[data-theme="dark"] .status-pill--green { background: rgba(34, 197, 94, .18); color: #86EFAC; }
html[data-theme="dark"] .status-pill--amber { background: rgba(245, 165, 36, .18); color: #FCD34D; }
html[data-theme="dark"] .status-pill--red { background: rgba(239, 68, 68, .18); color: #FCA5A5; }
html[data-theme="dark"] .status-pill--slate { background: var(--gray-200, #22324B); color: var(--slate, #A1B1C7); }

/* ADR-116 — koyu temada .settings-banner metni okunmuyordu: renkler açık tema için sabitlenmiş
   koyu tonlardı (ör. info için #023581) ve koyu zeminde neredeyse görünmez kalıyordu. Aynı
   status-pill deseniyle, yalnız metin/zemin tonları koyu temaya çevrildi. */
html[data-theme="dark"] .settings-banner--success { background: rgba(34, 197, 94, .18); color: #86EFAC; }
html[data-theme="dark"] .settings-banner--error { background: rgba(239, 68, 68, .18); color: #FCA5A5; }
html[data-theme="dark"] .settings-banner--info { background: rgba(10, 132, 241, .18); color: #93C5FD; }
html[data-theme="dark"] .settings-banner--warning { background: rgba(245, 165, 36, .18); color: #FCD34D; }

/* ---- Shared: toast notifications (366Route.Components/Notifications/ToastContainer.razor) ---- */
.toast-region {
    position: fixed;
    /* Below the shell header (--header-height) rather than over it — the header's own controls
       (theme toggle, user menu) live in that top band too. Pages without the shell (login, etc.)
       have no --header-height set, so this falls back to a flat 16px from the very top. */
    top: calc(16px + var(--header-height, 0px));
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface-card, #fff);
    border-radius: var(--radius-lg, 16px);
    border-inline-start: 4px solid var(--slate, #64748B);
    box-shadow: var(--shadow-md);
    padding: 12px 14px;
    animation: toast-in 0.22s ease-out;
}

.toast__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.toast__icon svg {
    width: 100%;
    height: 100%;
}

.toast__message {
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--ink, #1E293B);
    word-break: break-word;
}

.toast__close {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted, var(--slate));
    cursor: pointer;
    border-radius: var(--radius-md, 10px);
}

.toast__close:hover {
    background: var(--surface-muted, var(--gray-100));
}

.toast__close svg {
    width: 100%;
    height: 100%;
}

.toast--success { border-inline-start-color: var(--success, #22C55E); }
.toast--success .toast__icon { color: var(--success, #22C55E); }
.toast--error { border-inline-start-color: var(--error, #EF4444); }
.toast--error .toast__icon { color: var(--error, #EF4444); }
.toast--warning { border-inline-start-color: var(--warning, #F5A524); }
.toast--warning .toast__icon { color: var(--warning-soft-strong, #B45309); }
.toast--info { border-inline-start-color: var(--info, #16C7FC); }
.toast--info .toast__icon { color: var(--info-soft-strong, #075985); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .toast-region {
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
    }
}

/* ---- Shared: confirm dialog (366Route.Components/Overlay/ConfirmDialogHost.razor) — reuses crud-modal chrome ---- */
/* ConfirmDialogHost is mounted in App.razor ABOVE the Router, so a page's own .crud-modal-backdrop
   (also z-index 1000) comes later in the DOM and would paint over it — a confirm raised from inside
   an open modal (Records/Operations "kaydedilmemiş değişiklikler", delete-file, send-document) would
   be invisible and the app would look frozen. Sit between page modals (1000) and toasts (2000). */
.crud-modal-backdrop.confirm-dialog-backdrop {
    z-index: 1500;
}

.crud-modal.confirm-dialog {
    max-width: 440px;
}

.confirm-dialog__message {
    margin: 0;
    color: var(--text-muted, var(--slate));
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ---- Shared: async action button (366Route.Components/Buttons/AsyncActionButton.razor) ---- */
.async-action-btn__spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-inline-end: 8px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: async-action-btn-spin 0.7s linear infinite;
}

@keyframes async-action-btn-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .async-action-btn__spinner { animation-duration: 1.4s; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle__track,
    .theme-toggle__thumb {
        transition: none;
    }
}

/* ============================================================
   Rapor Çalışma Alanı (ADR-106)
   12 finans raporunun ortak kabuğu: filtre şeridi, KPI şeridi,
   görünüm anahtarı, grafik ve profesyonel grid. Renkler yalnız
   jetonlardan gelir — bu yüzden ayrı bir koyu tema bloğu yok.
   ============================================================ */

.report-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.report-page h1, .report-page h2, .report-page h3 { margin: 0; }
.report-heading__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Filtre şeridi ---- */
.report-filters {
    display: grid;
    gap: 11px;
    padding: 14px 16px;
    background: var(--surface-light);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.report-filters__presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.report-filters__presets > span { margin-inline-end: 2px; color: var(--slate); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.report-preset {
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    background: var(--surface-light);
    color: var(--slate);
    font-size: .755rem;
    font-weight: 650;
}
.report-preset:hover { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }
.report-preset.is-on { background: var(--surface-tinted); border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }

.report-filters__row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.report-field { display: grid; gap: 4px; margin: 0; min-width: 0; }
.report-field > span { color: var(--slate); font-size: .69rem; font-weight: 700; }
.report-field-help { color: var(--slate); font-size: .65rem; max-width: 190px; line-height: 1.2; }
.report-field--wide { flex: 1 1 210px; max-width: 300px; }
.report-filters__spacer { flex: 1 1 auto; }
.report-apply { min-width: 96px; }

.report-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin: 0; color: var(--ink); font-size: .78rem; font-weight: 650; white-space: nowrap; }
.report-toggle input { flex: 0 0 1rem; width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-primary); cursor: pointer; }

.report-filters__chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-top: 11px; border-top: 1px solid var(--gray-200); }
.report-filters__chipslabel { color: var(--slate); font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.report-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: .15rem .6rem;
    border: 1px dashed var(--gray-300);
    border-radius: 999px;
    background: var(--surface-light);
    color: var(--ink);
    font-size: .74rem;
    font-weight: 650;
}
.report-chip:hover { border-style: solid; border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }
.report-chip b { color: var(--ink-strong); font-weight: 700; }
.report-chip:hover b { color: inherit; }
.report-chip i { color: var(--slate); font-size: .85rem; font-style: normal; line-height: 1; }

.report-chips__clear { min-height: 26px; padding: .15rem .45rem; border: 0; background: transparent; color: var(--slate); font-size: .74rem; font-weight: 650; text-decoration: underline; }
.report-chips__clear:hover { color: var(--color-primary-text, var(--color-primary)); box-shadow: none; transform: none; }
.report-chips__count { margin-inline-start: auto; color: var(--slate); font-size: .74rem; font-variant-numeric: tabular-nums; }

/* ---- KPI şeridi ---- */
.report-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }

.report-kpi {
    position: relative;
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 13px 15px 11px;
    overflow: hidden;
    background: var(--surface-light);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.report-kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--gray-300); }
.report-kpi--primary::before { background: var(--color-primary); }
.report-kpi--accent::before { background: var(--color-accent); }
.report-kpi--positive::before { background: var(--success); }
.report-kpi--warning::before { background: var(--warning); }
.report-kpi--critical::before { background: var(--error); }

.report-kpi__label { color: var(--slate); font-size: .72rem; font-weight: 700; }
.report-kpi__value { color: var(--ink-strong); font-size: 1.3rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.report-kpi__value small { margin-inline-start: 3px; color: var(--slate); font-size: .62em; font-weight: 600; }
.report-kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }

.report-delta { display: inline-flex; align-items: center; gap: 4px; font-size: .715rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-delta em { color: var(--slate); font-style: normal; font-weight: 500; }
.report-delta--up { color: var(--success-soft-strong); }
.report-delta--down { color: var(--error-soft-strong); }
.report-delta--flat { color: var(--slate); }
.report-kpi__spark { flex: 0 0 auto; width: 74px; height: 22px; }

/* ---- İçerik paneli ---- */
.report-panel {
    min-width: 0;
    overflow: hidden;
    background: var(--surface-light);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.report-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px 12px; border-bottom: 1px solid var(--gray-200); }
.report-panel__title { min-width: 0; }
.report-panel__title h2 { color: var(--ink-strong); font-size: 1rem; }
.report-panel__title p { margin: 2px 0 0; color: var(--slate); font-size: .755rem; }
.report-panel__tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.report-panel__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: var(--gray-50); border-top: 1px solid var(--gray-200); color: var(--slate); font-size: .755rem; font-variant-numeric: tabular-nums; }
.report-panel__foot .report-tool { min-height: 28px; }
.report-panel__foot strong { color: var(--ink); }
.report-pager__end { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.report-pager__end select { width: auto; min-height: 28px; padding-block: .15rem; font-size: .755rem; }

.report-views { display: inline-flex; gap: 2px; padding: 3px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius-md); }
.report-views button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--slate); font-size: .765rem; font-weight: 650; }
.report-views button:hover { color: var(--ink-strong); box-shadow: none; transform: none; }
.report-views button.is-on { background: var(--surface-light); color: var(--color-primary-text, var(--color-primary)); box-shadow: var(--shadow-sm); }

.report-tool { min-height: 30px; padding: 0 10px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--surface-light); color: var(--ink); font-size: .745rem; font-weight: 650; white-space: nowrap; }
.report-tool:hover { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }
.report-tool.is-on { background: var(--surface-tinted); border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }

.report-note {
    margin: 0;
    padding: 11px 16px;
    background: var(--info-soft);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--info-soft-strong);
    font-size: .82rem;
    font-weight: 600;
}

/* ---- Durumlar ---- */
.report-state { display: grid; gap: 6px; place-items: center; padding: 40px 20px; text-align: center; }
.report-state p { margin: 0; color: var(--ink); font-size: .88rem; font-weight: 600; }
.report-state small { color: var(--slate); font-size: .76rem; }
.report-state--error p { color: var(--error-soft-strong); }
.report-state__retry { min-height: 32px; margin-top: 4px; padding: 0 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--surface-light); color: var(--ink); font-size: .78rem; font-weight: 650; }

.report-spinner { width: 22px; height: 22px; border: 2px solid var(--gray-200); border-top-color: var(--color-primary); border-radius: 999px; animation: report-spin 720ms linear infinite; }
@keyframes report-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .report-spinner { animation: none; } }

/* ---- Grafik ---- */
.report-chartwrap { display: grid; grid-template-columns: minmax(0, 1fr) 236px; }
.report-chartwrap--full { grid-template-columns: minmax(0, 1fr); }
.report-chartwrap__main { min-width: 0; padding: 16px 18px 8px; }
.report-chart { color: var(--ink-strong); }
.report-chart__svg { display: block; width: 100%; height: auto; }
.report-chart__legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 10px; }
.report-chart__legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--slate); font-size: .735rem; font-weight: 650; }
.report-chart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.report-chart__legend i.line { width: 14px; height: 2px; border-radius: 2px; }
.report-chart__legend .report-chart__caption { margin-inline-start: auto; font-weight: 500; }
.report-chart__empty { margin: 0; padding: 28px 18px; color: var(--slate); font-size: .8rem; text-align: center; }

.report-side { display: grid; gap: 10px; align-content: start; padding: 16px 18px; background: var(--gray-50); border-inline-start: 1px solid var(--gray-200); }
.report-rank__title { color: var(--slate); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.report-rank { display: grid; gap: 9px; }
.report-rank__row { display: grid; gap: 4px; min-width: 0; }
.report-rank__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.report-rank__top b { overflow: hidden; color: var(--ink-strong); font-size: .765rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.report-rank__top span { flex: 0 0 auto; color: var(--slate); font-size: .73rem; font-variant-numeric: tabular-nums; }
.report-rank__bar { height: 5px; overflow: hidden; background: var(--gray-200); border-radius: 3px; }
.report-rank__bar > i { display: block; height: 100%; background: var(--color-primary); border-radius: 3px; }

/* ---- Grid ---- */
.report-tablewrap { overflow: auto; max-height: min(58vh, 700px); }
/* ADR-134 — Syncfusion grid kendi kaydırmasını ve sayfalayıcısını taşır. Eski tablo için konmuş
   yükseklik sınırı grid'in üstünde kalırsa ÇİFT kaydırma olur ve toplam bandı ile sayfalayıcı
   görünmez yerde kalır (tarayıcıda görüldü). Kural :has() ile yalnız grid'e geçmiş panelleri kapsar;
   henüz taşınmamış raporların el yazımı tablosu eski davranışını korur. */
.report-tablewrap:has(.report-grid) { overflow: visible; max-height: none; }
.report-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.report-table th, .report-table td { padding: .58rem .8rem; border-bottom: 1px solid var(--gray-200); text-align: start; white-space: nowrap; }
.report-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gray-50);
    color: var(--slate);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: inset 0 -1px 0 var(--gray-300);
}
.report-table td { color: var(--ink); font-size: .795rem; }
.report-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--gray-50) 55%, transparent); }
.report-table tbody tr:hover { background: var(--surface-hover); }
.report-table .num { text-align: end; }
.report-table .pos { color: var(--success-soft-strong); font-weight: 650; }
.report-table .neg { color: var(--error-soft-strong); font-weight: 650; }
.report-table .warn { color: var(--warning-soft-strong); font-weight: 650; }
.report-table .muted { color: var(--slate); }

/* app.css icindeki .shell__content button:hover kurali her dugmeyi kaldirip golgelendiriyor;
   baslik satirindaki siralama dugmesi icin bu kapatilir. */

.report-cell { display: grid; }
.report-cell b { color: var(--ink-strong); font-size: .8rem; font-weight: 650; }
.report-cell small { color: var(--slate); font-size: .68rem; }

.report-route { display: inline-flex; align-items: center; gap: 6px; }
.report-mode { flex: 0 0 20px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--gray-100); color: var(--color-primary-text, var(--color-primary)); }
.report-mode svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.report-meter { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.report-meter u { display: inline-block; width: 44px; height: 5px; overflow: hidden; background: var(--gray-200); border-radius: 3px; text-decoration: none; }
.report-meter u i { display: block; height: 100%; background: var(--success); border-radius: 3px; }
.report-meter u i.is-low { background: var(--warning); }
.report-meter u i.is-bad { background: var(--error); }

.report-table tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--surface-tinted);
    color: var(--ink-strong);
    font-size: .795rem;
    font-weight: 700;
    border-top: 1px solid var(--color-primary);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 var(--color-primary);
}

.report-table.is-compact td { padding-block: .3rem; }
.report-table.is-compact .report-cell small { display: none; }

/* ---- Disa aktarma menusu ---- */
.report-export { position: relative; }
.report-export > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--surface-light);
    color: var(--ink);
    font-size: .79rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}
.report-export > summary::-webkit-details-marker { display: none; }
.report-export > summary:hover { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }
.report-export > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.report-export__menu {
    position: absolute;
    inset-inline-end: 0;
    z-index: 6;
    display: grid;
    min-width: 168px;
    margin-top: 6px;
    padding: 6px;
    background: var(--surface-light);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.report-export__menu button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font-size: .79rem; font-weight: 600; text-align: start; }
.report-export__menu button:hover { background: var(--surface-tinted); color: var(--color-primary-text, var(--color-primary)); box-shadow: none; transform: none; }

/* ---- Rapor merkezi (/reports) ---- */
.report-hub { display: grid; gap: 22px; }
.report-hub__group { display: grid; gap: 12px; }
.report-hub__grouphead { display: flex; align-items: baseline; gap: 10px; }
.report-hub__grouphead h2 { color: var(--ink-strong); font-size: 1.05rem; }
.report-hub__grouphead span { color: var(--slate); font-size: .76rem; }
.report-hub__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.report-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    background: var(--surface-light);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.report-card:hover { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.report-card__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-tinted); color: var(--color-primary-text, var(--color-primary)); }
.report-card__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.report-card__body { display: grid; gap: 3px; min-width: 0; }
.report-card__body strong { color: var(--ink-strong); font-size: .9rem; }
.report-card__body small { color: var(--slate); font-size: .76rem; line-height: 1.45; }

/* Beş kart yaklaşık 1000 pikselde rahat sığıyor; kenar çubuğu açıkken içerik alanı 1080 pikselin altına
   düştüğünde üçe iner. 1400'de kırmak, tipik dizüstü genişliğinde şeridi gereksiz yere böler. */
@media (max-width: 1080px) {
    .report-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .report-chartwrap { grid-template-columns: minmax(0, 1fr); }
    .report-side { border-inline-start: 0; border-top: 1px solid var(--gray-200); }
    .report-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-filters__row > * { flex: 1 1 160px; }
    .report-filters__spacer { display: none; }
    .report-apply { flex: 1 1 100%; }
    .report-tablewrap { max-height: none; }
    .report-hub__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .report-kpis { grid-template-columns: 1fr; }
    .report-views { width: 100%; justify-content: space-between; }
    .report-chips__count { margin-inline-start: 0; width: 100%; }
}

/* ---- Sutun secici ve kaydedilmis gorunumler (ADR-106) ---- */
.report-columns, .report-savedviews { position: relative; }
.report-columns > summary, .report-savedviews > summary {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--surface-light);
    color: var(--ink);
    font-size: .745rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}
.report-columns > summary::-webkit-details-marker, .report-savedviews > summary::-webkit-details-marker { display: none; }
.report-columns > summary:hover, .report-savedviews > summary:hover { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }

.report-columns__menu, .report-savedviews__menu {
    position: absolute;
    inset-inline-end: 0;
    z-index: 6;
    display: grid;
    gap: .35rem;
    min-width: 190px;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--surface-light);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.report-columns__menu label { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--ink); font-size: .78rem; font-weight: 600; cursor: pointer; }
.report-columns__menu input { flex: 0 0 1rem; width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-primary); cursor: pointer; }

.report-savedviews__empty { margin: 0 0 2px; color: var(--slate); font-size: .74rem; }
.report-savedviews__row { display: flex; align-items: center; gap: 0; }
.report-savedviews__apply { flex: 1 1 auto; min-height: 30px; padding: 0 9px; border: 1px solid var(--gray-300); border-radius: 7px; border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end-width: 0; background: var(--surface-light); color: var(--ink); font-size: .76rem; font-weight: 600; text-align: start; }
.report-savedviews__apply:hover { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }
.report-savedviews__remove { flex: 0 0 auto; min-width: 28px; min-height: 30px; padding: 0 .4rem; border: 1px solid var(--gray-300); border-radius: 7px; border-start-start-radius: 0; border-end-start-radius: 0; background: var(--surface-light); color: var(--slate); font-size: .9rem; line-height: 1; }
.report-savedviews__remove:hover { border-color: var(--error); color: var(--error); }
.report-savedviews__new { display: flex; gap: .35rem; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--gray-200); }
.report-savedviews__new input { flex: 1 1 auto; min-width: 0; min-height: 30px; padding-block: .2rem; font-size: .76rem; }
.report-savedviews__new button { flex: 0 0 auto; min-height: 30px; padding: 0 .6rem; border: 1px solid var(--gray-300); border-radius: 7px; background: var(--surface-light); color: var(--ink); font-size: .76rem; font-weight: 650; }
.report-savedviews__new button:hover:enabled { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }

/* ============================================================
   Rapor yazdırma (ADR-106, 2. tur)
   Karar: rapor önizlemesi PDF değil, etkileşimli tablodur; PDF/Excel
   dosya ÇIKTISIDIR. Bu blok aynı ekranın kağıda düzgün basılmasını
   sağlar — kullanıcı "Yazdır → PDF olarak kaydet" ile ayrı bir
   önizleme moduna girmeden belge alabilsin diye.
   Not: yazdırma ekrandaki sayfayı basar; tüm satırlar için Dışa Aktar
   (PDF/Excel) kullanılmalıdır — o çıktı sunucuda tüm filtreli kümeyi kapsar.
   ============================================================ */
@media print {
    /* Kağıtta tema yok: koyu zemin hem mürekkep yakar hem okunmaz. */
    :root, html[data-theme="dark"], html[data-theme="light"] {
        --surface-light: #FFFFFF;
        --surface-tinted: #F1F6FC;
        --surface-hover: #FFFFFF;
        --gray-50: #F7F9FC;
        --gray-100: #EEF3F8;
        --gray-200: #D9E1EA;
        --gray-300: #C3CEDB;
        --slate: #4A5A70;
        --ink: #16212F;
        --ink-strong: #0B131F;
        --page-background: #FFFFFF;
        --shadow-sm: none;
        --shadow-md: none;
    }

    @page { margin: 14mm 12mm; }

    html, body { background: #fff !important; }

    /* Uygulama çerçevesi kağıda girmez. */
    .sidebar, .shell__header, .toast-container, .shell-user-menu { display: none !important; }
    .shell, .shell__main { display: block !important; }
    .shell__content { max-width: none !important; padding: 0 !important; margin: 0 !important; background: #fff !important; }

    /* Ekranı işletmeye yarayan kontroller kağıda basılmaz. */
    .report-filters__presets,
    .report-filters__row,
    .report-views,
    .report-panel__tools,
    .report-heading__actions,
    .report-panel__foot,
    .report-chips__clear,
    .report-state--loading { display: none !important; }

    /* Aktif filtre çipleri KALIR: çıktının hangi dönemi ve hangi filtreleri
       kapsadığını belgeleyen tek yer orası. Düğme görünümünden düz metne çevrilir. */
    .report-filters {
        padding: 0 0 8px;
        border: 0;
        border-bottom: 1px solid var(--gray-300);
        border-radius: 0;
        box-shadow: none;
    }
    .report-filters__chips { padding-top: 0; border-top: 0; }
    .report-chip {
        border: 0;
        padding: 0;
        min-height: 0;
        font-size: .74rem;
    }
    .report-chip::after { content: " ·"; }
    .report-chip i { display: none; }

    .report-page { gap: 10px; }
    .module-heading h1 { font-size: 1.3rem; }
    .module-heading p { font-size: .78rem; }

    .report-panel, .report-kpi {
        border: 1px solid var(--gray-300) !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
    .report-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .report-kpi__spark { display: none; }

    /* Tablo tamamı basılmalı: ekrandaki kaydırma penceresi kağıtta satırları keserdi. */
    .report-tablewrap { max-height: none !important; overflow: visible !important; }
    /* Başlık satırı her sayfada tekrarlansın; toplam satırı sayfa sonuna yapışmasın. */
    /* ADR-134 — aşağıdaki .report-table kuralları ADR-106 madde 13'ten kalmadır ve rapor ekranları
       grid'e geçtikten sonra artık HİÇBİR rapora uygulanmaz (o ekranlarda .report-table yok).
       Silinmediler çünkü taşınmamış başka tablolar için hâlâ referans değeri taşıyorlar; grid'in
       kendi yazdırma kuralları hemen altta.

       KURTARILAMAYAN: Syncfusion başlık ve gövdeyi AYRI tablolarda çizer, bu yüzden başlığın her
       basılı sayfada tekrarlanması (table-header-group) CSS ile geri getirilemez. ADR-106'nın o
       kazanımı grid'e geçişle kaybedildi; kaydı ADR-134'tedir. */
    .report-table thead { display: table-header-group; }
    .report-table tfoot { display: table-row-group; }
    .report-table thead th { position: static !important; box-shadow: none !important; }
    .report-table tfoot td { position: static !important; box-shadow: none !important; }
    .report-table tr { break-inside: avoid; }
    .report-table th, .report-table td { padding: .3rem .5rem; font-size: .72rem; }

    /* Grid'in yazdırma karşılığı: kendi kaydırma kabı kâğıtta anlamsızdır, sayfalayıcı basılmaz,
       yapışkan başlık kâğıtta yerinde durmalıdır ve satır sayfa sonunda ikiye bölünmemelidir. */
    .report-grid .e-gridcontent,
    .report-grid .e-content { overflow: visible !important; height: auto !important; }
    .report-grid .e-gridheader,
    .report-grid .e-headercontent { position: static !important; }
    .report-grid .e-pager { display: none !important; }
    .report-grid .e-row { break-inside: avoid; }
    .report-grid .e-rowcell,
    .report-grid .e-headercell,
    .report-grid .e-summarycell { padding: .3rem .5rem !important; font-size: .72rem !important; }

    .report-chartwrap { grid-template-columns: minmax(0, 1fr) 200px; break-inside: avoid; }
    .report-side { background: #fff; }

    a { text-decoration: none; color: inherit; }
}

/* ===========================================================================
   PERSONEL / İK MODÜL DİLİ  (FAZ H0)
   ---------------------------------------------------------------------------
   On iki personel ekranı aynı yüzeyi paylaşır, bu yüzden dil GLOBAL burada
   yaşar; emsal .finance-page dilidir (/finance + tüm alt sayfaları). Sayfa
   başına kapsanmış (scoped) birer kopya zamanla birbirinden ayrışırdı.

   Bu bölüm aynı zamanda ölçülmüş üç kusuru kapatır:
   1) Yedi ekran entity-list__* sınıflarını kendi işaretlemesinde elle
      yazıyordu; o stiller EntityListPage bileşenine KAPSANMIŞ ve dışında hiç
      uygulanmıyordu (panel arkaplanı şeffaf, araç çubuğu display:block,
      th dolgusu 1px, yapışkan başlık static).
   2) Beş ekran hiç var olmayan sınıflara dayanıyordu (.user-settings-card,
      .user-settings-note, .employee-profile-fields) ve <label> varsayılan
      inline olduğu için etiketler kutularla aynı satıra diziliyordu.
      .hr-field bunu tek yerden çözer: etiket her zaman kutunun üstünde.
   3) Durum renkleri tanımlı OLMAYAN jetonlara (--warning-fg / --danger-fg /
      --info-fg / --warning-bg) bağlanmıştı ve koyu temada okunmuyordu
      (ölçülen 2,66:1). Artık yalnız iki temada tanımlı jetonlar kullanılır.

   Durum rozetleri için YENİ sınıf üretilmez: .status-pill--* zaten iki temada
   tanımlı (bkz. html[data-theme="dark"] .status-pill--*).
   =========================================================================== */

/* --- sayfa iskeleti --- */
.hr-page { display: grid; gap: 16px; }
.hr-heading__links { display: flex; gap: .6rem; flex-wrap: wrap; }
.hr-heading__links .module-link { padding: .6rem .9rem; text-decoration: none; }

/* --- özet şeridi: her kart bir segment filtresidir --- */
.hr-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 12px; }
.shell__content .hr-metric {
    display: grid; gap: 3px; padding: 14px 16px; text-align: start;
    background: var(--surface-light); border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: pointer;
}
.shell__content .hr-metric:hover { border-color: rgba(10, 132, 241, .45); }
.hr-metric.active { border-color: var(--color-primary); background: var(--surface-tinted); }
.hr-metric > span { color: var(--slate); font-size: .74rem; font-weight: 700; }
.hr-metric > strong { color: var(--ink-strong); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.hr-metric > small { color: var(--slate); font-size: .68rem; }

/* Para birimi basina tutar tasiyan kartlar tek bir SAYI degil bir DIZI gosterir
   ("12.450,00 TRY · 1.150,00 EUR"); 1.3rem gosterim boyutu onlari dar kartta dort satira
   bolup tum seridi yukseltiyor. Olculdu (FAZ H4, sefer seridi 7 karta cikinca): 159px -> 110px,
   tutar 4 satir -> 2 satir, kirpilma yok. Ozgulluk .hr-metric > strong ile ayni (0,1,1), bu
   yuzden kural ondan SONRA durmak zorunda. */
.hr-metric--text > strong { font-size: .95rem; line-height: 1.35; }
.hr-metric--amber > strong { color: var(--warning-soft-strong); }
.hr-metric--amber.active { border-color: var(--warning); }
.hr-metric--red > strong { color: var(--error-soft-strong); }
.hr-metric--red.active { border-color: var(--error); }

/* --- panel başlığı ve araç çubuğu --- */
.hr-panel { overflow: hidden; }
.hr-panel__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap; padding: 18px 20px 0;
}
.hr-panel__head h2 { margin: 0; color: var(--ink-strong); font-size: 1.06rem; }
.hr-panel__head span { color: var(--slate); font-size: .76rem; }
.hr-panel__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.hr-toolbar { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; padding: 14px 20px 10px; }
.hr-toolbar__search { flex: 1; min-width: min(100%, 300px); }
.hr-filter { display: grid; gap: .2rem; min-width: 176px; }
.hr-filter--narrow { min-width: 92px; }
.hr-filter > span { color: var(--slate); font-size: .7rem; font-weight: 700; }

/* --- etkin filtre çipleri --- */
.hr-chips { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0 20px 12px; }
.hr-chips > span { color: var(--slate); font-size: .72rem; font-weight: 750; }
/* Çip hem <button> (filtre kaldır) hem <a> (eksik alana atla) olarak kullanılıyor; bağlantı
   varyantında global `a` kuralının alt çizgisi kapatılır. */
.shell__content .hr-chips__chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: .2rem .55rem;
    border: 1px solid var(--color-primary); border-radius: 999px; text-decoration: none;
    background: var(--surface-tinted); color: var(--info-soft-strong); font-size: .73rem; cursor: pointer;
}
/* Metin --color-primary DEĞİL --info-soft-strong: #0A84F1, koyu temanın --surface-tinted (#102A47)
   zemininde 3,87:1 ölçüldü ve AA eşiğinin altında kalıyordu. --info-soft-strong iki temada da
   tanımlıdır (#075985 / #7DD3FC) ve çipin mavi kimliğini bozmadan eşiği geçer. Kenar rengi marka
   mavisinde kalır. */
.shell__content .hr-chips__clear { min-height: 0; border: 0; background: none; color: var(--slate); font-size: .72rem; text-decoration: underline; cursor: pointer; }

/* --- görünüm anahtarı (Records/Operations ile aynı dil) --- */
/* Sekme şeridi daraldığında KENDİ İÇİNDE kaydırılır: Kişi 360 çekmecesinde beş sekme + sayaç 375px'te
   kabından taşıyordu (ölçülen 314/279) ve taşma çekmece gövdesine yayılıyordu. Segmentli bir kontrolün
   daralma cevabı yatay kaydırmadır; sekmeleri alt satıra kırmak şeridi bir düğme yığınına çevirirdi. */
.hr-views {
    display: inline-flex; gap: 2px; padding: 3px; background: var(--gray-100);
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    max-width: 100%; overflow-x: auto;
}
.hr-views button { min-height: 34px; padding: .35rem .75rem; border: 0; background: transparent; color: var(--slate); font-size: .78rem; font-weight: 650; border-radius: 7px; white-space: nowrap; }
.hr-views button:hover { color: var(--ink-strong); box-shadow: none; transform: none; }
.hr-views button.active { background: var(--surface-light); color: var(--color-primary-text, var(--color-primary)); box-shadow: var(--shadow-sm); }

/* --- grid: KENDİ kaydırma kabı; sayfa gövdesi hiçbir genişlikte yana kaymaz --- */
.hr-table { overflow: auto; max-height: min(68vh, 780px); }
.hr-table table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface-light); font-variant-numeric: tabular-nums; }
.hr-table th, .hr-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--gray-200); text-align: start; vertical-align: middle; }
.hr-table th {
    position: sticky; top: 0; z-index: 2; background: var(--gray-50); color: var(--slate);
    font-size: .7rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
    box-shadow: inset 0 -1px 0 var(--gray-300); white-space: nowrap;
}
.hr-table td { font-size: .82rem; color: var(--ink); }
.hr-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--gray-50) 55%, transparent); }
.hr-table tbody tr:nth-child(even) .hr-col-id { background: color-mix(in srgb, var(--gray-50) 55%, var(--surface-light)); }
.hr-table tbody tr:hover, .hr-table tbody tr:hover .hr-col-id { background: var(--gray-50); }

/* Kimlik sütunu yatay kaydırmada yerinde kalır. Zemin OPAK olmak zorunda:
   "background: inherit" şeffafa çözülür ve gün/veri hücreleri ismin altından geçer
   (aylık puantajda ölçülen kusur). */
.hr-col-id { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface-light); box-shadow: 1px 0 0 var(--gray-200); }
.hr-table thead .hr-col-id { z-index: 3; background: var(--gray-50); }
.hr-col-num { text-align: end; white-space: nowrap; }
.hr-col-nowrap { white-space: nowrap; }
.hr-col-actions { text-align: end; white-space: nowrap; width: 1%; }

/* Önem şeridi: satırın sol kenarında 3px. Renk tek başına bilgi taşımaz; hücrenin
   metni ("20 gün kaldı") aynı şeyi söyler, şerit yalnızca taramayı hızlandırır. */
.hr-row--risk .hr-col-id { box-shadow: inset 3px 0 0 var(--error-soft-strong), 1px 0 0 var(--gray-200); }
.hr-row--warn .hr-col-id { box-shadow: inset 3px 0 0 var(--warning-soft-strong), 1px 0 0 var(--gray-200); }
.hr-row--info .hr-col-id { box-shadow: inset 3px 0 0 var(--info-soft-strong), 1px 0 0 var(--gray-200); }

.shell__content .hr-sort { min-height: 0; border: 0; padding: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.shell__content .hr-sort:hover { box-shadow: none; transform: none; }
.hr-sort.is-active { color: var(--color-primary-text, var(--color-primary)); }

/* --- kimlik hücresi: on iki ekranda aynı --- */
.hr-identity { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; max-width: 300px; }
.hr-identity__text { display: grid; min-width: 0; }
.hr-identity__text strong { color: var(--ink-strong); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-identity__text small { color: var(--slate); font-size: .71rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-avatar {
    flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px;
    border-radius: 9px; background: var(--gray-100); color: var(--slate); font-size: .68rem; font-weight: 700;
}
.hr-selftag { flex: 0 0 auto; padding: .1rem .4rem; border-radius: 999px; background: var(--gray-100); color: var(--slate); font-size: .64rem; font-weight: 700; }

/* --- hücre içi ölçer (kalan bakiye / tamlık oranı) --- */
/* max-width olmadan form bölümünde panel genişliğine yayılıyordu (ölçülen 1308px): o genişlikte
   çubuk bir oranı değil bir ayırıcıyı andırıyor. Tablo hücresinde zaten daralır. */
.hr-meter { display: grid; gap: 3px; min-width: 92px; max-width: 340px; }
.hr-meter__bar { height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.hr-meter__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); }
.hr-meter--warn .hr-meter__bar > span { background: var(--warning); }
.hr-meter--risk .hr-meter__bar > span { background: var(--error); }
.hr-meter > small { color: var(--slate); font-size: .68rem; font-variant-numeric: tabular-nums; }

/* --- satır içi ikon düğmesi --- */
.shell__content .hr-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    min-height: 30px; padding: 0; border: 0; border-radius: var(--radius-md); background: none;
    color: var(--color-primary-text, var(--color-primary)); cursor: pointer;
}
.hr-iconbtn svg { width: 17px; height: 17px; }
.shell__content .hr-iconbtn:hover { background: var(--gray-100); box-shadow: none; transform: none; }
.shell__content .hr-iconbtn--danger { color: var(--error-soft-strong); }
.shell__content .hr-iconbtn--danger:hover { background: var(--error-soft); }

.shell__content .hr-btn { min-height: 38px; padding: 8px 14px; }

/* Yukarıdaki 17 seçici bilinçli olarak `.shell__content` ile yükseltildi: `.shell__content button`
   (0,1,1) tek sınıflı hr-* kurallarını (0,1,0) eziyordu ve düğme olarak render edilen her modül
   parçası (metrik kartı, çip, ikon düğmesi, takvim hücresi) global düğme arkaplanını/kenarını
   alıyordu. Ölçüm: takvimde izinli/tatil/hafta sonu hücrelerinin ZEMİNİ beyaz kalıyordu ve
   "girilmedi" gününün kesikli çerçevesi hiç çizilmiyordu. Kapsanmış (scoped) CSS'te bu sorun
   kendiliğinden yok — scope attribute'u seçiciyi (0,2,0) yapıyor; global bir modül dilinde
   yükseltme elle yapılmak zorunda. */
.hr-status { padding: 56px 24px; color: var(--slate); text-align: center; }
.hr-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 18px; background: var(--gray-50); }
.hr-pager__total { color: var(--slate); font-size: .78rem; }

/* --- form dili: etiket HER ZAMAN kutunun üstünde --- */
.hr-form { display: grid; gap: 18px; }
.hr-form__section { display: grid; gap: 10px; padding: 18px 20px; }
.hr-form__section > h3 { margin: 0; color: var(--ink-strong); font-size: 1rem; }
.hr-form__section > p { margin: 0; color: var(--slate); font-size: .8rem; }
.hr-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
.hr-field { display: grid; gap: .25rem; min-width: 0; }
.hr-field > span { color: var(--slate); font-size: .76rem; font-weight: 650; }
.hr-field > small { color: var(--slate); font-size: .7rem; }
.hr-field--wide { grid-column: 1 / -1; }
/* Para birimi / sayı gibi kısa alanlar ızgarada yer kaplamasın. `hr-filter--narrow` bunun yerine
   kullanılıyordu: o bir FİLTRE değiştiricisidir ve bir form alanına yapıştırılması kategori hatasıydı. */
.hr-field--narrow { max-width: 160px; }
.hr-field--check { display: flex; align-items: center; gap: .5rem; }
.hr-field--check input { width: auto; min-height: 18px; margin: 0; accent-color: var(--color-primary); }

/* "Yalnız İK yazar" bir metin açıklaması değil, görünür bir durum olmalı: tarayıcının varsayılan
   :disabled görünümü bu kutularda neredeyse hiç fark yaratmıyordu (ölçülen opacity 1). */
.hr-form input:disabled,
.hr-form select:disabled,
.hr-form textarea:disabled {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--slate);
    cursor: not-allowed;
}

/* Çekmece ve modal gövdesi `label { display:block }` yazıyor ve o seçici (0,2,0) `.hr-field`'ı
   (0,1,0) eziyordu — yani çekmece içindeki formlar yine etiket/kutu aynı satıra düşüyordu.
   Ezme burada bilinçli olarak geri alınır. */
.drawer-panel__body label.hr-field,
.crud-modal label.hr-field { display: grid; gap: .25rem; margin: 0; }

/* --- bakiye şeridi: bir bütünün parçaları (izin hakedişi, avans kalanı) --- */
.hr-balance { display: grid; gap: 10px; }
.hr-balance__bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--gray-200); }
.hr-balance__bar > span { display: block; height: 100%; }
.hr-balance__bar > .is-used { background: var(--color-primary); }
.hr-balance__bar > .is-pending { background: var(--warning); }
.hr-balance__figures { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.hr-figure { display: grid; gap: 1px; }
.hr-figure > span { color: var(--slate); font-size: .7rem; font-weight: 700; }
.hr-figure > strong { color: var(--ink-strong); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hr-figure--accent > strong { color: var(--color-primary-text, var(--color-primary)); }
.hr-figure--warn > strong { color: var(--warning-soft-strong); }
.hr-figure--risk > strong { color: var(--error-soft-strong); }

/* --- ay takvimi (puantaj) --- */
.hr-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hr-cal__wd { padding: 2px 0; color: var(--slate); font-size: .68rem; font-weight: 750; text-align: center; text-transform: uppercase; }
.shell__content .hr-cal__day {
    display: grid; align-content: start; gap: 2px; min-height: 62px; padding: 6px 7px;
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    background: var(--surface-light); text-align: start; font-variant-numeric: tabular-nums;
}
.hr-cal__day > b { color: var(--ink-strong); font-size: .76rem; font-weight: 700; }
/* Hücre 375px'te ~37px kalıyor ve "devamsız" gibi bir etiket kabından taşıyordu (ölçülen 52/37).
   Kırpılan metin bir kusurdur: etiket kendi kabında kısalır, tam anlam hücrenin title'ında durur. */
.hr-cal__day > span { color: var(--slate); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell__content .hr-cal__day--off { background: var(--gray-100); }
.shell__content .hr-cal__day--holiday { background: var(--info-soft); }
.hr-cal__day--holiday > span { color: var(--info-soft-strong); font-weight: 650; }
.shell__content .hr-cal__day--leave { background: var(--success-soft); }
.hr-cal__day--leave > span { color: var(--success-soft-strong); font-weight: 650; }
.shell__content .hr-cal__day--absent { background: var(--error-soft); }
.hr-cal__day--absent > span { color: var(--error-soft-strong); font-weight: 650; }
/* Girilmemiş gün ile "çalıştı" ASLA aynı görünmez. */
.shell__content .hr-cal__day--empty { border-style: dashed; border-color: var(--warning); background: var(--surface-light); }
.hr-cal__day--empty > span { color: var(--warning-soft-strong); }
.hr-cal__day.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(10, 132, 241, .18); }

/* --- aylık puantaj matrisi (FAZ H3) ---
   Kendi kaydırma kabı; SOLDA kimlik, SAĞDA özet sütunu yapışkan ve ikisi de OPAK. İki satırlı başlık:
   üstte haftanın günü harfi, altta gün numarası — hangi günün cumartesi olduğu görünür olmalı. */
.hr-matrix { overflow: auto; max-height: min(70vh, 820px); }
.hr-matrix table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface-light); font-variant-numeric: tabular-nums; }
.hr-matrix th, .hr-matrix td {
    padding: .28rem .2rem; border-bottom: 1px solid var(--gray-200);
    text-align: center; font-size: .72rem; color: var(--ink); white-space: nowrap;
}
.hr-matrix thead th { position: sticky; z-index: 2; background: var(--gray-50); color: var(--slate); font-weight: 750; }
.hr-matrix thead tr:first-child th { top: 0; }
.hr-matrix thead tr:nth-child(2) th { top: 25px; }
.hr-matrix tbody tr:nth-child(even) { background: color-mix(in srgb, var(--gray-50) 55%, transparent); }

.hr-matrix__name {
    position: sticky; inset-inline-start: 0; z-index: 1; min-width: 170px; max-width: 220px;
    padding-inline: .6rem; text-align: start; background: var(--surface-light); box-shadow: 1px 0 0 var(--gray-200);
}
.hr-matrix thead .hr-matrix__name { z-index: 3; background: var(--gray-50); }
.hr-matrix tbody tr:nth-child(even) .hr-matrix__name { background: color-mix(in srgb, var(--gray-50) 55%, var(--surface-light)); }

.hr-matrix__sum {
    position: sticky; inset-inline-end: 0; z-index: 1; min-width: 92px; padding-inline: .5rem;
    text-align: end; background: var(--surface-light); box-shadow: -1px 0 0 var(--gray-200);
}
.hr-matrix thead .hr-matrix__sum { z-index: 3; background: var(--gray-50); }
.hr-matrix tbody tr:nth-child(even) .hr-matrix__sum { background: color-mix(in srgb, var(--gray-50) 55%, var(--surface-light)); }
.hr-matrix__sum strong { color: var(--ink-strong); }
.hr-matrix__sum small { display: block; color: var(--slate); font-size: .66rem; }

.hr-matrix__day { min-width: 26px; }
/* Tatil ve hafta sonu sütunu baştan sona zemin tonu alır: satırı hiç açılmamış bir gün de doğru boyanır. */
.hr-matrix__day--off, .hr-matrix td.hr-matrix__day--off { background: var(--gray-100); }
.hr-matrix__day--holiday, .hr-matrix td.hr-matrix__day--holiday { background: var(--info-soft); }

.hr-cell--leave { color: var(--success-soft-strong); font-weight: 700; }
.hr-cell--sick { color: var(--warning-soft-strong); font-weight: 700; }
.hr-cell--absent { color: var(--error-soft-strong); font-weight: 700; }
.hr-cell--off { color: var(--slate); }
/* Girilmemiş gün: kesikli alt çizgi — "boş" ile "çalıştı" ayırt edilebilir olmalı. */
.hr-cell--empty { color: var(--warning-soft-strong); border-bottom: 2px dashed var(--warning); }

/* --- gösterge açıklaması: cümle değil çip dizisi --- */
.hr-legend { display: flex; flex-wrap: wrap; gap: .35rem .6rem; padding: 12px 20px; }

@media (max-width: 860px) { .hr-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .hr-toolbar > * { width: 100%; min-width: 0; }
    .hr-panel__actions { width: 100%; }
    .hr-panel__actions > .hr-btn { flex: 1; }
    .hr-pager { justify-content: center; flex-wrap: wrap; }
    .hr-views { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
    .hr-metrics { gap: 8px; }
    .hr-metric { padding: 10px 12px; }
    .hr-metric > strong { font-size: 1.1rem; }
    .hr-metric > small { display: none; }
    .hr-cal__day { min-height: 52px; padding: 4px 5px; }
}

/* ===========================================================================
   Aşağıdaki sınıflar FAZ H1-H3'te ekranlar yeniden yazılırken kaldırılacak.
   Şimdilik korunuyorlar (ekranlar hâlâ kullanıyor), ama renkleri artık iki
   temada TANIMLI jetonlardan geliyor: --warning-fg / --danger-fg / --info-fg /
   --warning-bg hiçbir yerde tanımlı değildi ve koyu temada 2,66:1 ölçüldü.
   =========================================================================== */

/* PERSONEL FAZ P3 — Belge Takip: kalan süre hücresinin risk rengi. Renk tek başına
   bilgi taşımaz; hücrenin metni ("12 gün kaldı" / "5 gün önce doldu") aynı şeyi söyler. */
.document-expiry--warning { color: var(--warning-soft-strong, #B45309); font-weight: 600; }
.document-expiry--expired { color: var(--error-soft-strong, #B91C1C); font-weight: 700; }

/* PERSONEL FAZ P4 — yıllık izin bakiyesi kartı ve yarım gün onay kutusu. */
.leave-balance__grid { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0; }
.leave-balance__grid dt { opacity: .75; }
.leave-balance__grid dd { margin: 0; font-variant-numeric: tabular-nums; }
.leave-halfday { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.leave-halfday input { width: auto; margin: 0; }

/* PERSONEL FAZ P5 — aylık puantaj matrisi. Donmuş isim hücresinin zemini artık OPAK:
   "background: inherit" şeffafa çözülüyordu ve gün hücreleri ismin altından geçiyordu. */
.timesheet-matrix { font-variant-numeric: tabular-nums; }
.timesheet-matrix__name { position: sticky; left: 0; z-index: 1; background: var(--surface-light); white-space: nowrap; }
.timesheet-matrix__day { text-align: center; min-width: 1.9rem; padding-inline: .15rem; }
.timesheet-matrix__day--weekend, .timesheet-matrix__day--holiday { opacity: .7; }
.timesheet-cell { text-align: center; padding-inline: .15rem; }
.timesheet-cell--off { opacity: .45; }
.timesheet-cell--empty { opacity: .3; }
.timesheet-cell--leave { color: var(--info-soft-strong, #075985); font-weight: 600; }
.timesheet-cell--sick { color: var(--warning-soft-strong, #B45309); font-weight: 600; }
.timesheet-cell--absent { color: var(--error-soft-strong, #B91C1C); font-weight: 700; }
.timesheet-locked { font-weight: 600; }

/* PERSONEL FAZ P6 — kapanmamış avans bakiyesi. */
.advance-remaining--open { color: var(--warning-soft-strong, #B45309); font-weight: 600; }

/* PERSONEL FAZ P7 — belge engeli aşılarak açılmış sefer kaydı. Rozet tek başına bilgi
   taşımaz; gerekçenin tamamı title içinde. */
.trip-override { margin-left: .35rem; padding: .05rem .35rem; border-radius: .25rem; font-size: .75em;
                 background: var(--warning-soft, #FFF7ED); color: var(--warning-soft-strong, #B45309); }

/* PERSONEL FAZ P8 — iş kazası satırı ramak kaladan ayırt edilebilsin. */
.incident--accident { color: var(--error-soft-strong, #B91C1C); font-weight: 600; }


/* ==========================================================================
   ŞABLON TASARIM EKRANLARININ ORTAK KABUĞU (qws-*)
   --------------------------------------------------------------------------
   Bu kurallar önce DocxFieldBinder.razor.css içindeydi. Blazor'da KAPSAMLI CSS
   yalnız kendi bileşenine uygulanır; lojistik belge şablonu tasarım ekranı
   (DocumentTemplateDesign.razor) aynı sınıf adlarını kullandığı hâlde hiçbirini
   almıyordu ve stilsiz çiziliyordu. Kuralları ikinci bir dosyaya KOPYALAMAK
   yerine ortak yere taşındı: iki kopya zamanla ayrışır.

   Konum sondadır ve bu kasıtlıdır: .shell__content button / .module-link ile
   aynı özgüllükte olan kurallar (0,2,0) kaynak sırasıyla çözülür, dolayısıyla
   buradaki yoğunluk ayarları global düğme dilini ezebilmeli.
   ========================================================================== */

/* Faz 3D — Word çalışma alanının görsel yeniden düzeni.
   Ritim 8 / 12 / 16 / 24px; renk, yazı tipi, yarıçap ve gölge deponun mevcut değişkenlerinden
   gelir — yeni bir tasarım dili ya da CSS çatısı eklenmez. */

.qws{display:grid;gap:16px}

/* ---- sayfa başlığı ---- */
.qws-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--slate);font-size:.76rem}
.qws-crumbs a{color:var(--slate);text-decoration:none}
.qws-crumbs a:hover{color:var(--color-primary-text, var(--color-primary));text-decoration:underline}
.qws-crumbs .is-current{color:var(--ink-strong);font-weight:650}

/* min-width:0 — ızgara/esnek öğelerin varsayılan "min-content'ten küçülme" yasağı, sarmalı
   devreye girmeden önce başlığı taşırıyordu. Küçülebilir olunca yan küme alt satıra sarar. */
.qws-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;min-width:0}
.qws-head__id,.qws-head__side{min-width:0;max-width:100%}
.qws-head__id h1{margin:0;color:var(--ink-strong);font-size:1.3rem;letter-spacing:-.01em}
.qws-head__id p{margin:4px 0 0;color:var(--slate);font-size:.82rem;max-width:64ch}
.qws-head__side{display:grid;gap:8px;justify-items:end}
.qws-head__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.qws-head__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.qws-chip{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--gray-200);border-radius:999px;
          background:var(--gray-50);color:var(--slate);font-size:.72rem;font-weight:650;white-space:nowrap}
.qws-chip--code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-weight:500;letter-spacing:.02em}
.qws-chip--blue{background:var(--info-soft);color:var(--info-soft-strong);border-color:transparent}
.qws-chip--token{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;max-width:18rem;overflow:hidden;text-overflow:ellipsis}

/* ---- düğmeler: mevcut buton dilinin üstünde yalnız yoğunluk ayarı ---- */
.qws-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:.35rem .8rem;border:1px solid var(--gray-300);
         border-radius:var(--radius-md);background:var(--surface-light);color:var(--ink);font-size:.8rem;font-weight:600;cursor:pointer}
.qws-btn:hover:not(:disabled){background:var(--surface-hover)}
.qws-btn:disabled{opacity:.55;cursor:default}
.qws-btn--primary{background:var(--color-primary-strong, #0A64C8);border-color:var(--color-primary);color:#fff}
.qws-btn--primary:hover:not(:disabled){filter:brightness(1.05)}
.qws-btn--quiet{border-color:var(--gray-200);background:var(--surface-light,#fff);color:var(--slate);font-weight:600}
.qws-btn--quiet:hover:not(:disabled){background:var(--gray-50);color:var(--ink)}
.qws-btn--wide{width:100%;justify-content:space-between}
.qws-btn__caret{color:var(--slate);font-size:.7rem}
.qws-btn--ghost{border-color:transparent;background:transparent;color:var(--slate)}
.qws-btn--ghost:hover{background:var(--gray-100)}
.qws-btn--file{position:relative;overflow:hidden}
.qws-btn--file.is-busy{opacity:.55}

/* ---- kart kabuğu ---- */
.qws-card{background:var(--surface-light,#fff);border:1px solid var(--gray-200);border-radius:var(--radius-lg);
          box-shadow:var(--shadow-sm);min-width:0;overflow:hidden}

.qws-alert{padding:12px 16px;border-radius:var(--radius-lg);font-size:.82rem}
.qws-alert--error{background:var(--error-soft);color:var(--error-soft-strong)}
.qws-alert ul{margin:6px 0 0;padding-inline-start:18px;display:grid;gap:2px}

.qws-note{margin:0;padding:10px 12px;border-radius:var(--radius-md);font-size:.76rem;line-height:1.45}
.qws-note--info{background:var(--info-soft);color:var(--info-soft-strong)}
.qws-note--warn{background:var(--warning-soft);color:var(--warning-soft-strong);font-weight:600}

.qws-hint{margin:0;color:var(--slate);font-size:.75rem;line-height:1.45}

/* Yayındaki şablon uyarısı: tam genişlik blok değil, kompakt şerit. */
.qws-strip{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:var(--radius-md);font-size:.76rem;line-height:1.4}
.qws-strip--warn{background:var(--warning-soft,#fffbeb);color:var(--warning-soft-strong,#92400e)}
.qws-strip__icon{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:50%;
                 background:rgba(255,255,255,.7);font-size:.68rem;font-weight:800}

/* Geri dönüş bağlantısı. Sorun görseldi: bağlantı, 20px yüksekliğindeki rozet
   şeridinin içinde 38px'lik global düğme kalıbını alıyordu ve altı çizili ham metin
   gibi duruyordu — ne rozetlere ne düğmelere benziyordu. Çözüm onu şeridin YÜKSEKLİĞİNE
   oturtmak ama rozet gibi göstermemek: hap biçimi şeridin dilini korur, birincil renk ve
   ‹ işareti ise "bu bir durum değil, bir eylem" der. İşaret ::before ile gelir, böylece
   iki tasarım ekranı da işaretlemeye dokunmadan aynı görünümü alır. */
.qws-head__meta .module-link{display:inline-flex;align-items:center;gap:4px;min-height:26px;
    padding:2px 10px 2px 8px;border:1px solid var(--gray-200);border-radius:999px;
    background:var(--surface-light,#fff);color:var(--color-primary-text, var(--color-primary));
    font-size:.72rem;font-weight:650;text-decoration:none;white-space:nowrap}
.qws-head__meta .module-link::before{content:"‹";font-size:.95rem;line-height:1}
.qws-head__meta .module-link:hover{background:var(--surface-tinted);border-color:var(--color-primary);
    box-shadow:none;transform:none}

/* ===== CRM (FAZ 1A, ADR-135 kuralı) — modüle özgü `crm-` önekli global blok =====
   Records.razor'ın kapsamlı (scoped) stilleri kopyalanmaz; Firmalar, Firma 360, Satış Masası ve Takipler aynı sınıfları paylaşır.
   Yalnız mevcut tema değişkenlerini kullanır (koyu tema --ink/--slate/--gray-* ile kendiliğinden döner).
   Düğme olarak çizilen sınıflar (.crm-chip, .crm-btn, .crm-tab, .crm-counter, .crm-menu__items button) bilerek `.shell__content` ile yükseltildi: global
   `.shell__content button` (0,1,1) tek sınıflı kuralları (0,1,0) eziyor ve etkin çip/sekme arka planı hiç görünmüyordu (tarayıcıda ölçüldü). */
.crm-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-basis: 100%;
}

.shell__content .crm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shell__content .crm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: 999px;
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.shell__content .crm-chip:hover {
    background: var(--gray-100, #EEF2F7);
}

.shell__content .crm-chip--active,
.shell__content .crm-chip--active:hover {
    background: var(--color-primary-strong, #0A64C8);
    border-color: var(--color-primary-strong, #0A64C8);
    color: #fff;
}

.crm-filter-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--slate, #64748B);
    font-size: 0.8rem;
    font-weight: 650;
}

.crm-filter-field select {
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font: inherit;
    font-size: 0.82rem;
}

.crm-filter-field--check {
    cursor: pointer;
}

/* Satırdaki rol çipi: tıklanmaz, yalnız etiket. Renk çip grubunu (CompanyRoleGroups) anlatır, tek başına anlam taşımaz — metin her zaman yazılıdır. */
.crm-role-chip {
    display: inline-block;
    margin: 1px 4px 1px 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gray-100, #EEF2F7);
    color: var(--ink, #1E293B);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.crm-role-chip--customer { background: rgba(10, 132, 241, 0.12); color: var(--color-primary-dark, #023581); }
.crm-role-chip--prospect { background: rgba(245, 158, 11, 0.16); color: #92400E; }
.crm-role-chip--supplier { background: rgba(100, 116, 139, 0.16); color: var(--ink, #1E293B); }
.crm-role-chip--agent { background: rgba(20, 184, 166, 0.16); color: #115E59; }

.crm-badge-inactive {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gray-100, #EEF2F7);
    color: var(--slate, #64748B);
    font-size: 0.7rem;
    font-weight: 700;
}

.crm-muted {
    color: var(--slate, #64748B);
}

/* CRM FAZ 2B (ADR-232) — kredi ışığı (kabul penceresi, bağımsız rezervasyon, Firma 360): rozet + açıklama + (yalnız Finance.View) tutarlar; dar ekranda alt satıra kayar. */
.crm-credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
}

.crm-credit__text {
    font-size: 0.875rem;
}

.crm-credit__amounts {
    font-size: 0.8125rem;
}

/* CRM FAZ 3A (ADR-233) — hizmet sözleşmesi ışığı (rezervasyon Booking planı, kabul penceresi, Firma 360): rozet + tür/süre + (rezervasyonda, yürürlükte sözleşme yoksa) uyarı ve evrak kısayolu. */
.crm-agreement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
}

.crm-agreement__detail {
    font-size: 0.8125rem;
}

.crm-agreement__text {
    font-size: 0.875rem;
}

.crm-agreement__action {
    font-size: 0.8125rem;
}

/* CRM FAZ 4 S-5 (ADR-265) — müşteri sağlık skoru (Firma 360 başlığı): rozet + bant adı + "neden bu skor?" dökümü; renk tek başına anlam taşımaz (sayı ve bant adı yazılıdır). */
.crm-health {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
}

.crm-health__band {
    font-size: 0.875rem;
}

.crm-health__toggle {
    font-size: 0.8125rem;
    background: none;
    border: 0;
    padding: 0;
    color: var(--primary-dark, #1D4ED8);
    text-decoration: underline;
    cursor: pointer;
}

.crm-health__table {
    flex-basis: 100%;
    width: 100%;
    max-width: 640px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.crm-health__table th,
.crm-health__table td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border, #E2E8F0);
}

.crm-health__table thead th {
    font-weight: 600;
}

.crm-health__table tbody th {
    font-weight: 500;
}

.crm-health__table .crm-health__num {
    text-align: right;
}

.crm-health__off {
    color: var(--slate, #64748B);
}

.crm-health__note {
    flex-basis: 100%;
    font-size: 0.75rem;
    margin: 0;
}

.crm-overdue {
    color: var(--error, #EF4444);
    font-weight: 700;
}

/* Mükerrer firma uyarısı (yeni firma kaydı). */
.crm-dup-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.crm-dup-item {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
}

.crm-dup-item__name {
    font-weight: 700;
    color: var(--ink, #1E293B);
}

.crm-dup-item__meta {
    color: var(--slate, #64748B);
    font-size: 0.8rem;
}

.crm-dup-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 720px) {
    .crm-filter-field {
        flex: 1 1 100%;
    }

    .crm-filter-field select {
        flex: 1;
        min-width: 0;
    }
}

/* ---- CRM: takip listesi, düğmeler ve takip penceresi (CRM FAZ 1A) ---- */
.shell__content .crm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.shell__content .crm-btn:hover:not(:disabled) {
    background: var(--gray-100, #EEF2F7);
}

.shell__content .crm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.shell__content .crm-btn--primary {
    background: var(--color-primary-strong, #0A64C8);
    border-color: var(--color-primary-strong, #0A64C8);
    color: #fff;
}

.shell__content .crm-btn--primary:hover:not(:disabled) {
    background: var(--color-primary-dark, #023581);
}

.shell__content .crm-btn--danger {
    color: var(--error-soft-strong, #B91C1C);
}

.crm-empty {
    padding: 24px 0;
    text-align: center;
}

.crm-act__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.crm-act__row {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
}

.crm-act__row--overdue {
    border-inline-start: 4px solid var(--error, #EF4444);
}

.crm-act__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

.crm-act__kind {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gray-100, #EEF2F7);
    color: var(--ink, #1E293B);
    font-size: 0.72rem;
    font-weight: 700;
}

.crm-act__subject {
    color: var(--ink, #1E293B);
}

.crm-act__when {
    margin-inline-start: auto;
    font-size: 0.8rem;
    white-space: nowrap;
}

.crm-act__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: 0.8rem;
}

.crm-act__meta a {
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    font-weight: 650;
    text-decoration: none;
}

.crm-act__note {
    margin: 0;
    color: var(--ink, #1E293B);
    font-size: 0.84rem;
    white-space: pre-wrap;
}

.crm-act__actions,
.crm-act__complete-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.crm-act__complete {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md, 10px);
    background: var(--gray-50, #F5F7FA);
}

.crm-act__complete textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    font: inherit;
}

.crm-act__next {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.crm-act__next legend {
    padding: 0;
    margin-bottom: 6px;
    color: var(--slate, #64748B);
    font-size: 0.8rem;
    font-weight: 650;
}

.crm-act__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

/* Ertele ▾: yerel <details> açılır menü (betik gerektirmez, klavyeyle çalışır). */
.crm-menu {
    position: relative;
}

.crm-menu > summary {
    list-style: none;
}

.crm-menu > summary::-webkit-details-marker {
    display: none;
}

.crm-menu__items {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 4px);
    z-index: 5;
    display: grid;
    min-width: 120px;
    padding: 4px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 31, 53, 0.12));
}

.shell__content .crm-menu__items button {
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink, #1E293B);
    font: inherit;
    font-size: 0.82rem;
    text-align: start;
    cursor: pointer;
}

.shell__content .crm-menu__items button:hover {
    background: var(--gray-100, #EEF2F7);
}

/* Takip penceresi ve iki sütunlu CRM formları. */
.crm-modal {
    max-width: 640px;
}

.crm-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.crm-form__wide {
    grid-column: 1 / -1;
}

.crm-form__mode {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}

.crm-form__mode label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ink, #1E293B);
}

@media (max-width: 720px) {
    .crm-form {
        grid-template-columns: 1fr;
    }

    .crm-act__when {
        margin-inline-start: 0;
        flex-basis: 100%;
    }
}

/* ---- CRM: Firma 360 (CRM FAZ 1A) ---- */
.crm-360 {
    display: grid;
    gap: 16px;
}

.crm-360__back {
    justify-self: start;
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    font-size: 0.85rem;
    font-weight: 650;
    text-decoration: none;
}

.crm-360__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-light, #fff);
}

.crm-360__title {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.crm-360__title h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--ink-strong, #0F1F35);
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.crm-360__sub {
    font-size: 0.85rem;
}

.crm-360__roles {
    display: flex;
    flex-wrap: wrap;
}

.crm-360__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 4px 0 0;
}

.crm-360__facts > div {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 0.82rem;
}

.crm-360__facts dt {
    color: var(--slate, #64748B);
    font-weight: 650;
}

.crm-360__facts dd {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 0;
    color: var(--ink, #1E293B);
}

.crm-360__facts a {
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    text-decoration: none;
}

.crm-360__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.crm-360__actions a.crm-btn {
    text-decoration: none;
}

.crm-signals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.crm-signal {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 14px 16px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
}

.crm-signal__label {
    color: var(--slate, #64748B);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.crm-signal__value {
    color: var(--ink-strong, #0F1F35);
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.crm-signal__hint {
    font-size: 0.78rem;
}

.shell__content .crm-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--gray-200, #E8EDF3);
}

.shell__content .crm-tab {
    padding: 10px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--slate, #64748B);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.shell__content .crm-tab:hover {
    color: var(--ink, #1E293B);
}

.shell__content .crm-tab--active {
    border-bottom-color: var(--color-primary, #0A84F1);
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
}

.crm-360__panel {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
}

.crm-note {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.crm-note textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    font: inherit;
}

.crm-tl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.crm-tl__item {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-200, #E8EDF3);
    font-size: 0.86rem;
}

.crm-tl__item--planned {
    border-inline-start: 3px dashed var(--color-primary, #0A84F1);
    padding-inline-start: 10px;
}

.crm-tl__when {
    font-size: 0.78rem;
    white-space: nowrap;
}

.crm-tl__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
}

.crm-tl__kind {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gray-100, #EEF2F7);
    color: var(--ink, #1E293B);
    font-size: 0.72rem;
    font-weight: 700;
}

.crm-tl__body a {
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    text-decoration: none;
}

.crm-tl__detail {
    flex-basis: 100%;
    overflow-wrap: anywhere;
}

.shell__content .crm-table-wrap {
    overflow-x: auto;
}

.shell__content .crm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-light, #fff);
}

.shell__content .crm-table th,
.shell__content .crm-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-200, #E8EDF3);
    font-size: 0.84rem;
    text-align: start;
    white-space: nowrap;
}

.shell__content .crm-table th {
    background: var(--gray-50, #F5F7FA);
    color: var(--slate, #64748B);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.shell__content .crm-table a {
    color: var(--color-primary-text, var(--color-primary, #0A84F1));
    font-weight: 650;
    text-decoration: none;
}

@media (max-width: 720px) {
    .crm-360__head {
        padding: 14px;
    }

    .crm-tl__item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ---- CRM: Satış Masası ve Takipler (CRM FAZ 1A) ---- */
.crm-desk {
    display: grid;
    gap: 16px;
}

.crm-desk__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.crm-desk__heading {
    display: grid;
    gap: 2px;
}

.crm-desk__heading h1 {
    margin: 0;
    font-size: 1.45rem;
    color: var(--ink-strong, #0F1F35);
    letter-spacing: -0.02em;
}

.crm-desk__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-desk__actions a.crm-btn {
    text-decoration: none;
}

.crm-desk__list h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--ink, #1E293B);
}

.crm-owner,
.crm-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.shell__content .crm-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.shell__content .crm-counter {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.shell__content .crm-counter:hover {
    background: var(--gray-100, #EEF2F7);
}

.shell__content .crm-counter--active {
    border-color: var(--color-primary, #0A84F1);
    box-shadow: inset 0 0 0 1px var(--color-primary, #0A84F1);
}

.shell__content .crm-counter--alert .crm-counter__value {
    color: var(--error, #EF4444);
}

.shell__content .crm-counter__value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.shell__content .crm-counter__label {
    color: var(--slate, #64748B);
    font-size: 0.78rem;
    font-weight: 650;
}

/* Gösterge Paneli "Bugünkü takiplerim" kartı. */
.crm-dash-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-light, #fff);
}

.crm-dash-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.crm-dash-card__head h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--ink, #1E293B);
}

.crm-dash-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-dash-card__links a {
    text-decoration: none;
}

/* Koyu tema: rol çipleri açık tema için sabitlenmiş koyu metin kullanıyordu ve koyu zeminde okunmuyordu (status-pill ile aynı desen). */
html[data-theme="dark"] .crm-role-chip--customer { background: rgba(59, 130, 246, 0.18); color: #93C5FD; }
html[data-theme="dark"] .crm-role-chip--prospect { background: rgba(245, 165, 36, 0.18); color: #FCD34D; }
html[data-theme="dark"] .crm-role-chip--supplier { background: var(--gray-200, #22324B); color: var(--slate, #A1B1C7); }
html[data-theme="dark"] .crm-role-chip--agent { background: rgba(20, 184, 166, 0.18); color: #5EEAD4; }

/* ===== CRM FAZ 1B-14 (ADR-213) — Fırsatlar: sayaç bandı, pano, kart, çekmece =====
   Düğme olarak çizilen sınıflar (.crm-card__open) bilerek `.shell__content` ile yükseltildi (yukarıdaki not). Pano telefonda (640 px altı) aşamaya göre gruplu TEK sütundur. */
.crm-kpi {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
}

.crm-kpi__value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
}

.crm-kpi__label {
    color: var(--slate, #64748B);
    font-size: 0.78rem;
    font-weight: 650;
}

.crm-kpi__hint {
    color: var(--slate, #64748B);
    font-size: 0.74rem;
}

.crm-deals__filters {
    padding: 4px 0;
}

.crm-deals__search {
    min-height: 34px;
    min-width: 200px;
    padding: 4px 10px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font: inherit;
    font-size: 0.82rem;
}

.crm-filter-field input[type="date"] {
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    font: inherit;
    font-size: 0.82rem;
}

.crm-deals__legend {
    margin: 0;
    font-size: 0.78rem;
}

.crm-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 8px;
}

.crm-board__col {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--gray-50, #F5F7FA);
}

.crm-board__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.crm-board__head h2 {
    margin: 0;
    font-size: 0.9rem;
}

.crm-board__count {
    font-weight: 800;
    color: var(--ink, #1E293B);
}

.crm-board__sum {
    flex-basis: 100%;
    color: var(--slate, #64748B);
    font-size: 0.78rem;
    font-weight: 650;
}

.crm-board__empty {
    margin: 4px 0;
    font-size: 0.8rem;
}

.shell__content .crm-board__more {
    justify-self: stretch;
    justify-content: center;
}

.crm-card {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 31, 53, 0.06));
}

/* Hareketsiz fırsat (sunucu IsStale): soluk. Renk tek başına anlam taşımaz; kartta "Hareketsiz" yazısı da vardır. */
.crm-card--stale {
    opacity: 0.62;
}

.crm-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.shell__content .crm-card__open {
    display: grid;
    gap: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--ink, #1E293B);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.shell__content .crm-card__open:hover {
    background: none;
    box-shadow: none;
    transform: none;
    text-decoration: underline;
}

.crm-card__number {
    color: var(--slate, #64748B);
    font-size: 0.72rem;
    font-weight: 650;
}

.crm-card__title {
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.crm-card__company {
    color: var(--ink, #1E293B);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.crm-card__meta,
.crm-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    font-size: 0.78rem;
}

.crm-card__value {
    font-weight: 800;
}

.crm-card__stale {
    color: var(--warning, #B45309);
    font-weight: 700;
}

.crm-card__menu .crm-menu__items {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.shell__content .crm-card__menu > summary.crm-btn {
    min-height: 28px;
    padding: 0 10px;
}

/* Çekmece. */
.crm-deal {
    display: grid;
    gap: 14px;
}

.crm-deal__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.crm-deal__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
}

.crm-deal__facts > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.crm-deal__facts dt {
    color: var(--slate, #64748B);
    font-size: 0.74rem;
    font-weight: 650;
}

.crm-deal__facts dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.crm-deal__flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
}

.crm-deal__step {
    display: grid;
    gap: 1px;
    min-width: 96px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
    text-decoration: none;
}

.crm-deal__step:hover {
    background: var(--gray-100, #EEF2F7);
}

.crm-deal__step--empty {
    opacity: 0.6;
}

.crm-deal__step-label {
    color: var(--slate, #64748B);
    font-size: 0.72rem;
    font-weight: 650;
}

.crm-deal__step strong {
    font-size: 1.2rem;
    line-height: 1.1;
}

.crm-deal__step small {
    color: var(--slate, #64748B);
    font-size: 0.72rem;
}

.crm-deal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.crm-deal__actions a.crm-btn {
    text-decoration: none;
}

.crm-deal section h3 {
    margin: 0 0 6px;
    font-size: 0.9rem;
}

.crm-deal__loss {
    padding: 10px 12px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-md, 10px);
    background: rgba(239, 68, 68, 0.06);
}

.crm-deal__loss p,
.crm-deal__note {
    margin: 2px 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.crm-deal__history {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-deal__history li {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 0.82rem;
}

.shell__content .crm-table .crm-num,
.crm-num {
    text-align: end;
    white-space: nowrap;
}

.crm-row--muted {
    opacity: 0.65;
}

.quote-deal-chip {
    text-decoration: none;
}

a.quote-deal-chip:hover {
    text-decoration: underline;
}

/* ".crm-desk" bir grid'dir: izgara öğelerinin min-width'i auto olduğu için en geniş çocuğun (tarih kutusu, seçici) asgari genişliği sütunu şişirir ve telefonda yatay taşma yapardı
   (tarayıcıda ölçüldü: içerik 303 px, çocuklar 320 px). Tek sütun minmax(0,1fr) olur. */
.crm-deals {
    grid-template-columns: minmax(0, 1fr);
}

.crm-deals > * {
    min-width: 0;
}

.crm-deals .crm-filter-field select,
.crm-deals .crm-filter-field input[type="date"] {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 640px) {
    .crm-board {
        grid-template-columns: minmax(0, 1fr);
        overflow-x: visible;
    }

    .crm-deals .crm-filter-field {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .crm-deals .crm-filter-field select,
    .crm-deals .crm-filter-field input[type="date"] {
        flex: 1 1 auto;
        width: 100%;
    }

    .crm-deals__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-kpi__value {
        font-size: 1.15rem;
        overflow-wrap: anywhere;
    }

    .crm-deal__facts {
        grid-template-columns: 1fr;
    }

    .crm-deals__search {
        flex-basis: 100%;
    }
}

/* ===== CRM FAZ 1B-15 (ADR-213 Karar 2) — Satış Masası: teklif ve fırsat bölümleri, yeni sayaçlar ===== */
.shell__content a.crm-counter {
    text-decoration: none;
}

.crm-deskbox {
    display: grid;
    gap: 8px;
}

.crm-deskbox h2 {
    margin: 0;
    font-size: 1rem;
}

.crm-deskbox__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-deskrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
}

.crm-deskrow__main {
    color: var(--ink, #1E293B);
    text-decoration: none;
}

.crm-deskrow__main:hover {
    text-decoration: underline;
}

.crm-deskrow__when {
    font-size: 0.82rem;
    font-weight: 700;
}

.crm-deskrow__hint {
    font-size: 0.78rem;
}

.crm-deskcard {
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 16px;
    border: 1px dashed var(--gray-300, #D5DEE9);
    border-radius: var(--radius-md, 10px);
    background: var(--gray-50, #F5F7FA);
}

.crm-deskcard p {
    margin: 0;
}

@media (max-width: 640px) {
    .crm-deskrow__hint {
        flex-basis: 100%;
    }
}

/* ---- CRM FAZ 1B-23 (ADR-214 Karar 2): Excel firma/kişi aktarım çekmecesi ---- */
.crm-import {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.crm-import__intro {
    margin: 0;
}

/* Doğrudan çocuk düğmeler (hata dosyasını indir) ızgarada tam genişliğe yayılmasın. */
.crm-import > .crm-btn {
    justify-self: start;
}

/* Önizleme yüzlerce satır olabilir: "İçe aktar" düğmesi çekmecenin altında yapışık kalır (panelin kendisi kayar; panel dolgusu 24px 28px, taşırılarak kenardan kenara örtülür). */
#crm-import-drawer .drawer-panel__actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 16px -28px -24px;
    padding: 12px 28px;
    border-top: 1px solid var(--gray-200, #E8EDF3);
    background: var(--surface-light, #fff);
}

.crm-import__block {
    display: grid;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200, #E8EDF3);
}

.crm-import__heading {
    margin: 0;
    font-size: 0.9rem;
}

.crm-import__template {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.crm-import__pick {
    position: relative;
    justify-self: start;
    overflow: hidden;
}

.crm-import__pick--busy {
    opacity: 0.6;
    pointer-events: none;
}

/* Dosya girişi görünmez ama düğmenin tamamını kaplar: tıklama ve klavye odağı çalışır, odak halkası düğmede görünür. */
.crm-import__file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.crm-import__pick:focus-within {
    outline: 2px solid var(--blue-500, #3B82F6);
    outline-offset: 2px;
}

.crm-import__file-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.crm-import__file-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.crm-import__count {
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.crm-import__note {
    margin: 0;
    padding: 8px 10px;
    border-left: 3px solid var(--amber, #F59E0B);
    background: var(--gray-100, #EEF2F7);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

/* CRM FAZ 4 S-3 (ADR-263) — sütun hafızası: tanınmayan başlığı alana eşleme satırları. */
.crm-import__mapper {
    display: grid;
    gap: 8px;
}

.crm-import__map-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.crm-import__map-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.crm-import__map-header {
    overflow-wrap: anywhere;
    min-width: 0;
}

.crm-import__map-field {
    flex: 1 1 180px;
    min-width: 0;
}

.crm-import__remembered {
    font-size: 0.85rem;
}

.crm-import__remembered > summary {
    cursor: pointer;
    padding: 4px 0;
}

.crm-import__bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.crm-import__rows {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-import__row {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--gray-200, #E8EDF3);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-light, #fff);
    color: var(--ink, #1E293B);
}

.crm-import__row--error {
    border-color: var(--error, #EF4444);
}

.crm-import__row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crm-import__row-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.crm-import__row-meta,
.crm-import__detail {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.crm-import__error {
    color: var(--error-soft-strong, #B91C1C);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.crm-import__decision {
    justify-self: start;
}

.crm-import__contact-errors summary {
    cursor: pointer;
    font-weight: 650;
}

.crm-import__contact-errors ul {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.crm-import__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0;
}

.crm-import__facts > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.crm-import__facts dt {
    color: var(--slate, #64748B);
    font-size: 0.74rem;
    font-weight: 650;
}

.crm-import__facts dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.crm-import__fact--alert dd {
    color: var(--error-soft-strong, #B91C1C);
}

/* CRM FAZ S-4 (WCAG AA): Syncfusion sayfalayıcıda geçerli sayfa numarası hem açık hem koyu temada 2.67:1 veriyordu; dolu düğme gibi beyaz metin + koyu mavi zemin. */
.e-pager .e-numericitem.e-currentitem.e-currentitem,
.e-pager .e-numericitem.e-currentitem.e-currentitem:hover {
    background: var(--color-primary-strong, #0A64C8);
    border-color: var(--color-primary-strong, #0A64C8);
    color: #fff;
}

/* D4/D12 formları (ADR-327) - fatura türü rozeti (iade / kur farkı) ve iade/kur farkı formu uyarısı */
.kind-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.kind-badge--return { background: #FEF3C7; color: #92400E; }
.kind-badge--fx { background: #E0E7FF; color: #3730A3; }
html[data-theme="dark"] .kind-badge--return { background: rgba(245, 158, 11, .2); color: #FCD34D; }
html[data-theme="dark"] .kind-badge--fx { background: rgba(99, 102, 241, .22); color: #C7D2FE; }
.field-error { color: #B91C1C; font-weight: 600; }
html[data-theme="dark"] .field-error { color: #FCA5A5; }
.linked-actions { flex-wrap: wrap; }
.linked-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: end; padding: .6rem 0; border-bottom: 1px solid rgba(128, 128, 128, .25); }
.linked-line label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; margin: 0; min-width: 0; }
.linked-line label input { width: 100%; min-width: 0; }
.linked-line__wide { grid-column: 1 / -1; }
.linked-line__total { display: flex; flex-direction: column; font-weight: 600; }
.linked-line__total small { font-weight: 400; opacity: .7; }