/* ============================================================
 * AppHotel — Nova 5 theme
 * Loaded via Soiposervices\Apphotel\ThemeServiceProvider as a
 * Nova::style() stylesheet. Layered on top of Nova's app.css
 * (Tailwind) so we target real markup classes / data attrs.
 * ============================================================ */

:root {
    --ah-radius:           14px;
    --ah-radius-lg:        20px;
    --ah-shadow:           0 1px 2px rgba(15, 23, 42, 0.04),
                           0 8px 24px -12px rgba(15, 23, 42, 0.12);
    --ah-shadow-lg:        0 30px 60px -20px rgba(15, 42, 39, 0.25),
                           0 10px 20px -10px rgba(15, 42, 39, 0.15);
    --ah-brand:            rgb(37, 144, 134);
    --ah-brand-soft:       rgba(37, 144, 134, 0.10);
    --ah-bg-warm-1:        #fdf8ef;
    --ah-bg-warm-2:        #ecf6f3;
}

/* ---------- 1. Sidebar -------------------------------------- */

#nova body,
body:has(#nova) {
    background: linear-gradient(180deg, #f6f8f9 0%, #eef1f3 100%) fixed;
}

#nova > div > [dusk="content"] > div:first-child {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8f8 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.02);
}

.dark #nova > div > [dusk="content"] > div:first-child {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-right-color: rgba(255, 255, 255, 0.05);
}

#nova header {
    background: linear-gradient(90deg, #ffffff 0%, #fbfdfd 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.dark #nova header {
    background: linear-gradient(90deg, #1f2937 0%, #182230 100%);
}

#nova header [aria-label] svg {
    height: 1.75rem;
}

/* Main menu — section title */
.sidebar-menu > div > h3,
.sidebar-menu > div > button {
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px !important;
    color: #475569 !important;
    padding: 0.5rem 0.5rem !important;
}

.dark .sidebar-menu > div > h3,
.dark .sidebar-menu > div > button {
    color: #cbd5e1 !important;
}

.sidebar-menu > div > button:hover {
    background: var(--ah-brand-soft) !important;
}

/* Main menu — section icon */
.sidebar-menu > div > h3 > span:first-child,
.sidebar-menu > div > button > span:first-child {
    color: var(--ah-brand);
}

/* Main menu — leaf items */
.sidebar-menu .flex.flex-col > div > a,
.sidebar-menu .flex.flex-col > div > button {
    font-size: 0.875rem !important;
    color: #475569 !important;
    transition: background 120ms ease, color 120ms ease;
}

.sidebar-menu .flex.flex-col > div > a:hover {
    background: var(--ah-brand-soft) !important;
    color: var(--ah-brand) !important;
}

.sidebar-menu [data-active-link="true"] {
    background: var(--ah-brand-soft) !important;
    color: var(--ah-brand) !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--ah-brand);
    border-radius: 6px;
}

/* ---------- 2. Dashboard cards ------------------------------ */

#nova .card,
#nova [class*="rounded-lg"][class*="bg-white"],
#nova .bg-white.shadow,
#nova .bg-white.rounded-lg {
    border-radius: var(--ah-radius) !important;
    box-shadow: var(--ah-shadow) !important;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

#nova [data-testid="metric"]:hover,
#nova .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ah-shadow-lg) !important;
}

/* Value-metric — make the big number stand out */
#nova [data-testid="value-metric"] h3,
#nova .value-metric h3,
#nova [class*="value-metric"] [class*="text-4xl"] {
    color: var(--ah-brand);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Headings throughout admin */
#nova h1, #nova h2 {
    letter-spacing: -0.01em;
}

/* ---------- 3. Buttons (brand recolor) --------------------- */

#nova button[type="submit"],
#nova .btn-primary,
#nova [class*="bg-primary-500"] {
    background-color: var(--ah-brand) !important;
    border-color: var(--ah-brand) !important;
}

#nova button[type="submit"]:hover,
#nova .btn-primary:hover {
    background-color: rgb(27, 116, 109) !important;
    border-color: rgb(27, 116, 109) !important;
}

/* ---------- 4. Footer --------------------------------------- */

#nova footer,
#nova [dusk="footer"] {
    color: #94a3b8;
    font-size: 0.75rem;
}

/* ---------- 5. Login screen --------------------------------- *
 * Login (and password reset / 2FA) use the Auth layout that
 * does NOT render the #nova root. Target body:not(:has(#nova)).
 */

body:not(:has(#nova)) {
    background:
        radial-gradient(1200px 600px at -10% -10%, rgba(63, 174, 163, 0.20), transparent 60%),
        radial-gradient(1000px 500px at 110% 110%, rgba(253, 224, 132, 0.25), transparent 60%),
        linear-gradient(135deg, var(--ah-bg-warm-1) 0%, var(--ah-bg-warm-2) 100%);
    min-height: 100vh;
}

body:not(:has(#nova)) > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 7vh !important;
}

/* Logo block above the form */
body:not(:has(#nova)) > div > div:first-child {
    margin-bottom: 1.5rem;
}

body:not(:has(#nova)) > div > div:first-child span svg,
body:not(:has(#nova)) > div > div:first-child > span > span > svg {
    height: 64px !important;
    width: auto !important;
    filter: drop-shadow(0 6px 16px rgba(15, 42, 39, 0.18));
}

/* Login form card */
body:not(:has(#nova)) form {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--ah-radius-lg) !important;
    box-shadow: var(--ah-shadow-lg) !important;
    padding: 2.25rem !important;
    max-width: 26rem !important;
}

body:not(:has(#nova)) form h2 {
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: #0f3b38;
    margin-bottom: 0.35rem !important;
}

body:not(:has(#nova)) form h2::after {
    content: "Backoffice AppHotel";
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: #6b7c7a;
    letter-spacing: 0.02em;
}

body:not(:has(#nova)) form input.form-input {
    border-radius: 10px !important;
    border-color: rgba(15, 42, 39, 0.12) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

body:not(:has(#nova)) form input.form-input:focus {
    border-color: var(--ah-brand) !important;
    box-shadow: 0 0 0 4px rgba(37, 144, 134, 0.15) !important;
    outline: none;
}

body:not(:has(#nova)) form button[type="submit"] {
    background: linear-gradient(135deg, rgb(63, 174, 163) 0%, rgb(27, 116, 109) 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    font-weight: 600;
    box-shadow: 0 10px 20px -8px rgba(27, 116, 109, 0.55);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

body:not(:has(#nova)) form button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -8px rgba(27, 116, 109, 0.55);
}

/* ---------- 6. Dark mode adjustments ----------------------- */

.dark body:not(:has(#nova)) {
    background:
        radial-gradient(1200px 600px at -10% -10%, rgba(63, 174, 163, 0.22), transparent 60%),
        radial-gradient(1000px 500px at 110% 110%, rgba(63, 174, 163, 0.12), transparent 60%),
        linear-gradient(135deg, #0e2624 0%, #0a1a18 100%);
}

.dark body:not(:has(#nova)) form {
    background: rgba(17, 24, 39, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

.dark body:not(:has(#nova)) form h2 {
    color: #ecfeff;
}

.dark body:not(:has(#nova)) form h2::after {
    color: #94a3b8;
}

/* ---------- 7. Legacy fallbacks (V3 selectors) -------------- *
 * Kept narrow so they don't fire on V5 markup; harmless if dead.
 */

ul.sidemenu .sidebar-dropdown > a span.sidebar-label {
    font-weight: bold;
    text-transform: uppercase;
}