/* Algemene layout en achtergrond */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #f7f9fb;
  color: #222;
  margin: 0;
  padding: 0;
}

/* Navbar */
.navbar {
  background: #1d2a3a !important;
  color: #fff;
}
.navbar-brand {
  font-weight: 700;
  color: #fff !important;
}
.nav-link, .navbar-nav .nav-link {
  color: #e7e7e7 !important;
}
.nav-link.active, .navbar-nav .nav-link.active {
  color: #f0ad4e !important;
}
.navbar .dropdown-menu {
  background: #fff;
}

/* Hamburger-menu (custom en standaard Bootstrap) */
/* Standaard Bootstrap hamburger wit */
.navbar .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* Voor custom hamburger-menu (drie streepjes + animatie) */
.navbar-toggler {
  border: none;
  padding: 0.6rem 0.7rem;
  outline: none !important;
  box-shadow: none !important;
}
.custom-hamburger {
  display: inline-block;
  width: 28px;
  height: 28px;
  position: relative;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.custom-hamburger span {
  display: block;
  position: absolute;
  height: 3.5px;
  width: 100%;
  background: #fff;
  opacity: 1;
  left: 0;
  border-radius: 2px;
  transition: all .26s cubic-bezier(.4,0,.2,1);
}
.custom-hamburger span:nth-child(1) { top: 6px; }
.custom-hamburger span:nth-child(2) { top: 13px; }
.custom-hamburger span:nth-child(3) { top: 20px; }
.navbar-toggler[aria-expanded="true"] .custom-hamburger span:nth-child(1) {
  top: 13px; transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .custom-hamburger span:nth-child(2) {
  opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .custom-hamburger span:nth-child(3) {
  top: 13px; transform: rotate(-45deg);
}

/* Card-styling */
.card {
  border-radius: 0.75rem;
  border: 1px solid #e4e7ed;
  box-shadow: 0 1px 6px rgba(60,72,88,0.07);
  margin-bottom: 20px;
  background: #fff;
}
.card-body {
  padding: 1rem 1.25rem;
}
.card h5, .card h6 {
  margin-top: 0;
}
.card-title {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Employee header card accent */
.employee-header-card {
  border-left: 4px solid #0d6efd;
  background: #fff;
  border-radius: 0.75rem;
}

/* Alerts */
.alert-info {
  background: #e3f2fd;
  color: #2a4166;
  border: 1px solid #b5d1f7;
}
.alert-success {
  background: #eafaf1;
  color: #227d4d;
  border: 1px solid #bce8d8;
}
.alert-danger {
  background: #faeaea;
  color: #a94442;
  border: 1px solid #e6c1c1;
}

/* Knoppen */
.btn-primary,
.btn-primary:active,
.btn-primary:focus {
  background: #1d2a3a !important;
  border-color: #1d2a3a !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: #22334b !important;
  border-color: #22334b !important;
}
.btn-outline-primary {
  color: #1d2a3a !important;
  border-color: #1d2a3a !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: #1d2a3a !important;
  color: #fff !important;
}
.btn-secondary {
  background: #f0ad4e !important;
  border-color: #e89b13 !important;
  color: #222 !important;
}
.btn-secondary:hover {
  background: #f7c063 !important;
  border-color: #e89b13 !important;
  color: #222 !important;
}

/* Table styling */
.table {
  background: #fff;
  margin-bottom: 0;
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.table th, .table td {
  vertical-align: middle;
  font-size: 0.97em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 180px;
}
.table-sm th, .table-sm td {
  padding: 0.5rem;
}
.table thead th {
  background: #f7f9fb;
  color: #22334b;
  border-bottom: 2px solid #e4e7ed;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f7f9fb;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Automatisch responsive tables binnen cards, zonder extra div nodig */
.card-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
}
.card-body table thead,
.card-body table tbody {
  width: 100%;
  display: table;
  table-layout: auto;
}

/* Official notes speciale styling */
.official-note {
  border-left: 6px solid #6c757d;
  padding-left: 1rem;
  background: #f7f9fb;
}
.official-note-warning {
  border-left-color: #f0ad4e;
  background: #fff8f1;
}
.official-note-serious {
  border-left-color: #d9534f;
  background: #fff4f4;
}
.official-note .card-header {
  background: #fff;
}

/* Modal styling */
.modal-content {
  border-radius: 8px;
}
.modal-header {
  background: #f7f9fb;
  border-bottom: 1px solid #e4e7ed;
}
.modal-footer {
  border-top: 1px solid #e4e7ed;
}

/* Formulieren */
.form-control:focus {
  border-color: #1d2a3a;
  box-shadow: 0 0 0 0.15rem rgba(29,42,58,.15);
}
.form-label {
  font-weight: 500;
}
.form-select:focus {
  border-color: #1d2a3a;
  box-shadow: 0 0 0 0.15rem rgba(29,42,58,.15);
}
input[type="file"].form-control {
  padding: 0.3rem 0.6rem;
}

/* Kleine tekst, helper, etc */
.small, .form-text {
  color: #6c757d;
}
.text-muted {
  color: #a6a6a6 !important;
}
.text-danger {
  color: #d9534f !important;
}
.text-success {
  color: #227d4d !important;
}
.text-warning {
  color: #f0ad4e !important;
}

/* Utility: overflow fix for lange tekst in cards/tables */
.overflow-auto {
  overflow: auto !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}

/* Buttons in table cells */
.table .btn {
  margin-bottom: 2px;
}

/* Spacing helpers */
.mt-2 { margin-top: 0.5rem!important; }
.mt-3 { margin-top: 1rem!important; }
.mt-4 { margin-top: 1.5rem!important; }
.mb-2 { margin-bottom: 0.5rem!important; }
.mb-3 { margin-bottom: 1rem!important; }
.mb-4 { margin-bottom: 1.5rem!important; }
.p-2  { padding: 0.5rem!important; }
.p-3  { padding: 1rem!important; }

/* Hide elements helper */
.d-none { display: none !important; }

/* -------- NIEUW/EXTRA voor pro-style employee page -------- */

/* Employee header card accent (al bovenaan toegevoegd) */
.employee-header-card {
  border-left: 4px solid #0d6efd;
  background: #fff;
  border-radius: 0.75rem;
}

/* Pro-badges */
.badge {
  font-size: 0.95em;
  letter-spacing: 0.03em;
  padding: 0.45em 0.7em;
}

/* Collapsible form margin */
.collapse.show {
  margin-bottom: 1.5rem;
}

/* -------- RESPONSIVE -------- */
@media (max-width: 991px) {
  .container, .container-lg, .container-md, .container-sm {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .card-body {
    padding: 1rem 0.5rem;
  }
  .employee-header-card .text-end {
    margin-top: 1rem;
    text-align: left!important;
  }
}

@media (max-width: 768px) {
  .card-body {
    padding: 0.7rem 0.2rem;
  }
  .card-body table,
  .card-body .table {
    font-size: 0.92em;
    max-width: 100vw;
    display: block;
    overflow-x: auto;
  }
  .table th, .table td {
    max-width: 100px;
    font-size: 0.89em;
  }
  .form-label {
    font-size: 0.98em;
  }
  .navbar-brand {
    font-size: 1.1em;
  }
}

@media (max-width: 480px) {
  .card, .card-body {
    padding: 0.4rem 0.1rem;
  }
  .table th, .table td {
    max-width: 70px;
    font-size: 0.82em;
    padding: 0.22rem 0.3rem;
  }
}