/* Kronen Suite - Design System
 * Tokens + wiederverwendbare Komponenten für alle Admin-Seiten und Frontend-Ausgaben.
 * Jedes Modul nutzt diese Klassen statt eigenem Inline-CSS.
 */

:root {
    --ks-color-bg: #f6f7f7;
    --ks-color-surface: #ffffff;
    --ks-color-border: #e2e4e7;
    --ks-color-text: #1d2327;
    --ks-color-text-muted: #646970;
    --ks-color-primary: #2563eb;
    --ks-color-primary-hover: #1d4ed8;
    --ks-color-success: #15803d;
    --ks-color-success-bg: #dcfce7;
    --ks-color-warning: #b45309;
    --ks-color-warning-bg: #fef3c7;
    --ks-color-danger: #b91c1c;
    --ks-color-danger-bg: #fee2e2;
    --ks-radius: 8px;
    --ks-radius-sm: 4px;
    --ks-space-1: 4px;
    --ks-space-2: 8px;
    --ks-space-3: 16px;
    --ks-space-4: 24px;
    --ks-space-5: 32px;
    --ks-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ks-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .08);
}

.ks-wrap { font-family: var(--ks-font); color: var(--ks-color-text); max-width: 1200px; }

/* Layout */
.ks-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ks-space-4); }
.ks-page-header h1 { font-size: 22px; font-weight: 600; margin: 0; }
.ks-grid { display: grid; gap: var(--ks-space-3); }
.ks-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Card */
.ks-card { background: var(--ks-color-surface); border: 1px solid var(--ks-color-border); border-radius: var(--ks-radius); padding: var(--ks-space-4); box-shadow: var(--ks-shadow); }
.ks-card h2, .ks-card h3 { margin-top: 0; }

/* Buttons */
.ks-btn { display: inline-flex; align-items: center; gap: var(--ks-space-2); padding: 8px 16px; border-radius: var(--ks-radius-sm); border: 1px solid transparent; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.ks-btn-primary { background: var(--ks-color-primary); color: #fff; }
.ks-btn-primary:hover { background: var(--ks-color-primary-hover); color: #fff; }
.ks-btn-secondary { background: var(--ks-color-surface); color: var(--ks-color-text); border-color: var(--ks-color-border); }
.ks-btn-danger { background: var(--ks-color-danger-bg); color: var(--ks-color-danger); }

/* Table */
.ks-table { width: 100%; border-collapse: collapse; background: var(--ks-color-surface); border-radius: var(--ks-radius); overflow: hidden; }
.ks-table th, .ks-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ks-color-border); font-size: 14px; }
.ks-table th { background: var(--ks-color-bg); font-weight: 600; }
.ks-table tr:last-child td { border-bottom: none; }

/* Badges (Status) */
.ks-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ks-badge-green { background: var(--ks-color-success-bg); color: var(--ks-color-success); }
.ks-badge-yellow { background: var(--ks-color-warning-bg); color: var(--ks-color-warning); }
.ks-badge-red { background: var(--ks-color-danger-bg); color: var(--ks-color-danger); }

/* Forms */
.ks-field { margin-bottom: var(--ks-space-3); }
.ks-field label { display: block; margin-bottom: var(--ks-space-1); font-weight: 500; font-size: 14px; }
.ks-field input[type=text], .ks-field input[type=number], .ks-field input[type=email], .ks-field select, .ks-field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--ks-color-border); border-radius: var(--ks-radius-sm); font-size: 14px;
}

/* Kronen Suite dashboard: tool overview grid */
.ks-tool-section { margin-bottom: var(--ks-space-5); }
.ks-tool-section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ks-color-text-muted); margin: 0 0 var(--ks-space-3); }
.ks-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ks-space-3); }
.ks-tool-card { display: flex; align-items: flex-start; gap: var(--ks-space-2); background: var(--ks-color-surface); border: 1px solid var(--ks-color-border); border-radius: var(--ks-radius); padding: var(--ks-space-3); text-decoration: none; color: inherit; transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.ks-tool-card:hover, .ks-tool-card:focus-visible { border-color: var(--ks-color-primary); box-shadow: var(--ks-shadow); color: inherit; outline: none; }
.ks-tool-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.ks-tool-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.ks-tool-desc { font-size: 12px; color: var(--ks-color-text-muted); line-height: 1.4; }

/* Sidebar-Untermenü "Kronen Suite": Gruppenköpfe (siehe class-ks-admin-page.php) */
#toplevel_page_kronen-suite .wp-submenu .ks-menu-group-header {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid rgba(255,255,255,.12);
	cursor: default;
}
/* Modal (Frontend, z.B. Preorder-Hinweis) */
.ks-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.ks-modal { background: var(--ks-color-surface); border-radius: var(--ks-radius); padding: var(--ks-space-4); max-width: 420px; }