/* =========================
  Base / Variables
  ========================= */

:root{
 --bg: #f3f6fb;
 --card: #ffffff;
 --border: #e6eaf2;

 --text: #0f172a;
 --muted: #6b7280;

 --primary: #1a346f;
 --primary-2: #274aa0;

 --danger: #dc2626;
 --success: #16a34a;
 --warning: #f59e0b;

 --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

*{ box-sizing: border-box; }

html, body{
 margin: 0;
 padding: 0;
 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 background: var(--bg);
 color: var(--text);
}

a{
 color: var(--primary);
 text-decoration: none;
}
a:hover{ text-decoration: underline; }

.small{
 color: #334155;
 font-size: 12px;
 line-height: 1.35;
 font-weight: 500;
}

/* =========================
  Layout
  ========================= */

.container{
 max-width: 980px;
 margin: 28px auto;
 padding: 0 16px;
}

.card{
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 16px;
 box-shadow: var(--shadow);
 padding: 18px 18px;
}

.header{
 display: flex;
 gap: 18px;
 align-items: center;
 padding: 4px 0 14px 0;
}

.header h1{
 margin: 0 0 6px 0;
 font-size: 28px;
 color: var(--primary);
}

.header p{
 margin: 0;
 color: var(--muted);
}

.kv{
 display: grid;
 grid-template-columns: 180px 1fr;
 gap: 10px 14px;
 padding: 12px 0;
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 margin: 10px 0 0 0;
}

@media (max-width: 680px){
 .header{ flex-direction: column; align-items: flex-start; }
 .kv{ grid-template-columns: 1fr; }
}

/* =========================
  Forms / Buttons (Admin)
  ========================= */

.row{
 display: flex;
 gap: 10px;
 align-items: center;
 flex-wrap: wrap;
}

.input{
 width: 240px;
 max-width: 100%;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: 10px;
 outline: none;
 background: #fff;
 color: var(--text);
}

.input:focus{
 border-color: rgba(26, 52, 111, 0.35);
 box-shadow: 0 0 0 4px rgba(26, 52, 111, 0.12);
}

.btn{
 border: none;
 cursor: pointer;
 padding: 10px 14px;
 border-radius: 10px;
 font-weight: 700;
 color: #fff;
 background: var(--primary);
 transition: transform .05s ease, background .15s ease;
}

.btn:hover{ background: var(--primary-2); }
.btn:active{ transform: translateY(1px); }

.btn-secondary{
 background: #64748b;
}
.btn-secondary:hover{
 background: #475569;
}

/* =========================
  Table (Admin)
  ========================= */

.table{
 width: 100%;
 border-collapse: collapse;
 margin-top: 10px;
 overflow: hidden;
 border-radius: 12px;
}

.table thead th{
 text-align: left;
 font-size: 12px;
 color: var(--muted);
 padding: 10px 10px;
 border-bottom: 1px solid var(--border);
 background: #fafbff;
}

.table tbody td{
 padding: 10px 10px;
 border-bottom: 1px solid var(--border);
 vertical-align: top;
}

.table tbody tr:hover{
 background: #fafbff;
}

.badge{
 display: inline-block;
 padding: 6px 10px;
 border-radius: 999px;
 border: 1px solid var(--border);
 background: #f8fafc;
 font-size: 12px;
 font-weight: 800;
 color: var(--text);
}

/* =========================
  Timeline (Track)
  ========================= */

.timeline{
 margin-top: 10px;
 border-left: 3px solid #dbe3f4;
 padding-left: 14px;
}

.item{
 padding: 10px 12px;
 margin: 10px 0;
 background: #fbfcff;
 border: 1px solid var(--border);
 border-radius: 12px;
}

.item > div:first-child{
 margin-bottom: 4px;
 color: var(--primary);
 font-weight: 800;
}

/* =========================
  Highlights / Status colors
  ========================= */

/* Красное выделение данных (Shop/KW/Дата/Время) */
.hl-red{
 color: var(--danger);
 font-weight: 900;
 font-size: 1.12em;
}

/* =========================
  Status colors
  ========================= */

.status-green{
 color: #16a34a;   /* Zugestellt */
 font-weight: 900;
}

.status-orange{
 color: #ea580c;   /* Versendet */
 font-weight: 900;
}

.status-blue{
 color: #2563eb;   /* Liefertermin */
 font-weight: 900;
}

.status-red{
 color: #dc2626;   /* Storniert */
 font-weight: 900;
}

.status-default{
 color: #334155;   /* Erstellt */
 font-weight: 900;
}
	 .ico{
 display:inline-block;
 margin-right:6px;
 font-size: 1.05em;
 line-height: 1;
 vertical-align: -1px;
}
	 .btn{
 padding:10px 16px;
 border-radius:8px;
 border:none;
 font-weight:600;
 cursor:pointer;
 color:white;
}

.btn-green{
 background:#16a34a;
}

.btn-green:hover{
 background:#15803d;
}

.btn-red{
 background:#dc2626;
}

.btn-red:hover{
 background:#b91c1c;
}

.btn-orange{
 background:#ea580c;
}

.btn-orange:hover{
 background:#c2410c;
}

.btn-blue{
 background:#2563eb;
}

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