:root{
    --oq-navy:#001f5b;
    --oq-blue:#136cff;
    --oq-blue-2:#1f86ff;
    --oq-bg:#f4f8ff;
    --oq-card:#ffffff;
    --oq-text:#102045;
    --oq-muted:#6b7894;
    --oq-border:#dce7fb;
    --oq-shadow:0 12px 30px rgba(0,31,91,.10);
}

*{box-sizing:border-box}
html{min-height:100%}
body{
    margin:0;
    min-height:100vh;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:
        radial-gradient(circle at top left, rgba(19,108,255,.10), transparent 30%),
        linear-gradient(135deg,#ffffff 0%,var(--oq-bg) 58%,#eef5ff 100%);
    color:var(--oq-text);
    font-size:14px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.oq-shell,.app-shell{
    min-height:100vh;
    display:flex;
    align-items:stretch;
}

/* Sidebar */
.oq-sidebar,.sidebar{
    width:240px;
    background:linear-gradient(180deg,var(--oq-navy) 0%,#03184a 100%);
    color:#fff;
    padding:18px 14px;
    display:flex;
    flex-direction:column;
    box-shadow:7px 0 24px rgba(0,31,91,.16);
    position:sticky;
    top:0;
    height:100vh;
    min-height:100vh;
    overflow-y:auto;
    flex-shrink:0;
}
.oq-brand,.sidebar-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:18px;
    padding:10px 12px;
    margin-bottom:20px;
    min-height:74px;
    box-shadow:0 8px 20px rgba(0,0,0,.13);
}
.oq-brand img,.sidebar-brand .brand-logo{
    width:100%;
    max-height:54px;
    object-fit:contain;
    display:block;
}
.oq-nav,.nav-list{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.oq-nav-item,.nav-list a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:12px;
    color:#dce9ff;
    font-weight:750;
    transition:.15s ease;
}
.oq-nav-item:hover,.oq-nav-item.active,.nav-list a:hover,.nav-list a.active{
    background:linear-gradient(90deg,var(--oq-blue),var(--oq-blue-2));
    color:#fff;
    transform:translateX(2px);
}
.oq-nav-item.active{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.oq-nav-item.is-disabled,.nav-list a[aria-disabled="true"]{
    opacity:.46;
    cursor:not-allowed;
}
.oq-nav-icon{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:rgba(255,255,255,.14);
    font-size:12px;
}
.oq-sidebar-footer{
    margin-top:auto;
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:14px;
    color:#c8d8ff;
    font-size:12px;
}

/* Topbar */
.oq-content{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}
.oq-topbar{
    position:sticky;
    top:0;
    z-index:20;
    height:62px;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 24px;
    background:rgba(244,248,255,.84);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(220,231,251,.8);
}
.oq-topbar-left,.oq-topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}
.oq-search{
    width:min(420px,36vw);
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid var(--oq-border);
    border-radius:14px;
    padding:8px 11px;
    color:var(--oq-muted);
}
.oq-search input{
    border:0;
    outline:0;
    min-height:22px;
    padding:0;
    width:100%;
    background:transparent;
    color:var(--oq-text);
    font:inherit;
}
.oq-topbar-icon{
    position:relative;
    width:38px;
    height:38px;
    border:1px solid var(--oq-border);
    border-radius:13px;
    background:#fff;
    color:var(--oq-navy);
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 5px 16px rgba(0,31,91,.06);
    text-decoration:none;
}
.oq-topbar-icon strong{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:17px;
    height:17px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:var(--oq-blue);
    color:#fff;
    font-size:10px;
    line-height:1;
}
.oq-user-menu{position:relative}
.oq-user-button{
    border:1px solid var(--oq-border);
    background:#fff;
    border-radius:999px;
    min-height:38px;
    padding:5px 10px 5px 5px;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--oq-navy);
    font-weight:900;
    cursor:pointer;
    box-shadow:0 5px 16px rgba(0,31,91,.06);
}
.oq-avatar{
    width:28px;
    height:28px;
    border-radius:999px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--oq-blue),var(--oq-navy));
    font-size:12px;
}
.oq-user-name{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.oq-caret{
    color:var(--oq-muted);
    font-size:11px;
}
.oq-user-dropdown{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    min-width:180px;
    background:#fff;
    border:1px solid var(--oq-border);
    border-radius:15px;
    box-shadow:var(--oq-shadow);
    padding:7px;
    display:none;
}
.oq-user-menu:hover .oq-user-dropdown,
.oq-user-menu:focus-within .oq-user-dropdown{
    display:block;
}
.oq-user-dropdown a{
    display:block;
    padding:10px 11px;
    border-radius:11px;
    color:var(--oq-navy);
    font-weight:750;
}
.oq-user-dropdown a:hover{background:#f0f6ff}
.oq-user-dropdown a[href="/logout.php"]{color:#b91c1c}
.oq-user-dropdown a[href="/logout.php"]:hover{background:#fff0f0}

/* Main */
.main,.main-panel{
    flex:1;
    padding:18px 24px 22px;
    max-width:none;
    min-height:calc(100vh - 62px);
}
.page-wrap{padding-bottom:42px}
.page-header,.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.page-header h1,.topbar h1{
    margin:0;
    color:var(--oq-navy);
    font-size:26px;
    line-height:1.08;
    letter-spacing:-.025em;
}
.page-header p{
    margin:5px 0 0;
    color:var(--oq-muted);
}
.small-label{
    margin:0 0 5px;
    color:var(--oq-blue);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.topbar .user-menu,.page-header .user-menu{display:none!important}

/* Cards */
.card,.panel,.content-band,.management-section,.role-card,.management-card,.status-card,.oq-stat-card{
    background:rgba(255,255,255,.95);
    border:1px solid var(--oq-border);
    border-radius:18px;
    box-shadow:var(--oq-shadow);
}
.card,.panel,.content-band,.management-section{
    padding:16px 18px;
    margin-bottom:16px;
}
.content-band{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:16px;
    align-items:start;
}
.content-band.single-column{grid-template-columns:1fr}
.content-band h2,.panel h2,.card h2,.management-section h2{
    margin:0 0 12px;
    color:var(--oq-navy);
    font-size:20px;
}
.content-band p,.panel-title p,.section-subtitle,.item-heading p,.muted{
    color:var(--oq-muted);
    margin:.2rem 0 0;
}
.status-grid,.oq-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:16px;
}
.status-card,.oq-stat-card{padding:16px}
.status-card strong,.oq-stat-card strong{
    display:block;
    color:var(--oq-navy);
    font-size:24px;
    line-height:1.1;
}

/* Forms */
.admin-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-bottom:16px;
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;
}
.form-stack{display:grid;gap:12px}
.form-wide{grid-column:1/-1}
label{
    display:flex;
    flex-direction:column;
    gap:5px;
    font-weight:750;
    color:var(--oq-navy);
}
input,select,textarea{
    width:100%;
    border:1px solid var(--oq-border);
    border-radius:12px;
    padding:8px 10px;
    min-height:36px;
    font:inherit;
    color:var(--oq-text);
    background:#fff;
}
textarea{min-height:82px}
input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--oq-blue);
    box-shadow:0 0 0 3px rgba(19,108,255,.11);
}
.check-line{flex-direction:row;align-items:center}
.check-line input,.check-grid input,.permission-grid input{width:auto;min-height:auto}
.check-grid,.permission-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.check-grid label,.permission-grid label{
    flex-direction:row;
    align-items:center;
    background:#f7fbff;
    border:1px solid var(--oq-border);
    border-radius:12px;
    padding:8px;
}
.option-panel,.card-details{
    border:1px solid var(--oq-border);
    background:#f7fbff;
    border-radius:13px;
    padding:10px;
}
.option-panel summary,.card-details summary{
    color:var(--oq-navy);
    font-weight:900;
    cursor:pointer;
}
.form-footer,.card-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
button,.primary-button,.secondary-button,.button{
    border:0;
    border-radius:12px;
    padding:8px 13px;
    min-height:34px;
    background:linear-gradient(90deg,var(--oq-blue),var(--oq-blue-2));
    color:#fff;
    font-weight:900;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1.1;
}
.secondary-button,.button.secondary,button.secondary{
    background:#eaf2ff;
    color:var(--oq-navy);
}
.button.small,button.small{
    padding:7px 10px;
    min-height:30px;
    border-radius:10px;
    font-size:12px;
}

.alert{
    padding:10px 12px;
    border-radius:13px;
    margin-bottom:14px;
    font-weight:750;
}
.alert-success,.alert.success{background:#e8fff6;color:#087553;border:1px solid #bff3de}
.alert-error,.alert.error{background:#fff0f0;color:#a41515;border:1px solid #ffcaca}

/* Lists/cards */
.management-list,.role-list{display:grid;gap:12px}
.role-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.management-card,.role-card{padding:16px}
.management-card.is-unread{
    border-color:rgba(19,108,255,.35);
    background:#f8fbff;
}
.item-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}
.item-heading h3{margin:0;color:var(--oq-navy)}
.item-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-top:10px;
    color:var(--oq-muted);
}
.chip-row{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-top:10px;
}
.mini-chip,.pill,.badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:4px 8px;
    background:#eaf2ff;
    color:var(--oq-navy);
    font-size:11px;
    font-weight:900;
}
.pill-ok,.status-active{background:#e8fff6;color:#087553}
.pill-muted,.muted-chip,.status-inactive,.status-paused{background:#eef2f7;color:#536176}
.status-trial,.status-lead{background:#fff7df;color:#9a6700}
.status-cancelled{background:#fff0f0;color:#a41515}
.card-details{margin-top:12px}
.stacked-action{display:grid;gap:10px;margin-top:10px}
.inline-form{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

/* Tables */
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    font-size:13px;
}
th{
    text-align:left;
    color:var(--oq-navy);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    background:#f0f6ff;
}
th,td{
    padding:9px 10px;
    border-bottom:1px solid var(--oq-border);
}
tr:last-child td{border-bottom:0}
.actions{white-space:nowrap}
.actions form{margin:0}

/* Auth/login */
.auth-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:28px;
}
.auth-shell{width:min(430px,100%)}
.auth-panel{
    background:rgba(255,255,255,.96);
    border:1px solid var(--oq-border);
    border-radius:24px;
    padding:26px;
    box-shadow:var(--oq-shadow);
}
.auth-brand{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:18px;
}
.auth-logo{
    width:220px;
    max-width:80%;
    height:auto;
    display:block;
}
.auth-heading{text-align:center;margin-bottom:20px}
.auth-heading h1{
    margin:0 0 6px;
    color:var(--oq-navy);
    font-size:28px;
    line-height:1.1;
    letter-spacing:-.025em;
}
.auth-heading p{margin:0;color:var(--oq-muted)}
.auth-form{display:grid;gap:13px}
.auth-submit{width:100%;margin-top:4px}

/* Customers split-card layout */
.customers-page{max-width:none!important}
.customers-page .customer-stats{
    max-width:1080px!important;
    gap:10px;
    margin-bottom:12px;
}
.customer-stats .compact-stat{
    padding:11px 14px;
    border-radius:15px;
    min-height:58px;
}
.customer-stats .compact-stat span{
    display:block;
    color:var(--oq-muted);
    font-size:13px;
    margin-bottom:2px;
}
.customer-stats .compact-stat strong{font-size:22px}

.customer-top-grid{
    display:grid!important;
    grid-template-columns:minmax(560px,720px) minmax(320px,420px)!important;
    gap:14px!important;
    align-items:stretch!important;
    max-width:1160px!important;
    width:100%!important;
    margin-bottom:14px!important;
}
.customer-top-grid>.customer-form-card,
.customer-top-grid>.customer-projects-card{
    width:auto!important;
    max-width:none!important;
    margin-bottom:0!important;
}
.customer-form-card{grid-column:1!important}
.customer-projects-card{
    grid-column:2!important;
    display:flex;
    flex-direction:column;
}
.compact-page{padding-top:14px}
.compact-header{margin-bottom:12px}
.compact-header h1{font-size:24px}
.compact-header p{margin-top:3px}
.compact-card{
    padding:13px 16px;
    margin-bottom:12px;
    border-radius:16px;
}
.compact-card h2{font-size:18px;margin-bottom:8px}
.compact-section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.compact-section-title h2{margin:0}

.customer-row-form{display:grid;gap:8px}
.field-row{
    display:grid;
    grid-template-columns:128px minmax(0,1fr);
    gap:12px;
    align-items:center;
    margin:0;
}
.field-row span{
    color:var(--oq-navy);
    font-weight:850;
    font-size:13px;
}
.field-row input,
.field-row select,
.field-row textarea{
    min-height:32px;
    padding:7px 10px;
    border-radius:10px;
}
.field-row-notes{align-items:start}
.field-row-notes span{padding-top:8px}
.field-row-notes textarea{
    min-height:58px;
    resize:vertical;
}
.form-row-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:2px;
}
.form-row-actions button{
    min-height:32px;
    padding:7px 14px;
}
.customer-projects-card .muted{
    margin:0 0 12px;
    line-height:1.45;
}
.project-preview-list{
    display:grid;
    gap:8px;
    margin-top:auto;
}
.project-preview-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px dashed var(--oq-border);
    background:#f8fbff;
    border-radius:11px;
    padding:8px 10px;
    color:var(--oq-muted);
}
.project-preview-row span{font-weight:750}
.project-preview-row strong{color:var(--oq-navy)}
.customer-overview-card{max-width:100%!important}
.compact-table th,.compact-table td{padding:8px 9px}
.compact-table th{font-size:10px}

/* Responsive */
@media(max-width:1200px){
    .customer-top-grid{
        grid-template-columns:1fr!important;
        max-width:none!important;
    }
    .customer-form-card,.customer-projects-card{
        grid-column:auto!important;
    }
}
@media(max-width:1100px){
    .admin-grid,.content-band,.role-list-grid{grid-template-columns:1fr}
    .status-grid,.oq-stats{grid-template-columns:1fr}
}
@media(max-width:900px){
    .oq-shell,.app-shell{display:block}
    .oq-sidebar,.sidebar{
        position:relative;
        width:100%;
        height:auto;
        min-height:auto;
        overflow-y:visible;
    }
    .oq-brand,.sidebar-brand{
        max-width:260px;
        min-height:64px;
    }
    .oq-topbar{
        position:relative;
        height:auto;
        min-height:58px;
        flex-wrap:wrap;
        padding:12px 18px;
    }
    .oq-search{width:100%}
    .main,.main-panel{
        padding:18px;
        min-height:auto;
    }
    .page-header,.topbar{
        align-items:flex-start;
        flex-direction:column;
    }
}
@media(max-width:700px){
    .field-row{
        grid-template-columns:1fr;
        gap:4px;
    }
    .field-row-notes span{padding-top:0}
    .form-row-actions{justify-content:flex-start}
}
@media(max-width:650px){
    .form-grid,.check-grid,.permission-grid{grid-template-columns:1fr}
    .oq-topbar-right{
        width:100%;
        justify-content:flex-end;
    }
    .oq-user-name{display:none}
    .auth-page{padding:18px}
    .auth-panel{padding:22px}
    .auth-logo{width:190px}
    table{
        display:block;
        overflow-x:auto;
    }
}


/* === Customers workspace CSS bundled into app.css === */
/* Customers workspace layout based on requested reference */
.customers-workspace {
    padding-top: 14px;
}

.customers-header-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.customers-header-card h1 {
    margin: 0;
    color: var(--oq-navy);
    font-size: 24px;
}

.customers-header-card p {
    margin: 4px 0 0;
    color: var(--oq-muted);
}

.customers-header-actions {
    display: flex;
    gap: 8px;
}

.customers-board {
    display: grid;
    grid-template-columns: 250px minmax(680px, 1fr) 330px;
    gap: 14px;
    align-items: start;
}

.customers-list-card,
.customer-assignments-card,
.customer-detail-card,
.customer-table-card,
.customer-empty-detail {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
}

.customers-list-card {
    min-height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.customers-list-head {
    padding: 13px 14px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.customers-list-head h2 {
    margin: 0;
    color: var(--oq-navy);
    font-size: 17px;
}

.customers-filter {
    display: flex;
    gap: 8px;
    padding: 0 14px 12px;
}

.customers-filter input {
    min-height: 32px;
}

.customers-filter button {
    width: 36px;
    min-height: 32px;
    padding: 0;
}

.customers-list {
    border-top: 1px solid var(--oq-border);
    border-bottom: 1px solid var(--oq-border);
    flex: 1;
}

.customer-list-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 12px;
    gap: 8px;
    align-items: center;
    padding: 12px 12px;
    border-bottom: 1px solid var(--oq-border);
    color: var(--oq-text);
}

.customer-list-item.active {
    background: #eaf2ff;
    box-shadow: inset 3px 0 0 var(--oq-blue);
}

.customer-list-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: #f0f6ff;
    color: var(--oq-blue);
}

.customer-list-main {
    display: grid;
    gap: 2px;
}

.customer-list-main strong {
    color: var(--oq-navy);
}

.customer-list-main small {
    color: var(--oq-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-list-arrow {
    color: var(--oq-blue);
    font-size: 18px;
}

.customer-empty-list {
    padding: 16px;
    color: var(--oq-muted);
}

.customers-list-footer {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--oq-muted);
    font-size: 12px;
}

.customers-all-link {
    margin: 0 14px 14px;
    border: 1px solid var(--oq-border);
    border-radius: 11px;
    padding: 10px 12px;
    color: var(--oq-navy);
    background: #f8fbff;
    font-weight: 750;
}

.customer-detail-area {
    display: grid;
    gap: 12px;
}

.customer-detail-card {
    padding: 0;
    overflow: hidden;
}

.customer-title-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    background: #f8fbff;
    border-bottom: 1px solid var(--oq-border);
}

.customer-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #eaf2ff;
    color: var(--oq-blue);
}

.customer-title-row h2 {
    margin: 0;
    color: var(--oq-navy);
    font-size: 22px;
}

.customer-title-row p {
    margin: 4px 0 0;
    color: var(--oq-muted);
}

.customer-title-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.customer-title-actions form {
    margin: 0;
}

.customer-info-grid {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 28px;
}

.customer-info-grid span,
.customer-kpi span {
    display: block;
    color: var(--oq-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.customer-info-grid strong {
    color: var(--oq-text);
}

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

.customer-kpi {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 14px;
    padding: 13px 14px;
    box-shadow: var(--oq-shadow);
}

.customer-kpi strong {
    display: block;
    color: var(--oq-navy);
    font-size: 22px;
    line-height: 1.1;
}

.customer-kpi small {
    color: var(--oq-muted);
}

.customer-table-card {
    padding: 14px;
}

.customer-table-card h2 {
    margin: 0 0 12px;
    color: var(--oq-navy);
    font-size: 17px;
}

.customer-table-card table th,
.customer-table-card table td {
    padding: 9px 10px;
}

.customer-card-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--oq-navy);
    font-weight: 750;
}

.customer-assignments-card {
    min-height: 650px;
    display: flex;
    flex-direction: column;
}

.customer-assignments-card .muted {
    padding: 0 14px 12px;
}

.assignment-list {
    padding: 0 14px;
    display: grid;
    gap: 10px;
    flex: 1;
}

.assignment-card {
    border: 1px solid #65d686;
    background: #dcffe5;
    border-radius: 14px;
    padding: 12px;
    color: #14532d;
}

.assignment-card strong,
.assignment-card small {
    display: block;
}

.assignment-empty {
    border: 1px dashed var(--oq-border);
    border-radius: 14px;
    background: #f8fbff;
    padding: 16px;
    color: var(--oq-muted);
}

.customers-tip {
    margin-top: 14px;
    background: #eef6ff;
    border: 1px solid #b9d8ff;
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--oq-muted);
}

/* Modal */
.oq-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(0,31,91,.28);
    backdrop-filter: blur(6px);
    padding: 24px;
}

.oq-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--oq-border);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,31,91,.25);
    padding: 18px;
}

.oq-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.oq-modal-head h2 {
    margin: 0;
    color: var(--oq-navy);
}

.modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.modal-form-grid .form-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1500px) {
    .customers-board {
        grid-template-columns: 230px minmax(620px, 1fr) 300px;
    }
}

@media (max-width: 1250px) {
    .customers-board {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .customer-assignments-card {
        grid-column: 1 / -1;
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .customers-header-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .customers-board {
        grid-template-columns: 1fr;
    }

    .customers-list-card,
    .customer-assignments-card {
        min-height: auto;
    }

    .customer-title-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .customer-title-actions {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .customer-info-grid,
    .customer-kpi-grid {
        grid-template-columns: 1fr;
    }

    .modal-form-grid {
        grid-template-columns: 1fr;
    }
}


/* === Projecten / opdrachten workspace CSS bundled into app.css === */
/* Projecten / opdrachten detail workspace */
.project-command-page {
    max-width: none;
}

.project-command-header {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.project-command-header h1 {
    margin: 0;
    color: var(--oq-navy);
    font-size: 24px;
}

.project-command-header p {
    margin: 4px 0 0;
    color: var(--oq-muted);
}

.project-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
    align-items: start;
}

.project-main-card,
.project-side-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
    overflow: hidden;
}

.project-hero {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    background: #f8fbff;
    border-bottom: 1px solid var(--oq-border);
}

.project-hero h2 {
    margin: 0;
    color: var(--oq-navy);
    font-size: 22px;
}

.project-hero p {
    margin: 4px 0 0;
    color: var(--oq-muted);
}

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

.project-tabs {
    display: flex;
    gap: 4px;
    padding: 0 14px;
    border-bottom: 1px solid var(--oq-border);
    background: #fff;
    overflow-x: auto;
}

.project-tabs a {
    display: inline-flex;
    padding: 13px 12px 11px;
    border-bottom: 3px solid transparent;
    color: var(--oq-text);
    font-weight: 800;
    font-size: 13px;
}

.project-tabs a.active {
    color: var(--oq-blue);
    border-bottom-color: var(--oq-blue);
}

.project-section {
    margin: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--oq-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,31,91,.05);
}

.project-section h3 {
    margin: 0 0 14px;
    color: var(--oq-navy);
    font-size: 18px;
}

.project-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .8fr);
    gap: 14px;
}

.project-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 40px;
}

.project-info-grid span,
.project-status-grid span,
.project-mini-stat span {
    display: block;
    color: var(--oq-muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.project-info-grid strong,
.project-status-grid strong,
.project-mini-stat strong {
    color: var(--oq-navy);
}

.progress-section {
    display: flex;
    align-items: center;
    gap: 30px;
}

.progress-ring {
    width: 126px;
    height: 126px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--oq-blue) 0 68%, #eaf2ff 68% 100%);
    position: relative;
}

.progress-ring::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #fff;
}

.progress-ring strong,
.progress-ring span {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
}

.progress-ring strong {
    color: var(--oq-navy);
    font-size: 26px;
}

.progress-ring span {
    color: var(--oq-muted);
    font-size: 12px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 7px;
}

.dot.blue { background: var(--oq-blue); }
.dot.green { background: #16a34a; }
.dot.orange { background: #f97316; }

.project-summary-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px;
}

.project-summary-row.many {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin: 0;
}

.project-summary-card,
.project-mini-stat,
.project-status-grid > div {
    border: 1px solid var(--oq-border);
    background: #fff;
    border-radius: 13px;
    padding: 13px;
}

.project-summary-card strong,
.project-mini-stat strong {
    display: block;
    color: var(--oq-navy);
    font-size: 22px;
}

.project-summary-card small,
.project-mini-stat small,
.project-status-grid small {
    color: var(--oq-muted);
}

.project-summary-card.blue { background: #eef6ff; border-color: #b9d8ff; }
.project-summary-card.green { background: #eafff3; border-color: #b8f0cc; }
.project-summary-card.orange { background: #fff4e8; border-color: #ffd4ad; }

.project-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.project-add-assignment {
    background: #f8fbff;
}

.project-section-title {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.project-section-title h3 {
    margin: 0;
}

.project-section-title p {
    margin: 5px 0 0;
    color: var(--oq-muted);
}

.assignment-inline-form {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) 150px 100px 100px minmax(180px, 1.6fr) minmax(160px, 1.1fr) auto;
    gap: 10px;
    align-items: end;
}

.assignment-inline-form label {
    gap: 5px;
    font-size: 12px;
}

.assignment-inline-form input,
.assignment-inline-form select {
    min-height: 32px;
    border-radius: 9px;
}

.assignment-inline-form button {
    min-height: 34px;
    white-space: nowrap;
}

.project-filter-card {
    margin: 14px;
    padding: 14px;
    border: 1px solid var(--oq-border);
    border-radius: 14px;
    background: #fff;
}

.assignment-filter-grid {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 160px 160px 180px auto auto auto;
    gap: 10px;
    align-items: end;
}

.assignment-filter-grid label {
    font-size: 12px;
}

.assignment-filter-grid input,
.assignment-filter-grid select {
    min-height: 32px;
    border-radius: 9px;
}

.assignment-filter-grid button {
    min-height: 34px;
}

.quick-filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.quick-filters span {
    display: inline-flex;
    background: var(--oq-blue);
    color: #fff;
    border-radius: 9px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 800;
}

.project-table-card {
    margin: 14px;
    background: #fff;
    border: 1px solid var(--oq-border);
    border-radius: 14px;
    overflow: hidden;
}

.project-table-card table th,
.project-table-card table td {
    padding: 10px;
}

.project-side-card {
    min-height: 660px;
    display: flex;
    flex-direction: column;
}

.project-side-card .muted {
    padding: 0 14px 12px;
}

.project-side-list {
    display: grid;
    gap: 10px;
    padding: 0 14px;
    flex: 1;
}

.side-assignment-card {
    border: 1px solid #65d686;
    background: #dcffe5;
    border-radius: 14px;
    padding: 12px;
    color: #14532d;
}

.side-assignment-card strong,
.side-assignment-card small,
.side-assignment-card span {
    display: block;
}

.side-assignment-card span {
    margin-top: 7px;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 8px;
    background: #e8fff6;
    border: 1px solid #86efac;
    font-weight: 800;
}

.project-side-actions {
    border-top: 1px solid var(--oq-border);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.project-side-actions h3 {
    margin: 0 0 5px;
    color: var(--oq-navy);
}

.project-side-actions a {
    border: 1px solid var(--oq-border);
    border-radius: 10px;
    padding: 9px 10px;
    background: #f8fbff;
    color: var(--oq-navy);
    font-weight: 800;
}

.status-done,
.status-processed,
.status-completed {
    background: #e8fff6;
    color: #087553;
}

.status-open,
.status-planned {
    background: #eaf2ff;
    color: var(--oq-navy);
}

.status-not_planned,
.status-paused {
    background: #fff7df;
    color: #9a6700;
}

.status-cancelled {
    background: #fff0f0;
    color: #a41515;
}

@media (max-width: 1450px) {
    .project-detail-layout {
        grid-template-columns: 1fr;
    }

    .project-side-card {
        min-height: auto;
    }
}

@media (max-width: 1150px) {
    .project-overview-grid,
    .project-status-grid,
    .project-summary-row,
    .project-summary-row.many {
        grid-template-columns: 1fr 1fr;
    }

    .assignment-inline-form,
    .assignment-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .project-hero {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .project-hero-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .project-command-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-info-grid,
    .project-overview-grid,
    .project-status-grid,
    .project-summary-row,
    .project-summary-row.many,
    .assignment-inline-form,
    .assignment-filter-grid {
        grid-template-columns: 1fr;
    }
}


/* === Projects list-first CSS === */
/* Project list-first additions */
.project-list-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.project-list-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
    align-items: start;
}

.project-list-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
    overflow: hidden;
    min-height: 520px;
}

.project-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--oq-border);
}

.project-list-head h2 {
    margin: 0;
    color: var(--oq-navy);
    font-size: 20px;
}

.project-list-head p {
    margin: 4px 0 0;
    color: var(--oq-muted);
}

.project-list-search {
    display: flex;
    gap: 8px;
    align-items: center;
}

.project-list-search input {
    min-width: 240px;
    min-height: 34px;
}

.project-table-scroll {
    overflow-x: auto;
}

.project-list-table {
    width: 100%;
    border-collapse: collapse;
}

.project-list-table th,
.project-list-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--oq-border);
    text-align: left;
    vertical-align: middle;
}

.project-list-table th {
    background: #eef5ff;
    color: var(--oq-navy);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.project-list-table tr:hover td {
    background: #f8fbff;
}

.project-table-title {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--oq-navy);
}

.project-table-title strong,
.project-table-title small {
    display: block;
}

.project-table-title small {
    color: var(--oq-muted);
    margin-top: 3px;
}

.project-list-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    color: var(--oq-muted);
}

.project-list-side {
    min-height: 520px;
}

.project-empty-side {
    padding: 18px;
    color: var(--oq-text);
}

.project-empty-side strong {
    display: block;
    color: var(--oq-navy);
    font-size: 18px;
    margin-bottom: 8px;
}

/* Also bundle detail CSS in case theme file was overwritten */
.project-command-page{max-width:none!important}
.project-command-header{background:rgba(255,255,255,.96);border:1px solid var(--oq-border);border-radius:16px;box-shadow:var(--oq-shadow);padding:14px 18px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.project-command-header h1{margin:0;color:var(--oq-navy);font-size:24px}
.project-command-header p{margin:4px 0 0;color:var(--oq-muted)}
.project-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.project-main-card,.project-side-card{background:rgba(255,255,255,.96);border:1px solid var(--oq-border);border-radius:16px;box-shadow:var(--oq-shadow);overflow:hidden}
.project-hero{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:16px 18px;background:#f8fbff;border-bottom:1px solid var(--oq-border)}
.project-hero h2{margin:0;color:var(--oq-navy);font-size:22px}
.project-hero p{margin:4px 0 0;color:var(--oq-muted)}
.project-hero-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.project-tabs{display:flex;gap:4px;padding:0 14px;border-bottom:1px solid var(--oq-border);background:#fff;overflow-x:auto}
.project-tabs a{display:inline-flex;padding:13px 12px 11px;border-bottom:3px solid transparent;color:var(--oq-text);font-weight:800;font-size:13px}
.project-tabs a.active{color:var(--oq-blue);border-bottom-color:var(--oq-blue)}
.project-section{margin:14px;padding:16px;background:#fff;border:1px solid var(--oq-border);border-radius:14px;box-shadow:0 8px 20px rgba(0,31,91,.05)}
.project-section h3{margin:0 0 14px;color:var(--oq-navy);font-size:18px}
.project-overview-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.8fr);gap:14px}
.project-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
.project-summary-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px}
.project-summary-row.many{grid-template-columns:repeat(8,minmax(0,1fr));margin:0}
.project-summary-card,.project-mini-stat,.project-status-grid>div{border:1px solid var(--oq-border);background:#fff;border-radius:13px;padding:13px}
.project-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.project-side-card{min-height:660px;display:flex;flex-direction:column}
.progress-section{display:flex;align-items:center;gap:30px}
.progress-ring{width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--oq-blue) 0 68%,#eaf2ff 68% 100%);position:relative}
.progress-ring::after{content:"";position:absolute;inset:22px;border-radius:50%;background:#fff}
.progress-ring strong,.progress-ring span{position:relative;z-index:1;display:block;text-align:center}
.assignment-inline-form{display:grid;grid-template-columns:minmax(160px,1.4fr) 150px 100px 100px minmax(180px,1.6fr) minmax(160px,1.1fr) auto;gap:10px;align-items:end}
.project-filter-card{margin:14px;padding:14px;border:1px solid var(--oq-border);border-radius:14px;background:#fff}
.assignment-filter-grid{display:grid;grid-template-columns:minmax(160px,1fr) 160px 160px 180px auto auto auto;gap:10px;align-items:end}
.project-table-card{margin:14px;background:#fff;border:1px solid var(--oq-border);border-radius:14px;overflow:hidden}
.project-side-list{display:grid;gap:10px;padding:0 14px;flex:1}
.side-assignment-card{border:1px solid #65d686;background:#dcffe5;border-radius:14px;padding:12px;color:#14532d}
.side-assignment-card strong,.side-assignment-card small,.side-assignment-card span{display:block}
.project-side-actions{border-top:1px solid var(--oq-border);padding:14px;display:grid;gap:8px}
.project-side-actions a{border:1px solid var(--oq-border);border-radius:10px;padding:9px 10px;background:#f8fbff;color:var(--oq-navy);font-weight:800}
.status-done,.status-processed,.status-completed{background:#e8fff6;color:#087553}
.status-open,.status-planned,.status-active{background:#eaf2ff;color:var(--oq-navy)}
.status-not_planned,.status-paused{background:#fff7df;color:#9a6700}
.status-cancelled{background:#fff0f0;color:#a41515}

@media(max-width:1450px){
    .project-list-layout,.project-detail-layout{grid-template-columns:1fr}
    .project-side-card{min-height:auto}
}
@media(max-width:1150px){
    .project-list-kpis,.project-overview-grid,.project-status-grid,.project-summary-row,.project-summary-row.many{grid-template-columns:1fr 1fr}
    .assignment-inline-form,.assignment-filter-grid{grid-template-columns:1fr 1fr}
    .project-hero{grid-template-columns:38px minmax(0,1fr)}
    .project-hero-actions{grid-column:1/-1}
    .project-list-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:700px){
    .project-command-header{flex-direction:column;align-items:flex-start}
    .project-list-kpis,.project-info-grid,.project-overview-grid,.project-status-grid,.project-summary-row,.project-summary-row.many,.assignment-inline-form,.assignment-filter-grid{grid-template-columns:1fr}
    .project-list-search{width:100%;flex-wrap:wrap}
    .project-list-search input{min-width:0;width:100%}
}



/* Project tab Uren v1 */
.time-inline-form {
    display: grid;
    grid-template-columns: 150px minmax(180px, 1.1fr) minmax(150px, 1fr) 90px 100px 90px minmax(200px, 1.5fr) auto;
    gap: 10px;
    align-items: end;
}

.time-inline-form label {
    gap: 5px;
    font-size: 12px;
}

.time-inline-form input,
.time-inline-form select {
    min-height: 32px;
    border-radius: 9px;
}

.time-billable-check {
    align-items: start;
}

.time-billable-check input {
    min-height: auto;
    width: auto;
}

.project-add-time-entry {
    background: #f8fbff;
}

.status-draft {
    background: #fff7df;
    color: #9a6700;
}

.status-submitted {
    background: #eaf2ff;
    color: var(--oq-navy);
}

.status-approved {
    background: #e8fff6;
    color: #087553;
}

.status-invoiced {
    background: #eef2ff;
    color: #3730a3;
}

.status-rejected {
    background: #fff0f0;
    color: #a41515;
}

@media(max-width: 1250px) {
    .time-inline-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 700px) {
    .time-inline-form {
        grid-template-columns: 1fr;
    }
}



/* Kosten tab v1 */
.project-add-cost-entry {
    background: #fffdf7;
}
.cost-inline-form {
    grid-template-columns: 135px minmax(160px,1fr) 140px 150px 90px 100px 110px 80px 95px minmax(180px,1.4fr) auto;
}
.cost-description-field {
    min-width: 180px;
}
.status-submitted {
    background: #eef2ff;
    color: #3730a3;
}
.status-approved {
    background: #e8fff6;
    color: #087553;
}
.status-invoiced {
    background: #eaf2ff;
    color: var(--oq-navy);
}
.status-rejected {
    background: #fff0f0;
    color: #a41515;
}
.status-draft {
    background: #fff7df;
    color: #9a6700;
}
@media(max-width:1450px){.cost-inline-form{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:800px){.cost-inline-form{grid-template-columns:1fr}}


/* Project facturen v1 */
.project-add-invoice-line {
    background: #f8fbff;
}

.invoice-inline-form {
    display: grid;
    grid-template-columns: 140px 180px minmax(220px, 1.6fr) 100px 110px 120px 90px auto;
    gap: 10px;
    align-items: end;
}

.invoice-inline-form label {
    gap: 5px;
    font-size: 12px;
}

.invoice-inline-form input,
.invoice-inline-form select {
    min-height: 32px;
    border-radius: 9px;
}

.invoice-description-field {
    min-width: 220px;
}

.status-ready {
    background: #e8fff6;
    color: #087553;
}

.status-invoiced {
    background: #eef2ff;
    color: #3730a3;
}

.status-cancelled {
    background: #fff0f0;
    color: #a41515;
}

@media (max-width: 1250px) {
    .invoice-inline-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .invoice-inline-form {
        grid-template-columns: 1fr;
    }
}


/* Project documents v1 */
.document-inline-form {
    display: grid;
    grid-template-columns: 140px 150px 190px minmax(220px, 1.2fr) minmax(180px, 1fr) minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.document-inline-form label {
    gap: 5px;
    font-size: 12px;
}

.document-inline-form input,
.document-inline-form select {
    min-height: 32px;
    border-radius: 9px;
}

.document-inline-form button {
    min-height: 34px;
    white-space: nowrap;
}

.project-add-document {
    background: #f8fbff;
}

.document-filter-grid {
    grid-template-columns: minmax(160px, 1fr) 160px 160px 180px auto auto auto;
}

.status-approved {
    background: #e8fff6;
    color: #087553;
}

.status-archived {
    background: #f3f4f6;
    color: #4b5563;
}

@media (max-width: 1150px) {
    .document-inline-form,
    .document-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .document-inline-form,
    .document-filter-grid {
        grid-template-columns: 1fr;
    }
}
/* Project instellingen v1 */
.project-settings-hero {
    background: #f8fbff;
}

.project-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.project-settings-grid > div {
    background: #fff;
    border: 1px solid var(--oq-border);
    border-radius: 13px;
    padding: 14px;
}

.project-settings-grid span,
.project-settings-grid small {
    display: block;
    color: var(--oq-muted);
}

.project-settings-grid strong {
    display: block;
    color: var(--oq-navy);
    font-size: 19px;
    margin: 6px 0;
}

.project-settings-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.project-settings-form label {
    display: grid;
    gap: 6px;
    color: var(--oq-navy);
    font-weight: 800;
    font-size: 13px;
}

.project-settings-form input,
.project-settings-form select,
.project-settings-form textarea {
    width: 100%;
    border: 1px solid var(--oq-border);
    border-radius: 10px;
    padding: 10px 11px;
    font: inherit;
    background: #fff;
}

.project-settings-form textarea {
    min-height: 110px;
    resize: vertical;
}

.settings-wide {
    grid-column: 1 / -1;
}

.project-settings-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.project-settings-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.project-settings-status-row form {
    margin: 0;
}

.project-settings-status-row button {
    border: 1px solid var(--oq-border);
    background: #fff;
    color: var(--oq-navy);
    border-radius: 999px;
    padding: 9px 13px;
    font-weight: 900;
    cursor: pointer;
}

.project-settings-status-row button.active {
    background: var(--oq-blue);
    border-color: var(--oq-blue);
    color: #fff;
}

@media (max-width: 1000px) {
    .project-settings-grid,
    .project-settings-form {
        grid-template-columns: 1fr;
    }

    .project-settings-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Project overview spacing fix */
.project-mini-stat strong,
.project-status-grid strong,
.project-summary-card strong {
    display: block;
    margin-top: 4px;
    margin-bottom: 8px;
    line-height: 1.22;
}

.project-mini-stat small,
.project-status-grid small,
.project-summary-card small {
    display: block;
    margin-top: 6px;
    line-height: 1.35;
}

.project-mini-stat span,
.project-status-grid span,
.project-summary-card span {
    display: block;
    margin-bottom: 6px;
    line-height: 1.25;
}

.project-mini-stat,
.project-status-grid > div,
.project-summary-card {
    min-height: 86px;
}


/* === Hours overview v1 === */
/* Urenoverzicht v1 */
.hours-overview-page {
    max-width: none;
}

.hours-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.hours-filter-card,
.hours-table-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
    overflow: hidden;
    margin-bottom: 14px;
}

.hours-filter-card {
    padding: 14px;
}

.hours-filter-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(170px, 1fr) 150px 130px minmax(150px, 1fr) 140px 140px auto auto;
    gap: 10px;
    align-items: end;
}

.hours-filter-grid label {
    font-size: 12px;
    color: var(--oq-muted);
    font-weight: 800;
}

.hours-filter-grid input,
.hours-filter-grid select {
    width: 100%;
    min-height: 34px;
    margin-top: 5px;
    border-radius: 9px;
}

.hours-table td,
.hours-table th {
    white-space: nowrap;
}

.hours-table td:nth-child(5) {
    white-space: normal;
    min-width: 220px;
}

.project-table-title.compact {
    display: inline-flex;
    gap: 0;
}

.status-approved {
    background: #e8fff6;
    color: #087553;
}

.status-draft {
    background: #fff7df;
    color: #9a6700;
}

.status-submitted {
    background: #eaf2ff;
    color: var(--oq-navy);
}

.status-invoiced {
    background: #eef2ff;
    color: #3730a3;
}

.status-rejected {
    background: #fff0f0;
    color: #a41515;
}

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

@media (max-width: 800px) {
    .hours-kpi-grid,
    .hours-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* === Kostenoverzicht v1 === */
.costs-overview-page .overview-kpis,
.overview-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.overview-card,
.overview-table-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
    margin-bottom: 14px;
    overflow: hidden;
}

.overview-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(180px, 1fr) 160px 150px 160px 160px 150px 150px auto;
    gap: 10px;
    align-items: end;
    padding: 16px;
}

.overview-filters label {
    font-size: 12px;
    color: var(--oq-muted);
    font-weight: 800;
}

.overview-filters input,
.overview-filters select {
    width: 100%;
    min-height: 34px;
    border-radius: 10px;
}

.overview-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.overview-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--oq-border);
}

.overview-table-head h2 {
    margin: 0;
    color: var(--oq-navy);
}

.overview-table-head p {
    margin: 4px 0 0;
    color: var(--oq-muted);
}

.overview-table td small {
    display: block;
    margin-top: 5px;
    color: var(--oq-muted);
}

@media (max-width: 1450px) {
    .overview-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 950px) {
    .costs-overview-page .overview-kpis,
    .overview-kpis,
    .overview-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px) {
    .costs-overview-page .overview-kpis,
    .overview-kpis,
    .overview-filters {
        grid-template-columns: 1fr;
    }
}


/* === Facturenoverzicht v1 === */

/* Facturenoverzicht v1 */
.invoices-overview-page .project-command-header h1 { margin-bottom: 2px; }
.invoices-filter-grid {
    grid-template-columns: minmax(220px, 1.6fr) minmax(180px, 1.1fr) 150px 170px 140px 140px auto;
}
.invoices-table td,
.invoices-table th { white-space: nowrap; }
.invoices-table td:nth-child(5) { white-space: normal; min-width: 260px; }
.invoice-source-summary { margin-top: 14px; }
.source-time { background: #eaf2ff; color: var(--oq-navy); }
.source-cost { background: #fff7df; color: #9a6700; }
.source-manual { background: #eef2ff; color: #3730a3; }
.status-ready { background: #e8fff6; color: #087553; }
.status-cancelled { background: #fff0f0; color: #a41515; }
.overview-table td small { display:block; margin-top:5px; color:var(--oq-muted); }
@media (max-width: 1450px) { .invoices-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .invoices-filter-grid { grid-template-columns: 1fr; } }


/* === Documents overview CSS === */

/* Documents overview */
.documents-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.documents-filter-grid {
    grid-template-columns: minmax(220px, 1.4fr) 190px 160px 160px 145px 145px auto;
}

.documents-table td small {
    display: block;
    color: var(--oq-muted);
    margin-top: 4px;
}

.documents-table a {
    color: var(--oq-navy);
    font-weight: 800;
}

.status-draft {
    background: #fff7df;
    color: #9a6700;
}

.status-active {
    background: #eaf2ff;
    color: var(--oq-navy);
}

.status-approved {
    background: #e8fff6;
    color: #087553;
}

.status-archived {
    background: #eef2f7;
    color: #536176;
}

@media (max-width: 1200px) {
    .documents-kpi-grid,
    .documents-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .documents-kpi-grid,
    .documents-filter-grid {
        grid-template-columns: 1fr;
    }
}


/* === Planning overview CSS === */

/* Planning overview */
.planning-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.planning-filter-grid {
    grid-template-columns: minmax(220px, 1.4fr) 190px 160px 170px 160px 140px 140px auto;
}

.planning-quick-filters {
    margin-top: 12px;
}

.planning-quick-filters a {
    display: inline-flex;
    background: var(--oq-blue);
    color: #fff;
    border-radius: 9px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 800;
}

.planning-table td small {
    display: block;
    color: var(--oq-muted);
    margin-top: 4px;
}

.planning-table a {
    color: var(--oq-navy);
    font-weight: 800;
}

.status-not_planned {
    background: #fff7df;
    color: #9a6700;
}

.status-planned,
.status-open {
    background: #eaf2ff;
    color: var(--oq-navy);
}

.status-done,
.status-processed,
.status-completed {
    background: #e8fff6;
    color: #087553;
}

.status-cancelled {
    background: #fff0f0;
    color: #a41515;
}

@media (max-width: 1300px) {
    .planning-kpi-grid,
    .planning-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .planning-kpi-grid,
    .planning-filter-grid {
        grid-template-columns: 1fr;
    }
}


/* === Planner board v1 CSS === */

/* Planner board v1 */
.planner-page {
    max-width: none !important;
}

.planner-header-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.planner-header-card h1 {
    margin: 0;
    color: var(--oq-navy);
    font-size: 24px;
}

.planner-header-card p {
    margin: 4px 0 0;
    color: var(--oq-muted);
}

.planner-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.planner-layout {
    display: grid;
    grid-template-columns: 240px minmax(700px, 1fr) 370px;
    gap: 14px;
    align-items: stretch;
}

.planner-employees-card,
.planner-board-card,
.planner-side-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--oq-border);
    border-radius: 16px;
    box-shadow: var(--oq-shadow);
}

.planner-employees-card,
.planner-side-card {
    padding: 14px;
}

.planner-employees-card h2,
.planner-board-head h2,
.planner-side-head h2 {
    margin: 0;
    color: var(--oq-navy);
    font-size: 18px;
}

.planner-employees-card p {
    color: var(--oq-muted);
    margin: 6px 0 14px;
}

.planner-employee-card {
    border: 1px solid var(--oq-border);
    background: #f8fbff;
    border-radius: 13px;
    padding: 12px;
    margin-bottom: 10px;
}

.planner-employee-card strong,
.planner-employee-card span,
.planner-employee-card small {
    display: block;
}

.planner-employee-card strong {
    color: var(--oq-navy);
}

.planner-employee-card span {
    color: var(--oq-muted);
    margin-top: 4px;
}

.planner-employee-card small {
    color: #087553;
    margin-top: 6px;
}

.planner-help {
    border-top: 1px solid var(--oq-border);
    margin-top: 16px;
    padding-top: 14px;
    color: var(--oq-muted);
}

.planner-help strong,
.planner-help span {
    display: block;
}

.planner-help strong {
    color: var(--oq-navy);
    margin-bottom: 4px;
}

.planner-board-card {
    overflow: hidden;
}

.planner-board-head {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--oq-border);
}

.planner-board-scroll {
    overflow-x: auto;
    min-height: 560px;
}

.planner-time-header {
    display: grid;
    grid-template-columns: 170px repeat(14, 92px);
    min-width: 1458px;
    border-bottom: 1px solid var(--oq-border);
    background: #f8fbff;
}

.planner-time-header > div {
    padding: 10px;
    border-right: 1px solid var(--oq-border);
    color: var(--oq-muted);
    font-size: 12px;
}

.planner-employee-head {
    color: var(--oq-navy) !important;
    font-weight: 900;
}

.planner-row {
    display: grid;
    grid-template-columns: 170px minmax(1288px, 1fr);
    min-width: 1458px;
    min-height: 124px;
    border-bottom: 1px solid var(--oq-border);
}

.planner-row-label {
    padding: 14px 12px;
    background: #fff;
    border-right: 1px solid var(--oq-border);
}

.planner-row-label strong,
.planner-row-label span {
    display: block;
}

.planner-row-label strong {
    color: var(--oq-navy);
}

.planner-row-label span {
    color: var(--oq-muted);
    margin-top: 4px;
}

.planner-row-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(14, 92px);
    background: repeating-linear-gradient(
        to right,
        #ffffff 0,
        #ffffff 91px,
        #eef3fb 91px,
        #eef3fb 92px
    );
}

.planner-hour-line {
    border-right: 1px solid rgba(220,231,251,.8);
}

.planner-card {
    position: absolute;
    top: 18px;
    min-height: 58px;
    border-radius: 10px;
    padding: 9px 10px;
    background: #dfeeff;
    border: 1px solid #76a9ff;
    color: var(--oq-navy);
    box-shadow: 0 7px 18px rgba(0,31,91,.12);
    overflow: hidden;
}

.planner-card strong,
.planner-card span,
.planner-card small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-card strong {
    font-size: 12px;
}

.planner-card span,
.planner-card small {
    font-size: 11px;
    color: var(--oq-muted);
    margin-top: 3px;
}

.planner-card.status-done,
.planner-card.status-processed,
.planner-card.status-completed {
    background: #dcffe5;
    border-color: #65d686;
}

.planner-card.status-cancelled {
    background: #fff0f0;
    border-color: #ffcaca;
}

.planner-side-card {
    display: flex;
    flex-direction: column;
    min-height: 680px;
}

.planner-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.planner-side-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.planner-side-tabs span {
    display: inline-flex;
    border: 1px solid var(--oq-border);
    background: #eef5ff;
    color: var(--oq-navy);
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 800;
    font-size: 12px;
}

.planner-side-section {
    margin-bottom: 16px;
}

.planner-side-section h3 {
    margin: 0 0 8px;
    color: var(--oq-navy);
    font-size: 15px;
}

.planner-side-assignment {
    border: 1px solid #ffc56b;
    background: #fff8e8;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    color: var(--oq-navy);
}

.planner-side-assignment.done {
    border-color: #65d686;
    background: #dcffe5;
}

.planner-side-assignment strong,
.planner-side-assignment small,
.planner-side-assignment span {
    display: block;
}

.planner-side-assignment small {
    color: var(--oq-muted);
    margin-top: 4px;
}

.planner-side-assignment span {
    margin-top: 7px;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 8px;
    background: #eaf2ff;
    font-weight: 800;
}

.planner-side-assignment form {
    margin-top: 8px;
}

.planner-side-actions {
    margin-top: auto;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--oq-border);
    padding-top: 12px;
}

.planner-side-actions a {
    border: 1px solid var(--oq-border);
    border-radius: 10px;
    padding: 9px 10px;
    background: #f8fbff;
    color: var(--oq-navy);
    font-weight: 800;
}

@media (max-width: 1500px) {
    .planner-layout {
        grid-template-columns: 220px minmax(620px, 1fr);
    }

    .planner-side-card {
        grid-column: 1 / -1;
        min-height: auto;
    }
}

@media (max-width: 1000px) {
    .planner-header-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .planner-toolbar {
        justify-content: flex-start;
    }

    .planner-layout {
        grid-template-columns: 1fr;
    }
}


/* === Employees module CSS === */

/* Employees module */
.employees-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.employees-filter-grid {
    grid-template-columns: minmax(260px, 1fr) auto;
}

.employees-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 14px;
    align-items: start;
}

.employees-table td small {
    display: block;
    color: var(--oq-muted);
    margin-top: 4px;
}

.employees-table a {
    color: var(--oq-navy);
    font-weight: 900;
}

.employee-detail-card {
    padding: 18px;
}

.employee-detail-card h2 {
    margin: 0 0 14px;
    color: var(--oq-navy);
}

.employee-detail-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--oq-border);
    padding-bottom: 14px;
}

.employee-detail-head h3 {
    margin: 0;
    color: var(--oq-navy);
}

.employee-detail-head p {
    margin: 4px 0 0;
    color: var(--oq-muted);
}

.employee-detail-list {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0 0 16px;
}

.employee-detail-list dt {
    color: var(--oq-muted);
    font-weight: 800;
}

.employee-detail-list dd {
    margin: 0;
    color: var(--oq-text);
    font-weight: 800;
}

@media (max-width: 1100px) {
    .employees-layout,
    .employees-kpi-grid {
        grid-template-columns: 1fr;
    }

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

/* v0.8.45 - Sidebar actieve menu-item duidelijker, gelijk aan geselecteerde overzichtrij */
.oq-sidebar .oq-nav-item.active,
.sidebar .nav-list a.active {
    position: relative;
    background: linear-gradient(90deg, #eaf2ff 0%, #dceaff 100%) !important;
    color: var(--oq-navy) !important;
    border: 1px solid rgba(19, 108, 255, .55);
    box-shadow: 0 10px 22px rgba(19,108,255,.22), inset 4px 0 0 var(--oq-blue);
    transform: none;
}

.oq-sidebar .oq-nav-item.active:hover,
.sidebar .nav-list a.active:hover {
    transform: none;
    background: linear-gradient(90deg, #eaf2ff 0%, #dceaff 100%) !important;
    color: var(--oq-navy) !important;
}

.oq-sidebar .oq-nav-item.active .oq-nav-icon,
.sidebar .nav-list a.active .oq-nav-icon {
    background: var(--oq-blue);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(19,108,255,.28);
}

.oq-sidebar .oq-nav-item.active span:last-child,
.sidebar .nav-list a.active span:last-child {
    font-weight: 900;
}

/* v0.8.46 - Sidebar hover polish: actieve selectie blijft licht, hover is subtiel */
.oq-sidebar .oq-nav-item:not(.active):hover,
.sidebar .nav-list a:not(.active):hover {
    background: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 3px 0 0 rgba(255,255,255,.24);
    transform: translateX(1px);
}

.oq-sidebar .oq-nav-item:not(.active):hover .oq-nav-icon,
.sidebar .nav-list a:not(.active):hover .oq-nav-icon {
    background: rgba(255,255,255,.20);
    color: #ffffff;
    box-shadow: none;
}

.oq-sidebar .oq-nav-item.active,
.sidebar .nav-list a.active {
    background: linear-gradient(90deg, #eaf2ff 0%, #dceaff 100%) !important;
    color: var(--oq-navy) !important;
    border: 1px solid rgba(19, 108, 255, .55);
    box-shadow: 0 10px 22px rgba(19,108,255,.22), inset 4px 0 0 var(--oq-blue);
    transform: none !important;
}

.oq-sidebar .oq-nav-item.active:hover,
.sidebar .nav-list a.active:hover {
    background: linear-gradient(90deg, #eaf2ff 0%, #dceaff 100%) !important;
    color: var(--oq-navy) !important;
    border-color: rgba(19,108,255,.72);
    transform: none !important;
}

/* v0.8.47 - Sidebar hover stabilisatie: geen layout-shift bij hover */
.oq-sidebar .oq-nav-item,
.sidebar .nav-list a {
    box-sizing: border-box;
    border: 1px solid transparent;
    transform: none !important;
}

.oq-sidebar .oq-nav-item:not(.active):hover,
.sidebar .nav-list a:not(.active):hover {
    background: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.24);
    transform: none !important;
}

.oq-sidebar .oq-nav-item.active,
.sidebar .nav-list a.active {
    border-color: rgba(19,108,255,.55) !important;
    transform: none !important;
}

.oq-sidebar .oq-nav-item.active:hover,
.sidebar .nav-list a.active:hover {
    border-color: rgba(19,108,255,.72) !important;
    transform: none !important;
}

/* v0.8.48 - Planner rechterpaneel kaartstijl herstellen na sidebar CSS-patch.
   Scope strikt op planner-side-assignment, zodat sidebar hover/active styling intact blijft. */
.planner-side-assignment.planner-side-assignment-compact,
.planner-assignment-pool .planner-side-assignment.planner-side-assignment-compact {
    position: relative;
    display: block !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    border-radius: 14px;
    color: var(--oq-navy) !important;
    text-align: left !important;
    overflow: hidden;
}

.planner-side-assignment-compact .planner-side-click-area,
.planner-side-assignment-compact button.planner-side-click-area {
    position: relative;
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px !important;
    justify-content: stretch !important;
    justify-items: start !important;
    align-items: start !important;
    padding: 0 74px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-align: left !important;
    font: inherit !important;
    cursor: pointer;
}

.planner-side-assignment-compact .planner-side-click-area strong,
.planner-side-assignment-compact .planner-side-click-area small,
.planner-side-assignment-compact .planner-side-click-area span {
    text-align: left !important;
    justify-self: start !important;
}

.planner-side-assignment-compact .planner-side-title {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    font-size: 13px;
    font-weight: 900;
    color: var(--oq-navy) !important;
}

.planner-side-assignment-compact .planner-side-meta-primary,
.planner-side-assignment-compact .planner-side-meta-time {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
    font-size: 12px;
    color: var(--oq-muted) !important;
    margin-top: 0 !important;
    font-weight: 700;
}

.planner-side-assignment-compact .planner-side-meta-time {
    color: #536a94 !important;
}

.planner-side-assignment-compact .planner-side-status-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: 72px;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    color: var(--oq-navy) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2;
    text-align: center !important;
    white-space: nowrap;
    box-shadow: none !important;
}

.planner-side-assignment-compact .planner-quick-plan-form {
    display: none !important;
}

.planner-side-assignment-compact.planner-side-assignment-draggable,
.planner-side-assignment-compact.planner-side-assignment-draggable:hover {
    transform: none !important;
}

.planner-side-assignment-compact.planner-side-assignment-draggable:hover {
    box-shadow: 0 10px 24px rgba(0,31,91,.10);
}

.planner-side-assignment-compact.planner-side-assignment-planned {
    border-color: #76a9ff !important;
    background: #eef6ff !important;
}

.planner-side-assignment-compact.planner-side-assignment-planned .planner-side-status-badge {
    background: #dcecff !important;
    color: var(--oq-navy) !important;
}

.planner-side-assignment-compact.planner-side-assignment-planned .planner-side-meta-time {
    color: #355783 !important;
}

.planner-side-assignment-compact.planner-side-assignment-done,
.planner-side-assignment-compact.done {
    border-color: #5fd98b !important;
    background: #e8fff0 !important;
}

.planner-side-assignment-compact.planner-side-assignment-done .planner-side-status-badge,
.planner-side-assignment-compact.done .planner-side-status-badge {
    background: #d9f7e4 !important;
    color: #087553 !important;
}

.planner-side-assignment-compact.planner-side-assignment-done .planner-side-meta-time,
.planner-side-assignment-compact.done .planner-side-meta-time {
    color: #2f7353 !important;
}

/* De oudere generieke planner-side-assignment span-styling mag de compacte badges niet verplaatsen. */
.planner-side-assignment-compact span:not(.planner-side-status-badge) {
    width: auto !important;
    max-width: 100%;
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* v0.8.49 - Planner functional CSS restore
   Herstelt modal-overlay, drag/drop-preview, resize-handles en topbar-toast na de sidebar/workforms CSS-polish.
   Selectors zijn bewust strikt op .planner-* gescoped zodat sidebar hover/active intact blijft. */
.planner-page .planner-modal[hidden],
.planner-modal[hidden]{
    display:none!important;
}

.planner-page .planner-modal,
.planner-modal{
    position:fixed!important;
    inset:0!important;
    z-index:8000!important;
    display:grid!important;
    place-items:center!important;
    padding:22px!important;
}

.planner-page .planner-modal-backdrop,
.planner-modal-backdrop{
    position:absolute!important;
    inset:0!important;
    background:rgba(0,31,91,.30)!important;
    backdrop-filter:blur(6px)!important;
}

.planner-page .planner-modal-card,
.planner-modal-card{
    position:relative!important;
    z-index:1!important;
    width:min(860px,calc(100vw - 36px))!important;
    max-height:calc(100vh - 42px)!important;
    overflow:auto!important;
    background:#fff!important;
    border:1px solid var(--oq-border)!important;
    border-radius:22px!important;
    box-shadow:0 24px 80px rgba(0,31,91,.24)!important;
    padding:16px 18px!important;
}

.planner-modal-card-wide{
    width:min(860px,calc(100vw - 36px))!important;
}

.planner-modal-head{
    display:flex!important;
    justify-content:space-between!important;
    gap:16px!important;
    align-items:flex-start!important;
    margin-bottom:10px!important;
}

.planner-modal-head h2{
    margin:0!important;
    color:var(--oq-navy)!important;
    font-size:20px!important;
    line-height:1.15!important;
}

.planner-modal-head p{
    margin:4px 0 0!important;
    color:var(--oq-muted)!important;
    font-size:13px!important;
}

.planner-modal-close{
    border:1px solid var(--oq-border)!important;
    background:#fff!important;
    border-radius:999px!important;
    width:36px!important;
    height:36px!important;
    cursor:pointer!important;
    font-size:24px!important;
    line-height:1!important;
    color:var(--oq-navy)!important;
    box-shadow:none!important;
}

.planner-modal-kicker{
    display:inline-flex!important;
    align-items:center!important;
    width:max-content!important;
    max-width:100%!important;
    margin-bottom:5px!important;
    padding:3px 8px!important;
    border-radius:999px!important;
    background:#eaf2ff!important;
    color:var(--oq-blue)!important;
    font-size:11px!important;
    font-weight:900!important;
}

.planner-detail-summary{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    margin-bottom:10px!important;
}

.planner-detail-summary>div{
    min-height:48px!important;
    padding:8px 10px!important;
    border:1px solid var(--oq-border)!important;
    border-radius:12px!important;
    background:#f8fbff!important;
    display:grid!important;
    align-content:center!important;
    gap:2px!important;
}

.planner-detail-summary span,
.planner-detail-note span{
    color:var(--oq-muted)!important;
    font-size:10px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
}

.planner-detail-summary strong{
    min-width:0!important;
    color:var(--oq-navy)!important;
    font-size:13px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

.planner-detail-note{
    margin-bottom:10px!important;
    padding:9px 11px!important;
    border:1px solid var(--oq-border)!important;
    border-radius:12px!important;
    background:#fff!important;
}

.planner-detail-note p{
    margin:4px 0 0!important;
    color:var(--oq-text)!important;
    white-space:pre-wrap!important;
    max-height:70px!important;
    overflow:auto!important;
}

.planner-modal-form,
.planner-modal-edit-form{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px 10px!important;
}

.planner-modal-form label,
.planner-modal-edit-form label{
    display:grid!important;
    gap:4px!important;
    color:var(--oq-muted)!important;
    font-weight:800!important;
    font-size:11px!important;
}

.planner-modal-form label.wide,
.planner-modal-edit-form label.wide{
    grid-column:1/-1!important;
}

.planner-modal-form input,
.planner-modal-form select,
.planner-modal-form textarea,
.planner-modal-edit-form input,
.planner-modal-edit-form select,
.planner-modal-edit-form textarea{
    width:100%!important;
    min-height:34px!important;
    border:1px solid var(--oq-border)!important;
    border-radius:10px!important;
    padding:8px 10px!important;
    background:#fff!important;
    color:var(--oq-text)!important;
    font:inherit!important;
}

.planner-modal-edit-form textarea{
    min-height:58px!important;
    max-height:88px!important;
    resize:vertical!important;
}

.planner-modal-actions{
    grid-column:1/-1!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:8px!important;
    margin-top:2px!important;
}

.planner-modal-action-panel{
    margin-top:10px!important;
    padding:10px 12px!important;
    border:1px dashed var(--oq-border)!important;
    border-radius:13px!important;
    background:#f8fbff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
}

.planner-modal-action-panel h3{
    margin:0!important;
    color:var(--oq-navy)!important;
    font-size:14px!important;
}

.planner-modal-action-panel p{
    margin:2px 0 0!important;
    color:var(--oq-muted)!important;
    font-size:12px!important;
}

.planner-modal-action-buttons{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:wrap!important;
    gap:6px!important;
}

.planner-modal-action-buttons form{
    margin:0!important;
}

.planner-modal-action-buttons .button,
.planner-modal-action-buttons button{
    min-height:30px!important;
    padding:7px 10px!important;
    border-radius:10px!important;
    font-size:12px!important;
}

.planner-modal-readonly{
    margin-top:14px!important;
    padding-top:14px!important;
    border-top:1px solid var(--oq-border)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
}

/* Planner kaart-interactie: klik, slepen en resize-handles */
.planner-card.js-planner-card{
    cursor:grab!important;
    user-select:none!important;
    touch-action:none!important;
    min-width:54px!important;
    max-width:calc(100% - 4px)!important;
    overflow:hidden!important;
}

.planner-card.js-planner-card:active,
.planner-card.js-planner-card.is-dragging{
    cursor:grabbing!important;
}

.planner-card.is-dragging{
    opacity:.28!important;
    z-index:8!important;
    outline:2px dashed rgba(19,108,255,.55)!important;
    outline-offset:3px!important;
}

.planner-card.is-resizing{
    z-index:12!important;
    box-shadow:0 14px 32px rgba(0,31,91,.20)!important;
}

.planner-card.js-planner-card strong,
.planner-card.js-planner-card span:not(.planner-resize-handle),
.planner-card.js-planner-card small{
    pointer-events:none!important;
}

.planner-resize-handle,
.planner-card.js-planner-card .planner-resize-handle{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    width:10px!important;
    z-index:4!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:rgba(19,108,255,.10)!important;
    opacity:.35!important;
    pointer-events:auto!important;
    transition:opacity .12s ease, background .12s ease!important;
}

.planner-card:hover .planner-resize-handle,
.planner-card.is-resizing .planner-resize-handle{
    opacity:1!important;
}

.planner-resize-handle-left{
    left:0!important;
    border-radius:12px 0 0 12px!important;
    cursor:w-resize!important;
}

.planner-resize-handle-right{
    right:0!important;
    border-radius:0 12px 12px 0!important;
    cursor:e-resize!important;
}

.planner-resize-handle::after{
    content:""!important;
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    width:2px!important;
    height:22px!important;
    transform:translate(-50%,-50%)!important;
    border-radius:999px!important;
    background:var(--oq-blue)!important;
    box-shadow:4px 0 0 rgba(19,108,255,.55)!important;
}

.planner-resize-active,
.planner-resize-active *{
    cursor:ew-resize!important;
}

/* Dropzone en drag-preview */
.planner-row-timeline.is-drop-target{
    outline:3px dashed var(--oq-blue)!important;
    outline-offset:-7px!important;
    background:linear-gradient(90deg,rgba(19,108,255,.13),rgba(31,134,255,.08))!important;
}

.planner-row-timeline.is-drop-target::before{
    content:"Drop hier op de gewenste starttijd"!important;
    position:absolute!important;
    left:10px!important;
    top:8px!important;
    z-index:20!important;
    padding:5px 9px!important;
    border-radius:999px!important;
    background:var(--oq-blue)!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:900!important;
    box-shadow:0 8px 20px rgba(19,108,255,.22)!important;
    pointer-events:none!important;
}

.planner-drag-ghost{
    position:fixed!important;
    left:-1000px!important;
    top:-1000px!important;
    z-index:9999!important;
    width:180px!important;
    max-width:180px!important;
    padding:8px 10px!important;
    border:1px solid var(--oq-blue)!important;
    border-radius:12px!important;
    background:#fff!important;
    color:var(--oq-navy)!important;
    box-shadow:0 12px 28px rgba(0,31,91,.20)!important;
    pointer-events:none!important;
    transform:rotate(-1deg) scale(.92)!important;
}

.planner-drag-ghost::before{
    content:""!important;
    position:absolute!important;
    inset:-4px!important;
    border:1px dashed rgba(19,108,255,.42)!important;
    border-radius:15px!important;
}

.planner-drag-ghost strong,
.planner-drag-ghost span,
.planner-drag-ghost small{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

.planner-drag-ghost strong{
    width:max-content!important;
    max-width:100%!important;
    margin-bottom:4px!important;
    padding:3px 7px!important;
    border-radius:999px!important;
    background:var(--oq-blue)!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:900!important;
}

.planner-drag-ghost span{
    font-weight:900!important;
    font-size:12px!important;
}

.planner-drag-ghost small{
    display:none!important;
}

.planner-side-assignment-draggable{
    cursor:grab!important;
    transition:.15s ease!important;
}

.planner-side-assignment-draggable.is-dragging{
    opacity:.35!important;
    outline:2px dashed rgba(19,108,255,.55)!important;
    outline-offset:3px!important;
}

/* Topbar-toast: zwevend, klikloos, auto fade-out */
.planner-toast-stack{
    position:fixed!important;
    top:14px!important;
    left:50%!important;
    right:auto!important;
    width:min(420px,calc(100vw - 620px))!important;
    min-width:320px!important;
    transform:translateX(-50%)!important;
    z-index:6500!important;
    display:grid!important;
    gap:8px!important;
    pointer-events:none!important;
}

.planner-toast-stack .planner-toast,
.planner-toast-stack .alert{
    margin:0!important;
    padding:9px 14px!important;
    border-radius:14px!important;
    box-shadow:0 12px 30px rgba(0,31,91,.18)!important;
    pointer-events:none!important;
    animation:plannerToastAutoFade 2s ease forwards!important;
}

@keyframes plannerToastAutoFade{
    0%,72%{opacity:1;transform:translateY(0);visibility:visible;}
    100%{opacity:0;transform:translateY(-8px);visibility:hidden;}
}

/* Operationele plannerpanelen houden hun eigen scrollgedrag. */
.planner-layout-operational{
    height:calc(100vh - 198px)!important;
    min-height:520px!important;
    align-items:stretch!important;
}

.planner-layout-operational .planner-employees-card,
.planner-layout-operational .planner-board-card,
.planner-layout-operational .planner-side-card{
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
}

.planner-layout-operational .planner-employees-card>h2,
.planner-layout-operational .planner-employees-card>p,
.planner-layout-operational .planner-side-head,
.planner-layout-operational .planner-side-tabs,
.planner-layout-operational .planner-board-head,
.planner-layout-operational .planner-side-actions{
    flex:0 0 auto!important;
}

.planner-panel-scroll{
    min-height:0!important;
    overflow-y:auto!important;
    scrollbar-gutter:stable!important;
    padding-right:3px!important;
}

.planner-employees-scroll,
.planner-side-scroll{
    flex:1 1 auto!important;
}

.planner-board-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
}

/* Compacte kaarten in rechter plannerpaneel. */
.planner-side-assignment.planner-side-assignment-compact,
.planner-assignment-pool .planner-side-assignment.planner-side-assignment-compact{
    position:relative!important;
    display:block!important;
    padding:10px 12px!important;
    margin-bottom:8px!important;
    border-radius:14px!important;
    color:var(--oq-navy)!important;
    text-align:left!important;
    overflow:hidden!important;
}

.planner-side-assignment-compact .planner-side-click-area,
.planner-side-assignment-compact button.planner-side-click-area{
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:2px!important;
    justify-content:stretch!important;
    justify-items:start!important;
    align-items:start!important;
    padding:0 74px 0 0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    box-shadow:none!important;
    text-align:left!important;
    font:inherit!important;
    cursor:pointer!important;
}

.planner-side-assignment-compact .planner-side-title{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    line-height:1.25!important;
    font-size:13px!important;
    font-weight:900!important;
    color:var(--oq-navy)!important;
}

.planner-side-assignment-compact .planner-side-meta-primary,
.planner-side-assignment-compact .planner-side-meta-time{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    line-height:1.35!important;
    font-size:12px!important;
    color:var(--oq-muted)!important;
    margin-top:0!important;
    font-weight:700!important;
}

.planner-side-assignment-compact .planner-side-meta-time{
    color:#536a94!important;
}

.planner-side-assignment-compact .planner-side-status-badge{
    position:absolute!important;
    top:0!important;
    right:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:72px!important;
    margin:0!important;
    padding:3px 8px!important;
    border-radius:999px!important;
    background:#eaf2ff!important;
    color:var(--oq-navy)!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1.2!important;
    text-align:center!important;
    white-space:nowrap!important;
    box-shadow:none!important;
}

.planner-side-assignment-compact .planner-quick-plan-form{
    display:none!important;
}

.planner-side-assignment-compact span:not(.planner-side-status-badge){
    width:auto!important;
    max-width:100%!important;
    margin-top:0!important;
    padding:0!important;
    background:transparent!important;
    border-radius:0!important;
}

.planner-side-assignment-compact.planner-side-assignment-planned{
    border-color:#76a9ff!important;
    background:#eef6ff!important;
}

.planner-side-assignment-compact.planner-side-assignment-done,
.planner-side-assignment-compact.done{
    border-color:#5fd98b!important;
    background:#e8fff0!important;
}

.planner-side-assignment-compact.planner-side-assignment-done .planner-side-status-badge,
.planner-side-assignment-compact.done .planner-side-status-badge{
    background:#d9f7e4!important;
    color:#087553!important;
}

@media (max-width:1500px){
    .planner-layout-operational{
        height:auto!important;
        min-height:0!important;
    }
    .planner-layout-operational .planner-employees-card,
    .planner-layout-operational .planner-board-card,
    .planner-layout-operational .planner-side-card{
        max-height:none!important;
        overflow:visible!important;
    }
    .planner-side-scroll,
    .planner-employees-scroll{
        max-height:460px!important;
    }
}

@media (max-width:1100px){
    .planner-toast-stack{
        top:10px!important;
        left:16px!important;
        right:16px!important;
        width:auto!important;
        min-width:0!important;
        transform:none!important;
    }
}

@media (max-width:900px){
    .planner-detail-summary,
    .planner-modal-form,
    .planner-modal-edit-form{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .planner-modal-action-panel{
        align-items:flex-start!important;
        flex-direction:column!important;
    }
    .planner-modal-action-buttons{
        justify-content:flex-start!important;
    }
    .planner-resize-handle{
        width:14px!important;
        opacity:.9!important;
    }
}

@media (max-width:560px){
    .planner-detail-summary,
    .planner-modal-form,
    .planner-modal-edit-form{
        grid-template-columns:1fr!important;
    }
}

/* v0.8.62 - app-brede compact density basis
   Doel: minder verticale padding op alle generieke pagina's zonder planner/workform pagina-eigen CSS te overschrijven. */
.main,
.main-panel {
    padding: 14px 18px 18px;
}

.page-wrap {
    padding-bottom: 28px;
}

.page-header,
.topbar {
    gap: 12px;
    margin-bottom: 12px;
}

.page-header h1,
.topbar h1 {
    font-size: 23px;
    line-height: 1.06;
}

.page-header p {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.25;
}

.card,
.panel,
.content-band,
.management-section,
.role-card,
.management-card,
.status-card,
.oq-stat-card {
    border-radius: 15px;
}

.card,
.panel,
.content-band,
.management-section {
    padding: 12px 14px;
    margin-bottom: 12px;
}

.content-band {
    gap: 12px;
}

.content-band h2,
.panel h2,
.card h2,
.management-section h2 {
    margin-bottom: 8px;
    font-size: 18px;
}

.content-band p,
.panel-title p,
.section-subtitle,
.item-heading p,
.muted {
    line-height: 1.25;
}

.status-grid,
.oq-stats {
    gap: 10px;
    margin-bottom: 12px;
}

.status-card,
.oq-stat-card {
    padding: 11px 12px;
}

.status-card strong,
.oq-stat-card strong {
    font-size: 20px;
}

.admin-grid {
    gap: 12px;
    margin-bottom: 12px;
}

.form-grid {
    gap: 9px 11px;
}

.form-stack {
    gap: 9px;
}

label {
    gap: 4px;
    font-size: 13px;
}

input,
select,
textarea {
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: 13px;
}

textarea {
    min-height: 68px;
}

.check-grid,
.permission-grid {
    gap: 6px;
}

.check-grid label,
.permission-grid label {
    padding: 6px 8px;
    border-radius: 10px;
}

.option-panel,
.card-details {
    padding: 8px;
    border-radius: 11px;
}

.form-footer,
.card-actions {
    gap: 8px;
}

button,
.primary-button,
.secondary-button,
.button {
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.button.small,
button.small {
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
}

.alert {
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 11px;
}

.management-list,
.role-list {
    gap: 9px;
}

.management-card,
.role-card {
    padding: 12px;
}

.item-heading {
    gap: 10px;
}

.item-meta {
    gap: 6px 10px;
    margin-top: 7px;
}

.chip-row {
    gap: 5px;
    margin-top: 7px;
}

.mini-chip,
.pill,
.badge {
    padding: 3px 7px;
    font-size: 10.5px;
}

table {
    font-size: 12px;
}

th {
    font-size: 10.5px;
}

th,
td {
    padding: 7px 8px;
}

.compact-table th,
.compact-table td {
    padding: 6px 7px;
}

.customers-tip {
    padding: 8px 10px;
    margin-top: 10px;
    border-radius: 11px;
}

@media (max-width: 900px) {
    .main,
    .main-panel {
        padding: 12px 14px 16px;
    }

    .card,
    .panel,
    .content-band,
    .management-section {
        padding: 11px 12px;
    }
}


/* v0.8.63 - compacte headertekst naast paginatitel. */
.project-command-header > div:first-child,
.page-header > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.project-command-header h1,
.page-header h1 {
    flex: 0 0 auto;
}

.project-command-header p,
.page-header p {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    color: var(--oq-muted);
}

@media (max-width: 900px) {
    .project-command-header > div:first-child,
    .page-header > div:first-child {
        display: block;
    }
    .project-command-header p,
    .page-header p {
        margin-top: 3px;
    }
}


/* v0.8.98 - Sidemenu verticale spacing compacter.
   Alleen menu-afstand/density; actieve/hover styling en rechtenmenu blijven ongewijzigd. */
.oq-sidebar .oq-nav,
.sidebar .nav-list {
    gap: 4px;
}

.oq-sidebar .oq-nav-item,
.sidebar .nav-list a {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* v0.8.108 - topbar badge zichtbaar boven iconen */
.oq-topbar-icon{
    overflow:visible!important;
}
.oq-topbar-icon.has-badge{
    border-color:rgba(25,103,255,.32)!important;
}
.oq-topbar-icon .oq-topbar-badge,
.oq-topbar-icon strong.oq-topbar-badge{
    position:absolute!important;
    top:-7px!important;
    right:-7px!important;
    z-index:5!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    background:#1967ff!important;
    color:#fff!important;
    border:2px solid #fff!important;
    box-shadow:0 4px 12px rgba(25,103,255,.28)!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1!important;
    pointer-events:none!important;
}


/* v0.8.115 - topbar badge: lege/verborgen badges echt verbergen */
.oq-topbar-icon .oq-topbar-badge[hidden],
.oq-topbar-icon strong.oq-topbar-badge[hidden]{
    display:none!important;
}
.oq-topbar-icon.has-badge .oq-topbar-badge:not([hidden]){
    display:flex!important;
}