* {
    box-sizing: border-box;
}
/*
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
    background: #f3f5f6;
    color: #1f2528;
}
*/
body {
    margin: 0;
    font-family: "PingFang TC", "PingFang HK", "PingFang SC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f3f5f6;
    color: #1f2528;
}

a {
    color: #126170;
}

input, select, textarea, button {
    font: inherit;
}

input, select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5d9;
    border-radius: 8px;
    background: #fff;
}

textarea {
    resize: vertical;
}

button, .btn {
    display: inline-block;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    background: #176b7a;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

button:disabled,
.btn:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.btn-secondary {
    background: #606b73;
}

.btn-danger {
    background: #b43b3b;
}

.btn-warning {
    background: #d99a18;
    color: #1f2528;
}

.btn-accent {
    background: #d86b14;
}

.container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 20px;
}

.card {
    background: #fff;
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 8px 22px rgba(31, 37, 40, .05);
    overflow-x: auto;
}

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

h1, h2, h3 {
    margin-top: 0;
}

.muted {
    color: #69767d;
}

.sidebar-company-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.sidebar-company-title h1 {
    margin-bottom: 0;
}

.notice {
    padding: 12px;
    border-radius: 8px;
    background: #fff8e1;
    border: 1px solid #ead082;
    margin-bottom: 12px;
}

.notice-error {
    background: #fde8e8;
    border-color: #f0a8a8;
    color: #8a1f1f;
}

.job-management-card {
    background: #fff8e1;
    border-color: #ead082;
}

.address-link {
    color: #126170;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.address-link:hover {
    color: #0f4f5b;
}

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

.table th, .table td {
    border-bottom: 1px solid #e9eef0;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

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

.company-users-edit-table {
    table-layout: fixed;
    min-width: 920px;
}

.company-users-edit-table input,
.company-users-edit-table select {
    min-width: 0;
    padding: 7px 8px;
}

.company-users-edit-table input[type="file"] {
    width: 100%;
    font-size: .82rem;
}

.immediate-upload-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    vertical-align: middle;
}

.immediate-upload-row input[type="file"],
.company-users-edit-table .immediate-upload-row input[type="file"] {
    display: none;
}

.immediate-upload-row .muted {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .82rem;
}

.upload-preview-trigger {
    cursor: pointer;
    transition: opacity .15s ease, box-shadow .15s ease;
}

.upload-preview-trigger:hover {
    opacity: .82;
    box-shadow: 0 0 0 3px rgba(23, 107, 122, .18);
}

.company-users-edit-title {
    margin-top: 28px;
}

.company-logo-edit {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 14px;
    align-items: end;
    margin-top: 14px;
}

.company-logo-preview {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #dbe3e6;
    background: #111;
}

.company-users-edit-table th,
.company-users-edit-table td {
    vertical-align: middle;
}

.company-users-edit-table .col-avatar {
    width: 13%;
}

.company-users-edit-table .col-name {
    width: 16%;
}

.company-users-edit-table .col-role {
    width: 15%;
}

.company-users-edit-table .col-account {
    width: 18%;
}

.company-users-edit-table .col-password {
    width: 19%;
}

.company-users-edit-table .col-tiny {
    width: 9.5%;
}

.company-users-edit-table th,
.company-users-edit-table td {
    padding: 8px 6px;
}

.company-users-edit-table th:nth-child(6),
.company-users-edit-table td:nth-child(6),
.company-users-edit-table th:nth-child(7),
.company-users-edit-table td:nth-child(7) {
    text-align: center;
}

.company-users-edit-table td[rowspan] {
    vertical-align: top;
}

.company-users-edit-table .avatar-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-content: start;
    gap: 8px;
    max-width: 100%;
}

.company-users-edit-table .avatar-edit .immediate-upload-row {
    display: block;
    max-width: 100%;
}

.company-users-edit-table .avatar-edit .muted {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.company-user-main-row td:not([rowspan]) {
    border-bottom: 0;
}

.company-user-contact-row td {
    padding-top: 0;
}

.company-user-contact-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 12px;
    align-items: end;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-action-row {
    margin-top: 12px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

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

.field-label {
    display: block;
    margin-bottom: 4px;
}

.datetime-control {
    min-width: 0;
}

.datetime-parts {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 72px auto 72px;
    gap: 8px;
    align-items: center;
}

.datetime-parts input,
.datetime-parts select {
    min-width: 0;
}

.job-management-time-grid .datetime-parts {
    grid-template-columns: minmax(150px, 1fr) 50px auto 50px;
}

.job-management-time-grid .datetime-parts select {
    text-align: center;
    text-align-last: center;
}

.job-management-time-grid .datetime-parts select option {
    text-align: center;
}

.datetime-separator {
    font-weight: 800;
    text-align: center;
}

.stat {
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 14px;
    background: #f8fafb;
}

.stat strong {
    display: block;
    margin-top: 4px;
    font-size: 1.05rem;
}

.job-time-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    margin-bottom: 16px;
}

.job-time-grid .stat {
    min-width: 0;
}

.job-time-grid .stat strong {
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.5;
}

.job-summary-grid .stat {
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.job-summary-grid .stat strong {
    text-align: center;
}

.job-summary-grid + .equipment-grid {
    margin-top: 14px;
}

.compact-list {
    margin: 10px 0 0;
    padding-left: 18px;
}

.compact-list li {
    margin: 4px 0;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.timeline-step {
    min-height: 56px;
    border-radius: 8px;
    border: 1px solid #dbe3e6;
    padding: 10px;
    background: #f8fafb;
}

.timeline-step.is-active {
    border-color: #176b7a;
    background: #e4f3f6;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.equipment-card {
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfd;
}

.equipment-card .qty {
    display: inline-block;
    margin-top: 8px;
    border-radius: 999px;
    background: #21323a;
    color: #fff;
    padding: 3px 9px;
    font-weight: 800;
}

.equipment-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#quoteRequestForm,
#quoteEquipmentPicker,
.quote-page .equipment-picker,
.quote-page .equipment-picker-section,
.quote-page .equipment-picker-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#quoteEquipmentPicker {
    overflow: hidden;
}

.quote-selected-equipment-summary {
    margin-top: 16px;
    max-width: 100%;
    min-width: 0;
}

.quote-selected-equipment-summary h3 {
    margin-top: 0;
}

.quote-selected-equipment-table-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 14px;
    border: 1px solid var(--theme-surface-border, color-mix(in srgb, currentColor 18%, transparent));
    border-radius: 8px;
    /* Inherit the containing panel visually so every current and future theme stays in sync. */
    background: transparent;
    overflow: hidden;
    contain: layout paint;
}

.quote-selected-equipment-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.quote-selected-equipment-table-scroll .table {
    width: 760px;
    min-width: 760px;
    max-width: none;
}

.equipment-picker {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.equipment-picker-section h4 {
    margin: 0 0 8px;
}

.equipment-picker-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.equipment-picker-heading h4 {
    margin: 0;
}

.equipment-collapse-btn {
    width: auto;
    padding: 4px 8px;
    border-radius: 8px;
    background: #eef2f4;
    border: 1px solid #cbd5d9;
    color: #4c5960;
    font-size: .82rem;
    font-weight: 800;
}

.equipment-collapse-btn:hover {
    background: #d9e0e4;
}

.equipment-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}

.equipment-picker-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 3px;
    align-items: start;
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 10px;
    background: #fbfcfd;
    cursor: pointer;
}

.equipment-picker-card:hover,
.equipment-picker-card.is-selected {
    border-color: #176b7a;
    background: #eaf4f6;
}

.equipment-picker-card input {
    width: auto;
    margin-top: 3px;
}

.equipment-picker-image {
    grid-column: 2;
    display: block;
    width: 100%;
    height: 112px;
    margin-bottom: 4px;
    border: 1px solid #e1e7ea;
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
}

.equipment-picker-main,
.equipment-picker-meta {
    grid-column: 2;
    min-width: 0;
}

.equipment-picker-main {
    font-weight: 800;
}

.equipment-picker-meta {
    color: #69767d;
    font-size: .86rem;
}

.equipment-picker-controls {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 4px;
}

.equipment-picker-controls span {
    display: grid;
    gap: 3px;
    color: #69767d;
    font-size: .82rem;
    font-weight: 700;
}

.equipment-picker-controls input,
.equipment-picker-controls select,
.equipment-summary-input {
    min-height: 34px;
    padding: 6px 8px;
}

#jobManagementForm .equipment-picker-controls {
    grid-template-columns: repeat(2, max-content);
}

#jobManagementForm .equipment-picker-controls input,
#jobManagementForm .equipment-picker-controls select {
    width: calc(6ch + 18px);
    min-width: calc(6ch + 18px);
}

.quote-equipment-quantity-control {
    grid-template-columns: minmax(0, 1fr);
    max-width: 120px;
}

.equipment-summary-input {
    width: calc(3ch + 32px);
    min-width: calc(3ch + 32px);
    max-width: none;
}

.public-payment-panel {
    margin-top: 14px;
    border-top: 1px solid #e9eef0;
    padding-top: 12px;
}

.public-payment-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    font-weight: 900;
    color: #126170;
}

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.payment-method-card {
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfd;
}

.payment-method-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.payment-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.payment-status-badge.is-paid {
    background: #dff5e8;
    color: #166334;
}

.payment-status-badge.is-pending {
    background: #fff1d6;
    color: #8a5200;
}

.equipment-create-form {
    display: grid;
    grid-template-columns: minmax(82px, .45fr) minmax(130px, .75fr) minmax(180px, 1.35fr) minmax(96px, .5fr) minmax(96px, .5fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

.equipment-create-form button {
    white-space: nowrap;
}

.equipment-section .header {
    margin-bottom: 10px;
}

.equipment-table {
    margin-top: 8px;
}

.equipment-admin-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 190px;
}

.equipment-admin-name-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.equipment-admin-name-copy small {
    font-size: .75rem;
}

.equipment-image-upload {
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
}

.equipment-image-preview {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 1px dashed #aebbc1;
    border-radius: 7px;
    background: #f6f8f9;
    color: #69767d;
    font-size: .72rem;
    font-weight: 800;
}

.equipment-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.equipment-image-upload:hover .equipment-image-preview {
    border-color: #176b7a;
    box-shadow: 0 0 0 2px rgba(23, 107, 122, .12);
}

.equipment-image-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.upload-error {
    color: #b42318 !important;
}

.tag-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    align-items: center;
}

.filter-label {
    color: #4c5960;
    font-weight: 800;
    margin-right: 2px;
}

.tag-filter-btn {
    border: 1px solid #cbd5d9;
    background: #f6f8f9;
    color: #4c5960;
    padding: 7px 10px;
    border-radius: 8px;
    font-weight: 700;
}

.tag-filter-btn.is-active {
    background: #176b7a;
    border-color: #176b7a;
    color: #fff;
}

.equipment-inline-input {
    width: 100%;
    min-width: 72px;
    padding: 7px 8px;
}

.equipment-tag-input {
    width: calc(2ch + 18px);
    min-width: calc(2ch + 18px);
}

.equipment-rental-quote-input {
    width: calc(6ch + 18px);
    min-width: calc(6ch + 18px);
}

.equipment-quantity-input {
    width: calc(4ch + 18px);
    min-width: calc(4ch + 18px);
}

.equipment-category-form {
    display: inline-block;
    margin: 0;
}

.equipment-category-save-btn {
    vertical-align: top;
    white-space: nowrap;
}

.icon-save-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #cbd5d9;
    border-radius: 8px;
    background: #eef2f4;
    color: #4c5960;
    line-height: 34px;
    text-align: center;
}

.icon-save-btn:hover {
    background: #d9e0e4;
}

.inline-delete-form {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.icon-delete-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: #eef2f4;
    border: 1px solid #cbd5d9;
    color: #69767d;
    font-weight: 900;
    line-height: 32px;
    text-align: center;
}

.icon-delete-btn:hover {
    background: #d9e0e4;
    color: #3f4a50;
}

.presence-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.presence-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #d2dbdf;
    border-radius: 999px;
    padding: 6px 10px;
    background: #fff;
    color: #364147;
    font-weight: 700;
    white-space: nowrap;
}

.presence-avatar-img,
.presence-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: -4px;
}

.presence-avatar-img {
    object-fit: cover;
    border: 1px solid #d2dbdf;
}

.presence-avatar-fallback {
    background: #176b7a;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
}

.presence-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c93e3e;
    box-shadow: 0 0 0 3px rgba(201, 62, 62, .14);
}

.presence-badge.is-online .presence-dot {
    background: #188038;
    box-shadow: 0 0 0 3px rgba(24, 128, 56, .16);
}

.presence-badge.is-away .presence-dot {
    background: #f29900;
    box-shadow: 0 0 0 3px rgba(242, 153, 0, .2);
}

.presence-badge.is-offline .presence-dot {
    background: #c93e3e;
}

.avatar-img,
.avatar-fallback {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.avatar-img {
    object-fit: cover;
    border: 1px solid #d2dbdf;
}

.avatar-fallback {
    background: #176b7a;
    color: #fff;
    font-weight: 900;
}

.avatar-edit {
    display: grid;
    grid-template-columns: 42px minmax(150px, 1fr);
    gap: 10px;
    align-items: center;
}

.avatar-edit input {
    padding: 7px;
}

.staff-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.staff-picker-card {
    display: grid;
    grid-template-columns: auto 42px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 10px;
    background: #fbfcfd;
    cursor: pointer;
}

.staff-picker-card:hover,
.staff-picker-card.is-selected {
    border-color: #176b7a;
    background: #eaf4f6;
}

.staff-picker-card input {
    width: auto;
}

.staff-picker-card strong,
.staff-picker-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-picker-card small {
    color: #69767d;
}

.setting-switch-list {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.setting-switch-list .setting-switch {
    justify-content: space-between;
    width: min(100%, 560px);
}

.setting-switch-list .setting-switch > span:first-child {
    display: grid;
    gap: 3px;
}

.setting-switch-list .setting-switch small {
    color: #69767d;
    font-weight: 400;
}

.setting-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    margin-top: 4px;
    cursor: pointer;
    font-weight: 700;
}

.setting-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.setting-switch input:disabled + .setting-switch-track {
    opacity: 1;
}

.setting-switch-track {
    position: relative;
    width: 52px;
    height: 32px;
    flex: 0 0 52px;
    border-radius: 999px;
    background: #cbd5d9;
    box-shadow: inset 0 0 0 1px rgba(31, 37, 40, .08);
    transition: background .18s ease, box-shadow .18s ease;
}

.setting-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(31, 37, 40, .24);
    transition: transform .18s ease;
}

.setting-switch input:checked + .setting-switch-track {
    background: #34c759;
}

.setting-switch input:checked + .setting-switch-track::after {
    transform: translateX(20px);
}

.setting-switch input:focus-visible + .setting-switch-track {
    box-shadow: 0 0 0 3px rgba(23, 107, 122, .22);
}

.settings-page .card {
    border-color: #e2d5c7;
}

.managed-company-actions {
    display: grid;
    gap: 12px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #ead082;
    border-radius: 8px;
    background: #fff8e1;
}

.company-status-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: .82rem;
    font-weight: 900;
    background: #e4f3f6;
    color: #126170;
}

.company-status-badge.is-archived,
.company-status-badge.is-suspended {
    background: #fff1d6;
    color: #8a5200;
}

.company-delete-confirm-form {
    display: grid;
    grid-template-columns: minmax(160px, 220px) auto auto;
    gap: 10px;
    align-items: end;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 280px;
    margin: 12px 0;
}

.compact-select {
    width: auto;
    min-width: 100px;
}

.two-factor-setup {
    display: grid;
    gap: 12px;
    margin: 12px 0;
}

.two-factor-setup .stat strong {
    overflow-wrap: anywhere;
}

.two-factor-card {
    padding: 24px;
}

.two-factor-card p {
    line-height: 1.7;
}

.qr-code-box {
    display: inline-flex;
    padding: 0;
    margin: 8px 0 16px;
    background: #fff;
}

.qr-code-box img {
    display: block;
    image-rendering: pixelated;
}

.manual-secret {
    overflow-wrap: anywhere;
}

.two-factor-form {
    display: grid;
    gap: 8px;
}

.ajax-save-status {
    min-height: 1.3em;
    margin: 6px 0 0;
}

.chat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 14px;
    align-items: start;
}

.chat-box {
    height: 495px;
    overflow-y: auto;
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    background: #fbfcfd;
    padding: 12px;
}

.msg {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 8px;
    max-width: 78%;
}

.msg.client {
    background: #e7f0ff;
    margin-left: 0;
    margin-right: auto;
}

.msg.staff {
    background: #ddf3e4;
    margin-left: auto;
    margin-right: 0;
}

.msg.system {
    background: #eceff1;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: .92rem;
}

.msg small {
    display: block;
    margin-top: 5px;
    color: #607078;
}

.theme-dark {
    background: #161a1d;
    color: #eef2f4;
}

.theme-dark a {
    color: #8dd7e4;
}

.theme-dark input,
.theme-dark select,
.theme-dark textarea {
    background: #22282c;
    border-color: #3a454b;
    color: #eef2f4;
}

.theme-dark .card,
.theme-dark .admin-sidebar,
.theme-dark .chat-box,
.theme-dark .equipment-card,
.theme-dark .job-card,
.theme-dark .stat {
    background: #1d2327;
    border-color: #3a454b;
    color: #eef2f4;
}

.theme-dark .muted,
.theme-dark .msg small {
    color: #a8b4ba;
}

.theme-dark .notice {
    background: #312b18;
    border-color: #6d5a24;
}

.theme-dark .managed-company-actions {
    background: #312b18;
    border-color: #6d5a24;
    color: #eef2f4;
}

.theme-dark .company-status-badge {
    background: #1f3b42;
    color: #9de7f3;
}

.theme-dark .company-status-badge.is-archived,
.theme-dark .company-status-badge.is-suspended {
    background: #4a3515;
    color: #ffd47a;
}

.theme-dark .btn-warning {
    background: #d8a23a;
    color: #1d2327;
}

.theme-dark .notice-error {
    background: #3a2020;
    border-color: #8a3a3a;
    color: #ffd6d6;
}

.theme-dark .job-management-card {
    background: #312b18;
    border-color: #6d5a24;
}

.theme-dark .table th,
.theme-dark .table td {
    border-bottom-color: #303a40;
}

.theme-dark .company-logo-preview {
    border-color: #3a454b;
    background: #111;
}

.theme-dark .msg.client {
    background: #20324a;
    color: #eef6ff;
}

.theme-dark .msg.staff {
    background: #1f3a2b;
    color: #effaf3;
}

.theme-dark .msg.system {
    background: #2a3035;
    color: #dfe6ea;
}

.theme-dark .timeline-step,
.theme-dark .equipment-picker-card,
.theme-dark .staff-picker-card,
.theme-dark .presence-badge,
.theme-dark .business-category-block,
.theme-dark .client-card {
    background: #22282c;
    border-color: #3a454b;
    color: #eef2f4;
}

.theme-dark .presence-avatar-img {
    border-color: #3a454b;
}

.theme-dark .timeline-step.is-active,
.theme-dark .equipment-picker-card:hover,
.theme-dark .equipment-picker-card.is-selected,
.theme-dark .staff-picker-card:hover,
.theme-dark .staff-picker-card.is-selected {
    background: #183842;
    border-color: #5bb7c8;
}

.theme-dark .equipment-picker-meta,
.theme-dark .staff-picker-card small,
.theme-dark .filter-label,
.theme-dark .timeline-legend,
.theme-dark .occupancy-label span {
    color: #a8b4ba;
}

.theme-dark .tag-filter-btn,
.theme-dark .emoji-btn,
.theme-dark .icon-save-btn,
.theme-dark .icon-delete-btn,
.theme-dark .equipment-collapse-btn {
    background: #22282c;
    border-color: #3a454b;
    color: #eef2f4;
}

.theme-dark .tag-filter-btn.is-active,
.theme-dark .emoji-btn:hover,
.theme-dark .equipment-collapse-btn:hover {
    background: #176b7a;
    border-color: #5bb7c8;
    color: #fff;
}

.theme-dark .mini-calendar {
    background: #1d2327;
    border-color: #3a454b;
}

.theme-dark .mini-calendar th,
.theme-dark .mini-calendar td {
    border-bottom-color: #303a40;
}

.theme-dark .mini-calendar button:hover {
    border-color: #5bb7c8;
    background: #183842;
}

.theme-dark .mini-calendar .is-today button {
    border-color: #69767d;
}

.theme-dark .mini-calendar .is-selected button {
    border-color: #5bb7c8;
    background: #183842;
    box-shadow: inset 0 0 0 1px #5bb7c8;
}

.theme-dark .mini-calendar .day-count-0 {
    color: #dfe6ea;
}

.theme-dark .mini-calendar .day-count-1 {
    color: #80d996;
}

.theme-dark .mini-calendar .day-count-2 {
    color: #ffc46a;
}

.theme-dark .mini-calendar .day-count-3 {
    color: #ff8b8b;
}

.theme-dark .occupancy-track {
    background: repeating-linear-gradient(
        to right,
        #303a40 0,
        #303a40 1px,
        #1d2327 1px,
        #1d2327 calc(100% / 24)
    );
    border-color: #3a454b;
}

.theme-dark .chat-attachment.file {
    background: rgba(34, 40, 44, .9);
    border-color: #3a454b;
}

.theme-dark .chat-attachment.image img {
    background: #22282c;
    border-color: #3a454b;
}

.theme-dark .equipment-picker-section,
.theme-dark .equipment-picker-grid,
.theme-dark .staff-picker {
    color: #eef2f4;
}

.theme-dark .client-card-preview {
    background: #22282c;
    border-color: #3a454b;
    color: #eef2f4;
}

.theme-dark .client-card-edit {
    border-top-color: #303a40;
}

.theme-dark .public-payment-panel {
    border-top-color: #303a40;
}

.theme-dark .public-payment-panel summary {
    color: #8dd7e4;
}

.theme-dark .payment-method-card {
    background: #22282c;
    border-color: #3a454b;
    color: #eef2f4;
}

.theme-dark .client-card-edit summary {
    color: #8dd7e4;
}

.theme-dark .client-card-link:hover {
    color: #8dd7e4;
}

.theme-dark label.equipment-picker-card,
.theme-dark label.staff-picker-card {
    background: #252c31;
    border-color: #46545b;
    color: #eef2f4;
    box-shadow: none;
}

.theme-dark label.equipment-picker-card:hover,
.theme-dark label.equipment-picker-card.is-selected,
.theme-dark label.staff-picker-card:hover,
.theme-dark label.staff-picker-card.is-selected {
    background: #173d49;
    border-color: #66c7d8;
}

.theme-dark .equipment-picker-card input[type="checkbox"],
.theme-dark .staff-picker-card input[type="checkbox"] {
    accent-color: #5bb7c8;
}

.theme-dark .equipment-picker-main,
.theme-dark .staff-picker-card strong {
    color: #f7fbfc;
}

.theme-dark .equipment-picker-meta,
.theme-dark .staff-picker-card small {
    color: #c0ccd1;
}

.theme-dark .mini-calendar,
.theme-dark .mini-calendar tbody,
.theme-dark .mini-calendar tr,
.theme-dark .mini-calendar th,
.theme-dark .mini-calendar td {
    background: #20272b;
    color: #eef2f4;
}

.theme-dark .mini-calendar td:empty {
    background: #1a2024;
}

.theme-dark .mini-calendar button {
    background: transparent;
    color: inherit;
}

.theme-dark .mini-calendar em {
    background: #5bb7c8;
    color: #081216;
}

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

.emoji-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.emoji-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d2dbdf;
    border-radius: 8px;
    background: #fff;
    color: #1f2528;
    line-height: 34px;
    text-align: center;
}

.emoji-btn:hover {
    background: #eef5f6;
    border-color: #b8c9cf;
}

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

.file-picker-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    cursor: pointer;
    border-radius: 8px;
    padding: 10px 14px;
    background: #606b73;
    color: #fff;
    font-weight: 700;
}

.file-picker-btn input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.chat-attachment {
    display: grid;
    gap: 5px;
    margin-top: 8px;
    color: #126170;
    text-decoration: none;
}

.chat-attachment.image img {
    display: block;
    max-width: min(260px, 100%);
    max-height: 220px;
    border-radius: 8px;
    border: 1px solid rgba(31, 37, 40, .12);
    object-fit: contain;
    background: #fff;
}

.chat-attachment.file {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .66);
    border: 1px solid rgba(31, 37, 40, .12);
}

.chat-attachment.file span:not(.file-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attachment small {
    display: inline;
    margin: 0;
}

.quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.service-module-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.service-module-fields {
    margin-bottom: 14px;
}

.staff-picker-card > select {
    grid-column: 2 / -1;
    min-width: 0;
    padding: 7px 9px;
}

.status-actions {
    align-items: center;
}

.status-actions .status-cancel-btn {
    margin-left: auto;
}

.status-notification-sent {
    align-self: center;
    color: #176b7a;
    font-weight: 700;
    white-space: nowrap;
}

.admin-layout {
    display: grid;
    grid-template-columns: 30% 70%;
    min-height: 100vh;
}

.admin-sidebar {
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid #d5dee2;
    padding: 16px;
    background: #eef2f4;
}

.admin-main {
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

.admin-main iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #f3f5f6;
    color-scheme: light dark;
}

.theme-dark .admin-main,
.theme-dark .admin-main iframe {
    background: #161a1d;
}

.sidebar-section {
    margin-bottom: 16px;
}

.sidebar-actions {
    display: grid;
    gap: 8px;
}

.sidebar-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-header {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.calendar-selectors {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) minmax(82px, .8fr);
    gap: 8px;
    align-items: center;
}

.calendar-selectors select {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 8px;
    font-weight: 800;
    text-align: center;
}

.calendar-nav {
    width: 38px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
}

.mini-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    overflow: hidden;
}

.mini-calendar th,
.mini-calendar td {
    text-align: center;
    padding: 3px;
    border-bottom: 1px solid #edf1f3;
    font-size: .9rem;
}

.mini-calendar button {
    position: relative;
    width: 100%;
    min-height: 34px;
    padding: 4px 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
}

.mini-calendar button:hover {
    border-color: #176b7a;
    background: #e4f3f6;
}

.mini-calendar em {
    position: absolute;
    right: 3px;
    top: 3px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #176b7a;
    color: #fff;
    font-size: .72rem;
    font-style: normal;
    line-height: 16px;
}

.quote-calendar-alert {
    position: absolute;
    left: 5px;
    top: 2px;
    z-index: 1;
    color: #d63131;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.mini-calendar .is-today button {
    border-color: #b7c5cc;
}

.mini-calendar .is-selected button {
    border-color: #176b7a;
    background: #d8edf1;
    box-shadow: inset 0 0 0 1px #176b7a;
}

.mini-calendar .has-spanning-job button::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.mini-calendar .day-count-0 {
    color: #111;
}

.mini-calendar .day-count-1 {
    color: #188038;
    font-weight: 800;
}

.mini-calendar .day-count-2 {
    color: #df7b00;
    font-weight: 800;
}

.mini-calendar .day-count-3 {
    color: #c93e3e;
    font-weight: 900;
}

.job-card {
    position: relative;
    display: block;
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
    color: #1f2528;
    text-decoration: none;
}

.job-card:hover,
.job-card.active {
    border-color: #176b7a;
    box-shadow: 0 0 0 2px rgba(23, 107, 122, .14);
}

.job-card.is-cancelled,
.day-job.is-cancelled,
.quote-request-card.is-rejected,
.job-detail.is-cancelled .card,
.public-job.is-cancelled .card {
    filter: grayscale(1);
    opacity: .68;
    background: #f1f3f4;
    border-color: #c9d0d4;
}

.job-card.is-cancelled {
    text-decoration: line-through;
}

.quote-request-card.is-rejected {
    text-decoration: line-through;
}

.quote-request-card.is-rejected .btn,
.quote-request-card.is-rejected a,
.quote-request-card.is-rejected button {
    text-decoration: none;
}

.job-card.is-cancelled:hover,
.job-card.is-cancelled.active {
    border-color: #8b969c;
    box-shadow: 0 0 0 2px rgba(105, 118, 125, .14);
}

.job-meta {
    color: #68767d;
    font-size: .9rem;
    margin-top: 4px;
}

.btn.quote-request-nav-alert {
    color: #ff4d4d;
    border: 1px solid #c84b4b;
}

.quote-request-job-card,
.quote-request-day-card,
.quote-request-item {
    background: #fff1f1;
    border-color: #efb5b5;
    color: #2c1f1f;
}

.quote-request-job-card:hover,
.quote-request-job-card.active,
.quote-request-day-card:hover,
.quote-request-item:hover {
    border-color: #c84b4b;
    box-shadow: 0 0 0 2px rgba(200, 75, 75, .16);
}

.quote-request-list,
.quote-request-day-list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.quote-request-item,
.quote-request-day-card {
    display: block;
    border: 1px solid #efb5b5;
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
}

.quote-request-day-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}

.quote-request-day-card strong,
.quote-request-day-card span,
.quote-request-day-card small,
.quote-request-item strong,
.quote-request-item span {
    display: block;
    overflow-wrap: anywhere;
}

.quote-request-day-card small {
    color: #755050;
}

.day-view .header {
    align-items: center;
}

.day-view .header h1 {
    margin-bottom: 4px;
}

.day-add-btn {
    align-self: flex-start;
    margin-top: 1px;
}

.day-job h2 {
    margin-bottom: 4px;
}

.day-timeline-card {
    overflow: visible;
}

.timeline-scale {
    position: relative;
    height: 24px;
    margin-left: 150px;
    border-bottom: 1px solid #cfd8dc;
    color: #69767d;
    font-size: .78rem;
}

.timeline-scale span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.timeline-scale span:first-child {
    transform: translateX(0);
}

.timeline-scale span:last-child {
    transform: translateX(-100%);
}

.day-occupancy {
    display: grid;
    gap: 0;
    margin-top: 8px;
}

.occupancy-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 42px;
}

.occupancy-label {
    overflow: hidden;
}

.occupancy-label strong,
.occupancy-label span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.occupancy-label span {
    color: #69767d;
    font-size: .78rem;
}

.occupancy-track {
    position: relative;
    height: 18px;
    border-radius: 8px;
    background: repeating-linear-gradient(
        to right,
        #edf1f3 0,
        #edf1f3 1px,
        #fff 1px,
        #fff calc(100% / 24)
    );
    border: 1px solid #dbe3e6;
    overflow: hidden;
}

.occupancy-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 2px;
}

.occupancy-segment.install,
.timeline-legend .install {
    background: #66FF66;
}

.occupancy-segment.active,
.timeline-legend .active {
    background: #7744FF;
}

.occupancy-row.is-cancelled {
    filter: grayscale(1);
    opacity: .5;
}

.occupancy-row.is-cancelled .occupancy-label {
    text-decoration: line-through;
}

.timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 0 0 150px;
    color: #4c5960;
    font-size: .86rem;
}

.timeline-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.timeline-legend i {
    display: inline-block;
    width: 18px;
    height: 10px;
    border-radius: 999px;
}

.login-box {
    max-width: 420px;
    margin: 8vh auto;
}

.login-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: .67em;
}

.login-title-row h1 {
    margin-bottom: 0;
}

.partner-recruit-footer {
    --cyber-cyan: #21f6ff;
    --cyber-pink: #ff2bd6;
    position: relative;
    isolation: isolate;
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 24px 26px 18px;
    overflow: hidden;
    color: #eaffff;
    background:
        linear-gradient(135deg, rgba(33, 246, 255, .11), transparent 42%),
        linear-gradient(315deg, rgba(255, 43, 214, .12), transparent 48%),
        #080b18;
    border: 1px solid rgba(33, 246, 255, .78);
    border-right-color: rgba(255, 43, 214, .78);
    box-shadow:
        0 0 0 1px rgba(255, 43, 214, .13) inset,
        0 0 22px rgba(33, 246, 255, .16),
        0 18px 48px rgba(3, 5, 16, .24);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}

.partner-recruit-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 3px,
        rgba(255, 255, 255, .025) 4px
    );
}

.partner-recruit-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 34%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--cyber-cyan), #fff, transparent);
    box-shadow: 0 0 12px var(--cyber-cyan);
    animation: partner-recruit-scan 5s linear infinite;
}

.partner-recruit-grid {
    position: absolute;
    z-index: -2;
    inset: 42% 0 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(33, 246, 255, .55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 246, 255, .55) 1px, transparent 1px);
    background-size: 28px 18px;
    transform: perspective(140px) rotateX(40deg) scale(1.08);
    transform-origin: bottom;
}

.partner-recruit-kicker {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
    color: var(--cyber-cyan);
    font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .16em;
}

.partner-recruit-status {
    display: inline-flex;
    align-items: center;
}

.partner-recruit-status i {
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--cyber-pink);
    box-shadow: 0 0 10px var(--cyber-pink);
    animation: partner-recruit-pulse 1.8s ease-in-out infinite;
}

.partner-recruit-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
    gap: 28px;
    align-items: end;
}

.partner-recruit-content h2 {
    position: relative;
    margin: 0 0 9px;
    color: #fff;
    font-size: clamp(1.45rem, 4vw, 2.15rem);
    line-height: 1.05;
    letter-spacing: .08em;
    text-shadow: -2px 0 rgba(255, 43, 214, .65), 2px 0 rgba(33, 246, 255, .65);
}

.partner-recruit-content h2::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(33, 246, 255, .24);
    transform: translate(2px, 2px);
    pointer-events: none;
}

.partner-recruit-content p {
    max-width: 46ch;
    margin: 0;
    color: #aebfd0;
    font-size: .93rem;
    line-height: 1.75;
}

.partner-recruit-mail {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 14px 44px 14px 16px;
    overflow: hidden;
    color: #071017;
    text-decoration: none;
    background: var(--cyber-cyan);
    border: 1px solid #baffff;
    box-shadow: 5px 5px 0 var(--cyber-pink), 0 0 18px rgba(33, 246, 255, .2);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.partner-recruit-mail::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, .72) 48%, transparent 58% 100%);
    transform: translateX(-125%);
    transition: transform .45s ease;
}

.partner-recruit-mail:hover,
.partner-recruit-mail:focus-visible {
    color: #071017;
    background: #8bfbff;
    box-shadow: 8px 8px 0 var(--cyber-pink), 0 0 26px rgba(33, 246, 255, .4);
    transform: translate(-2px, -2px);
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.partner-recruit-mail:hover::before,
.partner-recruit-mail:focus-visible::before {
    transform: translateX(125%);
}

.partner-recruit-mail span {
    position: relative;
    font: 800 .65rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
}

.partner-recruit-mail strong {
    position: relative;
    overflow-wrap: anywhere;
    font-size: .98rem;
}

.partner-recruit-mail b {
    position: absolute;
    top: 50%;
    right: 15px;
    font-size: 1.35rem;
    transform: translateY(-50%);
}

.partner-recruit-code {
    margin-top: 19px;
    padding-top: 10px;
    color: rgba(255, 43, 214, .76);
    border-top: 1px solid rgba(255, 43, 214, .28);
    font: 700 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .13em;
}

@keyframes partner-recruit-scan {
    to { left: 110%; }
}

@keyframes partner-recruit-pulse {
    50% { opacity: .45; transform: scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
    .partner-recruit-footer::after,
    .partner-recruit-status i {
        animation: none;
    }
}

.login-action-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin-top: 1em;
}

.login-resend-form {
    margin: 0 0 0 auto;
}

.login-action-row button {
    height: 100%;
}

.oauth-login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 14px;
    color: #66747b;
    font-size: 14px;
}

.oauth-login-divider::before,
.oauth-login-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #dbe3e6;
}

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

.oauth-provider-button {
    text-align: center;
}

.oauth-google {
    background: #fff;
    color: #25313a;
    border: 1px solid #cbd5d9;
}

.oauth-facebook {
    background: #1877f2;
}

.oauth-login-note {
    margin: 12px 0 0;
    text-align: center;
}

.social-binding-list {
    display: grid;
    gap: 12px;
}

.social-binding-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid #dbe3e6;
    border-radius: 8px;
}

.social-binding-row form {
    margin: 0;
}

.social-binding-status {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8edf0;
    color: #526169;
    font-size: 12px;
    font-weight: 700;
}

.social-binding-status.is-bound {
    background: #dff3e6;
    color: #21633a;
}

.theme-dark .social-binding-row {
    border-color: #3a454b;
}

.theme-dark .oauth-google {
    background: #2a3237;
    color: #eef2f4;
    border-color: #526169;
}

@media (max-width: 560px) {
    .social-binding-row {
        align-items: stretch;
        flex-direction: column;
    }

    .social-binding-row .btn,
    .social-binding-row button {
        width: 100%;
        text-align: center;
    }
}

.notification-settings-group .setting-switch {
    display: flex;
    width: fit-content;
}

.super-admin-profile-table {
    min-width: 760px;
}

.super-admin-profile-table td {
    vertical-align: middle;
}

.super-admin-profile-table td:nth-child(1) {
    width: 180px;
}

.super-admin-profile-table td:nth-child(2) {
    width: 240px;
}

.super-admin-profile-table td:nth-child(2) strong,
.super-admin-profile-table td:nth-child(2) span {
    display: block;
    overflow-wrap: anywhere;
}

.quick-create-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.external-person-form {
    margin: 18px 0;
}

.business-category-grid,
.client-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.business-category-block,
.client-card {
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfd;
}

.business-category-block .header,
.client-card .header {
    margin-bottom: 8px;
}

.client-card-title,
.client-card-preview-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.client-card-title h2,
.client-card-title h3,
.client-card-title p {
    margin-top: 0;
    margin-bottom: 0;
}

.client-card-avatar,
.client-card-avatar-fallback,
.client-card-preview-avatar,
.client-card-preview-avatar-fallback {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.client-card-avatar,
.client-card-avatar-fallback {
    width: 48px;
    height: 48px;
}

.client-card-preview-avatar,
.client-card-preview-avatar-fallback {
    width: 38px;
    height: 38px;
}

.client-card-avatar,
.client-card-preview-avatar {
    object-fit: cover;
    border: 1px solid #d2dbdf;
}

.client-card-avatar-fallback,
.client-card-preview-avatar-fallback {
    background: #176b7a;
    color: #fff;
    font-weight: 900;
}

.client-card-edit {
    margin-top: 12px;
    border-top: 1px solid #e9eef0;
    padding-top: 10px;
}

.client-card-edit summary {
    cursor: pointer;
    font-weight: 900;
    color: #126170;
}

.client-card-edit form {
    margin-top: 10px;
}

.client-card-single {
    max-width: 680px;
}

.client-card-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.client-card-link:hover {
    color: #126170;
}

.client-card-preview {
    border: 1px solid #dbe3e6;
    border-radius: 8px;
    padding: 12px;
    background: #f8fafb;
    color: #1f2528;
    line-height: 1.7;
}

.client-card-preview[hidden] {
    display: none;
}

.client-card-preview-title {
    font-weight: 900;
}

.client-card-preview-heading {
    margin-bottom: 8px;
}

.upload-error {
    color: #b3261e;
}

.compact-person-list {
    display: grid;
    gap: 8px;
}

.person-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    border-top: 1px solid #e9eef0;
    padding-top: 8px;
}

.person-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.person-row strong,
.person-row span {
    display: block;
    overflow-wrap: anywhere;
}

.data-transfer-card { border-left: 4px solid #176b7a; }
.data-transfer-layout, .data-transfer-actions, .data-transfer-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.data-transfer-layout { align-items: flex-end; justify-content: space-between; }
.data-transfer-import-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.data-transfer-import-form label { min-width: min(100%, 280px); }
.data-transfer-selection { margin: 12px 0 0; }
.transfer-select-cell { width: 42px; text-align: center; }
.transfer-row-checkbox { width: 18px; height: 18px; margin: 0; accent-color: #176b7a; }
.client-card-transfer-select { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: .88rem; font-weight: 800; }
.person-row.has-transfer-select { grid-template-columns: auto minmax(0, 1fr) auto; }
 (max-width: 700px) {
    .data-transfer-layout, .data-transfer-import-form { align-items: stretch; flex-direction: column; }
}


.dashboard-page {
    --dashboard-bg: #f3f7f4;
    --dashboard-surface: rgba(255, 255, 255, .96);
    --dashboard-surface-soft: #f7faf8;
    --dashboard-border: #dce6df;
    --dashboard-text: #10211b;
    --dashboard-muted: #65746d;
    --dashboard-accent: #07836d;
    --dashboard-accent-soft: #e4f4ef;
    --dashboard-shadow: 0 14px 38px rgba(25, 55, 43, .08);
    min-height: 100vh;
    color: var(--dashboard-text);
    background: radial-gradient(circle at 12% 0, rgba(7, 131, 109, .07), transparent 31%), var(--dashboard-bg);
}
.dashboard-page .muted { color: var(--dashboard-muted); }
.dashboard-shell { max-width: 1480px; margin: 0 auto; padding: 34px; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.dashboard-heading h1 { margin: 5px 0 6px; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1; letter-spacing: -.045em; }
.dashboard-heading p { margin-bottom: 0; }
.dashboard-heading time { color: var(--dashboard-muted); white-space: nowrap; }
.dashboard-eyebrow, .dashboard-section-kicker { margin: 0; color: var(--dashboard-accent); font-size: .75rem; font-weight: 900; letter-spacing: .14em; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.dashboard-metric, .dashboard-panel { color: var(--dashboard-text); background: var(--dashboard-surface); border: 1px solid var(--dashboard-border); box-shadow: var(--dashboard-shadow); }
.dashboard-metric { min-height: 164px; padding: 24px; border-radius: 18px; display: flex; flex-direction: column; }
.dashboard-metric > span { color: var(--dashboard-muted); font-weight: 750; }
.dashboard-metric strong { margin: 12px 0 4px; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.dashboard-metric small { margin-top: auto; color: var(--dashboard-muted); }
.dashboard-primary-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, .9fr); gap: 20px; margin-bottom: 20px; }
.dashboard-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dashboard-panel { min-width: 0; padding: 24px; border-radius: 20px; }
.dashboard-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.dashboard-panel-heading h2 { margin: 4px 0 0; font-size: 1.35rem; }
.dashboard-panel-heading p:last-child { margin: 5px 0 0; font-size: .9rem; }
.dashboard-panel-heading > a { color: var(--dashboard-accent); font-weight: 800; text-decoration: none; white-space: nowrap; }
.dashboard-panel-heading > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dashboard-job-list { display: grid; }
.dashboard-job-row { display: grid; grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 4px; color: inherit; text-decoration: none; border-top: 1px solid var(--dashboard-border); }
.dashboard-job-row:first-child { border-top: 0; padding-top: 4px; }
.dashboard-job-row:hover { color: inherit; background: var(--dashboard-surface-soft); }
.dashboard-job-row > time { color: var(--dashboard-accent); font-weight: 900; }
.dashboard-job-copy, .dashboard-job-copy strong, .dashboard-job-copy small, .dashboard-job-meta { display: block; min-width: 0; }
.dashboard-job-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-job-copy small { margin-top: 4px; color: var(--dashboard-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-job-meta { text-align: right; }
.dashboard-job-meta em { display: block; color: var(--dashboard-accent); font-style: normal; font-size: .82rem; font-weight: 900; }
.dashboard-job-meta small { color: var(--dashboard-muted); }
.dashboard-more-note { margin: 14px 0 0; font-size: .88rem; }
.dashboard-action-list { display: grid; gap: 10px; }
.dashboard-action-list a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; min-height: 52px; padding: 11px 14px; color: var(--dashboard-text); background: var(--dashboard-surface-soft); border: 1px solid var(--dashboard-border); border-radius: 12px; font-weight: 850; text-decoration: none; }
.dashboard-action-list a:hover { color: var(--dashboard-accent); border-color: var(--dashboard-accent); transform: translateY(-1px); }
.dashboard-action-list a.is-primary { color: #fff; background: var(--dashboard-accent); border-color: var(--dashboard-accent); }
.dashboard-action-list a.is-primary:hover { color: #fff; filter: brightness(1.08); }
.dashboard-action-list a span { color: inherit; font-size: 1.2rem; }
.dashboard-action-list a b { min-width: 24px; padding: 2px 7px; color: #fff; background: #c44842; border-radius: 999px; font-size: .76rem; text-align: center; }
.dashboard-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dashboard-contact-card { min-width: 0; padding: 15px; background: var(--dashboard-surface-soft); border: 1px solid var(--dashboard-border); border-radius: 14px; }
.dashboard-contact-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dashboard-contact-heading img, .dashboard-avatar-fallback { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; }
.dashboard-contact-heading img { object-fit: cover; border: 1px solid var(--dashboard-border); }
.dashboard-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--dashboard-accent); font-weight: 900; }
.dashboard-contact-heading div { min-width: 0; }
.dashboard-contact-heading strong, .dashboard-contact-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-contact-heading small { margin-top: 2px; color: var(--dashboard-muted); }
.dashboard-contact-card > p { margin: 12px 0; color: var(--dashboard-muted); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-contact-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.dashboard-contact-actions a, .dashboard-contact-actions span { padding: 5px 9px; color: var(--dashboard-accent); background: var(--dashboard-accent-soft); border-radius: 7px; font-size: .8rem; font-weight: 850; text-decoration: none; }
.dashboard-contact-actions a:hover { color: #fff; background: var(--dashboard-accent); }
.dashboard-contact-actions span { color: var(--dashboard-muted); }
.dashboard-empty { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--dashboard-muted); text-align: center; }
.dashboard-empty strong { color: var(--dashboard-text); }

.theme-dark.dashboard-page {
    --dashboard-bg: #151a18;
    --dashboard-surface: rgba(30, 37, 34, .97);
    --dashboard-surface-soft: #242c28;
    --dashboard-border: #3b4842;
    --dashboard-text: #f0f5f2;
    --dashboard-muted: #a7b4ae;
    --dashboard-accent: #65d9bd;
    --dashboard-accent-soft: #173d34;
    --dashboard-shadow: 0 18px 42px rgba(0, 0, 0, .25);
}
.theme-cyberpunk.dashboard-page {
    --dashboard-bg: #050713;
    --dashboard-surface: rgba(10, 15, 31, .95);
    --dashboard-surface-soft: rgba(15, 24, 46, .94);
    --dashboard-border: rgba(33, 246, 255, .48);
    --dashboard-text: #eaffff;
    --dashboard-muted: #9eb7c8;
    --dashboard-accent: #21f6ff;
    --dashboard-accent-soft: rgba(33, 246, 255, .12);
    --dashboard-shadow: 5px 5px 0 rgba(255, 43, 214, .25), 0 0 24px rgba(33, 246, 255, .08);
}
.theme-cyberpunk .dashboard-metric, .theme-cyberpunk .dashboard-panel { border-right-color: rgba(255, 43, 214, .7); border-radius: 2px; }
.theme-cyberpunk .dashboard-action-list a, .theme-cyberpunk .dashboard-contact-card { border-radius: 2px; }
.sidebar-dashboard-link { border-left: 4px solid #19a387; background: #155f55; }
.theme-dark .sidebar-dashboard-link { color: #dffff7; background: #185b50; }
.theme-cyberpunk .sidebar-dashboard-link { color: #050713; background: linear-gradient(100deg, #21f6ff, #8bfbff); border-left-color: #ff2bd6; }

@media (max-width: 1100px) {
    .dashboard-shell { padding: 24px; }
    .dashboard-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .dashboard-shell { padding: 18px; }
    .dashboard-heading { align-items: flex-start; flex-direction: column; }
    .dashboard-metrics, .dashboard-primary-grid, .dashboard-secondary-grid, .dashboard-contact-grid { grid-template-columns: 1fr; }
    .dashboard-metric { min-height: 142px; }
    .dashboard-job-row { grid-template-columns: 1fr auto; }
    .dashboard-job-row > time { grid-column: 1 / -1; }
}

.public-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.public-brand-media {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.public-logo img {
    display: block;
    width: 86px;
    height: 86px;
    object-fit: contain;
    border-radius: 8px;
    background: #111;
}

.public-job-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.public-job-qr img {
    display: block;
    width: 86px;
    height: 86px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #dbe3e6;
}

.quote-page .card form {
    display: grid;
    gap: 16px;
}

.quote-page .header > div:first-child {
    min-width: 0;
}

.quote-page h1 {
    overflow-wrap: anywhere;
}

.quote-title-short {
    display: none;
}

.quote-page-intro span {
    display: inline;
}

.public-job-code-line span {
    display: inline;
}

.quote-equipment-switch {
    justify-content: flex-start;
    gap: 12px;
    margin: 4px 0;
}

.quote-location-grid {
    display: grid;
    grid-template-columns: 8em minmax(0, 1fr);
    gap: 14px;
}

.quote-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quote-type-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #cbd5d9;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-weight: 800;
}

.quote-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quote-type-option.is-selected {
    background: #176b7a;
    border-color: #176b7a;
    color: #fff;
}

.quote-submit-row {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.quote-submit-row button {
    min-width: 180px;
}

.quote-repeat-row {
    display: flex;
    justify-content: center;
    margin: 14px 0 18px;
}

.quote-repeat-row[hidden],
#quoteFormSection[hidden] {
    display: none;
}

.theme-dark .btn.quote-request-nav-alert {
    color: #ff8b8b;
    border-color: #ff6b6b;
}

.theme-dark .quote-calendar-alert {
    color: #ff6b6b;
}

.theme-dark .quote-request-job-card,
.theme-dark .quote-request-day-card,
.theme-dark .quote-request-item {
    background: #3a2424;
    border-color: #7d3b3b;
    color: #f7e8e8;
}

.theme-dark .quote-request-job-card .job-meta,
.theme-dark .quote-request-day-card small {
    color: #deb7b7;
}

.theme-dark .quote-request-job-card:hover,
.theme-dark .quote-request-job-card.active,
.theme-dark .quote-request-day-card:hover,
.theme-dark .quote-request-item:hover {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, .14);
}

.theme-dark .quote-type-option {
    background: #22282c;
    border-color: #3a454b;
    color: #eef2f4;
}

.theme-dark .quote-type-option.is-selected {
    background: #176b7a;
    border-color: #5bb7c8;
    color: #fff;
}

@media (max-width: 900px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        height: auto;
        min-height: 100vh;
        border-right: 0;
    }

    .admin-main {
        display: none;
    }

    .grid-2,
    .grid-3,
    .quote-location-grid,
    .chat-layout,
    .timeline {
        grid-template-columns: 1fr;
    }

    .equipment-create-form {
        grid-template-columns: 1fr;
    }

    .quick-create-form {
        grid-template-columns: 1fr;
    }

    .datetime-parts {
        grid-template-columns: 68px auto 68px minmax(0, 1fr);
    }

    .datetime-parts input[type="date"] {
        grid-column: 1 / -1;
    }

    .quote-selected-equipment-table-scroll .table {
        width: 620px;
        min-width: 620px;
    }

    .timeline-scale {
        margin-left: 0;
    }

    .occupancy-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 8px 0;
    }

    .timeline-legend {
        margin-left: 0;
    }

    .company-delete-confirm-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .container {
        padding: 12px;
    }

    .card {
        padding: 14px 12px;
    }

    .partner-recruit-footer {
        padding: 20px 18px 16px;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    }

    .partner-recruit-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .partner-recruit-kicker {
        letter-spacing: .1em;
    }

    .partner-recruit-mail {
        width: calc(100% - 5px);
    }

    .header {
        display: block;
    }

    .quote-page .header {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .quote-page .header h1 {
        margin-bottom: 0;
    }

    .header .quick-row,
    .public-logo,
    .public-brand-media {
        margin-top: 10px;
    }

    .public-job .public-brand-media {
        align-items: flex-start;
    }

    .public-job .public-logo,
    .public-job .public-job-qr {
        display: inline-flex;
        width: 86px;
        height: 86px;
        align-items: center;
        justify-content: center;
        margin-top: 0;
    }

    .public-job .public-logo img,
    .public-job .public-job-qr img {
        width: 86px;
        height: 86px;
        flex: 0 0 86px;
    }

    .quote-page .public-logo {
        margin-top: 0;
        flex: 0 0 auto;
    }

    .quote-page .public-logo img {
        width: 2.15em;
        height: 2.15em;
        border-radius: 6px;
    }

    .quote-page {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .quote-page .equipment-picker-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .quote-page .quote-equipment-quantity-control {
        width: 100%;
        max-width: 120px;
        min-width: 0;
    }

    .quote-page .quote-equipment-quantity-control select {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    .quote-page .quote-selected-equipment-table-frame {
        width: 100%;
        max-width: calc(100vw - 48px);
        min-width: 0;
    }

    .quote-page .quote-title-full {
        display: none;
    }

    .quote-page .quote-title-short {
        display: inline;
    }

    .msg {
        max-width: 92%;
    }
}

@media (max-width: 430px) {
    .quote-page-intro {
        font-size: .9rem;
    }

    .quote-page-intro span {
        display: block;
    }

    .public-job-code-separator {
        display: none;
    }

    .public-job-code {
        display: block;
    }
}


/* Company-level backend style selector. */
.backend-style-settings form { display: grid; gap: 18px; }
.backend-style-access { padding: 7px 10px; color: #176b7a; border: 1px solid #8ac4ce; border-radius: 6px; font: 800 .7rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.backend-style-company-list { display: grid; gap: 10px; }
.backend-style-company-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 18px; align-items: center; padding: 12px 14px; border: 1px solid #dbe3e6; border-radius: 8px; background: #f8fafb; }
.backend-style-company-row > span, .backend-style-company-row small { display: block; }
.backend-style-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.backend-style-preview { display: grid; gap: 6px; min-height: 118px; padding: 17px; overflow: hidden; border: 1px solid #dbe3e6; border-radius: 8px; }
.backend-style-preview span, .backend-style-preview small { font: 700 .68rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; }
.backend-style-preview strong { align-self: end; font-size: 1.28rem; }
.backend-style-preview.is-original { color: #1f2528; background: #f3f5f6; }
.backend-style-preview.is-cyberpunk { color: #eaffff; background: linear-gradient(135deg, rgba(33,246,255,.15), transparent 44%), linear-gradient(315deg, rgba(255,43,214,.18), transparent 48%), #080b18; border-color: #21f6ff; border-right-color: #ff2bd6; box-shadow: inset 0 0 18px rgba(33,246,255,.08), 0 0 12px rgba(33,246,255,.12); clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 19px 100%, 0 calc(100% - 19px)); text-shadow: -1px 0 rgba(255,43,214,.65), 1px 0 rgba(33,246,255,.65); }
.backend-style-preview.is-cyberpunk span { color: #21f6ff; }
.backend-style-preview.is-cyberpunk small { color: #ff71e5; }

/* Style 1 previews inherit the signed-in user's light/dark preference. */
.theme-dark .backend-style-access { color: #8dd7e4; border-color: #4b8792; }
.theme-dark .backend-style-company-row { color: #eef2f4; background: #22282c; border-color: #3a454b; }
.theme-dark .backend-style-company-row .muted { color: #a8b4ba; }
.theme-dark .backend-style-preview.is-original { color: #eef2f4; background: #22282c; border-color: #3a454b; }
.theme-dark .backend-style-preview.is-original span,
.theme-dark .backend-style-preview.is-original small { color: #a8b4ba; }

/* Style 2: Cyberpunk company backend. */
.theme-cyberpunk { --cyber-cyan: #21f6ff; --cyber-pink: #ff2bd6; --cyber-yellow: #ffe600; --cyber-bg: #050713; --cyber-panel: rgba(10,15,31,.94); color: #eaffff; background-color: var(--cyber-bg); background-image: linear-gradient(rgba(33,246,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(33,246,255,.025) 1px, transparent 1px), radial-gradient(circle at 12% 4%, rgba(33,246,255,.12), transparent 31%), radial-gradient(circle at 92% 92%, rgba(255,43,214,.1), transparent 34%); background-size: 30px 30px, 30px 30px, auto, auto; }
body.theme-cyberpunk::after { content: ""; position: fixed; z-index: 9999; inset: 0; pointer-events: none; opacity: .32; background: repeating-linear-gradient(180deg, transparent 0, transparent 4px, rgba(255,255,255,.025) 5px); }
.theme-cyberpunk ::selection { color: #050713; background: var(--cyber-cyan); }
.theme-cyberpunk a { color: var(--cyber-cyan); text-underline-offset: 3px; }
.theme-cyberpunk h1, .theme-cyberpunk h2, .theme-cyberpunk h3 { color: #f6ffff; letter-spacing: .035em; text-shadow: -1px 0 rgba(255,43,214,.65), 1px 0 rgba(33,246,255,.7); }
.theme-cyberpunk .muted, .theme-cyberpunk .msg small, .theme-cyberpunk .filter-label, .theme-cyberpunk .timeline-legend, .theme-cyberpunk .occupancy-label span { color: #9eb7c8; }
.theme-cyberpunk .admin-sidebar { color: #eaffff; background: linear-gradient(180deg, rgba(33,246,255,.07), transparent 24%), linear-gradient(0deg, rgba(255,43,214,.06), transparent 30%), #080c1b; border-right: 1px solid var(--cyber-cyan); box-shadow: 8px 0 30px rgba(33,246,255,.09); }
.theme-cyberpunk .admin-main, .theme-cyberpunk .admin-main iframe { color-scheme: dark; background: var(--cyber-bg); }
.theme-cyberpunk .card, .theme-cyberpunk .chat-box, .theme-cyberpunk .equipment-card, .theme-cyberpunk .job-card, .theme-cyberpunk .stat, .theme-cyberpunk .business-category-block, .theme-cyberpunk .client-card, .theme-cyberpunk .timeline-step, .theme-cyberpunk .presence-badge, .theme-cyberpunk label.equipment-picker-card, .theme-cyberpunk label.staff-picker-card { color: #eaffff; background: var(--cyber-panel); border-color: rgba(33,246,255,.48); border-right-color: rgba(255,43,214,.5); box-shadow: inset 0 0 18px rgba(33,246,255,.035), 0 8px 26px rgba(0,0,0,.25); }
.theme-cyberpunk .card { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); }
.theme-cyberpunk input, .theme-cyberpunk select, .theme-cyberpunk textarea { color: #efffff; background: rgba(4,9,24,.92); border-color: rgba(33,246,255,.52); border-radius: 2px; box-shadow: inset 3px 0 0 rgba(255,43,214,.34); }
.theme-cyberpunk input:focus, .theme-cyberpunk select:focus, .theme-cyberpunk textarea:focus { border-color: var(--cyber-cyan); outline: 1px solid var(--cyber-cyan); outline-offset: 2px; box-shadow: inset 3px 0 0 var(--cyber-pink), 0 0 13px rgba(33,246,255,.25); }
.theme-cyberpunk button, .theme-cyberpunk .btn { color: #050713; background: linear-gradient(100deg, var(--cyber-cyan), #8bfbff); border: 1px solid #caffff; border-radius: 2px; box-shadow: 3px 3px 0 var(--cyber-pink), 0 0 12px rgba(33,246,255,.18); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.theme-cyberpunk button:hover, .theme-cyberpunk .btn:hover { filter: brightness(1.12); transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--cyber-pink), 0 0 18px rgba(33,246,255,.32); }
.theme-cyberpunk .btn-secondary, .theme-cyberpunk button.btn-secondary { color: var(--cyber-cyan); background: #11162a; border-color: rgba(33,246,255,.75); box-shadow: 3px 3px 0 rgba(255,43,214,.68); }
.theme-cyberpunk .btn-danger, .theme-cyberpunk button.btn-danger { color: #fff; background: linear-gradient(100deg, #e3006f, var(--cyber-pink)); border-color: #ff8fea; box-shadow: 3px 3px 0 var(--cyber-cyan); }
.theme-cyberpunk .btn-warning, .theme-cyberpunk button.btn-warning { color: #111; background: var(--cyber-yellow); border-color: #fff59b; }
.theme-cyberpunk .notice, .theme-cyberpunk .managed-company-actions { color: #fff8c8; background: rgba(44,38,7,.86); border-color: rgba(255,230,0,.62); border-radius: 2px; box-shadow: inset 3px 0 0 var(--cyber-yellow); }
.theme-cyberpunk .notice-error { color: #ffe5f8; background: rgba(68,5,45,.86); border-color: var(--cyber-pink); box-shadow: inset 3px 0 0 var(--cyber-pink); }
.theme-cyberpunk .table th, .theme-cyberpunk .table td { border-bottom-color: rgba(33,246,255,.18); }
.theme-cyberpunk .table th { color: var(--cyber-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.theme-cyberpunk .quote-selected-equipment-table-frame { --theme-surface-border: rgba(33,246,255,.48); }
.theme-cyberpunk .mini-calendar, .theme-cyberpunk .mini-calendar tbody, .theme-cyberpunk .mini-calendar tr, .theme-cyberpunk .mini-calendar th, .theme-cyberpunk .mini-calendar td { color: #dffcff; background: #090e20; border-color: rgba(33,246,255,.16); }
.theme-cyberpunk .mini-calendar button { color: inherit; background: transparent; border: 1px solid transparent; box-shadow: none; clip-path: none; }
.theme-cyberpunk .mini-calendar button:hover, .theme-cyberpunk .mini-calendar .is-selected button { color: #fff; background: rgba(33,246,255,.12); border-color: var(--cyber-cyan); box-shadow: inset 0 0 12px rgba(33,246,255,.14), 0 0 8px rgba(33,246,255,.16); }
.theme-cyberpunk .mini-calendar .is-today button { border-color: var(--cyber-pink); }
.theme-cyberpunk .mini-calendar em, .theme-cyberpunk .qty, .theme-cyberpunk .company-status-badge { color: #050713; background: var(--cyber-cyan); }
.theme-cyberpunk .job-card:hover, .theme-cyberpunk .job-card.active, .theme-cyberpunk .quote-request-job-card:hover, .theme-cyberpunk .quote-request-job-card.active, .theme-cyberpunk .quote-request-day-card:hover, .theme-cyberpunk .quote-request-item:hover, .theme-cyberpunk .equipment-picker-card:hover, .theme-cyberpunk .equipment-picker-card.is-selected, .theme-cyberpunk .staff-picker-card:hover, .theme-cyberpunk .staff-picker-card.is-selected, .theme-cyberpunk .timeline-step.is-active { color: #fff; background: rgba(16,54,70,.9); border-color: var(--cyber-cyan); box-shadow: inset 3px 0 0 var(--cyber-pink), 0 0 15px rgba(33,246,255,.12); }
.theme-cyberpunk .msg.client { color: #dffcff; background: rgba(8,58,76,.86); border: 1px solid rgba(33,246,255,.28); }
.theme-cyberpunk .msg.staff { color: #ffe9fa; background: rgba(73,9,59,.84); border: 1px solid rgba(255,43,214,.28); }
.theme-cyberpunk .msg.system { color: #fffbdc; background: rgba(54,49,10,.82); }
.theme-cyberpunk .backend-style-access { color: var(--cyber-cyan); border-color: var(--cyber-cyan); border-radius: 2px; box-shadow: 2px 2px 0 var(--cyber-pink); }
.theme-cyberpunk .backend-style-company-row { color: #eaffff; background: rgba(8,13,29,.9); border-color: rgba(33,246,255,.38); border-radius: 2px; }
.theme-cyberpunk .backend-style-preview.is-original { color: #dfe7eb; background: #20272b; border-color: #46545b; }
.theme-cyberpunk * { scrollbar-color: rgba(33,246,255,.7) #080c1b; }
@media (max-width: 700px) { .backend-style-company-row, .backend-style-preview-grid { grid-template-columns: 1fr; } .theme-cyberpunk .card { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); } }


/* Equipment image surfaces follow the active light or dark theme. */
.theme-dark .equipment-picker-image,
.theme-dark .equipment-image-preview,
.theme-cyberpunk .equipment-picker-image,
.theme-cyberpunk .equipment-image-preview {
    background: #000;
}

.theme-dark .equipment-picker-image,
.theme-dark .equipment-image-preview {
    border-color: #3a454b;
    color: #a8b4ba;
}

.theme-cyberpunk .equipment-picker-image,
.theme-cyberpunk .equipment-image-preview {
    border-color: rgba(33, 246, 255, .48);
    color: #9eb7c8;
}


.job-attachment-heading { margin-bottom: 14px; }
.job-attachment-heading h2 { margin-bottom: 4px; }
.job-attachment-heading p { margin: 0; }
.job-attachment-form { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(120,120,120,.22); border-radius: 12px; background: rgba(120,120,120,.05); }
.job-attachment-form textarea { width: 100%; min-height: 104px; resize: vertical; }
.job-attachment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.job-attachment-actions button { margin-left: auto; }
.job-attachment-list { display: grid; gap: 12px; margin-top: 16px; }
.job-attachment-item { padding: 15px; border: 1px solid rgba(120,120,120,.22); border-radius: 12px; background: var(--card, #fff); }
.job-attachment-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.job-attachment-note { margin-bottom: 11px; overflow-wrap: anywhere; line-height: 1.7; }
.job-attachment-image { display: inline-grid; gap: 7px; max-width: min(100%, 340px); color: inherit; text-decoration: none; }
.job-attachment-image img { display: block; width: 100%; max-height: 220px; object-fit: contain; border: 1px solid rgba(120,120,120,.22); border-radius: 10px; background: #f5f5f5; }
.job-attachment-image span, .job-attachment-file span:last-child { overflow-wrap: anywhere; font-size: .9rem; }
.job-attachment-file { display: inline-flex; max-width: 100%; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(120,120,120,.24); border-radius: 10px; color: inherit; background: rgba(120,120,120,.06); text-decoration: none; }
.job-attachment-file:hover, .job-attachment-image:hover span { color: var(--accent, #176b7a); }
.job-attachment-empty { margin: 16px 0 0; }
.theme-dark .job-attachment-form, .theme-dark .job-attachment-item, .theme-dark .job-attachment-file { border-color: #3a454b; background: #22282c; }
.theme-dark .job-attachment-image img { border-color: #3a454b; background: #15191c; }
@media (max-width: 640px) {
    .job-attachment-actions { align-items: stretch; }
    .job-attachment-actions button { width: 100%; margin-left: 0; }
}

/* Nature styles: shared, opaque work surfaces and small local SVG scenery. */
.theme-dawn {
    --nature-bg: #edf3f6; --nature-surface: #f9fbfc; --nature-soft: #e5eef3;
    --nature-text: #293e4c; --nature-muted: #526b7b; --nature-border: #c4d5df;
    --nature-accent: #32677f; --nature-button-text: #fff; --nature-warm: #f1dab8;
    --nature-scene: url('assets/themes/dawn.svg');
}
.theme-dawn.theme-dark {
    --nature-bg: #263540; --nature-surface: #303f4a; --nature-soft: #384c59;
    --nature-text: #e6edf2; --nature-muted: #b5c6d2; --nature-border: #536b7a;
    --nature-accent: #a0cfe2; --nature-button-text: #203440; --nature-warm: #655647;
}
.theme-sunset {
    --nature-bg: #f3ede7; --nature-surface: #fcf8f3; --nature-soft: #efe2d5;
    --nature-text: #493a32; --nature-muted: #786051; --nature-border: #d8c6b6;
    --nature-accent: #855637; --nature-button-text: #fff; --nature-warm: #eacaaa;
    --nature-scene: url('assets/themes/sunset.svg');
}
.theme-sunset.theme-dark {
    --nature-bg: #38302c; --nature-surface: #433a34; --nature-soft: #504239;
    --nature-text: #f1e8dd; --nature-muted: #cdbcaa; --nature-border: #796352;
    --nature-accent: #e4b88c; --nature-button-text: #382c23; --nature-warm: #6b4c3c;
}
.theme-mountain {
    --nature-bg: #eaf0eb; --nature-surface: #f7faf6; --nature-soft: #dfe9e1;
    --nature-text: #2c4037; --nature-muted: #546e60; --nature-border: #bdcfc2;
    --nature-accent: #38684e; --nature-button-text: #fff; --nature-warm: #d4dec9;
    --nature-scene: url('assets/themes/mountain.svg');
}
.theme-mountain.theme-dark {
    --nature-bg: #28362f; --nature-surface: #324239; --nature-soft: #3d5044;
    --nature-text: #e5ede5; --nature-muted: #b7cbbd; --nature-border: #587261;
    --nature-accent: #a4ceb1; --nature-button-text: #26392c; --nature-warm: #495843;
}
.theme-coast {
    --nature-bg: #f2f1e8; --nature-surface: #fbfaf5; --nature-soft: #e3efea;
    --nature-text: #304442; --nature-muted: #526e6b; --nature-border: #c3d4cc;
    --nature-accent: #326e70; --nature-button-text: #fff; --nature-warm: #ecdfbd;
    --nature-scene: url('assets/themes/coast.svg');
}
.theme-coast.theme-dark {
    --nature-bg: #2a3a3b; --nature-surface: #334648; --nature-soft: #405657;
    --nature-text: #e7eeea; --nature-muted: #b8cdca; --nature-border: #587778;
    --nature-accent: #a5d5cf; --nature-button-text: #253a39; --nature-warm: #605d49;
}
body.theme-nature {
    position: relative; isolation: isolate; min-height: 100vh; color-scheme: light;
    color: var(--nature-text); background-color: var(--nature-bg);
    background-image: radial-gradient(ellipse at 95% 0%, var(--nature-warm), transparent 46%), linear-gradient(155deg, var(--nature-soft), transparent 58%);
    --theme-surface-border: var(--nature-border);
    --dashboard-bg: var(--nature-bg); --dashboard-surface: var(--nature-surface);
    --dashboard-surface-soft: var(--nature-soft); --dashboard-border: var(--nature-border);
    --dashboard-text: var(--nature-text); --dashboard-muted: var(--nature-muted);
    --dashboard-accent: var(--nature-accent); --dashboard-accent-soft: var(--nature-soft);
    --dashboard-shadow: 0 8px 24px rgba(30, 45, 38, .06);
}
body.theme-nature.theme-dark { color-scheme: dark; }
body.theme-nature::before, body.theme-nature::after {
    content: ''; position: fixed; right: 0; bottom: 0; width: min(560px, 80vw); aspect-ratio: 600 / 320;
    z-index: -1; pointer-events: none; background: var(--nature-scene) right bottom / contain no-repeat; opacity: .32;
}
body.theme-nature.theme-dark::before { opacity: .16; }
body.theme-nature::after {
    background: radial-gradient(ellipse at 70% 48%, var(--nature-warm), transparent 55%);
    opacity: .12; animation: nature-morning 24s ease-in-out infinite alternate;
}
body.theme-sunset::after { background-image: url('assets/themes/steam.svg'); opacity: .3; animation: nature-steam 12s ease-in-out infinite; }
body.theme-mountain::after { background: radial-gradient(ellipse at 60% 65%, #b4c5be, transparent 65%); animation: nature-mist 32s ease-in-out infinite alternate; }
body.theme-coast::after { background: radial-gradient(ellipse at 60% 75%, #d8efea, transparent 60%); animation: nature-tide 18s ease-in-out infinite alternate; }
@keyframes nature-morning { to { opacity: .23; transform: translateY(-5px); } }
@keyframes nature-steam { 0%, 100% { opacity: .08; transform: translateY(2px); } 50% { opacity: .3; transform: translateY(-7px); } }
@keyframes nature-mist { to { opacity: .25; transform: translateX(-12px); } }
@keyframes nature-tide { to { opacity: .26; transform: translate(-8px, 3px); } }
.theme-nature a { color: var(--nature-accent); }
.theme-nature :is(.card, .admin-sidebar, .chat-box, .equipment-card, .job-card, .stat, .business-category-block, .client-card, .timeline-step, .presence-badge, .equipment-picker-card, .staff-picker-card, .backend-style-company-row, .quote-type-option, .quote-request-item, .quote-request-day-card, .quote-request-job-card, .job-attachment-item, .job-attachment-form) {
    color: var(--nature-text); background: var(--nature-surface); border-color: var(--nature-border);
}
.theme-nature .admin-sidebar {
    background: linear-gradient(180deg, var(--nature-surface) 45%, color-mix(in srgb, var(--nature-surface) 85%, transparent)), var(--nature-scene) left bottom / 100% auto no-repeat, var(--nature-bg);
}
.theme-nature .admin-main, .theme-nature .admin-main iframe { background: var(--nature-bg); color-scheme: light; }
.theme-nature.theme-dark .admin-main, .theme-nature.theme-dark .admin-main iframe { color-scheme: dark; }
.theme-nature :is(input, select, textarea) { color: var(--nature-text); background: var(--nature-surface); border-color: var(--nature-border); accent-color: var(--nature-accent); }
.theme-nature :is(input, select, textarea, button, a):focus-visible { outline: 2px solid var(--nature-accent); outline-offset: 3px; }
.theme-nature :is(.muted, .msg small, .filter-label, .timeline-legend, .occupancy-label span, .equipment-picker-meta, .staff-picker-card small, .backend-style-company-row .muted) { color: var(--nature-muted); }
.theme-nature :is(button, .btn) { color: var(--nature-button-text); background: var(--nature-accent); }
.theme-nature :is(.btn-secondary, .tag-filter-btn, .emoji-btn, .icon-save-btn, .icon-delete-btn, .equipment-collapse-btn) { color: var(--nature-accent); background: var(--nature-soft); border-color: var(--nature-border); }
.theme-nature :is(.btn-danger, button.btn-danger) { color: #fff; background: #a33e3e; }
.theme-nature :is(.btn-warning, button.btn-warning) { color: #49360f; background: #edcf89; }
.theme-nature .sidebar-dashboard-link { color: var(--nature-button-text); background: var(--nature-accent); border-color: var(--nature-border); }
.theme-nature :is(.job-card:hover, .job-card.active, .quote-request-job-card:hover, .quote-request-job-card.active, .quote-request-day-card:hover, .quote-request-item:hover, .equipment-picker-card:hover, .equipment-picker-card.is-selected, .staff-picker-card:hover, .staff-picker-card.is-selected, .timeline-step.is-active, .quote-type-option.is-selected, .tag-filter-btn.is-active) { color: var(--nature-text); background: var(--nature-soft); border-color: var(--nature-accent); }
.theme-nature :is(.equipment-picker-main, .staff-picker-card strong) { color: var(--nature-text); }
.theme-nature :is(.table th, .table td, .person-row) { border-color: var(--nature-border); }
.theme-nature :is(.mini-calendar, .mini-calendar tbody, .mini-calendar tr, .mini-calendar th, .mini-calendar td) { color: var(--nature-text); background: var(--nature-surface); border-color: var(--nature-border); }
.theme-nature .mini-calendar button { color: var(--nature-text); background: transparent; }
.theme-nature .mini-calendar button:hover { color: var(--nature-text); background: var(--nature-soft); }
.theme-nature .mini-calendar .is-today button { border-color: var(--nature-accent); }
.theme-nature .mini-calendar .is-selected button { color: var(--nature-button-text); background: var(--nature-accent); border-color: var(--nature-accent); }
.theme-nature :is(.client-card-preview, .payment-method-card, .equipment-picker-image, .equipment-image-preview, .job-attachment-file) { color: var(--nature-text); background: var(--nature-soft); border-color: var(--nature-border); }
.theme-nature :is(.msg.client, .msg.staff) { color: var(--nature-text); background: var(--nature-soft); border: 1px solid var(--nature-border); }
.theme-nature .msg.staff { border-left: 3px solid var(--nature-accent); }
body.theme-nature .saas-message { color: var(--nature-text); background: var(--nature-surface); border-color: var(--nature-border); }
body.theme-nature .saas-message.staff { color: var(--nature-text); background: var(--nature-soft); border-color: var(--nature-accent); }
body.theme-nature .saas-message small { color: var(--nature-muted); }
.backend-style-nature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.backend-style-preview-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.backend-style-preview-controls button[aria-pressed='false'] { color: inherit; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.nature-preview {
    min-height: 238px; color: var(--nature-text); border-color: var(--nature-border);
    background: var(--nature-scene) right bottom / auto 100% no-repeat, linear-gradient(140deg, var(--nature-bg) 25%, var(--nature-warm));
}
.nature-preview > :is(span, small) { color: var(--nature-text); font-family: inherit; font-size: .82rem; font-weight: 500; line-height: 1.6; letter-spacing: .02em; }
.nature-preview > strong { align-self: start; color: var(--nature-text); text-shadow: none; }
.nature-preview > small { max-width: 72%; }
.nature-preview-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; align-self: end; padding: 12px; margin-top: 24px; border: 1px solid var(--nature-border); border-radius: 8px; color: var(--nature-text); background: var(--nature-surface); }
.nature-preview-panel span { font: inherit; font-size: .8rem; letter-spacing: 0; }
.nature-preview-panel .nature-preview-action { border-radius: 5px; padding: 6px 10px; color: var(--nature-button-text); background: var(--nature-accent); }
@media (max-width: 700px) { .backend-style-nature-grid { grid-template-columns: 1fr; } body.theme-nature::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { body.theme-nature::after { animation: none; } }
@media print { body.theme-nature::before, body.theme-nature::after { display: none; } }

.theme-nature label.equipment-picker-card, .theme-nature label.staff-picker-card { color: var(--nature-text); background: var(--nature-surface); border-color: var(--nature-border); }
.theme-nature label.equipment-picker-card:is(:hover, .is-selected), .theme-nature label.staff-picker-card:is(:hover, .is-selected) { color: var(--nature-text); background: var(--nature-soft); border-color: var(--nature-accent); }
/* Keep preview captions legible over the illustrated sky in dark mode. */
.nature-preview.theme-dark {
    background: linear-gradient(color-mix(in srgb, var(--nature-bg) 75%, transparent), color-mix(in srgb, var(--nature-bg) 75%, transparent)), var(--nature-scene) right bottom / auto 100% no-repeat, linear-gradient(140deg, var(--nature-bg) 25%, var(--nature-warm));
}

/* Nature button feedback: local CSS only; keep action/status colors intact. */
.theme-dawn { --nature-hover-glow: #a7cddd; --nature-hover-rim: #deb980; }
.theme-sunset { --nature-hover-glow: #c9a17e; --nature-hover-rim: #d8ab80; }
.theme-mountain { --nature-hover-glow: #8eac98; --nature-hover-rim: #a3baa1; }
.theme-coast { --nature-hover-glow: #9ecbc6; --nature-hover-rim: #dbcb9e; }
body.theme-nature {
    --nature-hover-shadow: 0 3px 9px color-mix(in srgb, var(--nature-hover-glow) 30%, transparent),
        0 0 0 1px color-mix(in srgb, var(--nature-hover-rim) 65%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}
body.theme-nature.theme-dark {
    --nature-hover-shadow: 0 3px 10px rgba(0, 0, 0, .18),
        0 0 0 1px color-mix(in srgb, var(--nature-hover-rim) 75%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}
body.theme-nature :is(button, .btn, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .file-picker-btn, .dashboard-action-list a, .dashboard-contact-actions a):not(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled, :has(input:disabled)) {
    transition: box-shadow .18s ease, translate .18s ease, background-color .18s ease, border-color .18s ease;
}
body.theme-nature :is(button, .btn, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .file-picker-btn, .dashboard-action-list a, .dashboard-contact-actions a):not(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled, :has(input:disabled)):focus-visible {
    box-shadow: var(--nature-hover-shadow);
    outline: 2px solid var(--nature-accent);
    outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
    body.theme-nature :is(button, .btn, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .file-picker-btn, .dashboard-action-list a, .dashboard-contact-actions a):not(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled, :has(input:disabled)):hover {
        box-shadow: var(--nature-hover-shadow);
        translate: 0 -1px;
    }
}
body.theme-nature :is(button, .btn, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .file-picker-btn, .dashboard-action-list a, .dashboard-contact-actions a):not(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled, :has(input:disabled)):active {
    translate: 0 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16), 0 0 0 1px var(--nature-hover-rim);
}
/* Dashboard actions use the same motion and readable primary colors. */
body.theme-nature .dashboard-action-list a:hover { transform: none; }
body.theme-nature .dashboard-action-list a.is-primary,
body.theme-nature .dashboard-action-list a.is-primary:hover {
    color: var(--nature-button-text);
    filter: none;
}
@media (prefers-reduced-motion: reduce) {
    body.theme-nature :is(button, .btn, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .file-picker-btn, .dashboard-action-list a, .dashboard-contact-actions a):not(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled, :has(input:disabled)),
    body.theme-nature :is(button, .btn, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .file-picker-btn, .dashboard-action-list a, .dashboard-contact-actions a):not(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled, :has(input:disabled)):hover,
    body.theme-nature :is(button, .btn, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .file-picker-btn, .dashboard-action-list a, .dashboard-contact-actions a):not(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled, :has(input:disabled)):active {
        transition: none;
        translate: none;
    }
}
body.theme-nature .dashboard-contact-actions a:hover { color: var(--nature-button-text); }

/* Company-wide style controls live inside the personal appearance card. */
.appearance-company-style { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--theme-surface-border, #cbd5d9); }
#appearance .setting-switch { position: relative; }
#appearance .setting-switch input { width: 1px; height: 1px; padding: 0; margin: 0; border: 0; }
#appearance .setting-switch input:focus-visible + .setting-switch-track { outline: 2px solid currentColor; outline-offset: 3px; }