:root {
    --cmms-primary: #276cda;
    --cmms-primary-hover: #1f5dc0;
    --cmms-bg: #ecf0f3;
    --cmms-surface: #ffffff;
    --cmms-surface-2: #f7f9fc;
    --cmms-text: #0f1d38;
    --cmms-muted: #677483;
    --cmms-focus: #0a58ca;
    --cmms-border: #d8e0ea;
    --cmms-hover: #eef4ff;
    --cmms-input-bg: #ffffff;
    --cmms-notification-bg: #f5f8fd;
    --cmms-text-on-primary: #ffffff;
}

:root[data-theme-color="blue"] {
    --cmms-primary: #276cda;
    --cmms-primary-hover: #1f5dc0;
    --cmms-focus: #0a58ca;
}

:root[data-theme-color="green"] {
    --cmms-primary: #1f8f63;
    --cmms-primary-hover: #17734f;
    --cmms-focus: #166a49;
}

:root[data-theme-color="violet"] {
    --cmms-primary: #6f56d9;
    --cmms-primary-hover: #5c45c0;
    --cmms-focus: #4e39ab;
}

:root[data-theme-color="amber"] {
    --cmms-primary: #b97300;
    --cmms-primary-hover: #965d00;
    --cmms-focus: #7d4d00;
}

:root[data-theme-color="dark"] {
    --cmms-primary: #5f8ff0;
    --cmms-primary-hover: #4f7fdf;
    --cmms-bg: #0f1724;
    --cmms-surface: #172235;
    --cmms-surface-2: #1f2d45;
    --cmms-text: #e8eef9;
    --cmms-muted: #b9c3d6;
    --cmms-focus: #8ab4ff;
    --cmms-border: #33445f;
    --cmms-hover: #253754;
    --cmms-input-bg: #1a2740;
    --cmms-notification-bg: #1c2b44;
    --cmms-text-on-primary: #ffffff;
}

html,
body {
    background: var(--cmms-bg);
    color: var(--cmms-text);
}

#app,
.section.is-main-section,
.container,
.container-fluid {
    background: var(--cmms-bg);
    color: var(--cmms-text);
}

nav.navbar {
    border-top-color: var(--cmms-primary) !important;
}

#navbar-main,
#navbar-main .navbar-item,
#navbar-main .navbar-link,
#navbar-main .navbar-dropdown,
#navbar-main .navbar-dropdown .navbar-item {
    background-color: var(--cmms-surface) !important;
    color: var(--cmms-text) !important;
}

#navbar-main .navbar-dropdown .navbar-item:hover {
    background-color: var(--cmms-surface-2) !important;
}

.aside,
.aside.is-placed-left,
.aside .aside-tools,
.aside .menu,
.aside .menu-list,
.aside .menu-list ul {
    background: var(--cmms-surface) !important;
    color: var(--cmms-text) !important;
}

.aside .menu-list ul,
.aside .menu-list ul li,
.aside .menu-list ul li a,
.aside .menu-list ul li a span {
    background-color: var(--cmms-surface) !important;
    color: var(--cmms-text) !important;
}

.aside .aside-tools-label,
.aside .menu-label,
.aside .menu-item-label,
.aside .menu-list a,
.aside .menu-list a span,
.aside .menu-list li a {
    color: var(--cmms-text) !important;
}

.aside .menu-list a:hover,
.aside .menu-list a.is-active {
    background-color: var(--cmms-hover) !important;
    color: var(--cmms-primary) !important;
}

.aside .menu-list li>a.has-icon,
.aside .menu-list li>a.has-icon.router-link-active,
.aside .menu-list li>a.has-icon.is-active {
    background-color: var(--cmms-surface) !important;
    color: var(--cmms-text) !important;
}

.aside .menu-list li>a.has-icon:hover,
.aside .menu-list li>a.has-icon.router-link-active:hover,
.aside .menu-list li>a.has-icon.is-active:hover {
    background-color: var(--cmms-hover) !important;
    color: var(--cmms-primary) !important;
}

.aside .menu-list li>a.has-icon .icon,
.aside .menu-list li>a.has-icon .menu-item-label,
.aside .menu-list li>a.has-icon .icon i {
    color: inherit !important;
}

.aside .menu-list ul li a {
    background-color: transparent !important;
}

.aside .menu-list ul li a:hover,
.aside .menu-list ul li a.is-active {
    background-color: var(--cmms-hover) !important;
    color: var(--cmms-primary) !important;
}

.footer,
footer.footer,
.footer .container,
.footer .container-fluid,
.footer .level,
.footer .level-item,
.footer a {
    background: var(--cmms-surface) !important;
    color: var(--cmms-text) !important;
    border-top: 1px solid var(--cmms-border);
}

.notification,
div.notification {
    background-color: var(--cmms-notification-bg) !important;
    color: var(--cmms-text) !important;
    border: 1px solid var(--cmms-border);
}

.notification.is-primary,
.notification.is-info,
.notification.is-success,
.notification.is-warning,
.notification.is-danger {
    background-color: var(--cmms-hover) !important;
    color: var(--cmms-text) !important;
    border: 1px solid color-mix(in srgb, var(--cmms-primary) 35%, var(--cmms-border));
}

.menu-list a:hover,
.menu-list a.is-active,
a,
.card-header-title .icon {
    color: var(--cmms-primary);
}

.card,
.card-header,
.card-content,
.card-footer,
.box,
.modal-card,
.modal-card-head,
.modal-card-body,
.modal-card-foot {
    background-color: var(--cmms-surface) !important;
    color: var(--cmms-text) !important;
}

.card-header-title,
.card .title,
.card .subtitle,
.card .content,
.title,
.subtitle,
p,
label,
th,
td,
.heading {
    color: var(--cmms-text) !important;
}

.table,
.table thead,
.table tfoot,
.table tbody,
.table tr,
.table th,
.table td {
    background-color: var(--cmms-surface) !important;
    color: var(--cmms-text) !important;
    border-color: var(--cmms-border) !important;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: var(--cmms-surface-2) !important;
}

.table.is-hoverable tbody tr:hover {
    background-color: var(--cmms-hover) !important;
}

.input,
.select select,
.textarea {
    background-color: var(--cmms-input-bg) !important;
    color: var(--cmms-text) !important;
    border-color: var(--cmms-border) !important;
}

.button,
button.button,
.button.is-light,
.button-is-active,
.button.is-active,
.button[aria-pressed="true"] {
    background-color: var(--cmms-surface) !important;
    color: var(--cmms-text) !important;
    border-color: var(--cmms-border) !important;
}

.button:hover,
button.button:hover,
.button.is-light:hover,
.button-is-active:hover,
.button.is-active:hover,
.button[aria-pressed="true"]:hover {
    background-color: var(--cmms-hover) !important;
    color: var(--cmms-primary) !important;
    border-color: color-mix(in srgb, var(--cmms-primary) 35%, var(--cmms-border)) !important;
}

.button.is-primary,
.tag.is-primary,
.hero.is-primary {
    background-color: var(--cmms-primary) !important;
    border-color: var(--cmms-primary) !important;
    color: var(--cmms-text-on-primary) !important;
}

.button.is-primary:hover,
.button.is-primary:focus {
    background-color: var(--cmms-primary-hover) !important;
    border-color: var(--cmms-primary-hover) !important;
}

.input:focus,
.select select:focus,
.textarea:focus,
.button:focus,
.button:focus-visible,
a:focus,
a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cmms-focus) 55%, #ffffff);
    outline-offset: 2px;
}

.theme-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-switcher .theme-label {
    font-size: 0.875rem;
    color: var(--cmms-muted);
    font-weight: 600;
}

@media (max-width: 768px) {
    html {
        font-size: 17px;
    }

    .navbar-item,
    .button,
    .input,
    .select select,
    .textarea,
    .menu-list a {
        min-height: 44px;
    }

    .section.is-main-section,
    .card-content {
        padding: 0.9rem;
    }

    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .navbar .control .input {
        max-width: 180px;
    }
}