/* =========================================================
   Job-Einfach.de — Backend Redesign v2 (Dashboard-Design)
   Restyles the Spruko/Bootstrap admin markup to match the new
   "Dashboard.dc.html" design. Loaded LAST, fully reversible.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --je-green:#0f7a4d; --je-green-strong:#0b5c3a; --je-green-bright:#1fa363; --je-green-light:#35d68a;
  --je-tint:#eaf5ef; --je-tint2:#f6fbf8; --je-ring:rgba(15,122,77,.20);
  --je-bg:#f4f6f4; --je-surface:#ffffff; --je-surface2:#fafbfa;
  --je-ink:#16241d; --je-soft:#3d4c44; --je-muted:#7c8b83; --je-muted2:#8b978f;
  --je-border:#e4e8e4; --je-border-soft:#eef1ee; --je-sidebar:#0d2b1e;
  --je-ok:#0f7a4d; --je-ok-t:#eaf5ef; --je-warn:#a8761f; --je-warn-t:#fdf4e5;
  --je-dang:#c0452f; --je-dang2:#a83a25; --je-dang-t:#fbe9e7; --je-info:#2A72D4; --je-info-t:#e7f0fc;
  --je-shadow:0 1px 2px rgba(16,30,24,.04),0 10px 26px -16px rgba(16,30,24,.14);
  --je-r:16px; --je-r-sm:10px; --je-pill:999px;
  --je-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- base ---------- */
body{ background:var(--je-bg)!important; color:var(--je-ink);
  font-family:'Figtree',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased; }
.page, .page-main{ background:transparent!important; }
a{ color:var(--je-green); }
a:hover{ color:var(--je-green-strong); }
.text-primary{ color:var(--je-green)!important; }
.tabular, .number-font, .tnum{ font-variant-numeric:tabular-nums; }
.je-mono{ font-family:var(--je-mono); }

/* ---------- SIDEBAR ---------- */
.app-sidebar{ background:var(--je-sidebar)!important; border-right:0!important; box-shadow:none!important; }
.app-sidebar__logo{ background:transparent!important; border-bottom:1px solid rgba(255,255,255,.07)!important; padding:16px 18px!important; }
.app-sidebar .side-menu{ padding:10px 14px!important; }
.side-menu h3, .side-menu .sub-category h3, .app-sidebar__category, .side-menu .sub-category{
  color:rgba(255,255,255,.38)!important; font-size:10px!important; font-weight:600!important; letter-spacing:.14em!important;
  text-transform:uppercase!important; margin:18px 10px 6px!important; padding:0!important; }
.side-menu__item{ display:flex!important; align-items:center!important; gap:10px!important;
  color:rgba(255,255,255,.72)!important; border-radius:10px!important; padding:10px 12px!important; margin:2px 0!important;
  font-size:14px!important; font-weight:500!important; position:relative; background:transparent!important; box-shadow:none!important; }
.side-menu__item:hover{ background:rgba(255,255,255,.06)!important; color:#eaf1ec!important; }
.side-menu__item.active, .slide.is-expanded>.side-menu__item{
  background:rgba(31,163,99,.16)!important; color:#fff!important; font-weight:600!important;
  box-shadow:inset 2px 0 0 var(--je-green-bright)!important; }
.side-menu__item.active::before{ display:none!important; }
.side-menu__icon, .side-menu__item i{ color:currentColor!important; opacity:.85; font-size:17px!important; }
.side-menu__item.active .side-menu__icon{ color:var(--je-green-light)!important; opacity:1; }
.side-menu__label{ color:inherit!important; }
.slide-menu{ background:rgba(0,0,0,.18)!important; border-radius:10px!important; margin:2px 0 4px!important; }
.slide-item{ color:rgba(255,255,255,.62)!important; font-size:13px!important; padding:7px 12px 7px 40px!important; }
.slide-item:hover, .slide-item.active{ color:var(--je-green-light)!important; background:transparent!important; }
.angle{ color:rgba(255,255,255,.5)!important; }
.app-sidebar__toggle{ color:var(--je-soft); }

/* ---------- HEADER / TOPBAR ---------- */
.app-header.header{ background:color-mix(in srgb,var(--je-bg) 88%,transparent)!important;
  backdrop-filter:blur(8px); border-bottom:1px solid var(--je-border)!important; box-shadow:none!important; }
.app-header .app-sidebar__toggle, .app-header .app-sidebar__toggle span, .app-header .app-sidebar__toggle i,
.app-header .nav-link.icon, .app-header .nav-link.icon i, .app-header .fe, .app-header .header-icon{ color:var(--je-soft)!important; }
.app-header .nav-link.icon{ border-radius:10px!important; }
.app-header .nav-link.icon:hover{ background:var(--je-surface)!important; box-shadow:var(--je-shadow); }
.header-right-icons .profile-user{ border:2px solid var(--je-border)!important; }
.app-header .theme-layout, .app-header .layout-setting, .app-header #darkmode, .app-header #lightmode{ display:none!important; }
.side-header{ background:var(--je-sidebar)!important; border-bottom:1px solid rgba(255,255,255,.07)!important; }
.side-header .header-brand-img.light-logo1,
.side-header .header-brand-img.light-logo,
.side-header .header-brand-img.toggle-logo{ display:none!important; }
.side-header .header-brand-img.desktop-logo{ display:block!important; }
.logo-horizontal img.header-brand-img, .header-brand-img{
  height:32px!important; width:auto!important; max-width:172px!important; object-fit:contain!important; padding:0!important; }
.app-sidebar__logo{ display:flex!important; align-items:center!important; }
@media (min-width:992px){ .app-header .logo-horizontal{ display:none!important; } }

/* USER DROPDOWN */
.profile-1 .dropdown-menu, .dropdown-menu{ min-width:236px!important; border:1px solid var(--je-border)!important;
  border-radius:14px!important; box-shadow:0 20px 52px -18px rgba(16,30,24,.30)!important; padding:8px!important; margin-top:10px!important; }
.drop-heading{ padding:12px 12px 14px!important; }
.drop-heading h5{ font-weight:700!important; color:var(--je-ink)!important; }
.drop-heading small, .drop-heading .text-muted{ color:var(--je-muted)!important; }
.dropdown-item{ border-radius:10px!important; font-size:13.5px!important; padding:10px 12px!important;
  color:var(--je-soft)!important; display:flex!important; align-items:center!important; gap:10px!important; }
.dropdown-item i, .dropdown-item .dropdown-icon{ color:var(--je-green)!important; }
.dropdown-item:hover{ background:var(--je-tint)!important; color:var(--je-green-strong)!important; }
.dropdown-item:hover i, .dropdown-item:hover .dropdown-icon{ color:var(--je-green-strong)!important; }
.dropdown-divider{ border-color:var(--je-border-soft)!important; margin:6px 4px!important; }

/* ---------- PAGE HEADER ---------- */
.page-header{ background:transparent!important; border:0!important; padding:0 0 4px!important; margin-bottom:20px!important;
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.page-title{ font-size:25px!important; font-weight:700!important; letter-spacing:-.02em!important; color:var(--je-ink)!important; }
.breadcrumb{ background:transparent!important; padding:0!important; margin:0!important; }
.breadcrumb-item, .breadcrumb-item a{ color:var(--je-muted)!important; font-size:12.5px!important; font-weight:500; }
.breadcrumb-item.active{ color:var(--je-ink)!important; }
.main-content.app-content{ padding-top:66px!important; }

/* ---------- CARDS ---------- */
.card{ background:var(--je-surface)!important; border:1px solid var(--je-border)!important;
  border-radius:var(--je-r)!important; box-shadow:var(--je-shadow)!important; }
.card-header{ border-bottom:1px solid var(--je-border-soft)!important; background:transparent!important; padding:18px 20px!important; }
.card-title{ font-size:16px!important; font-weight:700!important; letter-spacing:-.01em!important; margin:0!important; }
.card-body{ padding:20px!important; }
.card-widget, .img-card{ position:relative; }
.card .fs-30, .card .fs-40{ font-size:30px!important; font-weight:700!important; letter-spacing:-.03em!important; }
/* KPI round icon */
.icon-size{ width:50px!important; height:50px!important; padding:0!important; margin-right:14px!important;
  line-height:50px!important; text-align:center!important; font-size:22px!important; display:inline-block!important;
  border-radius:14px!important; border:0!important; box-shadow:none!important;
  background:var(--je-tint)!important; color:var(--je-green)!important; }
.icon-size.text-primary{ color:var(--je-green)!important; background:var(--je-tint)!important; }
.icon-size.text-warning{ color:var(--je-warn)!important; background:var(--je-warn-t)!important; }
.icon-size.text-info{ color:var(--je-info)!important; background:var(--je-info-t)!important; }
.icon-size.text-danger{ color:var(--je-dang)!important; background:var(--je-dang-t)!important; }
.icon-size.text-success{ color:var(--je-ok)!important; background:var(--je-ok-t)!important; }
.box-primary-shadow,.box-danger-shadow,.box-success-shadow,.box-warning-shadow,.box-info-shadow{ box-shadow:var(--je-shadow)!important; }
/* Coloured banner CARDS — dark green / status gradients, white text */
.card.bg-success,.img-card.bg-success{ background:linear-gradient(120deg,#0d2b1e,#0f7a4d 62%,#1fa363)!important; color:#fff!important; border:0!important; }
.card.bg-danger,.img-card.bg-danger{ background:linear-gradient(120deg,#6E1F1A,#c0452f 62%)!important; color:#fff!important; border:0!important; }
.card.bg-info,.img-card.bg-info{ background:linear-gradient(120deg,#123A5E,#2A72D4 72%)!important; color:#fff!important; border:0!important; }
.card.bg-warning,.img-card.bg-warning{ background:linear-gradient(120deg,#7A5206,#a8761f 70%)!important; color:#fff!important; border:0!important; }
.card.bg-success *,.card.bg-danger *,.card.bg-info *,.card.bg-warning *{ color:#fff!important; }
.card.bg-success .icon-size,.card.bg-danger .icon-size,.card.bg-info .icon-size,.card.bg-warning .icon-size{ background:rgba(255,255,255,.16)!important; color:#fff!important; }

/* ---------- DASHBOARD KPI widgets ---------- */
.card-widget h2{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; margin:0 0 2px!important; }
.card-widget h2 .icon-size{ float:none!important; margin:0!important; }
.card-widget h2 span{ font-size:26px!important; font-weight:700!important; letter-spacing:-.02em!important; color:var(--je-ink)!important; font-variant-numeric:tabular-nums!important; line-height:1.15!important; }
.card-widget p{ margin:14px 0 0!important; padding-top:13px!important; border-top:1px solid var(--je-border-soft)!important;
  display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important;
  color:var(--je-muted)!important; font-size:12.5px!important; font-weight:500!important; }
.card-widget p .float-end{ float:none!important; margin:0!important; }
.card-widget p .btn{ white-space:nowrap!important; }

/* ---------- TABLES ---------- */
.table-responsive{ overflow-x:auto!important; }
.table{ color:var(--je-ink); font-size:13.5px; }
.table.table-bordered{ border:0!important; }
.table.table-bordered td, .table.table-bordered th{ border-left:0!important; border-right:0!important; border-color:var(--je-border-soft)!important; }
.table thead th{ text-transform:uppercase; font-size:11px!important; letter-spacing:.06em; font-weight:600!important;
  color:var(--je-muted)!important; border-bottom:1px solid var(--je-border-soft)!important; padding:0 16px 12px!important; background:transparent!important; }
.table tbody td{ padding:14px 16px!important; border-bottom:1px solid var(--je-border-soft)!important; vertical-align:middle; }
.table tbody tr:hover, .table-hover tbody tr:hover{ background:var(--je-surface2)!important; }
.table-lg td, .table-lg th{ padding:14px 16px!important; }
.dataTables_wrapper .dataTables_filter input, .dataTables_length select{ border:1px solid var(--je-border)!important; border-radius:var(--je-r-sm)!important; padding:8px 12px!important; background:var(--je-surface2)!important; }
.page-link{ color:var(--je-green)!important; border-radius:8px!important; margin:0 2px!important; border-color:var(--je-border)!important; font-weight:600!important; }
.page-item.active .page-link{ background:var(--je-green)!important; border-color:var(--je-green)!important; color:#fff!important; }

/* ---------- FORMS + CONTRACT ---------- */
.form-group{ margin-bottom:16px!important; }
.form-group > label, label.form-label, .form-label{ font-size:12.5px!important; font-weight:600!important; color:var(--je-soft)!important; margin-bottom:6px!important; display:inline-block; }
.form-control,.form-select{ background:var(--je-surface2)!important; border:1px solid var(--je-border)!important;
  border-radius:var(--je-r-sm)!important; padding:11px 13px!important; font-size:14px!important; color:var(--je-ink)!important; box-shadow:none!important; }
.form-control:focus,.form-select:focus{ border-color:var(--je-green)!important; box-shadow:0 0 0 4px var(--je-ring)!important; background:var(--je-surface)!important; }
.input-group-text{ background:var(--je-surface2)!important; border:1px solid var(--je-border)!important; color:var(--je-muted)!important; border-radius:var(--je-r-sm)!important; }
canvas.signature-pad, .signature-pad, #signature-pad, #signature{ border:1.5px dashed var(--je-border)!important; border-radius:var(--je-r)!important; background:var(--je-surface2)!important; }

/* ---------- BUTTONS ---------- */
.btn{ border-radius:var(--je-r-sm)!important; font-weight:600!important; font-size:13.5px!important;
  padding:10px 16px!important; box-shadow:none!important; transition:.15s ease; }
.btn-sm{ padding:6px 13px!important; font-size:12.5px!important; }
.btn-primary,.bg-primary,.btn-success{ background:var(--je-green)!important; border-color:var(--je-green)!important; color:#fff!important; }
.btn-primary:hover,.btn-success:hover{ background:var(--je-green-strong)!important; border-color:var(--je-green-strong)!important; }
.btn-default,.btn-light,.btn-outline-primary{ background:var(--je-surface)!important; border:1px solid var(--je-border)!important; color:var(--je-soft)!important; }
.btn-default:hover,.btn-outline-primary:hover{ border-color:var(--je-green)!important; color:var(--je-green)!important; background:var(--je-tint)!important; }
.btn-danger{ background:var(--je-dang)!important; border-color:var(--je-dang)!important; }
.btn-controls, .btn-submit2, .btn-save2{ border-radius:var(--je-r-sm)!important; font-weight:600!important; padding:11px 20px!important; }
.btn-submit2, .btn-save2{ background:var(--je-green)!important; border-color:var(--je-green)!important; color:#fff!important; }
.btn-submit2:hover, .btn-save2:hover{ background:var(--je-green-strong)!important; }

/* ---------- BADGES / STATUS ---------- */
.badge{ border-radius:var(--je-pill)!important; font-weight:600!important; font-size:11.5px!important; padding:5px 11px!important; }
.badge.bg-success{ background:var(--je-ok-t)!important; color:var(--je-ok)!important; }
.badge.bg-warning{ background:var(--je-warn-t)!important; color:var(--je-warn)!important; }
.badge.bg-danger{ background:var(--je-dang-t)!important; color:var(--je-dang2)!important; }
.badge.bg-info{ background:var(--je-info-t)!important; color:var(--je-info)!important; }
.badge.bg-primary{ background:var(--je-tint)!important; color:var(--je-green-strong)!important; }

/* ---------- misc ---------- */
.alert{ border-radius:var(--je-r)!important; border:1px solid var(--je-border)!important; }
.alert-danger{ background:var(--je-dang-t)!important; color:var(--je-dang2)!important; border-color:transparent!important; }
.alert-success{ background:var(--je-ok-t)!important; color:var(--je-ok)!important; border-color:transparent!important; }
hr{ border-color:var(--je-border-soft)!important; }
::selection{ background:var(--je-tint); }

/* ---------- STATUS BANNER (Übersicht Phasen-Karte) ---------- */
.je-status{ background:var(--je-surface); border:1px solid var(--je-border); border-radius:var(--je-r); overflow:hidden; margin-bottom:22px; }
.je-status__top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:20px 32px; padding:24px 28px; }
.je-status__eyebrow{ display:flex; align-items:center; gap:8px; font-family:var(--je-mono); font-size:10.5px; letter-spacing:.1em; }
.je-status__eyebrow .je-dot{ width:7px; height:7px; border-radius:50%; }
.je-status__eyebrow .je-dot.pulse{ animation:jePulse 1.8s ease-in-out infinite; }
.je-status h2{ margin:6px 0 0; font-size:21px; font-weight:700; letter-spacing:-.015em; color:var(--je-ink); }
.je-status p{ margin:8px 0 0; font-size:14.5px; line-height:1.55; color:var(--je-soft); max-width:640px; }
.je-status__steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border-top:1px solid var(--je-border-soft); }
.je-step{ padding:16px 28px; display:flex; flex-direction:column; gap:5px; border-right:1px solid var(--je-border-soft); }
.je-step:last-child{ border-right:0; }
.je-step .t{ font-size:12.5px; font-weight:600; }
.je-step .je-bar{ height:3px; border-radius:2px; background:var(--je-border-soft); }
.je-step .s{ font-size:11.5px; }
.je-step.done .t{ color:var(--je-green); } .je-step.done .je-bar{ background:var(--je-green); } .je-step.done .s{ color:var(--je-muted); }
.je-step.now .t{ color:var(--je-ink); } .je-step.now .s{ color:var(--je-warn); }
.je-step.todo .t{ color:#9aa8a0; } .je-step.todo .s{ color:#9aa8a0; }
.je-status.is-warn .je-step.now .je-bar{ background:linear-gradient(90deg,var(--je-warn) 55%,var(--je-border-soft) 55%); }
.je-status.is-dang .je-step.now .je-bar{ background:linear-gradient(90deg,var(--je-dang) 30%,var(--je-border-soft) 30%); }
.je-status.is-dang .je-step.now .s{ color:var(--je-dang2); }
.je-next{ background:var(--je-sidebar); border-radius:var(--je-r); padding:22px 24px; color:#fff; }
.je-next .k{ font-family:var(--je-mono); font-size:10.5px; letter-spacing:.1em; color:rgba(53,214,138,.85); }
.je-next .h{ display:block; color:#fff; font-size:15px; font-weight:600; margin-top:6px; }
.je-next .d{ display:block; color:rgba(255,255,255,.62); font-size:13.5px; line-height:1.5; margin-top:6px; }
.je-next .btn-bright{ margin-top:12px; background:var(--je-green-bright)!important; border:0!important; color:#052c1a!important; font-weight:700!important; }
.je-next .btn-bright:hover{ background:var(--je-green-light)!important; }
@keyframes jePulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }

/* ---------- ÜBERSICHT-Layout (Design 1:1): KPI-Reihe + Info/Next nebeneinander ---------- */
.je-ov{ }
.je-ov > .col-sm-4{ flex:0 0 100%!important; max-width:100%!important; width:100%!important;
  display:flex!important; flex-wrap:wrap!important; gap:16px!important; padding:0 8px!important; }
.je-ov > .col-sm-4 > .card{ flex:1 1 240px!important; margin:0!important; }
.je-ov > .col-sm-8{ flex:0 0 100%!important; max-width:100%!important; width:100%!important;
  display:grid!important; grid-template-columns:1.9fr 1fr!important; gap:16px!important; align-items:start!important;
  margin-top:16px!important; padding:0 8px!important; }
.je-ov > .col-sm-8 > .card{ margin:0!important; }
.je-ov > .col-sm-8 > .je-next{ margin-top:0!important; }
@media (max-width:991px){
  .je-ov > .col-sm-4{ padding:0!important; }
  .je-ov > .col-sm-8{ grid-template-columns:1fr!important; padding:0!important; }
}

/* ---------- LOGIN PAGE ---------- */
body.login-img{ background:
  radial-gradient(1000px 560px at 12% 6%, var(--je-tint), transparent),
  radial-gradient(900px 560px at 100% 100%, rgba(15,122,77,.12), transparent),
  var(--je-bg)!important; }
body.login-img::before, .login-img::before{ display:none!important; content:none!important; background:none!important; }
.col-login.mt-7{ margin-top:6vh!important; }
.col-login .header-brand-img{ width:auto!important; height:56px!important; max-width:260px!important; object-fit:contain!important; }
.col-login .text-center p{ color:var(--je-soft)!important; font-size:14.5px!important; }
.container-login100{ min-height:auto!important; display:flex!important; justify-content:center!important; padding:14px 24px 48px!important; }
.wrap-login100{ background:var(--je-surface)!important; border:1px solid var(--je-border)!important;
  border-radius:22px!important; box-shadow:0 30px 70px -24px rgba(16,30,24,.30)!important;
  padding:34px 32px!important; max-width:420px!important; width:100%!important; }
.login100-form-title{ font-size:20px!important; font-weight:700!important; letter-spacing:-.02em!important; color:var(--je-ink)!important; padding-bottom:20px!important; }
.wrap-input100{ background:var(--je-surface2)!important; border:1px solid var(--je-border)!important;
  border-radius:12px!important; margin-bottom:14px!important; overflow:hidden!important; }
.wrap-input100:focus-within{ border-color:var(--je-green)!important; box-shadow:0 0 0 4px var(--je-ring)!important; background:var(--je-surface)!important; }
.input100, .wrap-input100 .form-control{ background:transparent!important; border:0!important; padding:13px 15px!important; font-size:14px!important; box-shadow:none!important; color:var(--je-ink)!important; }
.wrap-input100 .input-group-text, .wrap-input100 .input-group-addon{ background:transparent!important; border:0!important; color:var(--je-muted)!important; }
.container-login100-form-btn{ margin-top:6px!important; }
.login100-form-btn, .login100-form-btn.btn-info, .login100-form-btn.btn-lg{ width:100%!important;
  background:var(--je-green)!important; background-image:none!important; border:0!important; border-radius:var(--je-r-sm)!important;
  padding:13px!important; font-weight:700!important; font-size:14.5px!important; color:#fff!important; box-shadow:0 12px 24px -12px var(--je-ring)!important; }
.login100-form-btn:hover, .login100-form-btn.btn-info:hover{ background:var(--je-green-strong)!important; background-image:none!important; }

/* ---------- MOBILE ---------- */
@media (max-width:991.98px){
  .app-header.header{ background:var(--je-sidebar)!important; backdrop-filter:none!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important; min-height:60px; }
  .app-header .app-sidebar__toggle{ color:#fff!important; }
  .app-header .app-sidebar__toggle span, .app-header .app-sidebar__toggle i,
  .app-header .nav-link.icon, .app-header .nav-link.icon i, .app-header .fe{ color:#fff!important; }
  .app-header .nav-link.icon:hover{ background:rgba(255,255,255,.14)!important; box-shadow:none!important; }
  .header-right-icons .profile-user{ border-color:rgba(255,255,255,.45)!important; }
  .app-header .logo-horizontal .header-brand-img.desktop-logo,
  .app-header .logo-horizontal #main-logo{ display:none!important; }
  .app-header .logo-horizontal .header-brand-img.light-logo1{ display:inline-block!important; height:30px!important; width:auto!important; }
  .app-header .logo-horizontal{ position:absolute!important; left:50%!important; top:50%!important;
    transform:translate(-50%,-50%)!important; margin:0!important; text-align:center!important; }
  .main-content.app-content{ padding-top:72px!important; }
  .je-status__top{ padding:20px; }
  .je-step{ border-right:0; border-bottom:1px solid var(--je-border-soft); }
}