/* Developer note: Styles/script scope: app.css. Page and section ownership: devnotes/PROJECT_CODE_MAP.md. */
:root {
    --navy: #061421;
    --navy2: #0b1d2b;
    --ink: #101a2b;
    --muted: #607392;
    --line: #e3ebf5;
    --page: #f3f8fc;
    --white: #fff;
    --green: #05be80;
    --blue: #087bfa;
    --shadow: 0 10px 30px #1b436014;
    font-family: 'DM Sans', Arial, sans-serif;
    color: var(--ink);
    font-synthesis: none
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--page);
    font-size: 14px
}

button,
input,
select {
    font: inherit
}

button,
a {
    cursor: pointer
}

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

.app-shell {
    min-height: 100vh
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    background: linear-gradient(155deg, #07111b, #03111e 65%, #041a28);
    color: #d9e5f2;
    padding: 22px 16px 20px;
    display: flex;
    flex-direction: column;
    z-index: 5
}

.sidebar:has(> .sidebar-brand-row) {
    padding-top: 0
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #f4f9ff;
    margin: 0 8px 30px
}

.brand-mark {
    color: #00d5a0;
    border: 4px solid #00c99a;
    border-radius: 14px 14px 19px 19px;
    width: 44px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 25px
}

.brand b {
    font: 800 24px Manrope, sans-serif;
    letter-spacing: -1px
}

.brand b span {
    color: #00cc92
}

.brand small {
    display: block;
    color: #aebdd0;
    font-size: 14px
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.nav-item {
    min-height: 47px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 12px;
    border-radius: 8px;
    color: #bdcde0;
    font-size: 15px
}

.nav-item:hover,
.nav-item.active {
    color: white;
    background: linear-gradient(90deg, #00bc8540, #00a9791c)
}

.nav-item.active {
    box-shadow: inset 4px 0 #00d99d
}

.nav-icon {
    font-size: 23px;
    width: 28px;
    text-align: center;
    color: #c6d9ed
}

.active .nav-icon {
    color: #00d49a
}

.nav-rule {
    border-top: 1px solid #163145;
    margin: 12px 8px
}

.plan-card {
    margin-top: auto;
    border: 1px solid #1d394e;
    background: #0a2032;
    border-radius: 10px;
    padding: 15px;
    color: #dce9f7
}

.plan-card b,
.plan-card small {
    display: block
}

.plan-card small {
    color: #9cb0c6;
    margin-top: 6px
}

.progress {
    height: 10px;
    background: #183146;
    border-radius: 9px;
    margin: 12px 0
}

.progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #00c486, #03a76f);
    border-radius: 9px
}

.plan-card a {
    display: block;
    background: #142c43;
    text-align: center;
    padding: 11px;
    border-radius: 7px;
    font-weight: 700
}

.main-area {
    margin-left: 272px;
    min-height: 100vh
}

.topbar {
    height: var(--shell-header-height, 74px);
    background: #ffffffdc;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 4
}

.global-search {
    height: 42px;
    width: min(700px, 64%);
    display: flex;
    align-items: center;
    border: 1px solid #d4e0f0;
    background: #f9fbfe;
    border-radius: 8px;
    padding: 0 12px;
    gap: 12px;
    color: #283f63
}

.global-search>span {
    font-size: 26px
}

.global-search input {
    border: 0;
    background: transparent;
    outline: 0;
    flex: 1;
    min-width: 0;
    color: var(--ink)
}

kbd {
    font-size: 12px;
    background: #edf4fc;
    border: 1px solid #d6e2f1;
    border-radius: 5px;
    padding: 4px 7px
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-left: auto
}

.top-actions>button {
    border: 0;
    background: transparent;
    color: #132947;
    font-size: 22px;
    position: relative
}

.notification-dot {
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 8px;
    background: #ef3340;
    border-radius: 100%
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 11px !important;
    text-align: left !important
}

.user-chip b,
.user-chip small {
    display: block;
    font-size: 13px
}

.user-chip small {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px
}

.avatar {
    background: #122b45;
    color: white;
    border-radius: 50%;
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center
}

.content {
    padding: 20px 28px 38px;
    max-width: 1800px;
    margin: auto
}

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

.page-heading h1 {
    font: 800 29px Manrope, sans-serif;
    margin: 0 0 3px;
    letter-spacing: -.7px
}

.page-heading p,
.panel>p,
.generator-panel>p {
    margin: 0;
    color: var(--muted);
    font-size: 15px
}

.btn {
    border: 1px solid #d7e3f2;
    background: #fff;
    color: #10233d;
    border-radius: 8px;
    padding: 11px 16px;
    font-weight: 700;
    transition: .15s
}

.btn:hover {
    filter: brightness(.98);
    transform: translateY(-1px)
}

.btn.primary {
    background: linear-gradient(115deg, #05b77d, #00c985);
    border-color: #05ba80;
    color: #fff
}

.btn.full {
    width: 100%;
    margin-top: 15px
}

.btn.small {
    padding: 6px 10px;
    font-size: 12px
}

.danger-outline {
    color: #e43245 !important;
    border-color: #f4c6cb !important;
    background: #fff6f6 !important
}

.panel,
.stat-card {
    background: #fff;
    border: 1px solid #edf2f8;
    border-radius: 11px;
    box-shadow: var(--shadow)
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0
}

.stat-card {
    min-height: 110px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px
}

.stat-card>div {
    min-width: 0
}

.stat-icon {
    flex: none;
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 23px
}

.stat-card b {
    display: block;
    font: 800 26px Manrope, sans-serif;
    line-height: 1.1
}

.stat-card span:not(.stat-icon) {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin: 3px 0
}

.stat-card small {
    font-size: 12px;
    color: #07996c
}

.green {
    background: #dcf9ed;
    color: #00a974
}

.blue {
    background: #e4f0ff;
    color: #0877f9
}

.amber {
    background: #fff4d8;
    color: #f29b00
}

.red {
    background: #ffeaec;
    color: #ed3748
}

.purple {
    background: #f0e8ff;
    color: #783df2
}

.slate {
    background: #e9eff7;
    color: #647a9a
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 15px
}

.panel {
    padding: 17px;
    min-width: 0
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.panel h3,
.panel-title h3 {
    font: 800 16px Manrope, sans-serif;
    margin: 0 0 13px
}

.panel-title h3 {
    margin: 0
}

.panel-title>a {
    color: #126ce0
}

.donut-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
    min-height: 185px
}

.donut {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(#06bf82 0 74%, #ffb319 74% 86%, #ff4a59 86% 100%);
    display: grid;
    place-items: center;
    position: relative
}

.donut:before {
    content: '';
    position: absolute;
    inset: 23px;
    border-radius: 50%;
    background: #fff
}

.donut>div {
    position: relative;
    text-align: center
}

.donut b {
    font: 800 26px Manrope;
    display: block
}

.donut small {
    color: var(--muted)
}

.legend {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 145px
}

.legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    color: #445773
}

.legend li b {
    margin-left: auto;
    color: #152641;
    font-size: 12px
}

.legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.green-bg {
    background: #06bf82
}

.amber-bg {
    background: #ffb319
}

.red-bg {
    background: #ff4a59
}

.blue-bg {
    background: #1583fa
}

.purple-bg {
    background: #853cff
}

.slate-bg {
    background: #8193aa
}

.gauge {
    height: 143px;
    width: 225px;
    margin: 10px auto 0;
    border: 16px solid #e9eff6;
    border-bottom: 0;
    border-radius: 150px 150px 0 0;
    position: relative;
    text-align: center;
    padding-top: 35px
}

.gauge:before {
    content: '';
    position: absolute;
    inset: -16px -16px 0;
    border: 16px solid transparent;
    border-top-color: #09c58a;
    border-left-color: #09c58a;
    border-radius: 150px 150px 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.gauge b {
    font: 800 34px Manrope;
    display: block
}

.gauge small {
    color: var(--muted)
}

.good-callout {
    border: 1px solid #c8f1e0;
    background: #e8fbf3;
    padding: 12px;
    border-radius: 8px;
    color: #087650
}

.good-callout small {
    display: block;
    margin: 5px 0 0 29px;
    color: #466779;
    line-height: 1.4
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(92px, auto) 1fr 22px;
    align-items: center;
    gap: 12px;
    margin: 15px 0;
    font-size: 13px
}

.bar-row b {
    text-align: right
}

.bar {
    height: 8px;
    background: #e9eff6;
    border-radius: 9px;
    overflow: hidden
}

.bar i {
    display: block;
    height: 100%;
    border-radius: 9px
}

.simple-row {
    min-height: 46px;
    border-bottom: 1px solid #edf1f6;
    display: flex;
    align-items: center;
    gap: 10px
}

.simple-row>span:nth-child(2) {
    flex: 1;
    min-width: 80px
}

.simple-row b,
.simple-row small {
    display: block
}

.simple-row small {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px
}

.simple-row time {
    font-size: 12px;
    color: var(--muted)
}

.site-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    margin-right: 8px;
    background: #f0f5fc;
    color: #2160af;
    font-weight: 800;
    font-size: 18px;
    vertical-align: middle
}

.site-0 {
    color: #1672ee
}

.site-1 {
    color: #161d25
}

.site-2 {
    color: #ed1d24
}

.site-3 {
    color: #ed8c00
}

.site-4 {
    color: #166be0
}

.pill {
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap
}

.warning {
    background: #fff3d8;
    color: #ad6b00
}

.danger {
    background: #ffe5e7;
    color: #d62938
}

.blue-pill {
    background: #e5f2ff;
    color: #0872da
}

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

.quick-card {
    padding: 17px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 95px;
    position: relative;
    border: 1px solid #edf2f8
}

.quick-card b {
    font-size: 14px
}

.quick-card span {
    color: #526987;
    font-size: 12px;
    max-width: 90%
}

.quick-card> :last-child {
    position: absolute;
    right: 16px;
    top: 30px;
    font-size: 25px
}

.green-tint {
    background: #e4fbf1
}

.blue-tint {
    background: #eaf4ff
}

.purple-tint {
    background: #f2ebff
}

.amber-tint {
    background: #fff5dc
}

.red-tint {
    background: #fff0f0
}

.section-heading {
    font: 800 17px Manrope;
    margin: 18px 0 10px
}

.tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 13px;
    margin: 12px 0
}

.tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 11px 12px;
    color: #617491;
    white-space: nowrap
}

.tab.selected {
    color: #079d6f;
    border-color: #05c889;
    font-weight: 700
}

.table-panel {
    padding: 0;
    overflow: hidden
}

.filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 13px;
    border-bottom: 1px solid var(--line)
}

.filter-row input,
.filter-row select,
.settings-grid input,
.settings-grid select,
.modal input,
.modal textarea,
.modal select {
    height: 42px;
    border: 1px solid #d9e4f2;
    border-radius: 7px;
    padding: 0 12px;
    color: #344b6b;
    background: #fff;
    min-width: 0
}

.filter-row .table-search {
    flex: 1;
    min-width: 150px
}

.filter-row select {
    min-width: 135px
}

.view-toggle {
    color: #08a874
}

.table-scroll {
    overflow: auto
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 880px
}

th,
td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid #edf1f6;
    color: #516685;
    font-size: 12px;
    white-space: nowrap
}

th {
    background: #fbfdff;
    font-weight: 500
}

td:first-child,
th:first-child {
    padding-left: 18px
}

td:nth-child(2) {
    min-width: 175px
}

td:nth-child(2) b {
    color: #18243a
}

td:nth-child(2) small {
    display: block;
    padding-left: 42px;
    color: var(--muted);
    margin-top: -5px
}

.strength {
    font-size: 11px;
    color: #04a76f
}

.strength.moderate {
    color: #d89000
}

.strength.weak {
    color: #e53d49
}

.icon-btn {
    border: 0;
    background: transparent;
    color: #4f6585;
    font-size: 16px;
    padding: 5px
}

.table-footer {
    padding: 14px 18px;
    color: var(--muted);
    display: flex;
    justify-content: space-between
}

.table-footer b {
    background: #05bf81;
    color: #fff;
    border-radius: 6px;
    padding: 8px
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
    margin: 18px 0
}

.category-tile {
    background: #fff;
    border: 1px solid #e9eff6;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    min-width: 0
}

.category-tile>span:nth-child(2) {
    flex: 1
}

.category-tile b,
.category-tile small {
    display: block
}

.category-tile small {
    color: var(--muted);
    margin-top: 4px
}

.add-tile {
    justify-content: center;
    color: #49617f;
    font-weight: 700;
    border-style: dashed
}

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

.note-card {
    position: relative;
    border: 1px solid #e8edf4;
    border-radius: 10px;
    padding: 16px;
    min-height: 210px
}

.note-card .stat-icon {
    float: left;
    margin-right: 12px
}

.note-card h3 {
    font: 700 15px Manrope;
    margin: 4px 0 6px
}

.note-card p {
    clear: both;
    line-height: 1.55;
    color: #4c607d;
    margin: 14px 0 25px
}

.note-card>small {
    color: var(--muted);
    position: absolute;
    bottom: 14px
}

.note-more {
    position: absolute;
    right: 10px;
    top: 11px;
    border: 0;
    background: none;
    color: #506586;
    font-size: 18px
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 15px 0
}

.generator-panel>p {
    margin: 6px 0 18px
}

.generator-panel>label:not(.check-row) {
    display: block;
    margin-top: 10px;
    font-weight: 600
}

.generator-panel input[type=range] {
    width: 100%;
    accent-color: #06bd80;
    margin: 13px 0
}

.check-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 0;
    color: #405673
}

.check-row input {
    accent-color: #08b982;
    width: 18px;
    height: 18px
}

.password-output {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #e2eaf5;
    margin: 12px 0;
    font-family: monospace;
    font-size: 17px;
    overflow-wrap: anywhere
}

.lower {
    margin-top: 16px
}

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

.health-grid {
    grid-template-columns: 1.1fr 1fr 1fr
}

.wide {
    grid-column: span 3
}

.import-panel {
    background: #f7fffc;
    border-color: #d5f1e6
}

.drop-zone {
    height: 180px;
    border: 1px dashed #00bf81;
    border-radius: 8px;
    background: #f4fffa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #158b66;
    font-size: 25px
}

.drop-zone b {
    font-size: 16px;
    color: #17243b
}

.drop-zone small {
    font-size: 13px;
    color: var(--muted)
}

.drop-zone input {
    font-size: 12px;
    max-width: 230px
}

.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #75849a;
    margin: 16px 0
}

.divider:before,
.divider:after {
    content: '';
    height: 1px;
    background: #e2eaf4;
    flex: 1
}

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

.service-grid .btn {
    padding: 10px 5px;
    font-size: 12px
}

.radio-row {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #eff2f6
}

.radio-row input {
    accent-color: #08b982
}

.panel h2 {
    font: 800 21px Manrope;
    margin: 0 0 8px
}

.panel h4 {
    margin-bottom: 4px
}

.empty-state {
    padding: 40px;
    text-align: center;
    color: var(--muted)
}

.settings-grid label:not(.switch-row) {
    display: block;
    font-weight: 600;
    margin: 14px 0
}

.settings-grid label input,
.settings-grid label select {
    display: block;
    width: 100%;
    margin-top: 7px
}

.settings-grid hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 24px 0
}

.switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f6
}

.switch-row input {
    display: none
}

.switch-row i {
    height: 23px;
    width: 42px;
    background: #cbd5e1;
    border-radius: 99px;
    position: relative
}

.switch-row i:after {
    content: '';
    height: 17px;
    width: 17px;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    top: 3px;
    transition: .2s
}

.switch-row input:checked+i {
    background: #06bc7f
}

.switch-row input:checked+i:after {
    left: 22px
}

.details,
details {
    border-bottom: 1px solid var(--line);
    padding: 14px 4px
}

details summary {
    cursor: pointer;
    font-weight: 600
}

details p {
    color: var(--muted);
    line-height: 1.5
}

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

.price-card {
    text-align: center;
    padding: 25px
}

.price {
    display: block;
    font: 800 32px Manrope;
    margin: 20px
}

.price small {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500
}

.promo {
    background: #f5efff;
    margin: 12px 0
}

.public-nav {
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    padding: 25px 7%;
    color: #51627e
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    background: #f6faff
}

.login-story {
    background: linear-gradient(150deg, #07121d, #10253a);
    padding: 42px 8%;
    color: #eef5ff
}

.login-story .brand {
    margin: 0
}

.story-copy {
    max-width: 560px;
    margin: 90px auto
}

.eyebrow {
    letter-spacing: 5px;
    color: #b5c8de;
    font-size: 12px
}

.story-copy h1 {
    font: 800 clamp(42px, 5vw, 68px)/1.04 Manrope;
    margin: 28px 0
}

.story-copy h1 em {
    font-style: normal;
    color: #00d39a
}

.story-copy>p {
    font-size: 20px;
    line-height: 1.5;
    color: #c3d1e0
}

.story-feature {
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 23px 0;
    font-size: 23px;
    color: #09d0a0
}

.story-feature b,
.story-feature small {
    display: block
}

.story-feature b {
    font-size: 15px;
    color: white
}

.story-feature small {
    font-size: 13px;
    color: #bac9d9;
    margin-top: 5px
}

.login-form-area {
    min-height: 100vh
}

.login-card {
    max-width: 570px;
    margin: 90px auto;
    background: white;
    border: 1px solid #e9eff7;
    border-radius: 17px;
    padding: 44px;
    box-shadow: var(--shadow);
    text-align: center
}

.page-icon {
    height: 54px;
    width: 54px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #e7f0ff;
    color: #117afa;
    font-size: 26px;
    margin: auto
}

.login-card h2 {
    font: 800 30px Manrope;
    margin: 18px 0 8px
}

.login-card p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 30px
}

.login-card form {
    text-align: left
}

.login-card label {
    font-weight: 700
}

.login-card input {
    display: block;
    width: 100%;
    height: 52px;
    border: 1px solid #d6e0ec;
    border-radius: 8px;
    padding: 0 14px;
    margin-top: 8px
}

.login-card .divider {
    margin: 25px 0
}

.muted {
    color: #8291a7
}

.centered {
    display: block;
    margin: 22px 0 0
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: #17283d82;
    display: grid;
    place-items: center;
    z-index: 20;
    padding: 16px
}

.modal-backdrop[hidden] {
    display: none
}

.modal {
    position: relative;
    background: #fff;
    width: min(650px, 100%);
    max-height: 92vh;
    overflow: auto;
    border-radius: 13px;
    padding: 25px;
    box-shadow: 0 24px 80px #07152655
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    border: 0;
    background: none;
    font-size: 25px;
    color: #526682
}

.modal-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-right: 24px
}

.modal-heading .page-icon {
    margin: 0
}

.modal-heading h2 {
    font: 800 24px Manrope;
    margin: 0 0 4px
}

.modal-heading p {
    color: var(--muted);
    margin: 0
}

.modal-field {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 9px;
    align-items: center;
    margin: 14px 0
}

.field-icon {
    height: 42px;
    border: 1px solid #e1e9f3;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: #293e5e
}

.field-content label {
    font-weight: 700;
    font-size: 13px
}

.field-content input,
.field-content textarea,
.field-content select {
    display: block;
    width: 100%;
    margin-top: 6px
}

.field-content textarea {
    height: 90px;
    padding-top: 10px;
    resize: vertical
}

.modal-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 22px
}

.favorite-check {
    margin-right: auto
}

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 20px);
    background: #102438;
    color: white;
    padding: 12px 18px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: 40
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0)
}

.mobile-menu {
    display: none
}

.dark {
    --ink: #e9f0f8;
    --muted: #a0b2c9;
    --line: #23384c;
    --page: #0b1724;
    --white: #102233
}

.dark .topbar,
.dark .panel,
.dark .stat-card,
.dark .category-tile,
.dark .note-card,
.dark .tabs,
.dark .modal {
    background: #122437;
    border-color: #24384d;
    color: #e9f0f8
}

.dark .global-search,
.dark .filter-row input,
.dark .filter-row select {
    background: #172b40;
    color: #dce8f5;
    border-color: #2b4158
}

.dark table th,
.dark .donut:before {
    background: #122437
}

.dark td,
.dark th {
    color: #afc0d3;
    border-color: #263b50
}

.dark .good-callout {
    background: #123b34;
    color: #87e9c0
}

.dark .good-callout small {
    color: #b1d1ca
}

.dark .page-heading p {
    color: #a0b2c9
}

@media(max-width:1280px) {
    .sidebar {
        width: 240px
    }

    .main-area {
        margin-left: 240px
    }

    .content {
        padding: 20px
    }

    .topbar {
        padding: 0 20px
    }

    .dashboard-grid {
        grid-template-columns: 1fr 1fr
    }

    .category-panel {
        grid-column: span 2
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .health-stats {
        grid-template-columns: repeat(3, 1fr)
    }

    .note-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media(max-width:900px) {
    .sidebar {
        width: 255px;
        transform: translateX(-100%);
        transition: transform .22s;
        box-shadow: 15px 0 35px #06142140
    }

    .sidebar.open {
        transform: translateX(0)
    }

    .main-area {
        margin-left: 0
    }

    .mobile-menu {
        display: block;
        border: 0;
        background: none;
        font-size: 22px;
        color: #1b304b
    }

    .topbar {
        gap: 10px;
        padding: 0 15px
    }

    .global-search {
        width: auto;
        flex: 1
    }

    .global-search kbd {
        display: none
    }

    .user-chip>span:nth-child(2) {
        display: none
    }

    .dashboard-grid {
        grid-template-columns: 1fr 1fr
    }

    .category-panel,
    .wide {
        grid-column: span 2
    }

    .note-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .health-grid {
        grid-template-columns: 1fr 1fr
    }

    .health-stats {
        grid-template-columns: repeat(3, 1fr)
    }

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

    .login-shell {
        grid-template-columns: 1fr
    }

    .login-story {
        display: none
    }

    .login-card {
        margin: 60px auto
    }

    .public-nav {
        justify-content: center
    }
}

@media(max-width:600px) {
    body {
        font-size: 13px
    }

    .topbar {
        height: 62px;
        padding: 0 10px
    }

    .top-actions {
        gap: 9px
    }

    .top-actions>button {
        font-size: 19px
    }

    .user-chip {
        display: none !important
    }

    .content {
        padding: 17px 12px 28px
    }

    .page-heading {
        align-items: flex-start
    }

    .page-heading h1 {
        font-size: 23px
    }

    .page-heading p {
        font-size: 13px;
        line-height: 1.4
    }

    .page-heading>.btn {
        font-size: 12px;
        padding: 10px;
        white-space: nowrap
    }

    .stats-grid,
    .health-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px
    }

    .stat-card {
        min-height: 88px;
        padding: 11px;
        gap: 9px
    }

    .stat-icon {
        height: 40px;
        width: 40px
    }

    .stat-card b {
        font-size: 21px
    }

    .stat-card span:not(.stat-icon) {
        font-size: 11px
    }

    .stat-card small {
        font-size: 10px
    }

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

    .category-panel,
    .wide {
        grid-column: auto
    }

    .panel {
        padding: 13px
    }

    .donut-wrap {
        min-height: 155px
    }

    .donut {
        height: 125px;
        width: 125px
    }

    .donut:before {
        inset: 19px
    }

    .legend li {
        font-size: 12px
    }

    .quick-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .quick-card {
        padding: 13px;
        min-height: 100px
    }

    .category-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .category-tile {
        padding: 9px;
        gap: 8px
    }

    .category-tile .stat-icon {
        height: 38px;
        width: 38px
    }

    .note-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .note-card {
        padding: 12px;
        min-height: 205px
    }

    .note-card h3 {
        font-size: 13px
    }

    .note-card p {
        font-size: 12px
    }

    .two-col {
        gap: 10px
    }

    .tabs {
        overflow: auto
    }

    .tab {
        padding: 9px;
        font-size: 12px
    }

    .filter-row {
        overflow: auto
    }

    .filter-row>* {
        flex: none
    }

    .filter-row .table-search {
        min-width: 200px
    }

    .table-footer {
        font-size: 11px
    }

    .public-nav {
        gap: 15px;
        font-size: 12px;
        padding: 18px
    }

    .login-card {
        margin: 35px 14px;
        padding: 25px 19px
    }

    .modal {
        padding: 20px 15px
    }

    .modal-heading h2 {
        font-size: 20px
    }

    .modal-actions {
        flex-wrap: wrap
    }

    .favorite-check {
        width: 100%
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .pricing-grid {
        grid-template-columns: 1fr
    }

    .table-scroll {
        margin: 0 -13px
    }

    .table-scroll table {
        min-width: 830px
    }
}

/* Functional controls and high-contrast theme overrides. */
.view-switch {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    flex: none
}

.view-switch button {
    background: var(--white);
    color: var(--muted);
    border: 0;
    padding: 8px 11px;
    font-size: 18px
}

.view-switch button.selected {
    background: #05bf81;
    color: #fff
}

.row-select,
.select-all {
    width: 16px;
    height: 16px;
    accent-color: #05bf81;
    cursor: pointer
}

.pagination {
    display: flex;
    align-items: center;
    gap: 5px
}

.pagination button {
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer
}

.pagination button.current {
    background: #05bf81;
    color: #fff;
    border-color: #05bf81
}

.pagination button:disabled {
    opacity: .45;
    cursor: not-allowed
}

.note-grid.as-list {
    grid-template-columns: 1fr
}

.note-grid.as-list .note-card {
    min-height: 125px
}

.note-grid.as-list .note-card p {
    margin: 8px 0 20px
}

.table-panel.as-grid .table-scroll {
    padding: 12px
}

.table-panel.as-grid table {
    min-width: 0
}

.table-panel.as-grid thead {
    display: none
}

.table-panel.as-grid tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px
}

.table-panel.as-grid tr {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 12px;
    background: var(--white);
    white-space: normal
}

.table-panel.as-grid td {
    display: block;
    border: 0;
    padding: 5px;
    white-space: normal
}

.table-panel.as-grid td:first-child {
    align-self: flex-end
}

.table-panel.as-grid td:nth-child(2) small {
    padding-left: 0;
    margin: 4px 0
}

.table-panel.as-grid td:last-child {
    margin-top: auto
}

.dark {
    color-scheme: dark
}

.dark body {
    background: #0a1521;
    color: #e8eff7
}

.dark .topbar,
.dark .panel,
.dark .stat-card,
.dark .category-tile,
.dark .note-card,
.dark .tabs,
.dark .modal,
.dark .quick-card,
.dark .table-panel.as-grid tr {
    background: #122235;
    border-color: #293e53;
    color: #e8eff7
}

.dark .topbar {
    background: #0e1d2c
}

.dark .page-heading h1,
.dark .panel h2,
.dark .panel h3,
.dark .panel-title h3,
.dark .category-tile b,
.dark .note-card h3,
.dark .simple-row b,
.dark td:nth-child(2) b {
    color: #f2f6fb
}

.dark .global-search,
.dark .filter-row input,
.dark .filter-row select,
.dark .settings-grid input,
.dark .settings-grid select,
.dark .modal input,
.dark .modal textarea,
.dark .modal select,
.dark .login-card {
    background: #172b40;
    color: #e7eff8;
    border-color: #36506a
}

.dark .global-search input {
    color: #f0f5fa
}

.dark .global-search input::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
    color: #9aacc0
}

.dark kbd,
.dark .icon-btn,
.dark .view-switch button {
    background: #1b3046;
    color: #c4d3e2;
    border-color: #334a62
}

.dark .view-switch button.selected {
    background: #05bf81;
    color: #fff
}

.dark table th {
    background: #162a3f;
    color: #bac8d8
}

.dark td,
.dark th {
    color: #bac8d8;
    border-color: #2a3e52
}

.dark .donut:before {
    background: #122235
}

.dark .good-callout {
    background: #10392f;
    border-color: #1e6a53;
    color: #8bf0c2
}

.dark .good-callout small {
    color: #b8d8ce
}

.dark .quick-card span,
.dark .page-heading p,
.dark .panel>p,
.dark .generator-panel>p,
.dark .note-card p {
    color: #b0bfd0
}

.dark .simple-row {
    border-color: #293e53
}

.dark .site-icon {
    background: #1a3047
}

.dark .tab {
    color: #b3c1d1
}

.dark .tab.selected {
    color: #2ee3a5
}

.dark .pagination button,
.dark .btn:not(.primary) {
    background: #172b40;
    color: #e5edf7;
    border-color: #334a62
}

.dark .strength {
    color: #3ee5ad
}

.dark .strength.moderate {
    color: #ffc24f
}

.dark .strength.weak {
    color: #ff7780
}

.dark .quick-card.green-tint,
.dark .green-tint {
    background: #12392f
}

.dark .quick-card.blue-tint,
.dark .blue-tint {
    background: #152f49
}

.dark .quick-card.purple-tint,
.dark .purple-tint {
    background: #2a2043
}

.dark .quick-card.amber-tint,
.dark .amber-tint {
    background: #3b301b
}

.dark .quick-card.red-tint,
.dark .red-tint {
    background: #3b2229
}

.dark .warning {
    background: #49381b;
    color: #ffd16d
}

.dark .danger {
    background: #48262d;
    color: #ff9ca3
}

.dark .blue-pill {
    background: #193c5c;
    color: #8fc4ff
}

.dark .modal-backdrop {
    background: #020914bb
}

.dark .login-card h2 {
    color: #f2f6fb
}

.dark .login-card p {
    color: #bac8d8
}

.dark .plan-card {
    display: none
}

@media(max-width:900px) {
    .view-switch button {
        padding: 7px 9px
    }

    .table-panel.as-grid tbody {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
    }
}

@media(max-width:600px) {
    .topbar {
        gap: 7px
    }

    .global-search {
        min-width: 0;
        padding: 0 8px;
        gap: 6px
    }

    .global-search>span {
        font-size: 21px
    }

    .global-search input {
        font-size: 12px
    }

    .top-actions {
        margin-left: 0
    }

    .top-actions>button {
        padding: 4px
    }

    .view-switch button {
        padding: 6px 8px
    }

    .table-panel.as-grid tbody {
        grid-template-columns: 1fr
    }

    .note-grid.as-list .note-card {
        min-height: 145px
    }

    .pagination button {
        padding: 6px 8px
    }

    .table-footer {
        gap: 10px;
        flex-wrap: wrap
    }

    .page-heading>.btn {
        max-width: 145px;
        white-space: normal
    }

    .modal-field {
        grid-template-columns: 34px 1fr;
        gap: 7px
    }

    .field-icon {
        height: 36px
    }
}

.dark {
    background: #0a1521;
    color: #e8eff7
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px
}

.profile-hero .avatar {
    width: 64px;
    height: 64px;
    font-size: 25px
}

.profile-hero h2 {
    margin: 0 0 4px;
    font: 800 22px Manrope
}

.profile-hero p {
    margin: 0;
    color: var(--muted)
}

.profile-hero button {
    margin-left: auto
}

.dark .profile-hero {
    background: #122235;
    border-color: #293e53
}

.dark .profile-hero p {
    color: #b0bfd0
}

.dark .top-actions>button,
.dark .mobile-menu {
    color: #dce7f4
}

.dark .user-chip {
    color: #e8eff7
}

.dark .avatar {
    background: #1b3652;
    color: #fff
}

.top-actions>button:not(.user-chip) {
    display: none
}

.top-actions>.logout-btn {
    display: inline-flex
}

.global-search {
    width: auto;
    flex: 1;
    max-width: none
}

.quick-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 16px;
    text-decoration: none
}

.quick-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
    background: #ffffffa6;
    font-size: 23px;
    color: #087d62
}

.quick-copy {
    display: grid;
    gap: 5px;
    min-width: 0
}

.quick-copy b {
    color: var(--ink)
}

.quick-copy small {
    color: var(--muted);
    line-height: 1.35
}

.quick-arrow {
    margin-left: auto;
    font-size: 24px;
    color: var(--muted)
}

.note-grid {
    margin-top: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

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

.table-scroll th:first-child,
.table-scroll td:first-child {
    width: 42px
}

.table-scroll th:last-child,
.table-scroll td:last-child {
    width: 104px
}

.table-scroll td:last-child {
    white-space: nowrap
}

.table-scroll td:last-child .icon-btn {
    margin: 0 2px
}

.table-panel.as-grid table {
    table-layout: auto
}

.table-panel.as-grid td:last-child {
    width: auto
}

.table-panel.as-grid td:last-child .icon-btn {
    margin: 0 4px 0 0
}

.table-panel .filter-row {
    gap: 8px
}

.table-panel .filter-row .table-search {
    flex: 1;
    min-width: 180px
}

.switch-row {
    min-height: 49px
}

.switch-row input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px
}

.switch-row i {
    flex: none;
    width: 42px;
    height: 24px;
    border-radius: 99px;
    background: #aab7c8;
    position: relative;
    transition: .2s
}

.switch-row i:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px #0003;
    transition: .2s
}

.switch-row input:checked+i:after {
    left: 21px
}

.switch-row input:focus-visible+i {
    outline: 3px solid #67a7ff
}

.dark .quick-icon {
    background: #1b3046;
    color: #48ddb0
}

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

    .table-scroll {
        overflow-x: auto
    }

    .table-scroll table {
        min-width: 860px
    }
}

@media(max-width:600px) {
    .note-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .note-grid .note-card {
        min-height: 170px
    }

    .quick-grid {
        grid-template-columns: 1fr
    }

    .quick-card {
        min-height: 75px
    }

    .table-scroll table {
        min-width: 780px
    }

    .top-actions {
        margin-left: 0
    }
}

.bulk-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    background: #eaf6f1;
    border-bottom: 1px solid var(--line)
}

.bulk-tools span {
    font-weight: 700;
    margin-right: auto
}

.dark .bulk-tools {
    background: #15352e;
    color: #e7f7f0
}

.auth-status {
    min-height: 20px;
    margin: 12px 0 0;
    color: #087b5b;
    font-size: 13px;
    line-height: 1.45
}

.auth-status.error {
    color: #c62828
}

.login-card form button:disabled {
    opacity: .65;
    cursor: wait
}

.login-card .recovery-label {
    display: block;
    text-align: left;
    margin: 18px 0 7px;
    font-weight: 700
}

.login-card textarea.recovery-key {
    display: block;
    width: 100%;
    min-height: 74px;
    resize: vertical;
    border: 1px solid #d6e0ec;
    border-radius: 8px;
    padding: 12px;
    color: #233b5b;
    background: #f7faff;
    font: 600 14px/1.5 ui-monospace, monospace;
    overflow-wrap: anywhere
}

.login-card .recovery-check {
    justify-content: flex-start;
    margin: 16px 0
}

.login-card [data-copy-recovery] {
    margin: 12px 0 0
}

.profile-drawer {
    position: fixed;
    z-index: 60;
    right: 0;
    top: 0;
    height: 100dvh;
    width: min(360px, 92vw);
    padding: 28px 22px;
    background: #fff;
    color: #17243b;
    box-shadow: -16px 0 50px #07152630;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.profile-drawer[hidden] {
    display: none
}

.profile-drawer-close {
    align-self: flex-end;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 26px;
    cursor: pointer
}

.profile-drawer-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 22px;
    border-bottom: 1px solid #e5edf5;
    margin-bottom: 8px
}

.profile-drawer-heading b,
.profile-drawer-heading small {
    display: block
}

.profile-drawer-heading small {
    color: #718198;
    margin-top: 4px
}

.profile-drawer a,
.profile-drawer>[data-signout] {
    padding: 13px 12px;
    border: 0;
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer
}

.profile-drawer a:hover,
.profile-drawer>[data-signout]:hover {
    background: #eff6fc
}

.profile-drawer>[data-signout] {
    margin-top: auto;
    color: #c62828;
    background: #fff1f1
}

.dark .profile-drawer {
    background: #122235;
    color: #e8eff7
}

.dark .profile-drawer-heading {
    border-color: #293e53
}

.dark .profile-drawer a:hover {
    background: #1b3046
}

.dark .profile-drawer>[data-signout] {
    background: #48262d;
    color: #ff9ca3
}

.table-panel .table-scroll table {
    table-layout: auto;
    min-width: 940px
}

.table-scroll th:last-child,
.table-scroll td:last-child {
    width: 150px
}

.table-scroll td:last-child .btn.small {
    padding: 7px 11px;
    white-space: nowrap
}

.table-scroll td:last-child {
    overflow: visible
}

.table-scroll th:first-child,
.table-scroll td:first-child {
    width: 46px
}

.table-scroll td:nth-child(2) {
    min-width: 190px
}

.icon-btn {
    min-width: 30px;
    min-height: 30px;
    border-radius: 6px;
    cursor: pointer
}

.icon-btn:hover {
    background: #eff6fc
}

.dark .icon-btn:hover {
    background: #263d54
}

.reminder-check {
    margin: 0;
    white-space: nowrap
}

.modal-actions .check-row {
    font-size: 13px
}

.sample-link {
    font-size: 13px
}

.import-panel .empty-state {
    padding: 16px
}

.drop-zone {
    cursor: pointer
}

.drop-zone input {
    margin-top: 8px
}

.stat-card[data-trash-card] {
    cursor: pointer;
    transition: transform .15s, box-shadow .15s
}

.stat-card[data-trash-card]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow)
}

body[data-page="trash"] .table-scroll table {
    min-width: 1020px
}

body[data-page="trash"] .table-scroll th:last-child,
body[data-page="trash"] .table-scroll td:last-child {
    width: 205px
}

body[data-page="trash"] .table-scroll td:first-child {
    width: 220px
}

body[data-page="trash"] .table-scroll td:nth-child(2) {
    width: 120px;
    min-width: 120px
}

body[data-page="trash"] .table-scroll td:last-child .btn {
    margin-right: 6px
}

body[data-page="trash"] .table-scroll {
    padding-bottom: 4px
}

@media(max-width:600px) {
    .user-chip {
        display: flex !important;
        padding: 3px
    }

    .user-chip>span:nth-child(3) {
        display: none
    }

    .topbar .global-search {
        min-width: 0
    }
}

.drop-zone {
    position: relative;
    cursor: pointer;
    transition: background .15s, border-color .15s
}

.drop-zone input {
    cursor: pointer
}

.drop-zone.drag-active {
    background: #ddfaef;
    border-color: #008b60;
    box-shadow: 0 0 0 3px #05be8022
}

.import-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px
}

.profile-drawer[hidden] {
    display: none
}

.login-form-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    position: relative
}

.login-form-area .public-nav {
    width: min(100%, 1050px)
}

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

.auth-loading {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background: #f6faff;
    transition: opacity .2s, visibility .2s
}

.auth-loading[hidden] {
    display: none
}

.auth-loading span {
    width: 38px;
    height: 38px;
    border: 4px solid #dbe8f6;
    border-top-color: #05be80;
    border-radius: 50%;
    animation: auth-spin .7s linear infinite
}

.auth-loading b {
    position: absolute;
    margin-top: 62px;
    color: #607392;
    font-size: 13px;
    font-weight: 600
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg)
    }
}

.app-footer {
    padding: 18px 28px 26px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    border-top: 1px solid var(--line)
}

.app-footer a {
    color: #087bfa;
    text-decoration: underline
}

.settings-help-link {
    display: inline-block;
    margin-top: 16px;
    color: #087bfa;
    text-decoration: underline
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px
}

.profile-hero>div {
    flex: 1
}

.profile-hero p {
    color: var(--muted)
}

.profile-avatar {
    width: 60px;
    height: 60px;
    background-size: cover;
    background-position: center
}

.dark .login-card,
.dark .login-form-area,
.dark .auth-loading {
    background: #122437;
    color: #e9f0f8
}

.dark .app-footer {
    border-color: #24384d
}

.dark .settings-grid input,
.dark .settings-grid select,
.dark .modal input,
.dark .modal textarea,
.dark .modal select,
.dark .login-card input {
    background: #172b40;
    color: #e9f0f8;
    border-color: #2b4158
}

.dark .login-card input::placeholder,
.dark .modal input::placeholder,
.dark .modal textarea::placeholder {
    color: #8ca0b8
}

.dark .drop-zone {
    background: #112b27;
    border-color: #087451
}

.dark .drop-zone b {
    color: #e9f0f8
}

.login-shell {
    position: relative
}

.login-shell>.app-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f6faffd9
}

.dark .login-shell>.app-footer {
    background: #0b1724
}

.vault-lock-screen {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #071421b8;
    backdrop-filter: blur(5px)
}

.vault-lock-screen form {
    width: min(100%, 460px);
    padding: 28px;
    display: grid;
    gap: 14px
}

.vault-lock-screen h2,
.vault-lock-screen p {
    margin: 0
}

.vault-lock-screen form>label:not(.check-row) {
    display: grid;
    gap: 7px;
    font-weight: 600
}

.vault-lock-screen input[type=password] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink)
}

.vault-lock-screen small {
    color: var(--muted);
    line-height: 1.5
}

.vault-lock-screen a {
    justify-self: center;
    color: #087bfa
}

.remember-device {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 6px 9px
}

.remember-device small {
    grid-column: 2;
    font-weight: 400
}

.dark .vault-lock-screen {
    background: #020914cc
}

.dark .vault-lock-screen form {
    background: #122235;
    color: #e8eff7;
    border-color: #293e53
}

.row-action-menu {
    position: absolute;
    right: 6px;
    top: calc(100% - 2px);
    z-index: 18;
    min-width: 180px;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 12px 36px #10243a25;
    display: grid;
    gap: 2px
}

.table-scroll td:last-child {
    position: relative
}

.row-action-menu button {
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px
}

.row-action-menu button:hover {
    background: #edf5fc
}

.row-action-menu button:last-child {
    color: #d92f42
}

.dark .row-action-menu {
    background: #122235;
    border-color: #293e53
}

.dark .row-action-menu button:hover {
    background: #1b3046
}

.brand-site-icon {
    background: #e8f2ff;
    color: #1768c5;
    border: 1px solid #d5e7fb
}

.app-shell {
    display: flex;
    flex-direction: column
}

.main-area {
    display: flex;
    flex-direction: column;
    flex: 1
}

.content {
    flex: 1;
    width: 100%
}

.app-footer {
    margin-top: auto
}

.support-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 34px;
    margin: 0 0 18px;
    border: 1px solid #d8e9f9;
    border-radius: 15px;
    background: radial-gradient(circle at 90% 5%, #d9f7ec 0, transparent 32%), linear-gradient(120deg, #edf6ff, #fff);
    box-shadow: var(--shadow)
}

.support-hero h2 {
    font: 800 30px Manrope;
    margin: 9px 0 6px;
    color: #11223a
}

.support-hero p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6
}

.support-kicker {
    font-size: 11px;
    letter-spacing: 1.7px;
    font-weight: 800;
    color: #078f69
}

.support-hero-mark {
    width: 75px;
    height: 75px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: #ddf8ec;
    color: #00a879;
    font: 800 48px Manrope;
    flex: none
}

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

.support-action {
    position: relative;
    min-height: 155px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--white);
    padding: 18px 18px 16px 74px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--shadow)
}

.support-action>span {
    position: absolute;
    left: 17px;
    top: 18px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: #e8f8f1;
    color: #06a873
}

.support-blue>span {
    background: #eaf3ff;
    color: #1673e8
}

.support-purple>span {
    background: #f2eaff;
    color: #7d43e8
}

.support-action b {
    font: 700 16px Manrope;
    color: var(--ink)
}

.support-action small {
    margin-top: 5px;
    color: var(--muted)
}

.support-action em {
    font-style: normal;
    font-weight: 700;
    color: #087bfa;
    margin-top: auto
}

.support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr);
    gap: 18px
}

.support-faq,
.support-contact {
    padding: 22px
}

.support-faq .panel-title {
    margin-bottom: 10px
}

.support-faq h3,
.support-contact h3 {
    font: 800 20px Manrope;
    margin: 7px 0 12px
}

.support-faq details {
    padding: 15px 4px
}

.support-faq summary {
    color: var(--ink)
}

.support-faq details p {
    max-width: 780px;
    line-height: 1.6
}

.support-badge {
    border-radius: 99px;
    padding: 6px 10px;
    background: #e7f8ef;
    color: #07885f;
    font-size: 11px;
    font-weight: 700
}

.support-contact {
    background: linear-gradient(150deg, #fff, #f5f9ff)
}

.support-contact-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #e7f1ff;
    color: #1673e8;
    font-size: 24px;
    margin-bottom: 16px
}

.support-contact p {
    line-height: 1.65;
    color: var(--muted)
}

.support-contact small {
    display: block;
    text-align: center;
    color: var(--muted);
    margin-top: 12px
}

.support-footer-card {
    margin: 18px 0 0;
    padding: 15px 18px;
    border: 1px solid #caeedf;
    border-radius: 10px;
    background: #effbf6;
    display: flex;
    align-items: center;
    gap: 12px
}

.support-footer-card>span {
    font-size: 22px
}

.support-footer-card div {
    flex: 1
}

.support-footer-card b,
.support-footer-card small {
    display: block
}

.support-footer-card small {
    color: var(--muted);
    margin-top: 3px
}

.support-footer-card a {
    color: #087bfa;
    font-weight: 700
}

.dark .support-hero,
.dark .support-action,
.dark .support-contact {
    background: #122235;
    border-color: #293e53
}

.dark .support-hero h2 {
    color: #f1f5fa
}

.dark .support-hero-mark {
    background: #143d33
}

.dark .support-action b,
.dark .support-faq summary,
.dark .support-faq h3,
.dark .support-contact h3 {
    color: #e8eff7
}

.dark .support-footer-card {
    background: #10392f;
    border-color: #1e6a53
}

.team-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    margin: 0 0 15px;
    border-radius: 14px;
    background: linear-gradient(120deg, #eaf5ff, #effbf6);
    border: 1px solid #dcebf5
}

.team-intro h2 {
    font: 800 27px Manrope;
    margin: 7px 0
}

.team-intro p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    max-width: 700px
}

.team-security-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 16px;
    margin-bottom: 18px;
    border: 1px solid #f0dfb5;
    border-radius: 9px;
    background: #fff9e9;
    color: #644b18;
    line-height: 1.45
}

.team-security-note b {
    white-space: nowrap
}

.team-layout {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr);
    gap: 16px
}

.team-list {
    display: grid;
    gap: 8px;
    margin-top: 12px
}

.team-list-item {
    display: grid;
    gap: 4px;
    text-align: left;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    cursor: pointer
}

.team-list-item:hover {
    border-color: #07b981;
    background: #effbf6
}

.team-list-item small,
.team-empty-copy {
    color: var(--muted);
    font-size: 12px
}

.team-vault-panel {
    min-height: 320px
}

.team-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.team-workspace-head h3 {
    margin: 0 0 4px
}

.team-workspace-head small {
    color: var(--muted)
}

.team-add-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

.team-add-form input,
.team-search {
    height: 40px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--white);
    color: var(--ink);
    padding: 0 11px
}

.team-add-form button {
    grid-column: span 2
}

.team-table-tools {
    display: flex;
    gap: 10px;
    margin: 14px 0
}

.team-table-tools input {
    flex: 1
}

.team-vault-row,
.team-member {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--line)
}

.team-vault-row>div,
.team-member>span {
    flex: 1;
    min-width: 0
}

.team-vault-row b,
.team-vault-row small,
.team-member b,
.team-member small {
    display: block
}

.team-vault-row small,
.team-member small {
    color: var(--muted);
    margin-top: 4px
}

.team-members {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 9px
}

.team-key-panel {
    padding: 14px;
    margin: 12px 0;
    border: 1px solid #f1ddb0;
    background: #fff9e9;
    border-radius: 9px
}

.team-key-panel p {
    color: var(--muted);
    font-size: 13px
}

.team-key-copy {
    display: block;
    width: 100%;
    min-height: 45px;
    overflow-wrap: anywhere;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--white);
    color: var(--ink);
    font: 12px monospace
}

.team-footnote {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5
}

.dark .team-intro,
.dark .team-list-item {
    background: #122235;
    border-color: #293e53
}

.dark .team-intro h2,
.dark .team-list-item {
    color: #e8eff7
}

.dark .team-security-note,
.dark .team-key-panel {
    background: #342b1a;
    border-color: #62502b;
    color: #ffe1a0
}

.dark .team-add-form input,
.dark .team-search,
.dark .team-key-copy {
    background: #172b40;
    color: #e8eff7;
    border-color: #36506a
}

@media(max-width:760px) {
    .support-actions {
        grid-template-columns: 1fr
    }

    .support-layout {
        grid-template-columns: 1fr
    }

    .support-hero {
        padding: 22px
    }

    .support-hero-mark {
        width: 58px;
        height: 58px;
        font-size: 36px
    }

    .team-layout {
        grid-template-columns: 1fr
    }

    .team-intro {
        align-items: flex-start;
        flex-direction: column
    }

    .team-security-note {
        display: grid
    }

    .team-security-note b {
        white-space: normal
    }

    .team-add-form {
        grid-template-columns: 1fr
    }

    .team-add-form button {
        grid-column: auto
    }

    .support-footer-card {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .support-footer-card a {
        width: 100%;
        margin-left: 34px
    }
}

.row-action-menu {
    position: fixed;
    right: auto;
    top: auto;
    z-index: 90
}

.modal.password-dialog {
    width: min(800px, 100%);
    padding: 30px 32px 24px;
    border: 1px solid #e1eaf4;
    border-radius: 18px
}

.password-dialog .modal-heading {
    padding: 0 34px 18px 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line)
}

.password-dialog .modal-heading .page-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 26px
}

.password-dialog .modal-heading h2 {
    font-size: 25px
}

.password-dialog .modal-heading p {
    line-height: 1.5
}

.password-dialog #modal-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px
}

.password-dialog .modal-field {
    margin: 7px 0;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px
}

.password-dialog .modal-field:nth-child(1),
.password-dialog .modal-field:nth-child(4),
.password-dialog .modal-field:nth-child(6) {
    grid-column: 1/-1
}

.password-dialog .field-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #edf5ff;
    color: #087bfa
}

.password-dialog .field-content {
    display: grid;
    gap: 6px;
    min-width: 0
}

.password-dialog .field-content label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink)
}

.password-dialog .field-content input,
.password-dialog .field-content select,
.password-dialog .field-content textarea {
    width: 100%;
    height: 44px;
    border-radius: 9px;
    background: #fbfdff
}

.password-dialog .field-content textarea {
    height: 76px;
    min-height: 76px;
    padding: 11px 12px;
    resize: vertical
}

.password-dialog .modal-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 19px;
    padding-top: 15px;
    border-top: 1px solid var(--line)
}

.password-dialog .modal-actions .check-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fbfdff
}

.password-dialog .modal-actions .check-row:first-child {
    margin-right: auto
}

.password-dialog .modal-actions .check-row input {
    width: 16px;
    height: 16px;
    accent-color: #05be80
}

.dark .password-dialog {
    background: #122235;
    border-color: #293e53
}

.dark .password-dialog .field-content label {
    color: #e8eff7
}

.dark .password-dialog .field-content input,
.dark .password-dialog .field-content select,
.dark .password-dialog .field-content textarea,
.dark .password-dialog .modal-actions .check-row {
    background: #172b40;
    border-color: #36506a;
    color: #e8eff7
}

.recovery-panel {
    padding: 22px;
    border: 1px solid #dce8f5;
    border-radius: 14px;
    background: linear-gradient(145deg, #f7fbff, #fff)
}

.recovery-symbol {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 13px;
    background: #e4f0ff;
    color: #087bfa;
    font-size: 25px
}

.recovery-panel>b {
    display: block;
    font: 700 16px Manrope;
    color: var(--ink)
}

.recovery-panel>p {
    margin: 6px 0 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55
}

.login-card .recovery-label {
    margin: 0 0 7px;
    font-size: 13px
}

.login-card textarea.recovery-key {
    min-height: 70px;
    resize: none;
    background: #fff;
    font-size: 15px;
    letter-spacing: .3px
}

.recovery-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 11px
}

.recovery-buttons .btn {
    margin: 0
}

.recovery-buttons [data-download-recovery] {
    background: #087bfa;
    color: #fff;
    border-color: #087bfa
}

.recovery-copy-status {
    min-height: 17px;
    margin-top: 8px;
    color: #07865e;
    font-size: 12px
}

.login-card .recovery-check {
    padding: 12px;
    margin: 13px 0;
    border: 1px solid #dce8f5;
    border-radius: 9px;
    background: #f7fbff;
    align-items: flex-start;
    line-height: 1.45
}

.login-card .recovery-check input {
    accent-color: #05be80;
    flex: none;
    margin-top: 2px
}

.dark .recovery-panel,
.dark .login-card .recovery-check {
    background: #172b40;
    border-color: #36506a
}

.dark .recovery-panel>b {
    color: #e8eff7
}

.dark .login-card textarea.recovery-key {
    background: #0c1b2b;
    color: #e8eff7;
    border-color: #36506a
}

@media(max-width:650px) {
    .modal.password-dialog {
        padding: 22px 17px
    }

    .password-dialog #modal-fields {
        grid-template-columns: 1fr
    }

    .password-dialog .modal-field:nth-child(n) {
        grid-column: 1
    }

    .password-dialog .modal-actions .check-row:first-child {
        width: 100%;
        margin-right: 0
    }

    .recovery-panel {
        padding: 17px
    }

    .recovery-buttons {
        grid-template-columns: 1fr
    }
}

.team-create-controls,
.team-invite-controls {
    display: flex;
    gap: 8px;
    align-items: center
}

.team-create-controls input,
.team-invite-controls input,
.team-invite-controls select {
    height: 42px;
    min-width: 190px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink)
}

.team-invite-controls input {
    min-width: 215px
}

.team-invite-controls select {
    min-width: 104px
}

.team-workspace-head {
    align-items: flex-start;
    flex-wrap: wrap
}

.team-workspace-head>div:first-child {
    padding-top: 7px
}

.team-security-note {
    border-left: 4px solid #e7b545
}

.team-empty-copy {
    line-height: 1.6
}

.team-add-form {
    margin-top: 8px
}

.team-add-form::before {
    content: 'Add a password directly to this team vault';
    grid-column: 1/-1;
    font-weight: 700;
    color: var(--ink);
    font-size: 13px
}

.dark .team-create-controls input,
.dark .team-invite-controls input,
.dark .team-invite-controls select {
    background: #172b40;
    color: #e8eff7;
    border-color: #36506a
}

.dark .team-add-form::before {
    color: #e8eff7
}

@media(max-width:760px) {

    .team-create-controls,
    .team-invite-controls {
        width: 100%;
        flex-wrap: wrap
    }

    .team-create-controls input,
    .team-invite-controls input {
        flex: 1;
        min-width: 0
    }

    .team-workspace-head .team-invite-controls {
        align-items: stretch
    }
}

body[data-shared-member="1"] .global-search,
body[data-shared-member="1"] .top-actions>button:not(.user-chip),
body[data-shared-member="1"] .mobile-menu {
    display: none !important
}

body[data-shared-member="1"] .team-create-controls,
body[data-shared-member="1"] .team-invite-controls,
body[data-shared-member="1"] .team-add-form,
body[data-shared-member="1"] #team-members-button {
    display: none !important
}

body[data-shared-member="1"] .sidebar .side-nav {
    margin-top: 20px
}

.team-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center
}

.team-entry .team-list-item {
    width: 100%
}

.team-entry .team-accept {
    white-space: nowrap
}

.team-intro p {
    max-width: 760px
}

.team-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: 18px;
    background: #07142199;
    backdrop-filter: blur(4px)
}

.team-picker {
    position: relative;
    width: min(440px, 100%);
    padding: 25px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 65px #07152640
}

.team-picker-close {
    position: absolute;
    right: 14px;
    top: 10px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 25px
}

.team-picker h3 {
    margin: 13px 0 5px;
    font: 800 21px Manrope
}

.team-picker>p {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.5
}

.team-picker-options {
    display: grid;
    gap: 8px
}

.team-picker-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 10px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--white);
    color: var(--ink)
}

.team-picker-option:hover {
    border-color: #05be80;
    background: #f1fbf7
}

.team-picker-option small {
    color: var(--muted)
}

.team-picker-option span {
    grid-column: 2;
    grid-row: 1/3;
    align-self: center;
    color: #087bfa;
    font-size: 22px
}

.dark .team-picker {
    background: #122235;
    border-color: #293e53;
    color: #e8eff7
}

.dark .team-picker-option {
    background: #172b40;
    border-color: #36506a;
    color: #e8eff7
}

.dark .team-picker-option:hover {
    background: #10392f;
    border-color: #1e6a53
}

.password-mask {
    display: inline-block;
    min-width: 84px;
    color: #506887;
    letter-spacing: 2px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px
}

.dark .password-mask {
    color: #c7d7ea
}

.domain-security-note {
    margin: 12px 2px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6
}

.domain-panel .table-scroll {
    border-radius: 0 0 10px 10px
}

.domain-panel td .site-icon {
    margin-right: 8px
}

.domain-panel td small {
    display: block;
    color: var(--muted);
    margin: 4px 0 0 42px
}

@media(max-width:760px) {
    .domain-panel .filter-row {
        flex-wrap: wrap
    }

    .domain-panel .filter-row input {
        flex-basis: 100%
    }

    .domain-panel table {
        min-width: 760px
    }
}

.user-chip>span:nth-child(3) {
    display: none
}

.profile-avatar {
    display: inline-grid;
    place-items: center;
    background-color: #183653;
    background-position: center;
    background-size: cover;
    color: #fff;
    flex: none
}

.profile-hero {
    align-items: flex-start
}

.profile-hero input[type=file] {
    display: block;
    max-width: 100%;
    margin: 10px 0
}

.profile-card hr {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--line);
    margin: 16px 0
}

.profile-card #account-password-form {
    display: grid;
    gap: 12px;
    max-width: 520px
}

.profile-card #account-password-form>label:not(.check-row) {
    display: grid;
    gap: 6px
}

.profile-card #account-password-form input:not([type=checkbox]) {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink)
}

.profile-card #account-password-form .check-row {
    display: flex;
    align-items: center;
    gap: 8px
}

/* Shared password visibility and feature selection controls */
.password-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    margin-left: 6px;
    border: 1px solid #d8e3f1;
    border-radius: 7px;
    background: #fff;
    color: #315479;
    cursor: pointer;
    vertical-align: middle
}

.password-reveal:hover {
    background: #edf6ff;
    color: #087bfa
}

.note-select {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 17px;
    height: 17px;
    accent-color: #05b77d
}

.note-card {
    position: relative
}

.bulk-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 10px 0;
    background: #eaf7f2;
    border: 1px solid #d3eee3;
    border-radius: 10px
}

.bulk-tools>span {
    font-weight: 600;
    margin-right: auto
}

/* Refined support and profile pages */
.support-layout {
    align-items: stretch;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .8fr)
}

.support-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0
}

.support-email-link {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    overflow-wrap: anywhere;
    margin-top: 8px
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 18px;
    align-items: start
}

.profile-card,
.profile-security {
    padding: 26px
}

.profile-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px
}

.profile-section-head h2 {
    font: 800 22px Manrope;
    margin: 7px 0;
    color: var(--ink)
}

.profile-section-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5
}

.profile-badge {
    padding: 8px 12px;
    border-radius: 99px;
    background: #e8f7f1;
    color: #078b66;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    margin-bottom: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface, #f8fbff)
}

.profile-identity>.avatar {
    width: 76px;
    height: 76px;
    flex: none;
    font-size: 28px;
    background-size: cover;
    background-position: center
}

.profile-identity b {
    font-weight: 750;
    color: var(--ink)
}

.profile-identity p {
    margin: 5px 0 12px;
    color: var(--muted);
    font-size: 13px
}

.profile-photo-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap
}

.profile-photo-actions input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.profile-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

.profile-fields label,
.profile-security form>label:not(.check-row) {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700
}

.profile-fields input,
.profile-security input:not([type=checkbox]) {
    width: 100%;
    min-height: 44px
}

.profile-fields small {
    color: var(--muted);
    font-weight: 400
}

.profile-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 19px
}

.profile-status {
    min-height: 18px;
    color: var(--muted);
    font-size: 13px
}

.profile-security-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #e7f8f1;
    color: #05aa78;
    font-size: 24px;
    flex: none
}

.profile-security-note {
    display: grid;
    gap: 5px;
    margin: 0 0 20px;
    padding: 14px;
    border: 1px solid #ccebdd;
    border-radius: 10px;
    background: #f0fbf6;
    color: #315b4b;
    font-size: 13px;
    line-height: 1.5
}

.profile-security-note b {
    color: #087a56
}

.profile-security form {
    display: grid;
    gap: 15px
}

.profile-security form .check-row {
    display: flex;
    align-items: center;
    gap: 9px
}

.profile-security form .btn {
    justify-self: start
}

.user-chip .avatar {
    background-size: cover;
    background-position: center
}

.dark .profile-identity {
    background: #101d2d;
    border-color: #293e53
}

.dark .profile-security-note {
    background: #10392f;
    border-color: #1e6a53;
    color: #c8e4d9
}

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

@media(max-width:760px) {
    .support-layout {
        grid-template-columns: 1fr
    }

    .profile-card,
    .profile-security {
        padding: 19px
    }

    .profile-section-head {
        flex-direction: column
    }

    .profile-identity {
        align-items: flex-start
    }

    .support-email-link {
        font-size: 12px !important
    }
}

/* Keep Password Manager screens aligned with the shared workspace header and full content width. */
body:is([data-page="overview"], [data-page="passwords"], [data-page="favorites"], [data-page="categories"], [data-page="notes"], [data-page="health"], [data-page="reminders"], [data-page="teams"], [data-page="import-export"], [data-page="trash"], [data-page="profile"]) .content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: clamp(12px, 1.5vw, 28px)
}

body:is([data-page="overview"], [data-page="passwords"], [data-page="favorites"], [data-page="categories"], [data-page="notes"], [data-page="health"], [data-page="reminders"], [data-page="teams"], [data-page="import-export"], [data-page="trash"]) .content>.page-heading>div:first-child {
    display: none
}

body:is([data-page="overview"], [data-page="passwords"], [data-page="favorites"], [data-page="categories"], [data-page="notes"], [data-page="health"], [data-page="reminders"], [data-page="teams"], [data-page="import-export"], [data-page="trash"]) .content>.page-heading:has(>button) {
    justify-content: flex-end;
    margin-bottom: 12px
}

body:is([data-page="overview"], [data-page="passwords"], [data-page="favorites"], [data-page="categories"], [data-page="notes"], [data-page="health"], [data-page="reminders"], [data-page="teams"], [data-page="import-export"], [data-page="trash"]) .content>.page-heading:not(:has(>button)) {
    display: none
}

body[data-page="domains"] .content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: clamp(12px, 1.5vw, 28px)
}

body[data-page="domains"] .content>.page-heading>div:first-child {
    display: none
}

body[data-page="domains"] .content>.page-heading:has(>button) {
    justify-content: flex-end;
    margin-bottom: 12px
}

body[data-page="domains"] .content>.page-heading:not(:has(>button)) {
    display: none
}

body[data-page="domains"] .domain-panel .view-switch button.selected,
body[data-page="domains"] .domain-panel .pagination button.current {
    background: #0866f8;
    border-color: #0866f8;
    color: #fff
}

body[data-page="domains"] .domain-panel .row-select,
body[data-page="domains"] .domain-panel .select-all {
    accent-color: #0866f8
}

/* Brand marks, consistent list controls, and compact actions */
.brand-logo {
    display: block;
    width: 132px;
    height: auto;
    max-height: 34px;
    object-fit: contain;
    flex: none
}

.brand-word-suffix {
    font: 800 24px Manrope, sans-serif;
    letter-spacing: -1px;
    color: #00cc92;
    white-space: nowrap
}

.account-logo {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--account-brand) 12%, white);
    color: var(--account-brand);
    font: 800 16px Arial, sans-serif;
    line-height: 1
}

.account-logo-google {
    font-weight: 800;
    background: conic-gradient(#4285f4 0 25%, #34a853 25% 48%, #fbbc05 48% 70%, #ea4335 70% 86%, #4285f4 86%);
    color: white;
    border-radius: 50%;
    width: 23px;
    height: 23px
}

.account-logo-gmail {
    font-weight: 900;
    font-size: 19px;
    color: #ea4335;
    background: #fff
}

.account-logo-youtube {
    color: #fff;
    background: #ff0033;
    font-size: 13px
}

.account-logo-facebook,
.account-logo-linkedin {
    color: #fff;
    background: var(--account-brand)
}

.account-logo-instagram {
    color: #fff;
    background: linear-gradient(135deg, #feda75, #d62976, #4f5bd5)
}

.account-logo-whatsapp {
    color: #fff;
    background: #25d366;
    border-radius: 50%
}

.account-logo-x-twitter,
.account-logo-apple,
.account-logo-github {
    color: #fff;
    background: #111827
}

.account-logo-snapchat {
    color: #111827;
    background: #fffc00
}

#modal-icon .account-logo {
    width: 34px;
    height: 34px;
    font-size: 22px
}

#modal-icon.modal-brand-preview {
    background: #eaf3ff
}

.table-panel .panel-title {
    min-height: 46px;
    align-items: center;
    padding: 0 2px 8px
}

.table-panel .filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap
}

.table-panel .filter-row>.table-search {
    flex: 1 1 260px;
    min-width: 140px
}

.table-panel .filter-row>select {
    flex: 0 0 auto;
    min-width: 125px
}

.domain-panel th:first-child,
.domain-panel td:first-child {
    width: 42px;
    min-width: 42px;
    text-align: center;
    padding-left: 10px;
    padding-right: 6px
}

.domain-panel .table-scroll {
    overflow-x: auto
}

.domain-panel table {
    min-width: 980px
}

.domain-panel .filter-row>.domain-sort {
    min-width: 150px
}

.domain-panel .filter-row .view-switch {
    margin-left: 0
}

.bulk-tools {
    min-height: 50px
}

.bulk-tools .danger-outline {
    margin-left: auto
}

.note-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px
}

.note-actions .icon-btn {
    background: #ffffffc9
}

.danger-icon {
    color: #d92f42 !important
}

.note-more,
.icon-btn[data-action="menu"],
.icon-btn[title="More actions"],
.category-tile>span:last-child {
    display: none !important
}

.team-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.team-entry .team-list-item {
    flex: 1 1 180px;
    min-width: 0
}

.team-delete-button {
    flex: none
}

#language-select {
    max-width: 100%
}

@media(max-width:900px) {
    .table-panel .filter-row {
        flex-wrap: wrap
    }

    .table-panel .filter-row>.table-search {
        flex-basis: 100%
    }

    .domain-panel table {
        min-width: 900px
    }
}

@media(max-width:760px) {
    .brand-logo {
        width: 118px
    }

    .brand-word-suffix {
        font-size: 21px
    }

    .team-delete-button {
        width: 100%
    }
}

/* Updated Scienartist lockup, note actions, and shared table spacing */
.brand {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px
}

.brand-logo {
    width: 158px;
    height: auto;
    max-height: none;
    object-fit: contain
}

.brand-caption {
    display: block;
    color: #bdccdd;
    font-size: 12px;
    line-height: 1.25;
    padding-left: 2px
}

.login-story>.brand {
    margin-bottom: 30px
}

.note-actions {
    gap: 6px
}

.note-actions .icon-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px
}

.table-panel .table-scroll table {
    width: 100%;
    table-layout: auto;
    min-width: 1220px
}

.table-panel .table-scroll th:last-child,
.table-panel .table-scroll td:last-child {
    width: 112px
}

.table-panel .table-scroll th:first-child,
.table-panel .table-scroll td:first-child {
    width: 46px
}

.table-panel .table-scroll th:nth-child(2),
.table-panel .table-scroll td:nth-child(2) {
    width: 22%;
    min-width: 180px
}

.table-panel .table-scroll td:last-child .icon-btn {
    margin: 0 3px
}

body[data-page="trash"] .table-panel .table-scroll table {
    min-width: 1220px
}

body[data-page="trash"] .table-panel .table-scroll th:last-child,
body[data-page="trash"] .table-panel .table-scroll td:last-child {
    width: 205px
}

@media(max-width:760px) {
    .brand-logo {
        width: 146px
    }

    .table-panel .table-scroll table {
        min-width: 1220px
    }
}

/* Responsive layout notes: preserve table scroll, but let controls and cards reflow cleanly on narrow screens. */
* {
    box-sizing: border-box
}

.content,
.panel,
.table-panel,
.panel-title,
.page-heading,
.filter-row,
.team-intro,
.team-layout,
.team-vault-row {
    min-width: 0
}

.page-heading {
    flex-wrap: wrap;
    gap: 12px
}

.page-heading>button,
.page-heading>.btn {
    flex: none
}

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

.filter-row>input {
    flex: 1 1 260px;
    min-width: min(100%, 220px)
}

.filter-row>select {
    flex: 0 1 160px;
    min-width: 130px
}

.table-scroll {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.table-scroll table {
    min-width: 760px
}

.icon-btn,
.password-reveal {
    flex: none;
    touch-action: manipulation
}

.team-vault-row {
    flex-wrap: wrap
}

.team-vault-row>div {
    overflow-wrap: anywhere
}

@media(max-width:900px) {
    .content {
        padding: 18px !important
    }

    .team-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .team-intro {
        align-items: flex-start;
        flex-direction: column
    }

    .team-create-controls,
    .team-invite-controls {
        width: 100%;
        flex-wrap: wrap
    }

    .team-create-controls input,
    .team-invite-controls input {
        flex: 1 1 220px;
        min-width: 0
    }

    .team-workspace-head {
        align-items: flex-start;
        flex-direction: column
    }

    .two-col,
    .two-col.lower {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media(max-width:600px) {
    .content {
        padding: 12px !important
    }

    .page-heading h1 {
        font-size: 22px
    }

    .page-heading p {
        font-size: 13px
    }

    .filter-row>* {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0
    }

    .filter-row .view-switch {
        flex: 0 0 auto;
        width: auto
    }

    .tabs {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin
    }

    .bulk-tools {
        align-items: stretch
    }

    .bulk-tools>* {
        max-width: 100%
    }

    .bulk-tools .btn {
        flex: 1 1 100%;
        white-space: normal
    }

    .team-add-form {
        grid-template-columns: minmax(0, 1fr)
    }

    .team-add-form button {
        grid-column: auto
    }

    .team-table-tools {
        align-items: stretch;
        flex-direction: column
    }

    .team-vault-row {
        align-items: flex-start
    }

    .team-vault-row>div {
        flex: 1 1 calc(100% - 58px)
    }

    .modal,
    .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px);
        overflow: auto
    }

    .pagination {
        flex-wrap: wrap
    }
}

/* Shared form shell used by every page-level Add and Edit action. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #071526a8;
    backdrop-filter: blur(4px)
}

.modal-backdrop[hidden] {
    display: none
}

.modal {
    position: relative;
    width: min(680px, 100%);
    max-height: min(92dvh, 900px);
    overflow: auto;
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 80px #06142155
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 24px
}

.modal-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 36px 18px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line)
}

.modal-heading h2 {
    margin: 0 0 4px;
    font: 800 22px Manrope, Arial, sans-serif
}

.modal-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5
}

#modal-fields {
    display: grid;
    gap: 10px
}

.modal-field {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    margin: 4px 0
}

.field-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--blue)
}

.field-content {
    display: grid;
    gap: 6px;
    min-width: 0
}

.field-content label {
    font-weight: 700
}

.field-content input,
.field-content select,
.field-content textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    color: var(--ink)
}

.field-content textarea {
    min-height: 78px;
    resize: vertical
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line)
}

.modal-actions .favorite-check {
    margin-right: auto
}

.modal-actions .check-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 9px
}

.required {
    color: #d93042
}

.toast {
    position: fixed;
    z-index: 1200;
    right: 20px;
    bottom: 20px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 10px;
    background: #10233a;
    color: #fff;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: .18s
}

.toast.show {
    opacity: 1;
    transform: translateY(0)
}

.dark .modal {
    background: #122235;
    color: #e8eff7;
    border-color: #293e53
}

.dark .field-content input,
.dark .field-content select,
.dark .field-content textarea {
    background: #172b40;
    color: #e8eff7;
    border-color: #36506a
}

@media(max-width:600px) {
    .modal-backdrop {
        padding: 10px
    }

    .modal {
        padding: 22px 16px;
        max-height: calc(100dvh - 20px)
    }

    .modal-heading {
        gap: 10px
    }

    .modal-heading h2 {
        font-size: 19px
    }

    .modal-actions {
        justify-content: stretch
    }

    .modal-actions>* {
        flex: 1 1 100%;
        margin: 0 !important
    }

    .modal-field {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px
    }

    .field-icon {
        width: 32px;
        height: 32px
    }
}

/* Popup refinement: improve spacing and focus without changing any form fields or copy. */
.modal-backdrop {
    background: rgba(7, 20, 34, .62);
    backdrop-filter: blur(4px);
    padding: clamp(12px, 3vw, 28px)
}

.modal {
    width: min(720px, 100%);
    max-height: min(92dvh, 900px);
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid #dce7f2;
    border-radius: 18px;
    box-shadow: 0 28px 90px rgba(4, 23, 42, .28);
    animation: modal-arrive .18s ease-out
}

.modal-close {
    top: 15px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7fafe;
    display: grid;
    place-items: center
}

.modal-heading {
    padding: 0 38px 18px 0;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--line)
}

.modal-heading .page-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex: none
}

.modal-heading h2 {
    font-size: clamp(20px, 2.5vw, 25px);
    letter-spacing: -.35px
}

.modal-heading p {
    line-height: 1.5
}

.modal-field {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    margin: 13px 0
}

.modal-field>span:first-child {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #edf5ff;
    color: #1677ee;
    display: grid;
    place-items: center
}

.modal-field>div {
    min-width: 0
}

.modal-field label {
    display: block;
    font-weight: 700;
    margin: 0 0 6px
}

.modal-field input,
.modal-field select,
.modal-field textarea {
    width: 100%;
    height: 44px;
    border-radius: 9px;
    background: #fbfdff
}

.modal-field textarea {
    height: auto;
    min-height: 100px;
    padding: 11px 12px;
    resize: vertical
}

.modal-actions {
    padding-top: 16px;
    border-top: 1px solid var(--line);
    gap: 10px
}

.modal-actions .check-row {
    margin-right: auto
}

.modal-actions .btn {
    min-height: 42px
}

.dark .modal {
    background: #122235;
    border-color: #293e53;
    color: #e8eff7
}

.dark .modal-close,
.dark .modal-field input,
.dark .modal-field select,
.dark .modal-field textarea {
    background: #172b40;
    color: #e7eff8;
    border-color: #36506a
}

.dark .modal-field>span:first-child {
    background: #1a3047;
    color: #8fc4ff
}

@keyframes modal-arrive {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.99)
    }

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

@media(max-width:600px) {
    .modal {
        padding: 20px 16px;
        border-radius: 15px
    }

    .modal-field {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px
    }

    .modal-field>span:first-child {
        width: 32px;
        height: 32px
    }

    .modal-actions {
        justify-content: stretch
    }

    .modal-actions .btn {
        flex: 1
    }

    .modal-actions .check-row {
        flex: 1 0 100%;
        margin: 0 0 6px
    }
}

/* Hide controls marked hidden even when component styles declare display explicitly. */
[hidden] {
    display: none !important
}

/* Keep the team title, key action, and invite controls grouped without stretching empty space. */
.team-workspace-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
    align-items: center;
    gap: 12px
}

.team-workspace-head>div:first-child {
    min-width: 0
}

.team-invite-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.team-invite-controls input {
    width: min(220px, 24vw)
}

.team-key-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px
}

.team-key-panel p {
    flex: 1 1 100%;
    margin: 0
}

.selection-cell {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    text-align: center
}

.selection-cell input {
    margin: 0;
    vertical-align: middle
}

/* Sign-in stays centered on a single column at tablet and phone widths. */
.login-shell {
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) minmax(0, .96fr)
}

.login-story {
    min-height: 100svh;
    display: flex;
    flex-direction: column
}

.login-form-area {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(22px, 5vw, 56px)
}

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

@media(max-width:980px) {
    .login-shell {
        grid-template-columns: minmax(0, 1fr)
    }

    .login-story {
        display: none
    }

    .login-form-area {
        min-height: 100svh;
        padding: clamp(22px, 6vw, 56px)
    }

    .team-workspace-head {
        grid-template-columns: minmax(0, 1fr) auto;
        justify-items: start
    }

    .team-invite-controls {
        grid-column: 1/-1;
        width: 100%;
        flex-wrap: wrap
    }

    .team-invite-controls input {
        width: auto;
        flex: 1 1 220px
    }
}

@media(max-width:600px) {
    .login-form-area {
        padding: 18px 14px 58px
    }

    .login-card {
        padding: 26px 18px
    }

    .login-card h2 {
        font-size: 24px
    }

    .login-card p {
        font-size: 14px;
        margin-bottom: 22px
    }

    .team-workspace-head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px
    }

    .team-workspace-head .team-invite-controls {
        grid-column: 1/-1
    }

    .team-key-panel {
        align-items: stretch
    }

    .team-key-copy {
        min-width: 0
    }

    .team-vault-row .selection-cell {
        width: auto;
        min-width: 0;
        max-width: none
    }

    .modal-actions [hidden] {
        display: none !important
    }
}

/* Align popup icons with their controls, keep category selection visible, and size session settings cleanly. */
.modal-field {
    align-items: start
}

.modal-field>.field-icon {
    align-self: start;
    margin-top: 26px
}

.modal-field:has(textarea)>.field-icon {
    margin-top: 44px
}

.category-tile.selected {
    border-color: var(--green);
    box-shadow: 0 0 0 2px #05be8022;
    background: #f2fcf8
}

#session-timeout-select {
    display: block;
    width: min(100%, 320px);
    margin-top: 8px
}

/* Keep each form icon level with its input, and pair username with password. */
.modal-field>.field-icon {
    margin-top: 27px
}

.modal-field:has(textarea)>.field-icon {
    margin-top: 27px
}

.password-dialog .modal-field:nth-child(4) {
    grid-column: auto
}

@media(max-width:600px) {
    .password-dialog .modal-field:nth-child(4) {
        grid-column: 1
    }
}

.trash-type-cell {
    min-width: 160px;
    white-space: normal;
    overflow-wrap: anywhere
}

.trash-type-cell b,
.trash-type-cell small {
    display: block
}

.trash-type-cell small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px
}

/* Align form symbols with the control beneath each label across all modal forms. */
.modal-field>.field-icon {
    margin-top: 36px
}

.modal-field:has(textarea)>.field-icon {
    margin-top: 43px
}

/* Small-screen access is deliberately limited to the password list and its Settings controls. */
.mobile-access-nav {
    display: none
}

.mobile-settings-panel {
    grid-column: 1/-1
}

.mobile-settings-panel>p {
    margin: 0 0 14px !important
}

.mobile-settings-note {
    display: block;
    color: var(--muted);
    margin-top: 10px
}

#mobile-access-options[aria-disabled] {
    opacity: .45;
    pointer-events: none
}

.mobile-blocked-panel {
    max-width: 620px;
    margin: 34px auto;
    text-align: center;
    padding: 28px
}

.mobile-blocked-panel h2 {
    margin: 0 0 8px;
    font: 800 22px Manrope, sans-serif
}

.mobile-blocked-panel p {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.6
}

@media(max-width:760px) {
    body[data-mobile-view="compact"]:not([data-page="login"]) {
        padding-bottom: 66px
    }

    body[data-mobile-view="compact"] .sidebar,
    body[data-mobile-view="compact"] .topbar {
        display: none !important
    }

    body[data-mobile-view="compact"] .main-area {
        margin-left: 0;
        min-height: 100svh
    }

    body[data-mobile-view="compact"] .content {
        padding: 14px 12px 82px
    }

    body[data-mobile-view="compact"] .page-heading {
        margin-bottom: 10px
    }

    body[data-mobile-view="compact"] .page-heading h1 {
        font-size: 22px
    }

    body[data-mobile-view="compact"] .page-heading p,
    body[data-mobile-view="compact"] .page-heading>.btn {
        display: none !important
    }

    body[data-mobile-view="compact"] .mobile-access-nav {
        position: fixed;
        z-index: 20;
        inset: auto 0 0;
        display: flex;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -5px 20px #1b436014;
        scrollbar-width: thin
    }

    body[data-mobile-view="compact"] .mobile-access-nav a {
        flex: 0 0 auto;
        text-align: center;
        padding: 9px 11px;
        border-radius: 8px;
        color: #49617f;
        font-weight: 700;
        white-space: nowrap
    }

    body[data-mobile-view="compact"] .mobile-access-nav a[aria-current="page"] {
        background: #eaf2ff;
        color: #075be8
    }

    body[data-mobile-view="compact"][data-page="passwords"] .tabs,
    body[data-mobile-view="compact"][data-page="passwords"] .table-panel .filter-row,
    body[data-mobile-view="compact"][data-page="passwords"] .bulk-tools,
    body[data-mobile-view="compact"][data-page="passwords"] .table-footer {
        display: none !important
    }

    body[data-mobile-view="compact"] .table-panel .table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain
    }

    body[data-mobile-view="compact"] .table-panel .table-scroll table {
        width: 100%;
        min-width: 1220px !important;
        table-layout: auto !important
    }

    body[data-mobile-view="compact"] .table-panel .table-scroll th,
    body[data-mobile-view="compact"] .table-panel .table-scroll td {
        padding: 10px 8px;
        font-size: 12px;
        white-space: nowrap;
        overflow-wrap: normal
    }

    body[data-mobile-view="compact"][data-mobile-username="false"][data-page="passwords"] th:nth-child(3),
    body[data-mobile-view="compact"][data-mobile-username="false"][data-page="passwords"] td:nth-child(3) {
        display: none !important
    }

    body[data-mobile-view="compact"][data-page="passwords"] td:nth-child(2) {
        min-width: 0
    }

    body[data-mobile-view="compact"][data-page="passwords"] td:nth-child(2) small {
        display: none !important
    }

    body[data-mobile-view="compact"][data-page="passwords"] .site-icon {
        width: 25px;
        height: 25px;
        margin: 0 4px 0 0;
        font-size: 13px
    }

    body[data-mobile-view="compact"][data-page="passwords"] .icon-btn[data-action="edit"],
    body[data-mobile-view="compact"][data-mobile-password-reveal="false"][data-page="passwords"] .password-reveal,
    body[data-mobile-view="compact"][data-mobile-copy="false"][data-page="passwords"] .icon-btn[data-action="copy"] {
        display: none !important
    }

    body[data-mobile-view="compact"][data-page="passwords"] .password-mask {
        display: inline-block;
        max-width: 68px;
        overflow: hidden;
        vertical-align: middle
    }

    body[data-mobile-view="compact"][data-page="passwords"] .password-reveal {
        padding: 4px 2px
    }

    body[data-mobile-view="compact"][data-page="settings"] .content {
        padding-bottom: 80px
    }

    body[data-mobile-view="compact"][data-page="settings"] .settings-grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0
    }

    body[data-mobile-view="compact"][data-page="settings"] .settings-grid>article:not(.mobile-settings-panel) {
        display: none !important
    }

    body[data-mobile-blocked="true"] .content>*:not(.mobile-blocked-panel) {
        display: none !important
    }
}

.vault-locked-cell {
    text-align: center;
    padding: 22px;
    color: var(--muted)
}

/* Dashboard shortcuts keep their icon, title, and subtitle on one horizontal line. */
.quick-grid:not(.support-links) .quick-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 16px;
    text-align: left
}

.quick-grid:not(.support-links) .quick-card .quick-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 11px;
    background: #ffffffa6;
    color: #087d62
}

.quick-grid:not(.support-links) .quick-card .quick-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.quick-grid:not(.support-links) .quick-card .quick-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    max-width: none
}

.quick-grid:not(.support-links) .quick-card .quick-copy b {
    font-size: 14px;
    color: var(--ink)
}

.quick-grid:not(.support-links) .quick-card .quick-copy small {
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted)
}

.quick-grid:not(.support-links) .quick-card .quick-arrow {
    position: static;
    margin-left: auto;
    flex: none;
    font-size: 22px;
    color: var(--muted)
}

.dark .quick-grid:not(.support-links) .quick-card .quick-icon {
    background: #1b3046;
    color: #48ddb0
}

.nav-submenu {
    display: grid;
    gap: 2px;
    margin: -1px 0 5px 43px;
    padding-left: 11px;
    border-left: 1px solid #244056
}

.nav-submenu a {
    padding: 8px 10px;
    border-radius: 6px;
    color: #aebfd2;
    font-size: 13px
}

.nav-submenu a:hover,
.nav-submenu a.active {
    color: #fff;
    background: #0c2e37
}

.nav-submenu a.active {
    box-shadow: inset 2px 0 #00d99d
}

.nav-module-heading {
    padding: 11px 12px 5px;
    color: #7890a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.1px
}

.nav-submenu .active {
    font-weight: 700
}

.module-installer {
    grid-column: 1/-1
}

.module-catalog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px
}

.module-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff
}

.module-option b,
.module-option small {
    display: block
}

.module-option small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px
}

.module-installed {
    padding: 5px 9px;
    border-radius: 20px;
    background: #e1f8ee;
    color: #078356;
    font-size: 11px;
    font-weight: 700
}

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

.agency-module-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff
}

.agency-module-intro p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5
}

.agency-module-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

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

.agency-record-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-record-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.agency-record-heading h3 {
    margin: 0;
    font: 800 17px Manrope, sans-serif;
    overflow-wrap: anywhere
}

.agency-record-heading>div {
    display: flex;
    gap: 5px
}

.agency-record-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 16px 0
}

.agency-record-card dl div {
    min-width: 0
}

.agency-record-card dt {
    text-transform: capitalize;
    color: var(--muted);
    font-size: 11px
}

.agency-record-card dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 13px;
    overflow-wrap: anywhere
}

.agency-record-card>a {
    color: #087bfa;
    font-weight: 700;
    font-size: 13px
}

.drive-connection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px
}

.drive-connection b,
.drive-connection small {
    display: block
}

.drive-connection small {
    margin-top: 3px;
    color: var(--muted)
}

.drive-feedback {
    margin: 0;
    padding: 11px 14px;
    border-radius: 8px;
    background: #e7f8ef;
    color: #087650
}

.drive-feedback.error {
    background: #fff2dd;
    color: #845700
}

@media(max-width:600px) {

    .module-catalog,
    .agency-module-list {
        grid-template-columns: 1fr
    }

    .agency-module-intro {
        align-items: flex-start;
        flex-direction: column
    }

    .agency-module-actions {
        width: 100%
    }

    .agency-module-actions .btn {
        flex: 1;
        text-align: center
    }

    .agency-record-card {
        padding: 14px
    }

    .agency-record-card dl {
        grid-template-columns: 1fr 1fr
    }
}

/* Agency finance screens: responsive records, approval states, evidence uploads, and print previews. */
.finance-page {
    display: grid;
    gap: 15px
}

.finance-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    background: linear-gradient(115deg, #eaf5ff, #effcf6)
}

.finance-intro h2 {
    margin: 6px 0;
    font: 800 23px Manrope, sans-serif
}

.finance-intro p {
    max-width: 800px;
    margin: 0;
    color: var(--muted);
    line-height: 1.5
}

.finance-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px;
    border-bottom: 1px solid var(--line)
}

.finance-toolbar input {
    flex: 1;
    min-width: 120px
}

.finance-toolbar select {
    width: 180px
}

.finance-table-panel {
    padding: 0;
    overflow: hidden
}

.finance-table {
    min-width: 1040px
}

.finance-table td small {
    display: block;
    margin-top: 4px;
    color: var(--muted)
}

.finance-table td:last-child {
    min-width: 245px
}

.finance-report {
    padding: 0 16px 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5
}

.finance-dashboard-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.finance-dashboard-links .quick-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    min-height: 78px;
    padding: 14px;
    text-align: left
}

.finance-dashboard-links .quick-copy {
    display: grid;
    gap: 4px
}

.finance-dashboard-links .quick-copy small {
    color: var(--muted)
}

.finance-dashboard-links .quick-arrow {
    margin-left: auto
}

.finance-modal {
    width: min(820px, 100%)
}

#finance-fields {
    display: grid;
    gap: 12px
}

.finance-line {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 92px 120px 38px;
    gap: 7px;
    margin-top: 7px
}

.finance-line input {
    min-width: 0
}

.payment-line {
    grid-template-columns: 110px minmax(100px, 1fr) minmax(130px, 1.3fr) 145px 38px
}

.finance-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.finance-attachments>span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    font-size: 12px
}

.finance-attachments button {
    border: 0;
    background: none;
    color: #087bfa;
    cursor: pointer
}

.agency-dashboard .pm-project-card .pm-card-heading>div {
    display: none
}

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

    .finance-intro>.btn {
        width: 100%
    }

    .finance-toolbar {
        flex-wrap: wrap
    }

    .finance-toolbar input {
        flex: 1 1 100%
    }

    .finance-toolbar select {
        flex: 1 1 160px;
        width: auto
    }

    .finance-dashboard-links {
        grid-template-columns: 1fr
    }

    .finance-line {
        grid-template-columns: minmax(0, 1fr) 72px 90px 36px
    }

    .payment-line {
        grid-template-columns: 1fr 1fr
    }

    .payment-line input:nth-child(3) {
        grid-column: 1/-1
    }

    .payment-line input:nth-child(4) {
        grid-column: 1
    }

    .payment-line button {
        grid-column: 2
    }

    .finance-table {
        min-width: 1050px
    }
}

/* Project Planning and Task Management workspace. */
.pm-overview {
    display: grid;
    gap: 16px
}

.pm-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border: 1px solid #dceaf2;
    border-radius: 14px;
    background: linear-gradient(115deg, #eaf5ff, #effcf6)
}

.pm-intro h2 {
    margin: 7px 0;
    font: 800 24px Manrope, sans-serif
}

.pm-intro p {
    margin: 0;
    color: var(--muted);
    max-width: 700px;
    line-height: 1.5
}

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

.pm-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 19px;
    background: #fff;
    border: 1px solid #edf2f8;
    border-radius: 11px;
    box-shadow: var(--shadow);
    color: var(--muted)
}

.pm-stat b {
    font: 800 23px Manrope, sans-serif;
    color: var(--ink)
}

.pm-panel {
    padding: 0;
    overflow: hidden
}

.pm-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--line)
}

.pm-toolbar select,
.pm-search {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d9e4f2;
    border-radius: 7px;
    background: #fff;
    color: #344b6b
}

.pm-toolbar select {
    min-width: 145px
}

.pm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 150px
}

.pm-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent
}

.pm-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 15px
}

.pm-project-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff
}

.pm-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.pm-card-heading>div {
    display: flex;
    gap: 6px
}

.pm-project-card h3 {
    margin: 14px 0 3px;
    font: 800 18px Manrope, sans-serif;
    overflow-wrap: anywhere
}

.pm-client {
    margin: 0;
    color: var(--muted)
}

.pm-brief {
    margin: 12px 0;
    color: #435674;
    line-height: 1.5;
    overflow-wrap: anywhere
}

.pm-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 0;
    color: var(--muted);
    font-size: 12px
}

.pm-project-meta span {
    display: grid;
    gap: 3px
}

.pm-project-meta b {
    color: #253957
}

.pm-status {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px 9px;
    background: #edf3fa;
    color: #405775;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap
}

.status-active {
    background: #e1f8ee;
    color: #078356
}

.status-planning {
    background: #eaf3ff;
    color: #1767b4
}

.status-on-hold {
    background: #fff4d8;
    color: #9a6700
}

.status-completed {
    background: #e9f8f4;
    color: #087969
}

.priority-urgent,
.priority-high {
    background: #ffeaeb;
    color: #be2735
}

.priority-normal {
    background: #fff4d8;
    color: #956100
}

.priority-low {
    background: #e9f2ff;
    color: #32659b
}

.pm-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px
}

.pm-progress-label b {
    color: #314967
}

.pm-progress {
    height: 7px;
    border-radius: 8px;
    background: #edf2f7;
    overflow: hidden
}

.pm-progress i {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: var(--green)
}

.pm-empty {
    padding: 25px;
    color: var(--muted);
    text-align: center;
    line-height: 1.5
}

.pm-footnote {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5
}

.pm-table-wrap {
    overflow-x: auto
}

table.pm-task-table {
    min-width: 900px
}

table.pm-task-table td:first-child {
    min-width: 220px;
    white-space: normal
}

table.pm-task-table td:first-child small,
table.pm-task-table td:nth-child(3) small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    white-space: normal;
    overflow-wrap: anywhere
}

table.pm-task-table td:nth-child(3) {
    min-width: 180px;
    white-space: normal
}

.pm-inline-status {
    max-width: 150px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d9e4f2;
    border-radius: 6px;
    background: #fff;
    color: #344b6b
}

.pm-actions {
    white-space: nowrap
}

.pm-actions .btn+.btn {
    margin-left: 5px
}

.pm-modal-open {
    overflow: hidden;
    padding-right: var(--pm-scrollbar-width, 0px)
}

.pm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #071522a8;
    overflow: auto
}

.pm-modal-backdrop[hidden] {
    display: none
}

.pm-modal {
    position: relative;
    width: min(680px, 100%);
    max-height: min(92vh, 900px);
    overflow: auto;
    padding: 26px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 15px;
    box-shadow: 0 24px 80px #07152250
}

.pm-modal h2 {
    margin: 8px 0 4px;
    font: 800 23px Manrope, sans-serif
}

.pm-modal>p {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.5
}

.pm-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-size: 22px;
    color: #607392
}

.pm-modal form {
    display: grid;
    gap: 13px
}

.pm-modal form>label,
.pm-form-row>label {
    display: grid;
    gap: 6px;
    color: #263b58;
    font-size: 13px;
    font-weight: 700
}

.pm-modal input,
.pm-modal select {
    width: 100%
}

.pm-modal textarea {
    width: 100%;
    height: auto;
    min-height: 92px;
    padding: 10px 12px;
    resize: vertical
}

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

.pm-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line)
}

@media(max-width:900px) {
    .pm-toolbar {
        flex-wrap: wrap
    }

    .pm-search {
        flex-basis: 100%
    }

    .pm-toolbar select {
        flex: 1
    }

    .pm-project-grid {
        grid-template-columns: 1fr
    }

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

@media(max-width:560px) {
    .pm-intro {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px
    }

    .pm-intro h2 {
        font-size: 20px
    }

    .pm-intro>.btn {
        width: 100%
    }

    .pm-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .pm-stat {
        padding: 13px;
        font-size: 12px
    }

    .pm-stat b {
        font-size: 20px
    }

    .pm-toolbar select {
        min-width: calc(50% - 5px)
    }

    .pm-project-card {
        padding: 14px
    }

    .pm-card-heading {
        align-items: flex-start
    }

    .pm-card-heading>div {
        flex-direction: column
    }

    .pm-form-row {
        grid-template-columns: 1fr
    }

    .pm-modal-backdrop {
        padding: 10px
    }

    .pm-modal {
        padding: 20px 16px
    }

    .pm-form-actions {
        flex-wrap: wrap
    }

    .pm-form-actions .btn {
        flex: 1
    }

    .pm-project-meta {
        gap: 10px
    }
}

.agency-contact-modal {
    width: min(600px, 100%);
    padding: 22px 24px
}

.agency-contact-modal>h2 {
    margin: 0 34px 3px 0;
    color: #0b1741
}

.agency-contact-modal>p {
    margin: 0 0 14px
}

.agency-contact-form {
    gap: 0 !important
}

.agency-contact-form-section {
    padding: 12px 0 14px;
    border-top: 1px solid #e8edf5
}

.agency-contact-form-section h3 {
    margin: 0;
    color: #111c42;
    font: 800 15px Manrope, sans-serif
}

.agency-contact-form-section h3:first-letter {
    color: #0866f8
}

.agency-contact-form-section>p {
    margin: 3px 0 10px 32px;
    color: #7182a1;
    font-size: 12px
}

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

.agency-contact-form-grid>label {
    display: grid;
    gap: 5px;
    color: #182548;
    font-size: 12px;
    font-weight: 600
}

.agency-contact-modal .pm-form-actions {
    padding-top: 12px
}

.agency-contact-modal textarea {
    min-height: 72px
}

@media(max-width:560px) {
    .agency-contact-modal {
        padding: 20px 16px
    }

    .agency-contact-form-grid {
        grid-template-columns: 1fr
    }
}

.agency-client-modal {
    width: min(680px, 100%);
    padding: 22px 24px
}

.agency-client-modal>h2 {
    margin: 0 36px 3px;
    color: #0b1741
}

.agency-client-modal>p {
    margin-bottom: 14px
}

.agency-client-form {
    gap: 0 !important
}

.agency-client-form-section {
    padding: 11px 0 13px;
    border-top: 1px solid #e8edf5
}

.agency-client-form-section h3 {
    margin: 0;
    color: #111c42;
    font: 800 15px Manrope, sans-serif
}

.agency-client-form-section>p {
    margin: 3px 0 9px 30px;
    color: #7182a1;
    font-size: 12px
}

.agency-client-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px
}

.agency-client-form-grid>label {
    display: grid;
    gap: 5px;
    color: #182548;
    font-size: 12px;
    font-weight: 600
}

.agency-client-form-grid textarea {
    width: 100%;
    min-height: 72px;
    padding: 9px 11px;
    resize: vertical
}

.agency-auto-code {
    display: flex;
    align-items: center;
    height: 38px;
    border: 1px solid #d9e4f2;
    border-radius: 7px;
    background: #f5f8fc;
    overflow: hidden
}

.agency-auto-code>span {
    padding: 0 11px;
    color: #516788;
    border-right: 1px solid #d9e4f2
}

.agency-auto-code input {
    border: 0 !important;
    background: transparent !important
}

.agency-client-address {
    grid-template-columns: 1.2fr .8fr .8fr
}

.agency-client-address>label:first-child {
    grid-row: span 2
}

.agency-client-extra {
    grid-template-columns: 1fr 1fr 1.5fr
}

.agency-client-modal .pm-form-actions {
    padding-top: 12px
}

@media(max-width:600px) {
    .agency-client-modal {
        padding: 20px 16px
    }

    .agency-client-form-grid,
    .agency-client-address,
    .agency-client-extra {
        grid-template-columns: 1fr
    }

    .agency-client-address>label:first-child {
        grid-row: auto
    }
}

/* Expense add/edit dialog: mirror the structured client modal with a scrollable form and fixed actions. */
.finance-expense-modal {
    display: flex;
    flex-direction: column;
    width: min(900px, calc(100vw - 40px));
    max-height: min(94vh, 980px);
    padding: 28px 32px 0;
    overflow: hidden;
    border-radius: 16px
}

.finance-expense-modal>.support-kicker {
    display: none
}

.finance-expense-modal>h2 {
    margin: 0 52px 4px 0;
    color: #10264a;
    font-size: 26px;
    line-height: 1.25
}

.finance-expense-modal>p {
    margin: 0 44px 16px 0;
    color: #687f9f;
    font-size: 14px;
    line-height: 1.5
}

.finance-expense-modal>.pm-close {
    top: 20px;
    right: 22px;
    width: 40px;
    height: 40px;
    border-radius: 10px
}

.finance-expense-modal form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 0;
    overflow: auto;
    padding: 0 0 0
}

.finance-expense-modal #finance-fields {
    display: grid;
    gap: 0
}

.finance-expense-modal .finance-form-section {
    padding: 18px 0 20px;
    border-top: 1px solid #e5ecf5
}

.finance-expense-modal .finance-form-section h3 {
    margin: 0;
    color: #15294a;
    font: 800 17px Manrope, Arial, sans-serif
}

.finance-expense-modal .finance-form-section>p {
    margin: 4px 0 14px 28px;
    color: #7184a0;
    font-size: 13px;
    line-height: 1.45
}

.finance-expense-modal .finance-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px
}

.finance-expense-modal .finance-form-grid>label,
.finance-expense-modal .finance-expense-notes {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #192d4c;
    font-size: 13px;
    font-weight: 650
}

.finance-expense-modal .finance-field-label {
    display: block;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.35
}

.finance-expense-modal .finance-field-label b {
    color: #ef4554;
    font-weight: 700
}

.finance-expense-modal .finance-expense-basics {
    padding-top: 0;
    border-top: 0
}

.finance-expense-modal .finance-form-grid label b {
    color: #ef4554
}

.finance-expense-modal .finance-form-grid label small,
.finance-expense-modal .finance-expense-notes small {
    color: #7184a0;
    font-size: 11px;
    font-weight: 400
}

.finance-expense-modal .finance-form-grid :is(input:not([type=radio]), select),
.finance-expense-modal textarea {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #d5e1f0;
    border-radius: 8px;
    background: #fff;
    color: #253b59;
    font: 14px 'DM Sans', Arial, sans-serif
}

.finance-expense-modal .finance-form-grid :is(input, select):focus,
.finance-expense-modal textarea:focus {
    border-color: #3984ff;
    box-shadow: 0 0 0 3px #0866f81a;
    outline: 0
}

.finance-expense-modal .finance-expense-amount {
    display: flex;
    height: 44px;
    align-items: center;
    border: 1px solid #d5e1f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden
}

.finance-expense-modal .finance-expense-amount i {
    padding: 0 12px;
    border-right: 1px solid #e2eaf4;
    color: #5a708f;
    font-style: normal
}

.finance-expense-modal .finance-expense-amount input {
    height: 42px !important;
    border: 0 !important;
    box-shadow: none !important
}

.finance-expense-modal .finance-expense-type {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #d5e1f0;
    border-radius: 8px
}

.finance-expense-modal .finance-expense-type legend {
    padding: 0 4px;
    color: #192d4c;
    font-size: 12px;
    font-weight: 700
}

.finance-expense-modal .finance-expense-type label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #334966;
    font-size: 12px;
    font-weight: 500
}

.finance-expense-modal .finance-expense-type input {
    width: 16px;
    height: 16px;
    accent-color: #0866f8
}

.finance-expense-modal .finance-expense-upload {
    display: grid;
    min-height: 108px;
    place-content: center;
    justify-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px dashed #9bb8dd;
    border-radius: 9px;
    background: #f7faff;
    color: #294464;
    text-align: center;
    cursor: pointer
}

.finance-expense-modal .finance-expense-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0
}

.finance-expense-modal .finance-expense-upload>span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #e7f1ff;
    color: #0878f5;
    font-size: 20px
}

.finance-expense-modal .finance-expense-upload b {
    font-size: 13px
}

.finance-expense-modal .finance-expense-upload small {
    color: #7184a0;
    font-size: 11px
}

.finance-expense-modal .finance-expense-notes textarea {
    height: auto;
    min-height: 82px;
    padding: 10px 12px;
    resize: vertical
}

.finance-expense-modal .finance-attachments {
    margin: 0 0 12px
}

.finance-expense-modal .pm-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: none;
    margin: 0 -32px;
    padding: 14px 32px 18px;
    border-top: 1px solid #e3eaf3;
    background: #fff
}

.finance-expense-modal .pm-form-actions .btn {
    min-height: 44px;
    padding: 0 20px;
    font-size: 14px
}

.dark .finance-expense-modal .finance-form-section {
    border-color: #293e53
}

.dark .finance-expense-modal .finance-form-section h3,
.dark .finance-expense-modal .finance-form-grid>label,
.dark .finance-expense-modal .finance-expense-notes,
.dark .finance-expense-modal .finance-expense-type legend {
    color: #e7eef8
}

.dark .finance-expense-modal .finance-field-label {
    color: inherit
}

.dark .finance-expense-modal .finance-form-grid :is(input:not([type=radio]), select),
.dark .finance-expense-modal textarea,
.dark .finance-expense-modal .finance-expense-amount {
    border-color: #334a64;
    background: #102236;
    color: #e7eef8
}

.dark .finance-expense-modal .pm-form-actions {
    border-color: #293e53;
    background: #122437
}

@media(max-width:620px) {
    .finance-expense-modal {
        width: calc(100vw - 20px);
        max-height: 94vh;
        padding: 22px 18px 0;
        border-radius: 13px
    }

    .finance-expense-modal>h2 {
        font-size: 22px
    }

    .finance-expense-modal>p {
        font-size: 13px
    }

    .finance-expense-modal>.pm-close {
        top: 14px;
        right: 14px
    }

    .finance-expense-modal .finance-form-section {
        padding: 14px 0 16px
    }

    .finance-expense-modal .finance-form-section h3 {
        font-size: 15px
    }

    .finance-expense-modal .finance-form-section>p {
        margin-left: 0;
        font-size: 12px
    }

    .finance-expense-modal .finance-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px
    }

    .finance-expense-modal .pm-form-actions {
        margin: 0 -18px;
        padding: 12px 18px 14px
    }

    .finance-expense-modal .pm-form-actions .btn {
        flex: 1;
        padding: 0 12px
    }
}

.agency-employee-modal {
    width: min(600px, 100%);
    padding: 22px 24px
}

.agency-employee-modal>h2 {
    margin: 0 36px 3px;
    color: #0b1741
}

.agency-employee-modal>p {
    margin-bottom: 14px
}

.agency-employee-form {
    gap: 0 !important
}

.agency-employee-form .agency-contact-form-section {
    padding: 12px 0 14px
}

.agency-employee-invite {
    align-content: start
}

.agency-contact-form-grid>label.agency-employee-invite>span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7182a1;
    font-size: 10px;
    font-weight: 500
}

.agency-employee-invite input[type=checkbox] {
    width: 19px;
    height: 19px;
    accent-color: #0866f8
}

.agency-employee-notes {
    position: relative
}

.agency-employee-notes small {
    justify-self: end;
    color: #7182a1;
    font-size: 10px;
    font-weight: 400
}

.agency-employee-modal .pm-form-actions {
    padding-top: 12px
}

@media(max-width:560px) {
    .agency-employee-modal {
        padding: 20px 16px
    }
}

.agency-task-modal {
    width: min(640px, 100%);
    padding: 22px 24px
}

.agency-task-modal>h2 {
    margin: 0 36px 3px;
    color: #0b1741
}

.agency-task-modal>p {
    margin-bottom: 14px
}

.agency-task-modal form {
    gap: 0
}

.agency-task-form-section {
    padding: 11px 0 13px;
    border-top: 1px solid #e8edf5
}

.agency-task-form-section h3 {
    margin: 0;
    color: #111c42;
    font: 800 15px Manrope, sans-serif
}

.agency-task-form-section>p {
    margin: 3px 0 9px 30px;
    color: #7182a1;
    font-size: 12px
}

.agency-task-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px
}

.agency-task-form-grid>label {
    display: grid;
    gap: 5px;
    color: #182548;
    font-size: 12px;
    font-weight: 600
}

.agency-task-form-grid>label.wide {
    grid-column: 1/-1
}

.agency-task-form-grid textarea {
    width: 100%;
    min-height: 76px;
    padding: 9px 11px;
    resize: vertical
}

.task-description-count {
    justify-self: end;
    color: #7182a1;
    font-size: 11px;
    font-weight: 400
}

.task-hours-input {
    display: flex;
    align-items: center;
    border: 1px solid #d9e4f2;
    border-radius: 7px
}

.task-hours-input input {
    border: 0 !important
}

.task-hours-input small {
    padding: 0 10px;
    color: #7182a1
}

.agency-task-create-another {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: #344967 !important;
    font-size: 12px !important
}

.agency-task-create-another input {
    width: 16px !important;
    height: 16px;
    accent-color: #0866f8
}

@media(max-width:560px) {
    .agency-task-modal {
        padding: 20px 16px
    }

    .agency-task-form-grid {
        grid-template-columns: 1fr
    }

    .agency-task-form-grid>label.wide {
        grid-column: auto
    }
}

.agency-workspace {
    gap: 14px
}

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

.workspace-stats .pm-stat {
    min-height: 76px
}

.workspace-stats .pm-stat span {
    font-size: 13px
}

.workspace-panel {
    overflow: hidden
}

.workspace-toolbar {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--line)
}

.workspace-toolbar .pm-search {
    flex: 1
}

.workspace-toolbar select {
    min-width: 160px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d9e4f2;
    border-radius: 7px;
    background: #fff;
    color: #344b6b
}

.workspace-table {
    min-width: 900px
}

.workspace-table td:first-child {
    min-width: 180px
}

.workspace-table td {
    vertical-align: middle
}

.workspace-actions {
    white-space: nowrap
}

.workspace-actions .btn {
    margin-right: 5px
}

.workspace-count {
    margin: 0;
    padding: 12px 16px;
    color: var(--muted);
    font-size: 12px
}

.agency-workspace .agency-module-intro {
    background: linear-gradient(115deg, #eaf5ff, #effcf6)
}

.integrations-page {
    align-content: start
}

.integrations-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 24px
}

.integration-mark {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: #e8f2ff;
    color: #087bfa;
    font-size: 32px
}

.integration-copy h2 {
    margin: 0 0 7px;
    font: 800 20px Manrope, sans-serif
}

.integration-copy>p {
    margin: 0 0 10px;
    color: var(--muted)
}

.integration-copy .drive-connection {
    justify-content: flex-start;
    padding: 7px 0
}

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

.integrations-unavailable {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px
}

.integrations-unavailable h2 {
    margin: 0 0 8px;
    font: 800 18px Manrope, sans-serif
}

.integrations-unavailable p {
    color: var(--muted);
    line-height: 1.5
}

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

    .workspace-toolbar {
        flex-wrap: wrap
    }

    .workspace-toolbar .pm-search {
        flex-basis: 100%
    }

    .workspace-toolbar select {
        flex: 1
    }

    .agency-workspace .agency-module-intro {
        flex-direction: row;
        align-items: center
    }
}

@media(max-width:760px) {
    .integrations-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
        padding: 18px
    }

    .integration-mark {
        width: 48px;
        height: 48px
    }

    .integration-actions {
        grid-column: 1/-1;
        grid-template-columns: 1fr 1fr
    }

    .integration-actions .btn {
        text-align: center
    }
}

.agency-home {
    gap: 13px
}

.agency-welcome h2 {
    font-size: 28px
}

.agency-kpi-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.agency-kpi-icon {
    box-shadow: inset 0 0 0 1px #ffffff25
}

.agency-kpi-icon.purple {
    background: #7a2df2;
    color: #fff
}

.agency-kpi-icon.green {
    background: #08b67a;
    color: #fff
}

.agency-kpi-icon.blue {
    background: #0878f9;
    color: #fff
}

.agency-kpi-icon.amber {
    background: #ffae00;
    color: #fff
}

.agency-kpi-icon.pink {
    background: #f52268;
    color: #fff
}

.agency-kpi em {
    font-weight: 500;
    color: #7484a0
}

.agency-demo-tag {
    padding: 6px 9px;
    border-radius: 6px;
    background: #fff4d9;
    color: #a66b00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px
}

.agency-demo-tag[hidden] {
    display: none
}

.agency-revenue-chart {
    width: 100%;
    height: 162px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 1fr 22px;
    gap: 0 6px
}

.agency-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 8px;
    text-align: right;
    color: #7484a0;
    font-size: 10px
}

.agency-chart-bars {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    border-bottom: 1px solid #dae5f2;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(33.33% - 1px), #edf2f8 calc(33.33% - 1px), #edf2f8 33.33%)
}

.agency-chart-month {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px
}

.agency-bar-pair {
    height: calc(100% - 18px);
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px
}

.agency-bar-pair i {
    width: min(40%, 16px);
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: #2584f6
}

.agency-bar-pair i+i {
    background: #08b77a
}

.agency-chart-month small {
    height: 16px;
    color: #667a99;
    font-size: 10px
}

.agency-chart-caption {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: #617392;
    font-size: 10px
}

.agency-chart-caption span {
    display: flex;
    align-items: center;
    gap: 4px
}

.agency-chart-caption i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2584f6
}

.agency-chart-caption i.expense-key {
    background: #08b77a
}

.agency-chart-caption em {
    color: #a07218;
    font-style: normal
}

.agency-bottom-row {
    grid-template-columns: 1fr 1fr 1.15fr
}

.agency-mini-table-wrap {
    overflow: auto
}

.agency-mini-table {
    width: 100%;
    min-width: 340px;
    border-collapse: collapse
}

.agency-mini-table th,
.agency-mini-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #edf1f6;
    text-align: left;
    font-size: 11px;
    white-space: nowrap
}

.agency-mini-table th {
    background: #f3f7fc;
    color: #344967;
    font-weight: 700
}

.agency-mini-table td {
    color: #536887
}

.agency-mini-table td b {
    color: #182945;
    font-weight: 600
}

.agency-mini-table .agency-growth {
    color: #04a878;
    font-weight: 700
}

.agency-task-row time {
    font-size: 10px;
    color: #72839d;
    white-space: nowrap
}

.agency-activity-mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #e4f8ef;
    color: #08a872;
    font-weight: 800
}

.activity-1 {
    background: #e7f1ff;
    color: #147af0
}

.activity-2 {
    background: #fff4da;
    color: #e69d0a
}

.activity-3 {
    background: #f0e8ff;
    color: #803df2
}

@media(max-width:1180px) {
    .agency-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-chart-row {
        grid-template-columns: 1fr 1fr
    }

    .agency-chart-row>:nth-child(2) {
        grid-column: 1 / span 2;
        grid-row: 2
    }

    .agency-detail-row {
        grid-template-columns: 1.5fr 1fr
    }

    .agency-bottom-row {
        grid-template-columns: 1fr 1fr
    }

    .agency-bottom-row>:last-child {
        grid-column: 1 / span 2
    }
}

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

    .agency-welcome-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap
    }

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

    .agency-kpi {
        gap: 8px;
        padding: 10px
    }

    .agency-kpi-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px
    }

    .agency-kpi em {
        display: none
    }

    .agency-chart-row,
    .agency-detail-row,
    .agency-bottom-row {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-chart-row>:nth-child(2),
    .agency-bottom-row>:last-child {
        grid-column: auto;
        grid-row: auto
    }

    .agency-donut-content {
        justify-content: center
    }

    .agency-dash-panel {
        padding: 12px
    }

    .agency-welcome h2 {
        font-size: 23px
    }

    .agency-shortcuts {
        gap: 7px
    }

    .agency-shortcuts a {
        padding: 8px;
        font-size: 11px
    }
}

@media(max-width:420px) {
    .agency-kpi {
        align-items: flex-start;
        flex-direction: column;
        min-height: 106px
    }

    .agency-kpi small {
        white-space: normal
    }

    .agency-kpi b {
        font-size: 21px
    }

    .agency-welcome-actions>* {
        flex: 1
    }

    .agency-welcome-actions .btn {
        text-align: center
    }

    .agency-period {
        justify-content: center
    }

    .agency-donut {
        width: 120px;
        height: 120px;
        flex-basis: 120px
    }

    .agency-donut:before {
        width: 80px;
        height: 80px
    }

    .agency-donut-content {
        gap: 8px
    }

    .agency-legend {
        min-width: 106px
    }

    .agency-legend li {
        font-size: 11px
    }
}

.agency-home {
    display: grid;
    gap: 14px
}

.agency-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 2px
}

.agency-welcome h2 {
    margin: 0 0 3px;
    font: 800 27px Manrope, sans-serif;
    letter-spacing: -.5px;
    color: #0b1931
}

.agency-welcome p {
    margin: 0;
    color: #596d90;
    font-size: 14px
}

.agency-welcome-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.agency-home .btn.primary {
    background: #0867f9;
    border-color: #0867f9
}

.agency-period {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
    background: #fff;
    color: #52668a
}

.agency-period select {
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent
}

.agency-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px
}

.agency-kpi {
    min-width: 0;
    min-height: 94px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    background: #fff;
    border: 1px solid #e9eff7;
    border-radius: 10px;
    box-shadow: 0 5px 16px #183e5c0a
}

.agency-kpi-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 23px
}

.agency-kpi-icon.pink {
    background: #ffe5ef;
    color: #f12670
}

.agency-kpi>div {
    min-width: 0;
    display: grid;
    gap: 3px
}

.agency-kpi small {
    color: #617392;
    font-size: 12px;
    white-space: nowrap
}

.agency-kpi b {
    font: 800 23px Manrope, sans-serif;
    color: #101b36
}

.agency-kpi em {
    margin-left: auto;
    align-self: flex-end;
    color: #0aab78;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    text-align: right
}

.agency-dash-grid {
    display: grid;
    gap: 13px
}

.agency-chart-row {
    grid-template-columns: 1.08fr 1.18fr 1.08fr
}

.agency-detail-row {
    grid-template-columns: 2fr .95fr
}

.agency-bottom-row {
    grid-template-columns: 1.5fr 1fr
}

.agency-dash-panel {
    padding: 14px;
    min-width: 0;
    overflow: hidden
}

.agency-dash-panel .panel-title {
    margin-bottom: 10px
}

.agency-dash-panel .panel-title h3 {
    font-size: 15px;
    margin: 0
}

.agency-dash-panel .panel-title a {
    font-size: 12px
}

.agency-donut-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    min-height: 158px
}

.agency-donut {
    width: 142px;
    height: 142px;
    flex: 0 0 142px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--segments)
}

.agency-donut:before {
    content: '';
    position: absolute;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: #fff
}

.agency-donut {
    position: relative
}

.agency-donut span {
    position: relative;
    display: grid;
    text-align: center;
    gap: 1px
}

.agency-donut span b {
    font: 800 24px Manrope;
    color: #101b36
}

.agency-donut span small {
    color: #53688b;
    font-size: 12px
}

.agency-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 118px;
    display: grid;
    gap: 11px
}

.agency-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #182744;
    white-space: nowrap
}

.agency-legend li b {
    margin-left: auto;
    padding-left: 10px
}

.agency-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none
}

.agency-legend .green-dot {
    background: #0bb780
}

.agency-legend .blue-dot {
    background: #2386f5
}

.agency-legend .amber-dot {
    background: #ffb323
}

.agency-legend .red-dot {
    background: #ff505e
}

.agency-finance-empty {
    height: 158px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px
}

.agency-finance-empty>span {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e8f2ff;
    color: #087bfa;
    font-size: 21px
}

.agency-finance-empty b {
    margin-top: 7px;
    color: #172542
}

.agency-finance-empty p {
    max-width: 265px;
    margin: 4px 0;
    color: #687b99;
    font-size: 12px;
    line-height: 1.4
}

.agency-finance-empty a {
    color: #0867f9;
    font-size: 12px;
    font-weight: 700
}

.agency-dashboard-table {
    min-width: 640px
}

.agency-dashboard-table th {
    background: #f2f7fc;
    color: #1e2c47;
    font-weight: 700
}

.agency-dashboard-table th,
.agency-dashboard-table td {
    padding: 8px 9px
}

.agency-dashboard-table td {
    height: 37px
}

.agency-dashboard-table td a {
    color: #0867f9
}

.agency-dashboard-table td a b {
    font-weight: 600
}

.agency-dashboard-table td:last-child {
    min-width: 25px
}

.agency-progress {
    width: 90px;
    height: 8px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 99px;
    background: #e9eff6;
    margin-right: 6px
}

.agency-progress i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #087bfa
}

.agency-dashboard-table td small {
    font-size: 11px;
    color: #617392
}

.agency-status {
    display: inline-block;
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding: 5px 8px;
    border-radius: 6px;
    background: #e9f8f1;
    color: #078756;
    font-size: 11px;
    white-space: nowrap
}

.agency-deadline-list,
.agency-task-list {
    display: grid
}

.agency-deadline,
.agency-task-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-deadline:last-child,
.agency-task-row:last-child {
    border: 0
}

.agency-calendar {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff0ef;
    color: #ef5053;
    font-size: 16px
}

.calendar-1 {
    background: #eaf3ff;
    color: #1678ef
}

.calendar-2 {
    background: #fff5df;
    color: #eea408
}

.calendar-3 {
    background: #f2eaff;
    color: #8a4bed
}

.agency-deadline>span:nth-child(2),
.agency-task-row>span:nth-child(2) {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-deadline b,
.agency-task-row b {
    font-size: 12px;
    color: #15233e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.agency-deadline small,
.agency-task-row small {
    font-size: 11px;
    color: #687b99;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.agency-deadline time {
    font-size: 11px;
    color: #26395a;
    white-space: nowrap
}

.agency-task-mark {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e7f8f1;
    color: #0aa876;
    font-weight: 800
}

.agency-shortcuts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.agency-shortcuts a {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid #e4edf8;
    border-radius: 8px;
    color: #1469d8;
    font-size: 12px;
    font-weight: 700;
    background: #f8fbff
}

.agency-shortcuts a>span {
    font-size: 18px
}

.agency-shortcuts a b {
    margin-left: auto;
    font-size: 18px
}

.agency-home .pm-empty {
    padding: 19px 10px;
    text-align: center;
    color: #7485a0;
    font-size: 12px
}

.dark .agency-welcome h2,
.dark .agency-donut span b,
.dark .agency-dashboard-table th,
.dark .agency-kpi b,
.dark .agency-legend li,
.dark .agency-deadline b,
.dark .agency-task-row b {
    color: #e9f0f8
}

.dark .agency-donut:before {
    background: #122437
}

.dark .agency-kpi,
.dark .agency-period {
    background: #122437;
    border-color: #24384d
}

.dark .agency-dashboard-table th {
    background: #172b40
}

.dark .agency-shortcuts a {
    background: #172b40;
    border-color: #2b4158
}

@media(max-width:1180px) {
    .agency-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-chart-row {
        grid-template-columns: 1fr 1fr
    }

    .agency-chart-row>:nth-child(2) {
        grid-column: span 2
    }

    .agency-detail-row {
        grid-template-columns: 1.5fr 1fr
    }
}

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

    .agency-welcome-actions {
        width: 100%;
        justify-content: space-between
    }

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

    .agency-kpi {
        gap: 8px;
        padding: 10px
    }

    .agency-kpi-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px
    }

    .agency-kpi em {
        display: none
    }

    .agency-chart-row,
    .agency-detail-row,
    .agency-bottom-row {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-chart-row>:nth-child(2) {
        grid-column: auto
    }

    .agency-donut-content {
        justify-content: center
    }

    .agency-dash-panel {
        padding: 12px
    }

    .agency-welcome h2 {
        font-size: 23px
    }
}

.nav-group {
    border: 0;
    padding: 0;
    margin: 0
}

.nav-group summary {
    list-style: none
}

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

.nav-group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit
}

.nav-group-toggle .nav-chevron {
    margin-left: auto;
    transition: transform .15s ease
}

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

.nav-group .nav-submenu {
    margin-left: 18px
}

.nav-group .nav-submenu a {
    display: flex;
    align-items: center;
    gap: 9px
}

.nav-group .nav-submenu .nav-icon {
    width: 22px;
    font-size: 16px
}

.side-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #29435a transparent
}

.sidebar-footer {
    flex: none;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #163145
}

.sidebar-footer .nav-item {
    min-height: 42px
}

@media(max-width:1180px) {
    .agency-chart-row {
        grid-template-columns: 1fr 1fr
    }

    .agency-chart-row>:nth-child(2) {
        grid-column: 1/span 2;
        grid-row: 2
    }

    .agency-bottom-row {
        grid-template-columns: 1fr 1fr
    }

    .agency-bottom-row>:last-child {
        grid-column: 1/span 2
    }
}

@media(max-width:760px) {
    .agency-welcome-actions {
        justify-content: flex-end;
        flex-wrap: wrap
    }

    .agency-chart-row,
    .agency-detail-row,
    .agency-bottom-row {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-chart-row>:nth-child(2),
    .agency-bottom-row>:last-child {
        grid-column: auto;
        grid-row: auto
    }
}

@media(max-width:420px) {
    .agency-welcome-actions>* {
        flex: 1
    }

    .agency-welcome-actions .btn {
        text-align: center
    }

    .agency-period {
        justify-content: center
    }

    .agency-kpi {
        align-items: flex-start;
        flex-direction: column;
        min-height: 106px
    }

    .agency-kpi small {
        white-space: normal
    }

    .agency-kpi b {
        font-size: 21px
    }

    .agency-donut {
        width: 120px;
        height: 120px;
        flex-basis: 120px
    }

    .agency-donut:before {
        width: 80px;
        height: 80px
    }

    .agency-legend {
        min-width: 106px
    }

    .agency-legend li {
        font-size: 11px
    }
}

.agency-workspace {
    gap: 13px
}

.agency-module-intro {
    min-height: 76px;
    align-items: center;
    padding: 16px 19px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 11px;
    box-shadow: var(--shadow)
}

.agency-module-intro>div:first-child p {
    font-size: 14px;
    color: #586d91
}

.workspace-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    align-items: start;
    gap: 13px
}

.workspace-stats .pm-stat {
    min-height: 83px;
    padding: 14px 15px;
    background: #fff
}

.workspace-stats .pm-stat span {
    color: #637593;
    font-size: 12px
}

.workspace-stats .pm-stat b {
    color: #10203d;
    font-size: 23px
}

.workspace-panel {
    min-width: 0;
    border: 1px solid #e6edf6;
    border-radius: 11px;
    background: #fff
}

.workspace-toolbar {
    flex-wrap: wrap;
    align-items: center;
    padding: 12px;
    gap: 8px
}

.workspace-toolbar .pm-search {
    flex: 1 1 230px;
    background: #f8fbff
}

.workspace-toolbar select {
    min-width: 145px;
    max-width: 190px
}

.workspace-toolbar>.btn {
    height: 42px
}

.workspace-table {
    min-width: 900px
}

.workspace-table th {
    background: #f2f7fd;
    color: #172743;
    font-weight: 700
}

.workspace-table td {
    height: 43px
}

.workspace-table td:first-child b {
    color: #0866f8
}

.workspace-table td small {
    display: block;
    margin-top: 3px;
    color: #70819c
}

.workspace-insights {
    position: sticky;
    top: 90px;
    padding: 16px;
    border: 1px solid #e7eef7
}

.workspace-insights h3,
.finance-insight-card h3 {
    margin: 0 0 5px;
    font: 800 16px Manrope, sans-serif;
    color: #13213c
}

.workspace-insights>p {
    margin: 0;
    color: #71819a;
    font-size: 12px
}

.workspace-status-donut,
.finance-status-donut {
    position: relative;
    width: 154px;
    height: 154px;
    display: grid;
    place-content: center;
    margin: 17px auto;
    border-radius: 50%;
    background: conic-gradient(#0866f8 0 45%, #08b780 45% 72%, #ffb323 72% 90%, #ff505e 90% 100%);
    text-align: center
}

.workspace-status-donut:before,
.finance-status-donut:before {
    position: absolute;
    inset: 24px;
    content: "";
    border-radius: 50%;
    background: #fff
}

.workspace-status-donut strong,
.finance-status-donut span {
    position: relative;
    z-index: 1;
    font: 800 25px Manrope;
    color: #13213c
}

.workspace-status-donut small,
.finance-status-donut small {
    position: relative;
    z-index: 1;
    color: #6a7b98;
    font-size: 11px
}

.workspace-status-legend,
.finance-status-legend {
    display: grid;
    gap: 10px
}

.workspace-status-legend>div,
.finance-status-legend>div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4d6180;
    font-size: 12px
}

.workspace-status-legend i,
.finance-status-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none
}

.workspace-status-legend b,
.finance-status-legend b {
    margin-left: auto;
    color: #13213c
}

.workspace-insight-note {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
    background: #f3f8fe
}

.workspace-insight-note b {
    color: #253957;
    font-size: 12px
}

.workspace-insight-note span {
    font: 800 20px Manrope;
    color: #0866f8
}

.workspace-insight-note small {
    color: #73839b;
    font-size: 11px
}

.workspace-count {
    padding: 12px 15px
}

.finance-intro-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.finance-stats .pm-stat {
    position: relative;
    min-height: 91px;
    padding: 15px 17px 15px 78px
}

.finance-stats .pm-stat:before {
    position: absolute;
    left: 15px;
    top: 17px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eaf3ff;
    color: #0866f8;
    font-size: 23px;
    content: "▤"
}

.finance-stats .pm-stat:nth-child(2):before {
    background: #e3f8ee;
    color: #08a878;
    content: "◷"
}

.finance-stats .pm-stat:nth-child(3):before {
    background: #fff3d8;
    color: #e59a05;
    content: "＄"
}

.finance-stats .pm-stat {
    display: grid;
    justify-content: start;
    gap: 2px
}

.finance-stats .pm-stat b {
    font-size: 21px;
    overflow-wrap: anywhere
}

.finance-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 295px;
    align-items: start;
    gap: 13px
}

.finance-table-panel {
    min-width: 0;
    border-radius: 11px
}

.finance-toolbar {
    flex-wrap: wrap
}

.finance-toolbar input {
    min-width: 190px
}

.finance-toolbar select {
    min-width: 140px
}

.finance-insights {
    display: grid;
    gap: 13px
}

.finance-insight-card {
    padding: 16px
}

.finance-status-overview {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 9px
}

.finance-status-donut {
    width: 126px;
    height: 126px;
    margin: 12px auto
}

.finance-status-donut:before {
    inset: 20px
}

.finance-status-donut span b {
    font-size: 22px
}

.finance-status-legend {
    gap: 8px
}

.finance-status-legend>div {
    font-size: 11px;
    gap: 5px
}

.finance-recent-list {
    display: grid
}

.finance-recent-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.finance-recent-row:last-child {
    border: 0
}

.finance-recent-row>span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f7ef;
    color: #09a774;
    font-weight: 800
}

.finance-recent-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.finance-recent-row b {
    overflow: hidden;
    color: #172542;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.finance-recent-row small {
    color: #71819a;
    font-size: 10px
}

.finance-recent-row em {
    color: #586b89;
    font-size: 10px;
    font-style: normal;
    white-space: nowrap
}

.dark .workspace-insights,
.dark .workspace-insight-note,
.dark .workspace-panel,
.dark .agency-module-intro,
.dark .finance-insight-card {
    background: #122437;
    border-color: #24384d
}

.dark .workspace-status-donut:before,
.dark .finance-status-donut:before {
    background: #122437
}

.dark .workspace-insights h3,
.dark .finance-insight-card h3,
.dark .workspace-status-legend b,
.dark .finance-status-legend b,
.dark .finance-recent-row b {
    color: #e9f0f8
}

.dark .workspace-table th {
    background: #172b40
}

@media(max-width:1160px) {

    .workspace-content-grid,
    .finance-dashboard-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .workspace-insights {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1.3fr 1fr;
        align-items: center;
        gap: 8px
    }

    .workspace-insights>h3,
    .workspace-insights>p {
        grid-column: 1/-1
    }

    .workspace-status-donut {
        width: 120px;
        height: 120px;
        margin: 5px auto
    }

    .workspace-status-donut:before {
        inset: 19px
    }

    .workspace-insight-note {
        margin: 0
    }

    .finance-insights {
        grid-template-columns: 1fr 1fr
    }

    .finance-status-overview {
        grid-template-columns: 115px 1fr
    }
}

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

    .workspace-content-grid,
    .finance-dashboard-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .workspace-insights {
        grid-template-columns: 1fr 1fr
    }

    .workspace-insights>h3,
    .workspace-insights>p {
        grid-column: 1/-1
    }

    .workspace-status-donut {
        grid-row: 3
    }

    .workspace-status-legend {
        grid-row: 3
    }

    .workspace-insight-note {
        grid-column: 1/-1
    }

    .workspace-toolbar .pm-search {
        flex-basis: 100%
    }

    .workspace-toolbar select {
        flex: 1 1 130px;
        max-width: none
    }

    .workspace-toolbar>.btn {
        flex: 1
    }

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

    .finance-stats .pm-stat:last-child {
        grid-column: 1/-1
    }

    .finance-insights {
        grid-template-columns: 1fr
    }

    .finance-intro {
        align-items: flex-start
    }

    .finance-intro-actions {
        flex-wrap: wrap;
        justify-content: flex-end
    }

    .finance-status-overview {
        grid-template-columns: 130px 1fr
    }
}

@media(max-width:460px) {
    .agency-module-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px
    }

    .agency-module-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap
    }

    .workspace-insights {
        display: block
    }

    .workspace-status-donut {
        margin: 12px auto
    }

    .workspace-insight-note {
        margin-top: 12px
    }

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

    .finance-stats .pm-stat:last-child {
        grid-column: auto
    }

    .finance-intro-actions .btn {
        width: 100%
    }

    .finance-status-overview {
        grid-template-columns: 112px 1fr
    }

    .finance-status-donut {
        width: 108px;
        height: 108px
    }

    .finance-status-donut:before {
        inset: 17px
    }

    .finance-toolbar>* {
        flex: 1 1 100%;
        width: 100%
    }
}

/* Expense dashboard */
.agency-expense-dashboard {
    display: grid;
    gap: 13px
}

.agency-expense-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.agency-expense-heading h1 {
    margin: 0;
    color: #101b3d;
    font: 800 29px Manrope, sans-serif;
    letter-spacing: -.7px
}

.agency-expense-heading p {
    margin: 2px 0 0;
    color: #596e98;
    font-size: 14px
}

.agency-expense-heading>.btn {
    height: 44px;
    padding: 0 18px
}

.agency-expense-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}

.agency-expense-kpis article {
    min-width: 0;
    min-height: 93px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid #e5edf7;
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-expense-kpis article>span {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    font-size: 27px;
    font-weight: 700
}

.agency-expense-kpis .blue {
    background: #0878f9
}

.agency-expense-kpis .green {
    background: #08b780
}

.agency-expense-kpis .amber {
    background: #ffae00
}

.agency-expense-kpis .red {
    background: #f33c46
}

.agency-expense-kpis article>div {
    min-width: 0;
    display: grid;
    gap: 4px
}

.agency-expense-kpis small {
    color: #637495;
    font-size: 12px
}

.agency-expense-kpis article b {
    overflow: hidden;
    color: #101b3d;
    font: 800 22px Manrope, sans-serif;
    text-overflow: ellipsis
}

.agency-expense-kpis em {
    align-self: center;
    color: #08a878;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    text-align: right;
    white-space: nowrap
}

.agency-expense-kpis em small {
    display: block;
    margin-top: 5px;
    font-weight: 400
}

.agency-expense-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 11px;
    border: 1px solid #e5edf7;
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-expense-toolbar select,
.agency-expense-date,
.agency-expense-search {
    height: 39px;
    min-width: 0;
    border: 1px solid #d8e4f2;
    border-radius: 6px;
    background: #fff;
    color: #253858
}

.agency-expense-toolbar select {
    flex: 0 1 145px;
    padding: 0 10px;
    font-size: 12px
}

.agency-expense-date,
.agency-expense-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: #64789b
}

.agency-expense-date {
    flex: 0 1 230px
}

.agency-expense-date input {
    width: 83px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #50658a;
    font-size: 11px
}

.agency-expense-search {
    flex: 1 1 220px
}

.agency-expense-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #253858;
    font-size: 12px
}

.agency-expense-toolbar>.btn {
    height: 39px;
    white-space: nowrap
}

.agency-expense-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    align-items: start;
    gap: 12px
}

.agency-expense-records {
    min-width: 0;
    padding: 0 11px 11px;
    border-radius: 9px
}

.agency-expense-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 51px
}

.agency-expense-card-heading h2 {
    margin: 0;
    color: #15223e;
    font: 800 17px Manrope, sans-serif
}

.agency-expense-card-heading .btn {
    height: 33px;
    padding: 0 12px;
    font-size: 12px
}

.agency-expense-table {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse
}

.agency-expense-table th {
    height: 35px;
    padding: 7px 8px;
    background: #f1f7fd;
    color: #1e2c47;
    font-size: 11px;
    text-align: left;
    white-space: nowrap
}

.agency-expense-table td {
    height: 47px;
    padding: 6px 8px;
    border-bottom: 1px solid #edf1f6;
    color: #55698d;
    font-size: 11px;
    white-space: nowrap
}

.agency-expense-table th:first-child,
.agency-expense-table td:first-child {
    width: 34px
}

.agency-expense-person {
    display: flex;
    align-items: center;
    gap: 7px
}

.agency-expense-person>i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--avatar);
    color: white;
    font-size: 12px;
    font-style: normal;
    font-weight: 700
}

.agency-expense-person>span {
    display: grid;
    gap: 3px
}

.agency-expense-person b {
    color: #172542;
    font-size: 11px
}

.agency-expense-person small {
    color: #7888a3;
    font-size: 10px
}

.agency-expense-category,
.agency-expense-status {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 5px;
    background: #e6f1ff;
    color: #0874ec;
    font-size: 10px;
    font-weight: 600
}

.agency-expense-status.approved {
    background: #ddf8e9;
    color: #009361
}

.agency-expense-status.pending {
    background: #fff2d3;
    color: #dc8900
}

.agency-expense-status.rejected {
    background: #ffe5e5;
    color: #ed303c
}

.agency-expense-table .agency-invoice-menu {
    border: 0;
    background: transparent;
    color: #66799b;
    font-weight: 800;
    cursor: pointer
}

.agency-expense-footer {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #65799d;
    font-size: 12px
}

.agency-expense-footer>select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #253858
}

.agency-expense-pages {
    display: flex;
    gap: 5px
}

.agency-expense-pages button {
    min-width: 34px;
    height: 34px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #354967;
    cursor: pointer
}

.agency-expense-pages button.current {
    border-color: #0878f9;
    background: #0878f9;
    color: #fff
}

.agency-expense-pages button:disabled {
    opacity: .45;
    cursor: default
}

.agency-expense-sidebar {
    display: grid;
    gap: 10px
}

.agency-expense-widget {
    padding: 13px 15px;
    border-radius: 9px
}

.agency-expense-widget-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-expense-widget-heading h3 {
    margin: 0;
    color: #15223e;
    font: 800 15px Manrope, sans-serif
}

.agency-expense-widget-heading a,
.agency-expense-widget-heading button {
    border: 0;
    background: transparent;
    color: #0878f9;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer
}

.agency-expense-widget-heading>span {
    padding: 6px 9px;
    border: 1px solid #e0e8f3;
    border-radius: 6px;
    color: #334866;
    font-size: 10px
}

.agency-expense-category-layout {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    align-items: center;
    gap: 10px
}

.agency-expense-donut {
    position: relative;
    width: 136px;
    height: 136px;
    display: grid;
    place-items: center;
    margin: 10px auto;
    border-radius: 50%;
    background: conic-gradient(#0878f5 0 45%, #ffb323 45% 62%, #853cff 62% 76%, #ff505e 76% 85%, #08b780 85% 92%, #7185a4 92% 100%)
}

.agency-expense-donut:before {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.agency-expense-donut span {
    position: relative;
    z-index: 1;
    display: grid;
    text-align: center
}

.agency-expense-donut b {
    color: #14213e;
    font: 800 16px Manrope, sans-serif
}

.agency-expense-donut small {
    color: #6e7f9d;
    font-size: 10px
}

.agency-expense-legend {
    display: grid;
    gap: 8px
}

.agency-expense-legend>div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #344967;
    font-size: 10px
}

.agency-expense-legend i {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%
}

.agency-expense-legend b {
    margin-left: auto;
    color: #566b8e;
    font-weight: 500;
    white-space: nowrap
}

.agency-expense-monthly {
    height: 128px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 11px;
    margin: 13px 5px 5px;
    padding: 6px 2px 0;
    border-bottom: 1px solid #dce6f2;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 24%, #edf2f8 25%)
}

.agency-expense-month {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px
}

.agency-expense-stack {
    width: 22px;
    height: calc(100% - 18px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 3px 3px 0 0
}

.agency-expense-stack i {
    display: block;
    min-height: 0;
    flex: none
}

.agency-expense-stack .approved {
    background: #2584f6
}

.agency-expense-stack .pending {
    background: #ffb323
}

.agency-expense-stack .rejected {
    background: #ff505e
}

.agency-expense-month small {
    height: 14px;
    color: #71819a;
    font-size: 10px
}

.agency-expense-chart-legend {
    display: flex;
    justify-content: center;
    gap: 12px;
    color: #65799a;
    font-size: 10px
}

.agency-expense-chart-legend span {
    display: flex;
    align-items: center;
    gap: 4px
}

.agency-expense-chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2584f6
}

.agency-expense-chart-legend span:nth-child(2) i {
    background: #ffb323
}

.agency-expense-chart-legend span:nth-child(3) i {
    background: #ff505e
}

.agency-expense-activity {
    display: grid;
    margin-top: 7px
}

.agency-expense-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-expense-activity-row:last-child {
    border: 0
}

.agency-expense-activity-row>span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    color: #fff;
    font-weight: 700
}

.agency-expense-activity-row>span.approved {
    background: #08b780
}

.agency-expense-activity-row>span.pending {
    background: #ffae00
}

.agency-expense-activity-row>span.rejected {
    background: #f33c46
}

.agency-expense-activity-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-expense-activity-row b {
    overflow: hidden;
    color: #162541;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-expense-activity-row small {
    overflow: hidden;
    color: #697d9f;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-expense-activity-row time {
    color: #697d9f;
    font-size: 10px;
    white-space: nowrap
}

.dark .agency-expense-kpis article,
.dark .agency-expense-toolbar,
.dark .agency-expense-records,
.dark .agency-expense-widget {
    border-color: #24384d;
    background: #122437
}

.dark .agency-expense-heading h1,
.dark .agency-expense-kpis article b,
.dark .agency-expense-card-heading h2,
.dark .agency-expense-widget-heading h3,
.dark .agency-expense-person b,
.dark .agency-expense-activity-row b {
    color: #e9f0f8
}

.dark .agency-expense-donut:before {
    background: #122437
}

.dark .agency-expense-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-expense-table td,
.dark .agency-expense-legend>div {
    color: #a9bad0
}

.agency-expense-form-page {
    display: grid;
    gap: 14px
}

.agency-expense-form-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px
}

.agency-expense-form-heading>div:first-child>a {
    display: inline-block;
    margin-bottom: 7px;
    color: #0878f9;
    font-size: 14px
}

.agency-expense-form-heading h1 {
    margin: 0;
    color: #101b3d;
    font: 800 29px Manrope, sans-serif;
    letter-spacing: -.7px
}

.agency-expense-form-heading p {
    margin: 3px 0 0;
    color: #596e98;
    font-size: 14px
}

.agency-expense-form-heading>div:last-child {
    display: flex;
    gap: 9px
}

.agency-expense-form-heading .btn {
    height: 42px;
    padding: 0 18px
}

.agency-expense-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .72fr);
    align-items: start;
    gap: 13px
}

.agency-expense-form-main,
.agency-expense-form-side {
    min-width: 0;
    display: grid;
    gap: 12px
}

.agency-expense-form-card {
    min-width: 0;
    padding: 16px;
    border-radius: 10px
}

.agency-expense-form-card h2,
.agency-expense-form-card h3 {
    margin: 0 0 13px;
    color: #15223e;
    font: 800 16px Manrope, sans-serif
}

.agency-expense-form-card h3 {
    font-size: 15px
}

.agency-expense-fields {
    display: grid;
    gap: 14px 16px
}

.agency-expense-fields.three {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.agency-expense-fields>label,
.agency-expense-form-card>label:not(.agency-expense-upload) {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: #536a95;
    font-size: 12px;
    font-weight: 600
}

.agency-expense-fields label b {
    color: #f04452
}

.agency-expense-fields label small {
    color: #8996ae;
    font-size: 11px;
    font-weight: 400
}

.agency-expense-fields input:not([type=radio]):not([type=checkbox]),
.agency-expense-fields select,
.agency-expense-fields textarea,
.agency-expense-form-card>label input,
.agency-expense-form-card>label textarea {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #d8e4f2;
    border-radius: 6px;
    background: #fff;
    color: #253858;
    font: 500 12px 'DM Sans', sans-serif
}

.agency-expense-fields textarea,
.agency-expense-form-card>label textarea {
    height: auto;
    min-height: 74px;
    padding: 10px;
    resize: vertical
}

.agency-expense-fields .wide {
    grid-column: 1/-1
}

.agency-expense-amount-field {
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid #d8e4f2;
    border-radius: 6px;
    background: #fff
}

.agency-expense-amount-field i {
    padding: 0 11px;
    border-right: 1px solid #e4eaf2;
    color: #647897;
    font-style: normal
}

.agency-expense-amount-field input {
    flex: 1;
    border: 0 !important;
    background: transparent !important
}

.agency-expense-type {
    grid-column: 1/3;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 4px 0;
    border: 0
}

.agency-expense-type legend {
    margin-bottom: 8px;
    color: #536a95;
    font-size: 12px;
    font-weight: 600
}

.agency-expense-type label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #253858;
    font-size: 12px;
    cursor: pointer
}

.agency-expense-type input {
    position: absolute;
    opacity: 0
}

.agency-expense-type label span {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border: 2px solid #91a1ba;
    border-radius: 50%
}

.agency-expense-type input:checked+span {
    border-color: #0878f9
}

.agency-expense-type input:checked+span:after {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0878f9;
    content: ""
}

.agency-expense-upload {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px dashed #adc7e8;
    border-radius: 7px;
    background: #f8fbff;
    color: #0878f9;
    text-align: center;
    cursor: pointer
}

.agency-expense-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0
}

.agency-expense-upload>span {
    font-size: 24px
}

.agency-expense-upload b {
    font-size: 12px
}

.agency-expense-upload small {
    color: #7b8baa;
    font-size: 10px
}

.agency-expense-form .finance-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px
}

.agency-expense-form .finance-attachments>span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d8e4f2;
    border-radius: 6px;
    color: #405778;
    font-size: 11px
}

.agency-expense-form .finance-attachments button {
    border: 0;
    background: transparent;
    color: #0878f9;
    cursor: pointer
}

.agency-expense-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.agency-expense-form-actions .btn {
    height: 40px;
    padding: 0 18px
}

.agency-expense-hidden-submit {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap
}

.agency-expense-summary {
    display: grid;
    margin: 0
}

.agency-expense-summary>div {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #edf1f6
}

.agency-expense-summary>div:last-child {
    border: 0
}

.agency-expense-summary dt {
    color: #607494;
    font-size: 12px
}

.agency-expense-summary dd {
    margin: 0;
    color: #182745;
    font-size: 12px;
    font-weight: 600;
    text-align: right
}

.agency-expense-summary dd span {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 5px;
    background: #e6f1ff;
    color: #0874ec;
    font-size: 10px
}

.agency-expense-receipt-preview {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    border: 1px solid #d8e4f2;
    border-radius: 7px;
    background: linear-gradient(#fafcff, #f3f7fc);
    color: #607493;
    text-align: center
}

.agency-expense-receipt-preview>span {
    font-size: 30px;
    color: #0878f9
}

.agency-expense-receipt-preview>b {
    color: #263959;
    font-size: 13px
}

.agency-expense-receipt-preview>small {
    color: #7889a6;
    font-size: 11px
}

.agency-expense-receipt-preview img {
    max-width: 100%;
    max-height: 270px;
    object-fit: contain
}

.agency-expense-reimbursement-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #536a95;
    font-size: 12px
}

.agency-expense-reimbursement-toggle input {
    position: absolute;
    opacity: 0
}

.agency-expense-reimbursement-toggle label {
    width: 44px;
    height: 24px;
    position: relative;
    display: block;
    border-radius: 20px;
    background: #a1aac1;
    cursor: pointer
}

.agency-expense-reimbursement-toggle label i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: .2s
}

.agency-expense-reimbursement-toggle input:checked+i {
    left: 23px
}

.agency-expense-reimbursement-toggle label:has(input:checked) {
    background: #0878f9
}

.agency-expense-form-side>.agency-expense-form-card>label {
    margin-top: 12px
}

.dark .agency-expense-form-card {
    border-color: #24384d;
    background: #122437
}

.dark .agency-expense-form-heading h1,
.dark .agency-expense-form-card h2,
.dark .agency-expense-form-card h3,
.dark .agency-expense-summary dd,
.dark .agency-expense-receipt-preview>b {
    color: #e9f0f8
}

.dark .agency-expense-form-card input,
.dark .agency-expense-form-card select,
.dark .agency-expense-form-card textarea,
.dark .agency-expense-amount-field,
.dark .agency-expense-receipt-preview {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .agency-expense-type label {
    color: #dbe7f5
}

.dark .agency-expense-summary>div {
    border-color: #24384d
}

@media(max-width:1000px) {
    .agency-expense-form-layout {
        grid-template-columns: 1fr
    }

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

    .agency-expense-form-side>.agency-expense-form-card:last-child {
        grid-column: 1/-1
    }
}

@media(max-width:620px) {
    .agency-expense-form-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .agency-expense-form-heading>div:last-child {
        width: 100%
    }

    .agency-expense-form-heading>div:last-child .btn {
        flex: 1;
        padding: 0 8px
    }

    .agency-expense-form-heading h1 {
        font-size: 25px
    }

    .agency-expense-fields.three {
        grid-template-columns: 1fr
    }

    .agency-expense-type {
        grid-column: auto;
        flex-wrap: wrap
    }

    .agency-expense-fields .wide {
        grid-column: auto
    }

    .agency-expense-form-side {
        grid-template-columns: 1fr
    }

    .agency-expense-form-side>.agency-expense-form-card:last-child {
        grid-column: auto
    }

    .agency-expense-form-actions .btn {
        flex: 1
    }
}

@media(max-width:1250px) {
    .agency-expense-grid {
        grid-template-columns: minmax(0, 1fr) 310px
    }

    .agency-expense-kpis article {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 8px;
        padding: 11px
    }

    .agency-expense-kpis article>span {
        width: 50px;
        height: 50px
    }

    .agency-expense-kpis em {
        grid-column: 2;
        text-align: left;
        font-size: 11px
    }

    .agency-expense-kpis em small {
        display: inline;
        margin-left: 5px
    }
}

@media(max-width:1000px) {
    .agency-expense-grid {
        grid-template-columns: 1fr
    }

    .agency-expense-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-expense-sidebar>.agency-expense-widget:last-child {
        grid-column: 1/-1
    }

    .agency-expense-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-expense-toolbar {
        flex-wrap: wrap
    }

    .agency-expense-toolbar select {
        flex: 1 1 140px
    }

    .agency-expense-date {
        flex: 1 1 230px
    }

    .agency-expense-search {
        flex: 1 1 260px
    }
}

@media(max-width:620px) {
    .agency-expense-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .agency-expense-heading h1 {
        font-size: 25px
    }

    .agency-expense-heading>.btn {
        width: 100%
    }

    .agency-expense-kpis {
        grid-template-columns: 1fr 1fr
    }

    .agency-expense-kpis article {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 9px
    }

    .agency-expense-kpis article>span {
        width: 40px;
        height: 40px;
        font-size: 20px
    }

    .agency-expense-kpis article b {
        font-size: 16px
    }

    .agency-expense-kpis small {
        font-size: 10px
    }

    .agency-expense-kpis em {
        font-size: 10px
    }

    .agency-expense-toolbar>* {
        flex: 1 1 100% !important;
        width: 100%
    }

    .agency-expense-date {
        justify-content: space-between
    }

    .agency-expense-date input {
        width: 40%
    }

    .agency-expense-sidebar {
        grid-template-columns: 1fr
    }

    .agency-expense-sidebar>.agency-expense-widget:last-child {
        grid-column: auto
    }

    .agency-expense-category-layout {
        grid-template-columns: 130px minmax(0, 1fr)
    }

    .agency-expense-donut {
        width: 120px;
        height: 120px
    }

    .agency-expense-footer {
        flex-wrap: wrap;
        justify-content: center
    }

    .agency-expense-footer>span {
        width: 100%;
        text-align: center
    }
}

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

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

.integration-catalog-panel {
    min-width: 0;
    padding: 17px
}

.integration-catalog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px
}

.integration-catalog-heading h2 {
    margin: 0 0 4px;
    font: 800 20px Manrope, sans-serif
}

.integration-catalog-heading p,
.integration-overview>p,
.integration-help p {
    margin: 0;
    color: #6b7d99;
    font-size: 12px
}

.integration-search {
    height: 40px;
    width: min(290px, 45%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #dce7f5;
    border-radius: 8px;
    background: #f8fbff;
    color: #6c7f9c
}

.integration-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263b5d
}

.integration-filter-chips {
    display: flex;
    gap: 7px;
    overflow: auto;
    padding: 15px 0 12px;
    scrollbar-width: thin
}

.integration-filter-chips button {
    flex: none;
    padding: 7px 11px;
    border: 1px solid #e0e9f6;
    border-radius: 7px;
    background: #fff;
    color: #4d6180;
    font-size: 11px
}

.integration-filter-chips button b {
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 10px;
    background: #edf3fb;
    color: #526989
}

.integration-filter-chips button.selected {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.integration-filter-chips button.selected b {
    background: #fff3;
    color: #fff
}

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

.integration-app-card {
    min-width: 0;
    min-height: 185px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid #e4ecf7;
    border-radius: 10px;
    background: #fff
}

.integration-app-card[hidden] {
    display: none
}

.integration-app-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px
}

.integration-app-logo {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eff5fd;
    font-size: 20px;
    font-weight: 800
}

.slack-logo {
    background: #f0eaff;
    color: #7745d7
}

.drive-logo {
    background: #eaf6ee;
    color: #0e9e61
}

.trello-logo {
    background: #eaf3ff;
    color: #0873df
}

.asana-logo {
    background: #fff0f1;
    color: #ee4057
}

.books-logo {
    background: #eaf9ee;
    color: #12a05c
}

.xero-logo {
    background: #e6f7ff;
    color: #12a3cf
}

.microsoft-logo {
    background: #eef4ff;
    color: #2677df
}

.dropbox-logo {
    background: #eaf2ff;
    color: #1670e9
}

.mailchimp-logo {
    background: #fff4d7;
    color: #a47700
}

.integration-connected,
.integration-not-connected,
.integration-demo-status {
    padding: 5px 7px;
    border-radius: 20px;
    background: #e3f8ee;
    color: #078c5a;
    font-size: 10px;
    white-space: nowrap
}

.integration-not-connected {
    background: #eff2f7;
    color: #687a94
}

.integration-app-card h3 {
    margin: 9px 0 1px;
    color: #15223e;
    font: 800 14px Manrope, sans-serif
}

.integration-app-card>small {
    color: #697d9e;
    font-size: 10px
}

.integration-app-card>p {
    min-height: 34px;
    margin: 8px 0 10px;
    color: #617392;
    font-size: 11px;
    line-height: 1.45
}

.integration-app-card>.btn,
.integration-card-actions>.btn {
    margin-top: auto;
    padding: 7px 10px;
    color: #0866f8;
    font-size: 11px
}

.integration-app-card>.btn:disabled {
    opacity: .72;
    cursor: default
}

.integration-card-actions {
    width: 100%;
    display: flex;
    gap: 7px;
    margin-top: auto
}

.integration-card-actions .btn {
    flex: 1;
    text-align: center
}

.integration-card-actions .btn.primary {
    color: #fff
}

.drive-connection {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin: 0 0 6px;
    color: #526987;
    font-size: 10px
}

.drive-connection:empty {
    display: none
}

.drive-connection>div {
    display: grid;
    gap: 2px
}

.drive-connection small {
    color: #72819a
}

.integration-side {
    display: grid;
    gap: 12px
}

.integration-overview,
.integration-activity,
.integration-help {
    padding: 16px
}

.integration-overview h3,
.integration-activity h3,
.integration-help h3 {
    margin: 0 0 5px;
    color: #14233f;
    font: 800 15px Manrope, sans-serif
}

.integration-overview-chart {
    width: 142px;
    height: 142px;
    display: grid;
    place-items: center;
    margin: 15px auto;
    border-radius: 50%;
    background: conic-gradient(#08b780 0 44%, #cbd3df 44% 100%);
    position: relative
}

.integration-overview-chart:before {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.integration-overview-chart>div {
    z-index: 1;
    display: grid;
    text-align: center
}

.integration-overview-chart b {
    font: 800 23px Manrope;
    color: #14233f
}

.integration-overview-chart small {
    color: #677b9b;
    font-size: 11px
}

.integration-overview-legend {
    display: grid;
    gap: 9px
}

.integration-overview-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4f6381;
    font-size: 11px
}

.integration-overview-legend b {
    margin-left: auto;
    color: #152542
}

.integration-overview-legend i,
.connected-dot,
.warning-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #08b780
}

.integration-overview-legend span+span i {
    background: #a8b2c2
}

.integration-activity>div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f6
}

.integration-activity>div:last-child {
    border: 0
}

.integration-activity .connected-dot,
.integration-activity .warning-dot {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 11px;
    font-style: normal
}

.integration-activity .warning-dot {
    background: #ffb323
}

.integration-activity>div span {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.integration-activity b {
    color: #1a2a46;
    font-size: 11px
}

.integration-activity small,
.integration-activity time {
    color: #72819a;
    font-size: 10px
}

.integration-help .btn {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    color: #0866f8
}

.dark .integration-app-card,
.dark .integration-catalog-panel,
.dark .integration-search,
.dark .integration-filter-chips button,
.dark .integration-overview-chart:before {
    background: #122437;
    border-color: #24384d
}

.dark .integration-app-card h3,
.dark .integration-overview h3,
.dark .integration-activity h3,
.dark .integration-help h3,
.dark .integration-activity b,
.dark .integration-overview-chart b {
    color: #e9f0f8
}

@media(max-width:1120px) {
    .integration-layout {
        grid-template-columns: minmax(0, 1fr)
    }

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

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

@media(max-width:680px) {
    .integration-catalog-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .integration-search {
        width: 100%
    }

    .integration-card-grid {
        grid-template-columns: minmax(0, 1fr)
    }

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

    .integration-app-card {
        min-height: 160px
    }

    .integration-card-actions {
        margin-top: auto
    }
}

.agency-projects-page {
    display: grid;
    gap: 12px
}

.agency-projects-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.agency-projects-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 28px Manrope, sans-serif
}

.agency-projects-heading p {
    margin: 3px 0 0;
    color: #617493;
    font-size: 14px
}

.agency-projects-heading .agency-demo-tag {
    margin-left: auto
}

.agency-projects-heading .btn {
    min-height: 43px;
    padding: 0 18px;
    white-space: nowrap
}

.agency-project-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.agency-project-kpi {
    min-width: 0;
    min-height: 91px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #e8eef6;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-kpi-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 9px;
    color: #fff;
    font-size: 28px
}

.agency-kpi-icon.blue {
    background: linear-gradient(145deg, #1481ff, #0861ec)
}

.agency-kpi-icon.green {
    background: linear-gradient(145deg, #11c181, #00a46d)
}

.agency-kpi-icon.amber {
    background: linear-gradient(145deg, #ffc329, #f5a900)
}

.agency-kpi-icon.red {
    background: linear-gradient(145deg, #ff575b, #f43c43)
}

.agency-project-kpi>div {
    display: grid;
    gap: 2px;
    min-width: 0
}

.agency-project-kpi small {
    color: #627596;
    font-size: 12px;
    white-space: nowrap
}

.agency-project-kpi>div>b {
    color: #111d3c;
    font: 800 24px Manrope, sans-serif
}

.agency-project-kpi em {
    display: grid;
    gap: 2px;
    margin-left: auto;
    color: #08ac76;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
    white-space: nowrap
}

.agency-project-kpi em small {
    font-size: 10px;
    font-weight: 400
}

.agency-project-kpi em.negative {
    color: #f2393f
}

.agency-project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 12px
}

.agency-project-table-panel {
    min-width: 0;
    padding: 0;
    overflow: hidden
}

.agency-project-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 11px 12px;
    border-bottom: 1px solid #edf1f7
}

.agency-project-tabs {
    display: flex;
    gap: 5px;
    max-width: 100%;
    overflow-x: auto
}

.agency-project-tabs button {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 0 13px;
    border: 1px solid #e1e9f4;
    border-radius: 7px;
    background: #fff;
    color: #253754;
    font-size: 11px;
    font-weight: 650
}

.agency-project-tabs button b {
    font-weight: 500;
    color: #667994
}

.agency-project-tabs button.active {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-project-tabs button.active b {
    color: #fff
}

.agency-project-search {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 155px;
    padding: 0 10px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #fbfdff;
    color: #6a7e9b
}

.agency-project-search>span {
    font-size: 21px;
    line-height: 1
}

.agency-project-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263b5d;
    font-size: 11px
}

.agency-project-search input::placeholder {
    color: #8190a8
}

.agency-filter-button {
    height: 38px;
    padding: 0 12px;
    font-size: 11px
}

.agency-project-status-filter {
    display: none;
    height: 37px;
    padding: 0 9px;
    border: 1px solid #d9e4f2;
    border-radius: 7px;
    background: #fff;
    color: #344b6b;
    font-size: 11px
}

.agency-project-status-filter.filter-open {
    display: block
}

.agency-project-table {
    width: 100%;
    min-width: 930px;
    border-collapse: collapse
}

.agency-project-table th {
    height: 40px;
    padding: 0 9px;
    background: #f3f7fc;
    color: #253754;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-project-table td {
    height: 51px;
    padding: 5px 9px;
    border-bottom: 1px solid #edf1f6;
    color: #576b8b;
    font-size: 10px;
    white-space: nowrap
}

.agency-project-table tr:last-child td {
    border-bottom: 0
}

.agency-project-table th:first-child,
.agency-project-table td:first-child {
    width: 34px;
    padding-left: 14px
}

.agency-project-table input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #0866f8
}

.agency-project-name,
.agency-project-person {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0
}

.agency-project-name>div,
.agency-project-person>div {
    display: grid;
    gap: 3px;
    min-width: 0
}

.agency-project-name b {
    display: block;
    max-width: 145px;
    overflow: hidden;
    color: #13213d;
    font-size: 10px;
    text-overflow: ellipsis
}

.agency-project-name small {
    color: #697e9d;
    font-size: 9px
}

.agency-project-symbol {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    background: #e9f3ff;
    color: #087bfb;
    font-size: 18px
}

.agency-project-symbol.color-1,
.agency-avatar.color-1 {
    background: #ffedea;
    color: #f24b50
}

.agency-project-symbol.color-2,
.agency-avatar.color-2 {
    background: #f1eaff;
    color: #873aff
}

.agency-project-symbol.color-3,
.agency-avatar.color-3 {
    background: #e5faf1;
    color: #08a96f
}

.agency-project-symbol.color-4,
.agency-avatar.color-4 {
    background: #fff4dc;
    color: #e99700
}

.agency-project-symbol.color-5,
.agency-avatar.color-5 {
    background: #e8f4ff;
    color: #0866f8
}

.agency-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #0866f8;
    color: #fff;
    font-size: 9px;
    font-weight: 800
}

.agency-avatar.color-0 {
    background: #0866f8;
    color: white
}

.agency-avatar.color-1 {
    background: #ff781a;
    color: white
}

.agency-avatar.color-2 {
    background: #ff505e;
    color: white
}

.agency-avatar.color-3 {
    background: #08a878;
    color: white
}

.agency-avatar.color-4 {
    background: #853cff;
    color: white
}

.agency-avatar.color-5 {
    background: #ffb323;
    color: white
}

.agency-avatar.client-avatar {
    width: 29px;
    height: 29px;
    font-size: 11px
}

.agency-avatar.manager-avatar {
    width: 29px;
    height: 29px;
    font-size: 9px
}

.agency-project-person {
    gap: 7px
}

.agency-project-person b {
    max-width: 90px;
    overflow: hidden;
    color: #1268e8;
    font-size: 10px;
    font-weight: 500;
    text-overflow: ellipsis
}

.agency-project-progress {
    display: flex;
    align-items: center;
    gap: 7px
}

.agency-project-progress>span {
    width: 65px;
    height: 9px;
    overflow: hidden;
    border-radius: 7px;
    background: #eaf0f7
}

.agency-project-progress i {
    display: block;
    height: 100%;
    border-radius: 7px
}

.agency-project-progress>b {
    color: #496081;
    font-size: 10px;
    font-weight: 500
}

.agency-project-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 65px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #e1f8ee;
    color: #078356;
    font-size: 10px
}

.agency-project-status.on-hold {
    background: #fff3d6;
    color: #a06d00
}

.agency-project-status.in-review {
    background: #e7f1ff;
    color: #0967d7
}

.agency-project-status.completed {
    background: #e5f8ee;
    color: #00966c
}

.agency-row-menu {
    border: 0;
    background: transparent;
    color: #52698b;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer
}

.agency-project-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.agency-project-actions .agency-project-view {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    place-items: center;
    border: 1px solid #d7e3f2;
    border-radius: 8px;
    background: #fff;
    color: #536987
}

.agency-project-actions .agency-inline-edit,
.agency-project-actions .agency-inline-delete {
    min-height: 28px;
    padding: 7px 11px;
    white-space: nowrap
}

.agency-project-actions .agency-project-view svg {
    display: block;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

body[data-page='project-planning'] .agency-projects-page .agency-project-table th:last-child {
    width: 190px;
    min-width: 190px;
    text-align: center
}

body[data-page='project-planning'] .agency-projects-page .agency-project-table td:last-child {
    width: 190px;
    min-width: 190px;
    text-align: center
}

.agency-project-pagination {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 13px;
    color: #617493;
    font-size: 11px
}

.agency-project-pagination>div {
    display: flex;
    gap: 5px
}

.agency-project-pagination button,
.agency-project-pagination select {
    height: 34px;
    min-width: 34px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #182849
}

.agency-project-pagination button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-project-pagination select {
    padding: 0 10px;
    font-size: 10px
}

.agency-project-sidebar {
    display: grid;
    gap: 12px
}

.agency-project-sidecard {
    min-width: 0;
    padding: 14px
}

.agency-project-sidecard h3 {
    margin: 0;
    color: #15223e;
    font: 800 14px Manrope, sans-serif
}

.agency-project-status-overview {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 10px
}

.agency-project-donut {
    width: 130px;
    height: 130px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(#08b780 0 66%, #ffb323 66% 83%, #3985ff 83% 91%, #ff505e 91% 100%)
}

.agency-project-donut:before {
    position: absolute;
    inset: 21px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.agency-project-donut>span {
    z-index: 1;
    display: grid;
    text-align: center
}

.agency-project-donut b {
    color: #14213d;
    font: 800 22px Manrope, sans-serif
}

.agency-project-donut small {
    color: #607493;
    font-size: 10px
}

.agency-project-legend {
    display: grid;
    gap: 12px
}

.agency-project-legend>div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263a5b;
    font-size: 10px;
    white-space: nowrap
}

.agency-project-legend i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%
}

.agency-project-legend b {
    margin-left: auto;
    color: #526987;
    font-weight: 500
}

.agency-side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-side-title a {
    color: #0866f8;
    font-size: 10px;
    text-decoration: none;
    white-space: nowrap
}

.agency-deadline-list,
.agency-manager-list {
    display: grid;
    margin-top: 8px
}

.agency-deadline-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-deadline-row:last-child,
.agency-manager-row:last-child {
    border-bottom: 0
}

.agency-deadline-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    background: #ffeded;
    color: #fb4047;
    font-size: 16px
}

.agency-deadline-icon.color-1 {
    background: #e9f2ff;
    color: #1377ef
}

.agency-deadline-icon.color-2 {
    background: #fff4d8;
    color: #e69a00
}

.agency-deadline-icon.color-3 {
    background: #f1eaff;
    color: #8139ef
}

.agency-deadline-icon.color-4 {
    background: #e4f8ee;
    color: #08a878
}

.agency-deadline-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-deadline-row b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-deadline-row small,
.agency-deadline-row time {
    color: #657a9a;
    font-size: 9px;
    white-space: nowrap
}

.agency-manager-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-manager-row>div {
    min-width: 70px;
    display: grid;
    gap: 3px
}

.agency-manager-row>div b {
    color: #1c2d4b;
    font-size: 10px
}

.agency-manager-row>div small {
    color: #71819b;
    font-size: 9px
}

.agency-manager-row>i {
    height: 9px;
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #eaf0f7
}

.agency-manager-row>i span {
    height: 100%;
    display: block;
    border-radius: 8px
}

.agency-manager-row>em {
    width: 25px;
    color: #637795;
    font-size: 9px;
    font-style: normal;
    text-align: right
}

.dark .agency-project-kpi,
.dark .agency-project-table-panel,
.dark .agency-project-sidecard {
    border-color: #24384d;
    background: #122437
}

.dark .agency-projects-heading h1,
.dark .agency-project-kpi>div>b,
.dark .agency-project-name b,
.dark .agency-project-sidecard h3,
.dark .agency-project-donut b,
.dark .agency-deadline-row b,
.dark .agency-manager-row>div b {
    color: #e9f0f8
}

.dark .agency-project-donut:before {
    background: #122437
}

.dark .agency-project-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-project-table td {
    border-color: #24384d
}

.dark .agency-project-toolbar {
    border-color: #24384d
}

.dark .agency-project-tabs button,
.dark .agency-project-status-filter,
.dark .agency-project-pagination button,
.dark .agency-project-pagination select {
    background: #172b40;
    border-color: #2b4056;
    color: #dbe7f5
}

@media(max-width:1260px) {
    .agency-project-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-project-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-project-status-overview {
        grid-template-columns: 105px minmax(0, 1fr)
    }

    .agency-project-donut {
        width: 105px;
        height: 105px
    }

    .agency-project-donut:before {
        inset: 17px
    }

    .agency-project-legend {
        gap: 8px
    }
}

@media(max-width:900px) {
    .agency-project-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-project-toolbar {
        align-items: stretch
    }

    .agency-project-tabs {
        width: 100%
    }

    .agency-project-search {
        flex-basis: calc(100% - 105px)
    }

    .agency-project-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-project-sidecard:first-child {
        grid-column: 1/-1
    }

    .agency-project-status-overview {
        grid-template-columns: 140px minmax(0, 1fr)
    }

    .agency-project-donut {
        width: 130px;
        height: 130px
    }

    .agency-project-donut:before {
        inset: 21px
    }
}

@media(max-width:600px) {
    .agency-projects-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-projects-heading h1 {
        font-size: 24px
    }

    .agency-projects-heading p {
        max-width: 290px;
        font-size: 12px
    }

    .agency-projects-heading .agency-demo-tag {
        order: 3;
        margin-left: 0
    }

    .agency-projects-heading .btn {
        margin-left: auto;
        padding: 0 11px
    }

    .agency-project-kpis {
        gap: 7px
    }

    .agency-project-kpi {
        min-height: 76px;
        gap: 8px;
        padding: 9px
    }

    .agency-kpi-icon {
        width: 39px;
        height: 39px;
        font-size: 20px
    }

    .agency-project-kpi small {
        font-size: 10px
    }

    .agency-project-kpi>div>b {
        font-size: 19px
    }

    .agency-project-kpi em {
        font-size: 12px
    }

    .agency-project-kpi em small {
        font-size: 8px
    }

    .agency-project-toolbar {
        padding: 9px
    }

    .agency-project-tabs button {
        height: 34px;
        padding: 0 9px;
        font-size: 10px
    }

    .agency-project-search {
        flex-basis: 100%
    }

    .agency-filter-button {
        flex: 1
    }

    .agency-project-status-filter.filter-open {
        flex: 1
    }

    .agency-project-sidebar {
        grid-template-columns: 1fr
    }

    .agency-project-sidecard:first-child {
        grid-column: auto
    }

    .agency-project-status-overview {
        grid-template-columns: 130px minmax(0, 1fr)
    }

    .agency-project-donut {
        width: 120px;
        height: 120px
    }

    .agency-project-donut:before {
        inset: 20px
    }

    .agency-project-pagination {
        flex-wrap: wrap
    }

    .agency-project-pagination>span {
        flex-basis: 100%
    }

    .agency-project-pagination select {
        margin-left: auto
    }
}

.agency-tasks-page {
    display: grid;
    gap: 12px
}

.agency-tasks-heading {
    display: flex;
    align-items: center;
    gap: 14px
}

.agency-tasks-heading>div:first-child {
    margin-right: auto
}

.agency-tasks-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 28px Manrope, sans-serif
}

.agency-tasks-heading p {
    margin: 3px 0 0;
    color: #617493;
    font-size: 14px
}

.agency-tasks-heading .btn {
    min-height: 43px;
    padding: 0 18px;
    background: linear-gradient(120deg, #0866f8, #0753e9);
    border-color: #0866f8;
    white-space: nowrap
}

.agency-task-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px
}

.agency-task-kpi {
    min-width: 0;
    min-height: 91px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #e8eef6;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-task-kpi-icon {
    width: 57px;
    height: 57px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 9px;
    color: white;
    font-size: 32px;
    font-weight: 700
}

.agency-task-kpi-icon.blue {
    background: linear-gradient(140deg, #1186ff, #0861eb)
}

.agency-task-kpi-icon.green {
    background: linear-gradient(140deg, #10bd7e, #00a16d)
}

.agency-task-kpi-icon.amber {
    background: linear-gradient(140deg, #ffc02d, #f4a800)
}

.agency-task-kpi-icon.red {
    background: linear-gradient(140deg, #ff555a, #f43b43)
}

.agency-task-kpi>div {
    min-width: 0;
    display: grid;
    gap: 2px
}

.agency-task-kpi>div small {
    color: #627596;
    font-size: 12px;
    white-space: nowrap
}

.agency-task-kpi>div b {
    color: #101d3c;
    font: 800 24px Manrope, sans-serif
}

.agency-task-kpi em {
    display: grid;
    gap: 2px;
    margin-left: auto;
    color: #08aa75;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
    white-space: nowrap
}

.agency-task-kpi em small {
    color: #627596;
    font-size: 10px;
    font-weight: 400
}

.agency-task-kpi em.negative {
    color: #fa4148
}

.agency-task-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 12px
}

.agency-task-table-panel {
    min-width: 0;
    padding: 0;
    overflow: hidden
}

.agency-task-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 12px;
    border-bottom: 1px solid #edf1f7
}

.agency-task-toolbar select {
    height: 39px;
    min-width: 120px;
    flex: 1 1 115px;
    padding: 0 10px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #fff;
    color: #182849;
    font-size: 11px
}

.agency-task-search {
    height: 39px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1.4 1 190px;
    min-width: 145px;
    padding: 0 10px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #f9fbfe;
    color: #637897
}

.agency-task-search>span {
    font-size: 21px;
    line-height: 1
}

.agency-task-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263b5d;
    font-size: 11px
}

.agency-task-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse
}

.agency-task-table th {
    height: 40px;
    padding: 0 9px;
    background: #f3f7fc;
    color: #253754;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-task-table td {
    height: 47px;
    padding: 5px 9px;
    border-bottom: 1px solid #edf1f6;
    color: #536887;
    font-size: 10px;
    white-space: nowrap
}

.agency-task-table tr:last-child td {
    border-bottom: 0
}

.agency-task-table th:first-child,
.agency-task-table td:first-child {
    width: 35px;
    padding-left: 14px
}

.agency-task-table input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #0866f8
}

.agency-task-name {
    display: grid;
    gap: 3px;
    max-width: 168px
}

.agency-task-name b {
    overflow: hidden;
    color: #0866f8;
    font-size: 10px;
    text-overflow: ellipsis
}

.agency-task-name small {
    overflow: hidden;
    color: #687d9d;
    font-size: 9px;
    text-overflow: ellipsis
}

.agency-task-person {
    display: flex;
    align-items: center;
    gap: 7px
}

.agency-task-person>span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #0866f8;
    color: #fff;
    font-size: 9px;
    font-weight: 800
}

.agency-task-person>span.tone-1 {
    background: #6330dc
}

.agency-task-person>span.tone-2 {
    background: #f3444b
}

.agency-task-person>span.tone-3 {
    background: #8a28dc
}

.agency-task-person>span.tone-4 {
    background: #0da678
}

.agency-task-person b {
    color: #263a5b;
    font-size: 10px;
    font-weight: 500
}

.agency-task-priority {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 5px;
    background: #ffeded;
    color: #ef343a;
    font-size: 10px
}

.agency-task-priority.medium,
.agency-task-priority.normal {
    background: #fff3d6;
    color: #e49a00
}

.agency-task-priority.low {
    background: #e4f0ff;
    color: #0873e8
}

.agency-task-status {
    display: inline-flex;
    min-width: 64px;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 5px;
    background: #dff7ed;
    color: #08a169;
    font-size: 10px
}

.agency-task-status.in-progress {
    background: #e1efff;
    color: #0873ed
}

.agency-task-status.pending {
    background: #edf2f8;
    color: #536987
}

.agency-task-status.overdue {
    background: #ffeded;
    color: #f23c43
}

.agency-task-progress {
    display: flex;
    align-items: center;
    gap: 8px
}

.agency-task-progress b {
    width: 28px;
    color: #536987;
    font-size: 10px;
    font-weight: 500
}

.agency-task-progress span {
    width: 70px;
    height: 9px;
    overflow: hidden;
    border-radius: 8px;
    background: #e9eff7
}

.agency-task-progress i {
    height: 100%;
    display: block;
    border-radius: 8px;
    background: #0866f8
}

.agency-task-table td.is-overdue {
    color: #ed343c
}

.agency-task-menu {
    padding: 5px;
    border: 0;
    background: none;
    color: #455f83;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer
}

.agency-task-pagination {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 13px;
    color: #617493;
    font-size: 11px
}

.agency-task-pagination>div {
    display: flex;
    gap: 5px
}

.agency-task-pagination button,
.agency-task-pagination select {
    height: 34px;
    min-width: 34px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #182849
}

.agency-task-pagination button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-task-pagination select {
    padding: 0 10px;
    font-size: 10px
}

.agency-task-sidebar {
    display: grid;
    gap: 12px
}

.agency-task-sidecard {
    min-width: 0;
    padding: 15px
}

.agency-task-sidecard h3 {
    margin: 0;
    color: #15223e;
    font: 800 15px Manrope, sans-serif
}

.agency-task-breakdown {
    display: grid;
    grid-template-columns: 137px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 9px
}

.agency-task-donut {
    width: 137px;
    height: 137px;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(#08b780 0 43%, #2386f5 43% 71%, #ffb323 71% 89%, #ff505e 89% 100%)
}

.agency-task-donut:before {
    position: absolute;
    inset: 21px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.agency-task-donut>span {
    z-index: 1;
    display: grid;
    text-align: center
}

.agency-task-donut b {
    color: #14213d;
    font: 800 21px Manrope, sans-serif
}

.agency-task-donut small {
    color: #607493;
    font-size: 10px
}

.agency-task-legend {
    display: grid;
    gap: 12px
}

.agency-task-legend>div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263a5b;
    font-size: 10px;
    white-space: nowrap
}

.agency-task-legend i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%
}

.agency-task-legend b {
    margin-left: auto;
    color: #526987;
    font-weight: 500
}

.agency-task-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-task-side-heading a {
    color: #0866f8;
    font-size: 10px;
    white-space: nowrap
}

.agency-task-deadlines,
.agency-task-activity {
    display: grid;
    margin-top: 7px
}

.agency-task-deadline,
.agency-task-activity-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-task-deadline:last-child,
.agency-task-activity-row:last-child {
    border: 0
}

.agency-task-calendar,
.agency-task-activity-row>span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    background: #ffeded;
    color: #f43c44;
    font-size: 16px
}

.agency-task-calendar.tone-1 {
    background: #e8f2ff;
    color: #0873ef
}

.agency-task-calendar.tone-2 {
    background: #fff3d6;
    color: #e69a00
}

.agency-task-calendar.tone-3 {
    background: #f1eaff;
    color: #863aff
}

.agency-task-deadline>div,
.agency-task-activity-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-task-deadline b,
.agency-task-activity-row b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-task-deadline small,
.agency-task-activity-row small {
    overflow: hidden;
    color: #657a9a;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-task-deadline time,
.agency-task-activity-row time {
    color: #586d8d;
    font-size: 9px;
    text-align: right;
    white-space: nowrap
}

.agency-task-deadline time small {
    display: block;
    margin-top: 3px;
    text-align: right
}

.agency-task-deadline time small:first-child {
    color: #637897
}

.agency-task-deadline:has(time small:first-child) {
    color: inherit
}

.agency-task-activity-row>span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff
}

.agency-task-activity-row>span.tone-green {
    background: #08ae77
}

.agency-task-activity-row>span.tone-blue {
    background: #0878f5
}

.agency-task-activity-row>span.tone-amber {
    background: #ffb323
}

.agency-task-activity-row>span.tone-purple {
    background: #853cff
}

.agency-tasks-page .btn.primary {
    background: linear-gradient(120deg, #0866f8, #0753e9);
    border-color: #0866f8
}

.dark .agency-task-kpi,
.dark .agency-task-table-panel,
.dark .agency-task-sidecard {
    border-color: #24384d;
    background: #122437
}

.dark .agency-tasks-heading h1,
.dark .agency-task-kpi>div>b,
.dark .agency-task-sidecard h3,
.dark .agency-task-donut b,
.dark .agency-task-deadline b,
.dark .agency-task-activity-row b {
    color: #e9f0f8
}

.dark .agency-task-donut:before {
    background: #122437
}

.dark .agency-task-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-task-table td {
    border-color: #24384d
}

.dark .agency-task-toolbar {
    border-color: #24384d
}

.dark .agency-task-toolbar select,
.dark .agency-task-search,
.dark .agency-task-pagination button,
.dark .agency-task-pagination select {
    background: #172b40;
    border-color: #2b4056;
    color: #dbe7f5
}

@media(max-width:1220px) {
    .agency-task-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-task-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:900px) {
    .agency-task-toolbar select {
        flex: 1 1 30%
    }

    .agency-task-search {
        flex-basis: 40%
    }

    .agency-task-breakdown {
        grid-template-columns: 105px minmax(0, 1fr)
    }

    .agency-task-donut {
        width: 105px;
        height: 105px
    }

    .agency-task-donut:before {
        inset: 17px
    }

    .agency-task-legend {
        gap: 8px
    }
}

@media(max-width:620px) {
    .agency-tasks-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-tasks-heading h1 {
        font-size: 24px
    }

    .agency-tasks-heading p {
        font-size: 12px
    }

    .agency-tasks-heading .btn {
        margin-left: auto;
        padding: 0 11px
    }

    .agency-tasks-heading .agency-demo-tag {
        order: 3
    }

    .agency-task-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }

    .agency-task-kpi {
        min-height: 73px;
        gap: 8px;
        padding: 8px
    }

    .agency-task-kpi-icon {
        width: 38px;
        height: 38px;
        font-size: 21px
    }

    .agency-task-kpi>div small {
        font-size: 9px
    }

    .agency-task-kpi>div b {
        font-size: 19px
    }

    .agency-task-kpi em {
        font-size: 11px
    }

    .agency-task-kpi em small {
        font-size: 8px
    }

    .agency-task-toolbar {
        gap: 7px;
        padding: 9px
    }

    .agency-task-toolbar select {
        flex: 1 1 calc(50% - 5px);
        min-width: 0
    }

    .agency-task-search {
        flex-basis: 100%
    }

    .agency-task-sidebar {
        grid-template-columns: 1fr
    }

    .agency-task-breakdown {
        grid-template-columns: 130px minmax(0, 1fr)
    }

    .agency-task-donut {
        width: 120px;
        height: 120px
    }

    .agency-task-donut:before {
        inset: 20px
    }

    .agency-task-pagination {
        flex-wrap: wrap
    }

    .agency-task-pagination>span {
        flex-basis: 100%
    }

    .agency-task-pagination select {
        margin-left: auto
    }
}

.agency-client-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.agency-client-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 28px Manrope, sans-serif
}

.agency-client-heading p {
    margin: 3px 0 0;
    color: #617493;
    font-size: 14px
}

.agency-client-heading .agency-module-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.agency-client-heading .btn.primary {
    min-height: 43px;
    padding: 0 17px;
    border-color: #0866f8;
    background: linear-gradient(120deg, #0866f8, #0753e9)
}

.agency-client-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-top: 13px
}

.agency-client-kpi {
    min-width: 0;
    min-height: 97px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #e8eef6;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-client-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 9px;
    color: white;
    font-size: 28px;
    font-weight: 700
}

.agency-client-icon.blue {
    background: linear-gradient(145deg, #1890ff, #0871f5)
}

.agency-client-icon.green {
    background: linear-gradient(145deg, #10c387, #00a66f)
}

.agency-client-icon.purple {
    background: linear-gradient(145deg, #913dff, #6b20e9)
}

.agency-client-icon.amber {
    background: linear-gradient(145deg, #ffbf23, #f5a900)
}

.agency-client-kpi>div {
    min-width: 0;
    display: grid;
    gap: 2px
}

.agency-client-kpi>div small {
    color: #647796;
    font-size: 12px;
    white-space: nowrap
}

.agency-client-kpi>div b {
    color: #111d3c;
    font: 800 23px Manrope, sans-serif
}

.agency-client-kpi em {
    display: grid;
    gap: 2px;
    margin-left: auto;
    color: #08ae77;
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
    white-space: nowrap
}

.agency-client-kpi em small {
    color: #647796;
    font-size: 10px;
    font-weight: 400
}

.agency-client-kpi em.negative {
    color: #f24047
}

.agency-client-kpi.revenue {
    position: relative;
    padding-right: 118px
}

.agency-client-kpi.revenue>label {
    position: absolute;
    top: 14px;
    right: 12px;
    padding: 8px 10px;
    border: 1px solid #e0e8f4;
    border-radius: 6px;
    color: #243955;
    font-size: 10px
}

.agency-client-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 12px;
    margin-top: 13px
}

.agency-client-main {
    min-width: 0;
    padding: 0;
    overflow: hidden
}

.agency-client-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 11px;
    border-bottom: 1px solid #edf1f7
}

.agency-client-toolbar>select {
    height: 38px;
    min-width: 115px;
    flex: 1 1 120px;
    padding: 0 10px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #fff;
    color: #1c3152;
    font-size: 11px
}

.agency-client-search {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1.3 1 170px;
    min-width: 140px;
    padding: 0 10px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #f9fbfe;
    color: #667b9b
}

.agency-client-search>span {
    font-size: 21px
}

.agency-client-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263b5d;
    font-size: 11px
}

.agency-client-table {
    width: 100%;
    min-width: 770px;
    border-collapse: collapse
}

.agency-client-table th {
    height: 40px;
    padding: 0 9px;
    background: #f3f7fc;
    color: #253754;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-client-table td {
    height: 47px;
    padding: 5px 9px;
    border-bottom: 1px solid #edf1f6;
    color: #526888;
    font-size: 10px;
    white-space: nowrap
}

.agency-client-table tr:last-child td {
    border: 0
}

.agency-client-table th:first-child,
.agency-client-table td:first-child {
    width: 35px;
    padding-left: 14px
}

.agency-client-table input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #0866f8
}

.agency-client-name,
.agency-client-contact {
    display: flex;
    align-items: center;
    gap: 9px
}

.agency-client-name>b {
    color: #0866f8;
    font-size: 10px;
    font-weight: 500
}

.agency-client-mark {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 6px;
    background: #0866f8;
    color: white;
    font-size: 14px
}

.agency-client-mark.color-1 {
    background: #fa403e
}

.agency-client-mark.color-2 {
    background: #08a77a
}

.agency-client-mark.color-3 {
    background: #8033e9
}

.agency-client-mark.color-4 {
    background: #f53c3d
}

.agency-client-mark.color-5 {
    background: #0866f8
}

.agency-client-contact {
    display: grid;
    gap: 3px
}

.agency-client-contact b {
    color: #182a48;
    font-size: 10px;
    font-weight: 500
}

.agency-client-contact small {
    color: #667b9b;
    font-size: 9px
}

.agency-client-status {
    display: inline-flex;
    min-width: 59px;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 5px;
    background: #dcf8ea;
    color: #049761;
    font-size: 10px
}

.agency-client-status.on-hold {
    background: #e4f0ff;
    color: #0872e8
}

.agency-client-status.prospect {
    background: #fff3d6;
    color: #e89a00
}

.agency-client-status.inactive {
    background: #ffeded;
    color: #ed353d
}

.agency-client-actions button {
    border: 0;
    background: transparent;
    color: #253e61;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer
}

.agency-client-layout .workspace-count {
    margin: 0;
    padding: 7px 12px 0;
    color: #617493
}

.agency-client-pagination {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px 10px;
    color: #617493;
    font-size: 10px
}

.agency-client-pagination>div {
    display: flex;
    gap: 5px
}

.agency-client-pagination button,
.agency-client-pagination select {
    height: 33px;
    min-width: 33px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #182849
}

.agency-client-pagination button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: white
}

.agency-client-pagination select {
    padding: 0 9px;
    font-size: 10px
}

.agency-client-export {
    display: none
}

.agency-client-sidebar {
    display: grid;
    gap: 12px
}

.agency-client-sidecard {
    min-width: 0;
    padding: 14px
}

.agency-client-side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-client-side-title h3 {
    margin: 0;
    color: #15223e;
    font: 800 14px Manrope, sans-serif
}

.agency-client-side-title>a {
    color: #0866f8;
    font-size: 10px;
    white-space: nowrap
}

.agency-client-side-title select {
    padding: 6px 8px;
    border: 1px solid #e0e8f4;
    border-radius: 6px;
    background: #fff;
    color: #334766;
    font-size: 10px
}

.agency-growth-chart {
    height: 142px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 6px;
    margin-top: 9px
}

.agency-growth-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    color: #687d9d;
    font-size: 9px
}

.agency-growth-plot {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 7px 21px
}

.agency-growth-grid {
    position: absolute;
    inset: 1px 0 22px;
    background: repeating-linear-gradient(to bottom, transparent 0 calc(25% - 1px), #edf2f8 calc(25% - 1px) 25%);
    border-bottom: 1px solid #dce6f2
}

.agency-growth-plot svg {
    position: absolute;
    left: 3%;
    top: 5%;
    z-index: 2;
    width: 94%;
    height: 76%;
    overflow: visible
}

.agency-growth-bars {
    position: absolute;
    inset: 12px 7px 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around
}

.agency-growth-bars i {
    z-index: 1;
    width: 9%;
    max-width: 25px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #3c94ff, #1676f5)
}

.agency-growth-months {
    position: absolute;
    inset: auto 1px 0;
    display: flex;
    justify-content: space-around;
    color: #637997;
    font-size: 9px
}

.agency-growth-legend {
    display: flex;
    justify-content: center;
    gap: 17px;
    color: #526784;
    font-size: 10px
}

.agency-growth-legend span {
    display: flex;
    align-items: center;
    gap: 5px
}

.agency-growth-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1676f5
}

.agency-growth-legend span+span i {
    background: #08b780
}

.agency-industry-list {
    display: grid;
    gap: 11px;
    margin-top: 13px
}

.agency-industry-row {
    display: grid;
    grid-template-columns: 92px minmax(35px, 1fr) 20px 30px;
    align-items: center;
    gap: 7px;
    color: #526784;
    font-size: 10px
}

.agency-industry-row>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-industry-row>i {
    height: 10px;
    overflow: hidden;
    border-radius: 7px;
    background: #eaf0f7
}

.agency-industry-row>i b {
    height: 100%;
    display: block;
    border-radius: 7px
}

.agency-industry-row>small,
.agency-industry-row>em {
    text-align: right;
    color: #637997;
    font-size: 9px;
    font-style: normal
}

.agency-client-activity {
    display: grid;
    margin-top: 6px
}

.agency-client-activity-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-client-activity-row:last-child {
    border: 0
}

.agency-client-activity-row>span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #08ae77;
    color: #fff;
    font-size: 15px
}

.agency-client-activity-row>span.blue {
    background: #0878f5
}

.agency-client-activity-row>span.purple {
    background: #853cff
}

.agency-client-activity-row>span.amber {
    background: #ffad08
}

.agency-client-activity-row>span.red {
    background: #f43b45
}

.agency-client-activity-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-client-activity-row b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-client-activity-row small,
.agency-client-activity-row time {
    color: #657a9a;
    font-size: 9px
}

.agency-client-activity-row time {
    white-space: nowrap
}

.dark .agency-client-kpi,
.dark .agency-client-main,
.dark .agency-client-sidecard {
    border-color: #24384d;
    background: #122437
}

.dark .agency-client-heading h1,
.dark .agency-client-kpi>div b,
.dark .agency-client-side-title h3,
.dark .agency-client-activity-row b {
    color: #e9f0f8
}

.dark .agency-client-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-client-table td {
    border-color: #24384d
}

.dark .agency-client-toolbar {
    border-color: #24384d
}

.dark .agency-client-toolbar select,
.dark .agency-client-search,
.dark .agency-client-side-title select,
.dark .agency-client-pagination button,
.dark .agency-client-pagination select {
    background: #172b40;
    border-color: #2b4056;
    color: #dbe7f5
}

@media(max-width:1300px) {
    .agency-client-layout {
        grid-template-columns: minmax(0, 1fr) 315px
    }

    .agency-client-kpi.revenue {
        padding-right: 100px
    }

    .agency-client-kpi.revenue>label {
        right: 8px;
        padding: 6px
    }
}

@media(max-width:1120px) {
    .agency-client-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-client-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:820px) {
    .agency-client-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-client-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-client-sidecard:first-child {
        grid-column: 1/-1
    }
}

@media(max-width:580px) {
    .agency-client-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-client-heading h1 {
        font-size: 24px
    }

    .agency-client-heading p {
        font-size: 12px
    }

    .agency-client-heading .agency-module-actions {
        margin-left: auto
    }

    .agency-client-heading .agency-demo-tag {
        display: none
    }

    .agency-client-heading .btn.primary {
        min-height: 38px;
        padding: 0 10px;
        font-size: 11px
    }

    .agency-client-kpis {
        gap: 7px
    }

    .agency-client-kpi {
        min-height: 76px;
        gap: 7px;
        padding: 8px
    }

    .agency-client-icon {
        width: 37px;
        height: 37px;
        font-size: 19px
    }

    .agency-client-kpi>div small {
        font-size: 9px
    }

    .agency-client-kpi>div b {
        font-size: 18px
    }

    .agency-client-kpi em {
        font-size: 10px
    }

    .agency-client-kpi em small {
        font-size: 8px
    }

    .agency-client-kpi.revenue {
        padding-right: 8px
    }

    .agency-client-kpi.revenue>label {
        display: none
    }

    .agency-client-toolbar {
        gap: 7px;
        padding: 9px
    }

    .agency-client-toolbar>select {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        font-size: 10px
    }

    .agency-client-search {
        flex-basis: 100%
    }

    .agency-client-sidebar {
        grid-template-columns: 1fr
    }

    .agency-client-sidecard:first-child {
        grid-column: auto
    }

    .agency-client-pagination {
        flex-wrap: wrap
    }

    .agency-client-pagination>span {
        flex-basis: 100%
    }

    .agency-client-pagination select {
        margin-left: auto
    }
}

.agency-contacts-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.agency-contacts-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 28px Manrope, sans-serif
}

.agency-contacts-heading p {
    margin: 3px 0 0;
    color: #617493;
    font-size: 14px
}

.agency-contacts-heading .agency-module-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.agency-contacts-heading .btn.primary {
    min-height: 43px;
    padding: 0 17px;
    border-color: #0866f8;
    background: linear-gradient(120deg, #0866f8, #0753e9)
}

.agency-contact-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-top: 13px
}

.agency-contact-kpi {
    min-width: 0;
    min-height: 97px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #e8eef6;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-contact-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 9px;
    color: #fff;
    font-size: 27px;
    font-weight: 700
}

.agency-contact-icon.blue {
    background: linear-gradient(145deg, #1890ff, #0871f5)
}

.agency-contact-icon.green {
    background: linear-gradient(145deg, #10c387, #00a66f)
}

.agency-contact-icon.purple {
    background: linear-gradient(145deg, #913dff, #6b20e9)
}

.agency-contact-icon.amber {
    background: linear-gradient(145deg, #ffbf23, #f5a900)
}

.agency-contact-kpi>div {
    min-width: 0;
    display: grid;
    gap: 2px
}

.agency-contact-kpi>div small {
    color: #647796;
    font-size: 12px;
    white-space: nowrap
}

.agency-contact-kpi>div b {
    color: #111d3c;
    font: 800 23px Manrope, sans-serif
}

.agency-contact-kpi em {
    display: grid;
    gap: 2px;
    margin-left: auto;
    color: #08ae77;
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
    white-space: nowrap
}

.agency-contact-kpi em small {
    color: #647796;
    font-size: 10px;
    font-weight: 400
}

.agency-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 12px;
    margin-top: 13px
}

.agency-contact-main {
    min-width: 0;
    padding: 0;
    overflow: hidden
}

.agency-contact-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 11px;
    border-bottom: 1px solid #edf1f7
}

.agency-contact-toolbar>select {
    height: 38px;
    min-width: 100px;
    flex: 1 1 105px;
    padding: 0 9px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #fff;
    color: #1c3152;
    font-size: 10px
}

.agency-contact-search {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1.3 1 150px;
    min-width: 125px;
    padding: 0 9px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #f9fbfe;
    color: #667b9b
}

.agency-contact-search>span {
    font-size: 21px
}

.agency-contact-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263b5d;
    font-size: 11px
}

.agency-contact-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse
}

.agency-contact-table th {
    height: 40px;
    padding: 0 8px;
    background: #f3f7fc;
    color: #253754;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-contact-table td {
    height: 47px;
    padding: 5px 8px;
    border-bottom: 1px solid #edf1f6;
    color: #526888;
    font-size: 10px;
    white-space: nowrap
}

.agency-contact-table tr:last-child td {
    border: 0
}

.agency-contact-table th:first-child,
.agency-contact-table td:first-child {
    width: 34px;
    padding-left: 13px
}

.agency-contact-table input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #0866f8
}

.agency-contact-table td a {
    color: #526888;
    text-decoration: none
}

.agency-contact-person {
    display: flex;
    align-items: center;
    gap: 8px
}

.agency-contact-person>b {
    color: #0866f8;
    font-size: 10px;
    font-weight: 500
}

.agency-contact-avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #0876f5;
    color: white;
    font-size: 9px;
    font-weight: 800
}

.agency-contact-avatar.tone-1 {
    background: #7625ed
}

.agency-contact-avatar.tone-2 {
    background: #f54447
}

.agency-contact-avatar.tone-3 {
    background: #03a873
}

.agency-contact-avatar.tone-4 {
    background: #ff7a00
}

.agency-contact-avatar.tone-5 {
    background: #9425ed
}

.agency-contact-type,
.agency-contact-status {
    display: inline-flex;
    min-width: 55px;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 5px;
    background: #e1efff;
    color: #0874e8;
    font-size: 10px
}

.agency-contact-type.vendor {
    background: #dcf8ed;
    color: #059b6b
}

.agency-contact-type.internal {
    background: #fff3d2;
    color: #dc9700
}

.agency-contact-status {
    background: #dcf8ea;
    color: #049761
}

.agency-contact-status.inactive {
    background: #ffeded;
    color: #ed353d
}

.agency-contact-menu {
    border: 0;
    background: transparent;
    color: #253e61;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer
}

.agency-contact-pagination {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    color: #617493;
    font-size: 10px
}

.agency-contact-pagination>div {
    display: flex;
    gap: 5px
}

.agency-contact-pagination button,
.agency-contact-pagination select {
    height: 34px;
    min-width: 33px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #182849
}

.agency-contact-pagination button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-contact-pagination select {
    padding: 0 9px;
    font-size: 10px
}

.agency-contact-export {
    display: none
}

.agency-contact-sidebar {
    display: grid;
    gap: 12px
}

.agency-contact-sidecard {
    min-width: 0;
    padding: 14px
}

.agency-contact-sidecard h3 {
    margin: 0;
    color: #15223e;
    font: 800 14px Manrope, sans-serif
}

.agency-contact-type-summary {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 11px
}

.agency-contact-donut {
    width: 125px;
    height: 125px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#0866f8 0 38%, #08b780 38% 64%, #ffb323 64% 100%);
    position: relative
}

.agency-contact-donut:before {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.agency-contact-donut>span {
    z-index: 1;
    display: grid;
    text-align: center
}

.agency-contact-donut b {
    color: #14213d;
    font: 800 20px Manrope, sans-serif
}

.agency-contact-donut small {
    color: #607493;
    font-size: 10px
}

.agency-contact-legend {
    display: grid;
    gap: 14px
}

.agency-contact-legend>div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263a5b;
    font-size: 10px;
    white-space: nowrap
}

.agency-contact-legend i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%
}

.agency-contact-legend b {
    margin-left: auto;
    font-weight: 500
}

.agency-contact-legend small {
    color: #617493;
    font-size: 9px
}

.agency-contact-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-contact-side-heading a {
    color: #0866f8;
    font-size: 10px;
    white-space: nowrap
}

.agency-contact-activity {
    display: grid;
    margin-top: 6px
}

.agency-contact-activity-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-contact-activity-row:last-child {
    border: 0
}

.agency-contact-activity-row>span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #08ae77;
    color: #fff;
    font-size: 15px
}

.agency-contact-activity-row>span.blue {
    background: #0878f5
}

.agency-contact-activity-row>span.purple {
    background: #853cff
}

.agency-contact-activity-row>span.amber {
    background: #ffad08
}

.agency-contact-activity-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-contact-activity-row b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-contact-activity-row small,
.agency-contact-activity-row time {
    color: #657a9a;
    font-size: 9px
}

.agency-contact-activity-row time {
    white-space: nowrap
}

.agency-contact-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px
}

.agency-contact-quick-actions button {
    min-height: 62px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 1px solid #e6eef8;
    border-radius: 7px;
    background: #f8fbff;
    color: #0866f8;
    font-size: 10px;
    cursor: pointer
}

.agency-contact-quick-actions button:nth-child(2) {
    background: #f4fcf8;
    color: #05a974
}

.agency-contact-quick-actions button:nth-child(3) {
    background: #fffaf0;
    color: #e6a000
}

.agency-contact-quick-actions button:nth-child(4) {
    background: #fbf7ff;
    color: #852bfb
}

.agency-contact-quick-actions button span {
    font-size: 20px;
    line-height: 1
}

.dark .agency-contact-kpi,
.dark .agency-contact-main,
.dark .agency-contact-sidecard {
    border-color: #24384d;
    background: #122437
}

.dark .agency-contacts-heading h1,
.dark .agency-contact-kpi>div b,
.dark .agency-contact-sidecard h3,
.dark .agency-contact-donut b,
.dark .agency-contact-activity-row b {
    color: #e9f0f8
}

.dark .agency-contact-donut:before {
    background: #122437
}

.dark .agency-contact-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-contact-table td {
    border-color: #24384d
}

.dark .agency-contact-toolbar {
    border-color: #24384d
}

.dark .agency-contact-toolbar>select,
.dark .agency-contact-search,
.dark .agency-contact-pagination button,
.dark .agency-contact-pagination select {
    background: #172b40;
    border-color: #2b4056;
    color: #dbe7f5
}

@media(max-width:1250px) {
    .agency-contact-layout {
        grid-template-columns: minmax(0, 1fr) 290px
    }

    .agency-contact-type-summary {
        grid-template-columns: 105px minmax(0, 1fr)
    }

    .agency-contact-donut {
        width: 105px;
        height: 105px
    }

    .agency-contact-donut:before {
        inset: 17px
    }
}

@media(max-width:1080px) {
    .agency-contact-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-contact-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-contact-type-summary {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .agency-contact-legend {
        width: 100%;
        gap: 8px
    }
}

@media(max-width:800px) {
    .agency-contact-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-contact-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-contact-sidecard:first-child {
        grid-column: 1/-1
    }

    .agency-contact-sidecard:first-child .agency-contact-type-summary {
        grid-template-columns: 125px minmax(0, 1fr);
        justify-items: stretch
    }

    .agency-contact-sidecard:first-child .agency-contact-donut {
        width: 120px;
        height: 120px
    }
}

@media(max-width:580px) {
    .agency-contacts-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-contacts-heading h1 {
        font-size: 24px
    }

    .agency-contacts-heading p {
        font-size: 12px
    }

    .agency-contacts-heading .agency-module-actions {
        margin-left: auto
    }

    .agency-contacts-heading .agency-demo-tag {
        display: none
    }

    .agency-contacts-heading .btn.primary {
        min-height: 38px;
        padding: 0 10px;
        font-size: 11px
    }

    .agency-contact-kpis {
        gap: 7px
    }

    .agency-contact-kpi {
        min-height: 76px;
        gap: 7px;
        padding: 8px
    }

    .agency-contact-icon {
        width: 37px;
        height: 37px;
        font-size: 19px
    }

    .agency-contact-kpi>div small {
        font-size: 9px
    }

    .agency-contact-kpi>div b {
        font-size: 18px
    }

    .agency-contact-kpi em {
        font-size: 10px
    }

    .agency-contact-kpi em small {
        font-size: 8px
    }

    .agency-contact-toolbar {
        gap: 7px;
        padding: 9px
    }

    .agency-contact-toolbar>select {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        font-size: 9px
    }

    .agency-contact-search {
        flex-basis: 100%
    }

    .agency-contact-sidebar {
        grid-template-columns: 1fr
    }

    .agency-contact-sidecard:first-child {
        grid-column: auto
    }

    .agency-contact-sidecard:first-child .agency-contact-type-summary {
        grid-template-columns: 120px minmax(0, 1fr)
    }

    .agency-contact-sidecard:first-child .agency-contact-donut {
        width: 112px;
        height: 112px
    }

    .agency-contact-pagination {
        flex-wrap: wrap
    }

    .agency-contact-pagination>span {
        flex-basis: 100%
    }

    .agency-contact-pagination select {
        margin-left: auto
    }

    .agency-contact-pagination>div button:nth-child(n+5):nth-child(-n+6) {
        display: none
    }
}

.agency-po-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.agency-po-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 28px Manrope, sans-serif
}

.agency-po-heading p {
    margin: 3px 0 0;
    color: #617493;
    font-size: 14px
}

.agency-po-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.agency-po-actions .btn {
    min-height: 42px;
    padding: 0 14px
}

.agency-po-actions .btn.primary {
    border-color: #0866f8;
    background: linear-gradient(120deg, #0866f8, #0753e9)
}

.agency-po-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-top: 13px
}

.agency-po-kpi {
    min-width: 0;
    min-height: 97px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e8eef6;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-po-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 9px;
    color: #fff;
    font-size: 27px;
    font-weight: 700
}

.agency-po-icon.blue {
    background: linear-gradient(145deg, #1890ff, #0871f5)
}

.agency-po-icon.green {
    background: linear-gradient(145deg, #10c387, #00a66f)
}

.agency-po-icon.amber {
    background: linear-gradient(145deg, #ffbf23, #f5a900)
}

.agency-po-icon.purple {
    background: linear-gradient(145deg, #913dff, #6b20e9)
}

.agency-po-kpi>div {
    min-width: 0;
    display: grid;
    gap: 2px
}

.agency-po-kpi>div small {
    color: #647796;
    font-size: 11px;
    white-space: nowrap
}

.agency-po-kpi>div b {
    color: #111d3c;
    font: 800 22px Manrope, sans-serif;
    white-space: nowrap
}

.agency-po-kpi em {
    display: grid;
    gap: 2px;
    margin-left: auto;
    color: #08ae77;
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
    white-space: nowrap
}

.agency-po-kpi em.negative {
    color: #f24047
}

.agency-po-kpi em small {
    color: #647796;
    font-size: 10px;
    font-weight: 400
}

.agency-po-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 13px;
    padding: 10px
}

.agency-po-toolbar>select {
    height: 39px;
    min-width: 110px;
    flex: 1 1 120px;
    padding: 0 10px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #fff;
    color: #1c3152;
    font-size: 11px
}

.agency-po-date,
.agency-po-search {
    height: 39px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1.5 1 220px;
    min-width: 170px;
    padding: 0 9px;
    border: 1px solid #dfe8f4;
    border-radius: 7px;
    background: #fff;
    color: #637897;
    font-size: 14px
}

.agency-po-date input {
    width: 42%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #526987;
    font-size: 10px
}

.agency-po-date input::-webkit-calendar-picker-indicator {
    display: none
}

.agency-po-search {
    flex: 1.5 1 210px;
    background: #f9fbfe
}

.agency-po-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263b5d;
    font-size: 11px
}

.agency-po-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 335px;
    align-items: start;
    gap: 12px;
    margin-top: 12px
}

.agency-po-main {
    min-width: 0;
    padding: 0 0 5px;
    overflow: hidden
}

.agency-po-main h2 {
    margin: 0;
    padding: 14px 15px;
    color: #15223e;
    font: 800 17px Manrope, sans-serif
}

.agency-po-table {
    width: 100%;
    min-width: 790px;
    border-collapse: collapse
}

.agency-po-table th {
    height: 40px;
    padding: 0 9px;
    background: #f3f7fc;
    color: #253754;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-po-table td {
    height: 43px;
    padding: 5px 9px;
    border-bottom: 1px solid #edf1f6;
    color: #526888;
    font-size: 10px;
    white-space: nowrap
}

.agency-po-table tr:last-child td {
    border: 0
}

.agency-po-table th:first-child,
.agency-po-table td:first-child {
    width: 34px;
    padding-left: 13px
}

.agency-po-table input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #0866f8
}

.agency-po-number {
    color: #0866f8;
    font-size: 10px
}

.agency-po-status {
    display: inline-flex;
    min-width: 62px;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 5px;
    background: #dcf8ea;
    color: #049761;
    font-size: 10px
}

.agency-po-status.pending {
    background: #fff3d6;
    color: #e89a00
}

.agency-po-status.in-progress {
    background: #e4f0ff;
    color: #0872e8
}

.agency-po-status.cancelled {
    background: #ffeded;
    color: #ed353d
}

.agency-po-menu {
    border: 0;
    background: transparent;
    color: #253e61;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer
}

.agency-po-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.agency-po-row-actions .agency-inline-view {
    display: inline-flex;
    width: 30px;
    min-width: 30px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #536987;
}

.agency-po-row-actions .agency-inline-view svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.po-form-page.po-view-mode [disabled] {
    opacity: 1;
    color: #526888;
    -webkit-text-fill-color: #526888;
}

.agency-po-pagination {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 13px;
    color: #617493;
    font-size: 10px
}

.agency-po-pagination>div {
    display: flex;
    gap: 5px
}

.agency-po-pagination button,
.agency-po-pagination select {
    height: 34px;
    min-width: 34px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #182849
}

.agency-po-pagination button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-po-pagination select {
    padding: 0 10px;
    font-size: 10px
}

.agency-po-sidebar {
    display: grid;
    gap: 12px
}

.agency-po-sidecard {
    min-width: 0;
    padding: 14px
}

.agency-po-sidecard h3 {
    margin: 0;
    color: #15223e;
    font: 800 14px Manrope, sans-serif
}

.agency-po-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-po-side-heading a {
    color: #0866f8;
    font-size: 10px
}

.agency-po-side-heading select {
    padding: 6px 8px;
    border: 1px solid #e0e8f4;
    border-radius: 6px;
    background: #fff;
    color: #334766;
    font-size: 10px
}

.agency-po-chart {
    height: 130px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    margin-top: 9px
}

.agency-po-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    color: #687d9d;
    font-size: 9px
}

.agency-po-plot {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 7px 21px
}

.agency-po-grid {
    position: absolute;
    inset: 1px 0 22px;
    background: repeating-linear-gradient(to bottom, transparent 0 calc(20% - 1px), #edf2f8 calc(20% - 1px) 20%);
    border-bottom: 1px solid #dce6f2
}

.agency-po-plot svg {
    position: absolute;
    left: 3%;
    top: 3%;
    z-index: 2;
    width: 94%;
    height: 76%;
    overflow: visible
}

.agency-po-bars {
    position: absolute;
    inset: 11px 7px 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around
}

.agency-po-bars i {
    z-index: 1;
    width: 9%;
    max-width: 24px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #3c94ff, #1676f5)
}

.agency-po-months {
    position: absolute;
    inset: auto 1px 0;
    display: flex;
    justify-content: space-around;
    color: #637997;
    font-size: 9px
}

.agency-po-chart-legend {
    display: flex;
    justify-content: center;
    gap: 15px;
    color: #526784;
    font-size: 9px
}

.agency-po-chart-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

.agency-po-chart-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1676f5
}

.agency-po-chart-legend span+span i {
    background: #08b780
}

.agency-po-status-summary {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-top: 11px
}

.agency-po-donut {
    width: 125px;
    height: 125px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#08b780 0 67%, #ffb323 67% 89%, #0878f5 89% 97%, #ff505e 97% 100%);
    position: relative
}

.agency-po-donut:before {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.agency-po-donut>span {
    z-index: 1;
    display: grid;
    text-align: center
}

.agency-po-donut b {
    color: #14213d;
    font: 800 20px Manrope, sans-serif
}

.agency-po-donut small {
    color: #607493;
    font-size: 10px
}

.agency-po-legend {
    display: grid;
    gap: 13px
}

.agency-po-legend>div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263a5b;
    font-size: 10px;
    white-space: nowrap
}

.agency-po-legend i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%
}

.agency-po-legend b {
    margin-left: auto;
    font-weight: 600
}

.agency-po-activity {
    display: grid;
    margin-top: 6px
}

.agency-po-activity-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-po-activity-row:last-child {
    border: 0
}

.agency-po-activity-row>span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #08ae77;
    color: #fff;
    font-size: 15px
}

.agency-po-activity-row>span.blue {
    background: #0878f5
}

.agency-po-activity-row>span.purple {
    background: #853cff
}

.agency-po-activity-row>span.amber {
    background: #ffad08
}

.agency-po-activity-row>span.red {
    background: #f43b45
}

.agency-po-activity-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-po-activity-row b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-po-activity-row small,
.agency-po-activity-row time {
    color: #657a9a;
    font-size: 9px
}

.agency-po-activity-row time {
    white-space: nowrap
}

.dark .agency-po-kpi,
.dark .agency-po-toolbar,
.dark .agency-po-main,
.dark .agency-po-sidecard {
    border-color: #24384d;
    background: #122437
}

.dark .agency-po-heading h1,
.dark .agency-po-kpi>div b,
.dark .agency-po-main h2,
.dark .agency-po-sidecard h3,
.dark .agency-po-donut b,
.dark .agency-po-activity-row b {
    color: #e9f0f8
}

.dark .agency-po-donut:before {
    background: #122437
}

.dark .agency-po-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-po-table td {
    border-color: #24384d
}

.dark .agency-po-toolbar>select,
.dark .agency-po-date,
.dark .agency-po-search,
.dark .agency-po-side-heading select,
.dark .agency-po-pagination button,
.dark .agency-po-pagination select {
    background: #172b40;
    border-color: #2b4056;
    color: #dbe7f5
}

@media(max-width:1240px) {
    .agency-po-layout {
        grid-template-columns: minmax(0, 1fr) 300px
    }

    .agency-po-status-summary {
        grid-template-columns: 100px minmax(0, 1fr)
    }

    .agency-po-donut {
        width: 100px;
        height: 100px
    }

    .agency-po-donut:before {
        inset: 17px
    }
}

@media(max-width:1080px) {
    .agency-po-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-po-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-po-status-summary {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .agency-po-legend {
        width: 100%;
        gap: 8px
    }
}

@media(max-width:800px) {
    .agency-po-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-po-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-po-sidecard:nth-child(2) {
        grid-column: 1/-1
    }

    .agency-po-sidecard:nth-child(2) .agency-po-status-summary {
        grid-template-columns: 125px minmax(0, 1fr);
        justify-items: stretch
    }

    .agency-po-sidecard:nth-child(2) .agency-po-donut {
        width: 120px;
        height: 120px
    }
}

@media(max-width:580px) {
    .agency-po-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-po-heading h1 {
        font-size: 24px
    }

    .agency-po-heading p {
        font-size: 12px
    }

    .agency-po-actions {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end
    }

    .agency-po-heading .agency-demo-tag {
        display: none
    }

    .agency-po-actions .btn {
        min-height: 37px;
        padding: 0 9px;
        font-size: 10px
    }

    .agency-po-kpis {
        gap: 7px
    }

    .agency-po-kpi {
        min-height: 76px;
        gap: 7px;
        padding: 8px
    }

    .agency-po-icon {
        width: 37px;
        height: 37px;
        font-size: 18px
    }

    .agency-po-kpi>div small {
        font-size: 9px
    }

    .agency-po-kpi>div b {
        font-size: 17px
    }

    .agency-po-kpi em {
        font-size: 10px
    }

    .agency-po-kpi em small {
        font-size: 8px
    }

    .agency-po-toolbar {
        gap: 7px;
        padding: 9px
    }

    .agency-po-toolbar>select {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        font-size: 10px
    }

    .agency-po-date {
        flex-basis: 100%
    }

    .agency-po-search {
        flex-basis: 100%
    }

    .agency-po-sidebar {
        grid-template-columns: 1fr
    }

    .agency-po-sidecard:nth-child(2) {
        grid-column: auto
    }

    .agency-po-sidecard:nth-child(2) .agency-po-status-summary {
        grid-template-columns: 120px minmax(0, 1fr)
    }

    .agency-po-sidecard:nth-child(2) .agency-po-donut {
        width: 112px;
        height: 112px
    }

    .agency-po-pagination {
        flex-wrap: wrap
    }

    .agency-po-pagination>span {
        flex-basis: 100%
    }

    .agency-po-pagination select {
        margin-left: auto
    }
}

.agency-quotation-dashboard {
    display: grid;
    gap: 12px;
    min-width: 0
}

.agency-quotation-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.agency-quotation-dashboard-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 27px Manrope, sans-serif;
    letter-spacing: -.5px
}

.agency-quotation-dashboard-heading p {
    margin: 3px 0 0;
    color: #607392;
    font-size: 13px
}

.agency-quotation-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.agency-quotation-dashboard-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.agency-quotation-dashboard-actions .btn.primary {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-quotation-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.agency-quotation-kpis>article {
    min-width: 0;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid #e7eef7;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 4px 13px #18385c08
}

.agency-quotation-kpis>article>span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    color: #fff;
    font-size: 30px;
    font-weight: 700
}

.agency-quotation-kpis .blue {
    background: linear-gradient(140deg, #1684ff, #0658eb)
}

.agency-quotation-kpis .green {
    background: linear-gradient(140deg, #09c98a, #00a777)
}

.agency-quotation-kpis .amber {
    background: linear-gradient(140deg, #ffbf25, #ff9d00)
}

.agency-quotation-kpis .red {
    background: linear-gradient(140deg, #ff5557, #f22e3e)
}

.agency-quotation-kpis>article>div {
    min-width: 0;
    display: grid;
    gap: 2px
}

.agency-quotation-kpis small {
    color: #667a9b;
    font-size: 11px
}

.agency-quotation-kpis>article>div>b {
    color: #101e3b;
    font: 800 23px Manrope, sans-serif
}

.agency-quotation-kpis em {
    display: grid;
    margin-left: auto;
    color: #08af79;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    text-align: right;
    white-space: nowrap
}

.agency-quotation-kpis em.negative {
    color: #f0444c
}

.agency-quotation-kpis em small {
    font-size: 10px;
    font-weight: 400
}

.agency-quotation-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 1.05fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid #e8eef6;
    border-radius: 9px;
    background: #fff
}

.agency-quotation-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.7fr;
    gap: 8px;
    min-width: 0
}

.agency-quotation-filters select,
.agency-quotation-date-filter,
.agency-quotation-dashboard-search {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #334766;
    font-size: 11px
}

.agency-quotation-filters select {
    padding: 0 10px
}

.agency-quotation-date-filter,
.agency-quotation-dashboard-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    color: #607392
}

.agency-quotation-date-filter input,
.agency-quotation-dashboard-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263a59;
    font: inherit
}

.agency-quotation-date-filter input {
    font-size: 10px
}

.agency-quotation-date-filter span {
    color: #8a9ab3
}

.agency-quotation-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 12px
}

.agency-quotation-list-panel {
    min-width: 0;
    overflow: hidden;
    padding: 0
}

.agency-quotation-list-panel>h2 {
    margin: 0;
    padding: 14px;
    color: #14223e;
    font: 800 17px Manrope, sans-serif
}

.agency-quotation-list-table {
    width: 100%;
    min-width: 790px;
    border-collapse: collapse
}

.agency-quotation-list-table th {
    height: 39px;
    padding: 0 8px;
    background: #f2f7fc;
    color: #253754;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-quotation-list-table td {
    height: 41px;
    padding: 5px 8px;
    border-bottom: 1px solid #edf1f6;
    color: #536989;
    font-size: 10px;
    white-space: nowrap
}

.agency-quotation-list-table tr:last-child td {
    border-bottom: 0
}

.agency-quotation-list-table th:first-child,
.agency-quotation-list-table td:first-child {
    width: 34px;
    padding-left: 12px
}

.agency-quotation-list-table input[type=checkbox] {
    width: 14px;
    height: 14px;
    accent-color: #0866f8
}

.agency-quotation-number {
    color: #0866f8;
    font-weight: 700
}

.agency-quotation-client {
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.agency-quotation-client i {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--avatar, #0866f8);
    color: white;
    font-size: 12px;
    font-style: normal;
    font-weight: 700
}

.agency-quotation-status {
    min-width: 63px;
    display: inline-flex;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 5px;
    background: #ddf8e9;
    color: #039759;
    font-size: 10px
}

.agency-quotation-status.pending {
    background: #fff2d1;
    color: #e89a00
}

.agency-quotation-status.sent {
    background: #e2efff;
    color: #0872e8
}

.agency-quotation-status.rejected {
    background: #ffe2e3;
    color: #e62e39
}

.agency-quotation-status.draft {
    background: #edf1f6;
    color: #53647e
}

.agency-quotation-menu {
    border: 0;
    background: transparent;
    color: #52698a;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer
}

.agency-quotation-list-footer {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 10px 12px;
    color: #607392;
    font-size: 10px
}

.agency-quotation-pages {
    display: flex;
    align-items: center;
    gap: 5px
}

.agency-quotation-pages button,
.agency-quotation-list-footer>select {
    height: 34px;
    min-width: 34px;
    padding: 0 9px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #172744;
    font-size: 11px
}

.agency-quotation-pages button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-quotation-pages button:disabled {
    opacity: .45;
    cursor: default
}

.agency-quotation-list-footer>select {
    min-width: 105px
}

.agency-quotation-dashboard-sidebar {
    display: grid;
    gap: 10px;
    min-width: 0
}

.agency-quotation-widget {
    min-width: 0;
    padding: 13px
}

.agency-quotation-widget h3 {
    margin: 0;
    color: #15223e;
    font: 800 14px Manrope, sans-serif
}

.agency-quotation-widget-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-quotation-widget-title a {
    color: #0866f8;
    font-size: 10px;
    text-decoration: underline
}

.agency-quotation-widget-title select {
    padding: 6px 8px;
    border: 1px solid #e0e8f4;
    border-radius: 6px;
    background: #fff;
    color: #334766;
    font-size: 10px
}

.agency-quotation-chart {
    height: 130px;
    display: grid;
    grid-template-columns: 33px minmax(0, 1fr);
    gap: 6px;
    margin-top: 10px
}

.agency-quotation-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    color: #687d9d;
    font-size: 9px
}

.agency-quotation-chart-plot {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 6px 20px
}

.agency-quotation-chart-grid {
    position: absolute;
    inset: 1px 0 21px;
    background: repeating-linear-gradient(to bottom, transparent 0 calc(20% - 1px), #edf2f8 calc(20% - 1px) 20%);
    border-bottom: 1px solid #dce6f2
}

.agency-quotation-chart-plot svg {
    position: absolute;
    left: 3%;
    top: 4%;
    z-index: 2;
    width: 94%;
    height: 75%;
    overflow: visible
}

.agency-quotation-chart-bars {
    position: absolute;
    inset: 10px 8px 21px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around
}

.agency-quotation-chart-bars i {
    z-index: 1;
    width: 9%;
    max-width: 25px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #3c94ff, #1676f5)
}

.agency-quotation-chart-months {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    justify-content: space-around;
    color: #637997;
    font-size: 9px
}

.agency-quotation-chart-legend {
    display: flex;
    justify-content: center;
    gap: 13px;
    color: #526784;
    font-size: 9px
}

.agency-quotation-chart-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

.agency-quotation-chart-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1676f5
}

.agency-quotation-chart-legend span+span i {
    background: #08b780
}

.agency-quotation-status-layout {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 11px
}

.agency-quotation-status-donut {
    width: 125px;
    height: 125px;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(#08b780 0 43%, #ffb323 43% 79%, #0878f5 79% 93%, #ff505e 93% 100%)
}

.agency-quotation-status-donut:before {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.agency-quotation-status-donut>span {
    z-index: 1;
    display: grid;
    text-align: center
}

.agency-quotation-status-donut b {
    color: #14213d;
    font: 800 20px Manrope, sans-serif
}

.agency-quotation-status-donut small {
    color: #607493;
    font-size: 10px
}

.agency-quotation-status-legend {
    display: grid;
    gap: 12px
}

.agency-quotation-status-legend>div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263a5b;
    font-size: 10px;
    white-space: nowrap
}

.agency-quotation-status-legend i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%
}

.agency-quotation-status-legend b {
    margin-left: auto;
    font-weight: 600
}

.agency-quotation-recent {
    display: grid;
    margin-top: 6px
}

.agency-quotation-activity-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-quotation-activity-row:last-child {
    border: 0
}

.agency-quotation-activity-row>span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #08b780;
    color: #fff;
    font-size: 15px
}

.agency-quotation-activity-row>span.rejected {
    background: #ff505e
}

.agency-quotation-activity-row>span.pending {
    background: #ffb323
}

.agency-quotation-activity-row>span.sent {
    background: #853cff
}

.agency-quotation-activity-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-quotation-activity-row b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-quotation-activity-row small,
.agency-quotation-activity-row time {
    color: #657a9a;
    font-size: 9px
}

.agency-quotation-activity-row time {
    white-space: nowrap
}

.dark .agency-quotation-dashboard-heading h1,
.dark .agency-quotation-kpis>article>div>b,
.dark .agency-quotation-list-panel>h2,
.dark .agency-quotation-widget h3,
.dark .agency-quotation-status-donut b,
.dark .agency-quotation-activity-row b {
    color: #e9f0f8
}

.dark .agency-quotation-kpis>article,
.dark .agency-quotation-filter-row,
.dark .agency-quotation-list-panel,
.dark .agency-quotation-widget {
    border-color: #24384d;
    background: #122437
}

.dark .agency-quotation-filters select,
.dark .agency-quotation-date-filter,
.dark .agency-quotation-dashboard-search,
.dark .agency-quotation-widget-title select,
.dark .agency-quotation-list-footer>select,
.dark .agency-quotation-pages button {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .agency-quotation-date-filter input,
.dark .agency-quotation-dashboard-search input {
    color: #dbe7f5
}

.dark .agency-quotation-list-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-quotation-list-table td,
.dark .agency-quotation-activity-row {
    border-color: #24384d
}

.dark .agency-quotation-status-donut:before {
    background: #122437
}

@media(max-width:1180px) {
    .agency-quotation-dashboard-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-quotation-dashboard-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-quotation-status-layout {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .agency-quotation-status-legend {
        width: 100%;
        gap: 8px
    }
}

@media(max-width:900px) {
    .agency-quotation-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-quotation-filter-row {
        grid-template-columns: 1fr
    }

    .agency-quotation-dashboard-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-quotation-dashboard-sidebar>.agency-quotation-widget:last-child {
        grid-column: 1/-1
    }

    .agency-quotation-dashboard-sidebar>.agency-quotation-widget:nth-child(2) .agency-quotation-status-layout {
        grid-template-columns: 125px minmax(0, 1fr);
        justify-items: stretch
    }
}

@media(max-width:600px) {
    .agency-quotation-dashboard-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-quotation-dashboard-heading h1 {
        font-size: 24px
    }

    .agency-quotation-dashboard-heading p {
        font-size: 12px
    }

    .agency-quotation-dashboard-actions {
        width: 100%;
        justify-content: flex-end
    }

    .agency-quotation-dashboard-actions .btn {
        min-height: 37px;
        padding: 0 10px;
        font-size: 11px
    }

    .agency-quotation-kpis {
        gap: 7px
    }

    .agency-quotation-kpis>article {
        min-height: 76px;
        gap: 7px;
        padding: 8px
    }

    .agency-quotation-kpis>article>span {
        width: 38px;
        height: 38px;
        font-size: 21px
    }

    .agency-quotation-kpis small {
        font-size: 9px
    }

    .agency-quotation-kpis>article>div>b {
        font-size: 18px
    }

    .agency-quotation-kpis em {
        font-size: 10px
    }

    .agency-quotation-kpis em small {
        font-size: 8px
    }

    .agency-quotation-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }

    .agency-quotation-date-filter {
        grid-column: 1/-1
    }

    .agency-quotation-dashboard-search {
        height: 37px
    }

    .agency-quotation-dashboard-sidebar {
        grid-template-columns: 1fr
    }

    .agency-quotation-dashboard-sidebar>.agency-quotation-widget:last-child {
        grid-column: auto
    }

    .agency-quotation-dashboard-sidebar>.agency-quotation-widget:nth-child(2) .agency-quotation-status-layout {
        grid-template-columns: 120px minmax(0, 1fr)
    }

    .agency-quotation-status-donut {
        width: 112px;
        height: 112px
    }

    .agency-quotation-status-donut:before {
        inset: 18px
    }

    .agency-quotation-list-footer {
        flex-wrap: wrap
    }

    .agency-quotation-list-footer>span {
        flex-basis: 100%
    }

    .agency-quotation-list-footer>select {
        margin-left: auto
    }
}

.agency-invoice-dashboard {
    display: grid;
    gap: 12px;
    min-width: 0
}

.agency-invoice-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.agency-invoice-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 27px Manrope, sans-serif;
    letter-spacing: -.5px
}

.agency-invoice-heading p {
    margin: 3px 0 0;
    color: #607392;
    font-size: 13px
}

.agency-invoice-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.agency-invoice-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.agency-invoice-actions .btn.primary {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-invoice-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.agency-invoice-kpis>article {
    min-width: 0;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid #e7eef7;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 4px 13px #18385c08
}

.agency-invoice-kpis>article>span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    color: #fff;
    font-size: 29px;
    font-weight: 700
}

.agency-invoice-kpis .blue {
    background: linear-gradient(140deg, #1684ff, #0658eb)
}

.agency-invoice-kpis .green {
    background: linear-gradient(140deg, #09c98a, #00a777)
}

.agency-invoice-kpis .amber {
    background: linear-gradient(140deg, #ffbf25, #ff9d00)
}

.agency-invoice-kpis .red {
    background: linear-gradient(140deg, #ff5557, #f22e3e)
}

.agency-invoice-kpis>article>div {
    min-width: 0;
    display: grid;
    gap: 2px
}

.agency-invoice-kpis small {
    color: #667a9b;
    font-size: 11px
}

.agency-invoice-kpis>article>div>b {
    color: #101e3b;
    font: 800 23px Manrope, sans-serif
}

.agency-invoice-kpis em {
    display: grid;
    margin-left: auto;
    color: #08af79;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    text-align: right;
    white-space: nowrap
}

.agency-invoice-kpis em.negative {
    color: #f0444c
}

.agency-invoice-kpis em small {
    font-size: 10px;
    font-weight: 400
}

.agency-invoice-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 1.05fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid #e8eef6;
    border-radius: 9px;
    background: #fff
}

.agency-invoice-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.7fr;
    gap: 8px;
    min-width: 0
}

.agency-invoice-filters select,
.agency-invoice-date-filter,
.agency-invoice-search {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #334766;
    font-size: 11px
}

.agency-invoice-filters select {
    padding: 0 10px
}

.agency-invoice-date-filter,
.agency-invoice-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    color: #607392
}

.agency-invoice-date-filter input,
.agency-invoice-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263a59;
    font: inherit
}

.agency-invoice-date-filter input {
    font-size: 10px
}

.agency-invoice-date-filter span {
    color: #8a9ab3
}

.agency-invoice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    align-items: start;
    gap: 12px
}

.agency-invoice-list {
    min-width: 0;
    overflow: hidden;
    padding: 0
}

.agency-invoice-list>h2 {
    margin: 0;
    padding: 14px;
    color: #14223e;
    font: 800 17px Manrope, sans-serif
}

.agency-invoice-table {
    width: 100%;
    min-width: 790px;
    border-collapse: collapse
}

.agency-invoice-table th {
    height: 39px;
    padding: 0 8px;
    background: #f2f7fc;
    color: #253754;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-invoice-table td {
    height: 41px;
    padding: 5px 8px;
    border-bottom: 1px solid #edf1f6;
    color: #536989;
    font-size: 10px;
    white-space: nowrap
}

.agency-invoice-table tr:last-child td {
    border-bottom: 0
}

.agency-invoice-table th:first-child,
.agency-invoice-table td:first-child {
    width: 34px;
    padding-left: 12px
}

.agency-invoice-table input[type=checkbox] {
    width: 14px;
    height: 14px;
    accent-color: #0866f8
}

.agency-invoice-number {
    color: #0866f8;
    font-weight: 700
}

.agency-invoice-client {
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.agency-invoice-client i {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--avatar, #0866f8);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 700
}

.agency-invoice-status {
    min-width: 63px;
    display: inline-flex;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 5px;
    background: #ddf8e9;
    color: #039759;
    font-size: 10px
}

.agency-invoice-status.pending {
    background: #fff2d1;
    color: #e89a00
}

.agency-invoice-status.in-progress {
    background: #e2efff;
    color: #0872e8
}

.agency-invoice-status.overdue {
    background: #ffe2e3;
    color: #e62e39
}

.agency-invoice-status.sent,
.agency-invoice-status.draft {
    background: #e2efff;
    color: #0872e8
}

.agency-invoice-menu {
    border: 0;
    background: transparent;
    color: #52698a;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer
}

.agency-invoice-footer {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 10px 12px;
    color: #607392;
    font-size: 10px
}

.agency-invoice-pages {
    display: flex;
    align-items: center;
    gap: 5px
}

.agency-invoice-pages button,
.agency-invoice-footer>select {
    height: 34px;
    min-width: 34px;
    padding: 0 9px;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #172744;
    font-size: 11px
}

.agency-invoice-pages button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-invoice-pages button:disabled {
    opacity: .45;
    cursor: default
}

.agency-invoice-footer>select {
    min-width: 105px
}

.agency-invoice-sidebar {
    display: grid;
    gap: 10px;
    min-width: 0
}

.agency-invoice-widget {
    min-width: 0;
    padding: 13px
}

.agency-invoice-widget h3 {
    margin: 0;
    color: #15223e;
    font: 800 14px Manrope, sans-serif
}

.agency-invoice-widget-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-invoice-widget-heading a {
    color: #0866f8;
    font-size: 10px;
    text-decoration: underline
}

.agency-invoice-widget-heading select {
    padding: 6px 8px;
    border: 1px solid #e0e8f4;
    border-radius: 6px;
    background: #fff;
    color: #334766;
    font-size: 10px
}

.agency-invoice-status-layout {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 11px
}

.agency-invoice-donut {
    width: 130px;
    height: 130px;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(#08b780 0 67%, #ffb323 67% 89%, #ff505e 89% 100%)
}

.agency-invoice-donut:before {
    position: absolute;
    inset: 21px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.agency-invoice-donut>span {
    z-index: 1;
    display: grid;
    text-align: center
}

.agency-invoice-donut b {
    color: #14213d;
    font: 800 20px Manrope, sans-serif
}

.agency-invoice-donut small {
    color: #607493;
    font-size: 10px
}

.agency-invoice-legend {
    display: grid;
    gap: 13px
}

.agency-invoice-legend>div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263a5b;
    font-size: 10px;
    white-space: nowrap
}

.agency-invoice-legend i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%
}

.agency-invoice-legend b {
    margin-left: auto;
    font-weight: 600
}

.agency-invoice-chart {
    height: 130px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
    margin-top: 10px
}

.agency-invoice-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    color: #687d9d;
    font-size: 9px
}

.agency-invoice-chart-plot {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 6px 20px
}

.agency-invoice-chart-grid {
    position: absolute;
    inset: 1px 0 21px;
    background: repeating-linear-gradient(to bottom, transparent 0 calc(25% - 1px), #edf2f8 calc(25% - 1px) 25%);
    border-bottom: 1px solid #dce6f2
}

.agency-invoice-chart-plot svg {
    position: absolute;
    left: 3%;
    top: 4%;
    z-index: 2;
    width: 94%;
    height: 75%;
    overflow: visible
}

.agency-invoice-chart-bars {
    position: absolute;
    inset: 10px 8px 21px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around
}

.agency-invoice-chart-bars i {
    z-index: 1;
    width: 9%;
    max-width: 25px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #3c94ff, #1676f5)
}

.agency-invoice-chart-months {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    justify-content: space-around;
    color: #637997;
    font-size: 9px
}

.agency-invoice-chart-legend {
    display: flex;
    justify-content: center;
    gap: 13px;
    color: #526784;
    font-size: 9px
}

.agency-invoice-chart-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

.agency-invoice-chart-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1676f5
}

.agency-invoice-chart-legend span+span i {
    background: #08b780
}

.agency-invoice-activity {
    display: grid;
    margin-top: 6px
}

.agency-invoice-activity-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-invoice-activity-row:last-child {
    border: 0
}

.agency-invoice-activity-row>span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #08b780;
    color: #fff;
    font-size: 14px
}

.agency-invoice-activity-row>span.blue {
    background: #0878f5
}

.agency-invoice-activity-row>span.amber {
    background: #ffb323
}

.agency-invoice-activity-row>span.red {
    background: #ff505e
}

.agency-invoice-activity-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-invoice-activity-row b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-invoice-activity-row small,
.agency-invoice-activity-row time {
    color: #657a9a;
    font-size: 9px
}

.agency-invoice-activity-row time {
    white-space: nowrap
}

.dark .agency-invoice-heading h1,
.dark .agency-invoice-kpis>article>div>b,
.dark .agency-invoice-list>h2,
.dark .agency-invoice-widget h3,
.dark .agency-invoice-donut b,
.dark .agency-invoice-activity-row b {
    color: #e9f0f8
}

.dark .agency-invoice-kpis>article,
.dark .agency-invoice-filter-row,
.dark .agency-invoice-list,
.dark .agency-invoice-widget {
    border-color: #24384d;
    background: #122437
}

.dark .agency-invoice-filters select,
.dark .agency-invoice-date-filter,
.dark .agency-invoice-search,
.dark .agency-invoice-widget-heading select,
.dark .agency-invoice-footer>select,
.dark .agency-invoice-pages button {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .agency-invoice-date-filter input,
.dark .agency-invoice-search input {
    color: #dbe7f5
}

.dark .agency-invoice-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-invoice-table td,
.dark .agency-invoice-activity-row {
    border-color: #24384d
}

.dark .agency-invoice-donut:before {
    background: #122437
}

@media(max-width:1180px) {
    .agency-invoice-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-invoice-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-invoice-status-layout {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .agency-invoice-legend {
        width: 100%;
        gap: 8px
    }
}

@media(max-width:900px) {
    .agency-invoice-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-invoice-filter-row {
        grid-template-columns: 1fr
    }

    .agency-invoice-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-invoice-sidebar>.agency-invoice-widget:last-child {
        grid-column: 1/-1
    }

    .agency-invoice-sidebar>.agency-invoice-widget:first-child .agency-invoice-status-layout {
        grid-template-columns: 125px minmax(0, 1fr);
        justify-items: stretch
    }
}

@media(max-width:600px) {
    .agency-invoice-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-invoice-heading h1 {
        font-size: 24px
    }

    .agency-invoice-heading p {
        font-size: 12px
    }

    .agency-invoice-actions {
        width: 100%;
        justify-content: flex-end
    }

    .agency-invoice-actions .btn {
        min-height: 37px;
        padding: 0 10px;
        font-size: 11px
    }

    .agency-invoice-kpis {
        gap: 7px
    }

    .agency-invoice-kpis>article {
        min-height: 76px;
        gap: 7px;
        padding: 8px
    }

    .agency-invoice-kpis>article>span {
        width: 38px;
        height: 38px;
        font-size: 21px
    }

    .agency-invoice-kpis small {
        font-size: 9px
    }

    .agency-invoice-kpis>article>div>b {
        font-size: 18px
    }

    .agency-invoice-kpis em {
        font-size: 10px
    }

    .agency-invoice-kpis em small {
        font-size: 8px
    }

    .agency-invoice-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }

    .agency-invoice-date-filter {
        grid-column: 1/-1
    }

    .agency-invoice-search {
        height: 37px
    }

    .agency-invoice-sidebar {
        grid-template-columns: 1fr
    }

    .agency-invoice-sidebar>.agency-invoice-widget:last-child {
        grid-column: auto
    }

    .agency-invoice-sidebar>.agency-invoice-widget:first-child .agency-invoice-status-layout {
        grid-template-columns: 120px minmax(0, 1fr)
    }

    .agency-invoice-donut {
        width: 112px;
        height: 112px
    }

    .agency-invoice-donut:before {
        inset: 18px
    }

    .agency-invoice-footer {
        flex-wrap: wrap
    }

    .agency-invoice-footer>span {
        flex-basis: 100%
    }

    .agency-invoice-footer>select {
        margin-left: auto
    }
}

.agency-quotation-page {
    display: grid;
    gap: 12px
}

.agency-quotation-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.agency-quotation-topline>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0866f8;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none
}

.agency-quotation-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.agency-quotation-actions .btn {
    min-height: 40px
}

.agency-quotation-actions .btn.primary {
    border-color: #0866f8;
    background: #0875f5
}

.agency-quotation-actions .btn.strong {
    padding-inline: 18px;
    background: linear-gradient(120deg, #0866f8, #0753e9)
}

.agency-quotation-actions .btn span {
    padding-left: 12px;
    border-left: 1px solid #ffffff66
}

.agency-quotation-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px
}

.agency-quotation-heading>span {
    padding-top: 2px;
    color: #243958;
    font-size: 25px
}

.agency-quotation-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 26px Manrope, sans-serif
}

.agency-quotation-heading p {
    margin: 3px 0 0;
    color: #617493;
    font-size: 14px
}

.agency-quotation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 13px
}

.agency-quotation-main,
.agency-quotation-sidebar {
    display: grid;
    gap: 11px;
    min-width: 0
}

.agency-quotation-card {
    min-width: 0;
    padding: 14px
}

.agency-quotation-card h2 {
    margin: 0;
    color: #101e3b;
    font: 800 16px Manrope, sans-serif
}

.agency-quotation-card>p {
    margin: 3px 0 11px;
    color: #657999;
    font-size: 11px
}

.agency-quotation-fields {
    display: grid;
    gap: 10px 13px
}

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

.agency-quotation-fields.three {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.agency-quotation-fields.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 10px
}

.agency-quotation-fields label {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 5px;
    color: #162744;
    font-size: 11px;
    font-weight: 500
}

.agency-quotation-fields label>b {
    display: inline;
    color: #ed3d4b
}

.agency-quotation-fields label small {
    display: inline;
    color: #71819c;
    font-size: 10px;
    font-weight: 400
}

.agency-quotation-fields input,
.agency-quotation-fields select,
.agency-quotation-fields textarea {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #233959;
    font: 400 11px 'DM Sans', sans-serif;
    outline: none
}

.agency-quotation-fields textarea {
    min-height: 65px;
    padding: 9px 11px;
    resize: vertical
}

.agency-quotation-fields input:focus,
.agency-quotation-fields select:focus,
.agency-quotation-fields textarea:focus {
    border-color: #78aafa;
    box-shadow: 0 0 0 3px #0866f81a
}

.agency-quotation-fields input::placeholder,
.agency-quotation-fields textarea::placeholder {
    color: #8798b4
}

.agency-quotation-suffix {
    display: flex;
    align-items: center;
    position: relative
}

.agency-quotation-suffix input {
    padding-right: 28px
}

.agency-quotation-suffix i {
    position: absolute;
    right: 11px;
    color: #647796;
    font-size: 11px;
    font-style: normal
}

.agency-quotation-items-card {
    padding-bottom: 11px
}

.agency-quotation-item-head,
.agency-quotation-item {
    display: grid;
    grid-template-columns: 25px minmax(125px, 1fr) minmax(130px, 1.15fr) 75px 95px 74px 82px 24px;
    align-items: center;
    gap: 7px
}

.agency-quotation-item-head {
    min-height: 31px;
    border-bottom: 1px solid #e7edf5;
    color: #213552;
    font-size: 10px;
    font-weight: 700
}

.agency-quotation-item-head b {
    color: #e6404b
}

.agency-quotation-item {
    min-height: 42px;
    border-bottom: 1px solid #eff3f8
}

.agency-quotation-item label {
    display: block;
    min-width: 0
}

.agency-quotation-item input,
.agency-quotation-item select {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #dce6f2;
    border-radius: 5px;
    background: #fff;
    color: #263b5d;
    font: 400 10px 'DM Sans', sans-serif
}

.agency-quotation-item input::placeholder {
    color: #8999b5
}

.agency-quotation-item select {
    padding-inline: 6px
}

.agency-quotation-price {
    position: relative
}

.agency-quotation-price>span {
    position: absolute;
    left: 8px;
    top: 8px;
    color: #243958;
    font-size: 10px
}

.agency-quotation-price input {
    padding-left: 20px
}

.agency-quotation-row-num {
    color: #263c5c;
    font-size: 10px
}

.agency-quotation-line-total {
    color: #182744;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap
}

.agency-quotation-remove {
    border: 0;
    background: none;
    color: #62749a;
    font-size: 16px;
    cursor: pointer
}

.agency-add-quotation-item {
    min-height: 33px;
    margin-top: 8px;
    padding: 0 12px;
    border-color: #d7e7ff;
    background: #eaf4ff;
    color: #0866f8;
    font-size: 11px
}

.agency-quotation-items-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.agency-quotation-total-box {
    width: min(240px, 50%);
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid #e0eaf6;
    border-radius: 7px;
    background: #f9fbff
}

.agency-quotation-total-box>div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    color: #607493;
    font-size: 11px
}

.agency-quotation-total-box>div b {
    color: #162542;
    font-size: 11px;
    font-weight: 500
}

.agency-quotation-total-box>div.total {
    background: #eaf3ff;
    color: #10203d;
    font-weight: 800
}

.agency-quotation-total-box>div.total b {
    font: 800 16px Manrope, sans-serif
}

.agency-quotation-total-box i {
    font-style: normal
}

.agency-quotation-summary h3,
.agency-quotation-workflow h3,
.agency-quotation-attachments h3 {
    margin: 0;
    color: #13213e;
    font: 800 14px Manrope, sans-serif
}

.agency-quotation-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 3px;
    border-bottom: 1px solid #eaf0f7
}

.agency-quotation-logo {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: linear-gradient(145deg, #168bff, #0758eb);
    color: #fff;
    font-size: 19px
}

.agency-quotation-brand>div:nth-child(2) {
    display: grid;
    gap: 2px
}

.agency-quotation-brand>div:nth-child(2) b {
    color: #0866f8;
    font-size: 12px
}

.agency-quotation-brand small {
    color: #6b7d99;
    font-size: 8px
}

.agency-quotation-document {
    display: grid;
    gap: 3px;
    margin-left: auto;
    text-align: right
}

.agency-quotation-document b {
    color: #0866f8;
    font-size: 12px
}

.agency-quotation-document span {
    color: #14213d;
    font-size: 11px
}

.agency-quotation-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid #eaf0f7
}

.agency-quotation-parties>div {
    min-width: 0;
    display: grid;
    gap: 3px
}

.agency-quotation-parties small,
.agency-quotation-meta small {
    color: #647796;
    font-size: 9px
}

.agency-quotation-parties b {
    overflow: hidden;
    color: #152542;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-quotation-parties span {
    overflow: hidden;
    color: #5d7190;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-quotation-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 2px;
    border-bottom: 1px solid #eaf0f7
}

.agency-quotation-meta>div {
    display: grid;
    gap: 4px
}

.agency-quotation-meta b {
    color: #182846;
    font-size: 9px
}

.agency-quotation-summary-lines {
    display: grid;
    gap: 2px;
    padding-top: 8px
}

.agency-quotation-summary-lines>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px;
    color: #344a6b;
    font-size: 10px
}

.agency-quotation-summary-lines b {
    color: #1d3150;
    font-size: 10px;
    font-weight: 500
}

.agency-quotation-summary-lines>div.total {
    margin-top: 2px;
    padding: 8px;
    border-radius: 5px;
    background: #eaf3ff;
    color: #111f3c;
    font-size: 13px;
    font-weight: 800
}

.agency-quotation-summary-lines>div.total b {
    font: 800 17px Manrope, sans-serif
}

.agency-quotation-workflow>p,
.agency-quotation-attachments>p {
    margin: 4px 0 8px;
    color: #647796;
    font-size: 10px
}

.agency-quotation-workflow ol {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.agency-quotation-workflow ol:before {
    position: absolute;
    left: 15px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: #e4eaf2;
    content: ""
}

.agency-quotation-workflow li {
    position: relative;
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 9px
}

.agency-quotation-workflow li>i {
    z-index: 1;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #c9d1df;
    color: #fff;
    font-size: 13px;
    font-style: normal
}

.agency-quotation-workflow li.current>i {
    background: #0866f8
}

.agency-quotation-workflow li>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px
}

.agency-quotation-workflow li b {
    color: #14223e;
    font-size: 10px
}

.agency-quotation-workflow li small,
.agency-quotation-workflow li time {
    color: #647796;
    font-size: 9px
}

.agency-quotation-workflow li>span {
    color: #0866f8;
    font-size: 19px
}

.agency-quotation-workflow li time {
    margin-left: auto
}

.agency-quotation-drop {
    min-height: 110px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 5px;
    border: 1px dashed #bdd1ef;
    border-radius: 7px;
    background: #fbfdff;
    text-align: center;
    cursor: pointer
}

.agency-quotation-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0
}

.agency-quotation-drop>span {
    color: #4a6288;
    font-size: 25px;
    line-height: 1
}

.agency-quotation-drop b {
    color: #14213f;
    font-size: 11px
}

.agency-quotation-drop strong {
    color: #0866f8;
    font-size: 10px;
    font-weight: 600
}

.agency-quotation-drop small {
    color: #7687a4;
    font-size: 8px
}

.agency-quotation-page #quotation-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px
}

.agency-quotation-page #quotation-file-list span {
    padding: 4px 7px;
    border-radius: 5px;
    background: #edf4ff;
    color: #415a7e;
    font-size: 9px
}

.agency-quotation-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap
}

.dark .agency-quotation-card {
    border-color: #24384d;
    background: #122437
}

.dark .agency-quotation-heading h1,
.dark .agency-quotation-card h2,
.dark .agency-quotation-card h3,
.dark .agency-quotation-parties b,
.dark .agency-quotation-meta b,
.dark .agency-quotation-workflow li b,
.dark .agency-quotation-drop b {
    color: #e9f0f8
}

.dark .agency-quotation-fields label,
.dark .agency-quotation-item-head,
.dark .agency-quotation-row-num,
.dark .agency-quotation-line-total {
    color: #dbe7f5
}

.dark .agency-quotation-fields input,
.dark .agency-quotation-fields select,
.dark .agency-quotation-fields textarea,
.dark .agency-quotation-item input,
.dark .agency-quotation-item select {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .agency-quotation-donut:before {
    background: #122437
}

.dark .agency-quotation-total-box {
    border-color: #2b4056;
    background: #172b40
}

.dark .agency-quotation-total-box>div.total {
    background: #203956
}

.dark .agency-quotation-parties,
.dark .agency-quotation-meta,
.dark .agency-quotation-brand,
.dark .agency-quotation-item,
.dark .agency-quotation-item-head {
    border-color: #2b4056
}

.dark .agency-quotation-summary-lines>div.total {
    background: #203956
}

@media(max-width:1120px) {
    .agency-quotation-layout {
        grid-template-columns: minmax(0, 1fr) 300px
    }

    .agency-quotation-item-head,
    .agency-quotation-item {
        grid-template-columns: 20px minmax(95px, 1fr) minmax(95px, 1fr) 58px 75px 60px 65px 20px;
        gap: 5px
    }

    .agency-quotation-card {
        padding: 12px
    }
}

@media(max-width:900px) {
    .agency-quotation-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-quotation-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start
    }

    .agency-quotation-summary {
        grid-row: span 2
    }

    .agency-quotation-item-head,
    .agency-quotation-item {
        min-width: 750px
    }

    .agency-quotation-items-card {
        overflow: hidden
    }

    .agency-quotation-items-card>.agency-quotation-item-head,
    .agency-quotation-items-card>#quotation-items {
        overflow-x: auto
    }
}

@media(max-width:600px) {
    .agency-quotation-topline {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-quotation-topline>a {
        font-size: 11px
    }

    .agency-quotation-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 6px
    }

    .agency-quotation-actions .btn {
        min-height: 36px;
        padding: 0 8px;
        font-size: 10px
    }

    .agency-quotation-heading h1 {
        font-size: 23px
    }

    .agency-quotation-heading p {
        font-size: 11px
    }

    .agency-quotation-sidebar {
        grid-template-columns: 1fr
    }

    .agency-quotation-summary {
        grid-row: auto
    }

    .agency-quotation-fields.two,
    .agency-quotation-fields.three,
    .agency-quotation-fields.four {
        grid-template-columns: 1fr 1fr;
        gap: 9px
    }

    .agency-quotation-fields.four label:first-child {
        grid-column: 1/-1
    }

    .agency-quotation-card {
        padding: 11px
    }

    .agency-quotation-items-bottom {
        align-items: stretch;
        flex-direction: column
    }

    .agency-quotation-total-box {
        width: 100%;
        margin-top: 3px
    }

    .agency-quotation-item-head,
    .agency-quotation-item {
        grid-template-columns: 20px minmax(105px, 1fr) minmax(105px, 1fr) 60px 75px 60px 65px 20px
    }

    .agency-quotation-sidebar .agency-quotation-card p {
        font-size: 10px
    }
}

/* Human Resources overview */
.agency-hr-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 13px
}

.agency-hr-heading h1 {
    margin: 0;
    color: #101e3b;
    font: 800 28px Manrope, sans-serif;
    letter-spacing: -.4px
}

.agency-hr-heading p {
    margin: 3px 0 0;
    color: #617493;
    font-size: 14px
}

.agency-hr-tabs {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin-bottom: 13px;
    overflow: hidden;
    border: 1px solid #e6edf7;
    border-radius: 9px;
    background: #fff
}

.agency-hr-tabs a {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    border-right: 1px solid #e8eef7;
    color: #52658a;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap
}

.agency-hr-tabs a:last-child {
    border: 0
}

.agency-hr-tabs a.active {
    position: relative;
    color: #0866f8;
    font-weight: 700
}

.agency-hr-tabs a.active:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #0866f8;
    content: ""
}

.agency-hr-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 11px
}

.agency-hr-kpi {
    min-width: 0;
    min-height: 91px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #e7eef7;
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-hr-kpi>span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    color: white;
    font-size: 26px;
    font-weight: 700
}

.agency-hr-kpi>span.blue {
    background: linear-gradient(145deg, #168dff, #0863ed)
}

.agency-hr-kpi>span.green {
    background: linear-gradient(145deg, #12c88a, #00a76b)
}

.agency-hr-kpi>span.amber {
    background: linear-gradient(145deg, #ffc329, #f3a800)
}

.agency-hr-kpi>span.purple {
    background: linear-gradient(145deg, #a437ff, #7414e9)
}

.agency-hr-kpi>div {
    min-width: 0;
    display: grid;
    gap: 2px
}

.agency-hr-kpi small {
    color: #657796;
    font-size: 11px;
    white-space: nowrap
}

.agency-hr-kpi b {
    color: #111d3b;
    font: 800 23px Manrope, sans-serif
}

.agency-hr-kpi em {
    display: grid;
    gap: 2px;
    margin-left: auto;
    color: #08ad76;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
    white-space: nowrap
}

.agency-hr-kpi em.negative {
    color: #f24047
}

.agency-hr-kpi em small {
    font-size: 10px;
    font-weight: 400
}

.agency-hr-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 9px
}

.agency-hr-toolbar select,
.agency-hr-search {
    height: 38px;
    min-width: 130px;
    flex: 1 1 130px;
    padding: 0 10px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #1e3152;
    font-size: 10px
}

.agency-hr-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 2 1 250px;
    color: #536991;
    font-size: 17px
}

.agency-hr-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263b5d;
    font-size: 10px
}

.agency-hr-toolbar .btn {
    min-height: 38px;
    padding: 0 11px;
    font-size: 10px;
    white-space: nowrap
}

.agency-hr-toolbar .agency-hr-add {
    margin-left: auto;
    background: linear-gradient(120deg, #0866f8, #0753e9)
}

.agency-hr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 345px;
    align-items: start;
    gap: 11px
}

.agency-hr-main {
    min-width: 0;
    overflow: hidden;
    padding: 0 0 3px
}

.agency-hr-table {
    width: 100%;
    min-width: 840px;
    border-collapse: collapse
}

.agency-hr-table th {
    height: 39px;
    padding: 0 9px;
    background: #f2f7fd;
    color: #203452;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-hr-table td {
    height: 44px;
    padding: 5px 9px;
    border-bottom: 1px solid #edf1f6;
    color: #526888;
    font-size: 10px;
    white-space: nowrap
}

.agency-hr-table tr:last-child td {
    border: 0
}

.agency-hr-table th:first-child,
.agency-hr-table td:first-child {
    width: 39px;
    padding-left: 13px
}

.agency-hr-table input[type=checkbox] {
    width: 14px;
    height: 14px;
    accent-color: #0866f8
}

.agency-trash-page[data-trash-type="tasks"] .agency-trash-table {
    width: 100%;
    min-width: 1120px;
    table-layout: fixed
}

.agency-trash-page[data-trash-type="tasks"] .agency-trash-table th:nth-child(1),
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table td:nth-child(1) { width: 42px }
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table th:nth-child(2),
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table td:nth-child(2) { width: 210px }
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table th:nth-child(3),
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table td:nth-child(3) { width: 180px }
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table th:nth-child(4),
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table td:nth-child(4) { width: 140px }
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table th:nth-child(5),
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table td:nth-child(5) { width: 120px }
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table th:nth-child(6),
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table td:nth-child(6) { width: 140px }
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table th:nth-child(7),
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table td:nth-child(7) { width: 110px }
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table th:nth-child(8),
.agency-trash-page[data-trash-type="tasks"] .agency-trash-table td:nth-child(8) { width: 170px }

.agency-hr-person {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 150px
}

.agency-hr-person>span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 750
}

.agency-hr-person>span.blue {
    background: #0878f5
}

.agency-hr-person>span.purple {
    background: #852bfa
}

.agency-hr-person>span.orange {
    background: #f4810a
}

.agency-hr-person>span.red {
    background: #f43b45
}

.agency-hr-person>span.teal {
    background: #00a981
}

.agency-hr-person>div {
    min-width: 0;
    display: grid;
    gap: 3px
}

.agency-hr-person b {
    color: #182a49;
    font-size: 10px
}

.agency-hr-person small {
    color: #667b9c;
    font-size: 9px
}

.agency-hr-status {
    display: inline-flex;
    min-width: 66px;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 5px;
    background: #ddf8ea;
    color: #049762;
    font-size: 10px
}

.agency-hr-status.leave {
    background: #e4f1ff;
    color: #0872e8
}

.agency-hr-status.inactive {
    background: #ffeded;
    color: #e93e48
}

.agency-hr-menu {
    border: 0;
    background: transparent;
    color: #385175;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer
}

.agency-hr-menu:disabled {
    cursor: default;
    opacity: .62
}

.agency-hr-footer {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 8px 13px;
    color: #657997;
    font-size: 10px
}

.agency-hr-pages {
    display: flex;
    gap: 5px
}

.agency-hr-pages button {
    width: 34px;
    height: 34px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #1d3150
}

.agency-hr-pages button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.agency-hr-footer>select {
    height: 34px;
    padding: 0 9px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #1d3150;
    font-size: 10px
}

.agency-hr-sidebar {
    display: grid;
    gap: 10px
}

.agency-hr-widget {
    min-width: 0;
    padding: 13px
}

.agency-hr-widget-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.agency-hr-widget-title h2 {
    margin: 0;
    color: #15223e;
    font: 800 14px Manrope, sans-serif
}

.agency-hr-widget-title a {
    color: #0866f8;
    font-size: 10px
}

.agency-hr-department-summary {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-top: 12px
}

.agency-hr-donut {
    position: relative;
    width: 126px;
    height: 126px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#0878f5 0 33%, #f59e0b 33% 54%, #08b780 54% 67%, #ff505e 67% 79%, #536b9a 79% 90%, #5353a8 90% 100%)
}

.agency-hr-donut:before {
    position: absolute;
    inset: 21px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

.agency-hr-donut>span {
    z-index: 1;
    display: grid;
    text-align: center
}

.agency-hr-donut b {
    color: #14213d;
    font: 800 21px Manrope, sans-serif
}

.agency-hr-donut small {
    color: #637795;
    font-size: 10px
}

.agency-hr-legend {
    display: grid;
    gap: 10px
}

.agency-hr-legend>div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263a5b;
    font-size: 10px;
    white-space: nowrap
}

.agency-hr-legend i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%
}

.agency-hr-legend b {
    margin-left: auto;
    font-weight: 600
}

.agency-hr-legend small {
    color: #667b9c;
    font-size: 9px;
    font-weight: 400
}

.agency-hr-events {
    display: grid;
    margin-top: 6px
}

.agency-hr-events>div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-hr-events>div:last-child {
    border: 0
}

.agency-hr-events i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 9px;
    background: #ffeded;
    color: #f43b45;
    font-style: normal
}

.agency-hr-events i.blue {
    background: #e6f2ff;
    color: #0878f5
}

.agency-hr-events i.purple {
    background: #f3e8ff;
    color: #8a2df3
}

.agency-hr-events i.green {
    background: #ddf8ea;
    color: #08a873
}

.agency-hr-events p {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px;
    margin: 0
}

.agency-hr-events b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-hr-events small,
.agency-hr-events time {
    color: #667b9c;
    font-size: 9px;
    white-space: nowrap
}

.agency-hr-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px
}

.agency-hr-quick-actions a,
.agency-hr-quick-actions button {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #e1eaf5;
    border-radius: 6px;
    background: #fbfdff;
    color: #0878f5;
    font: 600 10px 'DM Sans', sans-serif;
    text-decoration: none;
    cursor: pointer
}

.agency-hr-quick-actions span {
    color: #1d3150
}

.dark .agency-hr-tabs,
.dark .agency-hr-kpi,
.dark .agency-hr-toolbar,
.dark .agency-hr-main,
.dark .agency-hr-widget {
    border-color: #24384d;
    background: #122437
}

.dark .agency-hr-heading h1,
.dark .agency-hr-kpi b,
.dark .agency-hr-person b,
.dark .agency-hr-widget-title h2,
.dark .agency-hr-events b,
.dark .agency-hr-quick-actions span {
    color: #e9f0f8
}

.dark .agency-hr-tabs a,
.dark .agency-hr-kpi small,
.dark .agency-hr-table td,
.dark .agency-hr-footer {
    color: #bdcbe0
}

.dark .agency-hr-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-hr-table td,
.dark .agency-hr-events>div {
    border-color: #24384d
}

.dark .agency-hr-donut:before {
    background: #122437
}

.dark .agency-hr-toolbar select,
.dark .agency-hr-search,
.dark .agency-hr-footer>select,
.dark .agency-hr-pages button,
.dark .agency-hr-quick-actions a,
.dark .agency-hr-quick-actions button {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

@media(max-width:1180px) {
    .agency-hr-layout {
        grid-template-columns: minmax(0, 1fr) 300px
    }

    .agency-hr-department-summary {
        grid-template-columns: 105px minmax(0, 1fr)
    }

    .agency-hr-donut {
        width: 105px;
        height: 105px
    }

    .agency-hr-donut:before {
        inset: 18px
    }

    .agency-hr-tabs a {
        gap: 5px;
        padding: 0 5px;
        font-size: 10px
    }
}

@media(max-width:980px) {
    .agency-hr-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .agency-hr-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-hr-department-summary {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .agency-hr-legend {
        width: 100%;
        gap: 7px
    }

    .agency-hr-events>div {
        gap: 6px
    }

    .agency-hr-events time {
        display: none
    }
}

@media(max-width:720px) {
    .agency-hr-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .agency-hr-tabs a:nth-child(4) {
        border-right: 0
    }

    .agency-hr-tabs a {
        min-height: 44px
    }

    .agency-hr-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-hr-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-hr-sidebar>.agency-hr-widget:last-child {
        grid-column: 1/-1
    }

    .agency-hr-department-summary {
        grid-template-columns: 105px minmax(0, 1fr);
        justify-items: stretch
    }

    .agency-hr-donut {
        width: 102px;
        height: 102px
    }

    .agency-hr-legend {
        width: auto
    }

    .agency-hr-events time {
        display: block
    }
}

@media(max-width:560px) {
    .agency-hr-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-hr-heading h1 {
        font-size: 24px
    }

    .agency-hr-heading p {
        font-size: 12px
    }

    .agency-hr-heading .agency-demo-tag {
        margin-left: auto
    }

    .agency-hr-tabs a {
        gap: 4px;
        font-size: 9px
    }

    .agency-hr-tabs a span {
        overflow: hidden;
        text-overflow: ellipsis
    }

    .agency-hr-kpis {
        gap: 7px
    }

    .agency-hr-kpi {
        min-height: 74px;
        gap: 7px;
        padding: 8px
    }

    .agency-hr-kpi>span {
        width: 37px;
        height: 37px;
        font-size: 19px
    }

    .agency-hr-kpi small {
        font-size: 9px
    }

    .agency-hr-kpi b {
        font-size: 18px
    }

    .agency-hr-kpi em {
        font-size: 10px
    }

    .agency-hr-kpi em small {
        font-size: 8px
    }

    .agency-hr-toolbar {
        gap: 6px;
        padding: 8px
    }

    .agency-hr-toolbar select {
        min-width: 0;
        flex: 1 1 calc(50% - 4px);
        height: 36px;
        font-size: 9px
    }

    .agency-hr-search {
        flex-basis: 100%;
        height: 36px
    }

    .agency-hr-toolbar .btn {
        min-height: 35px;
        padding: 0 8px;
        font-size: 9px
    }

    .agency-hr-toolbar .agency-hr-add {
        margin-left: auto
    }

    .agency-hr-sidebar {
        grid-template-columns: 1fr
    }

    .agency-hr-sidebar>.agency-hr-widget:last-child {
        grid-column: auto
    }

    .agency-hr-department-summary {
        grid-template-columns: 115px minmax(0, 1fr)
    }

    .agency-hr-donut {
        width: 110px;
        height: 110px
    }

    .agency-hr-footer {
        flex-wrap: wrap
    }

    .agency-hr-footer>span {
        flex-basis: 100%
    }

    .agency-hr-footer>select {
        margin-left: auto
    }

    .agency-hr-pages button {
        width: 30px;
        height: 31px
    }

    .agency-hr-events time {
        display: block
    }
}

.agency-employee-employment-list,
.agency-employee-joiners {
    display: grid;
    margin-top: 9px
}

.agency-employee-employment-row {
    min-height: 31px;
    display: grid;
    grid-template-columns: 72px minmax(50px, 1fr) 55px;
    align-items: center;
    gap: 8px;
    color: #203452;
    font-size: 10px
}

.agency-employee-employment-row>span {
    height: 12px;
    overflow: hidden;
    border-radius: 9px;
    background: #e9f0fa
}

.agency-employee-employment-row>span i {
    height: 100%;
    display: block;
    border-radius: inherit
}

.agency-employee-employment-row>small {
    color: #657997;
    text-align: right;
    font-size: 9px;
    white-space: nowrap
}

.agency-employee-joiner {
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-employee-joiner:last-child {
    border: 0
}

.agency-employee-joiner>span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #852bfa;
    color: white;
    font-size: 10px;
    font-weight: 750
}

.agency-employee-joiner>span.teal {
    background: #059d83
}

.agency-employee-joiner>span.amber {
    background: #f59e0b
}

.agency-employee-joiner>span.blue {
    background: #0878f5
}

.agency-employee-joiner>span.green {
    background: #08ad76
}

.agency-employee-joiner p {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
    margin: 0
}

.agency-employee-joiner b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-employee-joiner small,
.agency-employee-joiner time {
    color: #667b9c;
    font-size: 9px
}

.agency-employee-joiner time {
    white-space: nowrap
}

.dark .agency-employee-employment-row,
.dark .agency-employee-joiner b {
    color: #e9f0f8
}

.dark .agency-employee-employment-row>span {
    background: #263b52
}

.dark .agency-employee-joiner {
    border-color: #24384d
}

.agency-hr-person>span.amber {
    background: #f59e0b
}

.agency-attendance-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin: 13px 0
}

.agency-attendance-kpis>article {
    min-width: 0;
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e7eef7;
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--shadow)
}

.agency-attendance-kpis>article>span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    color: #fff;
    font-size: 26px;
    font-weight: 700
}

.agency-attendance-kpis>article>span.blue {
    background: linear-gradient(145deg, #168dff, #0863ed)
}

.agency-attendance-kpis>article>span.amber {
    background: linear-gradient(145deg, #ffc329, #f3a800)
}

.agency-attendance-kpis>article>span.red {
    background: linear-gradient(145deg, #ff5b60, #f02f3c)
}

.agency-attendance-kpis>article>div {
    min-width: 0;
    display: grid;
    gap: 2px
}

.agency-attendance-kpis small {
    color: #657796;
    font-size: 11px;
    white-space: nowrap
}

.agency-attendance-kpis b {
    color: #111d3b;
    font: 800 23px Manrope, sans-serif
}

.agency-attendance-kpis em {
    display: grid;
    gap: 2px;
    margin-left: auto;
    color: #08ad76;
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
    white-space: nowrap
}

.agency-attendance-kpis em.negative {
    color: #f24047
}

.agency-attendance-kpis em small {
    font-size: 10px;
    font-weight: 400
}

.agency-attendance-kpis em.good {
    color: #08ad76
}

.agency-attendance-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 11px;
    padding: 9px
}

.agency-attendance-toolbar>select,
.agency-attendance-toolbar>label {
    height: 38px;
    min-width: 130px;
    flex: 1 1 130px;
    padding: 0 9px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #293e5e;
    font-size: 10px
}

.agency-attendance-toolbar>label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #647796
}

.agency-attendance-toolbar>label input {
    width: 41%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #526987;
    font-size: 9px
}

.agency-attendance-toolbar>label input::-webkit-calendar-picker-indicator {
    display: none
}

.agency-attendance-toolbar>.agency-hr-search {
    flex: 1.5 1 170px
}

.agency-attendance-toolbar>.agency-hr-search input {
    width: 100%;
    font-size: 10px
}

.agency-attendance-log {
    min-height: 41px;
    padding: 0 16px;
    background: linear-gradient(120deg, #0866f8, #0753e9)
}

.agency-attendance-log span {
    padding-left: 9px;
    border-left: 1px solid #ffffff70
}

.agency-attendance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    align-items: start;
    gap: 11px
}

.agency-attendance-main {
    min-width: 0;
    overflow: hidden;
    padding: 0 0 3px
}

.agency-attendance-record-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 13px 7px
}

.agency-attendance-record-heading h2 {
    margin: 0;
    color: #15223e;
    font: 800 16px Manrope, sans-serif
}

.agency-attendance-record-heading>div {
    display: flex;
    align-items: center;
    gap: 14px
}

.agency-attendance-record-heading a {
    color: #0866f8;
    font-size: 10px
}

.agency-attendance-record-heading .btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 10px
}

.agency-attendance-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse
}

.agency-attendance-table th {
    height: 38px;
    padding: 0 9px;
    background: #f2f7fd;
    color: #203452;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.agency-attendance-table td {
    height: 43px;
    padding: 5px 9px;
    border-bottom: 1px solid #edf1f6;
    color: #526888;
    font-size: 10px;
    white-space: nowrap
}

.agency-attendance-table tr:last-child td {
    border: 0
}

.agency-attendance-table th:first-child,
.agency-attendance-table td:first-child {
    width: 38px;
    padding-left: 13px
}

.agency-attendance-table input[type=checkbox] {
    width: 14px;
    height: 14px;
    accent-color: #0866f8
}

.agency-attendance-status {
    display: inline-flex;
    min-width: 68px;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 5px;
    background: #ddf8ea;
    color: #049762;
    font-size: 10px
}

.agency-attendance-status.leave {
    background: #e5f2ff;
    color: #0872e8
}

.agency-attendance-status.absent {
    background: #ffeded;
    color: #e93e48
}

.agency-attendance-status.late {
    background: #fff3d9;
    color: #d98800
}

.agency-attendance-status.present {
    background: #ddf8ea;
    color: #049762
}

.agency-attendance-sidebar {
    display: grid;
    gap: 10px
}

.agency-attendance-calendar {
    margin-top: 9px
}

.agency-attendance-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 8px;
    color: #273a59;
    font-size: 11px
}

.agency-attendance-month button {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #526991;
    font-size: 20px;
    cursor: pointer
}

.agency-attendance-weekdays,
.agency-attendance-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-items: center
}

.agency-attendance-weekdays {
    padding: 5px 0;
    color: #596d91;
    font-size: 9px
}

.agency-attendance-days {
    row-gap: 4px
}

.agency-attendance-days>span {
    position: relative;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #263a59;
    font-size: 10px
}

.agency-attendance-days>span.outside {
    color: #a0aec3
}

.agency-attendance-days>span.selected {
    background: #0878f5;
    color: white
}

.agency-attendance-days>span.marked:after {
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #08b780;
    content: ""
}

.agency-attendance-days>span.selected:after {
    background: #fff
}

.agency-attendance-summary {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 12px
}

.agency-attendance-summary .agency-hr-donut {
    background: conic-gradient(#08b780 0 75%, #ffad08 75% 87.5%, #ff454d 87.5% 95.8%, #7129f5 95.8% 100%)
}

.agency-attendance-legend {
    display: grid;
    gap: 11px
}

.agency-attendance-legend>div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263a5b;
    font-size: 10px;
    white-space: nowrap
}

.agency-attendance-legend i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%
}

.agency-attendance-legend b {
    margin-left: auto;
    font-weight: 600
}

.agency-attendance-legend small {
    color: #667b9c;
    font-size: 9px;
    font-weight: 400
}

.agency-attendance-activity {
    display: grid;
    margin-top: 7px
}

.agency-attendance-activity>div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #edf1f6
}

.agency-attendance-activity>div:last-child {
    border: 0
}

.agency-attendance-activity i {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #08b780;
    color: white;
    font-size: 16px;
    font-style: normal
}

.agency-attendance-activity i.amber {
    background: #ffad08
}

.agency-attendance-activity i.red {
    background: #f43b45
}

.agency-attendance-activity i.blue {
    background: #0878f5
}

.agency-attendance-activity p {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px;
    margin: 0
}

.agency-attendance-activity b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.agency-attendance-activity small,
.agency-attendance-activity time {
    color: #667b9c;
    font-size: 9px;
    white-space: nowrap
}

.agency-attendance-activity time {
    margin-left: auto
}

.dark .agency-attendance-kpis,
.dark .agency-attendance-toolbar,
.dark .agency-attendance-main,
.dark .agency-attendance-sidebar>.agency-hr-widget {
    border-color: #24384d;
    background: #122437
}

.dark .agency-attendance-kpis b,
.dark .agency-attendance-record-heading h2,
.dark .agency-attendance-month,
.dark .agency-attendance-activity b {
    color: #e9f0f8
}

.dark .agency-attendance-kpis small,
.dark .agency-attendance-table td,
.dark .agency-attendance-activity small,
.dark .agency-attendance-activity time {
    color: #bdcbe0
}

.dark .agency-attendance-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .agency-attendance-table td,
.dark .agency-attendance-activity>div {
    border-color: #24384d
}

.dark .agency-attendance-toolbar>select,
.dark .agency-attendance-toolbar>label {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .agency-attendance-summary .agency-hr-donut:before {
    background: #122437
}

@media(max-width:1050px) {
    .agency-attendance-layout {
        grid-template-columns: minmax(0, 1fr) 300px
    }

    .agency-attendance-summary {
        grid-template-columns: 105px minmax(0, 1fr)
    }

    .agency-attendance-summary .agency-hr-donut {
        width: 105px;
        height: 105px
    }

    .agency-attendance-summary .agency-hr-donut:before {
        inset: 18px
    }
}

@media(max-width:850px) {
    .agency-attendance-layout {
        grid-template-columns: 1fr
    }

    .agency-attendance-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .agency-attendance-summary {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .agency-attendance-legend {
        width: 100%
    }

    .agency-attendance-calendar {
        max-width: 280px;
        margin-inline: auto
    }
}

@media(max-width:650px) {
    .agency-attendance-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }

    .agency-attendance-kpis>article {
        min-height: 75px;
        gap: 7px;
        padding: 8px
    }

    .agency-attendance-kpis>article>span {
        width: 38px;
        height: 38px;
        font-size: 20px
    }

    .agency-attendance-kpis small {
        font-size: 9px
    }

    .agency-attendance-kpis b {
        font-size: 18px
    }

    .agency-attendance-kpis em {
        font-size: 10px
    }

    .agency-attendance-kpis em small {
        font-size: 8px
    }

    .agency-attendance-toolbar {
        gap: 6px;
        padding: 8px
    }

    .agency-attendance-toolbar>select,
    .agency-attendance-toolbar>label {
        min-width: 0;
        flex: 1 1 calc(50% - 4px);
        height: 36px;
        font-size: 9px
    }

    .agency-attendance-toolbar>.agency-hr-search {
        flex-basis: 100%
    }

    .agency-attendance-layout {
        gap: 8px
    }

    .agency-attendance-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .agency-attendance-sidebar>.agency-hr-widget:last-child {
        grid-column: 1/-1
    }

    .agency-attendance-summary {
        grid-template-columns: 100px minmax(0, 1fr);
        justify-items: stretch
    }

    .agency-attendance-summary .agency-hr-donut {
        width: 98px;
        height: 98px
    }

    .agency-attendance-summary .agency-hr-donut:before {
        inset: 17px
    }

    .agency-attendance-activity time {
        display: none
    }

    .agency-attendance-log {
        min-height: 37px;
        padding: 0 10px;
        font-size: 10px
    }
}

@media(max-width:480px) {
    .agency-attendance-sidebar {
        grid-template-columns: 1fr
    }

    .agency-attendance-sidebar>.agency-hr-widget:last-child {
        grid-column: auto
    }

    .agency-attendance-summary {
        grid-template-columns: 115px minmax(0, 1fr)
    }

    .agency-attendance-summary .agency-hr-donut {
        width: 108px;
        height: 108px
    }

    .agency-attendance-record-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .agency-attendance-record-heading>div {
        margin-left: auto
    }

    .agency-hr-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .agency-hr-tabs a {
        font-size: 9px
    }
}

.leave-page {
    display: grid;
    gap: 12px
}

.leave-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.leave-page-heading h1 {
    margin: 0;
    color: #101a39;
    font: 800 28px Manrope, sans-serif
}

.leave-page-heading p {
    margin: 3px 0 0;
    color: #5d6fa0;
    font-size: 13px
}

.leave-page-heading .btn {
    min-height: 42px
}

.leave-page-heading .btn span {
    margin-left: 9px;
    padding-left: 9px;
    border-left: 1px solid #ffffff70
}

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

.leave-kpis>article {
    min-width: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #e7eef7;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow)
}

.leave-kpis>article>span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 7px;
    color: #fff;
    font-size: 26px;
    font-weight: 700
}

.leave-kpis .blue {
    background: linear-gradient(145deg, #168dff, #0863ed)
}

.leave-kpis .green {
    background: linear-gradient(145deg, #10c58b, #05a971)
}

.leave-kpis .amber {
    background: linear-gradient(145deg, #ffc329, #f3a800)
}

.leave-kpis article div {
    display: grid;
    gap: 3px
}

.leave-kpis small {
    color: #657796;
    font-size: 11px
}

.leave-kpis b {
    color: #111d3b;
    font: 800 23px Manrope, sans-serif
}

.leave-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 11px
}

.leave-main-column,
.leave-sidebar {
    min-width: 0;
    display: grid;
    gap: 10px
}

.leave-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 9px
}

.leave-toolbar>select,
.leave-date-range,
.leave-search {
    height: 38px;
    min-width: 115px;
    flex: 1 1 120px;
    padding: 0 9px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #334b6c;
    font-size: 10px
}

.leave-date-range,
.leave-search {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #627795
}

.leave-date-range input {
    width: 42%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #526987;
    font-size: 9px
}

.leave-date-range input::-webkit-calendar-picker-indicator {
    display: none
}

.leave-search {
    flex: 1.35 1 165px
}

.leave-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #334b6c;
    font: inherit
}

.leave-table-panel {
    min-width: 0;
    overflow: hidden;
    padding: 0 0 3px
}

.leave-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 13px 9px
}

.leave-table-heading h2,
.leave-widget-heading h2 {
    margin: 0;
    color: #15223e;
    font: 800 15px Manrope, sans-serif
}

.leave-table-heading>div {
    display: flex;
    align-items: center;
    gap: 12px
}

.leave-table-heading .btn {
    min-height: 33px;
    padding: 0 10px;
    font-size: 10px
}

.leave-view-all,
.leave-widget-heading a {
    border: 0;
    background: none;
    color: #0675f5;
    font: 600 10px 'DM Sans', sans-serif;
    text-decoration: underline;
    cursor: pointer
}

.leave-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse
}

.leave-table th {
    height: 36px;
    padding: 0 8px;
    background: #f2f7fd;
    color: #203452;
    font-size: 9px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap
}

.leave-table td {
    height: 43px;
    padding: 5px 8px;
    border-bottom: 1px solid #edf1f6;
    color: #526888;
    font-size: 9px;
    white-space: nowrap
}

.leave-table tr:last-child td {
    border: 0
}

.leave-person {
    display: flex;
    align-items: center;
    gap: 8px
}

.leave-person>span,
.leave-mini-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #0866f8;
    color: #fff;
    font-size: 10px;
    font-weight: 700
}

.leave-person div {
    display: grid;
    gap: 2px
}

.leave-person b {
    color: #0767ec;
    font-size: 10px
}

.leave-person small {
    color: #7182a5;
    font-size: 9px
}

.leave-type,
.leave-status {
    display: inline-flex;
    justify-content: center;
    padding: 5px 7px;
    border-radius: 5px;
    background: #e4f1ff;
    color: #0874e8;
    font-size: 9px
}

.leave-type.sick {
    background: #ffe5e5;
    color: #e43e45
}

.leave-type.personal {
    background: #f1e4ff;
    color: #852ee4
}

.leave-type.maternity {
    background: #e1fbef;
    color: #009a68
}

.leave-type.unpaid {
    background: #edf0f5;
    color: #626e88
}

.leave-status {
    min-width: 68px;
    background: #fff1cf;
    color: #d88700
}

.leave-status.approved {
    background: #dcf8e8;
    color: #009762
}

.leave-status.rejected {
    background: #ffe3e3;
    color: #e5363f
}

.leave-reason-cell {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis
}

.leave-row-actions {
    display: flex;
    gap: 4px
}

.leave-row-actions button {
    width: 25px;
    height: 25px;
    border: 1px solid #dce6f2;
    border-radius: 5px;
    background: #f8fbff;
    color: #059768;
    font-weight: 700;
    cursor: pointer
}

.leave-row-actions button+button {
    color: #e43d45
}

.leave-row-actions button:disabled {
    opacity: .5
}

.leave-dash {
    color: #9aa7bb
}

.leave-footer {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    color: #657796;
    font-size: 10px
}

.leave-footer>span {
    margin-right: auto
}

.leave-footer label {
    display: flex;
    align-items: center;
    gap: 5px
}

.leave-footer select {
    height: 31px;
    border: 1px solid #dce6f2;
    border-radius: 5px;
    background: #fff;
    color: #354b6a;
    font-size: 10px
}

.leave-footer #leave-pagination {
    display: flex;
    gap: 4px
}

.leave-footer #leave-pagination button {
    min-width: 30px;
    height: 30px;
    border: 1px solid #dce6f2;
    border-radius: 5px;
    background: #fff;
    color: #3e5475;
    cursor: pointer
}

.leave-footer #leave-pagination button.current {
    border-color: #0866f8;
    background: #0866f8;
    color: #fff
}

.leave-widget {
    padding: 11px 12px
}

.leave-widget-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px
}

.leave-widget-heading>span {
    color: #6a7ba0;
    font-size: 9px
}

.leave-balance {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid #edf1f6
}

.leave-balance:last-child {
    border: 0
}

.balance-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 7px;
    background: #e5f1ff;
    color: #0873ec;
    font-size: 16px
}

.balance-1 {
    background: #ffe8e8;
    color: #ed4249
}

.balance-2 {
    background: #f3e8ff;
    color: #8c31e8
}

.balance-3 {
    background: #e2f9ed;
    color: #09a76e
}

.balance-4 {
    background: #edf0f5;
    color: #64728c
}

.leave-balance>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 5px
}

.leave-balance>div>div {
    display: flex;
    justify-content: space-between;
    gap: 5px
}

.leave-balance b {
    overflow: hidden;
    color: #1d3150;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.leave-balance small {
    color: #67799a;
    font-size: 9px;
    white-space: nowrap
}

.leave-balance i {
    height: 6px;
    overflow: hidden;
    border-radius: 6px;
    background: #e8edf5
}

.leave-balance i span {
    height: 100%;
    display: block;
    border-radius: 6px;
    background: #0878f5
}

.balance-1~div i span {
    background: #ef454c
}

.balance-2~div i span {
    background: #852fe7
}

.balance-3~div i span {
    background: #09a76e
}

.balance-4~div i span {
    background: #727c98
}

.leave-side-row,
.leave-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #edf1f6
}

.leave-side-row:last-child,
.leave-activity-row:last-child {
    border: 0
}

.leave-mini-avatar {
    width: 32px;
    height: 32px;
    background: #ff8b00
}

.avatar-1 {
    background: #ee3c49
}

.avatar-2 {
    background: #852ee8
}

.avatar-3 {
    background: #0878f5
}

.leave-side-row>div,
.leave-activity-row>div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px
}

.leave-side-row b,
.leave-activity-row b {
    overflow: hidden;
    color: #172744;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.leave-side-row small,
.leave-activity-row small,
.leave-activity-row time {
    color: #6a7b9c;
    font-size: 9px
}

.leave-side-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.leave-activity-row i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: #08b780;
    color: white;
    font-size: 16px;
    font-style: normal
}

.leave-activity-row i.activity-amber {
    background: #ffad08
}

.leave-activity-row i.activity-red {
    background: #ef3c46
}

.leave-empty {
    margin: 10px 0;
    color: #7a8aa6;
    font-size: 10px
}

.leave-dialog {
    width: min(540px, calc(100vw - 24px));
    max-height: min(90vh, 700px);
    padding: 0;
    border: 1px solid #dfe8f3;
    border-radius: 10px;
    background: #fff;
    color: #182542;
    box-shadow: 0 20px 70px #10284c55
}

.leave-dialog::backdrop {
    background: #13233e88;
    backdrop-filter: blur(2px)
}

.leave-dialog form {
    padding: 18px
}

.leave-dialog-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid #e7edf5
}

.leave-dialog-heading h2 {
    margin: 0;
    font: 800 18px Manrope, sans-serif
}

.leave-dialog-heading p {
    margin: 4px 0 0;
    color: #697ba0;
    font-size: 11px
}

.leave-close {
    border: 0;
    background: none;
    color: #65769b;
    font-size: 24px;
    cursor: pointer
}

.leave-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 12px;
    padding: 16px 0
}

.leave-form-grid label {
    display: grid;
    gap: 6px;
    color: #263856;
    font-size: 11px;
    font-weight: 600
}

.leave-form-grid label>b {
    display: inline;
    color: #ee4148
}

.leave-form-grid input,
.leave-form-grid select,
.leave-form-grid textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #344b6c;
    font: 11px 'DM Sans', sans-serif
}

.leave-form-grid textarea {
    resize: vertical
}

.leave-form-grid .leave-reason {
    grid-column: 1/-1
}

.leave-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e7edf5
}

.dark .leave-page-heading h1,
.dark .leave-kpis b,
.dark .leave-table-heading h2,
.dark .leave-widget-heading h2,
.dark .leave-person b,
.dark .leave-balance b,
.dark .leave-side-row b,
.dark .leave-activity-row b {
    color: #e9f0f8
}

.dark .leave-kpis,
.dark .leave-toolbar,
.dark .leave-table-panel,
.dark .leave-widget {
    border-color: #24384d;
    background: #122437
}

.dark .leave-kpis small,
.dark .leave-table td,
.dark .leave-footer,
.dark .leave-page-heading p {
    color: #bdcbe0
}

.dark .leave-table th {
    background: #172b40;
    color: #e9f0f8
}

.dark .leave-table td,
.dark .leave-balance,
.dark .leave-side-row,
.dark .leave-activity-row {
    border-color: #24384d
}

.dark .leave-toolbar>select,
.dark .leave-date-range,
.dark .leave-search,
.dark .leave-footer select,
.dark .leave-footer #leave-pagination button {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .leave-dialog {
    border-color: #2b4056;
    background: #122437;
    color: #e9f0f8
}

.dark .leave-form-grid label {
    color: #dbe7f5
}

.dark .leave-form-grid input,
.dark .leave-form-grid select,
.dark .leave-form-grid textarea {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

@media(max-width:1050px) {
    .leave-layout {
        grid-template-columns: minmax(0, 1fr) 275px
    }

    .leave-date-range {
        flex-basis: 190px
    }
}

@media(max-width:820px) {
    .leave-layout {
        grid-template-columns: 1fr
    }

    .leave-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .leave-widget {
        min-width: 0
    }

    .leave-balance>div>div {
        display: grid
    }

    .leave-activity-row time {
        display: none
    }
}

@media(max-width:600px) {
    .leave-page-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .leave-page-heading h1 {
        font-size: 24px
    }

    .leave-page-heading .btn {
        margin-left: auto
    }

    .leave-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }

    .leave-kpis>article {
        min-height: 74px;
        gap: 7px;
        padding: 8px
    }

    .leave-kpis>article>span {
        width: 38px;
        height: 38px;
        font-size: 20px
    }

    .leave-kpis small {
        font-size: 9px
    }

    .leave-kpis b {
        font-size: 18px
    }

    .leave-toolbar {
        gap: 6px;
        padding: 8px
    }

    .leave-toolbar>select,
    .leave-date-range {
        min-width: 0;
        flex: 1 1 calc(50% - 4px);
        height: 36px;
        font-size: 9px
    }

    .leave-search {
        flex-basis: 100%;
        height: 36px
    }

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

    .leave-sidebar>.leave-widget:last-child {
        grid-column: 1/-1
    }

    .leave-footer {
        flex-wrap: wrap
    }

    .leave-footer>span {
        flex-basis: 100%
    }

    .leave-footer #leave-pagination {
        margin-left: auto
    }

    .leave-form-grid {
        grid-template-columns: 1fr
    }

    .leave-form-grid .leave-reason {
        grid-column: auto
    }

    .leave-dialog form {
        padding: 14px
    }
}

@media(max-width:430px) {
    .leave-sidebar {
        grid-template-columns: 1fr
    }

    .leave-sidebar>.leave-widget:last-child {
        grid-column: auto
    }

    .leave-footer label {
        margin-left: auto
    }

    .leave-table-heading {
        align-items: flex-start
    }

    .leave-table-heading h2 {
        font-size: 13px
    }
}

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

.po-form-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.po-form-top>div:first-child>a {
    color: #0878f5;
    font-size: 11px;
    font-weight: 600
}

.po-form-top h1 {
    margin: 8px 0 3px;
    color: #111d3b;
    font: 800 26px Manrope, sans-serif
}

.po-form-top p {
    margin: 0;
    color: #657796;
    font-size: 12px
}

.po-form-top>div:last-child {
    display: flex;
    gap: 8px
}

.po-form-top .btn {
    min-height: 39px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px
}

.po-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 12px
}

.po-form-main {
    display: grid;
    gap: 11px
}

.po-form-section {
    min-width: 0;
    padding: 14px
}

.po-form-section>header {
    display: grid;
    gap: 3px;
    margin-bottom: 13px
}

.po-form-section>header b {
    color: #172440;
    font: 800 15px Manrope, sans-serif
}

.po-form-section>header small {
    color: #697ca0;
    font-size: 10px
}

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

.po-form-grid label {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: #223653;
    font-size: 10px;
    font-weight: 600
}

.po-form-grid label em,
.po-line-head em {
    color: #ef4148;
    font-style: normal
}

.po-form-grid input,
.po-form-grid select,
.po-form-grid textarea,
.po-line input {
    width: 100%;
    min-width: 0;
    min-height: 37px;
    padding: 8px 10px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #344b6c;
    font: 10px 'DM Sans', sans-serif
}

.po-form-grid textarea {
    resize: vertical
}

.po-full-width {
    grid-column: 1/-1
}

.po-line-head,
.po-line {
    display: grid;
    grid-template-columns: 22px minmax(110px, 1.25fr) minmax(100px, 1.2fr) 72px 90px 85px 25px;
    align-items: center;
    gap: 7px
}

.po-line-head {
    padding: 0 0 7px;
    color: #203452;
    font-size: 9px;
    font-weight: 700
}

.po-line {
    padding: 6px 0;
    border-top: 1px solid #edf1f6
}

.po-line>span:first-child {
    color: #536887;
    font-size: 10px
}

.po-line input {
    height: 35px;
    padding: 6px 8px
}

.po-line-total {
    color: #182542;
    font-size: 10px;
    white-space: nowrap
}

.po-remove-line {
    width: 24px;
    height: 27px;
    border: 0;
    background: transparent;
    color: #7382a0;
    font-size: 19px;
    cursor: pointer
}

.po-remove-line:hover {
    color: #ec4149
}

.po-add-line {
    min-height: 34px;
    margin-top: 8px;
    padding: 0 11px;
    color: #0878f5;
    font-size: 10px
}

.po-form-aside {
    display: grid;
    gap: 11px
}

.po-summary {
    display: grid;
    gap: 12px;
    padding: 14px
}

.po-summary h2 {
    margin: 0 0 3px;
    color: #172440;
    font: 800 15px Manrope, sans-serif
}

.po-summary>div,
.po-summary>label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #647795;
    font-size: 10px
}

.po-summary>div b {
    color: #172440;
    font-weight: 600
}

.po-summary label span {
    display: flex;
    align-items: center;
    gap: 5px
}

.po-summary label input {
    width: 65px;
    height: 30px;
    padding: 4px 6px;
    border: 1px solid #dce6f2;
    border-radius: 5px;
    color: #344b6c
}

.po-summary .po-total {
    padding: 10px 8px;
    border-radius: 5px;
    background: #f0f6fd;
    color: #15223e;
    font-weight: 800
}

.po-summary .po-total b {
    font: 800 16px Manrope, sans-serif
}

.po-summary>.btn {
    min-height: 37px;
    padding: 0 10px;
    text-align: center;
    font-size: 10px
}

.po-summary-note {
    padding: 13px
}

.po-summary-note b {
    color: #172440;
    font: 800 12px Manrope, sans-serif
}

.po-summary-note p {
    margin: 6px 0 0;
    color: #66799c;
    font-size: 10px;
    line-height: 1.55
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.dark .po-form-top h1,
.dark .po-form-section>header b,
.dark .po-summary h2,
.dark .po-summary>div b,
.dark .po-line-total,
.dark .po-summary-note b {
    color: #e9f0f8
}

.dark .po-form-top p,
.dark .po-form-grid label,
.dark .po-line-head,
.dark .po-summary>div,
.dark .po-summary>label {
    color: #bdcbe0
}

.dark .po-line {
    border-color: #24384d
}

.dark .po-form-grid input,
.dark .po-form-grid select,
.dark .po-form-grid textarea,
.dark .po-line input,
.dark .po-summary label input {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .po-summary .po-total {
    background: #172b40;
    color: #e9f0f8
}

.dark .po-summary-note p {
    color: #bdcbe0
}

@media(max-width:1000px) {
    .po-form-layout {
        grid-template-columns: minmax(0, 1fr) 245px
    }

    .po-line-head,
    .po-line {
        grid-template-columns: 18px minmax(95px, 1.2fr) minmax(85px, 1fr) 62px 76px 70px 22px;
        gap: 5px
    }
}

@media(max-width:760px) {
    .po-form-layout {
        grid-template-columns: 1fr
    }

    .po-form-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .po-form-aside .po-summary {
        grid-row: span 2
    }
}

@media(max-width:560px) {
    .po-form-top {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .po-form-top>div:last-child {
        width: 100%;
        justify-content: flex-end
    }

    .po-form-top h1 {
        font-size: 23px
    }

    .po-form-grid {
        grid-template-columns: 1fr
    }

    .po-full-width {
        grid-column: auto
    }

    .po-form-aside {
        grid-template-columns: 1fr
    }

    .po-form-aside .po-summary {
        grid-row: auto
    }

    .po-line-head {
        display: none
    }

    .po-line {
        grid-template-columns: 19px minmax(0, 1fr) 66px 75px 23px
    }

    .po-line label:nth-of-type(2) {
        display: none
    }

    .po-line-total {
        display: none
    }
}

.invoice-create-page {
    display: grid;
    gap: 13px
}

.invoice-create-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.invoice-create-heading>div:first-child>a {
    color: #0878f5;
    font-size: 11px;
    font-weight: 600
}

.invoice-create-heading h1 {
    margin: 5px 0 2px;
    color: #101a39;
    font: 800 27px Manrope, sans-serif
}

.invoice-create-heading p {
    margin: 0;
    color: #6174a1;
    font-size: 12px
}

.invoice-create-actions {
    display: flex;
    gap: 7px
}

.invoice-create-actions .btn {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    font-size: 10px
}

.invoice-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .92fr);
    align-items: start;
    gap: 12px
}

.invoice-create-fields {
    display: grid;
    gap: 10px;
    min-width: 0
}

.invoice-create-section {
    min-width: 0;
    padding: 12px
}

.invoice-create-section h2 {
    margin: 0 0 9px;
    color: #162440;
    font: 800 14px Manrope, sans-serif
}

.invoice-create-section h2 small {
    color: #6a7ca0;
    font: 500 11px 'DM Sans', sans-serif
}

.invoice-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px
}

.invoice-section-heading h2 {
    margin: 0
}

.invoice-section-heading p {
    margin: 3px 0 0;
    color: #687da2;
    font-size: 10px
}

.invoice-section-heading>a {
    color: #0878f5;
    font-size: 10px
}

.invoice-create-grid {
    display: grid;
    gap: 9px 10px
}

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

.invoice-create-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.invoice-create-grid label,
.invoice-client-field {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: #334b70;
    font-size: 10px;
    font-weight: 600
}

.invoice-create-grid label em,
.invoice-client-field em,
.invoice-line-labels em {
    color: #ef4148;
    font-style: normal
}

.invoice-create-grid input,
.invoice-create-grid select,
.invoice-create-grid textarea,
.invoice-client-field input {
    width: 100%;
    min-width: 0;
    min-height: 35px;
    padding: 7px 9px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
    color: #273d60;
    font: 10px 'DM Sans', sans-serif
}

.invoice-create-grid textarea {
    resize: vertical
}

.invoice-client-field {
    margin-bottom: 9px
}

.invoice-address {
    grid-column: span 2
}

.invoice-line-labels,
.invoice-create-line {
    display: grid;
    grid-template-columns: 20px minmax(115px, 1.55fr) minmax(60px, .8fr) 55px minmax(70px, .85fr) minmax(70px, .85fr) 23px;
    align-items: center;
    gap: 6px
}

.invoice-line-labels {
    padding: 0 0 6px;
    color: #253a5b;
    font-size: 9px;
    font-weight: 700
}

.invoice-create-line {
    padding: 5px 0;
    border-top: 1px solid #eaf0f6
}

.invoice-create-line>span {
    color: #647795;
    font-size: 9px
}

.invoice-create-line label {
    min-width: 0
}

.invoice-create-line input {
    width: 100%;
    min-width: 0;
    height: 31px;
    padding: 5px 6px;
    border: 1px solid #dce6f2;
    border-radius: 5px;
    background: #fff;
    color: #2b4163;
    font: 9px 'DM Sans', sans-serif
}

.invoice-create-line>b {
    color: #354b6b;
    font-size: 9px;
    white-space: nowrap
}

.invoice-create-line>button {
    width: 22px;
    height: 25px;
    border: 0;
    background: transparent;
    color: #7181a0;
    font-size: 17px;
    cursor: pointer
}

.invoice-create-line>button:hover {
    color: #e43e47
}

.invoice-add-item {
    min-height: 31px;
    margin-top: 6px;
    padding: 0 10px;
    color: #0878f5;
    font-size: 10px
}

.invoice-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.invoice-total-row {
    min-height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #edf1f6;
    color: #657798;
    font-size: 10px
}

.invoice-total-row b {
    color: #243a5b;
    font-weight: 600
}

.invoice-total-row label {
    color: #657798
}

.invoice-total-row input,
.invoice-total-row select {
    width: 100px;
    height: 26px;
    padding: 3px 6px;
    border: 1px solid #dce6f2;
    border-radius: 5px;
    background: #fff;
    color: #2e4365;
    font: 10px 'DM Sans', sans-serif
}

.invoice-total-row input[hidden] {
    display: none
}

.invoice-total-row.grand {
    margin-top: 5px;
    padding: 4px 7px;
    background: #eaf4ff;
    color: #0b60e8;
    font-weight: 800
}

.invoice-total-row.grand b {
    color: #0866f8;
    font: 800 16px Manrope, sans-serif
}

.invoice-create-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.invoice-create-footer .btn {
    min-height: 37px;
    font-size: 10px
}

.invoice-create-fields input[type=file] {
    padding: 6px
}

.invoice-create-fields label small {
    color: #6e7fa1;
    font-size: 9px;
    font-weight: 400
}

.invoice-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px
}

.invoice-attachment-list>span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border: 1px solid #dce6f2;
    border-radius: 5px;
    color: #506687;
    font-size: 9px
}

.invoice-attachment-list button {
    border: 0;
    background: none;
    color: #ed4249;
    cursor: pointer
}

.invoice-preview-panel {
    position: sticky;
    top: 86px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e1eaf5;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow)
}

.invoice-preview-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #e5ecf5
}

.invoice-preview-tabs button {
    min-height: 39px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: #fff;
    color: #66799d;
    font: 600 10px 'DM Sans', sans-serif;
    cursor: pointer
}

.invoice-preview-tabs button.active {
    border-bottom-color: #0878f5;
    color: #0878f5
}

.invoice-preview-document {
    min-height: 700px;
    margin: 9px;
    padding: 17px 16px;
    border: 1px solid #e6ebf2;
    background: #fff;
    color: #121a2d;
    font-family: Arial, sans-serif
}

.invoice-preview-document>header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px
}

.invoice-preview-document>header>div:first-child {
    display: grid;
    gap: 4px
}

.invoice-preview-document>header>div:first-child>b {
    color: #111d32;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -1px
}

.invoice-preview-document>header small {
    color: #53627e;
    font-size: 8px
}

.invoice-preview-document>header>div:last-child {
    text-align: right
}

.invoice-preview-document>header h2 {
    margin: 0 0 3px;
    font-size: 19px
}

.invoice-preview-document>header>div:last-child>b {
    color: #314767;
    font-size: 10px
}

.invoice-preview-rule {
    height: 1px;
    margin: 13px 0;
    background: #acb5c2
}

.invoice-preview-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px
}

.invoice-preview-parties>div {
    display: grid;
    gap: 3px;
    font-size: 9px
}

.invoice-preview-parties>div>b {
    font-size: 11px
}

.invoice-preview-parties>div>strong {
    font-size: 12px
}

.invoice-preview-parties>div>span {
    color: #43536e
}

.invoice-preview-parties dl {
    display: grid;
    gap: 5px;
    margin: 0;
    font-size: 9px
}

.invoice-preview-parties dl>div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 5px
}

.invoice-preview-parties dt {
    font-weight: 700
}

.invoice-preview-parties dd {
    margin: 0;
    overflow-wrap: anywhere
}

.invoice-preview-document table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8px
}

.invoice-preview-document th,
.invoice-preview-document td {
    padding: 6px 5px;
    border: 1px solid #dce5f0;
    text-align: left
}

.invoice-preview-document th {
    background: #edf5ff;
    color: #1b3152
}

.invoice-preview-document th:last-child,
.invoice-preview-document td:last-child {
    text-align: right
}

.invoice-preview-totals {
    width: min(250px, 100%);
    display: grid;
    gap: 0;
    margin: 12px 0 0 auto
}

.invoice-preview-totals>div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 6px;
    border-bottom: 1px solid #e5ebf2;
    font-size: 9px
}

.invoice-preview-totals>div.grand {
    background: #eaf4ff;
    font-size: 12px;
    font-weight: 800
}

.invoice-preview-notes {
    margin-top: 15px;
    padding-top: 9px;
    border-top: 1px solid #e6ebf2;
    font-size: 8px
}

.invoice-preview-notes p {
    margin: 4px 0;
    color: #4c5d79;
    white-space: pre-wrap
}

.invoice-preview-document>footer {
    margin-top: 24px;
    padding-top: 9px;
    border-top: 1px solid #e6ebf2;
    color: #314767;
    font-size: 9px;
    font-weight: 700;
    text-align: center
}

.invoice-preview-panel.pdf-preview-mode .invoice-preview-document {
    min-height: 840px;
    padding: 25px 22px
}

.invoice-create-page .toast {
    z-index: 55
}

/* Keep global confirmation messages centered and fully inside the viewport. */
.toast {
    left: 50%;
    right: auto;
    bottom: max(24px, env(safe-area-inset-bottom));
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;
    text-align: center;
    transform: translate(-50%, 8px);
}

.toast.show {
    transform: translate(-50%, 0);
}

.dark .invoice-create-heading h1,
.dark .invoice-create-section h2 {
    color: #e9f0f8
}

.dark .invoice-create-heading p,
.dark .invoice-section-heading p {
    color: #bdcbe0
}

.dark .invoice-create-section,
.dark .invoice-preview-panel {
    border-color: #24384d;
    background: #122437
}

.dark .invoice-create-grid label,
.dark .invoice-client-field {
    color: #dbe7f5
}

.dark .invoice-create-grid input,
.dark .invoice-create-grid select,
.dark .invoice-create-grid textarea,
.dark .invoice-client-field input,
.dark .invoice-create-line input,
.dark .invoice-total-row input,
.dark .invoice-total-row select {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .invoice-line-labels,
.dark .invoice-total-row,
.dark .invoice-total-row label {
    color: #bdcbe0
}

.dark .invoice-create-line {
    border-color: #24384d
}

.dark .invoice-create-line>b,
.dark .invoice-total-row b {
    color: #e9f0f8
}

.dark .invoice-preview-tabs,
.dark .invoice-preview-tabs button {
    background: #122437;
    border-color: #24384d;
    color: #c2d0e2
}

@media(max-width:1120px) {
    .invoice-create-layout {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .8fr)
    }

    .invoice-create-grid.three {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .invoice-create-grid.three>label:last-child:nth-child(3n) {
        grid-column: 1/-1
    }
}

@media(max-width:850px) {
    .invoice-create-layout {
        grid-template-columns: 1fr
    }

    .invoice-preview-panel {
        position: static;
        grid-row: 1
    }

    .invoice-preview-document {
        min-height: 550px
    }

    .invoice-create-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .invoice-create-actions {
        margin-left: auto
    }
}

@media(max-width:560px) {
    .invoice-create-heading h1 {
        font-size: 23px
    }

    .invoice-create-actions {
        width: 100%;
        justify-content: flex-end
    }

    .invoice-create-actions .btn {
        padding: 0 8px;
        font-size: 9px
    }

    .invoice-create-grid.three,
    .invoice-create-grid.two,
    .invoice-bottom-grid {
        grid-template-columns: 1fr
    }

    .invoice-address {
        grid-column: auto
    }

    .invoice-line-labels {
        display: none
    }

    .invoice-create-line {
        grid-template-columns: 18px minmax(0, 1fr) 48px 62px 20px
    }

    .invoice-create-line label:nth-of-type(2) {
        display: none
    }

    .invoice-create-line>b {
        display: none
    }

    .invoice-preview-document {
        margin: 5px;
        padding: 12px 9px
    }

    .invoice-preview-document>header>div:first-child>b {
        font-size: 18px
    }

    .invoice-preview-parties {
        grid-template-columns: 1fr 1fr
    }

    .invoice-preview-parties dl>div {
        grid-template-columns: 65px minmax(0, 1fr)
    }
}

@media print {
    html,
    body {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body * {
        visibility: hidden !important
    }

    .invoice-preview-page,
    .invoice-preview-page *,
    .quotation-preview-page,
    .quotation-preview-page * {
        visibility: visible !important
    }

    .invoice-preview-page,
    .quotation-preview-page {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .invoice-preview-toolbar,
    .quotation-preview-toolbar,
    .invoice-preview-empty,
    .quotation-preview-empty {
        display: none !important;
    }
}

/* Domain form dialog: roomy, sectioned layout with a fixed action footer. */
.domain-dialog {
    display: flex;
    flex-direction: column;
    width: min(840px, 100%);
    height: min(94dvh, 940px);
    max-height: calc(100dvh - 24px);
    padding: 0;
    overflow: hidden;
    border-radius: 16px
}

.domain-dialog>.modal-close {
    top: 20px;
    right: 20px;
    background: #fff;
    color: #607392
}

.domain-dialog>.modal-heading {
    display: block;
    flex: none;
    margin: 0;
    padding: 26px 72px 18px 32px;
    border-bottom: 1px solid var(--line)
}

.domain-dialog>.modal-heading .page-icon {
    display: none
}

.domain-dialog>.modal-heading h2 {
    margin: 0 0 5px;
    font: 800 27px Manrope, Arial, sans-serif;
    color: var(--ink)
}

.domain-dialog>.modal-heading p {
    font-size: 14px;
    color: var(--muted)
}

.domain-dialog>#item-form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column
}

.domain-dialog #modal-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding: 4px 32px 20px
}

.domain-dialog .domain-form-section {
    grid-column: 1/-1;
    margin-top: 12px;
    padding: 16px 0 5px;
    border-top: 1px solid var(--line)
}

.domain-dialog .domain-form-section:first-child {
    margin-top: 0;
    border-top: 0
}

.domain-dialog .domain-form-section h3 {
    margin: 0;
    color: var(--ink);
    font: 800 17px Manrope, Arial, sans-serif
}

.domain-dialog .domain-form-section p {
    margin: 5px 0 0 26px;
    color: var(--muted);
    font-size: 13px
}

.domain-dialog .modal-field {
    display: block;
    margin: 7px 0 10px
}

.domain-dialog .modal-field>.field-icon {
    display: none
}

.domain-dialog .field-content {
    gap: 6px
}

.domain-dialog .field-content label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink)
}

.domain-dialog .field-content input,
.domain-dialog .field-content select,
.domain-dialog .field-content textarea {
    height: 44px;
    padding: 0 12px;
    border-color: #d5e2f2;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 14px
}

.domain-dialog .field-content textarea {
    height: 84px;
    min-height: 84px;
    padding: 11px 12px;
    resize: vertical
}

.domain-dialog .field-content input:focus,
.domain-dialog .field-content select:focus,
.domain-dialog .field-content textarea:focus {
    border-color: #75aaff;
    box-shadow: 0 0 0 3px rgba(8, 102, 248, .13);
    outline: 0
}

.domain-dialog .domain-field-full {
    grid-column: 1/-1
}

.domain-dialog .modal-actions {
    flex: none;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 14px 32px;
    border-top: 1px solid var(--line);
    background: var(--white)
}

.domain-dialog .modal-actions .favorite-check,
.domain-dialog .modal-actions #reminder-option {
    display: none !important
}

.domain-dialog .modal-actions .btn {
    min-width: 112px;
    min-height: 44px
}

@media(max-width:650px) {
    .domain-dialog {
        height: min(94dvh, 940px);
        max-height: calc(100dvh - 16px);
        border-radius: 12px
    }

    .domain-dialog>.modal-heading {
        padding: 21px 60px 15px 20px
    }

    .domain-dialog>.modal-heading h2 {
        font-size: 23px
    }

    .domain-dialog #modal-fields {
        grid-template-columns: minmax(0, 1fr);
        padding: 4px 20px 16px
    }

    .domain-dialog .domain-form-section,
    .domain-dialog .domain-field-full {
        grid-column: 1
    }

    .domain-dialog .modal-actions {
        padding: 12px 20px
    }

    .domain-dialog .modal-actions .btn {
        flex: 0 0 auto !important;
        min-width: 104px
    }
}

.vault-dialog:not(.domain-dialog) {
    display: flex;
    flex-direction: column;
    width: min(840px, 100%);
    height: auto;
    min-height: 320px;
    max-height: min(94dvh, 940px);
    padding: 0;
    overflow: hidden;
    border-radius: 16px
}

.vault-dialog:not(.domain-dialog)>.modal-close {
    top: 20px;
    right: 20px;
    background: #fff;
    color: #607392
}

.vault-dialog:not(.domain-dialog)>.modal-heading {
    display: block;
    flex: none;
    margin: 0;
    padding: 26px 72px 18px 32px;
    border-bottom: 1px solid var(--line)
}

.vault-dialog:not(.domain-dialog)>.modal-heading .page-icon {
    display: none
}

.vault-dialog:not(.domain-dialog)>.modal-heading h2 {
    margin: 0 0 5px;
    font: 800 27px Manrope, Arial, sans-serif;
    color: var(--ink)
}

.vault-dialog:not(.domain-dialog)>.modal-heading p {
    font-size: 14px;
    color: var(--muted)
}

.vault-dialog:not(.domain-dialog)>#item-form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column
}

.vault-dialog:not(.domain-dialog) #modal-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding: 4px 32px 20px
}

.vault-dialog .modal-form-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vault-dialog .brand-icon-native {
    display: none;
}

.vault-dialog .brand-picker-trigger,
.vault-dialog .brand-picker-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    text-align: left;
}

.vault-dialog .brand-picker-trigger { min-height: 44px }
.vault-dialog .brand-picker-chevron { margin-inline-start: auto }
.vault-dialog .brand-picker-menu:not([hidden]) {
    display: grid;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.vault-dialog .brand-picker-option:is(:hover, [aria-selected="true"]) { border-color: #75aaff }

.vault-dialog :is(.password-save-options, .password-reminder-fields):not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0 32px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.vault-dialog :is(.password-save-option, .password-reminder-defaults) {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    line-height: 1.45;
}

.vault-dialog :is(.password-save-option, .password-reminder-defaults) small {
    display: block;
    color: var(--muted);
}

.vault-dialog .password-reminder-fields > label:not(.password-reminder-defaults):not([hidden]) {
    display: grid;
    align-content: start;
    gap: 6px;
}

.vault-dialog .password-reminder-fields input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.vault-dialog .password-reminder-channels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.vault-dialog .password-reminder-channels > span { flex-basis: 100% }
.vault-dialog .password-reminder-channels label { display: inline-flex; align-items: center; gap: 6px }
.vault-dialog :is(.password-reminder-defaults, .password-reminder-cycle-note) { grid-column: 1 / -1 }
.vault-dialog .password-reminder-cycle-note { margin: 0; color: var(--muted); line-height: 1.5 }

@media (max-width: 650px) {
    .vault-dialog :is(.password-save-options, .password-reminder-fields):not([hidden]) {
        grid-template-columns: minmax(0, 1fr);
        margin-inline: 20px;
    }
}

.vault-dialog:not(.domain-dialog) .domain-form-section {
    grid-column: 1/-1;
    margin-top: 12px;
    padding: 16px 0 5px;
    border-top: 1px solid var(--line)
}

.vault-dialog:not(.domain-dialog) .domain-form-section:first-child {
    margin-top: 0;
    border-top: 0
}

.vault-dialog:not(.domain-dialog) .domain-form-section h3 {
    margin: 0;
    color: var(--ink);
    font: 800 17px Manrope, Arial, sans-serif
}

.vault-dialog:not(.domain-dialog) .domain-form-section p {
    margin: 5px 0 0 26px;
    color: var(--muted);
    font-size: 13px
}

.vault-dialog:not(.domain-dialog) .modal-field {
    display: block;
    margin: 7px 0 10px
}

.vault-dialog:not(.domain-dialog) .modal-field>.field-icon {
    display: none
}

.vault-dialog:not(.domain-dialog) .field-content {
    gap: 6px
}

.vault-dialog:not(.domain-dialog) .field-content label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink)
}

.vault-dialog:not(.domain-dialog) .field-content input,
.vault-dialog:not(.domain-dialog) .field-content select,
.vault-dialog:not(.domain-dialog) .field-content textarea {
    height: 44px;
    padding: 0 12px;
    border-color: #d5e2f2;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 14px
}

.vault-dialog:not(.domain-dialog) .field-content textarea {
    height: 84px;
    min-height: 84px;
    padding: 11px 12px;
    resize: vertical
}

.vault-dialog:not(.domain-dialog) .field-content input:focus,
.vault-dialog:not(.domain-dialog) .field-content select:focus,
.vault-dialog:not(.domain-dialog) .field-content textarea:focus {
    border-color: #75aaff;
    box-shadow: 0 0 0 3px rgba(8, 102, 248, .13);
    outline: 0
}

.vault-dialog:not(.domain-dialog) .domain-field-full {
    grid-column: 1/-1
}

.vault-dialog:not(.domain-dialog) .modal-actions {
    flex: none;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 14px 32px;
    border-top: 1px solid var(--line);
    background: var(--white)
}

.vault-dialog:not(.domain-dialog) .modal-actions .btn {
    min-width: 112px;
    min-height: 44px
}

@media(max-width:650px) {
    .vault-dialog:not(.domain-dialog) {
        max-height: calc(100dvh - 16px);
        min-height: 280px;
        border-radius: 12px
    }

    .vault-dialog:not(.domain-dialog)>.modal-heading {
        padding: 21px 60px 15px 20px
    }

    .vault-dialog:not(.domain-dialog)>.modal-heading h2 {
        font-size: 23px
    }

    .vault-dialog:not(.domain-dialog) #modal-fields {
        grid-template-columns: minmax(0, 1fr);
        padding: 4px 20px 16px
    }

    .vault-dialog:not(.domain-dialog) .domain-form-section,
    .vault-dialog:not(.domain-dialog) .domain-field-full {
        grid-column: 1
    }

    .vault-dialog:not(.domain-dialog) .modal-actions {
        padding: 12px 20px
    }

    .vault-dialog:not(.domain-dialog) .modal-actions .btn {
        flex: 0 0 auto !important;
        min-width: 104px
    }
}

.profile-drawer {
    isolation: isolate;
    overflow-y: auto;
    width: min(340px, 94vw);
    padding: 0 20px 18px;
    gap: 0
}

.profile-drawer:not([hidden])::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    background: #0a1c32a6
}

.profile-drawer-top {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 53px;
    background: #fff
}

.profile-drawer-top h2 {
    margin: 0;
    color: #101b3d;
    font: 800 19px Manrope, sans-serif
}

.profile-drawer-top .profile-drawer-close {
    width: 30px;
    height: 34px;
    padding: 0;
    color: #64739b;
    font-size: 25px
}

.profile-drawer-identity {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px 0 22px
}

.profile-drawer-photo-wrap {
    position: relative;
    margin-bottom: 9px
}

.profile-drawer-avatar {
    width: 82px;
    height: 82px;
    background-color: #0866f8;
    color: #fff;
    font-size: 29px;
    font-weight: 700;
    background-size: cover;
    background-position: center
}

.profile-drawer-photo-button {
    position: absolute;
    right: -1px;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    color: #53699a;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px #15356325
}

.profile-drawer-identity>b {
    color: #101b3d;
    font-size: 17px
}

.profile-drawer-email {
    margin-top: 4px;
    color: #61749a;
    font-size: 12px
}

.profile-drawer-account-type {
    margin-top: 4px;
    color: #8490a9;
    font-size: 11px
}

.profile-drawer-online {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 11px;
    border-radius: 6px;
    background: #e3f9ef;
    color: #08a36d;
    font-size: 11px;
    font-weight: 700
}

.profile-drawer-online i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #09b77a
}

.profile-drawer-links {
    display: grid;
    gap: 3px;
    padding: 8px 0 12px;
    border-bottom: 1px solid #e5ebf4
}

.profile-drawer-links>a,
.profile-drawer-links>button {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 13px;
    align-items: center;
    gap: 9px;
    min-height: 56px;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #1c2a49;
    text-align: left;
    cursor: pointer
}

.profile-drawer-links>a>span:first-child,
.profile-drawer-links>button>span:first-child {
    color: #303c83;
    font-size: 20px;
    text-align: center
}

.profile-drawer-links>a>span:nth-child(2),
.profile-drawer-links>button>span:nth-child(2) {
    min-width: 0
}

.profile-drawer-links b {
    display: block;
    font-size: 12px
}

.profile-drawer-links small {
    display: block;
    margin-top: 3px;
    color: #677a9f;
    font-size: 10px;
    line-height: 1.35
}

.profile-drawer-links>i,
.profile-drawer-links>a>i,
.profile-drawer-links>button>i {
    color: #687ba4;
    font-size: 20px;
    font-style: normal
}

.profile-drawer-links>a:hover,
.profile-drawer-links>button:hover,
.profile-drawer-links>a.selected {
    background: #edf4ff
}

.profile-drawer-links>a.selected,
.profile-drawer-links>a.selected>span:first-child,
.profile-drawer-links>a.selected b {
    color: #0866f8
}

.profile-drawer-account {
    padding: 14px 2px 10px;
    border-bottom: 1px solid #e5ebf4
}

.profile-drawer-account h3 {
    margin: 0 0 8px;
    color: #162344;
    font: 800 13px Manrope, sans-serif
}

.profile-drawer-account>div {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 33px
}

.profile-drawer-account>div>span {
    width: 20px;
    color: #6679a4;
    font-size: 16px;
    text-align: center
}

.profile-drawer-account small {
    color: #60749b;
    font-size: 11px;
    overflow-wrap: anywhere
}

.profile-drawer-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    border: 1px solid #ff4554;
    border-radius: 6px;
    background: #fff;
    color: #ef2938;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.profile-drawer-signout:hover {
    background: #fff5f5
}

.dark .profile-drawer-top {
    background: #122235
}

.dark .profile-drawer-top h2,
.dark .profile-drawer-identity>b,
.dark .profile-drawer-links b,
.dark .profile-drawer-account h3 {
    color: #eaf1fa
}

.dark .profile-drawer-links>a,
.dark .profile-drawer-links>button {
    color: #dce6f4
}

.dark .profile-drawer-links>a:hover,
.dark .profile-drawer-links>button:hover,
.dark .profile-drawer-links>a.selected {
    background: #1b3046
}

.dark .profile-drawer-signout {
    background: #231d2a
}

/* Contacts dashboard toolbar layout */
.agency-contact-controls {
    margin-top: 13px;
    padding: 0 11px
}

.agency-contact-controls .agency-contact-toolbar {
    min-height: 59px;
    gap: 8px;
    padding: 9px 0;
    border: 0;
    flex-wrap: nowrap
}

.agency-contact-controls .agency-contact-toolbar>select {
    flex: 0 1 150px;
    min-width: 125px;
    font-size: 11px
}

.agency-contact-controls .agency-contact-search {
    flex: 1 1 auto;
    min-width: 150px
}

.agency-contact-controls .agency-contact-search input {
    font-size: 12px
}

.agency-contact-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none
}

.agency-contact-toolbar-actions .btn {
    height: 38px;
    white-space: nowrap;
    font-size: 11px
}

.agency-contact-layout {
    margin-top: 12px
}

.agency-contact-table th {
    font-size: 11px
}

.agency-contact-table td {
    font-size: 11px
}

.agency-contact-person>b {
    font-size: 11px
}

.agency-contact-type,
.agency-contact-status {
    font-size: 11px
}

@media(max-width:1200px) {
    .agency-contact-controls .agency-contact-toolbar {
        flex-wrap: wrap
    }

    .agency-contact-controls .agency-contact-toolbar>select {
        flex: 1 1 145px
    }

    .agency-contact-controls .agency-contact-search {
        flex: 1 1 260px
    }

    .agency-contact-toolbar-actions {
        margin-left: auto
    }
}

@media(max-width:580px) {
    .agency-contact-controls {
        padding: 8px
    }

    .agency-contact-controls .agency-contact-toolbar {
        padding: 0
    }

    .agency-contact-controls .agency-contact-search {
        flex-basis: 100%;
        min-width: 100%
    }

    .agency-contact-toolbar-actions {
        width: 100%;
        margin-left: 0
    }

    .agency-contact-toolbar-actions .btn {
        flex: 1
    }
}

/* Purchase Orders dashboard layout */
.agency-po-toolbar {
    flex-wrap: nowrap;
    gap: 8px
}

.agency-po-toolbar>select {
    flex: 0 1 155px;
    min-width: 125px;
    font-size: 11px
}

.agency-po-date {
    flex: 0 1 270px;
    min-width: 220px
}

.agency-po-search {
    flex: 1 1 auto;
    min-width: 180px
}

.agency-po-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none
}

.agency-po-toolbar-actions .btn {
    height: 39px;
    padding-inline: 13px;
    white-space: nowrap;
    font-size: 11px
}

.agency-po-layout {
    margin-top: 12px
}

.agency-po-table th {
    font-size: 11px
}

.agency-po-table td {
    font-size: 11px
}

.agency-po-status {
    font-size: 11px
}

.procurement-order-status {
    min-width: 108px;
    min-height: 32px;
    padding: 5px 24px 5px 8px;
    border: 1px solid #d9e4f2;
    border-radius: 7px;
    background: #fff;
    color: #233754;
    font: inherit;
    font-weight: 600;
}

.procurement-row-kind {
    display: block;
    margin-top: 3px;
    color: #7183a0;
    font-size: 10px;
    font-weight: 500;
}

.agency-workspace[data-workspace-page="procurement"] .table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.agency-workspace[data-workspace-page="procurement"] .agency-po-table {
    width: 100%;
    min-width: 1200px;
    table-layout: fixed;
}

.agency-workspace[data-workspace-page="procurement"] .agency-po-table th,
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td {
    padding: 10px 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    vertical-align: middle;
}

.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(1),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(1) { width: 22.5%; }
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(2),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(2) { width: 11.0714%; }
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(3),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(3) { width: 11.0714%; }
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(4),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(4) { width: 11.0714%; }
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(5),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(5) { width: 11.0714%; }
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(6),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(6) { width: 11.0714%; }
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(7),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(7) { width: 11.0714%; }
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(8),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(8) { width: 11.0714%; }

.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(1) { width: 22.5%; }
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(2),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(3),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(4),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(5),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(6),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(7),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(8) { width: 11.0714%; }

.procurement-status-cell {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.agency-workspace[data-workspace-page="procurement"] .agency-po-table th:nth-child(8),
.agency-workspace[data-workspace-page="procurement"] .agency-po-table td:nth-child(8) {
    text-align: center;
}

.procurement-status-cell>small {
    color: #7183a0;
    font-size: 10px;
}

.agency-workspace[data-workspace-page="procurement"] .procurement-order-status {
    width: 136px;
    max-width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px 26px 5px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background-color: #f8fafc;
    color: #34445b;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.agency-workspace[data-workspace-page="procurement"] .procurement-order-status:hover {
    background-color: #fff;
    border-color: #cbd5e1;
}

.agency-workspace[data-workspace-page="procurement"] .procurement-order-status:focus-visible {
    outline: 0;
    border-color: #2f75ee;
    box-shadow: 0 0 0 3px rgba(47, 117, 238, .14);
}

@media(max-width:1250px) {
    .agency-po-toolbar {
        flex-wrap: wrap
    }

    .agency-po-toolbar>select {
        flex: 1 1 145px
    }

    .agency-po-date {
        flex: 1 1 240px
    }

    .agency-po-search {
        flex: 1 1 300px
    }

    .agency-po-toolbar-actions {
        margin-left: auto
    }
}

@media(max-width:580px) {
    .agency-po-toolbar {
        padding: 9px
    }

    .agency-po-toolbar>select {
        flex: 1 1 calc(50% - 4px);
        min-width: 0
    }

    .agency-po-date,
    .agency-po-search {
        flex-basis: 100%;
        min-width: 100%
    }

    .agency-po-toolbar-actions {
        width: 100%;
        margin-left: 0
    }

    .agency-po-toolbar-actions .btn {
        flex: 1;
        justify-content: center
    }
}

/* Purchase Order composer: full-page form with persistent actions and summary rail */
.po-form-page {
    width: 100%;
    max-width: none;
    gap: 14px
}

.po-form-top {
    position: sticky;
    top: 80px;
    z-index: 3;
    min-height: 72px;
    padding: 10px 14px;
    border: 1px solid #e3ebf5;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.po-form-top>div:first-child {
    min-width: 0
}

.po-form-top>div:first-child>a {
    display: inline-flex;
    align-items: center;
    margin-bottom: 3px
}

.po-form-top h1 {
    margin: 0;
    color: #14213d;
    font-size: 21px
}

.po-form-top p {
    margin-top: 2px
}

.po-form-top>div:last-child {
    flex: none
}

.po-form-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px
}

.po-form-main {
    gap: 13px
}

.po-form-section,
.po-summary,
.po-summary-note {
    border: 1px solid #e3ebf5;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.po-form-section {
    padding: 20px
}

.po-form-section>header {
    margin-bottom: 17px
}

.po-form-section>header b {
    font-size: 17px
}

.po-form-section>header small {
    font-size: 12px
}

.po-form-grid {
    gap: 15px
}

.po-form-grid label {
    font-size: 12px
}

.po-form-grid input,
.po-form-grid select,
.po-form-grid textarea {
    min-height: 42px;
    border-color: #d3e0f0;
    border-radius: 7px;
    font-size: 13px
}

.po-form-grid textarea {
    min-height: 96px;
    padding: 10px
}

.po-form-section:nth-child(2) .po-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.po-line-head,
.po-line {
    grid-template-columns: 34px minmax(150px, 1.15fr) minmax(140px, 1.15fr) 80px 115px 110px 30px;
    gap: 8px
}

.po-line-head {
    min-height: 42px;
    font-size: 11px
}

.po-line input,
.po-line select {
    height: 40px;
    border-color: #d3e0f0;
    border-radius: 6px;
    font-size: 12px
}

.po-line {
    min-height: 59px;
    padding: 7px
}

.po-summary {
    padding: 18px
}

.po-summary h2 {
    font-size: 17px
}

.po-summary>div,
.po-summary>label {
    font-size: 12px
}

.po-summary .po-total {
    margin-top: 9px;
    padding: 12px;
    border-radius: 7px;
    background: #eaf2ff
}

.po-summary .po-total b {
    font-size: 20px
}

.po-summary>.btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    margin-top: 12px
}

.po-summary>.btn[type="button"] {
    color: #344b6c;
    font-size: 14px;
    font-weight: 600
}

.po-form-page button[type="submit"] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3
}

.po-summary>.btn+.btn {
    margin-top: 7px
}

.po-summary-note {
    padding: 17px
}

.po-summary-note>b {
    font-size: 14px
}

.po-summary-note p {
    font-size: 12px;
    line-height: 1.5
}

.dark .po-form-top,
.dark .po-form-section,
.dark .po-summary,
.dark .po-summary-note {
    border-color: #24384d;
    background: #122437
}

.dark .po-form-top h1,
.dark .po-form-section>header b,
.dark .po-summary h2,
.dark .po-summary-note>b {
    color: #e9f0f8
}

.dark .po-summary>.btn[type="button"] {
    color: #dce6f4
}

.dark .po-form-grid input,
.dark .po-form-grid select,
.dark .po-form-grid textarea,
.dark .po-line input,
.dark .po-line select {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

.dark .po-summary .po-total {
    background: #1a3555
}

@media(max-width:1050px) {
    .po-form-layout {
        grid-template-columns: minmax(0, 1fr) 280px
    }

    .po-form-section:nth-child(2) .po-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .po-line-head,
    .po-line {
        grid-template-columns: 28px minmax(120px, 1fr) minmax(110px, 1fr) 68px 100px 95px 26px
    }
}

@media(max-width:820px) {
    .po-form-top {
        top: 62px;
        align-items: center
    }

    .po-form-top>div:first-child>a {
        font-size: 10px
    }

    .po-form-top h1 {
        font-size: 18px
    }

    .po-form-top p {
        max-width: 420px;
        font-size: 11px
    }

    .po-form-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .po-form-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start
    }

    .po-form-aside .po-summary {
        grid-row: span 2
    }
}

@media(max-width:600px) {
    .po-form-page {
        gap: 10px
    }

    .po-form-top {
        top: 58px;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px
    }

    .po-form-top>div:first-child {
        flex: 1 1 100%
    }

    .po-form-top>div:last-child {
        width: 100%;
        justify-content: flex-end
    }

    .po-form-top .btn {
        min-height: 36px
    }

    .po-form-section {
        padding: 14px
    }

    .po-form-section:nth-child(2) .po-form-grid,
    .po-form-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .po-form-aside {
        grid-template-columns: minmax(0, 1fr)
    }

    .po-form-aside .po-summary {
        grid-row: auto
    }

    .po-line-head,
    .po-line {
        grid-template-columns: 24px minmax(120px, 1fr) 68px 92px 82px 24px
    }

    .po-line-head>span:nth-child(3),
    .po-line>label:nth-of-type(2) {
        display: none
    }

    .po-line-head>span:nth-child(7) {
        display: none
    }

    .po-line {
        overflow-x: auto
    }

    .po-summary {
        padding: 14px
    }
}

/* Purchase Order form modal hosted on the dashboard */
.po-create-modal {
    z-index: 1000;
    padding: 20px;
    background: #071522a8
}

.po-create-modal[hidden] {
    display: none
}

.po-create-modal-shell {
    position: relative;
    width: min(1480px, 96vw);
    max-height: 94vh;
    overflow: auto;
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 14px;
    background: #f3f8fc;
    box-shadow: 0 24px 80px #07152255
}

.po-create-modal .po-form-page {
    gap: 12px
}

.po-create-modal .po-form-top {
    top: 0;
    min-height: 66px;
    padding: 8px 58px 8px 12px
}

.po-create-modal .po-form-top>div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px
}

.po-create-modal .po-form-top>div:last-child:not(:first-child) {
    padding-right: 42px
}

.po-create-modal-close {
    position: sticky;
    top: 9px;
    z-index: 6;
    float: right;
    width: 34px;
    height: 34px;
    margin: 8px 8px -50px 0;
    border: 1px solid #d8e3f1;
    border-radius: 8px;
    background: #fff;
    color: #52698b;
    font-size: 21px;
    cursor: pointer
}

.po-create-modal-open {
    overflow: hidden;
    padding-right: var(--po-modal-scrollbar-width, 0px)
}

.dark .po-create-modal-shell {
    border-color: #24384d;
    background: #0d1f33
}

.dark .po-create-modal-close {
    border-color: #2b4056;
    background: #172b40;
    color: #dbe7f5
}

@media(max-width:650px) {
    .po-create-modal {
        padding: 8px
    }

    .po-create-modal-shell {
        width: 100%;
        max-height: calc(100dvh - 16px);
        padding: 8px;
        border-radius: 10px
    }

    .po-create-modal .po-form-top {
        padding: 46px 8px 8px;
        top: 0
    }

    .po-create-modal .po-form-top>div:last-child:not(:first-child) {
        padding-right: 0
    }

    .po-create-modal-close {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 0;
        float: none
    }

    .po-create-modal .po-form-top>div:first-child {
        flex-basis: 100%
    }
}

/* User-selected compact layout from Settings. */
body.compact-ui .panel,
body.compact-ui .agency-dash-panel,
body.compact-ui .app-settings-card {
    padding: 12px;
}

body.compact-ui .agency-dashboard-table th,
body.compact-ui .agency-dashboard-table td,
body.compact-ui .agency-mini-table th,
body.compact-ui .agency-mini-table td,
body.compact-ui .table-panel table th,
body.compact-ui .table-panel table td {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* HR summary cards stay on one desktop row; the leave demo badge is intentionally omitted. */
body .agency-attendance-kpis,
body .leave-page .leave-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body .leave-page [data-leave-demo] {
    display: none !important;
}

@media (max-width: 850px) {
    body .agency-attendance-kpis,
    body .leave-page .leave-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Shared spacing and dimensions for summary/KPI cards throughout the workspace. */
:root {
    --summary-card-min-height: 88px;
    --summary-card-padding: 14px;
    --summary-card-gap: 12px;
    --summary-card-icon-size: 52px;
}

body :is(
    .stat-card,
    .pm-stat,
    .agency-kpi,
    .agency-project-kpi,
    .agency-task-kpi,
    .agency-client-kpi,
    .agency-contact-kpi,
    .agency-po-kpi,
    .agency-expense-kpis article,
    .agency-quotation-kpis>article,
    .agency-invoice-kpis>article,
    .agency-hr-kpi,
    .agency-attendance-kpis>article,
    .leave-kpis>article,
    .hr-trash-stat
) {
    min-height: var(--summary-card-min-height);
    padding: var(--summary-card-padding);
    gap: var(--summary-card-gap);
    border-radius: 10px;
}

body :is(
    .stat-icon,
    .agency-kpi-icon,
    .agency-task-kpi-icon,
    .agency-client-icon,
    .agency-contact-icon,
    .agency-po-icon,
    .agency-expense-kpis article>span,
    .agency-quotation-kpis>article>span,
    .agency-invoice-kpis>article>span,
    .agency-hr-kpi>span,
    .agency-attendance-kpis>article>span,
    .leave-kpis>article>span,
    .hr-trash-stat>span
) {
    width: var(--summary-card-icon-size);
    height: var(--summary-card-icon-size);
    flex: 0 0 var(--summary-card-icon-size);
    border-radius: 9px;
}

@media (max-width: 600px) {
    :root {
        --summary-card-min-height: 76px;
        --summary-card-padding: 10px;
        --summary-card-gap: 9px;
        --summary-card-icon-size: 40px;
    }
}

/* One predictable vertical rhythm for page-level sections across the app. */
:root {
    --workspace-section-gap: 12px;
}

/* Keep the existing page layout model intact and normalize the margins used
   between top-level sections on each route. */
body .main-area > .content > * {
    margin-block-end: 0;
}

body .main-area > .content > * + * {
    margin-block-start: var(--workspace-section-gap) !important;
}

body .main-area > .content > .page-heading {
    margin-block-end: 0;
}

/* Page roots that own multiple vertical sections use the same spacing token. */
body :is(
    .agency-dashboard,
    .dashboard-grid,
    .agency-projects-page,
    .agency-tasks-page,
    .agency-module-page,
    .agency-workspace,
    .agency-expense-dashboard,
    .agency-quotation-dashboard,
    .agency-invoice-dashboard,
    .agency-quotation-page,
    .finance-page,
    .finance-dashboard-layout,
    .hr-workspace,
    .hr-trash-page,
    .leave-page,
    .users-roles-page,
    .org-settings-layout,
    .settings-home,
    .drive-setup-page,
    .integration-page,
    .favorites-page,
    .passwords-page,
    .notes-page,
    .domain-page,
    .media-library,
    .agency-trash-page
) {
    row-gap: var(--workspace-section-gap);
}

/* Multiple dashboard panels rendered as sibling rows keep the same rhythm. */
body .main-area > .content > .dashboard-grid + .dashboard-grid {
    margin-block-start: var(--workspace-section-gap);
}

/* Password overview keeps activity and its two supporting lists together in
   the third dashboard column. The summary cards then begin on one shared row. */
body[data-page="overview"] .overview-insights-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: stretch;
}

body[data-page="overview"] .overview-column-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--workspace-section-gap);
    min-width: 0;
}

body[data-page="overview"] .overview-column-stack > * {
    min-width: 0;
    margin: 0;
}

/* Keep the two overview charts on a shared, stable row height. */
body[data-page="overview"] .overview-column-stack:first-child > .chart-panel,
body[data-page="overview"] .overview-column-stack:nth-child(2) > .score-panel {
    height: 260px;
    box-sizing: border-box;
}

body[data-page="overview"] .overview-activity-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--workspace-section-gap);
    min-width: 0;
}

body[data-page="overview"] .overview-activity-stack > * {
    min-width: 0;
    margin: 0;
}

body[data-page="overview"] .overview-summary-grid {
    grid-template-columns: minmax(0, 1fr);
}

body[data-page="overview"] .overview-tools-panel {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    body[data-page="overview"] .overview-insights-grid,
    body[data-page="overview"] .overview-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="overview"] .overview-activity-stack {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    body[data-page="overview"] .overview-insights-grid,
    body[data-page="overview"] .overview-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="overview"] .overview-activity-stack {
        grid-column: auto;
    }
}

/* Password Manager hides the generic page heading; don't leave a phantom gap. */
body:is([data-page="overview"], [data-page="passwords"], [data-page="favorites"], [data-page="categories"], [data-page="notes"], [data-page="health"], [data-page="reminders"], [data-page="teams"], [data-page="import-export"], [data-page="trash"], [data-page="domains"]) .main-area > .content > .page-heading:not(:has(>button)) + * {
    margin-block-start: 0 !important;
}

body .hr-workspace-tabs {
    margin: 0;
}

/* The Team view keeps an empty title row after its title was hidden. Remove
   that row so its first KPI row uses the same workspace gap as Attendance. */
body .hr-workspace > .agency-module-page[data-workspace-page="team-management"] > .agency-hr-heading {
    display: none !important;
}

body .hr-workspace > .agency-module-page[data-workspace-page="team-management"] > .agency-hr-kpis,
body .hr-workspace > .agency-module-page[data-workspace-page="attendance"] > .agency-attendance-kpis {
    margin-block-start: 0 !important;
}

body .hr-workspace .agency-hr-heading,
body .hr-workspace .agency-hr-kpis,
body .hr-workspace .agency-attendance-kpis,
body .hr-workspace .agency-attendance-toolbar,
body .hr-workspace .hr-trash-heading,
body .hr-workspace .hr-trash-stats,
body .hr-workspace .leave-page-heading {
    margin-block: 0;
}

body .hr-trash-page {
    display: grid;
    row-gap: var(--workspace-section-gap);
}

/* Trash views use the same section rhythm as the HR dashboard KPI sections. */
body .hr-trash-page > * {
    margin-block: 0 !important;
}

body .hr-trash-page > .hr-trash-heading {
    display: none !important;
}

/* Keep the HR tabs on one vertical rhythm. The tab label already identifies
   each view, so hidden page-heading shells must not add a blank grid row. */
body .hr-workspace {
    display: grid;
    row-gap: var(--workspace-section-gap);
}

body .hr-workspace > .agency-module-page,
body .hr-workspace > .leave-page {
    display: grid;
    align-content: start;
    row-gap: var(--workspace-section-gap);
    margin-block: 0 !important;
}

body .hr-workspace .agency-hr-heading,
body .hr-workspace .leave-page-heading {
    display: none !important;
}

body .hr-workspace > .agency-module-page > *,
body .hr-workspace > .leave-page > *,
body .hr-workspace .hr-trash-page > * {
    margin-block: 0 !important;
}

body .hr-workspace .hr-trash-page {
    display: grid;
    row-gap: var(--workspace-section-gap);
    margin-block: 0 !important;
}

body .hr-workspace .leave-page {
    row-gap: var(--workspace-section-gap);
}

/* Match the Notes workspace width and horizontal inset to the HR workspace. */
body[data-page="notes"] .main-area > .content {
    width: 100%;
    max-width: 1800px;
    margin-inline: auto;
    padding-inline: clamp(12px, 1.5vw, 28px);
}

/* Keep Password Manager Overview centered at the same width as the HR workspace. */
body[data-page="overview"] .main-area > .content {
    width: 100%;
    max-width: 1800px;
    margin-inline: auto;
    padding-inline: clamp(12px, 1.5vw, 28px);
}

/* Match Client Directory section and KPI spacing to the HR Dashboard rhythm. */
body .agency-workspace[data-workspace-page="clients"] {
    display: grid;
    align-content: start;
    gap: var(--workspace-section-gap);
}

/* The title band is intentionally visually hidden on workspace pages. Remove
   its empty grid row so it cannot add an extra gap before the Client KPIs. */
body .agency-workspace[data-workspace-page="clients"] > .agency-client-heading {
    display: none !important;
}

body .agency-workspace[data-workspace-page="clients"] > :is(
    .agency-client-heading,
    .agency-client-kpis,
    .agency-client-toolbar,
    .agency-client-layout
) {
    margin-block: 0 !important;
}

body .agency-workspace[data-workspace-page="clients"] .agency-client-kpis {
    gap: var(--workspace-section-gap);
}

/* Keep Contacts aligned to the same section rhythm as the HR Dashboard.
   Its visually hidden heading otherwise leaves an empty row before the KPIs. */
body .agency-workspace[data-workspace-page="contacts"] {
    display: grid;
    align-content: start;
    gap: var(--workspace-section-gap);
}

body .agency-workspace[data-workspace-page="contacts"] > .agency-contacts-heading {
    display: none !important;
}

body .agency-workspace[data-workspace-page="contacts"] > :is(
    .agency-contacts-heading,
    .agency-contact-kpis,
    .agency-contact-controls,
    .agency-contact-layout
) {
    margin-block: 0 !important;
}

body .agency-workspace[data-workspace-page="contacts"] .agency-contact-kpis {
    gap: var(--workspace-section-gap);
}

/* Match Purchase Orders section spacing to the HR Dashboard rhythm. */
body .agency-workspace:is([data-workspace-page="purchase-orders"],[data-workspace-page="procurement"]) {
    display: grid;
    align-content: start;
    gap: var(--workspace-section-gap);
}

/* The heading band is hidden by the shared module styles; remove its empty row. */
body .agency-workspace:is([data-workspace-page="purchase-orders"],[data-workspace-page="procurement"]) > .agency-po-heading {
    display: none !important;
}

body .agency-workspace:is([data-workspace-page="purchase-orders"],[data-workspace-page="procurement"]) > :is(
    .agency-po-heading,
    .agency-po-kpis,
    .agency-po-toolbar,
    .agency-po-layout
) {
    margin-block: 0 !important;
}

body .agency-workspace:is([data-workspace-page="purchase-orders"],[data-workspace-page="procurement"]) .agency-po-kpis {
    gap: var(--workspace-section-gap);
}

/* HR dashboard visual summaries */
.hr-dashboard-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.hr-chart-card{min-width:0;padding:18px 17px;overflow:hidden}
.hr-chart-card .agency-hr-widget-title{align-items:flex-start;margin-bottom:22px}
.hr-chart-card .agency-hr-widget-title h2{font-size:15px}
.hr-chart-card .agency-hr-widget-title p{margin:5px 0 0;color:#7183a0;font-size:11px}
.hr-chart-rows{display:grid;gap:17px;min-height:220px;align-content:start}
.hr-chart-row{display:grid;gap:7px}
.hr-chart-label{display:flex;justify-content:space-between;gap:10px;color:#556987;font-size:11px}
.hr-chart-label b{color:#1b2d4b}
.hr-chart-track,.hr-stacked-bar{height:9px;overflow:hidden;border-radius:99px;background:#edf2f8}
.hr-chart-track i{display:block;height:100%;border-radius:inherit;background:#0878f5;transition:width .3s ease}
.hr-chart-track .tone-1{background:#f5a623}.hr-chart-track .tone-2{background:#08b780}.hr-chart-track .tone-3{background:#8b5cf6}.hr-chart-track .tone-4{background:#ff5964}
.hr-attendance-chart,.hr-leave-chart{min-height:220px}
.hr-attendance-total,.hr-leave-total{display:flex;align-items:baseline;gap:7px;margin-bottom:22px;color:#7183a0;font-size:11px}
.hr-attendance-total>b,.hr-leave-total>b{color:#1a2d4b;font-size:27px;line-height:1}
.hr-attendance-total strong{margin-left:auto;color:#08a878;font-size:17px}
.hr-attendance-total strong small{display:block;text-align:right;color:#7183a0;font-size:10px;font-weight:500}
.hr-leave-total small{margin-left:auto;color:#b47800;font-size:10px}
.hr-stacked-bar{display:flex;height:12px;margin-bottom:21px}
.hr-stacked-bar i{height:100%;min-width:0}
.hr-stacked-bar .green{background:#08b780}.hr-stacked-bar .purple{background:#8b5cf6}.hr-stacked-bar .amber{background:#f5a623}.hr-stacked-bar .red{background:#ff5964}
.hr-chart-legend{display:grid;gap:12px}
.hr-chart-legend>div{display:flex;align-items:center;gap:8px;color:#596d8b;font-size:11px}
.hr-chart-legend>div>b{margin-left:auto;color:#263a5a}
.hr-chart-legend>div>i{width:9px;height:9px;border-radius:50%}
.hr-chart-legend .green{background:#08b780}.hr-chart-legend .purple{background:#8b5cf6}.hr-chart-legend .amber{background:#f5a623}.hr-chart-legend .red{background:#ff5964}
.hr-chart-empty{margin:18px 0;color:#7183a0;font-size:12px}
.dark .hr-chart-label,.dark .hr-chart-legend>div,.dark .hr-attendance-total,.dark .hr-leave-total{color:#a8b6ca}
.dark .hr-chart-label b,.dark .hr-attendance-total>b,.dark .hr-leave-total>b,.dark .hr-chart-legend>div>b{color:#edf3fb}
.dark .hr-chart-track,.dark .hr-stacked-bar{background:#25344b}
@media(max-width:1100px){.hr-dashboard-charts{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-chart-card:last-child{grid-column:1/-1}}
@media(max-width:700px){.hr-dashboard-charts{grid-template-columns:minmax(0,1fr)}.hr-chart-card:last-child{grid-column:auto}.hr-chart-card{padding:15px}.hr-chart-rows,.hr-attendance-chart,.hr-leave-chart{min-height:0}}

/* HR dashboard calendar, events, and quick tools */
.hr-dashboard-lower{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.8fr);gap:14px;margin-top:14px;align-items:start}
.hr-calendar-card,.hr-upcoming-card,.hr-tools-card{min-width:0;padding:17px}
.hr-calendar-card .agency-hr-widget-title,.hr-upcoming-card .agency-hr-widget-title,.hr-tools-card .agency-hr-widget-title{margin-bottom:14px}
.hr-calendar-nav{display:flex;align-items:center;gap:10px;color:#203452;font-size:12px}
.hr-calendar-nav button{width:28px;height:28px;border:1px solid #e0e8f2;border-radius:7px;background:#fff;color:#436080;font-size:18px;line-height:1;cursor:pointer}
.hr-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.hr-calendar-weekday{padding:7px 0;text-align:center;color:#8493a9;font-size:10px;font-weight:700}
.hr-calendar-day{position:relative;display:grid;place-items:center;min-height:39px;border-radius:8px;color:#334966;font-size:11px}
.hr-calendar-day.empty{visibility:hidden}
.hr-calendar-day.is-today{background:#eaf2ff;color:#0866f8;font-weight:800}
.hr-calendar-day.has-event:after{content:"";position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:#8b5cf6}
.hr-calendar-day.is-today.has-event:after{background:#0866f8}
.hr-calendar-legend{display:flex;gap:16px;margin-top:12px;color:#7586a0;font-size:10px}
.hr-calendar-legend span{display:flex;align-items:center;gap:6px}
.hr-calendar-legend i{width:7px;height:7px;border-radius:50%;background:#8b5cf6}
.hr-calendar-legend i.today{background:#0866f8}
.hr-calendar-legend i.holiday{background:#b56d07}
.hr-calendar-day.has-holiday:not(.is-today){background:#fff3da;color:#805007;font-weight:800}
.hr-calendar-day.has-holiday.is-today{box-shadow:inset 0 0 0 1px #b56d07}
.dark .hr-calendar-day.has-holiday:not(.is-today){background:#47331c;color:#ffdb91}
.hr-calendar-holidays{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.hr-calendar-holidays h3{margin:0 0 8px;font-size:13px}
.hr-calendar-holidays ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.hr-calendar-holidays li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;font-size:12px}
.hr-calendar-holidays li time{font-weight:700;text-align:center}
.hr-calendar-holidays li small{display:block;color:var(--muted);font-size:11px}
.hr-dashboard-side{display:grid;gap:14px}
.hr-upcoming-list{display:grid;gap:12px;min-height:100px;align-content:start}
.hr-upcoming-event{display:grid;grid-template-columns:42px minmax(0,1fr) 8px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #edf1f6}
.hr-upcoming-event:last-child{border-bottom:0}
.hr-event-date{display:grid;justify-items:center;padding:6px 3px;border-radius:7px;background:#f0f5ff;color:#2465c3}
.hr-event-date b{font-size:15px;line-height:1.1}.hr-event-date small{font-size:9px;text-transform:uppercase}
.hr-upcoming-event>div{display:grid;gap:4px;min-width:0}.hr-upcoming-event>div b{overflow:hidden;color:#263a59;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.hr-upcoming-event>div small{color:#7a8ba4;font-size:9px}
.hr-upcoming-event>i{width:7px;height:7px;border-radius:50%;background:#08b780}.hr-upcoming-event>i.pending{background:#f5a623}
.hr-quick-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.hr-quick-tools>a,.hr-quick-tools>button{display:flex;align-items:center;gap:9px;min-height:42px;padding:8px 10px;border:1px solid #e2eaf4;border-radius:8px;background:#fff;color:#304967;text-decoration:none;text-align:left;cursor:pointer}
.hr-quick-tools>a:hover,.hr-quick-tools>button:hover{border-color:#aac9ff;background:#f7faff}
.hr-quick-tools span{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:6px;background:#edf4ff;color:#0866f8;font-size:14px}
.hr-quick-tools b{font-size:10px;font-weight:650}
.dark .hr-calendar-nav,.dark .hr-calendar-day,.dark .hr-upcoming-event>div b{color:#dce6f4}
.dark .hr-calendar-nav button,.dark .hr-quick-tools>a,.dark .hr-quick-tools>button{border-color:#34445c;background:#1c2a3f;color:#dce6f4}
.dark .hr-calendar-day.is-today{background:#1c3557;color:#80b3ff}
.dark .hr-upcoming-event{border-color:#2b3a50}
@media(max-width:900px){.hr-dashboard-lower{grid-template-columns:minmax(0,1fr)}.hr-dashboard-side{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hr-dashboard-side{grid-template-columns:minmax(0,1fr)}.hr-calendar-card,.hr-upcoming-card,.hr-tools-card{padding:14px}.hr-calendar-day{min-height:35px}}
.hr-pie-layout{display:grid;grid-template-columns:minmax(118px,150px) minmax(0,1fr);align-items:center;gap:15px;min-height:184px}
.hr-pie{position:relative;display:grid;place-items:center;width:min(100%,148px);aspect-ratio:1;border-radius:50%;background:#edf2f8}
.hr-pie:before{content:"";position:absolute;inset:24%;border-radius:50%;background:#fff}
.hr-pie>span{position:relative;display:grid;justify-items:center;gap:3px;color:#7586a0}
.hr-pie>span>b{color:#1c2f4e;font-size:23px;line-height:1.05}
.hr-pie>span>small{font-size:9px}
.hr-pie-caption{display:block;margin-top:4px;color:#8190a6;font-size:10px}
.hr-dashboard-charts .hr-chart-legend{gap:10px;max-height:190px;overflow:auto}
.hr-dashboard-charts .hr-chart-legend>div{font-size:10px}
.hr-dashboard-lower{grid-template-columns:repeat(3,minmax(0,1fr))}
.hr-dashboard-side{display:contents}
.hr-dashboard-lower>.hr-tools-card,.hr-dashboard-lower>.hr-upcoming-card,.hr-dashboard-lower>.hr-calendar-card{grid-column:auto}
@media(max-width:1000px){.hr-dashboard-lower{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-dashboard-lower>.hr-calendar-card{grid-column:1/-1}}
@media(max-width:700px){.hr-pie-layout{grid-template-columns:120px minmax(0,1fr);gap:12px}.hr-pie{width:120px}.hr-dashboard-lower{grid-template-columns:minmax(0,1fr)}.hr-dashboard-lower>.hr-calendar-card{grid-column:auto}}
.dark .hr-pie:before{background:#1b293e}
.dark .hr-pie>span>b{color:#edf3fb}

/* Improve HR dashboard label readability without changing its layout. */
.agency-hr-heading+.agency-hr-kpis .agency-hr-kpi>div>small{color:#536783;font-size:13px}
.agency-hr-heading+.agency-hr-kpis .agency-hr-kpi em{font-size:15px}
.agency-hr-heading+.agency-hr-kpis .agency-hr-kpi em small{color:#596d8b;font-size:11px}
.hr-chart-card .agency-hr-widget-title p,.hr-tools-card .agency-hr-widget-title p,.hr-upcoming-card .agency-hr-widget-title p,.hr-calendar-card .agency-hr-widget-title p{color:#5c6f8b;font-size:13px}
.hr-chart-card .agency-hr-widget-title a,.hr-upcoming-card .agency-hr-widget-title a{font-size:12px}
.hr-chart-label,.hr-dashboard-charts .hr-chart-legend>div{color:#4e6381;font-size:13px}
.hr-chart-rows{gap:15px}
.hr-attendance-total,.hr-leave-total{color:#5c6f8b;font-size:13px}
.hr-attendance-total strong small,.hr-leave-total small{color:#596d8b;font-size:12px}
.hr-chart-empty{color:#5c6f8b;font-size:13px}
.hr-calendar-nav{font-size:13px}
.hr-calendar-weekday{color:#596d83;font-size:12px}
.hr-calendar-day{font-size:13px}
.hr-calendar-legend{color:#5c6f8b;font-size:12px}
.hr-event-date small{font-size:11px}
.hr-upcoming-event>div b{color:#263a59;font-size:13px}
.hr-upcoming-event>div small{color:#596d83;font-size:12px}
.hr-quick-tools b{font-size:13px}
.hr-pie>span>small,.hr-pie-caption{color:#5c6f8b;font-size:12px}
.dark .hr-chart-empty,.dark .hr-chart-card .agency-hr-widget-title p,.dark .hr-tools-card .agency-hr-widget-title p,.dark .hr-upcoming-card .agency-hr-widget-title p,.dark .hr-calendar-card .agency-hr-widget-title p,.dark .hr-event-date small,.dark .hr-upcoming-event>div small,.dark .hr-calendar-legend{color:#a8b6ca}
.dark .hr-calendar-weekday{color:#b4c0d0}
.dark .hr-quick-tools b{color:#dce6f4}

/* Make employee directory text readable while keeping its existing layout. */
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th{font-size:13px;color:#203452}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td{font-size:13px;color:#405775}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-person b{font-size:13px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-person small{font-size:12px;color:#536987}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-status{font-size:12px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-widget-title h2{font-size:16px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-widget-title a{font-size:12px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-legend>div{font-size:12px;color:#405775}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-legend>div small{font-size:11px;color:#536987}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-employee-employment-row{font-size:12px;color:#344a68}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-employee-employment-row>small{font-size:11px;color:#536987}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-employee-joiner b{font-size:12px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-employee-joiner small,body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-employee-joiner time{font-size:11px;color:#536987}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-footer{font-size:12px;color:#536987}
.dark body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td,.dark body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-person small,.dark body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-legend>div,.dark body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-employee-employment-row,.dark body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-employee-joiner small,.dark body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-employee-joiner time,.dark body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-footer{color:#b9c7d8}

/* Keep the Employees table readable by scrolling it inside its own frame on small screens. */
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-main .table-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table{width:100%;min-width:1120px;table-layout:fixed}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th:nth-child(1),body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td:nth-child(1){width:42px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th:nth-child(2),body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td:nth-child(2){width:230px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th:nth-child(3),body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td:nth-child(3){width:160px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th:nth-child(4),body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td:nth-child(4){width:180px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th:nth-child(5),body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td:nth-child(5){width:145px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th:nth-child(6),body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td:nth-child(6){width:105px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th:nth-child(7),body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td:nth-child(7){width:130px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table th:nth-child(8),body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td:nth-child(8){width:150px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table td{vertical-align:middle}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-person{min-width:0}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-person>div{flex:1;min-width:0}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-person b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-person small{overflow-wrap:anywhere;white-space:normal;line-height:1.35}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table .agency-inline-view{width:30px;min-width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;margin-right:4px;padding:0;vertical-align:middle;color:#536987}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table .agency-inline-view svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form input:disabled,body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form select:disabled,body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form textarea:disabled{opacity:1;background:#f4f7fb!important;border-color:#dce6f2!important;color:#334968!important;cursor:default}
body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form .agency-employee-invite span{color:#536987}
.dark body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form input:disabled,.dark body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form select:disabled,.dark body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form textarea:disabled{background:#1c2a3f!important;border-color:#34445c!important;color:#dce6f4!important}

/* Attendance logging controls */
.agency-attendance-toolbar .attendance-date-range{flex:0 1 170px;min-width:155px}
.attendance-toolbar-hint{flex:1 1 190px;color:#6e819d;font-size:10px;padding:0 4px}
.agency-attendance-record-heading p{margin:4px 0 0;color:#7183a0;font-size:10px}
.agency-attendance-table th:first-child,.agency-attendance-table td:first-child{width:auto;padding-left:12px}
.agency-attendance-table td:last-child{white-space:normal;min-width:160px}
.agency-attendance-status.unlogged{background:#eef2f7;color:#66778e}
.agency-attendance-status.late{background:#fff3d9;color:#b47700}
.attendance-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.attendance-row-action{min-height:29px;padding:0 9px;border:1px solid #0866f8;border-radius:6px;background:#0866f8;color:#fff;font-size:10px;font-weight:650;cursor:pointer}
.attendance-row-action.secondary{border-color:#dce6f2;background:#fff;color:#355172}
.attendance-row-action:hover{filter:brightness(.97)}
.attendance-log-dialog{width:min(440px,calc(100vw - 28px));max-width:none;padding:0;border:0;border-radius:14px;box-shadow:0 24px 80px #15233c38;color:#203452}
.attendance-log-dialog[open]{position:fixed;inset:auto;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;max-height:calc(100vh - 32px);overflow:auto}
.attendance-log-dialog::backdrop{background:#10213b70;backdrop-filter:blur(2px)}
.attendance-log-dialog form{display:grid;gap:14px;padding:21px}
.attendance-log-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:4px}
.attendance-log-heading h2{margin:0;color:#152844;font-size:18px}
.attendance-log-heading p{margin:5px 0 0;color:#7183a0;font-size:11px}
.attendance-log-heading>button{width:30px;height:30px;border:1px solid #e1e8f1;border-radius:7px;background:#fff;color:#526783;font-size:20px;cursor:pointer}
.attendance-log-dialog form>label,.attendance-log-times label{display:grid;gap:6px;color:#354c6d;font-size:11px;font-weight:650}
.attendance-log-dialog input,.attendance-log-dialog select,.attendance-log-dialog textarea{width:100%;min-height:38px;padding:8px 10px;border:1px solid #dce5ef;border-radius:7px;background:#fff;color:#253b5d;font:inherit;font-weight:400}
.attendance-log-dialog textarea{resize:vertical}
.attendance-log-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.attendance-optional{color:#8593a8;font-weight:400}
.attendance-log-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:3px}
.attendance-page-size{display:flex;align-items:center;gap:7px;color:#7183a0;font-size:10px}
.attendance-page-size select{height:32px;padding:0 8px;border:1px solid #dce6f2;border-radius:6px;background:#fff;color:#304967;font-size:10px}
.dark .attendance-row-action.secondary,.dark .attendance-page-size select{border-color:#34445c;background:#1c2a3f;color:#dce6f4}
.dark .agency-attendance-status.unlogged{background:#2d3b50;color:#c0ccda}
.dark .attendance-log-dialog{background:#1b293e;color:#dce6f4}
.dark .attendance-log-heading h2{color:#edf3fb}
.dark .attendance-log-dialog form>label,.dark .attendance-log-times label{color:#c6d2e2}
.dark .attendance-log-dialog input,.dark .attendance-log-dialog select,.dark .attendance-log-dialog textarea,.dark .attendance-log-heading>button{border-color:#34445c;background:#172438;color:#e5edf7}
@media(max-width:900px){.attendance-toolbar-hint{flex-basis:100%;padding:5px 2px}}

/* Attendance table columns are intentionally sized for legibility without selection boxes. */
.agency-attendance-table{width:100%;min-width:870px;table-layout:fixed}
.agency-attendance-table th:first-child,.agency-attendance-table td:first-child{width:27%;padding-left:14px}
.agency-attendance-table th:nth-child(2),.agency-attendance-table td:nth-child(2){width:12%}
.agency-attendance-table th:nth-child(3),.agency-attendance-table td:nth-child(3),.agency-attendance-table th:nth-child(4),.agency-attendance-table td:nth-child(4){width:11%}
.agency-attendance-table th:nth-child(5),.agency-attendance-table td:nth-child(5){width:12%}
.agency-attendance-table th:nth-child(6),.agency-attendance-table td:nth-child(6){width:12%}
.agency-attendance-table th:last-child,.agency-attendance-table td:last-child{width:15%;min-width:145px}
.agency-attendance-table .agency-hr-person{min-width:0;gap:10px}
.agency-attendance-table .agency-hr-person>div{min-width:0}
.agency-attendance-table .agency-hr-person b,.agency-attendance-table .agency-hr-person small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agency-attendance-record-heading>div:first-child{min-width:0}
@media(max-width:700px){.agency-attendance-table{min-width:870px}}

/* Leave requests table: readable employee details and one coordinated action area. */
.leave-table{width:100%;min-width:960px;table-layout:fixed}
.leave-table th:nth-child(1),.leave-table td:nth-child(1){width:18%}
.leave-table th:nth-child(2),.leave-table td:nth-child(2){width:12%}
.leave-table th:nth-child(3),.leave-table td:nth-child(3),.leave-table th:nth-child(4),.leave-table td:nth-child(4){width:10%}
.leave-table th:nth-child(5),.leave-table td:nth-child(5){width:9%}
.leave-table th:nth-child(6),.leave-table td:nth-child(6){width:14%}
.leave-table th:nth-child(7),.leave-table td:nth-child(7){width:10%}
.leave-table th:nth-child(8),.leave-table td:nth-child(8){width:17%;min-width:160px}
.leave-person{min-width:0;gap:9px}
.leave-person div{min-width:0;overflow:hidden}
.leave-person b,.leave-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leave-type{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leave-actions{display:grid;grid-template-columns:repeat(2,minmax(54px,1fr));gap:5px;min-width:138px}
.leave-actions button{min-height:27px;padding:0 7px;border:1px solid #dce6f2;border-radius:6px;background:#fff;color:#315071;font-size:10px;font-weight:650;white-space:nowrap;cursor:pointer}
.leave-actions .review-approve{background:#e9f8ef;border-color:#ccebd8;color:#078b58;font-size:14px}
.leave-actions .review-reject{background:#fff0f0;border-color:#f6d5d5;color:#d83e48;font-size:14px}
.leave-actions button:hover{border-color:#9ebcf0;background:#f6f9ff}
.leave-actions .review-approve:hover{background:#ddf4e6}.leave-actions .review-reject:hover{background:#ffe6e6}
.leave-table td:last-child{white-space:normal}
@media(max-width:700px){.leave-table{min-width:960px}}
.dark .leave-actions button{border-color:#34445c;background:#1c2a3f;color:#dce6f4}
.dark .leave-actions .review-approve{background:#183a31;color:#7cdaad}.dark .leave-actions .review-reject{background:#43272d;color:#ff9fa5}

/* Keep the Employee identity readable in the fixed-layout trash table. */
.hr-trash-table{width:100%!important;min-width:1180px;table-layout:fixed}
.hr-trash-table th:nth-child(2),.hr-trash-table td:nth-child(2){width:300px!important;min-width:300px}
.hr-trash-table .agency-hr-person{min-width:0;gap:10px}
.hr-trash-table .agency-hr-person>span{flex:0 0 36px}
.hr-trash-table .agency-hr-person>div{flex:1;min-width:0}
.hr-trash-table .agency-hr-person b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-trash-table .agency-hr-person small{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.hr-trash-table td:nth-child(2) .agency-hr-person{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;justify-content:start;width:100%;text-align:left!important}
.hr-trash-table td:nth-child(2) .agency-hr-person>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0;width:100%;text-align:left!important}
.hr-trash-table td:nth-child(2) .agency-hr-person b,.hr-trash-table td:nth-child(2) .agency-hr-person small{align-self:stretch;width:100%;margin:0!important;padding:0!important;text-align:left!important}

/* Team directory: anchor both employee labels to the same left edge beside the avatar. */
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table tbody td:nth-child(2) .agency-hr-person{display:flex;width:100%;justify-content:flex-start;text-align:left!important}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table tbody td:nth-child(2) .agency-hr-person>div{display:flex!important;flex:1;flex-direction:column;align-items:flex-start;min-width:0;text-align:left!important}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table tbody td:nth-child(2) .agency-hr-person b,body[data-page='human-resources'] .agency-workspace[data-workspace-page='team-management'] .agency-hr-table tbody td:nth-child(2) .agency-hr-person small{align-self:flex-start;width:100%;margin:0!important;padding:0!important;text-align:left!important}

/* Employee details: align the heading and helper copy with the form content. */
body[data-page='human-resources'] .agency-employee-view-mode.agency-employee-modal>h2,body[data-page='human-resources'] .agency-employee-view-mode.agency-employee-modal>p{text-align:left}
body[data-page='human-resources'] .agency-employee-view-mode.agency-employee-modal>h2{margin-right:44px;margin-left:0!important}
body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form .agency-contact-form-grid>.agency-employee-notes{grid-column:1/-1;width:100%}
body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form .agency-employee-notes textarea{width:100%;box-sizing:border-box}
body[data-page='human-resources'] .agency-employee-view-mode .agency-employee-form .agency-employee-notes small{display:block;text-align:right}

/* Attendance page readability and centered row actions. */
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-table th{font-size:14px!important;line-height:1.4}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-table td{font-size:14px!important;line-height:1.45}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-table th:last-child,body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-table td:last-child{text-align:center}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .attendance-actions{justify-content:center}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-hr-person b{font-size:14px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-hr-person small{font-size:12px;line-height:1.4}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-status{font-size:12px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .attendance-row-action{min-height:32px;padding-inline:11px;font-size:12px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-record-heading p,body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .attendance-toolbar-hint{font-size:12px;line-height:1.45}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-toolbar>select,body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-toolbar>label,body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-toolbar>label input,body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-toolbar>.btn{font-size:13px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-kpis article>div>small{font-size:13px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-kpis article>em{font-size:14px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-kpis article>em small{font-size:11px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-sidebar .agency-hr-widget-title h2,body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-panel-heading h2{font-size:15px}
body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-sidebar :is(p,span,small,li,time,a),body[data-page='human-resources'] .agency-workspace[data-workspace-page='attendance'] .agency-attendance-chart-legend{font-size:12px;line-height:1.45}

/* Keep Leave Management text comfortably readable without changing its layout. */
body[data-page='human-resources'] .leave-page :is(.leave-page-heading p,.leave-kpis small,.leave-toolbar,.leave-toolbar input,.leave-toolbar select,.leave-toolbar .btn,.leave-table-heading .btn,.leave-view-all,.leave-widget-heading>span,.leave-widget-heading a,.leave-footer){font-size:13px;line-height:1.45}
body[data-page='human-resources'] .leave-page :is(.leave-page-heading h1,.leave-table-heading h2,.leave-widget-heading h2){font-size:17px;line-height:1.35}
body[data-page='human-resources'] .leave-page .leave-kpis b{font-size:25px}
body[data-page='human-resources'] .leave-page .leave-table th{font-size:13px;line-height:1.4}
body[data-page='human-resources'] .leave-page .leave-table td{font-size:13px;line-height:1.45}
body[data-page='human-resources'] .leave-page .leave-person b{font-size:14px}
body[data-page='human-resources'] .leave-page :is(.leave-person small,.leave-type,.leave-status){font-size:12px;line-height:1.4}
body[data-page='human-resources'] .leave-page :is(.leave-actions button,.leave-footer select,#leave-pagination button){font-size:12px}
body[data-page='human-resources'] .leave-page :is(.leave-balance b,.leave-side-row b,.leave-activity-row b){font-size:13px;line-height:1.4}
body[data-page='human-resources'] .leave-page :is(.leave-balance small,.leave-side-row small,.leave-activity-row small,.leave-activity-row time,.leave-empty){font-size:12px;line-height:1.45}
body[data-page='human-resources'] .leave-page .leave-balance{padding:10px 0}
body[data-page='human-resources'] .leave-page .leave-dialog :is(.leave-dialog-heading p,.leave-form-section>p,.leave-form-grid label,.leave-dialog-actions .btn){font-size:13px;line-height:1.45}

/* Employee Trash: keep labels and record details readable at normal zoom. */
body[data-page='human-resources'] .hr-trash-page :is(.hr-trash-stat small,.hr-trash-search,.hr-trash-search input,.hr-trash-toolbar select){font-size:13px;line-height:1.45}
body[data-page='human-resources'] .hr-trash-page .hr-trash-stat b{font-size:25px}
body[data-page='human-resources'] .hr-trash-page .hr-trash-table th{font-size:13px;line-height:1.4}
body[data-page='human-resources'] .hr-trash-page .hr-trash-table td{font-size:13px;line-height:1.45}
body[data-page='human-resources'] .hr-trash-page .hr-trash-table .agency-hr-person b{font-size:14px;line-height:1.4}
body[data-page='human-resources'] .hr-trash-page .hr-trash-table .agency-hr-person small{font-size:12px;line-height:1.4}
body[data-page='human-resources'] .hr-trash-page :is(.hr-trash-bulk-actions .btn,.hr-trash-table td .btn){font-size:12px}
body[data-page='human-resources'] .hr-trash-page .agency-hr-footer{font-size:13px;line-height:1.45}

/* Project dashboard typography aligned with the readable HR page scale. */
body[data-page='project-planning'] .agency-projects-page .agency-project-table th{font-size:13px;line-height:1.4}
body[data-page='project-planning'] .agency-projects-page .agency-project-table td{font-size:13px;line-height:1.45}
body[data-page='project-planning'] .agency-projects-page .agency-project-name b{font-size:14px;line-height:1.4}
body[data-page='project-planning'] .agency-projects-page :is(.agency-project-name small,.agency-project-person b,.agency-project-progress>b,.agency-project-status){font-size:12px;line-height:1.4}
body[data-page='project-planning'] .agency-projects-page .agency-project-kpi>div>small{font-size:13px}
body[data-page='project-planning'] .agency-projects-page .agency-project-kpi>div>b{font-size:25px}
body[data-page='project-planning'] .agency-projects-page .agency-project-kpi>em{font-size:14px}
body[data-page='project-planning'] .agency-projects-page .agency-project-kpi>em small{font-size:11px}
body[data-page='project-planning'] .agency-projects-page :is(.agency-project-search input,.agency-project-tabs button,.agency-filter-button,.agency-project-status-filter){font-size:13px}
body[data-page='project-planning'] .agency-projects-page .agency-project-sidecard h3{font-size:17px;line-height:1.35}
body[data-page='project-planning'] .agency-projects-page :is(.agency-project-legend>div,.agency-side-title a,.agency-deadline-row small,.agency-deadline-row time,.agency-manager-row>div small,.agency-manager-row>em){font-size:12px;line-height:1.45}
body[data-page='project-planning'] .agency-projects-page :is(.agency-deadline-row b,.agency-manager-row>div b){font-size:13px;line-height:1.4}
body[data-page='project-planning'] .agency-projects-page :is(.agency-project-pagination,.agency-project-pagination select,.agency-project-pagination button){font-size:12px}

/* Keep task titles and descriptions on one shared left edge in the task list. */
body[data-page='task-management'] .agency-tasks-page .agency-task-table td:nth-child(2){text-align:left!important}
body[data-page='task-management'] .agency-tasks-page .agency-task-name{display:flex!important;flex-direction:column;align-items:flex-start!important;width:100%;text-align:left!important}
body[data-page='task-management'] .agency-tasks-page .agency-task-name :is(b,small){display:block!important;align-self:flex-start!important;width:100%;margin:0!important;padding:0!important;text-align:left!important}