/* ═══════════════════════════════════════════════════════════════════════════
HILFEDIENST — admin-pages.css
═══════════════════════════════════════════════════════════════════════════
INDEX OF GLOBAL CLASSES — use these on any page.
Line numbers shift as the file is edited; search the class name instead.
── LAYOUT & PAGE CHROME ────────────────────────────────────────────────
hd-block hd-footer-row hd-pagination hd-page-btn
Defined in admin-layout.css,
not here:
hd-page-header hd-breadcrumb hd-breadcrumb-item hd-title
hd-header (top bar) hd-link (SIDEBAR links — not for page content)
k-header .......... page header row: title left,
button right (LEGACY,
cannot be renamed — see the note at its rule)
── CARDS ───────────────────────────────────────────────────────────────
hd-card hd-card-header hd-card-header-icon hd-card-title
hd-card-body hd-card-footer hd-table-card
hd-section-head hd-section-icon hd-section-title hd-section-body
── BUTTONS ─────────────────────────────────────────────────────────────
hd-btn + hd-btn-primary | -amber | -danger | -outline
| -info | -warning | -gray | -sm
hd-act + hd-act-edit | hd-act-delete | hd-act-contact
hd-actions ........ flex wrapper for a row of hd-act buttons
── FORMS ───────────────────────────────────────────────────────────────
hd-form-grid hd-form-grid-3 hd-form-row hd-form-group hd-form-label
hd-required hd-input hd-select hd-form-control
hd-form-section hd-form-section-title hd-form-footer hd-form-error
emp-field-error ... small red message under one field
hd-check hd-check-box hd-check-text ... custom checkbox
hd-euro-wrap hd-euro ......... currency prefix
── TABLES ──────────────────────────────────────────────────────────────
hd-table .......... every table gets this one class
hd-table-scroll ... wrapper,
scrolls horizontally on small screens
td-nr td-name td-sub th-actions td-actions-cell hd-nowrap
── TABS ────────────────────────────────────────────────────────────────
hd-tab-bar hd-tab hd-pane hd-tab-body hd-pane-toolbar hd-tab-badge
A bar directly inside .hd-card gets an inset + header tint.
── STAT PILLS (horizontal: icon | label + value) ───────────────────────
hd-stat-pill hd-stat-pill-icon hd-stat-pill-label hd-stat-pill-value
+ label variants -festival -krank -urlaub -fahrtzeit -office -ist -patients
+ colour variants -blue -red -amber -green -info (solid icon tile)
+ size modifier -lg (dashboard scale: white card,
28px value)
+ icon tints hd-icon-red -amber -blue -green -purple -indigo -teal
hd-stat-pill-footer ... link row at the bottom of a -lg card
hd-stat-pill-list hd-stat-pill-toggle ... collapsible list inside a -lg card
── INFO CARDS (label / value) ──────────────────────────────────────────
hd-info-cards hd-info-cards-col hd-info-card hd-info-card-title
hd-kv hd-kv-label hd-kv-val hd-kv-red hd-kv-strong-red
NOTE: hd-kv is a SIDE-BY-SIDE row and needs a card wider than ~300px.
In a narrow card use prof-field + hd-form-label (stacked) instead.
── MODALS & DRAWER ─────────────────────────────────────────────────────
hd-confirm-overlay hd-confirm-modal hd-confirm-body hd-confirm-icon
hd-confirm-title hd-confirm-text hd-confirm-foot
hd-modal-overlay hd-modal hd-modal-sm | -lg hd-modal-head
hd-modal-title hd-modal-title-icon hd-modal-close hd-modal-body
hd-modal-foot hd-modal-stacked hd-del-icon
hd-drawer hd-drawer-overlay hd-drawer-head hd-drawer-title
hd-drawer-title-icon hd-drawer-close hd-drawer-body
hd-drawer-field hd-drawer-input hd-drawer-foot
body classes: drawer-open modal-open-custom
── FILTER BARS ─────────────────────────────────────────────────────────
hd-filter-panel hd-filter-field hd-filter-actions hd-toolbar
── FILE UPLOAD (hd-uploader component) ─────────────────────────────────
hd-uploader hd-uploader-sm (compact) hd-uploader-zone
hd-uploader-preview hd-uploader-progress hd-uploader-track
hd-uploader-bar hd-uploader-status hd-uploader-chip-remove
Markup: resources/views/components/hd-uploader.blade.php
JS: public/backend/dist/js/hd-uploader.js -> hdUploader.init( {...})
Modes: url = AJAX post | no url = submits with the form | collect = gather
hd-existing-file-item ... already-uploaded file row in an edit drawer
file-chips file-chip + chip-pdf | chip-image | chip-video | chip-audio
| chip-file
fp-overlay fp-modal ... full file preview
── BADGES,
PILLS,
TOOLTIPS ─────────────────────────────────────────────
hd-badge + hd-badge-blue | -green | -orange | -red | -gray
hd-type-badge hd-vhp-badge rd-qp rd-qp-dot
tooltip33 + tooltipContent ... hover reveal for truncated text
row-danger row-warning row-neutral ... table row tints
── FEEDBACK ────────────────────────────────────────────────────────────
hd-toast .......... AJAX toast; JS adds .show
(the LAYOUT reuses this name for session-flash toasts,
which carry hd-toast-success / hd-toast-error — the
rule below is scoped with :not() to keep them apart)
k-link ............ inline blue link in page content (LEGACY,
cannot be
renamed — the layout owns .hd-link for sidebar links)
── PRINT ───────────────────────────────────────────────────────────────
print-hide ........ element disappears when printing
hdPrint( {...}) .... shared table printing, public/backend/dist/js/hd-print.js
═══════════════════════════════════════════════════════════════════════════
PAGE-SCOPED PREFIXES — belong to ONE page,
do not reuse:
ts- (timesheet) cmp- (Vergleich) bs- (bigscreen)
fc- (flotte cfg) fs- op- fac- (factoring) r- (reminder)
st- stt- (statistik) emp- prof- (employee) vhp- mw- pb- pinf-
pd- (patient details accordion)
═══════════════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────────
1. SHARED CSS VARIABLES
────────────────────────────────────────────────────────────────── */
:root {
--bg: #f4f6f9;
--bg-card: #ffffff;
--bg-input: #f8f9fc;
--border: #e2e8f0;
--border-hover: #c7d2e0;
--border-focus: #4f7ee8;
--text: #0f172a;
--text-sub: #64748b;
--text-muted: #94a3b8;
--blue: #4f7ee8;
--blue-dk: #2855d4;
--blue-lt: #eff4ff;
--green: #16a34a;
--green-lt: #dcfce7;
--red: #dc2626;
--red-lt: #fee2e2;
--amber: #d97706;
--amber-lt: #fef3c7;
--radius: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--shadow-xs: 0 1px 3px rgba(15,23,42,.06);
--shadow-sm: 0 2px 10px rgba(15,23,42,.08);
--shadow-md: 0 8px 28px rgba(15,23,42,.12);
--shadow-lg: 0 24px 60px rgba(15,23,42,.18);
}
/* ══ SELECT2 GLOBAL THEME ══════════════════════════════════════════ */
.select2-container--default .select2-selection--single {
height: 42px !important;
background: #f8f9fc !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
transition: border-color .14s, box-shadow .14s !important;
}
.select2-container--default .select2-selection--single:hover {
border-color: #c7d2e0 !important;
}
.select2-container--default.select2-container--open .select2-selection--single {
border-color: #4f7ee8 !important;
box-shadow: 0 0 0 3px rgba(79,126,232,.12) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
font-size: 13px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
color: #0f172a !important;
line-height: 40px !important;
padding-left: 13px !important;
padding-right: 32px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #94a3b8 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 40px !important;
right: 10px !important;
width: 20px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #64748b transparent transparent !important;
border-width: 5px 4px 0 !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #64748b !important;
border-width: 0 4px 5px !important;
}
/* Clear button */
.select2-container--default .select2-selection--single .select2-selection__clear {
font-size: 18px !important;
line-height: 1 !important;
color: #94a3b8 !important;
margin-right: 4px !important;
}
.select2-dropdown {
border: 1.5px solid #c7d2e0 !important;
border-radius: 10px !important;
box-shadow: 0 8px 28px rgba(15,23,42,.12) !important;
overflow: hidden !important;
margin-top: 4px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.select2-search--dropdown {
padding: 8px 10px !important;
border-bottom: 1px solid #e2e8f0 !important;
background: #fff !important;
}
.select2-search--dropdown .select2-search__field {
font-size: 13px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 8px 11px !important;
outline: none !important;
width: 100% !important;
background: #f8f9fc !important;
color: #0f172a !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.select2-results__option {
font-size: 13px !important;
padding: 8px 14px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
color: #0f172a !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #4f7ee8 !important;
color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background: #eff4ff !important;
color: #4f7ee8 !important;
}
/* ── Table link styles ───────────────────────────────────────────── */
/* Remove default link styles inside action columns */
/* Flotte page links */
.flotte-link {
color: #4f7ee8;
font-weight: 500;
text-decoration: none;
}
.flotte-link:hover { text-decoration: underline; }
.flotte-empty { color: #94a3b8; }
/* Opportunity / log file links */
.hd-file-link,
.log-file-link,
.hd-file-link {
color: #4f7ee8;
font-size: 12px;
text-decoration: none;
}
.hd-file-link:hover,
.log-file-link:hover { text-decoration: underline; }
/* ── Drawer + modal scroll lock ──────────────────────────────────── */
body.drawer-open { overflow: hidden !important; }
body.modal-open-custom { overflow: hidden !important; }
/* ── td-nr utility ───────────────────────────────────────────────── */
.td-nr { color: #94a3b8; font-size: 12px; }
/* ── Tüv badges ──────────────────────────────────────────────────── */
.flotte-due-overdue {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 20px;
font-size: 11px; font-weight: 600;
background: #fee2e2; color: #b91c1c;
}
.flotte-due-soon {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 20px;
font-size: 11px; font-weight: 600;
background: #fef3c7; color: #92400e;
}
/* ── hd-table ────────────────────────────────────────────────────── */
/* ── Wartungsakte / Informationsprotokolle form — same-row layout ── */
.hd-log-form-grid {
display: grid;
grid-template-columns: 1fr 160px 1fr auto;
gap: 14px;
align-items: start;
padding: 16px;
background: #f8faff;
border-radius: 10px;
border: 1px solid #e2e8f0;
margin-bottom: 20px;
}
@media (max-width: 900px) {
.hd-log-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.hd-log-form-grid { grid-template-columns: 1fr; }
}
.hd-log-form-submit {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-top: 20px;
}
/* ── File drop zone ──────────────────────────────────────────────── */
/* ── File preview thumbnails ─────────────────────────────────────── */
/* ── Existing file items in edit drawer ──────────────────────────── */
.hd-existing-file-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #e2e8f0;
font-size: 12px;
}
.hd-existing-file-item .hd-file-link {
color: #4f7ee8;
text-decoration: none;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hd-existing-file-item .hd-file-link:hover { text-decoration: underline; }
/* ── File chips (used in Dateien column) ─────────────────────────── */
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.file-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 3px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: opacity .13s;
max-width: 200px;
overflow: hidden;
}
.file-chip:hover { opacity: .85; text-decoration: none; }
.file-chip span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-chip-icon {
width: 20px;
height: 20px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.file-chip-icon svg { width: 11px; height: 11px; stroke: #fff !important; fill: none; }
.chip-image { background: #dbeafe; color: #1d4ed8; }
.chip-image .file-chip-icon { background: #4f7ee8; }
.chip-pdf { background: #fee2e2; color: #b91c1c; }
.chip-pdf .file-chip-icon { background: #ef4444; }
.chip-video { background: #fef3c7; color: #92400e; }
.chip-video .file-chip-icon { background: #f59e0b; }
.chip-audio { background: #f3e8ff; color: #6d28d9; }
.chip-audio .file-chip-icon { background: #a855f7; }
.chip-file { background: #f1f5f9; color: #475569; }
.chip-file .file-chip-icon { background: #94a3b8; }
/* ── Flotte Config page ──────────────────────────────────────────── */@media (max-width: 768px) { .fc-grid { grid-template-columns: 1fr; } }
/* Add row — blue tinted first row */
.fc-add-row { background: #f0f6ff !important; }
.fc-add-row:hover { background: #f0f6ff !important; }
.fc-add-row td { padding: 8px 10px !important; border-bottom: 2px solid #c7d9ff !important; }
.fc-add-input {
width: 100%;
font-size: 13px !important;
padding: 7px 10px !important;
}
.fc-add-btn {
white-space: nowrap;
font-size: 12px !important;
padding: 7px 12px !important;
}
.fc-add-form { margin: 0; }
/* Inline edit */
.fc-action-cell { width: 80px; }
.fc-view-actions,
.fc-edit-actions { display: flex; gap: 4px; align-items: center; }
tr.fc-editing .fc-name-cell { padding: 6px 10px; }
tr.fc-editing { background: #f8faff !important; }
.fc-inline-input {
width: 100%;
padding: 6px 10px !important;
font-size: 13px;
border-radius: 8px;
border: 1.5px solid #4f7ee8 !important;
outline: none;
box-shadow: 0 0 0 3px rgba(79,126,232,.12);
background: #fff;
transition: border-color .13s;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.fc-empty {
text-align: center;
padding: 20px;
color: #94a3b8;
font-size: 13px;
}
/* ══════════════════════════════════════════════════════════════════
DATATABLES — SINGLE CLEAN DEFINITION (all previous removed)
Vanilla DT structure:
div.dataTables_wrapper
div.dataTables_length (float left,
top)
div.dataTables_filter (float right,
top)
table
div.dataTables_info (float left,
bottom)
div.dataTables_paginate (float right,
bottom)
a.paginate_button.previous
span > a.paginate_button (number buttons)
a.paginate_button.next
══════════════════════════════════════════════════════════════════ */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper::after { content: ''; display: table; clear: both; }
/* Top row */
.dataTables_wrapper .dataTables_length {
float: left;
padding: 10px 0 8px 18px;
font-size: 12px;
color: #64748b;
}
.dataTables_wrapper .dataTables_filter {
float: right;
padding: 10px 18px 8px 0;
font-size: 12px;
color: #64748b;
}
.dataTables_wrapper .dataTables_length select {
padding: 5px 8px;
font-size: 12px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
outline: none;
background: #f8f9fc;
color: #1e293b;
margin: 0 4px;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.dataTables_wrapper .dataTables_filter input {
padding: 6px 10px;
font-size: 12px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
outline: none;
background: #f8f9fc;
color: #1e293b;
margin-left: 6px;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.dataTables_wrapper .dataTables_filter input:focus {
border-color: #4f7ee8;
box-shadow: 0 0 0 3px rgba(79,126,232,.10);
}
/* Bottom row */
.dataTables_wrapper .dataTables_info {
float: left;
clear: none;
padding: 10px 0 8px 18px;
font-size: 12px;
color: #64748b;
line-height: 32px;
border-top: none;
margin-top: 0;
}
.dataTables_wrapper .dataTables_paginate {
float: right;
padding: 10px 18px 8px 0;
border-top: none;
margin-top: 0;
/* paginate is NOT a flex container — let tags flow inline */
display: block;
}
/* Number buttons wrapper span — just flex gap */
.dataTables_wrapper .dataTables_paginate span {
display: inline-flex;
align-items: center;
gap: 3px;
vertical-align: middle;
}
/* Individual pill buttons — only tags,
not the span */
.dataTables_wrapper .dataTables_paginate a.paginate_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
height: 32px !important;
min-width: 32px !important;
padding: 0 10px !important;
margin: 0 2px !important;
border-radius: 8px !important;
border: 1px solid #e2e8f0 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #64748b !important;
background: #ffffff !important;
text-decoration: none !important;
cursor: pointer !important;
line-height: 1 !important;
box-shadow: none !important;
outline: none !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
transition: background .13s, border-color .13s, color .13s !important;
/* Prevent child elements from inheriting button look */
white-space: nowrap !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
background: #eaf0fd !important;
border-color: #c7d9ff !important;
color: #4f7ee8 !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
background: #4f7ee8 !important;
border-color: #4f7ee8 !important;
color: #ffffff !important;
font-weight: 600 !important;
box-shadow: 0 2px 8px rgba(79,126,232,.28) !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover {
opacity: .4 !important;
cursor: default !important;
pointer-events: none !important;
background: #f8fafc !important;
color: #64748b !important;
border-color: #e2e8f0 !important;
box-shadow: none !important;
}
/* tr borders */
/* ── hd-confirm — confirmation dialog ───────────────────────────── */
/* ── Confirmation dialog ─────────────────────────────────────────────
hd-confirm-overlay / -modal / -body / -icon / -title / -text / -foot
Shown by adding .open to the overlay — never set display:none inline. */
.hd-confirm-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,15,30,.5);
z-index: 1060;
align-items: center;
justify-content: center;
}
.hd-confirm-overlay.open {
display: flex !important;
}
.hd-confirm-modal {
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(15,23,42,.18);
width: 380px;
max-width: 95vw;
overflow: hidden;
}
.hd-confirm-body {
padding: 28px 24px 20px;
text-align: center;
}
.hd-confirm-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: #fee2e2;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
.hd-confirm-title {
font-size: 16px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.hd-confirm-text {
font-size: 13px;
color: #64748b;
line-height: 1.5;
word-break: break-all;
overflow-wrap: anywhere;
max-width: 100%;
padding: 0 8px;
}
.hd-confirm-foot {
display: flex;
gap: 10px;
padding: 16px 24px;
border-top: 1px solid #f1f5f9;
background: #fafbff;
}
/* ── Tooltip33 / tooltipContent — Information column hover ──────── */
.tooltip33 {
position: relative;
cursor: pointer;
}
.tooltipContent {
display: none;
}
.tooltip33:hover .tooltipContent {
display: block;
position: absolute;
bottom: calc(100% + 6px);
left: 0;
width: 260px;
max-width: 90vw;
background: #1e293b;
color: #f1f5f9;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
padding: 9px 13px;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(15,23,42,.18);
z-index: 1055;
white-space: pre-wrap;
word-wrap: break-word;
pointer-events: none;
}
/* Small triangle pointer */
.tooltip33:hover .tooltipContent::after {
content: '';
position: absolute;
top: 100%;
left: 16px;
border: 5px solid transparent;
border-top-color: #1e293b;
}
/* ══ REMINDER INDEX PAGE ════════════════════════════════════════════ */
/* Tab bar */
.tab-bar {
display: flex;
gap: 4px;
margin-bottom: 20px;
border-bottom: 2px solid #e2e8f0;
}
.tab {
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
color: #64748b;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: color .14s, border-color .14s;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.tab:hover { color: #1e293b; }
.tab.active { color: #4f7ee8; border-bottom-color: #4f7ee8; }
.tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
}
.badge-today { background: #fef3c7; color: #92400e; }
.badge-upcoming{ background: #dbeafe; color: #1d4ed8; }
.badge-overdue { background: #fee2e2; color: #b91c1c; }
/* Reminder card */
/* file preview + confirm dialog *//* ══════════════════════════════════════════════════════════════════ */
/* .tabs class used in reminder page (different from .tab-bar) */
.tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid #e2e8f0;
margin-bottom: 16px;
}
/* ══════════════════════════════════════════════════════════════════ */
/* ── confirm dialog inner components ────────────────────────────── */
/* ── confirm dialog buttons ──────────────────────────────────────── */
/* ── r-toast ─────────────────────────────────────────────────────── */@keyframes toastIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Reminder card completion animations ────────────────────────── */
/* JS-driven completion animation. The handler waits on `animationend`,
so these must match the card element or the sequence never finishes. */
.badge-today { background: #fef3c7; color: #92400e; }
.badge-upcoming { background: #dbeafe; color: #1d4ed8; }
.badge-overdue { background: #fee2e2; color: #b91c1c; }
/* ── fp-overlay (file preview modal in Flotte/Opportunity reminder) ─ */
.fp-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,15,30,.55);
z-index: 1060;
align-items: center;
justify-content: center;
}
.fp-overlay.open { display: flex !important; }
/* ── Config table fixes ──────────────────────────────────────────── */
.fc-action-cell { text-align: left !important; vertical-align: middle; }
.fc-view-actions { display: flex; gap: 4px; }
.fc-edit-actions { display: flex; gap: 4px; }
/* ── DataTables sort arrows ──────────────────────────────────────── *//* Remove padding-right on non-sortable columns */
@media print { .print-hide { display: none !important; } }
/* Pane container inside card */
/* Upload modal */
/* ── Employee profile sub-blade ──────────────────────────────────── */
.prof-field { margin-bottom: 16px; }
/* ── Password show/hide ──────────────────────────────────────────── */
.emp-pw-wrap {
position: relative;
display: flex;
align-items: center;
}
.emp-pw-eye {
position: absolute;
right: 10px;
background: none;
border: none;
cursor: pointer;
color: #94a3b8;
padding: 4px;
display: flex;
align-items: center;
transition: color .13s;
outline: none;
}
.emp-pw-eye:hover { color: #4f7ee8; }
/* ── Toggle switch ───────────────────────────────────────────────── */
.emp-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
gap: 16px;
}
.emp-toggle-label { font-size: 13px; font-weight: 600; color: #1e293b; }
.emp-toggle-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
/* ── hd-switch — standard on/off toggle ─────────────────────────────
Usage:
(Supersedes the older .emp-toggle; emp-toggle to be retired.) */
.hd-switch {
position: relative;
display: inline-block;
width: 52px;
height: 28px;
flex-shrink: 0;
}
.hd-switch input { opacity: 0; width: 0; height: 0; }
.hd-switch-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #cbd5e1;
border-radius: 28px;
transition: background .3s;
}
.hd-switch-slider::before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.18);
transition: transform .3s;
}
.hd-switch input:checked + .hd-switch-slider { background: #4f7ee8; }
.hd-switch input:focus + .hd-switch-slider { box-shadow: 0 0 0 3px rgba(79,126,232,.18); }
.hd-switch input:checked + .hd-switch-slider::before { transform: translateX(24px); }
/* Validation field error */
.emp-field-error {
font-size: 12px;
color: #dc2626;
margin-top: 5px;
display: block;
}
/* ── Compact toggle row (for tight sidebar cards) ────────────────── */
/* ── File preview modal (fp-modal inner) ────────────────────────── */
.fp-modal {
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 60px rgba(15,23,42,.22);
width: 860px;
max-width: 96vw;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.fp-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid #e2e8f0;
background: #fafbff;
flex-shrink: 0;
}
.fp-type-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.fp-filename {
font-size: 13px;
font-weight: 600;
color: #1e293b;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fp-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.fp-action-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 8px;
background: #eaf0fd;
color: #2855d4;
font-size: 12px;
font-weight: 600;
text-decoration: none;
border: 1px solid #c7d9ff;
transition: background .13s;
}
.fp-action-btn:hover { background: #c7d9ff; color: #1e3fa8; text-decoration: none; }
.fp-close {
width: 30px; height: 30px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #f8fafc;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 18px; color: #64748b; line-height: 1;
transition: background .13s;
}
.fp-close:hover { background: #f1f5f9; color: #1e293b; }
.fp-body {
flex: 1;
overflow: auto;
background: #0f172a;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
.fp-body img {
max-width: 100%; max-height: 80vh;
object-fit: contain; display: block;
}
.fp-body video {
max-width: 100%; max-height: 80vh; display: block;
}
.fp-body iframe {
width: 100%; height: 75vh; border: none; display: block;
background: #fff;
}
/* Audio */
.fp-audio-wrap {
display: flex; flex-direction: column; align-items: center;
gap: 16px; padding: 32px;
}
.fp-audio-icon {
width: 80px; height: 80px; border-radius: 50%;
background: #1e293b; display: flex; align-items: center;
justify-content: center;
}
.fp-audio-icon svg { width: 40px; height: 40px; stroke: #a78bfa; }
.fp-audio-name { font-size: 14px; font-weight: 600; color: #f1f5f9; }
.fp-audio-wrap audio { width: 320px; }
/* Other file */
.fp-other-wrap {
display: flex; flex-direction: column; align-items: center;
gap: 12px; padding: 40px;
}
.fp-other-icon {
width: 70px; height: 70px; border-radius: 16px;
background: #1e293b; display: flex; align-items: center;
justify-content: center;
}
.fp-other-icon svg { width: 36px; height: 36px; stroke: #94a3b8; }
.fp-other-name { font-size: 14px; font-weight: 600; color: #f1f5f9; }
.fp-other-msg { font-size: 12px; color: #94a3b8; }
/* ── Spinner for loading states ──────────────────────────────────── */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Work timepicker (flatpickr time-only) ───────────────────────── */
.work-time-wrap {
position: relative;
display: flex;
align-items: center;
}
.work-time-icon {
position: absolute;
left: 11px;
display: flex;
align-items: center;
pointer-events: none;
color: #94a3b8;
}
/* flatpickr time picker panel overrides */
.work-fp-time.flatpickr-calendar {
border-radius: 12px !important;
border: 1.5px solid #e2e8f0 !important;
box-shadow: 0 8px 24px rgba(15,23,42,.12) !important;
padding: 12px !important;
width: 200px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.work-fp-time .flatpickr-time {
border: none !important;
height: auto !important;
}
.work-fp-time .numInputWrapper {
border-radius: 8px !important;
border: 1.5px solid #e2e8f0 !important;
background: #f8f9fc !important;
}
.work-fp-time .numInputWrapper:hover { background: #eaf0fd !important; border-color: #c7d9ff !important; }
.work-fp-time .numInputWrapper input {
font-size: 24px !important;
font-weight: 700 !important;
color: #1e293b !important;
text-align: center !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
padding: 10px 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.work-fp-time .flatpickr-time-separator {
font-size: 22px !important;
font-weight: 700 !important;
color: #94a3b8 !important;
}
.work-fp-time .flatpickr-am-pm { display: none !important; }
.work-fp-time .arrowUp::after { border-bottom-color: #4f7ee8 !important; }
.work-fp-time .arrowDown::after { border-top-color: #4f7ee8 !important; }
.work-fp-time .numInputWrapper span { border-color: #e2e8f0 !important; }
/* ════════════════════════════════════════════════════════════════════
ADDRESS PAGE — All missing classes
════════════════════════════════════════════════════════════════════ */
/* CSS Variables */
:root {
--blue: #4f7ee8;
--blue-lt: #eaf0fd;
--green: #16a34a;
--green-lt: #dcfce7;
--red: #dc2626;
--red-lt: #fee2e2;
--amber: #d97706;
--amber-lt: #fef3c7;
--text-sub: #64748b;
--text-muted:#94a3b8;
--border: #e2e8f0;
}
/* ═══════════════════════════════════════════════════════════════════
LEGACY k-* — DO NOT RENAME THESE TWO
───────────────────────────────────────────────────────────────────
The whole k-* namespace was replaced by hd-* and removed from this
file. These two are the only survivors,
and they cannot be renamed:
the LAYOUT (admin-layout.css) already owns .hd-header (top bar) and
.hd-link (sidebar links). Renaming these would collide with it —
.hd-link in particular is display:flex !important with sidebar
padding,
which turns any table link into a block.
.k-header — page header row: title left,
action button right
.k-link — inline blue link inside page content
Either keep using them as-is,
or replace per page with inline styles
(see backend/opportunity/address for the k-header example).
═══════════════════════════════════════════════════════════════════ */
/* ── Page header row (title + button) ──────────────────────────── */
.k-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
/* ── Table cell helpers ─────────────────────────────────────────── */
.td-nr { width: 44px; color: #94a3b8; font-size: 12px; }
.td-name { font-weight: 500; }
.td-sub { color: #64748b; font-size: 12px; }
.td-web a { color: #4f7ee8; font-size: 12px; }
.td-actions { display: flex; gap: 4px; align-items: center; }
.td-actions-cell { white-space: nowrap; }
.th-actions { width: 100px; }
/* ── Opportunity Reminder — pagination styling ───────────────────── */.hd-pagination {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.hd-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 0 12px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #fff;
color: #475569;
font-size: 13px;
font-weight: 500;
font-family: 'Plus Jakarta Sans', sans-serif;
text-decoration: none;
transition: all .15s;
cursor: pointer;
white-space: nowrap;
}
.hd-page-btn:hover {
background: #eaf0fd;
border-color: #c7d9ff;
color: #4f7ee8;
}
.hd-page-active {
background: #4f7ee8 !important;
border-color: #4f7ee8 !important;
color: #fff !important;
font-weight: 700;
cursor: default;
}
.hd-page-disabled {
background: #f8fafc;
border-color: #e2e8f0;
color: #cbd5e1;
cursor: not-allowed;
pointer-events: none;
}
/* hd-form-grid — wider 3-col layout for address edit form */
.hd-form-grid,
/* hd-form-grid — wider 3-col layout for address edit form */
.hd-form-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .hd-form-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hd-form-grid-3 { grid-template-columns: 1fr; } }
/* hd-form-footer — submit button row below edit form */
.hd-form-footer {
display: flex;
justify-content: flex-end;
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid #f1f5f9;
gap: 10px;
}
/* hd-form-error — validation error banner */
.hd-form-error {
padding: 10px 14px;
border-radius: 8px;
background: #fee2e2;
color: #991b1b;
font-size: 13px;
margin-top: 10px;
display: none;
}
.hd-form-error.show { display: block; }
/* ── hd-section (Informationsprotokolle card header/body) ────────── */
.hd-section-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid #f1f5f9;
background: #fafbff;
}
.hd-section-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: #eaf0fd;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hd-section-title {
font-size: 14px;
font-weight: 700;
color: #1e293b;
}
.hd-section-body {
padding: 20px;
}
/* ── Reminder drawer quick-pick date pills ───────────────────────── */
.rd-qp {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
border: 1.5px solid #e2e8f0;
background: #f8fafc;
color: #64748b;
font-family: 'Plus Jakarta Sans', sans-serif;
transition: border-color .13s, background .13s, color .13s;
white-space: nowrap;
outline: none;
}
.rd-qp:hover {
border-color: #c7d9ff;
background: #eaf0fd;
color: #4f7ee8;
}
.rd-qp.rd-qp-active {
border-color: #4f7ee8;
background: #4f7ee8;
color: #fff;
}
.rd-qp-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════════════
DASHBOARD — All missing classes
════════════════════════════════════════════════════════════════════ */
/* ── Welcome banner ─────────────────────────────────────────────── */
.db-welcome {
background: linear-gradient(135deg, #4f7ee8 0%, #2855d4 100%);
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 20px;
color: #fff;
}
.db-welcome-inner { flex: 1; }
.db-welcome-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.db-welcome-icon svg { stroke: #fff; }
/* ── Stat card footer link (dashboard) ──────────────────────────── */
.hd-stat-pill-footer {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f1f5f9;
text-decoration: none;
color: #64748b;
transition: opacity .13s;
}
.hd-stat-pill-footer:hover { text-decoration: none; color: #1e293b; }
/* Expand list */
/* ── Dashboard card (table/chart wrapper) ───────────────────────── */
.db-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(15,23,42,.06);
overflow: hidden;
margin-bottom: 20px;
}
.db-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid #f1f5f9;
background: #fafbff;
}
.db-card-title {
font-size: 14px;
font-weight: 700;
color: #1e293b;
flex: 1;
}
.db-card-body { padding: 16px 20px; }
/* ── Team chips ─────────────────────────────────────────────────── */
/* ── Ticket status badges ───────────────────────────────────────── */
.hd-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.hd-badge-red { background: #fee2e2; color: #b91c1c; }
.hd-badge-orange { background: #fef3c7; color: #92400e; }
.hd-badge-green { background: #dcfce7; color: #166534; }
.hd-badge-blue { background: #dbeafe; color: #1d4ed8; }
.hd-badge-gray { background: #f1f5f9; color: #475569; }
/* ── Dashboard two-column bottom row ────────────────────────────── */
.db-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
@media (max-width: 900px) { .db-row { grid-template-columns: 1fr; } }
.db-row .db-card { margin-bottom: 0; }
/* ── Chart wrapper ───────────────────────────────────────────────── */
.db-chart-wrap {
position: relative;
width: 100%;
padding: 4px 0 8px;
}
/* ── Ticket table row colors ─────────────────────────────────────── */
/* ── Clone button ────────────────────────────────────────────────── */
.db-clone-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 7px;
background: #eaf0fd;
border: 1px solid #c7d9ff;
color: #4f7ee8;
text-decoration: none;
transition: background .13s;
cursor: pointer;
}
.db-clone-btn:hover { background: #c7d9ff; color: #2855d4; text-decoration: none; }
.db-clone-btn svg { stroke: currentColor; }
/* ── Dashboard card-head icon + title alignment ──────────────────── */
.db-card-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid #f1f5f9;
background: #fafbff;
}
.db-card-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: #1e293b;
flex: 1;
}
.db-card-title svg { flex-shrink: 0; stroke: #4f7ee8; }
/* ── Chart expand button ─────────────────────────────────────────── */
.db-chart-expand-btn {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .13s;
color: #64748b;
}
.db-chart-expand-btn:hover { background: #eaf0fd; color: #4f7ee8; }
/* ── Chart summary bar (below chart) ─────────────────────────────── */
.bs-chart-summary {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 20px 16px;
flex-wrap: wrap;
}
.bs-chart-summary-item {
display: flex;
align-items: center;
gap: 10px;
}
.bs-chart-summary-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.bs-chart-summary-label {
font-size: 11px;
color: #64748b;
font-weight: 500;
}
.bs-chart-summary-val {
font-size: 16px;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
}
.bs-chart-summary-divider {
width: 1px;
height: 36px;
background: #e2e8f0;
flex-shrink: 0;
}
/* ── db-chart-wrap height ────────────────────────────────────────── */
.db-chart-wrap {
position: relative;
width: 100%;
padding: 16px 20px 4px;
min-height: 260px;
}
/* ════════════════════════════════════════════════════════════════════
BIGSCREEN — All classes
════════════════════════════════════════════════════════════════════ */
.bs-page {
min-height: 100vh;
background: #f1f5f9;
padding: 20px 24px;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.bs-topbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.bs-topbar-brand {
display: flex;
align-items: center;
gap: 12px;
}
.bs-logo {
width: 36px; height: 36px;
border-radius: 8px;
background: #eaf0fd;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.bs-topbar-title {
font-size: 18px;
font-weight: 700;
color: #0f172a;
}
.bs-topbar-clock {
font-size: 22px;
font-weight: 700;
color: #0f172a;
text-align: right;
}
.bs-topbar-date {
font-size: 12px;
color: #64748b;
text-align: right;
margin-top: 2px;
}
.bs-stat-names {
list-style: none;
margin: 8px 0 0;
padding: 0;
border-top: 1px solid #f1f5f9;
padding-top: 8px;
}
.bs-stat-names li {
font-size: 11px;
color: #64748b;
padding: 2px 0;
}
.bs-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
@media (max-width: 900px) { .bs-row { grid-template-columns: 1fr; } }
/* Access denied state */
.bs-denied {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 12px;
color: #64748b;
}
.bs-denied-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: #f1f5f9;
display: flex; align-items: center; justify-content: center;
}
.bs-denied-icon svg { stroke: #94a3b8; }
.bs-denied h2 { font-size: 20px; font-weight: 700; color: #1e293b; margin: 0; }
.bs-denied p { font-size: 14px; color: #64748b; margin: 0; }
/* db-card-title-icon (used in bigscreen card heads) */
.db-card-title-icon {
width: 26px; height: 26px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* ── Collapsible list inside a stat pill (dashboard Krank / Urlaub) ── */
.hd-stat-pill-list {
list-style: none;
padding: 8px 0 0;
margin: 6px 0 0;
border-top: 1px solid #f1f5f9;
display: none;
}
.hd-stat-pill-list.show { display: block; }
.hd-stat-pill-list li {
font-size: 12px;
color: #64748b;
padding: 3px 0;
line-height: 1.5;
}
/* Suppress any expand SVG showing outside stat cards */
.expand-down,
.expand-up {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════════════
BIGSCREEN — Colorful stat cards (override white dashboard style)
════════════════════════════════════════════════════════════════════ */
/* Red — Krank */
/* Green — Phone Tickets (dark green with table) */
/* Amber — Holiday */
/* Blue — Nicht Versorgt */
/* Purple — Neukunden */
/* Teal — Vergleich */
/* All bigscreen stat hover */
.bs-page .hd-stat-pill:hover { box-shadow: 0 6px 20px rgba(0,0,0,.15); }
/* ── Bigscreen stat card layout — grid,
icon top-right ──────────── */
/* Bigscreen: same pill as the dashboard,
just a larger value for
readability at distance. Layout comes from .hd-stat-pill-lg. */
.bs-page .hd-stat-pill-value { font-size: 32px; }
.bs-page .hd-stat-pill-icon { width: 56px; height: 56px; border-radius: 14px; }
.bs-page .hd-stat-pill-icon svg { width: 28px; height: 28px; }
.bs-page .hd-stat-pill > .bs-stat-names { flex: 1 1 100%; }
/* ── Wall-display sizing ─────────────────────────────────────────────
Bigscreen hangs on a TV and is read from several metres,
so every
size here is larger than the desk-facing pages. Tuned as a group —
if it needs to be bigger or smaller,
scale these together rather
than changing one.
Quicker alternative for on-site tuning: browser zoom (Ctrl +).
Chrome remembers it per site and it survives the auto-refresh.
─────────────────────────────────────────────────────────────────── */
.bs-page .hd-stat-pill-value { font-size: 44px; }
.bs-page .hd-stat-pill-label { font-size: 18px; }
.bs-page .hd-stat-pill-icon { width: 64px; height: 64px; border-radius: 16px; }
.bs-page .hd-stat-pill-icon svg { width: 32px; height: 32px; }
.bs-page .hd-card-title { font-size: 18px; }
.bs-page .bs-stat-names li { font-size: 16px; line-height: 1.6; }
/* ticket table inside the Phone Tickets card */
.bs-page .hd-stat-pill table { font-size: 15px !important; }
.bs-page .hd-stat-pill table th { font-size: 13px !important; padding: 9px 12px !important; }
.bs-page .hd-stat-pill table td { padding: 10px 12px !important; }
.bs-page .hd-stat-pill table td span { font-size: 12px !important; }
/* the chart legend and axis labels */
.bs-page .bs-chart-summary-label { font-size: 14px; }
.bs-page .bs-chart-summary-val { font-size: 22px; }
/* ── Timesheet inline hour edit cell ────────────────────────────── */
.hover_how_edit_button {
position: relative;
padding-right: 56px !important;
min-width: 110px;
}
.hover_how_edit_button .file_description {
width: 60px;
border: none;
background: none;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
padding: 0;
}
.hover_how_edit_button .file_description.contentEdit {
border: 1.5px solid #4f7ee8 !important;
border-radius: 6px;
padding: 2px 6px;
background: #fff !important;
width: 70px;
}
/* Edit pencil — show only on hover */
.hover_how_edit_button .hour_edit_function {
display: none !important;
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
cursor: pointer;
align-items: center;
justify-content: center;
color: #64748b;
transition: background .13s;
}
.hover_how_edit_button:hover .hour_edit_function { display: inline-flex !important; }
.hover_how_edit_button.ts-editing-active .hour_edit_function { display: inline-flex !important; }
.hover_how_edit_button .hour_edit_function:hover { background: #eaf0fd; color: #4f7ee8; }
/* Save tick — hidden always,
shown only via ts-editing-active */
.hover_how_edit_button .text_edit_done {
display: none !important;
position: absolute;
right: 32px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: #dcfce7;
border: 1px solid #86efac;
border-radius: 6px;
color: #166534;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* Show tick only when td has ts-editing-active class */
.hover_how_edit_button.ts-editing-active .text_edit_done {
display: inline-flex !important;
}
/* Keep pencil visible during edit mode */
.hover_how_edit_button.ts-editing-active .hour_edit_function {
display: inline-flex !important;
}
/* ── Info edit cell ──────────────────────────────────────────────── */
.hover_info_edit_button:hover .info_edit_button { display: inline-flex; }
.hover_info_edit_button {
position: relative;
padding-right: 32px !important;
}
.hover_info_edit_button .info_edit_button {
display: none !important;
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
}
.hover_info_edit_button:hover .info_edit_button {
display: inline-flex !important;
}
/* ── Timesheet cell — no border/outline on click/focus ──────────── */
.hover_how_edit_button,
.hover_info_edit_button,
.hover_how_edit_button:focus,
.hover_info_edit_button:focus {
outline: none !important;
box-shadow: none !important;
}
/* file_description input — no border until contentEdit */
.hover_how_edit_button .file_description {
outline: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
}
.hover_how_edit_button .file_description.contentEdit {
border: 1.5px solid #4f7ee8 !important;
border-radius: 6px;
padding: 2px 6px;
background: #fff !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(79,126,232,.10) !important;
}
/* ── Opportunity Kontakte table — flexible with scroll ────────── */
.kontakte-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#myTable {
table-layout: auto;
width: 100% !important;
min-width: 900px;
}
#myTable th,
#myTable td {
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
vertical-align: middle;
}
#myTable th { white-space: nowrap; }
#myTable th:nth-child(1) { width: 44px; min-width: 44px; } /* Nr */
#myTable th:nth-child(9) { width: 70px; min-width: 70px; } /* Status */
#myTable th:nth-child(11) { width: 60px; min-width: 60px; } /* Aktion */
/* ── Action Buttons with Icons + Badge ──────────────────────────── */
/* Festival Button — Outlined Amber */
/* Krank Button — Outlined Red */
/* Urlaub Button — Outlined Green */
/* Fahrtzeit Button — Outlined Blue */
/* Patientenbuchung Button — Outlined Primary Blue */
/* ── Quick Hours Buttons (Patientenbuchung form) ───────────────── */
.pb-quick-hours {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.pb-hour-btn {
padding: 6px 12px;
border: 1.5px solid #e2e8f0;
background: #f8f9fc;
color: #0f172a;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all .14s;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.pb-hour-btn:hover {
background: #eaf0fd;
border-color: #c7d9ff;
color: #4f7ee8;
}
.pb-hour-btn.active {
background: #4f7ee8;
border-color: #4f7ee8;
color: white;
}
/* ── Timesheet Stat Cards ────────────────────────────────────────── */
/* Festival Card */
/* Krank Card */
/* Urlaub Card */
/* Fahrtzeit Card */
/* Büroarbeit Card */
/* IST Zeit Card */
/* Patienten Card */
/* ══ EMPLOYEE EDIT PAGE - INTRANET & BUTTONS ═════════════════════════ */
/* Intranet Section - Name and Link fields with 1:2 ratio */
.intranet-section {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
margin-bottom: 0;
}
.intranet-name-field {
grid-column: 1;
}
.intranet-link-field {
grid-column: 2;
}
/* Responsive - stack on mobile */
@media (max-width: 768px) {
.intranet-section {
grid-template-columns: 1fr;
}
.intranet-name-field,
.intranet-link-field {
grid-column: auto;
}
}
/* Button alignment - Back and Save buttons side by side */
/* Ensure form keeps buttons inline */
/* Profile Tab - Radio Button Styling */
.profile-radio:checked + .profile-radio-label {
color: #4f7ee8;
font-weight: 500;
}
/* Profile Tab - Radio Button Label Colors */
.profile-radio-label {
color: #0f172a !important;
font-weight: 400 !important;
}
.profile-radio:checked + .profile-radio-label {
color: #4f7ee8 !important;
font-weight: 500 !important;
}
/* Custom Radio Button Styling */
.profile-radio {
display: none !important;
}
.profile-radio-label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
user-select: none !important;
color: #64748b !important;
font-size: 13px !important;
font-weight: 400 !important;
position: relative !important;
padding-left: 24px !important;
margin: 0 !important;
}
/* Custom Radio Circle */
.profile-radio-label::before {
content: '' !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
border: 2px solid #cbd5e1 !important;
border-radius: 50% !important;
background: #fff !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
}
/* Checked State - Custom Circle */
.profile-radio:checked ~ .profile-radio-label::before {
border-color: #4f7ee8 !important;
background: #fff !important;
box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #4f7ee8 !important;
}
/* Checked State - Text Color */
.profile-radio:checked ~ .profile-radio-label {
color: #4f7ee8 !important;
font-weight: 500 !important;
}
/* Hover State */
.profile-radio-label:hover::before {
border-color: #4f7ee8 !important;
box-shadow: 0 0 0 3px rgba(79, 126, 232, 0.1) !important;
}
/* ── row-neutral — grey row for rückruf tickets ─────────────────── */
.fac-filter .select2-container { width: 100% !important; }
.fac-filter .select2-container--default .select2-selection--single {
height: 42px !important;
display: flex !important;
align-items: center !important;
border-radius: 10px !important;
}
.fac-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: normal !important;
padding-left: 12px;
}
.fac-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 40px;
}
.fac-filter .fac-filter-btn {
height: 42px !important;
display: inline-flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
.pdf_circle { text-align: center; font-size: 15px; }
td.action_button { white-space: nowrap; }
.fac-msg {
background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
border-radius: 12px; padding: 16px 20px; text-align: center;
font-size: 15px; font-weight: 600; margin-bottom: 20px;
}
/* ============================================================
FACTORING — Bill editor (show)
All selectors namespaced (.fs-*,
.vhp-*,
#fs-drawer,
.fs-page).
============================================================ */
.fs-page sup {
top: -0.4em;
font-size: 18px;
color: red;
}
/* equal-height cards across the row */
/* inline Edit chips on the cards */
/* tables → hd-table look */
/* hd-table covers the table look; these add what it doesn't:
the totals row and the inline cost inputs. */
/* links: reference style — blue #4f7ee8,
no underline by default */
.fs-page a:not(.hd-btn):not(.fs-btn) { color: #4f7ee8; text-decoration: none; }
.fs-page a:not(.hd-btn):not(.fs-btn):hover { text-decoration: underline; }
/* Rechnung erstellen — primary create action,
green to stand apart */
/* footer holding the Zurück / Rechnung erstellen buttons under the cost card */
.fs-card-footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 16px 4px 4px; }
/* white cards wrapping the cost + history tables (AdminLTE .card has no
styling now that Bootstrap CSS is gone) */
.fs-page .card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,.04); margin-bottom: 0;
}
.fs-page .card-body { padding: 18px 20px; }
/* let the history DataTable scroll horizontally instead of overflowing the card */
/* card grid gets vertical gap between the info cards */
.content > .container-fluid > /* VHP badge (eye icon trigger) */
.vhp-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px;
background: #eaf0fd; color: #3b6ef5; cursor: pointer;
font-size: 12px; font-weight: 600;
}
.vhp-badge:hover { background: #dbe6fd; }
/* VHP modal (custom overlay) */
.vhp-overlay {
position: fixed; inset: 0; background: rgba(15,23,42,.5);
display: none; align-items: center; justify-content: center;
z-index: 100000; padding: 20px;
}
.vhp-overlay.open { display: flex; }
.vhp-modal {
background: #fff; border-radius: 16px; width: 100%; max-width: 720px;
max-height: 85vh; display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(15,23,42,.3); animation: vhpIn .2s ease;
}
@keyframes vhpIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.vhp-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.vhp-title { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; }
.vhp-close { background: none; border: none; color: #64748b; cursor: pointer; padding: 4px; border-radius: 6px; }
.vhp-close:hover { background: #f1f5f9; color: #1e293b; }
.vhp-body { padding: 18px 20px; overflow-y: auto; }
.vhp-foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 20px; border-top: 1px solid #e2e8f0;
}
/* lock page scroll while the drawer is open (drawer body scrolls itself) */
/* ── Injected edit-form styling inside the hd-drawer ─────────
The four edit forms are injected as Bootstrap markup
(form-control / row mb-3 / btn-primary). Rather than rewrite
those JS template strings,
style their classes to the k-* look. */
#fs-drawer form .row,
#fs-drawer form .form-group {
display: block; margin: 0 0 16px;
}
#fs-drawer form label,
#fs-drawer form .col-form-label {
display: block; font-size: 12.5px; font-weight: 600;
color: #475569; margin-bottom: 6px; padding: 0;
}
#fs-drawer form .form-control,
#fs-drawer form input[type="text"],
#fs-drawer form input[type="number"],
#fs-drawer form input:not([type="submit"]):not([type="hidden"]),
#fs-drawer form select,
#fs-drawer form textarea {
width: 100%; height: 42px; border: 1px solid #e2e8f0;
border-radius: 10px; padding: 0 12px; font-size: 14px;
color: #1e293b; background: #fff; box-sizing: border-box;
}
#fs-drawer form textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
#fs-drawer form .form-control:focus,
#fs-drawer form select:focus,
#fs-drawer form textarea:focus {
outline: none; border-color: #3b6ef5; box-shadow: 0 0 0 3px rgba(59,110,245,.12);
}
/* the injected Select2 boxes */
#fs-drawer .select2-container { width: 100% !important; }
#fs-drawer .select2-container--default .select2-selection--single {
height: 42px; border: 1px solid #e2e8f0; border-radius: 10px;
display: flex; align-items: center;
}
#fs-drawer .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
/* submit / action buttons in the injected forms */
#fs-drawer form .btn,
#fs-drawer form input[type="submit"],
#fs-drawer form button[type="submit"] {
display: inline-flex; align-items: center; justify-content: center;
width: 100%; height: 44px; border: none; border-radius: 10px;
background: #2563eb; color: #fff; font-size: 14px; font-weight: 600;
cursor: pointer; margin-top: 4px;
}
#fs-drawer form .btn:hover,
#fs-drawer form input[type="submit"]:hover,
#fs-drawer form button[type="submit"]:hover { background: #1d4ed8; }
#fs-drawer form .error { color: #dc2626; font-size: 12px; margin-top: 4px; }
/* still referenced by the markup */
.fs-page .text-right { text-align: right; }
.fs-page .bg-danger { background: #fef2f2 !important; }
.op-filter .op-filter-btn { height: 42px !important; display: inline-flex; align-items: center; }
/* action buttons in the server-rendered table rows.
The controller emits Bootstrap classes (btn btn-info etc.) — map them
to the k-* look here so no backend change is needed. */
#op-year-table td .btn,
#op-year-table td a.btn,
#op-year-table td .bill_delete,
#op-year-table td .open_sidebar,
#op-year-table td .view_click_function {
display: inline-flex; align-items: center; justify-content: center;
padding: 5px 11px; border-radius: 8px;
font-size: 12px; font-weight: 600; line-height: 1.3;
border: 1px solid transparent; text-decoration: none;
margin: 2px 2px;
cursor: pointer;
}
#op-year-table td .btn-info { background: #eaf0fd; color: #2c5fd4; border-color: #d6e2fb; }
#op-year-table td .btn-info:hover { background: #dbe6fd; }
#op-year-table td .btn-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
#op-year-table td .btn-danger:hover { background: #fee2e2; }
#op-year-table td .btn-success { background: #ecfdf3; color: #15803d; border-color: #bbf7d0; }
#op-year-table td .btn-success:hover { background: #dcfce7; }
#op-year-table td .btn-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
#op-year-table td .btn-warning:hover { background: #fef3c7; }
#op-year-table td .btn-secondary { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
#op-year-table td .btn-secondary:hover { background: #e2e8f0; }
/* status dots / badges the controller may emit */
#op-year-table td .badge { border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; }
/* the table is wide — let it scroll inside the card */
/* focusable so the table can be scrolled left/right with the arrow keys
(a plain overflow container is not reachable by Tab) */
/* payment drawer: success message */
#op-drawer .message_show {
display: none;
background: #ecfdf3; border: 1px solid #bbf7d0; color: #15803d;
border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}
#op-drawer .message_show h1 { font-size: 14px !important; font-weight: 600; margin: 0; }
/* drawer form fields (markup keeps its Bootstrap classes) */
#op-drawer form .form-group,
#op-drawer form .row { display: block; margin: 0 0 16px; }
#op-drawer form label,
#op-drawer form .col-form-label {
display: block; font-size: 12.5px; font-weight: 600;
color: #475569; margin-bottom: 6px; padding: 0;
}
#op-drawer form .form-control,
#op-drawer form input:not([type="submit"]):not([type="hidden"]) {
width: 100%; height: 42px; border: 1px solid #e2e8f0;
border-radius: 10px; padding: 0 12px; font-size: 14px;
color: #1e293b; background: #fff; box-sizing: border-box;
}
#op-drawer form .form-control:focus { outline: none; border-color: #3b6ef5; box-shadow: 0 0 0 3px rgba(59,110,245,.12); }
#op-drawer form .btn,
#op-drawer form .btn-block,
#op-drawer form button[type="submit"] {
width: 100%; height: 44px; border: none; border-radius: 10px;
background: #2563eb; color: #fff; font-size: 14px; font-weight: 600;
cursor: pointer !important;
}
#op-drawer form button[type="submit"]:hover { background: #1d4ed8; }
#op-drawer form .error { color: #dc2626; font-size: 12px; margin-top: 4px; }
#op-drawer sup { color: #dc2626; }
/* ══════════════════════════════════════════════════════════════════
SHARED UI HELPERS (hd-*)
Small patterns that appear on several pages. Page-unique element ids
keep their own prefix (#op-year-table,
#fs-drawer …) to avoid clashes.
══════════════════════════════════════════════════════════════════ */
/* horizontally scrollable table area,
keyboard focusable */
.hd-table-scroll { overflow-x: auto; max-width: 100%; }
/* page scroll lock while a drawer or modal is open */
body.hd-drawer-lock { overflow: hidden; }
/* currency prefix inside an amount input */
.hd-euro-wrap { position: relative; }
.hd-euro {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
font-size: 14px; font-weight: 600; color: #64748b; pointer-events: none;
}
.hd-euro-wrap input,
.hd-euro-wrap input.form-control { padding-left: 32px !important; }
/* custom checkbox */
.hd-check {
display: inline-flex; align-items: center; gap: 10px;
cursor: pointer; margin: 0; font-size: 13.5px; color: #334155;
}
.hd-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.hd-check-box {
width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
border: 1.5px solid #cbd5e1; background: #fff;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, border-color .15s;
}
.hd-check-box::after {
content: ""; width: 5px; height: 9px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0); transition: transform .15s; margin-top: -2px;
}
.hd-check input:checked + .hd-check-box { background: #4f7ee8; border-color: #4f7ee8; }
.hd-check input:checked + .hd-check-box::after { transform: rotate(45deg) scale(1); }
.hd-check input:focus-visible + .hd-check-box { box-shadow: 0 0 0 3px rgba(79,126,232,.25); }
.hd-check-text { font-weight: 600; color: #475569; }
/* full-width block spacing under a card */
.hd-block { margin-top: 20px; }
/* footer row of buttons under a card */
.hd-footer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ============================================================
FACTORING — OP-Verwaltung View (note/year detail page)
All selectors namespaced (.hd-*,
#hd-*,
.hd-page).
============================================================ */
input:checked+
input:focus+
input:checked+
.hd-page sup {
top: -0.4em;
font-size: 18px;
color: red;
}
.hd-page .trash {
border: none;
background: none;
color: red;
}
/* form controls */
.hd-page .form-control {
border: 1px solid #e2e8f0; border-radius: 10px;
padding: 9px 12px; font-size: 13.5px; color: #1e293b;
}
.hd-page .form-control:focus {
border-color: #4f7ee8; box-shadow: 0 0 0 3px rgba(79,126,232,.12); outline: none;
}
.hd-page .col-form-label { font-size: 12.5px; font-weight: 600; color: #475569; }
#hd-pay-drawer .message_show {
background:#ecfdf3; border:1px solid #bbf7d0; color:#15803d;
border-radius:10px; padding:12px 14px; margin-bottom:16px;
}
#hd-pay-drawer .message_show h1 { font-size:14px !important; font-weight:600; margin:0; }
/* links — same as the Rechnungen show page: blue,
no underline */
.content a:not(.btn):not(.hd-btn):not(.edit):not(.edit_style) {
color: #4f7ee8; text-decoration: none;
}
.content a:not(.btn):not(.hd-btn):not(.edit):not(.edit_style):hover {
text-decoration: underline;
}
/* ── Informationen (note) form ── */
.hd-info-form label {
display: block; font-size: 12.5px; font-weight: 600;
color: #475569; margin-bottom: 8px;
}
.hd-info-form textarea.form-control {
width: 100%; min-height: 110px; resize: vertical;
border: 1px solid #e2e8f0; border-radius: 10px;
padding: 12px 14px; font-size: 13.5px; line-height: 1.6;
color: #1e293b; background: #fff; box-sizing: border-box;
font-family: inherit;
}
.hd-info-form textarea.form-control::placeholder { color: #94a3b8; }
.hd-info-form textarea.form-control:focus {
outline: none; border-color: #4f7ee8;
box-shadow: 0 0 0 3px rgba(79,126,232,.12);
}
.hd-info-form .hd-info-actions {
display: flex; justify-content: flex-end; margin-top: 12px;
}
/* VHP badge — same as the Rechnungen show page */
.hd-vhp-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px;
background: #eaf0fd; color: #3b6ef5; cursor: pointer;
font-size: 12px; font-weight: 600;
}
.hd-vhp-badge:hover { background: #dbe6fd; }
/* ──────────────────────────────────────────────────────────────────
STATISTIK / BILL SUMMARY (backend/factoring/report_year/bill_summary)
────────────────────────────────────────────────────────────────── */
.k-link { color: var(--k-primary, #2563eb); font-weight: 600; text-decoration: none; }
.k-link:hover { text-decoration: underline; }
.st-table-wrap { overflow-x: auto; }
/* compact stat pills */
/* Anteil column */
.st-share { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.st-share-bar {
flex: 1; height: 6px; background: #f1f5f9;
border-radius: 3px; overflow: hidden; min-width: 50px;
}
.st-share-bar > div { height: 100%; border-radius: 3px; }
.st-share-pct {
font-size: 12px; color: #64748b;
min-width: 44px; text-align: right; font-variant-numeric: tabular-nums;
}
/* totals row */
/* Statistik card tabs (scoped: stt-) */
.stt-tabs {
display: flex; align-items: stretch; gap: 4px;
flex: 1; min-width: 0;
}
.stt-tab {
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 8px 18px; border-radius: 10px;
font-size: 13px; font-weight: 600; color: #64748b;
display: inline-flex; align-items: center; gap: 7px;
transition: background .15s, color .15s;
}
.stt-tab:hover { background: #f1f5f9; color: #334155; }
.stt-tab.active { background: #eaf0fd; color: #2563eb; }
.stt-tab svg { width: 15px; height: 15px; }
.stt-panel { display: none; }
.stt-panel.active { display: block; }
/* chart view tab panels (Statistik diagram card) */
.chart-tabpanel { display: none; }
.chart-tabpanel.active { display: block; }
/* ──────────────────────────────────────────────────────────────────
STATISTIK VERGLEICH (backend/factoring/compare_bill_summary)
────────────────────────────────────────────────────────────────── */
.cmp-table-wrap { overflow-x: auto; }
/* diff badges */
.cmp-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.cmp-badge-up { background: #dcfce7; color: #166534; }
.cmp-badge-down { background: #fee2e2; color: #991b1b; }
.cmp-badge-flat { background: #f1f5f9; color: #475569; }
/* trend text in stat pills */
.cmp-trend { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.cmp-trend-up { color: #16a34a; }
.cmp-trend-down { color: #dc2626; }
.cmp-trend-flat { color: #64748b; }
/* chart view switcher */
.cmp-viewtabs {
display: inline-flex;
background: #f1f5f9;
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.cmp-viewtab {
border: none;
background: transparent;
padding: 6px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #64748b;
cursor: pointer;
font-family: 'Plus Jakarta Sans', sans-serif;
transition: all .15s ease;
}
.cmp-viewtab:hover { color: #334155; }
.cmp-viewtab.active {
background: #fff;
color: #1e293b;
box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
/* insight cards */
.cmp-insights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.cmp-ins-card {
background: #fff;
border: 1px solid var(--k-border, #e5e7eb);
border-radius: 12px;
padding: 14px 16px;
}
.cmp-ins-head {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600; color: #64748b;
text-transform: uppercase; letter-spacing: .05em;
margin-bottom: 8px;
}
.cmp-ins-val { font-size: 21px; font-weight: 700; color: #1e293b; line-height: 1.2; }
.cmp-ins-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.cmp-ins-bar {
height: 5px; background: #f1f5f9; border-radius: 3px;
margin-top: 10px; overflow: hidden;
}
.cmp-ins-bar > div { height: 100%; }
.cmp-ins-split { display: flex; gap: 2px; background: transparent; }
.cmp-ins-split > div { border-radius: 3px; }
.cmp-ins-pips { display: flex; gap: 3px; margin-top: 10px; }
.cmp-ins-pips span { flex: 1; height: 5px; border-radius: 3px; }
/* shift detection callout */
.cmp-shift {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 20px;
}
.cmp-shift-head {
display: flex; align-items: center; gap: 7px;
font-size: 14px; font-weight: 700; color: #b45309;
margin-bottom: 12px;
}
.cmp-shift-pair {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; margin-bottom: 10px;
}
.cmp-shift-chip {
background: #fff; border: 1px solid #fde68a;
border-radius: 8px; padding: 6px 11px;
font-size: 13px; display: inline-flex; gap: 6px;
}
.cmp-shift-text { font-size: 13px; color: #854d0e; line-height: 1.6; }
/* ──────────────────────────────────────────────────────────────────
OP-Verwaltung — frosted-glass loading overlay ("Wird geladen…")
A blurred glass layer covers the whole table while it loads,
with a
spinner and animated dots. Scoped to #op-year-table only.
────────────────────────────────────────────────────────────────── */
#op-year-table_wrapper { position: relative; }
#op-year-table_wrapper .dataTables_processing {
position: absolute !important;
/* Cover only the table body — leave the top controls (length menu +
Suche box) and the bottom pagination visible and usable while loading. */
left: 0 !important;
right: 0 !important;
top: 58px !important; /* clears the length-menu / search row */
bottom: 56px !important; /* clears the pagination / info row */
width: auto !important;
height: auto !important;
min-height: 180px;
margin: 0 !important;
padding: 0 !important;
z-index: 20;
/* frosted glass */
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(4px) saturate(115%);
backdrop-filter: blur(4px) saturate(115%);
background-image: none;
display: flex;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 14px;
font-size: 14px;
font-weight: 600;
color: #1e293b;
letter-spacing: .01em;
text-align: center;
animation: op-fade-in .18s ease;
}
/* When DataTables shows the indicator it sets inline display:block —
override that with flex for centering. When it hides,
it sets
display:none inline,
which this rule does NOT touch,
so hiding still works. */
#op-year-table_wrapper .dataTables_processing[style*="display: block"],
#op-year-table_wrapper .dataTables_processing[style*="display:block"] {
display: flex !important;
}
@keyframes op-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* dual-ring spinner */
#op-year-table_wrapper .dataTables_processing::before {
content: "";
width: 34px;
height: 34px;
border-radius: 50%;
border: 3px solid rgba(79, 126, 232, 0.20);
border-top-color: #4f7ee8;
border-right-color: #4f7ee8;
animation: op-spin 0.7s linear infinite;
filter: drop-shadow(0 2px 4px rgba(79,126,232,0.25));
}
/* animated trailing dots after the text (text set to "Wird geladen" in JS) */
#op-year-table_wrapper .dataTables_processing::after {
content: "…";
display: inline-block;
width: 1.2em;
text-align: left;
margin-left: 1px;
animation: op-dots 1.4s steps(4, end) infinite;
/* clip to animate 0→3 dots */
overflow: hidden;
vertical-align: bottom;
}
@keyframes op-dots {
0% { clip-path: inset(0 100% 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
@keyframes op-spin {
to { transform: rotate(360deg); }
}
/* ──────────────────────────────────────────────────────────────────
MAHNWESEN (backend/factoring/mahnwesen)
Page-specific rules only. k-link / k-select are global design-system
classes (defined near the top with the other k- components).
────────────────────────────────────────────────────────────────── */
/* invoice-list columns: allow wrapping,
keep links readable */
#mahnTable td.mw-bills { white-space: normal; line-height: 1.9; }
#mahnTable td.mw-bills a { display: inline-block; margin-bottom: 2px; }
.mw-table-wrap { overflow-x: auto; }
#mahnTable th:last-child,
#mahnTable td:last-child { padding-right: 24px; }
/* ── Global hd-act action buttons ───────────────────────────────── */
.hd-act {
width: 30px !important;
height: 30px !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid !important;
cursor: pointer !important;
transition: background .14s, color .14s, border-color .14s !important;
text-decoration: none !important;
flex-shrink: 0 !important;
padding: 0 !important;
background: transparent;
}
.hd-act svg { display: block; }
.hd-act-edit {
background: #eaf0fd !important;
border-color: #c7d9ff !important;
color: #4f7ee8 !important;
}
.hd-act-edit svg { stroke: #4f7ee8 !important; }
.hd-act-edit:hover {
background: #4f7ee8 !important;
border-color: #4f7ee8 !important;
color: #fff !important;
}
.hd-act-edit:hover svg { stroke: #fff !important; }
.hd-act-delete {
background: #fee2e2 !important;
border-color: #fecaca !important;
color: #dc2626 !important;
}
.hd-act-delete svg { stroke: #dc2626 !important; }
.hd-act-delete:hover {
background: #dc2626 !important;
border-color: #dc2626 !important;
color: #fff !important;
}
.hd-act-delete:hover svg { stroke: #fff !important; }
/* Generic table suppress default link style */
.hd-table a,
.hd-table a:visited { color: #4f7ee8; text-decoration: none; font-weight: 500; }
.hd-table a:hover { text-decoration: underline; }
/* ── k-nowrap utility ────────────────────────────────────────────── */
.hd-nowrap { white-space: nowrap; }
/* ── Form grid ───────────────────────────────────────────────────── */
.hd-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 640px) {
.hd-form-grid { grid-template-columns: 1fr; }
}
.hd-form-group { margin-bottom: 0; }
.hd-form-label {
display: block;
font-size: 12px;
font-weight: 600;
color: #64748b;
margin-bottom: 6px;
}
.hd-required { color: #dc2626; }
/* ── hd-input ────────────────────────────────────────────────────── */
.hd-input {
width: 100%;
box-sizing: border-box;
padding: 10px 13px;
font-size: 13px;
font-family: 'Plus Jakarta Sans', sans-serif;
background: #f8f9fc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
color: #0f172a;
outline: none;
transition: border-color .14s, box-shadow .14s;
}
.hd-input:focus {
border-color: #4f7ee8;
box-shadow: 0 0 0 3px rgba(79,126,232,.10);
background: #fff;
}
.hd-input::placeholder { color: #94a3b8; }
/* ── Drawer fields ───────────────────────────────────────────────── */
.hd-drawer-field { margin-bottom: 18px; }
.hd-drawer-field label {
display: block;
font-size: 12px;
font-weight: 600;
color: #64748b;
margin-bottom: 6px;
}
.hd-drawer-field label span { color: #dc2626; }
.hd-drawer-input {
width: 100%;
box-sizing: border-box;
padding: 10px 13px;
font-size: 13px;
font-family: 'Plus Jakarta Sans', sans-serif;
background: #f8f9fc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
color: #0f172a;
outline: none;
transition: border-color .14s, box-shadow .14s;
}
.hd-drawer-input:focus {
border-color: #4f7ee8;
box-shadow: 0 0 0 3px rgba(79,126,232,.10);
background: #fff;
}
.hd-drawer-input::placeholder { color: #94a3b8; }
.hd-drawer-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
color: #1e293b;
flex: 1;
min-width: 0;
}
.hd-drawer-title-icon {
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── hd-card ─────────────────────────────────────────────────────── */
.hd-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(15,23,42,.06);
overflow: hidden;
margin-bottom: 20px;
}
.hd-card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid #f1f5f9;
background: #fafbff;
}
.hd-card-header-icon {
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hd-card-title {
font-size: 14px;
font-weight: 700;
color: #1e293b;
}
.hd-card-body { padding: 20px; }
/* ── hd-btn ──────────────────────────────────────────────────────── */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: pointer;
border: 1.5px solid transparent;
text-decoration: none;
transition: background .14s, border-color .14s, transform .1s;
white-space: nowrap;
line-height: 1;
outline: none;
}
.hd-btn-primary {
background: #4f7ee8 !important;
color: #fff !important;
border-color: #4f7ee8 !important;
}
.hd-btn-primary:hover {
background: #2855d4 !important;
border-color: #2855d4 !important;
color: #fff !important;
text-decoration: none;
}
.hd-btn-amber {
background: #d97706 !important;
color: #fff !important;
border-color: #d97706 !important;
}
.hd-btn-gray {
background: #AEB6BF !important;
color: #fff !important;
border-color: #AEB6BF !important;
}
.hd-btn-gray:hover {
background: #9aa3ae !important;
border-color: #9aa3ae !important;
color: #fff !important;
}
.hd-btn-amber:hover {
background: #b45309 !important;
border-color: #b45309 !important;
color: #fff !important;
}
.hd-btn-info {
background: #eaf0fd !important;
color: #2c5fd4 !important;
border-color: #d6e2fb !important;
}
.hd-btn-info:hover {
background: #dbe6fd !important;
color: #1e4bb8 !important;
text-decoration: none;
}
.hd-btn-warning {
background: #fffbeb !important;
color: #b45309 !important;
border-color: #fde68a !important;
}
.hd-btn-warning:hover {
background: #fef3c7 !important;
color: #92400e !important;
text-decoration: none;
}
/* small variant for in-table action buttons */
.hd-btn-sm {
padding: 5px 11px !important;
font-size: 12px !important;
border-radius: 8px !important;
}
.hd-btn-outline {
background: transparent !important;
color: #64748b !important;
border-color: #e2e8f0 !important;
}
.hd-btn-outline:hover {
background: #f1f5f9 !important;
color: #1e293b !important;
}
/* ── hd-table-card ───────────────────────────────────────────────── */
.hd-table-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(15,23,42,.06);
overflow: hidden;
margin-bottom: 20px;
}
/* ── Toast ───────────────────────────────────────────────────────── */
/* AJAX toasts: hidden until JS adds .show.
Scoped with :not() because the LAYOUT reuses the .hd-toast class name for
its session-flash toasts (inside .hd-toast-wrap,
revealed by an animation
rather than .show). Without this guard the `opacity: 0` below cancels the
flash toast the moment its 0.25s intro animation finishes — it appears and
vanishes instantly. */
.hd-toast:not(.hd-toast-success):not(.hd-toast-error) {
position: fixed;
bottom: 22px;
right: 22px;
background: #0f172a;
color: #fff;
padding: 11px 18px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 8px 28px rgba(15,23,42,.2);
z-index: 9999;
opacity: 0;
transform: translateY(8px);
transition: opacity .22s, transform .22s;
pointer-events: none;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.hd-toast:not(.hd-toast-success):not(.hd-toast-error).show { opacity: 1; transform: translateY(0); }
.hd-confirm-foot .hd-btn { flex: 1; }
/* ── hd-drawer — slide-in panel ─────────────────────────────────── */
.hd-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 95vw;
background: #fff;
box-shadow: -4px 0 28px rgba(15,23,42,.12);
display: flex;
flex-direction: column;
z-index: 1051;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.hd-drawer.open { transform: translateX(0); }
.hd-drawer-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,15,30,.35);
z-index: 1050;
}
.hd-drawer-overlay.open { display: block; }
.hd-drawer-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.hd-drawer-close {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .13s;
margin-left: auto;
}
.hd-drawer-close:hover { background: #f1f5f9; }
.hd-drawer-close svg { stroke: #64748b; }
.hd-drawer-body {
flex: 1;
overflow-y: auto;
padding: 20px 22px;
}
.hd-drawer-foot {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
background: #fafbff;
}
.hd-drawer-foot .hd-btn { flex: 1; }
/* ── Settings page specific ──────────────────────────────────────── */.hd-type-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
background: #eaf0fd;
color: #2855d4;
}
/* hd-card-header close button alignment */
.hd-card-header .hd-drawer-close { margin-left: auto; }
/* hd-drawer-close inside hd-card-header */.prof-field .hd-form-label { margin-bottom: 8px; }
.emp-pw-wrap .hd-input {
flex: 1;
padding-right: 42px;
}
.work-time-wrap .hd-input {
padding-left: 38px;
cursor: pointer;
caret-color: transparent;
}
.work-time-wrap .hd-input:focus { border-color: #4f7ee8; box-shadow: 0 0 0 3px rgba(79,126,232,.10); }
/* ── Page header row (title + button) ──────────────────────────── */
/* .hd-header belongs to the layout (fixed top bar) — page header rows use .k-header,
see the LEGACY note above */
/* ── Toolbar (filter bar above table) ──────────────────────────── */
.hd-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.hd-toolbar select,
.hd-toolbar input {
padding: 8px 12px;
font-size: 13px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
outline: none;
background: #f8f9fc;
color: #0f172a;
font-family: 'Plus Jakarta Sans', sans-serif;
transition: border-color .14s;
}
.hd-toolbar select:focus,
.hd-toolbar input:focus { border-color: #4f7ee8; box-shadow: 0 0 0 3px rgba(79,126,232,.10); }
/* ── hd-btn-danger ─────────────────────────────────────────────── */
.hd-btn-danger {
background: #ef4444 !important;
color: #fff !important;
border-color: #ef4444 !important;
}
.hd-btn-danger:hover {
background: #dc2626 !important;
border-color: #dc2626 !important;
color: #fff !important;
}
/* ── hd-act-contact ─────────────────────────────────────────────── */
.hd-act-contact {
background: #dcfce7;
border-color: #86efac;
color: #166534;
}
.hd-act-contact:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
.hd-act-contact svg { stroke: #16a34a; }
.hd-act-contact:hover svg { stroke: #fff !important; }
.hd-type-badge {
display: inline-flex; align-items: center;
padding: 3px 10px; border-radius: 20px;
font-size: 11px; font-weight: 500;
background: #eaf0fd; color: #2855d4;
}
/* ── Modal overlay ──────────────────────────────────────────────── */
.hd-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,15,30,.5);
z-index: 1060;
align-items: center;
justify-content: center;
padding: 16px;
}
.hd-modal-overlay.open { display: flex !important; }
/* ── Modal box ──────────────────────────────────────────────────── */
.hd-modal {
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(15,23,42,.2);
width: 520px;
max-width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.hd-modal-sm { width: 400px; }
.hd-modal-lg { width: 720px; }
.hd-modal-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid #e2e8f0;
background: #fafbff;
flex-shrink: 0;
justify-content: space-between;
}
.hd-modal-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
color: #1e293b;
flex: 1;
margin: 0; /* the title is often an ; drop the browser default */
line-height: 1.4;
}
.hd-modal-title-icon {
width: 32px; height: 32px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hd-modal-close {
width: 30px; height: 30px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #f8fafc;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .13s;
}
.hd-modal-close:hover { background: #f1f5f9; }
.hd-modal-body {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.hd-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid #e2e8f0;
background: #fafbff;
flex-shrink: 0;
}
/* ── Delete icon in modal ───────────────────────────────────────── */
.hd-del-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: #fee2e2;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.hd-del-icon svg { width: 26px; height: 26px; stroke: #ef4444; }
/* ── Form sections inside modal ─────────────────────────────────── */
.hd-form-section { margin-bottom: 20px; }
.hd-form-section:last-child { margin-bottom: 0; }
.hd-form-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #64748b;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #f1f5f9;
}
.hd-form-section-title svg { width: 14px; height: 14px; flex-shrink: 0; }
.hd-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 540px) {
.hd-form-row { grid-template-columns: 1fr; }
}
.hd-form-control {
width: 100%;
box-sizing: border-box;
padding: 9px 12px;
font-size: 13px;
font-family: 'Plus Jakarta Sans', sans-serif;
background: #f8f9fc;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
color: #0f172a;
outline: none;
transition: border-color .14s, box-shadow .14s;
}
.hd-form-control:focus {
border-color: #4f7ee8;
box-shadow: 0 0 0 3px rgba(79,126,232,.10);
background: #fff;
}
.hd-form-control::placeholder { color: #94a3b8; }
textarea.hd-form-control { resize: vertical; min-height: 80px; }
.hd-form-select { appearance: auto; }
/* ── Labels inside hd-form-group (modal forms with no hd-form-label) ─ */
.hd-form-group label,
.hd-form-section .hd-form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: #64748b;
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.hd-form-group label span { color: #dc2626; }
.hd-form-group { margin-bottom: 14px; }
.hd-form-group:last-child { margin-bottom: 0; }
/* select using form-control inside hd-form-group */
.hd-form-group select.form-control,
.hd-form-group .form-control {
width: 100% !important;
box-sizing: border-box;
padding: 9px 12px;
font-size: 13px;
font-family: 'Plus Jakarta Sans', sans-serif;
background: #f8f9fc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
color: #0f172a;
outline: none;
transition: border-color .14s, box-shadow .14s;
box-shadow: none;
height: auto;
}
.hd-form-group select.form-control:focus,
.hd-form-group .form-control:focus {
border-color: #4f7ee8;
box-shadow: 0 0 0 3px rgba(79,126,232,.10);
background: #fff;
}
/* Card footer adjustments for consistent button placement */
.hd-card-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
align-items: center;
padding: 20px;
border-top: 1px solid var(--border);
}
/* ============================================================
FACTORING — Rechnungen list (index)
Moved out of the blade's @section('css_style').
============================================================ */
/* ── Filter row: force all three controls to the same 42px height ──
The global .hd-input / .hd-btn are padding-sized (~40px / ~37px) while the
global Select2 skin is height:42px !important. Pin all three to 42px so
the month field,
Kostenträger dropdown and Filter button line up. */
.fac-filter #month_year.hd-input,
.fac-filter .hd-input {
height: 42px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 42px !important;
}
td.action_button .hd-btn { margin: 2px 2px; }
/* The Edit chip is positioned by .hd-info-card .edit */
/* ── Shell restyle on the backend_1 layout ── */.fs-card-footer .hd-btn-primary { margin-left: auto; }
#fs-drawer .hd-drawer-body { overflow-y: auto; }
/* ============================================================
FACTORING — OP-Verwaltung (index)
All selectors namespaced (#op-year-table,
#op-drawer,
.op-*).
============================================================ */
/* ── Filter row: keep every control the same height ── */
.op-filter .hd-input,
.op-filter select.hd-input {
height: 42px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.op-filter .hd-form-label { display: block; margin-bottom: 6px; }
/* euro prefix on the Amount field */
/* lock page scroll while the drawer is open */
#op-drawer .hd-drawer-body { overflow-y: auto; }
/* ══════════════════════════════════════════════════════════════════
INFO CARD — shared detail-page card (Rechnungen show,
OP-Verwaltung view)
Sits on top of .hd-card: resets .info-box,
gives a positioning context
for the absolute Edit chip,
and adds the uppercase title and the
label/value row layout.
Use:
…
══════════════════════════════════════════════════════════════════ */
/* card grid */
.hd-info-cards { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
/* a column may hold one card or several stacked vertically */
.hd-info-cards-col {
flex: 1 1 230px; /* basis 230px so 4 columns fit, then wrap */
min-width: 230px;
display: flex;
flex-direction: column; /* stack multiple cards, don't sit them side by side */
gap: 16px;
}
.hd-info-cards-col > .hd-info-card { width: 100%; margin-bottom: 0; }
@media (max-width: 1100px) {
.hd-info-cards-col { flex: 1 1 calc(50% - 16px); }
}
@media (max-width: 620px) {
.hd-info-cards-col { flex: 1 1 100%; }
}
/* the card itself — .hd-card supplies bg/border/radius/shadow */
.hd-info-card {
display: block;
min-height: 0;
padding: 16px 18px;
position: relative; /* anchors the absolute Edit chip */
}
.hd-info-card .info-box-content { padding: 0; }
/* title */
.hd-info-card h1.info-box-number,
.hd-info-card .hd-info-card-title {
font-size: 13px !important; font-weight: 700; color: #0f172a;
text-transform: uppercase; letter-spacing: .04em;
margin: 0 0 10px;
padding-right: 74px; /* reserve room for the Edit chip */
min-height: 20px;
overflow-wrap: anywhere; /* long titles wrap instead of running under it */
}
/* value column keeps clear of the chip on the first row too */
.hd-info-card .info-box-content > .hd-kv:first-child { padding-top: 30px; }
.hd-info-card .info-box-content > h1.info-box-number:first-child { margin: 0 0 10px; }
.hd-info-card span { display: block; font-size: 13.5px; color: #334155; line-height: 1.6; }
/* label / value rows */
.hd-kv { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 13px; }
.hd-kv-label { flex: 1 1 auto; min-width: 0; }
.hd-kv-label span { display: block; overflow-wrap: anywhere; }
.hd-kv-val { flex: 0 0 auto; margin-left: auto; text-align: right; }
.hd-kv-red,
.hd-kv-red span { color: #dc2626; }
.hd-kv-strong-red { color: #f00; font-weight: 700; }
/* edit chip,
pinned top-right on the title line */
.hd-info-card .edit,
.hd-info-card .edit_style,
.hd-info-card .btn-warning.edit,
.hd-info-card .btn-warning.edit_style,
.hd-info-card a.btn-warning {
position: absolute; top: 14px; right: 16px; bottom: auto; z-index: 2;
display: inline-block;
background: #fffbeb !important; color: #b45309 !important;
border: 1px solid #fde68a !important;
border-radius: 8px !important;
padding: 3px 12px !important;
font-size: 12px !important; font-weight: 600;
line-height: 1.5; height: auto !important; width: auto !important;
}
.hd-info-card .edit:hover,
.hd-info-card .edit_style:hover,
.hd-info-card a.btn-warning:hover { background: #fef3c7 !important; }
/* ============================================================
FACTORING — OP-Verwaltung View (note/year detail page)
All selectors namespaced (.hd-*,
.hd-*,
#hd-*,
.hd-page).
============================================================ */
input:checked+
input:focus+
input:checked+
.hd-page sup {
top: -0.4em;
font-size: 18px;
color: red;
}
/* ══ Page styles (hd-*) ══════════════════════════════════════ */
/* content cards holding tables/forms */
/* tables */
/* hd-table covers the table look; these add what it doesn't:
the totals row and the inline cost inputs. *//* action icons in the notes table */
/* ── Flex layout ── */
/* drawer support */
.hd-drawer .hd-drawer-body { overflow-y: auto; }
/* injected/inline drawer forms keep Bootstrap markup — style it here */
.hd-drawer form .form-group,
.hd-drawer form .row { display:block; margin:0 0 16px; }
.hd-drawer form label,
.hd-drawer form .col-form-label {
display:block; font-size:12.5px; font-weight:600; color:#475569; margin-bottom:6px; padding:0;
}
.hd-drawer form .form-control,
.hd-drawer form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.hd-drawer form select,
.hd-drawer form textarea {
width:100%; height:42px; border:1px solid #e2e8f0; border-radius:10px;
padding:0 12px; font-size:14px; color:#1e293b; background:#fff; box-sizing:border-box;
}
.hd-drawer form textarea { height:auto; min-height:90px; padding:10px 12px; }
.hd-drawer form .form-control:focus { outline:none; border-color:#3b6ef5; box-shadow:0 0 0 3px rgba(59,110,245,.12); }
.hd-drawer form .btn,
.hd-drawer form .btn-block,
.hd-drawer form button[type="submit"] {
width:100%; height:44px; border:none; border-radius:10px;
background:#2563eb; color:#fff; font-size:14px; font-weight:600; cursor:pointer !important;
}
.hd-drawer form .btn:hover,
.hd-drawer form button[type="submit"]:hover { background:#1d4ed8; }
.hd-drawer form .error { color:#dc2626; font-size:12px; margin-top:4px; }
.hd-drawer sup { color:#dc2626; }
.hd-drawer .card-body { padding:0; }
/* Modals use the global .hd-modal component. Only two page-specific
additions are needed: the upload modal nests a