/* =========================
   Cloudtodo – Basis-Styles
   ========================= */

/* Header */
.cloudtodo-header h2{margin:10px 0 20px;font-weight:600}

/* Karten (Dashboard) */
.cloudtodo-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;
}
.cloudtodo-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:120px;border:1px solid #ddd;border-radius:8px;text-decoration:none;background:#fff
}
.cloudtodo-card .count{font-size:36px;font-weight:700;line-height:1}
.cloudtodo-card .label{margin-top:6px;font-size:16px}
.cloudtodo-card-plus{min-height:140px}
.cloudtodo-card-plus .plus{font-size:48px;line-height:1}

/* Buttons */
.button-primary, button[type="submit"], input[type="submit"]{
  background:#369ef6;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;
  transition:background-color .3s ease
}
.button-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover{ background:#2980b9 }

/* Galerie */
.ct-gallery{display:grid;grid-template-columns:repeat(auto-fill,90px);gap:10px}
.ct-gitem{position:relative;display:block;width:90px;height:90px;border:1px solid #e3e3e3;border-radius:8px;overflow:hidden;background:#fff}
.ct-gitem img{width:100%;height:100%;object-fit:cover;display:block}
.ct-gitem .ct-play{position:absolute;right:6px;bottom:4px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;padding:2px 6px;border-radius:10px}

/* Detailseiten-Felder */
.cloudtodo-detail .ct-row{margin-bottom:14px}
.cloudtodo-detail label{display:block;font-weight:600;margin-bottom:6px}
.cloudtodo-detail input[type="text"],
.cloudtodo-detail input[type="datetime-local"],
.cloudtodo-detail select,
.cloudtodo-detail textarea{width:100%;max-width:640px}
.cloudtodo-detail .ct-actions{margin-top:12px;display:flex;gap:10px}

/* Overlay/Loader */
#ct-overlay{position:fixed;inset:0;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:22px;z-index:9999}

/* Hinweise inline (Status ändern) */
.ct-status-cell{display:flex;align-items:center;gap:8px}
.ct-inline-indicator.saving::after{content:'speichert…';color:#666;font-size:12px}
.ct-inline-indicator.saved::after{content:'✓ gespeichert';color:#2f8c2f;font-size:12px}
.ct-inline-indicator.error::after{content:'Fehler';color:#c00;font-size:12px}

/* Erfolg/Fehler-Boxen */
.ct-success{
  background:#e6ffed;border:1px solid #2ecc71;color:#2d7a46;padding:16px;margin:20px 0;border-radius:6px;text-align:center;font-size:15px
}
.ct-error{
  background:#ffecec;border:1px solid #e74c3c;color:#a52727;padding:16px;margin:20px 0;border-radius:6px;text-align:center;font-size:15px
}
.ct-btn{display:inline-block;background:#369ef6;color:#fff!important;padding:8px 14px;border-radius:4px;text-decoration:none;margin-top:10px}

/* Registrierung */
.ct-form.ct-register .ct-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px 18px}
.ct-form.ct-register label span{display:block;font-weight:600;margin-bottom:6px}
.ct-form.ct-register input[type="text"],
.ct-form.ct-register input[type="email"],
.ct-form.ct-register input[type="password"]{width:100%;padding:9px 10px;border:1px solid #ddd;border-radius:6px}
.ct-actions{margin-top:14px;display:flex;gap:10px;align-items:center}
@media (max-width:640px){ .ct-form.ct-register .ct-grid{grid-template-columns:1fr} }

/* Upload-Previews */
.ct-previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ct-thumb{position:relative;width:96px;height:96px;border:1px solid #ddd;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fafafa}
.ct-thumb img{width:100%;height:100%;object-fit:cover}
.ct-thumb-video{font-size:12px;padding:4px;text-align:center}
.ct-thumb-remove{position:absolute;top:2px;right:2px;border:none;background:#0008;color:#fff;border-radius:50%;width:20px;height:20px;line-height:18px;cursor:pointer}

/* ====== Willkommen / Hero ====== */
.ct-welcome{--gap:18px}
.ct-hero{
  padding:56px 16px 36px;background:linear-gradient(180deg,#f7fbff 0%,#fff 100%);
  border-bottom:1px solid #e9f0f7;text-align:center
}
.ct-hero-inner{max-width:980px;margin:0 auto}
.ct-hero-badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;background:#e8f3ff;color:#006fd6;margin-bottom:10px}
.ct-hero h1{margin:6px 0 8px;font-size:clamp(24px,4vw,36px)}
.ct-hero-lead{font-size:clamp(16px,2.6vw,18px);color:#444;margin:0 auto 16px;max-width:760px}
.ct-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:12px 0 6px}
.ct-btn-lg{padding:12px 18px;font-size:16px;border-radius:8px}
.ct-hero-note{color:#6b7280;font-size:14px;margin-top:6px}
.ct-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);max-width:1100px;margin:26px auto;padding:0 16px}
.ct-tile{border:1px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff}
.ct-tile h3{margin:0 0 6px}
.ct-tile p{margin:0;color:#4b5563}
.ct-steps{max-width:850px;margin:18px auto 26px;padding:0 16px}
.ct-steps h2{text-align:center}
.ct-steps ol{margin:12px auto 0;padding-left:18px;line-height:1.6;color:#374151}
.ct-legal-mini{text-align:center;color:#6b7280;margin:22px 0 16px}
.ct-legal-mini a{color:inherit;text-decoration:underline}
@media (max-width:900px){ .ct-tiles{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .ct-tiles{grid-template-columns:1fr} }

/* ====== Tabellen / Listen ====== */
/* Wrapper erlaubt horizontales Scrollen auf sehr kleinen Geräten */
.ct-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Einheitliche Tabelle für Aufträge (Listen + Dashboard) */
.ct-orders{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  border-spacing:0;
}

/* Zellen */
.ct-orders th, .ct-orders td{
  padding:10px 12px;
  border-bottom:1px solid #e8eaee;
  text-align:left;
  vertical-align:middle;
  background:transparent; /* wichtig: keine Spaltenfärbung */
}

/* Tabellenkopf */
.ct-orders thead th{
  font-weight:700;background:#fff;position:sticky;top:0;z-index:1;
}

/* Nur jede ZWEITE ZEILE hellgrau (Zebra) */
.ct-orders tbody tr:nth-child(odd){  background:#fff }
.ct-orders tbody tr:nth-child(even){ background:#f7f7f8 }

/* Hover (optional) */
@media (hover:hover){
  .ct-orders tbody tr:hover{ background:#eef6ff }
}

/* Inhaltsspezifisch */
.ct-orders .ct-obj a{font-weight:600;text-decoration:none}
.ct-orders .ct-obj a:hover{text-decoration:underline}

/* Beschreibung: serverseitig 50 Zeichen; hier nur Kürzung absichern */
.ct-orders td.ct-desc{
  max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* Status-Dropdown */
.ct-orders .ct-status select{
  width:100%;max-width:140px;background:#fff;border:1px solid #e2e2e2;border-radius:8px;padding:6px 10px
}

/* Mobile: echte Tabelle bleibt erhalten, nur kompakter */
@media (max-width:640px){
  .ct-orders{font-size:15px}
  .ct-orders th, .ct-orders td{padding:10px}
}

/* Fallback: falls Theme global Spalten färbt → neutralisieren */
.ct-orders td:nth-child(even),
.ct-orders th:nth-child(even),
.ct-orders td:nth-child(odd),
.ct-orders th:nth-child(odd){ background:transparent !important }

/* Select-Felder in Aufträge-Tabelle automatisch breit genug */
.ct-orders .ct-status select {
  min-width: 80px;    /* Mindestbreite */
  width: auto;         /* Automatische Breite für Inhalt */
  max-width: none;     /* Keine feste Maximalbreite */
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 6px 10px;
}