/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; font-size: 16px;
       line-height: 1.5; color: #1a1a1a; background: #f5f5f5; }
a { color: #3b82f6; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
.container { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem; }

/* ===== Navbar ===== */
.navbar { background: #1e293b; color: #f8fafc; display: flex;
          align-items: center; gap: 1.5rem; padding: 0 1.5rem; height: 56px; }
.navbar-brand { font-weight: 700; font-size: 1.1rem; color: #f8fafc; }
.navbar-links { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.navbar-links a { color: #cbd5e1; font-size: 0.9rem; }
.navbar-links a:hover, .navbar-links a.active { color: #f8fafc; text-decoration: none; }
.user-dropdown { position: relative; }
.dropdown-menu { position: absolute; right: 0; top: 110%; background: #fff;
                 border: 1px solid #e2e8f0; border-radius: 6px; min-width: 160px;
                 box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 50;
                 display: flex; flex-direction: column; }
.dropdown-menu a, .dropdown-menu button { padding: .5rem 1rem; font-size: .9rem;
  color: #1a1a1a; background: none; border: none; text-align: left; cursor: pointer; width: 100%; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: #f1f5f9; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: .4rem;
       padding: .5rem 1rem; border-radius: 6px; font-size: .9rem;
       font-weight: 500; border: none; cursor: pointer; }
.btn-primary { background: #3b82f6; color: #fff; }
.btn-primary:hover { background: #2563eb; }
.btn-ghost { background: transparent; color: #cbd5e1; border: none; cursor: pointer;
             font-size: .9rem; padding: .25rem .5rem; }

/* ===== Forms ===== */
.form-group { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; }
.form-group label { font-size: .875rem; font-weight: 500; color: #374151; }
.form-group input, .form-group select, .form-group textarea {
  padding: .5rem .75rem; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: .9rem; width: 100%; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* ===== Login ===== */
.login-container { max-width: 400px; margin: 6rem auto; background: #fff;
                   padding: 2rem; border-radius: 12px;
                   box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.login-container h1 { margin-bottom: 1.5rem; font-size: 1.5rem; text-align: center; }
.login-form .btn { width: 100%; justify-content: center; margin-top: .5rem; }

/* ===== Page Header ===== */
.page-header { display: flex; justify-content: space-between;
               align-items: center; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; }

/* ===== Form Card ===== */
.form-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
             padding: 2rem; max-width: 640px; }
.form-hint { font-size: .8rem; color: #94a3b8; margin-top: .2rem; }
.form-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }

/* ===== Detail Grid ===== */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.detail-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
               padding: 1.25rem; }
.detail-card h2 { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }
.data-list { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem;
             font-size: .9rem; }
.data-list dt { color: #64748b; font-weight: 500; }
.slug { font-size: .8rem; color: #94a3b8; background: #f1f5f9;
        padding: .1rem .4rem; border-radius: 4px; }
.note-textarea { width: 100%; height: 140px; resize: vertical;
                 padding: .5rem; border: 1px solid #d1d5db; border-radius: 6px;
                 font-size: .9rem; }
.vision-content { background: #f8fafc; padding: 1rem; border-radius: 6px;
                  font-size: .8rem; overflow-x: auto; white-space: pre-wrap;
                  max-height: 400px; overflow-y: auto; }
.accordion-header { cursor: pointer; user-select: none;
                    display: flex; justify-content: space-between; }
.terminal-output { background: #1e293b; color: #e2e8f0; padding: 1rem;
                   border-radius: 6px; font-size: .8rem; font-family: monospace;
                   min-height: 100px; max-height: 400px; overflow-y: auto;
                   white-space: pre-wrap; margin-top: .75rem; }
.inline-select { font-size: .8rem; margin-left: .5rem; }
.header-actions { display: flex; gap: .5rem; }
.text-muted { font-size: .85rem; color: #64748b; }
.mt-1 { margin-top: .5rem; }
.input-disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #64748b; }
.empty-state p { margin-bottom: 1rem; }

/* ===== ml-auto ===== */
.ml-auto { margin-left: auto; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 1rem; }

/* ===== Project Card ===== */
.project-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
                padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.project-card-name { font-weight: 600; font-size: 1rem; }
.project-card-desc { font-size: .85rem; color: #64748b; }
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 9999px;
         font-size: .75rem; font-weight: 500; }
.badge-geplant    { background: #e2e8f0; color: #475569; }
.badge-aktiv      { background: #dcfce7; color: #16a34a; }
.badge-pausiert   { background: #fef9c3; color: #ca8a04; }
.badge-abgeschlossen { background: #dbeafe; color: #1d4ed8; }
.badge-archiviert { background: #f1f5f9; color: #94a3b8; }
.tag-chip { background: #e0f2fe; color: #0369a1; padding: .15rem .5rem;
            border-radius: 9999px; font-size: .75rem; }
.category-dot { width: 10px; height: 10px; border-radius: 50%;
                display: inline-block; margin-right: .25rem; }
.card-icons { display: flex; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.card-icons a { font-size: .85rem; color: #64748b; }
.card-icons a:hover { color: #1a1a1a; }

/* ===== Data Table ===== */
.data-table { width: 100%; border-collapse: collapse; background: #fff;
              border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.data-table th { background: #f8fafc; padding: .75rem 1rem; text-align: left;
                 font-size: .875rem; font-weight: 600; color: #374151;
                 border-bottom: 1px solid #e2e8f0; }
.data-table td { padding: .75rem 1rem; font-size: .9rem; color: #1a1a1a;
                 border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }
.row-actions { display: flex; gap: .75rem; }
.btn-link { background: none; border: none; cursor: pointer; font-size: .875rem;
            color: #3b82f6; padding: 0; }
.btn-link:hover { text-decoration: underline; }
.btn-danger { color: #dc2626; }
.btn-danger:hover { color: #b91c1c; }