/**
 * Uitlener Startpagina base theme – applied app-wide
 * Containers: red border, no shadow
 * Buttons: Bekijk Opdrachten style (transparent, border, no shadow)
 * Font consistency, dropdown arrows, input fields, notifications
 */

:root {
  --portal-primary: #de5945;
  --portal-primary-dark: #cc3a24;
  --portal-primary-border: rgba(222, 89, 69, 0.25);
  --portal-charcoal: #302826;
  --portal-earth: #413f3c;
  --portal-slate: #555352;
  --portal-cloud: #6e6e70;
  --portal-white: #ffffff;
}

/* ========== CONTAINERS: Red border, no shadow ========== */
/* Exclude sidebar/menu from container overrides */
.portal-hero,
.portal-card,
.card.pg-card,
.pg-card,
.material-card,
.uitlener-card,
.uitlener-form-card,
.uitlener-invite-card,
.assignment-card,
.summary-card,
.card {
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

.portal-hero:hover,
.portal-card:hover,
.card.pg-card:hover,
.pg-card:hover,
.material-card:hover {
  box-shadow: none !important;
}

.portal-page-transparent .portal-hero,
.portal-page-transparent .portal-card,
.portal-page-transparent .card.pg-card,
.portal-page-transparent .uitlener-form-card,
.portal-page-transparent .uitlener-invite-card,
.portal-page-transparent .assignment-card,
.portal-page-transparent .summary-card {
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

.portal-kpi-card,
.portal-stat-card {
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

.portal-instruction-modal .modal-content {
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

/* Modal dialogs (exclude menu) */
.modal-content:not(#sidebar *) {
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

/* Dropdown / card containers on pages */
.dropdown-menu.portal-notif-dropdown,
.portal-notif-panel {
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

/* ========== CARD HEADERS: Black text (no white) ========== */
.portal-card-header,
.portal-card .pg-card-header,
.card .pg-card-header,
.pg-card-header,
.material-card-header,
.uitlener-card-header,
.assignment-card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  color: var(--portal-charcoal, #302826) !important;
}

.portal-card-header h1,
.portal-card-header h2,
.portal-card-header h3,
.portal-card-header h4,
.portal-card-header h5,
.portal-card-header h6,
.portal-card .pg-card-header h1,
.portal-card .pg-card-header h2,
.portal-card .pg-card-header h3,
.portal-card .pg-card-header h4,
.portal-card .pg-card-header h5,
.portal-card .pg-card-header h6,
.pg-card-header h5,
.material-card-header,
.uitlener-card-header h2,
.assignment-card-header h2 {
  color: var(--portal-charcoal, #302826) !important;
}

.portal-card-header p,
.portal-card .pg-card-header p {
  color: var(--portal-charcoal, #302826) !important;
}

/* Portal hero: black text */
.portal-hero,
.portal-hero-eyebrow,
.portal-hero-title,
.portal-hero-text,
.portal-hero h1,
.portal-hero p {
  color: var(--portal-charcoal, #302826) !important;
}

.portal-hero {
  background: transparent !important;
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

/* ========== BUTTONS: Bekijk Opdrachten style (no shadow, no grey bg) ========== */
.btn:not(.sidebar-logout-btn),
.btn-primary:not(.sidebar-logout-btn),
.btn-secondary,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.portal-btn,
.portal-btn-primary,
.portal-btn-secondary,
.portal-btn-dark,
.portal-btn-light,
.portal-btn-ghost,
.portal-btn-hero-cta,
.btn-uitlener,
.btn-uitlener-outline,
.btn-uitlener-solid,
.uitlener-dashboard-btn,
.assignment-upload-trigger,
.portal-upload-trigger,
.wizard-info-toggle,
.wizard-wrapper .wizard-link.active,
.wizard-wrapper .btn-wizard-accent {
  box-shadow: none !important;
  background: transparent !important;
  border: 1px solid rgba(110, 110, 112, 0.35) !important;
  color: var(--portal-charcoal, #302826) !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-dark:hover,
.btn-dark:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.portal-btn:hover,
.portal-btn:focus,
.portal-btn-primary:hover,
.portal-btn-primary:focus,
.portal-btn-secondary:hover,
.portal-btn-secondary:focus,
.portal-btn-dark:hover,
.portal-btn-dark:focus,
.portal-btn-light:hover,
.portal-btn-light:focus,
.portal-btn-ghost:hover,
.portal-btn-ghost:focus,
.btn-uitlener:hover,
.btn-uitlener:focus,
.btn-uitlener-outline:hover,
.btn-uitlener-outline:focus,
.uitlener-dashboard-btn:hover,
.uitlener-dashboard-btn:focus,
.assignment-upload-trigger:hover,
.assignment-upload-trigger:focus,
.portal-upload-trigger:hover,
.portal-upload-trigger:focus {
  box-shadow: none !important;
  background: rgba(110, 110, 112, 0.08) !important;
  border-color: rgba(110, 110, 112, 0.45) !important;
  color: var(--portal-charcoal, #302826) !important;
}

/* Sidebar/navigation: do not touch - restore original button styles */
#sidebar .btn,
#sidebar .sidebar-logout-btn,
#sidebar .btn-primary,
#sidebar button[type="submit"] {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  background: #de5945 !important;
  border: 1px solid #cc3a24 !important;
  color: #ffffff !important;
}

#sidebar .sidebar-logout-btn:hover,
#sidebar .sidebar-logout-btn:focus,
#sidebar .btn:hover,
#sidebar .btn:focus {
  background: #cc3a24 !important;
  border-color: #302826 !important;
  color: #ffffff !important;
}

body.theme-styr #sidebar .btn,
body.theme-styr #sidebar .sidebar-logout-btn {
  background: #ccddec !important;
  border-color: #ccddec !important;
  color: #0a1f3d !important;
}

/* Primary/danger buttons: red border, transparent bg */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.portal-btn-primary,
.portal-btn-primary:hover,
.portal-btn-primary:focus,
.wizard-wrapper .wizard-link.active,
.wizard-wrapper .btn-wizard-accent,
.wizard-wrapper .btn-wizard-accent:hover,
.wizard-wrapper .btn-wizard-accent:focus {
  background: transparent !important;
  border: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  color: var(--portal-charcoal, #302826) !important;
}

.wizard-wrapper .wizard-link.active:hover,
.wizard-wrapper .wizard-link.active:focus {
  background: rgba(222, 89, 69, 0.08) !important;
  border-color: var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  color: var(--portal-charcoal, #302826) !important;
}

/* ========== DROPDOWN BOXES: Arrow at far right, aligned inside ========== */
.form-select,
select.form-control,
select.form-select-sm,
.language-selector-control,
#language-selector {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #e8e8e8 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23302826' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
  color: var(--portal-charcoal, #302826) !important;
}

/* Display-only/disabled dropdown: white background */
.form-select:disabled,
select:disabled {
  background-color: #ffffff !important;
}

/* ========== INPUT FIELDS ========== */
/* User fill-in: light grey background */
.form-control:not([readonly]):not(:disabled),
input.form-control:not([readonly]):not(:disabled),
textarea.form-control:not([readonly]):not(:disabled) {
  background-color: #e8e8e8 !important;
  color: var(--portal-charcoal, #302826) !important;
}

/* Display-only / readonly: white background */
.form-control[readonly],
.form-control:disabled,
input.form-control[readonly],
input.form-control:disabled,
textarea.form-control[readonly],
textarea.form-control:disabled,
.modern-input:read-only {
  background-color: #ffffff !important;
  color: var(--portal-charcoal, #302826) !important;
  border: 1px solid rgba(110, 110, 112, 0.35) !important;
}

/* ========== CARD FOOTER, BODY, TABLES ========== */
.portal-card-footer,
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  color: var(--portal-charcoal, #302826) !important;
}

.portal-card-body,
.pg-card-body,
.card-body,
.material-card-body,
.uitlener-card-body,
.assignment-card-body {
  color: var(--portal-charcoal, #302826) !important;
}

/* Tables */
.table,
.portal-table,
.table th,
.table td,
.portal-table th,
.portal-table td {
  color: var(--portal-charcoal, #302826) !important;
  font-family: inherit;
}

.table-header-dark th {
  background: transparent !important;
  color: var(--portal-charcoal, #302826) !important;
  border-bottom: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
}

/* ========== FONT CONSISTENCY ========== */
body,
input,
select,
textarea,
button,
.form-control,
.form-select,
.table,
.portal-table,
.portal-card-body,
.portal-card-header,
.uitlener-card-body,
.uitlener-card-header,
.dropdown-menu,
.portal-notif-panel,
.language-selector-control {
  font-family: Inter, Helvetica, Arial, sans-serif !important;
}

/* ========== LANGUAGE SELECTOR ========== */
.language-selector-control,
#language-selector {
  border: 1px solid rgba(110, 110, 112, 0.35) !important;
  background-color: #e8e8e8 !important;
  color: var(--portal-charcoal, #302826) !important;
  box-shadow: none !important;
}

/* ========== NOTIFICATION BELL & DROPDOWN ========== */
.portal-notif-header {
  background: transparent !important;
  border-bottom: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  color: var(--portal-charcoal, #302826) !important;
}

.portal-notif-header-title,
.portal-notif-mark-all {
  color: var(--portal-charcoal, #302826) !important;
}

.portal-notif-mark-all {
  background: transparent !important;
  border: 1px solid rgba(110, 110, 112, 0.35) !important;
}

.portal-notif-mark-all:hover:not(:disabled) {
  background: rgba(110, 110, 112, 0.08) !important;
  color: var(--portal-charcoal, #302826) !important;
}

.portal-notif-badge {
  color: var(--portal-charcoal, #302826) !important;
  background: transparent !important;
  border: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
}

/* ========== WHITE -> BLACK font colors ========== */
.text-white,
.text-light,
.portal-status-chip,
.portal-status-chip-muted,
.badge-new,
.bg-gradient-primary,
.table-header-dark th {
  color: var(--portal-charcoal, #302826) !important;
}

.portal-status-chip,
.portal-status-chip-muted {
  background: transparent !important;
  border: 1px solid rgba(110, 110, 112, 0.35) !important;
}

.portal-release-banner,
.portal-release-banner p,
.portal-release-banner a {
  color: var(--portal-charcoal, #302826) !important;
}

.portal-release-banner {
  background: transparent !important;
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

/* Wizard steps counter */
.portal-steps li::before,
.portal-instruction-steps > li::before {
  background: transparent !important;
  color: var(--portal-charcoal, #302826) !important;
  border: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

/* Portal instruction modal header */
.portal-instruction-modal .modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  color: var(--portal-charcoal, #302826) !important;
}

.portal-instruction-eyebrow {
  color: var(--portal-charcoal, #302826) !important;
}

/* Overall card header */
.overall-card-header {
  background: transparent !important;
  border-bottom: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  color: var(--portal-charcoal, #302826) !important;
}

/* Quickscan / portal hero quickscan */
.portal-hero-quickscan,
.portal-hero-quickscan h1,
.portal-hero-quickscan p {
  color: var(--portal-charcoal, #302826) !important;
}

.portal-hero-quickscan {
  background: transparent !important;
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

/* Transformations hero */
.transformations-hero,
.transformations-hero .transformations-date,
.transformations-hero .transformations-message {
  color: var(--portal-charcoal, #302826) !important;
}

.transformations-hero {
  background: transparent !important;
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

/* Data type pill in datatable */
.pg-datatable .data-type-pill {
  background: transparent !important;
  color: var(--portal-charcoal, #302826) !important;
  border: 1px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
}

/* ========== TABS: Same style as Inlener Arbeidsvoorwaarden Overzicht ========== */
.nav-tabs,
.summary-tab-nav.nav-tabs,
.uitlener-tabs,
.assignment-tab-nav .nav-tabs,
.nav.nav-tabs {
  border-bottom: 1px solid rgba(48, 40, 38, 0.15);
  margin-bottom: 1.5rem;
  border-top: none;
  border-left: none;
  border-right: none;
}

.nav-tabs .nav-link,
.summary-tab-nav .nav-link,
.uitlener-tabs .nav-link,
.assignment-tab-nav .nav-link,
.portal-tab-link {
  color: #6e6e70;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  margin-bottom: -1px;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.summary-tab-nav .nav-link:hover,
.summary-tab-nav .nav-link:focus,
.uitlener-tabs .nav-link:hover,
.uitlener-tabs .nav-link:focus,
.assignment-tab-nav .nav-link:hover,
.assignment-tab-nav .nav-link:focus,
.portal-tab-link:hover,
.portal-tab-link:focus {
  color: var(--portal-charcoal, #302826);
  border-color: transparent;
  border-bottom-color: transparent;
  background: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.summary-tab-nav .nav-link.active,
.uitlener-tabs .nav-link.active,
.assignment-tab-nav .nav-link.active,
.portal-tab-link.active {
  color: var(--portal-primary, #de5945);
  border-bottom-color: var(--portal-primary, #de5945);
  background: transparent;
}

.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus,
.summary-tab-nav .nav-link.active:hover,
.summary-tab-nav .nav-link.active:focus,
.uitlener-tabs .nav-link.active:hover,
.uitlener-tabs .nav-link.active:focus,
.portal-tab-link.active:hover,
.portal-tab-link.active:focus {
  color: var(--portal-primary, #de5945);
  border-bottom-color: var(--portal-primary, #de5945);
}

.nav-tabs .nav-link.disabled,
.uitlener-tabs .nav-link.disabled {
  color: var(--portal-cloud, #6e6e70);
  opacity: 0.7;
}

/* Pill-style tabs: same color scheme (vertical pills use left border) */
.nav-pills .nav-link {
  color: #6e6e70;
  font-weight: 600;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 3px solid transparent;
}

.nav-pills.flex-column .nav-link.active {
  border-bottom: none;
  border-left: 3px solid var(--portal-primary, #de5945);
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
  color: var(--portal-charcoal, #302826);
  background: transparent;
}

.nav-pills .nav-link.active {
  color: var(--portal-primary, #de5945);
  border-bottom-color: var(--portal-primary, #de5945);
  background: transparent;
}

/* SUGB webform detail: main chapter nav vertical (left); subtabs stay horizontal inside panes */
.sugb-webform-detail-layout .sugb-webform-main-tabs {
  border: none !important;
  margin-bottom: 0 !important;
}
.sugb-webform-detail-layout .sugb-webform-main-tabs-col {
  border-right: 1px solid rgba(48, 40, 38, 0.12);
  padding-right: 1rem;
}
@media (max-width: 991.98px) {
  .sugb-webform-detail-layout .sugb-webform-main-tabs-col {
    border-right: none;
    border-bottom: 1px solid rgba(48, 40, 38, 0.12);
    padding-right: 0;
    padding-bottom: 1rem;
    margin-bottom: 0.25rem;
  }
}
.sugb-webform-detail-layout .sugb-webform-main-tabs .nav-item {
  width: 100%;
}
.sugb-webform-detail-layout .sugb-webform-main-tabs .nav-link {
  width: 100%;
  text-align: start;
  border-bottom: none !important;
  border-left: 3px solid transparent;
  margin-bottom: 0.125rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.35rem;
  white-space: normal;
  line-height: 1.25;
}
.sugb-webform-detail-layout .sugb-webform-main-tabs .nav-link.active {
  border-bottom: none !important;
  border-left-color: var(--portal-primary, #de5945);
  background: rgba(222, 89, 69, 0.07);
  color: var(--portal-primary, #de5945);
}
.sugb-webform-detail-layout .sugb-webform-main-tabs .nav-link:hover,
.sugb-webform-detail-layout .sugb-webform-main-tabs .nav-link:focus {
  border-bottom: none !important;
  color: var(--portal-charcoal, #302826);
}
.sugb-webform-detail-layout .sugb-webform-main-tabs .nav-link.active:hover,
.sugb-webform-detail-layout .sugb-webform-main-tabs .nav-link.active:focus {
  color: var(--portal-primary, #de5945);
}

/* Flash messages / alerts: black text, light background (Uitlener style) */
.alert,
.alert *,
.pg-notification,
.pg-notification *,
.notification-item,
.notification-item * {
  color: var(--portal-charcoal, #302826) !important;
}

.alert,
.pg-notification,
.notification-item {
  background-color: #ffffff !important;
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
  box-shadow: none !important;
}

.alert a,
.pg-notification a,
.notification-item a {
  color: var(--portal-charcoal, #302826) !important;
}

/* Login alert (form errors) */
.alert-danger,
.alert-danger * {
  color: var(--portal-charcoal, #302826) !important;
  background-color: #ffffff !important;
  border: 2px solid var(--portal-primary-border, rgba(222, 89, 69, 0.25)) !important;
}

/* SUGB Verlof sub-tab tiles (e.g. Aanvulling Wazo, ADV/ATV): very light portal-primary tint */
.portal-card.sugb-aanvulling-wazo-tile,
.portal-card.sugb-verlof-subtab-tile {
  background: rgba(222, 89, 69, 0.07) !important;
}
@supports (background: color-mix(in srgb, red 1%, white)) {
  .portal-card.sugb-aanvulling-wazo-tile,
  .portal-card.sugb-verlof-subtab-tile {
    background: color-mix(
      in srgb,
      var(--portal-primary, #de5945) 7%,
      #ffffff
    ) !important;
  }
}