/* Framework CSS - Gemeenschappelijke styling voor alle pagina's */

/* Reset */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: Arial, sans-serif;
}

/* Content containers - altijd max 1500px */
.page-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
}

/* Tabellen - standaard styling */
table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 3px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto 20px auto;
}

th, td {
    border: 1px solid #bbb;
    padding: 8px;
    text-align: center;
    border-radius: 3px;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

td {
    background-color: #ffffff;
}

tr:hover td {
    background-color: #f5f5f5;
}

/* Headers */
h1, h2, h3 {
    color: #002855;
    text-align: center;
    margin: 20px auto;
    max-width: 1500px;
}

/* Links */
a {
    color: #002855;
    text-decoration: none;
}

a:hover {
    color: royalblue;
}

a img {
    vertical-align: middle;
}

/* Buttons */
button, input[type="submit"], input[type="button"],
.button-link, .zoek-knop, .wis-knop {
    background-color: #002855;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

button:hover, input[type="submit"]:hover,
.button-link:hover, .zoek-knop:hover {
    background-color: royalblue;
    color: white;
}

.wis-knop {
    background-color: #666;
}

.wis-knop:hover {
    background-color: #888;
}

input[type="button"] {
    background-color: #666;
    cursor: default;
}

/* Zoek container */
.zoek-container {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1500px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.filter-info {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 14px;
}

.filter-info-item {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #002855;
}

.filter-info-label {
    font-weight: bold;
    color: #666;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.zoek-input {
    position: relative;
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 300px;
}

/* Pagination */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px auto;
    padding: 12px 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
    flex-wrap: wrap;
    gap: 15px;
    max-width: 1500px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.page-size-selector {
    display: flex;
    gap: 10px;
    align-items: center;
}

.page-size-selector a {
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #002855;
    text-decoration: none;
    font-size: 14px;
}

.page-size-selector a:hover {
    background-color: #002855;
    color: white;
}

.page-size-selector span {
    font-weight: bold;
    padding: 6px 12px;
    background-color: #002855;
    color: white;
    border-radius: 4px;
    font-size: 14px;
}

.page-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-info {
    font-weight: bold;
    margin: 0 10px;
    font-size: 14px;
    color: #002855;
}

.export-link {
    color: #002855;
    text-decoration: none;
    font-weight: bold;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.export-link:hover {
    background-color: #002855;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .page-content {
        padding: 10px;
    }
    
    .zoek-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .zoek-input {
        width: 100%;
    }
    
    .pagination-container {
        flex-direction: column;
    }
    
    table {
        font-size: 12px;
    }
    
    th, td {
        padding: 5px;
    }
}

/* === Sticky-safe overrides (added by assistant) === */
html, body {
  margin: 0;
  padding: 0;
  height: auto;
}
/* Ensure the BODY is the vertical scroll container */
html { 
  overflow-y: auto !important; 
}
body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 100vh;
}

/* Sticky container for the top header + menu */
.sticky-top-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #fff;
}

/* Make sure dropdowns/menus sit above content */
.dropdown-menu, .menu, .nav, #client_results {
  z-index: 2100;
}
/* === End sticky-safe overrides === */

/* === Zoeken-layout overrides === */
.zoek-container {
  justify-content: space-between;        /* filter-info links, form rechts */
}

.zoek-container form {
  margin-left: auto;                     /* duwt het form naar rechts */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* filter-info links uitgelijnd, items onder elkaar */
.filter-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;               /* links */
  text-align: left;
  gap: 8px;
}

/* elk info-item zelf gecentreerd */
.filter-info-item {
  display: flex;
  justify-content: center;               /* horizontaal centreren binnen het item */
  align-items: center;                   /* verticaal centreren */
  text-align: center;
}

/* Mobiel: container wordt kolom; form blijft aan de rechterrand */
@media (max-width: 768px) {
  .zoek-container {
    flex-direction: column;
    align-items: stretch;
  }
  .zoek-container form {
    align-self: flex-end;                /* rechts op de regel */
  }
}

.logo img {
    width: 150px;   /* pas aan naar wens */
    height: auto;   /* behoudt de juiste verhoudingen */
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==== Objectportaal / Tabs ==== */
.portal-header { background:#fff; padding:12px 15px; border-radius:4px; margin:0 0 15px 0; box-shadow:0 2px 5px rgba(0,0,0,0.05); }
.portal-actions { display:flex; justify-content:flex-end; margin-bottom:8px; }

.object-summary {
  display:grid; grid-template-columns: repeat(3, minmax(180px,1fr)); gap:10px;
}
.object-summary .summary-item { display:flex; flex-direction:column; background:#fafafa; border:1px solid #eee; border-radius:4px; padding:8px 10px; }
.object-summary .label { font-size:12px; color:#666; }
.object-summary .value { font-size:14px; color:#002855; }
.object-summary .value.expired { color:#b30000; font-weight:bold; }

/* Tabs styling - modernized for bekijk_object */
.tabs { 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  margin: 20px 0 0 0; 
  border-bottom: 2px solid #002855;
  background: transparent;
  padding: 0;
}

.tab-link { 
  background:#f5f7fb; 
  border:1px solid #d9e1f2; 
  border-bottom: none;
  color:#002855; 
  padding:10px 20px; 
  border-radius:4px 4px 0 0; 
  cursor:pointer;
  font-weight: normal;
  transition: all 0.2s;
}

.tab-link:hover {
  background:#e8f0fe;
  color:#002855;
}

.tab-link.active { 
  background:#002855; 
  color:#fff; 
  border-color:#002855; 
  font-weight: bold;
}

.tab-link[title] { position:relative; }

.tab-panels { 
  background:#fff; 
  border:1px solid #ddd; 
  border-radius:0 4px 4px 4px; 
  margin-top: -1px;
}

.tab-panel { 
  display:none; 
  position:relative; 
  padding:20px;
  background:#fff;
}

.tab-panel.active { 
  display:block; 
}

.tab-panel iframe { width:100%; height: 70vh; border:0; border-radius:4px; display:block; }

.tab-panel.disabled { filter: grayscale(1); opacity:.6; }
.panel-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:bold; color:#b30000; background:rgba(255,255,255,.7);
}

/* Smalle actie-kolom in de tabel */
.actions-col { width: 1%; white-space: nowrap; }

/* Mobiel */
@media (max-width: 1024px) {
  .object-summary { grid-template-columns: repeat(2, minmax(160px,1fr)); }
}
@media (max-width: 600px) {
  .object-summary { grid-template-columns: 1fr; }
}
/* === Bekijk Object – hergebruik object-summary === */
.bekijk-object .object-summary .value input,
.bekijk-object .object-summary .value select,
.bekijk-object .object-summary .value textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d9e1f2;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  color: #002855;
}

/* Compactere velden in grid-kaarten */
.bekijk-object .object-summary .summary-item { padding: 10px 12px; }
.bekijk-object .object-summary .label { margin-bottom: 4px; }

/* Readonly state (samengevoegd uit bekijk_object.css) */
.form-readonly input,
.form-readonly textarea,
.form-readonly select {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #666;
  pointer-events: none;
  cursor: not-allowed;
}
.form-readonly .edit-only { display: none; }
.form-readonly input[type="button"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Succesmelding (samengevoegd uit bekijk_object.css) */
.success-message {
  text-align: center;
  padding: 20px;
  margin: 20px auto;
}
.success-message h1 { color: #003366; margin-bottom: 15px; }
.success-message a { text-decoration: none; color: #003366; }
.success-message a:hover { text-decoration: underline; }

/* Force single-column layout for object-summary within bekijk_object */
.bekijk-object .object-summary {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 10px;
}

.bekijk-object .object-summary .value input[type="checkbox"] {
  width: auto;
  margin-right: 5px;
}

.bekijk-object .object-summary .value label {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #002855;
  margin: 0;
}

.bekijk-object .object-summary .label {
  font-weight: bold;
}

.bekijk-object .object-info-header {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* Responsief voor bekijk_object */
@media (max-width: 768px) {
  .bekijk-object .object-info-header {
    padding: 10px;
  }
  
  .bekijk-object .tabs {
    gap: 4px;
  }
  
  .bekijk-object .tab-link {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .bekijk-object .tab-panel {
    padding: 15px;
  }
}