:root {
    --header: #203944;
    --sidebar: #101827;
    --sidebar-soft: #1a2536;
    --sidebar-active: #5f9bb8;
    --page: #f6f8fb;
    --panel: #ffffff;
    --line: #e5e9ef;
    --text: #303946;
    --muted: #677483;
    --blue: #5d93b2;
    --cyan: #17a8bd;
    --green: #34a853;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

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

.app {
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr);
    grid-template-rows: 42px minmax(0, 1fr);
    min-height: 100vh;
}

.app-header {
    align-items: center;
    background: var(--header);
    color: #ffffff;
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 12px;
}

.header-left,
.header-actions,
.module-nav,
.page-actions,
.search-tools,
.view-icons {
    align-items: center;
    display: flex;
}

.header-left {
    gap: 14px;
}

.app-switcher {
    font-size: 21px;
    line-height: 1;
}

.module-name {
    font-size: 17px;
    font-weight: 700;
}

.module-nav {
    gap: 16px;
    font-size: 14px;
}

.module-nav a {
    color: #f3f7fb;
}

.accounting-top-nav {
    gap: 4px;
}

.top-nav-menu {
    position: relative;
}

.top-nav-menu > button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #f3f7fb;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 6px;
    min-height: 42px;
    padding: 0 12px;
}

.top-nav-menu > button::after {
    content: "v";
    font-size: 10px;
    opacity: 0.75;
}

.top-nav-menu > button:hover,
.top-nav-menu.open > button {
    background: rgba(255, 255, 255, 0.08);
}

.top-nav-menu > div {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    display: none;
    min-width: 220px;
    padding: 8px;
    position: absolute;
    left: 0;
    top: calc(100% + 2px);
    z-index: 150;
}

.top-nav-menu.open > div {
    display: grid;
}

.top-nav-menu:last-child > div {
    left: auto;
    right: 0;
}

.top-nav-menu > div a {
    border-radius: 5px;
    color: var(--text);
    padding: 10px 12px;
}

.top-nav-menu > div a:hover,
.top-nav-menu > div a:focus-visible {
    background: #e5f2f7;
    color: #175f7c;
    outline: none;
}

.header-actions {
    gap: 14px;
}

.datetime-widget {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #eef7fb;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 7px;
    min-height: 28px;
    padding: 0 8px;
    white-space: nowrap;
}

.datetime-time {
    color: #ffffff;
}

.header-icon {
    background: #eef5f9;
    border-radius: 999px;
    color: #4d7f9a;
    display: inline-grid;
    font-size: 10px;
    height: 20px;
    place-items: center;
    width: 20px;
}

.reminder-button {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: transform 0.15s ease, background 0.15s ease;
    width: 24px;
}

.reminder-button:hover {
    background: transparent;
    transform: translateY(-1px);
}

.reminder-bell {
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
    height: 17px;
    position: relative;
    width: 17px;
}

.reminder-bell::before,
.reminder-bell::after {
    background: #ffffff;
    content: "";
    position: absolute;
}

.reminder-bell::before {
    height: 5px;
    left: 6px;
    top: 2px;
    transform-origin: bottom center;
    transform: rotate(0deg);
    width: 2px;
}

.reminder-bell::after {
    height: 2px;
    left: 6px;
    top: 6px;
    transform-origin: left center;
    transform: rotate(45deg);
    width: 6px;
}

.reminder-button::before,
.reminder-button::after {
    background: #ffffff;
    border-radius: 2px;
    content: "";
    height: 5px;
    position: absolute;
    top: 2px;
    width: 2px;
}

.reminder-button::before {
    left: 5px;
    transform: rotate(-35deg);
}

.reminder-button::after {
    right: 5px;
    transform: rotate(35deg);
}

.reminder-badge {
    background: #f04438;
    border: 2px solid var(--header);
    border-radius: 999px;
    color: #ffffff;
    display: none;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    padding: 1px 5px;
    position: absolute;
    right: -6px;
    top: -6px;
}

.reminder-button.has-reminders .reminder-badge {
    display: inline-block;
}

.header-reminders {
    position: relative;
}

.header-reminder-dropdown {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
    display: none;
    min-width: 380px;
    overflow: hidden;
    position: absolute;
    right: -20px;
    top: 36px;
    z-index: 90;
}

.header-reminder-dropdown.open {
    display: block;
}

.header-reminder-row {
    align-items: center;
    color: var(--text);
    display: grid;
    gap: 14px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    padding: 14px 16px;
    text-decoration: none;
}

.header-reminder-row + .header-reminder-row {
    border-top: 1px solid #e6edf2;
}

.header-reminder-row:hover {
    background: #f4f8fb;
}

.header-reminder-row strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.header-reminder-row small {
    color: #667085;
    display: block;
    font-size: 14px;
    margin-top: 4px;
}

.header-reminder-row b {
    color: #477d9c;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.header-reminder-row.compact {
    grid-template-columns: 52px minmax(0, 1fr);
}

.header-reminder-icon {
    background: linear-gradient(90deg, #9b3f8f 0 33%, #f26464 33% 66%, #ffb743 66% 100%);
    border-radius: 2px;
    display: block;
    height: 36px;
    width: 44px;
}

.header-reminder-icon.muted {
    background: linear-gradient(90deg, #2ab7ca 0 33%, #57c785 33% 66%, #ffb743 66% 100%);
}

.avatar {
    background: #ffac1b;
    border: 0;
    border-radius: 6px;
    color: #111827;
    cursor: pointer;
    display: inline-grid;
    font-size: 18px;
    font-weight: 700;
    height: 28px;
    padding: 0;
    place-items: center;
    width: 28px;
    overflow: hidden;
}

.avatar img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.profile-menu {
    position: relative;
}

.profile-dropdown {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    color: var(--text);
    display: none;
    min-width: 220px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 20;
}

.profile-dropdown.open {
    display: block;
}

.profile-summary {
    background: #f5f8fb;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 4px;
    padding: 12px 14px;
}

.profile-summary strong {
    color: #172033;
    font-size: 14px;
}

.profile-summary span {
    color: var(--muted);
    font-size: 12px;
}

.profile-dropdown a {
    color: #26323f;
    display: block;
    font-size: 14px;
    padding: 11px 14px;
}

.profile-dropdown a:hover {
    background: #eef4f8;
}

.sidebar {
    background: var(--sidebar);
    color: #d9e3ea;
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow: auto;
    padding: 12px 0 20px;
}

.nav {
    display: grid;
}

.nav a {
    align-items: center;
    color: #d9e3ea;
    display: flex;
    font-size: 13px;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
}

.nav a:hover {
    background: var(--sidebar-soft);
}

.nav a.active {
    background: var(--sidebar-active);
    color: #ffffff;
}

.nav-icon {
    border-radius: 5px;
    display: inline-block;
    flex: 0 0 auto;
    height: 22px;
    position: relative;
    width: 22px;
}

.nav-icon.discuss {
    background: linear-gradient(135deg, #ff7a1a 0 55%, #ffbd35 56%);
    border-radius: 50% 50% 50% 8px;
}

.nav-icon.todo {
    border-bottom: 4px solid #0ea5c6;
    border-left: 4px solid #0ea5c6;
    border-radius: 2px;
    transform: skew(-15deg);
}

.nav-icon.contacts {
    background: #22b8a7;
}

.nav-icon.contacts::after {
    background: #ffffff;
    border-radius: 50%;
    content: "";
    height: 7px;
    left: 9px;
    position: absolute;
    top: 5px;
    width: 7px;
}

.nav-icon.sales {
    background: linear-gradient(90deg, #d9487f 0 30%, #ff8f2a 31% 60%, #40b9e8 61%);
}

.nav-icon.dashboard {
    background: conic-gradient(#28a8e0 0 25%, #31c48d 0 50%, #f04438 0 75%, #8b5cf6 0);
}

.nav-icon.pos {
    background: linear-gradient(90deg, #f97316 0 30%, #facc15 31% 65%, #8b5cf6 66%);
}

.nav-icon.accounting {
    background: #1da1f2;
}

.nav-icon.accounting::after {
    color: #ffffff;
    content: "$";
    font-size: 16px;
    font-weight: 700;
    left: 8px;
    position: absolute;
    top: 2px;
}

.nav-icon.project {
    background: linear-gradient(135deg, #a855f7 0 35%, #14b8a6 36%);
    transform: rotate(-10deg);
}

.nav-icon.purchase {
    background: linear-gradient(#ffb020 0 45%, #7c3aed 46%);
}

.nav-icon.inventory {
    background: linear-gradient(135deg, #fb7185 0 50%, #38bdf8 51%);
    clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
}

.nav-icon.settings {
    background: conic-gradient(#f97316, #ef4444, #14b8a6, #f97316);
    border-radius: 50%;
}

.nav-icon.reminders {
    background: linear-gradient(135deg, #f59e0b 0 45%, #ef4444 46% 70%, #8b5cf6 71%);
    border-radius: 50%;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.nav-icon.reminders::before {
    background: #ffffff;
    border: 2px solid #203944;
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 5px;
    position: absolute;
    top: 7px;
    width: 12px;
}

.nav-icon.reminders::after {
    background: #203944;
    box-shadow:
        4px 4px 0 -1px #203944,
        -6px -7px 0 0 #ffffff,
        6px -7px 0 0 #ffffff;
    content: "";
    height: 5px;
    left: 11px;
    position: absolute;
    top: 10px;
    width: 2px;
}

.main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

.topbar {
    align-items: center;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    min-height: 58px;
    padding: 8px 14px;
}

.page-actions {
    gap: 10px;
    min-width: max-content;
}

.page-actions strong {
    font-size: 17px;
    font-weight: 500;
}

.gear {
    background: transparent;
    border: 0;
    color: #435061;
    cursor: pointer;
    font-size: 16px;
    height: 28px;
    padding: 0;
    width: 28px;
}

.settings-menu {
    position: relative;
}

.settings-dropdown {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    display: none;
    min-width: 190px;
    overflow: hidden;
    position: absolute;
    top: 34px;
    left: 0;
    z-index: 25;
}

.settings-dropdown.open {
    display: block;
}

.settings-dropdown button {
    background: transparent;
    border: 0;
    color: #26323f;
    cursor: pointer;
    display: block;
    font-size: 13px;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.settings-dropdown button:hover {
    background: #eef4f8;
}

.document-choice-label {
    color: #477d9c;
    font-size: 14px;
    font-weight: 600;
    padding-left: 2px;
}

.search-tools {
    gap: 12px;
    min-width: 0;
}

.sales-search-form {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.search-box {
    align-items: center;
    border: 1px solid #8fb7ce;
    border-radius: 6px;
    display: flex;
    gap: 8px;
    height: 38px;
    min-width: 320px;
    padding: 0 12px;
}

.search-box input {
    border: 0;
    flex: 1;
    font-size: 14px;
    min-width: 120px;
    outline: 0;
}

.sales-search-button {
    background: #5f9bb8;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    height: 38px;
    padding: 0 18px;
}

.sales-search-button:hover {
    background: #4c88a5;
}

.filter-chip {
    background: #e9eff4;
    border-radius: 6px;
    color: #5d6875;
    padding: 6px 10px;
}

.view-icons {
    gap: 1px;
}

.view-icons span,
.view-icons a {
    background: #e3e9ef;
    color: #26343d;
    display: inline-grid;
    font-size: 18px;
    height: 38px;
    place-items: center;
    width: 36px;
}

.view-icons span:first-child,
.view-icons a:first-child {
    border-radius: 6px 0 0 6px;
}

.view-icons span:last-child,
.view-icons a:last-child {
    border-radius: 0 6px 6px 0;
}

.view-icons .section-navigation-arrow {
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.view-icons .section-navigation-arrow:hover,
.view-icons .section-navigation-arrow:focus-visible {
    background: #cbdce7;
    color: #176d91;
    outline: 2px solid #8fb7ce;
    outline-offset: -2px;
}

.view-icons .section-navigation-arrow.disabled {
    cursor: default;
    opacity: 0.45;
}

.view-icons .selected {
    background: #d6e6f0;
    border: 1px solid #8fb7ce;
}

.content {
    padding: 10px 14px 24px;
}

.page-title {
    font-size: 20px;
    margin: 0 0 14px;
}

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

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

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 14px;
}

.stat-label {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
}

.toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.button {
    background: var(--blue);
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 12px;
}

.button:hover {
    background: #477d9c;
}

.button.secondary {
    background: #667085;
}

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

.table th,
.table td {
    border-bottom: 1px solid var(--line);
    padding: 10px 13px;
    text-align: left;
    vertical-align: middle;
}

.table th {
    color: #2f3945;
    font-size: 14px;
    font-weight: 700;
}

.table td {
    color: #5a6470;
    font-size: 14px;
}

.table tbody tr:hover {
    background: #f9fbfd;
}

.table td:first-child {
    color: #44505c;
    font-weight: 700;
}

.sales-list {
    background: #ffffff;
    border-top: 1px solid var(--line);
    margin: -10px -14px 0;
    overflow-x: hidden;
}

.sales-table {
    table-layout: fixed;
    width: 100%;
}

.sales-table th,
.sales-table td {
    height: 50px;
    padding: 0 12px;
}

.sales-table th {
    background: #f3f5f7;
    color: #252b33;
    font-size: 14px;
    white-space: nowrap;
}

.sales-table td {
    background: #ffffff;
    color: #56616d;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-table tbody tr:hover td {
    background: #eef4f8;
}

.clickable-row {
    cursor: pointer;
}

.sales-table th:nth-child(1),
.sales-table td:nth-child(1) {
    width: 3%;
}

.sales-table th:nth-child(2),
.sales-table td:nth-child(2) {
    width: 15%;
}

.sales-table th:nth-child(3),
.sales-table td:nth-child(3) {
    width: 13%;
}

.sales-table th:nth-child(4),
.sales-table td:nth-child(4) {
    width: 18%;
}

.sales-table th:nth-child(5),
.sales-table td:nth-child(5) {
    width: 13%;
}

.sales-table th:nth-child(6),
.sales-table td:nth-child(6) {
    width: 15%;
}

.sales-table th:nth-child(7),
.sales-table td:nth-child(7) {
    text-align: right;
    width: 10%;
}

.sales-table th:nth-child(8),
.sales-table td:nth-child(8) {
    width: 10%;
}

.sales-table th:nth-child(9),
.sales-table td:nth-child(9) {
    text-align: center;
    width: 3%;
}

.table-settings {
    background: transparent;
    border: 0;
    color: #4b5563;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px;
}

.status-filter-menu {
    display: inline-grid;
    place-items: center;
    position: relative;
}

.status-filter-dropdown {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
    display: none;
    min-width: 245px;
    padding: 12px;
    position: absolute;
    right: 0;
    top: 32px;
    z-index: 40;
}

.status-filter-dropdown.open {
    display: grid;
    gap: 8px;
}

.status-filter-dropdown strong {
    color: var(--text);
    font-size: 13px;
    margin-bottom: 4px;
}

.status-filter-dropdown label {
    align-items: center;
    color: #344054;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 8px;
    line-height: 1.3;
    min-height: 26px;
}

.status-filter-dropdown input {
    height: 15px;
    width: 15px;
}

.status-filter-actions {
    align-items: center;
    border-top: 1px solid #e4e9ef;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 10px;
}

.status-filter-actions button,
.status-filter-actions a {
    background: #e8eef3;
    border: 0;
    border-radius: 5px;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 12px;
    text-decoration: none;
}

.status-filter-actions button {
    background: var(--primary);
    color: #ffffff;
}

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

.mini-avatar {
    background: #ffa91f;
    border-radius: 5px;
    color: #0f172a;
    display: inline-grid;
    font-size: 12px;
    font-weight: 700;
    height: 24px;
    margin-right: 8px;
    place-items: center;
    width: 24px;
}

.activity-dot {
    color: #758391;
    font-size: 18px;
}

.activity-reminder-button {
    background: transparent;
    border: 0;
    color: #758391;
    cursor: pointer;
    font-size: 18px;
    height: 28px;
    line-height: 1;
    padding: 0;
    width: 28px;
}

.activity-reminder-button:hover {
    color: var(--primary);
}

.activity-reminder-button.has-reminder {
    color: #137333;
    font-weight: 900;
}

.activity-reminder-reason {
    color: #202733;
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    margin-left: 6px;
    max-width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.reminder-modal {
    align-items: center;
    background: rgba(15, 23, 42, 0.34);
    display: none;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 80;
}

.reminder-modal.open {
    display: flex;
}

.reminder-dialog {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    display: grid;
    gap: 10px;
    max-width: 520px;
    padding: 20px;
    width: min(520px, calc(100vw - 28px));
}

.reminder-dialog strong {
    color: var(--text);
    display: block;
    font-size: 18px;
}

.reminder-dialog span {
    color: var(--muted);
    display: block;
    margin-top: 4px;
}

.reminder-dialog label {
    color: var(--text);
    font-weight: 700;
}

.reminder-dialog input,
.reminder-dialog textarea {
    border: 1px solid #cbd7e3;
    border-radius: 6px;
    font: inherit;
    padding: 10px 12px;
}

.reminder-dialog textarea {
    resize: vertical;
}

.reminder-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.reminders-table td {
    vertical-align: middle;
}

.due-reminder td {
    background: #fff8e6;
}

.status-pill {
    background: var(--cyan);
    border-radius: 999px;
    color: #ffffff;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    min-width: 0;
    padding: 3px 7px;
    text-align: center;
    white-space: nowrap;
}

.status-pill.sales-order {
    background: var(--green);
}

.status-pill.invoice {
    background: var(--green);
}

.status-pill.invoice.paid {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1d4ed8;
}

.status-pill.invoice.partially_paid,
.status-pill.invoice.partially-paid {
    background: #ffedd5;
    border: 1px solid #fdba74;
    color: #c2410c;
}

.status-pill.quotation {
    background: var(--cyan);
}

.record-view {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px;
}

.record-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.record-head h1 {
    font-size: 24px;
    margin: 6px 0 0;
}

.record-back {
    color: #477d9c;
    font-size: 14px;
}

.record-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 22px;
}

.record-grid div {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 7px;
    display: grid;
    gap: 6px;
    padding: 14px;
}

.record-grid span {
    color: var(--muted);
    font-size: 13px;
}

.record-lines th {
    background: #f3f5f7;
}

.form {
    display: grid;
    gap: 14px;
    max-width: 760px;
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

.field input,
.field select,
.field textarea {
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    font-size: 15px;
    padding: 10px 12px;
    width: 100%;
}

.actions {
    display: flex;
    gap: 10px;
}

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

.login-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    max-width: 390px;
    padding: 26px;
    width: 100%;
}

.error {
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 7px;
    color: #b42318;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.success {
    background: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: 7px;
    color: #067647;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.profile-photo-field {
    align-items: center;
    display: flex;
    gap: 16px;
}

.profile-photo-preview {
    background: #ffac1b;
    border-radius: 10px;
    color: #111827;
    display: inline-grid;
    flex: 0 0 auto;
    font-size: 28px;
    font-weight: 700;
    height: 76px;
    overflow: hidden;
    place-items: center;
    width: 76px;
}

.profile-photo-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.empty-state {
    align-items: center;
    color: var(--muted);
    display: grid;
    gap: 8px;
    justify-items: center;
    min-height: 220px;
    text-align: center;
}

.empty-state strong {
    color: var(--text);
    font-size: 20px;
}

.status-pill.sales-order {
    background: #7c3aed;
}

.workflow-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 20px;
}

.workflow-strip span {
    background: #eef2f6;
    border: 1px solid #d8dee6;
    border-radius: 999px;
    color: #495767;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 12px;
}

.workflow-strip span.active {
    background: #dff3f7;
    border-color: #17a8bd;
    color: #0e7490;
}

.workflow-strip span.completed {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.workflow-strip span.remaining-due {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

.quote-actions .button {
    flex: 0 0 auto;
}

.quote-send-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.button.whatsapp {
    background: #22c55e;
}

.button.whatsapp:hover {
    background: #16a34a;
}

.button.tiny {
    font-size: 12px;
    padding: 5px 9px;
}

.payment-message {
    border-radius: 6px;
    display: none;
    font-size: 14px;
    font-weight: 700;
    margin: 10px 14px 0;
    padding: 10px 12px;
}

.payment-message.error,
.payment-message.warning,
.payment-message.success {
    display: block;
}

.payment-message.error {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
}

.payment-message.warning {
    background: #fffaeb;
    border: 1px solid #fedf89;
    color: #b54708;
}

.payment-message.success {
    background: #ecfdf3;
    border: 1px solid #abefc6;
    color: #067647;
}

.accounting-report-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.cost-movement-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-movement-section {
    margin-bottom: 16px;
}

.cost-clickable-row {
    cursor: pointer;
}

.cost-clickable-row:hover td {
    background: #f5fafc;
}

.report-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 16px;
}

.report-card span {
    color: var(--muted);
    font-size: 13px;
}

.report-card strong {
    color: var(--text);
    font-size: 24px;
}

.accounting-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.accounting-tabs input {
    display: none;
}

.accounting-tabs label {
    background: #e6ecf2;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 14px;
}

.accounting-tabs input:checked + label {
    background: var(--blue);
    color: #ffffff;
}

.tab-panel {
    display: none;
    flex-basis: 100%;
}

#tab-chart:checked ~ .chart-panel,
#tab-daily:checked ~ .daily-panel,
#tab-monthly:checked ~ .monthly-panel,
#tab-customers:checked ~ .customers-panel,
#tab-vendors:checked ~ .vendors-panel {
    display: block;
}

.table-link {
    color: #477d9c;
    font-weight: 700;
}

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

.section-title {
    font-size: 18px;
    margin: 0 0 14px;
}

.balance-payment-form {
    align-items: center;
    display: flex;
    gap: 10px;
}

.balance-payment-form input,
.balance-payment-form select {
    border: 1px solid #d4dce4;
    border-radius: 6px;
    font-size: 14px;
    height: 38px;
    padding: 0 10px;
}

.balance-payment-form input {
    width: 180px;
}

.receipt-page {
    padding: 22px;
}

.receipt-actions {
    margin-bottom: 12px;
}

.receipt-paper {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    max-width: 760px;
    padding: 28px;
}

.receipt-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
}

.receipt-header h1 {
    margin: 0 0 6px;
}

.receipt-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 20px;
}

.receipt-grid div {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 7px;
    display: grid;
    gap: 5px;
    padding: 12px;
}

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

.receipt-table th {
    width: 180px;
}

.receipt-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 56px;
}

.receipt-footer span {
    border-top: 1px solid #667085;
    padding-top: 8px;
    width: 220px;
}

.ledger-scroll {
    display: block;
    height: 390px;
    max-height: 390px;
    overflow-y: scroll;
    overscroll-behavior: contain;
}

.ledger-scroll .table {
    margin: 0;
}

.ledger-scroll .table thead th {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.accounting-header {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 16px;
}

.accounting-header p {
    color: var(--muted);
    margin: 4px 0 0;
}

.accounting-menu-bar {
    display: flex;
    gap: 8px;
}

.accounting-menu {
    position: relative;
}

.accounting-menu > button {
    background: #e6ecf2;
    border: 0;
    border-radius: 7px;
    color: #26323f;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 14px;
}

.accounting-menu > button::after {
    content: " v";
}

.accounting-menu > div {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
    display: none;
    min-width: 210px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 72px;
    z-index: 40;
}

.accounting-menu:hover > div,
.accounting-menu:focus-within > div {
    display: grid;
}

.accounting-menu label {
    color: #26323f;
    cursor: pointer;
    font-size: 14px;
    padding: 11px 14px;
}

.accounting-menu label:hover {
    background: #eef4f8;
}

.finance-filter {
    align-items: end;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px;
}

.finance-filter .field {
    min-width: 180px;
}

.finance-filter input[type="date"] {
    border: 1px solid #d4dce4;
    border-radius: 6px;
    height: 38px;
    padding: 0 10px;
}

.accounting-tabs-hidden > label {
    display: none;
}

.accounting-tabs-hidden {
    gap: 0;
}

@media print {
    .app-header,
    .sidebar,
    .topbar,
    .receipt-actions {
        display: none !important;
    }

    .app {
        display: block;
    }

    .main,
    .content {
        padding: 0;
    }

    .receipt-page {
        padding: 0;
    }

    .receipt-paper {
        border: 0;
        max-width: none;
    }
}

.quote-actions {
    align-items: center;
    background: #f5f7fa;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 6px;
    margin: -10px -14px 0;
    min-height: 48px;
    overflow-x: auto;
    padding: 7px 14px;
    white-space: nowrap;
}

.button.soft {
    background: #dfe5eb;
    color: #303946;
}

.payment-input,
.payment-method {
    border: 1px solid #d4dce4;
    border-radius: 6px;
    font-size: 13px;
    height: 32px;
    padding: 0 8px;
}

.payment-input {
    width: 180px;
}

.payment-method {
    width: 145px;
}

.quote-form {
    background: #ffffff;
    border: 1px solid #d9e0e7;
    margin: 0 -14px;
    min-height: 520px;
    padding: 24px 30px;
}

.quote-form h1 {
    color: #20262d;
    font-size: 32px;
    font-weight: 500;
    margin: 0 0 22px;
}

.quote-fields {
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(420px, 0.78fr) 420px;
}

.quote-main-fields,
.quote-side-fields {
    align-content: start;
    display: grid;
    gap: 16px;
}

.quote-field {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 170px minmax(0, 1fr);
}

.quote-field label {
    color: #242b33;
    font-size: 15px;
    font-weight: 700;
}

.quote-field input,
.quote-field select {
    border: 0;
    border-bottom: 1px solid #d8dee6;
    color: #303946;
    font-size: 15px;
    height: 32px;
    outline: 0;
    padding: 4px 6px;
    width: 100%;
}

.quote-field input:focus,
.quote-field select:focus {
    border-bottom-color: var(--blue);
}

.quote-tabs {
    align-items: flex-end;
    border-bottom: 1px solid #d8dee6;
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.quote-tabs button {
    background: transparent;
    border: 0;
    color: #477d9c;
    cursor: pointer;
    font-size: 15px;
    padding: 10px 16px;
}

.quote-tabs .active {
    background: #ffffff;
    border: 1px solid #d8dee6;
    border-bottom-color: #ffffff;
    border-radius: 6px 6px 0 0;
    color: #242b33;
    margin-bottom: -1px;
}

.invoice-purchases-panel {
    margin: 0 18px 18px;
    border: 1px solid #dce4ea;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}

.invoice-purchases-panel[hidden] {
    display: none;
}

.invoice-purchases-heading {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaee;
    background: #f7fafc;
}

.invoice-purchases-heading strong,
.invoice-purchases-heading span,
.invoice-purchases-table td small {
    display: block;
}

.invoice-purchases-heading strong {
    color: #1f3543;
    font-size: 14px;
}

.invoice-purchases-heading span,
.invoice-purchases-table td small {
    margin-top: 3px;
    color: #71818d;
    font-size: 10px;
}

.invoice-purchases-table-wrap {
    overflow-x: auto;
}

.invoice-purchases-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.invoice-purchases-table th,
.invoice-purchases-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e8edf1;
    text-align: left;
    vertical-align: top;
    font-size: 11px;
}

.invoice-purchases-table th {
    background: #f2f6f8;
    color: #5d707d;
    font-weight: 800;
}

.invoice-purchases-table td a {
    color: #267d9d;
    font-weight: 800;
}

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

.quote-lines {
    border-bottom: 1px solid #d8dee6;
}

.quote-line-head,
.quote-line-row {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(140px, 1.15fr) minmax(135px, 1.15fr) 85px 95px 190px 110px 34px;
}

.quote-line-head {
    border-bottom: 1px solid #d8dee6;
    color: #242b33;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 18px;
}

.quote-line-row {
    border-bottom: 1px solid #edf0f3;
    padding: 9px 18px;
}

.quote-line-row input,
.quote-line-row select {
    border: 0;
    border-bottom: 1px solid transparent;
    font-size: 14px;
    min-width: 0;
    outline: 0;
    padding: 8px 4px;
}

.quote-line-row input:focus,
.quote-line-row select:focus {
    border-bottom-color: var(--blue);
}

.locked-lines .quote-line-head,
.locked-lines .quote-line-row {
    background: #f6f8fa;
    opacity: 0.62;
}

.locked-lines .quote-line-row input,
.locked-lines .tax-picker {
    background: #f6f8fa;
    color: #667085;
    cursor: not-allowed;
}

.locked-lines .quote-line-row input:focus {
    border-bottom-color: transparent;
}

.locked-lines .tax-picker.locked {
    grid-template-columns: minmax(0, 1fr);
    pointer-events: none;
}

.locked-lines .quote-line-tools button:not(#add-order-note) {
    display: none;
}

.tax-picker {
    align-items: center;
    border: 1px solid #d8dee6;
    border-radius: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    min-height: 38px;
    padding: 3px 4px 3px 8px;
    position: relative;
}

.tax-selected {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.tax-chip {
    align-items: center;
    background: #e7dddf;
    border-radius: 999px;
    color: #3b3f45;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    min-height: 24px;
    padding: 3px 8px;
}

.tax-chip-remove {
    background: transparent;
    border: 0;
    color: #6b6063;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}

.tax-toggle {
    background: transparent;
    border: 0;
    color: #477d9c;
    cursor: pointer;
    font-size: 16px;
    height: 28px;
    padding: 0;
}

.tax-options {
    background: #ffffff;
    border: 1px solid #d8dee6;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    display: none;
    left: -1px;
    min-width: 210px;
    overflow: hidden;
    position: absolute;
    top: calc(100% + 1px);
    z-index: 30;
}

.tax-picker.open .tax-options {
    display: grid;
}

.tax-options button,
.tax-options span {
    background: #ffffff;
    border: 0;
    color: #2f3b48;
    cursor: pointer;
    font-size: 15px;
    padding: 9px 16px;
    text-align: left;
}

.tax-options button:hover {
    background: #eef4f8;
}

.tax-options span {
    color: #477d9c;
    cursor: default;
}

.line-total {
    align-self: center;
    color: #242b33;
    font-size: 14px;
    text-align: right;
}

.delete-line {
    align-self: center;
    background: transparent;
    border: 0;
    color: #b42318;
    cursor: pointer;
    font-size: 16px;
    height: 28px;
    line-height: 1;
    padding: 0;
    width: 28px;
}

.delete-line:hover {
    color: #f04438;
}

.quote-line-tools {
    align-items: center;
    display: flex;
    gap: 24px;
    min-height: 46px;
    padding: 0 18px;
}

.quote-total-box {
    display: grid;
    gap: 8px 18px;
    grid-template-columns: 150px 130px;
    justify-content: end;
    padding: 18px 24px 8px;
}

.quote-total-box span {
    color: #5f6b77;
    font-size: 14px;
}

.quote-total-box strong {
    color: #242b33;
    font-size: 15px;
    text-align: right;
}

#grand-total {
    border-top: 1px solid #d8dee6;
    font-size: 18px;
    padding-top: 8px;
}

.quote-line-tools button {
    background: transparent;
    border: 0;
    color: #477d9c;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

.quote-note-panel {
    background: #f8fafc;
    border: 1px solid #d8dee6;
    border-radius: 6px;
    display: none;
    margin: 10px 18px 18px;
    padding: 14px;
}

.quote-note-panel.open {
    display: grid;
    gap: 8px;
}

.quote-note-panel label {
    color: var(--text);
    font-weight: 700;
}

.quote-note-panel textarea {
    border: 1px solid #cbd7e3;
    border-radius: 6px;
    font: inherit;
    line-height: 1.5;
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
    width: 100%;
}

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

.quote-note-actions small {
    color: #667085;
}

.quote-note-actions .button {
    flex: 0 0 auto;
}

.editable-input {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) 30px;
}

.edit-toggle {
    background: transparent;
    border: 0;
    color: #477d9c;
    cursor: pointer;
    font-size: 17px;
    height: 28px;
    line-height: 1;
    padding: 0;
    width: 28px;
}

.edit-link {
    display: inline-grid;
    place-items: center;
    text-decoration: none;
}

.extra-panel {
    background: #f8fafc;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    display: none;
    gap: 10px;
    margin-left: 184px;
    padding: 10px;
}

.extra-panel.open {
    display: grid;
}

.extra-panel input,
.extra-panel textarea {
    border: 1px solid #d8dee6;
    border-radius: 5px;
    font-size: 14px;
    padding: 8px;
}

.product-extra {
    grid-template-columns: 1fr 1fr;
    margin: 0 18px 8px;
}

@media (max-width: 1150px) {
    .quote-fields {
        grid-template-columns: 1fr;
    }

    .quote-field {
        grid-template-columns: 160px minmax(0, 1fr);
    }
}

.invoice-row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 140px;
}

@media (max-width: 1100px) {
    .module-nav {
        display: none;
    }

    .search-box {
        min-width: 320px;
    }

    .view-icons {
        display: none;
    }
}

@media (max-width: 760px) {
    .app {
        display: block;
    }

    .app-header,
    .topbar,
    .search-tools {
        align-items: stretch;
        display: grid;
        gap: 12px;
    }

    .sidebar {
        max-height: 260px;
    }
    .nav a {
        display: none;
    }

    .nav a.mobile-visible {
        display: flex;
    }

    .search-box {
        min-width: 0;
        width: 100%;
    }

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

.nav-icon.settings {
    background: linear-gradient(135deg, #475569 0%, #1d4ed8 52%, #22c55e 100%);
    position: relative;
}

.nav-icon.settings::before {
    color: #ffffff;
    content: "";
    font-size: 18px;
    font-weight: 700;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

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

.settings-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.4fr);
    padding: 18px;
}

.settings-card h2 {
    color: var(--text);
    font-size: 18px;
    margin: 0 0 6px;
}

.settings-card p {
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
}

.settings-fields {
    display: grid;
    gap: 10px;
}

.settings-fields label {
    color: var(--text);
    font-weight: 700;
}

.settings-fields input {
    border: 1px solid #cbd7e3;
    border-radius: 6px;
    font: inherit;
    padding: 10px 12px;
}

.settings-check {
    align-items: center;
    display: flex;
    gap: 10px;
}

.settings-check input {
    height: 17px;
    width: 17px;
}

.settings-note {
    color: #b45309;
    display: block;
    line-height: 1.4;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
}

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

.email-compose-page {
    display: grid;
    gap: 14px;
}

.email-compose-head {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 16px 18px;
}

.email-compose-head h1 {
    font-size: 24px;
    margin: 0 0 4px;
}

.email-compose-head p {
    color: var(--muted);
    margin: 0;
}

.email-compose-actions {
    display: flex;
    gap: 10px;
}

.email-compose-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(360px, 0.75fr) minmax(420px, 1.25fr);
}

.email-compose-card,
.email-pdf-preview {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}

.email-compose-card {
    display: grid;
    gap: 10px;
}

.email-compose-card label {
    color: var(--text);
    font-weight: 700;
}

.email-compose-card input,
.email-compose-card textarea {
    border: 1px solid #cbd7e3;
    border-radius: 6px;
    font: inherit;
    padding: 10px 12px;
}

.email-compose-card textarea {
    resize: vertical;
}

.email-attachment-note {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
}

.email-compose-submit {
    display: flex;
    justify-content: flex-end;
}

.email-pdf-preview {
    min-height: 680px;
    padding: 0;
    overflow: hidden;
}

.email-pdf-preview iframe {
    border: 0;
    height: 100%;
    min-height: 680px;
    width: 100%;
}

@media (max-width: 1100px) {
    .email-compose-grid {
        grid-template-columns: 1fr;
    }
}

.settings-fields select {
    border: 1px solid #cbd7e3;
    border-radius: 6px;
    font: inherit;
    padding: 10px 12px;
}
.button.whatsapp.disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.65;
}
.telegram-reminder-toggle {
    align-items: center;
    border: 1px solid #cbd7e3;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.telegram-reminder-toggle input {
    height: 18px;
    margin: 0;
    width: 18px;
}

.telegram-reminder-icon {
    align-items: center;
    background: #dbeafe;
    border-radius: 50%;
    color: #1d4ed8 !important;
    display: inline-flex !important;
    flex: 0 0 34px;
    font-size: 17px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    margin: 0 !important;
    width: 34px;
}

.telegram-reminder-copy strong {
    color: var(--text);
    font-size: 16px;
    margin: 0;
}

.telegram-reminder-copy small {
    color: var(--muted);
    display: block;
    font-size: 13px;
    margin-top: 2px;
}

.telegram-reminder-toggle:has(input:checked) {
    background: #eff6ff;
    border-color: #2563eb;
}

.telegram-reminder-toggle:has(input:checked) .telegram-reminder-icon {
    background: #2563eb;
    color: #ffffff !important;
}

.reminder-dialog-actions-split {
    border-top: 1px solid #dbe4ee;
    justify-content: flex-start;
    margin-top: 8px;
    padding-top: 14px;
}

.reminder-dialog-actions-split .button {
    white-space: nowrap;
}
.telegram-reminder-toggle {
    gap: 8px;
    padding: 8px 10px;
}

.telegram-reminder-toggle input {
    height: 14px;
    width: 14px;
}

.telegram-reminder-icon {
    flex-basis: 24px;
    font-size: 13px;
    height: 24px;
    width: 24px;
}

.telegram-reminder-copy strong {
    font-size: 13px;
    line-height: 1.1;
}

.telegram-reminder-copy small {
    font-size: 11px;
    line-height: 1.2;
    margin-top: 1px;
}
.telegram-reminder-icon {
    background: #229ed9 !important;
    position: relative;
}

.telegram-reminder-icon::before {
    border-bottom: 6px solid transparent;
    border-left: 15px solid #ffffff;
    border-top: 6px solid transparent;
    content: "";
    height: 0;
    left: 7px;
    position: absolute;
    top: 6px;
    transform: rotate(-18deg);
    width: 0;
}

.telegram-reminder-icon::after {
    background: #229ed9;
    content: "";
    height: 8px;
    left: 10px;
    position: absolute;
    top: 8px;
    transform: rotate(-28deg);
    width: 5px;
}
.telegram-reminder-icon {
    background: #2aabee !important;
    border-radius: 50%;
    height: 28px !important;
    overflow: hidden;
    position: relative;
    width: 28px !important;
}

.telegram-reminder-icon::before {
    background: #ffffff;
    border: 0;
    clip-path: polygon(8% 44%, 88% 12%, 64% 88%, 45% 62%, 28% 78%, 34% 57%);
    content: "";
    height: 19px;
    left: 5px;
    position: absolute;
    top: 5px;
    transform: none;
    width: 20px;
}

.telegram-reminder-icon::after {
    background: #2aabee;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    content: "";
    height: 8px;
    left: 13px;
    position: absolute;
    top: 11px;
    transform: rotate(42deg);
    width: 9px;
}
.reminder-badge {
    align-items: center;
    background: #22c55e !important;
    border: 2px solid var(--header);
    border-radius: 999px;
    color: #ffffff !important;
    display: none;
    font-size: 11px;
    font-weight: 800;
    height: 21px;
    justify-content: center;
    min-width: 21px;
    padding: 0 5px;
    position: absolute;
    right: -8px;
    top: -7px;
    line-height: 1;
}

.reminder-button.has-reminders .reminder-badge {
    display: inline-flex !important;
}

.reminder-status-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.status-pill.done {
    background: #64748b;
}

.reminder-done-button {
    background: #e8eef3;
    border: 0;
    border-radius: 999px;
    color: #243241;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 7px 14px;
}

.reminder-done-button:hover {
    background: #d9e2ea;
}
.reminder-badge {
    overflow: hidden;
    z-index: 5;
}

.reminder-badge::before,
.reminder-badge::after {
    display: none !important;
    content: none !important;
}
.activity-reminder-button.has-reminder {
    align-items: center;
    background: #16a34a !important;
    border-radius: 50%;
    color: transparent !important;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    position: relative;
    width: 22px;
}

.activity-reminder-button.has-reminder {
    font-size: 0;
    line-height: 0;
}

.activity-reminder-button.has-reminder::before {
    border: 2px solid #ffffff;
    border-radius: 50%;
    content: "";
    height: 13px;
    position: absolute;
    width: 13px;
}

.activity-reminder-button.has-reminder::after {
    background: #ffffff;
    box-shadow: 4px 4px 0 -1px #ffffff;
    content: "";
    height: 6px;
    position: absolute;
    transform: translate(1px, -1px) rotate(0deg);
    transform-origin: bottom center;
    width: 2px;
}

.activity-reminder-button.has-reminder:hover {
    background: #15803d !important;
}

.nav-icon.settings::before {
    background: transparent !important;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 -8px 0 -5px #ffffff, 0 8px 0 -5px #ffffff, 8px 0 0 -5px #ffffff, -8px 0 0 -5px #ffffff;
    content: "" !important;
    height: 13px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
}

.nav-icon.settings::after {
    background: #ffffff;
    border-radius: 50%;
    content: "";
    height: 5px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
}


.reminder-dialog {
    position: relative;
}

.reminder-close {
    align-items: center;
    background: #eef3f8;
    border: 1px solid #d4dee8;
    border-radius: 50%;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    font-size: 22px;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 32px;
}

.reminder-close:hover {
    background: #dfe8f1;
    color: #0f172a;
}

.mobile-sales-page {
    margin: 0 auto;
    max-width: 760px;
    padding: 14px 14px 96px;
}

.mobile-sales-hero,
.mobile-card,
.mobile-total-bar {
    background: #ffffff;
    border: 1px solid #dfe7ef;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.mobile-sales-hero {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 14px;
}

.mobile-sales-hero span {
    color: #5f7488;
    font-weight: 700;
}

.mobile-sales-hero h1,
.mobile-card h2 {
    color: #243241;
    margin: 0;
}

.mobile-sales-hero h1 {
    font-size: 22px;
    line-height: 1.2;
    margin-top: 4px;
}

.mobile-card {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 14px;
}

.mobile-card h2 {
    font-size: 18px;
}

.mobile-card label {
    color: #243241;
    font-weight: 800;
}

.mobile-card input,
.mobile-card select,
.mobile-card textarea {
    border: 1px solid #cbd7e3;
    border-radius: 7px;
    font: inherit;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

.mobile-card textarea {
    min-height: 86px;
    resize: vertical;
}

.mobile-two-fields,
.mobile-three-fields {
    display: grid;
    gap: 10px;
}

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

.mobile-three-fields {
    grid-template-columns: 90px 1fr 120px;
}

.mobile-section-title,
.mobile-line-total,
.mobile-total-bar {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.mobile-line {
    border: 1px solid #e4ebf2;
    border-radius: 8px;
    display: grid;
    gap: 9px;
    margin-top: 10px;
    padding: 12px;
    position: relative;
}

.mobile-remove-line {
    background: #fee2e2;
    border: 0;
    border-radius: 6px;
    color: #b91c1c;
    cursor: pointer;
    font-weight: 800;
    padding: 7px 10px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.mobile-line-total {
    border-top: 1px solid #e4ebf2;
    color: #5f7488;
    padding-top: 10px;
}

.mobile-line-total strong,
.mobile-total-bar strong {
    color: #0f172a;
    font-size: 20px;
}

.mobile-total-bar {
    bottom: 70px;
    left: 14px;
    padding: 12px 14px;
    position: sticky;
    right: 14px;
    z-index: 20;
}

.mobile-submit-bar {
    background: rgba(246, 249, 252, 0.95);
    border-top: 1px solid #dfe7ef;
    bottom: 0;
    left: 0;
    padding: 10px 14px;
    position: fixed;
    right: 0;
    z-index: 30;
}

.mobile-submit-bar .button {
    min-height: 48px;
    width: 100%;
}

@media (max-width: 760px) {
    .mobile-two-fields,
    .mobile-three-fields {
        grid-template-columns: 1fr;
    }

    .mobile-sales-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .mobile-sales-hero {
        align-items: flex-start;
        gap: 10px;
    }
}

.mobile-customer-picker,
.mobile-product-picker {
    position: relative;
}

.mobile-customer-suggestions,
.mobile-product-suggestions {
    background: #ffffff;
    border: 1px solid #cbd7e3;
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
    display: none;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 45;
}

.mobile-customer-suggestions.open,
.mobile-product-suggestions.open {
    display: block;
}

.mobile-customer-suggestions button,
.mobile-product-suggestions button,
.mobile-customer-empty,
.mobile-product-empty {
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    color: #243241;
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    text-align: left;
    width: 100%;
}

.mobile-customer-suggestions button:hover,
.mobile-product-suggestions button:hover {
    background: #eef6fb;
}

.mobile-customer-suggestions strong,
.mobile-product-suggestions strong {
    font-size: 15px;
}

.mobile-customer-suggestions span,
.mobile-product-suggestions span,
.mobile-customer-empty,
.mobile-product-empty {
    color: #5f7488;
    font-size: 13px;
}
.diagnostic-row {
    align-items: center;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.diagnostic-row span {
    color: #5f7488;
    font-weight: 700;
}

.diagnostic-row strong {
    color: #243241;
    font-weight: 800;
    word-break: break-word;
}
.table-sort-link {
    color: inherit;
    display: inline-flex;
    font-weight: 700;
    text-decoration: none;
}

.table-sort-link:hover,
.header-reminder-inline-link:hover,
.header-reminder-count-link:hover {
    color: #477d9c;
    text-decoration: none;
}

.invoice-number-with-tax {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7px;
}

.invoice-vat-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border: 1px solid #c9c5f4;
    border-radius: 5px;
    background: #eeecff;
    color: #5746b5;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .15px;
    white-space: nowrap;
}

.mobile-document-number .invoice-vat-badge {
    margin-left: 6px;
    vertical-align: middle;
}

.header-reminder-inline-link,
.header-reminder-count-link {
    color: inherit;
    text-decoration: none;
}
.toolbar-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.button.danger {
    background: #dc2626;
    color: #ffffff;
}

.button.danger:hover {
    background: #b91c1c;
}


/* mobile sidebar visibility fallback */
@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    .sidebar .nav a {
        display: none;
    }

    .sidebar .nav a.mobile-visible {
        display: flex;
    }

    .sidebar {
        max-height: none;
        overflow: visible;
    }

    .app-header,
    .topbar,
    .search-tools {
        align-items: stretch;
        display: grid;
        gap: 10px;
    }

    .topbar {
        padding: 10px 12px;
    }

    .page-actions,
    .search-tools {
        width: 100%;
    }

    .search-box {
        min-width: 0;
        width: 100%;
    }

    .content {
        padding: 12px;
    }

    .card,
    .quote-form {
        border-radius: 8px;
    }
}

/* mobile app shell polish */
@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    body {
        background: #f5f8fb;
        font-size: 14px;
    }

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

    .app-header {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr auto;
        min-height: auto;
        padding: 10px 12px;
    }

    .header-left {
        gap: 9px;
        min-width: 0;
    }

    .app-switcher {
        font-size: 18px;
    }

    .module-name {
        font-size: 20px;
        line-height: 1;
    }

    .module-nav {
        display: none !important;
    }

    .header-actions {
        display: flex !important;
        gap: 9px;
        grid-column: 1 / -1;
        justify-content: flex-start;
        order: 2;
        width: 100%;
    }

    .profile-menu {
        order: 1;
    }

    .header-reminders {
        order: 2;
    }

    .datetime-widget {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
        order: 3;
        overflow: hidden;
        padding: 0 10px;
    }

    .datetime-day,
    .datetime-date,
    .datetime-time {
        font-size: 12px;
    }

    .avatar {
        border-radius: 9px;
        height: 34px;
        width: 34px;
    }

    .reminder-button {
        height: 34px;
        width: 34px;
    }

    .reminder-bell {
        height: 20px;
        width: 20px;
    }

    .reminder-badge {
        background: #22c55e;
        border-color: var(--header);
        font-size: 11px;
        min-width: 19px;
        right: -3px;
        top: -5px;
    }

    .header-reminder-dropdown,
    .profile-dropdown {
        left: 0;
        max-width: calc(100vw - 24px);
        min-width: 0;
        right: auto;
        width: calc(100vw - 24px);
    }

    .sidebar {
        background: #111827;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 10px;
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .nav {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sidebar .nav a {
        display: none !important;
    }

    .sidebar .nav a.mobile-visible {
        align-items: center;
        border-radius: 10px;
        display: flex !important;
        font-size: 13px;
        gap: 8px;
        justify-content: center;
        min-height: 44px;
        padding: 0 8px;
        text-align: center;
        white-space: nowrap;
    }

    .sidebar .nav a.mobile-visible.active {
        background: #5f9bb8;
        color: #ffffff;
        font-weight: 800;
    }

    .sidebar .nav a.mobile-visible:not(.active) {
        background: rgba(255, 255, 255, 0.05);
    }

    .sidebar .nav-icon {
        height: 24px;
        width: 24px;
    }

    .main {
        width: 100%;
    }

    .topbar {
        display: grid;
        gap: 10px;
        justify-content: stretch;
        min-height: auto;
        padding: 10px 12px;
    }

    .page-actions {
        min-width: 0;
        width: 100%;
    }

    .page-actions .button {
        min-height: 38px;
    }

    .search-tools {
        display: grid;
        grid-template-columns: 1fr auto;
        width: 100%;
    }

    .search-tools .button,
    .search-button {
        min-height: 42px;
    }

    .view-icons {
        display: none !important;
    }

    .content {
        padding: 12px;
    }
}
/* quotation and sales order line layout reset */
.quote-lines {
    overflow-x: visible;
}

.quote-line-head,
.quote-line-row {
    grid-template-columns: minmax(150px, 1.15fr) minmax(170px, 1.25fr) 78px 92px minmax(145px, 0.9fr) 100px 30px;
}

.quote-line-tools,
.quote-total-box,
.quote-note-panel {
    min-width: 0;
}
.status-pill.quotation.rejected {
    background: #dc2626;
}

.bulk-actions {
    align-items: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    margin: 0 0 12px;
    padding: 10px 14px;
}

.bulk-actions[hidden] {
    display: none;
}

.bulk-actions span {
    color: #9a3412;
    font-weight: 700;
}

.button.danger {
    background: #dc2626;
    color: #ffffff;
}

.button.danger:hover {
    background: #b91c1c;
}


.paid-ribbon-container {
    overflow: hidden;
    position: relative;
}

.paid-ribbon {
    background: #22a947;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    min-width: 360px;
    line-height: 1;
    padding: 7px 0 17px;
    position: absolute;
    right: -142px;
    text-align: center;
    text-transform: uppercase;
    top: 72px;
    transform: rotate(45deg);
    z-index: 5;
}

.paid-ribbon span {
    display: inline-block;
    position: relative;
    left: -58px;
}
.button[disabled] {
    cursor: not-allowed;
    opacity: 0.62;
}

/* Modern authentication screen */
.login-page {
    min-height: 100vh;
    padding: 40px 24px;
    background: #dce7f3;
    align-items: center;
    justify-content: center;
}

.login-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(900px, 100%);
    max-width: none;
    min-height: 600px;
    padding: 42px 58px;
    border: 1px solid #315b7d;
    border-radius: 8px;
    background: #173f64;
    box-shadow: 0 24px 60px rgba(22, 47, 72, 0.22);
    color: #ffffff;
}

.login-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -54px;
    bottom: -54px;
    width: 350px;
    height: 350px;
    background: url('../icons/app-icon.svg') center / contain no-repeat;
    opacity: 0.08;
    pointer-events: none;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 38px;
}

.login-brand img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.login-brand strong,
.login-brand span {
    display: block;
    letter-spacing: 0;
}

.login-brand strong {
    font-size: 24px;
    line-height: 1.2;
}

.login-brand span {
    margin-top: 3px;
    color: #bcd1e2;
    font-size: 12px;
}

.login-content {
    width: min(430px, 100%);
    margin: 0 auto;
}

.login-heading {
    margin-bottom: 22px;
}

.login-heading > span {
    color: #8ed4f4;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.login-heading h1 {
    margin: 5px 0 4px;
    color: #ffffff;
    font-size: 29px;
    line-height: 1.25;
    letter-spacing: 0;
}

.login-heading p,
.login-help {
    margin: 0;
    color: #c6d7e5;
    font-size: 13px;
}

.login-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 19px;
    padding: 4px;
    border: 1px solid #577997;
    border-radius: 7px;
    background: #103451;
}

.login-mode-switch button {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #c9dae7;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.login-mode-switch button.active {
    background: #ffffff;
    color: #173f64;
}

.login-error {
    margin-bottom: 16px;
    border-color: #f6b7b2;
    background: #fff4f2;
    color: #a82019;
}

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

.login-field {
    margin: 0;
}

.login-field label {
    display: block;
    margin-bottom: 7px;
    color: #edf5fa;
    font-size: 12px;
    font-weight: 700;
}

.login-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    outline: none;
    background: #ffffff;
    color: #172b3a;
    font-size: 14px;
}

.login-field input:focus {
    border-color: #55add5;
    box-shadow: 0 0 0 3px rgba(85, 173, 213, 0.2);
}

.password-control {
    position: relative;
}

.password-control input {
    padding-right: 66px;
}

.password-control button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 38px;
    min-width: 54px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: #e6eef4;
    color: #244a68;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.login-submit {
    width: 100%;
    height: 48px;
    margin-top: 4px;
    border: 1px solid #63bde3;
    border-radius: 6px;
    background: #2d89b2;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(7, 29, 46, 0.2);
}

.login-submit:hover {
    background: #26799e;
}

.login-help {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 640px) {
    .login-page {
        padding: 0;
        background: #173f64;
    }

    .login-card {
        width: 100%;
        min-height: 100vh;
        padding: 30px 22px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .login-card::after {
        width: 250px;
        height: 250px;
    }

    .login-brand {
        margin-bottom: 44px;
    }

    .login-brand strong {
        font-size: 21px;
    }

    .login-heading h1 {
        font-size: 26px;
    }

    .login-mode-switch button {
        padding: 8px 6px;
        font-size: 12px;
    }
}
/* Settings workspace and user access management */
.settings-shell {
    min-height: calc(100vh - 124px);
}

.settings-shell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px;
}

.settings-shell-head h1,
.settings-content-head h2,
.user-form-section h3 {
    margin: 0;
    letter-spacing: 0;
    color: var(--text);
}

.settings-shell-head h1 {
    font-size: 25px;
}

.settings-shell-head p,
.settings-content-head p,
.user-form-section-title p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.settings-workspace {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 620px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.settings-subnav {
    padding: 16px 10px;
    border-right: 1px solid var(--line);
    background: #f5f7fa;
}

.settings-subnav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 11px 12px;
    border-left: 3px solid transparent;
    color: #344054;
    text-decoration: none;
}

.settings-subnav a.active {
    border-left-color: #3197bd;
    background: #e5edf3;
    color: #172b3a;
}

.settings-subnav a strong,
.settings-subnav a small {
    display: block;
}

.settings-subnav a strong {
    font-size: 14px;
}

.settings-subnav a small {
    margin-top: 3px;
    color: #667085;
    font-size: 11px;
}

.settings-subnav-icon {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 7px;
    background: #2d94b9;
}

.users-icon::before,
.users-icon::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
}

.users-icon::before {
    top: 7px;
    left: 14px;
    width: 10px;
    height: 10px;
}

.users-icon::after {
    left: 8px;
    bottom: 7px;
    width: 22px;
    height: 11px;
    border-radius: 11px 11px 5px 5px;
}

.activation-icon::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: 11px;
    height: 11px;
    border: 3px solid #ffffff;
    border-radius: 50%;
}

.activation-icon::after {
    content: '';
    position: absolute;
    top: 19px;
    left: 17px;
    width: 17px;
    height: 5px;
    border-radius: 0 3px 3px 0;
    background: #ffffff;
    box-shadow: 5px 4px 0 -1px #ffffff, 10px 4px 0 -1px #ffffff;
    transform: rotate(45deg);
    transform-origin: left center;
}
.integrations-icon::before,
.integrations-icon::after {
    content: '';
    position: absolute;
    background: #ffffff;
}

.integrations-icon::before {
    top: 9px;
    left: 8px;
    width: 22px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 3px;
    background: transparent;
}

.integrations-icon::after {
    left: 13px;
    bottom: 7px;
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

.settings-content {
    min-width: 0;
    padding: 22px;
    background: #f8fafc;
}

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

.settings-content-head h2 {
    font-size: 22px;
}

.settings-users-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.settings-users-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.settings-users-table th,
.settings-users-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 13px;
}

.settings-users-table th {
    background: #eef2f6;
    color: #172b3a;
    font-weight: 700;
}

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

.user-id-cell {
    color: #397da0;
    font-weight: 700;
}

.user-role-badge,
.user-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
}

.user-role-badge {
    background: #e8eef4;
    color: #344054;
}

.user-status.active {
    background: #dcfce7;
    color: #16783a;
}

.user-status.inactive {
    background: #f2f4f7;
    color: #667085;
}

.button.compact {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
}

.user-access-form {
    display: grid;
    gap: 16px;
}

.user-form-section {
    display: grid;
    grid-template-columns: minmax(190px, 0.6fr) minmax(0, 1.4fr);
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.user-form-section h3 {
    font-size: 16px;
}

.user-form-section-title p {
    font-size: 12px;
}

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

.user-form-grid label > span,
.user-form-grid label > small {
    display: block;
}

.user-form-grid label > span {
    margin-bottom: 7px;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.user-form-grid label > small {
    margin-top: 5px;
    color: #667085;
    font-size: 10px;
}

.user-form-grid input,
.user-form-grid select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #cbd7e3;
    border-radius: 6px;
    background: #ffffff;
    color: #172b3a;
    font: inherit;
}

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

.permission-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #d7e0e8;
    border-radius: 7px;
    background: #fbfcfd;
    cursor: pointer;
}

.permission-option:has(input:checked) {
    border-color: #70bddd;
    background: #eef8fc;
}

.permission-option input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

.permission-option strong,
.permission-option small,
.user-status-section .settings-check strong,
.user-status-section .settings-check small {
    display: block;
}

.permission-option strong {
    color: #344054;
    font-size: 12px;
}

.permission-option small,
.user-status-section .settings-check small {
    margin-top: 2px;
    color: #667085;
    font-size: 10px;
}

.user-status-section {
    display: block;
}

.user-status-section .settings-check {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
}

.user-form-actions {
    gap: 9px;
}

.access-denied-page {
    max-width: 520px;
    margin: 70px auto;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
}

.access-denied-page > strong {
    display: block;
    color: #d92d20;
    font-size: 42px;
}

.access-denied-page h1 {
    margin: 6px 0;
    font-size: 24px;
}

.access-denied-page p {
    margin: 0 0 20px;
    color: var(--muted);
}

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

    .settings-subnav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .settings-subnav a {
        flex: 0 0 220px;
        border-left: 0;
        border-bottom: 3px solid transparent;
    }

    .settings-subnav a.active {
        border-bottom-color: #3197bd;
    }

    .user-form-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .settings-content {
        padding: 14px;
    }

    .settings-content-head {
        align-items: flex-start;
    }

    .user-form-grid,
    .permission-grid {
        grid-template-columns: 1fr;
    }
}
/* Company general settings */
.general-icon::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 3px solid #ffffff;
    border-radius: 50%;
}
.general-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 17px;
    width: 4px;
    height: 30px;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: -13px 13px 0 -1px #ffffff, 13px 13px 0 -1px #ffffff;
    transform: rotate(45deg);
}
.company-settings-form {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}
.company-identity-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 24px;
    align-items: center;
    padding: 20px 22px;
}
.company-name-field label,
.company-details-column > label,
.company-inline-fields label > span {
    display: block;
    margin-bottom: 6px;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}
.company-name-field input {
    width: 100%;
    padding: 7px 0 10px;
    border: 0;
    border-bottom: 1px solid #ccd6e0;
    border-radius: 0;
    color: #243241;
    font-size: 28px;
    outline: none;
}
.company-logo-field {
    display: grid;
    gap: 8px;
    justify-items: center;
}
.company-logo-field img,
.company-logo-placeholder {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 1px solid #d7e0e8;
    background: #f4f7fa;
    color: #7a8795;
    object-fit: contain;
}
.company-logo-field input {
    display: none;
}
.company-settings-tabs {
    display: flex;
    gap: 8px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
}
.company-settings-tabs span {
    padding: 12px 16px;
    color: #4d7895;
    font-weight: 700;
}
.company-settings-tabs span.active {
    margin-bottom: -1px;
    border: 1px solid var(--line);
    border-bottom-color: #ffffff;
    border-radius: 6px 6px 0 0;
    background: #ffffff;
    color: #243241;
}
.company-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    padding: 22px;
}
.company-details-column {
    display: grid;
    align-content: start;
    gap: 8px;
}
.company-details-column h3 {
    margin: 0 0 8px;
    color: #243241;
    font-size: 16px;
}
.company-details-column > input,
.company-inline-fields input {
    width: 100%;
    min-height: 38px;
    padding: 7px 8px;
    border: 0;
    border-bottom: 1px solid #d7e0e8;
    border-radius: 0;
    background: #ffffff;
    color: #344054;
    font: inherit;
    outline: none;
}
.company-details-column input:focus,
.company-name-field input:focus {
    border-bottom-color: #3197bd;
}
.company-inline-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 3px 0;
}
.company-inline-fields.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.company-settings-form .settings-actions {
    padding: 0 22px 22px;
}
@media (max-width: 760px) {
    .company-identity-card,
    .company-details-grid {
        grid-template-columns: 1fr;
    }
    .company-logo-field {
        justify-items: start;
    }
    .company-details-grid {
        gap: 24px;
    }
    .company-inline-fields.three {
        grid-template-columns: 1fr;
    }
}
/* Mobile dashboard: isolated from desktop layout */
.mobile-dashboard {
    display: none;
}

@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    .section-dashboard .topbar {
        display: none;
    }

    .desktop-dashboard {
        display: none;
    }

    .mobile-dashboard {
        display: block;
        color: #172b3a;
    }

    .mobile-dashboard-heading,
    .mobile-section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-dashboard-heading {
        margin-bottom: 14px;
    }

    .mobile-dashboard-heading span,
    .mobile-section-title span {
        display: block;
        margin-bottom: 3px;
        color: #6b7f8f;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mobile-dashboard-heading h1,
    .mobile-section-title h2 {
        margin: 0;
        color: #172b3a;
        letter-spacing: 0;
    }

    .mobile-dashboard-heading h1 {
        font-size: 22px;
    }

    .mobile-section-title h2 {
        font-size: 17px;
    }

    .mobile-dashboard-new {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 7px;
        background: #5f9fbd;
        color: #ffffff;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
    }

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

    .mobile-kpi {
        min-width: 0;
        min-height: 116px;
        padding: 14px;
        border: 1px solid #dbe4eb;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 3px 10px rgba(29, 55, 72, 0.05);
    }

    .mobile-kpi span,
    .mobile-kpi small {
        display: block;
        color: #6b7f8f;
    }

    .mobile-kpi span {
        font-size: 12px;
        font-weight: 700;
    }

    .mobile-kpi strong {
        display: block;
        margin: 8px 0 4px;
        overflow-wrap: anywhere;
        color: #172b3a;
        font-size: 21px;
        line-height: 1.1;
    }

    .mobile-kpi small {
        font-size: 10px;
    }

    .mobile-kpi-primary {
        border-top: 4px solid #2e93ba;
    }

    .mobile-kpi-paid {
        border-top: 4px solid #25a65a;
    }

    .mobile-kpi-due {
        border-top: 4px solid #e28a2d;
    }

    .mobile-dashboard-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        padding: 13px 14px;
        border-radius: 8px;
        background: #1f3f4d;
        color: #ffffff;
    }

    .mobile-dashboard-strip span {
        display: block;
        color: #c8d8df;
        font-size: 11px;
    }

    .mobile-dashboard-strip strong {
        display: block;
        margin-top: 2px;
        font-size: 19px;
    }

    .mobile-dashboard-strip a,
    .mobile-section-title a {
        color: #4c8cab;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

    .mobile-dashboard-strip a {
        color: #ffffff;
    }

    .mobile-today-list {
        margin-top: 14px;
        padding: 14px;
        border: 1px solid #dbe4eb;
        border-radius: 8px;
        background: #ffffff;
    }

    .mobile-section-title {
        margin-bottom: 10px;
    }

    .mobile-invoice-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 12px 0;
        border-top: 1px solid #e4eaf0;
        color: inherit;
        text-decoration: none;
    }

    .mobile-invoice-main,
    .mobile-invoice-meta {
        min-width: 0;
    }

    .mobile-invoice-main strong,
    .mobile-invoice-main span,
    .mobile-invoice-meta strong,
    .mobile-invoice-meta span {
        display: block;
    }

    .mobile-invoice-main strong {
        overflow: hidden;
        color: #2d789d;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-invoice-main span,
    .mobile-invoice-meta span {
        margin-top: 4px;
        color: #6b7f8f;
        font-size: 11px;
    }

    .mobile-invoice-meta {
        text-align: right;
    }

    .mobile-invoice-meta strong {
        font-size: 13px;
    }

    .mobile-invoice-foot {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .mobile-status-pill {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0 9px;
        border-radius: 999px;
        background: #e2f6f8;
        color: #087d91;
        font-size: 10px;
        font-weight: 800;
    }

    .mobile-paid-text,
    .mobile-due-text {
        font-size: 10px;
        font-weight: 800;
    }

    .mobile-paid-text {
        color: #198b49;
    }

    .mobile-due-text {
        color: #b86113;
    }

    .mobile-empty-state {
        padding: 24px 12px;
        border-top: 1px solid #e4eaf0;
        text-align: center;
    }

    .mobile-empty-state strong,
    .mobile-empty-state span {
        display: block;
    }

    .mobile-empty-state span {
        margin-top: 5px;
        color: #6b7f8f;
        font-size: 12px;
    }
}
/* Company identity in application header */
.header-company-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 8px;
    min-width: 0;
    color: #ffffff;
    text-decoration: none;
}
.header-company-brand img,
.header-company-fallback {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
}
.header-company-brand img {
    display: block;
    object-fit: contain;
    background: #ffffff;
}
.header-company-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 18px;
}
.header-company-brand strong {
    max-width: 190px;
    overflow: hidden;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-module-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.24);
}
@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    .header-company-brand {
        gap: 7px;
    }
    .header-company-brand img,
    .header-company-fallback {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }
    .header-company-brand strong {
        max-width: min(52vw, 220px);
        font-size: 18px;
    }
    .header-module-divider,
    .module-name {
        display: none;
    }
}
/* Mobile header single-row alignment */
@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    .app-header {
        display: grid;
        grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
        gap: 8px;
        min-height: 58px;
        padding: 8px 10px;
    }

    .header-left {
        min-width: 0;
        overflow: hidden;
    }

    .header-company-brand {
        min-width: 0;
        max-width: 150px;
    }

    .header-company-brand img,
    .header-company-fallback {
        flex: 0 0 34px;
    }

    .header-company-brand strong {
        max-width: 102px;
        font-size: 15px;
    }

    .header-actions {
        display: flex !important;
        align-items: center;
        grid-column: 2;
        gap: 6px;
        justify-content: flex-end;
        min-width: 0;
        order: initial;
        width: auto;
    }

    .datetime-widget {
        flex: 1 1 auto;
        min-width: 0;
        height: 34px;
        order: 1;
        padding: 0 7px;
        white-space: nowrap;
    }

    .datetime-day,
    .datetime-date,
    .datetime-time {
        font-size: 10px;
    }

    .header-reminders {
        flex: 0 0 34px;
        order: 2;
    }

    .profile-menu {
        flex: 0 0 34px;
        order: 3;
    }

    .header-reminder-dropdown,
    .profile-dropdown {
        left: auto;
        right: 0;
    }
}

@media (max-width: 410px) {
    .app-header {
        grid-template-columns: minmax(68px, auto) minmax(0, 1fr);
        gap: 6px;
        padding-inline: 8px;
    }

    .header-company-brand {
        gap: 5px;
        max-width: 105px;
    }

    .header-company-brand img,
    .header-company-fallback {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    .header-company-brand strong {
        max-width: 68px;
        font-size: 13px;
    }

    .header-actions {
        gap: 5px;
    }

    .datetime-widget {
        height: 32px;
        padding-inline: 5px;
    }

    .datetime-day,
    .datetime-date,
    .datetime-time {
        font-size: 9px;
    }

    .avatar,
    .reminder-button {
        width: 32px;
        height: 32px;
    }

    .header-reminders,
    .profile-menu {
        flex-basis: 32px;
    }
}
/* Compact mobile profile dropdown */
@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    .app-header {
        position: relative;
        z-index: 80;
        overflow: visible;
    }

    .sidebar {
        z-index: 40;
    }

    .profile-menu {
        z-index: 90;
    }

    .profile-dropdown {
        left: auto;
        right: 0;
        top: 39px;
        width: max-content;
        min-width: 170px;
        max-width: min(220px, calc(100vw - 20px));
        z-index: 100;
    }

    .profile-summary {
        min-width: 0;
        padding: 10px 12px;
    }

    .profile-summary strong,
    .profile-summary span {
        overflow: hidden;
        max-width: 190px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-dropdown a {
        padding: 9px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
}
/* Compact mobile reminder dropdown */
@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    .header-reminders {
        z-index: 95;
    }

    .header-reminder-dropdown {
        left: auto;
        right: 0;
        top: 39px;
        width: 290px;
        min-width: 0;
        max-width: calc(100vw - 20px);
        border-radius: 7px;
        z-index: 110;
    }

    .header-reminder-row {
        gap: 8px;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        padding: 10px 11px;
    }

    .header-reminder-row.compact {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .header-reminder-icon {
        width: 30px;
        height: 28px;
    }

    .header-reminder-row strong {
        font-size: 13px;
    }

    .header-reminder-row small {
        margin-top: 2px;
        font-size: 11px;
        white-space: nowrap;
    }

    .header-reminder-row b {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .header-reminder-dropdown {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        right: -39px;
    }
}
/* Mobile sales document cards */
.mobile-sales-cards {
    display: none;
}

@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    .desktop-sales-list,
    #invoice-select-form > .invoice-bulk-actions {
        display: none !important;
    }

    .mobile-sales-cards {
        display: grid;
        gap: 10px;
    }

    .mobile-sales-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 8px;
        background: #203f4d;
        color: #ffffff;
    }

    .mobile-sales-summary span,
    .mobile-sales-summary strong {
        display: block;
    }

    .mobile-sales-summary span {
        color: #c9d8df;
        font-size: 11px;
    }

    .mobile-sales-summary strong {
        margin-top: 2px;
        font-size: 17px;
    }

    .mobile-sales-summary a {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 13px;
        border-radius: 6px;
        background: #64a3c0;
        color: #ffffff;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

    .mobile-sales-card {
        display: block;
        padding: 13px 14px;
        border: 1px solid #dbe4eb;
        border-left: 4px solid #28a2b9;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 3px 10px rgba(29, 55, 72, 0.05);
        color: #172b3a;
        text-decoration: none;
    }

    .mobile-sales-card.is-return {
        border-left-color: #dc3b35;
        background: #fffafa;
    }

    .mobile-sales-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
    }

    .mobile-document-type {
        color: #637888;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .mobile-document-status {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0 9px;
        border-radius: 999px;
        background: #e5f6f8;
        color: #087f91;
        font-size: 10px;
        font-weight: 800;
    }

    .mobile-document-status.invoice-closed,
    .mobile-document-status.invoice-paid {
        background: #dcf7e5;
        color: #167b42;
    }

    .mobile-document-status.quotation-rejected,
    .mobile-document-status.return-refunded {
        background: #fee4e2;
        color: #b42318;
    }

    .mobile-document-status.return-exchanged {
        background: #fff0d7;
        color: #a55b09;
    }

    .mobile-document-number {
        display: block;
        overflow-wrap: anywhere;
        color: #327d9f;
        font-size: 15px;
    }

    .mobile-document-customer {
        margin-top: 4px;
        color: #344b5d;
        font-size: 13px;
        font-weight: 700;
    }

    .mobile-sales-card-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #e6edf2;
    }

    .mobile-sales-card-meta span:last-child {
        text-align: right;
    }

    .mobile-sales-card-meta small,
    .mobile-sales-card-meta b {
        display: block;
    }

    .mobile-sales-card-meta small {
        color: #718392;
        font-size: 10px;
    }

    .mobile-sales-card-meta b {
        margin-top: 3px;
        font-size: 12px;
    }

    .mobile-sales-card-meta b.negative {
        color: #b42318;
    }

    .mobile-return-origin,
    .mobile-card-reminder {
        margin-top: 9px;
        padding: 7px 9px;
        border-radius: 5px;
        background: #f2f6f9;
        color: #5a7080;
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-card-open {
        display: block;
        margin-top: 10px;
        color: #3f86a8;
        font-size: 11px;
        font-weight: 800;
        text-align: right;
    }

    .mobile-sales-empty {
        padding: 28px 16px;
        border: 1px solid #dbe4eb;
        border-radius: 8px;
        background: #ffffff;
        text-align: center;
    }

    .mobile-sales-empty strong,
    .mobile-sales-empty span {
        display: block;
    }

    .mobile-sales-empty span {
        margin-top: 5px;
        color: #718392;
        font-size: 12px;
    }
}
/* Executive desktop dashboard */
@media (min-width: 1101px) {
    .executive-dashboard {
        display: block;
        padding: 18px 20px 28px;
        color: #182b3a;
    }

    .executive-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 16px;
        padding: 2px 2px 4px;
    }

    .executive-eyebrow,
    .executive-panel-head > div > span {
        display: block;
        color: #6f8291;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .executive-hero h1 {
        margin: 4px 0 2px;
        color: #172d3c;
        font-size: 26px;
        line-height: 1.15;
    }

    .executive-hero p {
        margin: 0;
        color: #70818e;
        font-size: 13px;
    }

    .executive-hero-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
    }

    .dashboard-period-filter {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 5px;
        border: 1px solid #d5e1e8;
        border-radius: 7px;
        background: #fff;
        box-shadow: 0 3px 10px rgba(24, 48, 63, .04);
    }

    .dashboard-period-filter select,
    .dashboard-period-filter input,
    .dashboard-period-filter button {
        min-height: 30px;
        border: 1px solid #d5e1e8;
        border-radius: 5px;
        background: #fff;
        color: #304754;
        font: inherit;
        font-size: 11px;
    }

    .dashboard-period-filter select,
    .dashboard-period-filter input {
        padding: 0 8px;
    }

    .dashboard-period-filter button {
        padding: 0 11px;
        border-color: #247f9d;
        background: #247f9d;
        color: #fff;
        font-weight: 800;
        cursor: pointer;
    }

    .dashboard-custom-dates {
        display: none;
        align-items: center;
        gap: 5px;
        color: #718491;
        font-size: 10px;
    }

    .dashboard-custom-dates.visible {
        display: flex;
    }

    .dashboard-custom-dates input {
        width: 125px;
    }

    .dashboard-period-label {
        max-width: 190px;
        white-space: nowrap;
    }

    .executive-hero-actions > span {
        color: #637785;
        font-size: 12px;
        font-weight: 700;
    }

    .executive-primary-action {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 0 16px;
        border-radius: 6px;
        background: #247f9d;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        transition: background .2s ease, transform .2s ease;
    }

    .executive-primary-action:hover {
        background: #1d6d88;
        transform: translateY(-1px);
    }

    .executive-kpi-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 12px;
    }

    .executive-finance-kpi-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 12px;
    }

    .executive-kpi {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-height: 108px;
        padding: 16px;
        border: 1px solid #dde6ec;
        border-radius: 7px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(24, 48, 63, .045);
        transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
        color: inherit;
        text-decoration: none;
    }

    .executive-kpi:hover {
        border-color: #b9ccd7;
        box-shadow: 0 8px 20px rgba(24, 48, 63, .08);
        transform: translateY(-2px);
    }

    .kpi-icon {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 900;
    }

    .kpi-sales .kpi-icon { background: #dff0f4; color: #197a92; }
    .kpi-payables .kpi-icon { background: #ffe8dc; color: #b45309; }
    .kpi-cash .kpi-icon { background: #ddf5e7; color: #168451; }
    .kpi-due .kpi-icon { background: #fff0d8; color: #bd6b08; }
    .kpi-orders .kpi-icon { background: #ebe7fa; color: #6647b7; }
    .kpi-costs .kpi-icon { background: #fff0e5; color: #b85c19; }
    .kpi-vat .kpi-icon { background: #e9edfb; color: #4b5eb2; font-size: 11px; }
    .kpi-profit .kpi-icon { background: #ddf5e7; color: #168451; }
    .kpi-profit-negative .kpi-icon { background: #fde8e7; color: #c63d35; }
    .kpi-profit-negative .kpi-copy strong,
    .kpi-profit-negative .kpi-copy small { color: #c63d35; }

    .kpi-copy span,
    .kpi-copy strong,
    .kpi-copy small {
        display: block;
    }

    .kpi-copy span {
        color: #6b7d89;
        font-size: 11px;
        font-weight: 700;
    }

    .kpi-copy strong {
        margin: 4px 0;
        color: #172d3c;
        font-size: 22px;
        line-height: 1;
    }

    .kpi-copy small {
        color: #84929c;
        font-size: 10px;
    }

    .kpi-copy small.trend-up { color: #168451; font-weight: 800; }
    .kpi-copy small.trend-down { color: #cc3f35; font-weight: 800; }

    .executive-main-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
        gap: 12px;
        margin-bottom: 12px;
    }

    .executive-secondary-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(260px, .8fr) minmax(280px, .95fr);
        gap: 12px;
        margin-bottom: 12px;
    }

    .executive-panel {
        min-width: 0;
        border: 1px solid #dde6ec;
        border-radius: 7px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(24, 48, 63, .04);
    }

    .executive-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px 10px;
    }

    .executive-panel-head h2 {
        margin: 3px 0 0;
        color: #1b3140;
        font-size: 15px;
    }

    .executive-panel-head > a,
    .text-action {
        color: #287e9e;
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
    }

    .chart-summary {
        text-align: right;
    }

    .chart-summary strong,
    .chart-summary span {
        display: block;
    }

    .chart-summary strong {
        color: #1b3140;
        font-size: 13px;
    }

    .chart-summary span {
        margin-top: 2px;
        color: #85939c;
        font-size: 9px;
    }

    .weekly-chart {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: end;
        gap: 12px;
        height: 205px;
        padding: 12px 20px 18px;
        border-top: 1px solid #edf1f4;
        background-image: linear-gradient(to bottom, rgba(220, 229, 234, .55) 1px, transparent 1px);
        background-size: 100% 25%;
    }

    .weekly-column {
        display: grid;
        grid-template-rows: 20px minmax(0, 1fr) 18px;
        align-items: end;
        height: 100%;
        text-align: center;
    }

    .weekly-value {
        overflow: hidden;
        color: #5d7381;
        font-size: 9px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .weekly-track {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .weekly-track span {
        display: block;
        width: min(34px, 65%);
        min-height: 5px;
        border-radius: 4px 4px 1px 1px;
        background: linear-gradient(180deg, #31a2aa 0%, #247f9d 100%);
        box-shadow: 0 5px 10px rgba(36, 127, 157, .16);
        transition: height .45s ease, filter .2s ease;
    }

    .weekly-column:hover .weekly-track span {
        filter: brightness(.9);
    }

    .weekly-column b {
        color: #758793;
        font-size: 10px;
    }

    .pipeline-list {
        display: grid;
        gap: 16px;
        padding: 14px 18px 18px;
        border-top: 1px solid #edf1f4;
    }

    .pipeline-item > div:first-child {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 6px;
        color: #506674;
        font-size: 11px;
        font-weight: 700;
    }

    .pipeline-item strong {
        color: #1b3140;
    }

    .pipeline-track,
    .product-performance-track {
        height: 6px;
        overflow: hidden;
        border-radius: 3px;
        background: #edf2f5;
    }

    .pipeline-track span,
    .product-performance-track span {
        display: block;
        height: 100%;
        min-width: 4px;
        border-radius: inherit;
    }

    .pipeline-quotation { background: #27a7b6; }
    .pipeline-order { background: #7652d6; }
    .pipeline-invoice { background: #2da95e; }

    .pipeline-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid #edf1f4;
        background: #f8fafb;
    }

    .pipeline-footer > div {
        padding: 12px 18px;
    }

    .pipeline-footer > div + div {
        border-left: 1px solid #e6ecef;
    }

    .pipeline-footer span,
    .pipeline-footer strong {
        display: block;
    }

    .pipeline-footer span {
        color: #758691;
        font-size: 9px;
    }

    .pipeline-footer strong {
        margin-top: 3px;
        color: #253b49;
        font-size: 12px;
    }

    .product-performance-list,
    .stock-alert-list,
    .executive-reminder-list {
        border-top: 1px solid #edf1f4;
    }

    .product-performance-list > a {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        color: inherit;
        text-decoration: none;
    }

    .product-performance-list > a + a,
    .stock-alert-list > a + a,
    .executive-reminder-list > a + a {
        border-top: 1px solid #edf1f4;
    }

    .product-rank {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 5px;
        background: #edf5f8;
        color: #287e9e;
        font-size: 10px;
        font-weight: 900;
    }

    .product-performance-copy > div:first-child {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 6px;
    }

    .product-performance-copy strong {
        overflow: hidden;
        color: #29404e;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-performance-copy b {
        color: #5f7481;
        font-size: 10px;
        white-space: nowrap;
    }

    .product-performance-track span {
        background: #3a98b4;
    }

    .attention-count {
        display: grid;
        place-items: center;
        min-width: 25px;
        height: 25px;
        border-radius: 13px;
        background: #fff0dc;
        color: #b56708;
        font-size: 11px;
        font-weight: 900;
    }

    .stock-alert-list > a {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        padding: 10px 16px;
        color: inherit;
        text-decoration: none;
    }

    .stock-alert-icon {
        display: grid;
        place-items: center;
        width: 27px;
        height: 27px;
        border-radius: 6px;
        background: #fff0dc;
        color: #b56708;
        font-size: 12px;
        font-weight: 900;
    }

    .stock-alert-list strong,
    .stock-alert-list span {
        display: block;
    }

    .stock-alert-list strong {
        overflow: hidden;
        color: #2b414e;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .stock-alert-list span {
        margin-top: 2px;
        color: #89969e;
        font-size: 9px;
    }

    .stock-alert-list b {
        color: #b56708;
        font-size: 12px;
    }

    .executive-reminder-list > a {
        display: grid;
        grid-template-columns: 43px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        color: inherit;
        text-decoration: none;
    }

    .executive-reminder-list > a > span {
        display: grid;
        place-items: center;
        min-height: 28px;
        border-radius: 5px;
        background: #e5f3f6;
        color: #287e9e;
        font-size: 9px;
        font-weight: 900;
    }

    .executive-reminder-list > a > span.reminder-late {
        background: #ffe7e4;
        color: #c0392f;
    }

    .executive-reminder-list strong,
    .executive-reminder-list small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .executive-reminder-list strong {
        color: #2b414e;
        font-size: 10px;
    }

    .executive-reminder-list small {
        margin-top: 2px;
        color: #89969e;
        font-size: 9px;
    }

    .executive-empty {
        display: grid;
        place-items: center;
        min-height: 150px;
        border-top: 1px solid #edf1f4;
        color: #85949d;
        font-size: 11px;
    }

    .success-empty {
        color: #3a8b61;
    }

    .recent-documents-panel {
        overflow: hidden;
    }

    .executive-table-wrap {
        overflow-x: auto;
        border-top: 1px solid #edf1f4;
    }

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

    .executive-table th,
    .executive-table td {
        height: 43px;
        padding: 0 14px;
        border-bottom: 1px solid #edf1f4;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .executive-table th {
        background: #f6f8fa;
        color: #607481;
        font-size: 10px;
        font-weight: 800;
    }

    .executive-table td {
        color: #536875;
        font-size: 11px;
    }

    .executive-table tbody tr {
        cursor: pointer;
        transition: background .15s ease;
    }

    .executive-table tbody tr:hover {
        background: #f2f7f9;
    }

    .executive-table td a {
        color: #267c9c;
        font-weight: 800;
        text-decoration: none;
    }

    .executive-table td strong {
        color: #243a48;
    }

    .executive-stage {
        display: inline-flex;
        align-items: center;
        min-height: 23px;
        padding: 0 9px;
        border-radius: 12px;
        font-size: 9px;
        font-weight: 800;
    }

    .stage-quotation { background: #ddf3f6; color: #147c8e; }
    .stage-sales_order { background: #ece7fb; color: #6541b5; }
    .stage-invoice { background: #e1f5e8; color: #197c49; }
}

@media (min-width: 1101px) and (max-width: 1380px) {
    .executive-secondary-grid {
        grid-template-columns: 1.15fr .85fr;
    }

    .reminders-panel {
        grid-column: 1 / -1;
    }

    .executive-reminder-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .executive-reminder-list > a:nth-child(2) {
        border-top: 0;
        border-left: 1px solid #edf1f4;
    }
}


/* Dashboard view modes */
.dashboard-view-switcher {
    overflow: hidden;
}

.dashboard-view-switcher .dashboard-view-button {
    display: grid;
    place-items: center;
    width: 47px;
    min-width: 47px;
    height: 42px;
    padding: 0;
    border: 0;
    border-right: 1px solid #d3dde4;
    border-radius: 0;
    background: #e7edf2;
    color: #183847;
    font-size: 19px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.dashboard-view-switcher .dashboard-view-button:last-child {
    border-right: 0;
}

.dashboard-view-switcher .dashboard-view-button:hover {
    background: #dbe7ed;
}

.dashboard-view-switcher .dashboard-view-button.selected {
    background: #d7e9f1;
    color: #176f91;
    box-shadow: inset 0 -3px 0 #2486a4;
}

.mode-finance-only {
    display: none;
}

@media (min-width: 1101px) {
    .executive-dashboard.dashboard-mode-analytics,
    .executive-dashboard.dashboard-mode-operations,
    .executive-dashboard.dashboard-mode-finance {
        display: flex;
        flex-direction: column;
    }

    .executive-dashboard.dashboard-mode-analytics .executive-hero {
        order: 1;
        padding: 14px 18px;
        border: 1px solid #cfe1e8;
        border-radius: 7px;
        background: linear-gradient(90deg, #eef8fa 0%, #f7f5fc 100%);
    }

    .dashboard-mode-analytics .executive-main-grid {
        order: 2;
        grid-template-columns: minmax(0, 2fr) minmax(300px, .75fr);
    }

    .dashboard-mode-analytics .executive-kpi-grid {
        order: 3;
    }

    .dashboard-mode-analytics .executive-finance-kpi-grid {
        order: 3;
    }

    .dashboard-mode-analytics .executive-secondary-grid {
        order: 4;
        grid-template-columns: 1fr;
    }

    .dashboard-mode-analytics .attention-panel,
    .dashboard-mode-analytics .reminders-panel {
        display: none;
    }

    .dashboard-mode-analytics .recent-documents-panel {
        order: 5;
    }

    .dashboard-mode-analytics .weekly-chart {
        height: 260px;
    }

    .dashboard-mode-analytics .weekly-track span {
        background: linear-gradient(180deg, #7a59d1 0%, #268ba1 100%);
    }

    .dashboard-mode-analytics .product-performance-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-mode-analytics .product-performance-list > a:nth-child(2) {
        border-top: 0;
        border-left: 1px solid #edf1f4;
    }

    .executive-dashboard.dashboard-mode-operations .executive-hero {
        order: 1;
    }

    .dashboard-mode-operations .executive-kpi-grid {
        order: 2;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-mode-operations .executive-kpi {
        min-height: 88px;
        padding: 12px 14px;
    }

    .dashboard-mode-operations .executive-finance-kpi-grid {
        order: 2;
    }

    .dashboard-mode-operations .recent-documents-panel {
        order: 3;
        margin-bottom: 12px;
        border-top: 3px solid #2a8ca7;
    }

    .dashboard-mode-operations .executive-secondary-grid {
        order: 4;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-mode-operations .executive-main-grid {
        order: 5;
        grid-template-columns: 1fr;
    }

    .dashboard-mode-operations .sales-performance-panel {
        display: none;
    }

    .dashboard-mode-operations .pipeline-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-mode-operations .pipeline-footer {
        max-width: 520px;
    }

    .executive-dashboard.dashboard-mode-finance .executive-hero {
        order: 1;
        padding: 14px 18px;
        border-left: 4px solid #1b8154;
        border-radius: 6px;
        background: #f3faf6;
    }

    .dashboard-mode-finance .executive-kpi-grid {
        order: 2;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-mode-finance .executive-finance-kpi-grid {
        order: 3;
    }

    .dashboard-mode-finance .kpi-orders {
        display: none;
    }

    .dashboard-mode-finance .dashboard-finance-grid {
        display: grid;
        order: 3;
        grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
        gap: 12px;
        margin-bottom: 12px;
    }

    .dashboard-mode-finance .executive-main-grid,
    .dashboard-mode-finance .executive-secondary-grid {
        display: none;
    }

    .dashboard-mode-finance .recent-documents-panel {
        order: 4;
    }

    .payment-methods-panel .executive-panel-head > strong {
        color: #18784d;
        font-size: 14px;
    }

    .payment-method-list,
    .debtor-list {
        border-top: 1px solid #edf1f4;
    }

    .payment-method-item {
        padding: 12px 18px;
    }

    .payment-method-item + .payment-method-item {
        border-top: 1px solid #edf1f4;
    }

    .payment-method-item > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 7px;
    }

    .payment-method-item span {
        color: #526975;
        font-size: 11px;
        font-weight: 700;
    }

    .payment-method-item strong {
        color: #1d3542;
        font-size: 11px;
    }

    .payment-method-track {
        height: 6px;
        overflow: hidden;
        border-radius: 3px;
        background: #edf2f4;
    }

    .payment-method-track span {
        display: block;
        height: 100%;
        min-width: 4px;
        border-radius: inherit;
        background: linear-gradient(90deg, #208f62, #36aa8b);
    }

    .debtor-list > a {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 47px;
        padding: 0 18px;
        color: inherit;
        text-decoration: none;
    }

    .debtor-list > a + a {
        border-top: 1px solid #edf1f4;
    }

    .debtor-list > a > span {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #e2f2e9;
        color: #197c4e;
        font-size: 10px;
        font-weight: 900;
    }

    .debtor-list > a > strong {
        overflow: hidden;
        color: #29404d;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .debtor-list > a > b {
        color: #ba6810;
        font-size: 11px;
        white-space: nowrap;
    }
}

@media (max-width: 1100px) {
    .dashboard-view-switcher {
        display: none !important;
    }
}



/* Mobile sales smart flow */
@media (max-width: 700px) {
    .mobile-smart-flow { padding: 0 12px 104px; }
    .mobile-sales-page .mobile-sales-hero { margin: 10px 12px; padding: 14px 16px; }
    .mobile-sales-page .mobile-sales-hero h1 { font-size: 22px; line-height: 1.15; }
    .mobile-smart-flow .mobile-card { margin: 10px 0; padding: 14px; border-radius: 8px; }
    .mobile-smart-flow .mobile-card h2 { font-size: 18px; margin-bottom: 12px; }
    .mobile-smart-flow label { font-size: 13px; margin-bottom: 5px; }
    .mobile-smart-flow input,
    .mobile-smart-flow select,
    .mobile-smart-flow textarea { min-height: 44px; padding: 9px 11px; font-size: 15px; }
    .mobile-smart-flow .mobile-line { padding: 12px 0; }
    .mobile-smart-flow .mobile-three-fields { grid-template-columns: 72px minmax(90px, 1fr) minmax(110px, 1.15fr); gap: 8px; }
    .mobile-payment-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px; background: #fff7e8; border: 1px solid #f3d39a; border-radius: 7px; }
    .mobile-payment-summary strong { color: #a95114; font-size: 20px; }
    .mobile-payment-note { color: #667085; font-size: 12px; margin: 8px 0 0; }
    .mobile-smart-flow .mobile-total-bar { left: 12px; right: 12px; bottom: 69px; border-radius: 8px 8px 0 0; }
    .mobile-smart-flow .mobile-submit-bar { padding: 9px 12px 14px; }
    .mobile-smart-flow .mobile-submit-bar .button { min-height: 48px; }

    .mobile-result-page { padding: 12px 12px 40px; background: #f4f7fa; min-height: 100vh; }
    .mobile-result-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 16px; color: #fff; background: #203f4d; border-radius: 8px; }
    .mobile-result-head h1 { margin: 2px 0 0; font-size: 19px; overflow-wrap: anywhere; }
    .mobile-result-head span { font-size: 12px; opacity: .8; }
    .mobile-result-back { grid-row: 1 / span 2; color: #183643; background: #fff; padding: 9px 12px; border-radius: 6px; font-weight: 700; }
    .mobile-result-status { grid-column: 2; justify-self: start; padding: 5px 9px; border-radius: 999px; color: #155e3a; background: #d9f5e5; opacity: 1 !important; font-weight: 700; }
    .mobile-result-success { margin-top: 10px; padding: 11px 13px; color: #146c43; background: #e4f8ed; border-radius: 7px; font-weight: 700; }
    .mobile-result-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 10px 0; }
    .mobile-result-summary > div { min-width: 0; padding: 12px; background: #fff; border: 1px solid #dfe7ee; border-radius: 8px; }
    .mobile-result-summary span { display: block; color: #667085; font-size: 12px; margin-bottom: 5px; }
    .mobile-result-summary strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
    .mobile-result-summary .due strong { color: #b45309; }
    .mobile-result-summary .settled strong { color: #15803d; }
    .mobile-result-items,
    .mobile-result-reminder { padding: 14px; background: #fff; border: 1px solid #dfe7ee; border-radius: 8px; }
    .mobile-result-items h2,
    .mobile-result-reminder h2 { margin: 0 0 12px; font-size: 18px; }
    .mobile-result-items article { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #edf1f5; }
    .mobile-result-items article:first-of-type { border-top: 0; }
    .mobile-result-items article > div { min-width: 0; }
    .mobile-result-items article > div:last-child { flex: 0 0 auto; text-align: right; }
    .mobile-result-items article span { display: block; color: #667085; font-size: 12px; margin-top: 3px; }
    .mobile-result-notes { margin-top: 10px; padding: 11px; background: #f7f9fb; border-radius: 7px; }
    .mobile-result-notes span { color: #667085; font-size: 12px; font-weight: 700; }
    .mobile-result-notes p { margin: 5px 0 0; overflow-wrap: anywhere; }
    .mobile-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
    .mobile-result-actions .button { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px; font-size: 13px; text-align: center; }
    .mobile-action-primary { grid-column: 1 / -1; }
    .mobile-action-whatsapp { background: #16a34a !important; }
    .mobile-action-reminder { color: #344054 !important; background: #e4eaf0 !important; }
    .mobile-result-reminder { margin-top: 10px; scroll-margin-top: 12px; }
    .mobile-result-reminder label { display: block; margin: 10px 0 5px; font-size: 13px; font-weight: 700; }
    .mobile-result-reminder input,
    .mobile-result-reminder textarea { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #ccd7e1; border-radius: 7px; font: inherit; }
    .mobile-telegram-check { display: flex !important; align-items: center; gap: 9px; padding: 10px; background: #eff7ff; border-radius: 7px; }
    .mobile-telegram-check input { width: 18px; min-height: 18px; }
}

/* Mobile section toolbar visibility */
@media (max-width: 700px) {
    body.section-mobile_sales .main > .topbar {
        display: none;
    }

    body.section-invoices .main > .topbar .page-actions,
    body.section-reminders .main > .topbar .page-actions {
        display: none;
    }

    body.section-reminders .main > .topbar {
        padding: 10px 12px;
    }

    body.section-reminders .main > .topbar .search-tools,
    body.section-reminders .reminder-search-form {
        width: 100%;
    }

    body.section-reminders .reminder-search-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    body.section-reminders .reminder-search-form .search-box {
        width: 100%;
        min-width: 0;
    }
}
/* Mobile Sales navigation is available on phones only. */
.mobile-only-link {
    display: none !important;
}

@media (max-width: 700px) {
    .sidebar .nav a.mobile-only-link {
        display: flex !important;
    }
}

/* Dynamic company identity on the authentication screen. */
.login-card::after {
    display: none;
}

.login-brand img {
    padding: 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.login-brand-watermark {
    position: absolute;
    z-index: 0;
    right: 22px;
    bottom: 18px;
    width: 290px;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.065;
    pointer-events: none;
    overflow: hidden;
}

.login-brand-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-card > :not(.login-brand-watermark) {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .login-brand-watermark {
        right: 8px;
        bottom: 10px;
        width: 210px;
        height: 210px;
        opacity: 0.045;
    }
}
/* Purchase and vendor module */
.purchase-page,
.vendor-form-page {
    display: grid;
    gap: 18px;
}

.purchase-page-head,
.vendor-form-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.purchase-page-head h1,
.vendor-form-top h1 {
    margin: 3px 0 5px;
    color: #173247;
    font-size: 26px;
}

.purchase-page-head p { margin: 0; color: #6b7f90; }
.purchase-eyebrow { color: #3187aa; font-size: 12px; font-weight: 800; letter-spacing: .08em; }

.purchase-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
}

.purchase-kpi {
    min-height: 92px;
    padding: 14px 16px;
    border: 1px solid #d9e4eb;
    border-top: 4px solid #5f9bb6;
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.purchase-kpi span { color: #637786; font-size: 13px; }
.purchase-kpi strong { margin-top: 5px; color: #173247; font-size: 23px; }
.purchase-kpi.primary { background: #397d9d; border-color: #397d9d; }
.purchase-kpi.primary span, .purchase-kpi.primary strong { color: #fff; }
.purchase-kpi.danger { border-top-color: #e15b64; }
.purchase-kpi.metric { border-top-color: #27a77d; }

.purchase-list-tools { display: flex; justify-content: flex-end; }
.purchase-list-tools form { display: flex; width: min(520px, 100%); gap: 8px; }
.purchase-list-tools input { flex: 1; min-width: 0; border: 1px solid #cbdbe5; border-radius: 6px; padding: 10px 12px; }
.purchase-table-card,
.purchase-order-form,
.purchase-document-card,
.vendor-form-card { background: #fff; border: 1px solid #dbe5eb; border-radius: 9px; box-shadow: 0 5px 18px rgba(29, 57, 77, .05); overflow: hidden; }

.purchase-table { width: 100%; border-collapse: collapse; }
.purchase-table th { padding: 13px 15px; text-align: left; color: #536778; background: #f3f7f9; border-bottom: 1px solid #dbe5eb; font-size: 13px; }
.purchase-table td { padding: 14px 15px; color: #334b5b; border-bottom: 1px solid #e5edf1; }
.purchase-table tbody tr:hover { background: #f8fbfc; }
.purchase-table .purchase-clickable-row { cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.purchase-table .purchase-clickable-row:hover { background: #edf7fb; box-shadow: inset 4px 0 #2788aa; }
.purchase-table .purchase-clickable-row:focus-visible { outline: 2px solid #2788aa; outline-offset: -2px; background: #edf7fb; }
.purchase-table .purchase-clickable-row:active { background: #e2f1f7; }
.purchase-reference, .vendor-name-link { color: #187da6; font-weight: 800; }
.vendors-table td:first-child { display: grid; gap: 3px; }
.vendors-table td:first-child small { color: #81919d; }
.purchase-empty { padding: 42px !important; text-align: center; color: #748795 !important; }

.purchase-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; background: #e8eef2; color: #526675; font-size: 12px; font-weight: 800; white-space: nowrap; }
.purchase-status.purchase_order { background: #d8f5e4; color: #148347; }
.purchase-status.billed { background: #dcecfb; color: #216d9a; }
.purchase-status.sent { background: #fff1cf; color: #9b6810; }
.purchase-status.cancelled { background: #fde4e6; color: #b43d48; }

.vendor-form-top { background: #fff; border: 1px solid #dbe5eb; border-radius: 8px; padding: 12px 16px; }
.vendor-breadcrumb { color: #3a82a5; font-weight: 700; }
.vendor-form-top h1 { font-size: 19px; }
.vendor-metrics { display: flex; border: 1px solid #d7e2e9; border-radius: 7px; overflow: hidden; }
.vendor-metrics > div, .vendor-metrics > a { min-width: 130px; padding: 9px 12px; border-right: 1px solid #d7e2e9; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 7px; color: inherit; text-decoration: none; }
.vendor-metrics > div:last-child, .vendor-metrics > a:last-child { border-right: 0; }
.vendor-metrics > a { cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.vendor-metrics > a:hover, .vendor-metrics > a:focus-visible { background: #edf7fb; box-shadow: inset 0 -3px #2788aa; outline: none; }
.vendor-metrics .metric-icon { grid-row: 1 / 3; align-self: center; color: #4a93b0; font-size: 24px; font-weight: 800; }
.vendor-metrics small { color: #607482; }
.vendor-metrics strong { color: #2d7e9f; font-size: 13px; }
.purchase-filter-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0; padding:11px 14px; border-left:4px solid #2788aa; border-radius:6px; background:#eaf5fa; color:#3e5d6d; }
.purchase-filter-banner a { color:#187da6; font-weight:800; white-space:nowrap; }

.vendor-form-card { padding: 26px 38px; overflow: visible; }
.vendor-type-choice { display: flex; gap: 22px; margin-bottom: 20px; font-size: 16px; font-weight: 700; }
.vendor-type-choice label { display: flex; align-items: center; gap: 8px; }
.vendor-main-name { width: 100%; border: 0; border-bottom: 1px solid #cbd8e0; padding: 5px 3px 8px; color: #173247; font-size: 30px; }
.vendor-company-name { width: 100%; border: 0; border-bottom: 1px solid #e0e8ed; padding: 12px 3px; color: #536b7b; }
.vendor-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin-top: 34px; }
.vendor-fields-grid label,
.vendor-tabs-data label,
.purchase-form-grid label,
.purchase-notes { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; margin-bottom: 12px; color: #344d5d; font-weight: 700; }
.vendor-fields-grid input,
.vendor-tabs-data input,
.vendor-tabs-data textarea { min-width: 0; border: 0; border-bottom: 1px solid #d7e2e8; padding: 9px 5px; background: transparent; }
.vendor-city-row { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 10px; margin: 0 0 12px 162px; }
.vendor-tabs-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0 22px; padding-top: 22px; border-top: 1px solid #dce5ea; }
.vendor-tabs-data label { display: flex; flex-direction: column; align-items: stretch; }
.vendor-tabs-data textarea { border: 1px solid #d7e2e8; border-radius: 6px; }

.purchase-order-form { padding: 24px; overflow: visible; }
.purchase-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.purchase-form-grid label { grid-template-columns: 130px 1fr; }
.purchase-form-grid input, .purchase-form-grid select, .purchase-line input, .purchase-line select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cedce4; border-radius: 5px; background: #fff; }
.purchase-items-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 10px; }
.purchase-items-head h2 { margin: 0; color: #244457; font-size: 18px; }
.purchase-line { display: grid; grid-template-columns: 1.1fr 1.8fr .55fr .7fr .65fr 34px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #e3ebef; }
.purchase-line-total { text-align: right; color: #28526a; }
.purchase-remove-line { border: 0; background: #fce5e7; color: #b53a46; border-radius: 5px; font-size: 20px; cursor: pointer; }
.purchase-notes { margin-top: 18px; align-items: start; }
.purchase-notes textarea { border: 1px solid #cedce4; border-radius: 5px; padding: 9px; }
.purchase-form-total, .purchase-document-total { display: flex; justify-content: flex-end; gap: 30px; padding: 18px 4px; color: #385568; font-size: 19px; }
.purchase-form-total strong, .purchase-document-total strong { color: #157e9f; }

.purchase-document-card { padding-bottom: 20px; }
.purchase-document-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 22px; }
.purchase-document-meta div { display: grid; gap: 5px; }
.purchase-document-meta span { color: #738694; font-size: 12px; }
.purchase-document-meta strong { color: #254457; }
.purchase-document-total { padding-right: 24px; }
.purchase-document-notes { margin: 0 22px; padding: 15px; background: #f5f8fa; border-radius: 6px; color: #445d6d; }

@media (max-width: 1000px) {
    .purchase-kpis { grid-template-columns: repeat(2, 1fr); }
    .vendor-form-top { align-items: flex-start; flex-direction: column; }
    .vendor-metrics { width: 100%; overflow-x: auto; }
    .vendor-metrics > div { min-width: 120px; }
}

@media (max-width: 700px) {
    .purchase-page-head { align-items: flex-start; flex-direction: column; }
    .purchase-kpis { grid-template-columns: 1fr 1fr; }
    .purchase-table-card { overflow-x: auto; }
    .purchase-table { min-width: 760px; }
    .vendor-form-card { padding: 20px 16px; }
    .vendor-fields-grid, .vendor-tabs-data, .purchase-form-grid { grid-template-columns: 1fr; gap: 10px; }
    .vendor-fields-grid label, .purchase-form-grid label { grid-template-columns: 110px 1fr; }
    .vendor-city-row { margin-left: 122px; }
    .purchase-line { grid-template-columns: 1fr 1fr; padding: 12px 0; }
    .purchase-document-meta { grid-template-columns: 1fr 1fr; }
}
/* Product vendor price matrix */
.product-vendors-section {
    margin: 8px 0 18px;
    border: 1px solid #d8e4eb;
    border-radius: 8px;
    background: #f8fbfc;
    overflow: hidden;
}

.product-vendors-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    border-bottom: 1px solid #d8e4eb;
    background: #eef6f9;
}

.product-vendors-heading > div { display: grid; gap: 3px; }
.product-vendors-heading strong { color: #23465a; font-size: 15px; }
.product-vendors-heading span { color: #6e8290; font-size: 12px; }
.product-vendor-table { padding: 0 15px 12px; }
.product-vendor-header,
.product-vendor-row {
    display: grid;
    grid-template-columns: 100px minmax(220px, 1fr) minmax(150px, .6fr) 38px;
    gap: 10px;
    align-items: center;
}

.product-vendor-header { padding: 11px 5px 7px; color: #607786; font-size: 12px; font-weight: 800; }
.product-vendor-row { padding: 8px 5px; border-top: 1px solid #e0e9ee; }
.product-vendor-row select,
.product-vendor-row input[type="number"] { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cbdbe4; border-radius: 5px; background: #fff; }
.active-vendor-choice { display: flex; align-items: center; gap: 7px; color: #536c7b; font-size: 12px; font-weight: 800; cursor: pointer; }
.active-vendor-choice input { accent-color: #18956b; width: 17px; height: 17px; }
.active-vendor-choice input:checked + span { color: #16855f; }
.product-vendor-remove { width: 32px; height: 32px; border: 0; border-radius: 5px; background: #fbe4e6; color: #b83844; font-size: 20px; cursor: pointer; }
.product-vendor-remove:hover { background: #f7cfd3; }

@media (max-width: 700px) {
    .product-vendors-heading { align-items: flex-start; flex-direction: column; }
    .product-vendor-header { display: none; }
    .product-vendor-row { grid-template-columns: 1fr 38px; padding: 13px 0; }
    .product-vendor-row .active-vendor-choice { grid-column: 1 / 2; }
    .product-vendor-row select, .product-vendor-row input[type="number"] { grid-column: 1 / 2; }
    .product-vendor-remove { grid-column: 2; grid-row: 1; }
}
/* Purchase document workflow */
.purchase-workflow-bar {
    display: grid;
    gap: 15px;
    padding: 15px 18px;
    border: 1px solid #d8e4eb;
    border-radius: 8px;
    background: #fff;
}

.purchase-workflow-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.purchase-workflow-actions form { margin: 0; }
.purchase-confirm-button { background: #2b829f; }
.purchase-receive-button { background: #168b64; }
.purchase-cancel-button { color: #b63b46; border-color: #edc5c9; background: #fff7f7; }
.purchase-workflow-steps { display: flex; align-items: center; width: min(720px, 100%); }
.purchase-workflow-steps span { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; padding: 6px 9px; border: 1px solid #cfdae1; border-radius: 999px; color: #71838f; background: #f5f8fa; font-size: 11px; font-weight: 800; }
.purchase-workflow-steps span.done { color: #fff; border-color: #26916d; background: #26916d; }
.purchase-workflow-steps i { flex: 1; min-width: 12px; height: 2px; background: #d5e0e6; }
.purchase-status.received { color: #116f50; background: #cef1e1; }

@media (max-width: 700px) {
    .purchase-workflow-actions { align-items: stretch; flex-direction: column; }
    .purchase-workflow-actions form, .purchase-workflow-actions .button { width: 100%; }
    .purchase-workflow-steps { overflow-x: auto; padding-bottom: 4px; }
    .purchase-workflow-steps span { min-width: 68px; }
}
.purchase-status.partial { color: #986315; background: #fff0c9; }
.purchase-workflow-steps span.partial { color: #8d5b10; border-color: #efbd62; background: #fff0c9; }
.purchase-receipt-card { padding: 22px; border: 1px solid #d8e4eb; border-radius: 9px; background: #fff; }
.purchase-receipt-help { display: grid; gap: 4px; margin-bottom: 18px; padding: 13px 15px; border-left: 4px solid #26916d; background: #edf9f4; color: #476658; }
.purchase-receipt-help strong { color: #167451; }
.purchase-receipt-table input { width: 130px; padding: 9px 10px; border: 1px solid #b9cfda; border-radius: 5px; font-weight: 700; }
.purchase-receipt-notes { display: grid; gap: 7px; margin: 20px 0; color: #344d5d; font-weight: 700; }
.purchase-receipt-notes textarea { padding: 10px; border: 1px solid #cbdbe4; border-radius: 6px; }
@media (max-width:700px){.purchase-receipt-table-wrap{overflow-x:auto}.purchase-receipt-table{min-width:720px}}
.purchase-status-link:hover { filter: brightness(.95); text-decoration: underline; }
.purchase-email-button { background:#2d6f9f; }
.purchase-whatsapp-button { background:#159b62; }
/* Accounting core */
.accounting-page-actions,.accounting-page-actions .action-row,.journal-actions,.reverse-form{display:flex;align-items:center;gap:12px}.accounting-page-actions{justify-content:space-between}.eyebrow{color:#2488a8;font-size:12px;font-weight:800;letter-spacing:1.2px}.accounting-alert{border:1px solid;border-radius:10px;margin:14px 0;padding:13px 16px;font-weight:700}.accounting-alert.success{background:#eafbf2;border-color:#9be5bb;color:#08763b}.accounting-alert.error{background:#fff1f2;border-color:#ffb4bd;color:#a52233}.accounting-table-wrap{overflow:auto}.accounting-data-table{min-width:900px}.clickable-row{cursor:pointer}.clickable-row:hover{background:#f4f9fc}.journal-status{border-radius:999px;display:inline-flex;font-size:12px;font-weight:800;padding:6px 11px;text-transform:capitalize}.journal-status.draft{background:#e9eef5;color:#53657a}.journal-status.pending{background:#fff4cf;color:#8a6500}.journal-status.posted{background:#dff8e8;color:#08763b}.journal-status.reversed{background:#e7e0ff;color:#573aaa}.journal-status.cancelled{background:#ffe5e8;color:#a52233}.accounting-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.accounting-wide{grid-column:1/-1}.accounting-lines-card{margin-top:18px}.accounting-lines-card .section-heading{display:flex;align-items:center;justify-content:space-between}.accounting-entry-lines{min-width:1500px}.accounting-entry-lines select,.accounting-entry-lines input{min-width:130px;width:100%}.accounting-entry-lines td:first-child select{min-width:230px}.line-remove{background:#ffe5e8;border:0;border-radius:8px;color:#a52233;cursor:pointer;font-size:20px;height:34px;width:34px}.accounting-entry-lines tfoot th{background:#f0f6f9}.accounting-entry-lines .unbalanced{color:#b42333}.accounting-document-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:18px}.accounting-document-meta span{color:#718096;display:block;font-size:13px;margin-bottom:5px}.journal-actions{margin-top:18px;flex-wrap:wrap}.journal-actions form{margin:0}.reverse-form{margin-left:auto}.reverse-form input{min-height:42px}.button.danger{background:#a92e3b;color:#fff}@media(max-width:900px){.accounting-page-actions{align-items:flex-start;flex-direction:column}.accounting-form-grid,.accounting-document-meta{grid-template-columns:1fr}.reverse-form{align-items:stretch;flex-direction:column;margin-left:0;width:100%}}
.profit-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}.profit-summary-grid .report-card small{color:#758392}.profit-highlight{border-color:#8fcbdc;background:#f3fbfd}.profit-positive{border-color:#8ed6aa;background:#effbf4}.profit-negative{border-color:#efa4ad;background:#fff2f3}.profit-positive strong,.profit-text-positive{color:#08763b}.profit-negative strong,.profit-text-negative{color:#ae2536}.profit-statement{margin:18px 0}.profit-statement-line{display:flex;justify-content:space-between;padding:11px 4px;border-bottom:1px solid #edf0f3}.profit-statement-line.deduction{color:#7b4650}.profit-statement-line.subtotal{font-weight:800;border-bottom:2px solid #b7c8d2}.profit-statement-line.total{font-size:19px;font-weight:900;border-bottom:0;padding-top:17px}@media(max-width:850px){.profit-summary-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.profit-summary-grid{grid-template-columns:1fr}}
.finance-snapshot{margin:18px 0 24px}.finance-snapshot-head{align-items:center;background:linear-gradient(120deg,#173b4b,#236b80);border-radius:14px;color:#fff;display:flex;justify-content:space-between;margin-bottom:14px;padding:20px 22px}.finance-snapshot-head h2{font-size:22px;margin:4px 0}.finance-snapshot-head p{margin:0;opacity:.72}.finance-snapshot-head .eyebrow{color:#8cdded}.finance-snapshot-head .button{background:#fff;color:#17556b}.finance-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.finance-kpi{align-items:center;background:#fff;border:1px solid #dfe7ed;border-left:5px solid;border-radius:12px;display:flex;gap:14px;min-height:112px;padding:17px}.finance-kpi-icon{align-items:center;border-radius:12px;display:flex;font-size:21px;font-weight:900;height:46px;justify-content:center;min-width:46px}.finance-kpi span,.finance-quick-strip span{color:#6a7885;display:block;font-size:13px;margin-bottom:6px}.finance-kpi strong{color:#20313c;display:block;font-size:21px}.finance-kpi strong small{font-size:11px}.finance-kpi em{color:#83909b;display:block;font-size:11px;font-style:normal;margin-top:6px}.finance-kpi.sales{border-left-color:#298db1}.finance-kpi.sales .finance-kpi-icon{background:#e3f4fa;color:#217b9c}.finance-kpi.tax{border-left-color:#7e67c7}.finance-kpi.tax .finance-kpi-icon{background:#eee9ff;color:#684db7}.finance-kpi.cost{border-left-color:#e49a2f}.finance-kpi.cost .finance-kpi-icon{background:#fff2dd;color:#b97919}.finance-kpi.expenses{border-left-color:#df6672}.finance-kpi.expenses .finance-kpi-icon{background:#ffe9eb;color:#b93d4a}.finance-kpi.gross-profit{border-left-color:#34a486}.finance-kpi.gross-profit .finance-kpi-icon{background:#e1f7ef;color:#218067}.finance-kpi.net-profit{background:linear-gradient(135deg,#eafaf0,#fff);border-color:#8fd3a7}.finance-kpi.net-profit .finance-kpi-icon{background:#2c9b5a;color:#fff}.finance-kpi.net-profit strong{color:#16723d}.finance-kpi.net-profit.loss{background:linear-gradient(135deg,#fff0f1,#fff);border-color:#e69aa3}.finance-kpi.net-profit.loss .finance-kpi-icon{background:#bc3b49}.finance-kpi.net-profit.loss strong{color:#a52d3a}.finance-quick-strip{background:#fff;border:1px solid #dfe7ed;border-radius:12px;display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px}.finance-quick-strip>div{padding:17px 20px}.finance-quick-strip>div+div{border-left:1px solid #e8edf1}.finance-quick-strip strong{color:#263945;display:block;font-size:18px}.finance-quick-strip small{color:#8a959e;display:block;font-size:11px;margin-top:6px}.finance-progress{background:#e5edf1;border-radius:10px;height:5px;margin-top:10px;overflow:hidden}.finance-progress i{background:#2c9b72;display:block;height:100%}@media(max-width:950px){.finance-kpi-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.finance-snapshot-head{align-items:flex-start;flex-direction:column;gap:14px}.finance-kpi-grid,.finance-quick-strip{grid-template-columns:1fr}.finance-quick-strip>div+div{border-left:0;border-top:1px solid #e8edf1}}
.finance-snapshot-head .action-row{display:flex;gap:9px}.finance-snapshot-head .finance-expense-button{background:#3bb47a;color:#fff}.expense-help-strip{align-items:center;background:#eaf7f2;border:1px solid #b7e2cf;border-radius:12px;color:#2d6650;display:flex;gap:10px;margin:15px 0;padding:13px 18px}.expense-help-strip span{align-items:center;background:#2e9a6d;border-radius:50%;color:#fff;display:flex;font-weight:800;height:27px;justify-content:center;width:27px}.expense-help-strip i{background:#acd7c5;flex:1;height:2px}.simple-expense-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.simple-expense-grid .field{display:grid;gap:7px}.simple-expense-grid label{font-weight:700}.simple-expense-grid label small{color:#89949d;font-weight:400}.simple-expense-grid input,.simple-expense-grid select,.simple-expense-grid textarea{border:1px solid #cad6de;border-radius:8px;font:inherit;padding:11px;width:100%}.expense-description{grid-column:span 2}.money-input{align-items:center;display:flex;position:relative}.money-input span{color:#5f6d78;font-weight:800;position:absolute;right:12px}.money-input input{padding-right:55px}.expense-total-card{align-items:center;background:linear-gradient(120deg,#183e4c,#246d7d);border-radius:13px;color:#fff;display:flex;gap:25px;justify-content:flex-end;margin:16px 0;padding:18px 24px}.expense-total-card div{min-width:145px}.expense-total-card span{display:block;font-size:12px;opacity:.7}.expense-total-card strong{display:block;font-size:19px;margin-top:5px}.expense-total-card .grand strong{color:#8df0bd;font-size:23px}.expense-total-card b{opacity:.45}.expense-post-button{background:#249d68}@media(max-width:850px){.simple-expense-grid{grid-template-columns:1fr 1fr}.expense-description{grid-column:1/-1}}@media(max-width:600px){.expense-help-strip{align-items:flex-start;flex-direction:column}.expense-help-strip i{display:none}.simple-expense-grid{grid-template-columns:1fr}.expense-description{grid-column:auto}.expense-total-card{align-items:stretch;flex-direction:column;gap:10px}.expense-total-card b{display:none}.finance-snapshot-head .action-row{align-items:stretch;flex-direction:column;width:100%}}
.finance-data-link,.finance-quick-link{color:inherit;text-decoration:none}.finance-data-link{cursor:pointer;position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.finance-data-link::after,.finance-quick-link::after{content:'›';color:#2788a6;font-size:24px;font-weight:800;opacity:0;position:absolute;right:16px;top:50%;transform:translate(-5px,-50%);transition:opacity .18s ease,transform .18s ease}.finance-data-link:hover,.finance-data-link:focus-visible{box-shadow:0 9px 24px rgba(25,65,82,.13);outline:0;transform:translateY(-3px)}.finance-data-link:hover::after,.finance-data-link:focus-visible::after,.finance-quick-link:hover::after,.finance-quick-link:focus-visible::after{opacity:1;transform:translate(0,-50%)}.finance-quick-strip>.finance-quick-link{display:block;padding:17px 20px;position:relative;transition:background .18s ease}.finance-quick-strip>.finance-quick-link+.finance-quick-link{border-left:1px solid #e8edf1}.finance-quick-link:hover,.finance-quick-link:focus-visible{background:#f3f9fb;outline:0}.report-anchor{scroll-margin-top:95px}.report-anchor:target{animation:report-focus 1.4s ease}@keyframes report-focus{0%,100%{box-shadow:0 0 0 0 rgba(40,142,174,0)}35%{box-shadow:0 0 0 5px rgba(40,142,174,.22)}}@media(max-width:650px){.finance-quick-strip>.finance-quick-link+.finance-quick-link{border-left:0;border-top:1px solid #e8edf1}}
.profit-clickable-row{cursor:pointer;transition:background-color .16s ease,box-shadow .16s ease}.profit-clickable-row:hover,.profit-clickable-row:focus-visible{background:#edf8fb;box-shadow:inset 4px 0 #2788aa;outline:0}.row-open-hint{color:#2788aa;display:block;font-size:10px;font-weight:700;margin-top:4px;opacity:0;transition:opacity .16s ease}.profit-clickable-row:hover .row-open-hint,.profit-clickable-row:focus-visible .row-open-hint{opacity:1}
/* Hosted license activation */
.hosted-license-page{max-width:1500px;margin:0 auto}.hosted-license-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:10px 0 24px}.hosted-license-heading>div>span{color:#258eaa;font-weight:800;font-size:13px;letter-spacing:1.2px}.hosted-license-heading h1{margin:7px 0 6px;color:#143244;font-size:34px}.hosted-license-heading p{margin:0;color:#718495}.hosted-license-status{padding:12px 18px;border-radius:999px;background:#fff1d8;color:#9c6300;font-weight:800}.hosted-license-status.status-valid{background:#ddf7e9;color:#13814a}.hosted-license-grid{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(420px,1.18fr);background:#fff;border:1px solid #dbe7ec;border-radius:22px;overflow:hidden;box-shadow:0 16px 42px rgba(18,55,70,.08)}.hosted-license-summary{padding:42px;background:linear-gradient(145deg,#103e50,#17647a);color:white}.hosted-license-mark{width:86px;height:86px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#2ca8c7,#42bf8f);font-size:25px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.18)}.hosted-license-summary h2{font-size:28px;margin:28px 0 8px}.hosted-license-summary>p{color:#c5e1ea;line-height:1.7}.hosted-license-summary dl{margin:30px 0 0}.hosted-license-summary dl div{padding:12px 0;border-top:1px solid rgba(255,255,255,.15)}.hosted-license-summary dt{font-size:12px;color:#8fd0df;text-transform:uppercase;font-weight:800}.hosted-license-summary dd{margin:5px 0 0;overflow-wrap:anywhere}.hosted-license-form{padding:42px}.hosted-license-form label{display:block;margin:0 0 8px;color:#17384a;font-weight:800}.hosted-license-copy{display:flex;gap:10px;margin-bottom:24px}.hosted-license-copy input,.hosted-license-form textarea{width:100%;border:1px solid #cddde4;border-radius:10px;padding:14px;background:#f8fbfc;color:#18394a;font:600 14px Consolas,monospace}.hosted-license-copy button{border:0;border-radius:10px;padding:0 18px;font-weight:800;color:#214052;cursor:pointer}.hosted-license-form textarea{min-height:110px;resize:vertical;margin-bottom:14px}.hosted-license-actions{display:flex;gap:10px}.hosted-license-submit{flex:1;justify-content:center;font-size:16px}.hosted-license-paste{min-width:110px;justify-content:center;background:#173f50;color:#fff;font-size:16px}.hosted-license-message{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-weight:700}.hosted-license-message.success{background:#ddf7e9;color:#137945}.hosted-license-message.error{background:#ffe7e7;color:#a42d38}@media(max-width:900px){.hosted-license-grid{grid-template-columns:1fr}.hosted-license-heading{flex-direction:column}.hosted-license-summary,.hosted-license-form{padding:26px}}@media(max-width:520px){.hosted-license-actions{flex-direction:column}.hosted-license-paste{width:100%}}

/* Global resizable table columns */
.resizable-table-wrap{overflow-x:auto}
table.resizable-table{min-width:100%;table-layout:fixed}
table.resizable-table th{position:relative;white-space:nowrap}
table.resizable-table td{overflow:hidden;text-overflow:ellipsis}
.table-column-resizer{bottom:0;cursor:col-resize;position:absolute;right:-4px;top:0;touch-action:none;width:8px;z-index:6}
.table-column-resizer::after{background:#cad7df;bottom:18%;content:"";left:3px;position:absolute;top:18%;transition:background-color .15s ease,width .15s ease;width:1px}
.table-column-resizer:hover::after,.table-column-resizer.active::after{background:#238bad;width:2px}
body.table-column-resizing,body.table-column-resizing *{cursor:col-resize!important;user-select:none!important}
@media(max-width:900px){.table-column-resizer{display:none}table.resizable-table{table-layout:auto;width:100%!important}table.resizable-table th{width:auto!important}}
/* Operational reports center */
.report-center-heading{align-items:center;display:flex;gap:24px;justify-content:space-between;margin:8px 0 22px}.report-center-heading h1{color:#20313d;font-size:30px;margin:5px 0}.report-center-heading p{color:#6f7f8b;margin:0}.report-heading-actions{display:flex;gap:9px}.report-catalog{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}.report-catalog-card{background:#fff;border:1px solid #dce6eb;border-radius:14px;color:#213745;display:grid;gap:9px;min-height:190px;padding:22px;text-decoration:none;transition:box-shadow .18s ease,transform .18s ease}.report-catalog-card:hover{box-shadow:0 12px 28px rgba(22,63,79,.13);transform:translateY(-3px)}.report-catalog-card strong{font-size:19px}.report-catalog-card small{color:#73828d;line-height:1.55}.report-catalog-card b{align-self:end;color:#2486a4;font-size:13px}.report-catalog-icon{align-items:center;background:#e5f4f8;border-radius:11px;color:#217e9b;display:flex;font-size:15px;font-weight:900;height:48px;justify-content:center;width:48px}.report-catalog-featured{background:linear-gradient(145deg,#173e4d,#226c7d);border-color:#1f6475;color:#fff}.report-catalog-featured small,.report-catalog-featured b{color:#c3e5ec}.report-catalog-featured .report-catalog-icon{background:#42b985;color:#fff}.report-print-identity{display:none}.report-period-filter{align-items:end;background:#fff;border:1px solid #dce6eb;border-radius:12px;display:flex;gap:13px;margin-bottom:16px;padding:15px 18px}.report-period-filter label{display:grid;gap:6px}.report-period-filter label span,.report-scope-note span{color:#768590;font-size:12px}.report-period-filter input{border:1px solid #cbd9e1;border-radius:7px;font:inherit;padding:9px 11px}.report-scope-note{display:grid;gap:4px;margin-right:auto}.report-summary-strip,.aging-summary-grid{display:grid;gap:12px;margin-bottom:16px}.report-summary-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.aging-summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.report-summary-strip article,.aging-summary-grid article{background:#fff;border:1px solid #dce6eb;border-radius:11px;padding:16px 18px}.report-summary-strip span,.aging-summary-grid span{color:#74838e;display:block;font-size:12px;margin-bottom:7px}.report-summary-strip strong,.aging-summary-grid strong{color:#203642;font-size:18px}.report-summary-strip .positive{border-left:4px solid #2fa373}.report-summary-strip .attention,.aging-summary-grid .overdue{background:#fff8ed;border-color:#edc37d}.operational-report-table{margin-bottom:26px}.operational-report-table a{color:#267fa0;font-weight:800}.cash-direction{border-radius:999px;display:inline-flex;font-size:11px;font-weight:800;padding:5px 9px}.cash-direction.receipt{background:#dcf7e9;color:#137948}.cash-direction.payment{background:#ffe9dc;color:#a44e19}
@media(max-width:1050px){.report-catalog{grid-template-columns:repeat(2,1fr)}.report-summary-strip{grid-template-columns:repeat(2,1fr)}.aging-summary-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.report-center-heading{align-items:flex-start;flex-direction:column}.report-heading-actions{width:100%}.report-catalog,.report-summary-strip,.aging-summary-grid{grid-template-columns:1fr}.report-period-filter{align-items:stretch;flex-direction:column}.report-period-filter .button{width:100%}}
@media print{body{background:#fff!important}.topbar,.sidebar,.header-bar,.report-heading-actions,.report-period-filter,.table-column-resizer{display:none!important}.app-shell,.main{display:block!important}.main{margin:0!important;width:100%!important}.content{padding:0!important}.report-center-heading{border-bottom:2px solid #1d3e4c;margin-bottom:12px;padding-bottom:12px}.report-center-heading .eyebrow{display:none}.report-center-heading h1{font-size:22px}.report-print-identity{display:flex;justify-content:space-between;margin-bottom:14px}.report-summary-strip article,.aging-summary-grid article,.operational-report-table{break-inside:avoid;box-shadow:none}.operational-report-table{border:0;overflow:visible}.operational-report-table table{font-size:10px!important;table-layout:auto!important;width:100%!important}.operational-report-table th,.operational-report-table td{padding:6px!important}.operational-report-table a{color:#000;text-decoration:none}@page{margin:12mm;size:landscape}}
/* Payment methods settings */
.payment-methods-icon::before{content:'';position:absolute;left:7px;top:10px;width:24px;height:17px;border:2px solid #fff;border-radius:4px}.payment-methods-icon::after{content:'';position:absolute;left:9px;top:15px;width:20px;height:4px;border-top:3px solid #fff;border-bottom:2px solid #fff}.payment-methods-settings{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}.payment-methods-intro{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);background:#f8fbfc}.payment-methods-intro>div:nth-child(2){display:grid;gap:4px;flex:1}.payment-methods-intro strong{font-size:16px;color:#18394a}.payment-methods-intro span,.payment-methods-footer>span{color:#667085;font-size:12px}.payment-methods-mark{position:relative;width:44px;height:44px;border-radius:10px;background:#2d94b9}.payment-methods-mark::before{content:'';position:absolute;left:9px;top:12px;width:26px;height:18px;border:2px solid #fff;border-radius:4px}.payment-methods-mark::after{content:'';position:absolute;left:11px;top:17px;width:22px;border-top:4px solid #fff}.payment-methods-list{display:grid}.payment-method-row{display:grid;grid-template-columns:24px minmax(210px,1fr) auto auto auto 34px;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid #e6edf1}.payment-method-row:hover{background:#fbfdfe}.payment-method-drag{color:#9baab4;font-weight:900;letter-spacing:-3px}.payment-method-name{display:grid;gap:5px;margin:0!important}.payment-method-name span{font-size:11px;color:#667085;font-weight:700}.payment-method-name input{width:100%;padding:10px 12px;border:1px solid #cddbe2;border-radius:7px;font:inherit}.payment-method-check{display:flex!important;align-items:center;gap:7px;margin:0!important;padding:8px 10px;border-radius:7px;background:#f1f6f8;color:#425466!important;font-size:12px}.payment-method-check input{width:16px;height:16px;accent-color:#2d94b9}.payment-method-check.active{background:#e8f7ef;color:#23724c!important}.payment-method-remove{width:32px;height:32px;border:0;border-radius:7px;background:#fff0f0;color:#b43b45;font-size:22px;line-height:1;cursor:pointer}.payment-methods-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;background:#f8fafc}.settings-notice{padding:12px 15px;margin-bottom:14px;border-radius:8px;font-weight:700}.settings-notice.success{background:#ddf7e9;color:#137945}.settings-notice.error{background:#ffe7e7;color:#a42d38}@media(max-width:760px){.payment-methods-intro,.payment-methods-footer{align-items:stretch;flex-direction:column}.payment-method-row{grid-template-columns:20px 1fr 34px}.payment-method-name{grid-column:2}.payment-method-check{grid-row:2}.payment-method-check:first-of-type{grid-column:2}.payment-method-remove{grid-column:3;grid-row:1}.payment-methods-footer .button{width:100%;justify-content:center}}
/* Sales-style reminders list */
.mobile-reminder-cards{display:none}.reminder-sales-list{margin-top:-10px}.reminder-sales-table th,.reminder-sales-table td{height:54px}.reminder-sales-table th:nth-child(1),.reminder-sales-table td:nth-child(1){width:4%;text-align:center}.reminder-sales-table th:nth-child(2),.reminder-sales-table td:nth-child(2){width:17%}.reminder-sales-table th:nth-child(3),.reminder-sales-table td:nth-child(3){width:15%}.reminder-sales-table th:nth-child(4),.reminder-sales-table td:nth-child(4){width:16%}.reminder-sales-table th:nth-child(5),.reminder-sales-table td:nth-child(5){width:24%}.reminder-sales-table th:nth-child(6),.reminder-sales-table td:nth-child(6){width:10%;text-align:right}.reminder-sales-table th:nth-child(7),.reminder-sales-table td:nth-child(7){width:9%}.reminder-sales-table th:nth-child(8),.reminder-sales-table td:nth-child(8){width:5%;text-align:center}.reminder-sales-table .due-reminder td{background:#fffaf0}.reminder-sales-table .due-reminder:hover td{background:#fff3d6}.reminder-column-icon{display:inline-block;position:relative;width:18px;height:18px;border:2px solid #596674;border-radius:50%}.reminder-column-icon::before{content:'';position:absolute;left:7px;top:2px;width:2px;height:6px;background:#596674}.reminder-column-icon::after{content:'';position:absolute;left:7px;top:7px;width:5px;height:2px;background:#596674;transform:rotate(35deg);transform-origin:left center}.reminder-row-indicator{display:inline-block;width:12px;height:12px;border:3px solid #17a2b8;border-radius:50%;box-shadow:0 0 0 3px rgba(23,162,184,.12)}.reminder-row-indicator.due{border-color:#ef8b17;box-shadow:0 0 0 3px rgba(239,139,23,.14)}.reminder-reason-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reminder-total{font-weight:800;color:#45576a!important}.reminder-list-status{display:inline-flex;align-items:center;justify-content:center;min-width:60px;padding:4px 10px;border-radius:999px;background:#11a7bb;color:#fff;font-size:12px;font-weight:800}.reminder-list-status.due{background:#ee8a18}.reminder-row-done{border:0;border-radius:6px;background:#e5edf2;color:#233b4a;cursor:pointer;font:inherit;font-size:12px;font-weight:800;padding:7px 11px}.reminder-row-done:hover{background:#cfe0e9;color:#176f91}.reminder-filter-dropdown{padding:10px}.reminder-filter-option{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:32px;padding:6px 8px;border-radius:5px;color:#344054;text-decoration:none;font-size:13px}.reminder-filter-option:hover{background:#eef4f7}.reminder-filter-option.selected{background:#dceef5;color:#176f91;font-weight:800}.reminder-filter-option b{font-size:10px;color:#168451}.reminder-list-empty{display:grid;gap:6px;place-items:center;min-height:230px;color:#667085}.reminder-list-empty strong{color:#263c4a;font-size:18px}.mobile-reminder-card{display:grid;gap:12px;padding:16px;border:1px solid #dce5eb;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(22,52,67,.06)}.mobile-reminder-card.is-due{border-left:4px solid #ef8b17}.mobile-reminder-card p{margin:0;color:#536471;line-height:1.5}.mobile-reminder-actions{display:flex;gap:9px}.mobile-reminder-actions a,.mobile-reminder-actions button{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border:0;border-radius:7px;background:#e5edf2;color:#243b49;font:inherit;font-weight:800;text-decoration:none}.mobile-reminder-actions form{margin-left:auto}.mobile-reminder-actions button{background:#5f9bb8;color:#fff;cursor:pointer}@media (max-width:1100px) and (hover:none),(max-width:1100px) and (pointer:coarse){.section-reminders .desktop-sales-list{display:none}.mobile-reminder-cards{display:grid;gap:12px;padding:2px}.section-reminders .content{background:#f4f7f9}.mobile-reminder-card .mobile-document-number{color:#2d7da2;text-decoration:none}}
/* Notes Workspace 2D */
.nav-icon.notes{background:#f2b84b;border-radius:5px;transform:rotate(-2deg)}.nav-icon.notes::before{content:'';position:absolute;inset:5px 6px;background:repeating-linear-gradient(to bottom,#fff 0 2px,transparent 2px 5px);border-left:2px solid #fff}.nav-icon.notes::after{content:'';position:absolute;width:11px;height:3px;right:-2px;bottom:4px;border-radius:3px;background:#21526a;transform:rotate(-45deg)}.section-notes .content{padding:0;background:#eef3f6}.notes-workspace{display:grid;grid-template-columns:220px minmax(360px,1fr) minmax(390px,.95fr);min-height:calc(100vh - 118px);background:#eef3f6;color:#263b48}.notes-navigation{display:flex;flex-direction:column;gap:15px;padding:20px 15px;border-right:1px solid #d4dfe5;background:#f8fafb}.notes-brand-card{display:flex;align-items:center;gap:11px;padding:8px}.notes-brand-card>div{display:grid;gap:3px}.notes-brand-card strong{font-size:14px}.notes-brand-card small{color:#7a8993;font-size:10px}.notes-brand-icon{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:9px;background:#f4bd50;box-shadow:4px 4px 0 #dfe8ed}.notes-brand-icon::before{content:'';position:absolute;inset:9px;background:repeating-linear-gradient(to bottom,#fff 0 2px,transparent 2px 6px);border-left:2px solid #fff}.notes-brand-icon::after{content:'';position:absolute;right:5px;bottom:7px;width:16px;height:4px;border-radius:3px;background:#2a6d89;transform:rotate(-45deg)}.notes-new-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:43px;border:0;border-radius:8px;background:#2587a8;color:#fff;cursor:pointer;font:inherit;font-weight:800;box-shadow:0 3px 0 #176c89}.notes-new-button:active{transform:translateY(2px);box-shadow:0 1px 0 #176c89}.notes-new-button span{font-size:21px}.notes-smart-nav,.notes-category-nav{display:grid;gap:5px}.notes-smart-nav a{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:7px;color:#4a5c67;text-decoration:none}.notes-smart-nav a:hover,.notes-smart-nav a.active{background:#dfeef4;color:#176f91}.notes-smart-nav b{font-size:13px}.notes-smart-nav em{min-width:23px;padding:3px 6px;border-radius:10px;background:#e5ebef;color:#687984;font-size:10px;font-style:normal;text-align:center}.notes-smart-nav a.active em{background:#2587a8;color:#fff}.notes-nav-symbol{position:relative;width:20px;height:20px;border:2px solid #6f818c;border-radius:4px}.notes-nav-symbol.all::after{content:'';position:absolute;inset:4px;border:2px solid #6f818c}.notes-nav-symbol.important{border-radius:50%}.notes-nav-symbol.important::after{content:'!';display:grid;place-items:center;height:100%;font-size:13px;font-weight:900}.notes-nav-symbol.archive::before{content:'';position:absolute;left:3px;right:3px;top:5px;height:8px;border:2px solid #6f818c;border-top:0}.notes-categories-title{padding:12px 10px 4px;color:#9aa7af;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.notes-category-nav a{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 11px;border-radius:6px;color:#596b76;font-size:12px;font-weight:700;text-decoration:none}.notes-category-nav a:hover,.notes-category-nav a.active{background:#edf3f6;color:#1c7596}.category-dot{width:10px;height:10px;border-radius:3px;background:#91a2ac}.category-dot.important{background:#ee6b69}.category-dot.customers{background:#3bb5b1}.category-dot.purchases{background:#8a68dc}.category-dot.ideas{background:#f4b943}.category-dot.tasks{background:#4c91d7}.notes-private-message{display:flex;gap:9px;margin-top:auto;padding:12px;border:1px solid #dce6eb;border-radius:8px;background:#fff}.notes-private-message>div{display:grid;gap:2px}.notes-private-message strong{font-size:11px}.notes-private-message small{color:#84929a;font-size:9px;line-height:1.35}.notes-lock-icon{position:relative;width:18px;height:15px;margin-top:5px;border:2px solid #4f8da6;border-radius:3px}.notes-lock-icon::before{content:'';position:absolute;left:3px;top:-9px;width:8px;height:8px;border:2px solid #4f8da6;border-bottom:0;border-radius:7px 7px 0 0}.notes-library{min-width:0;padding:24px 22px;overflow:auto}.notes-library-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.notes-library-head>div{display:grid;gap:3px}.notes-library-head span{color:#2587a8;font-size:10px;font-weight:900;letter-spacing:1.2px}.notes-library-head h1{margin:0;font-size:25px}.notes-library-head>strong{padding:6px 10px;border-radius:6px;background:#dfe8ed;color:#647681;font-size:11px}.notes-mobile-search{display:none}.notes-card-grid{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:15px}.note-card{position:relative;display:flex;flex-direction:column;min-height:180px;padding:17px;border:2px solid transparent;border-radius:10px;background:#fff;cursor:pointer;box-shadow:0 4px 0 #dbe4e9;transition:transform .14s ease,border-color .14s ease}.note-card:hover{transform:translateY(-2px)}.note-card.selected{border-color:#2787a7;box-shadow:0 4px 0 #9fc5d4}.note-card::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:0 4px 4px 0;background:#e4b33d}.note-card.color-sky::before{background:#4b9fd0}.note-card.color-mint::before{background:#45b88c}.note-card.color-rose::before{background:#e96e78}.note-card.color-violet::before{background:#8b6bd6}.note-card.color-slate::before{background:#687d89}.note-card-top{display:flex;align-items:center;justify-content:space-between}.note-category-pill{padding:4px 7px;border-radius:5px;background:#f0f3f5;color:#71808a;font-size:9px;font-weight:900;text-transform:uppercase}.note-category-pill.important{background:#fee9e9;color:#b84848}.note-category-pill.customers{background:#e1f5f2;color:#258278}.note-category-pill.purchases{background:#eee9fb;color:#6245aa}.note-category-pill.ideas{background:#fff3d5;color:#9a6810}.note-category-pill.tasks{background:#e4effb;color:#3473ad}.note-pin-mark{position:relative;width:16px;height:16px}.note-pin-mark::before{content:'';position:absolute;left:5px;top:1px;width:7px;height:9px;border-radius:4px 4px 1px 1px;background:#e15f5f;transform:rotate(35deg)}.note-pin-mark::after{content:'';position:absolute;left:5px;top:10px;width:8px;height:2px;background:#8c4545;transform:rotate(-55deg)}.note-card h2{margin:14px 0 8px;font-size:17px;line-height:1.25}.note-card p{display:-webkit-box;overflow:hidden;margin:0;color:#687985;font-size:12px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:4}.note-card footer{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px;color:#9aa6ad;font-size:9px}.note-card footer b{color:#2587a8}.notes-empty-state,.note-editor-placeholder{display:grid;place-items:center;align-content:center;min-height:420px;text-align:center}.notes-empty-state strong,.note-editor-placeholder strong{margin-top:14px;font-size:18px}.notes-empty-state p,.note-editor-placeholder p{max-width:300px;color:#7a8992;font-size:12px;line-height:1.5}.notes-empty-state button{padding:10px 16px;border:0;border-radius:7px;background:#2587a8;color:#fff;font-weight:800;cursor:pointer}.notes-empty-icon{position:relative;width:60px;height:60px;border-radius:12px;background:#f2bf55;box-shadow:7px 7px 0 #dce6eb}.notes-empty-icon::before{content:'';position:absolute;inset:14px;background:repeating-linear-gradient(to bottom,#fff 0 3px,transparent 3px 9px);border-left:3px solid #fff}.notes-editor-panel{min-width:0;border-left:1px solid #d4dfe5;background:#fff}.notes-editor-panel form{display:flex;flex-direction:column;height:100%}.note-editor-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e9ed}.note-editor-head>div{display:flex;align-items:center;gap:7px;color:#72818a;font-size:10px}.editor-status-dot{width:8px;height:8px;border-radius:50%;background:#3db283}.note-editor-close{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;background:#edf2f5;color:#5d6d77;font-size:11px;font-weight:900;text-decoration:none}.note-editor-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 22px 0}.note-editor-meta select{padding:7px 9px;border:1px solid #d5e0e5;border-radius:6px;background:#f7fafb;color:#4f626d;font:inherit;font-size:11px;font-weight:800}.note-editor-meta span{color:#98a4aa;font-size:9px}.note-title-input{margin:12px 22px 0;padding:10px 0;border:0;border-bottom:1px solid #e1e8ec;outline:0;color:#223945;font-family:inherit;font-size:25px;font-weight:800;line-height:1.25}.note-content-input{flex:1;min-height:320px;margin:0 22px;padding:17px 0;border:0;outline:0;resize:none;color:#465b67;font:14px/1.75 inherit}.note-color-picker{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-top:1px solid #edf1f3}.note-color-picker>span{color:#778790;font-size:10px;font-weight:800}.note-color-picker>div{display:flex;gap:7px}.note-color-picker input{position:absolute;opacity:0}.note-color-picker i{display:block;width:22px;height:22px;border:3px solid #fff;border-radius:6px;background:#efbd4e;box-shadow:0 0 0 1px #cedae0;cursor:pointer}.note-color-picker i.color-sky{background:#54a5d1}.note-color-picker i.color-mint{background:#51ba91}.note-color-picker i.color-rose{background:#e97982}.note-color-picker i.color-violet{background:#8f73d5}.note-color-picker i.color-slate{background:#70848f}.note-color-picker input:checked+i{box-shadow:0 0 0 2px #2587a8}.note-editor-actions{display:flex;gap:7px;padding:14px 20px;border-top:1px solid #dfe7eb;background:#f7f9fa}.note-editor-actions button{min-height:36px;padding:0 11px;border:0;border-radius:6px;background:#e5ecef;color:#40545f;cursor:pointer;font:inherit;font-size:10px;font-weight:900}.note-editor-actions .note-save-now{background:#2587a8;color:#fff}.note-editor-actions .note-delete-button{margin-left:auto;background:#fee7e7;color:#b64c50}.notes-top-search{min-width:420px}@media(max-width:1350px){.notes-workspace{grid-template-columns:190px minmax(330px,1fr) minmax(350px,.9fr)}.notes-card-grid{grid-template-columns:1fr}}@media(max-width:1050px){.notes-workspace{grid-template-columns:170px 1fr}.notes-editor-panel{position:fixed;z-index:70;top:0;right:0;bottom:0;width:min(520px,90vw);box-shadow:-12px 0 35px rgba(22,48,61,.2);transform:translateX(105%);transition:transform .2s ease}.notes-editor-panel.open{transform:translateX(0)}.notes-card-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}}@media(max-width:760px){.section-notes .topbar{display:none}.notes-workspace{display:block;min-height:100vh}.notes-navigation{display:none}.notes-library{padding:18px 14px}.notes-library-head{align-items:center}.notes-library-head h1{font-size:22px}.notes-mobile-search{display:block;margin-bottom:14px}.notes-mobile-search form{display:flex;gap:8px}.notes-mobile-search input{flex:1;min-width:0;padding:11px;border:1px solid #cbd9e0;border-radius:7px}.notes-mobile-search button{border:0;border-radius:7px;background:#2587a8;color:#fff;font-weight:800}.notes-card-grid{grid-template-columns:1fr}.note-card{min-height:165px}.notes-editor-panel{width:100vw}.note-editor-meta{align-items:flex-start;flex-direction:column}.note-title-input{font-size:22px}.note-editor-actions{flex-wrap:wrap}.note-editor-actions .note-delete-button{margin-left:0}}
/* Compact four-column notes */
.notes-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.note-card{min-height:145px;padding:12px;border-radius:8px;box-shadow:0 3px 0 #dbe4e9}.note-card::before{top:11px;bottom:11px;width:4px}.note-card-top{min-height:20px}.note-category-pill{padding:3px 5px;font-size:8px}.note-pin-mark{transform:scale(.85)}.note-card h2{overflow:hidden;margin:9px 0 6px;font-size:14px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.note-card p{font-size:10px;line-height:1.45;-webkit-line-clamp:3}.note-card footer{padding-top:9px;font-size:8px}.notes-library{padding:20px 16px}.notes-library-head{margin-bottom:15px}@media(max-width:1500px){.notes-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1350px){.notes-workspace{grid-template-columns:180px minmax(420px,1fr) minmax(350px,.9fr)}.notes-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1150px){.notes-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1050px){.notes-workspace{grid-template-columns:170px 1fr}.notes-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:850px){.notes-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.notes-card-grid{grid-template-columns:1fr}.note-card{min-height:145px}}
/* Purchase vendor payment panel */
.purchase-vendor-payment,
.purchase-vendor-paid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 4px;
    padding: 14px 16px;
    border: 1px solid #b9dbea;
    border-radius: 12px;
    background: #f3faff;
}
.purchase-vendor-payment[hidden] { display: none; }
.purchase-vendor-payment > div,
.purchase-vendor-paid { color: #24445a; }
.purchase-vendor-payment > div strong,
.purchase-vendor-payment > div span,
.purchase-vendor-paid strong,
.purchase-vendor-paid span { display: block; }
.purchase-vendor-payment > div span,
.purchase-vendor-paid span { margin-top: 3px; color: #62788a; font-size: 13px; }
.purchase-vendor-payment .balance-payment-form { flex: 1; justify-content: flex-end; margin: 0; }
.purchase-pay-vendor-button { background: #168c70; border-color: #168c70; }
.purchase-vendor-paid { justify-content: flex-start; border-color: #bfe7d4; background: #f0fbf6; }
@media (max-width: 900px) {
    .purchase-vendor-payment { align-items: stretch; flex-direction: column; }
    .purchase-vendor-payment .balance-payment-form { display: grid; grid-template-columns: 1fr; }
}
/* Purchase product autocomplete */
.purchase-product-picker { position: relative; min-width: 0; }
.purchase-product-search { width: 100%; }
.purchase-product-results {
    position: absolute;
    z-index: 40;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #b9cfdb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(28, 55, 72, .18);
}
.purchase-product-results[hidden] { display: none; }
.purchase-product-results button {
    display: block;
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 5px;
    color: #19384b;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.purchase-product-results button[hidden] { display: none; }
.purchase-product-results button:hover,
.purchase-product-results button:focus { outline: 0; background: #eaf6fb; }
/* Customer Excel import */
.settings-dropdown a { display: block; width: 100%; padding: 11px 15px; color: #263b4b; text-decoration: none; white-space: nowrap; }
.settings-dropdown a:hover { background: #edf5f8; }
.customer-import-page { display: grid; gap: 18px; }
.customer-import-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.customer-import-head p { margin: 5px 0 0; color: #667c8c; }
.customer-import-card { max-width: 980px; padding: 24px; }
.customer-import-card form { display: grid; gap: 20px; }
.customer-import-drop { display: grid; place-items: center; gap: 7px; min-height: 250px; padding: 28px; border: 2px dashed #8ebed2; border-radius: 14px; background: #f3fafd; text-align: center; cursor: pointer; transition: .18s ease; }
.customer-import-drop:hover, .customer-import-drop.dragging { border-color: #208cad; background: #e7f6fb; transform: translateY(-1px); }
.customer-import-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.customer-import-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; color: #fff; background: #2797b7; font-size: 34px; font-weight: 800; }
.customer-import-drop strong { color: #18394d; font-size: 20px; }
.customer-import-drop small { color: #718594; }
.customer-import-drop em { margin-top: 7px; padding: 7px 11px; border-radius: 999px; color: #27738c; background: #dcedf4; font-style: normal; font-weight: 700; }
.customer-import-rules { padding: 17px 19px; border: 1px solid #d9e5eb; border-radius: 10px; background: #fff; }
.customer-import-rules h2 { margin: 0 0 12px; font-size: 17px; }
.customer-import-rules > div { display: flex; flex-wrap: wrap; gap: 8px; }
.customer-import-rules > div span { padding: 7px 11px; border-radius: 7px; color: #176e88; background: #e7f5fa; font-weight: 800; }
.customer-import-rules p { margin: 13px 0 0; color: #617888; line-height: 1.6; }
@media (max-width: 760px) { .customer-import-head { flex-direction: column; } .customer-import-card { padding: 15px; } }
/* Note Telegram reminders */
.note-card-top > div { display: inline-flex; align-items: center; gap: 7px; }
.note-telegram-mark { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 7px; color: #157ca5; background: #def3fb; font-size: 13px; }
.note-telegram-reminder { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(210px, .8fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #dce7ed; background: #f3faff; }
.note-reminder-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.note-reminder-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.note-reminder-toggle > span { position: relative; flex: 0 0 42px; width: 42px; height: 23px; border-radius: 999px; background: #b9c9d2; transition: .18s ease; }
.note-reminder-toggle > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: .18s ease; }
.note-reminder-toggle > input:checked + span { background: #269cc2; }
.note-reminder-toggle > input:checked + span::after { transform: translateX(19px); }
.note-reminder-toggle div { display: grid; gap: 2px; }
.note-reminder-toggle strong { color: #18394d; font-size: 13px; }
.note-reminder-toggle small { color: #718493; font-size: 11px; }
.note-reminder-date { display: grid; gap: 4px; color: #5d7382; font-size: 11px; font-weight: 700; }
.note-reminder-date input { width: 100%; padding: 8px 9px; border: 1px solid #bfd2dc; border-radius: 7px; color: #1f4053; background: #fff; }
.note-reminder-sent { padding: 7px 9px; border-radius: 7px; color: #187653; background: #dff5ea; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
@media (max-width: 1050px) { .note-telegram-reminder { grid-template-columns: 1fr; align-items: stretch; } }