/* =====================================================================
   Social-Media-Kampagne – Gemeinsames Stylesheet
   ===================================================================== */

:root {
    --c-bg:        #f5f6fa;
    --c-card:      #ffffff;
    --c-text:      #1e2230;
    --c-muted:     #6a7080;
    --c-border:    #e3e5ec;
    --c-primary:   #2a5bd7;
    --c-primary-d: #1f46a8;
    --c-danger:    #c0392b;
    --c-success:   #27884a;
    --c-warn:      #b67e1a;
    --c-accent:    #7c4dff;
    --radius:      10px;
    --shadow-sm:   0 1px 3px rgba(0,0,0,.06);
    --shadow:      0 4px 16px rgba(0,0,0,.07);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .5rem; }

/* --- Layouts --- */
.shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}
.shell-main {
    padding: 2rem 2.5rem;
    max-width: 1200px;
    width: 100%;
}
@media (max-width: 720px) {
    .shell { grid-template-columns: 1fr; }
    .shell-main { padding: 1.25rem; }
    .sidebar { position: static !important; width: 100% !important; }
}

/* --- Sidebar --- */
.sidebar {
    background: #1e2230;
    color: #dfe3f0;
    padding: 1.5rem 1rem;
    position: sticky; top: 0; align-self: start;
    height: 100vh; width: 240px;
}
.sidebar .brand {
    font-weight: 700; font-size: 1.1rem; color: #fff;
    padding: 0 .5rem 1rem; border-bottom: 1px solid #2e3345;
    margin-bottom: 1rem;
}
.sidebar .brand small { display: block; font-weight: 400; font-size: .75rem; color: #a0a5bb; }
.sidebar nav a {
    display: block; padding: .55rem .75rem;
    color: #c8ccde; border-radius: 6px;
    margin-bottom: 2px; font-size: .95rem;
}
.sidebar nav a:hover { background: #2e3345; color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--c-primary); color: #fff; }
.sidebar nav .section {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: #7c8298; padding: 1rem .75rem .35rem;
}
.sidebar .user-info {
    margin-top: auto; padding: .8rem .75rem; border-top: 1px solid #2e3345;
    font-size: .85rem; color: #a0a5bb;
}
.sidebar .user-info strong { color: #fff; display: block; }
.sidebar .user-info a { color: #ffb5b5; font-size: .85rem; }

/* --- Cards --- */
.card {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.card-head h2 { margin: 0; }

/* --- Forms --- */
label { display: block; font-weight: 600; margin: 1rem 0 .35rem; font-size: .92rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=url], select, textarea {
    width: 100%; padding: .55rem .7rem;
    border: 1px solid var(--c-border); border-radius: 6px;
    font-size: 1rem; background: #fff; color: var(--c-text);
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary);
}
textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size: .82rem; color: var(--c-muted); margin-top: .25rem; }

/* --- Buttons --- */
.btn {
    display: inline-block; padding: .6rem 1.1rem;
    background: var(--c-primary); color: #fff !important;
    border: 0; border-radius: 6px;
    font-size: .95rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background .1s;
}
.btn:hover { background: var(--c-primary-d); text-decoration: none; }
.btn-secondary {
    background: #fff; color: var(--c-text) !important; border: 1px solid var(--c-border);
}
.btn-secondary:hover { background: #f0f1f5; }
.btn-danger { background: var(--c-danger); }
.btn-danger:hover { background: #9a2d20; }
.btn-sm { padding: .3rem .6rem; font-size: .85rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* --- Flash-Messages --- */
.flash {
    padding: .8rem 1.1rem; border-radius: 6px; margin-bottom: 1rem;
    border: 1px solid; font-size: .95rem;
}
.flash-success { background: #e9f8ee; border-color: #bbe2c8; color: #1d6c37; }
.flash-error   { background: #fdecea; border-color: #f3b6b1; color: #8a2620; }
.flash-warn    { background: #fff6e0; border-color: #ead6a0; color: #8c6a19; }
.flash-info    { background: #e8eefb; border-color: #bccdea; color: #284b91; }

/* --- Tabellen --- */
table.data {
    width: 100%; border-collapse: collapse; background: #fff;
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
table.data th, table.data td {
    padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--c-border);
    font-size: .93rem;
}
table.data th { background: #f4f5fa; font-weight: 600; color: #4a506a; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #fafbfd; }

/* --- Login-Page spezial --- */
.login-wrap {
    min-height: 100vh; display: grid; place-items: center; padding: 1rem;
}
.login-card {
    background: #fff; padding: 2.25rem 2.5rem; border-radius: 14px;
    box-shadow: var(--shadow); width: 100%; max-width: 420px;
}
.login-card h1 {
    margin: 0 0 .25rem; text-align: center; font-size: 1.4rem;
}
.login-card .sub { text-align: center; color: var(--c-muted); margin-bottom: 1.5rem; font-size: .9rem; }

/* --- Badges --- */
.badge {
    display: inline-block; padding: 2px 8px; font-size: .75rem;
    border-radius: 10px; font-weight: 600;
}
.badge-open    { background: #e8eefb; color: #284b91; }
.badge-ordered { background: #e9f8ee; color: #1d6c37; }
.badge-expired { background: #fdecea; color: #8a2620; }
.badge-muted   { background: #eceef5; color: #55596c; }

.muted { color: var(--c-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }