/* AskYouTo — one design system (DESIGN.md), applied to the LeptonX Lite shell
   and bridged into every hand-built au2 page via the --au2-* tokens below.
   See: https://abp.io/docs/latest/framework/ui/common/leptonx-css-variables */

/* --- au2 design tokens — human/approachable, one system for every surface --- */
:root {
    --au2-bg: #f7f8fb;
    --au2-surface: #ffffff;
    --au2-fg: #1b1f27;
    --au2-muted: #5c6270;
    --au2-border: #dde1e8;

    --au2-accent: #0d9488;
    --au2-accent-hover: #0b7d73;
    --au2-accent-active: #0a6b62;
    --au2-accent-soft: rgba(13, 148, 136, 0.12);
    --au2-accent-on: #ffffff;

    --au2-success: #0e9f6e;
    --au2-success-soft: rgba(14, 159, 110, 0.14);
    --au2-warn: #d97706;
    --au2-warn-soft: rgba(217, 119, 6, 0.16);
    --au2-danger: #dc2626;
    --au2-danger-soft: rgba(220, 38, 38, 0.1);
    --au2-ink: #14161b;

    --au2-font-display: 'Iowan Old Style', 'Charter', Georgia, serif;
    --au2-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --au2-radius-sm: 10px;
    --au2-radius-md: 14px;
    --au2-radius-lg: 18px;
    --au2-radius-pill: 9999px;

    --au2-shadow-sm: 0 4px 12px rgba(20, 22, 27, 0.05);
    --au2-shadow-md: 0 12px 28px rgba(20, 22, 27, 0.08);
    --au2-focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.28);
}

/* --- Design tokens (reference) --- */
:root {
    --ayt-primary: var(--au2-accent);
    --ayt-primary-container: var(--au2-accent-hover);
    --ayt-secondary-accent: var(--au2-success);
    --ayt-surface: var(--au2-bg);
    --ayt-surface-low: #eef0f4;
    --ayt-surface-high: #e3e7ee;
    --ayt-surface-inset: var(--au2-surface);
    --ayt-on-surface: var(--au2-fg);
    --ayt-on-surface-variant: var(--au2-muted);
    --ayt-outline-variant: #cdd2db;

    /* LeptonX / Bootstrap bridge */
    --lpx-logo: url("/images/logo/leptonxlite/logo-light-thumbnail.png");
    --lpx-logo-icon: url("/images/logo/leptonxlite/logo-light-thumbnail.png");
    --lpx-brand: var(--ayt-primary);
    --lpx-primary: var(--ayt-primary);
    --lpx-secondary: var(--ayt-primary-container);
    --lpx-success: var(--au2-success);
    --lpx-light: var(--ayt-surface-low);
    --lpx-info: #2a6f97;
    --lpx-card-bg: var(--ayt-surface-inset);

    --lpx-shadow: var(--au2-shadow-sm);

    /* Used by dark/dim pickers and some components */
    --lpx-border-color: rgba(29, 33, 40, 0.12);
    --lpx-content-text: var(--ayt-on-surface-variant);
    --lpx-content-bg: var(--ayt-surface-inset);
    --lpx-card-title-text-color: var(--ayt-on-surface);
    --lpx-navbar-text-color: var(--ayt-on-surface-variant);
    --lpx-navbar-active-text-color: var(--ayt-primary);
    --lpx-navbar-color-rgb: 247, 248, 251;
    --lpx-content-text-rgb: 92, 98, 112;
    --lpx-light-rgb: 238, 240, 244;
    --lpx-dark-rgb: 27, 31, 39;
}

:root .abp-account-layout .lpx-brand-logo {
    --lpx-logo: url("/images/logo/leptonxlite/logo-dark-thumbnail.png");
    background-position: left;
}

/* Bootstrap 5 variables — light shell (tonal, minimal borders) */
:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: var(--au2-font-body);
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: var(--ayt-on-surface);
    --bs-body-color-rgb: 27, 31, 39;
    --bs-body-bg: var(--ayt-surface);
    --bs-body-bg-rgb: 247, 248, 251;
    --bs-primary: var(--ayt-primary);
    --bs-primary-rgb: 13, 148, 136;
    --bs-secondary: var(--ayt-primary-container);
    --bs-secondary-rgb: 11, 125, 115;
    --bs-border-color: var(--au2-border);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-link-color: var(--ayt-primary);
    --bs-link-hover-color: var(--au2-accent-active);
    --bs-heading-color: var(--ayt-on-surface);
    --bs-box-shadow: var(--lpx-shadow);
    --bs-box-shadow-sm: var(--au2-shadow-sm);
}

h1, h2, h3, h4, h5, h6,
.lpx-main-title,
.card-header {
    font-family: var(--au2-font-display);
    letter-spacing: -0.01em;
}

/* --- Shell: remove “boxed” borders, use surfaces --- */
html,
body {
    background-color: var(--ayt-surface) !important;
    color: var(--ayt-on-surface);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.lpx-topbar {
    background-color: var(--ayt-surface-inset) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(20, 22, 27, 0.06);
}

.lpx-content-wrapper {
    border: none !important;
}

.lpx-content-container {
    background-color: var(--ayt-surface) !important;
    box-shadow: none !important;
}

.lpx-main-title {
    color: var(--ayt-on-surface) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Sidebar: surface-container-low (light workspace rail) */
.lpx-sidebar {
    background-color: var(--ayt-surface-low) !important;
    color: var(--ayt-on-surface-variant) !important;
}

.lpx-sidebar .lpx-logo-container {
    background-color: var(--ayt-surface-low) !important;
}

/* Sidebar title: theme defaults to white on a dark rail — align with light rail */
.lpx-logo-container .lpx-brand-name,
.lpx-brand-name {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ayt-on-surface) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.lpx-logo-container a,
.lpx-logo-container .lpx-brand-name a {
    color: var(--ayt-on-surface) !important;
    text-decoration: none;
}

.lpx-logo-container a:hover,
.lpx-logo-container .lpx-brand-name a:hover {
    color: var(--ayt-primary) !important;
}

.lpx-logo-container .menu-collapse-icon {
    color: var(--ayt-on-surface-variant) !important;
}

.lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu {
    background-color: var(--ayt-surface-low) !important;
    max-width: 280px;
}

.lpx-nav-menu {
    scrollbar-color: rgba(13, 148, 136, 0.2) var(--ayt-surface-low) !important;
}

.lpx-nav-menu::-webkit-scrollbar-thumb {
    background-color: rgba(13, 148, 136, 0.15) !important;
}

.lpx-nav-menu::-webkit-scrollbar-track {
    background-color: var(--ayt-surface-low) !important;
}

.lpx-nav-menu .lpx-menu-item-link {
    color: var(--ayt-on-surface-variant) !important;
    border-radius: 0.75rem;
    margin: 4px 12px;
    width: calc(100% - 24px);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.lpx-nav-menu .lpx-menu-item-link:hover {
    color: var(--ayt-primary) !important;
    background-color: var(--ayt-surface-high) !important;
}

.lpx-nav-menu .lpx-menu-item-link.selected,
.lpx-nav-menu .lpx-menu-item-link.expanded {
    color: var(--ayt-primary) !important;
    background-color: var(--ayt-surface-high) !important;
}

.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.expanded .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.selected .dd-icon,
.lpx-nav-menu .lpx-menu-item-link.expanded .dd-icon {
    color: var(--ayt-primary) !important;
    opacity: 1 !important;
}

.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link.selected,
.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link:hover {
    background-color: var(--ayt-surface-high) !important;
    color: var(--ayt-primary) !important;
}

/* Toolbar / user area in header */
.lpx-topbar,
.lpx-mobile-navbar,
.lpx-mobile-menu {
    font-family: var(--au2-font-body);
}

.hover-trigger .lpx-sidebar-container:hover {
    box-shadow: var(--au2-shadow-md) !important;
}

/* Primary actions: solid teal accent (DESIGN.md) */
.btn-primary {
    --bs-btn-bg: var(--au2-accent);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--au2-accent-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--au2-accent-active);
    --bs-btn-active-border-color: transparent;
    background-image: none !important;
    background-color: var(--au2-accent) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--au2-accent-hover) !important;
    box-shadow: var(--au2-shadow-md);
}

.btn-secondary {
    --bs-btn-color: var(--ayt-primary);
    --bs-btn-bg: var(--ayt-surface-inset);
    --bs-btn-border-color: var(--au2-border);
    --bs-btn-hover-color: var(--ayt-primary);
    --bs-btn-hover-bg: var(--ayt-surface-high);
    --bs-btn-hover-border-color: var(--au2-border);
    border-radius: 0.75rem !important;
    font-weight: 600;
}

.btn-outline-primary {
    color: var(--ayt-primary) !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
    border-radius: 0.75rem !important;
}

.btn-outline-primary:hover {
    background-color: var(--ayt-surface-high) !important;
    color: var(--ayt-primary) !important;
}

/* Cards: inset surface, soft shadow */
.card {
    background-color: var(--ayt-surface-inset);
    border: none !important;
    border-radius: 1rem !important;
    box-shadow: var(--au2-shadow-sm);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    box-shadow: var(--au2-shadow-md);
}

.card-header {
    background-color: transparent;
    border-bottom: none !important;
    font-weight: 600;
    color: var(--ayt-on-surface);
}

/* Form controls: filled surface, ghost outline */
.form-control,
.form-select {
    background-color: var(--ayt-surface-inset) !important;
    border: 1px solid var(--au2-border) !important;
    border-radius: 0.75rem !important;
    color: var(--ayt-on-surface);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--au2-accent) !important;
    box-shadow: var(--au2-focus-ring);
}

.form-label,
label {
    color: var(--ayt-on-surface-variant);
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

/* Badges: pill radius, quiet fills */
.badge.bg-success,
.badge.text-bg-success {
    background-color: var(--au2-success-soft) !important;
    color: var(--ayt-secondary-accent) !important;
    border-radius: var(--au2-radius-pill) !important;
    font-weight: 600;
}

/* Focus pillar helper for task rows / detail (DESIGN.md §5) */
.ayt-focus-pillar {
    box-shadow: inset 2px 0 0 0 var(--ayt-secondary-accent);
    border-radius: 1rem;
}

/* Tables: soften grid lines toward “no-line” list feel */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(200, 196, 213, 0.15);
}

.table > :not(caption) > * > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Footbar / mobile bars aligned to light shell */
.lpx-footbar-container {
    background-color: var(--ayt-surface-inset) !important;
    box-shadow: 0 -1px 0 rgba(20, 22, 27, 0.06) !important;
}

.lpx-login-area {
    background-color: var(--ayt-surface) !important;
}

.lpx-layout-login {
    background-color: rgba(247, 248, 251, 0.85) !important;
    backdrop-filter: blur(12px);
}

/* Brand utility (optional marketing blocks) */
.bg-brand-gradient {
    background: var(--au2-accent) !important;
}

/* ABP toast notification actions */
.au2-notify-undo {
    color: var(--ayt-primary) !important;
    font-weight: 600;
    margin-left: 0.4rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.au2-notify-undo:hover,
.au2-notify-undo:focus-visible {
    color: var(--au2-accent-active) !important;
}