/* MyCity workspace. Shared tokens and components; legacy business/print layouts remain in style.css. */
@font-face {
    font-family:MyCity;
    src:url('../font/Cairo-Regular.ttf') format('truetype');
    font-weight:400;
    font-display:swap
}
@font-face {
    font-family:MyCity;
    src:url('../font/Cairo-SemiBold.ttf') format('truetype');
    font-weight:600;
    font-display:swap
}
@font-face {
    font-family:MyCity;
    src:url('../font/Cairo-Bold.ttf') format('truetype');
    font-weight:700 900;
    font-display:swap
}
:root {
    --mc-bg:#f3f6f5;
    --mc-surface:#fff;
    --mc-text:#203a33;
    --mc-muted:#657b73;
    --mc-border:#e0e8e4;
    --mc-primary:#176b54;
    --mc-primary-hover:#10513f;
    --mc-soft:#eaf4ee;
    --mc-gold:#ab7621;
    --mc-danger:#b5443d;
    --mc-sidebar:260px;
    --mc-header:82px;
    --mc-radius:16px;
    --mc-shadow:0 4px 24px #203a3306;
    --blue:var(--mc-primary);
    --button-flat-background-hover:var(--mc-soft);
    --window-header-background:#fff;
    --window-caption-color:var(--mc-text)
}
@media screen {
    * {
        box-sizing:border-box
    }
    html,body {
        margin:0;
        background:var(--mc-bg);
        color:var(--mc-text);
        font-family:MyCity,'default',sans-serif;
        font-size:14px;
        line-height:1.75
    }
    button,input,textarea,select {
        font:inherit
    }
    button,a,i-link,i-button {
        touch-action:manipulation
    }
    button {
        cursor:pointer
    }
    a,i-link {
        color:var(--mc-primary)
    }
    a:hover,i-link:hover {
        background:var(--mc-soft);
        color:var(--mc-primary-hover)
    }
    :focus-visible {
        outline:3px solid #b58535;
        outline-offset:3px;
        border-radius:5px
    }
    button:disabled,[aria-disabled=true],i-button[disabled] {
        opacity:.5;
        cursor:not-allowed
    }
    img {
        object-fit:contain
    }
    button img,.icon-button img {
        width:20px;
        height:20px
    }
    input[type=checkbox] {
        width:18px;
        height:18px;
        accent-color:var(--mc-primary)
    }
    [hidden] {
        display:none!important
    }
    .skip-link {
        position:fixed;
        top:-80px;
        right:24px;
        z-index:300;
        padding:12px 20px;
        background:var(--mc-primary);
        color:#fff;
        border-radius:8px
    }
    .skip-link:focus {
        top:10px
    }
    .icon-button {
        width:42px;
        height:42px;
        min-width:42px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        position:relative;
        border:1px solid var(--mc-border);
        border-radius:12px;
        background:var(--mc-surface);
        padding:0;
        color:var(--mc-text);
        transition:background .18s,border-color .18s
    }
    .icon-button:hover {
        background:var(--mc-soft);
        border-color:#bed2c5
    }
    .eyebrow {
        font-size:12px;
        font-weight:700;
        letter-spacing:.04em;
        color:var(--mc-muted)
    }
    /* Persistent shell */
    .side-bar {
        top:0;
        right:0;
        width:var(--mc-sidebar);
        height:100dvh;
        z-index:50;
        background:#fff;
        box-shadow:none;
        border-left:1px solid var(--mc-border);
        transform:translateX(100%);
        transition:transform .22s ease;
        overflow:hidden;
        padding:0 18px
    }
    .side-bar.sidebar-visible {
        width:var(--mc-sidebar);
        transform:translateX(0)
    }
    .sidebar-brand {
        display:flex;
        align-items:center;
        gap:12px;
        min-height:var(--mc-header);
        padding:14px 8px;
        border-bottom:1px solid var(--mc-border);
        flex-shrink:0
    }
    .sidebar-brand>img {
        padding:8px;
        background:var(--mc-soft);
        border-radius:12px
    }
    .sidebar-brand strong {
        display:block;
        line-height:1.4;
        font-size:27px;
        font-weight:800;
        color:var(--mc-text)
    }
    .brand-dot {
        color:var(--mc-primary)
    }
    .sidebar-brand small {
        font-size:10px;
        color:var(--mc-muted)
    }
    .sidebar-close {
        display:none
    }
    .sidebar-section-label {
        font-size:11px;
        color:var(--mc-muted);
        padding:22px 14px 12px;
        font-weight:700
    }
    .side-bar i-navbar {
        flex:1;
        min-height:0;
        height:auto;
        padding:0 0 12px
    }
    .side-bar .navbar-search {
        margin:0 4px 14px;
        width:calc(100% - 8px);
        min-height:39px;
        font-size:12px;
        background-color:#f7f9f8;
        background-image:url('../img/ui/search.svg');
        background-size:17px;
        background-position:12px center;
        border:1px solid var(--mc-border);
        border-radius:9px;
        padding:7px 12px 7px 35px
    }
    .navbar-container {
        visibility:visible;
        scrollbar-width:thin;
        scrollbar-color:#d8e3dc transparent
    }
    .side-bar .navbar-item {
        margin:3px 0;
        position:relative
    }
    .side-bar i-link {
        height:auto;
        min-height:43px;
        padding:9px 12px;
        gap:11px;
        font-size:13px;
        font-weight:600;
        border-radius:9px;
        color:#5b7067;
        transition:background .18s,color .18s
    }
    .side-bar i-link img {
        width:20px;
        height:20px;
        padding:0;
        opacity:.85
    }
    .side-bar i-link span {
        flex:1;
        width:auto
    }
    .side-bar .navbar-item[selected]>i-link {
        background:var(--mc-soft);
        color:var(--mc-primary);
        font-weight:800
    }
    .side-bar .navbar-item[selected]>i-link:before {
        content:'';
        position:absolute;
        right:-6px;
        height:21px;
        width:3px;
        background:var(--mc-primary);
        border-radius:3px
    }
    .side-bar .navbar-item[selected]>i-link:hover,.side-bar i-link:hover {
        background:var(--mc-soft);
        color:var(--mc-primary)
    }
    .side-bar .navbar-menu {
        margin:2px 22px 8px 0;
        border-right:1px solid var(--mc-border);
        padding-right:9px
    }
    .side-bar .navbar-menu i-link {
        font-size:12px;
        min-height:37px
    }
    .side-bar .navbar-menu img {
        width:16px;
        height:16px
    }
    .side-bar i-check {
        width:20px;
        height:24px;
        background-size:12px;
        flex-shrink:0
    }
    .sidebar-bottom {
        display:flex;
        gap:12px;
        align-items:center;
        border-top:1px solid var(--mc-border);
        padding:16px 8px;
        flex-shrink:0
    }
    .sidebar-bottom strong,.sidebar-bottom small {
        display:block
    }
    .sidebar-bottom strong {
        font-size:12px
    }
    .sidebar-bottom small {
        font-size:10px;
        color:var(--mc-muted)
    }
    .nav-scrim {
        display:none
    }
    .title-bar {
        position:fixed;
        top:0;
        right:0;
        left:0;
        height:var(--mc-header);
        margin:0;
        padding:0 30px;
        gap:16px;
        z-index:40;
        border-bottom:1px solid var(--mc-border);
        box-shadow:none;
        transition:right .22s;
        background:#ffffffed
    }
    .nav-open .title-bar {
        right:var(--mc-sidebar)
    }
    .topbar-heading {
        min-width:0
    }
    .topbar-eyebrow {
        font-size:10px;
        color:var(--mc-muted)
    }
    .location {
        padding:0;
        gap:8px;
        font-size:13px;
        text-align:right;
        align-items:center;
        color:var(--mc-text);
        line-height:1.6
    }
    .location>span {
        background:none!important;
        color:inherit!important;
        padding:0!important;
        transform:none!important;
        clip-path:none!important;
        font-size:13px
    }
    .location>span:after {
        display:none
    }
    .location>span+span:after {
        content:'/'!important;
        display:inline!important;
        color:#a4b5ad;
        margin-left:8px
    }
    .topbar-spacer {
        flex:1
    }
    .workspace-search {
        position:relative;
        display:flex;
        align-items:center;
        gap:9px;
        width:min(330px,28vw);
        padding:0 12px;
        border:1px solid var(--mc-border);
        background:#f7f9f8;
        border-radius:10px;
        min-height:42px
    }
    .workspace-search>img {
        width:18px;
        height:18px
    }
    .workspace-search input {
        width:100%;
        min-width:0;
        border:0;
        outline:0;
        background:none;
        padding:7px 0;
        font-size:12px;
        color:var(--mc-text);
        box-shadow:none
    }
    .workspace-search:focus-within {
        outline:2px solid #b4ccbe;
        outline-offset:2px
    }
    .workspace-search kbd {
        white-space:nowrap;
        font-family:inherit;
        font-size:9px;
        border:1px solid var(--mc-border);
        border-radius:4px;
        padding:0 4px;
        color:var(--mc-muted);
        direction:ltr
    }
    .section-results {
        position:absolute;
        top:calc(100% + 8px);
        right:0;
        left:0;
        background:#fff;
        border:1px solid var(--mc-border);
        border-radius:12px;
        box-shadow:0 12px 40px #203a3320;
        max-height:340px;
        overflow:auto;
        padding:6px;
        z-index:60
    }
    .section-results button {
        display:flex;
        width:100%;
        align-items:center;
        gap:10px;
        padding:10px;
        border:0;
        background:#fff;
        text-align:right;
        border-radius:7px;
        color:var(--mc-text);
        min-height:44px
    }
    .section-results button:hover,.section-results button:focus {
        background:var(--mc-soft)
    }
    .section-results img {
        width:18px;
        height:18px
    }
    .section-results p {
        padding:12px;
        font-size:12px;
        color:var(--mc-muted);
        margin:0
    }
    .inbox {
        padding:0;
        position:relative;
        overflow:visible
    }
    .inbox>img {
        width:20px;
        height:20px
    }
    .inbox>span {
        position:absolute;
        top:-5px;
        right:-5px;
        padding:0 5px;
        min-width:18px;
        height:18px;
        background:var(--mc-primary);
        color:#fff;
        border:2px solid #fff;
        font-size:9px;
        line-height:14px;
        border-radius:10px
    }
    .profile {
        border:0;
        border-right:1px solid var(--mc-border);
        box-shadow:none;
        border-radius:0;
        margin:0;
        padding:0 16px 0 0;
        gap:10px
    }
    .profile-avatar {
        width:38px;
        height:38px;
        background:#f1eadc;
        color:#765b29;
        display:grid;
        place-items:center;
        font-weight:800;
        border-radius:50%
    }
    .profile-details {
        display:flex;
        flex-direction:column;
        line-height:1.5;
        min-width:75px
    }
    .profile-username {
        font-size:12px;
        font-weight:700
    }
    .profile-type {
        font-size:10px;
        color:var(--mc-muted);
        padding:0
    }
    .logout-button {
        border:0;
        width:32px;
        min-width:32px
    }
    .logout-button img {
        width:17px;
        height:17px
    }
    .app {
        position:absolute;
        top:var(--mc-header);
        bottom:36px;
        right:0;
        left:0;
        display:flex;
        flex-direction:column;
        min-width:0;
        transition:right .22s;
        margin:0;
        outline:none
    }
    .app.app-shrunk {
        right:var(--mc-sidebar);
        margin:0
    }
    i-router {
        display:block;
        padding:26px 30px;
        height:auto;
        flex:1;
        min-height:0;
        overflow:auto;
        scrollbar-width:thin;
        scrollbar-color:#ccd9d1 transparent
    }
    i-route {
        min-width:0
    }
    i-route[selected] {
        position:relative
    }
    .footer {
        position:fixed;
        bottom:0;
        height:36px;
        right:0;
        left:0;
        width:auto;
        padding:5px 30px;
        background:var(--mc-bg);
        color:var(--mc-muted);
        font-size:10px;
        display:flex;
        justify-content:space-between;
        z-index:20;
        transition:right .22s
    }
    .nav-open .footer {
        right:var(--mc-sidebar)
    }
    .page-heading {
        flex-shrink:0;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:16px;
        padding:24px 30px 0
    }
    .page-heading h1 {
        font-size:25px;
        margin:0;
        font-weight:800
    }
    .page-heading p {
        color:var(--mc-muted);
        font-size:12px;
        margin:3px 0 0
    }
    .page-date {
        font-size:11px;
        color:var(--mc-muted)
    }
    /* Dashboard */
    .home {
        display:grid;
        grid-template-columns:repeat(12,minmax(0,1fr));
        gap:22px;
        container-type:inline-size;
        --window-caption-color:var(--mc-text);
        --window-header-background:#fff;
        --window-active-background:#fff;
        padding-bottom:20px
    }
    .home>.dashboard-welcome,.home>.quick-access,.home>.dashboard-feedback {
        grid-column:1/-1
    }
    .dashboard-welcome {
        display:flex;
        justify-content:space-between;
        gap:20px;
        align-items:center;
        background:#123f32;
        border:1px solid #285345;
        border-radius:18px;
        color:#fff;
        padding:28px 32px;
        position:relative;
        overflow:hidden
    }
    .dashboard-welcome:after {
        content:'';
        width:190px;
        height:190px;
        position:absolute;
        left:110px;
        top:-110px;
        border:30px solid #ffffff04;
        transform:rotate(35deg);
        border-radius:20px;
        pointer-events:none
    }
    .dashboard-welcome .eyebrow {
        color:#b9d9ca
    }
    .dashboard-welcome h1 {
        font-size:29px;
        line-height:1.6;
        margin:4px 0;
        font-weight:800
    }
    .dashboard-welcome p {
        color:#c1d4cb;
        font-size:12px;
        margin:0
    }
    .welcome-actions {
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        gap:14px;
        flex-shrink:0;
        z-index:1
    }
    .welcome-actions .page-date {
        color:#c1d4cb;
        font-size:11px
    }
    .welcome-actions button {
        display:flex;
        align-items:center;
        gap:9px;
        border:1px solid #ffffff35;
        background:#ffffff0c;
        color:#fff;
        border-radius:9px;
        padding:8px 14px;
        min-height:40px;
        font-size:12px
    }
    .welcome-actions button:hover {
        background:#ffffff20
    }
    .welcome-actions img {
        filter:brightness(0) invert(1);
        width:16px;
        height:16px
    }
    .quick-access {
        display:flex;
        align-items:center;
        gap:10px;
        flex-wrap:wrap;
        margin-top:-5px
    }
    .quick-access>span {
        font-size:11px;
        color:var(--mc-muted);
        margin-left:6px
    }
    .quick-access i-link {
        display:flex;
        align-items:center;
        gap:8px;
        border:1px solid var(--mc-border);
        background:#fff;
        color:var(--mc-text);
        border-radius:9px;
        padding:7px 12px;
        font-size:11px;
        min-height:37px
    }
    .quick-access i-link:hover {
        border-color:#abc6b8;
        background:var(--mc-soft)
    }
    .quick-access img {
        width:16px;
        height:16px
    }
    .home>.summery,.home>.secondary-stats,.home>.mail {
        grid-column:1/-1
    }
    .home>.fin {
        grid-column:span 6
    }
    .home>.last,.home>.delayed {
        grid-column:span 3
    }
    .home .window {
        border:1px solid var(--mc-border);
        border-radius:var(--mc-radius);
        overflow:hidden;
        box-shadow:var(--mc-shadow);
        background:#fff;
        min-width:0
    }
    .home .summery {
        border:0;
        box-shadow:none;
        border-radius:0;
        background:none
    }
    .home .summery>.window-header {
        display:none
    }
    .home .window-header {
        background:#fff;
        color:var(--mc-text);
        border-bottom:1px solid #edf1ee;
        min-height:58px;
        padding:12px 20px;
        gap:10px
    }
    .home .window-caption {
        font-size:14px;
        font-weight:800;
        padding:0
    }
    .home .window-icon {
        background-color:var(--mc-primary);
        width:18px;
        height:18px;
        opacity:.85
    }
    .home .window-body {
        background:#fff;
        overflow:visible
    }
    .home .summery>.window-body {
        background:transparent
    }
    .home .stats {
        padding:18px;
        gap:12px;
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .home .summery .stats {
        padding:0;
        gap:18px;
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .home .stat {
        --accent:var(--mc-primary);
        padding:19px 20px 16px;
        gap:6px;
        min-height:136px;
        border:1px solid var(--mc-border);
        border-top:1px solid var(--mc-border);
        border-radius:14px;
        color:var(--mc-text);
        box-shadow:var(--mc-shadow);
        transition:border-color .18s,box-shadow .18s;
        background:#fff
    }
    .home i-link.stat:hover {
        border-color:#a2c3b1;
        background:#fff;
        box-shadow:0 5px 20px #203a330c;
        border-radius:14px
    }
    .home .stat.c-blue {
        --accent:#236a91
    }
    .home .stat.c-green {
        --accent:#176b54
    }
    .home .stat.c-red {
        --accent:#b14e40
    }
    .home .stat.c-yellow {
        --accent:#987023
    }
    .home .stat.c-gray {
        --accent:#5b6d83
    }
    .home .stat-icon {
        top:18px;
        left:18px;
        width:37px;
        height:37px;
        padding:9px;
        background:#f0f5f2;
        border-radius:11px;
        opacity:1
    }
    .home .stat-label {
        color:var(--mc-muted);
        font-size:12px;
        font-weight:600;
        padding-left:35px
    }
    .home .stat-value {
        font-family:MyCity,sans-serif;
        font-size:28px;
        font-weight:800;
        color:var(--mc-text);
        line-height:1.7;
        font-variant-numeric:tabular-nums
    }
    .home .stat-value.small {
        font-size:22px
    }
    .home .stat-sub {
        display:flex;
        gap:5px;
        flex-wrap:wrap;
        align-items:center;
        font-size:10px;
        min-height:18px
    }
    .home .stat-bar {
        height:4px;
        background:#ecf1ee;
        border-radius:4px;
        margin:3px 0 1px
    }
    .home .stat-bar>div {
        background:var(--accent);
        border-radius:4px
    }
    .chip,.inbox-stats .chip {
        display:inline-flex;
        align-items:center;
        width:fit-content;
        background:#f1f4f2;
        color:#607269;
        border-radius:5px;
        padding:1px 7px;
        font-size:10px;
        line-height:1.9;
        border:1px solid transparent
    }
    .chip.ok,.inbox-stats .chip.ok {
        background:#edf6ef;
        color:#356947
    }
    .chip.bad,.inbox-stats .chip.bad {
        background:#fcf0eb;
        color:#a24a35
    }
    .home .secondary-stats {
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:14px
    }
    .home .secondary-stats .stat {
        min-height:98px;
        padding:13px 16px;
        background:#f9fbfa;
        box-shadow:none
    }
    .home .secondary-stats .stat-value {
        font-size:21px
    }
    .home .secondary-stats .stat-icon {
        width:30px;
        height:30px;
        padding:6px;
        left:13px;
        top:13px
    }
    .home .secondary-stats .stat-label {
        font-size:11px
    }
    .home .secondary-stats .stat-sub {
        font-size:10px
    }
    .home .mail .stats {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:0;
        padding:4px 20px 12px
    }
    .home .mail .stat {
        min-height:102px;
        border:0;
        border-radius:0;
        box-shadow:none;
        padding:15px 14px;
        border-bottom:1px solid #edf1ee
    }
    .home .mail .stat-label {
        padding:0;
        font-size:11px
    }
    .home .mail .stat-value {
        font-size:24px
    }
    .home .mail .stat-value.small {
        font-size:19px
    }
    .home .mail .stat:hover {
        box-shadow:none;
        background:#f8faf9;
        border-radius:0
    }
    .home .panels {
        padding:8px 20px 20px;
        gap:16px;
        grid-template-columns:1.4fr 1fr 1fr
    }
    .home .panel {
        border:1px solid var(--mc-border);
        padding:16px;
        border-radius:12px;
        min-width:0
    }
    .home .panel h3 {
        font-size:12px;
        color:var(--mc-text);
        margin-bottom:18px;
        font-weight:700
    }
    .home .chart-box {
        height:220px
    }
    .home .bar-row {
        row-gap:5px;
        margin-bottom:15px
    }
    .home .bar-name,.home .bar-count {
        font-size:11px
    }
    .home .bar {
        background:#edf3ef;
        height:5px
    }
    .home .bar>div {
        background:var(--mc-primary)
    }
    .home .message {
        padding:11px 0;
        gap:8px
    }
    .home .message-type {
        font-size:11px;
        color:var(--mc-text)
    }
    .home .message-from,.home .message-time {
        font-size:10px;
        color:var(--mc-muted)
    }
    .home .dot {
        width:7px;
        height:7px
    }
    .home .stats.compact {
        grid-template-columns:repeat(3,minmax(0,1fr));
        padding:12px 18px
    }
    .home .fin .stat {
        min-height:100px;
        padding:9px 12px;
        box-shadow:none;
        background:#f7faf8;
        border:0;
        border-radius:9px
    }
    .home .fin .stat-label {
        padding:0;
        font-size:10px
    }
    .home .fin .stat-value.small {
        font-size:20px
    }
    .home .panel.flat {
        border:0;
        margin:0;
        padding:12px 20px 20px
    }
    .home .items {
        padding:8px 16px 14px
    }
    .home .item {
        background:#fff;
        border:0;
        border-bottom:1px solid #edf1ee;
        border-radius:0;
        margin:0;
        padding:14px 0;
        align-items:flex-start
    }
    .home .item:last-child {
        border:0
    }
    .home .item-main {
        gap:4px;
        font-size:11px
    }
    .home .item-main>i-link+ i-link {
        color:var(--mc-muted);
        font-size:10px
    }
    .home .item-meta {
        font-size:10px;
        color:var(--mc-muted)
    }
    .home .empty,.empty-state {
        padding:28px 16px;
        text-align:center;
        font-size:12px;
        color:var(--mc-muted);
        border:1px dashed var(--mc-border);
        border-radius:10px;
        margin:12px 0
    }
    .empty-state img {
        display:block;
        width:38px;
        height:38px;
        margin:0 auto 10px;
        opacity:.6
    }
    .dashboard-feedback {
        font-size:12px;
        padding:12px 16px;
        border:1px solid #e6d3af;
        background:#fff7e9;
        color:#78521e;
        border-radius:9px
    }
    .dashboard-feedback:empty {
        display:none
    }
    .chart-accessible {
        margin:12px 0 0;
        color:var(--mc-muted);
        font-size:10px
    }
    .chart-accessible summary {
        cursor:pointer;
        padding:8px
    }
    .chart-accessible table {
        width:100%;
        font-variant-numeric:tabular-nums;
        border-collapse:collapse
    }
    .chart-accessible td,.chart-accessible th {
        padding:4px 8px;
        border-bottom:1px solid var(--mc-border);
        text-align:right
    }
    /* Shared tables, filters, forms and dialogs */
    .nav-bar {
        height:auto;
        min-height:44px;
        flex-shrink:0;
        gap:6px;
        border-bottom:1px solid var(--mc-border);
        margin:0 0 20px;
        overflow:auto;
        padding:0 0 8px
    }
    .nav-bar>i-link,.nav-bar>i-dropdown {
        padding:8px 14px;
        margin:0;
        border-radius:8px;
        font-size:12px;
        white-space:nowrap;
        color:var(--mc-muted);
        min-height:40px
    }
    .nav-bar>i-link[selected],.nav-bar>i-link.active {
        background:var(--mc-soft);
        color:var(--mc-primary)
    }
    .table-list {
        border-collapse:separate;
        border-spacing:0;
        border:1px solid var(--mc-border);
        border-radius:12px;
        overflow:hidden;
        background:#fff;
        box-shadow:var(--mc-shadow);
        font-size:12px
    }
    .table-list thead {
        background:#f0f5f2;
        color:#526a5d;
        font-size:11px;
        font-weight:700
    }
    .table-list td,.table-list th {
        padding:13px 14px;
        border:0;
        border-bottom:1px solid #e9eeeb;
        text-align:right;
        line-height:1.8
    }
    .table-list tbody>tr:nth-child(even) {
        background:#fbfcfb
    }
    .table-list tbody>tr:hover {
        background:#f0f7f2
    }
    .table-list tbody>tr:last-child>td {
        border-bottom:0
    }
    .table-list td>i-link {
        display:inline-flex;
        border-radius:6px;
        padding:3px 7px;
        min-height:30px;
        align-items:center
    }
    .table-list td>i-link[href*='remove'] {
        color:var(--mc-danger)
    }
    .table-scroll {
        overflow:auto;
        width:100%;
        border-radius:12px;
        scrollbar-width:thin
    }
    .table-scroll:focus-visible {
        outline-offset:-3px
    }
    i-repeat {
        min-width:0
    }
    .table-form {
        background:#fff;
        border:1px solid var(--mc-border);
        border-radius:12px;
        overflow:hidden
    }
    .table-form>tbody>tr>td {
        border-color:var(--mc-border);
        padding:12px
    }
    .table-form>tbody>tr>td:first-child {
        background:#f7faf8;
        color:#526a5d;
        font-size:12px
    }
    .row,.row-slim {
        border-color:var(--mc-border);
        border-radius:8px;
        background:#fff;
        min-width:0
    }
    .row>div,.row>span,.row-slim>div {
        border-color:var(--mc-border);
        padding:9px 12px;
        min-width:0
    }
    .row>span,.column>span {
        color:#5f7167;
        background:#f7faf8;
        font-size:12px;
        font-weight:600
    }
    .column {
        border-color:var(--mc-border);
        min-width:0
    }
    .column>div,.column>span {
        border-color:var(--mc-border);
        padding:9px 12px
    }
    .row-wrap {
        gap:12px
    }
    .form-section {
        margin:18px 0;
        border:1px solid var(--mc-border);
        border-radius:12px;
        box-shadow:var(--mc-shadow);
        background:#fff
    }
    .form-section>div:first-child {
        background:var(--mc-soft);
        flex-wrap:wrap;
        min-height:42px;
        font-size:12px
    }
    .form-section>div:first-child>div {
        padding:8px 12px
    }
    .form-section>div:first-child>div:first-child {
        background:#dfecdf
    }
    .actions {
        gap:8px;
        flex-wrap:wrap;
        background:#f6f9f7;
        border-radius:0 0 10px 10px;
        padding:12px;
        border-top:1px solid var(--mc-border)
    }
    .button,button.button,i-button {
        background:#fff;
        color:var(--mc-text);
        border:1px solid #d6e1da;
        border-radius:8px;
        padding:9px 15px;
        font-size:12px;
        min-height:42px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        box-shadow:none;
        cursor:pointer;
        line-height:1.65
    }
    .button:hover,button.button:hover,i-button:hover {
        background:var(--mc-soft);
        border-color:#a6c1af
    }
    .button.add,.actions>i-button:first-child,.login .actions button {
        background:var(--mc-primary);
        color:#fff;
        border-color:var(--mc-primary)
    }
    .button.add:hover,.actions>i-button:first-child:hover {
        background:var(--mc-primary-hover)
    }
    input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select,.textbox {
        border:1px solid #d7e1db;
        border-radius:8px;
        background:#fff;
        color:var(--mc-text);
        padding:9px 12px;
        min-height:42px;
        box-shadow:none;
        max-width:100%
    }
    input::placeholder,textarea::placeholder {
        color:#86968d
    }
    .textbox:focus,input:focus,textarea:focus {
        border-color:#7da98d
    }
    .select {
        border-radius:8px;
        border-color:#d7e1db;
        background:#fff;
        min-height:42px
    }
    .select-menu,.dropdown-menu {
        border:1px solid var(--mc-border);
        border-radius:10px;
        box-shadow:0 8px 28px #203a3320;
        background:#fff
    }
    .select-item:hover {
        background:var(--mc-soft)
    }
    .list-toolbar {
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        align-items:center;
        margin-bottom:18px;
        background:#fff;
        border:1px solid var(--mc-border);
        border-radius:12px;
        padding:12px 16px
    }
    .list-toolbar>div,.list-toolbar>span {
        border:0;
        padding:0
    }
    .list-toolbar .toolbar-search {
        flex:1;
        min-width:170px;
        max-width:380px
    }
    .list-toolbar .toolbar-search i-input {
        width:100%;
        display:block
    }
    .list-toolbar .toolbar-count {
        font-size:11px;
        color:var(--mc-muted);
        white-space:nowrap
    }
    .list-toolbar .actions {
        border:0;
        background:none;
        padding:0;
        border-radius:0;
        gap:6px
    }
    .list-toolbar .button {
        min-width:44px
    }
    .inbox-stats {
        margin:0 0 22px;
        padding:16px;
        background:#fff;
        border:1px solid var(--mc-border);
        border-radius:12px;
        gap:8px
    }
    .inbox-stats .group {
        font-size:11px;
        color:var(--mc-muted);
        margin:0 8px
    }
    .inbox-stats .chip {
        font-size:11px;
        padding:4px 9px;
        min-height:32px
    }
    .float {
        background:#102d2659;
        backdrop-filter:blur(4px);
        z-index:100
    }
    .float i-target {
        background:var(--mc-bg);
        border:1px solid var(--mc-border);
        border-radius:18px;
        box-shadow:0 20px 80px #12332740;
        max-width:calc(100vw - 32px);
        padding:24px;
        max-height:calc(100dvh - 48px)
    }
    .window {
        border-color:var(--mc-border);
        border-radius:12px;
        box-shadow:var(--mc-shadow)
    }
    /* Login */
    .auth-view .title-bar {
        right:0
    }
    .auth-view .side-bar,.auth-view .inbox,.auth-view .profile,.auth-view .workspace-search,.auth-view #nav-toggle {
        display:none
    }
    .auth-view .app {
        right:0
    }
    .auth-view .footer {
        right:0
    }
    .auth-view .topbar-eyebrow {
        font-size:12px
    }
    .auth-view i-router {
        display:flex;
        align-items:center;
        justify-content:center;
        padding:32px
    }
    .auth-view i-route[name=login] {
        width:100%;
        max-width:1100px
    }
    .login-layout {
        display:grid;
        grid-template-columns:1.1fr 1fr;
        min-height:570px;
        background:#fff;
        border:1px solid var(--mc-border);
        border-radius:22px;
        box-shadow:0 12px 70px #203a3308;
        overflow:hidden
    }
    .login-intro {
        padding:45px;
        background:#123f32;
        color:#fff;
        position:relative;
        overflow:hidden
    }
    .login-wordmark {
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom:48px
    }
    .login-wordmark img {
        filter:brightness(0) invert(1)
    }
    .login-wordmark strong {
        font-size:32px;
        font-weight:800
    }
    .login-intro .eyebrow {
        color:#bed4c8;
        font-size:11px
    }
    .login-intro h1 {
        font-size:36px;
        line-height:1.7;
        letter-spacing:-.04em;
        font-weight:800;
        margin:16px 0
    }
    .login-intro p {
        color:#c6d9cf;
        font-size:13px;
        max-width:360px;
        line-height:2
    }
    .login-features {
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-top:26px
    }
    .login-features span {
        border:1px solid #ffffff22;
        border-radius:6px;
        color:#e0ece5;
        padding:4px 9px;
        font-size:10px
    }
    .city-art {
        position:absolute;
        bottom:0;
        right:0;
        left:0;
        height:90px;
        display:flex;
        align-items:flex-end;
        justify-content:center;
        gap:9px;
        opacity:.1;
        pointer-events:none
    }
    .city-art i {
        display:block;
        width:50px;
        height:50px;
        background:repeating-linear-gradient(0deg,#fff 0px,#fff 10px,transparent 10px,transparent 15px);
        border:2px solid #fff;
        border-bottom:0
    }
    .city-art i:nth-child(2n) {
        height:85px
    }
    .city-art i:nth-child(3n) {
        height:115px;
        width:70px
    }
    .login-card {
        align-self:center;
        padding:50px 42px
    }
    .login-card h2 {
        font-size:28px;
        font-weight:800;
        margin:4px 0 7px
    }
    .login-card>p {
        color:var(--mc-muted);
        font-size:12px;
        margin:0
    }
    .login-card i-login {
        width:100%;
        display:block;
        margin:24px 0 0
    }
    .login-card i-login>.body {
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        background:none!important
    }
    .login-card i-login>.body>div:nth-child(2) {
        padding:0!important
    }
    .login-card .textbox-with-label {
        margin:12px 0;
        display:flex;
        flex-direction:column;
        position:relative
    }
    .login-card .textbox-with-label input {
        font-size:14px;
        width:100%!important;
        min-height:48px;
        padding:16px 12px 8px
    }
    .login-card .textbox-with-label span {
        background:#fff;
        padding:0 5px;
        font-size:11px;
        color:var(--mc-muted);
        top:-12px!important;
        right:10px;
        transform:none!important;
        line-height:1.5
    }
    .login-card i-login .actions {
        padding:20px 0 8px;
        border:0;
        background:none
    }
    .login-card i-login button {
        width:100%;
        background:var(--mc-primary);
        color:#fff;
        min-height:48px;
        font-weight:700;
        border:1px solid var(--mc-primary)
    }
    .login-card i-login button:hover {
        background:var(--mc-primary-hover)
    }
    .login-card i-login label[name=labelRemember] {
        font-size:11px;
        color:var(--mc-muted);
        padding-right:6px;
        align-self:center
    }
    .login-card .login-help {
        font-size:10px;
        margin-top:20px;
        border-top:1px solid var(--mc-border);
        padding-top:20px
    }
    .login-card [name=message]:not(:empty) {
        font-size:12px;
        background:#fff2ed;
        border:1px solid #f3d0c4;
        border-radius:8px;
        padding:10px;
        margin-bottom:12px;
        color:#9a3f33
    }
    .loading-panel {
        background:var(--mc-bg);
        z-index:200
    }
    .loading-panel-hidden {
        pointer-events:none
    }
    .loading h1 {
        font-family:MyCity,sans-serif;
        font-size:26px;
        color:var(--mc-primary)
    }
    .loading p {
        font-size:12px;
        color:var(--mc-muted)
    }
    .loading .delta {
        display:none
    }
    .loading:before {
        content:'';
        display:block;
        width:38px;
        height:38px;
        border:3px solid #dbe7df;
        border-top-color:var(--mc-primary);
        border-radius:50%;
        margin:0 auto 18px;
        animation:mc-spin .8s linear infinite
    }
    @keyframes mc-spin {
        to {
            transform:rotate(360deg)
        }
    }
    @container (max-width:1100px) {
        .home>.fin {
            grid-column:1/-1
        }
        .home>.last,.home>.delayed {
            grid-column:span 6
        }
        .home .panels {
            grid-template-columns:1fr 1fr
        }
        .home .panels>.panel:first-child {
            grid-column:1/-1
        }
        .home .secondary-stats {
            grid-template-columns:repeat(3,minmax(0,1fr))
        }
        .home .secondary-stats>.stat:nth-last-child(-n+2) {
            grid-column:auto
        }
        .home .stat-value {
            font-size:25px
        }
    }
    @container (max-width:700px) {
        .home .summery .stats {
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px
        }
        .home .secondary-stats {
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:10px
        }
        .home .secondary-stats>.stat:last-child {
            grid-column:1/-1
        }
        .home .mail .stats {
            grid-template-columns:repeat(2,minmax(0,1fr));
            padding:0 8px
        }
        .home .panels {
            grid-template-columns:1fr;
            padding:12px
        }
        .home>.last,.home>.delayed {
            grid-column:1/-1
        }
        .home .stats.compact {
            gap:6px;
            padding:12px
        }
        .home .fin .stat {
            padding:10px 6px
        }
        .home .fin .stat-value.small {
            font-size:17px
        }
        .home .fin .stat-label {
            font-size:9px
        }
        .dashboard-welcome {
            padding:22px;
            align-items:flex-start;
            flex-direction:column;
            gap:18px
        }
        .dashboard-welcome h1 {
            font-size:24px
        }
        .welcome-actions {
            flex-direction:row;
            align-items:center;
            justify-content:space-between;
            width:100%
        }
        .home .stat {
            padding:16px 14px;
            min-height:140px
        }
        .home .stat-icon {
            left:12px;
            top:13px;
            width:30px;
            height:30px;
            padding:7px
        }
        .home .stat-label {
            font-size:11px
        }
        .home .stat-value {
            font-size:24px
        }
    }
    @media(max-width:1100px) {
        :root {
            --mc-sidebar:240px
        }
        .title-bar {
            padding:0 22px;
            gap:12px
        }
        .workspace-search {
            width:220px
        }
        .workspace-search kbd {
            display:none
        }
        .profile-details {
            min-width:0
        }
        .profile-type {
            max-width:100px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
        }
        .home {
            gap:18px
        }
        i-router {
            padding:22px
        }
    }
    @media(max-width:900px) {
        .nav-open .title-bar,.nav-open .footer {
            right:0
        }
        .app.app-shrunk {
            right:0
        }
        .side-bar {
            z-index:80;
            width:280px!important;
            --mc-sidebar:280px
        }
        .sidebar-close {
            display:flex;
            margin-right:auto;
            border:0;
            min-width:32px;
            width:32px;
            background:transparent
        }
        .nav-open:not(.auth-view) .nav-scrim {
            display:block;
            position:fixed;
            inset:0;
            z-index:70;
            background:#102e2666;
            border:0
        }
        .profile-details {
            display:none
        }
        .profile {
            padding-right:12px
        }
        .workspace-search {
            width:min(300px,40vw)
        }
        .login-layout {
            min-height:520px
        }
        .login-intro {
            padding:30px
        }
        .login-intro h1 {
            font-size:30px
        }
        .login-card {
            padding:36px 28px
        }
        .page-heading {
            padding:22px 22px 0
        }
    }
    @media(max-width:600px) {
        :root {
            --mc-header:70px
        }
        .title-bar {
            padding:0 14px;
            gap:10px
        }
        .topbar-eyebrow {
            font-size:9px
        }
        .location,.location>span {
            font-size:11px
        }
        .topbar-heading {
            max-width:130px
        }
        .location>span+span {
            display:none
        }
        .profile {
            border:0;
            padding:0;
            gap:4px
        }
        .profile-avatar {
            display:none
        }
        .logout-button {
            display:flex
        }
        .workspace-search {
            width:42px;
            height:42px;
            padding:10px;
            border:0;
            background:none;
            cursor:pointer
        }
        .workspace-search input {
            position:absolute;
            inset:0;
            opacity:0;
            cursor:pointer;
            padding:0
        }
        .workspace-search:focus-within {
            position:absolute;
            right:14px;
            left:14px;
            top:14px;
            width:auto;
            background:#fff;
            border:1px solid var(--mc-border);
            z-index:60;
            padding:0 12px;
            cursor:text
        }
        .workspace-search:focus-within input {
            position:static;
            opacity:1;
            cursor:text;
            padding:8px 0
        }
        .section-results {
            max-height:300px
        }
        .app {
            bottom:30px
        }
        i-router {
            padding:18px 14px
        }
        .footer {
            height:30px;
            padding:5px 14px;
            font-size:8px
        }
        .home {
            gap:16px
        }
        .home .window-header {
            padding:12px 16px
        }
        .home .stats.compact {
            grid-template-columns:repeat(3,minmax(0,1fr))
        }
        .home .chip {
            font-size:9px;
            padding:1px 5px
        }
        .quick-access {
            gap:7px
        }
        .quick-access>span {
            width:100%
        }
        .quick-access i-link {
            font-size:10px;
            padding:6px 10px
        }
        .dashboard-welcome h1 {
            font-size:23px
        }
        .dashboard-welcome p {
            font-size:11px
        }
        .welcome-actions .page-date {
            font-size:9px
        }
        .welcome-actions button {
            font-size:10px;
            padding:6px 10px
        }
        .page-heading {
            padding:18px 14px 0
        }
        .page-heading h1 {
            font-size:23px
        }
        .page-heading .page-date {
            display:none
        }
        .page-heading p {
            font-size:11px
        }
        .list-toolbar {
            padding:12px;
            gap:10px
        }
        .list-toolbar .toolbar-search {
            max-width:none;
            flex-basis:calc(100% - 40px)
        }
        .list-toolbar .toolbar-count {
            order:3;
            flex:1
        }
        .list-toolbar .actions {
            flex-wrap:nowrap
        }
        .table-list {
            font-size:11px;
            min-width:680px
        }
        .table-list td,.table-list th {
            padding:12px
        }
        .table-form>tbody>tr>td {
            padding:10px
        }
        .row {
            flex-wrap:wrap
        }
        .row>span {
            min-height:40px
        }
        .row>div {
            flex-wrap:wrap
        }
        .row input {
            font-size:16px
        }
        .float i-target {
            max-width:calc(100vw - 16px);
            padding:16px
        }
        .auth-view i-router {
            padding:16px
        }
        .login-layout {
            grid-template-columns:1fr;
            border-radius:16px;
            min-height:0
        }
        .login-intro {
            padding:25px 28px 30px
        }
        .login-wordmark {
            margin-bottom:18px
        }
        .login-wordmark strong {
            font-size:26px
        }
        .login-wordmark img {
            width:36px;
            height:36px
        }
        .login-intro h1 {
            font-size:26px;
            line-height:1.5;
            margin:12px 0
        }
        .login-intro h1 br {
            display:none
        }
        .login-intro p {
            font-size:11px;
            line-height:1.9;
            margin:0
        }
        .login-features,.city-art {
            display:none
        }
        .login-card {
            padding:28px
        }
        .login-card h2 {
            font-size:24px
        }
        .login-card .login-help {
            margin-top:12px
        }
        .auth-view .app {
            bottom:30px
        }
        .auth-view i-route[name=login] {
            margin:auto 0
        }
        .auth-view .footer span:first-child {
            display:none
        }
        .auth-view .footer {
            justify-content:center
        }
    }
    @media(prefers-reduced-motion:reduce) {
        *,*:before,*:after {
            animation:none!important;
            transition:none!important;
            scroll-behavior:auto!important
        }
    }
}
@media print {
    .skip-link,.nav-scrim,.page-heading,.dashboard-welcome,.quick-access,.chart-accessible,.workspace-search,.sidebar-brand,.sidebar-bottom {
        display:none!important
    }
    .app.app-shrunk {
        margin:0;
        right:0
    }
    .table-scroll {
        overflow:visible
    }
    .home .window {
        break-inside:avoid
    }
}
@media screen {
    /* The IUI root also receives class="app"; position only the inner workspace. */
    i-app.app {
        position:static;
        display:block;
        top:auto;
        bottom:auto;
        right:auto;
        left:auto;
        height:100%;
        margin:0;
        transition:none
    }
    i-route.route[selected] {
        display:block
    }
    #workspace-search {
        border:0;
        background:transparent;
        box-shadow:none;
        min-height:0;
        padding:7px 0;
        border-radius:0;
        outline:none
    }
    .side-bar .navbar-container i-check {
        border:0;
        background:none!important;
        border-radius:5px;
        width:24px;
        align-self:center;
        height:24px;
        position:relative;
        justify-content:center;
        align-items:center
    }
    .side-bar .navbar-container i-check:before {
        content:'';
        width:5px;
        height:5px;
        border-bottom:1.5px solid currentColor;
        border-left:1.5px solid currentColor;
        transform:rotate(45deg);
        transition:transform .18s
    }
    .side-bar .navbar-container i-check[checked]:before {
        transform:rotate(-45deg)
    }
}
@media screen {
    .list-toolbar .actions>i-button:first-child {
        background:#fff;
        color:var(--mc-text);
        border-color:#d6e1da
    }
    .list-toolbar .actions>i-button:first-child:hover {
        background:var(--mc-soft)
    }
    .home .secondary-stats .stat-sub .chip {
        font-size:9px
    }
}
@media screen {
    i-route.route {
        top:auto;
        left:auto;
        right:auto;
        width:100%;
        height:auto;
        overflow:visible;
        transition:none
    }
    i-route.route:not([selected]) {
        display:none!important
    }
    .loading-panel {
        box-shadow:none;
        position:fixed;
        inset:0;
        transition:opacity .2s,visibility .2s
    }
    .router-loading:after,.target-loading:after {
        background:#f3f6f5a6;
        box-shadow:none;
        transition:opacity .18s
    }
}
@media screen {
    .login-card #login .textbox-with-label {
        display:flex;
        flex-direction:column-reverse;
        border:0;
        padding:0;
        gap:7px;
        background:none;
        user-select:auto
    }
    .login-card #login .textbox-with-label span {
        position:static;
        opacity:1;
        padding:0;
        background:none;
        font-size:12px;
        line-height:1.7;
        color:var(--mc-text)
    }
    .login-card #login .textbox-with-label input {
        min-height:48px;
        padding:10px 12px;
        font-size:16px
    }
}
@media screen {
    .loading-panel-hidden {
        display:none!important
    }
    .home .chip {
        background:#f1f4f2;
        color:#52675c
    }
    .home .chip.ok {
        background:#edf6ef;
        color:#356947
    }
    .home .chip.bad {
        background:#fcf0eb;
        color:#9b4330
    }
    .home .window-icon {
        mask-size:contain;
        mask-repeat:no-repeat
    }
}
@media screen {
    .icon-button {
        min-height:44px;
        min-width:44px
    }
    .side-bar i-link {
        min-height:44px
    }
    .home .panels {
        align-items:start
    }
}
@media screen and (pointer:coarse) {
    .button,button.button,i-button {
        min-height:44px
    }
    .table-list td>i-link {
        min-height:44px;
        padding:6px 10px
    }
}
@media screen {
    .home .window-icon {
        background-image: none;
        mask-image: var(--icon);
    }
}