body {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

:root {
    --brand-primary: #8aa7a1;
    --accent-warm: #caa97a;
    --bg-cream: #f6efe0;
    --surface-cream: #fbf6ec;
    --card-border: #5f4e3d1f;
    --card-radius: .9rem;
    --card-padding: 1rem;
    --app-text: #2f2a21;
    --muted: #7c7163;
    --success: #4caf91;
    --danger: #c53d3d;
    --link-color: #4b7f73;
    --link-hover: #2f5e54;
    --link-visited: #6a8f86
}

body {
    background: linear-gradient(180deg, var(--bg-cream) 0%, #f3ead6 100%);
    color: var(--app-text)
}

a, .card a, .list-group a, .nav-link {
    color: var(--link-color) !important;
    text-decoration: none
}

a:hover, a:focus, .card a:hover, .card a:focus, .nav-link:hover, .nav-link:focus {
    color: var(--link-hover) !important;
    text-decoration: underline !important
}

a:visited, .card a:visited, .nav-link:visited {
    color: var(--link-visited) !important
}

.card {
    background: var(--surface-cream);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 28px #2e22160f
}

.card .card-body {
    padding: var(--card-padding)
}

.card .card-header {
    background: transparent;
    padding: calc(var(--card-padding) * 0.75) var(--card-padding);
    border-bottom: none;
    color: var(--app-text);
    font-weight: 700
}

.card .card-topline {
    height: 6px;
    background: linear-gradient(90deg, #c53d3df2, #c53d3d80);
    border-bottom: 1px solid #00000008
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: .5rem
}

.card-title-row h5 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--app-text);
    text-shadow: none
}

.card-title-row .status-badge {
    margin-left: auto;
    background: #d9eedf;
    color: #1f513e;
    padding: .35rem .6rem;
    border-radius: 1rem;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid #1f513e0f
}

.card-meta {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    color: var(--muted);
    margin-top: .45rem;
    font-size: .95rem
}

.card-meta .meta-item {
    display: flex;
    align-items: center;
    gap: .45rem
}

.progress-hero {
    height: 8px;
    background: #efebe6;
    border-radius: 99px;
    overflow: hidden;
    margin: .65rem 0 .85rem
}

.progress-hero > .bar {
    height: 100%;
    background: linear-gradient(90deg, #b83b3b, #e04b3f);
    border-radius: 99px;
    box-shadow: inset 0 -2px 6px #0000000f
}

.pill {
    display: inline-block;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: #fff9;
    border: 1px solid #0000000a;
    font-size: .85rem;
    color: var(--app-text);
    margin-right: .4rem
}

.card-section {
    background: #f5f3eecc;
    border-radius: .5rem;
    padding: .75rem;
    margin-top: .6rem;
    border: 1px solid #00000005
}

.stats-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: .75rem
}

.stats-grid .col {
    background: transparent
}

h5 {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
    color: var(--app-text) !important;
    position: relative !important;
    font-family: Arial, Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.h5-glow {
    text-shadow: 0 6px 16px #8aa7a124
}

.h5-glow-strong {
    text-shadow: 0 8px 28px #8aa7a138,
    0 0 32px #8aa7a11a
}

@keyframes h5-pulse {
    0% {
        text-shadow: 0 6px 12px #8aa7a11a, 0 0 0 #8aa7a100
    }

    50% {
        text-shadow: 0 10px 30px #8aa7a147, 0 0 36px #8aa7a124
    }

    100% {
        text-shadow: 0 6px 12px #8aa7a11a, 0 0 0 #8aa7a100
    }
}

.h5-glow-pulse {
    animation: h5-pulse 3s ease-in-out infinite
}

@media (prefers-reduced-motion: reduce) {
    .h5-glow-pulse {
        animation: none !important
    }
}

.h5-glow-accent-1 {
    text-shadow: 0 8px 22px #8aa7a138, 0 0 28px #8aa7a11f
}

.h5-glow-accent-2 {
    text-shadow: 0 8px 22px #caa97a38, 0 0 28px #caa97a1f
}

.h5-glow-accent-3 {
    text-shadow: 0 8px 22px #e04b3f38, 0 0 28px #e04b3f1f
}

.h5-glow-accent-4 {
    text-shadow: 0 8px 22px #cdb3ff38, 0 0 28px #cdb3ff1f
}

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

    .card-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem
    }
}

:root[data-bs-theme='dark'] {
    --brand-primary: #66b2ff;
    --app-bg: linear-gradient(180deg, #07101a 0%, #081422 100%);
    --app-surface: #0f1724;
    --card-bg: #ffffff08;
    --card-border: #ffffff0f;
    --app-text: #e6eef8;
    --muted: #9aa6b2;
    --elev-1: 0 10px 30px #02061799
}

html, body {
    height: 100%
}

body {
    background: var(--app-bg);
    color: var(--app-text);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .25s ease, color .25s ease
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 10% 10%, #00000003 0, transparent 30%), radial-gradient(circle at 90% 90%, #ffffff04 0, transparent 30%);
    mix-blend-mode: overlay;
    opacity: .6
}

.main-container {
    padding-top: 1.25rem;
    padding-bottom: 2rem
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1);
    transition: box-shadow .15s ease, background-color .2s ease, border-color .15s ease;
    overflow: hidden
}

.card:hover {
    box-shadow: 0 14px 36px #02061714;
    border-color: #0f172a14
}

.card .card-header {
    background: transparent;
    border-bottom: 1px solid #00000008;
    padding: .75rem 1rem;
    font-weight: 600;
    color: var(--app-text)
}

.card .card-body {
    background: transparent;
    color: var(--app-text)
}

.navbar {
    background: linear-gradient(180deg, #fff6, #fff3);
    border-bottom: 1px solid #0000000a;
    transition: background-color .25s ease, border-color .25s ease
}

:root[data-bs-theme='dark'] .navbar {
    background: linear-gradient(180deg, #ffffff05, #ffffff03);
    border-bottom: 1px solid #ffffff08
}

.navbar {
    background: var(--app-surface);
    border-bottom: 1px solid var(--card-border)
}

.navbar .navbar-brand, .navbar .nav-link, .navbar .dropdown-item, .navbar .navbar-text {
    color: var(--app-text) !important
}

.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
    color: var(--brand-primary) !important;
    background: transparent
}

.navbar .dropdown-menu {
    background: var(--app-surface);
    border: 1px solid var(--card-border);
    box-shadow: none
}

.navbar .navbar-toggler {
    border-color: var(--card-border)
}

.navbar .navbar-toggler-icon {
    filter: none !important
}

.navbar .nav-link {
    padding: 0;
}

.navbar .nav-link.active {
    font-weight: 400 !important;
    background: var(--brand-primary) !important;
    border-radius: 8px;
    outline: 1px solid #999999;
    color: white!important;
}

:root[data-bs-theme='dark'] .navbar .nav-link.active {
    background: #66b2ff0a !important
}

@media (min-width: 768px) {
    .navbar .navbar-nav.me-auto {
        display: flex !important;
        gap: 0;
        align-items: stretch;
        width: auto
    }

    .navbar .navbar-nav.me-auto .nav-item {
        flex: 1 1 0;
        text-align: center
    }

    .navbar .navbar-nav.me-auto .nav-link {
        display: block;
        width: 100%;
        white-space: nowrap
    }
}

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 6px 16px #0d6efd1f;
    transition: background-color .15s ease, box-shadow .15s ease
}

/* Sicherstellen, dass secondary buttons weißen Text haben */
.btn.btn-secondary,
a.btn.btn-secondary,
button.btn.btn-secondary,
.btn-secondary {
    color: #fff !important;
}

.btn-primary:active {
    box-shadow: inset 0 3px 8px #00000014, 0 4px 10px #0d6efd14;
    transform: none
}

a.btn, a.btn:link, a.btn:visited {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    -webkit-appearance: none !important
}

a.btn.btn-sm {
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
}

a.btn.btn-primary, a.btn.btn-primary:link, a.btn.btn-primary:visited {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px #0d6efd1f !important
}

a.btn.btn-primary:hover, a.btn.btn-primary:focus {
    background-color: var(--brand-primary) !important;
    filter: brightness(0.94) !important;
    color: #fff !important
}

a.btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary) {
    border: 1px solid var(--card-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 6px 14px #0206170a !important;
}

a.btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):hover, a.btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):focus {
    background: #00000008 !important;
    box-shadow: 0 10px 22px #0206170f !important;
}

:root[data-bs-theme='dark'] a.btn.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #081422 !important
}

:root[data-bs-theme='dark'] a.btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary) {
    background: #ffffff05 !important;
    border: 1px solid #ffffff0a !important;
    color: var(--app-text) !important;
}

.form-control {
    background: linear-gradient(180deg, #fffffff5, #ffffffeb);
    border: 1px solid #0f172a0f;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s
}

:root[data-bs-theme='dark'] .form-control {
    background: #ffffff05;
    border: 1px solid #ffffff0a;
    color: var(--app-text)
}

.table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0
}

.table thead {
    background: transparent
}

.table thead th {
    background: var(--card-bg) !important;
    color: var(--muted) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--card-border) !important;
    background-clip: padding-box
}

.table.table-bordered th, .table.table-bordered td {
    border-color: var(--card-border) !important
}

:root[data-bs-theme='dark'] .table thead th {
    background: #ffffff05 !important;
    color: var(--app-text) !important;
    border-bottom: 1px solid #ffffff0a !important
}

:root[data-bs-theme='dark'] .table.table-bordered th, :root[data-bs-theme='dark'] .table.table-bordered td {
    border-color: #ffffff0a !important
}

html[data-bs-theme='dark'] table.table thead th, :root[data-bs-theme='dark'] table.table thead th, html[data-bs-theme='dark'] .table thead th, :root[data-bs-theme='dark'] .table thead th {
    background: #ffffff05 !important;
    color: var(--app-text) !important;
    border-bottom-color: #ffffff0a !important
}

.table thead.thead-light th, .table thead.thead-dark th, .table thead th.thead-light, .table thead th.thead-dark, .table thead th.bg-light {
    background: var(--card-bg) !important;
    color: var(--muted) !important;
    border-bottom-color: var(--card-border) !important
}

.table thead th:first-child {
    border-top-left-radius: .4rem
}

.table thead th:last-child {
    border-top-right-radius: .4rem
}

.toast {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--app-text);
    box-shadow: var(--elev-1)
}

.toast-top-zindex {
    z-index: 1080
}

.note-card-outline {
    outline: 3px solid var(--category-color, transparent);
    outline-offset: -6px
}

small, .text-muted {
    color: var(--muted) !important
}

.hr-subtle {
    height: 1px;
    background: linear-gradient(90deg, transparent, #0000000f, transparent);
    border: none;
    margin: 1rem 0
}

.code-inline-wrap {
    overflow: auto;
    max-width: 100%
}

.code-nowrap {
    white-space: nowrap;
    display: inline-block
}

@media (max-width: 576px) {
    .card {
        border-radius: .5rem
    }

    h5 {
        font-size: 1rem !important;
        line-height: 1.2 !important
    }
}

.bg-surface {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: .5rem;
    padding: 1rem
}

:focus {
    outline: none
}

.button-focus, .form-control:focus, .btn:focus {
    box-shadow: 0 0 0 3px #0d6efd1f;
    border-color: var(--brand-primary)
}

.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi, .icon-link:hover > .bi, .icon-link:focus-visible > .bi, .card:hover, .btn:hover, .btn:active {
    transform: none !important
}

.calendar-table td.bg-light {
    background-color: var(--card-bg) !important;
    color: var(--muted) !important
}

.calendar-table td.today {
    background-color: #0d6efd1f !important;
    border: 1px solid red !important
}

.calendar-table td.weekend {
    background-color: #0000000d !important
}

:root[data-bs-theme='dark'] .calendar-table td.bg-light {
    background-color: #ffffff05 !important;
    color: var(--muted) !important
}

:root[data-bs-theme='dark'] .calendar-table td.today {
    background-color: #66b2ff14 !important
}

:root[data-bs-theme='dark'] .calendar-table td.weekend {
    background-color: #ffffff08 !important
}

.easyMDEContainer, .editor-toolbar, .editor-toolbar .fa, .editor-toolbar button {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease
}

.CodeMirror {
    background: var(--card-bg) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--card-border) !important
}

.CodeMirror-scroll {
    background: transparent !important
}

.CodeMirror pre {
    color: var(--app-text) !important
}

.editor-toolbar {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important
}

.editor-toolbar button, .editor-toolbar a {
    color: var(--app-text) !important;
    background: transparent !important;
    border: none !important
}

.CodeMirror .cm-placeholder {
    color: var(--muted) !important
}

:root[data-bs-theme='dark'] .easyMDEContainer, :root[data-bs-theme='dark'] .editor-toolbar, :root[data-bs-theme='dark'] .CodeMirror {
    background: #ffffff05 !important;
    color: var(--app-text) !important;
    border: 1px solid #ffffff0a !important
}

:root[data-bs-theme='dark'] .editor-toolbar button, :root[data-bs-theme='dark'] .editor-toolbar a {
    color: var(--app-text) !important
}

.easyMDE, .EasyMDE, .easyMDEContainer, .EasyMDEContainer, .easyMDE, .easymde, .cm-s-easymde, .cm-s-default, .CodeMirror, .codemirror, .CodeMirror-scroll, .editorToolbar, .editor-toolbar, .editor-preview, .editor-preview-side, .editor-preview-active-side, .editormd-preview, .editormd-preview-html {
    background: var(--card-bg) !important;
    color: var(--app-text) !important;
    border-color: var(--card-border) !important
}

.editor-preview, .editormd-preview, .editor-preview-side, .editor-preview-active-side, .editormd-preview-html {
    color: var(--app-text) !important;
    background: var(--card-bg) !important
}

:root[data-bs-theme='dark'] .editor-preview, :root[data-bs-theme='dark'] .editormd-preview, :root[data-bs-theme='dark'] .editor-preview-side, :root[data-bs-theme='dark'] .editor-preview-active-side, :root[data-bs-theme='dark'] .editormd-preview-html {
    background: #ffffff05 !important;
    color: var(--app-text) !important
}

textarea.easyMDETextArea, textarea.easymde-textarea {
    background: transparent !important;
    color: var(--app-text) !important
}

:root:not([data-bs-theme='dark']) body {
    background: linear-gradient(180deg, var(--bg-cream, #f6efe0) 0%, #f3ead6 100%) !important;
    color: var(--app-text) !important
}

:root:not([data-bs-theme='dark']) .card {
    background: var(--surface-cream, #fbf6ec) !important;
    border: 1px solid var(--card-border, #5f4e3d1f) !important;
    border-radius: var(--card-radius, 0.9rem) !important;
    box-shadow: 0 8px 28px #2e22160f !important
}

:root:not([data-bs-theme='dark']) .card .card-body {
    padding: var(--card-padding, 1rem) !important
}

:root:not([data-bs-theme='dark']) .card .card-header {
    padding: calc(var(--card-padding, 1rem) * 0.75) var(--card-padding, 1rem) !important
}

h5 {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: .5rem !important;
    font-weight: 700 !important;
    color: var(--app-text) !important;
    position: relative !important;
    background: transparent !important;
    flex: unset !important
}

@media (max-width: 576px) {
    h5 {
        font-size: 1rem !important;
        line-height: 1.2 !important
    }
}

:root[data-bs-theme='dark'] body, html[data-bs-theme='dark'] body {
    background: var(--app-bg, linear-gradient(180deg, #07101a 0%, #081422 100%)) !important;
    color: var(--app-text, #e6eef8) !important
}

:root[data-bs-theme='dark'] .card, html[data-bs-theme='dark'] .card {
    background: var(--card-bg, #ffffff08) !important;
    border: 1px solid var(--card-border, #ffffff0f) !important;
    box-shadow: var(--elev-1, 0 10px 30px #02061799) !important
}

:root[data-bs-theme='dark'] .navbar, html[data-bs-theme='dark'] .navbar {
    background: linear-gradient(180deg, #0f1318eb, #0a0e12eb) !important;
    border-bottom: 1px solid #ffffff0a !important;
    color: var(--app-text) !important
}

:root[data-bs-theme='dark'] .navbar .navbar-brand, html[data-bs-theme='dark'] .navbar .navbar-brand {
    color: var(--app-text) !important
}

:root[data-bs-theme='dark'] .navbar .nav-link, html[data-bs-theme='dark'] .navbar .nav-link {
    color: var(--app-text) !important
}

:root[data-bs-theme='dark'] .navbar .nav-link.active, html[data-bs-theme='dark'] .navbar .nav-link.active {
    color: var(--brand-primary) !important;
    background: #66b2ff0a !important
}

:root[data-bs-theme='dark'] .navbar .dropdown-menu, html[data-bs-theme='dark'] .navbar .dropdown-menu {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important
}

.navbar .dropdown-menu, .dropdown-menu {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 8px 20px #0206170f;
    backdrop-filter: blur(6px)
}

.navbar .dropdown-menu.show, .dropdown-menu.show {
    background: var(--card-bg) !important
}

.dropdown-item {
    color: var(--app-text) !important
}

.dropdown-item:hover, .dropdown-item:focus {
    background: #0000000a !important;
    color: var(--app-text) !important
}

:root[data-bs-theme='dark'] .navbar .dropdown-menu, :root[data-bs-theme='dark'] .dropdown-menu {
    background: #ffffff05 !important;
    border: 1px solid #ffffff0a !important;
    box-shadow: 0 10px 28px #02061799 !important
}

:root[data-bs-theme='dark'] .dropdown-item:hover, :root[data-bs-theme='dark'] .dropdown-item:focus {
    background: #66b2ff0a !important
}

.btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary) {
    border: 1px solid var(--card-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 6px 14px #0206170a !important;
}

.btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):hover, .btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):focus {
    background: #00000008 !important;
    box-shadow: 0 10px 22px #0206170f !important;
}

:root[data-bs-theme='dark'] .btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary) {
    background: #ffffff05 !important;
    border: 1px solid #ffffff0a !important;
    color: var(--app-text) !important;
}

:root[data-bs-theme='dark'] .btn:not(.btn-primary):not(.btn-link):not(.btn-danger):not(.btn-outline-danger):not(.btn-secondary):hover {
    background: #ffffff08 !important;
}

.btn .bi, .btn svg {
    opacity: .95
}

.btn-icon {
    padding: .35rem !important;
    border-radius: .5rem !important
}

.dropdown-menu .form-control, .dropdown-menu input[type="file"] {
    background: var(--card-bg) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--card-border) !important
}

.col-md-9 .badge {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border: none !important;
    padding: .28rem .6rem !important;
    border-radius: .375rem !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 22px #0d6efd17 !important;
    text-decoration: none !important
}

.col-md-9 table tbody td a.badge {
    padding: .22rem .45rem !important;
    font-size: .82rem !important;
}

.col-md-9 .badge.bg-info, .col-md-9 .badge.bg-info.text-dark {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border: none !important
}

:root[data-bs-theme='dark'] .col-md-9 .badge {
    background: #66b2ff24 !important;
    color: var(--app-text) !important;
    border: 1px solid #66b2ff2e !important;
    box-shadow: none !important
}

:root[data-bs-theme='dark'] .col-md-9 table tbody td a.badge {
    padding: .22rem .45rem !important
}

.col-md-3 .list-group .list-group-item {
    transition: background .12s ease, color .12s ease, border-color .12s ease
}

.col-md-3 .list-group .list-group-item.active {
    background: linear-gradient(90deg, #8aa7a11f, #8aa7a10f) !important;
    background-color: #5f8a80 !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 26px #0d6efd1a !important;
    border-left: 4px solid #5f8e8538 !important
}

.col-md-3 .list-group .list-group-item.active a, .col-md-3 .list-group .list-group-item.active a.text-white {
    color: #fff !important;
    text-decoration: none !important
}

.col-md-3 .list-group .list-group-item:hover {
    background: #00000005
}

:root[data-bs-theme='dark'] .col-md-3 .list-group .list-group-item.active {
    background: #66b2ff24 !important;
    color: var(--app-text) !important;
    border-left: 4px solid #66b2ff2e !important;
    box-shadow: 0 8px 22px #02061780 !important
}

:root[data-bs-theme='dark'] .col-md-3 .list-group .list-group-item.active a {
    color: var(--app-text) !important
}

.col-md-9 .badge {
    font-weight: 700 !important;
    font-size: .9rem !important;
    letter-spacing: .2px !important;
    text-shadow: 0 1px 1px #00000014 !important
}

.col-md-9 table tbody td a.badge {
    font-size: .8rem !important;
    padding: .2rem .45rem !important
}

.col-md-9 .badge[style], .col-md-9 .badge.custom-color {
    color: #fff !important;
    text-shadow: 0 1px 2px #00000024 !important
}

.calendar-table .event, .calendar-table .fc-event, .calendar-table .event-title, .fc-event, .event, .event-title {
    font-weight: 700 !important;
    font-size: .95rem !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-shadow: 0 2px 6px #00000059 !important;
    padding: .08rem .28rem !important;
    border-radius: .25rem !important;
    -webkit-font-smoothing: antialiased !important
}

.calendar-table td .event-label {
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: var(--app-text) !important;
    text-shadow: none !important
}

:root[data-bs-theme='dark'] .calendar-table .event, :root[data-bs-theme='dark'] .calendar-table .fc-event, :root[data-bs-theme='dark'] .calendar-table .event-title, :root[data-bs-theme='dark'] .fc-event, :root[data-bs-theme='dark'] .event, :root[data-bs-theme='dark'] .event-title {
    color: var(--app-text) !important;
    text-shadow: 0 1px 3px #0009 !important
}

.col-md-9 .badge:focus, .col-md-9 .badge:focus-visible, .col-md-9 a.badge:focus, .col-md-9 a.badge:focus-visible {
    outline: 2px solid #0d6efd24 !important;
    outline-offset: 2px !important
}

.col-md-9 .badge, .col-md-9 table tbody td a.badge, .calendar-table .event, .calendar-table .fc-event, .calendar-table .event-title, .fc-event, .event, .event-title, .calendar-table td .event-label {
    font-family: Arial, Helvetica, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    letter-spacing: .25px !important;
    line-height: 1.15 !important
}

@media (max-width: 576px) {
    .col-md-9 .badge, .col-md-9 table tbody td a.badge {
        padding: .36rem .6rem !important
    }
}

.calendar-table .p-1.mb-1.rounded, .calendar-table .p-1.mb-1.rounded * {
    color: #fff !important
}

.calendar-table .p-1.mb-1.rounded a {
    color: #fff !important;
    text-decoration: none !important
}

.calendar-table .p-1.mb-1.rounded a:hover, .calendar-table .p-1.mb-1.rounded a:focus {
    color: #fff !important;
    text-decoration: underline !important
}

.calendar-table .p-1.mb-1.rounded small, .calendar-table .p-1.mb-1.rounded .small {
    color: #ffffffeb !important
}

.calendar-table .p-1.mb-1.rounded[data-contrast-fix='true'] {
    position: relative
}

.calendar-table .p-1.mb-1.rounded[data-contrast-fix='true']::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #0000001f;
    border-radius: inherit;
    pointer-events: none
}

:root[data-bs-theme='dark'] .calendar-table .p-1.mb-1.rounded small, :root[data-bs-theme='dark'] .calendar-table .p-1.mb-1.rounded .small {
    color: #ffffffe0 !important
}

.floorplan-has-shapes {
    background-color: #d07a3f !important;
    border-radius: .375rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    border: 1px solid #0000001a !important;
    box-shadow: 0 6px 16px #0000000f !important
}

.floorplan-has-shapes:hover {
    background-color: #bf6126 !important;
    border-color: #00000024 !important;
    box-shadow: 0 8px 20px #00000014 !important
}

.floorplan-has-shapes .bi, .floorplan-has-shapes svg, .floorplan-has-shapes svg * {
    color: var(--app-text) !important;
    fill: var(--app-text) !important;
    stroke: var(--app-text) !important
}

:root[data-bs-theme='dark'] .floorplan-has-shapes {
    background-color: #66b2ff38 !important;
    border: 1px solid #ffffff0a !important;
    box-shadow: 0 6px 18px #02061780 !important
}

:root[data-bs-theme='dark'] .floorplan-has-shapes .bi, :root[data-bs-theme='dark'] .floorplan-has-shapes svg, :root[data-bs-theme='dark'] .floorplan-has-shapes svg * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important
}

a.btn.btn-sm.p-0.border-0.d-inline-flex.align-items-center.justify-content-center.floorplan-has-shapes, a.btn.btn-sm.floorplan-has-shapes, a.floorplan-has-shapes.btn.btn-sm {
    background-color: #d9642e !important;
    border-color: #0000001f !important;
    box-shadow: 0 8px 20px #00000014 !important;
    background-image: none !important
}

a.btn.btn-sm.floorplan-has-shapes .bi, a.btn.btn-sm.floorplan-has-shapes i.bi, a.btn.btn-sm.floorplan-has-shapes svg, a.btn.btn-sm.floorplan-has-shapes svg *, a.floorplan-has-shapes .bi, a.floorplan-has-shapes svg, a.floorplan-has-shapes svg * {
    color: var(--app-text) !important;
    fill: var(--app-text) !important;
    stroke: var(--app-text) !important
}

a.floorplan-has-shapes.text-secondary .bi, a.floorplan-has-shapes.text-secondary svg, a.floorplan-has_shapes.text-secondary svg * {
    color: var(--app-text) !important;
    fill: var(--app-text) !important;
    stroke: var(--app-text) !important
}

:root[data-bs-theme='dark'] a.btn.btn-sm.floorplan-has-shapes, :root[data-bs-theme='dark'] a.floorplan-has-shapes.btn.btn-sm, :root[data-bs-theme='dark'] a.floorplan-has-shapes {
    background-color: #66b2ff42 !important;
    border-color: #ffffff0f !important;
    box-shadow: 0 6px 18px #02061780 !important
}

:root[data-bs-theme='dark'] a.floorplan-has-shapes .bi, :root[data-bs-theme='dark'] a.floorplan-has-shapes svg, :root[data-bs-theme='dark'] a.floorplan-has-shapes svg * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important
}

svg .fp-label, .fp-label {
    font-size: 11px !important;
    fill: #111 !important;
    paint-order: stroke fill !important;
    stroke: #fff0 !important;
    dominant-baseline: central !important;
    alignment-baseline: central !important
}

.settings-categories-card .btn {
    padding: .25rem .55rem !important;
    font-size: .85rem !important;
    min-width: 3.25rem !important
}

.settings-categories-card .btn.btn-sm.btn-outline-danger {
    padding: .25rem .55rem !important
}

.settings-categories-card .delete-item-form {
    display: inline-block
}

.home-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 1rem
}

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

.widget-column {
    min-height: 1px
}

.widget {
    cursor: default
}

.widget .card-header {
    display: flex;
    align-items: center;
    gap: .5rem
}

.widget-handle {
    cursor: grab;
    margin-left: auto;
    color: #00000073
}

.widget.dragging {
    opacity: .6
}

.widget-placeholder {
    min-height: 3.2rem;
    border: 2px dashed #0000001f
}

@keyframes widget-slide-up {
    from {
        transform: translateY(14px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.home-grid .widget {
    opacity: 0;
    transform: translateY(14px);
    animation-name: widget-slide-up;
    animation-duration: 420ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1)
}

.widget-column .widget:nth-child(1) {
    animation-delay: 80ms
}

.widget-column .widget:nth-child(2) {
    animation-delay: 160ms
}

.widget-column .widget:nth-child(3) {
    animation-delay: 240ms
}

.widget-column .widget:nth-child(4) {
    animation-delay: 320ms
}

.widget-column .widget:nth-child(5) {
    animation-delay: 400ms
}

@media (prefers-reduced-motion: reduce) {
    .home-grid .widget {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important
    }
}

.home-grid .list-group .list-group-item.has-category {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--category-color, transparent);
    padding-left: calc(0.75rem - 4px)
}

.home-grid .list-group .list-group-item {
    padding-left: .75rem
}

.rel-today {
    color: #d63333;
    font-weight: 700;
    animation: blink 2s ease-in-out infinite
}

.rel-soon {
    color: #d63333;
    font-weight: 700
}

@keyframes blink {
    50% {
        opacity: .2
    }
}

.icon-btn {
    width: 2rem !important;
    height: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important
}

.category-row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.category-row .category-name {
    flex: 1 1 auto
}

.depth-0 {
    padding-left: .75rem
}

.depth-1 {
    padding-left: calc(0.75rem + 1rem)
}

.depth-2 {
    padding-left: calc(0.75rem + 2rem)
}

.depth-3 {
    padding-left: calc(0.75rem + 3rem)
}

.depth-4 {
    padding-left: calc(0.75rem + 4rem)
}

.depth-5 {
    padding-left: calc(0.75rem + 5rem)
}

.depth-6 {
    padding-left: calc(0.75rem + 6rem)
}

.depth-7 {
    padding-left: calc(0.75rem + 7rem)
}

.depth-8 {
    padding-left: calc(0.75rem + 8rem)
}

.file-preview-img {
    max-height: 600px;
    display: inline-block
}

.file-preview-iframe {
    border: 1px solid #ddd
}