/* NoHung brand layer. Loaded after page styles so branding changes do not
   alter the existing layout or feature-specific component rules. */
:root {
    --nohung-charcoal: #172126;
    --nohung-charcoal-deep: #10181c;
    --nohung-orange: #f26a2c;
    --nohung-orange-dark: #d9561d;
    --nohung-orange-soft: #fff0e8;
    --nohung-surface: #ffffff;
    --nohung-background: #f7f8f6;
    --nohung-muted: #6b777d;
    --nohung-line: #e4e8e7;

    --ink: var(--nohung-charcoal);
    --ink-strong: #11191d;
    --muted: var(--nohung-muted);
    --subtle: #9aa5a8;
    --line: var(--nohung-line);
    --surface: var(--nohung-surface);
    --background: var(--nohung-background);
    --primary: var(--nohung-orange);
    --primary-dark: var(--nohung-orange-dark);
    --primary-soft: var(--nohung-orange-soft);
    --sidebar: var(--nohung-charcoal);
    --sidebar-deep: var(--nohung-charcoal-deep);
    --sidebar-muted: #b8c2c4;
    --success: #15966f;
    --warning: #d99022;
    --violet: #7658c8;
    --danger: #c85358;

    --payroll-ink: var(--nohung-charcoal);
    --payroll-muted: var(--nohung-muted);
    --payroll-line: var(--nohung-line);
    --payroll-soft: #f4f6f5;
    --payroll-accent: var(--nohung-orange);
    --payroll-success: #15966f;
    --payroll-danger: #c85358;

    --report-ink: var(--nohung-charcoal);
    --report-muted: var(--nohung-muted);
    --report-line: var(--nohung-line);
    --report-soft: #f4f6f5;
    --report-accent: var(--nohung-orange);
    --report-accent-soft: var(--nohung-orange-soft);
}

body,
button,
input,
select,
textarea {
    font-family: Poppins, "Segoe UI", Arial, sans-serif;
}

body {
    background: var(--background);
    color: var(--ink);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: rgba(242, 106, 44, 0.3);
}

.sidebar {
    background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-deep) 100%);
}

.brand-mark {
    width: 42px;
    height: 42px;
    background: url("../brand/nohung-mark.svg") center / contain no-repeat;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    letter-spacing: 0;
}

.brand-mark > *,
.brand-mark::before,
.brand-mark::after {
    color: transparent;
    font-size: 0;
}

.brand-copy strong,
.brand-name,
.sidebar-brand > span:last-child:not(.brand-copy)::before {
    color: #ffffff;
    font-family: Poppins, "Segoe UI", Arial, sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.brand-name {
    font-size: 1rem;
}

.brand-copy small,
.sidebar-brand > span:last-child:not(.brand-copy) small {
    color: #b8c2c4;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

/* Older compact pages contain the wordmark as a bare text node. Keep their
   existing markup, but render the same branded wordmark consistently. */
.sidebar-brand > span:last-child:not(.brand-copy) {
    display: grid;
    gap: 2px;
    min-width: 0;
    font-size: 0;
}

.sidebar-brand > span:last-child:not(.brand-copy)::before {
    content: "NOHUNG HR";
}

.sidebar-brand > span:last-child:not(.brand-copy) small {
    display: block;
}

.auth-intro {
    background: linear-gradient(145deg, var(--nohung-charcoal-deep) 0%, var(--nohung-charcoal) 62%, var(--nohung-orange-dark) 150%);
}

.auth-page {
    background:
        radial-gradient(circle at 12% 12%, rgba(242, 106, 44, 0.14), transparent 32%),
        radial-gradient(circle at 88% 88%, rgba(21, 150, 111, 0.1), transparent 30%),
        var(--background);
}

.auth-card,
.auth-shell {
    border-color: rgba(255, 255, 255, 0.9);
}

.button-primary,
.primary-button,
.hc-button,
.report-card-icon,
.payroll-card-icon {
    --brand-action: var(--nohung-orange);
}

.primary-button,
.button-primary,
.hc-button {
    background: var(--nohung-orange);
}

.primary-button:hover,
.button-primary:hover,
.hc-button:hover {
    background: var(--nohung-orange-dark);
}

.eyebrow,
.auth-card .eyebrow,
.payroll-card-icon,
.report-card-icon,
.report-card b,
.payroll-card b {
    color: var(--nohung-orange);
}

.payroll-card-icon,
.report-card-icon {
    background: var(--nohung-orange-soft);
}

.payroll-table th,
.report-table th {
    background: var(--nohung-charcoal);
}