/* QAZYNA Business workspace refresh. The auth screen remains on its existing styles. */ #appShell { --canvas: #f3f5f1; --ink: #172820; --ink-soft: #51645a; --muted: #829087; --line: #e1e7e1; --white: #ffffff; --green: #176149; --green-dark: #104b38; --mint: #e8f1e9; --gold: #d7b36a; --surface: #ffffff; --sidebar: #12392f; min-height: 100vh; background: var(--canvas); color: var(--ink); font-family: var(--sans); letter-spacing: .005em; } #appShell .sidebar { width: 264px; padding: 25px 17px 16px; background: var(--sidebar); border: 0; color: #f2f5ef; box-shadow: 8px 0 28px #10271b12; } #appShell .brand { min-height: 48px; padding: 0 9px 19px; } #appShell .brand-lockup { width: 164px; } #appShell .workspace-switch { min-height: 62px; margin-bottom: 21px; padding: 10px 11px; border: 1px solid #ffffff22; border-radius: 12px; background: #ffffff0b; color: #f1f5ef; transition: background .18s ease, border-color .18s ease; } #appShell .workspace-switch:hover, #appShell .workspace-switch[aria-expanded="true"] { background: #ffffff13; border-color: #ffffff40; } #appShell .workspace-avatar { width: 34px; height: 34px; border-radius: 10px; background: #d6b46e; color: #17392e; font-weight: 800; } #appShell .workspace-info b { color: #f4f6f1; font-size:12.5px; } #appShell .workspace-info small { margin-top: 3px; color: #abc0b2; font-size:10.5px; } #appShell .chevron { color: #c1d1c5; } #appShell .organization-menu { top: 137px; left: 17px; width: 230px; border-color: #345549; background: #173f33; box-shadow: 0 18px 38px #061a1280; } #appShell .org-option { color: #eef4ed; } #appShell .org-option:hover, #appShell .org-option.selected { background: #245343; } #appShell .org-option small { color: #aec2b4; } #appShell .org-option.add-org { border-color: #345549; color: #e3c47f; } #appShell .nav-label { margin: 13px 10px 8px; color: #8fa99a; font-size:10.5px; font-weight: 700; letter-spacing: .16em; } #appShell .nav-label-second, #appShell .nav-label-third { margin-top: 19px; } #appShell .nav-menu { gap: 4px; } #appShell .nav-item { min-height: 40px; height: auto; padding: 0 11px; gap: 11px; border-radius: 9px; color: #c0d0c5; font-size:12.5px; font-weight: 500; transition: color .16s ease, background .16s ease, transform .16s ease; } #appShell .nav-item:hover { background: #ffffff0d; color: #ffffff; } #appShell .nav-item.active { background: #e5c47c; color: #173a2e; font-weight: 700; box-shadow: 0 5px 15px #081c1433; } #appShell .nav-icon, #appShell .nav-item .nav-icon, #appShell .nav-item.active .nav-icon { color: #a8c1b1; } #appShell .nav-item.active .nav-icon { color: #174b38; } #appShell .nav-icon svg { width: 17px; height: 17px; } #appShell .sidebar-bottom { margin-top: auto; } #appShell .sidebar-bottom > .nav-item { margin-bottom: 5px; } #appShell .profile { margin-top: 8px; padding: 13px 4px 2px; border-top: 1px solid #ffffff24; } #appShell .profile-avatar { width: 32px; height: 32px; background: #e9dfca; color: #244538; } #appShell .profile b { color: #f2f5f0; font-size:11.5px; } #appShell .profile small { color: #a9bdb0; font-size:10.5px; } #appShell .more { color: #b3c6b8; } #appShell .main-content { margin-left: 264px; min-height: 100vh; background: var(--canvas); } #appShell .topbar { position: sticky; top: 0; z-index: 4; height: 64px; padding: 0 clamp(24px, 4vw, 54px); background: #ffffffed; border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); } #appShell .breadcrumb { gap: 10px; color: #87938b; font-size:11.5px; } #appShell .breadcrumb b { color: var(--ink); font-size:12.5px; font-weight: 700; } #appShell .crumb-slash { color: #c4cdc5; } #appShell .top-actions { gap: 14px; } #appShell .today { color: #839087; font-size:11.5px; } #appShell .top-divider { height: 19px; background: var(--line); } #appShell .theme-toggle { height: 34px; padding: 0 12px; border-color: var(--line); border-radius: 9px; background: #fff; color: #4b6054; font-size:11.5px; } #appShell .theme-toggle:hover { border-color: #b8cabc; background: #f8faf7; } #appShell .page-content { min-height: calc(100vh - 64px); padding: 35px clamp(24px, 4vw, 54px) 28px; background: var(--canvas); } #appShell .page-heading { align-items: center; gap: 24px; margin-bottom: 25px; } #appShell .eyebrow { color: #718278; font-size:10.5px; font-weight: 700; letter-spacing: .15em; } #appShell .eyebrow-line { width: 16px; background: var(--gold); } #appShell .page-heading h1 { margin: 8px 0 5px; color: #19342a; font-size: clamp(27px, 3vw, 34px); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; } #appShell .subtitle { color: #7a8980; font-size:13.5px; line-height: 1.55; } #appShell .button { min-height: 40px; padding: 0 16px; border-radius: 9px; font-size:12.5px; font-weight: 700; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } #appShell .button:hover { transform: translateY(-1px); } #appShell .button-primary { border: 1px solid #14553f; background: #145b43; color: #fff; box-shadow: 0 5px 12px #145b431a; } #appShell .button-primary:hover { background: #104b38; box-shadow: 0 7px 17px #145b4326; } #appShell .button-secondary { border-color: #dce5dd; background: #fff; color: #40584b; } #appShell .button-danger { border-radius: 9px; } #appShell .heading-actions { gap: 9px; } #appShell .stats-grid { gap: 15px; margin-bottom: 22px; } #appShell .stat-card { min-height: 132px; padding: 18px 19px 16px; border: 1px solid #e5ebe5; border-radius: 13px; background: var(--surface); box-shadow: 0 3px 12px #1b362408; } #appShell .stat-card:hover { border-color: #cbd9ce; box-shadow: 0 8px 22px #183b2910; } #appShell .stat-card-sage { background: #edf3ec; border-color: #e2eae1; } #appShell .stat-top { color: #718078; font-size:11.5px; font-weight: 500; } #appShell .stat-icon { width: 28px; height: 28px; border-radius: 9px; } #appShell .green-icon { background: #e5f1e9; color: #397654; } #appShell .amber-icon { background: #fbf0dc; color: #a77b31; } #appShell .blue-icon { background: #eaf0fa; color: #5d7bb5; } #appShell .sage-icon { background: #e1eee5; color: #47735a; } #appShell .stat-value { margin-top: 12px; color: #17372a; font-size: clamp(21px, 2vw, 25px); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } #appShell .stat-foot { margin-top: 7px; color: #8a978e; font-size:11.5px; } #appShell .work-panel { overflow: hidden; border: 1px solid #e4eae4; border-radius: 14px; background: var(--surface); box-shadow: 0 4px 16px #1b362407; } #appShell .panel-heading { align-items: center; padding: 20px 22px 16px; } #appShell .panel-heading h2 { color: #1a3429; font-size:16px; font-weight: 700; letter-spacing: -.02em; } #appShell .panel-heading p { margin-top: 5px; color: #89968e; font-size:11.5px; line-height: 1.5; } #appShell .overview-chart-panel .panel-heading { padding: 20px 22px 12px; } #appShell .chart-container { padding: 10px 20px 6px; } #appShell .chart-label, #appShell .chart-legend { color: #7c8980; } #appShell .page-footer { padding-top: 22px; color: #929d95; font-size:10.5px; } #appShell .filter-row { gap: 9px; padding: 2px 20px 15px; } #appShell .search-box, #appShell .filter-button, #appShell .type-filter, #appShell .invoice-modal .auth-field > select, #appShell .invoice-modal .auth-field > input { min-height: 38px; border: 1px solid #e1e8e1; border-radius: 8px; background: #fff; color: #3b5145; box-shadow: none; font: inherit; font-size:11.5px; } #appShell .search-box { padding: 0 11px; } #appShell .search-box input { color: #273a30; font-size:11.5px; } #appShell .search-box input::placeholder { color: #9aa69d; } #appShell .type-filter-label { color: #7e8c82; font-size:11.5px; } #appShell .table-wrap { overflow-x: auto; } #appShell table { width: 100%; border-collapse: separate; border-spacing: 0; } #appShell thead { background: #f5f7f3; } #appShell th { height: 40px; padding: 0 13px; border-bottom: 1px solid #e6ebe6; color: #7a8980; font-size:10.5px; font-weight: 700; letter-spacing: .07em; } #appShell td { padding: 13px; border-bottom: 1px solid #edf0ed; color: #4a5c51; font-size:11.5px; line-height: 1.5; } #appShell tbody tr { transition: background .14s ease; } #appShell tbody tr:hover { background: #f7faf6; } #appShell tbody tr:last-child td { border-bottom: 0; } #appShell td b { color: #253c30; } #appShell .table-subtext { color: #929e95; font-size:10.5px; } #appShell .text-button, #appShell .report-drilldown-link, #appShell .invoice-number-link { color: #176149; font-size:11.5px; font-weight: 700; } #appShell .text-button:hover, #appShell .report-drilldown-link:hover, #appShell .invoice-number-link:hover { color: #0e4835; } #appShell .status-toggle { padding: 6px 9px; border-radius: 7px; font-size:10.5px; font-weight: 600; } #appShell .status-toggle.pending { background: #fbf2df; color: #936d2d; } #appShell .status-toggle.paid { background: #e6f1e8; color: #34714e; } #appShell .status-toggle.cancelled { background: #f8e9e6; color: #a14f43; } #appShell .table-footer { min-height: 42px; padding: 0 20px; border-top: 1px solid #edf0ed; color: #8b978e; font-size:10.5px; } #appShell .empty-state { color: #8a978e; font-size:12.5px; } #appShell .type-pill { background: #edf3ed; color: #477052; } #appShell .import-banner { border-color: #dce8dd; border-radius: 10px; background: #edf5ed; color: #4d6555; } #appShell .import-banner small { color: #7b8d80; } #appShell .report-tabs { border-color: var(--line); } #appShell .report-tab { border-radius: 9px; color: #718078; } #appShell .report-tab.active { background: #e6efe6; border-color: #cfdfd0; color: #20523b; } #appShell .report-table tfoot { background: #f0f5f0; } #appShell .report-table tfoot th { color: #274a36; } #appShell .document-group { border-color: #e2e9e2; border-radius: 11px; background: #fff; } #appShell .document-group summary { color: #2e4638; } #appShell .document-item { border-color: #edf0ed; } #appShell .service-card { border-color: #e3e9e3; border-radius: 14px; background: #fff; box-shadow: 0 3px 14px #173b2808; } #appShell .service-mark { background: #e7f0e8; color: #317150; } #appShell .service-card h2 { color: #223c2d; } #appShell .service-actions { border-color: #e8ede8; } #appShell .stock-quantity { color: #226747; } #appShell .danger-zone { border-color: #efd9d4; } #appShell .modal-backdrop { z-index: 40; background: #10281f99; backdrop-filter: blur(5px); } #appShell .invoice-modal { border: 1px solid #e0e8e0; border-radius: 16px; background: #fff; color: #24392d; box-shadow: 0 24px 70px #061a1270; } #appShell .invoice-modal h2 { color: #1a3528; letter-spacing: -.035em; } #appShell .invoice-modal .modal-description { color: #7c8b81; } #appShell .invoice-modal .modal-close { color: #75857a; } #appShell .invoice-modal .modal-icon { background: #e9f1e9; color: #286447; } #appShell .editor-form label, #appShell .auth-field { color: #66796d; } #appShell .editor-form input, #appShell .editor-form select, #appShell .invoice-product-line select, #appShell .invoice-product-line input { border-color: #dce6dd; border-radius: 8px; background: #fff; color: #233a2d; } #appShell .invoice-detail-meta { border-color: #e3eae3; border-radius: 10px; background: #f5f8f4; } #appShell .invoice-detail-table-wrap { border-color: #e2e9e2; } #appShell .invoice-detail-table th, #appShell .invoice-detail-table td { border-color: #e8ede8; } #appShell .report-drilldown-row { border-color: #e3eae3; border-radius: 10px; background: #f8faf7; } #appShell .report-drilldown-status b { color: #20392b; } #appShell .organization-menu { color: #eef4ed; } #appShell :focus-visible { outline: 2px solid #7da98a; outline-offset: 2px; } /* iOS-inspired controls and the redesigned organization home */ #appShell button { -webkit-tap-highlight-color: transparent; font-family: inherit; } #appShell .button, #appShell .ios-button, #appShell .calendar-trigger, #appShell .ios-icon-button, #appShell .ios-chip, #appShell .status-toggle, #appShell .filter-button, #appShell .theme-toggle { -webkit-appearance: none; appearance: none; border-radius: 13px; font-family: inherit; font-weight: 650; letter-spacing: -.01em; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease; } #appShell .button:active, #appShell .ios-button:active, #appShell .calendar-trigger:active, #appShell .ios-icon-button:active, #appShell .ios-chip:active, #appShell .theme-toggle:active { transform: scale(.97); } #appShell .button-primary, #appShell .ios-button-primary { background: linear-gradient(180deg,#1a7553,#14583f); border: 1px solid #0f563c; color: white; box-shadow: 0 2px 3px #123b2c1c,0 7px 16px #185b401f,inset 0 1px #ffffff22; } #appShell .button-primary:hover, #appShell .ios-button-primary:hover { background: linear-gradient(180deg,#1d805a,#155f44); box-shadow: 0 3px 5px #123b2c22,0 9px 20px #185b4026,inset 0 1px #ffffff2b; } #appShell .button-secondary, #appShell .ios-button-secondary { border: 1px solid #dfe8e0; background: linear-gradient(180deg,#fff,#f8faf8); color: #315441; box-shadow: 0 1px 2px #173b280c,inset 0 1px #fff; } #appShell .button-danger { border-radius: 12px; box-shadow: 0 2px 5px #702d2414; } #appShell .text-button, #appShell .ios-text-button { border: 0; background: transparent; color: #176149; font-family: inherit; font-size:11.5px; font-weight: 650; cursor: pointer; } #appShell .text-button { padding: 6px 8px; border-radius: 9px; } #appShell .text-button:hover { background: #eaf2eb; } #appShell .ios-text-button { padding: 7px 10px; border-radius: 10px; } #appShell .ios-text-button:hover { background: #edf4ed; } #appShell .row-menu, #appShell .ios-icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e1e8e1; border-radius: 50%; background: linear-gradient(180deg,#fff,#f5f8f5); color: #385c47; box-shadow: 0 1px 3px #173b2810; cursor: pointer; } #appShell .row-menu:hover, #appShell .ios-icon-button:hover { background: #eaf2eb; border-color: #ccdbce; } #appShell .status-toggle { border: 1px solid transparent; } #appShell .filter-button:focus, #appShell .type-filter:focus, #appShell .search-box:focus-within { border-color: #95b69e; box-shadow: 0 0 0 4px #dcebe0; outline: none; } #appShell .calendar-wrap { position: relative; z-index: 6; } #appShell .calendar-trigger { display: flex; min-width: 225px; align-items: center; gap: 11px; padding: 6px 10px; border: 1px solid #e2e9e2; background: linear-gradient(180deg,#fff,#f8faf8); color: #244333; text-align: left; box-shadow: 0 1px 3px #173b280b,inset 0 1px #fff; cursor: pointer; } #appShell .calendar-trigger:hover, #appShell .calendar-trigger[aria-expanded="true"] { border-color: #bfd2c2; box-shadow: 0 3px 10px #173b2812,inset 0 1px #fff; } #appShell .calendar-trigger-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: #e8f1e9; color: #286345; font-size: 17px; } #appShell .calendar-trigger-copy { display: grid; min-width: 0; gap: 2px; } #appShell .calendar-trigger-copy b { color: #1a4934; font-size:15px; font-variant-numeric: tabular-nums; line-height: 1.1; } #appShell .calendar-trigger-copy small { overflow: hidden; color: #77877c; font-size:10.5px; text-overflow: ellipsis; white-space: nowrap; } #appShell .calendar-trigger-chevron { margin-left: auto; color: #829087; font-size:16px; } #appShell .calendar-popover { position: absolute; top: calc(100% + 12px); right: 0; z-index: 50; width: 352px; max-height: min(78vh,720px); overflow-y: auto; padding: 18px; border: 1px solid #e1e8e1; border-radius: 19px; background: #fff; color: #22392b; box-shadow: 0 22px 60px #09211730,0 4px 12px #09211714; } #appShell .calendar-popover.hidden { display: none; } #appShell .calendar-heading, #appShell .calendar-selected-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #appShell .calendar-heading { margin-bottom: 16px; } #appShell .calendar-heading small, #appShell .calendar-selected-heading small { display: block; margin-bottom: 4px; color: #86938a; font-size:9px; font-weight: 700; letter-spacing: .13em; } #appShell .calendar-heading h2 { margin: 0; color: #1b3929; font-size: 19px; font-weight: 700; letter-spacing: -.035em; text-transform: capitalize; } #appShell .calendar-month-actions { display: flex; gap: 6px; } #appShell .calendar-month-actions .ios-icon-button { width: 31px; height: 31px; font-size: 20px; line-height: 1; } #appShell .calendar-weekdays, #appShell .calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; } #appShell .calendar-weekdays { margin-bottom: 5px; } #appShell .calendar-weekdays span { padding: 5px 0; color: #9aa69d; font-size:10.5px; font-weight: 650; text-align: center; } #appShell .calendar-day { position: relative; display: grid; min-width: 0; height: 38px; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #43584a; font-size:12.5px; font-variant-numeric: tabular-nums; cursor: pointer; } #appShell .calendar-day:hover { background: #f0f5f0; } #appShell .calendar-day.outside-month { color: #c1c9c2; } #appShell .calendar-day.is-today { color: #145b43; font-weight: 800; box-shadow: inset 0 0 0 1px #bdd3c0; } #appShell .calendar-day.is-selected { background: #176149; color: #fff; font-weight: 700; box-shadow: 0 4px 10px #17614935; } #appShell .calendar-day.has-note::after { position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #d5ad5d; content: ""; transform: translateX(-50%); } #appShell .calendar-day.is-selected.has-note::after { background: #f0d394; } #appShell .calendar-selected-heading { margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf0ed; } #appShell .calendar-selected-heading b { color: #263e30; font-size:12.5px; } #appShell .calendar-notes-list { display: grid; gap: 7px; margin-top: 9px; } #appShell .calendar-note-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid #e8eee8; border-radius: 11px; background: #f8faf7; } #appShell .calendar-note-item p { flex: 1; margin: 0; color: #43594a; font-size:11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } #appShell .calendar-note-delete { flex: none; border: 0; border-radius: 8px; background: transparent; color: #9d766f; font-size:16px; cursor: pointer; } #appShell .calendar-note-delete:hover { background: #f8e9e6; } #appShell .calendar-empty { padding: 9px 2px; color: #97a299; font-size:11.5px; } #appShell .calendar-note-form { display: grid; gap: 8px; margin-top: 9px; } #appShell .calendar-note-form textarea { width: 100%; min-height: 58px; resize: vertical; padding: 10px 11px; border: 1px solid #e0e8e1; border-radius: 11px; background: #fbfcfb; color: #293e31; font-family: inherit; font-size:11.5px; line-height: 1.5; outline: none; } #appShell .calendar-note-form textarea:focus { border-color: #95b69e; box-shadow: 0 0 0 4px #dcebe0; } #appShell .calendar-note-form .ios-button { justify-self: end; min-height: 35px; padding: 0 12px; } #appShell .ios-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 0 15px; border-radius: 13px; font-size:11.5px; font-weight: 700; cursor: pointer; } #appShell .ios-button-plus { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: #ffffff2b; font-size:15px; } #appShell .home-page-heading { margin-bottom: 20px; } #appShell .home-organization { padding: 0; } #appShell .home-organization-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px; } #appShell .home-org-monogram { display: grid; width: 50px; height: 50px; flex: none; place-items: center; border-radius: 16px; background: linear-gradient(145deg,#e8f1e9,#d7e8db); color: #1a6546; font-size: 18px; font-weight: 800; } #appShell .home-org-title { min-width: 0; flex: 1; } #appShell .home-org-title small { color: #819087; font-size:9px; font-weight: 700; letter-spacing: .13em; } #appShell .home-org-title h2 { margin: 4px 0 2px; color: #1a3528; font-size: 18px; font-weight: 700; letter-spacing: -.03em; overflow-wrap: anywhere; } #appShell .home-org-title p { margin: 0; color: #819087; font-size:11.5px; } #appShell .home-org-details { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr .8fr 1fr; gap: 0; margin: 0 22px; padding: 14px 0; border-top: 1px solid #edf1ed; border-bottom: 1px solid #edf1ed; } #appShell .home-org-details > div { display: grid; min-width: 0; align-content: start; gap: 5px; padding: 0 13px; border-right: 1px solid #edf1ed; } #appShell .home-org-details > div:first-child { padding-left: 0; } #appShell .home-org-details > div:last-child { padding-right: 0; border-right: 0; } #appShell .home-org-details span { color: #8b978e; font-size:10.5px; } #appShell .home-org-details b { color: #3b5144; font-size:11.5px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; } #appShell .home-org-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 22px 17px; } #appShell .ios-chip { display: inline-flex; min-height: 34px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #e5ebe5; border-radius: 11px; background: linear-gradient(180deg,#fff,#f8faf8); color: #53675a; font-size:10.5px; cursor: pointer; } #appShell .ios-chip:hover { background: #f0f5f0; border-color: #cfddcf; } #appShell .ios-chip b { color: #2e6041; font-size:11.5px; } #appShell .ios-chip > span:last-child { color: #9aa69c; font-size:15px; } #appShell .home-shortcut-icon { color: #548062; font-size:15px; } #appShell .home-content-grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.2fr); gap: 15px; margin-top: 16px; align-items: start; } #appShell .home-content-grid .work-panel { min-width: 0; } #appShell .home-content-grid .panel-heading { min-height: 68px; padding: 16px 18px 12px; } #appShell .home-agenda, #appShell .home-recent-invoices { padding: 0 15px 14px; } #appShell .home-invoice-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 15px; } #appShell .home-agenda-list, #appShell .home-recent-list { display: grid; } #appShell .home-agenda-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 3px; border-top: 1px solid #edf0ed; } #appShell .home-agenda-date { display: grid; width: 42px; height: 42px; flex: none; align-content: center; justify-items: center; gap: 1px; border-radius: 12px; background: #f2f6f1; color: #2b6546; } #appShell .home-agenda-date b { font-size:16px; line-height: 1; } #appShell .home-agenda-date small { color: #74877a; font-size:9px; text-transform: uppercase; } #appShell .home-agenda-copy { min-width: 0; flex: 1; } #appShell .home-agenda-copy p { margin: 0; color: #3d5346; font-size:11.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } #appShell .home-agenda-copy small { display: block; margin-top: 3px; color: #929e95; font-size:9px; } #appShell .home-agenda-open { border: 0; background: transparent; color: #91a095; font-size:16px; cursor: pointer; } #appShell .home-empty { padding: 17px 4px; color: #8e9a91; font-size:11.5px; line-height: 1.5; } #appShell .home-invoice-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 3px; border-top: 1px solid #edf0ed; } #appShell .home-invoice-main { min-width: 0; } #appShell .home-invoice-main b { display: block; color: #30483a; font-size:11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #appShell .home-invoice-main small { display: block; margin-top: 3px; color: #89968d; font-size:9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #appShell .home-invoice-amount { color: #274431; font-size:11.5px; font-weight: 700; white-space: nowrap; } #appShell .home-invoice-actions { display: flex; gap: 2px; } #appShell .home-invoice-actions .text-button { padding: 6px; font-size:10.5px; } [data-theme="dark"] #appShell { --canvas: #101d18; --ink: #edf3ed; --ink-soft: #c0cec3; --muted: #92a599; --line: #2d4438; --white: #182a21; --green: #9ac5a5; --green-dark: #b8d8bd; --mint: #223a2d; --surface: #172920; --sidebar: #0c291f; background: var(--canvas); color: var(--ink); } [data-theme="dark"] #appShell .sidebar { background: #0c291f; } [data-theme="dark"] #appShell .main-content, [data-theme="dark"] #appShell .page-content { background: var(--canvas); } [data-theme="dark"] #appShell .topbar { background: #14261ef0; border-color: #2c4237; } [data-theme="dark"] #appShell .breadcrumb, [data-theme="dark"] #appShell .today { color: #a0b2a5; } [data-theme="dark"] #appShell .breadcrumb b, [data-theme="dark"] #appShell .page-heading h1, [data-theme="dark"] #appShell .panel-heading h2 { color: #edf4ed; } [data-theme="dark"] #appShell .subtitle, [data-theme="dark"] #appShell .panel-heading p, [data-theme="dark"] #appShell .eyebrow { color: #a0b2a5; } [data-theme="dark"] #appShell .theme-toggle, [data-theme="dark"] #appShell .button-secondary, [data-theme="dark"] #appShell .search-box, [data-theme="dark"] #appShell .filter-button, [data-theme="dark"] #appShell .type-filter { border-color: #344b3f; background: #1b3025; color: #d8e5da; } [data-theme="dark"] #appShell .stat-card, [data-theme="dark"] #appShell .work-panel, [data-theme="dark"] #appShell .service-card { border-color: #2a4035; background: #172920; box-shadow: 0 4px 18px #020b0740; } [data-theme="dark"] #appShell .stat-card-sage { background: #1c3427; } [data-theme="dark"] #appShell .stat-top, [data-theme="dark"] #appShell .stat-foot { color: #a2b4a6; } [data-theme="dark"] #appShell .stat-value, [data-theme="dark"] #appShell .service-card h2, [data-theme="dark"] #appShell td b, [data-theme="dark"] #appShell .report-drilldown-status b { color: #e8f0e9; } [data-theme="dark"] #appShell td { color: #bfcec2; border-color: #263b30; } [data-theme="dark"] #appShell thead { background: #1c3026; } [data-theme="dark"] #appShell th { color: #a6b8aa; border-color: #2b4135; } [data-theme="dark"] #appShell tbody tr:hover { background: #1b3025; } [data-theme="dark"] #appShell .table-footer { border-color: #293e33; } [data-theme="dark"] #appShell .search-box input { color: #edf3ed; } [data-theme="dark"] #appShell .search-box input::placeholder { color: #91a398; } [data-theme="dark"] #appShell .text-button, [data-theme="dark"] #appShell .report-drilldown-link, [data-theme="dark"] #appShell .invoice-number-link { color: #a8d0ae; } [data-theme="dark"] #appShell .status-toggle.pending { background: #463a24; color: #e4c47d; } [data-theme="dark"] #appShell .status-toggle.paid { background: #223a2b; color: #a8d4ae; } [data-theme="dark"] #appShell .status-toggle.cancelled { background: #442c29; color: #e8aaa0; } [data-theme="dark"] #appShell .report-tabs { border-color: #2d4438; } [data-theme="dark"] #appShell .report-tab.active { border-color: #405c49; background: #263f30; color: #e1eedf; } [data-theme="dark"] #appShell .report-table tfoot { background: #1b3025; } [data-theme="dark"] #appShell .report-table tfoot th { color: #d5e5d4; } [data-theme="dark"] #appShell .document-group { border-color: #2b4135; background: #172920; } [data-theme="dark"] #appShell .document-group summary { color: #e3eee4; } [data-theme="dark"] #appShell .document-item { border-color: #2b4135; } [data-theme="dark"] #appShell .document-item b { color: #e3eee4; } [data-theme="dark"] #appShell .type-pill { background: #273e2d; color: #c5dfbf; } [data-theme="dark"] #appShell .import-banner { border-color: #304a39; background: #1b3426; color: #d1e1d1; } [data-theme="dark"] #appShell .import-banner small { color: #a0b5a2; } [data-theme="dark"] #appShell .invoice-modal { border-color: #31483c; background: #172920; color: #e6eee7; } [data-theme="dark"] #appShell .invoice-modal h2 { color: #edf4ed; } [data-theme="dark"] #appShell .invoice-modal .modal-description, [data-theme="dark"] #appShell .editor-form label, [data-theme="dark"] #appShell .auth-field { color: #a8b9ac; } [data-theme="dark"] #appShell .editor-form input, [data-theme="dark"] #appShell .editor-form select, [data-theme="dark"] #appShell .invoice-modal .auth-field > select, [data-theme="dark"] #appShell .invoice-modal .auth-field > input, [data-theme="dark"] #appShell .invoice-product-line select, [data-theme="dark"] #appShell .invoice-product-line input { border-color: #344b3f; background: #1c3026; color: #e9f0e9; } [data-theme="dark"] #appShell .invoice-detail-meta, [data-theme="dark"] #appShell .report-drilldown-row { border-color: #2f483a; background: #1b3025; } [data-theme="dark"] #appShell .invoice-detail-table-wrap, [data-theme="dark"] #appShell .invoice-detail-table th, [data-theme="dark"] #appShell .invoice-detail-table td { border-color: #2d4438; } [data-theme="dark"] #appShell .modal-backdrop { background: #020a07c9; } [data-theme="dark"] #appShell .danger-zone { border-color: #65413b; } [data-theme="dark"] #appShell .calendar-trigger, [data-theme="dark"] #appShell .ios-chip, [data-theme="dark"] #appShell .button-secondary, [data-theme="dark"] #appShell .ios-button-secondary { border-color: #344b3f; background: linear-gradient(180deg,#20352a,#1a2d23); color: #d7e5d9; box-shadow: 0 1px 3px #0004,inset 0 1px #ffffff09; } [data-theme="dark"] #appShell .calendar-trigger-icon, [data-theme="dark"] #appShell .home-org-monogram { background: #294333; color: #b7d7ba; } [data-theme="dark"] #appShell .calendar-trigger-copy b, [data-theme="dark"] #appShell .calendar-heading h2, [data-theme="dark"] #appShell .calendar-selected-heading b, [data-theme="dark"] #appShell .home-org-title h2, [data-theme="dark"] #appShell .home-org-details b, [data-theme="dark"] #appShell .home-invoice-main b, [data-theme="dark"] #appShell .home-invoice-amount { color: #e4eee5; } [data-theme="dark"] #appShell .calendar-trigger-copy small, [data-theme="dark"] #appShell .home-org-title p, [data-theme="dark"] #appShell .home-org-details span, [data-theme="dark"] #appShell .home-org-title small { color: #9eafa2; } [data-theme="dark"] #appShell .calendar-popover { border-color: #334b3c; background: #182b21; color: #e5eee5; box-shadow: 0 22px 60px #0009; } [data-theme="dark"] #appShell .calendar-day { color: #cad8cc; } [data-theme="dark"] #appShell .calendar-day:hover { background: #263d2f; } [data-theme="dark"] #appShell .calendar-day.outside-month, [data-theme="dark"] #appShell .calendar-weekdays span { color: #73877a; } [data-theme="dark"] #appShell .calendar-day.is-today { color: #b1d2b4; box-shadow: inset 0 0 0 1px #52765a; } [data-theme="dark"] #appShell .calendar-day.is-selected { background: #3d7755; color: #fff; } [data-theme="dark"] #appShell .calendar-selected-heading, [data-theme="dark"] #appShell .home-org-details, [data-theme="dark"] #appShell .home-org-details > div, [data-theme="dark"] #appShell .home-agenda-row, [data-theme="dark"] #appShell .home-invoice-row { border-color: #2a4034; } [data-theme="dark"] #appShell .calendar-note-item { border-color: #31493a; background: #20362a; } [data-theme="dark"] #appShell .calendar-note-item p, [data-theme="dark"] #appShell .home-agenda-copy p { color: #d0ded1; } [data-theme="dark"] #appShell .calendar-note-form textarea { border-color: #344b3f; background: #12241b; color: #e7efe8; } [data-theme="dark"] #appShell .home-agenda-date { background: #263d2e; color: #b5d8b6; } [data-theme="dark"] #appShell .home-agenda-date small, [data-theme="dark"] #appShell .home-agenda-copy small, [data-theme="dark"] #appShell .home-invoice-main small { color: #92a597; } [data-theme="dark"] #appShell .ios-chip:hover, [data-theme="dark"] #appShell .text-button:hover, [data-theme="dark"] #appShell .ios-text-button:hover { background: #263d2e; } @media (max-width: 1000px) { #appShell .sidebar { width: 224px; padding-right: 13px; padding-left: 13px; } #appShell .main-content { margin-left: 224px; } #appShell .nav-item { font-size:11.5px; } } @media (max-width: 760px) { #appShell .sidebar { width: 68px; padding: 19px 8px 12px; align-items: center; } #appShell .brand { width: 100%; justify-content: center; padding: 0 0 22px; } #appShell .brand-lockup { display: none; } #appShell .brand-symbol { display: grid; width: 36px; height: 36px; place-items: center; } #appShell .brand-symbol img { display: block; width: 100%; height: 100%; object-fit: contain; } #appShell .workspace-switch { width: 48px; min-height: 48px; justify-content: center; margin-bottom: 16px; padding: 6px; } #appShell .workspace-info, #appShell .workspace-switch .chevron, #appShell .nav-label, #appShell .nav-item:not(.active), #appShell .nav-item.active, #appShell .profile > div:not(.profile-avatar), #appShell .profile .more { font-size: 0; } #appShell .nav-item { width: 48px; min-height: 44px; height: 44px; justify-content: center; padding: 0; } #appShell .nav-menu { width: 100%; justify-items: center; } #appShell .sidebar-bottom { width: 100%; display: grid; justify-items: center; } #appShell .profile { width: 100%; justify-content: center; padding: 12px 0 0; } #appShell .main-content { margin-left: 68px; } #appShell .topbar { height: 58px; padding: 0 15px; } #appShell .top-actions { gap: 8px; } #appShell .today, #appShell .top-divider, #appShell .theme-label { display: none; } #appShell .theme-toggle { width: 35px; justify-content: center; padding: 0; } #appShell .page-content { min-height: calc(100vh - 58px); padding: 25px 15px 22px; } #appShell .page-heading { align-items: flex-start; gap: 14px; margin-bottom: 19px; } #appShell .page-heading h1 { font-size: 26px; } #appShell .subtitle { max-width: 280px; font-size:11.5px; } #appShell .button { min-height: 36px; padding: 0 11px; font-size:10.5px; } #appShell .stats-grid { gap: 9px; margin-bottom: 15px; } #appShell .stat-card { min-height: 118px; padding: 13px 12px; } #appShell .stat-top { font-size:10.5px; } #appShell .stat-value { margin-top: 9px; font-size: 17px; } #appShell .stat-foot { font-size:9px; line-height: 1.4; } #appShell .panel-heading { padding: 15px 14px 12px; } #appShell .filter-row { padding: 1px 13px 12px; flex-wrap: wrap; } #appShell .search-box { max-width: none; flex-basis: 100%; } #appShell .overview-chart-panel .panel-heading { align-items: flex-start; padding: 15px 13px 10px; } #appShell .overview-chart-panel .panel-heading h2 { font-size:14.5px; } #appShell .overview-chart-panel .panel-heading p { max-width: 190px; font-size:10.5px; } #appShell .chart-container { min-height: 205px; padding: 10px 5px 0; } #appShell .heading-actions { flex-wrap: wrap; } #appShell .calendar-trigger { min-width: 185px; gap: 8px; padding: 5px 8px; } #appShell .calendar-trigger-icon { width: 31px; height: 31px; } #appShell .calendar-trigger-copy b { font-size:13.5px; } #appShell .calendar-trigger-copy small { max-width: 118px; font-size:9px; } #appShell .calendar-popover { position: fixed; top: 64px; right: 10px; width: min(352px,calc(100vw - 88px)); max-height: calc(100vh - 78px); padding: 14px; } #appShell .home-org-details { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 12px; } #appShell .home-org-details > div { padding: 0 10px; border-right: 0; } #appShell .home-org-details > div:nth-child(odd) { padding-left: 0; } #appShell .home-org-details > div:last-child { grid-column: 1/-1; padding-left: 0; } #appShell .home-content-grid { grid-template-columns: 1fr; } } @media (max-width: 440px) { #appShell .breadcrumb > span:first-child, #appShell .breadcrumb .crumb-slash { display: none; } #appShell .breadcrumb { flex: 0 0 auto; } #appShell .page-heading { flex-wrap: wrap; } #appShell .page-heading > .button { margin-left: auto; } #appShell .heading-actions { width: 100%; } #appShell .heading-actions .button { flex: 1 1 auto; } #appShell .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #appShell .stat-card { min-height: 112px; } #appShell .stat-value { font-size:17px; } #appShell .type-filter-label { gap: 5px; } #appShell .type-filter { min-width: 75px; } #appShell .invoice-detail-meta { grid-template-columns: 1fr 1fr; } #appShell .danger-zone-actions { align-items: stretch; flex-direction: column; } #appShell .calendar-trigger { min-width: 0; gap: 6px; padding: 4px 6px; } #appShell .calendar-trigger-icon { width: 29px; height: 29px; } #appShell .calendar-trigger-copy small { max-width: 93px; } #appShell .calendar-trigger-chevron { display: none; } #appShell .calendar-popover { right: 5px; width: min(352px,calc(100vw - 82px)); padding: 12px; } #appShell .home-organization-head { gap: 9px; padding: 15px 13px 12px; } #appShell .home-org-monogram { width: 40px; height: 40px; border-radius: 13px; } #appShell .home-org-title h2 { font-size:15px; } #appShell .home-organization-head .ios-button { min-height: 33px; padding: 0 9px; font-size:9px; } #appShell .home-org-details { margin: 0 13px; } #appShell .home-org-shortcuts { gap: 6px; padding: 11px 13px 13px; } #appShell .ios-chip { gap: 5px; min-height: 31px; padding: 0 7px; font-size:9px; } #appShell .home-content-grid { gap: 11px; margin-top: 11px; } #appShell .home-invoice-filters { padding-right: 13px; padding-left: 13px; } #appShell .home-invoice-row { grid-template-columns: minmax(0,1fr) auto; } #appShell .home-invoice-amount { grid-column: 2; } #appShell .home-invoice-actions { grid-column: 1/-1; justify-content: flex-end; } } /* Organization branding and subscription status */ #appShell .organization-logo-editor { display:flex; align-items:center; gap:16px; padding:4px 20px 19px; } #appShell .organization-logo-preview { width:64px; height:64px; flex:none; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--mint); color:var(--green); font-size:22px; font-weight:800; } #appShell .organization-logo-preview img { width:100%; height:100%; object-fit:contain; } #appShell .organization-logo-copy { display:grid; gap:5px; } #appShell .organization-logo-copy b { color:var(--ink); font-size:14.5px; } #appShell .organization-logo-copy small { color:var(--muted); font-size:12.5px; } #appShell .organization-logo-actions { display:flex; align-items:center; gap:13px; margin-top:5px; } #appShell .organization-logo-actions .ios-button { cursor:pointer; } #appShell .home-org-monogram img { width:100%; height:100%; border-radius:inherit; object-fit:contain; } #appShell .workspace-avatar img { width:100%; height:100%; border-radius:inherit; object-fit:contain; } #appShell .subscription-status { display:flex; align-items:center; gap:12px; margin:4px 20px 20px; padding:15px 16px; border:1px solid var(--line); border-radius:14px; background:var(--canvas); } #appShell .subscription-status-dot { width:10px; height:10px; flex:none; border-radius:50%; background:#9aa69e; box-shadow:0 0 0 4px #9aa69e22; } #appShell .subscription-status>div { display:grid; gap:4px; } #appShell .subscription-status b { color:var(--ink); font-size:14.5px; } #appShell .subscription-status small { color:var(--muted); font-size:12.5px; } #appShell .subscription-status.is-active .subscription-status-dot { background:#35a36e; box-shadow:0 0 0 4px #35a36e22; } #appShell .subscription-status.is-inactive .subscription-status-dot { background:#d28c48; box-shadow:0 0 0 4px #d28c4822; } #appShell .subscription-status.is-unknown .subscription-status-dot { background:#8795b0; box-shadow:0 0 0 4px #8795b022; } #appShell .subscription-status.is-checking .subscription-status-dot { animation:subscriptionPulse 1s ease-in-out infinite alternate; } @keyframes subscriptionPulse { to { opacity:.35; transform:scale(.75); } } [data-theme="dark"] #appShell .organization-logo-preview { background:#294333; color:#b7d7ba; } [data-theme="dark"] #appShell .subscription-status { background:#10271f; } .subscription-gate { min-height:100vh; display:grid; place-items:center; padding:28px; color:#eaf1e9; background:radial-gradient(ellipse at 76% 20%,#215b43 0,transparent 40%),linear-gradient(145deg,#123c2d,#09271d 72%); } .subscription-gate-card { width:min(100%,760px); overflow:hidden; border:1px solid #aec4b42c; border-radius:26px; background:#10291fdd; box-shadow:0 28px 90px #00160e55; backdrop-filter:blur(18px); } .subscription-gate-brand { display:flex; align-items:center; gap:10px; padding:24px 30px; color:#f2f5ef; text-decoration:none; border-bottom:1px solid #aec4b41e; font:800 16px var(--serif); letter-spacing:.8px; } .subscription-gate-brand img { width:34px; height:34px; object-fit:contain; filter:brightness(0) invert(1); } .subscription-gate-brand small { display:block; margin-top:3px; color:#a7c2aa; font:700 9px var(--sans); letter-spacing:2px; } .subscription-gate-content { max-width:620px; margin:auto; padding:48px 38px 32px; } .subscription-gate-kicker { color:#c7d6b1; font-size:11.5px; font-weight:700; letter-spacing:1.7px; } .subscription-gate-content h1 { margin:13px 0 10px; color:#f4f6ef; font:700 clamp(27px,4vw,38px)/1.15 var(--serif); letter-spacing:-1.2px; } .subscription-gate-intro { max-width:530px; margin:0; color:#aec3b4; font-size:14.5px; line-height:1.7; } .subscription-gate-plan { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:28px 0 15px; padding:20px 22px; border:1px solid #b6c9ae33; border-radius:17px; background:linear-gradient(120deg,#1d4936aa,#173629aa); } .subscription-gate-plan>div { display:grid; gap:6px; } .subscription-gate-plan>div>small { color:#a6c4ac; font-size:10.5px; font-weight:700; letter-spacing:1.2px; } .subscription-gate-plan b { color:#f0f4ec; font-size:17px; } .subscription-gate-plan span { color:#a8bdb0; font-size:12.5px; } .subscription-gate-plan strong { color:#c7dda0; font:800 clamp(20px,3vw,28px) var(--serif); white-space:nowrap; } .subscription-gate-plan strong small { color:#abc0b2; font:500 12.5px var(--sans); } .subscription-gate-status { display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; padding:15px 16px; border:1px solid #b6c9ae2b; border-radius:13px; background:#0b2119a8; } .subscription-gate-status>div { display:grid; gap:4px; } .subscription-gate-status b { color:#edf3eb; font-size:14.5px; } .subscription-gate-status small { color:#a8bdb0; font-size:12.5px; line-height:1.55; } .subscription-gate-status .subscription-status-dot { width:10px; height:10px; flex:none; margin-top:3px; border-radius:50%; background:#d28c48; box-shadow:0 0 0 4px #d28c4822; } .subscription-gate-status.is-active .subscription-status-dot { background:#35a36e; box-shadow:0 0 0 4px #35a36e22; } .subscription-gate-status.is-requested .subscription-status-dot { background:#d8bd7a; box-shadow:0 0 0 4px #d8bd7a22; } .subscription-gate-contact { display:grid; grid-template-columns:1fr 1fr; gap:13px; } .subscription-contact-field { display:grid; gap:7px; color:#c1d0c5; font-size:12.5px; font-weight:600; } .subscription-contact-field input,.subscription-contact-field select { width:100%; min-height:44px; padding:0 13px; border:1px solid #b6c9ae38; border-radius:11px; outline:none; background:#0b2119d9; color:#edf3eb; font:500 14.5px var(--sans); } .subscription-contact-field input:focus,.subscription-contact-field select:focus { border-color:#a8c28c; box-shadow:0 0 0 3px #a8c28c1c; } .subscription-contact-field input::placeholder { color:#769081; } .subscription-contact-hint { grid-column:1/-1; margin:-5px 0 0; color:#8fa99a; font-size:11.5px; } .subscription-contact-consent { grid-column:1/-1; display:flex; align-items:flex-start; gap:9px; color:#a8bdb0; font-size:11.5px; line-height:1.5; cursor:pointer; } .subscription-contact-consent input { flex:none; width:15px; height:15px; margin:1px 0 0; accent-color:#97bc91; } .subscription-gate-action { width:100%; min-height:49px; justify-content:center; gap:10px; border-radius:13px; } .subscription-gate-action span { font-size:17px; } .subscription-gate-action:disabled { opacity:.65; cursor:wait; } .subscription-gate-refresh { display:block; margin:12px auto 0; padding:7px 10px; border:0; background:transparent; color:#a9c6b4; font:600 12.5px var(--sans); cursor:pointer; } .subscription-gate-refresh:hover { color:#e8f0e8; } .subscription-gate-note { margin:14px 0 0; color:#8fa99a; font-size:11.5px; line-height:1.6; text-align:center; } .subscription-gate-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 30px; border-top:1px solid #aec4b41e; color:#9bb2a2; font-size:11.5px; } .subscription-gate-footer button { padding:7px 0; border:0; background:transparent; color:#c5d5c8; font:600 11.5px var(--sans); cursor:pointer; } .subscription-gate-footer button:hover { color:#fff; } .subscription-gate.hidden { display:none; } @media(max-width:560px) { .subscription-gate { padding:14px; align-items:center; }.subscription-gate-card { border-radius:21px; }.subscription-gate-brand { padding:18px 20px; }.subscription-gate-content { padding:30px 20px 24px; }.subscription-gate-plan { align-items:flex-start; flex-direction:column; padding:17px; gap:14px; }.subscription-gate-contact { grid-template-columns:1fr; }.subscription-contact-hint,.subscription-contact-consent { grid-column:auto; }.subscription-gate-footer { padding:13px 20px; } } #appShell .password-confirm-modal h2 { margin-top:10px; } #appShell .password-confirm-modal form { display:grid; gap:12px; margin-top:20px; } #appShell .password-confirm-modal .modal-actions { margin-top:2px; } #appShell .password-confirm-error { margin:0; color:#c55245; font-size:13.5px; } #appShell .password-confirm-modal button:disabled { opacity:.6; cursor:wait; } /* Match the dark workspace canvas to the branded login artwork. */ [data-theme="dark"] #appShell .main-content, [data-theme="dark"] #appShell .page-content { background: radial-gradient(ellipse at 75% 22%, #215b43 0, transparent 42%), linear-gradient(145deg, #123c2d, #09271d 72%); } #appShell .invoice-status-editor { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--canvas); } #appShell .invoice-status-editor.hidden { display:none; } #appShell .invoice-status-editor-heading { grid-column:1/-1; display:grid; gap:4px; } #appShell .invoice-status-editor-heading b { color:var(--ink); font-size:14.5px; } #appShell .invoice-status-editor-heading small { color:var(--muted); font-size:12.5px; } #appShell .invoice-status-editor label { display:grid; gap:7px; color:var(--muted); font-size:12.5px; } #appShell .invoice-status-editor select,#appShell .invoice-status-editor input { min-width:0; height:39px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; } #appShell .invoice-status-editor-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; } [data-theme="dark"] #appShell .invoice-status-editor { border-color:#31483c; background:#10271f; } [data-theme="dark"] #appShell .invoice-status-editor select,[data-theme="dark"] #appShell .invoice-status-editor input { border-color:#344b3f; background:#1c3026; color:#e9f0e9; } @media(max-width:560px) { #appShell .invoice-status-editor { grid-template-columns:1fr; } #appShell .invoice-status-editor-heading,#appShell .invoice-status-editor-actions { grid-column:auto; } } /* Let navigation and the calendar bar share the page canvas in both themes. */ #appShell .sidebar { background: radial-gradient(ellipse at 75% 22%, #215b43 0, transparent 42%), linear-gradient(145deg, #123c2d, #09271d 72%); } #appShell .main-content, #appShell .page-content { background: radial-gradient(ellipse at 75% 22%, #e5efe5 0, transparent 42%), linear-gradient(145deg, #f3f6f1, #e8efe8 72%); } #appShell .topbar { background: radial-gradient(ellipse at 75% 22%, #e5efe5 0, transparent 42%), linear-gradient(145deg, #f3f6f1ed, #e8efe8ed 72%); border-color: #dce6dc; } [data-theme="dark"] #appShell .sidebar { background: radial-gradient(ellipse at 75% 22%, #215b43 0, transparent 42%), linear-gradient(145deg, #123c2d, #09271d 72%); } [data-theme="dark"] #appShell .main-content, [data-theme="dark"] #appShell .page-content, [data-theme="dark"] #appShell .topbar { background: radial-gradient(ellipse at 75% 22%, #215b43 0, transparent 42%), linear-gradient(145deg, #123c2d, #09271d 72%); border-color: #29483a; } /* The invoice modal is mounted outside #appShell, so its status editor uses global component rules. */ .invoice-status-editor { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 16px; margin: 18px 0 6px; padding: 18px; border: 1px solid #dfe8df; border-radius: 15px; background: linear-gradient(145deg, #f8faf7, #eef4ee); } .invoice-status-editor.hidden { display: none; } .invoice-status-editor-heading { display: grid; gap: 5px; grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid #e1e9e1; } .invoice-status-editor-heading b { color: #20372a; font-size:15px; } .invoice-status-editor-heading small { color: #78887d; font-size:12.5px; } .invoice-status-editor label { display: grid; gap: 8px; color: #607166; font-size:12.5px; font-weight: 650; } .invoice-status-editor select, .invoice-status-editor input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #d7e1d8; border-radius: 10px; background: #fff; color: #263c2e; font: 600 13.5px var(--sans); } .invoice-status-editor-actions { display: flex; justify-content: flex-end; grid-column: 1 / -1; gap: 9px; padding-top: 4px; } [data-theme="dark"] .invoice-status-editor { border-color: #31483c; background: linear-gradient(145deg, #193127, #12271e); } [data-theme="dark"] .invoice-status-editor-heading { border-color: #2c4437; } [data-theme="dark"] .invoice-status-editor-heading b { color: #edf4ed; } [data-theme="dark"] .invoice-status-editor-heading small, [data-theme="dark"] .invoice-status-editor label { color: #a7baaa; } [data-theme="dark"] .invoice-status-editor select, [data-theme="dark"] .invoice-status-editor input { border-color: #385144; background: #20372c; color: #edf4ed; } @media(max-width:560px) { .invoice-status-editor { grid-template-columns: 1fr; padding: 14px; } .invoice-status-editor-heading, .invoice-status-editor-actions { grid-column: auto; } .invoice-status-editor-actions { flex-wrap: wrap; } } /* Softer neutral canvas for the light theme. */ #appShell .main-content, #appShell .page-content { background: radial-gradient(ellipse at 75% 22%, #e6eae7 0, transparent 42%), linear-gradient(145deg, #e9ece9, #dce2de 72%); } #appShell .topbar { background: radial-gradient(ellipse at 75% 22%, #edf0ed 0, transparent 42%), linear-gradient(145deg, #e9ece9ed, #dce2deed 72%); border-color: #d5ddd7; } /* Clearly neutral white-to-gray gradient for the light theme. */ #appShell .main-content, #appShell .page-content { background: radial-gradient(ellipse at 78% 15%, #ffffff 0, #f5f5f5 24%, transparent 58%), linear-gradient(145deg, #f2f3f2 0%, #d8dbd9 48%, #c5c9c7 100%); } #appShell .topbar { background: linear-gradient(110deg, #f4f5f4 0%, #e3e5e4 56%, #d2d6d3 100%); border-color: #d0d4d1; } /* Explicit light-theme override: neutral gray canvas distinct from white panels. */ html[data-theme="light"] #appShell .main-content, html[data-theme="light"] #appShell .page-content { background-color: #d4d6d5 !important; background-image: radial-gradient(ellipse at 78% 12%, #ffffff 0%, #f3f3f3 22%, transparent 58%), linear-gradient(145deg, #ededed 0%, #d0d2d1 52%, #bfc2c0 100%) !important; } html[data-theme="light"] #appShell .topbar { background-color: #e1e2e1 !important; background-image: linear-gradient(110deg, #f2f2f2 0%, #dedfdf 55%, #cbcecc 100%) !important; } /* ESF deadline tracking */ #appShell .home-esf-panel { margin-top:15px; } #appShell .home-esf-list { display:grid; gap:9px; padding:0 18px 16px; } #appShell .home-esf-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--canvas); } #appShell .home-esf-row > div { display:grid; gap:4px; min-width:0; } #appShell .home-esf-row b { overflow:hidden; color:var(--ink); font-size:13.5px; text-overflow:ellipsis; white-space:nowrap; } #appShell .home-esf-row small { color:var(--muted); font-size:11.5px; } #appShell .esf-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; } #appShell .esf-summary-card { display:grid; gap:8px; min-height:115px; padding:19px 20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 5px 18px #173b2a0a; } #appShell .esf-summary-card small,#appShell .esf-summary-card span { color:var(--muted); font-size:12.5px; } #appShell .esf-summary-card b { color:var(--ink); font-size:27px; letter-spacing:-.04em; } #appShell .esf-summary-overdue { border-color:#efc8bf; } #appShell .esf-summary-issued { border-color:#cfe2d4; } #appShell .esf-panel .table-wrap { overflow-x:auto; } #appShell .esf-table { min-width:980px; width:100%; border-collapse:collapse; } #appShell .esf-table th,#appShell .esf-table td { padding:13px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } #appShell .esf-table th { color:var(--muted); background:var(--canvas); font-size:10.5px; letter-spacing:.08em; } #appShell .esf-table td { color:var(--ink); font-size:12.5px; } #appShell .esf-table td:first-child { min-width:155px; } #appShell .esf-table td:first-child b,#appShell .esf-table td:first-child small { display:block; margin-bottom:4px; } #appShell .esf-table td:first-child small { color:var(--muted); } #appShell .esf-open-invoice { display:block; padding:0; } #appShell .esf-date-input,#appShell .esf-number-input,#appShell .esf-status-select { height:36px; padding:0 9px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; font-size:11.5px; } #appShell .esf-date-input { width:145px; } #appShell .esf-number-input { width:155px; } #appShell .esf-status-select { width:145px; } #appShell .esf-row-actions { display:flex; align-items:center; gap:7px; } #appShell .esf-row-actions .ios-button { min-height:34px; padding:0 10px; font-size:11.5px; } #appShell .esf-status { display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px; background:#edf2ed; color:#496457; font-size:11.5px; font-weight:700; white-space:nowrap; } #appShell .esf-status.pending,#appShell .esf-status.today { background:#fff1d8; color:#93651e; } #appShell .esf-status.overdue { background:#fae8e5; color:#a34236; } #appShell .esf-status.issued { background:#e4f2e8; color:#277047; } #appShell .esf-status.missing { background:#ececf4; color:#615d79; } #appShell .esf-status.muted { background:#eef0ed; color:#68766c; } #appShell .esf-missing { color:#a34236; } #appShell .esf-note { margin:13px 2px; color:var(--muted); font-size:12.5px; line-height:1.6; } [data-theme="dark"] #appShell .esf-summary-overdue { border-color:#65443f; } [data-theme="dark"] #appShell .esf-summary-issued { border-color:#345742; } [data-theme="dark"] #appShell .esf-status.pending,[data-theme="dark"] #appShell .esf-status.today { background:#4a3922; color:#efc56b; } [data-theme="dark"] #appShell .esf-status.overdue { background:#482d2b; color:#f0a49b; } [data-theme="dark"] #appShell .esf-status.issued { background:#254332; color:#9bd3aa; } [data-theme="dark"] #appShell .esf-status.missing { background:#373447; color:#c4bce2; } @media(max-width:720px) { #appShell .esf-summary-grid { grid-template-columns:1fr; gap:9px; } #appShell .esf-summary-card { min-height:90px; } #appShell .home-esf-row { align-items:flex-start; flex-direction:column; } } #appShell .service-description { min-height: 16px; margin: -3px 0 9px; color: var(--muted); font-size:12.5px; } /* Counterparty reconciliation statement */ .reconciliation-dialog { max-width: 620px; } .reconciliation-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; } .reconciliation-form .modal-actions,.reconciliation-hint { grid-column:1 / -1; } .reconciliation-form .modal-actions { margin-top:0; } .reconciliation-hint { margin:0; color:var(--muted); font-size:12.5px; line-height:1.55; } @media(max-width:560px) { .reconciliation-form { grid-template-columns:1fr; } .reconciliation-form .modal-actions,.reconciliation-hint { grid-column:auto; } } .subscription-price-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 21px 14px;padding:17px 18px;border:1px solid #e2ebe4;border-radius:12px;background:linear-gradient(120deg,#f4f8f4,#edf3ef)} .subscription-price-card>div{display:grid;gap:5px}.subscription-price-card>div b{font-size:14.5px;color:#23372c}.subscription-price-card>div small{font-size:11.5px;color:#77877c}.subscription-price-card>strong{color:#155e45;font-size:22px;white-space:nowrap}.subscription-price-card>strong small{font-size:12.5px;font-weight:500;color:#708178} [data-theme="dark"] #appShell .subscription-price-card{border-color:#344b3f;background:linear-gradient(120deg,#1d3529,#172c23)} [data-theme="dark"] #appShell .subscription-price-card>div b{color:#e4eee6}[data-theme="dark"] #appShell .subscription-price-card>div small,[data-theme="dark"] #appShell .subscription-price-card>strong small{color:#9eb2a2}[data-theme="dark"] #appShell .subscription-price-card>strong{color:#a7d8b8} .mobile-tabbar,.mobile-more-menu{display:none} @media(max-width:760px){ #appShell .sidebar{display:none} #appShell .main-content{margin-left:0;padding-bottom:calc(72px + env(safe-area-inset-bottom))} #appShell .topbar{position:sticky;top:0;z-index:8;height:56px;padding:0 14px;backdrop-filter:blur(16px)} #appShell .breadcrumb{font-size:11.5px} #appShell .top-actions{gap:7px} #appShell .calendar-trigger{min-width:0;max-width:132px} #appShell .page-content{padding:19px 13px 20px;min-height:calc(100vh - 56px)} #appShell .page-heading{margin-bottom:15px} #appShell .page-heading h1{font-size:24px;line-height:1.18} #appShell .subtitle{font-size:12.5px;line-height:1.45} #appShell .work-panel{border-radius:14px} #appShell .panel-heading{padding:15px 14px 12px} #appShell .mobile-tabbar{position:fixed;z-index:20;inset:auto 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:7px 7px calc(7px + env(safe-area-inset-bottom));border-top:1px solid #dfe7e1;background:rgba(250,252,250,.94);backdrop-filter:blur(18px);box-shadow:0 -5px 20px #10251b12} #appShell .mobile-tabbar .nav-item,#appShell .mobile-tab-more{min-width:0;width:100%;height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:3px 1px;border:0;border-radius:10px;background:transparent;color:#738179;text-decoration:none;font:500 10.5px var(--sans);white-space:nowrap} #appShell .mobile-tabbar .nav-icon{width:auto;font-size:19px;line-height:20px;color:currentColor} #appShell .mobile-tabbar .active{background:#eaf2ed;color:var(--green);font-weight:700} #appShell .mobile-tab-more{width:100%;cursor:pointer} #appShell .mobile-tab-more[aria-expanded="true"]{color:var(--green)} #appShell .mobile-more-menu{position:fixed;z-index:21;right:10px;bottom:calc(69px + env(safe-area-inset-bottom));display:grid;width:min(280px,calc(100vw - 20px));gap:3px;padding:9px;border:1px solid #e2e9e3;border-radius:15px;background:rgba(255,255,255,.97);box-shadow:0 12px 35px #12251b26;backdrop-filter:blur(18px)} #appShell .mobile-more-menu .nav-item{min-height:42px;padding:0 12px;border-radius:9px;color:#506157;font-size:13.5px;text-decoration:none} #appShell .mobile-more-menu .nav-item.active{background:#eaf2ed;color:#155e45;font-weight:700} [data-theme="dark"] #appShell .mobile-tabbar{border-color:#2c4436;background:rgba(13,35,26,.94)} [data-theme="dark"] #appShell .mobile-tabbar .nav-item,[data-theme="dark"] #appShell .mobile-tab-more{color:#a5b6a9} [data-theme="dark"] #appShell .mobile-tabbar .active{background:#203d2c;color:#b4d7b9} [data-theme="dark"] #appShell .mobile-more-menu{border-color:#344b3f;background:rgba(20,43,32,.97)} [data-theme="dark"] #appShell .mobile-more-menu .nav-item{color:#c6d4c8} #appShell .subscription-price-card{margin:0 14px 12px;padding:14px} #appShell .subscription-price-card>strong{font-size:19px} } @media(max-width:440px){ #appShell .topbar{padding-inline:11px} #appShell .calendar-trigger{max-width:112px;padding-inline:6px} #appShell .calendar-trigger-copy small{font-size:8px} #appShell .page-content{padding-inline:11px} #appShell .mobile-tabbar{padding-inline:4px} #appShell .mobile-tabbar .nav-item,#appShell .mobile-tab-more{font-size:9px} #appShell .subscription-price-card{align-items:flex-start;flex-direction:column;gap:9px} } #appShell .mobile-tabbar .nav-item:not(.active),#appShell .mobile-tabbar .nav-item.active{font-size:10.5px} @media(max-width:440px){#appShell .mobile-tabbar .nav-item:not(.active),#appShell .mobile-tabbar .nav-item.active{font-size:9px}} /* Monthly subscription tiers */ .subscription-interval-picker{display:flex;gap:8px;margin:18px 0 12px;padding:4px;border:1px solid #b6c9ae2b;border-radius:12px;background:#0b211980} .subscription-interval-picker label{flex:1;cursor:pointer}.subscription-interval-picker input{position:absolute;width:1px;height:1px;opacity:0} .subscription-interval-picker label span{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:6px 9px;border-radius:9px;color:#a8bdb0;font-size:11.5px} .subscription-interval-picker label b{padding:3px 5px;border-radius:999px;background:#c7dda022;color:#c7dda0;font-size:9px} .subscription-interval-picker input:checked+span{background:#1a4935a6;color:#f0f4ec;box-shadow:0 0 0 1px #9ec59c55} .subscription-interval-picker input:focus-visible+span{outline:2px solid #83b8e8;outline-offset:2px} .organization-addon-price{margin:16px 0;padding:14px 16px;border:1px solid #a6c99438;border-radius:13px;background:#b7d4930d;color:#c7dda0;font-size:16px;font-weight:700} .organization-addon-price:empty{display:none} .organization-addon-price~.editor-form .checkbox-label{display:flex;align-items:flex-start;gap:9px;line-height:1.5} .organization-addon-price~.editor-form .checkbox-label input{width:16px;min-width:16px;height:16px;margin:1px 0 0;accent-color:#c7dda0} .subscription-plan-grid{display:grid;gap:8px;margin:20px 0 16px} .subscription-plan-option{display:block;cursor:pointer} .subscription-plan-option>input{position:absolute;width:1px;height:1px;opacity:0} .subscription-plan-option-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 12px;padding:12px 14px;border:1px solid #b6c9ae33;border-radius:13px;background:#0b211980;transition:border-color .18s,background .18s,box-shadow .18s} .subscription-plan-option-body>b{display:flex;align-items:center;gap:8px;color:#edf3eb;font-size:13.5px} .subscription-plan-option-body>b i{padding:3px 6px;border-radius:999px;background:#c7dda022;color:#c7dda0;font-size:9px;font-style:normal} .subscription-plan-option-body>strong{color:#c7dda0;font-size:17px;white-space:nowrap} .subscription-plan-option-body>strong small{color:#a8bdb0;font-size:10.5px;font-weight:500} .subscription-plan-option-body>small{grid-column:1/-1;color:#a8bdb0;font-size:11.5px;line-height:1.4} .subscription-plan-option>input:checked+.subscription-plan-option-body{border-color:#9ec59c;background:#1a4935a6;box-shadow:0 0 0 2px #9ec59c20} .subscription-plan-option>input:focus-visible+.subscription-plan-option-body{outline:2px solid #83b8e8;outline-offset:2px} .subscription-plan-option.is-featured .subscription-plan-option-body{border-color:#c7dda044} .subscription-settings-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 21px 14px} .subscription-settings-plan{display:grid;align-content:start;gap:8px;min-height:112px;padding:14px;border:1px solid #e2ebe4;border-radius:12px;background:linear-gradient(120deg,#f4f8f4,#edf3ef)} .subscription-settings-plan>b{color:#23372c;font-size:13.5px} .subscription-settings-plan>strong{color:#155e45;font-size:20px;white-space:nowrap} .subscription-settings-plan>strong small{color:#708178;font-size:11.5px;font-weight:500} .subscription-settings-plan>span{color:#77877c;font-size:11.5px;line-height:1.45} .subscription-settings-plan.is-featured{border-color:#a9cbb4;box-shadow:inset 0 2px #1a7654} [data-theme="dark"] #appShell .subscription-settings-plan{border-color:#344b3f;background:linear-gradient(120deg,#1d3529,#172c23)} [data-theme="dark"] #appShell .subscription-settings-plan>b{color:#e4eee6} [data-theme="dark"] #appShell .subscription-settings-plan>strong{color:#a7d8b8} [data-theme="dark"] #appShell .subscription-settings-plan>strong small,[data-theme="dark"] #appShell .subscription-settings-plan>span{color:#9eb2a2} @media(max-width:760px){#appShell .subscription-settings-plans{grid-template-columns:1fr;margin:0 14px 12px}.subscription-settings-plan{min-height:0;padding:12px}} .money-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 18px}.money-stats .stat-card{min-height:110px}.money-accounts-panel,.money-ledger-panel{margin-top:18px}.money-account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:0 20px 20px}.money-account-card{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 5px 18px #18352808}.money-account-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--mint);color:var(--green);font-size:17px;font-weight:700}.money-account-copy{display:grid;gap:3px;min-width:0}.money-account-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}.money-account-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11.5px}.money-account-card>strong{grid-column:2;font-size:17px;font-variant-numeric:tabular-nums}.money-table{min-width:740px}.money-type-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:#e9f4ec;color:#24724d;font-size:11.5px;font-weight:700;white-space:nowrap}.money-type-pill.expense{background:#fff0ed;color:#a94b41}.money-type-pill.transfer{background:#eef2f8;color:#4d648b}.money-amount{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}.money-amount.income{color:#24724d}.money-amount.expense{color:#a94b41}.money-ledger-panel>.panel-heading{align-items:center}.money-ledger-panel>.panel-heading input{flex:none}[data-theme="dark"] .money-account-card{border-color:#30473a;background:#192f25;box-shadow:none}[data-theme="dark"] .money-account-icon{background:#254637;color:#c0dcae}[data-theme="dark"] .money-type-pill{background:#203e2d;color:#bdd7b8}[data-theme="dark"] .money-type-pill.expense{background:#46302d;color:#e4aaa0}[data-theme="dark"] .money-type-pill.transfer{background:#293849;color:#b4c5e2}[data-theme="dark"] .money-amount.income{color:#b9dba8}[data-theme="dark"] .money-amount.expense{color:#e5a79c}@media(max-width:760px){.money-stats{grid-template-columns:1fr}.money-stats .stat-card{min-height:86px}.money-ledger-panel>.panel-heading{align-items:flex-start;flex-direction:column}.money-ledger-panel>.panel-heading input{width:100%}.money-account-grid{grid-template-columns:1fr;padding:0 14px 15px}.money-table{min-width:700px}} #appShell .home-assets-panel { width:100%; min-height:150px; margin-top:15px; padding-bottom:9px; overflow:hidden; } #appShell .home-assets-panel>.panel-heading { min-height:0; padding:12px 14px 6px; } #appShell .home-assets-total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 11px 6px; padding:7px 10px; border-radius:11px; background:var(--canvas); } #appShell .home-assets-total small,#appShell .home-asset-row small { display:block; color:var(--muted); font-size:11.5px; } #appShell .home-assets-total b { color:var(--ink); font-size:19px; letter-spacing:-.04em; } #appShell .home-assets-list { display:grid; grid-template-columns:1fr; gap:5px; padding:0 11px; } #appShell .home-asset-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 9px; border:1px solid var(--line); border-radius:10px; } #appShell .home-asset-row b { color:var(--ink); font-size:12.5px; } #appShell .home-asset-row strong { color:var(--ink); font-size:13.5px; white-space:nowrap; } #appShell .home-assets-panel .home-empty { padding:5px 9px 8px; font-size:11.5px; } #appShell #moneyRows [data-money-row] { cursor:pointer; } #appShell #moneyRows [data-money-row]:hover { background:color-mix(in srgb,var(--canvas) 70%,transparent); } #appShell .cash-flow-custom.hidden { display:none; } #appShell .invoice-edit-lines { grid-column:1/-1; display:grid; gap:10px; } #appShell .invoice-edit-line { display:grid; grid-template-columns:2fr .8fr .9fr 1fr; gap:10px; padding:12px; border:1px solid var(--line); border-radius:11px; } #appShell .invoice-edit-line label,#appShell .invoice-edit-editor>label { display:grid; gap:6px; color:var(--muted); font-size:12.5px; } #appShell .invoice-edit-line input,#appShell .invoice-edit-editor>label select,#appShell .invoice-edit-editor>label input { min-width:0; width:100%; height:38px; padding:0 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; } #appShell .invoice-edit-editor.hidden { display:none; } @media(max-width:680px){#appShell .invoice-edit-line{grid-template-columns:1fr 1fr;}#appShell .home-assets-panel{width:100%;}#appShell .home-assets-total{margin-inline:11px}#appShell .home-assets-list{padding-inline:11px}} #appShell .home-content-grid { grid-template-areas:"notes recent" "assets recent"; grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr); } #appShell .home-notes-panel { grid-area:notes; } #appShell .home-assets-panel { grid-area:assets; margin-top:0; } #appShell .home-recent-panel { grid-area:recent; } @media(max-width:680px){#appShell .home-content-grid{grid-template-areas:"notes" "assets" "recent";grid-template-columns:1fr;}} /* Settings hub tabs */ .settings-tabs{display:flex;gap:7px;overflow-x:auto;margin:0 0 20px;padding:5px;border:1px solid var(--line,#29463a);border-radius:13px;background:var(--panel,#153329);scrollbar-width:thin}.settings-tab{flex:none;min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted,#9fb2a8);font:600 13.5px var(--sans,inherit);cursor:pointer;transition:background .18s,color .18s,border-color .18s}.settings-tab:hover{color:var(--text,#e7efe9);background:#ffffff0a}.settings-tab.is-active{color:var(--text,#e7efe9);background:#245441;border-color:#3a6b54;box-shadow:0 2px 8px #00000012}.settings-tabs+.settings-panel{margin-top:0} @media(max-width:640px){.settings-tabs{margin-bottom:14px;gap:4px;padding:4px;border-radius:11px}.settings-tab{min-height:38px;padding:0 12px;font-size:12.5px}} .account-menu{position:absolute;right:0;bottom:58px;z-index:30;width:232px;padding:7px;border:1px solid #315343;border-radius:13px;background:#143326;box-shadow:0 16px 38px #06191070}.account-menu-item{width:100%;min-height:42px;display:flex;align-items:center;gap:11px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:#dce9df;text-align:left;text-decoration:none;font:500 13.5px var(--sans,inherit);cursor:pointer}.account-menu-item:hover,.account-menu-item:focus-visible{background:#ffffff12;color:#fff;outline:none}.account-menu-item .nav-icon{flex:none}.account-menu-item.logout-button{color:#e6aaa0}.account-menu-item.logout-button:hover{background:#6e332d40;color:#ffc0b5}.sidebar-bottom{position:relative}.profile{position:relative}.account-menu-toggle{width:34px;height:34px;display:grid;place-items:center;flex:none;padding:0;border:0;border-radius:9px;background:transparent;color:inherit;cursor:pointer}.account-menu-toggle:hover,.account-menu-toggle[aria-expanded="true"]{background:#ffffff12}.account-menu-toggle:focus-visible{outline:2px solid #7fa58b;outline-offset:1px}.account-menu-toggle .more{font-size:18px;letter-spacing:1px;line-height:1}.profile-copy{min-width:0}@media(max-width:760px){#appShell .account-menu{position:fixed;left:76px;right:auto;bottom:72px;width:232px}#appShell .account-menu-toggle{width:44px;height:44px}#appShell .account-menu-toggle .more{font-size:18px!important}} .money-account-edit{justify-self:end;grid-column:2;min-height:30px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--green);font:600 11.5px var(--sans,inherit);cursor:pointer}.money-account-edit:hover{background:var(--mint);border-color:#9bbba5}[data-theme="dark"] .money-account-edit{color:#c7ddb9;border-color:#3b5848}[data-theme="dark"] .money-account-edit:hover{background:#254333;border-color:#62836d} .report-chart-heading{gap:18px;align-items:flex-end!important;justify-content:space-between}.report-chart-controls{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;flex-wrap:wrap}.report-chart-controls .type-filter-label{min-width:115px}.report-chart-controls .type-filter{min-width:124px}@media(max-width:760px){.report-chart-heading{align-items:stretch!important;flex-direction:column}.report-chart-controls{justify-content:flex-start}.report-chart-controls .type-filter-label{flex:1;min-width:110px}.report-chart-controls .type-filter{width:100%;min-width:0}} .report-axis-label{fill:var(--muted,#9fb2a8);font:10.5px var(--sans)}.chart-hit-area{fill:transparent;pointer-events:all}.chart-column{cursor:pointer;outline:none}.chart-column:hover .chart-bar,.chart-column:hover .chart-bar-paid{filter:brightness(1.12)}.chart-column:focus-visible .chart-hit-area{fill:#ffffff0a;stroke:#8cb89a;stroke-width:1.5}.report-selection{margin:0 20px 20px;padding:16px;border:1px solid var(--line,#29463a);border-radius:14px;background:var(--surface,#153329);color:var(--text,#e7efe9);animation:report-selection-in .18s ease-out}.report-selection-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.report-selection-heading>div{display:grid;gap:5px}.report-selection-heading span{font-size:10.5px;letter-spacing:1px;color:var(--muted,#9fb2a8);font-weight:700}.report-selection-heading h3{margin:0;font-size:16px}.report-selection-heading button{width:32px;height:32px;border:1px solid var(--line,#29463a);border-radius:9px;background:transparent;color:var(--muted,#9fb2a8);font-size:20px;cursor:pointer}.report-selection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.report-selection-grid article{display:grid;gap:7px;padding:13px;border:1px solid var(--line,#29463a);border-radius:11px;background:#0d251c33}.report-selection-grid article>span{font-size:12.5px;color:var(--muted,#9fb2a8)}.report-selection-grid article>b{font-size:20px;font-variant-numeric:tabular-nums}.report-selection-grid article>small{font-size:12.5px;color:var(--muted,#9fb2a8)}@keyframes report-selection-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.report-selection{margin:0 14px 15px;padding:13px}.report-selection-grid{grid-template-columns:1fr;gap:7px}.report-selection-grid article{grid-template-columns:1fr auto;align-items:center}.report-selection-grid article>b{grid-column:2;grid-row:1/3}.report-selection-grid article>small{grid-column:1}} html[data-theme="light"] .invoice-details-modal .invoice-detail-table-wrap{background:#f5f8f4;border-color:#dce5dc}html[data-theme="light"] .invoice-details-modal .invoice-detail-table{color:#304238}html[data-theme="light"] .invoice-details-modal .invoice-detail-table th{background:#e6ede6;color:#617468;border-color:#d8e2d8}html[data-theme="light"] .invoice-details-modal .invoice-detail-table td{background:#f7f9f6;color:#405247;border-color:#e0e8e0}html[data-theme="light"] .invoice-details-modal .invoice-detail-table tbody tr:nth-child(even) td{background:#eff4ef}html[data-theme="light"] .invoice-details-modal .invoice-detail-table tbody tr:hover td{background:#e8f0e8} html[data-theme="dark"] .invoice-details-modal .invoice-detail-table-wrap{background:#172a20;border-color:#30483a}html[data-theme="dark"] .invoice-details-modal .invoice-detail-table{color:#d6e2d8}html[data-theme="dark"] .invoice-details-modal .invoice-detail-table th{background:#243b2e;color:#a9c1ae;border-color:#344e3e}html[data-theme="dark"] .invoice-details-modal .invoice-detail-table td{background:#192e23;color:#d0ddd2;border-color:#2a4133}html[data-theme="dark"] .invoice-details-modal .invoice-detail-table tbody tr:nth-child(even) td{background:#1c3327}html[data-theme="dark"] .invoice-details-modal .invoice-detail-table tbody tr:hover td{background:#254333} #appShell .money-stats .money-stat-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;align-content:start;justify-items:start;gap:9px;min-height:132px;padding:19px 20px;text-align:left;cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .16s} #appShell .money-stats .money-stat-card>span{display:block;width:100%;color:var(--muted);font-size:13.5px;line-height:1.45;white-space:normal} #appShell .money-stats .money-stat-card>strong{display:block;color:var(--ink);font-size:clamp(21px,2vw,27px);line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} #appShell .money-stats .money-stat-card>small{display:block;align-self:end;color:var(--muted);font-size:11.5px;line-height:1.45;white-space:normal} #appShell .money-stats .money-stat-card:hover{transform:translateY(-2px);border-color:#79a98a;box-shadow:0 9px 24px #163b291c} #appShell .money-stats .money-stat-card:focus-visible{outline:2px solid #73a9d8;outline-offset:3px} #appShell .money-stats .money-stat-card[aria-pressed="true"]{border-color:#76aa88;box-shadow:0 0 0 2px #76aa8828} [data-theme="dark"] #appShell .money-stats .money-stat-card>span,[data-theme="dark"] #appShell .money-stats .money-stat-card>small{color:#a5b9aa} [data-theme="dark"] #appShell .money-stats .money-stat-card>strong{color:#edf3ee} #appShell .money-trend-panel{margin:0 0 18px;overflow:hidden} #appShell .money-trend-panel .panel-heading{gap:14px} #appShell .money-chart-scroll{overflow-x:auto;padding:2px 18px 0;scrollbar-width:thin} #appShell .money-chart-svg{display:block;width:100%;min-width:700px;height:auto;overflow:visible} .money-chart-gridline{stroke:var(--line);stroke-width:1}.money-chart-zero{stroke:var(--muted);stroke-width:1.2;opacity:.7} .money-chart-axis,.money-chart-day{fill:var(--muted);font:11.5px var(--sans)}.money-chart-bar{fill:#4e9a70;opacity:.9}.money-chart-bar.income{fill:#4e9a70}.money-chart-bar.expense{fill:#cb826c}.money-chart-bar.balance{fill:#b7cf8d} .money-chart-bar-group{cursor:help}.money-chart-bar-group:hover .money-chart-bar{filter:brightness(1.17)} .money-chart-legend{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 18px 18px;color:var(--muted);font-size:12.5px}.money-chart-legend i{width:9px;height:9px;border-radius:3px;background:#4e9a70}.money-chart-legend i.expense{background:#cb826c}.money-chart-legend i.balance{background:#b7cf8d}.money-chart-legend small{margin-left:8px;font-size:11.5px} [data-theme="dark"] .money-chart-gridline{stroke:#2b4638}[data-theme="dark"] .money-chart-zero{stroke:#829b89}[data-theme="dark"] .money-chart-axis,[data-theme="dark"] .money-chart-day{fill:#9eb2a3} @media(max-width:760px){#appShell .money-stats .money-stat-card{min-height:108px;padding:15px 16px;gap:6px}#appShell .money-trend-panel .panel-heading{align-items:flex-start}#appShell .money-chart-scroll{padding-inline:8px}.money-chart-legend{flex-wrap:wrap;padding-inline:10px}.money-chart-legend small{width:100%;margin:0;text-align:center}} /* График-волна (waveChart в app.js): линия прорисовывается, заливка поднимается от нуля, точки появляются последними. */ .wave-chart{display:block;width:100%;height:auto;overflow:visible} .money-chart-scroll .wave-chart{min-width:700px} .wave-line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:wave-draw 1.2s cubic-bezier(.45,0,.2,1) forwards} .wave-area{transform-box:view-box;opacity:0;animation:wave-rise .9s cubic-bezier(.2,.8,.2,1) forwards} .wave-dot{opacity:0;stroke:var(--panel,#142d23);stroke-width:2;transition:opacity .15s,r .15s} .wave-dot.has-value{animation:wave-dot-in .3s 1s ease-out forwards} .wave-guide{stroke:var(--muted,#9fb2a8);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .15s} .wave-zero{stroke:var(--muted,#9fb2a8);stroke-width:1.2;opacity:.7} .wave-column{outline:none}.wave-column[role="button"]{cursor:pointer} .wave-column:hover .wave-guide,.wave-column:focus-visible .wave-guide{opacity:.8} .wave-column:hover .wave-dot,.wave-column:focus-visible .wave-dot{opacity:1;r:5.5px} .wave-column:focus-visible .chart-hit-area{fill:#ffffff0a} .chart-legend small{margin-left:8px;font-size:11.5px} [data-theme="light"] .wave-dot{stroke:#fff} @keyframes wave-draw{to{stroke-dashoffset:0}} @keyframes wave-rise{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}} @keyframes wave-dot-in{to{opacity:1}} @media (prefers-reduced-motion:reduce){.wave-line,.wave-area,.wave-dot.has-value{animation:none;stroke-dashoffset:0;opacity:1}} /* Выбор организации в верхней панели, рядом с календарём: тот же размер и вид, что у кнопки календаря. */ #appShell .org-switch-wrap{position:relative;min-width:0} #appShell .topbar .workspace-switch{display:flex;width:auto;max-width:270px;min-height:0;margin:0;align-items:center;gap:10px;padding:6px 10px;border:1px solid #e2e9e2;border-radius:13px;background:linear-gradient(180deg,#fff,#f8faf8);color:#244333;text-align:left;box-shadow:0 1px 3px #173b280b,inset 0 1px #fff;cursor:pointer;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease} #appShell .topbar .workspace-switch:hover,#appShell .topbar .workspace-switch[aria-expanded="true"]{border-color:#bfd2c2;background:linear-gradient(180deg,#fff,#f8faf8);box-shadow:0 3px 10px #173b2812,inset 0 1px #fff} #appShell .topbar .workspace-switch:active{transform:scale(.97)} #appShell .topbar .workspace-avatar{width:35px;height:35px;flex-shrink:0;border-radius:11px;font-size:15px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)} #appShell .topbar .workspace-switch:hover .workspace-avatar{transform:scale(1.07) rotate(-4deg)} #appShell .topbar .workspace-info{display:grid;min-width:0;gap:2px} #appShell .topbar .workspace-info b{display:block;overflow:hidden;color:#1a4934;font-size:13.5px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap} #appShell .topbar .workspace-info small{margin:0;color:#77877c;font-size:10.5px;white-space:nowrap} #appShell .topbar .chevron{margin-left:2px;color:#829087;font-size:16px;transition:transform .25s ease} #appShell .topbar .workspace-switch[aria-expanded="true"] .chevron{transform:rotate(180deg)} #appShell .topbar .organization-menu{top:calc(100% + 8px);right:0;left:auto;width:280px;max-height:min(70vh,440px);overflow:auto;transform-origin:top right;animation:menu-pop .22s cubic-bezier(.2,.8,.2,1)} [data-theme="dark"] #appShell .topbar .workspace-switch{border-color:#344b3f;background:linear-gradient(180deg,#20352a,#1a2d23);color:#d7e5d9;box-shadow:0 1px 3px #0004,inset 0 1px #ffffff09} [data-theme="dark"] #appShell .topbar .workspace-switch:hover,[data-theme="dark"] #appShell .topbar .workspace-switch[aria-expanded="true"]{border-color:#4a6656;background:linear-gradient(180deg,#243b2f,#1c3127)} [data-theme="dark"] #appShell .topbar .workspace-info b{color:#e4eee5} [data-theme="dark"] #appShell .topbar .workspace-info small,[data-theme="dark"] #appShell .topbar .chevron{color:#9eafa2} @media (max-width:1000px){#appShell .topbar .workspace-switch{max-width:200px}} @media (max-width:760px){#appShell .topbar .workspace-switch{padding:4px;gap:0}#appShell .topbar .workspace-info,#appShell .topbar .chevron{display:none}#appShell .topbar .workspace-avatar{width:31px;height:31px}#appShell .topbar .organization-menu{width:min(280px,calc(100vw - 24px))}} @keyframes menu-pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}} /* Анимации навигации: при наведении — заливка «выезжает» слева, золотая метка растёт, пункт сдвигается, иконка пружинит. */ #appShell .sidebar .nav-item{position:relative;isolation:isolate;overflow:hidden;transition:color .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),background .25s ease,box-shadow .3s ease} #appShell .sidebar .nav-item::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,#ffffff24,#ffffff0a 65%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)} #appShell .sidebar .nav-item::after{content:"";position:absolute;top:50%;left:0;width:3px;height:0;border-radius:0 3px 3px 0;background:#e5c47c;box-shadow:0 0 10px #e5c47c99;transform:translateY(-50%);transition:height .3s cubic-bezier(.2,.8,.2,1)} #appShell .sidebar .nav-item:hover:not(.active),#appShell .sidebar .nav-item:focus-visible:not(.active){transform:translateX(4px)} #appShell .sidebar .nav-item:hover:not(.active)::before,#appShell .sidebar .nav-item:focus-visible:not(.active)::before{transform:scaleX(1)} #appShell .sidebar .nav-item:hover:not(.active)::after,#appShell .sidebar .nav-item:focus-visible:not(.active)::after{height:58%} #appShell .sidebar .nav-item .nav-icon{transition:transform .45s cubic-bezier(.34,1.56,.64,1)} #appShell .sidebar .nav-item:hover .nav-icon{transform:scale(1.18) rotate(-8deg)} #appShell .sidebar .nav-item.active{animation:nav-activate .5s cubic-bezier(.34,1.56,.64,1)} #appShell .sidebar .nav-item.active::before{background:linear-gradient(110deg,transparent 30%,#ffffff70 50%,transparent 70%);transform:translateX(-100%) scaleX(1);animation:nav-shine .9s .1s ease-out} @keyframes nav-activate{0%{transform:scale(.94)}55%{transform:scale(1.035)}100%{transform:none}} @keyframes nav-shine{to{transform:translateX(100%) scaleX(1)}} /* Смена раздела: страница плавно появляется, её блоки поднимаются друг за другом. */ #appShell .page-content:not(.hidden)>*{animation:page-rise .5s cubic-bezier(.2,.8,.2,1) both} #appShell .page-content:not(.hidden)>*:nth-child(2){animation-delay:.06s} #appShell .page-content:not(.hidden)>*:nth-child(3){animation-delay:.12s} #appShell .page-content:not(.hidden)>*:nth-child(4){animation-delay:.18s} #appShell .page-content:not(.hidden)>*:nth-child(n+5){animation-delay:.24s} @keyframes page-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){#appShell .sidebar .nav-item,#appShell .sidebar .nav-item::before,#appShell .sidebar .nav-item::after,#appShell .sidebar .nav-item .nav-icon,#appShell .page-content>*,#appShell .topbar .organization-menu{animation:none!important;transition:none!important}#appShell .sidebar .nav-item:hover:not(.active){transform:none}} /* Карточка-подсказка графика-волны (showWaveTip в app.js). */ .wave-wrap{position:relative} .wave-tip{position:absolute;z-index:6;min-width:200px;max-width:270px;padding:11px 13px;border:1px solid #d6e2d8;border-radius:13px;background:#fffffff2;color:#1f3a2c;box-shadow:0 14px 34px #0f2a1f30;font-size:12.5px;line-height:1.35;pointer-events:none;backdrop-filter:blur(8px);animation:wave-tip-in .16s ease-out} .wave-tip[hidden]{display:none} .wave-tip-title{display:block;margin-bottom:7px;color:#163828;font-size:13.5px} .wave-tip-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 0} .wave-tip-row span{display:flex;align-items:center;gap:6px;color:#66786c} .wave-tip-row i{width:8px;height:8px;border-radius:3px} .wave-tip-row b{font-variant-numeric:tabular-nums;white-space:nowrap} .wave-tip-row.total b{font-size:14.5px}.wave-tip-row.income b,.wave-tip-list b.income{color:#2f8a5c}.wave-tip-row.expense b,.wave-tip-list b.expense{color:#c0644e} .wave-tip-list{display:grid;gap:3px;margin:7px 0 0;padding:7px 0 0;border-top:1px solid #e3ebe4;list-style:none} .wave-tip-list li{display:flex;justify-content:space-between;gap:12px} .wave-tip-list li span{overflow:hidden;color:#4d6155;text-overflow:ellipsis;white-space:nowrap} .wave-tip-list li.more span{color:#8a998f} .wave-tip-hint{margin-top:7px;color:#8a998f;font-size:11.5px} [data-theme="dark"] .wave-tip{border-color:#3a5546;background:#162b21f2;color:#e3ede4;box-shadow:0 16px 38px #000a} [data-theme="dark"] .wave-tip-title{color:#f0f6f0} [data-theme="dark"] .wave-tip-row span,[data-theme="dark"] .wave-tip-list li span{color:#a7baab} [data-theme="dark"] .wave-tip-list{border-color:#2d4538} [data-theme="dark"] .wave-tip-row.income b,[data-theme="dark"] .wave-tip-list b.income{color:#7fcf9f} [data-theme="dark"] .wave-tip-row.expense b,[data-theme="dark"] .wave-tip-list b.expense{color:#e59a85} @keyframes wave-tip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.wave-tip{animation:none}} /* Налоговый помощник: настройки, предупреждения, лимиты. */ #appShell .tax-settings-heading{display:grid;gap:3px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)} #appShell .tax-settings-heading b{font-size:14.5px} #appShell .tax-settings-heading small{color:var(--muted);font-size:12.5px;font-weight:500} #appShell .tax-stat-text{font-size:17px;line-height:1.25} #appShell .tax-stat-hint{display:block;margin-top:6px;color:var(--muted);font-size:12.5px} #appShell .tax-warnings{display:grid;gap:8px;margin:0 0 16px} #appShell .home-tax-panel .tax-warnings{margin:0} #appShell .tax-warning{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid #d9e4da;border-left:4px solid #8fb39b;border-radius:11px;background:#f6faf6;color:#294536;font-size:13.5px;line-height:1.4} #appShell .tax-warning.warn{border-left-color:#d6a94f;background:#fdf8ec;color:#5a4316} #appShell .tax-warning.danger{border-left-color:#c8644d;background:#fcf0ec;color:#6b2a1c} #appShell .tax-warning .text-button{flex-shrink:0} #appShell .tax-limits{display:grid;gap:16px;padding:4px 24px 22px} #appShell .tax-limit-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:13.5px} #appShell .tax-limit-head span{color:var(--muted)} #appShell .tax-limit-track{height:9px;overflow:hidden;border-radius:9px;background:#e6eee7} #appShell .tax-limit-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5f9c7c,#8cbf95);transition:width .8s cubic-bezier(.2,.8,.2,1)} #appShell .tax-limit-track i.warn{background:linear-gradient(90deg,#d6a94f,#e8c47a)} #appShell .tax-limit-track i.danger{background:linear-gradient(90deg,#c8644d,#e08b73)} #appShell .tax-muted{color:var(--muted);font-size:13.5px} [data-theme="dark"] #appShell .tax-warning{border-color:#2f4a3c;border-left-color:#5f9c7c;background:#15291f;color:#d6e5d8} [data-theme="dark"] #appShell .tax-warning.warn{border-left-color:#d6a94f;background:#2a2414;color:#f0dcae} [data-theme="dark"] #appShell .tax-warning.danger{border-left-color:#d4735c;background:#2d1a15;color:#f3c4b6} [data-theme="dark"] #appShell .tax-limit-track{background:#24392e} @media(max-width:560px){#appShell .tax-warning{flex-direction:column;align-items:flex-start}#appShell .tax-limit-head{flex-direction:column;gap:3px}} /* Кадры и зарплата. */ #appShell .payroll-body{padding:0 0 6px} #appShell .payroll-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:0 24px 14px;color:var(--muted);font-size:13.5px} #appShell .payroll-input{width:76px;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--ink);font:inherit;text-align:right} #appShell .payroll-norm{width:56px} #appShell .payroll-table td,#appShell .payroll-table th{white-space:nowrap} #appShell .payroll-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:14px 24px 6px} #appShell .payroll-payments{margin:12px 24px 18px} #appShell .payroll-tax-list{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:13.5px} #appShell .payroll-tax-list b{color:var(--ink)} [data-theme="dark"] #appShell .payroll-input{border-color:#344b3f;background:#1c3026;color:#e9f0e9} /* Полировка: отступы между панелями, выравнивание таблиц, статусы в тёмной теме. */ #appShell .page-content>.work-panel+.work-panel,#appShell .page-content>.tax-warnings+.work-panel{margin-top:18px} #appShell .page-content>.report-disclaimer{margin-top:14px} #appShell .tax-warnings:empty{display:none} #appShell #taxWarnings{margin:0 0 18px} #appShell .home-tax-panel .tax-warnings{padding:0 22px 20px} #appShell .home-tax-panel .home-empty{padding:2px 0 4px} [data-theme="dark"] #appShell .esf-status.muted{background:#2a3b31;color:#b3c4b7} #appShell #staffPage table{table-layout:fixed;min-width:760px} #appShell #staffPage th:nth-child(1){width:26%}#appShell #staffPage th:nth-child(2){width:20%}#appShell #staffPage th:nth-child(3){width:12%}#appShell #staffPage th:nth-child(4){width:12%}#appShell #staffPage th:nth-child(5){width:14%}#appShell #staffPage th:nth-child(6){width:16%} #appShell #staffPage td{overflow-wrap:anywhere} #appShell #staffOrders{padding:0 22px 14px} #appShell #staffOrders .empty-state{margin:0} #appShell .payroll-table{min-width:1180px} #appShell .payroll-table th,#appShell .payroll-table td{padding:0 10px;text-align:right} #appShell .payroll-table td{padding-top:12px;padding-bottom:12px} #appShell .payroll-table th:first-child,#appShell .payroll-table td:first-child{min-width:210px;padding-left:22px;text-align:left} #appShell .payroll-table th:last-child,#appShell .payroll-table td:last-child{padding-right:22px} #appShell .payroll-table tfoot th{height:46px;color:var(--ink);font-size:12.5px} #appShell .payroll-meta{padding-top:2px} #appShell .payroll-meta .payroll-input{margin-left:6px} /* Анимации интерфейса: карточки и кнопки отвечают на наведение, строки таблиц подсвечиваются, окна мягко раскрываются. */ #appShell .stat-card,#appShell .money-stat-card,#appShell .esf-summary-card,#appShell .money-account-card,#appShell .subscription-settings-plan{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease} #appShell .stat-card:hover,#appShell .money-stat-card:hover,#appShell .esf-summary-card:hover,#appShell .money-account-card:hover,#appShell .subscription-settings-plan:hover{transform:translateY(-4px);box-shadow:0 16px 34px #0b2a1c24} [data-theme="dark"] #appShell .stat-card:hover,[data-theme="dark"] #appShell .money-stat-card:hover,[data-theme="dark"] #appShell .esf-summary-card:hover{box-shadow:0 18px 40px #000a,0 0 0 1px #e5c47c33} #appShell .button,#appShell .ios-button{position:relative;overflow:hidden} #appShell .button:hover,#appShell .ios-button:hover{transform:translateY(-1px)} #appShell .button-primary::after,#appShell .ios-button-primary::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,#ffffff40,transparent);transform:skewX(-18deg);pointer-events:none;opacity:0} #appShell .button-primary:hover::after,#appShell .ios-button-primary:hover::after{animation:button-shine .8s ease-out;opacity:1} #appShell tbody tr{transition:background-color .2s ease,box-shadow .2s ease} #appShell tbody tr:hover{background-color:#1b5e4b0a;box-shadow:inset 3px 0 0 #e5c47c} [data-theme="dark"] #appShell tbody tr:hover{background-color:#ffffff08} #appShell .document-item{transition:background-color .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)} #appShell .document-item:hover{transform:translateX(4px)} #appShell .tax-limit-track i{transform-origin:left;animation:bar-grow 1s cubic-bezier(.2,.8,.2,1)} #appShell .tax-warning{animation:warning-in .45s cubic-bezier(.2,.8,.2,1) both} #appShell .tax-warning:nth-child(2){animation-delay:.06s}#appShell .tax-warning:nth-child(3){animation-delay:.12s} .modal-backdrop:not(.hidden){animation:backdrop-in .22s ease-out} .modal-backdrop:not(.hidden)>.invoice-modal,.modal-backdrop:not(.hidden)>section{animation:modal-pop .32s cubic-bezier(.2,.9,.25,1.05)} @keyframes button-shine{from{left:-60%}to{left:130%}} @keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes warning-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} @keyframes backdrop-in{from{opacity:0}to{opacity:1}} @keyframes modal-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){#appShell .stat-card,#appShell .button,#appShell tbody tr,#appShell .document-item,#appShell .tax-limit-track i,#appShell .tax-warning,.modal-backdrop,.modal-backdrop>*{animation:none!important;transition:none!important}#appShell .stat-card:hover,#appShell .button:hover,#appShell .document-item:hover{transform:none}} #appShell .payroll-table{table-layout:auto;width:100%} #appShell .payroll-table th:first-child,#appShell .payroll-table td:first-child{width:auto} #appShell #staffPage th:nth-child(1){width:24%}#appShell #staffPage th:nth-child(2){width:18%}#appShell #staffPage th:nth-child(3){width:11%}#appShell #staffPage th:nth-child(4){width:11%}#appShell #staffPage th:nth-child(5){width:14%}#appShell #staffPage th:nth-child(6){width:22%} #appShell #staffPage .row-actions{white-space:normal;text-align:right} #appShell #staffPage .row-actions .text-button{display:inline-block;margin:2px 0 2px 10px;white-space:nowrap} /* Таблицы помещаются в свои панели без горизонтальной прокрутки на обычном экране. */ #appShell #counterpartyPage td:first-child,#appShell #counterpartyPage td:first-child *{white-space:normal;overflow-wrap:anywhere} #appShell #moneyPage .money-table td:nth-child(4){white-space:normal;min-width:220px} #appShell #warehousePage th:last-child{width:100px} #appShell #taxesPage .report-table{table-layout:auto;min-width:0} #appShell #taxesPage .report-table th:first-child,#appShell #taxesPage .report-table td:first-child{width:auto;min-width:220px} #appShell .payroll-table{min-width:0} #appShell .payroll-table th,#appShell .payroll-table td{padding-left:8px;padding-right:8px} #appShell .payroll-table th:first-child,#appShell .payroll-table td:first-child{min-width:180px} #appShell .payroll-input{width:64px} #appShell .osv-table{min-width:0} #appShell .osv-table th:first-child,#appShell .osv-table td:first-child{width:26%} #appShell .esf-row-actions{flex-wrap:wrap;justify-content:flex-end;max-width:320px;margin-left:auto} #appShell .esf-date-input{width:132px} /* Сводка налогов на «Главной». */ #appShell .home-tax-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #appShell .home-tax-summary>div{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--canvas)} #appShell .home-tax-summary small{color:var(--muted);font-size:11.5px} #appShell .home-tax-summary b{color:var(--ink);font-size:16px} #appShell .home-tax-summary span{color:var(--muted);font-size:11.5px} #appShell .home-tax-panel .tax-limit{padding:4px 2px 0} [data-theme="dark"] #appShell .home-tax-summary>div{border-color:#2f4a3c;background:#10271f} @media(max-width:760px){#appShell .home-tax-summary{grid-template-columns:1fr}} /* Частичные оплаты */ #appShell .status-toggle.partial, .status-toggle.partial { background: #e4eef8; color: #2f5f8c; } [data-theme="dark"] #appShell .status-toggle.partial, [data-theme="dark"] .status-toggle.partial { background: #20344a; color: #9cc3e8; } .payments-editor .payments-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; } .payments-editor .payments-row { display: grid; grid-template-columns: 110px 1fr auto auto; align-items: center; gap: 14px; padding: 9px 12px; border: 1px solid var(--line, #dfe7e1); border-radius: 10px; font-size:14.5px; animation: auth-fade-row .35s ease both; } .payments-editor .payments-row b { font-variant-numeric: tabular-nums; } @keyframes auth-fade-row { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .invoice-status-editor.payments-editor { grid-template-columns: repeat(3, minmax(0, 1fr)); } .payments-editor > .invoice-status-editor-heading, .payments-editor > .invoice-status-editor-actions { grid-column: 1 / -1; } @media (max-width: 720px) { .invoice-status-editor.payments-editor { grid-template-columns: 1fr; } } /* Банковская выписка */ .bank-import-modal { width: min(1080px, calc(100vw - 34px)); } .bank-import-hint { margin: 6px 0 14px; color: var(--muted, #78887d); font-size:13.5px; line-height: 1.5; } .bank-import-hint span { color: inherit; font-weight: 700; } .bank-import-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bank-import-account { display: inline-grid; gap: 7px; margin: 14px 0; color: var(--muted, #78887d); font-size:12.5px; font-weight: 650; } .bank-import-account select, .bank-import-table select { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line, #dfe7e1); border-radius: 9px; background: var(--surface, #fff); color: inherit; font: inherit; font-size:13.5px; } .bank-import-account select { min-width: 300px; height: 40px; } .bank-import-table td { vertical-align: top; } .bank-import-table td:nth-child(3) { max-width: 380px; } .bank-import-table td:last-child { width: 300px; } .bank-import-table td:last-child select { width: 100%; } .bank-import-table td:last-child select + select { margin-top: 6px; } .bank-import-table select.hidden { display: none; } .bank-import-table .bank-purpose { white-space: normal; line-height: 1.4; } .bank-import-table .money-income b { color: #2f7a4f; } .bank-import-table .money-expense b { color: #b0533f; } .bank-import-table tr { animation: auth-fade-row .3s ease both; } .bank-row-duplicate { opacity: .5; } .bank-flag { display: inline-block; margin-top: 5px; padding: 3px 8px; border-radius: 12px; background: #fbf2df; color: #936d2d; font-size:11.5px; font-weight: 700; } [data-theme="dark"] .bank-flag { background: #463a24; color: #e4c47d; } [data-theme="dark"] .bank-import-account select, [data-theme="dark"] .bank-import-table select { border-color: #385144; background: #10271f; color: #e7efe9; } [data-theme="dark"] .bank-import-table .money-income b { color: #8fd3a5; } [data-theme="dark"] .bank-import-table .money-expense b { color: #f0a08f; } @media (max-width: 760px) { .bank-import-summary { grid-template-columns: 1fr 1fr; } .bank-import-account select { min-width: 0; } } .bank-import-table th, .bank-import-table td { text-align: left !important; } .bank-import-table th:nth-child(4), .bank-import-table td:nth-child(4) { text-align: right !important; white-space: nowrap; } .bank-import-table th:first-child, .bank-import-table td:first-child { width: 34px; } /* Закупки */ .purchase-new-item { display: grid; grid-template-columns: 1fr 90px; gap: 8px; grid-column: 1 / -1; } .purchase-new-item.hidden { display: none; } #appShell .purchase-table { table-layout: auto; } #appShell .purchase-table td:nth-child(3) { white-space: normal; } .supplier-debt { color: #b0533f; } [data-theme="dark"] .supplier-debt { color: #f0a08f; } .purchase-new-item input { text-align: left !important; } #purchaseCreateBackdrop .modal-description { margin-bottom: 16px; } .stock-reserve { color: #936d2d !important; } [data-theme="dark"] .stock-reserve { color: #e4c47d !important; } /* Черновики деклараций */ .declaration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 4px 20px 20px; } .declaration-card { display: grid; gap: 4px; text-align: left; padding: 16px; border: 1px solid var(--line, #dfe7e1); border-radius: 14px; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .declaration-card b { font-size: 18px; color: #2f5d45; } .declaration-card span { font-weight: 650; font-size:14.5px; } .declaration-card small { color: var(--muted, #78887d); font-size:12.5px; } .declaration-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20, 50, 35, .14); border-color: #c79a3b; } [data-theme="dark"] .declaration-card { background: linear-gradient(145deg, #193127, #12271e); border-color: #31483c; } [data-theme="dark"] .declaration-card b { color: #e4c47d; } .payroll-holidays { color: var(--muted, #78887d); font-size:12.5px; } .year-params-form { display: block; } .year-params-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 16px; } .year-params-grid label { display: grid; gap: 7px; color: var(--muted, #78887d); font-size:12.5px; } /* Подсказка графика растягивается по содержимому, суммы не переносятся */ .wave-tip { width: max-content; max-width: min(420px, calc(100% - 8px)); } .wave-tip-list li { align-items: baseline; } .wave-tip-list li span { flex: 1 1 auto; min-width: 0; } .wave-tip-list li b { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Выписка: новые контрагенты */ .bank-import-options { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; margin: 14px 0; } .bank-import-options .bank-import-account { margin: 0; } .bank-import-check { display: flex; align-items: center; gap: 8px; font-size:13.5px; color: var(--muted, #78887d); cursor: pointer; padding-bottom: 10px; } .bank-flag-new { background: #e4eef8; color: #2f5f8c; margin-left: 4px; } [data-theme="dark"] .bank-flag-new { background: #20344a; color: #9cc3e8; } /* Календарь: сроки и праздники */ #appShell .calendar-day.is-tax { background: #fbe4df; color: #b23a26; font-weight: 800; } #appShell .calendar-day.is-tax:hover { background: #f7d3cb; } #appShell .calendar-day.is-holiday { color: #c2412b; font-weight: 700; } #appShell .calendar-day.is-holiday:not(.is-tax)::before { position: absolute; inset: 5px; border-radius: 9px; box-shadow: inset 0 0 0 1px #f0b8ad; content: ""; } #appShell .calendar-day.has-deadline::after { position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #c98a1c; content: ""; transform: translateX(-50%); } #appShell .calendar-day.has-deadline.has-note::after { box-shadow: 6px 0 0 #d5ad5d; transform: translateX(-75%); } #appShell .calendar-day.outside-month.is-tax, #appShell .calendar-day.outside-month.is-holiday { opacity: .45; } #appShell .calendar-day.is-selected.is-tax, #appShell .calendar-day.is-selected.is-holiday, [data-theme="dark"] #appShell .calendar-day.is-selected.is-tax, [data-theme="dark"] #appShell .calendar-day.is-selected.is-holiday { background: #b23a26; color: #fff; } #appShell .calendar-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 2px 2px; font-size:11.5px; color: #77877c; } #appShell .calendar-legend span { display: inline-flex; align-items: center; gap: 5px; } #appShell .calendar-legend span::before { width: 9px; height: 9px; border-radius: 3px; content: ""; } .legend-tax::before { background: #f0b8ad; } .legend-holiday::before { box-shadow: inset 0 0 0 1.5px #c2412b; } .legend-report::before { border-radius: 50% !important; background: #c98a1c; } #appShell .calendar-events-list { display: grid; gap: 8px; margin: 10px 0 4px; } #appShell .calendar-events-list:empty { display: none; } #appShell .calendar-event { padding: 10px 12px; border-radius: 12px; border-left: 3px solid #c98a1c; background: #fbf5e8; animation: auth-fade-row .25s ease both; } #appShell .calendar-event.type-tax { border-color: #c2412b; background: #fcebe7; } #appShell .calendar-event.type-holiday { border-color: #d0705f; background: #fdf1ee; } #appShell .calendar-event b { display: block; font-size:13.5px; color: #2a3c31; } #appShell .calendar-event p { margin: 3px 0 0; font-size:12.5px; line-height: 1.4; color: #66786c; } [data-theme="dark"] #appShell .calendar-day.is-tax { background: #4a2620; color: #ffb3a4; } [data-theme="dark"] #appShell .calendar-day.is-holiday { color: #ff9c88; } [data-theme="dark"] #appShell .calendar-day.is-holiday:not(.is-tax)::before { box-shadow: inset 0 0 0 1px #7a3b30; } [data-theme="dark"] #appShell .calendar-event { background: #2b2a1e; } [data-theme="dark"] #appShell .calendar-event.type-tax { background: #3a221d; } [data-theme="dark"] #appShell .calendar-event.type-holiday { background: #35231f; } [data-theme="dark"] #appShell .calendar-event b { color: #eef4ee; } [data-theme="dark"] #appShell .calendar-event p, [data-theme="dark"] #appShell .calendar-legend { color: #a7baab; } /* Уведомления */ .notify-wrap { position: relative; z-index: 6; } #appShell .notify-trigger { position: relative; display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid #e2e9e2; border-radius: 14px; background: linear-gradient(180deg,#fff,#f8faf8); color: #286345; cursor: pointer; box-shadow: 0 1px 3px #173b280b; transition: transform .2s ease, border-color .2s ease; } #appShell .notify-trigger svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #appShell .notify-trigger:hover, #appShell .notify-trigger[aria-expanded="true"] { border-color: #bfd2c2; transform: translateY(-1px); } #appShell .notify-trigger.has-unread svg { animation: notify-ring 2.4s ease-in-out infinite; transform-origin: 50% 15%; } @keyframes notify-ring { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(14deg); } 92% { transform: rotate(-12deg); } 95% { transform: rotate(8deg); } } .notify-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #c2412b; color: #fff; font-size:11.5px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff; } .notify-badge.hidden { display: none; } .notify-popover { width: 380px; } .notify-list { display: grid; gap: 8px; margin-top: 6px; } .notify-item { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f6f9f6; cursor: pointer; transition: background .2s ease, transform .2s ease; animation: auth-fade-row .25s ease both; } .notify-item:hover { background: #edf3ee; transform: translateX(2px); } .notify-item small { color: #8a998f; font-size:11.5px; text-transform: uppercase; letter-spacing: .04em; } .notify-item b { display: block; margin-top: 2px; font-size:13.5px; color: #22392b; } .notify-item p { margin: 3px 0 0; font-size:12.5px; line-height: 1.4; color: #66786c; } .notify-item.is-read { opacity: .62; } .notify-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #5d8f6f; } .tone-danger .notify-dot { background: #c2412b; box-shadow: 0 0 0 4px #c2412b22; } .tone-warn .notify-dot { background: #c98a1c; } .tone-holiday .notify-dot { background: #e0806d; } .tone-note .notify-dot { background: #d5ad5d; } .notify-desktop { width: 100%; margin-top: 12px; padding: 10px; border: 1px dashed #bfd2c2; border-radius: 12px; background: transparent; color: #286345; font: inherit; font-size:13.5px; font-weight: 650; cursor: pointer; } .notify-desktop.is-on { border-style: solid; background: #e8f1e9; } .notify-desktop:disabled { opacity: .55; cursor: default; } [data-theme="dark"] #appShell .notify-trigger { border-color: #334b3c; background: linear-gradient(180deg,#1d3328,#172a20); color: #b1d2b4; } [data-theme="dark"] .notify-badge { box-shadow: 0 0 0 2px #10271e; } [data-theme="dark"] .notify-item { background: #20362a; } [data-theme="dark"] .notify-item:hover { background: #274234; } [data-theme="dark"] .notify-item b { color: #eef4ee; } [data-theme="dark"] .notify-item p { color: #a7baab; } [data-theme="dark"] .notify-desktop { border-color: #3d5a48; color: #b1d2b4; } [data-theme="dark"] .notify-desktop.is-on { background: #23392c; } @media (max-width: 760px) { #appShell .notify-trigger { width: 38px; height: 38px; } .notify-popover { position: fixed; top: 64px; right: 10px; width: min(380px, calc(100vw - 20px)); } } .payslip-link { display: block; margin-top: 3px; font-size:12.5px; padding: 0; } .absence-hint { margin: 0; font-size:13.5px; color: var(--muted, #78887d); } /* Отправка клиенту, повторяющиеся счета, должники */ .share-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line, #dfe7e1); border-radius: 12px; } .share-bar > div:first-child { display: grid; gap: 3px; } .share-bar b { font-size:14.5px; } .share-bar small { color: var(--muted, #78887d); font-size:12.5px; } .share-actions { display: flex; flex-wrap: wrap; gap: 8px; } .share-actions .share-wa { border-color: #8fd3a5; } .share-actions .is-on { background: #e8f1e9; border-color: #8fbf9c; } .recurring-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 14px 18px; border: 1px solid #e2cf9f; border-radius: 14px; background: #fbf5e8; animation: auth-fade-row .3s ease both; } .recurring-banner.hidden { display: none; } .recurring-banner > div { display: grid; gap: 4px; } .recurring-banner small { color: #7a6a45; font-size:12.5px; } .debtor-total { margin-left: 6px; color: #b0533f; font-size:14.5px; } .debtor-days { display: inline-block; padding: 3px 8px; border-radius: 10px; background: #fbe4df; color: #b23a26; font-weight: 700; font-size:12.5px; } #appShell .debtor-table { table-layout: auto; } #appShell .debtor-table td:first-child small { white-space: normal; } [data-theme="dark"] .share-bar { border-color: #31483c; } [data-theme="dark"] .share-actions .is-on { background: #23392c; } [data-theme="dark"] .recurring-banner { border-color: #5d5232; background: #2b2a1e; } [data-theme="dark"] .recurring-banner small { color: #cdbd92; } [data-theme="dark"] .debtor-days { background: #4a2620; color: #ffb3a4; } /* Роли пользователей */ .role-banner { position: sticky; top: 0; z-index: 30; padding: 8px 16px; background: #fbf2df; color: #7a5a1f; font-size:13.5px; font-weight: 650; text-align: center; } .role-banner.hidden { display: none; } [data-theme="dark"] .role-banner { background: #463a24; color: #f0d394; } .team-role { height: 34px; margin-left: auto; margin-right: 8px; padding: 0 10px; border: 1px solid var(--line, #dfe7e1); border-radius: 9px; background: var(--surface, #fff); color: inherit; font: inherit; font-size:13.5px; } [data-theme="dark"] .team-role { border-color: #385144; background: #10271f; color: #e7efe9; } body[data-role="accountant"] [data-settings-tab="rates"], body[data-role="accountant"] [data-settings-tab="data"], body[data-role="accountant"] [data-settings-tab="users"], body[data-role="accountant"] [data-settings-tab="subscription"], body[data-role="viewer"] [data-settings-tab="rates"], body[data-role="viewer"] [data-settings-tab="data"], body[data-role="viewer"] [data-settings-tab="users"], body[data-role="viewer"] [data-settings-tab="subscription"] { display: none !important; } body[data-role="accountant"] #organizationForm, body[data-role="viewer"] #organizationForm { pointer-events: none; opacity: .72; } body[data-role="accountant"] #organizationForm .form-actions, body[data-role="viewer"] #organizationForm .form-actions { display: none; } body[data-role="viewer"] #newInvoice, body[data-role="viewer"] #newRealization, body[data-role="viewer"] #newPurchase, body[data-role="viewer"] #newEmployee, body[data-role="viewer"] #addMoneyTransaction, body[data-role="viewer"] #addCashAccount, body[data-role="viewer"] #importBankStatement, body[data-role="viewer"] #addNomenclature, body[data-role="viewer"] .calendar-note-form, body[data-role="viewer"] .payments-editor label, body[data-role="viewer"] [data-pay-add], body[data-role="viewer"] [data-pay-remove], body[data-role="viewer"] .invoice-detail-actions, body[data-role="viewer"] [data-recurring-issue], body[data-role="viewer"] [data-recurring-toggle] { display: none !important; } /* Печать и подпись организации */ .seal-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 14px 22px 4px; } .seal-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line, #dfe7e1); border-radius: 14px; } .seal-item b { display: block; font-size:14.5px; } .seal-item small { display: block; margin: 2px 0 8px; color: var(--muted, #78887d); font-size:12.5px; } .seal-preview { display: grid; flex: 0 0 auto; width: 84px; height: 84px; place-items: center; border-radius: 12px; background: repeating-conic-gradient(#f1f4f1 0 25%, #fff 0 50%) 0 0 / 14px 14px; overflow: hidden; } .seal-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .seal-preview span { color: #8a998f; font-size:11.5px; text-align: center; } [data-theme="dark"] .seal-item { border-color: #31483c; } [data-theme="dark"] .seal-preview { background: repeating-conic-gradient(#dfe6df 0 25%, #fff 0 50%) 0 0 / 14px 14px; } /* Ведомость: компактная таблица без выезда за панель */ #appShell .payroll-table { min-width: 0 !important; width: 100%; table-layout: auto; } #appShell .payroll-table th, #appShell .payroll-table td { padding-left: 7px !important; padding-right: 7px !important; font-size:13.5px; vertical-align: top; } #appShell .payroll-table th { font-size:11.5px; white-space: normal !important; line-height: 1.25; } #appShell .payroll-table td:first-child, #appShell .payroll-table th:first-child { min-width: 170px !important; max-width: 250px; white-space: normal !important; padding-left: 18px !important; } #appShell .payroll-table td:first-child b { display: block; line-height: 1.3; } #appShell .payroll-table td:first-child .table-subtext { white-space: normal; line-height: 1.35; } #appShell .payroll-table td:last-child, #appShell .payroll-table th:last-child { padding-right: 18px !important; } #appShell .payroll-table td .payroll-input { width: 58px; height: 30px; padding: 0 6px; } #appShell .payroll-employer small { display: block; margin-top: 2px; color: var(--muted); font-size:11.5px; white-space: nowrap; } #appShell .payslip-link { display: inline-block; margin: 4px 0 0; padding: 0 !important; font-size:12.5px; text-align: left; } /* Бюджет */ #budgetFreeCard.is-negative .stat-value { color: #c0644e; } .budget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 4px 20px 20px; } .budget-card { position: relative; display: grid; gap: 10px; padding: 16px 16px 14px; border: 1px solid var(--line, #dfe7e1); border-left: 4px solid var(--budget-color); border-radius: 14px; background: var(--surface, #fff); animation: auth-fade-row .3s ease both; transition: transform .2s ease, box-shadow .2s ease; } .budget-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 50, 35, .12); } .budget-card-head { display: flex; justify-content: space-between; gap: 10px; } .budget-card-head b { display: block; font-size:16px; } .budget-card-head small, .budget-pct { color: var(--muted, #78887d); font-size:12.5px; } .budget-progress { height: 8px; border-radius: 6px; background: #e8efe9; overflow: hidden; } .budget-progress span { display: block; height: 100%; border-radius: 6px; background: var(--budget-color); transition: width .6s ease; } .budget-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .budget-figures small { display: block; color: var(--muted, #78887d); font-size:11.5px; } .budget-figures b { font-size:14.5px; font-variant-numeric: tabular-nums; } .budget-card .is-negative, .budget-history .is-negative { color: #c0644e; } .budget-allocate { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; } .budget-allocate input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line, #dfe7e1); border-radius: 9px; background: var(--surface, #fff); color: inherit; font: inherit; } .budget-allocate .button { height: 36px; padding: 0 12px; font-size:13.5px; } .budget-history summary { cursor: pointer; color: var(--muted, #78887d); font-size:12.5px; } .budget-history div { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; padding: 4px 0; font-size:12.5px; border-top: 1px dashed var(--line, #dfe7e1); } .budget-link { height: 34px; padding: 0 10px; border: 1px solid var(--line, #dfe7e1); border-radius: 9px; background: var(--surface, #fff); color: inherit; font: inherit; font-size:13.5px; max-width: 220px; } #appShell .budget-expense-table { table-layout: auto; } #appShell .budget-expense-table td:nth-child(2) { white-space: normal; } .budget-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; background: #e8f1e9; color: #2f6b47; font-size:11.5px; font-weight: 700; } [data-theme="dark"] .budget-card { border-color: #31483c; border-left-color: var(--budget-color); background: linear-gradient(145deg, #193127, #12271e); } [data-theme="dark"] .budget-progress { background: #23392c; } [data-theme="dark"] .budget-allocate input, [data-theme="dark"] .budget-link { border-color: #385144; background: #10271f; color: #e7efe9; } [data-theme="dark"] .budget-badge { background: #23392c; color: #a8d4ae; } .budget-allocate { grid-template-columns: 1fr 1fr; } .budget-allocate input { grid-column: 1 / -1; } #appShell .budget-expense-table th:nth-child(2), #appShell .budget-expense-table td:nth-child(2), #appShell .budget-expense-table th:first-child, #appShell .budget-expense-table td:first-child { text-align: left !important; } #appShell .budget-expense-table th:last-child, #appShell .budget-expense-table td:last-child { text-align: right; width: 240px; } /* Обновление приложения */ .update-actions { display: flex; flex-wrap: wrap; gap: 8px; } .update-body { padding: 0 24px 20px; } .update-status { margin: 0; font-size:14.5px; color: var(--muted, #78887d); } .update-status.is-downloaded { color: #2f7a4f; font-weight: 700; } .update-status.is-error { color: #c0644e; } .update-progress { height: 8px; margin-top: 10px; border-radius: 6px; background: #e8efe9; overflow: hidden; } .update-progress.hidden { display: none; } .update-progress span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #2f7a4f, #8fd3a5); transition: width .4s ease; } .update-banner { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 14px; max-width: 520px; padding: 14px 16px; border: 1px solid #bfd2c2; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(15, 42, 31, .25); animation: update-in .45s cubic-bezier(.2, .9, .3, 1.2) both; } .update-banner.hidden { display: none; } .update-banner b { font-size:15px; } .update-banner p { margin: 3px 0 0; color: #66786c; font-size:13.5px; line-height: 1.4; } .update-banner-icon { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: #e8f1e9; color: #286345; font-size: 20px; animation: update-spin 2.4s linear infinite; } .update-banner-actions { display: grid; gap: 6px; } .update-banner-actions .button { height: 34px; padding: 0 14px; font-size:13.5px; } @keyframes update-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes update-spin { to { transform: rotate(360deg); } } [data-theme="dark"] .update-banner { border-color: #3d5a48; background: #182b21; color: #e5eee5; } [data-theme="dark"] .update-banner p { color: #a7baab; } [data-theme="dark"] .update-banner-icon { background: #23392c; color: #b1d2b4; } [data-theme="dark"] .update-progress { background: #23392c; } @media (max-width: 640px) { .update-banner { left: 10px; right: 10px; bottom: 74px; flex-wrap: wrap; } } .update-banner > div:nth-child(2) { flex: 1 1 auto; min-width: 0; } .update-banner-actions { flex: 0 0 auto; } .update-banner-actions .button { white-space: nowrap; } /* Выплата и уплата: ширина с учётом отступов, без выхода за край панели */ #appShell .payroll-payments { width: auto; box-sizing: border-box; margin: 12px 24px 18px; } #appShell .payroll-payments label, #appShell .payroll-payments select, #appShell .payroll-payments input { min-width: 0; max-width: 100%; box-sizing: border-box; } #appShell .payroll-payments .invoice-status-editor-actions { flex-wrap: wrap; } @media (max-width: 760px) { #appShell .payroll-payments { grid-template-columns: 1fr; margin: 12px 14px 16px; } } @media (max-width: 1150px) { #appShell .payroll-table th:nth-child(2), #appShell .payroll-table td:nth-child(2) { display: none; } #appShell .payroll-table td:first-child, #appShell .payroll-table th:first-child { min-width: 140px !important; padding-left: 14px !important; } #appShell .payroll-table th, #appShell .payroll-table td { padding-left: 5px !important; padding-right: 5px !important; font-size:12.5px; } #appShell .payroll-table td .payroll-input { width: 50px; } } @media (max-width: 1150px) { #appShell .payroll-employer small { white-space: normal; } #appShell .payroll-table td:last-child, #appShell .payroll-table th:last-child { padding-right: 12px !important; } #appShell .payroll-table th { font-size:10.5px; letter-spacing: 0; } } /* Автоблокировка */ .app-lock { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(8, 26, 18, .72); backdrop-filter: blur(18px) saturate(.6); animation: update-in .3s ease both; } .app-lock.hidden { display: none; } body.is-locked #appShell { filter: blur(6px); pointer-events: none; user-select: none; } .app-lock-card { width: min(420px, 100%); padding: 28px; border-radius: 20px; background: #fff; color: #1f3a2c; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); } .app-lock-icon { display: grid; width: 56px; height: 56px; margin: 0 auto 10px; place-items: center; border-radius: 16px; background: #e8f1e9; font-size: 26px; } .app-lock-card h2 { margin: 0 0 6px; font-size: 20px; } .app-lock-card p { margin: 0 0 16px; color: #66786c; font-size:14.5px; line-height: 1.45; } .app-lock-card form { display: grid; gap: 10px; } .app-lock-card input { height: 46px; padding: 0 14px; border: 1px solid #cfdcd2; border-radius: 12px; font: inherit; font-size:16px; } .app-lock-card input:focus { outline: 2px solid #c79a3b; border-color: transparent; } .app-lock-error { margin: 10px 0 0 !important; color: #c0644e !important; font-weight: 700; } .app-lock-error.hidden { display: none; } .app-lock-card .ios-text-button { margin-top: 14px; } [data-theme="dark"] .app-lock-card { background: #182b21; color: #e5eee5; } [data-theme="dark"] .app-lock-card p { color: #a7baab; } [data-theme="dark"] .app-lock-icon { background: #23392c; } [data-theme="dark"] .app-lock-card input { border-color: #385144; background: #10271f; color: #e7efe9; } .app-lock-card .button { display: flex; align-items: center; justify-content: center; height: 46px; border: 0; border-radius: 12px; background: #1f6b4a; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .app-lock-card .button:hover { background: #185a3d; } .app-lock-card .ios-text-button { border: 0; background: transparent; color: #66786c; font: inherit; font-size:13.5px; text-decoration: underline; cursor: pointer; } [data-theme="dark"] .app-lock-card .ios-text-button { color: #a7baab; } /* История версий и журнал действий */ .history-list { display: grid; gap: 8px; padding: 0 22px 20px; } .history-row { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line, #dfe7e1); border-radius: 12px; animation: auth-fade-row .25s ease both; } .history-row b { display: block; font-size:14.5px; } .history-row small { color: var(--muted, #78887d); font-size:12.5px; } .history-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted, #78887d); font-size:12.5px; } .history-counts b { display: inline; color: var(--ink, #1f3a2c); } #appShell .audit-table { table-layout: auto; } #appShell .audit-table td, #appShell .audit-table th { text-align: left !important; white-space: normal; } #appShell .audit-table td:first-child { white-space: nowrap; } .audit-action { display: inline-block; padding: 3px 9px; border-radius: 10px; background: #eef4ef; color: #2f5d45; font-size:12.5px; font-weight: 700; white-space: nowrap; } .audit-create { background: #e6f1e8; color: #2f7a4f; } .audit-delete, .audit-cancel, .audit-unpay { background: #fbe4df; color: #b23a26; } .audit-pay { background: #e4eef8; color: #2f5f8c; } .audit-restore { background: #fbf2df; color: #936d2d; } [data-theme="dark"] .history-row { border-color: #31483c; } [data-theme="dark"] .history-counts b { color: #e5eee5; } [data-theme="dark"] .audit-action { background: #23392c; color: #a8d4ae; } [data-theme="dark"] .audit-delete, [data-theme="dark"] .audit-cancel, [data-theme="dark"] .audit-unpay { background: #4a2620; color: #ffb3a4; } [data-theme="dark"] .audit-pay { background: #20344a; color: #9cc3e8; } @media (max-width: 900px) { .history-row { grid-template-columns: 1fr; } } #appShell .settings-tabs { flex-wrap: wrap; overflow: visible; row-gap: 6px; } #appShell .audit-table { table-layout: fixed; width: 100%; } #appShell .audit-table th:nth-child(1), #appShell .audit-table td:nth-child(1) { width: 150px; } #appShell .audit-table th:nth-child(2), #appShell .audit-table td:nth-child(2) { width: 230px; overflow-wrap: anywhere; } #appShell .audit-table th:nth-child(3), #appShell .audit-table td:nth-child(3) { width: 140px; } #appShell .audit-table th:nth-child(4), #appShell .audit-table td:nth-child(4) { width: auto; } .settings-tabs.settings-tabs { flex-wrap: wrap; overflow: visible; row-gap: 6px; } /* Двухфакторный вход */ .mfa-block { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin: 0 22px 20px; padding: 14px 16px; border: 1px solid var(--line, #dfe7e1); border-radius: 12px; } .mfa-block b { display: block; font-size:14.5px; } .mfa-state { color: var(--muted, #78887d); font-size:13.5px; } .mfa-state.is-on { color: #2f7a4f; font-weight: 700; } .mfa-setup { grid-column: 1 / -1; display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding-top: 12px; border-top: 1px dashed var(--line, #dfe7e1); } .mfa-setup.hidden { display: none; } .mfa-qr { display: grid; place-items: center; width: 180px; height: 180px; padding: 8px; border-radius: 12px; background: #fff; } .mfa-qr img { width: 100%; height: 100%; } .mfa-steps p { margin: 0 0 8px; font-size:13.5px; line-height: 1.45; } .mfa-steps code { padding: 2px 6px; border-radius: 6px; background: #eef4ef; font-size:13.5px; word-break: break-all; } .mfa-confirm { display: flex; flex-wrap: wrap; gap: 8px; } .mfa-confirm input { width: 130px; height: 40px; padding: 0 12px; border: 1px solid var(--line, #dfe7e1); border-radius: 10px; background: var(--surface, #fff); color: inherit; font: inherit; font-size: 18px; letter-spacing: .25em; text-align: center; } [data-theme="dark"] .mfa-block { border-color: #31483c; } [data-theme="dark"] .mfa-steps code { background: #23392c; } [data-theme="dark"] .mfa-confirm input { border-color: #385144; background: #10271f; color: #e7efe9; } #mfaPromptCode { font-size: 22px !important; letter-spacing: .35em; text-align: center; } @media (max-width: 700px) { .mfa-setup { grid-template-columns: 1fr; } } /* Прибыль и ДДС */ .finance-chart { padding: 0 18px 12px; } #appShell .finance-table { table-layout: auto; min-width: 1200px; } #appShell .finance-table th, #appShell .finance-table td { padding: 8px 8px !important; font-size:12.5px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } #appShell .finance-table th:first-child, #appShell .finance-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 220px; text-align: left; white-space: normal; background: var(--surface, #fff); } #appShell .finance-table td.is-total { font-weight: 700; } #appShell .finance-table tr.is-strong td { font-weight: 700; } #appShell .finance-table tr.is-sub td:first-child { padding-left: 24px !important; color: var(--muted); } #appShell .finance-table tr.is-result td { font-weight: 800; font-size:13.5px; border-top: 2px solid var(--line); } #appShell .finance-table .is-negative, #financeProfit.is-negative { color: #c0644e; } [data-theme="dark"] #appShell .finance-table th:first-child, [data-theme="dark"] #appShell .finance-table td:first-child { background: #172a20; } #appShell .finance-table td, #appShell .finance-table th { height: auto !important; line-height: 1.3; padding-top: 7px !important; padding-bottom: 7px !important; } #appShell .finance-table { min-width: 1080px; } /* Возвраты */ .return-lines { display: grid; gap: 8px; } .return-line { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line, #dfe7e1); border-radius: 10px; } .return-line b { display: block; font-size:14.5px; } .return-line small { color: var(--muted, #78887d); font-size:12.5px; } .return-line input { height: 38px; text-align: right; } .return-total { margin: 0; font-weight: 700; } .status-toggle.return-chip, #appShell .status-toggle.return-chip { background: #f1ece2; color: #7a5a1f; } [data-theme="dark"] .status-toggle.return-chip, [data-theme="dark"] #appShell .status-toggle.return-chip { background: #3a3223; color: #e4c47d; } [data-theme="dark"] .return-line { border-color: #31483c; } /* Письмо клиенту */ #mailForm textarea { width: 100%; min-height: 160px; padding: 10px 12px; border: 1px solid var(--line, #dfe7e1); border-radius: 10px; background: var(--surface, #fff); color: inherit; font: inherit; font-size:14.5px; line-height: 1.45; resize: vertical; } .mail-check { flex-direction: row !important; align-items: center; gap: 8px !important; } .mail-check input { width: auto !important; height: auto !important; } [data-theme="dark"] #mailForm textarea { border-color: #385144; background: #10271f; color: #e7efe9; } /* Админ-панель */ #appShell .admin-table { table-layout: auto; } #appShell .admin-table td, #appShell .admin-table th { text-align: left !important; white-space: normal; vertical-align: middle; } #appShell .admin-table select, #appShell .admin-table input { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); color: inherit; font: inherit; font-size:13.5px; } #appShell .admin-table input { width: 56px; } #appShell .admin-table .is-negative { color: #c0644e; font-weight: 700; } [data-theme="dark"] #appShell .admin-table select, [data-theme="dark"] #appShell .admin-table input { border-color: #385144; background: #10271f; color: #e7efe9; } /* Админ-панель */ #appShell .admin-table { table-layout: auto; } #appShell .admin-table td, #appShell .admin-table th { text-align: left !important; white-space: normal; vertical-align: middle; } #appShell .admin-table select, #appShell .admin-table input { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); color: inherit; font: inherit; font-size:13.5px; } #appShell .admin-table input { width: 56px; } #appShell .admin-table .is-negative { color: #c0644e; font-weight: 700; } [data-theme="dark"] #appShell .admin-table select, [data-theme="dark"] #appShell .admin-table input { border-color: #385144; background: #10271f; color: #e7efe9; } #appShell .admin-table td:nth-child(4) { white-space: nowrap; } /* Прогноз и ABC */ .forecast-summary { display: grid; gap: 4px; margin: 0 22px 10px; padding: 12px 16px; border-radius: 12px; background: #e8f1e9; } .forecast-summary b { font-size:15px; color: #2f6b47; } .forecast-summary span { font-size:13.5px; color: #4d6155; } .forecast-summary.is-gap { background: #fbe4df; } .forecast-summary.is-gap b { color: #b23a26; } #appShell .forecast-table { min-width: 760px; } #appShell .forecast-table tr.is-gap td { background: rgba(192, 100, 78, .08); } .abc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; padding: 0 0 12px; } .abc-title { margin: 0 22px 8px; font-size:14.5px; } #appShell .abc-table { table-layout: auto; } #appShell .abc-table th, #appShell .abc-table td { padding: 7px 8px !important; font-size:13.5px; text-align: right; height: auto !important; } #appShell .abc-table th:first-child, #appShell .abc-table td:first-child { text-align: left; padding-left: 22px !important; white-space: normal; } #appShell .abc-table .is-negative { color: #c0644e; } .abc-badge { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; font-weight: 800; font-size:13.5px; } .abc-A { background: #e6f1e8; color: #2f7a4f; } .abc-B { background: #fbf2df; color: #936d2d; } .abc-C { background: #f1eeec; color: #8a7a72; } [data-theme="dark"] .forecast-summary { background: #23392c; } [data-theme="dark"] .forecast-summary b { color: #a8d4ae; } [data-theme="dark"] .forecast-summary span { color: #a7baab; } [data-theme="dark"] .forecast-summary.is-gap { background: #4a2620; } [data-theme="dark"] .forecast-summary.is-gap b { color: #ffb3a4; } [data-theme="dark"] .abc-A { background: #23392c; color: #a8d4ae; } [data-theme="dark"] .abc-B { background: #3a3223; color: #e4c47d; } [data-theme="dark"] .abc-C { background: #2c2a28; color: #b9aca4; } @media (max-width: 1100px) { .abc-grid { grid-template-columns: 1fr; } } .abc-grid { grid-template-columns: 1fr !important; } #appShell .abc-table { min-width: 0 !important; width: 100%; } /* Авансовые отчёты */ .advance-modal { width: min(920px, calc(100vw - 34px)); } .advance-lines { display: grid; gap: 6px; } .advance-line { display: grid; grid-template-columns: 130px 1fr 1.3fr 1.2fr 110px 34px; gap: 6px; align-items: center; } .advance-line input, .advance-line select { height: 36px !important; font-size:13.5px !important; } .advance-total { margin: 0; font-size:14.5px; } #appShell .advance-table { table-layout: auto; } #appShell .advance-table .is-negative { color: #c0644e; } @media (max-width: 760px) { .advance-line { grid-template-columns: 1fr 1fr; } } /* Склад: документы и несколько складов */ .stock-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .warehouse-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-6px 0 14px} .warehouse-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(127,127,127,.12);border:1px solid rgba(127,127,127,.28);color:inherit;font-size:14.5px} .warehouse-chip button{border:0;background:none;color:inherit;opacity:.55;cursor:pointer;font-size:16px;line-height:1;padding:0} .warehouse-chip button:hover{opacity:1} .stock-lines{display:grid;gap:8px;max-height:46vh;overflow:auto} .stock-line{display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 32px;gap:8px;align-items:center} .stock-line-info{font-size:13.5px;color:var(--muted,#6b7280)} .stock-line-info.is-negative{color:#c2410c}.stock-line-info.is-positive{color:#15803d} @media (max-width:640px){.stock-line{grid-template-columns:1fr 90px 32px}.stock-line-info{grid-column:1/-1}} /* ЭСФ в календаре */ #appShell .calendar-event.type-esf { border-color: #7c5cc4; background: #efe9fb; } [data-theme="dark"] #appShell .calendar-event.type-esf { background: #2b2440; } /* Табель Т-12 и график отпусков */ .payroll-heading-actions{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap} .timesheet-modal{width:min(1320px,96vw)!important;max-width:none!important} .timesheet-grid{overflow:auto;max-height:58vh;margin:10px 0 14px;border:1px solid rgba(127,127,127,.25);border-radius:10px} .timesheet-table{border-collapse:collapse;font-size:13.5px;width:100%} .timesheet-table th,.timesheet-table td{border-bottom:1px solid rgba(127,127,127,.18);padding:5px 3px;text-align:center;min-width:26px} .timesheet-table th:first-child,.timesheet-table td:first-child{text-align:left;min-width:190px;padding-left:10px;position:sticky;left:0;background:#fff;z-index:1} .timesheet-table td:first-child small{display:block;opacity:.6;font-size:12.5px} .timesheet-table thead th{position:sticky;top:0;background:#fff;z-index:2;font-weight:600} .timesheet-table thead th:first-child{z-index:3} .timesheet-table .is-off{background:rgba(127,127,127,.09)} .ts-cell{cursor:pointer;font-weight:600;user-select:none} .ts-cell:hover{outline:1px solid #d6a94f} .ts-cell.is-manual{text-decoration:underline;text-decoration-color:#d6a94f;text-underline-offset:3px} .ts-О{color:#3b82f6}.ts-Б{color:#e11d48}.ts-ДО,.ts-П{color:#c2410c}.ts-С,.ts-РВ{color:#d6a94f}.ts-В,.ts-none{opacity:.45;font-weight:400} .vacation-plan-form{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px} .vacation-plan-form select,.vacation-plan-form input{min-width:0;flex:1 1 160px} .vacation-plan-form button{flex:0 0 auto} .vacation-table td.vac-cell{min-width:44px;padding:4px 2px;text-align:center} .vac-cell.is-fact{background:rgba(59,130,246,.22)} .vac-cell button{display:block;width:100%;border:1px dashed #d6a94f;background:rgba(214,169,79,.12);color:inherit;border-radius:6px;font-size:12.5px;padding:2px 0;cursor:pointer;margin:1px 0} .vac-cell button:hover{background:rgba(225,29,72,.18);border-color:#e11d48} [data-theme="dark"] .timesheet-table thead th,[data-theme="dark"] .timesheet-table td:first-child{background:#142d23} .timesheet-table td,.timesheet-table th{color:inherit} .timesheet-table thead th.is-off{background-image:linear-gradient(rgba(127,127,127,.14),rgba(127,127,127,.14))} #appShell .vacation-table{table-layout:auto;min-width:980px} #appShell .vacation-table th:first-child,#appShell .vacation-table td:first-child{width:auto;min-width:210px} #appShell .vacation-table th,#appShell .vacation-table td{text-align:center} #appShell .vacation-table th:first-child,#appShell .vacation-table td:first-child{text-align:left} .vacation-plan-form select,.vacation-plan-form input{height:42px;border-radius:10px;border:1px solid rgba(127,127,127,.3);background:transparent;color:inherit;padding:0 12px;font:inherit} .vacation-plan-form option{color:#111} .vacation-wrap{overflow-x:auto} #appShell table.vacation-table{width:100%;min-width:980px;border-collapse:collapse;table-layout:auto;font-size:14.5px} #appShell table.vacation-table th{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7;padding:10px 4px;border-bottom:1px solid rgba(127,127,127,.25)} #appShell table.vacation-table td{padding:9px 4px;border-bottom:1px solid rgba(127,127,127,.15);vertical-align:middle} #appShell table.vacation-table td:first-child{padding-left:12px} #appShell table.vacation-table th:not(:first-child),#appShell table.vacation-table td:not(:first-child){width:52px} #appShell table.vacation-table th:nth-last-child(-n+3),#appShell table.vacation-table td:nth-last-child(-n+3){width:84px} #appShell .vacation-plan-form{margin:0 24px 14px} /* Ссылка на оплату, КП и договор */ .share-bar .share-actions-extra{flex-basis:100%;justify-content:flex-start;margin-top:8px} .field-hint{display:block;margin-top:4px;font-size:12.5px;opacity:.65;font-weight:400} /* Знакомство с приложением и демо-режим */ .tour-layer{position:fixed;inset:0;z-index:1200} .tour-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(6,20,14,.62);border:2px solid #d6a94f;transition:all .25s ease;pointer-events:none} .tour-card{position:fixed;width:340px;max-width:calc(100vw - 32px);background:#fff;color:#14231b;border-radius:16px;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.35);transition:left .25s ease,top .25s ease} [data-theme="dark"] .tour-card{background:#172920;color:#e6eee7;border:1px solid #31483c} .tour-card small{font-size:12.5px;opacity:.6;letter-spacing:.06em} .tour-card h3{margin:4px 0 6px;font-size:17px} .tour-card p{margin:0 0 14px;font-size:14.5px;line-height:1.5} .tour-actions{display:flex;align-items:center;gap:8px} .tour-actions span{flex:1} .tour-demo{width:100%;margin-top:10px} .demo-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1100;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border-radius:14px;background:#d6a94f;color:#2b1d05;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14.5px;width:max-content;max-width:calc(100vw - 32px);flex-wrap:wrap} .demo-banner .button{background:#fff;color:#2b1d05;border-color:transparent} @media (max-width:640px){.tour-card{left:16px!important;right:16px;top:auto!important;bottom:16px;transform:none!important;width:auto}} /* Кнопка выгрузки таблицы панели в Excel */ #appShell .panel-heading .panel-excel{margin-left:auto;align-self:center;white-space:nowrap} #appShell tr.is-muted td{opacity:.55} #appShell .fx-line{font-size:13.5px;margin:6px 0 8px;opacity:.9} #appShell .fx-line .text-button{font-size:13.5px;padding:0 4px} #appShell .money-account-card>.fx-line{grid-column:1/-1;margin:2px 0 4px} #appShell #assetsRows .row-actions{white-space:normal} #appShell #assetsRows .row-actions .text-button{display:inline-block;margin:2px 4px} /* Боковое меню: логотип и профиль закреплены, прокручиваются только разделы */ #appShell .sidebar{overflow:hidden} #appShell .sidebar>.brand,#appShell .sidebar>.sidebar-bottom{flex:none} #appShell .sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -10px;padding:0 10px;scrollbar-width:none} #appShell .sidebar-scroll::-webkit-scrollbar{display:none} #appShell .sidebar>.sidebar-bottom{margin-top:10px} /* QR двухфакторного входа */ .mfa-qr svg{display:block;width:100%;height:100%} /* Строка «Итого» в ведомости: премия по центру колонки, отступ сверху */ #payrollBody tfoot th{padding-top:14px} #payrollBody tfoot th:nth-child(3),#payrollBody tfoot th:nth-child(4){text-align:center} /* Карточки показателей перерисовываются только внутри себя (без полос при анимации чисел) */ #appShell .stat-card{contain:paint;isolation:isolate} #appShell .settings-tabs{display:flex;flex-wrap:wrap;overflow:visible;gap:4px} #appShell .settings-tab{flex:1 1 auto;padding:0 8px;font-size:13px;white-space:nowrap;text-align:center} #appShell .settings-panel>.panel-heading{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center} #appShell .settings-panel>.panel-heading>div:first-child{flex:1 1 360px;min-width:0} #appShell .settings-panel>.panel-heading>.update-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;flex:0 1 auto;margin-left:auto} /* Волна прокрутки меню: пункты растворяются в дрейфующей волне сверху/снизу, рябь по пунктам при прокрутке */ #appShell .sidebar-scroll{--mask-top:linear-gradient(#000,#000);--mask-bottom:linear-gradient(#000,#000);-webkit-mask-image:var(--mask-top),linear-gradient(#000,#000),var(--mask-bottom);mask-image:var(--mask-top),linear-gradient(#000,#000),var(--mask-bottom);-webkit-mask-size:400px 40px,100% calc(100% - 80px),400px 40px;mask-size:400px 40px,100% calc(100% - 80px),400px 40px;-webkit-mask-repeat:repeat-x,no-repeat,repeat-x;mask-repeat:repeat-x,no-repeat,repeat-x;-webkit-mask-position:0 0,0 40px,0 100%;mask-position:0 0,0 40px,0 100%;animation:nav-mask-drift 6s linear infinite} #appShell .sidebar-scroll.fade-top{--mask-top:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'400'%20height%3D'40'%20viewBox%3D'0%200%20400%2040'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'.3'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D'M0%2018C50%206%20100%2030%20150%2018S250%206%20300%2018S350%2030%20400%2018V40H0Z'%20fill%3D'url(%23g)'%2F%3E%3C%2Fsvg%3E")} #appShell .sidebar-scroll.fade-bottom{--mask-bottom:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'400'%20height%3D'40'%20viewBox%3D'0%200%20400%2040'%3E%3Cg%20transform%3D'matrix(1%200%200%20-1%200%2040)'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'.3'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D'M0%2018C50%206%20100%2030%20150%2018S250%206%20300%2018S350%2030%20400%2018V40H0Z'%20fill%3D'url(%23g)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")} @keyframes nav-mask-drift{to{-webkit-mask-position:-400px 0,0 40px,400px 100%;mask-position:-400px 0,0 40px,400px 100%}} #appShell .nav-wave-line{position:absolute;left:0;right:0;height:40px;z-index:4;pointer-events:none;opacity:0;transition:opacity .35s ease;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'400'%20height%3D'40'%20viewBox%3D'0%200%20400%2040'%3E%3Cdefs%3E%3ClinearGradient%20id%3D's'%20x1%3D'0'%20x2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23e5c47c'%20stop-opacity%3D'.15'%2F%3E%3Cstop%20offset%3D'.5'%20stop-color%3D'%23e5c47c'%20stop-opacity%3D'.95'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%233fa774'%20stop-opacity%3D'.15'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D'M0%2018C50%206%20100%2030%20150%2018S250%206%20300%2018S350%2030%20400%2018'%20fill%3D'none'%20stroke%3D'url(%23s)'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E") repeat-x 0 0/400px 40px;animation:nav-line-drift 6s linear infinite} #appShell .nav-wave-line.bottom{transform:scaleY(-1);animation-direction:reverse} #appShell .nav-wave-line.show{opacity:1} @keyframes nav-line-drift{to{background-position:-400px 0}} #appShell .sidebar-scroll .nav-item{translate:var(--wx,0) 0} #appShell .sidebar-scroll .nav-item:not(.active){background-image:linear-gradient(90deg,transparent calc(var(--wp,60%) - 22%),rgba(229,196,124,var(--wg,0)) var(--wp,60%),transparent calc(var(--wp,60%) + 22%))} @media (prefers-reduced-motion:reduce){#appShell .sidebar-scroll,#appShell .nav-wave-line{animation:none}} /* Платёжные поручения */ .payorders-modal{width:min(820px,96vw)!important} .payorders-head{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0} .payorders-head label{display:grid;gap:4px;font-size:12.5px} .payorders-warn{color:#d6a94f;font-size:12.5px;margin:4px 0 8px;min-height:0} .payorders-warn:empty{display:none} .payorders-list{display:grid;gap:12px;max-height:52vh;overflow:auto;margin-bottom:14px} .payorders-group>b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:0 0 6px} .payorders-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid rgba(127,127,127,.22);border-radius:10px;margin-bottom:6px;cursor:pointer} .payorders-row small{display:block;opacity:.65;font-size:11.5px;margin-top:2px;overflow-wrap:anywhere} .payorders-row em{font-style:normal;font-weight:700;white-space:nowrap} .payorders-total{margin-right:auto;align-self:center;font-weight:600} /* Автонапоминания */ #appShell .remind-hint{margin:0 24px 10px;font-size:12.5px;opacity:.7} #appShell .remind-log{display:grid;gap:6px;padding:0 24px 20px} #appShell .remind-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 12px;border:1px solid rgba(127,127,127,.2);border-radius:10px} #appShell .remind-row small{display:block;opacity:.65;font-size:11.5px} #appShell .remind-status{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(127,127,127,.15)} #appShell .remind-status.is-sent{background:rgba(63,167,116,.2);color:#5fd09a} #appShell .remind-status.is-error{background:rgba(225,29,72,.18);color:#ff8fa3} #appShell .remind-status.is-no-email{background:rgba(214,169,79,.18);color:#e5c47c} /* Переезд из 1С */ .import-modal{width:min(960px,96vw)!important} .import-type{display:grid;gap:4px;max-width:340px;margin:8px 0 12px;font-size:12.5px} .import-mapping{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px} .import-mapping label{display:grid;gap:4px;font-size:12px} .import-preview{overflow:auto;max-height:34vh;border:1px solid rgba(127,127,127,.22);border-radius:10px;margin-bottom:14px} .import-table{border-collapse:collapse;width:100%;font-size:12.5px} .import-table th,.import-table td{padding:6px 10px;border-bottom:1px solid rgba(127,127,127,.15);text-align:left;white-space:nowrap} .import-table th{position:sticky;top:0;background:#fff;font-size:11.5px} [data-theme="dark"] .import-table th{background:#142d23} /* Распознавание по фото */ .ocr-modal{width:min(900px,96vw)!important} .ocr-pick{cursor:pointer} .ocr-loading,.ocr-error{display:flex;align-items:center;gap:12px;padding:28px 6px;font-size:14px} .ocr-error{color:#ff8fa3} .ocr-spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(127,127,127,.3);border-top-color:#e5c47c;animation:ocr-spin 1s linear infinite} @keyframes ocr-spin{to{transform:rotate(360deg)}} .ocr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:8px 0} .ocr-grid label,.ocr-expense label{display:grid;gap:4px;font-size:12.5px} .ocr-note,.ocr-total{font-size:13px;margin:8px 0} .ocr-items{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0} .ocr-items th{text-align:left;font-size:11.5px;opacity:.7;padding:4px} .ocr-items td{padding:3px 4px}.ocr-items td.num{text-align:right;white-space:nowrap} .ocr-items input{width:100%;min-width:0;height:34px;border-radius:8px;border:1px solid rgba(127,127,127,.3);background:transparent;color:inherit;padding:0 8px;font:inherit} .ocr-items td:first-child{width:46%} .ocr-mode{display:grid;gap:8px;margin:12px 0} .ocr-mode>label{display:flex;gap:8px;align-items:center;font-size:13.5px} .ocr-expense{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-left:24px} /* Поля в окнах платёжек, распознавания и переезда (окна открываются поверх приложения) */ .ocr-modal input,.ocr-modal select,.payorders-head input,.import-modal select{height:40px;border-radius:10px;border:1px solid rgba(127,127,127,.35);background:rgba(127,127,127,.06);color:inherit;padding:0 10px;font:inherit;font-size:13.5px;min-width:0} .ocr-modal input[type="radio"]{height:auto;padding:0} .ocr-items th{background:none!important;color:inherit} .ocr-items input{color:inherit;opacity:1} .ocr-modal select option,.import-modal select option{color:#111} .ocr-modal .ocr-items thead th,.import-modal .import-table thead th{background:transparent!important;color:inherit!important;opacity:.75} .ocr-modal .ocr-items td,.ocr-modal .ocr-items input,.import-modal .import-table td{color:inherit!important;opacity:1!important;-webkit-text-fill-color:currentColor} .ocr-modal .ocr-items thead,.ocr-modal .ocr-items thead tr,.import-modal .import-table thead,.import-modal .import-table thead tr{background:transparent!important} /* Объявление, требование обновиться и техработы (настраиваются в QB Settings) */ .service-banner,.force-update{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:1300;display:flex;align-items:center;gap:14px;max-width:min(860px,calc(100vw - 32px));padding:11px 14px 11px 18px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.3);font-size:13.5px} .service-banner{background:#1f4a39;color:#e6eee7;border:1px solid #2f6a52} .service-banner.level-warn{background:#d6a94f;color:#2b1d05;border-color:#e5c47c} .service-banner.level-danger{background:#b4233c;color:#fff;border-color:#e11d48} .service-banner button{border:0;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.7} .force-update{top:auto;bottom:18px;background:#b4233c;color:#fff;border:1px solid #e11d48} .force-update .button{background:#fff;color:#7a1023;border-color:transparent} .maintenance-screen{position:fixed;inset:0;z-index:1400;background:radial-gradient(120% 80% at 70% 0,#14402f,#0b1f17);display:grid;place-items:center;padding:20px} .maintenance-card{max-width:440px;text-align:center;color:#e6eee7} .maintenance-icon{font-size:44px;margin-bottom:8px} .maintenance-card h2{margin:0 0 8px} .maintenance-card p{opacity:.8;margin:0 0 18px} /* Настольное приложение: заголовок окна внутри страницы — тянуть окно за верхнюю панель, кнопки окна справа */ html.is-desktop .topbar{-webkit-app-region:drag} html.is-desktop.is-windowed #appShell .topbar{padding-right:156px} html.is-desktop .topbar *{-webkit-app-region:no-drag} html.is-desktop .topbar .breadcrumb,html.is-desktop .topbar .breadcrumb *{-webkit-app-region:drag} html.is-desktop #authScreen::before,html.is-desktop #subscriptionGate::before{content:"";position:fixed;top:0;left:0;right:150px;height:36px;-webkit-app-region:drag;z-index:5} /* Выпадающие списки в стиле приложения (modules/select-ui.js) */ .qs-menu{position:fixed;z-index:3000;overflow-y:auto;padding:6px;border-radius:14px;background:#ffffff;border:1px solid #d9e4dc;box-shadow:0 18px 40px rgba(10,30,20,.22);font:500 14px 'Montserrat',system-ui,sans-serif;color:#173a2e;animation:qs-in .14s ease-out;transform-origin:top center;scrollbar-width:thin} .qs-menu.qs-up{transform-origin:bottom center} .qs-menu.qs-leave{animation:qs-out .12s ease-in forwards} [data-theme="dark"] .qs-menu{background:#132a20;border-color:#2b4a3c;color:#e6eee7;box-shadow:0 20px 44px rgba(0,0,0,.5)} .qs-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease} .qs-item.qs-active{background:#eef4ef} [data-theme="dark"] .qs-item.qs-active{background:rgba(255,255,255,.07)} .qs-item.qs-selected{font-weight:700} .qs-item.qs-selected,.qs-item.qs-selected.qs-active{background:linear-gradient(90deg,#f0d08f,#e3b968);color:#1d2a14} .qs-check{font-size:13px} .qs-item.qs-disabled{opacity:.45;cursor:default} .qs-group{padding:8px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55} .qs-empty{padding:10px 12px;opacity:.6} select.qs-open{border-color:#e5c47c!important;box-shadow:0 0 0 3px rgba(229,196,124,.22)!important} @keyframes qs-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}} @keyframes qs-out{to{opacity:0;transform:translateY(-4px) scale(.98)}} @media (prefers-reduced-motion:reduce){.qs-menu,.qs-menu.qs-leave{animation:none}} /* Зарплата: шапка и итог таблицы с воздухом, ровные числовые колонки, подсветка дней сверх нормы. */ #appShell .payroll-table thead th{padding-top:14px;padding-bottom:12px;vertical-align:bottom;line-height:1.25} #appShell .payroll-table th:not(:first-child),#appShell .payroll-table td:not(:first-child){min-width:96px} #appShell .payroll-table th:nth-child(3),#appShell .payroll-table td:nth-child(3),#appShell .payroll-table th:nth-child(4),#appShell .payroll-table td:nth-child(4){min-width:74px} #appShell .payroll-table tbody td{vertical-align:top} #appShell .payroll-table tfoot th{height:auto;padding-top:16px !important;padding-bottom:16px !important;vertical-align:middle;border-top:2px solid var(--line);white-space:nowrap} #appShell .payroll-over .payroll-input{border-color:#e0795f;box-shadow:0 0 0 3px rgba(224,121,95,.18)} /* «Входящие из Telegram» на главной. */ #appShell .tg-inbox{margin-bottom:18px} #appShell .tg-inbox .remind-row{gap:12px} /* Быстрый вход: запомненные аккаунты на экране входа (основное приложение и QB Settings). */ .qz-accounts{margin:16px 0 6px} .qz-accounts-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6b7a72);margin:0 0 10px} .qz-accounts-list{display:grid;gap:8px} .qz-account{display:flex;align-items:stretch;border:1px solid var(--line,#dfe6e1);border-radius:14px;background:var(--surface,#fff);overflow:hidden;transition:border-color .18s,box-shadow .18s} .qz-account:hover{border-color:#d8b462;box-shadow:0 8px 22px rgba(18,52,38,.12)} .qz-account-main{flex:1;display:flex;align-items:center;gap:12px;padding:11px 14px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0} .qz-account-avatar{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#173a2e;background:linear-gradient(135deg,#f1d590,#d8b462)} .qz-account-text{display:grid;min-width:0}.qz-account-text b,.qz-account-text small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qz-account-text small{color:var(--muted,#6b7a72);font-size:12px} .qz-account-forget{flex:none;width:42px;border:0;border-left:1px solid var(--line,#dfe6e1);background:none;color:var(--muted,#6b7a72);font-size:20px;cursor:pointer} .qz-account-forget:hover{color:#c4553f} .qz-accounts-or{display:flex;align-items:center;gap:10px;margin:16px 0 4px;color:var(--muted,#6b7a72);font-size:12px} .qz-accounts-or::before,.qz-accounts-or::after{content:'';flex:1;height:1px;background:var(--line,#dfe6e1)} [data-theme="dark"] .qz-account{background:#16271f;border-color:#2d4438} [data-theme="dark"] .qz-account-forget{border-left-color:#2d4438} [data-theme="dark"] .qz-accounts-or::before,[data-theme="dark"] .qz-accounts-or::after{background:#2d4438} /* Прокрутка страницы — как у меню слева: без серой системной полосы у края окна (основное приложение и QB Settings). Горизонтальная прокрутка таблиц и вложенных блоков — тонкая полоса в цветах приложения. */ html,body{scrollbar-width:none} html::-webkit-scrollbar,body::-webkit-scrollbar{display:none} .table-wrap,.qb-sql-result,.qb-log,.qs-menu,.remind-log,.modal-body,textarea{scrollbar-width:thin;scrollbar-color:#9db3a5 transparent} [data-theme="dark"] .table-wrap,[data-theme="dark"] .qb-sql-result,[data-theme="dark"] .qb-log,[data-theme="dark"] .qs-menu,[data-theme="dark"] .remind-log,[data-theme="dark"] .modal-body,[data-theme="dark"] textarea{scrollbar-color:#456652 transparent} /* ===== Таблицы: ровные колонки без наездов (основное приложение и QB Settings) ===== Заголовки переносятся, ширина колонок — по содержимому; узкие отчёты помещаются в панель, широкие (прогноз на 13 недель, ОПиУ, ДДС) прокручиваются с закреплённой первой колонкой. */ #appShell .report-table{table-layout:auto} #appShell .report-table thead th{white-space:normal !important;line-height:1.25;vertical-align:bottom;text-wrap:balance} #appShell .report-table th:first-child,#appShell .report-table td:first-child{width:auto;min-width:200px} #appShell .report-table td{vertical-align:middle} #appShell .report-table td .status-toggle,#appShell .report-table td .esf-status{white-space:normal;line-height:1.25;text-align:center} #appShell .finance-table th:first-child,#appShell .finance-table td:first-child{position:sticky;left:0;z-index:2;background:var(--surface,#fff);box-shadow:1px 0 0 var(--line,#e4eae4)} [data-theme="dark"] #appShell .finance-table th:first-child,[data-theme="dark"] #appShell .finance-table td:first-child{background:#142d23;box-shadow:1px 0 0 #294439} #appShell #esfPage .report-table,#appShell #osvPage .report-table,#appShell #taxesPage .report-table,#appShell #warehousePage .report-table,#appShell #subcontoPage .report-table{min-width:0} #appShell #esfPage .report-table input[type=date]{width:136px} /* Меню действий в строке таблицы (вместо столбика из ссылок) */ .row-menu{position:relative;display:inline-block} .row-menu-toggle{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--line,#dfe6e1);border-radius:10px;background:var(--surface,#fff);color:var(--ink,#173a2e);font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .2s,background .2s} .row-menu-toggle:hover,.row-menu.is-open .row-menu-toggle{border-color:#d8b462} .row-menu-list{position:fixed;z-index:3000;min-width:220px;padding:6px;border-radius:14px;background:#fff;border:1px solid #d9e4dc;box-shadow:0 18px 40px rgba(10,30,20,.22);display:none;transform-origin:top right} .row-menu-list.is-open{display:grid;animation:qzPop .22s cubic-bezier(.32,.72,0,1)} .row-menu-list .text-button{display:block;width:100%;padding:10px 12px;border-radius:9px;text-align:left;font-weight:600;white-space:nowrap} .row-menu-list .text-button:hover{background:rgba(216,180,98,.16)} [data-theme="dark"] .row-menu-toggle{background:#1c3026;border-color:#344b3f;color:#e9f0e9} [data-theme="dark"] .row-menu-list{background:#16271f;border-color:#2d4438;box-shadow:0 18px 44px rgba(0,0,0,.45)} /* ===== Окна подтверждения и ввода (вместо системных) ===== */ .qz-dialog-back{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;background:rgba(6,18,12,0);backdrop-filter:blur(0);transition:background .28s ease,backdrop-filter .28s ease} .qz-dialog-back.is-open{background:rgba(6,18,12,.42);backdrop-filter:blur(6px)} .qz-dialog{width:min(420px,100%);padding:26px 24px 20px;border-radius:22px;background:#fff;border:1px solid #e1e8e3;box-shadow:0 30px 80px rgba(6,24,16,.35);font-family:'Montserrat',system-ui,sans-serif;transform:scale(1.08);opacity:0;transition:transform .42s cubic-bezier(.32,.72,0,1),opacity .2s ease} .qz-dialog-back.is-open .qz-dialog{transform:scale(1);opacity:1} .qz-dialog-back.is-closing .qz-dialog{transform:scale(.96);opacity:0;transition-duration:.18s} .qz-dialog.is-nudge{animation:qzNudge .3s cubic-bezier(.32,.72,0,1)} .qz-dialog-text{margin:0 0 18px;color:#173a2e;font-size:15px;line-height:1.5;white-space:pre-line;text-align:center;font-weight:500} .qz-dialog-input{width:100%;height:44px;margin:0 0 18px;padding:0 14px;border:1px solid #d6e0da;border-radius:12px;font:inherit;font-size:15px;color:#173a2e;background:#f7faf8;outline:none;transition:border-color .2s,box-shadow .2s} .qz-dialog-input:focus{border-color:#d8b462;box-shadow:0 0 0 3px rgba(216,180,98,.2)} .qz-dialog-actions{display:flex;gap:10px} .qz-dialog-btn{flex:1;height:46px;border:0;border-radius:13px;font:700 14px 'Montserrat',system-ui,sans-serif;cursor:pointer;transition:transform .15s cubic-bezier(.32,.72,0,1),filter .2s,background .2s} .qz-dialog-btn:active{transform:scale(.96)} .qz-dialog-btn:empty{display:none} .qz-dialog-cancel{background:#eef3f0;color:#173a2e} .qz-dialog-ok{background:linear-gradient(135deg,#1f6b4f,#155a40);color:#fff} .qz-dialog-ok.is-danger{background:linear-gradient(135deg,#d0573f,#b2412c)} .qz-dialog-btn:hover{filter:brightness(1.05)} .qz-dialog-btn:focus-visible{outline:2px solid #d8b462;outline-offset:2px} [data-theme="dark"] .qz-dialog{background:#16271f;border-color:#2d4438;box-shadow:0 30px 80px rgba(0,0,0,.55)} [data-theme="dark"] .qz-dialog-text{color:#e9f0e9} [data-theme="dark"] .qz-dialog-input{background:#1c3026;border-color:#344b3f;color:#e9f0e9} [data-theme="dark"] .qz-dialog-cancel{background:#22382d;color:#e9f0e9} @keyframes qzNudge{0%,100%{transform:scale(1)}40%{transform:scale(1.03)}} /* ===== Календарь вместо системного (поля даты и месяца) ===== */ input[type="date"],input[type="month"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23b8913f' stroke-width='1.8' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px !important;cursor:pointer} input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator{display:none} input[type="date"].qd-open,input[type="month"].qd-open{border-color:#d8b462 !important;box-shadow:0 0 0 3px rgba(216,180,98,.18)} .qd-pop{position:fixed;z-index:3100;width:300px;padding:14px;border-radius:18px;background:#fff;border:1px solid #d9e4dc;box-shadow:0 22px 50px rgba(10,30,20,.24);font:500 14px 'Montserrat',system-ui,sans-serif;color:#173a2e;transform-origin:top left;animation:qzPop .26s cubic-bezier(.32,.72,0,1)} .qd-pop.qd-up{transform-origin:bottom left} .qd-pop.qd-leave{opacity:0;transform:scale(.96);transition:opacity .14s,transform .14s} .qd-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px} .qd-head b{font-size:15px;font-weight:800} .qd-nav{width:34px;height:34px;border:0;border-radius:10px;background:#f1f5f2;color:#173a2e;font-size:20px;line-height:1;cursor:pointer;transition:background .2s,transform .15s} .qd-nav:hover{background:#e6eee9}.qd-nav:active{transform:scale(.92)} .qd-week,.qd-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .qd-week span{padding:4px 0 6px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;color:#7d8c84;text-transform:uppercase} .qd-day,.qd-cell{height:36px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;cursor:pointer;transition:background .15s,transform .15s} .qd-day:hover,.qd-cell:hover{background:rgba(216,180,98,.18)} .qd-day:active,.qd-cell:active{transform:scale(.92)} .qd-day.is-out{color:#b3beb7}.qd-day.is-weekend:not(.is-out){color:#c4553f} .qd-day.is-today,.qd-cell.is-today{box-shadow:inset 0 0 0 1.5px #d8b462} .qd-day.is-selected,.qd-cell.is-selected{background:linear-gradient(135deg,#f1d590,#d8b462);color:#173a2e;font-weight:800} .qd-day:disabled,.qd-cell:disabled{opacity:.3;cursor:default;background:none} .qd-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .qd-cell{height:42px;text-transform:capitalize} .qd-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #edf1ee} .qd-link{border:0;background:none;color:#1f6b4f;font-weight:700;font-size:13px;font-family:inherit;cursor:pointer;padding:6px 8px;border-radius:8px} .qd-link:hover{background:#eef4f0}.qd-clear{color:#c4553f} [data-theme="dark"] .qd-pop{background:#16271f;border-color:#2d4438;color:#e9f0e9;box-shadow:0 22px 50px rgba(0,0,0,.5)} [data-theme="dark"] .qd-nav{background:#22382d;color:#e9f0e9} [data-theme="dark"] .qd-nav:hover{background:#2a4337} [data-theme="dark"] .qd-day.is-out{color:#58705f} [data-theme="dark"] .qd-day.is-weekend:not(.is-out){color:#f0907d} [data-theme="dark"] .qd-foot{border-top-color:#2d4438} [data-theme="dark"] .qd-link{color:#7fd3a6} [data-theme="dark"] .qd-link:hover{background:#22382d} [data-theme="dark"] .qd-clear{color:#f0907d} /* ===== Анимации в духе iOS (основное приложение и QB Settings) ===== Пружинная кривая cubic-bezier(.32,.72,0,1): быстрый старт, мягкая остановка. Только transform и opacity — дёшево для видеокарты. */ @keyframes qzPop{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}} @keyframes qzPage{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes qzRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} @keyframes qzFade{from{opacity:0}to{opacity:1}} @keyframes qzSheet{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}} /* Переход между разделами: страница выезжает снизу, панели — лесенкой */ #appShell .page-content:not(.hidden){animation:qzPage .45s cubic-bezier(.32,.72,0,1) both} #appShell .page-content:not(.hidden)>*{animation:qzRise .55s cubic-bezier(.32,.72,0,1) both} #appShell .page-content:not(.hidden)>*:nth-child(2){animation-delay:.04s} #appShell .page-content:not(.hidden)>*:nth-child(3){animation-delay:.08s} #appShell .page-content:not(.hidden)>*:nth-child(4){animation-delay:.12s} #appShell .page-content:not(.hidden)>*:nth-child(5){animation-delay:.16s} #appShell .page-content:not(.hidden)>*:nth-child(n+6){animation-delay:.2s} /* Окна: фон проявляется, карточка всплывает пружиной */ .modal-backdrop:not(.hidden){animation:qzFade .25s ease both} .modal-backdrop:not(.hidden)>.invoice-modal,.modal-backdrop:not(.hidden)>div{animation:qzSheet .48s cubic-bezier(.32,.72,0,1) both} /* Нажатие — лёгкое «вдавливание», как у кнопок iOS */ .button,.text-button,.nav-item,.status-toggle,.theme-toggle,.row-menu-toggle,.qz-account-main,.stat-card-link{transition:transform .18s cubic-bezier(.32,.72,0,1),background-color .2s,border-color .2s,box-shadow .2s,color .2s,filter .2s} .button:active,.theme-toggle:active,.row-menu-toggle:active,.qz-account-main:active,.stat-card-link:active{transform:scale(.97)} .nav-item:active,.text-button:active{transform:scale(.98)} /* Карточки показателей чуть приподнимаются при наведении */ #appShell .stat-card{transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .35s} #appShell .stat-card:hover{transform:translateY(-2px)} /* Всплывающее уведомление — пружиной снизу */ .toast{transition:opacity .25s ease,transform .45s cubic-bezier(.32,.72,0,1)} /* Выпадающие списки — тем же «всплытием» */ .qs-menu{animation:qzPop .24s cubic-bezier(.32,.72,0,1)} @media (prefers-reduced-motion: reduce){ #appShell .page-content:not(.hidden),#appShell .page-content:not(.hidden)>*,.modal-backdrop:not(.hidden),.modal-backdrop:not(.hidden)>*,.qs-menu,.qd-pop,.row-menu-list,.qz-dialog{animation:none !important;transition:none !important} .button:active,.nav-item:active,.text-button:active,#appShell .stat-card:hover{transform:none} } /* ЭСФ: статус переносится, таблица помещается в панель */ #appShell .esf-table{min-width:0 !important;width:100%} #appShell .esf-table td .esf-status,#appShell .esf-table td .status-toggle{white-space:normal !important;max-width:210px;line-height:1.3;text-align:center} #appShell .esf-table th,#appShell .esf-table td{padding-left:10px;padding-right:10px} /* Колонка с кнопкой «Действия» — по ширине кнопки */ #appShell td.row-actions:has(.row-menu){width:1%;white-space:nowrap;text-align:right} .row-menu-toggle{white-space:nowrap} /* Кадры: ширина колонок по содержимому, кнопка «Действия» — в своей колонке без переносов */ #appShell #staffPage table{table-layout:auto} #appShell #staffPage th{width:auto !important} #appShell #staffPage td.row-actions{width:1%;white-space:nowrap !important;text-align:right} /* Обёртка меню не должна получать стиль круглых иконок-кнопок колонки действий */ #appShell .row-actions .row-menu,#appShell td .row-menu{display:inline-block !important;width:auto !important;height:auto !important;min-width:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important} /* Любая таблица приложения: заголовки переносятся, строки выровнены по центру */ #appShell .table-wrap table thead th{white-space:normal !important;line-height:1.25;vertical-align:bottom} #appShell .table-wrap table tbody td{vertical-align:middle} #appShell .warehouse-table{table-layout:auto} /* Шапка таблиц: текст по центру с ровными отступами, а не прижат к нижней линии; короткие заголовки не переносятся */ #appShell .table-wrap table thead th,#appShell .report-table thead th{vertical-align:middle !important;padding-top:14px !important;padding-bottom:14px !important;height:auto !important;min-height:46px} #appShell .table-wrap table thead th.th-short{white-space:nowrap !important} /* ОСВ: синтетические счета — заголовки групп с итогами, субсчета — с отступом */ #appShell .osv-table tr.osv-group td{background:rgba(216,180,98,.08);font-weight:800;padding-top:12px;padding-bottom:12px} #appShell .osv-table tr.osv-group td:first-child b{letter-spacing:.01em} #appShell .osv-table tr.osv-sub td:first-child{padding-left:30px} [data-theme="dark"] #appShell .osv-table tr.osv-group td{background:rgba(216,180,98,.07)} #appShell .osv-table th:first-child,#appShell .osv-table td:first-child{min-width:340px;width:34%} /* Согласие при регистрации, ссылки на документы в окнах и на экране входа */ .auth-consent{display:flex;gap:10px;align-items:flex-start;color:#5d6d63;font-size:11.5px;line-height:1.5;cursor:pointer} .auth-consent input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:#2f6b4f} .auth-consent a,.auth-copyright a{color:#2f6b4f} [data-theme="dark"] .auth-consent{color:#b7c8bb} [data-theme="dark"] .auth-consent a,[data-theme="dark"] .auth-copyright a{color:#9fd0b0} .qz-dialog-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:-6px 0 18px;font-size:13.5px} .qz-dialog-links a{color:#2f6b4f;font-weight:600} [data-theme="dark"] .qz-dialog-links a{color:#9fd0b0} #privacyNote a{color:#2f6b4f;font-weight:600} [data-theme="dark"] #privacyNote a{color:#9fd0b0} /* Тарифы: раздел выше тарифа (замок) и использование лимитов в «Настройки → Подписка» (modules/plans.js). */ #appShell .page-content.is-plan-locked > :not(.page-heading):not(.plan-lock) { display: none !important; } #appShell .page-content.is-plan-locked .page-heading .heading-actions { display: none !important; } .plan-lock { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin: 40px auto; padding: 36px 28px !important; text-align: center; } .plan-lock h2 { margin: 0; font-size: 21px; line-height: 1.3; } .plan-lock p { margin: 0 0 8px; color: var(--muted, #6b7a70); line-height: 1.55; } .plan-lock-badge { padding: 5px 12px; border-radius: 999px; background: #d6a94f; color: #2b1d05; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; } .plan-usage:empty { display: none; } .plan-usage { margin: 0 0 16px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #e3e9e4); } .plan-rows { display: grid; gap: 14px; padding: 4px 22px 16px; } .plan-row-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .plan-row-top b { white-space: nowrap; } .plan-bar { height: 8px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(120, 130, 122, .18); } .plan-bar i { display: block; height: 100%; border-radius: inherit; background: #2f8a5e; transition: width .5s cubic-bezier(.2, .9, .25, 1); } .plan-row.is-warn .plan-bar i { background: #d6a94f; } .plan-row.is-full .plan-bar i { background: #e5484d; } .plan-row.is-full b { color: #e5484d; } .plan-features { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 22px 14px; font-size: 12.5px; } .plan-features .is-off { opacity: .45; } [data-theme="dark"] .plan-usage { border-color: #2c4436; } [data-theme="dark"] .plan-bar i { background: #4cc48a; } .plan-row.is-off { opacity: .55; } /* «Показать ещё» в длинных списках */ .more-rows td { padding: 14px !important; text-align: center !important; } .more-rows td::before { display: none !important; } #appShell .qm-cards tr.more-rows { border: 0 !important; background: transparent !important; padding: 0 !important; } div.more-rows { display: flex; justify-content: center; padding: 16px 0 4px; } /* «Свой тариф»: скрытые разделы и конструктор с калькулятором (modules/plans.js). */ .section-off { display: none !important; } #appShell .mobile-tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .subscription-builder-open { width: 100%; justify-content: center; margin: 4px 0 10px; } .plan-builder { max-width: 620px; } .plan-builder h2 { margin: 6px 0 4px; } .pb-interval { display: inline-flex; gap: 4px; margin: 14px 0 12px; padding: 4px; border-radius: 12px; background: rgba(118, 128, 120, .12); } .pb-interval button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; } .pb-interval button i { font-style: normal; font-size: 11px; color: #2f8a5e; margin-left: 4px; } .pb-interval button.is-active { background: var(--card, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); } .pb-list { display: grid; gap: 6px; max-height: 42vh; overflow-y: auto; margin-bottom: 12px; } .pb-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line, #e3e9e4); border-radius: 12px; cursor: pointer; transition: border-color .15s, background-color .15s; } .pb-item:has(input:checked) { border-color: #2f8a5e; background: rgba(47, 138, 94, .07); } .pb-item input { width: 18px; height: 18px; accent-color: #2f8a5e; } .pb-item span { display: grid; gap: 2px; font-size: 13.5px; } .pb-item small { color: var(--muted, #7b8a80); font-size: 11.5px; } .pb-item em { font-style: normal; font-weight: 700; white-space: nowrap; font-size: 13px; } .pb-item.is-base { cursor: default; opacity: .85; } .pb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line, #e3e9e4); font-size: 13.5px; } .pb-row small { display: block; color: var(--muted, #7b8a80); font-size: 11.5px; } .pb-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(118, 128, 120, .12); } .pb-seg button { display: grid; justify-items: center; min-height: 38px; padding: 4px 12px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; } .pb-seg button small { font-weight: 500; font-size: 10.5px; } .pb-seg button.is-active { background: var(--card, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); } .pb-stepper { display: inline-flex; align-items: center; gap: 12px; } .pb-stepper button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(118, 128, 120, .14); color: inherit; font-size: 18px; cursor: pointer; } .pb-stepper b { min-width: 24px; text-align: center; font-size: 16px; } .pb-total { display: grid; justify-items: center; gap: 2px; margin: 12px 0; padding: 16px; border-radius: 16px; background: linear-gradient(150deg, #1f7a52, #134c35); color: #fff; } .pb-total span { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .6px; } .pb-total strong { font-size: 32px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .pb-total small { font-size: 12.5px; opacity: .85; } .pb-contact { grid-template-columns: 1fr 1fr; } .pb-note { grid-column: 1 / -1; color: var(--muted, #7b8a80); font-size: 12px; line-height: 1.45; } [data-theme="dark"] .pb-item { border-color: #2c4436; } [data-theme="dark"] .pb-interval button.is-active, [data-theme="dark"] .pb-seg button.is-active { background: #24402f; } @media (max-width: 760px) { .pb-contact { grid-template-columns: 1fr; } .pb-list { max-height: none; } .pb-total strong { font-size: 28px; } } /* Счета: «Изменить» и «Удалить» рядом */ .money-account-actions{justify-self:end;grid-column:2;display:flex;gap:6px}.money-account-actions .money-account-edit{grid-column:auto} .money-account-edit.is-danger{color:#d9534f}.money-account-edit.is-danger:hover{background:rgba(217,83,79,.1);border-color:rgba(217,83,79,.35)} /* Telegram: блок «Что присылать» — все уведомления видны сразу, сеткой */ .tg-notify{margin:4px 0 14px;padding:14px 16px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(111,224,166,.04)} .tg-notify-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px} .tg-notify-head b{font-size:13.5px}.tg-notify-head small{opacity:.6;font-size:12px} .tg-notify-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px} .tg-notify-grid .mail-check{display:flex;align-items:center;gap:10px;min-height:42px;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease} .tg-notify-grid .mail-check:hover{background:rgba(111,224,166,.08)} .tg-notify-grid .mail-check:has(input:checked){border-color:rgba(76,196,138,.45);background:rgba(76,196,138,.08)} /* Забыли пароль */ .auth-forgot{display:block;margin:-6px 0 12px auto;padding:0;border:0;background:transparent;color:#35694d;font:600 12.5px var(--sans,inherit);cursor:pointer}.auth-forgot:hover{text-decoration:underline} [data-theme="dark"] .auth-forgot{color:#8fd6ae} .auth-error.is-info{color:#1f6b46;background:rgba(31,122,82,.08);border-color:rgba(31,122,82,.25)} [data-theme="dark"] .auth-error.is-info{color:#9be3bb;background:rgba(111,224,166,.1)} .recovery-form{display:grid;gap:10px} /* План и факт на месяц */ .plan-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .plan-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px} .plan-tile{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(111,224,166,.05)} .plan-tile small{color:var(--muted);font-size:12px}.plan-tile b{font-size:18px;font-variant-numeric:tabular-nums}.plan-tile span{color:var(--muted);font-size:12px} .plan-tile.is-bad{border-color:rgba(192,100,78,.4);background:rgba(192,100,78,.06)} #appShell .plan-table td:not(:first-child),#appShell .plan-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums} #appShell .plan-table tr.is-strong td{font-weight:700}#appShell .plan-table tr.is-sub td:first-child{padding-left:24px!important;color:var(--muted)} #appShell .plan-table tr.is-result td{font-weight:800;border-top:2px solid var(--line)} #appShell .plan-table .is-negative,.plan-tile .is-negative,.crm-panel .is-negative,.client-card-modal .is-negative{color:#c0644e} #appShell .plan-table .is-positive{color:#2f8a5b} .plan-input{width:130px;max-width:100%;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:right;font-variant-numeric:tabular-nums} .plan-input:focus{outline:none;border-color:#4cc48a;box-shadow:0 0 0 3px rgba(76,196,138,.18)} .plan-progress{min-width:150px}.plan-progress small{display:inline-block;width:42px;color:var(--muted);font-size:12px} .plan-bar{display:inline-block;width:90px;height:6px;margin-right:6px;border-radius:99px;background:rgba(127,140,130,.18);vertical-align:middle;overflow:hidden} .plan-bar span{display:block;height:100%;border-radius:inherit;background:#4cc48a}.plan-bar.is-bad span{background:#d97a5f} .plan-nobar{color:var(--muted);font-size:12px} .plan-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .plan-add input{height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font:inherit} .plan-add input:first-child{flex:1 1 240px}.plan-add input[type=number]{width:140px} @media (max-width:760px){.plan-summary{grid-template-columns:1fr}.plan-progress{min-width:0}.plan-bar{width:56px}} /* Лёгкая CRM: сделки, воронка, карточка клиента */ .client-link{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer} .client-link:hover{color:#2f8a5b;text-decoration:underline}.client-link.is-muted{font-weight:500} [data-theme="dark"] .client-link:hover{color:#8fd6ae} .crm-chip{display:inline-block;margin:2px 6px 2px 0;padding:1px 8px;border-radius:99px;background:rgba(76,196,138,.12);color:#2f7a4f;font-size:11.5px;font-weight:650;white-space:nowrap!important} .crm-chip.is-due{background:rgba(217,122,95,.14);color:#b0563f}.crm-chip.is-done{background:rgba(127,140,130,.14);color:var(--muted)} [data-theme="dark"] .crm-chip{color:#9be3bb}[data-theme="dark"] .crm-chip.is-due{color:#f0a48c} .crm-pipeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px} .crm-stage{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-top:3px solid #9fb3a6;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s ease} .crm-stage:hover{background:rgba(111,224,166,.07)} .crm-stage small{color:var(--muted);font-size:12px}.crm-stage b{font-size:20px}.crm-stage span{font-size:12.5px;font-variant-numeric:tabular-nums} .stage-talks{border-top-color:#e0b04f}.stage-offer{border-top-color:#5b9bd5}.stage-won{border-top-color:#3fae74}.stage-lost{border-top-color:#c9826f} .crm-due{margin-bottom:12px;padding:10px 14px;border:1px solid rgba(217,122,95,.35);border-radius:12px;background:rgba(217,122,95,.06)} .crm-due-head{margin-bottom:6px;font-weight:700;font-size:13px;color:#b0563f}[data-theme="dark"] .crm-due-head{color:#f0a48c} .crm-due-item{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto auto;align-items:center;gap:12px;padding:5px 0;font-size:13px} .crm-due-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.crm-due-item small{font-size:12px} .deal-stage{height:30px;padding:0 8px;border:1px solid var(--line);border-left:3px solid #9fb3a6;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:12.5px} .deal-stage.stage-talks{border-left-color:#e0b04f}.deal-stage.stage-offer{border-left-color:#5b9bd5}.deal-stage.stage-won{border-left-color:#3fae74}.deal-stage.stage-lost{border-left-color:#c9826f} .client-card-modal{width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto} .client-card-modal h3{margin:0 0 8px;font-size:14px} .client-card-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 16px} .client-card-stats div{padding:10px 12px;border:1px solid var(--line);border-radius:12px}.client-card-stats small{display:block;color:var(--muted);font-size:11.5px}.client-card-stats b{font-size:15px;font-variant-numeric:tabular-nums} .client-card-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:16px} .client-card-block{padding:14px;border:1px solid var(--line);border-radius:14px} .client-card-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .crm-note-form{display:grid;gap:10px} .crm-note-form textarea,#dealForm textarea{width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font:inherit;resize:vertical} .crm-kinds{display:flex;flex-wrap:wrap;gap:6px} .crm-kinds label{cursor:pointer}.crm-kinds input{position:absolute;opacity:0;pointer-events:none} .crm-kinds span{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;transition:background-color .15s ease,border-color .15s ease} .crm-kinds input:checked+span{border-color:rgba(76,196,138,.6);background:rgba(76,196,138,.14);font-weight:650} .crm-kinds input:focus-visible+span{box-shadow:0 0 0 3px rgba(76,196,138,.25)} .crm-note-row{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap} .crm-note-row label{display:grid;gap:4px;font-size:12px;color:var(--muted)} .crm-note-row input{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font:inherit} .crm-note-row .button{margin-left:auto} .crm-deals{display:grid;gap:6px;margin-top:6px} .crm-deal{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid #9fb3a6;border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer} .crm-deal:hover{background:rgba(111,224,166,.07)}.crm-deal small{color:var(--muted);font-size:12px} .crm-deal.stage-talks{border-left-color:#e0b04f}.crm-deal.stage-offer{border-left-color:#5b9bd5}.crm-deal.stage-won{border-left-color:#3fae74}.crm-deal.stage-lost{border-left-color:#c9826f} .crm-empty{margin:6px 0;color:var(--muted);font-size:13px} .client-card-history{margin-top:18px!important} .crm-timeline{display:grid;gap:2px} .crm-event{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:8px 4px;border-bottom:1px solid var(--line)} .crm-event:last-child{border-bottom:0}.crm-event small{color:var(--muted);font-size:12px}.crm-event p{margin:2px 0 4px;font-size:13.5px;white-space:pre-wrap} .crm-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(127,140,130,.12);font-size:13px} .crm-event.is-note .crm-icon{background:rgba(76,196,138,.15)}.crm-event.is-pay .crm-icon{background:rgba(63,174,116,.18)} .offline-banner{background:#e7eef8;color:#2f4f7a}.offline-banner.is-syncing{background:#e4f3ea;color:#21613f} [data-theme="dark"] .offline-banner{background:#22324a;color:#a9c6ef}[data-theme="dark"] .offline-banner.is-syncing{background:#1d3a2a;color:#9be3bb} @media (max-width:760px){.crm-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.client-card-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.client-card-cols{grid-template-columns:1fr}.crm-due-item{grid-template-columns:1fr auto}.crm-due-item span{grid-column:1/-1;order:3}} .client-card-modal .modal-description a{color:inherit;text-decoration:underline;text-decoration-color:rgba(76,196,138,.6);text-underline-offset:3px} .crm-muted{color:var(--muted)} #crmPage .is-negative{color:#c0644e}