"""
Admin Panel Component - CSS Styles

Extracted from admin_panel.py for maintainability.
Contains all CSS styles for the admin panel modal, tabs, forms, and GPU controls.
"""


def get_admin_panel_css() -> str:
    """CSS fuer Admin Panel zurueckgeben"""
    return """
/* ==========================================
           ADMIN PANEL STYLES
           ========================================== */
        .admin-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          z-index: 10000;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(4px);
        }

        .admin-modal.active {
          display: flex;
        }

        .admin-modal-content {
          background: var(--bp-surface);
          border-radius: 16px;
          width: 95%;
          max-width: 1000px;
          max-height: 90vh;
          display: flex;
          flex-direction: column;
          box-shadow: 0 20px 60px rgba(0,0,0,0.4);
          border: 1px solid var(--bp-border);
        }

        .admin-modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 24px;
          border-bottom: 1px solid var(--bp-border);
        }

        .admin-modal-header h2 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .admin-tabs {
          display: flex;
          gap: 4px;
          padding: 12px 24px;
          border-bottom: 1px solid var(--bp-border);
          background: var(--bp-surface-elevated);
        }

        .admin-tab {
          padding: 8px 16px;
          border: none;
          background: transparent;
          color: var(--bp-text-muted);
          cursor: pointer;
          border-radius: 8px;
          font-size: 13px;
          transition: all 0.2s ease;
        }

        .admin-tab:hover {
          background: var(--bp-border-subtle);
          color: var(--bp-text);
        }

        .admin-tab.active {
          background: var(--bp-primary);
          color: white;
        }

        .admin-body {
          padding: 24px;
          overflow-y: auto;
          flex: 1;
        }

        .admin-content {
          display: none;
        }

        .admin-content.active {
          display: block;
        }

        .admin-toolbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          gap: 12px;
        }

        .admin-toolbar-left {
          display: flex;
          gap: 12px;
          align-items: center;
        }

        .admin-search {
          padding: 8px 12px;
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
          width: 250px;
        }

        .admin-table {
          width: 100%;
          border-collapse: collapse;
          font-size: 13px;
        }

        .admin-table th,
        .admin-table td {
          padding: 12px;
          text-align: left;
          border-bottom: 1px solid var(--bp-border);
        }

        .admin-table th {
          background: var(--bp-surface-elevated);
          font-weight: 600;
          color: var(--bp-text);
        }

        .admin-table tr:hover {
          background: var(--bp-surface-elevated);
        }

        .admin-table td {
          color: var(--bp-text-muted);
        }

        .admin-badge {
          display: inline-block;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
        }

        .admin-badge-published {
          background: rgba(74, 222, 128, 0.2);
          color: #4ADE80;
        }

        .admin-badge-draft {
          background: rgba(251, 191, 36, 0.2);
          color: #FBBF24;
        }

        .admin-badge-archived {
          background: rgba(156, 163, 175, 0.2);
          color: #9CA3AF;
        }

        .admin-badge-rejected {
          background: rgba(239, 68, 68, 0.2);
          color: #EF4444;
        }

        .admin-badge-review {
          background: rgba(147, 51, 234, 0.2);
          color: #A855F7;
        }

        .admin-badge-approved {
          background: rgba(34, 197, 94, 0.2);
          color: #22C55E;
        }

        .admin-badge-submitted {
          background: rgba(59, 130, 246, 0.2);
          color: #3B82F6;
        }

        .admin-badge-mandatory {
          background: rgba(239, 68, 68, 0.2);
          color: #EF4444;
        }

        .admin-badge-optional {
          background: rgba(96, 165, 250, 0.2);
          color: #60A5FA;
        }

        .admin-actions {
          display: flex;
          gap: 8px;
        }

        .admin-btn {
          padding: 6px 10px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-size: 12px;
          transition: all 0.2s ease;
        }

        .admin-btn-edit {
          background: var(--bp-primary);
          color: white;
        }

        .admin-btn-edit:hover {
          filter: brightness(1.1);
        }

        .admin-btn-delete {
          background: rgba(239, 68, 68, 0.2);
          color: #EF4444;
        }

        .admin-btn-delete:hover {
          background: rgba(239, 68, 68, 0.3);
        }

        .admin-btn-publish {
          background: rgba(74, 222, 128, 0.2);
          color: #4ADE80;
        }

        .admin-btn-publish:hover {
          background: rgba(74, 222, 128, 0.3);
        }

        .admin-form {
          display: none;
          background: var(--bp-surface-elevated);
          border-radius: 12px;
          padding: 20px;
          margin-bottom: 20px;
          border: 1px solid var(--bp-border);
        }

        .admin-form.active {
          display: block;
        }

        /* Info Text in Toolbar */
        .admin-info-text {
          font-size: 12px;
          color: var(--bp-text-muted);
          font-style: italic;
        }

        /* Dialog Overlay */
        .admin-dialog {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          z-index: 1000;
          align-items: center;
          justify-content: center;
        }

        .admin-dialog.active {
          display: flex;
        }

        .admin-dialog-content {
          background: var(--bp-surface);
          border-radius: 12px;
          padding: 24px;
          max-width: 500px;
          width: 90%;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }

        .admin-dialog-content h3 {
          margin: 0 0 12px 0;
          font-size: 18px;
        }

        .admin-dialog-info {
          font-size: 13px;
          color: var(--bp-text-muted);
          margin-bottom: 20px;
          line-height: 1.5;
        }

        .admin-dialog-actions {
          display: flex;
          gap: 12px;
          justify-content: flex-end;
          margin-top: 20px;
        }

        /* Scheduled Badge */
        .admin-badge-scheduled {
          background: #f59e0b;
          color: white;
        }

        /* Version Compare Overlay */
        .version-compare-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--bp-bg);
          z-index: 2000;
          flex-direction: column;
        }

        .version-compare-overlay.active {
          display: flex;
        }

        .version-compare-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 24px;
          background: var(--bp-surface);
          border-bottom: 1px solid var(--bp-border);
        }

        .version-compare-header h2 {
          margin: 0;
          font-size: 18px;
        }

        .version-compare-info {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 14px;
        }

        .compare-vs {
          color: var(--bp-text-muted);
          font-weight: 600;
        }

        .version-compare-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          flex: 1;
          overflow: hidden;
          gap: 0;
        }

        .version-compare-panel {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          border-right: 1px solid var(--bp-border);
        }

        .version-compare-panel:last-child {
          border-right: none;
        }

        .version-compare-panel-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 20px;
          background: var(--bp-surface);
          border-bottom: 1px solid var(--bp-border);
        }

        .compare-label {
          padding: 4px 12px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 600;
        }

        .compare-label-published {
          background: rgba(34, 197, 94, 0.15);
          color: #22c55e;
        }

        .compare-label-draft {
          background: rgba(59, 130, 246, 0.15);
          color: #3b82f6;
        }

        .version-compare-content {
          flex: 1;
          overflow-y: auto;
          padding: 24px;
          font-size: 14px;
          line-height: 1.7;
        }

        .version-compare-content h1,
        .version-compare-content h2,
        .version-compare-content h3 {
          margin-top: 24px;
          margin-bottom: 12px;
        }

        .version-compare-content p {
          margin-bottom: 12px;
        }

        .version-compare-content ul,
        .version-compare-content ol {
          margin-bottom: 12px;
          padding-left: 24px;
        }

        .version-compare-content .no-content {
          color: var(--bp-text-muted);
          font-style: italic;
          text-align: center;
          padding: 40px;
        }

        .version-compare-footer {
          padding: 12px 24px;
          background: var(--bp-surface);
          border-top: 1px solid var(--bp-border);
          max-height: 150px;
          overflow-y: auto;
        }

        .compare-history-title {
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 8px;
          color: var(--bp-text-muted);
        }

        .compare-history-item {
          font-size: 12px;
          padding: 4px 0;
          border-bottom: 1px solid var(--bp-border-subtle);
        }

        .compare-history-item:last-child {
          border-bottom: none;
        }

        .compare-history-list {
          display: flex;
          flex-wrap: wrap;
          gap: 4px 8px;
          font-size: 12px;
          color: var(--bp-text-muted);
        }

        .admin-form-title {
          margin: 0 0 16px 0;
          font-size: 16px;
          font-weight: 600;
        }

        .admin-form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          margin-bottom: 16px;
        }

        .admin-form-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .admin-form-group.full-width {
          grid-column: 1 / -1;
        }

        .admin-form-label {
          font-size: 12px;
          font-weight: 600;
          color: var(--bp-text);
        }

        .admin-form-input,
        .admin-form-select,
        .admin-form-textarea {
          padding: 10px 12px;
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          background: var(--bp-surface);
          color: var(--bp-text);
          font-size: 13px;
        }

        .admin-form-textarea {
          min-height: 150px;
          resize: vertical;
          font-family: inherit;
        }

        .admin-form-actions {
          display: flex;
          gap: 12px;
          justify-content: flex-end;
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid var(--bp-border);
        }

        .admin-empty {
          text-align: center;
          padding: 40px;
          color: var(--bp-text-muted);
        }

        .admin-loading {
          text-align: center;
          padding: 40px;
          color: var(--bp-text-muted);
        }

        [data-theme="light"] .admin-modal-content {
          background: #FFFFFF;
          border-color: #E0E0E0;
        }

        [data-theme="light"] .admin-tabs {
          background: #F5F5F5;
        }

        [data-theme="light"] .admin-table th {
          background: #F5F5F5;
        }

        [data-theme="light"] .admin-form {
          background: #F8F8F8;
          border-color: #E0E0E0;
        }

        /* GPU Infrastructure Styles */
        .gpu-control-panel {
          background: var(--bp-surface-elevated);
          border-radius: 12px;
          padding: 20px;
          margin-bottom: 20px;
          border: 1px solid var(--bp-border);
        }

        .gpu-status-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
        }

        .gpu-status-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 13px;
          font-weight: 600;
        }

        .gpu-status-badge.running {
          background: rgba(34, 197, 94, 0.15);
          color: #22c55e;
        }

        .gpu-status-badge.stopped,
        .gpu-status-badge.exited {
          background: rgba(156, 163, 175, 0.15);
          color: #9ca3af;
        }

        .gpu-status-badge.loading,
        .gpu-status-badge.scheduling,
        .gpu-status-badge.creating {
          background: rgba(59, 130, 246, 0.15);
          color: #3b82f6;
        }

        .gpu-status-badge.error,
        .gpu-status-badge.unconfigured {
          background: rgba(239, 68, 68, 0.15);
          color: #ef4444;
        }

        .gpu-status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: currentColor;
        }

        .gpu-status-dot.running {
          animation: gpu-pulse 2s infinite;
        }

        @keyframes gpu-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }

        .gpu-info-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 12px;
          margin-bottom: 20px;
        }

        .gpu-info-card {
          background: var(--bp-surface);
          border-radius: 8px;
          padding: 12px;
          border: 1px solid var(--bp-border-subtle);
        }

        .gpu-info-label {
          font-size: 11px;
          color: var(--bp-text-muted);
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin-bottom: 4px;
        }

        .gpu-info-value {
          font-size: 16px;
          font-weight: 600;
          color: var(--bp-text);
        }

        .gpu-info-value.cost {
          color: #f59e0b;
        }

        .gpu-info-value.time {
          color: #3b82f6;
        }

        .gpu-controls {
          display: flex;
          gap: 12px;
          margin-top: 20px;
        }

        .gpu-btn {
          flex: 1;
          padding: 12px 20px;
          border: none;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          transition: all 0.2s ease;
        }

        .gpu-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .gpu-btn-start {
          background: #22c55e;
          color: white;
        }

        .gpu-btn-start:hover:not(:disabled) {
          background: #16a34a;
        }

        .gpu-btn-stop {
          background: #ef4444;
          color: white;
        }

        .gpu-btn-stop:hover:not(:disabled) {
          background: #dc2626;
        }

        .gpu-btn-refresh {
          background: var(--bp-surface);
          color: var(--bp-text);
          border: 1px solid var(--bp-border);
          flex: 0 0 auto;
          padding: 12px;
        }

        .gpu-btn-refresh:hover:not(:disabled) {
          background: var(--bp-surface-elevated);
        }

        .gpu-shutdown-warning {
          background: rgba(251, 191, 36, 0.1);
          border: 1px solid rgba(251, 191, 36, 0.3);
          border-radius: 8px;
          padding: 12px;
          margin-top: 16px;
          display: flex;
          align-items: center;
          gap: 10px;
          color: #fbbf24;
          font-size: 13px;
        }

        .gpu-cost-summary {
          margin-top: 20px;
          padding-top: 16px;
          border-top: 1px solid var(--bp-border);
        }

        .gpu-cost-summary h4 {
          margin: 0 0 12px 0;
          font-size: 14px;
          color: var(--bp-text-muted);
        }

        .gpu-audit-log {
          margin-top: 12px;
          max-height: 200px;
          overflow-y: auto;
          background: var(--bp-surface);
          border-radius: 8px;
          border: 1px solid var(--bp-border-subtle);
        }

        .gpu-audit-entry {
          padding: 8px 12px;
          border-bottom: 1px solid var(--bp-border-subtle);
          font-size: 12px;
          font-family: monospace;
        }

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

        .gpu-audit-time {
          color: var(--bp-text-muted);
          margin-right: 8px;
        }

        .gpu-endpoint-url {
          margin-top: 12px;
          padding: 10px 12px;
          background: var(--bp-surface);
          border-radius: 8px;
          font-family: monospace;
          font-size: 12px;
          color: var(--bp-text-muted);
          word-break: break-all;
        }

        .gpu-endpoint-url.active {
          color: #22c55e;
        }

        .gpu-spinner {
          width: 16px;
          height: 16px;
          border: 2px solid transparent;
          border-top-color: currentColor;
          border-radius: 50%;
          animation: gpu-spin 1s linear infinite;
        }

        @keyframes gpu-spin {
          to { transform: rotate(360deg); }
        }

        [data-theme="light"] .gpu-control-panel {
          background: #fafafa;
        }

        [data-theme="light"] .gpu-info-card {
          background: #ffffff;
        }
"""