@charset "UTF-8";
/* GunPoint Dunkel – eigenes Theme für das osTicket-Kundenportal (RT-Theme-System).
   Baut auf der dunklen Vorlage auf und legt die Farben des Shops www.gunpoint.de darüber.
   Palette: Hintergrund #121417, Fläche #1B1E23 / #23272D, Linie #30353C, Schrift #ECEAE4 / #C4C7CC, Akzent #E5324B. */
@import url("theme_dark_red_red-grey.css");

:root {
  --gp-bg: #121417;
  --gp-surface: #1B1E23;
  --gp-surface-2: #23272D;
  --gp-line: #30353C;
  --gp-line-2: #3A4048;
  --gp-ink: #ECEAE4;
  --gp-ink-2: #C4C7CC;
  --gp-muted: #A9ADB4;
  --gp-accent: #E5324B;
  --gp-accent-2: #C8102E;
  --bs-body-bg: #121417;
  --bs-body-color: #C4C7CC;
  --bs-border-color: #30353C;
  --bs-link-color: #FF6B7F;
  --bs-link-hover-color: #ECEAE4;
  background-color: var(--gp-bg);
}

/* !important, damit eine im Browser noch zwischengespeicherte alte custom.css (erzwang Weiß) nichts mehr überschreibt */
html, body, :root { background-color: var(--gp-bg) !important; color: var(--gp-ink-2); }
#startpage p, #startpage .text-center, .page-content p, #content p, .lead { color: var(--gp-ink-2) !important; }
#startpage, #startpage > *, .page-content { background-color: var(--gp-bg) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 { color: var(--gp-ink); }
a, a:focus { color: #FF6B7F; }
a:hover { color: var(--gp-ink); }

/* Kopf und Navigation */
#header { background-color: var(--gp-surface) !important; color: var(--gp-ink); border-bottom: 1px solid var(--gp-line); }
#header-logo img { filter: invert(1) hue-rotate(180deg); }
#headerNavRight a, #menueRight a { color: var(--gp-ink-2); }
#mainNavbar { background: var(--gp-accent-2); border-top: 1px solid var(--gp-line-2); box-shadow: none; text-shadow: none; }
#mainNavbar a, #mainNavbar .nav-link { color: #fff !important; }
#mainNavbar .nav-item.active, #mainNavbar .nav-link.active, #mainNavbar .active { background-color: rgba(0, 0, 0, 0.25) !important; }
#mainNavbar .nav-link:hover { background-color: rgba(0, 0, 0, 0.18); }

/* Inhalt */
#content, .page-content, #startpage, .content-bg, #content > section, section.page-content { background-color: var(--gp-bg) !important; }
:root { --bs-warning-bg-subtle: #23272D; --bs-light-bg-subtle: #23272D; --bs-secondary-bg-subtle: #23272D; --bs-tertiary-bg: #23272D; --bs-secondary-bg: #1B1E23; }
.list-group-item, .row.list-group-item { background-color: var(--gp-surface) !important; color: var(--gp-ink-2); border-color: var(--gp-line) !important; }
#ticketForm .d-flex, #dynamic-form .d-flex, #clientLogin .d-flex, .form-header, .d-flex.py-2 { background-color: var(--gp-surface-2) !important; color: var(--gp-ink); }
.dropzone, .filedrop { background-color: var(--gp-surface-2) !important; color: var(--gp-ink-2) !important; border-color: var(--gp-line-2) !important; }
.dropzone a, .filedrop a { background: transparent !important; color: #FF6B7F !important; }
.redactor-toolbar a, .redactor-toolbar a i { background: transparent !important; }
.redactor-box.redactor-styles-on .redactor-toolbar { padding: .3rem; }
.sidebar, .sidebar-bg { background-color: var(--gp-surface); border-left: 0.15rem solid var(--gp-line); }
.card, .list-group-item, .modal-content, .dropdown-menu, .popover, .tooltip-inner { background-color: var(--gp-surface); color: var(--gp-ink-2); border-color: var(--gp-line); }
.card-header, .card-footer { background-color: var(--gp-surface-2); border-color: var(--gp-line); color: var(--gp-ink); }
.dropdown-item { color: var(--gp-ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--gp-surface-2); color: var(--gp-ink); }
hr { border-color: var(--gp-line); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--gp-line) !important; }
.border-primary, .border-primary-subtle { border-color: var(--gp-line) !important; }
.bg-light, .bg-white, .bg-body, .bg-body-tertiary { background-color: var(--gp-surface) !important; color: var(--gp-ink-2); }
.text-muted, .text-secondary { color: var(--gp-muted) !important; }
.text-dark, .text-body { color: var(--gp-ink) !important; }
.text-warning { color: #D6B84A !important; }
.alert { background-color: var(--gp-surface-2); border-color: var(--gp-line-2); color: var(--gp-ink); }
.alert-danger { border-color: var(--gp-accent); }
.badge.bg-secondary { background-color: var(--gp-surface-2) !important; }

/* Tabellen (Ticketliste, Verlauf) */
table, .table { color: var(--gp-ink-2); --bs-table-bg: transparent; --bs-table-color: #C4C7CC; --bs-table-border-color: #30353C; --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.05); }
.table thead th, table th { background-color: var(--gp-surface-2); color: var(--gp-ink); border-color: var(--gp-line); }
.table td, table td { border-color: var(--gp-line); }
.thread-entry, .thread-body, .message, .response, .note { background-color: var(--gp-surface); color: var(--gp-ink-2); border-color: var(--gp-line); }
.thread-entry .header, .thread-entry .thread-header { background-color: var(--gp-surface-2); color: var(--gp-ink); }

/* Formulare */
.form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, .ui-timepicker-select {
  background-color: var(--gp-surface-2) !important; color: var(--gp-ink) !important; border: 1px solid var(--gp-line-2) !important;
}
.form-control:focus, .form-select:focus, textarea:focus, input:focus, select:focus { border-color: var(--gp-accent) !important; box-shadow: 0 0 0 0.2rem rgba(229, 50, 75, 0.25) !important; outline: none; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--gp-muted); opacity: 1; }
.form-label, label, legend { color: var(--gp-ink-2); }
.form-check-input { background-color: var(--gp-surface-2); border-color: var(--gp-line-2); }
.form-check-input:checked { background-color: var(--gp-accent); border-color: var(--gp-accent); }
.input-group-text { background-color: var(--gp-surface-2); color: var(--gp-ink-2); border-color: var(--gp-line-2); }
.select2-container .select2-selection--single, .select2-container--default .select2-selection--multiple { background-color: var(--gp-surface-2) !important; border-color: var(--gp-line-2) !important; color: var(--gp-ink); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--gp-ink); }
.select2-dropdown { background-color: var(--gp-surface); border-color: var(--gp-line-2); color: var(--gp-ink-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--gp-accent); }
.select2-search--dropdown .select2-search__field { background-color: var(--gp-surface-2); color: var(--gp-ink); border-color: var(--gp-line-2); }

/* Editor (Redactor) */
.redactor-box, .redactor-box.redactor-styles-on, .redactor-styles, .redactor-in { background-color: var(--gp-surface-2) !important; color: var(--gp-ink) !important; border-color: var(--gp-line-2) !important; }
.redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar, .redactor-toolbar { background-color: var(--gp-surface) !important; border-color: var(--gp-line) !important; }
.redactor-toolbar a, .redactor-air a { color: var(--gp-ink-2) !important; border-color: var(--gp-line) !important; }
.redactor-toolbar a:hover { background-color: var(--gp-surface-2) !important; color: var(--gp-ink) !important; }
.redactor-statusbar { background-color: var(--gp-surface); color: var(--gp-muted); }
.dropzone, .filedrop, .dropzone-previews { background-color: var(--gp-surface-2); border-color: var(--gp-line-2); color: var(--gp-ink-2); }

/* Schaltflächen */
.btn-primary { --bs-btn-bg: #E5324B; --bs-btn-border-color: #E5324B; --bs-btn-color: #fff; --bs-btn-hover-bg: #C8102E; --bs-btn-hover-border-color: #C8102E; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #C8102E; --bs-btn-active-border-color: #C8102E; }
.btn-secondary, .btn-default { --bs-btn-bg: #23272D; --bs-btn-border-color: #3A4048; --bs-btn-color: #ECEAE4; --bs-btn-hover-bg: #30353C; --bs-btn-hover-border-color: #3A4048; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #30353C; --bs-btn-active-border-color: #3A4048; }
.btn-outline-secondary { --bs-btn-color: #ECEAE4; --bs-btn-border-color: #3A4048; --bs-btn-hover-bg: #30353C; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #3A4048; }
.btn-link { color: #FF6B7F; }
input[type="submit"], input[type="button"], button.btn { text-shadow: none; }

/* Fuß */
#footer { background-color: #0B0C0E !important; color: var(--gp-muted) !important; border-top: 1px solid var(--gp-line); }
#footer .copyright, #footer a, #footerNavbar a { color: var(--gp-muted) !important; background-color: transparent !important; }
.sidebar, .sidebar-bg { background-color: var(--gp-surface) !important; }
#content { background-color: var(--gp-bg) !important; }
#footer a:hover, #footerNavbar a:hover { color: var(--gp-ink); }
#poweredBy img { opacity: 0.5; }

/* Meldungen, Ladeanzeige, Sonstiges */
#msg_notice, #msg_warning, #msg_error, .msg { background-color: var(--gp-surface-2); color: var(--gp-ink); border: 1px solid var(--gp-line-2); }
#msg_error, .error { color: #FF6B7F; }
#loading { background-color: var(--gp-surface) !important; color: var(--gp-ink); }
#overlay { background-color: rgba(0, 0, 0, 0.6); }
.pagination .page-link { background-color: var(--gp-surface-2); border-color: var(--gp-line); color: var(--gp-ink-2); }
.pagination .page-item.active .page-link { background-color: var(--gp-accent); border-color: var(--gp-accent); color: #fff; }
.captcha, #captcha { background-color: var(--gp-surface-2); }
.ui-widget-content, .ui-datepicker { background: var(--gp-surface); color: var(--gp-ink-2); border-color: var(--gp-line-2); }
.ui-widget-header { background: var(--gp-surface-2); color: var(--gp-ink); border-color: var(--gp-line-2); }
.ui-state-default, .ui-widget-content .ui-state-default { background: var(--gp-surface-2); color: var(--gp-ink-2); border-color: var(--gp-line); }
.img-fluid { max-width: 100%; height: auto; margin-top: 15px; }