/**
 * Catppuccin Macchiato Theme for Syncthing
 * Dark theme with muted, pastel colors
 * Based on: https://github.com/catppuccin/catppuccin
 */

/* Catppuccin Macchiato Color Palette */
:root {
    --ctp-rosewater: #f4dbd6;
    --ctp-flamingo: #f0c6c6;
    --ctp-pink: #f5bde6;
    --ctp-mauve: #c6a0f6;
    --ctp-red: #ed8796;
    --ctp-maroon: #ee99a0;
    --ctp-peach: #f5a97f;
    --ctp-yellow: #eed49f;
    --ctp-green: #a6da95;
    --ctp-teal: #8bd5ca;
    --ctp-sky: #91d7e3;
    --ctp-sapphire: #7dc4e4;
    --ctp-blue: #8aadf4;
    --ctp-lavender: #b7bdf8;
    --ctp-text: #cad3f5;
    --ctp-subtext1: #b8c0e0;
    --ctp-subtext0: #a5adcb;
    --ctp-overlay2: #939ab7;
    --ctp-overlay1: #8087a2;
    --ctp-overlay0: #6e738d;
    --ctp-surface2: #5b6078;
    --ctp-surface1: #494d64;
    --ctp-surface0: #363a4f;
    --ctp-base: #24273a;
    --ctp-mantle: #1e2030;
    --ctp-crust: #181926;
}

body {
    color: var(--ctp-text) !important;
    background-color: var(--ctp-base) !important;
}

a:hover, a:focus, a.focus {
    outline: none !important;
}

/* navbar */
.navbar {
    background-color: var(--ctp-mantle) !important;
    border-color: var(--ctp-surface0) !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--ctp-blue) !important;
    background-color: var(--ctp-surface0) !important;
    border: 1px solid var(--ctp-surface0) !important;
    border-bottom-color: transparent !important;
    cursor: default;
}

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

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background-color: var(--ctp-surface0) !important;
    border-color: transparent !important;
}

.navbar-text, .dropdown>a, .dropdown-menu>li>a, .hidden-xs>a, .navbar-link {
    color: var(--ctp-text) !important;
}

.dropdown-menu {
    border-color: var(--ctp-surface0) !important;
    border-width: 2px !important;
    background-color: var(--ctp-crust) !important;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    color: var(--ctp-text) !important;
    background-color: var(--ctp-surface0) !important;
}

.open>.dropdown-toggle, .dropdown-toggle:hover {
    border-color: var(--ctp-surface0) !important;
    background-color: var(--ctp-crust) !important;
}

.divider {
    background-color: var(--ctp-surface1) !important;
    height: 2px !important;
}

li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
    outline: none !important;
    border-color: var(--ctp-surface0) !important;
    background-color: var(--ctp-crust) !important;
}

.dropdown-menu>.active>a {
    color: var(--ctp-crust) !important;
    background-color: var(--ctp-blue) !important;
}

/* main panel */
.panel {
    background-color: var(--ctp-mantle) !important;
    border-width: 2px !important;
}

.panel-default {
    border-color: var(--ctp-surface0) !important;
}

.panel-default > .panel-heading {
    color: var(--ctp-text) !important;
    border-color: var(--ctp-crust) !important;
    background-color: var(--ctp-surface0) !important;
}

.panel-warning > .panel-heading {
    color: var(--ctp-base) !important;
    background-color: var(--ctp-yellow) !important;
}

.panel-progress {
    background: var(--ctp-blue);
}

.panel-footer {
    background-color: var(--ctp-crust) !important;
    border-width: 0 !important;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--ctp-surface0) !important;
}

.panel-group .panel-heading+.panel-collapse>.panel-body, 
.panel-group .panel-heading+.panel-collapse>.list-group {
    border-top: 1px solid var(--ctp-surface0) !important;
}

.identicon rect {
    fill: var(--ctp-text);
}

.panel-warning .identicon rect {
    fill: var(--ctp-base);
}

.panel-heading:hover, .panel-heading:focus {
    text-decoration: none;
}

/* buttons */
.btn {
    border-radius: 3px !important;
    border-width: 0px !important;
}

.btn:hover, .btn:focus, .btn.focus {
    outline: none !important;
}

.btn-default {
    color: var(--ctp-text) !important;
    background-color: var(--ctp-surface1) !important;
}

.btn-default:hover, .btn-default:focus, .btn-default.focus {
    color: var(--ctp-text) !important;
    background-color: var(--ctp-surface2) !important;
}

.btn-primary {
    color: var(--ctp-crust) !important;
    background-color: var(--ctp-blue) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
    color: var(--ctp-crust) !important;
    background-color: var(--ctp-sapphire) !important;
}

.btn-warning {
    color: var(--ctp-base) !important;
    background-color: var(--ctp-peach) !important;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning.focus {
    color: var(--ctp-base) !important;
    background-color: var(--ctp-yellow) !important;
}

.btn-danger {
    color: var(--ctp-crust) !important;
    background-color: var(--ctp-red) !important;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger.focus {
    color: var(--ctp-crust) !important;
    background-color: var(--ctp-maroon) !important;
}

/* modal dialogs */
.modal-header {
    border-bottom-color: var(--ctp-surface0) !important;
}

.modal-header:not(.alert) {
    background-color: var(--ctp-surface0);
}

.alert-info {
    color: var(--ctp-base) !important;
    background-color: var(--ctp-sky) !important;
}

.alert-warning {
    color: var(--ctp-base) !important;
    background-color: var(--ctp-yellow) !important;
}

.alert-danger {
    color: var(--ctp-crust) !important;
    background-color: var(--ctp-red) !important;
}

.modal-content {
    border-color: var(--ctp-surface1) !important;
    border-width: 2px !important;
    background-color: var(--ctp-base) !important;
}

.modal-footer {
    border-color: var(--ctp-surface0) !important;
    background-color: var(--ctp-crust) !important;
}

.help-block {
    color: var(--ctp-subtext0) !important;
}

.form-control {
    color: var(--ctp-text) !important;
    border-color: var(--ctp-surface0) !important;
    background-color: var(--ctp-surface0) !important;
}

code.ng-binding {
    color: var(--ctp-pink) !important;
    background-color: var(--ctp-surface1) !important;
}

.well, .form-control[readonly="readonly"], .popover {
    border-color: var(--ctp-surface0) !important;
    background-color: var(--ctp-surface0) !important;
}

/* buttons for pagination */
.pagination>li>a, .pagination>li>span {
    background-color: var(--ctp-surface1) !important;
    border-color: var(--ctp-surface2) !important;
}

.pagination>li>a:hover, .pagination>li>a:focus, .pagination>li>a.focus {
    background-color: var(--ctp-surface2) !important;
}

/* progress bars */
.progress-bar {
    background-color: var(--ctp-blue) !important;
}

.progress-bar-success {
    background-color: var(--ctp-green) !important;
}

.progress-bar-info {
    background-color: var(--ctp-mauve) !important;
}

.progress-bar-warning {
    background-color: var(--ctp-yellow) !important;
}

.progress-bar-danger {
    background-color: var(--ctp-red) !important;
}

.progress .frontal {
    color: var(--ctp-base);
}

.text-info {
    color: var(--ctp-mauve);
}

.text-primary {
    color: var(--ctp-blue);
}

/*
 * Fancytree tweaks
 */
.fancytree-container tr:hover,
.fancytree-focused {
    background-color: var(--ctp-surface0);
}

/* Remote Devices 'connection type'-icon color */
.reception {
    filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
}

/* Disabled checkbox panels */
.checkbox[disabled] {
    background-color: var(--ctp-surface0);
}

.checkbox[disabled] * {
    color: var(--ctp-overlay0);
}

.checkbox[disabled] .help-block {
    color: var(--ctp-overlay0) !important;
}