/* =====================================================================
   JumpIT Kundenportal — custom theme layer
   Global rebrand of the twenty-one base: typography, brand color,
   card & control polish. Loaded after theme.css → cascade wins.
   ===================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=switzer@400,500,600&display=swap');

:root {
    /* ---- JumpIT brand ---- */
    --jp-gold:        #fbbb1a;
    --jp-orange:      #f39230;
    --jp-orange-deep: #e0890c;
    --jp-orange-dark: #bd640a;
    --jp-espresso:    #2a1903;
    --jp-ink:         #1d1d1f;
    --jp-ink-2:       #424245;
    --jp-muted:       #6e6e73;
    --jp-hint:        #8a8a8f;
    --jp-line:        #e8e6e1;
    --jp-line-2:      #f0eee9;
    --jp-canvas:      #f4f2ec;
    --jp-surface:     #ffffff;
    --jp-tint:        #fdf6e8;
    --jp-tint-2:      #fcefd6;
    --jp-green:       #2ecc71;
    --jp-green-d:     #1a8a4a;
    --jp-red:         #c0392b;
    --jp-grad:        linear-gradient(135deg, #fbbb1a 0%, #f39230 100%);
    --jp-radius:      14px;
    --jp-shadow:      0 1px 2px rgba(42,25,3,.04), 0 8px 24px rgba(42,25,3,.06);

    /* ---- remap the twenty-one "modern" palette to JumpIT ---- */
    --primary:          var(--jp-orange-deep);
    --primary-lifted:   var(--jp-orange-dark);
    --primary-accented: var(--jp-espresso);
    --primary-50:  #fdf6e8; --primary-100: #fcefd6; --primary-200: #fbdcb4;
    --primary-300: #f7c98c; --primary-400: #f3a94f; --primary-500: #f39230;
    --primary-600: #e0890c; --primary-700: #bd640a; --primary-800: #9a5608;
    --primary-900: #2a1903;

    /* ---- Bootstrap-4 core variable (WHMCS blue #336699 → JumpIT) ---- */
    --blue: var(--jp-orange-deep);
}

/* ---------- Typography ---------- */
html { font-size: 15px; }
body {
    font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--jp-ink);
    background: var(--jp-canvas);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .card-title, .panel-title, .page-header {
    font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -.01em;
    color: var(--jp-ink);
}
.font-weight-bold, strong, b, .fw-500 { font-weight: 600; }

/* ---------- Links ---------- */
a { color: var(--jp-orange-deep); }
a:hover, a:focus { color: var(--jp-orange-dark); }

/* ---------- Primary buttons → gold→orange gradient ---------- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background: var(--jp-grad) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(243,146,48,.26);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: linear-gradient(135deg, #f0ad12 0%, #e07f1e 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(243,146,48,.34);
}
.btn-primary:focus { box-shadow: 0 0 0 3px rgba(243,146,48,.30) !important; }

.btn-outline-primary {
    color: var(--jp-orange-deep) !important;
    border-color: var(--jp-orange) !important;
}
.btn-outline-primary:hover {
    background: var(--jp-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn { border-radius: 10px; font-family: 'General Sans', sans-serif; }
.btn-default, .btn-secondary {
    background: #fff; border-color: var(--jp-line); color: var(--jp-ink-2);
}
.btn-default:hover, .btn-secondary:hover { background: var(--jp-tint); border-color: var(--jp-orange); color: var(--jp-orange-dark); }

/* ---------- Bootstrap "primary" utility overrides (kill the blue) ---------- */
.text-primary { color: var(--jp-orange-deep) !important; }
.bg-primary   { background: var(--jp-grad) !important; color: #fff !important; }
.border-primary { border-color: var(--jp-orange) !important; }
.badge-primary { background: var(--jp-grad) !important; color: #fff; }
.badge-info    { background: var(--jp-tint-2) !important; color: var(--jp-orange-dark) !important; }
.alert-primary {
    background: var(--jp-tint); border-color: var(--jp-tint-2); color: var(--jp-espresso);
}
.list-group-item.active {
    background: var(--jp-tint) !important; border-color: var(--jp-line) !important;
    color: var(--jp-orange-dark) !important;
}
.progress-bar { background: var(--jp-grad); }

/* pagination */
.page-link { color: var(--jp-orange-deep); }
.page-item.active .page-link {
    background: var(--jp-grad); border-color: transparent;
}

/* pills / tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background: var(--jp-grad); color: #fff; }
.nav-tabs .nav-link.active { color: var(--jp-orange-dark); border-bottom-color: var(--jp-orange); }

/* dropdown active */
.dropdown-item.active, .dropdown-item:active {
    background: var(--jp-tint); color: var(--jp-orange-dark);
}

/* checkboxes / radios / switches */
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--jp-orange) !important; border-color: var(--jp-orange) !important;
}

/* ---------- Forms ---------- */
.form-control, .custom-select, .input-group-text {
    border-radius: 10px; border-color: var(--jp-line); background: #fbfaf8;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--jp-orange);
    box-shadow: 0 0 0 3px rgba(243,146,48,.14);
    background: #fff;
}

/* ---------- Cards & panels ---------- */
.card, .panel {
    border-radius: var(--jp-radius);
    border: 1px solid var(--jp-line);
    box-shadow: var(--jp-shadow);
    background: var(--jp-surface);
}
.card-header, .panel-heading {
    background: #fff; border-bottom: 1px solid var(--jp-line-2);
    font-family: 'General Sans', sans-serif; font-weight: 600;
    border-top-left-radius: var(--jp-radius); border-top-right-radius: var(--jp-radius);
}
.well { background: var(--jp-tint); border-color: var(--jp-tint-2); border-radius: var(--jp-radius); }

/* ---------- Header / navbar ---------- */
.navbar.navbar-light { background: #fff; border-bottom: 1px solid var(--jp-line); }
.jumpit-logo, .logo-img { height: 34px; width: auto; }
.navbar .search .form-control { background: #fff; }

/* top utility bar (the dark strip WHMCS shows) → warm neutral */
#top-bar, .top-bar { background: var(--jp-surface); }

/* ---------- Client-area sidebar ---------- */
.sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active,
.secondary-navbar .active > a {
    background: var(--jp-tint) !important; color: var(--jp-orange-dark) !important;
    border-left: 3px solid var(--jp-orange);
}
.sidebar .list-group-item { border-radius: 10px; border: none; }

/* ---------- Home / marketing panels the twenty-one homepage uses ---------- */
.jumbotron, .home-banner {
    background: var(--jp-grad); color: #fff; border-radius: 18px;
}
.jumbotron h1, .home-banner h1 { color: #fff; }

/* icon accents that were blue */
.fa-primary, .home-tiles .fas { color: var(--jp-orange); }

/* =====================================================================
   Footer (jumpit.eu-Stil, Espresso) + Sticky-Footer
   ===================================================================== */
#footer.jp-footer { background: var(--jp-espresso); border: none; color: rgba(255,255,255,.72); padding: 48px 0 24px; }
.jp-footer .container { max-width: 1140px; }
.jp-footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 30px; }
.jp-footer-logo { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 16px; }
.jp-footer-tag { color: #fff; font-size: 15px; line-height: 1.5; margin: 0 0 14px; max-width: 320px; }
.jp-footer-addr { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.55); margin: 0; }
.jp-footer-col h4 { color: #fff; font-family: 'General Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .02em; margin: 0 0 12px; }
.jp-footer-col a { display: block; color: rgba(255,255,255,.72); font-size: 14px; text-decoration: none; padding: 5px 0; }
.jp-footer-col a:hover { color: var(--jp-gold); text-decoration: none; }
.jp-footer-col a i { width: 18px; margin-right: 4px; opacity: .8; }
.jp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.jp-footer-legal { display: flex; align-items: center; gap: 18px; font-size: 13px; color: rgba(255,255,255,.55); flex-wrap: wrap; }
.jp-footer-legal a { color: rgba(255,255,255,.72); text-decoration: none; }
.jp-footer-legal a:hover { color: var(--jp-gold); }
.jp-footer-meta { display: flex; align-items: center; gap: 12px; }
.jp-footer-meta ul, .jp-footer-meta .list-inline { margin: 0; padding: 0; display: flex; gap: 4px; list-style: none; }
.jp-footer-meta a { color: rgba(255,255,255,.7); }
.jp-footer-meta a:hover { color: var(--jp-gold); }
.jp-footer-lang { background: rgba(255,255,255,.09); border: none; color: rgba(255,255,255,.85); border-radius: 8px; padding: 6px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.jp-footer-lang:hover { background: rgba(255,255,255,.16); }
@media (max-width: 767px) {
    .jp-footer-cols { grid-template-columns: 1fr; gap: 26px; }
    .jp-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Sticky footer: Content fuellt die Viewporthoehe, Footer bleibt unten */
body:has(.jp-appnav) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(.jp-appnav) > #main-body { flex: 1 0 auto; }
body:has(.jp-appnav) > #footer { flex: 0 0 auto; }

/* selection */
::selection { background: var(--jp-tint-2); color: var(--jp-espresso); }

/* =====================================================================
   Bespoke split-panel LOGIN
   ===================================================================== */
body:has(.jp-login-page) #header,
body:has(.jp-login-page) .master-breadcrumb,
body:has(.jp-login-page) #footer { display: none !important; }
body:has(.jp-login-page) { background: #e7e3da; }
#main-body:has(.jp-login-page) { padding: 0 !important; }
#main-body:has(.jp-login-page) > .container { max-width: none; padding: 0; }
.jp-login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.jp-login-card {
    display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 940px;
    background: #fff; border-radius: 22px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(42,25,3,.06), 0 30px 70px rgba(42,25,3,.14);
}
/* ---- left brand panel ---- */
.jp-login-brand {
    position: relative; overflow: hidden; padding: 46px 44px;
    background: var(--jp-grad); color: #fff;
    display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
}
.jp-login-brand::before, .jp-login-brand::after {
    content: ''; position: absolute; border-radius: 26%; background: rgba(255,255,255,.12);
}
.jp-login-brand::before { width: 320px; height: 320px; top: -100px; right: -120px; transform: rotate(18deg); }
.jp-login-brand::after  { width: 200px; height: 200px; bottom: -70px; left: -60px; background: rgba(255,255,255,.10); transform: rotate(12deg); }
.jp-brand-logo { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.jp-brand-logo:hover { text-decoration: none; }
.jp-logo-chip { background: #fff; border-radius: 12px; padding: 8px 13px; display: inline-flex; box-shadow: 0 6px 18px rgba(42,25,3,.18); }
.jp-logo-chip img { height: 24px; width: auto; display: block; }
.jp-brand-portal { color: rgba(255,255,255,.9); font-size: 13px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35); }
.jp-brand-mid { position: relative; z-index: 2; }
.jp-brand-mid h1 { color: #fff; font-size: 32px; font-weight: 600; line-height: 1.15; margin: 0 0 14px; }
.jp-brand-mid p { color: rgba(255,255,255,.92); font-size: 15px; line-height: 1.6; max-width: 330px; margin: 0; }
.jp-brand-feat { position: relative; z-index: 2; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.jp-brand-feat li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.96); }
.jp-brand-feat i { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
/* ---- right form panel ---- */
.jp-login-formwrap { padding: 46px 48px; display: flex; flex-direction: column; justify-content: center; }
.jp-form-head { margin-bottom: 26px; }
.jp-kicker { color: var(--jp-muted); font-size: 14px; margin: 0 0 4px; }
.jp-form-head h2 { font-size: 26px; font-weight: 600; margin: 0; }
.jp-login-formwrap .form-control-label { font-size: 13.5px; font-weight: 500; color: var(--jp-ink-2); margin-bottom: 6px; }
.jp-login-formwrap .input-group-text { background: #fbfaf8; border-color: var(--jp-line); color: var(--jp-hint); }
.jp-login-formwrap .form-control { height: 48px; }
.jp-btn-login { height: 50px; font-size: 16px; margin-top: 4px; border-radius: 12px; }
.jp-remember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--jp-muted); margin: 16px 0 0; font-weight: 400; }
.jp-magic {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; margin-top: 12px; border-radius: 12px; border: 1px solid var(--jp-line);
    color: var(--jp-orange-dark); font-weight: 500; font-size: 14.5px; text-decoration: none;
}
.jp-magic:hover { background: var(--jp-tint); border-color: var(--jp-orange); color: var(--jp-orange-dark); text-decoration: none; }
.jp-signup { text-align: center; margin: 22px 0 0; font-size: 13.5px; color: var(--jp-muted); }
.jp-signup a { font-weight: 500; }
/* the Tivro passkey button injected into the login form → make it match */
.jp-login-formwrap .login-form + *, .jp-login-formwrap [class*="passkey"] { margin-top: 12px; }
@media (max-width: 767px) {
    .jp-login-card { grid-template-columns: 1fr; max-width: 440px; }
    .jp-login-brand { padding: 32px 30px; gap: 22px; }
    .jp-brand-mid h1 { font-size: 26px; }
    .jp-brand-feat { display: none; }
    .jp-login-formwrap { padding: 34px 30px; }
}

/* =====================================================================
   Client-area DASHBOARD (clientareahome)
   ===================================================================== */
.jp-dash-hero { margin: 6px 0 22px; }
.jp-dash-hero h1 { font-size: 28px; font-weight: 600; margin: 0 0 5px; }
.jp-dash-hero p { color: var(--jp-muted); font-size: 15px; margin: 0; }

.tiles .row.no-gutters { margin: 0 -8px; }
.tiles [class*="col-"] { padding: 8px; }
.tiles .tile {
    display: block; background: #fff; border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius); padding: 18px 20px; height: 100%;
    position: relative; text-decoration: none; box-shadow: var(--jp-shadow);
    transition: transform .15s, border-color .15s;
}
.tiles .tile:hover { border-color: var(--jp-orange); transform: translateY(-2px); text-decoration: none; }
.tiles .tile > i {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; font-size: 21px; margin-bottom: 14px;
    background: var(--jp-tint); color: var(--jp-orange-deep);
}
.tiles .tile .stat {
    font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 28px;
    line-height: 1; color: var(--jp-ink); margin-bottom: 4px;
}
.tiles .tile .title { font-size: 13.5px; color: var(--jp-muted); text-transform: none !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.tiles .tile .highlight { display: none; }

/* green action buttons → JumpIT gold (status badges stay green) */
.btn-success, .btn-success:not(:disabled):not(.disabled) {
    background: var(--jp-grad) !important; border: none !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(243,146,48,.24);
}
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg,#f0ad12 0%,#e07f1e 100%) !important; color: #fff !important;
}
/* per-tile icon tint for variety */
.tiles [class*="col-"]:nth-child(2) .tile > i { background: #eaf3ff; color: #185fa5; }
.tiles [class*="col-"]:nth-child(3) .tile > i { background: #fdecea; color: #c0392b; }
.tiles [class*="col-"]:nth-child(4) .tile > i { background: #e4f6ee; color: #1a8a4a; }

/* =====================================================================
   App-shell: fixed left navigation (logged-in client area)
   ===================================================================== */
.jp-appnav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 1030;
    background: #fff; border-right: 1px solid var(--jp-line);
    display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto;
}
.jp-appnav-logo { padding: 6px 10px 20px; display: block; }
.jp-appnav-logo img { height: 30px; width: auto; }
.jp-appnav-menu { display: flex; flex-direction: column; gap: 2px; }
.jp-appnav-menu a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
    color: var(--jp-ink-2); font-weight: 500; font-size: 14.5px; text-decoration: none;
}
.jp-appnav-menu a i { font-size: 18px; color: var(--jp-muted); width: 20px; text-align: center; }
.jp-appnav-menu a:hover { background: var(--jp-tint); color: var(--jp-orange-dark); text-decoration: none; }
.jp-appnav-menu a.active { background: var(--jp-tint); color: var(--jp-orange-dark); }
.jp-appnav-menu a.active i { color: var(--jp-orange); }
.jp-appnav-menu .jp-ext::after { content: "\f35d"; font: 900 11px "Font Awesome 5 Free"; margin-left: auto; opacity: .5; }
.jp-appnav-foot { margin-top: auto; padding-top: 14px; }
.jp-appnav-balance {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--jp-tint); border-radius: 11px; padding: 10px 12px; margin-bottom: 10px;
    font-size: 13px; color: var(--jp-espresso);
}
.jp-appnav-balance strong { font-family: 'General Sans', sans-serif; font-size: 15px; }
/* Status-Ampel */
.jp-appnav-status { display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 8px; border-radius: 10px; background: #faf8f4; text-decoration: none; font-size: 12.5px; color: var(--jp-muted); }
.jp-appnav-status:hover { background: var(--jp-tint); color: var(--jp-ink-2); text-decoration: none; }
.jp-appnav-status .jp-status-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-appnav-status i { font-size: 10px; opacity: .45; }
.jp-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.jp-status-green { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.18); }
.jp-status-amber { background: var(--jp-orange); box-shadow: 0 0 0 3px rgba(243,146,48,.18); }
.jp-status-red { background: var(--jp-red); box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
.jp-status-gray { background: var(--jp-hint); }
.jp-appnav-user {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--jp-line-2);
    text-decoration: none; color: var(--jp-ink);
}
.jp-appnav-user:hover { text-decoration: none; color: var(--jp-orange-dark); }
.jp-appnav-av {
    width: 36px; height: 36px; border-radius: 10px; background: var(--jp-grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none;
}
.jp-appnav-user .nm { font-size: 13px; font-weight: 600; line-height: 1.25; }
.jp-appnav-logout { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--jp-muted); font-size: 13.5px; text-decoration: none; }
.jp-appnav-logout:hover { color: var(--jp-orange-dark); text-decoration: none; }

/* shift the rest of the page right of the fixed nav */
body:has(.jp-appnav) > #header,
body:has(.jp-appnav) > .master-breadcrumb,
body:has(.jp-appnav) > #main-body,
body:has(.jp-appnav) > footer { margin-left: 240px; }
/* logo + main menu now live in the sidebar */
body:has(.jp-appnav) .navbar-brand,
body:has(.jp-appnav) .main-navbar-wrapper { display: none; }
/* slim top strip */
body:has(.jp-appnav) #header .navbar.navbar-light { background: #fff; border-bottom: 1px solid var(--jp-line); }
/* full-width content: hide WHMCS widget sidebar */
body:has(.jp-appnav) #main-body .sidebar,
body:has(.jp-appnav) #main-body > .container > .row > .col-lg-4 { display: none !important; }
body:has(.jp-appnav) #main-body .primary-content { max-width: 100%; flex: 0 0 100%; }

@media (max-width: 991px) {
    .jp-appnav { display: none; }
    body:has(.jp-appnav) > #header,
    body:has(.jp-appnav) > .master-breadcrumb,
    body:has(.jp-appnav) > #main-body,
    body:has(.jp-appnav) > footer { margin-left: 0; }
    body:has(.jp-appnav) .navbar-brand,
    body:has(.jp-appnav) .main-navbar-wrapper { display: revert; }
    body:has(.jp-appnav) #main-body .sidebar,
    body:has(.jp-appnav) #main-body > .container > .row > .col-lg-4 { display: revert !important; }
}

/* home panels → clean JumpIT cards (fix top rounding + body padding) */
.client-home-cards .card {
    margin-bottom: 18px;
    overflow: hidden;                                  /* clip header to rounded corners */
    border-top: 1px solid var(--jp-line) !important;   /* kill the 3px bootstrap accent stripe */
}
.client-home-cards .card-header { padding: 15px 16px 12px; }
.client-home-cards .card-header .card-title { font-size: 16.5px; }
.client-home-cards .card-body { padding: 14px 16px !important; }
.client-home-cards .card-body p { padding: 0 !important; margin: 0 0 8px; }
.client-home-cards .card-body p:last-child { margin-bottom: 0; }
.client-home-cards .list-group-item-action:hover { background: var(--jp-tint); }