:root {
    --navy-dark: #0f1c4a;
    --navy-muted: #1b2f79;
    --slate-gray: #3f548f;
    --slate-soft: #7587b7;

    --accent: #1f4fd6;
    --accent-soft: #183ea8;
    --accent-sun: #f4c21b;
    --accent-sun-soft: #e3a60f;

    --bg-light: #f4f7ff;
    --bg-muted: #e9efff;
    --surface-white: #ffffff;

    --border-base: #cad7ff;
    --border-soft: #dbe4ff;

    --success-color: #169647;
    --warning-color: #d9830f;
    --danger-color: #d13030;
    --success-gradient-start: #11833c;
    --success-border-strong: #0f7336;
    --danger-gradient-start: #b81f1f;
    --danger-border-strong: #a51b1b;
    --warning-border-strong: #c88f10;

    --bg-warning: #fff6cc;
    --bg-warning-hover: #ffec99;
    --text-warning: #7a4b00;
    --secondary-btn-bg: #fffbe6;
    --secondary-btn-bg-hover: #fff4c8;
    --secondary-btn-border: #edd98d;
    --secondary-btn-text: #000000;
    --text-strong: #1a2350;
    --text-on-accent: #ffffff;
    --text-success-strong: #0f6d33;
    --text-warning-strong: #6e4200;
    --text-danger-strong: #8b1f1f;
    --border-hover: #9eb2ec;

    --accent-hover-soft: #edf2ff;
    --accent-active-start: #2f5de0;
    --accent-active-end: #4f74e8;
    --surface-panel: #f4f8ff;
    --surface-hover: #f9fbff;
    --surface-info: #dbe5ff;
    --surface-selection: #e2ebff;
    --toggle-off-bg: #d4ddf6;
    --toggle-off-border: #a8b8e8;
    --table-head-bg: #eef3ff;
    --table-row-hover-bg: #f7faff;
    --table-row-even-bg: #fcfdff;

    --tap-highlight: rgba(31, 79, 214, 0.18);
    --focus-outline: var(--accent-active-start);

    --shadow-sm: 0 2px 8px rgba(16, 28, 74, 0.08);
    --shadow-md: 0 10px 24px rgba(16, 28, 74, 0.12);
    --shadow-lg: 0 22px 44px rgba(16, 28, 74, 0.16);
    --shadow-glow: 0 12px 28px rgba(31, 79, 214, 0.2);
    --focus-ring: 0 0 0 3px rgba(31, 79, 214, 0.22);

    --primary: var(--accent);
    --primary-2: var(--accent-soft);
    --text: #13224c;
    --muted: #5f7098;
    --border: var(--border-base);
    --surface: var(--surface-white);
    --surface-muted: var(--bg-muted);
    --success: var(--success-color);
    --danger: var(--danger-color);
    --ring: var(--focus-ring);

    --bg-primary: var(--bg-light);
    --bg-secondary: var(--surface-white);
    --bg-tertiary: var(--bg-muted);
    --bg-card: var(--surface-white);
    --bg-card-hover: var(--accent-hover-soft);

    --accent-primary: var(--accent);
    --accent-secondary: var(--accent-soft);
    --accent-gradient: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
    --accent-success: var(--success-color);
    --accent-warning: var(--warning-color);
    --accent-danger: var(--danger-color);

    --text-primary: #13224c;
    --text-secondary: #2d3f6b;
    --text-muted: #5f7098;

    --border-color: var(--border-base);
    --border-light: var(--border-soft);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary);
    background: linear-gradient(180deg, var(--bg-light) 0%, #edf3ff 56%, #fff9df 100%);
}

a {
    color: var(--accent);
    transition: color 0.18s ease;
}

a:hover {
    color: var(--accent-soft);
}

::selection {
    background: rgba(31, 79, 214, 0.2);
}

:where(a, button, input, select, textarea, summary, [role="button"], .btn, .nav-link, .logout-icon, .toggle-password) {
    -webkit-tap-highlight-color: var(--tap-highlight);
}

:where(button, [type="button"], [type="submit"], [type="reset"], .btn, .nav-link, .logout-icon, .toggle-password):focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
}

:where(input[type="checkbox"], input[type="radio"], progress) {
    accent-color: var(--accent-primary);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    background: var(--surface-white);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
}

:where(input::placeholder, textarea::placeholder) {
    color: var(--text-muted);
}

:where(header.sticky, footer, .card, form.rounded-2xl, section.rounded-2xl, .top-header, .content-area, .auth-shell, .auth-panel, .auth-hero, .modal-content, .code-block, .identity-menu, .identity-preview) {
    border-color: var(--border-base);
}

:where(.btn, .form-submit-btn, .auth-submit, #applyFilterBtn, #appConfirmOk) {
    border: 1px solid var(--accent-secondary);
    background: var(--accent-gradient);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-sm);
}

:where(.btn, .form-submit-btn, .auth-submit, #applyFilterBtn, #appConfirmOk):hover {
    filter: saturate(1.05);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

:where(.btn-secondary, #clearFilterBtn, #appConfirmCancel, .dashboard-link, .hero-link) {
    border: 1px solid var(--secondary-btn-border);
    background: var(--secondary-btn-bg);
    color: var(--secondary-btn-text);
    box-shadow: var(--shadow-sm);
}

:where(.btn-secondary, #clearFilterBtn, #appConfirmCancel, .dashboard-link, .hero-link):hover {
    background: var(--secondary-btn-bg-hover);
    color: var(--secondary-btn-text);
    box-shadow: var(--shadow-glow);
}

:where(.btn-warning) {
    border: 1px solid var(--accent-sun-soft);
    background: linear-gradient(135deg, var(--accent-sun-soft) 0%, var(--accent-sun) 100%);
    color: var(--text-strong);
}

:where(.btn-danger) {
    border: 1px solid var(--danger-border-strong);
    background: linear-gradient(135deg, var(--danger-gradient-start) 0%, var(--danger-color) 100%);
    color: var(--text-on-accent);
}

:where(.btn-success) {
    border: 1px solid var(--success-border-strong);
    background: linear-gradient(135deg, var(--success-gradient-start) 0%, var(--success-color) 100%);
    color: var(--text-on-accent);
}

:where(.badge) {
    border: 1px solid var(--border-base);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

:where(.badge-success) {
    background: rgba(22, 150, 71, 0.14);
    border-color: rgba(22, 150, 71, 0.35);
    color: var(--text-success-strong);
}

:where(.badge-warning) {
    background: rgba(244, 194, 27, 0.24);
    border-color: rgba(227, 166, 15, 0.42);
    color: var(--text-warning-strong);
}

:where(.badge-danger) {
    background: rgba(209, 48, 48, 0.14);
    border-color: rgba(209, 48, 48, 0.34);
    color: var(--text-danger-strong);
}

:where(.alert) {
    border: 1px solid var(--border-base);
    border-radius: 12px;
    background: var(--surface-white);
    color: var(--text-secondary);
}

:where(.alert-success, .status.success, .status-card--success) {
    background: rgba(22, 150, 71, 0.1);
    border-color: rgba(22, 150, 71, 0.35);
    color: var(--text-success-strong);
}

:where(.alert-warning) {
    background: rgba(244, 194, 27, 0.2);
    border-color: rgba(227, 166, 15, 0.38);
    color: var(--text-warning-strong);
}

:where(.alert-danger, .status.error, .status-card--danger) {
    background: rgba(209, 48, 48, 0.1);
    border-color: rgba(209, 48, 48, 0.35);
    color: var(--text-danger-strong);
}

:where(.text-muted, .muted) {
    color: var(--text-muted);
}

:where(.text-success) {
    color: var(--success-color);
}

:where(.text-danger) {
    color: var(--danger-color);
}

/* Dashboard coloring */
.app-layout {
    background: var(--bg-primary);
}

.sidebar {
    background: var(--surface-white) !important;
    border-right-color: var(--border-base) !important;
    box-shadow: 6px 0 20px rgba(15, 28, 74, 0.08) !important;
}

.sidebar :where(.company-name, .company-label, .user-name, .user-role, .nav-link, .nav-section-title, .logout-icon) {
    color: var(--text-secondary);
}

.nav-section-title {
    color: var(--text-muted) !important;
}

.nav-link {
    color: var(--text-secondary);
}

.nav-link:hover {
    background: var(--accent-hover-soft) !important;
    color: var(--accent-soft);
}

.nav-link.active {
    background: linear-gradient(135deg, var(--accent-active-start) 0%, var(--accent-active-end) 100%) !important;
    color: var(--text-on-accent) !important;
    box-shadow: var(--shadow-glow) !important;
}

.nav-link.active::before {
    background: var(--accent-sun) !important;
}

.nav-badge {
    background: linear-gradient(135deg, var(--accent-sun-soft) 0%, var(--accent-sun) 100%) !important;
    color: var(--text-strong) !important;
    border: 1px solid var(--border-base);
}

.company-avatar,
.user-avatar {
    background: var(--surface-white) !important;
    color: var(--accent-soft) !important;
    border-color: var(--border-base) !important;
}

.sidebar-footer {
    background: var(--surface-white) !important;
}

.user-info {
    background: linear-gradient(135deg, var(--surface-panel) 0%, var(--surface-info) 100%) !important;
    border: 1px solid var(--border-base);
}

.logout-icon {
    border: 1px solid var(--border-base);
    border-radius: 10px;
    padding: 6px;
    background: var(--surface-info);
}

.logout-icon:hover {
    background: linear-gradient(135deg, var(--accent-sun-soft) 0%, var(--accent-sun) 100%);
    color: var(--text-strong) !important;
}

.main-content {
    background: linear-gradient(180deg, var(--bg-light) 0%, #eff4ff 100%);
}

.top-header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--border-base) !important;
    box-shadow: var(--shadow-sm);
}

:where(.card, .content-area > div, .table-wrapper, .table-card, .modal-content, .identity-menu, .identity-preview, .code-block) {
    border: none !important;
    /* box-shadow: var(--shadow-sm); */
}

.spinner,
.btn.loading::after {
    border-color: rgba(31, 79, 214, 0.25) !important;
    border-top-color: var(--accent-primary) !important;
}

/* Landing/company pages */
body > header.sticky {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--border-base);
    box-shadow: var(--shadow-sm);
}

body > main > section {
    background: var(--surface-white);
    border-color: var(--border-base);
    box-shadow: var(--shadow-sm);
}

body > main .group.block.rounded-2xl,
body > main .employee-card {
    background: var(--surface-white);
    border-color: var(--border-base);
}

body > main .group.block.rounded-2xl:hover,
body > main .employee-card:hover {
    border-color: var(--border-hover);
    background: var(--surface-hover);
}

body > footer {
    background: rgba(255, 255, 255, 0.88);
    border-top-color: var(--border-base);
}

@media (max-width: 768px) {
    .top-header,
    body > header.sticky {
        background: rgba(255, 255, 255, 0.96);
    }
}

/* Unified visual polish */
@keyframes ui-surface-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    background:
        radial-gradient(34rem 20rem at 2% -8%, rgba(31, 79, 214, 0.14), transparent 72%),
        radial-gradient(28rem 18rem at 96% -4%, rgba(244, 194, 27, 0.2), transparent 70%),
        linear-gradient(180deg, var(--bg-light) 0%, #edf3ff 56%, #fff9df 100%);
    background-attachment: fixed;
}

.landing-header,
.company-directory-header,
.public-header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: var(--border-base);
    box-shadow: var(--shadow-sm);
}

.landing-main > section,
.company-directory-main > section,
.public-form-page .public-form-card,
.public-form-page .public-form-hero {
    border: 1px solid var(--border-base);
    background: var(--surface-white);
    border-radius: 24px;
    box-shadow: var(--shadow-md);
}

.landing-hero,
.company-directory-hero,
.public-form-hero {
    position: relative;
    overflow: hidden;
}

.landing-hero::before,
.company-directory-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(244, 194, 27, 0.16) 0%, rgba(31, 79, 214, 0.08) 45%, rgba(31, 79, 214, 0.16) 100%);
    pointer-events: none;
}

.landing-kicker {
    background: rgba(244, 194, 27, 0.24);
    color: var(--text-warning-strong);
    border-color: rgba(227, 166, 15, 0.42);
}

.landing-hero-media {
    border-radius: 24px;
    border-color: var(--border-base);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(233, 239, 255, 0.88) 100%);
}

.landing-hero-metrics {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(31, 79, 214, 0.22);
    box-shadow: var(--shadow-sm);
}

.landing-company-card,
.directory-employee-card {
    border-color: var(--border-base);
    background: var(--surface-white);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.landing-company-card:hover,
.directory-employee-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.landing-company-logo {
    background: linear-gradient(145deg, rgba(31, 79, 214, 0.15) 0%, rgba(244, 194, 27, 0.16) 100%);
    border: 1px solid rgba(31, 79, 214, 0.18);
}

.landing-company-arrow,
.directory-employee-arrow {
    background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
    color: var(--text-on-accent);
}

.directory-employee-avatar {
    background: linear-gradient(145deg, rgba(31, 79, 214, 0.16) 0%, rgba(244, 194, 27, 0.18) 100%);
    border: 1px solid rgba(31, 79, 214, 0.2);
    color: var(--accent-soft);
}

.directory-empty {
    border-color: var(--border-base);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(233, 239, 255, 0.72) 100%);
}

.public-form-hero-cover {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 58%, var(--accent-sun-soft) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.public-form-hero-logo {
    background: var(--surface-white);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-md);
}

.public-form-page .public-form-card > .border-b {
    background: linear-gradient(180deg, rgba(233, 239, 255, 0.68) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-bottom-color: var(--border-base);
}

.public-form-page .status-card {
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.public-form-page .status-card--success {
    border-color: rgba(22, 150, 71, 0.35);
    background: rgba(22, 150, 71, 0.1);
    color: var(--text-success-strong);
}

.public-form-page .status-card--danger {
    border-color: rgba(209, 48, 48, 0.35);
    background: rgba(209, 48, 48, 0.1);
    color: var(--text-danger-strong);
}

.public-form-page .availability-message {
    color: var(--accent-soft);
}

.public-form-page .availability-message.error {
    color: var(--danger-color);
}

.public-form-page .availability-message.success {
    color: var(--success-color);
}

.public-footer,
.landing-footer {
    background: rgba(255, 255, 255, 0.9);
    border-top-color: var(--border-base);
}

:where(.card, .table-wrap, .table-container, .modal-content, .code-block, .company-hero-card, .settings-card, .company-side-card, .activity-filter-panel) {
    border-radius: 16px;
}

@media (prefers-reduced-motion: no-preference) {
    .landing-hero,
    .company-directory-hero,
    .public-form-hero,
    .public-form-card,
    .landing-company-card,
    .directory-employee-card {
        animation: ui-surface-enter 0.45s ease both;
    }
}