/* ============================================================================
   APM CRM kit — shell styling (sidebar + topbar + md3 cards)
   Lifted from apmweb/static/css/aircoprofs-design-system.css
   + apmweb/templates/sidebar.html structure + klant-details.css
   ========================================================================= */

/* ---- BASE ---- */
*{box-sizing:border-box;}
html,body{margin:0;background:var(--ap-surface-dim);font-family:var(--ap-font-sans);color:var(--ap-text-primary);}
button{font-family:inherit;}
a{color:var(--ap-primary);text-decoration:none;}
a:hover{color:var(--ap-primary-dark);}

/* ============================================================================
   SHELL
   ========================================================================= */
.apm-shell{display:flex;min-height:100vh;}
.apm-main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;}
.apm-main{flex:1;overflow:auto;padding:20px 28px 40px;}

/* ============================================================================
   SIDEBAR (from sidebar.html + aircoprofs-design-system.css)
   ========================================================================= */
.apm-sidebar{
  width:260px;flex:0 0 260px;
  background:#0f2c44;  /* donkere APM rails */
  color:#d0dce8;
  display:flex;flex-direction:column;
  height:100vh;position:sticky;top:0;
  border-right:1px solid #071a2b;
}
.apm-sidebar-header{
  padding:18px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;gap:10px;
}
.apm-sidebar-header img{height:24px;width:auto;}
/* AircoProfs logo on dark sidebar: keep the orange star, force wordmark to white */
.apm-sidebar-header img{filter:brightness(0) invert(1) sepia(0) saturate(0) hue-rotate(0deg);}
/* ^ compromise: flattens logo to white — better for dark rail than colored-on-dark. */
.apm-sidebar-header .apm-logo-fallback{
  display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.2px;
}
.apm-sidebar-header .apm-logo-fallback .apm-logo-mark{
  width:28px;height:28px;border-radius:6px;background:var(--ap-accent);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.apm-sidebar-scroll{flex:1;overflow-y:auto;padding:8px 0 16px;}
.apm-sidebar-scroll::-webkit-scrollbar{width:4px;}
.apm-sidebar-scroll::-webkit-scrollbar-thumb{background:#1f4769;border-radius:2px;}
.apm-sidebar-scroll::-webkit-scrollbar-track{background:transparent;}

.apm-sidebar-section{padding:6px 0;}
.apm-sidebar-section-title{
  font-size:10px;text-transform:uppercase;letter-spacing:1.2px;
  color:#7a96b4;font-weight:600;
  padding:10px 20px 6px;
}
.apm-sidebar-subsection-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  color:#6f8aa6;padding:10px 20px 4px 36px;font-weight:600;
}

.apm-nav-link{
  display:flex;align-items:center;gap:10px;
  padding:8px 20px;
  font-size:14px;color:#c9d7e4;
  border-left:3px solid transparent;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  user-select:none;
}
.apm-nav-link i{font-size:15px;width:18px;text-align:center;color:#7f9fbf;}
.apm-nav-link:hover{background:rgba(255,255,255,0.04);color:#fff;}
.apm-nav-link:hover i{color:#fff;}
.apm-nav-link.is-active{
  background:rgba(27,100,148,0.28);
  border-left-color:var(--ap-accent);
  color:#fff;font-weight:500;
}
.apm-nav-link.is-active i{color:var(--ap-accent);}

.apm-sidebar-collapse-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 20px;
  background:transparent;border:0;width:100%;
  font-size:14px;color:#c9d7e4;cursor:pointer;
  border-left:3px solid transparent;
}
.apm-sidebar-collapse-toggle:hover{background:rgba(255,255,255,0.04);color:#fff;}
.apm-sidebar-collapse-toggle-content{display:flex;align-items:center;gap:10px;}
.apm-sidebar-collapse-toggle-content i{color:#7f9fbf;font-size:15px;width:18px;text-align:center;}
.apm-sidebar-collapse-toggle .apm-chev{font-size:11px;transition:transform .2s ease;color:#6f8aa6;}
.apm-sidebar-collapse-toggle[aria-expanded="true"] .apm-chev{transform:rotate(180deg);}
.apm-sidebar-collapse{padding:2px 0 6px;}

.apm-sidebar-footer{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:12px 20px;font-size:11px;color:#5d7893;font-family:var(--ap-font-mono);
  display:flex;justify-content:space-between;align-items:center;
}
.apm-sidebar-footer a{color:#7a96b4;}

.apm-accu-link{color:#ff8a3c !important;font-weight:600;}
.apm-accu-link i{color:#ff8a3c !important;}

/* ============================================================================
   TOPBAR (from topbar.html)
   ========================================================================= */
.apm-topbar{
  height:56px;
  background:#fff;
  border-bottom:1px solid var(--ap-border);
  display:flex;align-items:center;
  padding:0 20px;gap:14px;
  position:sticky;top:0;z-index:20;
}
.apm-search-trigger{
  display:flex;align-items:center;gap:10px;
  background:var(--ap-gray-50);
  border:1px solid var(--ap-border);
  padding:7px 12px;border-radius:8px;
  color:var(--ap-text-secondary);
  width:280px;max-width:40%;
  cursor:pointer;font-size:14px;
  transition:all .2s ease;
}
.apm-search-trigger:hover{background:var(--ap-gray-100);border-color:var(--ap-gray-300);}
.apm-search-trigger i{color:var(--ap-text-muted);}
.apm-search-trigger-text{flex:1;text-align:left;}
.apm-search-trigger kbd{
  background:#fff;
  border:1px solid var(--ap-border);
  border-radius:4px;
  font-family:var(--ap-font-mono);
  font-size:11px;
  padding:2px 6px;
  color:var(--ap-text-secondary);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

.apm-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}

.apm-test-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid var(--ap-primary);
  color:var(--ap-primary);border-radius:6px;
  font-size:12.5px;font-weight:500;background:#fff;
  cursor:pointer;transition:all .2s ease;
}
.apm-test-link:hover{background:var(--ap-primary);color:#fff;}

.apm-topbar-icon-btn{
  position:relative;
  width:38px;height:38px;border-radius:50%;
  background:transparent;border:0;
  color:var(--ap-text-secondary);font-size:18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.apm-topbar-icon-btn:hover{background:var(--ap-gray-100);color:var(--ap-primary);}
.apm-topbar-icon-btn .apm-badge-dot{
  position:absolute;top:6px;right:5px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--ap-danger);color:#fff;
  border:2px solid #fff;border-radius:10px;
  font-size:10px;font-weight:700;font-family:var(--ap-font-mono);
  display:flex;align-items:center;justify-content:center;
}

.apm-user-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--ap-primary) 0%, var(--ap-primary-dark) 100%);
  color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.1);
  cursor:pointer;
  letter-spacing:.5px;
}

/* ============================================================================
   PAGE HEADER (macros.py style .dashboard-header)
   ========================================================================= */
.apm-page-header{
  display:flex;align-items:center;gap:14px;
  padding:4px 0 18px;
  border-bottom:1px solid var(--ap-border-light);
  margin-bottom:20px;
}
.apm-page-header-icon{
  width:42px;height:42px;border-radius:10px;
  background:var(--ap-primary-container);color:var(--ap-primary);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.apm-page-header-title{font-size:22px;font-weight:600;margin:0;color:var(--ap-text-primary);letter-spacing:-.01em;}
.apm-page-header-subtitle{font-size:13px;color:var(--ap-text-secondary);margin-top:2px;}
.apm-page-header-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* ============================================================================
   CARDS (md3 dashboard-card)
   ========================================================================= */
.apm-card{
  background:#fff;
  border:1px solid var(--ap-border-light);
  border-radius:12px;
  box-shadow:0 2px 10px rgba(27,100,148,.06);
  transition:box-shadow .25s ease, transform .25s ease;
  overflow:hidden;
}
.apm-card--hover:hover{box-shadow:0 4px 18px rgba(27,100,148,.14);transform:translateY(-1px);}
.apm-card-header{
  padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--ap-border-light);
  min-height:56px;
}
.apm-card-title{font-size:14px;font-weight:600;color:var(--ap-accent);margin:0;letter-spacing:.01em;text-transform:none;}
.apm-card-body{padding:16px 18px;}
.apm-card-body.is-flush{padding:0;}

/* small action icon button used in card headers */
.apm-card-action{
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:0;color:var(--ap-text-secondary);font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .2s ease;
}
.apm-card-action:hover{background:rgba(108,117,125,.1);color:var(--ap-primary);transform:scale(1.05);}

/* ============================================================================
   BUTTONS
   ========================================================================= */
.apm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border-radius:8px;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;
  transition:all .2s ease;font-family:inherit;
  line-height:1.2;
}
.apm-btn--primary{background:var(--ap-primary);color:#fff;border-color:var(--ap-primary);}
.apm-btn--primary:hover{background:var(--ap-primary-dark);border-color:var(--ap-primary-dark);box-shadow:0 4px 12px rgba(27,100,148,.3);transform:translateY(-1px);}
.apm-btn--accent{background:var(--ap-accent);color:#fff;border-color:var(--ap-accent);}
.apm-btn--accent:hover{background:var(--ap-accent-dark);border-color:var(--ap-accent-dark);box-shadow:0 4px 12px rgba(227,111,54,.3);transform:translateY(-1px);}
.apm-btn--success{background:var(--ap-success);color:#fff;border-color:var(--ap-success);}
.apm-btn--success:hover{background:#3c9140;box-shadow:0 4px 12px rgba(76,175,80,.3);transform:translateY(-1px);}
.apm-btn--outline{background:#fff;color:var(--ap-primary);border-color:var(--ap-primary);}
.apm-btn--outline:hover{background:var(--ap-primary);color:#fff;}
.apm-btn--ghost{background:transparent;color:var(--ap-text-secondary);border-color:transparent;}
.apm-btn--ghost:hover{background:var(--ap-gray-100);color:var(--ap-primary);}
.apm-btn--sm{padding:5px 10px;font-size:12.5px;border-radius:6px;}
.apm-btn--icon{padding:8px;min-width:36px;justify-content:center;}

/* ============================================================================
   STATUS BADGES (exact hex from klant-details.css)
   ========================================================================= */
.apm-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:4px;
  font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
  white-space:nowrap;font-family:var(--ap-font-sans);
}
.apm-status i{font-size:11px;}
.apm-status--concept          {background:#6c757d;color:#fff;}
.apm-status--on-hold          {background:#ff9800;color:#212529;}
.apm-status--werkvoorbereiding{background:#2196f3;color:#fff;}
.apm-status--klaargezet       {background:#e36f36;color:#fff;}
.apm-status--in-uitvoering    {background:#1b6494;color:#fff;}
.apm-status--ingeleverd       {background:#4caf50;color:#fff;}
.apm-status--afgerond         {background:#4caf50;color:#fff;}
.apm-status--geannuleerd      {background:#f44336;color:#fff;}

/* pill badges (non-status) */
.apm-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:10px;
  font-size:11px;font-weight:600;
  background:var(--ap-gray-100);color:var(--ap-text-secondary);
}
.apm-pill--accent{background:var(--ap-accent);color:#fff;}
.apm-pill--primary{background:var(--ap-primary-container);color:var(--ap-primary-dark);}
.apm-pill--warning{background:#fff3cd;color:#7a5b00;}
.apm-pill--danger{background:#fde2e2;color:#9b1c1c;}
.apm-pill--info{background:#e0f2fe;color:#075985;}

/* ============================================================================
   TABS (.nav-tabs MD3 style)
   ========================================================================= */
.apm-tabs{
  display:flex;
  border-bottom:1px solid var(--ap-border);
  background:#fff;
  gap:0;overflow-x:auto;
}
.apm-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 18px;
  border:0;background:transparent;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ap-text-secondary);
  border-bottom:3px solid transparent;margin-bottom:-1px;
  cursor:pointer;white-space:nowrap;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
  font-family:inherit;
}
.apm-tab i{font-size:15px;color:rgba(108,117,125,.6);transition:color .2s ease;}
.apm-tab:hover{color:var(--ap-primary);background:rgba(27,100,148,.04);}
.apm-tab:hover i{color:rgba(27,100,148,.8);}
.apm-tab.is-active{
  color:var(--ap-primary);background:rgba(27,100,148,.08);
  border-bottom-color:var(--ap-primary);
  box-shadow:0 2px 4px rgba(27,100,148,.15);
}
.apm-tab.is-active i{color:var(--ap-primary);}
.apm-tab .apm-pill{margin-left:2px;background:var(--ap-accent);color:#fff;}

/* ============================================================================
   TABLE
   ========================================================================= */
.apm-table{width:100%;border-collapse:collapse;font-size:13px;}
.apm-table thead th{
  text-align:left;
  background:var(--ap-surface-container);
  color:var(--ap-text-secondary);
  font-weight:600;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;
  padding:10px 14px;border-bottom:1px solid var(--ap-border);
  white-space:nowrap;
}
.apm-table tbody td{
  padding:10px 14px;border-bottom:1px solid var(--ap-border-light);
  color:var(--ap-text-primary);vertical-align:middle;
}
.apm-table tbody tr:hover{background:var(--ap-surface-hover);}
.apm-table tbody tr:last-child td{border-bottom:0;}
.apm-table .apm-table-monoid{font-family:var(--ap-font-mono);font-size:12.5px;color:var(--ap-primary);font-weight:600;}

/* progress bar inside table */
.apm-progress{
  display:inline-block;width:70px;height:6px;
  background:var(--ap-gray-200);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:8px;
}
.apm-progress > span{display:block;height:100%;background:var(--ap-primary);border-radius:3px;}

/* ============================================================================
   FORMS
   ========================================================================= */
.apm-field{display:flex;flex-direction:column;gap:6px;}
.apm-field-label{font-size:12px;font-weight:600;color:var(--ap-text-secondary);letter-spacing:.2px;}
.apm-field-hint{font-size:11.5px;color:var(--ap-text-muted);}
/* Form inputs — 1:1 uit AircoProfs Design System (preview/components-forms.html) */
.apm-input, .apm-select, .apm-textarea{
  width:100%;box-sizing:border-box;
  padding:10px 12px;
  border:1px solid #dce1e8;border-radius:8px;
  font-family:var(--ap-font-sans);font-size:13.5px;line-height:1.3;
  color:#0f172a;background:#f4f6f9;
  outline:none;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.apm-textarea{resize:vertical;min-height:72px;}
.apm-input::placeholder, .apm-textarea::placeholder{color:#8a95a3;}
.apm-input:hover:not(:focus), .apm-select:hover:not(:focus), .apm-textarea:hover:not(:focus){
  background:#eff2f7;border-color:#c2cbd6;
}
.apm-input:focus, .apm-select:focus, .apm-textarea:focus{
  background:#fff;border-color:var(--ap-primary);
  box-shadow:0 0 0 3px rgba(27,100,148,.18);
}
.apm-input[disabled], .apm-select[disabled], .apm-textarea[disabled]{
  background:var(--ap-gray-50);color:var(--ap-text-muted);cursor:not-allowed;
}
/* mono variant — bedragen, codes, data */
.apm-input--mono{font-family:var(--ap-font-mono);font-size:13px;letter-spacing:.01em;}
/* select caret */
.apm-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%238a95a3'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px;
  padding-right:34px;
}

/* input met leading icon */
.apm-input-wrap{position:relative;}
.apm-input-wrap > .bi, .apm-input-wrap > .apm-input-icon{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:#8a95a3;font-size:14px;pointer-events:none;
}
.apm-input-wrap > .apm-input{padding-left:34px;}

/* prefix wrapper — voor €, € bedrag etc. */
.apm-input-group{
  display:flex;align-items:stretch;
  border:1px solid #dce1e8;
  border-radius:8px;
  background:#f4f6f9;overflow:hidden;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.apm-input-group:hover{background:#eff2f7;border-color:#c2cbd6;}
.apm-input-group:focus-within{background:#fff;border-color:var(--ap-primary);box-shadow:0 0 0 3px rgba(27,100,148,.18);}
.apm-input-group-text{
  padding:10px 10px 10px 12px;color:#8a95a3;
  font-family:var(--ap-font-mono);font-size:13px;
  border:0;border-right:1px solid #dce1e8;border-radius:0;
  background:transparent;font-weight:normal;
  display:flex;align-items:center;
}
.apm-input-group .apm-input{border:0;border-radius:0;background:transparent;}
.apm-input-group .apm-input:focus{box-shadow:none;background:transparent;}

.apm-radio-group{display:flex;gap:8px;flex-wrap:wrap;}
.apm-radio-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:2px solid var(--ap-gray-200);border-radius:25px;
  font-size:13px;font-weight:500;color:var(--ap-text-secondary);background:#fff;cursor:pointer;
  transition:all .2s ease;
}
.apm-radio-chip:hover{border-color:var(--ap-primary);color:var(--ap-primary);background:rgba(27,100,148,.04);}
.apm-radio-chip.is-selected{border-color:var(--ap-primary);background:var(--ap-primary);color:#fff;}
.apm-radio-chip input{position:absolute;opacity:0;pointer-events:none;}

.apm-checkbox{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;color:var(--ap-text-primary);
}
.apm-checkbox input{width:16px;height:16px;accent-color:var(--ap-primary);}

/* workflow step indicator */
.apm-workflow{display:flex;align-items:center;gap:0;padding:10px 14px;background:var(--ap-gray-50);border-radius:8px;margin-bottom:16px;}
.apm-workflow-step{display:flex;align-items:center;gap:8px;flex:1;font-size:12.5px;}
.apm-workflow-step .apm-workflow-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--ap-gray-200);color:var(--ap-text-secondary);
  font-weight:600;font-size:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .2s ease;
}
.apm-workflow-step.is-done .apm-workflow-num{background:var(--ap-success);color:#fff;}
.apm-workflow-step.is-active .apm-workflow-num{background:var(--ap-primary);color:#fff;box-shadow:0 0 0 3px rgba(33,150,243,.2);}
.apm-workflow-step .apm-workflow-label{font-weight:500;color:var(--ap-text-secondary);white-space:nowrap;}
.apm-workflow-step.is-done .apm-workflow-label,
.apm-workflow-step.is-active .apm-workflow-label{color:var(--ap-text-primary);}
.apm-workflow-connector{flex-grow:1;height:2px;background:var(--ap-gray-200);margin:0 6px;}
.apm-workflow-step.is-done + .apm-workflow-connector{background:var(--ap-success);}

/* ============================================================================
   TIMELINE (klant-details.css gradient line)
   ========================================================================= */
.apm-timeline{position:relative;padding:8px 0;}
.apm-timeline-item{position:relative;padding-left:56px;padding-bottom:18px;}
.apm-timeline-item::before{
  content:'';position:absolute;left:17px;top:32px;bottom:-4px;width:2px;
  background:linear-gradient(to bottom, var(--ap-primary), var(--ap-accent));
}
.apm-timeline-item:last-child::before{display:none;}
.apm-timeline-icon{
  position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  background:var(--ap-primary-container);color:var(--ap-primary);
  z-index:1;
}
.apm-timeline-icon.is-accent{background:var(--ap-accent-container);color:var(--ap-accent);}
.apm-timeline-icon.is-success{background:var(--ap-secondary-container);color:var(--ap-secondary);}
.apm-timeline-title{font-size:13.5px;font-weight:600;color:var(--ap-text-primary);margin:2px 0 2px;}
.apm-timeline-meta{font-size:11.5px;color:var(--ap-text-muted);font-family:var(--ap-font-mono);}
.apm-timeline-body{font-size:13px;color:var(--ap-text-secondary);line-height:1.5;margin-top:6px;}

/* ============================================================================
   KPI TILES / stat cards
   ========================================================================= */
.apm-kpi{
  background:#fff;border:1px solid var(--ap-border-light);
  border-radius:12px;padding:14px 18px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 2px 10px rgba(27,100,148,.06);
}
.apm-kpi-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.apm-kpi-icon.is-primary{background:var(--ap-primary-container);color:var(--ap-primary);}
.apm-kpi-icon.is-accent{background:var(--ap-accent-container);color:var(--ap-accent);}
.apm-kpi-icon.is-success{background:var(--ap-secondary-container);color:var(--ap-secondary);}
.apm-kpi-icon.is-warning{background:#fff4e5;color:#ff9800;}
.apm-kpi-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ap-text-secondary);font-weight:600;}
.apm-kpi-value{font-size:22px;font-weight:700;color:var(--ap-text-primary);font-family:var(--ap-font-mono);line-height:1.2;}

/* ============================================================================
   UTIL
   ========================================================================= */
.apm-grid{display:grid;gap:14px;}
.apm-grid--cols-2{grid-template-columns:1fr 1fr;}
.apm-grid--cols-3{grid-template-columns:repeat(3, 1fr);}
.apm-grid--cols-4{grid-template-columns:repeat(4, 1fr);}
.apm-grid--aside{grid-template-columns:2fr 1fr;}
@media (max-width:1200px){
  .apm-grid--cols-4{grid-template-columns:repeat(2, 1fr);}
  .apm-grid--aside{grid-template-columns:1fr;}
}
.apm-stack{display:flex;flex-direction:column;gap:14px;}
.apm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.apm-muted{color:var(--ap-text-secondary);}
.apm-small{font-size:12.5px;}
.apm-divider{height:1px;background:var(--ap-border-light);margin:12px 0;}
.apm-mono{font-family:var(--ap-font-mono);}
.apm-kv{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;font-size:13.5px;}
.apm-kv dt{color:var(--ap-text-secondary);font-weight:500;}
.apm-kv dd{margin:0;color:var(--ap-text-primary);}


/* ============================================================================
   DS COMPONENTS — 1:1 uit AircoProfs Design System (preview/components-*.html)
   ========================================================================= */

/* ----- .ap-btn — components-buttons ----- */
.ap-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ap-font-sans);font-weight:500;font-size:14px;
  padding:8px 20px;border-radius:6px;border:1px solid transparent;
  cursor:pointer;transition:all .2s ease;line-height:1.3;text-decoration:none;
}
.ap-btn i{font-size:14px;}
.ap-btn--primary{background:#1b6494;border-color:#1b6494;color:#fff;}
.ap-btn--primary:hover{background:#003e6a;border-color:#003e6a;transform:translateY(-1px);box-shadow:0 4px 12px rgba(27,100,148,.3);}
.ap-btn--secondary{background:#247e3f;border-color:#247e3f;color:#fff;}
.ap-btn--secondary:hover{background:#1a5f2f;border-color:#1a5f2f;transform:translateY(-1px);box-shadow:0 4px 12px rgba(36,126,63,.3);}
.ap-btn--accent{background:#e36f36;border-color:#e36f36;color:#fff;}
.ap-btn--accent:hover{background:#c55a2a;border-color:#c55a2a;transform:translateY(-1px);box-shadow:0 4px 12px rgba(227,111,54,.3);}
.ap-btn--outline{background:#fff;border-color:#1b6494;color:#1b6494;}
.ap-btn--outline:hover{background:#1b6494;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(27,100,148,.2);}
.ap-btn--ghost{background:transparent;color:#5f6970;border-color:transparent;}
.ap-btn--ghost:hover{background:#f1f3f7;color:#1b6494;}
.ap-btn--danger{background:#c02a2a;border-color:#c02a2a;color:#fff;}
.ap-btn--danger:hover{background:#9a1f1f;border-color:#9a1f1f;transform:translateY(-1px);box-shadow:0 4px 12px rgba(192,42,42,.3);}
.ap-btn--sm{padding:5px 14px;font-size:12.5px;border-radius:6px;}
.ap-btn--lg{padding:12px 26px;font-size:15px;}
.ap-btn--icon{padding:8px;min-width:36px;justify-content:center;}
.ap-btn:disabled, .ap-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none !important;}

/* ----- .ap-alert — components-alerts ----- */
.ap-alert{display:flex;gap:12px;padding:14px 16px;border-radius:6px;align-items:flex-start;font-size:14px;}
.ap-alert i{font-size:18px;margin-top:1px;flex:none;}
.ap-alert b{display:block;font-weight:600;margin-bottom:2px;}
.ap-alert p{margin:0;color:var(--ap-gray-700);}
.ap-alert--warning{background:#fff3cd;border-left:4px solid var(--ap-accent);color:#856404;}
.ap-alert--success{background:#d1eddb;border-left:4px solid var(--ap-secondary);color:#0d4a1f;}
.ap-alert--info{background:#d1ecf1;border-left:4px solid var(--ap-primary);color:#0a3d5c;}
.ap-alert--danger{background:#f8d7da;border-left:4px solid var(--ap-danger);color:#842029;}

/* ----- .ap-badge — components-badges ----- */
.ap-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:16px;font-size:12px;font-weight:500;color:#fff;gap:5px;}
.ap-badge--sq{border-radius:4px;padding:4px 8px;}
.ap-badge .dot{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9;}
.ap-badge--primary{background:var(--ap-primary);}
.ap-badge--accent{background:var(--ap-accent);}
.ap-badge--secondary{background:var(--ap-secondary);}
.ap-badge--success{background:var(--ap-success);}
.ap-badge--warning{background:var(--ap-warning);}
.ap-badge--danger{background:var(--ap-danger);}
.ap-badge--info{background:var(--ap-info);}

/* ----- .ap-modal — components-modal ----- */
.ap-modal-backdrop{position:fixed;inset:0;background:rgba(27,40,55,.32);display:flex;align-items:flex-start;justify-content:center;padding:60px 20px 40px;z-index:1000;overflow-y:auto;}
.ap-modal{background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.04);width:100%;display:flex;flex-direction:column;overflow:hidden;max-height:90%;}
.ap-modal--sm{max-width:400px;}
.ap-modal--md{max-width:560px;}
.ap-modal--lg{max-width:640px;}
.ap-modal--xl{max-width:840px;}
.ap-modal__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ap-border-light,#e8ecf1);background:#fff;}
/* Head icon — tinted 36x36 container, color variants */
.ap-modal__head-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--ap-primary-container,#e8f1f8);color:var(--ap-primary-dark,#003e6a);font-size:16px;flex-shrink:0;}
.ap-modal__head-icon--danger{background:#fbe8e4;color:#a52a12;}
.ap-modal__head-icon--success{background:#e0f1e6;color:#1f7c48;}
.ap-modal__head-icon--accent{background:var(--ap-accent-container,#fde8d8);color:var(--ap-accent-dark,#c55a2a);}
.ap-modal__head-icon--warn{background:#fff3dc;color:#8a5a10;}
.ap-modal__head-icon--purple{background:#efe4fa;color:#6f42c1;}
/* Title + optional subtitle group */
.ap-modal__title-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ap-modal__title{font-size:15px;font-weight:700;color:var(--ap-text-primary,#1a252f);margin:0;letter-spacing:-0.01em;line-height:1.2;}
.ap-modal__subtitle{font-size:12px;color:var(--ap-text-secondary,#5f6970);line-height:1.35;}
.ap-modal__close{width:30px;height:30px;border-radius:8px;border:1px solid var(--ap-border-light,#e8ecf1);background:#fff;color:var(--ap-text-secondary,#5f6970);font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s, color .15s;}
.ap-modal__close:hover{background:var(--ap-surface-hover,#f1f3f7);color:#1b6494;}
.ap-modal__body{padding:18px 20px;color:var(--ap-text-primary,#2c3e50);font-size:13.5px;line-height:1.55;overflow-y:auto;}
.ap-modal__body--flush{padding:0;}
.ap-modal__body p{margin:0 0 10px;} .ap-modal__body p:last-child{margin-bottom:0;}
.ap-modal__foot{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--ap-border-light,#e8ecf1);background:var(--ap-gray-50,#f8f9fb);}
.ap-modal__foot--space{justify-content:space-between;}
.ap-modal__foot-spacer{flex:1;}

/* ----- .ap-off — components-offcanvas ----- */
.ap-off{position:relative;margin-left:auto;background:#fff;display:flex;flex-direction:column;box-shadow:-24px 0 48px -16px rgba(15,23,42,.25);z-index:1;}
.ap-off--narrow{width:400px;}
.ap-off--wide{width:640px;}
.ap-off__head{display:flex;align-items:center;gap:10px;padding:14px 20px;min-height:56px;border-bottom:1px solid #e5e9ef;background:#fff;flex-shrink:0;}
.ap-off__head-icon{color:#1b6494;font-size:16px;line-height:1;}
.ap-off__title{font-size:15.5px;font-weight:600;color:#1a252f;margin:0;flex:1;letter-spacing:-0.005em;}
.ap-off__sub{font-family:var(--ap-font-mono);font-size:11px;color:#8a95a3;letter-spacing:.3px;}
.ap-off__close{width:32px;height:32px;border-radius:6px;border:0;background:transparent;color:#8a95a3;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s, color .15s;}
.ap-off__close:hover{background:#f1f3f7;color:#1b6494;}
.ap-off__body{padding:20px 24px;color:#2c3e50;font-size:13.5px;line-height:1.55;overflow-y:auto;flex:1;}
.ap-off__foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #e5e9ef;background:#fff;flex-shrink:0;}

/* ----- form-grid helper (shared door modal + offcanvas) ----- */
.ap-form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px 10px;}
.ap-form-grid .c4{grid-column:span 4;}
.ap-form-grid .c6{grid-column:span 6;}
.ap-form-grid .c8{grid-column:span 8;}
.ap-form-grid .c12{grid-column:span 12;}

/* =============================================================
   .ap-dropdown — menu primitive (handoff: components-dropdown.html)
   Bootstrap interop: we geven .dropdown-menu rijen uit Bootstrap óók
   de .ap-dropdown class, en elke .dropdown-item krijgt ook
   .ap-dropdown__item. Bootstrap houdt open/close-logica, wij doen
   de styling via DS-classes.
   ============================================================= */

/* Positioning wrapper (voor standalone triggers zonder Bootstrap). */
.ap-dropdown-wrap{position:relative;display:inline-flex;}

.ap-dropdown{
  min-width:240px;
  background:#fff;
  border:1px solid #e5e9ef;
  border-radius:10px;
  box-shadow:0 16px 40px -8px rgba(15,23,42,.22), 0 4px 10px -4px rgba(15,23,42,.08);
  padding:5px;
  z-index:10;
  font-family:var(--ap-font-sans);
  transform-origin:top left;
  animation:ap-dd-in 120ms ease-out;
}
/* Als we via Bootstrap geserveerd worden, is .dropdown-menu al absolute
   gepositioneerd. Voor standalone .ap-dropdown (buiten Bootstrap) regelen
   we de positie expliciet. */
.ap-dropdown-wrap > .ap-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;
}
.ap-dropdown--end{left:auto;right:0;transform-origin:top right;}
.ap-dropdown--wide{min-width:296px;}
@keyframes ap-dd-in{
  from{opacity:0;transform:translateY(-4px);}
  to  {opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .ap-dropdown{animation:none;}
}

.ap-dropdown__label{
  font-family:var(--ap-font-sans);
  font-size:11px;color:#8a95a3;font-weight:500;
  padding:8px 10px 4px;
  display:flex;align-items:center;gap:6px;
}
.ap-dropdown__label--top{padding-top:6px;}

.ap-dropdown__item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:6px;
  font-size:13.5px;color:#1a252f;font-weight:400;
  background:transparent;border:0;width:100%;text-align:left;
  cursor:pointer;line-height:1.35;
  font-family:var(--ap-font-sans);
  transition:background .12s, color .12s;
  position:relative;
  text-decoration:none;
}
.ap-dropdown__item > i:first-child{
  width:18px;flex-shrink:0;color:#5f6970;font-size:14px;text-align:center;
}
.ap-dropdown__item-body{display:flex;flex-direction:column;flex:1;min-width:0;gap:1px;}
.ap-dropdown__item-title{font-size:13.5px;color:#1a252f;font-weight:500;letter-spacing:-0.005em;}
.ap-dropdown__item-meta{font-size:11.5px;color:#8a95a3;font-weight:400;line-height:1.3;}

.ap-dropdown__item-tail{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:#8a95a3;font-family:var(--ap-font-mono);letter-spacing:.2px;
}
.ap-dropdown__item-tail i{font-size:12px;color:#b8c0ca;}

.ap-dropdown__item-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:#b8c0ca;margin-right:2px;
}
.ap-dropdown__item-dot--blue{background:#1b6494;}
.ap-dropdown__item-dot--amber{background:#b8741a;}
.ap-dropdown__item-dot--green{background:#247e3f;}
.ap-dropdown__item-dot--red{background:#c02a2a;}

.ap-dropdown__item-av{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;color:#fff;letter-spacing:.2px;
}

/* States */
.ap-dropdown__item:hover{background:#f4f7fa;}
.ap-dropdown__item:hover > i:first-child{color:#1b6494;}

.ap-dropdown__item:focus-visible,
.ap-dropdown__item.is-focus{
  outline:0;background:#e3f0f8;color:#1a252f;
  box-shadow:inset 0 0 0 1.5px #1b6494;
}
.ap-dropdown__item:focus-visible > i:first-child,
.ap-dropdown__item.is-focus > i:first-child{color:#1b6494;}

.ap-dropdown__item.is-active{color:#1b6494;background:#f0f6fa;}
.ap-dropdown__item.is-active::before{
  content:"";position:absolute;left:-5px;top:6px;bottom:6px;width:2.5px;
  background:#1b6494;border-radius:2px;
}
.ap-dropdown__item.is-active .ap-dropdown__item-title{color:#1b6494;font-weight:600;}

.ap-dropdown__item[disabled],
.ap-dropdown__item[aria-disabled="true"]{
  color:#b8c0ca;cursor:not-allowed;
}
.ap-dropdown__item[aria-disabled="true"] > i:first-child{color:#c7cdd5;}
.ap-dropdown__item[aria-disabled="true"] .ap-dropdown__item-title{color:#b8c0ca;font-weight:400;}
.ap-dropdown__item[aria-disabled="true"] .ap-dropdown__item-meta{color:#c7cdd5;}
.ap-dropdown__item[aria-disabled="true"]:hover{background:transparent;}
.ap-dropdown__item[aria-disabled="true"]:hover > i:first-child{color:#c7cdd5;}

.ap-dropdown__item--danger{color:#c02a2a;}
.ap-dropdown__item--danger > i:first-child{color:#c02a2a;}
.ap-dropdown__item--danger .ap-dropdown__item-title{color:#c02a2a;}
.ap-dropdown__item--danger:hover{background:#fdecec;}
.ap-dropdown__item--danger:focus-visible,
.ap-dropdown__item--danger.is-focus{
  background:#fdecec;box-shadow:inset 0 0 0 1.5px #c02a2a;
}
.ap-dropdown__item--danger:focus-visible > i:first-child,
.ap-dropdown__item--danger.is-focus > i:first-child{color:#c02a2a;}

.ap-dropdown__divider{height:1px;background:#eef1f5;margin:4px 6px;}

/* Scrollbare body — sticky label/hint, alleen items scrollen */
.ap-dropdown__scroll{
  max-height:260px;overflow-y:auto;
  margin:0 -1px;padding:0 1px;
  scrollbar-width:thin;scrollbar-color:#cfd6df transparent;
}
.ap-dropdown__scroll::-webkit-scrollbar{width:8px;}
.ap-dropdown__scroll::-webkit-scrollbar-thumb{background:#cfd6df;border-radius:4px;border:2px solid #fff;}
.ap-dropdown__scroll::-webkit-scrollbar-track{background:transparent;}

/* Multi-select — checkbox-items */
.ap-dropdown__check{
  width:16px;height:16px;flex-shrink:0;border-radius:4px;
  border:1.5px solid #cfd6df;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, border-color .12s;
}
.ap-dropdown__item.is-checked .ap-dropdown__check{
  background:#1b6494;border-color:#1b6494;
}
.ap-dropdown__item.is-checked .ap-dropdown__check::after{
  content:"";width:8px;height:4.5px;border:1.8px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg) translate(0.5px,-1px);
}
.ap-dropdown__item.is-checked .ap-dropdown__item-title{color:#1a252f;font-weight:500;}
.ap-dropdown__item.is-checked::before{content:none;}
.ap-dropdown__item.is-checked{background:transparent;}
.ap-dropdown__item.is-checked:hover{background:#f4f7fa;}

.ap-dropdown__toolbar{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px 8px;margin-top:2px;
  border-top:1px solid #eef1f5;
}
.ap-dropdown__toolbar-count{font-size:11.5px;color:#8a95a3;margin-right:auto;}
.ap-dropdown__toolbar-count strong{color:#1b6494;font-weight:600;}
.ap-dropdown__toolbar-btn{
  background:transparent;border:0;cursor:pointer;
  font-family:var(--ap-font-sans);font-size:12px;font-weight:500;color:#1b6494;
  padding:3px 6px;border-radius:4px;
}
.ap-dropdown__toolbar-btn:hover{background:#e3f0f8;}

/* Confirm-in-place */
.ap-dropdown__confirm{
  padding:8px 10px 9px;
  background:#fdecec;border-radius:6px;
  margin:2px 0;
  animation:ap-dd-confirm-in 140ms ease-out;
}
@keyframes ap-dd-confirm-in{
  from{opacity:0;transform:translateY(-2px);}
  to  {opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .ap-dropdown__confirm{animation:none;}
}
.ap-dropdown__confirm-msg{
  display:flex;gap:8px;align-items:flex-start;
  font-size:12.5px;color:#7a1c1c;margin:0 0 8px;line-height:1.4;
}
.ap-dropdown__confirm-msg i{color:#c02a2a;font-size:14px;margin-top:1px;flex-shrink:0;}
.ap-dropdown__confirm-msg strong{color:#4a0f0f;font-weight:600;}
.ap-dropdown__confirm-actions{display:flex;gap:6px;justify-content:flex-end;}
.ap-dropdown__confirm-btn{
  font-family:var(--ap-font-sans);font-size:12px;font-weight:500;
  padding:4px 12px;border-radius:5px;cursor:pointer;line-height:1.3;
  border:1px solid transparent;
}
.ap-dropdown__confirm-btn--cancel{background:#fff;border-color:#e5c9c9;color:#7a1c1c;}
.ap-dropdown__confirm-btn--cancel:hover{background:#faf5f5;}
.ap-dropdown__confirm-btn--go{background:#c02a2a;border-color:#c02a2a;color:#fff;}
.ap-dropdown__confirm-btn--go:hover{background:#9a1f1f;border-color:#9a1f1f;}

/* Submenu (CSS-positie; open/close-delays worden in JS geregeld) */
.ap-dropdown__submenu{
  position:absolute;top:-5px;left:calc(100% + 4px);
  min-width:220px;background:#fff;
  border:1px solid #e5e9ef;border-radius:10px;
  box-shadow:0 16px 40px -8px rgba(15,23,42,.22), 0 4px 10px -4px rgba(15,23,42,.08);
  padding:5px;
  animation:ap-dd-in 120ms ease-out;
  transform-origin:top left;
}

/* User-header binnen dropdown */
.ap-dropdown__user{display:flex;gap:11px;align-items:center;padding:9px 10px 11px;}
.ap-dropdown__user-av{width:36px;height:36px;border-radius:50%;background:#1b6494;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}
.ap-dropdown__user-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.ap-dropdown__user-txt strong{font-size:13.5px;color:#1a252f;font-weight:600;letter-spacing:-0.005em;}
.ap-dropdown__user-txt span{font-size:11.5px;color:#8a95a3;font-family:var(--ap-font-mono);margin-top:1px;}

/* Keyboard-hint onderin */
.ap-dropdown__hint{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px 6px;margin-top:2px;
  border-top:1px solid #eef1f5;
  font-size:11px;color:#8a95a3;
}
.ap-dropdown__hint kbd{
  font-family:var(--ap-font-mono);font-size:10px;font-weight:500;
  padding:1px 5px;background:#f4f7fa;border:1px solid #e5e9ef;border-radius:3px;
  color:#5f6970;line-height:1.3;
}

/* ----- .ap-chip trigger ----- */
.ap-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;border-radius:20px;
  background:#fff;border:1px solid #e5e9ef;cursor:pointer;
  font-family:var(--ap-font-sans);font-size:12.5px;color:#2c3e50;font-weight:500;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.ap-chip:hover{background:#f4f7fa;border-color:#cfd6df;}
.ap-chip[aria-expanded="true"]{border-color:#1b6494;box-shadow:0 0 0 3px rgba(27,100,148,.12);}
.ap-chip__avatar{width:22px;height:22px;border-radius:50%;background:#1b6494;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:.3px;}
.ap-chip__sub{color:#8a95a3;font-weight:400;font-size:11.5px;font-family:var(--ap-font-mono);margin-left:2px;}
.ap-chip i{color:#8a95a3;font-size:12px;margin-left:2px;}

/* ----- .ap-split button (primary + caret) ----- */
.ap-split{display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;}
.ap-split .ap-btn{border-radius:0;border-right:1px solid rgba(255,255,255,.22);}
.ap-split .ap-btn:first-child{border-radius:6px 0 0 6px;}
.ap-split .ap-btn:last-child{border-radius:0 6px 6px 0;padding:8px 10px;border-right:0;}

/* ----- Bootstrap interop -----
   Wanneer een element ÓÓK de Bootstrap .dropdown-menu class heeft, houdt
   Bootstrap de positioning + show/hide. We resetten alleen wat nodig is
   (geen dubbele achtergrond-kleur, geen Bootstrap-padding die met onze
   eigen padding botst). */
.dropdown-menu.ap-dropdown{
  /* Bootstrap houdt display:none → :block bij .show en positioneert via
     Popper.js met inline transform: translate(...). Onze ap-dd-in animatie
     gebruikt ook transform, wat die positie op frame 1 overschrijft → de
     dropdown verspringt zichtbaar na openklappen. Voor de hybride variant
     dus alleen opacity animeren, geen transform aanraken. */
  padding:5px;
  margin:0;
  border-radius:10px;
  border:1px solid #e5e9ef;
  box-shadow:0 16px 40px -8px rgba(15,23,42,.22), 0 4px 10px -4px rgba(15,23,42,.08);
  animation:ap-dd-in-fade 120ms ease-out;
  transform-origin:unset;
}
@keyframes ap-dd-in-fade{
  from{opacity:0;}
  to  {opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .dropdown-menu.ap-dropdown{animation:none;}
}

/* Bootstrap heeft eigen .dropdown-item styling die botst met .ap-dropdown__item.
   Als een element beide classes heeft, laat onze regel winnen. */
.dropdown-item.ap-dropdown__item{
  padding:7px 10px;
  font-size:13.5px;
  color:#1a252f;
  background:transparent;
}
.dropdown-item.ap-dropdown__item:hover,
.dropdown-item.ap-dropdown__item:focus{
  background:#f4f7fa;color:#1a252f;
}
.dropdown-item.ap-dropdown__item.active,
.dropdown-item.ap-dropdown__item:active{
  background:#f0f6fa;color:#1b6494;
}