/* --- CJ Kunstwerke Admin | Global Imports --- */
@import url("colors.css");
@import url("layout.css");
@import url("sidebar.css");
@import url("topbar.css");
@import url("footer.css");
@import url("buttons.css");
@import url("update.css");
@import url("settings.css");
@import url("dashboard.css");
@import url("lists.css");
@import url("orders.css");
@import url("wysiwyg.css");

/* --- Body / typography --- */

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    font-size: var(--fs-base);
    line-height: 1.55;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*:focus-visible {
    outline: none;
    box-shadow: var(--sh-focus);
    border-radius: var(--r-sm);
}

/* --- Page headers (large, calm, generous whitespace, no underline rule) --- */

.page-header {
    margin-bottom: var(--sp-8);
}

.page-header h1,
.content h1 {
    font-family: var(--font-body);
    color: var(--text);
    font-size: var(--fs-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
}

.page-header .page-subtitle {
    color: var(--text-muted);
    font-size: var(--fs-base);
    margin: var(--sp-3) 0 0;
    max-width: 65ch;
    line-height: 1.55;
}

.content h2,
.section-head {
    color: var(--text);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: var(--sp-10) 0 var(--sp-4);
}
.content h2:first-child,
.section-head:first-child { margin-top: 0; }

.content h3 {
    color: var(--text);
    font-size: var(--fs-lg);
    font-weight: 600;
}

/* --- Links --- */

a {
    color: var(--accent);
    text-decoration: none;
}

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

.text-muted { color: var(--text-muted) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }

/* --- Cards: soft, borderless by default, subtle elevation --- */

.card {
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1);
    background-color: var(--surface);
}

.card-body { padding: var(--sp-6); }

/* Borderless surface — used by the redesigned dashboard sections that rely on
   whitespace rather than boxes. */
.surface-plain {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
}

.card-title { font-weight: 600; }

.card .card-title.text-uppercase {
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

/* --- Alerts --- */

.alert {
    border-radius: var(--r-md);
    border-width: 1px;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
}

.alert-info {
    background-color: var(--accent-soft-2);
    border-color: var(--accent-soft);
    color: #1e3a8a;
}

.alert-success {
    background-color: var(--success-soft);
    border-color: #86efac;
    color: #166534;
}

.alert-warning {
    background-color: var(--warning-soft);
    border-color: #fde68a;
    color: #92400e;
}

.alert-danger {
    background-color: var(--danger-soft);
    border-color: #fecaca;
    color: #991b1b;
}

/* --- Bootstrap nav-tabs nudged --- */

.nav-tabs {
    border-bottom-color: var(--border);
}

.nav-tabs .nav-link {
    /* These are plain <button> elements in the markup (not <a>), so without
       resetting appearance, browsers on Linux/GTK themes render the OS's own
       native button hover/focus shading *underneath* our background — which
       can come out dark regardless of what's set below. Killing appearance
       hands rendering fully to this stylesheet. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-sm, 4px) var(--r-sm, 4px) 0 0;
    padding: var(--sp-2) var(--sp-3);
    font-weight: 500;
    font-size: var(--fs-sm);
    outline: none;
    cursor: pointer;
}

/* Firefox draws its own dotted/solid focus ring around a <button>'s inner
   content via this proprietary pseudo-element — separate from the CSS
   `outline` property entirely, so `outline: none` above doesn't touch it.
   Left unset, clicking a tab leaves this dark ring stuck on the active
   button until focus moves elsewhere. */
.nav-tabs .nav-link::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--text);
    background: var(--surface-alt);
    border-bottom-color: var(--border-strong);
}

.nav-tabs .nav-link:focus-visible {
    box-shadow: var(--sh-focus);
}

.nav-tabs .nav-link.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: transparent;
}

.nav-tabs .nav-link.active:hover {
    background: var(--accent-soft);
}

/* --- Tables: borderless, generous, modern. Header is sentence-case, not CAPS. --- */

table.table {
    background-color: transparent;
    color: var(--text);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-base);
    width: 100%;
}

table.table th {
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--fs-sm);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
}

table.table td {
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4);
    vertical-align: middle;
}

table.table tbody tr:hover {
    background-color: var(--surface-quiet);
}

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

/* --- Forms --- */

.form-control,
.form-select {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text);
    padding: 10px 14px;
    font-size: var(--fs-base);
    background-color: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: var(--sh-focus);
    outline: none;
}

.form-control::placeholder { color: var(--text-subtle); }

.form-label {
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--text);
    margin-bottom: var(--sp-1);
}

/* --- Inline code --- */

code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--text);
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: var(--r-sm);
}

/* --- Setup wizard step indicator --- */

.setup-steps {
    display: flex;
    gap: var(--sp-4);
    list-style: none;
    padding: 0;
    margin-bottom: var(--sp-6);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.setup-steps .active {
    color: var(--accent);
    font-weight: 600;
}

.setup-steps .done { color: var(--success); }

/* --- Empty state --- */

.empty-state {
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface-alt);
    color: var(--text-muted);
}

.empty-state h3 {
    color: var(--text);
    margin: 0 0 var(--sp-2);
}

/* --- Skeleton (loading) --- */

.skeleton {
    background: linear-gradient(90deg,
        var(--surface-alt) 25%,
        #e2e8f0 37%,
        var(--surface-alt) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* --- Blazor error UI --- */

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem 1rem 1rem 3.7rem;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    color-scheme: light only;
    background: var(--warning-soft);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.12);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--sp-3) var(--sp-5);
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: var(--fs-sm);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--sp-3);
    top: var(--sp-2);
}

/* --- Responsive --- */

@media (max-width: 768px) {
    body { font-size: var(--fs-base); }
    .content { padding: var(--sp-4); }
}