/*Global Fonts*/ 


/* FONT: INTER */
@font-face {
    font-family: "Inter";
    src: url("https://dpfiles.polai.at/_fonts/Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype");
}
 /*Global CSS*/ 

/* Intentionally empty.
   Dancepilot styling is centralized in src/modules/content_dancepilot/style.css. */

 /*Page CSS*/ 


/* content_dancepilot */

:root {
    --dp-bg-color: #1A1A1A; /* Sehr dunkles Grau, fast Schwarz */
    --dp-surface-color: #25282C; /* Dunkelgrau für Oberflächen */
    --dp-surface-hover: #2E3237; /* Etwas helleres Grau für Hover */
    --dp-border-color: #3A3F44; /* Dezente Randfarbe */
    --dp-text-primary: #E8EAED; /* Helles Grau für Haupttext */
    --dp-text-primary-rgb: 232, 234, 237;
    --dp-text-secondary: #A8ADB3; /* Mittleres Grau für Sekundärtext */
    --dp-text-secondary-rgb: 168, 173, 179;
    --dp-netgrid-surface: #111416;
    --dp-kpi-surface: #111416;
    --dp-accent-color: #1a1d21; /* Türkis */
    --dp-accent-rgb: 26, 29, 33;
    --dp-success-color: var(--dp-accent-color); /* NEU: Türkis als Success-Farbe */
    --dp-success-rgb: var(--dp-accent-rgb);     /* NEU: Türkis als Success-Farbe */
    --dp-danger-color: #E57373; /* Rot, wird für Warnungen verwendet */
    --dp-danger-rgb: 229, 115, 115;
    --dp-warning-color: #FFCA28;
    --dp-warning-rgb: 255, 202, 40;

    /* NEUE KATEGORIE-FARBEN (angepasst) */
    --dp-cat-warnings-color: var(--dp-danger-color); /* Rot für Warnungen */
    --dp-cat-warnings-rgb: var(--dp-danger-rgb);
    --dp-cat-administration-color: #8E44AD;   /* Lila für Administration */
    --dp-cat-administration-rgb: 142, 68, 173;
    --dp-cat-currentplan-color: var(--dp-accent-color); /* NEU: Türkis für Kurse & Dienstplan */
    --dp-cat-currentplan-rgb: var(--dp-accent-rgb);
    --dp-cat-coursesplanning-color: #7f858b; /* Grau fuer Kurse & Planung */
    --dp-cat-coursesplanning-rgb: 127, 133, 139;
    --dp-cat-events-color: var(--dp-accent-color); /* Türkis (Standard Akzent) für Events */
    --dp-cat-events-rgb: var(--dp-accent-rgb);
    /* Alte Farbvariablen werden entfernt oder durch die neuen ersetzt */

    /* NEU: Kategorie "Codes" */
    --dp-cat-codes-color: #74787d;   /* Grau fuer Codes */
    --dp-cat-codes-rgb: 116, 120, 125;

    --dp-font-sans: Inter, sans-serif;
    --dp-font-monospace: Inter, sans-serif;
}

body {
    font-family: Inter, sans-serif;
    background-color: var(--dp-bg-color);
    color: var(--dp-text-primary);
    line-height: 1.6;
    font-size: 1rem; /* Basis-Schriftgröße */
}

/* Bootstrap Overrides falls nötig, oder generelle Tags */
h1, h2, h3, h4, h5, h6 {
    color: var(--dp-text-primary);
    font-weight: 600;
    margin-top: 0; /* Üblichen Browser-Margin entfernen für konsistente Abstände */
    margin-bottom: 0.75em; /* Konsistenter unterer Margin */
}

/* MODULE BOOTSTRAP OVERRIDES */

/* Define the success color */
/* :root { -- already defined above 
    --success-color: 85,148,77;
    --success-font-color: #fff;
  } */
  
/* Text */
.text-success {
    color: var(--dp-success-color) !important;
}

/* Background */
.bg-success {
    background-color: var(--dp-success-color) !important;
}

/* Buttons */
.btn-success {
    background: var(--dp-success-color) !important;
    border-color: var(--dp-success-color) !important;
    color: #fff !important;
    font-family: Inter, sans-serif;
}
  
.btn-success:hover {
    background: rgba(var(--dp-success-rgb), 0.8) !important;
    border-color: rgba(var(--dp-success-rgb), 0.8) !important;
    color: #fff !important;
}

.btn-success:focus, .btn-success.focus {
  border-color: var(--dp-success-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--dp-success-rgb), 0.5) !important;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active {
    background-color: var(--dp-success-color) !important;
    border-color: var(--dp-success-color) !important;
}

.btn-outline-success {
    border-color: var(--dp-success-color) !important;
    color: var(--dp-success-color) !important;
}

.btn-outline-success:hover {
    background-color: var(--dp-success-color) !important;
    color: #fff !important;
}

/* Badge */
.badge-success {
    background-color: var(--dp-success-color) !important;
    color: #fff !important;
}
  
/* Define the danger color */
/* :root { -- already defined above
    --danger-color: 185,62,62;
    --danger-font-color: #fff;
} */
    
/* Text */
.text-danger {
    color: var(--dp-danger-color) !important;
}
    
/* Buttons */
.btn-danger {
    background: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff; 
    font-family: Inter, sans-serif;
}
    
.btn-danger:hover {
    background: rgba(var(--dp-danger-color), 0.8);
    border-color: rgba(var(--dp-danger-color), 0.8);
    color: #fff;
}

.btn-outline-danger {
    border-color: var(--dp-danger-color);
    color: var(--dp-danger-color);
}

.btn-outline-danger:hover {
    border-color: var(--dp-danger-color);
    background-color: var(--dp-danger-color);
    color: #fff;
}

/* Badge */
.badge-danger {
    background-color: var(--dp-danger-color);
    color: #fff;
}


/* Define the warning color */
/* :root { -- already defined above
--warning-color: 194,173,67;
} */
    
/* Text */
.text-warning {
    color: var(--dp-warning-color) !important;
}
    
/* Buttons */
.btn-warning {
    background: var(--dp-warning-color);
    border-color: var(--dp-warning-color);
    color: #1A1C1E; /* Dunkler Text für guten Kontrast auf Gelb */
    font-family: Inter, sans-serif;
}
    
.btn-warning:hover {
    background: rgba(var(--dp-warning-color), 0.8);
    border-color: rgba(var(--dp-warning-color), 0.8);
    color: #1A1C1E;
}
    
.btn-outline-warning {
    border-color: var(--dp-warning-color);
    color: var(--dp-warning-color);
}
    
.btn-outline-warning:hover {
    border-color: var(--dp-warning-color);
    background-color: var(--dp-warning-color);
    color: #1A1C1E;
}
    
/* Badge */
.badge-warning {
    background-color: var(--dp-warning-color);
    color: #1A1C1E;
}
    

/* MODULE CSS*/

.cal-container {
    width: 100%;
    margin-bottom: 0;
}

.cal-title {
    width: 100%;
    background: var(--dp-bg-color);
    padding: 10px 1%;
}

.cal-options {
    width: 100%;
    background: rgba(52, 58, 64, .7);
    padding: 3px 1%;
    text-align: center;
}

.cal-option {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
}

.cal-info {
    width: 100%;
    background: rgba(52, 58, 64, .7);
    padding: 20px 1% 10px 1%;
    text-align: center;
}

.cal-head {
    display: table;
    width: 100%;
    margin: 0 0 0 0;
    background: rgba(52, 58, 64, .7);
    padding: 0;
    text-align: center;
    border-top: 1px solid #555;
}

.cal-day {
    width: 14%;
    display: table-cell;
    vertical-align: top;
    min-height: 100%;
}

@media only screen and (max-width: 1279px) {
    .cal-day {
        display: block;
    }

    .cal-day {
        width: 100%;
        display: block;
        min-height: auto;
    }
}

.cal-day-border {
    border-right: 1px solid #555;
}

.cal-day-title {
    font-size: 1rem;
    font-weight: 700;
    padding: 3px 0;
    min-height: 40px;
}

.cal-day-entry {
    background-color: #fff;
    color: #000;
    border-radius: 4px;
    border: 1px solid #999;
    margin: 4px 8px;
    padding: 2px 4px;
    font-weight: 400;
    text-align: left;
    text-decoration: none !important;
}



/* TIMELINE */
ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 40px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #8b9299;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}



/* HR CORRECTION */
hr {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}


.dpqrshow {
    width: 100%;
    max-width: 400px;
}




li.picker-switch > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > a:nth-child(1) {
    color: #000;
}



/* Fixing word break for import table */
#classimporttbl td{
    word-break: break-word;
  }




.fixed-top {
    padding-bottom: 0 !important;
}


/* NG-Cards Extensions */
.ng-card-100 {
    width: 100%;
}

.ng-card-50 {
    width: 50%;
}

@media screen and (max-width: 1079px) {
    .ng-card-50 {
        width: 100%;
    }
}


/*** CURRENCY FORMAT ***/
.currency {
    padding-left:12px;
}

.currency-symbol {
    position:absolute;
    padding: 2px 5px;
}


/* HIGHLIGHT FOR CLIENT SEARCH */
.clientsearch-highlight {
    background-color: rgba(255, 55, 55, 0.4) ;
}

/* Ensure FullCalendar event content wraps and does not overflow into next column */
.fc .fc-event-title, .fc .fc-event-main, .fc .fc-event-title-container, .fc .fc-event-time {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.4;
}

/* Optionally, make sure the event container does not overflow */
.fc .fc-daygrid-event {
    max-width: 100%;
    overflow: hidden;
}

/* Ensure 'Kalenderwoche' is perfectly centered under the month title */
.fc-kw-display {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
    margin-top: 2px;
}

/* Force filter bar to be a row on desktop, column on mobile */
.filter-dropdown-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
@media (max-width: 900px) {
    .filter-dropdown-row {
        flex-direction: column !important;
        align-items: stretch;
    }
}

.dp-codes-page {
    --dp-codes-panel: rgba(255,255,255,.045);
    --dp-codes-panel-strong: rgba(255,255,255,.07);
}

.dp-codes-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(var(--dp-accent-rgb), .2);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--dp-accent-rgb), .18), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.dp-codes-hero h1 {
    margin: 0;
    color: var(--dp-text-primary);
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-codes-hero p {
    margin: 8px 0 0;
    color: var(--dp-text-secondary);
}

.dp-codes-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dp-codes-count {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(var(--dp-accent-rgb), .24);
    border-radius: 7px;
    background: rgba(var(--dp-accent-rgb), .1);
}

.dp-codes-count strong {
    color: var(--dp-accent-color);
    font-size: 1.25rem;
    line-height: 1.2;
}

.dp-codes-count small {
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

.dp-codes-locations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 14px;
}

.dp-code-panel,
.dp-code-admin-panel {
    border: 1px solid var(--dp-border-color);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--dp-codes-panel), rgba(255,255,255,.025));
}

.dp-code-panel {
    overflow: hidden;
}

.dp-code-panel header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--dp-border-color);
}

.dp-code-location-mark {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: color-mix(in srgb, var(--location-color), transparent 72%);
    border: 1px solid color-mix(in srgb, var(--location-color), transparent 42%);
    color: var(--dp-text-primary);
    font-weight: 700;
}

.dp-code-panel h2,
.dp-code-admin-panel h2 {
    margin: 0;
    color: var(--dp-text-primary);
    font-size: 1rem;
    line-height: 1.2;
}

.dp-code-panel p {
    margin: 4px 0 0;
    color: var(--dp-text-secondary);
    font-size: 0.85rem;
}

.dp-code-list {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.dp-code-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
    background: rgba(0,0,0,.12);
}

.dp-code-entry strong,
.dp-code-entry small {
    display: block;
}

.dp-code-entry strong {
    color: var(--dp-text-primary);
    font-size: 0.85rem;
}

.dp-code-entry small {
    color: var(--dp-accent-color);
    font-size: 0.75rem;
    margin-top: 2px;
}

.dp-code-entry.is-admin {
    border-color: rgba(245,165,36,.25);
    background: rgba(245,165,36,.06);
}

.dp-code-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 118px;
    justify-content: space-between;
    border: 1px solid rgba(var(--dp-accent-rgb), .24);
    border-radius: 7px;
    background: rgba(var(--dp-accent-rgb), .1);
    color: var(--dp-text-primary);
    padding: 8px 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.dp-code-value i {
    color: var(--dp-accent-color);
}

.dp-codes-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 180px;
    padding: 26px;
    color: var(--dp-text-secondary);
    text-align: center;
}

.dp-codes-empty i {
    color: var(--dp-accent-color);
    font-size: 1.5rem;
}

.dp-codes-empty strong {
    color: var(--dp-text-primary);
}

.dp-codes-empty.is-compact {
    min-height: 80px;
    border: 1px dashed var(--dp-border-color);
    border-radius: 8px;
}

.dp-codes-admin-grid {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.dp-code-admin-panel {
    padding: 16px;
}

.dp-code-admin-panel h2 {
    margin-bottom: 14px;
}

.dp-code-form,
.dp-code-admin-list {
    display: grid;
    gap: 10px;
}

.dp-code-form label,
.dp-code-row-form label {
    display: grid;
    gap: 6px;
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
    margin: 0;
}

.dp-code-form input,
.dp-code-form select,
.dp-code-row-form input,
.dp-code-row-form select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--dp-border-color);
    border-radius: 7px;
    background: rgba(0,0,0,.18);
    color: var(--dp-text-primary);
    padding: 7px 9px;
}

.dp-code-form-row,
.dp-code-row-form {
    display: grid;
    gap: 8px;
}

.dp-code-form-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
}

.dp-code-check {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 7px !important;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--dp-border-color);
    border-radius: 7px;
    background: rgba(255,255,255,.025);
    color: var(--dp-text-primary) !important;
}

.dp-code-check input {
    width: auto;
    min-height: 0;
    padding: 0;
}

.dp-code-row-form {
    grid-template-columns: minmax(130px, .9fr) minmax(140px, 1fr) minmax(110px, .8fr) 84px auto auto auto;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(0,0,0,.12);
}

.dp-code-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 1100px) {
    .dp-codes-admin-grid,
    .dp-code-row-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dp-codes-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-codes-locations {
        grid-template-columns: 1fr;
    }

    .dp-code-form-row {
        grid-template-columns: 1fr;
    }
}

.dp-codes-page {
    --dp-codes-panel: rgba(11, 28, 27, .82);
    --dp-codes-panel-strong: rgba(13, 41, 39, .92);
    --dp-codes-line: rgba(var(--dp-accent-rgb), .18);
    max-width: 1500px;
    margin: 0 auto;
}

.dp-codes-page .dp-codes-hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: 26px;
    border-color: var(--dp-codes-line);
    background:
        radial-gradient(circle at 15% 0%, rgba(var(--dp-accent-rgb), .24), transparent 36%),
        linear-gradient(135deg, rgba(8, 24, 23, .96), rgba(7, 16, 18, .94));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.dp-codes-page .dp-codes-hero::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--dp-accent-rgb), .18), transparent 68%);
    pointer-events: none;
}

.dp-codes-title-lock {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    border: 1px solid rgba(var(--dp-accent-rgb), .35);
    border-radius: 8px;
    background: rgba(var(--dp-accent-rgb), .12);
    color: var(--dp-accent-color);
    font-size: 1.25rem;
}

.dp-codes-title-row {
    display: flex;
    align-items: center;
}

.dp-codes-page .dp-codes-hero h1 {
    font-size: 2rem;
    font-weight: 700;
}

.dp-codes-page .dp-codes-hero p {
    max-width: 560px;
    color: rgba(var(--dp-text-secondary-rgb), .94);
}

.dp-codes-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
}

.dp-codes-search {
    position: relative;
}

.dp-codes-search i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dp-accent-color);
    pointer-events: none;
}

.dp-codes-search input,
.dp-codes-filter {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    background: rgba(0,0,0,.2);
    color: var(--dp-text-primary);
    outline: 0;
}

.dp-codes-search input {
    padding: 9px 12px 9px 38px;
}

.dp-codes-filter {
    min-width: 180px;
    padding: 9px 10px;
}

.dp-codes-page .dp-codes-count {
    border-color: rgba(var(--dp-accent-rgb), .34);
    background: rgba(var(--dp-accent-rgb), .13);
}

.dp-codes-page .dp-codes-locations {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}

.dp-codes-page .dp-code-panel,
.dp-codes-page .dp-code-admin-panel {
    border-color: rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
        var(--dp-codes-panel);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
}

.dp-codes-page .dp-code-panel header {
    padding: 18px;
    border-bottom-color: rgba(255,255,255,.08);
    background: linear-gradient(90deg, color-mix(in srgb, var(--location-color), transparent 82%), transparent);
}

.dp-codes-page .dp-code-location-mark {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    font-size: 1rem;
    letter-spacing: .02em;
}

.dp-code-location-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

.dp-code-location-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dp-codes-page .dp-code-list {
    gap: 10px;
    padding: 14px;
}

.dp-codes-page .dp-code-entry {
    min-height: 62px;
    border-color: rgba(255,255,255,.08);
    background: rgba(0,0,0,.16);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.dp-codes-page .dp-code-entry:hover {
    border-color: rgba(var(--dp-accent-rgb), .32);
    background: rgba(var(--dp-accent-rgb), .055);
    transform: translateY(-1px);
}

.dp-code-entry-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dp-code-entry-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: rgba(var(--dp-accent-rgb), .11);
    color: var(--dp-accent-color);
}

.dp-codes-page .dp-code-entry strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-code-badges {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.dp-code-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid rgba(var(--dp-accent-rgb), .24);
    border-radius: 6px;
    background: rgba(var(--dp-accent-rgb), .09);
    color: var(--dp-accent-color);
    font-size: 0.75rem;
    font-weight: 700;
}

.dp-code-badge.is-admin {
    border-color: rgba(255,202,40,.32);
    background: rgba(255,202,40,.1);
    color: var(--dp-warning-color);
}

.dp-codes-page .dp-code-value {
    min-width: 132px;
    border-color: rgba(var(--dp-accent-rgb), .26);
    background: rgba(0,0,0,.18);
    font-family: Inter, sans-serif;
    letter-spacing: .06em;
}

.dp-codes-page .dp-code-value.is-visible {
    background: rgba(var(--dp-accent-rgb), .12);
}

.dp-codes-page .dp-code-admin-panel {
    padding: 18px;
}

.dp-code-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.dp-code-admin-head h2 {
    margin: 0;
}

.dp-code-admin-total {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--dp-accent-rgb), .24);
    border-radius: 7px;
    background: rgba(var(--dp-accent-rgb), .08);
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

.dp-codes-page .dp-code-form,
.dp-codes-page .dp-code-admin-list {
    gap: 12px;
}

.dp-codes-page .dp-code-form input,
.dp-codes-page .dp-code-form select,
.dp-codes-page .dp-code-row-form input,
.dp-codes-page .dp-code-row-form select {
    min-height: 42px;
    border-color: rgba(255,255,255,.1);
    background: rgba(0,0,0,.22);
}

.dp-codes-page .dp-code-row-form {
    grid-template-columns: minmax(150px, .9fr) minmax(160px, 1fr) minmax(130px, .8fr) 92px auto auto auto;
    border-color: rgba(255,255,255,.08);
    background: rgba(0,0,0,.16);
}

.dp-code-list-empty-filtered {
    display: none;
    padding: 18px;
    border: 1px dashed rgba(var(--dp-accent-rgb), .24);
    border-radius: 8px;
    color: var(--dp-text-secondary);
    text-align: center;
}

.dp-codes-page.has-filtered-empty .dp-code-list-empty-filtered {
    display: block;
}

.dp-code-panel.is-hidden-by-filter,
.dp-code-entry.is-hidden-by-filter,
.dp-code-row-form.is-hidden-by-filter {
    display: none;
}

@media (max-width: 900px) {
    .dp-codes-toolbar {
        grid-template-columns: 1fr;
    }

    .dp-codes-filter {
        min-width: 0;
    }
}

/* FullCalendar: Listenansicht Tageskopf dunkler Hintergrund */
.fc-theme-standard .fc-list-day-cushion {
  background: rgba(52,58,64,0.7) !important;
  color: #fff;
}

/* FullCalendar: Listenansicht Event Hover dunkleres Grau */
.fc .fc-list-event:hover td {
  background: rgba(52,58,64,0.7) !important;
  color: #fff !important;
}



/* FullCalendar: Mehr-Link ("+X weitere") dunkleres Grau */
:root {
  --fc-more-link-bg-color: #232323;
  --fc-Türkis-bg-color: #232323;
  --fc-today-bg-color: rgb(236, 255, 230, 0.2);
}

.fc .fc-more-popover .fc-popover-body {
    background-color: #232323;

    
}

/* Dashboard Styles */
.dashboard-layout-container {
    display: flex;
    flex-direction: column; 
    min-height: 100vh; 
    background-color: var(--dp-bg-color);
    overflow: visible; 
    /* margin-top: 15px; */ /* Entfernt, da Header jetzt den Abstand regelt */
}

/* Globaler Header Anpassungen */
.dashboard-global-header {
    display: flex; /* Wiederhergestellt */
    align-items: center; /* Wiederhergestellt */
    padding: 10px 25px; /* Wiederhergestellt - Standard-Padding für den Header */
    background-color: var(--dp-surface-color); /* Wiederhergestellt - Hintergrund für den Header */
    /* border-bottom: 1px solid var(--dp-border-color); */ /* Optional: eine feine Linie unter dem Header, falls gewünscht, sonst bleibt die Linie nur unter dem Titel */
    height: auto; /* Wiederhergestellt - Höhe passt sich dem Inhalt an */
    /* margin: 0; */ /* Standardmäßig 0 oder spezifisch setzen falls nötig */
    /* overflow: visible; */ /* Geändert von hidden zu visible oder entfernen, falls Inhalt nicht überläuft */
    box-sizing: border-box; 
}

/* Styling für den Titel - Selektor bleibt generisch, da er die korrekten Stile enthält */
.appformtitle {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dp-accent-color); 
    margin-bottom: 0; 
    padding-bottom: 8px; /* Für die Akzentlinie unter dem Text */
    border-bottom: 3px solid var(--dp-accent-color); /* Akzentlinie */
    line-height: 1.2;
    display: inline-block; /* Wichtig für korrekte Darstellung von Padding/Border */
    /* margin-left: 0; */ /* Standardmäßig, keine spezielle Einrückung */
}

.dashboard-global-header .appformheader {
    /* Keine speziellen Styles hier, dient als einfacher Wrapper */
    margin-bottom: 0 !important; /* von Bootstrap, falls nötig */
}

/* Wrapper für Sidebar und Hauptinhalt */
.dashboard-body-content-wrapper {
    display: flex;
    flex-grow: 1;
    overflow: visible; 
}

/* Neue CSS-Regeln für den Titel-Container im Main Content - HIER EINFÜGEN */
.main-content-header {
    padding: 10px 25px 0 25px; /* Oben 10px für Bündigkeit, L/R 25px Standard-Padding, Unten 0 (appformtitle hat Gestaltung) */
    margin-bottom: 20px;      /* Abstand zu den ersten Widgets/Kategorien, vorher 15px, auf 20px erhöht für etwas mehr Luft */
    background-color: transparent; /* Hintergrund wie der Hauptinhalt (body --dp-bg-color) */
}

/* Sidebar - Minimalstil */
.dashboard-sidebar {
    width: 260px;
    background-color: var(--dp-bg-color); 
    padding: 0 15px 20px 15px; /* padding-top auf 0, Rest wie zuvor oder angepasst */
    border-right: 1px solid var(--dp-border-color);
    flex-shrink: 0; 
    box-sizing: border-box; 
    transition: width 0.3s ease, padding 0.3s ease; /* Animation für Kollaps */
    /* overflow-y: auto; für internen Scroll, falls Inhalt länger - wird von .sidebar-fixed behandelt */
}

/* Styles für die kollabierte Sidebar */
.dashboard-sidebar.sidebar-collapsed {
    width: 70px; /* Breite für Icons + Toggle Button */
    padding: 20px 10px;
}

.dashboard-sidebar.sidebar-collapsed .sidebar-navigation {
    display: none; /* Navigations-Menü komplett ausblenden */
}

.dashboard-sidebar.sidebar-collapsed .sidebar-logo-area {
    justify-content: center; /* Toggle Icon zentrieren */
    align-items: center; /* Icon auch vertikal zentrieren */
    padding: 10px 0; /* Etwas Padding oben/unten für das Icon */
    border-bottom: none; /* Keine Trennlinie, wenn Navi weg ist */
    height: auto; /* Höhe an Inhalt anpassen */
}

/* Wiederhergestellte Sidebar Navigations-Styles */
.sidebar-logo-area {
    padding: 10px; /* Einheitliches Padding (10px) oben/unten und links/rechts */
    margin-bottom: 10px; /* Abstand nach unten zu den Nav-Items, da keine border-bottom mehr */
    border-bottom: none; /* Keine Trennlinie mehr unter dem Logo-Bereich */
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    min-height: 0; /* Erlaubt flexible Höhe basierend auf Inhalt und Padding */
    flex-shrink: 0; /* HINZUGEFÜGT: Verhindert Schrumpfen */
}

.sidebar-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-navigation .nav-item {
    display: flex;
    align-items: center;
    padding: 11px 15px; 
    margin-bottom: 5px; 
    border-radius: 5px; 
    color: var(--dp-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem; 
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-navigation .nav-item i {
    margin-right: 12px;
    font-size: 1rem; 
    width: 18px; 
    text-align: center;
    color: var(--dp-text-secondary); 
    transition: color 0.15s;
}

.sidebar-navigation .nav-item:hover {
    background-color: var(--dp-surface-hover);
    /* color: var(--dp-text-primary); */ /* Allgemeine Hover-Farbe wird durch spezifische ersetzt */
}
/* .sidebar-navigation .nav-item:hover i { color: var(--dp-accent-color); } */ /* Globale Akzentfarbe entfernt */

.sidebar-navigation .nav-item.active {
    /* background-color: var(--dp-accent-color); */ /* Globale Akzentfarbe entfernt */
    color: #fff; 
    box-shadow: 0 1px 3px rgba(0,0,0, 0.2); /* Angepasster Schatten für bessere Sichtbarkeit mit Kat-Farben */
}

.sidebar-navigation .nav-item.active i {
    color: #fff; 
}

/* --- NEU: Kategorie-spezifisches Styling für Sidebar Nav-Items --- */

/* Warnings (war Overview) */
.sidebar-navigation .nav-item[data-category="warnings"]:hover,
.sidebar-navigation .nav-item[data-category="warnings"]:hover i {
    color: var(--dp-cat-warnings-color);
}
.sidebar-navigation .nav-item[data-category="warnings"].active {
    background-color: var(--dp-cat-warnings-color);
}
.sidebar-navigation .nav-item[data-category="warnings"].active:hover {
    color: #fff; /* Keep text color white on hover for active warning items */
}
.sidebar-navigation .nav-item[data-category="warnings"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active warning items */
}

/* Administration (war Management) */
.sidebar-navigation .nav-item[data-category="administration"]:hover,
.sidebar-navigation .nav-item[data-category="administration"]:hover i {
    color: var(--dp-cat-administration-color);
}
.sidebar-navigation .nav-item[data-category="administration"].active {
    background-color: var(--dp-cat-administration-color);
}
.sidebar-navigation .nav-item[data-category="administration"].active:hover {
    color: #fff; /* Keep text color white on hover for active administration items */
}
.sidebar-navigation .nav-item[data-category="administration"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active administration items */
}

/* Current & Plan (war Operations) */
.sidebar-navigation .nav-item[data-category="currentplan"]:hover,
.sidebar-navigation .nav-item[data-category="currentplan"]:hover i {
    color: var(--dp-cat-currentplan-color);
}
.sidebar-navigation .nav-item[data-category="currentplan"].active {
    background-color: var(--dp-cat-currentplan-color);
}
.sidebar-navigation .nav-item[data-category="currentplan"].active:hover {
    color: #fff; /* Keep text color white on hover for active currentplan items */
}
.sidebar-navigation .nav-item[data-category="currentplan"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active currentplan items */
}

/* Courses & Planning (war Planning) */
.sidebar-navigation .nav-item[data-category="coursesplanning"]:hover,
.sidebar-navigation .nav-item[data-category="coursesplanning"]:hover i {
    color: var(--dp-cat-coursesplanning-color);
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active {
    background-color: var(--dp-cat-coursesplanning-color);
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active:hover {
    color: #fff; /* Keep text color white on hover for active coursesplanning items */
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active coursesplanning items */
}

/* Events (NEU) */
.sidebar-navigation .nav-item[data-category="events"]:hover,
.sidebar-navigation .nav-item[data-category="events"]:hover i {
    color: var(--dp-cat-events-color);
}
.sidebar-navigation .nav-item[data-category="events"].active {
    background-color: var(--dp-cat-events-color);
}
.sidebar-navigation .nav-item[data-category="events"].active:hover {
    color: #fff; /* Keep text color white on hover for active event items */
}
.sidebar-navigation .nav-item[data-category="events"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active event items */
}

/* Codes (NEU) */
.sidebar-navigation .nav-item[data-category="codes"]:hover,
.sidebar-navigation .nav-item[data-category="codes"]:hover i {
    color: var(--dp-cat-codes-color);
}
.sidebar-navigation .nav-item[data-category="codes"].active {
    background-color: var(--dp-cat-codes-color);
}
.sidebar-navigation .nav-item[data-category="codes"].active:hover {
    color: #fff;
}
.sidebar-navigation .nav-item[data-category="codes"].active:hover i {
    color: #fff;
}

/* Reports entfernt - falls wieder benötigt, hier hinzufügen */

/* Hauptinhalt - Minimalstil */
.dashboard-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Wichtig für Scrollbarkeit des Inhalts */
    padding: 20px 25px; 
    box-sizing: border-box;
}

.dashboard-categories-wrapper {
    flex-grow: 1;
    background-color: var(--dp-bg-color);
    transition: opacity 0.3s ease, transform 0.3s ease; 
    opacity: 0; /* Initial unsichtbar */
    transform: translateY(10px); /* Initial leicht verschoben */
    will-change: opacity, transform; /* NEU: Browser-Optimierungshinweis */
    /* display: none; wird initial nicht gesetzt, damit JS es beim ersten Mal animieren kann, wenn nötig */
    display: flex; /* Haupt-Wrapper als Flex-Container für die Kategorien */
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den Kategorien */
}

/* Styling für die einzelnen dashboard-category-content DIVs */
.dashboard-category-content {
    /* padding-top: 20px; */ /* ENTFERNT - Abstand wird vom Grid übernommen */
    /* border-top: 3px solid transparent; */ /* ENTFERNT - Platzhalter für farbigen Rand */
    /* background-color: rgba(255,255,255,0.01); */ /* Optional: sehr leichter Hintergrund für jede Kategorie */
    border-radius: 0 0 4px 4px; /* Abrundung unten, falls gewünscht */
    /* Wichtig: Der Hintergrundgradient bleibt hier */
}

/* Das Grid innerhalb jeder Kategorie bekommt den oberen Abstand */
.dashboard-category-content .dashboard-grid {
    margin-top: 20px;
    display: grid; /* Hinzugefügt für Grid-Layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Hinzugefügt für responsive Spalten */
    gap: 20px; /* Hinzugefügt für den gewünschten Abstand */
}

.category-is-overview {
    /* border-top-color: var(--dp-cat-overview-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-overview-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT, da Hover-Effekt entfernt wird */
}
/* ENTFERNT .category-is-overview:hover Regel */

.category-is-management {
    /* border-top-color: var(--dp-cat-management-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-management-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-management:hover Regel */

.category-is-operations {
    /* border-top-color: var(--dp-cat-operations-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-operations-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-operations:hover Regel */

.category-is-planning {
    /* border-top-color: var(--dp-cat-planning-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-planning-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-planning:hover Regel */

.category-is-reports {
    /* border-top-color: var(--dp-cat-reports-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-reports-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-reports:hover Regel */

/* NEU: Kategorie-spezifischer Hintergrund für "Codes" */
.category-is-codes {
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-codes-rgb), 0.04) 0%, transparent 35%);
}

/* Zustand, wenn das Dashboard sichtbar und animiert werden soll */
.dashboard-categories-wrapper.dashboard-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Zustand für die Ausblendanimation (bevor display:none gesetzt wird) */
.dashboard-categories-wrapper.dashboard-hidden-animated {
    opacity: 0;
    transform: translateY(10px);
}

/* Klasse .sidebar-fixed für die fixierte Sidebar */
.sidebar-fixed {
    position: fixed;
    top: 0; /* JS sets this to currentGlobalNavHeight + 'px' */
    left: 0;
    width: 260px;
    height: 100vh; /* JS sets this to calc(100vh - currentGlobalNavHeight + 'px') */
    background-color: var(--dp-bg-color);
    border-right: 1px solid var(--dp-border-color);
    padding: 0 15px 20px 15px; /* Angepasst: padding-top 0, Rest konsistent mit .dashboard-sidebar */
    box-sizing: border-box;
    /* overflow-y: auto; */ /* ENTFERNT: Wird durch .sidebar-navigation gehandhabt */
    z-index: 1031; /* ERHÖHT von 1000, um über Standard-Bootstrap-Navbar (1030) zu liegen */
    display: flex; /* HINZUGEFÜGT */
    flex-direction: column; /* HINZUGEFÜGT */
}

.dashboard-loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: var(--dp-text-secondary);
    font-size: 1rem;
}

.dashboard-loading-placeholder .spinner-border {
    margin-bottom: 15px;
}

/* --- Fokus-Bereiche anpassen --- */
.dashboard-focus-area {
    background-color: var(--dp-surface-color);
    border-radius: 6px; 
    padding: 20px; 
    display: flex !important; /* DEBUG: Explizit setzen */
    flex-direction: column !important; /* DEBUG: Explizit setzen */
    gap: 15px; 
    border: 1px solid var(--dp-border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    margin-bottom: 25px; 
}

.area-title {
    font-size: 1.25rem; 
    font-weight: 600;
    color: var(--dp-text-primary);
    margin: 0;
    display: flex;
    align-items: center; /* Vertically align .title-main-group and .area-title-count */
    /* gap: 10px; */ /* Removed, handled by margin on count or within title-main-group */
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

/* NEU: Wrapper für Icon und Text, bekommt die Unterstreichung */
.title-main-group {
    display: inline-flex; /* Damit es nicht die volle Breite nimmt, wenn kein Zähler da ist */
    align-items: center;  /* Icon und Text zentrieren */
    gap: 10px;            /* Abstand zwischen Icon und Text */
    padding-bottom: 5px;  /* Für die Unterstreichung */
    border-bottom: 2px solid transparent; /* Basis für Unterstreichung, Farbe kommt von Kategorie */
    color: inherit;       /* Textfarbe von .area-title erben */
}

.area-title i { /* Diese Regel gilt für Icons direkt im .area-title oder in .title-main-group */
    /* color: var(--dp-accent-color); */ /* Globale Akzentfarbe entfernt, wird pro Kategorie gesetzt */
    font-size: 1.25rem; 
}

/* Styling für den Zähler im Area-Titel - bleibt weitgehend gleich */
.area-title-count {
    display: inline-flex; /* Für Padding und Zentrierung */
    align-items: center;
    justify-content: center;
    min-width: 26px; /* Mindestbreite für einheitliches Aussehen */
    height: 26px; /* Feste Höhe für einheitliches Aussehen */
    padding: 0 8px; /* Horizontaler Padding, vertikal durch height kontrolliert */
    border-radius: 13px; /* Für perfekte Kreisform bei fester Höhe/Breite, oder abgerundete Ecken */
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff; /* Standard Textfarbe weiß, gut für die meisten Akzentfarben */
    margin-left: 8px; /* Kleiner Abstand zum Titeltext */
    line-height: 1.2; /* Wichtig für vertikale Zentrierung des Textes */
}

/* Kategorie-spezifisches Styling für Widget-Titel ANPASSEN */
/* Icons werden über .area-title i selektiert, Unterstreichung über .title-main-group */

.category-is-warnings .title-main-group {
    border-bottom-color: var(--dp-cat-warnings-color);
}
.category-is-warnings .area-title i {
    color: var(--dp-cat-warnings-color);
}
.category-is-warnings .area-title-count {
    background-color: var(--dp-cat-warnings-color);
}

.category-is-administration .title-main-group {
    border-bottom-color: var(--dp-cat-administration-color);
}
.category-is-administration .area-title i {
    color: var(--dp-cat-administration-color);
}
.category-is-administration .area-title-count {
    background-color: var(--dp-cat-administration-color);
}

.category-is-currentplan .title-main-group {
    border-bottom-color: var(--dp-cat-currentplan-color);
}
.category-is-currentplan .area-title i {
    color: var(--dp-cat-currentplan-color);
}
.category-is-currentplan .area-title-count {
    background-color: var(--dp-cat-currentplan-color);
}

.category-is-coursesplanning .title-main-group {
    border-bottom-color: var(--dp-cat-coursesplanning-color);
}
.category-is-coursesplanning .area-title i {
    color: var(--dp-cat-coursesplanning-color);
}
.category-is-coursesplanning .area-title-count {
    background-color: var(--dp-cat-coursesplanning-color);
}

/* Events (NEU) */
.category-is-events .title-main-group {
    border-bottom-color: var(--dp-cat-events-color);
}
.category-is-events .area-title i {
    color: var(--dp-cat-events-color);
}
.category-is-events .area-title-count {
    background-color: var(--dp-cat-events-color);
}

/* Codes (NEU) */
.category-is-codes .title-main-group {
    border-bottom-color: var(--dp-cat-codes-color);
}
.category-is-codes .area-title i {
    color: var(--dp-cat-codes-color);
}
.category-is-codes .area-title-count {
    background-color: var(--dp-cat-codes-color);
}

/* --- NEUE STYLES FÜR 3-WOCHEN-KALENDERANSICHT --- */
.team-calendar-view-area {
    padding: 15px;
    /* overflow-x: auto; */ /* ENTFERNT, da Umbruch pro Woche erfolgt und kein horizontales Scrollen des Gesamtbereichs gewünscht ist */
}

.team-calendar-grid { /* Wird zum Container für die Wochen */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen den Wochenblöcken */
    width: 100%;
    /* Die folgenden Grid-Eigenschaften werden entfernt, da sie jetzt in .calendar-week sind */
    /* grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); */
    /* gap: 5px; */
}

.calendar-week { /* Wird zum Grid-Container für die 7 Tage einer Woche */
    /* display: contents; */ /* ENTFERNT: .calendar-week wird der Grid-Container */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); /* Tage umbrechen innerhalb der Woche */
    gap: 5px; /* Abstand zwischen den Tagen */
    /* Die PHP-Struktur erzeugt bereits einen .calendar-week Div für jede Woche. */
}

.calendar-day {
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    padding: 8px;
    min-height: 120px; /* Mindesthöhe für einheitliches Aussehen */
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.calendar-day:hover {
    background-color: var(--dp-surface-hover);
    border-color: var(--dp-accent-color);
}

.calendar-day.past {
    background-color: rgba(var(--dp-surface-rgb, 37, 40, 44), 0.7); /* Leicht abgedunkelt und entsättigt */
    color: var(--dp-text-secondary);
}
.calendar-day.past .day-header span {
    color: var(--dp-text-secondary);
}
.calendar-day.past .calendar-job-entry {
    opacity: 0.7;
}


.calendar-day.today {
    border: 1px solid var(--dp-accent-color);
    background-color: var(--dp-surface-hover); /* Hebt den heutigen Tag leicht hervor */
}

.calendar-day.today .day-header .day-number {
    color: var(--dp-accent-color);
    font-weight: 700;
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--dp-border-color);
}

.day-header .day-name {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    font-weight: 600;
}

.day-header .day-number {
    font-size: 0.85rem;
    color: var(--dp-text-primary);
    font-weight: 600;
}

/* NEU: Styling für das Monats-Suffix */
.day-header .day-number .month-suffix {
    font-size: 0.75rem; /* Kleiner als die Tageszahl */
    color: var(--dp-text-secondary); /* Etwas dezenter als die Tageszahl */
    font-weight: 500; /* Weniger fett */
    /* opacity: 0.8; */ /* Alternative oder Ergänzung zur Farbänderung */
    margin-left: 1px; /* Kleiner Abstand zum Tag, falls der Punkt nicht reicht */
}

.calendar-day.today .day-header .day-number .month-suffix {
    color: var(--dp-accent-color); /* Auch das Suffix im Akzent, wenn der Tag heute ist, aber weiterhin dezenter */
    opacity: 0.8;
}

/* .day-jobs-list wurde bereits für Scrollbars gestyled, hier ggf. Ergänzungen */
.day-jobs-list {
    flex-grow: 1; /* Damit die Liste den verfügbaren Platz im Tag füllt */
    overflow-y: auto;
    min-height: 50px; /* Mindesthöhe, damit Scrollbar ggf. erscheint */
}


.calendar-job-entry {
    /* background-color: rgba(var(--dp-accent-rgb, 26, 29, 33), 0.15); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
    color: var(--dp-text-primary);
    padding: 6px 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; /* box-shadow zur Transition hinzugefügt */
    /* border-left: 3px solid var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
}

.calendar-job-entry:hover {
    /* background-color: rgba(var(--dp-accent-rgb, 26, 29, 33), 0.3); */ /* Entfernt - Hover Hintergrund bleibt dynamisch */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Behält den Schatten bei Hover */
}

.calendar-job-entry:last-child {
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* background-color: var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
    /* color: #fff; */ /* Farbe wird durch Kontrast zur dynamischen BG-Farbe bestimmt, idealerweise weiß, aber nicht explizit hier gesetzt */
    /* border: 1px solid var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
}

/* .calendar-job-entry:hover .job-code-badge { */
.job-code-badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* background-color: var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
    color: var(--dp-text-primary); /* Angepasst für besseren Kontrast auf variablen Hintergründen, ggf. anpassen */
    /* border: 1px solid var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
}

/* Entferne spezifischen Hover-Effekt für das Badge, da Badge-Farbe jetzt dynamisch ist und Hover nicht mehr sinnvoll */
/* .calendar-job-entry:hover .job-code-badge {
    background-color: var(--dp-surface-color);
    color: var(--dp-accent-color);
} */

.job-entry-line-2 {
    font-size: 0.75rem; /* Reduced from 0.8em */
    color: var(--dp-text-secondary);
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 992px) { /* Gilt für größere Tablets */
    .team-calendar-view-area {
        overflow-x: visible; /* Sicherstellen, dass hier kein Scrollen erzwungen wird */
    }
    .calendar-week { /* Anpassung der Tagesbreite für diese Bildschirmgröße */
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        /* gap bleibt 5px, wenn nicht hier überschrieben, oder explizit setzen: */
        gap: 5px;
    }
    .team-calendar-grid {
        gap: 12px; /* Ggf. Abstand zwischen Wochen anpassen */
    }
}

@media (max-width: 768px) { /* Gilt für kleinere Tablets */
    .team-calendar-view-area {
        overflow-x: visible;
    }
    .calendar-week { /* Anpassung der Tagesbreite */
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        gap: 4px;
    }
    .team-calendar-grid {
        gap: 10px; /* Ggf. Abstand zwischen Wochen anpassen */
    }
}

@media (max-width: 576px) { /* Gilt für Mobilgeräte */
    .team-calendar-view-area {
        overflow-x: visible;
        padding: 10px;
    }
    .calendar-week { /* Anpassung der Tagesbreite */
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); /* Kleinere Mindestbreite */
        gap: 4px;
    }
    .team-calendar-grid {
        gap: 8px; /* Ggf. Abstand zwischen Wochen anpassen */
    }
    .calendar-day {
        min-height: 100px; /* Weniger Mindesthöhe, wenn nur ein Tag pro Zeile */
        padding: 6px;
    }
    .day-header {
        padding-bottom: 4px;
        margin-bottom: 4px;
    }
    .calendar-job-entry {
        padding: 5px 7px;
        font-size: 0.85rem;
    }
}

/* Globale Anpassung für Bootstrap .modal, um Konflikte mit sticky Headern zu vermeiden, FALLS ein Modal über den Kalender gelegt wird */
.modal {
    z-index: 1050; /* Standard Bootstrap z-index für Modals */
}


/* News List Styling */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Weniger Abstand */
}

.news-item {
    display: flex;
    align-items: center;
    padding: 12px 15px; /* Kompakter */
    background-color: var(--dp-surface-hover); /* Leichter Kontrast zum Area-BG */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, border-left-color 0.2s;
    border-left: 3px solid transparent;
}

.news-item .news-content {
    flex: 1 1 0%;
    min-width: 0;
}

.news-item-badge {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

.news-item-badge .dp2-badge-neu,
.news-area .dp2-badge-neu {
    border: 1px solid var(--dp-accent-color) !important;
}

.news-item:hover {
    background-color: var(--dp-surface-hover); /* Bleibt gleich oder leicht heller */
    border-left-color: var(--dp-accent-color);
    /* box-shadow: 0 0 10px rgba(var(--dp-accent-rgb),0.1); */ /* Optional: Leichter Hover-Schatten */
}

.news-icon {
    margin-right: 12px;
    font-size: 1.5rem; /* Angepasst */
    color: var(--dp-text-secondary);
    padding-top: 1px;
}

.news-icon i {
    color: var(--dp-accent-color);
}

.news-title {
    font-size: 1rem; /* Angepasst */
    font-weight: 500;
    color: var(--dp-text-primary);
    margin-bottom: 3px;
}

.news-date {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
}

.news-item-empty {
    padding: 15px;
    text-align: center;
    font-style: italic;
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    background-color: transparent;
    border-radius: 4px;
}

.news-item-arrow {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    align-self: center;
}

/* News single article (DP2) */
.dp2-news-single .dp2-news-article-card {
    overflow: hidden;
    width: 100%;
    margin-top: 18px;
}

.dp2-news-article-image {
    width: 100%;
    max-height: 320px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.dp2-news-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dp2-news-article-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--dp-text-primary);
    line-height: 1.4;
}

.dp2-news-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dp-border-color);
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
}

.dp2-news-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
}

.dp2-news-meta-row .dp2-news-meta-left {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.dp2-news-meta-row2 .dp2-news-meta-left {
    align-items: center;
}

.dp2-news-meta-right {
    text-align: right;
    flex-shrink: 0;
}

.dp2-news-meta-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dp2-news-meta-edit i {
    color: var(--dp-accent-color);
    opacity: 0.9;
}

.dp2-news-meta-edit-line1 {
    display: block;
}

.dp2-news-meta-edit-line2 {
    display: block;
    margin-top: 2px;
}

.dp2-news-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dp2-news-meta-item i {
    color: var(--dp-accent-color);
    opacity: 0.9;
}

.dp2-news-content {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dp-text-primary);
}

.dp2-news-content p:last-child {
    margin-bottom: 0;
}

.dp2-news-article-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--dp-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Due Jobs & Next Jobs共通 Styling */
.due-jobs-list {
    display: flex; /* Changed from column to row-based flex */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 15px; /* Adjusted gap for a wrapped layout */
    /* flex-direction: column; */ /* Removed, as it's now row-based by default with wrap */
}

.due-job-item {
    display: flex;
    background: var(--dp-surface-hover); /* Leichter Kontrast */
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 12px 15px; /* Kompakter */
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    flex-basis: calc(50% - 8px); /* Aim for 2 items per row, subtracting half the gap */
    min-width: 280px; /* Minimum width before wrapping or shrinking too much */
    box-sizing: border-box; /* Ensure padding and border are included in flex-basis calculation */
}

@media (max-width: 768px) { /* Adjust for smaller screens */
    .due-job-item {
        flex-basis: 100%; /* Full width on smaller screens */
    }
}

.due-job-item:hover {
    border-color: var(--dp-accent-color);
    background: #31353A; /* Etwas hellerer Hover als surface-hover */
}

.due-job-date-time, .next-job-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 60px; /* Etwas schmaler */
    margin-right: 12px;
}

.due-job-day, .next-job-day {
    font-size: 0.85rem;
    font-weight: 600; /* Weniger fett */
    color: var(--dp-text-secondary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.due-job-date, .next-job-datum {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    margin-top: 1px;
}

.due-job-time, .next-job-time {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    margin-top: 1px;
}

.due-job-info, .next-job-info {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Weniger Gap */
    flex-grow: 1; 
}

.due-job-title, .next-job-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    margin-bottom: 0;
}

.due-job-unit, .next-job-unit {
    color: var(--dp-text-secondary);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 5px;
}

.next-job-location {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    font-weight: 400;
}

.due-job-status-actions {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

.status-button {
    padding: 4px 10px; /* Kompakter */
    border-radius: 3px;
    font-size: 0.75rem; /* Kleiner */
    font-weight: 500;
    text-decoration: none;
    display: inline-flex; 
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* My Classes Styling */
.my-classes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Schmalere Kacheln */
    gap: 10px; /* Reduzierter Gap */
}

.my-class-item {
    display: flex;
    /* align-items: flex-start; */ /* Nicht mehr nötig ohne Icon */
    background: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 10px 12px; /* Reduziertes Padding */
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.my-class-item:hover {
    border-color: var(--dp-accent-color);
    background: #31353A;
    transform: translateY(-1px); /* Subtilerer Hover-Effekt */
}

/* .my-class-icon-status { */ /* Entfernt, da Icon weg ist */
    /* font-size: 1.5rem;  */
    /* margin-right: 15px; */
    /* padding-top: 2px; */
/* } */

.my-class-info {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Reduzierter Gap */
    width: 100%; /* Sicherstellen, dass es die volle Breite einnimmt */
}

.my-class-title-code {
    display: flex;
    align-items: center;
    gap: 8px; /* Leicht erhöhter Gap für bessere Trennung Code/Name */
    margin-bottom: 0; /* Reduzierter Margin */
}

.my-class-code {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 5px; /* Leicht reduziertes Padding */
    border: 1px solid; 
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.my-class-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.my-class-dates {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
}

.my-class-status-text {
    font-size: 0.75rem;
    font-weight: 500; /* Etwas weniger fett */
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 1px;
}

/* Custom Accordion Styling */
.custom-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 6px; 
}

.accordion-item-modern {
    background-color: var(--dp-surface-hover); 
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    overflow: hidden; 
}

.accordion-button-modern {
    padding: 12px 15px; /* Kompakter */
    font-size: 1rem;
}

.accordion-body-modern {
    padding: 15px 15px 15px 15px; /* Einheitliches Padding */
    background-color: rgba(0,0,0,0.08); /* Etwas dunklerer Body */
    border-top: 1px solid var(--dp-border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.code-entry {
    font-size: 0.85rem;
    /* color: var(--dp-text-secondary); */ /* Wird unten spezifischer gesetzt */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0; /* Mehr vertikales Padding */
    border-bottom: 1px solid rgba(var(--dp-border-color-rgb, 58, 63, 68), 0.5); /* Subtilere Trennlinie, explizite RGB-Definition der Border-Color */
    transition: border-color 0.2s ease;
}

.code-entry:last-child {
    border-bottom: none;
}

.code-label {
    color: var(--dp-text-secondary);
    flex-shrink: 0; /* Verhindert, dass das Label schrumpft */
    margin-right: 10px;
    transition: color 0.2s ease;
}

.code-entry-interactive {
    cursor: pointer;
}

.code-entry-interactive:hover .code-label {
    color: var(--dp-accent-color);
}

.code-entry-interactive:hover {
    border-bottom-color: var(--dp-accent-color);
}

.code-value-placeholder {
    color: var(--dp-text-primary);
    font-family: Inter, sans-serif; /* Monospace für Code-Optik */
    letter-spacing: 1.5px; /* Etwas mehr Abstand für Platzhalter-Optik */
    background-color: rgba(var(--dp-surface-rgb, 37, 40, 44), 0.5); /* Leicht abgedunkelter Hintergrund */
    padding: 4px 8px;
    border-radius: 3px;
    cursor: default; /* Standard-Cursor, da Interaktion über Buttons */
    min-width: 80px; /* Mindestbreite für den Platzhalter */
    text-align: center;
}

.code-value-placeholder.is-revealed {
    background-color: transparent; /* Kein spezieller Hintergrund, wenn Code sichtbar */
    letter-spacing: normal; /* Normales Letter-Spacing für echten Code */
}

.code-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px; /* Abstand zum Code-Wert/Platzhalter */
}

.btn-toggle-code-visibility,
.btn-copy-code {
    background: transparent;
    border: 1px solid var(--dp-border-color);
    color: var(--dp-text-secondary);
    padding: 5px; /* Kleinere Buttons */
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex; /* Für Icon-Zentrierung */
    align-items: center;
    justify-content: center;
    width: 28px; /* Feste Breite */
    height: 28px; /* Feste Höhe */
}

.btn-toggle-code-visibility:hover,
.btn-copy-code:hover {
    border-color: var(--dp-accent-color);
    color: var(--dp-accent-color);
    background-color: rgba(var(--dp-accent-rgb), 0.05);
}

.btn-toggle-code-visibility i,
.btn-copy-code i {
    font-size: 0.85rem; /* Passende Icon-Größe */
}

.code-entry.admin-code .admin-badge {
    /* margin-left: 10px; */ /* Wird durch Flexbox im Parent gesteuert */
    font-size: 0.75rem;
    padding: 2px 6px;
    background-color: rgba(var(--dp-cat-administration-rgb),0.2); /* Lila Akzent für Admin */
    color: var(--dp-cat-administration-color);
    border: 1px solid rgba(var(--dp-cat-administration-rgb),0.3);
    border-radius: 3px;
    white-space: nowrap; /* Verhindert Umbruch des Badges */
}


/* Voucher Orders, Polos, Vacations - Gemeinsames Styling für Items */
.voucher-orders-list, .polos-list, .vacations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1; /* ADDED: Make list content grow */
}

.voucher-order-item, .polo-item, .vacation-item {
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 12px 15px;
}

/* Voucher Order spezifisch */
.voucher-order-item {
    display: flex;
    flex-direction: column; 
    gap: 8px;
}

.voucher-order-info {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    font-weight: 500;
}

.voucher-order-customer {
    color: var(--dp-text-primary);
    font-size: 1rem;
}

.voucher-order-value {
    color: var(--dp-accent-color);
    font-size: 1rem;
    font-weight: 600;
}

.voucher-order-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
}

/* Polos spezifisch */
.polo-item {
    display: flex;
    align-items: center; 
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}
.polo-item:hover {
    border-color: var(--dp-accent-color);
    background: #31353A;
}

.polo-info {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.polo-name {
    font-size: 1rem;
}

/* Chip Styling */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px; /* Kompakter */
    border-radius: 12px; 
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.chip i {
    margin-right: 5px;
    font-size: 0.85rem;
}

.chip.chip-outline {
    background-color: transparent;
    border: 1px solid var(--dp-border-color); /* Dünnerer Rand */
    color: var(--dp-text-secondary);
}

.chip.chip-outline:hover {
    border-color: var(--dp-accent-color);
    color: var(--dp-accent-color);
}

/* Vacations spezifisch */
.vacation-item {
    display: grid; 
    grid-template-columns: 1fr auto; 
    grid-template-areas:
        "info actions"
        "user actions";
    gap: 6px 12px; 
    align-items: center;
}

.vacation-item:hover {
    border-color: var(--dp-accent-color);
    background: #31353A;
}

.vacation-info {
    grid-area: info;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vacation-dates {
    font-size: 1rem;
}

.vacation-user {
    grid-area: user;
    font-size: 0.85rem;
}

.vacation-actions {
    grid-area: actions;
    display: flex;
    gap: 6px;
    justify-self: end; 
}

.vacation-actions .btn-sm {
    /* padding: 4px 7px; */ /* OLD - Replaced by fixed W/H and flex centering */
    font-size: 0.85rem; /* Controls icon size, keep this */
    /* min-width: 30px; */ /* OLD - Replaced by fixed width */
    /* text-align: center; */ /* OLD - Flex centering is better */
    /* justify-content: center; */ /* OLD - More specific flex properties below */
    width: 30px; /* Fixed width */
    height: 30px; /* Fixed height */
    padding: 0; /* Remove padding as size is fixed */
    display: inline-flex; /* Use flexbox for centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    line-height: 1.2; /* Ensure line-height doesn't interfere */
    box-sizing: border-box; /* Explicitly set box-sizing */
    border-width: 1px;      /* Unified border width */
    border-style: solid;    /* Unified border style */
    border-radius: 3px;     /* Unified border radius, matches modern buttons */
    /* border-color will be inherited from .btn-success-modern, .btn-danger-modern, .btn-outline-light */
}

/* Ensure icons inside these specific buttons have no extra margin from other general icon rules */
.vacation-actions .btn-sm i {
    margin: 0;
    font-size: 1rem; /* Icon takes the font-size of the button */
}

/* Footer für Bereiche */
.area-footer-actions {
    margin-top: 12px; 
    padding-top: 12px;
    border-top: 1px solid var(--dp-border-color);
    display: flex;
    gap: 8px;
    justify-content: flex-start; 
}

.area-footer-actions .btn-sm i {
    margin-right: 4px;
    font-size: 0.85rem;
}

/* Placeholder für leere Bereiche */
.area-empty-placeholder {
    padding: 25px 15px; /* Kompakter */
    min-height: 80px; /* Niedriger */
    flex-grow: 1; /* ADDED: Make placeholder content grow */
}

.area-empty-placeholder i {
    font-size: 1.5rem; 
}

.btn-warning-modern {
    background-color: rgba(var(--dp-warning-rgb), 0.2);
    border: 1px solid rgba(var(--dp-warning-rgb), 0.5);
    color: var(--dp-warning-color);
}
.btn-warning-modern:hover {
    background-color: rgba(var(--dp-warning-rgb), 0.3);
    border-color: rgba(var(--dp-warning-rgb), 0.7);
}
.btn-secondary-modern {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.1);
    border: 1px solid rgba(var(--dp-text-secondary-rgb), 0.3);
    color: var(--dp-text-secondary);
}
.btn-secondary-modern:hover {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.2);
    border-color: rgba(var(--dp-text-secondary-rgb), 0.5);
}
.btn-light-modern {
    background-color: rgba(var(--dp-text-primary-rgb), 0.1);
    border: 1px solid rgba(var(--dp-text-primary-rgb), 0.2);
    color: var(--dp-text-primary);
    transition: all 0.2s ease-in-out;
}
.btn-light-modern:hover {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: var(--dp-accent-color);
    color: var(--dp-accent-color);
}

.btn-static { /* To remove hover effects and pointer cursor */
    pointer-events: none;
}

/* New Course Stats Panel */
.course-stat-panel {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.stat-item {
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 15px;
    flex: 1; /* Each item takes equal space */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-item-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.stat-item-value .sub-value {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--dp-text-secondary);
}

.stat-item-value .due-value {
    color: var(--dp-danger-color);
}

.stat-item .badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.stat-item-body {
    margin-top: auto;
}

.stat-item-main-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    line-height: 1.4;
}

.stat-item-sub-details {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    margin-top: 5px;
}

.stat-item-sub-details .due-value {
    color: var(--dp-danger-color);
    font-weight: 500;
}

/* New two-column layout for stat items */
.stat-item-body-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.stat-item-body-grid .col-left {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Reduced gap for compactness */
}

.stat-item-body-grid .col-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch; /* Make buttons same width */
    flex-shrink: 0;
}

.date-info .label {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.date-info .date-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.date-info .duration-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-secondary);
}


/* Buttons Modern - Vereinheitlichen und anpassen */
.btn-success-modern, .btn-danger-modern, .btn-primary-modern {
    padding: 5px 10px;
    font-size: 0.85rem;
    border-radius: 3px;
    /* font-family geerbt */
}

.btn-success-modern {
    background-color: rgba(var(--dp-success-rgb), 0.2); /* Wird jetzt transparentes Türkis */
    border: 1px solid rgba(var(--dp-success-rgb), 0.5); /* Wird jetzt Türkis mit Transparenz */
    color: var(--dp-success-color); /* Wird jetzt Türkis */
}
.btn-success-modern:hover {
    background-color: rgba(var(--dp-success-rgb), 0.3);
    border-color: rgba(var(--dp-success-rgb), 0.7);
    color: var(--dp-success-color); /* Textfarbe bleibt Türkis bei Hover */
}

.btn-danger-modern {
    background-color: rgba(var(--dp-danger-rgb), 0.2);
    border: 1px solid rgba(var(--dp-danger-rgb), 0.5);
    color: var(--dp-danger-color);
}
.btn-danger-modern:hover {
    background-color: rgba(var(--dp-danger-rgb), 0.3);
    border-color: rgba(var(--dp-danger-rgb), 0.7);
}

.btn-primary-modern {
    background-color: rgba(var(--dp-accent-rgb), 0.2); /* Akzentfarbe mit Transparenz */
    border: 1px solid rgba(var(--dp-accent-rgb), 0.5);
    color: var(--dp-accent-color);
}
.btn-primary-modern:hover {
    background-color: rgba(var(--dp-accent-rgb), 0.3);
    border-color: rgba(var(--dp-accent-rgb), 0.7);
}

.btn-sm i, .status-button i, .btn-success-modern i, .btn-danger-modern i, .btn-primary-modern i, .btn-light-modern i, .btn-warning-modern i, .btn-secondary-modern i {
    margin-right: 5px; /* Einheitlicher Icon-Abstand in Buttons */
}

/* Spezifische Anpassungen für .badge */
.badge {
    padding: 3px 7px; /* Etwas kompakter */
    font-size: 0.75rem;
}

.badge.badge-danger {
    /* Bereits angepasst, aber hier zur Überprüfung */
    background: rgba(var(--dp-danger-rgb), 0.15);
    color: var(--dp-danger-color);
    border: 1px solid rgba(var(--dp-danger-rgb),0.3);
}


.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(380px, calc(50% - 10px))), 1fr)); /* Min 380px, Ziel 50% abzgl. halbem Gap */
    column-gap: 20px; /* Geändert auf 20px */
    row-gap: 20px; /* Geändert auf 20px */
}

/* Spezifische Anpassung für das Admin-Grid, um breitere Karten zu ermöglichen */
#grid-administration.dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
}


/* Globaler Header Anpassungen */
.dashboard-global-header {
    /* display: flex; */ /* Nicht mehr benötigt, wenn Header leer ist oder entfernt wird */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* padding: 10px 0px; */
    background-color: var(--dp-bg-color); /* Hintergrund an Hauptbereich angepasst oder transparent lassen */
    border-bottom: none;
    height: 0; /* Nimmt keinen Platz ein, falls noch im DOM aber leer */
    padding: 0;
    margin: 0;
    overflow: hidden; /* Verhindert unerwünschte Layout-Effekte von leeren Elementen */
}

/* .dashboard-global-header .appformtitle wird durch .appformtitle im .main-content-header ersetzt */
/* Die alte Regel für .appformtitle innerhalb von .dashboard-global-header kann entfernt oder angepasst werden,
   wenn .appformtitle jetzt universeller ist oder spezifische Kontextanpassungen benötigt.
   Die bestehende .appformtitle-Regel (Zeile 466ff) ist bereits gut und wird übernommen.
*/

/* Neue CSS-Regeln für den Titel im Main Content */
.main-content-header {
    padding: 10px 25px 0 25px; /* Oben 10px für Bündigkeit, L/R 25px Standard-Padding, Unten 0 (appformtitle hat margin/border) */
    margin-bottom: 15px;      /* Abstand zu den ersten Widgets/Kategorien */
    background-color: transparent; /* Hintergrund wie der Hauptinhalt (body --dp-bg-color) */
}

/* Stellt sicher, dass .appformtitle korrekt angezeigt wird, wenn es als direkter Nachkomme verwendet wird
   oder wenn die alte .dashboard-global-header .appformtitle Regel zu spezifisch war.
   Die bereits existierende .appformtitle Regel (um Zeile 466 oder ähnlich) sollte generisch genug sein.
   Wir stellen sicher, dass display: inline-block oder block verwendet wird, um Padding/Border korrekt zu handhaben.
*/
.appformtitle { /* Wiederverwendete Klasse für die Überschrift */
    font-size: 2rem;
    font-weight: 700;
    color: var(--dp-accent-color); 
    margin-bottom: 0; /* Wird durch Container-Margin oder nächsten Element-Margin gesteuert */
    padding-bottom: 8px; /* Für die Akzentlinie unter dem Text */
    border-bottom: 3px solid var(--dp-accent-color); /* Akzentlinie */
    line-height: 1.2;
    display: inline-block; /* Wichtig, damit padding-bottom und border-bottom korrekt wirken */
}

.dashboard-global-header .appformheader {
    /* Keine speziellen Styles hier, dient als einfacher Wrapper */
    margin-bottom: 0 !important; /* von Bootstrap, falls nötig */
}

/* Neue Stile für die zweizeiligen Kalendereinträge */
.job-entry-line-1 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem; /* Etwas größer für die Hauptinfo */
    font-weight: 500;
    margin-bottom: 3px; /* Kleiner Abstand zur zweiten Zeile */
}

.job-code-badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* background-color: var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
    color: var(--dp-text-primary); /* Angepasst für besseren Kontrast auf variablen Hintergründen, ggf. anpassen */
    /* border: 1px solid var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
}

.job-entry-line-2 {
    font-size: 0.75rem; /* Reduced from 0.8em */
    color: var(--dp-text-secondary);
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 992px) { /* Beispielhafter Breakpoint, ggf. anpassen */
    .team-calendar-view-area {
        overflow-x: visible; /* Beibehalten oder entfernen, da auto-fit jetzt steuert */
    }
    .team-calendar-grid {
        /* grid-template-columns: repeat(3, 1fr); */ /* ALT */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* NEU: Konsistent mit Desktop */
    }
    .calendar-day {
        min-height: 150px; /* Ggf. Höhe anpassen */
    }
}

@media (max-width: 768px) { /* Gilt für kleinere Tablets */
    .team-calendar-view-area {
        overflow-x: visible; /* Beibehalten oder entfernen */
    }
    .team-calendar-grid {
        /* grid-template-columns: repeat(2, 1fr); */ /* ALT */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* NEU: Konsistent mit Desktop */
    }
}

@media (max-width: 576px) { /* Gilt für Mobilgeräte */
    .team-calendar-view-area {
        overflow-x: visible; /* Beibehalten oder entfernen */
        padding: 10px;
    }
    .team-calendar-grid {
        /* grid-template-columns: 1fr; */ /* ALT */
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* NEU: Mindestbreite ggf. noch weiter reduziert für sehr kleine Schirme */
        gap: 5px; /* Weiter reduzierter Gap für Mobile */
    }
    .calendar-day {
        min-height: 100px; /* Weniger Mindesthöhe, wenn nur ein Tag pro Zeile */
        padding: 6px;
    }
    .day-header {
        padding-bottom: 4px;
        margin-bottom: 4px;
    }
    .calendar-job-entry {
        padding: 5px 7px;
        font-size: 0.85rem;
    }
}

/* Styling für die automatische Ausblend-Benachrichtigung */
.auto-hide-notice {
    background-color: rgba(var(--dp-warning-rgb), 0.15);
    color: var(--dp-warning-color);
    border: 1px solid rgba(var(--dp-warning-rgb), 0.3);
    padding: 10px 15px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.85rem;
    margin: 0 0 15px 0; /* Angepasster Margin, nur unten */
    position: sticky; /* Bleibt oben im Inhaltsbereich sichtbar */
    top: 0; /* Direkt unter dem (zukünftigen) Haupt-Header */
    z-index: 1000; /* Stellt sicher, dass es über anderen Elementen im Wrapper liegt */
}

/* Spezifische Hover-Effekte für Karten/Listenelemente */
.news-item:hover,
.due-job-item:hover, 
.next-job-card:hover,
.my-class-item:hover,
.polo-item:hover,
.vacation-item:hover {
    border-color: var(--dp-accent-color); 
    background-color: var(--dp-surface-hover); /* Einheitlicher, subtiler Hover-Hintergrund */
    box-shadow: 0 2px 5px rgba(var(--dp-accent-rgb), 0.08); /* Sehr dezenter Schatten bei Hover */
    transform: translateY(0); /* explizit keine Transformation für einen ruhigeren Effekt */
}

/* Sicherstellen, dass Buttons im Footer keine Unterstreichung beim Hover bekommen, falls sie als Links implementiert sind */
.area-footer-actions a.btn:hover,
.area-footer-actions button:hover {
    text-decoration: none;
}

/* Neuer Style für das Toggle-Icon in der Sidebar */
.sidebar-toggle-icon {
    font-size: 1.25rem; 
    color: var(--dp-accent-color); 
    padding: 5px; /* Padding reduziert für kompaktere Darstellung */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.sidebar-toggle-icon:hover {
    transform: scale(1.1); 
}

/* Wenn Dashboard ausgeblendet ist (Klasse .dashboard-hidden am Icon) */
.sidebar-toggle-icon.dashboard-hidden {
    color: var(--dp-danger-color); /* Rot (Dashboard ausgeblendet -> Einblenden-Aktion) */
}

.sidebar-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-navigation .nav-item {
    display: flex;
    align-items: center;
    padding: 11px 15px; 
    margin-bottom: 5px; 
    border-radius: 5px; 
    color: var(--dp-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem; 
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-navigation .nav-item i {
    margin-right: 12px;
    font-size: 1rem; 
    width: 18px; 
    text-align: center;
    color: var(--dp-text-secondary); 
    transition: color 0.15s;
}

.sidebar-navigation .nav-item:hover {
    background-color: var(--dp-surface-hover);
    /* color: var(--dp-text-primary); */ /* Allgemeine Hover-Farbe wird durch spezifische ersetzt */
}
/* .sidebar-navigation .nav-item:hover i { color: var(--dp-accent-color); } */ /* Globale Akzentfarbe entfernt */

.sidebar-navigation .nav-item.active {
    /* background-color: var(--dp-accent-color); */ /* Globale Akzentfarbe entfernt */
    color: #fff; 
    box-shadow: 0 1px 3px rgba(0,0,0, 0.2); /* Angepasster Schatten für bessere Sichtbarkeit mit Kat-Farben */
}

.sidebar-navigation .nav-item.active i {
    color: #fff; 
}

/* --- NEU: Kategorie-spezifisches Styling für Sidebar Nav-Items --- */

/* Warnings (war Overview) */
.sidebar-navigation .nav-item[data-category="warnings"]:hover,
.sidebar-navigation .nav-item[data-category="warnings"]:hover i {
    color: var(--dp-cat-warnings-color);
}
.sidebar-navigation .nav-item[data-category="warnings"].active {
    background-color: var(--dp-cat-warnings-color);
}
.sidebar-navigation .nav-item[data-category="warnings"].active:hover {
    color: #fff; /* Keep text color white on hover for active warning items */
}
.sidebar-navigation .nav-item[data-category="warnings"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active warning items */
}

/* Administration (war Management) */
.sidebar-navigation .nav-item[data-category="administration"]:hover,
.sidebar-navigation .nav-item[data-category="administration"]:hover i {
    color: var(--dp-cat-administration-color);
}
.sidebar-navigation .nav-item[data-category="administration"].active {
    background-color: var(--dp-cat-administration-color);
}
.sidebar-navigation .nav-item[data-category="administration"].active:hover {
    color: #fff; /* Keep text color white on hover for active administration items */
}
.sidebar-navigation .nav-item[data-category="administration"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active administration items */
}

/* Current & Plan (war Operations) */
.sidebar-navigation .nav-item[data-category="currentplan"]:hover,
.sidebar-navigation .nav-item[data-category="currentplan"]:hover i {
    color: var(--dp-cat-currentplan-color);
}
.sidebar-navigation .nav-item[data-category="currentplan"].active {
    background-color: var(--dp-cat-currentplan-color);
}
.sidebar-navigation .nav-item[data-category="currentplan"].active:hover {
    color: #fff; /* Keep text color white on hover for active currentplan items */
}
.sidebar-navigation .nav-item[data-category="currentplan"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active currentplan items */
}

/* Courses & Planning (war Planning) */
.sidebar-navigation .nav-item[data-category="coursesplanning"]:hover,
.sidebar-navigation .nav-item[data-category="coursesplanning"]:hover i {
    color: var(--dp-cat-coursesplanning-color);
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active {
    background-color: var(--dp-cat-coursesplanning-color);
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active:hover {
    color: #fff; /* Keep text color white on hover for active coursesplanning items */
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active coursesplanning items */
}

/* Events (NEU) */
.sidebar-navigation .nav-item[data-category="events"]:hover,
.sidebar-navigation .nav-item[data-category="events"]:hover i {
    color: var(--dp-cat-events-color);
}
.sidebar-navigation .nav-item[data-category="events"].active {
    background-color: var(--dp-cat-events-color);
}
.sidebar-navigation .nav-item[data-category="events"].active:hover {
    color: #fff; /* Keep text color white on hover for active event items */
}
.sidebar-navigation .nav-item[data-category="events"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active event items */
}

/* Codes (NEU) */
.sidebar-navigation .nav-item[data-category="codes"]:hover,
.sidebar-navigation .nav-item[data-category="codes"]:hover i {
    color: var(--dp-cat-codes-color);
}
.sidebar-navigation .nav-item[data-category="codes"].active {
    background-color: var(--dp-cat-codes-color);
}
.sidebar-navigation .nav-item[data-category="codes"].active:hover {
    color: #fff;
}
.sidebar-navigation .nav-item[data-category="codes"].active:hover i {
    color: #fff;
}

/* Reports entfernt - falls wieder benötigt, hier hinzufügen */

/* Hauptinhalt - Minimalstil */
.dashboard-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Wichtig für Scrollbarkeit des Inhalts */
    padding: 20px 25px; 
    box-sizing: border-box;
}

.dashboard-categories-wrapper {
    flex-grow: 1;
    background-color: var(--dp-bg-color);
    transition: opacity 0.3s ease, transform 0.3s ease; 
    opacity: 0; /* Initial unsichtbar */
    transform: translateY(10px); /* Initial leicht verschoben */
    will-change: opacity, transform; /* NEU: Browser-Optimierungshinweis */
    /* display: none; wird initial nicht gesetzt, damit JS es beim ersten Mal animieren kann, wenn nötig */
    display: flex; /* Haupt-Wrapper als Flex-Container für die Kategorien */
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den Kategorien */
}

/* Styling für die einzelnen dashboard-category-content DIVs */
.dashboard-category-content {
    /* padding-top: 20px; */ /* ENTFERNT - Abstand wird vom Grid übernommen */
    /* border-top: 3px solid transparent; */ /* ENTFERNT - Platzhalter für farbigen Rand */
    /* background-color: rgba(255,255,255,0.01); */ /* Optional: sehr leichter Hintergrund für jede Kategorie */
    border-radius: 0 0 4px 4px; /* Abrundung unten, falls gewünscht */
    /* Wichtig: Der Hintergrundgradient bleibt hier */
}

/* Das Grid innerhalb jeder Kategorie bekommt den oberen Abstand */
.dashboard-category-content .dashboard-grid {
    margin-top: 20px;
    display: grid; /* Hinzugefügt für Grid-Layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Hinzugefügt für responsive Spalten */
    gap: 20px; /* Hinzugefügt für den gewünschten Abstand */
}

.category-is-overview {
    /* border-top-color: var(--dp-cat-overview-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-overview-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT, da Hover-Effekt entfernt wird */
}
/* ENTFERNT .category-is-overview:hover Regel */

.category-is-management {
    /* border-top-color: var(--dp-cat-management-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-management-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-management:hover Regel */

.category-is-operations {
    /* border-top-color: var(--dp-cat-operations-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-operations-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-operations:hover Regel */

.category-is-planning {
    /* border-top-color: var(--dp-cat-planning-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-planning-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-planning:hover Regel */

.category-is-reports {
    /* border-top-color: var(--dp-cat-reports-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-reports-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-reports:hover Regel */

/* NEU: Kategorie-spezifischer Hintergrund für "Codes" */
.category-is-codes {
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-codes-rgb), 0.04) 0%, transparent 35%);
}

/* Zustand, wenn das Dashboard sichtbar und animiert werden soll */
.dashboard-categories-wrapper.dashboard-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Zustand für die Ausblendanimation (bevor display:none gesetzt wird) */
.dashboard-categories-wrapper.dashboard-hidden-animated {
    opacity: 0;
    transform: translateY(10px);
}

/* Klasse .sidebar-fixed für die fixierte Sidebar */
.sidebar-fixed {
    position: fixed;
    top: 0; /* JS sets this to currentGlobalNavHeight + 'px' */
    left: 0;
    width: 260px;
    height: 100vh; /* JS sets this to calc(100vh - currentGlobalNavHeight + 'px') */
    background-color: var(--dp-bg-color);
    border-right: 1px solid var(--dp-border-color);
    padding: 0 15px 20px 15px; /* Angepasst: padding-top 0, Rest konsistent mit .dashboard-sidebar */
    box-sizing: border-box;
    /* overflow-y: auto; */ /* ENTFERNT: Wird durch .sidebar-navigation gehandhabt */
    z-index: 1031; /* ERHÖHT von 1000, um über Standard-Bootstrap-Navbar (1030) zu liegen */
    display: flex; /* HINZUGEFÜGT */
    flex-direction: column; /* HINZUGEFÜGT */
}

.dashboard-loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: var(--dp-text-secondary);
    font-size: 1rem;
}

.dashboard-loading-placeholder .spinner-border {
    margin-bottom: 15px;
}

/* --- Fokus-Bereiche anpassen --- */
.dashboard-focus-area {
    background-color: var(--dp-surface-color);
    border-radius: 6px;
    padding: 20px;
    display: flex !important; /* DEBUG: Explizit setzen */
    flex-direction: column !important; /* DEBUG: Explizit setzen */
    gap: 15px;
    border: 1px solid var(--dp-border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    margin-bottom: 25px; 
}

.area-title {
    font-size: 1.25rem; 
    font-weight: 600;
    color: var(--dp-text-primary);
    margin: 0;
    display: flex;
    align-items: center; /* Vertically align .title-main-group and .area-title-count */
    /* gap: 10px; */ /* Removed, handled by margin on count or within title-main-group */
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

.status-db-found {
    background-color: var(--dp-success-color); /* Türkis */
    color: #fff !important; /* Ensure text is white, overriding potential global badge text color */
}

.status-db-not-found {
    background-color: var(--dp-danger-color); /* Rot */
    color: #fff !important; /* Ensure text is white */
}

.course-details .course-info {
    font-size: 0.85rem;
}

.leader-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}
.leader-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.details-box {
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 15px;
    margin-top: 20px;
}

.details-box-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-box-content .category-info {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    margin-bottom: 8px;
}

.details-box-content .content-info {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    line-height: 1.6;
}


.date-info .label {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.date-info .date-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.date-info .duration-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-secondary);
}

/*
==============================================
 Kurstermine Liste (Classes Dashboard)
==============================================
*/
.job-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.job-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    padding: 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.job-list-item:hover {
    border-color: var(--dp-accent-color);
}

.job-item-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    gap: 12px;
    width: 100%;
}

.job-item-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--dp-border-color);
}

.job-item-main-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex-grow: 1;
}

.job-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    max-width: 50%;
}

.job-item-meta {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.job-item-meta-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.job-item-meta-line-1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.job-item-meta-line-2 {
    display: flex;
}

.meta-time-group,
.meta-item-primary,
.meta-item-secondary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.meta-item-primary {
    color: var(--dp-text-primary);
    font-weight: 500;
}

.meta-item-primary i {
    color: var(--dp-text-primary);
}

.meta-item-secondary {
    color: var(--dp-text-secondary);
}

.meta-item-secondary i {
    color: var(--dp-text-secondary);
}

.job-item-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.job-unit-badge {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--dp-success-color);
    padding: 4px 9px;
    border-radius: 5px;
}

.job-unit-badge--past {
    background-color: transparent;
    color: var(--dp-success-color);
    border: 1px solid var(--dp-success-color);
    padding: 3px 8px; /* Adjust padding to account for border */
}

.job-item-meta i {
    color: var(--dp-text-secondary);
}

.job-item-workers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    max-width: 50%;
}

.worker-item-button {
    display: inline-flex;
    flex-direction: column;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    text-align: left;
    transition: all 0.2s ease;
    text-decoration: none;
}

.worker-item-button:not(.is-static):hover {
    border-color: var(--dp-accent-color);
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-decoration: none;
}

.worker-item-button.is-static,
.worker-item-button.is-static:hover {
    text-decoration: none;
    cursor: default;
}

.worker-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    line-height: 1.4;
}

.worker-name i {
    margin-right: 5px;
    color: var(--dp-text-secondary);
}

.worker-role {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    padding-left: 18px; /* Align with text, not icon */
}

a.worker-item-button.is-static {
    background-color: rgba(var(--dp-danger-rgb), 0.1);
    border-color: rgba(var(--dp-danger-rgb), 0.3);
}

a.worker-item-button.is-static:hover {
    border-color: var(--dp-danger-color);
}

.worker-item-button.is-static {
    background-color: rgba(var(--dp-danger-rgb), 0.1);
    border-color: rgba(var(--dp-danger-rgb), 0.3);
}

.worker-name.text-danger {
    color: var(--dp-danger-color) !important;
}

.worker-name.text-danger i {
    color: var(--dp-danger-color);
}

/* Bottom Row: Participant Actions and Status Actions */
.job-item-participants-actions,
.job-item-status-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-separator {
    width: 1px;
    height: 24px;
    background-color: var(--dp-border-color);
    margin: 0 6px;
}

/* Making buttons smaller and uniform */
.job-item-actions-row .btn.btn-sm {
    padding: 4px 8px;
    font-size: 0.85rem;
}

.job-item-actions-row .btn.btn-sm i {
    margin-right: 0; /* Remove right margin if only icon is present */
}

/* Make icon-only buttons square */
.job-item-participants-actions a.btn.btn-sm,
.job-item-status-actions a.btn.btn-sm {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.job-item-participants-actions .dropdown-toggle.btn-sm {
    /* Keep padding for text+icon */
    padding: 4px 8px;
}
.job-item-participants-actions .dropdown-toggle.btn-sm i {
    margin-right: 5px; /* Add margin back for icon in button with text */
}

.chip.chip-danger {
    background-color: rgba(var(--dp-danger-rgb), 0.15);
    border: 1px solid rgba(var(--dp-danger-rgb),0.3);
    color: var(--dp-danger-color);
}

.location-code-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
    text-transform: uppercase;
}

.job-item-meta i {
    color: var(--dp-text-secondary);
}

/*
==============================================
 Custom Dark Tooltip
==============================================
*/
.tooltip > .tooltip-inner {
    background-color: var(--dp-surface-hover, #3f4248);
    color: var(--dp-text-primary, #e0e0e0);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: left;
    max-width: 250px;
    border: 1px solid var(--dp-success-color);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .arrow::before {
    border-top-color: var(--dp-surface-hover, #3f4248);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--dp-surface-hover, #3f4248);
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .arrow::before {
    border-left-color: var(--dp-surface-hover, #3f4248);
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .arrow::before {
    border-right-color: var(--dp-surface-hover, #3f4248);
}

.job-item-meta-line-2 .meta-item-secondary {
    color: var(--dp-text-primary);
    font-weight: 500;
}

.job-item-meta-line-2 .meta-item-secondary i {
    color: var(--dp-text-primary);
}

/*
==============================================
 Ticket List (Classes Dashboard)
==============================================
*/
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticket-item {
    display: flex;
    background: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 10px 12px;
    transition: border-color 0.18s, background 0.18s;
}

.ticket-item[onclick]:hover {
    cursor: pointer;
    border-color: var(--dp-accent-color);
    background: #31353A;
}

.ticket-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ticket-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticket-price-badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 3px 8px;
    border: 1px solid var(--dp-accent-color);
    color: var(--dp-accent-color);
    border-radius: 4px;
    white-space: nowrap;
}

.ticket-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.ticket-products-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ticket-sub-details {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/*
==============================================
 Ticket List (Classes Dashboard) - New Style
==============================================
*/
.ticket-list-new {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    gap: 10px; /* Reduced gap */
    align-content: flex-start; /* ADDED: Prevent stretching of items */
}

.ticket-item-new {
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 12px; /* Reduced padding */
    display: flex;
    flex-direction: column; /* Changed to column for vertical flow */
    gap: 10px; /* Reduced gap between info blocks */
    transition: border-color 0.2s, background-color 0.2s;
    flex: 0 1 calc(33.333% - 10px); /* 3 items per row, no grow */
    min-width: 250px; /* Further reduced for responsiveness */
    position: relative; /* For absolute positioning of price and button */
    padding-bottom: 45px; /* Reduced space for the button at the bottom */
}

.ticket-item-new[role="button"]:hover {
    cursor: pointer;
    border-color: var(--dp-accent-color);
    background-color: var(--dp-surface-hover);
}

.ticket-item-info {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Reduced gap */
    flex-grow: 1;
}

.ticket-item-price-container {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ticket-item-price {
    font-size: 1rem; /* Reduced font size */
    font-weight: 600;
    color: var(--dp-accent-color);
    white-space: nowrap;
}

.ticket-item-price-subtext {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.ticket-item-name {
    font-size: 0.85rem; /* Reduced font size */
    font-weight: 500;
    color: var(--dp-text-primary);
    padding-right: 85px; /* Adjusted space for the absolute positioned price */
}

.ticket-item-products {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Reduced gap */
}

.chip-product {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.1);
    border: 1px solid rgba(var(--dp-text-secondary-rgb), 0.2);
    border-radius: 4px;
    padding: 4px 8px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.chip-product .product-name {
    font-size: 0.85rem; /* Reduced font size */
    font-weight: 500;
    color: var(--dp-text-primary);
}

.chip-product .product-name .product-chip-prefix {
    font-weight: 600;
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
    margin-right: 5px;
    text-transform: uppercase;
}

.chip-product .product-participation {
    font-size: 0.75rem; /* Reduced font size */
    color: var(--dp-text-secondary);
}

.ticket-item-footer {
    font-size: 0.85rem; /* Reduced font size */
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
    margin-top: auto; /* Push to bottom of flex container */
}

.ticket-item-actions {
    flex-shrink: 0;
    position: absolute;
    bottom: 12px; /* Adjusted position */
    right: 12px; /* Adjusted position */
}

.ticket-item-actions .btn {
    width: 30px; /* Reduced size */
    height: 30px; /* Reduced size */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ticket-item-actions .btn i {
    margin: 0;
}

/* Style for product rows inside the edit modal */
.product-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 4px;
}

.product-form-row .chip-product {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Color variation for Kurs */
.chip-product--class {
    background-color: rgba(var(--dp-accent-color-rgb), 0.15);
    border-color: rgba(var(--dp-accent-color-rgb), 0.3);
}

.chip-product--class .product-chip-prefix {
    color: var(--dp-accent-color);
}

/* Color variation for Kategorie */
.chip-product--category {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.15);
    border-color: rgba(var(--dp-text-secondary-rgb), 0.3);
}

.chip-product--category .product-chip-prefix {
    color: var(--dp-text-secondary);
}

.product-chip-button-wrapper.btn-warning-modern .product-chip-delete:hover {
    background-color: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff;
}

.product-chip-text {
    white-space: normal;
    text-align: left;
    line-height: 1.4;
}

.product-chip-text i {
    margin-right: 8px;
}

.product-chip-delete {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    transition: all 0.2s ease;
}

.product-chip-delete:hover {
    background-color: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff;
}


/* Style for product rows inside the edit modal */
.product-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 4px;
}

.product-form-row .chip-product {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Color variation for Kurs */
.chip-product--class {
    background-color: rgba(var(--dp-accent-color-rgb), 0.15);
    border-color: rgba(var(--dp-accent-color-rgb), 0.3);
}

.chip-product--class .product-chip-prefix {
    color: var(--dp-accent-color);
}

/* Color variation for Kategorie */
.chip-product--category {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.15);
    border-color: rgba(var(--dp-text-secondary-rgb), 0.3);
}

.chip-product--category .product-chip-prefix {
    color: var(--dp-text-secondary);
}

/*
==============================================
 Ticket Modal Product Editor (New)
==============================================
*/
.product-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.product-chip-item {
    display: inline-block;
    position: relative;
}

.product-chip-button-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 45px 10px 15px;
    border-radius: 6px;
    color: #fff;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    min-height: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.product-chip-button-wrapper.btn-success-modern {
    background-color: var(--dp-success-color);
}
.product-chip-button-wrapper.btn-warning-modern {
    background-color: var(--dp-warning-color);
    color: #1A1C1E; /* Dark text on yellow background */
}

.product-chip-button-wrapper.btn-warning-modern .product-chip-delete {
    color: #1A1C1E;
    border-color: rgba(0,0,0,0.2);
}

.product-chip-button-wrapper.btn-warning-modern .product-chip-delete:hover {
    background-color: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff;
}

.product-chip-text {
    white-space: normal;
    text-align: left;
    line-height: 1.4;
}

.product-chip-text i {
    margin-right: 8px;
}

.product-chip-delete {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    transition: all 0.2s ease;
}

.product-chip-delete:hover {
    background-color: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff;
}


/* Style for product rows inside the edit modal */
.product-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 4px;
}

.product-form-row .chip-product {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Color variation for Kurs */
.chip-product--class {
    background-color: rgba(var(--dp-accent-color-rgb), 0.15);
    border-color: rgba(var(--dp-accent-color-rgb), 0.3);
}

.chip-product--class .product-chip-prefix {
    color: var(--dp-accent-color);
}

/* Color variation for Kategorie */
.chip-product--category {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.15);
    border-color: rgba(var(--dp-text-secondary-rgb), 0.3);
}

.chip-product--category .product-chip-prefix {
    color: var(--dp-text-secondary);
}

/*
==============================================
 Ticket Modal Product Editor (New)
==============================================
*/
.product-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.product-chip-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-accent-color);
    padding: 8px 12px;
    padding-right: 75px; /* Space for two buttons */
    border-radius: 6px;
    min-width: 150px;
    transition: all 0.2s ease;
}

.product-chip-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.product-chip-item.chip-product--class {
    border-color: var(--dp-accent-color);
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
}

.product-chip-actions {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
}

.product-chip-actions .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid transparent;
    background-color: rgba(0,0,0,0.2);
    color: var(--dp-text-secondary);
    transition: all 0.2s ease;
}

.product-chip-actions .btn:hover {
    color: #fff;
    border-color: transparent;
}

.product-chip-actions .product-chip-edit:hover {
    background-color: var(--dp-accent-color);
}

.product-chip-actions .product-chip-delete:hover {
    background-color: var(--dp-danger-color);
}


/* Style for product rows inside the edit modal */
.product-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 4px;
}

.product-form-row .chip-product {
    flex-grow: 1;
    margin-bottom: 0;
}

.area-title.area-title--success .title-main-group {
    border-bottom-color: var(--dp-success-color);
}

.area-title.area-title--success i {
    color: var(--dp-success-color);
}

.area-title-count {
    background-color: var(--dp-accent-color);
}


/*
==============================================
 Anmeldung Box (Classes Dashboard)
==============================================
*/
.anmeldung-box-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
    gap: 12px;
}

.anmeldung-sub-status-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.anmeldung-sub-status-group .btn {
    cursor: default;
}

.anmeldung-status-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.anmeldung-status-display .btn {
    cursor: default;
    font-size: 0.85rem;
    padding: 8px 12px;
}

.anmeldung-period-text {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    padding-left: 5px;
}

.worker-item-button .worker-name,
.worker-item-button .worker-name i {
    color: var(--dp-text-primary);
}

.worker-item-button .worker-role {
    color: var(--dp-text-secondary);
}

.worker-item-button {
    display: inline-flex;
    flex-direction: column;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    text-align: left;
    transition: all 0.2s ease;
    text-decoration: none;
}

.worker-item-button:not(.is-static):hover {
    border-color: var(--dp-accent-color);
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-decoration: none;
}

.worker-item-button.is-static,
.worker-item-button.is-static:hover {
    text-decoration: none;
    cursor: default;
}

.anmeldung-main-status-button {
    display: inline-flex;
    flex-direction: column;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: left;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: default;
}

.anmeldung-main-status-button .worker-name,
.anmeldung-main-status-button .worker-name i {
    color: var(--dp-text-primary);
}

.anmeldung-main-status-button .worker-role {
    color: var(--dp-text-secondary);
}

.anmeldung-main-status-button .is-deemphasized {
    opacity: 0.6;
}


/* MODAL FIX */
.modal {
    z-index: 9999999;
}

/* MARGIN FIX FOR NETGRID TABLES */
.table-responsive {
    margin-top: 20px;
}

/* DANCEPILOT CONFIRMATION DIALOG */
.dp-confirm-open {
    overflow: hidden;
}

.dp-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.48);
}

.dp-confirm-panel {
    width: min(360px, 100%);
    overflow: hidden;
    border: 1px solid var(--dp-border-color);
    border-radius: 8px;
    background: var(--dp-surface-color);
    color: var(--dp-text-color);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
}

.dp-confirm-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dp-border-color);
    background: var(--dp-surface-hover);
}

.dp-confirm-body {
    padding: 18px 16px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.dp-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 16px;
}

.dp-confirm-btn {
    min-height: 34px;
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.dp-confirm-cancel {
    background: var(--dp-surface-hover);
    color: var(--dp-text-color);
}

.dp-confirm-ok {
    border-color: #dc3545;
    background: #dc3545;
    color: #fff;
}

.dp-confirm-ok:hover {
    border-color: #bd2130;
    background: #c82333;
}


/* ========== DP2 – neues Design (Privatstunden, …) ========== */

.dp2-page {
    padding: 0 25px 25px;
    font-family: Inter, sans-serif;
    color: var(--dp-text-primary);
}

.dp2-header {
    margin-top: 14px;
    margin-bottom: 20px;
}

.dp2-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dp-accent-color);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--dp-accent-color);
    line-height: 1.2;
    display: inline-block;
}

.dp2-card {
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    margin-bottom: 24px;
    overflow: hidden;
}

.dp2-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--dp-border-color);
}

.dp2-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin: 0;
}

.dp2-card-title i {
    margin-right: 8px;
    color: var(--dp-accent-color);
}

.dp2-card-title .dp2-badge-count {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.5em;
    text-align: center;
    background-color: var(--dp-surface-hover);
    color: var(--dp-text-secondary);
    border: 1px solid var(--dp-border-color);
}

.dp2-card-body {
    padding: 18px;
}

/* netgrid-table – Tabellen im Dancehub-Stil */
.netgrid-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(174, 178, 184, .2);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
}

/* ========== Dancepilot Dashboard CI 2026 ========== */
:root {
    --dp-bg-color: #080b0d;
    --dp-surface-color: #11161a;
    --dp-surface-hover: #171d22;
    --dp-surface-raised: #151a1f;
    --dp-surface-header: #1a2026;
    --dp-border-color: #26303a;
    --dp-border-soft: rgba(174, 178, 184, .18);
    --dp-text-primary: #f4f7f8;
    --dp-text-primary-rgb: 244, 247, 248;
    --dp-text-secondary: #a8b3bc;
    --dp-text-secondary-rgb: 168, 179, 188;
    --dp-accent-color: #7adbd6;
    --dp-accent-rgb: 122, 219, 214;
    --dp-success-color: var(--dp-accent-color);
    --dp-success-rgb: var(--dp-accent-rgb);
    --dp-danger-color: #ff5c78;
    --dp-danger-rgb: 255, 92, 120;
    --dp-warning-color: #d6a829;
    --dp-warning-rgb: 214, 168, 41;
    --dp-ui-radius: 7px;
    --dp-ui-radius-sm: 6px;
}

html {
    width: 100%;
    scroll-behavior: smooth;
}

body {
    background: var(--dp-bg-color);
    color: var(--dp-text-primary);
    scrollbar-color: rgba(174, 178, 184, .55) rgba(8, 11, 13, .72);
    scrollbar-width: thin;
}

* {
    scrollbar-color: rgba(174, 178, 184, .48) rgba(8, 11, 13, .72);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(8, 11, 13, .72);
}

::-webkit-scrollbar-thumb {
    background: rgba(174, 178, 184, .42);
    border: 2px solid rgba(8, 11, 13, .72);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(174, 178, 184, .62);
}

button,
input,
select,
textarea {
    font-family: var(--dp-font-sans);
}

button {
    font-weight: 700;
}

a {
    color: var(--dp-text-secondary);
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

a:hover,
a:active,
a:focus {
    color: var(--dp-text-primary);
    outline: none;
    text-decoration: none;
}

.appcontent {
    width: 100% !important;
    min-height: calc(100vh - 66px);
    margin-top: 0;
    padding-top: 0;
}

.tr-button {
    cursor: pointer !important;
}

.firstcellpadding {
    padding-left: 20px !important;
}

.tooltip {
    z-index: 1000000000000000000 !important;
}

.tooltip > .tooltip-inner {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-color);
    border-radius: var(--dp-ui-radius-sm);
    background-color: var(--dp-surface-header);
    color: var(--dp-text-primary);
    font-family: var(--dp-font-sans);
    font-size: .85rem;
}

.modal-content {
    border: 1px solid var(--dp-border-soft);
    background: rgba(21, 26, 31, .98);
    color: var(--dp-text-primary);
}

.modal-header,
.modal-footer {
    border-color: var(--dp-border-soft);
}

.close,
.modal-header .close {
    color: var(--dp-text-primary);
    text-shadow: none;
}

.close:hover,
.modal-header .close:hover {
    color: var(--dp-text-secondary);
}

.appform {
    width: 100%;
    margin: 0 0 20px;
}

.appformheader,
.appformsubmit {
    width: 100%;
    background-color: transparent;
}

.appformsubmit {
    padding: 10px 20px;
    text-align: center;
}

.appformtitle,
.appformsubtitle {
    margin: 20px 20px 6px;
    color: var(--dp-text-primary);
    font-size: 2rem;
}

.appformentryname {
    margin-left: 0 !important;
    color: var(--dp-text-primary);
    font-size: 1.5rem;
    text-transform: capitalize;
}

.appform-element {
    display: table;
    width: 100%;
    margin: 20px 0;
    padding: 0 20px;
}

.appform-inputtitle {
    display: table-cell;
    width: 30%;
    min-width: 300px;
    vertical-align: top;
}

.appform-inputdesc {
    display: table-row;
    width: 100%;
    padding: 4px 0 0 20px;
    color: var(--dp-text-secondary);
    font-size: .85rem;
}

.appform-input {
    display: table-cell;
    width: 70%;
    vertical-align: top;
}

.appform-input input {
    width: 100%;
}

.appform-actions {
    width: 100%;
    text-align: right;
    white-space: nowrap;
}

.form-control,
.form-control:focus,
.form-control:hover {
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: var(--dp-ui-radius) !important;
    background-color: rgba(8, 11, 13, .56) !important;
    color: var(--dp-text-primary) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-control:hover {
    border-color: rgba(var(--dp-accent-rgb), .38) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: rgba(var(--dp-text-secondary-rgb), .78) !important;
    opacity: 1;
}

.bootstrap-select .dropdown-menu {
    border: 1px solid var(--dp-border-soft);
    background-color: rgba(17, 22, 26, .98);
    color: var(--dp-text-primary);
    scrollbar-color: rgba(174, 178, 184, .36) rgba(17, 22, 26, .98);
    scrollbar-width: thin;
}

.bootstrap-select.bs-container {
    z-index: 10000000;
}

.bootstrap-select.bs-container .dropdown-menu {
    z-index: 10000000;
}

.modal-open .bootstrap-select.bs-container,
.modal-open .bootstrap-select.bs-container .dropdown-menu {
    z-index: 10000000 !important;
}

.dp-course-job-modal .bootstrap-select .dropdown-menu {
    max-width: min(720px, calc(100vw - 32px));
}

.dp-course-job-modal .bootstrap-select.show .dropdown-menu {
    z-index: 1;
}

.bootstrap-select .dropdown-menu .dropdown-item {
    background-color: transparent;
    color: var(--dp-text-primary);
}

.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu .dropdown-item:hover {
    background-color: rgba(var(--dp-accent-rgb), .12);
    color: #fff;
}

.bootstrap-select .bs-searchbox input,
.bootstrap-select > .btn,
#calendar-search.form-control {
    border: 1px solid var(--dp-border-soft) !important;
    background-color: rgba(8, 11, 13, .56) !important;
    color: var(--dp-text-primary) !important;
    box-shadow: none !important;
}

.bootstrap-select .bs-searchbox input:focus,
.bootstrap-select > .btn:focus,
.bootstrap-select > .btn:active,
.bootstrap-select > .btn:hover,
.bootstrap-select.show > .btn,
#calendar-search.form-control:focus,
#calendar-search.form-control:hover {
    border-color: rgba(var(--dp-accent-rgb), .38) !important;
    background-color: rgba(8, 11, 13, .72) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}

.toggle[data-toggle="toggle"] {
    max-width: 100%;
    height: 40px !important;
    min-height: 40px;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: 8px !important;
    background: rgba(8, 11, 13, .56) !important;
    color: var(--dp-text-primary) !important;
    box-shadow: none !important;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: none !important;
    vertical-align: middle;
}

.toggle[data-toggle="toggle"]:has(input[data-width="20%"]) {
    width: auto !important;
    min-width: 154px;
}

.toggle[data-toggle="toggle"]:has(input[data-width="5%"]) {
    width: 52px !important;
    min-width: 52px;
    height: 34px !important;
    min-height: 34px;
    font-size: .72rem;
}

.toggle[data-toggle="toggle"]:has(input[data-width="5%"]) .toggle-on {
    padding: 0 24px 0 7px !important;
}

.toggle[data-toggle="toggle"]:has(input[data-width="5%"]) .toggle-off {
    padding: 0 7px 0 24px !important;
}

.toggle[data-toggle="toggle"]:has(input[data-width="5%"]) .toggle-handle {
    width: 22px !important;
    height: calc(100% - 8px) !important;
    border-radius: 5px !important;
}

.toggle[data-toggle="toggle"]:hover,
.toggle[data-toggle="toggle"]:focus,
.toggle[data-toggle="toggle"].focus {
    border-color: rgba(var(--dp-accent-rgb), .38) !important;
    background: rgba(8, 11, 13, .72) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}

.toggle[data-toggle="toggle"] .toggle-group {
    height: 100%;
}

.toggle[data-toggle="toggle"] .toggle-on,
.toggle[data-toggle="toggle"] .toggle-off {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: none !important;
    white-space: nowrap;
}

.toggle[data-toggle="toggle"] .toggle-on {
    padding: 0 38px 0 14px !important;
    background: rgba(var(--dp-accent-rgb), .2) !important;
    color: #fff !important;
}

.toggle[data-toggle="toggle"] .toggle-off {
    padding: 0 14px 0 38px !important;
    background: rgba(255, 255, 255, .045) !important;
    color: var(--dp-text-secondary) !important;
}

.toggle[data-toggle="toggle"] .toggle-handle {
    width: 34px !important;
    height: calc(100% - 8px) !important;
    margin: 4px auto !important;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .28) !important;
}

.toggle[data-toggle="toggle"].off {
    background: rgba(8, 11, 13, .56) !important;
    color: var(--dp-text-secondary) !important;
}

.toggle[data-toggle="toggle"].disabled,
.toggle[data-toggle="toggle"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

@media (max-width: 575.98px) {
    .toggle[data-toggle="toggle"]:has(input[data-width="20%"]) {
        min-width: 132px;
    }
}

.dp-classes-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--dp-border-soft);
    border-radius: 10px;
    background: rgba(12, 16, 19, .98);
    color: var(--dp-text-primary);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .38);
}

.dp-classes-modal .modal-header {
    align-items: center;
    min-height: 64px;
    border-bottom: 1px solid var(--dp-border-soft);
    background: rgba(17, 22, 26, .96);
}

.dp-classes-modal .modal-title {
    color: var(--dp-text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
}

.dp-classes-modal .modal-body {
    padding: 0;
    background: rgba(8, 11, 13, .72);
}

.dp-classes-modal .close {
    color: var(--dp-text-primary);
    opacity: .82;
    text-shadow: none;
}

.dp-classes-modal .dp-course-form {
    margin: 0;
}

.dp-classes-modal .dp-course-form-legacy-title {
    display: none;
}

.dp-classes-modal .dp-course-form-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 18px 20px;
    background: var(--dp-bg-color);
}

.dp-classes-modal .dp-course-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: rgba(17, 22, 26, .78);
    box-shadow: none;
}

.dp-classes-modal .dp-course-form-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(174, 178, 184, .12);
}

.dp-classes-modal .dp-course-form-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(var(--dp-accent-rgb), .24);
    border-radius: 7px;
    background: rgba(var(--dp-accent-rgb), .11);
    color: var(--dp-accent);
}

.dp-classes-modal .dp-course-form-section-title {
    margin: 0;
    color: var(--dp-text-primary);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.25;
}

.dp-classes-modal .dp-course-form-section-head p {
    margin: 5px 0 0;
    color: var(--dp-text-secondary);
    font-size: .78rem;
    line-height: 1.35;
}

.dp-classes-modal .dp-course-form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    min-width: 0;
}

.dp-classes-modal .dp-course-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.dp-classes-modal .dp-course-form-field--name-name,
.dp-classes-modal .dp-course-form-field--name-category,
.dp-classes-modal .dp-course-form-field--leaders,
.dp-classes-modal .dp-course-form-field--name-followup-class {
    grid-column: 1 / -1;
}

.dp-classes-modal .dp-course-form-field-title,
.dp-classes-modal .appform-inputtitle {
    display: block;
    width: auto;
    min-width: 0;
    color: var(--dp-text-primary);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
}

.dp-classes-modal .appform-input {
    display: block;
    width: 100%;
}

.dp-classes-modal .appform-inputdesc {
    display: block;
    width: auto;
    padding: 0;
    color: var(--dp-text-secondary);
    font-size: .76rem;
    line-height: 1.35;
}

.dp-classes-modal .form-control,
.dp-classes-modal select,
.dp-classes-modal select.selectpicker,
.dp-classes-modal .bootstrap-select > .btn {
    width: 100% !important;
    max-width: 100%;
    min-height: 40px;
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: 7px !important;
    background-color: rgba(8, 11, 13, .56) !important;
    color: var(--dp-text-primary) !important;
    font-size: .86rem;
    box-shadow: none !important;
}

.dp-classes-modal select,
.dp-classes-modal select.selectpicker {
    padding: 0 34px 0 12px;
    appearance: auto;
}

.dp-classes-modal select option {
    background: #11161a;
    color: var(--dp-text-primary);
}

.dp-classes-modal .input-group .form-control {
    min-width: 0;
}

.dp-classes-modal .input-group-append .btn {
    min-height: 40px;
    border-color: var(--dp-border-soft);
    background: rgba(26, 29, 33, .32);
    color: var(--dp-text-primary);
    font-size: .78rem;
    font-weight: 700;
}

.dp-classes-modal .toggle {
    min-width: 154px;
    overflow: hidden;
}

.dp-classes-modal .dp-course-form-actions {
    display: flex;
    justify-content: flex-end;
    margin: 2px -16px -16px;
    padding: 12px 16px;
    border-top: 1px solid var(--dp-border-soft);
    background: rgba(17, 22, 26, .96);
}

.dp-classes-modal .dp-course-form-actions .dp-ui-primary-btn {
    min-width: 150px;
}

.dp-classes-modal .dp-course-leader-picker {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: rgba(8, 11, 13, .38);
}

.dp-classes-modal .dp-course-leader-selected {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
}

.dp-classes-modal .dp-course-leader-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid rgba(174, 178, 184, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    color: var(--dp-text-primary);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
}

.dp-classes-modal .dp-course-leader-chip.is-primary {
    border-color: rgba(var(--dp-accent-rgb), .42);
    background: rgba(var(--dp-accent-rgb), .12);
    color: #e9fffb;
}

.dp-classes-modal .dp-course-leader-chip > i {
    color: var(--dp-accent-color);
}

.dp-classes-modal .dp-course-leader-chip strong {
    overflow: hidden;
    max-width: 340px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-classes-modal .dp-course-leader-chip em {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(var(--dp-accent-rgb), .2);
    color: var(--dp-accent-color);
    font-size: .62rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.dp-classes-modal .dp-course-leader-chip button {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--dp-text-secondary);
    cursor: pointer;
}

.dp-classes-modal .dp-course-leader-chip button:hover {
    background: rgba(var(--dp-danger-rgb), .16);
    color: #ffb8c4;
}

.dp-classes-modal .dp-course-leader-empty {
    color: var(--dp-text-secondary);
    font-size: .8rem;
    font-weight: 700;
}

.dp-classes-modal .dp-course-leader-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.dp-classes-modal .dp-course-leader-add .dp2-btn {
    min-height: 40px;
}

@media (max-width: 760px) {
    .dp-classes-modal .modal-dialog {
        margin: 8px;
    }

    .dp-classes-modal .dp-course-form-shell {
        padding: 12px;
    }

    .dp-classes-modal .dp-course-form-fields {
        grid-template-columns: 1fr;
    }

    .dp-classes-modal .dp-course-form-actions {
        margin: 0 -12px -12px;
        padding: 12px;
    }

    .dp-classes-modal .dp-course-form-actions .dp-ui-primary-btn {
        width: 100%;
    }

    .dp-classes-modal .dp-course-leader-add {
        grid-template-columns: 1fr;
    }

    .dp-classes-modal .dp-course-leader-chip {
        width: 100%;
        justify-content: space-between;
    }

    .dp-classes-modal .dp-course-leader-chip strong {
        max-width: min(100%, 220px);
    }
}

.netgrid-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
    box-shadow: none;
}

.netgrid-table-wrap:has(.ng-table-wrapper) {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.netgrid-table,
.dp-registration-table,
.dp2-page table[ng-table],
.dp2-page .netgrid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--dp-netgrid-surface) !important;
    color: var(--dp-text-primary);
    font-size: .85rem;
}

.netgrid-table thead,
.dp-registration-table thead {
    background: var(--dp-surface-header);
}

.netgrid-table th,
.dp-registration-table th,
.dp2-page table[ng-table] thead th,
.dp2-page .netgrid-table thead th {
    padding: 13px 14px;
    border-bottom: 1px solid var(--dp-border-soft) !important;
    background: var(--dp-surface-header) !important;
    color: #b9c8cf !important;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
}

.netgrid-table td,
.dp-registration-table td,
.dp2-page table[ng-table] tbody td,
.dp2-page .netgrid-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: transparent;
    color: var(--dp-text-primary);
    vertical-align: middle;
}

.netgrid-table tbody tr,
.dp-registration-table tbody tr {
    background: rgba(255, 255, 255, .008);
}

.netgrid-table tbody tr:nth-child(even),
.dp-registration-table tbody tr:nth-child(even),
.dp2-page table[ng-table] tbody tr:nth-child(even),
.dp2-page .netgrid-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .022);
}

.netgrid-table tbody tr:hover,
.dp-registration-table tbody tr:hover,
.dp2-page table[ng-table] tbody tr:hover,
.dp2-page .netgrid-table tbody tr:hover {
    background: rgba(var(--dp-accent-rgb), .055) !important;
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb), .44);
}

.ng-table-wrapper,
.dp-private-lessons-page .ng-table-wrapper,
.dp-private-lessons-page #card_requests .ng-table-wrapper {
    padding: 14px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
    box-shadow: none;
}

.ng-table-controls-top,
.dp2-page .ng-table-controls-top {
    align-items: center;
    margin-bottom: 12px;
    padding: 0 0 12px;
    border: 0;
    background: transparent;
}

.ng-table-right-controls,
.dp2-page .ng-table-right-controls {
    align-items: center;
    gap: 1rem;
}

.ng-table-info,
.dp2-page .ng-table-info {
    margin: 0;
    padding: 0;
    color: var(--dp-text-secondary);
    white-space: nowrap;
}

.ng-table-search-input,
.dp2-page .ng-table-search-input {
    border: 1px solid var(--dp-border-soft);
    border-radius: var(--dp-ui-radius);
    background: rgba(8, 11, 13, .56);
    color: var(--dp-text-primary);
}

.ng-table-export-btn,
.ng-table-column-toggle-btn,
.ng-table-page-btn,
.dp2-page .ng-table-export-btn,
.dp2-page .ng-table-column-toggle-btn,
.dp2-page .ng-table-page-btn {
    min-height: 32px;
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: var(--dp-ui-radius-sm) !important;
    background: rgba(17, 22, 26, .88) !important;
    color: var(--dp-text-primary) !important;
    font-size: .75rem;
    font-weight: 800;
    box-shadow: none !important;
}

.ng-table-export-btn:hover,
.ng-table-column-toggle-btn:hover,
.ng-table-page-btn:hover:not(:disabled),
.dp2-page .ng-table-export-btn:hover,
.dp2-page .ng-table-column-toggle-btn:hover,
.dp2-page .ng-table-page-btn:hover:not(:disabled) {
    border-color: rgba(var(--dp-accent-rgb), .46) !important;
    background: rgba(var(--dp-accent-rgb), .12) !important;
    color: #fff !important;
}

.ng-table-page-btn.ng-table-page-active,
.dp2-page .ng-table-page-btn.ng-table-page-active {
    border-color: rgba(var(--dp-accent-rgb), .55) !important;
    background: rgba(var(--dp-accent-rgb), .18) !important;
    color: #fff !important;
}

.dp-ui-page-head,
.dp-private-lessons-page .dp-ui-page-head,
.dp-client-registrations .dp-ui-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 8px 0 18px;
}

.dp-ui-page-head h1,
.dp-private-lessons-page .dp-ui-page-head h1,
.dp-client-registrations .dp-ui-page-head h1 {
    margin: 0;
    color: #f4f7f8;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-ui-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.dp-ui-primary-btn,
.dp-ui-secondary-btn,
.dp-ui-ghost-btn,
.dp-private-lessons-page .dp-ui-primary-btn,
.dp2-btn,
button.dp2-btn,
a.dp2-btn,
.dp2-card .dp2-btn,
.modal.dp2-modal .dp2-btn,
.dp2-page .dp2-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: var(--dp-ui-radius) !important;
    background: rgba(17, 22, 26, .88) !important;
    color: var(--dp-text-primary) !important;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.dp-ui-primary-btn,
.dp-private-lessons-page .dp-ui-primary-btn,
.dp2-btn-primary,
button.dp2-btn-primary,
a.dp2-btn-primary,
.dp2-card .dp2-btn-primary,
.modal.dp2-modal .dp2-btn-primary,
.dp2-page .dp2-btn-primary {
    border-color: rgba(var(--dp-accent-rgb), .55) !important;
    background: rgba(var(--dp-accent-rgb), .16) !important;
    color: #e9fffb !important;
}

.dp-ui-primary-btn:hover,
.dp-ui-secondary-btn:hover,
.dp-ui-ghost-btn:hover,
.dp-private-lessons-page .dp-ui-primary-btn:hover,
.dp2-btn:hover,
button.dp2-btn:hover,
a.dp2-btn:hover {
    border-color: rgba(var(--dp-accent-rgb), .55) !important;
    background: rgba(var(--dp-accent-rgb), .14) !important;
    color: #fff !important;
    text-decoration: none;
}

.dp2-btn-danger,
button.dp2-btn-danger,
a.dp2-btn-danger,
.dp2-card .dp2-btn-danger,
.dp2-page .dp2-btn-danger,
.dp-ui-secondary-btn.is-danger {
    border-color: rgba(var(--dp-danger-rgb), .48) !important;
    background: rgba(var(--dp-danger-rgb), .12) !important;
    color: #ffb8c4 !important;
}

.dp-ui-filter-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
    box-shadow: none;
}

.dp-ui-filter-bar label {
    min-width: 0;
    margin: 0;
}

.dp-ui-filter-bar label span {
    display: block;
    margin: 0 0 6px;
    color: var(--dp-text-secondary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.dp-ui-filter-bar .form-control {
    height: 38px;
    font-size: .85rem;
}

.dp-ui-filter-actions {
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 8px;
}

.dp-classes-table-wrap {
    margin-top: 12px;
}

.dp-classes-table .appform-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dp-classes-table td:nth-child(2) > h5 .badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid rgba(var(--dp-accent-rgb), .55) !important;
    border-radius: 7px;
    background: rgba(var(--dp-accent-rgb), .16) !important;
    color: #e9fffb !important;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: none !important;
}

.dp-classes-table td:nth-child(2) > br + .badge {
    margin-top: 7px;
}

.dp-classes-table td:nth-child(2) > br + .badge-success {
    border-color: rgba(var(--dp-accent-rgb), .55) !important;
    background: rgba(var(--dp-accent-rgb), .16) !important;
    color: #e9fffb !important;
}

.dp-client-registrations {
    display: grid;
    gap: 16px;
    color: var(--dp-text-primary);
}

.dp-memos-root {
    display: grid;
    gap: 16px;
    color: var(--dp-text-primary);
}

.dp-memos-root nav[aria-label="breadcrumb"] {
    display: none;
}

.dp-memos-head {
    margin: 8px 0 18px;
}

.dp-memos-head h1 {
    margin: 0;
    color: #f4f7f8;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-memos-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.dp-memos-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: 8px;
    background: rgba(17, 22, 26, .88) !important;
    color: var(--dp-text-primary) !important;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none !important;
}

.dp-memos-btn:hover,
.dp-memos-btn.is-primary {
    border-color: rgba(var(--dp-accent-rgb), .55) !important;
    background: rgba(var(--dp-accent-rgb), .16) !important;
    color: #e9fffb !important;
    text-decoration: none;
}

.dp-memos-btn.is-danger {
    border-color: rgba(var(--dp-danger-rgb), .48) !important;
    background: rgba(var(--dp-danger-rgb), .12) !important;
    color: #ffb8c4 !important;
}

.dp-memos-table-wrap {
    overflow: hidden;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
}

.dp-memos-table .dp-memos-person strong {
    display: block;
    color: #fff;
    font-weight: 800;
}

.dp-memos-table .dp-memos-person small,
.dp-memos-muted {
    color: var(--dp-text-secondary);
    font-size: .75rem;
}

.dp-memos-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(var(--dp-accent-rgb), .22);
    border-radius: 999px;
    background: rgba(var(--dp-accent-rgb), .10);
    color: #dffbf8;
    font-size: .75rem;
    font-weight: 800;
}

.dp-memos-note {
    max-width: 360px;
    color: #d9e4e7;
}

.dp-memos-actions-cell {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.dp-memos-actions-cell form {
    margin: 0;
}

.dp-memos-modal .modal-content {
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
    color: var(--dp-text-primary);
}

.dp-memos-modal .modal-header,
.dp-memos-modal .modal-footer {
    border-color: var(--dp-border-soft);
}

.dp-memos-modal .close {
    color: var(--dp-text-primary);
    opacity: .9;
    text-shadow: none;
}

.dp-memos-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dp-memos-form-grid label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.dp-memos-form-grid label.is-wide {
    grid-column: 1 / -1;
}

.dp-memos-form-grid label span {
    color: var(--dp-text-secondary);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.dp-memos-form-grid .form-control {
    min-height: 38px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: rgba(7, 11, 13, .76);
    color: var(--dp-text-primary);
}

.dp-memos-form-error {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--dp-danger-rgb), .38);
    border-radius: 8px;
    background: rgba(var(--dp-danger-rgb), .12);
    color: #ffb8c4;
    font-weight: 800;
}

@media (max-width: 760px) {
    .dp-memos-form-grid {
        grid-template-columns: 1fr;
    }
}

.dp-client-registrations-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.dp-client-registrations [data-registration-panel="checks"] {
    display: grid;
    gap: 18px;
}

.dp-registration-review-layout {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(0, 1.35fr);
    gap: 14px;
    align-items: start;
}

.dp-registration-review-main {
    display: grid;
    gap: 14px;
}

.dp-registration-queue-table td {
    vertical-align: middle;
}

.dp-registration-queue-table tr.is-active {
    background: rgba(var(--dp-accent-rgb), .08) !important;
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb), .75);
}

.dp-registration-queue-table strong {
    color: #fff;
}

.dp-registration-queue-table small {
    display: block;
    margin-top: 5px;
    color: var(--dp-text-secondary);
    font-size: .75rem;
    font-weight: 700;
}

.dp-registration-course-badge {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    padding: 3px 8px;
    border: 1px solid rgba(var(--dp-accent-rgb), .42);
    border-radius: 999px;
    background: rgba(var(--dp-accent-rgb), .13);
    color: #e9fffb;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.dp-private-panel-head .dp-registration-course-badge {
    margin-left: 0;
}

.dp-registration-selected-badge {
    min-height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 3px 8px;
    border: 1px solid rgba(var(--dp-accent-rgb), .42);
    border-radius: 999px;
    background: rgba(var(--dp-accent-rgb), .13);
    color: #e9fffb;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.dp-registration-selected-badge.is-visible {
    display: inline-flex;
}

.dp-registration-person-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 10px;
}

.dp-registration-person-grid span {
    display: block;
    color: var(--dp-text-secondary);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
}

.dp-registration-person-grid strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #fff;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-registration-partner-box {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(174, 178, 184, .14);
    border-radius: 8px;
    background: rgba(174, 178, 184, .055);
    color: #c7d0d5;
}

.dp-registration-partner-label {
    color: #8f9ba1;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.dp-registration-partner-box .dp-registration-person-grid span {
    color: #8f9ba1;
}

.dp-registration-partner-box .dp-registration-person-grid strong {
    color: #d5dde1;
}

.dp-registration-match-body {
    display: grid;
    gap: 12px;
}

.dp-registration-live-search {
    min-height: 38px;
}

.dp-registration-match-list {
    display: grid;
    gap: 8px;
}

.dp-registration-match-list [data-dp-registration-search-results] {
    display: grid;
    gap: 8px;
}

.dp-registration-match-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.dp-registration-match-row[role="button"] {
    cursor: pointer;
}

.dp-registration-match-row.is-best {
    border-color: var(--dp-border-soft);
    background: rgba(255, 255, 255, .035);
}

.dp-registration-match-row.is-selected {
    border-color: rgba(var(--dp-accent-rgb), .72);
    background: rgba(var(--dp-accent-rgb), .16);
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb), .86);
}

.dp-registration-match-row[role="button"]:focus-visible {
    outline: 2px solid rgba(var(--dp-accent-rgb), .8);
    outline-offset: 2px;
}

.dp-registration-match-row > strong {
    color: #e9fffb;
    font-weight: 900;
}

.dp-registration-match-row b {
    display: block;
    color: #fff;
}

.dp-registration-match-row span {
    display: block;
    margin-top: 3px;
    color: var(--dp-text-secondary);
    font-size: .75rem;
    font-weight: 700;
}

.dp-registration-new-account {
    border-color: rgba(var(--dp-warning-rgb), .38);
    background: rgba(var(--dp-warning-rgb), .10);
    box-shadow: inset 3px 0 0 rgba(var(--dp-warning-rgb), .75);
}

.dp-registration-new-account > strong {
    color: #ffd88a;
}

.dp-registration-review-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
}

.dp-registration-review-actions label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #e9fffb;
    font-weight: 800;
}

.dp-client-registrations-card,
.dp-private-lessons-stat,
.dp-private-lessons-unassigned-callout {
    min-width: 0;
    min-height: 72px;
    padding: 14px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-kpi-surface);
}

.dp-client-registrations-card small,
.dp-private-lessons-stat small,
.dp-private-lessons-unassigned-callout span {
    display: block;
    margin: 0;
    color: var(--dp-text-secondary);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.dp-client-registrations-card strong,
.dp-private-lessons-stat strong,
.dp-private-lessons-unassigned-callout strong {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1.1;
}

.dp-client-registrations-card,
.dp-private-lessons-stat,
.dp-private-lessons-unassigned-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dp-client-registrations-card,
.dp-private-lessons-stat {
    min-width: 160px;
}

.dp-client-registrations-card strong,
.dp-private-lessons-stat strong,
.dp-private-lessons-unassigned-callout strong {
    margin-top: 0;
}

.dp-private-lessons-unassigned-callout {
    min-width: 200px;
    max-width: 280px;
    border-color: rgba(var(--dp-danger-rgb), .36);
    background: rgba(var(--dp-danger-rgb), .11);
}

.dp-private-lessons-unassigned-callout strong {
    color: #ffdbe2;
}

.dp-vacations-page {
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
}

.dp-vacations-page .dp-ui-page-head {
    margin-bottom: 0;
}

.dp-vacation-subnav,
.dp-vacation-list-filter-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.dp-vacation-subnav a,
.dp-vacation-list-filter-switch a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
    color: var(--dp-text-secondary);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.dp-vacation-subnav a:hover,
.dp-vacation-list-filter-switch a:hover,
.dp-vacation-subnav a.is-active,
.dp-vacation-list-filter-switch a.is-active {
    border-color: rgba(var(--dp-accent-rgb), .48);
    background: rgba(var(--dp-accent-rgb), .13);
    color: var(--dp-text-primary);
    text-decoration: none;
}

.dp-vacations-stats .dp-private-lessons-stat {
    color: inherit;
}

.dp-vacations-stats .dp-private-lessons-stat.is-active {
    border-color: rgba(var(--dp-accent-rgb), .42);
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb), .58) !important;
}

.dp-vacations-table-wrap {
    overflow: visible;
}

.dp-vacations-empty {
    display: none;
    padding: 18px;
    color: var(--dp-text-secondary);
    border: 1px dashed rgba(174, 178, 184, .24);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
}

.dp-vacations-empty.is-visible {
    display: block;
}

.dp-vacations-list {
    display: grid;
    gap: 10px;
}

.dp-vacation-list-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
    color: var(--dp-text-primary);
    text-decoration: none;
}

.dp-vacation-list-item:hover {
    border-color: rgba(var(--dp-accent-rgb), .42);
    color: var(--dp-text-primary);
    text-decoration: none;
}

.dp-vacation-list-main,
.dp-vacation-list-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dp-vacation-list-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.dp-vacation-list-main:hover {
    color: inherit;
    text-decoration: none;
}

.dp-vacation-list-main strong {
    color: #fff;
    font-size: .98rem;
    line-height: 1.2;
}

.dp-vacation-list-main span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--dp-text-secondary);
    font-size: .86rem;
}

.dp-vacation-services-btn {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(var(--dp-warning-rgb), .38);
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(var(--dp-warning-rgb), .12);
    color: #ffd88a;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.dp-vacation-services-btn:hover {
    border-color: rgba(var(--dp-warning-rgb), .58);
    background: rgba(var(--dp-warning-rgb), .18);
    color: #ffe3a8;
}

.dp-vacation-services-modal .modal-content {
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
}

.dp-vacation-service-list {
    display: grid;
    gap: 10px;
}

.dp-vacation-service-item {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
    color: var(--dp-text-primary);
    text-decoration: none;
}

.dp-vacation-service-item:hover {
    border-color: rgba(var(--dp-accent-rgb), .42);
    color: var(--dp-text-primary);
    text-decoration: none;
}

.dp-vacation-service-date,
.dp-vacation-service-meta {
    color: var(--dp-text-secondary);
    font-size: .78rem;
    font-weight: 800;
}

.dp-vacation-service-course {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.dp-vacation-service-course strong {
    overflow: hidden;
    color: #fff;
    font-size: .9rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-vacation-service-course-code {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(var(--dp-accent-rgb), .16);
    color: var(--dp-accent-color);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
}

.dp-user-profile-page {
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
}

.dp-user-profile-head {
    margin-bottom: 0;
}

.dp-user-profile-tab-panel {
    display: none;
}

.dp-user-profile-tab-panel.is-active {
    display: block;
}

.dp-user-profile-grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.dp-user-profile-sidebar,
.dp-user-profile-main {
    display: grid;
    gap: 16px;
    align-items: start;
}

.dp-user-profile-card,
.dp-user-profile-panel {
    min-width: 0;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
}

.dp-user-profile-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.dp-user-profile-avatar {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--dp-accent-rgb), .38);
    border-radius: 8px;
    background: rgba(var(--dp-accent-rgb), .14);
    color: #e9fffb;
    font-size: 1.15rem;
    font-weight: 900;
}

.dp-user-profile-card h2,
.dp-user-profile-panel-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-user-profile-card > div > span {
    display: block;
    margin-top: 4px;
    color: var(--dp-text-secondary);
    font-size: .8rem;
}

.dp-user-profile-meta {
    display: grid;
    gap: 8px;
    padding-top: 6px;
}

.dp-user-profile-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.dp-user-profile-meta small,
.dp-user-profile-form label span,
.dp-user-profile-panel-head > span {
    color: var(--dp-text-secondary);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.dp-user-profile-meta-row small {
    flex: 0 0 auto;
    min-width: 82px;
}

.dp-user-profile-meta strong {
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.dp-user-profile-panel {
    overflow: hidden;
}

.dp-user-profile-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dp-border-soft);
    background: var(--dp-surface-header);
}

.dp-user-profile-panel-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dp-user-profile-panel-head h2 i {
    color: var(--dp-accent-color);
}

.dp-user-profile-panel-head .dp-ui-secondary-btn {
    flex: 0 0 auto;
}

.dp-user-profile-form {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 16px;
}

.dp-user-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dp-user-profile-form-grid label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.dp-user-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.dp-user-profile-actions > span {
    margin-right: auto;
    color: var(--dp-text-secondary);
    font-size: .8rem;
}

.dp-user-profile-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
}

.dp-user-profile-list a,
.dp-user-profile-course-code,
.dp-user-profile-state {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid rgba(var(--dp-accent-rgb), .34);
    border-radius: 7px;
    background: rgba(var(--dp-accent-rgb), .12);
    color: #e9fffb;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
}

.dp-user-profile-list a:hover {
    border-color: rgba(var(--dp-accent-rgb), .55);
    background: rgba(var(--dp-accent-rgb), .16);
    color: #fff;
}

.dp-user-profile-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 126px;
    padding: 20px;
    color: var(--dp-text-secondary);
    text-align: center;
}

.dp-user-profile-empty i {
    color: var(--dp-accent-color);
    font-size: 1.2rem;
}

.dp-user-profile-table-wrap {
    margin: 16px;
    overflow-x: auto;
}

.dp-user-profile-jobs-table td strong,
.dp-user-profile-jobs-table td small {
    display: block;
}

.dp-user-profile-jobs-table td small {
    margin-top: 3px;
    color: var(--dp-text-secondary);
    font-size: .75rem;
}

.dp-user-profile-course-code {
    margin: 0 8px 0 0;
}

.dp-user-profile-state.is-overdue {
    border-color: rgba(var(--dp-danger-rgb), .48);
    background: rgba(var(--dp-danger-rgb), .12);
    color: #ffb8c4;
}

.dp-user-profile-state.is-done {
    border-color: rgba(174, 178, 184, .24);
    background: rgba(174, 178, 184, .08);
    color: var(--dp-text-secondary);
}

.dp-user-profile-notice {
    padding: 12px 14px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
    color: var(--dp-text-primary);
    font-size: .85rem;
    font-weight: 800;
}

.dp-user-profile-notice.is-success {
    border-color: rgba(var(--dp-accent-rgb), .38);
    background: rgba(var(--dp-accent-rgb), .12);
    color: #e9fffb;
}

.dp-user-profile-notice.is-error {
    border-color: rgba(var(--dp-danger-rgb), .38);
    background: rgba(var(--dp-danger-rgb), .12);
    color: #ffb8c4;
}

.dp-user-profile-password-modal .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.dp-user-profile-password-modal .modal-title i {
    color: var(--dp-accent-color);
}

.dp-user-profile-password-modal .modal-dialog {
    max-width: 560px;
}

.dp-user-profile-password-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
    color: var(--dp-text-primary);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}

.dp-user-profile-password-modal .modal-header,
.dp-user-profile-password-modal .modal-footer {
    border-color: var(--dp-border-soft);
    background: var(--dp-surface-header);
}

.dp-user-profile-password-modal .modal-header {
    align-items: center;
    min-height: 58px;
    padding: 14px 18px;
}

.dp-user-profile-password-modal .modal-header .close {
    color: var(--dp-text-primary);
    text-shadow: none;
}

.dp-user-profile-password-modal .modal-body {
    padding: 18px;
    background: var(--dp-netgrid-surface);
}

.dp-user-profile-password-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
}

.dp-user-profile-password-modal .modal-footer .dp2-btn + .dp2-btn {
    margin-left: 0;
}

.dp-user-profile-password-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.dp-user-profile-password-grid label:last-child {
    max-width: 100%;
}

.dp-password-strength {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: rgba(8, 11, 13, .42);
}

.dp-password-strength-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--dp-text-secondary);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dp-password-strength-head strong {
    color: #ffd88a;
    font-size: .78rem;
}

.dp-password-strength-head strong.is-strong {
    color: var(--dp-accent-color);
}

.dp-password-strength-bar {
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: rgba(174, 178, 184, .16);
}

.dp-password-strength-bar span {
    display: block;
    width: 10%;
    height: 100%;
    border-radius: inherit;
    background: #ffd88a;
    transition: width .18s ease, background .18s ease;
}

.dp-password-strength-bar span.is-strong {
    background: var(--dp-accent-color);
}

.dp-password-requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-top: 12px;
}

.dp-password-requirements span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--dp-text-secondary);
    font-size: .8rem;
    font-weight: 700;
}

.dp-password-requirements i {
    width: 13px;
    color: rgba(174, 178, 184, .45);
    font-size: .64rem;
    text-align: center;
}

.dp-password-requirements span.is-valid {
    color: var(--dp-text-primary);
}

.dp-password-requirements span.is-valid i {
    color: var(--dp-accent-color);
}

.dp-user-profile-password-modal [data-password-submit]:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.dp-user-profile-password-hint {
    margin: 12px 0 0;
    color: var(--dp-text-secondary);
    font-size: .85rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .dp-user-profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dp-user-profile-form-grid {
        grid-template-columns: 1fr;
    }

    .dp-user-profile-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-user-profile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dp-user-profile-actions > span {
        margin-right: 0;
    }
}

.dp-vacation-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid rgba(174, 178, 184, .22);
    border-radius: 999px;
    background: rgba(17, 22, 26, .72);
    color: rgba(var(--dp-text-primary-rgb), .86);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.dp-vacation-badge.is-open {
    border-color: rgba(var(--dp-warning-rgb), .38);
    background: rgba(var(--dp-warning-rgb), .14);
    color: #ffd88a;
}

.dp-vacation-badge.is-approved {
    border-color: rgba(var(--dp-accent-rgb), .42);
    background: rgba(var(--dp-accent-rgb), .13);
    color: #e9fffb;
}

.dp-vacation-badge.is-denied {
    border-color: rgba(var(--dp-danger-rgb), .42);
    background: rgba(var(--dp-danger-rgb), .13);
    color: #ffb8c4;
}

.dp-vacation-badge.is-type,
.dp-vacation-badge.is-muted {
    border-color: var(--dp-border-soft);
    background: rgba(17, 22, 26, .72);
    color: var(--dp-text-primary);
}

.dp-vacation-badge.is-warning {
    border-color: rgba(var(--dp-warning-rgb), .34);
    background: rgba(var(--dp-warning-rgb), .12);
    color: #ffd88a;
}

.dp-vacation-daygroup,
.dp-vacation-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.dp-vacation-daygroup {
    max-width: 340px;
}

.dp-vacation-row-actions {
    justify-content: flex-end;
    min-width: 82px;
}

.dp-vacation-row-actions form {
    margin: 0;
}

.dp-vacation-row-actions .dp2-btn {
    width: 34px;
    min-width: 34px;
    padding: 0 !important;
}

.dp-vacation-person-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--dp-text-primary);
    font-weight: 800;
    text-decoration: none;
}

.dp-vacation-person-link:hover {
    color: #fff;
    text-decoration: none;
}

.dp-vacation-reason {
    display: block;
    margin-top: 7px;
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.dp-client-search-shell {
    width: 100%;
}

.dp-client-search-page {
    --dp-client-search-content-width: min(100%, 1120px);
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
}

.dp-client-search-page .dp-ui-page-head {
    width: var(--dp-client-search-content-width);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 8px 0 0;
}

.dp-client-search-page .dp-ui-page-head h1 {
    margin: 0;
    color: #f4f7f8;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-client-search-line {
    width: var(--dp-client-search-content-width);
}

.dp-client-search-control {
    position: relative;
    display: flex;
    align-items: center;
}

.dp-client-search-control i {
    position: absolute;
    left: 14px;
    z-index: 1;
    color: var(--dp-accent-color);
    pointer-events: none;
}

.dp-client-search-control input.form-control {
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
    background-color: var(--dp-surface-color);
    color: var(--dp-text-primary);
    font-size: .95rem;
    font-weight: 700;
    box-shadow: none;
}

.dp-client-search-control input.form-control::placeholder {
    color: var(--dp-text-secondary);
    font-weight: 700;
}

.dp-client-search-control input.form-control:focus {
    border-color: rgba(var(--dp-accent-rgb), .45);
    background: var(--dp-surface-color);
    background-color: var(--dp-surface-color);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--dp-accent-rgb), .12);
}

.dp-client-recent-panel {
    width: var(--dp-client-search-content-width);
    overflow: hidden;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
    box-shadow: none;
}

.dp-client-recent-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 0;
}

.dp-client-recent-title {
    margin: 2px 0 0;
    color: #f4f7f8;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-client-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 360px));
    gap: 10px;
    padding: 16px 18px 18px;
}

.dp-client-recent-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-height: 86px;
    padding: 12px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-raised);
    color: #e8eef2;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.dp-client-recent-card:hover {
    border-color: rgba(var(--dp-accent-rgb), .45);
    background: var(--dp-surface-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.dp-client-recent-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--dp-accent-rgb), .45);
    border-radius: 999px;
    background: rgba(var(--dp-accent-rgb), .20);
    color: var(--dp-accent-color);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.dp-client-recent-name {
    display: block;
    overflow: hidden;
    color: #f4f7f8;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-client-recent-meta {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--dp-text-secondary);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-client-recent-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.dp-client-recent-badge {
    min-width: 0;
    overflow: hidden;
    padding: 4px 7px;
    border: 1px solid rgba(var(--dp-accent-rgb), .54);
    border-radius: 5px;
    background: rgba(var(--dp-accent-rgb), .28);
    color: #f4f7f8;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-client-recent-time {
    flex: 0 0 auto;
    color: #8ea0ad;
    font-size: .75rem;
}

.dp-client-recent-empty {
    margin: 16px 18px 18px;
    padding: 18px;
    border: 1px dashed rgba(174, 178, 184, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    color: var(--dp-text-secondary);
}

.dp-client-registrations[data-active-tab="overview"] [data-registration-panel]:not([data-registration-panel="overview"]),
.dp-client-registrations[data-active-tab="checks"] [data-registration-panel]:not([data-registration-panel="checks"]),
.dp-client-registrations[data-active-tab="archive"] [data-registration-panel]:not([data-registration-panel="archive"]),
.dp-private-lessons-page[data-pl-active-tab="requests"] #card_lessons,
.dp-private-lessons-page[data-pl-active-tab="lessons"] #card_requests {
    display: none !important;
}

.dp-private-lessons-page[data-pl-active-tab="lessons"] > .dp-private-lessons-page-head,
.dp-private-lessons-page[data-pl-active-tab="lessons"] > .dp-private-lessons-stats {
    display: none !important;
}

.dp-registration-placeholder {
    padding: 18px;
    border: 1px dashed rgba(174, 178, 184, .26);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: var(--dp-text-secondary);
}

.dp-status,
.dp2-badge,
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 22px;
    padding: 4px 8px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 999px;
    background: rgba(17, 22, 26, .72);
    color: rgba(var(--dp-text-primary-rgb), .86);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.dp-status.review_required,
.badge-warning {
    border-color: rgba(var(--dp-warning-rgb), .38);
    background: rgba(var(--dp-warning-rgb), .14);
    color: #ffd88a;
}

.dp-status.booked,
.dp-status.paid,
.badge-success {
    border-color: rgba(var(--dp-accent-rgb), .42);
    background: rgba(var(--dp-accent-rgb), .13);
    color: #e9fffb;
}

.badge-danger,
.badge.badge-danger {
    border-color: rgba(var(--dp-danger-rgb), .42);
    background: rgba(var(--dp-danger-rgb), .13);
    color: #ffb8c4;
}

.badge-dark,
.badge-secondary {
    border-color: var(--dp-border-soft);
    background: rgba(17, 22, 26, .72);
    color: var(--dp-text-primary);
}

.dp-private-lessons-page {
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
}

.dp-private-lessons-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.dp-private-panel {
    overflow: hidden;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
    box-shadow: none;
}

.dp-private-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dp-border-soft);
}

.dp-private-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--dp-text-primary);
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-private-panel-body {
    padding: 16px 18px 18px;
}

.dp-private-table-wrap {
    overflow: visible;
}

.dp-private-lessons-all-root {
    display: grid;
    gap: 18px;
}

.dp-private-lessons-lessons-head {
    margin: 0;
}

.dp-private-lessons-table-wrap {
    margin-top: 0;
}

.dp-private-lessons-table td:last-child {
    white-space: nowrap;
}

.dp-private-lessons-table td:last-child .dp2-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
}

.dp-lockeddates-page {
    width: 100%;
    max-width: none;
    color: var(--dp-text-primary);
}

.dp-lockeddates-page .dp-ui-page-head {
    margin-bottom: 22px;
}

.dp-lockeddates-table-wrap {
    margin-top: 0;
}

.dp-lockeddates-table td:last-child {
    white-space: nowrap;
}

.dp-lockeddates-table .appform-actions,
.dp-templates-table .appform-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.dp-lockeddates-table .btn-table,
.dp-templates-table .btn-table {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
}

.dp-private-lessons-page .netgrid-table tbody tr.dp2-lesson-past-open td {
    background: rgba(var(--dp-danger-rgb), .16) !important;
}

.dp-private-lessons-page .netgrid-table tbody tr.dp2-lesson-past-open td:first-child {
    box-shadow: inset 4px 0 0 var(--dp-danger-color);
}

.dp-calendar-page {
    --dp-cal-line: var(--dp-border-soft);
    --dp-cal-line-strong: rgba(174, 178, 184, .26);
    --dp-cal-panel: var(--dp-surface-color);
    --dp-cal-cell: rgba(16, 18, 20, .58);
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
    margin-bottom: 18px;
}

.dp-calendar-page-head {
    margin: 8px 0 0;
}

.dp-calendar-page-subtitle {
    margin-top: 4px;
    color: var(--dp-text-secondary);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.25;
}

.dp-calendar-subscribe-panel {
    position: relative;
}

.dp-calendar-subscribe-panel summary {
    list-style: none;
    cursor: pointer;
}

.dp-calendar-subscribe-panel summary::-webkit-details-marker {
    display: none;
}

.dp-calendar-subscribe-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    width: min(760px, calc(100vw - 32px));
    max-height: min(72vh, 680px);
    overflow: auto;
    padding: 14px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: rgba(18, 22, 26, .98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}

.dp-calendar-subscribe-section + .dp-calendar-subscribe-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dp-border-soft);
}

.dp-calendar-subscribe-section h2 {
    margin: 0 0 10px;
    color: var(--dp-text-primary);
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: 0;
}

.dp-calendar-subscribe-row {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(220px, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}

.dp-calendar-subscribe-row + .dp-calendar-subscribe-row {
    border-top: 1px solid rgba(174, 178, 184, .12);
}

.dp-calendar-subscribe-row-label {
    min-width: 0;
    color: var(--dp-text-primary);
    font-size: .84rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.dp-calendar-subscribe-url.form-control {
    font-family: Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
}

.dp-calendar-subscribe-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 760px) {
    .dp-calendar-subscribe-menu {
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 96px);
    }

    .dp-calendar-subscribe-row {
        grid-template-columns: 1fr;
    }

    .dp-calendar-subscribe-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.dp-calendar-filter-form.dp-ui-filter-bar {
    align-items: end;
    grid-template-columns: repeat(5, minmax(150px, 1fr)) auto;
}

.dp-calendar-filter-form label {
    min-width: 0;
}

.dp-calendar-filter-form .bootstrap-select,
.dp-calendar-filter-form select,
.dp-calendar-filter-form #calendar-search {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.dp-calendar-filter-form .bootstrap-select {
    position: relative !important;
    z-index: 1;
}

.dp-calendar-filter-form .bootstrap-select.open {
    z-index: 20;
}

.dp-calendar-page .form-control,
.dp-calendar-page .bootstrap-select > .dropdown-toggle {
    width: 100% !important;
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(174, 178, 184, .2) !important;
    background: rgba(16, 18, 20, .58) !important;
    color: var(--dp-text-primary) !important;
    box-shadow: none !important;
    font-size: .85rem;
    font-weight: 700;
}

.dp-calendar-page .form-control:focus {
    border-color: rgba(174, 178, 184, .32) !important;
    box-shadow: 0 0 0 3px rgba(var(--dp-accent-rgb), .12) !important;
}

#calendar-search {
    position: relative;
    z-index: 5;
}

.dp-calendar-filter-actions {
    align-self: end;
}

#reset-filters-btn.dp-ui-ghost-btn {
    min-height: 38px;
}

#calendar {
    overflow: hidden;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-color);
    box-shadow: none;
    margin-bottom: 28px;
}

#calendar.dp-calendar-range-loading {
    position: relative;
}

#calendar.dp-calendar-range-loading::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 18px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--dp-accent-rgb), .18);
    border-top-color: var(--dp-accent-color);
    border-radius: 50%;
    animation: dpCalendarRangeSpin .7s linear infinite;
    z-index: 30;
}

@keyframes dpCalendarRangeSpin {
    to { transform: rotate(360deg); }
}

.dp-calendar {
    font-family: Arial, sans-serif;
    width: 100%;
    background: transparent;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: var(--dp-text-primary);
}

.dp-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid var(--dp-border-soft);
}

/* Neue Container für die Header-Elemente */
.dp-header-left {
    display: flex; /* Stellt sicher, dass der Titel-Container sich gut in die Flexbox einfügt */
    align-items: center;
    flex-shrink: 0; /* Verhindert, dass der linke Teil schrumpft */
}

.dp-header-center {
    display: flex;
    justify-content: center; /* Zentriert die Pfeile horizontal */
    align-items: center; /* Zentriert die Pfeile vertikal */
    flex-grow: 1; /* Nimmt den verfügbaren Platz in der Mitte ein */
}

.dp-header-right {
    display: flex; /* Ordnet "Heute"-Button-Gruppe und Ansichts-Buttons nebeneinander an */
    align-items: center; /* Zentriert sie vertikal */
    gap: 15px; /* Abstand zwischen "Heute"-Gruppe und Ansichts-Button-Gruppe */
    flex-shrink: 0; /* Verhindert, dass der rechte Teil schrumpft */
}

.dp-calendar-nav {
    display: flex;
    gap: 10px;
}

.dp-calendar-title h2 {
    margin: 0;
    font-size: 1.2em;
    color: var(--dp-text-primary);
    text-align: left; /* Titel linksbündig */
}

.dp-calendar-views {
    display: flex;
    gap: 5px;
}

.dp-view-btn {
    background: var(--dp-border-soft);
    border: none;
    color: var(--dp-text-primary);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
}

.dp-view-btn:hover {
    background: var(--dp-text-secondary);
}

.dp-view-btn.active {
    background: var(--dp-accent-color);
}

.dp-prev,
.dp-next {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--dp-text-secondary);
    padding: 5px 10px;
}

.dp-prev:hover,
.dp-next:hover {
    color: var(--dp-text-primary);
}

/* Monatsansicht */
.dp-month-view {
    padding: 10px;
}

.dp-month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--dp-border-soft);
    border: 1px solid var(--dp-border-soft);
}

.dp-month-day-header {
    background: rgba(16, 18, 20, .58);
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: var(--dp-text-secondary);
}

.dp-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--dp-border-soft);
    border: 1px solid var(--dp-border-soft);
}

.dp-month-day {
    background: rgba(16, 18, 20, .58);
    min-height: 120px;
    padding: 5px;
    position: relative;
}

.dp-month-day.other-month {
    background: rgba(20, 24, 27, .74);
    color: var(--dp-text-secondary);
}

.dp-month-day.today {
    background: rgba(var(--dp-accent-rgb), .13);
}

.dp-month-day-number {
    font-size: 0.9em;
    color: var(--dp-text-secondary);
    margin-bottom: 5px;
}

.dp-month-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dp-month-day .dp-event {
    font-size: 0.8em;
    padding: 2px 4px;
    margin-bottom: 2px;
}

.dp-month-day .dp-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-month-more {
    font-size: 0.8em;
    color: var(--dp-text-secondary);
    text-align: center;
    padding: 2px;
    cursor: pointer;
}

/* Tagesansicht */
.dp-day-view {
    padding: 10px;
}

.dp-day-header {
    background: rgba(16, 18, 20, .58);
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.dp-day-title {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--dp-text-primary);
}

.dp-day-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--dp-border-soft);
    border: 1px solid var(--dp-border-soft);
}

.dp-day-content .dp-time-slot {
    background: rgba(16, 18, 20, .58);
    border: none;
}

.dp-day-content .dp-time-slot-content {
    min-height: 100px;
}

/* Wochenansicht */
.dp-week-view {
    display: flex;
    flex-direction: column;
}

.dp-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: transparent;
    border: 1px solid var(--dp-border-soft);
    margin-bottom: 1px;
}

.dp-week-day-header {
    background: rgba(16, 18, 20, .58);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    text-align: center;
    font-weight: bold;
    color: var(--dp-text-primary);
    border-bottom: 1px solid var(--dp-border-soft);
}

.dp-week-day-header.today {
    background-color: rgba(var(--dp-accent-rgb), .13);
    font-weight: bold;
    color: var(--dp-text-primary);
}

.dp-time-slots {
    display: flex;
    flex-direction: column;
}

.dp-time-slot {
    border-bottom: 1px solid var(--dp-border-soft);
}

.dp-time-slot:last-child {
    border-bottom: none;
}

.dp-time-slot-header {
    background: transparent;
    padding: 2px 10px;
    font-weight: bold;
    color: var(--dp-text-secondary);
    border-bottom: 1px solid var(--dp-border-soft);
}

.dp-time-slot-content {
    display: flex;
    min-height: 150px;
}

.dp-day-column {
    flex: 1;
    border-right: 1px solid var(--dp-border-soft);
    padding: 10px;
}

.dp-day-column:last-child {
    border-right: none;
}

.dp-day-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.dp-event {
    padding: 7px 7px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    border-left: 3px solid;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 5px;
}

.dp-event:hover {
    transform: translateX(2px);
}

.dp-event-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 0;
    font-size: 0.9em;
    gap: 6px;
    min-width: 0;
}

.dp-event-left-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dp-event-header-top-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    min-height: 19px;
}

.dp-event-course-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.dp-event-badges-right {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 3px;
    margin-left: auto;
    max-width: 44%;
}

.dp-event-time {
    color: var(--dp-text-primary);
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
}

.dp-event-studio {
    color: var(--dp-text-secondary);
    font-size: 0.9em;
}

.dp-event-title {
    color: var(--dp-text-primary);
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2;
}

.dp-event-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding-top: 0;
    gap: 6px;
    min-width: 0;
}

.dp-event-workers {
    font-size: 0.8em;
    color: var(--dp-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dp-event-worker {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dp-event-worker i {
    font-size: 0.9em;
    color: var(--dp-text-secondary);
}

.dp-no-events {
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    margin: 20px 0;
}

.dp-no-events-message {
    color: var(--dp-text-secondary);
    font-size: 1.1em;
}

.dp-no-events-message i {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
}

.dp-event-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-event-date {
    font-size: 0.9em;
    color: var(--dp-text-secondary);
    font-weight: bold;
    display: none;
}

/* Jahresansicht */
.dp-year-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    align-items: stretch;
}

.dp-year-month {
    background: rgba(16, 18, 20, .58);
    border-radius: 4px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    height: 420px;
    min-height: 420px;
    position: relative;
}

.dp-year-month-header {
    background: rgba(20, 24, 27, .74);
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: var(--dp-text-primary);
    border-bottom: 1px solid var(--dp-border-soft);
}

.dp-year-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 1px;
    background: var(--dp-border-soft);
    padding: 5px;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.dp-year-day {
    background: rgba(16, 18, 20, .58);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    padding: 4px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dp-year-day:hover {
    background-color: rgba(var(--dp-accent-rgb), .10);
}

.dp-year-day.expanded {
    background-color: rgba(20, 24, 27, .74);
    overflow: visible;
    z-index: 200;
    position: relative;
}

.dp-year-day-number {
    font-size: 0.8em;
    color: var(--dp-text-secondary);
    margin-bottom: 2px;
    font-weight: bold;
}

.dp-year-day-dot {
    width: 4px;
    height: 4px;
    background: var(--dp-accent-color);
    border-radius: 50%;
    margin-top: 2px;
}

.dp-year-eventinfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    background: rgba(44, 62, 80, 0.7);
    border-radius: 3px;
    margin-top: 1px;
    padding: 1px 2px;
    font-size: 0.7em;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.dp-year-day .dp-course-badge,
.dp-year-day .dp-studio-badge {
    font-size: 0.7em;
    margin: 0 2px 0 0;
    padding: 1px 4px;
    border-radius: 3px;
    max-width: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-year-day .dp-event-time {
    color: var(--dp-text-secondary);
    font-size: 0.7em;
    margin: 0 2px;
}

/* Tagesansicht */
.dp-day-view {
    padding: 20px;
}

.dp-day-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    padding: 20px;
}

/* Monatsansicht */
.dp-month-controls {
    padding: 10px;
    text-align: right;
}

.dp-expand-all {
    background: var(--dp-border-soft);
    border: none;
    color: var(--dp-text-primary);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.dp-expand-all:hover {
    background: var(--dp-text-secondary);
}

.dp-event-unit {
    background: var(--dp-border-soft);
    color: var(--dp-text-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 5px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dp-year-view {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dp-year-view {
        grid-template-columns: 1fr;
    }

    .dp-day-events-grid {
        grid-template-columns: 1fr;
    }

    .dp-calendar-header {
        flex-direction: column;
        gap: 10px;
    }

    .dp-calendar-views {
        width: 100%;
        justify-content: center;
    }

    .dp-time-slot-content {
        flex-direction: column;
    }
    
    .dp-day-column {
        border-right: none;
        border-bottom: 1px solid var(--dp-border-soft);
        padding: 5px;
    }
    
    .dp-day-column:last-child {
        border-bottom: none;
    }

    .dp-month-day {
        min-height: 80px;
    }

    .dp-week-header {
        display: none;
    }

    .dp-event-date {
        display: block;
    }

    .dp-event {
        margin-bottom: 8px;
    }
}

.dp-event-workers-row {
    flex-direction: row !important;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.dp-location-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-text-secondary);
    color: var(--dp-text-primary);
    border-radius: 5px;
    padding: 0 6px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    min-height: 18px;
    margin-left: 0;
    margin-right: 0;
    cursor: pointer;
    vertical-align: middle;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-location-badge.float-right {
    float: right;
    margin-left: 8px;
}

.dp-year-eventinfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    background: rgba(44, 62, 80, 0.7);
    border-radius: 3px;
    margin-top: 2px;
    padding: 2px 4px;
    font-size: 0.75em;
    min-width: 0;
}
.dp-year-day .dp-course-badge,
.dp-year-day .dp-event-unit,
.dp-year-day .dp-studio-badge,
.dp-year-day .dp-location-badge,
.dp-year-day .dp-location-badge-preview {
    font-size: 0.75em;
    margin: 0 2px 0 0;
    padding: 1px 5px;
    border-radius: 0.25rem;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dp-year-day .dp-event-time {
    color: var(--dp-text-secondary);
    font-size: 0.75em;
    margin: 0 2px;
}
.dp-year-day .dp-event-workers {
    font-size: 0.75em;
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    gap: 2px;
}

.dp-year-day-events-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.dp-year-eventinfo-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(52, 58, 64, 0.7);
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.7em;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.dp-year-eventinfo-preview .dp-event-time {
    color: var(--dp-text-secondary);
    font-size: 0.95em;
    font-weight: bold;
}

.dp-year-preview-location {
    color: #c1c9d2;
    font-size: 0.9em;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 15px;
}

.dp-year-eventinfo-preview .dp-course-badge {
    font-size: 0.9em;
    padding: 1px 5px;
    max-width: 50px;
}

.dp-year-more-events {
    font-size: 0.7em;
    color: var(--dp-text-secondary);
    text-align: center;
    background: var(--dp-border-soft);
    padding: 1px;
    border-radius: 3px;
    margin-top: 2px;
}

.dp-year-day-events-expanded {
    position: absolute;
    top: 0;
    left: 100%;
    width: auto;
    min-width: 280px;
    max-width: 350px;
    background: #1e2125;
    border: 1px solid var(--dp-border-soft);
    border-radius: 4px;
    padding: 10px;
    z-index: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    max-height: 90vh;
    overflow-y: auto;
}

.dp-year-day.expanded .dp-year-day-events-preview .dp-year-more-events {
    background-color: var(--dp-accent-color);
    color: var(--dp-text-primary);
}

.dp-year-day-events-expanded .dp-event {
    margin-bottom: 5px;
    font-size: 0.85em;
}

.dp-year-day-events-expanded .dp-event-header {
    font-size: 0.9em;
}

.dp-year-day-events-expanded .dp-event-title {
    font-size: 1em;
}

.dp-year-eventinfo-preview .dp-year-preview-coursecode {
    color: var(--dp-text-primary);
    font-size: 0.9em;
    font-weight: normal;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 3px;
}

.dp-location-badge-preview {
    display: inline-block;
    border-radius: 0.35rem;
    padding: 1px 5px;
    font-size: 0.9em;
    max-width: 50px;
}

.dp-location-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-text-secondary);
    color: var(--dp-text-primary);
    border-radius: 5px;
    padding: 0 6px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    min-height: 18px;
    margin-left: 0;
    cursor: pointer;
    vertical-align: middle;
}

.dp-year-eventinfo-preview .dp-course-badge {
    font-size: 0.9em;
    padding: 1px 5px;
    max-width: 50px;
}

/* Adjust positioning if it would go off-screen to the right */
.dp-year-day.expanded.position-left .dp-year-day-events-expanded {
    left: auto;
    right: 100%;
}

.dp-today-btn {
    background-color: var(--dp-text-secondary); /* Leicht andere Farbe als die Standard-View-Buttons */
    border: 1px solid #8a939b; /* Optional: Leichter Rand zur Abhebung */
    margin-right: 15px; /* Abstand zu den Ansicht-Buttons */
}

.dp-today-btn:hover {
    background-color: #5a6268;
}

.dp-kw-badge {
    background-color: var(--dp-accent-color); /* Bootstrap primary blue, or any color you prefer */
    color: white;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.75em;
    margin-left: 8px; /* Abstand zum restlichen Datumstext */
    display: inline-block; /* Stellt sicher, dass Padding und Margin korrekt angewendet werden */
}

.dp-event-worker-item {
    display: flex;
    align-items: center;
    gap: 5px; /* Abstand zwischen Icon und Text */
    font-size: 0.9em; /* Ggf. Schriftgröße anpassen */
}

/* Allgemeine Badge Styles */
.dp-course-badge,
.dp-studio-badge,
.dp-location-badge,
.dp-event-unit,
.dp-kw-badge,
.dp-location-badge-preview {
    display: inline-block;
    padding: 0.3em 0.6em; /* Leicht erhöhtes Padding für bessere Optik mit Rundung */
    font-size: 0.78rem;   /* Leicht angepasste Schriftgröße */
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem; /* Deutlich abgerundet, Bootstrap 5 ähnlich "rounded-pill" wäre 50rem oder 50% */
    /* Farben werden weiterhin individuell pro Badge-Typ oder Event-Logik gesetzt */
}

/* Bestehende spezifische Styles für .dp-year-day Badges (kleiner) */
.dp-year-day .dp-course-badge,
.dp-year-day .dp-event-unit,
.dp-year-day .dp-studio-badge,
.dp-year-day .dp-location-badge,
.dp-year-day .dp-location-badge-preview { 
    font-size: 0.7rem; 
    padding: 0.2em 0.45em; /* Padding für kleinere Badges angepasst */
    border-radius: 0.25rem; /* Etwas weniger Rundung für sehr kleine Badges */
    /* max-width etc. bleiben erhalten */
}

/* ... restlicher CSS Code ... */ 

.dp-course-badge,
.dp-studio-badge,
.dp-location-badge,
.dp-event-unit,
.dp-kw-badge,
.dp-location-badge-preview {
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 5px;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
}

.dp-year-day .dp-course-badge,
.dp-year-day .dp-event-unit,
.dp-year-day .dp-studio-badge,
.dp-year-day .dp-location-badge,
.dp-year-day .dp-location-badge-preview {
    min-height: 16px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: .7rem;
}

.dp-event-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 0.8em;
    padding: 0;
    margin-top: 0;
    color: var(--dp-text-primary);
}

.dp-participant-info {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    min-height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
}

.dp-utilization-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-weight: 500;
    line-height: 1;
    background-color: rgba(0, 0, 0, 0.2);
}

.dp-utilization-badge .fa-triangle-exclamation {
    color: #ffc107; /* Warning yellow */
}

/* Utilization Colors */
.utilization-full { color: #28a745; } /* Green */
.utilization-good { color: #54b86d; } /* Lighter Green */
.utilization-okay { color: #ffc107; } /* Yellow */
.utilization-bad { color: #fd7e14; } /* Orange */
.utilization-critical { color: #dc3545; } /* Red */

.dp-month-day .dp-event-stats {
    justify-content: flex-end;
    font-size: 0.9em;
    margin-top: 2px;
}

.dp-month-day .dp-participant-info {
    background-color: transparent;
    padding: 0;
} 

.dp-calendar {
    font-family: Inter, sans-serif;
    background: var(--dp-surface-color);
    box-shadow: none;
}

.dp-calendar-header,
.dp-month-header,
.dp-month-grid,
.dp-week-header,
.dp-week-grid,
.dp-day-content,
.dp-year-month-grid {
    border-color: var(--dp-cal-line) !important;
    background: rgba(174, 178, 184, .08) !important;
}

.dp-calendar-header {
    padding: 16px 18px;
    background: var(--dp-surface-color) !important;
}

.dp-week-header {
    background: var(--dp-surface-color) !important;
}

.dp-date-display-btn {
    padding: 0;
    border: 0;
    background: transparent !important;
    color: var(--dp-text-primary);
    font-size: 1rem;
    font-weight: 900;
}

.dp-date-display-btn:hover {
    background: transparent !important;
    color: var(--dp-text-primary);
}

.dp-view-btn,
.dp-prev,
.dp-next,
.dp-expand-all {
    min-height: 36px;
    border: 1px solid rgba(174, 178, 184, .2);
    border-radius: 8px;
    background: rgba(16, 18, 20, .58);
    color: var(--dp-text-primary);
    font-weight: 800;
    box-shadow: none;
}

.dp-prev,
.dp-next {
    width: 38px;
    padding: 0;
}

.dp-view-btn:hover,
.dp-prev:hover,
.dp-next:hover,
.dp-expand-all:hover {
    border-color: rgba(var(--dp-accent-rgb), .42);
    background: rgba(var(--dp-accent-rgb), .10);
    color: var(--dp-text-primary);
}

.dp-view-btn.active,
.dp-today-btn {
    border-color: rgba(var(--dp-accent-rgb), .55);
    background: rgba(var(--dp-accent-rgb), .18);
    color: var(--dp-accent-color);
}

.dp-month-day-header,
.dp-week-day-header,
.dp-time-slot-header,
.dp-day-header,
.dp-year-month-header {
    background: var(--dp-surface-color) !important;
    color: var(--dp-text-primary);
}

.dp-month-day,
.dp-day-column,
.dp-time-slot-content,
.dp-year-month,
.dp-year-day {
    background: rgba(16, 18, 20, .58) !important;
}

.dp-month-day.today,
.dp-week-day-header.today,
.dp-year-day.today {
    background: rgba(var(--dp-accent-rgb), .14) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--dp-accent-rgb), .35);
}

.dp-event {
    border-radius: 6px;
    box-shadow: none;
    min-width: 0;
}

.dp-event:hover {
    transform: translateX(2px);
    text-decoration: none;
}

.dp-event-title,
.dp-event-time {
    color: #fff;
    font-weight: 800;
}

.dp-event-workers,
.dp-event-studio,
.dp-month-more,
.dp-year-day-number,
.dp-event-date {
    color: rgba(255, 255, 255, .78);
}

.dp-course-badge,
.dp-studio-badge,
.dp-location-badge,
.dp-event-unit,
.dp-kw-badge,
.dp-location-badge-preview {
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-weight: 800;
    line-height: 1;
}

.dp-month-day .dp-event,
.dp-month-view .dp-event {
    font-size: .78rem;
    padding: 5px;
    margin-bottom: 3px;
    gap: 3px;
}

.dp-month-day .dp-event-title,
.dp-month-view .dp-event-title {
    font-size: .74rem;
    line-height: 1.15;
}

.dp-month-view .dp-event-workers,
.dp-month-day .dp-event-workers,
.dp-month-view .dp-event-unit,
.dp-month-day .dp-event-unit {
    display: none;
}

.dp-year-view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .dp-calendar-filter-form.dp-ui-filter-bar {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 720px) {
    .dp-calendar-filter-form.dp-ui-filter-bar {
        grid-template-columns: 1fr;
    }
}
.dp-worktime-dashboard {
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
}

.dp-worktime-dashboard-head {
    margin: 8px 0 0;
}

.dp-worktime-dashboard-table-wrap {
    margin-top: 0;
    overflow: visible;
}

.dp-worktime-dashboard-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: top;
}

.dp-worktime-user-link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--dp-text-primary);
    text-decoration: none;
}

.dp-worktime-user-link:hover {
    color: #fff;
    text-decoration: none;
}

.dp-worktime-user-link strong {
    color: #fff;
    font-size: .85rem;
    line-height: 1.2;
    white-space: nowrap;
}

.dp-worktime-av-badge.dp2-badge {
    min-height: 32px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 7px;
    line-height: 1.2;
}

.dp-worktime-av-badge b {
    color: #fff;
    font-size: .75rem;
    line-height: 1.2;
}

.dp-worktime-av-badge small {
    color: var(--dp-text-secondary);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.dp-worktime-month-cell {
    min-width: 86px;
}

.dp-worktime-month-stack {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    color: var(--dp-text-primary);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.dp-worktime-month-stack + .dp-worktime-month-stack {
    margin-top: 5px;
}

.dp-worktime-month-stack small {
    color: var(--dp-text-secondary);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
}

.dp-worktime-month-stack span {
    min-width: 34px;
    text-align: right;
}

.dp-worktime-overview-page {
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
}

.dp-worktime-overview-head {
    margin: 8px 0 0;
}

.dp-worktime-employment-cards,
.dp-worktime-past-employments {
    display: grid;
    gap: 16px;
}

.dp-worktime-employment-card {
    overflow: hidden;
}

.dp-worktime-employment-card.is-current {
    border-color: rgba(var(--dp-accent-rgb), .45);
}

.dp-worktime-employment-period {
    display: grid;
    gap: 16px;
}

.dp-worktime-employment-header {
    display: grid;
    gap: 12px;
}

.dp-worktime-employment-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.dp-worktime-employment-title i {
    color: var(--dp-accent-color);
}

.dp-worktime-employment-details,
.dp-worktime-employment-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dp-worktime-employment-badge.dp2-badge,
.dp-worktime-employment-type.dp2-badge,
.dp-worktime-weekday-badge.dp2-badge,
.dp-worktime-summary-badge.dp2-badge {
    min-height: 28px;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.15;
}

.dp-worktime-weekday-badge.is-workday {
    border-color: rgba(var(--dp-accent-rgb), .55);
    background: rgba(var(--dp-accent-rgb), .18);
    color: #d9ffff;
}

.dp-worktime-weekday-badge.is-off {
    opacity: .58;
}

.dp-worktime-summary-badge.dp2-badge {
    gap: 6px;
}

.dp-worktime-employment-summary {
    margin-bottom: 8px;
}

.dp-worktime-summary-badge small {
    color: var(--dp-text-secondary) !important;
    font-size: .72rem;
    font-weight: 800;
}

.dp-worktime-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}

.dp-worktime-month-button.dp2-btn {
    justify-content: center;
    min-height: 36px;
    padding: 8px 10px;
    color: #fff;
}

.dp-worktime-month-button.dp-worktime-month-current {
    border-color: rgba(var(--dp-accent-rgb), .95);
    background: rgba(var(--dp-accent-rgb), .34);
    box-shadow: inset 0 0 0 1px rgba(var(--dp-accent-rgb), .28), 0 0 0 1px rgba(var(--dp-accent-rgb), .18);
    color: #fff;
}

.dp-worktime-month-button.dp-worktime-month-future {
    opacity: .72;
}

.dp-worktime-no-employment {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 18px;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.dp-worktime-no-employment-icon {
    color: var(--dp-accent-color);
    font-size: 1.45rem;
}

.dp-worktime-no-employment-title {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

.dp-worktime-no-employment-text {
    margin: 0;
    color: var(--dp-text-secondary);
    font-size: .86rem;
    line-height: 1.4;
}

.dp-worktime-inline-manage {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--dp-border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.dp-worktime-inline-manage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dp-worktime-inline-manage-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

.dp-worktime-optime-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.dp-worktime-optime-row:last-child {
    border-bottom: 0;
}

.dp-worktime-optime-period {
    display: grid;
    gap: 3px;
}

.dp-worktime-optime-period small {
    color: var(--dp-text-secondary);
    font-size: .75rem;
    font-weight: 800;
}

.dp-worktime-optime-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dp-worktime-vacation-modal .modal-content {
    background: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    color: var(--dp-text-primary);
}

.dp-worktime-vacation-balance,
.dp-worktime-vacation-preview {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--dp-border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.dp-worktime-vacation-balance h6,
.dp-worktime-vacation-preview h6 {
    margin: 0;
    color: #fff;
    font-weight: 900;
}

.dp-worktime-vacation-balance-badge.dp2-badge {
    justify-self: start;
    border-color: rgba(var(--dp-accent-rgb), .55);
    background: rgba(var(--dp-accent-rgb), .18);
    color: #d9ffff;
    font-size: .95rem;
}

.dp-worktime-vacation-preview {
    margin-top: 16px;
}

.dp-worktime-vacation-preview.is-hidden {
    display: none;
}

.dp-worktime-vacation-days {
    padding: 12px;
    border: 1px solid var(--dp-border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, .18);
}

.dp-worktime-manage {
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
}

.dp-worktime-manage-head {
    margin: 8px 0 0;
    grid-template-columns: minmax(220px, 1fr);
    justify-items: start;
}

.dp-worktime-manage-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: -2px;
}

.dp-worktime-manage-nav,
.dp-worktime-manage-close-action {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-worktime-manage-close-action {
    justify-content: center;
    margin-top: 14px;
}

.dp-worktime-manage-period {
    margin-top: 4px;
    color: var(--dp-text-secondary);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.25;
}

.dp-worktime-manage-table-wrap {
    margin-top: 0;
    overflow: visible;
}

.dp-worktime-manage-table {
    table-layout: fixed;
    width: 100%;
}

.dp-worktime-manage-table-wrap .ng-table-right-controls,
.dp-worktime-manage-table-wrap .ng-table-info,
.dp-worktime-manage-table-wrap .ng-table-pagination {
    display: none !important;
}

.dp-worktime-manage-table tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: top;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dp-worktime-manage-table th:nth-child(3),
.dp-worktime-manage-table td:nth-child(3) {
    width: 28%;
    min-width: 0;
}

.dp-worktime-manage-table tfoot td {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dp-worktime-manage-table tr.dp-worktime-row-info td {
    background: rgba(var(--dp-accent-rgb), .18) !important;
}

.dp-worktime-manage-table tr.dp-worktime-row-transition td {
    background: rgba(var(--dp-accent-rgb), .26) !important;
}

.dp-worktime-manage-table tr.dp-worktime-row-summary td {
    background: rgba(var(--dp-accent-rgb), .16) !important;
    border-top: 1px solid rgba(var(--dp-accent-rgb), .38);
    color: var(--dp-text-primary);
}

.dp-worktime-manage-table tr.dp-worktime-row-summary td:first-child {
    box-shadow: inset 4px 0 0 var(--dp-accent-color);
}

.dp-worktime-manage-table tr.dp-worktime-row-muted td {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--dp-text-secondary);
}

.dp-worktime-manage-table tr.dp-worktime-row-holiday td {
    background: rgba(var(--dp-danger-rgb), .16) !important;
}

.dp-worktime-manage-table tr.dp-worktime-row-today td {
    background: rgba(var(--dp-accent-rgb), .14) !important;
    box-shadow: inset 4px 0 0 var(--dp-accent-color);
}

.dp-worktime-manage-table tr.dp-worktime-row-overlap td {
    box-shadow: inset 4px 0 0 var(--dp-danger-color);
}

.dp-worktime-manage-table .dp-worktime-entries {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dp-worktime-manage-table .dp-worktime-entry.dp2-btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

.dp-worktime-manage-table .dp-worktime-entry .dp2-badge {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-worktime-manage-modal .modal-content {
    background: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    color: var(--dp-text-primary);
}

.dp-worktime-manage-modal .modal-header,
.dp-worktime-manage-modal .modal-footer {
    border-color: var(--dp-border-color);
}

.dp-worktime-manage-modal .nav-tabs {
    gap: 6px;
    border-bottom-color: var(--dp-border-color);
}

.dp-worktime-manage-modal .nav-tabs li {
    margin: 0 !important;
}

.dp-worktime-manage-modal .nav-tabs button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--dp-border-color);
    border-radius: 7px 7px 0 0;
    background: rgba(255, 255, 255, .025);
    color: var(--dp-text-primary);
    font-size: .8rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.dp-worktime-manage-modal .nav-tabs li.active button,
.dp-worktime-manage-modal .nav-tabs button.active {
    border-color: rgba(var(--dp-accent-rgb), .55);
    background: rgba(var(--dp-accent-rgb), .16);
    color: #d9ffff;
}

.dp-worktime-manage-modal [data-dp-worktime-panel] {
    display: none;
}

.dp-worktime-manage-modal [data-dp-worktime-panel].is-active {
    display: block;
}

@media (max-width: 767.98px) {
    .dp-worktime-employment-title,
    .dp-worktime-inline-manage-head,
    .dp-worktime-optime-row,
    .dp-worktime-manage-toolbar,
    .dp-worktime-manage-nav {
        align-items: flex-start;
        flex-direction: column;
    }
}

.dp-jobs-my-root {
    display: grid;
    gap: 18px;
    color: var(--dp-text-primary);
}

.dp-jobs-page-head {
    margin: 8px 0 0;
}

.dp-jobs-table-wrap {
    margin-top: 0;
    overflow: visible;
}

.dp-jobs-table tbody tr {
    cursor: pointer;
}

.dp-jobs-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}

.dp-jobs-table .dp-jobs-time strong {
    display: block;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}

.dp-jobs-table .dp-jobs-time small {
    display: block;
    margin-top: 5px;
    color: var(--dp-text-secondary);
    font-size: .76rem;
    line-height: 1.2;
    white-space: nowrap;
}

.dp-jobs-course a {
    width: fit-content;
    max-width: 520px;
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr);
    align-items: center;
    column-gap: 10px;
    color: inherit;
    text-decoration: none;
}

.dp-jobs-course a:hover {
    color: #fff;
    text-decoration: none;
}

.dp-jobs-course-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dp-jobs-course strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: .85rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-jobs-course small {
    display: block;
    color: var(--dp-text-secondary);
    font-size: .75rem;
    line-height: 1.2;
}

.dp-jobs-code {
    min-width: 48px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid rgba(var(--dp-accent-rgb), .38);
    border-radius: 999px;
    background: rgba(var(--dp-accent-rgb), .14);
    color: var(--dp-accent-color);
    font-size: .75rem;
    font-weight: 800;
}

.dp-jobs-location {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #dce7ef;
    font-size: .75rem;
    font-weight: 800;
}

.dp-jobs-workers {
    min-width: 280px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.dp-jobs-worker {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 7px;
    background: rgba(255, 255, 255, .045);
    color: #dce7ef;
    font-size: .75rem;
    text-align: left;
    cursor: pointer;
}

.dp-jobs-worker strong {
    color: #fff;
    font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
}

.dp-jobs-worker small {
    color: var(--dp-text-secondary);
    font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
}

.dp-jobs-worker.is-custom {
    border-color: rgba(var(--dp-warning-rgb), .42);
    background: rgba(var(--dp-warning-rgb), .12);
}

.dp-jobs-worker:hover {
    border-color: rgba(var(--dp-accent-rgb), .42);
    background: rgba(var(--dp-accent-rgb), .09);
}

.dp-jobs-status {
    min-width: 230px;
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    align-items: center;
}

.dp-jobs-status-pill {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 999px;
    color: #dce7ef;
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.dp-jobs-status-pill:hover {
    color: #fff;
    text-decoration: none;
}

.dp-jobs-table .dp-job-check-action {
    border-radius: 7px;
    border-color: rgba(26, 29, 33, 0.36);
    background: rgba(26, 29, 33, 0.12);
    color: #e2fffb;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.dp-jobs-table .dp-job-check-action:hover {
    background: rgba(26, 29, 33, 0.24);
    border-color: rgba(26, 29, 33, 0.55);
    color: #ffffff;
    transform: translateY(-1px);
}

.dp-jobs-status-pill.is-open {
    border-color: var(--dp-border-soft) !important;
    background: rgba(17, 22, 26, .88) !important;
    color: var(--dp-text-primary) !important;
}

.dp-jobs-status-pill-content.is-open,
.dp-jobs-status-pill-content.is-done {
    border-color: var(--dp-border-soft) !important;
    background: rgba(17, 22, 26, .88) !important;
    color: var(--dp-text-primary) !important;
}

.dp-jobs-status-pill.is-done {
    border-color: rgba(var(--dp-accent-rgb), .38);
    background: rgba(var(--dp-accent-rgb), .16);
    color: #8ff4da;
}

.dp-jobs-actions {
    display: flex;
    justify-content: flex-end;
}

.dp-jobs-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dp-border-soft);
    border-radius: 7px;
    background: rgba(255, 255, 255, .055);
    color: #dce7ef;
    text-decoration: none;
}

.dp-jobs-icon-btn:hover {
    border-color: rgba(var(--dp-accent-rgb), .42);
    background: rgba(var(--dp-accent-rgb), .11);
    color: #fff;
    text-decoration: none;
}

.dp-jobs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 34px;
    color: var(--dp-text-secondary);
    text-align: center;
}

.dp-jobs-empty i {
    color: var(--dp-accent-color);
    font-size: 1.5rem;
}

.dp-jobs-empty strong {
    color: #fff;
    font-size: .85rem;
}

@media (max-width: 980px) {
    .dp-jobs-course a {
        max-width: 280px;
    }
}

.dp2-message-open-icon {
    cursor: pointer;
    opacity: .75;
    font-size: .85rem;
}

.dp2-message-open-icon:hover {
    opacity: 1;
}

.dp2-message-body {
    font-size: .85rem;
    line-height: 1.4;
}

.dp-classes-all-root .breadcrumb,
.dp-classes-all-root .appform-options {
    display: none;
}

.dp-classes-all-root.is-loading {
    opacity: .62;
    pointer-events: none;
}

.dp-classes-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: #151a1f;
    color: var(--dp-text-primary);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}

.dp-classes-modal .modal-dialog {
    max-width: min(1480px, calc(100vw - 36px));
}

.dp-classes-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 18px 22px;
    border-bottom-color: var(--dp-border-soft);
    background: var(--dp-surface-header);
}

.dp-classes-modal .modal-title {
    color: var(--dp-text-primary);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
}

.dp-classes-modal .modal-body {
    max-height: calc(100vh - 118px);
    overflow: auto;
    padding: 0;
    background: var(--dp-bg-color);
    scrollbar-color: rgba(174, 178, 184, .45) rgba(8, 11, 13, .9);
    scrollbar-width: thin;
}

.dp-classes-modal .close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dp-ui-radius);
    background: transparent;
    color: var(--dp-text-primary);
    opacity: 1;
    text-shadow: none;
}

.dp-classes-loading {
    padding: 18px;
    color: var(--dp-text-secondary);
}

@media (max-width: 1280px) {
    .dp-ui-filter-bar {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 900px) {
    .dp-client-registrations-grid {
        grid-template-columns: 1fr;
    }

    .dp-client-recent-grid {
        grid-template-columns: 1fr;
    }

    .dp-registration-table {
        display: block;
        overflow: auto;
    }

    .dp-classes-modal .modal-dialog {
        max-width: calc(100vw - 18px);
    }
}

@media (max-width: 760px) {
    .dp-ui-page-head,
    .dp-client-search-page .dp-ui-page-head,
    .dp-private-lessons-page .dp-ui-page-head {
        flex-direction: column;
    }

    .dp-private-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-ui-filter-bar {
        grid-template-columns: 1fr;
    }

    .dp-ui-filter-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.netgrid-table-wrap:has(.ng-table-wrapper) {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.netgrid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    color: var(--dp-text-primary);
    background-color: var(--dp-netgrid-surface);
}

.netgrid-table thead {
    background-color: rgba(16, 18, 20, .58);
}

.netgrid-table th {
    padding: 13px 14px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #b3c7cf;
    border-bottom: 1px solid rgba(174, 178, 184, .2);
    white-space: nowrap;
}

.netgrid-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    color: var(--dp-text-primary);
    vertical-align: middle;
}

.netgrid-table tbody tr:hover {
    background-color: rgba(16, 18, 20, .72);
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb), .42);
}

.netgrid-table tbody tr:nth-child(even) {
    background-color: rgba(255,255,255,.018);
}

.netgrid-table tbody tr:nth-child(even):hover {
    background-color: rgba(16, 18, 20, .72);
}

/* Worktime Manage: Abstand Breadcrumbs → Card */
.dp-worktime-manage.dp2-page > .dp2-card {
    margin-top: 1rem;
}

/* Worktime Manage: Arbeitsaufzeichnungen kompakt + DP2 */
.dp-worktime-entries {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    line-height: 1.2;
}
.dp-worktime-entry {
    padding: 2px 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
}
/* Abgeschlossene Aufzeichnungen: gedämpft, klar von offenen unterscheidbar */
.dp-worktime-entry.dp-worktime-closed {
    opacity: 0.75;
    filter: saturate(0.7);
    border-style: dashed !important;
}
.dp-worktime-entry.dp-worktime-closed::after {
    content: ' \2713';
    font-size: 0.85rem;
    opacity: 0.9;
}
.dp-worktime-entry.dp-worktime-vacation {
    background-color: rgba(var(--dp-success-rgb), 0.2);
    color: var(--dp-success-color);
    border: 1px solid rgba(var(--dp-success-rgb), 0.4);
}
.dp-worktime-entry.dp-worktime-sick {
    background-color: rgba(141, 147, 153, 0.25);
    color: #8d9399;
    border: 1px solid rgba(141, 147, 153, 0.5);
}
.dp-worktime-entry.dp-worktime-compensation {
    background-color: rgba(240, 173, 78, 0.25);
    color: #f0ad4e;
    border: 1px solid rgba(240, 173, 78, 0.5);
}
.dp-worktime-entry.dp-worktime-corr {
    background-color: rgba(var(--dp-danger-rgb), 0.2);
    color: var(--dp-danger-color);
    border: 1px solid rgba(var(--dp-danger-rgb), 0.4);
}
.dp-worktime-entry.dp-worktime-entry-overlap {
    border-color: var(--dp-danger-color, #dc3545);
    box-shadow: 0 0 0 1px var(--dp-danger-color, #dc3545);
}
.dp-worktime-overlap-badge {
    color: var(--dp-danger-color, #dc3545);
    margin-left: 2px;
    font-size: 0.85rem;
}
.dp-worktime-entry.dp-worktime-entry-night {
    border-color: #8d9399;
    box-shadow: 0 0 0 1px #8d9399;
}
.dp-worktime-night-badge {
    color: #8d9399;
    margin-left: 2px;
    font-size: 0.85rem;
}
.dp-worktime-feiertag-icon {
    color: var(--dp-accent-color);
}
.dp-worktime-month-nav.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.dp-worktime-warn {
    font-size: 0.75rem;
    margin-left: 2px;
}

/* Überlappende Dienste an einem Tag – Indikator in der Zelle (überlebt NetGrid-Re-Render) */
.dp-worktime-overlap-indicator {
    color: var(--dp-danger-color, #dc3545);
    margin-left: 4px;
    font-size: 0.85rem;
}
.dp-worktime-manage-table tr.dp-worktime-row-overlap {
    border-left: 4px solid var(--dp-danger-color, #dc3545);
}

/* Worktime Manage: festes Layout damit tfoot-SUMME keine Spaltenverschiebung verursacht */
.dp-worktime-manage-table {
    table-layout: fixed;
    width: 100%;
}
.dp-worktime-manage-table tfoot td {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* DP2 Buttons in Cards (optional, für einheitliche Optik) */
.dp2-card .dp2-btn {
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--dp-border-color);
    background-color: var(--dp-surface-hover);
    color: var(--dp-text-primary);
    transition: background-color 0.2s, border-color 0.2s;
}

.dp2-card .dp2-btn:hover {
    background-color: var(--dp-border-color);
    border-color: var(--dp-text-secondary);
    color: var(--dp-text-primary);
}

.dp2-card .dp2-btn-primary {
    background-color: var(--dp-accent-color);
    border-color: var(--dp-accent-color);
    color: #fff;
}

.dp2-card .dp2-btn-primary:hover {
    background-color: rgba(var(--dp-accent-rgb), 0.85);
    border-color: rgba(var(--dp-accent-rgb), 0.85);
    color: #fff;
}

.dp2-card .dp2-btn-danger {
    border-color: var(--dp-danger-color);
    color: var(--dp-danger-color);
}

.dp2-card .dp2-btn-danger:hover {
    background-color: var(--dp-danger-color);
    color: #fff;
}

.dp2-card .netgrid-table .dp2-btn {
    margin-right: 6px;
}

/* Links als dp2-btn in der Tabelle wie Buttons darstellen */
.dp2-card .netgrid-table a.dp2-btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.dp2-card .netgrid-table .dp2-btn:last-child {
    margin-right: 0;
}

.dp2-card .netgrid-table .dp2-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* DP2 Status-Badges (Anfragen) */
.dp2-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    cursor: default;
    border: 1px solid transparent;
    pointer-events: none;
}

.dp2-badge-new {
    background-color: rgba(var(--dp-accent-rgb), 0.2);
    color: var(--dp-accent-color);
    border: 1px solid rgba(var(--dp-accent-rgb), 0.4);
}

.dp2-badge-neu {
    background-color: rgba(var(--dp-accent-rgb), 0.25);
    color: var(--dp-accent-color);
    border: 1px solid var(--dp-accent-color);
}

.dp2-badge-gelesen {
    background-color: rgba(var(--dp-accent-rgb), 0.2);
    color: var(--dp-accent-color);
    border: 1px solid rgba(var(--dp-accent-rgb), 0.5);
}

.dp2-badge-assigned {
    background-color: rgba(var(--dp-cat-coursesplanning-rgb), 0.2);
    color: var(--dp-cat-coursesplanning-color);
    border: 1px solid rgba(var(--dp-cat-coursesplanning-rgb), 0.4);
}

.dp2-badge-completed {
    background-color: rgba(var(--dp-success-rgb), 0.2);
    color: var(--dp-success-color);
    border: 1px solid rgba(var(--dp-success-rgb), 0.4);
}

.dp2-badge-cancelled {
    background-color: rgba(var(--dp-danger-rgb), 0.2);
    color: var(--dp-danger-color);
    border: 1px solid rgba(var(--dp-danger-rgb), 0.4);
}

.dp2-badge-planned {
    background-color: rgba(240, 173, 78, 0.25);
    color: #f0ad4e;
    border: 1px solid rgba(240, 173, 78, 0.5);
}

.dp2-badge-ended {
    background-color: rgba(108, 117, 125, 0.25);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.5);
}

/* DP2 unified controls: check-in inspired table buttons and badges */
.dp2-btn,
button.dp2-btn,
a.dp2-btn,
.dp2-card .dp2-btn,
.modal.dp2-modal .dp2-btn,
.dp2-page .dp2-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 7px !important;
    border: 1px solid rgba(174,178,184,.2) !important;
    background: rgba(16,18,20,.58) !important;
    color: #dce7ef !important;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.dp2-btn:hover,
button.dp2-btn:hover,
a.dp2-btn:hover,
.dp2-card .dp2-btn:hover,
.modal.dp2-modal .dp2-btn:hover,
.dp2-page .dp2-btn:hover {
    border-color: rgba(174,178,184,.32) !important;
    background: rgba(var(--dp-accent-rgb), .10) !important;
    color: #fff !important;
    text-decoration: none;
}

.dp2-btn-primary,
button.dp2-btn-primary,
a.dp2-btn-primary,
.dp2-card .dp2-btn-primary,
.modal.dp2-modal .dp2-btn-primary,
.dp2-page .dp2-btn-primary {
    border-color: rgba(117,244,220,.42) !important;
    background: rgba(117,244,220,.12) !important;
    color: #75f4dc !important;
}

.dp2-btn-primary:hover,
button.dp2-btn-primary:hover,
a.dp2-btn-primary:hover,
.dp2-card .dp2-btn-primary:hover,
.modal.dp2-modal .dp2-btn-primary:hover,
.dp2-page .dp2-btn-primary:hover {
    border-color: rgba(117,244,220,.56) !important;
    background: rgba(117,244,220,.18) !important;
    color: #a9fff0 !important;
}

.dp2-btn-success,
button.dp2-btn-success,
a.dp2-btn-success {
    border-color: rgba(0,194,143,.34) !important;
    background: rgba(0,194,143,.10) !important;
    color: #00c28f !important;
}

.dp2-btn-success:hover,
button.dp2-btn-success:hover,
a.dp2-btn-success:hover {
    border-color: rgba(0,194,143,.48) !important;
    background: rgba(0,194,143,.16) !important;
    color: #4ff0c8 !important;
}

.dp2-btn-danger,
button.dp2-btn-danger,
a.dp2-btn-danger,
.dp2-card .dp2-btn-danger,
.dp2-page .dp2-btn-danger {
    border-color: rgba(255,77,99,.42) !important;
    background: rgba(255,77,99,.12) !important;
    color: #ff8fa0 !important;
}

.dp2-btn-danger:hover,
button.dp2-btn-danger:hover,
a.dp2-btn-danger:hover,
.dp2-card .dp2-btn-danger:hover,
.dp2-page .dp2-btn-danger:hover {
    border-color: rgba(255,77,99,.56) !important;
    background: rgba(255,77,99,.18) !important;
    color: #ffd6de !important;
}

.netgrid-table .dp2-btn {
    margin: 2px 4px 2px 0;
    vertical-align: middle;
}

.netgrid-table .dp2-btn:last-child {
    margin-right: 0;
}

.dp2-btn:disabled,
button.dp2-btn:disabled,
.netgrid-table .dp2-btn:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.dp2-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(174,178,184,.2);
    background: rgba(16,18,20,.38);
    color: rgba(244,245,246,.82);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

.dp2-badge-new,
.dp2-badge-neu {
    background: rgba(117,244,220,.12);
    color: #75f4dc;
    border-color: rgba(117,244,220,.42);
}

.dp2-badge-gelesen,
.dp2-badge-ended {
    background: rgba(16,18,20,.38);
    color: #9aa8b2;
    border-color: rgba(174,178,184,.2);
}

.dp2-badge-assigned {
    background: rgba(var(--dp-accent-rgb), .10);
    color: #d9e5ea;
    border-color: rgba(var(--dp-accent-rgb), .22);
}

.dp2-badge-completed {
    background: rgba(0,194,143,.10);
    color: #00c28f;
    border-color: rgba(0,194,143,.34);
}

.dp2-badge-cancelled {
    background: rgba(255,77,99,.12);
    color: #ff8fa0;
    border-color: rgba(255,77,99,.42);
}

.dp2-badge-planned {
    background: rgba(242,184,39,.13);
    color: #f2b827;
    border-color: rgba(242,184,39,.32);
}

/* Arbeitszeiten-Dashboard: AV-Block (Anstellungsverhältnis als Badge/Card) */
.dp2-av-block {
    white-space: normal;
    text-align: left;
    padding: 6px 10px;
    margin-right: 8px;
    margin-bottom: 4px;
    min-width: 120px;
    line-height: 1.4;
}

.dp2-link-icon {
    color: var(--dp-accent-color);
    text-decoration: none;
}

.dp2-link-icon:hover {
    color: var(--dp-text-primary);
    text-decoration: underline;
}

.dp2-link-icon i {
    margin-right: 6px;
    opacity: 0.9;
}

/* DP2 Tooltip (data-dp2-tooltip="...") – global */
.dp2-tooltip {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}
.dp2-tooltip i {
    opacity: 0.85;
}
.dp2-tooltip-box {
    position: fixed;
    z-index: 10000020;
    max-width: min(320px, calc(100vw - 16px));
    padding: 9px 12px;
    font-family: var(--dp-font-sans);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
    background: rgba(18, 24, 28, 0.98);
    border: 1px solid rgba(94, 241, 232, 0.22);
    color: var(--dp-text-primary);
    border-radius: var(--dp-ui-radius-sm, 6px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    visibility: hidden;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
.dp2-tooltip-box.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* DP2 Modal – Basis (nur .dp2-modal, kreuzt nicht mit anderen Modals) */
.modal.dp2-modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000000;
}
.modal.dp2-modal.show {
    display: block;
    z-index: 10000000;
}
.modal.dp2-modal .modal-dialog {
    position: relative;
    width: auto;
    max-width: 500px;
    margin: 1.75rem auto;
    pointer-events: none;
}
.modal.dp2-modal .modal-dialog.modal-dp2-lg {
    max-width: 560px;
}
.modal.dp2-modal .modal-dialog.modal-dp2-xl {
    max-width: 900px;
}
.modal.dp2-modal .dp2-modal-body-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}
.modal.dp2-modal .dp2-modal-body-cols .dp2-modal-cols-header {
    grid-column: 1 / -1;
    margin-bottom: 0.25rem;
}
.modal.dp2-modal .dp2-modal-body-cols .dp2-modal-col {
    min-width: 0;
}
.modal.dp2-modal .dp2-modal-col .dp2-form-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* Rundmail-Modal: zwei Spalten klar getrennt */
.modal.dp2-modal .dp2-roundmail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    align-content: start;
}
.modal.dp2-modal .dp2-roundmail-col-left { grid-column: 1; }
.modal.dp2-modal .dp2-roundmail-col-right { grid-column: 2; }
@media (max-width: 768px) {
    .modal.dp2-modal .modal-dialog.modal-dp2-xl {
        max-width: 100%;
        margin: 0.5rem;
    }
    .modal.dp2-modal .dp2-modal-body-cols,
    .modal.dp2-modal .dp2-roundmail-cols {
        grid-template-columns: 1fr;
    }
    .modal.dp2-modal .dp2-roundmail-col-left,
    .modal.dp2-modal .dp2-roundmail-col-right {
        grid-column: 1;
    }
}
.modal.dp2-modal.show .modal-dialog {
    pointer-events: auto;
}

.modal.dp2-modal.dp-classes-modal .modal-dialog.modal-dp2-xl {
    width: min(1320px, calc(100vw - 48px));
    max-width: min(1320px, calc(100vw - 48px));
}

.modal.dp2-modal.dp-classes-modal .modal-content {
    pointer-events: auto;
}

body.dp2-modal-open {
    overflow: hidden;
}

/* DP2 Modals (Bootstrap Modal Overrides im dp2-Kontext) */
.dp2-page .modal-content {
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    color: var(--dp-text-primary);
}

.dp2-page .modal-header {
    border-bottom-color: var(--dp-border-color);
}

.dp2-page .modal-footer {
    border-top-color: var(--dp-border-color);
}

.dp2-page .modal .form-control {
    background-color: var(--dp-surface-hover);
    border-color: var(--dp-border-color);
    color: var(--dp-text-primary);
}

.dp2-page .modal .form-control:focus {
    border-color: var(--dp-accent-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--dp-accent-rgb), 0.3);
}

/* DP2 Modal – Buttons (Abbrechen, Primary, Close) */
.modal.dp2-modal .dp2-btn {
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}
.modal.dp2-modal .dp2-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.modal.dp2-modal .dp2-btn-primary {
    background-color: var(--dp-accent-color);
    border-color: var(--dp-accent-color);
    color: #fff;
}
.modal.dp2-modal .dp2-btn-primary:hover {
    background-color: rgba(var(--dp-accent-rgb), 0.85);
    border-color: rgba(var(--dp-accent-rgb), 0.85);
    color: #fff;
}
.modal.dp2-modal .modal-footer .dp2-btn + .dp2-btn {
    margin-left: 8px;
}
.modal.dp2-modal .modal-header .close {
    font-size: 1.5rem;
    opacity: 0.8;
    padding: 0.25rem 0.5rem;
    line-height: 1.2;
}
.modal.dp2-modal .modal-header .close:hover {
    opacity: 1;
}

/* DP2 Modal – Formulare (Struktur & Input-Design, dunkles Theme) */
.modal.dp2-modal .modal-body {
    padding: 1.25rem 1.5rem;
}
.modal.dp2-modal .dp2-modal-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 1rem;
}
.modal.dp2-modal .dp2-form-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.modal.dp2-modal .dp2-form-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* Erste Sektion im Modal (z. B. Grunddaten) ohne Trennlinie – modal-body kann input vor der ersten section haben */
.modal.dp2-modal .modal-body .dp2-form-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.modal.dp2-modal .dp2-form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.75rem;
}
.modal.dp2-modal .dp2-form-group {
    margin-bottom: 1rem;
}
.modal.dp2-modal .dp2-form-group:last-child {
    margin-bottom: 0;
}
.modal.dp2-modal .dp2-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.35rem;
}
.modal.dp2-modal .dp2-form-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.35rem;
    margin-bottom: 0;
}
.modal.dp2-modal .dp2-form-hint-section {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: -0.2rem;
    margin-bottom: 0.5rem;
}
.modal.dp2-modal .dp2-contact-search-wrap {
    position: relative;
}
.modal.dp2-modal .dp2-contact-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 200px;
    overflow-y: auto;
    background-color: rgba(30, 30, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 10;
}
.modal.dp2-modal .dp2-contact-dropdown-head {
    padding: 0.35rem 0.85rem 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal.dp2-modal .dp2-contact-dropdown-item {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.modal.dp2-modal .dp2-contact-dropdown-item:last-child {
    border-bottom: none;
}
.modal.dp2-modal .dp2-contact-dropdown-item:hover {
    background-color: rgba(var(--dp-accent-rgb), 0.25);
    color: #fff;
}
.modal.dp2-modal .dp2-contact-display {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.7);
}
.modal.dp2-modal .dp2-price-type-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.modal.dp2-modal .dp2-price-custom-wrap {
    margin-top: 0.75rem;
}
.modal.dp2-modal .dp2-total-price-display {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
}
.modal.dp2-modal .form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.modal.dp2-modal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.modal.dp2-modal .form-control:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.08);
}
.modal.dp2-modal .form-control:focus {
    border-color: var(--dp-accent-color);
    box-shadow: 0 0 0 2px rgba(var(--dp-accent-rgb), 0.35);
    outline: none;
    background-color: rgba(255, 255, 255, 0.08);
}
.modal.dp2-modal select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.6)' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='rgba(255,255,255,0.6)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* DP2 Select – Custom-Dropdown mit Suchfeld im geöffneten Panel */
.dp2-select-wrap.dp2-select-custom {
    position: relative;
    display: block;
    width: 100%;
}
.dp2-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #fff;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.dp2-select-trigger:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.08);
}
.dp2-select-wrap.dp2-select-open .dp2-select-trigger {
    border-color: var(--dp-accent-color, #1a1d21);
    box-shadow: 0 0 0 2px rgba(var(--dp-accent-rgb, 26, 29, 33), 0.35);
    outline: none;
}
.dp2-select-trigger::after {
    content: '';
    width: 12px;
    height: 12px;
    margin-left: 0.5rem;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.6)' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='rgba(255,255,255,0.6)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.dp2-select-panel {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 0;
    background: var(--dp-surface-color, #2b2d31);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-height: 280px;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.dp2-select-wrap.dp2-select-open .dp2-select-panel {
    display: flex;
}
.dp2-select-panel .dp2-select-filter {
    flex-shrink: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
}
.dp2-select-panel .dp2-select-filter::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.dp2-select-panel .dp2-select-filter:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}
.dp2-select-list {
    overflow-y: auto;
    max-height: 220px;
    padding: 0.25rem 0;
}
.dp2-select-option {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp2-select-option:hover {
    background: rgba(255, 255, 255, 0.1);
}
.dp2-select-option-selected {
    background: rgba(var(--dp-accent-rgb, 26, 29, 33), 0.25);
    color: #fff;
}
.dp2-select-wrap.dp2-select-custom select.form-control {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: 0;
}
/* DP2-Page (helle Kontexte) */
.dp2-page .dp2-select-trigger {
    color: var(--dp-text-primary);
    background-color: var(--dp-surface-hover, rgba(0, 0, 0, 0.04));
    border-color: var(--dp-border-color);
}
.dp2-page .dp2-select-trigger:hover {
    background-color: var(--dp-surface-hover);
}
.dp2-page .dp2-select-panel {
    background: var(--dp-surface-color);
    border-color: var(--dp-border-color);
}
.dp2-page .dp2-select-panel .dp2-select-filter {
    background: var(--dp-surface-hover);
    border-bottom-color: var(--dp-border-color);
}
.dp2-page .dp2-select-option:hover {
    background: var(--dp-surface-hover);
}
.dp2-page .dp2-select-option-selected {
    background: rgba(var(--dp-accent-rgb), 0.2);
}

.modal.dp2-modal textarea.form-control {
    min-height: 72px;
    resize: vertical;
}


/* ========== DP2 – NetGrid Tables Overrides (DP-Farben) ========== */

.dp2-page .ng-table-controls-top {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    align-items: center;
}

.dp2-page .ng-table-right-controls {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    min-height: auto;
}

.dp2-page .ng-table-info {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    color: var(--dp-text-secondary);
}

.dp2-page .ng-table-search-input {
    background-color: var(--dp-surface-hover);
    border-color: var(--dp-border-color);
    color: var(--dp-text-primary);
}

.dp2-page .ng-table-search-input::placeholder {
    color: var(--dp-text-secondary);
}

.dp2-page .ng-table-search-input:focus {
    border-color: var(--dp-accent-color);
    outline: none;
}

.dp2-page .ng-table-export-btn {
    background-color: var(--dp-surface-hover);
    border-color: var(--dp-border-color);
    color: var(--dp-text-primary);
}

.dp2-page .ng-table-export-btn:hover {
    background-color: var(--dp-accent-color);
    color: #fff;
    border-color: var(--dp-accent-color);
}

.dp2-page .ng-table-column-toggle-btn {
    background-color: var(--dp-accent-color) !important;
    border-color: var(--dp-accent-color) !important;
    color: #fff !important;
}

.dp2-page .ng-table-column-toggle-btn:hover {
    background-color: rgba(var(--dp-accent-rgb), 0.85) !important;
    color: #fff !important;
    border-color: rgba(var(--dp-accent-rgb), 0.85) !important;
}

/* Spalten-Dropdown: dunkler HG, Alle aktivieren + Checks in Polai-Türkis */
.dp2-page .ng-table-column-dropdown {
    background: var(--dp-surface-color) !important;
    border-color: var(--dp-border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.dp2-page .ng-table-column-dropdown > div:first-child {
    border-bottom-color: var(--dp-border-color) !important;
}
.dp2-page .ng-table-column-dropdown button:first-of-type {
    background: var(--dp-accent-color) !important;
    border-color: var(--dp-accent-color) !important;
    color: #fff !important;
}
.dp2-page .ng-table-column-dropdown button:first-of-type:hover {
    background: rgba(var(--dp-accent-rgb), 0.85) !important;
    border-color: rgba(var(--dp-accent-rgb), 0.85) !important;
    color: #fff !important;
}
.dp2-page .ng-table-column-dropdown .fa-check {
    color: var(--dp-accent-color) !important;
}
.dp2-page .ng-table-column-dropdown div[data-column-index] span {
    color: var(--dp-text-primary) !important;
}
.dp2-page .ng-table-column-dropdown div[data-column-index]:hover {
    background: var(--dp-surface-hover) !important;
}

.dp2-page .ng-table-page-btn {
    background-color: var(--dp-surface-hover);
    border-color: var(--dp-border-color);
    color: var(--dp-text-primary);
}

.dp2-page .ng-table-page-btn:hover:not(:disabled) {
    background-color: var(--dp-accent-color);
    color: #fff;
    border-color: var(--dp-accent-color);
    box-shadow: 0 2px 4px rgba(var(--dp-accent-rgb), 0.2);
}

.dp2-page .ng-table-page-btn.ng-table-page-active {
    background-color: var(--dp-accent-color);
    color: #fff;
    border-color: var(--dp-accent-color);
    box-shadow: 0 2px 6px rgba(var(--dp-accent-rgb), 0.3);
}

.dp2-page .ng-table-page-btn:disabled {
    background-color: var(--dp-surface-color);
    opacity: 0.5;
}

.dp2-page .ng-table-page-ellipsis {
    color: var(--dp-text-secondary);
}

.dp2-page .ng-table-sortable:hover {
    background-color: var(--dp-surface-hover);
}

.dp2-page .ng-table-sortable.ng-table-sort-asc::after,
.dp2-page .ng-table-sortable.ng-table-sort-desc::after {
    color: var(--dp-accent-color);
}

/* Tabelle: DP-Hintergründe, keine weißen/hellgrauen Zeilen, keine orange Linie */
.dp2-page table[ng-table],
.dp2-page .netgrid-table {
    background-color: var(--dp-netgrid-surface) !important;
}

.dp2-page table[ng-table] thead th,
.dp2-page .netgrid-table thead th {
    background-color: rgba(16, 18, 20, .58) !important;
    color: #b3c7cf !important;
    border-bottom: 1px solid rgba(174, 178, 184, .2) !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.dp2-page table[ng-table] tbody td,
.dp2-page .netgrid-table tbody td {
    border-bottom: 1px solid rgba(255,255,255,.055);
    color: var(--dp-text-primary);
}

.dp2-page table[ng-table] tbody tr,
.dp2-page .netgrid-table tbody tr {
    background-color: transparent;
}

.dp2-page table[ng-table] tbody tr:nth-child(even),
.dp2-page .netgrid-table tbody tr:nth-child(even) {
    background-color: rgba(255,255,255,.018);
}

.dp2-page table[ng-table] tbody tr:hover,
.dp2-page .netgrid-table tbody tr:hover,
.dp2-page table[ng-table] tbody tr:nth-child(even):hover,
.dp2-page .netgrid-table tbody tr:nth-child(even):hover {
    background-color: rgba(16, 18, 20, .72) !important;
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb), .42);
}

/* dp2-btn-danger behält DP-Rot (kein Orange) */
.dp2-page .dp2-btn-danger {
    border-color: var(--dp-danger-color);
    color: var(--dp-danger-color);
}

.dp2-page .dp2-btn-danger:hover:not(:disabled) {
    background-color: var(--dp-danger-color);
    color: #fff;
    border-color: var(--dp-danger-color);
}

/* ========== DP2 – Radios & Labels (generell, alle Seiten + Modals) ========== */
.dp2-page .dp2-radio-label,
.modal.dp2-modal .dp2-radio-label,
.dp2-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    cursor: pointer;
    padding: 0.4rem 0;
    margin-right: 1rem;
    user-select: none;
}
.dp2-page .dp2-radio-label input[type="radio"],
.modal.dp2-modal .dp2-radio-label input[type="radio"],
.dp2-radio-label input[type="radio"] {
    margin: 0;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--dp-accent-color);
    cursor: pointer;
    flex-shrink: 0;
}
.dp2-page .dp2-radio-label:hover,
.modal.dp2-modal .dp2-radio-label:hover,
.dp2-radio-label:hover {
    color: rgba(255, 255, 255, 0.98);
}
.dp2-page .dp2-radio-label:has(input:focus-visible),
.modal.dp2-modal .dp2-radio-label:has(input:focus-visible),
.dp2-radio-label:has(input:focus-visible) {
    outline: none;
}
.dp2-page .dp2-radio-label input[type="radio"]:focus-visible,
.modal.dp2-modal .dp2-radio-label input[type="radio"]:focus-visible,
.dp2-radio-label input[type="radio"]:focus-visible {
    outline: 2px solid var(--dp-accent-color);
    outline-offset: 2px;
}
/* Gruppe mehrerer Radios: Abstand untereinander */
.dp2-page .dp2-radio-group,
.modal.dp2-modal .dp2-radio-group,
.dp2-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.dp2-page .dp2-radio-group .dp2-radio-label,
.modal.dp2-modal .dp2-radio-group .dp2-radio-label,
.dp2-radio-group .dp2-radio-label {
    margin-right: 0;
}
/* Optionale Überschrift über einer Radio-Gruppe */
.dp2-page .dp2-radio-group-title,
.modal.dp2-modal .dp2-radio-group-title,
.dp2-radio-group-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-bottom: 0.25rem;
    display: block;
}

/* DP2 Checkbox-Label (wie Radio, für type="checkbox") */
.dp2-page .dp2-checkbox-label,
.modal.dp2-modal .dp2-checkbox-label,
.dp2-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    cursor: pointer;
    padding: 0.35rem 0;
    margin-right: 1rem;
    user-select: none;
}
.dp2-page .dp2-checkbox-label input[type="checkbox"],
.modal.dp2-modal .dp2-checkbox-label input[type="checkbox"],
.dp2-checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--dp-accent-color);
    cursor: pointer;
    flex-shrink: 0;
}
.modal.dp2-modal .dp2-roundmail-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}
.modal.dp2-modal .dp2-roundmail-levels .dp2-checkbox-label {
    margin-right: 0;
}
.modal.dp2-modal .dp2-level-count {
    color: var(--dp-text-secondary);
    font-weight: 400;
}
/* Rundmail: User-Chips (ausgewählte User) */
.dp2-roundmail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.dp2-roundmail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.35rem;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    font-size: 0.85rem;
}
.dp2-roundmail-chip-remove {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
    padding: 0 0.1rem;
    font-size: 1rem;
    line-height: 1.2;
}
.dp2-roundmail-chip-remove:hover {
    opacity: 1;
}
/* Rundmail: User-Liste (Klick = Auswahl umschalten) */
.dp2-roundmail-users-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
}
.dp2-roundmail-user-row {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dp2-roundmail-user-row:last-child {
    border-bottom: none;
}
.dp2-roundmail-user-row:hover {
    background: rgba(255, 255, 255, 0.08);
}
.dp2-roundmail-user-row.is-selected {
    background: rgba(var(--dp-accent-rgb, 26, 29, 33), 0.25);
}

/* News: schreibgeschützter Hauptinhalt + HTML-Vorschau */
.modal.dp2-modal .dp2-news-content-readonly {
    padding: 0.75rem;
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.85rem;
}
.modal.dp2-modal .dp2-news-preview {
    padding: 1rem;
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    max-height: 280px;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}
.modal.dp2-modal .dp2-news-preview p,
.modal.dp2-modal .dp2-news-content-readonly p {
    margin-bottom: 0.5rem;
}
.modal.dp2-modal .dp2-news-preview p:last-child,
.modal.dp2-modal .dp2-news-content-readonly p:last-child {
    margin-bottom: 0;
}
.modal.dp2-modal .dp2-news-meta-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.5rem;
}
.modal.dp2-modal .dp2-news-meta-row .dp2-form-section-title {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
}

/* Rich-Text-Editor (netgrid-editor) ohne Speicher – Einleitung/Schlusswort; wächst mit Inhalt */
.modal.dp2-modal .dp2-richtext-editor {
    height: auto;
    min-height: 100px;
    max-height: 320px;
    padding: 0.5rem 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
}
.modal.dp2-modal .dp2-richtext-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--dp-text-secondary);
}
.modal.dp2-modal .dp2-richtext-editor:focus {
    outline: none;
}

/* netgrid-editor Toolbar über DP2-Modals (Toolbar nur bei Textauswahl sichtbar, dann über Modal) */
.netgrid-editor-toolbar,
.netgrid-editor-link-popup {
    z-index: 10000001 !important;
}

.dp-users-page {
    --dp-users-line: rgba(255,255,255,.08);
}

.dp-codes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.dp-code-location {
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    background: rgba(255,255,255,.035);
    padding: 14px;
}

.dp-code-location strong,
.dp-code-location small {
    display: block;
}

.dp-code-location small {
    color: var(--dp-accent-color);
    margin-top: 4px;
    font-weight: 700;
}

.dp-codes-note {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dp-text-secondary);
    border: 1px solid rgba(var(--dp-accent-rgb), .28);
    background: rgba(var(--dp-accent-rgb), .08);
    border-radius: 6px;
    padding: 12px 14px;
}

.dp-codes-note i {
    color: var(--dp-accent-color);
}

.dp-users-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.dp-users-subtitle {
    color: var(--dp-text-secondary);
    font-size: 0.85rem;
    margin-top: 6px;
}

.dp-users-header-actions,
.dp-users-actions,
.dp-users-row-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dp-users-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.dp-users-stat {
    border: 1px solid var(--dp-border-color);
    background: var(--dp-kpi-surface);
    border-radius: 6px;
    padding: 14px 16px;
}

.dp-users-stat span {
    display: block;
    color: var(--dp-accent-color);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.dp-users-stat small,
.dp-users-person small,
.dp-users-login small,
.dp-users-modal-user small,
.dp-users-permission-row small {
    display: block;
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

.dp-users-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.dp-users-avatar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--dp-accent-rgb), .16);
    border: 1px solid rgba(var(--dp-accent-rgb), .34);
    color: var(--dp-accent-color);
    font-weight: 700;
}

.dp-users-mail {
    color: var(--dp-text-primary);
}

.dp-users-muted {
    color: var(--dp-text-secondary);
}

.dp-users-login span {
    display: block;
}

.dp-users-login small.is-active {
    color: var(--dp-accent-color);
}

.dp-users-login small.is-inactive {
    color: var(--dp-danger-color);
}

.dp-users-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    border: 1px solid var(--dp-users-line);
    white-space: nowrap;
}

.dp-users-level small {
    color: var(--dp-text-secondary);
}

.dp-users-group-list,
.dp-users-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.dp-users-chip,
.dp-users-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(var(--dp-accent-rgb), .1);
    border: 1px solid rgba(var(--dp-accent-rgb), .25);
    color: var(--dp-text-primary);
    font-size: 0.75rem;
    line-height: 1.2;
}

.dp-users-source {
    background: rgba(255,255,255,.04);
    border-color: var(--dp-users-line);
    color: var(--dp-text-secondary);
}

.dp-users-icon-btn,
.dp-users-inline-remove {
    border: 1px solid var(--dp-border-color);
    background: rgba(255,255,255,.035);
    color: var(--dp-text-primary);
    border-radius: 6px;
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    cursor: pointer;
    transition: background-color .18s, border-color .18s, color .18s;
}

.dp-users-icon-btn:hover,
.dp-users-inline-remove:hover {
    color: var(--dp-accent-color);
    border-color: rgba(var(--dp-accent-rgb), .5);
    background: rgba(var(--dp-accent-rgb), .12);
    text-decoration: none;
}

.dp-users-icon-btn.is-danger:hover,
.dp-users-inline-remove:hover {
    color: var(--dp-danger-color);
    border-color: rgba(var(--dp-danger-rgb), .5);
    background: rgba(var(--dp-danger-rgb), .12);
}

.dp-users-delete-form {
    margin: 0;
}

.dp-users-empty {
    color: var(--dp-text-secondary);
    padding: 16px;
    text-align: center;
}

.dp-users-modal-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    background: rgba(var(--dp-accent-rgb), .08);
}

.dp-users-list,
.dp-users-permissions-list {
    display: grid;
    gap: 8px;
}

.dp-users-list-row,
.dp-users-permission-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    background: rgba(255,255,255,.025);
}

.dp-users-list-row > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dp-users-add-row,
.dp-users-permission-tools {
    display: grid;
    gap: 10px;
}

.dp-users-add-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-top: 14px;
}

.dp-users-permission-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 16px;
}

.dp-users-permission-tools .dp-users-add-row {
    margin-top: 0;
}

.dp-users-permission-row strong {
    display: block;
    color: var(--dp-text-primary);
    margin-bottom: 2px;
}

.dp-users-sources {
    margin-top: 8px;
}

@media (max-width: 900px) {
    .dp-users-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-users-stats,
    .dp-users-permission-tools {
        grid-template-columns: 1fr;
    }

    .dp-users-add-row {
        grid-template-columns: 1fr;
    }
}

/* Dashboard CI final cascade lock */
:root {
    --dp-bg-color: #080b0d;
    --dp-surface-color: #11161a;
    --dp-surface-hover: #171d22;
    --dp-surface-raised: #151a1f;
    --dp-surface-header: #1a2026;
    --dp-border-color: #26303a;
    --dp-border-soft: rgba(174, 178, 184, .18);
    --dp-text-primary: #f4f7f8;
    --dp-text-primary-rgb: 244, 247, 248;
    --dp-text-secondary: #a8b3bc;
    --dp-text-secondary-rgb: 168, 179, 188;
    --dp-accent-color: #7adbd6;
    --dp-accent-rgb: 122, 219, 214;
    --dp-success-color: var(--dp-accent-color);
    --dp-success-rgb: var(--dp-accent-rgb);
    --dp-danger-color: #ff5c78;
    --dp-danger-rgb: 255, 92, 120;
    --dp-warning-color: #d6a829;
    --dp-warning-rgb: 214, 168, 41;
}

.dp-ui-page-head h1,
.dp-private-lessons-page .dp-ui-page-head h1,
.dp-client-registrations .dp-ui-page-head h1 {
    margin: 0;
    color: #f4f7f8;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-ui-filter-bar,
.dp-client-registrations-card,
.dp-private-lessons-stat,
.dp-private-lessons-unassigned-callout {
    border-color: var(--dp-border-soft) !important;
    background: var(--dp-kpi-surface) !important;
    box-shadow: none !important;
}

.ng-table-wrapper,
.dp-private-lessons-page .ng-table-wrapper,
.dp-private-lessons-page #card_requests .ng-table-wrapper,
.netgrid-table-wrap {
    border-color: var(--dp-border-soft) !important;
    background: var(--dp-netgrid-surface) !important;
    box-shadow: none !important;
}

.dp-client-registrations-card,
.dp-private-lessons-stat,
.dp-private-lessons-unassigned-callout {
    background: var(--dp-kpi-surface) !important;
}

.dp-client-registrations-card strong,
.dp-private-lessons-stat strong,
.dp-private-lessons-unassigned-callout strong {
    color: #fff !important;
}

.dp-private-lessons-unassigned-callout {
    border-color: rgba(var(--dp-danger-rgb), .36) !important;
    background: rgba(var(--dp-danger-rgb), .11) !important;
}

.dp-private-lessons-unassigned-callout strong {
    color: #ffdbe2 !important;
}

.dp-client-search-control input.form-control,
.dp-client-recent-panel {
    border-color: var(--dp-border-soft) !important;
    background: var(--dp-surface-color) !important;
    box-shadow: none !important;
}

.dp-client-recent-card {
    border-color: var(--dp-border-soft) !important;
    background: var(--dp-surface-raised) !important;
}

.netgrid-table th,
.dp-registration-table th,
.dp2-page table[ng-table] thead th,
.dp2-page .netgrid-table thead th {
    background: var(--dp-surface-header) !important;
    color: #b9c8cf !important;
    border-bottom-color: var(--dp-border-soft) !important;
}

.netgrid-table td,
.dp-registration-table td,
.dp2-page table[ng-table] tbody td,
.dp2-page .netgrid-table tbody td {
    border-bottom-color: rgba(255, 255, 255, .06) !important;
    color: var(--dp-text-primary) !important;
}

.ng-table-export-btn,
.ng-table-column-toggle-btn,
.ng-table-page-btn,
.dp-ui-secondary-btn,
.dp-ui-ghost-btn,
.dp2-btn:not(.dp2-btn-primary):not(.dp2-btn-danger),
.dp2-page .ng-table-export-btn,
.dp2-page .ng-table-column-toggle-btn,
.dp2-page .ng-table-page-btn {
    border-color: var(--dp-border-soft) !important;
    background: rgba(17, 22, 26, .88) !important;
    color: var(--dp-text-primary) !important;
}

.dp-ui-primary-btn,
.dp-private-lessons-page .dp-ui-primary-btn,
.dp2-btn-primary,
button.dp2-btn-primary,
a.dp2-btn-primary,
.dp2-card .dp2-btn-primary,
.modal.dp2-modal .dp2-btn-primary,
.dp2-page .dp2-btn-primary {
    border-color: rgba(var(--dp-accent-rgb), .55) !important;
    background: rgba(var(--dp-accent-rgb), .16) !important;
    color: #e9fffb !important;
}

.dp2-btn-danger,
button.dp2-btn-danger,
a.dp2-btn-danger,
.dp2-card .dp2-btn-danger,
.dp2-page .dp2-btn-danger,
.dp-ui-secondary-btn.is-danger {
    border-color: rgba(var(--dp-danger-rgb), .48) !important;
    background: rgba(var(--dp-danger-rgb), .12) !important;
    color: #ffb8c4 !important;
}










/* Check-In content view - moved from clients/checkin.php */
.dp-checkin-page { padding: 18px 22px 30px; color: #e8eef2; }
.dp-checkin-page:not(.is-ready) .dp-checkin-workspace { display: none; }
.dp-checkin-tab-panel.is-hidden { display: none; }
.dp-checkin-header-course { display: none; align-items: center; gap: 8px; margin-top: 6px; color: #b3c7cf; font-size: .86rem; font-weight: 700; }
.dp-checkin-page.is-ready .dp-checkin-header-course:not(:empty) { display: flex; }
.dp-checkin-header-course .dp-checkin-course-badge { font-size: .72rem; }
.dp-checkin-setup, .dp-checkin-scanbar, .dp-checkin-result, .dp-checkin-context {
    background: rgba(17, 26, 32, .94); border: 1px solid rgba(26, 29, 33, .18); border-radius: 8px;
}
.dp-checkin-setup { padding: 14px; margin-bottom: 12px; }
.dp-checkin-setup.is-locked .dp-checkin-setup-body { display: none; }
.dp-checkin-setup-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dp-checkin-title { font-size: 1rem; font-weight: 700; }
.dp-checkin-current { color: #9aa8b2; font-size: 0.85rem; margin-top: 3px; }
.dp-checkin-setup-body { display: grid; gap: 14px; align-items: start; margin-top: 12px; }
.dp-checkin-native-selects { display: none; }
.dp-checkin-field label { display: block; margin-bottom: 6px; color: #dce5ea; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.dp-checkin-field select, .dp-checkin-field input {
    width: 100%; min-height: 42px; background: rgba(7,14,19,.92); border: 1px solid rgba(26,29,33,.28);
    border-radius: 7px; color: #f2f7fa; padding: 8px 11px;
}
.dp-checkin-field input:focus, .dp-checkin-field select:focus { outline: none; border-color: rgba(26,29,33,.68); box-shadow: 0 0 0 3px rgba(26,29,33,.12); }
.dp-checkin-button, .dp-checkin-secondary { min-height: 40px; border-radius: 7px; font-weight: 700; padding: 0 14px; }
.dp-checkin-button { border: 1px solid rgba(26,29,33,.55); background: linear-gradient(135deg,#1a1d21,#1a1d21); color: #fff; }
.dp-checkin-secondary { border: 1px solid rgba(26,29,33,.24); background: rgba(38,48,56,.82); color: #dbe4ea; }
.dp-checkin-picker-panel { min-width: 0; }
.dp-checkin-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.dp-checkin-picker-head h3 { margin: 0; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: #fff; }
.dp-checkin-picker-head span { color: #9aa8b2; font-size: 0.75rem; font-weight: 700; }
.dp-checkin-selection-tools { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.dp-checkin-studio-filters, .dp-checkin-range-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-checkin-studio-filters { grid-column: 1 / -1; }
.dp-checkin-option-search { display: block; position: relative; min-width: 0; }
.dp-checkin-option-search i { position: absolute; z-index: 1; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; text-align: center; color: #9aa8b2; pointer-events: none; }
.dp-checkin-option-search input {
    width: 100%; min-height: 38px; border: 1px solid rgba(26,29,33,.22); border-radius: 999px;
    background: rgba(8,15,20,.66); color: #f2f7fa; padding: 7px 12px 7px 44px !important; text-indent: 0 !important;
}
.dp-checkin-option-search input:focus { outline: none; border-color: rgba(26,29,33,.62); box-shadow: 0 0 0 3px rgba(26,29,33,.10); }
.dp-checkin-studio-filter, .dp-checkin-range-filter {
    border: 1px solid rgba(26,29,33,.20); border-radius: 999px; background: rgba(8,15,20,.66);
    color: #cbd5dd; padding: 7px 11px; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.dp-checkin-studio-filter.is-active, .dp-checkin-range-filter.is-active { border-color: rgba(26,29,33,.62); background: rgba(26,29,33,.16); color: #fff; }
.dp-checkin-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(26,29,33,.15); color: #fff; font-size: 0.75rem; }
.dp-checkin-studio-filter.is-active .dp-checkin-filter-badge { background: rgba(26,29,33,.30); }
.dp-checkin-option-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 490px; overflow: auto; padding-right: 4px; scrollbar-color: rgba(26,29,33,.35) transparent; scrollbar-width: thin; }
.dp-checkin-option-card {
    width: 100%; text-align: left; border: 1px solid rgba(26,29,33,.16); border-radius: 8px;
    background: rgba(8,15,20,.64); color: #e8eef2; padding: 13px 14px; cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.dp-checkin-option-card:hover { border-color: rgba(26,29,33,.42); background: rgba(18,31,37,.86); }
.dp-checkin-option-card.is-today { box-shadow: inset 3px 0 0 #1a1d21; }
.dp-checkin-option-card.is-past { opacity: .65; }
.dp-checkin-option-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dp-checkin-option-title { min-width: 0; font-size: 0.85rem; font-weight: 700; }
.dp-checkin-option-sub { margin-top: 4px; color: #9aa8b2; font-size: 0.75rem; }
.dp-checkin-option-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.dp-checkin-course-list, .dp-checkin-job-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; scrollbar-color: rgba(26,29,33,.35) transparent; scrollbar-width: thin; }
.dp-checkin-course-card, .dp-checkin-job-card {
    width: 100%; text-align: left; border: 1px solid rgba(26,29,33,.16); border-radius: 8px;
    background: rgba(8,15,20,.64); color: #e8eef2; padding: 11px 12px; cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.dp-checkin-course-card:hover, .dp-checkin-job-card:hover { border-color: rgba(26,29,33,.42); background: rgba(18,31,37,.86); }
.dp-checkin-course-card.is-active, .dp-checkin-job-card.is-active { border-color: rgba(26,29,33,.72); background: linear-gradient(135deg, rgba(26,29,33,.20), rgba(25,34,40,.92)); }
.dp-checkin-course-card.is-today, .dp-checkin-job-card.is-today { box-shadow: inset 3px 0 0 #1a1d21; }
.dp-checkin-job-card.is-past { opacity: .62; }
.dp-checkin-card-top, .dp-checkin-card-meta, .dp-checkin-job-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dp-checkin-card-title { min-width: 0; font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-checkin-code { display: inline-flex; align-items: center; border: 1px solid rgba(26,29,33,.34); border-radius: 999px; padding: 3px 8px; background: rgba(26,29,33,.18); color: #1a1d21; font-size: 0.75rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.dp-checkin-card-meta, .dp-checkin-job-meta { margin-top: 8px; justify-content: flex-start; flex-wrap: wrap; color: #9aa8b2; font-size: 0.75rem; }
.dp-checkin-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 7px; background: rgba(26,29,33,.10); color: #cbd5dd; font-size: 0.75rem; font-weight: 700; }
.dp-checkin-pill.is-today { background: rgba(26,29,33,.18); color: #1a1d21; }
.dp-checkin-pill.is-warning { background: rgba(242,184,39,.16); color: #ffe4a3; }
.dp-checkin-job-title { font-size: 0.85rem; font-weight: 700; }
.dp-checkin-job-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dp-checkin-picker-actions { display: flex; justify-content: flex-end; margin-top: 12px; grid-column: 1 / -1; }
.dp-checkin-workspace { display: block; }
.dp-checkin-scanbar { padding: 10px; }
.dp-checkin-scan-card { display: grid; gap: 14px; }
.dp-checkin-scan-hero { position: relative; }
.dp-checkin-scan-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.48); border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 1rem; }
.dp-checkin-scan-shortcut { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #9aa8b2; font-size: 0.75rem; text-align: right; pointer-events: none; }
.dp-checkin-scan { min-height: 72px !important; font-size: 1.5rem; font-weight: 700; letter-spacing: 0; border-color: rgba(26,29,33,.82) !important; box-shadow: 0 0 0 2px rgba(26,29,33,.50), 0 0 22px rgba(26,29,33,.12), inset 0 0 28px rgba(26,29,33,.06); padding-left: 76px !important; padding-right: 120px !important; }
.dp-checkin-search-wrap { position: relative; }
.dp-checkin-suggestions {
    display: none; position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 310px; overflow: auto;
    border: 1px solid rgba(26,29,33,.24); border-radius: 8px; background: rgba(13,22,28,.98); box-shadow: 0 18px 42px rgba(0,0,0,.34);
}
.dp-checkin-suggestions.is-open { display: grid; }
.dp-checkin-suggestion {
    display: block !important; justify-content: flex-start !important; width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(26,29,33,.10);
    background: transparent; color: #eef5f8; padding: 11px 12px; cursor: pointer;
}
.dp-checkin-suggestion, .dp-checkin-suggestion * { text-align: left; }
.dp-checkin-suggestion:hover, .dp-checkin-suggestion.is-active { background: rgba(26,29,33,.14); }
.dp-checkin-suggestion strong { display: block; font-size: 0.85rem; }
.dp-checkin-suggestion span { display: block; margin-top: 2px; color: #9aa8b2; font-size: 0.75rem; }
.dp-checkin-suggestion-empty { padding: 12px; color: #9aa8b2; font-size: 0.85rem; }
.dp-checkin-mini-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dp-checkin-mini { padding: 7px 10px; border-radius: 999px; background: rgba(8,15,20,.72); border: 1px solid rgba(26,29,33,.14); color: #9aa8b2; font-size: 0.75rem; font-weight: 700; }
.dp-checkin-mini strong { color: #fff; margin-right: 4px; }
.dp-checkin-result { display: none !important; min-height: 86px; padding: 14px 16px; margin-top: 4px; }
.dp-checkin-result.is-empty { display: none; }
.dp-checkin-result.is-success { border-color: rgba(26,29,33,.45); background: rgba(26,29,33,.12); }
.dp-checkin-result.is-warning { border-color: rgba(242,184,39,.55); background: rgba(242,184,39,.13); }
.dp-checkin-result.is-error { border-color: rgba(226,71,86,.5); background: rgba(226,71,86,.12); }
.dp-checkin-result-title { font-size: 1.25rem; font-weight: 700; }
.dp-checkin-result-meta { margin-top: 6px; color: #b7c2c9; }
.dp-checkin-context { padding: 0; min-height: 0; background: transparent; border: 0; }
.dp-checkin-last-label { margin: 16px 0 7px; color: #6f808b; font-size: 0.75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dp-checkin-last-scan { display: grid; grid-template-columns: minmax(240px, .95fr) minmax(0, 1.55fr) minmax(260px, .78fr); gap: 14px; align-items: stretch; padding: 14px; border: 1px solid rgba(26,29,33,.16); border-radius: 8px; background: linear-gradient(180deg, rgba(15,28,35,.92), rgba(9,18,24,.92)); box-shadow: 0 18px 42px rgba(0,0,0,.18); }
.dp-checkin-person { display: flex; gap: 14px; align-items: center; }
.dp-checkin-avatar-large { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #8e3d48, #5a2631); color: #fff; font-size: 1.5rem; font-weight: 700; }
.dp-checkin-person-name { font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.dp-checkin-person-name i { color: #aac0ca; font-size: .85rem; }
.dp-checkin-person-meta { margin-top: 6px; color: #9aa8b2; font-size: 0.75rem; display: grid; gap: 3px; }
.dp-checkin-status-strip { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; }
.dp-checkin-status-tile { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(26,29,33,.14); background: rgba(13,22,28,.72); }
.dp-checkin-status-tile i { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; }
.dp-checkin-status-tile.is-ok { color: #00c28f; }
.dp-checkin-status-tile.is-warn { color: #f2b827; }
.dp-checkin-status-tile.is-stop { color: #ff4d63; }
.dp-checkin-status-label { color: #fff; font-weight: 800; font-size: 0.75rem; }
.dp-checkin-status-tile.is-ok .dp-checkin-status-label { color: #fff; }
.dp-checkin-status-tile.is-warn .dp-checkin-status-label { color: #f2b827; }
.dp-checkin-status-tile.is-stop .dp-checkin-status-label { color: #ff4d63; }
.dp-checkin-decision { padding: 14px; border-radius: 8px; border: 1px solid rgba(242,184,39,.28); background: rgba(242,184,39,.12); display: grid; gap: 10px; }
.dp-checkin-decision h3 { margin: 0; color: #f7c85c; font-size: 0.85rem; text-transform: uppercase; }
.dp-checkin-decision p { margin: 0; color: #d8c99f; font-size: 0.75rem; }
.dp-checkin-decision.is-success { border-color: rgba(0,194,143,.32); background: rgba(0,194,143,.10); }
.dp-checkin-decision.is-success h3 { color: #00c28f; }
.dp-checkin-decision .dp-checkin-button { background: linear-gradient(135deg, #ffcc4d, #f2a900); color: #151515; border-color: rgba(255,204,77,.7); }
.dp-checkin-action-stack { display: grid; gap: 8px; }
.dp-checkin-action-stack .dp-checkin-button,
.dp-checkin-action-stack .dp-checkin-secondary { text-align: left; justify-content: flex-start; }
.dp-checkin-action-stack select { min-height: 38px; background: rgba(7,14,19,.92); border: 1px solid rgba(26,29,33,.25); border-radius: 7px; color: #fff; padding: 8px 10px; }
.dp-checkin-context-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.dp-checkin-panel { padding: 12px; border-radius: 8px; background: rgba(8,15,20,.58); border: 1px solid rgba(26,29,33,.13); }
.dp-checkin-panel.is-action { border-color: rgba(242,184,39,.34); background: rgba(242,184,39,.10); }
.dp-checkin-force-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dp-checkin-panel h3 { margin: 0 0 9px; font-size: 0.75rem; font-weight: 700; color: #fff; text-transform: uppercase; }
.dp-checkin-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-checkin-panel-title strong { color: #dbe4ea; font-size: .78rem; font-weight: 800; text-transform: none; }
.dp-checkin-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(26,29,33,.08); color: #dbe4ea; font-size: .78rem; }
.dp-checkin-row strong { min-width: 0; font-size: .78rem; font-weight: 700; }
.dp-checkin-row span, .dp-checkin-empty { color: #9aa8b2; font-size: .78rem; }
.dp-checkin-course-line { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.dp-checkin-course-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(117,244,220,.42); background: rgba(117,244,220,.12); color: #75f4dc; font-size: .68rem; font-weight: 800; line-height: 1; }
.dp-checkin-course-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-checkin-alert-list { display: flex; flex-direction: column; gap: 7px; }
.dp-checkin-alert { padding: 8px 10px; border-radius: 7px; background: rgba(226,71,86,.14); border: 1px solid rgba(226,71,86,.28); }
.dp-checkin-alert.is-warning { background: rgba(242,184,39,.13); border-color: rgba(242,184,39,.32); }
.dp-checkin-alert.is-ok { background: rgba(26,29,33,.12); border-color: rgba(26,29,33,.26); }
.dp-checkin-open-list { display: grid; gap: 0; }
.dp-checkin-context-grid .dp-checkin-panel.is-action { grid-column: 1 / -1; }
.dp-checkin-task-list { display: grid; gap: 5px; color: #9aa8b2; font-size: 0.75rem; }
.dp-checkin-task { display: flex; align-items: center; gap: 7px; }
.dp-checkin-task i { color: #00c28f; font-size: 0.75rem; }
.dp-checkin-task .fa-triangle-exclamation { color: #f2b827; }
.dp-checkin-update-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dp-checkin-update-grid input { min-height: 38px; background: rgba(7,14,19,.92); border: 1px solid rgba(26,29,33,.25); border-radius: 7px; color: #fff; padding: 8px 10px; }
.dp-checkin-update-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.dp-checkin-save-status { color: #9aa8b2; font-size: 0.75rem; }
.dp-checkin-warning-placeholder { min-height: 180px; display: grid; align-items: start; padding: 22px; border: 1px solid rgba(26,29,33,.18); border-radius: 8px; background: rgba(17,26,32,.94); color: #e8eef2; font-size: 1rem; font-weight: 700; }
.dp-checkin-warning-list { display: grid; gap: 10px; }
.dp-checkin-warning-card { padding: 14px; border: 1px solid rgba(242,184,39,.26); border-radius: 8px; background: rgba(17,26,32,.94); color: #e8eef2; }
.dp-checkin-warning-card strong { display: block; font-size: 0.85rem; }
.dp-checkin-warning-card span { display: block; color: #9aa8b2; font-size: 0.75rem; margin-top: 4px; }

.dp-checkin-page { padding: 0 0 30px; }
.dp-checkin-setup {
    overflow: hidden;
    padding: 0;
    border-color: rgba(26,29,33,.18);
    background:
        radial-gradient(circle at 0% 0%, rgba(26,29,33,.13), transparent 34%),
        linear-gradient(180deg, rgba(14,24,31,.86), rgba(8,16,22,.82));
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.dp-checkin-setup-head {
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid rgba(174,178,184,.14);
}
.dp-checkin-title {
    margin: 0;
    color: #f6f7f8;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}
.dp-checkin-current { margin-top: 8px; color: #a8bac4; }
.dp-checkin-setup-body { gap: 16px; margin-top: 0; padding: 0 22px 22px; }
.dp-checkin-picker-head { align-items: flex-end; gap: 14px; margin-bottom: 12px; }
.dp-checkin-picker-head h3 { letter-spacing: .04em; }
.dp-checkin-selection-tools {
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 12px 14px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid rgba(26,29,33,.12);
    border-radius: 8px;
    background: rgba(3,10,13,.28);
}
.dp-checkin-option-search input {
    min-height: 46px;
    padding: 0 14px 0 46px !important;
    border-color: rgba(26,29,33,.18);
    border-radius: 8px;
    background: rgba(8,15,20,.88);
    font-size: 0.85rem;
    box-sizing: border-box;
}
.dp-checkin-studio-filter,
.dp-checkin-range-filter {
    min-height: 38px;
    padding: 0 13px;
    border-color: rgba(26,29,33,.18);
    border-radius: 8px;
    background: rgba(27,36,42,.72);
    color: #e4edf2;
}
.dp-checkin-option-list {
    gap: 12px;
    max-height: 520px;
    padding: 1px 4px 1px 1px;
}
.dp-checkin-option-card {
    position: relative;
    min-height: 74px;
    overflow: hidden;
    padding: 14px 16px 13px;
    border-color: rgba(26,29,33,.16);
    background: linear-gradient(135deg, rgba(26,37,43,.86), rgba(15,23,28,.82));
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.dp-checkin-option-card,
.dp-checkin-course-card,
.dp-checkin-job-card,
.dp-checkin-option-card *,
.dp-checkin-course-card *,
.dp-checkin-job-card * {
    text-align: left;
}
.dp-checkin-option-card,
.dp-checkin-course-card,
.dp-checkin-job-card {
    display: block !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}
.dp-checkin-option-top,
.dp-checkin-card-top,
.dp-checkin-job-main,
.dp-checkin-option-meta,
.dp-checkin-card-meta,
.dp-checkin-job-meta {
    justify-content: flex-start !important;
}
.dp-checkin-option-card::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: rgba(26,29,33,.32);
}
.dp-checkin-option-card:hover {
    transform: translateY(-1px);
    border-color: rgba(26,29,33,.42);
    background: linear-gradient(135deg, rgba(25,47,51,.92), rgba(15,23,28,.86));
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.dp-checkin-option-card.is-today { box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.dp-checkin-option-card.is-today::before { background: #1a1d21; box-shadow: 0 0 18px rgba(26,29,33,.45); }
.dp-checkin-option-top > div,
.dp-checkin-card-top > div,
.dp-checkin-job-main > div {
    flex: 1 1 auto;
    min-width: 0;
}
.dp-checkin-option-title { line-height: 1.2; letter-spacing: 0; }
.dp-checkin-option-sub { margin-top: 5px; color: #aac0ca; }
.dp-checkin-code {
    padding: 4px 9px;
    border-color: rgba(26,29,33,.42);
    background: rgba(26,29,33,.18);
    color: #1a1d21;
    font-size: 0.75rem;
    letter-spacing: .02em;
}
.dp-checkin-pill { padding: 4px 8px; color: #d4dee5; }
.dp-checkin-pill.is-today { background: rgba(26,29,33,.22); color: #1a1d21; }
.dp-checkin-page { --dp-checkin-content-width: 100%; display: grid; gap: 18px; padding: 0 0 30px; color: var(--dp-text-primary); }
.dp-checkin-page .dp-ui-page-head { width: var(--dp-checkin-content-width); display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 8px 0 0; }
.dp-checkin-page .dp-ui-page-head h1 { color: #f4f5f6; font-size: 1.5rem; line-height: 1.2; font-weight: 700; margin: 0; letter-spacing: 0; }
.dp-checkin-setup { width: var(--dp-checkin-content-width); overflow: visible; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.dp-checkin-setup-head { display: none; }
.dp-checkin-current, .dp-checkin-picker-head { display: none; }
.dp-checkin-setup-body { gap: 16px; margin-top: 0; padding: 0; }
.dp-checkin-selection-tools { grid-template-columns: minmax(280px, 1fr); gap: 12px 14px; padding: 0; margin-bottom: 14px; border: 0; border-radius: 0; background: transparent; }
.dp-checkin-range-filters { order: 1; }
.dp-checkin-option-search { order: 2; }
.dp-checkin-studio-filters { order: 3; }
.dp-checkin-option-search i { color: #75f4dc; }
.dp-checkin-option-search input { min-height: 46px; padding: 0 14px 0 42px !important; border: 1px solid rgba(174,178,184,.2); border-radius: 8px; background: rgba(16,18,20,.58); background-color: rgba(16,18,20,.58); color: #f4f5f6; font-size: .95rem; font-weight: 600; box-sizing: border-box; box-shadow: none; }
.dp-checkin-option-search input::placeholder { color: #879198; font-weight: 600; }
.dp-checkin-option-search input:focus { border-color: rgba(174,178,184,.32); background: rgba(16,18,20,.58); background-color: rgba(16,18,20,.58); color: #fff; box-shadow: 0 0 0 3px rgba(var(--dp-accent-rgb),.12); }
.dp-checkin-option-card,
.dp-checkin-course-card,
.dp-checkin-job-card,
.dp-checkin-option-card:hover,
.dp-checkin-course-card:hover,
.dp-checkin-job-card:hover,
.dp-checkin-option-card.is-today,
.dp-checkin-course-card.is-today,
.dp-checkin-job-card.is-today,
.dp-checkin-course-card.is-active,
.dp-checkin-job-card.is-active {
    background: rgba(16,18,20,.58);
    background-color: rgba(16,18,20,.58);
}
.dp-checkin-option-card,
.dp-checkin-course-card,
.dp-checkin-job-card {
    border-color: rgba(174,178,184,.2);
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb),.22);
}
.dp-checkin-option-card:hover,
.dp-checkin-course-card:hover,
.dp-checkin-job-card:hover,
.dp-checkin-course-card.is-active,
.dp-checkin-job-card.is-active {
    border-color: rgba(174,178,184,.32);
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb),.75), 0 10px 24px rgba(0,0,0,.12);
}
.dp-checkin-option-title,
.dp-checkin-card-title,
.dp-checkin-job-title { color: #f4f5f6; }
.dp-checkin-option-sub,
.dp-checkin-card-meta,
.dp-checkin-job-meta { color: #b3c7cf; }
.dp-checkin-code {
    border-color: rgba(var(--dp-accent-rgb),.20);
    background: rgba(16,18,20,.38);
    color: rgba(244,245,246,.82);
}
.dp-checkin-pill {
    border: 1px solid rgba(var(--dp-accent-rgb),.14);
    background: rgba(16,18,20,.34);
    color: #d9e5ea;
}
.dp-checkin-pill.is-today {
    border-color: rgba(117,244,220,.42);
    background: rgba(117,244,220,.12);
    color: #75f4dc;
}
.dp-checkin-pill.is-today i { color: #75f4dc; }
.dp-checkin-workspace { display: block; width: var(--dp-checkin-content-width); }
.dp-checkin-scanbar { padding: 0; border: 0; background: transparent; box-shadow: none; }
.dp-checkin-scan-card { display: grid; gap: 14px; }
.dp-checkin-scan-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: auto; height: auto; border: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; color: #75f4dc; font-size: 1rem; pointer-events: none; z-index: 1; }
.dp-checkin-scan-shortcut { display: none; }
.dp-checkin-scan-status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(117,244,220,.42); background: rgba(117,244,220,.12); color: #75f4dc; font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; pointer-events: none; }
.dp-checkin-scan-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.dp-checkin-scan-status.is-locked { border-color: rgba(255,77,99,.42); background: rgba(255,77,99,.12); color: #ff4d63; }
.dp-checkin-scan { min-height: 46px !important; height: 46px; border-radius: 8px; border: 1px solid rgba(174,178,184,.2) !important; background: rgba(16,18,20,.58) !important; background-color: rgba(16,18,20,.58) !important; color: #f4f5f6; padding: 0 104px 0 42px !important; font-size: .95rem; font-weight: 600; letter-spacing: 0; box-shadow: none !important; }
.dp-checkin-scan::placeholder { color: #879198; font-weight: 600; }
.dp-checkin-scan:focus { border-color: rgba(174,178,184,.32) !important; background: rgba(16,18,20,.58) !important; background-color: rgba(16,18,20,.58) !important; color: #fff; box-shadow: 0 0 0 3px rgba(var(--dp-accent-rgb),.12) !important; }
.dp-checkin-suggestions {
    border-color: rgba(174,178,184,.2);
    background: rgba(16,18,20,.58);
    background-color: rgba(16,18,20,.58);
    box-shadow: none;
}
.dp-checkin-suggestion,
.dp-checkin-suggestion:hover,
.dp-checkin-suggestion.is-active {
    background: rgba(16,18,20,.58);
    background-color: rgba(16,18,20,.58);
}
.dp-checkin-suggestion:hover,
.dp-checkin-suggestion.is-active {
    border-color: rgba(var(--dp-accent-rgb),.28);
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb),.42);
}
.dp-checkin-last-scan {
    grid-template-columns: minmax(220px, .72fr) minmax(420px, 1.7fr) minmax(340px, .98fr);
    border-color: rgba(174,178,184,.18);
    background: #202a34;
    box-shadow: none;
}
.dp-checkin-context-grid { grid-template-columns: repeat(2, minmax(360px, 1fr)); }
.dp-checkin-panel,
.dp-checkin-status-tile {
    border-color: rgba(174,178,184,.2);
    background: rgba(16,18,20,.58);
    background-color: rgba(16,18,20,.58);
}
@media (max-width: 1180px) { .dp-checkin-workspace, .dp-checkin-context-grid, .dp-checkin-last-scan { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .dp-checkin-option-list { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .dp-checkin-page { padding: 14px; } .dp-checkin-setup-body, .dp-checkin-update-grid, .dp-checkin-selection-tools { grid-template-columns: 1fr; } .dp-checkin-course-list, .dp-checkin-job-list, .dp-checkin-option-list { max-height: 340px; } }

/* Check-In final content CI */
.dp-checkin-page {
    --dp-checkin-content-width: 100%;
    display: grid;
    gap: 18px;
    padding: 0 0 30px;
    color: var(--dp-text-primary);
}

.dp-checkin-page .dp-ui-page-head {
    width: var(--dp-checkin-content-width);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 8px 0 0;
}

.dp-checkin-page .dp-ui-page-head h1 {
    margin: 0;
    color: #f4f7f8;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.dp-checkin-setup,
.dp-checkin-scanbar,
.dp-checkin-context,
.dp-checkin-result {
    border-color: var(--dp-border-soft) !important;
    background: var(--dp-surface-color) !important;
    box-shadow: none !important;
}

.dp-checkin-setup {
    width: var(--dp-checkin-content-width);
    overflow: visible;
    padding: 0;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
}

.dp-checkin-setup-head,
.dp-checkin-current,
.dp-checkin-picker-head {
    display: none !important;
}

.dp-checkin-setup-body {
    gap: 16px;
    margin-top: 0;
    padding: 0;
}

.dp-checkin-selection-tools {
    grid-template-columns: minmax(280px, 1fr);
    gap: 12px 14px;
    padding: 0;
    margin-bottom: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.dp-checkin-range-filters {
    order: 1;
}

.dp-checkin-option-search {
    order: 2;
}

.dp-checkin-studio-filters {
    order: 3;
}

.dp-checkin-option-search i,
.dp-checkin-scan-icon {
    color: var(--dp-accent-color) !important;
}

.dp-checkin-option-search input,
.dp-checkin-scan,
.dp-checkin-action-stack select,
.dp-checkin-update-grid input,
.dp-checkin-field select,
.dp-checkin-field input {
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: 8px !important;
    background: var(--dp-surface-color) !important;
    background-color: var(--dp-surface-color) !important;
    color: var(--dp-text-primary) !important;
    box-shadow: none !important;
}

.dp-checkin-option-search input {
    min-height: 46px;
    padding: 0 14px 0 42px !important;
    font-size: .95rem;
    font-weight: 700;
    box-sizing: border-box;
}

.dp-checkin-option-search input::placeholder,
.dp-checkin-scan::placeholder {
    color: var(--dp-text-secondary);
    font-weight: 700;
}

.dp-checkin-option-search input:focus,
.dp-checkin-scan:focus,
.dp-checkin-action-stack select:focus,
.dp-checkin-update-grid input:focus,
.dp-checkin-field select:focus,
.dp-checkin-field input:focus {
    border-color: rgba(var(--dp-accent-rgb), .45) !important;
    box-shadow: 0 0 0 3px rgba(var(--dp-accent-rgb), .12) !important;
    outline: none !important;
}

.dp-checkin-studio-filter,
.dp-checkin-range-filter,
.dp-checkin-button,
.dp-checkin-secondary {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: 8px !important;
    background: rgba(17, 22, 26, .88) !important;
    color: var(--dp-text-primary) !important;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none !important;
}

.dp-checkin-studio-filter:hover,
.dp-checkin-range-filter:hover,
.dp-checkin-button:hover,
.dp-checkin-secondary:hover,
.dp-checkin-studio-filter.is-active,
.dp-checkin-range-filter.is-active {
    border-color: rgba(var(--dp-accent-rgb), .55) !important;
    background: rgba(var(--dp-accent-rgb), .14) !important;
    color: #fff !important;
}

.dp-checkin-option-card,
.dp-checkin-course-card,
.dp-checkin-job-card,
.dp-checkin-suggestions,
.dp-checkin-panel,
.dp-checkin-status-tile,
.dp-checkin-warning-placeholder,
.dp-checkin-warning-card {
    border-color: var(--dp-border-soft) !important;
    background: var(--dp-surface-raised) !important;
    background-color: var(--dp-surface-raised) !important;
    color: var(--dp-text-primary) !important;
    box-shadow: none !important;
}

.dp-checkin-option-card,
.dp-checkin-course-card,
.dp-checkin-job-card {
    display: block !important;
    text-align: left !important;
    border-radius: 8px;
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb), .22) !important;
}

.dp-checkin-option-card:hover,
.dp-checkin-course-card:hover,
.dp-checkin-job-card:hover,
.dp-checkin-course-card.is-active,
.dp-checkin-job-card.is-active {
    border-color: rgba(var(--dp-accent-rgb), .45) !important;
    background: var(--dp-surface-hover) !important;
    box-shadow: inset 3px 0 0 rgba(var(--dp-accent-rgb), .75) !important;
}

.dp-checkin-option-title,
.dp-checkin-card-title,
.dp-checkin-job-title,
.dp-checkin-panel h3,
.dp-checkin-result-title {
    color: #f4f7f8 !important;
    font-weight: 800;
}

.dp-checkin-option-sub,
.dp-checkin-card-meta,
.dp-checkin-job-meta,
.dp-checkin-result-meta,
.dp-checkin-row span,
.dp-checkin-empty,
.dp-checkin-suggestion span,
.dp-checkin-save-status,
.dp-checkin-warning-card span {
    color: var(--dp-text-secondary) !important;
}

.dp-checkin-code,
.dp-checkin-pill,
.dp-checkin-course-badge,
.dp-checkin-filter-badge,
.dp-checkin-mini {
    border: 1px solid rgba(var(--dp-accent-rgb), .22) !important;
    background: rgba(var(--dp-accent-rgb), .10) !important;
    color: #dffbf8 !important;
}

.dp-checkin-pill.is-today,
.dp-checkin-course-card.is-today .dp-checkin-code,
.dp-checkin-job-card.is-today .dp-checkin-code {
    border-color: rgba(var(--dp-accent-rgb), .42) !important;
    background: rgba(var(--dp-accent-rgb), .14) !important;
    color: var(--dp-accent-color) !important;
}

.dp-checkin-workspace {
    width: var(--dp-checkin-content-width);
}

.dp-checkin-scanbar {
    padding: 14px;
    border: 1px solid var(--dp-border-soft) !important;
    border-radius: 8px;
}

.dp-checkin-scan-card {
    display: grid;
    gap: 14px;
}

.dp-checkin-scan-icon {
    left: 14px;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

.dp-checkin-scan-shortcut {
    display: none;
}

.dp-checkin-scan-status {
    border-color: rgba(var(--dp-accent-rgb), .42);
    background: rgba(var(--dp-accent-rgb), .12);
    color: var(--dp-accent-color);
}

.dp-checkin-scan-status.is-locked {
    border-color: rgba(var(--dp-danger-rgb), .42);
    background: rgba(var(--dp-danger-rgb), .12);
    color: var(--dp-danger-color);
}

.dp-checkin-scan {
    min-height: 46px !important;
    height: 46px;
    padding: 0 104px 0 42px !important;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 0;
}

.dp-checkin-last-scan {
    border-color: var(--dp-border-soft) !important;
    background: var(--dp-surface-color) !important;
    box-shadow: none !important;
}

@media (max-width: 900px), (hover: none) {
    body.dp-checkin-search-active {
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .dp-checkin-page.is-search-active {
        --dp-checkin-search-top: calc(var(--dp-checkin-visual-top, 0px) + max(8px, env(safe-area-inset-top)));
    }

    .dp-checkin-page.is-search-active .dp-checkin-page-head,
    .dp-checkin-page.is-search-active .dp-checkin-setup {
        display: none !important;
    }

    .dp-checkin-page.is-search-active #dp-checkin-form {
        min-height: 54px;
    }

    .dp-checkin-page.is-search-active .dp-checkin-scanbar {
        padding: 0;
        border-color: transparent !important;
        background: transparent !important;
    }

    .dp-checkin-page.is-search-active .dp-checkin-search-wrap {
        position: fixed !important;
        z-index: 4600;
        top: var(--dp-checkin-search-top);
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        width: auto;
        padding: 0;
    }

    .dp-checkin-page.is-search-active .dp-checkin-scan {
        height: 50px;
        min-height: 50px !important;
        padding-right: 94px !important;
        font-size: 16px;
    }

    .dp-checkin-page.is-search-active .dp-checkin-scan-status {
        right: 10px;
        min-height: 22px;
        padding: 0 8px;
        font-size: .68rem;
    }

    .dp-checkin-page.is-search-active .dp-checkin-suggestions {
        top: calc(100% + 8px);
        max-height: calc(var(--dp-checkin-visual-height, 100vh) - 74px - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        box-shadow: 0 18px 54px rgba(0, 0, 0, .42) !important;
    }

    .dp-checkin-page.is-search-active .dp-checkin-suggestion {
        min-height: 54px;
        padding: 12px 13px;
    }

    .dp-checkin-page.is-search-active .dp-checkin-result,
    .dp-checkin-page.is-search-active .dp-checkin-context {
        display: none !important;
    }
}

.dp-template-import-page {
    --dp-accent-color: #4b807f;
    --dp-accent-rgb: 75, 128, 127;
    --dp-import-course-accent-rgb: 122, 219, 214;
    --dp-success-color: var(--dp-accent-color);
    --dp-success-rgb: var(--dp-accent-rgb);
    display: grid;
    gap: 16px;
}

.dp-template-import-page.is-loading {
    cursor: progress;
}

.dp-template-import-workspace {
    display: grid;
    gap: 16px;
}

.dp-template-import-page-head {
    margin: 0 0 2px;
}

.dp-template-import-page-kicker {
    margin-top: 5px;
    color: var(--dp-muted-color);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
}

.dp-template-import-page-kicker .badge {
    margin: 0 4px;
    border: 1px solid var(--dp-border-soft);
    border-radius: 999px;
    background: rgba(17, 22, 26, .88);
    color: var(--dp-text-color);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 0;
}

.dp-template-import-layout {
    display: grid;
    grid-template-columns: minmax(280px, 3fr) minmax(0, 7fr);
    gap: 16px;
    align-items: start;
}

.dp-template-import-main-settings,
.dp-template-import-preview-table {
    width: 100%;
    max-width: none;
}

.dp-template-import-main-settings {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
}

.dp-template-import-preview-table {
    grid-column: 2;
    grid-row: 1;
    overflow-x: auto;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-raised);
    padding: 12px;
}

.dp-template-import-main-settings > .appformheader {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    min-width: 0;
}

.dp-template-import-main-settings > .appformheader {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
}

.dp-template-import-main-settings > .appformheader > .appformsubtitle {
    grid-column: 1 / -1;
    min-width: 0;
}

.dp-template-import-main-settings > .appformheader > .appformsubtitle:first-child {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 0;
}

.dp-template-import-main-settings > .appformheader > .appformsubtitle a,
.dp-template-import-main-settings .dp-ui-secondary-btn {
    max-width: 100%;
}

.dp-template-import-main-settings .dp-ui-secondary-btn {
    white-space: normal;
}

.dp-template-import-main-settings > .appformheader > .appformsubtitle:first-child .dp-ui-secondary-btn {
    min-height: 32px;
    padding: 6px 10px;
    white-space: nowrap;
}

.dp-template-import-main-settings > .appformheader > .appformsubtitle:first-child .dp-ui-secondary-btn span {
    display: none;
}

.dp-template-import-main-settings > .appformheader > .appformsubtitle:first-child .dp-ui-secondary-btn::after {
    content: "Einheit";
    font-size: .8rem;
    font-weight: 900;
}

.dp-template-import-unit-actions {
    display: flex !important;
    gap: 8px;
}

.dp-template-import-unit-actions a {
    display: inline-flex;
    min-width: 0;
}

.dp-template-import-unit-actions .dp-ui-secondary-btn {
    min-height: 32px;
    padding: 6px 10px;
    white-space: nowrap;
}

.dp-template-import-main-settings > .appformheader > .appform-element {
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.dp-template-import-main-settings > .appformheader > .appform-element .appform-inputtitle {
    margin-bottom: 6px;
}

.dp-template-import-main-settings > .appformheader > .appform-element .appform-input {
    margin-top: 0;
}

.dp-template-import-page .appformheader {
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-surface-raised);
    padding: 10px 12px;
}

.dp-template-import-main-settings,
.dp-template-import-main-settings * {
    box-sizing: border-box;
}

.dp-template-import-page .appformtitle,
.dp-template-import-page .appformsubtitle {
    color: var(--dp-text-color);
}

.dp-template-import-page .appformsubtitle {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: .86rem;
    line-height: 1.2;
    font-weight: 800;
}

.dp-template-import-page .appform-element {
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-kpi-surface);
    padding: 9px 11px;
    margin-bottom: 8px;
}

.dp-template-import-page .appform-inputtitle {
    color: var(--dp-muted-color);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.dp-template-import-page .appform-input {
    margin-top: 4px;
}

.dp-template-import-main-settings .appform-element {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: stretch;
}

.dp-template-import-main-settings .appform-input {
    margin-top: 0;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    float: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block;
}

.dp-template-import-main-settings .appform-inputtitle {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    float: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.dp-template-import-main-settings .form-control,
.dp-template-import-main-settings input[type="datetime-local"],
.dp-template-import-main-settings select {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    min-height: 32px;
    height: 32px;
    padding: 4px 9px;
    font-size: .88rem;
}

.dp-template-import-main-settings > .appformheader > .appform-element {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.dp-template-import-main-settings > .appformheader > .appform-element .appform-inputtitle {
    margin-bottom: 3px;
}

.dp-template-import-main-settings > .appformheader > .appform-element .appform-input {
    margin-top: 0;
}

.dp-template-import-main-settings .w-50 {
    width: 100% !important;
}

.dp-template-import-main-settings .btn-light {
    min-height: 34px;
    padding: 6px 10px;
}

.dp-template-import-workers {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid var(--dp-border-soft);
}

.dp-template-import-workers .appformsubtitle {
    width: 100%;
    justify-content: flex-start;
}

.dp-template-import-workers #workeradd {
    min-height: 32px;
    max-width: 100%;
    border: 0;
    border-radius: 8px;
    background: var(--dp-accent-color);
    color: #061311;
    padding: 7px 10px;
    font-size: .8rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: none;
}

.dp-template-import-workers #workeradd:hover {
    filter: brightness(1.04);
    color: #061311;
}

.dp-template-import-workers p {
    margin: 0;
    color: var(--dp-muted-color);
    font-size: .82rem;
}

.dp-template-import-option-group {
    display: grid;
    grid-column: 1 / -1;
    gap: 7px;
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid var(--dp-border-soft);
}

.dp-template-import-lock-group {
    display: grid;
    gap: 7px;
}

.dp-template-import-lock-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dp-template-import-option-group .appformsubtitle,
.dp-template-import-lock-group .appformsubtitle,
.dp-template-import-workers .appformsubtitle {
    font-size: .82rem;
}

.dp-template-import-option-group > .appformsubtitle {
    display: none !important;
}

.dp-template-import-main-settings .dp-template-import-option-group > .appform-element {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.dp-template-import-main-settings .dp-template-import-option-group > .appform-element .appform-inputtitle {
    margin: 0;
}

.dp-template-import-main-settings .dp-template-import-option-group > .appform-element .appform-input {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
}

.dp-template-import-main-settings .dp-template-import-worktime-group {
    grid-template-columns: 1fr;
}

.dp-template-import-main-settings .dp-template-import-worktime-group .appformsubtitle {
    grid-column: 1 / -1;
}

.dp-template-import-main-settings .dp-template-import-worktime-group > .appform-element:nth-of-type(1),
.dp-template-import-main-settings .dp-template-import-worktime-group > .appform-element:nth-of-type(2) {
    grid-column: 1 / -1;
}

.dp-template-import-main-settings .dp-template-import-worktime-group > .appform-element:nth-of-type(1) {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dp-border-soft);
}

.dp-template-import-main-settings .dp-template-import-time-buffer-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dp-template-import-main-settings .dp-template-import-time-buffer-group > .appform-element {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 4px;
}

.dp-template-import-main-settings .dp-template-import-time-buffer-group > .appform-element .appform-input {
    justify-content: stretch;
}

.dp-template-import-main-settings .dp-template-import-content-options-group > .appform-element,
.dp-template-import-main-settings .dp-template-import-lock-group > .appform-element {
    min-height: 22px;
}

.dp-template-import-page .modal-body .appform-element {
    display: grid;
    gap: 10px;
}

.dp-template-import-page input[type="checkbox"][data-dp-template-import-option] {
    width: 16px;
    height: 16px;
    accent-color: var(--dp-accent-color);
}

.dp-template-import-page .btn-success,
.dp-template-import-page .dp-ui-primary-btn {
    border-color: rgba(var(--dp-import-course-accent-rgb), .55) !important;
    background: rgba(var(--dp-import-course-accent-rgb), .16) !important;
    color: #e9fffb !important;
}

.dp-template-import-page .text-success {
    color: var(--dp-accent-color) !important;
}

.dp-template-import-page #classimporttbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--dp-border-soft);
    border-radius: 8px;
    background: var(--dp-netgrid-surface);
}

.dp-template-import-page #classimporttbl th,
.dp-template-import-page #classimporttbl td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--dp-border-soft);
}

.dp-template-import-page #classimporttbl .btn {
    min-height: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 7px;
    padding: 5px 9px;
    font-size: .76rem;
    line-height: 1;
    vertical-align: middle;
}

.dp-template-import-page #classimporttbl .locationshowbtn,
.dp-template-import-page #classimporttbl [id^="lockdate_"],
.dp-template-import-page #classimporttbl [id^="errordatesbutton_"] {
    width: 34px;
    min-width: 34px;
    height: 30px;
    min-height: 30px;
    padding: 0;
}

.dp-template-import-page #classimporttbl .dp-template-import-content-chip {
    min-height: 22px;
    height: 22px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 700;
    gap: 4px;
}

.dp-template-import-page #classimporttbl .dp-template-import-content-chip .badge {
    min-width: 12px;
    width: auto;
    height: 12px;
    min-height: 12px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 3px;
    background: var(--dp-accent-color) !important;
    color: #f4fffd !important;
    font-size: .5rem;
    font-weight: 900;
    line-height: 12px;
    vertical-align: middle;
}

@media (max-width: 1100px) {
    .dp-template-import-layout {
        grid-template-columns: 1fr;
    }

    .dp-template-import-main-settings,
    .dp-template-import-preview-table {
        grid-column: 1;
        grid-row: auto;
    }
}

.dp-template-import-page .appformsubmit {
    display: flex !important;
    justify-content: flex-end;
}

.dp-template-import-page .dp-template-import-preview-submit {
    margin-top: 12px;
    padding-top: 6px;
    border-top: 0;
    justify-content: center;
}

.dp-template-import-page .appformsubmit .btn-success {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 8px;
    border: 0;
    background: var(--dp-accent-color);
    color: #061311;
    font-weight: 900;
}