/* ============================================================
   MiWi Design System – Globales Stylesheet
   Basiert auf Bootstrap 5.3.3 + Bootstrap Icons 1.11.3
   ============================================================ */

:root {
    --app-bg:           #f7fafc;
    --app-border:       rgba(0,0,0,.08);
    --app-shadow:       0 12px 30px rgba(0,0,0,.08);
    --app-shadow-hover: 0 16px 40px rgba(0,0,0,.12);
    --app-focus:        rgba(13,110,253,.25);
    --app-blue:         #0d6efd;
    --app-blue-soft:    rgba(13,110,253,.08);
    --app-radius:       18px;
    --app-radius-sm:    14px;
    --app-radius-xs:    10px;
}

/* ── Base ───────────────────────────────────────────── */
body {
    background: var(--app-bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Layout Shell ───────────────────────────────────── */
.app-shell  { max-width: 1200px; }
.app-shell-md { max-width: 860px; }
.app-shell-sm { max-width: 640px; }

/* ── Page Header ────────────────────────────────────── */
.app-head {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.app-head-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    line-height: 1.2;
}

.app-head-sub {
    font-size: .875rem;
    color: #6c757d;
    margin-top: .15rem;
}

/* ── Content Card ───────────────────────────────────── */
.app-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    overflow: hidden;
}

.app-card-body {
    padding: 1.25rem;
}

.app-card-header {
    padding: .875rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
}

/* ── Module Tile (clickable card) ───────────────────── */
.app-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--app-shadow);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    height: 100%;
}

.app-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-hover);
    border-color: rgba(0,0,0,.12);
    color: inherit;
    text-decoration: none;
}

.app-tile:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--app-focus), var(--app-shadow-hover);
}

.app-tile.is-active {
    border-color: rgba(13,110,253,.35);
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.12), var(--app-shadow);
}

/* ── Icon Box ───────────────────────────────────────── */
.app-icon {
    width: 44px; height: 44px;
    border-radius: var(--app-radius-sm);
    display: grid; place-items: center;
    background: var(--app-blue-soft);
    color: var(--app-blue);
    flex: 0 0 auto;
    font-size: 1.25rem;
}

.app-icon-sm {
    width: 36px; height: 36px;
    border-radius: var(--app-radius-xs);
    font-size: 1rem;
}

.app-icon-lg {
    width: 56px; height: 56px;
    border-radius: var(--app-radius);
    font-size: 1.5rem;
}

/* icon color variants */
.app-icon-success { background: rgba(25,135,84,.09);  color: #198754; }
.app-icon-warning { background: rgba(255,193,7,.12);  color: #856404; }
.app-icon-danger  { background: rgba(220,53,69,.09);  color: #dc3545; }
.app-icon-info    { background: rgba(13,202,240,.09); color: #0a7c8c; }

/* ── Tile text ──────────────────────────────────────── */
.app-tile-title  { font-weight: 700; margin: 0; line-height: 1.15; }
.app-tile-sub    { font-size: .85rem; color: #6c757d; margin-top: .2rem; }
.app-tile-go     { color: #6c757d; flex: 0 0 auto; }

/* ── Section label ──────────────────────────────────── */
.app-section-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    margin-bottom: .5rem;
}

/* ── Table inside app-card ──────────────────────────── */
.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.app-table th {
    background: #f8f9fa;
    font-weight: 600;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--app-border);
    white-space: nowrap;
}

.app-table td {
    padding: .65rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
    vertical-align: middle;
}

.app-table tbody tr:last-child td { border-bottom: none; }

.app-table tbody tr:hover { background: rgba(13,110,253,.03); }

/* ── Status Badge ───────────────────────────────────── */
.app-badge {
    display: inline-flex; align-items: center;
    padding: .2rem .6rem;
    border-radius: 50rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ── Form overrides ─────────────────────────────────── */
.app-form-label {
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .35rem;
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .25rem var(--app-focus);
    border-color: rgba(13,110,253,.4);
}

/* ── Button style tweaks ────────────────────────────── */
.btn { border-radius: var(--app-radius-xs); }
.btn-lg { border-radius: var(--app-radius-sm); }

/* ── Back link util ─────────────────────────────────── */
.app-back {
    display: inline-flex; align-items: center; gap: .4rem;
    color: #6c757d; text-decoration: none;
    font-size: .875rem;
    transition: color .1s;
}
.app-back:hover { color: var(--app-blue); }

/* ── Responsive helpers ─────────────────────────────── */
@media (max-width: 576px) {
    .app-head { border-radius: 14px; }
    .app-card { border-radius: 14px; }
    .app-tile { border-radius: 14px; }
}