/* ==============================================================
    style.CSS 6.0 — Modernes Designsystem
============================================================== */

/* --------------------------------------------------------------
    THEME TOKENS
-------------------------------------------------------------- */

:root {
    /* Basics */
    --color-bg: #f7f7f7;
    --color-bg-elev-1: #ffffff;
    --color-bg-elev-2: #f0f0f0;

    --color-text: #111;
    --color-text-muted: #555;
    --color-text-light: #fff;

    /* Accents */
    --color-primary: #416553;
    --color-primary-light: #ccd6c9;
    --color-primary-dark: #2d4338;

    --color-secondary: #eed271;

    --color-danger: #99344A;
    --color-danger-light: #f1dcde;

    /* Borders */
    --color-border: #ccc;
    --color-border-light: #ddd;

    /* Surfaces */
    --color-surface-1: #ffffff;
    --color-surface-2: #f3f3f3;
    --color-surface-3: #e9e9e9;

    /* Shadows */
    --shadow-1: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-2: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-3: 0 8px 24px rgba(0,0,0,0.18);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Transitions */
    --transition-fast: 120ms ease;
    --transition-medium: 240ms ease;

    /* Typography */
    --font-body: "Nunito Sans", Arial, sans-serif;
    --font-mono: Consolas, "Courier New", monospace;

    /* Misc */
    --color-overlay: rgba(0,0,0,0.4);
    --color-shadow-pressed: rgba(0,0,0,0.2);
}

/* --------------------------------------------------------------
    DARK THEME
-------------------------------------------------------------- */

html.dark {

    --color-bg: #1a241f;
    --color-bg-elev-1: #222d28;
    --color-bg-elev-2: #26352f;

    --color-text: #e8e8e8;
    --color-text-muted: #9f9f9f;
    --color-text-light: #222d28;

    --color-primary: #7d9688;
    --color-primary-light: #3a4b45;
    --color-primary-dark: #2d4338;

    --color-secondary: #e1cb7d;
    --color-secondary-light: #eddca8;

    --color-danger: #e38da1;
    --color-danger-light: #49363c;

    --color-border: #4c4c4c;
    --color-border-light: #666;

    --color-surface-1: #1f2a25;
    --color-surface-2: #25332d;
    --color-surface-3: #2b3d36;

    --shadow-1: 0 2px 4px rgba(0,0,0,0.4);
    --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-3: 0 8px 24px rgba(0,0,0,0.5);

    --color-overlay: rgba(0,0,0,0.6);
}

/* --------------------------------------------------------------
    BASE STYLES
-------------------------------------------------------------- */

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body), serif;
    font-size: 15px;
    line-height: 1.5;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 20px 0;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    background: transparent;
}
@media (min-width:993px){.nebra-modal-content{width:900px}.nebra-hide-large{display:none!important}.nebra-sidebar.nebra-collapse{display:block!important}}

/* --------------------------------------------------------------
    BUTTONS
-------------------------------------------------------------- */

.nebra-button,
.nebra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 16px;
    border-radius: var(--radius-md);
    min-width: 25px;
    min-height: 25px;
    line-height: 25px;

    text-decoration: none;
    background: var(--color-bg-elev-1);
    border: 1px solid var(--color-border);
    color: var(--color-text);

    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.nebra-button:hover,
.nebra-btn:hover {
    background: var(--color-surface-2);
    box-shadow: var(--shadow-1);
}
/* --------------------------------------------------------------
    BAR
-------------------------------------------------------------- */
.nebra-bar {
    width: 100%;
    display: flex;
    align-items: center;
}
.nebra-bar .nebra-bar-item {
    background-color: inherit;
    color: inherit;
    padding: 8px 16px;
    border: none;
}
.nebra-bar .nebra-dropdown-hover,
.nebra-bar .nebra-dropdown-click {
    position: static;
    float: left;
}
.nebra-bar .nebra-button{white-space:normal}
/* --------------------------------------------------------------
    CARDS
-------------------------------------------------------------- */

.nebra-card {
    background: var(--color-bg-elev-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: 16px;
}

.nebra-card.div {
    max-width: 0;
    width: 100%
}

.nebra-card-2 {
    box-shadow: var(--shadow-2);
}

.nebra-card-4 {
    box-shadow: var(--shadow-3);
}

.nebra-card-glas {
    background: rgba(65, 101, 83, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 8px;
}
/* --------------------------------------------------------------
    MODALS
-------------------------------------------------------------- */

.nebra-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    backdrop-filter: blur(4px);
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nebra-modal-content {
    background: var(--color-bg-elev-1);
    margin: auto;
    padding: 16px;
    border-radius: var(--radius-lg);
    max-width: 600px;
    box-shadow: var(--shadow-3);
}

/* --------------------------------------------------------------
    TABLES
-------------------------------------------------------------- */

.nebra-table,
.nebra-table-all {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    text-align: left;
}

.nebra-table-all {
    border: 1px solid var(--color-border);
}

.nebra-table-all th,
.nebra-table-all td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
}

.nebra-striped tbody tr:nth-child(even) {
    background: var(--color-surface-2);
}

@media (max-width: 600px) {
    .col-hide-600 {
        display: none;
    }
}
@media (max-width: 900px) {
    .col-hide-900 {
        display: none;
    }
}
.col-trim {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* --------------------------------------------------------------
    TOOLTIP
-------------------------------------------------------------- */
.tooltip {
    anchor-scope: --tooltip-anchor;
    anchor-name: --tooltip-anchor;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    position-anchor: --tooltip-anchor;
    position-area: bottom right;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

    opacity: 0;
    transition: opacity 0.5s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/* --------------------------------------------------------------
    INPUTS
-------------------------------------------------------------- */

.nebra-input, .nebra-select {
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elev-1);
    color: var(--color-text);
    max-width: 100%;
    box-sizing: border-box;
}

.nebra-input:focus {
    outline: 2px solid var(--color-primary);
}

.nebra-check,.nebra-radio{width:24px;height:24px;position:relative;top:6px}

input[type="checkbox"] {
    accent-color: var(--color-primary);
}


/* --------------------------------------------------------------
    TAGS & BADGES
-------------------------------------------------------------- */

.nebra-tag,
.nebra-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 16px;
    border-radius: var(--radius-md);
    min-width: 25px;
    min-height: 25px;
    line-height: 25px;

    text-decoration: none;
    background: var(--color-bg-elev-1);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

/* --------------------------------------------------------------
    UTILITIES
-------------------------------------------------------------- */

.nebra-text-center { text-align: center; }
.nebra-text-right { text-align: right; }
.nebra-text-xxl { font-size: 42px!important }
.nebra-text-sm { font-size: 0.85em; }
.nebra-left { margin-right: auto; float:left }
.nebra-right { margin-left: auto; float:right}
.nebra-top { margin-bottom: auto; float: inline-start }
.nebra-bottom { margin-top: auto; float: inline-end }
.nebra-display-topright{position:absolute;right:0;top:0}
.nebra-flex { display: flex; }
.nebra-flex-column { display: flex;flex-direction: column; }
.nebra-align-center { align-items: center; }
.nebra-align-start { align-items: flex-start; }
.nebra-gap-sm { gap: 8px!important }
.nebra-gap-md { gap: 16px!important }
.nebra-gap-xxl { gap: 32px!important }

.nebra-link-reset { text-decoration: none; color: inherit; }

.nebra-bold { font-weight: bold; }
.nebra-italic { font-style: italic; }

.nebra-round { border-radius: var(--radius-md); }
.nebra-round-large { border-radius: var(--radius-lg); }
.nebra-circle { border-radius: 50%; }

.nebra-margin { margin: 16px; }
.nebra-margin-top-sm { margin-top: .5rem; }
.nebra-margin-bottom-sm { margin-bottom: .5rem; }
.nebra-no-margin { margin: 0; }
.nebra-no-margin-top { margin-top: 0; }
.nebra-padding { padding: 16px; }
.nebra-padding-large { padding: 24px; }

/* --------------------------------------------------------------
    GRID SYSTEM
-------------------------------------------------------------- */

.nebra-col-1  { grid-column: span 1; }
.nebra-col-2  { grid-column: span 2; }
.nebra-col-3  { grid-column: span 3; }
.nebra-col-4  { grid-column: span 4; }
.nebra-col-6  { grid-column: span 6; }
.nebra-col-12 { grid-column: span 12; }

/* Grid system */
.nebra-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Ab 600px: 6 Spalten */
@media (min-width: 600px) {
    .nebra-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Ab 1200px: 12 Spalten */
@media (min-width: 1200px) {
    .nebra-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}


/* --------------------------------------------------------------
    COLOR UTILITIES
-------------------------------------------------------------- */

/* Backgrounds */
.nebra-bg-primary { background: var(--color-primary) !important; color: var(--color-text-light) !important }
.nebra-bg-danger  { background: var(--color-danger) !important; color: var(--color-bg) !important }
.nebra-bg-yellow  { background: var(--color-secondary) !important; color: #111;!important }

/* Text */
.nebra-text-primary { color: var(--color-primary); }
.nebra-text-danger  { color: var(--color-danger); }
.nebra-text-yellow  { color: var(--color-secondary); }

/* Borders */
.nebra-border { border: 1px solid var(--color-border); }
.nebra-border-primary { border-color: var(--color-primary); }
.nebra-border-danger  { border-color: var(--color-danger); }