/* =========================================================================
   Datenhafen — custom stylesheet
   Color tokens match AKS Altländer Kuvertierservice corporate identity (§12.1).
   No external CDN dependencies; system font stack only.
   ========================================================================= */

/* --- Design tokens ------------------------------------------------------- */
:root {
  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-light:  #3b82f6;
  --color-accent:         #E8091B;
  --color-accent-hover:   #c40716;
  --color-bg:             #FFFFFF;
  --color-surface:        #F4F6F9;
  --color-text:           #212529;
  --color-text-muted:     #6C757D;
  --color-border:         #DEE2E6;
  --color-success:        #198754;
  --color-success-bg:     #D1E7DD;
  --color-danger:         #DC3545;
  --color-danger-bg:      #F8D7DA;

  --font-stack: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --radius:     4px;
  --shadow:     0 2px 6px rgba(0,0,0,.12);
}

/* --- Reset & base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-stack);
  font-size:   1rem;
  line-height: 1.5;
  color:       var(--color-text);
  background:  var(--color-bg);
  display:     flex;
  flex-direction: column;
  min-height:  100vh;
}

a { color: var(--color-primary-light); }
a:hover { color: var(--color-primary); }

/* --- Header -------------------------------------------------------------- */
.dh-header {
  background:  #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow:  0 1px 4px rgba(0,0,0,.08);
}

.dh-header-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 1.5rem;
  height:    68px;
  display:   grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap:       1rem;
}

.dh-logo { text-decoration: none; justify-self: start; }

.dh-header-logo-img {
  height:    48px;
  width:     auto;
  display:   block;
}

.dh-nav {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  justify-self: center;
}

.dh-nav-greeting {
  font-size:  .9rem;
  color:      var(--color-text-muted);
}

.dh-nav-link {
  font-size:       .95rem;
  font-weight:     500;
  color:           var(--color-primary);
  text-decoration: none;
}

.dh-nav-link:hover { color: var(--color-primary-hover); text-decoration: underline; }

.dh-header-icons {
  display:     flex;
  align-items: center;
  gap:         1rem;
  justify-self: end;
}

.dh-header-icon-link {
  color:      #CC0000;
  display:    flex;
  transition: opacity .15s;
}

.dh-header-icon-link:hover { opacity: .7; color: #CC0000; }

/* --- Main content -------------------------------------------------------- */
.dh-main {
  flex: 1;
  max-width: 1100px;
  width:     100%;
  margin:    0 auto;
  padding:   2rem 1.5rem;
}

/* --- Footer -------------------------------------------------------------- */
.dh-footer {
  background:  var(--color-surface);
  border-top:  1px solid var(--color-border);
  font-size:   .85rem;
  color:       var(--color-text-muted);
}

.dh-footer-inner {
  max-width: 1100px;
  margin:    0 auto;
  padding:   .75rem 1.5rem;
}

.dh-footer a { color: var(--color-text-muted); }

/* --- Cards --------------------------------------------------------------- */
.dh-card {
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  margin-bottom: 1.5rem;
}

.dh-card-header {
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding:       .75rem 1.25rem;
  border-radius: var(--radius) var(--radius) 0 0;
}

.dh-card-title {
  font-size:   1.1rem;
  font-weight: 600;
  color:       var(--color-primary);
  margin:      0;
}

.dh-card-body { padding: 1.25rem; }

/* --- Login layout -------------------------------------------------------- */
.dh-login-wrap {
  display:         flex;
  justify-content: center;
  align-items:     flex-start;
  padding-top:     3rem;
}

.dh-login-card { width: 100%; max-width: 420px; }

/* --- Dashboard layout ---------------------------------------------------- */
.dh-dashboard { display: flex; flex-direction: column; gap: 1.5rem; }

.dh-upload-card  { width: 100%; }
.dh-list-card    { width: 100%; }

/* --- Forms --------------------------------------------------------------- */
.dh-form-group  { margin-bottom: 1rem; }

.dh-label {
  display:       block;
  font-weight:   600;
  font-size:     .9rem;
  margin-bottom: .35rem;
  color:         var(--color-text);
}

.dh-optional {
  font-weight: 400;
  color:       var(--color-text-muted);
  font-size:   .85em;
}

.dh-input {
  width:         100%;
  padding:       .45rem .75rem;
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  font-family:   var(--font-stack);
  font-size:     1rem;
  color:         var(--color-text);
  background:    var(--color-bg);
  transition:    border-color .15s, box-shadow .15s;
}

.dh-input:focus {
  outline:      none;
  border-color: var(--color-primary-light);
  box-shadow:   0 0 0 3px rgba(44,95,158,.2);
}

.dh-input-file { padding: .35rem .5rem; cursor: pointer; }

.dh-textarea { resize: vertical; min-height: 80px; }

.dh-hint {
  display:    block;
  font-size:  .8rem;
  color:      var(--color-text-muted);
  margin-top: .25rem;
}

.dh-form-actions { margin-top: 1.25rem; }

/* --- Buttons ------------------------------------------------------------- */
.dh-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           .4rem;
  padding:       .5rem 1.25rem;
  border:        none;
  border-radius: var(--radius);
  font-family:   var(--font-stack);
  font-size:     1rem;
  font-weight:   600;
  cursor:        pointer;
  text-decoration: none;
  transition:    background .15s, opacity .15s;
}

.dh-btn:disabled { opacity: .65; cursor: not-allowed; }

.dh-btn-primary {
  background: var(--color-primary);
  color:      #fff;
}
.dh-btn-primary:hover { background: var(--color-primary-hover); color: #fff; }

.dh-btn-accent {
  background: var(--color-accent);
  color:      #fff;
}
.dh-btn-accent:hover { background: var(--color-accent-hover); color: #fff; }

.dh-btn-outline-light {
  background:  transparent;
  color:       rgba(255,255,255,.9);
  border:      1px solid rgba(255,255,255,.5);
}
.dh-btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.dh-btn-sm  { padding: .3rem .8rem; font-size: .875rem; }
.dh-btn-full { width: 100%; justify-content: center; }

/* --- Alerts -------------------------------------------------------------- */
.alert {
  padding:       .75rem 1rem;
  border-left:   4px solid transparent;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  display:       flex;
  align-items:   flex-start;
  gap:           .75rem;
}

.alert-success {
  background:   var(--color-success-bg);
  border-color: var(--color-success);
  color:        #0f5132;
}

.alert-danger {
  background:   var(--color-danger-bg);
  border-color: var(--color-danger);
  color:        #842029;
}

.btn-close {
  background:  none;
  border:      none;
  cursor:      pointer;
  margin-left: auto;
  font-size:   1.1rem;
  line-height: 1;
  opacity:     .6;
  flex-shrink: 0;
}
.btn-close:hover { opacity: 1; }

.dh-upload-result:empty { display: none; }

/* --- Table --------------------------------------------------------------- */
.dh-table-wrap { overflow-x: auto; padding: 0; }

.dh-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .92rem;
}

.dh-table thead tr {
  background: var(--color-primary);
  color:      #fff;
}

.dh-table th {
  padding:    .6rem 1rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.dh-table td {
  padding:       .55rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.dh-table tbody tr:last-child td { border-bottom: none; }
.dh-table tbody tr:nth-child(even) { background: var(--color-surface); }
.dh-table tbody tr:hover { background: #EBF0F8; }

.dh-td-date  { white-space: nowrap; color: var(--color-text-muted); width: 160px; }
.dh-td-file  { word-break: break-all; }
.dh-td-note  { color: var(--color-text-muted); font-size: .875rem; }
.dh-td-empty { text-align: center; color: var(--color-text-muted); padding: 2rem 1rem; }
.dh-text-danger { color: var(--color-danger); }

/* --- HTMX spinner -------------------------------------------------------- */
.dh-spinner {
  display:       none;
  width:         1em;
  height:        1em;
  border:        2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     spin .6s linear infinite;
}
.htmx-request .dh-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
  .dh-header-inner  { padding: 0 1rem; height: 56px; }
  .dh-header-logo-img { height: 38px; }
  .dh-header-icons  { gap: .6rem; }
  .dh-main          { padding: 1.25rem 1rem; }
  .dh-table th, .dh-table td { padding: .45rem .6rem; }
  .dh-td-date { width: auto; }
}

/* --- Login page (standalone — no shared header/footer) ------------------- */
.dh-login-page {
  background:      #e8edf5;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         1rem;
}

.dh-login-outer {
  width:    100%;
  display:  flex;
  justify-content: center;
}

.dh-login-card {
  background:    #fff;
  border-radius: 16px;
  box-shadow:    0 4px 28px rgba(0,0,0,.13);
  padding:       2.5rem 2rem 2rem;
  width:         100%;
  max-width:     420px;
  text-align:    center;
}

.dh-login-logo { margin-bottom: .25rem; }

.dh-login-logo-img {
  display:   block;
  margin:    0 auto;
  max-width: 160px;
  height:    auto;
}

.dh-login-title {
  font-size:   1.6rem;
  font-weight: 600;
  color:       #2563eb;
  margin:      1rem 0 1.5rem;
}

.dh-login-form {
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
  text-align:     left;
}

.dh-login-input {
  width:         100%;
  padding:       .75rem 1rem;
  border:        1px solid #d1d5db;
  border-radius: 8px;
  font-family:   var(--font-stack);
  font-size:     1rem;
  color:         var(--color-text);
  background:    #fff;
  transition:    border-color .15s, box-shadow .15s;
}

.dh-login-input::placeholder { color: #adb5bd; }

.dh-login-input:focus {
  outline:      none;
  border-color: #2563eb;
  box-shadow:   0 0 0 3px rgba(37,99,235,.15);
}

.dh-login-btn {
  width:         100%;
  padding:       .8rem;
  background:    #2563eb;
  color:         #fff;
  border:        none;
  border-radius: 8px;
  font-family:   var(--font-stack);
  font-size:     1rem;
  font-weight:   600;
  cursor:        pointer;
  margin-top:    .25rem;
  transition:    background .15s;
}

.dh-login-btn:hover { background: #1d4ed8; }

.dh-login-divider {
  border:     none;
  border-top: 1px solid #e9ecef;
  margin:     1.75rem 0 1.25rem;
}

.dh-login-links {
  display:         flex;
  justify-content: center;
  gap:             2rem;
}

.dh-login-link {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             .3rem;
  text-decoration: none;
  color:           #CC0000;
  font-size:       .78rem;
  font-weight:     500;
  transition:      opacity .15s;
}

.dh-login-link:hover { opacity: .75; color: #CC0000; }

/* Error block inside login card */
.dh-login-card .alert { text-align: left; margin-bottom: .5rem; }

.dh-login-footer {
  position:   fixed;
  bottom:     0;
  left:       0;
  width:      100%;
  text-align: center;
  padding:    .6rem 1rem;
  font-size:  .8rem;
  color:      #6c757d;
  background: transparent;
}

.dh-login-footer a { color: #6c757d; }
.dh-login-footer a:hover { color: var(--color-primary); }

@media (max-width: 480px) {
  .dh-login-card   { padding: 2rem 1.25rem 1.5rem; }
  .dh-login-links  { gap: 1.25rem; }
}

/* --- Foreign-upload indicator + target dropdown (additional features) --- */
.dh-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.dh-badge-own {
  background: #e6f4ea;
  color: #1e7e34;
}
.dh-badge-foreign {
  background: #e7f0fb;
  color: #1c5fb0;
}
.dh-td-source { white-space: nowrap; }

.dh-select {
  appearance: auto;
}