:root {
    --d-bg: #f1f5f9;
    --d-surface: #ffffff;
    --d-well: #f8fafc;
    --d-line: #e2e8f0;
    --d-line-soft: #eef2f6;
    --d-ink: #0f172a;
    --d-ink-mid: #475569;
    --d-ink-soft: #94a3b8;
    --d-accent: #143f91;
    --d-accent-wash: #eaf0fb;
    --d-accent-ring: rgba(20, 63, 145, 0.14);
    --d-ok: #15803d;
    --d-ok-wash: #eefbf2;
    --d-warn: #b45309;
    --d-warn-wash: #fdf5e7;
    --d-bad: #b91c1c;
    --d-bad-wash: #fef2f2;
    --d-nav-raised: #1c2740;
    --d-r-card: 14px;
    --d-r-ctl: 10px;
    --d-lift: 0 12px 32px -12px rgba(15, 23, 42, 0.18);
    --d-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

#wrapper,
.content {
    background: var(--d-bg);
}

body {
    -webkit-font-smoothing: antialiased;
    color: var(--d-ink);
}

hr,
.hr-panel-heading {
    border-color: var(--d-line-soft);
}

h1, h2, h3, h4 {
    letter-spacing: -0.014em;
}

.text-muted {
    color: var(--d-ink-mid);
}

.bold {
    font-weight: 600;
}

.panel_s,
.panel-default,
.panel,
.widget,
.kanban-column,
.dropzone,
.tc-content {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-card);
    box-shadow: none;
}

.panel_s .panel-heading,
.panel .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--d-line-soft);
    border-radius: var(--d-r-card) var(--d-r-card) 0 0;
    font-weight: 600;
}

.panel_s .panel-footer,
.panel .panel-footer {
    background: var(--d-well);
    border-top: 1px solid var(--d-line-soft);
    border-radius: 0 0 var(--d-r-card) var(--d-r-card);
}

.panel-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.well {
    background: var(--d-well);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-ctl);
    box-shadow: none;
}

.btn,
.dt-buttons .dt-button {
    border-radius: var(--d-r-ctl);
    font-weight: 600;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    transition: background-color 150ms var(--d-ease), border-color 150ms var(--d-ease), color 150ms var(--d-ease), transform 150ms var(--d-ease);
}

.btn:active,
.dt-buttons .dt-button:active {
    transform: scale(0.975);
    box-shadow: none;
}

.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--d-accent);
    outline-offset: 2px;
}

.btn-default,
.dt-buttons .dt-button {
    background: var(--d-surface);
    border-color: var(--d-line);
    color: var(--d-ink);
}

.btn-default:hover,
.btn-default:focus,
.dt-buttons .dt-button:hover {
    background: var(--d-well);
    border-color: #cbd5e1;
    color: var(--d-ink);
}

.form-control,
.select2-container--bootstrap .select2-selection,
.dataTables_filter input,
textarea.form-control {
    background: var(--d-well);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-ctl);
    box-shadow: none;
    color: var(--d-ink);
    transition: background-color 150ms var(--d-ease), border-color 150ms var(--d-ease), box-shadow 150ms var(--d-ease);
}

.form-control::placeholder {
    color: var(--d-ink-soft);
}

.form-control:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.dataTables_filter input:focus {
    background: var(--d-surface);
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px var(--d-accent-ring);
    outline: none;
}

.form-control[disabled],
.form-control[readonly] {
    background: var(--d-line-soft);
    color: var(--d-ink-soft);
}

label,
.control-label {
    color: var(--d-ink-mid);
    font-weight: 600;
}

.input-group-addon {
    background: var(--d-well);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-ctl);
    color: var(--d-ink-soft);
}

.table {
    border-color: var(--d-line-soft);
    font-variant-numeric: tabular-nums;
}

.table > thead > tr > th {
    background: var(--d-well);
    border-bottom: 1px solid var(--d-line);
    border-top: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--d-line-soft);
    vertical-align: middle;
}

.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td {
    background: var(--d-well);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}

.table-striped > tbody > tr:nth-of-type(odd):hover > td {
    background: var(--d-well);
}

.table > tbody > tr.active > td,
.table > tbody > tr.selected > td {
    background: var(--d-accent-wash);
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination > li > a,
.pagination > li > span {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-ctl);
    color: var(--d-ink-mid);
    box-shadow: none;
    transition: background-color 150ms var(--d-ease), color 150ms var(--d-ease), border-color 150ms var(--d-ease);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.pagination > li > a:hover {
    background: var(--d-well);
    border-color: #cbd5e1;
    color: var(--d-ink);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination > .active > a,
.pagination > .active > span {
    background: var(--d-accent);
    border-color: var(--d-accent);
    color: #fff;
}

.nav-tabs {
    border-bottom: 1px solid var(--d-line);
}

.nav-tabs > li > a {
    border: none;
    border-radius: 0;
    font-weight: 600;
    background: transparent;
    transition: color 150ms var(--d-ease), box-shadow 150ms var(--d-ease);
}

.nav-tabs > li > a:hover {
    background: transparent;
    border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent;
    border: none;
    box-shadow: inset 0 -2px 0 var(--d-accent);
}

.nav-pills > li > a {
    border-radius: var(--d-r-ctl);
}

.label,
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.28em 0.72em;
    text-shadow: none;
    box-shadow: none;
}

.label-primary, .badge-primary { background: var(--d-accent-wash); color: var(--d-accent); }
.label-success, .badge-success { background: var(--d-ok-wash);     color: var(--d-ok); }
.label-warning, .badge-warning { background: var(--d-warn-wash);   color: var(--d-warn); }
.label-danger,  .badge-danger  { background: var(--d-bad-wash);    color: var(--d-bad); }
.label-info,    .badge-info    { background: var(--d-accent-wash); color: var(--d-accent); }
.label-default, .badge-default { background: var(--d-line-soft);   color: var(--d-ink-mid); }

.alert {
    border-radius: var(--d-r-ctl);
    border: 1px solid transparent;
    box-shadow: none;
    font-weight: 500;
}

.alert-success { background: var(--d-ok-wash);     border-color: #bbf0cd; color: var(--d-ok); }
.alert-info    { background: var(--d-accent-wash); border-color: #ccdcf6; color: var(--d-accent); }
.alert-warning { background: var(--d-warn-wash);   border-color: #f4e0bb; color: var(--d-warn); }
.alert-danger  { background: var(--d-bad-wash);    border-color: #f7cccc; color: var(--d-bad); }

.modal-content {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-card);
    box-shadow: var(--d-lift);
}

.modal-header {
    border-bottom: 1px solid var(--d-line-soft);
}

.modal-footer {
    background: var(--d-well);
    border-top: 1px solid var(--d-line-soft);
    border-radius: 0 0 var(--d-r-card) var(--d-r-card);
}

.modal-title {
    font-weight: 600;
    letter-spacing: -0.012em;
}

.modal-backdrop.in {
    background: #0f172a;
    opacity: 0.55;
}

.dropdown-menu {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-ctl);
    box-shadow: var(--d-lift);
    padding: 6px;
}

.dropdown-menu > li > a {
    border-radius: 8px;
    font-weight: 500;
    padding: 7px 10px;
    transition: background-color 150ms var(--d-ease), color 150ms var(--d-ease);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--d-well);
}

.dropdown-menu .divider {
    background: var(--d-line-soft);
}

.popover {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-ctl);
    box-shadow: var(--d-lift);
}

.tooltip-inner {
    background: var(--d-ink);
    border-radius: var(--d-r-ctl);
    font-weight: 500;
    padding: 6px 10px;
}

.progress {
    background: var(--d-line-soft);
    border-radius: 999px;
    box-shadow: none;
    height: 8px;
}

.progress-bar {
    background: var(--d-accent);
    box-shadow: none;
}

#header,
.navbar-main {
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-line);
    box-shadow: none;
}

#header .navbar-nav > li > a {
    transition: background-color 150ms var(--d-ease), color 150ms var(--d-ease);
}

#header .navbar-nav > li > a:hover,
#header .navbar-nav > li.open > a {
    background: var(--d-well);
}

#top_search input,
.top_search input {
    background: var(--d-well);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-ctl);
}

#side-menu > li > a,
#setup-menu > li > a {
    border: none;
    border-radius: var(--d-r-ctl);
    font-weight: 500;
    transition: background-color 150ms var(--d-ease);
}

#side-menu > li > a:hover,
#side-menu > li.active > a,
#setup-menu > li > a:hover,
#setup-menu > li.active > a {
    background: var(--d-nav-raised);
}

#side-menu > li.active > a {
    font-weight: 600;
}

.list-group-item {
    background: var(--d-surface);
    border-color: var(--d-line-soft);
    transition: background-color 150ms var(--d-ease);
}

.list-group-item:first-child {
    border-radius: var(--d-r-ctl) var(--d-r-ctl) 0 0;
}

.list-group-item:last-child {
    border-radius: 0 0 var(--d-r-ctl) var(--d-r-ctl);
}

.list-group-item:hover {
    background: var(--d-well);
}

.breadcrumb {
    background: transparent;
    padding-left: 0;
}

.select2-container--bootstrap .select2-dropdown {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-ctl);
    box-shadow: var(--d-lift);
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background: var(--d-accent-wash);
    color: var(--d-accent);
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background: var(--d-accent-wash);
    border: none;
    border-radius: 999px;
    color: var(--d-accent);
    font-weight: 600;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.table-responsive,
.dataTables_wrapper,
.dataTables_scrollBody {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.content pre,
.content code,
.panel_s pre {
    overflow-x: auto;
    max-width: 100%;
}

.content img,
.panel_s img,
.modal-body img {
    max-width: 100%;
    height: auto;
}

.modal-dialog {
    max-width: calc(100vw - 2rem);
}

.panel_s,
.panel,
.content .row {
    min-width: 0;
}

.table td,
.table th {
    overflow-wrap: anywhere;
}

.table td.no-wrap,
.table th.no-wrap,
.table .nowrap {
    overflow-wrap: normal;
}

@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.75rem auto;
        max-width: calc(100vw - 1.5rem);
    }

    .panel_s .panel-body,
    .panel .panel-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }
}