:root {
    color-scheme: light;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --text: #17202a;
    --muted: #667085;
    --line: #d9e0e8;
    --primary: #176b87;
    --primary-dark: #0f4d64;
    --accent: #2f9e8f;
    --danger: #b42318;
    --success: #067647;
    --shadow: 0 14px 32px rgba(17, 24, 39, .07);
    --sidebar: #f7f9fb;
    --sidebar-soft: #edf3f6;
    --sidebar-ink: #1f2d3a;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.mobile-menu-open { overflow: hidden; }
body.view-switching .content { opacity: .45; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.app-shell { display: grid; min-height: 100vh; grid-template-columns: 272px 1fr; transition: grid-template-columns .2s ease; }
body.sidebar-collapsed .app-shell { grid-template-columns: 86px 1fr; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; border-right: 1px solid var(--line); background: white; color: var(--text); padding: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 12px; }
.sidebar-head { display: flex; min-width: 0; align-items: flex-start; gap: 8px; }
.sidebar-head .brand { min-width: 0; flex: 1 1 auto; }
.brand-mark { display: block; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; object-fit: contain; }
.brand-logo { display: block; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--line); border-radius: 8px; background: white; object-fit: contain; }
.brand strong, .brand small, .client-brand small, .client-brand b, .sidebar-footer strong, .sidebar-footer small { display: block; }
.brand small, .client-brand small, .sidebar-footer small, .muted { color: var(--muted); font-size: 12px; }
.client-brand { display: flex; align-items: center; gap: 12px; margin-top: 22px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 12px; }
.client-brand img, .client-brand > strong { width: 42px !important; height: 42px !important; max-width: 42px !important; max-height: 42px !important; flex: 0 0 42px; border-radius: 8px; background: white; object-fit: contain; }
.client-brand > strong { display: grid; place-items: center; color: var(--primary-dark); font-size: 20px; }
.client-brand b { margin-top: 2px; color: var(--text); font-size: 13px; line-height: 1.25; }
.nav { display: grid; gap: 10px; align-content: start; flex: 1 1 auto; margin-top: 34px; min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.sidebar-search-shell { margin-top: 10px; }
.sidebar-menu-search { display: grid; width: 100%; height: 34px; place-items: center start; margin: 0; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--muted); cursor: pointer; padding: 6px 10px; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.sidebar-menu-search:hover, .sidebar-menu-search:focus-visible { border-color: #a9d8df; background: #edf6f7; color: var(--primary-dark); outline: 0; }
.sidebar-menu-search svg { width: 16px; height: 16px; }
.sidebar-search { position: relative; display: none; }
.sidebar-search-shell.is-open .sidebar-menu-search { display: none; }
.sidebar-search-shell.is-open .sidebar-search { display: block; }
.sidebar-search > svg { position: absolute; top: 50%; left: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; transform: translateY(-50%); }
.sidebar-search input { width: 100%; min-height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; color: var(--text); padding: 7px 10px 7px 30px; }
.sidebar-search input:focus { border-color: #8bc7d2; background: white; box-shadow: 0 0 0 3px rgba(23, 107, 135, .12); outline: 0; }
.sidebar-search input::placeholder { color: var(--muted); }
.sidebar-search [hidden], .nav [hidden] { display: none !important; }
.menu-search { display: grid; gap: 7px; margin-bottom: 4px; }
.menu-search span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.menu-search input { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--text); padding: 10px 11px; transition: border .14s ease, box-shadow .14s ease, background .14s ease; }
.menu-search input:focus { border-color: #8bc7d2; background: white; box-shadow: 0 0 0 3px rgba(23, 107, 135, .12); outline: 0; }
.menu-search input::placeholder { color: var(--muted); }
.nav-group { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 9px; }
.nav-section { display: flex; align-items: center; justify-content: space-between; margin: 4px 12px 5px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-section::after { content: ">"; font-size: 17px; font-weight: 900; line-height: 1; transform: rotate(90deg); transition: transform .15s ease; }
.nav-group.is-collapsed > :not(.nav-section) { display: none; }
.nav-group.is-collapsed .nav-section::after { transform: rotate(0); }
.nav-link { position: relative; display: flex; align-items: center; width: 100%; min-height: 42px; border: 0; border-radius: 8px; background: transparent; color: #475467; cursor: pointer; padding: 11px 12px; overflow: hidden; font-weight: 700; line-height: 1.25; text-align: left; }
.nav-link.active, .nav-link:hover { background: #eaf7f5; color: var(--primary-dark); box-shadow: none; }
.nav-link.active::before { position: absolute; left: 0; width: 3px; height: 22px; border-radius: 999px; background: var(--accent); content: ""; }
.nav-link svg, .nav-sub svg, .mobile-bottom-nav svg, .mobile-menu-button svg, .mobile-profile-button svg, .button svg, .btn svg, .install-link svg, .sidebar-toggle svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-link span { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link .nav-count { min-width: 18px; margin-left: auto; border-radius: 999px; background: var(--danger); color: white; padding: 3px 6px; font-size: 10px; line-height: 1; text-align: center; }
.nav-accordion-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px; align-items: center; }
.nav-accordion-row .nav-link { min-width: 0; }
.nav-accordion-title { font-family: inherit; }
.nav-accordion-row [data-nav-accordion-toggle] { display: grid; width: 28px; height: 28px; place-items: center; justify-self: end; border: 0; border-radius: 6px; background: transparent; color: #71818a; cursor: pointer; padding: 4px; transition: background .15s ease, color .15s ease; }
.nav-accordion-row [data-nav-accordion-toggle]:hover, .nav-accordion-row [data-nav-accordion-toggle]:focus-visible { background: #edf6f7; color: var(--primary-dark); outline: 0; }
.nav-accordion-row [data-nav-accordion-toggle] svg { width: 17px; height: 17px; transition: transform .16s ease; }
.nav-accordion.open .nav-accordion-row [data-nav-accordion-toggle] svg { transform: rotate(180deg); }
.nav-sub { display: grid; gap: 2px; margin: -2px 0 4px 28px; }
.nav-accordion:not(.open) .nav-sub { display: none; }
.nav-sub-label { padding: 10px 10px 2px; color: #98a2b3; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.nav-sub-label:first-child { padding-top: 2px; }
.nav-sub a { display: flex; align-items: center; gap: 8px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 700; padding: 8px 10px; }
.nav-sub a.active, .nav-sub a:hover { background: #f3faf8; color: var(--primary-dark); }
.module-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; border: 1px solid #cfe5eb; border-radius: 8px; background: linear-gradient(135deg, #ffffff, #edf8fa); padding: 22px; }
.module-hero h2 { margin: 0 0 5px; color: var(--primary-dark); }
.module-hero p { margin: 0; color: var(--muted); }
.module-hero-icon, .module-feature-icon { display: grid; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.module-hero-icon { width: 52px; height: 52px; flex: 0 0 52px; }
.module-hero-icon svg { width: 25px; height: 25px; }
.module-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.module-feature-card { display: grid; gap: 12px; align-content: start; min-height: 170px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 16px; box-shadow: var(--shadow); }
.module-feature-card:hover, .module-feature-card.active { border-color: #9bcfd7; background: #f7fcfc; }
.module-feature-card > span:nth-child(2) { display: grid; gap: 5px; }
.module-feature-card strong, .module-feature-card small { display: block; }
.module-feature-card small { color: var(--muted); line-height: 1.45; }
.module-feature-icon { width: 38px; height: 38px; }
.module-feature-icon svg { width: 20px; height: 20px; }
.module-feature-detail { margin-top: 16px; }
.permission-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; grid-column: 1 / -1; }
.permission-check-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0; }
.permission-check-group { display: grid; gap: 6px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 10px; }
.permission-check-group legend { padding: 0 4px; color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.permission-check-group .check { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; font-weight: 600; }
.permission-check-group .check input { width: auto; flex: 0 0 auto; margin-top: 2px; }
.user-permission-form { display: grid; min-width: 520px; gap: 8px; }
.profile-help { display: grid; gap: 4px; border: 1px solid #cfe5eb; border-radius: 8px; background: #f2fafb; padding: 12px; color: var(--primary-dark); }
.profile-help span { color: var(--muted); font-size: 12px; }
.profile-guide-card, .users-existing-card { margin-top: 16px; }
.profile-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profile-guide-grid > div { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 12px; }
.profile-guide-grid span, .profile-guide-grid small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.sidebar-footer { flex: 0 0 auto; margin-top: 28px; }
.install-link { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--text); cursor: pointer; padding: 12px; text-align: left; }
.install-link:hover { background: var(--surface-2); }
body.sidebar-collapsed .sidebar { padding: 18px; }
body.sidebar-collapsed .sidebar-head { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 8px; }
body.sidebar-collapsed .sidebar-head .brand { width: 36px; justify-content: center; }
body.sidebar-collapsed .brand > span:not(.brand-mark), body.sidebar-collapsed .client-brand div, body.sidebar-collapsed .menu-search, body.sidebar-collapsed .sidebar-search, body.sidebar-collapsed .nav-section, body.sidebar-collapsed .nav-sub, body.sidebar-collapsed .nav-accordion-row [data-nav-accordion-toggle], body.sidebar-collapsed .nav-link span, body.sidebar-collapsed .sidebar-footer { display: none; }
body.sidebar-collapsed .sidebar-search-shell { width: 36px; margin: 10px auto 0; }
body.sidebar-collapsed .sidebar-menu-search { width: 36px; height: 36px; place-items: center; padding: 6px; }
body.sidebar-collapsed .client-brand { justify-content: center; padding: 8px; }
body.sidebar-collapsed .nav-link { justify-content: center; min-height: 42px; padding: 10px; }
body.sidebar-collapsed .nav-link svg { width: 20px; height: 20px; }
body.sidebar-collapsed .nav-link::after { content: none; }
.mobile-overlay { position: fixed; inset: 0; z-index: 30; display: none; background: rgba(16, 24, 32, .5); }
.mobile-overlay.open { display: block; }
.button-icon { display: inline-grid; width: 18px; height: 18px; place-items: center; }
.mobile-menu-button, .mobile-bottom-nav, .mobile-sidebar-close, .mobile-profile-button { display: none; }
.sidebar-toggle { display: inline-grid; width: 32px; height: 32px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--muted); cursor: pointer; padding: 6px; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.sidebar-toggle:hover, .sidebar-toggle:focus-visible { border-color: #a9d8df; background: #edf6f7; color: var(--primary-dark); outline: 0; }
.sidebar-toggle svg { width: 17px; height: 17px; }
.mobile-sidebar-close { width: 32px; height: 32px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--muted); cursor: pointer; padding: 6px; }
.mobile-sidebar-close:hover, .mobile-sidebar-close:focus-visible { border-color: #a9d8df; background: #edf6f7; color: var(--primary-dark); outline: 0; }
.mobile-sidebar-close svg { width: 17px; height: 17px; }

.main { min-width: 0; overflow-x: clip; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); padding: 22px 32px; }
.topbar-page-actions { display: flex; align-items: center; flex: 0 0 auto; }
.topbar-global-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.dashboard-widget-control { position: relative; }
.dashboard-widget-trigger { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--primary-dark); }
.dashboard-widget-trigger:hover, .dashboard-widget-trigger:focus-visible { border-color: #a9d8df; background: #edf6f7; outline: 0; }
.dashboard-widget-trigger[hidden] { display: none; }
.dashboard-widget-dialog { width: min(440px, calc(100vw - 32px)); max-width: calc(100vw - 32px); border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--text); padding: 0; box-shadow: 0 24px 70px rgba(15, 23, 42, .22); }
.dashboard-widget-dialog::backdrop { background: rgba(15, 23, 42, .32); backdrop-filter: blur(2px); }
.dashboard-widget-dialog form { display: grid; gap: 0; }
.dashboard-widget-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 20px; }
.dashboard-widget-dialog-header h2 { margin: 2px 0 0; font-size: 21px; }
.dashboard-widget-options { display: grid; gap: 8px; max-height: min(55vh, 460px); overflow-y: auto; padding: 16px 20px; }
.dashboard-widget-option { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 11px 12px; cursor: pointer; }
.dashboard-widget-option:hover { border-color: #a9d8df; background: #f2fafb; }
.dashboard-widget-option input { width: 17px; height: 17px; flex: 0 0 auto; }
.dashboard-widget-option span { display: grid; gap: 2px; }
.dashboard-widget-option small { color: var(--muted); font-size: 12px; }
.dashboard-widget-city-setting { display: grid; gap: 6px; border-top: 1px solid #edf0f2; padding: 14px 20px 16px; }
.dashboard-widget-city-setting label { color: var(--text); font-size: 13px; font-weight: 800; }
.dashboard-widget-city-setting select { width: 100%; min-height: 38px; }
.dashboard-widget-city-setting small { color: var(--muted); font-size: 11px; }
.dashboard-widget-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding: 14px 20px; }
.theme-trigger { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--primary-dark); }
.theme-trigger:hover, .theme-trigger:focus-visible { border-color: #a9d8df; background: #edf6f7; outline: 0; }
.theme-dialog { width: min(430px, calc(100vw - 32px)); max-width: calc(100vw - 32px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 0; box-shadow: 0 24px 70px rgba(15, 23, 42, .22); }
.theme-dialog::backdrop { background: rgba(15, 23, 42, .32); backdrop-filter: blur(2px); }
.theme-dialog form { display: grid; gap: 0; }
.theme-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 20px; }
.theme-dialog-header h2 { margin: 2px 0 0; font-size: 21px; }
.theme-dialog-header p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.theme-options { display: grid; gap: 8px; padding: 16px 20px 20px; }
.theme-option { display: grid; grid-template-columns: auto 68px minmax(0, 1fr) 18px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 10px 11px; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.theme-option:hover, .theme-option:has(input:checked) { border-color: #8bc7d2; background: #edf7f7; }
.theme-option:hover { transform: translateY(-1px); }
.theme-option.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent); }
.theme-option input { width: 17px; height: 17px; min-height: 17px; margin: 0; }
.theme-option > span:last-child { display: grid; gap: 2px; }
.theme-option small { color: var(--muted); font-size: 11px; }
.theme-option-check { width: 17px; height: 17px; color: var(--primary); opacity: 0; transform: scale(.7); transition: opacity .16s ease, transform .16s ease; }
.theme-option.is-selected .theme-option-check { opacity: 1; transform: scale(1); }
.theme-preview { display: grid; grid-template-columns: 13px 1fr; grid-template-rows: repeat(3, 6px); gap: 3px; width: 68px; height: 38px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.theme-preview i { display: block; border-radius: 2px; background: #d8e4e8; }
.theme-preview i:first-child { grid-row: 1 / -1; background: #176b87; }
.theme-preview i:nth-child(2) { background: #ffffff; }
.theme-preview i:nth-child(3) { background: #a9d8df; }
.theme-preview-night { background: #17232d; border-color: #344752; }
.theme-preview-night i { background: #344752; }
.theme-preview-night i:first-child { background: #5fc1cf; }
.theme-preview-night i:nth-child(2) { background: #edf7fa; }
.theme-preview-night i:nth-child(3) { background: #52cfaa; }
.theme-preview-graphite { background: #f0f1f3; }
.theme-preview-graphite i:first-child { background: #4f5d75; }
.theme-preview-graphite i:nth-child(2) { background: #ffffff; }
.theme-preview-graphite i:nth-child(3) { background: #c7ced9; }
.theme-preview-emerald { background: #f0f8f4; }
.theme-preview-emerald i:first-child { background: #117a65; }
.theme-preview-emerald i:nth-child(2) { background: #ffffff; }
.theme-preview-emerald i:nth-child(3) { background: #9bd8b7; }
.dashboard-utility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.dashboard-widget-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 18px 20px; box-shadow: 0 8px 22px rgba(17, 24, 39, .04); }
.dashboard-widget-settings-trigger { display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; border: none; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; padding: 0; }
.dashboard-widget-settings-trigger:hover { background: var(--surface-2); color: var(--primary-dark); }
.dashboard-widget-settings-trigger svg { width: 16px; height: 16px; }
.dashboard-widget-settings-panel { position: absolute; top: 44px; right: 18px; z-index: 6; display: grid; gap: 6px; min-width: 190px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 12px 14px; box-shadow: 0 14px 32px rgba(15, 23, 42, .16); }
.dashboard-widget-settings-panel label { color: var(--muted); font-size: 11px; font-weight: 700; }
.dashboard-widget-settings-panel select { width: 100%; }
.dashboard-widget-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; color: var(--muted); }
.dashboard-widget-card-heading > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dashboard-widget-card-heading > div > span:last-child { display: grid; gap: 3px; min-width: 0; }
.dashboard-widget-card-heading small { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.dashboard-widget-card-heading strong { overflow: hidden; color: var(--text); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-widget-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 9px; background: #edf6f7; color: var(--primary-dark); }
.dashboard-widget-icon svg { width: 19px; height: 19px; }
.dashboard-widget-card-heading > svg { width: 17px; height: 17px; color: #94a3b8; }
.dashboard-weather-main { display: flex; align-items: center; gap: 17px; margin: 20px 0 16px; }
.dashboard-weather-main > strong { color: var(--primary-dark); font-size: 42px; line-height: .95; letter-spacing: -.02em; }
.dashboard-weather-main > div { display: grid; gap: 5px; }
.dashboard-weather-main b { color: var(--text); font-size: 15px; }
.dashboard-weather-main span, .dashboard-widget-empty { color: var(--muted); font-size: 12px; }
.dashboard-widget-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid #edf0f2; padding-top: 12px; color: var(--muted); font-size: 11px; }
.dashboard-rate-list { display: grid; gap: 8px; margin-top: 18px; }
.dashboard-rate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0f2; padding-bottom: 8px; }
.dashboard-rate-row:last-child { border-bottom: 0; padding-bottom: 0; }
.dashboard-rate-row span { display: flex; align-items: baseline; gap: 8px; }
.dashboard-rate-row b { color: var(--text); font-size: 13px; }
.dashboard-rate-row small { color: var(--muted); font-size: 11px; }
.dashboard-rate-row strong { color: var(--primary-dark); font-size: 14px; white-space: nowrap; }
.dashboard-widget-empty { margin: 18px 0 2px; line-height: 1.5; }
.topbar h1, .title { margin: 0; font-size: 28px; line-height: 1.1; }
.eyebrow { margin: 0 0 4px; color: var(--primary); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.work-tabs-shell { position: sticky; top: 84px; z-index: 19; display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; align-items: end; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .92); padding: 8px 28px 0; backdrop-filter: blur(14px); }
.work-tabs-shell[hidden] { display: none; }
.work-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 0; scrollbar-width: thin; }
.work-tabs::-webkit-scrollbar { height: 6px; }
.work-tabs::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5df; }
.work-tab { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 230px; min-height: 36px; gap: 7px; border: 1px solid var(--line); border-bottom-color: #c8d5df; border-radius: 8px 8px 0 0; background: #f8fafc; color: #475467; padding: 8px 7px 8px 10px; font-size: 13px; font-weight: 800; box-shadow: 0 8px 18px rgba(17, 24, 39, .04); transition: background .14s ease, color .14s ease, border .14s ease, transform .14s ease; }
.work-tab:hover { transform: translateY(-1px); background: white; color: var(--primary-dark); }
.work-tab.active { border-color: #a9d8df; border-bottom-color: white; background: white; color: var(--primary-dark); box-shadow: 0 -1px 0 white inset, 0 10px 20px rgba(17, 24, 39, .05); }
.work-tab span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-tab svg { width: 16px; height: 16px; flex: 0 0 16px; }
.work-tab button, .work-tabs-clear { display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; padding: 4px; }
.work-tab button:hover, .work-tabs-clear:hover { background: rgba(15, 77, 100, .08); }
.work-tabs-clear { width: 34px; height: 34px; margin-bottom: 5px; border: 1px solid var(--line); background: white; color: var(--muted); }
.work-tabs-clear svg { width: 16px; height: 16px; }
.content { padding: 28px; }
.user-menu { display: flex; align-items: center; gap: 12px; }
.user-chip { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 8px 10px; transition: border .16s ease, box-shadow .16s ease; }
.user-chip:hover { border-color: #b9dce5; box-shadow: 0 8px 20px rgba(17, 24, 39, .06); }
.user-avatar { display: grid; width: 34px !important; height: 34px !important; min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px; place-items: center; overflow: hidden; border-radius: 8px; background: var(--surface-2); color: var(--primary-dark); font-weight: 800; line-height: 1; }
.user-avatar img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: var(--avatar-fit, cover); object-position: var(--avatar-position, center center); }
.avatar { display: grid; width: 34px !important; height: 34px !important; min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px; place-items: center; overflow: hidden; border-radius: 8px; background: var(--surface-2); color: var(--primary-dark); font-size: 15px; font-weight: 850; line-height: 1; }
.avatar img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: var(--avatar-fit, cover); object-position: var(--avatar-position, center center); background: white; }
.avatar-sm { width: 34px !important; height: 34px !important; min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px; flex: 0 0 34px; }
.user-chip strong, .user-chip small { display: block; }
.user-chip small { color: var(--muted); }
.notification-button { position: relative; display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 38px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--primary-dark); transition: border .16s ease, background .16s ease, transform .16s ease; }
.notification-button:hover, .notification-button:focus-visible { border-color: #9bcfd7; background: #edf8f8; transform: translateY(-1px); outline: 0; }
.notification-button svg { width: 18px; height: 18px; }
.notification-count { position: absolute; top: -5px; right: -5px; display: grid; min-width: 18px; height: 18px; place-items: center; border: 2px solid white; border-radius: 999px; background: var(--danger); color: white; padding: 0 4px; font-size: 10px; font-weight: 900; line-height: 1; }
.mobile-notification-count { display: inline-grid; min-width: 15px; height: 15px; place-items: center; border-radius: 999px; background: var(--danger); color: white; padding: 0 3px; font-size: 9px; line-height: 1; }
.toast-stack { position: fixed; top: 96px; right: 16px; z-index: 95; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 14px; box-shadow: 0 16px 36px rgba(15, 23, 42, .18); animation: toast-in .18s ease-out; }
.toast-icon { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 999px; background: rgba(23, 107, 135, .12); color: var(--primary-dark); }
.toast-body { flex: 1 1 auto; min-width: 0; }
.toast-body strong { display: block; font-size: 13px; }
.toast-body span { display: -webkit-box; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.toast-close { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px; }
.toast.is-leaving { animation: toast-out .16s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }
.notification-page-intro { align-items: center; }
.notification-add-button { width: 40px !important; min-height: 40px; padding: 0; }
.notification-list { display: grid; gap: 12px; }
.notification-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 16px; box-shadow: var(--shadow); }
.notification-card.is-unread { border-color: #9bcfd7; box-shadow: 0 14px 32px rgba(23, 107, 135, .10); }
.notification-card-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.notification-card-icon svg { width: 20px; height: 20px; }
.notification-card-heading, .notification-card-footer, .notification-compose-footer, .notification-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notification-card-heading h3 { margin: 8px 0 0; font-size: 17px; }
.notification-card-heading time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.notification-card-content > p { margin: 12px 0; color: #475467; line-height: 1.6; white-space: pre-line; }
.notification-card-footer { border-top: 1px solid #edf0f2; padding-top: 10px; }
.notification-card-footer form { display: inline-flex; }
.read-state { display: inline-flex; align-items: center; gap: 5px; color: var(--success); font-size: 12px; font-weight: 800; }
.read-state svg, .notification-compose-footer svg { width: 15px; height: 15px; }
.notification-compose-card { max-width: 980px; }
.notification-compose-form { display: grid; gap: 16px; }
.notification-recipient-fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.notification-recipient-fieldset legend { padding: 0 6px; color: var(--primary-dark); font-size: 13px; font-weight: 800; }
.form-grid > fieldset.full { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; }
.form-grid > fieldset.full legend { padding: 0 5px; color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.check-list { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.notification-recipient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 320px; overflow: auto; }
.notification-recipient-option { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 10px; cursor: pointer; }
.notification-recipient-option:hover { border-color: #9bcfd7; background: #f3fbfb; }
.notification-recipient-option input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.notification-recipient-option span { display: grid; gap: 3px; min-width: 0; }
.notification-recipient-option strong, .notification-recipient-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-recipient-option small, .notification-history-row small { color: var(--muted); font-size: 11px; }
.notification-compose-footer { border-top: 1px solid var(--line); padding-top: 14px; }
.notification-compose-footer .muted { display: inline-flex; align-items: center; gap: 6px; }
.notification-history-card { margin-top: 16px; }
.notification-history-list { display: grid; gap: 0; }
.notification-history-row { border-bottom: 1px solid #edf0f2; padding: 12px 0; }
.notification-history-row > div { display: grid; gap: 4px; }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 40px; text-align: center; }

.topbar + .content .topbar { position: static; min-height: auto; padding: 0; margin-bottom: 18px; border: 0; background: transparent; backdrop-filter: none; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 18px; box-shadow: var(--shadow); }
.stat-card span, .stat-card small { display: block; color: var(--muted); }
.stat-card strong { display: block; margin: 7px 0; font-size: 28px; line-height: 1.1; color: var(--primary-dark); }
.chart-container { position: relative; width: 100%; height: 280px; margin-top: 12px; }
.chart-container.compact { height: 220px; }
.dashboard-welcome { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); padding: 20px 24px; }
.dashboard-welcome-copy h2 { margin: 3px 0 5px; color: var(--text); font-size: 22px; }
.dashboard-welcome-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.dashboard-welcome-eyebrow { display: block; color: var(--primary); font-size: 10.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-digest { margin-bottom: 16px; }
.dashboard-digest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.dashboard-digest-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); padding: 13px 14px; color: var(--text); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.dashboard-digest-item:hover { border-color: var(--primary); transform: translateY(-1px); }
.dashboard-digest-icon { grid-row: 1 / span 2; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; background: var(--surface); color: var(--primary); }
.dashboard-digest-icon svg { width: 18px; height: 18px; }
.dashboard-digest-count { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--primary-dark); }
.dashboard-digest-label { color: var(--muted); font-size: 12px; }

/* Customizable widget grid (GridStack): each dashboard widget becomes a .grid-stack-item so it
   can be dragged/resized like GLPI's dashboard. GridStack itself supplies absolute positioning
   and resize handles via its own CDN stylesheet; the rules below only make our existing
   .card/.stat-card/etc. widgets fill that positioned box and add a small drag handle so dragging
   doesn't hijack clicks on links/buttons/table rows inside the widget content. */
.grid-stack { margin-bottom: 16px; }
.grid-stack .grid-stack-item-content { position: relative; }
.grid-stack .grid-stack-item-content > .card,
.grid-stack .grid-stack-item-content > .stat-card,
.grid-stack .grid-stack-item-content > .dashboard-widget-card,
.grid-stack .grid-stack-item-content > .agent-dashboard-panel,
.grid-stack .grid-stack-item-content > .crm-dashboard-kpi {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: auto;
}
.dashboard-widget-drag-handle {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 18px;
    border-radius: 5px;
    color: var(--muted);
    cursor: move;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background .15s ease;
}
.dashboard-grid.is-layout-editing .dashboard-widget-drag-handle { opacity: .55; pointer-events: auto; }
.dashboard-grid.is-layout-editing .dashboard-widget-drag-handle:hover { opacity: 1; background: var(--surface-2); }
.dashboard-widget-drag-handle svg { width: 14px; height: 14px; }
.dashboard-grid.is-layout-editing .grid-stack-item.ui-draggable-dragging .dashboard-widget-drag-handle,
.dashboard-grid.is-layout-editing .grid-stack-item.ui-resizable-resizing .dashboard-widget-drag-handle { opacity: 1; }
.dashboard-grid:not(.is-layout-editing) { touch-action: pan-y; }
.platform-tenant-list { display: grid; gap: 14px; }
.platform-tenant-card { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 16px; }
.platform-tenant-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.platform-tenant-header h3 { margin: 0 0 4px; }
.platform-license-grid { display: grid; gap: 8px; }
.platform-license-row { display: grid; grid-template-columns: minmax(170px, 1fr) 130px 140px 140px auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 9px; }
.platform-license-name strong, .platform-license-name small { display: block; }
.platform-license-name small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.platform-license-row .button { min-height: 36px; padding: 8px 10px; }
.card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 18px; box-shadow: var(--shadow); }
.card h2, .card h3 { letter-spacing: 0; }
.report-card { display: grid; align-content: start; gap: 12px; min-height: 170px; }
.report-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.report-icon svg { width: 22px; height: 22px; }
.automation-card { display: grid; gap: 12px; align-content: start; }
.task-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.task-meta span { display: block; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 10px; color: var(--muted); font-size: 12px; }
.task-meta strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 12px; text-transform: uppercase; }
.task-meta code { white-space: normal; word-break: break-word; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #344054; padding: 9px 12px; font-weight: 800; }
.tab.active, .tab:hover { border-color: #b8dce2; background: #e9f5f7; color: var(--primary-dark); }
.tab svg { width: 17px; height: 17px; }
.risk-list { display: grid; gap: 12px; }
.risk-item { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #f8fafc; }
.risk-item strong, .risk-item span { display: block; }
.risk-item .risk-value { color: var(--primary-dark); font-size: 26px; font-weight: 900; }
.risk-item.ok { border-color: #abefc6; background: #f3fbf6; }
.risk-item.warning { border-color: #fedf89; background: #fff9eb; }
.risk-item.danger { border-color: #fecdca; background: #fff3f0; }
.stat { font-size: 34px; font-weight: 800; margin-top: 6px; }
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer; font-weight: 800; }
.button.primary, .btn { background: var(--primary); color: white; }
.button.secondary, .btn.secondary { background: var(--surface-2); color: #20332d; }
.button.danger, .btn.danger { background: var(--danger); color: white; }
.icon-button { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 1px solid #c8d3d8; border-radius: 7px; background: #eef2f4; color: #6a7b85; padding: 0; cursor: pointer; }
.icon-button:hover { border-color: #aebfc7; background: #e3eaed; color: #354b56; }
.icon-button:focus-visible { outline: 2px solid #72b9c2; outline-offset: 2px; }
.icon-button svg { width: 17px; height: 17px; stroke-width: 2; }
.full { width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #e6ebe5; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
input, textarea, select { width: 100%; border: 1px solid #cfd8d2; border-radius: 8px; background: white; padding: 10px 12px; }
/* Aranabilir secim kutusu. Yerel <select> formda kalir ama gorunmez; uzerine bir buton ve
   arama alanini iceren acilir panel cizilir. Tema degiskenleriyle boyanir ki koyu temalarda
   da dogru gorunsun (yerel input kurallari <button>'a uygulanmiyor). */
.combo-select { position: relative; min-width: 0; }
.combo-select-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.combo-select-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 10px 12px; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.combo-select-button:hover { border-color: #aebfc7; }
.combo-select-button[aria-expanded="true"] { border-color: var(--primary); }
.combo-select-button:focus-visible { outline: 2px solid #72b9c2; outline-offset: 2px; }
.combo-select-button svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); }
.combo-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-select-value.is-placeholder { color: var(--muted); font-weight: 400; }
.combo-select-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); padding: 8px; }
.combo-select-search { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.combo-select-list { max-height: 240px; margin: 8px 0 0; overflow-y: auto; padding: 0; list-style: none; }
.combo-select-list li { border-radius: 6px; padding: 8px 10px; font-size: 14px; cursor: pointer; }
.combo-select-list li.is-active { background: var(--surface-2); }
.combo-select-list li.is-selected { color: var(--primary-dark); font-weight: 700; }
.combo-select-list li.is-selected.is-active { background: #e9f5f7; }
.combo-select-empty { margin: 10px 4px 4px; color: var(--muted); font-size: 13px; }
textarea { min-height: 120px; resize: vertical; }
label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
[hidden] { display: none !important; }
form.inline { display: inline; }
.badge { display: inline-flex; border-radius: 999px; padding: 4px 9px; background: #e9f5f7; color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.badge-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.badge-warning { background: color-mix(in srgb, #b7791f 16%, transparent); color: #b7791f; }
.alert { margin-bottom: 16px; border-radius: 8px; padding: 12px 14px; }
.alert.success { border: 1px solid #abefc6; background: #edfdf3; color: var(--success); }
.alert.error { border: 1px solid #fecdca; background: #fff3f0; color: var(--danger); }
.alert.warning { border: 1px solid #fbe2b6; background: #fff8ec; color: #8a5a10; }
.app-footer { display: flex; justify-content: space-between; gap: 16px; padding: 0 28px 24px; color: var(--muted); font-size: 12px; }

.login-page, .guest-page { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: linear-gradient(135deg, #f5f8fa 0%, #eaf3f5 100%); }
.login-panel { display: grid; grid-template-columns: minmax(0, 1fr) 408px; gap: 0; width: min(1120px, 100%); border: 1px solid #d5e1e6; border-radius: 10px; background: white; box-shadow: 0 24px 70px rgba(15, 77, 100, .14); overflow: hidden; }
.login-copy, .login-card { background: white; padding: 42px; }
.guest-page .login-card { border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.login-copy { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); background: linear-gradient(160deg, #ffffff 0%, #f2f8f9 100%); }
.login-brand-row { display: flex; align-items: center; gap: 18px; }
.login-brand-lockup { display: inline-flex; align-items: center; }
.login-brand-lockup img { display: block; width: 300px; max-width: 100%; height: auto; }
.login-logo img { width: 168px; max-width: 100%; max-height: 64px; object-fit: contain; }
.login-intro { margin-top: 56px; }
.login-copy h1 { max-width: 650px; margin: 10px 0 14px; color: var(--primary-dark); font-size: 40px; line-height: 1.06; }
.login-copy p { max-width: 600px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.login-module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.login-module { display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: 10px; background: white; padding: 14px; transition: transform .18s ease, box-shadow .18s ease; }
.login-module:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 77, 100, .10); }
.login-module > span:last-child { min-width: 0; }
.login-module.procurement { border-top-color: var(--accent); }
.login-module.maintenance { border-top-color: #d48b35; }
.login-module.hr { border-top-color: #51607a; }
.login-module.patrol { border-top-color: #b0632a; }
.login-module-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.login-module.procurement .login-module-icon { background: #e9f7f2; color: #147d6f; }
.login-module.maintenance .login-module-icon { background: #fff4e5; color: #a45b08; }
.login-module.hr .login-module-icon { background: #eef1f6; color: #51607a; }
.login-module svg { width: 18px; height: 18px; }
.login-module strong, .login-module small { display: block; }
.login-module small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.login-footer-note { margin-top: 28px; color: var(--muted); font-size: 12px; }
.login-panel .login-card { align-self: stretch; display: grid; align-content: center; box-shadow: none; border: 0; border-radius: 0; }
/* Giriş kartındaki marka: geniş ekranda soldaki tanıtım bölümü logoyu zaten taşıyor,
   dar ekranda o bölüm yukarıda kalıp görünmez olduğu için logo kartın içinde tekrarlanır. */
.login-card-brand { display: none; }
.login-card-brand img { display: block; max-width: 190px; height: auto; }

.login-card-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 18px; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.login-card-icon svg { width: 20px; height: 20px; }
.login-card-header h2 { margin: 0 0 6px; font-size: 26px; }
.login-card-header small { color: var(--muted); }
.field { margin-top: 16px; }
.check { display: flex; align-items: center; gap: 8px; margin: 16px 0; }
.check input { width: auto; }
.settings-section { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.settings-brand-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.settings-preview { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.settings-preview > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.workspace-card { display: flex; align-items: center; min-width: 0; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 12px; overflow: hidden; }
.workspace-card img, .workspace-card > strong { display: grid; width: 52px !important; height: 52px !important; max-width: 52px !important; max-height: 52px !important; min-width: 52px !important; min-height: 52px !important; flex: 0 0 52px; place-items: center; border-radius: 8px; background: white; object-fit: contain; }
.workspace-card div { min-width: 0; }
.workspace-card small, .workspace-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-card.preview { margin-top: 0; background: white; }
.setting-check, .notification-mail-option { margin-top: 16px; }
.setting-check input, .notification-mail-option input { width: auto; }
.field-error { color: var(--danger); font-size: 12px; }
.line-items { display: grid; gap: 10px; }
.line-item { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 12px; }
.best-price { border-left: 3px solid var(--success); padding-left: 8px; color: var(--success); font-weight: 800; }
.wide-field { grid-column: 1 / -1; }
.selected-hint { display: block; width: fit-content; border-radius: 999px; background: #e9f5f7; color: var(--primary-dark); padding: 6px 10px; font-size: 12px; font-weight: 800; }
.supplier-closed-card { width: min(560px, 100%); }
.score-value { display: inline-grid; width: 44px; height: 32px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.supplier-score-cell { min-width: 190px; }
.supplier-score-head { display: flex; align-items: center; gap: 8px; }
.supplier-score { display: inline-grid; min-width: 52px; height: 34px; place-items: center; border-radius: 8px; font-size: 16px; }
.supplier-score-high { background: #e8f7ef; color: #167249; }
.supplier-score-medium { background: #fff4d8; color: #8a5a00; }
.supplier-score-low { background: #fde8e8; color: #a62c2c; }
.supplier-score-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.supplier-score-track { width: 100%; height: 5px; margin: 6px 0; overflow: hidden; border-radius: 999px; background: #e6edef; }
.supplier-score-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.personnel-edit-form { min-width: min(560px, calc(100vw - 48px)); margin-top: 8px; padding: 14px; }
.hr-people-section .table-wrap, .hr-personnel-section .table-wrap { overflow-x: auto; }
.hr-people-section table { min-width: 1080px; table-layout: fixed; }
.hr-personnel-section table { min-width: 1120px; table-layout: fixed; }
.hr-people-section th, .hr-people-section td, .hr-personnel-section th, .hr-personnel-section td { padding: 14px 16px; }
.hr-people-section td, .hr-personnel-section td { white-space: normal; overflow-wrap: anywhere; }
.hr-people-section td strong, .hr-people-section td span, .hr-personnel-section td strong, .hr-personnel-section td span { display: block; line-height: 1.35; }
.hr-people-section td span, .hr-personnel-section td span { margin-top: 5px; color: var(--muted); }
.hr-people-section td:last-child, .hr-personnel-section td:last-child { width: 74px; text-align: center; vertical-align: middle; }
.hr-people-section th:last-child, .hr-personnel-section th:last-child { width: 74px; }
.hr-people-section th:nth-child(1) { width: 20%; }
.hr-people-section th:nth-child(2) { width: 11%; }
.hr-people-section th:nth-child(3) { width: 13%; }
.hr-people-section th:nth-child(4) { width: 21%; }
.hr-people-section th:nth-child(5) { width: 11%; }
.hr-people-section th:nth-child(6) { width: 24%; }
.hr-personnel-section th:nth-child(1) { width: 14%; }
.hr-personnel-section th:nth-child(2) { width: 21%; }
.hr-personnel-section th:nth-child(3) { width: 19%; }
.hr-personnel-section th:nth-child(4) { width: 22%; }
.hr-personnel-section th:nth-child(5) { width: 17%; }
.hr-list-toolbar { display: flex; align-items: center; gap: 10px; max-width: 820px; margin: 16px 0; }
.hr-list-toolbar .crm-filter-search { flex: 1 1 420px; }
.hr-list-toolbar .button { flex: 0 0 auto; }
.hr-weekday-form { display: grid; gap: 14px; }
.hr-weekday-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.hr-weekday-option { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 10px 12px; margin: 0; }
.hr-survey-questions-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.hr-survey-question { position: relative; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; padding: 14px 44px 14px 14px; margin-bottom: 10px; }
.hr-survey-question .survey-remove-question { position: absolute; top: 10px; right: 10px; }
.hr-survey-options-list { display: grid; gap: 6px; margin-bottom: 8px; }
.hr-survey-option-row { display: flex; align-items: center; gap: 6px; }
.hr-survey-option-row input { flex: 1 1 auto; }
.hr-survey-question-label { display: block; margin-bottom: 6px; font-weight: 700; }
.hr-survey-choice-list { display: grid; gap: 6px; margin-top: 6px; }
.hr-survey-choice-list .check { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 0; }
.hr-document-section { border-top: 1px solid var(--line); padding: 18px 24px; }
.hr-document-section h3 { margin: 0 0 4px; font-size: 15px; }
.hr-document-upload-form { margin-top: 14px; gap: 12px; }
@media (max-width: 620px) {
    .hr-list-toolbar { align-items: stretch; flex-direction: column; }
    .hr-list-toolbar .crm-filter-search, .hr-list-toolbar .button { width: 100%; }
}
.card-subsection { margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.template-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: 16px; align-items: start; }
.mail-preview { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; }
.mail-preview-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.mail-preview-subject { border-bottom: 1px solid var(--line); padding-bottom: 10px; font-weight: 800; }
.mail-preview-body { margin-top: 10px; color: #344054; line-height: 1.55; white-space: pre-wrap; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading h3 { margin: 0 0 4px; font-size: 18px; }
.section-heading p { margin: 0; }
.responsive-table { width: 100%; overflow-x: auto; }
.responsive-table table { min-width: 760px; background: white; }
.responsive-table input[type="radio"], .responsive-table input[type="checkbox"] { width: auto; }
.responsive-table::-webkit-scrollbar { height: 8px; }
.responsive-table::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5df; }
.profile-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.profile-summary { position: sticky; top: 104px; text-align: center; }
.profile-avatar-large { display: grid; width: 112px !important; height: 112px !important; max-width: 112px !important; max-height: 112px !important; place-items: center; overflow: hidden; margin: 0 auto 16px; border: 1px solid #d6e8ed; border-radius: 8px; background: #eef5f6; color: var(--primary-dark); font-size: 34px; font-weight: 850; }
.profile-avatar-large img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: var(--avatar-fit, cover); object-position: var(--avatar-position, center center); background: white; }
.profile-summary h2 { margin: 0 0 6px; }
.profile-summary p { margin: 0; color: var(--muted); }
.profile-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.profile-meta span { border-radius: 999px; background: #eef5f6; color: var(--primary-dark); padding: 6px 9px; font-size: 12px; font-weight: 800; }
.profile-defaults-panel { margin-top: 4px; padding: 16px; border: 1px solid #cfe2e3; border-radius: 8px; background: #f5faf9; }
.profile-defaults-panel .section-heading { margin-bottom: 12px; }
.profile-defaults-panel h3 { margin: 0 0 4px; }
.profile-page { display: grid; gap: 16px; }
.profile-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-color: #cfe2e3; background: linear-gradient(120deg, #ffffff 0%, #f3fbfa 100%); }
.profile-hero-identity { display: flex; min-width: 0; align-items: center; gap: 18px; }
.profile-hero .profile-avatar-large { flex: 0 0 112px; margin: 0; border-radius: 12px; }
.profile-hero-user { min-width: 0; }
.profile-hero-user h2 { margin: 3px 0 5px; font-size: 26px; }
.profile-hero-user p:not(.eyebrow) { margin: 0; color: var(--muted); }
.profile-hero .profile-meta { justify-content: flex-start; margin-top: 12px; }
.profile-meta span { display: inline-flex; align-items: center; gap: 6px; }
.profile-meta svg { width: 14px; height: 14px; }
.profile-hero-note { display: flex; max-width: 330px; align-items: flex-start; gap: 10px; border-left: 1px solid #cfe2e3; padding-left: 20px; color: var(--primary-dark); }
.profile-hero-note > svg { width: 22px; height: 22px; flex: 0 0 22px; }
.profile-hero-note strong, .profile-hero-note span { display: block; }
.profile-hero-note span { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.profile-settings-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 16px; align-items: start; }
.profile-card { min-width: 0; }
.profile-card .section-heading { align-items: flex-start; }
.profile-card .section-heading h3 { font-size: 20px; }
.profile-card-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 8px; background: #e9f5f4; color: var(--primary-dark); }
.profile-card-icon svg { width: 19px; height: 19px; }
.profile-defaults-card { border-color: #cfe2e3; background: #fbfefd; }
.profile-defaults-fields { margin-top: 14px; }
.profile-definition-count, .profile-defaults-note { display: flex; align-items: center; gap: 7px; color: #28796c; font-size: 12px; font-weight: 750; }
.profile-definition-count svg, .profile-defaults-note svg { width: 15px; height: 15px; }
.profile-defaults-note { margin: 14px 0 0; color: var(--muted); font-weight: 500; }
.profile-definition-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 14px; border: 1px dashed #bed9d8; border-radius: 8px; background: #f5faf9; padding: 14px; }
.profile-empty-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: #e0f1ee; color: var(--primary-dark); }
.profile-empty-icon svg { width: 18px; height: 18px; }
.profile-definition-empty strong, .profile-definition-empty span { display: block; }
.profile-definition-empty strong { color: var(--primary-dark); font-size: 13px; }
.profile-definition-empty span { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-definition-empty .button { grid-column: 2; justify-self: start; margin-top: 2px; }
.profile-savebar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding: 2px 2px 0; }
.profile-savebar > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.profile-savebar svg { width: 15px; height: 15px; }
.profile-password-action { margin-top: 2px; }

/* MFA (İki adımlı doğrulama) — profile status card, setup page, and the login challenge screen. */
.mfa-status { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; border-radius: 8px; padding: 14px; }
.mfa-status svg { width: 20px; height: 20px; }
.mfa-status strong, .mfa-status span { display: block; }
.mfa-status strong { font-size: 13px; }
.mfa-status span { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.mfa-status-active { border: 1px solid #abefc6; background: #edfdf3; color: var(--success); }
.mfa-status-inactive { border: 1px dashed #bed9d8; background: #f5faf9; color: var(--primary-dark); }
.mfa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mfa-actions form { display: flex; gap: 8px; }
.mfa-disable-form input { width: 160px; }
.profile-mfa-card > a.button { margin-top: 14px; }

.mfa-recovery-reveal { margin-bottom: 16px; border: 1px solid #ffe3a8; border-radius: 8px; background: #fffaf0; padding: 16px; }
.mfa-recovery-reveal-head { display: flex; align-items: center; gap: 8px; color: #92640a; font-weight: 750; }
.mfa-recovery-reveal-head svg { width: 17px; height: 17px; }
.mfa-recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.mfa-recovery-codes code { border: 1px solid var(--line); border-radius: 6px; background: white; padding: 8px 10px; text-align: center; font-size: 13px; letter-spacing: .03em; }

.mfa-setup-card + .mfa-setup-card { margin-top: 16px; }
.mfa-setup-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; }
.mfa-qr-box { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 14px; }
.mfa-qr-box svg { width: 180px; height: 180px; }
.mfa-manual-key code { display: inline-block; margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; padding: 10px 12px; font-size: 15px; letter-spacing: .06em; }
.mfa-confirm-form { max-width: 320px; }
.mfa-confirm-form input { text-align: center; font-size: 20px; letter-spacing: .3em; }
.mfa-setup-actions { display: flex; gap: 10px; margin-top: 16px; }

.mfa-challenge-card { display: grid; justify-items: center; text-align: center; }
.mfa-challenge-form { display: grid; justify-items: center; width: 100%; }
.mfa-lock-stage { display: grid; place-items: center; margin: 0 auto 16px; }
.mfa-lock-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: #e9f5f7; color: var(--primary-dark); transition: background .3s ease, color .3s ease, transform .3s ease; }
.mfa-lock-icon svg { width: 26px; height: 26px; }
.mfa-shackle { transform-origin: 50% 85%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.mfa-lock-stage.unlocked .mfa-lock-icon { background: #e6f6ec; color: var(--success); transform: scale(1.08); }
.mfa-lock-stage.unlocked .mfa-shackle { transform: translateX(2px) translateY(-2px) rotate(-22deg); }

.mfa-digit-row { display: flex; justify-content: center; gap: 10px; margin: 6px 0 22px; }
.mfa-digit-box { width: 44px; height: 52px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; text-align: center; font-size: 22px; font-weight: 800; color: var(--primary-dark); transition: transform .5s cubic-bezier(.5, 0, .5, 1), opacity .4s ease, border-color .2s ease, background .2s ease; }
.mfa-digit-box:focus { border-color: var(--primary); background: white; outline: none; }
.mfa-digit-row.merging .mfa-digit-box { transform: translate(var(--mfa-dx, 0), var(--mfa-dy, 0)) scale(.15); opacity: 0; }
.mfa-digit-row.merging .mfa-digit-box:nth-child(1) { transition-delay: 0ms; }
.mfa-digit-row.merging .mfa-digit-box:nth-child(2) { transition-delay: 35ms; }
.mfa-digit-row.merging .mfa-digit-box:nth-child(3) { transition-delay: 70ms; }
.mfa-digit-row.merging .mfa-digit-box:nth-child(4) { transition-delay: 105ms; }
.mfa-digit-row.merging .mfa-digit-box:nth-child(5) { transition-delay: 140ms; }
.mfa-digit-row.merging .mfa-digit-box:nth-child(6) { transition-delay: 175ms; }
.mfa-recovery-toggle { margin-top: 14px; border: none; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.mfa-recovery-toggle:hover { color: var(--primary-dark); }
.mfa-challenge-form .field { width: 100%; max-width: 260px; }
.mfa-cancel-link { display: inline-block; margin-top: 18px; color: var(--muted); font-size: 12.5px; }
.mfa-cancel-link:hover { color: var(--primary-dark); }
.error-page { position: relative; display: grid; min-height: min(620px, calc(100vh - 190px)); place-items: center; overflow: hidden; border: 1px solid #cfe2e3; border-radius: 10px; background: linear-gradient(135deg, #f7fbfb 0%, #ffffff 60%, #f2f7fa 100%); padding: 28px; }
.error-page-glow { position: absolute; width: 380px; height: 380px; border: 1px solid rgba(22, 139, 120, .12); border-radius: 50%; box-shadow: 0 0 0 34px rgba(22, 139, 120, .035), 0 0 0 68px rgba(22, 139, 120, .025); }
.error-panel { position: relative; width: min(560px, 100%); border-color: #d6e5e8; padding: 34px; text-align: center; box-shadow: 0 22px 50px rgba(17, 24, 39, .08); }
.error-code { position: absolute; top: 16px; right: 22px; color: #dcecef; font-size: 54px; font-weight: 850; line-height: 1; letter-spacing: 0; }
.error-icon { display: grid; width: 66px; height: 66px; place-items: center; margin: 0 auto 18px; border: 1px solid #bfe0dd; border-radius: 12px; background: #e9f6f3; color: var(--primary-dark); }
.error-icon svg { width: 31px; height: 31px; }
.error-panel h2 { position: relative; margin: 7px 0 10px; font-size: 28px; letter-spacing: 0; }
.error-message { max-width: 470px; margin: 0 auto; color: var(--muted); line-height: 1.65; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
.error-reference { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--muted); font-size: 12px; }
.error-reference svg { width: 14px; height: 14px; }
.help-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: stretch; margin-bottom: 16px; border: 1px solid #cfe5eb; border-radius: 8px; background: linear-gradient(135deg, #ffffff, #edf8fa); padding: 24px; box-shadow: var(--shadow); }
.help-hero h2 { max-width: 760px; margin: 8px 0 10px; font-size: 34px; line-height: 1.08; letter-spacing: 0; color: var(--primary-dark); }
.help-hero p { max-width: 760px; margin: 0; color: #475467; line-height: 1.7; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.help-kicker { display: inline-flex; width: fit-content; border-radius: 999px; background: white; color: var(--primary-dark); padding: 7px 12px; font-size: 12px; font-weight: 800; }
.help-hero-panel { display: grid; align-content: center; gap: 8px; border: 1px solid #d6e8ed; border-radius: 8px; background: white; padding: 16px; }
.help-hero-panel strong { color: var(--primary-dark); }
.help-hero-panel span { color: var(--muted); line-height: 1.55; }
.help-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.help-shortcuts a { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; box-shadow: 0 8px 20px rgba(17, 24, 39, .04); }
.help-shortcuts a:hover { border-color: #b9dce5; background: #f7fbfc; }
.help-shortcuts strong, .help-shortcuts span { display: block; }
.help-shortcuts strong { color: var(--primary-dark); }
.help-shortcuts span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.help-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.help-toc { position: sticky; top: 104px; display: grid; max-height: calc(100vh - 128px); gap: 5px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; box-shadow: var(--shadow); }
.help-toc strong { margin-bottom: 4px; color: var(--primary-dark); }
.help-toc a { border-radius: 8px; padding: 7px 9px; color: #475467; font-size: 13px; font-weight: 750; }
.help-toc a:hover { background: #e9f5f7; color: var(--primary-dark); }
.help-document { max-width: 1040px; line-height: 1.78; }
.help-meta { width: fit-content; margin-bottom: 14px; border-radius: 999px; background: #eef5f6; color: var(--primary-dark); padding: 6px 10px; font-size: 12px; font-weight: 800; }
.help-document h1 { margin: 0 0 16px; font-size: 32px; color: var(--primary-dark); }
.help-document h2 { margin: 28px 0 10px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 24px; color: #17202a; }
.help-document h3 { margin: 20px 0 8px; font-size: 18px; color: var(--primary-dark); }
.help-document p, .help-document li { color: #344054; }
.help-document ul, .help-document ol { padding-left: 22px; }
.help-document code { border-radius: 6px; background: #f2f4f7; padding: 2px 6px; color: var(--primary-dark); }
.help-document blockquote { margin: 16px 0; border-left: 4px solid var(--primary); background: #f8fafc; padding: 10px 14px; color: #475467; }
.process-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.process-step { position: relative; display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 16px; min-height: 138px; }
.process-step:not(:last-child)::after { position: absolute; right: -24px; top: 50%; width: 34px; height: 2px; background: var(--accent); content: ""; }
.process-step:not(:last-child)::before { position: absolute; right: -25px; top: calc(50% - 5px); width: 10px; height: 10px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); content: ""; }
.process-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.process-icon svg { width: 20px; height: 20px; }
.process-step strong { color: var(--primary-dark); font-size: 16px; }
.action-inbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.action-inbox-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 12px; color: #17202a; box-shadow: 0 8px 18px rgba(17, 24, 39, .03); }
.action-inbox-item:hover { border-color: #b9dce5; background: #f7fbfc; transform: translateY(-1px); }
.action-inbox-item strong, .action-inbox-item small { display: block; min-width: 0; }
.action-inbox-item small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.action-inbox-item em { border-radius: 999px; background: #e9f5f7; color: var(--primary-dark); padding: 5px 8px; font-size: 11px; font-style: normal; font-weight: 850; white-space: nowrap; }
.action-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: white; color: var(--primary-dark); border: 1px solid #d6e8ed; }
.action-icon svg { width: 19px; height: 19px; }
.fishbone { position: relative; display: grid; gap: 10px; margin-top: 12px; padding-left: 18px; }
.fishbone::before { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 999px; background: #d6e8ed; content: ""; }
.fishbone-item { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 12px; }
.fishbone-item::before { position: absolute; left: -16px; top: 18px; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 999px; background: white; content: ""; }
.fishbone-date { color: var(--muted); font-size: 12px; font-weight: 800; }
.fishbone-title { display: flex; align-items: center; gap: 8px; font-weight: 850; color: var(--primary-dark); }
.fishbone-title svg { width: 17px; height: 17px; }
.order-builder { display: grid; gap: 14px; }
.order-builder-item { border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 14px; }
.order-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.order-offer-option { display: grid; gap: 5px; border: 1px solid #d9e0e8; border-radius: 8px; background: white; padding: 12px; cursor: pointer; }
.order-offer-option:hover { border-color: #b9dce5; background: #f7fbfc; }
.order-offer-option input { width: auto; }
.order-offer-option strong { color: var(--primary-dark); }
.empty-state { display: grid; justify-items: center; gap: 8px; border: 1px dashed #c9d8df; border-radius: 8px; background: #f8fafc; padding: 28px; text-align: center; }
.empty-state.compact { justify-items: start; padding: 18px; text-align: left; }
.empty-state svg { width: 28px; height: 28px; color: var(--primary-dark); }
.empty-state span { max-width: 680px; color: var(--muted); line-height: 1.55; }
.permission-layout { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(240px, .95fr) minmax(280px, 1.2fr); gap: 14px; align-items: start; }
.permission-panel { min-height: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 14px; }
.choice-list, .project-permission-list { display: grid; gap: 8px; max-height: 420px; overflow: auto; padding-right: 2px; }
.choice-row { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #d9e0e8; border-radius: 8px; background: white; padding: 10px; font-weight: 750; }
.choice-row.compact { padding: 8px 10px; }
.choice-row input { width: auto; margin-top: 2px; }
.choice-row span, .choice-row strong, .choice-row small { display: block; min-width: 0; }
.choice-row small { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.project-permission-group { display: grid; gap: 8px; border: 1px solid #e2e8ef; border-radius: 8px; background: white; padding: 10px; }
.project-permission-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-permission-header span { display: flex; gap: 6px; }
.project-permission-header .button { min-height: 32px; padding: 7px 9px; font-size: 12px; }
.project-permission-list.is-disabled { background: #f6f8fa; border: 1px dashed #d7e0e7; border-radius: 8px; padding: 10px; }
.project-permission-list.is-disabled .empty-state { border-color: transparent; background: transparent; padding: 12px; }
.choice-row:has(input:disabled) { color: var(--muted); background: #f8fafc; }
.choice-row:has(input:disabled) input { cursor: not-allowed; }

@media (max-width: 900px) {
    body.mobile-menu-open { overflow: hidden; }
    body.mobile-menu-open .mobile-overlay { display: block; }
    body { padding-bottom: 76px; }
    .app-shell, .login-panel, .grid-4, .grid-3, .grid-2, .settings-brand-layout, .tenant-profile-layout, .template-editor-grid, .help-hero, .help-layout, .profile-shell, .help-shortcuts, .process-flow, .permission-layout { grid-template-columns: 1fr; }
    .mail-preview { position: static; }
    .help-toc, .profile-summary { position: static; }
    .help-hero h2 { font-size: 28px; }
    .line-item { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card strong { font-size: 24px; }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: min(320px, calc(100vw - 48px));
        height: 100vh;
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    }
    .mobile-sidebar-close { display: inline-grid; }
    body.mobile-menu-open .sidebar { transform: translateX(0); }
    .topbar { align-items: center; flex-direction: row; min-height: 72px; }
    .topbar-global-actions { gap: 7px; }
    .work-tabs-shell { top: 72px; grid-template-columns: minmax(0, 1fr) 36px; padding: 7px 20px; }
    .work-tab { max-width: 190px; min-height: 32px; padding: 6px 6px 6px 9px; font-size: 12px; }
    .work-tab span { max-width: 120px; }
    .topbar + .content .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .topbar + .content .topbar > div { width: 100%; }
    .topbar + .content .topbar > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .topbar + .content .topbar .button,
    .topbar + .content .topbar .btn { flex: 1 1 180px; }
    .sidebar-toggle { display: none; }
    .user-menu { display: none; }
    .app-footer { align-items: flex-start; flex-direction: column; }
    .content, .topbar { padding: 20px; }
    .topbar h1, .title { font-size: 23px; }
    .card { padding: 14px; overflow-x: auto; }
    .card h2 { font-size: 22px; line-height: 1.15; }
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .section-heading .button,
    .section-heading .btn { width: 100%; }
    .page-actions { justify-content: stretch; }
    .page-actions .button { flex: 1 1 190px; }
    .responsive-table { margin: 0 -2px; padding-bottom: 2px; }
    .responsive-table table { min-width: 680px; }
    .card > table { min-width: 680px; }
    th, td { padding: 10px; }
    .line-item { padding: 10px; }
    .line-item .button,
    .line-item .btn { width: 100%; }
    .mobile-menu-button {
        display: inline-grid;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        place-items: center;
        gap: 4px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: white;
        padding: 10px;
    }
    .mobile-menu-button span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--primary-dark);
    }
    .mobile-bottom-nav {
        position: fixed;
        right: 10px;
        bottom: 18px;
        left: 10px;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 4px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
        padding: 7px;
        backdrop-filter: blur(10px);
    }
    .mobile-bottom-nav a, .mobile-bottom-nav button {
        display: grid;
        min-width: 0;
        place-items: center;
        gap: 2px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #475467;
        cursor: pointer;
        padding: 6px 2px;
        font-size: 12px;
        font-weight: 800;
    }
    .mobile-bottom-nav a.active, .mobile-bottom-nav button.active {
        background: #e9f5f7;
        color: var(--primary-dark);
    }
    .mobile-bottom-nav a svg, .mobile-bottom-nav button svg { width: 17px; height: 17px; }
    .process-step:not(:last-child)::after { right: auto; left: 34px; top: auto; bottom: -15px; width: 2px; height: 20px; }
    .process-step:not(:last-child)::before { right: auto; left: 30px; top: auto; bottom: -18px; transform: rotate(135deg); }
.fishbone-item { grid-template-columns: 1fr; }
    .login-copy h1 { font-size: 32px; }
    .login-copy { border-right: 0; border-bottom: 1px solid var(--line); }
    /* Panel tek sütuna dustugunde tanitim bolumu formun cok yukarisinda kaliyor:
       logo kartin icinde gosterilir, soldaki tekrar kaldirilir. */
    .login-card-brand { display: block; margin-bottom: 18px; }
    .login-brand-row { display: none; }
    .login-brand-row { align-items: flex-start; flex-direction: column; }
    .login-workflow, .login-feature-grid { grid-template-columns: 1fr 1fr; }
    .login-workflow div:not(:last-child)::after { content: none; }
}

@media (max-width: 560px) {
    body { padding-bottom: 82px; }
    .content, .topbar { padding: 16px; }
    .work-tabs-shell { top: 72px; padding: 6px 16px; }
    .work-tab { max-width: 168px; }
    .work-tab span { max-width: 102px; }
    .topbar h1, .title { font-size: 21px; }
    .eyebrow { font-size: 11px; }
    .stats-grid { grid-template-columns: 1fr; }
    .card { padding: 12px; }
    .button, .btn { width: 100%; min-height: 38px; padding: 9px 12px; }
    .project-permission-header { align-items: flex-start; flex-direction: column; }
    .project-permission-header span,
    .project-permission-header .button { width: 100%; }
    form.inline .button,
    form.inline .btn { width: auto; }
    .responsive-table table,
    .card > table { min-width: 620px; }
    input, textarea, select { padding: 9px 10px; }
    .mobile-bottom-nav { right: 8px; bottom: 16px; left: 8px; }
    .mobile-bottom-nav a, .mobile-bottom-nav button { font-size: 10px; padding-right: 1px; padding-left: 1px; }
    .login-page, .guest-page { padding: 14px; }
    .login-copy, .login-card { padding: 22px; }
    .login-workflow, .login-feature-grid { grid-template-columns: 1fr; }
    .theme-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
    .theme-dialog-header, .theme-options { padding-right: 14px; padding-left: 14px; }
}

/* Dark-theme contrast fixes for definition and setup screens */
html[data-theme="night"] .definition-intro-stats span,
html[data-theme="night"] .definition-tabs a,
html[data-theme="night"] .setup-step,
html[data-theme="night"] .empty-state,
html[data-theme="night"] .definition-modal-actions,
html[data-theme="night"] .definition-user-access,
html[data-theme="night"] .modal-assignment-panel,
html[data-theme="night"] .modal-assignment-grid fieldset,
html[data-theme="night"] .organization-access-note,
html[data-theme="graphite"] .definition-intro-stats span,
html[data-theme="graphite"] .definition-tabs a,
html[data-theme="graphite"] .setup-step,
html[data-theme="graphite"] .empty-state,
html[data-theme="graphite"] .definition-modal-actions,
html[data-theme="graphite"] .definition-user-access,
html[data-theme="graphite"] .modal-assignment-panel,
html[data-theme="graphite"] .modal-assignment-grid fieldset,
html[data-theme="graphite"] .organization-access-note,
html[data-theme="emerald"] .definition-intro-stats span,
html[data-theme="emerald"] .definition-tabs a,
html[data-theme="emerald"] .setup-step,
html[data-theme="emerald"] .empty-state,
html[data-theme="emerald"] .definition-modal-actions,
html[data-theme="emerald"] .definition-user-access,
html[data-theme="emerald"] .modal-assignment-panel,
html[data-theme="emerald"] .modal-assignment-grid fieldset,
html[data-theme="emerald"] .organization-access-note { background: var(--surface-2); border-color: var(--line); color: var(--text); }

html[data-theme="night"] .definition-intro-stats strong,
html[data-theme="night"] .definition-tabs a,
html[data-theme="night"] .setup-step strong,
html[data-theme="night"] .definition-tree-list,
html[data-theme="night"] .empty-state strong,
html[data-theme="night"] .modal-assignment-grid legend,
html[data-theme="night"] .organization-manager-check,
html[data-theme="night"] .definition-user-access-header,
html[data-theme="night"] .definition-user-access strong,
html[data-theme="graphite"] .definition-intro-stats strong,
html[data-theme="graphite"] .definition-tabs a,
html[data-theme="graphite"] .setup-step strong,
html[data-theme="graphite"] .definition-tree-list,
html[data-theme="graphite"] .empty-state strong,
html[data-theme="graphite"] .modal-assignment-grid legend,
html[data-theme="graphite"] .organization-manager-check,
html[data-theme="graphite"] .definition-user-access-header,
html[data-theme="graphite"] .definition-user-access strong,
html[data-theme="emerald"] .definition-intro-stats strong,
html[data-theme="emerald"] .definition-tabs a,
html[data-theme="emerald"] .setup-step strong,
html[data-theme="emerald"] .definition-tree-list,
html[data-theme="emerald"] .empty-state strong,
html[data-theme="emerald"] .modal-assignment-grid legend,
html[data-theme="emerald"] .organization-manager-check,
html[data-theme="emerald"] .definition-user-access-header,
html[data-theme="emerald"] .definition-user-access strong { color: var(--text); }

html[data-theme="night"] .setup-step > span,
html[data-theme="graphite"] .setup-step > span,
html[data-theme="emerald"] .setup-step > span { background: var(--surface); border-color: var(--line); color: var(--muted); }
html[data-theme="night"] .setup-step.is-current,
html[data-theme="graphite"] .setup-step.is-current,
html[data-theme="emerald"] .setup-step.is-current { background: color-mix(in srgb, var(--primary) 17%, var(--surface)); border-color: var(--primary); }
html[data-theme="night"] .setup-step.is-current > span,
html[data-theme="graphite"] .setup-step.is-current > span,
html[data-theme="emerald"] .setup-step.is-current > span { background: var(--primary); border-color: var(--primary); color: #fff; }
html[data-theme="night"] .setup-step.is-complete > span,
html[data-theme="graphite"] .setup-step.is-complete > span,
html[data-theme="emerald"] .setup-step.is-complete > span { background: color-mix(in srgb, var(--success) 18%, var(--surface)); border-color: var(--success); color: var(--success); }

html[data-theme="night"] .definition-tabs a:hover,
html[data-theme="night"] .definition-tabs a:focus-visible,
html[data-theme="night"] .organization-setup-steps .setup-step:hover,
html[data-theme="graphite"] .definition-tabs a:hover,
html[data-theme="graphite"] .definition-tabs a:focus-visible,
html[data-theme="graphite"] .organization-setup-steps .setup-step:hover,
html[data-theme="emerald"] .definition-tabs a:hover,
html[data-theme="emerald"] .definition-tabs a:focus-visible,
html[data-theme="emerald"] .organization-setup-steps .setup-step:hover { background: color-mix(in srgb, var(--primary) 13%, var(--surface)); border-color: var(--primary); }

html[data-theme="night"] .definition-tree-list,
html[data-theme="graphite"] .definition-tree-list,
html[data-theme="emerald"] .definition-tree-list { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
html[data-theme="night"] .empty-state span,
html[data-theme="graphite"] .empty-state span,
html[data-theme="emerald"] .empty-state span { color: var(--muted); }

/* Keep profile-specific badges and icon surfaces readable in non-light themes. */
html[data-theme="night"] .profile-hero,
html[data-theme="graphite"] .profile-hero,
html[data-theme="emerald"] .profile-hero { background: linear-gradient(120deg, var(--surface) 0%, var(--surface-2) 100%); border-color: var(--line); }

html[data-theme="night"] .profile-avatar-large,
html[data-theme="graphite"] .profile-avatar-large,
html[data-theme="emerald"] .profile-avatar-large,
html[data-theme="night"] .profile-avatar-large img,
html[data-theme="graphite"] .profile-avatar-large img,
html[data-theme="emerald"] .profile-avatar-large img { background: var(--surface-2); border-color: var(--line); }

html[data-theme="night"] .profile-meta span,
html[data-theme="graphite"] .profile-meta span,
html[data-theme="emerald"] .profile-meta span { background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line)); color: var(--primary); }

html[data-theme="night"] .profile-hero-note,
html[data-theme="graphite"] .profile-hero-note,
html[data-theme="emerald"] .profile-hero-note { border-color: var(--line); color: var(--primary); }

html[data-theme="night"] .profile-card-icon,
html[data-theme="graphite"] .profile-card-icon,
html[data-theme="emerald"] .profile-card-icon,
html[data-theme="night"] .profile-empty-icon,
html[data-theme="graphite"] .profile-empty-icon,
html[data-theme="emerald"] .profile-empty-icon { background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); color: var(--primary); }

html[data-theme="night"] .profile-defaults-panel,
html[data-theme="graphite"] .profile-defaults-panel,
html[data-theme="emerald"] .profile-defaults-panel,
html[data-theme="night"] .profile-defaults-card,
html[data-theme="graphite"] .profile-defaults-card,
html[data-theme="emerald"] .profile-defaults-card,
html[data-theme="night"] .profile-definition-empty,
html[data-theme="graphite"] .profile-definition-empty,
html[data-theme="emerald"] .profile-definition-empty { background: var(--surface-2); border-color: var(--line); color: var(--text); }

html[data-theme="night"] .profile-definition-count,
html[data-theme="graphite"] .profile-definition-count,
html[data-theme="emerald"] .profile-definition-count,
html[data-theme="night"] .profile-definition-empty strong,
html[data-theme="graphite"] .profile-definition-empty strong,
html[data-theme="emerald"] .profile-definition-empty strong { color: var(--success); }

html[data-theme="night"] .mfa-status-inactive,
html[data-theme="graphite"] .mfa-status-inactive,
html[data-theme="emerald"] .mfa-status-inactive,
html[data-theme="night"] .mfa-qr-box,
html[data-theme="graphite"] .mfa-qr-box,
html[data-theme="emerald"] .mfa-qr-box,
html[data-theme="night"] .mfa-manual-key code,
html[data-theme="graphite"] .mfa-manual-key code,
html[data-theme="emerald"] .mfa-manual-key code,
html[data-theme="night"] .mfa-recovery-codes code,
html[data-theme="graphite"] .mfa-recovery-codes code,
html[data-theme="emerald"] .mfa-recovery-codes code,
html[data-theme="night"] .mfa-digit-box,
html[data-theme="graphite"] .mfa-digit-box,
html[data-theme="emerald"] .mfa-digit-box { background: var(--surface-2); border-color: var(--line); color: var(--text); }

html[data-theme="night"] .mfa-status-active,
html[data-theme="graphite"] .mfa-status-active,
html[data-theme="emerald"] .mfa-status-active { background: color-mix(in srgb, var(--success) 16%, var(--surface-2)); border-color: var(--success); color: var(--success); }

html[data-theme="night"] .mfa-recovery-reveal,
html[data-theme="graphite"] .mfa-recovery-reveal,
html[data-theme="emerald"] .mfa-recovery-reveal { background: color-mix(in srgb, #f5b13a 16%, var(--surface-2)); border-color: #f5b13a; }

/* Module landing pages use the same readable surfaces in every theme. */
html[data-theme="night"] .module-hero,
html[data-theme="graphite"] .module-hero,
html[data-theme="emerald"] .module-hero { background: linear-gradient(135deg, var(--surface-2), var(--surface)); border-color: var(--line); color: var(--text); }

html[data-theme="night"] .module-hero h2,
html[data-theme="graphite"] .module-hero h2,
html[data-theme="emerald"] .module-hero h2 { color: var(--primary); }

html[data-theme="night"] .module-hero-icon,
html[data-theme="graphite"] .module-hero-icon,
html[data-theme="emerald"] .module-hero-icon,
html[data-theme="night"] .module-feature-icon,
html[data-theme="graphite"] .module-feature-icon,
html[data-theme="emerald"] .module-feature-icon { background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); color: var(--primary); }

html[data-theme="night"] .module-feature-card:hover,
html[data-theme="night"] .module-feature-card.active,
html[data-theme="graphite"] .module-feature-card:hover,
html[data-theme="graphite"] .module-feature-card.active,
html[data-theme="emerald"] .module-feature-card:hover,
html[data-theme="emerald"] .module-feature-card.active { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: var(--primary); }

html[data-theme="night"] .module-feature-card .badge,
html[data-theme="graphite"] .module-feature-card .badge,
html[data-theme="emerald"] .module-feature-card .badge,
html[data-theme="night"] .badge,
html[data-theme="graphite"] .badge,
html[data-theme="emerald"] .badge { background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); color: var(--primary); }

/* Theme consistency for shared product surfaces */
html[data-theme="night"] .topbar,
html[data-theme="graphite"] .topbar,
html[data-theme="emerald"] .topbar,
html[data-theme="night"] .sidebar-head,
html[data-theme="graphite"] .sidebar-head,
html[data-theme="emerald"] .sidebar-head,
html[data-theme="night"] .card,
html[data-theme="graphite"] .card,
html[data-theme="emerald"] .card,
html[data-theme="night"] .stat-card,
html[data-theme="graphite"] .stat-card,
html[data-theme="emerald"] .stat-card,
html[data-theme="night"] .dashboard-widget-card,
html[data-theme="graphite"] .dashboard-widget-card,
html[data-theme="emerald"] .dashboard-widget-card,
html[data-theme="night"] .notification-card,
html[data-theme="graphite"] .notification-card,
html[data-theme="emerald"] .notification-card,
html[data-theme="night"] .platform-tenant-card,
html[data-theme="graphite"] .platform-tenant-card,
html[data-theme="emerald"] .platform-tenant-card,
html[data-theme="night"] .platform-license-row,
html[data-theme="graphite"] .platform-license-row,
html[data-theme="emerald"] .platform-license-row,
html[data-theme="night"] .responsive-table table,
html[data-theme="graphite"] .responsive-table table,
html[data-theme="emerald"] .responsive-table table,
html[data-theme="night"] .login-panel,
html[data-theme="graphite"] .login-panel,
html[data-theme="emerald"] .login-panel,
html[data-theme="night"] .login-copy,
html[data-theme="graphite"] .login-copy,
html[data-theme="emerald"] .login-copy,
html[data-theme="night"] .login-card,
html[data-theme="graphite"] .login-card,
html[data-theme="emerald"] .login-card { background: var(--surface); border-color: var(--line); color: var(--text); }

html[data-theme="night"] .topbar,
html[data-theme="night"] .work-tabs-shell { background: color-mix(in srgb, var(--surface) 94%, transparent); }
html[data-theme="graphite"] .topbar,
html[data-theme="graphite"] .work-tabs-shell { background: color-mix(in srgb, var(--surface) 94%, transparent); }
html[data-theme="emerald"] .topbar,
html[data-theme="emerald"] .work-tabs-shell { background: color-mix(in srgb, var(--surface) 94%, transparent); }

html[data-theme="night"] .sidebar-toggle,
html[data-theme="night"] .mobile-sidebar-close,
html[data-theme="night"] .mobile-menu-button,
html[data-theme="night"] .icon-button,
html[data-theme="night"] .theme-trigger,
html[data-theme="night"] .notification-button,
html[data-theme="night"] .user-chip,
html[data-theme="graphite"] .sidebar-toggle,
html[data-theme="graphite"] .mobile-sidebar-close,
html[data-theme="graphite"] .mobile-menu-button,
html[data-theme="graphite"] .icon-button,
html[data-theme="graphite"] .theme-trigger,
html[data-theme="graphite"] .notification-button,
html[data-theme="graphite"] .user-chip,
html[data-theme="emerald"] .sidebar-toggle,
html[data-theme="emerald"] .mobile-sidebar-close,
html[data-theme="emerald"] .mobile-menu-button,
html[data-theme="emerald"] .icon-button,
html[data-theme="emerald"] .theme-trigger,
html[data-theme="emerald"] .notification-button,
html[data-theme="emerald"] .user-chip { background: var(--surface-2); border-color: var(--line); color: var(--primary-dark); }

html[data-theme="night"] input,
html[data-theme="night"] textarea,
html[data-theme="night"] select,
html[data-theme="night"] .tab,
html[data-theme="night"] .work-tab,
html[data-theme="night"] .dashboard-widget-option,
html[data-theme="night"] .notification-recipient-option,
html[data-theme="graphite"] input,
html[data-theme="graphite"] textarea,
html[data-theme="graphite"] select,
html[data-theme="graphite"] .tab,
html[data-theme="graphite"] .work-tab,
html[data-theme="graphite"] .dashboard-widget-option,
html[data-theme="graphite"] .notification-recipient-option,
html[data-theme="emerald"] input,
html[data-theme="emerald"] textarea,
html[data-theme="emerald"] select,
html[data-theme="emerald"] .tab,
html[data-theme="emerald"] .work-tab,
html[data-theme="emerald"] .dashboard-widget-option,
html[data-theme="emerald"] .notification-recipient-option { background: var(--surface-2); border-color: var(--line); color: var(--text); }

html[data-theme="night"] th,
html[data-theme="graphite"] th,
html[data-theme="emerald"] th { background: var(--surface-2); color: var(--muted); }
html[data-theme="night"] td,
html[data-theme="graphite"] td,
html[data-theme="emerald"] td { border-color: var(--line); }
html[data-theme="night"] .notification-card-content > p,
html[data-theme="graphite"] .notification-card-content > p,
html[data-theme="emerald"] .notification-card-content > p { color: var(--text); }
html[data-theme="night"] .dashboard-widget-meta,
html[data-theme="graphite"] .dashboard-widget-meta,
html[data-theme="emerald"] .dashboard-widget-meta,
html[data-theme="night"] .dashboard-rate-row,
html[data-theme="graphite"] .dashboard-rate-row,
html[data-theme="emerald"] .dashboard-rate-row { border-color: var(--line); }

html[data-theme="night"] .login-copy,
html[data-theme="night"] .login-page,
html[data-theme="night"] .guest-page,
html[data-theme="graphite"] .login-copy,
html[data-theme="graphite"] .login-page,
html[data-theme="graphite"] .guest-page,
html[data-theme="emerald"] .login-copy,
html[data-theme="emerald"] .login-page,
html[data-theme="emerald"] .guest-page { background: var(--bg); }
html[data-theme="night"] .login-module,
html[data-theme="graphite"] .login-module,
html[data-theme="emerald"] .login-module { background: var(--surface-2); border-color: var(--line); }

html[data-theme="night"] .theme-dialog,
html[data-theme="graphite"] .theme-dialog,
html[data-theme="emerald"] .theme-dialog,
html[data-theme="night"] .dashboard-widget-dialog,
html[data-theme="graphite"] .dashboard-widget-dialog,
html[data-theme="emerald"] .dashboard-widget-dialog { background: var(--surface); border-color: var(--line); color: var(--text); }
html[data-theme="night"] .theme-option:hover,
html[data-theme="night"] .theme-option:has(input:checked),
html[data-theme="graphite"] .theme-option:hover,
html[data-theme="graphite"] .theme-option:has(input:checked),
html[data-theme="emerald"] .theme-option:hover,
html[data-theme="emerald"] .theme-option:has(input:checked) { background: var(--surface-2); border-color: var(--primary); }

@media (max-width: 900px) {
    .topbar-global-actions { flex: 0 0 auto; }
}

/* User-selectable product themes */
html[data-theme="night"] {
    color-scheme: dark;
    --bg: #101820;
    --surface: #17232d;
    --surface-2: #20303b;
    --text: #edf7fa;
    --muted: #a8bac3;
    --line: #344752;
    --primary: #5fc1cf;
    --primary-dark: #b7edf2;
    --accent: #52cfaa;
    --danger: #ff8f86;
    --success: #6cddb0;
    --shadow: 0 14px 32px rgba(0, 0, 0, .24);
    --sidebar: #14212b;
    --sidebar-soft: #1e303a;
    --sidebar-ink: #edf7fa;
}
html[data-theme="graphite"] {
    --bg: #f1f3f6;
    --surface: #ffffff;
    --surface-2: #e8ecf1;
    --text: #202631;
    --muted: #697386;
    --line: #cfd6df;
    --primary: #52627a;
    --primary-dark: #35445a;
    --accent: #8775c4;
    --sidebar: #f8f9fb;
    --sidebar-soft: #e9edf2;
    --sidebar-ink: #202631;
}
html[data-theme="emerald"] {
    --bg: #f0f8f4;
    --surface: #ffffff;
    --surface-2: #e7f3ed;
    --text: #17332c;
    --muted: #637a71;
    --line: #cfe2d8;
    --primary: #117a65;
    --primary-dark: #0b5547;
    --accent: #d08a3e;
    --sidebar: #f7fbf8;
    --sidebar-soft: #e5f2eb;
    --sidebar-ink: #17332c;
}

html[data-theme="night"] body,
html[data-theme="graphite"] body,
html[data-theme="emerald"] body { background: var(--bg); color: var(--text); }
html[data-theme="night"] .sidebar,
html[data-theme="graphite"] .sidebar,
html[data-theme="emerald"] .sidebar { background: var(--sidebar); border-color: var(--line); color: var(--text); }
html[data-theme="night"] .topbar,
html[data-theme="graphite"] .topbar,
html[data-theme="emerald"] .topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); border-color: var(--line); }
html[data-theme="night"] .card,
html[data-theme="night"] .stat-card,
html[data-theme="night"] .module-feature-card,
html[data-theme="night"] .dashboard-widget-card,
html[data-theme="night"] .agent-dashboard-panel,
html[data-theme="night"] .platform-metric-card,
html[data-theme="night"] .platform-health-band,
html[data-theme="night"] .platform-quick-actions,
html[data-theme="night"] .platform-tenant-card,
html[data-theme="night"] .platform-license-row,
html[data-theme="night"] .platform-firm-card,
html[data-theme="night"] .platform-firm-detail-summary,
html[data-theme="night"] .notification-card,
html[data-theme="night"] .workspace-card,
html[data-theme="night"] .mail-preview,
html[data-theme="night"] .form-drawer,
html[data-theme="night"] .drawer-header,
html[data-theme="night"] .calendar-day,
html[data-theme="night"] .login-panel,
html[data-theme="night"] .login-copy,
html[data-theme="night"] .login-card,
html[data-theme="graphite"] .card,
html[data-theme="graphite"] .stat-card,
html[data-theme="graphite"] .module-feature-card,
html[data-theme="graphite"] .dashboard-widget-card,
html[data-theme="graphite"] .agent-dashboard-panel,
html[data-theme="graphite"] .platform-metric-card,
html[data-theme="graphite"] .platform-health-band,
html[data-theme="graphite"] .platform-quick-actions,
html[data-theme="graphite"] .platform-tenant-card,
html[data-theme="graphite"] .platform-license-row,
html[data-theme="graphite"] .platform-firm-card,
html[data-theme="graphite"] .platform-firm-detail-summary,
html[data-theme="emerald"] .card,
html[data-theme="emerald"] .stat-card,
html[data-theme="emerald"] .module-feature-card,
html[data-theme="emerald"] .dashboard-widget-card,
html[data-theme="emerald"] .agent-dashboard-panel,
html[data-theme="emerald"] .platform-metric-card,
html[data-theme="emerald"] .platform-health-band,
html[data-theme="emerald"] .platform-quick-actions,
html[data-theme="emerald"] .platform-tenant-card,
html[data-theme="emerald"] .platform-license-row,
html[data-theme="emerald"] .platform-firm-card,
html[data-theme="emerald"] .platform-firm-detail-summary { background: var(--surface); border-color: var(--line); color: var(--text); }
html[data-theme="night"] .nav-link,
html[data-theme="night"] .nav-sub-label { color: #6d7f88; }
html[data-theme="night"] .nav-sub a { color: var(--muted); }
html[data-theme="night"] .nav-link.active,
html[data-theme="night"] .nav-link:hover,
html[data-theme="night"] .nav-sub a.active,
html[data-theme="night"] .nav-sub a:hover { background: #1d3a40; color: var(--primary-dark); }
html[data-theme="night"] input,
html[data-theme="night"] textarea,
html[data-theme="night"] select,
html[data-theme="night"] .sidebar-menu-search,
html[data-theme="night"] .sidebar-search input,
html[data-theme="night"] .menu-search input { border-color: var(--line); background: var(--surface-2); color: var(--text); }
html[data-theme="graphite"] input,
html[data-theme="graphite"] textarea,
html[data-theme="graphite"] select,
html[data-theme="emerald"] input,
html[data-theme="emerald"] textarea,
html[data-theme="emerald"] select { border-color: var(--line); background: var(--surface); color: var(--text); }
html[data-theme="night"] th { background: var(--surface-2); color: var(--muted); }
html[data-theme="night"] td { border-color: var(--line); }
html[data-theme="night"] .user-chip,
html[data-theme="night"] .notification-button,
html[data-theme="night"] .theme-trigger,
html[data-theme="night"] .dashboard-widget-trigger,
html[data-theme="night"] .icon-button { border-color: var(--line); background: var(--surface-2); color: var(--primary-dark); }
html[data-theme="night"] .button.secondary,
html[data-theme="night"] .btn.secondary { background: var(--surface-2); color: var(--text); }
html[data-theme="night"] .login-page,
html[data-theme="night"] .guest-page { background: var(--bg); }
html[data-theme="graphite"] .login-page,
html[data-theme="graphite"] .guest-page { background: var(--bg); }
html[data-theme="emerald"] .login-page,
html[data-theme="emerald"] .guest-page { background: var(--bg); }
html[data-theme="night"] .platform-metric-card strong,
html[data-theme="night"] .platform-metric-card small,
html[data-theme="night"] .platform-metric-card > div > span { color: var(--primary-dark); }

/* Maintenance operations center */
.maintenance-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; border: 1px solid #d5e4e8; border-radius: 8px; background: linear-gradient(115deg, #f1fbfb 0%, #fff 72%); padding: 25px 28px; }
.maintenance-hero-copy { min-width: 0; }
.maintenance-kicker { display: inline-flex; align-items: center; gap: 6px; color: #0d7182; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.maintenance-kicker svg { width: 13px; height: 13px; }
.maintenance-hero h2 { margin: 8px 0 5px; color: #172534; font-size: 27px; line-height: 1.12; }
.maintenance-hero p, .maintenance-section-heading p { margin: 0; color: #72818e; font-size: 13px; }
.maintenance-hero-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.button.tertiary { border: 1px solid #d6e3e7; background: #fff; color: #1d5363; }
.maintenance-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
.maintenance-kpi { display: flex; align-items: center; gap: 11px; min-width: 0; border: 1px solid #dce6e9; border-top: 3px solid var(--metric-color, #0f768d); border-radius: 7px; background: #fff; padding: 13px 12px; }
.maintenance-kpi-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 7px; background: var(--metric-soft, #e9f7f8); color: var(--metric-color, #0f768d); }
.maintenance-kpi-icon svg { width: 16px; height: 16px; }
.maintenance-kpi small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-kpi strong { display: block; overflow-wrap: anywhere; }
.maintenance-kpi span { display: block; white-space: normal; overflow-wrap: anywhere; }
.maintenance-kpi > div { min-width: 0; }
.maintenance-kpi small { color: #71808c; font-size: 10px; font-weight: 700; }
.maintenance-kpi strong { margin-top: 1px; color: #172534; font-size: clamp(16px, 1.45vw, 22px); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Para tutarı taşıyan kartlar iki sütun kaplar: tek sütunda tutar satır atlamak zorunda kalıyordu. */
.maintenance-kpi.is-money { grid-column: span 2; }
.maintenance-kpi.is-money strong { font-size: clamp(15px, 1.15vw, 19px); }
@media (max-width: 720px) { .maintenance-kpi.is-money { grid-column: span 1; } }
.maintenance-kpi span { margin-top: 4px; color: #9aa6ad; font-size: 10px; }
.maintenance-kpi.accent-blue { --metric-color: #2468a5; --metric-soft: #edf5fc; }
.maintenance-kpi.accent-teal { --metric-color: #138c83; --metric-soft: #eaf8f5; }
.maintenance-kpi.accent-amber { --metric-color: #ba7a16; --metric-soft: #fff7e8; }
.maintenance-kpi.accent-red { --metric-color: #c14d4d; --metric-soft: #fff0f0; }
.maintenance-kpi.accent-violet { --metric-color: #7565a8; --metric-soft: #f3f0fb; }
.maintenance-kpi.accent-slate { --metric-color: #526677; --metric-soft: #f0f4f6; }
.maintenance-action-note { padding: 4px 2px 0; font-size: 10px; line-height: 1.4; }
.maintenance-board-section, .maintenance-list-section, .maintenance-side-panel, .maintenance-assets-section { border: 1px solid #d9e4e8; border-radius: 8px; background: #fff; }
.maintenance-board-section { margin-bottom: 18px; padding: 22px; }
.maintenance-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.maintenance-section-heading.compact { margin-bottom: 13px; }
.maintenance-section-heading h2 { margin: 5px 0 4px; color: #172534; font-size: 20px; line-height: 1.15; }
.maintenance-section-heading.compact h2 { font-size: 17px; }
.maintenance-updated { display: inline-flex; align-items: center; gap: 6px; color: #88969e; font-size: 11px; white-space: nowrap; }
.maintenance-updated svg { width: 14px; height: 14px; }
.maintenance-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.maintenance-lane { min-width: 0; border: 1px solid #e1e8eb; border-radius: 7px; background: #f8fafb; overflow: hidden; }
.maintenance-lane > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e8eb; padding: 12px 13px; }
.maintenance-lane > header > div { display: flex; align-items: center; gap: 8px; }
.lane-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 6px; background: #edf5fc; color: #2468a5; }
.lane-teal .lane-icon { background: #eaf8f5; color: #138c83; }
.lane-amber .lane-icon { background: #fff7e8; color: #ba7a16; }
.lane-icon svg { width: 14px; height: 14px; }
.maintenance-lane > header strong { color: #273844; font-size: 13px; }
.lane-count { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 12px; background: #e6eef1; color: #48606b; font-size: 11px; font-weight: 800; }
.maintenance-lane-list { display: grid; gap: 8px; min-height: 145px; padding: 10px; }
.maintenance-ticket { border: 1px solid #dfe8eb; border-left: 3px solid #a8bdc5; border-radius: 6px; background: #fff; padding: 11px; }
.maintenance-ticket.priority-critical { border-left-color: #c14d4d; }
.maintenance-ticket.priority-high { border-left-color: #ba7a16; }
.maintenance-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.maintenance-ref { color: #70818c; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.priority-label { color: #788993; font-size: 10px; }
.priority-critical .priority-label { color: #bd4a4a; font-weight: 800; }
.maintenance-ticket h3 { margin: 7px 0 8px; color: #1e2e3a; font-size: 13px; line-height: 1.25; }
.maintenance-ticket p, .maintenance-ticket footer, .maintenance-ticket footer span, .maintenance-ticket footer time { display: flex; align-items: center; gap: 5px; }
.maintenance-ticket p { margin: 0; color: #647780; font-size: 11px; }
.maintenance-ticket p svg, .maintenance-ticket footer svg { width: 12px; height: 12px; flex: 0 0 12px; }
.maintenance-ticket footer { justify-content: space-between; margin-top: 10px; color: #8b989f; font-size: 10px; }
.maintenance-lane-empty, .maintenance-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; min-height: 130px; color: #9aa8af; font-size: 11px; text-align: center; }
.maintenance-lane-empty svg, .maintenance-empty svg { width: 23px; height: 23px; color: #7fb8ae; }
.lane-more { display: block; border-top: 1px solid #e1e8eb; padding: 9px 12px; color: #0d7182; font-size: 10px; font-weight: 700; text-decoration: none; }
.maintenance-content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .55fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.maintenance-list-section { min-width: 0; padding: 22px; }
.maintenance-table-wrap { overflow-x: auto; }
.maintenance-table { width: 100%; min-width: 790px; border-collapse: collapse; }
.maintenance-table th { padding: 9px 8px; border-bottom: 1px solid #dce5e8; color: #819099; font-size: 10px; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.maintenance-table td { padding: 12px 8px; border-bottom: 1px solid #edf1f2; color: #52636d; font-size: 11px; vertical-align: middle; }
.maintenance-table tr:last-child td { border-bottom: 0; }
.maintenance-table td strong, .maintenance-table td span, .maintenance-table td small { display: block; }
.maintenance-table td strong { color: #22323d; font-size: 12px; }
.maintenance-table td span { margin-top: 3px; color: #70818b; }
.maintenance-table td small { margin-top: 4px; color: #a0abb0; font-size: 10px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d7e7eb; border-radius: 999px; background: #eef8f9; color: #155c6d; padding: 6px 10px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.maintenance-status, .maintenance-linked, .maintenance-unlinked { display: inline-flex !important; align-items: center; gap: 4px; width: max-content; border-radius: 12px; padding: 5px 8px; font-size: 10px !important; font-weight: 700; }
.maintenance-status.status-open { background: #edf5fc; color: #2468a5 !important; }
.maintenance-status.status-in_progress { background: #eaf8f5; color: #138c83 !important; }
.maintenance-status.status-waiting_parts { background: #fff7e8; color: #a86e14 !important; }
.maintenance-status.status-completed { background: #edf7ef; color: #3e8150 !important; }
.maintenance-status.status-cancelled { background: #f2f4f5; color: #7b878d !important; }
.maintenance-linked { background: #eef7f7; color: #25717b !important; }
.maintenance-unlinked { background: #fff7e8; color: #a86e14 !important; }
.maintenance-linked svg { width: 11px; height: 11px; }
.maintenance-row-actions { width: 42px; text-align: right; }
.maintenance-action-menu { position: relative; }
.maintenance-action-menu summary { display: grid; width: 30px; height: 30px; margin-left: auto; place-items: center; border: 1px solid #d9e4e8; border-radius: 6px; color: #52707a; cursor: pointer; list-style: none; }
.maintenance-action-menu summary::-webkit-details-marker { display: none; }
.maintenance-action-menu summary svg { width: 16px; height: 16px; }
.maintenance-action-popover { position: absolute; z-index: 5; right: 0; top: 36px; width: 220px; border: 1px solid #d4e1e5; border-radius: 7px; background: #fff; box-shadow: 0 14px 32px rgba(25, 50, 63, .16); padding: 12px; }
.maintenance-action-popover form + form { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e8eef0; }
.maintenance-action-popover label { display: block; margin-bottom: 8px; color: #63757f; font-size: 10px; font-weight: 700; }
.maintenance-action-popover select, .maintenance-action-popover textarea { width: 100%; margin-top: 4px; font-size: 11px; }
.maintenance-action-popover .button { width: 100%; justify-content: center; padding: 8px 10px; font-size: 11px; }
.maintenance-side-column { display: grid; gap: 18px; }
.maintenance-side-panel { min-width: 0; padding: 18px; }
.maintenance-side-panel > .maintenance-section-heading > i { width: 18px; color: #7d9ca4; }
.maintenance-plan-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #edf1f2; }
.plan-date { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 6px; background: #eef7f7; color: #0d7182; font-size: 11px; font-weight: 800; }
.maintenance-plan-row strong, .maintenance-plan-row span { display: block; }
.maintenance-plan-row strong { color: #293d48; font-size: 11px; }
.maintenance-plan-row div span { margin-top: 3px; color: #8c999f; font-size: 10px; }
.maintenance-empty.small { min-height: 90px; }
.maintenance-health-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid #edf1f2; color: #667982; font-size: 11px; }
.maintenance-health-row strong { color: #21353f; font-size: 17px; }
.text-amber { color: #b97816 !important; }
.text-red { color: #c14d4d !important; }
.maintenance-assets-section { padding: 22px; }
.maintenance-asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.maintenance-asset-row { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid #e2eaec; border-radius: 6px; padding: 10px; }
.asset-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 6px; background: #f0f6f7; color: #3d7c86; }
.asset-icon svg { width: 16px; height: 16px; }
.maintenance-asset-row > div { min-width: 0; flex: 1 1 auto; }
.maintenance-asset-row strong, .maintenance-asset-row div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-asset-row strong { color: #2a3e49; font-size: 12px; }
.maintenance-asset-row div span { margin-top: 3px; color: #89979e; font-size: 10px; }
.asset-criticality, .asset-state { border-radius: 10px; padding: 4px 7px; color: #7c8b91; font-size: 9px; font-weight: 700; white-space: nowrap; }
.criticality-critical { background: #fff0f0; color: #bd4a4a; }
.criticality-high { background: #fff7e8; color: #a86e14; }
.criticality-normal { background: #eef5f7; color: #58717a; }
.asset-state.is-active { background: #edf7ef; color: #3e8150; }
.maintenance-modal { width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 30px); overflow: auto; border: 0; border-radius: 8px; padding: 0; box-shadow: 0 22px 70px rgba(19, 41, 53, .26); }
.maintenance-modal::backdrop { background: rgba(24, 43, 52, .52); backdrop-filter: blur(3px); }
.maintenance-modal > form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e2eaec; padding: 22px 24px 17px; }
.maintenance-modal header h2 { margin: 6px 0 4px; color: #172534; font-size: 22px; }
.maintenance-modal header p { margin: 0; color: #7a8991; font-size: 12px; }
.maintenance-modal-body { padding: 20px 24px; }
.maintenance-modal-body label { color: #344d59; font-size: 11px; font-weight: 700; }
.maintenance-modal-body .full { grid-column: 1 / -1; }
.maintenance-material-box { display: grid; gap: 7px; margin-top: 18px; border-top: 1px solid #e3ebed; padding-top: 16px; }
.maintenance-material-box > div:first-child { display: flex; flex-direction: column; gap: 3px; margin-bottom: 3px; }
.maintenance-material-box strong { color: #294957; font-size: 12px; }
.maintenance-material-box span { color: #84939a; font-size: 10px; }
.maintenance-material-row { display: grid; grid-template-columns: minmax(170px, 1.25fr) minmax(170px, 1fr) 100px 90px; gap: 7px; }
.maintenance-modal > form > footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e2eaec; background: #fbfcfc; padding: 14px 24px; }
.hr-personnel-modal { width: min(980px, calc(100vw - 28px)); max-height: calc(100vh - 24px); }
.hr-personnel-modal .maintenance-modal-body { max-height: calc(100vh - 170px); overflow-y: auto; }
.hr-personnel-modal .grid { align-items: start; }

@media (max-width: 560px) {
    .hr-personnel-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    .hr-personnel-modal > form > header { padding: 18px 16px 14px; }
    .hr-personnel-modal .maintenance-modal-body { max-height: calc(100vh - 150px); padding: 16px; }
    .hr-personnel-modal > form > footer { padding: 12px 16px; }
}

/* Maintenance TV wall */
.maintenance-tv-body { min-height: 100vh; margin: 0; background: #102a35; color: #eaf5f6; font-family: Instrument Sans, Segoe UI, Arial, sans-serif; }
.maintenance-tv-shell { min-height: 100vh; padding: clamp(18px, 2.4vw, 38px); }
.maintenance-tv-header { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: clamp(18px, 2.2vw, 30px); }
.maintenance-tv-brand, .maintenance-tv-brand > div, .maintenance-tv-clock, .maintenance-tv-actions, .maintenance-tv-summary div, .maintenance-tv-summary .tv-refresh-info, .tv-ticket-head, .tv-ticket-asset, .tv-ticket-meta, .tv-ticket-meta span, .tv-ticket-link, .maintenance-tv-footer { display: flex; align-items: center; }
.maintenance-tv-brand { gap: 13px; min-width: 0; }
.maintenance-tv-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 10px; background: #1b6f7e; color: #fff; }
.maintenance-tv-mark svg { width: 26px; height: 26px; }
.maintenance-tv-brand > div { align-items: flex-start; flex-direction: column; gap: 3px; min-width: 0; }
.maintenance-tv-brand strong { overflow: hidden; color: #fff; font-size: clamp(16px, 1.5vw, 24px); text-overflow: ellipsis; white-space: nowrap; }
.maintenance-tv-brand span { color: #91b8bf; font-size: 12px; }
.maintenance-tv-clock { align-items: flex-end; flex-direction: column; gap: 2px; margin-left: auto; }
.maintenance-tv-clock strong { color: #fff; font-size: clamp(28px, 3.2vw, 50px); line-height: 1; }
.maintenance-tv-clock span { color: #93b7be; font-size: 12px; text-transform: capitalize; }
.maintenance-tv-actions { gap: 7px; }
.tv-icon-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #315563; border-radius: 7px; background: #163b48; color: #b8d6da; cursor: pointer; }
.tv-icon-button:hover { border-color: #5fadb5; color: #fff; }
.tv-icon-button svg { width: 17px; height: 17px; }
.maintenance-tv-summary { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(180px, auto); gap: 10px; margin-bottom: 15px; }
.maintenance-tv-summary > div { min-width: 0; border: 1px solid #29515d; border-radius: 7px; background: #153845; padding: 13px 15px; }
.maintenance-tv-summary span { color: #8bb4bb; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.maintenance-tv-summary strong { display: block; margin-top: 6px; color: #fff; font-size: clamp(23px, 2.2vw, 34px); line-height: 1; }
.maintenance-tv-summary .tv-refresh-info { justify-content: center; gap: 8px; border-color: transparent; background: transparent; color: #8bb4bb; font-size: 11px; }
.maintenance-tv-summary .tv-refresh-info svg { width: 16px; }
.tv-red { color: #ff9999 !important; }
.tv-teal { color: #76dfcf !important; }
.tv-amber { color: #ffd180 !important; }
.maintenance-tv-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.maintenance-tv-lane { min-width: 0; border: 1px solid #2b5561; border-radius: 8px; background: #143542; overflow: hidden; }
.maintenance-tv-lane > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2b5561; padding: 15px 17px; }
.maintenance-tv-lane > header > div { display: flex; align-items: center; gap: 10px; }
.maintenance-tv-lane > header > div > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; background: #214c5b; color: #8ed1d3; }
.tv-lane-teal > header > div > span { color: #72ddc8; }
.tv-lane-amber > header > div > span { color: #ffd180; }
.maintenance-tv-lane h2 { margin: 0; color: #fff; font-size: clamp(14px, 1.5vw, 21px); }
.maintenance-tv-lane > header > strong { display: grid; min-width: 29px; height: 29px; place-items: center; border-radius: 15px; background: #255765; color: #fff; font-size: 12px; }
.maintenance-tv-list { display: grid; gap: 10px; max-height: calc(100vh - 300px); overflow-y: auto; padding: 12px; }
.maintenance-tv-ticket { border: 1px solid #315c68; border-left: 4px solid #518895; border-radius: 6px; background: #1b4350; padding: 14px; }
.maintenance-tv-ticket.priority-critical { border-left-color: #f07979; }
.maintenance-tv-ticket.priority-high { border-left-color: #f1b557; }
.tv-ticket-head { justify-content: space-between; gap: 9px; }
.tv-ticket-head span { color: #8fb6bd; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.tv-ticket-head b { color: #c5dfe2; font-size: 10px; }
.priority-critical .tv-ticket-head b { color: #ff9999; }
.maintenance-tv-ticket h3 { margin: 9px 0 11px; color: #fff; font-size: clamp(14px, 1.3vw, 19px); line-height: 1.2; }
.tv-ticket-asset { gap: 6px; margin: 0; color: #c1dadd; font-size: 11px; }
.tv-ticket-asset svg, .tv-ticket-meta svg, .tv-ticket-link svg { width: 13px; height: 13px; flex: 0 0 13px; }
.tv-ticket-asset small { color: #86abb2; }
.tv-ticket-meta { justify-content: space-between; gap: 6px; margin-top: 13px; color: #8db4bb; font-size: 10px; }
.tv-ticket-meta span { gap: 5px; min-width: 0; }
.tv-ticket-meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-ticket-link { gap: 6px; margin-top: 10px; border-top: 1px solid #315c68; padding-top: 9px; color: #7fe0cf; font-size: 10px; }
.tv-ticket-link.pending { color: #ffd180; }
.maintenance-tv-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; min-height: 160px; color: #6f9ba3; font-size: 12px; }
.maintenance-tv-empty svg { width: 29px; height: 29px; color: #5b9b91; }
.maintenance-tv-footer { justify-content: space-between; gap: 15px; margin-top: 13px; color: #719ca4; font-size: 10px; }
.maintenance-tv-footer span { display: inline-flex; align-items: center; gap: 5px; }
.maintenance-tv-footer svg { width: 13px; height: 13px; }

@media (max-width: 1180px) {
    .maintenance-kpis { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
    .maintenance-content-grid { grid-template-columns: 1fr; }
    .maintenance-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .maintenance-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
    .maintenance-hero h2 { font-size: 23px; }
    .maintenance-hero-actions { justify-content: flex-start; }
    .maintenance-board, .maintenance-tv-board { grid-template-columns: 1fr; }
    .maintenance-tv-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .maintenance-tv-summary .tv-refresh-info { grid-column: 1 / -1; justify-content: flex-start; }
    .maintenance-tv-list { max-height: none; }
}
@media (max-width: 560px) {
    .maintenance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .maintenance-kpi { padding: 10px 8px; }
    .maintenance-kpi-icon { width: 27px; height: 27px; flex-basis: 27px; }
    .maintenance-kpi strong { font-size: 20px; }
    .maintenance-kpi span { font-size: 9px; }
    .maintenance-board-section, .maintenance-list-section, .maintenance-side-panel, .maintenance-assets-section { padding: 15px; }
    .maintenance-section-heading { align-items: flex-start; flex-direction: column; }
    .maintenance-section-heading > .maintenance-updated { align-self: flex-start; }
    .maintenance-side-column, .maintenance-asset-grid { grid-template-columns: 1fr; }
    .maintenance-material-row { grid-template-columns: 1fr 1fr; }
    .maintenance-material-row label:first-child { grid-column: 1 / -1; }
    .maintenance-material-row input:first-child { grid-column: 1 / -1; }
    .maintenance-modal-body { padding: 16px; }
    .maintenance-modal > form > header, .maintenance-modal > form > footer { padding-right: 16px; padding-left: 16px; }
    .maintenance-tv-shell { padding: 14px; }
    .maintenance-tv-header { align-items: flex-start; flex-wrap: wrap; gap: 14px; }
    .maintenance-tv-clock { order: 3; align-items: flex-start; width: 100%; margin-left: 0; }
    .maintenance-tv-actions { margin-left: auto; }
    .maintenance-tv-summary { gap: 7px; }
    .maintenance-tv-summary > div { padding: 10px; }
    .maintenance-tv-summary span { font-size: 8px; }
    .maintenance-tv-footer { align-items: flex-start; flex-direction: column; }
}

/* Organization definitions */
.definition-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.definition-intro h2 { margin: 4px 0 6px; font-size: 24px; }
.definition-intro p { max-width: 760px; margin: 0; }
.definition-intro-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.definition-intro-stats span { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; color: var(--muted); font-size: 12px; white-space: nowrap; }
.definition-intro-stats strong { color: var(--text); font-size: 16px; }
.definition-tabs { display: flex; gap: 8px; margin: 0 0 16px; overflow-x: auto; }
.definition-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.definition-tabs a:hover, .definition-tabs a:focus-visible { border-color: #9ccfd4; background: #eef8f8; outline: 0; }
.definition-tabs svg { width: 16px; color: var(--primary); }
.organization-setup-card { margin-bottom: 16px; }
.organization-setup-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.organization-setup-steps .setup-step { text-decoration: none; }
.organization-setup-steps .setup-step:hover { border-color: #9ed4dc; background: #f2fbfb; }
.definition-tree-details { min-width: 150px; }
.definition-tree-details summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--primary-dark); font-weight: 750; list-style: none; }
.definition-tree-details summary::-webkit-details-marker { display: none; }
.definition-tree-details summary svg { width: 14px; transition: transform .15s ease; }
.definition-tree-details[open] summary svg { transform: rotate(90deg); }
.definition-tree-list { display: grid; gap: 4px; margin-top: 7px; padding: 7px 0 2px 18px; border-left: 2px solid #d7ece9; color: #475467; font-size: 12px; }
.definition-tree-list span { display: block; }
.definition-tree-list small { color: var(--muted); }
.definition-section { margin-bottom: 16px; scroll-margin-top: 18px; }
.definition-section .section-heading { align-items: center; }
.definition-section .section-heading h2 { margin: 3px 0 4px; }
.definition-table-wrap { overflow-x: auto; }
.numbering-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.numbering-card { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; padding: 14px; align-content: start; }
.numbering-card-head { display: flex; flex-direction: column; gap: 2px; }
.numbering-card-head strong { font-size: 14px; }
.numbering-card-head span { font-size: 12px; }
.numbering-card-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.definition-table { min-width: 720px; }
.definition-table td, .definition-table th { vertical-align: middle; }
.definition-actions { width: 58px; text-align: right; }
.approval-list { display: grid; gap: 10px; }
.approval-list-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 16px; }
.approval-list-item h3 { margin: 4px 0; font-size: 17px; }
.approval-list-item p { margin: 0; }
.approval-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
@media (max-width: 768px) { .approval-list-item { align-items: stretch; flex-direction: column; } .approval-actions { justify-content: flex-start; } }
.definition-count { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.definition-count svg { width: 15px; color: var(--primary); }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.status-dot::before { width: 7px; height: 7px; border-radius: 50%; background: #b5c0c8; content: ''; }
.status-dot.active::before { background: #20a47a; }
.definition-modal { width: min(680px, calc(100vw - 28px)); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: 10px; box-shadow: 0 24px 80px rgba(16, 31, 45, .24); overflow: hidden; }
.definition-modal::backdrop { background: rgba(23, 39, 51, .48); backdrop-filter: blur(2px); }
.definition-modal-header { display: flex; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.definition-modal-header h2 { margin: 3px 0 5px; font-size: 22px; }
.definition-modal-body { max-height: 62vh; overflow-y: auto; padding: 20px 24px; }
.definition-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); background: #fafcfc; }
.definition-user-access { margin-top: 18px; border: 1px solid #d6e4e7; border-radius: 8px; background: #f6fbfb; padding: 14px; }
.definition-user-access-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.definition-user-access-header div { display: grid; gap: 3px; }
.definition-user-access-header .muted { font-size: 12px; }
.definition-user-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; max-height: 150px; overflow-y: auto; padding-right: 3px; }
.definition-user-list .choice-row { min-width: 0; padding: 6px; }
.definition-user-list .choice-row span { min-width: 0; overflow: hidden; }
.definition-user-list small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.modal-assignment-panel { margin-top: 14px; border: 1px solid #d5e1e4; border-radius: 8px; background: #f8fbfb; }
.modal-assignment-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; cursor: pointer; list-style: none; font-weight: 700; }
.modal-assignment-panel summary::-webkit-details-marker { display: none; }
.modal-assignment-panel summary span { display: inline-flex; align-items: center; gap: 7px; }
.modal-assignment-panel summary svg { width: 17px; color: var(--primary); }
.modal-assignment-panel summary small { color: var(--muted); font-weight: 500; }
.modal-assignment-panel[open] summary { border-bottom: 1px solid #d5e1e4; }
.modal-assignment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.modal-assignment-grid fieldset { min-width: 0; max-height: 170px; overflow-y: auto; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.modal-assignment-grid legend { padding: 0 4px; color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.modal-assignment-grid .check { display: flex; align-items: flex-start; gap: 6px; margin: 3px 0; padding: 5px; font-size: 12px; line-height: 1.25; }
.modal-assignment-grid .check span { min-width: 0; }
.modal-assignment-grid .check small { display: block; color: var(--muted); }
.organization-access-note { display: flex; align-items: flex-start; gap: 7px; margin: 0 12px; padding: 9px 10px; border-radius: 7px; background: #edf8f6; color: #3f625e; font-size: 12px; line-height: 1.4; }
.organization-access-note svg { width: 15px; flex: 0 0 15px; color: var(--primary); }
.organization-assignment-grid fieldset { min-height: 140px; }
.organization-department-option { display: grid; gap: 2px; padding: 4px 0 7px; border-bottom: 1px solid #edf1f2; }
.organization-department-option:last-child { border-bottom: 0; }
.organization-manager-check { margin-left: 21px !important; color: var(--primary-dark); font-size: 11px !important; }
.organization-manager-check input:disabled { opacity: .45; }
.organization-current-manager { display: block; margin-left: 21px; color: var(--muted); font-size: 11px; }
.organization-assignment-grid fieldset > legend { display: flex; align-items: center; gap: 5px; }
.organization-assignment-grid legend > span { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #e8f4f3; color: var(--primary-dark); font-size: 10px; }
.organization-assignment-grid .check[hidden] { display: none; }
.permission-tree-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #d5e6e8; border-radius: 8px; background: #f4fafb; color: #285565; }
.permission-tree-heading > div { display: grid; gap: 2px; }
.permission-tree-heading span { color: var(--muted); font-size: 12px; }
.permission-legend { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.permission-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.permission-legend-dot.inherited { background: #168b78; }
.permission-legend-dot.extra { background: #c58a2b; margin-left: 6px; }
.permission-check-group legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.permission-group-toggle { padding: 2px 6px; border: 1px solid #c7dfe0; border-radius: 5px; background: white; color: var(--primary-dark); font-size: 10px; font-weight: 750; cursor: pointer; }
.permission-group-toggle:hover { border-color: var(--primary); background: #edf8f6; }
.permission-option { min-height: 30px; }
.permission-option.is-inherited { border-left: 2px solid #168b78; padding-left: 6px; }
.permission-summary small { color: var(--muted); }
.modal-profile-guide { margin: 0 24px 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.modal-profile-guide summary { cursor: pointer; color: var(--primary-dark); font-weight: 800; }
.modal-profile-guide[open] summary { margin-bottom: 10px; }
.definition-form-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; padding: 10px 11px; border-radius: 7px; background: #edf8f6; color: #3f625e; font-size: 12px; line-height: 1.4; }
.definition-form-note svg { width: 15px; flex: 0 0 15px; color: var(--primary); }
@media (max-width: 900px) { .organization-setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .permission-tree-heading { align-items: flex-start; flex-direction: column; } }

@media (max-width: 700px) {
    .definition-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
    .definition-intro-stats { justify-content: flex-start; }
    .definition-modal-header, .definition-modal-body, .definition-modal-actions { padding-right: 16px; padding-left: 16px; }
    .definition-user-list, .modal-assignment-grid { grid-template-columns: 1fr; }
    .modal-assignment-panel summary { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* CRM ajanda */
.crm-calendar-entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.crm-calendar-entry-grid .card { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid textarea { min-height: 82px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.calendar-shell { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 14px; align-items: start; }
.calendar-toolbar { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(360px, auto); gap: 10px; align-items: end; margin-bottom: 12px; }
.calendar-title h2 { margin: 0; }
.calendar-nav, .calendar-toolbar-form, .segmented-control, .calendar-rep-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calendar-toolbar-form input, .calendar-toolbar-form select { min-height: 36px; width: auto; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 10px; }
.segmented-control { gap: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 3px; }
.segmented-control a { border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 900; padding: 7px 9px; }
.segmented-control a.active { background: white; color: var(--primary-dark); box-shadow: var(--shadow); }
.segmented-count { display: inline-block; min-width: 18px; margin-left: 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; padding: 1px 6px; text-align: center; }
.segmented-control a.active .segmented-count { background: var(--primary); color: #fff; }
.support-scope-switch { width: fit-content; max-width: 100%; margin-bottom: 16px; }
.calendar-rep-strip { margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.calendar-rep-strip a { border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font-size: 12px; font-weight: 800; padding: 6px 9px; }
.calendar-rep-strip a.active, .calendar-rep-strip a:hover { border-color: rgba(47, 158, 143, .38); background: #f0fdfa; color: var(--primary-dark); }
.calendar-rep-strip a[class*="rep-color-"] { display: inline-flex; align-items: center; border-color: var(--rep-border); background: var(--rep-bg); color: #344054; }
.calendar-rep-strip a[class*="rep-color-"]::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 999px; background: var(--rep-color); content: ""; }
.calendar-rep-strip a[class*="rep-color-"].active, .calendar-rep-strip a[class*="rep-color-"]:hover { border-color: var(--rep-color); color: var(--text); }
.calendar-head, .calendar-day { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.calendar-head { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 800; padding: 8px; text-transform: uppercase; }
.calendar-day { position: relative; min-height: 132px; background: white; padding: 8px; }
.calendar-day-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.calendar-day-number { border: 0; background: transparent; color: inherit; cursor: pointer; font-weight: 900; padding: 0; }
.calendar-day-number:hover { color: var(--primary); text-decoration: underline; }
.calendar-day-actions { display: flex; flex: 0 0 auto; opacity: 0; transition: opacity .15s ease; }
.calendar-day:hover .calendar-day-actions, .calendar-day:focus-within .calendar-day-actions { opacity: 1; }
.calendar-day-add { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #8acbc3; border-radius: 6px; background: rgba(240, 253, 250, .94); color: var(--primary-dark); cursor: pointer; box-shadow: 0 3px 8px rgba(15, 77, 100, .12); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.calendar-day-add:hover { background: #d8f5ef; box-shadow: 0 5px 12px rgba(15, 77, 100, .2); transform: scale(1.08); }
.calendar-day-add svg { width: 14px; height: 14px; stroke-width: 2.5; }
.calendar-day-locked { display: grid; width: 22px; height: 22px; place-items: center; color: #98a2b3; }
.calendar-day-locked svg { width: 13px; height: 13px; }
.calendar-entry-picker { width: min(520px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 24px 70px rgba(17, 24, 39, .2); padding: 22px; }
.calendar-entry-picker::backdrop { background: rgba(17, 24, 39, .38); backdrop-filter: blur(2px); }
.calendar-entry-picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.calendar-entry-picker-header h2 { margin: 2px 0 0; font-size: 20px; }
.calendar-entry-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.calendar-entry-choice { display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--text); cursor: pointer; padding: 16px; text-align: left; }
.calendar-entry-choice:hover { border-color: #9bcfd7; background: #f1fbfa; }
.calendar-entry-choice > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.calendar-entry-choice svg { width: 19px; height: 19px; }
.calendar-entry-choice strong { font-size: 15px; }
.calendar-entry-choice small { color: var(--muted); line-height: 1.4; }
.calendar-entry-modal-form { display: grid; gap: 14px; }
.calendar-entry-modal-form[hidden] { display: none !important; }
.calendar-entry-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.calendar-entry-modal-heading h3 { margin: 2px 0 0; font-size: 19px; }
.calendar-entry-modal-heading .button { width: auto; min-height: 34px; padding: 8px 10px; }
.calendar-day.muted-day { background: #f8fafc; color: var(--muted); }
.calendar-items { display: grid; gap: 6px; margin-top: 7px; }
.calendar-item, .calendar-item-spacer { box-sizing: border-box; min-height: 44px; }
.calendar-item { display: flex; flex-direction: column; justify-content: center; overflow: hidden; border: 1px solid transparent; border-left: 3px solid var(--primary); border-radius: 6px; background: rgba(23, 107, 135, .1); color: var(--primary-dark); font-size: 11px; font-weight: 800; padding: 5px 6px; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.calendar-item-spacer { display: block; visibility: hidden; }
.calendar-item[class*="rep-color-"] { border-color: var(--rep-border); border-left-color: var(--rep-color); background: var(--rep-bg); }
.calendar-item-action { border-left-style: dashed; }
.calendar-item-personal { border-color: var(--event-border); border-left-color: var(--event-color); background: var(--event-bg); }
.calendar-item-span-start { margin-right: -8px; padding-right: 12px; border-radius: 6px 0 0 6px; }
.calendar-item-span-middle { margin-left: -8px; margin-right: -8px; padding-left: 12px; padding-right: 12px; border-radius: 0; border-left-style: solid; }
.calendar-item-span-end { margin-left: -8px; padding-left: 12px; border-radius: 0 6px 6px 0; }
.calendar-item span, .calendar-item b, .calendar-item small { display: block; }
.calendar-item span { color: var(--text); }
.calendar-item b { overflow: hidden; color: var(--text); font-weight: 900; text-overflow: ellipsis; }
.calendar-item small { overflow: hidden; color: var(--muted); font-weight: 700; text-overflow: ellipsis; }
.calendar-more { color: var(--muted); font-size: 11px; font-weight: 800; padding-left: 3px; }
.calendar-timeline { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; }
.timeline-header { display: flex; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.timeline-gutter-head { flex: 0 0 52px; width: 52px; }
.timeline-day-head { flex: 1; min-width: 0; border-left: 1px solid var(--line); padding: 8px 6px; text-align: center; }
.timeline-day-head span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.timeline-day-head strong { display: block; font-size: 14px; }
.timeline-body { position: relative; display: flex; max-height: 620px; overflow-y: auto; }
.timeline-hours { flex: 0 0 52px; width: 52px; }
.timeline-hour-row { height: 48px; border-bottom: 1px solid var(--line); box-sizing: border-box; padding: 2px 6px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.timeline-columns { display: flex; flex: 1; min-width: 0; }
.timeline-column { position: relative; flex: 1; min-width: 0; border-left: 1px solid var(--line); }
.timeline-hour-cell { height: 48px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.timeline-item { position: absolute; display: block; overflow: hidden; box-sizing: border-box; border: 1px solid transparent; border-left: 3px solid var(--primary); border-radius: 6px; background: rgba(23, 107, 135, .12); color: var(--primary-dark); cursor: pointer; font-size: 10px; font-weight: 700; padding: 3px 5px; text-decoration: none; }
.timeline-item[class*="rep-color-"] { border-color: var(--rep-border); border-left-color: var(--rep-color); background: var(--rep-bg); }
.timeline-item-action { border-left-style: dashed; }
.timeline-item-personal { border-color: var(--event-border); border-left-color: var(--event-color); background: var(--event-bg); }
.timeline-item-estimated { border-left-style: dotted; opacity: .88; }
.timeline-item time { display: block; color: var(--muted); font-size: 9px; font-weight: 800; }
.timeline-item strong { display: block; overflow: hidden; color: var(--text); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.calendar-agenda { display: grid; gap: 12px; }
.calendar-agenda > article > time { display: block; margin-bottom: 10px; color: var(--primary-dark); font-weight: 900; }
.list { display: grid; gap: 8px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 11px 13px; }
.list-row:hover { border-color: #9bcfdd; background: #f7fcfe; }
.list-row strong, .list-row small { display: block; }
.list-row small { margin-top: 3px; color: var(--muted); }
.agenda-side { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; padding: 12px; }
.agenda-side-header, .agenda-section-title, .agenda-quick-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agenda-side-header h3 { margin: 2px 0 0; font-size: 15px; }
.agenda-count { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #e9f7f6; color: var(--primary-dark); font-weight: 900; }
.agenda-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.agenda-quick-actions a { display: grid; min-height: 34px; place-items: center; gap: 0; border: 1px solid #b9e6df; border-radius: 7px; background: #f0fdfa; color: var(--primary-dark); font-size: 0; padding: 7px; }
.agenda-quick-actions a:last-child { border-color: var(--line); background: white; }
.agenda-quick-actions svg, .agenda-section-title svg { width: 15px; height: 15px; }
.agenda-section { display: grid; gap: 6px; }
.agenda-section-title { justify-content: flex-start; color: var(--primary-dark); font-size: 12px; font-weight: 900; }
.agenda-overdue .agenda-section-title { color: var(--danger); }
.agenda-mini-item { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 7px; background: white; padding: 8px; }
.agenda-mini-item:hover { border-color: #9bcfdd; background: #f7fcfe; }
.agenda-mini-item span { color: var(--primary-dark); font-size: 11px; font-weight: 900; }
.agenda-mini-item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.agenda-mini-item small, .agenda-empty { margin: 0; color: var(--muted); font-size: 11px; }
.agenda-mini-item-actionable { display: flex; align-items: center; gap: 8px; }
.agenda-mini-item-actionable a { display: grid; gap: 2px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.agenda-mini-item-actionable form { flex: 0 0 auto; }
.agenda-mini-item-actionable .icon-button { width: 26px; height: 26px; color: var(--success, #067647); border: 1px solid var(--line); border-radius: 6px; }
.agenda-mini-item-actionable .icon-button:hover { background: #ecfdf3; border-color: #abefc6; }
.agenda-reassign-form select { max-width: 96px; font-size: 10px; padding: 4px 6px; }
.calendar-year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.calendar-year-grid article { min-height: 178px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; }
.calendar-year-grid article > strong, .calendar-year-grid article > span { display: block; }
.calendar-year-grid article > span { margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 800; }
.agenda-row { border-left: 3px solid var(--primary); }
.agenda-row-action { border-left-style: dashed; }
.agenda-row-personal { border-left-color: var(--event-color); background: var(--event-bg); }
.agenda-type { display: block; margin-bottom: 3px; color: var(--rep-color, var(--primary-dark)); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.rep-color-0 { --rep-color: #176b87; --rep-bg: #eff8fb; --rep-border: #b9dfe9; }
.rep-color-1 { --rep-color: #7f56d9; --rep-bg: #f7f3ff; --rep-border: #d9c9fa; }
.rep-color-2 { --rep-color: #b54708; --rep-bg: #fff7ed; --rep-border: #fed7aa; }
.rep-color-3 { --rep-color: #c11574; --rep-bg: #fff1f7; --rep-border: #f5b4d5; }
.rep-color-4 { --rep-color: #087443; --rep-bg: #ecfdf3; --rep-border: #a6f4c5; }
.rep-color-5 { --rep-color: #344054; --rep-bg: #f2f4f7; --rep-border: #d0d5dd; }
.rep-color-6 { --rep-color: #175cd3; --rep-bg: #eff8ff; --rep-border: #b2ddff; }
.rep-color-7 { --rep-color: #c01048; --rep-bg: #fff1f3; --rep-border: #fda4af; }
.event-color-meeting { --event-color: #0f766e; --event-bg: #f0fdfa; --event-border: #99f6e4; }
.event-color-call { --event-color: #2563eb; --event-bg: #eff6ff; --event-border: #bfdbfe; }
.event-color-task { --event-color: #b45309; --event-bg: #fffbeb; --event-border: #fde68a; }
.event-color-other { --event-color: #7c3aed; --event-bg: #f5f3ff; --event-border: #ddd6fe; }
.crm-page-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; border: 1px solid #cfe5eb; border-radius: 8px; background: linear-gradient(135deg, #fff, #edf8fa); padding: 20px 22px; }
.crm-page-hero h2 { margin: 2px 0 6px; color: var(--primary-dark); }
.crm-page-hero p:not(.eyebrow) { max-width: 700px; margin: 0; color: var(--muted); line-height: 1.5; }
.crm-page-hero .page-actions { margin: 0; flex: 0 0 auto; }
.crm-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.crm-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-top: 8px; }
.crm-detail-grid > div { display: grid; gap: 4px; }
.crm-detail-grid .muted { font-size: 12px; }
.crm-detail-wide { grid-column: 1 / -1; }
.crm-kpi { display: grid; gap: 4px; border: 1px solid #cfe5eb; border-top: 3px solid var(--primary); border-radius: 8px; background: white; padding: 14px; }
.crm-kpi span, .crm-kpi small { color: var(--muted); }
.crm-kpi strong { color: var(--primary-dark); font-size: 27px; line-height: 1.1; }
.crm-kpi-blue { border-top-color: #2563eb; }
.crm-kpi-warning { border-top-color: #d97706; }
.crm-kpi-success { border-top-color: #087443; }
.crm-kpi-money { border-top-color: #7f56d9; }
.crm-kpi-slate { border-top-color: #64748b; }
.crm-filter-card { margin-bottom: 14px; padding: 12px; }
.crm-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-filter-bar select { width: auto; min-width: 170px; }
.crm-filter-search { display: flex; flex: 1 1 280px; align-items: center; gap: 7px; border: 1px solid #cfd8d2; border-radius: 8px; background: white; padding: 0 10px; }
.crm-filter-search svg { width: 16px; color: var(--muted); }
.crm-filter-search input { border: 0; padding-left: 0; }
.crm-filter-search input:focus { box-shadow: none; }
.crm-record-card { min-width: 0; }
.crm-record-table { min-width: 920px; }
.crm-record-table td { vertical-align: middle; }
.crm-record-table td > strong, .crm-table-sub, .crm-table-note { display: block; }
.support-subject-cell { max-width: 320px; min-width: 180px; }
.mail-log-count { margin: 0 0 12px; font-size: 13px; }
.portal-attachment-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-attachment-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.portal-attachment-list a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-attachment-list svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--muted); }
.portal-attachment-list span { flex: 0 0 auto; font-size: 12px; }
.support-template-body { max-width: 420px; color: var(--muted); font-size: 13px; }
.support-template-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.support-template-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.support-template-picker select { max-width: 320px; }
.support-article-list { display: grid; gap: 12px; }
.support-article { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 16px; }
.support-article.is-archived { opacity: .65; }
.support-article header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.support-article h3 { margin: 0 0 4px; font-size: 16px; }
.support-article header p { margin: 0; font-size: 12px; }
.support-article-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.support-article-summary { margin: 10px 0 0; color: var(--text); }
.support-article details { margin-top: 10px; }
.support-article summary { color: var(--primary); cursor: pointer; font-size: 13px; font-weight: 700; }
.support-article-body { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; white-space: pre-wrap; line-height: 1.6; }
@media (max-width: 640px) { .support-article header { flex-direction: column; } }
.support-merge-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.support-merge-form > .combo-select, .support-merge-form > select { flex: 1 1 280px; min-width: 0; }
.portal-rating { display: flex; gap: 8px; flex-wrap: wrap; border: 0; margin: 0 0 14px; padding: 0; }
.portal-rating-option { flex: 1 1 84px; }
.portal-rating-option input { position: absolute; opacity: 0; pointer-events: none; }
.portal-rating-option span { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 10px 6px; text-align: center; font-size: 12px; cursor: pointer; }
.portal-rating-option strong { font-size: 18px; }
.portal-rating-option input:checked + span { border-color: var(--primary); background: #e9f5f7; color: var(--primary-dark); }
.portal-rating-option input:focus-visible + span { outline: 2px solid #72b9c2; outline-offset: 2px; }
.portal-rating-given { margin: 0; font-size: 15px; }
.icon-button.is-disabled { opacity: .4; cursor: not-allowed; }
.support-satisfaction-toggle .check { margin: 0; }
.support-satisfaction-toggle p { margin: 4px 0 0 26px; font-size: 12px; line-height: 1.45; }
/* S.S.S.: solda bolum listesi, sagda acilir sorular. */
.faq-layout { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 16px; align-items: start; }
.faq-toc { position: sticky; top: 16px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 14px; }
.faq-toc strong { margin-bottom: 6px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.faq-toc a { display: flex; align-items: center; gap: 8px; border-radius: 6px; color: var(--text); padding: 7px 8px; font-size: 13px; font-weight: 600; }
.faq-toc a:hover { background: var(--surface-2); }
.faq-toc a svg { width: 15px; height: 15px; color: var(--primary); }
.faq-toc a span { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.faq-body { display: grid; gap: 16px; min-width: 0; }
.faq-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-group .faq-item:last-child { border-bottom: 0; }
.faq-item summary { padding: 11px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.faq-item summary:hover { color: var(--primary-dark); }
.faq-item p { margin: 0 0 12px; max-width: 78ch; color: var(--muted); line-height: 1.65; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-toc { position: static; } }

/* --- Tur takip (bekçi devriyesi) --- */
.patrol-route.is-archived { opacity: .65; }
.patrol-point-list { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: none; }
.patrol-point-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 9px 12px; }
.patrol-point-list li.is-done { border-color: #abefc6; background: #f6fef9; }
.patrol-point-order { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 800; }
.patrol-point-list li.is-done .patrol-point-order { background: var(--success); color: #fff; }
.patrol-point-name { min-width: 0; }
.patrol-point-name small { display: block; margin-top: 2px; font-size: 12px; }
.patrol-point-actions { display: flex; align-items: center; gap: 4px; }
.patrol-point-empty { grid-template-columns: 1fr !important; border-style: dashed !important; }
.patrol-add-point { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.patrol-add-point > .combo-select, .patrol-add-point > select { flex: 1 1 260px; min-width: 0; }
.patrol-add-point input[type="time"] { width: auto; }
.patrol-nfc-read { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; align-self: end; padding-bottom: 2px; }
.patrol-nfc-read .muted { font-size: 12px; line-height: 1.4; }
.button.is-disabled, .button:disabled { opacity: .5; cursor: not-allowed; }
.patrol-assign { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.patrol-assign-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.patrol-assign-open { display: inline-flex; align-items: center; gap: 6px; border-color: #fedf89; background: #fffaeb; color: #b54708; }
.patrol-assign-open svg { width: 13px; height: 13px; }
.patrol-assign-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.patrol-assign-list .check { margin: 0; }
.patrol-assign-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
/* Turlar vardiya çizelgesi gibi okunsun: saat solda, sabit genişlikte. */
.patrol-route-title { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.patrol-route-title > div { min-width: 0; }
.patrol-route-time { flex: 0 0 auto; min-width: 62px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 7px 9px; color: var(--primary-dark); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.patrol-route-time.is-unset { color: var(--muted); font-weight: 600; }
.patrol-route-guards { display: flex; align-items: center; gap: 6px; margin-top: 3px !important; }
.patrol-route-guards svg { flex: 0 0 auto; width: 14px; height: 14px; }
@media (max-width: 640px) { .patrol-route-title { gap: 10px; } .patrol-route-time { min-width: 54px; font-size: 15px; } }

/* Okutma ekranı sahada, gece, çoğu zaman tek elle kullanılıyor: hedefler büyük, sıradaki
   nokta öne çıkarılmış, kalan süre sürekli görünür. */
.patrol-run-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.patrol-run-title { min-width: 0; }
.patrol-run-title h2 { margin: 2px 0 4px; font-size: 22px; }
.patrol-run-title p { margin: 0; font-size: 13px; }
.patrol-progress-ring { position: relative; flex: 0 0 auto; width: 88px; height: 88px; }
.patrol-progress-ring svg { width: 88px; height: 88px; transform: rotate(-90deg); }
.patrol-progress-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring-track { stroke: var(--surface-2); }
.ring-value { stroke: var(--primary); transition: stroke-dasharray .4s ease; }
.is-overdue .ring-value { stroke: var(--danger); }
.patrol-progress-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.patrol-progress-ring strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.patrol-progress-ring small { color: var(--muted); font-size: 12px; }
.patrol-countdown { margin-top: 4px !important; font-size: 13px; font-weight: 700; color: var(--primary-dark); }
.patrol-countdown.is-late { color: var(--danger); }
.patrol-overdue { color: var(--danger); }

.patrol-next { display: grid; gap: 3px; margin-bottom: 14px; border: 1px solid var(--primary); border-radius: 10px; background: #e9f5f7; padding: 14px 16px; }
.patrol-next strong { font-size: 18px; line-height: 1.3; }
.patrol-next .muted { font-size: 13px; }
.is-overdue .patrol-next { border-color: var(--danger); background: #fef3f2; }

.patrol-point-list li.is-current { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.patrol-point-list li > time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.patrol-scan-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.patrol-scan-actions .button { flex: 1 1 180px; min-height: 60px; font-size: 16px; }
.patrol-scan-status { min-height: 22px; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.patrol-scan-status.is-ok { color: var(--success); }
.patrol-scan-status.is-error { color: var(--danger); }
.patrol-qr-reader { max-width: 340px; margin: 0 auto 12px; }
.patrol-row-missed td { background: #fff6f6; }
.patrol-status-completed { border-color: #abefc6; background: #f6fef9; color: var(--success); }
.patrol-status-overdue, .patrol-status-abandoned { border-color: #fecdca; background: #fef3f2; color: var(--danger); }

.patrol-incident-list { display: grid; gap: 12px; }
.patrol-incident { border-left: 4px solid var(--line); }
.patrol-incident.severity-high { border-left-color: #c98312; }
.patrol-incident.severity-critical { border-left-color: var(--danger); }
.patrol-incident header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.patrol-incident header p { margin: 2px 0 0; font-size: 12px; }
.patrol-incident-body { margin: 10px 0 0; white-space: pre-wrap; line-height: 1.6; }
.patrol-incident-attachments { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.patrol-incident-attachments img { width: 110px; height: 110px; border: 1px solid var(--line); border-radius: 8px; object-fit: cover; }
.patrol-incident-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.patrol-incident-resolution { margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; }
.patrol-resolve-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.patrol-resolve-form input { flex: 1 1 240px; }
.patrol-resolve-form select { flex: 0 0 190px; }
.patrol-incident-status-resolved { border-color: #abefc6; background: #f6fef9; color: var(--success); }

.patrol-qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.patrol-qr-card { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 14px; text-align: center; page-break-inside: avoid; }
.patrol-qr-image svg { width: 100%; height: auto; }
.patrol-qr-card strong { margin-top: 8px; font-size: 15px; }
.patrol-qr-card span { font-size: 13px; }
.patrol-qr-card small { color: var(--muted); font-size: 11px; }
.patrol-qr-tenant { margin-top: 4px; }
@media print {
    .sidebar, .topbar, .app-footer, .patrol-print-hide, .mobile-bottom-nav { display: none !important; }
    .patrol-qr-grid { grid-template-columns: repeat(3, 1fr); }
}
/* --- Zamanlayıcı monitörü: EKG metaforu --- */
.scheduler-monitor { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 20px 20px 8px; overflow: hidden; }
.scheduler-monitor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.scheduler-monitor-head h2 { margin: 2px 0 4px; font-size: 24px; }
.scheduler-monitor-head p { margin: 0; font-size: 13px; }
.scheduler-monitor.is-healthy .scheduler-monitor-head h2 { color: var(--success); }
.scheduler-monitor.is-down .scheduler-monitor-head h2 { color: var(--danger); }
.scheduler-monitor-stats { display: flex; gap: 22px; }
.scheduler-monitor-stats span { display: grid; gap: 1px; color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.scheduler-monitor-stats strong { color: var(--text); font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.scheduler-monitor-stats .is-bad strong { color: var(--danger); }

.ecg { margin: 6px -20px 0; height: 60px; }
.ecg svg { display: block; width: 100%; height: 60px; }
.ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ecg-trace { stroke: var(--line); stroke-width: 2; }
.is-down .ecg-trace { stroke: var(--danger); opacity: .45; }
/* Parlak darbe izin üzerinde soldan sağa geçer; ölçüyü sabitlemek için uzun bir boşlukla
   birlikte kısa bir çizgi kullanılır. */
.ecg-pulse { stroke: var(--success); stroke-width: 2.5; stroke-dasharray: 70 2000; animation: ecg-sweep 2.6s linear infinite; }
@keyframes ecg-sweep { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -1400; } }
@media (prefers-reduced-motion: reduce) { .ecg-pulse { animation: none; stroke-dasharray: none; opacity: .8; } }

.scheduler-monitor-note { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.scheduler-monitor-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.scheduler-monitor.is-down .scheduler-monitor-note svg { color: var(--danger); }
.scheduler-monitor-note.is-error { color: var(--danger); }

/* --- 24 saatlik hareket --- */
.activity-card { margin-bottom: 16px; }
.activity-chart { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; align-items: end; height: 120px; margin-top: 8px; }
.activity-hour { display: grid; grid-template-rows: 1fr auto; gap: 5px; height: 100%; min-width: 0; }
.activity-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.activity-bars i { display: block; width: 100%; min-height: 3px; border-radius: 3px 3px 0 0; }
.activity-bars .is-success { background: var(--primary); }
.activity-bars .is-failed { background: var(--danger); }
.activity-bars .is-empty { height: 3px; background: var(--line); }
.activity-hour > span { color: var(--muted); font-size: 10px; text-align: center; white-space: nowrap; }
@media (max-width: 760px) {
    .activity-chart { grid-template-columns: repeat(12, minmax(0, 1fr)); height: 100px; }
    .activity-hour:nth-child(even) { display: none; }
    .scheduler-monitor-stats { width: 100%; justify-content: flex-start; }
    .scheduler-monitor-stats span { text-align: left; }
}

@media (max-width: 640px) {
    .patrol-run-head { gap: 14px; }
    .patrol-progress-ring, .patrol-progress-ring svg { width: 72px; height: 72px; }
    .patrol-progress-ring strong { font-size: 22px; }
    .patrol-run-title h2 { font-size: 19px; }
    .patrol-scan-actions .button { flex: 1 1 100%; }
    .patrol-incident header { flex-direction: column; }
    .patrol-point-list li { grid-template-columns: 30px minmax(0, 1fr); }
    .patrol-point-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.crm-table-sub { margin-top: 3px; color: var(--muted); font-size: 12px; }
.crm-table-note { max-width: 250px; margin-top: 6px; overflow: hidden; color: #475467; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.crm-row-overdue { background: #fff8f5; }
.crm-row-overdue td:first-child { border-left: 3px solid #d92d20; }
.crm-row-archived { opacity: .55; }
.crm-status { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.crm-status-planned { border-color: #b2ddff; background: #eff8ff; color: #175cd3; }
.crm-status-completed, .crm-stage-won { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.crm-status-cancelled, .crm-stage-lost { border-color: #fecdca; background: #fff3f0; color: #b42318; }
.crm-stage-new { background: #f2f4f7; color: #344054; }
.crm-stage-qualified { border-color: #b9e6fe; background: #f0f9ff; color: #175a79; }
.crm-stage-proposal { border-color: #fedf89; background: #fffaeb; color: #b54708; }
.crm-stage-negotiation { border-color: #d9c9fa; background: #f7f3ff; color: #6941c6; }
.crm-probability { min-width: 110px; }
.crm-probability > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.crm-probability > div:first-child span { color: var(--muted); font-size: 11px; }
.crm-progress { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: #e5e7eb; }
.crm-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.crm-sales-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr); gap: 14px; align-items: start; }
.crm-list-first { display: block; }
.crm-list-first .crm-record-card { width: 100%; }
.crm-list-first-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.crm-fullscreen-modal { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: #f7fafb; color: var(--text); }
.crm-fullscreen-modal::backdrop { background: #122a2770; backdrop-filter: blur(3px); }
.crm-modal-panel { width: min(1120px, calc(100vw - 32px)); min-height: calc(100vh - 32px); margin: 16px auto; padding: 22px; overflow: auto; }
/* Teklif formundaki kalem tablosu geniş: 13 kolonu 1120px'e sığdırmak hem yatay
   kaydırma hem de ekranın iki yanında boşluk demekti. Yalnızca bu modal genişler. */
.crm-modal-panel-wide { width: min(1560px, calc(100vw - 32px)); }
.crm-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: -22px -22px 18px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: #fff; }
.crm-modal-header h2 { margin: 2px 0 4px; }
.crm-modal-header p { margin: 0; }
.crm-modal-header .icon-button { flex: 0 0 auto; }
.crm-modal-form { max-width: 980px; margin: 0 auto; }
.crm-create-card { min-width: 0; }
.crm-pagination { margin-top: 14px; }
.crm-pagination nav { display: flex; justify-content: flex-end; }
.crm-pagination svg { width: 16px; }
.crm-table-link { display: flex; align-items: center; gap: 5px; color: var(--primary-dark); font-size: 12px; font-weight: 700; }
.crm-table-link svg { width: 14px; }
.crm-status-sent { border-color: #b2ddff; background: #eff8ff; color: #175cd3; }
.crm-status-accepted { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.crm-status-rejected, .crm-status-expired { border-color: #fecdca; background: #fff3f0; color: #b42318; }
.crm-status-draft { background: #f2f4f7; color: #344054; }
.quote-items-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 22px 0 8px; }
.quote-items-head h3 { margin: 0; }
.quote-account-field { display: grid; gap: 6px; }
.quote-account-field > label { color: var(--text); font-size: 13px; font-weight: 700; }
.quote-account-field > div { display: flex; gap: 8px; align-items: center; }
.quote-account-field select { min-width: 0; flex: 1; }
.quote-account-field .icon-button { flex: 0 0 auto; }
.quote-validity-field { display: grid; gap: 6px; }
.quote-validity-field > label { color: var(--text); font-size: 13px; font-weight: 700; }
.quote-validity-field > div { display: flex; align-items: center; gap: 10px; }
.quote-validity-field > div > input { min-width: 0; flex: 1; }
.quote-reminder-check { flex: 0 0 auto; white-space: nowrap; font-size: 12px; }
.quote-reminder-check input { width: auto; }
/* Biçimli metin alanı: not girişinde kalın/italik/liste desteği. */
.rich-text { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; }
.rich-text:focus-within { border-color: var(--primary); }
.rich-text-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px 6px; border-bottom: 1px solid var(--line); background: #f7fafa; }
.rich-text-toolbar button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #4f635f; font-size: 13px; line-height: 1; cursor: pointer; }
.rich-text-toolbar button:hover { background: #e4eeec; color: var(--primary-dark); }
.rich-text-toolbar button svg { width: 15px; height: 15px; }
.rich-text-divider { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
/* font-weight/color açıkça veriliyor: alan bir <label> içinde ve etiketin kalın
   yazı tipi mirasla geliyordu; taban kalın olunca "kalın" düğmesi tersine çalışıyordu. */
.rich-text-area { min-height: 84px; max-height: 240px; overflow-y: auto; padding: 9px 10px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text); }
.rich-text-area:focus { outline: none; }
.rich-text-area p { margin: 0 0 6px; }
.rich-text-area ul, .rich-text-area ol { margin: 0 0 6px; padding-left: 20px; }
/* Boşken ipucu metni: contenteditable'da placeholder özniteliği çalışmıyor. */
.rich-text-area.is-empty::before { content: attr(data-placeholder); color: #9aa8a5; pointer-events: none; }
/* Hatırlatma bildirimi kapalıyken kutunun altında çıkan uyarı. */
.quote-reminder-warning { display: flex; align-items: flex-start; gap: 6px; line-height: 1.45; color: #8a5a12; }
.quote-reminder-warning svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
.quote-items-wrap { overflow-x: auto; border: 1px solid #dce5e2; border-radius: 8px; }
.quote-items-table { min-width: 1300px; }
.quote-items-table th { white-space: nowrap; }
.quote-items-table td { vertical-align: middle; }
/* Dar sayısal alanlar: 13 kolonun 1440px'lik ekrana yatay kaydırma olmadan
   sığması için gereken birkaç pikseli buradan kazanıyoruz. */
.quote-items-table input, .quote-items-table select { min-width: 66px; padding: 7px 7px; }
.quote-items-table td:nth-child(2) select { min-width: 170px; }
.quote-items-table td:nth-child(3) input { min-width: 160px; }
/* Konuma göre değil sınıfa göre: kolon eklendiğinde biçim kaymasın. */
.quote-items-table .item-total { min-width: 105px; text-align: right; font-weight: 800; white-space: nowrap; }
.quote-items-table .item-net-price, .quote-items-table .item-net-total { min-width: 100px; text-align: right; white-space: nowrap; color: #4f635f; }
.quote-items-table .item-net-total { font-weight: 700; color: var(--text); }
.quote-items-table .item-name[readonly], .quote-items-table .item-unit[readonly] { background: #f4f8f7; color: #4f635f; }
.quote-totals { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 1px; margin: 12px 0 16px; border: 1px solid #cfe5eb; border-radius: 8px; overflow: hidden; background: #cfe5eb; }
.quote-totals > div { display: grid; gap: 5px; padding: 12px; background: #f8fcfc; }
/* Hangi kurla çevrildiğini söyleyen not; kur bulunamazsa uyarı rengine geçer. */
.quote-rate-note { margin: 6px 0 0; color: #4f635f; font-size: 11.5px; }
.quote-rate-note.is-warning { color: #8a5a12; font-weight: 700; }
.quote-totals span { color: var(--muted); font-size: 12px; }
.quote-totals strong { color: var(--primary-dark); font-size: 16px; }
.quote-totals .quote-grand-total { background: #e9f7f4; }
/* Satır aksiyonları yan yana. Tek sütunluk grid, her satırı iki katına çıkarıp listede
   görünen kayıt sayısını yarıya indiriyordu; sığmayınca kendiliğinden alt satıra iner. */
.quote-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.quote-send-form { display: flex; align-items: center; gap: 5px; }
.quote-send-form input { min-width: 0; width: 150px; padding: 7px 8px; }
.quote-send-form .button { flex: 0 0 auto; }
.quote-inline-form { display: flex; }
.quote-inline-form .button { width: 100%; }
.quote-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.contact-entry-panel { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid #cfe5eb; border-radius: 8px; background: #f8fcfc; }
.contact-entry-panel legend { padding: 0 6px; color: var(--primary-dark); font-weight: 800; }
.contact-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contact-entry-head p { margin: 0; }
.contact-entry-rows { display: grid; gap: 8px; }
.contact-entry-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr 1fr auto auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid #dce5e2; border-radius: 6px; background: #fff; }
.contact-primary-check { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding-bottom: 9px; }
.contact-primary-check input { width: auto; }
.button-small { min-height: 32px; padding: 6px 9px; font-size: 12px; }
.icon-button.danger { color: #b42318; }
@media (max-width: 1050px) { .contact-entry-row { grid-template-columns: repeat(3, minmax(130px, 1fr)); } .contact-primary-check { padding-bottom: 0; } .contact-entry-row .remove-account-contact { position: absolute; } }
@media (max-width: 700px) { .quote-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quote-items-head, .contact-entry-head { align-items: stretch; flex-direction: column; } .contact-entry-row { grid-template-columns: 1fr 1fr; } .contact-entry-row label:first-child, .contact-entry-row label:nth-child(4) { grid-column: 1 / -1; } }

@media (max-width: 1180px) {
    .calendar-shell, .calendar-toolbar { grid-template-columns: 1fr; }
    .calendar-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .calendar-nav .button { width: 100%; }
    .calendar-toolbar-form { display: grid; grid-template-columns: 1fr; width: 100%; }
    .calendar-toolbar-form input, .calendar-toolbar-form select, .calendar-toolbar-form .button { width: 100%; }
    .agenda-quick-actions a { display: inline-flex; gap: 6px; font-size: 12px; }
    .calendar-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-calendar-entry-grid { grid-template-columns: 1fr; }
    .crm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-sales-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .segmented-control { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
    .segmented-control.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .segmented-control a { text-align: center; }
    .calendar-rep-strip { flex-wrap: nowrap; margin: 0 -2px 14px; overflow-x: auto; padding: 0 2px 12px; }
    .calendar-rep-strip a { flex: 0 0 auto; }
    .calendar-head { padding: 6px 2px; text-align: center; font-size: 10px; }
    .calendar-day { min-height: 72px; padding: 4px; }
    .calendar-day > strong { display: block; margin-bottom: 3px; font-size: 11px; line-height: 1; }
    .calendar-items { gap: 3px; margin-top: 3px; }
    .calendar-item, .calendar-item-spacer { min-height: 30px; }
    .calendar-item { border-left-width: 2px; border-radius: 5px; padding: 3px; font-size: 10px; line-height: 1.15; white-space: normal; }
    .calendar-item span { font-size: 9px; }
    .calendar-item b { display: block; max-height: 23px; overflow: hidden; }
    .calendar-item small { display: none; }
    .calendar-year-grid { grid-template-columns: 1fr; }
    .crm-page-hero { align-items: stretch; flex-direction: column; }
    .crm-page-hero .page-actions { justify-content: stretch; }
    .crm-page-hero .page-actions .button { flex: 1 1 auto; }
    .crm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-filter-bar, .crm-filter-bar select, .crm-filter-bar .button { width: 100%; }
    .crm-filter-search { flex-basis: 100%; }
    .crm-filter-bar select { min-width: 0; }
}

.account-field-settings { display: grid; gap: 10px; }
.account-field-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .8fr) minmax(160px, 1fr) minmax(180px, 1fr) auto auto 40px; gap: 10px; align-items: end; padding: 12px; border: 1px solid #dce5e2; border-radius: 8px; background: #f8fafc; }
.account-field-row .check { display: flex; align-items: center; gap: 6px; padding-bottom: 11px; white-space: nowrap; }
.account-field-row .check input { width: auto; }
.remove-account-field { margin-bottom: 4px; }
@media (max-width: 1100px) { .account-field-row { grid-template-columns: repeat(3, minmax(150px, 1fr)); } .account-field-row .check { padding-bottom: 0; } }
@media (max-width: 640px) { .account-field-row { grid-template-columns: 1fr 1fr; } .account-field-row label:first-child, .account-field-row label:nth-child(4) { grid-column: 1 / -1; } }
.profile-completion { min-width: 150px; }
.profile-completion-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.profile-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e5eceb; }
.profile-progress span { display: block; height: 100%; border-radius: inherit; background: #168b78; }
.stock-kpi-grid { margin-bottom: 16px; }
.stock-filter-card, .stock-list-card { margin-top: 16px; }
.stock-filter-grid { align-items: end; }
.stock-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
.stock-list-card table { min-width: 980px; }
.stock-list-card td:first-child { min-width: 190px; }
.stock-list-card td:nth-child(5) { min-width: 150px; }
.stock-modal-panel { min-height: calc(100vh - 32px); }
.stock-modal-form { max-width: 1120px; }
.stock-active-check { display: flex; align-items: center; gap: 8px; }
.stock-active-check input { width: auto; }
.stock-modal-actions { justify-content: flex-end; margin-top: 6px; }
.stock-fields-actions { justify-content: space-between; margin-top: 16px; }
.stock-field-row { grid-template-columns: minmax(180px, 1.2fr) minmax(130px, .8fr) minmax(220px, 1fr) auto auto 40px; }
.account-list-card { margin-top: 16px; }
.account-list-card table { min-width: 900px; }
.account-list-card td:first-child { min-width: 190px; }
.account-list-card td:nth-child(5) { min-width: 150px; }
.asset-inventory-action-heading { min-width: 250px; text-align: right; }
.asset-inventory-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 7px; }
.asset-inventory-actions form { display: contents; }
.asset-inventory-actions .button { flex: 0 0 auto; white-space: nowrap; }
.account-modal-panel { min-height: calc(100vh - 32px); }
.account-modal-actions { justify-content: flex-end; margin-top: 6px; }
.import-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.import-steps > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border: 1px solid #dce5e2; border-radius: 8px; background: #f8fafc; }
.import-steps > div > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #176b87; font-weight: 700; }
.import-steps small { color: #66746f; margin-bottom: 4px; }
.import-steps form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.import-note { margin-top: 18px; }
.module-scope { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #176b87; font-weight: 600; }
.module-scope svg { width: 15px; height: 15px; }
.notification-channel-summary, .notification-matrix { display: grid; gap: 12px; padding: 16px; border: 1px solid #dce5e2; border-radius: 8px; background: #f8fafc; }
.notification-channel-summary > span, .notification-matrix-heading span { color: #66746f; font-size: 13px; }
.channel-pills, .notification-rule-channels { display: flex; flex-wrap: wrap; gap: 14px; }
.notification-matrix { grid-column: 1 / -1; }
.notification-matrix-heading { display: grid; gap: 4px; }
.notification-group { display: grid; gap: 8px; }
.notification-group h3 { color: #176b87; font-size: 13px; }
.notification-rule { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(250px, .9fr) minmax(190px, .65fr); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid #e3ebe9; }
.notification-event { min-width: 0; }
.notification-rule select { min-width: 0; }
@media (max-width: 850px) { .notification-rule { grid-template-columns: 1fr; gap: 8px; } }
.permission-summary { display: block; max-width: 250px; color: #66746f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.permission-modal { width: min(1040px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 10px; box-shadow: 0 20px 60px #183a3540; color: #17212b; overflow-y: auto; overflow-x: hidden; }
.permission-modal::backdrop { background: #122a273d; backdrop-filter: blur(2px); }
.permission-modal-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 22px 24px 16px; border-bottom: 1px solid #e2e9e7; }
.permission-modal-header h2 { margin: 2px 0; }
.permission-modal-form { display: grid; gap: 18px; padding: 20px 24px 24px; overflow: visible; max-height: none; min-width: 0; }
.permission-modal-form.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.permission-modal-form.grid-4 > .wide-field { grid-column: 1 / -1; }
.permission-modal-form .permission-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.permission-option { position: relative; align-items: flex-start; }
.permission-option.is-inherited { color: #176b87; background: #edf8f6; border-radius: 6px; padding: 6px; margin: -6px; }
.permission-option input:disabled { opacity: .8; }
.permission-source { margin-left: auto; color: #176b87; font-size: 11px; font-weight: 700; white-space: nowrap; }
.platform-tenant-badges { display: flex; align-items: center; gap: 10px; }
.platform-user-list { display: grid; gap: 6px; margin: 14px 0; padding: 12px; border: 1px solid #dce5e2; border-radius: 8px; background: #f8fafc; }
.platform-user-list > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid #e3ebe9; }
.platform-user-list small { color: #66746f; }
.selected-profile-summary { display: grid; gap: 7px; padding: 12px 14px; border-left: 3px solid #168b78; border-radius: 6px; background: #edf8f6; }
.selected-profile-summary > span { color: #4f635f; font-size: 13px; }
.selected-profile-summary > div { display: flex; flex-wrap: wrap; gap: 6px; }
.permission-chip { padding: 4px 8px; border: 1px solid #c9e4de; border-radius: 99px; color: #176b87; background: #fff; font-size: 12px; }
.modal-profile-guide { display: grid; gap: 10px; padding: 16px 24px 0; }
.modal-profile-guide > div:first-child { display: grid; gap: 4px; }
.modal-profile-guide > div:first-child span { color: #66746f; font-size: 13px; }
.modal-profile-guide .profile-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 46px; }
.password-toggle { position: absolute; top: 50%; right: 6px; width: 34px; height: 34px; padding: 7px; border: 0; background: transparent; transform: translateY(-50%); color: #667085; }
.password-toggle:hover { background: #eef5f6; color: #176b87; }
.modal-active-check { padding-top: 2px; }
@media (max-width: 620px) { .permission-modal-form.grid-4 { grid-template-columns: 1fr !important; } .permission-modal-form .permission-check-grid, .modal-profile-guide .profile-guide-grid { grid-template-columns: 1fr; } .permission-modal-header, .permission-modal-form, .modal-profile-guide { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 700px) { .import-steps { grid-template-columns: 1fr; } }

.breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    padding: 8px 28px;
    color: #667085;
    font-size: 13px;
}
.breadcrumb-bar svg { width: 15px; height: 15px; flex: 0 0 auto; }
.breadcrumb-bar strong { color: #24312e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group:has(.nav-link.active) > .nav-section { color: var(--primary); }
.nav-link.active { position: relative; background: #e6f5f2; color: #153d38; }
.nav-link.active::before { content:""; position:absolute; inset:8px auto 8px 0; width:3px; border-radius:2px; background:#17a28d; }
.nav-link.active svg { color:#148878; }
.drawer-backdrop { position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.34); opacity:0; pointer-events:none; transition:.2s; }
.form-drawer { position:fixed; z-index:91; top:0; right:0; bottom:0; width:min(620px,100vw); overflow:auto; background:#fff; border-left:1px solid var(--line); box-shadow:-20px 0 50px rgba(15,23,42,.14); padding:24px; transform:translateX(102%); transition:.24s ease; }
.drawer-open .drawer-backdrop { opacity:1; pointer-events:auto; }
.drawer-open .form-drawer { transform:translateX(0); }
.drawer-header,.section-heading,.page-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.drawer-header { position:sticky; top:-24px; z-index:2; margin:-24px -24px 18px; border-bottom:1px solid var(--line); background:#fff; padding:20px 24px; }
.empty-state { display:grid; place-items:center; gap:8px; min-height:180px; color:#667085; text-align:center; }
.empty-state svg { width:38px; height:38px; color:#179683; }
.empty-state h3,.empty-state p { margin:0; }
.actions { display:flex; gap:5px; align-items:center; }
.table-wrap { overflow:auto; }
@media(max-width:760px){.breadcrumb-bar{padding:8px 16px}.breadcrumb-bar a,.breadcrumb-bar svg:nth-of-type(2),.breadcrumb-bar span{display:none}.form-drawer{width:100%;padding:16px}.drawer-header{top:-16px;margin:-16px -16px 16px;padding:16px}.page-intro{align-items:stretch;flex-direction:column}.page-intro .button{width:100%}}

/* Compact operational workspace */
@media (min-width: 981px) {
    .app-shell { grid-template-columns: 238px minmax(0, 1fr); }
    body.sidebar-collapsed .app-shell { grid-template-columns: 72px minmax(0, 1fr); }
    .sidebar { padding: 16px 14px; }
    .brand { gap: 9px; }
    .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
    .brand strong { font-size: 14px; }
    .brand-logo { width: 36px; height: 36px; flex-basis: 36px; }
    .client-brand { gap: 9px; margin-top: 14px; padding: 8px; }
    .client-brand img, .client-brand > strong { width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; flex-basis: 34px; }
    .nav { gap: 5px; margin-top: 16px; }
    .nav-group { gap: 2px; padding-top: 6px; }
    .nav-section { margin: 3px 9px; font-size: 10px; }
    .nav-link { min-height: 34px; padding: 7px 9px; font-size: 13px; }
    .nav-link svg { width: 16px; height: 16px; flex-basis: 16px; }
    .menu-search { gap: 4px; }
    .menu-search input { padding: 8px 9px; font-size: 13px; }
    .sidebar-footer { margin-top: 10px; }
    .install-link { padding: 8px; }
    .topbar { min-height: 68px; gap: 16px; padding: 13px 22px; }
    .topbar h1, .title { font-size: 23px; }
    .eyebrow { margin-bottom: 2px; font-size: 10px; }
    .sidebar-toggle { width: 36px; height: 36px; }
    .user-chip { padding: 5px 8px; }
    .breadcrumb-bar { min-height: 34px; padding: 6px 22px; font-size: 12px; }
    .content { padding: 20px 22px; }
    .card { padding: 14px; }
    .card h2 { margin-top: 0; font-size: 18px; line-height: 1.2; }
    .card h3 { font-size: 15px; }
    .grid { gap: 12px; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .stat-card { padding: 13px; }
    .stat-card strong { margin: 4px 0; font-size: 23px; }
    th, td { padding: 9px 10px; }
    input, textarea, select { padding: 8px 10px; }
    textarea { min-height: 92px; }
    label { gap: 4px; font-size: 13px; }
    .button, .btn { min-height: 36px; padding: 8px 12px; font-size: 13px; }
    .page-intro { margin-bottom: 14px; }
    .page-intro h2 { margin: 0 0 4px; font-size: 20px; }
    .page-intro p { margin: 0; }
    .breadcrumb-bar + .content > .topbar {
        position: static;
        min-height: auto;
        margin-bottom: 14px;
        border: 0;
        background: transparent;
        padding: 0;
        backdrop-filter: none;
    }
    .breadcrumb-bar + .content > .topbar .title { font-size: 20px; }
}

@media (min-width: 981px) and (max-width: 1250px) {
    .user-chip small { display: none; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Product workspace: consistent density and proportions */
:root {
    --workspace-gutter: clamp(16px, 2vw, 28px);
    --control-height: 38px;
    --content-width: 1680px;
}

html { font-size: 15px; }
body { font-size: 14px; line-height: 1.45; }
.main { display: flex; width: 100%; max-width: 100vw; min-width: 0; min-height: 100vh; flex-direction: column; overflow-x: clip; }
.content { width: min(100%, var(--content-width)); margin: 0 auto; flex: 1 0 auto; padding: 18px var(--workspace-gutter) 28px; }
.topbar, .breadcrumb-bar, .work-tabs-shell { padding-right: var(--workspace-gutter); padding-left: var(--workspace-gutter); }
.topbar { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.topbar h1, .title { font-size: 22px; line-height: 1.15; }
.breadcrumb-bar { min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: 11px; }
.work-tabs-shell { top: 64px; width: 100%; max-width: 100vw; min-width: 0; overflow: hidden; padding-top: 6px; }
.work-tabs { width: 100%; min-width: 0; }
.work-tab { min-height: 32px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.app-footer { width: min(100%, var(--content-width)); margin: 0 auto; padding: 0 var(--workspace-gutter) 18px; }

.nav { gap: 3px; margin-top: 14px; }
.nav-group { gap: 2px; padding-top: 5px; }
.nav-section {
    position: relative;
    min-height: 28px;
    margin: 0;
    border-radius: 6px;
    padding: 7px 26px 6px 9px;
    cursor: pointer;
    user-select: none;
}
.nav-section::after {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateY(-65%) rotate(45deg);
    transition: transform .16s ease;
}
.nav-section:hover, .nav-section:focus-visible { background: #f0f5f7; color: var(--primary-dark); outline: 0; }
.nav-group.is-open > .nav-section::after { transform: translateY(-30%) rotate(225deg); }
.nav-group:not(.is-open) > :not(.nav-section) { display: none; }
.nav-group > .nav-section[aria-expanded="false"] ~ * { display: none !important; }
.nav-group:has(.nav-link.active) > .nav-section { color: var(--primary-dark); }
.nav-link { min-height: 32px; padding: 6px 9px; font-size: 12.5px; }
.nav-link span { margin-left: 7px; }
.menu-search input { min-height: 36px; }
body.sidebar-collapsed .nav-group:not(.is-open) > :not(.nav-section) { display: flex; }
body.sidebar-collapsed .nav-section { display: none; }

h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
.page-intro { align-items: center; margin-bottom: 12px; }
.page-intro h2 { margin: 0 0 3px; font-size: 19px; }
.page-intro p { max-width: 880px; margin: 0; color: var(--muted); line-height: 1.5; }
.content > .topbar { position: static; min-height: auto; margin-bottom: 12px; border: 0; background: transparent; padding: 0; backdrop-filter: none; }
.content > .topbar .title { font-size: 19px; }
.grid { gap: 12px; }
.grid-4 { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.card, .stat-card { border-color: #dce3e9; box-shadow: 0 5px 16px rgba(17, 24, 39, .045); }
.card { padding: 14px; }
.card + .card, .card + .grid, .grid + .card { margin-top: 12px; }
.card h2 { margin: 0 0 10px; font-size: 17px; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
.stat-card { min-width: 0; padding: 12px 13px; }
.stat-card strong { margin: 3px 0; font-size: 22px; }
.stat-card span, .stat-card small { overflow: hidden; text-overflow: ellipsis; }

input, textarea, select { min-height: var(--control-height); padding: 8px 10px; font-size: 13px; }
textarea { min-height: 84px; }
label { gap: 4px; font-size: 12.5px; }
.button, .btn { min-height: var(--control-height); padding: 8px 12px; font-size: 12.5px; }
.button svg, .btn svg { width: 16px; height: 16px; }
.logout-button { padding-right: 10px; padding-left: 10px; }

.responsive-table, .table-wrap { max-width: 100%; overflow-x: auto; border-radius: 6px; }
table { font-size: 12.5px; }
th, td { padding: 8px 9px; }
th { position: sticky; top: 0; z-index: 1; background: #f8fafb; font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; }
td { max-width: 360px; }
td .button, td .btn { min-height: 32px; padding: 6px 9px; }
pre { max-width: 100%; overflow: auto; border-radius: 7px; background: #f6f8fa; padding: 12px; font-size: 12px; }

.login-page { min-height: 100dvh; padding: clamp(14px, 3vh, 28px); background: #edf2f4; }
.login-panel { grid-template-columns: minmax(0, 1.18fr) minmax(330px, 390px); width: min(1040px, 100%); max-height: calc(100dvh - 28px); overflow: auto; box-shadow: 0 18px 55px rgba(17, 24, 39, .11); }
.login-copy, .login-card { padding: clamp(26px, 3vw, 38px); }
.login-copy h1 { margin: 24px 0 9px; font-size: clamp(28px, 3vw, 36px); }
.login-copy p { margin: 0; font-size: 14px; line-height: 1.55; }
.login-workflow { margin-top: 18px; }
.login-workflow div { min-height: 76px; padding: 10px 7px; font-size: 12px; }
.login-feature-grid { margin-top: 12px; }
.login-feature-grid div { padding: 11px; }
.login-footer-note { margin-top: 18px; }
.login-panel .login-card { min-width: 0; }

.help-hero { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 12px; margin-bottom: 12px; padding: 18px; }
.help-hero h2 { margin: 6px 0 7px; font-size: 25px; }
.help-hero p { line-height: 1.5; }
.help-shortcuts { gap: 8px; margin-bottom: 12px; }
.help-shortcuts a { padding: 11px; }
.help-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
.help-toc { top: 112px; max-height: calc(100vh - 132px); padding: 10px; }
.help-document { max-width: none; padding: clamp(16px, 2.2vw, 30px); line-height: 1.65; }
.help-document h1 { font-size: 25px; }
.help-document h2 { margin-top: 22px; padding-top: 16px; font-size: 20px; }
.help-document h3 { font-size: 16px; }

.profile-shell { grid-template-columns: 250px minmax(0, 1fr); gap: 12px; }
.profile-avatar-large { width: 88px !important; height: 88px !important; max-width: 88px !important; max-height: 88px !important; }
.settings-brand-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
.workspace-card img, .workspace-card > strong { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; }
.setup-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.setup-step { display: flex; min-width: 0; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; padding: 10px; color: var(--muted); }
.setup-step > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid #cfd9e1; border-radius: 50%; background: white; font-size: 12px; font-weight: 850; }
.setup-step strong, .setup-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-step strong { color: #344054; font-size: 12.5px; }
.setup-step small { margin-top: 1px; font-size: 11px; }
.setup-step.is-current { border-color: #9ed4dc; background: #edf8fa; }
.setup-step.is-current > span { border-color: var(--primary); background: var(--primary); color: white; }
.setup-step.is-complete > span { border-color: #a6e1d3; background: #eaf8f4; color: #067647; }
.definition-create { margin-bottom: 14px; }
.definition-basic-form { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1.4fr) minmax(170px, 1fr) minmax(120px, .7fr) auto; gap: 10px; align-items: end; }
.definition-list { display: grid; gap: 10px; margin-top: 16px; }
.definition-card { display: grid; gap: 12px; }
.definition-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.definition-title { display: flex; min-width: 0; align-items: center; gap: 10px; }
.definition-title h3, .definition-title p { margin: 0; }
.definition-title p { margin-top: 2px; color: var(--muted); font-size: 12px; }
.definition-status, .definition-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.definition-actions { border-top: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; padding: 9px 0; }
.definition-actions small { color: var(--muted); }
.success-badge { background: #ecfdf3; color: #067647; }
.warning-badge { background: #fff7e8; color: #8a4b08; }
.text-danger { color: var(--danger) !important; }
.mapping-editor > summary, .definition-editor > summary, .optional-mappings > summary { display: flex; width: fit-content; align-items: center; gap: 7px; cursor: pointer; color: var(--primary-dark); font-weight: 800; }
.mapping-editor > summary svg, .definition-editor > summary svg { width: 17px; height: 17px; }
.mapping-editor[open] > summary, .definition-editor[open] > summary { margin-bottom: 12px; }
.definition-meta-form { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; gap: 9px; align-items: end; border: 1px solid #dfe7ec; border-radius: 8px; background: #f9fbfc; padding: 12px; }
.mapping-section { border: 1px solid #dfe7ec; border-radius: 8px; background: #f9fbfc; padding: 12px; }
.mapping-section h4, .mapping-section p { margin: 0 0 7px; }
.secondary-mapping-section { margin-top: 10px; background: white; }
.mapping-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 9px; }
.mapping-grid label span b { color: var(--danger); }
.optional-mappings { margin-top: 10px; }
.optional-mappings[open] > summary { margin-bottom: 10px; }
.mapping-footer { display: grid; grid-template-columns: auto minmax(190px, 1fr) auto; gap: 10px; align-items: end; margin-top: 12px; }
.column-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.column-chips code { border: 1px solid #d7e2e7; border-radius: 6px; background: #f5f9fa; padding: 5px 8px; color: var(--primary-dark); }
.app-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pagination-summary, .pagination-current { color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.pagination-actions { display: flex; align-items: center; gap: 6px; }
.pagination-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--primary-dark); padding: 7px 10px; font-size: 12px; font-weight: 800; }
.pagination-button:hover { border-color: #a9d8df; background: #f1f9fa; }
.pagination-button.is-disabled { cursor: not-allowed; background: #f6f8fa; color: #98a2b3; }
.pagination-button svg { width: 15px !important; height: 15px !important; max-width: 15px !important; max-height: 15px !important; flex: 0 0 15px; }
.pagination-current { border-radius: 6px; background: #f2f5f7; padding: 7px 9px; }
.token-reveal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.3fr) auto; gap: 12px; align-items: center; margin-bottom: 12px; border-color: #9ed4dc; background: #f4fbfc; }
.token-reveal h2, .token-reveal p { margin: 5px 0 0; }
.token-reveal code { overflow: auto; border: 1px solid #cfe5eb; border-radius: 7px; background: white; padding: 11px; font-size: 12px; }
.compact-guide { display: grid; gap: 8px; margin: 0; padding-left: 22px; color: #344054; }
.agent-list { display: grid; gap: 12px; margin-top: 14px; }
.agent-card { display: grid; gap: 12px; }
.agent-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.agent-meta span { border: 1px solid var(--line); border-radius: 7px; background: #f8fafb; padding: 9px; color: var(--muted); font-size: 12px; }
.agent-meta b { display: block; margin-bottom: 2px; color: var(--text); }

/* Auth workspace */
.login-page { background: #eef3f4; }
.login-panel { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 400px); width: min(1100px, 100%); border-color: #cfdde2; box-shadow: 0 22px 56px rgba(22, 54, 66, .12); }
.login-copy { background: #f7fbfb; }
.login-copy h1 { max-width: 590px; color: #183844; letter-spacing: 0; }
.login-copy p { max-width: 590px; color: #5a6f78; }
.login-module-list { margin-top: 26px; }
.login-module { border-width: 1px 1px 1px 3px; border-top-color: #d8e3e6; border-left-color: var(--primary); border-radius: 8px; background: #fff; padding: 12px; }
.login-module.procurement { border-top-color: #d8e3e6; border-left-color: var(--accent); }
.login-module.maintenance { border-top-color: #d8e3e6; border-left-color: #d48b35; }
.login-module.hr { border-top-color: #d8e3e6; border-left-color: #51607a; }
.login-module.support { border-top-color: #d8e3e6; border-left-color: #6d4ea2; }
.login-module.patrol { border-top-color: #d8e3e6; border-left-color: #b0632a; }
.login-module.patrol .login-module-icon { background: #fdf0e6; color: #b0632a; }
.login-module.support .login-module-icon { background: #f1ecfb; color: #6d4ea2; }
.login-module:hover { transform: none; border-color: #bad6dc; box-shadow: 0 7px 16px rgba(22, 54, 66, .07); }
.login-assurance-list { display: grid; gap: 9px; margin-top: 26px; }
.login-assurance-list span, .login-security-note { display: flex; align-items: center; gap: 9px; border: 1px solid #d7e5e8; border-radius: 7px; background: #fff; padding: 10px 11px; color: #3f5b65; font-size: 12px; font-weight: 700; }
.login-assurance-list svg, .login-security-note svg { width: 16px; height: 16px; flex: 0 0 16px; color: #0f7182; }
.login-footer-note { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #6c7f87; }
.login-footer-note svg { width: 14px; height: 14px; color: #0f7182; }
.login-security-note { align-items: flex-start; margin: 18px 0; background: #f5fafb; line-height: 1.45; font-weight: 600; }
.login-card .eyebrow { color: #0f7182; }
html[data-theme="night"] .login-copy, html[data-theme="graphite"] .login-copy, html[data-theme="emerald"] .login-copy { background: var(--surface); }
html[data-theme="night"] .login-module, html[data-theme="graphite"] .login-module, html[data-theme="emerald"] .login-module, html[data-theme="night"] .login-assurance-list span, html[data-theme="graphite"] .login-assurance-list span, html[data-theme="emerald"] .login-assurance-list span, html[data-theme="night"] .login-security-note, html[data-theme="graphite"] .login-security-note, html[data-theme="emerald"] .login-security-note { background: var(--surface-2); border-color: var(--line); color: var(--text); }
@media (max-width: 720px) {
    .login-panel { grid-template-columns: 1fr; }
    .login-module.support { grid-column: auto; }
    .login-assurance-list { margin-top: 18px; }
}

/* Stock integration hub */
.integration-stats { margin-bottom: 18px; }
.integration-stats .stat-card { min-height: 92px; }
.integration-stats .stat-card.has-warning { border-color: #f3c7a5; background: #fffaf5; }
.integration-stats .stat-card.has-warning strong { color: #b54708; }
.integration-heading { margin: 4px 0 10px; }
.integration-heading h3, .integration-heading p { margin: 0; }
.integration-heading p { margin-top: 3px; }
.integration-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.integration-source-card { display: grid; min-height: 196px; align-content: start; gap: 13px; margin: 0 !important; padding: 16px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
a.integration-source-card:hover { border-color: #9ecfd7; box-shadow: 0 12px 26px rgba(15, 77, 100, .09); transform: translateY(-2px); }
.integration-source-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 7px; background: #e8f5f6; color: var(--primary-dark); }
.integration-source-icon svg { width: 21px; height: 21px; }
.integration-source-copy { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; }
.integration-source-copy h3 { margin: 0 0 5px; font-size: 15px; }
.integration-source-copy p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.integration-source-status { flex: 0 0 auto; border-radius: 7px; background: #f1f6f7; padding: 7px 9px; text-align: right; }
.integration-source-status b, .integration-source-status small { display: block; white-space: nowrap; }
.integration-source-status b { color: var(--primary-dark); font-size: 12px; }
.integration-source-status small { margin-top: 1px; color: var(--muted); font-size: 10.5px; }
.integration-source-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; border-top: 1px solid #e8edf0; padding-top: 11px; color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.integration-source-action svg { width: 16px; height: 16px; }
.integration-quick-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 11px 13px; }
.integration-quick-actions > div:first-child strong, .integration-quick-actions > div:first-child small { display: block; }
.integration-quick-actions > div:first-child strong { font-size: 12.5px; }
.integration-quick-actions > div:first-child small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.integration-quick-actions > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.integration-quick-actions a { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; border-radius: 7px; background: #f2f6f7; color: #29414a; padding: 7px 9px; font-size: 11.5px; font-weight: 800; }
.integration-quick-actions a:hover { background: #e7f4f5; color: var(--primary-dark); }
.integration-quick-actions svg { width: 15px; height: 15px; }

/* Tenant company profile */
.tenant-profile-layout { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); gap: 14px; align-items: start; }
.tenant-profile-brand-card { display: grid; gap: 13px; }
.tenant-profile-brand-card .section-heading { margin-bottom: 0; }
.tenant-profile-brand-card .section-heading > svg { width: 20px; height: 20px; color: var(--primary-dark); }
.tenant-logo-preview { display: grid; width: 118px; height: 118px; place-items: center; overflow: hidden; border: 1px solid #cfe5eb; border-radius: 12px; background: #f3fafb; color: var(--primary-dark); font-size: 46px; font-weight: 800; }
.tenant-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.tenant-profile-brand-card > .muted { margin: 0; }
.account-supplier-approval-note { display: flex; align-items: flex-start; gap: 8px; border: 1px solid #b9dfe2; border-radius: 8px; background: #f1fbfb; padding: 10px 12px; color: #275a65; font-size: 11px; line-height: 1.45; }
.account-supplier-approval-note svg { width: 16px; height: 16px; flex: 0 0 16px; color: #0f7182; }
.required-mark { color: var(--danger); }

/* Compact list filtering */
.smart-filter-shell { padding: 0 !important; overflow: hidden; }
.smart-filter-header { min-height: 58px; display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; background: #fff; }
.smart-filter-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.smart-filter-title strong, .smart-filter-title small { display: block; }
.smart-filter-title strong { font-size: 14px; color: #20343d; }
.smart-filter-title small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.smart-filter-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 7px; background: #e8f5f6; color: #0f7182; }
.smart-filter-icon svg { width: 17px; height: 17px; }
.smart-filter-summary { overflow: hidden; color: #61717d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.smart-filter-actions { display: flex; align-items: center; gap: 7px; }
.filter-clear { color: #9b3b3b; font-size: 12px; font-weight: 700; text-decoration: none; }
.filter-toggle { min-width: 86px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dbe4e8; border-radius: 7px; background: #f6f9fa; color: #2c4049; cursor: pointer; font-weight: 700; font-size: 12px; }
.filter-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; }
.smart-filter-shell.is-filter-open .filter-toggle svg { transform: rotate(180deg); }
.smart-filter-form { display: none !important; margin: 0 !important; border-top: 1px solid var(--line); padding: 14px !important; background: #fbfcfd; }
.smart-filter-shell.is-filter-open .smart-filter-form { display: grid !important; }

/* ERP Agent management */
.agent-card .stats-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.agent-card .stat-card { min-height: 78px; padding: 12px; }
.agent-card .definition-card-header { gap: 12px; }
.agent-card details { border: 1px solid var(--line); border-radius: 7px; background: #fbfcfd; padding: 0 12px 12px; }
.agent-card details summary { padding: 12px 0; cursor: pointer; color: #24414c; font-weight: 750; }
.agent-card .definition-actions { border: 0; padding: 0; justify-content: flex-end; }
.token-reveal code { min-width: 0; max-width: 100%; white-space: nowrap; }
.page-intro .inline-actions { flex: 0 0 auto; }
.agent-dashboard-panel { margin-top: 16px; border: 1px solid #d8e3e7; border-radius: 10px; background: #fff; padding: 16px; box-shadow: 0 5px 16px rgba(17, 24, 39, .035); }
.agent-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.agent-dashboard-heading .platform-health-copy { min-width: 0; }
.agent-dashboard-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.agent-dashboard-summary > div { border: 1px solid #e5ecee; border-radius: 7px; background: #f8fafb; padding: 10px 12px; }
.agent-dashboard-summary span, .agent-dashboard-summary strong { display: block; }
.agent-dashboard-summary span { color: #788690; font-size: 10px; font-weight: 750; }
.agent-dashboard-summary strong { margin-top: 3px; color: #244957; font-size: 20px; line-height: 1; }
.agent-dashboard-summary strong.is-positive { color: #168767; }
.agent-dashboard-summary strong.is-warning, .text-warning { color: #b26c20; }
.agent-dashboard-table { margin: 0 -2px; }
.agent-dashboard-table table { min-width: 860px; }
.agent-dashboard-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.process-builder > summary { cursor: pointer; list-style: none; margin: 0; }
.process-builder > summary::-webkit-details-marker { display: none; }
.process-builder > summary .button svg { transition: transform .2s ease; }
.process-builder[open] > summary .button svg { transform: rotate(180deg); }
.process-builder > .order-builder { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.order-filters { margin: 14px 0; }
.delivery-progress { width: 128px; max-width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: #e5ecef; margin-bottom: 6px; }
.delivery-progress span { display: block; height: 100%; background: #18a57b; }
.delivery-progress.large { width: 100%; height: 10px; margin: 16px 0; }
.delivery-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.delivery-metrics div { border: 1px solid var(--line); border-radius: 7px; background: #f8fafb; padding: 10px; }
.delivery-metrics span, .delivery-metrics strong { display: block; }
.delivery-metrics span { color: var(--muted); font-size: 11px; }
.delivery-metrics strong { margin-top: 3px; font-size: 19px; }
.document-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding: 4px 0 18px; }
.document-hero h2 { margin: 8px 0 3px; font-size: 26px; }
.document-hero p { margin: 0; color: var(--muted); }
.document-number { text-align: right; }
.document-number small, .document-number strong { display: block; }
.document-number small { color: var(--muted); text-transform: uppercase; font-size: 10px; }
.document-number strong { margin-top: 3px; font-size: 20px; }
.detail-list { display: grid; gap: 0; margin: 12px 0 0; }
.detail-list div { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid #edf1f3; padding: 9px 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 700; }

/* Printable procurement documents */
.print-document { margin: 0; background: #e9eef0; color: #1c2d35; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.print-sheet { width: min(960px, calc(100% - 32px)); min-height: 1120px; margin: 24px auto; background: #fff; box-shadow: 0 18px 50px rgba(25, 45, 55, .12); padding: 38px; }
.print-toolbar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.print-header { display: flex; justify-content: space-between; gap: 28px; border-bottom: 3px solid #117789; padding-bottom: 20px; }
.print-brand { color: #117789; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.print-header h1 { margin: 6px 0 3px; font-size: 28px; }
.print-header p { margin: 0; color: #71818a; }
.print-reference { min-width: 180px; text-align: right; }
.print-reference small, .print-reference strong, .print-reference span { display: block; }
.print-reference small { color: #71818a; font-size: 10px; }
.print-reference strong { margin: 4px 0; font-size: 20px; }
.print-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 24px 0; border: 1px solid #dce5e8; }
.print-info-grid div { min-height: 72px; border-right: 1px solid #dce5e8; padding: 12px; }
.print-info-grid div:last-child { border-right: 0; }
.print-info-grid span, .print-info-grid strong { display: block; }
.print-info-grid span { margin-bottom: 5px; color: #71818a; font-size: 10px; text-transform: uppercase; }
.print-table { width: 100%; border-collapse: collapse; }
.print-table th { background: #edf6f7; color: #31505b; font-size: 11px; text-transform: uppercase; }
.print-table th, .print-table td { border: 1px solid #dce5e8; padding: 12px; text-align: left; }
.print-note { margin-top: 22px; border: 1px solid #dce5e8; padding: 14px; }
.print-note span { color: #71818a; font-size: 10px; text-transform: uppercase; }
.print-note p { min-height: 38px; margin: 8px 0 0; }
.print-totals { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.print-totals div { min-width: 220px; border: 1px solid #dce5e8; background: #f6fafb; padding: 12px; text-align: right; }
.print-totals span, .print-totals strong { display: block; }
.print-totals span { color: #71818a; font-size: 10px; text-transform: uppercase; }
.print-totals strong { margin-top: 4px; font-size: 18px; }
.signature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 90px; }
.signature-grid div { border-top: 1px solid #83939b; padding-top: 8px; text-align: center; }
.signature-grid span, .signature-grid strong { display: block; }
.signature-grid span { color: #71818a; font-size: 10px; text-transform: uppercase; }
.signature-grid strong { margin-top: 5px; }

@media (min-width: 981px) {
    .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
    .sidebar { padding: 14px 12px; }
    .brand strong { font-size: 13px; }
    .client-brand { margin-top: 11px; }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .app-shell { grid-template-columns: 204px minmax(0, 1fr); }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-chip small { display: none; }
    .content { padding-right: 16px; padding-left: 16px; }
    .definition-basic-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .definition-meta-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mapping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .integration-source-grid { grid-template-columns: 1fr; }
    .integration-source-card { min-height: 0; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
    .integration-source-action { align-self: stretch; border-top: 0; border-left: 1px solid #e8edf0; padding: 0 0 0 12px; }
}

@media (max-width: 900px) {
    html { font-size: 14px; }
    .content { padding: 14px 14px 24px; }
    .topbar { min-height: 60px; padding: 9px 14px; }
    .work-tabs-shell { top: 60px; padding-right: 14px; padding-left: 14px; }
    .breadcrumb-bar { display: none; }
    .topbar h1, .title { font-size: 19px; }
    .content > .topbar { align-items: stretch; flex-direction: column; gap: 9px; }
    .content > .topbar > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
    .card { padding: 12px; overflow: visible; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .module-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .permission-check-grid { grid-template-columns: 1fr; }
    .permission-check-grid.compact { grid-template-columns: 1fr; }
    .platform-license-row { grid-template-columns: 1fr 1fr; }
    .platform-license-name { grid-column: 1 / -1; }
    .responsive-table, .table-wrap { margin-right: -12px; margin-left: -12px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); padding: 0 12px 4px; }
    .help-hero, .help-layout, .profile-shell { grid-template-columns: 1fr; }
    .help-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help-toc { position: static; max-height: 220px; }
    .login-panel { max-height: none; }
    .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .definition-basic-form, .definition-meta-form, .mapping-footer { grid-template-columns: 1fr; }
    .definition-card-header { align-items: flex-start; flex-direction: column; }
    .token-reveal, .agent-meta { grid-template-columns: 1fr 1fr; }
    .agent-card .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smart-filter-header { grid-template-columns: minmax(0, 1fr) auto; }
    .smart-filter-summary { grid-column: 1 / -1; grid-row: 2; }
    .document-hero { align-items: flex-start; flex-direction: column; }
    .document-number { text-align: left; }
    .print-info-grid { grid-template-columns: 1fr 1fr; }
    .print-info-grid div:nth-child(2) { border-right: 0; }
    .integration-source-grid { grid-template-columns: 1fr; }
    .integration-source-card { min-height: 0; }
    .integration-quick-actions { align-items: stretch; flex-direction: column; }
    .integration-quick-actions > div:last-child { justify-content: flex-start; }
}

@media (max-width: 560px) {
    .work-tabs-shell { display: none !important; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help-shortcuts { grid-template-columns: 1fr; }
    .module-feature-grid { grid-template-columns: 1fr; }
    .login-copy { display: flex; padding: 24px 22px; border-right: 0; border-bottom: 1px solid var(--line); }
    .login-brand-row { align-items: flex-start; flex-direction: column; gap: 12px; }
    .login-intro { margin-top: 38px; }
    .login-copy h1 { margin-top: 9px; font-size: 30px; }
    .login-module-list { grid-template-columns: 1fr; margin-top: 22px; }
    .login-panel { display: block; width: min(420px, 100%); }
    .login-card { min-height: auto; padding: 28px 22px; }
    .page-actions .button, .page-actions .btn { flex: 1 1 100%; }
    .section-heading { gap: 8px; }
    .setup-steps, .mapping-grid { grid-template-columns: 1fr; }
    .app-pagination { align-items: stretch; flex-direction: column; }
    .pagination-actions { justify-content: space-between; }
    .pagination-button span { display: none; }
    .token-reveal, .agent-meta { grid-template-columns: 1fr; }
    .agent-card .stats-grid { grid-template-columns: 1fr 1fr; }
    .smart-filter-header { gap: 8px; padding: 9px 10px; }
    .smart-filter-summary { display: none; }
    .filter-clear { display: none; }
    .filter-toggle { min-width: 76px; }
    .delivery-metrics { grid-template-columns: 1fr; }
    .detail-list div { grid-template-columns: 1fr; gap: 2px; }
    .integration-source-copy { flex-direction: column; }
    .integration-source-status { text-align: left; }
    .integration-quick-actions a { flex: 1 1 calc(50% - 6px); }
    .print-sheet { width: 100%; min-height: 0; margin: 0; padding: 20px; box-shadow: none; }
    .print-header, .signature-grid { grid-template-columns: 1fr; flex-direction: column; }
    .print-reference { text-align: left; }
    .print-info-grid { grid-template-columns: 1fr; }
    .print-info-grid div { border-right: 0; border-bottom: 1px solid #dce5e8; }
}

/* Login product surface */
.login-page { place-items: center; }
.login-panel { border-color: #cfdde2; box-shadow: 0 20px 55px rgba(22, 54, 66, .12); }
.login-copy { background: #f7fbfb; }
.login-card { background: #fff; }
.login-card-header h2 { max-width: 300px; color: #183844; font-size: 24px; line-height: 1.15; }
.login-card-header small { display: block; max-width: 290px; line-height: 1.5; }
.login-card .field span { color: #344e59; font-size: 12px; }
.login-card input { min-height: 45px; border-color: #cbd9de; }
.login-card input:focus { border-color: #0f7182; box-shadow: 0 0 0 3px rgba(15, 113, 130, .12); outline: 0; }
.login-card .button.primary { min-height: 45px; background: #0f7182; }
.login-card .button.primary:hover { background: #0b5f6d; }

@media (max-width: 900px) {
    .login-page { place-items: start center; padding: 12px; }
    .login-panel { display: flex; width: min(460px, 100%); max-height: none; flex-direction: column; }
    .login-panel .login-card { order: -1; align-content: start; padding: 24px 20px 20px; }
    .login-copy { order: 2; padding: 22px 20px; border-right: 0; border-bottom: 0; border-top: 1px solid var(--line); }
    .login-card-icon { margin-bottom: 12px; }
    .login-intro { margin-top: 24px; }
    .login-copy h1 { max-width: 440px; margin-top: 8px; font-size: 29px; }
    .login-copy p { font-size: 13px; }
    .login-brand-lockup img { width: 220px; }
    .login-module-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
    .login-module { gap: 7px; padding: 10px; }
    .login-module small { font-size: 10px; }
    .login-footer-note { margin-top: 15px; }
}

@media (max-width: 560px) {
    .login-page { padding: 8px; }
    .login-panel { border-radius: 9px; }
    .login-panel .login-card { padding: 21px 17px 17px; }
    .login-card-header h2 { font-size: 22px; }
    .login-copy { padding: 19px 17px 21px; }
    .login-brand-row { gap: 9px; }
    .login-brand-lockup img { width: 190px; }
    .login-intro { margin-top: 20px; }
    .login-copy h1 { font-size: 26px; }
    .login-module-list { grid-template-columns: 1fr; }
    .login-module { grid-template-columns: auto 1fr; align-items: center; }
    .login-module-icon { width: 30px; height: 30px; }
    .login-module small { margin-top: 2px; }
}

@media print {
    .print-document { background: #fff; }
    .print-sheet { width: 100%; min-height: 0; margin: 0; box-shadow: none; padding: 0; }
    .print-toolbar { display: none; }
}

/* Platform control center */
.platform-command-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; border: 1px solid #d5e5e8; border-radius: 10px; background: #f5fbfb; padding: 20px 22px; }
.platform-command-copy { display: flex; min-width: 0; align-items: center; gap: 14px; }
.platform-command-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 9px; background: #d7eff0; color: #0f7182; }
.platform-command-icon svg { width: 23px; height: 23px; }
.platform-command-label { display: block; color: #0f7182; font-size: 10px; font-weight: 850; letter-spacing: .06em; }
.platform-command-copy h2 { margin: 3px 0 4px; color: #1d2939; font-size: 21px; }
.platform-command-copy p, .platform-section-heading p { margin: 0; color: #667085; font-size: 12.5px; }
.platform-command-action { flex: 0 0 auto; white-space: nowrap; }
.platform-command-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.platform-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.platform-metric-card { display: flex; min-width: 0; align-items: center; gap: 12px; border: 1px solid #dce5e9; border-left: 4px solid #0f7182; border-radius: 9px; background: #fff; padding: 15px; box-shadow: 0 5px 16px rgba(17, 24, 39, .045); }
.platform-metric-card.accent-blue { border-left-color: #3d72aa; }
.platform-metric-card.accent-violet { border-left-color: #7968a7; }
.platform-metric-card.accent-amber { border-left-color: #c17a27; }
.platform-metric-icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 8px; background: #e7f5f5; color: #0f7182; }
.accent-blue .platform-metric-icon { background: #edf3fb; color: #3d72aa; }
.accent-violet .platform-metric-icon { background: #f2eff8; color: #7968a7; }
.accent-amber .platform-metric-icon { background: #fff5e8; color: #b26c20; }
.platform-metric-icon svg { width: 18px; height: 18px; }
.platform-metric-card small, .platform-metric-card strong, .platform-metric-card > div > span { display: block; }
.platform-metric-card small { color: #667085; font-size: 11px; font-weight: 700; }
.platform-metric-card strong { margin: 2px 0 1px; color: #173f50; font-size: 25px; line-height: 1; }
.platform-metric-card > div > span { overflow: hidden; color: #87919e; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.platform-health-band { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.3fr) auto; align-items: center; gap: 22px; margin-top: 12px; border: 1px solid #dce5e9; border-radius: 9px; background: #fff; padding: 14px 16px; }
.platform-health-copy { display: flex; align-items: center; gap: 10px; }
.platform-section-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 7px; background: #f0f4f6; color: #49606c; }
.platform-section-icon svg { width: 17px; height: 17px; }
.platform-health-copy strong, .platform-health-copy p { display: block; }
.platform-health-copy strong { color: #243b46; font-size: 13px; }
.platform-health-copy p { margin: 2px 0 0; color: #7a8791; font-size: 11px; }
.platform-health-meter-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #687782; font-size: 11px; font-weight: 750; }
.platform-health-meter-head strong { color: #0f7182; }
.platform-progress { height: 8px; overflow: hidden; border-radius: 4px; background: #edf1f3; }
.platform-progress span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: #18a57b; transition: width .25s ease; }
.platform-health-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; color: #687782; font-size: 11px; white-space: nowrap; }
.platform-health-facts span { display: inline-flex; align-items: center; gap: 5px; }
.platform-quick-actions { margin-top: 24px; border: 1px solid #d8e3e7; border-radius: 10px; background: #fff; padding: 18px; box-shadow: 0 5px 16px rgba(17, 24, 39, .04); }
.platform-quick-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.platform-quick-action { display: flex; min-width: 0; align-items: center; gap: 10px; border: 1px solid #e0e8eb; border-radius: 8px; background: #fbfcfd; padding: 12px; color: inherit; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.platform-quick-action:hover, .platform-quick-action:focus-visible { border-color: #9bcfd3; background: #f0faf9; outline: 0; transform: translateY(-1px); }
.platform-quick-action > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; flex: 1 1 auto; }
.platform-quick-action strong { overflow: hidden; color: #294957; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.platform-quick-action small { overflow: hidden; color: #7b8992; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.platform-quick-action > svg { width: 16px; height: 16px; flex: 0 0 16px; color: #0f7182; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #c5cdd2; }
.status-dot.is-active { background: #18a57b; }
.status-dot.is-muted { background: #c17a27; }
.platform-companies-section { margin-top: 24px; }
.platform-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.platform-section-heading h2 { margin: 3px 0 2px; color: #1d2939; font-size: 20px; }
.platform-list-count { border: 1px solid #d9e5e8; border-radius: 999px; background: #f4fafb; color: #0f7182; padding: 7px 10px; font-size: 11px; font-weight: 800; }
.platform-tenant-list { display: grid; gap: 14px; }
.platform-tenant-card { border: 1px solid #d8e3e7; border-radius: 10px; background: #fff; padding: 16px; box-shadow: 0 5px 16px rgba(17, 24, 39, .04); }
.platform-tenant-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.platform-company-identity { display: flex; min-width: 0; align-items: center; gap: 10px; }
.platform-company-mark, .platform-user-avatar { display: grid; place-items: center; border-radius: 8px; background: #e7f5f5; color: #0f7182; font-weight: 850; }
.platform-company-mark { width: 38px; height: 38px; flex: 0 0 38px; }
.platform-company-identity h3 { overflow: hidden; margin: 0 0 3px; color: #1d2939; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.platform-company-identity .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-tenant-badges { display: flex; align-items: center; gap: 12px; }
.platform-status-badge, .platform-user-count { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.platform-status-badge { border-radius: 999px; background: #eaf7f1; color: #177d60; padding: 6px 9px; font-size: 11px; font-weight: 800; }
.platform-status-badge.is-muted { background: #fff5e8; color: #9b5d1c; }
.platform-user-count { color: #667085; font-size: 11px; }
.platform-user-count svg { width: 14px; height: 14px; }
.platform-company-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.platform-company-summary > div { border-top: 1px solid #edf1f3; padding-top: 9px; }
.platform-company-summary small, .platform-company-summary strong { display: block; }
.platform-company-summary small { color: #84919a; font-size: 10px; }
.platform-company-summary strong { margin-top: 2px; color: #294957; font-size: 13px; }
.platform-user-list { display: grid; gap: 0; margin: 0 0 14px; border: 1px solid #e2eaed; border-radius: 8px; background: #fbfcfd; padding: 0 11px; }
.platform-subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e5ecee; padding: 10px 0; }
.platform-subsection-heading strong { color: #294957; font-size: 12px; }
.platform-subsection-heading span { color: #87919e; font-size: 10px; }
.platform-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf1f3; padding: 8px 0; }
.platform-user-row:last-child { border-bottom: 0; }
.platform-user-person { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
.platform-user-avatar { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; font-size: 11px; }
.platform-user-person strong, .platform-user-person small { display: block; }
.platform-user-person strong { overflow: hidden; color: #273d47; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.platform-user-person small { margin-top: 1px; color: #7c8992; font-size: 10px; }
.platform-user-permissions { max-width: 48%; overflow: hidden; color: #6c7a84; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.platform-license-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 7px; }
.platform-license-heading strong, .platform-license-heading span { display: block; }
.platform-license-heading strong { color: #294957; font-size: 12px; }
.platform-license-heading span { margin-top: 2px; color: #87919e; font-size: 10px; }
.platform-license-heading > svg { width: 17px; height: 17px; color: #7c8e96; }
.platform-license-grid { display: grid; gap: 7px; }
.platform-license-row { display: grid; grid-template-columns: minmax(160px, 1fr) 126px 138px 138px auto; gap: 8px; align-items: center; border: 1px solid #e0e8eb; border-radius: 8px; background: #fbfcfd; padding: 8px; }
.platform-license-name strong, .platform-license-name small { display: block; }
.platform-license-name strong { color: #304a56; font-size: 12px; }
.platform-license-name small { margin-top: 2px; color: #7e8b94; font-size: 10px; }
.platform-license-row .button { min-height: 34px; padding: 7px 10px; }
.platform-firm-list { display: grid; gap: 14px; }
.platform-firm-card { border: 1px solid #d8e3e7; border-radius: 10px; background: #fff; padding: 16px; box-shadow: 0 5px 16px rgba(17, 24, 39, .04); }
.platform-firm-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.platform-firm-card-header h2 { margin: 0 0 3px; color: #1d2939; font-size: 17px; }
.platform-firm-card-header .platform-tenant-badges { flex-wrap: wrap; justify-content: flex-end; }
.platform-firm-licenses { margin: 14px 0; border: 1px solid #e0e8eb; border-radius: 8px; background: #fbfcfd; padding: 11px; }
.platform-firm-edit-modal { width: min(760px, calc(100vw - 24px)); }
.platform-firm-detail-summary { margin-top: 0; border: 1px solid #d8e3e7; border-radius: 9px; background: #fff; padding: 13px 15px; }
.platform-firm-detail-users { margin-top: 14px; }
.platform-firm-card-actions { display: flex; justify-content: flex-end; border-top: 1px solid #edf1f3; padding-top: 12px; }
.platform-firm-summary { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0; border-top: 1px solid #edf1f3; border-bottom: 1px solid #edf1f3; padding: 10px 0; color: #7b8992; font-size: 11px; }
.platform-firm-summary strong { color: #294957; font-size: 13px; }
.platform-firm-users { border: 1px solid #e0e8eb; border-radius: 8px; background: #fbfcfd; }
.platform-firm-users summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; padding: 11px 12px; color: #294957; font-size: 12px; font-weight: 800; }
.platform-firm-users summary::-webkit-details-marker { display: none; }
.platform-firm-users summary span { display: inline-flex; align-items: center; gap: 7px; }
.platform-firm-users summary svg { width: 16px; height: 16px; color: #0f7182; }
.platform-firm-users summary b { color: #87919e; font-size: 10px; }
.platform-firm-users[open] summary { border-bottom: 1px solid #e5ecee; }
.platform-firm-users-table { overflow-x: auto; padding: 0 11px 5px; }
.platform-firm-users-table table { min-width: 650px; }

@media (max-width: 1100px) {
    .platform-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-health-band { grid-template-columns: 1fr 1fr; }
    .platform-health-facts { justify-content: flex-start; grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .agent-dashboard-heading { align-items: flex-start; flex-direction: column; }
    .agent-dashboard-heading .button { width: 100%; justify-content: center; }
    .agent-dashboard-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .platform-command-header { align-items: flex-start; flex-direction: column; padding: 15px; }
    .platform-command-actions { width: 100%; justify-content: stretch; }
    .platform-command-actions .button { flex: 1 1 200px; justify-content: center; }
    .platform-command-action { width: auto; justify-content: center; }
    .platform-health-band { grid-template-columns: 1fr; gap: 12px; }
    .platform-health-facts { grid-column: auto; }
    .platform-quick-action-grid { grid-template-columns: 1fr; }
    .platform-tenant-header { align-items: flex-start; flex-direction: column; }
    .platform-tenant-badges { width: 100%; justify-content: space-between; }
    .platform-firm-card-header { align-items: flex-start; flex-direction: column; }
    .platform-firm-card-header .platform-tenant-badges { width: 100%; justify-content: flex-start; }
    .platform-license-row { grid-template-columns: 1fr 1fr; }
    .platform-license-name { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .agent-dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-metric-grid { gap: 8px; }
    .platform-metric-card { align-items: flex-start; flex-direction: column; gap: 8px; padding: 11px; }
    .platform-metric-card strong { font-size: 21px; }
    .platform-metric-card > div > span { white-space: normal; }
    .platform-section-heading { align-items: flex-start; flex-direction: column; }
    .platform-company-summary { gap: 6px; }
    .platform-company-summary strong { font-size: 12px; }
    .platform-user-row { align-items: flex-start; flex-direction: column; gap: 5px; }
    .platform-user-permissions { max-width: 100%; padding-left: 35px; text-align: left; }
    .platform-license-row { grid-template-columns: 1fr; }
    .platform-license-name { grid-column: auto; }
}

/* Tenant setup wizard */
.tenant-wizard-shell { display: grid; gap: 0; border: 1px solid #d8e3e7; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(17, 24, 39, .05); overflow: hidden; }
.tenant-wizard-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; }
.tenant-wizard-header h2 { margin: 4px 0 3px; color: #1d2939; font-size: 23px; }
.tenant-wizard-header p { margin: 0; color: #667085; font-size: 12.5px; }
.tenant-wizard-progress-copy { display: grid; min-width: 125px; gap: 2px; text-align: right; }
.tenant-wizard-progress-copy strong { color: #0f7182; font-size: 17px; }
.tenant-wizard-progress-copy span { color: #7a8791; font-size: 11px; }
.tenant-wizard-progress { height: 5px; background: #edf1f3; }
.tenant-wizard-progress > span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #0f7182; transition: width .24s ease; }
.tenant-wizard-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-bottom: 1px solid #e2eaed; background: #e2eaed; }
.tenant-wizard-step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; border: 0; background: #f8fafb; padding: 13px 16px; color: #7d8992; text-align: left; cursor: pointer; }
.tenant-wizard-step > span { display: grid; width: 25px; height: 25px; grid-row: 1 / 3; place-items: center; border: 1px solid #ccd9de; border-radius: 50%; background: #fff; color: #71818a; font-size: 11px; font-weight: 850; }
.tenant-wizard-step strong { color: #687782; font-size: 11.5px; }
.tenant-wizard-step small { margin-top: 1px; font-size: 10px; }
.tenant-wizard-step.is-active { background: #eef9f8; }
.tenant-wizard-step.is-active > span, .tenant-wizard-step.is-complete > span { border-color: #0f7182; background: #0f7182; color: #fff; }
.tenant-wizard-step.is-active strong, .tenant-wizard-step.is-complete strong { color: #0f7182; }
.tenant-wizard-panel { padding: 25px 24px 22px; }
.tenant-wizard-panel[hidden] { display: none; }
.tenant-wizard-panel-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; }
.tenant-wizard-panel-number { color: #a0adb5; font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.tenant-wizard-panel-heading h2 { margin: 0 0 3px; color: #263d48; font-size: 20px; }
.tenant-wizard-panel-heading p { margin: 0; color: #7a8791; font-size: 12px; }
.tenant-wizard-tip { display: flex; align-items: center; gap: 8px; margin-top: 16px; border: 1px solid #d8e9eb; border-radius: 7px; background: #f3fafb; padding: 10px 12px; color: #536b73; font-size: 11px; }
.tenant-wizard-tip svg { width: 16px; height: 16px; flex: 0 0 16px; color: #0f7182; }
.tenant-wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; border-top: 1px solid #edf1f3; padding-top: 16px; }
.tenant-module-selection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tenant-module-option { display: flex; min-height: 95px; align-items: flex-start; gap: 9px; border: 1px solid #dbe5e8; border-radius: 8px; background: #fbfcfd; padding: 13px; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.tenant-module-option:hover, .tenant-module-option.is-selected { border-color: #8bcbd0; background: #f0faf9; }
.tenant-module-option input { position: absolute; opacity: 0; pointer-events: none; }
.tenant-module-check { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; border: 1px solid #c8d7dc; border-radius: 5px; background: #fff; color: transparent; }
.tenant-module-check svg { width: 14px; height: 14px; }
.tenant-module-option.is-selected .tenant-module-check { border-color: #0f7182; background: #0f7182; color: #fff; }
.tenant-module-option strong, .tenant-module-option small { display: block; }
.tenant-module-option strong { color: #294957; font-size: 12px; }
.tenant-module-option small { margin-top: 4px; color: #7b8992; font-size: 10.5px; line-height: 1.4; }
.tenant-license-list { display: grid; gap: 8px; margin-top: 15px; }
.tenant-license-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, .7fr) minmax(150px, .7fr); gap: 10px; align-items: end; border: 1px solid #e0e8eb; border-radius: 8px; background: #fff; padding: 11px; }
.tenant-license-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tenant-license-title strong, .tenant-license-title small { display: block; }
.tenant-license-title strong { color: #294957; font-size: 12px; }
.tenant-license-title small { margin-top: 2px; color: #87919e; font-size: 10px; }
.tenant-license-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 7px; background: #e7f5f5; color: #0f7182; }
.tenant-license-icon svg { width: 16px; height: 16px; }
.tenant-admin-preview { display: flex; align-items: center; gap: 10px; margin-top: 18px; border: 1px solid #d8e9eb; border-radius: 8px; background: #f5fbfb; padding: 12px; }
.tenant-admin-preview strong, .tenant-admin-preview p { display: block; }
.tenant-admin-preview strong { color: #294957; font-size: 12px; }
.tenant-admin-preview p { margin: 3px 0 0; color: #71818a; font-size: 11px; }

@media (max-width: 900px) {
    .tenant-wizard-header { align-items: flex-start; flex-direction: column; }
    .tenant-wizard-progress-copy { text-align: left; }
    .tenant-module-selection { grid-template-columns: 1fr; }
    .tenant-license-row { grid-template-columns: 1fr 1fr; }
    .tenant-license-title { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .tenant-wizard-header, .tenant-wizard-panel { padding-right: 15px; padding-left: 15px; }
    .tenant-wizard-step { grid-template-columns: 1fr; justify-items: center; gap: 5px; padding: 10px 5px; text-align: center; }
    .tenant-wizard-step > span { grid-row: auto; }
    .tenant-wizard-step strong { font-size: 10px; }
    .tenant-wizard-step small { display: none; }
    .tenant-license-row { grid-template-columns: 1fr; }
    .tenant-license-title { grid-column: auto; }
    .tenant-wizard-actions .button { min-width: 0; }
}

/* Mobile workspace chrome */
@media (max-width: 900px) {
    .main > .topbar { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 rgba(217, 224, 232, .9), 0 6px 16px rgba(17, 24, 39, .05); }
    .main > .topbar > div:first-of-type { min-width: 0; flex: 1 1 auto; }
    .mobile-profile-button { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: #edf6f7; color: var(--primary-dark); }
    .mobile-profile-button:hover, .mobile-profile-button:focus-visible { border-color: #a9d8df; background: #e0f1f3; outline: 0; }
    .mobile-profile-button svg { width: 17px; height: 17px; }
    .main > .topbar { min-height: 48px; gap: 9px; padding: 6px 12px; }
    .main > .topbar .eyebrow { display: none; }
    .main > .topbar h1 { font-size: 17px; line-height: 1.1; }
    .mobile-menu-button { width: 34px; height: 34px; padding: 7px; }
    .work-tabs-shell { top: 48px; grid-template-columns: minmax(0, 1fr) 30px; gap: 5px; padding: 4px 10px 0; }
    .work-tabs { scrollbar-width: none; }
    .work-tabs::-webkit-scrollbar { display: none; }
    .work-tab { max-width: 150px; min-height: 29px; gap: 5px; padding: 4px 4px 4px 7px; font-size: 11px; }
    .work-tab span { max-width: 92px; }
    .work-tab svg { width: 14px; height: 14px; flex-basis: 14px; }
    .work-tab button { width: 20px; height: 20px; padding: 2px; }
    .work-tabs-clear { width: 28px; height: 28px; margin-bottom: 1px; }
}

@media (max-width: 560px) {
    .work-tabs-shell { top: 48px; padding: 4px 8px 0; }
    .work-tab { max-width: 142px; }
    .work-tab span { max-width: 86px; }
}

/* User access wizard */
.user-wizard-modal { inset: 0; display: flex; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; flex-direction: column; padding: 0; border: 0; border-radius: 0; background: #fff; color: #17212b; box-shadow: none; overflow: hidden; }
.user-wizard-modal:not([open]) { display: none; }
.user-wizard-modal::backdrop { background: rgba(18, 42, 39, .52); backdrop-filter: blur(3px); }
.user-wizard-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 26px 17px; border-bottom: 1px solid #e2e9e7; }
.user-wizard-header h2 { margin: 3px 0 4px; color: #1a2932; font-size: 23px; }
.user-wizard-header p { margin: 0; }
.user-wizard-progress { height: 4px; background: #edf2f1; }
.user-wizard-progress > span { display: block; width: 25%; height: 100%; background: #0f7182; transition: width .2s ease; }
.user-wizard-form { display: flex; min-height: 0; height: calc(100% - 93px); flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.user-wizard-stepper { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid #e2e9e7; background: #e2e9e7; }
.user-wizard-step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; border: 0; background: #f8fafb; padding: 12px 15px; color: #77868d; text-align: left; cursor: pointer; }
.user-wizard-step > span { display: grid; width: 25px; height: 25px; grid-row: 1 / 3; place-items: center; border: 1px solid #cbd9dd; border-radius: 50%; background: #fff; color: #73818a; font-size: 11px; font-weight: 850; }
.user-wizard-step strong { color: #5f717a; font-size: 11.5px; }
.user-wizard-step small { margin-top: 2px; color: #91a0a7; font-size: 10px; }
.user-wizard-step.is-active { background: #eef9f8; }
.user-wizard-step.is-active > span, .user-wizard-step.is-complete > span { border-color: #0f7182; background: #0f7182; color: #fff; }
.user-wizard-step.is-active strong, .user-wizard-step.is-complete strong { color: #0f7182; }
.user-wizard-panel { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 25px 26px 24px; }
.user-wizard-panel[hidden] { display: none; }
.user-wizard-panel-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 19px; }
.user-wizard-panel-heading > span { color: #a1adb3; font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.user-wizard-panel-heading h3 { margin: 0 0 4px; color: #263d48; font-size: 20px; }
.user-wizard-panel-heading p { margin: 0; color: #7b8992; font-size: 12px; }
.wizard-hidden-profile-select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.user-profile-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.user-profile-card { position: relative; display: flex; min-height: 123px; align-items: flex-start; gap: 10px; border: 1px solid #d9e5e7; border-radius: 9px; background: #fbfcfd; padding: 14px; color: #2c4752; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.user-profile-card:hover, .user-profile-card.is-selected { border-color: #49a8ad; background: #f0faf9; box-shadow: 0 5px 16px rgba(15, 113, 130, .08); }
.user-profile-card-icon { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 7px; background: #e7f5f5; color: #0f7182; }
.user-profile-card-icon svg { width: 16px; height: 16px; }
.user-profile-card > span:nth-of-type(2) { display: grid; gap: 4px; min-width: 0; }
.user-profile-card strong { color: #294957; font-size: 12px; }
.user-profile-card small { color: #72818b; font-size: 10.5px; line-height: 1.4; }
.user-profile-card em { color: #0f7182; font-size: 10px; font-style: normal; font-weight: 800; }
.user-profile-card-check { position: absolute; top: 11px; right: 11px; width: 16px; height: 16px; color: transparent; }
.user-profile-card.is-selected .user-profile-card-check { color: #0f7182; }
.wizard-profile-result { display: grid; gap: 10px; margin-top: 16px; border-left: 3px solid #168b78; border-radius: 7px; background: #edf8f6; padding: 12px 14px; }
.wizard-profile-result > div:first-child { display: grid; gap: 3px; }
.wizard-profile-result strong { color: #294957; font-size: 12px; }
.wizard-profile-result span { color: #4f635f; font-size: 12px; line-height: 1.45; }
.wizard-profile-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wizard-profile-chips .permission-chip { background: #fff; }
.wizard-info { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; border: 1px solid #d8e9eb; border-radius: 7px; background: #f3fafb; padding: 10px 12px; color: #536b73; font-size: 11px; line-height: 1.4; }
.wizard-info svg { width: 16px; height: 16px; flex: 0 0 16px; color: #0f7182; }
.wizard-account-summary { display: flex; align-items: center; gap: 11px; border: 1px solid #d9e5e7; border-radius: 8px; background: #f8fbfb; padding: 13px; }
.wizard-account-summary > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.wizard-account-summary strong { color: #294957; font-size: 13px; }
.wizard-account-summary small { color: #71818a; font-size: 11px; }
.user-avatar.small { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; background: #e5f2f3; color: #0f7182; font-weight: 850; }
.wizard-organization-panel { margin: 0; border: 1px solid #d5e1e4; background: #f8fbfb; }
.wizard-organization-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #d5e1e4; padding: 12px 14px; }
.wizard-organization-heading span { display: inline-flex; align-items: center; gap: 7px; color: #285565; font-size: 13px; font-weight: 800; }
.wizard-organization-heading span svg { width: 16px; color: #0f7182; }
.wizard-organization-heading small { color: #7b8992; font-size: 10px; }
.wizard-organization-panel .organization-access-note { margin: 12px 12px 0; }
.wizard-organization-panel .modal-assignment-grid { padding: 12px; }
.wizard-permission-summary { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 14px; border: 1px solid #d6e7e8; border-radius: 8px; background: #f3fafb; padding: 11px 13px; }
.wizard-permission-summary > div { display: grid; gap: 1px; border-right: 1px solid #d6e7e8; padding-right: 14px; }
.wizard-permission-summary strong { color: #0f7182; font-size: 18px; line-height: 1; }
.wizard-permission-summary span { color: #71818a; font-size: 10px; white-space: nowrap; }
.wizard-permission-summary p { margin: 0; color: #536b73; font-size: 11px; line-height: 1.4; }
.wizard-permission-diff { display: grid; gap: 8px; margin-bottom: 14px; border: 1px solid #d6e7e8; border-radius: 8px; background: #f8fbfb; padding: 12px 14px; }
.wizard-permission-diff-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wizard-permission-diff-heading strong { color: #294957; font-size: 12px; }
.wizard-permission-diff-empty { margin: 0; font-size: 12px; color: #71818a; }
.wizard-permission-diff-empty[hidden] { display: none; }
.wizard-permission-diff-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.permission-chip.is-extra, .permission-chip.is-removed { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: inherit; }
.permission-chip.is-extra { border-color: #9fd8c8; color: #0f7a5c; background: #eafbf3; }
.permission-chip.is-removed { border-color: #f0c9a0; color: #a3651c; background: #fff6ea; text-decoration: line-through; }
.permission-chip.is-extra svg, .permission-chip.is-removed svg { width: 11px; height: 11px; }
.wizard-permission-editor { margin-top: 4px; }
.wizard-permission-editor[hidden] { display: none; }
.wizard-permission-search { margin-bottom: 12px; }
.wizard-permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wizard-permission-group { min-width: 0; border: 1px solid #d9e3e5; border-radius: 8px; background: #fbfcfd; overflow: hidden; }
.wizard-permission-group[hidden] { display: none; }
.wizard-permission-group summary { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 12px; color: #285565; font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.wizard-permission-group summary::-webkit-details-marker { display: none; }
.wizard-permission-group summary > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.wizard-permission-group summary svg { width: 16px; color: #0f7182; }
.wizard-permission-group-count { margin-left: 2px; color: #8a969c; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.wizard-permission-group summary .button { width: auto; min-height: 28px; padding: 5px 8px; font-size: 10px; }
.wizard-permission-list { display: grid; gap: 1px; border-top: 1px solid #e2e9e7; padding: 4px 9px 8px; }
.wizard-permission-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; border-radius: 5px; padding: 8px 5px; cursor: pointer; }
.wizard-permission-row[hidden] { display: none; }
.wizard-permission-row:hover { background: #f1f7f7; }
.wizard-permission-row.is-inherited { border-left: 2px solid #168b78; padding-left: 3px; }
.wizard-permission-row.is-denied { background: #fff8ef; }
.wizard-permission-row input { width: auto; margin: 0; }
.wizard-permission-row > span { display: grid; gap: 2px; min-width: 0; }
.wizard-permission-row strong { color: #2c3f47; font-size: 11px; line-height: 1.25; }
.wizard-permission-row small { color: #87939a; font-size: 9.5px; }
.wizard-permission-row em { color: #0f7182; font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.wizard-permission-row.is-denied em { color: #a36a22; }
.wizard-active-check { margin: 15px 0 0; }
.user-wizard-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e2e9e7; background: #fbfcfc; padding: 13px 26px; }
.user-wizard-footer > div { display: flex; align-items: center; gap: 7px; }
.user-wizard-footer .button { width: auto; }
.wizard-step-label { margin-right: 5px; color: #7b8992; font-size: 11px; font-weight: 750; }
.user-wizard-footer button[disabled] { cursor: not-allowed; opacity: .45; }
.table-count { color: #71818a; font-size: 11px; font-weight: 750; }
.role-badge { display: inline-flex; border-radius: 99px; background: #eef8f7; padding: 5px 8px; color: #176b87; font-size: 11px; font-weight: 750; white-space: nowrap; }
[data-user-row][hidden] { display: none; }
.table-empty-state[hidden] { display: none; }
.table-empty-state { padding: 16px; text-align: center; }

@media (max-width: 900px) {
    .dashboard-utility-grid { grid-template-columns: 1fr; }
    .dashboard-widget-dialog-footer { flex-wrap: wrap; }
    .user-profile-cards, .wizard-permission-groups { grid-template-columns: 1fr; }
    .wizard-permission-summary { grid-template-columns: repeat(3, auto); }
    .wizard-permission-summary p { grid-column: 1 / -1; border-top: 1px solid #d6e7e8; padding-top: 8px; }
}
@media (max-width: 620px) {
    .user-wizard-header, .user-wizard-panel, .user-wizard-footer { padding-right: 15px; padding-left: 15px; }
    .user-wizard-header h2 { font-size: 20px; }
    .user-wizard-step { grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 9px 4px; text-align: center; }
    .user-wizard-step > span { grid-row: auto; }
    .user-wizard-step strong { font-size: 10px; }
    .user-wizard-step small { display: none; }
    .wizard-organization-heading { align-items: flex-start; flex-direction: column; }
    .wizard-account-summary { align-items: flex-start; flex-wrap: wrap; }
    .wizard-account-summary .badge { margin-left: 47px; }
    .wizard-permission-summary { gap: 8px; padding: 9px; }
    .wizard-permission-summary > div { padding-right: 8px; }
    .wizard-permission-summary strong { font-size: 16px; }
    .user-wizard-footer { align-items: stretch; flex-direction: column; }
    .user-wizard-footer > div { justify-content: flex-end; }
    .user-wizard-footer .button { min-width: 0; }
    .wizard-step-label { margin-right: auto; }
}

@media (max-width: 900px) {
    .profile-hero { align-items: stretch; flex-direction: column; gap: 16px; }
    .profile-hero-note { max-width: none; border-top: 1px solid #cfe2e3; border-left: 0; padding-top: 14px; padding-left: 0; }
    .profile-settings-grid { grid-template-columns: 1fr; }
    .profile-savebar { grid-column: auto; align-items: stretch; flex-direction: column; }
}

@media (max-width: 560px) {
    .profile-hero-identity { align-items: flex-start; gap: 12px; }
    .profile-hero .profile-avatar-large { width: 80px !important; height: 80px !important; max-width: 80px !important; max-height: 80px !important; flex-basis: 80px; }
    .profile-hero-user h2 { font-size: 21px; }
    .profile-definition-empty { grid-template-columns: auto minmax(0, 1fr); }
    .profile-definition-empty .button { grid-column: 2; }
    .error-page { min-height: calc(100vh - 146px); padding: 14px; }
    .error-panel { padding: 28px 18px; }
    .error-code { top: 12px; right: 14px; font-size: 42px; }
    .error-panel h2 { font-size: 23px; }
    .error-actions { align-items: stretch; flex-direction: column; }
    .error-actions .btn, .error-actions .button { justify-content: center; }
}

/* Normalize every shared surface that otherwise keeps the light-theme fallback. */
html[data-theme="night"] :is(
    .dashboard-widget-icon,
    .notification-card-icon,
    .report-icon,
    .module-hero-icon,
    .module-feature-icon,
    .process-icon,
    .action-icon,
    .asset-icon,
    .user-profile-card-icon,
    .profile-card-icon,
    .profile-empty-icon,
    .login-card-icon,
    .login-module-icon
),
html[data-theme="graphite"] :is(
    .dashboard-widget-icon,
    .notification-card-icon,
    .report-icon,
    .module-hero-icon,
    .module-feature-icon,
    .process-icon,
    .action-icon,
    .asset-icon,
    .user-profile-card-icon,
    .profile-card-icon,
    .profile-empty-icon,
    .login-card-icon,
    .login-module-icon
),
html[data-theme="emerald"] :is(
    .dashboard-widget-icon,
    .notification-card-icon,
    .report-icon,
    .module-hero-icon,
    .module-feature-icon,
    .process-icon,
    .action-icon,
    .asset-icon,
    .user-profile-card-icon,
    .profile-card-icon,
    .profile-empty-icon,
    .login-card-icon,
    .login-module-icon
) {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--primary) 16%, var(--surface-2));
    color: var(--primary);
}

html[data-theme="night"] :is(
    .task-meta span,
    .notification-channel-summary,
    .notification-matrix,
    .account-field-row,
    .stock-field-row,
    .permission-check-group,
    .definition-user-access,
    .modal-assignment-panel,
    .modal-assignment-grid fieldset,
    .platform-user-list,
    .selected-profile-summary,
    .wizard-info,
    .wizard-account-summary,
    .wizard-organization-panel,
    .wizard-permission-summary,
    .wizard-permission-group,
    .wizard-permission-diff,
    .wizard-profile-result
),
html[data-theme="graphite"] :is(
    .task-meta span,
    .notification-channel-summary,
    .notification-matrix,
    .account-field-row,
    .stock-field-row,
    .permission-check-group,
    .definition-user-access,
    .modal-assignment-panel,
    .modal-assignment-grid fieldset,
    .platform-user-list,
    .selected-profile-summary,
    .wizard-info,
    .wizard-account-summary,
    .wizard-organization-panel,
    .wizard-permission-summary,
    .wizard-permission-group,
    .wizard-permission-diff,
    .wizard-profile-result
),
html[data-theme="emerald"] :is(
    .task-meta span,
    .notification-channel-summary,
    .notification-matrix,
    .account-field-row,
    .stock-field-row,
    .permission-check-group,
    .definition-user-access,
    .modal-assignment-panel,
    .modal-assignment-grid fieldset,
    .platform-user-list,
    .selected-profile-summary,
    .wizard-info,
    .wizard-account-summary,
    .wizard-organization-panel,
    .wizard-permission-summary,
    .wizard-permission-group,
    .wizard-permission-diff,
    .wizard-profile-result
) {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

html[data-theme="night"] :is(
    .task-meta strong,
    .task-meta code,
    .account-field-row label,
    .account-field-row .check span,
    .notification-channel-summary strong,
    .notification-matrix-heading strong,
    .notification-rule .check span,
    .channel-pills .check span,
    .notification-rule-channels .check span,
    .user-profile-card strong,
    .wizard-profile-result strong,
    .wizard-account-summary strong,
    .wizard-permission-group summary,
    .wizard-permission-row strong,
    .wizard-organization-heading span,
    .permission-chip,
    .permission-option,
    .permission-modal,
    .definition-modal,
    .maintenance-modal
),
html[data-theme="graphite"] :is(
    .task-meta strong,
    .task-meta code,
    .account-field-row label,
    .account-field-row .check span,
    .notification-channel-summary strong,
    .notification-matrix-heading strong,
    .notification-rule .check span,
    .channel-pills .check span,
    .notification-rule-channels .check span,
    .user-profile-card strong,
    .wizard-profile-result strong,
    .wizard-account-summary strong,
    .wizard-permission-group summary,
    .wizard-permission-row strong,
    .wizard-organization-heading span,
    .permission-chip,
    .permission-option,
    .permission-modal,
    .definition-modal,
    .maintenance-modal
),
html[data-theme="emerald"] :is(
    .task-meta strong,
    .task-meta code,
    .account-field-row label,
    .account-field-row .check span,
    .notification-channel-summary strong,
    .notification-matrix-heading strong,
    .notification-rule .check span,
    .channel-pills .check span,
    .notification-rule-channels .check span,
    .user-profile-card strong,
    .wizard-profile-result strong,
    .wizard-account-summary strong,
    .wizard-permission-group summary,
    .wizard-permission-row strong,
    .wizard-organization-heading span,
    .permission-chip,
    .permission-option,
    .permission-modal,
    .definition-modal,
    .maintenance-modal
) {
    color: var(--text);
}

html[data-theme="night"] :is(
    .task-meta span,
    .notification-channel-summary > span,
    .notification-matrix-heading span,
    .notification-rule .check small,
    .user-profile-card small,
    .wizard-profile-result span,
    .wizard-account-summary small,
    .wizard-info,
    .wizard-permission-summary span,
    .wizard-permission-summary p,
    .wizard-permission-diff-empty,
    .wizard-permission-row small,
    .wizard-permission-group-count,
    .table-empty-state,
    .wizard-organization-heading small
),
html[data-theme="graphite"] :is(
    .task-meta span,
    .notification-channel-summary > span,
    .notification-matrix-heading span,
    .notification-rule .check small,
    .user-profile-card small,
    .wizard-profile-result span,
    .wizard-account-summary small,
    .wizard-info,
    .wizard-permission-summary span,
    .wizard-permission-summary p,
    .wizard-permission-diff-empty,
    .wizard-permission-row small,
    .wizard-permission-group-count,
    .table-empty-state,
    .wizard-organization-heading small
),
html[data-theme="emerald"] :is(
    .task-meta span,
    .notification-channel-summary > span,
    .notification-matrix-heading span,
    .notification-rule .check small,
    .user-profile-card small,
    .wizard-profile-result span,
    .wizard-account-summary small,
    .wizard-info,
    .wizard-permission-summary span,
    .wizard-permission-summary p,
    .wizard-permission-diff-empty,
    .wizard-permission-row small,
    .wizard-permission-group-count,
    .table-empty-state,
    .wizard-organization-heading small
) {
    color: var(--muted);
}

html[data-theme="night"] :is(
    dialog,
    .user-wizard-modal,
    .user-wizard-header,
    .user-wizard-step,
    .user-wizard-panel,
    .user-wizard-footer,
    .permission-modal,
    .definition-modal,
    .maintenance-modal,
    .crm-fullscreen-modal
),
html[data-theme="graphite"] :is(
    dialog,
    .user-wizard-modal,
    .user-wizard-header,
    .user-wizard-step,
    .user-wizard-panel,
    .user-wizard-footer,
    .permission-modal,
    .definition-modal,
    .maintenance-modal,
    .crm-fullscreen-modal
),
html[data-theme="emerald"] :is(
    dialog,
    .user-wizard-modal,
    .user-wizard-header,
    .user-wizard-step,
    .user-wizard-panel,
    .user-wizard-footer,
    .permission-modal,
    .definition-modal,
    .maintenance-modal,
    .crm-fullscreen-modal
) {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

html[data-theme="night"] :is(
    .user-wizard-stepper,
    .wizard-permission-list,
    .user-wizard-progress,
    .permission-modal-header,
    .definition-modal-actions,
    .maintenance-modal > form > footer
),
html[data-theme="graphite"] :is(
    .user-wizard-stepper,
    .wizard-permission-list,
    .user-wizard-progress,
    .permission-modal-header,
    .definition-modal-actions,
    .maintenance-modal > form > footer
),
html[data-theme="emerald"] :is(
    .user-wizard-stepper,
    .wizard-permission-list,
    .user-wizard-progress,
    .permission-modal-header,
    .definition-modal-actions,
    .maintenance-modal > form > footer
) {
    border-color: var(--line);
    background: var(--surface-2);
}

html[data-theme="night"] :is(.user-profile-card, .permission-chip),
html[data-theme="graphite"] :is(.user-profile-card, .permission-chip),
html[data-theme="emerald"] :is(.user-profile-card, .permission-chip) {
    border-color: var(--line);
    background: var(--surface-2);
}

html[data-theme="night"] .user-profile-card:hover,
html[data-theme="night"] .user-profile-card.is-selected,
html[data-theme="graphite"] .user-profile-card:hover,
html[data-theme="graphite"] .user-profile-card.is-selected,
html[data-theme="emerald"] .user-profile-card:hover,
html[data-theme="emerald"] .user-profile-card.is-selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
    box-shadow: none;
}

html[data-theme="night"] :is(.wizard-profile-chips .permission-chip, .selected-profile-summary .permission-chip),
html[data-theme="graphite"] :is(.wizard-profile-chips .permission-chip, .selected-profile-summary .permission-chip),
html[data-theme="emerald"] :is(.wizard-profile-chips .permission-chip, .selected-profile-summary .permission-chip) {
    border-color: var(--line);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
}

html[data-theme="night"] .permission-chip.is-extra,
html[data-theme="graphite"] .permission-chip.is-extra,
html[data-theme="emerald"] .permission-chip.is-extra {
    border-color: color-mix(in srgb, #16a34a 45%, var(--line));
    background: color-mix(in srgb, #16a34a 18%, var(--surface-2));
    color: color-mix(in srgb, #16a34a 55%, var(--text));
}

html[data-theme="night"] .permission-chip.is-removed,
html[data-theme="graphite"] .permission-chip.is-removed,
html[data-theme="emerald"] .permission-chip.is-removed {
    border-color: color-mix(in srgb, #d97706 45%, var(--line));
    background: color-mix(in srgb, #d97706 18%, var(--surface-2));
    color: color-mix(in srgb, #d97706 55%, var(--text));
}

html[data-theme="night"] :is(.notification-group h3, .notification-rule .check a, .permission-source),
html[data-theme="graphite"] :is(.notification-group h3, .notification-rule .check a, .permission-source),
html[data-theme="emerald"] :is(.notification-group h3, .notification-rule .check a, .permission-source) { color: var(--primary); }

html[data-theme="night"] :is(.notification-rule, .wizard-permission-list, .permission-modal-header),
html[data-theme="graphite"] :is(.notification-rule, .wizard-permission-list, .permission-modal-header),
html[data-theme="emerald"] :is(.notification-rule, .wizard-permission-list, .permission-modal-header) { border-color: var(--line); }

/* Dark themes need to recolor component-local light fallbacks as well as shared cards. */
html[data-theme="night"] :is(
    .card,
    .stat-card,
    .module-feature-card,
    .dashboard-widget-card,
    .crm-filter-card,
    .crm-record-card,
    .crm-create-card,
    .crm-page-hero,
    .crm-sales-layout > *,
    .choice-row,
    .profile-guide-grid > div,
    .definition-form-note,
    .organization-access-note,
    .permission-group-toggle,
    .maintenance-hero,
    .maintenance-kpi,
    .maintenance-board-section,
    .maintenance-list-section,
    .maintenance-side-panel,
    .maintenance-assets-section,
    .maintenance-lane,
    .maintenance-ticket,
    .maintenance-asset-row,
    .maintenance-plan-row,
    .maintenance-health-row
),
html[data-theme="graphite"] :is(
    .card,
    .stat-card,
    .module-feature-card,
    .dashboard-widget-card,
    .crm-filter-card,
    .crm-record-card,
    .crm-create-card,
    .crm-page-hero,
    .crm-sales-layout > *,
    .choice-row,
    .profile-guide-grid > div,
    .definition-form-note,
    .organization-access-note,
    .permission-group-toggle,
    .maintenance-hero,
    .maintenance-kpi,
    .maintenance-board-section,
    .maintenance-list-section,
    .maintenance-side-panel,
    .maintenance-assets-section,
    .maintenance-lane,
    .maintenance-ticket,
    .maintenance-asset-row,
    .maintenance-plan-row,
    .maintenance-health-row
),
html[data-theme="emerald"] :is(
    .card,
    .stat-card,
    .module-feature-card,
    .dashboard-widget-card,
    .crm-filter-card,
    .crm-record-card,
    .crm-create-card,
    .crm-page-hero,
    .crm-sales-layout > *,
    .choice-row,
    .profile-guide-grid > div,
    .definition-form-note,
    .organization-access-note,
    .permission-group-toggle,
    .maintenance-hero,
    .maintenance-kpi,
    .maintenance-board-section,
    .maintenance-list-section,
    .maintenance-side-panel,
    .maintenance-assets-section,
    .maintenance-lane,
    .maintenance-ticket,
    .maintenance-asset-row,
    .maintenance-plan-row,
    .maintenance-health-row
) {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

html[data-theme="night"] :is(
    .module-feature-card:hover,
    .module-feature-card.active,
    .choice-row:hover,
    .permission-group-toggle:hover
),
html[data-theme="graphite"] :is(
    .module-feature-card:hover,
    .module-feature-card.active,
    .choice-row:hover,
    .permission-group-toggle:hover
),
html[data-theme="emerald"] :is(
    .module-feature-card:hover,
    .module-feature-card.active,
    .choice-row:hover,
    .permission-group-toggle:hover
) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

html[data-theme="night"] :is(
    .card h1, .card h2, .card h3, .card strong,
    .stat-card strong, .stat-card span,
    .module-feature-card strong, .crm-page-hero h2,
    .crm-record-card h2, .crm-create-card h2,
    .maintenance-hero h2, .maintenance-section-heading h2,
    .maintenance-kpi strong, .maintenance-kpi small,
    .maintenance-lane strong, .maintenance-ticket h3,
    .maintenance-asset-row strong, .maintenance-plan-row strong,
    .maintenance-health-row strong, .choice-row strong,
    .profile-guide-grid strong, .permission-group-toggle strong
),
html[data-theme="graphite"] :is(
    .card h1, .card h2, .card h3, .card strong,
    .stat-card strong, .stat-card span,
    .module-feature-card strong, .crm-page-hero h2,
    .crm-record-card h2, .crm-create-card h2,
    .maintenance-hero h2, .maintenance-section-heading h2,
    .maintenance-kpi strong, .maintenance-kpi small,
    .maintenance-lane strong, .maintenance-ticket h3,
    .maintenance-asset-row strong, .maintenance-plan-row strong,
    .maintenance-health-row strong, .choice-row strong,
    .profile-guide-grid strong, .permission-group-toggle strong
),
html[data-theme="emerald"] :is(
    .card h1, .card h2, .card h3, .card strong,
    .stat-card strong, .stat-card span,
    .module-feature-card strong, .crm-page-hero h2,
    .crm-record-card h2, .crm-create-card h2,
    .maintenance-hero h2, .maintenance-section-heading h2,
    .maintenance-kpi strong, .maintenance-kpi small,
    .maintenance-lane strong, .maintenance-ticket h3,
    .maintenance-asset-row strong, .maintenance-plan-row strong,
    .maintenance-health-row strong, .choice-row strong,
    .profile-guide-grid strong, .permission-group-toggle strong
) { color: var(--text); }

html[data-theme="night"] :is(
    .card p, .card small, .card .muted,
    .module-feature-card small, .crm-page-hero p,
    .maintenance-hero p, .maintenance-section-heading p,
    .maintenance-kpi span, .maintenance-ticket p,
    .maintenance-ticket footer, .maintenance-asset-row span,
    .maintenance-plan-row span, .maintenance-health-row span,
    .choice-row small, .profile-guide-grid span,
    .profile-guide-grid small, .definition-form-note,
    .organization-access-note
),
html[data-theme="graphite"] :is(
    .card p, .card small, .card .muted,
    .module-feature-card small, .crm-page-hero p,
    .maintenance-hero p, .maintenance-section-heading p,
    .maintenance-kpi span, .maintenance-ticket p,
    .maintenance-ticket footer, .maintenance-asset-row span,
    .maintenance-plan-row span, .maintenance-health-row span,
    .choice-row small, .profile-guide-grid span,
    .profile-guide-grid small, .definition-form-note,
    .organization-access-note
),
html[data-theme="emerald"] :is(
    .card p, .card small, .card .muted,
    .module-feature-card small, .crm-page-hero p,
    .maintenance-hero p, .maintenance-section-heading p,
    .maintenance-kpi span, .maintenance-ticket p,
    .maintenance-ticket footer, .maintenance-asset-row span,
    .maintenance-plan-row span, .maintenance-health-row span,
    .choice-row small, .profile-guide-grid span,
    .profile-guide-grid small, .definition-form-note,
    .organization-access-note
) { color: var(--muted); }

html[data-theme="night"] :is(
    .module-feature-card .module-feature-icon,
    .maintenance-kpi-icon,
    .lane-icon,
    .asset-icon,
    .maintenance-empty,
    .maintenance-lane-empty,
    .empty-state,
    .crm-dashboard-kpi-icon
),
html[data-theme="graphite"] :is(
    .module-feature-card .module-feature-icon,
    .maintenance-kpi-icon,
    .lane-icon,
    .asset-icon,
    .maintenance-empty,
    .maintenance-lane-empty,
    .empty-state,
    .crm-dashboard-kpi-icon
),
html[data-theme="emerald"] :is(
    .module-feature-card .module-feature-icon,
    .maintenance-kpi-icon,
    .lane-icon,
    .asset-icon,
    .maintenance-empty,
    .maintenance-lane-empty,
    .empty-state,
    .crm-dashboard-kpi-icon
) {
    background: var(--surface-2);
    color: var(--primary);
}

html[data-theme="night"] :is(
    .maintenance-board,
    .maintenance-content-grid,
    .maintenance-asset-grid,
    .maintenance-table-wrap,
    .maintenance-table,
    .maintenance-table thead,
    .maintenance-table tbody tr,
    .crm-dashboard-panel,
    .crm-dashboard-table-wrap
),
html[data-theme="graphite"] :is(
    .maintenance-board,
    .maintenance-content-grid,
    .maintenance-asset-grid,
    .maintenance-table-wrap,
    .maintenance-table,
    .maintenance-table thead,
    .maintenance-table tbody tr,
    .crm-dashboard-panel,
    .crm-dashboard-table-wrap
),
html[data-theme="emerald"] :is(
    .maintenance-board,
    .maintenance-content-grid,
    .maintenance-asset-grid,
    .maintenance-table-wrap,
    .maintenance-table,
    .maintenance-table thead,
    .maintenance-table tbody tr,
    .crm-dashboard-panel,
    .crm-dashboard-table-wrap
) {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

html[data-theme="night"] :is(.maintenance-table th, .maintenance-table td, .crm-dashboard-table th, .crm-dashboard-table td),
html[data-theme="graphite"] :is(.maintenance-table th, .maintenance-table td, .crm-dashboard-table th, .crm-dashboard-table td),
html[data-theme="emerald"] :is(.maintenance-table th, .maintenance-table td, .crm-dashboard-table th, .crm-dashboard-table td) {
    border-color: var(--line);
    color: var(--text);
}

html[data-theme="night"] :is(.maintenance-lane header, .maintenance-ticket-top, .maintenance-ticket footer),
html[data-theme="graphite"] :is(.maintenance-lane header, .maintenance-ticket-top, .maintenance-ticket footer),
html[data-theme="emerald"] :is(.maintenance-lane header, .maintenance-ticket-top, .maintenance-ticket footer) { border-color: var(--line); }

html[data-theme="night"] .maintenance-hero,
html[data-theme="graphite"] .maintenance-hero,
html[data-theme="emerald"] .maintenance-hero { background: linear-gradient(135deg, var(--surface), var(--surface-2)); }

html[data-theme="night"] :is(.crm-filter-search, .crm-dashboard-panel input, .crm-dashboard-panel select),
html[data-theme="graphite"] :is(.crm-filter-search, .crm-dashboard-panel input, .crm-dashboard-panel select),
html[data-theme="emerald"] :is(.crm-filter-search, .crm-dashboard-panel input, .crm-dashboard-panel select) {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

.crm-dashboard-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; border: 1px solid #cfe5eb; border-radius: 8px; background: linear-gradient(135deg, #ffffff, #edf8fa); padding: 24px; }
.crm-dashboard-hero h2 { margin: 3px 0 6px; color: var(--primary-dark); font-size: clamp(28px, 3vw, 42px); }
.crm-dashboard-hero p:not(.eyebrow) { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.55; }
.crm-dashboard-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.crm-dashboard-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.crm-dashboard-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; min-width: 0; border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: 8px; background: var(--surface); padding: 14px; }
.crm-dashboard-kpi.accent-teal { border-top-color: #159a8a; }
.crm-dashboard-kpi.accent-amber { border-top-color: #c98312; }
.crm-dashboard-kpi.accent-violet { border-top-color: #8065c8; }
.crm-dashboard-kpi.accent-red { border-top-color: #c84e4e; }
.crm-dashboard-kpi-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary); }
.crm-dashboard-kpi-icon svg { width: 19px; height: 19px; }
.crm-dashboard-kpi span, .crm-dashboard-kpi small { display: block; color: var(--muted); }
.crm-dashboard-kpi strong { display: block; margin: 2px 0; color: var(--text); font-size: 28px; line-height: 1; }
.crm-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 16px; margin-bottom: 16px; }
.crm-dashboard-panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 20px; }
.crm-dashboard-panel .section-heading { margin-bottom: 16px; }
.crm-dashboard-panel .section-heading h2 { margin: 2px 0 4px; }
.crm-stage-list { display: grid; gap: 12px; }
.crm-stage-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(120px, 2fr) auto; align-items: center; gap: 12px; }
.crm-stage-row > span:first-child { font-weight: 750; }
.crm-stage-bar { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.crm-stage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.crm-stage-row small { color: var(--muted); font-weight: 750; }
.crm-activity-list { display: grid; gap: 0; }
.crm-activity-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 11px 0; }
.crm-activity-row:last-child { border-bottom: 0; }
.crm-activity-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--primary); }
.crm-activity-row strong, .crm-activity-row small { display: block; }
.crm-activity-row small { margin-top: 3px; color: var(--muted); }
.crm-activity-row time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.crm-dashboard-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.crm-dashboard-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.crm-dashboard-table th, .crm-dashboard-table td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
.crm-dashboard-table th { background: var(--surface-2); color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.crm-dashboard-table tbody tr:last-child td { border-bottom: 0; }
.crm-dashboard-table td small { display: block; margin-top: 3px; color: var(--muted); }
/* Para birimi bazlı özet şeridi: fırsat ve teklif tutarları farklı para birimlerinde
   tutulduğu için tek bir toplam gösterilemez. */
.crm-money-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.crm-money-group { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 14px 16px; }
.crm-money-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.crm-money-empty { color: var(--muted); font-size: 13px; }
.kpi-currency-chip.is-positive { border-color: rgba(6, 118, 71, .35); }
.kpi-currency-chip.is-positive strong { color: var(--success); }

/* Huninin kapanış özeti: kazanılan/kaybedilen ve kazanma oranı. */
.crm-outcome-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.crm-outcome { display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); padding: 10px 12px; text-align: center; }
.crm-outcome small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.crm-outcome strong { display: block; margin-top: 4px; font-size: 20px; font-variant-numeric: tabular-nums; }
.crm-outcome.is-won strong { color: var(--success); }
.crm-outcome.is-lost strong { color: var(--danger); }
.crm-outcome.is-rate strong { color: var(--primary); }
a.crm-outcome:hover { border-color: var(--primary); }

/* Süresi geçmiş kayıtlar; sol kenar rengi aciliyeti gösterir. */
.crm-attention-row { border-left: 3px solid transparent; padding-left: 10px; }
.crm-attention-row.tone-red { border-left-color: var(--danger); }
.crm-attention-row.tone-amber { border-left-color: #c98312; }
.crm-attention-row:hover { background: var(--surface-2); }
.crm-attention-more { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.crm-dashboard-kpi.is-alert { border-top-width: 3px; background: linear-gradient(180deg, rgba(200, 78, 78, .07), transparent 60%); }

@media (max-width: 1120px) { .crm-dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .crm-dashboard-hero { flex-direction: column; } .crm-dashboard-hero-actions { justify-content: flex-start; } .crm-dashboard-grid { grid-template-columns: 1fr; } .crm-money-row { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .crm-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-dashboard-kpi { grid-template-columns: 1fr; } .crm-stage-row { grid-template-columns: 1fr auto; } .crm-stage-bar { grid-column: 1 / -1; grid-row: 2; } .crm-outcome-row { grid-template-columns: 1fr; } }

html[data-theme="night"] .crm-dashboard-hero,
html[data-theme="graphite"] .crm-dashboard-hero,
html[data-theme="emerald"] .crm-dashboard-hero {
    border-color: var(--line);
    background: linear-gradient(135deg, var(--surface), var(--surface-2));
}

html[data-theme="night"] .crm-dashboard-hero h2,
html[data-theme="graphite"] .crm-dashboard-hero h2,
html[data-theme="emerald"] .crm-dashboard-hero h2,
html[data-theme="night"] .crm-dashboard-kpi strong,
html[data-theme="graphite"] .crm-dashboard-kpi strong,
html[data-theme="emerald"] .crm-dashboard-kpi strong,
html[data-theme="night"] .crm-dashboard-kpi em,
html[data-theme="graphite"] .crm-dashboard-kpi em,
html[data-theme="emerald"] .crm-dashboard-kpi em,
html[data-theme="night"] .crm-dashboard-panel h2,
html[data-theme="graphite"] .crm-dashboard-panel h2,
html[data-theme="emerald"] .crm-dashboard-panel h2,
html[data-theme="night"] .crm-stage-row,
html[data-theme="graphite"] .crm-stage-row,
html[data-theme="emerald"] .crm-stage-row,
html[data-theme="night"] .crm-activity-row,
html[data-theme="graphite"] .crm-activity-row,
html[data-theme="emerald"] .crm-activity-row {
    color: var(--text);
}

html[data-theme="night"] :is(.crm-dashboard-hero p:not(.eyebrow), .crm-dashboard-kpi span, .crm-dashboard-kpi small, .crm-dashboard-kpi em, .crm-dashboard-panel .muted),
html[data-theme="graphite"] :is(.crm-dashboard-hero p:not(.eyebrow), .crm-dashboard-kpi span, .crm-dashboard-kpi small, .crm-dashboard-kpi em, .crm-dashboard-panel .muted),
html[data-theme="emerald"] :is(.crm-dashboard-hero p:not(.eyebrow), .crm-dashboard-kpi span, .crm-dashboard-kpi small, .crm-dashboard-kpi em, .crm-dashboard-panel .muted) {
    color: var(--muted);
}

html[data-theme="night"] .crm-dashboard-kpi-icon,
html[data-theme="graphite"] .crm-dashboard-kpi-icon,
html[data-theme="emerald"] .crm-dashboard-kpi-icon {
    background: var(--surface-2);
    color: var(--primary);
}

/* Final CRM contrast and wrapping pass. */
.crm-stage-row {
    grid-template-columns: minmax(0, 1.05fr) minmax(96px, 1fr) auto;
    gap: 16px;
}

.crm-stage-label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-stage-label b,
.crm-stage-label small,
.crm-stage-row > strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .crm-stage-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crm-stage-row .crm-stage-bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

html[data-theme="night"] :is(
    .agenda-side,
    .calendar-entry-picker,
    .crm-fullscreen-modal .crm-modal-panel,
    .crm-kpi,
    .crm-record-card,
    .crm-page-hero,
    .crm-create-card,
    .quote-items-wrap
),
html[data-theme="graphite"] :is(
    .agenda-side,
    .calendar-entry-picker,
    .crm-fullscreen-modal .crm-modal-panel,
    .crm-kpi,
    .crm-record-card,
    .crm-page-hero,
    .crm-create-card,
    .quote-items-wrap
),
html[data-theme="emerald"] :is(
    .agenda-side,
    .calendar-entry-picker,
    .crm-fullscreen-modal .crm-modal-panel,
    .crm-kpi,
    .crm-record-card,
    .crm-page-hero,
    .crm-create-card,
    .quote-items-wrap
) {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

html[data-theme="night"] :is(.calendar-entry-choice, .agenda-empty),
html[data-theme="graphite"] :is(.calendar-entry-choice, .agenda-empty),
html[data-theme="emerald"] :is(.calendar-entry-choice, .agenda-empty) {
    border-color: var(--line) !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

html[data-theme="night"] .calendar-entry-choice:hover,
html[data-theme="graphite"] .calendar-entry-choice:hover,
html[data-theme="emerald"] .calendar-entry-choice:hover {
    background: var(--surface-3, var(--surface-2)) !important;
}

html[data-theme="night"] .calendar-entry-choice > span,
html[data-theme="graphite"] .calendar-entry-choice > span,
html[data-theme="emerald"] .calendar-entry-choice > span {
    background: var(--surface-3, var(--surface-2)) !important;
    color: var(--primary) !important;
}

html[data-theme="night"] :is(
    .calendar-entry-picker input,
    .calendar-entry-picker select,
    .calendar-entry-picker textarea,
    .crm-modal-panel input,
    .crm-modal-panel select,
    .crm-modal-panel textarea
),
html[data-theme="graphite"] :is(
    .calendar-entry-picker input,
    .calendar-entry-picker select,
    .calendar-entry-picker textarea,
    .crm-modal-panel input,
    .crm-modal-panel select,
    .crm-modal-panel textarea
),
html[data-theme="emerald"] :is(
    .calendar-entry-picker input,
    .calendar-entry-picker select,
    .calendar-entry-picker textarea,
    .crm-modal-panel input,
    .crm-modal-panel select,
    .crm-modal-panel textarea
) {
    border-color: var(--line) !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

html[data-theme="night"] :is(.calendar-entry-picker select option, .crm-modal-panel select option),
html[data-theme="graphite"] :is(.calendar-entry-picker select option, .crm-modal-panel select option),
html[data-theme="emerald"] :is(.calendar-entry-picker select option, .crm-modal-panel select option) {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

html[data-theme="night"] .crm-modal-header,
html[data-theme="graphite"] .crm-modal-header,
html[data-theme="emerald"] .crm-modal-header {
    border-color: var(--line) !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

html[data-theme="night"] :is(.calendar-entry-picker::backdrop, .crm-fullscreen-modal::backdrop),
html[data-theme="graphite"] :is(.calendar-entry-picker::backdrop, .crm-fullscreen-modal::backdrop),
html[data-theme="emerald"] :is(.calendar-entry-picker::backdrop, .crm-fullscreen-modal::backdrop) {
    background: rgba(2, 8, 12, .78) !important;
}

html[data-theme="night"] :is(
    .calendar-entry-picker .muted,
    .calendar-entry-choice small,
    .agenda-side .muted,
    .crm-modal-panel .muted,
    .crm-kpi span,
    .crm-kpi small
),
html[data-theme="graphite"] :is(
    .calendar-entry-picker .muted,
    .calendar-entry-choice small,
    .agenda-side .muted,
    .crm-modal-panel .muted,
    .crm-kpi span,
    .crm-kpi small
),
html[data-theme="emerald"] :is(
    .calendar-entry-picker .muted,
    .calendar-entry-choice small,
    .agenda-side .muted,
    .crm-modal-panel .muted,
    .crm-kpi span,
    .crm-kpi small
) {
    color: var(--muted) !important;
}

html[data-theme="night"] .crm-kpi strong,
html[data-theme="graphite"] .crm-kpi strong,
html[data-theme="emerald"] .crm-kpi strong {
    color: var(--text) !important;
}

html[data-theme="night"] .quote-totals,
html[data-theme="graphite"] .quote-totals,
html[data-theme="emerald"] .quote-totals {
    border-color: var(--line) !important;
    background: var(--line) !important;
}

html[data-theme="night"] .quote-totals > div,
html[data-theme="graphite"] .quote-totals > div,
html[data-theme="emerald"] .quote-totals > div {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

html[data-theme="night"] .quote-totals .quote-grand-total,
html[data-theme="graphite"] .quote-totals .quote-grand-total,
html[data-theme="emerald"] .quote-totals .quote-grand-total {
    background: var(--surface-3, var(--surface-2)) !important;
}

html[data-theme="night"] .quote-totals strong,
html[data-theme="graphite"] .quote-totals strong,
html[data-theme="emerald"] .quote-totals strong {
    color: var(--primary) !important;
}

/* Gönderim sırasında buton: tıklanabilir görünmesin, ama yerini koruyup zıplama yaratmasın. */
.button.is-busy, button.is-busy {
    opacity: .6;
    cursor: progress;
    pointer-events: none;
}
form[aria-busy="true"] { cursor: progress; }

/* --- Rapor karar destek öğeleri --- */
.report-delta { font-weight: 700; }
.report-delta.is-up { color: #bd4a4a; }      /* artış: bakımda kötü, bağlama göre sınıf seçilir */
.report-delta.is-down { color: #3e8150; }
.report-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    border-radius: 7px;
    padding: 9px 11px;
    font-size: 12px;
}
.report-note svg { width: 15px; height: 15px; flex: 0 0 15px; }
.report-note.is-warning { background: #fff7e8; color: #8a5a10; }
.report-bar {
    display: block;
    height: 6px;
    min-width: 60px;
    border-radius: 3px;
    background: #eef2f4;
    overflow: hidden;
}
.report-bar > span { display: block; height: 100%; border-radius: 3px; background: #4a7fbd; }

/* Mal kabul: teslim formu listeyi terk etmeden satır altında açılır. */
.receipt-filter-actions { display: flex; align-items: end; gap: 8px; }
.receipt-action-cell { white-space: nowrap; text-align: right; }
.receipt-form-row > td { background: var(--bg); padding: 14px 16px; border-bottom: 1px solid var(--line); }
.receipt-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.receipt-form .wide-field { grid-column: span 2; }
.receipt-form-actions { display: flex; align-items: end; gap: 8px; grid-column: span 2; }
@media (max-width: 900px) { .receipt-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Talep detayı: uzun tek akışı bölümlere ayıran sekmeler. */
.pr-tabs { margin-bottom: 16px; }
.pr-tabs .tab { cursor: pointer; font: inherit; font-weight: 800; }
.pr-tab-panel > .card:first-child { margin-top: 0 !important; }
.users-heading-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Dar özet kartlarında tablo: 790px taban genişlik yatay kaydırmaya yol açıyordu. */
.maintenance-table.is-compact { min-width: 0; }
.maintenance-table.is-compact td, .maintenance-table.is-compact th { padding-left: 0; }
.detail-report-count { margin: 0 0 8px; font-size: 12px; font-weight: 700; }

/* Durum rozeti. Raporlarda ve masraf listesinde kullanılıyordu ama hiç tanımlanmamıştı:
   rozetler düz metin olarak çıkıyor, gecikme/uyarı görsel olarak ayrışmıyordu. */
.doc-status { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; background: #eef2f6; color: #445; font-size: 11px; font-weight: 800; white-space: nowrap; }
.doc-status.is-unpaid, .doc-status.is-rejected { background: #fff0f0; color: #b3403f; }
.doc-status.is-partially_paid, .doc-status.is-pending, .doc-status.is-returned { background: #fff7e8; color: #8a5a10; }
.doc-status.is-approved { background: #eaf4ff; color: #23608f; }
.doc-status.is-paid { background: #eaf8f5; color: #10736c; }
.doc-status.is-blocked { background: #f4eeff; color: #5c46a3; }
.doc-status.is-draft { background: #eef2f6; color: #5b6875; }
html[data-theme="night"] .doc-status { background: #22323b; color: #c6d4da; }

.expense-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.expense-receipt-thumbnail { display: grid; width: 46px; height: 38px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.expense-receipt-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.expense-modal .crm-modal-panel { width: min(1180px, calc(100vw - 32px)); }
.expense-modal-form { gap: 16px; }
.expense-modal-form > label { min-width: 0; }
.expense-modal-form textarea { min-height: 128px; resize: vertical; }
.expense-receipt-field { display: grid; gap: 7px; border: 1px dashed #b7d5da; border-radius: 8px; padding: 14px; background: #f8fcfc; }
.expense-receipt-field input[type="file"] { padding: 8px; background: #fff; }
.expense-ocr { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: hidden; border: 1px solid #b7d5da; border-radius: 8px; padding: 13px 14px; background: #f3fafb; transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease; }
.expense-ocr[hidden], .expense-ocr-result[hidden] { display: none; }
.expense-ocr > div, .expense-ocr > .button { position: relative; z-index: 1; }
.expense-ocr > div { display: grid; gap: 3px; min-width: 0; }
.expense-ocr .eyebrow { margin: 0; }
.expense-ocr strong { color: var(--text); font-size: 14px; }
.expense-ocr .muted { font-size: 12px; }
.expense-ocr .button { flex: 0 0 auto; }
.expense-ocr::after { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: #0f8f98; content: ''; opacity: 0; pointer-events: none; transform: translateX(-100%); }
.expense-ocr.is-scanning { border-color: #4aaeb5; box-shadow: 0 0 0 3px rgb(15 143 152 / 12%); background: #f7fcfc; }
.expense-ocr.is-scanning::after { opacity: 1; animation: expense-ocr-scan 1.25s ease-in-out infinite; }
.expense-ocr.is-scanning [data-expense-ocr-scan] svg { animation: expense-ocr-icon 1.1s linear infinite; }
.expense-ocr.is-complete { border-color: #50aa88; box-shadow: 0 0 0 3px rgb(50 150 114 / 11%); background: #f4fbf8; }
.expense-ocr-result { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.expense-ocr-result > strong { color: var(--text); }
.expense-ocr-result .badge { animation: expense-ocr-badge .3s ease both; font-size: 11px; }
@keyframes expense-ocr-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes expense-ocr-icon { to { transform: rotate(360deg); } }
@keyframes expense-ocr-badge { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .expense-ocr, .expense-ocr-result .badge { transition: none; animation: none; }
    .expense-ocr.is-scanning::after, .expense-ocr.is-scanning [data-expense-ocr-scan] svg { animation: none; }
}
.expense-upload-preview { display: grid; grid-template-columns: minmax(180px, 360px) minmax(0, 1fr); align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--surface-2); }
.expense-upload-preview[hidden] { display: none; }
.expense-upload-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; border-radius: 5px; background: #fff; }
.expense-upload-preview > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.expense-upload-preview > svg { width: 28px; height: 28px; color: var(--primary-dark); }
.expense-upload-preview.is-existing a { display: block; }
.expense-form-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.expense-receipt-preview { display: grid; gap: 8px; width: min(100%, 360px); color: inherit; }
.expense-receipt-preview img { width: 100%; max-height: 280px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.expense-receipt-preview span { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-dark); font-size: 12px; }
.expense-receipt-preview span svg { width: 14px; height: 14px; }
.expense-preview-modal .crm-modal-panel { width: min(1060px, calc(100vw - 32px)); }
.expense-preview-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 24px; align-items: start; }
.expense-preview-record { min-width: 0; }
.expense-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.expense-preview-heading > strong { color: var(--primary-dark); font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.expense-preview-facts, .approval-review-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.expense-preview-facts > div, .approval-review-facts > div { display: grid; gap: 5px; min-height: 78px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px 14px; }
.expense-preview-facts > .is-wide, .approval-review-facts > .is-wide { grid-column: 1 / -1; }
.expense-preview-facts dt, .approval-review-facts dt { color: var(--muted); font-size: 11px; font-weight: 800; }
.expense-preview-facts dd, .approval-review-facts dd { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.expense-preview-document { display: grid; gap: 14px; min-width: 0; border-left: 1px solid var(--line); padding-left: 24px; }
.expense-preview-document > div:first-child p, .approval-document-section > div:first-child p { margin: 4px 0 0; font-size: 12px; }
.expense-preview-document .expense-receipt-preview { width: 100%; }
.expense-preview-document-empty, .approval-document-empty { display: grid; place-items: center; gap: 7px; min-height: 220px; border: 1px dashed #b7d5da; border-radius: 8px; padding: 20px; background: var(--surface-2); color: var(--muted); text-align: center; }
.expense-preview-document-empty svg, .approval-document-empty svg { width: 28px; height: 28px; color: var(--primary-dark); }
.expense-preview-document-empty strong { color: var(--text); }
.expense-preview-document-empty span { font-size: 12px; }
.expense-preview-actions { display: flex; justify-content: flex-end; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 700px) {
    .expense-modal .crm-modal-panel, .expense-preview-modal .crm-modal-panel { width: 100%; min-height: 100vh; margin: 0; border-radius: 0; padding: 16px; }
    .expense-modal .crm-modal-header, .expense-preview-modal .crm-modal-header { margin: -16px -16px 16px; padding: 16px; }
    .expense-upload-preview { grid-template-columns: 1fr; }
    .expense-upload-preview img { max-height: 220px; }
    .expense-ocr { align-items: stretch; flex-direction: column; }
    .expense-ocr .button { width: 100%; }
    .expense-form-actions { align-items: stretch; flex-direction: column-reverse; }
    .expense-form-actions .button { width: 100%; }
    .expense-preview-layout { grid-template-columns: 1fr; gap: 20px; }
    .expense-preview-document { border-top: 1px solid var(--line); border-left: 0; padding-top: 20px; padding-left: 0; }
}

/* Onay kutusu: karar öncesi kaydın içeriği modalda görülür. */
.approval-main { min-width: 0; }
.approval-facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); }
.approval-facts strong { color: #172534; }
.approval-review-modal .crm-modal-panel { width: min(1100px, calc(100vw - 32px)); }
.approval-review-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr); gap: 26px; align-items: start; }
.approval-review-record { min-width: 0; }
.approval-review-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.approval-review-status .eyebrow { margin: 0; }
.approval-review-status p { width: 100%; margin: 0; font-size: 12px; }
.approval-document-section { display: grid; gap: 12px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.approval-document-section .expense-receipt-preview { width: min(100%, 440px); }
.approval-items-table { margin-top: 20px; }
.approval-review-decision { display: grid; gap: 18px; min-width: 0; border-left: 1px solid var(--line); padding-left: 26px; }
.approval-review-decision h3 { margin: 3px 0 5px; font-size: 18px; }
.approval-review-decision p { margin: 0; font-size: 12px; line-height: 1.5; }
.approval-decision-form { display: grid; gap: 10px; }
.approval-decision-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 800; }
.approval-decision-form textarea { min-height: 120px; resize: vertical; }
.approval-decision-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
    .approval-review-modal .crm-modal-panel { width: 100%; min-height: 100vh; margin: 0; border-radius: 0; padding: 16px; }
    .approval-review-modal .crm-modal-header { margin: -16px -16px 16px; padding: 16px; }
    .approval-review-layout { grid-template-columns: 1fr; gap: 20px; }
    .approval-review-decision { border-top: 1px solid var(--line); border-left: 0; padding-top: 20px; padding-left: 0; }
    .approval-review-facts, .expense-preview-facts { grid-template-columns: 1fr; }
    .approval-review-facts > .is-wide, .expense-preview-facts > .is-wide { grid-column: auto; }
    .approval-decision-buttons { align-items: stretch; flex-direction: column-reverse; }
    .approval-decision-buttons .button { width: 100%; }
}

/* CRM teklif satırı: birincil eylem hücrede, kalanlar altta açılan panelde. */
.quote-actions-cell { display: flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.quote-detail-row > td { background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px 16px; }
.quote-detail-panel { display: grid; gap: 12px; }
.quote-detail-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quote-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Eylem grupları: düzenleme, karar ve arşiv/silme ayrı kümelerde. Hepsi tek sırada yan
   yanayken hangisinin geri alınamaz olduğu görünmüyordu. */
.quote-action-groups { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.quote-action-group { display: grid; gap: 6px; }
.quote-action-group + .quote-action-group { padding-left: 18px; border-left: 1px solid var(--line); }
.quote-action-label { color: #6b7f7b; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.quote-action-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Arşiv ve silme en sona itiliyor: geri alınamaz olan, kullanıcının eline en son gelsin. */
.quote-action-group-end { margin-left: auto; }
.quote-detail-panel .quote-send-form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.quote-detail-panel .quote-send-form label { display: grid; gap: 4px; flex: 1 1 280px; max-width: 420px; }
.quote-detail-panel .quote-send-form input { width: 100%; }

/* Rapor merkezi: katalog modüle göre gruplanır, kartlar grubun içinde ızgaraya oturur. */
.report-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.report-card-grid .report-card { position: relative; min-height: 0; grid-template-columns: 42px 1fr auto; align-items: start; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px; color: inherit; }
.report-card-grid .report-card:hover { border-color: #b8dce2; background: #f6fbfc; }
.report-card-grid .report-card h3 { margin: 0 0 3px; font-size: 14px; }
.report-card-grid .report-card p { margin: 0; font-size: 12px; }
.report-card-go { display: grid; place-items: center; align-self: center; color: var(--primary-dark); }
.report-card-go svg { width: 18px; height: 18px; }
html[data-theme="night"] .report-card-grid .report-card:hover { background: #1d3a40; }
@media (max-width: 1180px) { .report-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .report-card-grid { grid-template-columns: 1fr; } }

/* Teklif revizyon geçmişi ve gönderim kısıtı bildirimi. */
.quote-send-blocked { display: flex; align-items: center; gap: 7px; margin: 0; border-radius: 8px; background: #fff7e8; color: #8a5a10; padding: 8px 11px; font-size: 12px; font-weight: 700; }
.quote-send-blocked svg { width: 15px; height: 15px; flex: 0 0 15px; }
.quote-timeline > .eyebrow { margin: 0 0 8px; }
.quote-timeline ol { display: grid; gap: 10px; margin: 0; border-left: 2px solid var(--line); padding: 0 0 0 16px; list-style: none; }
.quote-timeline li { position: relative; display: grid; gap: 3px; font-size: 12px; }
.quote-timeline li > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.quote-timeline-dot { position: absolute; left: -21px; top: 4px; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--line); }
.quote-timeline li.is-current .quote-timeline-dot { background: var(--primary-dark); }
html[data-theme="night"] .quote-send-blocked { background: #3a3122; color: #e0c188; }

/* Döviz kırılımı: TRY karşılığına indirgenmiş tek rakamın gizlediği dağılım. */
.kpi-currency-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 14px; }
.kpi-currency-label { color: #71808c; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kpi-currency-chip { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; background: var(--surface); }
.kpi-currency-chip strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.kpi-currency-chip small { color: #9aa6ad; font-size: 11px; }

/* İşlem kayıtları: ham JSON her satırı şişiriyordu, istenince açılır. */
.audit-detail summary { cursor: pointer; color: var(--primary-dark); font-size: 12px; font-weight: 700; }
.audit-detail pre { margin: 6px 0 0; max-width: 420px; max-height: 220px; overflow: auto; border-radius: 6px; background: var(--bg); padding: 8px; font-size: 11px; white-space: pre-wrap; }

/* Bildirim/SMS/mail ayarları: sağlayıcı seçimi ve olay matrisi. */
.provider-picker { display: grid; gap: 8px; }
.provider-picker-label { color: #71808c; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.provider-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.provider-option { display: flex; align-items: start; gap: 9px; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; cursor: pointer; background: var(--surface); }
.provider-option.is-selected { border-color: #b8dce2; background: #f0f9fa; }
.provider-option strong { display: block; font-size: 13px; }
.provider-option small { display: block; margin-top: 3px; color: #71808c; font-size: 11px; line-height: 1.45; }
.provider-fields { border: 1px solid var(--line); border-radius: 9px; padding: 14px; margin: 0; }
.provider-fields legend { padding: 0 6px; color: #71808c; font-size: 11px; font-weight: 800; }
.required-mark { margin-left: 3px; color: #b3403f; }
.sms-test-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.sms-test-form label { display: grid; gap: 4px; min-width: 240px; }

.notification-channels { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.notification-channels span { display: block; font-size: 12px; }
.notification-matrix-wrap { margin-top: 14px; }
.notification-matrix-table { min-width: 640px; }
.notification-matrix-table .notification-matrix-channel { width: 108px; text-align: center; }
.notification-matrix-table .notification-matrix-channel small { display: block; color: #b3403f; font-size: 9px; font-weight: 800; }
.notification-matrix-table .notification-matrix-channel .check { justify-content: center; }
.notification-matrix-group th { background: var(--bg); color: #71808c; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.notification-transactional-mail { display: grid; gap: 14px; margin-top: 16px; padding: 16px; border: 1px solid #d8e6e9; border-radius: 8px; background: #f8fbfc; }
.notification-transactional-mail .section-heading h3 { margin: 3px 0 5px; }
.notification-transactional-mail .section-heading p { margin: 0; max-width: 920px; line-height: 1.55; }
.notification-transactional-mail__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #dce7e9; border-radius: 7px; overflow: hidden; background: #fff; }
.notification-transactional-mail__items > div { display: grid; gap: 4px; min-height: 74px; padding: 13px 14px; border-right: 1px solid #e2ebed; border-bottom: 1px solid #e2ebed; }
.notification-transactional-mail__items > div:nth-child(3n) { border-right: 0; }
.notification-transactional-mail__items > div:nth-last-child(-n+3) { border-bottom: 0; }
.notification-transactional-mail__items strong { color: #214454; font-size: 13px; }
.notification-transactional-mail__items span { color: #72828a; font-size: 12px; line-height: 1.4; }
/* Matriste aşağı inerken kanal başlıkları görünür kalır. Yatay taşma yalnızca mobilde
   gerektiği için masaüstünde kapsayıcı dikey sticky davranışı engellemez. */
@media (min-width: 761px) {
    .notification-matrix-wrap { overflow: visible; }
    .notification-matrix-table thead th { position: sticky; top: 64px; z-index: 12; background: #f8fafb; box-shadow: 0 1px 0 #dce5e8; }
    .notification-matrix-table .notification-matrix-group th { position: static; }
}
@media (max-width: 760px) {
    .notification-matrix-wrap { overflow-x: auto; }
    .notification-matrix-table thead th { top: 60px; z-index: 12; }
    .notification-matrix-table .notification-matrix-group th { position: static; }
    .notification-transactional-mail__items { grid-template-columns: 1fr; }
    .notification-transactional-mail__items > div,
    .notification-transactional-mail__items > div:nth-child(3n),
    .notification-transactional-mail__items > div:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid #e2ebed; }
    .notification-transactional-mail__items > div:last-child { border-bottom: 0; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html[data-theme="night"] .provider-option.is-selected { background: #1d3a40; }

/* Onay kutusu ve radyo düğmeleri, metin alanları için yazılmış genel kurallardan etkileniyordu:
   width:100% ve min-height:38px yüzünden 13x38 piksellik gerilmiş kutular olarak çıkıyorlardı. */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    flex: 0 0 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--primary-dark);
    cursor: pointer;
}
.check { align-items: center; }
.support-attachment-list { display: grid; gap: 10px; }
.support-attachment { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.support-attachment-preview, .support-attachment-icon { display: grid; place-items: center; width: 54px; height: 42px; flex: 0 0 54px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.support-attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.support-attachment-icon svg { width: 19px; height: 19px; color: var(--primary-dark); }
.support-attachment > div { display: grid; gap: 3px; min-width: 0; }
.support-attachment strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-resolution { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.support-resolution > p { margin: 6px 0 0; }
.support-timeline { display: grid; gap: 0; }
.support-timeline-item { position: relative; display: block; border-left: 2px solid var(--line); margin-left: 12px; padding: 0 0 18px 22px; }
.support-timeline-item:last-child { padding-bottom: 0; }
.support-timeline-marker { position: absolute; left: -13px; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--surface); border-radius: 50%; background: var(--primary-dark); color: #fff; }
.support-timeline-marker svg { width: 13px; height: 13px; }
.support-timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.support-timeline-head strong { font-size: 14px; }
.support-timeline-head .muted { font-size: 12px; }
.support-timeline-item p { margin: 7px 0 0; color: var(--text); }
.support-timeline-note, .support-attachment-form { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.support-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.support-chart-wide { grid-column: 1 / -1; }
.support-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .support-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .support-analytics-grid, .support-report-grid { grid-template-columns: 1fr; } .support-chart-wide { grid-column: auto; } }
.provider-option input[type="radio"] { margin-top: 2px; }
.field-hint { color: #9aa6ad; font-size: 11px; font-weight: 600; }
.settings-block { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.settings-block h3 { margin: 0; font-size: 15px; }
.settings-block > .muted { margin: -6px 0 0; font-size: 12px; }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.login-forgot { display: inline-block; margin-top: 4px; color: var(--primary-dark); font-size: 13px; font-weight: 700; text-align: center; }

/* Puantajın ana deneyimi: aylık cetvel. Satır ve gün başlıkları sabit kalırken uzun dönemler
   yatay kayar; böylece 28-31 günlük veri hem masaüstünde hem mobilde okunur. */
.attendance-ledger { overflow: hidden; padding: 0; }
.attendance-ledger-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 18px 14px; border-bottom: 1px solid #dbe8ea; background: linear-gradient(115deg, #f8fcfc 0%, #eef8fa 100%); }
.attendance-ledger-head h2 { margin: 2px 0 5px; color: #153d4c; font-size: 21px; }
.attendance-ledger-head p { margin: 0; }
.attendance-period-picker { display: grid; min-width: 255px; gap: 5px; }
.attendance-period-picker label { color: #62727d; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.attendance-period-picker select { min-height: 38px; border-color: #bcd7dc; background-color: #fff; color: #17323d; font-weight: 700; }
.attendance-ledger-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; border-bottom: 1px solid #e4edef; padding: 10px 18px; color: #667985; font-size: 12px; font-weight: 600; }
.attendance-ledger-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.attendance-ledger-meta svg { width: 14px; height: 14px; color: #16778c; }
.attendance-period-status { border-radius: 999px; padding: 4px 8px; background: #e8f4f5; color: #176477; font-size: 11px; font-weight: 800; }
.attendance-period-status.status-draft { background: #fff3dd; color: #9a5d00; }
.attendance-period-status.status-submitted { background: #e8f1fe; color: #245eaa; }
.attendance-period-status.status-approved, .attendance-period-status.status-closed { background: #e5f5ec; color: #1b7650; }
.attendance-ledger-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #e4edef; }
.attendance-ledger-kpis > div { min-width: 0; padding: 14px 18px; border-right: 1px solid #e4edef; }
.attendance-ledger-kpis > div:last-child { border-right: 0; }
.attendance-ledger-kpis span, .attendance-ledger-kpis small { display: block; color: #72818b; font-size: 11px; }
.attendance-ledger-kpis strong { display: block; margin: 3px 0 2px; color: #183747; font-size: 21px; line-height: 1.15; }
.attendance-ledger-kpis .needs-review strong { color: #b54708; }
.attendance-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 18px; border-bottom: 1px solid #e4edef; background: #fbfdfd; color: #667985; font-size: 11px; font-weight: 700; }
.attendance-legend span { display: inline-flex; align-items: center; gap: 5px; }
.attendance-legend .attendance-cell { width: 21px; height: 21px; font-size: 10px; }
.attendance-ledger-scroll { max-width: 100%; overflow: auto; background: #fff; outline: 0; }
.attendance-ledger-scroll:focus-visible { box-shadow: inset 0 0 0 2px #168b9c; }
.attendance-ledger-table { min-width: max-content; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.attendance-ledger-table th, .attendance-ledger-table td { max-width: none; border-right: 1px solid #edf1f2; border-bottom: 1px solid #edf1f2; padding: 7px 4px; text-align: center; white-space: nowrap; }
.attendance-ledger-table thead th { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid #cadde1; background: #f3f8f8; color: #4f6570; font-size: 9px; }
.attendance-ledger-table tbody tr:hover td { background: #f7fbfb; }
.attendance-ledger-table .attendance-person-column { position: sticky; left: 0; z-index: 1; width: 220px; min-width: 220px; padding: 9px 13px; border-right: 1px solid #cadde1; background: #fff; text-align: left; }
.attendance-ledger-table thead .attendance-person-column { z-index: 4; background: #eaf5f5; color: #395463; }
.attendance-ledger-table .attendance-person-column strong, .attendance-ledger-table .attendance-person-column small { display: block; overflow: hidden; text-overflow: ellipsis; }
.attendance-ledger-table .attendance-person-column strong { color: #203540; font-size: 12px; }
.attendance-ledger-table .attendance-person-column small { margin-top: 3px; color: #7b8d95; font-size: 10px; font-weight: 600; }
.attendance-ledger-table tbody tr:hover .attendance-person-column { background: #f7fbfb; }
.attendance-day-column { width: 42px; min-width: 42px; }
.attendance-ledger-table thead .attendance-day-column { height: 48px; padding: 5px 2px; }
.attendance-ledger-table thead .attendance-day-column strong, .attendance-ledger-table thead .attendance-day-column small { display: block; }
.attendance-ledger-table thead .attendance-day-column strong { color: #274451; font-size: 12px; line-height: 1.1; }
.attendance-ledger-table thead .attendance-day-column small { margin-top: 3px; color: #7a8b94; font-size: 8px; font-weight: 700; }
.attendance-ledger-table thead .attendance-day-column.is-rest-day { background: #f1f5f6; }
.attendance-ledger-table .attendance-total-column { width: 69px; min-width: 69px; }
.attendance-ledger-table tbody .attendance-total-column { color: #30505c; font-size: 11px; }
.attendance-ledger-table tbody .attendance-total-column strong { display: block; font-size: 12px; }
.attendance-ledger-table tbody .attendance-total-column small { color: #80909a; font-size: 9px; font-weight: 700; }
.attendance-cell { display: inline-grid; place-items: center; width: 27px; height: 27px; border: 1px solid transparent; border-radius: 5px; font-size: 12px; font-weight: 800; line-height: 1; }
.attendance-cell.status-present { border-color: #b9e6c9; background: #e8f8ed; color: #168344; }
.attendance-cell.status-incomplete { border-color: #f5d49b; background: #fff5df; color: #a05c00; }
.attendance-cell.status-day_off { border-color: #d8e1e5; background: #f1f4f5; color: #627681; }
.attendance-cell.status-on_leave { border-color: #cdddf8; background: #ebf2ff; color: #2967b4; }
.attendance-cell.status-absent { border-color: #f3c5bf; background: #fff0ee; color: #bd3b30; }
.attendance-cell.status-empty { border-color: #edf0f1; background: #fafcfc; color: #a7b2b7; }
.attendance-review-count { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 999px; background: #eef3f4; color: #73838c; font-size: 11px; font-weight: 800; }
.attendance-review-count.has-items { background: #fff0ee; color: #bd3b30; }
.attendance-ledger-hint { display: flex; align-items: center; gap: 6px; margin: 0; padding: 11px 18px; color: #758790; font-size: 11px; }
.attendance-ledger-hint svg { width: 14px; height: 14px; color: #16778c; }
.attendance-empty-state { min-height: 240px; border: 0; border-radius: 0; background: #fbfdfd; }
.attendance-management-card { margin-top: 16px; }
.attendance-period-create { margin: 0 0 14px; padding: 14px; border: 1px solid #dfe9eb; border-radius: 7px; background: #f9fbfb; }
.attendance-period-create > div { align-self: end; }
html[data-theme="night"] .attendance-ledger-head, html[data-theme="graphite"] .attendance-ledger-head, html[data-theme="emerald"] .attendance-ledger-head { border-color: var(--line); background: var(--surface-2); }
html[data-theme="night"] .attendance-ledger-head h2, html[data-theme="graphite"] .attendance-ledger-head h2, html[data-theme="emerald"] .attendance-ledger-head h2, html[data-theme="night"] .attendance-ledger-kpis strong, html[data-theme="graphite"] .attendance-ledger-kpis strong, html[data-theme="emerald"] .attendance-ledger-kpis strong { color: var(--text); }
html[data-theme="night"] .attendance-ledger-meta, html[data-theme="graphite"] .attendance-ledger-meta, html[data-theme="emerald"] .attendance-ledger-meta, html[data-theme="night"] .attendance-ledger-kpis, html[data-theme="graphite"] .attendance-ledger-kpis, html[data-theme="emerald"] .attendance-ledger-kpis, html[data-theme="night"] .attendance-legend, html[data-theme="graphite"] .attendance-legend, html[data-theme="emerald"] .attendance-legend { border-color: var(--line); background: var(--surface); }
html[data-theme="night"] .attendance-ledger-table thead th, html[data-theme="graphite"] .attendance-ledger-table thead th, html[data-theme="emerald"] .attendance-ledger-table thead th { border-color: var(--line); background: var(--surface-2); color: var(--muted); }
html[data-theme="night"] .attendance-ledger-table td, html[data-theme="graphite"] .attendance-ledger-table td, html[data-theme="emerald"] .attendance-ledger-table td, html[data-theme="night"] .attendance-ledger-table .attendance-person-column, html[data-theme="graphite"] .attendance-ledger-table .attendance-person-column, html[data-theme="emerald"] .attendance-ledger-table .attendance-person-column { border-color: var(--line); background: var(--surface); color: var(--text); }
html[data-theme="night"] .attendance-ledger-table tbody tr:hover td, html[data-theme="graphite"] .attendance-ledger-table tbody tr:hover td, html[data-theme="emerald"] .attendance-ledger-table tbody tr:hover td, html[data-theme="night"] .attendance-ledger-table tbody tr:hover .attendance-person-column, html[data-theme="graphite"] .attendance-ledger-table tbody tr:hover .attendance-person-column, html[data-theme="emerald"] .attendance-ledger-table tbody tr:hover .attendance-person-column { background: var(--surface-2); }
@media (max-width: 760px) {
    .attendance-ledger-head { align-items: stretch; flex-direction: column; padding: 15px; }
    .attendance-period-picker { min-width: 0; }
    .attendance-ledger-meta, .attendance-legend, .attendance-ledger-hint { padding-right: 15px; padding-left: 15px; }
    .attendance-ledger-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-ledger-kpis > div:nth-child(2) { border-right: 0; }
    .attendance-ledger-kpis > div:nth-child(-n+2) { border-bottom: 1px solid #e4edef; }
    .attendance-ledger-table .attendance-person-column { width: 165px; min-width: 165px; padding-right: 9px; padding-left: 9px; }
    .attendance-day-column { width: 38px; min-width: 38px; }
    .attendance-cell { width: 25px; height: 25px; }
    .attendance-ledger-hint { align-items: flex-start; line-height: 1.45; }
}

/* Uygulama ve herkese açık oturum ekranları için ortak kurumsal iletişim bandı. */
.app-footer, .public-footer { display: flex; align-items: center; justify-content: flex-end; gap: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }
.app-footer { margin-top: 24px; padding: 16px 0 4px; }
.app-footer > span, .public-footer > span { margin-right: auto; color: var(--text); font-weight: 800; }
.app-footer a, .public-footer a { display: inline-flex; align-items: center; gap: 5px; color: inherit; white-space: nowrap; }
.app-footer a:hover, .public-footer a:hover { color: var(--primary-dark); }
.app-footer svg, .public-footer svg { width: 14px; height: 14px; color: var(--primary); }
.guest-shell { display: grid; min-height: 100dvh; grid-template-rows: minmax(0, 1fr) auto; background: #eef3f4; }
.guest-shell .login-page { min-height: 0; }
.public-footer { justify-content: center; border-top: 1px solid #d7e2e5; background: #f7fbfb; padding: 12px clamp(16px, 3vw, 28px); }
.public-footer > span { margin-right: 8px; }
html[data-theme="night"] .guest-shell, html[data-theme="graphite"] .guest-shell, html[data-theme="emerald"] .guest-shell { background: var(--surface); }
html[data-theme="night"] .public-footer, html[data-theme="graphite"] .public-footer, html[data-theme="emerald"] .public-footer { border-color: var(--line); background: var(--surface-2); }
@media (max-width: 760px) {
    .app-footer, .public-footer { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px; }
    .app-footer { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
    .app-footer > span, .public-footer > span { width: 100%; margin-right: 0; }
    .public-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* Giriş ilerleme çubuğu: sunucu MFA kontrolü ve oturum kurulumu yaparken geri bildirim. */
.login-progress { position: relative; height: 3px; margin: 4px 0 12px; border-radius: 999px; background: #e3eef1; overflow: hidden; }
.login-progress span { position: absolute; inset: 0; width: 40%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); animation: login-progress-slide 1.1s ease-in-out infinite; }
@keyframes login-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
    .login-progress span { animation: none; width: 100%; opacity: .55; }
}

/* Mobil menü çekmecesinin altındaki kullanıcı ve çıkış alanı. Masaüstünde çıkış üst başlıkta
   olduğu için burada gizlidir; mobilde o başlık görünmediğinden oturumu kapatmanın tek yolu. */
.sidebar-mobile-footer { display: none; }
.sidebar-mobile-user { display: flex; align-items: center; gap: 10px; border-radius: 9px; padding: 9px 10px; color: inherit; }
.sidebar-mobile-user strong, .sidebar-mobile-user small { display: block; }
.sidebar-mobile-user strong { font-size: 13px; }
.sidebar-mobile-user small { color: var(--muted); font-size: 11px; word-break: break-all; }
@media (max-width: 900px) {
    .sidebar { overflow-y: auto; }
    .sidebar-mobile-footer {
        display: grid;
        gap: 8px;
        margin-top: 14px;
        padding: 14px 10px calc(96px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
    }
}

/* Müşteri destek portalı: hesapsız, token bağlantısıyla erişilen sayfa. */
.portal-panel { display: grid; gap: 14px; width: min(720px, 100%); }
.portal-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 18px; }
.portal-head > div { flex: 1 1 240px; min-width: 0; }
.portal-head h1 { margin: 4px 0 6px; font-size: 22px; line-height: 1.25; }
.portal-head p { margin: 0; font-size: 13px; }
.portal-logo { max-width: 110px; max-height: 46px; object-fit: contain; }
.portal-description { margin: 0; white-space: pre-line; line-height: 1.6; }
.portal-thread { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-thread li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.portal-thread li.is-staff { background: #f4fafb; border-color: #cfe6ea; }
.portal-thread li.is-customer { background: var(--surface); }
.portal-thread-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 12px; }
.portal-thread-meta span { color: var(--muted); }
.portal-thread li p { margin: 0; white-space: pre-line; line-height: 1.55; }
.portal-thread-empty { border: 0 !important; padding: 0 !important; }
.portal-foot { text-align: center; font-size: 12px; }
html[data-theme="night"] .portal-thread li.is-staff { background: #1d3a40; border-color: #2c515a; }

/* Destek posta kutusu tanimi. */
.support-mailbox-form .card { margin-bottom: 16px; }
.support-mailbox-form .section-heading { display: block; margin-bottom: 14px; }
.support-mailbox-choices { margin-top: 14px; border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; }
.support-mailbox-choices legend { padding: 0 5px; color: var(--primary-dark); font-size: 12px; font-weight: 700; }
.support-mailbox-choices .check { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.support-mailbox-actions { justify-content: flex-end; margin-bottom: 16px; }
.support-mailbox-error { border-left: 3px solid var(--danger, #c0392b); margin-bottom: 16px; }
.support-mailbox-error p { margin: 0 0 4px; display: flex; align-items: center; gap: 7px; }
.support-mailbox-error svg { width: 16px; height: 16px; }
.support-mailbox-status { margin-bottom: 16px; }
.support-mailbox-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.support-mailbox-status-grid > div { display: grid; gap: 3px; }
.support-mailbox-status-grid span { font-size: 12px; }
.support-mailbox-status .page-actions { display: flex; gap: 8px; }
.support-mail-outcome.is-created { background: #e7f6ec; color: #1d6f3f; }
.support-mail-outcome.is-appended { background: #e8f0fb; color: #1d4e89; }
.support-mail-outcome.is-ignored { background: #f1f2f4; color: #5b6472; }
.support-mail-outcome.is-failed { background: #fdecea; color: #a52a1e; }

@media (max-width: 900px) {
    .support-mailbox-status-grid { grid-template-columns: 1fr; }
}
.support-mailbox-provider { margin-top: 14px; border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; }
.support-mailbox-provider legend { padding: 0 5px; color: var(--primary-dark); font-size: 12px; font-weight: 700; }
.support-mailbox-provider > p.muted { margin: 12px 0 0; font-size: 12px; }

/* Destek kaydi silme akisi. */
.support-archived-note, .support-deletion-note { margin-bottom: 16px; }
.support-archived-note { border-left: 3px solid var(--muted); }
.support-deletion-note { border-left: 3px solid #d97706; }
.support-archived-note p, .support-deletion-note p { margin: 0 0 4px; }
.support-archived-note p:first-child, .support-deletion-note p:first-child { display: flex; align-items: center; gap: 7px; }
.support-archived-note svg, .support-deletion-note svg { width: 16px; height: 16px; }
.support-deletion-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.support-deletion-actions input { min-width: 180px; }
.support-deletion-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.support-deletion-reason { max-width: 340px; }
.support-deletion-type.is-archive { background: #f1f2f4; color: #5b6472; }
.support-deletion-type.is-purge { background: #fdecea; color: #a52a1e; }
.support-deletion-status.is-pending { background: #fff4e5; color: #92400e; }
.support-deletion-status.is-approved { background: #e7f6ec; color: #1d6f3f; }
.support-deletion-status.is-rejected { background: #f1f2f4; color: #5b6472; }
/* Tiklanabilir KPI karti: is-pair yerine uc secenekli kapsam secicisiyle birlikte kullanilir. */
a.crm-kpi { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.crm-kpi:hover { transform: translateY(-1px); }
a.crm-kpi.is-active { box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-muted, #f6f8fa); }
.support-deletion-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; border-left: 3px solid #d97706; text-decoration: none; color: inherit; }
.support-deletion-banner span { display: flex; align-items: center; gap: 7px; }
.support-deletion-banner svg { width: 16px; height: 16px; }
.support-deletion-inbox { margin-bottom: 16px; }

/* Masraf fisi KDV ayrimi: fis birden fazla orani birden tasiyabildigi icin satirlar tekrarlanir. */
.expense-vat { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.expense-vat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.expense-vat-head .eyebrow { margin: 0 0 2px; }
.expense-vat-head span { display: block; font-size: 12px; }
.expense-vat-rows { display: grid; gap: 8px; }
.expense-vat-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.expense-vat-row .icon-button { margin-bottom: 3px; }
.expense-vat-total { margin: 10px 0 0; font-size: 12px; font-weight: 700; }
.expense-vat-total.is-invalid { color: #a52a1e; }
.expense-vat-summary { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.expense-vat-summary li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.expense-vat-summary li.is-total { border-top: 1px solid var(--line); padding-top: 4px; }

@media (max-width: 700px) {
    .expense-vat-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .expense-vat-row .icon-button { grid-column: 1 / -1; justify-self: end; }
}
.expense-ocr-raw { width: 100%; margin-top: 8px; }
.expense-ocr-raw summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.expense-ocr-raw pre { max-height: 220px; overflow: auto; margin: 8px 0 0; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; padding: 8px 10px; white-space: pre-wrap; font-size: 11px; line-height: 1.5; }

/* Masraf fisi odemeleri: kismi odeme ve geri alma gecmisi. */
.expense-payment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.expense-payment-summary > div { display: grid; gap: 3px; }
.expense-payment-summary span { font-size: 12px; }
.expense-payment-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.expense-payment-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.expense-payment-list li.is-cancelled > span { color: var(--muted); text-decoration: line-through; }
.expense-payment-list li.is-cancelled .badge { text-decoration: none; }
.expense-payment-list li.is-total { border-top: 1px solid var(--line); padding-top: 5px; }
.expense-payment-list .muted { margin-left: 6px; font-size: 12px; }

@media (max-width: 700px) {
    .expense-payment-summary { grid-template-columns: 1fr; }
}

/* Musteri sozlesmeleri: durum rozetleri ve destek ekranindaki sozlesme uyarisi. */
.crm-contract-support { background: #e8f0fb; color: #1d4e89; }
.crm-contract-state.is-active { background: #e7f6ec; color: #1d6f3f; }
.crm-contract-state.is-ending_soon { background: #fff4e5; color: #92400e; }
.crm-contract-state.is-expired { background: #fdecea; color: #a52a1e; }
.crm-contract-state.is-upcoming { background: #e8f0fb; color: #1d4e89; }
.crm-contract-state.is-cancelled { background: #f1f2f4; color: #5b6472; }
.support-contract-note { display: grid; gap: 3px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 7px; padding: 10px 12px; }
.support-contract-note strong { font-size: 13px; }
.support-contract-note span { color: var(--muted); font-size: 12px; }
.support-contract-note.is-active { border-left-color: #1d6f3f; }
.support-contract-note.is-ending_soon { border-left-color: #d97706; }
.support-contract-note.is-expired { border-left-color: #a52a1e; }
.support-contract-note.is-upcoming, .support-contract-note.is-cancelled { border-left-color: var(--muted); }
.crm-contract-files { margin-top: 6px; }
.crm-contract-files > summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.crm-contract-files > summary svg { width: 13px; height: 13px; }
.crm-contract-file-list { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.crm-contract-file-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.crm-contract-file-list a { display: inline-flex; align-items: center; gap: 5px; }
.crm-contract-file-list svg { width: 13px; height: 13px; }
.crm-contract-file-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.crm-contract-file-upload input[type="file"] { max-width: 260px; font-size: 12px; }