/* =========================================================================
   FG Academy — Common Stylesheet
   =========================================================================
   Shared styles used across every page of the site: base typography,
   buttons, layout container, cards and badges.

   IMPORTANT: This file is linked BEFORE utilities.css in every layout. That
   order matters — utility classes written directly in Blade templates
   (e.g. class="btn-primary bg-white") are meant to override these component
   styles, and that only works if utilities.css loads AFTER this file in the
   cascade. Load order: style.css -> utilities.css -> page-specific CSS
   (and admin.css, on admin pages only). Do not reorder these <link> tags.

   These declarations were originally copied exactly (not hand-simplified)
   from a compiled Tailwind build — including the --tw-ring and --tw-shadow
   custom properties the Tailwind ring/shadow system relies on — so the
   visual result stayed byte-for-byte identical through the switch away
   from Tailwind/Vite. There is no build step now: just edit this file
   directly.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

body {
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    --tw-text-opacity: 1;
    color: rgb(2 15 33 / var(--tw-text-opacity, 1));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hides Alpine.js-controlled elements until Alpine initializes, preventing a flash of unstyled content */
[x-cloak] {
    display: none !important;
}

/* -------------------------------------------------------------------------
   Buttons (.btn-primary / .btn-secondary / .btn-outline / .btn-ghost)
   ------------------------------------------------------------------------- */

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-outline:focus,
.btn-ghost:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-ghost:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Primary — solid electric blue */
.btn-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(0 71 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 10px 30px -10px rgba(2, 15, 33, .18);
    --tw-shadow-colored: 0 10px 30px -10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 56 204 / var(--tw-bg-opacity, 1));
}
.btn-primary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(61 120 255 / var(--tw-ring-opacity, 1));
}

/* Secondary — white with a subtle ring */
.btn-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(0 43 153 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(157 190 255 / var(--tw-ring-opacity, 1));
}
.btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(233 240 255 / var(--tw-bg-opacity, 1));
}
.btn-secondary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(109 156 255 / var(--tw-ring-opacity, 1));
}

/* Outline — used on dark/gradient backgrounds */
.btn-outline {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-outline:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(0 43 153 / var(--tw-text-opacity, 1));
}
.btn-outline:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

/* Ghost — text-only, subtle hover background */
.btn-ghost {
    --tw-text-opacity: 1;
    color: rgb(0 43 153 / var(--tw-text-opacity, 1));
}
.btn-ghost:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(233 240 255 / var(--tw-bg-opacity, 1));
}
.btn-ghost:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(157 190 255 / var(--tw-ring-opacity, 1));
}

/* -------------------------------------------------------------------------
   Site logo (admin-uploaded via Admin > Site Branding, falls back to
   public/images/logo.png) — shared globally by the navbar, footer, dashboard
   sidebar and guest (login/register) layouts. The logo is a wide ~5:1
   wordmark, not a square mark, so it's sized by height with the width left
   free to scale (object-fit: contain) rather than forced into a fixed
   square/circle box like the old static image was.
   ------------------------------------------------------------------------- */
.site-logo {
    height: 2rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
}

@media (min-width: 640px) {
    .site-logo {
        height: 2.5rem;
        max-width: 12rem;
    }
}

/* 1.3x size used in the navbar and dashboard sidebar specifically (not the
   footer/guest pages, which keep the base .site-logo size above). */
.site-logo--lg {
    height: 2.6rem;
    max-width: 11.7rem;
}

@media (min-width: 640px) {
    .site-logo--lg {
        height: 3.25rem;
        max-width: 15.6rem;
    }
}

/* The dashboard sidebar is a fixed ~256px column (288px on the mobile
   drawer) — cap the enlarged logo's width so it can't overflow it at the
   sm+ tier above; the height still gets the full 1.3x bump. */
.dashboard-sidebar-logo {
    max-width: 11.5rem;
}

/* -------------------------------------------------------------------------
   Password field show/hide toggle
   Shared globally by the x-password-input component (auth pages) and the
   Apply page's account-creation password fields.
   ------------------------------------------------------------------------- */
.password-field {
    position: relative;
}

.password-input {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: .875rem;
    color: rgb(148 163 184);
    transition: color .15s ease;
}

.password-toggle:hover {
    color: rgb(75 85 99);
}

.password-toggle svg {
    height: 1.25rem;
    width: 1.25rem;
}

/* -------------------------------------------------------------------------
   Navbar account menu (partials/navbar.blade.php)
   Guest state: a small pill with a person icon linking to Login. Signed-in
   state: an avatar + name trigger that opens a dropdown with the
   role-appropriate dashboard link and Logout, replacing what used to be a
   separate dashboard link and a separate logout button in the navbar.
   ------------------------------------------------------------------------- */
.nav-account-guest {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    padding: .375rem 1.125rem .375rem .375rem;
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}

.nav-account-guest:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.nav-account-guest__icon {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.nav-account-guest__icon svg {
    height: 1rem;
    width: 1rem;
}

.nav-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    padding: .375rem 1rem .375rem .375rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}

.nav-account-trigger:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.nav-account-trigger__name {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-avatar {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0047ff, #7c3aed);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.nav-account-avatar--lg {
    height: 2.75rem;
    width: 2.75rem;
    font-size: 1.0625rem;
}

.nav-account-menu__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
}

.nav-account-menu__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.nav-account-menu__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
    color: rgb(107 114 128);
}

.nav-account-menu__divider {
    border-top: 1px solid rgb(226 232 240);
}

.nav-account-menu__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    text-align: left;
    font-size: .875rem;
    font-weight: 600;
    color: rgb(30 41 59);
    transition: background-color .15s ease;
}

.nav-account-menu__item:hover {
    background: rgb(243 244 246);
}

.nav-account-menu__item svg {
    height: 1.125rem;
    width: 1.125rem;
    flex-shrink: 0;
    color: rgb(148 163 184);
}

.nav-account-menu__item--danger {
    color: rgb(220 38 38);
}

.nav-account-menu__item--danger svg {
    color: rgb(248 113 113);
}

.nav-account-menu__item--danger:hover {
    background: rgb(254 242 242);
}

.mobile-account-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .375rem .75rem .75rem;
}

.mobile-account-card__name {
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
}

.mobile-account-card__email {
    font-size: .75rem;
    color: rgba(255, 255, 255, .5);
}

.mobile-account-logout {
    color: rgb(252 165 165);
    transition: background-color .15s ease, color .15s ease;
}

.mobile-account-logout:hover {
    background: rgba(255, 255, 255, .1);
    color: rgb(254 202 202);
}

/* -------------------------------------------------------------------------
   Layout container
   ------------------------------------------------------------------------- */

.section {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */

.card {
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --tw-shadow: 0 10px 30px -10px rgba(2, 15, 33, .18);
    --tw-shadow-colored: 0 10px 30px -10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(0 0 0 / .05);
}

/* -------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(233 240 255 / var(--tw-bg-opacity, 1));
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(0 56 204 / var(--tw-text-opacity, 1));
}