/*
 * Flaches, einheitliches Erscheinungsbild.
 * Geladen über custom/bootstrap.php, also nach allen Sendy-Stylesheets.
 *
 *   1. keine Schatten
 *   2. ein einziger, dezenter Radius statt 3/4/5/6/10/11/14/16/20/22px
 *
 * Nur diese beiden Eigenschaften werden angefasst – Farben, Abstände und
 * Typografie bleiben, wie Sendy sie vorgibt.
 */

:root
{
	--sendy-radius: 3px;
	--sendy-focus: rgba(147, 51, 234, 0.55);
	--sendy-control-height: 44px;
	/* Markierung aktiver Reiter – Sendy löste das über einen inneren Schatten */
	--sendy-active-bg: #f3e8ff;
	--sendy-active-border: #a855f7;
	--sendy-active-ink: #6b21a8;
	/* CKEditor (WYSIWYG) rundet über eine eigene Variable */
	--ck-border-radius: 3px;
}

/* ---------------------------------------------------------------- *
 * 1. Flach
 * ---------------------------------------------------------------- */

*,
*::before,
*::after
{
	box-shadow: none !important;
}

/* Der Fokus hing an einem Schatten – ohne Ersatz wäre er unsichtbar */
input:focus,
select:focus,
textarea:focus,
.btn:focus,
button:focus,
a.btn:focus
{
	border-color: var(--sendy-focus) !important;
	outline: 1px solid var(--sendy-focus);
	outline-offset: 0;
}

/* ---------------------------------------------------------------- *
 * 2. Einheitlicher Radius
 * ---------------------------------------------------------------- */

.btn,
.btn-large,
.btn-small,
.btn-mini,
button,
input,
select,
textarea,
.uneditable-input,
.input-append input,
.input-prepend input,
.add-on,
.well,
.grand_total,
#attachments li,
#rdp-email,
.rounded-dashed-box,
.modal,
.modal-header,
.modal-footer,
.dropdown-menu,
.alert,
.label,
.badge,
.thumbnail,
.progress,
.progress .bar,
.popover,
.tooltip-inner,
.nav-tabs > li > a,
.nav-pills > li > a,
.nav-list > li > a,
.dropdown-menu a,
.dropdown-menu li > a,
blockquote,
.sidebar-box,
.sidebar-box .nav-list > li > a,
.tab-active,
.pagination ul,
.breadcrumb,
.accordion-group,
.hero-unit,
table,
table.table,
.table,
.table-wrapper,
.rules-table-scroll,
.navbar-inner,
.navbar-fixed-top .navbar-inner,
.table-bordered,
.smtp-provider-img,
.brand-smtp-icons img,
.send-newsletter-now-icon,
code,
pre,
.img-rounded,
.img-polaroid,
.container-fluid > .row-fluid > .span10,
.container-fluid > .row-fluid > .span10 > .row-fluid:first-child,
.container-fluid > .row-fluid > .sendy-report-card,
.sendy-report-card,
.report-metric-card,
.report-metric-pill,
.sendy-report-score,
.sendy-report-score-bar,
.sendy-content-improvements-panel,
.popover-title,
.typeahead,
.well-large,
.well-small,
#wrapper,
.ck.ck-editor,
.ck.ck-editor__top,
.ck.ck-editor__top .ck-toolbar,
.ck.ck-editor__editable,
.ck.ck-editor__main > .ck-editor__editable,
#campaign-save-only-btn,
#autoresponder-save-only-btn,
.gjs-block,
.gjs-btn-prim,
.gjs-field,
.gjs-clm-tag,
.gjs-mdl-dialog,
.sendy-template-picker,
.sendy-mt-preview-box
{
	border-radius: var(--sendy-radius) !important;
}

/* Datei-Manager (eigene Seite, eigene Klassen) */
.panel,
.upload,
.message,
.loading-card,
.icon,
.preview,
.tile,
.crumb
{
	border-radius: var(--sendy-radius) !important;
}

/* Native Bedienelemente behalten ihre Form */
input[type="radio"]
{
	border-radius: 50% !important;
}

input[type="checkbox"]
{
	border-radius: 2px !important;
}

.navbar .btn-navbar .icon-bar
{
	border-radius: 1px !important;
}

/* Der KI-Betreff-Knopf setzt seinen Radius in einem <style> im Body, also
   später im Dokument als diese Datei. Bei gleicher Spezifität gewinnt der
   spätere – deshalb hier eine Klasse mehr. */
.btn-group > .btn.sendy-ai-subject-btn,
.btn-group > .btn.sendy-ai-subject-btn:first-child,
.btn-group > .btn.sendy-ai-subject-btn:last-child,
.btn-group > .btn.sendy-ai-subject-btn.dropdown-toggle
{
	border-radius: var(--sendy-radius) !important;
}

/* Kreise bleiben Kreise */
.gravatar,
.img-circle,
.avatar,
.loading-spinner
{
	border-radius: 50% !important;
}

/* Zusammenhängende Gruppen: nur aussen runden, innen bündig */
.btn-group > .btn,
.btn-group > .btn + .btn,
.btn-group > .dropdown-menu,
.input-prepend .add-on,
.input-append .add-on,
.input-prepend input,
.input-append input,
.input-prepend .btn,
.input-append .btn,
.pagination ul > li > a,
.pagination ul > li > span
{
	border-radius: 0 !important;
}

.btn-group > .btn:first-child,
.input-prepend .add-on:first-child,
.input-append input:first-child,
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span
{
	border-top-left-radius: var(--sendy-radius) !important;
	border-bottom-left-radius: var(--sendy-radius) !important;
}

.btn-group > .btn:last-child,
.btn-group > .btn.dropdown-toggle,
.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-prepend input:last-child,
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span
{
	border-top-right-radius: var(--sendy-radius) !important;
	border-bottom-right-radius: var(--sendy-radius) !important;
}

/* Kopf- und Datenzellen mit gleichem Innenabstand: in der Autoresponder-Tabelle
   setzt Sendy `td { padding: 20px 8px }` gegen `th { padding: 14px }`, der Text
   steht dadurch 6px versetzt. */
.ares-email-table th,
.ares-email-table td
{
	padding: 14px 14px !important;
}

/* Tabellen: nur die vier Aussenecken. table.table klammert seinen Inhalt
   ohnehin mit overflow:hidden, dort brauchen die Zellen gar keinen Radius. */
th,
td,
.table th,
.table td,
.table-bordered th,
.table-bordered td
{
	border-radius: 0 !important;
}

.table-bordered thead:first-child tr:first-child > th:first-child,
.table-bordered tbody:first-child tr:first-child > td:first-child
{
	border-top-left-radius: var(--sendy-radius) !important;
}

.table-bordered thead:first-child tr:first-child > th:last-child,
.table-bordered tbody:first-child tr:first-child > td:last-child
{
	border-top-right-radius: var(--sendy-radius) !important;
}

.table-bordered tbody:last-child tr:last-child > td:first-child,
.table-bordered tfoot:last-child tr:last-child > td:first-child
{
	border-bottom-left-radius: var(--sendy-radius) !important;
}

.table-bordered tbody:last-child tr:last-child > td:last-child,
.table-bordered tfoot:last-child tr:last-child > td:last-child
{
	border-bottom-right-radius: var(--sendy-radius) !important;
}

/* Modal: Kopf und Fuss schliessen bündig an den Rahmen an */
.modal-header
{
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.modal-footer
{
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

/* ---------------------------------------------------------------- *
 * 3. Linke Spalte auf gleicher Höhe wie der Inhalt
 *
 * Sendy setzt die Reihe auf align-items:flex-start, gibt der Seitenleiste
 * einen eigenen Abstand nach oben und lässt sie mit ihrem Inhalt enden.
 * Dadurch beginnt sie tiefer als die Inhaltskarte und hört früher auf.
 * ---------------------------------------------------------------- */

@media (min-width: 980px)
{
	.container-fluid > .row-fluid
	{
		align-items: stretch;
	}

	.container-fluid > .row-fluid > .span2
	{
		display: flex;
		flex-direction: column;
		/* sticky ergäbe bei voller Höhe keinen Sinn mehr */
		position: static;
	}

	.container-fluid > .row-fluid > .span2 > .brand-sidebar-panel,
	.container-fluid > .row-fluid > .span2 > .sidebar-box
	{
		margin-top: 0;
	}

	.container-fluid > .row-fluid > .span2 > .sidebar-box
	{
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------- *
 * 4. Gleiche Höhe für Bedienelemente
 *
 * Sendy mischt hier drei Höhen: Felder 48px (min-height plus Innenabstand),
 * Knöpfe 44px (rein aus dem Innenabstand), Datums- und Dateifelder 32px.
 * Nebeneinander – etwa Suchfeld und Suchknopf – fällt das sofort auf.
 *
 * Die Grössenvarianten .btn-large/.btn-small/.btn-mini bleiben bewusst
 * unangetastet, sie sind ja gewollt unterschiedlich.
 * ---------------------------------------------------------------- */

/* Felder: feste Höhe (bei Formularelementen wirkt height zuverlässig) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not(.gjs-field),
select:not(.gjs-field):not([multiple]):not([size]),
.uneditable-input,
.add-on
{
	height: var(--sendy-control-height) !important;
	min-height: var(--sendy-control-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: calc(var(--sendy-control-height) - 2px) !important;
	box-sizing: border-box !important;
}

/* Knöpfe bleiben bei Sendys eigenen Massen. Ein erzwungener Innenabstand
   zerschiesst Knöpfe mit fester Höhe (der Files-Knopf im Editor hat
   height:18px) und lässt gefloatete Knöpfe überlappen. Die Felder sind
   ohnehin diejenigen, die aus der Reihe fielen. */

/* Knöpfe, die <a>-Elemente sind, bleiben display:inline. Deren Innenabstand
   zählt nicht in die Zeilenhöhe – brechen zwei solche Knöpfe untereinander um
   (Speichern / Speichern & weiter in der schmalen Spalte), überlappen sie sich.
   inline-block behebt das.
   Bewusst ohne !important und mit Ausnahmen: .btn-navbar wird von Sendy per
   display:none versteckt, IDs und Inline-Styles gewinnen ohnehin. */
a.btn:not(.btn-navbar):not(.sendy-file-manager-btn)
{
	display: inline-block;
}

/* Damit <a class="btn"> und <button class="btn"> gleich hoch bleiben: der
   Anker erbt die Zeilenhöhe des Fliesstexts (19,5px), das Button-Element
   bringt seine eigene mit (18px). Ohne !important – Sendys eigene Angaben
   und Inline-Styles behalten Vorrang. */
.btn:not(.btn-large):not(.btn-small):not(.btn-mini):not(.gjs-btn-prim):not(.sendy-file-manager-btn),
button:not(.btn-large):not(.btn-small):not(.btn-mini):not(.gjs-btn-prim):not(.gjs-pn-btn)
{
	line-height: 18px;
}

/* Sendy verschiebt den Speichern-Knopf per position:relative um 1px nach unten
   und 5px nach links – damit steht er versetzt zum Knopf daneben und berührt
   ihn beim Umbruch. Der Abstand darunter trennt die beiden, wenn sie in einer
   schmalen Spalte untereinander rutschen. */
#campaign-save-only-btn,
#autoresponder-save-only-btn
{
	position: static;
	margin-bottom: 6px;
}

/* Der Datei-Manager versteckt sein Datei-Feld über Grösse und Deckkraft –
   eine erzwungene Höhe würde daraus einen unsichtbaren 44px-Streifen machen */
.upload input
{
	height: 1px !important;
	min-height: 1px !important;
}

/* Mehrzeiliges bleibt mehrzeilig */
textarea
{
	min-height: var(--sendy-control-height);
	line-height: 1.5 !important;
}

/* Werkzeugleiste im Text (GrapesJS): Fett, Kursiv, Unterstrichen und
   Durchgestrichen sind Buchstaben, die letzten beiden Aktionen – Link und
   „Wrap for style" – dagegen SVG-Grafiken ohne eigene Grössenangabe. Fällt die
   Grössen- oder Farbregel von GrapesJS aus, sind sie unsichtbar, obwohl der
   Knopf da ist (Tooltip erscheint). Beides wird hier festgenagelt: Grösse
   explizit, Farbe an der des Textes daneben – die stimmt ja nachweislich. */
.gjs-rte-toolbar .gjs-rte-action svg
{
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	fill: currentColor !important;
}

.gjs-rte-toolbar .gjs-rte-action svg path
{
	fill: currentColor !important;
}

/* Mehrfachauswahl ist keine einzeilige Auswahlliste: mehrere Einträge auf
   einmal zu sehen ist ihr ganzer Zweck. Die feste Höhe oben gilt für sie
   deshalb nicht, hier steht nur eine Untergrenze – eigene Angaben aus Sendy
   (etwa height:200px bei den Listen im Kampagnenversand) bleiben gültig. */
select[multiple],
select[size]:not([size="1"])
{
	min-height: calc(var(--sendy-control-height) * 3);
	line-height: 1.5;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* ---------------------------------------------------------------- *
 * 5. Aktive Reiter sichtbar machen
 *
 * Sendy unterscheidet den aktiven Reiter einer Button-Gruppe nur über
 * `box-shadow: inset 0 2px 4px` – Hintergrund, Rahmen und Farbe bleiben
 * gleich. Ohne Schatten wäre er nicht mehr erkennbar.
 * ---------------------------------------------------------------- */

.btn-group[data-toggle="buttons-radio"] > .btn.active,
.btn-group[data-toggle="buttons-radio"] > .btn.active:hover,
.btn-group[data-toggle="buttons-radio"] > .btn.active:focus,
.btn-group > .btn.active,
.btn.active,
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus,
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.tab-active
{
	background: var(--sendy-active-bg) !important;
	border-color: var(--sendy-active-border) !important;
	color: var(--sendy-active-ink) !important;
}

/* Icons und Beschriftung im aktiven Reiter mitfärben */
.btn-group[data-toggle="buttons-radio"] > .btn.active [class^="icon-"],
.btn-group[data-toggle="buttons-radio"] > .btn.active [class*=" icon-"],
.nav-tabs > .active > a [class^="icon-"],
.tab-active [class^="icon-"]
{
	color: var(--sendy-active-ink) !important;
}

/* Der aktive Eintrag in der Seitenleiste bekommt zusätzlich eine Kante */
.sidebar-box .nav-list > .active > a
{
	border-left: 3px solid var(--sendy-active-border) !important;
	padding-left: 11px !important;
}

/* Editor: aktives Werkzeug im GrapesJS-Panel */
.gjs-pn-btn.gjs-pn-active
{
	color: var(--sendy-active-border) !important;
}