:root {
  --navy: #14152c;
  --red: #e30613;
  --text: #1f2230;
  --muted: #7a8194;
  --border: #e6e9ef;
  --card: #ffffff;
  --bg: #f6f7fb;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  font-family: "Work Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-contact {
  background: var(--navy);
  color: #fff;
  font-size: 0.82rem;
}

.top-contact .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.contact-left, .contact-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.contact-left i, .contact-right i {
  margin-right: 6px;
  opacity: 0.9;
}

.socials i {
  opacity: 0.7;
  margin-left: 8px;
}

.main-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.main-nav .container {
  position: relative;
}

.container {
  max-width: 1280px;
}

.main-nav .navbar {
  padding: 7px 0;
}

.navbar-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo {
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.3px;
}

.logo-sub {
  font-size: 0.65rem;
  letter-spacing: 1.2px;
  color: var(--red);
}

.nav-link {
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 10px;
}

.nav-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  position: relative;
  background: #fff;
  color: var(--text);
}

.user-btn {
  width: auto;
  height: 36px;
  padding: 0 10px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-btn.dropdown-toggle::after {
  margin-left: 6px;
  font-size: 0.7rem;
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef1f5;
  color: #3b4b7a;
  font-weight: 600;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
}

.user-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.user-dropdown .dropdown-menu {
  border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 8px;
  min-width: 220px;
  margin-top: 0;
  background: #fff;
}

.user-dropdown .dropdown-item {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.user-dropdown .dropdown-item:hover,
.user-dropdown .dropdown-item:focus {
  background: #f3f5f9;
}

.user-dropdown .dropdown-item i {
  width: 18px;
  text-align: center;
  color: #3b4b7a;
}

.user-dropdown .dropdown-divider {
  margin: 8px 0;
}

.icon-btn .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 0.62rem;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.dropdown.mega { position: static; }

.dropdown.mega .dropdown-menu {
  margin-top: 0;
  left: 0;
  right: 0;
  transform: none;
}

.mega-menu {
  background: #fbfbfd;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  width: 100%;
  box-shadow: none;
  padding: 10px 22px 18px;
}

.mega-menu .row { margin: 0; }

.mega-menu .col-lg-3 { position: relative; }

/* verwijderd: verticale dividers tussen kolommen */

.mega-head {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.95rem;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef1f5;
  position: relative;
}

.mega-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 2px;
  background: var(--red);
}

.mega-desc-col {
  position: relative;
  padding-right: 22px;
  padding-top: 0;
}

.mega-desc-col::after {
  content: "";
  position: absolute;
  top: 0;
  right: 8px;
  width: 1px;
  height: 85%;
  background: #eef1f5;
}

.mega-desc {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 8px 0 12px;
}

.mega-desc-title {
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 8px;
}

.mega-desc-col .mega-desc {
  max-width: 320px;
}

.mega-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.mega-more i {
  color: var(--red);
  font-size: 0.8rem;
}

.mega-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: rgba(227, 6, 19, 0.12);
  color: var(--red);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.mega-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  padding: 0 12px;
  font-size: 0.92rem;
  border-radius: var(--radius);
  border: 1px solid #e6e9ef;
  background: #fff;
  line-height: 1.25;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mega-tile i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  color: var(--red);
  background: rgba(227, 6, 19, 0.1);
}

.mega-tile span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-tile:hover,
.mega-tile.active {
  border-color: #dfe3ec;
  box-shadow: none;
  transform: none;
}

.mega-tile:hover::after,
.mega-tile.active::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--red);
  font-size: 0.7rem;
}

.page {
  padding: 22px 0 50px;
  flex: 1;
}

.portal-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 0 28px;
}

.portal-hero h1 {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  margin-bottom: 8px;
}

.portal-hero-main p {
  margin-bottom: 0;
}

.hero-card {
  background: #fff5f5;
  border: 1px solid #f3c2c2;
  border-radius: var(--radius);
  padding: 20px 22px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.hero-chip i {
  font-size: 0.9rem;
}

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

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

.portal-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
}

.portal-title {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.portal-value {
  font-size: 1.4rem;
  font-weight: 700;
}

.portal-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
}

.portal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.portal-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
}

.portal-panel + .portal-panel,
.portal-hero + .portal-panel,
.portal-hero + .portal-grid,
.portal-hero + .portal-table,
.portal-hero + .portal-panel-header,
.portal-hero + .portal-panel {
  margin-top: 16px;
}

.portal-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.portal-panel-header .muted {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.85rem;
}

.portal-table {
  display: grid;
  gap: 6px;
}

.portal-row {
  display: grid;
  grid-template-columns: 36px 2.2fr 1.1fr 1.1fr 1fr 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e9edf4;
  font-size: 0.92rem;
}

.portal-row > span:not(.domain-stack) {
  display: flex;
  align-items: center;
}

.portal-row:last-child { border-bottom: none; }

.portal-row:not(.portal-row-head):nth-child(even) {
  background: #fafbfe;
}

.portal-row:not(.portal-row-head) {
  border-radius: var(--radius);
  padding-left: 8px;
  padding-right: 8px;
  border: 1px solid #eef2f7;
  margin-bottom: 4px;
}

.portal-row:not(.portal-row-head):hover {
  background: #f6f8fb;
}

.portal-row-head {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 8px;
  padding-right: 8px;
}

.icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
}

.icon-cell i {
  font-size: 1rem;
  line-height: 1;
  display: block;
  width: 1em;
  height: 1em;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.status-badge.ok {
  background: rgba(47, 180, 95, 0.12);
  color: #2fb45f;
}

.status-badge.warn {
  background: rgba(230, 126, 34, 0.12);
  color: #e67e22;
}

.order-num {
  color: var(--muted);
}

.domain-stack {
  display: grid;
  gap: 0;
  align-content: center;
}

.domain-stack strong {
  font-weight: 600;
}

.domain-link {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.domain-link:hover {
  color: var(--red);
}

.domain-stack small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1;
}

.status {
  font-weight: 600;
}

.status.ok { color: #2fb45f; }
.status.warn { color: #e67e22; }

.portal-actions-grid {
  display: grid;
  gap: 10px;
}

.portal-action {
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 12px;
  border-radius: var(--radius);
  text-align: left;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-action i {
  color: var(--red);
}

.domain-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.chart-card {
  display: grid;
  gap: 10px;
}

.chart-placeholder {
  height: 140px;
  border-radius: var(--radius);
  border: 1px solid #eef2f7;
  background: linear-gradient(180deg, rgba(227, 6, 19, 0.08), rgba(227, 6, 19, 0));
}

.chart-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.85rem;
}

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

.info-grid {
  display: grid;
  gap: 10px;
}

.info-item {
  display: grid;
  gap: 4px;
}

.info-label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.info-value {
  font-size: 0.95rem;
  font-weight: 600;
}

@media (max-width: 991px) {
  .domain-panels { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
}

.site-footer {
  margin-top: auto;
  padding: 16px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8e9f1;
  font-size: 0.85rem;
  background: #14152c;
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 767px) {
  .site-footer .container { flex-direction: column; gap: 6px; }
}

@media (max-width: 991px) {
  .portal-header { flex-direction: column; align-items: flex-start; }
  .portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-grid { grid-template-columns: 1fr; }
}

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

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.stat-icon.blue { background: #e7f0ff; color: #2b60ff; }
.stat-icon.purple { background: #efe3ff; color: #7c3aed; }
.stat-icon.green { background: #e6f6ea; color: #2fb45f; }
.stat-icon.lavender { background: #e9ecff; color: #6b6bff; }

.stat-number {
  font-weight: 700;
  font-size: 1.4rem;
}

.stat-label {
  color: var(--muted);
  font-size: 0.9rem;
}

.content-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.panel .card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  font-size: 0.95rem;
}

.panel .card-body {
  padding: 12px 16px;
}

.note-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f2f6;
}

.note-row:last-child { border-bottom: none; }

.note-time {
  color: var(--muted);
  font-size: 0.78rem;
}

.note-text {
  font-size: 0.9rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}

.btn-danger {
  background: var(--red);
  border-color: var(--red);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 991px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .mega-menu { width: calc(100vw - 24px); }
  .mega-menu .col-lg-3:not(:last-child)::after { display: none; }
}

@media (max-width: 767px) {
  .top-contact .container { flex-direction: column; gap: 6px; }
  .stats { grid-template-columns: 1fr; }
}
.mega-links {
  margin-top: 0;
  padding-top: 6px;
}

.mega-tiles {
  display: grid;
  grid-auto-rows: 54px;
  gap: 10px;
}

.mega-links .col-lg-6 {
  display: grid;
  gap: 10px;
}
.date-cell {
  color: var(--muted);
  font-size: 0.88rem;
}
.admin-link-wrap {
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid var(--border);
}

.admin-link {
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.admin-link:hover {
  color: var(--red);
}





/* ===== MVC Dashboard Expansion ===== */
.page{
    padding: 2rem 0 3rem;
}

.dashboard-hero{
    display:grid;
    grid-template-columns: 1.6fr .9fr;
    gap:1.5rem;
    align-items:stretch;
    margin: 1.75rem 0 1.5rem;
    padding: 1.5rem;
    border:1px solid #f0cfd1;
    border-radius:1rem;
    background:#fff8f8;
}

.dashboard-hero h1{
    font-size: 3rem;
    line-height: 1.08;
    margin: 1rem 0 .8rem;
    color:#14213d;
    font-weight: 700;
}

.dashboard-hero p{
    color:#4f5d75;
    max-width: 740px;
    margin:0;
    font-size:1.05rem;
}

.hero-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hero-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.hero-chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    align-self:flex-start;
    padding:.45rem .85rem;
    border-radius:.55rem;
    background:#ef233c;
    color:#fff;
    font-size:.85rem;
    font-weight:700;
}

.hero-next{
    width:100%;
    max-width: 320px;
    padding:1.25rem;
    border:1px solid #ead6d8;
    border-radius:1rem;
    background:#fff;
    box-shadow:0 10px 25px rgba(15, 23, 42, .04);
}

.hero-next-label{
    display:block;
    color:#9aa4b2;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.75rem;
    font-weight:700;
    margin-bottom:.85rem;
}

.hero-next strong{
    display:block;
    color:#14213d;
    font-size:1.5rem;
    line-height:1.25;
    margin-bottom:1rem;
}

.stats-expanded{
    margin-bottom:1rem;
}



.quick-card-link{
    text-decoration:none;
}

.quick-card-panel{
    display:flex;
    gap:.9rem;
    align-items:flex-start;
    min-height:96px;
    padding:1rem 1.1rem;
    border:1px solid #e7e9f0;
    border-radius:.85rem;
    background:#fff;
    transition:.18s ease;
}

.quick-card-panel:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(15, 23, 42, .05);
}

.quick-card-icon{
    width:2.5rem;
    height:2.5rem;
    border-radius:999px;
    background:#fff1f2;
    color:#ef233c;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.quick-card-content h3{
    margin:0 0 .3rem;
    font-size:1rem;
    color:#14213d;
    font-weight:700;
}

.quick-card-content p{
    margin:0;
    color:#8a94a6;
    font-size:.92rem;
    line-height:1.45;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:1rem;
}

.dashboard-main,
.dashboard-side{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.panel .card-header{
    display:flex;
    align-items:center;
    gap:.65rem;
    justify-content:flex-start;
    font-weight:700;
}

.panel .card-header .panel-link{
    margin-left:auto;
    color:#ef233c;
    text-decoration:none;
    font-size:.9rem;
    font-weight:700;
}

.service-row{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:center;
    padding:1rem 1.25rem;
    border-bottom:1px solid #eef0f5;
}

.service-row:last-child{
    border-bottom:none;
}

.service-title{
    font-weight:700;
    color:#14213d;
    margin-bottom:.2rem;
}

.service-sub{
    color:#8a94a6;
    font-size:.92rem;
}

.service-right{
    text-align:right;
}

.service-right small{
    display:block;
    margin-top:.35rem;
    color:#98a2b3;
}

.panel-attention{
    border-color:#f0cfd1;
}

.attention-domain{
    font-size:1.05rem;
    font-weight:700;
    color:#14213d;
    margin-bottom:.6rem;
}

.panel-attention p{
    color:#6b7280;
    margin-bottom:1rem;
    line-height:1.55;
}

.finance-list{
    padding-top:.15rem;
}

.finance-row{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:.9rem 1.25rem;
    border-bottom:1px solid #eef0f5;
    color:#7b8698;
}

.finance-row strong{
    color:#14213d;
}

.finance-btn-wrap{
    padding:1rem 1.25rem 1.2rem;
}

.order-row{
    padding:1rem 1.25rem;
    border-bottom:1px solid #eef0f5;
}

.order-row:last-child{
    border-bottom:none;
}

.order-title{
    font-weight:700;
    color:#14213d;
    margin-bottom:.3rem;
}

.order-sub{
    color:#8a94a6;
    font-size:.92rem;
}

@media (max-width: 1199.98px){
    .dashboard-hero,
    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .hero-right{
        justify-content:flex-start;
    }

    

    .dashboard-hero h1{
        font-size:2.35rem;
    }
}

@media (max-width: 767.98px){
    .dashboard-hero{
        padding:1rem;
    }

    .dashboard-hero h1{
        font-size:1.85rem;
    }

    .hero-next strong{
        font-size:1.15rem;
    }

    

    .service-row,
    .finance-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .service-right{
        text-align:left;
    }
}



/* notifications cleanup */
.notifications-panel .card-header{
    justify-content:space-between;
}

.panel-head-left{
    display:flex;
    align-items:center;
    gap:.65rem;
}

.notification-item{
    padding:1rem 1.25rem;
    border-bottom:1px solid #eef0f5;
}

.notification-item:last-child{
    border-bottom:none;
}

.notification-meta{
    font-size:.8rem;
    color:#a0a8b8;
    margin-bottom:.45rem;
    font-weight:500;
}

.notification-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.notification-text{
    color:#14213d;
    line-height:1.5;
    font-size:.98rem;
}

.notification-dot{
    width:.5rem;
    height:.5rem;
    border-radius:999px;
    background:#ef233c;
    flex-shrink:0;
}

@media (max-width: 767.98px){
    .notification-item{
        padding:.9rem 1rem;
    }

    .notification-content{
        align-items:flex-start;
    }
}





    .notification-icon{
        margin-top:.1rem;
    }
}



/* restored full dashboard with shortcuts */
.notification-row{
    display:flex;
    align-items:center;
    gap:.85rem;
}

.notification-row-link{
    color:inherit;
    text-decoration:none;
}

.notification-row-link:hover{
    color:inherit;
    text-decoration:none;
}

.notification-icon{
    width:2rem;
    height:2rem;
    min-width:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff1f2;
    color:#ef233c;
}

.notification-text{
    line-height:1.45;
}

.shortcut-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.85rem;
}

.shortcut-card{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:1rem;
    border:1px solid #e9ecf3;
    border-radius:.75rem;
    text-decoration:none;
    color:#14213d;
    font-weight:700;
    background:#fff;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.shortcut-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    border-color:#d9dee9;
    background:#fcfcfe;
}

.finance-left{
    display:flex;
    align-items:center;
    gap:.6rem;
}

.finance-icon{
    width:1.8rem;
    height:1.8rem;
    min-width:1.8rem;
    border-radius:50%;
    background:#eef2ff;
    color:#4f46e5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.75rem;
}

.finance-text{
    font-weight:500;
}

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


/* FINAL notification inline fix */
.notification-item{
    display:flex;
    flex-direction:column;
    padding:1rem 1.25rem;
}

.notification-row{
    display:flex;
    align-items:center;
    gap:0.75rem;
}

.notification-icon{
    width:2rem;
    height:2rem;
    min-width:2rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff1f2;
    color:#ef233c;
}

.notification-text{
    display:flex;
    align-items:center;
    margin:0;
}


/* order icons */
.order-left{
    display:flex;
    align-items:center;
    gap:.75rem;
}

.order-icon{
    width:2rem;
    height:2rem;
    min-width:2rem;
    border-radius:50%;
    background:#eef2ff;
    color:#4f46e5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
}


/* container 1400px */
.container{
    max-width:1400px !important;
}


/* unified red square icon system */
.notification-icon,
.finance-icon,
.order-icon,
.shortcut-icon,
.stat-icon,
.mega-tile-icon{
    width:2rem;
    height:2rem;
    min-width:2rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ef233c !important;
    color:#fff !important;
    border-radius:8px !important;
}

.notification-icon i,
.finance-icon i,
.order-icon i,
.shortcut-icon i,
.stat-icon i,
.mega-tile-icon i{
    color:#fff !important;
}


/* striped notifications */
.notification-item:nth-child(even) {
    background: #fafbff;
}

.notification-item:nth-child(odd) {
    background: #ffffff;
}

/* hover */
.notification-item:hover {
    background: #f1f5ff;
}

/* accent line */
.notification-item {
    position: relative;
}

.notification-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: rgba(239, 35, 60, 0.15);
    transition: background 0.2s ease;
}

.notification-item:hover::before {
    background: #ef233c;
}


/* unread notifications */
.notification-item.is-unread {
    font-weight: 700;
}

.notification-item.is-unread::before {
    width: 4px;
    background: rgba(239, 35, 60, 0.35);
}

.notification-item.is-unread .notification-text {
    font-weight: 700;
    color: #14213d;
}

.notification-item.is-unread .notification-meta {
    color: #7f8aa3;
    font-weight: 700;
}

.notification-item.is-unread:hover::before {
    background: #ef233c;
}

/* striped + hover for orders */
.order-row:nth-child(even) {
    background: #fafbff;
}

.order-row:nth-child(odd) {
    background: #ffffff;
}

.order-row:hover {
    background: #f1f5ff;
}

.order-row {
    position: relative;
}

.order-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: rgba(239, 35, 60, 0.15);
    transition: background 0.2s ease;
}

.order-row:hover::before {
    background: #ef233c;
}

.orders-btn-wrap {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #eef0f5;
}


/* shortcuts redesign stacked */
.shortcut-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
}

.shortcut-card{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding:1.25rem;
    gap:.6rem;
}

.shortcut-icon{
    width:2.4rem;
    height:2.4rem;
    font-size:1rem;
}

.shortcut-card span:last-child{
    font-weight:600;
    font-size:.95rem;
}

/* admin page */
.admin-hero{
    margin-bottom:1.25rem;
}

.admin-hero-body{
    padding:1.25rem !important;
}

.admin-page-title{
    margin:0 0 .5rem;
    font-size:2rem;
    line-height:1.15;
    color:var(--mbiv-text);
    font-weight:700;
}

.admin-page-text{
    margin:0;
    color:var(--mbiv-muted);
    max-width:760px;
    line-height:1.6;
}

.admin-modules-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:1rem;
}

.admin-module-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.85rem;
    padding:1.1rem;
    background:#fff;
    border:1px solid var(--mbiv-border);
    border-radius:8px;
    text-decoration:none;
    color:var(--mbiv-text);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.admin-module-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    border-color:#d9dee9;
    background:#fcfcfe;
}

.admin-module-icon{
    width:2rem;
    height:2rem;
    min-width:2rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ef233c;
    color:#fff;
    border-radius:8px;
}

.admin-module-icon i{
    color:#fff !important;
}

.admin-module-title{
    font-size:1.02rem;
    font-weight:700;
    color:var(--mbiv-text);
    margin:0;
}

.admin-module-text{
    color:var(--mbiv-muted);
    line-height:1.55;
    font-size:.92rem;
}

.admin-activity-panel{
    margin-top:1.25rem;
}

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

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

@media (max-width: 767.98px){
    .admin-page-title{
        font-size:1.55rem;
    }

    .admin-modules-grid{
        grid-template-columns:1fr;
    }
}


/* body background override */
body{
    background:#ebebeb !important;
}


/* admin modules stacked like shortcuts */
.admin-modules-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:1rem;
}

.admin-module-card{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:1.25rem;
    gap:.7rem;
}

.admin-module-icon{
    width:2.4rem;
    height:2.4rem;
    font-size:1rem;
}

.admin-module-title{
    font-size:.98rem;
    font-weight:700;
    margin:0;
}

@media (max-width: 1399.98px){
    .admin-modules-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 991.98px){
    .admin-modules-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 767.98px){
    .admin-modules-grid{
        grid-template-columns:1fr;
    }
}


/* admin modules larger set */
.admin-modules-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
}

@media (max-width: 1399.98px){
    .admin-modules-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

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

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


/* wider admin grid */
.admin-modules-grid{
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:1.2rem;
}

@media (max-width: 1400px){
    .admin-modules-grid{
        grid-template-columns:repeat(5, minmax(0,1fr));
    }
}

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


/* admin 8 columns */
.admin-modules-grid{
    grid-template-columns:repeat(8, minmax(0,1fr)) !important;
}


/* admin modules 8 columns with responsive fallbacks */
.admin-modules-grid{
    grid-template-columns:repeat(8, minmax(0,1fr)) !important;
}

@media (max-width: 1600px){
    .admin-modules-grid{
        grid-template-columns:repeat(6, minmax(0,1fr)) !important;
    }
}

@media (max-width: 1200px){
    .admin-modules-grid{
        grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    }
}

@media (max-width: 768px){
    .admin-modules-grid{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }
}


/* highlight instellingen */
.admin-module-card:last-child{
    border:2px solid #ef233c;
    border-radius:8px;
}


/* subtle hover for all admin cards */
.admin-module-card{
    transition: all 0.18s ease;
}

.admin-module-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15,23,42,0.04);
    background: #fafafa;
}


/* add subtle border to all admin cards */
.admin-module-card{
    border:1px solid rgba(239,35,60,0.15) !important;
    border-radius:8px;
}

.admin-module-card:hover{
    border-color:#ef233c;
}


/* softer admin titles */
.admin-module-title{
    font-weight:500 !important;
}

/* admin settings page */
.admin-settings-panel{
    overflow: hidden;
}

.settings-form{
    width:100%;
}

.settings-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
}

.settings-field-full{
    grid-column:1 / -1;
}

.settings-label{
    display:block;
    margin-bottom:.45rem;
    font-size:.92rem;
    font-weight:600;
    color:var(--mbiv-text);
}

.settings-input{
    min-height:3rem;
    border-radius:8px !important;
    border:1px solid var(--mbiv-border);
    background:#fff;
    color:var(--mbiv-text);
}

.settings-input:focus{
    border-color:#ef233c;
    box-shadow:0 0 0 .2rem rgba(239,35,60,.08);
}

.logo-upload-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    background:#fff;
}

.logo-upload-preview{
    display:flex;
    align-items:center;
    gap:.9rem;
}

.logo-upload-icon{
    width:2.4rem;
    height:2.4rem;
    min-width:2.4rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ef233c;
    color:#fff;
    border-radius:8px;
}

.logo-upload-icon i{
    color:#fff !important;
}

.logo-upload-title{
    font-weight:600;
    color:var(--mbiv-text);
    margin-bottom:.2rem;
}

.logo-upload-text{
    color:var(--mbiv-muted);
    font-size:.92rem;
    line-height:1.45;
}

.settings-upload-btn{
    border-radius:8px !important;
    white-space:nowrap;
}

.settings-actions{
    margin-top:1.25rem;
    display:flex;
    justify-content:flex-end;
}

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

    .logo-upload-card{
        flex-direction:column;
        align-items:flex-start;
    }

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

/* settings labels with icons */
.settings-label{
    display:flex;
    align-items:center;
    gap:.55rem;
    margin-bottom:.45rem;
    font-size:.92rem;
    font-weight:600;
    color:var(--mbiv-text);
}

.settings-label i{
    color:#ef233c;
    width:1rem;
    text-align:center;
}

.settings-field{
    height:100%;
}

.settings-input{
    width:100%;
}


.logo-current-wrap{
    margin-top:.9rem;
}

.logo-current-image{
    max-height:56px;
    width:auto;
    display:block;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    padding:.4rem;
    background:#fff;
}


/* header logo + favicon preview */
.header-logo-image{
    max-height:42px;
    width:auto;
    display:block;
}

.favicon-current-image{
    max-height:40px;
    max-width:40px;
    width:auto;
    display:block;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    padding:.35rem;
    background:#fff;
}

/* restore underline inputs */
.settings-input{
    border:none !important;
    border-bottom:2px solid #e5e7eb !important;
    border-radius:0 !important;
    background:transparent !important;
    padding-left:0 !important;
    padding-right:0 !important;
    min-height:2.6rem;
    box-shadow:none !important;
}

.settings-input:focus{
    border-bottom:2px solid #ef233c !important;
    box-shadow:none !important;
    background:transparent !important;
}

.settings-field{
    margin-bottom:.35rem;
}

/* clean separate upload cards */
.logo-upload-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    background:#fff;
    overflow:hidden;
}

.logo-upload-preview{
    display:flex;
    align-items:center;
    gap:.9rem;
    min-width:0;
    flex:1;
}

.logo-upload-preview > div{
    min-width:0;
}

.logo-upload-title{
    font-weight:600;
    color:var(--mbiv-text);
    margin-bottom:.2rem;
}

.logo-upload-text{
    color:var(--mbiv-muted);
    font-size:.92rem;
    line-height:1.45;
}

.logo-current-wrap{
    margin-top:.75rem;
}

.logo-current-image{
    max-height:56px;
    width:auto;
    display:block;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    padding:.4rem;
    background:#fff;
}

.favicon-current-image{
    max-height:40px;
    max-width:40px;
    width:auto;
    display:block;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    padding:.35rem;
    background:#fff;
}

.settings-upload-btn{
    border-radius:8px !important;
    white-space:nowrap;
    flex-shrink:0;
}

@media (max-width: 991.98px){
    .logo-upload-card{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* stronger underline settings inputs */
.admin-settings-panel .settings-input.form-control,
.admin-settings-panel .settings-input{
    border: 0 !important;
    border-bottom: 2px solid #d9dee8 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 2.6rem;
}

.admin-settings-panel .settings-input.form-control:focus,
.admin-settings-panel .settings-input:focus{
    border-bottom-color: #ef233c !important;
    box-shadow: none !important;
    background: transparent !important;
}

.admin-settings-panel .settings-field{
    margin-bottom: .35rem;
}

.logo-upload-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    background:#fff;
}

.logo-upload-preview{
    display:flex;
    align-items:center;
    gap:.9rem;
    flex:1;
    min-width:0;
}

.logo-upload-preview > div{
    min-width:0;
}

.settings-upload-btn{
    flex-shrink:0;
    border-radius:8px !important;
    white-space:nowrap;
}

.logo-current-wrap{
    margin-top:.75rem;
}

.logo-current-image{
    max-height:56px;
    width:auto;
    display:block;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    padding:.4rem;
    background:#fff;
}

.favicon-current-image{
    max-height:40px;
    max-width:40px;
    width:auto;
    display:block;
    border:1px solid rgba(239,35,60,0.15);
    border-radius:8px;
    padding:.35rem;
    background:#fff;
}

.header-logo-image{
    max-height:42px;
    width:auto;
    display:block;
}

@media (max-width: 991.98px){
    .logo-upload-card{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* opening hours page */
.opening-hours-list{
    display:grid;
    gap:1rem;
}

.opening-day-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem;
    border:1px solid rgba(239,35,60,0.12);
    border-radius:8px;
    background:#fff;
}

.opening-day-main{
    display:flex;
    align-items:center;
    gap:1rem;
    min-width:220px;
}

.opening-day-label{
    font-weight:600;
    color:var(--mbiv-text);
}

.opening-day-times{
    display:flex;
    align-items:flex-end;
    gap:1rem;
    flex-wrap:wrap;
}

.opening-day-times.is-disabled{
    opacity:.55;
}

.time-group{
    min-width:140px;
}

.time-label{
    display:block;
    margin-bottom:.4rem;
    font-size:.88rem;
    color:var(--mbiv-muted);
    font-weight:600;
}

.time-input{
    border:1px solid var(--mbiv-border) !important;
    border-radius:8px !important;
    background:#fff !important;
    min-height:2.8rem;
}

.switch{
    position:relative;
    display:inline-block;
    width:54px;
    height:30px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.switch-slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background:#e5e7eb;
    transition:.2s ease;
    border-radius:999px;
}

.switch-slider:before{
    content:"";
    position:absolute;
    height:22px;
    width:22px;
    left:4px;
    top:4px;
    background:#fff;
    transition:.2s ease;
    border-radius:999px;
    box-shadow:0 2px 6px rgba(15,23,42,.12);
}

.switch input:checked + .switch-slider{
    background:#ef233c;
}

.switch input:checked + .switch-slider:before{
    transform:translateX(24px);
}

@media (max-width: 991.98px){
    .opening-day-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .opening-day-times{
        width:100%;
    }

    .time-group{
        flex:1 1 140px;
    }
}

/* system page */
.system-panel,
.system-cache-panel{
    overflow:hidden;
}

.system-settings-list{
    display:grid;
    gap:1rem;
}

.system-setting-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem;
    border:1px solid rgba(239,35,60,0.12);
    border-radius:8px;
    background:#fff;
}

.system-setting-main{
    min-width:0;
}

.system-setting-title{
    margin-bottom:.2rem;
    color:var(--mbiv-text);
    font-weight:600;
}

.system-setting-text{
    margin:0;
    color:var(--mbiv-muted);
    line-height:1.55;
}

.system-cache-list{
    display:grid;
    gap:.6rem;
}

.system-cache-item{
    padding:.65rem .8rem;
    border:1px dashed rgba(15,23,42,0.2);
    border-radius:8px;
    background:#fff;
    color:#596579;
    font-size:.9rem;
    word-break:break-all;
}

@media (max-width: 991.98px){
    .system-setting-row{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* billing pages */
.billing-list{
    display:grid;
    gap:.7rem;
}

.billing-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.9rem 1.05rem;
    border:1px solid rgba(239,35,60,.12);
    border-radius:8px;
    background:#fff;
}

.billing-row-main{
    min-width:0;
}

.billing-row-title{
    color:var(--mbiv-text);
    font-weight:600;
    line-height:1.3;
}

.billing-row-sub{
    color:var(--mbiv-muted);
    font-size:.9rem;
    margin-top:.2rem;
}

.billing-currency-code{
    margin-left:.35rem;
    color:var(--mbiv-muted);
    font-size:.82rem;
    font-weight:700;
}

.billing-row-actions{
    display:flex;
    align-items:center;
    gap:.9rem;
    flex-wrap:wrap;
}

.billing-row--currency .form-check{
    margin:0;
}

@media (max-width: 767.98px){
    .billing-row{
        flex-direction:column;
        align-items:flex-start;
    }
}



/* customers management */
.customers-toolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.customers-page-title{
    margin:0 0 .35rem;
    font-size:1.7rem;
    font-weight:700;
    color:var(--mbiv-text);
}

.customers-page-text{
    margin:0;
    color:var(--mbiv-muted);
    line-height:1.5;
}

.customers-toolbar-actions{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
}

.customers-filters{
    margin-top:1rem;
}

.customer-filter-input{
    min-height:2.9rem;
    border-radius:8px !important;
    border:1px solid var(--mbiv-border);
    background:#fff;
}

.customers-table-wrap{
    width:100%;
    overflow-x:auto;
}

.customers-table thead th{
    font-size:.83rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--mbiv-muted);
    border-bottom:1px solid var(--mbiv-border);
    background:#fff;
    padding:1rem 1.1rem;
}

.customers-table tbody td{
    padding:1rem 1.1rem;
    border-bottom:1px solid #eef1f6;
    vertical-align:middle;
}

.customers-table tbody tr:hover{
    background:#fcfcfe;
}

.customer-name{
    font-weight:600;
    color:var(--mbiv-text);
    margin-bottom:.2rem;
}

.customer-meta{
    color:var(--mbiv-muted);
    font-size:.92rem;
}

@media (max-width: 767.98px){
    .customers-page-title{
        font-size:1.4rem;
    }
}

/* customer crud */
.customer-form-input{
    min-height:3rem;
    border-radius:8px !important;
    border:1px solid var(--mbiv-border);
    background:#fff;
}

.detail-item{
    padding:1rem 1.1rem;
    border:1px solid rgba(239,35,60,0.12);
    border-radius:8px;
    background:#fff;
    height:100%;
}

.detail-item span{
    display:block;
    margin-bottom:.35rem;
    color:var(--mbiv-muted);
    font-size:.9rem;
}

.detail-item strong{
    color:var(--mbiv-text);
    font-weight:600;
}

.linked-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem;
    border-bottom:1px solid #eef1f6;
}

.linked-row:last-child{
    border-bottom:none;
}

.linked-title{
    font-weight:600;
    color:var(--mbiv-text);
}

.linked-sub{
    color:var(--mbiv-muted);
    font-size:.92rem;
    margin-top:.2rem;
}


/* customer form branding */
.customer-line-input.form-control,
.customer-line-input.form-select,
.customer-line-input{
    border:0 !important;
    border-bottom:2px solid #d9dee8 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    min-height:2.75rem;
}

.customer-line-input.form-control:focus,
.customer-line-input.form-select:focus,
.customer-line-input:focus{
    border-bottom-color:#ef233c !important;
    box-shadow:none !important;
    background:transparent !important;
}

.customer-form-panel .settings-label{
    display:flex;
    align-items:center;
    gap:.55rem;
    margin-bottom:.45rem;
    font-size:.92rem;
    font-weight:600;
    color:var(--mbiv-text);
}

.customer-form-panel .settings-label i{
    color:#ef233c;
    width:1rem;
    text-align:center;
}


/* customers list styling */
.customers-table tbody tr:nth-child(odd){
    background:#ffffff;
}

.customers-table tbody tr:nth-child(even){
    background:#fafbff;
}

.customers-table tbody tr:hover{
    background:#f3f6ff;
}

.debtor-link{
    color:#ef233c;
    font-weight:700;
    text-decoration:none;
}

.debtor-link:hover{
    color:#d61f36;
    text-decoration:underline;
}


/* customers list enhanced */
.customers-table tbody tr:nth-child(odd){
    background:#ffffff;
}

.customers-table tbody tr:nth-child(even){
    background:#fafbff;
}

.customers-table tbody tr:hover,
.customers-table tbody tr:focus{
    background:#f3f6ff;
}

.clickable-row{
    cursor:pointer;
}

.debtor-link{
    color:#ef233c;
    font-weight:700;
    text-decoration:none;
}

.debtor-link:hover{
    color:#d61f36;
    text-decoration:underline;
}

.customer-status-badge.done{
    background:#ecfdf5;
    color:#16a34a;
}

.customer-status-badge.pending{
    background:#fff7ed;
    color:#ea580c;
}

.customer-status-badge.open{
    background:#eff6ff;
    color:#2563eb;
}

.customer-status-badge.quote{
    background:#f5f3ff;
    color:#7c3aed;
}


/* spacing between cards */
.customers-toolbar-panel{
    margin-bottom: 24px;
}

/* filter inputs same as settings (underline style) */
.customer-filter-input.form-control,
.customer-filter-input.form-select{
    border: 0 !important;
    border-bottom: 2px solid #d9dee8 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 2.75rem;
}

.customer-filter-input.form-control:focus,
.customer-filter-input.form-select:focus{
    border-bottom-color: #ef233c !important;
    box-shadow: none !important;
}

/* more breathing room for filters */
.customers-filters{
    margin-top: 16px;
}

/* dropdown padding fix */
.customer-filter-input.form-select {
    padding: 10px 12px !important;
    height: auto !important;
    line-height: 1.4;
}

.customer-filter-input.form-select option {
    padding: 10px;
}


/* customer detail page */
.customer-profile-hero{
    overflow:hidden;
}

.customer-profile-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.customer-profile-kicker{
    display:inline-flex;
    padding:.35rem .65rem;
    border-radius:999px;
    background:#fff1f2;
    color:#ef233c;
    font-size:.85rem;
    font-weight:700;
    margin-bottom:.8rem;
}

.customer-profile-title{
    margin:0 0 .3rem;
    font-size:2rem;
    font-weight:700;
    color:var(--mbiv-text);
}

.customer-profile-subtitle{
    margin:0;
    color:var(--mbiv-muted);
    line-height:1.6;
}

.customer-profile-actions{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
}

.detail-list{
    display:grid;
    gap:.75rem;
}

.detail-list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.85rem 0;
    border-bottom:1px solid #eef1f6;
}

.detail-list-row:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.detail-list-row span{
    color:var(--mbiv-muted);
    font-size:.92rem;
}

.detail-list-row strong{
    color:var(--mbiv-text);
    font-weight:600;
    text-align:right;
}

.customer-quick-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.85rem;
}

.customer-quick-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    min-height:116px;
    border:1px solid rgba(239,35,60,.12);
    border-radius:8px;
    text-decoration:none;
    color:var(--mbiv-text);
    background:#fff;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.customer-quick-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(15,23,42,.05);
    border-color:#ef233c;
}

.customer-quick-icon{
    width:2.4rem;
    height:2.4rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ef233c;
    color:#fff;
    border-radius:8px;
}

.customer-quick-icon i{
    color:#fff !important;
}

.account-flag-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:1rem;
}

.account-flag-card{
    border:1px solid rgba(239,35,60,.12);
    border-radius:8px;
    padding:1rem 1.1rem;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:.55rem;
}

.account-flag-label{
    color:var(--mbiv-muted);
    font-size:.9rem;
}

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

@media (max-width: 767.98px){
    .customer-profile-title{
        font-size:1.6rem;
    }

    .customer-quick-grid,
    .account-flag-grid{
        grid-template-columns:1fr;
    }

    .detail-list-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .detail-list-row strong{
        text-align:left;
    }
}


/* customer detail info list compact + striped */
.detail-list{
    display:grid;
    gap:0;
    overflow:hidden;
    border-radius:8px;
}

.detail-list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:10px 14px;
    border-bottom:1px solid #eef1f6;
    transition:background-color .18s ease;
}

.detail-list-row:nth-child(odd){
    background:#ffffff;
}

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

.detail-list-row:hover{
    background:#f3f6ff;
}

.detail-list-row:last-child{
    border-bottom:none;
}

.detail-list-row span{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--mbiv-muted);
    font-size:.92rem;
}

.detail-list-row span i{
    width:22px;
    height:22px;
    min-width:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ef233c;
    color:#fff !important;
    border-radius:6px;
    font-size:11px;
}

.detail-list-row strong{
    color:var(--mbiv-text);
    font-weight:600;
    text-align:right;
}


/* customer detail tabs + timeline */
.customer-tabs-bar{
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
    margin-bottom:1rem;
}

.customer-tab{
    display:inline-flex;
    align-items:center;
    padding:.7rem 1rem;
    border:1px solid rgba(239,35,60,.12);
    border-radius:8px;
    background:#fff;
    color:var(--mbiv-text);
    text-decoration:none;
    font-weight:600;
    transition:all .18s ease;
}

.customer-tab:hover,
.customer-tab.active{
    border-color:#ef233c;
    color:#ef233c;
    background:#fff5f6;
}

.detail-list{
    overflow:hidden;
    border-radius:8px;
}

.detail-list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-bottom:1px solid #eef1f6;
    transition:background-color .18s ease;
}

.detail-list-row > span,
.detail-list-row > strong{
    padding:12px 16px;
}

.detail-list-row:nth-child(odd){
    background:#ffffff;
}

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

.detail-list-row:hover{
    background:#eef3ff;
}

.detail-list-row:last-child{
    border-bottom:none;
}

.detail-list-row span{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--mbiv-muted);
    font-size:.92rem;
    padding-left:10px;
}

.detail-list-row span i{
    width:26px;
    height:26px;
    min-width:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ef233c;
    color:#fff !important;
    border-radius:6px;
    font-size:12px;
    margin-left:-4px;
}

.detail-list-row strong{
    color:var(--mbiv-text);
    font-weight:600;
    text-align:right;
}

.customer-timeline{
    display:grid;
    gap:1rem;
}

.timeline-item{
    position:relative;
    display:grid;
    grid-template-columns:24px 1fr;
    gap:1rem;
}

.timeline-dot{
    width:12px;
    height:12px;
    border-radius:999px;
    background:#ef233c;
    margin-top:.45rem;
    box-shadow:0 0 0 5px rgba(239,35,60,.12);
}

.timeline-content{
    padding:0 0 1rem;
    border-bottom:1px solid #eef1f6;
}

.timeline-item:last-child .timeline-content{
    border-bottom:none;
    padding-bottom:0;
}

.timeline-date{
    color:var(--mbiv-muted);
    font-size:.85rem;
    margin-bottom:.25rem;
}

.timeline-title{
    font-weight:700;
    color:var(--mbiv-text);
    margin-bottom:.2rem;
}

.timeline-text{
    color:var(--mbiv-muted);
    line-height:1.55;
}

@media (max-width: 767.98px){
    .detail-list-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .detail-list-row > span,
    .detail-list-row > strong{
        padding:10px 12px;
    }

    .detail-list-row strong{
        text-align:left;
    }
}


/* customer tabs card */
.customer-tabs-card{
    overflow:hidden;
}

.customer-tabs-wrap{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:.85rem;
}

.customer-tab{
    display:flex;
    align-items:center;
    gap:.75rem;
    min-height:60px;
    padding:.95rem 1rem;
    border:1px solid rgba(239,35,60,.12);
    border-radius:10px;
    background:#fff;
    color:var(--mbiv-text);
    text-decoration:none;
    font-weight:600;
    transition:all .18s ease;
}

.customer-tab:hover,
.customer-tab.active{
    border-color:#ef233c;
    color:#ef233c;
    background:#fff5f6;
    box-shadow:0 8px 18px rgba(15,23,42,.05);
    transform:translateY(-1px);
}

.customer-tab-icon{
    width:2.15rem;
    height:2.15rem;
    min-width:2.15rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ef233c;
    border-radius:8px;
}

.customer-tab-icon i{
    color:#fff !important;
    font-size:.9rem;
}

@media (max-width: 1199.98px){
    .customer-tabs-wrap{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px){
    .customer-tabs-wrap{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .customer-tab{
        min-height:56px;
        padding:.85rem .9rem;
    }
}



    .linked-row{
        padding:10px 14px;
        min-height:64px;
    }
}


.linked-panel{
    height:100%;
    overflow:hidden;
}

/* compact customer info rows */
.customer-info-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px !important;
    min-height:48px !important;
}

.customer-info-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.customer-info-icon{
    width:28px;
    height:28px;
}

.customer-info-title{
    font-size:14px;
}

.customer-info-value{
    font-size:14px;
    font-weight:600;
}

.customer-info-row:hover{
    background:#f7f9fc;
}


/* compact detail list rows */
.detail-list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 14px !important;
    min-height:42px !important;
    border-bottom:1px solid #eef1f6;
}

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

.detail-list-row:nth-child(odd){
    background:#ffffff;
}

.detail-list-row:hover{
    background:#eef3ff;
}

.detail-list-icon{
    width:26px;
    height:26px;
}

.detail-list-title{
    font-size:13.5px;
}

.detail-list-value{
    font-size:13.5px;
    font-weight:600;
}


/* FORCE compacte klant rows */
.detail-list-row,
.customer-info-row,
.card .detail-list-row {
    padding: 6px 12px !important;
    min-height: 36px !important;
    height: 36px !important;
}

.detail-list-row > div,
.customer-info-row > div {
    line-height: 1.2 !important;
}

.detail-list-icon,
.customer-info-icon {
    width: 24px !important;
    height: 24px !important;
}

.detail-list-title,
.customer-info-title {
    font-size: 13px !important;
}

.detail-list-value,
.customer-info-value {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.py-3 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}


/* customer info row height tuned */
.detail-list-row,
.customer-info-row,
.card .detail-list-row {
    padding: 10px 12px !important;
    min-height: 40px !important;
    height: 40px !important;
}

.detail-list-row span i{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
}

.customer-info-actions .btn{
    min-height:44px;
    border-radius:8px;
}

/* customer linked cards pagination */
.linked-row-rich{
    gap:1rem;
}

.linked-main{
    display:flex;
    align-items:center;
    gap:.9rem;
    min-width:0;
}

.linked-row-icon{
    width:2.2rem;
    height:2.2rem;
    min-width:2.2rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#fff1f2;
    color:#ef233c;
    box-shadow:inset 0 0 0 1px rgba(239,35,60,.08);
}

.linked-row-icon i{
    font-size:.95rem;
}

.customer-linked-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-top:1.25rem;
    padding-top:.25rem;
}

.customer-page-btn{
    min-width:122px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
}

.customer-page-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.customer-page-indicator{
    color:var(--mbiv-muted);
    font-weight:600;
    text-align:center;
}

@media (max-width: 767.98px){
    .linked-row-rich{
        align-items:flex-start;
    }

    .linked-main{
        width:100%;
    }

    .customer-linked-pagination{
        flex-direction:column;
    }

    .customer-page-btn,
    .customer-page-indicator{
        width:100%;
    }
}


/* enhanced status pills for customer linked cards */
.linked-row-rich{
    align-items:center;
}

.linked-status-wrap{
    margin-left:auto;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-shrink:0;
}

.status-pill{
    --pill-bg:#f3f4f6;
    --pill-text:#374151;
    --pill-border:rgba(148,163,184,.25);
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:.45rem;
    min-height:32px;
    padding:.4rem .75rem;
    border-radius:999px;
    border:1px solid var(--pill-border);
    background:var(--pill-bg);
    color:var(--pill-text);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
    text-align:right;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    cursor:default;
}

.status-pill i{
    font-size:.78rem;
}

.status-pill:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(15,23,42,.08);
    filter:saturate(1.05);
}

.status-pill::after{
    content:attr(data-tooltip);
    position:absolute;
    right:0;
    bottom:calc(100% + 10px);
    width:max-content;
    max-width:240px;
    padding:.55rem .7rem;
    border-radius:10px;
    background:#0f172a;
    color:#fff;
    font-size:.76rem;
    font-weight:600;
    line-height:1.4;
    white-space:normal;
    text-align:left;
    box-shadow:0 12px 28px rgba(15,23,42,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    pointer-events:none;
    z-index:20;
}

.status-pill::before{
    content:'';
    position:absolute;
    right:16px;
    bottom:calc(100% + 4px);
    width:10px;
    height:10px;
    background:#0f172a;
    transform:rotate(45deg);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:19;
}

.status-pill:hover::after,
.status-pill:hover::before{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.status-pill--neutral{
    --pill-bg:#f8fafc;
    --pill-text:#475569;
    --pill-border:rgba(148,163,184,.28);
}

.status-pill--success{
    --pill-bg:#ecfdf5;
    --pill-text:#15803d;
    --pill-border:rgba(34,197,94,.24);
}

.status-pill--warning{
    --pill-bg:#fff7ed;
    --pill-text:#c2410c;
    --pill-border:rgba(249,115,22,.24);
}

.status-pill--danger{
    --pill-bg:#fef2f2;
    --pill-text:#dc2626;
    --pill-border:rgba(239,68,68,.24);
}

.status-pill--info{
    --pill-bg:#eff6ff;
    --pill-text:#2563eb;
    --pill-border:rgba(59,130,246,.24);
}

.status-pill--purple{
    --pill-bg:#f5f3ff;
    --pill-text:#7c3aed;
    --pill-border:rgba(139,92,246,.24);
}

@media (max-width: 767.98px){
    .linked-row-rich{
        gap:.75rem;
    }

    .linked-status-wrap{
        width:100%;
    }

    .status-pill{
        width:100%;
        justify-content:center;
    }

    .status-pill::after{
        right:auto;
        left:0;
        max-width:min(240px, calc(100vw - 64px));
    }

    .status-pill::before{
        right:auto;
        left:18px;
    }
}



/* customer detail fixes */
.linked-panel{
    height:100%;
    overflow:hidden;
}

.detail-list-row,
.customer-info-row,
.card .detail-list-row{
    min-height:46px !important;
    height:46px !important;
    padding:10px 14px !important;
}

.customer-pagination-card{
    margin-top:1.25rem;
    border:1px solid rgba(15,23,42,.08);
    border-radius:12px;
    background:#fff;
}

.customer-pagination-card .card-body{
    padding:1rem 1.1rem;
}

.customer-linked-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-top:0;
    padding-top:0;
}

.customer-page-btn{
    min-width:122px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
}

.customer-page-indicator{
    color:var(--mbiv-muted);
    font-weight:600;
    text-align:center;
}

/* clickable linked rows only */
.linked-row-action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    width:100%;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    position:relative;
}

.linked-row-action:hover,
.linked-row-action:focus{
    text-decoration:none;
    color:inherit;
}

.linked-row-action:focus-visible{
    outline:none;
    box-shadow:inset 0 0 0 1px rgba(239,35,60,.18);
}

/* dashboard-like hover only on linked cards */
.linked-panel .linked-row{
    position:relative;
    transition:background-color .18s ease;
}

.linked-panel .linked-row::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0;
    background:#ef233c;
    transition:width .18s ease, opacity .18s ease;
    opacity:0;
}

.linked-panel .linked-row:hover{
    background:#f8fafc !important;
}

.linked-panel .linked-row:hover::before{
    width:4px;
    opacity:1;
}

/* remove long card hover borders */
.customer-sidebar-panel,
.linked-panel,
.customer-detail-accent-card{
    border:1px solid rgba(239,35,60,.12) !important;
    border-left:1px solid rgba(239,35,60,.12) !important;
    box-shadow:none;
    transform:none;
}

.customer-sidebar-panel:hover,
.linked-panel:hover,
.customer-detail-accent-card:hover{
    border:1px solid rgba(239,35,60,.12) !important;
    border-left:1px solid rgba(239,35,60,.12) !important;
    box-shadow:none !important;
    transform:none !important;
}

/* no hover accent on klantinformatie rows */
.detail-list-row::before{
    display:none !important;
}

.detail-list-row:hover{
    background:#eef3ff;
}

@media (max-width: 767.98px){
    .customer-linked-pagination{
        flex-direction:column;
    }

    .customer-page-btn,
    .customer-page-indicator{
        width:100%;
    }
}


/* enhanced customer timeline */
.customer-timeline-enhanced{
    display:grid;
    gap:0;
    padding:.35rem 0;
}

.customer-timeline-enhanced .timeline-item{
    position:relative;
    display:grid;
    grid-template-columns:30px 1fr;
    gap:1rem;
    padding:1.1rem 1rem 1.1rem .9rem;
    margin:0;
    border-bottom:1px solid #eef1f6;
    transition:background-color .18s ease;
}

.customer-timeline-enhanced .timeline-item:last-child{
    border-bottom:none;
}

.customer-timeline-enhanced .timeline-item:hover{
    background:#fafcff;
}

.customer-timeline-enhanced .timeline-item::before{
    content:"";
    position:absolute;
    left:14px;
    top:0;
    bottom:0;
    width:2px;
    background:linear-gradient(180deg, rgba(239,35,60,.18), rgba(239,35,60,.08));
}

.customer-timeline-enhanced .timeline-item:first-child::before{
    top:24px;
}

.customer-timeline-enhanced .timeline-item:last-child::before{
    bottom:24px;
}

.customer-timeline-enhanced .timeline-dot{
    position:relative;
    z-index:1;
    width:14px;
    height:14px;
    margin-top:.35rem;
    border-radius:999px;
    background:#ef233c;
    border:4px solid #ffe5e8;
    box-shadow:0 0 0 3px #fff;
}

.customer-timeline-enhanced .timeline-content{
    min-width:0;
    padding-right:.25rem;
}

.customer-timeline-enhanced .timeline-date{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin-bottom:.45rem;
    color:#7b8798;
    font-size:.84rem;
    font-weight:600;
    letter-spacing:.01em;
}

.customer-timeline-enhanced .timeline-title{
    margin-bottom:.3rem;
    color:#14213d;
    font-size:1.12rem;
    font-weight:700;
    line-height:1.3;
}

.customer-timeline-enhanced .timeline-text{
    color:#334155;
    font-size:1rem;
    line-height:1.6;
    max-width:34ch;
}

@media (max-width: 767.98px){
    .customer-timeline-enhanced .timeline-item{
        grid-template-columns:24px 1fr;
        gap:.85rem;
        padding:1rem .85rem 1rem .75rem;
    }

    .customer-timeline-enhanced .timeline-item::before{
        left:11px;
    }

    .customer-timeline-enhanced .timeline-title{
        font-size:1rem;
    }

    .customer-timeline-enhanced .timeline-text{
        font-size:.95rem;
        max-width:none;
    }
}

/* tickets */
.tickets-toolbar-panel{
    margin-bottom:24px;
}

.ticket-textarea{
    min-height:140px;
    border:1px solid var(--mbiv-border) !important;
    border-radius:8px !important;
    background:#fff !important;
    padding:12px 14px !important;
}

.ticket-meta-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:.85rem;
}

.ticket-meta-item{
    padding:.1rem 0;
    border:0;
    background:transparent;
    min-width:0;
}

.ticket-meta-item span{
    display:block;
    margin-bottom:.35rem;
    font-size:.85rem;
    font-weight:600;
    color:var(--mbiv-muted);
}

.ticket-meta-item strong{
    display:block;
    min-height:2.75rem;
    padding:.35rem 0 .55rem;
    border-bottom:2px solid #d9dee8;
    color:var(--mbiv-text);
    font-weight:600;
    line-height:1.35;
    word-break:break-word;
}

.ticket-meta-item-wide{
    grid-column:span 2;
}

.ticket-thread{
    display:grid;
    gap:.85rem;
}

.ticket-message{
    padding:1rem 1.1rem;
    border:1px solid rgba(15,23,42,.09);
    border-radius:8px;
    background:#fff;
}

.ticket-message.is-mine{
    border-color:rgba(239,35,60,.25);
    background:#fff8f9;
}

.ticket-message-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
    margin-bottom:.55rem;
}

.ticket-message-author{
    font-weight:700;
    color:var(--mbiv-text);
}

.ticket-message-date{
    color:var(--mbiv-muted);
    font-size:.85rem;
    white-space:nowrap;
}

.ticket-message-body{
    color:#334155;
    line-height:1.6;
    white-space:pre-wrap;
    word-break:break-word;
}

.ticket-message-attachment{
    margin-top:.6rem;
}

.ticket-message-attachment a{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    text-decoration:none;
    font-weight:600;
    color:#2563eb;
}

.ticket-message-attachment a:hover{
    text-decoration:underline;
}

.ticket-status-form{
    padding-top:.35rem;
}

.ticket-status-select{
    width:260px;
}

.ticket-admin-actions{
    margin-top:1rem;
    display:grid;
    gap:.85rem;
}

.ticket-action-card{
    border:1px solid rgba(239,35,60,.12);
    border-radius:10px;
    background:#fff;
    padding:1rem 1.1rem;
}

.ticket-action-title{
    margin:0 0 .8rem;
    font-size:1rem;
    font-weight:700;
    color:var(--mbiv-text);
    display:flex;
    align-items:center;
    gap:.55rem;
}

.ticket-action-title i{
    color:#ef233c;
}

.ticket-action-grid{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:.7rem;
    align-items:end;
}

.ticket-action-row{
    display:flex;
    align-items:flex-end;
    gap:.7rem;
    flex-wrap:wrap;
}

.ticket-action-field{
    min-width:220px;
    flex:1;
}

.ticket-action-field label{
    display:block;
    margin-bottom:.35rem;
    font-size:.85rem;
    font-weight:600;
    color:var(--mbiv-muted);
}

.ticket-form-select.form-select{
    min-height:2.75rem;
    border:1px solid var(--mbiv-border) !important;
    border-radius:8px !important;
    background:#fff !important;
    box-shadow:none !important;
    padding:.45rem .75rem !important;
}

.ticket-form-select.form-select:focus{
    border-color:#ef233c !important;
    box-shadow:0 0 0 .15rem rgba(239,35,60,.1) !important;
}

.ticket-action-submit{
    display:flex;
    align-items:flex-end;
}

.ticket-action-buttons{
    display:flex;
    gap:.55rem;
    align-items:flex-end;
    flex-wrap:wrap;
}

.ticket-thread-forum{
    gap:1rem;
}

.ticket-post{
    display:grid;
    grid-template-columns:190px 1fr;
    border:1px solid rgba(15,23,42,.1);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
}

.ticket-post.is-mine{
    border-color:rgba(239,35,60,.25);
}

.ticket-post-author{
    background:#1497cf;
    color:#fff;
    padding:1rem .9rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.55rem;
}

.ticket-post-avatar{
    width:86px;
    height:86px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.92);
    background:#17c7bf;
    color:#062436;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    font-weight:700;
    letter-spacing:.02em;
}

.ticket-post-author-name{
    font-size:1.25rem;
    font-weight:700;
    line-height:1.2;
}

.ticket-post-role{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    border-radius:5px;
    padding:.08rem .45rem;
    font-size:.76rem;
    font-weight:700;
    background:rgba(15,23,42,.35);
    color:#fff;
}

.ticket-post-role--admin{
    background:rgba(127,29,29,.42);
}

.ticket-post-role--medewerker{
    background:rgba(20,83,45,.42);
}

.ticket-post-role--klant{
    background:rgba(30,58,138,.42);
}

.ticket-post-stats{
    margin-top:.15rem;
    width:100%;
    display:grid;
    gap:.28rem;
}

.ticket-post-stat-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    font-size:.82rem;
}

.ticket-post-stat-row span{
    color:rgba(255,255,255,.92);
    text-align:left;
}

.ticket-post-stat-row strong{
    color:#fff;
    font-weight:700;
}

.ticket-post-content{
    padding:1rem 1.1rem;
    background:#fff;
}

.ticket-post-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
    margin-bottom:.95rem;
    color:#6b7280;
    font-size:.92rem;
}

.ticket-post-id{
    font-weight:700;
    color:#334155;
}

.ticket-post-body{
    color:#1f2937;
    line-height:1.7;
    font-size:1.02rem;
    white-space:pre-wrap;
    word-break:break-word;
}

.ticket-post-attachment{
    margin-top:.8rem;
}

.ticket-post-attachment a{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    text-decoration:none;
    font-weight:600;
    color:#2563eb;
}

.ticket-post-attachment a:hover{
    text-decoration:underline;
}

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

    .ticket-meta-item-wide{
        grid-column:span 2;
    }
}

@media (max-width: 767.98px){
    .ticket-meta-grid{
        grid-template-columns:1fr;
    }

    .ticket-meta-item-wide{
        grid-column:span 1;
    }

    .ticket-message-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .ticket-status-select{
        width:100%;
    }

    .ticket-action-grid{
        grid-template-columns:1fr;
    }

    .ticket-action-submit .btn{
        width:100%;
    }

    .ticket-action-buttons{
        width:100%;
    }

    .ticket-action-buttons .btn{
        width:100%;
    }

    .ticket-post{
        grid-template-columns:1fr;
    }

    .ticket-post-author{
        align-items:flex-start;
        text-align:left;
    }

    .ticket-post-avatar{
        width:62px;
        height:62px;
        font-size:1.55rem;
    }

    .ticket-post-author-name{
        font-size:1.05rem;
    }

    .ticket-post-stats{
        max-width:320px;
    }

    .ticket-post-body{
        font-size:1rem;
    }
}




/* final layout system */
:root{
    --site-max-width:1280px;
    --site-shell-padding:16px;
}

html,
body{
    overflow-x:hidden;
}

.app-root{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    width:100%;
}

main.page{
    flex:1 0 auto;
    width:100%;
}

.site-shell{
    width:min(var(--site-max-width), calc(100vw - (var(--site-shell-padding) * 2)));
    max-width:var(--site-max-width);
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}

.app-shell{
    display:flex;
    min-height:100vh;
    width:100%;
}

.app-shell.has-sidebar .app-content{
    padding-left:90px;
}

.app-content{
    flex:1 1 auto;
    min-width:0;
    width:100%;
}

.app-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:72px;
    background:#e30613;
    color:#ffffff;
    z-index:600;
    display:flex;
    align-items:stretch;
    border-right:1px solid rgba(255,255,255,.1);
}

.app-sidebar--rail{
    display:flex;
}

.sidebar-rail{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:16px 10px;
    position:relative;
    z-index:1;
}

.sidebar-rail-nav{
    width:100%;
}

.sidebar-brand{
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sidebar-brand-badge{
    width:38px;
    height:38px;
    border-radius:12px;
    background:rgba(255, 255, 255, .12);
    color:#ffffff;
    font-weight:700;
    letter-spacing:.04em;
    display:grid;
    place-items:center;
    font-size:13px;
    text-transform:uppercase;
}

.sidebar-rail-nav{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
}


.rail-link{
    width:100%;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    color:#ffffff;
    border:1px solid transparent;
    background:rgba(255,255,255,.08);
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rail-link i{
    font-size:14px;
}

.rail-link:hover,
.rail-link:focus,
.rail-link.is-active{
    color:#ffffff;
    background:rgba(255,255,255,.08);
    border-color:transparent;
    box-shadow:none;
    transform:none;
}

.rail-link--ghost{
    border-color:rgba(255,255,255,.18);
}

.rail-divider{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.18);
}

.rail-separator{
    width:calc(100% + 20px);
    height:1px;
    background:rgba(255,255,255,.3);
    border-radius:999px;
    display:block;
    align-self:stretch;
    margin-left:-10px;
    margin-right:-10px;
}

.sidebar-panel{
    position:fixed;
    left:72px;
    top:7%;
    transform:none;
    height:auto;
    width:260px;
    min-height:320px;
    background:#b5000d;
    border-radius:0 12px 12px 0;
    border:1px solid rgba(255,255,255,.12);
    border-left:0;
    box-shadow:none;
    padding:16px 18px;
    opacity:0;
    pointer-events:none;
    z-index:850;
}

.sidebar-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        135deg,
        rgba(255,255,255,.06) 0,
        rgba(255,255,255,.06) 14px,
        rgba(255,255,255,0) 14px,
        rgba(255,255,255,0) 28px
    );
    border-radius:0 12px 12px 0;
    pointer-events:none;
}

.sidebar-panel.is-open{
    opacity:1;
    pointer-events:auto;
}

.sidebar-panel-inner{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative;
    z-index:1;
}

.panel-section{
    display:none;
}

.panel-section.is-active{
    display:block;
}

.panel-title{
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#ffffff;
    margin-bottom:8px;
    margin-left:-18px;
    margin-right:-18px;
    padding:4px 18px 8px 20px;
    border-bottom:1px solid rgba(255,255,255,.2);
}

.panel-link{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:8px;
    color:#ffffff;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    background:transparent;
    border:1px solid transparent;
    border-radius:0;
    margin-left:-18px;
    margin-right:-18px;
    padding-left:20px;
    padding-right:18px;
}

.panel-link:hover,
.panel-link:focus{
    background:rgba(255,255,255,.16);
}

.panel-link:nth-of-type(even){
    background:rgba(0,0,0,.12);
}

.panel-link i{
    width:16px;
    text-align:center;
    font-size:13px;
    color:#ffffff;
    opacity:.95;
}

@media (max-width: 991px){
    .sidebar-panel{
        display:none;
    }
}

.rail-spacer{
    flex:1 1 auto;
}

.rail-logout{
    margin:0;
}


@media (max-width: 991px){
    .app-shell.has-sidebar .app-content{
        padding-left:0;
        padding-bottom:96px;
    }

    .app-sidebar{
        width:100%;
        height:84px;
        bottom:0;
        top:auto;
        border-right:0;
        border-top:1px solid rgba(255,255,255,.08);
    }

    .sidebar-rail{
        width:100%;
        flex-direction:row;
        justify-content:space-between;
        padding:12px 16px;
    }

    .sidebar-rail-nav{
        flex-direction:row;
        gap:8px;
    }

    .rail-divider,
    .rail-spacer{
        display:none;
    }

}

.site-shell--header,
.site-shell--footer{
    padding-left:var(--site-shell-padding);
    padding-right:var(--site-shell-padding);
}

.app-main-shell{
    padding-left:0;
    padding-right:0;
}

.top-contact,
.main-nav,
.site-footer{
    background:transparent !important;
    border:0 !important;
    margin:0 !important;
}

.top-contact > .topbar-shell.site-shell.site-shell--header{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:42px;
    height:42px;
    background:#0a1236;
    color:#ffffff;
    overflow:hidden;
}

.top-contact .topbar-col{
    display:flex;
    align-items:center;
    min-width:0;
}

.top-contact .topbar-col-left{
    justify-content:flex-start;
    gap:18px;
    flex:1 1 auto;
}

.top-contact .topbar-col-center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    pointer-events:none;
}

.top-contact .topbar-col-right{
    justify-content:flex-end;
    gap:14px;
    flex:0 0 auto;
    margin-left:auto;
}

.top-contact .topbar-item{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#ffffff;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
}

.top-contact .topbar-item:hover{
    color:#ffffff;
    opacity:.92;
    text-decoration:none;
}

.top-contact .topbar-item i,
.top-contact .topbar-social i{
    font-size:12px;
    line-height:1;
}

.top-contact .topbar-message{
    color:#ffffff;
    font-size:13px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.top-contact .topbar-message strong{
    color:#f5a623;
    font-weight:800;
}

.top-contact .topbar-social{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    text-decoration:none;
    opacity:.92;
}

.top-contact .topbar-social:hover{
    color:#ffffff;
    opacity:1;
}

.main-nav{
    z-index:500;
    position:relative;
}

.main-nav > .site-shell.site-shell--header{
    background:#ffffff;
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

.main-nav .navbar,
.main-nav .navbar-collapse,
.main-nav .navbar-nav,
.main-nav .nav-item,
.main-nav .site-shell{
    overflow:visible;
}

.main-nav .navbar,
.main-nav .navbar-collapse,
.main-nav .site-shell{
    position:relative;
}

.main-nav .navbar{
    min-height:58px;
    padding:10px 0;
    gap:16px;
}

.main-nav .navbar-brand{
    margin-right:0;
    padding:0;
}

.main-nav .nav-icons{
    margin-left:auto;
    flex:0 0 auto;
    justify-content:flex-end;
}

.main-nav .dropdown.mega{
    position:static;
}

.main-nav .dropdown-menu{
    z-index:99999;
}

.main-nav .user-dropdown .dropdown-menu{
    right:0;
    left:auto;
    min-width:220px;
    top:calc(100% + 8px);
}

.main-nav .dropdown.mega .dropdown-menu,
.main-nav .mega-menu{
    width:min(var(--site-max-width), calc(100vw - (var(--site-shell-padding) * 2)));
    left:50%;
    right:auto;
    transform:translateX(-50%);
    top:calc(100% + 8px);
    margin-top:0;
    padding:20px 24px 22px;
    border-radius:0 0 12px 12px;
    background:#ffffff;
    box-shadow:0 12px 30px rgba(15,23,42,.12);
    border:1px solid rgba(15,23,42,.08);
}

.main-nav .mega-menu .row{
    align-items:start;
}

.main-nav .mega-desc-col{
    padding-right:28px;
}

.main-nav .mega-links{
    padding-left:8px;
}

.main-nav .mega-tiles{
    gap:12px;
}

.main-nav .mega-tile{
    min-height:54px;
}

.header-logo-image{
    display:block;
    width:auto;
    max-height:44px;
    object-fit:contain;
}

.site-footer{
    margin-top:auto;
    border-top:1px solid #e6e9ef;
    background:#ffffff;
}

.site-footer > .site-shell.site-shell--footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 0;
    color:#6d758a;
    font-size:12px;
}

.footer-inner{
    width:100%;
}

.footer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    color:#1f2230;
}

.footer-brand span{
    color:#6d758a;
}

.footer-meta{
    display:flex;
    align-items:center;
    gap:16px;
    color:#6d758a;
}

@media (max-width: 768px){
    .site-footer > .site-shell.site-shell--footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }
}

.nav-link.active,
.nav-link[aria-current="page"],
.admin-link.active{
    color:var(--red);
}

.nav-link.active{
    font-weight:600;
}

.app-toast-stack{
    position:fixed;
    top:16px;
    right:16px;
    z-index:1200;
    display:grid;
    gap:10px;
    width:min(360px, calc(100vw - 24px));
}

.app-toast{
    border:1px solid rgba(15,23,42,.12);
    border-radius:10px;
    box-shadow:0 12px 26px rgba(15,23,42,.16);
    background:#fff;
    overflow:hidden;
}

.app-toast-header{
    border-bottom:1px solid rgba(15,23,42,.08);
    background:rgba(248,250,252,.88);
}

.app-toast-body{
    color:#0f172a;
    line-height:1.5;
}

.app-toast--success{
    border-left:4px solid #16a34a;
}

.app-toast--danger{
    border-left:4px solid #dc2626;
}

.app-toast--warning{
    border-left:4px solid #d97706;
}

.app-toast--info{
    border-left:4px solid #2563eb;
}

.impersonation-stop-btn{
    min-height:36px;
    border-radius:8px;
}

main.page > .site-shell.app-main-shell > .stats,
main.page > .site-shell.app-main-shell > .customers-toolbar-panel,
main.page > .site-shell.app-main-shell > .customers-table-panel{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
}

/* projects, quotes, invoices */
.project-running-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.9rem 1rem;
    border:1px solid rgba(37,99,235,.2);
    border-radius:8px;
    background:#eff6ff;
    margin-bottom:1rem;
    flex-wrap:wrap;
}

.project-running-main{
    color:#1e293b;
}

.project-inline-form{
    height:100%;
    border:1px solid rgba(239,35,60,.12);
    border-radius:8px;
    padding:1rem 1rem .9rem;
    background:#fff;
}

.project-footer-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-top:1px solid var(--border);
    background:#fff;
    flex-wrap:wrap;
}

.project-footer-text{
    color:var(--muted);
}

.line-action-icon-btn{
    width:34px;
    min-width:34px;
    height:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

@media (max-width:991.98px){
    .main-nav .dropdown.mega .dropdown-menu,
    .main-nav .mega-menu{
        width:calc(100vw - 24px);
        max-width:calc(100vw - 24px);
        padding:16px;
    }

    .top-contact > .topbar-shell.site-shell.site-shell--header{
        min-height:auto;
        height:auto;
        padding-top:8px;
        padding-bottom:8px;
        flex-wrap:wrap;
        row-gap:8px;
    }

    .top-contact .topbar-col-left,
    .top-contact .topbar-col-right{
        flex:1 1 100%;
        justify-content:center;
    }

    .top-contact .topbar-col-center{
        position:static;
        transform:none;
        order:-1;
        width:100%;
    }
}

@media (max-width:767.98px){
    :root{
        --site-shell-padding:12px;
    }

    .site-footer > .site-shell.site-shell--footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .app-toast-stack{
        top:12px;
        right:12px;
    }
}

.letterhead-current-image{
    width:100%;
    max-width:320px;
    height:auto;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
}



#panel-billing .panel-title {
    display: block;
}

/* domain provider toggle */
.domain-safe-providers{
    display:grid;
    gap:1rem;
}

.domain-safe-provider{
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    padding:1rem 1.1rem;
}

.domain-safe-provider__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom:.45rem;
}

.domain-safe-provider__meta{
    display:grid;
    gap:.12rem;
}

.domain-safe-provider__title{
    font-weight:700;
    color:var(--text);
}

.domain-safe-provider__subtitle{
    color:var(--muted);
    font-size:.86rem;
}

.domain-safe-provider__controls{
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-left:auto;
}

.domain-safe-toggle-form{
    margin:0;
}

.domain-safe-settings-link{
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid var(--border);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:var(--text);
    background:#fff;
}

.domain-safe-settings-link:hover{
    color:var(--red);
    border-color:#f1c0c4;
}

.domain-safe-toggle{
    position:relative;
    display:inline-block;
    width:50px;
    height:28px;
    cursor:pointer;
}

.domain-safe-toggle input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
}

.domain-safe-toggle__track{
    position:absolute;
    inset:0;
    border-radius:999px;
    background:#e6e9f1;
    border:1px solid #d7ddea;
    transition:background .18s ease, border-color .18s ease;
}

.domain-safe-toggle__track::after{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 6px rgba(15,23,42,.18);
    transition:transform .18s ease;
}

.domain-safe-toggle input:checked + .domain-safe-toggle__track{
    background:var(--red);
    border-color:var(--red);
}

.domain-safe-toggle input:checked + .domain-safe-toggle__track::after{
    transform:translateX(22px);
}

.domain-safe-toggle input:focus-visible + .domain-safe-toggle__track{
    box-shadow:0 0 0 .2rem rgba(227,6,19,.15);
}

@media (max-width: 767.98px){
    .domain-safe-provider__head{
        align-items:flex-start;
    }

    .domain-safe-provider__controls{
        margin-left:0;
    }
}

.domain-safe-hero{
    border-radius:12px;
    border:1px solid #f0d6d8;
    background:linear-gradient(180deg,#fff8f8 0%,#fff 100%);
}

.domain-safe-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:#fff;
    color:var(--red);
    border:1px solid #f0d6d8;
    border-radius:999px;
    padding:.4rem .75rem;
    font-size:.84rem;
    font-weight:700;
    margin-bottom:.9rem;
}

.domain-safe-head{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(260px,.9fr);
    gap:1rem;
    align-items:start;
}

.domain-safe-highlight{
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    padding:1rem;
}

.domain-safe-highlight__label{
    color:var(--muted);
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:700;
    margin-bottom:.55rem;
}

.domain-safe-highlight__value{
    color:var(--text);
    font-size:1.4rem;
    font-weight:800;
    line-height:1.15;
    margin-bottom:.3rem;
}

.domain-safe-highlight__meta{
    color:var(--muted);
    font-size:.88rem;
}

.domain-safe-subtitle{
    color:var(--muted);
    font-size:.84rem;
    font-weight:600;
}

.domain-safe-provider--compact{
    padding:1rem 1.1rem;
}

.domain-safe-provider__meta--rich{
    display:flex;
    align-items:center;
    gap:.8rem;
    flex-wrap:wrap;
}

.domain-safe-provider__icon{
    width:38px;
    height:38px;
    border-radius:10px;
    background:rgba(227,6,19,.1);
    color:var(--red);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.domain-safe-check{
    display:flex;
    align-items:center;
    gap:.6rem;
    width:100%;
    min-height:44px;
    border:1px solid var(--border);
    border-radius:10px;
    padding:.7rem .9rem;
    background:#fafbfe;
    color:var(--text);
    font-weight:600;
}

.domain-safe-switch{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    min-height:44px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#f7f8fc;
    padding:.4rem .8rem;
    font-weight:700;
}

.domain-safe-switch input[type="checkbox"]{
    accent-color:var(--red);
}

.domain-safe-provider__actions{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
}

.domain-safe-table thead th{
    white-space:nowrap;
    font-size:.74rem;
    letter-spacing:.03em;
    padding:.78rem .9rem;
}

.domain-safe-table tbody td{
    font-size:.86rem;
    padding:.78rem .9rem;
}

.domain-safe-table tbody td strong{
    font-size:.86rem;
}

.domain-safe-domain-title{
    color:var(--text);
    font-weight:700;
    margin-bottom:.2rem;
}

.domain-safe-domain-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    color:var(--muted);
    font-size:.84rem;
}

.domain-safe-domain-form .form-control,
.domain-safe-domain-form .form-select{
    min-height:2.2rem;
    border-radius:8px;
    border:1px solid var(--border);
    background:#fff;
}

.domain-safe-domain-form .form-control:focus,
.domain-safe-domain-form .form-select:focus{
    border-color:#ef233c;
    box-shadow:0 0 0 .15rem rgba(239,35,60,.1);
}

.domain-safe-badge-mini{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    border-radius:999px;
    padding:.2rem .65rem;
    font-size:.76rem;
    font-weight:700;
    white-space:nowrap;
}

.domain-safe-badge-mini.ok{
    background:#ecf9f0;
    color:#1f9a52;
}

.domain-safe-badge-mini.info{
    background:#edf3ff;
    color:#2f5fd4;
}

.domain-safe-badge-mini.danger{
    background:#fff0f1;
    color:#cf3340;
}

.domain-safe-badge-mini.neutral{
    background:#f3f5fa;
    color:#6f778f;
}

@media (max-width: 991.98px){
    .domain-safe-head{
        grid-template-columns:1fr;
    }
}