OpenNIT
Quelltext des aktuellen Standes
Fassung 1.1.1
style.css
48 KB/* OpenNIT Connector – Styles */
.opennit-wrap {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
color: #1f2937;
max-width: 100%;
width: 100%;
/* Design-Tokens (nüchtern, professionell, Enterprise) */
--itk-accent: #2563eb;
--itk-accent-hover: #1d4ed8;
--itk-accent-weak: #eff4ff;
--itk-accent-border: #cdddfb;
--itk-ink: #111827;
--itk-muted: #6b7280;
--itk-line: #e5e7eb;
--itk-surface: #ffffff;
--itk-surface-2: #f9fafb;
--itk-radius: 8px;
--itk-radius-sm: 6px;
--itk-shadow: 0 1px 2px rgba(16,24,40,.04);
--itk-shadow-sm: 0 1px 1px rgba(16,24,40,.04);
--itk-focus-ring: 0 0 0 3px rgba(37,99,235,.15);
}
/* ----------------------------------------------------------------
Karten-Shell (geteilt über alle Shortcodes)
---------------------------------------------------------------- */
.opennit-card {
background: var(--itk-surface);
border: 1px solid var(--itk-line);
border-radius: var(--itk-radius);
box-shadow: var(--itk-shadow);
overflow: hidden;
margin-bottom: 1.5rem;
}
.opennit-card__head {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1rem 1.25rem;
background: var(--itk-surface);
border-bottom: 1px solid var(--itk-line);
color: var(--itk-ink);
}
.opennit-card__head-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--itk-radius-sm);
background: var(--itk-accent-weak);
color: var(--itk-accent);
border: 1px solid var(--itk-accent-border);
}
.opennit-card__head-icon svg { width: 18px; height: 18px; }
.opennit-card__head-text { min-width: 0; }
.opennit-card__title {
margin: 0;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--itk-ink);
}
.opennit-card__subtitle {
margin: 0.1rem 0 0;
font-size: 0.82rem;
font-weight: 400;
color: var(--itk-muted);
}
.opennit-card__body {
padding: 1.25rem;
}
.opennit-card__footer {
padding: 0.9rem 1.25rem;
background: var(--itk-surface-2);
border-top: 1px solid var(--itk-line);
display: flex;
justify-content: flex-end;
}
@media (max-width: 600px) {
.opennit-card__body { padding: 1.1rem; }
.opennit-card__footer { padding: 0.9rem 1.1rem; }
.opennit-card__footer .opennit-btn-submit { width: 100%; justify-content: center; }
}
/* ----------------------------------------------------------------
Sections
---------------------------------------------------------------- */
.opennit-section {
margin-bottom: 2rem;
}
.opennit-section-title {
font-size: 1.1rem;
font-weight: 700;
color: #111827;
margin: 0 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e5e7eb;
}
/* ----------------------------------------------------------------
Notices
---------------------------------------------------------------- */
.opennit-notice {
padding: 0.75rem 1rem;
border-radius: 0.375rem;
font-size: 0.9rem;
}
.opennit-notice small {
display: block;
margin-top: 0.25rem;
color: #6b7280;
font-size: 0.82rem;
}
.opennit-notice-info {
background: #f0f9ff;
border: 1px solid #bae6fd;
color: #0c4a6e;
}
.opennit-notice-error {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
}
/* ----------------------------------------------------------------
Badges
---------------------------------------------------------------- */
.opennit-badge {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 9999px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
.opennit-badge-available {
background: #dcfce7;
color: #15803d;
}
.opennit-badge-occupied {
background: #fff7ed;
color: #c2410c;
border: 1px solid #fed7aa;
}
.opennit-badge-reserved {
background: #fef9c3;
color: #854d0e;
}
.opennit-badge-active {
background: #dcfce7;
color: #15803d;
}
.opennit-badge-pending {
background: #dbeafe;
color: #1e40af;
border: 1px solid #bfdbfe;
}
/* ----------------------------------------------------------------
Meine Leihen (Cards)
---------------------------------------------------------------- */
.opennit-loans-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 0.85rem;
}
.opennit-loan-card {
position: relative;
background: #fff;
border: 1px solid var(--itk-line);
border-radius: var(--itk-radius-sm);
box-shadow: var(--itk-shadow-sm);
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.opennit-loan-card:hover {
border-color: #d4d8e6;
box-shadow: var(--itk-shadow-sm);
}
.opennit-loan-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: #94a3b8;
}
.opennit-loan-card[data-status="pending"]::before { background: var(--itk-accent); }
.opennit-loan-card[data-status="reserved"]::before { background: #eab308; }
.opennit-loan-card[data-status="active"]::before { background: #16a34a; }
.opennit-loan-card-header {
padding: 0.8rem 1rem 0.5rem 1.15rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.opennit-loan-card-header strong {
font-size: 0.95rem;
font-weight: 700;
color: var(--itk-ink);
letter-spacing: -0.01em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.opennit-loan-card-body {
padding: 0 1rem 0.85rem 1.15rem;
}
.opennit-loan-card-body .opennit-device-type {
margin-bottom: 0.5rem;
display: inline-block;
}
.opennit-loan-dates {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--itk-ink);
}
.opennit-loan-dates svg { color: var(--itk-muted); flex-shrink: 0; }
.opennit-loan-dates-sep {
color: #9ca3af;
}
.opennit-loan-purpose {
font-size: 0.82rem;
color: var(--itk-muted);
margin: 0.5rem 0 0;
line-height: 1.45;
}
.opennit-loan-card-body .opennit-btn-cancel {
margin-top: 0.75rem;
}
/* ----------------------------------------------------------------
Leihgeräte-Liste
---------------------------------------------------------------- */
.opennit-devices-list {
display: flex;
flex-direction: column;
gap: 0;
}
/* Geräteliste bündig in einer Karte: feine Trennlinien, oben abgesetzt */
.opennit-card > .opennit-devices-list,
#opennit-devices-container > .opennit-devices-list {
border-top: 1px solid var(--itk-line);
}
#opennit-devices-container > .opennit-notice {
margin: 1.25rem;
}
.opennit-device-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.25rem;
background: #fff;
border-bottom: 1px solid var(--itk-line);
transition: background .15s;
}
.opennit-device-item:last-child {
border-bottom: none;
}
.opennit-device-item:hover {
background: var(--itk-surface-2);
}
.opennit-device-info {
flex: 1;
min-width: 0;
}
.opennit-device-title-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.opennit-device-name {
font-weight: 700;
font-size: 0.95rem;
color: var(--itk-ink);
letter-spacing: -0.01em;
}
.opennit-device-type {
font-size: 0.72rem;
font-weight: 600;
color: var(--itk-muted);
background: var(--itk-surface-2);
border: 1px solid var(--itk-line);
padding: 0.1rem 0.5rem;
border-radius: var(--itk-radius-sm);
}
.opennit-device-image {
flex-shrink: 0;
width: 76px;
height: 60px;
border-radius: var(--itk-radius-sm);
overflow: hidden;
background: var(--itk-surface-2);
border: 1px solid var(--itk-line);
display: flex;
align-items: center;
justify-content: center;
}
.opennit-device-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.opennit-device-inv {
font-size: 0.74rem;
color: var(--itk-muted);
display: block;
margin-top: 0.2rem;
}
.opennit-device-desc {
font-size: 0.83rem;
color: var(--itk-muted);
margin: 0.3rem 0 0;
line-height: 1.45;
}
.opennit-device-status-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
flex-shrink: 0;
}
.opennit-hint {
font-size: 0.78rem;
color: var(--itk-muted);
text-align: right;
max-width: 180px;
}
/* ----------------------------------------------------------------
Buttons
---------------------------------------------------------------- */
.opennit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.48rem 0.95rem;
border-radius: var(--itk-radius-sm);
font-size: 0.83rem;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
line-height: 1.4;
}
.opennit-btn-request {
background: var(--itk-accent);
color: #fff;
border-color: var(--itk-accent);
}
.opennit-btn-request:hover {
background: var(--itk-accent-hover);
border-color: var(--itk-accent-hover);
color: #fff;
}
.opennit-btn-primary {
background: var(--itk-accent);
color: #fff;
border-color: var(--itk-accent);
}
.opennit-btn-primary:hover {
background: var(--itk-accent-hover);
border-color: var(--itk-accent-hover);
color: #fff;
}
.opennit-btn-cancel {
background: #fff;
color: var(--itk-muted);
border-color: var(--itk-line);
}
.opennit-btn-cancel:hover {
background: var(--itk-surface-2);
border-color: #cdd2e0;
color: var(--itk-ink);
}
.opennit-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ----------------------------------------------------------------
Anfrageformular
---------------------------------------------------------------- */
.opennit-request-form {
background: var(--itk-surface-2);
border-bottom: 1px solid var(--itk-line);
border-left: 4px solid var(--itk-accent);
padding: 1.1rem 1.25rem;
}
.opennit-form-title {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.75rem;
color: var(--itk-ink);
letter-spacing: -0.01em;
}
.opennit-form-title em {
font-style: normal;
color: var(--itk-accent);
}
.opennit-form-row {
display: flex;
gap: 1rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.opennit-form-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.opennit-form-group label {
font-size: 0.74rem;
font-weight: 700;
color: var(--itk-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.opennit-form-group input[type="date"],
.opennit-form-group textarea {
padding: 0.55rem 0.75rem;
border: 1.5px solid var(--itk-line);
border-radius: var(--itk-radius-sm);
font-size: 0.9rem;
color: var(--itk-ink);
background: #fff;
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
}
.opennit-form-group input[type="date"]:focus,
.opennit-form-group textarea:focus {
outline: none;
border-color: var(--itk-accent);
box-shadow: var(--itk-focus-ring);
}
.opennit-form-group input[type="date"] {
min-width: 150px;
}
.opennit-form-group textarea {
width: 100%;
min-width: 300px;
resize: vertical;
}
.opennit-form-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.opennit-form-feedback {
margin-top: 0.5rem;
padding: 0.4rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.85rem;
}
.opennit-feedback-success {
background: #dcfce7;
color: #15803d;
border: 1px solid #bbf7d0;
}
.opennit-feedback-error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fca5a5;
}
.opennit-success-panel {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 1.25rem;
margin: 0.5rem 0;
background: #dcfce7;
border: 1px solid #86efac;
border-radius: 0.5rem;
color: #15803d;
}
.opennit-success-panel__icon {
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;
}
.opennit-success-panel__body {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.opennit-success-panel__title {
font-weight: 600;
font-size: 1rem;
}
.opennit-success-panel__text {
font-size: 0.875rem;
opacity: 0.9;
}
/* ----------------------------------------------------------------
Asset-Tabelle
---------------------------------------------------------------- */
.opennit-assets-table-wrap {
overflow-x: auto;
}
.opennit-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
overflow: hidden;
background: #fff;
}
.opennit-table th {
text-align: left;
padding: 0.65rem 1rem;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7280;
white-space: nowrap;
}
.opennit-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid #f3f4f6;
font-size: 0.875rem;
color: #374151;
vertical-align: middle;
}
.opennit-table tr:last-child td {
border-bottom: none;
}
.opennit-table tbody tr:hover td {
background: #fafafa;
}
.opennit-inv-number {
font-family: monospace;
font-size: 0.875rem;
font-weight: 600;
color: #374151;
}
/* ----------------------------------------------------------------
Responsive
---------------------------------------------------------------- */
@media (max-width: 600px) {
.opennit-device-item {
flex-direction: column;
align-items: flex-start;
}
.opennit-device-status-col {
align-items: flex-start;
}
.opennit-form-group textarea {
min-width: unset;
width: 100%;
}
.opennit-table th:nth-child(3),
.opennit-table td:nth-child(3) {
display: none;
}
}
/* ----------------------------------------------------------------
Verfügbarkeitsfilter
---------------------------------------------------------------- */
.opennit-filter-box {
background: var(--itk-surface-2);
border: 1px solid var(--itk-line);
border-radius: var(--itk-radius-sm);
padding: 1rem 1.1rem 0.85rem;
margin-bottom: 0;
}
.opennit-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: flex-end;
}
.opennit-filter-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1 1 auto;
min-width: 130px;
}
.opennit-filter-group label {
font-size: 0.74rem;
font-weight: 700;
color: var(--itk-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.opennit-filter-select,
.opennit-filter-date {
padding: 0.55rem 0.7rem;
border: 1.5px solid var(--itk-line);
border-radius: var(--itk-radius-sm);
font-size: 0.875rem;
color: var(--itk-ink);
background: #fff;
width: 100%;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
.opennit-filter-select:focus,
.opennit-filter-date:focus {
outline: none;
border-color: var(--itk-accent);
box-shadow: var(--itk-focus-ring);
}
.opennit-filter-btn-group {
flex: 0 0 auto;
min-width: unset;
}
.opennit-filter-status {
margin-top: 0.6rem;
font-size: 0.82rem;
padding: 0.4rem 0.6rem;
border-radius: 0.35rem;
}
.opennit-filter-info { background: #eff6ff; color: #1d4ed8; }
.opennit-filter-error { background: #fef2f2; color: #dc2626; }
.opennit-filter-loading { background: #f0fdf4; color: #166534; }
/* Zubehör-Hinweis im Reservierungsformular */
.opennit-accessory-note {
background: #eff6ff;
border-left: 3px solid #3b82f6;
color: #1e40af;
font-size: 0.82rem;
padding: 0.5rem 0.75rem;
border-radius: 0 0.35rem 0.35rem 0;
margin-bottom: 0.85rem;
}
@media (max-width: 600px) {
.opennit-filter-group {
min-width: 100%;
}
}
/* ----------------------------------------------------------------
Ticket-Formular
---------------------------------------------------------------- */
.opennit-ticket-form {
max-width: 100%;
}
.opennit-form-label {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--itk-ink);
margin-bottom: 0.45rem;
letter-spacing: -0.005em;
}
.opennit-label-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
color: var(--itk-accent);
}
.opennit-form-value {
font-size: 0.9rem;
color: #1f2937;
padding: 0.45rem 0;
}
.opennit-form-control {
width: 100%;
padding: 0.65rem 0.85rem;
border: 1.5px solid var(--itk-line);
border-radius: var(--itk-radius-sm);
font-size: 0.92rem;
color: var(--itk-ink);
background: var(--itk-surface-2);
font-family: inherit;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.opennit-form-control::placeholder { color: #9aa3b2; }
.opennit-form-control:hover {
border-color: #cdd2e0;
}
.opennit-form-control:focus {
outline: none;
background: #fff;
border-color: var(--itk-accent);
box-shadow: var(--itk-focus-ring);
}
textarea.opennit-form-control {
resize: vertical;
min-height: 120px;
line-height: 1.55;
}
.opennit-ticket-form .opennit-form-row {
flex-direction: column;
gap: 0;
margin-bottom: 1.15rem;
}
.opennit-ticket-form .opennit-form-row:last-child {
margin-bottom: 0;
}
.opennit-required {
color: #ef4444;
font-weight: 800;
}
/* Einsender + Standort/Kategorie-Grid */
.opennit-field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.15rem;
margin-bottom: 1.15rem;
}
.opennit-field-grid .opennit-form-row {
margin-bottom: 0;
}
@media (max-width: 560px) {
.opennit-field-grid { grid-template-columns: 1fr; gap: 0; }
.opennit-field-grid .opennit-form-row { margin-bottom: 1.15rem; }
}
/* Einsender-Chip */
.opennit-sender-chip {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
background: var(--itk-surface-2);
border: 1px solid var(--itk-line);
border-radius: var(--itk-radius-sm);
margin-bottom: 1.3rem;
}
.opennit-sender-avatar {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--itk-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.opennit-sender-meta {
display: flex;
flex-direction: column;
min-width: 0;
}
.opennit-sender-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--itk-muted);
}
.opennit-sender-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--itk-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.opennit-notice-success {
background: #dcfce7;
border: 1px solid #86efac;
color: #15803d;
}
/* ----------------------------------------------------------------
Ticket-Formular – Dateianhang + optionales Feld
---------------------------------------------------------------- */
.opennit-optional {
display: inline-block;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--itk-muted);
background: #eef0f6;
border-radius: 6px;
padding: 0.08rem 0.4rem;
margin-left: 0.15rem;
}
.opennit-field-hint {
font-size: 0.8rem;
color: var(--itk-muted);
margin: 0.4rem 0 0;
}
/* Datei-Dropzone */
.opennit-dropzone {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.9rem 1rem;
border: 1.5px dashed #cdd2e0;
border-radius: var(--itk-radius-sm);
background: var(--itk-surface-2);
color: var(--itk-muted);
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.opennit-dropzone:hover {
border-color: var(--itk-accent);
background: var(--itk-accent-weak);
color: var(--itk-accent);
}
.opennit-dropzone.is-filled {
border-style: solid;
border-color: #86efac;
background: #f0fdf4;
color: #15803d;
}
.opennit-dropzone-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.opennit-dropzone-text { font-size: 0.88rem; }
.opennit-dropzone-text strong { font-weight: 700; }
.opennit-dropzone-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.opennit-attachment-preview {
font-size: 0.82rem;
color: #15803d;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
padding: 0.4rem 0.7rem;
margin-top: 0.5rem;
display: inline-block;
}
/* Primärer Absende-Button */
.opennit-btn-submit {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
background: var(--itk-accent);
color: #fff;
border: 1px solid var(--itk-accent);
border-radius: var(--itk-radius-sm);
font-size: 0.88rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.opennit-btn-submit:hover {
background: var(--itk-accent-hover);
border-color: var(--itk-accent-hover);
color: #fff;
}
.opennit-btn-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.opennit-btn-submit--ghost {
background: #fff;
color: var(--itk-ink);
border: 1px solid var(--itk-line);
}
.opennit-btn-submit--ghost:hover {
background: var(--itk-surface-2);
border-color: #cdd2e0;
color: var(--itk-ink);
}
/* ----------------------------------------------------------------
Meine Tickets – Zeilenbasierte Liste (analog opennit-devices-list)
---------------------------------------------------------------- */
/* Toolbar: Filter-Tabs + Hinweis */
.opennit-tickets-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.6rem;
padding: 1rem 1.25rem 0.5rem;
}
/* Leerer Zustand */
.opennit-empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
padding: 2.25rem 1rem;
color: var(--itk-muted);
}
.opennit-empty-state svg {
width: 46px;
height: 46px;
color: #cbd2e0;
}
.opennit-empty-state p {
margin: 0;
font-size: 0.92rem;
font-weight: 500;
}
/* Ticket-Liste: separierte Mini-Karten */
.opennit-tickets-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0.5rem 1.25rem 1.25rem;
}
.opennit-ticket-row {
position: relative;
background: #fff;
border: 1px solid var(--itk-line);
border-radius: var(--itk-radius-sm);
box-shadow: var(--itk-shadow-sm);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color .15s, box-shadow .15s, transform .12s;
}
.opennit-ticket-row:hover {
border-color: #d4d8e6;
box-shadow: var(--itk-shadow-sm);
}
/* Farbiger Status-Streifen am linken Rand */
.opennit-ticket-row::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: #cbd2e0;
}
.opennit-ticket-row[data-status="new"]::before { background: #3b82f6; }
.opennit-ticket-row[data-status="open"]::before { background: #ca8a04; }
.opennit-ticket-row[data-status="waiting"]::before { background: #ea580c; }
.opennit-ticket-row[data-status="solved"]::before { background: #16a34a; }
.opennit-ticket-row[data-status="closed"]::before { background: #9ca3af; }
/* Klickbarer Header-Bereich */
.opennit-ticket-row-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.9rem;
padding: 0.85rem 1rem 0.85rem 1.15rem;
cursor: pointer;
user-select: none;
transition: background .15s;
}
.opennit-ticket-row-header:hover {
background: var(--itk-surface-2);
}
.opennit-ticket-row-main { flex: 1; min-width: 0; }
.opennit-ticket-row-top {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
.opennit-ticket-id {
font-size: 0.74rem;
font-weight: 700;
color: var(--itk-muted);
background: var(--itk-surface-2);
border: 1px solid var(--itk-line);
border-radius: 6px;
padding: 0.05rem 0.4rem;
flex-shrink: 0;
}
.opennit-ticket-subject {
flex: 1 1 auto;
min-width: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--itk-ink);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Status-Badge (Pille mit Punkt) */
.opennit-ticket-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.18rem 0.6rem;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
}
.opennit-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.opennit-status-new { background: #e0edff; color: #1d4ed8; }
.opennit-status-open { background: #fef3c7; color: #a16207; }
.opennit-status-waiting { background: #ffedd5; color: #c2410c; }
.opennit-status-solved { background: #dcfce7; color: #15803d; }
.opennit-status-closed { background: #eef0f6; color: #64748b; }
/* Meta-Zeile unter dem Betreff */
.opennit-ticket-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.9rem;
font-size: 0.78rem;
color: var(--itk-muted);
margin-top: 0.45rem;
}
.opennit-meta-item {
display: inline-flex;
align-items: center;
gap: 0.32rem;
}
.opennit-meta-item svg { color: #aab2c4; }
.opennit-meta-replies {
color: var(--itk-accent);
font-weight: 600;
}
.opennit-meta-replies svg { color: var(--itk-accent); }
/* Chevron-Animation */
.opennit-ticket-chevron {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #9aa3b2;
transition: transform 0.2s, background .15s, color .15s;
}
.opennit-ticket-row-header:hover .opennit-ticket-chevron {
background: #eef0f6;
color: var(--itk-accent);
}
@media (max-width: 600px) {
.opennit-ticket-row-header { flex-wrap: nowrap; }
.opennit-ticket-subject { white-space: normal; }
.opennit-tickets-toolbar { padding: 0.9rem 1.1rem 0.3rem; }
.opennit-tickets-list { padding: 0.5rem 1.1rem 1.1rem; }
}
/* ----------------------------------------------------------------
Asset-Karten (Grid wie Leihen)
---------------------------------------------------------------- */
.opennit-assets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.opennit-asset-card {
background: #fff;
border: 1px solid #e5e7eb;
border-left: 4px solid #3b82f6;
border-radius: 0.375rem;
overflow: hidden;
}
.opennit-asset-location {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
color: #6b7280;
margin-top: 0.3rem;
}
/* ----------------------------------------------------------------
Durchsuchbare Dropdown-Komponente (Combo)
---------------------------------------------------------------- */
.opennit-combo {
position: relative;
}
/* Platz für den Dropdown-Pfeil reservieren */
.opennit-form-control.opennit-combo-search {
padding-right: 2.2rem;
}
/* Klickbarer Dropdown-Pfeil (Affordance) */
.opennit-combo-chevron {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 2.1rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--itk-muted);
cursor: pointer;
transition: color .15s;
}
.opennit-combo-chevron svg {
width: 16px;
height: 16px;
transition: transform .18s;
}
.opennit-combo-chevron:hover { color: var(--itk-ink); }
.opennit-combo-open .opennit-combo-chevron { color: var(--itk-accent); }
.opennit-combo-open .opennit-combo-chevron svg { transform: rotate(180deg); }
.opennit-combo-dropdown {
/* Alle kritischen Werte auch als CSS-Fallback – JS überschreibt sie inline */
position: absolute !important;
background: #fff !important;
border: 1px solid #3b82f6 !important;
border-top: none !important;
border-radius: 0 0 0.375rem 0.375rem !important;
max-height: 210px !important;
overflow-y: auto !important;
z-index: 2147483647 !important;
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .12) !important;
box-sizing: border-box !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.opennit-combo-search:focus {
border-radius: 0.375rem 0.375rem 0 0;
}
.opennit-combo-option {
display: block !important;
padding: 0.5rem 0.75rem !important;
cursor: pointer !important;
font-size: 0.9rem !important;
color: #1f2937 !important;
border-bottom: 1px solid #f3f4f6 !important;
visibility: visible !important;
opacity: 1 !important;
}
.opennit-combo-option:last-child {
border-bottom: none;
}
.opennit-combo-option.opennit-combo-hover,
.opennit-combo-option:hover {
background: #eff6ff;
color: #1d4ed8;
}
.opennit-combo-option.opennit-combo-selected {
background: #dbeafe;
color: #1d4ed8;
font-weight: 600;
}
.opennit-combo-option.opennit-combo-option-none {
color: #9ca3af;
font-style: italic;
}
/* ----------------------------------------------------------------
Ticket-Detail-Bereich (expandierbar)
---------------------------------------------------------------- */
.opennit-ticket-detail {
display: none;
border-top: 1px solid var(--itk-line);
padding: 1.1rem 1.15rem 1.15rem;
background: var(--itk-surface-2);
}
.opennit-ticket-detail.is-open {
display: block;
}
.opennit-ticket-detail-loading {
font-size: 0.85rem;
color: #9ca3af;
padding: 0.5rem 0;
}
.opennit-ticket-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
font-size: 0.82rem;
color: #374151;
margin-bottom: 0.85rem;
}
.opennit-ticket-detail-meta-item {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.opennit-ticket-detail-meta-label {
font-weight: 600;
color: #6b7280;
}
/* Reply thread */
.opennit-reply-thread {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1rem;
}
.opennit-reply {
border-radius: 0.4rem;
padding: 0.6rem 0.85rem;
font-size: 0.875rem;
line-height: 1.55;
}
/* Ursprüngliche Ticket-Nachricht: neutraler grauer Rand */
.opennit-reply-initial {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-left: 3px solid #9ca3af;
}
.opennit-reply-staff {
background: #eff6ff;
border: 1px solid #bfdbfe;
border-left: 3px solid #3b82f6;
}
.opennit-reply-customer {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 3px solid #16a34a;
}
/* Role-Badge (Pille vor Autorname) */
.opennit-reply-role-badge {
display: inline-block;
padding: 0.1rem 0.45rem;
border-radius: 9999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
flex-shrink: 0;
}
.opennit-role-staff { background: #dbeafe; color: #1d4ed8; }
.opennit-role-customer { background: #dcfce7; color: #15803d; }
.opennit-role-initial { background: #f3f4f6; color: #6b7280; }
.opennit-reply-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.3rem;
flex-wrap: wrap;
}
.opennit-reply-author {
font-weight: 700;
font-size: 0.82rem;
color: #111827;
}
.opennit-reply-date {
font-size: 0.75rem;
color: #9ca3af;
white-space: nowrap;
}
.opennit-reply-body {
color: #374151;
}
.opennit-reply-body p {
margin: 0 0 0.4rem;
}
.opennit-reply-body p:last-child {
margin-bottom: 0;
}
/* Asset link in ticket */
.opennit-ticket-asset-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: #1d4ed8;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 0.3rem;
padding: 0.2rem 0.55rem;
margin-bottom: 0.75rem;
}
/* Inline-Bilder in Antworten */
.opennit-reply-image {
display: block;
max-width: 100%;
border-radius: 4px;
margin-top: 0.5rem;
}
.opennit-reply-attachments {
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: flex-start;
}
/* Attachment link */
.opennit-attachment-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: #374151;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 0.3rem;
padding: 0.2rem 0.55rem;
text-decoration: none;
margin-bottom: 0.75rem;
}
.opennit-attachment-link:hover {
background: #e5e7eb;
color: #111827;
}
/* Geschlossenes Ticket – Hinweis statt Formular */
.opennit-ticket-closed-notice {
margin-top: 0.75rem;
border-top: 1px solid #e5e7eb;
padding-top: 0.85rem;
font-size: 0.84rem;
color: #6b7280;
font-style: italic;
}
/* Reply form */
.opennit-reply-form {
margin-top: 0.75rem;
border-top: 1px solid #e5e7eb;
padding-top: 0.85rem;
}
.opennit-reply-form-title {
font-size: 0.85rem;
font-weight: 700;
color: #374151;
margin-bottom: 0.5rem;
}
.opennit-reply-textarea {
width: 100%;
min-height: 80px;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 0.875rem;
font-family: inherit;
color: #1f2937;
background: #fff;
box-sizing: border-box;
resize: vertical;
}
.opennit-reply-textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.opennit-reply-send-btn {
margin-top: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 1rem;
background: #3b82f6;
color: #fff;
border: none;
border-radius: 0.35rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
.opennit-reply-send-btn:hover {
background: #2563eb;
}
.opennit-reply-send-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.opennit-reply-feedback {
margin-top: 0.45rem;
font-size: 0.82rem;
padding: 0.35rem 0.65rem;
border-radius: 0.3rem;
display: none;
}
/* Ticket card: click cursor */
.opennit-ticket-card-header {
cursor: pointer;
}
/* Warranty badges */
.opennit-warranty-ok { color: #15803d; }
.opennit-warranty-warn { color: #a16207; }
.opennit-warranty-exp { color: #b91c1c; }
/* Asset location + warranty in device list */
.opennit-device-extra {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.85rem;
margin-top: 0.25rem;
}
.opennit-device-extra-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.78rem;
color: #6b7280;
}
/* ----------------------------------------------------------------
"Ticket melden"-Button in der Asset-Übersicht
---------------------------------------------------------------- */
.opennit-btn-ticket {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.1rem;
padding: 0.4rem 0.8rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--itk-accent);
background: #eef0fe;
border: 1.5px solid #dcdcfb;
border-radius: var(--itk-radius-sm);
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
}
.opennit-btn-ticket:hover {
background: #e0e0fb;
border-color: var(--itk-accent);
color: var(--itk-accent);
text-decoration: none;
}
/* ----------------------------------------------------------------
Ticket-Filter-Tabs
---------------------------------------------------------------- */
.opennit-ticket-filter-tabs {
display: inline-flex;
gap: 0.3rem;
padding: 0.25rem;
background: var(--itk-surface-2);
border: 1px solid var(--itk-line);
border-radius: 9999px;
flex-wrap: wrap;
}
.opennit-tab {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
font-size: 0.82rem;
font-weight: 600;
border: none;
border-radius: 9999px;
background: transparent;
color: var(--itk-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow .15s;
}
.opennit-tab:hover {
color: var(--itk-ink);
}
.opennit-tab-active {
background: #fff;
color: var(--itk-accent);
box-shadow: var(--itk-shadow-sm);
}
.opennit-tab-active:hover {
color: var(--itk-accent);
}
.opennit-tab-count {
display: inline-block;
background: rgba(15,23,42,.08);
color: inherit;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
padding: 0 0.4rem;
min-width: 1.25rem;
text-align: center;
}
.opennit-tab-active .opennit-tab-count {
background: rgba(79,70,229,.14);
}
.opennit-ticket-hidden {
display: none !important;
}
.opennit-tickets-limit-hint {
font-size: 0.76rem;
color: #9aa3b2;
margin: 0;
}
/* ----------------------------------------------------------------
Kalender-Widget (Leihgeräte-Verfügbarkeit)
---------------------------------------------------------------- */
.opennit-calendar-wrap {
margin: 0.75rem 0 1rem;
}
.opennit-cal-loading {
font-size: 0.82rem;
color: #9ca3af;
padding: 0.5rem 0;
}
.opennit-cal-months {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.opennit-cal-month {
min-width: 196px;
}
.opennit-cal-month-title {
font-size: 0.82rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.4rem;
text-align: center;
}
.opennit-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.opennit-cal-dow {
text-align: center;
font-size: 0.7rem;
font-weight: 600;
color: #9ca3af;
padding: 2px 0;
}
.opennit-cal-day {
text-align: center;
font-size: 0.78rem;
padding: 4px 2px;
border-radius: 4px;
line-height: 1.4;
color: #374151;
}
.opennit-cal-day[role="button"] {
cursor: pointer;
}
.opennit-cal-day[role="button"]:hover {
background: #dbeafe;
color: #1d4ed8;
}
.opennit-cal-day-empty {
visibility: hidden;
}
.opennit-cal-day-today {
border: 1px solid #1d4ed8;
color: #1d4ed8;
font-weight: 600;
}
.opennit-cal-day-occupied {
background: #fee2e2;
color: #b91c1c;
cursor: not-allowed;
text-decoration: line-through;
}
.opennit-cal-day-outofrange {
color: #d1d5db;
cursor: not-allowed;
opacity: 0.5;
}
.opennit-cal-day-disabled {
color: #d1d5db;
cursor: default;
}
.opennit-cal-day-selected {
background: #1d4ed8;
color: #fff !important;
font-weight: 600;
border-radius: 4px;
}
.opennit-cal-day-inrange {
background: #dbeafe;
color: #1e40af;
border-radius: 0;
}
.opennit-cal-hint {
font-size: 0.78rem;
color: #6b7280;
margin: 0.5rem 0 0;
}
.opennit-cal-hint-ok {
color: #15803d;
font-weight: 500;
}
.opennit-cal-hint-error {
color: #b91c1c;
font-weight: 500;
}
@media (max-width: 640px) {
.opennit-cal-months {
flex-direction: column;
gap: 1.5rem;
}
.opennit-cal-month {
width: 100%;
}
}
/* ----------------------------------------------------------------
Wiki ([opennit_wiki])
---------------------------------------------------------------- */
.opennit-wiki {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
color: #1f2937;
width: 100%;
}
/* Topic grid (index + sub-topics) */
.opennit-wiki-topics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.opennit-wiki-topic-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1rem 1.1rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.6rem;
text-decoration: none;
color: #1f2937;
transition: border-color 0.15s, box-shadow 0.15s;
overflow: hidden;
}
.opennit-wiki-topic-card:hover {
border-color: #93c5fd;
box-shadow: 0 2px 8px rgba(59,130,246,.12);
color: #1d4ed8;
}
.opennit-wiki-topic-icon {
font-size: 1.3rem;
line-height: 1;
}
.opennit-wiki-topic-img {
display: block;
width: 100%;
height: 100px;
overflow: hidden;
border-radius: 0.35rem;
margin-bottom: 0.25rem;
}
.opennit-wiki-topic-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.opennit-wiki-topic-name {
font-weight: 600;
font-size: 0.92rem;
line-height: 1.3;
}
.opennit-wiki-topic-breadcrumb {
font-size: 0.78rem;
color: #9ca3af;
line-height: 1.2;
}
/* Topic cover image */
/* Navigation / breadcrumb */
.opennit-wiki-nav {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 1.25rem;
font-size: 0.83rem;
flex-wrap: wrap;
color: #9ca3af;
}
.opennit-wiki-back {
display: inline-flex;
align-items: center;
gap: 0.2rem;
color: #3b82f6;
text-decoration: none;
font-weight: 500;
white-space: nowrap;
}
.opennit-wiki-back:hover {
color: #1d4ed8;
text-decoration: underline;
}
.opennit-wiki-bc-sep {
color: #d1d5db;
user-select: none;
line-height: 1;
}
.opennit-wiki-bc-part {
color: #6b7280;
}
.opennit-wiki-bc-link {
text-decoration: none;
color: #6b7280;
}
.opennit-wiki-bc-link:hover {
color: #3b82f6;
text-decoration: underline;
}
.opennit-wiki-bc-current {
color: #374151;
font-weight: 500;
}
/* Topic title */
.opennit-wiki-topic-title {
font-size: 1.4rem;
font-weight: 700;
color: #111827;
margin: 0 0 1.25rem;
}
/* Section labels */
.opennit-wiki-section-label {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #6b7280;
margin: 0 0 0.5rem;
}
/* Sub-topics block */
.opennit-wiki-subtopics {
margin-bottom: 1.75rem;
}
/* Page list (clickable cards) */
.opennit-wiki-page-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.opennit-wiki-page-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.1rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
text-decoration: none;
color: #1f2937;
transition: border-color 0.15s, box-shadow 0.15s;
}
.opennit-wiki-page-card:hover {
border-color: #93c5fd;
box-shadow: 0 2px 8px rgba(59,130,246,.1);
color: #1d4ed8;
}
.opennit-wiki-page-card-title {
font-weight: 600;
font-size: 0.95rem;
flex: 1;
line-height: 1.3;
}
.opennit-wiki-page-card-date {
font-size: 0.78rem;
color: #9ca3af;
white-space: nowrap;
}
.opennit-wiki-page-card-arrow {
color: #9ca3af;
flex-shrink: 0;
}
.opennit-wiki-page-card:hover .opennit-wiki-page-card-arrow {
color: #3b82f6;
}
/* Full page view */
.opennit-wiki-page--full {
width: 100%;
}
.opennit-wiki-page-title {
font-size: 1.4rem;
font-weight: 700;
color: #111827;
margin: 0 0 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
.opennit-wiki-page-content {
line-height: 1.75;
color: #374151;
}
.opennit-wiki-page-content img {
max-width: 100%;
height: auto;
border-radius: 0.4rem;
margin: 0.75rem 0;
}
.opennit-wiki-page-content h1,
.opennit-wiki-page-content h2,
.opennit-wiki-page-content h3,
.opennit-wiki-page-content h4 {
color: #111827;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.opennit-wiki-page-content pre,
.opennit-wiki-page-content code {
background: #f3f4f6;
border-radius: 0.3rem;
font-size: 0.88em;
}
.opennit-wiki-page-content pre {
padding: 0.75rem 1rem;
overflow-x: auto;
}
.opennit-wiki-page-content code {
padding: 0.1em 0.4em;
}
.opennit-wiki-page-content a {
color: #3b82f6;
}
.opennit-wiki-page-content a:hover {
color: #1d4ed8;
}
.opennit-wiki-page-content table {
border-collapse: collapse;
width: 100%;
font-size: 0.92rem;
overflow-x: auto;
display: block;
}
.opennit-wiki-page-content th,
.opennit-wiki-page-content td {
border: 1px solid #e5e7eb;
padding: 0.5rem 0.75rem;
text-align: left;
}
.opennit-wiki-page-content th {
background: #f9fafb;
font-weight: 600;
}
.opennit-wiki-page-meta {
margin-top: 1.5rem;
font-size: 0.78rem;
color: #9ca3af;
border-top: 1px solid #f3f4f6;
padding-top: 0.6rem;
}
/* Empty state */
.opennit-wiki-empty {
color: #6b7280;
font-size: 0.92rem;
padding: 1rem 0;
}
/* Error */
.opennit-wiki-error {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
padding: 0.75rem 1rem;
border-radius: 0.4rem;
font-size: 0.9rem;
}
@media (max-width: 600px) {
.opennit-wiki-topics-grid {
grid-template-columns: 1fr 1fr;
}
.opennit-wiki-page-card-date {
display: none;
}
}
/* =========================================================================
OpenNIT Website-Assistent (Bubble + Inline)
========================================================================= */
.opennit-asst-panel {
display: flex; flex-direction: column;
background: #fff; border: 1px solid #e3e8ee; border-radius: 12px;
overflow: hidden; box-shadow: 0 6px 28px rgba(0,0,0,.12);
font-size: 14px; color: #1e293b;
}
.opennit-assistant .opennit-asst-panel { height: 460px; max-width: 100%; }
.opennit-asst-header {
background: linear-gradient(135deg, #3c8dbc 0%, #1a5276 100%);
color: #fff; padding: 12px 14px; font-weight: 600;
display: flex; align-items: center; justify-content: space-between;
}
.opennit-asst-close {
background: none; border: none; color: #fff; font-size: 22px;
line-height: 1; cursor: pointer; padding: 0 4px;
}
.opennit-asst-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }
.opennit-asst-msg { display: flex; }
.opennit-asst-msg-user { justify-content: flex-end; }
.opennit-asst-bubble {
max-width: 85%; padding: 8px 11px; border-radius: 10px; line-height: 1.45;
white-space: normal; word-wrap: break-word;
}
.opennit-asst-msg-assistant .opennit-asst-bubble { background: #fff; border: 1px solid #e3e8ee; }
.opennit-asst-msg-user .opennit-asst-bubble { background: #3c8dbc; color: #fff; }
.opennit-asst-bubble ul { margin: .3em 0; padding-left: 1.2em; }
.opennit-asst-bubble code { background: rgba(0,0,0,.06); padding: .05em .3em; border-radius: 4px; font-size: .9em; }
.opennit-asst-sources { margin-top: 6px; font-size: 12px; color: #64748b; }
/* Animierter „tippt…"-Indikator */
.opennit-asst-typing { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; }
.opennit-asst-typing span {
width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; display: inline-block;
animation: opennit-asst-bounce 1.2s infinite ease-in-out both;
}
.opennit-asst-typing span:nth-child(2) { animation-delay: .18s; }
.opennit-asst-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes opennit-asst-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: .35; }
40% { transform: translateY(-5px); opacity: 1; }
}
.opennit-asst-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #e3e8ee; background: #fff; }
.opennit-asst-input input {
flex: 1; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px;
font-size: 14px; font-family: inherit;
}
.opennit-asst-input button {
border: none; background: #3c8dbc; color: #fff; width: 42px; border-radius: 8px;
cursor: pointer; font-size: 16px;
}
.opennit-asst-input button:disabled { opacity: .5; cursor: default; }
/* Floating-Bubble */
.opennit-asst-fab {
position: fixed; bottom: 22px; right: 22px; z-index: 99998;
width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
background: linear-gradient(135deg, #3c8dbc 0%, #1a5276 100%); color: #fff;
font-size: 24px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.opennit-asst-fab-open { opacity: .85; }
.opennit-asst-fab-icon {
width: 30px; height: 30px; object-fit: contain; border-radius: 6px; display: block;
}
.opennit-asst-bubble-wrap {
position: fixed; bottom: 90px; right: 22px; z-index: 99998;
width: 370px; max-width: calc(100vw - 32px);
}
.opennit-asst-bubble-wrap .opennit-asst-panel { height: 520px; max-height: calc(100vh - 130px); }
@media (max-width: 480px) {
.opennit-asst-bubble-wrap { right: 8px; left: 8px; width: auto; }
}