/* Shared core styles — maintenance banner, app nav, theme toggle, and other _core/ components */

/* ── Status icon badges (shared utility) ─────────────────────────────── */
.icon-check,
.icon-x {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}
.icon-check {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0' y='0' width='24' height='24' rx='4' fill='%2316a34a'/%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-x {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0' y='0' width='24' height='24' rx='4' fill='%23dc2626'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.icon-check.icon-lg,
.icon-x.icon-lg {
	width: 1.5em;
	height: 1.5em;
}

/* ── Theme toggle (single button, light/dark) ────────────────────────── */
.theme-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0;
}
.theme-toggle-btn .theme-icon svg {
	width: 18px;
	height: 18px;
}
.theme-toggle-btn:hover {
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.1);
}
.theme-toggle-btn .theme-icon {
	display: none;
	align-items: center;
	justify-content: center;
}
.theme-toggle-btn .theme-icon-moon {
	display: flex;
}
.theme-toggle-btn.is-dark .theme-icon-moon {
	display: none;
}
.theme-toggle-btn.is-dark .theme-icon-sun {
	display: flex;
}
.theme-toggle-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}

a.theme-toggle-btn {
	text-decoration: none;
}
.dashboard-signout-btn:hover {
	color: #fecaca;
	background: rgba(220, 38, 38, 0.18);
	border-color: rgba(220, 38, 38, 0.45);
}
.dashboard-signout-btn svg {
	display: block;
}

/* ── Maintenance Banner ────────────────────────────────────────────── */
#at-maintenance-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-family: system-ui, -apple-system, sans-serif;
    color: #fff;
    border: none;
    box-shadow: none;
    line-height: 1.4;
}

#at-maintenance-banner.at-banner--active {
    background: #b45309;
}

#at-maintenance-banner.at-banner--coming-soon {
    background: #2563eb;
}

#at-maintenance-banner svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* ── Maintenance read-only: locked form controls ─────────────────── */
[data-m-locked] {
    cursor: not-allowed !important;
}

/* ── Impersonation bar (super_admin viewing as another user) ─────────── */
/* px-based sizes: ODS uses html.ods-purchaser { font-size: 20px } so 0.875rem
 * reads ~17.5px there but ~14px in apps with default 16px root — body padding
 * and the bar looked inconsistent. Lock layout to px so every app matches. */
body.at-impersonation-bar-visible {
    padding-top: 48px;
}

#at-impersonation-bar.at-impersonation-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 15px;
    font-family: 'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
        sans-serif;
    background: #b45309;
    color: #fff;
    line-height: 1.4;
    flex-wrap: wrap;
}

.at-impersonation-label {
    opacity: 0.95;
    font-size: inherit;
}

.at-impersonation-label strong {
    font-weight: 700;
    font-size: inherit;
}

#at-impersonation-bar .at-impersonation-stop {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    font-size: 14px;
    padding: 6px 12px;
    min-height: 32px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.25;
    box-sizing: border-box;
}

.at-impersonation-stop:hover {
    background: rgba(255, 255, 255, 0.2);
}

.at-impersonation-stop:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* ── Impersonate User widget (top-right dropdown) ──────────────────── */
#at-impersonation-widget.at-impersonation-widget {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 99998;
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
        sans-serif;
}

body.at-impersonation-bar-visible #at-impersonation-widget.at-impersonation-widget {
    top: 52px;
}

/*
 * Resting = subdued / semi-transparent; hover = full Sale Tracker–style gradient.
 */
.at-impersonation-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(0, 28, 62, 0.18) 38%,
            rgba(0, 10, 26, 0.28) 100%
        ),
        rgba(6, 50, 95, 0.4);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.at-impersonation-caret {
    display: block;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.at-impersonation-toggle.is-open .at-impersonation-caret {
    transform: rotate(180deg);
}

/* Full “active” chrome (formerly the resting state), strongest on hover */
.at-impersonation-toggle:hover {
    background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(0, 28, 62, 0.42) 38%,
            rgba(0, 10, 26, 0.62) 100%
        ),
        #06325f;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

.at-impersonation-toggle.is-open {
    background: rgba(55, 155, 215, 0.14);
    border-color: rgba(55, 155, 215, 0.35);
    color: #fff;
}

.at-impersonation-toggle.is-open:hover {
    background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(0, 28, 62, 0.42) 38%,
            rgba(0, 10, 26, 0.62) 100%
        ),
        #06325f;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

.at-impersonation-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

.at-impersonation-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    min-width: 26rem;
    max-width: min(26rem, calc(100vw - 1rem));
    max-height: 22rem;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.at-impersonation-dropdown[hidden] {
    display: none !important;
}

.at-impersonation-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.9375rem;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    color: #222;
    background: #fff;
}

.at-impersonation-search::placeholder {
    color: #666;
    font-size: 0.9375rem;
}

.at-impersonation-search:focus {
    outline: none;
    background: #fafafa;
}

.at-impersonation-results {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.at-impersonation-empty {
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    color: #666;
}

.at-imp-user-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
    margin: 0;
    background: none;
    border: none;
    color: #222;
    min-height: 2.25rem;
}

.at-imp-user-row--pick {
    cursor: pointer;
}

.at-imp-user-row--pick:hover {
    background: #f0f0f0;
}

.at-imp-user-row--pick:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.at-imp-user-row--active {
    cursor: default;
    background: #f5f7fa;
}

.at-imp-user-num {
    flex: 0 0 auto;
    width: 1.75rem;
    font-variant-numeric: tabular-nums;
    color: #555;
    flex-shrink: 0;
}

.at-imp-user-name {
    flex: 0 1 9rem;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.at-imp-user-role {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Same treatment as Sale Tracker myAkel "Synced" pill (.sdn-overview-myakel-pill--ok) */
.at-imp-user-active-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #14532d;
    background: rgba(22, 163, 74, 0.15);
    border: 1px solid rgba(22, 163, 74, 0.32);
    padding: 0.15rem 0.55rem;
    border-radius: 0;
    line-height: 1.2;
}

/* ── Dark theme overrides (scoped: data-theme="light" overrides) ─────── */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .at-impersonation-toggle {
        border-color: rgba(255, 255, 255, 0.08);
        color: #fff;
        background: linear-gradient(
                168deg,
                rgba(255, 255, 255, 0.03) 0%,
                rgba(0, 28, 62, 0.18) 38%,
                rgba(0, 10, 26, 0.28) 100%
            ),
            rgba(6, 50, 95, 0.4);
    }
    html:not([data-theme="light"]) .at-impersonation-toggle:hover {
        background: linear-gradient(
                168deg,
                rgba(255, 255, 255, 0.14) 0%,
                rgba(0, 28, 62, 0.42) 38%,
                rgba(0, 10, 26, 0.62) 100%
            ),
            #06325f;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.18);
    }
    html:not([data-theme="light"]) .at-impersonation-toggle.is-open {
        background: rgba(55, 155, 215, 0.14);
        border-color: rgba(55, 155, 215, 0.35);
        color: #fff;
    }
    html:not([data-theme="light"]) .at-impersonation-toggle.is-open:hover {
        background: linear-gradient(
                168deg,
                rgba(255, 255, 255, 0.14) 0%,
                rgba(0, 28, 62, 0.42) 38%,
                rgba(0, 10, 26, 0.62) 100%
            ),
            #06325f;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.18);
    }
    html:not([data-theme="light"]) .at-impersonation-dropdown {
        background: #252931;
        border-color: #3d4149;
        border-radius: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    html:not([data-theme="light"]) .at-impersonation-search {
        background: #252931;
        border-bottom-color: #3d4149;
        border-radius: 0;
        color: #e4e6eb;
    }
    html:not([data-theme="light"]) .at-impersonation-search::placeholder {
        color: #8b9099;
    }
    html:not([data-theme="light"]) .at-impersonation-search:focus {
        background: #2d3139;
    }
    html:not([data-theme="light"]) .at-impersonation-empty {
        color: #a0a4ab;
    }
    html:not([data-theme="light"]) .at-imp-user-row {
        color: #e4e6eb;
    }
    html:not([data-theme="light"]) .at-imp-user-num {
        color: #a0a4ab;
    }
    html:not([data-theme="light"]) .at-imp-user-role {
        color: #a0a4ab;
    }
    html:not([data-theme="light"]) .at-imp-user-row--pick:hover {
        background: #3d4149;
    }
    html:not([data-theme="light"]) .at-imp-user-row--active {
        background: #2d3139;
    }
    html:not([data-theme="light"]) .at-imp-user-active-badge {
        color: #86efac;
        background: rgba(22, 101, 52, 0.35);
        border-color: rgba(34, 197, 94, 0.35);
    }
    /* Native date/time/datetime: bright control chrome in dark mode (WebKit/Blink + Firefox color-scheme) */
    html:not([data-theme="light"]) input[type="date"],
    html:not([data-theme="light"]) input[type="datetime-local"],
    html:not([data-theme="light"]) input[type="time"] {
        color-scheme: dark;
    }
    html:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator,
    html:not([data-theme="light"]) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    html:not([data-theme="light"]) input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(1) brightness(1.25);
        opacity: 1;
        cursor: pointer;
    }
    html:not([data-theme="light"]) input[type="date"]::-webkit-clear-button,
    html:not([data-theme="light"]) input[type="date"]::-webkit-inner-spin-button,
    html:not([data-theme="light"]) input[type="datetime-local"]::-webkit-clear-button,
    html:not([data-theme="light"]) input[type="datetime-local"]::-webkit-inner-spin-button,
    html:not([data-theme="light"]) input[type="time"]::-webkit-clear-button,
    html:not([data-theme="light"]) input[type="time"]::-webkit-inner-spin-button {
        filter: invert(1) brightness(1.25);
    }
    /* Footer: light text in dark mode */
    html:not([data-theme="light"]) .footer,
    html:not([data-theme="light"]) footer {
        color: #a0a4ab !important;
    }
    html:not([data-theme="light"]) .footer a,
    html:not([data-theme="light"]) footer a {
        color: #a0a4ab !important;
    }
    html:not([data-theme="light"]) .footer a:hover,
    html:not([data-theme="light"]) footer a:hover {
        color: #e4e6eb !important;
    }
    html:not([data-theme="light"]) .powered-by {
        color: rgba(255, 255, 255, 0.6) !important;
    }
    html:not([data-theme="light"]) .powered-by a {
        color: rgba(255, 255, 255, 0.75) !important;
    }
    html:not([data-theme="light"]) .powered-by a:hover {
        color: rgba(255, 255, 255, 0.95) !important;
    }
    html:not([data-theme="light"]) .powered-by-copy {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    html:not([data-theme="light"]) .footer-links a {
        color: #a0a4ab !important;
    }
    html:not([data-theme="light"]) .footer-links a:hover {
        color: #e4e6eb !important;
    }
    html:not([data-theme="light"]) .footer-text,
    html:not([data-theme="light"]) .footer-disclaimer {
        color: #a0a4ab !important;
    }
}
[data-theme="dark"] .at-impersonation-toggle {
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(0, 28, 62, 0.18) 38%,
            rgba(0, 10, 26, 0.28) 100%
        ),
        rgba(6, 50, 95, 0.4);
}
[data-theme="dark"] .at-impersonation-toggle:hover {
    background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(0, 28, 62, 0.42) 38%,
            rgba(0, 10, 26, 0.62) 100%
        ),
        #06325f;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .at-impersonation-toggle.is-open {
    background: rgba(55, 155, 215, 0.14);
    border-color: rgba(55, 155, 215, 0.35);
    color: #fff;
}
[data-theme="dark"] .at-impersonation-toggle.is-open:hover {
    background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(0, 28, 62, 0.42) 38%,
            rgba(0, 10, 26, 0.62) 100%
        ),
        #06325f;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .at-impersonation-dropdown {
    background: #252931;
    border-color: #3d4149;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .at-impersonation-search {
    background: #252931;
    border-bottom-color: #3d4149;
    border-radius: 0;
    color: #e4e6eb;
}
[data-theme="dark"] .at-impersonation-search::placeholder {
    color: #8b9099;
}
[data-theme="dark"] .at-impersonation-search:focus {
    background: #2d3139;
}
[data-theme="dark"] .at-impersonation-empty {
    color: #a0a4ab;
}
[data-theme="dark"] .at-imp-user-row {
    color: #e4e6eb;
}
[data-theme="dark"] .at-imp-user-num {
    color: #a0a4ab;
}
[data-theme="dark"] .at-imp-user-role {
    color: #a0a4ab;
}
[data-theme="dark"] .at-imp-user-row--pick:hover {
    background: #3d4149;
}
[data-theme="dark"] .at-imp-user-row--active {
    background: #2d3139;
}
[data-theme="dark"] .at-imp-user-active-badge {
    color: #86efac;
    background: rgba(22, 101, 52, 0.35);
    border-color: rgba(34, 197, 94, 0.35);
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"] {
    color-scheme: dark;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.25);
    opacity: 1;
    cursor: pointer;
}
[data-theme="dark"] input[type="date"]::-webkit-clear-button,
[data-theme="dark"] input[type="date"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="datetime-local"]::-webkit-clear-button,
[data-theme="dark"] input[type="datetime-local"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="time"]::-webkit-clear-button,
[data-theme="dark"] input[type="time"]::-webkit-inner-spin-button {
    filter: invert(1) brightness(1.25);
}
[data-theme="dark"] .footer,
[data-theme="dark"] footer { color: #a0a4ab !important; }
[data-theme="dark"] .footer a,
[data-theme="dark"] footer a { color: #a0a4ab !important; }
[data-theme="dark"] .footer a:hover,
[data-theme="dark"] footer a:hover { color: #e4e6eb !important; }
[data-theme="dark"] .powered-by { color: rgba(255, 255, 255, 0.6) !important; }
[data-theme="dark"] .powered-by a { color: rgba(255, 255, 255, 0.75) !important; }
[data-theme="dark"] .powered-by a:hover { color: rgba(255, 255, 255, 0.95) !important; }
[data-theme="dark"] .powered-by-copy { color: rgba(255, 255, 255, 0.5) !important; }
[data-theme="dark"] .footer-links a { color: #a0a4ab !important; }
[data-theme="dark"] .footer-links a:hover { color: #e4e6eb !important; }
[data-theme="dark"] .footer-text,
[data-theme="dark"] .footer-disclaimer { color: #a0a4ab !important; }

/*
 * Opt-in: pages that are always dark UI but do not set data-theme and may run under light OS.
 * Add class ak-force-dark-native-controls to <html> or <body>.
 */
:is(html, body).ak-force-dark-native-controls input[type="date"],
:is(html, body).ak-force-dark-native-controls input[type="datetime-local"],
:is(html, body).ak-force-dark-native-controls input[type="time"] {
    color-scheme: dark;
}
:is(html, body).ak-force-dark-native-controls input[type="date"]::-webkit-calendar-picker-indicator,
:is(html, body).ak-force-dark-native-controls input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:is(html, body).ak-force-dark-native-controls input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.25);
    opacity: 1;
    cursor: pointer;
}
:is(html, body).ak-force-dark-native-controls input[type="date"]::-webkit-clear-button,
:is(html, body).ak-force-dark-native-controls input[type="date"]::-webkit-inner-spin-button,
:is(html, body).ak-force-dark-native-controls input[type="datetime-local"]::-webkit-clear-button,
:is(html, body).ak-force-dark-native-controls input[type="datetime-local"]::-webkit-inner-spin-button,
:is(html, body).ak-force-dark-native-controls input[type="time"]::-webkit-clear-button,
:is(html, body).ak-force-dark-native-controls input[type="time"]::-webkit-inner-spin-button {
    filter: invert(1) brightness(1.25);
}

@media print {
    #at-maintenance-banner,
    #at-app-nav,
    #at-impersonation-bar,
    #at-impersonation-widget {
        display: none !important;
    }
}