:root{
  --navy:#073f61;--navy-2:#0b527b;--red:#e4363a;--dark:#16191d;--bg:#f3f6f8;--surface:#fff;
  --line:#dbe3e8;--line-2:#edf1f4;--text:#1a2730;--muted:#667783;--soft:#eef4f7;--green:#177245;
  --amber:#a35a00;--shadow:0 10px 32px rgba(22,40,52,.07);--radius:14px
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45}a{color:var(--navy);text-decoration:none}a:hover{text-decoration:none;color:var(--navy-2)}button,input,select,textarea{font:inherit}.topbar{height:68px;background:var(--dark);display:flex;align-items:center;padding:0 26px;gap:28px;color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 2px 10px rgba(0,0,0,.12)}.brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800;color:#fff;letter-spacing:.3px;white-space:nowrap}.brand:hover{color:#fff}.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--red);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900}.brand small{font-size:10px;font-weight:700;color:#9eb4c2;border-left:1px solid #39434a;padding-left:8px}.topbar nav{display:flex;gap:4px;align-items:center;flex:1;height:100%}.topbar nav a{color:#cad5db;padding:10px 11px;border-radius:8px;font-weight:600;font-size:13px}.topbar nav a:hover,.topbar nav a.active{background:#253039;color:#fff}.userbox{display:flex;align-items:center;gap:10px;font-size:12px;color:#ccd5da}.linkbtn{border:0;background:none;color:var(--navy);cursor:pointer;padding:5px}.topbar .linkbtn{color:#fff}.danger{color:#b42318}.mobile-menu{display:none}.container{max-width:1680px;margin:0 auto;padding:28px 30px 50px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--navy);font-size:11px;font-weight:800}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.page-head h1{margin:2px 0 4px;font-size:30px;letter-spacing:-.03em}.page-head p{margin:0;color:var(--muted)}.hero-head{padding-top:2px}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #cbd7de;background:#fff;color:var(--navy);padding:9px 14px;border-radius:9px;cursor:pointer;font-weight:700;line-height:1.2}.btn:hover{border-color:#9db4c2;background:#f8fbfc}.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn.primary:hover{background:var(--navy-2)}.btn.ghost{background:transparent}.btn.small{padding:7px 10px;font-size:12px}.danger-btn{color:#b42318;border-color:#f0b6b2}.alert{padding:12px 15px;border-radius:10px;margin:0 0 18px}.alert.success{background:#e8f6ef;color:#12633d}.alert.error{background:#fff0ef;color:#98271f}.panel,.filter-card,.table-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.panel{padding:20px}.panel h2{margin:0 0 14px;font-size:18px}.panel h3{font-size:13px;margin:18px 0 4px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.panel-head h2{margin:0}.panel-head p{margin:3px 0 0}.muted{color:var(--muted)}.strong,.company-name{font-weight:800;color:var(--navy)}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}.dashboard-grid{align-items:start}.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:20px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 18px;display:flex;flex-direction:column;box-shadow:0 5px 18px rgba(20,35,45,.04)}.stat b{font-size:25px;line-height:1;color:var(--navy)}.stat span{color:var(--muted);margin-top:6px;font-size:12px}.mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.mini-stats a{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 15px;display:flex;align-items:baseline;gap:8px}.mini-stats strong{font-size:20px;color:var(--navy)}.mini-stats span{color:var(--muted);font-size:12px}.filter-card{padding:15px;margin-bottom:14px}.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:10px}.filter-grid label,.form-grid label{display:flex;flex-direction:column;gap:5px;font-weight:700;color:#42535e;font-size:12px}.filter-grid .span-2,.form-grid .span-2{grid-column:span 2}.filter-grid input,.filter-grid select,.form-grid input,.form-grid select,.form-grid textarea,.inline-edit textarea,.comment-form textarea,.inline-actions select{width:100%;border:1px solid #cfdbe2;border-radius:8px;background:#fff;color:var(--text);padding:9px 10px;outline:none}.filter-grid input:focus,.filter-grid select:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.inline-edit textarea:focus{border-color:#6f9bb4;box-shadow:0 0 0 3px rgba(7,63,97,.08)}.filter-actions{display:flex;gap:8px;margin-top:12px;align-items:center}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid.spacious{max-width:1040px}.form-grid h2{border-bottom:1px solid var(--line-2);padding-bottom:8px;margin:6px 0 0}.form-grid textarea{min-height:95px;resize:vertical}.label-title{font-weight:700;font-size:12px;color:#42535e}.checks{display:flex;flex-wrap:wrap;gap:7px}.check{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px!important;background:#f5f8fa;border:1px solid #dae4ea;border-radius:8px;padding:7px 9px!important;font-weight:600!important}.check input{width:auto!important}.check-line{flex-direction:row!important;align-items:center!important;gap:7px!important}.check-line input{width:auto!important}.table-card{overflow:hidden}.table-wrap{width:100%;overflow:auto}.company-table-wrap{max-height:calc(100vh - 300px);min-height:300px}.company-table{min-width:1420px}.company-table thead th{position:sticky;top:0;z-index:5;background:#f7fafb}table{width:100%;border-collapse:separate;border-spacing:0}th{font-size:10.5px;text-transform:uppercase;letter-spacing:.045em;color:#5a6b76;background:#f7fafb;padding:10px 11px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:11px;border-bottom:1px solid var(--line-2);vertical-align:top}tbody tr:last-child td{border-bottom:0}tbody tr:hover td{background:#fbfdfe}tbody tr.is-contacted td:first-child{box-shadow:inset 3px 0 0 #66a687}.check-col{width:32px}.company-cell{min-width:250px}.company-name{display:block;font-size:13px}.type-line{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.type-line span{font-size:10px;color:#60727d;background:#f0f4f6;border-radius:5px;padding:2px 5px}.priority-pill{display:inline-block;max-width:110px;padding:5px 8px;border-radius:999px;background:#e8f0f4;color:var(--navy);font-weight:900;font-size:10px;line-height:1.1;text-transform:uppercase}.p-top-ziel,.p-top-abbruch-target{background:#d9edf8}.p-gutes-ziel,.p-good-abbruch-target,.p-a{background:#e6f2ec;color:#17603c}.p-passend,.p-secondary-abbruch-target,.p-b{background:#fff1d9;color:#875111}.phone-link{font-weight:700;white-space:nowrap}.bedarf-main{font-weight:700;max-width:180px}.status-form select{max-width:170px;border:1px solid #d4dfe5;border-radius:7px;padding:6px;background:#fff;font-size:11px}.status-form+small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.contact-links{min-width:100px}.contact-links>a,.contact-links form{display:block;margin-bottom:4px}.text-action{border:0;background:transparent;color:var(--green);font-weight:700;padding:0;cursor:pointer;font-size:11px}.comment-cell{min-width:225px;max-width:300px}.comment-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#43535d;min-height:34px}.inline-edit{margin-top:5px}.inline-edit summary{cursor:pointer;color:var(--navy);font-size:11px;font-weight:700;list-style:none}.inline-edit summary::-webkit-details-marker{display:none}.inline-edit form{margin-top:7px}.inline-edit textarea{font-size:12px}.row-actions{width:42px}.icon-btn{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);font-size:18px}.selection-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#edf5f8;border:1px solid #cfe0e8;border-radius:11px;padding:10px 12px;margin-bottom:10px}.inline-actions{display:flex;align-items:center;gap:7px}.inline-actions select{width:auto;min-width:170px;padding:8px}.pagination-row{margin-top:14px}.badge{display:inline-flex;align-items:center;background:#eef3f6;color:#4c626f;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:700;margin:2px}.badge.status{background:#edf4f7}.facts{display:grid;grid-template-columns:110px 1fr;gap:9px 12px;margin:0}.facts dt{color:var(--muted);font-size:12px}.facts dd{margin:0;min-width:0}.compact-facts{grid-template-columns:75px 1fr}.highlight{border-top:3px solid var(--navy)}.comment-panel{margin-bottom:18px}.comment-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.comment-form textarea{min-height:85px;border:1px solid #cfdbe2;border-radius:8px;padding:10px}.list-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)}.list-row:last-child{border-bottom:0}.list-row small{display:block;color:var(--muted);margin-top:3px}.list-row.rich{padding:12px 0}.status-dot{width:9px;height:9px;border-radius:50%;background:#c5d1d8;flex:none}.status-dot.done{background:#4f9a70}.status-dot.new{background:#d8a038}.inline-form{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr auto;gap:7px;margin-top:12px}.inline-form input{border:1px solid #cfdbe2;border-radius:8px;padding:8px}.portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.portal-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px;box-shadow:0 7px 20px rgba(20,35,45,.05)}.portal-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.portal-card h2{font-size:17px;margin:4px 0 2px}.portal-card p{margin:0;color:var(--muted)}.portal-kind{font-size:9px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;color:var(--navy)}.account-badge{white-space:nowrap;padding:5px 7px;border-radius:999px;background:#f0f3f5;font-size:9px;font-weight:800}.a-aktiv{background:#e2f3e8;color:#17603c}.a-registrierung,.a-prüfung{background:#fff2dc;color:#7d4b0d}.a-gesperrt{background:#fde8e7;color:#9c2923}.portal-card .facts{margin:14px 0}.portal-notes{min-height:42px!important;color:#485963!important;margin-bottom:13px!important}.export-columns{gap:9px}.top-gap{margin-top:14px}.empty-state{text-align:center;color:var(--muted);padding:30px}.login-shell{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#10171c,#073f61)}code{background:#eef2f4;border-radius:5px;padding:2px 5px;font-size:12px}
@media(max-width:1200px){.filter-grid{grid-template-columns:repeat(4,minmax(130px,1fr))}.stats{grid-template-columns:repeat(3,1fr)}.portal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.container{padding:18px 14px 40px}.mobile-menu{display:block;background:none;border:0;color:#fff;font-size:22px}.topbar{padding:0 14px;gap:10px}.topbar nav{display:none;position:absolute;top:68px;left:0;right:0;background:#20282e;padding:10px;flex-direction:column;align-items:stretch;height:auto}.nav-open .topbar nav{display:flex}.userbox span{display:none}.page-head{flex-direction:column}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-grid .span-2{grid-column:span 2}.mini-stats{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}.portal-grid{grid-template-columns:1fr}.selection-bar{align-items:flex-start;flex-direction:column}.inline-form{grid-template-columns:1fr 1fr}.comment-form{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:span 1}}
@media(max-width:520px){.filter-grid{grid-template-columns:1fr}.filter-grid .span-2{grid-column:span 1}.mini-stats,.stats{grid-template-columns:1fr 1fr}.brand small{display:none}.actions{width:100%}.page-head .actions .btn{flex:1}.inline-actions{flex-wrap:wrap}}
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#111820,#073f61);padding:20px}.login-card{width:min(420px,100%);background:#fff;border-radius:16px;padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.3)}.login-brand{font-size:24px;font-weight:900;color:var(--navy);margin-bottom:18px}.login-brand span{color:var(--red)}.login-card h1{font-size:24px;margin:0 0 18px}.login-card form{display:grid;gap:13px}.login-card label{display:grid;gap:5px;font-size:12px;font-weight:700;color:#455862}.login-card input{border:1px solid #cfdbe2;border-radius:8px;padding:10px}.full{width:100%}.field-error{color:#a52a22;margin:0}.filters{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}.filters input,.filters select{border:1px solid #cfdbe2;border-radius:8px;padding:9px;min-width:180px}.narrow{max-width:720px}.pagination{display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.page{display:inline-flex;min-width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--navy);font-weight:700}.page.active{background:var(--navy);border-color:var(--navy);color:#fff}.page.disabled{color:#9aabb5;background:#f3f6f8}.top-gap{margin-top:14px}
.delete-form{margin-top:12px}
/* =========================================================
   DIABOS CRM - Unternehmen V2 polish
   ========================================================= */

.company-filter-panel {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .025);
}

.company-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.company-filter-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #52616b;
}

.company-filter-grid input,
.company-filter-grid select {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #d8e0e5;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}

.company-filter-grid input:focus,
.company-filter-grid select:focus {
    outline: none;
    border-color: #073f61;
    box-shadow: 0 0 0 3px rgba(7, 63, 97, .08);
}

.filter-search {
    grid-column: span 2;
}

.filter-search label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #52616b;
}

.filter-search input {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #d8e0e5;
    border-radius: 8px;
}

.company-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}


/* =============================
   Company overview counters
   ============================= */

.company-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 15px;
}

.company-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    color: #596168;
}

.company-stat strong {
    color: #073f61;
    font-size: 13px;
}


/* =============================
   Company table
   ============================= */

.companies-table-wrap {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    overflow: auto;
}

.companies-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.companies-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f7f9fa;
    color: #53616b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 11px 12px;
    border-bottom: 1px solid #dfe5ea;
    white-space: nowrap;
}

.companies-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #edf1f3;
    vertical-align: top;
    font-size: 13px;
}

.companies-table tbody tr:last-child td {
    border-bottom: 0;
}

.companies-table tbody tr:hover {
    background: #fafcfd;
}

.companies-table .company-name {
    font-weight: 600;
    color: #073f61;
    text-decoration: none;
}

.companies-table .company-name:hover {
    text-decoration: underline;
}


/* =============================
   Comment column
   ============================= */

.company-comment-cell {
    min-width: 190px;
    max-width: 270px;
}

.company-comment-text {
    line-height: 1.4;
    color: #30383d;
    margin-bottom: 4px;
}

.comment-edit-link {
    display: inline-block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #073f61;
    text-decoration: none;
    opacity: .72;
}

.comment-edit-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.empty-value {
    color: #a5adb3;
}


/* =============================
   Contact status
   ============================= */

.contact-status-select {
    min-width: 125px;
    padding: 6px 8px;
    border-radius: 7px;
    border: 1px solid #dce3e7;
    background: #fff;
    font-size: 12px;
}


/* =============================
   Toolbar
   ============================= */

.company-selection-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #f8fafb;
    border: 1px solid #e1e6e9;
    border-radius: 10px;
}

.company-selection-count {
    margin-right: auto;
    font-size: 12px;
    color: #65727a;
}


/* =============================
   Responsive
   ============================= */

@media (max-width: 1200px) {
    .company-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .company-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .company-filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-search {
        grid-column: span 1;
    }
}

.company-types-cell {
    min-width: 170px;
    max-width: 260px;
}

.company-type-pill {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px 3px 2px 0;

    border-radius: 6px;

    background: #eef3f6;
    border: 1px solid #dce5ea;

    color: #073f61;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.25;
}

/* =========================================================
   LIEFERPORTALE - STATUS
   ========================================================= */

.account-badge.a-neu {
    background: #eef3f6;
    color: #50636f;
}

.account-badge.a-zu_registrieren {
    background: #edf4f8;
    color: #073f61;
}

.account-badge.a-registrierung_laeuft {
    background: #fff2dc;
    color: #7d4b0d;
}

.account-badge.a-aktiv {
    background: #e2f3e8;
    color: #17603c;
}

.account-badge.a-beobachten {
    background: #edf3f8;
    color: #345d76;
}

.account-badge.a-problem {
    background: #fde8e7;
    color: #9c2923;
}

.account-badge.a-nicht_relevant {
    background: #f0f1f2;
    color: #737b80;
}
/* =========================================================
   DIABOS CRM
   LIEFER- & VERGABEPORTALE V3
   ========================================================= */


/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */

.portal-page {
    font-weight: 400;
}

.portal-page h1,
.portal-page h2,
.portal-page strong,
.portal-page label {
    letter-spacing: 0;
}

.portal-page h1 {
    font-weight: 600;
}

.portal-page h2 {
    font-weight: 600;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.portal-page-head {
    align-items: flex-start;
}

.portal-page-head p {
    margin-top: 6px;
    color: #66737b;
    font-weight: 400;
}

.portal-head-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}


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

.portal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 35px;

    padding: 7px 13px;

    border: 1px solid #d4dee4;
    border-radius: 8px;

    background: #ffffff;
    color: #253b48;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.portal-action:hover {
    background: #f6f8f9;
    border-color: #bdcbd3;
}


/*
Only important actions are dark.
*/

.portal-action-primary {
    background: #0b506e;
    border-color: #0b506e;
    color: #ffffff;
}

.portal-action-primary:hover {
    background: #08445e;
    border-color: #08445e;
}


/*
Soft button
*/

.portal-action-soft {
    background: #ffffff;
    color: #164d67;
    border-color: #cbd9e0;
}


.portal-action-ghost {
    background: #ffffff;
    color: #42545f;
}


/*
Portal öffnen should NOT be another heavy dark button.
*/

.portal-action-open {
    background: #edf5f7;
    border-color: #d4e4e9;
    color: #0c526e;
}

.portal-action-open:hover {
    background: #e4f0f4;
    border-color: #c1d9e0;
}


/* ---------------------------------------------------------
   Compact import
   --------------------------------------------------------- */

.portal-import-panel {
    background: #ffffff;

    border: 1px solid #dde5e9;
    border-radius: 12px;

    padding: 12px 15px;

    margin-bottom: 12px;
}


.portal-import-form {
    display: flex;
    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}


.portal-import-text {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 180px;
}


.portal-import-text strong {
    font-size: 13px;
    font-weight: 500;
}


.portal-import-text span {
    color: #7a858c;

    font-size: 12px;
    font-weight: 400;
}


/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.portal-filter-card {
    background: #ffffff;

    border: 1px solid #dde5e9;
    border-radius: 12px;

    padding: 14px 15px;

    margin-bottom: 14px;
}


.portal-filter-grid {
    display: grid;

    grid-template-columns:
        minmax(230px, 2fr)
        repeat(
            4,
            minmax(150px, 1fr)
        );

    gap: 10px;
}


.portal-filter-grid label {
    display: flex;
    flex-direction: column;

    gap: 5px;

    font-weight: 400;
}


.portal-filter-grid label > span {
    color: #4f5e67;

    font-size: 12px;
    font-weight: 500;
}


.portal-filter-grid input,
.portal-filter-grid select {
    height: 38px;

    border: 1px solid #d4dde2;
    border-radius: 7px;

    background: #ffffff;

    padding: 0 11px;

    font-size: 13px;
    font-weight: 400;

    color: #263942;
}


.portal-filter-grid input:focus,
.portal-filter-grid select:focus {
    border-color: #8db1c1;

    outline: 2px solid
        rgba(50, 120, 150, .10);
}


.portal-filter-actions {
    display: flex;

    gap: 8px;

    margin-top: 11px;
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.portal-grid-v3 {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 13px;
}


.portal-card-v3 {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 16px;

    border: 1px solid #dfe6ea;
    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 2px 8px
        rgba(16, 39, 51, .025);
}


.portal-card-v3-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 13px;

    margin-bottom: 15px;
}


.portal-card-title {
    min-width: 0;
}


.portal-type-tag {
    display: inline-block;

    margin-bottom: 7px;

    color: #275f76;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .055em;

    text-transform: uppercase;
}


.portal-card-v3 h2 {
    margin: 0 0 4px;

    color: #192c37;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 600;
}


.portal-card-title p {
    margin: 0;

    color: #718089;

    font-size: 12.5px;
    font-weight: 400;
}


/* ---------------------------------------------------------
   Status
   --------------------------------------------------------- */

.portal-status-badge {
    flex: 0 0 auto;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 10.5px;
    font-weight: 500;

    white-space: nowrap;

    background: #f0f3f5;
    color: #53616a;
}


.portal-status-neu {
    background: #f0f3f5;
    color: #52616a;
}


.portal-status-zu-registrieren {
    background: #eef5f8;
    color: #285b70;
}


.portal-status-registrierung-laeuft {
    background: #fff4df;
    color: #78551d;
}


.portal-status-aktiv {
    background: #e9f5ed;
    color: #28704a;
}


.portal-status-beobachten {
    background: #f0f3f8;
    color: #55657a;
}


.portal-status-problem {
    background: #faeceb;
    color: #98453e;
}


.portal-status-nicht-relevant {
    background: #f1f2f3;
    color: #777f84;
}


/* ---------------------------------------------------------
   Meta information
   --------------------------------------------------------- */

.portal-meta-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 13px 18px;

    padding-bottom: 14px;

    border-bottom: 1px solid #edf0f2;
}


.portal-meta-item {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    min-width: 0;

    gap: 5px;
}


.portal-meta-item > span {
    color: #869097;

    font-size: 10.5px;
    font-weight: 400;
}


.portal-meta-item > strong {
    max-width: 100%;

    color: #2e424d;

    font-size: 12.5px;
    font-weight: 500;

    line-height: 1.35;
}


/*
Fix for Organisationstyp:
label and value can no longer be glued together.
*/

.portal-org-pill {
    display: inline-flex;

    width: auto;

    padding: 4px 7px;

    border-radius: 6px;

    background: #f0f4f6;

    color: #385563 !important;

    font-size: 11.5px !important;
    font-weight: 500 !important;

    white-space: normal;
}


/* ---------------------------------------------------------
   Inline editors
   --------------------------------------------------------- */

.portal-inline-editor {
    position: relative;

    width: 100%;
}


.portal-inline-editor summary {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    cursor: pointer;

    list-style: none;

    color: #325e72;

    font-size: 12px;
    font-weight: 500;
}


.portal-inline-editor summary::-webkit-details-marker {
    display: none;
}


.portal-inline-editor summary small {
    color: #859199;

    font-size: 10px;
    font-weight: 400;
}


.portal-date-editor summary {
    color: #334a56;
    font-weight: 500;
}


.portal-mini-form {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 8px;
}


.portal-mini-form input {
    min-width: 0;

    border: 1px solid #d4dde2;
    border-radius: 6px;

    padding: 7px 8px;

    background: #ffffff;

    font-size: 11.5px;
    font-weight: 400;
}


.portal-mini-save {
    padding: 6px 9px;

    border: 1px solid #c8d7de;
    border-radius: 6px;

    background: #f6f9fa;
    color: #28566c;

    font-size: 11px;
    font-weight: 500;

    cursor: pointer;
}


.portal-mini-save:hover {
    background: #edf4f6;
}


/* ---------------------------------------------------------
   Notes
   --------------------------------------------------------- */

.portal-note-area {
    padding: 12px 0;
}


.portal-note-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 6px;
}


.portal-note-head > span {
    color: #869097;

    font-size: 10.5px;
    font-weight: 400;
}


.portal-note-head .portal-inline-editor {
    width: auto;
}


.portal-note-preview {
    margin: 0;

    color: #435660;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.45;

    white-space: pre-line;
}


.portal-note-preview.is-empty {
    color: #a0a9ae;
}


.portal-note-form {
    position: absolute;

    z-index: 20;

    right: 0;
    top: 25px;

    width: 300px;

    padding: 10px;

    border: 1px solid #d5dee3;
    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(20, 40, 50, .10);
}


.portal-note-form textarea {
    width: 100%;

    min-height: 90px;

    resize: vertical;

    padding: 8px;

    border: 1px solid #d6dfe4;
    border-radius: 6px;

    background: #ffffff;

    color: #2d414c;

    font: inherit;

    font-size: 12px;
    font-weight: 400;

    box-sizing: border-box;

    margin-bottom: 7px;
}


/* ---------------------------------------------------------
   Card actions
   --------------------------------------------------------- */

.portal-card-actions {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-wrap: wrap;

    margin-top: auto;

    padding-top: 3px;
}


.portal-card-actions .portal-action {
    min-height: 31px;

    padding: 5px 9px;

    font-size: 11.5px;
}


/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */

.portal-pagination {
    margin-top: 16px;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .portal-grid-v3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .portal-filter-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 720px) {

    .portal-grid-v3 {
        grid-template-columns: 1fr;
    }


    .portal-filter-grid {
        grid-template-columns: 1fr;
    }


    .portal-page-head {
        flex-direction: column;
    }


    .portal-head-actions {
        width: 100%;
    }


    .portal-import-form {
        align-items: flex-start;
        flex-direction: column;
    }


    .portal-card-v3-head {
        flex-direction: column;
    }


    .portal-meta-grid {
        grid-template-columns: 1fr 1fr;
    }


    .portal-note-form {
        position: fixed;

        left: 16px;
        right: 16px;
        top: 20%;

        width: auto;
    }

}
/* =========================================================
   DIABOS CRM – LIGHTER TYPOGRAPHY + PORTAL V5
   Safe override block. Existing CRM CSS stays untouched above.
   ========================================================= */

/* ----- lighter typography across CRM ----- */
body,
input,
select,
textarea,
button {
    font-weight: 400;
}

.page-head h1,
.hero-head h1 {
    font-weight: 600;
}

h2,
h3,
.panel h2,
.table-card h2 {
    font-weight: 600;
}

.btn,
button.btn,
.strong {
    font-weight: 500;
}

table th,
.table-card th,
.companies-table th {
    font-weight: 500;
}

.eyebrow {
    font-weight: 500;
}

/* ----- portal page base ----- */
.dpv5-page,
.dpv5-form,
.dpv5-import-card,
.dpv5-portal-export-card {
    font-weight: 400;
}

.dpv5-page-head {
    gap: 18px;
    align-items: flex-start;
}

.dpv5-page-head p {
    margin-top: 6px;
    color: #66757d;
    font-weight: 400;
}

.dpv5-head-actions,
.dpv5-export-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dpv5-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid #d2dde3;
    border-radius: 8px;
    background: #fff;
    color: #314b59;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.dpv5-btn:hover {
    background: #f6f8f9;
    border-color: #bacbd4;
}

.dpv5-btn--primary {
    background: #0b506e;
    border-color: #0b506e;
    color: #fff;
}

.dpv5-btn--primary:hover {
    background: #08445f;
    border-color: #08445f;
}

.dpv5-btn--secondary {
    background: #fff;
    color: #174f68;
    border-color: #c8d8df;
}

.dpv5-btn--ghost {
    color: #60717a;
    background: transparent;
}

/* ----- filters ----- */
.dpv5-filter-card {
    margin-bottom: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #dde5e9;
    border-radius: 12px;
}

.dpv5-filter-grid {
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) repeat(4, minmax(145px, 1fr));
    gap: 10px;
}

.dpv5-filter-grid label,
.dpv5-form label,
.dpv5-popover-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 400;
}

.dpv5-filter-grid label > span,
.dpv5-form label > span,
.dpv5-popover-form label > span {
    color: #5e6e77;
    font-size: 12px;
    font-weight: 500;
}

.dpv5-filter-grid input,
.dpv5-filter-grid select,
.dpv5-form input,
.dpv5-form select,
.dpv5-form textarea,
.dpv5-popover-form input,
.dpv5-popover-form select,
.dpv5-popover-form textarea {
    border: 1px solid #d4dde2;
    border-radius: 7px;
    background: #fff;
    color: #293e49;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
}

.dpv5-filter-grid input,
.dpv5-filter-grid select,
.dpv5-form input,
.dpv5-form select,
.dpv5-popover-form input,
.dpv5-popover-form select {
    min-height: 38px;
    padding: 0 10px;
}

.dpv5-form textarea,
.dpv5-popover-form textarea {
    padding: 9px 10px;
    line-height: 1.45;
}

.dpv5-filter-grid input:focus,
.dpv5-filter-grid select:focus,
.dpv5-form input:focus,
.dpv5-form select:focus,
.dpv5-form textarea:focus,
.dpv5-popover-form input:focus,
.dpv5-popover-form select:focus,
.dpv5-popover-form textarea:focus {
    outline: 2px solid rgba(11, 80, 110, .09);
    border-color: #8eb3c3;
}

.dpv5-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 11px;
}

.dpv5-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin: 6px 2px 10px;
    color: #6c7a82;
    font-size: 12px;
}

.dpv5-summary-row strong {
    color: #344d5a;
    font-weight: 500;
}

.dpv5-summary-row a {
    color: #2f647b;
    text-decoration: none;
    font-weight: 500;
}

/* ----- portal table ----- */
.dpv5-table-card {
    background: #fff;
    border: 1px solid #dfe6ea;
    border-radius: 12px;
    overflow: hidden;
}

.dpv5-table-wrap {
    overflow-x: auto;
}

.dpv5-table {
    width: 100%;
    min-width: 1220px;
    border-collapse: collapse;
}

.dpv5-table th {
    padding: 10px 12px;
    background: #f7f9fa;
    border-bottom: 1px solid #dfe6ea;
    color: #687780;
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.dpv5-table td {
    padding: 12px;
    border-bottom: 1px solid #edf1f3;
    color: #354b57;
    font-size: 12.5px;
    font-weight: 400;
    vertical-align: top;
}

.dpv5-table tbody tr:hover {
    background: #fbfcfd;
}

.dpv5-table tbody tr:last-child td {
    border-bottom: 0;
}

.dpv5-portal-cell {
    min-width: 250px;
    max-width: 340px;
}

.dpv5-portal-name {
    display: block;
    color: #173c4e;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

.dpv5-portal-cell > span {
    display: block;
    margin-top: 3px;
    color: #7b878e;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.35;
}

.dpv5-chip,
.dpv5-org-type {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 180px;
    padding: 4px 7px;
    border-radius: 6px;
    white-space: normal;
    line-height: 1.25;
    font-size: 11px;
    font-weight: 500;
}

.dpv5-chip {
    background: #edf5f7;
    color: #315f72;
}

.dpv5-org-type {
    background: #f2f4f5;
    color: #53636b;
}

.dpv5-region {
    min-width: 120px;
    color: #596a73 !important;
}

/* ----- status ----- */
.dpv5-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef2f4;
    color: #5c6a72;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
}

.dpv5-status--zu_registrieren,
.dpv5-status--kein_konto {
    background: #eef5f8;
    color: #315f73;
}

.dpv5-status--registrierung_laeuft,
.dpv5-status--registrierung {
    background: #fff4df;
    color: #78551d;
}

.dpv5-status--aktiv {
    background: #e9f5ed;
    color: #2d704c;
}

.dpv5-status--beobachten,
.dpv5-status--pruefung {
    background: #f1f3f8;
    color: #5b6679;
}

.dpv5-status--problem,
.dpv5-status--gesperrt {
    background: #faeceb;
    color: #96463f;
}

.dpv5-status--nicht_relevant {
    background: #f1f2f3;
    color: #7a8388;
}

/* ----- inline editors ----- */
.dpv5-inline-details {
    position: relative;
    display: inline-block;
}

.dpv5-inline-details > summary {
    list-style: none;
    cursor: pointer;
}

.dpv5-inline-details > summary::-webkit-details-marker {
    display: none;
}

.dpv5-popover-form {
    position: absolute;
    z-index: 50;
    top: calc(100% + 7px);
    left: 0;
    width: 220px;
    padding: 10px;
    background: #fff;
    border: 1px solid #d4dee3;
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(18, 42, 54, .12);
}

.dpv5-note-details .dpv5-popover-form {
    left: auto;
    right: 0;
}

.dpv5-note-form {
    width: 320px;
}

.dpv5-mini-save {
    margin-top: 8px;
    padding: 6px 9px;
    border: 1px solid #c7d6dd;
    border-radius: 6px;
    background: #f4f8f9;
    color: #2c596d;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
}

.dpv5-check-cell {
    min-width: 145px;
}

.dpv5-check-date {
    display: block;
    color: #465b66;
    font-weight: 500;
}

.dpv5-check-actions {
    display: flex;
    gap: 7px;
    margin-top: 4px;
    align-items: center;
}

.dpv5-check-actions form {
    margin: 0;
}

.dpv5-link-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #397087;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.dpv5-link-button:hover {
    text-decoration: underline;
}

/* ----- notes ----- */
.dpv5-note-cell {
    min-width: 200px;
    max-width: 280px;
}

.dpv5-note-preview {
    max-height: 48px;
    overflow: hidden;
    color: #50616a;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
    white-space: pre-line;
}

.dpv5-note-preview.is-empty {
    color: #9ba5aa;
}

.dpv5-note-details {
    margin-top: 5px;
}

/* ----- row actions ----- */
.dpv5-row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 100px;
}

.dpv5-row-link {
    color: #667780;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 500;
}

.dpv5-row-link:hover {
    color: #254f63;
    text-decoration: underline;
}

.dpv5-row-link--open {
    color: #275e75;
}

.dpv5-empty {
    padding: 30px !important;
    text-align: center;
    color: #88949a !important;
}

.dpv5-pagination {
    margin-top: 14px;
}

/* ----- import page ----- */
.dpv5-import-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.dpv5-import-card {
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

.dpv5-import-kicker {
    color: #6d7b83;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.dpv5-import-card h2,
.dpv5-portal-export-card h2,
.dpv5-company-export-head h2 {
    margin: 6px 0;
    font-weight: 600;
}

.dpv5-import-card p,
.dpv5-portal-export-card p,
.dpv5-company-export-head p {
    color: #69777f;
    font-weight: 400;
    line-height: 1.45;
}

.dpv5-column-list {
    margin: 5px 0 12px;
    padding: 9px 10px;
    border-radius: 7px;
    background: #f6f8f9;
    color: #586a74;
    font-size: 11.5px;
    line-height: 1.45;
}

.dpv5-import-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
}

.dpv5-import-form input[type="file"] {
    width: 100%;
    color: #5e6d75;
    font-size: 12px;
    font-weight: 400;
}

.dpv5-small-note {
    margin-top: 10px;
    font-size: 11px;
}

.dpv5-history-panel {
    margin-bottom: 14px;
}

/* ----- export page ----- */
.dpv5-portal-export-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.dpv5-company-export-head {
    margin: 4px 0 10px;
}

/* ----- form page ----- */
.dpv5-form label {
    font-weight: 400;
}

.dpv5-delete-form {
    margin-top: 12px;
}

@media (max-width: 1180px) {
    .dpv5-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dpv5-import-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .dpv5-page-head,
    .dpv5-portal-export-card {
        flex-direction: column;
        align-items: stretch;
    }

    .dpv5-filter-grid,
    .dpv5-import-grid {
        grid-template-columns: 1fr;
    }

    .dpv5-summary-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .dpv5-popover-form,
    .dpv5-note-form {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 18%;
        width: auto;
        max-width: none;
    }
}
/* =========================================================
   DIABOS CRM UI REFRESH
   Modern, cleaner, softer colors, lighter font weights
   Add this at the END of app.css
   ========================================================= */

:root{
    --bg: #f4f7f9;
    --surface: #ffffff;
    --surface-soft: #f8fafb;
    --surface-alt: #f1f5f7;
    --border: #d9e2e8;
    --border-strong: #c7d3db;

    --text: #1f2a33;
    --text-soft: #62717d;
    --text-muted: #7c8a96;

    --primary: #0b4668;
    --primary-hover: #083a57;
    --primary-soft: #e8f1f6;

    --accent: #2f7d6b;
    --accent-soft: #e7f4ef;

    --warning: #c38a1a;
    --warning-soft: #fff5df;

    --danger: #c74848;
    --danger-soft: #fdeaea;

    --shadow-sm: 0 2px 8px rgba(15, 35, 52, 0.05);
    --shadow-md: 0 8px 24px rgba(15, 35, 52, 0.08);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    --font-main: Inter, Roboto, "Segoe UI", Arial, sans-serif;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html, body{
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    font-weight: 400;
}

body,
p,
td,
th,
input,
select,
textarea,
button,
a,
span,
div{
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6{
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

small,
.muted,
.text-muted{
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

a{
    color: var(--primary);
    text-decoration: none;
}

a:hover{
    color: var(--primary-hover);
    text-decoration: underline;
}

/* =========================================================
   TOP PAGE HEAD / HERO
   ========================================================= */

.page-head,
.hero-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.page-head h1,
.hero-head h1{
    margin: 6px 0 8px;
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 650;
}

.eyebrow{
    display: inline-block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 4px;
}

.page-head p,
.hero-head p{
    color: var(--text-soft);
    margin: 0;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button,
input[type="submit"]{
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-weight: 500;
    padding: 10px 16px;
    box-shadow: none;
    transition: all 0.18s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover{
    border-color: var(--border-strong);
    background: #f8fbfc;
    text-decoration: none;
}

.btn.primary,
button.primary,
input[type="submit"].primary{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn.primary:hover,
button.primary:hover,
input[type="submit"].primary:hover{
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.btn.ghost{
    background: #fff;
    color: var(--primary);
    border-color: var(--border);
}

.text-action{
    border: 0;
    background: transparent;
    color: var(--accent);
    padding: 0;
    font-weight: 500;
    cursor: pointer;
}

.text-action:hover{
    color: #226353;
    text-decoration: underline;
}

/* =========================================================
   CARDS / PANELS
   ========================================================= */

.panel,
.filter-card,
.table-card,
.selection-bar,
.mini-card,
.dashboard-card,
.stats-card,
.card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.filter-card{
    padding: 18px;
    margin-bottom: 16px;
}

.table-card{
    overflow: hidden;
}

.selection-bar{
    padding: 14px 16px;
    margin: 14px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.selection-bar .actions{
    display: flex;
    gap: 10px;
    align-items: center;
}

/* =========================================================
   FORMS / FILTERS
   ========================================================= */

.filter-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.filter-grid .span-2{
    grid-column: span 2;
}

.filter-grid label{
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-soft);
    font-size: 0.92rem;
    font-weight: 500;
}

.filter-grid input,
.filter-grid select,
.filter-grid textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea{
    width: 100%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 400;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

input:focus,
select:focus,
textarea:focus{
    border-color: #8fb3c8;
    box-shadow: 0 0 0 4px rgba(11,70,104,0.08);
    background: #fff;
}

.filter-actions{
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================================================
   MINI STATS / DASHBOARD STATS
   ========================================================= */

.mini-stats{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.mini-stats a{
    display: block;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    color: inherit;
}

.mini-stats a:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.mini-stats strong{
    display: block;
    font-size: 1.25rem;
    line-height: 1.1;
    margin-bottom: 4px;
    color: var(--primary);
    font-weight: 700;
}

.mini-stats span{
    color: var(--text-soft);
    font-size: 0.92rem;
}

.stats-grid{
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.stats-grid .stat-card,
.dashboard-stats .stat-card,
.overview-stats .stat-card,
.summary-card{
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.stats-grid .stat-card .value,
.dashboard-stats .value,
.overview-stats .value{
    color: var(--primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.stats-grid .stat-card .label,
.dashboard-stats .label,
.overview-stats .label{
    color: var(--text-soft);
    font-size: 0.92rem;
}

/* =========================================================
   DASHBOARD / ÜBERSICHT
   ========================================================= */

.dashboard-grid,
.overview-grid{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 18px;
    align-items: start;
}

.dashboard-grid .panel,
.overview-grid .panel{
    padding: 18px;
}

.dashboard-grid h2,
.overview-grid h2{
    font-size: 1.35rem;
    margin-top: 0;
    margin-bottom: 6px;
    font-weight: 650;
}

.dashboard-grid .sub,
.overview-grid .sub,
.panel-subtitle{
    color: var(--text-soft);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.top-list,
.recent-list{
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-list li,
.recent-list li{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #edf2f5;
}

.top-list li:last-child,
.recent-list li:last-child{
    border-bottom: 0;
}

.top-list .title,
.recent-list .title{
    font-weight: 600;
    color: var(--text);
}

.top-list .meta,
.recent-list .meta{
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dot-indicator{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d8b25a;
    margin-top: 6px;
    flex-shrink: 0;
}

/* =========================================================
   TABLES
   ========================================================= */

.table-wrap{
    overflow-x: auto;
}

.company-table,
.portal-table,
table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

.company-table thead th,
.portal-table thead th,
table thead th{
    background: #f8fafb;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}

.company-table tbody td,
.portal-table tbody td,
table tbody td{
    padding: 14px 12px;
    border-bottom: 1px solid #e8eef2;
    vertical-align: top;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 400;
}

/* Alternating rows like Excel */
.company-table tbody tr:nth-child(odd),
.portal-table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd){
    background: #fcfdfe;
}

.company-table tbody tr:nth-child(even),
.portal-table tbody tr:nth-child(even),
table tbody tr:nth-child(even){
    background: #f4f8fa;
}

.company-table tbody tr:hover,
.portal-table tbody tr:hover,
table tbody tr:hover{
    background: #ebf3f7 !important;
}

.company-table .company-name,
.portal-table .portal-name{
    color: var(--primary);
    font-weight: 600;
}

.company-table .company-name:hover,
.portal-table .portal-name:hover{
    color: var(--primary-hover);
}

.type-line,
.portal-sub,
.company-sub{
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-top: 4px;
}

.phone-link{
    color: var(--text);
    font-weight: 500;
}

.phone-link:hover{
    color: var(--primary);
}

/* =========================================================
   PILLS / BADGES
   ========================================================= */

.priority-pill,
.badge,
.type-badge,
.status-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.priority-pill{
    background: #edf3ef;
    color: #3a6b52;
}

.priority-pill.p-a,
.priority-pill.p-a-plus,
.priority-pill.p-a\+{
    background: #e8f5ee;
    color: #2f7d6b;
}

.priority-pill.p-b{
    background: #fff4df;
    color: #a77714;
}

.priority-pill.p-c{
    background: #f2f4f6;
    color: #667684;
}

.type-badge{
    background: #eef3f6;
    color: #456276;
    border-color: #dbe5eb;
    margin: 2px 4px 2px 0;
}

.status-badge.is-active{
    background: var(--accent-soft);
    color: var(--accent);
}

.status-badge.is-warning{
    background: var(--warning-soft);
    color: var(--warning);
}

.status-badge.is-danger{
    background: var(--danger-soft);
    color: var(--danger);
}

/* =========================================================
   QUICK STATUS / COMMENT / LINKS
   ========================================================= */

.status-form select{
    min-width: 150px;
    background: #fff;
    font-weight: 500;
}

.contact-links a{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 4px;
    color: var(--primary);
    font-weight: 500;
}

.contact-links a:last-child{
    margin-right: 0;
}

.company-comment-cell,
.portal-note-cell{
    min-width: 170px;
}

.company-comment-text,
.portal-note-text{
    display: block;
    color: var(--text);
    line-height: 1.45;
    margin-bottom: 6px;
}

.comment-edit-link,
.note-edit-link{
    display: inline-block;
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 500;
}

.empty-value{
    color: var(--text-muted);
}

/* =========================================================
   PORTALS PAGE
   ========================================================= */

.portal-layout,
.portals-page{
    display: block;
}

.portal-toolbar,
.portals-toolbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.portal-toolbar .actions,
.portals-toolbar .actions{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.portal-table td,
.portal-table th{
    font-size: 0.94rem;
}

.portal-table .portal-main{
    min-width: 280px;
}

.portal-table .portal-main .portal-name{
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
}

.portal-table .portal-main .portal-org{
    color: var(--text-soft);
    font-size: 0.9rem;
}

.portal-table .portal-actions a,
.portal-table .portal-actions button{
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

.portal-inline-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.portal-inline-actions .btn,
.portal-inline-actions button{
    padding: 6px 10px;
    font-size: 0.85rem;
    border-radius: 10px;
}

/* last checked / quick date */
.quick-date,
.last-check-box{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-date .today-btn,
.last-check-box .today-btn{
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 500;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.pagination-row{
    margin-top: 16px;
}

.pagination{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination .page-link,
.pagination a,
.pagination span{
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 500;
}

.pagination .active span,
.pagination .page-item.active span{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* =========================================================
   CHECKBOX / ROW ACTIONS
   ========================================================= */

.check-col{
    width: 42px;
}

.row-actions .icon-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
}

.row-actions .icon-btn:hover{
    background: var(--primary-soft);
    text-decoration: none;
}

/* =========================================================
   EMPTY STATES
   ========================================================= */

.empty-state,
.empty-box{
    text-align: center;
    padding: 28px 20px;
    color: var(--text-soft);
    background: #fbfcfd;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px){
    .filter-grid{
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .stats-grid{
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .mini-stats{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 900px){
    .filter-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .dashboard-grid,
    .overview-grid{
        grid-template-columns: 1fr;
    }

    .page-head,
    .hero-head,
    .portal-toolbar,
    .portals-toolbar,
    .selection-bar{
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px){
    .filter-grid{
        grid-template-columns: 1fr;
    }

    .filter-grid .span-2{
        grid-column: span 1;
    }

    .mini-stats,
    .stats-grid{
        grid-template-columns: 1fr;
    }

    .company-table thead th,
    .portal-table thead th,
    .company-table tbody td,
    .portal-table tbody td{
        padding: 11px 10px;
    }
}


/* ========================================================================
   DIABOS CRM UI V6
   FINAL THEME OVERRIDES
   - lighter typography
   - petrol / teal / steel-blue palette
   - portal filter matches company filter
   - alternating Excel-style rows
   - cleaner dashboard
   - CSS-only update
   ======================================================================== */

:root{
    --v6-bg:#f2f5f7;
    --v6-surface:#ffffff;
    --v6-surface-2:#f8fafb;
    --v6-row-a:#ffffff;
    --v6-row-b:#f3f7f9;
    --v6-row-hover:#e8f2f5;

    --v6-text:#25323a;
    --v6-text-2:#53636d;
    --v6-muted:#7b8991;

    --v6-petrol:#165f73;
    --v6-petrol-hover:#104e60;
    --v6-teal:#2d7b78;
    --v6-steel:#547083;
    --v6-sky:#3f7f9d;
    --v6-indigo:#596b9d;

    --v6-green:#3d8068;
    --v6-amber:#a77829;
    --v6-red:#a95757;

    --v6-line:#dbe3e7;
    --v6-line-soft:#e9eef1;
    --v6-shadow:0 5px 18px rgba(29,48,59,.055);
    --v6-shadow-hover:0 10px 28px rgba(29,48,59,.085);
    --v6-radius:14px;
    --v6-radius-sm:9px;
}

/* ----- Global background + typography ----- */

html,
body{
    background:var(--v6-bg) !important;
    color:var(--v6-text);
}

body,
input,
select,
textarea,
button{
    font-family:Inter,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
    font-weight:400 !important;
}

body{
    font-size:14px;
    line-height:1.45;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--v6-text);
    font-weight:600 !important;
}

.page-head h1,
.hero-head h1{
    font-weight:600 !important;
    letter-spacing:-.025em;
}

.eyebrow{
    color:var(--v6-petrol) !important;
    font-weight:600 !important;
    letter-spacing:.105em;
}

.strong,
.company-name{
    font-weight:600 !important;
}

.muted,
small{
    color:var(--v6-muted);
}

/* ----- Top navigation: charcoal + petrol accent, not blue everywhere ----- */

.topbar{
    background:#202a31 !important;
    box-shadow:0 1px 0 rgba(255,255,255,.03),0 4px 14px rgba(18,28,34,.10);
}

.brand{
    font-weight:650 !important;
}

.brand-mark{
    background:var(--v6-petrol) !important;
    font-weight:650 !important;
}

.brand small{
    font-weight:500 !important;
    color:#aebbc2 !important;
}

.topbar nav a{
    color:#c5d0d6 !important;
    font-weight:500 !important;
}

.topbar nav a:hover{
    background:#2b3840 !important;
    color:#fff !important;
}

.topbar nav a.active{
    background:#31434d !important;
    color:#fff !important;
    box-shadow:inset 0 -2px 0 #60a4a0;
}

/* ----- Main container ----- */

.container{
    max-width:1680px;
}

/* ----- Buttons: only primary action gets filled petrol ----- */

.btn,
.dpv5-btn{
    min-height:38px;
    padding:8px 13px;
    border:1px solid #ccd8de !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#405762 !important;
    font-weight:500 !important;
    box-shadow:0 1px 1px rgba(25,43,54,.025);
    transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.btn:hover,
.dpv5-btn:hover{
    background:#f7fafb !important;
    border-color:#aec1ca !important;
    color:#294955 !important;
    text-decoration:none !important;
}

.btn.primary,
.dpv5-btn--primary{
    background:var(--v6-petrol) !important;
    border-color:var(--v6-petrol) !important;
    color:#fff !important;
}

.btn.primary:hover,
.dpv5-btn--primary:hover{
    background:var(--v6-petrol-hover) !important;
    border-color:var(--v6-petrol-hover) !important;
    color:#fff !important;
}

.dpv5-btn--secondary{
    background:#eef5f6 !important;
    border-color:#d1e1e4 !important;
    color:#2a626d !important;
}

.btn.ghost,
.dpv5-btn--ghost{
    background:#fff !important;
    color:#61717a !important;
}

/* ----- Common cards ----- */

.panel,
.filter-card,
.table-card,
.company-filter-panel,
.companies-table-wrap,
.dpv5-filter-card,
.dpv5-table-card{
    background:var(--v6-surface) !important;
    border:1px solid var(--v6-line) !important;
    border-radius:var(--v6-radius) !important;
    box-shadow:var(--v6-shadow) !important;
}

/* ========================================================================
   FILTERS
   Company and portal filters use the SAME visual system
   ======================================================================== */

.company-filter-panel,
.dpv5-filter-card{
    padding:16px !important;
    margin-bottom:15px !important;
}

.company-filter-grid,
.dpv5-filter-grid{
    display:grid !important;
    gap:12px !important;
    align-items:end !important;
}

.company-filter-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

.dpv5-filter-grid{
    grid-template-columns:minmax(260px,1.55fr) repeat(4,minmax(145px,1fr)) !important;
}

.company-filter-grid label,
.filter-search label,
.dpv5-filter-grid label{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    margin:0 !important;
    color:var(--v6-text-2) !important;
    font-size:12px !important;
    font-weight:500 !important;
}

.dpv5-filter-grid label > span{
    color:var(--v6-text-2) !important;
    font-size:12px !important;
    font-weight:500 !important;
}

.company-filter-grid input,
.company-filter-grid select,
.filter-search input,
.dpv5-filter-grid input,
.dpv5-filter-grid select{
    width:100% !important;
    height:40px !important;
    min-height:40px !important;
    padding:8px 11px !important;
    border:1px solid #d4dee3 !important;
    border-radius:9px !important;
    background:#fbfcfd !important;
    color:#2c3d46 !important;
    font-size:13px !important;
    font-weight:400 !important;
    outline:none !important;
    box-shadow:none !important;
}

.company-filter-grid input:hover,
.company-filter-grid select:hover,
.filter-search input:hover,
.dpv5-filter-grid input:hover,
.dpv5-filter-grid select:hover{
    border-color:#bdcbd2 !important;
    background:#fff !important;
}

.company-filter-grid input:focus,
.company-filter-grid select:focus,
.filter-search input:focus,
.dpv5-filter-grid input:focus,
.dpv5-filter-grid select:focus{
    border-color:#75a1ae !important;
    background:#fff !important;
    box-shadow:0 0 0 3px rgba(45,123,120,.09) !important;
}

.company-filter-actions,
.dpv5-filter-actions{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:13px !important;
}

/* Portal page header spacing */
.dpv5-page-head{
    margin-bottom:16px !important;
}

.dpv5-page-head p{
    color:var(--v6-text-2) !important;
}

.dpv5-head-actions{
    display:flex !important;
    gap:8px !important;
    align-items:center !important;
    flex-wrap:wrap !important;
}

/* ========================================================================
   COMPANY PAGE
   Excel-style alternating rows
   ======================================================================== */

.company-stats{
    gap:8px !important;
}

.company-stat{
    background:#fff !important;
    border:1px solid var(--v6-line) !important;
    color:var(--v6-text-2) !important;
    box-shadow:0 2px 8px rgba(29,48,59,.03);
}

.company-stat strong{
    color:var(--v6-petrol) !important;
    font-weight:600 !important;
}

.companies-table-wrap{
    overflow:auto !important;
}

.companies-table thead th{
    background:#eaf0f3 !important;
    color:#52636d !important;
    border-bottom:1px solid #d3dde2 !important;
    font-size:10.5px !important;
    font-weight:600 !important;
    letter-spacing:.045em;
}

.companies-table tbody tr:nth-child(odd) td{
    background:var(--v6-row-a) !important;
}

.companies-table tbody tr:nth-child(even) td{
    background:var(--v6-row-b) !important;
}

.companies-table tbody tr:hover td{
    background:var(--v6-row-hover) !important;
}

.companies-table tbody td{
    border-bottom:1px solid var(--v6-line-soft) !important;
    color:#31434d !important;
    font-weight:400 !important;
}

.companies-table .company-name{
    color:#254f61 !important;
    font-weight:600 !important;
}

.companies-table .company-name:hover{
    color:var(--v6-petrol) !important;
}

.company-type-pill{
    background:#eaf1f3 !important;
    border:1px solid #d7e2e6 !important;
    color:#49636f !important;
    font-weight:500 !important;
    border-radius:7px !important;
}

.priority-pill{
    font-weight:600 !important;
    letter-spacing:0 !important;
}

.p-a,
.p-gutes-ziel,
.p-good-abbruch-target{
    background:#e7f2ed !important;
    color:#39715a !important;
}

.p-b,
.p-passend,
.p-secondary-abbruch-target{
    background:#fbf2df !important;
    color:#886526 !important;
}

.phone-link{
    color:#345b6b !important;
    font-weight:500 !important;
}

.contact-status-select,
.status-form select{
    background:#fff !important;
    border-color:#d5dfe4 !important;
    font-weight:400 !important;
}

.comment-edit-link,
.inline-edit summary{
    color:#4b7484 !important;
    font-weight:500 !important;
}

.company-selection-toolbar,
.selection-bar{
    background:#edf4f5 !important;
    border:1px solid #d4e3e5 !important;
    box-shadow:none !important;
}

/* ========================================================================
   PORTAL PAGE
   Modern compact table + alternating rows
   ======================================================================== */

.dpv5-summary-row{
    margin:8px 2px 11px !important;
    color:var(--v6-text-2) !important;
    font-size:12px !important;
}

.dpv5-summary-row strong{
    color:var(--v6-petrol) !important;
    font-weight:600 !important;
}

.dpv5-summary-row a{
    color:#4c7280 !important;
    font-weight:500 !important;
}

.dpv5-table-card{
    overflow:hidden !important;
}

.dpv5-table-wrap{
    overflow-x:auto !important;
}

.dpv5-table{
    width:100% !important;
    min-width:1180px !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:#fff !important;
}

.dpv5-table thead th{
    padding:11px 12px !important;
    background:#eaf0f3 !important;
    color:#52636d !important;
    border-bottom:1px solid #d3dde2 !important;
    font-size:10.5px !important;
    font-weight:600 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
}

.dpv5-table tbody tr:nth-child(odd) td{
    background:var(--v6-row-a) !important;
}

.dpv5-table tbody tr:nth-child(even) td{
    background:var(--v6-row-b) !important;
}

.dpv5-table tbody tr:hover td{
    background:var(--v6-row-hover) !important;
}

.dpv5-table td{
    padding:13px 12px !important;
    border-bottom:1px solid var(--v6-line-soft) !important;
    color:#33464f !important;
    font-size:12.5px !important;
    font-weight:400 !important;
    vertical-align:top !important;
}

.dpv5-table tbody tr:last-child td{
    border-bottom:0 !important;
}

.dpv5-portal-cell{
    min-width:270px !important;
    max-width:360px !important;
}

.dpv5-portal-name{
    display:block !important;
    color:#245367 !important;
    font-size:13.5px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
}

.dpv5-portal-name:hover{
    color:var(--v6-petrol) !important;
}

.dpv5-portal-cell > span{
    display:block !important;
    margin-top:4px !important;
    color:#75848c !important;
    font-size:11.5px !important;
    font-weight:400 !important;
}

.dpv5-chip,
.dpv5-org-type{
    display:inline-flex !important;
    align-items:center !important;
    width:auto !important;
    max-width:190px !important;
    padding:5px 8px !important;
    border-radius:7px !important;
    border:1px solid transparent !important;
    font-size:11px !important;
    font-weight:500 !important;
    line-height:1.25 !important;
    white-space:normal !important;
}

.dpv5-chip{
    background:#e5f1f2 !important;
    border-color:#d5e7e8 !important;
    color:#376b70 !important;
}

.dpv5-org-type{
    background:#edf1f4 !important;
    border-color:#dde5e9 !important;
    color:#596b75 !important;
}

.dpv5-region{
    color:#5c6e77 !important;
}

/* Portal status colors */
.dpv5-status{
    display:inline-flex !important;
    align-items:center !important;
    padding:5px 8px !important;
    border-radius:999px !important;
    font-size:10.5px !important;
    font-weight:500 !important;
    white-space:nowrap !important;
    background:#edf1f3 !important;
    color:#596971 !important;
}

.dpv5-status--zu_registrieren,
.dpv5-status--kein_konto{
    background:#e8f1f5 !important;
    color:#426b7d !important;
}

.dpv5-status--registrierung_laeuft,
.dpv5-status--registrierung{
    background:#fbf1dd !important;
    color:#866322 !important;
}

.dpv5-status--aktiv{
    background:#e5f2ec !important;
    color:#3d785e !important;
}

.dpv5-status--beobachten,
.dpv5-status--pruefung{
    background:#edf0f6 !important;
    color:#5f6983 !important;
}

.dpv5-status--problem,
.dpv5-status--gesperrt{
    background:#f8eaea !important;
    color:#995151 !important;
}

.dpv5-status--nicht_relevant{
    background:#eff1f2 !important;
    color:#7a8388 !important;
}

/* Portal quick actions */
.dpv5-link-button{
    color:#4d7380 !important;
    font-weight:500 !important;
    font-size:11px !important;
}

.dpv5-link-button:hover{
    color:#2d5d6b !important;
}

.dpv5-check-date{
    color:#485d67 !important;
    font-weight:500 !important;
}

.dpv5-row-link{
    color:#596e78 !important;
    font-size:11.5px !important;
    font-weight:500 !important;
}

.dpv5-row-link--open{
    color:#2e6675 !important;
}

.dpv5-note-preview{
    color:#53656e !important;
    font-weight:400 !important;
}

.dpv5-note-preview.is-empty{
    color:#9aa5aa !important;
}

/* Popovers */
.dpv5-popover-form{
    background:#fff !important;
    border:1px solid #d5dfe4 !important;
    border-radius:10px !important;
    box-shadow:0 12px 32px rgba(23,42,52,.14) !important;
}

.dpv5-mini-save{
    background:#eaf3f4 !important;
    color:#32646d !important;
    border:1px solid #d0e1e3 !important;
    border-radius:8px !important;
    font-weight:500 !important;
}

/* ========================================================================
   DASHBOARD / ÜBERSICHT
   Less blue, cool related accent colors
   ======================================================================== */

.stats{
    gap:12px !important;
}

.stat{
    position:relative;
    overflow:hidden;
    background:#fff !important;
    border:1px solid var(--v6-line) !important;
    border-radius:15px !important;
    box-shadow:var(--v6-shadow) !important;
    padding:18px !important;
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}

.stat::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:3px;
    background:#7c929e;
}

.stat:nth-child(1)::before{background:var(--v6-petrol)}
.stat:nth-child(2)::before{background:var(--v6-steel)}
.stat:nth-child(3)::before{background:var(--v6-teal)}
.stat:nth-child(4)::before{background:var(--v6-indigo)}
.stat:nth-child(5)::before{background:var(--v6-sky)}
.stat:nth-child(6)::before{background:#667889}

.stat:nth-child(1) b{color:var(--v6-petrol) !important}
.stat:nth-child(2) b{color:var(--v6-steel) !important}
.stat:nth-child(3) b{color:var(--v6-teal) !important}
.stat:nth-child(4) b{color:var(--v6-indigo) !important}
.stat:nth-child(5) b{color:var(--v6-sky) !important}
.stat:nth-child(6) b{color:#667889 !important}

.stat b{
    font-weight:600 !important;
    font-size:24px !important;
}

.stat span{
    color:var(--v6-text-2) !important;
    font-weight:400 !important;
}

.stat:hover{
    transform:translateY(-1px);
    box-shadow:var(--v6-shadow-hover) !important;
    border-color:#cedadf !important;
}

.dashboard-grid .panel,
.grid-2.dashboard-grid .panel{
    border-radius:16px !important;
    box-shadow:var(--v6-shadow) !important;
}

.dashboard-grid .panel h2{
    color:#2d3e47 !important;
    font-weight:600 !important;
}

.list-row{
    padding:11px 10px !important;
    margin:0 -10px;
    border-bottom:1px solid var(--v6-line-soft) !important;
    border-radius:8px;
}

.list-row:nth-child(even){
    background:#f6f9fa;
}

.list-row:hover{
    background:#edf4f5;
}

.list-row .strong,
.list-row strong,
.list-row a{
    color:#315a6a !important;
    font-weight:600 !important;
}

.status-dot.new{
    background:#b68b3a !important;
}

.status-dot.done{
    background:#4d8a72 !important;
}

/* ========================================================================
   IMPORT / EXPORT
   ======================================================================== */

.dpv5-import-card,
.dpv5-portal-export-card{
    border:1px solid var(--v6-line) !important;
    border-radius:15px !important;
    box-shadow:var(--v6-shadow) !important;
}

.dpv5-import-kicker{
    color:#5e7a83 !important;
    font-weight:500 !important;
}

.dpv5-column-list{
    background:#f3f7f8 !important;
    color:#5d6f78 !important;
}

.dpv5-import-card h2,
.dpv5-portal-export-card h2,
.dpv5-company-export-head h2{
    font-weight:600 !important;
}

/* ========================================================================
   Pagination
   ======================================================================== */

.page,
.pagination a,
.pagination span{
    font-weight:500 !important;
}

.page.active{
    background:var(--v6-petrol) !important;
    border-color:var(--v6-petrol) !important;
    color:#fff !important;
}

/* ========================================================================
   Responsive
   ======================================================================== */

@media(max-width:1250px){
    .dpv5-filter-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .company-filter-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media(max-width:900px){
    .dpv5-filter-grid,
    .company-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .stats{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:600px){
    .dpv5-filter-grid,
    .company-filter-grid{
        grid-template-columns:1fr !important;
    }

    .stats{
        grid-template-columns:1fr !important;
    }

    .page-head{
        gap:12px;
    }
}

/* ========================================================================
   END DIABOS CRM UI V6
   ======================================================================== */