/* components.css — Shared UI components (Cards / Forms / Buttons / Tables)
   Works with your existing base.css variables.
   If base.css doesn't define some vars, the fallbacks below still look good.
*/

/* =========================
   Design Tokens (fallbacks)
   ========================= */
:root{
  /* colors */
  --bg: rgba(10,12,16,1);
  --panel: rgba(255,255,255,0.06);
  --panel-strong: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.14);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.74);
  --muted2: rgba(255,255,255,0.60);

  /* accent (your “gedämpftes Orange Premium”) */
  --accent: rgba(217,140,66,0.95);
  --accent-soft: rgba(217,140,66,0.14);
  --accent-border: rgba(217,140,66,0.35);

  /* status */
  --ok: rgba(123,216,143,0.95);
  --ok-soft: rgba(123,216,143,0.14);
  --ok-border: rgba(123,216,143,0.35);

  --warn: rgba(217,140,66,0.95);
  --warn-soft: rgba(217,140,66,0.12);
  --warn-border: rgba(217,140,66,0.35);

  --danger: rgba(255,107,107,0.95);
  --danger-soft: rgba(255,107,107,0.12);
  --danger-border: rgba(255,107,107,0.35);

  /* sizing */
  --radius: 14px;
  --radius-sm: 12px;
  --radius-xs: 10px;

  /* shadows */
  --shadow: 0 10px 26px rgba(0,0,0,0.28);
  --shadow-soft: 0 8px 18px rgba(0,0,0,0.22);

  /* spacing */
  --gap: 12px;
  --pad: 14px;

  /* inputs */
  --input-bg: rgba(0,0,0,0.18);
  --input-border: rgba(255,255,255,0.14);
  --input-border-focus: rgba(255,255,255,0.26);

  /* focus ring */
  --focus: 0 0 0 3px rgba(217,140,66,0.20);
}

/* =========================
   Page + Sections
   ========================= */
.page{
  width: min(1400px, calc(100% - 24px));
  margin: 18px auto 80px;
}

.section{
  margin: 12px 0;
}

.stack{
  display:flex;
  flex-direction: column;
  gap: var(--gap);
}

/* top bar row (title + actions) */
.page-top{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================
   Cards
   ========================= */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow-soft);
}

.card--tight{ padding: 12px; }
.card--flat{ box-shadow: none; }
.card--strong{ background: var(--panel-strong); border-color: var(--border-strong); }

.card-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.card-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .01em;
  margin: 0;
  color: var(--text);
}

.card-subtitle{
  font-size: 12px;
  opacity: .78;
  margin: 2px 0 0;
  color: var(--muted);
}

/* Small helper text (your “gedämpftes Orange”) */
.hint{
  font-size: 12px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .01em;
}

.small{
  font-size: 11px;
  opacity: .82;
  color: var(--muted);
}

/* =======================================================================
   Messages / Alerts
   ======================================================================= */
    
.msg{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 13px;
}

.msg--ok{
  background: rgba(123,216,143,.18);
  border-color: rgba(123,216,143,.28);
}

.msg--err{
  background: rgba(255,107,107,.18);
  border-color: rgba(255,107,107,.28);
}

/* =========================
   Form Layout
   ========================= */
.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 760px){
  .form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
  .form-grid.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}

.field{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.label{
  font-size: 11px;
  opacity: .78;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.input,
.select,
.textarea{
  height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  font-size: 13px;
  box-sizing: border-box;
}

.textarea{
  height: auto;
  min-height: 92px;
  resize: vertical;
  line-height: 1.35;
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color: var(--input-border-focus);
  box-shadow: var(--focus);
}

/* Make date/time icons + dropdown arrows visible & not stuck to edge */
.input[type="date"],
.input[type="month"],
.input[type="datetime-local"],
.select{
  padding-right: 38px; /* room for icons */
}

.select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.72) 50%),
    linear-gradient(135deg, rgba(255,255,255,.72) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%,
    0 0;
  background-size:
    5px 5px,
    5px 5px,
    100% 100%;
  background-repeat: no-repeat;
}

/* WebKit calendar icon color (works in many Chromium/Safari builds) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: invert(1) opacity(0.85);
  margin-right: 6px;
}

/* file input pattern used in upload.php */
.file_input{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
  opacity:0;
}
.file_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(0,0,0,0.20);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
}
.file_button:hover{
  border-color: rgba(255,255,255,0.24);
  background: rgba(0,0,0,0.26);
}
.file_name{
  display:inline-block;
  margin-left: 10px;
  font-size: 12px;
  opacity: .84;
  color: var(--muted);
  vertical-align: middle;
}

/* Form actions row */
.form-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

/* =========================
   Buttons
   ========================= */
.btn{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  cursor: pointer;
  box-sizing: border-box;
}

.btn:hover{
  border-color: rgba(255,255,255,0.26);
  background: rgba(0,0,0,0.24);
}

.btn:active{
  transform: translateY(1px);
}

.btn:focus{
  outline:none;
  box-shadow: var(--focus);
}

.btn-ok{
  border-color: var(--ok-border);
  background: var(--ok-soft);
}
.btn-warn{
  border-color: var(--warn-border);
  background: var(--warn-soft);
}
.btn-danger{
  border-color: var(--danger-border);
  background: var(--danger-soft);
}
.btn-accent{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* smaller inline buttons */
.btn.sm{
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* link looking like button */
a.btn{ line-height: 1; }

/* =========================
   Pills (badges)
   ========================= */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.14);
  color: var(--text);
  line-height: 1.4;
}
.pill.ok{ border-color: var(--ok-border); background: var(--ok-soft); }
.pill.warn{ border-color: var(--warn-border); background: var(--warn-soft); }
.pill.bad{ border-color: var(--danger-border); background: var(--danger-soft); }

/* =========================
   Tables (Office look + horizontal scroll)
   ========================= */
.tablewrap{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.14);
}

.tablewrap::-webkit-scrollbar{ height: 10px; }
.tablewrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}
.tablewrap::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}

.table{
  width: max(1200px, 100%);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text);
}

.table thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(0,0,0,0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  text-align:left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .9;

  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}

.table tbody td{
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
  white-space: nowrap;
}

.table tbody tr:nth-child(odd){ background: rgba(255,255,255,0.03); }
.table tbody tr:hover{ background: rgba(255,255,255,0.06); }

/* cells that should wrap */
.table td.wrap{
  white-space: normal;
  min-width: 280px;
  max-width: 560px;
}

/* sticky first column */
.table th.sticky-col,
.table td.sticky-col{
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(0,0,0,0.22);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.table thead th.sticky-col{
  z-index: 4;
  background: rgba(0,0,0,0.40);
}

/* =========================
   Icon Buttons (your upload.php check/download/delete)
   ========================= */
.iconbtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(0,0,0,0.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  color: var(--text);
  box-sizing: border-box;
}
.iconbtn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.iconbtn:hover{
  border-color: rgba(255,255,255,0.26);
  background: rgba(0,0,0,0.24);
}
.iconbtn:focus{
  outline:none;
  box-shadow: var(--focus);
}

.iconbtn--check{
  border-color: var(--ok-border);
  background: var(--ok-soft);
  color: var(--ok);
}
.iconbtn--download{
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: rgba(255,255,255,0.92);
}
.iconbtn--delete{
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger);
}

/* action row alignment */
.action_row{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.action_form{ display:inline; margin:0; }

/* =========================
   Mobile helpers
   ========================= */
@media (max-width: 780px){
  .page{ width: calc(100% - 18px); margin-bottom: 96px; }
  .card{ padding: 12px; }
  .page-top{ align-items: flex-start; }

  /* Make file name not overflow on mobile (used in upload list too) */
  .truncate{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* Utility: force left align (for mobile “card view” rows) */
.left{ text-align:left !important; }

/* Page Wrapper – konsistent wie account.php */
.page{
  width: min(1400px, calc(100% - 24px));
  margin: 18px auto 80px;
}

.page--narrow{
  width: min(1100px, calc(100% - 24px));
  max-width:1100px; /* z.B. 360–420 je nach Geschmack */
}

.page-top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.card h2{
  color: var(--accent);
  margin: 0 0 12px 0;
  font-size: 18px;
  letter-spacing: .01em;
  
  /* wichtig: volle Breite erzwingen */
  display: block;
  width: 100%;
}
/* Dokumente-Liste statt Tabelle */
.doc_list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.doc_item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.14);
}

.doc_main{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

.doc_main:hover .doc_title{
  color: var(--accent);
}

/* Docs-Icon: nur weiß gezeichnet, keine Outline-Box */
.doc_icon{
  background: transparent;     /* keine Kachel */
  border: none;                /* keine Outline */
  width: 24px;
  height: 24px;
  border-radius: 0;
  display:grid;
  place-items:center;
}

.doc_icon svg{
  width: 20px;
  height: 20px;
  
  /* WICHTIG: Icon weiß */
  color: rgba(255,255,255,.92);
  
  /* stroke/fill "erzwingen" (für unterschiedliche SVGs im Sprite) */
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Falls dein Icon ein Solid-Fill ist: lieber weiß füllen */
.doc_icon svg.is-solid{
  fill: currentColor;
  stroke: none;
}
.doc_text{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 3px;
}

.doc_title{
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc_sub{
  font-size: 11px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Download Icon Button (falls noch nicht vorhanden) */
.iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.16);
  display:grid;
  place-items:center;
  text-decoration:none;
  flex: 0 0 auto;
}
.iconbtn svg{ width: 20px; height: 20px; opacity: .92; }
.iconbtn:hover{
  border-color: rgba(255,255,255,0.24);
  background: rgba(0,0,0,0.22);
}
.iconbtn--download:hover svg{ color: var(--accent); }


/* Upload: closed-state dunkel, Dropdown bleibt lesbar */
body.page-upload select.ts-select{
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
  color-scheme: light;
}
body.page-upload select.ts-select option,
body.page-upload select.ts-select optgroup{
  background:#fff;
  color:#111;
}


/* Alerts */
.alert{
  margin:10px 0;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.alert--error{
  background: rgba(255,107,107,.18);
}

/* Utility */
.center{ text-align:center; }


/* =========================
   LOGIN (nur index.php)
   ========================= */
    
body.page-login{
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;       /* vertikal */
  justify-content: center;   /* horizontal */
  padding: 24px 12px;
  box-sizing: border-box;
}

body.page-login .page{
  width: 100%;
  max-width: 400px;          /* Zielbreite */
  margin: 0;
}

body.page-login .card--login{
  width: 100%;
  margin: 0;
}