/* ============================================================
   BKT-Portal – Haupt-Stylesheet
   Datei: assets/css/main.css
   Farben: Rot #D21E28 · Schwarz #111111 · Weiß #FFFFFF
   ============================================================ */
:root,
body.light {
    --primary:#bb1614;
    --on-primary:#ffffff;
    --primary-container:#ffdad5;
    --on-primary-container:#410001;
    --secondary:#775652;
    --on-secondary:#ffffff;
    --secondary-container:#ffdad5;
    --on-secondary-container:#2c1512;
    --tertiary:#705c2e;
    --on-tertiary:#ffffff;
    --tertiary-container:#fcdfa6;
    --on-tertiary-container:#261a00;
    --error:#ba1a1a;
    --on-error:#ffffff;
    --error-container:#ffdad6;
    --on-error-container:#410002;
    --background:#fffbff;
    --on-background:#201a19;
    --surface:#fff8f7;
    --on-surface:#201a19;
    --surface-variant:#f5ddda;
    --on-surface-variant:#534341;
    --outline:#857370;
    --outline-variant:#d8c2be;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#362f2e;
    --inverse-on-surface:#fbeeec;
    --inverse-primary:#ffb4a9;
    --surface-dim:#e4d7d5;
    --surface-bright:#fff8f7;
    --surface-container-lowest:#ffffff;
    --surface-container-low:#fef1ef;
    --surface-container:#f8ebe9;
    --surface-container-high:#f3e5e3;
    --surface-container-highest:#ede0de;
}
body.dark {
  --primary: #cfbcff;
  --on-primary: #381e72;
  --primary-container: #4f378a;
  --on-primary-container: #e9ddff;
  --secondary: #cbc2db;
  --on-secondary: #332d41;
  --secondary-container: #4a4458;
  --on-secondary-container: #e8def8;
  --tertiary: #efb8c8;
  --on-tertiary: #4a2532;
  --tertiary-container: #633b48;
  --on-tertiary-container: #ffd9e3;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: #1c1b1e;
  --on-background: #e6e1e6;
  --surface: #141316;
  --on-surface: #e6e1e6;
  --surface-variant: #49454e;
  --on-surface-variant: #cac4cf;
  --outline: #948f99;
  --outline-variant: #49454e;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e6e1e6;
  --inverse-on-surface: #313033;
  --inverse-primary: #6750a4;
  --surface-dim: #141316;
  --surface-bright: #3a383c;
  --surface-container-lowest: #0f0e11;
  --surface-container-low: #1c1b1e;
  --surface-container: #201f22;
  --surface-container-high: #2b292d;
  --surface-container-highest: #363438;
}

html { font-size: 16px; }

body.moving-truck {
	background-image: url('../img/transport.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.error-text   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.success-text { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }

.mt-nav, .mt-14 { margin-top: 56px;}
.mt, .mt-4 { margin-top: 16px;}
.mt-3 { margin-top: 12px;}
.mt-2 { margin-top: 8px;}
.mt-1 { margin-top: 4px;}

.mb, .mb-4 { margin-bottom: 16px;}
.mb-3 { margin-bottom: 12px;}
.mb-2 { margin-bottom: 8px;}
.mb-1 { margin-bottom: 4px;}

.pb, .pb-4 { padding-bottom: 16px;}
.pb-3 { padding-bottom: 12px;}
.pb-2 { padding-bottom: 8px;}
.pb-1 { padding-bottom: 4px;}

.ms, .ms-4 { margin-left: 16px;}
.ms-3 { margin-left: 12px;}
.ms-2 { margin-left: 8px;}
.ms-1 { margin-left: 4px;}

.bkt-color {
    color: #D21E28;
}
.bkt-border {
    border-color: #D21E28;
}

.bkt-background, .bkt-error {
    background: #D21E28;
}
.bkt-error-color {
    color: #D21E28;
}
.dispo-background, .bkt-success {
    background: #166534;
}
.bkt-success-color {
    color: #166534;
}
.fibu-background, .bkt-info {
    background: #254ac3;
}
.fahrer-background, .bkt-warning {
    background: #d3801c;
}
.bkt-warning-color {
    color: #d3801c;
}
.sub-background {
    background: #decc0e;
}

.bkt-standard {
  background: transparent;
  color: black !important;
}
.bkt-bronze {
  background: #bc4d15;
}
.bkt-silber {
  background: #b6b0ad;
  color: black !important;
}
.bkt-gold {
  background: #e1c004;
}

.uk-background-primary {
    background: #D21E28;
}
.uk-background-default {
    background: #f9fafc;
    color: black !important;
}

/* ---------- Layout ----------------------------- */

.list-hr {
  margin-left: 16px;
  margin-right: 16px;
}

#left-col {
    position: fixed;
    left: 0;
    top: 52px;
    bottom:0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #222A30;
    width: 200px;
    z-index:2;
    transition: height 0.3s ease-out;
}

.left-logo {
    width: 200px;
	background: #f9fafc;
}

#content {
	padding: 60px 30px;
	background-color: #f7f7f7;
	margin-left: 200px;
	transition: margin 0.2s cubic-bezier(.4,0,.2,1);
}

/* ---------- Navigation ------------------------- */

#top-head {
	z-index: 9;
	top: 0;
	left:0;
	right:0;
}
.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
  min-height: 52px;
  padding: 0 8px;
  font-size: 0.85rem;
}
.navbar-logo {
	background-color: #222A30;
	margin-left: -12px;
}
.left-nav-wrap {
	padding-bottom: 60px;
}
.bar-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
	padding: 15px 0;
    background-color: #222A30;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 3;
    bottom: 0;
    width: 200px;
}

/* ---------- Buttons ---------------------------- */

button.uk-button-default {
    background: #f9fafc;
    border-radius: 15px;
    border: 0.5px solid lightgray;
}
button.uk-button-default:hover {
    background-color: lightgray;
    border-radius: 15px;
    border: 0.5px solid lightgray;
}
button.uk-button-primary {
    background: #D21E28;
    border-radius: 15px;
    border: 0.5px solid lightgray;
}
button.uk-button-primary:hover {
    background-color: #ffb4a9;
    border-radius: 15px;
    border: 0.5px solid lightgray;
}

/* ---------- Switch ---------------------------- */

.uk-switch {
    position: relative;
    display: inline-block;
    height: 34px;
    width: 60px;
}
  
  /* Hide default HTML checkbox */
  .uk-switch input {
	display:none;
  }

  .uk-switch-label {
    font-size: large;
    margin-bottom: 8px;
  }
  /* Slider */
  .uk-switch-slider {
	background-color: rgba(0,0,0,0.22);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 500px;
	bottom: 0;
	cursor: pointer;
	transition-property: background-color;
	  transition-duration: .2s;
	box-shadow: inset 0 0 2px rgba(0,0,0,0.07);
  }
  /* Switch pointer */
  .uk-switch-slider:before {
	content: '';
	background-color: #fff;
	position: absolute;
	width: 30px;
	height: 30px;
	left: 2px;
	bottom: 2px;
	border-radius: 50%;
	transition-property: transform, box-shadow;
	  transition-duration: .2s;
  }
  /* Slider active color */
  input:checked + .uk-switch-slider {
	background-color: #D21E28 !important;
  }
  /* Pointer active animation */
  input:checked + .uk-switch-slider:before {
	transform: translateX(26px);
  }
  
  /* Modifiers */
  .uk-switch-slider.uk-switch-on-off {
	background-color: #f0506e;
  }
  input:checked + .uk-switch-slider.uk-switch-on-off {
	background-color: #32d296 !important;
  }
  
  /* Style Modifier */
  .uk-switch-slider.uk-switch-big:before {
	transform: scale(1.2);
	box-shadow: 0 0 6px rgba(0,0,0,0.22);
  }
  .uk-switch-slider.uk-switch-small:before {
	box-shadow: 0 0 6px rgba(0,0,0,0.22);
  }
  input:checked + .uk-switch-slider.uk-switch-big:before {
	transform: translateX(26px) scale(1.2);
  }
  
  /* Inverse Modifier - affects only default */
  .uk-light .uk-switch-slider:not(.uk-switch-on-off) {
	background-color: rgba(255,255,255,0.22);
  }