/* ==========================================================================
   ELWIS Responsives CSS-Grundgeruest
   Prefix: co-
   Breakpoints: xs < 768px | md 768-1023px | lg >= 1024px
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Farben & Typografie aus bestehendem Design)
   -------------------------------------------------------------------------- */
:root {
    --co-color-primary: #589199;
    --co-color-primary-dark: #156770;
    --co-color-primary-light: #99bfc2;
    --co-color-gray-dark: #666666;
    --co-color-gray-medium: #b5b5b5;
    --co-color-gray-light: #dddddd;
    --co-color-gray-header: #cccccc;
    --co-color-orange: #ffa100;
    --co-color-white: #ffffff;
    --co-color-black: #000000;
    --co-color-row-alt: #dddddd;
    --co-color-border: #666666;
    --co-color-border-light: #eeeeee;

    --co-font-family: Verdana, Arial, Helvetica, sans-serif;
    --co-font-family-mono: "Courier New", Courier, monospace;
    --co-font-size-base: 0.8rem;
    --co-font-size-sm: 0.75rem;
    --co-font-size-lg: 1.1rem;

    --co-breakpoint-md: 768px;
    --co-breakpoint-lg: 1024px;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.co-body {
    font-family: var(--co-font-family);
    font-size: var(--co-font-size-base);
    color: var(--co-color-black);
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.co-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.co-main {
    width: 100%;
    box-sizing: border-box;
}

.co-sidebar {
    width: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Flexbox Grid

   Basis-Spalten (co-col-*) gelten fuer alle Breakpoints.
   Responsive Spalten (co-col-xs-*, co-col-md-*, co-col-lg-*) ueberschreiben
   per Media Query. Verwendung analog zu Bootstrap:
     <div class="co-col-12 co-col-md-6 co-col-lg-4">
   -------------------------------------------------------------------------- */

.co-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.co-col,
.co-col-1, .co-col-2, .co-col-3, .co-col-4,
.co-col-5, .co-col-6, .co-col-7, .co-col-8,
.co-col-9, .co-col-10, .co-col-11, .co-col-12,
.co-col-xs-1, .co-col-xs-2, .co-col-xs-3, .co-col-xs-4,
.co-col-xs-5, .co-col-xs-6, .co-col-xs-7, .co-col-xs-8,
.co-col-xs-9, .co-col-xs-10, .co-col-xs-11, .co-col-xs-12,
.co-col-md-1, .co-col-md-2, .co-col-md-3, .co-col-md-4,
.co-col-md-5, .co-col-md-6, .co-col-md-7, .co-col-md-8,
.co-col-md-9, .co-col-md-10, .co-col-md-11, .co-col-md-12,
.co-col-lg-1, .co-col-lg-2, .co-col-lg-3, .co-col-lg-4,
.co-col-lg-5, .co-col-lg-6, .co-col-lg-7, .co-col-lg-8,
.co-col-lg-9, .co-col-lg-10, .co-col-lg-11, .co-col-lg-12 {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}

.co-col {
    flex: 1 1 0%;
}

/* Basis-Spalten (alle Breakpoints, wird durch responsive Klassen ueberschrieben) */
.co-col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.co-col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.co-col-3  { flex: 0 0 25%;      max-width: 25%; }
.co-col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.co-col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.co-col-6  { flex: 0 0 50%;      max-width: 50%; }
.co-col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.co-col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.co-col-9  { flex: 0 0 75%;      max-width: 75%; }
.co-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.co-col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.co-col-12 { flex: 0 0 100%;     max-width: 100%; }

/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */

.co-h1 {
    font-family: var(--co-font-family);
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--co-color-black);
    margin: 0.5rem 0;
}

.co-h2 {
    font-family: var(--co-font-family);
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--co-color-black);
    margin: 0.4rem 0;
}

.co-h3 {
    font-family: var(--co-font-family);
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--co-color-black);
    margin: 0.3rem 0;
}

.co-h4 {
    font-family: var(--co-font-family);
    font-size: 1.0rem;
    font-weight: bold;
    color: var(--co-color-black);
    margin: 0.2rem 0;
}

.co-text {
    font-family: var(--co-font-family);
    font-size: var(--co-font-size-base);
    line-height: 1.4;
}

.co-text-sm {
    font-size: var(--co-font-size-sm);
}

.co-text-lg {
    font-size: var(--co-font-size-lg);
}

.co-link {
    color: var(--co-color-primary-dark);
    text-decoration: none;
}

.co-link:hover {
    color: var(--co-color-primary-light);
    text-decoration: underline;
}

.co-link-orange {
    color: var(--co-color-orange);
    text-decoration: none;
}

.co-link-orange:hover {
    color: var(--co-color-gray-header);
    text-decoration: underline;
}

/* ==========================================================================
   TABELLEN — Basis
   ========================================================================== */

.co-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: var(--co-font-family);
    font-size: var(--co-font-size-base);
}

.co-table-bordered {
    border: 1px solid var(--co-color-black);
}

.co-table-bordered .co-th,
.co-table-bordered .co-td {
    border: 1px solid var(--co-color-black);
}

.co-table-striped .co-tr-alt {
    background-color: var(--co-color-row-alt);
}

.co-thead {
    background-color: var(--co-color-primary);
    color: var(--co-color-white);
}

.co-th {
    background-color: var(--co-color-primary);
    color: var(--co-color-white);
    text-align: left;
    padding: 4px 6px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid var(--co-color-border);
}

.co-th-sortable {
    cursor: pointer;
}

.co-th-sortable:hover {
    background-color: var(--co-color-primary-dark);
}

.co-tbody {
    background-color: var(--co-color-white);
}

.co-tr {
    background-color: var(--co-color-white);
}

.co-tr-alt {
    background-color: var(--co-color-row-alt);
}

.co-td {
    padding: 6px;
    vertical-align: top;
    border-left: dotted 1px var(--co-color-border);
    border-right: dotted 1px var(--co-color-border);
    border-bottom: dotted 1px var(--co-color-border);
}

.co-td-nowrap {
    white-space: nowrap;
}

.co-caption {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: left;
    padding: 8px 0;
}

.co-tr-deleted {
    color: grey;
    text-decoration: line-through;
}

/* ==========================================================================
   TABELLEN — Responsive: Horizontaler Scroll
   ========================================================================== */

.co-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   TABELLEN — Responsive: Card-Layout (fuer xs)
   ========================================================================== */

/* Card-Modus wird via Media Query aktiviert — siehe unten */

/* ==========================================================================
   FORMULARE
   ========================================================================== */

.co-form {
    font-family: var(--co-font-family);
    font-size: var(--co-font-size-base);
}

.co-form-group {
    margin-bottom: 10px;
}

.co-label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}

.co-input {
    font-family: var(--co-font-family);
    font-size: var(--co-font-size-base);
    padding: 4px 6px;
    border: 1px solid var(--co-color-gray-medium);
    box-sizing: border-box;
}

.co-input:focus {
    border-color: var(--co-color-primary);
    outline: none;
}

.co-select {
    font-family: var(--co-font-family);
    font-size: var(--co-font-size-base);
    padding: 4px 6px;
    border: 1px solid var(--co-color-gray-medium);
    box-sizing: border-box;
}

.co-btn {
    font-family: var(--co-font-family);
    font-size: var(--co-font-size-base);
    padding: 6px 12px;
    border: 1px solid var(--co-color-gray-medium);
    background-color: var(--co-color-gray-light);
    color: var(--co-color-black);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.co-btn:hover {
    background-color: var(--co-color-gray-medium);
}

.co-btn:focus {
    outline: 2px solid var(--co-color-primary);
    outline-offset: 2px;
}

.co-btn-primary {
    background-color: var(--co-color-primary);
    color: var(--co-color-white);
    border-color: var(--co-color-primary-dark);
}

.co-btn-primary:hover {
    background-color: var(--co-color-primary-dark);
}

.co-btn-primary:focus {
    outline: 2px solid var(--co-color-primary-dark);
    outline-offset: 2px;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* Text-Ausrichtung */
.co-text-left   { text-align: left; }
.co-text-right  { text-align: right; }
.co-text-center { text-align: center; }

/* Vertikale Ausrichtung */
.co-valign-top    { vertical-align: top; }
.co-valign-middle { vertical-align: middle; }

/* Margin-Top */
.co-mt-1 { margin-top: 5px; }
.co-mt-2 { margin-top: 10px; }
.co-mt-3 { margin-top: 20px; }
.co-mt-4 { margin-top: 40px; }

/* Margin-Bottom */
.co-mb-1 { margin-bottom: 5px; }
.co-mb-2 { margin-bottom: 10px; }
.co-mb-3 { margin-bottom: 20px; }
.co-mb-4 { margin-bottom: 40px; }

/* Padding */
.co-p-1 { padding: 5px; }
.co-p-2 { padding: 10px; }
.co-p-3 { padding: 20px; }
.co-p-4 { padding: 40px; }

/* Sichtbarkeit — Standard: alles sichtbar */
.co-hidden-xs,
.co-hidden-md,
.co-hidden-lg {
    /* Werden per Media Query aktiviert */
}

.co-visible-xs,
.co-visible-md,
.co-visible-lg {
    display: none;
}

/* ==========================================================================
   BREAKPOINT: xs (Mobil) — max-width: 767px
   ========================================================================== */

@media (max-width: 767px) {

    /* --- Layout --- */
    .co-container {
        padding: 0 8px;
    }

    .co-sidebar {
        display: none;
    }

    .co-sidebar-visible-xs {
        display: block;
    }

    /* --- Grid: xs-Spalten --- */
    .co-col-xs-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
    .co-col-xs-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .co-col-xs-3  { flex: 0 0 25%;      max-width: 25%; }
    .co-col-xs-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .co-col-xs-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .co-col-xs-6  { flex: 0 0 50%;      max-width: 50%; }
    .co-col-xs-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .co-col-xs-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .co-col-xs-9  { flex: 0 0 75%;      max-width: 75%; }
    .co-col-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .co-col-xs-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .co-col-xs-12 { flex: 0 0 100%;     max-width: 100%; }

    /* --- Typografie --- */
    .co-h1 { font-size: 1.15rem; }
    .co-h2 { font-size: 1.05rem; }
    .co-h3 { font-size: 1.0rem; }

    /* --- Tabellen: Card-Layout --- */
    .co-table-cards {
        border: 0;
    }

    .co-table-cards .co-thead {
        display: none;
    }

    .co-table-cards .co-tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--co-color-gray-header);
        border-radius: 4px;
        background-color: var(--co-color-white);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .co-table-cards .co-tr-alt {
        background-color: var(--co-color-white);
    }

    .co-table-cards .co-td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 12px;
        border: none;
        border-bottom: 1px solid var(--co-color-border-light);
        text-align: right;
    }

    .co-table-cards .co-td:last-child {
        border-bottom: none;
    }

    .co-table-cards .co-td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        flex: 0 0 40%;
        padding-right: 10px;
        color: var(--co-color-gray-dark);
    }

    /* Responsive-Scroll: Hinweis-Gradient bei Scroll */
    .co-table-responsive {
        position: relative;
    }

    .co-table-responsive::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8));
        pointer-events: none;
    }

    /* Nowrap aufheben auf Mobil */
    .co-td-nowrap {
        white-space: normal;
    }

    /* --- Formulare: volle Breite --- */
    .co-input,
    .co-select {
        width: 100%;
    }

    .co-btn {
        width: 100%;
        margin-bottom: 6px;
    }

    /* --- Sichtbarkeit --- */
    .co-hidden-xs {
        display: none !important;
    }

    .co-visible-xs {
        display: block !important;
    }
}

/* ==========================================================================
   BREAKPOINT: md (Tablet) — 768px bis 1023px
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    /* --- Layout --- */
    .co-container {
        padding: 0 15px;
    }

    .co-sidebar {
        display: block;
    }

    /* --- Grid: md-Spalten --- */
    .co-col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
    .co-col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .co-col-md-3  { flex: 0 0 25%;      max-width: 25%; }
    .co-col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .co-col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .co-col-md-6  { flex: 0 0 50%;      max-width: 50%; }
    .co-col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .co-col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .co-col-md-9  { flex: 0 0 75%;      max-width: 75%; }
    .co-col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .co-col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .co-col-md-12 { flex: 0 0 100%;     max-width: 100%; }

    /* --- Tabellen: kompaktere Darstellung --- */
    .co-th {
        padding: 3px 4px;
        font-size: 0.85rem;
    }

    .co-td {
        padding: 4px;
        font-size: 0.85rem;
    }

    .co-td-nowrap {
        white-space: nowrap;
    }

    /* --- Sichtbarkeit --- */
    .co-hidden-md {
        display: none !important;
    }

    .co-visible-md {
        display: block !important;
    }
}

/* ==========================================================================
   BREAKPOINT: lg (Desktop) — ab 1024px
   ========================================================================== */

@media (min-width: 1024px) {

    /* --- Layout: Sidebar + Main nebeneinander --- */
    .co-main {
        flex: 1 1 0%;
    }

    .co-sidebar {
        flex: 0 0 16.4rem;
        width: 16.4rem;
        display: block;
    }

    /* --- Grid: lg-Spalten --- */
    .co-col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
    .co-col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .co-col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
    .co-col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .co-col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .co-col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
    .co-col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .co-col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .co-col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
    .co-col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .co-col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .co-col-lg-12 { flex: 0 0 100%;     max-width: 100%; }

    /* --- Sichtbarkeit --- */
    .co-hidden-lg {
        display: none !important;
    }

    .co-visible-lg {
        display: block !important;
    }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.co-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    font-family: var(--co-font-family);
    font-size: var(--co-font-size-base);
}

.co-pagination-item {
    padding: 4px 8px;
    border: 1px solid var(--co-color-gray-medium);
    text-decoration: none;
    color: var(--co-color-primary-dark);
}

.co-pagination-item:hover {
    background-color: var(--co-color-primary-light);
    color: var(--co-color-white);
}

.co-pagination-active {
    background-color: var(--co-color-primary);
    color: var(--co-color-white);
    border-color: var(--co-color-primary);
}

/* ==========================================================================
   SORT-INDICATOR (Tabellen-Header-Sortierung)
   ========================================================================== */

.co-sort-link {
    color: var(--co-color-white);
    text-decoration: none;
}

.co-sort-link:hover {
    text-decoration: underline;
}

.co-sort-arrow {
    width: 14px;
    height: 13px;
    border: 0;
    vertical-align: middle;
    margin-left: 4px;
}

/* ==========================================================================
   SCHLEUSEN-SPEZIFISCH
   ========================================================================== */

.co-table-schleusenzeit .co-th {
    padding: 4px;
}

.co-table-schleusenzeit .co-td {
    padding: 4px;
    text-align: center;
}

.co-td-closed {
    background-color: #787878;
    color: var(--co-color-white);
}

/* ==========================================================================
   STATUS-INDIKATOREN
   ========================================================================== */

.co-status-revoked {
    color: var(--co-color-orange);
}

.co-status-deleted {
    color: var(--co-color-gray-medium);
    text-decoration: line-through;
}

.co-status-active {
    font-weight: bold;
}