/* Aanvullingen op de stijl van de oude app (assets/css/legacy/*). */

[hidden] { display: none !important; }

/* Opstarten / fouten tijdens inloggen */
.boot { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: #6c757d; gap: 8px; font-family: "Noto Sans", sans-serif; }
.boot-error { flex-direction: column; align-items: flex-start; max-width: 720px; margin: 0 auto; padding: 24px; color: #222; }
.boot-error ul { margin: 12px 0; padding-left: 20px; }
.boot-error li { margin-bottom: 8px; }

/* Actieve pagina in het menu */
.nav-link.active-page { color: #0099D8; }

/* Initialen i.p.v. persoonlijke profielfoto */
.header-initials {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; min-width: 46px;
  background: #0099D8; color: #fff !important; font-family: "Barlow", sans-serif; font-weight: 600; font-size: 18px;
}

/* Logout als knop i.p.v. link */
#logout { border: 0; }

/* Zoekresultaten: tab-inhoud */
#search-results-container .search-tab li { padding: 4px 0; font-size: 18px; }

/* Uitgeschakelde functies (in de oude app gemarkeerd met **) */
.linkbutton.disabled, .linkbutton:disabled { opacity: .55; pointer-events: none; }

/* Alle badges gelijk aan die in de offertelijst: Noto Sans 12px vet, helemaal rond */
.badge {
  font-family: "Noto Sans", sans-serif; font-size: 12px; font-weight: 700; line-height: 1;
  padding: .35em .65em; border-radius: 50rem !important;
}

/* Lijstkoppen met knop ernaast */
.page-title { display: inline-block; margin-right: 1rem; }

/* Rich text uit updates/notities */
.rich img { max-width: 100%; height: auto; }

/* Onderste tijdbalk (ticket/offerte) */
.bottom-bar { position: fixed; bottom: 0; right: 0; background: #FAFAFB; z-index: 1020; }

/* select2 binnen modals */
.modal .select2-container { z-index: 1060; }
.select2-container--open { z-index: 1070; }

/* Checklist-items (sorteerbaar) */
.checklist-items .item { cursor: grab; }
.checklist-items .ui-sortable-helper { background: #fff; }

/* Bestanden */
.file-area.dragover { background: #fff; border-color: #0099D8; }

/* Kleine tabellen in relatie-dashboard */
.table-sm td, .table-sm th { padding: .35rem .5rem; }
.sticky-ticket { top: 30px; }

/* Alleen-lezen velden bij artikelen van een leverancier */
.article-form input:read-only, .article-form textarea:read-only { background: var(--bs-secondary-bg); }

/* Voorbeeld achtergrond inlogpagina */
.login-preview-img { max-height: 220px; object-fit: cover; }
.settings-hint { max-width: 720px; }

/* Inactieve gebruikers */
.user-inactive td { opacity: .55; }
.perm-col { width: 160px; }

/* Header: profielfoto (rond) i.p.v. initialen, klikbaar naar Mijn account */
.header-initials.has-photo { background: #fff center / cover no-repeat; color: transparent !important; }
#lock { border: 0; }
/* Aantal e-mails in de wachtrij op het envelop-icoon */
.header-badge {
  position: absolute; top: 2px; right: 4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #dc3545; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

/* Vergrendelscherm */
.lock-screen {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(243, 245, 248, .97); backdrop-filter: blur(8px);
}
.lock-screen .lock-box { background: #fff; border-radius: 16px; padding: 40px; width: 360px; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.lock-screen .lock-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  background: #0099D8 center / cover no-repeat; color: #fff; font-family: "Barlow", sans-serif; font-weight: 600; font-size: 34px; }
.lock-screen .lock-pin { font-size: 28px; letter-spacing: 8px; text-align: center; border-radius: 12px; }
.lock-screen .lock-error { min-height: 24px; color: #dc3545; font-size: 14px; margin-top: 8px; }

/* Mijn account: profielfoto */
.account-photo { width: 120px; height: 120px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #0099D8 center / cover no-repeat; color: #fff; font-family: "Barlow", sans-serif; font-weight: 600; font-size: 42px; }

/* Ticket: gekoppelde offerte (onderscheid met een checklist) */
.bg-quote { background: #222222 !important; color: #fff !important; }
.ticket-update.ticket-quote { border-left: 4px solid #222222; }
.ticket-quote .quote-unlink { font-size: 1.1rem; }

/* Relatieoverzicht: hele kaart klikbaar */
#relations #results .result { cursor: pointer; }
#relations #results .result:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }

/* Notities bij een relatie: compacte kaarten zoals in het offerteoverzicht */
.notes .doc-item.list-group-item { background: #fff; border-radius: 5px; }
.notes .doc-item.list-group-item:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.notes .note-toggle { min-height: 1.75rem; }
.notes .note-body .rich > :last-child { margin-bottom: 0; }
.notes .drag-handle, .notes .group-handle { cursor: grab; }
.notes .note-placeholder { height: 2.6rem; margin-bottom: .5rem; border: 2px dashed #c9c9c9; border-radius: 5px; }
.notes .group-placeholder { height: 3rem; margin-bottom: 1rem; border: 2px dashed #c9c9c9; border-radius: 5px; }
.notes .doc-group-body { min-height: .5rem; } /* ook in een lege groep te kunnen neerzetten */

/* ============================================================================
   Mobiel (telefoon/kleine tablet). Desktop blijft ongewijzigd.
   ============================================================================ */

/* Knoppen als inline-block, zodat ze bij afbreken netjes onder elkaar komen i.p.v. over elkaar */
.linkbutton { display: inline-block; }
/* Uitklapmenu alleen op mobiel */
#menu-toggle { display: none; }
@media (max-width: 767.98px) { #menu-toggle { display: inline-block; } }

/* Tabbladen: op één regel; op mobiel horizontaal scrollen */
.tab-strip { display: flex; flex-wrap: wrap; align-items: center; }

@media (max-width: 767.98px) {
  /* Inhoud past op de schermbreedte (flex-item zonder min-width groeit anders mee met de inhoud) */
  #content { min-width: 0; padding-left: .75rem; padding-right: .75rem; }
  #main { min-width: 0; padding-left: 0 !important; padding-right: 0 !important; }

  /* Hoofdmenu: uitklapmenu dat van links inschuift (hamburger linksboven) */
  /* z-index boven het zoekveld (legacy: 1050) */
  #sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1065; width: 260px; max-width: 82vw; flex: 0 0 auto;
    overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease-out;
    padding-bottom: env(safe-area-inset-bottom); }
  body.menu-open #sidebar { transform: none; box-shadow: 2px 0 16px rgba(0, 0, 0, .15); }
  body.menu-open { overflow: hidden; }
  #sidebar > div { min-height: 100% !important; position: static !important; align-items: stretch !important; }
  #sidebar > div > a:first-child img { display: block !important; max-width: 170px; } /* logo ook mobiel */
  #menu { align-items: stretch !important; width: 100%; padding: 0 1rem 1rem !important; }
  #menu .nav-link { display: flex; align-items: center; padding: 2px 0 !important; line-height: 42px; }
  #menu .nav-link span { display: inline !important; }
  #menu .nav-link.active-page { color: #0099D8; }
  #menu-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(0, 0, 0, .35); }
  #menu-toggle { font-size: 1.6rem !important; line-height: 1; }

  /* Kop: compacter */
  #content > .col { padding-top: .25rem !important; }
  #content .header-profile { flex-shrink: 0; }
  #content .btn-lg { padding: .25rem .6rem !important; font-size: 1.1rem; }
  h2 { font-size: 1.5rem; }

  /* Tabbladen horizontaal scrollen i.p.v. over elkaar */
  .tab-strip { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin-left: -.25rem; margin-right: -.75rem; padding-bottom: 2px; }
  .tab-strip::-webkit-scrollbar { display: none; }
  .tab-strip > a { flex: 0 0 auto; float: none !important; }
  .linkbutton { margin-bottom: .35rem; }

  /* Formulieren met label links (col-4) en veld rechts: label boven het veld */
  .row > .col-form-label.col-4 { flex: 0 0 100%; max-width: 100%; padding-bottom: 0; }
  .row > .col-form-label.col-4:empty { display: none; }
  /* De velden ernaast besloegen samen 8/12: omrekenen naar de volle breedte (col-N wordt N/8) */
  .row > .col-form-label.col-4 ~ .col-8 { flex: 0 0 100%; max-width: 100%; }
  .row > .col-form-label.col-4 ~ .col-7 { flex: 0 0 87.5%; max-width: 87.5%; }
  .row > .col-form-label.col-4 ~ .col-6 { flex: 0 0 75%; max-width: 75%; }
  .row > .col-form-label.col-4 ~ .col-5 { flex: 0 0 62.5%; max-width: 62.5%; }
  .row > .col-form-label.col-4 ~ .col-4 { flex: 0 0 50%; max-width: 50%; }
  .row > .col-form-label.col-4 ~ .col-3 { flex: 0 0 37.5%; max-width: 37.5%; }
  .row > .col-form-label.col-4 ~ .col-2 { flex: 0 0 25%; max-width: 25%; }
  .row > .col-form-label.col-4 ~ .col-1 { flex: 0 0 12.5%; max-width: 12.5%; }
  .row > .col-form-label.col-lg-3 { padding-bottom: 0; }
  .row > .col-form-label.col-3 { flex: 0 0 100%; max-width: 100%; padding-bottom: 0; }
  .row > .col-form-label.col-3 ~ .col-9 { flex: 0 0 100%; max-width: 100%; }

  /* Offerteregels: velden laten afbreken; beschrijving bovenaan over de volle breedte */
  #items .item .d-flex { flex-wrap: wrap; gap: .4rem; }
  #items .item .d-flex > * { margin-right: 0 !important; }
  #items .item .item-name { flex: 1 1 100%; order: -1; }
  #items .item .input-group.w-22 { width: 100% !important; flex: 1 1 100%; }
  #items .item .d-flex > .input-group:not(.fixed) { flex: 1 1 100%; }

  /* Ticket: zijpaneel (relatie, status, …) onder de updates zonder uitstekende rijen */
  #ticket .row, #ticket-new .row { margin-left: 0; margin-right: 0; }
  .sticky-ticket { position: static !important; }
  .ticket-subject { font-size: 1.15rem; }

  /* Witte vlakken minder binnenruimte */
  #main .bg-white.p-4, #main .container-fluid.p-4 { padding: 1rem !important; }
  #main .container-fluid > .row > [class*="col-lg-"].p-3 { padding: .5rem 0 !important; }

  /* Tabellen horizontaal scrollen (DataTables en gewone tabellen) */
  .dt-container .dt-layout-table, #main .table-responsive-mobile { overflow-x: auto; }
  #main table.table:not(.dataTable) { display: block; overflow-x: auto; }
  .dt-container .dt-layout-row:not(.dt-layout-table) { flex-wrap: wrap; gap: .5rem; }

  /* Lijsten (relaties, offertes, tickets, notities): minder binnenruimte */
  #results .list-group-item, .notes .doc-item.list-group-item { padding: .5rem .6rem !important; }

  /* Vensters (modals) bijna schermvullend */
  .modal-dialog { margin: .5rem; }
  .modal-body.p-4 { padding: 1rem !important; }

  /* Zoekresultaten bovenin over de volle breedte */
  #search-results { width: 100%; max-width: 100%; }
}