/* =========================================================================
   QUICKGRID — HYDRO THEME (FINAL, CLEAN VERSION)
   ========================================================================= */

/* 0) Variabelen */
:root{
  --brand-900:#00509e;
  --brand-800:#0a66c2;

  --grid-font:14px;
  --grid-header-font:13px;
  --grid-header-h:36px;

  --grid-cell-pad-x:.5rem;
  --grid-cell-pad-y:.35rem;
  --grid-cell-border:#e2e7ef;

  --grid-row-zebra:#f8fafc;
  --grid-row-hover:#eef6ff;

  --control-font:14px;
  --control-h:32px;
  --control-pad-x:.5rem;
  --control-radius:6px;
  --control-accent:#1976d2;

  --page-surface-bg:#ffffff;
  --tabbar-border:#e6e6e6;

  --qg-col-narrow-w:44px;
  --qg-icon-size:28px;
}

/* 1) wrapper */
.data-grid-wrap{
  height:100%;
  overflow:auto;
  position:relative;
}

/* 2) ROOT SELECTOR */
.quickgrid[theme="hydro"]{
  font-size:var(--grid-font);
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:#0f172a;
}

/* 3) HEADER */
.quickgrid[theme="hydro"] thead{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--brand-900) !important;
}

.quickgrid[theme="hydro"] thead tr,
.quickgrid[theme="hydro"] thead th{
  background-color:var(--brand-900) !important;
}

.quickgrid[theme="hydro"] thead th{
  padding:0 .5rem;
  font-weight:600;
  font-size:var(--grid-header-font);
  height:var(--grid-header-h);
  white-space:nowrap;
  border-bottom:1px solid var(--brand-900);
  color:#fff !important;
}

.quickgrid[theme="hydro"] thead .col-header-content{
  display:flex;
  align-items:center;
  gap:.4rem;
  background:var(--brand-900) !important;
  color:#fff !important;
}

/* BUTTON HEADER */
.quickgrid[theme="hydro"] thead button.col-title{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--brand-900) !important;
  border:none !important;
  box-shadow:none !important;
  color:#fff !important;
  padding:0;
}

.quickgrid[theme="hydro"] thead .col-title-text{
  color:#fff !important;
  line-height:1;
  white-space:nowrap;
}

/* Sort indicator wit */
.quickgrid[theme="hydro"] thead .sort-indicator,
.quickgrid[theme="hydro"] thead .sort-indicator *{
  fill:#fff !important;
  color:#fff !important;
  opacity:1 !important;
}

.quickgrid[theme="hydro"] thead .sort-indicator svg{
  width:14px;
  height:14px;
}

/* 4) BODY */
.quickgrid[theme="hydro"] td{
  border-right:1px solid var(--grid-cell-border);
  border-left:1px solid var(--grid-cell-border);
  padding:var(--grid-cell-pad-y) var(--grid-cell-pad-x);
  white-space:nowrap;
  vertical-align:middle;
}

.quickgrid[theme="hydro"] tbody tr:nth-child(even) td{
  background:var(--grid-row-zebra);
}

@media (hover:hover) and (pointer:fine){
  .quickgrid[theme="hydro"] tbody tr:hover td{
    background:var(--grid-row-hover);
  }
}

.quickgrid[theme="hydro"] tbody tr > td:first-child{
  border-left-color:transparent;
  padding-left:.6rem;
}

.quickgrid[theme="hydro"] tbody tr > td:last-child{
  border-right-color:transparent;
}

/* 5) Hulpklassen */
.quickgrid[theme="hydro"] .qgDate{ min-width:120px; }

.quickgrid[theme="hydro"] .qg-col-narrow{
  width:var(--qg-col-narrow-w);
  min-width:var(--qg-col-narrow-w);
  text-align:center;
  padding:0;
}

.quickgrid[theme="hydro"] .qg-icon{
  width:var(--qg-icon-size);
  height:var(--qg-icon-size);
  cursor:pointer;
  transition:transform 160ms ease;
}

.quickgrid[theme="hydro"] .qg-icon:hover{
  transform:scale(1.1);
}

/* Wrappable kolommen */
.quickgrid[theme="hydro"] .qgWrap{
  white-space:normal !important;
  word-break:break-word;
}

/* 6) IN-CELL CONTROLS */
.quickgrid[theme="hydro"] input.form-control,
.quickgrid[theme="hydro"] select.form-select,
.quickgrid[theme="hydro"] textarea.form-control{
  font-size:var(--control-font);
  height:var(--control-h);
  padding:0 var(--control-pad-x);
  border:1px solid var(--grid-cell-border);
  border-radius:var(--control-radius);
  background:#fff;
  color:#0f172a;
  outline:none;
  box-shadow:none !important;
}

/* Smalle focuslijn */
.quickgrid[theme="hydro"] input.form-control:focus,
.quickgrid[theme="hydro"] select.form-select:focus,
.quickgrid[theme="hydro"] textarea.form-control:focus{
  border-color:var(--brand-800) !important;
  outline:1px solid var(--brand-800) !important;
  outline-offset:0;
}

/* Native blauwe X uitschakelen */
.quickgrid[theme="hydro"] input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
}

/* 7) (clear-btn + search-box is volledig verwijderd — staat nu in GridSearchBox.css) */

/* 8) PAGINATOR */
.quickgrid[theme="hydro"] .paginator{
  position:sticky;
  bottom:0;
  z-index:4;
  background:var(--page-surface-bg);
  padding:6px;
  box-shadow:0 -1px 0 rgba(0,0,0,.08);
}

/* 9) CURSOR */
.quickgrid[theme="hydro"] th[role="columnheader"],
.quickgrid[theme="hydro"] .col-title{
  cursor:pointer;
}

/* 10) PRINT */
@media print{
  .quickgrid[theme="hydro"] thead{ position:static !important; }
  .quickgrid[theme="hydro"] .paginator{ display:none !important; }
}

/* 11) DARK MODE */
[data-theme="dark"] .quickgrid[theme="hydro"]{
  color:#e5e7eb;
}