/* ============================================================
   customerorderstatus — Kompatibilitätsschicht fürs neue CI.
   Styled die BESTEHENDEN Klassen der Tabellen-Fragmente
   (kvid_overview_table3, orgid_overview_table2, coaty_chat_box)
   im Look von site.css/portal.css — OHNE deren PHP/HTML anzufassen.
   Ladereihenfolge: portal.css -> cos-compat.css -> (DataTables-CDN im Body)
   ============================================================ */

/* Breites Layout fuer die Positionstabellen */
.wrap-wide{max-width:1500px}

/* Alt-Container neutralisieren */
.content{background:transparent;padding:0;max-width:none}
.content h4{font-family:'Archivo',system-ui,sans-serif;color:var(--navy);font-weight:800;margin:18px 0 10px}
.content h5{font-family:'Archivo',system-ui,sans-serif;color:#3D586E;font-weight:700;margin:12px 0 8px}
.content p{font-size:15px;color:#3D586E;line-height:1.7}

/* ---------- Alt-Buttons -> CI-Pills ---------- */
.content .pageapp-login-button.button,
.content .button.button-green,
.content .button.button-yellow,
.content .button.button-blue,
.content .button.button-red,
.content .button.button-orange{
  display:inline-flex;align-items:center;gap:8px;width:auto;max-width:100%;
  padding:10px 20px;border:none;border-radius:999px;
  background:var(--teal) !important;color:#fff !important;
  font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14px;
  cursor:pointer;min-height:42px;text-transform:none;box-shadow:none;float:none;
  transition:transform .15s;
}
.content .button.button-orange{background:var(--navy) !important}   /* SDS */
.content .button.button-blue{background:var(--navy) !important}
.content .button:hover{transform:translateY(-1px);opacity:.95}
.content .pageapp-login-button.button input[type=submit],
.content .button input[type=submit]{
  background:transparent !important;color:#fff !important;border:none;
  font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:0;
}

/* Alt-Formularfelder */
.content .login-input input{
  display:block;width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;color:var(--ink);font-size:16px;font-family:inherit;outline:none;
}
.content .login-input input:focus{border-color:var(--teal)}

/* ---------- Tabellen im CI-Karten-Look ---------- */
.content table.table{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  border-collapse:separate;border-spacing:0;overflow:hidden;width:100%;font-size:14px;
}
.content table.table th,
.content .table-title{
  background:var(--navy) !important;color:#fff !important;
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.03em;border-bottom:1px solid var(--line);padding:10px 12px;
}
.content table.table td{border-bottom:1px solid #EEF3F6;padding:9px 12px;color:#33506A}
.content table.table tbody tr:nth-child(even) td{background:#FAFCFD}
.content table.table tbody tr:hover td{background:var(--teal-soft)}

/* DataTables-Bedienelemente */
.content .dataTables_wrapper .dt-buttons .dt-button,
.content .dt-button{
  border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--navy);padding:6px 14px;font-family:'Inter',system-ui,sans-serif;font-size:13px;
}
.content .dt-button:hover{border-color:var(--teal);color:var(--teal);background:#fff}
.content input[type=search]{
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;outline:none;
}
.content input[type=search]:focus{border-color:var(--teal)}
.content .dataTables_wrapper{font-family:'Inter',system-ui,sans-serif;font-size:13px;color:#4A6478}

/* ---------- PDF-Links als Mini-Kacheln ---------- */
.cos-pdf{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;margin:2px 0;
  background:var(--teal-soft);border:1px solid #C4E0E5;border-radius:999px;
  color:var(--navy) !important;font-size:.88em;font-weight:600;
  text-decoration:none !important;white-space:nowrap;
}
.cos-pdf:hover{background:var(--teal);color:#fff !important}
.cos-pdf .fa{color:var(--teal)}
.cos-pdf:hover .fa{color:#fff}

/* ---------- Positionsstatus-Badges ---------- */
.cos-status{display:inline-block;padding:3px 12px;border-radius:999px;font-weight:700;font-size:.9em;white-space:nowrap}
.cos-st-done{background:var(--ok-soft);color:var(--ok)}       /* verrechnet / ausgeliefert */
.cos-st-active{background:var(--teal-soft);color:var(--navy)} /* im Versand / verfuegbar */
.cos-st-wait{background:var(--warn-soft);color:var(--warn)}   /* Zulauf / Termine / offen */

/* Kontakt-Mailto-Button */
.cos-mail{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;
  background:var(--teal) !important;color:#fff !important;font-weight:600;text-decoration:none !important}
.cos-mail:hover{opacity:.92}

/* Tracking-Link (post.ch) */
.cos-tracking{display:inline-block;margin-top:3px;padding:2px 10px;background:var(--teal-soft);
  color:var(--navy) !important;border-radius:999px;font-size:.85em;font-weight:600;
  text-decoration:none;white-space:nowrap}
.cos-tracking:hover{background:var(--teal);color:#fff !important}

/* ---------- Alt-Tabs (ul.tabs / tab-content) im CI-Look ---------- */
ul.tabs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
ul.tabs li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;transition:background .15s,color .15s}
ul.tabs li:hover{border-color:var(--teal);color:var(--teal)}
ul.tabs li.active-tab{background:var(--navy);border-color:var(--navy);color:#fff}
.tab-content{display:none}
.tab-content.active-tab-content{display:block}