/* d3sync brand tokens — kept in step with D3syncWebApp's ClientApp/src/styles.scss */
:root {
    --primary: #00A8A8;
    --primary-hover: #009592;
    --primary-dark: #00827C;
    --primary-light: rgba(0, 168, 168, 0.1);
    --accent: #1E88E5;
    --secondary: #52606D;

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;

    --bg: #F8FAFB;
    --surface: #ffffff;
    --text: #1F2933;
    --text-muted: #52606D;
    --border: #E0E6EB;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --radius: 10px;
    --radius-sm: 6px;
    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; }

body {
    /* System stack only: the CSP forbids external font hosts. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: #1976D2; }

code {
    font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace;
    font-size: 0.9em;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

/* ---------- App shell ---------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 700; }
.brand:hover { color: var(--text); }
.brand img { width: 34px; height: 34px; display: block; }
.brand-name { font-size: 1.05rem; letter-spacing: -0.01em; }
.brand-name span { color: var(--primary); }

.site-header nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.site-header nav a {
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.site-header nav a:hover { background: var(--primary-light); color: var(--primary-dark); }

.content { max-width: 1040px; margin: 2rem auto; padding: 0 1rem; }

.site-footer {
    max-width: 1040px;
    margin: 2rem auto 3rem;
    padding: 0 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------- Centred authentication layout ---------- */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1000px 500px at 50% -10%, rgba(0, 168, 168, 0.10), transparent 60%),
        var(--bg);
}

.auth-card {
    width: 100%;
    max-width: 27rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    animation: fadeInUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-logo { display: block; width: 64px; height: 64px; margin: 0 auto 0.9rem; }
.auth-title { text-align: center; font-size: 1.35rem; margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.auth-subtitle { text-align: center; color: var(--text-muted); font-size: 0.93rem; margin-bottom: 1.25rem; }
.auth-footer { margin-top: 1.5rem; color: var(--text-muted); font-size: 0.82rem; text-align: center; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Cards ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    max-width: 30rem;
    margin: 3rem auto;
}

.card.wide { max-width: none; margin: 0 0 1.25rem; }

h1 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.card h1 { margin-bottom: 0.75rem; }
p.muted, span.muted, td.muted, .muted { color: var(--text-muted); }
p { margin-bottom: 0.5rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ---------- Forms ---------- */

label { display: block; margin: 0.85rem 0 0.3rem; font-weight: 600; font-size: 0.85rem; color: var(--text); }

input[type="email"], input[type="text"], input[type="url"],
input[type="password"], input[type="datetime-local"], select, textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.97rem;
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

input[readonly] { background: var(--bg); color: var(--text-muted); }
input[type="checkbox"] { width: auto; accent-color: var(--primary); margin-right: 0.4rem; }

/* ---------- Buttons ---------- */

button, .btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.25rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
button:hover, .btn:hover { background: var(--primary-hover); color: #fff; box-shadow: var(--shadow); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-light); }

button.block, .btn.block { display: block; width: 100%; text-align: center; }

button.secondary, .btn.secondary {
    background: transparent;
    color: var(--primary-dark);
    border-color: var(--border);
}
button.secondary:hover, .btn.secondary:hover { background: var(--primary-light); color: var(--primary-dark); }

button.danger, .btn.danger { background: var(--danger); }
button.danger:hover, .btn.danger:hover { background: #dc2626; }

button.inline, .btn.inline { margin: 0; padding: 0.3rem 0.7rem; font-size: 0.83rem; font-weight: 500; }

/* ---------- Tables ---------- */

table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--bg); }

/* A wide table scrolls inside its own box rather than pushing past the card it sits in.
   The audit log's metadata column used to spill over the page background, which read as a
   broken layout rather than as a column that needed more room. */
.table-scroll { overflow-x: auto; margin-top: 0.75rem; }
.table-scroll > table { margin-top: 0; }

td.nowrap, th.nowrap { white-space: nowrap; }

/* Bounded so one long value cannot set the width of the whole table. The full text stays
   available in the cell's title attribute. */
td.metadata {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-count { margin: 0.75rem 0 0; font-size: 0.88rem; }

.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.pager .disabled { color: var(--text-muted); opacity: 0.5; }

/* ---------- Badges and messages ---------- */

.badge {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--bg);
}
.badge.ok { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.badge.warn { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.badge.bad { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

.error-text { color: var(--danger); font-size: 0.9rem; margin-top: 0.5rem; }

/* One-time secrets (registration tokens, generated client secrets): long, unbroken
   strings that must stay selectable without stretching the page. A readonly input
   rather than a styled div, so a triple-click or Ctrl+A selects exactly the value. */
.token-value {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0;
    padding: 0.6rem 0.75rem;
    margin: 0.5rem 0 0.75rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary-light);
    color: var(--primary-dark);
}

.display-code {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.35rem;
    text-align: center;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 1.25rem;
}

.spinner { text-align: center; color: var(--text-muted); margin: 1.25rem 0; font-size: 0.92rem; }
.spinner::before {
    content: "";
    display: inline-block;
    width: 0.7rem; height: 0.7rem;
    margin-right: 0.5rem;
    border: 2px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
    vertical-align: -1px;
}
.spinner.error-text::before { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Layout helpers ---------- */

.toolbar { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-top: 0.75rem; }
.toolbar form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.toolbar label { margin: 0 0 0.3rem; }
.toolbar button, .toolbar .btn { margin-top: 0; }

.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.actions form { display: inline; }

@media (max-width: 640px) {
    .content { margin: 1.25rem auto; }
    .card { padding: 1.15rem; margin: 1rem auto; }
    .auth-card { padding: 1.5rem; }
    table { font-size: 0.86rem; }
    th, td { padding: 0.5rem 0.4rem; }
}