:root {
    --navy: #081e36;
    --blue: #0068ef;
    --teal: #00a8a0;
    --text: #102441;
    --muted: #75859c;
    --line: #e5ecf5;
    --surface: #f3f7fc;
    --shadow: 0 4px 20px #19395806;
    --radius: 14px;
    color-scheme: light
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--text);
    background: var(--surface);
    font-size: 14px;
    line-height: 1.55
}

a {
    color: var(--blue);
    text-decoration: none
}

a:hover {
    opacity: .85
}

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

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

button:disabled {
    cursor: wait;
    opacity: .65
}

:focus-visible {
    outline: 3px solid #27b7c0;
    outline-offset: 3px
}

.icon {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    vertical-align: middle
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.8px;
    color: var(--text)
}

.brand img {
    width: 38px;
    height: 38px
}

.sidebar {
    background: linear-gradient(160deg, #0b2440, #061a30);
    color: #b8c7d9;
    width: 244px;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    padding: 29px 17px 20px;
    display: flex;
    flex-direction: column;
    z-index: 50
}

.sidebar .brand {
    color: white;
    padding-inline: 9px;
    font-size: 23px
}

.workspace-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #6d87a3;
    padding: 32px 14px 14px
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: #bdcbdd;
    font-size: 13px;
    border-radius: 9px;
    margin-bottom: 6px;
    position: relative
}

.nav-item.selected {
    background: linear-gradient(100deg, #006bed, #0758b8);
    color: #fff;
    box-shadow: 0 5px 18px #0067ef28
}

.nav-item:hover {
    background: #183552;
    color: white;
    opacity: 1
}

.nav-count {
    background: #fff2;
    color: #fff;
    margin-inline-start: auto;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 11px
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: 25px
}

.workspace-card {
    background: #122f4e;
    border: 1px solid #24445f;
    border-radius: 13px;
    padding: 19px 14px;
    margin-bottom: 22px;
    display: grid;
    gap: 9px
}

.workspace-card>.icon {
    color: #23c4cb;
    width: 27px;
    height: 27px
}

.workspace-card strong {
    color: #fff;
    font-size: 13px
}

.workspace-card small {
    font-size: 11px
}

.workspace-card a {
    color: #77c1ff;
    font-size: 12px
}

.sidebar-bottom>small {
    font-size: 10px;
    color: #6f89a4;
    padding: 0 12px;
    display: block
}

.admin-main {
    margin-inline-start: 244px;
    min-height: 100vh
}

.topbar {
    height: 79px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
    gap: 12px
}

.breadcrumb {
    font-size: 13px;
    font-weight: 600
}

.breadcrumb span {
    margin: 0 12px;
    color: #c8d2e0
}

.topbar-end {
    display: flex;
    align-items: center;
    gap: 17px
}

.language {
    font-size: 12px;
    font-weight: 600;
    color: #425778;
    border: 1px solid var(--line);
    padding: 7px 12px;
    border-radius: 7px
}

.user-avatar {
    height: 36px;
    width: 36px;
    display: grid;
    place-items: center;
    background: #e7f2fc;
    color: #0875cd;
    border-radius: 50%;
    font-weight: 700
}

.user-info {
    display: flex;
    flex-direction: column;
    font-size: 12px
}

.user-info small {
    font-size: 10px;
    color: var(--muted)
}

.icon-button {
    border: 0;
    background: transparent;
    color: #7990a8;
    padding: 7px
}

.admin-content {
    padding: 29px 34px 38px;
    max-width: 1740px;
    margin: auto
}

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 26px
}

.eyebrow {
    color: var(--blue);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 7px
}

h1 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.7px;
    margin: 0 0 9px
}

h2 {
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -.25px;
    margin: 0
}

h3 {
    font-size: 16px;
    margin: 0 0 8px
}

p {
    margin: 8px 0 15px
}

.subtext {
    color: var(--muted);
    font-size: 13px;
    margin: 0
}

.button {
    border: 1px solid var(--blue);
    border-radius: 8px;
    background: var(--blue);
    color: white;
    padding: 11px 18px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 42px
}

.button.secondary {
    background: white;
    color: #43617f;
    border-color: #d8e2f0
}

.button.teal {
    background: var(--teal);
    border-color: var(--teal)
}

.button.compact {
    padding: 8px 13px;
    font-size: 12px;
    min-height: 34px
}

.button.full {
    width: 100%
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden
}

.card-pad {
    padding: 24px
}

.card-head {
    padding: 20px 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f4f9;
    gap: 15px
}

.card-head a {
    font-size: 12px;
    font-weight: 600
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 24px
}

.stat {
    padding: 22px 23px;
    display: flex;
    gap: 16px;
    align-items: center
}

.stat-icon {
    height: 49px;
    width: 49px;
    border-radius: 12px;
    background: #e8f1ff;
    color: #0068ef;
    display: grid;
    place-items: center
}

.stat-icon.teal {
    background: #e0f7f1;
    color: #00a985
}

.stat-icon.amber {
    background: #fff4e4;
    color: #ee9a19
}

.stat-label {
    font-size: 12px;
    color: #607494
}

.stat-value {
    font-size: 29px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: -.8px
}

.stat-foot {
    font-size: 10px;
    color: #91a0b5
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 22px;
    margin-bottom: 22px
}

.dashboard-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.table-wrap {
    overflow-x: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    text-align: start
}

th {
    text-align: start;
    font-size: 10px;
    color: #607594;
    background: #f7faff;
    font-weight: 650;
    padding: 13px 18px;
    letter-spacing: .25px
}

td {
    font-size: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f8
}

tr:last-child td {
    border-bottom: 0
}

tbody tr:hover {
    background: #fafdff
}

.table-name {
    font-weight: 600;
    color: #183353
}

.table-sub {
    display: block;
    color: #8797ae;
    font-size: 10px;
    margin-top: 3px
}

.badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 650;
    background: #eef2f7;
    color: #75859b
}

.badge.active,
.badge.completed,
.badge.available {
    background: #def8ee;
    color: #009d72
}

.badge.in_progress {
    background: #e4efff;
    color: #0068ef
}

.badge.pending,
.badge.new,
.badge.on_hold,
.badge.busy {
    background: #fff2dc;
    color: #d18b13
}

.badge.scheduled,
.badge.converted {
    background: #e8f3ff;
    color: #2985de
}

.badge.cancelled,
.badge.inactive,
.badge.urgent {
    background: #ffebe9;
    color: #d86460
}

.badge.high {
    background: #fff2dc;
    color: #d18b13
}

.empty {
    padding: 40px 25px;
    text-align: center;
    color: #8b9ab0;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.empty .icon {
    width: 32px;
    height: 32px;
    opacity: .6;
    margin-bottom: 13px
}

.empty strong {
    font-size: 13px;
    color: #657b98
}

.empty p {
    font-size: 11px;
    margin: 6px 0 0
}

.filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 22px;
    align-items: center;
    background: #fff
}

.search-input {
    min-width: 240px;
    flex: 1;
    max-width: 470px
}

.filters input,
.filters select {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 10px 12px;
    background: #fff;
    font-size: 12px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: start;
    font-size: 12px;
    font-weight: 600
}

.field input,
.field select,
.field textarea {
    border: 1px solid #dce5ef;
    border-radius: 8px;
    background: #fff;
    padding: 11px 13px;
    font-size: 13px;
    color: var(--text);
    width: 100%;
    min-height: 43px
}

.field textarea {
    resize: vertical;
    line-height: 1.6
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: 2px solid #d0e5ff;
    border-color: #76b2ff
}

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

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

.required {
    color: #00a7a3
}

.form-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line)
}

.form-card {
    max-width: 970px
}

.alert {
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 13px;
    margin-bottom: 24px
}

.alert.success {
    background: #dcf7ec;
    color: #07815d;
    border: 1px solid #b9ebd8
}

.alert.danger {
    background: #fff0ec;
    color: #b45944;
    border: 1px solid #f6d7cf
}

.details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: 22px
}

.definition {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px 20px;
    font-size: 13px
}

.definition dt {
    color: var(--muted)
}

.definition dd {
    margin: 0;
    overflow-wrap: anywhere
}

.preserve {
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 22px
}

.timeline li {
    position: relative;
    padding-inline-start: 25px;
    padding-bottom: 24px;
    border-inline-start: 1px solid #dce9f7;
    margin-inline-start: 5px
}

.timeline li:last-child {
    padding-bottom: 0
}

.timeline li:before {
    content: "";
    position: absolute;
    inset-inline-start: -5px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid white
}

.timeline strong {
    display: block;
    font-size: 12px
}

.timeline small {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 6px
}

.timeline p {
    font-size: 11px;
    margin: 7px 0 0;
    color: #70839c
}

.pagination {
    display: flex;
    gap: 5px;
    justify-content: center;
    padding: 20px
}

.pagination a {
    border: 1px solid var(--line);
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 12px
}

.pagination .current {
    color: #fff;
    background: var(--blue)
}

.status-overview {
    padding: 26px;
    display: grid;
    grid-template-columns: 135px 1fr;
    align-items: center;
    gap: 27px
}

.ring {
    width: 135px;
    height: 135px;
    border: 17px solid #e5f2fb;
    border-inline-start-color: var(--blue);
    border-bottom-color: var(--teal);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.ring strong {
    font-size: 26px
}

.ring small {
    font-size: 9px;
    color: var(--muted)
}

.status-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 11px
}

.status-list>div {
    display: flex;
    justify-content: space-between;
    gap: 10px
}

.schedule-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 17px 23px;
    border-bottom: 1px solid #edf2f8
}

.date-icon {
    background: #e8f3ff;
    color: var(--blue);
    height: 39px;
    width: 39px;
    border-radius: 9px;
    display: grid;
    place-items: center
}

.schedule-item strong {
    font-size: 12px;
    display: block
}

.schedule-item small {
    font-size: 10px;
    color: var(--muted)
}

.public-header {
    height: 85px;
    max-width: 1300px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 36px
}

.public-header nav {
    display: flex;
    gap: 28px;
    font-size: 13px
}

.public-header nav a {
    color: #5d7190
}

.public-body {
    background: #f8fbff
}

.public-content {
    max-width: 1300px;
    margin: 0 auto;
    padding: 25px 36px 65px;
    min-height: calc(100vh - 150px)
}

.hero {
    background: linear-gradient(110deg, #edf5ff, #f7fbff 60%, #e9f7f4);
    border: 1px solid #e1edf9;
    border-radius: 22px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    overflow: hidden;
    padding: 48px 45px;
    margin: 12px 0 28px
}

.hero h1 {
    font-size: 45px;
    line-height: 1.13;
    letter-spacing: -1.8px;
    max-width: 570px;
    margin: 15px 0 20px
}

.hero h1 em {
    font-style: normal;
    color: var(--blue)
}

.hero p {
    color: #67809f;
    font-size: 15px;
    max-width: 450px;
    line-height: 1.7
}

.hero img {
    width: 100%;
    max-height: 350px
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 26px
}

.service-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px
}

.service-cards .card {
    padding: 27px
}

.service-cards .icon {
    color: var(--blue);
    width: 28px;
    height: 28px;
    margin-bottom: 18px
}

.service-cards p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 0
}

.public-footer {
    max-width: 1300px;
    margin: auto;
    padding: 20px 36px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted)
}

.request-layout {
    display: grid;
    grid-template-columns: .8fr 1.5fr;
    gap: 42px;
    align-items: start;
    padding-top: 20px
}

.request-intro {
    padding: 20px 10px
}

.request-intro h1 {
    font-size: 37px;
    line-height: 1.2;
    margin-top: 10px
}

.request-intro p {
    color: var(--muted);
    line-height: 1.8
}

.trust-item {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #5b7798;
    font-size: 12px;
    margin: 19px 0
}

.trust-item .icon {
    color: var(--teal)
}

.auth-card {
    max-width: 420px;
    margin: 50px auto 80px;
    padding: 36px
}

.auth-card h1 {
    font-size: 25px;
    margin: 15px 0 8px
}

.auth-card .field {
    margin-top: 20px
}

.auth-card .button {
    margin-top: 24px
}

.auth-icon {
    background: #e7f2ff;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--blue)
}

.install-layout {
    max-width: 800px;
    margin: 15px auto
}

.checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    font-size: 12px;
    padding: 20px 0
}

.check {
    padding: 10px;
    background: #f5faff;
    border-radius: 6px
}

.check.pass {
    color: #098969
}

.check.fail {
    color: #c0524c
}

.check label {
    display: flex;
    gap: 7px
}

.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.error-card {
    max-width: 650px;
    margin: 65px auto;
    padding: 36px
}

.error-card p {
    margin-bottom: 30px
}

.code-note {
    font-family: monospace;
    background: #f1f6fc;
    padding: 10px 12px;
    border-radius: 7px;
    overflow-wrap: anywhere;
    font-size: 12px
}

.menu-toggle {
    display: none;
    border: 0;
    background: none;
    color: var(--navy);
    font-size: 23px
}

.two-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.note {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.7
}

.tagline {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted)
}

.section-space {
    margin-top: 24px
}

.mobile-only {
    display: none
}

[dir=rtl] .hero h1 {
    letter-spacing: 0
}

[dir=rtl] .eyebrow,
[dir=rtl] .workspace-label {
    letter-spacing: 0
}

[dir=rtl] .brand {
    letter-spacing: 0
}

[dir=rtl] .icon {
    transform: scaleX(-1)
}

@media(min-width:1450px) {
    .stats {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .stat {
        padding: 19px 16px;
        display: block
    }

    .stat-icon {
        margin-bottom: 12px
    }

    .admin-content {
        padding: 34px 40px
    }

    .stat-value {
        font-size: 31px
    }
}

@media(max-width:1120px) {
    .sidebar {
        width: 214px
    }

    .admin-main {
        margin-inline-start: 214px
    }

    .admin-content {
        padding: 25px
    }

    .topbar {
        padding: 0 25px
    }

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

    .status-overview {
        grid-template-columns: 135px 1fr
    }

    .hero {
        padding: 36px 30px
    }

    .hero h1 {
        font-size: 37px
    }

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

    .request-layout {
        gap: 25px
    }

    .status-list {
        max-width: 300px
    }
}

@media(max-width:800px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s
    }

    [dir=rtl] .sidebar {
        transform: translateX(100%)
    }

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

    .admin-main {
        margin-inline-start: 0
    }

    .menu-toggle {
        display: block
    }

    .topbar {
        height: 68px;
        padding: 0 20px
    }

    .breadcrumb {
        display: none
    }

    .user-info {
        display: none
    }

    .topbar-end {
        gap: 10px
    }

    .admin-content {
        padding: 23px 18px
    }

    .page-heading {
        margin-bottom: 22px
    }

    h1 {
        font-size: 25px
    }

    .page-heading .button {
        font-size: 11px;
        padding: 10px 12px
    }

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

    .stat {
        padding: 16px;
        gap: 10px
    }

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

    .stat-value {
        font-size: 25px
    }

    .stat-label {
        font-size: 10px
    }

    .stat-foot {
        display: none
    }

    .form-grid {
        gap: 16px
    }

    .public-header {
        height: 76px;
        padding: 0 20px
    }

    .public-header nav {
        display: none
    }

    .public-header .brand {
        font-size: 20px
    }

    .public-header .brand img {
        width: 30px;
        height: 30px
    }

    .public-content {
        padding: 18px 20px 45px
    }

    .hero {
        grid-template-columns: 1fr;
        padding: 32px 26px;
        margin-top: 0
    }

    .hero h1 {
        font-size: 37px;
        max-width: 520px
    }

    .hero img {
        max-height: 270px;
        margin-top: 24px
    }

    .hero p {
        font-size: 14px
    }

    .service-cards {
        grid-template-columns: 1fr
    }

    .service-cards .card {
        padding: 23px
    }

    .request-layout {
        grid-template-columns: 1fr;
        padding-top: 0;
        gap: 12px
    }

    .request-intro {
        padding: 12px 0
    }

    .request-intro h1 {
        font-size: 30px
    }

    .trust-item {
        display: none
    }

    .public-footer {
        padding: 20px;
        gap: 10px;
        flex-wrap: wrap
    }

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

    .auth-card {
        margin: 25px auto;
        padding: 27px
    }
}

@media(max-width:480px) {
    .form-grid {
        grid-template-columns: 1fr
    }

    .form-grid .full {
        grid-column: auto
    }

    .card-pad {
        padding: 21px
    }

    .public-header .button {
        font-size: 10px;
        padding: 7px 9px
    }

    .language {
        padding: 6px 9px;
        font-size: 11px
    }

    .hero h1 {
        font-size: 32px
    }

    .hero {
        padding: 27px 22px
    }

    .hero-actions {
        flex-wrap: wrap
    }

    .hero-actions .button {
        width: 100%
    }

    .stat {
        display: block
    }

    .stat-icon {
        margin-bottom: 9px
    }

    .stat-label {
        font-size: 11px
    }

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

    .definition {
        grid-template-columns: 110px 1fr;
        font-size: 12px;
        gap: 12px
    }

    .page-heading {
        gap: 13px
    }

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

    .filters .search-input {
        min-width: 100%;
        max-width: none
    }

    .card-head {
        padding: 18px
    }

    .card-head h2 {
        font-size: 15px
    }

    .status-overview {
        padding: 23px 18px;
        gap: 20px;
        grid-template-columns: 110px 1fr
    }

    .ring {
        height: 110px;
        width: 110px;
        border-width: 13px
    }

    .status-list {
        font-size: 10px
    }
}
.ring{position:relative;border:0}.status-ring{position:absolute;inset:0;width:100%;height:100%}.ring strong,.ring small{position:relative;z-index:1}[dir=rtl] .status-ring{transform:none}
/* Keep the spam trap and closed mobile navigation out of the RTL scroll area. */
.honeypot{left:auto;right:auto;inset-inline-start:0;top:0;clip-path:inset(50%);opacity:0;pointer-events:none}
@media(max-width:800px){.sidebar{display:none;transform:none}[dir=rtl] .sidebar{transform:none}.sidebar-open .sidebar{display:flex;transform:none}}
/* Phase 1.1: compact operational workspace, based on the approved reference. */
:root {
    --navy:#071d36;
    --blue:#086bf1;
    --teal:#00ac9f;
    --surface:#f1f6fd;
    --line:#e2ebf7;
    --radius:10px;
    --shadow:0 3px 14px #173b7005;
}
.brand-accent {
    color:#00afba;
}
.sidebar {
    width:230px;
    padding:26px 12px 18px;
    background:linear-gradient(160deg,#091e37,#06182d);
}
.sidebar-brand {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:29px;
}
.sidebar .brand {
    font-size:23px;
    gap:7px;
    padding-inline:10px;
}
.sidebar .brand img {
    width:36px;
    height:36px;
}
.sidebar nav {
    display:grid;
    gap:4px;
}
.nav-item {
    padding:10px 13px;
    margin:0;
    border-radius:7px;
    font-size:13px;
    min-height:43px;
    color:#ccd8e9;
}
.nav-item .icon {
    width:20px;
    height:20px;
}
.nav-item.selected {
    background:linear-gradient(100deg,#0677f6,#0755ac);
    box-shadow:none;
}
.sidebar-bottom {
    padding:18px 4px 0;
}
.workspace-card {
    display:flex;
    align-items:center;
    padding:17px 12px;
    gap:10px;
    color:#c9ddf5;
    border-radius:10px;
    background:linear-gradient(125deg,#153555,#183c62);
    margin-bottom:17px;
}
.workspace-card strong,.workspace-card small {
    display:block;
}
.workspace-card strong {
    font-size:12px;
    margin-bottom:3px;
}
.workspace-card small {
    font-size:10px;
    line-height:1.4;
}
.workspace-card>.icon {
    width:17px;
    height:17px;
    color:#b8dafa;
}
.workspace-icon>.icon {
    width:30px;
    height:30px;
    color:#009efa;
}
.sidebar-close,.sidebar-backdrop {
    display:none;
}
.admin-main {
    margin-inline-start:230px;
}
.topbar {
    height:72px;
    padding:0 25px;
    gap:22px;
    background:#fbfdff;
}
.topbar-end {
    gap:13px;
    flex-shrink:0;
}
.user-info {
    max-width:175px;
}
.user-info strong {
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.user-info small {
    font-size:10px;
}
.user-avatar {
    height:35px;
    width:35px;
    color:#fff;
    background:linear-gradient(135deg,#147feb,#1fb5bd);
}
.global-search {
    display:flex;
    align-items:center;
    max-width:500px;
    min-width:150px;
    flex:1;
    border:1px solid #dce7f6;
    background:#f5f9ff;
    border-radius:10px;
    padding:0 5px;
}
.global-search input {
    border:0;
    outline:none;
    background:transparent;
    width:100%;
    min-width:0;
    padding:10px 3px;
    font-size:12px;
    color:#274971;
}
.global-search input::placeholder {
    color:#7990ae;
}
.global-search button {
    color:#2c538d;
    padding:6px;
}
.global-search .icon {
    width:19px;
    height:19px;
}
.notification-link {
    position:relative;
    color:#23416b;
}
.notification-link>span {
    position:absolute;
    inset-inline-end:0;
    top:0;
    background:#f3645f;
    color:#fff;
    border:2px solid #fff;
    min-width:15px;
    height:15px;
    line-height:11px;
    font-size:8px;
    border-radius:10px;
    text-align:center;
    padding:0 2px;
}
.admin-content {
    padding:24px 25px 36px;
    max-width:1800px;
}
h1 {
    font-size:27px;
    color:#0b2350;
    margin-bottom:6px;
}
h2 {
    font-size:15px;
    color:#0b2853;
    font-weight:700;
}
.subtext {
    font-size:12px;
    color:#6681a6;
}
.page-heading {
    margin-bottom:19px;
    align-items:center;
}
.heading-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.heading-detail {
    font-size:.7em;
    color:var(--muted);
    font-weight:500;
}
.button {
    border-radius:7px;
    font-size:12px;
    padding:10px 15px;
    min-height:39px;
}
.button.compact {
    font-size:11px;
    padding:8px 12px;
    min-height:35px;
}
.date-chip {
    display:flex;
    gap:11px;
    align-items:center;
    background:#fbfdff;
    border:1px solid var(--line);
    border-radius:9px;
    padding:9px 15px;
    color:#184776;
    min-width:155px;
}
.date-chip strong {
    font-size:12px;
    display:block;
}
.date-chip small {
    font-size:10px;
    color:#7b91b0;
    display:block;
}
.card {
    border-radius:10px;
    box-shadow:var(--shadow);
    border-color:#e0eaf8;
}
.card-head {
    padding:15px 15px 12px;
    gap:10px;
}
.card-head>a {
    font-size:11px;
    white-space:nowrap;
}
.card-head .note {
    font-size:10px;
    white-space:nowrap;
}
.dashboard-stats {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:10px;
}
.dashboard-stats .stat {
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:14px;
    position:relative;
    padding:19px 16px 16px;
    align-items:start;
    overflow:hidden;
    color:var(--text);
    min-height:123px;
}
.dashboard-stats .stat:hover {
    opacity:1;
    border-color:#a9caf3;
}
.dashboard-stats .stat-icon {
    height:46px;
    width:46px;
    border-radius:11px;
    margin:0;
    background:#e5f1ff;
    color:#0573f7;
}
.dashboard-stats .stat-icon.teal {
    background:#def8ee;
    color:#06b184;
}
.dashboard-stats .stat-icon.amber {
    background:#fff1df;
    color:#f78d0a;
}
.dashboard-stats .stat-icon .icon {
    width:28px;
    height:28px;
}
.dashboard-stats .stat-label {
    font-size:12px;
    font-weight:500;
    line-height:1.4;
    white-space:normal;
    padding-bottom:4px;
}
.dashboard-stats .stat-value {
    font-size:30px;
    line-height:1.25;
    font-weight:720;
    color:#0a2352;
    margin:0;
}
.dashboard-stats .stat-foot {
    font-size:10px;
    margin-top:7px;
    color:#469786;
    position:relative;
    z-index:1;
    display:block;
}
.sparkline {
    position:absolute;
    width:82px;
    height:38px;
    inset-inline-end:12px;
    top:49px;
    color:#1982fb;
    opacity:.75;
    pointer-events:none;
}
.sparkline.teal {
    color:#00ac8a;
}
.sparkline.amber {
    color:#fb9712;
}
.dashboard-secondary {
    display:flex;
    align-items:center;
    gap:22px;
    font-size:11px;
    color:#6b82a1;
    margin:0 2px 15px;
}
.dashboard-secondary>span {
    display:flex;
    gap:7px;
    align-items:center;
}
.dashboard-secondary .icon {
    width:15px;
    height:15px;
    color:#367bd0;
}
.dashboard-secondary strong {
    color:#244a77;
}
.dashboard-secondary>small {
    margin-inline-start:auto;
    font-size:10px;
}
.dashboard-panels {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(0,1.12fr) minmax(0,.98fr);
    gap:15px;
    margin-bottom:16px;
}
.dashboard-panels>.card {
    min-width:0;
}
.period-control {
    display:flex;
    align-items:center;
    gap:3px;
}
.period-control select {
    max-width:130px;
    border:1px solid #e2eafa;
    border-radius:7px;
    background:#fbfdff;
    color:#365887;
    font-size:10px;
    padding:7px;
}
.period-submit {
    border:0;
    background:none;
    padding:3px;
    color:#567faa;
}
.period-submit .icon {
    width:15px;
    height:15px;
}
.chart-legend {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 14px;
    font-size:10px;
    color:#36527c;
    padding:3px 12px 7px;
}
.chart-legend span {
    display:flex;
    gap:5px;
    align-items:center;
}
.series-dot {
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    flex-shrink:0;
    background:#839abc;
}
.series-dot.created,.series-dot.in_progress {
    background:#0875f9;
}
.chart-legend .series-dot.in_progress {
    background:#ffb300;
}
.series-dot.completed {
    background:#00b58c;
}
.series-dot.cancelled {
    background:#f66a5d;
}
.series-dot.pending {
    background:#ffb300;
}
.series-dot.scheduled {
    background:#25a7e0;
}
.series-dot.on_hold {
    background:#f68a22;
}
.trend-chart {
    padding:9px 14px 0;
    direction:ltr;
}
.trend-chart svg {
    width:100%;
    height:auto;
    display:block;
    min-height:170px;
}
.chart-grid line {
    stroke:#e5edf8;
    stroke-width:1;
}
.chart-grid text,.chart-label {
    fill:#7990ae;
    font-size:10px;
    font-family:inherit;
}
.chart-caption {
    font-size:9px;
    color:#8a9cb2;
    padding:0 16px 12px;
    margin:0;
}
.schedule-item {
    padding:13px 14px;
    gap:9px;
    min-height:60px;
    color:#183860;
}
.schedule-item:last-child {
    border-bottom:0;
}
.schedule-time {
    min-width:41px;
    color:#3e5f8a;
    text-align:center;
}
.schedule-time strong {
    font-size:10px;
    font-weight:500;
}
.schedule-time small {
    font-size:9px;
    white-space:nowrap;
}
.person-avatar {
    width:30px;
    height:30px;
    border-radius:50%;
    background:#e4f3f5;
    color:#188c9b;
    font-weight:700;
    font-size:12px;
    display:grid;
    place-items:center;
    flex-shrink:0;
}
.schedule-person {
    flex:1;
    min-width:0;
}
.schedule-person strong {
    font-size:11px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.schedule-person small {
    font-size:9px;
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.schedule-item .badge {
    font-size:8px;
    padding:3px 5px;
    white-space:nowrap;
}
.status-overview {
    display:flex;
    flex-direction:column;
    padding:8px 20px 18px;
    gap:16px;
}
.status-overview .ring {
    width:137px;
    height:137px;
    flex-shrink:0;
}
.ring strong {
    font-size:27px;
    color:#0b2553;
}
.ring small {
    font-size:10px;
}
.status-list {
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px 14px;
}
.status-list>div {
    font-size:10px;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}
.status-list>div>span {
    display:flex;
    align-items:center;
    gap:5px;
}
.status-list strong {
    font-size:10px;
    color:#2d517f;
}
.status-list small {
    font-size:9px;
    font-weight:400;
    color:#8a9db7;
}
.dashboard-tables {
    grid-template-columns:1.35fr 1fr 1.1fr;
    gap:15px;
}
.dashboard-tables>.card {
    min-width:0;
}
.table-wrap {
    max-width:100%;
    overflow:auto;
}
.dashboard-tables table {
    font-size:10px;
}
.dashboard-tables th {
    padding:9px 10px;
    font-size:9px;
    white-space:nowrap;
    background:#f1f6fd;
    color:#355580;
}
.dashboard-tables td {
    padding:11px 10px;
    font-size:10px;
    line-height:1.4;
}
.dashboard-tables .badge {
    font-size:9px;
    white-space:nowrap;
    padding:3px 6px;
}
.dashboard-tables .card-head {
    padding:13px 13px 10px;
}
.dashboard-tables .card-head h2 {
    font-size:14px;
}
.dashboard-tables td:first-child a {
    white-space:nowrap;
}
.dashboard-tables td:not(:first-child) {
    max-width:150px;
}
.badge {
    font-weight:500;
    border-radius:5px;
}
.filters {
    border-bottom:1px solid #edf2f9;
    padding:16px 20px;
}
.table-wrap tbody tr:hover {
    background:#f8fbff;
}
.table-name {
    font-weight:600;
}
.form-card {
    max-width:1000px;
}
.form-grid {
    gap:20px 24px;
}
.field {
    font-size:12px;
}
.field input,.field select,.field textarea {
    font-size:13px;
    border-color:#dce6f3;
}
.settings-tabs {
    display:flex;
    gap:5px;
    border-bottom:1px solid #dfe8f5;
    margin:-3px 0 23px;
    padding:0 0 1px;
}
.settings-tabs a {
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 17px;
    border-bottom:2px solid transparent;
    color:#7087a5;
    font-size:12px;
}
.settings-tabs a.selected {
    color:var(--blue);
    border-color:var(--blue);
    font-weight:650;
}
.settings-tabs .icon {
    width:17px;
    height:17px;
}
.language-menu {
    position:relative;
    z-index:30;
}
.language-menu summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid #dce7f5;
    border-radius:8px;
    padding:7px 9px;
    color:#21416b;
    font-size:11px;
    background:#fafdff;
    white-space:nowrap;
}
.language-menu summary::-webkit-details-marker {
    display:none;
}
.language-menu summary .icon {
    width:15px;
    height:15px;
}
.language-menu summary .icon-chevron {
    width:11px;
    height:11px;
}
.language-options {
    position:absolute;
    inset-inline-end:0;
    top:calc(100% + 8px);
    min-width:160px;
    max-width:calc(100vw - 40px);
    padding:5px;
    background:white;
    border:1px solid var(--line);
    border-radius:9px;
    box-shadow:0 10px 35px #0b2a5520;
}
.language-options a {
    padding:9px 11px;
    display:flex;
    align-items:center;
    gap:20px;
    justify-content:space-between;
    color:#39567e;
    font-size:12px;
    border-radius:6px;
}
.language-options a:hover,.language-options a[aria-current] {
    background:#edf5ff;
    color:var(--blue);
}
.language-options .icon {
    width:14px;
    height:14px;
}
.translation-progress {
    display:grid;
    gap:5px;
    font-size:10px;
    color:#7489a5;
    min-width:110px;
}
.translation-progress progress {
    width:100%;
    max-width:150px;
    height:6px;
    accent-color:#07b5a3;
    border:0;
    border-radius:10px;
    overflow:hidden;
    background:#eaf0f8;
}
.translation-progress progress::-webkit-progress-bar {
    background:#eaf0f8;
}
.translation-progress progress::-webkit-progress-value {
    background:#07b5a3;
    border-radius:10px;
}
.translation-progress progress::-moz-progress-bar {
    background:#07b5a3;
}
.action-divider {
    margin:0 8px;
    color:#bfcdde;
}
.inline-check {
    display:flex;
    gap:7px;
    align-items:center;
    font-size:11px;
    color:#5b759a;
}
.inline-check input {
    accent-color:var(--blue);
}
.translation-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:30px;
    padding:18px 22px;
    border-bottom:1px solid #edf2f9;
}
.translation-row code {
    font-size:11px;
    color:#527499;
    display:block;
    overflow-wrap:anywhere;
}
.source-text {
    font-size:12px;
    line-height:1.6;
    margin:6px 0 8px;
    color:#253f65;
    white-space:pre-wrap;
}
.translation-labels {
    font-size:11px;
    font-weight:650;
    color:#567293;
    background:#f5f9ff;
    padding-block:12px;
}
.translation-save {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 22px;
    background:#fbfdff;
}
.translation-save .note {
    max-width:70%;
    margin:0;
}
.translation-save .button {
    white-space:nowrap;
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}
.search-results {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px;
}
.search-result {
    display:flex;
    padding:16px;
    align-items:center;
    gap:15px;
    justify-content:space-between;
    border-top:1px solid #edf2f9;
}
.search-result strong,.search-result small {
    display:block;
}
.search-result strong {
    font-size:12px;
}
.search-result small {
    font-size:11px;
    color:#7d90a9;
    margin-top:4px;
}
.public-header {
    height:76px;
    border-bottom:1px solid var(--line);
    background:#fff;
    max-width:none;
    padding-inline:max(28px,calc((100% - 1300px)/2 + 28px));
}
.public-header .brand {
    font-size:25px;
}
.public-header nav a {
    position:relative;
    padding:27px 0;
    color:#4f6b92;
}
.public-header nav .selected {
    color:var(--blue);
}
.public-header nav .selected:after {
    content:"";
    position:absolute;
    bottom:0;
    inset-inline:0;
    height:2px;
    background:var(--blue);
}
.public-content {
    padding:24px 28px 55px;
}
.hero {
    border-radius:12px;
    margin:0 0 20px;
    padding:40px;
    background:linear-gradient(110deg,#e5efff,#f6faff 65%,#e4f7f5);
}
.hero h1 {
    font-size:38px;
    letter-spacing:-1px;
}
.hero p {
    font-size:13px;
}
.hero-actions .button {
    padding:11px 18px;
}
.service-cards {
    gap:16px;
    margin-bottom:25px;
}
.service-cards .card {
    padding:23px;
}
.public-body {
    background:#f3f7fe;
}
.hero .eyebrow {
    font-size:10px;
    letter-spacing:2.5px;
}
.request-layout .card {
    border-radius:12px;
}
[dir=rtl] .icon {
    transform:none;
}
[dir=rtl] .icon-arrow {
    transform:scaleX(-1);
}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] .hero h1 {
    letter-spacing:0;
}
@media(min-width:1650px) {
    .status-overview {
        display:grid;
        grid-template-columns:145px 1fr;
        gap:20px;
        padding-top:42px;
    }
    .status-list {
        grid-template-columns:1fr;
        gap:14px;
    }
    .status-list>div {
        font-size:11px;
    }
    .dashboard-panels {
        grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
    }
    .trend-chart svg {
        max-height:235px;
    }
    .schedule-item {
        padding-block:17px;
    }
}
@media(max-width:1250px) {
    .sidebar {
        width:210px;
    }
    .admin-main {
        margin-inline-start:210px;
    }
    .admin-content {
        padding:22px 20px;
    }
    .topbar {
        padding:0 20px;
        gap:15px;
    }
    .user-info {
        max-width:130px;
    }
    .dashboard-stats {
        gap:11px;
    }
    .dashboard-stats .stat {
        padding:15px 12px;
        gap:9px;
        grid-template-columns:35px minmax(0,1fr);
    }
    .dashboard-stats .stat-icon {
        height:35px;
        width:35px;
    }
    .dashboard-stats .stat-icon .icon {
        width:23px;
        height:23px;
    }
    .dashboard-stats .stat-label {
        font-size:10px;
    }
    .dashboard-stats .stat-value {
        font-size:28px;
    }
    .sparkline {
        width:58px;
        inset-inline-end:10px;
        top:47px;
        opacity:.5;
    }
    .dashboard-stats .stat-foot {
        font-size:9px;
    }
    .dashboard-panels {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }
    .trend-card {
        grid-column:1/-1;
    }
    .trend-chart svg {
        max-height:225px;
    }
    .status-overview {
        display:grid;
        grid-template-columns:135px 1fr;
        padding:23px;
        gap:25px;
    }
    .status-list {
        grid-template-columns:1fr;
    }
    .dashboard-tables {
        grid-template-columns:1fr 1fr;
    }
    .dashboard-tables>section:first-child {
        grid-column:1/-1;
    }
    .dashboard-tables td,.dashboard-tables th {
        font-size:11px;
    }
    .search-results {
        grid-template-columns:1fr;
    }
    .dashboard-heading .heading-actions {
        gap:6px;
    }
    .date-chip {
        min-width:130px;
        padding:8px 11px;
    }
    .dashboard-heading .button {
        font-size:10px;
    }
}
@media(max-width:950px) {
    .user-info {
        display:none;
    }
    .dashboard-heading {
        align-items:flex-start;
        gap:12px;
    }
    .dashboard-heading .heading-actions {
        flex-direction:column;
        align-items:flex-end;
    }
    .dashboard-stats {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .dashboard-stats .stat {
        min-height:113px;
        padding:17px;
        grid-template-columns:43px 1fr;
        gap:13px;
    }
    .dashboard-stats .stat-icon {
        height:43px;
        width:43px;
    }
    .dashboard-stats .stat-label {
        font-size:12px;
    }
    .sparkline {
        width:77px;
        opacity:.7;
    }
    .dashboard-stats .stat-foot {
        font-size:10px;
    }
    .status-overview {
        display:flex;
        padding:15px 20px;
        gap:16px;
    }
    .status-list {
        grid-template-columns:1fr 1fr;
    }
    .schedule-person strong {
        font-size:10px;
    }
    .schedule-time {
        min-width:35px;
    }
    .schedule-item {
        padding-inline:10px;
        gap:6px;
    }
    .schedule-item .person-avatar {
        width:25px;
        height:25px;
    }
    .translation-row {
        gap:18px;
        padding:16px;
    }
    .translation-save {
        padding:16px;
    }
    .translation-save .button {
        font-size:11px;
    }
}
@media(max-width:800px) {
    .sidebar {
        display:none;
        transform:none;
        width:230px;
        padding-top:20px;
    }
    .sidebar-open .sidebar {
        display:flex;
        overflow:auto;
    }
    .sidebar-open .sidebar-backdrop {
        display:block;
        position:fixed;
        inset:0;
        border:0;
        background:#0b224745;
        z-index:45;
    }
    .sidebar-close {
        display:block;
        color:#b7d9f4;
        padding:3px;
    }
    .sidebar-close .icon {
        width:17px;
        height:17px;
    }
    .sidebar .brand {
        font-size:22px;
        padding-inline:5px;
    }
    .admin-main {
        margin-inline-start:0;
    }
    .topbar {
        display:grid;
        grid-template-columns:28px 1fr;
        gap:10px;
        padding:14px 18px 12px;
        height:auto;
    }
    .menu-toggle {
        display:block;
        padding:0;
        text-align:start;
        font-size:21px;
        grid-row:1;
        grid-column:1;
    }
    .topbar-end {
        justify-content:flex-end;
        grid-column:2;
        grid-row:1;
        gap:9px;
    }
    .global-search {
        grid-column:1/-1;
        grid-row:2;
        width:100%;
        max-width:none;
        min-width:0;
    }
    .global-search input {
        padding-block:9px;
        font-size:11px;
    }
    .notification-link .icon {
        width:19px;
        height:19px;
    }
    .notification-link {
        padding:4px;
    }
    .user-avatar {
        width:29px;
        height:29px;
        font-size:12px;
    }
    .language-menu summary {
        font-size:10px;
        padding:5px 7px;
        gap:5px;
    }
    .topbar-end>form .icon-button {
        padding:4px;
    }
    .admin-content {
        padding:21px 16px 30px;
    }
    .dashboard-heading {
        display:block;
    }
    .dashboard-heading .heading-actions {
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        margin-top:15px;
    }
    .dashboard-heading h1 {
        font-size:25px;
    }
    .dashboard-heading .subtext {
        font-size:12px;
        line-height:1.65;
    }
    .date-chip {
        padding:7px 10px;
        min-width:0;
    }
    .date-chip strong {
        font-size:11px;
    }
    .date-chip .icon {
        width:18px;
        height:18px;
    }
    .date-chip small {
        font-size:9px;
    }
    .dashboard-heading .button {
        font-size:11px;
    }
    .dashboard-stats {
        gap:12px;
        margin-bottom:10px;
    }
    .dashboard-stats .stat {
        padding:14px 12px;
        min-height:119px;
        grid-template-columns:31px 1fr;
        gap:8px;
    }
    .dashboard-stats .stat-icon {
        width:31px;
        height:33px;
        border-radius:8px;
    }
    .dashboard-stats .stat-icon .icon {
        width:21px;
        height:21px;
    }
    .dashboard-stats .stat-label {
        font-size:10px;
        min-height:28px;
    }
    .dashboard-stats .stat-value {
        font-size:27px;
    }
    .dashboard-stats .stat-foot {
        font-size:8px;
        margin-top:8px;
        line-height:1.5;
    }
    .sparkline {
        width:31px;
        height:20px;
        top:57px;
        inset-inline-start:12px;
        inset-inline-end:auto;
        opacity:.6;
    }
    .dashboard-secondary {
        font-size:9px;
        gap:13px;
        flex-wrap:wrap;
        margin-bottom:15px;
    }
    .dashboard-secondary .icon {
        width:13px;
        height:13px;
    }
    .dashboard-secondary>small {
        font-size:8px;
    }
    .dashboard-panels,.dashboard-tables {
        grid-template-columns:1fr;
        gap:15px;
    }
    .trend-card,.dashboard-tables>section:first-child {
        grid-column:auto;
    }
    .card-head {
        padding:14px;
    }
    .card-head h2 {
        font-size:15px;
    }
    .chart-legend {
        justify-content:flex-start;
        font-size:9px;
        gap:10px;
        padding-inline:16px;
    }
    .trend-chart {
        padding-inline:10px;
    }
    .trend-chart svg {
        min-height:150px;
    }
    .period-control select {
        font-size:9px;
        padding:6px;
        max-width:115px;
    }
    .chart-caption {
        font-size:8px;
    }
    .schedule-item {
        padding:14px 16px;
        gap:10px;
    }
    .schedule-time {
        min-width:42px;
    }
    .schedule-person strong {
        font-size:12px;
    }
    .schedule-person small {
        font-size:10px;
    }
    .schedule-item .person-avatar {
        width:32px;
        height:32px;
    }
    .schedule-item .badge {
        font-size:9px;
    }
    .status-overview {
        display:grid;
        grid-template-columns:127px 1fr;
        gap:20px;
        padding:16px 22px 23px;
    }
    .status-overview .ring {
        width:127px;
        height:127px;
    }
    .status-list {
        grid-template-columns:1fr;
        gap:12px;
    }
    .status-list>div,.status-list strong {
        font-size:10px;
    }
    .dashboard-tables .card-head h2 {
        font-size:15px;
    }
    .dashboard-tables td,.dashboard-tables th {
        font-size:10px;
        padding:11px 10px;
    }
    .public-header {
        padding:0 18px;
        height:70px;
        gap:12px;
    }
    .public-header .brand {
        font-size:20px;
    }
    .public-header .brand img {
        width:28px;
        height:28px;
    }
    .public-header nav {
        display:none;
    }
    .public-header .topbar-end {
        gap:7px;
    }
    .public-header .button {
        font-size:9px;
        min-height:30px;
        padding:6px 8px;
    }
    .public-content {
        padding:17px 18px 40px;
    }
    .hero {
        padding:29px 23px;
    }
    .hero h1 {
        font-size:30px;
        line-height:1.25;
        letter-spacing:-.6px;
    }
    .hero p {
        font-size:12px;
        line-height:1.75;
    }
    .hero img {
        max-height:235px;
    }
    .hero-actions {
        flex-wrap:wrap;
        gap:10px;
    }
    .hero-actions .button {
        width:auto;
        font-size:11px;
        flex:1;
        padding:10px;
    }
    .service-cards {
        gap:12px;
    }
    .service-cards .card {
        padding:21px;
    }
    .page-heading>.heading-actions {
        gap:7px;
    }
    .translation-row {
        grid-template-columns:1fr;
        gap:12px;
        padding:17px;
    }
    .translation-labels {
        display:none;
    }
    .translation-save {
        flex-direction:column;
        align-items:stretch;
        gap:13px;
    }
    .translation-save .note {
        max-width:none;
    }
    .translation-save .button {
        align-self:flex-start;
    }
    .settings-tabs {
        margin-bottom:20px;
    }
    .settings-tabs a {
        padding:11px 13px;
        font-size:12px;
    }
    .translation-progress {
        min-width:95px;
    }
    .language-options {
        max-height:290px;
        overflow:auto;
    }
    .heading-detail {
        display:block;
        margin-top:5px;
        font-size:16px;
    }
    .filters {
        padding:15px;
    }
    .filters input,.filters select {
        max-width:100%;
    }
    .inline-check {
        font-size:11px;
    }
    .search-result {
        padding:15px;
    }
    .two-cards {
        grid-template-columns:1fr;
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important;
    }
}
.dashboard-tables table {
    table-layout:fixed;
    width:100%;
}
.dashboard-tables th,.dashboard-tables td {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.dashboard-tables td:first-child a {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dashboard-tables>section:nth-child(1) th:nth-child(1) {
    width:34%;
}
.dashboard-tables>section:nth-child(1) th:nth-child(2) {
    width:24%;
}
.dashboard-tables>section:nth-child(1) th:nth-child(3) {
    width:23%;
}
.dashboard-tables>section:nth-child(1) th:nth-child(4) {
    width:19%;
}
.dashboard-tables>section:nth-child(2) th:nth-child(1) {
    width:42%;
}
.dashboard-tables>section:nth-child(2) th:nth-child(2) {
    width:22%;
}
.dashboard-tables>section:nth-child(2) th:nth-child(3) {
    width:15%;
}
.dashboard-tables>section:nth-child(2) th:nth-child(4) {
    width:21%;
}
.dashboard-tables>section:nth-child(3) th:nth-child(1) {
    width:42%;
}
.dashboard-tables>section:nth-child(3) th:nth-child(2) {
    width:35%;
}
.dashboard-tables>section:nth-child(3) th:nth-child(3) {
    width:23%;
}
.table-wrap td>.icon {
    width:14px;
    height:14px;
    vertical-align:middle;
}
@media(min-width:1251px) and (max-width:1649px) {
    .status-overview {
        display:grid;
        grid-template-columns:112px minmax(0,1fr);
        gap:14px;
        padding:42px 14px 20px;
    }
    .status-overview .ring {
        width:112px;
        height:112px;
    }
    .status-list {
        grid-template-columns:1fr;
        gap:14px;
    }
    .status-list>div {
        gap:4px;
    }
    .status-list>div>span {
        font-size:9px;
    }
}