/* ---------------------------------------------------------------------------
   Manager: alleen wat de schil van admin (styles/shell.css en main.css, byte-
   identiek) niet heeft. Zelfde kleuren: de variabelen van shell.css.
   --------------------------------------------------------------------------- */

/* Voor welke beheerder je werkt, onder het logo (includes/managershell.php). Met
   meer dan één beheerder een keuzemenu. */
.of-context {
	margin: 4px 10px 6px;
	padding: 8px 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
}
.of-context-kop {
	display: block;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--of-zijmuted);
}
.of-context-naam {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: #fff;
}
.of-context.dropdown { padding: 0; }
.of-context-knop {
	position: relative;
	display: block;
	width: 100%;
	padding: 8px 28px 8px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	text-align: left;
}
.of-context-knop:hover, .of-context-knop:focus, .open > .of-context-knop { background: rgba(255, 255, 255, .08); outline: none; }
.of-context-knop .fa { position: absolute; right: 10px; top: 50%; margin-top: -6px; font-size: 11px; color: var(--of-zijmuted); }
.of-context-menu { width: 100%; max-height: 60vh; overflow-y: auto; padding: 4px 0; }
.of-context-menu button {
	display: block;
	width: 100%;
	padding: 5px 12px;
	border: 0;
	background: none;
	text-align: left;
	font-size: 13px;
	color: #1e2833;
}
.of-context-menu button:hover, .of-context-menu button:focus { background: var(--of-achtergrond); outline: none; }
.of-context-menu button.active { font-weight: 600; color: var(--of-blauw); }

/* Hulpregel onderin de zijbalk, boven de gebruiker. */
.of-hulp { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--of-zijmuted); }
.of-hulp .fa { width: 14px; text-align: center; }
.of-hulp a { color: var(--of-zijtekst); }
.of-hulp a:hover, .of-hulp a:focus { color: #fff; text-decoration: none; }

/* Inloggen: talen en hulp onder het formulier. */
.of-login-voet { margin-top: 14px; text-align: center; font-size: 12px; color: #8a96a3; }
.of-login-voet a { color: #6b7785; }
.of-login-voet b { color: #1e2833; font-weight: 600; }
.of-login-voet .of-login-hulp { margin-top: 6px; }

/* Oude opmaakhulp die nog in een paar schermen staat; main.css van admin kent hem niet meer. */
.clear { clear: both; }

/* Lijsten (address/inc-list.php, users/inc-list.php): de woonstatus als icoon, en wie gaat vertrekken.
   Bewoond is het gewone geval en dus rustig; vertrekt valt op in het blauw van de schil (geen oranje). */
.mg-status { font-size: 14px; color: #8fa6c8; }
.mg-status-vacant { color: #c3ccd6; }
.mg-status-leaving { color: var(--of-blauw); }
.hrms .mg-status { font-size: 13px; }
/* In het filter zijn het keuzes: daar één tint, en uitgevinkt gedimd (hrms.js). Alleen in de lijst valt "vertrekt" op
   (Kasper, 19 okt 2026). */
.hrms .mg-status.mg-status-leaving, .hrms .mg-status.mg-status-vacant { color: #8fa6c8; }
.mg-tot { margin-left: 4px; font-size: 12px; color: #6b7785; white-space: nowrap; }
.mg-onbekend { font-style: italic; color: #8a96a3; }

/* --- Adrespagina (address/inc-view.php) ---------------------------------------------- */
.mg-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.mg-kop h1 { margin: 0; font-size: 22px; font-weight: 600; color: #1e2833; }
.mg-sub { margin-top: 2px; font-size: 13px; color: #8a96a3; }
.mg-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: #edf2fb; color: var(--of-blauw); font-size: 12px; font-weight: normal; vertical-align: 2px; }
.mg-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
@media (max-width: 1100px) { .mg-grid { grid-template-columns: minmax(0, 1fr); } }
.panel-heading .btn-group { margin-top: -2px; }
.panel-heading .btn-group .btn-group { margin-top: 0; }
table.mg-velden { margin: 0; }
table.mg-velden > tbody > tr > th { width: 38%; font-weight: normal; color: #6b7785; border-top-color: #eef1f5; }
table.mg-velden > tbody > tr > td { border-top-color: #eef1f5; overflow-wrap: anywhere; }
table.mg-velden > tbody > tr:first-child > th, table.mg-velden > tbody > tr:first-child > td { border-top: 0; }
table.mg-velden.mg-volgende { border-top: 2px solid #eef1f5; }
.mg-dim { color: #8a96a3; }
.mg-flash { margin-bottom: 14px; }

/* Diensten: per dienst een regel, wanneer rechts, aan wie hij gefactureerd wordt eronder. */
.mg-dienst { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 15px; }
.mg-dienst + .mg-dienst { border-top: 1px solid #eef1f5; }
.mg-dienst b { font-weight: 600; color: #1e2833; }
.mg-dienst-icoon { width: 16px; color: #8fa6c8; }
.mg-dienst-sub { display: block; margin: 1px 0 0 24px; color: #8a96a3; font-size: 12px; }

/* Router: foto, wat het is, status, knoppen. */
.mg-toestel { display: flex; align-items: center; gap: 12px; padding: 10px 15px; }
.mg-toestel + .mg-toestel { border-top: 1px solid #eef1f5; }
.mg-toestel-foto { flex: 0 0 56px; height: 44px; display: flex; align-items: center; justify-content: center; }
.mg-toestel-foto img { max-width: 56px; max-height: 44px; }
.mg-toestel-foto .fa { font-size: 22px; color: #8fa6c8; }
.mg-toestel-tekst { flex: 1 1 auto; min-width: 0; }
.mg-toestel-tekst b { display: block; font-weight: 600; color: #1e2833; }
.mg-toestel-tekst small { display: block; color: #8a96a3; font-size: 12px; }
.mg-toestel-knoppen { flex: 0 0 auto; }
.mg-status-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: #8a96a3; }
.mg-status-live.mg-online, .mg-status-live.mg-offline { color: #1e2833; }
.mg-status-live.mg-online::before, .mg-status-live.mg-offline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.mg-status-live.mg-online::before { background: #3c8d4f; }
.mg-status-live.mg-offline::before { background: #c3ccd6; }

/* Venster "Nieuwe bewoner". */
#newResidentModal .modal-header .mg-sub { margin-top: 2px; }
#newResidentModal .mg-nr-keuze select + select { margin-top: 6px; }
#newResidentModal .mg-nr-stopt { margin: 4px 0 4px; color: #1e2833; }
#newResidentModal .mg-nr-router { margin: 0; font-size: 12px; }
#newResidentModal .mg-nr-meldingen div + div { margin-top: 4px; }

/* Venster "Vertrek doorgeven", en het terugdraaien: "Ongedaan maken" bij de bewoner, "Heractiveren" bij leegstand. */
#moveOutModal .modal-header .mg-sub, #reactivateModal .modal-header .mg-sub { margin-top: 2px; }
#moveOutModal .help-block { margin-bottom: 0; }
#moveOutModal .mg-mo-stopt { margin: 4px 0 4px; color: #1e2833; }
#moveOutModal .mg-mo-daarna { margin: 0; font-size: 12px; }
#moveOutModal .mg-mo-meldingen div + div { margin-top: 4px; }
.mg-ongedaan { margin-left: 6px; vertical-align: 1px; }
.mg-heractiveer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f5; color: #1e2833; }

/* Bootstrap's .form-control zet display:block en wint zo van het hidden-attribuut (zoekveld bij Verhuizen, tv-keuze
   zonder tv). */
.form-control[hidden] { display: none; }

/* Bewonerpagina (users/inc-view.php): per adres een blok met de diensten, en de vensters Bewerken, Nieuw wachtwoord en
   Verhuizen. */
.mg-adres { padding: 10px 0 2px; }
.mg-adres.mg-volgende { border-top: 2px solid #eef1f5; }
.mg-adres-kop { padding: 0 15px 4px; font-weight: 600; }
#editUserModal .modal-header .mg-sub, #passwordModal .modal-header .mg-sub, #moveModal .modal-header .mg-sub { margin-top: 2px; }
.mg-meldingen div + div { margin-top: 4px; }
#moveModal .mg-mv-resultaten { margin: 6px 0 0; max-height: 264px; overflow-y: auto; }
#moveModal .mg-mv-resultaten .list-group-item { display: block; width: 100%; text-align: left; padding: 7px 12px; }
#moveModal .mg-mv-resultaten small { display: block; color: #8a96a3; font-size: 12px; }
#moveModal .mg-mv-keuze select + select { margin-top: 6px; }
#moveModal .mg-mv-stopt { margin: 4px 0; color: #1e2833; }
#moveModal .mg-mv-router { margin: 0 0 6px; font-size: 12px; }
#moveModal .mg-mv-vertrek { border-top: 1px solid #eef1f5; padding-top: 10px; margin-top: 8px; }
#moveModal .mg-mv-vertrek-kop { margin: 0 0 2px; font-weight: 600; color: #1e2833; }
#moveModal .mg-mv-vertrek .checkbox { margin: 4px 0; }
#moveModal .mg-mv-vertrek .mg-dim { display: block; font-size: 12px; }

/* Dashboard (dashboard/index.php): storingen en onderhoud op de adressen van de beheerder. Lopend valt op (rood bij
   een storing), gepland in het OpenFiber-blauw, opgelost grijs. */
.mg-rustig { color: #3c8d4f; }
.mg-rustig .fa { margin-right: 6px; }
.mg-melding-groep { padding: 10px 15px 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a96a3; }
.mg-melding { padding: 10px 15px 12px 12px; border-left: 3px solid transparent; }
.mg-melding + .mg-melding { border-top: 1px solid #eef1f5; }
.mg-melding-active.mg-melding-storing { border-left-color: #c9302c; background: #fdf6f6; }
.mg-melding-active.mg-melding-onderhoud { border-left-color: #d9902a; }
.mg-melding-planned { border-left-color: var(--of-blauw); }
.mg-melding-resolved { border-left-color: #c3ccd6; }
.mg-melding-kop { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.mg-melding-soort { font-weight: 600; color: #1e2833; }
.mg-melding-storing .mg-melding-soort .fa { color: #c9302c; }
.mg-melding-onderhoud .mg-melding-soort .fa { color: #8fa6c8; }
.mg-melding-tijd { margin-left: auto; color: #6b7785; font-size: 13px; font-variant-numeric: tabular-nums; }
.mg-melding-titel { margin-top: 4px; font-weight: 600; color: #1e2833; }
.mg-melding-tekst { margin-top: 2px; color: #3b4652; overflow-wrap: anywhere; }
.mg-melding-update { margin-top: 6px; font-size: 13px; }
.mg-melding-adressen { margin-top: 6px; font-size: 13px; }
.mg-melding-adressen summary { cursor: pointer; color: var(--of-blauw); }
.mg-melding-lijst { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.mg-melding .mg-chip { margin-left: 0; }
.mg-chip-impact { background: #fbe9e9; color: #a94442; }