:root {
    color-scheme: light;
    --bg: #f5f5f5;
    --bg-rgb: 245, 245, 245;
    --card: #ffffff;
    --card-rgb: 255, 255, 255;
    --sidebar: #ffffff;
    --ink: #000000;
    --muted: #666666;
    --muted-2: #666666;
    --soft: #f0f0f0;
    --line: #e5e5e5;
    --brand: #c89f3d;
    --brand-2: #a67f2f;
    --brand-light: #e4c67f;
    --brand-pale: #eed59d;
    --brand-soft: #faf6ed;
    --icon-bg: #a67f2f;
    --icon-muted: #666666;
    --cyan: #e4c67f;
    --green: #05cd99;
    --red: #ee5d50;
    --orange: #ffb547;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
    --ring: 0 0 0 4px rgba(200, 159, 61, 0.12);
}

body.dark,
html.preload-dark body {
    color-scheme: dark;
    --bg: #000000;
    --bg-rgb: 0, 0, 0;
    --card: #111111;
    --card-rgb: 17, 17, 17;
    --sidebar: #000000;
    --ink: #ffffff;
    --muted: #a3a3a3;
    --muted-2: #8f8f8f;
    --soft: #1a1a1a;
    --line: rgba(255, 255, 255, 0.09);
    --brand-soft: #2d2618;
    --icon-bg: #3a3220;
    --icon-muted: #8f8f8f;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.32);
    --ring: 0 0 0 4px rgba(200, 159, 61, 0.2);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:
        background-color 260ms ease,
        color 260ms ease;
}

body.drawer-open {
    overflow: hidden;
}

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

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.app {
    display: block;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 0 18px;
    background: var(--sidebar);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
    overflow: visible;
    overscroll-behavior: contain;
    scrollbar-width: none;
    scrollbar-color: var(--brand) rgba(200, 159, 61, 0.14);
    z-index: 20;
    transition:
        transform 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    margin: 12px 0;
    border-radius: 999px;
    background: rgba(200, 159, 61, 0.12);
}

.sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-light), var(--brand));
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

body.dark .sidebar,
html.preload-dark .sidebar {
    scrollbar-color: var(--brand-light) rgba(255, 255, 255, 0.08);
}

body.dark .sidebar::-webkit-scrollbar-track,
html.preload-dark .sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}

body.dark .sidebar::-webkit-scrollbar-thumb,
html.preload-dark .sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--brand-light), var(--brand));
}

body.dark .sidebar::-webkit-scrollbar-thumb:hover,
html.preload-dark .sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

.brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    margin: 0;
    padding: 10px 12px 10px 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    transition: border-color 260ms ease;
}

.brand span {
    font-weight: 400;
}

.brand-logo {
    width: 122px;
    max-width: 100%;
}

.brand-logo--dark {
    display: none;
}

html.preload-dark .brand-logo--light,
body.dark .brand-logo--light {
    display: none;
}

html.preload-dark .brand-logo--dark,
body.dark .brand-logo--dark {
    display: block;
}

.nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 7px;
    border-radius: 8px;
    color: var(--muted-2);
    font-size: 13px;
    font-weight: 600;
    position: relative;
    transition:
        color 180ms ease,
        background-color 180ms ease;
}

.nav a.active,
.nav a:hover {
    color: var(--ink);
    background: transparent;
}

.nav a.active::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: -3px;
    left: 10px;
    width: auto;
    height: 3px;
    border-radius: 999px;
    background: var(--brand);
}

.nav-group {
    position: relative;
    border-radius: 8px;
}

.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 7px;
    border-radius: 8px;
    color: var(--muted-2);
    font-size: 13px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    position: relative;
    transition:
        color 180ms ease,
        background-color 180ms ease;
}

.nav-group-toggle::-webkit-details-marker {
    display: none;
}

.nav-group-toggle.active,
.nav-group-toggle:hover,
.nav-group[open]>.nav-group-toggle {
    color: var(--ink);
}

.nav-group-toggle.active::after,
.nav-group[open]>.nav-group-toggle.active::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: -3px;
    left: 10px;
    width: auto;
    height: 3px;
    border-radius: 999px;
    background: var(--brand);
}

.nav-group-label {
    flex: 1;
}

.nav-chevron {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--muted);
    transition: transform 180ms ease;
}

.nav-chevron svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.nav-group[open] .nav-chevron {
    transform: rotate(180deg);
}

.nav-submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    display: grid;
    min-width: 210px;
    gap: 4px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.nav-submenu a {
    display: block;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--muted-2);
    font-size: 13px;
    font-weight: 500;
    position: relative;
    transition:
        color 180ms ease,
        background-color 180ms ease;
}

.nav-submenu a:hover,
.nav-submenu a.active {
    color: var(--brand);
    background: var(--brand-soft);
}

.nav-submenu a.active::after {
    display: none;
}

.sidebar .nav {
    flex: 1 1 0;
    min-height: 0;
    overflow: visible;
    padding: 0;
    margin-right: 0;
    white-space: nowrap;
}

.placeholder-card {
    padding: 28px;
}

.placeholder-copy {
    margin: 0 0 20px;
    color: var(--muted);
    line-height: 1.6;
}

.placeholder-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: currentColor;
    font-size: 16px;
    flex: 0 0 auto;
}

.icon svg,
.stat-icon svg,
.circle svg,
.pill svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.stat-icon svg {
    width: 21px;
    height: 21px;
}

.circle svg {
    width: 16px;
    height: 16px;
}

.pill svg {
    width: 18px;
    height: 18px;
    color: var(--ink);
}

.upgrade {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    overflow: hidden;
    min-height: 228px;
    padding: 66px 20px 18px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    text-align: center;
    box-shadow: 0 20px 45px rgba(200, 159, 61, 0.28);
}

.upgrade::before {
    content: "";
    position: absolute;
    inset: -45px 0 auto;
    width: 92px;
    height: 92px;
    margin: auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 0 18px, transparent 19px),
        linear-gradient(135deg, var(--brand-light), var(--brand-2));
    border: 4px solid #000000;
    animation: floatGlow 6s ease-in-out infinite;
}

.upgrade::after {
    content: "";
    position: absolute;
    top: 37px;
    left: 0;
    right: 0;
    width: 30px;
    height: 16px;
    margin: auto;
    border: 9px solid var(--brand);
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
    z-index: 1;
}

.upgrade strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    position: relative;
    z-index: 2;
}

.upgrade p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.45;
    position: relative;
    z-index: 2;
}

.download-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 46px;
    margin-top: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-light), var(--brand));
    color: #fff;
    font-weight: 700;
}

.main {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: 0;
    padding: 16px 28px 24px;
    overflow-x: hidden;
}

.topbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px;
    padding: 10px 0 12px;
    background: transparent;
    border-bottom: 1px solid var(--line);
}

.crumb {
    margin: 0 0 4px;
    color: var(--muted-2);
    font-size: 14px;
    font-weight: 500;
}

h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;

}

.header-tools {
    flex: 0 0 auto;
    margin-left: auto;
}

.search {
    width: 224px;
    height: 44px;
    padding: 0 18px 0 42px;
    border: 0;
    border-radius: 999px;
    outline: none;
    color: var(--ink);
    background:
        linear-gradient(90deg, transparent 0 34px, transparent 34px),
        var(--bg);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    transition:
        box-shadow 180ms ease,
        background-color 260ms ease,
        color 260ms ease;
}

.search-wrap {
    position: relative;
}

.search-wrap::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.search-wrap::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 28px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
    transform: rotate(45deg);
}

.search:focus {
    box-shadow: var(--ring);
}

.circle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    background: transparent;
    font-size: 16px;
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.circle:hover {
    color: var(--ink);
    background: var(--soft);
}

.nav-action {
    position: relative;
}

.nav-action summary {
    list-style: none;
}

.nav-action summary::-webkit-details-marker {
    display: none;
}

.dropdown-card {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: min(360px, calc(100vw - 34px));
    padding: 16px;
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(6px);
    transform-origin: top right;
    pointer-events: none;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        background-color 260ms ease;
}

.nav-action[open] .dropdown-card {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-action--profile summary {
    border-radius: 999px;
    transition: box-shadow 220ms ease;
}

.nav-action--profile[open] summary {
    box-shadow: 0 0 0 3px rgba(200, 159, 61, 0.22);
}

.dropdown-card--profile {
    width: 260px;
    padding: 18px;
    border: 1px solid rgba(200, 159, 61, 0.28);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(200, 159, 61, 0.08);
}

.profile-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.profile-dropdown-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(200, 159, 61, 0.45);
    box-shadow: 0 8px 18px rgba(200, 159, 61, 0.18);
}

.profile-dropdown-name {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.profile-dropdown-role {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--brand-2);
    background: var(--brand-pale);
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

.profile-dropdown-links:empty {
    display: none;
}

.profile-dropdown-links {
    display: grid;
    gap: 4px;
    margin: 0 0 12px;
}

.profile-dropdown-link {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.profile-dropdown-link:hover,
.profile-dropdown-link.is-active {
    color: var(--brand-2);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.profile-logout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 12px 24px rgba(200, 159, 61, 0.28);
    font-weight: 700;
    transition:
        filter 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.profile-logout-button:hover {
    filter: brightness(1.06);
    box-shadow: 0 12px 24px rgba(200, 159, 61, 0.34);
}

.dropdown-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    font-weight: 700;
}

.mini-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 180ms ease;
}

.mini-item:hover {
    background: var(--soft);
}

.mini-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    flex: 0 0 auto;
}

.mini-item strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}

.mini-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.nav-action--notifications {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid var(--card);
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
}

.notification-badge.is-hidden {
    display: none;
}

.nav-action--notifications-live .nav-action--notifications,
.nav-action--notifications-live summary.circle {
    animation: notification-ring 1.1s ease-in-out 2;
}

@keyframes notification-ring {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-12deg); }
    30% { transform: rotate(10deg); }
    45% { transform: rotate(-8deg); }
    60% { transform: rotate(6deg); }
    75% { transform: rotate(-4deg); }
}

.dropdown-card--notifications {
    width: min(340px, calc(100vw - 28px));
    max-height: min(440px, 70vh);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
}

.notification-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
}

.notification-panel-title {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.notification-panel-subtitle {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

.notification-mark-all {
    border: 0;
    background: transparent;
    color: var(--brand-2);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    white-space: nowrap;
}

.notification-mark-all:hover {
    color: var(--brand);
}

.notification-list {
    display: grid;
    gap: 0;
    overflow: auto;
    max-height: min(360px, calc(70vh - 72px));
    padding: 6px;
}

.notification-list > form + form {
    border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.notification-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 28px 18px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
}

.notification-empty[hidden] {
    display: none !important;
}

.notification-empty__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    border-radius: 50%;
    color: var(--brand-2);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.notification-empty__icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.notification-empty strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.notification-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease;
}

.notification-item:hover {
    background: color-mix(in srgb, var(--brand) 8%, var(--soft));
}

.notification-item--unread {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.notification-item--unread:hover {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.notification-item__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--brand-2);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}

.notification-item--unread .notification-item__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.notification-item__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.notification-item__title {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
}

.notification-item__message {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item__time {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 500;
    opacity: 0.9;
}

.notification-item__dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-soft);
}

.menu-toggle,
.close-sidebar {
    display: none;
}

.grid {
    display: grid;
    gap: 20px;
}

.stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.stat,
.card {
    border-radius: 20px;
    background: var(--card);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.02);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background-color 260ms ease,
        border-color 260ms ease;
}

.stat {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 82px;
    padding: 16px 18px;
    animation: fadeUp 520ms ease both;
}

.stat:nth-child(2) {
    animation-delay: 50ms;
}

.stat:nth-child(3) {
    animation-delay: 100ms;
}

.stat:nth-child(4) {
    animation-delay: 150ms;
}

.stat:nth-child(5) {
    animation-delay: 200ms;
}

.stat:nth-child(6) {
    animation-delay: 250ms;
}

.stat:hover,
.card:hover {
    transform: none;
    box-shadow: none;
}

.stat-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--brand);
    background: var(--icon-bg);
    font-size: 23px;
    font-weight: 700;
    transition:
        transform 220ms ease,
        background-color 260ms ease;
}

body:not(.dark) .stat-icon {
    color: #ffffff;
}

.stat:hover .stat-icon {
    transform: scale(1.06) rotate(-3deg);
}

.label {
    margin: 0 0 4px;
    color: var(--muted-2);
    font-size: 14px;
    line-height: 1.15;
    font-weight: 500;
}

.value {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.two-col {
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
}

.lower {
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
    align-items: start;
}

.card {
    padding: 24px;
    animation: fadeUp 620ms ease both;
}

.two-col>.card {
    min-height: 438px;
}

.lower>.table-card:first-child,
.lower>.side-grid:first-of-type>.card {
    min-height: 424px;
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.card h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 13px;
    border-radius: 8px;
    color: var(--muted-2);
    background: var(--bg);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition:
        color 260ms ease,
        background-color 260ms ease;
}

.profit {
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
}

.big-number {
    margin: 6px 0 4px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.chart {
    display: flex;
    align-items: end;
    justify-content: space-around;
    gap: 18px;
    height: 300px;
    padding: 42px 22px 14px;
}

.line-chart {
    position: relative;
    height: 322px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 44px,
        linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 80px 100%;
}

.line-chart svg {
    position: absolute;
    inset: 52px 0 28px;
    width: 100%;
    height: calc(100% - 80px);
}

.axis-labels {
    position: absolute;
    left: 15%;
    right: 2%;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.bar-labels {
    display: flex;
    justify-content: space-around;
    gap: 18px;
    padding: 0 22px;
    color: var(--muted);
    font-size: 14px;
}

.line-chart path {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: drawLine 1.8s ease forwards;
}

.line-chart path:nth-child(2) {
    animation-delay: 180ms;
}

.bar-stack {
    display: flex;
    flex-direction: column-reverse;
    width: 18px;
    height: var(--height);
    min-height: 120px;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
    transform-origin: bottom;
    animation: barRise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bar-stack i {
    display: block;
    width: 100%;
}

.bar-stack .cyan {
    height: 34%;
    background: var(--cyan);
}

.bar-stack .purple {
    height: 33%;
    background: var(--brand);
}

.bar-stack .white {
    height: 33%;
    background: var(--brand-pale);
}

.bar {
    flex: 1;
    min-width: 16px;
    border-radius: 8px 8px 4px 4px;
    background: var(--brand);
    transform-origin: bottom;
    animation: barRise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bar.alt {
    background: var(--cyan);
}

.bar-stack:nth-child(2),
.bar:nth-child(2),
.traffic-bars span:nth-child(2) {
    animation-delay: 80ms;
}

.bar-stack:nth-child(3),
.bar:nth-child(3),
.traffic-bars span:nth-child(3) {
    animation-delay: 150ms;
}

.bar-stack:nth-child(4),
.bar:nth-child(4),
.traffic-bars span:nth-child(4) {
    animation-delay: 220ms;
}

.bar-stack:nth-child(5),
.bar:nth-child(5),
.traffic-bars span:nth-child(5) {
    animation-delay: 290ms;
}

.bar-stack:nth-child(6),
.bar:nth-child(6),
.traffic-bars span:nth-child(6) {
    animation-delay: 360ms;
}

.bar-stack:nth-child(7),
.bar:nth-child(7),
.traffic-bars span:nth-child(7) {
    animation-delay: 430ms;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
}

.dash-table th {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.dash-table td {
    padding: 12px 0;
    border-top: 0;
    font-size: 14px;
    font-weight: 700;
    transition:
        border-color 260ms ease,
        color 260ms ease;
}

.check {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border-radius: 5px;
    color: #fff;
    background: var(--brand);
    font-size: 12px;
}

.check.unchecked {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.progress {
    position: relative;
    display: block;
    width: 92px;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg);
}

.progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--value);
    border-radius: inherit;
    background: var(--brand);
    transform-origin: left;
    animation: progressIn 850ms ease both;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
}

.dot.warn {
    background: var(--orange);
}

.dot.danger {
    background: var(--red);
}

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

.traffic-bars {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    height: 260px;
    padding: 52px 20px 0;
}

.traffic-bars span {
    width: 18px;
    flex: 0 0 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand), var(--brand-pale));
    transform-origin: bottom;
    animation: barRise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.donut-wrap {
    display: grid;
    place-items: center;
    min-height: 256px;
}

.donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(var(--brand) 0 63%,
            var(--brand-light) 63% 88%,
            var(--brand-pale) 88% 100%);
    position: relative;
    animation: spinIn 900ms ease both;
}

.legend {
    display: flex;
    justify-content: center;
    gap: 26px;
    color: var(--muted);
    padding: 12px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
}

.legend strong {
    display: block;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.25;
}

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

.task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 38px;
    padding: 6px 0;
}

.task label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
}

.calendar {
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-grid span {
    display: grid;
    place-items: center;
    min-height: 32px;
    border-radius: 50%;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.calendar-grid span:not(.day):not(:empty):hover {
    background: var(--brand-soft);
    color: var(--brand);
    transform: translateY(-2px);
}

.calendar-grid .day {
    color: var(--muted);
    font-size: 12px;
}

.calendar-grid .active {
    color: #fff;
    background: var(--brand);
}

footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 4px 4px;
    color: var(--muted);
    font-size: 14px;
}

footer nav {
    display: flex;
    gap: 22px;
    font-weight: 700;
}

.overlay {
    display: none;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes barRise {
    from {
        transform: scaleY(0.08);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes spinIn {
    from {
        opacity: 0;
        transform: rotate(-90deg) scale(0.85);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes progressIn {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes floatGlow {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(28px, 22px);
    }
}

@media (max-width: 1280px) {
    .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        width: 292px;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding: 0 0 18px;
        border-right: 1px solid var(--line);
        border-bottom: 0;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        transform: translateX(-110%);
        z-index: 50;
    }

    body.drawer-open .sidebar {
        transform: translateX(0);
    }

    .overlay {
        position: fixed;
        inset: 0;
        display: block;
        pointer-events: none;
        background: rgba(0, 0, 0, 0);
        transition: background-color 220ms ease;
        z-index: 40;
    }

    body.drawer-open .overlay {
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.55);
    }

    .menu-toggle,
    .close-sidebar {
        display: grid;
    }

    .close-sidebar {
        position: absolute;
        top: 14px;
        right: 14px;
    }

    .brand {
        min-height: 90px;
        padding: 22px 28px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .brand-logo {
        width: 178px;
        max-width: 78%;
    }

    .nav {
        display: grid;
        align-content: start;
        gap: 8px;
        white-space: normal;
    }

    .nav a,
    .nav-group-toggle {
        gap: 14px;
        min-height: 44px;
        padding: 0 8px;
        font-size: 15px;
    }

    .nav-chevron {
        width: 18px;
        height: 18px;
    }

    .nav-chevron svg {
        width: 15px;
        height: 15px;
    }

    .nav a.active::after,
    .nav-group-toggle.active::after,
    .nav-group[open]>.nav-group-toggle.active::after {
        right: -20px;
        bottom: auto;
        left: auto;
        width: 4px;
        height: 36px;
    }

    .nav-submenu {
        position: static;
        min-width: 0;
        gap: 2px;
        margin: 0 0 6px;
        padding: 0 0 0 42px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .sidebar .nav {
        flex: 1 1 auto;
        overflow: visible;
        padding: 30px 20px 0 34px;
        white-space: normal;
    }

    .header-tools {
        align-self: flex-start;
        margin: 18px 20px 0 34px;
    }

    .main {
        margin-left: 0;
    }

    .topbar {
        top: 0;
    }

    .two-col,
    .lower {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .main {
        padding: 14px;
    }

    .topbar {
        margin: 0 0 14px;
        padding: 8px 0 12px;
    }

    .topbar,
    footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .tools {
        width: 100%;
        border-radius: 18px;
        flex-wrap: wrap;
    }

    .search-wrap {
        width: 100%;
    }

    .search {
        width: 100%;
    }

    .stats,
    .side-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 28px;
    }

    .card {
        padding: 18px;
    }

    .dash-table {
        min-width: 560px;
    }

    .table-card {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* Role dashboards */
.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
    margin-bottom: 20px;
    padding: 18px 24px;
    border-radius: 14px;
}

.dashboard-welcome h2 {
    margin: 4px 0 6px;
    font-size: 24px;
    line-height: 1.2;
}

.dashboard-subtitle,
.dashboard-trend {
    color: var(--muted);
}

.dashboard-subtitle {
    margin: 0;
}

.dashboard-role-badge {
    padding: 9px 14px;
    border-radius: 999px;
    color: var(--brand);
    background: var(--brand-soft);
    font-weight: 700;
    white-space: nowrap;
}

body:not(.dark) .dashboard-role-badge {
    color: #ffffff;
    background: var(--brand-2);
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-target-card {
    margin-top: 20px;
}

.dashboard-target-progress {
    position: relative;
    height: 10px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg);
}

.dashboard-target-progress > span {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.dashboard-target-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.dashboard-stat {
    min-width: 0;
}

.dashboard-trend {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.dashboard-list,
.dashboard-actions {
    display: grid;
    gap: 12px;
}

.dashboard-list-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.dashboard-list-item:last-child {
    border-bottom: 0;
}

.dashboard-list-item small {
    color: var(--muted);
}

.dashboard-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
}

.dashboard-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--soft);
    font-weight: 700;
    text-align: left;
}

.dashboard-action:hover {
    color: var(--brand);
    border-color: var(--brand);
}

a.dashboard-action {
    text-decoration: none;
}

.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;
}

.license-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
}

.license-alert--success {
    border: 1px solid rgba(200, 159, 61, 0.35);
    color: var(--brand-2);
    background: var(--brand-pale);
}

.license-form-card {
    min-width: 0;
}

.license-form {
    display: grid;
    gap: 18px;
}

.license-options {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.license-option {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
    cursor: pointer;
}

.license-option.is-selected {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.license-option input {
    margin-top: 4px;
    accent-color: var(--brand);
}

.license-option-body {
    display: grid;
    gap: 4px;
}

.license-option-body strong {
    color: var(--ink);
}

.license-option-body small {
    color: var(--muted);
    line-height: 1.5;
}

.license-date-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.license-date-field input {
    width: 100%;
    max-width: 280px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
}

.license-date-field input:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
    outline: none;
}

.license-field-error {
    margin: 8px 0 0;
    color: var(--red);
    font-size: 14px;
}

.license-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.license-cancel {
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.license-cancel:hover {
    color: var(--brand);
}

.license-submit {
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-weight: 700;
    cursor: pointer;
}

.license-submit:hover {
    filter: brightness(1.05);
}

.license-summary {
    display: grid;
    gap: 14px;
    margin: 0;
}

.license-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.license-summary div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.license-summary dt {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
}

.license-summary dd {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    text-align: right;
}

.license-note {
    margin: 18px 0 0;
    color: var(--muted);
    line-height: 1.6;
    font-size: 14px;
}

.license-badge--active {
    color: var(--brand-2);
    background: var(--brand-pale);
}

.license-badge--expired {
    color: var(--red);
    background: rgba(238, 93, 80, 0.12);
}

.expired-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--bg);
}

.expired-card {
    width: min(100%, 560px);
    padding: 36px;
    text-align: center;
}

.expired-logo {
    width: 180px;
    height: auto;
    margin: 0 auto 24px;
}

.expired-eyebrow {
    margin: 0 0 10px;
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.expired-card h1 {
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 38px);
}

.expired-copy,
.expired-date {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.6;
}

.expired-logout {
    width: 100%;
    margin-top: 8px;
}

.logout-button {
    width: 100%;
    border: 0;
    color: var(--red);
    background: transparent;
}

/* Authentication */
.login-page {
    overflow: auto;
    background:
        radial-gradient(circle at 0% 0%, rgba(200, 159, 61, 0.06), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(200, 159, 61, 0.04), transparent 38%),
        var(--bg);
}

body.dark.login-page,
html.preload-dark .login-page {
    background:
        radial-gradient(circle at 0% 0%, rgba(200, 159, 61, 0.08), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(200, 159, 61, 0.05), transparent 36%),
        #0d0d0d;
}

.login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 20px;
}

.login-form-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 440px);
    text-align: center;
}

.login-brand {
    display: block;
    width: 180px;
    margin-bottom: 8px;
}

.login-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.login-brand .brand-logo--dark {
    display: none;
}

body.dark .login-brand .brand-logo--light {
    display: none;
}

body.dark .login-brand .brand-logo--dark {
    display: block;
}

.login-form-wrap {
    width: 100%;
    padding: 24px 0;
}

.login-card {
    width: 100%;
    padding: 32px 28px 30px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
    text-align: left;
}

.login-form-wrap h1,
.login-card h1 {
    margin: 0 0 6px;
    font-size: clamp(26px, 4vw, 32px);
    line-height: 1.2;
    text-align: center;
}

.login-copy {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.login-form {
    display: grid;
    gap: 10px;
}

.login-form label {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
}

.login-form input:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 6px;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500 !important;
}

.login-remember input {
    accent-color: var(--brand);
}

.login-submit {
    height: 46px;
    margin-top: 4px;
    border: 0;
    border-radius: 10px;
    color: #111;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 8px 20px rgba(200, 159, 61, 0.18);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(200, 159, 61, 0.24);
}

.login-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(238, 93, 80, 0.3);
    border-radius: 10px;
    color: var(--red);
    background: rgba(238, 93, 80, 0.08);
}

.login-footer {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.login-theme-toggle {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.login-theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

@media (max-width: 1100px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-form-panel {
        width: 100%;
    }

    .login-card {
        padding: 24px 20px 26px;
    }
}

@media (max-width: 760px) {
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-stats,
    .dashboard-columns {
        grid-template-columns: 1fr;
    }

    .login-card {
        border-radius: 16px;
    }

    .login-theme-toggle {
        right: 20px;
        bottom: 20px;
    }
}

/* SweetAlert2 brand theme */
.swal2-container {
    z-index: 20000;
    box-sizing: border-box !important;
}

.swal2-container:not(.app-swal-toast) {
    padding: 16px !important;
    overflow-x: hidden !important;
}

/* Toast notifications — no action buttons, compact top-end layout */
.swal2-container.app-swal-toast {
    padding: 0.75rem !important;
    overflow: visible !important;
    width: auto !important;
    max-width: 100% !important;
}

.swal2-container.app-swal-toast .swal2-popup.app-swal-toast-popup,
.swal2-container .swal2-popup.swal2-toast.app-swal-toast-popup {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(420px, calc(100vw - 1.5rem)) !important;
    margin: 0 !important;
    padding: 0.8rem 1rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-soft) !important;
    background: var(--card) !important;
    color: var(--ink) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.swal2-container.app-swal-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast.app-swal-toast-popup .swal2-title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.swal2-container.app-swal-toast .swal2-icon,
.swal2-container .swal2-popup.swal2-toast.app-swal-toast-popup .swal2-icon {
    flex-shrink: 0 !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    margin: 0 !important;
    border-width: 2px !important;
    scale: 1 !important;
}

.swal2-container.app-swal-toast .swal2-icon.swal2-success,
.swal2-container .swal2-popup.swal2-toast.app-swal-toast-popup .swal2-icon.swal2-success {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

.swal2-container.app-swal-toast .swal2-icon.swal2-error,
.swal2-container .swal2-popup.swal2-toast.app-swal-toast-popup .swal2-icon.swal2-error {
    border-color: var(--red) !important;
    color: var(--red) !important;
}

.swal2-container.app-swal-toast .swal2-actions,
.swal2-container .swal2-popup.swal2-toast .swal2-actions,
.swal2-container.app-swal-toast .swal2-confirm,
.swal2-container.app-swal-toast .swal2-cancel,
.swal2-container.app-swal-toast .swal2-deny {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.dark .swal2-container.app-swal-toast .swal2-popup.app-swal-toast-popup,
html.preload-dark .swal2-container.app-swal-toast .swal2-popup.app-swal-toast-popup {
    background: #111111 !important;
    color: #ffffff !important;
}

/* Modal dialogs */
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) {
    background: var(--card) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow) !important;
    box-sizing: border-box !important;
    width: calc(100% - 8px) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 1.5rem 1.35rem 1.25rem !important;
    overflow: hidden !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-title {
    color: var(--ink) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-html-container,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) #swal2-content {
    color: var(--muted) !important;
    font-size: 0.9rem !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    padding: 0 0.15rem !important;
    box-sizing: border-box !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-icon {
    margin: 0.75rem auto 0.5rem !important;
    border-width: 3px !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-icon.swal2-warning {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-icon.swal2-warning .swal2-icon-content {
    color: var(--brand) !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-icon.swal2-success {
    border-color: var(--brand) !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--brand) !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(200, 159, 61, 0.35) !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-icon.swal2-error {
    border-color: var(--red) !important;
    color: var(--red) !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions.app-swal-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 1.35rem 0 0 !important;
    padding: 0 !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-styled,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-confirm,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-cancel {
    margin: 0 !important;
    min-width: 96px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.swal2-container .swal2-popup.app-swal-ack .swal2-actions,
.swal2-container .swal2-popup.app-swal-single .swal2-actions {
    justify-content: center !important;
    margin-top: 1rem !important;
    gap: 0 !important;
}

.swal2-container .swal2-popup.app-swal-ack .swal2-actions button.swal2-confirm,
.swal2-container .swal2-popup.app-swal-ack button.app-swal-confirm-ack,
.swal2-container .swal2-popup.app-swal-single .swal2-actions button.swal2-confirm {
    min-width: 72px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
}

.swal2-container .swal2-popup.app-swal-ack .swal2-cancel,
.swal2-container .swal2-popup.app-swal-ack .swal2-deny,
.swal2-container .swal2-popup.app-swal-single .swal2-cancel,
.swal2-container .swal2-popup.app-swal-single .swal2-deny,
.swal2-container .swal2-popup.app-swal-validation .swal2-cancel,
.swal2-container .swal2-popup.app-swal-validation .swal2-deny {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
}

.swal2-container .swal2-popup.app-swal-delete .swal2-actions,
.swal2-container .swal2-popup.app-swal-delete .swal2-actions.app-swal-actions {
    gap: 12px !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

.swal2-container .swal2-popup.app-swal-delete .swal2-actions button.swal2-confirm,
.swal2-container .swal2-popup.app-swal-delete .swal2-actions button.swal2-cancel {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    max-width: 160px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled:focus,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-confirm:focus,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-cancel:focus,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.app-swal-confirm:focus,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.app-swal-cancel:focus {
    box-shadow: var(--ring) !important;
    outline: 0 !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-confirm,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-confirm,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-confirm.app-swal-confirm {
    border: 0 !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
    color: #111 !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-confirm:hover,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-confirm:hover,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-confirm.app-swal-confirm:hover {
    background: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;
    color: #111 !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-confirm.app-swal-confirm-danger,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-confirm.app-swal-confirm-danger,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-confirm.app-swal-confirm.app-swal-confirm-danger {
    border: 0 !important;
    background: var(--red) !important;
    color: #fff !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-confirm.app-swal-confirm-danger:hover,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-confirm.app-swal-confirm-danger:hover,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-confirm.app-swal-confirm.app-swal-confirm-danger:hover {
    background: #d94f43 !important;
    color: #fff !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-cancel,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-cancel.app-swal-cancel {
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    color: var(--ink) !important;
}

.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel:hover,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-cancel:hover,
.swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-cancel.app-swal-cancel:hover {
    border-color: rgba(200, 159, 61, 0.45) !important;
    color: var(--brand-light) !important;
    background: rgba(200, 159, 61, 0.08) !important;
}

body.dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel,
body.dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-cancel,
body.dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-cancel.app-swal-cancel,
html.preload-dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel,
html.preload-dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-cancel,
html.preload-dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-cancel.app-swal-cancel {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
}

body.dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel:hover,
body.dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-cancel:hover,
body.dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-cancel.app-swal-cancel:hover,
html.preload-dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel:hover,
html.preload-dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) .swal2-actions button.swal2-cancel:hover,
html.preload-dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) button.swal2-cancel.app-swal-cancel:hover {
    border-color: rgba(200, 159, 61, 0.45) !important;
    color: var(--brand-light) !important;
    background: rgba(200, 159, 61, 0.12) !important;
}

body.dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast),
html.preload-dark .swal2-container .swal2-popup.app-swal:not(.swal2-toast) {
    background: #111111 !important;
    color: #ffffff !important;
}

.swal2-container .swal2-timer-progress-bar {
    background: var(--brand) !important;
}

/* Shared form required + validation states */
.form-required,
.property-required,
.user-required,
.owner-required,
.rep-required {
    color: var(--red);
    font-weight: 700;
}

[class$="-field"].is-invalid input,
[class$="-field"].is-invalid select,
[class$="-field"].is-invalid textarea,
[class$="-field"].is-invalid input:focus,
[class$="-field"].is-invalid select:focus,
[class$="-field"].is-invalid textarea:focus,
input.is-invalid-input,
select.is-invalid-input,
textarea.is-invalid-input,
input.is-invalid-input:focus,
select.is-invalid-input:focus,
textarea.is-invalid-input:focus,
.searchable-select-input.is-invalid-input,
.searchable-select-input.is-invalid-input:focus,
.license-date-field.is-invalid input,
.license-date-field.is-invalid input:focus,
.license-options.is-invalid {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(238, 93, 80, 0.18) !important;
    background: rgba(238, 93, 80, 0.08) !important;
}

[class$="-field"].is-invalid,
.license-date-field.is-invalid {
    animation: form-invalid-pulse 1.4s ease;
}

.license-options.is-invalid {
    border-radius: 12px;
    padding: 4px;
}

.login-form input.is-invalid-input,
.login-form input.is-invalid-input:focus {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(238, 93, 80, 0.18) !important;
    background: rgba(238, 93, 80, 0.08) !important;
}

[class$="-field"].is-invalid>label,
.license-date-field.is-invalid>label,
.login-form label.is-invalid-label {
    color: var(--red);
}

@keyframes form-invalid-pulse {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-2px);
    }

    40% {
        transform: translateX(2px);
    }

    60% {
        transform: translateX(-1px);
    }

    80% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}

.app-swal-error-list {
    margin: 0.35rem 0 0;
    padding-left: 18px;
    text-align: left;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.app-swal-error-list li+li {
    margin-top: 6px;
}

.swal2-container .swal2-popup.app-swal-validation .swal2-title {
    font-size: 1.05rem !important;
}

.swal2-container .swal2-popup.app-swal-validation .swal2-html-container,
.swal2-container .swal2-popup.app-swal-ack .swal2-html-container {
    margin-top: 0.5rem !important;
}

.swal2-container .swal2-popup.app-swal-validation .swal2-actions,
.swal2-container .swal2-popup.app-swal-ack .swal2-actions {
    margin-top: 0.85rem !important;
    justify-content: center !important;
}

.swal2-container .swal2-popup.app-swal-validation .swal2-actions .swal2-styled.swal2-confirm,
.swal2-container .swal2-popup.app-swal-validation button.swal2-confirm.app-swal-confirm,
.swal2-container .swal2-popup.app-swal-ack button.swal2-confirm.app-swal-confirm-ack {
    min-width: 72px !important;
    max-width: none !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.swal2-container .swal2-popup.app-swal-validation .swal2-actions .swal2-styled.swal2-confirm:hover,
.swal2-container .swal2-popup.app-swal-validation button.swal2-confirm.app-swal-confirm:hover,
.swal2-container .swal2-popup.app-swal-ack button.swal2-confirm.app-swal-confirm-ack:hover {
    background: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;
    color: #111 !important;
}

/* ==========================================================================
   Admin ledger pages (shared list/table framework)
   Used by: properties, media, documents, unit requests, owners, users,
   client representatives, developers, projects index views.
   Page-specific variations are scoped by table id (e.g. #owners-table).
   ========================================================================== */

[hidden] {
    display: none !important;
}

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

.ledger-panel {
    padding: 18px 20px 16px;
    overflow: hidden;
}

.ledger-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ledger-stats {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ledger-stat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

body:not(.dark) .ledger-stat {
    background: rgba(0, 0, 0, .02);
}

.ledger-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    line-height: 0;
    font-size: 0;
    color: var(--brand-light);
    background: rgba(200, 159, 61, .4);
}

body:not(.dark) .ledger-stat__icon {
    color: #ffffff;
    background: var(--brand-2);
}

.ledger-stat__icon svg {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    fill: currentColor;
}

.ledger-stat__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
}

.ledger-stat strong {
    font-size: 18px;
    line-height: 1;
}

.ledger-stat__label {
    display: block;
    color: var(--muted-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ledger-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ledger-add--secondary {
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
}

.ledger-filters {
    margin: 0 0 16px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.ledger-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ledger-filters__title {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ledger-filters__row,
.ledger-filters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: end;
}

.ledger-filters__field--wide {
    grid-column: span 2;
}

.ledger-filters__checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    min-height: 38px;
}

.ledger-filters__field label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.ledger-filters__field input,
.ledger-filters__field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: 0;
    background: rgba(255, 255, 255, .03);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

body:not(.dark) .ledger-filters__field input,
body:not(.dark) .ledger-filters__field select {
    background: rgba(0, 0, 0, .02);
}

.ledger-filters__field input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.ledger-filters__field input:focus,
.ledger-filters__field select:focus {
    border-color: rgba(200, 159, 61, .55);
    box-shadow: var(--ring);
}

.ledger-filters__field {
    position: relative;
}

.ledger-filters__field select.searchable-select-native {
    position: absolute;
    width: 1px;
    min-height: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.ledger-filters__field .searchable-select-input {
    min-height: 40px;
    padding: 8px 34px 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    background: rgba(255, 255, 255, .03);
}

body:not(.dark) .ledger-filters__field .searchable-select-input {
    background: rgba(0, 0, 0, .02);
}

.ledger-filters__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.ledger-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ledger-filter-btn--primary {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.ledger-filter-btn--primary:hover {
    background: var(--brand-2);
    border-color: var(--brand-2);
}

.ledger-filter-btn--ghost {
    color: var(--muted);
    background: transparent;
    border-color: var(--line);
}

.ledger-filter-btn--ghost:hover {
    color: var(--ink);
    border-color: rgba(200, 159, 61, .45);
}

@media (max-width: 1100px) {
    .ledger-filters__row,
    .ledger-filters__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .ledger-filters__head {
        flex-direction: column;
        align-items: stretch;
    }

    .ledger-filters__actions {
        justify-content: flex-end;
    }

    .ledger-filters__row,
    .ledger-filters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ledger-filters__field--wide {
        grid-column: span 2;
    }
}

@media (max-width: 520px) {
    .ledger-filters__row,
    .ledger-filters__grid {
        grid-template-columns: 1fr;
    }

    .ledger-filters__field--wide {
        grid-column: span 1;
    }
}

.request-output {
    display: block;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
    color: var(--muted);
    font-size: 14px;
}

.ledger-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: #111;
    background: var(--brand);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ledger-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.ledger-tab {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.ledger-tab.is-active {
    border-color: rgba(200, 159, 61, .4);
    color: var(--brand-light);
    background: rgba(200, 159, 61, .4);
}

/* DataTables toolbar (search + filters) */
.ledger-dt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    width: 100%;
}

.ledger-dt-toolbar .dataTables_filter,
.ledger-dt-toolbar .ledger-listing-filter,
.ledger-dt-toolbar .ledger-status-filter,
.ledger-dt-toolbar .ledger-type-filter,
.ledger-dt-toolbar .ledger-urgency-filter,
.ledger-dt-toolbar .ledger-developer-filter,
.ledger-dt-toolbar .ledger-relationship-filter {
    margin: 0;
    float: none;
}

/* Must beat DataTables CDN rules (.dataTables_wrapper .dataTables_filter input { padding: 5px })
   which load after style.css via @yield('style'). */
div.dataTables_wrapper .ledger-dt-toolbar .dataTables_filter {
    flex: 1 1 280px;
    min-width: 0;
    text-align: left;
}

div.dataTables_wrapper .ledger-dt-toolbar .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    margin: 0;
    /* Hide DataTables "Search:" label text without affecting the input */
    font-size: 0;
    color: transparent;
    line-height: 0;
}

div.dataTables_wrapper .ledger-dt-toolbar .dataTables_filter input {
    width: 100%;
    min-height: 40px;
    margin: 0;
    /* Extra left padding so placeholder/typed text clears the search icon */
    padding: 10px 16px 10px 44px !important;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .04) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a3a3a3'%3E%3Cpath d='M10.5 3a7.5 7.5 0 1 0 4.77 13.27l4.22 4.22 1.41-1.41-4.22-4.22A7.47 7.47 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px 16px !important;
    color: var(--ink) !important;
    caret-color: var(--ink);
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.4;
    -webkit-text-fill-color: var(--ink);
}

div.dataTables_wrapper .ledger-dt-toolbar .dataTables_filter input::placeholder {
    color: var(--muted);
    opacity: 1;
    -webkit-text-fill-color: var(--muted);
}

div.dataTables_wrapper .ledger-dt-toolbar .dataTables_filter input::-webkit-input-placeholder {
    color: var(--muted);
    -webkit-text-fill-color: var(--muted);
}

div.dataTables_wrapper .ledger-dt-toolbar .dataTables_filter input::-moz-placeholder {
    color: var(--muted);
    opacity: 1;
}

body:not(.dark) div.dataTables_wrapper .ledger-dt-toolbar .dataTables_filter input {
    background-color: rgba(0, 0, 0, .03) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M10.5 3a7.5 7.5 0 1 0 4.77 13.27l4.22 4.22 1.41-1.41-4.22-4.22A7.47 7.47 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E") !important;
}

div.dataTables_wrapper .ledger-dt-toolbar .dataTables_filter input:focus {
    border-color: rgba(200, 159, 61, .55);
    outline: 0;
    box-shadow: var(--ring);
}

.ledger-dt-toolbar .dataTables_length {
    display: none;
}

.ledger-listing-filter,
.ledger-status-filter,
.ledger-type-filter,
.ledger-urgency-filter,
.ledger-developer-filter,
.ledger-relationship-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ledger-listing-filter select,
.ledger-status-filter select,
.ledger-type-filter select,
.ledger-urgency-filter select,
.ledger-developer-filter select,
.ledger-relationship-filter select {
    min-height: 40px;
    min-width: 140px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.ledger-type-filter select {
    min-width: 160px;
}

.ledger-developer-filter select {
    min-width: 180px;
}

.ledger-relationship-filter select {
    min-width: 190px;
}

body:not(.dark) .ledger-listing-filter select,
body:not(.dark) .ledger-status-filter select,
body:not(.dark) .ledger-type-filter select,
body:not(.dark) .ledger-urgency-filter select,
body:not(.dark) .ledger-developer-filter select,
body:not(.dark) .ledger-relationship-filter select {
    background: rgba(0, 0, 0, .02);
}

.ledger-listing-filter select:focus,
.ledger-status-filter select:focus,
.ledger-type-filter select:focus,
.ledger-urgency-filter select:focus,
.ledger-developer-filter select:focus,
.ledger-relationship-filter select:focus {
    border-color: rgba(200, 159, 61, .55);
    outline: 0;
    box-shadow: var(--ring);
}

/* Table */
.ledger-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

table.ledger-table {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
}

table.ledger-table thead th {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    background: transparent;
}

table.ledger-table tbody td {
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 13px;
}

table.ledger-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Per-page fixed widths for the actions column */
#properties-table th:last-child,
#properties-table td.ledger-actions {
    width: 280px;
    min-width: 240px;
    max-width: 320px;
    padding-right: 4px;
    white-space: normal;
}

#unit-requests-table {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0;
}

.ledger-table-wrap:has(#unit-requests-table) {
    overflow-x: hidden;
}

#unit-requests-table th,
#unit-requests-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    width: auto;
    padding-right: 10px;
    vertical-align: middle;
}

#unit-requests-table th:nth-child(1),
#unit-requests-table td:nth-child(1) { width: 15%; }
#unit-requests-table th:nth-child(2),
#unit-requests-table td:nth-child(2) { width: 9%; }
#unit-requests-table th:nth-child(3),
#unit-requests-table td:nth-child(3) { width: 11%; }
#unit-requests-table th:nth-child(4),
#unit-requests-table td:nth-child(4) { width: 12%; }
#unit-requests-table th:nth-child(5),
#unit-requests-table td:nth-child(5) { width: 12%; }
#unit-requests-table th:nth-child(6),
#unit-requests-table td:nth-child(6) { width: 8%; }
#unit-requests-table th:nth-child(7),
#unit-requests-table td:nth-child(7) { width: 9%; }
#unit-requests-table th:nth-child(8),
#unit-requests-table td:nth-child(8) { width: 5%; }
#unit-requests-table th:nth-child(9),
#unit-requests-table td:nth-child(9) { width: 7%; }

#unit-requests-table .ledger-pill,
#unit-requests-table .ledger-status {
    white-space: nowrap;
    max-width: 100%;
}

#unit-requests-table .ledger-request {
    min-width: 0;
}

#unit-requests-table .ledger-request__name {
    min-width: 0;
}

#unit-requests-table .ledger-request__name strong,
#unit-requests-table .ledger-request__name small {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#unit-requests-table th:last-child,
#unit-requests-table td.ledger-actions {
    width: 14%;
    min-width: 210px;
    max-width: none;
    padding-right: 4px;
    white-space: nowrap;
}

#properties-table .ledger-actions__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    max-width: 100%;
}

#unit-requests-table .ledger-actions__group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    max-width: none;
    white-space: nowrap;
}

#unit-requests-table .ledger-action {
    flex: 0 0 auto;
    padding: 0 8px;
}

#properties-table td.ledger-location-cell,
#properties-table td.ledger-muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#media-table th:last-child,
#media-table td.ledger-actions {
    width: 220px;
    min-width: 220px;
}

#documents-table th:last-child,
#documents-table td.ledger-actions {
    width: 240px;
    min-width: 240px;
}

#reviews-table th:last-child,
#reviews-table td.ledger-actions {
    width: 280px;
    min-width: 280px;
}

#reviews-history-table th:last-child,
#reviews-history-table td.ledger-actions {
    width: 90px;
    min-width: 90px;
}

#duplicates-table th:last-child,
#duplicates-table td.ledger-actions {
    width: 360px;
    min-width: 360px;
}

#projects-table th:last-child,
#projects-table td.ledger-actions {
    width: 260px;
    min-width: 260px;
}

#developers-table th:last-child,
#developers-table td.ledger-actions {
    width: 380px;
    min-width: 380px;
}

#inventory-search-table th:last-child,
#inventory-search-table td.ledger-actions,
#sales-activity-table th:last-child,
#sales-activity-table td.ledger-actions {
    width: 280px;
    min-width: 260px;
}

#inventory-search-table td.ledger-actions,
#sales-activity-table td.ledger-actions {
    white-space: nowrap;
}

#inventory-search-table .ledger-actions__group,
#sales-activity-table .ledger-actions__group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

#projects-table td.ledger-actions,
#developers-table td.ledger-actions {
    white-space: nowrap;
}

#projects-table .ledger-actions__group,
#developers-table .ledger-actions__group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

/* Primary cell (entity name + avatar) */
.ledger-property,
.ledger-media,
.ledger-document,
.ledger-request {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ledger-owner,
.ledger-user,
.ledger-person,
.ledger-developer,
.ledger-project {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.ledger-project {
    min-width: 180px;
}

.ledger-property__name,
.ledger-request__name,
.ledger-project__name {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ledger-owner__name,
.ledger-user__name,
.ledger-person__name,
.ledger-developer__name {
    display: grid;
    gap: 2px;
}

.ledger-property__name strong,
.ledger-request__name strong,
.ledger-project__name strong,
.ledger-owner__name strong,
.ledger-user__name strong,
.ledger-person__name strong,
.ledger-developer__name strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.ledger-property__name small,
.ledger-request__name small,
.ledger-project__name small,
.ledger-owner__name small,
.ledger-user__name small,
.ledger-person__name small,
.ledger-developer__name small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

/* Avatar (default: gold rounded square; per-page overrides below) */
.ledger-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
    color: #f5d78e;
    background: rgba(200, 159, 61, .18);
}

body:not(.dark) .ledger-avatar {
    color: #ffffff;
    background: var(--brand-2);
}

#owners-table .ledger-avatar,
#users-table .ledger-avatar,
#representatives-table .ledger-avatar {
    border-radius: 50%;
    font-size: 11px;
}

#developers-table .ledger-avatar {
    font-size: 11px;
    color: #93c5fd;
    background: rgba(59, 130, 246, .16);
}

body:not(.dark) #developers-table .ledger-avatar {
    color: #ffffff;
    background: #171717;
}

#projects-table .ledger-avatar {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .16);
}

body:not(.dark) #projects-table .ledger-avatar {
    color: #ffffff;
    background: #059669;
}

/* Owner types */
.ledger-avatar--individual {
    color: #f5d78e;
    background: rgba(200, 159, 61, .18);
}

.ledger-avatar--company {
    color: #93c5fd;
    background: rgba(59, 130, 246, .16);
}

.ledger-avatar--joint {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .18);
}

.ledger-avatar--poa {
    color: #fdba74;
    background: rgba(249, 115, 22, .16);
}

/* User roles */
.ledger-avatar--listing-manager {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .18);
}

.ledger-avatar--listing-agent {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .16);
}

.ledger-avatar--sales-agent {
    color: #fdba74;
    background: rgba(249, 115, 22, .16);
}

.ledger-avatar--admin {
    color: #f5d78e;
    background: rgba(200, 159, 61, .18);
}

.ledger-avatar--manager {
    color: #93c5fd;
    background: rgba(59, 130, 246, .16);
}

/* Representative relationships */
#representatives-table .ledger-avatar--poa,
.ledger-avatar--lawyer {
    color: #f5d78e;
    background: rgba(200, 159, 61, .18);
}

.ledger-avatar--family,
.ledger-avatar--friend {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .16);
}

.ledger-avatar--broker,
.ledger-avatar--assistant,
.ledger-avatar--other {
    color: #fdba74;
    background: rgba(249, 115, 22, .16);
}

body:not(.dark) .ledger-avatar--individual,
body:not(.dark) .ledger-avatar--admin,
body:not(.dark) #representatives-table .ledger-avatar--poa,
body:not(.dark) .ledger-avatar--lawyer {
    color: #ffffff;
    background: var(--brand-2);
}

body:not(.dark) .ledger-avatar--company,
body:not(.dark) .ledger-avatar--manager {
    color: #ffffff;
    background: #171717;
}

body:not(.dark) .ledger-avatar--joint,
body:not(.dark) .ledger-avatar--listing-manager {
    color: #ffffff;
    background: #7c3aed;
}

body:not(.dark) .ledger-avatar--poa,
body:not(.dark) .ledger-avatar--sales-agent,
body:not(.dark) .ledger-avatar--broker,
body:not(.dark) .ledger-avatar--assistant,
body:not(.dark) .ledger-avatar--other {
    color: #ffffff;
    background: #ea580c;
}

body:not(.dark) .ledger-avatar--listing-agent,
body:not(.dark) .ledger-avatar--family,
body:not(.dark) .ledger-avatar--friend {
    color: #ffffff;
    background: #059669;
}

/* Media / document previews */
.ledger-media__thumb,
.ledger-media__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
}

body:not(.dark) .ledger-media__thumb,
body:not(.dark) .ledger-media__icon {
    background: rgba(0, 0, 0, .03);
}

.ledger-media__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ledger-media__icon {
    color: var(--brand-light);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.ledger-media__body,
.ledger-document__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ledger-media__body strong,
.ledger-document__body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger-media__body small,
.ledger-document__body small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

.ledger-document__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    color: var(--brand-light);
    background: rgba(200, 159, 61, .12);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Text helpers */
.ledger-email,
.ledger-phone,
.ledger-date,
.ledger-muted,
.ledger-price {
    color: var(--muted);
    font-size: 13px;
}

.ledger-email {
    white-space: normal;
    word-break: break-word;
}

.ledger-phone,
.ledger-date {
    white-space: nowrap;
}

.ledger-price {
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

.ledger-code {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(200, 159, 61, .45);
    border-radius: 8px;
    color: var(--brand-light);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
}

.ledger-count {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(200, 159, 61, .45);
    border-radius: 8px;
    color: var(--brand-light);
    font-size: 11px;
    font-weight: 700;
}

/* Pills (type / category badges) */
.ledger-pill,
.ledger-status,
.ledger-type,
.ledger-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ledger-pill__dot,
.ledger-status__dot,
.ledger-type__dot,
.ledger-role__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ledger-pill--sale {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.ledger-pill--sale .ledger-pill__dot {
    background: #3b82f6;
}

.ledger-pill--rent {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.ledger-pill--rent .ledger-pill__dot {
    background: #8b5cf6;
}

.ledger-pill--off-plan {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.ledger-pill--off-plan .ledger-pill__dot {
    background: #f97316;
}

.ledger-pill--ready {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .14);
}

.ledger-pill--ready .ledger-pill__dot {
    background: #10b981;
}

.ledger-pill--image {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.ledger-pill--image .ledger-pill__dot {
    background: #3b82f6;
}

.ledger-pill--video {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.ledger-pill--video .ledger-pill__dot {
    background: #8b5cf6;
}

.ledger-pill--layout {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.ledger-pill--layout .ledger-pill__dot {
    background: #f97316;
}

.ledger-pill--brochure {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .14);
}

.ledger-pill--brochure .ledger-pill__dot {
    background: #10b981;
}

.ledger-pill--360 {
    color: #f5d78e;
    background: rgba(200, 159, 61, .14);
}

.ledger-pill--360 .ledger-pill__dot {
    background: var(--brand);
}

.ledger-pill--spa {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.ledger-pill--spa .ledger-pill__dot {
    background: #3b82f6;
}

.ledger-pill--title {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .14);
}

.ledger-pill--title .ledger-pill__dot {
    background: #10b981;
}

.ledger-pill--poa {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.ledger-pill--poa .ledger-pill__dot {
    background: #8b5cf6;
}

.ledger-pill--tenancy {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.ledger-pill--tenancy .ledger-pill__dot {
    background: #f97316;
}

.ledger-pill--mortgage {
    color: #f5d78e;
    background: rgba(200, 159, 61, .14);
}

.ledger-pill--mortgage .ledger-pill__dot {
    background: var(--brand);
}

.ledger-pill--receipt {
    color: #86efac;
    background: rgba(34, 197, 94, .14);
}

.ledger-pill--receipt .ledger-pill__dot {
    background: #22c55e;
}

.ledger-pill--other {
    color: var(--muted);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
}

.ledger-pill--other .ledger-pill__dot {
    background: var(--muted);
}

/* Status badges */
.ledger-status--draft {
    color: #f5d78e;
    background: rgba(200, 159, 61, .14);
}

.ledger-status--draft .ledger-pill__dot {
    background: var(--brand);
}

.ledger-status--open {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.ledger-status--open .ledger-pill__dot {
    background: #3b82f6;
}

.ledger-status--pipeline {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.ledger-status--pipeline .ledger-pill__dot {
    background: #8b5cf6;
}

#properties-table .ledger-status--pipeline {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

#properties-table .ledger-status--pipeline .ledger-pill__dot {
    background: #3b82f6;
}

.ledger-status--warning {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.ledger-status--warning .ledger-pill__dot {
    background: #f97316;
}

.ledger-status--pending {
    color: #fbbf24;
    background: rgba(251, 191, 36, .14);
}

.ledger-status--pending .ledger-pill__dot {
    background: #f59e0b;
}

.ledger-status--approved {
    color: #86efac;
    background: rgba(34, 197, 94, .14);
}

.ledger-status--approved .ledger-pill__dot {
    background: #22c55e;
}

.ledger-status--active {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .14);
}

.ledger-status--active .ledger-pill__dot {
    background: #10b981;
}

.ledger-status--reserved {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.ledger-status--reserved .ledger-pill__dot {
    background: #8b5cf6;
}

.ledger-status--closed {
    color: #fca5a5;
    background: rgba(239, 68, 68, .14);
}

.ledger-status--closed .ledger-pill__dot {
    background: #ef4444;
}

.ledger-status--rejected {
    color: #fca5a5;
    background: rgba(239, 68, 68, .14);
}

.ledger-status--rejected .ledger-pill__dot {
    background: #ef4444;
}

.ledger-status--archived {
    color: var(--muted);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
}

.ledger-status--archived .ledger-pill__dot {
    background: var(--muted);
}

/* Users page uses bordered active/inactive badges with .ledger-status__dot */
#users-table .ledger-status--active {
    color: #6ee7b7;
    border: 1px solid rgba(52, 211, 153, .35);
    background: rgba(16, 185, 129, .08);
}

#users-table .ledger-status--active .ledger-status__dot {
    background: #34d399;
}

.ledger-status--inactive {
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, .35);
    background: rgba(239, 68, 68, .08);
}

.ledger-status--inactive .ledger-status__dot {
    background: #f87171;
}

/* Representative yes/no badges */
.ledger-status--yes {
    color: #6ee7b7;
    border: 1px solid rgba(52, 211, 153, .35);
    background: rgba(16, 185, 129, .08);
}

.ledger-status--no {
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, .35);
    background: rgba(239, 68, 68, .08);
}

.ledger-status--not_applicable {
    color: var(--muted);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
}

/* Urgency badges (unit requests) */
.ledger-urgency--immediate {
    color: #fca5a5;
    background: rgba(239, 68, 68, .12);
}

.ledger-urgency--week {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.ledger-urgency--month {
    color: #fbbf24;
    background: rgba(251, 191, 36, .14);
}

.ledger-urgency--flexible {
    color: var(--muted);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
}

/* Owner type badges */
.ledger-type--individual {
    color: #f5d78e;
    background: rgba(200, 159, 61, .14);
}

.ledger-type--individual .ledger-type__dot {
    background: var(--brand);
}

.ledger-type--company {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.ledger-type--company .ledger-type__dot {
    background: #3b82f6;
}

.ledger-type--joint {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.ledger-type--joint .ledger-type__dot {
    background: #8b5cf6;
}

.ledger-type--poa {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.ledger-type--poa .ledger-type__dot {
    background: #f97316;
}

/* Role badges (users + representatives) */
.ledger-role--listing-manager {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.ledger-role--listing-manager .ledger-role__dot {
    background: #8b5cf6;
}

.ledger-role--listing-agent {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .14);
}

.ledger-role--listing-agent .ledger-role__dot {
    background: #10b981;
}

.ledger-role--sales-agent {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.ledger-role--sales-agent .ledger-role__dot {
    background: #f97316;
}

.ledger-role--admin {
    color: #f5d78e;
    background: rgba(200, 159, 61, .14);
}

.ledger-role--admin .ledger-role__dot {
    background: var(--brand);
}

.ledger-role--manager {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.ledger-role--manager .ledger-role__dot {
    background: #3b82f6;
}

.ledger-role--poa,
.ledger-role--lawyer {
    color: #f5d78e;
    background: rgba(200, 159, 61, .14);
}

.ledger-role--poa .ledger-role__dot,
.ledger-role--lawyer .ledger-role__dot {
    background: var(--brand);
}

.ledger-role--family,
.ledger-role--friend {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .14);
}

.ledger-role--family .ledger-role__dot,
.ledger-role--friend .ledger-role__dot {
    background: #10b981;
}

.ledger-role--company {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.ledger-role--company .ledger-role__dot {
    background: #3b82f6;
}

.ledger-role--broker,
.ledger-role--assistant,
.ledger-role--other {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.ledger-role--broker .ledger-role__dot,
.ledger-role--assistant .ledger-role__dot,
.ledger-role--other .ledger-role__dot {
    background: #f97316;
}

/* Small flags */
.ledger-confidential {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    color: #fca5a5;
    background: rgba(239, 68, 68, .1);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ledger-flag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    margin-right: 4px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ledger-flag--confidential {
    color: #fca5a5;
    background: rgba(239, 68, 68, .1);
}

.ledger-flag--required {
    color: #f5d78e;
    background: rgba(200, 159, 61, .14);
}

.ledger-reject-reason {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

/* Row actions */
.ledger-actions {
    white-space: nowrap;
}

.ledger-actions__group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;
}

.ledger-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font: inherit;
    white-space: nowrap;
    flex: 0 0 auto;
}

.ledger-action--view {
    border: 1px solid var(--line);
    color: var(--ink);
    background: rgba(255, 255, 255, .04);
}

body:not(.dark) .ledger-action--view {
    background: rgba(0, 0, 0, .03);
}

.ledger-action--edit {
    border: 1px solid rgba(200, 159, 61, .4);
    color: var(--brand-light);
    background: rgba(200, 159, 61, .12);
}

.ledger-action--download {
    border: 1px solid rgba(200, 159, 61, .4);
    color: var(--brand-light);
    background: rgba(200, 159, 61, .12);
}

.ledger-action--approve {
    border: 1px solid rgba(34, 197, 94, .35);
    color: #86efac;
    background: rgba(34, 197, 94, .1);
}

.ledger-action--return {
    border: 1px solid rgba(249, 115, 22, .4);
    color: #fdba74;
    background: rgba(249, 115, 22, .1);
}

.ledger-action--reject {
    border: 1px solid rgba(248, 113, 113, .35);
    color: #fca5a5;
    background: rgba(239, 68, 68, .08);
}

.ledger-action--delete {
    border: 1px solid rgba(248, 113, 113, .35);
    color: #fca5a5;
    background: rgba(239, 68, 68, .08);
}

/* Light theme: solid darker badge backgrounds for clear visibility */
body:not(.dark) .ledger-pill--sale,
body:not(.dark) .ledger-pill--image,
body:not(.dark) .ledger-pill--spa,
body:not(.dark) .ledger-status--open,
body:not(.dark) #properties-table .ledger-status--pipeline,
body:not(.dark) .ledger-type--company,
body:not(.dark) .ledger-role--manager,
body:not(.dark) .ledger-role--company {
    color: #ffffff;
    background: #171717;
    border: 0;
}

body:not(.dark) .ledger-pill--rent,
body:not(.dark) .ledger-pill--video,
body:not(.dark) .ledger-pill--poa,
body:not(.dark) .ledger-status--pipeline,
body:not(.dark) .ledger-status--reserved,
body:not(.dark) .ledger-type--joint,
body:not(.dark) .ledger-role--listing-manager {
    color: #ffffff;
    background: #7c3aed;
    border: 0;
}

body:not(.dark) .ledger-pill--off-plan,
body:not(.dark) .ledger-pill--layout,
body:not(.dark) .ledger-pill--tenancy,
body:not(.dark) .ledger-status--warning,
body:not(.dark) .ledger-urgency--week,
body:not(.dark) .ledger-type--poa,
body:not(.dark) .ledger-role--sales-agent,
body:not(.dark) .ledger-role--broker,
body:not(.dark) .ledger-role--assistant,
body:not(.dark) .ledger-role--other {
    color: #ffffff;
    background: #ea580c;
    border: 0;
}

body:not(.dark) .ledger-pill--ready,
body:not(.dark) .ledger-pill--brochure,
body:not(.dark) .ledger-pill--title,
body:not(.dark) .ledger-status--active,
body:not(.dark) .ledger-role--listing-agent,
body:not(.dark) .ledger-role--family,
body:not(.dark) .ledger-role--friend,
body:not(.dark) #users-table .ledger-status--active,
body:not(.dark) .ledger-status--yes {
    color: #ffffff;
    background: #059669;
    border: 0;
}

body:not(.dark) .ledger-pill--receipt,
body:not(.dark) .ledger-status--approved {
    color: #ffffff;
    background: #16a34a;
    border: 0;
}

body:not(.dark) .ledger-pill--360,
body:not(.dark) .ledger-pill--mortgage,
body:not(.dark) .ledger-status--draft,
body:not(.dark) .ledger-type--individual,
body:not(.dark) .ledger-role--admin,
body:not(.dark) .ledger-role--poa,
body:not(.dark) .ledger-role--lawyer,
body:not(.dark) .ledger-flag--required {
    color: #ffffff;
    background: #a67f2f;
    border: 0;
}

body:not(.dark) .ledger-status--pending,
body:not(.dark) .ledger-urgency--month {
    color: #ffffff;
    background: #d97706;
    border: 0;
}

body:not(.dark) .ledger-status--closed,
body:not(.dark) .ledger-status--rejected,
body:not(.dark) .ledger-status--inactive,
body:not(.dark) .ledger-status--no,
body:not(.dark) .ledger-urgency--immediate,
body:not(.dark) .ledger-confidential,
body:not(.dark) .ledger-flag--confidential {
    color: #ffffff;
    background: #dc2626;
    border: 0;
}

body:not(.dark) .ledger-pill--other,
body:not(.dark) .ledger-status--archived,
body:not(.dark) .ledger-status--not_applicable,
body:not(.dark) .ledger-urgency--flexible {
    color: #ffffff;
    background: #525252;
    border: 0;
}

body:not(.dark) .ledger-pill__dot,
body:not(.dark) .ledger-status__dot,
body:not(.dark) .ledger-type__dot,
body:not(.dark) .ledger-role__dot {
    background: rgba(255, 255, 255, .92);
}

body:not(.dark) .ledger-action--edit,
body:not(.dark) .ledger-action--download {
    color: #ffffff;
    border-color: transparent;
    background: #a67f2f;
}

body:not(.dark) .ledger-action--approve {
    color: #ffffff;
    border-color: transparent;
    background: #16a34a;
}

body:not(.dark) .ledger-action--return {
    color: #ffffff;
    border-color: transparent;
    background: #ea580c;
}

body:not(.dark) .ledger-action--reject,
body:not(.dark) .ledger-action--delete {
    color: #ffffff;
    border-color: transparent;
    background: #dc2626;
}

body:not(.dark) .ledger-tab {
    color: #404040;
    background: #efefef;
    border-color: #d4d4d4;
}

body:not(.dark) .ledger-tab.is-active {
    color: #ffffff;
    background: var(--brand-2);
    border-color: var(--brand-2);
}

.ledger-action-form {
    display: inline-flex;
    margin: 0;
    vertical-align: middle;
}

/* DataTables footer (info + dot pagination) */
.ledger-dt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.ledger-dt-footer .dataTables_info {
    padding: 0;
    color: var(--muted);
    font-size: 12px;
    float: none;
}

.ledger-dt-footer .dataTables_paginate {
    float: none;
    padding: 0;
}

.ledger-dt-footer .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8px;
    min-height: 8px;
    margin: 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--line) !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
}

.ledger-dt-footer .dataTables_paginate .paginate_button.current {
    background: var(--brand) !important;
    transform: scale(1.15);
}

.ledger-dt-footer .dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--muted) !important;
    color: transparent !important;
    border: 0 !important;
}

.ledger-dt-footer .dataTables_paginate .paginate_button.previous,
.ledger-dt-footer .dataTables_paginate .paginate_button.next {
    display: none !important;
}

.dataTables_wrapper .dataTables_processing {
    background: var(--card);
    color: var(--muted);
}

.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody {
    overflow: visible !important;
}

.ledger-page .dashboard-role-badge {
    color: var(--brand-light);
    background: rgba(200, 159, 61, .4);
}

body:not(.dark) .ledger-page .dashboard-role-badge {
    color: #ffffff;
    background: var(--brand-2);
}

@media (max-width: 760px) {
    .ledger-dt-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ledger-listing-filter,
    .ledger-status-filter,
    .ledger-type-filter,
    .ledger-urgency-filter,
    .ledger-developer-filter,
    .ledger-relationship-filter {
        width: 100%;
    }

    .ledger-listing-filter select,
    .ledger-status-filter select,
    .ledger-type-filter select,
    .ledger-urgency-filter select,
    .ledger-developer-filter select,
    .ledger-relationship-filter select {
        width: 100%;
    }
}

/* ==========================================================================
   Admin form pages
   ========================================================================== */

/* Property create/edit */
.property-form {
    display: grid;
    gap: 28px;
    overflow: visible;
}

.property-choices {
    display: grid;
    gap: 14px;
}

.property-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.property-choice-card {
    display: grid;
    grid-template-columns: 1fr 1fr 1.8fr;
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    text-align: left;
    cursor: pointer;
}

.property-choice-card:hover,
.property-choice-card:focus-visible {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.property-choice-card[aria-checked="true"] {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 9%, var(--card));
    box-shadow: inset 0 0 0 1px var(--brand);
}

.property-choice-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.property-choice-cell span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.property-choice-cell strong {
    font-size: 14px;
    line-height: 1.35;
}

.property-choice-cell p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.property-form-shell[hidden] {
    display: none;
}

.property-form-shell {
    display: grid;
    gap: 28px;
    overflow: visible;
}

.property-upload-panel {
    border: 1px dashed var(--brand);
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
}

.property-form-card {
    position: relative;
    padding: 26px;
    overflow: visible;
}

.property-form-card .card-head {
    margin-bottom: 20px;
}

.property-form-card h2 {
    margin: 3px 0 0;
}

.property-form-card--highlight,
.rep-form-card.property-form-card--highlight {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent);
    animation: property-form-highlight 1.2s ease-in-out 2;
}

@keyframes property-form-highlight {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent); }
    50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 75%, transparent); }
}

.property-field-help,
.property-owner-empty {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.property-owner-empty {
    margin: 0 24px 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 8%, var(--card));
}

.property-owner-empty a {
    color: var(--brand-2);
    font-weight: 600;
    text-decoration: none;
}

.property-field.is-invalid .searchable-select-input,
.searchable-select.is-invalid .searchable-select-input {
    border-color: var(--red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent);
}

#owner_id_field.is-invalid > label,
#owner_id_field.is-invalid .property-field-help {
    color: var(--red);
}

.property-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.property-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.property-field {
    display: grid;
    grid-template-rows: auto minmax(46px, auto) minmax(18px, auto);
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.property-field--full {
    grid-column: 1 / -1;
}

.property-field label,
.property-field legend {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.property-field input:not([type="checkbox"]):not([type="radio"]),
.property-field select,
.property-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.property-field textarea {
    min-height: 96px;
    resize: vertical;
}

.property-field input:not([type="checkbox"]):not([type="radio"]):focus,
.property-field select:focus,
.property-field textarea:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.property-field select.searchable-select-native {
    position: absolute;
    width: 1px;
    min-height: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.owner-field select.searchable-select-native {
    position: absolute;
    width: 1px;
    min-height: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.searchable-select {
    position: relative;
    width: 100%;
    z-index: 1;
}

.searchable-select:focus-within,
.searchable-select.is-open {
    z-index: 10050;
}

.property-field.is-searchable-open {
    position: relative;
    z-index: 10040;
}

.property-form-card.is-searchable-open {
    z-index: 10030;
}

.searchable-select-input {
    width: 100%;
    min-height: 46px;
    padding: 10px 38px 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.searchable-select-input:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.searchable-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--muted);
    pointer-events: none;
    transform: translateY(-50%);
    z-index: 1;
}

.searchable-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 10051;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.searchable-select-option {
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    color: var(--ink);
    background: transparent;
    text-align: left;
    font: inherit;
}

.searchable-select-option:hover,
.searchable-select-option.is-active {
    color: var(--brand);
    background: var(--brand-soft);
}

.searchable-select-empty {
    padding: 9px 10px;
    color: var(--muted);
}

.property-field small {
    color: var(--muted);
    line-height: 1.4;
}

.property-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.property-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}

.property-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 12px;
    display: inline-grid;
    place-content: center;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    max-width: 12px;
    max-height: 12px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--muted-2);
    border-radius: 2px;
    background: var(--card);
    cursor: pointer;
    vertical-align: middle;
}

.property-check input[type="checkbox"]::before {
    content: "";
    width: 6px;
    height: 3px;
    border: solid #fff;
    border-width: 0 0 1.5px 1.5px;
    opacity: 0;
    transform: rotate(-45deg) translate(0, -0.5px);
}

.property-check input[type="checkbox"]:checked {
    border-color: var(--brand);
    background: var(--brand);
}

.property-check input[type="checkbox"]:checked::before {
    opacity: 1;
}

.property-check input[type="checkbox"]:focus {
    outline: 0;
}

.property-check input[type="checkbox"]:focus-visible {
    outline: 1px solid var(--brand);
    outline-offset: 2px;
}

.property-check input[type="checkbox"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.property-section-note {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.property-attachment-stack {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.property-attachment-item__meta,
.property-attachment-item__preview {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.property-attachment-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.property-attachment-edit-panel {
    list-style: none;
    margin: 0 0 10px;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: rgba(200, 159, 61, .04);
}

.property-attachment-form--inline {
    margin: 0;
}

.property-document-upload-board {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

.property-document-upload-board__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.property-document-upload-board__toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.property-document-upload-board__rows {
    display: grid;
    gap: 10px;
}

.property-document-upload-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
}

.property-document-upload-row__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.property-document-upload-row__grid .property-field--checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.property-document-upload-row__grid .property-field--actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .property-document-upload-row__grid {
        grid-template-columns: 1fr;
    }
}

.property-attachment-count {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.property-attachment-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.property-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}

body:not(.dark) .property-attachment-item {
    background: rgba(0, 0, 0, .02);
}

.property-attachment-item strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
}

.property-attachment-item small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.property-attachment-item__preview img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

.property-attachment-item__thumb {
    display: inline-flex;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: 8px;
    line-height: 0;
}

.property-attachment-item__thumb:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.property-attachment-item__thumb img {
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.property-attachment-item__thumb:hover img {
    transform: scale(1.04);
    box-shadow: 0 0 0 1px var(--brand);
}

.app-swal-media-preview {
    padding-bottom: 1.25rem;
}

.app-swal-media-preview__body {
    margin: 0.35rem 0 0 !important;
    overflow: auto;
    max-height: min(72vh, 760px);
}

.property-media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.property-media-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(68vh, 720px);
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.2);
}

.property-attachment-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

.property-attachment-form {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.property-attachment-form__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.property-attachment-file-count {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--brand-light);
    font-weight: 600;
}

.property-ocr-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.property-ocr-preview {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}

.property-ocr-preview .label {
    margin-bottom: 0.55rem;
}

.property-field--ocr-review {
    border: 1px solid rgba(238, 93, 80, 0.45);
    border-radius: 12px;
    padding: 0.55rem 0.65rem;
    background: rgba(238, 93, 80, 0.06);
}

.property-ocr-review-badge {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--red);
    font-weight: 700;
    font-size: 12px;
}

.property-ocr-fields span {
    display: inline-flex;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(200, 159, 61, 0.08);
    font-size: 11px;
    line-height: 1.3;
}

.property-ocr-fields strong {
    color: var(--ink);
    font-weight: 700;
}

.property-ocr-error {
    color: var(--red) !important;
}

.property-attachment-file-count.is-error {
    color: var(--red);
}

.property-media-rows-card {
    margin-top: 24px;
}

.property-media-upload-board {
    display: grid;
    gap: 10px;
}

.property-media-upload-board__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 94%, var(--brand) 6%);
}

body:not(.dark) .property-media-upload-board__header {
    background: rgba(200, 159, 61, 0.06);
}

.property-media-upload-board__note {
    margin: 0;
    font-size: 13px;
}

.property-media-upload-board__rows {
    display: grid;
    gap: 8px;
}

.property-media-upload-board__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.property-media-upload-row {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    cursor: grab;
}

body:not(.dark) .property-media-upload-row {
    background: #fff;
}

.property-media-upload-row.is-dragging {
    opacity: 0.65;
    cursor: grabbing;
}

.property-media-upload-row__inline {
    display: grid;
    grid-template-columns:
        minmax(118px, 0.9fr)
        minmax(64px, 0.35fr)
        minmax(100px, 0.8fr)
        minmax(160px, 1.4fr)
        minmax(108px, 0.55fr)
        auto;
    gap: 8px;
    align-items: end;
}

.property-media-upload-row__cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.property-media-upload-row__cell label {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
}

.property-media-upload-row__cell input:not([type="checkbox"]):not([type="radio"]),
.property-media-upload-row__cell select {
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
    font-size: 13px;
}

.property-media-upload-row__cell input[type="file"] {
    min-height: 34px;
    padding: 4px 6px;
    font-size: 12px;
}

.property-media-upload-row__cell input:not([type="checkbox"]):not([type="radio"]):focus,
.property-media-upload-row__cell select:focus,
.property-media-upload-row__cell .searchable-select-input:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.property-media-upload-row__cell select.searchable-select-native {
    position: absolute;
    width: 1px;
    min-height: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.property-media-upload-row__cell .searchable-select-input {
    width: 100%;
    min-height: 34px;
    padding: 6px 28px 6px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
    font-size: 13px;
}

.property-media-upload-row__cell .searchable-select::after {
    right: 10px;
}

.property-media-upload-row__cell .searchable-select-menu {
    max-height: 200px;
}

.property-media-upload-row.is-searchable-open {
    position: relative;
    z-index: 10040;
}

.property-media-upload-row__cell--confidential {
    align-self: end;
    padding-bottom: 6px;
}

.property-media-upload-row__check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.property-media-upload-row__cell--actions {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: end;
    padding-bottom: 1px;
}

.property-media-upload-row__drag {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    font-size: 16px;
    line-height: 1;
    cursor: grab;
}

.property-media-upload-row__remove {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.property-media-upload-row__cell--type {
    min-width: 120px;
}

.property-media-row-type-fields {
    display: grid;
    gap: 4px;
}

.property-media-row-thumb {
    width: 100%;
    max-width: 140px;
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.property-media-row-thumb img {
    display: block;
    width: 100%;
    height: 58px;
    object-fit: cover;
}

.property-media-row-thumb__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.property-media-upload-row .property-media-row-count {
    display: none;
}

.property-media-upload-row__preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.property-media-upload-row__preview-item {
    display: grid;
    gap: 4px;
    width: 88px;
}

.property-media-upload-row__preview-item img,
.property-media-upload-row__preview-badge {
    width: 88px;
    height: 66px;
    border-radius: 8px;
    border: 1px solid var(--line);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
}

.property-media-upload-row__preview-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.property-media-upload-row__preview-item small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
    word-break: break-word;
}

.property-media-upload-row__preview-item--link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.05);
    font-size: 12px;
    max-width: 100%;
    word-break: break-all;
}

.property-button--compact {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .property-media-upload-row__inline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .property-media-upload-row__cell--payload {
        grid-column: 1 / -1;
    }

    .property-media-upload-row__cell--confidential,
    .property-media-upload-row__cell--actions {
        grid-column: span 1;
    }
}

@media (max-width: 720px) {
    .property-media-upload-board__header {
        flex-direction: column;
        align-items: stretch;
    }

    .property-media-upload-board__toolbar {
        justify-content: flex-start;
    }

    .property-media-upload-row__inline {
        grid-template-columns: minmax(0, 1fr);
    }

    .property-media-upload-row__cell--payload,
    .property-media-upload-row__cell--confidential,
    .property-media-upload-row__cell--actions {
        grid-column: auto;
    }

    .property-media-upload-row__cell--actions {
        justify-content: flex-end;
    }
}

.property-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0 2px;
    background: var(--bg);
}

.property-button {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-weight: 700;
}

.property-back {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font-weight: 700;
}

/* User create/edit */
.user-form {
    display: grid;
    gap: 20px;
}

.user-form-card {
    padding: 26px;
}

.user-form-card .card-head {
    margin-bottom: 20px;
}

.user-form-card h2 {
    margin: 3px 0 0;
}

.user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.user-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.user-field--full {
    grid-column: 1 / -1;
}

.user-field label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.user-field input,
.user-field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.user-field input:focus,
.user-field select:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.user-field input:disabled,
.user-field select:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.user-field small {
    color: var(--muted);
    line-height: 1.4;
}

.user-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 600;
}

.user-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
}

.user-section-note {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.user-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0 2px;
    background: var(--bg);
}

.user-button {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-weight: 700;
    cursor: pointer;
}

.user-back {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font-weight: 700;
    text-decoration: none;
}

.user-code-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.user-code-row input {
    flex: 1;
}

.user-code-btn {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.user-code-btn:hover {
    border-color: var(--brand);
    color: var(--brand-2);
}

/* Owner create/edit */
.owner-form {
    display: grid;
    gap: 20px;
}

.owner-form-card {
    padding: 26px;
}

.owner-form-card .card-head {
    margin-bottom: 20px;
}

.owner-form-card h2 {
    margin: 3px 0 0;
}

.owner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.owner-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.owner-field--full {
    grid-column: 1 / -1;
}

.owner-field label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.owner-field input,
.owner-field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.owner-field input:focus,
.owner-field select:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.owner-field small {
    color: var(--muted);
    line-height: 1.4;
}

.owner-section-note {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.owner-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0 2px;
    background: var(--bg);
}

.dashboard-welcome__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.owner-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.owner-button:hover {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent);
    transform: translateY(-1px);
}

.owner-button:active {
    transform: translateY(0);
}

.owner-button:disabled,
.owner-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.owner-button--ghost {
    color: var(--ink);
    background: var(--card);
    border-color: var(--line);
    box-shadow: none;
}

.owner-button--ghost:hover {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    box-shadow: none;
    transform: none;
}

.owner-button--danger {
    color: var(--red);
    background: var(--card);
    border-color: color-mix(in srgb, var(--red) 35%, var(--line));
}

.owner-button--danger:hover {
    background: color-mix(in srgb, var(--red) 8%, var(--card));
    border-color: var(--red);
    box-shadow: none;
    transform: none;
}

.owner-back {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font-weight: 700;
    text-decoration: none;
}

/* Client representative create/edit */
.rep-form {
    display: grid;
    gap: 20px;
}

.rep-form-card {
    padding: 26px;
}

.rep-form-card .card-head {
    margin-bottom: 20px;
}

.rep-form-card h2 {
    margin: 3px 0 0;
}

.rep-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.rep-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.rep-field--full {
    grid-column: 1 / -1;
}

.rep-field label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.rep-field input,
.rep-field select,
.rep-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.rep-field textarea {
    min-height: 110px;
    resize: vertical;
}

.rep-field input:focus,
.rep-field select:focus,
.rep-field textarea:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.rep-field small {
    color: var(--muted);
    line-height: 1.4;
}

.rep-section-note {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.rep-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0 2px;
    background: var(--bg);
}

.rep-button {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-weight: 700;
    cursor: pointer;
}

.rep-back {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font-weight: 700;
    text-decoration: none;
}

/* Unit request create/edit */
.request-form {
    display: grid;
    gap: 20px;
    overflow: visible;
}

.request-form-card {
    padding: 26px;
    overflow: visible;
}

.request-form-card .card-head {
    margin-bottom: 20px;
}

.request-form-card h2 {
    margin: 3px 0 0;
}

.request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
}

.request-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    overflow: visible;
    position: relative;
}

.request-field--full {
    grid-column: 1 / -1;
}

.request-field label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.request-field input,
.request-field select,
.request-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.request-field select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: var(--bg);
}

.request-field textarea {
    min-height: 120px;
    resize: vertical;
}

.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.request-field small {
    color: var(--muted);
    line-height: 1.4;
}

.request-section-note {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.request-code {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(200, 159, 61, .45);
    border-radius: 8px;
    color: var(--brand-light);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
}

.request-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0 2px;
    background: var(--bg);
}

.request-button {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-weight: 700;
    cursor: pointer;
}

.request-back {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font-weight: 700;
    text-decoration: none;
}

/* Developer create/edit */
.developer-form {
    display: grid;
    gap: 20px;
}

.developer-form-card {
    padding: 26px;
}

.developer-form-card .card-head {
    margin-bottom: 20px;
}

.developer-form-card h2 {
    margin: 3px 0 0;
}

.developer-field {
    display: grid;
    gap: 7px;
    max-width: 520px;
}

.developer-field label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.developer-field input {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.developer-field input:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.developer-field small {
    color: var(--muted);
    line-height: 1.4;
}

.developer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 4px 0 2px;
}

.developer-button {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-weight: 700;
    cursor: pointer;
}

.developer-back {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font-weight: 700;
    text-decoration: none;
}

/* Project create/edit */
.project-form {
    display: grid;
    gap: 20px;
}

.project-form-card {
    padding: 26px;
}

.project-form-card .card-head {
    margin-bottom: 20px;
}

.project-form-card h2 {
    margin: 3px 0 0;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.project-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    position: relative;
}

.project-field--full {
    grid-column: 1 / -1;
}

.project-field label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.project-field input,
.project-field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.project-field select.searchable-select-native {
    position: absolute;
    width: 1px;
    min-height: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.project-field input:focus,
.project-field select:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.project-field small {
    color: var(--muted);
    line-height: 1.4;
}

.project-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 4px 0 2px;
}

.project-button {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-weight: 700;
    cursor: pointer;
}

.project-back {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 900px) {

    .property-choice-grid,
    .property-grid,
    .property-grid--three,
    .user-grid,
    .owner-grid,
    .rep-grid,
    .request-grid,
    .project-grid {
        grid-template-columns: 1fr;
    }

    .property-choice-card {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Admin detail (show) pages
   ========================================================================== */

/* Property show */
.property-show {
    display: grid;
    gap: 16px;
}

.property-show-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.property-show-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.property-show-form {
    display: inline-flex;
    margin: 0;
}

.property-show-btn {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font: inherit;
    white-space: nowrap;
}

.property-show-btn--edit {
    border: 1px solid rgba(200, 159, 61, .4);
    color: var(--brand-light);
    background: rgba(200, 159, 61, .12);
}

.property-show-btn--delete {
    border: 1px solid rgba(248, 113, 113, .35);
    color: #fca5a5;
    background: rgba(239, 68, 68, .08);
}

.property-show-btn--back {
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--card);
}

.property-show-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.property-show-card {
    padding: 20px 22px;
}

.property-show-card .card-head {
    margin-bottom: 14px;
}

.property-show-card h2 {
    margin: 3px 0 0;
    font-size: 18px;
}

.property-show-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0;
}

.property-show-dl dt {
    margin: 0;
    color: var(--muted-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.property-show-dl dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}

.property-show-dl--full {
    grid-column: 1 / -1;
}

.property-show-note {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.property-show-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.property-show-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.property-show-pill--ready {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .14);
}

.property-show-pill--ready .property-show-pill__dot {
    background: #10b981;
}

.property-show-pill--pending {
    color: #fbbf24;
    background: rgba(251, 191, 36, .14);
}

.property-show-pill--pending .property-show-pill__dot {
    background: #f59e0b;
}

.property-show-pill--override {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.property-show-pill--override .property-show-pill__dot {
    background: #3b82f6;
}

.property-show-pill--draft {
    color: #f5d78e;
    background: rgba(200, 159, 61, .14);
}

.property-show-pill--draft .property-show-pill__dot {
    background: var(--brand);
}

.property-show-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.property-show-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12px;
    color: var(--muted);
}

.property-show-stat strong {
    color: var(--ink);
    font-size: 14px;
}

.property-show-table {
    width: 100%;
    border-collapse: collapse;
}

.property-show-table th,
.property-show-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 13px;
}

.property-show-table th {
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.property-show-table tr:last-child td {
    border-bottom: 0;
}

.property-show-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.property-show-media {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, .02);
}

body:not(.dark) .property-show-media {
    background: rgba(0, 0, 0, .02);
}

.property-show-media__type {
    color: var(--brand-light);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.property-show-media__caption {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.property-show-media__meta {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.property-show-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.property-show-badge--approved {
    color: #86efac;
    background: rgba(34, 197, 94, .14);
}

.property-show-badge--pending {
    color: #1a1408;
    background: #fbbf24;
}

.property-show-badge--rejected {
    color: #fca5a5;
    background: rgba(239, 68, 68, .14);
}

.property-show-badge--confidential {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.property-show-empty {
    padding: 18px 0;
    color: var(--muted);
    font-size: 14px;
}

.property-show-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(59, 130, 246, .35);
    border-radius: 10px;
    color: #93c5fd;
    background: rgba(59, 130, 246, .08);
    font-size: 13px;
    line-height: 1.45;
}

.property-show-alert--privacy strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
}

.property-show-privacy-issues {
    margin: 0;
    padding-left: 18px;
}

.property-show-privacy-issues li + li {
    margin-top: 8px;
}

.property-show-privacy-fix {
    display: inline-block;
    margin-top: 4px;
    color: var(--brand-light);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.property-show-privacy-fix:hover {
    color: var(--brand);
}

.property-show-ops__check-label {
    display: block;
}

.property-show-ops__check-hint {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.property-show-ops__guidance {
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    font-size: 13px;
    line-height: 1.45;
}

.property-show-ops__guidance p + p {
    margin-top: 8px;
}

.property-show-ops__guidance--inline {
    margin-top: 16px;
}

/* Property show — hero, tabs, compact facts */
.property-show-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    padding: 28px 30px;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent),
        linear-gradient(145deg, color-mix(in srgb, var(--brand) 6%, var(--card)), var(--card));
    overflow: hidden;
}

.property-show-hero__eyebrow {
    margin: 0 0 6px;
    color: var(--brand-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.property-show-hero__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.property-show-hero__location {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.property-show-hero__price {
    margin: 14px 0 0;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 800;
    color: var(--brand-light);
    letter-spacing: -.02em;
}

.property-show-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.property-show-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 88%, var(--brand) 12%);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
}

.property-show-hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    min-width: min(100%, 280px);
}

.property-show-hero__thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.property-show-hero__thumb {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--line);
}

.property-show-hero__thumb--empty {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

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

.property-show-kpi {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
}

.property-show-kpi__label {
    display: block;
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.property-show-kpi__value {
    display: block;
    margin-top: 6px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.property-show-nav {
    position: sticky;
    top: 70px;
    z-index: 25;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(10px);
    overflow-x: auto;
    scrollbar-width: none;
}

.property-show-nav::-webkit-scrollbar {
    display: none;
}

.property-show-nav__btn {
    flex: 0 0 auto;
    min-height: 22px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.property-show-nav__btn:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.property-show-nav__btn.is-active {
    color: var(--ink);
    background: color-mix(in srgb, var(--brand) 18%, var(--card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, var(--line));
}

.property-show-nav__badge {
    margin-left: 3px;
    padding: 0 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 20%, transparent);
    color: var(--brand-light);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
}

.property-show-panel[hidden] {
    display: none !important;
}

.property-show-panel {
    display: grid;
    gap: 16px;
    animation: property-show-panel-in .25s ease;
}

@keyframes property-show-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.property-show-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.property-show-fact {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 96%, var(--brand) 4%);
}

.property-show-fact--wide {
    grid-column: 1 / -1;
}

.property-show-fact__label {
    display: block;
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.property-show-fact__value {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

.property-show-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.property-show-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.property-show-gallery--compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.property-show-gallery__item {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
}

.property-show-gallery--compact .property-show-gallery__item {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    border-radius: 12px;
}

.property-show-gallery__visual {
    aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--line) 60%, var(--card));
    overflow: hidden;
    position: relative;
}

.property-show-gallery--compact .property-show-gallery__visual {
    aspect-ratio: 4 / 3;
    min-height: 0;
    height: auto;
}

.property-show-gallery__preview {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.property-show-gallery__preview:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.property-show-gallery__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease;
}

.property-show-gallery__preview:hover img {
    transform: scale(1.03);
}

.property-show-gallery__visual--placeholder {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px;
    text-align: center;
}

.property-show-gallery__status {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.property-show-badge--watermarked {
    color: var(--brand-light);
    background: color-mix(in srgb, var(--brand) 18%, transparent);
}

.property-show-gallery__body {
    padding: 12px 14px;
}

.property-show-gallery--compact .property-show-gallery__body {
    display: grid;
    gap: 8px;
    padding: 10px;
    min-width: 0;
}

.property-show-gallery__topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.property-show-gallery__identity {
    min-width: 0;
    flex: 1;
}

.property-show-gallery--compact .property-show-media__type {
    font-size: 10px;
    letter-spacing: 0.04em;
}

.property-show-gallery--compact .property-show-media__caption {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.property-show-gallery--compact .property-show-media__meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.property-show-gallery__byline {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
}

.property-show-media-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--line) 28%, transparent);
}

.property-show-media-toolbar__stats,
.property-show-media-toolbar__defaults {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}

.property-show-media-toolbar__stats strong {
    color: var(--ink);
    font-weight: 700;
}

.property-show-media-toolbar__defaults {
    color: var(--ink);
    font-weight: 600;
}

.property-show-btn--compact {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.property-show-gallery--compact .property-show-media-actions {
    margin-top: 0;
    flex-shrink: 0;
    gap: 6px;
}

.property-show-media-watermark {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: end;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.property-show-media-watermark__field {
    display: grid;
    gap: 4px;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

.property-show-media-watermark__field span {
    line-height: 1.2;
}

.property-show-media-watermark__field select,
.property-show-media-watermark__field input[type="number"],
.property-show-media-watermark__field input[type="file"] {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 88%, var(--line));
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
}

.property-show-media-watermark__field input[type="file"] {
    padding: 5px 6px;
    font-size: 11px;
}

.property-show-media-watermark__field--opacity {
    grid-column: auto;
}

.property-show-media-watermark__field--file {
    grid-column: 1 / -1;
}

.property-show-media-watermark__controls {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) 72px auto;
    gap: 6px;
    align-items: end;
}

.property-show-media-watermark__hint {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--red, #ee5d50);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
}

@media (max-width: 1400px) {
    .property-show-gallery--compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .property-show-gallery--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .property-show-hero {
        grid-template-columns: 1fr;
    }

    .property-show-hero__aside {
        align-items: flex-start;
    }

    .property-show-hero__thumbs {
        justify-content: flex-start;
    }

    .property-show-split {
        grid-template-columns: 1fr;
    }

    .property-show-gallery--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .property-show-gallery--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .property-show-media-watermark__controls {
        grid-template-columns: 1fr 1fr;
    }

    .property-show-media-watermark__controls > .property-show-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .property-show-gallery--compact {
        grid-template-columns: 1fr;
    }

    .property-show-gallery--compact .property-show-gallery__visual {
        aspect-ratio: 16 / 10;
    }

    .property-show-gallery__topline {
        flex-direction: column;
        align-items: stretch;
    }

    .property-show-gallery--compact .property-show-media-actions {
        width: 100%;
    }

    .property-show-media-watermark__controls {
        grid-template-columns: 1fr;
    }
}

/* Unit request show */
.request-show {
    display: grid;
    gap: 16px;
}

.request-show-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.request-show-actions--workflow {
    flex-wrap: wrap;
}

.request-show-action-bar .request-show-actions--workflow .request-show-workflow-form {
    display: inline-flex;
    margin: 0;
}

.request-show-form {
    display: inline-flex;
    margin: 0;
}

.request-show-btn {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font: inherit;
    white-space: nowrap;
}

.request-show-btn--edit {
    border: 1px solid rgba(200, 159, 61, .4);
    color: var(--brand-light);
    background: rgba(200, 159, 61, .12);
}

.request-show-btn--delete {
    border: 1px solid rgba(248, 113, 113, .35);
    color: #fca5a5;
    background: rgba(239, 68, 68, .08);
}

.request-show-btn--back {
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--card);
}

body:not(.dark) .request-show-btn:not(.request-show-btn--back):not(.request-show-btn--delete):not(.request-show-btn--edit) {
    color: #ffffff;
    border: 0;
    background: var(--brand-2);
}

body:not(.dark) .request-show-btn--edit {
    color: #ffffff;
    border: 0;
    background: var(--brand-2);
}

body:not(.dark) .request-show-btn--delete {
    color: #ffffff;
    border: 0;
    background: #dc2626;
}

body:not(.dark) .request-show-btn--back {
    color: var(--ink);
    border: 1px solid var(--line);
    background: #efefef;
}

body:not(.dark) .property-show-btn:not(.property-show-btn--back):not(.property-show-btn--delete):not(.property-show-btn--edit) {
    color: #ffffff;
    border: 0;
    background: var(--brand-2);
}

body:not(.dark) .property-show-btn--edit {
    color: #ffffff;
    border: 0;
    background: var(--brand-2);
}

body:not(.dark) .property-show-btn--delete {
    color: #ffffff;
    border: 0;
    background: #dc2626;
}

body:not(.dark) .property-show-btn--back {
    color: var(--ink);
    border: 1px solid var(--line);
    background: #efefef;
}

.request-show-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.request-show-card {
    padding: 20px 22px;
}

.request-show-card .card-head {
    margin-bottom: 14px;
}

.request-show-card h2 {
    margin: 3px 0 0;
    font-size: 18px;
}

.request-show-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0;
}

.request-show-dl dt {
    margin: 0;
    color: var(--muted-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.request-show-dl dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}

.request-show-dl--full {
    grid-column: 1 / -1;
}

.request-show-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.request-show-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.request-show-pill--open {
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.request-show-pill--open .request-show-pill__dot {
    background: #3b82f6;
}

.request-show-pill--pipeline {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
}

.request-show-pill--pipeline .request-show-pill__dot {
    background: #8b5cf6;
}

.request-show-pill--warning {
    color: #fdba74;
    background: rgba(249, 115, 22, .14);
}

.request-show-pill--warning .request-show-pill__dot {
    background: #f97316;
}

.request-show-pill--pending {
    color: #fbbf24;
    background: rgba(251, 191, 36, .14);
}

.request-show-pill--pending .request-show-pill__dot {
    background: #f59e0b;
}

.request-show-pill--approved {
    color: #86efac;
    background: rgba(34, 197, 94, .14);
}

.request-show-pill--approved .request-show-pill__dot {
    background: #22c55e;
}

.request-show-pill--active {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .14);
}

.request-show-pill--active .request-show-pill__dot {
    background: #10b981;
}

.request-show-pill--rejected {
    color: #fca5a5;
    background: rgba(239, 68, 68, .14);
}

.request-show-pill--rejected .request-show-pill__dot {
    background: #ef4444;
}

.request-show-pill--archived {
    color: var(--muted);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
}

.request-show-pill--archived .request-show-pill__dot {
    background: var(--muted);
}

body:not(.dark) .request-show-pill--open {
    color: #ffffff;
    background: #171717;
    border: 0;
}

body:not(.dark) .request-show-pill--pipeline {
    color: #ffffff;
    background: #7c3aed;
    border: 0;
}

body:not(.dark) .request-show-pill--warning {
    color: #ffffff;
    background: #ea580c;
    border: 0;
}

body:not(.dark) .request-show-pill--pending {
    color: #ffffff;
    background: #d97706;
    border: 0;
}

body:not(.dark) .request-show-pill--approved,
body:not(.dark) .request-show-pill--active {
    color: #ffffff;
    background: #16a34a;
    border: 0;
}

body:not(.dark) .request-show-pill--rejected {
    color: #ffffff;
    background: #dc2626;
    border: 0;
}

body:not(.dark) .request-show-pill--archived {
    color: #ffffff;
    background: #525252;
    border: 0;
}

body:not(.dark) .request-show-pill__dot {
    background: rgba(255, 255, 255, .92);
}

.request-show-table {
    width: 100%;
    border-collapse: collapse;
}

.request-show-table th,
.request-show-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 13px;
}

.request-show-table th {
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.request-show-table tr:last-child td {
    border-bottom: 0;
}

.request-show-empty {
    padding: 18px 0;
    color: var(--muted);
    font-size: 14px;
}

.request-show-link {
    color: var(--brand-light);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 900px) {

    .property-show-grid,
    .property-show-dl,
    .request-show-grid,
    .request-show-dl {
        grid-template-columns: 1fr;
    }
}

/* Admin reports */
.report-page .ledger-panel {
    display: grid;
    gap: 18px;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.report-card {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
}

body:not(.dark) .report-card {
    background: rgba(0, 0, 0, .02);
}

.report-card--wide {
    grid-column: 1 / -1;
}

.report-card .card-head {
    margin-bottom: 14px;
}

.report-card .card-head h2 {
    margin: 3px 0 0;
    font-size: 18px;
}

.report-empty {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.report-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.report-bars__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.report-bars__meta strong {
    white-space: nowrap;
}

.report-bars__meta small {
    color: var(--muted);
    font-weight: 600;
}

.report-bars__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

body:not(.dark) .report-bars__track {
    background: rgba(0, 0, 0, .06);
}

.report-bars__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

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

.report-list li,
.report-split__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 13px;
}

.report-list li:last-child,
.report-split__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.report-list--inline {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px 18px;
}

.report-list--inline li {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    border-bottom: 1px solid var(--line);
}

.report-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.report-split__title {
    margin: 0 0 10px;
    color: var(--muted-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.report-months {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-height: 160px;
    padding-top: 8px;
}

.report-month {
    flex: 1;
    display: grid;
    gap: 8px;
    justify-items: center;
}

.report-month__bar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 42px;
    height: 120px;
    border-radius: 10px 10px 4px 4px;
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
}

body:not(.dark) .report-month__bar {
    background: rgba(0, 0, 0, .04);
}

.report-month__bar span {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: 8px;
    height: var(--h, 8%);
    padding-bottom: 6px;
    border-radius: inherit;
    color: #111;
    background: linear-gradient(180deg, var(--brand-light), var(--brand));
    font-size: 11px;
    font-weight: 700;
}

.report-month small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.report-table-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.report-table-head h2 {
    margin: 3px 0 0;
    font-size: 18px;
}

#property-report-table th:last-child,
#property-report-table td.ledger-actions,
#request-report-table th:last-child,
#request-report-table td.ledger-actions,
#status-history-table th:last-child,
#status-history-table td.ledger-actions {
    width: 1%;
    min-width: 210px;
    white-space: nowrap;
    padding-right: 4px;
}

#property-report-table .ledger-actions__group,
#request-report-table .ledger-actions__group,
#status-history-table .ledger-actions__group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    max-width: none;
    white-space: nowrap;
}

#property-report-table .ledger-action,
#request-report-table .ledger-action,
#status-history-table .ledger-action {
    flex: 0 0 auto;
}

@media (max-width: 960px) {
    .report-grid,
    .report-split {
        grid-template-columns: 1fr;
    }

    .report-card--wide {
        grid-column: auto;
    }
}

/* Manager property detail */
.property-show--manager .property-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.property-show-meta__completion {
    color: var(--brand-light);
    font-weight: 700;
}

.property-show-action-bar {
    position: sticky;
    top: 12px;
    z-index: 5;
}

.property-show-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.property-show-assign-select {
    min-width: 160px;
    margin-right: 6px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}

.property-show-validation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.property-show-validation-stat {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
}

.property-show-validation-stat strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 14px;
}

.property-show-issue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.property-show-issue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
}

.property-show-issue__status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.property-show-issue--missing { border-color: rgba(238, 93, 80, .35); }
.property-show-issue--warning { border-color: rgba(200, 159, 61, .45); }
.property-show-issue--conflict { border-color: rgba(238, 93, 80, .55); }
.property-show-issue--blocked { border-color: rgba(238, 93, 80, .7); }

.property-show-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.property-show-filter-form select {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}

.property-show-dl--sanitized dd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

/* Property show — operations tab */
.property-show-ops {
    display: grid;
    gap: 16px;
}

.property-show-ops__status-card {
    padding-bottom: 4px;
}

.property-show-ops__status-main {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.property-show-ops__status-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    position: relative;
}

.property-show-ops__status-icon::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--muted);
}

.property-show-ops__status-icon--pending::after,
.property-show-ops__status-icon--pending_review::after {
    background: var(--brand);
}

.property-show-ops__status-icon--approved::after,
.property-show-ops__status-icon--active::after {
    background: #3ecf8e;
}

.property-show-ops__status-icon--rejected::after,
.property-show-ops__status-icon--draft::after {
    background: var(--red);
}

.property-show-ops__status-title {
    margin: 4px 0 8px;
    font-size: 1.35rem;
}

.property-show-ops__status-copy {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    max-width: 52rem;
}

.property-show-ops__status-meta {
    display: block;
    margin-top: 6px;
    color: var(--ink);
    font-size: 13px;
}

.property-show-ops__meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 0;
}

.property-show-ops__meta div {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
}

.property-show-ops__meta dt {
    margin: 0 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.property-show-ops__meta dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.property-show-ops__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
    gap: 16px;
    align-items: start;
}

.property-show-ops__main,
.property-show-ops__aside,
.property-show-ops__details {
    display: grid;
    gap: 16px;
}

.property-show-ops__check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(200, 159, 61, .35);
    border-radius: 12px;
    background: rgba(200, 159, 61, .08);
}

.property-show-ops__check-copy {
    display: grid;
    gap: 4px;
}

.property-show-ops__check-copy strong {
    color: var(--ink);
    font-size: 14px;
}

.property-show-ops__check-copy span {
    color: var(--muted);
    font-size: 13px;
}

.property-show-ops__group + .property-show-ops__group {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.property-show-ops__group-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.property-show-ops__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.property-show-ops-tile {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.property-show-ops-tile--primary {
    border-color: rgba(200, 159, 61, .45);
    background: rgba(200, 159, 61, .06);
}

.property-show-ops-tile--danger {
    border-color: rgba(238, 93, 80, .35);
}

.property-show-ops-tile__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.property-show-ops-tile__hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    min-height: 2.9em;
}

.property-show-ops-tile__assign {
    display: grid;
    gap: 6px;
}

.property-show-ops-tile__closing {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.property-show-ops-tile__closing label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
}

.property-show-ops-tile__closing input,
.property-show-ops-tile__closing select,
.property-show-ops-tile__closing textarea {
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--card);
    font: inherit;
}

.property-show-ops-tile__btn,
.property-show-ops-btn {
    justify-self: start;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.property-show-ops-btn--primary,
.property-show-ops-tile--primary .property-show-ops-tile__btn {
    border-color: var(--brand);
    background: var(--brand);
    color: #111;
}

.property-show-ops-tile--danger .property-show-ops-tile__btn {
    border-color: rgba(238, 93, 80, .5);
    color: var(--red);
}

.property-show-ops-tile__btn:hover,
.property-show-ops-btn:hover {
    filter: brightness(1.05);
}

.property-show-ops__checklist-items {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.property-show-ops__check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}

.property-show-ops__check-item.is-done {
    color: var(--ink);
}

.property-show-ops__check-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--line);
    flex-shrink: 0;
}

.property-show-ops__check-item.is-done .property-show-ops__check-dot {
    border-color: var(--brand);
    background: var(--brand);
}

.property-show-ops__check-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(200, 159, 61, .45);
}

.property-show-ops__check-link:hover {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.property-show-ops__check-item.is-done .property-show-ops__check-link {
    border-bottom: none;
}

.property-readiness-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
}

.property-readiness-meta div {
    margin: 0;
}

.property-readiness-meta dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: 4px;
}

.property-readiness-meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

.property-show-ops__issues-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.property-show-issue-list--compact .property-show-issue {
    padding: 8px 10px;
    font-size: 12px;
}

@media (max-width: 960px) {
    .property-show-ops__layout {
        grid-template-columns: 1fr;
    }

    .property-show-ops__check {
        flex-direction: column;
        align-items: stretch;
    }
}

.property-duplicate-swal-list {
    display: grid;
    gap: 10px;
    text-align: left;
}

.property-duplicate-swal-note {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.property-duplicate-swal-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 92%, var(--brand) 8%);
}

body:not(.dark) .property-duplicate-swal-item {
    background: rgba(200, 159, 61, 0.06);
}

.property-duplicate-swal-item__body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.property-duplicate-swal-item a,
.property-duplicate-swal-item strong {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.property-duplicate-swal-item a:hover {
    color: var(--brand);
}

.property-duplicate-swal-item span,
.property-duplicate-swal-item small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.property-duplicate-swal-view {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--card);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.property-duplicate-swal-view:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.property-show-ops__check--approve {
    margin-top: 14px;
}

.swal2-container .swal2-popup.app-swal-duplicates .swal2-html-container {
    margin-top: 0.75rem !important;
    overflow: auto;
    max-height: min(46vh, 360px);
}

/* Manager MOU review */
.mou-mgr-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.mou-mgr-status-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mou-mgr-status-pill--pending {
    color: #9a6700;
    background: #fff8e6;
    border: 1px solid #f0d080;
}

.mou-mgr-status-pill--pending .mou-mgr-status-pill__dot { background: #c89f3d; }

.mou-mgr-status-pill--approved {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #86efac;
}

.mou-mgr-status-pill--approved .mou-mgr-status-pill__dot { background: #22c55e; }

.mou-mgr-status-pill--returned {
    color: #b42318;
    background: #fff1f0;
    border: 1px solid #f5b5b0;
}

.mou-mgr-status-pill--returned .mou-mgr-status-pill__dot { background: #ee5d50; }

.mou-mgr-status-pill--draft {
    color: var(--muted);
    background: #f8fafc;
    border: 1px solid var(--line);
}

.mou-mgr-status-pill--draft .mou-mgr-status-pill__dot { background: #94a3b8; }

/* Manager MOU pages */
.mou-mgr-page {
    margin-top: 16px;
    padding: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--card)) 0%, var(--card) 120px);
}

.mou-mgr-hero {
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--card)) 0%, var(--card) 48%),
        var(--card);
    padding: 24px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.mou-mgr-hero__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.mou-mgr-hero__code {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}

.mou-mgr-hero h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
}

.mou-mgr-hero__sub {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.mou-mgr-hero__price {
    text-align: right;
}

.mou-mgr-hero__price strong {
    display: block;
    margin-top: 10px;
    font-size: 22px;
}

.mou-mgr-hero__price span {
    color: var(--muted);
    font-size: 12px;
}

.mou-mgr-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.mou-mgr-kpi {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-soft) 44%, var(--card));
    padding: 12px 14px;
    min-height: 82px;
}

.mou-mgr-kpi span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.mou-mgr-kpi strong {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.35;
}

.mou-mgr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 20px;
    margin-top: 16px;
    align-items: start;
}

.mou-mgr-stack {
    display: grid;
    gap: 16px;
}

.mou-mgr-panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--card)) 0%, var(--card) 88px);
    padding: 16px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.mou-mgr-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.mou-mgr-panel__head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.mou-mgr-panel__head--spaced {
    margin-bottom: 16px;
}

.mou-mgr-panel__title {
    margin: 4px 0 0;
}

.mou-mgr-intro-copy {
    min-width: 0;
}

.mou-mgr-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mou-mgr-summary-item {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-soft) 50%, var(--card));
    min-height: 92px;
}

.mou-mgr-summary-item .label,
.mou-mgr-summary-item > span:first-child {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.mou-mgr-summary-item strong {
    font-size: 14px;
    line-height: 1.35;
}

.mou-mgr-approval-panel {
    position: sticky;
    top: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--card)) 0%, var(--card) 100%);
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
}

.mou-mgr-approval-panel__head {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--card)) 0%, var(--card) 100%);
}

.mou-mgr-approval-panel__head h2 {
    margin: 6px 0 0;
    font-size: 20px;
}

.mou-mgr-approval-panel__body {
    padding: 18px;
}

.mou-mgr-workflow {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mou-mgr-workflow li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
}

.mou-mgr-workflow__icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
}

.mou-mgr-workflow__icon--done { background: #dcfce7; color: #166534; }
.mou-mgr-workflow__icon--current { background: #fff8e6; color: #9a6700; }
.mou-mgr-workflow__icon--upcoming { background: #f1f5f9; color: #64748b; }

.mou-mgr-checklist {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mou-mgr-checklist li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 13px;
}

.mou-mgr-checklist li.is-present {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mou-mgr-checklist li.is-missing {
    background: #fff7ed;
    border-color: #fed7aa;
}

.mou-mgr-warning-list,
.mou-mgr-history {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.mou-mgr-warning-list li {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed #f0d080;
    background: #fff9eb;
    color: #7a5b00;
    font-size: 13px;
}

.mou-mgr-history li {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.mou-mgr-approval-note {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.mou-mgr-approval-actions {
    display: grid;
    gap: 14px;
}

.mou-mgr-approval-actions .owner-field textarea {
    min-height: 96px;
}

.mou-mgr-approval-panel textarea,
.mou-mgr-approval-panel input[type="text"],
.mou-mgr-approval-panel input[type="date"],
.mou-mgr-approval-panel select {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-soft) 28%, var(--card));
    color: var(--ink);
    padding: 12px 14px;
    font: inherit;
}

.mou-mgr-btn-approve,
.mou-mgr-btn-return {
    width: 100%;
    justify-content: center;
}

.mou-mgr-btn-return {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 6%, var(--card));
    border-color: color-mix(in srgb, var(--red) 38%, var(--line));
}

.mou-mgr-signature-block {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.mou-mgr-signature-block img {
    display: block;
    object-fit: contain;
}

.mou-mgr-signature-block img.mou-signature-image { max-height: 70px; }
.mou-mgr-signature-block img.mou-stamp-image { max-height: 90px; }

.mou-mgr-queue-grid,
.mou-mgr-active-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.mou-mgr-queue-card,
.mou-mgr-active-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--card)) 0%, var(--card) 92px),
        var(--card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mou-mgr-queue-card:hover,
.mou-mgr-active-card:hover {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: 0 20px 40px rgba(15, 23, 42, .09);
    transform: translateY(-2px);
}

.mou-mgr-queue-card__top,
.mou-mgr-active-card__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.mou-mgr-active-card__lead {
    min-width: 0;
}

.mou-mgr-queue-card__code,
.mou-mgr-active-card__code {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
}

.mou-mgr-queue-card h3,
.mou-mgr-active-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
}

.mou-mgr-queue-card__meta,
.mou-mgr-active-card__meta {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.mou-mgr-queue-card__metrics,
.mou-mgr-active-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mou-mgr-queue-card__metric,
.mou-mgr-active-card__metric {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 13px;
    background: color-mix(in srgb, var(--brand-soft) 44%, var(--card));
    min-height: 78px;
}

.mou-mgr-queue-card__metric span,
.mou-mgr-active-card__metric span {

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.mou-mgr-queue-card__metric strong,
.mou-mgr-active-card__metric strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
}

.mou-mgr-active-card__price {
    text-align: right;
    flex-shrink: 0;
    display: grid;
    justify-items: end;
    gap: 6px;
}

.mou-mgr-active-card__price strong {
    display: block;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.2;
}

.mou-mgr-active-card__date {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.mou-mgr-active-card__badge {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.mou-mgr-active-card__metric--wide {
    grid-column: 1 / -1;
}

.mou-mgr-active-card__warn {
    color: var(--red);
    font-weight: 800;
}

.mou-mgr-queue-card__foot,
.mou-mgr-active-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--brand) 10%, var(--line));
}

.mou-mgr-queue-card__foot p,
.mou-mgr-active-card__foot p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.mou-mgr-empty {
    padding: 36px 18px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, #fff) 0%, #fafafa 100%);
    color: var(--muted);
}

.mou-mgr-note-top {
    margin-top: 12px;
}

.mou-mgr-note-reset {
    margin: 0;
    color: var(--muted);
}

.mou-mgr-note-inner {
    margin-top: 6px;
}

.mou-mgr-note-bottom {
    margin-bottom: 14px;
}

.mou-mgr-field-top {
    margin-top: 8px;
}

.mou-mgr-button-top {
    margin-top: 10px;
}

.mou-mgr-form-top {
    margin-top: 16px;
}

.mou-mgr-btn-full {
    width: 100%;
    justify-content: center;
}

.mou-mgr-comment {
    margin: 6px 0 0;
}

.mou-mgr-status-pill--spaced {
    margin-top: 10px;
}

.mou-mgr-approval-note--approved {
    background: #ecfdf3;
    border-color: #86efac;
    color: #166534;
}

.mou-mgr-approval-note--returned {
    background: #fff1f0;
    border-color: #f5b5b0;
    color: #b42318;
}

.mou-mgr-page .owner-button,
.mou-mgr-hero .owner-button,
.mou-mgr-panel .owner-button,
.mou-mgr-approval-panel .owner-button {
    min-height: 46px;
    border-radius: 12px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 20%, transparent);
}

.mou-mgr-page .owner-button--ghost,
.mou-mgr-hero .owner-button--ghost,
.mou-mgr-panel .owner-button--ghost,
.mou-mgr-approval-panel .owner-button--ghost,
.mou-mgr-page .owner-button--danger,
.mou-mgr-hero .owner-button--danger,
.mou-mgr-panel .owner-button--danger,
.mou-mgr-approval-panel .owner-button--danger {
    box-shadow: none;
}

.mou-mgr-page .owner-button--ghost,
.mou-mgr-hero .owner-button--ghost,
.mou-mgr-panel .owner-button--ghost,
.mou-mgr-approval-panel .owner-button--ghost {
    background: color-mix(in srgb, var(--brand) 5%, var(--card));
}

@media (max-width: 1100px) {
    .mou-mgr-layout {
        grid-template-columns: 1fr;
    }

    .mou-mgr-approval-panel {
        position: static;
    }

    .mou-mgr-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .mou-mgr-page {
        padding: 18px;
    }
}

@media (max-width: 640px) {
    .mou-mgr-kpis,
    .mou-mgr-summary-grid,
    .mou-mgr-queue-card__metrics,
    .mou-mgr-active-card__metrics {
        grid-template-columns: 1fr;
    }

    .mou-mgr-hero {
        padding: 18px;
    }

    .mou-mgr-hero h2 {
        font-size: 22px;
    }

    .mou-mgr-hero__top,
    .mou-mgr-panel__head,
    .mou-mgr-queue-card__top,
    .mou-mgr-active-card__top,
    .mou-mgr-queue-card__foot,
    .mou-mgr-active-card__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .mou-mgr-hero__price,
    .mou-mgr-active-card__price {
        width: 100%;
        text-align: left;
        justify-items: start;
    }

    .mou-mgr-page .owner-button,
    .mou-mgr-approval-panel .owner-button {
        width: 100%;
    }
}

/* Sales-agent Active MOU pages */
.mou-deal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 20px;
    margin-top: 16px;
    align-items: start;
}

.mou-deal-stack {
    display: grid;
    gap: 16px;
}

.mou-deal-hero {
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--card)) 0%, var(--card) 42%),
        var(--card);
    padding: 24px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.mou-deal-hero__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.mou-deal-hero__code {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}

.mou-deal-hero h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
}

.mou-deal-hero__sub {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.mou-deal-hero__price {
    text-align: right;
}

.mou-deal-hero__price strong {
    display: block;
    margin-top: 10px;
    font-size: 22px;
}

.mou-deal-hero__price span {
    color: var(--muted);
    font-size: 12px;
}

.mou-deal-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.mou-deal-kpi {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-soft) 44%, var(--card));
    padding: 12px 14px;
    min-height: 82px;
}

.mou-deal-kpi span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.mou-deal-kpi strong {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.35;
}

.mou-deal-panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--card)) 0%, var(--card) 88px);
    padding: 16px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.mou-deal-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.mou-deal-panel__head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.mou-deal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mou-deal-summary__item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-soft) 50%, var(--card));
    padding: 12px 14px;
    min-height: 92px;
}

.mou-deal-summary__item span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.mou-deal-summary__item strong {
    font-size: 14px;
    line-height: 1.35;
}

.mou-deal-side {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 16px;
}

.mou-deal-side-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--card)) 0%, var(--card) 100%);
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .06);
}

.mou-deal-side-card__head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--card)) 0%, var(--card) 100%);
}

.mou-deal-side-card__head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.mou-deal-side-card__body {
    padding: 16px 18px;
    display: grid;
    gap: 12px;
}

.mou-deal-side-card__body--actions {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.mou-deal-option {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 38%, var(--card)) 0%, var(--card) 100%);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mou-deal-option h4 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--ink);
}

.mou-deal-option p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.mou-deal-option input[type="file"],
.mou-deal-panel input[type="file"],
.mou-deal-panel textarea,
.mou-deal-panel select,
.mou-deal-panel input[type="text"],
.mou-deal-panel input[type="date"] {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-soft) 28%, var(--card));
    color: var(--ink);
    padding: 12px 14px;
    font: inherit;
}

.mou-deal-option input[type="file"]::file-selector-button,
.mou-deal-panel input[type="file"]::file-selector-button {
    margin-right: 12px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    padding: 9px 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.mou-deal-panel textarea {
    min-height: 110px;
    resize: vertical;
}

.mou-deal-option form {
    margin-top: auto;
}

.mou-deal-option__button {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

.mou-deal-option__warning {
    display: block;
    margin-top: 8px;
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
}

.mou-deal-workflow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mou-deal-workflow li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.mou-deal-workflow__dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
}

.mou-deal-workflow__dot--done { background: #dcfce7; color: #166534; }
.mou-deal-workflow__dot--current { background: #fff8e6; color: #9a6700; }
.mou-deal-workflow__dot--pending { background: #f1f5f9; color: #64748b; }

.mou-deal-warn-list,
.mou-deal-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mou-deal-warn-list li {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed #f0d080;
    background: #fff9eb;
    color: #7a5b00;
    font-size: 13px;
}

.mou-deal-history li {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.mou-deal-check-table--full {
    width: 100%;
}

.mou-deal-check-table td,
.mou-deal-check-table th {
    vertical-align: middle;
}

.mou-deal-check-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.mou-deal-check-badge--ok {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #86efac;
}

.mou-deal-check-badge--missing {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}

.mou-additional-docs__list,
.mou-additional-docs__rows {
    display: grid;
    gap: 12px;
}

.mou-additional-docs__item {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 14px;
}

.mou-additional-docs-form {
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.mou-additional-docs-form__head {
    margin-bottom: 8px;
}

.mou-additional-docs-form__head h4 {
    font-size: 1rem;
    margin: 0;
}

.mou-additional-doc-row {
    align-items: end;
    border: 1px dashed var(--line);
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
    padding: 12px;
}

.mou-additional-doc-row__field {
    display: grid;
    gap: 6px;
}

.mou-additional-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.mou-mgr-additional-docs {
    border-top: 1px solid var(--line);
    margin-top: 16px;
    padding-top: 14px;
}

.mou-mgr-checklist--additional {
    margin-top: 10px;
}

.mou-deal-approval {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.mou-deal-approval img {
    display: block;
    object-fit: contain;
}

.mou-deal-approval--spaced,
.mou-deal-summary--spaced,
.mou-deal-history--spaced,
.mou-button-top,
.mou-note-top {
    margin-top: 14px;
}

.mou-note-reset {
    margin: 0;
}

.mou-note-spaced {
    margin: 0 0 14px;
}

.mou-note-inner-top {
    margin-top: 8px;
}

.mou-note-preview {
    margin-top: 6px;
}

.mou-file-preview {
    margin: 8px 0 12px;
}

.mou-file-preview--compact {
    margin-top: 8px;
}

.mou-post-options-label {
    margin-top: 8px;
}

.mou-file-preview__thumb,
.mou-file-preview__image {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    object-fit: cover;
    background: color-mix(in srgb, var(--brand-soft) 35%, var(--card));
}

.mou-file-preview__thumb {
    max-width: 90px;
    max-height: 110px;
}

.mou-file-preview__image {
    max-width: 100%;
    max-height: 140px;
}

.mou-deal-approval .mou-signature-image { max-height: 70px; }
.mou-deal-approval .mou-stamp-image { max-height: 90px; }

.mou-active-page {
    margin-top: 16px;
    padding: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--card)) 0%, var(--card) 120px);
}

.mou-active-page__intro {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.mou-active-page__intro-copy {
    min-width: 0;
}

.mou-active-page__title {
    margin: 4px 0 0;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.mou-active-page__intro-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mou-active-page__intro p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    max-width: 58ch;
    line-height: 1.5;
}

.mou-active-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.mou-active-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--card)) 0%, var(--card) 92px),
        var(--card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mou-active-card:hover {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: 0 20px 40px rgba(15, 23, 42, .09);
    transform: translateY(-2px);
}

.mou-active-card__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.mou-active-card__lead {
    min-width: 0;
}

.mou-active-card__code {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
}

.mou-active-card__buyer {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
}

.mou-active-card__meta {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.mou-active-card__price {
    text-align: right;
    flex-shrink: 0;
    display: grid;
    justify-items: end;
    gap: 6px;
}

.mou-active-card__price strong {
    display: block;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.2;
}

.mou-active-card__price span {
    color: var(--muted);
    font-size: 12px;
}

.mou-active-card__date {
    font-weight: 600;
}

.mou-active-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mou-active-metric {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 13px;
    background: color-mix(in srgb, var(--brand-soft) 44%, var(--card));
    min-height: 78px;
}

.mou-active-metric span {

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.mou-active-metric strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
}

.mou-active-metric__badge {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.mou-active-metric--wide {
    grid-column: 1 / -1;
}

.mou-active-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, var(--brand) 10%, var(--line));
}

.mou-active-card__foot p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    display: grid;
    gap: 3px;
}

.mou-active-card__foot p span:last-child {
    color: var(--brand-2);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mou-active-card__button {
    min-width: 118px;
    min-height: 44px;
    border-radius: 12px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 20%, transparent);
}

.mou-active-empty {
    padding: 36px 18px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, #fff) 0%, #fafafa 100%);
}

.mou-active-empty p {
    margin: 0 0 14px;
    color: var(--muted);
}

.mou-active-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: color-mix(in srgb, var(--brand) 14%, #fff);
    color: var(--brand-2, #a67f2f);
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
}

.mou-active-status--count {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mou-mgr-status-pill--compact {
    min-height: 24px;
    font-size: 11px;
}

.mou-deal-panel .owner-button,
.mou-deal-side-card .owner-button {
    min-height: 46px;
    border-radius: 12px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 20%, transparent);
}

.mou-deal-panel .owner-button--ghost,
.mou-deal-side-card .owner-button--ghost,
.mou-deal-panel .owner-button--danger,
.mou-deal-side-card .owner-button--danger {
    box-shadow: none;
}

.mou-deal-panel .owner-button--ghost,
.mou-deal-side-card .owner-button--ghost {
    background: color-mix(in srgb, var(--brand) 5%, var(--card));
}

.mou-deal-panel .owner-button--danger,
.mou-deal-side-card .owner-button--danger {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 6%, var(--card));
    border-color: color-mix(in srgb, var(--red) 38%, var(--line));
}

.mou-deal-panel .owner-button--danger:hover,
.mou-deal-side-card .owner-button--danger:hover {
    background: color-mix(in srgb, var(--red) 12%, var(--card));
    border-color: var(--red);
}

.mou-deal-cancel-form {
    display: grid;
    gap: 12px;
}

.mou-deal-cancel-form .owner-field {
    margin: 0;
}

.mou-deal-cancel-form textarea {
    width: 100%;
    min-height: 84px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

body:not(.dark) .mou-deal-cancel-form textarea {
    background: rgba(0, 0, 0, 0.02);
}

.mou-deal-cancel-form textarea:focus {
    border-color: rgba(200, 159, 61, 0.55);
    box-shadow: var(--ring);
    outline: 0;
}

.mou-active-warn {
    color: var(--red);
    font-weight: 800;
}

@media (max-width: 1100px) {
    .mou-deal-layout {
        grid-template-columns: 1fr;
    }

    .mou-deal-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mou-deal-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .mou-active-page {
        padding: 18px;
    }
}

@media (max-width: 640px) {
    .mou-deal-kpis,
    .mou-deal-summary,
    .mou-active-metrics {
        grid-template-columns: 1fr;
    }

    .mou-deal-hero {
        padding: 18px;
    }

    .mou-deal-hero h2 {
        font-size: 22px;
    }

    .mou-deal-hero__top,
    .mou-deal-panel__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .mou-deal-hero__price {
        width: 100%;
        text-align: left;
    }

    .mou-deal-side {
        grid-template-columns: 1fr;
    }

    .mou-deal-panel,
    .mou-deal-side-card {
        border-radius: 16px;
    }

    .mou-deal-panel .owner-button,
    .mou-deal-side-card .owner-button {
        width: 100%;
    }

    .mou-deal-check-table th,
    .mou-deal-check-table td {
        white-space: normal;
    }

    .mou-additional-doc-row {
        grid-template-columns: 1fr;
    }

    .mou-additional-docs__item {
        grid-template-columns: 1fr;
    }

    .mou-active-card__top,
    .mou-active-card__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .mou-active-card__price {
        width: 100%;
        justify-items: start;
        text-align: left;
    }

    .mou-active-card__button {
        width: 100%;
    }
}

.mou-sign-page {
    overflow: auto;
}

.mou-sign-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 28px 16px 40px;
}

.mou-sign-brand {
    margin-bottom: 18px;
}

.mou-sign-card {
    width: min(100%, 760px);
    padding: 28px 24px 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.mou-sign-card--document {
    width: min(100%, 980px);
}

.mou-sign-header {
    margin-bottom: 18px;
}

.mou-sign-document {
    margin-bottom: 24px;
    padding: 18px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: auto;
}

.mou-sign-document .mou-print-root {
    min-width: 0;
}

.mou-sign-document .mou-page {
    box-shadow: none;
    margin: 0 auto;
}

.mou-sign-pad-section {
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.mou-sign-pad-section h2 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 20px;
}

.mou-sign-card h1 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: clamp(24px, 4vw, 32px);
}

.mou-sign-copy {
    margin: 0 0 18px;
    color: var(--muted);
}

.mou-sign-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.mou-sign-summary div {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--brand-soft);
}

.mou-sign-summary span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.mou-sign-summary strong {
    color: var(--ink);
    word-break: break-word;
}

.mou-sign-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-weight: 600;
}

.mou-sign-form input[type="text"] {
    width: 100%;
    min-height: 46px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
}

.mou-sign-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.mou-sign-tab {
    flex: 1 1 0;
    min-width: 110px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.mou-sign-tab.is-active {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--brand-light), var(--brand));
    color: #111;
    font-weight: 700;
}

.mou-sign-hint,
.mou-sign-error {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.mou-sign-error {
    color: var(--red);
}

.mou-sign-upload {
    margin: 0 0 12px;
}

.mou-sign-upload-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 14px 16px;
    border: 1px dashed var(--brand-2);
    border-radius: 14px;
    background: var(--brand-soft, rgba(200, 159, 61, 0.12));
    color: var(--ink);
    cursor: pointer;
}

.mou-sign-upload-label__title {
    font-size: 14px;
    font-weight: 700;
}

.mou-sign-upload-label__meta {
    font-size: 12px;
    color: var(--muted);
}

.mou-sign-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mou-sign-upload-label:focus-within {
    outline: 0;
    box-shadow: var(--ring, 0 0 0 3px rgba(200, 159, 61, 0.18));
    border-color: var(--brand);
}

.mou-sign-pad-wrap {
    overflow: hidden;
    border: 1px dashed var(--brand-2);
    border-radius: 16px;
    background: #fff;
}

.mou-sign-pad-wrap--readonly {
    border-style: solid;
    border-color: var(--line);
    background: #fff;
}

.mou-sign-pad-image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 220px;
    object-fit: contain;
    object-position: center;
    padding: 12px;
}

.mou-sign-pad-section--complete {
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.mou-sign-success-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.mou-sign-success-badge::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--brand);
    color: #111;
    font-size: 12px;
    font-weight: 800;
}

.mou-sign-done--success {
    margin-top: 18px;
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 65%, var(--card));
}

.mou-deal-signatures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.mou-deal-signature-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.mou-deal-signature-card__label {
    margin: 0;
    color: var(--brand-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mou-deal-signature-card strong {
    color: var(--ink);
}

.mou-deal-signature-card span {
    color: var(--muted);
    font-size: 12px;
}

.mou-deal-signature-card .mou-signature-image {
    margin-top: 8px;
    max-height: 90px;
    width: auto;
}

.mou-sign-pad {
    display: block;
    width: 100%;
    height: 200px;
    touch-action: none;
    cursor: crosshair;
}

.mou-sign-pad-actions {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 18px;
}

.mou-sign-submit {
    width: 100%;
    min-height: 48px;
}

.mou-sign-done {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--brand-soft);
}

.mou-sign-done h2 {
    margin: 0 0 8px;
    color: var(--ink);
}

.mou-sign-done p {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 640px) {
    .mou-sign-summary {
        grid-template-columns: 1fr;
    }

    .mou-sign-card {
        padding: 20px 16px;
    }

    .mou-sign-pad {
        height: 168px;
    }
}

.mou-sign-link-row {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--brand-soft);
}

.mou-sign-link-row--spaced {
    margin-top: 12px;
}

.mou-sign-link-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mou-sign-link-row__meta strong {
    color: var(--ink);
}

.mou-sign-link-row__meta span {
    color: var(--muted);
    font-size: 13px;
}

.mou-sign-link-row__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.mou-sign-link-input {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
}

@media (max-width: 640px) {
    .mou-sign-link-row__actions {
        grid-template-columns: 1fr;
    }
}