/* Website-Look (Anlehnung an hronlinemanager.com, Stand 07.10.2026, nur lokal).
   Eingebunden in resources/views/layout.blade.php NACH app.min.css, damit kein Build noetig ist.
   Farben der Website: Blau #2d779c, Rot-Akzent #a71e04, Grau #ececec / #fafafa / #6b7280.
   Schrift: 'Open Sans' ohne Nachladen (faellt ohne lokale Installation auf Arial zurueck).
   Rueckweg: <link> im Layout entfernen, Kopfzeile/Modul-Partial aus Git zuruecksetzen. */

:root {
    --hr-blue: #2d779c;
    --hr-red: #a71e04;
    --hr-line: #ececec;
    --hr-bg-soft: #fafafa;
    --hr-muted: #6b7280;
    --hr-text: #333;
}

/* ---------- Kopfzeile: eine Zeile, weiss, duenne Unterlinie ---------- */
.navbar.hr-navbar.hr-header {
    background: #fff;
    filter: none;
    border: 0;
    border-bottom: 1px solid var(--hr-line);
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    margin-bottom: 15px;
    font-family: 'Open Sans', Arial, sans-serif;
}
.hr-header .hr-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    flex-wrap: nowrap;
}
.hr-header .hr-header-logo {
    flex: 0 1 auto;
    min-width: 0;
}
.hr-header .hr-header-logo h1.brand {
    margin: 0;
    max-width: 100%;
}
.hr-header .hr-header-user {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hr-header .hr-header-user > li { position: relative; }
.hr-header .hr-user-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    color: var(--hr-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.hr-header .hr-user-toggle:hover,
.hr-header .hr-user-toggle:focus,
.hr-header .open > .hr-user-toggle {
    background: var(--hr-bg-soft);
    color: var(--hr-blue);
    text-decoration: none;
    outline: none;
}
.hr-header .hr-user-toggle .fa { font-size: 22px; color: var(--hr-blue); }
.hr-header .hr-user-company { color: var(--hr-muted); font-weight: 400; }
.hr-header .hr-user-company::before { content: "\00b7"; margin-right: 8px; color: #c4c7cc; }
.hr-header .dropdown-menu {
    min-width: 260px;
    border: 1px solid var(--hr-line);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    font-family: 'Open Sans', Arial, sans-serif;
}
.hr-header .dropdown-menu > li > a {
    padding: 6px 18px;
    color: var(--hr-blue) !important; /* ueberstimmt die alten Inline-Farben #337ab7 */
}
.hr-header .dropdown-menu > li > a:hover { background: var(--hr-bg-soft); }
.hr-header .dropdown-header.hr-user-head {
    color: var(--hr-muted);
    font-size: 12px;
    white-space: normal;
    line-height: 1.4;
}
.hr-header .dropdown-header.hr-user-head strong { color: var(--hr-text); }
.hr-header .hr-lang-row {
    display: flex;
    gap: 14px;
    padding: 4px 18px 6px;
    font-size: 13px;
}
.hr-header .hr-lang-row a { color: var(--hr-muted); text-decoration: none; }
.hr-header .hr-lang-row a:hover { color: var(--hr-blue); }
.hr-header .hr-lang-row .hr-lang-active { color: var(--hr-blue); font-weight: 700; }

@media (max-width: 767px) {
    .hr-header .hr-header-inner { padding: 10px 12px; }
    .hr-header .hr-user-name,
    .hr-header .hr-user-company { display: none; }
    .hr-header .hr-header-logo h1.brand { width: 220px; background-size: 220px 25px !important; height: 30px; }
}
@media (min-width: 768px) {
    .hr-header .dropdown-header.hr-user-head { display: none; }
}

/* ---------- Modul-Navigation (Website: .mod_navigation_page_tools) ----------
   Gemeinsame Klassen fuer Modulseiten (partials/module-nav) und spaeter das Reportcenter.
   <nav class="hr-modnav"><ul><li class="active"><a><img class="hr-modnav-icon"><span class="hr-modnav-label"> */
.hr-modnav {
    font-family: 'Open Sans', Arial, sans-serif;
}
.hr-modnav ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--hr-line);
}
.hr-modnav li {
    flex: 1 1 0;
    min-width: 96px;
    margin: 0;
}
.hr-modnav li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 10px 6px 8px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: var(--hr-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.hr-modnav li > a:hover,
.hr-modnav li > a:focus {
    background: var(--hr-bg-soft);
    color: var(--hr-blue);
    text-decoration: none;
    outline: none;
}
.hr-modnav li.active > a {
    background: var(--hr-bg-soft);
    border-bottom-color: var(--hr-blue);
    color: var(--hr-blue);
}
.hr-modnav .hr-modnav-icon {
    width: 40px;
    height: 40px;
    display: block;
}
.hr-modnav li:not(.active) .hr-modnav-icon { opacity: .75; }
.hr-modnav li > a:hover .hr-modnav-icon { opacity: 1; }
.hr-modnav .hr-modnav-label small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .5px;
}

/* Modulseiten: Leiste sitzt rechts neben dem Stellennamen (wie bisher pull-right) */
.hr-modnav.hr-modnav-compact li { flex: 0 0 132px; min-width: 0; }
.hr-modnav.hr-modnav-compact li > a { font-size: 11px; }
.hr-modnav .hr-modnav-label { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 767px) {
    /* 3 + 3 beim Umbruch */
    .hr-modnav li { flex: 0 0 33.333%; }
    .hr-modnav.hr-modnav-compact { min-width: 0; width: 100%; float: none !important; }
    .hr-modnav.hr-modnav-compact li { flex: 0 0 33.333%; }
}

/* Stellenkopf auf den Modulseiten (enthaelt die Leiste): Website-Grau statt #ededed */
.btn-jobname {
    background-color: #fff;
    border: 1px solid var(--hr-line);
    border-radius: 4px !important;
    overflow: hidden;
}
.btn-jobname .hr-modnav-compact ul { border-bottom: 0; height: 92px; }
.btn-jobname .hr-modnav-compact li > a { margin-bottom: 0; }
@media (max-width: 767px) {
    .btn-jobname { height: auto; }
    .btn-jobname .hr-modnav-compact ul { height: auto; }
}

/* app.css setzt a, p, span global auf Klavika 16px: in Kopfzeile und Modulleiste erben lassen */
.hr-header span, .hr-header a, .hr-header p,
.hr-modnav span, .hr-modnav a {
    font-family: inherit;
}
.hr-header span, .hr-modnav span { font-size: inherit; }
.hr-header .caret { font-size: 0; }

/* ======================================================================
   REPORTCENTER (Paket A / Mockup 2c, 20.10.2026): Rahmen, Titelzeile, Tabs, Werkzeugzeile.
   index.blade.php + person.blade.php, Partial partials/reportcenter-switch.
   ====================================================================== */
:root {
    --hr-rc-line: #dfe4e8;
    --hr-rc-text: #1f2d3a;
    --hr-rc-muted: #6c7a86;
    --hr-rc-border: #d5dbe0;
    --hr-row-hover: #eaf1f5;   /* Look B: hell-blau */
    --hr-row-zebra: #f8fafb;
}
body[data-look="a"] { --hr-row-hover: #e6f2f4; } /* Look A: hell-teal */

/* Rahmen: elf Zwoelftel breit, mittig (wie #tabarea col-xs-11) */
.hr-rc { width: calc(100% * 11 / 12); margin-left: calc(100% / 24); }
@media (max-width: 991px) { .hr-rc { width: 100%; margin-left: 0; } }

.hr-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; flex: none; }
.hr-ic-xs { width: 13px; height: 13px; }

/* Titelzeile: Ueberschrift links, Primaerknopf rechts */
.hr-rc-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin: 4px 0 14px; }
.hr-rc-titlerow h3 { margin: 0; font-size: 22px; color: var(--hr-rc-text); }
.hr-rc-titlerow .btn-add-job { position: static; min-height: 0; margin: 0; }
.hr-rc .add-job.hr-rc-primary,
.hr-rc .add-job.absolute.hr-rc-primary {
    position: static; width: auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: 0; border-radius: 6px;
    background-color: var(--hr-blue); color: #fff;
    font: 600 13px 'Open Sans', Arial, sans-serif; line-height: 1.4; white-space: nowrap;
}
.hr-rc .hr-rc-primary .add-job-text { font: inherit; margin: 0; color: inherit; }
.hr-rc .hr-rc-primary:hover, .hr-rc .hr-rc-primary:focus { color: #fff; opacity: .9; }
.hr-rc .hr-rc-primary:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: 2px; }

/* Tabs "Stellen | Personen": nackte Text-Tabs, aktiv mit 3px-Unterlinie (ueberstimmt die
   seiteneigenen .nav-tabs-Farben in index/person) */
.hr-rctabs { font-family: 'Open Sans', Arial, sans-serif; }
.hr-rctabs .nav-tabs { border-bottom: 1px solid var(--hr-rc-line); display: flex; gap: 4px; }
.hr-rctabs .nav-tabs > li { float: none; margin-bottom: -1px; }
.hr-rctabs .nav-tabs > li > a,
.hr-rctabs .nav-tabs > li > a:hover,
.hr-rctabs .nav-tabs > li > a:focus {
    margin: 0; padding: 9px 16px 8px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    background: transparent; color: var(--hr-rc-muted);
    font-family: inherit; font-size: 14px; font-weight: 400; text-decoration: none; outline: none;
}
.hr-rctabs .nav-tabs > li > a:hover { color: var(--hr-rc-text); }
.hr-rctabs .nav-tabs > li > a:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: -2px; }
.hr-rctabs .nav-tabs > li.active > a,
.hr-rctabs .nav-tabs > li.active > a:hover,
.hr-rctabs .nav-tabs > li.active > a:focus {
    background: transparent; color: var(--hr-blue); border: 0; border-bottom: 3px solid var(--hr-blue); font-weight: 700;
}
.hr-rctabs-pdf { font-size: 13px; color: var(--hr-red); margin-left: 4px; }

/* Werkzeugzeile: links Filter, rechts Werkzeuge + Suche */
.hr-rc-tool { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 8px 16px; padding: 12px 0; font-size: 12px; font-family: 'Open Sans', Arial, sans-serif; }
.hr-rc-filters, .hr-rc-actions, .hr-rc-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.hr-rc-actions { margin-left: auto; justify-content: flex-end; }
.hr-rc-tool span, .hr-rc-tool label, .hr-rc-tool a, .hr-rc-tool button { font-family: inherit; }
/* app.css setzt span global auf Klavika 16px (Modus-Knopf "Mehrfach-Selektion" wurde riesig) */
.hr-rc-tool .btn span, .hr-rc-tool .btn { font-size: 12px; }
.hr-rc-sel { display: flex; align-items: center; gap: 5px; margin: 0; white-space: nowrap; }
.hr-rc-sel > label, .hr-rc-sel .hr-toolbar-examples-label { margin: 0; font-size: 12px; font-weight: 400; color: var(--hr-rc-muted); }
.hr-rc-tool .bootstrap-select > .btn,
.hr-rc-tool .dt-length select {
    padding: 4px 8px; font-size: 12px; color: var(--hr-rc-text);
    border: 1px solid var(--hr-rc-border); border-radius: 4px; background: #fff; box-shadow: none; text-shadow: none;
}
.hr-rc-tool .btn-sm { padding: 4px 9px; font-size: 12px; }
.hr-rc-tool .hr-btn-label { display: none; }
.hr-rc-tool .switch { width: 36px; height: 20px; margin: 0; vertical-align: middle; }
.hr-rc-tool .switch .slider:before { height: 14px; width: 14px; left: 3px; bottom: 3px; }
.hr-rc-tool .switch input:checked + .slider { background-color: var(--hr-blue); }
.hr-rc-tool .switch input:checked + .slider:before { transform: translateX(16px); }
/* DataTables "Zeilen" und "Suche" (per JS in die Slots verschoben) */
.hr-rc-slot { display: flex; align-items: center; }
.hr-rc-tool .dt-length, .hr-rc-tool .dt-search { display: flex !important; align-items: center; gap: 5px; margin: 0; }
.hr-rc-tool .dt-length label { margin: 0; font-size: 12px; font-weight: 400; color: var(--hr-rc-muted); }
.hr-rc-tool .dt-length select { margin: 0 !important; width: auto !important; }
.hr-rc-tool .dt-search label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hr-rc-tool .dt-search input {
    width: 150px !important; margin: 0 !important; padding: 4px 8px 4px 26px; font-size: 12px;
    border: 1px solid var(--hr-rc-border); border-radius: 6px; color: var(--hr-rc-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z M15.5 15.5L21 21'/%3E%3C/svg%3E") no-repeat 8px 50% / 13px 13px;
}
.hr-rc-tool .dt-search input:focus { border-color: var(--hr-blue); outline: none; box-shadow: none; }
/* Sekundaerknoepfe */
.hr-rc-sec {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
    background: #fff; border: 1px solid #b9c4cc; border-radius: 6px;
    color: var(--hr-rc-text); font: 600 12px 'Open Sans', Arial, sans-serif; line-height: 1.4; white-space: nowrap; cursor: pointer;
}
.hr-rc-sec sup { font-size: 9px; }
.hr-rc-sec:hover, .hr-rc-sec:focus, .hr-rc-dd.open > .hr-rc-sec { border-color: var(--hr-blue); color: var(--hr-blue); outline: none; }
.hr-rc-sec:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: 1px; }
.hr-rc-dd { position: relative; }
.hr-rc-dd .dropdown-menu > li > a { padding: 6px 14px; font-size: 13px; color: var(--hr-rc-text); }
.hr-rc-dd .dropdown-menu > li > a:hover { background: var(--hr-row-hover); color: var(--hr-blue); }
@media (max-width: 767px) { .hr-rc-actions { margin-left: 0; justify-content: flex-start; } }

/* Stellenliste #jobs (Paket A / Mockup 2c): Kopf 44 px, Zebra, Hover hell, Titelzelle mit
   Schloss, Zustandspunkten (Modulfarben) und Anker-Etikett, Stellenwert rechtsbuendig */
.hr-rc table#jobs { font-family: 'Open Sans', Arial, sans-serif; }
/* app.min.css (Build aus resources/sass) erzwingt #header-row-1 und dessen th auf 80 px !important;
   hier ohne Build ueberstimmt (hoehere Spezifitaet, ebenfalls !important) */
.hr-rc table#jobs > thead > tr#header-row-1,
.hr-rc table#jobs > thead > tr#header-row-1 > th { height: 44px !important; min-height: 44px !important; max-height: 44px !important; }
.hr-rc table#jobs > thead > tr#header-row-1 > th {
    padding: 0 8px; vertical-align: middle; text-align: left;
    background: #fff; border-bottom: 2px solid var(--hr-rc-line);
    font-size: 12px; font-weight: 600; color: #4a5866; white-space: nowrap;
}
.hr-rc table#jobs > thead > tr#header-row-1 > th.hr-rc-num { text-align: right; }
.hr-rc table#jobs > thead > tr#header-row-1 > th .dt-column-title { font-size: 13px; color: #4a5866; }
.hr-rc table#jobs > thead > tr.dtcc-filters > th { background: #fafbfc !important; border-bottom: 1px solid var(--hr-rc-line); }
.hr-rc table#jobs > tbody > tr > td {
    padding: 9px 8px; vertical-align: middle; border-top: 0; border-bottom: 1px solid #eef1f3;
    font-size: 13px; color: var(--hr-rc-text);
}
.hr-rc table#jobs > tbody > tr:nth-child(even) > td { background-color: var(--hr-row-zebra); }
.hr-rc table#jobs > tbody > tr:nth-child(odd) > td { background-color: #fff; }
.hr-rc table#jobs > tbody > tr:hover > td,
.hr-rc table#jobs > tbody > tr:focus-within > td,
.hr-rc table#jobs > tbody > tr.is-open > td { background-color: var(--hr-row-hover) !important; }
.hr-rc table#jobs td.tr-id span { font-size: 13px !important; color: #4a5866 !important; font-variant-numeric: tabular-nums; }
.hr-rc table#jobs td.tr-text a { color: var(--hr-rc-text) !important; font-family: inherit !important; font-size: 13px; }
.hr-rc table#jobs td.hr-rc-num, .hr-rc table#jobs th.hr-rc-num { text-align: right; font-variant-numeric: tabular-nums; }
.hr-rc table#jobs td.hr-rc-num { padding-right: 16px; }

.hr-rc-titlecell { white-space: normal; }
.hr-rc .hr-rc-job { color: var(--hr-blue); font-weight: 600; font-size: 13px; font-family: inherit; text-decoration: none; cursor: pointer; }
.hr-rc a.hr-rc-job:hover { text-decoration: underline; }
.hr-rc .hr-rc-job.is-locked, .hr-rc .hr-rc-job.is-readonly { color: var(--hr-rc-text); cursor: default; }
.hr-rc .hr-rc-job.is-sample { color: var(--hr-red); cursor: default; }
.hr-rc a.hr-rc-job.is-locked:hover, .hr-rc a.hr-rc-job.is-sample:hover { text-decoration: none; }
.hr-rc-lock { display: inline-flex; vertical-align: middle; margin-left: 5px; color: #8a96a0; }
.hr-rc-lock[hidden] { display: none; }
.hr-rc-lock .hr-ic { width: 12px; height: 12px; }
/* Zustandspunkte: Ersatz fuer die Modulspalten; Farben wie die Website-Kreise */
.hr-rc-c1 { color: #0E7188; --mc-soft: rgba(14, 113, 136, .12); }
.hr-rc-c2 { color: #3D6296; --mc-soft: rgba(61, 98, 150, .12); }
.hr-rc-c3 { color: #A35254; --mc-soft: rgba(163, 82, 84, .12); }
.hr-rc-c4 { color: #AD8E3B; --mc-soft: rgba(173, 142, 59, .12); }
.hr-rc-dots { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; vertical-align: middle; opacity: .8; }
.hr-rc-pt { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; background: transparent; display: block; }
.hr-rc-pt.is-on { background: currentColor; }
.hr-rc-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; vertical-align: middle;
    border: 1px solid var(--hr-rc-border); border-radius: 10px; font-size: 10.5px; line-height: 16px; color: #4a5866; white-space: nowrap; }

/* Hover-Streifen in der schmalen letzten Spalte (Paket A / Mockup 2c): absolut, ragt nach links ueber
   Stellenwert/Update; Deckkraft statt Hoehe, linker Verlauf 24 px in der Hover-Farbe */
.hr-rc table#jobs > thead > tr > th.hr-rc-acth { width: 1px; padding: 0 !important; }
.hr-rc table#jobs > tbody > tr > td.hr-rc-actcell { position: relative; width: 1px; padding: 0; }
.hr-rc-strip {
    position: absolute; right: 8px; top: 0; bottom: 0;
    display: flex; align-items: center; gap: 2px; padding-left: 24px; white-space: nowrap;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--hr-row-hover) 24px);
    opacity: 0; pointer-events: none; transition: opacity .1s;
}
.hr-rc table#jobs > tbody > tr:hover .hr-rc-strip,
.hr-rc table#jobs > tbody > tr:focus-within .hr-rc-strip,
.hr-rc table#jobs > tbody > tr.is-open .hr-rc-strip,
.hr-rc table#jobs > tbody > tr.is-menu .hr-rc-strip { opacity: 1; pointer-events: auto; z-index: 5; }
.hr-rc-mod, .hr-rc-btn {
    width: 32px; height: 32px; display: grid; place-items: center; flex: none;
    padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; text-decoration: none;
}
.hr-rc-mod .hr-ic, .hr-rc-btn .hr-ic { width: 18px; height: 18px; }
/* Gruppe 1: Modul-Icons in Modulfarbe; vorhanden = gefuellt, fehlt = Umriss 45 % */
.hr-rc-mod.is-on .hr-ic { fill: currentColor; fill-opacity: .18; }
.hr-rc-mod.is-off .hr-ic { opacity: .45; }
.hr-rc-mod:hover, .hr-rc-mod:focus-visible, .hr-rc-moddd.open > .hr-rc-mod { background: var(--mc-soft); text-decoration: none; }
.hr-rc-mod:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.hr-rc-mod.is-none { visibility: hidden; cursor: default; }
.hr-rc-moddd { position: relative; }
.hr-rc-moddd .dropdown-menu { min-width: 220px; font-size: 13px; }
.hr-rc-moddd .dropdown-menu > li > a { padding: 6px 14px; color: var(--hr-rc-text); font-size: 13px; font-family: 'Open Sans', Arial, sans-serif; }
.hr-rc-moddd .dropdown-menu > li > a:hover { background: var(--hr-row-hover); color: var(--hr-blue); }
.hr-rc-moddd .dropdown-header { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
/* Trenner zwischen den Gruppen */
.hr-rc-sep { width: 1px; height: 20px; background: #c9d1d7; margin: 0 6px; flex: none; }
/* Gruppe 2: Zeilenaktionen grau */
.hr-rc-btn { color: #4a5866; }
.hr-rc-btn:hover, .hr-rc-btn:focus-visible { color: var(--hr-blue); background: rgba(14, 113, 136, .1); }
.hr-rc-btn.is-danger:hover, .hr-rc-btn.is-danger:focus-visible { color: #c62828; background: rgba(198, 40, 40, .08); }
.hr-rc-btn:focus-visible, .hr-rc-more:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: -2px; }
.hr-rc-lockbtn .hr-ic-locked { display: none; }
.hr-rc-lockbtn.is-locked .hr-ic-locked { display: block; }
.hr-rc-lockbtn.is-locked .hr-ic-unlocked { display: none; }
.hr-rc-more { display: none; }
@media (prefers-reduced-motion: reduce) { .hr-rc-strip { transition: none; } }
/* Geraete ohne Hover: stilles "⋯" am Zeilenende, Klick schaltet den Streifen */
@media (hover: none) {
    .hr-rc table#jobs > thead > tr > th.hr-rc-acth,
    .hr-rc table#jobs > tbody > tr > td.hr-rc-actcell { width: 40px; }
    .hr-rc-more { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 4px; padding: 0;
        background: none; border: 0; color: #4a5866; opacity: .5; font-size: 18px; line-height: 1; cursor: pointer; }
    .hr-rc-strip { right: 44px; }
}

/* ---------- Fusszeile (07.10.2026): duenn, hell, ohne Logo ---------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* .container(-fluid) hat margin:auto; im Flex-Column-Body hebt das das Strecken auf
   und .hr-main wuerde so breit wie die breiteste Tabelle (Seite scrollt quer). */
body > .hr-main { flex: 1 0 auto; width: 100%; min-width: 0; }
/* Breite DataTables-Tabellen scrollen in sich, nicht die Seite (dom: <"hr-table-scroll"t>) */
.hr-table-scroll { overflow-x: auto; max-width: 100%; }
.hr-footer {
    flex-shrink: 0;
    background: var(--hr-bg-soft);
    border-top: 1px solid var(--hr-line);
    color: var(--hr-muted);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
}
.hr-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    min-height: 30px;
    padding: 6px 20px;
    line-height: 1.4;
}
.hr-footer span, .hr-footer a { font-size: inherit; font-family: inherit; }
.hr-footer a { color: var(--hr-muted); text-decoration: none; }
.hr-footer a:hover { color: var(--hr-blue); text-decoration: underline; }
.hr-footer-sep { margin: 0 6px; color: #c4c7cc; }
.hr-footer-look a.active { color: var(--hr-blue); font-weight: 700; }

/* ======================================================================
   LOOK A (07.10.2026): gleiches Geruest, App-Look. Aktiv bei <body data-look="a">
   (?look=a). Teal #0E7188 statt Blau, Schrift der App (Klavika aus app.css, hier nur geerbt).
   ====================================================================== */
body[data-look="a"] {
    --hr-blue: #0E7188;
}
body[data-look="a"] .navbar.hr-navbar.hr-header,
body[data-look="a"] .hr-header .dropdown-menu,
body[data-look="a"] .hr-modnav,
body[data-look="a"] .hr-footer {
    font-family: inherit;
}
/* Kopfzeile: weiss, Teal-Unterlinie 2px */
body[data-look="a"] .navbar.hr-navbar.hr-header { border-bottom: 2px solid var(--hr-blue); }
/* Modulleiste: aktiv Teal-Hintergrund, weisser Text */
body[data-look="a"] .hr-modnav li.active > a {
    background: var(--hr-blue);
    border-bottom-color: var(--hr-blue);
    color: #fff;
}
body[data-look="a"] .hr-modnav li.active .hr-modnav-icon { opacity: 1; }
/* Fusszeile weiss */
body[data-look="a"] .hr-footer { background: #fff; }

/* ======================================================================
   DEMO-DATEN-BANNER (Paket A, 20.10.2026): partials/demo-banner.blade.php, ueber der Werkzeugzeile
   in index + person. Teal-Rahmen wie Look A, kein Bootstrap-Alert-Gelb.
   ====================================================================== */
:root { --hr-demo-teal: #0E7188; --hr-demo-bg: #f2f8f9; }
.hr-demo { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
    margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--hr-demo-teal);
    border-left-width: 4px; border-radius: 6px; background: var(--hr-demo-bg);
    color: var(--hr-rc-text); font: 400 13px/1.5 'Open Sans', Arial, sans-serif; }
.hr-demo .hr-demo-ic { width: 20px; height: 20px; color: var(--hr-demo-teal); }
.hr-demo .hr-demo-text { flex: 1 1 360px; margin: 0; font: inherit; }
.hr-demo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hr-demo-btn, .hr-demo-btn:focus { padding: 6px 14px; border: 1px solid var(--hr-demo-teal); border-radius: 6px;
    background: #fff; color: var(--hr-demo-teal); font: 600 12px 'Open Sans', Arial, sans-serif; white-space: nowrap; }
.hr-demo-btn:hover { background: #e6f2f4; color: var(--hr-demo-teal); text-decoration: none; }
.hr-demo-btn-primary, .hr-demo-btn-primary:focus { background: var(--hr-demo-teal); color: #fff; }
.hr-demo-btn-primary:hover { background: #0b5c6f; color: #fff; }
.hr-demo-btn:focus-visible { outline: 2px solid var(--hr-demo-teal); outline-offset: 2px; }

/* ======================================================================
   APP-HUELLE (Paket A, 20.10.2026, docs/APP_HUELLE_2026-10-20.md): gemeinsame Palette fuer Look A.
   Teal #0E7188, Dunkel #1F2D3A, Graustufen, Weiss; eine Schrift (Klavika aus app.css).
   ====================================================================== */
:root {
    --hr-teal: #0E7188;
    --hr-teal-dark: #0b5c6f;
    --hr-teal-soft: #e6f2f4;
    --hr-ink: #1F2D3A;
    --hr-gray-bg: #F5F6F8;
    --hr-gray-line: #D5D9DE;
    --hr-gray-hair: #e4e7eb;
    --hr-gray-text: #6c7a86;
    --hr-font: KlavikaRegular, Helvetica, Arial, sans-serif;
    --hr-font-strong: KlavikaMedium, Helvetica, Arial, sans-serif;
}

/* ---------- ANMELDE-KARTE (layout-auth.blade.php: Login, Registrierung, Passwort, Logout) ---------- */
body.hr-auth { background: var(--hr-gray-bg); color: var(--hr-ink); font-family: var(--hr-font); }
.hr-auth-main { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 16px; }
.hr-auth-card { width: 100%; max-width: 420px; font-size: 14px; padding: 32px 32px 24px; background: #fff;
    border: 1px solid var(--hr-gray-hair); border-radius: 8px; box-shadow: none; }
.hr-auth-card.hr-auth-card-wide { max-width: 560px; }
.hr-auth-logo { display: block; margin: 0 auto 24px; width: 260px; max-width: 100%; }
.hr-auth-logo h1.brand { margin: 0; width: 260px; max-width: 100%; height: 30px; background-size: 260px 30px; }
.hr-auth-title { margin: 0 0 20px; font: 20px/1.3 var(--hr-font-strong); color: var(--hr-ink); }
.hr-auth-lead { margin: -8px 0 20px; font-size: 14px; color: var(--hr-gray-text); }
.hr-auth-card p, .hr-auth-card span, .hr-auth-card a, .hr-auth-card label { font-size: 14px; }
.hr-auth-card label { font-weight: 400; color: var(--hr-ink); margin-bottom: 4px; }
.hr-auth-card .form-group { margin-bottom: 16px; }
.hr-auth-card .form-control { height: 40px; font-size: 14px; }
.hr-auth-card textarea.form-control { height: auto; }
.hr-auth-actions { margin-top: 24px; }
.hr-auth-actions .btn + .btn, .hr-auth-actions span + .btn { margin-top: 10px; }
.hr-auth-card .btn-block { padding: 9px 16px; font-size: 15px; }
.hr-auth-alert { padding: 10px 12px; font-size: 14px; border-radius: 6px; }
.hr-auth-link { margin: 4px 0 0; text-align: center; }
.hr-auth-link a { color: var(--hr-teal); }
.hr-auth-lang { display: flex; justify-content: center; gap: 14px; margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--hr-gray-hair); font-size: 13px; }
.hr-auth-lang a, .hr-auth-lang span { font-size: 13px; color: var(--hr-gray-text); text-decoration: none; }
.hr-auth-lang a:hover { color: var(--hr-teal); }
.hr-auth-lang .hr-lang-active { color: var(--hr-teal); font-family: var(--hr-font-strong); }
.hr-auth-body > br:first-child { display: none; }
/* Registrierung: form-horizontal-Spalten (col-md-4 Label / col-md-6 Feld) in der Karte stapeln */
.hr-auth-card .form-horizontal .form-group { margin-left: 0; margin-right: 0; }
.hr-auth-card .form-horizontal [class*="col-md-"] { float: none; width: auto; margin-left: 0; padding-left: 0; padding-right: 0; }
.hr-auth-card .form-horizontal .control-label { padding-top: 0; text-align: left; margin-top: 0 !important; /* Inline margin-top:-9px */ }
.hr-auth-card .form-horizontal input[type="checkbox"] { margin-right: 6px; }
@media (max-width: 480px) { .hr-auth-card { padding: 24px 18px 18px; } .hr-auth-main { padding: 24px 16px; } }
/* SSO-Knopf der Karte als Teal-Outline (allgemeine Knopf- und Feldregeln: Abschnitt "MODALS, FELDER") */
.hr-auth-card .btn { font-family: var(--hr-font-strong); }
.hr-auth-card .btn-default, .hr-auth-card .btn-default:focus { border-color: var(--hr-teal); color: var(--hr-teal); }
.hr-auth-card .btn-default:hover { background: var(--hr-teal-soft); border-color: var(--hr-teal); color: var(--hr-teal); }

/* ---------- MODALS, FELDER, STEUERLEISTEN, KNOEPFE (App-Huelle Schritt 2, nur CSS, kein Markup-Umbau) ----------
   Gilt in layout.blade.php fuer beide Looks; Akzent ueber var(--hr-blue) (Look A Teal, Look B Website-Blau).
   bootstrap-theme.min.css setzt Verlaeufe (background-image), text-shadow und box-shadow: hier neutralisiert. */

/* Modals: weisser Kopf mit duenner Linie, Titel 18 px, Fuss ohne Grau, Radius 6 px */
.modal-content { border: 1px solid var(--hr-gray-hair); border-radius: 6px; box-shadow: 0 12px 32px rgba(31, 45, 58, .16); }
.modal-header { background: #fff; border-bottom: 1px solid var(--hr-gray-hair); border-radius: 6px 6px 0 0; padding: 14px 20px; }
.modal-header .modal-title, .modal-header > h3, .modal-header > h4, .modal-header > h5 {
    font: 18px/1.35 var(--hr-font-strong); color: var(--hr-ink); }
.modal-header .close { opacity: .45; text-shadow: none; }
.modal-header .close:hover { opacity: .8; }
.modal-body { padding: 18px 20px; color: var(--hr-ink); }
.modal-footer { background: #fff; border-top: 1px solid var(--hr-gray-hair); border-radius: 0 0 6px 6px; padding: 12px 20px; }
.modal-backdrop.in { opacity: .35; }
/* Info-Fenster (#overlay, #overlay5, Testzugang-Modal …) tragen Modulfarben inline am .modal-content
   (z. B. #337ab7, #183052, #666 mit color:white). Inline-Stil laesst sich nur mit !important ueberstimmen. */
.modal-content[style*="background-color"] { background-color: #fff !important; color: var(--hr-ink) !important; }
.modal-content[style*="background-color"] .modal-header h3 { margin: 0; font-size: 18px; }
.modal-content[style*="background-color"] .close span { font-size: 28px !important; /* Inline 40px */ }
.modal-content[style*="background-color"] a { color: var(--hr-blue); }

/* Knoepfe: Primaer gefuellt, Standard als Outline, Radius 6 px */
.btn { border-radius: 6px; text-shadow: none; box-shadow: none; }
.btn-primary, .btn-primary:focus, .btn-primary.focus {
    background-image: none; background-color: var(--hr-blue); border: 1px solid var(--hr-blue); color: #fff; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background-image: none; background-color: var(--hr-teal-dark); border-color: var(--hr-teal-dark); color: #fff; }
body[data-look="b"] .btn-primary:hover { background-color: #245f7d; border-color: #245f7d; }
.btn-default, .btn-default:focus, .btn-default.focus {
    background-image: none; background-color: #fff; border: 1px solid var(--hr-gray-line); color: var(--hr-ink); }
.btn-default:hover, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background-image: none; background-color: #fff; border-color: var(--hr-blue); color: var(--hr-blue); box-shadow: none; }
.btn-hr-submit { border-radius: 6px; letter-spacing: .3px; }
.btn:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: 2px; }

/* Felder: 1 px #D5D9DE, Fokus Akzentfarbe */
.form-control { border: 1px solid var(--hr-gray-line); border-radius: 6px; box-shadow: none; color: var(--hr-ink); }
.form-control:focus { border-color: var(--hr-blue); box-shadow: 0 0 0 3px rgba(14, 113, 136, .15); outline: none; }
/* bootstrap-select: der Knopf ist ein .btn-default.dropdown-toggle */
.bootstrap-select > .dropdown-toggle, .bootstrap-select > .dropdown-toggle.btn-default {
    background-image: none; background-color: #fff; border: 1px solid var(--hr-gray-line); border-radius: 6px;
    color: var(--hr-ink); box-shadow: none; text-shadow: none; }
.bootstrap-select > .dropdown-toggle:focus, .bootstrap-select.open > .dropdown-toggle {
    border-color: var(--hr-blue); outline: none !important; /* bootstrap-select setzt outline !important */ box-shadow: 0 0 0 3px rgba(14, 113, 136, .15); }
.bootstrap-select .dropdown-menu { border: 1px solid var(--hr-gray-hair); border-radius: 6px; box-shadow: 0 6px 18px rgba(31, 45, 58, .1); }
.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li.active a { background: var(--hr-teal-soft); color: var(--hr-ink); }
body[data-look="b"] .bootstrap-select .dropdown-menu li a:hover, body[data-look="b"] .bootstrap-select .dropdown-menu li.active a { background: #eaf1f5; }

/* DataTables-Steuerleisten (DataTables 2: .dt-*, alte Klassen .dataTables_* mitgenommen): klein, grau */
div.dt-container .dt-info, div.dt-container .dt-length, div.dt-container .dt-length label,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length {
    font-size: 12px; color: var(--hr-gray-text); font-weight: 400; }
div.dt-container .dt-input, div.dt-container .dt-search input {
    border: 1px solid var(--hr-gray-line); border-radius: 6px; background-color: #fff; color: var(--hr-ink); font-size: 12px; }
div.dt-container .dt-search input:focus, div.dt-container .dt-input:focus { border-color: var(--hr-blue); outline: none; }
div.dt-container .dt-paging, .dataTables_wrapper .dataTables_paginate { font-size: 12px; }
/* Paginierung als Textknoepfe ohne Rahmen; DataTables setzt color mit !important, daher hier ebenso */
div.dt-container .dt-paging .dt-paging-button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 3px 8px; margin-left: 0; border: 0; border-radius: 4px; background: transparent;
    color: var(--hr-gray-text) !important; font-size: 12px; box-shadow: none; }
div.dt-container .dt-paging .dt-paging-button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 0; background: transparent; color: var(--hr-blue) !important; text-decoration: underline !important; }
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 0; background: transparent; color: var(--hr-ink) !important; font-family: var(--hr-font-strong); text-decoration: none !important; }
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    border: 0; background: transparent; color: #b8c0c7 !important; text-decoration: none !important; }

/* Panels, Wells, Tabellen: flach, helle Rahmen */
.panel { box-shadow: none; }
.panel-default { border-color: var(--hr-gray-hair); }
.panel-default > .panel-heading { background-image: none; background-color: #fff; border-color: var(--hr-gray-hair); }
.well { box-shadow: none; background-image: none; background-color: #fafbfc; border-color: var(--hr-gray-hair); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th { border-color: var(--hr-gray-hair); }
.dropdown-menu { box-shadow: 0 6px 18px rgba(31, 45, 58, .1); }

/* ---------- Classification-Tabs (#tabarea in classification.blade.php, App-Huelle Schritt 3) ----------
   Nackte Text-Tabs mit Unterlinie wie der Reportcenter-Umschalter (.hr-rctabs); ersetzt die Inline-Farben.
   app.min.css setzt .nav-tabs>li>a grau (#ccc) und aktiv weiss/fett: hier mit hoeherer Spezifitaet ueberstimmt. */
.hr-cltabs .nav-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--hr-rc-line); }
.hr-cltabs .nav-tabs > li { float: none; margin-bottom: -1px; }
.hr-cltabs .nav-tabs > li > a,
.hr-cltabs .nav-tabs > li > a:hover,
.hr-cltabs .nav-tabs > li > a:focus {
    margin: 0; padding: 9px 16px 8px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    background: transparent; color: var(--hr-rc-muted); font-weight: 400; text-decoration: none; outline: none; }
.hr-cltabs .nav-tabs > li > a span { font-size: 14px; color: inherit; }
.hr-cltabs .nav-tabs > li > a:hover { color: var(--hr-rc-text); }
.hr-cltabs .nav-tabs > li > a:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: -2px; }
.hr-cltabs .nav-tabs > li.active > a,
.hr-cltabs .nav-tabs > li.active > a:hover,
.hr-cltabs .nav-tabs > li.active > a:focus {
    background: transparent; border: 0; border-bottom: 3px solid var(--hr-blue); color: var(--hr-blue); }
/* Tab 3 (frueher dunkelblau hinterlegt) nur noch fett */
.hr-cltabs .nav-tabs > li > a.hr-cltab-strong span { font-family: var(--hr-font-strong); }
/* leere Tabs (Info-Modal) bleiben als Text sichtbar, nur blasser */
.hr-cltabs .nav-tabs > li > a#info { color: #9aa5ae; cursor: pointer; }
/* Badges grau */
.hr-cltabs .nav-tabs .badge { margin-left: 4px; padding: 2px 7px; background: #e9ecef; color: #4a5866;
    font-size: 11px; font-weight: 400; vertical-align: 1px; }
.hr-cltabs .nav-tabs .badge:empty { display: none; }
/* Inhalt: weiss, ohne Ecke/Schatten, duenne Linie */
.hr-cltabs .tab-content > .tab-pane > .panel { margin-top: 0; border: 1px solid var(--hr-gray-hair); border-top: 0;
    border-radius: 0 0 6px 6px; box-shadow: none; background: #fff; }

/* ======================================================================
   PRODUKTBAND (23.10.2026, partials/product-band, docs/PRODUKTBAND_2026-10-23.md): sechs Produkte der
   Website als Kreis + Name unter der weissen Kopfzeile, eine Zeile, schmal; Handybreite bricht um.
   Aktiv = Akzent (Blau/Teal) mit 3-px-Unterlinie wie .hr-modnav, nicht gebucht = grau ohne Link.
   Produktfarben wie die Website-Kreise / Zustandspunkte 2c (c1-c4), c5/c6 aus den Website-Icons.
   ====================================================================== */
.hr-products {
    --prod-accent: var(--hr-rc-muted, #6c7a86);
    margin: -15px 0 15px;              /* Kopfzeile hat margin-bottom 15px */
    background: #fff;
    border-bottom: 1px solid var(--hr-line);
    font-family: 'Open Sans', Arial, sans-serif;
}
.hr-products ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 4px;
    margin: 0;
    padding: 0 12px;
    list-style: none;
}
.hr-products li { margin: 0; }
.hr-products li > a,
.hr-products .hr-prod-off {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 5px;
    border-bottom: 3px solid transparent;
    color: var(--hr-rc-text, #1f2d3a);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}
.hr-products li > a:hover,
.hr-products li > a:focus {
    background: var(--hr-bg-soft);
    color: var(--prod-accent);
    border-bottom-color: var(--prod-accent);
    text-decoration: none;
    outline: none;
}
.hr-products li > a:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: -2px; }
.hr-products li.is-active > a,
.hr-products li.is-active > a:hover {
    color: var(--hr-blue);
    border-bottom-color: var(--hr-blue);
    background: var(--hr-bg-soft);
}
.hr-products .hr-prod-icon { width: 26px; height: 26px; display: block; flex: none; }
.hr-products span, .hr-products a { font-family: inherit; }
.hr-products .hr-prod-name { font-size: inherit; }
/* nicht gebucht: grau, kein Link */
.hr-products .hr-prod-off { color: #9aa5ae; font-weight: 400; cursor: default; }
.hr-products .is-off .hr-prod-icon { filter: grayscale(1); opacity: .45; }

.hr-prod-c1 { --prod-accent: #0E7188; }
.hr-prod-c2 { --prod-accent: #3D6296; }
.hr-prod-c3 { --prod-accent: #A35254; }
.hr-prod-c4 { --prod-accent: #AD8E3B; }
.hr-prod-c5 { --prod-accent: #6F879B; }
.hr-prod-c6 { --prod-accent: #C2A042; }

@media (max-width: 767px) {
    .hr-products ul { justify-content: flex-start; padding: 0 6px; }
    .hr-products li { flex: 0 0 50%; }
    .hr-products li > a, .hr-products .hr-prod-off { padding: 5px 6px 4px; white-space: normal; }
}