@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data
{
    white-space: normal !important;
}
/*.rz-tabview-panel {
    padding:0px !important;
}*/

/* .sb-tabs .rz-tabs{ border-bottom:1px solid #e7e9ee; padding-inline:6px; }
.sb-tabs .rz-tabview-nav{ gap:18px !important; height:30px !important; min-height:30px !important; }
.sb-tabs .rz-tabview-nav li a{
  text-transform:uppercase; letter-spacing:.04em; font-weight:800; font-size:11px !important;
  color:#7a8192; border-bottom:2px solid transparent; padding-bottom:3px !important; padding-top:2px !important;
}riables for consistent theming */
:root {
    --rz-text-font-family: "Poppins",sans-serif !important;
    --rz-header-background-color: #00a551 !important;
    --rz-primary: #00a551 !important;
    --rz-on-primary: #d4fce8 !important;
    --rz-on-primary-light: #d4fce8 !important;
    --rz-on-primary-lighter: #d4fce8 !important;
    --rz-primary-light: #00c862 !important;
    --rz-primary-lighter: #01da6b !important;
    --rz-panel-menu-active: #00a551 !important;
    --rz-panel-menu-item-color: #0066b2 !important;
    --rz-panel-menu-icon-color: #0066b2 !important;
    --rz-panel-menu-item-active-background-color: white !important;
    --rz-panel-menu-item-active-color: #00a551 !important;
    --rz-pager-numeric-button-selected-color: white !important;
    --rz-pager-numeric-button-selected-background-color: #00a551 !important;
    --rz-accordion-border-radius: 0px !important;
    --rz-tabs-padding: 0px !important;
    --rz-layout-body-padding: 0px !important;
    
    /* Ionic theming to match Radzen colors */
    --ion-color-primary: #00a551;
    --ion-color-primary-rgb: 0,165,81;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255,255,255;
    --ion-color-primary-shade: #009148;
    --ion-color-primary-tint: #1aae62;
}

/* Global safe area handling */
.safe--area {
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    --ion-safe-area-top: 20px;
    --ion-safe-area-bottom: 20px;
}

/* Body styling for mobile-first design */
body {
    font-family: "Poppins",sans-serif !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background-image: url('../../../img/BG_Icons.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    margin: 0;
}

/* Legacy ion-tab styling (preserved for backward compatibility) */
ion-tab {
    margin-top:55px;
}

/* Legacy ion content styling - disabled for mobile tab bar */
ion-content {
    display: none !important; /* Completely disable ion-content in favor of custom layout */
}

/* Global body adjustments for mobile layout */
@media (max-width: 767px) {
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    /* Ensure no global styles interfere with our mobile layout */
    .mobile-content * {
        box-sizing: border-box;
    }
}

/* Remove conflicting tab bar styles - these are now handled in MainLayout.razor.css */

ion-toolbar {
    --background: var(--ion-color-primary) !important;
    --color: white !important;
    --padding-bottom: 20px;
}

ion-tab-button {
    --color-focused: darkred;
    --color-selected: darkred;
    --color:white;
}

/* Radzen specific styling when in desktop layout */
.rz-layout {
    background-image: url('../../../img/BG_Icons_BW.svg');
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
}

.rz-tabview-nav{
    background-color:white;
}

.rz-tabview-title {
    font-family: "Poppins",sans-serif !important;
}

.sb-tabcard {
    --rz-tabs-padding: 0px !important;
    padding: 10px !important;
}

.sb-tabcard-tab-content {
    padding: 5px !important;
}

/* Fix for launcher frame positioning with new bottom tabs */
#launcher-frame {
    right: 22px !important;
    bottom: 120px !important; /* Increased to account for bottom tabs */
    border: none;
    position: fixed;
    min-width: 104px;
    max-width: 156px;
    height: 56px;
    z-index: 2147483000;
    visibility: visible;
}

/* Error UI styling */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Page & breadcrumbs styling */
.sb-page { padding-inline: 6px; }

.sb-breadcrumb { --sb-crumb-bg:#f3f6fb; margin-bottom:0; }
.sb-crumb{
  display:inline-flex; gap:6px; align-items:center;
  margin-left:15px;
  margin-top:10px;
  padding:6px 10px; border-radius:999px; background:var(--sb-crumb-bg);
  color:#2a3344; text-decoration:none; font-weight:500; font-size:13px;
}
.sb-crumb:hover{ filter:brightness(.98); }
.sb-crumb-icon{ font-size:18px; opacity:.75; }
.sb-crumb-text{ line-height:1; }

/* HERO */
.sb-hero{ border-radius:16px; padding:16px 18px; }
.sb-hero-grid{ display:grid; grid-template-columns:110px 1fr; gap:14px; }

.sb-badge-img{
  width:96px;height:96px;border-radius:16px;object-fit:contain;
  background:#f3f6fb;padding:8px;display:block;
}

/* Titel + chips */
.sb-title-grid{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; column-gap:12px; row-gap:0; min-height:48px;
}
.sb-title{
  margin:0; font-size:clamp(22px,2.8vw,32px);
  line-height:1.1; font-weight:800; letter-spacing:-.2px; overflow-wrap:anywhere;
}
.sb-title-actions{
  display:flex; justify-content:flex-end; align-items:center;
  gap:8px; flex-wrap:wrap; max-width:min(48vw, 560px);
}

/* Chips */
.sb-chip{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px; border-radius:999px;
  font-weight:700; font-size:13px; border:1.5px solid transparent; white-space:nowrap;
}
.sb-level{ background:#e8f5e9; color:#2b6b2d; border-color:#bfe3c2; }
.sb-level-dot{ width:10px; height:10px; border-radius:50%; background:#2b6b2d; display:inline-block; }
.sb-gold{ background:#f7e7c6; color:#6f4b00; border-color:#e9d197; }
.sb-chip-icon{ font-size:18px; }

/* Progressrij: tekst | brede balk | knop rechts */
.sb-progress-row{
  display:grid;
  grid-template-columns: minmax(220px, 1fr) minmax(420px, 4fr) auto;
  align-items:center; gap:12px; margin-top:10px;
}
.sb-progress-text{ font-size:16px; color:#2a3344; }
.sb-progress{ height:10px; border-radius:999px; }
.sb-progress .rz-progressbar-value{ background:#22a96f !important; }

/* 'Meer lezen' knop zoals ontwerp: outline pill + felle tekst */
.sb-link-more{
  justify-self:end; align-self:center;
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 14px; border-radius:10px;
  border:2px solid #1d1b1e; background:#fff;
  font-weight:800; font-size:14px; color:#e91e63; cursor:pointer;
}
.sb-link-more:hover{ filter:brightness(.98); }


/* Tabs */
.sb-tabcard{ border-radius:16px; padding:0; }
.sb-tabs .rz-tabs{ border-bottom:1px solid #e7e9ee; padding-inline:6px; }
.sb-tabs .rz-tabview-nav{ gap:18px !important; height:38px !important; min-height:38px !important; padding-top:0 !important; padding-bottom:0 !important; margin:0 6px 2px 6px !important; display:flex; align-items:flex-end; }
.sb-tabs .rz-tabview-nav li a{
  text-transform:uppercase; letter-spacing:.04em; font-weight:800; font-size:11px !important;
  color:#7a8192; border-bottom:2px solid transparent; padding-bottom:3px !important; padding-top:2px !important;
}
.sb-tabs .rz-tabview-nav li{ margin:0 !important; }
.sb-tabs .rz-tabview-nav li > *{ padding:0 8px 2px 8px !important; height:36px !important; display:inline-flex; align-items:flex-end; }
.sb-tabs .rz-tabview-title{ line-height:1.05 !important; padding:0 !important; }
.sb-tabs .rz-tabview-nav li.rz-tabview-selected a{ color:#212736; border-bottom-color:transparent !important; border-bottom-width:0 !important; }
.sb-tabcontent{ padding:0px; }

/* Mobile responsive design */
@media (max-width: 720px){
  .sb-hero-grid{ grid-template-columns:72px 1fr; gap:10px; }
  .sb-badge-img{ width:64px;height:64px;border-radius:12px; }
  .sb-title-grid{ grid-template-columns:1fr; row-gap:6px; }
  .sb-title-actions{ justify-content:flex-start; max-width:100%; }
  .sb-progress-row{ grid-template-columns:1fr; gap:8px; }
  .sb-link-more{ justify-self:start; }
}

/* Desktop layout adjustments */
@media (min-width: 768px){
  #launcher-frame {
    bottom: 65px !important; /* Reset to original position for desktop */
  }
}