/* ───────────────────────────
   BASE • PAGE THEME & COLORS
   ─────────────────────────── */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 70px 0 0 0;
    background-color: var(--body-bg);
    color: #000000;
}

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

/* ───────────────────────────
   SIDEBAR • LAYOUT & CONTAINER
   ─────────────────────────── */
.nav-bar {
    width: 200px;
    background-color: var(--nav-bg);
    padding: 10px;
    position: fixed;
    height: auto;
    top: 100px;
    left: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    max-height: calc(100vh - 30px);
}

/* SIDEBAR • TITLES (H1–H3) */
.nav-bar h1, .nav-bar h2, .nav-bar h3 {
    color: var(--nav-header);
    margin-bottom: 5px;
}

/* SIDEBAR • SMALL TEXT */
.nav-bar p {
    font-size: 14px;
    color: lightgray;
    margin-bottom: 20px;
}

/* SIDEBAR • NAV BUTTONS */
.nav-buttons button {
    margin-bottom: 10px;
    width: 100%;
}

/* SIDEBAR • NAV BUTTONS :HOVER */
.nav-buttons button:hover {
    background-color: var(--nav-hover);
}

/* SIDEBAR • FAVORITES LINKS */
#favorites a {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    color: white;
}

/* DROPDOWN (ANZEIGEN) • TRIGGER */
.side-dropdown-title {
    font-size: 18px;
    cursor: pointer;
    margin-bottom: 10px;
    color: #ffffff;
}

/* DROPDOWN (ANZEIGEN) • PANEL */
.side-dropdown-content {
    background-color: var(--nav-panel);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

/* DROPDOWN • OPEN STATE */
.side-dropdown-title.clicked + .side-dropdown-content {
    display: block;
}

/* DROPDOWN • ITEM LINKS */
.side-dropdown-item a {
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 5px 0;
}

/* DROPDOWN • ITEM LINKS :HOVER */
.side-dropdown-item a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ───────────────────────────
   MAIN CONTENT • CARD / PANEL
   ─────────────────────────── */
.content {
    padding: 20px;
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-primary);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    color: var(--bs-body-color);
}

.kundenansicht {
    margin-left: 250px;
}

/* Table Styling */
.kundenansicht table {
    border-collapse: collapse; /* Merge borders */
    width: 100%; /* Ensure table stays within container */
    max-width: 100%; /* Avoid overflow on smaller screens */
    table-layout: fixed; /* Ensure equal spacing of columns */
    margin-bottom: 1rem; /* Add some space below tables */
}

.kundenansicht table th, .kundenansicht table td {
    border: 1px solid #ddd; /* Subtle border for cells */
    padding: 6px; /* Reduce padding to save space */
    text-align: left; /* Align text to the left */
    word-wrap: break-word; /* Ensure long text wraps properly */
    overflow: hidden; /* Prevent cell content from overflowing */
}

/* Table Header */
.kundenansicht table th {
    background-color: var(--table-header);
    font-weight: bold;
}

/* Editable Table Rows */
.kundenansicht table.editable input {
    background-color: #ffffff;
    border: 1px solid #ffcc33; /* Highlight border for edit mode */
}

.kundenansicht tr.editing {
    background-color: #e7f3fe;
}

/* Input Fields Styling */
input.table-input {
    border: none;
    background: transparent;
    outline: none;
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Input Fields within Table */
input.table-input {
    border: 1px solid #ccc;
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

/* Action Buttons */
.edit-row-btn, .delete-row-btn {
    background-color: var(--delete-row-btn);
    border: 1px solid #ccc;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 3px;
    margin: 2px;
    font-size: 14px;
}

/* Favorite Button */
.favorite-btn {
    background: none;
    border: none;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    margin-left: 1px;
}

.favorite-btn.active {
    color: #ffb300; /* Yellow when active */
}

.favorite-btn:hover {
    color: #ffcc33;
}

/* Adjust Action Column Width */
td.actions, th.actions {
    width: 80px; /* Fixed width for action column */
    text-align: center; /* Center the buttons */
    white-space: nowrap; /* Prevent line breaks */
}

td.actions button {
    padding: 2px 5px; /* Smaller button padding */
    font-size: 12px; /* Reduce button font size */
}

.kundenansicht table tr {
    border-bottom: 1px solid #ddd; /* Subtle line between rows */
}


/* ───────────────────────────
   RESPONSIVE • ≤ 768px
   ─────────────────────────── */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block; /* Stack table elements */
    }

    table thead {
        display: none; /* Hide table headers */
    }

    table tr {
        margin-bottom: 15px; /
        border-bottom: 1px solid #ddd;
    }

    table td {
        display: flex;
        justify-content: space-between;
        padding: 8px;
    }

    table td::before {
        content: attr(data-label); /* Use data-label for column names */
        font-weight: bold;
        text-transform: capitalize;
        flex-basis: 40%;
    }

    .content {
        margin-left: 0;
        margin-top: 120px;
    }
}

/* Cleanup Table Controls */
.table-controls {
    margin-top: 10px;
    text-align: left;
}
.hidden-data {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: transparent; /* Hide text by default */
    display: inline-block;
    padding: 4px 8px;
    width: auto;
    font-size: 14px;
    text-align: center;
}

.hidden-data.revealed {
    color: #000; /* Reveal text when button clicked */
}

.dragging-row {
    background-color: #f0f0f0;
    opacity: 0.7;
}



.eye-emoji {
    font-size: 1.3em;
    vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────
   SIDEBAR
   ───────────────────────────────────────────────────────── */
.nav-bar {
  /* keep width as-is; just remove the bottom scrollbar */
  overflow-x: hidden;
}

/* Wrap very long company names / numbers inside the sidebar */
.nav-section h1 {
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  line-height: 1.15;
  margin: 0 0 6px;
  color: #ffffff;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nav-section h3 {
  color: #dbeafe;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Ensure location list never forces horizontal scroll */
.location-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}
.location-list li { margin: 2px 0; }
.location-list a { white-space: normal; }

/* Safety: keep common sidebar blocks within width */
.nav-bar .nav-buttons,
.nav-bar .side-dropdown,
.nav-bar .location-list {
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────
   SIDEBAR Button & dropdown text wrapping
   ───────────────────────────────────────────────────────── */
/* Make long button labels (Dokumente/Lizenzen/Passwortfreigabenlog/…) wrap
   instead of overflowing the narrow sidebar */
.nav-buttons button {
  line-height: 1.2;
  padding: 8px 10px;
  white-space: normal;        /* allow wrapping */
  overflow-wrap: anywhere;    /* break very long words */
  word-break: break-word;     /* fallback */
  text-align: center;
}

/* Keep the dropdown container within the sidebar width */
.side-dropdown { max-width: 100%; }

/* The dropdown panel itself should not cause horizontal scroll */
.side-dropdown-content {
  max-width: 100%;
  overflow-x: hidden;         /* hide any accidental horizontal overflow */
  box-sizing: border-box;
}

/* Layout each item as: [link text________] [★] with wrapping text */
.side-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Let the link text wrap on multiple lines */
.side-dropdown-item a {
  flex: 1 1 auto;             /* take remaining width */
  display: block;              /* ensures perfect flex wrapping */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
  padding: 4px 0;             /* keep it compact */
}

/* Keep the star fixed-size on the right */
.side-dropdown-item .favorite-btn {
  flex: 0 0 auto;
  margin-left: 6px;
}

/* ─────────────────────────────────────────────────────────
   SIDEBAR • Standort links (clickable look)
   ───────────────────────────────────────────────────────── */

/* Base + visited */
.location-list .zettel-link,
.location-list .zettel-link:visited {
  color: #ffffff;             /* keep white text */
  text-decoration: none;      /* no underline */
}

/* Make each link feel button-like */
.location-list .zettel-link {
  display: block;             /* full-width click target */
  padding: 6px 10px;          /* pill padding */
  border-radius: 8px;         /* soft corners */
  cursor: pointer;            /* hand cursor */
  transition: background-color .15s ease, color .15s ease;
}

/* Hover state */
.location-list .zettel-link:hover {
  background-color: rgba(255,255,255,0.12); /* soft pill hover */
  color: #ffffff;
}

/* Active state (JS adds .active) */
.location-list .zettel-link.active {
  background-color: rgba(255,255,255,0.22); /* filled pill */
  color: #ffc107;                           /* your amber accent */
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────
   SIDEBAR • Kundennummer (H2) subtle + Meta stacked layout
   ───────────────────────────────────────────────────────── */

/* Make H2 (Kundennummer) small and harmonious under H1 */
.nav-section h2 {
  font-size: 1rem;
  color: #dbeafe;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Compact customer meta */
.customer-meta {
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0 12px;
}

/* Stack: label on one line, value below */
.customer-meta .meta-row {
  display: block;
  margin: 6px 0;
  line-height: 1.25;
}

.customer-meta .meta-label {
  display: block;
  color: #cfe3ff;
  margin-bottom: 2px;
}

.customer-meta .meta-value {
  display: block;
  color: #ffffff;
  overflow-wrap: anywhere;
}


/* ─────────────────────────────────────────────────────────
   SIDEBAR • Meta box hover (subtle highlight)
   ───────────────────────────────────────────────────────── */
.customer-meta{
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.customer-meta:hover{
  background: rgba(255,255,255,0.12);      /* a bit brighter than current */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset; /* soft rim */
}


/* ─────────────────────────────────────────────────────────
   FLOATING • Back-to-top button
   ───────────────────────────────────────────────────────── */
.back-to-top{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: #ffc107;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.3);
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;                 /* hidden by default */
  pointer-events: none;
  transform: translateY(6px); /* subtle entrance */
  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease;
  z-index: 1030;              /* above content; below offcanvas/backdrop */
}
.back-to-top:hover{ background: #1976d2; }
.back-to-top.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Navigation */

.navbar-inverse {
    background-color: #75787b !important;
}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-brand{
    color: white;
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-brand:hover{
    color: #D6EBF2;
}

.nav-item,
.version{
	margin-right: 20px;
	}

.side-dropdown-menu{
    padding: 0px;
    background-color: #eee;
}

.version{
    font-size: 1rem;
    margin: 0.5rem;
}


/* ───────────────────────────
   SIDEBAR • LAYOUT & CONTAINER
   ─────────────────────────── */
.nav-bar {
    width: 200px;
    background-color: var(--nav-bg);
    padding: 10px;
    position: fixed;
    left: 15px;

    /* NEW: anchor to bottom so the panel uses full available height */
    bottom: 12px;

    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

    /* Scroll inside the sidebar; no horizontal scrollbar */
    overflow-y: auto;
    overflow-x: hidden;

    /* NEW: remove the height cap that was cutting off the last buttons */
    max-height: none;

    /* NEW: a little breathing room so the last button is always clickable */
    padding-bottom: 16px;
}

/* Bigger width for the Allgemeine Infos offcanvas only */
#secretOffcanvas.offcanvas-infos {
  --bs-offcanvas-width: 800px;   /* ~2x the default 400px */
  max-width: 90vw;
}


#infos-readonly{
	white-space:pre-line;
}

.note {
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem; /* smaller padding */
  font-size: 0.85rem;      /* smaller text */
  margin-bottom: 0.5rem;   /* tighter vertical spacing */
  line-height: 1.2;        /* tighter line spacing */
}


#lieferantenTable{
    table-layout: auto;
}


#lieferantenTable th, #lieferantenTable td {
    font-size: small;
}

@keyframes slideIn {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.new-row {
  animation: slideIn 0.35s ease-out;
}

.modell-chip {
    padding: 4px 10px;
    border: 1px solid #999;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
}
.modell-chip.selected {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}


/* Font scaling */
html[data-font="small"] {
  font-size: 0.76rem;
}

html[data-font="medium"] {
  font-size: 1rem;
}

html[data-font="large"] {
  font-size: 1.25rem;
}

html {
  transition: font-size 0.15s ease-in-out;
}

/* Bugtracker */

.prio-Trivial { background-color: var(--prio-Trivial)!important; }
.prio-Minor { background-color: var(--prio-Minor)!important; }
.prio-Normal { background-color: var(--prio-Normal)!important; }
.prio-Major { background-color: var(--prio-Major)!important; }
.prio-Critical { background-color: var(--prio-Critical)!important; }

.stat-Open { background-color: var(--stat-Open)!important; }
.stat-In-progress { background-color: var(--stat-In-progress)!important; }
.stat-To-be-tested { background-color: var(--stat-To-be-tested)!important; }
.stat-Reopened { background-color: var(--stat-Reopened)!important; }
.stat-Closed { background-color: var(--stat-Closed)!important; }

[class^="prio-"],
[class^="stat-"] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}


/* Light Mode / Default */

:root {
    --body-bg: #0d47a1;
    --table-header: #f5f5f5;
    --delete-row-btn: #f0f0f0;
    --link-color: black;

    --nav-bg:#1565c0;
    --nav-header:white;
    --nav-hover:#1976d2;
    --nav-panel:#1976d2;

    --prio-Trivial:#DDFF99;
    --prio-Minor:#FFFA99;
    --prio-Normal:#FFE299;
    --prio-Major:#FFB599;
    --prio-Critical:#FF9999;

    --stat-Open:#B7DAF1;
    --stat-In-progress:#B7BDF1;
    --stat-To-be-tested:#CEB7F1;
    --stat-Reopened:#EBB7F1;
    --stat-Closed:#DFDEDF;
}


/* Dark Mode */

[data-bs-theme="dark"] {
    --body-bg: #071c3e;
    --table-header: #111111;
    --delete-row-btn: #3e1d1d;
    --bs-primary: #053377;
    --link-color: white;

    --nav-bg:#0a2c53;
    --nav-hover:#1976d2;
    --nav-panel:#115191;

    --prio-Trivial:#4c7100;
    --prio-Minor:#726c00;
    --prio-Normal:#715100;
    --prio-Major:#721f00;
    --prio-Critical:#720000;

    --stat-Open:#2D536C;
    --stat-In-progress:#444B8C;
    --stat-To-be-tested:#644693;
    --stat-Reopened:#7E3E86;
    --stat-Closed:#5E4D5E;

}

[data-bs-theme="dark"] .table {
  --bs-table-bg: #222222;
  --bs-table-striped-bg: #333333;
  --bs-table-hover-bg: #011033;
  --bs-table-border-color: #2c4c7c;
}

[data-bs-theme="dark"] .table thead th {
  background-color: #0b2e63;
  color: #e6f0ff;
  border-color: #1c4587;
}

[data-bs-theme="dark"] .table-danger {
  --bs-table-bg: #5a1a1a;
  --bs-table-striped-bg: #6b1f1f;
  --bs-table-hover-bg: #7a2424;
  --bs-table-border-color: #842a2a;
  --bs-table-color: #ffffff;
}

[data-bs-theme="dark"] .table-warning {
  --bs-table-bg: #5c4a00;
  --bs-table-striped-bg: #6e5800;
  --bs-table-hover-bg: #806600;
  --bs-table-border-color: #8c7200;
  --bs-table-color: #ffffff;
}