:root {
    --bg: #f4f4f5;
    --surface: #ffffff;
    --sidebar-bg: #f3f3f4;
    --text: #18181b;
    --muted: #71717a;
    --border: #e4e4e7;
    --primary: #006FEE;
    --primary-hover: #005bc4;
    --green: #17c964;
    --green-bg: #e8faf0;
    --red: #f31260;
    --red-bg: #fee7ef;
    --blue-bg: #e6f1fe;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgb(21 21 63 / 10%), 0 1px 23px rgb(12 12 12 / 4%);
    --sidebar-width: 268px;
    --font: "Figtree", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #c8c8cc #f0f0f2;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #f0f0f2;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d4d4d8 0%, #c4c4c8 100%);
    border-radius: 999px;
    border: 2px solid #f0f0f2;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a1a1aa 0%, #909096 100%);
}

*::-webkit-scrollbar-corner {
    background: #f0f0f2;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

button,
input {
    font: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.muted {
    color: var(--muted);
    font-size: 0.875rem;
}

/* Auth */
.page-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(0, 111, 238, 0.08), transparent 40%),
        radial-gradient(circle at bottom right, rgba(0, 111, 238, 0.06), transparent 35%),
        var(--bg);
}

.auth-shell {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.auth-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 32px;
}

.auth-kemenkes {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    user-select: none;
    pointer-events: none;
}

.auth-kemenkes-logo {
    width: min(130px, 68%);
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 0.72;
    filter: grayscale(0.15);
    margin-bottom: 15px;
}

.auth-brand {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}

.auth-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    filter: grayscale(1) brightness(0.55) opacity(0.85);
}

.auth-brand h1 {
    margin: 0;
    font-size: 1.25rem;
}

.auth-brand p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.auth-security {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    user-select: none;
    pointer-events: none;
    color: #a1a1aa;
}

.auth-security-title {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a1a1aa;
    text-align: center;
}

.auth-security-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.auth-security-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #a1a1aa;
    font-size: 0.78rem;
}

.auth-security-item strong {
    display: inline;
    color: #a1a1aa;
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-security-item small {
    display: inline;
    margin-left: 4px;
    color: #a1a1aa;
    font-size: 0.72rem;
}

.auth-security-item small::before {
    content: "·";
    margin-right: 4px;
    opacity: 0.7;
}

.auth-security-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #a1a1aa;
    flex-shrink: 0;
}

.auth-security-icon svg {
    width: 14px;
    height: 14px;
    opacity: 0.75;
}

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

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

.field-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #3f3f46;
}

.field-input {
    width: 100%;
    border: 2px solid #e4e4e7;
    background: #f4f4f5;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.field-input:hover {
    background: #efeff1;
}

.field-input:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: none;
}

.btn {
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-pill);
    padding: 12px 18px;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-ghost {
    background: #f4f4f5;
    color: var(--text);
}

.btn-ghost:hover {
    background: #e4e4e7;
}

.btn-danger {
    background: var(--red);
    color: #fff;
}

.btn-danger:hover {
    background: #d20a52;
}

.btn-block {
    width: 100%;
}

.cms-btn-teal-gradient {
    background: linear-gradient(135deg, #16ada8 0%, #03938e 100%);
    color: #fff;
    border: 0;
    box-shadow: none;
}

.cms-btn-teal-gradient:hover {
    background: linear-gradient(135deg, #149a96 0%, #028278 100%);
    color: #fff;
}

.cms-btn-teal-gradient:active {
    transform: translateY(1px);
}

.cms-btn-teal-gradient.is-loading,
.btn.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.92;
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

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

/* HeroUI-style alerts */
.flash,
.hui-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ececef;
    box-shadow:
        0 1px 2px rgb(21 21 63 / 6%),
        0 8px 24px rgb(12 12 12 / 6%);
}

.hui-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.hui-alert-icon svg {
    width: 20px;
    height: 20px;
}

.hui-alert-body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.hui-alert-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 2px;
}

.hui-alert-message {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #71717a;
}

.hui-alert-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717a;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.hui-alert-close svg {
    width: 14px;
    height: 14px;
}

.hui-alert-close:hover {
    background: #e4e4e7;
    color: #3f3f46;
}

.hui-alert-success .hui-alert-icon {
    background: #e8faf0;
    color: #17c964;
}

.hui-alert-success .hui-alert-title {
    color: #0f7a3f;
}

.hui-alert-error .hui-alert-icon {
    background: #fee7ef;
    color: #f31260;
}

.hui-alert-error .hui-alert-title {
    color: #c20e4d;
}

.hui-alert-warning .hui-alert-icon {
    background: #fef3e2;
    color: #f5a524;
}

.hui-alert-warning .hui-alert-title {
    color: #936316;
}

.hui-alert-info .hui-alert-icon {
    background: #e6f1fe;
    color: #006FEE;
}

.hui-alert-info .hui-alert-title {
    color: #005bc4;
}

.flash[hidden],
.hui-alert[hidden] {
    display: none !important;
}

/* Shell */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar-backdrop {
    display: none;
}

.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
    z-index: 40;
}

.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 2px 2px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 2px 4px;
    border-radius: 10px;
}

.sidebar-brand:hover {
    background: transparent;
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    filter: grayscale(1) brightness(0.55) opacity(0.85);
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.sidebar-brand:hover .sidebar-logo {
    filter: none;
    opacity: 1;
}

.sidebar-brand-text {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #52525b;
    white-space: nowrap;
    line-height: 1.1;
}

.icon-btn.sidebar-close,
.icon-btn.mobile-nav-toggle {
    display: none;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f31260, #006FEE 55%, #17c964);
    flex-shrink: 0;
}

.avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}

.sidebar-nav,
.sidebar-footer {
    display: grid;
    gap: 4px;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.sidebar-section-header {
    padding: 14px 12px 4px;
    margin-top: 2px;
    user-select: none;
    pointer-events: none;
}

.sidebar-section-header:first-child {
    padding-top: 0;
    margin-top: 0;
}

.sidebar-section-header span {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a1a1aa;
    line-height: 1.35;
}

.sidebar-section-header::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 8px;
    background: linear-gradient(90deg, rgba(161, 161, 170, 0.4), rgba(161, 161, 170, 0.08) 72%, transparent);
}

.nav-item,
.nav-item-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    color: #3f3f46;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover,
.nav-item-button:hover {
    background: #ffffff;
}

.nav-item.is-active {
    background: #ffffff;
    color: #3f3f46;
    font-weight: bold;
    box-shadow: none;
}

.nav-group-toggle.is-active {
    background: transparent;
    color: var(--text);
    font-weight: 700;
    box-shadow: none;
}

.nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex-shrink: 0;
}

.nav-icon svg {
    width: 18px;
    height: 18px;
}

.nav-label {
    flex: 1;
}

.nav-chevron {
    width: 16px;
    height: 16px;
    display: inline-flex;
    color: #a1a1aa;
    transition: transform 0.2s ease;
}

.nav-chevron svg {
    width: 16px;
    height: 16px;
}

.nav-group.is-open .nav-chevron {
    transform: rotate(90deg);
}

.nav-submenu {
    display: none;
    position: relative;
    margin: 2px 0 4px 22px;
    padding: 2px 0 2px 12px;
    border-left: 1px dotted #c4c4c8;
    gap: 1px;
}

.nav-group.is-open .nav-submenu {
    display: grid;
}

.nav-subitem {
    position: relative;
    padding: 7px 10px;
    border-radius: 8px;
    color: #3f3f46;
    font-size: 0.875rem;
    background: transparent;
}

.nav-subitem::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 10px;
    border-top: 1px dotted #c4c4c8;
}

.nav-subitem:hover {
    background: rgb(255 255 255 / 55%);
    color: var(--text);
}

.nav-subitem.is-active {
    background: rgb(255 255 255 / 80%);
    color: var(--text);
    font-weight: 600;
}

.app-main {
    min-width: 0;
    padding: 28px 32px 24px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    align-items: stretch;
}

.app-content > * {
    flex: 0 0 auto;
}

.site-footer {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.site-footer p {
    margin: 0;
    color: #a1a1aa;
    font-size: 0.8rem;
    text-align: center;
}

.page-auth .site-footer {
    border-top: 0;
    margin-top: 20px;
    padding-top: 0;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.app-header.has-greeting {
    align-items: flex-start;
    margin-bottom: 16px;
}

.app-header.has-page-title {
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 12px;
}

.app-header.has-page-title .header-left {
    align-items: center;
    min-width: 0;
    flex: 1;
}

.header-page {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.header-page .cms-page-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.header-page .cms-breadcrumb {
    margin: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.greeting {
    margin: 0;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}

.greeting-sub {
    margin: 6px 0 0;
    color: var(--muted);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-menu {
    position: relative;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: #52525b;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
}

.icon-btn:hover,
.icon-btn[aria-expanded="true"] {
    background: #fafafa;
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

.icon-btn-profile {
    padding: 0;
}

.notif-dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid #fff;
}

.header-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: 14px;
    z-index: 50;
}

.header-popover-wide {
    width: 320px;
}

.popover-title {
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.search-results,
.notif-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    max-height: 240px;
    overflow: auto;
}

.search-results a,
.popover-link {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    color: #3f3f46;
    cursor: pointer;
}

.search-results a:hover,
.popover-link:hover {
    background: #f4f4f5;
}

.popover-link-danger {
    color: var(--red);
}

.notif-list li {
    padding: 10px 12px;
    border-radius: 12px;
    background: #fafafa;
    display: grid;
    gap: 2px;
}

.notif-list li + li {
    margin-top: 6px;
}

.notif-list strong {
    font-size: 0.875rem;
}

.notif-list span {
    color: var(--muted);
    font-size: 0.8rem;
}

.notif-list em {
    color: #a1a1aa;
    font-style: normal;
    font-size: 0.75rem;
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.profile-card strong {
    display: block;
    font-size: 0.95rem;
}

.profile-card span {
    color: var(--muted);
    font-size: 0.8rem;
}

.welcome-banner {
    background: linear-gradient(135deg, #ffffff, #eef6ff);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.welcome-banner h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.welcome-banner p {
    margin: 0;
    color: var(--muted);
    max-width: 48ch;
}

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

.stat-grid-dashboard {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card,
.panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px;
}

.stat-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.stat-value {
    margin: 8px 0 12px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.stat-card-teal {
    background: linear-gradient(135deg, #ffffff, #ecfdf5);
    border: 0;
    color: inherit;
    box-shadow: var(--shadow);
}

.stat-card-teal .stat-label {
    color: var(--muted);
}

.stat-card-teal .stat-value {
    color: #0f766e;
}

.stat-card-teal .stat-card-pill {
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
    border: 1px solid rgba(20, 184, 166, 0.24);
}

.stat-card-alert {
    background: linear-gradient(135deg, #ffffff, #fef2f2);
}

.stat-card-alert .stat-value {
    color: #b91c1c;
}

.stat-card-alert .stat-card-pill {
    background: rgba(243, 18, 96, 0.1);
    color: #be123c;
    border: 1px solid rgba(243, 18, 96, 0.22);
}

.stat-card--has-action {
    position: relative;
}

.stat-card-roster-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(255, 255, 255, 0.92);
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 118, 110, 0.08);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.stat-card-roster-btn:hover {
    background: #ecfdf5;
    border-color: rgba(20, 184, 166, 0.55);
    transform: translateY(-1px);
}

.stat-card-roster-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.stat-card-roster-icon svg {
    width: 14px;
    height: 14px;
}

.pace {
    pointer-events: none;
    user-select: none;
    z-index: 3000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: linear-gradient(90deg, var(--primary), #00c6ff, #7c3aed);
    position: fixed;
    z-index: 3000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px;
    box-shadow: 0 0 12px rgba(0, 111, 238, 0.55), 0 0 4px rgba(0, 198, 255, 0.45);
}

.pace .pace-activity {
    display: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pill-green {
    background: var(--green-bg);
    color: #0f7a3f;
}

.pill-red {
    background: var(--red-bg);
    color: var(--red);
}

.pill-blue {
    background: var(--blue-bg);
    color: var(--primary);
}

.welcome-banner .pill-role {
    font-size: 0.95rem;
    padding: 0.55rem 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

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

.dashboard-highlight-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 118px;
    padding: 24px 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    background-color: #eef6ff;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 96%) 0%, rgb(255 255 255 / 72%) 34%, rgb(255 255 255 / 28%) 62%, rgb(255 255 255 / 6%) 100%),
        var(--highlight-image);
    background-size: cover;
    background-position: center right;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-highlight-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgb(24 24 27 / 10%);
}

.dashboard-highlight-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 16ch;
    font-size: 1.25rem;
    line-height: 1.25;
}

.dashboard-highlight-card--complaint {
    background-color: #fff7ed;
}

.hub-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.hub-page-header h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.hub-page-header p {
    margin: 0;
}

.hub-section {
    margin-bottom: 20px;
}

.hub-section-title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hub-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.hub-module-grid.hub-module-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.hub-module-grid-5 .hub-module-card {
    padding: 12px;
    gap: 10px;
}

.hub-module-grid-5 .hub-module-icon {
    width: 34px;
    height: 34px;
}

.hub-module-grid-5 .hub-module-body .muted {
    font-size: 0.78rem;
    line-height: 1.35;
}

.hub-recent-table td,
.hub-recent-table th {
    font-size: 0.875rem;
}

.notif-list li.is-unread strong {
    color: var(--text);
}

.notif-list li.is-read strong {
    color: var(--muted);
    font-weight: 600;
}

.notif-list .notif-empty {
    padding: 8px 0;
    color: var(--muted);
}

.notif-see-all {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-weight: 600;
}

.notif-page-list {
    display: grid;
    gap: 10px;
}

.notif-page-item {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: #f8fafc;
    border: 1px solid #e4e4e7;
}

.notif-page-item.is-unread {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.notif-page-item p {
    margin: 0 0 4px;
}

.notif-page-item em {
    color: var(--muted);
    font-size: 0.8rem;
}

.hub-module-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    border: 1px solid transparent;
}

.hub-module-card:hover {
    border-color: #bfdbfe;
    box-shadow: 0 8px 24px rgb(0 111 238 / 8%);
}

.hub-module-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 0.75rem;
    background: #eff6ff;
    color: #006fee;
}

.hub-module-icon svg {
    width: 18px;
    height: 18px;
}

.hub-module-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hub-module-body strong {
    font-size: 0.92rem;
}

.hub-module-body .muted {
    font-size: 0.8rem;
    line-height: 1.45;
}

.hub-module-arrow {
    color: #a1a1aa;
    font-size: 1rem;
    line-height: 1;
    margin-top: 2px;
}

.hub-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.hub-stat-card {
    display: block;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.hub-stat-card:hover {
    border-color: #fecdd3;
    box-shadow: 0 8px 24px rgb(243 18 96 / 8%);
}

.hub-stat-label {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.hub-stat-value {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.hub-stat-meta {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #71717a;
}

.chart-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
}

.chart-grid-3col {
    grid-template-columns: 1.4fr 0.85fr 0.85fr;
}

.chart-grid-2col {
    grid-template-columns: 1.2fr 0.8fr;
}

.chart-grid-single {
    grid-template-columns: 1fr;
}

.chart-grid-secondary {
    margin-top: 16px;
}

.dashboard-chart-panel--compact .chart-canvas-wrap--compact {
    height: 180px;
}

.dashboard-chart-panel--compact .panel-head h3 {
    font-size: 0.95rem;
}

.stat-card-footer {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.dashboard-sirs-chart-canvas {
    min-width: 0;
    height: 165px;
}

.dashboard-sirs-head-total {
    font-weight: 700;
    color: var(--text);
}

.dashboard-recent-booking-panel .panel-head {
    align-items: baseline;
}

.dashboard-recent-booking-link {
    font-size: 0.78rem;
    text-decoration: none;
}

.dashboard-recent-booking-link:hover {
    text-decoration: underline;
}

.dashboard-recent-booking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-recent-booking-item {
    padding: 0;
    border-radius: 8px;
    background: rgba(15, 118, 110, 0.04);
    border: 1px solid rgba(15, 118, 110, 0.08);
    font-size: 0.78rem;
    line-height: 1.35;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dashboard-recent-booking-item:hover {
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.16);
}

.dashboard-recent-booking-link-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    color: inherit;
    text-decoration: none;
}

.dashboard-recent-booking-time {
    color: var(--muted);
    font-size: 0.72rem;
}

.dashboard-recent-booking-meta {
    color: var(--text);
    word-break: break-word;
}

.dashboard-recent-booking-meta code {
    font-size: 0.74rem;
    font-weight: 600;
}

.dashboard-recent-booking-sep {
    color: var(--muted);
    margin: 0 2px;
}

.dashboard-recent-booking-empty {
    padding: 12px 4px;
    font-size: 0.82rem;
}

.booking-audit-row.is-clickable {
    cursor: pointer;
}

.booking-audit-row.is-clickable:hover {
    background: rgba(15, 118, 110, 0.06);
}

.sirs-stats-cards {
    display: grid;
    gap: 16px;
}

.sirs-stats-intro {
    margin-bottom: 16px;
}

.sirs-stats-subtitle {
    margin: 4px 0 0;
    font-size: 0.875rem;
}

.sirs-stat-card-body {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.sirs-stat-card-title {
    margin: 0 0 6px;
    font-size: 1rem;
}

.sirs-stat-card-url {
    margin: 0 0 12px;
    font-size: 0.72rem;
    line-height: 1.35;
    word-break: break-all;
}

.sirs-stat-card-total {
    margin: 0 0 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sirs-stat-card-total-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.sirs-stat-card-today {
    margin: 0 0 12px;
    font-size: 0.875rem;
}

.sirs-stat-legend {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--muted);
}

.sirs-stat-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.sirs-stat-dot--success {
    background: #17c964;
}

.sirs-stat-dot--failed {
    background: #f31260;
}

.sirs-stat-card-chart {
    position: relative;
    min-height: 160px;
    height: 160px;
}

.hub-recent-table--compact th,
.hub-recent-table--compact td {
    padding: 6px 8px;
    font-size: 0.78rem;
    line-height: 1.35;
    vertical-align: middle;
}

.hub-recent-table--compact th {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.74rem;
}

.hub-recent-row {
    cursor: pointer;
}

.hub-recent-row:hover td {
    background: #f4f4f5;
}

.hub-recent-row:focus-visible {
    outline: 2px solid var(--primary, #006FEE);
    outline-offset: -2px;
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 165px;
    overflow: hidden;
}

.chart-canvas-wrap--primary {
    height: 165px;
}

.chart-canvas-wrap--primary.chart-canvas-wrap--donut {
    height: 150px;
    max-width: 280px;
    margin: 0 auto;
}

.chart-canvas-wrap--donut {
    height: 220px;
    max-width: 320px;
    margin: 0 auto;
}

.chart-canvas-wrap--compact {
    height: 170px;
}

.cms-filter-form {
    padding: 0 20px 12px;
}

.hui-field-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.hui-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 16px;
}

.btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.cms-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cms-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pill-status {
    font-size: 0.75rem;
    font-weight: 600;
}

.pill-status-0 {
    background: #fef3c7;
    color: #b45309;
}

.pill-status-1 {
    background: #dbeafe;
    color: #1d4ed8;
}

.pill-status-2 {
    background: #dcfce7;
    color: #15803d;
}

.pill-status-3 {
    background: #fee2e2;
    color: #b91c1c;
}

.hui-icon-btn-status {
    background: rgba(120, 40, 200, 0.12);
    color: #6b21a8;
}

.hui-icon-btn-status:hover {
    background: rgba(120, 40, 200, 0.22);
    color: #581c87;
}

.share-modal,
.share-modal-close,
.share-modal-copy,
#share-modal-link {
    display: none !important;
}

.chart-canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.panel-head h3 {
    margin: 0;
    font-size: 1rem;
}

.count-badge {
    display: inline-flex;
    margin-left: 8px;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    background: #f4f4f5;
    color: var(--muted);
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.table-wrap {
    overflow: auto;
}

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

.data-table th,
.data-table td {
    text-align: left;
    padding: 14px 8px;
    border-bottom: 1px solid #f4f4f5;
    font-size: 0.9rem;
}

.data-table th {
    color: var(--muted);
    font-weight: 500;
}

.placeholder-panel h2 {
    margin: 0 0 8px;
}

/* Errors */
.error-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 40px 36px;
    text-align: center;
    max-width: 440px;
    margin: 0 auto;
}

.error-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 40px;
    padding: 0 14px;
    margin-bottom: 18px;
    border-radius: var(--radius-pill);
    background: var(--blue-bg);
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.error-card h1 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.error-card p {
    margin: 0 0 24px;
    color: var(--muted);
    line-height: 1.5;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.error-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Modal */
.modal[hidden] {
    display: none !important;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 20px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(24 24 27 / 35%);
}

.modal-card {
    position: relative;
    width: min(100%, 400px);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 28px;
}

.modal-card h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
}

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

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

body.sidebar-open {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .stat-grid,
    .chart-grid {
        grid-template-columns: 1fr 1fr;
    }

    .chart-grid-3col {
        grid-template-columns: 1fr 1fr;
    }

    .chart-grid-2col {
        grid-template-columns: 1fr;
    }

    .chart-grid-3col .dashboard-sirs-chart-panel:last-child {
        grid-column: 1 / -1;
    }

    .sirs-stat-card-body {
        grid-template-columns: 1fr;
    }

    .stat-grid-dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hub-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hub-module-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .icon-btn.mobile-nav-toggle {
        display: grid;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(24 24 27 / 35%);
        z-index: 35;
    }

    .sidebar-backdrop[hidden] {
        display: none;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(86vw, var(--sidebar-width));
        height: 100vh;
        border-right: 1px solid var(--border);
        border-bottom: 0;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: var(--shadow);
    }

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

    .sidebar.is-open .icon-btn.sidebar-close {
        display: grid;
    }

    body.sidebar-open .icon-btn.mobile-nav-toggle {
        visibility: hidden;
        pointer-events: none;
    }

    .app-main {
        padding: 16px 14px 28px;
        width: 100%;
    }

    .app-header {
        align-items: center;
        gap: 12px;
    }

    .greeting {
        font-size: 1.2rem;
    }

    .greeting-sub {
        font-size: 0.8rem;
    }

    .stat-grid,
    .stat-grid-dashboard,
    .chart-grid,
    .chart-grid-3col,
    .chart-grid-secondary,
    .dashboard-highlights {
        grid-template-columns: 1fr;
    }

    .stat-grid-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hub-module-grid,
    .hub-module-grid-5 {
        grid-template-columns: 1fr;
    }

    .welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }

    .header-popover,
    .header-popover-wide {
        position: fixed;
        top: 72px;
        right: 14px;
        left: 14px;
        width: auto;
    }

    .stat-value {
        font-size: 1.35rem;
    }
}

@media (max-width: 480px) {
    .header-actions {
        gap: 6px;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }

    .greeting {
        font-size: 1.05rem;
    }

    .greeting-sub {
        display: none;
    }
}

/* Sandbox — HeroUI-like table & form */
.page-intro {
    margin-bottom: 4px;
}

.page-intro h2 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.sandbox-panel {
    overflow: hidden;
}

.hui-table-shell {
    background: #f4f4f5;
    border-radius: 18px;
    padding: 10px;
}

.hui-table-scroll {
    background: #fff;
    border-radius: 16px;
    overflow: auto;
    box-shadow: var(--shadow);
    border:1px solid #d4d4d8;
}

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

.hui-table thead th {
    background: #efefef;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.82rem;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid #d4d4d8;
    white-space: nowrap;
}

.hui-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f1f3;
    font-size: 0.9rem;
    color: #3f3f46;
    vertical-align: middle;
}

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

.hui-table tbody tr {
    transition: background 0.15s ease;
}

.hui-table tbody tr:hover {
    background: #fafafa;
}

.hui-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
}

.hui-sort.is-active {
    color: var(--text);
    font-weight: 600;
}

.hui-sort-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
}

.hui-sort-icon svg {
    width: 14px;
    height: 14px;
}

.hui-th-sortable .hui-sort {
    text-decoration: none;
    color: inherit;
}

.hui-th-sort-indicator {
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0.85;
}

.hui-id-cell,
.hui-member,
.hui-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hui-member-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.hui-member-text strong {
    color: var(--text);
    font-size: 0.9rem;
}

.hui-member-text span {
    color: var(--muted);
    font-size: 0.78rem;
}

.hui-avatar-tone {
    background: linear-gradient(135deg, #006FEE, #7828c8);
}

.hui-col-actions {
    text-align: center;
}

.hui-table.cms-table thead th.hui-col-actions {
    text-align: center;
}

.hui-actions {
    justify-content: center;
}

.hui-icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f4f4f5;
    color: #3f3f46;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hui-icon-btn:hover {
    background: #e4e4e7;
    color: var(--text);
}

.hui-icon-btn-danger {
    background: var(--red-bg);
    color: var(--red);
}

.hui-icon-btn-danger:hover {
    background: #fdd0df;
    color: #c10d4c;
}

.hui-icon-btn-warning {
    background: #fef3c7;
    color: #b45309;
}

.hui-icon-btn-warning:hover {
    background: #fde68a;
    color: #92400e;
}

.hui-icon-btn-teal {
    background: rgba(0, 181, 163, 0.12);
    color: #0f766e;
}

.hui-icon-btn-teal:hover {
    background: rgba(0, 181, 163, 0.22);
    color: #115e59;
}

.hui-icon-btn svg {
    width: 16px;
    height: 16px;
}

.hui-icon-btn-sm {
    width: 24px;
    height: 24px;
}

.hui-icon-btn-sm svg {
    width: 14px;
    height: 14px;
}

.hui-chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.hui-chip-success {
    background: var(--green-bg);
    color: #0f7a3f;
}

.hui-chip-danger {
    background: var(--red-bg);
    color: var(--red);
}

.hui-chip-warning {
    background: #fef3c7;
    color: #b45309;
}

.cms-table .hui-table thead th,
.cms-table.hui-table thead th,
.hui-table.cms-table thead th {
    padding: 10px 12px;
}

.hui-table.cms-table tbody td {
    padding: 6px 12px;
}

.hui-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px 2px;
    flex-wrap: wrap;
}

.hui-table-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

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

.hui-page-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 0.85rem;
}

.hui-page-btn:hover:not(:disabled) {
    background: #e4e4e7;
    color: var(--text);
}

.hui-page-btn.is-active {
    background: #e4e4e7;
    color: var(--text);
    font-weight: 600;
}

.hui-page-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

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

.hui-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.hui-field-span {
    grid-column: 1 / -1;
}

.hui-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #3f3f46;
}

.cms-section-title {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #18181b;
}

.cms-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.cms-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.cms-detail-item-full {
    grid-column: 1 / -1;
}

.cms-detail-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #71717a;
    margin-bottom: 6px;
}

.cms-detail-value {
    font-size: 0.925rem;
    color: #27272a;
    line-height: 1.55;
    word-break: break-word;
}

.cms-detail-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e4e4e7;
}

.hui-input {
    width: 100%;
    border: 3px solid #f4f4f5;
    background: #f4f4f5;
    border-radius: 14px;
    padding: 12px 14px;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hui-input:hover {
    background: #efeff1;
}

.hui-input:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: none;
}

.hui-textarea {
    resize: vertical;
    min-height: 110px;
}

.hui-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Custom select (replaces native dropdown panel) */
.hui-selectbox {
    position: relative;
    width: 100%;
}

.hui-selectbox-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    padding-right: 36px;
}

.hui-selectbox-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hui-selectbox-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    display: inline-flex;
    flex-shrink: 0;
    color: #71717a;
    transform: translateY(-50%);
    transition: transform 0.15s ease;
    pointer-events: none;
}

.hui-selectbox-chevron svg {
    width: 16px;
    height: 16px;
}

.hui-selectbox.is-open .hui-selectbox-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.hui-selectbox-panel {
    position: absolute;
    z-index: 120;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.hui-selectbox-search-wrap {
    padding: 8px;
    border-bottom: 1px solid #f4f4f5;
}

.hui-selectbox-search {
    padding: 8px 12px;
    font-size: 0.875rem;
    border-width: 2px;
}

.hui-selectbox-menu {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.hui-selectbox-option {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #3f3f46;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.hui-selectbox-option:hover,
.hui-selectbox-option.is-focused {
    background: #f4f4f5;
}

.hui-selectbox-option.is-selected {
    background: rgba(0, 181, 163, 0.12);
    color: #0f766e;
    font-weight: 600;
}

.hui-selectbox-option.is-hidden {
    display: none;
}

.hui-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hui-selectbox.is-disabled .hui-selectbox-trigger {
    cursor: not-allowed;
}

.cms-toolbar-filters .hui-selectbox {
    width: 200px;
    min-width: 160px;
    flex: 0 0 auto;
}

.cms-toolbar-filters .hui-selectbox-trigger {
    min-height: 36px;
    padding: 8px 36px 8px 12px;
    background: #fff;
    border: 1px solid #d4d4d8;
    border-radius: 14px;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cms-toolbar-filters .hui-selectbox-trigger:hover {
    background: #fafafa;
    border-color: #a1a1aa;
}

.cms-toolbar-filters .hui-selectbox.is-open .hui-selectbox-trigger {
    border-color: var(--primary);
    background: #fff;
}

.hui-switch,
.hui-check,
.hui-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #3f3f46;
    font-size: 0.9rem;
}

.hui-check-stack,
.hui-radio-stack {
    display: grid;
    gap: 10px;
}

.hui-switch input,
.hui-check input,
.hui-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hui-switch-track {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #e4e4e7;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.hui-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
}

.hui-switch input:checked + .hui-switch-track {
    background: var(--primary);
}

.hui-switch input:checked + .hui-switch-track::after {
    transform: translateX(18px);
}

.hui-field-switch {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hui-field-switch .hui-switch {
    align-self: flex-start;
}

.hui-switch-text {
    font-size: 0.875rem;
    color: #3f3f46;
}

.pill-status-published {
    background: #dcfce7;
    color: #15803d;
}

.pill-status-draft {
    background: #fef3c7;
    color: #b45309;
}

.hui-check span::before,
.hui-radio span::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 1.5px solid #d4d4d8;
    display: inline-block;
    margin-right: 10px;
    vertical-align: -3px;
    background: #fff;
    box-shadow: var(--shadow);
}

.hui-check span::before {
    border-radius: 6px;
}

.hui-radio span::before {
    border-radius: 50%;
}

.hui-check input:checked + span::before {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: inset 0 0 0 3px #fff;
}

.hui-radio input:checked + span::before {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 4px var(--primary);
}

.hui-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.hui-form-feedback {
    margin: 12px 0 0;
    text-align: right;
}

/* CMS universal list + form */
.cms-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.cms-page-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.cms-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.85rem;
}

.cms-breadcrumb a {
    color: var(--muted);
}

.cms-breadcrumb a:hover {
    color: var(--primary);
}

.cms-crumb-home {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.cms-crumb-home svg {
    width: 16px;
    height: 16px;
}

.cms-crumb-sep {
    color: #d4d4d8;
}

.cms-panel.panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    height: auto;
    align-self: flex-start;
    width: 100%;
    background: var(--surface);
    box-shadow: var(--shadow);
    border-radius: var(--radius-lg);
}

.cms-list-panel.panel {
    gap: 10px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.cms-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    min-height: 0;
}

.cms-toolbar-filters,
.cms-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cms-filter-field {
    flex: 0 0 auto;
}

.cms-filter-input {
    width: 200px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #d4d4d8;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        font-size: 0.875rem;
}

.cms-filter-input:hover {
    background: #fafafa;
    border-color: #a1a1aa;
}

.cms-filter-input:focus {
    background: #fff;
    border-color: var(--primary);
    outline: none;
}

.cms-table-shell.hui-table-shell {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.cms-table-shell .hui-table-scroll {
    border-radius: 14px;
}

.cms-table-shell .hui-table-footer {
    padding: 8px 2px 0;
}

.cms-square-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e4e4e7;
    color: #3f3f46;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.cms-square-btn svg {
    width: 16px;
    height: 16px;
}

.cms-square-btn-teal {
    background: #14b8a6;
    border-color: #14b8a6;
    color: #fff;
}

.cms-btn-primary,
.cms-btn-secondary,
.cms-btn-teal,
.cms-btn-teal-gradient,
.cms-btn-dark,
.cms-btn-success {
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.cms-btn-primary {
    background: var(--primary);
    color: #fff;
}

.cms-btn-primary:hover {
    background: var(--primary-hover);
    color: #fff;
}

.cms-btn-secondary {
    background: #e4e4e7;
    color: #18181b;
}

.cms-btn-secondary:hover {
    background: #d4d4d8;
    color: #18181b;
}

.cms-btn-teal {
    background: #14b8a6;
    color: #fff;
}

.cms-btn-dark {
    background: #18181b;
    color: #fff;
}

.cms-btn-success {
    background: #17c964;
    color: #fff;
}

.cms-btn-md {
    padding: 8px 16px;
    font-size: 0.875rem;
    min-height: 36px;
    line-height: 1.2;
    white-space: nowrap;
}

.cms-btn-sm {
    padding: 7px 12px;
    font-size: 0.8rem;
    min-height: 32px;
    white-space: nowrap;
    border-radius: 999px;
}

.cms-empty {
    text-align: center;
    color: var(--muted);
    padding: 28px 16px !important;
}

.cms-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: start;
}

.cms-side-panel {
    gap: 14px;
}

.cms-url-group {
    display: flex;
    align-items: stretch;
    border: 2px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    background: #f4f4f5;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cms-url-group:focus-within {
    border-color: var(--primary);
    background: #fff;
}

.cms-url-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 0.78rem;
    color: var(--muted);
    background: #ececef;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-url-group:focus-within .cms-url-prefix {
    background: #f4f4f5;
}

.cms-url-group .hui-input {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 14px;
}

.cms-url-group .hui-input:hover,
.cms-url-group .hui-input:focus {
    background: transparent !important;
    border: 0 !important;
    padding: 12px 14px;
}

.cms-lang-tabs {
    display: inline-flex;
    gap: 4px;
    background: #f4f4f5;
    padding: 4px;
    border-radius: 12px;
    width: fit-content;
}

.cms-lang-tab {
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.cms-lang-tab.is-active {
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow);
}

.cms-lang-pane {
    display: grid;
    gap: 14px;
}

.cms-lang-pane[hidden] {
    display: none !important;
}

.cms-image-box {
    display: grid;
    gap: 10px;
}

.cms-image-preview {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 16px;
    background: #f4f4f5;
    border: 1px solid #e4e4e7;
}

.media-content-grid {
    align-items: start;
}

.media-banner-section-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e4e4e7;
    padding-bottom: 0.35rem;
}

.media-banner-section-tabs .cms-lang-tab {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.media-banner-upload-hint {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
}

.hui-field-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hui-field-checkbox input {
    width: auto;
    margin: 0;
}

.media-content-main .cms-editor-wrap .ql-editor {
    min-height: 280px;
}

.hui-input-lg {
    font-size: 1.05rem;
    font-weight: 600;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.cms-image-placeholder {
    height: 160px;
    border-radius: 16px;
    background: #f4f4f5;
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: 0.85rem;
}

.cms-image-row {
    display: flex;
    gap: 8px;
}

.cms-editor-wrap {
    border: 2px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    background: #f4f4f5;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cms-editor-wrap:focus-within {
    border-color: var(--primary);
    background: #fff;
}

.cms-editor {
    min-height: 0;
    background: transparent;
}

.cms-editor-wrap .cms-editor.ql-container {
    height: auto !important;
}

.cms-editor-wrap .cms-editor .ql-editor {
    height: auto !important;
    min-height: 140px;
    max-height: 320px;
    overflow-y: auto;
    font-family: var(--font);
    padding: 12px 14px;
}

.cms-editor .ql-editor.ql-blank::before {
    font-style: normal;
    color: #a1a1aa;
    left: 14px;
}

.ql-toolbar.ql-snow {
    border: 0 !important;
    border-bottom: 1px solid #e4e4e7 !important;
    background: #efeff1;
    padding: 8px 10px;
}

.ql-container.ql-snow {
    border: 0 !important;
    font-family: var(--font);
}

.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--primary) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--primary) !important;
}

.cms-editor-wrap.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 3000;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.cms-editor-wrap.is-fullscreen .cms-editor,
.cms-editor-wrap.is-fullscreen .ql-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cms-editor-wrap.is-fullscreen .cms-editor .ql-editor,
.cms-editor-wrap.is-fullscreen .cms-editor-source {
    max-height: none;
    flex: 1;
    min-height: 0;
}

.cms-editor-wrap.is-fullscreen.is-source-mode .cms-editor-source {
    display: block;
    max-height: none;
}

.cms-editor-source {
    display: none;
    width: 100%;
    min-height: 140px;
    max-height: 320px;
    border: 0;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
    background: #fff;
    color: #18181b;
    box-sizing: border-box;
}

.cms-editor-wrap.is-source-mode .cms-editor {
    display: none !important;
}

.cms-editor-wrap.is-source-mode .cms-editor-source {
    display: block;
}

.cms-editor-wrap.is-source-mode .ql-sourceCode {
    color: var(--primary) !important;
}

.cms-editor-wrap.is-source-mode .ql-sourceCode .ql-stroke {
    stroke: var(--primary) !important;
}

.cms-editor-source:focus {
    outline: none;
}

.ql-font-figtree {
    font-family: 'Figtree', var(--font), sans-serif;
}

.ql-font-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.ql-font-georgia {
    font-family: Georgia, 'Times New Roman', serif;
}

.ql-font-times-new-roman {
    font-family: 'Times New Roman', Times, serif;
}

.ql-font-courier-new {
    font-family: 'Courier New', Courier, monospace;
}

.ql-font-tahoma {
    font-family: Tahoma, Geneva, sans-serif;
}

.ql-font-verdana {
    font-family: Verdana, Geneva, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: 'Font';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="figtree"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="figtree"]::before {
    content: 'Figtree';
    font-family: 'Figtree', var(--font), sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
    content: 'Arial';
    font-family: Arial, Helvetica, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before {
    content: 'Georgia';
    font-family: Georgia, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before {
    content: 'Times New Roman';
    font-family: 'Times New Roman', Times, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before {
    content: 'Courier New';
    font-family: 'Courier New', Courier, monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before {
    content: 'Tahoma';
    font-family: Tahoma, Geneva, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before {
    content: 'Verdana';
    font-family: Verdana, Geneva, sans-serif;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '16px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: '12px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: '16px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: '20px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: '24px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    content: '32px';
}

.ql-youtube-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 12px 0;
    background: #000;
    border-radius: 8px;
}

.ql-youtube-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cms-editor .ql-editor .cms-quill-table,
.cms-editor .ql-editor table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    table-layout: fixed;
}

.cms-editor .ql-editor .cms-quill-table td,
.cms-editor .ql-editor .cms-quill-table th,
.cms-editor .ql-editor table td,
.cms-editor .ql-editor table th {
    border: 1px solid #e4e4e7;
    padding: 8px 10px;
    min-width: 48px;
    vertical-align: top;
}

.quill-table-picker {
    position: absolute;
    z-index: 3100;
}

.quill-table-picker-panel {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 10px;
}

.quill-table-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 18px);
    gap: 3px;
}

.quill-table-picker-cell {
    width: 18px;
    height: 18px;
    border: 1px solid #d4d4d8;
    border-radius: 2px;
    background: #fff;
    padding: 0;
    cursor: pointer;
}

.quill-table-picker-cell.is-active {
    background: #dbeafe;
    border-color: #3b82f6;
}

.quill-table-picker-label {
    margin: 8px 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: #71717a;
}

.ql-toolbar button.ql-imageSelector,
.ql-toolbar button.ql-videoEmbed,
.ql-toolbar button.ql-table,
.ql-toolbar button.ql-sourceCode,
.ql-toolbar button.ql-fullscreen,
.ql-toolbar button.ql-cleanFormat {
    width: 28px !important;
}

.ql-hex-field {
    display: block;
    width: 100%;
    padding: 8px 2px 0 0;
    margin-top: 8px;
    border-top: 1px solid #e4e4e7;
    box-sizing: border-box;
}

.ql-color-swatches {
    display: grid;
    grid-template-columns: repeat(7, 18px);
    gap: 3px;
    width: 100%;
    padding-right: 2px;
    box-sizing: border-box;
}

.ql-snow .ql-picker.ql-color .ql-picker-options,
.ql-snow .ql-picker.ql-background .ql-picker-options {
    display: none;
    width: 176px;
    padding: 8px 12px 10px;
    box-sizing: border-box;
    overflow: visible;
}

.ql-snow .ql-picker.ql-color.ql-expanded .ql-picker-options,
.ql-snow .ql-picker.ql-background.ql-expanded .ql-picker-options {
    display: block;
    z-index: 2;
    overflow: visible;
}

.ql-snow .ql-picker.ql-color .ql-picker-options .ql-picker-item,
.ql-snow .ql-picker.ql-background .ql-picker-options .ql-picker-item {
    float: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}

.ql-snow .ql-picker.ql-color .ql-color-swatches .ql-picker-item[data-value="#2c5d66"]::after,
.ql-snow .ql-picker.ql-color .ql-color-swatches .ql-picker-item[data-value="#33919e"]::after,
.ql-snow .ql-picker.ql-color .ql-color-swatches .ql-picker-item[data-value="#00b9a5"]::after,
.ql-snow .ql-picker.ql-color .ql-color-swatches .ql-picker-item[data-value="#14b8a6"]::after,
.ql-snow .ql-picker.ql-color .ql-color-swatches .ql-picker-item[data-value="#8ec342"]::after,
.ql-snow .ql-picker.ql-color .ql-color-swatches .ql-picker-item[data-value="#d4e44d"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.ql-snow .ql-picker.ql-color .ql-color-swatches .ql-picker-item {
    position: relative;
}

.ql-hex-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #52525b;
}

.ql-hex-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.ql-hex-prefix {
    flex: 0 0 auto;
    color: #71717a;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.ql-hex-input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 30px;
    border: 1px solid #d4d4d8;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #18181b;
    background: #fff;
}

.ql-hex-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 111, 238, 0.12);
}

.ql-hex-apply {
    flex: 0 0 auto;
    height: 30px;
    border: 0;
    border-radius: 6px;
    padding: 0 10px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ql-hex-apply:hover {
    opacity: 0.92;
}

.ql-snow .ql-picker.ql-color.ql-expanded .ql-picker-label,
.ql-snow .ql-picker.ql-background.ql-expanded .ql-picker-label {
    z-index: 2;
}

.cms-form-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.btn-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -2px;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.btn.cms-btn-primary,
.btn.cms-btn-secondary,
.btn.cms-btn-teal-gradient,
.btn.cms-btn-dark,
.btn.cms-btn-success,
.btn.cms-btn-teal {
    display: inline-flex;
    align-items: center;
}

.account-panel {
    max-width: 720px;
    height: auto;
    align-self: flex-start;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-section-title {
    margin: 0;
    font-size: 1rem;
}

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

.account-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.account-form .hui-form-actions {
    margin-top: 4px;
}

.hui-input:disabled,
.hui-input[readonly],
.hui-select:disabled {
    background: #e4e4e7;
    border-color: #d4d4d8;
    color: #52525b;
    opacity: 1;
    cursor: not-allowed;
}

.hui-input:disabled:hover,
.hui-input[readonly]:hover,
.hui-select:disabled:hover {
    background: #e4e4e7;
    border-color: #d4d4d8;
}

.hui-field-locked {
    position: relative;
}

.hui-field-locked .hui-input,
.hui-field-locked .hui-textarea,
.hui-field-locked .hui-select {
    background: #e4e4e7;
    border-color: #d4d4d8;
    color: #52525b;
    padding-right: 40px;
}

.hui-field-locked .hui-selectbox-trigger {
    background: #e4e4e7;
    border-color: #d4d4d8;
    color: #52525b;
}

.hui-field-locked .hui-input:hover,
.hui-field-locked .hui-textarea:hover,
.hui-field-locked .hui-select:hover {
    background: #e4e4e7;
    border-color: #d4d4d8;
}

.hui-field-lock {
    position: absolute;
    top: 34px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #71717a;
    background: rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

.hui-field-lock svg {
    width: 14px;
    height: 14px;
}

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

@media (max-width: 860px) {
    .account-grid,
    .hui-form-grid {
        grid-template-columns: 1fr;
    }

    .header-page .cms-page-title {
        font-size: 1.05rem;
    }

    .header-page .cms-breadcrumb {
        font-size: 0.78rem;
        flex-wrap: wrap;
    }

    .cms-page-head {
        display: none;
    }

    .cms-list-panel.panel {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .cms-panel.panel:not(.cms-list-panel) {
        padding: 14px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .cms-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .cms-toolbar-filters {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }

    .cms-filter-input {
        flex: 1 1 calc(50% - 8px);
        width: auto;
        min-width: 0;
        min-height: 36px;
    }

    .cms-toolbar-filters .hui-selectbox {
        flex: 1 1 calc(50% - 8px);
        width: auto;
        min-width: 0;
    }

    .cms-toolbar-filters .cms-square-btn {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    .cms-toolbar-actions {
        display: flex;
        width: 100%;
        gap: 8px;
    }

    .cms-toolbar-actions .btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 36px;
        padding: 8px 12px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .app-content {
        gap: 10px;
    }

    .app-content > * {
        flex: 0 0 auto;
    }

    .app-header {
        margin-bottom: 8px;
    }

    .app-header.has-page-title {
        margin-bottom: 6px;
        padding-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .cms-toolbar-filters {
        flex-direction: row;
    }

    .cms-filter-input {
        flex: 1 1 100%;
    }

    .cms-toolbar-filters .cms-square-btn {
        flex: 1 1 calc(50% - 4px);
        width: auto;
    }

    .cms-toolbar-actions {
        flex-direction: column;
    }

    .cms-toolbar-actions .btn {
        width: 100%;
    }

    .header-actions {
        gap: 6px;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }

    .greeting {
        font-size: 1.05rem;
    }

    .greeting-sub {
        display: none;
    }
}
/* Role & Permissions matrix */
.role-perm-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.role-perm-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.role-perm-meta {
    margin: 0;
    color: #3f3f46;
    font-size: 0.95rem;
}

.role-perm-hint {
    margin: 4px 0 0;
    color: #71717a;
    font-size: 0.85rem;
}

.role-perm-table th.role-perm-col,
.role-perm-table td.role-perm-col {
    text-align: center;
    width: 88px;
    vertical-align: middle;
}

.role-perm-section td {
    background: #f4f4f5;
    font-weight: 700;
    color: #18181b;
    font-size: 0.95rem;
}

.role-perm-label {
    display: inline-block;
    color: #3f3f46;
}

.role-perm-switch {
    justify-content: center;
    gap: 0;
}

.role-perm-na {
    color: #a1a1aa;
}

/* Integration modules */
.integration-swagger-panel {
    padding: 0;
    overflow: hidden;
}

.integration-swagger {
    min-height: calc(100vh - 180px);
}

.integration-swagger .swagger-ui {
    padding: 0;
}

.sirs-sync-layout {
    display: grid;
    gap: 1.25rem;
    max-width: 920px;
}

.sirs-sync-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sirs-sync-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #18181b;
}

.sirs-sync-table td {
    vertical-align: middle;
}

.sirs-sync-label {
    width: 220px;
    font-weight: 600;
    color: #3f3f46;
}

.sirs-sync-meta {
    text-align: right;
    color: #71717a;
}

.sirs-sync-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 0;
}

.sirs-sync-job-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.9rem;
    font-weight: 600;
}

.sirs-sync-job-banner[hidden] {
    display: none !important;
}

.sirs-sync-job-banner-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    animation: sirs-sync-spin 0.8s linear infinite;
}

.sirs-sync-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}

.sirs-sync-status-badge--success {
    color: #166534;
    background: #dcfce7;
}

.sirs-sync-status-badge--failed {
    color: #991b1b;
    background: #fee2e2;
    cursor: help;
}

.sirs-sync-error-msg {
    color: #b91c1c;
    font-size: 0.88rem;
}

.sirs-sync-settings-panel {
    padding: 0;
    overflow: hidden;
}

.sirs-sync-settings-collapse {
    margin: 0;
}

.sirs-sync-settings-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.sirs-sync-settings-summary::-webkit-details-marker {
    display: none;
}

.sirs-sync-settings-summary::after {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid #71717a;
    border-bottom: 2px solid #71717a;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.sirs-sync-settings-collapse[open] .sirs-sync-settings-summary::after {
    transform: rotate(-135deg);
    margin-top: 0.25rem;
}

.sirs-sync-settings-summary-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #18181b;
}

.sirs-sync-settings-summary-hint {
    margin-left: auto;
    margin-right: 0.75rem;
    font-size: 0.82rem;
    color: #71717a;
}

.sirs-sync-settings-body {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid #e4e4e7;
}

.sirs-sync-settings {
    margin-top: 1rem;
    padding-top: 0;
    border-top: 0;
}

.sirs-sync-settings-title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #18181b;
}

.sirs-sync-settings-grid {
    display: grid;
    gap: 1rem;
}

.sirs-sync-settings-actions {
    margin-top: 0.85rem;
}

.sirs-sync-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sirs-sync-btn-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.sirs-sync-actions .btn.is-syncing .sirs-sync-btn-icon {
    animation: sirs-sync-spin 0.8s linear infinite;
}

@keyframes sirs-sync-spin {
    to {
        transform: rotate(360deg);
    }
}

.sirs-sync-actions .btn[disabled] {
    opacity: 0.75;
    cursor: wait;
}

.dashboard-activity-table th,
.dashboard-activity-table td {
    padding: 8px 8px;
    font-size: 0.82rem;
    line-height: 1.35;
    vertical-align: top;
}

.dashboard-activity-table th {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.78rem;
}

.table-panel .dashboard-activity-table tbody tr:last-child td {
    border-bottom: 0;
}

.hui-col-center {
    text-align: center;
}

.error-module-panel {
    text-align: center;
    padding: 3rem 1.5rem;
}

.error-module-title {
    margin: 0.75rem 0 0.5rem;
    font-size: 1.75rem;
    color: #18181b;
}

.error-module-text {
    margin: 0 auto 1.5rem;
    max-width: 36rem;
    color: #71717a;
}

.error-module-hint {
    margin: -0.75rem auto 1.5rem;
    max-width: 36rem;
    font-size: 0.875rem;
}

.error-badge--forbidden {
    background: #fef2f2;
    color: #b91c1c;
}

.error-forbidden-panel .error-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.cms-panel.file-media-app.panel {
    gap: 0;
}

.file-media-app {
    padding: 0;
    overflow: hidden;
    position: relative;
}

.file-media-toolbar,
.file-media-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.file-media-toolbar {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #e4e4e7;
    flex-wrap: wrap;
}

.file-media-toolbar-left,
.file-media-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 100%;
    min-width: 0;
}

.file-media-title {
    margin: 0;
    font-size: 1.25rem;
}

.file-media-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.file-media-search svg {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #a1a1aa;
    pointer-events: none;
}

.file-media-search input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 2rem;
    box-sizing: border-box;
}

.file-media-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 640px;
}

.file-media-sidebar {
    border-right: 1px solid #e4e4e7;
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.file-media-tree {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow: auto;
    font-size: 0.8rem;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.file-media-tree-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 0.35rem;
    padding: 0.2rem 0.45rem;
    color: #3f3f46;
    cursor: pointer;
    line-height: 1.35;
    font-size: 0.8rem;
}

.file-media-tree-item.is-active,
.file-media-tree-item:hover {
    background: #ecfeff;
    color: #0f766e;
}

.file-media-usage {
    margin-top: auto;
    font-size: 0.85rem;
    color: #71717a;
}

.file-media-usage-bar {
    height: 6px;
    background: #e4e4e7;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.file-media-usage-bar span {
    display: block;
    height: 100%;
    background: #14b8a6;
}

.file-media-main-head {
    padding: 0.65rem 0.85rem 0.35rem;
}

.file-media-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.file-media-name-btn {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.file-media-name-btn:hover {
    color: #006fee;
    text-decoration: underline;
}

.file-media-toolbar-right {
    display: none;
}

.file-media-view-toggle {
    display: inline-flex;
    border: 1px solid #e4e4e7;
    border-radius: 0.65rem;
    overflow: hidden;
    background: #fafafa;
}

.file-media-view-btn {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #14b8a6;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.file-media-view-btn svg {
    width: 18px;
    height: 18px;
}

.file-media-view-btn.is-active {
    background: #14b8a6;
    color: #fff;
}

.file-media-add-btn,
.file-media-sidebar-btn {
    width: 100%;
    justify-content: center;
}

.file-media-tree-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}

.file-media-tree-children {
    margin-left: 0.85rem;
}

.file-media-tree-row[data-depth="0"]::before,
.file-media-tree-row[data-depth="0"]::after {
    display: none;
}

.file-media-tree-row:not([data-depth="0"])::before {
    content: '';
    position: absolute;
    left: -0.85rem;
    top: 0;
    bottom: 50%;
    border-left: 1px dotted #cbd5e1;
    pointer-events: none;
}

.file-media-tree-row:not([data-depth="0"])::after {
    content: '';
    position: absolute;
    left: -0.85rem;
    top: 50%;
    width: 0.85rem;
    border-top: 1px dotted #cbd5e1;
    pointer-events: none;
}

.file-media-tree-children > .file-media-tree-row:last-child::before {
    bottom: 50%;
}

.file-media-tree-row .file-media-tree-item {
    flex: 1;
}

.file-media-table-shell,
.file-media-table-shell .hui-table-scroll {
    width: 100%;
}

.file-media-main {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.file-media-main-head {
    padding: 0.65rem 0.85rem 0.35rem;
}

.file-media-breadcrumb-wrap {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: stretch;
}

.file-media-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    font-size: 0.85rem;
    color: #71717a;
    width: 100%;
    min-height: 38px;
    padding: 0.45rem 0.65rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.55rem;
    background: #fafafa;
    box-sizing: border-box;
}

.file-media-breadcrumb-link {
    border: 0;
    background: transparent;
    color: #0f766e;
    font-weight: 600;
    cursor: pointer;
    padding: 0.1rem 0.2rem;
    border-radius: 0.3rem;
}

.file-media-breadcrumb-link:hover {
    background: #ecfeff;
    text-decoration: underline;
}

.file-media-breadcrumb-sep {
    color: #a1a1aa;
    user-select: none;
}

.file-media-breadcrumb-current {
    color: #18181b;
    font-weight: 700;
}

.hui-context-menu {
    position: fixed;
    z-index: 1200;
    min-width: 160px;
    padding: 0.3rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.55rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.hui-context-menu[hidden] {
    display: none !important;
}

.hui-context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 0.4rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    color: #3f3f46;
    cursor: pointer;
}

.hui-context-menu-item:hover {
    background: #f4f4f5;
}

.hui-context-menu-item.is-danger {
    color: #dc2626;
}

.hui-context-menu-item.is-danger:hover {
    background: #fef2f2;
}

.file-media-table th:nth-child(4),
.file-media-table td:nth-child(4) {
    width: 10.5rem;
    min-width: 10.5rem;
    white-space: nowrap;
}

.file-media-table th:nth-child(2),
.file-media-table td:nth-child(2) {
    width: 5.5rem;
    white-space: nowrap;
}

.file-media-table th:nth-child(3),
.file-media-table td:nth-child(3) {
    width: 4.5rem;
    white-space: nowrap;
}

.file-media-tree-menu {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: #71717a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-media-tree-menu svg {
    width: 14px;
    height: 14px;
}

.file-media-tree-menu:hover {
    background: #f4f4f5;
    color: #3f3f46;
}
.file-media-grid-view {
    flex: 1;
    min-height: 0;
}

.file-media-list-view {
    padding-left: 0.85rem;
    max-height: calc(100vh - 240px);
    overflow: hidden;
}

.file-media-list-view .hui-table-scroll {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.file-media-table .hui-col-actions .hui-icon-btn {
    width: 24px;
    height: 24px;
}

.file-media-table .hui-col-actions .hui-icon-btn svg {
    width: 14px;
    height: 14px;
}

.file-media-lazy-hint td {
    color: #71717a;
    font-size: 0.8rem;
    padding-top: 4px !important;
    padding-bottom: 8px !important;
}

.file-media-panel-drop {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background: rgba(20, 184, 166, 0.12);
    border: 2px dashed #14b8a6;
    pointer-events: none;
}

.file-media-panel-drop[hidden] {
    display: none !important;
}

.file-media-panel-drop p {
    margin: 0;
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-radius: 0.65rem;
    color: #0f766e;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.file-media-app.is-dragover .file-media-panel-drop {
    display: grid !important;
}

.file-media-table-shell {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.file-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    gap: 0.65rem;
    padding: 0.65rem 0.85rem 0.85rem;
}

.file-media-grid-card {
    width: 120px;
    border: 1px solid #e4e4e7;
    border-radius: 0.65rem;
    background: #fff;
    padding: 0.45rem;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.file-media-grid-card img,
.file-media-grid-icon {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.45rem;
    background: #f4f4f5;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.file-media-grid-name,
.file-media-grid-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-media-grid-meta {
    color: #71717a;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.file-media-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #71717a;
    cursor: pointer;
    background: #fafafa;
}

.file-media-dropzone.is-dragover {
    border-color: #14b8a6;
    background: #ecfeff;
}

.file-media-upload-preview {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
    display: grid;
    gap: 0.5rem;
}

.file-media-upload-preview[hidden] {
    display: none !important;
}

.file-media-preview-meta {
    color: #71717a;
    margin: 0;
}

.file-media-upload-image,
.file-media-preview-image {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #f4f4f5;
}

.file-media-upload-progress-bar {
    height: 8px;
    background: #e4e4e7;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.file-media-upload-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: #14b8a6;
    transition: width 0.2s ease;
}

.file-media-path-copy {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.file-media-path-copy .hui-input {
    flex: 1;
}

.file-media-preview-body iframe {
    width: 100%;
    min-height: 480px;
    border: 0;
}

.hui-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: grid;
    place-items: center;
    z-index: 1200;
    padding: 1rem;
}

.hui-modal-backdrop[hidden] {
    display: none !important;
}

.hui-modal {
    width: min(100%, 520px);
    background: #fff;
    border-radius: 0.85rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.hui-modal-lg {
    width: min(100%, 860px);
}

.hui-modal-head,
.hui-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e4e4e7;
}

.hui-modal-foot {
    border-bottom: 0;
    border-top: 1px solid #e4e4e7;
    justify-content: flex-end;
}

.hui-modal-body {
    padding: 1rem;
}

.hui-toast-host {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1300;
    display: grid;
    gap: 0.5rem;
}

.hui-toast {
    min-width: 240px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    color: #fff;
    background: #27272a;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.hui-toast-success { background: #059669; }
.hui-toast-error { background: #dc2626; }
.hui-toast-info { background: #0284c7; }

.hui-textarea-code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.85rem;
}

.integration-api-links {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.integration-api-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e4e4e7;
}

.integration-api-link-row:last-child {
    border-bottom: 0;
}

.integration-api-url {
    display: block;
    margin-top: 0.25rem;
    color: #0f766e;
    word-break: break-all;
}

.quill-media-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding-bottom: 0.35rem;
}

.quill-media-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(70vh, 560px);
}

.quill-media-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.quill-media-upload {
    margin-bottom: 0.5rem;
}

.quill-media-search {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.quill-media-search input {
    width: 100%;
    padding-left: 2rem;
}

.quill-media-search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a1a1aa;
    font-size: 0.85rem;
    pointer-events: none;
}

.quill-media-view-toggle {
    display: inline-flex;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    overflow: hidden;
}

.quill-media-view-btn {
    width: 36px;
    height: 32px;
    border: 0;
    background: #fff;
    color: #71717a;
    cursor: pointer;
}

.quill-media-view-btn.is-active {
    background: #14b8a6;
    color: #fff;
}

.quill-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.35rem;
}

.quill-media-grid[hidden],
.quill-media-list[hidden] {
    display: none !important;
}

.quill-media-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quill-media-item {
    border: 1px solid #e4e4e7;
    border-radius: 0.4rem;
    background: #fff;
    padding: 0;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
}

.quill-media-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 1px solid #e4e4e7;
    border-radius: 0.4rem;
    background: #fff;
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    text-align: left;
}

.quill-media-list-item img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 0.3rem;
    flex-shrink: 0;
}

.quill-media-list-text {
    min-width: 0;
    display: grid;
    gap: 0.05rem;
}

.quill-media-list-text strong {
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.quill-media-path {
    display: block;
    color: #71717a;
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quill-media-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.quill-media-item-name,
.quill-media-item .quill-media-path {
    display: block;
    padding: 0 0.25rem;
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quill-media-item-name {
    margin-top: 0.15rem;
    font-weight: 600;
    color: #3f3f46;
}

.quill-media-item .quill-media-path {
    padding-bottom: 0.2rem;
    color: #71717a;
}

.quill-media-lazy-hint {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0.5rem;
    text-align: center;
    color: #71717a;
    font-size: 0.75rem;
}

.ql-toolbar button.ql-imageSelector {
    width: 28px !important;
}

.ql-toolbar button.ql-imageSelector svg {
    display: block;
}

.hui-help {
    display: block;
    margin-top: 0.35rem;
    color: #71717a;
    font-size: 0.85rem;
}

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

@media (max-width: 640px) {
    .file-media-toolbar-left {
        flex-wrap: wrap;
    }

    .file-media-title {
        flex: 1 1 auto;
    }

    .file-media-search {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
    }

    .file-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .file-media-grid-card {
        width: auto;
        padding: 0.35rem;
    }

    .file-media-grid-name,
    .file-media-grid-meta {
        font-size: 0.7rem;
    }
}

.healthiness-page {
    display: grid;
    gap: 1rem;
}

.healthiness-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.healthiness-subtitle {
    margin: 0;
}

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

.health-card {
    padding: 1rem 1.1rem;
    display: grid;
    gap: 0.75rem;
}

.health-card-wide {
    grid-column: 1 / -1;
}

.health-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.health-card-head h3 {
    margin: 0;
    font-size: 1rem;
}

.health-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #f4f4f5;
    color: #52525b;
    font-size: 0.75rem;
    font-weight: 600;
}

.health-badge-ok {
    background: #dcfce7;
    color: #166534;
}

.health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #d4d4d8;
}

.health-dot-ok {
    background: #22c55e;
}

.health-dot-warn {
    background: #fecaca;
}

.health-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.health-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.health-list code {
    font-size: 0.75rem;
    color: #71717a;
}

.health-dl {
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.health-dl > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.health-dl dt {
    margin: 0;
    color: #71717a;
    font-size: 0.85rem;
}

.health-dl dd {
    margin: 0;
    word-break: break-word;
}

.health-dl-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.health-dl-grid > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.55rem;
    background: #fafafa;
}

.health-bar {
    height: 8px;
    background: #e4e4e7;
    border-radius: 999px;
    overflow: hidden;
}

.health-bar span {
    display: block;
    height: 100%;
    background: #14b8a6;
    transition: width 0.25s ease;
}

.health-bar-memory span {
    background: #006fee;
}

.health-bar-storage span {
    background: #f5a524;
}

.health-meta {
    margin: 0;
    font-size: 0.875rem;
}

.health-empty {
    color: #71717a;
    font-size: 0.875rem;
}

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

/* Sidebar menu editor */
.sidebar-menu-panel .panel-head {
    flex-wrap: wrap;
    align-items: flex-start;
}

.sidebar-menu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sidebar-menu-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 16px;
}

.sidebar-menu-tree-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fafafa;
    padding: 8px;
    min-height: 280px;
}

.sidebar-menu-tree,
.sidebar-menu-tree-nested {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu-tree-nested {
    margin-left: 14px;
    padding-left: 10px;
    border-left: 1px dashed #e4e4e7;
}

.sidebar-menu-node + .sidebar-menu-node {
    margin-top: 4px;
}

.sidebar-menu-row {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e4e4e7;
    border-radius: 0.55rem;
    background: #fff;
    overflow: hidden;
    min-height: 34px;
}

.sidebar-menu-row.is-selected {
    border-color: #006fee;
    box-shadow: 0 0 0 1px rgb(0 111 238 / 20%);
}

.sidebar-menu-drag {
    width: 28px;
    border: 0;
    background: #f4f4f5;
    color: #71717a;
    cursor: grab;
    font-size: 0.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.sidebar-menu-select {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 6px 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-menu-label {
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-menu-meta {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.sidebar-menu-row.is-section {
    background: #f4f4f5;
    border-left: 3px solid #a1a1aa;
}

.sidebar-menu-row.is-section .sidebar-menu-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #71717a;
}

.sidebar-menu-row.is-section .sidebar-menu-meta {
    color: #a1a1aa;
}

.sidebar-menu-field-section {
    display: none;
}

.sidebar-menu-editor-layout[data-selected-type="section"] .sidebar-menu-field-section {
    display: block;
}

.sidebar-menu-editor-layout[data-selected-type="section"] .sidebar-menu-field-link,
.sidebar-menu-editor-layout[data-selected-type="section"] .sidebar-menu-field-group,
.sidebar-menu-editor-layout[data-selected-type="section"] .sidebar-menu-field-permission,
.sidebar-menu-editor-layout[data-selected-type="section"] .sidebar-menu-field-icon {
    display: none;
}

.sidebar-menu-delete {
    width: 28px;
    height: 28px;
    margin-right: 4px;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: #71717a;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.sidebar-menu-delete:hover {
    background: #fee7ef;
    color: #f31260;
}

.sidebar-menu-form h4 {
    margin: 0 0 12px;
}

.sidebar-menu-form-empty {
    margin: 0;
}

.sidebar-menu-form-actions {
    margin-top: 12px;
}

.sortable-ghost {
    opacity: 0.45;
}

/* Help page */
.help-panel {
    padding: 0;
    overflow: hidden;
}

.help-markdown {
    padding: 24px 28px;
    line-height: 1.65;
}

.help-markdown h1,
.help-markdown h2,
.help-markdown h3 {
    margin-top: 1.4em;
    margin-bottom: 0.6em;
}

.help-markdown h1:first-child {
    margin-top: 0;
}

.help-markdown pre {
    overflow: auto;
    padding: 12px 14px;
    border-radius: 0.75rem;
    background: #f4f4f5;
}

.help-markdown code {
    font-size: 0.9em;
}

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

.help-markdown th,
.help-markdown td {
    border: 1px solid #e4e4e7;
    padding: 8px 10px;
    text-align: left;
}

.help-contact-banner {
    padding: 14px 28px;
    border-top: 1px solid #e4e4e7;
    background: #eff6ff;
    color: #1e3a8a;
}

.help-contact-banner p {
    margin: 0;
}

@media (max-width: 900px) {
    .sidebar-menu-editor-layout {
        grid-template-columns: 1fr;
    }
}

/* Website menu (nestable) */
.website-menu-panel {
    padding: 0;
    overflow: hidden;
}

.website-menu-layout {
    display: grid;
    grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
    min-height: 520px;
}

.website-menu-source,
.website-menu-tree-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.website-menu-tree-panel {
    border-left: 1px solid #e4e4e7;
}

.website-menu-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e4e4e7;
    background: #fafafa;
}

.website-menu-panel-head h3 {
    margin: 0;
    font-size: 0.95rem;
}

.website-menu-tree-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.website-menu-accordion {
    overflow-y: auto;
    flex: 1;
}

.website-menu-acc-item {
    border-bottom: 1px solid #e4e4e7;
}

.website-menu-acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 0;
    background: #fff;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
}

.website-menu-acc-trigger::after {
    content: '▸';
    color: #71717a;
    font-size: 0.75rem;
}

.website-menu-acc-item.is-open .website-menu-acc-trigger::after {
    content: '▾';
}

.website-menu-acc-panel {
    padding: 0.75rem 1rem 1.25rem;
}

.website-menu-acc-panel .hui-form {
    display: grid;
    gap: 1rem;
}

.website-menu-acc-panel .hui-field {
    gap: 0.45rem;
}

.website-menu-acc-panel .hui-selectbox {
    width: 100%;
}

.website-menu-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.website-menu-acc-panel[hidden] {
    display: none !important;
}

.website-menu-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.website-menu-form-actions-split {
    justify-content: space-between;
}

.website-menu-edit-form {
    display: grid;
    gap: 1rem;
}

.hui-modal-body .hui-form {
    display: grid;
    gap: 1rem;
}

.website-menu-tree-wrap {
    flex: 1;
    overflow: auto;
    padding: 0.75rem 1rem 1rem;
    position: relative;
    min-width: 0;
}

.website-menu-tree-wrap .dd {
    width: 100%;
    max-width: 100%;
}

.website-menu-node {
    position: relative;
}

.website-menu-node > .dd-list {
    margin-left: 1.1rem;
    padding-left: 0.85rem;
    border-left: 1px dotted #cbd5e1;
}

.website-menu-panel .dd-item > button[data-action] {
    float: none;
    position: static;
    top: auto;
    left: auto;
    margin: 0;
}

.website-menu-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.3rem 0.45rem 0.3rem 0;
    width: 100%;
    box-sizing: border-box;
}

.website-menu-tree-btn {
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    width: 14px;
    height: 14px;
    padding: 0;
    line-height: 1;
    font-size: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.website-menu-grip {
    flex: 0 0 34px;
    align-self: stretch;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    background: #14b8a6;
    color: #fff;
    border-radius: 0.5rem 0 0 0.5rem;
    user-select: none;
    cursor: grab;
    padding: 0.2rem 0;
}

.website-menu-grip-icon {
    font-size: 0.65rem;
    letter-spacing: -1px;
    line-height: 1;
}

.website-menu-grip .website-menu-tree-btn[hidden] {
    display: none !important;
}

.website-menu-tree-wrap.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.website-menu-empty {
    margin: 1rem 0;
}

.website-menu-panel .dd-handle {
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: #fff;
    font-weight: 600;
    cursor: grab;
    height: auto;
    margin: 5px 0;
    padding: 0;
    box-sizing: border-box;
}

.website-menu-panel .dd-handle:hover {
    border-color: #14b8a6;
}

.website-menu-panel .dd-handle:hover .website-menu-label {
    color: #0f766e;
}

.website-menu-tools {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0.35rem;
    z-index: 5;
}

.website-menu-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    border: 1px solid #e4e4e7;
    background: #fff;
    color: #3f3f46;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.website-menu-tool-btn:hover {
    border-color: #cbd5e1;
    background: #fafafa;
}

.website-menu-tool-pos {
    border-color: #99f6e4;
    background: #ecfeff;
    color: #0f766e;
}

.website-menu-tool-pos.is-right {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.website-menu-tool-delete {
    width: 24px;
    min-width: 24px;
    padding: 0;
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
    font-size: 0.85rem;
}

.website-menu-tool-delete:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.website-menu-label {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: 0.15rem 0.25rem;
    line-height: 1.35;
    word-break: break-word;
    white-space: normal;
}

.website-menu-panel .dd-placeholder {
    border-color: #14b8a6;
    background: #ecfeff;
}

@media (max-width: 960px) {
    .website-menu-layout {
        grid-template-columns: 1fr;
    }

    .website-menu-tree-panel {
        border-left: 0;
        border-top: 1px solid #e4e4e7;
    }

    .website-menu-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Quill media picker dropzone */
.quill-media-dropzone {
    display: block;
    width: 100%;
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 1.1rem 1rem;
    text-align: center;
    color: #71717a;
    cursor: pointer;
    background: #fafafa;
    margin-bottom: 0.65rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.quill-media-dropzone.is-dragover {
    border-color: #14b8a6;
    background: #ecfeff;
    color: #0f766e;
}

.quill-media-dropzone.is-uploading {
    opacity: 0.7;
    pointer-events: none;
}

.quill-media-dropzone-inner {
    display: grid;
    gap: 0.2rem;
    justify-items: center;
}

.quill-media-dropzone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: 1rem;
    font-weight: 700;
}

.quill-media-dropzone-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3f3f46;
}

.quill-media-dropzone-hint {
    margin: 0;
    font-size: 0.72rem;
    color: #a1a1aa;
}

/* Doctor Roster */
.roster-page {
    display: grid;
    gap: 16px;
}

.roster-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
}

.roster-toolbar-fields {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 12px;
    min-width: 0;
}

.roster-filter-field {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.roster-filter-field .hui-label {
    font-size: 0.72rem;
    margin-bottom: 4px;
}

.roster-filter-field .hui-input {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.875rem;
}

.roster-toolbar-meta {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
    padding-bottom: 8px;
}

.roster-board-wrap {
    padding: 0;
    overflow: hidden;
}

.roster-empty {
    padding: 28px 20px;
    margin: 0;
}

.roster-scroll {
    overflow: auto;
    max-height: min(72vh, 860px);
}

.roster-board {
    min-width: 860px;
}

.roster-head {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(110px, 1fr));
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.roster-head-corner,
.roster-head-day {
    padding: 10px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #52525b;
}

.roster-head-day {
    text-align: center;
    border-left: 1px solid #f4f4f5;
}

.roster-body {
    display: grid;
    grid-template-columns: 56px 1fr;
}

.roster-times {
    border-right: 1px solid var(--border);
    background: #fafafa;
}

.roster-time-label {
    height: 36px;
    padding: 0 8px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 0.64rem;
    font-weight: 600;
    color: #71717a;
    transform: translateY(-6px);
}

.roster-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
}

.roster-day-column {
    position: relative;
    border-left: 1px solid #f4f4f5;
}

.roster-day-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.roster-grid-line {
    height: 36px;
    border-bottom: 1px solid #f4f4f5;
}

.roster-day-events {
    position: relative;
}

.roster-event {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 1;
    border-radius: 6px;
    background: var(--roster-bg, #fff);
    border: 1px solid var(--roster-border, #e4e4e7);
    border-left-width: 2px;
    box-shadow: none;
    padding: 2px 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 0;
    line-height: 1.15;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.roster-event:hover,
.roster-event:focus-visible {
    z-index: 200;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.roster-event[hidden] {
    display: none !important;
}

.roster-event-poli {
    display: block;
    width: 100%;
    flex-shrink: 0;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--roster-text, #0f766e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roster-event-doctors {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.roster-event-doctor {
    display: block;
    width: 100%;
    font-size: 0.62rem;
    font-weight: 700;
    color: #18181b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roster-event-doctor[hidden] {
    display: none !important;
}

.roster-event-time {
    display: block;
    width: 100%;
    flex-shrink: 0;
    font-size: 0.52rem;
    color: #71717a;
}

.roster-detail-modal .modal-card {
    width: min(92vw, 480px);
    max-height: min(86vh, 640px);
    overflow: auto;
}

.roster-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.roster-detail-label {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.roster-detail-poli {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    color: #18181b;
}

.roster-detail-close {
    flex-shrink: 0;
}

.roster-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f4f5;
}

.roster-detail-meta div {
    display: grid;
    gap: 4px;
}

.roster-detail-meta dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.roster-detail-meta dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #18181b;
}

.roster-detail-doctors-wrap h3 {
    margin: 0 0 10px;
    font-size: 0.9rem;
}

.roster-detail-doctors {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.roster-detail-doctors li {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fafafa;
    border: 1px solid #ececec;
    font-size: 0.92rem;
    font-weight: 600;
    color: #27272a;
}

body.roster-modal-open {
    overflow: hidden;
}

.roster-event--c0 { --roster-bg: #dbeafe; --roster-text: #1d4ed8; --roster-border: #93c5fd; }
.roster-event--c1 { --roster-bg: #dcfce7; --roster-text: #15803d; --roster-border: #86efac; }
.roster-event--c2 { --roster-bg: #fef9c3; --roster-text: #a16207; --roster-border: #fde047; }
.roster-event--c3 { --roster-bg: #fce7f3; --roster-text: #be185d; --roster-border: #f9a8d4; }
.roster-event--c4 { --roster-bg: #ede9fe; --roster-text: #6d28d9; --roster-border: #c4b5fd; }
.roster-event--c5 { --roster-bg: #ffedd5; --roster-text: #c2410c; --roster-border: #fdba74; }
.roster-event--c6 { --roster-bg: #ccfbf1; --roster-text: #0f766e; --roster-border: #5eead4; }
.roster-event--c7 { --roster-bg: #e0e7ff; --roster-text: #4338ca; --roster-border: #a5b4fc; }
.roster-event--c8 { --roster-bg: #fee2e2; --roster-text: #b91c1c; --roster-border: #fca5a5; }
.roster-event--c9 { --roster-bg: #f3e8ff; --roster-text: #7e22ce; --roster-border: #d8b4fe; }
.roster-event--c10 { --roster-bg: #ecfccb; --roster-text: #4d7c0f; --roster-border: #bef264; }
.roster-event--c11 { --roster-bg: #cffafe; --roster-text: #0e7490; --roster-border: #67e8f9; }

@media (max-width: 860px) {
    .stat-grid-dashboard .stat-card {
        padding: 14px;
    }

    .stat-grid-dashboard .stat-value {
        font-size: 1.35rem;
        margin: 6px 0 8px;
    }

    .stat-grid-dashboard .stat-label {
        font-size: 0.78rem;
    }

    .roster-scroll {
        max-height: none;
    }

    .roster-toolbar {
        padding: 10px 12px;
        gap: 8px;
    }

    .roster-toolbar-fields {
        gap: 8px;
    }

    .roster-toolbar-meta {
        display: none;
    }
}

.api-log-panel .panel-head {
    align-items: baseline;
    gap: 0.75rem;
}

.api-log-filter-form {
    margin-bottom: 0.75rem;
}

.api-log-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
}

.api-log-filter-row .hui-field {
    flex: 1 1 130px;
    min-width: 110px;
    margin: 0;
}

.api-log-filter-row .hui-label {
    font-size: 0.72rem;
}

.api-log-filter-row .hui-input {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
}

.api-log-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding-bottom: 1px;
}

.account-grid-compact {
    gap: 0.65rem 0.85rem;
}

.api-log-table-wrap {
    overflow-x: auto;
}

.api-log-table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.78rem;
}

.api-log-table th,
.api-log-table td {
    padding: 0.35rem 0.45rem;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.api-log-table th:nth-child(1),
.api-log-table td:nth-child(1) { width: 3.5rem; }
.api-log-table th:nth-child(2),
.api-log-table td:nth-child(2) { width: 6.5rem; }
.api-log-table th:nth-child(3),
.api-log-table td:nth-child(3) { width: 14rem; }
.api-log-table th:nth-child(4),
.api-log-table td:nth-child(4) { width: 7rem; }
.api-log-table th:nth-child(5),
.api-log-table td:nth-child(5) { width: 11rem; }
.api-log-table th:nth-child(6),
.api-log-table td:nth-child(6) { width: 7rem; }
.api-log-table th:nth-child(7),
.api-log-table td:nth-child(7) { width: 4.5rem; }
.api-log-table th:nth-child(8),
.api-log-table td:nth-child(8) { width: 4.5rem; }
.api-log-table th:nth-child(9),
.api-log-table td:nth-child(9) { width: 9rem; }

.api-log-table .api-log-activity,
.api-log-table .api-log-path {
    white-space: normal;
    word-break: break-word;
}

.api-log-tag {
    display: inline-block;
    max-width: 100%;
    padding: 0.08rem 0.35rem;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 600;
}

.http-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.http-status-badge--success {
    color: #166534;
    background: #dcfce7;
}

.http-status-badge--info {
    color: #1d4ed8;
    background: #dbeafe;
}

.http-status-badge--warn {
    color: #92400e;
    background: #fef3c7;
}

.http-status-badge--danger {
    color: #991b1b;
    background: #fee2e2;
}

.http-status-badge--muted {
    color: #475569;
    background: #e2e8f0;
}

.sirs-stats-urls {
    margin-top: 1rem;
}

.sirs-stats-url-list {
    display: grid;
    gap: 0.65rem;
}

.sirs-stats-url-item {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    background: #f8fafc;
}

.sirs-stats-url-item strong {
    font-size: 0.88rem;
}

.sirs-stats-url-item code {
    font-size: 0.78rem;
    word-break: break-all;
}