/* =============================================================
   esb-hosting · Domain Interface
   Brand-Override für Bootstrap 5.3
   Farben : Polar Silver F8F8F8 · Cyber Mint E1F1EC · Stone Grey CDCDCD
            Magic Green 1AD2AA · Night Black 303030
   Fonts  : Chillax (Headlines) · Montserrat (Body)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=chillax@200,300,400,500,600,700&display=swap');

:root{
  --polar-silver:#F8F8F8;
  --cyber-mint:#E1F1EC;
  --stone-grey:#CDCDCD;
  --magic-green:#1AD2AA;
  --magic-green-deep:#14B594;
  --night-black:#303030;

  /* Bootstrap variable overrides */
  --bs-primary: #1AD2AA;
  --bs-primary-rgb: 26,210,170;
  --bs-body-font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-body-bg: #F8F8F8;
  --bs-body-color: #303030;
  --bs-link-color: #14B594;
  --bs-link-hover-color: #303030;
  --bs-border-color: #CDCDCD;
  --bs-border-radius: .65rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .9rem;
}

/* ---------- Base ---------- */
body{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(26,210,170,.08), transparent 60%),
    radial-gradient(700px 400px at 0% 10%, rgba(225,241,236,.5), transparent 65%),
    #F8F8F8 !important;
  color: #303030;
  min-height: 100vh;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: 'Chillax', 'Montserrat', sans-serif;
  font-weight: 500;
  color: #303030;
  letter-spacing: -.01em;
}

a{transition: color .15s ease}

/* ---------- Navbar ---------- */
.navbar.bg-dark, .navbar-dark.bg-dark{
  background: #303030 !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(48,48,48,.04);
}
.navbar-dark .navbar-brand{
  font-family: 'Chillax', sans-serif;
  font-weight: 600;
  color: #F8F8F8 !important;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 12px;
}
.navbar-dark .navbar-brand img.logo{
  height: 26px; width: auto; display: block;
}
.navbar-dark .navbar-nav .nav-link{
  color: rgba(248,248,248,.85) !important;
  font-weight: 500;
  font-size: 14.5px;
  padding: .55rem .85rem;
  border-radius: .55rem;
  margin: 0 2px;
  transition: background .15s ease, color .15s ease;
}
.navbar-dark .navbar-nav .nav-link:hover{
  color: #1AD2AA !important;
  background: rgba(26,210,170,.10);
}
.navbar-dark .navbar-nav .nav-link.active{
  color: #1AD2AA !important;
  background: rgba(26,210,170,.14);
}
.navbar .text-white-50{color: rgba(248,248,248,.55) !important}
.navbar .btn-outline-light{
  border-color: rgba(248,248,248,.25);
  color: #F8F8F8;
  font-weight: 500;
}
.navbar .btn-outline-light:hover{
  background: #1AD2AA;
  border-color: #1AD2AA;
  color: #303030;
}

/* ---------- Container ---------- */
.bg-light{background: transparent !important}

/* ---------- Cards ---------- */
.card{
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: .9rem;
  box-shadow: 0 1px 2px rgba(48,48,48,.04), 0 1px 1px rgba(48,48,48,.03);
}
.card:hover{box-shadow: 0 6px 24px rgba(48,48,48,.06), 0 2px 6px rgba(48,48,48,.04)}
.card-header{
  background: transparent;
  border-bottom: 1px solid #EFEFEF;
  font-weight: 600;
  font-family: 'Chillax', sans-serif;
  color: #303030;
}
.card-body{padding: 1.25rem}

/* ---------- Buttons ---------- */
.btn{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: .55rem 1.1rem;
  border-radius: .55rem;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{transform: translateY(1px)}

.btn-primary{
  background: #1AD2AA;
  border-color: #1AD2AA;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(26,210,170,.25);
}
.btn-primary:hover, .btn-primary:focus{
  background: #14B594;
  border-color: #14B594;
  color: #FFFFFF;
}
.btn-primary:focus{box-shadow: 0 0 0 .2rem rgba(26,210,170,.25)}
.btn-primary:disabled, .btn-primary.disabled{
  background: #1AD2AA; border-color: #1AD2AA; color: #FFFFFF; opacity: .55;
}

.btn-outline-primary{
  color: #14B594;
  border-color: #1AD2AA;
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
  background: #1AD2AA;
  border-color: #1AD2AA;
  color: #FFFFFF;
}

.btn-secondary{
  background: #FFFFFF;
  border-color: #CDCDCD;
  color: #303030;
}
.btn-secondary:hover{
  background: #E1F1EC;
  border-color: rgba(26,210,170,.4);
  color: #14B594;
}

.btn-danger{
  background: #D64545; border-color: #D64545; color: #FFF;
}
.btn-danger:hover{background:#B83737; border-color:#B83737}

.btn-sm{padding: .35rem .75rem; font-size: 13px; border-radius: .45rem}

/* ---------- Forms ---------- */
.form-label{
  font-size: 13px; font-weight: 500;
  color: #6B6B6B;
  margin-bottom: 6px;
}
.form-control, .form-select{
  background: #FFFFFF;
  border: 1px solid #CDCDCD;
  color: #303030;
  border-radius: .5rem;
  padding: .55rem .8rem;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .form-select:hover{border-color: #B0B0B0}
.form-control:focus, .form-select:focus{
  border-color: #1AD2AA;
  box-shadow: 0 0 0 .2rem rgba(26,210,170,.22);
  background: #FFFFFF;
  color: #303030;
}
.form-control::placeholder{color: #9A9A9A}
.form-text{color: #6B6B6B; font-size: 12.5px}
.form-check-input:checked{
  background-color: #1AD2AA;
  border-color: #1AD2AA;
}
.form-check-input:focus{
  border-color: #1AD2AA;
  box-shadow: 0 0 0 .2rem rgba(26,210,170,.22);
}

/* ---------- Tables ---------- */
.table{
  --bs-table-bg: #FFFFFF;
  --bs-table-color: #303030;
  --bs-table-border-color: #EFEFEF;
  --bs-table-striped-bg: rgba(225,241,236,.35);
  --bs-table-striped-color: #303030;
  --bs-table-hover-bg: rgba(225,241,236,.55);
  border-radius: .75rem;
  overflow: hidden;
}
.table thead th{
  background: #E1F1EC;
  color: #303030;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid #EFEFEF;
  padding: .75rem .85rem;
}
.table tbody td{
  padding: .75rem .85rem;
  font-size: 14px;
  vertical-align: middle;
}
.table-bordered{border: 1px solid #E6E6E6}

/* ---------- Tabs ---------- */
.nav-tabs{border-bottom: 1px solid #E6E6E6}
.nav-tabs .nav-link{
  color: #6B6B6B;
  border: 1px solid transparent;
  border-radius: .55rem .55rem 0 0;
  padding: .55rem 1rem;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: -1px;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.nav-tabs .nav-link:hover{
  color: #14B594;
  background: rgba(225,241,236,.5);
  border-color: transparent;
}
.nav-tabs .nav-link.active{
  color: #303030;
  background: #FFFFFF;
  border-color: #E6E6E6 #E6E6E6 #FFFFFF;
  font-weight: 600;
}

/* ---------- Alerts ---------- */
.alert{
  border-radius: .55rem;
  border-width: 1px;
  padding: .8rem 1rem;
  font-size: 14px;
}
.alert-success{
  background: #E1F1EC;
  border-color: rgba(26,210,170,.3);
  color: #0C7359;
}
.alert-danger{
  background: #FBE9E9;
  border-color: rgba(214,69,69,.25);
  color: #8A2929;
}
.alert-warning{
  background: #FDF3E0;
  border-color: rgba(201,135,0,.25);
  color: #7A5500;
}
.alert-info{
  background: #EAF4FB;
  border-color: #C7E1F2;
  color: #1C4F73;
}

/* ---------- Badges ---------- */
.badge{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: .35em .65em;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .03em;
}
.badge.bg-primary{background: #1AD2AA !important; color: #FFF}
.badge.bg-success{background: #1AD2AA !important; color: #FFF}
.badge.bg-secondary{background: #CDCDCD !important; color: #303030}
.badge.bg-danger{background: #D64545 !important}
.badge.bg-warning{background: #E5A100 !important; color: #FFF}

/* ---------- Pagination ---------- */
.page-link{color: #14B594; border-color: #E6E6E6}
.page-link:hover{background: #E1F1EC; color: #14B594; border-color: #E6E6E6}
.page-item.active .page-link{background: #1AD2AA; border-color: #1AD2AA}

/* ---------- Dropdowns ---------- */
.dropdown-menu{
  border: 1px solid #E6E6E6;
  border-radius: .75rem;
  box-shadow: 0 16px 40px rgba(48,48,48,.10), 0 4px 10px rgba(48,48,48,.05);
  padding: .35rem;
}
.dropdown-item{
  border-radius: .45rem;
  padding: .5rem .75rem;
  font-size: 14px;
  font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: #E1F1EC;
  color: #14B594;
}

/* ---------- Modal ---------- */
.modal-content{
  border: 0;
  border-radius: .9rem;
  box-shadow: 0 30px 60px rgba(48,48,48,.20);
}
.modal-header{
  border-bottom: 1px solid #EFEFEF;
  padding: 1rem 1.25rem;
}
.modal-title{font-family: 'Chillax', sans-serif; font-weight: 500}
.modal-footer{border-top: 1px solid #EFEFEF}

/* ---------- Misc ---------- */
.text-muted{color: #6B6B6B !important}
::selection{background: #1AD2AA; color: #FFF}

/* ---------- Code ---------- */
code, .text-monospace, .font-monospace{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .92em;
  background: rgba(48,48,48,.06);
  color: #303030;
  padding: 1px 6px;
  border-radius: 6px;
}
pre code{background: transparent; padding: 0}